diff --git a/components/Auth/ForgotPassword.tsx b/components/Auth/ForgotPassword.tsx
index f8207c5c0..08251304c 100644
--- a/components/Auth/ForgotPassword.tsx
+++ b/components/Auth/ForgotPassword.tsx
@@ -2,6 +2,7 @@ import { useForm } from 'react-hook-form'
 import React, { ReactElement, useState } from 'react'
 import style from './auth.module.css'
 import { sendPasswordResetEmail } from 'supertokens-web-js/recipe/emailpassword'
+import Button from 'components/Button'
 
 export default function SignUp (): ReactElement {
   const { register, handleSubmit, reset } = useForm<any>()
@@ -51,7 +52,7 @@ export default function SignUp (): ReactElement {
           <div className={style.error_message}>
             {error !== '' ? <span>{error}</span> : <span></span>}
           </div>
-          <button disabled={disabled} type='submit' className='button_main'>Send email</button>
+          <Button type='submit' disabled={disabled} loading={disabled} className='lg'>Send email</Button>
         </div>
         <div>
           <a href="/signin" className={style.smlink}>Back</a>
diff --git a/components/Auth/ResetPassword.tsx b/components/Auth/ResetPassword.tsx
index 519087859..963743736 100644
--- a/components/Auth/ResetPassword.tsx
+++ b/components/Auth/ResetPassword.tsx
@@ -3,6 +3,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import style from './auth.module.css'
 import { SignUpPasswordPOSTParameters } from 'utils/validators'
 import { submitNewPassword } from 'supertokens-web-js/recipe/emailpassword'
+import Button from 'components/Button'
 
 export default function ResetPassword (): ReactElement {
   const { register, handleSubmit, watch } = useForm<any>()
@@ -78,7 +79,7 @@ export default function ResetPassword (): ReactElement {
           <div className={style.error_message}>
             {error !== '' ? <span>{error}</span> : <span></span>}
           </div>
-          <button disabled={disabled} className='button_main' type='submit'>Submit</button>
+          <Button type='submit' disabled={disabled} loading={disabled} className='lg'>Submit</Button>
         </div>
       </form>
     </>
diff --git a/components/Auth/SignIn.tsx b/components/Auth/SignIn.tsx
index a9e554f99..ddf985c26 100644
--- a/components/Auth/SignIn.tsx
+++ b/components/Auth/SignIn.tsx
@@ -2,6 +2,7 @@ import { useForm } from 'react-hook-form'
 import React, { ReactElement, useState } from 'react'
 import style from './auth.module.css'
 import { signIn } from 'supertokens-web-js/recipe/emailpassword'
+import Button from 'components/Button'
 
 export default function SignIn (): ReactElement {
   const { register, handleSubmit, reset } = useForm<any>()
@@ -60,7 +61,7 @@ export default function SignIn (): ReactElement {
           <div className={style.error_message}>
             {error !== '' ? <span>{error}</span> : <span></span>}
           </div>
-          <button disabled={disabled} className="button_main" type='submit'>Submit</button>
+          <Button type='submit' disabled={disabled} loading={disabled} className='lg'>Submit</Button>
         </div>
       </form>
       <div className={style.signup_ctn}>
diff --git a/components/Auth/SignUp.tsx b/components/Auth/SignUp.tsx
index 2b716015e..2675e77b7 100644
--- a/components/Auth/SignUp.tsx
+++ b/components/Auth/SignUp.tsx
@@ -3,13 +3,16 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import style from './auth.module.css'
 import { signUp } from 'supertokens-web-js/recipe/emailpassword'
 import { SignUpPasswordPOSTParameters } from 'utils/validators'
+import Button from 'components/Button'
 
 export default function SignUp (): ReactElement {
   const { register, handleSubmit, watch, reset } = useForm<any>()
   const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
   const [disabled, setDisabled] = useState(true)
   const onSubmit = async (values: any): Promise<void> => {
     setDisabled(true)
+    setLoading(true)
 
     const email = values.email
     const password = values.password
@@ -45,6 +48,7 @@ export default function SignUp (): ReactElement {
       }
     }
     setDisabled(false)
+    setLoading(false)
   }
 
   const noEmptyValues = (value: SignUpPasswordPOSTParameters): boolean => {
@@ -92,7 +96,7 @@ export default function SignUp (): ReactElement {
           <div className={style.error_message}>
             {error !== '' ? <span>{error}</span> : <span></span>}
           </div>
-          <button disabled={disabled} type='submit' className='button_main'>Submit</button>
+          <Button type='submit' disabled={disabled} loading={loading} className='lg'>Submit</Button>
         </div>
       </form>
       <div className={style.signup_ctn}>
diff --git a/components/Button/button.module.css b/components/Button/button.module.css
new file mode 100644
index 000000000..b5925aa15
--- /dev/null
+++ b/components/Button/button.module.css
@@ -0,0 +1,114 @@
+.button {
+  background: var(--accent-color);
+  color: var(--primary-text-color);
+  border-radius: 6px;
+  padding: 8px 40px;
+  transition: all ease-in-out 200ms;
+  font-size: 16px;
+  border: 1px solid var(--border-color);
+  font-weight: 500;
+  font-family: 'Poppins', sans-serif;
+  position: relative;
+  margin: 0;
+}
+
+.button:hover {
+  background: var(--hover-accent-color);
+}
+
+.button:disabled {
+  background-color: #c0c0c0;
+  color: #5f5e5e;
+  border-color: #c0c0c0;
+}
+
+.button:disabled:hover {
+  background-color: #c0c0c0;
+}
+
+.outlined {
+  background-color: var(--secondary-bg-color);
+}
+
+body[data-theme='dark'] .default {
+  color: var(--primary-bg-color);
+  border-color: var(--primary-bg-color);
+}
+
+.delete {
+  background-color: var(--primary-bg-color);
+  color: rgb(219, 37, 37);
+  font-weight: 700;
+  border-color: rgb(219, 37, 37);
+}
+
+.delete:hover {
+  background-color: rgb(219, 37, 37);
+  color: var(--primary-text-color);
+}
+
+.loading {
+  color: transparent !important;
+}
+
+.small {
+  padding: 4px 26px;
+  background-color: var(--secondary-bg-color);
+}
+
+.xs {
+  padding: 4px 10px;
+  background-color: var(--secondary-bg-color);
+}
+
+.ml {
+  margin-left: 10px;
+}
+
+.small_delete {
+  margin-top: 10px;
+  background-color: var(--primary-bg-color);
+  color: rgb(219, 37, 37);
+  font-weight: 700;
+  border-color: rgb(219, 37, 37);
+}
+
+.small_delete:hover {
+  background-color: rgb(219, 37, 37);
+  color: var(--primary-text-color);
+}
+
+.lg {
+  padding: 15px 40px;
+}
+
+/**************************** Loading Spinner  *************************/
+
+.loading_spinner_ctn {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  z-index: 5;
+}
+
+.loading_spinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  border-top-color: var(--primary-text-color);
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/components/Button/index.tsx b/components/Button/index.tsx
new file mode 100644
index 000000000..367d981a8
--- /dev/null
+++ b/components/Button/index.tsx
@@ -0,0 +1,44 @@
+import { ReactNode, MouseEventHandler } from 'react'
+import style from './button.module.css'
+
+const LoadingSpinner = (): JSX.Element => {
+  return (
+    <div className={style.loading_spinner_ctn}>
+      <div className={style.loading_spinner} />
+    </div>
+  )
+}
+
+interface ButtonProps {
+  children: ReactNode
+  disabled?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  onClick?: MouseEventHandler<HTMLButtonElement>
+  variant?: 'default' | 'outlined' | 'delete' | 'small' | 'xs'
+  className?: string
+  loading?: boolean
+}
+
+export default function TopBar ({
+  children,
+  disabled,
+  type = 'button',
+  onClick,
+  variant = 'default',
+  className = '',
+  loading
+}: ButtonProps): JSX.Element {
+  return (
+    <button
+      disabled={disabled}
+      type={type}
+      className={`${style.button} ${style[variant]} ${style[className]} ${
+        loading === true ? style.loading : ''
+      }`}
+      onClick={onClick}
+    >
+      {children}
+      {loading === true && <LoadingSpinner />}
+    </button>
+  )
+}
diff --git a/components/Organization/CreateOrganization.tsx b/components/Organization/CreateOrganization.tsx
index ca5642b6f..a7ab7457e 100644
--- a/components/Organization/CreateOrganization.tsx
+++ b/components/Organization/CreateOrganization.tsx
@@ -1,12 +1,15 @@
 import { useForm } from 'react-hook-form'
 import { UserWithSupertokens } from 'services/userService'
 import style from './organization.module.css'
+import Button from 'components/Button'
 
 interface IProps {
   user: UserWithSupertokens
   setError: Function
   setOrg: Function
   setOrgMembers: Function
+  setLoading: Function
+  loading: boolean
 }
 
 interface CreateOrganizationForm {
@@ -14,11 +17,12 @@ interface CreateOrganizationForm {
   userId: string
 }
 
-const CreateOrganization = ({ user, setError, setOrg, setOrgMembers }: IProps): JSX.Element => {
+const CreateOrganization = ({ user, setError, setOrg, setOrgMembers, loading, setLoading }: IProps): JSX.Element => {
   const { register, handleSubmit } = useForm<CreateOrganizationForm>({
   })
 
   const onSubmit = async (params: any): Promise<void> => {
+    setLoading(true)
     const res = await fetch('/api/organization', {
       method: 'POST',
       headers: {
@@ -33,9 +37,11 @@ const CreateOrganization = ({ user, setError, setOrg, setOrgMembers }: IProps):
       const data = await res.json()
       setOrg(data.organization)
       setOrgMembers([user.userProfile])
+      setLoading(false)
     } else {
       const json = await res.json()
       setError(json.message)
+      setLoading(false)
     }
   }
 
@@ -53,9 +59,7 @@ const CreateOrganization = ({ user, setError, setOrg, setOrgMembers }: IProps):
       required
       className={style.text_input}
     />
-      <button className={style.add_btn} onClick={() => (false)}>
-        Create
-      </button>
+      <Button className='ml' type='submit' loading={loading}>Create</Button>
     </div>
   </form>
 }
diff --git a/components/Organization/DeleteOrganization.tsx b/components/Organization/DeleteOrganization.tsx
index 718189a1c..2d56479bd 100644
--- a/components/Organization/DeleteOrganization.tsx
+++ b/components/Organization/DeleteOrganization.tsx
@@ -1,6 +1,7 @@
 import { Organization } from '@prisma/client'
 import { UserWithSupertokens } from 'services/userService'
 import style from './organization.module.css'
+import Button from 'components/Button'
 
 interface IProps {
   user: UserWithSupertokens
@@ -30,14 +31,14 @@ const DeleteOrganization = ({ user, setError, setOrg, org, setOrgEdit }: IProps)
 
   return (<>
   <div className={style.confirm_delete_ctn}>
-      <p>Are you sure you want to delete your organization?<br />This action cannot be undone.</p>
+      <p>Are you sure you want to delete your organization? This action cannot be undone.</p>
       <div className={style.confirm_delete_btn_ctn}>
-      <button className={style.delete_btn} onClick={() => { void onDelete() }}>
-          Yes, Delete Organization
-        </button>
-        <button className={style.cancel_btn} onClick={() => setOrgEdit('')}>
+        <Button variant='xs' onClick={() => setOrgEdit('')}>
           Cancel
-        </button>
+        </Button>
+        <Button variant='xs' onClick={() => { void onDelete() }} className='small_delete'>
+          Yes, Delete Organization
+        </Button>
         </div>
       </div>
     </>
diff --git a/components/Organization/LeaveOrganization.tsx b/components/Organization/LeaveOrganization.tsx
index 1fd44421d..681fc0da3 100644
--- a/components/Organization/LeaveOrganization.tsx
+++ b/components/Organization/LeaveOrganization.tsx
@@ -1,6 +1,7 @@
 import { Organization } from '@prisma/client'
 import { UserWithSupertokens } from 'services/userService'
 import style from './organization.module.css'
+import Button from 'components/Button'
 
 interface IProps {
   user: UserWithSupertokens
@@ -32,12 +33,12 @@ const LeaveOrganization = ({ setError, setOrg, org, setOrgEdit }: IProps): JSX.E
     <div className={style.confirm_delete_ctn} style={{ marginTop: '40px' }}>
       <p>Are you sure you want to leave your organization?<br />This action cannot be undone.</p>
       <div className={style.confirm_delete_btn_ctn}>
-      <button className={style.delete_btn} onClick={() => { void onLeave() }}>
-          Yes, Leave Organization
-        </button>
-        <button className={style.cancel_btn} onClick={() => setOrgEdit('')}>
+        <Button variant='xs' onClick={() => setOrgEdit('')}>
           Cancel
-        </button>
+        </Button>
+        <Button variant='xs' className='small_delete' onClick={() => { void onLeave() }}>
+          Yes, Leave Organization
+        </Button>
         </div>
       </div>
   </>
diff --git a/components/Organization/UpdateOrganization.tsx b/components/Organization/UpdateOrganization.tsx
index ac76d7b15..4d752886e 100644
--- a/components/Organization/UpdateOrganization.tsx
+++ b/components/Organization/UpdateOrganization.tsx
@@ -1,6 +1,7 @@
 import { useForm } from 'react-hook-form'
 import { UserWithSupertokens } from 'services/userService'
 import style from './organization.module.css'
+import Button from 'components/Button'
 
 interface IProps {
   user: UserWithSupertokens
@@ -54,9 +55,9 @@ const UpdateOrganization = ({ user, setError, setOrg, setOrgEdit }: IProps): JSX
         required
         className={style.text_input}
       />
-        <button className={style.add_btn} onClick={() => (false)}>
+        <Button className='ml' type='submit'>
           Update
-        </button>
+        </Button>
       </div>
       <button className={style.cancel_btn} onClick={() => setOrgEdit('')}>
           Cancel
diff --git a/components/Organization/ViewOrganization.tsx b/components/Organization/ViewOrganization.tsx
index ea19ca800..4fe902b28 100644
--- a/components/Organization/ViewOrganization.tsx
+++ b/components/Organization/ViewOrganization.tsx
@@ -7,6 +7,7 @@ import style from './organization.module.css'
 import InviteLink from './InviteLink'
 import LeaveOrganization from './LeaveOrganization'
 import { Organization, UserProfile } from '@prisma/client'
+import Button from 'components/Button'
 
 interface IProps {
   user: UserWithSupertokens
@@ -19,6 +20,7 @@ const ViewOrganization = ({ user, orgMembers, setOrgMembers, organization }: IPr
   const [org, setOrg] = useState(organization)
   const [error, setError] = useState('')
   const [orgEdit, setOrgEdit] = useState('')
+  const [loading, setLoading] = useState(false)
 
   return (
     <div className={style.org_ctn}>
@@ -50,21 +52,22 @@ const ViewOrganization = ({ user, orgMembers, setOrgMembers, organization }: IPr
             <>
               <div className={style.row_ctn}>
                 <div>Organization Name</div>
-                <div
-                  className={style.edit_btn}
+                <Button
+                  variant='xs'
                   onClick={() => setOrgEdit('name')}
                 >
                   Edit Name
-                </div>
+                </Button>
               </div>
               <div className={style.row_ctn}>
                 <div>Delete Organization</div>
-                <div
-                  className={style.delete_btn}
+                <Button
+                  variant='xs'
+                  className='small_delete'
                   onClick={() => setOrgEdit('delete')}
                 >
                   Delete Organization
-                </div>
+                </Button>
               </div>
             </>
                )
@@ -102,12 +105,11 @@ const ViewOrganization = ({ user, orgMembers, setOrgMembers, organization }: IPr
            {orgEdit === ''
              ? (
             <div className={style.leave_btn_ctn}>
-                <div
-                  className={style.delete_btn}
+                <Button variant='xs' className='small_delete'
                   onClick={() => setOrgEdit('leave')}
                 >
                   Leave Organization
-                </div>
+                </Button>
             </div>
                )
              : (
@@ -122,7 +124,7 @@ const ViewOrganization = ({ user, orgMembers, setOrgMembers, organization }: IPr
             <br />
             Or create your own:
             </p>
-            <CreateOrganization user={user} setError={setError} setOrg={setOrg} setOrgMembers={setOrgMembers}/>
+            <CreateOrganization user={user} setError={setError} setOrg={setOrg} setOrgMembers={setOrgMembers} loading={loading} setLoading={setLoading} />
           </>
             )}
       {error !== '' && <div className={style.error_message}>{error}</div>}
diff --git a/components/Organization/organization.module.css b/components/Organization/organization.module.css
index 49f4ab832..18fe336cd 100644
--- a/components/Organization/organization.module.css
+++ b/components/Organization/organization.module.css
@@ -29,12 +29,6 @@ body[data-theme="dark"] .org_ctn input {
   margin: 0;
 }
 
-.create_input_ctn button {
-  width: 120px;
-  margin: 0;
-  margin-left: 10px;
-}
-
 .error_message {
   width: 100%;
   background-color: rgb(250, 165, 165);
@@ -47,6 +41,7 @@ body[data-theme="dark"] .org_ctn input {
   display: flex;
   margin-top: 10px;
   justify-content: space-between;
+  align-items: center;
 }
 
 .sub_header {
@@ -134,10 +129,7 @@ body[data-theme="dark"] .cancel_btn:hover {
 .confirm_delete_btn_ctn {
   display: flex;
   flex-direction: column;
-}
-
-.confirm_delete_btn_ctn button {
-  height: 30px;
+  margin-left: 10px;
 }
 
 .leave_btn_ctn {
diff --git a/components/Paybutton/EditButtonForm.tsx b/components/Paybutton/EditButtonForm.tsx
index 11bbbacd4..5590f434b 100644
--- a/components/Paybutton/EditButtonForm.tsx
+++ b/components/Paybutton/EditButtonForm.tsx
@@ -10,6 +10,7 @@ import TrashIcon from 'assets/trash-icon.png'
 import axios from 'axios'
 import Router from 'next/router'
 import config from 'config'
+import Button from 'components/Button'
 
 interface IProps {
   paybutton: PaybuttonWithAddresses
@@ -92,8 +93,8 @@ export default function EditButtonForm ({ paybutton, refreshPaybutton }: IProps)
                   {(error === undefined || error === '') ? null : <div className={style.error_message}>{error}</div>}
                   <button disabled={disableSubmit} type='button' onClick={() => { setModal(false); reset(); setDeleteModal(true) }} className={style.delete_btn}>Delete Button<div> <Image src={TrashIcon} alt='delete' /></div></button>
                   <div>
-                    <button disabled={disableSubmit} type="submit" className='button_main'>{ disableSubmit ? '...' : 'Submit' } </button>
-                    <button disabled={disableSubmit} onClick={() => { setModal(false); reset() }} className='button_outline'>Cancel</button>
+                    <Button disabled={disableSubmit} variant='outlined' onClick={() => { setModal(false); reset() }}>Cancel</Button>
+                    <Button disabled={disableSubmit} type="submit" className='ml' loading={disableSubmit}>Submit</Button>
                   </div>
                 </div>
               </form>
@@ -112,9 +113,8 @@ export default function EditButtonForm ({ paybutton, refreshPaybutton }: IProps)
                 <div className={style.btn_row}>
                   {(deleteError === undefined || deleteError === '') ? null : <div className={style.error_message}>{deleteError}</div>}
                   <div>
-
-                    <button disabled={disableSubmit} onClick={() => { void onDelete(paybutton.id) }} className={style.delete_confirm_btn}>Yes, Delete This Button</button>
-                    <button disabled={disableSubmit} onClick={() => { setDeleteModal(false); reset(); setModal(true) }} className={style.cancel_btn}>Cancel</button>
+                    <Button disabled={disableSubmit} onClick={() => { setDeleteModal(false); reset(); setModal(true) }} variant='outlined'>Cancel</Button>
+                    <Button variant='delete' className='ml' disabled={disableSubmit} onClick={() => { void onDelete(paybutton.id) }}>Yes, Delete This Button</Button>
                   </div>
                 </div>
             </div>
diff --git a/components/Paybutton/PaybuttonForm.tsx b/components/Paybutton/PaybuttonForm.tsx
index f4b3d9ce7..2b177538b 100644
--- a/components/Paybutton/PaybuttonForm.tsx
+++ b/components/Paybutton/PaybuttonForm.tsx
@@ -5,7 +5,7 @@ import { WalletWithAddressesWithPaybuttons } from 'services/walletService'
 import Image from 'next/image'
 import style from './paybutton.module.css'
 import Plus from 'assets/plus.png'
-import LoadingSpinner from './LoadingSpinner'
+import Button from 'components/Button'
 
 interface IProps {
   onSubmit: (data: PaybuttonPOSTParameters) => Promise<void>
@@ -87,8 +87,8 @@ export default function PaybuttonForm ({ onSubmit, paybuttons, wallets, error }:
                 <textarea {...register('description')} id='description' name='description' placeholder="More information about your button (optional)"/>
                 <div className={style.btn_row}>
                   {error !== '' && <div className={style.error_message}>{error}</div>}
-                  <button type='submit' className='button_main loading_btn' disabled={loading}>Submit{loading && <LoadingSpinner />}</button>
-                  <button onClick={() => { setModal(false); reset() }} className='button_outline' disabled={loading}>Cancel</button>
+                  <Button onClick={() => { setModal(false); reset() }} variant="outlined" disabled={loading}>Cancel</Button>
+                  <Button type='submit'disabled={loading} loading={loading} className='ml'>Submit</Button>
                 </div>
               </form>
             </div>
diff --git a/components/Paybutton/paybutton.module.css b/components/Paybutton/paybutton.module.css
index ac88af751..79f158504 100644
--- a/components/Paybutton/paybutton.module.css
+++ b/components/Paybutton/paybutton.module.css
@@ -193,11 +193,6 @@ body[data-theme='dark'] .form_ctn select:not([multiple]) {
   align-items: center;
 }
 
-.form_ctn button {
-  margin-right: 10px;
-  padding: 10px 40px;
-}
-
 .form_ctn button:last-child {
   margin-right: 0px;
   box-shadow: none;
diff --git a/components/Wallet/EditWalletForm.tsx b/components/Wallet/EditWalletForm.tsx
index 5e1b4eaee..e15badd4a 100644
--- a/components/Wallet/EditWalletForm.tsx
+++ b/components/Wallet/EditWalletForm.tsx
@@ -10,6 +10,7 @@ import { WalletWithAddressesWithPaybuttons } from 'services/walletService'
 import { AddressWithPaybuttons } from 'services/addressService'
 import axios from 'axios'
 import { UserNetworksInfo } from 'services/networkService'
+import Button from 'components/Button'
 
 interface IProps {
   wallet: WalletWithAddressesWithPaybuttons
@@ -149,8 +150,8 @@ export default function EditWalletForm ({ wallet, userAddresses, refreshWalletLi
                       <button onClick={() => { setModal(false); reset(); setDeleteModal(true) }} className={style_pb.delete_btn}>Delete Wallet<div> <Image src={TrashIcon} alt='delete' /></div></button>
                         )}
                     <div>
-                      <button type='submit' className='button_main'>Submit</button>
-                      <button onClick={() => { setModal(false); reset() }} className='button_outline'>Cancel</button>
+                      <Button onClick={() => { setModal(false); reset() }} variant='outlined'>Cancel</Button>
+                      <Button type='submit' className='ml'>Submit</Button>
                     </div>
                   </div>
                 </form>
@@ -167,9 +168,8 @@ export default function EditWalletForm ({ wallet, userAddresses, refreshWalletLi
                 <label htmlFor='name'>Are you sure you want to delete {wallet.name}?<br />This action cannot be undone.</label>
                 <div className={style_pb.btn_row}>
                   <div>
-
-                    <button onClick={() => { void onDelete(wallet.id) }} className={style_pb.delete_confirm_btn}>Yes, Delete This Wallet</button>
-                    <button onClick={() => { setDeleteModal(false); reset(); setModal(true) }} className={style_pb.cancel_btn}>Cancel</button>
+                    <Button onClick={() => { setDeleteModal(false); reset(); setModal(true) }} variant='outlined'>Cancel</Button>
+                    <Button onClick={() => { void onDelete(wallet.id) }} className='ml' variant='delete'>Yes, Delete This Wallet</Button>
                   </div>
                 </div>
               </div>
diff --git a/components/Wallet/WalletForm.tsx b/components/Wallet/WalletForm.tsx
index a075ab75f..e5b356c17 100644
--- a/components/Wallet/WalletForm.tsx
+++ b/components/Wallet/WalletForm.tsx
@@ -8,6 +8,7 @@ import style_pb from 'components/Paybutton/paybutton.module.css'
 import Plus from 'assets/plus.png'
 import axios from 'axios'
 import { UserNetworksInfo } from 'services/networkService'
+import Button from 'components/Button'
 
 interface IProps {
   userAddresses: AddressWithPaybuttons[]
@@ -128,8 +129,8 @@ export default function WalletForm ({ userAddresses, refreshWalletList, userId,
                   </div>
                   <div className={style_pb.btn_row}>
                     {error !== '' && <div className={style_pb.error_message}>{error}</div>}
-                    <button type='submit' className='button_main'>Submit</button>
-                    <button onClick={() => { setModal(false); reset() }} className='button_outline'>Cancel</button>
+                    <Button onClick={() => { setModal(false); reset() }} variant='outlined'>Cancel</Button>
+                    <Button type='submit' className='ml'>Submit</Button>
                   </div>
                 </form>
               </div>
diff --git a/pages/button/[id].tsx b/pages/button/[id].tsx
index 936365b2e..2f747b61c 100644
--- a/pages/button/[id].tsx
+++ b/pages/button/[id].tsx
@@ -17,7 +17,7 @@ import { UserProfile } from '@prisma/client'
 import { fetchUserProfileFromId } from 'services/userService'
 import { removeUnserializableFields } from 'utils'
 import moment from 'moment-timezone'
-import LoadingSpinner from 'components/Paybutton/LoadingSpinner'
+import Button from 'components/Button'
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   supertokensNode.init(SuperTokensConfig.backendConfig())
@@ -51,7 +51,7 @@ interface PaybuttonProps {
   userProfile: UserProfile
 }
 
-export default function Button (props: PaybuttonProps): React.ReactElement {
+export default function PayButton (props: PaybuttonProps): React.ReactElement {
   const [paybutton, setPaybutton] = useState<PaybuttonWithAddresses | undefined>(undefined)
   const [isSyncing, setIsSyncing] = useState<KeyValueT<boolean>>({})
   const [tableRefreshCount, setTableRefreshCount] = useState<number>(0)
@@ -165,7 +165,7 @@ export default function Button (props: PaybuttonProps): React.ReactElement {
   if (paybutton != null) {
     return (
       <>
-        <div className='back_btn' onClick={() => router.back()}>Back</div>
+        <Button variant='small' onClick={() => router.back()}>Back</Button>
         <PaybuttonDetail paybutton={paybutton} refreshPaybutton={refreshPaybutton} listView={false}/>
         <div style={{ display: 'flex', alignItems: 'center', alignContent: 'center', justifyContent: 'space-between' }}>
           <h4>Transactions</h4>
@@ -178,8 +178,7 @@ export default function Button (props: PaybuttonProps): React.ReactElement {
                 value={selectedCurrency}
                 onChange={handleExport}
                 disabled={loading}
-                className="button_outline button_small"
-                style={{ marginBottom: '0', cursor: 'pointer' }}
+                className="select_button"
               >
                 <option value='' disabled>{loading ? 'Downloading...' : 'Export as CSV'}</option>
                 <option key="all" value="all">
@@ -195,14 +194,14 @@ export default function Button (props: PaybuttonProps): React.ReactElement {
               </select>
                 )
               : (
-              <button
+              <Button
                 onClick={handleExport}
                 disabled={loading}
-                className="button_outline button_small loading_btn"
-                style={{ marginBottom: '0', cursor: 'pointer' }}
+                loading={loading}
+                variant='small'
               >
-                Export as CSV{loading && <LoadingSpinner />}
-              </button>
+                Export as CSV
+              </Button>
                 )}
           </div>
         </div>
diff --git a/pages/payments/index.tsx b/pages/payments/index.tsx
index 8f28ebf72..6785a8f96 100644
--- a/pages/payments/index.tsx
+++ b/pages/payments/index.tsx
@@ -16,6 +16,7 @@ import moment from 'moment-timezone'
 import TopBar from 'components/TopBar'
 import { fetchUserWithSupertokens, UserWithSupertokens } from 'services/userService'
 import { UserProfile } from '@prisma/client'
+import Button from 'components/Button'
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   // this runs on the backend, so we must call init on supertokens-node SDK
@@ -55,6 +56,7 @@ export default function Payments ({ user, userId }: PaybuttonsProps): React.Reac
   const timezone = user?.userProfile.preferredTimezone === '' ? moment.tz.guess() : user?.userProfile?.preferredTimezone
   const [selectedCurrencyCSV, setSelectedCurrencyCSV] = useState<string>('')
   const [paybuttonNetworks, setPaybuttonNetworks] = useState<Set<number>>(new Set())
+  const [loading, setLoading] = useState(false)
 
   const fetchPaybuttons = async (): Promise<any> => {
     const res = await fetch(`/api/paybuttons?userId=${user?.userProfile.id}`, {
@@ -166,6 +168,7 @@ export default function Payments ({ user, userId }: PaybuttonsProps): React.Reac
 
   const downloadCSV = async (userId: string, userProfile: UserProfile, currency: string): Promise<void> => {
     try {
+      setLoading(true)
       const preferredCurrencyId = userProfile?.preferredCurrencyId ?? ''
       let url = `/api/payments/download/?currency=${preferredCurrencyId}`
       const isCurrencyEmptyOrUndefined = (value: string): boolean => (value === '' || value === undefined)
@@ -197,6 +200,7 @@ export default function Payments ({ user, userId }: PaybuttonsProps): React.Reac
     } catch (error) {
       console.error('An error occurred while downloading the CSV:', error)
     } finally {
+      setLoading(false)
       setSelectedCurrencyCSV('')
     }
   }
@@ -217,30 +221,30 @@ export default function Payments ({ user, userId }: PaybuttonsProps): React.Reac
                 id='export-btn'
                 value={selectedCurrencyCSV}
                 onChange={handleExport}
-                className="button_outline button_small"
-                style={{ marginBottom: '0', cursor: 'pointer' }}
+                className="select_button"
               >
-                <option value='' disabled> Export as CSV</option>
+                <option value='' disabled>{loading ? 'Downloading...' : 'Export as CSV'}</option>
                 <option key="all" value="all">
-                  All Currencies
+                  {loading ? 'Downloading...' : 'All Currencies'}
                 </option>
                 {Object.entries(NETWORK_TICKERS_FROM_ID)
                   .filter(([id]) => paybuttonNetworks.has(Number(id)))
                   .map(([id, ticker]) => (
                     <option key={id} value={ticker}>
-                      {ticker.toUpperCase()}
+                      {loading ? 'Downloading...' : ticker.toUpperCase()}
                     </option>
                   ))}
               </select>
           )
         : (
-              <div
+              <Button
                 onClick={handleExport}
-                className="button_outline button_small"
-                style={{ marginBottom: '0', cursor: 'pointer' }}
+                variant='small'
+                disabled={loading}
+                loading={loading}
               >
                 Export as CSV
-              </div>)}
+              </Button>)}
       </div>
       <TableContainerGetter
         columns={columns}
diff --git a/styles/global.css b/styles/global.css
index c8aedee08..8bd3dae12 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -368,8 +368,25 @@ body[data-theme='dark'] .button_main {
   box-shadow: none !important;
 }
 
+.select_button {
+  border-radius: 6px;
+  padding: 4px 26px;
+  color: var(--primary-text-color);
+  border: 1px solid var(--border-color);
+  transition: all ease-in-out 200ms;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: 'Poppins', sans-serif;
+  background-color: var(--secondary-bg-color);
+  cursor: pointer;
+}
+
+.select_button:hover {
+  background-color: var(--accent-color);
+}
+
 .button_outline {
-  border-radius: 10px;
+  border-radius: 6px;
   padding: 15px 40px;
   color: var(--primary-text-color) !important;
   border: 1px solid var(--primary-text-color);
@@ -379,6 +396,7 @@ body[data-theme='dark'] .button_main {
   font-weight: 500;
   font-family: 'Poppins', sans-serif;
   background-color: var(--secondary-bg-color);
+
 }
 
 .button_outline:hover {
diff --git a/styles/variables.css b/styles/variables.css
index 841c4ad18..6e5a02342 100644
--- a/styles/variables.css
+++ b/styles/variables.css
@@ -5,6 +5,8 @@ body[data-theme='light'] {
   --primary-text-color: #231f20;
   --secondary-text-color: #7f7f7f;
   --accent-color: #669cfe;
+  --hover-accent-color: #417ded;
+  --border-color: #231f20;
   --chart-line-color: #231f201f;
 }
 
@@ -14,5 +16,7 @@ body[data-theme='dark'] {
   --primary-text-color: #ffffff;
   --secondary-text-color: #cacaca;
   --accent-color: #669cfe;
+  --hover-accent-color: #417ded;
+  --border-color: #8e8e8e;
   --chart-line-color: #87858635;
 }