diff --git a/shopping/addToCart.html b/shopping/addToCart.html
index f140583..052baf3 100644
--- a/shopping/addToCart.html
+++ b/shopping/addToCart.html
@@ -1,16 +1,22 @@
-<!DOCTYPE html>
-<html class="no-js" lang="zxx">
-
-
-<head>
+<!doctype html>
+<html lang="en">
+  <?php
+  require_once '../php/connection.php';
+  $conn = connectMysql();
+  session_start();
+  ?>
+  <head>
+    <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-
-    <title>New Moon Dessert Bar</title>
+    <!-- Bootstrap CSS -->
+    <link href="../bootstrap-5.0.1-dist/css/bootstrap-grid.min.css" rel="stylesheet">
+    <link href="../bootstrap-5.0.1-dist/css/bootstrap.min.css" rel="stylesheet">
 
     <!--=== Main Style CSS ===-->
-    <link href="style.css" rel="stylesheet">
+    <link href="../style/style.css" rel="stylesheet">
+
     <!-- Font Awesome styles CDN Link -->
     <link
       href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -18,49 +24,67 @@
       integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
       crossorigin="anonymous"
     />
-</head>
+    <title>New Moon Dessert Bar</title>
+  </head>
 
 <body class="shopping_body">
 
+  <div class="container-fluid">
 
-    <div id="wrapper">
-
+    <div class="sectionMenu" id="index-sectionMenu">
+      <div class="row">
+        <div class="col-sm-12">
+          <h1> Shopping </h1>
+          <p>| · Click on the picture to add to the cart · |</p>
+        </div>
+      </div>
+      
+      <div class="row">
         <?php 
-            $products = getProducts($_SERVER["QUERY_STRING"],$conn); 
+            $products = getAllProducts($conn); 
             foreach ($products as $product): 
         ?>
-
-        <section class="shopping_cart">
-            <h1>Shopping Cart</h1>
-            <form action="addingToCart.php" method="get">
-
-                <img src="img/<?= $product['Product_Img'];?>" style="width: 300px; height: 100%; padding:10px; border: 1px solid black;">
-                <h2 style="font-size: 40px;text-transform: uppercase; "><?=$product['Product_Name']?></h2>
-                <h2>Price: &dollar;<?=$product['Product_Price']?></h3>
-
-                <h3>Quantity: <input type="number" name="quantity" value="1" min="1" max="20" placeholder="Quantity" required>
-
-                <input type="submit" value="Add To Cart"></h3>
-
-                <input type="hidden" name="product_id" value="<?=$product['Product_ID']?>">
-                <input type="hidden" name="product_name" value="<?=$product['Product_Name']?>">
-                <input type="hidden" name="product_price" value="<?=$product['Product_Price']?>">
-
-            </form>
-        </section>
-
-        <?php             
-            endforeach; ?>
+        <div class="col-sm-12 col-lg-6 col-xl-3">
+          <div class="my-img-class">
+            <img class="imgItem" src="../img/<?= $product['Product_Name']; ?>.jpg" alt="<?=$product['Product_Name']?>">
+            <p><?= $product['Product_Name']; ?></p> 
+            <p class="price">&dollar;<?= $product['Product_Price']; ?></p>
+          </div>
+        </div>
+        <?php endforeach; ?> 
+        <nav aria-label="Page navigation">
+            <ul class="pagination justify-content-center">
+                <li class="page-item">
+                    <a class="page-link" href="#" aria-label="Previous">
+                        <span aria-hidden="true">&laquo;</span>
+                    </a>
+                </li>
+                <li class="page-item">
+                  <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
+                </li>
+                <li class="page-item"><a class="page-link" href="#">1</a></li>
+                <li class="page-item"><a class="page-link" href="#">2</a></li>
+                <li class="page-item"><a class="page-link" href="#">3</a></li>
+                <li class="page-item">
+                  <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Next</a>
+                </li>
+                <li class="page-item">
+                    <a class="page-link" href="#" aria-label="Next">
+                      <span aria-hidden="true">&raquo;</span>
+                    </a>
+                </li>
+                </li>
+            </ul>
+        </nav>
+      </div>
       
-        <?php 
-            
-            
-        ?>
-    </div>
 
-<?php include 'footer.php' ?>
+
+    </div>
+  </div>
+
 
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/shopping/shopping.php b/shopping/shopping.php
index 2ec1b4b..7e67a0f 100644
--- a/shopping/shopping.php
+++ b/shopping/shopping.php
@@ -33,6 +33,9 @@
 
     <div class="sectionShopping">
       <div class="row">
+        <div class="col-xl-12" id="shopping_headerImg">
+          <img class="rounded mx-auto d-block" style="height: 100px; background-color: rgba(255,0,0,0.1);" src="../img/headerImg.jpg">
+        </div>
         <div class="col-sm-12">
           <h1> Shopping </h1>
           <p>| · Click on the picture to add to the cart · |</p>
diff --git a/style/modules/_sectionShopping.sass b/style/modules/_sectionShopping.sass
index b5690e5..97a9d35 100644
--- a/style/modules/_sectionShopping.sass
+++ b/style/modules/_sectionShopping.sass
@@ -17,5 +17,7 @@
         color: OliveDrab
     p
         text-align: center
+    // #shopping_headerImg 
+    //     background-image: url("../img/headerImg.jpg")
 
     
\ No newline at end of file
