diff --git a/client/src/App.jsx b/client/src/App.jsx
index c60c2f9..ad2140b 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,49 +1,8 @@
-import { Global, css } from "@emotion/react";
-import Header from './components/layout/Header/Header.jsx';
-import Sidebar from './components/layout/Sidebar/Sidebar.jsx';
-import Canvas from './components/layout/Canvas/Canvas.jsx';
-import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react';
+import Dashboard from './components/layout/Dashboard.jsx'
 
 function App() {
-  const recipe = useRecipe({ key: "canvas" });
-  const styles = recipe();
-
   return (
-  <>
-    <Global // change the background color of widget shadow when moving
-      styles={css`
-        .react-grid-placeholder {
-          background: #c0d2e3ff !important;
-          border-color: #a9b6c2ff !important;
-          box-shadow: 0 0 10px #c0d2e3ff !important;
-          opacity: 1 !important;
-          border-radius: 5px;
-        }
-
-        .react-resizable-handle-se {
-          position: sticky;
-          right: 0;
-          bottom: 0;
-        }
-      `}
-    />
-    <Grid css={styles}
-      templateRows="1fr 11fr"
-      templateColumns="1fr 20fr"
-      height="100vh"
-      width="100vw"
-    >
-      <GridItem rowSpan={1} colSpan={2}>
-        <Header />
-      </GridItem>
-      <GridItem colSpan={1}>
-        <Sidebar />
-      </GridItem>
-      <GridItem colSpan={1} width="100%">
-        <Canvas />
-      </GridItem> 
-    </Grid>
-    </>
+    <Dashboard />
   );
 }
 
diff --git a/client/src/components/layout/Dashboard.jsx b/client/src/components/layout/Dashboard.jsx
new file mode 100644
index 0000000..eeb1042
--- /dev/null
+++ b/client/src/components/layout/Dashboard.jsx
@@ -0,0 +1,50 @@
+import { Global, css } from "@emotion/react";
+import Header from './Header/Header.jsx';
+import Sidebar from './Sidebar/Sidebar.jsx';
+import Canvas from './Canvas/Canvas.jsx';
+import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react';
+
+export default function Dashboard() {
+  const recipe = useRecipe({ key: "canvas" });
+  const styles = recipe();
+
+  return (
+  <>
+    <Global // change the background color of widget shadow when moving
+      styles={css`
+        .react-grid-placeholder {
+          background: #c0d2e3ff !important;
+          border-color: #a9b6c2ff !important;
+          box-shadow: 0 0 10px #c0d2e3ff !important;
+          opacity: 1 !important;
+          border-radius: 5px;
+        }
+
+        .react-resizable-handle-se {
+          position: sticky;
+          right: 0;
+          bottom: 0;
+        }
+      `}
+    />
+    <Grid css={styles}
+      templateRows="1fr 11fr"
+      templateColumns="1fr 20fr"
+      height="100vh"
+      width="100vw"
+    >
+      <GridItem rowSpan={1} colSpan={2}>
+        <Header />
+      </GridItem>
+      <GridItem colSpan={1}>
+        <Sidebar />
+      </GridItem>
+      <GridItem colSpan={1} width="100%">
+        <Canvas />
+      </GridItem> 
+    </Grid>
+    </>
+  );
+}
+
+