diff --git a/Dockerfile b/Dockerfile
index c761d99..09458a8 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -9,4 +9,5 @@ RUN dotnet publish -c Release -o out
 FROM mcr.microsoft.com/dotnet/aspnet:6.0
 WORKDIR /ausemartweb
 COPY --from=build-stage /ausemartweb/out .
+EXPOSE 80
 ENTRYPOINT ["dotnet", "ausemartweb.dll"]
\ No newline at end of file
diff --git a/Pages/App/Index.cshtml b/Pages/App/Index.cshtml
index e60771b..9013f49 100644
--- a/Pages/App/Index.cshtml
+++ b/Pages/App/Index.cshtml
@@ -1,9 +1,218 @@
 @page
 @model ausemartweb.Pages.App.IndexModel
 @{
-    ViewData["Title"] = "Home page";
+    ViewData["Title"] = "Mobile App";
 }
 
-<div class="text-center">
-    <h1 class="display-4">Welcome to the App!</h1>
+<!-- App Hero Section -->
+<div class="hero-section">
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col-lg-6 fade-in">
+                <h1 class="display-4">Get the Aus-E-Mart App</h1>
+                <p class="lead mb-4">Shop Australian products on the go with our mobile app. Available for iOS and Android.</p>
+                <div class="d-flex gap-3 mb-4">
+                    <a href="#" class="btn btn-light btn-lg">
+                        <i class="fab fa-apple me-2"></i> App Store
+                    </a>
+                    <a href="#" class="btn btn-light btn-lg">
+                        <i class="fab fa-google-play me-2"></i> Google Play
+                    </a>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="me-3">
+                        <div class="d-flex">
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star-half-alt text-warning"></i>
+                        </div>
+                        <small class="text-light">4.8/5 (2,354 reviews)</small>
+                    </div>
+                    <div>
+                        <span class="badge bg-light text-dark p-2">
+                            <i class="fas fa-download me-1"></i> 100K+ Downloads
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6 text-center fade-in d-none d-lg-block">
+                <img src="https://img.icons8.com/external-flaticons-lineal-color-flat-icons/512/null/external-kangaroo-animal-flaticons-lineal-color-flat-icons-2.png" alt="App Screenshot" class="img-fluid" style="max-height: 400px; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));">
+            </div>
+        </div>
+    </div>
 </div>
+
+<div class="container my-5">
+    <!-- App Features -->
+    <h2 class="text-center mb-5">App Features</h2>
+    <div class="row">
+        <div class="col-md-4 mb-4 fade-in">
+            <div class="card h-100 text-center p-4">
+                <div class="mb-3">
+                    <i class="fas fa-bolt text-primary" style="font-size: 3rem;"></i>
+                </div>
+                <h3>Fast Checkout</h3>
+                <p>Complete your purchase in seconds with our streamlined checkout process.</p>
+            </div>
+        </div>
+        <div class="col-md-4 mb-4 fade-in">
+            <div class="card h-100 text-center p-4">
+                <div class="mb-3">
+                    <i class="fas fa-bell text-primary" style="font-size: 3rem;"></i>
+                </div>
+                <h3>Order Tracking</h3>
+                <p>Get real-time notifications about your order status and delivery updates.</p>
+            </div>
+        </div>
+        <div class="col-md-4 mb-4 fade-in">
+            <div class="card h-100 text-center p-4">
+                <div class="mb-3">
+                    <i class="fas fa-gift text-primary" style="font-size: 3rem;"></i>
+                </div>
+                <h3>Exclusive Deals</h3>
+                <p>Access app-only discounts and special promotions available nowhere else.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- App Screenshots -->
+    <h2 class="text-center my-5">App Screenshots</h2>
+    <div class="row justify-content-center">
+        <div class="col-6 col-md-4 col-lg-2 mb-4 fade-in">
+            <div class="card">
+                <div class="card-body p-2">
+                    <img src="/images/kangaroo.jpg" alt="App Screenshot" class="img-fluid rounded">
+                </div>
+                <div class="card-footer bg-white text-center">
+                    <small>Home Screen</small>
+                </div>
+            </div>
+        </div>
+        <div class="col-6 col-md-4 col-lg-2 mb-4 fade-in">
+            <div class="card">
+                <div class="card-body p-2">
+                    <img src="/images/koala.jpg" alt="App Screenshot" class="img-fluid rounded">
+                </div>
+                <div class="card-footer bg-white text-center">
+                    <small>Product Details</small>
+                </div>
+            </div>
+        </div>
+        <div class="col-6 col-md-4 col-lg-2 mb-4 fade-in">
+            <div class="card">
+                <div class="card-body p-2">
+                    <img src="/images/spider.jpg" alt="App Screenshot" class="img-fluid rounded">
+                </div>
+                <div class="card-footer bg-white text-center">
+                    <small>Shopping Cart</small>
+                </div>
+            </div>
+        </div>
+        <div class="col-6 col-md-4 col-lg-2 mb-4 fade-in">
+            <div class="card">
+                <div class="card-body p-2">
+                    <img src="/images/kangaroo.jpg" alt="App Screenshot" class="img-fluid rounded">
+                </div>
+                <div class="card-footer bg-white text-center">
+                    <small>Checkout</small>
+                </div>
+            </div>
+        </div>
+        <div class="col-6 col-md-4 col-lg-2 mb-4 fade-in">
+            <div class="card">
+                <div class="card-body p-2">
+                    <img src="/images/koala.jpg" alt="App Screenshot" class="img-fluid rounded">
+                </div>
+                <div class="card-footer bg-white text-center">
+                    <small>User Profile</small>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Customer Reviews -->
+    <div class="card mt-5 mb-5">
+        <div class="card-body p-4">
+            <h2 class="text-center mb-4">What Our Users Say</h2>
+            <div class="row">
+                <div class="col-md-4 mb-4 mb-md-0 fade-in">
+                    <div class="border rounded p-3 h-100">
+                        <div class="d-flex mb-3">
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                        </div>
+                        <p class="fst-italic">"This app makes shopping for my favorite Aussie products so easy! The interface is intuitive and checkout is super fast."</p>
+                        <p class="fw-bold mb-0">- Sarah J.</p>
+                    </div>
+                </div>
+                <div class="col-md-4 mb-4 mb-md-0 fade-in">
+                    <div class="border rounded p-3 h-100">
+                        <div class="d-flex mb-3">
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                        </div>
+                        <p class="fst-italic">"I love the exclusive discounts and deals. The app notifications keep me updated on sales for my favorite items."</p>
+                        <p class="fw-bold mb-0">- Mike T.</p>
+                    </div>
+                </div>
+                <div class="col-md-4 fade-in">
+                    <div class="border rounded p-3 h-100">
+                        <div class="d-flex mb-3">
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star text-warning"></i>
+                            <i class="fas fa-star-half-alt text-warning"></i>
+                        </div>
+                        <p class="fst-italic">"The order tracking feature is brilliant. I always know exactly when my package will arrive. Highly recommend!"</p>
+                        <p class="fw-bold mb-0">- Emma L.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Download CTA -->
+    <div class="text-center mb-5 fade-in">
+        <h2 class="mb-3">Download Now</h2>
+        <p class="lead mb-4">Join thousands of happy customers shopping with our app</p>
+        <div class="d-flex justify-content-center gap-3">
+            <a href="#" class="btn btn-primary btn-lg">
+                <i class="fab fa-apple me-2"></i> App Store
+            </a>
+            <a href="#" class="btn btn-success btn-lg">
+                <i class="fab fa-google-play me-2"></i> Google Play
+            </a>
+        </div>
+    </div>
+</div>
+
+@section Scripts {
+    <script>
+        // Add fade-in animation
+        document.addEventListener('DOMContentLoaded', function() {
+            const elements = document.querySelectorAll('.fade-in');
+            
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = 1;
+                    }
+                });
+            });
+            
+            elements.forEach(element => {
+                element.style.opacity = 0;
+                observer.observe(element);
+            });
+        });
+    </script>
+}
diff --git a/Pages/Cart.cshtml b/Pages/Cart.cshtml
index e58969d..042e569 100644
--- a/Pages/Cart.cshtml
+++ b/Pages/Cart.cshtml
@@ -1,8 +1,193 @@
 @page
 @model CartModel
 @{
-    ViewData["Title"] = "Aus-E-Mart Shopping Cart";
+    ViewData["Title"] = "Shopping Cart";
 }
-<h1>@ViewData["Title"]</h1>
 
-<p>Here's your shopping cart:</p>
+<!-- Cart Header -->
+<div class="hero-section" style="padding: 2rem 0;">
+    <div class="container">
+        <h1 class="display-4">Your Shopping Cart</h1>
+        <p class="lead">Review your items before checkout</p>
+    </div>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-8 fade-in">
+            <!-- Cart Items -->
+            <div class="card mb-4">
+                <div class="card-header bg-white d-flex justify-content-between align-items-center">
+                    <h3 class="mb-0">Cart Items (3)</h3>
+                    <button class="btn btn-outline-secondary btn-sm">
+                        <i class="fas fa-trash-alt me-1"></i> Clear Cart
+                    </button>
+                </div>
+                <div class="card-body p-0">
+                    <!-- Cart Item 1 -->
+                    <div class="d-flex p-3 border-bottom">
+                        <div class="flex-shrink-0">
+                            <img src="/images/kangaroo.jpg" alt="Product" class="rounded" width="100" height="100" style="object-fit: cover;">
+                        </div>
+                        <div class="flex-grow-1 ms-3 d-flex flex-column">
+                            <div class="d-flex justify-content-between">
+                                <h5>Kangaroo Plush Toy</h5>
+                                <h5 class="text-primary">$29.99</h5>
+                            </div>
+                            <p class="text-muted mb-2">Size: Medium | Color: Brown</p>
+                            <div class="d-flex mt-auto justify-content-between align-items-center">
+                                <div class="input-group input-group-sm" style="width: 120px;">
+                                    <button class="btn btn-outline-secondary" type="button">-</button>
+                                    <input type="text" class="form-control text-center" value="1">
+                                    <button class="btn btn-outline-secondary" type="button">+</button>
+                                </div>
+                                <div>
+                                    <button class="btn btn-sm text-danger">
+                                        <i class="fas fa-trash"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Cart Item 2 -->
+                    <div class="d-flex p-3 border-bottom">
+                        <div class="flex-shrink-0">
+                            <img src="/images/koala.jpg" alt="Product" class="rounded" width="100" height="100" style="object-fit: cover;">
+                        </div>
+                        <div class="flex-grow-1 ms-3 d-flex flex-column">
+                            <div class="d-flex justify-content-between">
+                                <h5>Koala Keychain</h5>
+                                <h5 class="text-primary">$12.99</h5>
+                            </div>
+                            <p class="text-muted mb-2">Material: Metal | Type: Keyring</p>
+                            <div class="d-flex mt-auto justify-content-between align-items-center">
+                                <div class="input-group input-group-sm" style="width: 120px;">
+                                    <button class="btn btn-outline-secondary" type="button">-</button>
+                                    <input type="text" class="form-control text-center" value="2">
+                                    <button class="btn btn-outline-secondary" type="button">+</button>
+                                </div>
+                                <div>
+                                    <button class="btn btn-sm text-danger">
+                                        <i class="fas fa-trash"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Cart Item 3 -->
+                    <div class="d-flex p-3">
+                        <div class="flex-shrink-0">
+                            <img src="/images/spider.jpg" alt="Product" class="rounded" width="100" height="100" style="object-fit: cover;">
+                        </div>
+                        <div class="flex-grow-1 ms-3 d-flex flex-column">
+                            <div class="d-flex justify-content-between">
+                                <h5>Spider Fridge Magnet</h5>
+                                <h5 class="text-primary">$8.99</h5>
+                            </div>
+                            <p class="text-muted mb-2">Material: Resin | Size: Small</p>
+                            <div class="d-flex mt-auto justify-content-between align-items-center">
+                                <div class="input-group input-group-sm" style="width: 120px;">
+                                    <button class="btn btn-outline-secondary" type="button">-</button>
+                                    <input type="text" class="form-control text-center" value="3">
+                                    <button class="btn btn-outline-secondary" type="button">+</button>
+                                </div>
+                                <div>
+                                    <button class="btn btn-sm text-danger">
+                                        <i class="fas fa-trash"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Continue Shopping -->
+            <div class="d-flex justify-content-between mb-4">
+                <a href="/Products" class="btn btn-outline-primary">
+                    <i class="fas fa-arrow-left me-2"></i> Continue Shopping
+                </a>
+                <button class="btn btn-outline-success">
+                    <i class="fas fa-sync-alt me-2"></i> Update Cart
+                </button>
+            </div>
+        </div>
+
+        <div class="col-lg-4 fade-in">
+            <!-- Order Summary -->
+            <div class="card mb-4">
+                <div class="card-header bg-white">
+                    <h3 class="mb-0">Order Summary</h3>
+                </div>
+                <div class="card-body">
+                    <div class="d-flex justify-content-between mb-2">
+                        <span>Subtotal:</span>
+                        <span>$64.96</span>
+                    </div>
+                    <div class="d-flex justify-content-between mb-2">
+                        <span>Shipping:</span>
+                        <span>$5.99</span>
+                    </div>
+                    <div class="d-flex justify-content-between mb-2">
+                        <span>Tax:</span>
+                        <span>$7.09</span>
+                    </div>
+                    <hr>
+                    <div class="d-flex justify-content-between mb-4 fw-bold">
+                        <span>Total:</span>
+                        <span class="text-primary">$78.04</span>
+                    </div>
+                    <button class="btn btn-primary w-100 mb-3">
+                        <i class="fas fa-credit-card me-2"></i> Proceed to Checkout
+                    </button>
+                    <div class="text-center mt-3">
+                        <div class="text-muted mb-2">We Accept</div>
+                        <div class="d-flex justify-content-center gap-2">
+                            <i class="fab fa-cc-visa fa-2x text-muted"></i>
+                            <i class="fab fa-cc-mastercard fa-2x text-muted"></i>
+                            <i class="fab fa-cc-amex fa-2x text-muted"></i>
+                            <i class="fab fa-cc-paypal fa-2x text-muted"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Promo Code -->
+            <div class="card">
+                <div class="card-header bg-white">
+                    <h5 class="mb-0">Apply Promo Code</h5>
+                </div>
+                <div class="card-body">
+                    <div class="input-group mb-3">
+                        <input type="text" class="form-control" placeholder="Enter code">
+                        <button class="btn btn-secondary" type="button">Apply</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@section Scripts {
+    <script>
+        // Add fade-in animation
+        document.addEventListener('DOMContentLoaded', function() {
+            const elements = document.querySelectorAll('.fade-in');
+            
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = 1;
+                    }
+                });
+            });
+            
+            elements.forEach(element => {
+                element.style.opacity = 0;
+                observer.observe(element);
+            });
+        });
+    </script>
+}
diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml
index 5b1e7a7..1db834d 100644
--- a/Pages/Index.cshtml
+++ b/Pages/Index.cshtml
@@ -1,14 +1,121 @@
 @page
 @model IndexModel
 @{
-    ViewData["Title"] = "Home page";
+    ViewData["Title"] = "Home";
 }
 
-<div class="text-center">
-    <h1 class="display-4">G'day and welcome to Aus-E-Mart!</h1>
-    <p>You can find all your favourite Aussie products and more.</p>
-    <br/>
-    <img src="https://img.icons8.com/external-flaticons-lineal-color-flat-icons/64/null/external-koala-animal-flaticons-lineal-color-flat-icons-2.png" width="64" alt="Koala" />
-    <img src="https://img.icons8.com/external-flaticons-lineal-color-flat-icons/64/null/external-platypus-animal-flaticons-lineal-color-flat-icons-2.png" width="64" alt="Platypus" />
-    <img src="https://img.icons8.com/external-flaticons-lineal-color-flat-icons/64/null/external-snake-animal-flaticons-lineal-color-flat-icons.png" width="64" alt="Snake" />
+<!-- Hero Section -->
+<div class="hero-section">
+    <div class="container">
+        <div class="row align-items-center">
+            <div class="col-lg-7 fade-in">
+                <h1 class="display-4">G'day and welcome to Aus-E-Mart!</h1>
+                <p class="lead mb-4">Your one-stop destination for authentic Australian products shipped worldwide with love from Down Under.</p>
+                <div class="d-flex gap-2">
+                    <a href="/Products" class="btn btn-primary btn-lg">
+                        Explore Products <i class="fas fa-arrow-right ms-2"></i>
+                    </a>
+                    <a href="#featured" class="btn btn-outline-light btn-lg">
+                        Today's Deals <i class="fas fa-tag ms-2"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="col-lg-5 d-none d-lg-block text-center fade-in">
+                <img src="https://img.icons8.com/external-flaticons-lineal-color-flat-icons/512/null/external-kangaroo-animal-flaticons-lineal-color-flat-icons-2.png" alt="Australia" class="img-fluid" style="max-height: 300px;">
+            </div>
+        </div>
+    </div>
 </div>
+
+<!-- Features Section -->
+<div class="container my-5">
+    <div class="row">
+        <div class="col-md-4 mb-4 fade-in">
+            <div class="card h-100 text-center p-4">
+                <div class="mb-3">
+                    <i class="fas fa-shipping-fast text-primary" style="font-size: 3rem;"></i>
+                </div>
+                <h3>Fast Shipping</h3>
+                <p>Express delivery from Australia to anywhere in the world.</p>
+            </div>
+        </div>
+        <div class="col-md-4 mb-4 fade-in">
+            <div class="card h-100 text-center p-4">
+                <div class="mb-3">
+                    <i class="fas fa-check-circle text-primary" style="font-size: 3rem;"></i>
+                </div>
+                <h3>Authentic Products</h3>
+                <p>100% genuine Aussie products sourced directly from local suppliers.</p>
+            </div>
+        </div>
+        <div class="col-md-4 mb-4 fade-in">
+            <div class="card h-100 text-center p-4">
+                <div class="mb-3">
+                    <i class="fas fa-headset text-primary" style="font-size: 3rem;"></i>
+                </div>
+                <h3>24/7 Support</h3>
+                <p>Our friendly team is always ready to assist you with any questions.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Australian Icons Section -->
+<div class="container my-5 text-center">
+    <h2 class="mb-4">Discover Aussie Icons</h2>
+    <div class="aussie-icons">
+        <div class="aussie-icon">
+            <img src="https://img.icons8.com/external-flaticons-lineal-color-flat-icons/128/null/external-koala-animal-flaticons-lineal-color-flat-icons-2.png" width="100" alt="Koala" />
+            <h5 class="mt-3">Koala Collection</h5>
+        </div>
+        <div class="aussie-icon">
+            <img src="https://img.icons8.com/external-flaticons-lineal-color-flat-icons/128/null/external-platypus-animal-flaticons-lineal-color-flat-icons-2.png" width="100" alt="Platypus" />
+            <h5 class="mt-3">Platypus Products</h5>
+        </div>
+        <div class="aussie-icon">
+            <img src="https://img.icons8.com/external-flaticons-lineal-color-flat-icons/128/null/external-snake-animal-flaticons-lineal-color-flat-icons.png" width="100" alt="Snake" />
+            <h5 class="mt-3">Snake Souvenirs</h5>
+        </div>
+    </div>
+    <a href="/Products" class="btn btn-primary mt-4">View All Categories</a>
+</div>
+
+<!-- Call to Action -->
+<div class="container my-5">
+    <div class="card bg-light">
+        <div class="card-body p-5 text-center">
+            <h2>Subscribe to our newsletter</h2>
+            <p class="lead mb-4">Get the latest updates on new products and special promotions!</p>
+            <div class="row justify-content-center">
+                <div class="col-md-6">
+                    <div class="input-group mb-3">
+                        <input type="email" class="form-control" placeholder="Your email address">
+                        <button class="btn btn-primary" type="button">Subscribe</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@section Scripts {
+    <script>
+        // Add fade-in animation to elements as they come into viewport
+        document.addEventListener('DOMContentLoaded', function() {
+            const elements = document.querySelectorAll('.fade-in');
+            
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = 1;
+                    }
+                });
+            });
+            
+            elements.forEach(element => {
+                element.style.opacity = 0;
+                observer.observe(element);
+            });
+        });
+    </script>
+}
diff --git a/Pages/Products.cshtml b/Pages/Products.cshtml
index 14f6858..9d4442e 100644
--- a/Pages/Products.cshtml
+++ b/Pages/Products.cshtml
@@ -1,15 +1,187 @@
 @page
 @model ProductsModel
 @{
-    ViewData["Title"] = "Aus-E-Mart Products";
+    ViewData["Title"] = "Products";
+}
+
+<!-- Products Header -->
+<div class="hero-section" style="padding: 2rem 0;">
+    <div class="container">
+        <h1 class="display-4">Explore Our Products</h1>
+        <p class="lead">Authentic Australian goods shipped directly to your doorstep</p>
+    </div>
+</div>
+
+<div class="container my-5">
+    <!-- Filter and Search Row -->
+    <div class="row mb-4">
+        <div class="col-md-6">
+            <div class="d-flex">
+                <select class="form-select me-2">
+                    <option selected>All Categories</option>
+                    <option>Souvenirs</option>
+                    <option>Food & Drinks</option>
+                    <option>Clothing</option>
+                    <option>Home Decor</option>
+                </select>
+                <select class="form-select">
+                    <option selected>Sort By: Featured</option>
+                    <option>Price: Low to High</option>
+                    <option>Price: High to Low</option>
+                    <option>Newest First</option>
+                </select>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="input-group">
+                <input type="text" class="form-control" placeholder="Search products...">
+                <button class="btn btn-primary" type="button">
+                    <i class="fas fa-search"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Product Categories -->
+    <h2 class="mb-4">Featured Categories</h2>
+    <div class="row">
+        <!-- Kangaroo Products Card -->
+        <div class="col-md-4 mb-4 fade-in">
+            <div class="card">
+                <div class="position-relative">
+                    <img src="/images/kangaroo.jpg" class="card-img-top product-card-img" alt="Kangaroo Products">
+                    <div class="position-absolute bottom-0 start-0 bg-primary text-white px-3 py-2 rounded-top">
+                        <i class="fas fa-star me-1"></i> Popular
+                    </div>
+                </div>
+                <div class="card-body">
+                    <h3 class="card-title">Kangaroo Collection</h3>
+                    <p class="card-text">Explore our range of high-quality kangaroo-themed products.</p>
+                    <div class="d-flex justify-content-between align-items-center">
+                        <button class="btn btn-primary">View Products</button>
+                        <span class="text-muted">15 items</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Koala Products Card -->
+        <div class="col-md-4 mb-4 fade-in">
+            <div class="card">
+                <div class="position-relative">
+                    <img src="/images/koala.jpg" class="card-img-top product-card-img" alt="Koala Products">
+                    <div class="position-absolute bottom-0 start-0 bg-success text-white px-3 py-2 rounded-top">
+                        <i class="fas fa-leaf me-1"></i> Eco-friendly
+                    </div>
+                </div>
+                <div class="card-body">
+                    <h3 class="card-title">Koala Collection</h3>
+                    <p class="card-text">Adorable koala-themed gifts and souvenirs for every occasion.</p>
+                    <div class="d-flex justify-content-between align-items-center">
+                        <button class="btn btn-primary">View Products</button>
+                        <span class="text-muted">12 items</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Spider Products Card -->
+        <div class="col-md-4 mb-4 fade-in">
+            <div class="card">
+                <div class="position-relative">
+                    <img src="/images/spider.jpg" class="card-img-top product-card-img" alt="Spider Products">
+                    <div class="position-absolute bottom-0 start-0 bg-danger text-white px-3 py-2 rounded-top">
+                        <i class="fas fa-bolt me-1"></i> Trending
+                    </div>
+                </div>
+                <div class="card-body">
+                    <h3 class="card-title">Spider Collection</h3>
+                    <p class="card-text">Unique spider-themed products for the brave and curious.</p>
+                    <div class="d-flex justify-content-between align-items-center">
+                        <button class="btn btn-primary">View Products</button>
+                        <span class="text-muted">8 items</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Best Sellers Section -->
+    <h2 class="mt-5 mb-4">Best Sellers</h2>
+    <div class="row">
+        <!-- Product items would go here -->
+        @for (int i = 1; i <= 6; i++)
+        {
+            <div class="col-md-4 col-lg-3 mb-4 fade-in">
+                <div class="card product-card h-100">
+                    <div class="position-relative">
+                        <img src="@($"/images/{(i % 3 == 0 ? "spider" : i % 3 == 1 ? "kangaroo" : "koala")}.jpg")" class="card-img-top" style="height: 180px; object-fit: cover;" alt="Product">
+                        @if (i % 4 == 0)
+                        {
+                            <span class="position-absolute top-0 end-0 bg-danger text-white px-2 py-1 m-2 rounded">SALE</span>
+                        }
+                    </div>
+                    <div class="card-body d-flex flex-column">
+                        <h5 class="card-title">Aussie Product @i</h5>
+                        <p class="card-text flex-grow-1">High-quality Australian product with premium features.</p>
+                        <div class="d-flex justify-content-between align-items-center mt-auto">
+                            <span class="fw-bold">$@(20 + i * 5).99</span>
+                            <button class="btn btn-sm btn-outline-primary">
+                                <i class="fas fa-shopping-cart me-1"></i> Add to Cart
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        }
+    </div>
+
+    <!-- Call to Action -->
+    <div class="card bg-light mt-5">
+        <div class="card-body p-4 text-center">
+            <h3>Can't find what you're looking for?</h3>
+            <p class="mb-3">Contact our customer support team for assistance.</p>
+            <button class="btn btn-primary">
+                <i class="fas fa-headset me-2"></i> Contact Support
+            </button>
+        </div>
+    </div>
+</div>
+
+<style>
+    .product-card-img {
+        height: 220px;
+        object-fit: cover;
+    }
+    
+    .product-card {
+        transition: transform 0.3s ease;
+    }
+    
+    .product-card:hover {
+        transform: translateY(-5px);
+    }
+</style>
+
+@section Scripts {
+    <script>
+        // Add fade-in animation
+        document.addEventListener('DOMContentLoaded', function() {
+            const elements = document.querySelectorAll('.fade-in');
+            
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = 1;
+                    }
+                });
+            });
+            
+            elements.forEach(element => {
+                element.style.opacity = 0;
+                observer.observe(element);
+            });
+        });
+    </script>
 }
-<h1>@ViewData["Title"]</h1>
-
-<p>Come check out our products! </p>
-<br/>
-<ul class="list-group">
-    <li class="list-group-item"><img src="/images/kangaroo.jpg" width="100"/> Kangaroo Products </li>
-    <li class="list-group-item"><img src="/images/koala.jpg" width="100"/> Koala Products </li>
-    <li class="list-group-item"><img src="/images/spider.jpg" width="100"/> Spider Products </li>
-</ul>
 
diff --git a/Pages/Shared/_Layout.cshtml b/Pages/Shared/_Layout.cshtml
index 33361ff..87c51f9 100644
--- a/Pages/Shared/_Layout.cshtml
+++ b/Pages/Shared/_Layout.cshtml
@@ -3,16 +3,21 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@ViewData["Title"] - ausemartweb</title>
+    <title>@ViewData["Title"] - Aus-E-Mart</title>
     <link rel="stylesheet" href="~/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/ausemartweb.styles.css" asp-append-version="true" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
     <header>
-        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
+        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-4">
             <div class="container">
-                <a class="navbar-brand" asp-area="" asp-page="/Index"><img src="https://img.icons8.com/external-flaticons-lineal-color-flat-icons/64/null/external-kangaroo-animal-flaticons-lineal-color-flat-icons-2.png" width="64" alt="Aus-E-Mart" />Aus-E-Mart</a>
+                <a class="navbar-brand" asp-area="" asp-page="/Index">
+                    <img src="https://img.icons8.com/external-flaticons-lineal-color-flat-icons/64/null/external-kangaroo-animal-flaticons-lineal-color-flat-icons-2.png" width="50" alt="Aus-E-Mart" />
+                    <span>Aus-E-Mart</span>
+                </a>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                         aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
@@ -20,35 +25,62 @@
                 <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                     <ul class="navbar-nav flex-grow-1">
                         <li class="nav-item">
-                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
+                            <a class="nav-link" asp-area="" asp-page="/Index">
+                                <i class="fas fa-home me-1"></i> Home
+                            </a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link text-dark" asp-area="" asp-page="/Products">Products</a>
+                            <a class="nav-link" asp-area="" asp-page="/Products">
+                                <i class="fas fa-store me-1"></i> Products
+                            </a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link text-dark" asp-area="" asp-page="/Cart">Cart</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link text-dark" asp-area="" asp-page="/App/Index">App</a>
+                            <a class="nav-link" asp-area="" asp-page="/App/Index">
+                                <i class="fas fa-mobile-alt me-1"></i> App
+                            </a>
                         </li>                                                  
                     </ul>
+                    <div class="d-flex">
+                        <a class="btn btn-outline-success me-2" href="#">
+                            <i class="fas fa-user me-1"></i> Sign In
+                        </a>
+                        <a class="nav-link position-relative" asp-area="" asp-page="/Cart">
+                            <i class="fas fa-shopping-cart fs-5"></i>
+                            <span class="cart-badge">0</span>
+                        </a>
+                    </div>
                 </div>
             </div>
         </nav>
     </header>
-    <div class="container">
-        <main role="main" class="pb-3">
-            @RenderBody()
-        </main>
-    </div>
+    
+    @RenderBody()
 
-    <footer class="border-top footer text-muted">
+    <footer class="footer">
         <div class="container">
-            Aus-E-Mart Web Store - <a asp-area="" asp-page="/Privacy">Privacy</a> 
-            <font color="white">&nbsp;&nbsp;&nbsp;&nbsp;(You're running on server: '@System.Environment.MachineName')</font>
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="d-flex align-items-center gap-2">
+                        <img src="https://img.icons8.com/external-flaticons-lineal-color-flat-icons/64/null/external-kangaroo-animal-flaticons-lineal-color-flat-icons-2.png" width="30" alt="Aus-E-Mart" />
+                        <span>Aus-E-Mart Web Store</span>
+                    </div>
+                    <p class="mt-2 mb-0 small">Your one-stop shop for all things Aussie!</p>
+                </div>
+                <div class="col-md-6 text-md-end">
+                    <div>
+                        <a asp-area="" asp-page="/Privacy" class="me-3">Privacy Policy</a>
+                        <a href="#" class="me-3">Terms of Service</a>
+                        <a href="#" class="me-3">Contact Us</a>
+                    </div>
+                    <div class="mt-2 small text-muted">
+                        Running on server: '@System.Environment.MachineName'
+                    </div>
+                </div>
+            </div>
         </div>
     </footer>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="~/js/site.js" asp-append-version="true"></script>
 
     @await RenderSectionAsync("Scripts", required: false)
diff --git a/ausemartweb.sln b/ausemartweb.sln
new file mode 100644
index 0000000..c5293cc
--- /dev/null
+++ b/ausemartweb.sln
@@ -0,0 +1,24 @@
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.5.2.0
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ausemartweb", "ausemartweb.csproj", "{1F4B0CE0-59FC-AF24-B76E-3D10DF08E341}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{1F4B0CE0-59FC-AF24-B76E-3D10DF08E341}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{1F4B0CE0-59FC-AF24-B76E-3D10DF08E341}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{1F4B0CE0-59FC-AF24-B76E-3D10DF08E341}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{1F4B0CE0-59FC-AF24-B76E-3D10DF08E341}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {EC4EB951-CDA8-41C0-B561-080DF59CB5E9}
+	EndGlobalSection
+EndGlobal
diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css
index f27e5ad..40dba4b 100644
--- a/wwwroot/css/site.css
+++ b/wwwroot/css/site.css
@@ -1,18 +1,266 @@
+:root {
+  --aussie-green: #00843D;
+  --aussie-gold: #FFCD00;
+  --aussie-blue: #0072B2;
+  --aussie-red: #E5002B;
+  --neutral-dark: #333333;
+  --neutral-light: #F5F5F5;
+  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --transition: all 0.3s ease;
+}
+
 html {
-  font-size: 14px;
+  font-size: 16px;
+  position: relative;
+  min-height: 100%;
+  scroll-behavior: smooth;
 }
 
 @media (min-width: 768px) {
   html {
-    font-size: 16px;
+    font-size: 18px;
   }
 }
 
-html {
+body {
+  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  margin-bottom: 70px;
+  background-color: var(--neutral-light);
+  color: var(--neutral-dark);
+  line-height: 1.6;
+}
+
+/* Navbar Styling */
+.navbar {
+  background-color: #fff !important;
+  box-shadow: var(--shadow);
+  padding: 0.8rem 1rem;
+}
+
+.navbar-brand {
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--aussie-green) !important;
+  transition: var(--transition);
+}
+
+.navbar-brand:hover {
+  transform: scale(1.05);
+}
+
+.nav-link {
+  font-weight: 500;
   position: relative;
-  min-height: 100%;
+  padding: 0.5rem 1rem !important;
+  margin: 0 0.2rem;
+  transition: var(--transition);
 }
 
-body {
-  margin-bottom: 60px;
+.nav-link::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 2px;
+  bottom: 0;
+  left: 50%;
+  background-color: var(--aussie-green);
+  transition: var(--transition);
+}
+
+.nav-link:hover::after {
+  width: 80%;
+  left: 10%;
+}
+
+/* Buttons */
+.btn-primary {
+  background-color: var(--aussie-green);
+  border-color: var(--aussie-green);
+  box-shadow: var(--shadow);
+  transition: var(--transition);
+}
+
+.btn-primary:hover {
+  background-color: #006b31;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+.btn-secondary {
+  background-color: var(--aussie-gold);
+  border-color: var(--aussie-gold);
+  color: var(--neutral-dark);
+}
+
+.btn-secondary:hover {
+  background-color: #e6b800;
+  color: var(--neutral-dark);
+}
+
+/* Cards */
+.card {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: var(--shadow);
+  transition: var(--transition);
+  border: none;
+  margin-bottom: 1.5rem;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+}
+
+.card-img-top {
+  height: 200px;
+  object-fit: cover;
+}
+
+.card-title {
+  color: var(--aussie-green);
+  font-weight: 600;
+}
+
+/* Product List */
+.product-item {
+  display: flex;
+  align-items: center;
+  background: white;
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  box-shadow: var(--shadow);
+  transition: var(--transition);
+  border-left: 4px solid var(--aussie-green);
+}
+
+.product-item:hover {
+  transform: translateX(5px);
+}
+
+.product-img {
+  border-radius: 4px;
+  margin-right: 1.5rem;
+  object-fit: cover;
+}
+
+/* Hero Section */
+.hero-section {
+  background: linear-gradient(135deg, var(--aussie-blue) 0%, var(--aussie-green) 100%);
+  color: white;
+  padding: 3rem 0;
+  margin-bottom: 2rem;
+  border-radius: 0 0 30% 0;
+  position: relative;
+}
+
+.hero-section::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 20px;
+  background-color: var(--aussie-gold);
+  clip-path: polygon(0 100%, 100% 100%, 100% 0);
+}
+
+.display-4 {
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
+/* Footer */
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: var(--neutral-dark);
+  color: white;
+  padding: 1rem 0;
+  font-size: 0.9rem;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.footer a {
+  color: var(--aussie-gold);
+  transition: var(--transition);
+}
+
+.footer a:hover {
+  color: white;
+  text-decoration: none;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.fade-in {
+  animation: fadeIn 0.8s ease forwards;
+}
+
+/* Australian Icons */
+.aussie-icons {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin: 2rem 0;
+}
+
+.aussie-icon {
+  transition: var(--transition);
+}
+
+.aussie-icon:hover {
+  transform: scale(1.2) rotate(5deg);
+}
+
+/* Cart Badge */
+.cart-badge {
+  background-color: var(--aussie-red);
+  color: white;
+  border-radius: 50%;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.8rem;
+  position: relative;
+  top: -8px;
+  transition: transform 0.3s ease;
+}
+
+/* Cart Badge Animation */
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.4); }
+  100% { transform: scale(1); }
+}
+
+.pulse-animation {
+  animation: pulse 0.5s ease-in-out;
+}
+
+/* Navbar Scroll Effect */
+.navbar-scrolled {
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  padding: 0.5rem 1rem !important;
+  background-color: rgba(255, 255, 255, 0.95) !important;
+}
+
+/* Toast Notifications */
+.toast-container {
+  z-index: 9999;
+}
+
+.toast {
+  transition: opacity 0.3s ease;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+  border: none;
+  border-radius: 8px;
+  overflow: hidden;
 }
\ No newline at end of file
diff --git a/wwwroot/js/site.js b/wwwroot/js/site.js
index ac49c18..71f9f84 100644
--- a/wwwroot/js/site.js
+++ b/wwwroot/js/site.js
@@ -1,4 +1,230 @@
-// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
-// for details on configuring this project to bundle and minify static web assets.
+// Aus-E-Mart Interactive JavaScript Features
 
-// Write your JavaScript code.
+// Initialize on DOM content loaded
+document.addEventListener('DOMContentLoaded', function() {
+    // Animations for page elements
+    initFadeAnimations();
+    
+    // Initialize interactive features
+    initProductInteractions();
+    initCartInteractions();
+    initTooltips();
+    
+    // Navbar scroll behavior
+    initScrollBehavior();
+});
+
+// Fade-in animation for elements
+function initFadeAnimations() {
+    const elements = document.querySelectorAll('.fade-in');
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = 1;
+                entry.target.style.transform = 'translateY(0)';
+            }
+        });
+    }, {
+        threshold: 0.1
+    });
+    
+    elements.forEach(element => {
+        element.style.opacity = 0;
+        element.style.transform = 'translateY(20px)';
+        element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
+        observer.observe(element);
+    });
+}
+
+// Product interactions (Add to cart, view details)
+function initProductInteractions() {
+    // Product add to cart buttons
+    const addToCartButtons = document.querySelectorAll('.btn-outline-primary');
+    
+    if (addToCartButtons) {
+        addToCartButtons.forEach(button => {
+            button.addEventListener('click', function(e) {
+                e.preventDefault();
+                const productName = this.closest('.card-body').querySelector('.card-title').textContent;
+                
+                // Update cart badge
+                const cartBadge = document.querySelector('.cart-badge');
+                if (cartBadge) {
+                    const currentCount = parseInt(cartBadge.textContent) || 0;
+                    cartBadge.textContent = currentCount + 1;
+                    cartBadge.classList.add('pulse-animation');
+                    setTimeout(() => {
+                        cartBadge.classList.remove('pulse-animation');
+                    }, 1000);
+                }
+                
+                // Show toast notification
+                showToast(`${productName} added to cart!`);
+            });
+        });
+    }
+    
+    // Product cards hover effects
+    const productCards = document.querySelectorAll('.product-card');
+    if (productCards) {
+        productCards.forEach(card => {
+            card.addEventListener('mouseenter', function() {
+                this.style.transform = 'translateY(-10px)';
+            });
+            
+            card.addEventListener('mouseleave', function() {
+                this.style.transform = 'translateY(0)';
+            });
+        });
+    }
+}
+
+// Cart interactions (quantity, remove items)
+function initCartInteractions() {
+    // Quantity buttons
+    const quantityBtns = document.querySelectorAll('.input-group button');
+    
+    if (quantityBtns) {
+        quantityBtns.forEach(btn => {
+            btn.addEventListener('click', function() {
+                const input = this.closest('.input-group').querySelector('input');
+                let value = parseInt(input.value);
+                
+                if (this.textContent === '+') {
+                    input.value = value + 1;
+                } else if (this.textContent === '-' && value > 1) {
+                    input.value = value - 1;
+                }
+            });
+        });
+    }
+    
+    // Remove items from cart
+    const removeButtons = document.querySelectorAll('.text-danger');
+    
+    if (removeButtons) {
+        removeButtons.forEach(btn => {
+            btn.addEventListener('click', function() {
+                const cartItem = this.closest('.d-flex');
+                
+                // Add fade-out animation
+                cartItem.style.opacity = '0';
+                cartItem.style.height = cartItem.offsetHeight + 'px';
+                
+                setTimeout(() => {
+                    cartItem.style.height = '0';
+                    cartItem.style.padding = '0';
+                    cartItem.style.margin = '0';
+                    cartItem.style.overflow = 'hidden';
+                }, 300);
+                
+                setTimeout(() => {
+                    cartItem.remove();
+                    updateCartSummary();
+                }, 600);
+            });
+        });
+    }
+}
+
+// Initialize Bootstrap tooltips
+function initTooltips() {
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+}
+
+// Navbar scroll behavior
+function initScrollBehavior() {
+    const navbar = document.querySelector('.navbar');
+    
+    if (navbar) {
+        window.addEventListener('scroll', function() {
+            if (window.scrollY > 50) {
+                navbar.classList.add('navbar-scrolled');
+            } else {
+                navbar.classList.remove('navbar-scrolled');
+            }
+        });
+    }
+}
+
+// Helper function to show toast notifications
+function showToast(message) {
+    // Create toast container if it doesn't exist
+    let toastContainer = document.querySelector('.toast-container');
+    
+    if (!toastContainer) {
+        toastContainer = document.createElement('div');
+        toastContainer.className = 'toast-container position-fixed bottom-0 end-0 p-3';
+        document.body.appendChild(toastContainer);
+    }
+    
+    // Create toast element
+    const toastEl = document.createElement('div');
+    toastEl.className = 'toast show bg-success text-white';
+    toastEl.setAttribute('role', 'alert');
+    toastEl.setAttribute('aria-live', 'assertive');
+    toastEl.setAttribute('aria-atomic', 'true');
+    
+    // Toast content
+    toastEl.innerHTML = `
+        <div class="toast-header bg-success text-white">
+            <strong class="me-auto">Aus-E-Mart</strong>
+            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div class="toast-body">
+            ${message}
+        </div>
+    `;
+    
+    // Add to container
+    toastContainer.appendChild(toastEl);
+    
+    // Auto remove after 3 seconds
+    setTimeout(() => {
+        toastEl.style.opacity = '0';
+        setTimeout(() => {
+            toastEl.remove();
+        }, 300);
+    }, 3000);
+    
+    // Close button functionality
+    const closeBtn = toastEl.querySelector('.btn-close');
+    closeBtn.addEventListener('click', function() {
+        toastEl.style.opacity = '0';
+        setTimeout(() => {
+            toastEl.remove();
+        }, 300);
+    });
+}
+
+// Update cart summary totals
+function updateCartSummary() {
+    const subtotalEl = document.querySelector('.card-body .d-flex:first-child span:last-child');
+    const totalEl = document.querySelector('.d-flex.justify-content-between.mb-4.fw-bold span:last-child');
+    
+    if (subtotalEl && totalEl) {
+        // Recalculate subtotal based on remaining items
+        let subtotal = 0;
+        document.querySelectorAll('.d-flex.p-3').forEach(item => {
+            const priceText = item.querySelector('.text-primary').textContent;
+            const quantity = parseInt(item.querySelector('input').value) || 1;
+            const price = parseFloat(priceText.replace('$', '')) || 0;
+            subtotal += price * quantity;
+        });
+        
+        // Update displayed values
+        subtotalEl.textContent = '$' + subtotal.toFixed(2);
+        
+        // Calculate tax and total
+        const tax = subtotal * 0.1;
+        const shipping = 5.99;
+        const total = subtotal + tax + shipping;
+        
+        // Update total
+        totalEl.textContent = '$' + total.toFixed(2);
+    }
+}