diff --git a/client/css/navbar.css b/client/css/navbar.css
index 6407d4f44fe9e75831a8870d2533f0a596776369..c4e8d74db19f0a5081649b359e55e3e5c46782c5 100644
--- a/client/css/navbar.css
+++ b/client/css/navbar.css
@@ -1,30 +1,37 @@
+.navbar-container{
+    display: flex;
+    justify-content: space-evenly;
+    background-color: #AA1E1E;
+    border: none;
+    outline: none;
+    /* height: 15%; */
+}
 
 img{
-    float: left;
+    /* float: left; */
     margin: 10px;
     min-width: 100px;
     min-height: 50px;
 }
 
 .tabgroup{
-    background-color: #AA1E1E;
     color: #eaeaea;
-    float: left;
-    outline: none;
+    /* float: left; */
+
     font-size: 17px;
     width: 100%;
     height: 8%;
 }
 
 .searchbar {
-    float: left;
+    /* float: left; */
     padding: 6px;
     background: linear-gradient(rgba(255,255,255,0.67), rgba(255,255,255,0.67));
     margin-top: 15px;
     margin-left: 10%;
     border-radius: 10px;
     display: flex;
-    align-items: center;
+    /* align-items: center; */
     max-height: 35px;
     transition: max-height 0.5s;
     overflow: hidden;
@@ -33,31 +40,26 @@ img{
 
 
 .searchbar input{
+    background: transparent;
     background-color: transparent;
     border: none;
     font-size: 20px;
     margin-left: 10px;
     width: 100%;
-}
-
-input{
-    width: 100%;
-    background: transparent;
     border: 0;
-    outline: 0;
-}
 
+}
 
 .tabexpand{
-    background-color: #AA1E1E;
+    
     color: #eaeaea;
     float: left;
     border: none;
-    outline: none;
+
     text-decoration: none;
     text-align: center;
     cursor: pointer;
-    font-size: 30px;
+    font-size: 5vh;
     padding: 14px 14px;
     width: 5%;
     height: 100%;
@@ -67,7 +69,7 @@ input{
     background-color: transparent;
     color: #eaeaea;
     border: none;
-    outline: none;
+
     cursor: pointer;
     font-size: 17px;
     padding: 17px 0px;
@@ -77,63 +79,64 @@ input{
     height: 100%;
 }
 
-.tabbutton{
-    background-color: #AA1E1E;
+/* .tabbutton{
+    
     color: #eaeaea;
     float: left;
     border: none;
-    outline: none;
+
     cursor: pointer;
     font-size: 17px;
     padding: 14px 16px;
     width: 13%;
-}
+} */
 
 .tabright{
-    background-color: #AA1E1E;
+    
     color: #eaeaea;
     float: right;
     border: none;
-    outline: none;
+
     text-decoration: none;
     text-align: center;
     
     cursor: pointer;
-    font-size: 30px;
+    font-size: 5vh;
     padding: 17px 14px;
     width: 13%;
     height: 100%;
 }
 
-.tabaccount{
-    background-color: #AA1E1E;
+/* .tabaccount{
+    
     color: #eaeaea;
     float: right;
     border: none;
-    outline: none;
+
     cursor: pointer;
     text-align: center;
     font-size: 30px;
     padding: 14px 16px;
     width: 5%;
     margin-left: 50px;
-}
+} */
 
 @media screen and (max-width: 850px){
     .tabaccount, .tabright{
-        font-size: 8px;
+        font-size: 3vh;
         width: 17%;
         height: 100%;
     }
     .tabexpand{
-        font-size: 15px;
+        font-size: 3vh;
         width: 10%;
     }
 
     .searchbar{
         margin-left: 5%;
         width: 50%;
-        margin-top: 7px;
+        margin-top: 3.5px;
+        margin-bottom: 3.5px;
     }
     img{
         display: none;
@@ -142,10 +145,16 @@ input{
 
 @media screen and (max-width: 1350px) and (min-width: 851px) {
     .tabaccount, .tabright{
-        font-size: 25px;
+        font-size: 3.5vh;
     }
     .tabexpand{
-        font-size: 25px;
+        font-size: 3.5vh;
+    }
+    .searchbar{
+        margin: 5px;
+    }
+    img{
+        margin: 5px;
     }
 }
 
diff --git a/client/js/navbar.js b/client/js/navbar.js
index de196a8272b85988751b12b9d79d977488e0b2dd..b68f539cc95e06e5fbbf77b5d1a73a2721855b39 100644
--- a/client/js/navbar.js
+++ b/client/js/navbar.js
@@ -1,22 +1,24 @@
 addnavbar = () => {
     return document.getElementById("tabgroup").innerHTML =`
-        <a class="tabexpand" href="#">
-            <i class="fa-solid fa-bars"></i>
-        </a>
-        <img src="../image/logoregis.svg" alt="icon" width="10%" height="5%">
-        <div class="searchbar">
-            <input id="Searchinput" type="text" placeholder="Search..." value="" onkeypress="">
-            <button class="search" onclick="">
-                <i class="fa-solid fa-magnifying-glass"></i>
-            </button>
-        </div>
-        <a class="tabright" href="#">
-            <i class="fa-solid fa-cart-shopping"></i>
-            Cart
-        </a>
-        <a class="tabright" href="../pages/catalog.php">
-            <i class="fa-solid fa-clipboard-list"></i>
-            Catalog
-        </a>
+    <div class="navbar-container">
+    <a class="tabexpand" href="#">
+        <i class="fa-solid fa-bars"></i>
+    </a>
+    <img src="../image/logoregis.svg" alt="icon" width="10%" height="5%">
+    <div class="searchbar">
+        <input id="Searchinput" type="text" placeholder="Search..." value="" onkeypress="">
+        <button class="search" onclick="">
+            <i class="fa-solid fa-magnifying-glass"></i>
+        </button>
+    </div>
+    <a class="tabright" href="#">
+        <i class="fa-solid fa-cart-shopping"></i>
+        Cart
+    </a>
+    <a class="tabright" href="../pages/catalog.php">
+        <i class="fa-solid fa-clipboard-list"></i>
+        Catalog
+    </a>
+</div>
     `
 }
\ No newline at end of file
diff --git a/client/protoype/navbar.html b/client/protoype/navbar.html
new file mode 100644
index 0000000000000000000000000000000000000000..db0560a4481b1ab70694a296cd7a4b1f7970217a
--- /dev/null
+++ b/client/protoype/navbar.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial scale=1.0">
+        <link rel="stylesheet" href="../css/navbar.css">
+        <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
+        <!-- <script src="../js/navbar.js"></script> -->
+    </head>
+    <body>
+        <div class="navbar-container">
+            <a class="tabexpand" href="#">
+                <i class="fa-solid fa-bars"></i>
+            </a>
+            <img src="../image/logoregis.svg" alt="icon" width="10%" height="5%">
+            <div class="searchbar">
+                <input id="Searchinput" type="text" placeholder="Search..." value="" onkeypress="">
+                <button class="search" onclick="">
+                    <i class="fa-solid fa-magnifying-glass"></i>
+                </button>
+            </div>
+            <a class="tabright" href="#">
+                <i class="fa-solid fa-cart-shopping"></i>
+                Cart
+            </a>
+            <a class="tabright" href="../pages/catalog.php">
+                <i class="fa-solid fa-clipboard-list"></i>
+                Catalog
+            </a>
+        </div>
+    </body>
+</html>
\ No newline at end of file