diff --git a/client/css/cart.css b/client/css/cart.css
index 9fcbf560405d3023ce8b2b8c4dd9c150ff887070..fb1e4b53d146bae71a5d4760f992888df3b66426 100644
--- a/client/css/cart.css
+++ b/client/css/cart.css
@@ -20,9 +20,7 @@
 }
 
 .cart-group{
-    margin-left: 15%;
-    margin-right: 15%;
-    margin-top: 5%;
+    padding-top: 10%;
     display: block;
     /* background-color: red; */
 }
@@ -73,7 +71,7 @@
 #checkout-button {
     cursor: pointer;
     color: white;
-    background-color: #3c00a0;
+    background-color: rgb(137, 62, 137);
     min-width: 25%;
     height: 10vh;
     font-size: 20px;
diff --git a/client/css/catalog.css b/client/css/catalog.css
index aa0ff07d9378d4d7d146177186d5533027546599..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;
 }
 
@@ -68,15 +72,14 @@
     height: 35vh;
     background-color: #e9e9e9;
     border-radius: 10px;
-    border: ridge;
+    border: none;
     text-align: center;
     cursor: pointer;
 }
 
 .showItem img{
-    border: ridge;
     width: 90%;
-    height: auto;
+    height: 50%;
     margin-bottom: 5px;
     text-align: center;
 }
@@ -105,4 +108,9 @@
         width: 40%;
         height: 35%;
     }
+
+    .showItem p{
+        text-align: left;
+        margin: 5px;
+    }
 }
\ No newline at end of file
diff --git a/client/css/make-sale.css b/client/css/make-sale.css
index 003f1c8a5b9485a7a1c0e1a41cf8341f14429318..7e4762391ff881ad149f3c9d8151b3e84146c3c9 100644
--- a/client/css/make-sale.css
+++ b/client/css/make-sale.css
@@ -19,21 +19,18 @@
     background-size: cover;
     display: block;
     place-items: center;
+    display: block;
 }
 
 .saleform-group {
-    /* position: relative; */
-    min-width: 50%;
-    /* min-height: 67%; */
-    max-width: 67%;
-    margin-left: 15%;
-    margin-right: 15%;
-    margin-top: 5%;
-    /* border-style: ridge; */
-    display: block;
-    border-radius: 10px;
-    /* border-width: 10px; */
-    /* background-color: red; */
+    position: relative;
+    /* width: 31%;
+    height: 31%; */
+    margin-top: 5vh;
+    min-width: 300px;
+    flex-shrink: 0;
+    display: grid;
+    place-items: center;
 }
 
 .saleform-group h1 {
diff --git a/client/css/navbar.css b/client/css/navbar.css
index cdbc2e7be1e26b759c07f4c871c1e47c1073fb4d..3c539e2123325e0d2d7f08c18c87918828032130 100644
--- a/client/css/navbar.css
+++ b/client/css/navbar.css
@@ -2,13 +2,14 @@
     display: flex;
     justify-content: space-evenly;
     background-color: #AA1E1E;
-    border: none;
+    color: #eaeaea;
     outline: none;
     color: #eaeaea;
     /* float: left; */
     font-size: 17px;
     width: 100%;
     height: 8%;
+    position: relative;
 }
 
 img{
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/catalog.js b/client/js/catalog.js
index 1f1fccd959ab355e4c39d25325e8fa9ae153d8c0..97cfb10cb2100acad49b4ba9f53517d9f2d72876 100644
--- a/client/js/catalog.js
+++ b/client/js/catalog.js
@@ -79,7 +79,7 @@ function changePage(page){
     //XMLHttpRequest
     const formdata = new FormData();
     
-    var row = (page)*10; 
+    var row = (page-1)*10; 
     formdata.append('rows', row);
     formdata.append('search', document.getElementById("Searchinput").value);
     console.log(document.getElementById("Searchinput").value);
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/navbar.js b/client/js/navbar.js
index 2f6ce98160fb70cd0351bfe156f19bd2797cf915..25314cd2832e8983f4cd5b7760b35cfab203bb3a 100644
--- a/client/js/navbar.js
+++ b/client/js/navbar.js
@@ -1,24 +1,15 @@
+
 addnavbar = () => {
     return document.getElementById("tabgroup").innerHTML =`
-    <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>
+        <a id="tabexpand" class="tabexpand" href="javascript:openSidebar()" onclick="openSidebar()">
+            <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>
     `
 }
\ No newline at end of file
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/cart.html b/client/protoype/cart.html
new file mode 100644
index 0000000000000000000000000000000000000000..31fff5c543af234d45b7ac20bc043fd313f9de58
--- /dev/null
+++ b/client/protoype/cart.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial scale=1.0">
+        <title>Cart</title>
+        <link rel="stylesheet" href="../css/cart.css">
+        <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="container">
+            <div id="tabgroup">
+                <script>
+                    addnavbar();
+                </script>
+            </div>
+            <div class="cart-group">
+                <h1>
+                    Cart
+                </h1>
+                <div class="cart-list">
+                    <div class="item">
+                        <div class="item-picture-group">
+                            <image src="#" class="item-picture"></image>
+                        </div>
+                        <div class="item-text-fields">
+                            <label class="item-label">Name</label>
+                            <label class="item-label">Quantity</label>
+                            <label class="item-label">Price</label>
+                        </div>
+                    </div>
+                    <div class="item">
+                        <div class="item-picture-group">
+                            <image src="#" class="item-picture"></image>
+                        </div>
+                        <div class="item-text-fields">
+                            <label class="item-label">Name</label>
+                            <label class="item-label">Quantity</label>
+                            <label class="item-label">Price</label>
+                        </div>
+                    </div>
+                    <div class="item">
+                        <div class="item-picture-group">
+                            <image src="#" class="item-picture"></image>
+                        </div>
+                        <div class="item-text-fields">
+                            <label class="item-label">Name</label>
+                            <label class="item-label">Quantity</label>
+                            <label class="item-label">Price</label>
+                        </div>
+                    </div>
+                    <!-- contains item divs according to data -->
+                </div>
+                <div class="button-field">
+                    <button id="checkout-button">
+                    Checkout
+                    </button>
+                </div>
+            </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
diff --git a/server/controllers/catalog.php b/server/controllers/catalog.php
index 709371cf7dae57d692d8d228a64073e00d4dd716..de70248340e0c55c97591ab18cce572cbb3fd4ee 100644
--- a/server/controllers/catalog.php
+++ b/server/controllers/catalog.php
@@ -7,7 +7,14 @@
         
         $conn = connect_database();
 
-        $query = "SELECT * FROM `item` WHERE `name` LIKE '%$search%' ORDER BY if (SUBSTRING(name, 1, length('$search'))='$search', 0, 1), name LIMIT $page , 10";
+        $query = "SELECT *
+                 ,(CASE WHEN name LIKE '%$search%' THEN 1 ELSE 0 END) +
+                  (CASE WHEN `Seller_username` LIKE '%$search%' THEN 1 ELSE 0 END) AS priority
+                  FROM item
+                  WHERE name LIKE '%$search%'
+                  OR Seller_username LIKE '%$search%'
+                  ORDER BY priority DESC
+                  LIMIT $page, 10";
         $stmt = $conn->prepare($query);
 
         if (!$stmt){
@@ -33,7 +40,7 @@
         
         $conn = connect_database();
 
-        $query = "SELECT COUNT(item_id) FROM `item` WHERE name LIKE '%$search%'";
+        $query = "SELECT COUNT(item_id) FROM `item` WHERE name LIKE '%$search%' OR Seller_username LIKE '%$search%'";
         $stmt = $conn->prepare($query);
 
         if (!$stmt){
diff --git a/server/models/db.sql b/server/models/db.sql
index 3335e41a5f7f2a2bd5ff5ac7e8a6056864f3b074..ffa28e41a800ce3ae5f1e0661dea295db3fca95c 100644
--- a/server/models/db.sql
+++ b/server/models/db.sql
@@ -42,7 +42,6 @@ CREATE TABLE IF NOT EXISTS `saranghaengbok_db`.`item` (
     ON DELETE CASCADE
     ON UPDATE CASCADE
 );
-CREATE INDEX `fk_item_Seller1_idx` ON `saranghaengbok_db`.`item` (`Seller_username` ASC);
 
 -- -----------------------------------------------------
 -- Table `saranghaengbok_db`.`cart`
@@ -50,6 +49,7 @@ CREATE INDEX `fk_item_Seller1_idx` ON `saranghaengbok_db`.`item` (`Seller_userna
 CREATE TABLE IF NOT EXISTS `saranghaengbok_db`.`cart` (
   `item_id` INT NOT NULL,
   `cart_username` VARCHAR(45) NOT NULL,
+  `item_quantity` INT NOT NULL,
   PRIMARY KEY(`item_id`, `cart_username`),
   CONSTRAINT `fk_cart_username`
     FOREIGN KEY (`cart_username`)
@@ -62,6 +62,30 @@ CREATE TABLE IF NOT EXISTS `saranghaengbok_db`.`cart` (
     ON DELETE CASCADE
 );
 
+-- -----------------------------------------------------
+-- Table `saranghaengbok_db`.`transaction`
+-- -----------------------------------------------------
+CREATE TABLE IF NOT EXISTS `saranghaengbok_db`.`transaction` (
+  `item_id` INT NOT NULL,
+  `buyer_username` VARCHAR(45) NOT NULL,
+  `seller_username` VARCHAR(45) NOT NULL,
+  `item_quantity` INT NOT NULL,
+  PRIMARY KEY(`item_id`, `buyer_username`, `seller_username`),
+  CONSTRAINT `fk_item_id`
+    FOREIGN KEY (`item_id`)
+    REFERENCES `saranghaengbok_db`.`item`(`item_id`)
+    ON UPDATE NO ACTION
+    ON DELETE NO ACTION,
+  CONSTRAINT `fk_buyer_username`
+    FOREIGN KEY (`buyer_username`)
+    REFERENCES `saranghaengbok_db`.`user`(`username`)
+    ON UPDATE CASCADE,
+  CONSTRAINT `fk_seller_username`
+    FOREIGN KEY (`seller_username`)
+    REFERENCES `saranghaengbok_db`.`user`(`username`)
+    ON UPDATE CASCADE
+);
+
 
 CREATE user `saranghaengbok_db_admin` IDENTIFIED BY 'BOOMbitchgetouttheway';