diff --git a/components/borrow/AssetsBorrowsTable.tsx b/components/borrow/AssetsBorrowsTable.tsx
index 7c0f0b3a..9278d0fd 100644
--- a/components/borrow/AssetsBorrowsTable.tsx
+++ b/components/borrow/AssetsBorrowsTable.tsx
@@ -1,5 +1,6 @@
 import {
   ArrowUpLeftIcon,
+  ChevronDownIcon,
   QuestionMarkCircleIcon,
 } from '@heroicons/react/20/solid'
 import { useTranslation } from 'next-i18next'
@@ -8,7 +9,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { useViewport } from '../../hooks/useViewport'
 import { formatNumericValue } from '../../utils/numbers'
 import { breakpoints } from '../../utils/theme'
-import { IconButton } from '../shared/Button'
+import Button, { 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'
@@ -18,6 +19,7 @@ import BorrowRepayModal from '@components/modals/BorrowRepayModal'
 import BankAmountWithValue from '@components/shared/BankAmountWithValue'
 import useBanksWithBalances from 'hooks/useBanksWithBalances'
 import { getAvailableToBorrow } from './YourBorrowsTable'
+import { Disclosure, Transition } from '@headlessui/react'
 
 const AssetsBorrowsTable = () => {
   const { t } = useTranslation(['common', 'token'])
@@ -133,10 +135,10 @@ const AssetsBorrowsTable = () => {
           </tbody>
         </Table>
       ) : (
-        <div>
+        <div className="border-b border-th-bkg-3">
           {banks.map((b) => {
             const bank = b.bank
-            let logoURI
+            let logoURI: string | undefined
             if (mangoTokens?.length) {
               logoURI = mangoTokens.find(
                 (t) => t.address === bank.mint.toString()
@@ -146,47 +148,75 @@ const AssetsBorrowsTable = () => {
             const available = group ? getAvailableToBorrow(b, group) : 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('available')}
-                      </p>
-                      <BankAmountWithValue
-                        amount={available > 0 ? available : 0}
-                        bank={bank}
-                      />
-                    </div>
-                    <div>
-                      <p className="mb-0.5 text-right text-xs">{t('rate')}</p>
-                      <p className="text-right text-th-down">
-                        {formatNumericValue(bank.getBorrowRateUi(), 2)}%
-                      </p>
-                    </div>
-                    <IconButton
-                      disabled={b.maxBorrow === 0}
-                      onClick={() => handleShowBorrowModal(bank.name)}
-                      size="medium"
+              <Disclosure key={bank.name}>
+                {({ open }) => (
+                  <>
+                    <Disclosure.Button
+                      className={`w-full border-t border-th-bkg-3 p-4 text-left first:border-t-0 focus:outline-none`}
                     >
-                      <ArrowUpLeftIcon className="h-5 w-5" />
-                    </IconButton>
-                  </div>
-                </div>
-              </div>
+                      <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('rate')}
+                            </p>
+                            <p className="text-right text-th-down">
+                              {formatNumericValue(bank.getBorrowRateUi(), 2)}%
+                            </p>
+                          </div>
+                          <ChevronDownIcon
+                            className={`${
+                              open ? 'rotate-180' : 'rotate-360'
+                            } h-6 w-6 flex-shrink-0 text-th-fgd-3`}
+                          />
+                        </div>
+                      </div>
+                    </Disclosure.Button>
+                    <Transition
+                      enter="transition ease-in duration-200"
+                      enterFrom="opacity-0"
+                      enterTo="opacity-100"
+                    >
+                      <Disclosure.Panel>
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                          <div className="col-span-1">
+                            <p className="text-xs text-th-fgd-3">
+                              {t('available')}
+                            </p>
+                            <BankAmountWithValue
+                              amount={available > 0 ? available : 0}
+                              bank={bank}
+                            />
+                          </div>
+                          <Button
+                            className="col-span-2 flex items-center justify-center"
+                            onClick={() => handleShowBorrowModal(bank.name)}
+                            secondary
+                          >
+                            <ArrowUpLeftIcon className="mr-2 h-5 w-5" />
+                            {`${t('borrow')} ${bank.name.split(' ')[0]}`}
+                          </Button>
+                        </div>
+                      </Disclosure.Panel>
+                    </Transition>
+                  </>
+                )}
+              </Disclosure>
             )
           })}
         </div>