diff --git a/src/app/(dashboard)/home/page.tsx b/src/app/(dashboard)/home/page.tsx
index 8d137bd..eabb77b 100644
--- a/src/app/(dashboard)/home/page.tsx
+++ b/src/app/(dashboard)/home/page.tsx
@@ -1,11 +1,21 @@
 import TanStackTable from "@/components/table/TanStackTable";
+import { Box, Card, Typography } from "@mui/material";
 import React from "react";
+import CardHeader from "@mui/material/CardHeader";
+import CardContent from "@mui/material/CardContent";
 
 const HomePage = () => {
   return (
-    <div>
-      <TanStackTable />
-    </div>
+    <Box>
+      <Card>
+        <CardHeader>
+          <Typography variant="h4">Projects</Typography>
+        </CardHeader>
+        <CardContent>
+          <TanStackTable />
+        </CardContent>
+      </Card>
+    </Box>
   );
 };
 
diff --git a/src/components/wrapper/dashboardWrapper.tsx b/src/components/wrapper/dashboardWrapper.tsx
index 8ea1a51..0f45def 100644
--- a/src/components/wrapper/dashboardWrapper.tsx
+++ b/src/components/wrapper/dashboardWrapper.tsx
@@ -21,6 +21,7 @@ import { UTILITY_CONSTANT } from "@/utilities/utilityConstant";
 import styles from "./DashboardWrapper.module.scss";
 import styled from "@emotion/styled";
 import { BUILDING, GEAR } from "@/utilities/svgConstant";
+import LogoutIcon from "@mui/icons-material/Logout";
 
 const drawerWidth = 260;
 
@@ -154,35 +155,40 @@ export default function DashboardWrapper(props: Props) {
               Responsive drawer
             </Typography>
           </Box>
-          <Box
-            display={"flex"}
-            alignItems={"center"}
-            gap={1}
-            sx={{
-              background: "var(--clr_gray_100)",
-              padding: "8px",
-              borderRadius: "30px",
-            }}
-          >
-            <Avatar
-              sx={{
-                width: 34,
-                height: 34,
-                cursor: "pointer",
-                background: "var(--primary_light)",
-                color: "var(--primary_Active_text)",
-                fontSize: "0.8rem",
-              }}
-              alt="Remy Sharp"
-              src="/static/images/avatar/1.jpg"
-            />
-            <GEAR
+          <Box display={"flex"} alignItems={"center"} gap={1}>
+            <Box
+              display={"flex"}
+              alignItems={"center"}
+              gap={1}
               sx={{
-                color: "var(--primary_Active_text)",
-                fontSize: "1.8rem",
-                cursor: "pointer",
+                background: "var(--clr_gray_100)",
+                padding: "8px",
+                borderRadius: "30px",
               }}
-            />
+            >
+              <Avatar
+                sx={{
+                  width: 34,
+                  height: 34,
+                  cursor: "pointer",
+                  background: "var(--primary_light)",
+                  color: "var(--primary_Active_text)",
+                  fontSize: "0.8rem",
+                }}
+                alt="Remy Sharp"
+                src="/static/images/avatar/1.jpg"
+              />
+              {/* <GEAR
+                sx={{
+                  color: "var(--primary_Active_text)",
+                  fontSize: "1.8rem",
+                  cursor: "pointer",
+                }}
+              /> */}
+              <IconButton aria-label="log out" size="medium" color="error">
+                <LogoutIcon fontSize="small" />
+              </IconButton>
+            </Box>
           </Box>
         </Toolbar>
       </CssAppBar>