diff --git a/client/css/cart.css b/client/css/cart.css
new file mode 100644
index 0000000000000000000000000000000000000000..fb1e4b53d146bae71a5d4760f992888df3b66426
--- /dev/null
+++ b/client/css/cart.css
@@ -0,0 +1,88 @@
+@import url('https://fonts.googleapis.com/css?family=Inter');
+
+*{
+    margin: 0;
+    padding: 0;
+    font-family: Inter;
+    box-sizing: border-box;
+    transition: 0.5;
+}
+
+.container{
+    position: relative;
+    max-width: 100%;
+    height: 100vh;
+    mix-blend-mode: multiply;
+    background-position: center;
+    background-size: cover;
+    display: block;
+    place-items: center;
+}
+
+.cart-group{
+    padding-top: 10%;
+    display: block;
+    /* background-color: red; */
+}
+
+.cart-group h1{
+    margin-bottom: 10px;
+    margin-left: 5%;
+    font-size: 30px;
+}
+
+.cart-list{
+    /* border-style: solid; */
+    border-radius: 10px;
+    margin-left: 5%;
+    margin-right: 5%;
+    display: block;
+}
+.item{
+    margin: 15px;
+    border-radius: 10px;
+    background-color: #eaeaea;
+    padding: 1%;
+    display: flex;
+}
+.item-picture-group{
+    display:inline-block;
+    min-width: 20%;
+    min-height: 15vw;
+    background-color: azure;
+    border-radius: 10px;
+    margin: 10px;
+}
+.item-text-fields{
+    display:inline-block;
+}
+/* .item-picture{} */
+.item-label{
+    display: block;
+    margin: 10px;
+}
+
+.button-field {
+    display:flex;
+    padding: 10px;
+    justify-content: right;
+}
+
+#checkout-button {
+    cursor: pointer;
+    color: white;
+    background-color: rgb(137, 62, 137);
+    min-width: 25%;
+    height: 10vh;
+    font-size: 20px;
+    border-radius : 10px;
+    border-color: transparent;
+    margin-right: 15px;
+    margin-bottom: 15px;
+}
+
+@media screen and ((max-width: 400px) or (max-height: 750px)) {
+    .cart-group{
+        height: 750px;
+    }
+}
\ No newline at end of file
diff --git a/client/protoype/cart.html b/client/protoype/cart.html
new file mode 100644
index 0000000000000000000000000000000000000000..8cbe2717b8d0c81bc849514821ce1d867900a38c
--- /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