diff --git a/components/BalancesTable.tsx b/components/BalancesTable.tsx
index 01ad7b07..1320f4cd 100644
--- a/components/BalancesTable.tsx
+++ b/components/BalancesTable.tsx
@@ -127,7 +127,7 @@ const BalancesTable = ({ showZeroBalances = false }) => {
   const unsettledBalances = balances.filter((bal) => bal.unsettled > 0)
 
   return (
-    <div className={`flex flex-col pb-2 sm:pb-4 sm:pt-4`}>
+    <div className={`flex flex-col pb-2 sm:pb-4`}>
       {unsettledBalances.length > 0 ? (
         <div className="border border-th-bkg-4 rounded-lg mb-6 p-4 sm:p-6">
           <div className="flex items-center justify-between pb-4">
@@ -167,7 +167,7 @@ const BalancesTable = ({ showZeroBalances = false }) => {
           })}
         </div>
       ) : null}
-      <div className={`-my-2 overflow-x-auto`}>
+      <div className={`md:-my-2 md:overflow-x-auto`}>
         <div className={`align-middle inline-block min-w-full`}>
           {items.length > 0 ? (
             !isMobile ? (
@@ -421,19 +421,13 @@ const BalancesTable = ({ showZeroBalances = false }) => {
             ) : (
               <>
                 <MobileTableHeader
-                  headerTemplate={
-                    <>
-                      <div className="col-span-7">{t('asset')}</div>
-                      <div className="col-span-4 text-right">
-                        {t('net-balance')}
-                      </div>
-                    </>
-                  }
+                  colOneHeader={t('asset')}
+                  colTwoHeader={t('net-balance')}
                 />
                 {items.map((balance, index) => (
                   <ExpandableRow
                     buttonTemplate={
-                      <div className="col-span-11 flex items-center justify-between text-fgd-1">
+                      <div className="flex items-center justify-between text-fgd-1 w-full">
                         <div className="flex items-center text-fgd-1">
                           <img
                             alt=""
@@ -445,7 +439,7 @@ const BalancesTable = ({ showZeroBalances = false }) => {
 
                           {balance.symbol}
                         </div>
-                        <div className="mr-1.5 text-fgd-1 text-right">
+                        <div className="text-fgd-1 text-right">
                           {balance.net.toFixed()}
                         </div>
                       </div>
@@ -454,62 +448,68 @@ const BalancesTable = ({ showZeroBalances = false }) => {
                     index={index}
                     panelTemplate={
                       <>
-                        <div className="col-span-1 text-left">
-                          <div className="pb-0.5 text-th-fgd-3 text-xs">
-                            {t('deposits')}
+                        <div className="grid grid-cols-2 grid-flow-row gap-4 pb-4">
+                          <div className="text-left">
+                            <div className="pb-0.5 text-th-fgd-3 text-xs">
+                              {t('deposits')}
+                            </div>
+                            {balance.deposits.toFixed()}
                           </div>
-                          {balance.deposits.toFixed()}
-                        </div>
-                        <div className="col-span-1 text-left">
-                          <div className="pb-0.5 text-th-fgd-3 text-xs">
-                            {t('borrows')}
+                          <div className="text-left">
+                            <div className="pb-0.5 text-th-fgd-3 text-xs">
+                              {t('borrows')}
+                            </div>
+                            {balance.borrows.toFixed()}
                           </div>
-                          {balance.borrows.toFixed()}
-                        </div>
-                        <div className="col-span-1 text-left">
-                          <div className="pb-0.5 text-th-fgd-3 text-xs">
-                            {t('in-orders')}
+                          <div className="text-left">
+                            <div className="pb-0.5 text-th-fgd-3 text-xs">
+                              {t('in-orders')}
+                            </div>
+                            {balance.orders.toFixed()}
                           </div>
-                          {balance.orders.toFixed()}
-                        </div>
-                        <div className="col-span-1 text-left">
-                          <div className="pb-0.5 text-th-fgd-3 text-xs">
-                            {t('unsettled')}
+                          <div className="text-left">
+                            <div className="pb-0.5 text-th-fgd-3 text-xs">
+                              {t('unsettled')}
+                            </div>
+                            {balance.unsettled.toFixed()}
                           </div>
-                          {balance.unsettled.toFixed()}
-                        </div>
-                        <div className="col-span-1 text-left">
-                          <div className="pb-0.5 text-th-fgd-3 text-xs">
-                            {t('value')}
+                          <div className="text-left">
+                            <div className="pb-0.5 text-th-fgd-3 text-xs">
+                              {t('value')}
+                            </div>
+                            {formatUsdValue(balance.value.toNumber())}
                           </div>
-                          {formatUsdValue(balance.value.toNumber())}
-                        </div>
-                        <div className="col-span-1 text-left text-th-fgd-4">
-                          <div className="pb-0.5 text-th-fgd-3 text-xs">
-                            {t('rates')}
+                          <div className="text-left text-th-fgd-4">
+                            <div className="pb-0.5 text-th-fgd-3 text-xs">
+                              {t('rates')}
+                            </div>
+                            <span className="mr-1 text-th-green">
+                              {balance.depositRate.toFixed(2)}%
+                            </span>
+                            /
+                            <span className="ml-1 text-th-red">
+                              {balance.borrowRate.toFixed(2)}%
+                            </span>
                           </div>
-                          <span className="mr-1 text-th-green">
-                            {balance.depositRate.toFixed(2)}%
-                          </span>
-                          /
-                          <span className="ml-1 text-th-red">
-                            {balance.borrowRate.toFixed(2)}%
-                          </span>
                         </div>
-                        <Button
-                          className="col-span-1 text-xs pt-0 pb-0 h-8 pl-3 pr-3"
-                          onClick={() => handleOpenDepositModal(balance.symbol)}
-                        >
-                          {t('deposit')}
-                        </Button>
-                        <Button
-                          className="col-span-1 text-xs pt-0 pb-0 h-8 pl-3 pr-3"
-                          onClick={() =>
-                            handleOpenWithdrawModal(balance.symbol)
-                          }
-                        >
-                          {t('withdraw')}
-                        </Button>
+                        <div className="flex space-x-4">
+                          <Button
+                            className="text-xs pt-0 pb-0 h-8 pl-3 pr-3 w-1/2"
+                            onClick={() =>
+                              handleOpenDepositModal(balance.symbol)
+                            }
+                          >
+                            {t('deposit')}
+                          </Button>
+                          <Button
+                            className="text-xs pt-0 pb-0 h-8 pl-3 pr-3 w-1/2"
+                            onClick={() =>
+                              handleOpenWithdrawModal(balance.symbol)
+                            }
+                          >
+                            {t('withdraw')}
+                          </Button>
+                        </div>
                       </>
                     }
                   />
diff --git a/components/PerpPositionsTable.tsx b/components/PerpPositionsTable.tsx
index c7c5a580..dccd28bb 100644
--- a/components/PerpPositionsTable.tsx
+++ b/components/PerpPositionsTable.tsx
@@ -9,7 +9,6 @@ import { breakpoints } from './TradePageGrid'
 import { Table, Td, Th, TrBody, TrHead } from './TableElements'
 import { formatUsdValue } from '../utils'
 import Loading from './Loading'
-
 import usePerpPositions from '../hooks/usePerpPositions'
 import MarketCloseModal from './MarketCloseModal'
 import { ExpandableRow } from './TableElements'
@@ -17,6 +16,7 @@ import PerpSideBadge from './PerpSideBadge'
 import PnlText from './PnlText'
 import { settlePnl } from './MarketPosition'
 import { useTranslation } from 'next-i18next'
+import MobileTableHeader from './mobile/MobileTableHeader'
 
 const PositionsTable = () => {
   const { t } = useTranslation('common')
@@ -211,93 +211,93 @@ const PositionsTable = () => {
                 </tbody>
               </Table>
             ) : (
-              openPositions.map(
-                (
-                  {
-                    marketConfig,
-                    basePosition,
-                    notionalSize,
-                    avgEntryPrice,
-                    breakEvenPrice,
-                    unrealizedPnl,
-                  },
-                  index
-                ) => {
-                  return (
-                    <ExpandableRow
-                      buttonTemplate={
-                        <>
-                          <div className="col-span-11 flex items-center justify-between text-fgd-1">
-                            <div className="flex items-center">
-                              <img
-                                alt=""
-                                width="20"
-                                height="20"
-                                src={`/assets/icons/${marketConfig.baseSymbol.toLowerCase()}.svg`}
-                                className={`mr-2.5`}
-                              />
-                              <div>
-                                <div className="mb-0.5 text-left">
-                                  {marketConfig.name}
-                                </div>
-                                <div className="text-th-fgd-3 text-xs">
-                                  <span
-                                    className={`mr-1 ${
-                                      basePosition > 0
-                                        ? 'text-th-green'
-                                        : 'text-th-red'
-                                    }`}
-                                  >
-                                    {basePosition > 0
-                                      ? t('long').toUpperCase()
-                                      : t('short').toUpperCase()}
-                                  </span>
-                                  {Math.abs(basePosition)}
+              <>
+                <MobileTableHeader
+                  colOneHeader={t('market')}
+                  colTwoHeader={t('unrealized-pnl')}
+                />
+                {openPositions.map(
+                  (
+                    {
+                      marketConfig,
+                      basePosition,
+                      notionalSize,
+                      avgEntryPrice,
+                      breakEvenPrice,
+                      unrealizedPnl,
+                    },
+                    index
+                  ) => {
+                    return (
+                      <ExpandableRow
+                        buttonTemplate={
+                          <>
+                            <div className="flex items-center justify-between text-fgd-1 w-full">
+                              <div className="flex items-center">
+                                <img
+                                  alt=""
+                                  width="20"
+                                  height="20"
+                                  src={`/assets/icons/${marketConfig.baseSymbol.toLowerCase()}.svg`}
+                                  className={`mr-2.5`}
+                                />
+                                <div>
+                                  <div className="mb-0.5 text-left">
+                                    {marketConfig.name}
+                                  </div>
+                                  <div className="text-th-fgd-3 text-xs">
+                                    <span
+                                      className={`mr-1 ${
+                                        basePosition > 0
+                                          ? 'text-th-green'
+                                          : 'text-th-red'
+                                      }`}
+                                    >
+                                      {basePosition > 0
+                                        ? t('long').toUpperCase()
+                                        : t('short').toUpperCase()}
+                                    </span>
+                                    {Math.abs(basePosition)}
+                                  </div>
                                 </div>
                               </div>
+                              <PnlText pnl={unrealizedPnl} />
                             </div>
-                            <PnlText className="mr-1.5" pnl={unrealizedPnl} />
-                          </div>
-                        </>
-                      }
-                      key={`${index}`}
-                      index={index}
-                      panelTemplate={
-                        <>
-                          <div className="col-span-1 text-left">
-                            <div className="pb-0.5 text-th-fgd-3 text-xs">
-                              {t('average-entry')}
+                          </>
+                        }
+                        key={`${index}`}
+                        index={index}
+                        panelTemplate={
+                          <div className="grid grid-cols-2 grid-flow-row gap-4">
+                            <div className="col-span-1 text-left">
+                              <div className="pb-0.5 text-th-fgd-3 text-xs">
+                                {t('average-entry')}
+                              </div>
+                              {avgEntryPrice
+                                ? formatUsdValue(avgEntryPrice)
+                                : '--'}
                             </div>
-                            {avgEntryPrice
-                              ? formatUsdValue(avgEntryPrice)
-                              : '--'}
-                          </div>
-                          <div className="col-span-1 text-left">
-                            <div className="pb-0.5 text-th-fgd-3 text-xs">
-                              {t('notional-size')}
+                            <div className="col-span-1 text-left">
+                              <div className="pb-0.5 text-th-fgd-3 text-xs">
+                                {t('notional-size')}
+                              </div>
+                              {formatUsdValue(notionalSize)}
                             </div>
-                            {formatUsdValue(notionalSize)}
-                          </div>
-                          <div className="col-span-1 text-left">
-                            <div className="pb-0.5 text-th-fgd-3 text-xs">
-                              {t('break-even')}
+                            <div className="col-span-1 text-left">
+                              <div className="pb-0.5 text-th-fgd-3 text-xs">
+                                {t('break-even')}
+                              </div>
+                              {breakEvenPrice
+                                ? formatUsdValue(breakEvenPrice)
+                                : '--'}
                             </div>
-                            {breakEvenPrice
-                              ? formatUsdValue(breakEvenPrice)
-                              : '--'}
                           </div>
-                          <div className="col-span-1 text-left">
-                            <div className="pb-0.5 text-th-fgd-3 text-xs">
-                              {t('unrealized-pnl')}
-                            </div>
-                            <PnlText pnl={unrealizedPnl} />
-                          </div>
-                        </>
-                      }
-                    />
-                  )
-                }
-              )
+                        }
+                      />
+                    )
+                  }
+                )}
+              </>
             )
           ) : (
             <div
diff --git a/components/RecentMarketTrades.tsx b/components/RecentMarketTrades.tsx
index 1e7ece42..4dab5b5a 100644
--- a/components/RecentMarketTrades.tsx
+++ b/components/RecentMarketTrades.tsx
@@ -87,7 +87,7 @@ export default function RecentMarketTrades() {
   ) : (
     <ExpandableRow
       buttonTemplate={
-        <div className="col-span-11 text-left">
+        <div className="flex justify-between text-left w-full">
           <div className="mb-0.5 text-fgd-1">{t('recent-trades')}</div>
         </div>
       }
diff --git a/components/TableElements.tsx b/components/TableElements.tsx
index 67e82d6b..c6b47890 100644
--- a/components/TableElements.tsx
+++ b/components/TableElements.tsx
@@ -55,7 +55,7 @@ export const ExpandableRow = ({
           <Disclosure.Button
             className={`${
               index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-4`
-            } default-transition font-normal p-4 text-th-fgd-1 w-full hover:filter hover:brightness-90 focus:outline-none ${
+            } default-transition flex items-center justify-between font-normal p-4 text-th-fgd-1 w-full hover:filter hover:brightness-90 focus:outline-none ${
               rounded
                 ? open
                   ? 'rounded-b-none'
@@ -63,15 +63,13 @@ export const ExpandableRow = ({
                 : 'rounded-none'
             }`}
           >
-            <div className="grid grid-cols-12 grid-rows-1">
-              {buttonTemplate}
-              <div className="flex items-center justify-end">
-                <ChevronDownIcon
-                  className={`${
-                    open ? 'transform rotate-180' : 'transform rotate-360'
-                  } default-transition h-5 flex-shrink-0 w-5 text-th-primary`}
-                />
-              </div>
+            {buttonTemplate}
+            <div className="flex items-center justify-end pl-5">
+              <ChevronDownIcon
+                className={`${
+                  open ? 'transform rotate-180' : 'transform rotate-360'
+                } default-transition h-5 flex-shrink-0 w-5 text-th-primary`}
+              />
             </div>
           </Disclosure.Button>
           <Disclosure.Panel
@@ -87,9 +85,7 @@ export const ExpandableRow = ({
                 : 'rounded-none'
             }`}
           >
-            <div className="grid grid-cols-2 grid-rows-1 gap-4 py-4">
-              {panelTemplate}
-            </div>
+            <div className="py-4">{panelTemplate}</div>
           </Disclosure.Panel>
         </>
       )}
@@ -106,12 +102,10 @@ export const Row = ({ children, index }: RowProps) => {
   return (
     <div
       className={`${
-        index % 2 === 0
-          ? `bg-[rgba(255,255,255,0.03)]`
-          : `bg-[rgba(255,255,255,0.07)]`
+        index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-4`
       } default-transition font-normal p-4 rounded-none text-th-fgd-1 w-full`}
     >
-      <div className="grid grid-cols-12 grid-rows-1 gap-4">{children}</div>
+      {children}
     </div>
   )
 }
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index 1e855b14..04c08fe6 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -17,7 +17,6 @@ import Settings from './Settings'
 const TopBar = () => {
   const { t } = useTranslation('common')
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
-  const connected = useMangoStore((s) => s.wallet.connected)
   const [showAccountsModal, setShowAccountsModal] = useState(false)
   const [defaultMarket] = useLocalStorageState(
     DEFAULT_MARKET_KEY,
@@ -31,7 +30,7 @@ const TopBar = () => {
   return (
     <>
       <nav className={`bg-th-bkg-2 border-b border-th-bkg-2`}>
-        <div className={`pl-2 md:px-4 lg:px-10`}>
+        <div className={`px-4 lg:px-10`}>
           <div className={`flex justify-between h-14`}>
             <div className={`flex`}>
               <Link href={defaultMarket.path}>
@@ -46,7 +45,7 @@ const TopBar = () => {
                 </div>
               </Link>
               <div
-                className={`hidden md:flex md:items-center md:space-x-6 md:ml-4`}
+                className={`hidden md:flex md:items-center md:space-x-4 lg:space-x-6 md:ml-4`}
               >
                 <MenuItem href={defaultMarket.path}>{t('trade')}</MenuItem>
                 <MenuItem href="/account">{t('account')}</MenuItem>
@@ -112,7 +111,7 @@ const TopBar = () => {
                 </div>
               ) : null}
               <div className="flex">
-                <div className={`${connected ? 'pr-2 md:pr-0' : ''} pl-2`}>
+                <div className="pl-2">
                   <ConnectWalletButton />
                 </div>
               </div>
diff --git a/components/TradeHistoryTable.tsx b/components/TradeHistoryTable.tsx
index e060cf88..815b74a3 100644
--- a/components/TradeHistoryTable.tsx
+++ b/components/TradeHistoryTable.tsx
@@ -261,7 +261,7 @@ const TradeHistoryTable = ({ numTrades }: { numTrades?: number }) => {
                 <ExpandableRow
                   buttonTemplate={
                     <>
-                      <div className="col-span-11 flex items-center text-fgd-1">
+                      <div className="flex items-center justify-between text-fgd-1 w-full">
                         <div className="flex items-center">
                           <img
                             alt=""
@@ -300,26 +300,26 @@ const TradeHistoryTable = ({ numTrades }: { numTrades?: number }) => {
                   key={`${index}`}
                   index={index}
                   panelTemplate={
-                    <>
-                      <div className="col-span-1 text-left">
+                    <div className="grid grid-cols-2 grid-flow-row gap-4">
+                      <div className="text-left">
                         <div className="pb-0.5 text-th-fgd-3 text-xs">
                           {t('value')}
                         </div>
                         {formatUsdValue(trade.value)}
                       </div>
-                      <div className="col-span-1 text-left">
+                      <div className="text-left">
                         <div className="pb-0.5 text-th-fgd-3 text-xs">
                           {t('liquidity')}
                         </div>
                         {trade.liquidity}
                       </div>
-                      <div className="col-span-1 text-left">
+                      <div className="text-left">
                         <div className="pb-0.5 text-th-fgd-3 text-xs">
                           {t('fee')}
                         </div>
                         {formatUsdValue(trade.feeCost)}
                       </div>
-                      <div className="col-span-1 text-left">
+                      <div className="text-left">
                         <div className="pb-0.5 text-th-fgd-3 text-xs">
                           {t('approximate-time')}
                         </div>
@@ -329,7 +329,7 @@ const TradeHistoryTable = ({ numTrades }: { numTrades?: number }) => {
                             )
                           : t('recent')}
                       </div>
-                    </>
+                    </div>
                   }
                 />
               ))
diff --git a/components/account_page/AccountAssets.tsx b/components/account_page/AccountAssets.tsx
deleted file mode 100644
index b757b135..00000000
--- a/components/account_page/AccountAssets.tsx
+++ /dev/null
@@ -1,283 +0,0 @@
-import { useCallback, useState } from 'react'
-import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
-import { InformationCircleIcon } from '@heroicons/react/outline'
-import useMangoStore from '../../stores/useMangoStore'
-import { useBalances } from '../../hooks/useBalances'
-import { tokenPrecision } from '../../utils/index'
-import DepositModal from '../DepositModal'
-import WithdrawModal from '../WithdrawModal'
-import Button from '../Button'
-import Tooltip from '../Tooltip'
-import { Market } from '@project-serum/serum'
-import {
-  getTokenBySymbol,
-  I80F48,
-  PerpMarket,
-} from '@blockworks-foundation/mango-client'
-import { notify } from '../../utils/notifications'
-import { useTranslation } from 'next-i18next'
-
-export default function AccountAssets() {
-  const { t } = useTranslation('common')
-  const balances = useBalances()
-  const actions = useMangoStore((s) => s.actions)
-  const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
-  const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
-  const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
-  const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
-  const mangoClient = useMangoStore((s) => s.connection.client)
-  const loadingMangoAccount = useMangoStore(
-    (s) => s.selectedMangoAccount.initialLoad
-  )
-  const connected = useMangoStore((s) => s.wallet.connected)
-
-  const [showDepositModal, setShowDepositModal] = useState(false)
-  const [showWithdrawModal, setShowWithdrawModal] = useState(false)
-  const [withdrawSymbol, setWithdrawSymbol] = useState('')
-  const [depositSymbol, setDepositSymbol] = useState('')
-
-  const handleCloseDeposit = useCallback(() => {
-    setShowDepositModal(false)
-  }, [])
-
-  const handleCloseWithdraw = useCallback(() => {
-    setShowWithdrawModal(false)
-  }, [])
-
-  const handleShowWithdraw = (symbol) => {
-    setWithdrawSymbol(symbol)
-    setShowWithdrawModal(true)
-  }
-
-  const handleShowDeposit = (symbol) => {
-    setDepositSymbol(symbol)
-    setShowDepositModal(true)
-  }
-
-  async function handleSettleAllTrades() {
-    const markets: Array<Market | PerpMarket> = Object.values(
-      useMangoStore.getState().selectedMangoGroup.markets
-    )
-    const mangoAccount = useMangoStore.getState().selectedMangoAccount.current
-    const mangoGroup = useMangoStore.getState().selectedMangoGroup.current
-    const wallet = useMangoStore.getState().wallet.current
-    const spotMarkets = markets.filter(
-      (mkt) => mkt instanceof Market
-    ) as Market[]
-
-    try {
-      await mangoClient.settleAll(mangoGroup, mangoAccount, spotMarkets, wallet)
-      actions.reloadMangoAccount()
-    } catch (e) {
-      if (e.message === 'No unsettled funds') {
-        notify({
-          title: t('no-unsettled'),
-          type: 'error',
-        })
-      } else {
-        notify({
-          title: t('settle-error'),
-          description: e.message,
-          txid: e.txid,
-          type: 'error',
-        })
-      }
-    }
-  }
-
-  return mangoAccount ? (
-    <>
-      <div className="sm:flex sm:items-center sm:justify-between pb-2">
-        <div className="pb-2 sm:pb-0 text-th-fgd-1 text-lg">
-          {t('your-assets')}
-        </div>
-        {balances.length > 0 ? (
-          <div className="border border-th-green flex items-center justify-between p-2 rounded">
-            <div className="pr-4 text-xs text-th-fgd-3">
-              {t('total-assets')}:
-            </div>
-            <span>
-              $ {mangoAccount.getAssetsVal(mangoGroup, mangoCache).toFixed(2)}
-            </span>
-          </div>
-        ) : null}
-      </div>
-      {balances.length > 0 &&
-      balances.find(({ unsettled }) => unsettled > 0) ? (
-        <div
-          className={`flex items-center justify-between px-6 py-4 my-2 rounded-md bg-th-bkg-1`}
-        >
-          <div className="flex items-center text-fgd-1 font-semibold pr-4">
-            You have unsettled funds
-            <Tooltip content="Use the Settle All button to move unsettled funds to your deposits.">
-              <div>
-                <InformationCircleIcon
-                  className={`h-5 w-5 ml-2 text-th-primary cursor-help`}
-                />
-              </div>
-            </Tooltip>
-          </div>
-          <Button onClick={handleSettleAllTrades}>{t('settle-all')}</Button>
-        </div>
-      ) : null}
-      {mangoGroup && balances.length > 0 ? (
-        <div className={`flex flex-col py-4`}>
-          <div className={`-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8`}>
-            <div
-              className={`align-middle inline-block min-w-full sm:px-6 lg:px-8`}
-            >
-              <Table className="min-w-full divide-y divide-th-bkg-2">
-                <Thead>
-                  <Tr className="text-th-fgd-3 text-xs">
-                    <Th
-                      scope="col"
-                      className={`px-6 py-3 text-left font-normal`}
-                    >
-                      {t('asset')}
-                    </Th>
-                    <Th
-                      scope="col"
-                      className={`px-6 py-3 text-left font-normal`}
-                    >
-                      Available
-                    </Th>
-                    <Th
-                      scope="col"
-                      className={`px-6 py-3 text-left font-normal`}
-                    >
-                      {t('in-orders')}
-                    </Th>
-                    <Th
-                      scope="col"
-                      className={`px-6 py-3 text-left font-normal`}
-                    >
-                      {t('unsettled')}
-                    </Th>
-                    <Th
-                      scope="col"
-                      className={`px-6 py-3 text-left font-normal`}
-                    >
-                      {t('value')}
-                    </Th>
-                    <Th scope="col" className="px-6 py-3 text-left font-normal">
-                      {t('interest')} APY
-                    </Th>
-                  </Tr>
-                </Thead>
-                <Tbody>
-                  {balances.map((bal, i) => {
-                    const token = getTokenBySymbol(groupConfig, bal.symbol)
-                    const tokenIndex = mangoGroup.getTokenIndex(token.mintKey)
-
-                    return (
-                      <Tr
-                        key={tokenIndex}
-                        className={`border-b border-th-bkg-3
-                  ${i % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-2`}
-                `}
-                      >
-                        <Td
-                          className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
-                        >
-                          <div className="flex items-center">
-                            <img
-                              alt=""
-                              width="20"
-                              height="20"
-                              src={`/assets/icons/${bal.symbol.toLowerCase()}.svg`}
-                              className={`mr-2.5`}
-                            />
-                            <div>{bal.symbol}</div>
-                          </div>
-                        </Td>
-                        <Td
-                          className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
-                        >
-                          {bal.deposits.toFixed(tokenPrecision[bal.symbol])}
-                        </Td>
-                        <Td
-                          className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
-                        >
-                          {bal.orders.toFixed(tokenPrecision[bal.symbol])}
-                        </Td>
-                        <Td
-                          className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
-                        >
-                          {bal.unsettled.toFixed(tokenPrecision[bal.symbol])}
-                        </Td>
-                        <Td
-                          className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
-                        >
-                          $
-                          {(
-                            (bal.deposits.toNumber() +
-                              bal.orders +
-                              bal.unsettled) *
-                            mangoGroup
-                              .getPrice(tokenIndex, mangoCache)
-                              .toNumber()
-                          ).toFixed(2)}
-                        </Td>
-                        <Td
-                          className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
-                        >
-                          <span className={`text-th-green`}>
-                            {mangoGroup
-                              .getDepositRate(tokenIndex)
-                              .mul(I80F48.fromNumber(100))
-                              .toFixed(2)}
-                            %
-                          </span>
-                        </Td>
-                        <Td
-                          className={`px-6 py-3 whitespace-nowrap text-sm text-th-fgd-1`}
-                        >
-                          <div className={`flex justify-end`}>
-                            <Button
-                              onClick={() => handleShowDeposit(bal.symbol)}
-                              className="text-xs pt-0 pb-0 h-8 pl-3 pr-3"
-                              disabled={!connected || loadingMangoAccount}
-                            >
-                              <span>{t('deposit')}</span>
-                            </Button>
-                            <Button
-                              onClick={() => handleShowWithdraw(bal.symbol)}
-                              className="ml-3 text-xs pt-0 pb-0 h-8 pl-3 pr-3"
-                              disabled={!connected || loadingMangoAccount}
-                            >
-                              <span>{t('withdraw')}</span>
-                            </Button>
-                          </div>
-                        </Td>
-                      </Tr>
-                    )
-                  })}
-                </Tbody>
-              </Table>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div
-          className={`w-full text-center py-6 bg-th-bkg-1 text-th-fgd-3 rounded-md`}
-        >
-          No assets found.
-        </div>
-      )}
-      {showDepositModal && (
-        <DepositModal
-          isOpen={showDepositModal}
-          onClose={handleCloseDeposit}
-          tokenSymbol={depositSymbol}
-        />
-      )}
-      {showWithdrawModal && (
-        <WithdrawModal
-          isOpen={showWithdrawModal}
-          onClose={handleCloseWithdraw}
-          tokenSymbol={withdrawSymbol}
-        />
-      )}
-    </>
-  ) : null
-}
diff --git a/components/account_page/AccountBorrows.tsx b/components/account_page/AccountBorrows.tsx
index 751389e3..5e512f47 100644
--- a/components/account_page/AccountBorrows.tsx
+++ b/components/account_page/AccountBorrows.tsx
@@ -167,14 +167,8 @@ export default function AccountBorrows() {
                 ) : (
                   <>
                     <MobileTableHeader
-                      headerTemplate={
-                        <>
-                          <div className="col-span-7">{t('asset')}</div>
-                          <div className="col-span-4 text-right">
-                            {t('balance')}
-                          </div>
-                        </>
-                      }
+                      colOneHeader={t('asset')}
+                      colTwoHeader={t('balance')}
                     />
                     {balances
                       .filter((assets) => assets.borrows.gt(ZERO_I80F48))
@@ -189,8 +183,8 @@ export default function AccountBorrows() {
                         return (
                           <ExpandableRow
                             buttonTemplate={
-                              <>
-                                <div className="col-span-7 flex items-center text-fgd-1">
+                              <div className="flex items-center justify-between text-fgd-1 w-full">
+                                <div className="flex items-center text-fgd-1">
                                   <img
                                     alt=""
                                     width="20"
@@ -201,47 +195,49 @@ export default function AccountBorrows() {
 
                                   {asset.symbol}
                                 </div>
-                                <div className="col-span-4 text-fgd-1 text-right">
+                                <div className="text-fgd-1 text-right">
                                   {asset.borrows.toFixed(
                                     tokenPrecision[asset.symbol]
                                   )}
                                 </div>
-                              </>
+                              </div>
                             }
                             key={`${asset.symbol}${i}`}
                             index={i}
                             panelTemplate={
                               <>
-                                <div className="col-span-1 text-left">
-                                  <div className="pb-0.5 text-th-fgd-3 text-xs">
-                                    {t('value')}
-                                  </div>
-                                  {formatUsdValue(
-                                    asset.borrows
-                                      .mul(
-                                        mangoGroup.getPrice(
-                                          tokenIndex,
-                                          mangoCache
+                                <div className="grid grid-cols-2 grid-flow-row gap-4 pb-4">
+                                  <div className="text-left">
+                                    <div className="pb-0.5 text-th-fgd-3 text-xs">
+                                      {t('value')}
+                                    </div>
+                                    {formatUsdValue(
+                                      asset.borrows
+                                        .mul(
+                                          mangoGroup.getPrice(
+                                            tokenIndex,
+                                            mangoCache
+                                          )
                                         )
-                                      )
-                                      .toNumber()
-                                  )}
-                                </div>
-                                <div className="col-span-1 text-left">
-                                  <div className="pb-0.5 text-th-fgd-3 text-xs">
-                                    {t('borrow-rate')} (APR)
+                                        .toNumber()
+                                    )}
+                                  </div>
+                                  <div className="text-left">
+                                    <div className="pb-0.5 text-th-fgd-3 text-xs">
+                                      {t('borrow-rate')} (APR)
+                                    </div>
+                                    <span className={`text-th-red`}>
+                                      {(
+                                        mangoGroup
+                                          .getBorrowRate(tokenIndex)
+                                          .toNumber() * 100
+                                      ).toFixed(2)}
+                                      %
+                                    </span>
                                   </div>
-                                  <span className={`text-th-red`}>
-                                    {(
-                                      mangoGroup
-                                        .getBorrowRate(tokenIndex)
-                                        .toNumber() * 100
-                                    ).toFixed(2)}
-                                    %
-                                  </span>
                                 </div>
 
-                                <div className="col-span-1">
+                                <div className="flex space-x-4">
                                   <Button
                                     onClick={() =>
                                       handleShowDeposit(asset.symbol)
@@ -251,8 +247,6 @@ export default function AccountBorrows() {
                                   >
                                     {t('deposit')}
                                   </Button>
-                                </div>
-                                <div className="col-span-1">
                                   <Button
                                     onClick={() =>
                                       handleShowBorrow(asset.symbol)
@@ -382,22 +376,16 @@ export default function AccountBorrows() {
             ) : (
               <>
                 <MobileTableHeader
-                  headerTemplate={
-                    <>
-                      <div className="col-span-5">{t('asset')}</div>
-                      <div className="col-span-6 text-right">
-                        {t('borrow-rate')} (APR)
-                      </div>
-                    </>
-                  }
+                  colOneHeader={t('asset')}
+                  colTwoHeader={`${t('borrow-rate')} (APR)`}
                 />
                 {mangoConfig.tokens.map((token, i) => {
                   const tokenIndex = mangoGroup.getTokenIndex(token.mintKey)
                   return (
                     <ExpandableRow
                       buttonTemplate={
-                        <>
-                          <div className="col-span-7 flex items-center text-fgd-1">
+                        <div className="flex items-center justify-between text-fgd-1 w-full">
+                          <div className="flex items-center">
                             <img
                               alt=""
                               width="20"
@@ -408,7 +396,7 @@ export default function AccountBorrows() {
 
                             {token.symbol}
                           </div>
-                          <div className="col-span-4 text-fgd-1 text-right">
+                          <div className="text-fgd-1 text-right">
                             <span className={`text-th-red`}>
                               {i80f48ToPercent(
                                 mangoGroup.getBorrowRate(tokenIndex)
@@ -416,13 +404,13 @@ export default function AccountBorrows() {
                               %
                             </span>
                           </div>
-                        </>
+                        </div>
                       }
                       key={`${token.symbol}${i}`}
                       index={i}
                       panelTemplate={
-                        <>
-                          <div className="col-span-1 text-left">
+                        <div className="grid grid-cols-2 grid-flow-row gap-4">
+                          <div className="text-left">
                             <div className="pb-0.5 text-th-fgd-3 text-xs">
                               {t('price')}
                             </div>
@@ -432,7 +420,7 @@ export default function AccountBorrows() {
                                 .toNumber()
                             )}
                           </div>
-                          <div className="col-span-1 text-left">
+                          <div className="text-left">
                             <div className="pb-0.5 text-th-fgd-3 text-xs">
                               {t('max-borrow')}
                             </div>
@@ -451,7 +439,7 @@ export default function AccountBorrows() {
                                   tokenPrecision[token.symbol],
                               })}
                           </div>
-                          <div className="col-span-1 text-left">
+                          <div className="text-left">
                             <div className="pb-0.5 text-th-fgd-3 text-xs">
                               {t('liquidity')}
                             </div>
@@ -466,8 +454,8 @@ export default function AccountBorrows() {
                                   tokenPrecision[token.symbol],
                               })}
                           </div>
-                          <div className="col-span-1" />
-                          <div className="col-span-1">
+                          <div className="" />
+                          <div className="">
                             <Button
                               onClick={() => handleShowBorrow(token.symbol)}
                               className="text-xs pt-0 pb-0 h-8 w-full"
@@ -476,7 +464,7 @@ export default function AccountBorrows() {
                               {t('borrow')}
                             </Button>
                           </div>
-                        </>
+                        </div>
                       }
                     />
                   )
diff --git a/components/account_page/AccountInterest.tsx b/components/account_page/AccountInterest.tsx
index 8e56a6bd..910cd118 100644
--- a/components/account_page/AccountInterest.tsx
+++ b/components/account_page/AccountInterest.tsx
@@ -1,7 +1,6 @@
 import { getTokenBySymbol } from '@blockworks-foundation/mango-client'
 import { useEffect, useMemo, useState } from 'react'
 import useMangoStore from '../../stores/useMangoStore'
-import Loading from '../Loading'
 import Select from '../Select'
 import { Table, Td, Th, TrBody, TrHead } from '../TableElements'
 import { useTranslation } from 'next-i18next'
@@ -9,6 +8,10 @@ import { isEmpty } from 'lodash'
 import usePagination from '../../hooks/usePagination'
 import { roundToDecimal } from '../../utils/'
 import Pagination from '../Pagination'
+import { useViewport } from '../../hooks/useViewport'
+import { breakpoints } from '../TradePageGrid'
+import { ExpandableRow } from '../TableElements'
+import MobileTableHeader from '../mobile/MobileTableHeader'
 
 interface InterestStats {
   [key: string]: {
@@ -22,11 +25,9 @@ const AccountInterest = () => {
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
   const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
   const [interestStats, setInterestStats] = useState<any>([])
-  const [hourlyInterestStats, setHourlyInterestStats] = useState<any>({
-    USDC: [],
-  })
+  const [hourlyInterestStats, setHourlyInterestStats] = useState<any>({})
   const [loading, setLoading] = useState(false)
-  const [selectedAsset, setSelectedAsset] = useState<string>('USDC')
+  const [selectedAsset, setSelectedAsset] = useState<string>('')
   const {
     paginated,
     setData,
@@ -37,13 +38,17 @@ const AccountInterest = () => {
     firstPage,
     lastPage,
   } = usePagination(hourlyInterestStats[selectedAsset])
+  const { width } = useViewport()
+  const isMobile = width ? width < breakpoints.md : false
 
   const mangoAccountPk = useMemo(() => {
     return mangoAccount.publicKey.toString()
   }, [mangoAccount])
 
   const token = useMemo(() => {
-    return getTokenBySymbol(groupConfig, selectedAsset)
+    if (selectedAsset) {
+      return getTokenBySymbol(groupConfig, selectedAsset)
+    }
   }, [selectedAsset])
 
   useEffect(() => {
@@ -52,6 +57,12 @@ const AccountInterest = () => {
     }
   }, [selectedAsset, hourlyInterestStats])
 
+  useEffect(() => {
+    if (!selectedAsset && Object.keys(hourlyInterestStats).length > 0) {
+      setSelectedAsset(Object.keys(hourlyInterestStats)[0])
+    }
+  }, [hourlyInterestStats])
+
   useEffect(() => {
     const fetchInterestStats = async () => {
       const response = await fetch(
@@ -104,39 +115,87 @@ const AccountInterest = () => {
 
   return (
     <>
-      <div className="pb-3.5 text-th-fgd-1 text-base">
-        {t('interest-earned')}
-      </div>
+      <div className="pb-4 text-th-fgd-1 text-lg">{t('interest-earned')}</div>
       {mangoAccount ? (
         <div>
-          <Table>
-            <thead>
-              <TrHead>
-                <Th>{t('token')}</Th>
-                <Th>{t('total-deposit-interest')}</Th>
-                <Th>{t('total-borrow-interest')}</Th>
-                <Th>{t('net')}</Th>
-              </TrHead>
-            </thead>
-            <tbody>
-              {interestStats.length === 0 ? (
-                <TrBody index={0}>
-                  <td colSpan={4}>
-                    <div className="flex">
-                      <div className="mx-auto py-4">{t('no-interest')}</div>
-                    </div>
-                  </td>
-                </TrBody>
-              ) : (
-                interestStats.map(([symbol, stats], index) => {
-                  const decimals = getTokenBySymbol(
-                    groupConfig,
-                    symbol
-                  ).decimals
-                  return (
-                    <TrBody index={index} key={symbol}>
-                      <Td>
-                        <div className="flex items-center">
+          {!isMobile ? (
+            <Table>
+              <thead>
+                <TrHead>
+                  <Th>{t('token')}</Th>
+                  <Th>{t('total-deposit-interest')}</Th>
+                  <Th>{t('total-borrow-interest')}</Th>
+                  <Th>{t('net')}</Th>
+                </TrHead>
+              </thead>
+              <tbody>
+                {interestStats.length === 0 ? (
+                  <TrBody index={0}>
+                    <td colSpan={4}>
+                      <div className="bg-th-bkg-3 flex rounded-md text-th-fgd-3">
+                        <div className="mx-auto py-4">{t('no-interest')}</div>
+                      </div>
+                    </td>
+                  </TrBody>
+                ) : (
+                  interestStats.map(([symbol, stats], index) => {
+                    const decimals = getTokenBySymbol(
+                      groupConfig,
+                      symbol
+                    ).decimals
+                    return (
+                      <TrBody index={index} key={symbol}>
+                        <Td>
+                          <div className="flex items-center">
+                            <img
+                              alt=""
+                              width="20"
+                              height="20"
+                              src={`/assets/icons/${symbol.toLowerCase()}.svg`}
+                              className={`mr-2.5`}
+                            />
+
+                            {symbol}
+                          </div>
+                        </Td>
+                        <Td>
+                          {stats.total_deposit_interest.toFixed(decimals)}{' '}
+                          {symbol}
+                        </Td>
+                        <Td>
+                          {stats.total_borrow_interest.toFixed(decimals)}{' '}
+                          {symbol}
+                        </Td>
+                        <Td>
+                          {(
+                            stats.total_deposit_interest -
+                            stats.total_borrow_interest
+                          ).toFixed(decimals)}{' '}
+                          {symbol}
+                        </Td>
+                      </TrBody>
+                    )
+                  })
+                )}
+              </tbody>
+            </Table>
+          ) : interestStats.length === 0 ? (
+            <div className="bg-th-bkg-3 flex rounded-md text-th-fgd-3">
+              <div className="mx-auto py-4">{t('no-interest')}</div>
+            </div>
+          ) : (
+            <>
+              <MobileTableHeader
+                colOneHeader={t('token')}
+                colTwoHeader={t('net')}
+              />
+              {interestStats.map(([symbol, stats], index) => {
+                const decimals = getTokenBySymbol(groupConfig, symbol).decimals
+                return (
+                  <ExpandableRow
+                    buttonTemplate={
+                      <div className="flex items-center justify-between text-fgd-1 w-full">
+                        <div className="flex items-center text-fgd-1">
                           <img
                             alt=""
                             width="20"
@@ -147,35 +206,51 @@ const AccountInterest = () => {
 
                           {symbol}
                         </div>
-                      </Td>
-                      <Td>
-                        {stats.total_deposit_interest.toFixed(decimals)}{' '}
-                        {symbol}
-                      </Td>
-                      <Td>
-                        {stats.total_borrow_interest.toFixed(decimals)} {symbol}
-                      </Td>
-                      <Td>
-                        {(
-                          stats.total_deposit_interest -
-                          stats.total_borrow_interest
-                        ).toFixed(decimals)}{' '}
-                        {symbol}
-                      </Td>
-                    </TrBody>
-                  )
-                })
-              )}
-            </tbody>
-          </Table>
+                        <div className="text-fgd-1 text-right">
+                          {(
+                            stats.total_deposit_interest -
+                            stats.total_borrow_interest
+                          ).toFixed(decimals)}{' '}
+                          {symbol}
+                        </div>
+                      </div>
+                    }
+                    key={`${symbol}${index}`}
+                    index={index}
+                    panelTemplate={
+                      <>
+                        <div className="grid grid-cols-2 grid-flow-row gap-4">
+                          <div className="text-left">
+                            <div className="pb-0.5 text-th-fgd-3 text-xs">
+                              {t('total-deposit-interest')}
+                            </div>
+                            {stats.total_deposit_interest.toFixed(decimals)}{' '}
+                            {symbol}
+                          </div>
+                          <div className="text-left">
+                            <div className="pb-0.5 text-th-fgd-3 text-xs">
+                              {t('total-borrow-interest')}
+                            </div>
+                            {stats.total_borrow_interest.toFixed(decimals)}{' '}
+                            {symbol}
+                          </div>
+                        </div>
+                      </>
+                    }
+                  />
+                )
+              })}
+            </>
+          )}
           <>
             {!isEmpty(hourlyInterestStats) && !loading ? (
               <>
-                <div className="flex items-center justify-between my-4 w-full">
+                <div className="flex items-center justify-between pb-4 pt-6 w-full">
+                  <div className="text-th-fgd-1 text-lg">{t('history')}</div>
                   <Select
                     value={selectedAsset}
                     onChange={(a) => setSelectedAsset(a)}
-                    className="w-24 sm:hidden"
+                    className="w-24 md:hidden"
                   >
                     <div className="space-y-2">
                       {Object.keys(hourlyInterestStats).map((token: string) => (
@@ -191,7 +266,7 @@ const AccountInterest = () => {
                       ))}
                     </div>
                   </Select>
-                  <div className="hidden sm:flex pb-4 sm:pb-0">
+                  <div className="hidden md:flex pb-4 sm:pb-0">
                     {Object.keys(hourlyInterestStats).map((token: string) => (
                       <div
                         className={`px-2 py-1 ml-2 rounded-md cursor-pointer default-transition bg-th-bkg-3
@@ -226,8 +301,10 @@ const AccountInterest = () => {
                             return (
                               <TrBody index={index} key={stat.time}>
                                 <Td>
-                                  {date.toLocaleDateString()}{' '}
-                                  {date.toLocaleTimeString()}
+                                  <div>{date.toLocaleDateString()}</div>
+                                  <div className="text-xs text-th-fgd-3">
+                                    {date.toLocaleTimeString()}
+                                  </div>
                                 </Td>
                                 <Td>
                                   {stat.borrow_interest > 0
@@ -261,10 +338,10 @@ const AccountInterest = () => {
                 </div>
               </>
             ) : loading ? (
-              <div className="flex justify-center my-8">
-                <div>
-                  <Loading />
-                </div>
+              <div className="pt-8 space-y-2">
+                <div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
+                <div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
+                <div className="animate-pulse bg-th-bkg-3 h-12 rounded-md w-full" />
               </div>
             ) : null}
           </>
diff --git a/components/account_page/AccountOverview.tsx b/components/account_page/AccountOverview.tsx
index be0bc560..089aa684 100644
--- a/components/account_page/AccountOverview.tsx
+++ b/components/account_page/AccountOverview.tsx
@@ -209,7 +209,7 @@ export default function AccountOverview() {
           </div>
         </div>
       </div>
-      <div className="flex justify-between pb-4 sm:pb-0">
+      <div className="flex justify-between pb-4 md:pb-6">
         <div className="text-th-fgd-1 text-lg">Balances</div>
         <Switch
           checked={showZeroBalances}
diff --git a/components/mobile/BottomBar.tsx b/components/mobile/BottomBar.tsx
index 9dd851f5..728194bd 100644
--- a/components/mobile/BottomBar.tsx
+++ b/components/mobile/BottomBar.tsx
@@ -37,7 +37,7 @@ const BottomBar = () => {
 
   return (
     <>
-      <div className="bg-th-bkg-4 default-transition grid grid-cols-4 grid-rows-1 py-2.5">
+      <div className="bg-th-bkg-1 default-transition grid grid-cols-4 grid-rows-1 py-2.5">
         <div
           className="col-span-1 cursor-pointer default-transition flex flex-col items-center text-th-fgd-3 hover:text-th-primary"
           onClick={() => setShowMarketsModal(true)}
diff --git a/components/mobile/MobileTableHeader.tsx b/components/mobile/MobileTableHeader.tsx
index 2e30d695..ddeb12dd 100644
--- a/components/mobile/MobileTableHeader.tsx
+++ b/components/mobile/MobileTableHeader.tsx
@@ -1,11 +1,16 @@
 type MobileTableHeaderProps = {
-  headerTemplate: React.ReactNode
+  colOneHeader: string
+  colTwoHeader: string
 }
 
-const MobileTableHeader = ({ headerTemplate }: MobileTableHeaderProps) => {
+const MobileTableHeader = ({
+  colOneHeader,
+  colTwoHeader,
+}: MobileTableHeaderProps) => {
   return (
-    <div className="grid grid-cols-12 grid-rows-1 gap-4 pb-2 px-3 text-xs">
-      {headerTemplate}
+    <div className="flex justify-between pb-2 pl-4 pr-14 text-th-fgd-3 text-xs">
+      <div>{colOneHeader}</div>
+      <div>{colTwoHeader}</div>
     </div>
   )
 }
diff --git a/components/mobile/MobileTradePage.tsx b/components/mobile/MobileTradePage.tsx
index 59608901..ecd60650 100644
--- a/components/mobile/MobileTradePage.tsx
+++ b/components/mobile/MobileTradePage.tsx
@@ -104,7 +104,7 @@ const MobileTradePage = () => {
       <Swipeable index={viewIndex} onChangeIndex={handleChangeViewIndex}>
         <div>
           <div className="bg-th-bkg-2 grid grid-cols-12 grid-rows-1 gap-4 mb-2 px-2 py-3 rounded-lg">
-            <div className="col-span-7">
+            <div className="col-span-7 pt-2">
               <AdvancedTradeForm />
             </div>
             <div className="col-span-5">
diff --git a/components/stats_page/StatsAssets.tsx b/components/stats_page/StatsAssets.tsx
index 8577389e..f837e81d 100644
--- a/components/stats_page/StatsAssets.tsx
+++ b/components/stats_page/StatsAssets.tsx
@@ -26,7 +26,7 @@ export default function StatsAssets({ latestStats, stats }) {
         <Select
           value={selectedAsset}
           onChange={(a) => setSelectedAsset(a)}
-          className="w-24 sm:hidden"
+          className="w-24 md:hidden"
         >
           <div className="space-y-2">
             {latestStats.map((stat) => (
@@ -42,7 +42,7 @@ export default function StatsAssets({ latestStats, stats }) {
             ))}
           </div>
         </Select>
-        <div className="hidden sm:flex pb-4 sm:pb-0">
+        <div className="hidden md:flex pb-4 sm:pb-0">
           {latestStats.map((stat) => (
             <div
               className={`px-2 py-1 ml-2 rounded-md cursor-pointer default-transition bg-th-bkg-3
diff --git a/components/stats_page/StatsPerps.tsx b/components/stats_page/StatsPerps.tsx
index 8beae6b8..d3cb4b6f 100644
--- a/components/stats_page/StatsPerps.tsx
+++ b/components/stats_page/StatsPerps.tsx
@@ -6,6 +6,7 @@ import Chart from '../Chart'
 import BN from 'bn.js'
 import { tokenPrecision } from '../../utils'
 import { useTranslation } from 'next-i18next'
+import Select from '../Select'
 
 function calculateFundingRate(
   oldestLongFunding,
@@ -82,7 +83,7 @@ export default function StatsPerps({ perpStats }) {
 
   return (
     <>
-      <div className="flex flex-col-reverse sm:flex-row sm:items-center sm:justify-between mb-4 w-full">
+      <div className="flex items-center justify-between mb-4 w-full">
         <div className="flex items-center text-xl text-th-fgd-1">
           <img
             width="24"
@@ -94,7 +95,26 @@ export default function StatsPerps({ perpStats }) {
           />
           {selectedAsset.split(/-|\//)[0]} {t('perpetual-futures')}
         </div>
-        <div className="flex mb-4 sm:mb-0 space-x-2">
+        <Select
+          value={selectedAsset}
+          onChange={(a) => setSelectedAsset(a)}
+          className="flex-shrink-0 ml-4 w-36 md:hidden"
+        >
+          <div className="space-y-2">
+            {marketConfigs.map((market) => (
+              <Select.Option
+                key={market.name}
+                value={market.name}
+                className={`bg-th-bkg-1 relative rounded-md w-full px-3 py-3 cursor-pointer default-transition flex hover:bg-th-bkg-3 focus:outline-none`}
+              >
+                <div className="flex items-center justify-between w-full">
+                  {market.name}
+                </div>
+              </Select.Option>
+            ))}
+          </div>
+        </Select>
+        <div className="hidden md:flex space-x-2">
           {marketConfigs.map((market) => (
             <div
               className={`bg-th-bkg-3 cursor-pointer default-transition px-2 py-1 rounded-md text-center w-full whitespace-nowrap
@@ -107,7 +127,7 @@ export default function StatsPerps({ perpStats }) {
               onClick={() => setSelectedAsset(market.name)}
               key={market.name as string}
             >
-              {market.name}
+              {market.name.slice(0, -5)}
             </div>
           ))}
         </div>
diff --git a/components/stats_page/StatsTotals.tsx b/components/stats_page/StatsTotals.tsx
index de255c50..2ca8a333 100644
--- a/components/stats_page/StatsTotals.tsx
+++ b/components/stats_page/StatsTotals.tsx
@@ -345,8 +345,8 @@ export default function StatsTotals({ latestStats, stats }) {
               // latestStats.length > 0 ? (
               <ExpandableRow
                 buttonTemplate={
-                  <div className="col-span-11">
-                    <div className="col-span-11 flex items-center pb-4 text-fgd-1">
+                  <div className="grid grid-cols-12 grid-rows-2 sm:grid-rows-1 gap-2 text-left sm:text-right w-full">
+                    <div className="col-span-12 sm:col-span-6 flex items-center text-fgd-1">
                       <div className="flex items-center">
                         <img
                           alt=""
@@ -360,27 +360,25 @@ export default function StatsTotals({ latestStats, stats }) {
                         {stat.name}
                       </div>
                     </div>
-                    <div className="grid grid-cols-11 grid-rows-1 gap-4">
-                      <div className="col-span-6 text-left">
-                        <div className="pb-0.5 text-th-fgd-3 text-xs">
-                          {t('total-deposits')}
-                        </div>
-                        {formatNumberString(stat.totalDeposits, 0)}
+                    <div className="col-span-6 sm:col-span-3">
+                      <div className="pb-0.5 text-th-fgd-3 text-xs">
+                        {t('total-deposits')}
                       </div>
-                      <div className="col-span-5 text-left">
-                        <div className="pb-0.5 text-th-fgd-3 text-xs">
-                          {t('total-borrows')}
-                        </div>
-                        {formatNumberString(stat.totalBorrows, 0)}
+                      {formatNumberString(stat.totalDeposits, 0)}
+                    </div>
+                    <div className="col-span-6 sm:col-span-3">
+                      <div className="pb-0.5 text-th-fgd-3 text-xs">
+                        {t('total-borrows')}
                       </div>
+                      {formatNumberString(stat.totalBorrows, 0)}
                     </div>
                   </div>
                 }
                 key={stat.name}
                 index={index}
                 panelTemplate={
-                  <>
-                    <div className="col-span-1 text-left">
+                  <div className="grid grid-cols-2 grid-flow-row gap-4">
+                    <div className="text-left">
                       <div className="pb-0.5 text-th-fgd-3 text-xs">
                         {t('deposit-rate')}
                       </div>
@@ -389,7 +387,7 @@ export default function StatsTotals({ latestStats, stats }) {
                         %
                       </span>
                     </div>
-                    <div className="col-span-1 text-left">
+                    <div className="text-left">
                       <div className="pb-0.5 text-th-fgd-3 text-xs">
                         {t('borrow-rate')}
                       </div>
@@ -397,7 +395,7 @@ export default function StatsTotals({ latestStats, stats }) {
                         {formatNumberString(stat.borrowInterest.toNumber(), 2)}%
                       </span>
                     </div>
-                    <div className="col-span-1 text-left">
+                    <div className="text-left">
                       <div className="pb-0.5 text-th-fgd-3 text-xs">
                         {t('utilization')}
                       </div>
@@ -407,7 +405,7 @@ export default function StatsTotals({ latestStats, stats }) {
                       )}
                       %
                     </div>
-                  </>
+                  </div>
                 }
               />
             ))}
@@ -419,8 +417,8 @@ export default function StatsTotals({ latestStats, stats }) {
             {stats.length > 1
               ? latestStats.map((stat, index) => (
                   <Row key={stat.name} index={index}>
-                    <div className="col-span-12">
-                      <div className="col-span-12 flex items-center pb-4 text-fgd-1">
+                    <div className="grid grid-cols-12 grid-rows-2 sm:grid-rows-1 gap-2 text-left sm:text-right">
+                      <div className="col-span-12 sm:col-span-3 flex items-center text-fgd-1">
                         <div className="flex items-center">
                           <img
                             alt=""
@@ -434,28 +432,17 @@ export default function StatsTotals({ latestStats, stats }) {
                           {stat.name}
                         </div>
                       </div>
-                      <div className="grid grid-cols-12 grid-rows-1 gap-4">
-                        <div className="col-span-4 text-left">
-                          <div className="pb-0.5 text-th-fgd-3 text-xs">
-                            24h
-                          </div>
-                          {getAverageStats(stats, 1, stat.name, 'depositIndex')}
-                        </div>
-                        <div className="col-span-4 text-left">
-                          <div className="pb-0.5 text-th-fgd-3 text-xs">7d</div>
-                          {getAverageStats(stats, 7, stat.name, 'depositIndex')}
-                        </div>
-                        <div className="col-span-4 text-left">
-                          <div className="pb-0.5 text-th-fgd-3 text-xs">
-                            30d
-                          </div>
-                          {getAverageStats(
-                            stats,
-                            30,
-                            stat.name,
-                            'depositIndex'
-                          )}
-                        </div>
+                      <div className="col-span-4 sm:col-span-3">
+                        <div className="pb-0.5 text-th-fgd-3 text-xs">24h</div>
+                        {getAverageStats(stats, 1, stat.name, 'depositIndex')}
+                      </div>
+                      <div className="col-span-4 sm:col-span-3">
+                        <div className="pb-0.5 text-th-fgd-3 text-xs">7d</div>
+                        {getAverageStats(stats, 7, stat.name, 'depositIndex')}
+                      </div>
+                      <div className="col-span-4 sm:col-span-3">
+                        <div className="pb-0.5 text-th-fgd-3 text-xs">30d</div>
+                        {getAverageStats(stats, 30, stat.name, 'depositIndex')}
                       </div>
                     </div>
                   </Row>
@@ -468,8 +455,8 @@ export default function StatsTotals({ latestStats, stats }) {
           {stats.length > 1
             ? latestStats.map((stat, index) => (
                 <Row key={stat.name} index={index}>
-                  <div className="col-span-12">
-                    <div className="col-span-12 flex items-center pb-4 text-fgd-1">
+                  <div className="grid grid-cols-12 grid-rows-2 sm:grid-rows-1 gap-2 text-left sm:text-right">
+                    <div className="col-span-12 sm:col-span-3 flex items-center text-fgd-1">
                       <div className="flex items-center">
                         <img
                           alt=""
@@ -483,19 +470,17 @@ export default function StatsTotals({ latestStats, stats }) {
                         {stat.name}
                       </div>
                     </div>
-                    <div className="grid grid-cols-12 grid-rows-1 gap-4">
-                      <div className="col-span-4 text-left">
-                        <div className="pb-0.5 text-th-fgd-3 text-xs">24h</div>
-                        {getAverageStats(stats, 1, stat.name, 'borrowIndex')}
-                      </div>
-                      <div className="col-span-4 text-left">
-                        <div className="pb-0.5 text-th-fgd-3 text-xs">7d</div>
-                        {getAverageStats(stats, 7, stat.name, 'borrowIndex')}
-                      </div>
-                      <div className="col-span-4 text-left">
-                        <div className="pb-0.5 text-th-fgd-3 text-xs">30d</div>
-                        {getAverageStats(stats, 30, stat.name, 'borrowIndex')}
-                      </div>
+                    <div className="col-span-4 sm:col-span-3">
+                      <div className="pb-0.5 text-th-fgd-3 text-xs">24h</div>
+                      {getAverageStats(stats, 1, stat.name, 'borrowIndex')}
+                    </div>
+                    <div className="col-span-4 sm:col-span-3">
+                      <div className="pb-0.5 text-th-fgd-3 text-xs">7d</div>
+                      {getAverageStats(stats, 7, stat.name, 'borrowIndex')}
+                    </div>
+                    <div className="col-span-4 sm:col-span-3">
+                      <div className="pb-0.5 text-th-fgd-3 text-xs">30d</div>
+                      {getAverageStats(stats, 30, stat.name, 'borrowIndex')}
                     </div>
                   </div>
                 </Row>
diff --git a/components/trade_form/AdvancedTradeForm.tsx b/components/trade_form/AdvancedTradeForm.tsx
index d39461e7..25d9652b 100644
--- a/components/trade_form/AdvancedTradeForm.tsx
+++ b/components/trade_form/AdvancedTradeForm.tsx
@@ -738,7 +738,7 @@ export default function AdvancedTradeForm({
             unit="%"
             values={
               isMobile
-                ? ['10', '25', '50', '75']
+                ? ['10', '25', '50', '100']
                 : ['10', '25', '50', '75', '100']
             }
           />
@@ -871,9 +871,10 @@ export default function AdvancedTradeForm({
               </Button>
             )}
           </div>
-          <div className="flex text-xs text-th-fgd-4 px-6 mt-2.5 justify-center">
-            Maker fee: {(makerFee * 100).toFixed(2)}% | Taker fee:{' '}
-            {takerFee * 100}%
+          <div className="flex flex-col md:flex-row text-xs text-th-fgd-4 px-6 mt-2.5 items-center justify-center">
+            <div>Maker fee: {(makerFee * 100).toFixed(2)}% </div>
+            <span className="hidden md:block md:px-1">|</span>
+            <div> Taker fee: {takerFee * 100}%</div>
           </div>
         </div>
       </div>
diff --git a/components/trade_form/OrderSideTabs.tsx b/components/trade_form/OrderSideTabs.tsx
index a811c33d..bc6844ff 100644
--- a/components/trade_form/OrderSideTabs.tsx
+++ b/components/trade_form/OrderSideTabs.tsx
@@ -18,22 +18,22 @@ const OrderSideTabs: FunctionComponent<OrderSideTabsProps> = ({
   const { t } = useTranslation('common')
   const market = useMangoStore((s) => s.selectedMarket.current)
   return (
-    <div className={`border-b border-th-fgd-4 mb-3 relative -mt-2.5`}>
+    <div className={`md:border-b md:border-th-fgd-4 mb-3 relative -mt-2.5`}>
       <div
-        className={`absolute ${
+        className={`absolute hidden md:block ${
           side === 'buy'
             ? 'bg-th-green translate-x-0'
             : 'bg-th-red translate-x-full'
         } bottom-[-1px] default-transition left-0 h-0.5 transform w-1/2`}
       />
-      <nav className="-mb-px flex" aria-label="Tabs">
+      <nav className="-mb-px flex space-x-2" aria-label="Tabs">
         <button
           onClick={() => onChange('buy')}
-          className={`cursor-pointer default-transition flex font-semibold items-center justify-center pb-2 md:py-2 relative text-base w-1/2 whitespace-nowrap hover:opacity-100
+          className={`cursor-pointer default-transition flex font-semibold items-center justify-center py-1.5 md:py-2 relative text-sm md:text-base w-1/2 whitespace-nowrap hover:opacity-100
                     ${
                       side === 'buy'
-                        ? `text-th-green`
-                        : `text-th-fgd-4 hover:text-th-green`
+                        ? `border border-th-green md:border-0 text-th-green`
+                        : `border border-th-fgd-4 md:border-0 text-th-fgd-4 hover:border-th-green hover:text-th-green`
                     }
                   `}
         >
@@ -41,11 +41,11 @@ const OrderSideTabs: FunctionComponent<OrderSideTabsProps> = ({
         </button>
         <button
           onClick={() => onChange('sell')}
-          className={`cursor-pointer default-transition flex font-semibold items-center justify-center pb-2 md:py-2 relative text-base w-1/2 whitespace-nowrap hover:opacity-100
+          className={`cursor-pointer default-transition flex font-semibold items-center justify-center py-1.5 md:py-2 relative text-sm md:text-base w-1/2 whitespace-nowrap hover:opacity-100
                     ${
                       side === 'sell'
-                        ? `text-th-red`
-                        : `text-th-fgd-4 hover:text-th-red`
+                        ? `border border-th-red md:border-0 text-th-red`
+                        : `border border-th-fgd-4 md:border-0 text-th-fgd-4 hover:border-th-red hover:text-th-red`
                     }
                   `}
         >
diff --git a/pages/account.tsx b/pages/account.tsx
index 85e1fba9..eb2084ca 100644
--- a/pages/account.tsx
+++ b/pages/account.tsx
@@ -20,13 +20,13 @@ import AccountNameModal from '../components/AccountNameModal'
 import Button from '../components/Button'
 import EmptyState from '../components/EmptyState'
 import Loading from '../components/Loading'
-import SwipeableTabs from '../components/mobile/SwipeableTabs'
 import Swipeable from '../components/mobile/Swipeable'
 import Tabs from '../components/Tabs'
 import { useViewport } from '../hooks/useViewport'
 import { breakpoints } from '../components/TradePageGrid'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useTranslation } from 'next-i18next'
+import Select from '../components/Select'
 
 export async function getServerSideProps({ locale }) {
   return {
@@ -37,17 +37,7 @@ export async function getServerSideProps({ locale }) {
   }
 }
 
-const TABS = [
-  'Portfolio',
-  // 'Assets',
-  // 'Borrows',
-  // 'Stats',
-  // 'Positions',
-  'Orders',
-  'Trade History',
-  'Interest',
-  'Funding',
-]
+const TABS = ['Portfolio', 'Orders', 'Trade History', 'Interest', 'Funding']
 
 export default function Account() {
   const { t } = useTranslation('common')
@@ -155,11 +145,18 @@ export default function Account() {
               tabs={TABS}
             />
           ) : (
-            <SwipeableTabs
-              onChange={handleChangeViewIndex}
-              tabs={TABS}
-              tabIndex={viewIndex}
-            />
+            <div className="pb-2 pt-3">
+              <Select
+                value={TABS[viewIndex]}
+                onChange={(e) => handleChangeViewIndex(e)}
+              >
+                {TABS.map((tab, index) => (
+                  <Select.Option key={index + tab} value={index}>
+                    {tab}
+                  </Select.Option>
+                ))}
+              </Select>
+            </div>
           )
         ) : null}
         <div className="bg-th-bkg-2 p-4 sm:p-6 rounded-lg">
@@ -180,6 +177,12 @@ export default function Account() {
                 <div>
                   <AccountHistory />
                 </div>
+                <div>
+                  <AccountInterest />
+                </div>
+                <div>
+                  <AccountFunding />
+                </div>
               </Swipeable>
             )
           ) : connected ? (
diff --git a/pages/borrow.tsx b/pages/borrow.tsx
index 50b91973..3b537a0d 100644
--- a/pages/borrow.tsx
+++ b/pages/borrow.tsx
@@ -38,10 +38,14 @@ export default function Borrow() {
       <TopBar />
       <PageBodyContainer>
         <div className="pt-8 pb-3 sm:pb-4 md:pt-10">
-          <h1 className={`mb-1 text-th-fgd-1 text-2xl font-semibold`}>
-            {t('borrow-funds')}
-          </h1>
-          <p>{t('borrow-notification')}</p>
+          {connected ? (
+            <>
+              <h1 className={`mb-1 text-th-fgd-1 text-2xl font-semibold`}>
+                {t('borrow-funds')}
+              </h1>
+              <p>{t('borrow-notification')}</p>
+            </>
+          ) : null}
         </div>
         <div className="bg-th-bkg-2 overflow-none p-4 sm:p-6 rounded-lg">
           {selectedMangoAccount ? (
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 44507690..a3d54562 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -100,6 +100,7 @@
   "health-ratio": "Health Ratio",
   "hide-all": "Hide all from Nav",
   "high": "High",
+  "history": "History",
   "hourly-borrow-interest": "Hourly Borrow Interest",
   "hourly-deposit-interest": "Hourly Deposit Interest",
   "hourly-funding": "Hourly Funding",
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index 6f73ec97..f1817df4 100644
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@@ -99,6 +99,7 @@
   "health-ratio": "Relación de salud",
   "hide-all": "Ocultar todo de Nav",
   "high": "Alta",
+  "history": "La Historia",
   "hourly-borrow-interest": "Préstamo prestado por hora",
   "hourly-deposit-interest": "Interés por depósito por hora",
   "hourly-funding": "Financiamiento por hora",
diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json
index fdf89727..07d2cb8b 100644
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@@ -100,6 +100,7 @@
     "health-ratio": "健康比率",
     "hide-all": "在导航栏中隐藏全部",
     "high": "高",
+    "history": "历史",
     "hourly-borrow-interest": "1小时借贷利息",
     "hourly-deposit-interest": "1小时存款利息",
     "hourly-funding": "1小时资金费",
diff --git a/public/locales/zh_tw/common.json b/public/locales/zh_tw/common.json
index 713c5394..f6cfbeed 100644
--- a/public/locales/zh_tw/common.json
+++ b/public/locales/zh_tw/common.json
@@ -100,6 +100,7 @@
   "health-ratio": "健康比率",
   "hide-all": "在導航欄中隱藏全部",
   "high": "高",
+  "history": "歷史",
   "hourly-borrow-interest": "1小時借貸利息",
   "hourly-deposit-interest": "1小時存款利息",
   "hourly-funding": "1小時資金費",