diff --git a/frontend/src/app/components/UserForm.tsx b/frontend/src/app/components/UserForm.tsx
index 3f35ed7..055371f 100644
--- a/frontend/src/app/components/UserForm.tsx
+++ b/frontend/src/app/components/UserForm.tsx
@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react'
 import { Password, User } from '../../types'
 import { useUserContext } from '../../contexts/UserContext'
 import { message } from 'antd'
+import { Button } from '../../elements/Button'
 
 export const UserForm = () => {
   const { user } = useUserContext()
@@ -78,9 +79,9 @@ export const UserForm = () => {
             onChange={(e) => setPasswordConfirm(e.target.value)}
           />
         </label>
-        <button type="submit" disabled={!valid}>
+        <Button htmlType="submit" disabled={!valid}>
           Save
-        </button>
+        </Button>
       </form>
     </>
   )
diff --git a/frontend/src/layout/AppHeader/index.tsx b/frontend/src/layout/AppHeader/index.tsx
index 5d72a83..b217557 100644
--- a/frontend/src/layout/AppHeader/index.tsx
+++ b/frontend/src/layout/AppHeader/index.tsx
@@ -1,10 +1,11 @@
 import { ReactNode } from 'react'
-import { Avatar, Button, Dropdown, Menu } from 'antd'
+import { Avatar, Dropdown, Menu } from 'antd'
 import { Header } from 'antd/lib/layout/layout'
 import { Link, useHistory } from 'react-router-dom'
 import { useUserContext } from '../../contexts/UserContext'
 
 import './style.scss'
+import { Button } from '../../elements/Button'
 
 type Props = {
   children: ReactNode
diff --git a/frontend/src/pages/ForgotPassword/index.tsx b/frontend/src/pages/ForgotPassword/index.tsx
index a1bb339..41da97f 100644
--- a/frontend/src/pages/ForgotPassword/index.tsx
+++ b/frontend/src/pages/ForgotPassword/index.tsx
@@ -1,5 +1,6 @@
-import { Button, Input, Layout } from 'antd'
+import { Input, Layout } from 'antd'
 import { useState } from 'react'
+import { Button } from '../../elements/Button'
 
 export const ForgotPassword = () => {
   const [email, setEmail] = useState('')
diff --git a/frontend/src/pages/NewTransaction/index.tsx b/frontend/src/pages/NewTransaction/index.tsx
index ae51e70..e94baaf 100644
--- a/frontend/src/pages/NewTransaction/index.tsx
+++ b/frontend/src/pages/NewTransaction/index.tsx
@@ -1,5 +1,6 @@
 import { InputNumber } from 'antd'
 import { useState } from 'react'
+import { Button } from '../../elements/Button'
 
 import '../../scss/transaction-modal.scss'
 type Props = {
@@ -52,8 +53,8 @@ export const TransactionForm = ({ stackId }: Props) => {
               Select Account
             </option>
           </select>
-          <button type="button">cancel</button>
-          <button type="submit">Submit</button>
+          <Button htmlType="button">cancel</Button>
+          <Button htmlType="submit">Submit</Button>
         </label>
       </form>
     </div>
diff --git a/frontend/src/widgets/AccountSelect/index.tsx b/frontend/src/widgets/AccountSelect/index.tsx
index 9840027..139d651 100644
--- a/frontend/src/widgets/AccountSelect/index.tsx
+++ b/frontend/src/widgets/AccountSelect/index.tsx
@@ -3,6 +3,7 @@ import { message } from 'antd'
 import { useUserContext } from '../../contexts/UserContext'
 
 import './style.scss'
+import { Button } from '../../elements/Button'
 
 type Props = {
   selectProfile: (id: string) => void
@@ -22,12 +23,12 @@ export const AccountSelect = ({ selectProfile }: Props) => {
       <div className="account-select">
         {accounts?.length
           ? accounts.map((account) => (
-              <button
+              <Button
                 key={`account-${account.name}`}
                 onClick={() => handleSelect(account.id)}
               >
                 {account.name}
-              </button>
+              </Button>
             ))
           : ''}
         <Link to="/account/new">Create New Budget!</Link>