diff --git a/ui/src/components/Sidebar/index.tsx b/ui/src/components/Sidebar/index.tsx
index 4ee3b6f9..d31b3445 100644
--- a/ui/src/components/Sidebar/index.tsx
+++ b/ui/src/components/Sidebar/index.tsx
@@ -1,35 +1,38 @@
-import { Layout, Menu } from "antd";
-import { Link } from "react-router-dom"; 
+import React from "react";
+import { Layout, Menu, Col, Row } from "antd";
+import { Link } from "react-router-dom"; // Assuming you're using react-router-dom for navigation
 
 const { Sider } = Layout;
 
 const Sidebar = () => {
   return (
     <Sider
-      className="h-screen bg-gray-800 text-white fixed top-0 left-0 flex flex-col justify-between"
-      width={250} 
+      className="h-screen bg-white text-gray-800 fixed top-16 left-0 flex flex-col justify-between"
+      width={250} // Adjust width as needed
     >
-      <div className="flex items-center py-4 px-6">
-        {/* Add logo image here */}
-        <img src="your_logo.png" alt="Your company logo" className="h-8 w-auto mr-4" />
-        <span className="text-xl font-bold">App Name</span>
+      <div className="flex flex-col justify-between h-full"> {/* Full height container */}
+        <Menu mode="vertical">
+          <Menu.Item key="1">
+            <Link to="/dashboard">Dashboard</Link>
+          </Menu.Item>
+          <Menu.Item key="2">
+            <Link to="/settings">Settings</Link>
+          </Menu.Item>
+          <Menu.Item key="3">
+            <Link to="/users">Users</Link>
+          </Menu.Item>
+          <Menu.Item key="4">
+            <Link to="/profile">Profile</Link>
+          </Menu.Item>
+        </Menu>
+        <div className="flex items-center py-4 px-6">
+          {/* Add  logo image here */}
+          <img src="your_logo.png" alt="Your company logo" className="h-8 w-auto mr-4" />
+          <span className="text-xl font-bold"> App Name</span>
+        </div>
       </div>
-      <Menu mode="vertical" theme="dark">
-        <Menu.Item key="1">
-          <Link to="/dashboard">Dashboard</Link>
-        </Menu.Item>
-        <Menu.Item key="2">
-          <Link to="/settings">Settings</Link>
-        </Menu.Item>
-        <Menu.Item key="3">
-          <Link to="/users">Users</Link>
-        </Menu.Item>
-        <Menu.Item key="4">
-          <Link to="/profile">Profile</Link>
-        </Menu.Item>
-      </Menu>
     </Sider>
   );
 };
 
-export default Sidebar;
+export default Sidebar;
\ No newline at end of file