diff --git a/components/shared/FormatNumericValue.tsx b/components/shared/FormatNumericValue.tsx
index 980fdbce..e37b7bb3 100644
--- a/components/shared/FormatNumericValue.tsx
+++ b/components/shared/FormatNumericValue.tsx
@@ -2,18 +2,20 @@ import Decimal from 'decimal.js'
 import { formatCurrencyValue, formatNumericValue } from 'utils/numbers'
 
 const FormatNumericValue = ({
+  classNames,
   value,
   decimals,
   isUsd,
   roundUp,
 }: {
+  classNames?: string
   value: Decimal | number | string
   decimals?: number
   isUsd?: boolean
   roundUp?: boolean
 }) => {
   return (
-    <span>
+    <span className={classNames}>
       {isUsd
         ? formatCurrencyValue(value, decimals)
         : formatNumericValue(value, decimals, roundUp)}
diff --git a/components/trade/PerpPositions.tsx b/components/trade/PerpPositions.tsx
index add531f1..dd025f5e 100644
--- a/components/trade/PerpPositions.tsx
+++ b/components/trade/PerpPositions.tsx
@@ -5,7 +5,12 @@ import Button, { IconButton, LinkButton } from '@components/shared/Button'
 import ConnectEmptyState from '@components/shared/ConnectEmptyState'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
 import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
-import { NoSymbolIcon } from '@heroicons/react/20/solid'
+import {
+  ArrowTrendingDownIcon,
+  ArrowTrendingUpIcon,
+  ChevronDownIcon,
+  NoSymbolIcon,
+} from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore from '@store/mangoStore'
 import useMangoAccount from 'hooks/useMangoAccount'
@@ -14,8 +19,6 @@ import useSelectedMarket from 'hooks/useSelectedMarket'
 import useUnownedAccount from 'hooks/useUnownedAccount'
 import { useViewport } from 'hooks/useViewport'
 import { useTranslation } from 'next-i18next'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
 import { useCallback, useState } from 'react'
 import {
   floorToDecimal,
@@ -26,9 +29,10 @@ import { breakpoints } from 'utils/theme'
 import { calculateLimitPriceForMarketOrder } from 'utils/tradeForm'
 import MarketCloseModal from './MarketCloseModal'
 import MarketLogos from './MarketLogos'
-import PerpSideBadge from './PerpSideBadge'
 import TableMarketName from './TableMarketName'
 import Tooltip from '@components/shared/Tooltip'
+import { Disclosure, Transition } from '@headlessui/react'
+import useOpenPerpPositions from 'hooks/useOpenPerpPositions'
 
 const PerpPositions = () => {
   const { t } = useTranslation(['common', 'trade'])
@@ -41,14 +45,13 @@ const PerpPositions = () => {
   const [positionToShare, setPositionToShare] = useState<PerpPosition | null>(
     null
   )
-  const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
+  const openPerpPositions = useOpenPerpPositions()
   const { selectedMarket } = useSelectedMarket()
   const { connected } = useWallet()
-  const { mangoAccountAddress } = useMangoAccount()
+  const { mangoAccount } = useMangoAccount()
   const { isUnownedAccount } = useUnownedAccount()
   const { width } = useViewport()
   const showTableView = width ? width > breakpoints.md : false
-  const { asPath } = useRouter()
 
   const handlePositionClick = (positionSize: number, market: PerpMarket) => {
     const tradeForm = mangoStore.getState().tradeForm
@@ -94,21 +97,9 @@ const PerpPositions = () => {
 
   if (!group) return null
 
-  const openPerpPositions = Object.values(perpPositions)
-    .filter((p) => p.basePositionLots.toNumber())
-    .sort((a, b) => {
-      const aMarket = group.getPerpMarketByMarketIndex(a.marketIndex)
-      const bMarket = group.getPerpMarketByMarketIndex(b.marketIndex)
-      const aBasePosition = a.getBasePositionUi(aMarket)
-      const bBasePosition = b.getBasePositionUi(bMarket)
-      const aNotional = aBasePosition * aMarket._uiPrice
-      const bNotional = bBasePosition * bMarket._uiPrice
-      return Math.abs(bNotional) - Math.abs(aNotional)
-    })
-
   return (
     <>
-      {mangoAccountAddress && openPerpPositions.length ? (
+      {mangoAccount && openPerpPositions.length ? (
         showTableView ? (
           <>
             <div className="thin-scroll overflow-x-auto">
@@ -116,14 +107,17 @@ const PerpPositions = () => {
                 <thead>
                   <TrHead>
                     <Th className="text-left">{t('market')}</Th>
-                    <Th className="text-right">{t('trade:side')}</Th>
                     <Th className="text-right">{t('trade:size')}</Th>
-                    <Th className="text-right">{t('trade:notional')}</Th>
                     <Th className="text-right">{t('trade:avg-entry-price')}</Th>
-                    <Th className="text-right">{t('trade:oracle-price')}</Th>
-                    <Th className="text-right">{`${t('trade:unsettled')} ${t(
-                      'pnl'
-                    )}`}</Th>
+                    <Th>
+                      <div className="flex justify-end">
+                        <Tooltip content={t('trade:tooltip-est-liq-price')}>
+                          <span className="tooltip-underline">
+                            {t('trade:est-liq-price')}
+                          </span>
+                        </Tooltip>
+                      </div>
+                    </Th>
                     <Th className="text-right">{t('trade:unrealized-pnl')}</Th>
                     {!isUnownedAccount ? <Th /> : null}
                   </TrHead>
@@ -144,11 +138,22 @@ const PerpPositions = () => {
 
                     if (!basePosition) return null
 
+                    const isLong = basePosition > 0
+                    const avgEntryPrice =
+                      position.getAverageEntryPriceUi(market)
                     const unsettledPnl = position.getUnsettledPnlUi(market)
                     const totalPnl =
                       position.cumulativePnlOverPositionLifetimeUi(market)
                     const unrealizedPnl = position.getUnRealizedPnlUi(market)
                     const realizedPnl = position.getRealizedPnlUi()
+                    const roe =
+                      (unrealizedPnl /
+                        (Math.abs(basePosition) * avgEntryPrice)) *
+                      100
+                    const estLiqPrice = position.getLiquidationPriceUi(
+                      group,
+                      mangoAccount
+                    )
 
                     return (
                       <TrBody
@@ -156,14 +161,14 @@ const PerpPositions = () => {
                         className="my-1 p-2"
                       >
                         <Td>
-                          <TableMarketName market={market} />
-                        </Td>
-                        <Td className="text-right">
-                          <PerpSideBadge basePosition={basePosition} />
+                          <TableMarketName
+                            market={market}
+                            side={isLong ? 'buy' : 'sell'}
+                          />
                         </Td>
                         <Td className="text-right font-mono">
-                          <p className="flex justify-end">
-                            {isSelectedMarket ? (
+                          {isSelectedMarket ? (
+                            <div className="flex flex-col items-end space-y-0.5">
                               <LinkButton
                                 className="font-normal underline underline-offset-2 md:underline-offset-4 md:hover:no-underline"
                                 onClick={() =>
@@ -177,68 +182,99 @@ const PerpPositions = () => {
                                   )}
                                 />
                               </LinkButton>
-                            ) : (
+                              <FormatNumericValue
+                                classNames="text-xs text-th-fgd-3"
+                                value={
+                                  Math.abs(floorBasePosition) * market._uiPrice
+                                }
+                                isUsd
+                              />
+                            </div>
+                          ) : (
+                            <div className="flex flex-col items-end space-y-0.5">
                               <FormatNumericValue
                                 value={Math.abs(basePosition)}
                                 decimals={getDecimalCount(market.minOrderSize)}
                               />
-                            )}
-                          </p>
-                        </Td>
-                        <Td className="text-right font-mono">
-                          <FormatNumericValue
-                            value={
-                              Math.abs(floorBasePosition) * market._uiPrice
-                            }
-                            isUsd
-                          />
-                        </Td>
-                        <Td className="text-right font-mono">
-                          <FormatNumericValue
-                            value={position.getAverageEntryPriceUi(market)}
-                            decimals={getDecimalCount(market.tickSize)}
-                            isUsd
-                          />
-                        </Td>
-                        <Td className="text-right font-mono">
-                          <FormatNumericValue
-                            value={market.uiPrice}
-                            decimals={getDecimalCount(market.tickSize)}
-                            isUsd
-                          />
-                        </Td>
-                        <Td className={`text-right font-mono`}>
-                          <FormatNumericValue
-                            value={unsettledPnl}
-                            isUsd
-                            decimals={2}
-                          />
-                        </Td>
-                        <Td className="text-right font-mono">
-                          <Tooltip
-                            content={
-                              <PnlTooltipContent
-                                unrealizedPnl={unrealizedPnl}
-                                realizedPnl={realizedPnl}
-                                totalPnl={totalPnl}
+                              <FormatNumericValue
+                                classNames="text-xs text-th-fgd-3"
+                                value={
+                                  Math.abs(floorBasePosition) * market._uiPrice
+                                }
+                                isUsd
                               />
-                            }
-                            delay={100}
-                          >
+                            </div>
+                          )}
+                        </Td>
+                        <Td className="font-mono">
+                          <div className="flex flex-col items-end space-y-0.5">
+                            <FormatNumericValue
+                              value={avgEntryPrice}
+                              decimals={getDecimalCount(market.tickSize)}
+                              isUsd
+                            />
+                            <FormatNumericValue
+                              classNames="text-xs text-th-fgd-3"
+                              value={market.uiPrice}
+                              decimals={getDecimalCount(market.tickSize)}
+                              isUsd
+                            />
+                          </div>
+                        </Td>
+                        <Td className="text-right font-mono">
+                          {estLiqPrice ? (
+                            <FormatNumericValue
+                              value={estLiqPrice}
+                              decimals={getDecimalCount(market.tickSize)}
+                              isUsd
+                            />
+                          ) : (
+                            '–'
+                          )}
+                        </Td>
+                        <Td className="text-right font-mono">
+                          <div className="flex flex-col items-end space-y-0.5">
+                            <Tooltip
+                              content={
+                                <PnlTooltipContent
+                                  unrealizedPnl={unrealizedPnl}
+                                  realizedPnl={realizedPnl}
+                                  totalPnl={totalPnl}
+                                  unsettledPnl={unsettledPnl}
+                                />
+                              }
+                              delay={100}
+                            >
+                              <span
+                                className={`tooltip-underline ${
+                                  unrealizedPnl >= 0
+                                    ? 'text-th-up'
+                                    : 'text-th-down'
+                                }`}
+                              >
+                                <FormatNumericValue
+                                  value={unrealizedPnl}
+                                  isUsd
+                                  decimals={2}
+                                />
+                              </span>
+                            </Tooltip>
                             <span
-                              className={`tooltip-underline ${
-                                unrealizedPnl > 0
-                                  ? 'text-th-up'
-                                  : 'text-th-down'
-                              }`}
+                              className={
+                                roe >= 0 ? 'text-th-up' : 'text-th-down'
+                              }
                             >
                               <FormatNumericValue
-                                value={unrealizedPnl}
-                                isUsd
+                                classNames="text-xs"
+                                value={roe}
                                 decimals={2}
                               />
+                              %{' '}
+                              <span className="font-body text-xs text-th-fgd-3">
+                                (ROE)
+                              </span>
                             </span>
-                          </Tooltip>
+                          </div>
                         </Td>
                         {!isUnownedAccount ? (
                           <Td>
@@ -278,8 +314,8 @@ const PerpPositions = () => {
             ) : null}
           </>
         ) : (
-          <>
-            {openPerpPositions.map((position) => {
+          <div className="border-b border-th-bkg-3">
+            {openPerpPositions.map((position, i) => {
               const market = group.getPerpMarketByMarketIndex(
                 position.marketIndex
               )
@@ -293,111 +329,266 @@ const PerpPositions = () => {
                 selectedMarket.perpMarketIndex === position.marketIndex
 
               if (!basePosition) return null
+              const side =
+                basePosition > 0 ? 'buy' : basePosition < 0 ? 'sell' : ''
+              const avgEntryPrice = position.getAverageEntryPriceUi(market)
               const totalPnl =
                 position.cumulativePnlOverPositionLifetimeUi(market)
               const unrealizedPnl = position.getUnRealizedPnlUi(market)
               const realizedPnl = position.getRealizedPnlUi()
+              const roe =
+                (unrealizedPnl / (Math.abs(basePosition) * avgEntryPrice)) * 100
+              const estLiqPrice = position.getLiquidationPriceUi(
+                group,
+                mangoAccount
+              )
+              const unsettledPnl = position.getUnsettledPnlUi(market)
               return (
-                <div
-                  className="flex items-center justify-between border-b border-th-bkg-3 p-4"
-                  key={`${position.marketIndex}`}
-                >
-                  <div className="flex items-start">
-                    <div className="mt-0.5">
-                      <MarketLogos market={market} size="large" />
-                    </div>
-                    <div>
-                      <div className="mb-1 flex space-x-1 leading-none text-th-fgd-2">
-                        {selectedMarket?.name === market.name ? (
-                          <span className="whitespace-nowrap">
-                            {market.name}
-                          </span>
-                        ) : (
-                          <Link href={`/trade?name=${market.name}`}>
-                            <div className="flex items-center underline underline-offset-2 md:hover:text-th-fgd-3 md:hover:no-underline">
-                              <span className="whitespace-nowrap">
-                                {market.name}
-                              </span>
-                            </div>
-                          </Link>
-                        )}
-                        <PerpSideBadge basePosition={basePosition} />
-                      </div>
-                      <div className="flex items-center space-x-1 leading-none">
-                        <p className="flex text-th-fgd-4">
-                          <span className="font-mono text-th-fgd-3">
-                            {isSelectedMarket && asPath === '/trade' ? (
-                              <LinkButton
-                                className="font-normal underline underline-offset-2 md:underline-offset-4 md:hover:no-underline"
-                                onClick={() =>
-                                  handlePositionClick(floorBasePosition, market)
-                                }
-                              >
-                                <FormatNumericValue
-                                  value={Math.abs(basePosition)}
-                                  decimals={getDecimalCount(
-                                    market.minOrderSize
-                                  )}
-                                />
-                              </LinkButton>
-                            ) : (
+                <Disclosure key={position.marketIndex}>
+                  {({ open }) => (
+                    <>
+                      <Disclosure.Button
+                        className={`flex w-full items-center justify-between border-t border-th-bkg-3 p-4 text-left focus:outline-none ${
+                          i === 0 ? 'border-t-0' : ''
+                        }`}
+                      >
+                        <div className="flex w-full flex-col sm:flex-row sm:items-center sm:justify-between">
+                          <div
+                            className={`flex items-center ${
+                              side === 'buy'
+                                ? 'text-th-up'
+                                : side === 'sell'
+                                ? 'text-th-down'
+                                : 'text-th-fgd-2'
+                            }`}
+                          >
+                            <MarketLogos market={market} size="large" />
+                            <span className="mr-1 whitespace-nowrap">
+                              {market.name}
+                            </span>
+                            {side === 'buy' ? (
+                              <ArrowTrendingUpIcon className="h-5 w-5" />
+                            ) : side === 'sell' ? (
+                              <ArrowTrendingDownIcon className="h-5 w-5" />
+                            ) : null}
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <span className="font-mono">
                               <FormatNumericValue
                                 value={Math.abs(basePosition)}
                                 decimals={getDecimalCount(market.minOrderSize)}
+                              />{' '}
+                              <span className="font-body text-th-fgd-3">
+                                {market.name.split('-')[0]}
+                              </span>
+                            </span>
+                            <span className="text-th-fgd-4">|</span>
+                            <span
+                              className={`font-mono ${
+                                unrealizedPnl > 0
+                                  ? 'text-th-up'
+                                  : 'text-th-down'
+                              }`}
+                            >
+                              <FormatNumericValue
+                                value={unrealizedPnl}
+                                isUsd
+                                decimals={2}
                               />
-                            )}
-                          </span>
-                          <span className="mx-1">from</span>
-                          <span className="font-mono text-th-fgd-3">
-                            <FormatNumericValue
-                              value={position.getAverageEntryPriceUi(market)}
-                              decimals={getDecimalCount(market.tickSize)}
-                              isUsd
-                            />
-                          </span>
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="flex items-center space-x-4">
-                    <div
-                      className={`text-right font-mono leading-none ${
-                        unrealizedPnl > 0 ? 'text-th-up' : 'text-th-down'
-                      }`}
-                    >
-                      <Tooltip
-                        content={
-                          <PnlTooltipContent
-                            unrealizedPnl={unrealizedPnl}
-                            realizedPnl={realizedPnl}
-                            totalPnl={totalPnl}
-                          />
-                        }
-                        delay={100}
+                            </span>
+                          </div>
+                        </div>
+                        <ChevronDownIcon
+                          className={`${
+                            open ? 'rotate-180' : 'rotate-360'
+                          } ml-3 h-6 w-6 flex-shrink-0 text-th-fgd-3`}
+                        />
+                      </Disclosure.Button>
+                      <Transition
+                        enter="transition ease-in duration-200"
+                        enterFrom="opacity-0"
+                        enterTo="opacity-100"
                       >
-                        <p className="tooltip-underline mb-1 font-body text-th-fgd-4">
-                          {t('trade:unrealized-pnl')}
-                        </p>
-                      </Tooltip>
-                      <FormatNumericValue value={unrealizedPnl} isUsd />
-                    </div>
-                    {!isUnownedAccount ? (
-                      <Button
-                        className="text-xs"
-                        secondary
-                        size="small"
-                        onClick={() => showClosePositionModal(position)}
-                      >
-                        Close
-                      </Button>
-                    ) : null}
-                  </div>
-                </div>
+                        <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('trade:size')}
+                              </p>
+                              <p>
+                                {isSelectedMarket ? (
+                                  <div className=" space-y-0.5">
+                                    <LinkButton
+                                      className="font-normal underline underline-offset-2 md:underline-offset-4 md:hover:no-underline"
+                                      onClick={() =>
+                                        handlePositionClick(
+                                          floorBasePosition,
+                                          market
+                                        )
+                                      }
+                                    >
+                                      <FormatNumericValue
+                                        value={Math.abs(basePosition)}
+                                        decimals={getDecimalCount(
+                                          market.minOrderSize
+                                        )}
+                                      />
+                                    </LinkButton>
+                                    <FormatNumericValue
+                                      classNames="text-xs text-th-fgd-3"
+                                      value={
+                                        Math.abs(floorBasePosition) *
+                                        market._uiPrice
+                                      }
+                                      isUsd
+                                    />
+                                  </div>
+                                ) : (
+                                  <div className="flex flex-col font-mono text-th-fgd-2">
+                                    <FormatNumericValue
+                                      value={Math.abs(basePosition)}
+                                      decimals={getDecimalCount(
+                                        market.minOrderSize
+                                      )}
+                                    />
+                                    <FormatNumericValue
+                                      classNames="text-xs text-th-fgd-3"
+                                      value={
+                                        Math.abs(floorBasePosition) *
+                                        market._uiPrice
+                                      }
+                                      isUsd
+                                    />
+                                  </div>
+                                )}
+                              </p>
+                            </div>
+                            <div className="col-span-1">
+                              <p className="text-xs text-th-fgd-3">
+                                {t('trade:avg-entry-price')}
+                              </p>
+                              <div className="flex flex-col font-mono">
+                                <FormatNumericValue
+                                  classNames="text-th-fgd-2"
+                                  value={avgEntryPrice}
+                                  decimals={getDecimalCount(market.tickSize)}
+                                  isUsd
+                                />
+                                <FormatNumericValue
+                                  classNames="text-xs text-th-fgd-3"
+                                  value={market.uiPrice}
+                                  decimals={getDecimalCount(market.tickSize)}
+                                  isUsd
+                                />
+                              </div>
+                            </div>
+                            <div className="col-span-1">
+                              <Tooltip
+                                content={t('trade:tooltip-est-liq-price')}
+                              >
+                                <p className="tooltip-underline text-xs text-th-fgd-3">
+                                  {t('trade:est-liq-price')}
+                                </p>
+                              </Tooltip>
+                              <p className="font-mono text-th-fgd-2">
+                                {estLiqPrice ? (
+                                  <FormatNumericValue
+                                    value={estLiqPrice}
+                                    decimals={getDecimalCount(market.tickSize)}
+                                    isUsd
+                                  />
+                                ) : (
+                                  '–'
+                                )}
+                              </p>
+                            </div>
+                            <div className="col-span-1">
+                              <p className="text-xs text-th-fgd-3">
+                                {t('trade:unsettled')} {t('pnl')}
+                              </p>
+                              <p className="font-mono text-th-fgd-2">
+                                <FormatNumericValue
+                                  value={unsettledPnl}
+                                  isUsd
+                                  decimals={2}
+                                />
+                              </p>
+                            </div>
+                            <div className="col-span-1">
+                              <p className="text-xs text-th-fgd-3">
+                                {t('trade:unrealized-pnl')}
+                              </p>
+                              <p className="font-mono text-th-fgd-2">
+                                <Tooltip
+                                  content={
+                                    <PnlTooltipContent
+                                      unrealizedPnl={unrealizedPnl}
+                                      realizedPnl={realizedPnl}
+                                      totalPnl={totalPnl}
+                                      unsettledPnl={unsettledPnl}
+                                    />
+                                  }
+                                  delay={100}
+                                >
+                                  <span
+                                    className={`tooltip-underline mb-1 ${
+                                      unrealizedPnl >= 0
+                                        ? 'text-th-up'
+                                        : 'text-th-down'
+                                    }`}
+                                  >
+                                    <FormatNumericValue
+                                      value={unrealizedPnl}
+                                      isUsd
+                                      decimals={2}
+                                    />
+                                  </span>
+                                </Tooltip>
+                              </p>
+                            </div>
+                            <div className="col-span-1">
+                              <p className="text-xs text-th-fgd-3">ROE</p>
+                              <p
+                                className={`font-mono ${
+                                  roe >= 0 ? 'text-th-up' : 'text-th-down'
+                                }`}
+                              >
+                                <FormatNumericValue value={roe} decimals={2} />%
+                              </p>
+                            </div>
+                            <div className="col-span-2 mt-3 flex space-x-3">
+                              <Button
+                                className="w-1/2"
+                                secondary
+                                onClick={() => showClosePositionModal(position)}
+                              >
+                                {t('trade:close-position')}
+                              </Button>
+                              <Button
+                                className="w-1/2"
+                                secondary
+                                onClick={() =>
+                                  handleShowShare(openPerpPositions[i])
+                                }
+                                disabled={!group || !basePosition}
+                              >
+                                <div className="flex items-center justify-center">
+                                  <TwitterIcon className="mr-2 h-4 w-4" />
+                                  {t('trade:tweet-position')}
+                                </div>
+                              </Button>
+                            </div>
+                          </div>
+                        </Disclosure.Panel>
+                      </Transition>
+                    </>
+                  )}
+                </Disclosure>
               )
             })}
-          </>
+          </div>
         )
-      ) : mangoAccountAddress || connected ? (
+      ) : mangoAccount || connected ? (
         <div className="flex flex-col items-center p-8">
           <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
           <p>{t('trade:no-positions')}</p>
@@ -425,15 +616,25 @@ const PnlTooltipContent = ({
   unrealizedPnl,
   realizedPnl,
   totalPnl,
+  unsettledPnl,
 }: {
   unrealizedPnl: number
   realizedPnl: number
   totalPnl: number
+  unsettledPnl: number
 }) => {
   const { t } = useTranslation(['common', 'trade'])
   return (
     <>
-      <div className="mb-3 space-y-1">
+      <div className="flex justify-between border-b border-th-bkg-3 pb-2">
+        <p className="mr-3">
+          {t('trade:unsettled')} {t('pnl')}
+        </p>
+        <span className="font-mono text-th-fgd-2">
+          {formatCurrencyValue(unsettledPnl, 2)}
+        </span>
+      </div>
+      <div className="mb-3 space-y-1 pt-2">
         <div className="flex justify-between">
           <p className="mr-3">{t('trade:unrealized-pnl')}</p>
           <span className="font-mono text-th-fgd-2">
diff --git a/components/trade/TableMarketName.tsx b/components/trade/TableMarketName.tsx
index 94fa3a97..b939b4cd 100644
--- a/components/trade/TableMarketName.tsx
+++ b/components/trade/TableMarketName.tsx
@@ -3,24 +3,68 @@ import useSelectedMarket from 'hooks/useSelectedMarket'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import MarketLogos from './MarketLogos'
+import {
+  ArrowTrendingDownIcon,
+  ArrowTrendingUpIcon,
+} from '@heroicons/react/20/solid'
 
-const TableMarketName = ({ market }: { market: PerpMarket | Serum3Market }) => {
+const TableMarketName = ({
+  market,
+  side,
+}: {
+  market: PerpMarket | Serum3Market
+  side?: 'buy' | 'sell'
+}) => {
   const { selectedMarket } = useSelectedMarket()
   const { asPath } = useRouter()
 
   return selectedMarket?.name === market.name && asPath.includes('/trade') ? (
-    <div className="flex items-center">
-      <MarketLogos market={market} size="large" />
-      <span className="whitespace-nowrap">{market.name}</span>
+    <div
+      className={`flex items-center ${
+        side === 'buy'
+          ? 'text-th-up'
+          : side === 'sell'
+          ? 'text-th-down'
+          : 'text-th-fgd-2'
+      }`}
+    >
+      <NameAndSide market={market} side={side} />
     </div>
   ) : (
     <Link href={`/trade?name=${market.name}`}>
-      <div className="flex items-center underline underline-offset-2 md:underline-offset-4 md:hover:text-th-fgd-3 md:hover:no-underline">
-        <MarketLogos market={market} size="large" />
-        <span className="whitespace-nowrap">{market.name}</span>
+      <div
+        className={`flex items-center underline underline-offset-2 md:underline-offset-4 md:hover:text-th-fgd-3 md:hover:no-underline ${
+          side === 'buy'
+            ? 'text-th-up'
+            : side === 'sell'
+            ? 'text-th-down'
+            : 'text-th-fgd-2'
+        }`}
+      >
+        <NameAndSide market={market} side={side} />
       </div>
     </Link>
   )
 }
 
 export default TableMarketName
+
+const NameAndSide = ({
+  market,
+  side,
+}: {
+  market: PerpMarket | Serum3Market
+  side?: 'buy' | 'sell'
+}) => {
+  return (
+    <>
+      <MarketLogos market={market} size="large" />
+      <span className="mr-1 whitespace-nowrap">{market.name}</span>
+      {side === 'buy' ? (
+        <ArrowTrendingUpIcon className="h-5 w-5" />
+      ) : side === 'sell' ? (
+        <ArrowTrendingDownIcon className="h-5 w-5" />
+      ) : null}
+    </>
+  )
+}
diff --git a/hooks/useOpenPerpPositions.ts b/hooks/useOpenPerpPositions.ts
index ce7485c9..e9f1a6d0 100644
--- a/hooks/useOpenPerpPositions.ts
+++ b/hooks/useOpenPerpPositions.ts
@@ -7,10 +7,19 @@ const useOpenPerpPositions = () => {
   const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
 
   const openPositions = useMemo(() => {
-    if (!mangoAccountAddress) return []
-    return Object.values(perpPositions).filter((p) =>
-      p.basePositionLots.toNumber()
-    )
+    const group = mangoStore.getState().group
+    if (!mangoAccountAddress || !group) return []
+    return Object.values(perpPositions)
+      .filter((p) => p.basePositionLots.toNumber())
+      .sort((a, b) => {
+        const aMarket = group.getPerpMarketByMarketIndex(a.marketIndex)
+        const bMarket = group.getPerpMarketByMarketIndex(b.marketIndex)
+        const aBasePosition = a.getBasePositionUi(aMarket)
+        const bBasePosition = b.getBasePositionUi(bMarket)
+        const aNotional = aBasePosition * aMarket._uiPrice
+        const bNotional = bBasePosition * bMarket._uiPrice
+        return Math.abs(bNotional) - Math.abs(aNotional)
+      })
   }, [mangoAccountAddress, perpPositions])
 
   return openPositions
diff --git a/package.json b/package.json
index 08febba8..a6d994c6 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@blockworks-foundation/mango-feeds": "0.1.6",
-    "@blockworks-foundation/mango-v4": "^0.16.7",
+    "@blockworks-foundation/mango-v4": "^0.16.9",
     "@headlessui/react": "1.6.6",
     "@heroicons/react": "2.0.10",
     "@metaplex-foundation/js": "0.18.3",
diff --git a/public/locales/en/trade.json b/public/locales/en/trade.json
index 4a10c408..f6e01aca 100644
--- a/public/locales/en/trade.json
+++ b/public/locales/en/trade.json
@@ -16,6 +16,7 @@
     "copy-and-share": "Copy Image to Clipboard",
     "current-price": "Current Price",
     "edit-order": "Edit Order",
+    "est-liq-price": "Est. Liq. Price",
     "avg-entry-price": "Avg. Entry Price",
     "est-slippage": "Est. Slippage",
     "funding-limits": "Funding Limits",
@@ -81,6 +82,7 @@
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-enable-margin": "Enable spot margin for this trade",
+    "tooltip-est-liq-price": "Estimated liquidation price is calculated in isolation and does not factor price changes in other markets/tokens.",
     "tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
     "tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
     "tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
diff --git a/public/locales/es/trade.json b/public/locales/es/trade.json
index 4a10c408..f6e01aca 100644
--- a/public/locales/es/trade.json
+++ b/public/locales/es/trade.json
@@ -16,6 +16,7 @@
     "copy-and-share": "Copy Image to Clipboard",
     "current-price": "Current Price",
     "edit-order": "Edit Order",
+    "est-liq-price": "Est. Liq. Price",
     "avg-entry-price": "Avg. Entry Price",
     "est-slippage": "Est. Slippage",
     "funding-limits": "Funding Limits",
@@ -81,6 +82,7 @@
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-enable-margin": "Enable spot margin for this trade",
+    "tooltip-est-liq-price": "Estimated liquidation price is calculated in isolation and does not factor price changes in other markets/tokens.",
     "tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
     "tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
     "tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
diff --git a/public/locales/ru/trade.json b/public/locales/ru/trade.json
index 4a10c408..f6e01aca 100644
--- a/public/locales/ru/trade.json
+++ b/public/locales/ru/trade.json
@@ -16,6 +16,7 @@
     "copy-and-share": "Copy Image to Clipboard",
     "current-price": "Current Price",
     "edit-order": "Edit Order",
+    "est-liq-price": "Est. Liq. Price",
     "avg-entry-price": "Avg. Entry Price",
     "est-slippage": "Est. Slippage",
     "funding-limits": "Funding Limits",
@@ -81,6 +82,7 @@
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-enable-margin": "Enable spot margin for this trade",
+    "tooltip-est-liq-price": "Estimated liquidation price is calculated in isolation and does not factor price changes in other markets/tokens.",
     "tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
     "tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
     "tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
diff --git a/public/locales/zh/trade.json b/public/locales/zh/trade.json
index 4a10c408..f6e01aca 100644
--- a/public/locales/zh/trade.json
+++ b/public/locales/zh/trade.json
@@ -16,6 +16,7 @@
     "copy-and-share": "Copy Image to Clipboard",
     "current-price": "Current Price",
     "edit-order": "Edit Order",
+    "est-liq-price": "Est. Liq. Price",
     "avg-entry-price": "Avg. Entry Price",
     "est-slippage": "Est. Slippage",
     "funding-limits": "Funding Limits",
@@ -81,6 +82,7 @@
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-enable-margin": "Enable spot margin for this trade",
+    "tooltip-est-liq-price": "Estimated liquidation price is calculated in isolation and does not factor price changes in other markets/tokens.",
     "tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
     "tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
     "tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
diff --git a/public/locales/zh_tw/trade.json b/public/locales/zh_tw/trade.json
index 4a10c408..f6e01aca 100644
--- a/public/locales/zh_tw/trade.json
+++ b/public/locales/zh_tw/trade.json
@@ -16,6 +16,7 @@
     "copy-and-share": "Copy Image to Clipboard",
     "current-price": "Current Price",
     "edit-order": "Edit Order",
+    "est-liq-price": "Est. Liq. Price",
     "avg-entry-price": "Avg. Entry Price",
     "est-slippage": "Est. Slippage",
     "funding-limits": "Funding Limits",
@@ -81,6 +82,7 @@
     "tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
     "tooltip-enable-margin": "Enable spot margin for this trade",
+    "tooltip-est-liq-price": "Estimated liquidation price is calculated in isolation and does not factor price changes in other markets/tokens.",
     "tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
     "tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
     "tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
diff --git a/styles/globals.css b/styles/globals.css
index 5ff9838c..2a25e9ef 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -610,7 +610,7 @@ input[type='range']::-webkit-slider-runnable-track {
 }
 
 .tooltip-underline {
-  @apply default-transition w-max border-b border-dashed border-current leading-tight hover:cursor-help hover:border-transparent;
+  @apply default-transition box-border w-max border-b border-dashed border-current leading-tight hover:cursor-help hover:border-transparent;
 }
 
 .radial-gradient-bg {
diff --git a/yarn.lock b/yarn.lock
index b4d3fc60..68ce9e70 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -21,10 +21,10 @@
   dependencies:
     ws "^8.13.0"
 
-"@blockworks-foundation/mango-v4@^0.16.7":
-  version "0.16.7"
-  resolved "https://registry.yarnpkg.com/@blockworks-foundation/mango-v4/-/mango-v4-0.16.7.tgz#44e0d06bf62f12fb6ced35ccc67c0b3b6d6da93e"
-  integrity sha512-ZuspGdg6K0ANzK/C8+HwUDp8T6ZybMFshFVjg/WWYuQp6CY5OFdrdsCFB/Dm1Rf4AkdehB0e+QAmDaMsQ6g2Xg==
+"@blockworks-foundation/mango-v4@^0.16.9":
+  version "0.16.9"
+  resolved "https://registry.yarnpkg.com/@blockworks-foundation/mango-v4/-/mango-v4-0.16.9.tgz#85cdc374bc057d5ff37ec80fc097af6743c022ab"
+  integrity sha512-UYw3lqLWyHwPG4bRB5xff0ozpCpXLsbjqCthwAj7YFQqo1WMrKqLPUwI9wDi09aJWhkmAvdJbzRDy2y7FyevAQ==
   dependencies:
     "@coral-xyz/anchor" "^0.27.0"
     "@project-serum/serum" "0.13.65"