diff --git a/components/TokenList.tsx b/components/TokenList.tsx
index 34883222..0e85c9e2 100644
--- a/components/TokenList.tsx
+++ b/components/TokenList.tsx
@@ -82,7 +82,7 @@ const TokenList = () => {
   }, [connected])
 
   return (
-    <ContentBox hideBorder hidePadding className="-mt-[53px]">
+    <ContentBox hideBorder hidePadding className="-mt-[51px]">
       <div className="mb-10 flex items-center justify-end pr-0 md:mb-6 md:pr-6">
         <Switch
           className="text-th-fgd-3"
diff --git a/components/shared/TabButtons.tsx b/components/shared/TabButtons.tsx
index 0eb7b92a..65727cb8 100644
--- a/components/shared/TabButtons.tsx
+++ b/components/shared/TabButtons.tsx
@@ -27,7 +27,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
       {values.map((v, i) => (
         <div key={v + i}>
           <button
-            className={`default-transition rounded-md px-6 py-4 font-bold ${
+            className={`default-transition h-12 rounded-md px-6 font-bold ${
               !rounded ? 'md:rounded-none' : ''
             } ${showBorders ? 'md:border-r md:border-th-bkg-3' : ''} ${
               v === activeValue
diff --git a/components/trade/BalanceAndOpenOrders.tsx b/components/trade/BalanceAndOpenOrders.tsx
index a1b8b8af..3ebf6b04 100644
--- a/components/trade/BalanceAndOpenOrders.tsx
+++ b/components/trade/BalanceAndOpenOrders.tsx
@@ -27,8 +27,8 @@ const BalanceAndOpenOrders = () => {
   }, [mangoAccount, selectedMarket])
 
   return (
-    <div className="h-full overflow-y-scroll">
-      <div className="sticky top-0">
+    <div>
+      <div className="">
         <TabButtons
           activeValue={selectedTab}
           onChange={(tab: string) => setSelectedTab(tab)}
diff --git a/components/trade/TradeAdvancedPage copy.tsx b/components/trade/TradeAdvancedPage copy.tsx
deleted file mode 100644
index c95f999d..00000000
--- a/components/trade/TradeAdvancedPage copy.tsx	
+++ /dev/null
@@ -1,169 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'next-i18next'
-import dynamic from 'next/dynamic'
-import ReactGridLayout, { Responsive, WidthProvider } from 'react-grid-layout'
-
-import mangoStore from '@store/mangoStore'
-import { GRID_LAYOUT_KEY } from 'utils/constants'
-import useLocalStorageState from 'hooks/useLocalStorageState'
-import { breakpoints } from 'utils/theme'
-import { useViewport } from 'hooks/useViewport'
-import Orderbook from './Orderbook'
-import AdvancedMarketHeader from './AdvancedMarketHeader'
-import AdvancedTradeForm from './AdvancedTradeForm'
-import BalanceAndOpenOrders from './BalanceAndOpenOrders'
-
-const ResponsiveGridLayout = WidthProvider(Responsive)
-
-const TradingViewChart = dynamic(() => import('./TradingViewChart'), {
-  ssr: false,
-})
-
-const gridBreakpoints = {
-  // sm: breakpoints.sm,
-  // md: breakpoints.md,
-  // lg: breakpoints.lg,
-  xl: breakpoints.xl,
-  xxl: breakpoints['2xl'],
-  xxxl: breakpoints['3xl'],
-}
-const totalCols = 24
-const TradeAdvancedPage = () => {
-  const { height } = useViewport()
-  const [currentBreakpoint, setCurrentBreakpoint] = useState<string>()
-  const [orderbookDepth, setOrderbookDepth] = useState(12)
-  const { uiLocked } = mangoStore((s) => s.settings)
-
-  const defaultLayouts: ReactGridLayout.Layouts = useMemo(() => {
-    const innerHeight = Math.max(height - 36, 800)
-    const tvChartHeight = 432
-    const headerHeight = 48
-    const balancesHeight = innerHeight - tvChartHeight - headerHeight
-
-    return {
-      xxxl: [
-        { i: 'market-header', x: 0, y: 0, w: 16, h: headerHeight },
-        { i: 'tv-chart', x: 0, y: 1, w: 16, h: tvChartHeight },
-        { i: 'balances', x: 0, y: 2, w: 16, h: balancesHeight },
-        { i: 'orderbook', x: 16, y: 1, w: 4, h: innerHeight },
-        { i: 'trade-form', x: 20, y: 1, w: 4, h: innerHeight },
-      ],
-      xxl: [
-        { i: 'market-header', x: 0, y: 0, w: 14, h: headerHeight },
-        { i: 'tv-chart', x: 0, y: 1, w: 14, h: tvChartHeight },
-        { i: 'balances', x: 0, y: 2, w: 14, h: balancesHeight },
-        { i: 'orderbook', x: 14, y: 1, w: 5, h: innerHeight },
-        { i: 'trade-form', x: 20, y: 1, w: 5, h: innerHeight },
-      ],
-      xl: [
-        { i: 'market-header', x: 0, y: 0, w: 14, h: headerHeight },
-        { i: 'tv-chart', x: 0, y: 1, w: 14, h: tvChartHeight },
-        { i: 'balances', x: 0, y: 2, w: 14, h: balancesHeight },
-        { i: 'orderbook', x: 14, y: 1, w: 5, h: innerHeight },
-        { i: 'trade-form', x: 20, y: 1, w: 5, h: innerHeight },
-      ],
-    }
-  }, [height])
-
-  const [savedLayouts, setSavedLayouts] = useLocalStorageState(
-    GRID_LAYOUT_KEY,
-    defaultLayouts
-  )
-
-  useEffect(() => {
-    const adjustOrderBook = (
-      layouts: ReactGridLayout.Layouts,
-      breakpoint?: string | null
-    ) => {
-      const bp = 'xxl'
-      const orderbookLayout = layouts[bp].find((obj) => {
-        return obj.i === 'orderbook'
-      })
-      let depth = orderbookLayout!.h / 24 / 2 - 2
-      const maxNum = Math.max(1, depth)
-      if (typeof maxNum === 'number') {
-        depth = Math.round(maxNum)
-      }
-
-      setOrderbookDepth(depth)
-    }
-
-    adjustOrderBook(defaultLayouts, currentBreakpoint)
-  }, [currentBreakpoint, defaultLayouts])
-
-  const onLayoutChange = useCallback((layouts: ReactGridLayout.Layouts) => {
-    if (layouts) {
-      setSavedLayouts(layouts)
-    }
-  }, [])
-
-  const onBreakpointChange = useCallback((newBreakpoint: string) => {
-    setCurrentBreakpoint(newBreakpoint)
-  }, [])
-
-  return (
-    <div className="relative">
-      <ResponsiveGridLayout
-        // layouts={savedLayouts ? savedLayouts : defaultLayouts}
-        layouts={defaultLayouts}
-        breakpoints={gridBreakpoints}
-        cols={{
-          xxxl: totalCols,
-          xxl: totalCols,
-          xl: totalCols,
-          lg: totalCols,
-          md: totalCols,
-          sm: totalCols,
-        }}
-        rowHeight={1}
-        isDraggable={!uiLocked}
-        isResizable={!uiLocked}
-        onBreakpointChange={(newBreakpoint) =>
-          onBreakpointChange(newBreakpoint)
-        }
-        onLayoutChange={(layout, layouts) => onLayoutChange(layouts)}
-        measureBeforeMount
-        containerPadding={{ xxl: [0, 0] }}
-        margin={[0, 0]}
-      >
-        <div key="market-header" className="z-10">
-          <AdvancedMarketHeader />
-        </div>
-        <div
-          key="tv-chart"
-          className="h-full border border-x-0 border-th-bkg-3"
-        >
-          <div className={`relative h-full overflow-auto`}>
-            <TradingViewChart />
-          </div>
-        </div>
-        <div
-          key="balances"
-          className="h-full border border-x-0 border-t-0 border-th-bkg-3"
-        >
-          <BalanceAndOpenOrders />
-        </div>
-        <div key="orderbook" className="border border-t-0 border-th-bkg-3">
-          <div className="flex h-[49px] items-center border-b border-th-bkg-3 px-4 ">
-            <h2 className="text-sm text-th-fgd-3">Orderbook</h2>
-          </div>
-          <div className="flex items-center justify-between px-4 py-2 text-xs text-th-fgd-4">
-            <div>Size</div>
-            <div>Price</div>
-          </div>
-          <div className="hide-scroll h-full overflow-y-scroll">
-            <Orderbook depth={orderbookDepth} />
-          </div>
-        </div>
-        <div
-          key="trade-form"
-          className="border border-x-0 border-t-0 border-th-bkg-3"
-        >
-          <AdvancedTradeForm />
-        </div>
-      </ResponsiveGridLayout>
-    </div>
-  )
-}
-
-export default TradeAdvancedPage
diff --git a/components/trade/TradeAdvancedPage.tsx b/components/trade/TradeAdvancedPage.tsx
index 6a9e9a28..17d40bc1 100644
--- a/components/trade/TradeAdvancedPage.tsx
+++ b/components/trade/TradeAdvancedPage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 // import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import ReactGridLayout, { Responsive, WidthProvider } from 'react-grid-layout'
@@ -21,8 +21,8 @@ const TradingViewChart = dynamic(() => import('./TradingViewChart'), {
 
 const gridBreakpoints = {
   // sm: breakpoints.sm,
-  // md: breakpoints.md,
-  // lg: breakpoints.lg,
+  md: breakpoints.md,
+  lg: breakpoints.lg,
   xl: breakpoints.xl,
   xxl: breakpoints['2xl'],
   xxxl: breakpoints['3xl'],
@@ -36,25 +36,39 @@ const TradeAdvancedPage = () => {
 
   const defaultLayouts = {
     xxxl: [
-      { i: 'market-header', x: 0, y: 0, w: 12, h: 48 },
+      { i: 'market-header', x: 0, y: 0, w: 16, h: 48 },
       { i: 'tv-chart', x: 0, y: 1, w: 16, h: 676 },
-      { i: 'balances', x: 0, y: 2, w: 20, h: 473 },
+      { i: 'balances', x: 0, y: 2, w: 20, h: 468 },
       { i: 'orderbook', x: 16, y: 1, w: 4, h: 724 },
-      { i: 'trade-form', x: 20, y: 1, w: 4, h: 1197 },
+      { i: 'trade-form', x: 20, y: 1, w: 4, h: 1193 },
     ],
     xxl: [
-      { i: 'market-header', x: 0, y: 0, w: 12, h: 48 },
+      { i: 'market-header', x: 0, y: 0, w: 15, h: 48 },
       { i: 'tv-chart', x: 0, y: 1, w: 15, h: 576 },
-      { i: 'balances', x: 0, y: 2, w: 19, h: 473 },
+      { i: 'balances', x: 0, y: 2, w: 19, h: 468 },
       { i: 'orderbook', x: 15, y: 1, w: 4, h: 624 },
-      { i: 'trade-form', x: 19, y: 1, w: 5, h: 1097 },
+      { i: 'trade-form', x: 19, y: 1, w: 5, h: 1093 },
     ],
     xl: [
-      { i: 'market-header', x: 0, y: 0, w: 12, h: 48 },
+      { i: 'market-header', x: 0, y: 0, w: 14, h: 48 },
       { i: 'tv-chart', x: 0, y: 1, w: 14, h: 520 },
-      { i: 'balances', x: 0, y: 2, w: 18, h: 473 },
+      { i: 'balances', x: 0, y: 2, w: 18, h: 468 },
       { i: 'orderbook', x: 14, y: 1, w: 4, h: 568 },
-      { i: 'trade-form', x: 18, y: 1, w: 6, h: 1041 },
+      { i: 'trade-form', x: 18, y: 1, w: 6, h: 1037 },
+    ],
+    lg: [
+      { i: 'market-header', x: 0, y: 0, w: 14, h: 48 },
+      { i: 'tv-chart', x: 0, y: 1, w: 14, h: 520 },
+      { i: 'balances', x: 0, y: 2, w: 18, h: 468 },
+      { i: 'orderbook', x: 14, y: 1, w: 4, h: 568 },
+      { i: 'trade-form', x: 18, y: 1, w: 6, h: 1037 },
+    ],
+    md: [
+      { i: 'market-header', x: 0, y: 0, w: 18, h: 48 },
+      { i: 'tv-chart', x: 0, y: 1, w: 18, h: 520 },
+      { i: 'balances', x: 0, y: 2, w: 18, h: 468 },
+      { i: 'orderbook', x: 18, y: 2, w: 6, h: 469 },
+      { i: 'trade-form', x: 18, y: 1, w: 6, h: 568 },
     ],
   }
 
diff --git a/components/trade/TradingViewChart.tsx b/components/trade/TradingViewChart.tsx
index a5ae63a2..b4173202 100644
--- a/components/trade/TradingViewChart.tsx
+++ b/components/trade/TradingViewChart.tsx
@@ -68,6 +68,7 @@ const TradingViewChart = () => {
     'paneProperties.horzGridProperties.color': 'rgba(0,0,0,0)',
     'paneProperties.legendProperties.showStudyTitles': false,
     'scalesProperties.showStudyLastValue': false,
+    'scalesProperties.fontSize': 11,
   }
 
   const mainSeriesProperties = [