diff --git a/components/SideNav.tsx b/components/SideNav.tsx
index 9452d7ac..c57c20da 100644
--- a/components/SideNav.tsx
+++ b/components/SideNav.tsx
@@ -12,6 +12,7 @@ import {
   ArrowTrendingUpIcon,
   XMarkIcon,
   MagnifyingGlassIcon,
+  BanknotesIcon,
 } from '@heroicons/react/20/solid'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
@@ -94,6 +95,13 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
               title={t('trade')}
               pagePath="/trade"
             />
+            <MenuItem
+              active={pathname === '/borrow'}
+              collapsed={collapsed}
+              icon={<BanknotesIcon className="h-5 w-5" />}
+              title={t('borrow')}
+              pagePath="/borrow"
+            />
             <MenuItem
               active={pathname === '/stats'}
               collapsed={collapsed}
diff --git a/components/borrow/AssetsBorrowsTable.tsx b/components/borrow/AssetsBorrowsTable.tsx
new file mode 100644
index 00000000..62647b28
--- /dev/null
+++ b/components/borrow/AssetsBorrowsTable.tsx
@@ -0,0 +1,244 @@
+import {
+  ArrowUpLeftIcon,
+  QuestionMarkCircleIcon,
+} from '@heroicons/react/20/solid'
+import { useTranslation } from 'next-i18next'
+import Image from 'next/legacy/image'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useViewport } from '../../hooks/useViewport'
+import { formatDecimal, formatFixedDecimals } from '../../utils/numbers'
+import { breakpoints } from '../../utils/theme'
+import { IconButton } from '../shared/Button'
+import Tooltip from '@components/shared/Tooltip'
+import useJupiterMints from 'hooks/useJupiterMints'
+import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
+import useMangoGroup from 'hooks/useMangoGroup'
+import mangoStore from '@store/mangoStore'
+import AmountWithValue from '@components/shared/AmountWithValue'
+import { getMaxWithdrawForBank } from '@components/swap/useTokenMax'
+import useMangoAccount from 'hooks/useMangoAccount'
+import BorrowRepayModal from '@components/modals/BorrowRepayModal'
+
+const AssetsBorrowsTable = () => {
+  const { t } = useTranslation(['common', 'token'])
+  const [showBorrowModal, setShowBorrowModal] = useState(false)
+  const [selectedToken, setSelectedToken] = useState('')
+  const actions = mangoStore.getState().actions
+  const initialStatsLoad = mangoStore((s) => s.tokenStats.initialLoad)
+  const { group } = useMangoGroup()
+  const { mangoAccount } = useMangoAccount()
+  const { mangoTokens } = useJupiterMints()
+  const { width } = useViewport()
+  const showTableView = width ? width > breakpoints.md : false
+
+  const handleShowBorrowModal = useCallback((token: string) => {
+    setSelectedToken(token)
+    setShowBorrowModal(true)
+  }, [])
+
+  useEffect(() => {
+    if (group && !initialStatsLoad) {
+      actions.fetchTokenStats()
+    }
+  }, [group])
+
+  const banks = useMemo(() => {
+    if (group) {
+      const rawBanks = Array.from(group?.banksMapByName, ([key, value]) => ({
+        key,
+        value,
+      }))
+      return rawBanks.sort((a, b) => a.key.localeCompare(b.key))
+    }
+    return []
+  }, [group])
+
+  return (
+    <>
+      {showTableView ? (
+        <Table>
+          <thead>
+            <TrHead>
+              <Th className="text-left">{t('token')}</Th>
+              <Th className="text-right">{t('total-borrows')}</Th>
+              <Th>
+                <div className="flex justify-end">
+                  <Tooltip content={t('borrow:tooltip-available')}>
+                    <span className="tooltip-underline">{t('available')}</span>
+                  </Tooltip>
+                </div>
+              </Th>
+              <Th>
+                <div className="flex justify-end">{t('rate')}</div>
+              </Th>
+              <Th />
+            </TrHead>
+          </thead>
+          <tbody>
+            {banks.map(({ key, value }) => {
+              const bank = value[0]
+
+              let logoURI
+              if (mangoTokens?.length) {
+                logoURI = mangoTokens.find(
+                  (t) => t.address === bank.mint.toString()
+                )?.logoURI
+              }
+              const borrows = bank.uiBorrows()
+              const price = bank.uiPrice
+
+              const available =
+                group && mangoAccount
+                  ? getMaxWithdrawForBank(
+                      group,
+                      bank,
+                      mangoAccount,
+                      true
+                    ).toNumber()
+                  : 0
+
+              return (
+                <TrBody key={key}>
+                  <Td>
+                    <div className="flex items-center">
+                      <div className="mr-2.5 flex flex-shrink-0 items-center">
+                        {logoURI ? (
+                          <Image alt="" width="24" height="24" src={logoURI} />
+                        ) : (
+                          <QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
+                        )}
+                      </div>
+                      <p className="font-body">{bank.name}</p>
+                    </div>
+                  </Td>
+                  <Td>
+                    <div className="flex flex-col text-right">
+                      <p>{formatFixedDecimals(borrows)}</p>
+                      <p className="text-th-fgd-4">
+                        {formatFixedDecimals(borrows * price, true, true)}
+                      </p>
+                    </div>
+                  </Td>
+                  <Td>
+                    <div className="flex flex-col text-right">
+                      <p>
+                        {available > 0 ? formatFixedDecimals(available) : '0'}
+                      </p>
+                      <p className="text-th-fgd-4">
+                        {available > 0
+                          ? formatFixedDecimals(available * price, false, true)
+                          : '$0.00'}
+                      </p>
+                    </div>
+                  </Td>
+                  <Td>
+                    <p className="text-right text-th-down">
+                      {formatDecimal(bank.getBorrowRateUi(), 2, {
+                        fixed: true,
+                      })}
+                      %
+                    </p>
+                  </Td>
+                  <Td>
+                    <div className="flex justify-end">
+                      <Tooltip content={`${t('borrow')} ${bank.name}`}>
+                        <IconButton
+                          disabled={available === 0}
+                          onClick={() => handleShowBorrowModal(bank.name)}
+                          size="small"
+                        >
+                          <ArrowUpLeftIcon className="h-5 w-5" />
+                        </IconButton>
+                      </Tooltip>
+                    </div>
+                  </Td>
+                </TrBody>
+              )
+            })}
+          </tbody>
+        </Table>
+      ) : (
+        <div>
+          {banks.map(({ key, value }) => {
+            const bank = value[0]
+            let logoURI
+            if (mangoTokens?.length) {
+              logoURI = mangoTokens.find(
+                (t) => t.address === bank.mint.toString()
+              )?.logoURI
+            }
+            const price = bank.uiPrice
+
+            const available =
+              group && mangoAccount
+                ? getMaxWithdrawForBank(
+                    group,
+                    bank,
+                    mangoAccount,
+                    true
+                  ).toNumber()
+                : 0
+
+            return (
+              <div key={key} className="border-b border-th-bkg-3 px-6 py-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center">
+                    <div className="mr-2.5 flex flex-shrink-0 items-center">
+                      {logoURI ? (
+                        <Image alt="" width="24" height="24" src={logoURI} />
+                      ) : (
+                        <QuestionMarkCircleIcon className="h-7 w-7 text-th-fgd-3" />
+                      )}
+                    </div>
+                    <p className="text-th-fgd-1">{bank.name}</p>
+                  </div>
+                  <div className="flex items-center space-x-4">
+                    <div>
+                      <p className="mb-0.5 text-right text-xs">
+                        {t('available')}
+                      </p>
+                      <AmountWithValue
+                        amount={formatFixedDecimals(available)}
+                        value={formatFixedDecimals(
+                          available * price,
+                          true,
+                          true
+                        )}
+                      />
+                    </div>
+                    <div>
+                      <p className="mb-0.5 text-right text-xs">{t('rate')}</p>
+                      <p className="text-right text-th-down">
+                        {formatDecimal(bank.getBorrowRateUi(), 2, {
+                          fixed: true,
+                        })}
+                        %
+                      </p>
+                    </div>
+                    <IconButton
+                      disabled={available === 0}
+                      onClick={() => handleShowBorrowModal(bank.name)}
+                      size="medium"
+                    >
+                      <ArrowUpLeftIcon className="h-5 w-5" />
+                    </IconButton>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+      {showBorrowModal ? (
+        <BorrowRepayModal
+          action="borrow"
+          isOpen={showBorrowModal}
+          onClose={() => setShowBorrowModal(false)}
+          token={selectedToken}
+        />
+      ) : null}
+    </>
+  )
+}
+
+export default AssetsBorrowsTable
diff --git a/components/borrow/BorrowPage.tsx b/components/borrow/BorrowPage.tsx
new file mode 100644
index 00000000..98ec392f
--- /dev/null
+++ b/components/borrow/BorrowPage.tsx
@@ -0,0 +1,231 @@
+import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
+import Tooltip from '@components/shared/Tooltip'
+import useLocalStorageState from 'hooks/useLocalStorageState'
+import useMangoAccount from 'hooks/useMangoAccount'
+import useMangoGroup from 'hooks/useMangoGroup'
+import { useTranslation } from 'next-i18next'
+import { ANIMATION_SETTINGS_KEY } from 'utils/constants'
+import FlipNumbers from 'react-flip-numbers'
+import Button from '@components/shared/Button'
+import mangoStore from '@store/mangoStore'
+import { formatFixedDecimals } from 'utils/numbers'
+import { useEffect, useMemo, useState } from 'react'
+import YourBorrowsTable from './YourBorrowsTable'
+import AssetsBorrowsTable from './AssetsBorrowsTable'
+import { ArrowDownRightIcon, ArrowUpLeftIcon } from '@heroicons/react/20/solid'
+import { useWallet } from '@solana/wallet-adapter-react'
+import BorrowRepayModal from '@components/modals/BorrowRepayModal'
+import CreateAccountModal from '@components/modals/CreateAccountModal'
+import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4'
+import TabButtons from '@components/shared/TabButtons'
+import { useViewport } from 'hooks/useViewport'
+import { breakpoints } from 'utils/theme'
+
+const BorrowPage = () => {
+  const { t } = useTranslation(['common', 'borrow'])
+  const { group } = useMangoGroup()
+  const { mangoAccount, mangoAccountAddress } = useMangoAccount()
+  const [activeTab, setActiveTab] = useState('borrow:your-borrows')
+  const [showBorrowModal, setShowBorrowModal] = useState(false)
+  const [showRepayModal, setShowRepayModal] = useState(false)
+  const [showCreateAccountModal, setShowCreateAccountModal] = useState(false)
+  const { connected } = useWallet()
+  const { width } = useViewport()
+  const fullWidthTabs = width ? width < breakpoints.sm : false
+
+  const handleBorrowModal = () => {
+    if (!connected || mangoAccount) {
+      setShowBorrowModal(true)
+    } else {
+      setShowCreateAccountModal(true)
+    }
+  }
+  const [animationSettings] = useLocalStorageState(
+    ANIMATION_SETTINGS_KEY,
+    INITIAL_ANIMATION_SETTINGS
+  )
+  const actions = mangoStore((s) => s.actions)
+
+  useEffect(() => {
+    if (mangoAccountAddress) {
+      const set = mangoStore.getState().set
+      set((s) => {
+        s.mangoAccount.performance.initialLoad = false
+      })
+      actions.fetchAccountPerformance(mangoAccountAddress, 1)
+    }
+  }, [actions, mangoAccountAddress])
+
+  const banks = useMemo(() => {
+    if (group && mangoAccount) {
+      const borrowBanks = Array.from(group?.banksMapByName, ([key, value]) => ({
+        key,
+        value,
+      })).filter((b) => {
+        const bank = b.value[0]
+        return mangoAccount.getTokenBalanceUi(bank) < 0
+      })
+      return borrowBanks
+        .map((b) => {
+          return {
+            balance: mangoAccount.getTokenBalanceUi(b.value[0]),
+            bank: b.value[0],
+          }
+        })
+        .sort((a, b) => {
+          const aBalance = Math.abs(a.balance * a.bank.uiPrice)
+          const bBalance = Math.abs(b.balance * b.bank.uiPrice)
+          return aBalance > bBalance ? -1 : 1
+        })
+    }
+    return []
+  }, [group, mangoAccount])
+
+  const borrowValue = useMemo(() => {
+    if (!banks.length) return 0
+    return banks.reduce((a, c) => a + Math.abs(c.balance) * c.bank.uiPrice, 0)
+  }, [banks])
+
+  useEffect(() => {
+    if (mangoAccountAddress && !borrowValue) {
+      setActiveTab('borrow:assets-to-borrow')
+    }
+  }, [borrowValue, mangoAccountAddress])
+
+  const [collateralRemaining, collateralRemainingRatio] = useMemo(() => {
+    if (mangoAccount && group) {
+      const remaining = toUiDecimalsForQuote(
+        mangoAccount.getCollateralValue(group).toNumber()
+      )
+      if (borrowValue) {
+        const total = borrowValue + remaining
+        const ratio = (remaining / total) * 100
+        return [remaining, ratio]
+      }
+      return [remaining, 100]
+    }
+    return [0, 0]
+  }, [borrowValue, mangoAccount, group])
+
+  return (
+    <>
+      <div className="flex flex-col border-b border-th-bkg-3 px-6 py-4 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex flex-col md:flex-row">
+          <div className="pb-4 md:pr-6 md:pb-0">
+            <Tooltip
+              maxWidth="20rem"
+              placement="bottom-start"
+              content="The value of your assets (deposits) minus the value of your liabilities (borrows)."
+              delay={250}
+            >
+              <p className="mb-0.5 text-base">
+                {t('borrow:current-borrow-value')}
+              </p>
+            </Tooltip>
+            <div className="flex items-center font-display text-5xl text-th-fgd-1">
+              {animationSettings['number-scroll'] ? (
+                group && mangoAccount ? (
+                  <FlipNumbers
+                    height={48}
+                    width={35}
+                    play
+                    delay={0.05}
+                    duration={1}
+                    numbers={formatFixedDecimals(borrowValue, true, true)}
+                  />
+                ) : (
+                  <FlipNumbers
+                    height={48}
+                    width={36}
+                    play
+                    delay={0.05}
+                    duration={1}
+                    numbers={'$0.00'}
+                  />
+                )
+              ) : (
+                <span>{formatFixedDecimals(borrowValue, true, true)}</span>
+              )}
+            </div>
+          </div>
+          <div className="h-full border-t border-th-bkg-3 pt-4 md:border-t-0 md:border-b-0 md:border-l md:pt-0 md:pl-6">
+            <p className="mb-0.5 text-base">
+              {t('borrow:available-to-borrow')}
+            </p>
+            <p className="mb-1 font-display text-2xl text-th-fgd-2">
+              {formatFixedDecimals(collateralRemaining, true, true)}
+            </p>
+            <div className="mt-[2px] flex h-2 w-full rounded-full bg-th-bkg-3 md:w-48">
+              <div
+                style={{
+                  width: `${collateralRemainingRatio}%`,
+                }}
+                className="flex rounded-full bg-th-active"
+              ></div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-6 mb-1 lg:mt-0 lg:mb-0">
+          <div className="flex items-center space-x-2">
+            <Button
+              className="flex w-1/2 items-center justify-center md:w-auto"
+              disabled={!mangoAccount}
+              onClick={() => setShowRepayModal(true)}
+              secondary
+            >
+              <ArrowDownRightIcon className="mr-2 h-5 w-5" />
+              {t('repay')}
+            </Button>
+            <Button
+              className="flex w-1/2 items-center justify-center md:w-auto"
+              onClick={handleBorrowModal}
+              secondary
+            >
+              <ArrowUpLeftIcon className="mr-2 h-5 w-5" />
+              {t('borrow')}
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div className="border-b border-th-bkg-3">
+        <TabButtons
+          activeValue={activeTab}
+          fillWidth={fullWidthTabs}
+          onChange={(v) => setActiveTab(v)}
+          showBorders
+          values={[
+            ['borrow:your-borrows', 0],
+            ['borrow:assets-to-borrow', 0],
+          ]}
+        />
+      </div>
+      {activeTab === 'borrow:your-borrows' ? (
+        <YourBorrowsTable banks={banks} />
+      ) : (
+        <AssetsBorrowsTable />
+      )}
+      {showBorrowModal ? (
+        <BorrowRepayModal
+          action="borrow"
+          isOpen={showBorrowModal}
+          onClose={() => setShowBorrowModal(false)}
+        />
+      ) : null}
+      {showRepayModal ? (
+        <BorrowRepayModal
+          action="repay"
+          isOpen={showRepayModal}
+          onClose={() => setShowRepayModal(false)}
+        />
+      ) : null}
+      {showCreateAccountModal ? (
+        <CreateAccountModal
+          isOpen={showCreateAccountModal}
+          onClose={() => setShowCreateAccountModal(false)}
+        />
+      ) : null}
+    </>
+  )
+}
+
+export default BorrowPage
diff --git a/components/borrow/YourBorrowsTable.tsx b/components/borrow/YourBorrowsTable.tsx
new file mode 100644
index 00000000..37449e4a
--- /dev/null
+++ b/components/borrow/YourBorrowsTable.tsx
@@ -0,0 +1,303 @@
+import { Bank } from '@blockworks-foundation/mango-v4'
+import useJupiterMints from 'hooks/useJupiterMints'
+import {
+  ArrowDownRightIcon,
+  ArrowUpLeftIcon,
+  NoSymbolIcon,
+  QuestionMarkCircleIcon,
+} from '@heroicons/react/20/solid'
+import useMangoAccount from 'hooks/useMangoAccount'
+import { useViewport } from 'hooks/useViewport'
+import { useTranslation } from 'next-i18next'
+import Image from 'next/legacy/image'
+import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
+import { breakpoints } from 'utils/theme'
+import { Table, Td, Th, TrBody, TrHead } from '../shared/TableElements'
+import useMangoGroup from 'hooks/useMangoGroup'
+import AmountWithValue from '../shared/AmountWithValue'
+import ConnectEmptyState from '../shared/ConnectEmptyState'
+import { useWallet } from '@solana/wallet-adapter-react'
+import Decimal from 'decimal.js'
+import { getMaxWithdrawForBank } from '@components/swap/useTokenMax'
+import { IconButton } from '@components/shared/Button'
+import { useCallback, useState } from 'react'
+import BorrowRepayModal from '@components/modals/BorrowRepayModal'
+import Tooltip from '@components/shared/Tooltip'
+
+interface BankWithBalance {
+  balance: number
+  bank: Bank
+}
+
+const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
+  const { t } = useTranslation(['common', 'trade'])
+  const [showBorrowModal, setShowBorrowModal] = useState(false)
+  const [showRepayModal, setShowRepayModal] = useState(false)
+  const [selectedToken, setSelectedToken] = useState('')
+  const { mangoAccount, mangoAccountAddress } = useMangoAccount()
+  const { group } = useMangoGroup()
+  const { mangoTokens } = useJupiterMints()
+  const { width } = useViewport()
+  const { connected } = useWallet()
+  const showTableView = width ? width > breakpoints.md : false
+
+  const handleShowActionModals = useCallback(
+    (token: string, action: 'borrow' | 'repay') => {
+      setSelectedToken(token)
+      action === 'borrow' ? setShowBorrowModal(true) : setShowRepayModal(true)
+    },
+    []
+  )
+
+  return (
+    <>
+      {banks?.length ? (
+        showTableView ? (
+          <Table>
+            <thead>
+              <TrHead>
+                <Th className="text-left">{t('token')}</Th>
+                <Th className="text-right">{t('borrow:borrowed-amount')}</Th>
+                <Th>
+                  <div className="flex justify-end">
+                    <Tooltip content={t('borrow:tooltip-available')}>
+                      <span className="tooltip-underline">
+                        {t('available')}
+                      </span>
+                    </Tooltip>
+                  </div>
+                </Th>
+                <Th className="text-right">{t('rate')}</Th>
+                <Th />
+              </TrHead>
+            </thead>
+            <tbody>
+              {banks.map((b) => {
+                const bank: Bank = b.bank
+
+                let logoURI
+                if (mangoTokens.length) {
+                  logoURI = mangoTokens.find(
+                    (t) => t.address === bank.mint.toString()
+                  )?.logoURI
+                }
+
+                const available =
+                  group && mangoAccount
+                    ? getMaxWithdrawForBank(group, bank, mangoAccount, true)
+                    : new Decimal(0)
+
+                const borrowedAmount = mangoAccount
+                  ? Math.abs(mangoAccount.getTokenBalanceUi(bank))
+                  : 0
+
+                return (
+                  <TrBody key={bank.name} className="text-sm">
+                    <Td>
+                      <div className="flex items-center">
+                        <div className="mr-2.5 flex flex-shrink-0 items-center">
+                          {logoURI ? (
+                            <Image
+                              alt=""
+                              width="20"
+                              height="20"
+                              src={logoURI}
+                            />
+                          ) : (
+                            <QuestionMarkCircleIcon className="h-7 w-7 text-th-fgd-3" />
+                          )}
+                        </div>
+                        <span>{bank.name}</span>
+                      </div>
+                    </Td>
+                    <Td className="text-right">
+                      {mangoAccount ? (
+                        <AmountWithValue
+                          amount={formatDecimal(
+                            borrowedAmount,
+                            bank.mintDecimals
+                          )}
+                          value={formatFixedDecimals(
+                            borrowedAmount * bank.uiPrice,
+                            true
+                          )}
+                          stacked
+                        />
+                      ) : (
+                        <AmountWithValue amount={0} value={'0'} />
+                      )}
+                    </Td>
+                    <Td className="text-right">
+                      <AmountWithValue
+                        amount={formatDecimal(
+                          available.toNumber(),
+                          bank.mintDecimals
+                        )}
+                        value={formatFixedDecimals(
+                          available.toNumber() * bank.uiPrice,
+                          true
+                        )}
+                        stacked
+                      />
+                    </Td>
+                    <Td className="text-right text-th-down">
+                      {formatDecimal(bank.getBorrowRateUi(), 2, {
+                        fixed: true,
+                      })}
+                      %
+                    </Td>
+                    <Td>
+                      <div className="flex items-center justify-end space-x-2">
+                        <Tooltip content={`${t('repay')} ${bank.name}`}>
+                          <IconButton
+                            onClick={() =>
+                              handleShowActionModals(bank.name, 'repay')
+                            }
+                            size="small"
+                          >
+                            <ArrowDownRightIcon className="h-5 w-5" />
+                          </IconButton>
+                        </Tooltip>
+                        <Tooltip content={`${t('borrow')} ${bank.name}`}>
+                          <IconButton
+                            disabled={available.eq(0)}
+                            onClick={() =>
+                              handleShowActionModals(bank.name, 'borrow')
+                            }
+                            size="small"
+                          >
+                            <ArrowUpLeftIcon className="h-5 w-5" />
+                          </IconButton>
+                        </Tooltip>
+                      </div>
+                    </Td>
+                  </TrBody>
+                )
+              })}
+            </tbody>
+          </Table>
+        ) : (
+          banks.map((b) => {
+            const bank: Bank = b.bank
+
+            let logoURI
+            if (mangoTokens.length) {
+              logoURI = mangoTokens.find(
+                (t) => t.address === bank.mint.toString()
+              )?.logoURI
+            }
+
+            const available =
+              group && mangoAccount
+                ? getMaxWithdrawForBank(group, bank, mangoAccount, true)
+                : new Decimal(0)
+
+            const borrowedAmount = mangoAccount
+              ? Math.abs(mangoAccount.getTokenBalanceUi(bank))
+              : 0
+
+            return (
+              <div
+                key={bank.name}
+                className="border-b border-th-bkg-3 px-6 py-4"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center">
+                    <div className="mr-2.5 flex flex-shrink-0 items-center">
+                      {logoURI ? (
+                        <Image alt="" width="24" height="24" src={logoURI} />
+                      ) : (
+                        <QuestionMarkCircleIcon className="h-7 w-7 text-th-fgd-3" />
+                      )}
+                    </div>
+                    <p className="text-th-fgd-1">{bank.name}</p>
+                  </div>
+                  <div className="flex items-center space-x-4">
+                    <div>
+                      <p className="mb-0.5 text-right text-xs">
+                        {t('borrow:borrowed-amount')}
+                      </p>
+                      <AmountWithValue
+                        amount={formatDecimal(
+                          borrowedAmount,
+                          bank.mintDecimals
+                        )}
+                        value={formatFixedDecimals(
+                          borrowedAmount * bank.uiPrice,
+                          true
+                        )}
+                      />
+                    </div>
+                    <div>
+                      <p className="mb-0.5 text-right text-xs">{t('rate')}</p>
+                      <p className="text-right text-th-down">
+                        {formatDecimal(bank.getBorrowRateUi(), 2, {
+                          fixed: true,
+                        })}
+                        %
+                      </p>
+                    </div>
+                    <div className="flex space-x-2">
+                      <Tooltip content={`${t('repay')} ${bank.name}`}>
+                        <IconButton
+                          onClick={() =>
+                            handleShowActionModals(bank.name, 'repay')
+                          }
+                          size="medium"
+                        >
+                          <ArrowDownRightIcon className="h-5 w-5" />
+                        </IconButton>
+                      </Tooltip>
+                      <Tooltip content={`${t('borrow')} ${bank.name}`}>
+                        <IconButton
+                          disabled={available.eq(0)}
+                          onClick={() =>
+                            handleShowActionModals(bank.name, 'borrow')
+                          }
+                          size="medium"
+                        >
+                          <ArrowUpLeftIcon className="h-5 w-5" />
+                        </IconButton>
+                      </Tooltip>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )
+          })
+        )
+      ) : mangoAccountAddress || connected ? (
+        <div className="border-b border-th-bkg-3">
+          <div className="flex flex-col items-center p-8">
+            <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
+            <p>{t('borrow:no-borrows')}</p>
+          </div>
+        </div>
+      ) : (
+        <div className="border-b border-th-bkg-3">
+          <div className="p-8">
+            <ConnectEmptyState text={t('borrow:connect-borrows')} />
+          </div>
+        </div>
+      )}
+      {showBorrowModal ? (
+        <BorrowRepayModal
+          action="borrow"
+          isOpen={showBorrowModal}
+          onClose={() => setShowBorrowModal(false)}
+          token={selectedToken}
+        />
+      ) : null}
+      {showRepayModal ? (
+        <BorrowRepayModal
+          action="repay"
+          isOpen={showRepayModal}
+          onClose={() => setShowRepayModal(false)}
+          token={selectedToken}
+        />
+      ) : null}
+    </>
+  )
+}
+
+export default YourBorrowsTable
diff --git a/components/mobile/BottomBar.tsx b/components/mobile/BottomBar.tsx
index 4f3a86bf..eb4b7a52 100644
--- a/components/mobile/BottomBar.tsx
+++ b/components/mobile/BottomBar.tsx
@@ -15,6 +15,7 @@ import {
   BuildingLibraryIcon,
   ArrowTrendingUpIcon,
   MagnifyingGlassIcon,
+  BanknotesIcon,
 } from '@heroicons/react/20/solid'
 import SolanaTps from '@components/SolanaTps'
 
@@ -73,9 +74,9 @@ const BottomBar = () => {
           <ArrowTrendingUpIcon className="mb-1 h-4 w-4" />
           <StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
         </BottomBarLink>
-        <BottomBarLink isActive={asPath === '/settings'} pathName="/settings">
-          <Cog8ToothIcon className="mb-1 h-4 w-4" />
-          <StyledBarItemLabel>{t('settings')}</StyledBarItemLabel>
+        <BottomBarLink isActive={asPath === '/borrow'} pathName="/borrow">
+          <BanknotesIcon className="mb-1 h-4 w-4" />
+          <StyledBarItemLabel>{t('borrow')}</StyledBarItemLabel>
         </BottomBarLink>
         <button
           className={`${
@@ -118,6 +119,11 @@ const MoreMenuPanel = ({
         className="border-b border-th-bkg-4"
         onClick={() => setShowPanel(false)}
       >
+        <MoreMenuItem
+          title={t('settings')}
+          path="/settings"
+          icon={<Cog8ToothIcon className="h-5 w-5" />}
+        />
         <MoreMenuItem
           title={t('stats')}
           path="/stats"
diff --git a/components/shared/TabButtons.tsx b/components/shared/TabButtons.tsx
index ab60d421..b4205a19 100644
--- a/components/shared/TabButtons.tsx
+++ b/components/shared/TabButtons.tsx
@@ -18,7 +18,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
   rounded = false,
   fillWidth = false,
 }) => {
-  const { t } = useTranslation(['common', 'swap', 'token', 'trade'])
+  const { t } = useTranslation(['common', 'swap', 'token', 'trade', 'borrow'])
 
   return (
     <div className="flex w-full bg-th-bkg-1 text-th-fgd-4">
diff --git a/pages/borrow.tsx b/pages/borrow.tsx
new file mode 100644
index 00000000..32cd170d
--- /dev/null
+++ b/pages/borrow.tsx
@@ -0,0 +1,30 @@
+import BorrowPage from '@components/borrow/BorrowPage'
+import type { NextPage } from 'next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+
+export async function getStaticProps({ locale }: { locale: string }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, [
+        'borrow',
+        'common',
+        'onboarding',
+        'profile',
+        'search',
+        'settings',
+        'token',
+        'trade',
+      ])),
+    },
+  }
+}
+
+const Borrow: NextPage = () => {
+  return (
+    <div className="pb-20 md:pb-0">
+      <BorrowPage />
+    </div>
+  )
+}
+
+export default Borrow
diff --git a/public/locales/en/borrow.json b/public/locales/en/borrow.json
new file mode 100644
index 00000000..1000f3c2
--- /dev/null
+++ b/public/locales/en/borrow.json
@@ -0,0 +1,11 @@
+{
+    "assets-to-borrow": "Assets to Borrow",
+    "available-to-borrow": "Available to Borrow",
+    "borrowed-amount": "Borrowed Amount",
+    "connect-borrows": "Connect to see your borrows",
+    "current-borrow-value": "Current Borrow Value",
+    "liability-weight-desc": "Liability weight adds to the value of the liability in your account health calculation.",
+    "no-borrows": "No Borrows",
+    "tooltip-available": "The max amount you can borrow",
+    "your-borrows": "Your Borrows"
+}
\ No newline at end of file
diff --git a/public/locales/es/borrow.json b/public/locales/es/borrow.json
new file mode 100644
index 00000000..1000f3c2
--- /dev/null
+++ b/public/locales/es/borrow.json
@@ -0,0 +1,11 @@
+{
+    "assets-to-borrow": "Assets to Borrow",
+    "available-to-borrow": "Available to Borrow",
+    "borrowed-amount": "Borrowed Amount",
+    "connect-borrows": "Connect to see your borrows",
+    "current-borrow-value": "Current Borrow Value",
+    "liability-weight-desc": "Liability weight adds to the value of the liability in your account health calculation.",
+    "no-borrows": "No Borrows",
+    "tooltip-available": "The max amount you can borrow",
+    "your-borrows": "Your Borrows"
+}
\ No newline at end of file
diff --git a/public/locales/ru/borrow.json b/public/locales/ru/borrow.json
new file mode 100644
index 00000000..1000f3c2
--- /dev/null
+++ b/public/locales/ru/borrow.json
@@ -0,0 +1,11 @@
+{
+    "assets-to-borrow": "Assets to Borrow",
+    "available-to-borrow": "Available to Borrow",
+    "borrowed-amount": "Borrowed Amount",
+    "connect-borrows": "Connect to see your borrows",
+    "current-borrow-value": "Current Borrow Value",
+    "liability-weight-desc": "Liability weight adds to the value of the liability in your account health calculation.",
+    "no-borrows": "No Borrows",
+    "tooltip-available": "The max amount you can borrow",
+    "your-borrows": "Your Borrows"
+}
\ No newline at end of file
diff --git a/public/locales/zh/borrow.json b/public/locales/zh/borrow.json
new file mode 100644
index 00000000..1000f3c2
--- /dev/null
+++ b/public/locales/zh/borrow.json
@@ -0,0 +1,11 @@
+{
+    "assets-to-borrow": "Assets to Borrow",
+    "available-to-borrow": "Available to Borrow",
+    "borrowed-amount": "Borrowed Amount",
+    "connect-borrows": "Connect to see your borrows",
+    "current-borrow-value": "Current Borrow Value",
+    "liability-weight-desc": "Liability weight adds to the value of the liability in your account health calculation.",
+    "no-borrows": "No Borrows",
+    "tooltip-available": "The max amount you can borrow",
+    "your-borrows": "Your Borrows"
+}
\ No newline at end of file
diff --git a/public/locales/zh_tw/borrow.json b/public/locales/zh_tw/borrow.json
new file mode 100644
index 00000000..1000f3c2
--- /dev/null
+++ b/public/locales/zh_tw/borrow.json
@@ -0,0 +1,11 @@
+{
+    "assets-to-borrow": "Assets to Borrow",
+    "available-to-borrow": "Available to Borrow",
+    "borrowed-amount": "Borrowed Amount",
+    "connect-borrows": "Connect to see your borrows",
+    "current-borrow-value": "Current Borrow Value",
+    "liability-weight-desc": "Liability weight adds to the value of the liability in your account health calculation.",
+    "no-borrows": "No Borrows",
+    "tooltip-available": "The max amount you can borrow",
+    "your-borrows": "Your Borrows"
+}
\ No newline at end of file