diff --git a/src/modules/admin/pages/AdminDashboard.tsx b/src/modules/admin/pages/AdminDashboard.tsx
index 53ccdad..9f656b7 100644
--- a/src/modules/admin/pages/AdminDashboard.tsx
+++ b/src/modules/admin/pages/AdminDashboard.tsx
@@ -3,8 +3,8 @@ import { Doughnut } from "react-chartjs-2";
 import "./AdminDashboard.css";
 import { AccountCircleOutlined, Folder } from "@mui/icons-material"; // Removed HomeOutlined
 import { Col, Row } from "antd";
-import AdminHeaderDashboard from "../components/AdminHeaderDashboard";
-import AdminSidebarDashboard from "../components/AdminSidebarDashboard"; // Import the sidebar component
+import AdminHeaderDashboard from "../../../shared/components/AdminHeaderDashboard";
+import AdminSidebarDashboard from "../../../shared/components/AdminSidebarDashboard"; // Import the sidebar component
 import React, { useState } from "react";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
diff --git a/src/modules/admin/pages/UserManagement.css b/src/modules/admin/pages/UserManagement.css
index b8115f5..609e45b 100644
--- a/src/modules/admin/pages/UserManagement.css
+++ b/src/modules/admin/pages/UserManagement.css
@@ -1,5 +1,5 @@
 body {
-  background-color: lightblue;
+  /*   */
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif;
diff --git a/src/modules/auth/pages/Login.css b/src/modules/auth/pages/Login.css
index 29172b4..a5ea07f 100644
--- a/src/modules/auth/pages/Login.css
+++ b/src/modules/auth/pages/Login.css
@@ -2,11 +2,11 @@
     padding: 0;
     margin: 0;
     box-sizing: border-box;
-    overflow: hidden;
+    
 }
 
 .login-page {
-    
+    overflow: hidden;
 }
 
 .login-left {
diff --git a/src/modules/auth/pages/Login.tsx b/src/modules/auth/pages/Login.tsx
index fc10be9..347d563 100644
--- a/src/modules/auth/pages/Login.tsx
+++ b/src/modules/auth/pages/Login.tsx
@@ -14,7 +14,7 @@ const Login = () => {
         const user = {
             email: values.email,
             password: values.password,
-            role: Role.ADMIN,
+            role: Role.USER,
         };
         setRole(user.role);
         console.log(role);
diff --git a/src/modules/users/pages/user-dashboard/UserDashboard.tsx b/src/modules/users/pages/user-dashboard/UserDashboard.tsx
index 706c930..f74f64e 100644
--- a/src/modules/users/pages/user-dashboard/UserDashboard.tsx
+++ b/src/modules/users/pages/user-dashboard/UserDashboard.tsx
@@ -1,64 +1,71 @@
-import React from "react";
-import { Tabs } from "antd";
+import React, { useState } from "react";
+
+
+import UserSidebarDashboardProps from "../../../../shared/components/UserSidebarDashboard";
+import AdminHeaderDashboard from "../../../../shared/components/AdminHeaderDashboard";
 
-import Topbar from "../../components/topbar/Topbar";
-import HouseIcon from "@mui/icons-material/House";
-import BadgeIcon from '@mui/icons-material/Badge';
-import RequestPageIcon from '@mui/icons-material/RequestPage';
-import User from "./User";
-import Home from "./Home";
-import RequestPage from "../request/RequestPage";
-import AddRequestPage from "../../components/request-comp/AddRequest";
 
 const UserDashboard: React.FC = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
   return (
     <>
-      <Topbar />
-      <Tabs
-        tabPosition="left"
-        items={[
-          {
-            key: "1",
-            label: (
-              <span className="tab-item">
-                <HouseIcon className="Icon"/>
-                Home
-              </span>
-            ),
-            children: <Home />,
-          },
-          {
-            key: "2",
-            label: (
-                <span className="tab-item">
-                  <BadgeIcon className="Icon"/> 
-                  Profile
-                </span>
-              ),
-            children: <User />,
-          },
-          {
-            key: "3",
-            label: (
-              <span className="tab-item">
-                <RequestPageIcon className="Icon"/>
-                My Request
-              </span>
-            ),
-            children: <RequestPage />,
-          },
-          {
-            key: "4",
-            label: (
-              <span className="tab-item">
-                <RequestPageIcon className="Icon"/>
-                Add request
-              </span>
-            ),
-            children: <AddRequestPage />,
-          },
-        ]}
-      />
+      <AdminHeaderDashboard toggleSidebar={toggleSidebar} /> 
+      <UserSidebarDashboardProps isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
+      {/* <Home/> */}
+      {/* <Tabs tabPosition="left">
+        <Tabs.TabPane
+          key="1"
+          tab={
+            <span className="tab-item">
+              <HouseIcon className="Icon" />
+              Home
+            </span>
+          }
+        >
+          <Home />
+        </Tabs.TabPane>
+
+        <Tabs.TabPane
+          key="2"
+          tab={
+            <span className="tab-item">
+              <BadgeIcon className="Icon" />
+              Profile
+            </span>
+          }
+        >
+          <User />
+        </Tabs.TabPane>
+
+        <Tabs.TabPane
+          key="3"
+          tab={
+            <span className="tab-item">
+              <RequestPageIcon className="Icon" />
+              My Request
+            </span>
+          }
+        >
+          <RequestPage />
+        </Tabs.TabPane>
+
+        <Tabs.TabPane
+          key="4"
+          tab={
+            <span className="tab-item">
+              <RequestPageIcon className="Icon" />
+              Add Request
+            </span>
+          }
+        >
+          <AddRequestPage />
+        </Tabs.TabPane>
+      </Tabs> */}
     </>
   );
 };
diff --git a/src/modules/admin/components/AdminHeaderDashboard.tsx b/src/shared/components/AdminHeaderDashboard.tsx
similarity index 100%
rename from src/modules/admin/components/AdminHeaderDashboard.tsx
rename to src/shared/components/AdminHeaderDashboard.tsx
diff --git a/src/modules/admin/components/AdminSidebarDashboard.tsx b/src/shared/components/AdminSidebarDashboard.tsx
similarity index 99%
rename from src/modules/admin/components/AdminSidebarDashboard.tsx
rename to src/shared/components/AdminSidebarDashboard.tsx
index c9c8823..0054b19 100644
--- a/src/modules/admin/components/AdminSidebarDashboard.tsx
+++ b/src/shared/components/AdminSidebarDashboard.tsx
@@ -23,6 +23,7 @@ export default function AdminSidebarDashboard({ isOpen, toggleSidebar }: AdminSi
       onClick={toggleSidebar}
       onKeyDown={toggleSidebar}
     >
+      
       <List>
         {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
           <ListItem key={text} disablePadding>
@@ -49,6 +50,7 @@ export default function AdminSidebarDashboard({ isOpen, toggleSidebar }: AdminSi
         ))}
       </List>
     </Box>
+    
   );
 
   return (
diff --git a/src/shared/components/UserSidebarDashboard.tsx b/src/shared/components/UserSidebarDashboard.tsx
new file mode 100644
index 0000000..83957d7
--- /dev/null
+++ b/src/shared/components/UserSidebarDashboard.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import HouseIcon from "@mui/icons-material/House";
+import BadgeIcon from "@mui/icons-material/Badge";
+import RequestPageIcon from "@mui/icons-material/RequestPage";
+import Home from '../../modules/users/pages/user-dashboard/Home';
+import User from '../../modules/users/pages/user-dashboard/User';
+import RequestPage from '../../modules/users/pages/request/RequestPage';
+import AddRequestPage from '../../modules/users/components/request-comp/AddRequest';
+
+
+
+interface UserSidebarDashboardProps {
+  isOpen: boolean;
+  toggleSidebar: () => void;
+}
+
+export default function UserSidebarDashboard({ isOpen, toggleSidebar }: UserSidebarDashboardProps) {
+  const [selectedTab, setSelectedTab] = useState("Home");
+
+  const menuItems = [
+    { text: "Home", icon: <HouseIcon /> },
+    { text: "Profile", icon: <BadgeIcon /> },
+    { text: "My Requests", icon: <RequestPageIcon /> },
+    { text: "Add Request", icon: <RequestPageIcon /> },
+  ];
+
+  return (
+    <>
+      {/* <AdminHeaderDashboard toggleSidebar={toggleSidebar} /> */}
+      <Drawer open={isOpen} onClose={toggleSidebar}>
+        <Box sx={{ width: 250 }} role="presentation">
+          <List>
+            {menuItems.map(({ text, icon }) => (
+              <ListItem key={text} disablePadding>
+                <ListItemButton onClick={() => setSelectedTab(text)}>
+                  <ListItemIcon>{icon}</ListItemIcon>
+                  <ListItemText primary={text} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+          <Divider />
+        </Box>
+      </Drawer>
+
+      {/* Render selected content */}
+      <Box sx={{ padding: 2 }}>
+        {selectedTab === "Home" && <Home />}
+        {selectedTab === "Profile" && <User />}
+        {selectedTab === "My Requests" && <RequestPage />}
+        {selectedTab === "Add Request" && <AddRequestPage />}
+      </Box>
+    </>
+  );
+}