diff --git a/views/layouts/footer.ejs b/views/layouts/footer.ejs
index 9863429..ddb2cce 100644
--- a/views/layouts/footer.ejs
+++ b/views/layouts/footer.ejs
@@ -5,8 +5,7 @@
 </script>
 
 <!-- JQUERY -->
-<script crossorigin="anonymous" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
-    src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>
 
 <!-- Bootstrap -->
 <script crossorigin="anonymous" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
@@ -31,6 +30,8 @@
     <script type="text/javascript" src="/js/index.js"></script>
 <% } else if(state == "bag") { %>
     <script type="text/javascript" src="/js/bag.js"></script>
+<% } else if(state == "product") { %>
+    <script type="text/javascript" src="/js/bag.js"></script>
 <% } else if(state == "login") { %>
     <script type="text/javascript" src="/js/login.js"></script>
 <% } else if(state == "change-password") { %>
diff --git a/views/pages/bag.ejs b/views/pages/bag.ejs
index 56ca986..010aaad 100644
--- a/views/pages/bag.ejs
+++ b/views/pages/bag.ejs
@@ -8,10 +8,7 @@
     <br>
     <div class="bag">
         <div class="row">
-            <div class="col-lg-8">
-                <%- include('../layouts/bagcard.ejs') %>
-                <%- include('../layouts/bagcard.ejs') %>
-                <%- include('../layouts/bagcard.ejs') %>
+            <div class="col-lg-8" id="view-bag">
             </div>
 
             <div class="col-lg-4">
@@ -26,7 +23,7 @@
                             </div>
                             <div class="row justify-content-between">
                                 <p>Estimate</p>
-                                <p>1.999.999,00</p>
+                                <p id='total-price'>-</p>
                             </div>
                             <br style="display: block;content: ' '; margin: 1vw 0; line-height: 1vw;">
                             <a class="btn btn-primary btn-checkout" type="submit" href="checkout">Checkout</a>
@@ -37,6 +34,7 @@
         </div>
     </div>
     </div>
+    
     <%- include('../layouts/footer.ejs', {state: 'bag'}); %>
 </body>
 </html>
\ No newline at end of file
diff --git a/views/pages/product.ejs b/views/pages/product.ejs
index ab6b4f9..9cddb81 100644
--- a/views/pages/product.ejs
+++ b/views/pages/product.ejs
@@ -26,11 +26,9 @@
                     <p>Size  : <%= data[0].SIZE %></p>
                 </div>
                 <div class="sizeSepatu">
-                    <form>
-                        <div style="display: flex; color: black;">
-                            <button class="button button-bag" id="myBtn" type="submit"><a href="successadd" class="none">Add to Bag</a></button>
-                        </div>
-                    </form>
+                    <div style="display: flex; color: black;">
+                        <button class="button button-bag" id="myBtn" onclick="addToBag('<%= data[0].ID %>')">Add to Bag</button>
+                    </div>
                 </div>
                 <br>
                 <br>