diff --git a/client/css/catalog.css b/client/css/catalog.css
index 7e0c8d66b9f8184ddf1df074e5a0f8cf7a6bcfe9..3987914848b5079cd8bd9d111640e776af53383c 100644
--- a/client/css/catalog.css
+++ b/client/css/catalog.css
@@ -14,24 +14,28 @@
     mix-blend-mode: multiply;
     background-position: center;
     background-size: cover;
+    display: flex;
+    flex-direction: column;
 }
 
 .center{
     text-align: center;
-    position: relative;
+    position: absolute;
     width: 100%;
+    bottom: 10px;
 }
 
 .pageview{
     width: 100%;
-    height: 92vh;
-    top: 8%;
+    height: 85vh;
+    top: 0%;
     flex-shrink: 0;
     position: relative;
 }
 
 .catalogview{
-    height: 86vh;
+    height: 85vh;
+    padding-top: 20px;
     text-align: center;
 }
 
diff --git a/client/css/sidebar.css b/client/css/sidebar.css
new file mode 100644
index 0000000000000000000000000000000000000000..048d0b3645c545846887583ebd4ff1bb0c1d9736
--- /dev/null
+++ b/client/css/sidebar.css
@@ -0,0 +1,35 @@
+@import url('https://fonts.googleapis.com/css?family=Inter');
+
+
+.sidebar{
+    width: 13%;
+    top: 8%;
+    left: -20%;
+    padding-top: 2vh;
+    background-color: rgb(12, 12, 82);
+    height: 92%;
+    transition: all 0.2s;
+    position: fixed;
+}
+
+.sidebar li{
+    list-style-type: none;
+    margin-bottom: 15px;
+    margin-left: 10px;
+    padding-bottom: 10px;
+}
+
+.sidebar li a{
+    font-size: 15px;
+    margin-left: 2px;
+    color: #fff;
+    text-decoration: none;
+    display: block;
+}
+
+#logout{
+    position: absolute;
+    bottom: 10px;
+}
+
+
diff --git a/client/js/login-page.js b/client/js/login-page.js
index e87eaa638da84f29408ee6611cacb51eeabfca9d..e956baac46e579607507a0852b8af1cd6c3243a0 100644
--- a/client/js/login-page.js
+++ b/client/js/login-page.js
@@ -112,7 +112,7 @@ signupBtn.onclick = function(){
     signupBtn.style.color = "#fff";
     signinBtn.style.color = "#555";
     nameField.style.maxHeight = "60px";
-    title.innerHTML = "SIGN UP";``
+    title.innerHTML = "SIGN UP";
     signupBtn.classList.remove("disable");
     signinBtn.classList.add("disable");
            
diff --git a/client/js/sidebar.js b/client/js/sidebar.js
new file mode 100644
index 0000000000000000000000000000000000000000..0a4bd35034cb7bf980f65d90a1b41e4280f00631
--- /dev/null
+++ b/client/js/sidebar.js
@@ -0,0 +1,38 @@
+function openSidebar(){
+    document.getElementById("sidebar").style.left = "-20%";
+    document.getElementById("tabexpand").setAttribute("href","javascript:closeSidebar()");
+    document.getElementById("tabexpand").setAttribute("onclick","");
+}
+
+function closeSidebar(){
+    document.getElementById("sidebar").style.left = "0%";
+    document.getElementById("tabexpand").setAttribute("href","javascript:openSidebar()");
+    document.getElementById("tabexpand").setAttribute("onclick","");
+}
+
+addsidebar = () => {
+    return document.getElementById("sidebar").innerHTML = `
+    <li><a href='#' id="manageuser">
+        <i class="fa-solid fa-user"></i>  Account 
+    </a></li>
+    <li><a href='#' id="manageuser">
+        <i class="fa-solid fa-people-roof"></i> 
+          Manage User 
+    </a></li>
+    <li><a href='#' id="manageitem"> 
+        <i class="fa-solid fa-layer-group"></i>
+          Manage Item 
+    </a></li>
+    <li><a href='#' id="adduser"> 
+        <i class="fa-solid fa-user-plus"></i>
+          Add User 
+    </a></li>
+    <li><a href='#' id="additem"> 
+        <i class="fa-solid fa-cart-plus"></i>
+          Add Item 
+    </a></li>    
+    <li><a href='#' id="logout"> 
+        <i class="fa-solid fa-right-from-bracket"></i>
+          Log Out 
+    </a></li>1`
+}
\ No newline at end of file
diff --git a/client/pages/catalog.php b/client/pages/catalog.php
index fd105e48d938c874b42ca38212b3c8b45c04504c..e78cbc00a299384c6b0903047462077df4563c3c 100644
--- a/client/pages/catalog.php
+++ b/client/pages/catalog.php
@@ -5,7 +5,9 @@
     <title>Catalog</title>
     <link rel="stylesheet" href="../css/catalog.css">
     <link rel="stylesheet" href="../css/navbar.css">
+    <link rel="stylesheet" href="../css/sidebar.css">
     <script src="../js/navbar.js"></script>
+    <script src="../js/sidebar.js"></script>
     <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
     <script src="../js/catalog.js"></script>
 </head>
@@ -36,6 +38,11 @@
                 <a href="javascript:nextPage()" id="btnNext">Next</a>
             </div>
         </div>
+        <div class="sidebar" id="sidebar">
+            <script>
+                addsidebar();
+            </script>
+        </div>
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/client/protoype/sidebar.html b/client/protoype/sidebar.html
new file mode 100644
index 0000000000000000000000000000000000000000..544bfc298f02c9d2e7bc363a990a7ddb13610726
--- /dev/null
+++ b/client/protoype/sidebar.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial scale=1.0">
+    <title>Homepage</title>
+    <link rel="stylesheet" href="../css/navbar.css">
+    <link rel="stylesheet" href="../css/sidebar.css">
+    <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
+    <script src="../js/navbar.js"></script>
+    <script src="../js/sidebar.js"></script>
+</head>
+<body>
+    <div class="container">
+        <div class="tabgroup" id="tabgroup">
+            <script>
+                addnavbar();
+            </script>
+        </div>
+        <div class="sidebar" id="sidebar">
+            <!--admin sidebar-->
+            <li><a href='#' id="manageuser">
+                <i class="fa-solid fa-people-roof"></i> 
+                Manage User 
+            </a></li>
+            <li><a href='#' id="manageitem"> 
+                <i class="fa-solid fa-layer-group"></i>
+                Manage Item 
+            </a></li>
+            <li><a href='#' id="adduser"> 
+                <i class="fa-solid fa-user-plus"></i>
+                Add User 
+            </a></li>
+            <li><a href='#' id="additem"> 
+                <i class="fa-solid fa-cart-plus"></i>
+                Add Item 
+            </a></li>    
+            <li><a href='#' id="logout"> 
+                <i class="fa-solid fa-right-from-bracket"></i>
+                Log Out 
+            </a></li>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file