diff --git a/src/components/exchange/orderbook.css.ts b/src/components/exchange/orderbook.css.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/exchange/orderbook.tsx b/src/components/exchange/orderbook.tsx
new file mode 100644
index 0000000..c5f9dc3
--- /dev/null
+++ b/src/components/exchange/orderbook.tsx
@@ -0,0 +1,5 @@
+import { component$ } from "@builder.io/qwik";
+
+export const Orderbook = component$(() => {
+  return <div>orderbook</div>;
+});
diff --git a/src/routes/exchange/[market]/index.tsx b/src/routes/exchange/[market]/index.tsx
index 523aaea..08cfc73 100644
--- a/src/routes/exchange/[market]/index.tsx
+++ b/src/routes/exchange/[market]/index.tsx
@@ -23,6 +23,7 @@ import ChartSvg from "~/media/icons/dark_theme/chart.svg?jsx";
 import OrderbookSvg from "~/media/icons/dark_theme/orderbook.svg?jsx";
 import PositionsSvg from "~/media/icons/dark_theme/positions.svg?jsx";
 import TradesSvg from "~/media/icons/dark_theme/trades.svg?jsx";
+import { Orderbook } from "~/components/exchange/orderbook";
 
 export const onRequest: RequestHandler = ({ params, redirect, sharedMap }) => {
   try {
@@ -81,6 +82,7 @@ export default component$(() => {
         {/* desktop */}
         <div class={headerDesktop}></div>
       </div>
+
       <div class={layout}>
         {/* mobile */}
         <div class={mobileLayout}>
@@ -92,7 +94,9 @@ export default component$(() => {
           <div class={mainPosition}>
             <div class={chartOrderbook}>
               <div class={chart}></div>
-              <div class={orderbook}></div>
+              <div class={orderbook}>
+                <Orderbook />
+              </div>
             </div>
             <div class={position}></div>
           </div>