diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 9f1d565..79b1275 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -9,6 +9,7 @@ import {
   ShoppingOutlined,
   HomeOutlined,
   RocketOutlined,
+  LineChartOutlined
 } from "@ant-design/icons";
 
 import BasicLayout from "@ant-design/pro-layout";
@@ -104,8 +105,17 @@ export const AppLayout = (props: any) => {
                   {LABELS.MENU_LIQUIDATE}
                 </Link>
               </Menu.Item>
+              <Menu.Item key="6" icon={< LineChartOutlined/>}>
+                <Link
+                  to={{
+                    pathname: "/marginTrading",
+                  }}
+                >
+                  {LABELS.MARGIN_TRADING}
+                </Link>
+              </Menu.Item>
               {env !== "mainnet-beta" && (
-                <Menu.Item key="6" icon={<RocketOutlined />}>
+                <Menu.Item key="7" icon={<RocketOutlined />}>
                   <Link
                     to={{
                       pathname: "/faucet",
diff --git a/src/constants/labels.ts b/src/constants/labels.ts
index 0d2db11..f1aab4f 100644
--- a/src/constants/labels.ts
+++ b/src/constants/labels.ts
@@ -19,6 +19,7 @@ export const LABELS = {
   MENU_BORROW: "Borrow",
   MENU_LIQUIDATE: "Liquidate",
   MENU_FAUCET: "Faucet",
+  MARGIN_TRADING: "Margin Trading",
   APP_TITLE: "Oyster Lending",
   CONNECT_BUTTON: "Connect",
   WALLET_TOOLTIP: "Wallet public key",
diff --git a/src/routes.tsx b/src/routes.tsx
index 27d4d52..daa1e59 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -20,6 +20,7 @@ import {
   WithdrawView,
   LiquidateView,
   LiquidateReserveView,
+  MarginTrading,
 } from "./views";
 
 export function Routes() {
@@ -72,6 +73,11 @@ export function Routes() {
                         path="/liquidate/:id"
                         children={<LiquidateReserveView />}
                       />
+                      <Route
+                        exact
+                        path="/marginTrading"
+                        children={<MarginTrading />}
+                      />
                       <Route exact path="/faucet" children={<FaucetView />} />
                     </Switch>
                   </AppLayout>
diff --git a/src/views/index.tsx b/src/views/index.tsx
index 69f7522..51b2c53 100644
--- a/src/views/index.tsx
+++ b/src/views/index.tsx
@@ -10,3 +10,4 @@ export { FaucetView } from "./faucet";
 export { RepayReserveView } from "./repayReserve";
 export { LiquidateView } from "./liquidate";
 export { LiquidateReserveView } from "./liquidateReserve";
+export { MarginTrading } from "./marginTrading";
diff --git a/src/views/marginTrading/index.tsx b/src/views/marginTrading/index.tsx
new file mode 100644
index 0000000..af35ca3
--- /dev/null
+++ b/src/views/marginTrading/index.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { LABELS } from "../../constants";
+import "./style.less";
+import { Card } from "antd";
+
+export const MarginTrading = () => {
+
+  return (
+    <div className="liquidate-container">
+      
+    </div>
+  );
+};
diff --git a/src/views/marginTrading/style.less b/src/views/marginTrading/style.less
new file mode 100644
index 0000000..614b9a6
--- /dev/null
+++ b/src/views/marginTrading/style.less
@@ -0,0 +1 @@
+@import '~antd/es/style/themes/default.less';