diff --git a/client/protoype/cart.html b/client/protoype/cart.html
new file mode 100644
index 0000000000000000000000000000000000000000..8d1ff66d76fcf3d3198977c70a9102d9b2f0aff5
--- /dev/null
+++ b/client/protoype/cart.html
@@ -0,0 +1,61 @@
+<!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>
+        <script>
+            addnavbar();
+        </script>
+        <div class="container">
+            <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