diff --git a/src/app/globals.scss b/src/app/globals.scss
index a797939..71c01ee 100644
--- a/src/app/globals.scss
+++ b/src/app/globals.scss
@@ -27,6 +27,8 @@
   --input-border-default: #e0e3e7;
   --input-border-hover: #b2bac2;
 
+  --dashboard-bg: #eef2f6; /* #EEF2F6 */
+
   // ========== Font Family ==========
   --font_primary: "roboto", sans-serif;
   // ========== Font Weight ==========
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 65db648..a511da5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,5 @@
 import Image from "next/image";
 import styles from "./page.module.scss";
-import ResponsiveDrawer from "@/components/wrapper/dashboardWrapper";
 
 export default function Home() {
   return <main className={styles.main}>fdhdhfh</main>;
diff --git a/src/components/wrapper/DashboardWrapper.module.scss b/src/components/wrapper/DashboardWrapper.module.scss
new file mode 100644
index 0000000..6af4ba5
--- /dev/null
+++ b/src/components/wrapper/DashboardWrapper.module.scss
@@ -0,0 +1,10 @@
+@use "@/theme/sass/helper" as *;
+
+.logo {
+  width: 100%;
+  max-height: 50px;
+  object-fit: contain;
+}
+.dashboard_main {
+  background: var(--dashboard-bg);
+}
diff --git a/src/components/wrapper/dashboardWrapper.tsx b/src/components/wrapper/dashboardWrapper.tsx
index 1264e42..061ed6b 100644
--- a/src/components/wrapper/dashboardWrapper.tsx
+++ b/src/components/wrapper/dashboardWrapper.tsx
@@ -4,7 +4,6 @@ import * as React from "react";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
-import Divider from "@mui/material/Divider";
 import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
 import InboxIcon from "@mui/icons-material/MoveToInbox";
@@ -18,8 +17,10 @@ import MenuIcon from "@mui/icons-material/Menu";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import { useState } from "react";
+import { UTILITY_CONSTANT } from "@/utilities/utilityConstant";
+import styles from "./DashboardWrapper.module.scss";
 
-const drawerWidth = 240;
+const drawerWidth = 260;
 
 interface Props {
   window?: () => Window;
@@ -49,9 +50,15 @@ export default function DashboardWrapper(props: Props) {
 
   const drawer = (
     <>
-      <Toolbar />
+      <Toolbar>
+        <img
+          src={UTILITY_CONSTANT.IMAGES.AUTH.HEADER_LOG}
+          alt="Logo"
+          className={styles.logo}
+        />
+      </Toolbar>
       {/* <Divider /> */}
-      <List>
+      <List sx={{ padding: "0", paddingInline: "18px" }}>
         {["Project Table"].map((text, index) => (
           <ListItem key={text} disablePadding>
             <ListItemButton>
@@ -70,7 +77,12 @@ export default function DashboardWrapper(props: Props) {
     window !== undefined ? () => window().document.body : undefined;
 
   return (
-    <Box sx={{ display: "flex" }} width={"100%"} height={"100%"}>
+    <Box
+      sx={{ display: "flex" }}
+      width={"100%"}
+      height={"100%"}
+      className={styles.dashboard_main}
+    >
       <CssBaseline />
       <AppBar
         position="fixed"