diff --git a/src/components/layouts/SidebarApp.tsx b/src/components/layouts/SidebarApp.tsx
new file mode 100644
index 0000000..eb2aed0
--- /dev/null
+++ b/src/components/layouts/SidebarApp.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Drawer, List, ListItem, ListItemText } from '@mui/material';
+import { DRAWER_WIDTH } from '@/libs/constants';
+
+function SidebarApp() {
+    return (
+        <div>
+            <Drawer
+                variant='permanent'
+                sx={{
+                    width: DRAWER_WIDTH,
+                    flexShrink: 0,
+                    [`& .MuiDrawer-paper`]: { width: DRAWER_WIDTH, boxSizing: 'border-box' },
+                }}
+            >
+                <List>
+                    <ListItem button>
+                        <ListItemText primary="Item 1" />
+                    </ListItem>
+                    <ListItem button>
+                        <ListItemText primary="Item 2" />
+                    </ListItem>
+                </List>
+            </Drawer>
+        </div>
+    );
+}
+
+export default SidebarApp;
diff --git a/src/layouts/DefaultLayout.tsx b/src/layouts/DefaultLayout.tsx
new file mode 100644
index 0000000..75777c9
--- /dev/null
+++ b/src/layouts/DefaultLayout.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { Outlet } from "react-router-dom";
+import SidebarApp from "@/components/layouts/SidebarApp";
+
+function DefaultLayout() {
+    return (
+        <Box sx={{ display: "flex", height: "100vh" }}>
+            <SidebarApp />
+            <Box
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flexGrow: 1,
+                    overflowX: 'hidden',
+                }}
+            >
+                <Box
+                    component="main"
+                    sx={{
+                        flexGrow: 1,
+                        px: 3,
+                        py: 2,
+                        backgroundColor: theme => theme.palette.grey[50],
+                    }}
+                >
+                    <Outlet />
+                </Box>
+            </Box>
+        </Box>
+    );
+}
+
+export default DefaultLayout;
diff --git a/src/libs/constants.ts b/src/libs/constants.ts
new file mode 100644
index 0000000..d2e9b81
--- /dev/null
+++ b/src/libs/constants.ts
@@ -0,0 +1 @@
+export const DRAWER_WIDTH = 280;
diff --git a/src/router/index.tsx b/src/router/index.tsx
index b7407cd..09a3bd8 100644
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -1,11 +1,19 @@
 import React from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 import Dashboard from '@/pages/Dashboard';
+import DefaultLayout from '@/layouts/DefaultLayout';
 
 export const router = createBrowserRouter([
   {
     path: '/',
-    element: <Dashboard />,
+    element: <DefaultLayout />,
+    children: [
+      {
+        path: '/',
+        element: <Dashboard />,
+        index: true,
+      },
+    ],
   },
   {
     path: '*',