diff --git a/apps/simple-trading-app-e2e/src/integration/market-list.test.ts b/apps/simple-trading-app-e2e/src/integration/market-list.test.ts
index 0c965291c..08ed6f933 100644
--- a/apps/simple-trading-app-e2e/src/integration/market-list.test.ts
+++ b/apps/simple-trading-app-e2e/src/integration/market-list.test.ts
@@ -5,7 +5,10 @@ describe('market list', () => {
     });
 
     it('selects menus', () => {
-      cy.get('.MuiDrawer-root [aria-current]').should('have.text', 'Markets');
+      cy.get('[aria-label="Sidebar Navigation Menu"] [aria-current]').should(
+        'have.text',
+        'Markets'
+      );
       cy.getByTestId('state-trigger').should('have.text', 'Active');
       cy.get('[aria-label="Future"]').click();
       cy.get('[data-testid="market-assets-menu"] a.active').should(
diff --git a/apps/simple-trading-app/src/app/app.tsx b/apps/simple-trading-app/src/app/app.tsx
index 10bbe605e..a4a53f682 100644
--- a/apps/simple-trading-app/src/app/app.tsx
+++ b/apps/simple-trading-app/src/app/app.tsx
@@ -40,13 +40,7 @@ function App() {
           <VegaWalletProvider>
             <AppLoader>
               <div className="max-h-full min-h-full dark:bg-black dark:text-white-60 bg-white text-black-60 grid grid-rows-[min-content,1fr]">
-                <div className="flex items-stretch border-b-[7px] border-vega-yellow">
-                  <DrawerToggle
-                    onToggle={onToggle}
-                    variant={DRAWER_TOGGLE_VARIANTS.OPEN}
-                    className="xs:py-32 xs:px-16"
-                  />
-
+                <div className="flex items-stretch p-16 bg-black text-white-60">
                   <div className="flex items-center gap-4 ml-auto mr-8">
                     <VegaWalletConnectButton
                       setConnectDialog={(open) =>
@@ -56,8 +50,17 @@ function App() {
                         setVegaWallet((x) => ({ ...x, manage: open }))
                       }
                     />
-                    <ThemeSwitcher onToggle={toggleTheme} className="-my-4" />
+                    <ThemeSwitcher
+                      onToggle={toggleTheme}
+                      className="-my-4"
+                      sunClassName="text-white"
+                    />
                   </div>
+                  <DrawerToggle
+                    onToggle={onToggle}
+                    variant={DRAWER_TOGGLE_VARIANTS.OPEN}
+                    className="xs:py-32 xs:px-16 xs:text-white xs:hover:text-blue"
+                  />
                 </div>
 
                 <Main isMenuOpen={menuOpen} onToggle={onToggle} />
diff --git a/apps/simple-trading-app/src/app/components/drawer/drawer-container.tsx b/apps/simple-trading-app/src/app/components/drawer/drawer-container.tsx
deleted file mode 100644
index 62922c51b..000000000
--- a/apps/simple-trading-app/src/app/components/drawer/drawer-container.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import type { ReactElement } from 'react';
-
-interface Props {
-  children: ReactElement | ReactElement[];
-}
-
-export const DrawerContainer = ({ children }: Props) => (
-  <div className="w-full md:w-3/4 grow-1">{children}</div>
-);
-
-export const DrawerWrapper = ({ children }: Props) => (
-  <div className="flex dark:bg-black">{children}</div>
-);
diff --git a/apps/simple-trading-app/src/app/components/drawer/drawer-content.tsx b/apps/simple-trading-app/src/app/components/drawer/drawer-content.tsx
new file mode 100644
index 000000000..060504fc3
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/drawer/drawer-content.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import type { ReactElement } from 'react';
+
+interface Props {
+  children: ReactElement | ReactElement[];
+  className?: string;
+}
+
+export const DrawerContent = ({ children, className = '' }: Props) => {
+  const classes = classNames(
+    'w-full sm:w-full grow-1 p-20 overflow-hidden',
+    className
+  );
+
+  return (
+    <main aria-label="Page Content" className={classes}>
+      {children}
+    </main>
+  );
+};
diff --git a/apps/simple-trading-app/src/app/components/drawer/drawer-menu.tsx b/apps/simple-trading-app/src/app/components/drawer/drawer-menu.tsx
deleted file mode 100644
index 5ab061d33..000000000
--- a/apps/simple-trading-app/src/app/components/drawer/drawer-menu.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-import type { ReactElement } from 'react';
-import { Button } from '@vegaprotocol/ui-toolkit';
-import type { ButtonProps } from '@vegaprotocol/ui-toolkit';
-
-type MenuItem = {
-  label: string;
-  component: ReactElement | ReactElement[];
-  onClick(): void;
-  active: boolean;
-};
-
-interface Props {
-  /**
-   * Menu items passed as an array
-   */
-  menuItems: MenuItem[];
-}
-
-export const NavigationDrawerMenu = ({ menuItems }: Props) => {
-  return (
-    <ul>
-      {menuItems.map((item, index) => {
-        const btnProps = {
-          variant: item.active ? 'accent' : 'primary',
-          className: 'w-full mb-8',
-          onClick: item.onClick,
-        } as ButtonProps;
-
-        return (
-          <li key={index}>
-            <Button {...btnProps}>{item.label}</Button>
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
diff --git a/apps/simple-trading-app/src/app/components/drawer/drawer-toggle.tsx b/apps/simple-trading-app/src/app/components/drawer/drawer-toggle.tsx
index aec0e1c18..777ebdab5 100644
--- a/apps/simple-trading-app/src/app/components/drawer/drawer-toggle.tsx
+++ b/apps/simple-trading-app/src/app/components/drawer/drawer-toggle.tsx
@@ -19,12 +19,10 @@ interface Props {
 export const DrawerToggle = ({
   onToggle,
   variant = DRAWER_TOGGLE_VARIANTS.CLOSE,
-  className,
+  className = '',
 }: Props) => {
   const [iconName, setIconName] = useState(IconNames.MENU);
-  const classes = classNames('md:hidden', {
-    [className as string]: className,
-  });
+  const classes = classNames('md:hidden', className);
 
   useEffect(() => {
     if (variant === DRAWER_TOGGLE_VARIANTS.OPEN) {
@@ -34,8 +32,17 @@ export const DrawerToggle = ({
     }
   }, [variant]);
 
+  const ariaLabel = `${
+    variant === DRAWER_TOGGLE_VARIANTS.OPEN ? 'Open' : 'Close'
+  } Sidebar Navigation Menu`;
+
   return (
-    <Button variant="inline-link" className={classes} onClick={onToggle}>
+    <Button
+      aria-label={ariaLabel}
+      variant="inline-link"
+      className={classes}
+      onClick={onToggle}
+    >
       <Icon name={iconName as IconName} />
     </Button>
   );
diff --git a/apps/simple-trading-app/src/app/components/drawer/drawer-wrapper.tsx b/apps/simple-trading-app/src/app/components/drawer/drawer-wrapper.tsx
new file mode 100644
index 000000000..b689e630e
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/drawer/drawer-wrapper.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import type { ReactElement } from 'react';
+
+interface Props {
+  children: ReactElement | ReactElement[];
+  className?: string;
+}
+
+export const DrawerWrapper = ({ children, className = '' }: Props) => {
+  const classes = classNames('flex dark:bg-black md:flex-row', className);
+  return <div className={classes}>{children}</div>;
+};
diff --git a/apps/simple-trading-app/src/app/components/drawer/drawer.tsx b/apps/simple-trading-app/src/app/components/drawer/drawer.tsx
index 552098b4b..128259e32 100644
--- a/apps/simple-trading-app/src/app/components/drawer/drawer.tsx
+++ b/apps/simple-trading-app/src/app/components/drawer/drawer.tsx
@@ -1,66 +1,60 @@
 import * as React from 'react';
-import { themelite as theme } from '@vegaprotocol/tailwindcss-config';
+import classNames from 'classnames';
 import type { ReactElement } from 'react';
-import { useEffect } from 'react';
-import Drawer from '@mui/material/Drawer';
 
 interface Props {
   children?: ReactElement | ReactElement[];
   isMenuOpen?: boolean;
   onToggle(): void;
+  rtl?: boolean;
+  outerClasses?: string;
+  innerClasses?: string;
 }
 
 export const NavigationDrawer = ({
   isMenuOpen = false,
   onToggle,
   children,
+  rtl,
+  outerClasses = '',
+  innerClasses = '',
 }: Props) => {
-  const [windowSize, setWindowSize] = React.useState({
-    width: window.innerWidth,
-    height: window.innerHeight,
+  const width = 'w-full md:w-auto md:min-w-[15%] shrink-0';
+  const position = 'absolute inset-0 h-full z-10 md:static';
+  const background = 'bg-black/50 dark:bg-white/50';
+  const flex = 'flex justify-end overflow-hidden';
+  const joinedClasses = [flex, width, position, background].join(' ');
+
+  const outerStyles = classNames(joinedClasses, {
+    visible: isMenuOpen,
+    'invisible md:visible': !isMenuOpen,
+    'flex-row-reverse': !rtl,
+    [outerClasses]: outerClasses,
   });
-  const mobileScreenWidth = parseInt(theme.screens.md);
-  const isMobile = windowSize.width <= mobileScreenWidth;
-  const timeout = React.useRef(0);
 
-  const handleResize = () => {
-    if (timeout.current) {
-      window.cancelAnimationFrame(timeout.current);
-    }
+  const translateClose = rtl ? 'translate-x-full' : '-translate-x-full';
 
-    // Setup the new requestAnimationFrame()
-    timeout.current = window.requestAnimationFrame(function () {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    });
-  };
-
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      window.cancelAnimationFrame(timeout.current);
-    };
-  }, []);
-
-  const drawerRootClasses = {
-    root: 'w-3/4 md:w-1/4 shrink-0',
-    paper: 'p-16 w-3/4 md:w-1/4 box-border',
-  };
+  const innerStyles = classNames('w-3/4 md:w-full bg-white dark:bg-black', {
+    'translate-x-0 transition-transform md:transform-none': isMenuOpen,
+    [`${translateClose} md:transform-none`]: !isMenuOpen,
+    [innerClasses]: innerClasses,
+  });
 
   return (
-    <Drawer
-      classes={drawerRootClasses}
-      variant={isMobile ? 'temporary' : 'permanent'}
-      open={isMobile ? isMenuOpen : true}
-      onClose={onToggle}
-      ModalProps={{
-        keepMounted: true, // Better open performance on mobile.
-      }}
-    >
-      {children}
-    </Drawer>
+    <aside aria-label="Sidebar Navigation Menu" className={outerStyles}>
+      <div
+        role="presentation"
+        aria-label="Content Overlay - Click To Close Sidebar Navigation"
+        className="md:hidden grow h-full"
+        onClick={onToggle}
+      />
+      <div
+        role="group"
+        aria-label="Sidebar Navigation Grouped Content"
+        className={innerStyles}
+      >
+        {children}
+      </div>
+    </aside>
   );
 };
diff --git a/apps/simple-trading-app/src/app/components/drawer/index.ts b/apps/simple-trading-app/src/app/components/drawer/index.ts
index 276f51c6c..1fd661bcf 100644
--- a/apps/simple-trading-app/src/app/components/drawer/index.ts
+++ b/apps/simple-trading-app/src/app/components/drawer/index.ts
@@ -1,4 +1,4 @@
 export * from './drawer';
-export * from './drawer-menu';
 export * from './drawer-toggle';
-export * from './drawer-container';
+export * from './drawer-content';
+export * from './drawer-wrapper';
diff --git a/apps/simple-trading-app/src/app/components/icons/icon.tsx b/apps/simple-trading-app/src/app/components/icons/icon.tsx
new file mode 100644
index 000000000..24dc1c9a0
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/icons/icon.tsx
@@ -0,0 +1,51 @@
+import type { ReactElement } from 'react';
+import { LiquidityIconPath } from './liquidity-icon';
+import { MarketIconPath } from './market-icon';
+import { TradeIconPath } from './trade-icon';
+import { PortfolioIconPath } from './portfolio-icon';
+
+interface IconProps {
+  name: string;
+  className: string;
+}
+
+interface IconSVGWrapperProps {
+  className: string;
+  children: ReactElement | ReactElement[] | null;
+}
+
+const getIconPath = (name: string): ReactElement | null => {
+  switch (name) {
+    case 'liquidity':
+      return <LiquidityIconPath />;
+    case 'market':
+      return <MarketIconPath />;
+    case 'trade':
+      return <TradeIconPath />;
+    case 'portfolio':
+      return <PortfolioIconPath />;
+    default:
+      return null;
+  }
+};
+
+const IconSVGWrapper = ({ className, children }: IconSVGWrapperProps) => {
+  return (
+    <svg
+      role="presentation"
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      {children}
+    </svg>
+  );
+};
+
+export const Icon = ({ name, className }: IconProps) => {
+  return (
+    <IconSVGWrapper className={className}>{getIconPath(name)}</IconSVGWrapper>
+  );
+};
diff --git a/apps/simple-trading-app/src/app/components/icons/index.tsx b/apps/simple-trading-app/src/app/components/icons/index.tsx
new file mode 100644
index 000000000..af77d84ef
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/icons/index.tsx
@@ -0,0 +1 @@
+export * from './icon';
diff --git a/apps/simple-trading-app/src/app/components/icons/liquidity-icon.tsx b/apps/simple-trading-app/src/app/components/icons/liquidity-icon.tsx
new file mode 100644
index 000000000..cd4be2d4e
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/icons/liquidity-icon.tsx
@@ -0,0 +1,15 @@
+export const LiquidityIconPath = () => (
+  <>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.5268 1.46612L12 1.99999L11.4732 1.46612L12 0.946381L12.5268 1.46612ZM12 3.07542C11.8274 3.25709 11.6185 3.48044 11.3826 3.73943C10.6899 4.49987 9.76793 5.56335 8.84782 6.77789C7.92587 7.99485 7.01715 9.34862 6.34179 10.6903C5.66046 12.0439 5.25 13.3205 5.25 14.4C5.25 19.0485 8.47431 22.15 12 22.15C15.5257 22.15 18.75 19.0485 18.75 14.4C18.75 13.3205 18.3395 12.0439 17.6582 10.6903C16.9829 9.34862 16.0741 7.99485 15.1522 6.77789C14.2321 5.56335 13.3101 4.49987 12.6174 3.73943C12.3815 3.48044 12.1726 3.25709 12 3.07542ZM11.4732 1.46612C11.4734 1.46597 11.4732 1.46612 12 1.99999C12.5268 1.46612 12.5266 1.46597 12.5268 1.46612L12.5336 1.47291L12.5512 1.49036C12.5663 1.5055 12.5884 1.52759 12.6169 1.55634C12.6739 1.61384 12.7566 1.698 12.8615 1.80641C13.071 2.02319 13.3692 2.33722 13.7263 2.72931C14.4399 3.51261 15.3929 4.61164 16.3478 5.8721C17.3009 7.13013 18.2671 8.56386 18.998 10.0159C19.723 11.4561 20.25 12.9795 20.25 14.4C20.25 19.7514 16.4743 23.65 12 23.65C7.52569 23.65 3.75 19.7514 3.75 14.4C3.75 12.9795 4.27704 11.4561 5.00196 10.0159C5.73285 8.56386 6.69913 7.13013 7.65218 5.8721C8.60707 4.61164 9.56014 3.51261 10.2737 2.72931C10.6308 2.33722 10.929 2.02319 11.1385 1.80641C11.2434 1.698 11.3261 1.61384 11.3831 1.55634C11.4116 1.52759 11.4337 1.5055 11.4488 1.49036L11.4664 1.47291L11.4712 1.46817L11.4732 1.46612Z"
+    />
+    <rect x="11.5" y="17.4" width="1" height="1" />
+    <rect x="12.5" y="16.4" width="1" height="1" />
+    <rect x="10.5" y="16.4" width="1" height="1" />
+    <rect x="14.5" y="15.4" width="1" height="1" />
+    <rect x="13.5" y="11.4" width="1" height="4" />
+    <rect x="9.5" y="11.4" width="1" height="5" />
+  </>
+);
diff --git a/apps/simple-trading-app/src/app/components/icons/market-icon.tsx b/apps/simple-trading-app/src/app/components/icons/market-icon.tsx
new file mode 100644
index 000000000..e9e27aec4
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/icons/market-icon.tsx
@@ -0,0 +1,17 @@
+export const MarketIconPath = () => (
+  <>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.5 2H2V20.5V22H3.5H22V20.5H3.5V2Z"
+    />
+    <rect x="5" y="15" width="2" height="2" />
+    <rect x="7" y="13" width="2" height="2" />
+    <rect x="9" y="11" width="2" height="2" />
+    <rect x="11" y="9" width="2" height="2" />
+    <rect x="13" y="11" width="2" height="2" />
+    <rect x="15" y="9" width="2" height="2" />
+    <rect x="17" y="7" width="2" height="2" />
+    <rect x="19" y="5" width="2" height="2" />
+  </>
+);
diff --git a/apps/simple-trading-app/src/app/components/icons/portfolio-icon.tsx b/apps/simple-trading-app/src/app/components/icons/portfolio-icon.tsx
new file mode 100644
index 000000000..91ddcd8c5
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/icons/portfolio-icon.tsx
@@ -0,0 +1,17 @@
+export const PortfolioIconPath = () => (
+  <>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.5 3.5H15.5V6H8.5V3.5ZM7 6V3.5C7 2.67157 7.67157 2 8.5 2H15.5C16.3284 2 17 2.67157 17 3.5V6H20.5C21.3284 6 22 6.67157 22 7.5V20.5C22 21.3284 21.3284 22 20.5 22H3.5C2.67157 22 2 21.3284 2 20.5V7.5C2 6.67157 2.67157 6 3.5 6H7ZM15.5 7.5H8.5H3.5L3.5 20.5H20.5V7.5H15.5Z"
+    />
+    <rect x="4" y="8" width="2" height="2" />
+    <rect x="6" y="10" width="2" height="2" />
+    <rect x="18" y="8" width="2" height="2" />
+    <rect x="16" y="10" width="2" height="2" />
+    <rect x="14" y="12" width="2" height="2" />
+    <rect x="8" y="12" width="2" height="2" />
+    <rect x="10" y="14" width="2" height="2" />
+    <rect x="12" y="14" width="2" height="2" />
+  </>
+);
diff --git a/apps/simple-trading-app/src/app/components/icons/trade-icon.tsx b/apps/simple-trading-app/src/app/components/icons/trade-icon.tsx
new file mode 100644
index 000000000..f4938d4f3
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/icons/trade-icon.tsx
@@ -0,0 +1,14 @@
+export const TradeIconPath = () => (
+  <>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M19.3254 7.28784L14.8547 2.93099L15.7621 1.99999L21.4056 7.49983L21.8833 7.96534L21.4056 8.43085L15.7621 13.9307L14.8547 12.9997L19.3819 8.58784L1.99999 8.58784L1.99999 7.28784L19.3254 7.28784Z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.55785 16.6429L9.02855 20.9997L8.12124 21.9307L2.47767 16.4309L2 15.9654L2.47767 15.4999L8.12124 10L9.02855 10.931L4.50141 15.3429L21.8833 15.3429V16.6429L4.55785 16.6429Z"
+    />
+  </>
+);
diff --git a/apps/simple-trading-app/src/app/components/main/index.tsx b/apps/simple-trading-app/src/app/components/main/index.tsx
index 3515d6dd3..5c80a1d6f 100644
--- a/apps/simple-trading-app/src/app/components/main/index.tsx
+++ b/apps/simple-trading-app/src/app/components/main/index.tsx
@@ -1,62 +1,41 @@
 import React from 'react';
-import { useRoutes, NavLink } from 'react-router-dom';
+import { useRoutes } from 'react-router-dom';
 import {
   NavigationDrawer,
   DrawerWrapper,
-  DrawerContainer,
+  DrawerContent,
   DrawerToggle,
   DRAWER_TOGGLE_VARIANTS,
 } from '../drawer';
+import { Nav, TabBar } from '../nav';
 import { routerConfig } from '../../routes/router-config';
 
 export interface RouteChildProps {
   name: string;
 }
 
-export const AppRouter = () => {
-  const routes = useRoutes(routerConfig);
-
-  return <main className="p-20 overflow-hidden">{routes}</main>;
-};
-
-export const Menu = () => (
-  <nav>
-    {routerConfig.map((r) => (
-      <NavLink
-        key={r.name}
-        to={r.path}
-        className={({ isActive }) =>
-          `text-h5 block mb-8 px-8 hover:bg-vega-yellow hover:text-black ${
-            isActive && 'bg-vega-yellow text-black'
-          }`
-        }
-      >
-        {r.text}
-      </NavLink>
-    ))}
-  </nav>
-);
+export const AppRouter = () => useRoutes(routerConfig);
 
 interface Props {
   onToggle(): void;
-
   isMenuOpen: boolean;
 }
 
 export const Main = ({ onToggle, isMenuOpen }: Props) => {
   return (
     <DrawerWrapper>
-      <NavigationDrawer onToggle={onToggle} isMenuOpen={isMenuOpen}>
+      <NavigationDrawer rtl onToggle={onToggle} isMenuOpen={isMenuOpen}>
         <DrawerToggle
           onToggle={onToggle}
           variant={DRAWER_TOGGLE_VARIANTS.CLOSE}
-          className="self-end p-16"
+          className="p-16"
         />
-        <Menu />
+        <Nav className="hidden md:block my-20 h-full" />
       </NavigationDrawer>
-      <DrawerContainer>
+      <DrawerContent>
         <AppRouter />
-      </DrawerContainer>
+        <TabBar className="md:hidden" />
+      </DrawerContent>
     </DrawerWrapper>
   );
 };
diff --git a/apps/simple-trading-app/src/app/components/nav/index.tsx b/apps/simple-trading-app/src/app/components/nav/index.tsx
new file mode 100644
index 000000000..f7ccc3ba9
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/nav/index.tsx
@@ -0,0 +1,2 @@
+export * from './nav';
+export * from './tab-bar';
diff --git a/apps/simple-trading-app/src/app/components/nav/nav-item.tsx b/apps/simple-trading-app/src/app/components/nav/nav-item.tsx
new file mode 100644
index 000000000..b224fa960
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/nav/nav-item.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Icon } from '../icons';
+
+interface NavItemProps {
+  iconName: string;
+  label?: string;
+}
+
+export const NavItem = ({ iconName, label }: NavItemProps) => {
+  return (
+    <div className="flex flex-col md:flex-row items-center justify-start cursor-pointer relative">
+      <Icon name={iconName} className="mr-8" />
+      <span>{label}</span>
+    </div>
+  );
+};
diff --git a/apps/simple-trading-app/src/app/components/nav/nav.tsx b/apps/simple-trading-app/src/app/components/nav/nav.tsx
new file mode 100644
index 000000000..ada9c69fe
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/nav/nav.tsx
@@ -0,0 +1,30 @@
+import { routerConfig } from '../../routes';
+import { NavLink } from 'react-router-dom';
+import { NavItem } from './nav-item';
+import React from 'react';
+
+interface NavProps {
+  className?: string;
+  tabs?: boolean;
+}
+
+export const Nav = ({ className, tabs = false }: NavProps) => {
+  return (
+    <nav role={tabs ? 'tablist' : 'menu'} className={className}>
+      {routerConfig.map((r) => (
+        <NavLink
+          role={tabs ? 'tab' : 'menuitem'}
+          key={r.name}
+          to={r.path}
+          className={({ isActive }) =>
+            `text-h5 block md:mb-40 px-40 md:text-black md:dark:text-white ${
+              isActive && 'text-white md:text-blue md:dark:text-blue'
+            }`
+          }
+        >
+          <NavItem iconName={r.icon} label={r.text} />
+        </NavLink>
+      ))}
+    </nav>
+  );
+};
diff --git a/apps/simple-trading-app/src/app/components/nav/tab-bar.tsx b/apps/simple-trading-app/src/app/components/nav/tab-bar.tsx
new file mode 100644
index 000000000..e0ff6b7f2
--- /dev/null
+++ b/apps/simple-trading-app/src/app/components/nav/tab-bar.tsx
@@ -0,0 +1,15 @@
+import { Nav } from './nav';
+import React from 'react';
+
+interface TabBarProps {
+  className?: string;
+}
+
+export const TabBar = ({ className }: TabBarProps) => (
+  <div role="group" aria-label="Tab Bar Navigation Menu" className={className}>
+    <div role="presentation" className="py-[42px]" />
+    <div className="md:hidden fixed bottom-0 left-0 right-0 bg-black py-16">
+      <Nav tabs className="flex justify-evenly items-center" />
+    </div>
+  </div>
+);
diff --git a/apps/simple-trading-app/src/app/routes/router-config.tsx b/apps/simple-trading-app/src/app/routes/router-config.tsx
index 3458cea79..a680b4922 100644
--- a/apps/simple-trading-app/src/app/routes/router-config.tsx
+++ b/apps/simple-trading-app/src/app/routes/router-config.tsx
@@ -4,20 +4,12 @@ import { SimpleMarketList } from '../components/simple-market-list';
 import { Portfolio } from '../components/portfolio';
 
 export const ROUTES = {
-  HOME: '/',
   MARKETS: 'markets',
   TRADING: 'trading',
-  LIQUIDITY: 'liquidity',
   PORTFOLIO: 'portfolio',
 };
 
 export const routerConfig = [
-  {
-    path: ROUTES.HOME,
-    name: 'Home',
-    text: t('Home'),
-    element: <div>Home</div>,
-  },
   {
     path: ROUTES.MARKETS,
     children: [
@@ -36,6 +28,7 @@ export const routerConfig = [
     name: 'Markets',
     text: t('Markets'),
     element: <SimpleMarketList />,
+    icon: 'market',
   },
   {
     path: ROUTES.TRADING,
@@ -48,17 +41,13 @@ export const routerConfig = [
         element: <DealTicketContainer />,
       },
     ],
-  },
-  {
-    path: ROUTES.LIQUIDITY,
-    name: 'Liquidity',
-    text: t('Liquidity'),
-    element: <div>Liquidity</div>,
+    icon: 'trade',
   },
   {
     path: ROUTES.PORTFOLIO,
     name: 'Portfolio',
     text: t('Portfolio'),
     element: <Portfolio />,
+    icon: 'portfolio',
   },
 ];
diff --git a/libs/react-helpers/src/hooks/index.ts b/libs/react-helpers/src/hooks/index.ts
index 8af73c02a..4269b816d 100644
--- a/libs/react-helpers/src/hooks/index.ts
+++ b/libs/react-helpers/src/hooks/index.ts
@@ -2,3 +2,4 @@ export * from './use-apply-grid-transaction';
 export * from './use-data-provider';
 export * from './use-theme-switcher';
 export * from './use-fetch';
+export * from './use-resize';
diff --git a/libs/react-helpers/src/hooks/use-resize.ts b/libs/react-helpers/src/hooks/use-resize.ts
new file mode 100644
index 000000000..cc003c9ea
--- /dev/null
+++ b/libs/react-helpers/src/hooks/use-resize.ts
@@ -0,0 +1,34 @@
+import { useRef, useEffect, useState } from 'react';
+
+export const useResize = () => {
+  const [windowSize, setWindowSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  const timeout = useRef(0);
+
+  const handleResize = () => {
+    if (timeout.current) {
+      window.cancelAnimationFrame(timeout.current);
+    }
+
+    // Setup the new requestAnimationFrame()
+    timeout.current = window.requestAnimationFrame(function () {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.cancelAnimationFrame(timeout.current);
+    };
+  }, []);
+
+  return windowSize;
+};
diff --git a/libs/tailwindcss-config/src/theme-lite.js b/libs/tailwindcss-config/src/theme-lite.js
index a18b56303..125e540e0 100644
--- a/libs/tailwindcss-config/src/theme-lite.js
+++ b/libs/tailwindcss-config/src/theme-lite.js
@@ -11,6 +11,7 @@ module.exports = {
     yellow: '#DFFF0B',
     mint: '#00F780',
     pink: '#FF077F',
+    blue: '#2E6DE5',
   },
   fontSize: {
     ...theme.fontSize,
diff --git a/libs/ui-toolkit/src/components/theme-switcher/icons.tsx b/libs/ui-toolkit/src/components/theme-switcher/icons.tsx
new file mode 100644
index 000000000..2ce23d83d
--- /dev/null
+++ b/libs/ui-toolkit/src/components/theme-switcher/icons.tsx
@@ -0,0 +1,25 @@
+export const SunIcon = () => (
+  <svg viewBox="0 0 45 45" className="w-32 h-32">
+    <g>
+      <path
+        d="M22.5 27.79a5.29 5.29 0 1 0 0-10.58 5.29 5.29 0 0 0 0 10.58Z"
+        fill="currentColor"
+      ></path>
+      <path
+        d="M15.01 22.5H10M35 22.5h-5.01M22.5 29.99V35M22.5 10v5.01M17.21 27.79l-3.55 3.55M31.34 13.66l-3.55 3.55M27.79 27.79l3.55 3.55M13.66 13.66l3.55 3.55"
+        stroke="currentColor"
+        strokeWidth="1.3"
+        strokeMiterlimit="10"
+      ></path>
+    </g>
+  </svg>
+);
+
+export const MoonIcon = () => (
+  <svg viewBox="0 0 45 45" className="w-32 h-32">
+    <path
+      d="M28.75 11.69A12.39 12.39 0 0 0 22.5 10a12.5 12.5 0 1 0 0 25c2.196 0 4.353-.583 6.25-1.69A12.46 12.46 0 0 0 35 22.5a12.46 12.46 0 0 0-6.25-10.81Zm-6.25 22a11.21 11.21 0 0 1-11.2-11.2 11.21 11.21 0 0 1 11.2-11.2c1.246 0 2.484.209 3.66.62a13.861 13.861 0 0 0-5 10.58 13.861 13.861 0 0 0 5 10.58 11.078 11.078 0 0 1-3.66.63v-.01Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+);
diff --git a/libs/ui-toolkit/src/components/theme-switcher/index.tsx b/libs/ui-toolkit/src/components/theme-switcher/index.tsx
index 92502cb07..36f7c3b32 100644
--- a/libs/ui-toolkit/src/components/theme-switcher/index.tsx
+++ b/libs/ui-toolkit/src/components/theme-switcher/index.tsx
@@ -1 +1,2 @@
 export * from './theme-switcher';
+export * from './icons';
diff --git a/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx b/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx
index df2e9bd3c..56c5fbdab 100644
--- a/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx
+++ b/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx
@@ -1,34 +1,31 @@
+import classNames from 'classnames';
+import { SunIcon, MoonIcon } from './icons';
+
 export const ThemeSwitcher = ({
   onToggle,
   className,
+  sunClassName = '',
+  moonClassName = '',
 }: {
   onToggle: () => void;
   className?: string;
-}) => (
-  <button type="button" onClick={() => onToggle()} className={className}>
-    <span className="dark:hidden text-black">
-      <svg viewBox="0 0 45 45" className="w-32 h-32">
-        <g>
-          <path
-            d="M22.5 27.79a5.29 5.29 0 1 0 0-10.58 5.29 5.29 0 0 0 0 10.58Z"
-            fill="currentColor"
-          ></path>
-          <path
-            d="M15.01 22.5H10M35 22.5h-5.01M22.5 29.99V35M22.5 10v5.01M17.21 27.79l-3.55 3.55M31.34 13.66l-3.55 3.55M27.79 27.79l3.55 3.55M13.66 13.66l3.55 3.55"
-            stroke="currentColor"
-            strokeWidth="1.3"
-            strokeMiterlimit="10"
-          ></path>
-        </g>
-      </svg>
-    </span>
-    <span className="hidden dark:inline text-white">
-      <svg viewBox="0 0 45 45" className="w-32 h-32">
-        <path
-          d="M28.75 11.69A12.39 12.39 0 0 0 22.5 10a12.5 12.5 0 1 0 0 25c2.196 0 4.353-.583 6.25-1.69A12.46 12.46 0 0 0 35 22.5a12.46 12.46 0 0 0-6.25-10.81Zm-6.25 22a11.21 11.21 0 0 1-11.2-11.2 11.21 11.21 0 0 1 11.2-11.2c1.246 0 2.484.209 3.66.62a13.861 13.861 0 0 0-5 10.58 13.861 13.861 0 0 0 5 10.58 11.078 11.078 0 0 1-3.66.63v-.01Z"
-          fill="currentColor"
-        ></path>
-      </svg>
-    </span>
-  </button>
-);
+  sunClassName?: string;
+  moonClassName?: string;
+}) => {
+  const sunClasses = classNames('dark:hidden text-black', sunClassName);
+  const moonClasses = classNames(
+    'hidden dark:inline text-white',
+    moonClassName
+  );
+
+  return (
+    <button type="button" onClick={() => onToggle()} className={className}>
+      <span className={sunClasses}>
+        <SunIcon />
+      </span>
+      <span className={moonClasses}>
+        <MoonIcon />
+      </span>
+    </button>
+  );
+};