diff --git a/src/components/Account/AccountDetails.tsx b/src/components/Account/AccountDetails.tsx
index 382399fa..e4785ea7 100644
--- a/src/components/Account/AccountDetails.tsx
+++ b/src/components/Account/AccountDetails.tsx
@@ -51,14 +51,6 @@ function AccountDetails(props: Props) {
         />
       </div>
       <div className='w-full border border-x-0 border-white/20 py-4'>
-        <Text size='2xs' className='mb-0.5 w-full text-center text-white/50'>
-          Leverage
-        </Text>
-        <Text size='xs' className='w-full text-center'>
-          4.5x
-        </Text>
-      </div>
-      <div className='w-full px-1 py-4'>
         <Text size='2xs' className='mb-0.5 w-full text-center text-white/50'>
           Balance
         </Text>
diff --git a/src/components/Account/AccountList.tsx b/src/components/Account/AccountList.tsx
index 5ca391ee..604742ff 100644
--- a/src/components/Account/AccountList.tsx
+++ b/src/components/Account/AccountList.tsx
@@ -10,14 +10,10 @@ import { ArrowCircledTopRight, ArrowDownLine, ArrowUpLine, TrashBin } from 'comp
 import Radio from 'components/Radio'
 import SwitchWithLabel from 'components/SwitchWithLabel'
 import Text from 'components/Text'
-import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
-import { DISPLAY_CURRENCY_KEY } from 'constants/localStore'
-import { BN_ZERO } from 'constants/math'
 import useAutoLendEnabledAccountIds from 'hooks/useAutoLendEnabledAccountIds'
-import useLocalStorage from 'hooks/useLocalStorage'
 import usePrices from 'hooks/usePrices'
 import useStore from 'store'
-import { calculateAccountBalanceValue, calculateAccountDepositsValue } from 'utils/accounts'
+import { calculateAccountDepositsValue } from 'utils/accounts'
 import { hardcodedFee } from 'utils/constants'
 import { getPage, getRoute } from 'utils/route'
 
@@ -28,6 +24,7 @@ interface Props {
 const accountCardHeaderClasses = classNames(
   'flex w-full items-center justify-between bg-white/20 px-4 py-2.5 text-white/70',
   'border border-transparent border-b-white/20',
+  'group-hover/account:bg-white/30',
 )
 
 export default function AccountList(props: Props) {
@@ -38,10 +35,6 @@ export default function AccountList(props: Props) {
   const { autoLendEnabledAccountIds, toggleAutoLend } = useAutoLendEnabledAccountIds()
   const deleteAccount = useStore((s) => s.deleteAccount)
   const accountSelected = !!accountId && !isNaN(Number(accountId))
-  const selectedAccountDetails = props.accounts.find((account) => account.id === accountId)
-  const selectedAccountBalance = selectedAccountDetails
-    ? calculateAccountBalanceValue(selectedAccountDetails, prices)
-    : BN_ZERO
 
   async function deleteAccountHandler() {
     if (!accountSelected) return
@@ -72,31 +65,25 @@ export default function AccountList(props: Props) {
             <Card
               id={`account-${account.id}`}
               key={account.id}
-              className='w-full'
-              contentClassName='bg-white/10'
+              className={classNames('w-full', !isActive && 'group/account hover:cursor-pointer')}
+              contentClassName='bg-white/10 group-hover/account:bg-white/20'
+              onClick={() => {
+                if (isActive) return
+                navigate(getRoute(getPage(pathname), address, account.id))
+              }}
               title={
-                <div
-                  className={classNames(
-                    accountCardHeaderClasses,
-                    !isActive && 'group hover:cursor-pointer',
-                  )}
-                  role={!isActive ? 'button' : undefined}
-                  onClick={() => {
-                    if (isActive) return
-                    navigate(getRoute(getPage(pathname), address, account.id))
-                  }}
-                >
+                <div className={accountCardHeaderClasses} role={!isActive ? 'button' : undefined}>
                   <Text size='xs' className='flex flex-1'>
                     Credit Account {account.id}
                   </Text>
-                  <Radio active={isActive} className='group-hover:opacity-100' />
+                  <Radio active={isActive} className='group-hover/account:opacity-100' />
                 </div>
               }
             >
               {isActive ? (
                 <>
                   <div className='w-full border border-transparent border-b-white/20 p-4'>
-                    <AccountStats balance={selectedAccountBalance} risk={75} health={85} />
+                    <AccountStats account={account} />
                   </div>
                   <div className='grid grid-flow-row grid-cols-2 gap-4 p-4'>
                     <Button
@@ -149,7 +136,7 @@ export default function AccountList(props: Props) {
                 </>
               ) : (
                 <div className='w-full p-4'>
-                  <AccountStats balance={positionBalance} risk={60} health={50} />
+                  <AccountStats account={account} />
                 </div>
               )}
             </Card>
diff --git a/src/components/Account/AccountStats.tsx b/src/components/Account/AccountStats.tsx
index 56155511..fe444e29 100644
--- a/src/components/Account/AccountStats.tsx
+++ b/src/components/Account/AccountStats.tsx
@@ -1,25 +1,30 @@
-import BigNumber from 'bignumber.js'
-
 import AccountHealth from 'components/Account/AccountHealth'
 import DisplayCurrency from 'components/DisplayCurrency'
 import { ORACLE_DENOM } from 'constants/oracle'
+import useHealthComputer from 'hooks/useHealthComputer'
+import usePrices from 'hooks/usePrices'
 import { BNCoin } from 'types/classes/BNCoin'
+import { calculateAccountDepositsValue } from 'utils/accounts'
+import { formatHealth } from 'utils/formatters'
+import { BN } from 'utils/helpers'
 
 interface Props {
-  balance: BigNumber
-  risk: number
-  health: number
+  account: Account
 }
 
 export default function AccountStats(props: Props) {
+  const { data: prices } = usePrices()
+  const positionBalance = calculateAccountDepositsValue(props.account, prices)
+  const { health } = useHealthComputer(props.account)
+  const healthFactor = BN(100).minus(formatHealth(health)).toNumber()
   return (
     <div className='w-full flex-wrap'>
       <DisplayCurrency
-        coin={BNCoin.fromDenomAndBigNumber(ORACLE_DENOM, props.balance)}
+        coin={BNCoin.fromDenomAndBigNumber(ORACLE_DENOM, positionBalance)}
         className='w-full text-xl'
       />
       <div className='mt-1 flex w-full items-center'>
-        <AccountHealth health={props.health} classNames='w-[140px]' hasLabel />
+        <AccountHealth health={healthFactor} classNames='w-[140px]' hasLabel />
       </div>
     </div>
   )
diff --git a/src/components/Borrow/BorrowActionButtons.tsx b/src/components/Borrow/BorrowActionButtons.tsx
index ab902d15..73c263a7 100644
--- a/src/components/Borrow/BorrowActionButtons.tsx
+++ b/src/components/Borrow/BorrowActionButtons.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from 'react'
 
 import Button from 'components/Button'
+import ActionButton from 'components/Button/ActionButton'
 import { Plus, ReceiptCheck } from 'components/Icons'
 import useStore from 'store'
 import { getEnabledMarketAssets } from 'utils/assets'
@@ -28,7 +29,7 @@ export default function BorrowActionButtons(props: Props) {
 
   return (
     <div className='flex flex-row space-x-2'>
-      <Button
+      <ActionButton
         leftIcon={<Plus className='w-3' />}
         onClick={borrowHandler}
         color='secondary'
diff --git a/src/components/Button/ActionButton.tsx b/src/components/Button/ActionButton.tsx
new file mode 100644
index 00000000..f7860fe3
--- /dev/null
+++ b/src/components/Button/ActionButton.tsx
@@ -0,0 +1,46 @@
+import { useCallback } from 'react'
+import { useParams } from 'react-router-dom'
+
+import AccountCreateFirst from 'components/Account/AccountCreateFirst'
+import { ACCOUNT_MENU_BUTTON_ID } from 'components/Account/AccountMenuContent'
+import Button from 'components/Button'
+import { Account, PlusCircled } from 'components/Icons'
+import WalletConnectButton from 'components/Wallet/WalletConnectButton'
+import useStore from 'store'
+
+export default function ActionButton(props: ButtonProps) {
+  const { className, color, variant, size } = props
+  const defaultProps = { className, color, variant, size }
+  const address = useStore((s) => s.address)
+  const accounts = useStore((s) => s.accounts)
+  const { accountId } = useParams()
+
+  const handleCreateAccountClick = useCallback(() => {
+    useStore.setState({ focusComponent: <AccountCreateFirst /> })
+  }, [])
+
+  if (!address) return <WalletConnectButton {...defaultProps} />
+
+  if (accounts && accounts.length === 0)
+    return (
+      <Button
+        onClick={handleCreateAccountClick}
+        leftIcon={<PlusCircled />}
+        text='Create Account'
+        {...defaultProps}
+      />
+    )
+
+  if (!accountId)
+    return (
+      <Button
+        text='Select Account'
+        onClick={() => document.getElementById(ACCOUNT_MENU_BUTTON_ID)?.click()}
+        leftIcon={<Account />}
+        rightIcon={undefined}
+        {...defaultProps}
+      />
+    )
+
+  return <Button {...props} />
+}
diff --git a/src/components/Button/utils.tsx b/src/components/Button/utils.tsx
index dc3e42d3..34c97fb8 100644
--- a/src/components/Button/utils.tsx
+++ b/src/components/Button/utils.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 
-export function glowElement(enableAnimations: boolean) {
+export function glowElement(enableAnimations: boolean, className?: string) {
   return (
     <svg
       className={classNames(
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index feb79cbc..b933d9be 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -7,6 +7,7 @@ interface Props {
   children: ReactNode
   className?: string
   contentClassName?: string
+  onClick?: () => void
   title?: string | ReactElement
   id?: string
 }
@@ -15,6 +16,7 @@ export default function Card(props: Props) {
   return (
     <section
       id={props.id}
+      onClick={props.onClick}
       className={classNames(
         props.className,
         'flex flex-col',
diff --git a/src/components/Earn/Farm/VaultTable.tsx b/src/components/Earn/Farm/VaultTable.tsx
index 34edc32d..5bb10fbe 100644
--- a/src/components/Earn/Farm/VaultTable.tsx
+++ b/src/components/Earn/Farm/VaultTable.tsx
@@ -10,7 +10,7 @@ import {
 import classNames from 'classnames'
 import React from 'react'
 
-import Button from 'components/Button'
+import ActionButton from 'components/Button/ActionButton'
 import DisplayCurrency from 'components/DisplayCurrency'
 import VaultExpanded from 'components/Earn/Farm/VaultExpanded'
 import VaultLogo from 'components/Earn/Farm/VaultLogo'
@@ -205,9 +205,7 @@ export const VaultTable = (props: Props) => {
                   <ChevronDown />
                 </div>
               ) : (
-                <Button onClick={enterVaultHandler} color='tertiary'>
-                  Deposit
-                </Button>
+                <ActionButton onClick={enterVaultHandler} color='tertiary' text='Deposit' />
               )}
             </div>
           )
diff --git a/src/components/Earn/Lend/LendingActionButtons.tsx b/src/components/Earn/Lend/LendingActionButtons.tsx
index 62e1b333..792d79a1 100644
--- a/src/components/Earn/Lend/LendingActionButtons.tsx
+++ b/src/components/Earn/Lend/LendingActionButtons.tsx
@@ -1,7 +1,9 @@
 import { useCallback } from 'react'
+import { useParams } from 'react-router-dom'
 
 import { ACCOUNT_MENU_BUTTON_ID } from 'components/Account/AccountMenuContent'
 import Button from 'components/Button'
+import ActionButton from 'components/Button/ActionButton'
 import { ArrowDownLine, ArrowUpLine, Enter } from 'components/Icons'
 import Text from 'components/Text'
 import { Tooltip } from 'components/Tooltip'
@@ -10,6 +12,7 @@ import useAlertDialog from 'hooks/useAlertDialog'
 import useAutoLendEnabledAccountIds from 'hooks/useAutoLendEnabledAccountIds'
 import useCurrentAccountDeposits from 'hooks/useCurrentAccountDeposits'
 import useLendAndReclaimModal from 'hooks/useLendAndReclaimModal'
+import useStore from 'store'
 import { byDenom } from 'utils/array'
 
 interface Props {
@@ -26,6 +29,9 @@ export default function LendingActionButtons(props: Props) {
   const { open: showAlertDialog } = useAlertDialog()
   const { isAutoLendEnabledForCurrentAccount } = useAutoLendEnabledAccountIds()
   const assetDepositAmount = accountDeposits.find(byDenom(asset.denom))?.amount
+  const address = useStore((s) => s.address)
+  const { accountId } = useParams()
+  const hasNoDeposit = !!(!assetDepositAmount && address && accountId)
 
   const handleWithdraw = useCallback(() => {
     if (isAutoLendEnabledForCurrentAccount) {
@@ -64,7 +70,7 @@ export default function LendingActionButtons(props: Props) {
       )}
 
       <ConditionalWrapper
-        condition={!assetDepositAmount}
+        condition={hasNoDeposit}
         wrapper={(children) => (
           <Tooltip
             type='warning'
@@ -76,16 +82,15 @@ export default function LendingActionButtons(props: Props) {
           </Tooltip>
         )}
       >
-        <Button
+        <ActionButton
           leftIcon={<ArrowUpLine />}
           iconClassName={iconClassnames}
-          disabled={!assetDepositAmount}
+          disabled={hasNoDeposit}
           color='secondary'
           onClick={() => openLend(props.data)}
           className={buttonClassnames}
-        >
-          Lend
-        </Button>
+          text='Lend'
+        />
       </ConditionalWrapper>
     </div>
   )
diff --git a/src/components/Modals/WalletAssets/WalletAssetsModalContent.tsx b/src/components/Modals/WalletAssets/WalletAssetsModalContent.tsx
index 4b10e255..18ad5f07 100644
--- a/src/components/Modals/WalletAssets/WalletAssetsModalContent.tsx
+++ b/src/components/Modals/WalletAssets/WalletAssetsModalContent.tsx
@@ -7,11 +7,11 @@ import { byDenom } from 'utils/array'
 import { getAssetByDenom } from 'utils/assets'
 
 interface Props {
-  defaultSelectedDenoms: string[]
   onChangeDenoms: (denoms: string[]) => void
 }
 
 export default function WalletAssetsModalContent(props: Props) {
+  const { onChangeDenoms } = props
   const [searchString, setSearchString] = useState<string>('')
   const balances = useStore((s) => s.balances)
 
@@ -39,12 +39,12 @@ export default function WalletAssetsModalContent(props: Props) {
     currentSelectedDenom?.filter((denom) => filteredAssets.findIndex(byDenom(denom))) || [],
   )
 
-  const onChangeDenoms = useCallback(
+  const onChangeSelect = useCallback(
     (denoms: string[]) => {
       setSelectedDenoms(denoms)
-      props.onChangeDenoms(denoms)
+      onChangeDenoms(denoms)
     },
-    [props.onChangeDenoms],
+    [onChangeDenoms],
   )
 
   return (
@@ -59,7 +59,7 @@ export default function WalletAssetsModalContent(props: Props) {
       <div className='max-h-[446px] overflow-y-scroll scrollbar-hide'>
         <AssetSelectTable
           assets={filteredAssets}
-          onChangeSelected={onChangeDenoms}
+          onChangeSelected={onChangeSelect}
           selectedDenoms={selectedDenoms}
         />
       </div>
diff --git a/src/components/Modals/WalletAssets/index.tsx b/src/components/Modals/WalletAssets/index.tsx
index 4c707163..07ed32d0 100644
--- a/src/components/Modals/WalletAssets/index.tsx
+++ b/src/components/Modals/WalletAssets/index.tsx
@@ -25,10 +25,7 @@ export default function WalletAssetsModal() {
       modalClassName='max-w-modal-xs'
       headerClassName='bg-white/10 border-b-white/5 border-b items-center p-4'
     >
-      <WalletAssetsModalContent
-        defaultSelectedDenoms={modal.selectedDenoms}
-        onChangeDenoms={setSelectedDenoms}
-      />
+      <WalletAssetsModalContent onChangeDenoms={setSelectedDenoms} />
       <div className='flex w-full p-4'>
         <Button className='w-full' onClick={onClose} color='tertiary' text='Select Assets' />
       </div>
diff --git a/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx b/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
index 7ebaa69b..e986ab45 100644
--- a/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
+++ b/src/components/Trade/TradeModule/SwapForm/TradeSummary.tsx
@@ -1,11 +1,11 @@
 import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
 
-import Button from 'components/Button'
+import ActionButton from 'components/Button/ActionButton'
+import useSwapRoute from 'hooks/useSwapRoute'
+import { getAssetByDenom } from 'utils/assets'
 import { hardcodedFee } from 'utils/constants'
 import { formatAmountWithSymbol } from 'utils/formatters'
-import { getAssetByDenom } from 'utils/assets'
-import useSwapRoute from 'hooks/useSwapRoute'
 
 interface Props {
   buyAsset: Asset
@@ -53,12 +53,14 @@ export default function TradeSummary(props: Props) {
           <span>{parsedRoutes}</span>
         </div>
       </div>
-      <Button
+      <ActionButton
         disabled={routes.length === 0 || buyButtonDisabled}
         showProgressIndicator={isButtonBusy || isRouteLoading}
         text={buttonText}
         onClick={handleBuyClick}
         size='md'
+        color='primary'
+        className='w-full'
       />
     </div>
   )
diff --git a/src/components/Wallet/WalletConnectButton.tsx b/src/components/Wallet/WalletConnectButton.tsx
index 39e0fe9a..bd4a0007 100644
--- a/src/components/Wallet/WalletConnectButton.tsx
+++ b/src/components/Wallet/WalletConnectButton.tsx
@@ -11,6 +11,10 @@ import useStore from 'store'
 interface Props {
   textOverride?: string | ReactNode
   disabled?: boolean
+  className?: string
+  color?: ButtonProps['color']
+  variant?: ButtonProps['variant']
+  size?: ButtonProps['size']
 }
 
 export default function WalletConnectButton(props: Props) {
@@ -24,14 +28,15 @@ export default function WalletConnectButton(props: Props) {
   return (
     <div className='relative'>
       <Button
-        variant='solid'
-        color='tertiary'
+        variant={props.variant ?? 'solid'}
+        color={props.color ?? 'tertiary'}
+        size={props.size ?? 'sm'}
         disabled={props.disabled}
         onClick={handleClick}
         leftIcon={<Wallet />}
-      >
-        <span>{props.textOverride || 'Connect Wallet'}</span>
-      </Button>
+        className={props.className}
+        text={props.textOverride ?? 'Connect Wallet'}
+      />
     </div>
   )
 }
diff --git a/src/components/Wallet/WalletConnectedButton.tsx b/src/components/Wallet/WalletConnectedButton.tsx
index ebffd0a5..d10f7f98 100644
--- a/src/components/Wallet/WalletConnectedButton.tsx
+++ b/src/components/Wallet/WalletConnectedButton.tsx
@@ -3,6 +3,7 @@ import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
 import { useCallback, useEffect, useState } from 'react'
 import useClipboard from 'react-use-clipboard'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import Button from 'components/Button'
 import { CircularProgress } from 'components/CircularProgress'
@@ -20,6 +21,7 @@ import useStore from 'store'
 import { ChainInfoID } from 'types/enums/wallet'
 import { getBaseAsset, getEnabledMarketAssets } from 'utils/assets'
 import { truncate } from 'utils/formatters'
+import { getPage, getRoute } from 'utils/route'
 
 export default function WalletConnectedButton() {
   // ---------------
@@ -33,6 +35,8 @@ export default function WalletConnectedButton() {
   const network = useStore((s) => s.client?.connectedWallet.network)
   const baseAsset = getBaseAsset()
   const { data: walletBalances, isLoading } = useWalletBalances(address)
+  const navigate = useNavigate()
+  const { pathname } = useLocation()
 
   // ---------------
   // LOCAL STATE
@@ -57,6 +61,7 @@ export default function WalletConnectedButton() {
     if (!currentWallet) return
     disconnectWallet(currentWallet)
     useStore.setState({ client: undefined, balances: [] })
+    navigate(getRoute(getPage(pathname)))
   }
 
   useEffect(() => {