diff --git a/footer.html b/footer.html
new file mode 100644
index 0000000..de35075
--- /dev/null
+++ b/footer.html
@@ -0,0 +1,34 @@
+<footer class="sectionMain">
+    <div class="w3-third">
+      <h3>FOOTER</h3>
+      <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+      <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
+    </div>
+  
+    <div class="w3-third">
+      <h3>BLOG POSTS</h3>
+      <ul class="w3-ul w3-hoverable">
+        <li class="w3-padding-16">
+          <img src="/w3images/workshop.jpg" class="w3-left w3-margin-right" style="width:50px">
+          <span class="w3-large">Lorem</span><br>
+          <span>Sed mattis nunc</span>
+        </li>
+        <li class="w3-padding-16">
+          <img src="/w3images/gondol.jpg" class="w3-left w3-margin-right" style="width:50px">
+          <span class="w3-large">Ipsum</span><br>
+          <span>Praes tinci sed</span>
+        </li> 
+      </ul>
+    </div>
+
+    <div class="w3-third w3-serif">
+      <h3>POPULAR TAGS</h3>
+      <p>
+        <span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">New York</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dinner</span>
+        <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Salmon</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">France</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Drinks</span>
+        <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Ideas</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Flavors</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Cuisine</span>
+        <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Chicken</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dressing</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fried</span>
+        <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fish</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Duck</span>
+      </p>
+    </div>
+  </footer>
\ No newline at end of file
diff --git a/index.html b/index.html
index d489c60..9c16589 100644
--- a/index.html
+++ b/index.html
@@ -204,7 +204,7 @@
       <!-- Modal -->
       
       <!-- LogIn Modal -->
-      <form action="shopping/shopping.php" method="post">
+      <form action="php/login.php" method="post">
         <div class="modal fade" id="logInModal" tabindex="-1" aria-labelledby="logInLabel" aria-hidden="true">
           <div class="modal-dialog modal-dialog-centered">
 
@@ -226,11 +226,11 @@
                             <div class="modalFormWrapper">
                                 <div class="mb-3">
                                     <label for="forUsername" class="form-label">Your Username</label>
-                                    <input type="text" class="form-control" id="formUsername" placeholder="Username">
+                                    <input type="text" name="username" class="form-control" id="formUsername" placeholder="Username">
                                 </div>
                                 <div class="mb-3">
                                     <label for="forPassword" class="form-label">Your Password</label>
-                                    <input type="password" class="form-control" id="formPassword" placeholder="Password">
+                                    <input type="password" name="password" class="form-control" id="formPassword" placeholder="Password">
                                 </div>
                             </div>
                         </div>
diff --git a/php/connection.php b/php/connection.php
index fecf32d..fbacead 100644
--- a/php/connection.php
+++ b/php/connection.php
@@ -1,9 +1,9 @@
 <?php
 function connectMysql()
 {
-    $servername = "localhost";
-    $username = "root"; // your username
-    $password = "root"; //your password
+    $servername = "testhost";
+    $username = "myadmin"; // your username
+    $password = "myadmin"; //your password
     $database = "cpsc2030_project";
     $conn = new mysqli($servername, $username, $password, $database);
 // Check connection
@@ -49,4 +49,5 @@ function getProducts($P_ID,$conn){
 
 
 
+
 ?>
\ No newline at end of file
diff --git a/php/login.php b/php/login.php
new file mode 100644
index 0000000..ad82d20
--- /dev/null
+++ b/php/login.php
@@ -0,0 +1,73 @@
+<?php
+include 'connection.php';
+$conn = connectMysql();
+session_start();
+$userName = $_POST['username'];
+$passWord_user = $_POST['password'];
+
+function query_username($conn, $uid) {
+    $sql = "Select * From account Where C_ID= ? ";
+    $stmt = mysqli_stmt_init($conn);
+    if (!mysqli_stmt_prepare($stmt, $sql)) {
+        return null;
+    }
+
+    mysqli_stmt_bind_param($stmt, "s", $uid);
+    mysqli_stmt_execute($stmt);
+
+    $resultData = mysqli_stmt_get_result($stmt);
+    mysqli_stmt_close($stmt);
+    return $resultData;
+}
+
+$result = query_username($conn, $userName);
+
+
+if ($result->num_rows > 0) {
+    $row = $result->fetch_assoc();
+    $_SESSION['username'] = $userName;
+
+    $passWord_hashed = $row["C_Password"];
+    $passWord_correct = password_verify($passWord_user, $passWord_hashed);
+    if ($passWord_correct === false) {
+        echo "<script> alert('Wrong password!');location.href='../index.html'; </script>";
+        exit();
+    } else {
+
+        // if (isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) { 
+     
+        //     $secretKey   = "6LehX_4aAAAAANIoyIRIYn8QzZtwtE7ytaQ1hgmZ";
+        //     $responseKey = $_POST['g-recaptcha-response'];
+        //     $userIP      = $_SERVER['REMOTE_ADDR'];
+        //     $url         = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$userIP";
+        //     $response    = file_get_contents($url);
+        //     $response    = json_decode($response);
+         
+        //     if($response->success){
+        //         echo "Verification success.";
+        //         header("Location: shopping.php");
+        //     } else {
+        //         echo "<script> alert('reCAPTHCA verification failed, please try again.');location.href='login.php'; </script>";
+        //         return;
+        //     }
+         
+        // } else {
+        //     echo "<script> alert('Please click reCAPTHCA to verify.');location.href='login.php'; </script>";
+        //     return;
+        // }
+
+        // TODO: delete later
+        echo "Verification success.";
+        header("Location: ../shopping/shopping.php");
+    }
+
+} else {
+
+		// echo "<script> alert('Username dosen't exist.Please sign up first.');location.href='../index.html'; </script>";
+        header("Location: ../index.html");
+        exit();
+
+}
+
+$conn->close();
+?>
\ No newline at end of file
diff --git a/php/password.php b/php/password.php
deleted file mode 100644
index e69de29..0000000
diff --git a/php/register.php b/php/register.php
new file mode 100644
index 0000000..d90f014
--- /dev/null
+++ b/php/register.php
@@ -0,0 +1,45 @@
+<?php
+include 'connection.php';
+$conn = connectMysql();
+$userName = $_POST['username'];
+$passWord = $_POST['password'];
+
+
+$query = "INSERT INTO account(C_ID,C_Password) VALUES('$userName','$passWord')";
+// if (isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) { 
+     
+//         $secretKey   = "6LehX_4aAAAAANIoyIRIYn8QzZtwtE7ytaQ1hgmZ";
+//         $responseKey = $_POST['g-recaptcha-response'];
+//         $userIP      = $_SERVER['REMOTE_ADDR'];
+//         $url         = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$userIP";
+//         $response    = file_get_contents($url);
+//         $response    = json_decode($response);
+     
+//         if($response->success){
+//             echo "Verification success.";
+// 		    if ($conn->query($query) === TRUE) {
+//                 echo "<script> alert('New account created successfully!');location.href='register.php'; </script>"; 
+//             } else {
+
+//                 echo "<script> alert('Username already exists.');location.href='register.php'; </script>"; 
+//             }
+//         } else {
+//             echo "<script> alert('reCAPTHCA verification failed, please try again.');location.href='register.php'; </script>";
+//             return;
+//         }
+     
+// } else {
+//     echo "<script> alert('Please click reCAPTHCA to verify.');location.href='register.php'; </script>";
+//     return;
+// }
+
+// TODO delete later
+if ($conn->query($query) === TRUE) {
+    echo "<script> alert('New account created successfully!');location.href='register.php'; </script>"; 
+} else {
+
+    echo "<script> alert('Username already exists.');location.href='register.php'; </script>"; 
+}
+
+$conn->close();
+?>
\ No newline at end of file
diff --git a/shopping/addToCart.html b/shopping/addToCart.html
deleted file mode 100644
index 052baf3..0000000
--- a/shopping/addToCart.html
+++ /dev/null
@@ -1,90 +0,0 @@
-<!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">
-
-    <!-- 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/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"
-      rel="stylesheet"
-      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
-      crossorigin="anonymous"
-    />
-    <title>New Moon Dessert Bar</title>
-  </head>
-
-<body class="shopping_body">
-
-  <div class="container-fluid">
-
-    <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 = getAllProducts($conn); 
-            foreach ($products as $product): 
-        ?>
-        <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>
-      
-
-
-    </div>
-  </div>
-
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/shopping/addingToCart.php b/shopping/addingToCart.php
new file mode 100644
index 0000000..eb3dccd
--- /dev/null
+++ b/shopping/addingToCart.php
@@ -0,0 +1,36 @@
+<?php 
+
+include '../php/connection.php';
+$conn = connectMysql();
+session_start();
+$product_id = $_GET['product_id'];
+$product_name = $_GET['product_name'];
+$product_price = $_GET['product_price'];
+$quantity = (int)$_GET['quantity'];
+
+
+$mycar = $_SESSION['mycar'];
+
+
+if(array_key_exists($product_id, $mycar)){
+	$mycar[$product_id]['buy_num'] += $quantity;
+	$mycar[$product_id]['buy_price'] += $product_price*$quantity;
+
+} else {
+	$mycar[$product_id] = array('buy_id'=>$product_id, 'buy_name'=>$product_name, 'buy_price'=>0, 'buy_num'=>$quantity);
+	$mycar[$product_id]['buy_price'] += $product_price*$quantity;
+}
+
+
+
+
+
+
+if($_GET[clear]=="yes"){
+	$_SESSION['mycar']="";
+}
+
+$_SESSION['mycar'] = $mycar;
+
+header('location: cart.php');
+?>
diff --git a/shopping/cart.php b/shopping/cart.php
new file mode 100644
index 0000000..6df3cb2
--- /dev/null
+++ b/shopping/cart.php
@@ -0,0 +1,110 @@
+<!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">
+
+    <!-- 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/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"
+      rel="stylesheet"
+      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
+      crossorigin="anonymous"
+    />
+    <title>New Moon Dessert Bar</title>
+  </head>
+
+<body class="shopping_body">
+
+    <div class="container-fluid">
+
+        <div class="sectionShopping">
+            <?php include 'shopping_headerNav.php' ?>
+            
+
+            <div class="row">
+                <div class="col-sm-12">
+                    <h1> Shopping Cart </h1>
+                    <p>| ·  · |</p>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-sm-12">
+                    <form action="shopping.php" method="get">
+                        <table style="margin:auto; border: 2px solid black;">
+                            <thead>
+                                <tr style="margin:auto; border: 2px solid black;">
+                                    <td>Product</td>
+
+                                    <td>Quantity</td>
+
+                                    <td>Price</td>
+
+                                </tr>
+                            </thead>
+                            <tbody>
+
+
+                            <?php $totalprice = 0;?>
+
+                                <?php foreach ($_SESSION['mycar'] as $product): ?>
+                                <tr>
+                                    <td>
+                                        <?=$product['buy_name']?>
+                                    </td>
+
+                                    <td class="quantity">
+                                        <?=$product['buy_num']?>
+
+                                    </td>
+                                    
+                                    <td>
+                                        &dollar;<?=$product['buy_price']?>
+                                    </td>
+
+                                    <td>
+                                        <a href="cart_delProduct.php?id=<?php echo $product['buy_id'];?>">Delete</a></td>
+                                    </td>
+
+                                </tr>
+                                <?php $totalprice += $product['buy_price']?>
+                                <?php endforeach; ?>
+                            </tbody>
+                        </table>
+
+                        <br>
+                        <div class="subtotal">
+                            <span class="text" style="font-weight: 1em; font-family: cursive;">Subtotal: &dollar;<span><?= $totalprice ?></span></span>
+                        </div>
+
+                        <br>
+                        <div class="buttons">
+                            <input type="submit" value="Go Back To shopping!" name="placeorder">
+                        </div>
+                        
+                        <?php $products = getProducts($_SERVER["QUERY_STRING"],$conn); ?>
+                    </form>
+                </div>
+            </div>
+            
+        </div>
+
+    <?php include '../footer.html' ?>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/shopping/productDetails.php b/shopping/productDetails.php
new file mode 100644
index 0000000..1aaf22e
--- /dev/null
+++ b/shopping/productDetails.php
@@ -0,0 +1,75 @@
+<!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">
+
+    <!-- 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/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"
+      rel="stylesheet"
+      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
+      crossorigin="anonymous"
+    />
+    <title>New Moon Dessert Bar</title>
+  </head>
+
+<body class="shopping_body">
+
+  <div class="container-fluid">
+
+    <div class="sectionShopping">
+      <?php include 'shopping_headerNav.php' ?>
+
+      <div class="row">
+        <?php 
+          $products = getProducts($_SERVER["QUERY_STRING"],$conn); 
+          foreach ($products as $product): 
+        ?>
+        <div class="col-sm-12">
+          <section class="shopping_productDetails">
+            <h1><?=$product['Product_Name']?></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; "></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>
+        </div>
+        <?php             
+            endforeach; ?>
+      </div>
+      
+
+
+    </div>
+  </div>
+
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/shopping/shopping.php b/shopping/shopping.php
index 7e67a0f..62666b5 100644
--- a/shopping/shopping.php
+++ b/shopping/shopping.php
@@ -32,10 +32,10 @@
   <div class="container-fluid">
 
     <div class="sectionShopping">
+      <?php include 'shopping_headerNav.php' ?>
+      
+
       <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>
@@ -48,14 +48,44 @@
             foreach ($products as $product): 
         ?>
         <div class="col-sm-12 col-lg-6 col-xl-3">
-          <a class="my-img-class" href="addToCart.php?<?=$product['Product_ID']?>">
-            <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>
-          </a>
+          <div class="my-img-class">
+            <a href="productDetails.php?<?=$product['Product_ID']?>">
+              <img class="imgItem" src="../img/<?= $product['Product_Img']; ?>" alt="<?=$product['Product_Img']?>">
+            </a>
+              <p class="shopping_productName"><?= $product['Product_Name']; ?></p> 
+              <p class="shopping_productPrice">&dollar;<?= $product['Product_Price']; ?></p>
+            
+          </div>
         </div>
         <?php endforeach; ?> 
       </div>
+
+      <div class="row">
+        <nav class="shopping_pageNav" 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="#">...</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>
     </div>
 
   </div>
diff --git a/shopping/shopping_headerNav.php b/shopping/shopping_headerNav.php
new file mode 100644
index 0000000..30d7d38
--- /dev/null
+++ b/shopping/shopping_headerNav.php
@@ -0,0 +1,5 @@
+<div class="shopping_headerNav">
+    <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>
\ No newline at end of file
diff --git a/style/modules/_sectionShopping.sass b/style/modules/_sectionShopping.sass
index 97a9d35..80bc147 100644
--- a/style/modules/_sectionShopping.sass
+++ b/style/modules/_sectionShopping.sass
@@ -8,16 +8,15 @@
         border: 1px solid grey
     img
         width: 100%
+        object-fit: cover
     h1
         margin-top: 5%
         text-align: center
-        color: OliveDrab
+        color: DarkOliveGreen
+        text-shadow: 1px 1.2px 2px grey
     h3
         text-align: center
         color: OliveDrab
-    p
-        text-align: center
-    // #shopping_headerImg 
-    //     background-image: url("../img/headerImg.jpg")
-
+    .shopping_productPrice
+        color: OliveDrab
     
\ No newline at end of file
diff --git a/style/style.css b/style/style.css
index 3f24e87..94c2106 100644
--- a/style/style.css
+++ b/style/style.css
@@ -305,12 +305,15 @@ video {
 
 .sectionShopping img {
   width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 .sectionShopping h1 {
   margin-top: 5%;
   text-align: center;
-  color: OliveDrab;
+  color: DarkOliveGreen;
+  text-shadow: 1px 1.2px 2px grey;
 }
 
 .sectionShopping h3 {
@@ -318,7 +321,7 @@ video {
   color: OliveDrab;
 }
 
-.sectionShopping p {
-  text-align: center;
+.sectionShopping .shopping_productPrice {
+  color: OliveDrab;
 }
 /*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/style/style.css.map b/style/style.css.map
index 19aeca4..e787a5e 100644
--- a/style/style.css.map
+++ b/style/style.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "style.sass",
         "_variables.sass",