diff --git a/app/routes/markets.tsx b/app/routes/markets.tsx
index 86fd398..d174b36 100644
--- a/app/routes/markets.tsx
+++ b/app/routes/markets.tsx
@@ -13,6 +13,7 @@ export default function MarketsPage() {
         initialMenu: "/markets",
       }}
       footerProps={config.scaffold.footerProps}
+      bottomNavProps={config.scaffold.bottomNavProps}
       routerAdapter={{
         onRouteChange,
       }}
diff --git a/app/routes/perp.tsx b/app/routes/perp.tsx
index f19c1ef..c93326c 100644
--- a/app/routes/perp.tsx
+++ b/app/routes/perp.tsx
@@ -8,6 +8,7 @@ export default function PerpPage() {
 
   return (
     <Scaffold
+      bottomNavProps={config.scaffold.bottomNavProps}
       mainNavProps={config.scaffold.mainNavProps}
       footerProps={config.scaffold.footerProps}
       routerAdapter={{
diff --git a/app/routes/portfolio.tsx b/app/routes/portfolio.tsx
index a6f3eb4..89cc208 100644
--- a/app/routes/portfolio.tsx
+++ b/app/routes/portfolio.tsx
@@ -24,6 +24,7 @@ export default function PortfolioLayout() {
         ...config.scaffold.mainNavProps,
         initialMenu: "/portfolio",
       }}
+      bottomNavProps={config.scaffold.bottomNavProps}
       routerAdapter={{
         onRouteChange,
       }}
diff --git a/app/utils/config.tsx b/app/utils/config.tsx
index ef1970f..3d06ae9 100644
--- a/app/utils/config.tsx
+++ b/app/utils/config.tsx
@@ -1,6 +1,14 @@
 import { TradingPageProps } from "@orderly.network/trading";
-import { FooterProps, MainNavWidgetProps } from "@orderly.network/ui-scaffold";
+import { FooterProps, MainNavWidgetProps, BottomNavProps } from "@orderly.network/ui-scaffold";
 import { AppLogos } from "@orderly.network/react-app";
+import {
+  LeaderboardActiveIcon,
+  LeaderboardInactiveIcon,
+  PortfolioActiveIcon,
+  PortfolioInactiveIcon,
+  TradingActiveIcon,
+  TradingInactiveIcon,
+} from '@orderly.network/ui';
 import { OrderlyActiveIcon, OrderlyIcon } from "../components/icons/orderly";
 
 export type OrderlyConfig = {
@@ -10,6 +18,7 @@ export type OrderlyConfig = {
   scaffold: {
     mainNavProps: MainNavWidgetProps;
     footerProps: FooterProps;
+    bottomNavProps: BottomNavProps;
   };
   tradingPage: {
     tradingViewConfig: TradingPageProps["tradingViewConfig"];
@@ -19,6 +28,13 @@ export type OrderlyConfig = {
 
 const config: OrderlyConfig = {
   scaffold: {
+    bottomNavProps: {
+      mainMenus: [
+        { name: "Trading", href: "/", activeIcon: <TradingActiveIcon />, inactiveIcon: <TradingInactiveIcon /> },
+        { name: "Portfolio", href: "/portfolio", activeIcon: <PortfolioActiveIcon />, inactiveIcon: <PortfolioInactiveIcon /> },
+        { name: "Markets", href: "/markets", activeIcon: <LeaderboardActiveIcon />, inactiveIcon: <LeaderboardInactiveIcon /> },
+      ]
+    },
     mainNavProps: {
       initialMenu: "/",
       mainMenus: [
@@ -55,7 +71,7 @@ const config: OrderlyConfig = {
       discordUrl: "https://discord.com/invite/orderlynetwork",
       twitterUrl: "https://twitter.com/OrderlyNetwork",
       trailing: <span className="oui-text-2xs oui-text-base-contrast-54">Charts powered by <a href="https://tradingview.com" target="_blank" rel="noopener noreferrer">TradingView</a></span>
-    },
+    }
   },
   orderlyAppProvider: {
     appIcons: {