diff --git a/components/DayHighLow.tsx b/components/DayHighLow.tsx
index 58e5ba05..d924dfce 100644
--- a/components/DayHighLow.tsx
+++ b/components/DayHighLow.tsx
@@ -13,7 +13,9 @@ const DayHighLow = ({ high, low, latest }) => {
 
   return (
     <div className="pr-6">
-      <div className="text-center text-th-fgd-3 tiny-text">24h Range</div>
+      <div className="text-center text-th-fgd-3 tiny-text pb-0.5">
+        24h Range
+      </div>
       <div className="flex items-center">
         <div className="pr-2 text-th-fgd-1 text-xs">
           {formatUsdValue(low?.baseOraclePrice)}
diff --git a/components/MarginInfo.tsx b/components/MarginInfo.tsx
index 075736a5..d61175bd 100644
--- a/components/MarginInfo.tsx
+++ b/components/MarginInfo.tsx
@@ -3,8 +3,8 @@ import {
   ZERO_BN,
   ZERO_I80F48,
 } from '@blockworks-foundation/mango-client'
-import { HeartIcon } from '@heroicons/react/outline'
-import { useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import { HeartIcon } from '@heroicons/react/solid'
 import useMangoStore, { mangoClient, MNGO_INDEX } from '../stores/useMangoStore'
 import { formatUsdValue } from '../utils'
 import { notify } from '../utils/notifications'
@@ -12,6 +12,9 @@ import { LinkButton } from './Button'
 import FloatingElement from './FloatingElement'
 import { ElementTitle } from './styles'
 import Tooltip from './Tooltip'
+import DepositModal from './DepositModal'
+import WithdrawModal from './WithdrawModal'
+import Button from './Button'
 
 export default function MarginInfo() {
   const connected = useMangoStore((s) => s.wallet.connected)
@@ -20,6 +23,17 @@ export default function MarginInfo() {
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
   const actions = useMangoStore((s) => s.actions)
 
+  const [showDepositModal, setShowDepositModal] = useState(false)
+  const [showWithdrawModal, setShowWithdrawModal] = useState(false)
+
+  const handleCloseDeposit = useCallback(() => {
+    setShowDepositModal(false)
+  }, [])
+
+  const handleCloseWithdraw = useCallback(() => {
+    setShowWithdrawModal(false)
+  }, [])
+
   const equity = mangoAccount
     ? mangoAccount.computeValue(mangoGroup, mangoCache)
     : ZERO_I80F48
@@ -78,11 +92,11 @@ export default function MarginInfo() {
         <ElementTitle>Account</ElementTitle>
         <div>
           <div>
-            <div className="flex justify-between pt-2 pb-2">
+            <div className="flex justify-between py-2">
               <div className="font-normal text-th-fgd-3 leading-4">Equity</div>
               <div className="text-th-fgd-1">{formatUsdValue(+equity)}</div>
             </div>
-            <div className="flex justify-between pt-2 pb-2">
+            <div className="flex justify-between py-2">
               <div className="font-normal text-th-fgd-3 leading-4">
                 Leverage
               </div>
@@ -93,7 +107,7 @@ export default function MarginInfo() {
                 x
               </div>
             </div>
-            <div className={`flex justify-between pt-2 pb-2`}>
+            <div className={`flex justify-between py-2`}>
               <div className="font-normal text-th-fgd-3 leading-4">
                 Total Assets Value
               </div>
@@ -105,7 +119,7 @@ export default function MarginInfo() {
                   : '--'}
               </div>
             </div>
-            <div className={`flex justify-between pt-2 pb-2`}>
+            <div className={`flex justify-between py-2`}>
               <div className="font-normal text-th-fgd-3 leading-4">
                 Total Liabilities Value
               </div>
@@ -117,7 +131,7 @@ export default function MarginInfo() {
                   : '--'}
               </div>
             </div>
-            <div className={`flex justify-between pt-2 pb-2`}>
+            <div className={`flex justify-between py-2`}>
               <Tooltip
                 content={
                   <div>
@@ -145,7 +159,7 @@ export default function MarginInfo() {
                   : 0}
                 <LinkButton
                   onClick={handleRedeemMngo}
-                  className="ml-2 text-th-primary text-xs"
+                  className="ml-2 text-th-primary text-xs disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:underline"
                   disabled={mngoAccrued.eq(ZERO_BN)}
                 >
                   Claim
@@ -153,57 +167,78 @@ export default function MarginInfo() {
               </div>
             </div>
           </div>
-          <div className="border border-th-bkg-4 mt-4 p-4 rounded">
-            <div className="flex flex-col">
-              <div className="flex justify-between">
-                <div className="flex items-center">
-                  <HeartIcon
-                    className="h-5 w-5 text-th-primary"
-                    aria-hidden="true"
-                  />
-                  <span className="ml-2">
-                    <Tooltip
-                      content={
-                        <div>
-                          Account will be liquidated if Health Ratio reaches 0%.{' '}
-                          <a
-                            href="https://docs.mango.markets/mango-v3/overview#health"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            Learn more
-                          </a>
-                        </div>
-                      }
-                    >
-                      <div className="cursor-help font-normal text-th-fgd-3 leading-4 border-b border-th-fgd-3 border-dashed border-opacity-20 default-transition hover:border-th-bkg-2">
-                        Health Ratio
-                      </div>
-                    </Tooltip>
-                  </span>
-                </div>
-                <div className="text-right">{maintHealthRatio.toFixed(2)}%</div>
-              </div>
-              <div className="mt-1">
-                <div className="h-1.5 flex rounded bg-th-bkg-3 mt-4">
-                  <div
-                    style={{
-                      width: `${maintHealthRatio}%`,
-                    }}
-                    className={`flex rounded ${
-                      maintHealthRatio > 30
-                        ? 'bg-th-green'
-                        : initHealthRatio > 0
-                        ? 'bg-th-orange'
-                        : 'bg-th-red'
-                    }`}
-                  ></div>
-                </div>
-              </div>
+          <div className="border border-th-bkg-4 rounded flex items-center my-3 p-2.5">
+            <div className="flex items-center pr-2">
+              <HeartIcon
+                className="h-5 mr-1.5 w-5 text-th-primary"
+                aria-hidden="true"
+              />
+              <span>
+                <Tooltip
+                  content={
+                    <div>
+                      Account will be liquidated if Health Ratio reaches 0%.{' '}
+                      <a
+                        href="https://docs.mango.markets/mango-v3/overview#health"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        Learn more
+                      </a>
+                    </div>
+                  }
+                >
+                  <div className="cursor-help font-normal text-th-fgd-3 leading-4 border-b border-th-fgd-3 border-dashed border-opacity-20 default-transition hover:border-th-bkg-2">
+                    Health
+                  </div>
+                </Tooltip>
+              </span>
             </div>
+            <div className="h-1.5 flex flex-grow rounded bg-th-bkg-4">
+              <div
+                style={{
+                  width: `${maintHealthRatio}%`,
+                }}
+                className={`flex rounded ${
+                  maintHealthRatio > 30
+                    ? 'bg-th-green'
+                    : initHealthRatio > 0
+                    ? 'bg-th-orange'
+                    : 'bg-th-red'
+                }`}
+              ></div>
+            </div>
+            <div className="pl-2 text-right">
+              {maintHealthRatio.toFixed(2)}%
+            </div>
+          </div>
+          <div className={`grid grid-cols-2 grid-rows-1 gap-4 pt-2`}>
+            <Button
+              onClick={() => setShowDepositModal(true)}
+              className="w-full"
+              disabled={!connected}
+            >
+              <span>Deposit</span>
+            </Button>
+            <Button
+              onClick={() => setShowWithdrawModal(true)}
+              className="w-full"
+              disabled={!connected}
+            >
+              <span>Withdraw</span>
+            </Button>
           </div>
         </div>
       </div>
+      {showDepositModal && (
+        <DepositModal isOpen={showDepositModal} onClose={handleCloseDeposit} />
+      )}
+      {showWithdrawModal && (
+        <WithdrawModal
+          isOpen={showWithdrawModal}
+          onClose={handleCloseWithdraw}
+        />
+      )}
     </FloatingElement>
   )
 }
diff --git a/components/MarketHeader.tsx b/components/MarketHeader.tsx
index d7523681..a80fa4ea 100644
--- a/components/MarketHeader.tsx
+++ b/components/MarketHeader.tsx
@@ -152,13 +152,13 @@ const MarketHeader = () => {
         </div>
         <div className="flex items-center">
           <div className="pr-6">
-            <div className="text-th-fgd-3 tiny-text">Oracle price</div>
+            <div className="text-th-fgd-3 tiny-text pb-0.5">Oracle price</div>
             <div className="font-semibold text-th-fgd-1 text-xs">
               {oraclePrice ? formatUsdValue(oraclePrice) : '--'}
             </div>
           </div>
           <div className="pr-4">
-            <div className="text-th-fgd-3 tiny-text">24h Change</div>
+            <div className="text-th-fgd-3 tiny-text pb-0.5">24h Change</div>
             {spotStats?.change ? (
               <div
                 className={`font-semibold text-xs ${
@@ -176,13 +176,13 @@ const MarketHeader = () => {
             )}
           </div>
           <div className="pr-6">
-            <div className="text-th-fgd-3 tiny-text">24h Vol</div>
+            <div className="text-th-fgd-3 tiny-text pb-0.5">24h Vol</div>
             <div className="font-semibold text-th-fgd-1 text-xs">
               {ohlcv && !loading && volume ? (
                 volume !== '--' ? (
                   <>
                     {volume.toFixed(2)}
-                    <span className="ml-1 text-th-fgd-3 tiny-text">
+                    <span className="ml-1 text-th-fgd-3 tiny-text pb-0.5">
                       {baseSymbol}
                     </span>
                   </>
@@ -202,7 +202,7 @@ const MarketHeader = () => {
           {selectedMarketName.includes('PERP') ? (
             <>
               <div className="pr-6">
-                <div className="text-th-fgd-3 tiny-text">
+                <div className="text-th-fgd-3 tiny-text pb-0.5">
                   Avg Funding Rate (1h)
                 </div>
                 <div className="font-semibold text-th-fgd-1 text-xs">
@@ -210,7 +210,9 @@ const MarketHeader = () => {
                 </div>
               </div>
               <div className="pr-6">
-                <div className="text-th-fgd-3 tiny-text">Open Interest</div>
+                <div className="text-th-fgd-3 tiny-text pb-0.5">
+                  Open Interest
+                </div>
                 <div className="font-semibold text-th-fgd-1 text-xs">
                   {parseOpenInterest(perpStats, selectedMarket)} {baseSymbol}
                 </div>
@@ -219,7 +221,7 @@ const MarketHeader = () => {
           ) : null}
         </div>
       </div>
-      <div className="flex">
+      <div className="flex items-center">
         <UiLock />
         {connected && mangoAccount ? <ManualRefresh className="pl-2" /> : null}
       </div>
diff --git a/components/MarketPosition.tsx b/components/MarketPosition.tsx
index 9bc0c9c5..f2db3bc8 100644
--- a/components/MarketPosition.tsx
+++ b/components/MarketPosition.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import FloatingElement from './FloatingElement'
 import { ElementTitle } from './styles'
 import useMangoStore, { mangoClient } from '../stores/useMangoStore'
@@ -8,9 +8,7 @@ import {
   i80f48ToPercent,
   formatUsdValue,
 } from '../utils/index'
-import DepositModal from './DepositModal'
-import WithdrawModal from './WithdrawModal'
-import Button from './Button'
+import { LinkButton } from './Button'
 import Tooltip from './Tooltip'
 import SideBadge from './SideBadge'
 import {
@@ -69,6 +67,7 @@ export default function MarketPosition() {
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
   const selectedMarket = useMangoStore((s) => s.selectedMarket.current)
   const marketConfig = useMangoStore((s) => s.selectedMarket.config)
+  const selectedMarketName = marketConfig.name
   const connected = useMangoStore((s) => s.wallet.connected)
   const baseSymbol = marketConfig.baseSymbol
   const marketName = marketConfig.name
@@ -77,9 +76,6 @@ export default function MarketPosition() {
     (t) => t.marketName === marketName
   )
 
-  const [showDepositModal, setShowDepositModal] = useState(false)
-  const [showWithdrawModal, setShowWithdrawModal] = useState(false)
-
   const marketIndex = useMemo(() => {
     return getMarketIndexBySymbol(mangoGroupConfig, baseSymbol)
   }, [mangoGroupConfig, baseSymbol])
@@ -90,14 +86,6 @@ export default function MarketPosition() {
     }
   }, [marketName, mangoAccount, marketIndex])
 
-  const handleCloseDeposit = useCallback(() => {
-    setShowDepositModal(false)
-  }, [])
-
-  const handleCloseWithdraw = useCallback(() => {
-    setShowWithdrawModal(false)
-  }, [])
-
   return selectedMarket instanceof PerpMarket ? (
     <FloatingElement showConnect>
       <div className={!connected ? 'filter blur-sm' : null}>
@@ -170,7 +158,7 @@ export default function MarketPosition() {
           <div className="font-normal text-th-fgd-3 leading-4">
             Unsettled PnL
           </div>
-          <div className={`text-th-fgd-1`}>
+          <div className={`flex items-center text-th-fgd-1`}>
             {perpAccount
               ? formatUsdValue(
                   +nativeI80F48ToUi(
@@ -182,18 +170,23 @@ export default function MarketPosition() {
                   )
                 )
               : '0'}
-          </div>
-        </div>
-        <div className="flex">
-          {perpAccount ? (
-            <Button
-              className="mt-4 w-full"
-              disabled={!connected}
+            <LinkButton
               onClick={() => handleSettlePnl(selectedMarket, perpAccount)}
+              className="ml-2 text-th-primary text-xs disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:underline"
+              disabled={
+                perpAccount &&
+                +nativeI80F48ToUi(
+                  perpAccount.getPnl(
+                    mangoGroup.perpMarkets[marketIndex],
+                    mangoGroupCache.priceCache[marketIndex].price
+                  ),
+                  marketConfig.quoteDecimals
+                ) === 0
+              }
             >
-              Settle PNL
-            </Button>
-          ) : null}
+              Settle
+            </LinkButton>
+          </div>
         </div>
       </div>
     </FloatingElement>
@@ -201,7 +194,7 @@ export default function MarketPosition() {
     <>
       <FloatingElement showConnect>
         <div className={!connected ? 'filter blur' : null}>
-          <ElementTitle>Balances</ElementTitle>
+          <ElementTitle>Balance</ElementTitle>
           {mangoGroup ? (
             <div className="grid grid-cols-2 grid-rows-1 gap-4 pt-2">
               {mangoGroupConfig.tokens
@@ -211,10 +204,10 @@ export default function MarketPosition() {
                   const tokenIndex = mangoGroup.getTokenIndex(mintKey)
                   return (
                     <div
-                      className="border border-th-bkg-4 mb-4 p-3 rounded-md"
+                      className="border border-th-bkg-4 p-4 rounded-md"
                       key={mintKey.toString()}
                     >
-                      <div className="border-b border-th-bkg-4 flex items-center justify-between mb-3 pb-3">
+                      <div className="flex items-center justify-between mb-4">
                         <div className="flex items-center">
                           <img
                             alt=""
@@ -224,10 +217,8 @@ export default function MarketPosition() {
                           <span className="text-th-fgd-2">{symbol}</span>
                         </div>
                       </div>
-                      <div className="pb-3">
-                        <div className="pb-0.5 text-th-fgd-3 text-xs">
-                          Deposits
-                        </div>
+                      <div className="pb-4">
+                        <div className="pb-0.5 text-th-fgd-3">Deposits</div>
                         <div className={`text-th-fgd-1`}>
                           {mangoAccount
                             ? floorToDecimal(
@@ -245,10 +236,8 @@ export default function MarketPosition() {
                               )}
                         </div>
                       </div>
-                      <div className="pb-3">
-                        <div className="pb-0.5 text-th-fgd-3 text-xs">
-                          Borrows
-                        </div>
+                      <div className="pb-4">
+                        <div className="pb-0.5 text-th-fgd-3">Borrows</div>
                         <div className={`text-th-fgd-1`}>
                           {mangoAccount
                             ? ceilToDecimal(
@@ -269,7 +258,7 @@ export default function MarketPosition() {
                       <div>
                         <Tooltip content="Deposit APY and Borrow APR">
                           <div
-                            className={`cursor-help font-normal pb-0.5 text-th-fgd-3 text-xs default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
+                            className={`cursor-help font-normal pb-0.5 text-th-fgd-3 default-transition hover:border-th-bkg-2 hover:text-th-fgd-3`}
                           >
                             Interest Rates
                           </div>
@@ -295,33 +284,8 @@ export default function MarketPosition() {
                 })}
             </div>
           ) : null}
-          <div className={`grid grid-cols-2 grid-rows-1 gap-4 pt-2`}>
-            <Button
-              onClick={() => setShowDepositModal(true)}
-              className="w-full"
-              disabled={!connected}
-            >
-              <span>Deposit</span>
-            </Button>
-            <Button
-              onClick={() => setShowWithdrawModal(true)}
-              className="w-full"
-              disabled={!connected}
-            >
-              <span>Withdraw</span>
-            </Button>
-          </div>
         </div>
       </FloatingElement>
-      {showDepositModal && (
-        <DepositModal isOpen={showDepositModal} onClose={handleCloseDeposit} />
-      )}
-      {showWithdrawModal && (
-        <WithdrawModal
-          isOpen={showWithdrawModal}
-          onClose={handleCloseWithdraw}
-        />
-      )}
     </>
   )
 }
diff --git a/components/TradePageGrid.tsx b/components/TradePageGrid.tsx
index a691b407..a0b5a731 100644
--- a/components/TradePageGrid.tsx
+++ b/components/TradePageGrid.tsx
@@ -24,13 +24,13 @@ export const defaultLayouts = {
     { i: 'orderbook', x: 6, y: 0, w: 3, h: 17 },
     { i: 'tradeForm', x: 9, y: 1, w: 3, h: 14 },
     { i: 'marketTrades', x: 6, y: 1, w: 3, h: 13 },
-    { i: 'marketPosition', x: 9, y: 3, w: 3, h: 15 },
+    { i: 'marketPosition', x: 9, y: 3, w: 3, h: 13 },
     { i: 'userInfo', x: 0, y: 2, w: 9, h: 19 },
     { i: 'marginInfo', x: 9, y: 4, w: 3, h: 15 },
   ],
   lg: [
-    { i: 'tvChart', x: 0, y: 0, w: 8, h: 30, minW: 2 },
-    { i: 'marketPosition', x: 8, y: 0, w: 4, h: 15, minW: 2 },
+    { i: 'tvChart', x: 0, y: 0, w: 8, h: 28, minW: 2 },
+    { i: 'marketPosition', x: 8, y: 0, w: 4, h: 13, minW: 2 },
     { i: 'marginInfo', x: 8, y: 1, w: 4, h: 15, minW: 2 },
     { i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
     { i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
@@ -38,8 +38,8 @@ export const defaultLayouts = {
     { i: 'userInfo', x: 0, y: 3, w: 12, h: 19, minW: 6 },
   ],
   md: [
-    { i: 'tvChart', x: 0, y: 0, w: 8, h: 30, minW: 2 },
-    { i: 'marketPosition', x: 8, y: 0, w: 4, h: 15, minW: 2 },
+    { i: 'tvChart', x: 0, y: 0, w: 8, h: 28, minW: 2 },
+    { i: 'marketPosition', x: 8, y: 0, w: 4, h: 13, minW: 2 },
     { i: 'marginInfo', x: 8, y: 1, w: 4, h: 15, minW: 2 },
     { i: 'orderbook', x: 0, y: 2, w: 4, h: 17, minW: 2 },
     { i: 'tradeForm', x: 4, y: 2, w: 4, h: 17, minW: 3 },
@@ -49,7 +49,7 @@ export const defaultLayouts = {
   sm: [
     { i: 'tvChart', x: 0, y: 0, w: 12, h: 25, minW: 6 },
     { i: 'marketPosition', x: 0, y: 1, w: 6, h: 15, minW: 2 },
-    { i: 'marginInfo', x: 6, y: 1, w: 6, h: 16, minW: 2 },
+    { i: 'marginInfo', x: 6, y: 1, w: 6, h: 15, minW: 2 },
     { i: 'tradeForm', x: 0, y: 2, w: 12, h: 13, minW: 3 },
     { i: 'orderbook', x: 0, y: 3, w: 6, h: 17, minW: 3 },
     { i: 'marketTrades', x: 6, y: 3, w: 6, h: 17, minW: 2 },
@@ -57,8 +57,8 @@ export const defaultLayouts = {
   ],
   xs: [
     { i: 'tvChart', x: 0, y: 0, w: 0, h: 0, minW: 6 },
-    { i: 'marketPosition', x: 0, y: 1, w: 6, h: 15, minW: 2 },
-    { i: 'marginInfo', x: 0, y: 2, w: 6, h: 16, minW: 2 },
+    { i: 'marketPosition', x: 0, y: 1, w: 6, h: 13, minW: 2 },
+    { i: 'marginInfo', x: 0, y: 2, w: 6, h: 15, minW: 2 },
     { i: 'tradeForm', x: 0, y: 3, w: 12, h: 13, minW: 3 },
     { i: 'orderbook', x: 0, y: 4, w: 6, h: 17, minW: 3 },
     { i: 'marketTrades', x: 0, y: 5, w: 6, h: 17, minW: 2 },