diff --git a/add_sale.php b/add_sale.php
index ca9f559..826c058 100644
--- a/add_sale.php
+++ b/add_sale.php
@@ -34,15 +34,27 @@ $products = [
     ],
 ];
 
+require_once __DIR__ . '/db/config.php';
+
 $success_message = "";
+$error_message = "";
+
 if ($_SERVER["REQUEST_METHOD"] == "POST") {
-    // Basic validation
     if (!empty($_POST['product_name']) && !empty($_POST['quantity']) && is_numeric($_POST['quantity'])) {
-        // In a real app, you would save this to a database.
-        // For now, we just show a success message.
-        $product_name = htmlspecialchars($_POST['product_name']);
-        $quantity = htmlspecialchars($_POST['quantity']);
-        $success_message = "Successfully added $quantity sale(s) for $product_name!";
+        try {
+            $product_name = $_POST['product_name'];
+            $quantity = (int)$_POST['quantity'];
+
+            $pdo = db();
+            $stmt = $pdo->prepare("INSERT INTO sales (product_name, quantity) VALUES (?, ?)");
+            $stmt->execute([$product_name, $quantity]);
+
+            $success_message = "Successfully added $quantity sale(s) for $product_name!";
+        } catch (PDOException $e) {
+            $error_message = "Error: Could not record the sale. " . $e->getMessage();
+        }
+    } else {
+        $error_message = "Please fill out all fields correctly.";
     }
 }
 ?>
@@ -72,6 +84,12 @@ if ($_SERVER["REQUEST_METHOD"] == "POST") {
                 </div>
             <?php endif; ?>
 
+            <?php if ($error_message): ?>
+                <div class="alert error">
+                    <?php echo $error_message; ?>
+                </div>
+            <?php endif; ?>
+
             <form action="add_sale.php" method="POST" class="add-sale-form">
                 <div class="form-group">
                     <label for="product_name">Product</label>
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 848f435..506b198 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -172,27 +172,45 @@ body {
     text-align: center;
 }
 
-/* Floating Action Button */
-.fab {
+/* Bottom Navigation */
+.bottom-nav {
     position: fixed;
-    bottom: 30px;
-    right: 30px;
-    width: 60px;
-    height: 60px;
-    background: linear-gradient(45deg, #8E44AD, #C0392B);
-    border-radius: 50%;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    max-width: 480px;
+    margin: auto;
     display: flex;
+    justify-content: space-around;
     align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: 28px;
-    text-decoration: none;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-    transition: all 0.3s ease;
+    background-color: rgba(26, 26, 46, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 10px 0;
     z-index: 1000;
 }
 
-.fab:hover {
-    transform: scale(1.1);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
+.nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #e0e0e0;
+    text-decoration: none;
+    font-size: 0.75rem;
+    transition: color 0.3s ease;
+}
+
+.nav-item i {
+    font-size: 1.5rem;
+    margin-bottom: 4px;
+}
+
+.nav-item.active,
+.nav-item:hover {
+    color: #fff;
+}
+
+main.p-3 {
+    padding-bottom: 100px !important; /* Space for bottom nav */
 }
diff --git a/index.php b/index.php
index 6e61900..8254c90 100644
--- a/index.php
+++ b/index.php
@@ -82,7 +82,20 @@ $projectName = $_SERVER['PROJECT_NAME'] ?? 'Sales & Nutrition';
         </div>
     </main>
 
-    <a href="add_sale.php" class="fab">+</a>
+    <nav class="bottom-nav">
+        <a href="index.php" class="nav-item active">
+            <i class="bi bi-house-door-fill"></i>
+            <span>Home</span>
+        </a>
+        <a href="add_sale.php" class="nav-item">
+            <i class="bi bi-plus-circle-fill"></i>
+            <span>Add Sale</span>
+        </a>
+        <a href="stats.php" class="nav-item">
+            <i class="bi bi-bar-chart-line-fill"></i>
+            <span>Stats</span>
+        </a>
+    </nav>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
diff --git a/stats.php b/stats.php
new file mode 100644
index 0000000..d81e5c2
--- /dev/null
+++ b/stats.php
@@ -0,0 +1,133 @@
+<?php
+require_once __DIR__ . '/db/config.php';
+
+$sales_data = [];
+$error_message = '';
+$total_sales = 0;
+$total_quantity = 0;
+$sales_by_product = [];
+
+try {
+    $pdo = db();
+    $stmt = $pdo->query("SELECT product_name, quantity, sale_date FROM sales ORDER BY sale_date DESC");
+    $sales_data = $stmt->fetchAll();
+
+    if ($sales_data) {
+        $total_sales = count($sales_data);
+        $total_quantity = array_sum(array_column($sales_data, 'quantity'));
+
+        foreach ($sales_data as $sale) {
+            if (!isset($sales_by_product[$sale['product_name']])) {
+                $sales_by_product[$sale['product_name']] = 0;
+            }
+            $sales_by_product[$sale['product_name']] += $sale['quantity'];
+        }
+        arsort($sales_by_product);
+    }
+} catch (PDOException $e) {
+    $error_message = "Error fetching sales data: " . $e->getMessage();
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sales Stats - Sales Tracker</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+</head>
+<body>
+
+    <div class="mobile-container">
+        <header class="app-header">
+            <a href="index.php" class="back-button">&larr;</a>
+            <h1>Sales Statistics</h1>
+        </header>
+
+        <main class="main-content">
+            <?php if ($error_message): ?>
+                <div class="alert error">
+                    <?php echo htmlspecialchars($error_message); ?>
+                </div>
+            <?php elseif (empty($sales_data)) : ?>
+                <div class="alert">
+                    No sales data yet. Add a sale to see statistics here.
+                </div>
+            <?php else: ?>
+                <div class="stats-summary">
+                    <div class="summary-card">
+                        <span class="value"><?php echo $total_sales; ?></span>
+                        <span class="label">Total Sales</span>
+                    </div>
+                    <div class="summary-card">
+                        <span class="value"><?php echo $total_quantity; ?></span>
+                        <span class="label">Items Sold</span>
+                    </div>
+                </div>
+
+                <h2 class="h5 mt-4 mb-3 text-white">Sales by Product</h2>
+                <div class="table-responsive">
+                    <table class="table sales-table">
+                        <thead>
+                            <tr>
+                                <th>Product</th>
+                                <th>Total Quantity Sold</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <?php foreach ($sales_by_product as $product_name => $quantity): ?>
+                                <tr>
+                                    <td><?php echo htmlspecialchars($product_name); ?></td>
+                                    <td><?php echo htmlspecialchars((string)$quantity); ?></td>
+                                </tr>
+                            <?php endforeach; ?>
+                        </tbody>
+                    </table>
+                </div>
+
+                <h2 class="h5 mt-4 mb-3 text-white">Recent Sales</h2>
+                <div class="table-responsive">
+                    <table class="table sales-table">
+                        <thead>
+                            <tr>
+                                <th>Product</th>
+                                <th>Quantity</th>
+                                <th>Date</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <?php foreach ($sales_data as $sale): ?>
+                                <tr>
+                                    <td><?php echo htmlspecialchars($sale['product_name']); ?></td>
+                                    <td><?php echo htmlspecialchars((string)$sale['quantity']); ?></td>
+                                    <td><?php echo htmlspecialchars(date("M d, Y H:i", strtotime($sale['sale_date']))); ?></td>
+                                </tr>
+                            <?php endforeach; ?>
+                        </tbody>
+                    </table>
+                </div>
+            <?php endif; ?>
+        </main>
+    </div>
+
+    <!-- Bottom Navigation -->
+    <nav class="bottom-nav">
+        <a href="index.php" class="nav-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+            <span>Home</span>
+        </a>
+        <a href="add_sale.php" class="nav-item">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+            <span>Add Sale</span>
+        </a>
+        <a href="stats.php" class="nav-item active">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 2v6h6M2.66 15.57a10 10 0 1 0 .57-8.38"/></svg>
+            <span>Stats</span>
+        </a>
+    </nav>
+
+</body>
+</html>