diff --git a/client/css/make-sale.css b/client/css/make-sale.css
index 763a29f2c17649e8fb7a7d72f190bb3f812ac3fd..003f1c8a5b9485a7a1c0e1a41cf8341f14429318 100644
--- a/client/css/make-sale.css
+++ b/client/css/make-sale.css
@@ -44,9 +44,10 @@
 }
 
 
-form p {
-    text-align : center;
-    font-size : 20px;
+#price-criteria, #quantity-criteria {
+    text-align : left;
+    font-size : medium;
+    color: red;
     /* color : #ffffffab; */
 }
 
diff --git a/client/js/make-sale.js b/client/js/make-sale.js
new file mode 100644
index 0000000000000000000000000000000000000000..a1a2af5ac5c7541d8d85a25b5578649d0e4a744a
--- /dev/null
+++ b/client/js/make-sale.js
@@ -0,0 +1,38 @@
+function checkValid(field, criteria, p_affected, response_if_invalid){
+    if (criteria){
+        //valid
+        resetFieldStyle(field, p_affected);
+    } else {
+        //invalid
+        invalidStyle(field, response_if_invalid, p_affected);
+    }
+}
+
+function checkNumeric(field, field_input, p_affected) {
+    checkValid(field, (/^\d+$/.test(field_input) || field_input==""), p_affected, "please input numerical value");
+}
+
+function checkNumericPrice() {
+    checkNumeric(
+        document.getElementById("product_price-field"),
+        document.getElementById("product_price").value,
+        document.getElementById("price-criteria")
+    )
+}
+function checkNumericQuantity() {
+    checkNumeric(
+        document.getElementById("product_quantity-field"),
+        document.getElementById("product_quantity").value,
+        document.getElementById("quantity-criteria")
+    )
+}
+
+function invalidStyle(param_field, reason, criteria_p) {
+    param_field.style.borderColor = "red";
+    criteria_p.textContent = reason;
+}
+
+function resetFieldStyle(param_field, criteria_p) {
+    param_field.style.borderColor = "black";
+    criteria_p.textContent = ' ';
+}
\ No newline at end of file
diff --git a/client/pages/account-page.php b/client/pages/account-page.php
index 51c20432f030380526e6a0c14e77889c4aa8ae9f..960a53c80da194ed075eec56244e654eba08d423 100644
--- a/client/pages/account-page.php
+++ b/client/pages/account-page.php
@@ -1,13 +1,7 @@
-<?php session_start();
-if (!isset($_SESSION['username']) or !isset($_SESSION['email'])) {
-    echo '<script type = "text/javascript">  
-    function loggedout_catch() {  
-       alert("You are logged in, please logout first if you want to login again");
-       location.href = "../pages/login-page.php"
-    }  
-    loggedout_catch();
-   </script>';
-}?>
+<?php 
+    session_start();
+    require_once "../../server/controllers/loggedout_catch.php";
+?>
 <!DOCTYPE html>
 <html>
     <head>
diff --git a/client/protoype/cart.html b/client/pages/cart.php
similarity index 91%
rename from client/protoype/cart.html
rename to client/pages/cart.php
index 31fff5c543af234d45b7ac20bc043fd313f9de58..7da1a81e02dff7f19cbb763880da71d71bb2a03f 100644
--- a/client/protoype/cart.html
+++ b/client/pages/cart.php
@@ -1,3 +1,7 @@
+<?php session_start();
+    require_once "../../server/controllers/loggedout_catch.php";
+    loggedout_catch();
+?>
 <!DOCTYPE html>
 <html>
     <head>
@@ -7,6 +11,7 @@
         <link rel="stylesheet" href="../css/navbar.css">
         <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
         <script src="../js/navbar.js"></script>
+        <script src="../js/cart.js"></script>
     </head>
     <body>
         <div class="container">
@@ -53,7 +58,7 @@
                     <!-- contains item divs according to data -->
                 </div>
                 <div class="button-field">
-                    <button id="checkout-button">
+                    <button id="checkout-button" onclick="submitCheckout()">
                     Checkout
                     </button>
                 </div>
diff --git a/client/pages/make-sale.php b/client/pages/make-sale.php
index edd7d13354d8604c02d7a85751c4924a0341e73c..dcd3c439fa9b0cca3f8f611f400038627385bbf3 100644
--- a/client/pages/make-sale.php
+++ b/client/pages/make-sale.php
@@ -1,3 +1,6 @@
+<?php session_start();
+    require_once "../../server/controllers/loggedout_catch.php";
+?>
 <!DOCTYPE html>
 <html>
     <head>
@@ -7,6 +10,7 @@
         <link rel="stylesheet" href="../css/make-sale.css">
         <script src="../js/navbar.js"></script>
         <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
+        <script src="../js/make-sale.js"></script>
     </head>
     
     <body>
@@ -28,11 +32,13 @@
                             <div class="input-field" id="product_description-field">
                                 <input type="text" id="product_description" placeholder="Product Description">
                             </div>
-                            <div class="input-field">
-                                <input type="text" id="product_price" placeholder="Price">
+                            <div class="input-field" id="product_price-field">
+                                <input type="text" id="product_price" placeholder="Price" oninput="checkNumericPrice()">
+                                <p id="price-criteria"> </p>
                             </div>
-                            <div class="input-field">
-                                <input type="text" id="product_qty" placeholder="Quantity">
+                            <div class="input-field" id="product_quantity-field">
+                                <input type="text" id="product_qty" placeholder="Quantity" oninput="checkNumericQuantity()">
+                                <p id="quantity-criteria"> </p>
                             </div>
                         </div>
                         
diff --git a/server/controllers/loggedout_catch.php b/server/controllers/loggedout_catch.php
new file mode 100644
index 0000000000000000000000000000000000000000..ac314e54a3895ad4b098097d2c33b3a4c5b15875
--- /dev/null
+++ b/server/controllers/loggedout_catch.php
@@ -0,0 +1,11 @@
+<?php
+if (!isset($_SESSION['username']) or !isset($_SESSION['email'])) {
+    echo '<script type = "text/javascript">  
+    function loggedout_catch() {  
+       alert("You are logged out, please login first");
+       location.href = "../pages/login-page.php"
+    }  
+    loggedout_catch();
+   </script>';
+}
+?>
\ No newline at end of file