diff --git a/Projects/Smart Shopping Budget Assistant/README.md b/Projects/Smart Shopping Budget Assistant/README.md
new file mode 100644
index 00000000..6c67ca93
--- /dev/null
+++ b/Projects/Smart Shopping Budget Assistant/README.md	
@@ -0,0 +1,18 @@
+# Smart Shopping Budget Assistant
+
+A responsive Smart Shopping Budget Assistant that helps users plan shopping trips, create shopping lists, estimate costs, manage budgets, and track expenses.
+
+## Features
+- **Budget Planning**: Set overall shopping budget, create budget categories.
+- **Shopping List Management**: Add/edit/delete items, mark as purchased.
+- **Cost Estimation vs Actual**: Add estimated prices, input actual prices when purchased.
+- **Shopping Dashboard**: See total budget, estimated spending, actual spending, and remaining balance.
+- **Budget Alerts**: Visual warnings when approaching or exceeding limits.
+- **Data Persistence**: Uses LocalStorage to save shopping history and preferences.
+- **Premium UI**: Modern glassmorphism design with responsive layouts and multiple color themes.
+
+## Usage
+Simply open `index.html` in your web browser. All data is saved automatically in your browser's local storage.
+
+## Author
+[MistryVishwa](https://github.com/MistryVishwa)
diff --git a/Projects/Smart Shopping Budget Assistant/index.html b/Projects/Smart Shopping Budget Assistant/index.html
new file mode 100644
index 00000000..62f88523
--- /dev/null
+++ b/Projects/Smart Shopping Budget Assistant/index.html	
@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Smart Shopping Budget Assistant</title>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body data-color-theme="ocean">
+
+    <!-- App Container -->
+    <div class="app-container" id="mainApp">
+        <!-- Sidebar -->
+        <aside class="sidebar glass-panel">
+            <div class="sidebar-header">
+                <div class="brand">
+                    <span class="brand-icon">🛒</span>
+                    <h2>SmartShop</h2>
+                </div>
+            </div>
+            
+            <nav class="sidebar-nav">
+                <a href="#" class="nav-item active" id="navDashboard">
+                    <span class="icon">📊</span> Dashboard
+                </a>
+                <a href="#" class="nav-item" id="navLists">
+                    <span class="icon">📝</span> Shopping List
+                </a>
+                <a href="#" class="nav-item" id="navSettings">
+                    <span class="icon">⚙️</span> Settings
+                </a>
+            </nav>
+
+            <div class="theme-settings panel glass-panel mt-auto">
+                <h3>Theme Settings</h3>
+                <div class="theme-controls">
+                    <button id="themeToggle" class="btn-icon" aria-label="Toggle Dark Mode">🌙</button>
+                    <div class="color-picker">
+                        <button class="color-btn ocean active" data-color="ocean" title="Ocean"></button>
+                        <button class="color-btn emerald" data-color="emerald" title="Emerald"></button>
+                        <button class="color-btn amethyst" data-color="amethyst" title="Amethyst"></button>
+                        <button class="color-btn amber" data-color="amber" title="Amber"></button>
+                        <button class="color-btn ruby" data-color="ruby" title="Ruby"></button>
+                    </div>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <header class="main-header">
+                <div>
+                    <h1 class="page-title" id="pageTitle">Dashboard</h1>
+                    <p class="page-subtitle" id="pageSubtitle">Overview of your budget and spending.</p>
+                </div>
+                <div id="headerActions">
+                    <button id="setBudgetBtn" class="btn btn-secondary shadow-hover mr-2">
+                        Set Total Budget
+                    </button>
+                    <button id="addItemBtn" class="btn btn-primary shadow-hover">
+                        <span class="btn-icon-inner">+</span> Add Item
+                    </button>
+                </div>
+            </header>
+
+            <!-- View: Dashboard Overview -->
+            <div class="view-section" id="dashboardView">
+                <div class="overview-cards">
+                    <div class="card summary-card glass-panel">
+                        <div class="card-icon primary-bg">💰</div>
+                        <div class="card-content">
+                            <h3>Total Budget</h3>
+                            <div class="amount text-primary" id="statTotalBudget">$0.00</div>
+                        </div>
+                    </div>
+                    <div class="card summary-card glass-panel">
+                        <div class="card-icon warning-bg">⏳</div>
+                        <div class="card-content">
+                            <h3>Estimated Spend</h3>
+                            <div class="amount text-warning" id="statEstimated">$0.00</div>
+                        </div>
+                    </div>
+                    <div class="card summary-card glass-panel">
+                        <div class="card-icon danger-bg" id="actualBg">💳</div>
+                        <div class="card-content">
+                            <h3>Actual Spent</h3>
+                            <div class="amount text-danger" id="statActual">$0.00</div>
+                        </div>
+                    </div>
+                    <div class="card summary-card glass-panel">
+                        <div class="card-icon success-bg">📈</div>
+                        <div class="card-content">
+                            <h3>Remaining</h3>
+                            <div class="amount text-success" id="statRemaining">$0.00</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="dashboard-grid">
+                    <div class="card glass-panel">
+                        <div class="card-header-flex">
+                            <h3>Category Breakdown (Actual)</h3>
+                        </div>
+                        <div class="category-breakdown" id="categoryBreakdown">
+                            <!-- Populated by JS -->
+                            <div class="empty-state-sm text-muted">No spending data yet.</div>
+                        </div>
+                    </div>
+
+                    <div class="card glass-panel">
+                        <div class="card-header-flex">
+                            <h3>Budget Alerts</h3>
+                        </div>
+                        <div class="alerts-list" id="alertsList">
+                            <!-- Populated by JS -->
+                            <div class="alert-item success">You are currently within budget limits!</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- View: Shopping List -->
+            <div class="view-section hidden" id="listsView">
+                <div class="filter-bar glass-panel mb-4">
+                    <div class="form-group mb-0" style="width: 250px;">
+                        <div class="select-wrapper">
+                            <select id="filterCategory">
+                                <option value="All">All Categories</option>
+                                <option value="Groceries">Groceries</option>
+                                <option value="Electronics">Electronics</option>
+                                <option value="Clothing">Clothing</option>
+                                <option value="Household">Household Items</option>
+                                <option value="Personal Care">Personal Care</option>
+                                <option value="Stationery">Stationery</option>
+                                <option value="Health">Health Products</option>
+                                <option value="Custom">Custom</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group mb-0">
+                        <label class="checkbox-container">
+                            <input type="checkbox" id="filterPendingOnly">
+                            <span class="checkmark"></span>
+                            Show Pending Only
+                        </label>
+                    </div>
+                </div>
+
+                <div class="shopping-list-grid" id="shoppingListGrid">
+                    <!-- Populated by JS -->
+                </div>
+                <div id="noItemsMsg" class="empty-state hidden">
+                    <span class="empty-icon">🛒</span>
+                    <h2>Your shopping list is empty</h2>
+                    <p>Click "+ Add Item" to start planning your shopping trip.</p>
+                </div>
+            </div>
+
+            <!-- View: Settings -->
+            <div class="view-section hidden" id="settingsView">
+                <div class="card glass-panel mb-4" style="max-width: 600px;">
+                    <h3>Budget Management</h3>
+                    <form id="globalBudgetForm">
+                        <div class="form-group">
+                            <label>Total Global Budget ($)</label>
+                            <input type="number" step="0.01" id="setGlobalBudgetInput" required>
+                        </div>
+                        <button type="submit" class="btn btn-primary w-full shadow-hover">Save Budget</button>
+                    </form>
+                </div>
+                
+                <div class="card glass-panel" style="max-width: 600px; border-left: 5px solid var(--danger);">
+                    <h3 class="text-danger">Danger Zone</h3>
+                    <p class="text-muted mb-4">Clear all shopping data and reset the app to factory settings.</p>
+                    <button class="btn btn-danger w-full shadow-hover" id="clearDataBtn">Clear All Data</button>
+                </div>
+            </div>
+
+        </main>
+    </div>
+
+    <!-- Modal: Add/Edit Item -->
+    <div class="modal-overlay hidden" id="itemModal">
+        <div class="modal glass-modal">
+            <div class="modal-header">
+                <h2 id="itemModalTitle">Add Item</h2>
+                <button class="btn-icon close-modal-btn">✕</button>
+            </div>
+            <form id="itemForm">
+                <input type="hidden" id="itemId">
+                <div class="form-group">
+                    <label>Item Name</label>
+                    <input type="text" id="itemName" required placeholder="e.g. Milk, Headphones">
+                </div>
+                <div class="form-group">
+                    <label>Category</label>
+                    <div class="select-wrapper">
+                        <select id="itemCategory" required>
+                            <option value="Groceries">Groceries</option>
+                            <option value="Electronics">Electronics</option>
+                            <option value="Clothing">Clothing</option>
+                            <option value="Household">Household Items</option>
+                            <option value="Personal Care">Personal Care</option>
+                            <option value="Stationery">Stationery</option>
+                            <option value="Health">Health Products</option>
+                            <option value="Custom">Custom</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="form-grid">
+                    <div class="form-group">
+                        <label>Estimated Price ($)</label>
+                        <input type="number" step="0.01" id="itemEstPrice" required placeholder="0.00">
+                    </div>
+                    <div class="form-group">
+                        <label>Quantity</label>
+                        <input type="number" id="itemQty" required value="1" min="1">
+                    </div>
+                </div>
+                <button type="submit" class="btn btn-primary w-full shadow-hover mt-3">Save Item</button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Modal: Mark Purchased / Checkout Item -->
+    <div class="modal-overlay hidden" id="purchaseModal">
+        <div class="modal glass-modal">
+            <div class="modal-header">
+                <h2>Mark as Purchased</h2>
+                <button class="btn-icon close-modal-btn">✕</button>
+            </div>
+            <form id="purchaseForm">
+                <input type="hidden" id="purchaseItemId">
+                <p class="mb-4" id="purchaseItemDetails">Confirm the actual price paid for the item.</p>
+                <div class="form-group">
+                    <label>Actual Price Paid (Total $)</label>
+                    <input type="number" step="0.01" id="purchaseActualPrice" required placeholder="0.00">
+                </div>
+                <button type="submit" class="btn btn-success w-full shadow-hover mt-3">Confirm Purchase</button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Modal: Quick Budget Set -->
+    <div class="modal-overlay hidden" id="budgetModal">
+        <div class="modal glass-modal">
+            <div class="modal-header">
+                <h2>Set Total Budget</h2>
+                <button class="btn-icon close-modal-btn">✕</button>
+            </div>
+            <form id="quickBudgetForm">
+                <div class="form-group">
+                    <label>Budget Amount ($)</label>
+                    <input type="number" step="0.01" id="quickBudgetInput" required>
+                </div>
+                <button type="submit" class="btn btn-primary w-full shadow-hover mt-3">Save</button>
+            </form>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Projects/Smart Shopping Budget Assistant/project.json b/Projects/Smart Shopping Budget Assistant/project.json
new file mode 100644
index 00000000..0e058d08
--- /dev/null
+++ b/Projects/Smart Shopping Budget Assistant/project.json	
@@ -0,0 +1,17 @@
+{
+  "title": "Smart Shopping Budget Assistant",
+  "description": "Plan purchases, monitor shopping expenses in real time, and stay within your budget.",
+  "author": {
+    "name": "MistryVishwa",
+    "github": "MistryVishwa"
+  },
+  "tags": [
+    "enhancement",
+    "good-first-issue",
+    "javascript",
+    "frontend",
+    "finance",
+    "budgeting"
+  ],
+  "entry": "index.html"
+}
diff --git a/Projects/Smart Shopping Budget Assistant/script.js b/Projects/Smart Shopping Budget Assistant/script.js
new file mode 100644
index 00000000..f2cee8c7
--- /dev/null
+++ b/Projects/Smart Shopping Budget Assistant/script.js	
@@ -0,0 +1,415 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // --- State ---
+    let globalBudget = parseFloat(localStorage.getItem('ssb_budget')) || 0;
+    let shoppingItems = JSON.parse(localStorage.getItem('ssb_items')) || [];
+    
+    // --- DOM Elements ---
+    const themeToggle = document.getElementById('themeToggle');
+    const colorBtns = document.querySelectorAll('.color-btn');
+    
+    // Navigation & Views
+    const navItems = {
+        'dashboard': document.getElementById('navDashboard'),
+        'lists': document.getElementById('navLists'),
+        'settings': document.getElementById('navSettings')
+    };
+    const views = {
+        'dashboard': document.getElementById('dashboardView'),
+        'lists': document.getElementById('listsView'),
+        'settings': document.getElementById('settingsView')
+    };
+    const pageTitle = document.getElementById('pageTitle');
+    const pageSubtitle = document.getElementById('pageSubtitle');
+    const headerActions = document.getElementById('headerActions');
+    
+    // Modals
+    const itemModal = document.getElementById('itemModal');
+    const purchaseModal = document.getElementById('purchaseModal');
+    const budgetModal = document.getElementById('budgetModal');
+
+    // Forms
+    const itemForm = document.getElementById('itemForm');
+    const purchaseForm = document.getElementById('purchaseForm');
+    const quickBudgetForm = document.getElementById('quickBudgetForm');
+    const globalBudgetForm = document.getElementById('globalBudgetForm');
+
+    // Filters
+    const filterCategory = document.getElementById('filterCategory');
+    const filterPendingOnly = document.getElementById('filterPendingOnly');
+
+    // --- Initialization ---
+    if (localStorage.getItem('ssb_theme') === 'dark') {
+        document.body.setAttribute('data-theme', 'dark');
+        themeToggle.textContent = '☀️';
+    }
+    const savedColorTheme = localStorage.getItem('ssb_color_theme') || 'ocean';
+    document.body.setAttribute('data-color-theme', savedColorTheme);
+    colorBtns.forEach(btn => {
+        if (btn.dataset.color === savedColorTheme) btn.classList.add('active');
+        else btn.classList.remove('active');
+    });
+
+    // Populate initial inputs
+    document.getElementById('setGlobalBudgetInput').value = globalBudget || '';
+    document.getElementById('quickBudgetInput').value = globalBudget || '';
+
+    // --- Utility Functions ---
+    const saveData = () => {
+        localStorage.setItem('ssb_budget', globalBudget);
+        localStorage.setItem('ssb_items', JSON.stringify(shoppingItems));
+        renderDashboard();
+        if (!views.lists.classList.contains('hidden')) renderShoppingList();
+    };
+
+    const formatCurrency = (amount) => {
+        return '$' + parseFloat(amount).toFixed(2);
+    };
+
+    // --- Navigation ---
+    const switchView = (viewName, title, subtitle, showActions = true) => {
+        Object.values(views).forEach(v => v.classList.add('hidden'));
+        Object.values(navItems).forEach(n => n.classList.remove('active'));
+        
+        views[viewName].classList.remove('hidden');
+        navItems[viewName].classList.add('active');
+        
+        pageTitle.textContent = title;
+        pageSubtitle.textContent = subtitle;
+        headerActions.style.display = showActions ? 'flex' : 'none';
+    };
+
+    navItems.dashboard.addEventListener('click', (e) => {
+        e.preventDefault();
+        switchView('dashboard', 'Dashboard', 'Overview of your budget and spending.');
+        renderDashboard();
+    });
+
+    navItems.lists.addEventListener('click', (e) => {
+        e.preventDefault();
+        switchView('lists', 'Shopping List', 'Manage your planned purchases.');
+        renderShoppingList();
+    });
+
+    navItems.settings.addEventListener('click', (e) => {
+        e.preventDefault();
+        switchView('settings', 'Settings', 'Configure app preferences.', false);
+    });
+
+    // --- Theme Toggles ---
+    themeToggle.addEventListener('click', () => {
+        const isDark = document.body.hasAttribute('data-theme');
+        if (isDark) {
+            document.body.removeAttribute('data-theme');
+            themeToggle.textContent = '🌙';
+            localStorage.setItem('ssb_theme', 'light');
+        } else {
+            document.body.setAttribute('data-theme', 'dark');
+            themeToggle.textContent = '☀️';
+            localStorage.setItem('ssb_theme', 'dark');
+        }
+    });
+
+    colorBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const color = btn.dataset.color;
+            document.body.setAttribute('data-color-theme', color);
+            localStorage.setItem('ssb_color_theme', color);
+            colorBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+        });
+    });
+
+    // --- Modal Management ---
+    document.querySelectorAll('.close-modal-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.target.closest('.modal-overlay').classList.add('hidden');
+        });
+    });
+
+    document.getElementById('setBudgetBtn').addEventListener('click', () => {
+        document.getElementById('quickBudgetInput').value = globalBudget || '';
+        budgetModal.classList.remove('hidden');
+    });
+
+    document.getElementById('addItemBtn').addEventListener('click', () => {
+        itemForm.reset();
+        document.getElementById('itemId').value = '';
+        document.getElementById('itemModalTitle').textContent = 'Add Item';
+        itemModal.classList.remove('hidden');
+    });
+
+    // --- Form Submissions ---
+    quickBudgetForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        globalBudget = parseFloat(document.getElementById('quickBudgetInput').value) || 0;
+        document.getElementById('setGlobalBudgetInput').value = globalBudget;
+        budgetModal.classList.add('hidden');
+        saveData();
+    });
+
+    globalBudgetForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        globalBudget = parseFloat(document.getElementById('setGlobalBudgetInput').value) || 0;
+        document.getElementById('quickBudgetInput').value = globalBudget;
+        alert("Budget updated successfully!");
+        saveData();
+    });
+
+    itemForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const idInput = document.getElementById('itemId').value;
+        const name = document.getElementById('itemName').value;
+        const category = document.getElementById('itemCategory').value;
+        const estPrice = parseFloat(document.getElementById('itemEstPrice').value) || 0;
+        const qty = parseInt(document.getElementById('itemQty').value) || 1;
+
+        if (idInput) {
+            // Edit existing
+            const item = shoppingItems.find(i => i.id === idInput);
+            if (item) {
+                item.name = name;
+                item.category = category;
+                item.estPrice = estPrice;
+                item.qty = qty;
+            }
+        } else {
+            // Add new
+            shoppingItems.push({
+                id: Date.now().toString(),
+                name, category, estPrice, qty,
+                purchased: false, actualPrice: 0
+            });
+        }
+        itemModal.classList.add('hidden');
+        saveData();
+    });
+
+    purchaseForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const id = document.getElementById('purchaseItemId').value;
+        const actualPrice = parseFloat(document.getElementById('purchaseActualPrice').value) || 0;
+        
+        const item = shoppingItems.find(i => i.id === id);
+        if (item) {
+            item.purchased = true;
+            item.actualPrice = actualPrice;
+        }
+        purchaseModal.classList.add('hidden');
+        saveData();
+    });
+
+    document.getElementById('clearDataBtn').addEventListener('click', () => {
+        if (confirm("Are you sure? This will delete all shopping lists and budget settings.")) {
+            localStorage.removeItem('ssb_budget');
+            localStorage.removeItem('ssb_items');
+            globalBudget = 0;
+            shoppingItems = [];
+            document.getElementById('setGlobalBudgetInput').value = '';
+            document.getElementById('quickBudgetInput').value = '';
+            saveData();
+            navItems.dashboard.click();
+        }
+    });
+
+    // --- Item Actions (Global) ---
+    window.editItem = (id) => {
+        const item = shoppingItems.find(i => i.id === id);
+        if (item) {
+            document.getElementById('itemId').value = item.id;
+            document.getElementById('itemName').value = item.name;
+            document.getElementById('itemCategory').value = item.category;
+            document.getElementById('itemEstPrice').value = item.estPrice;
+            document.getElementById('itemQty').value = item.qty;
+            document.getElementById('itemModalTitle').textContent = 'Edit Item';
+            itemModal.classList.remove('hidden');
+        }
+    };
+
+    window.deleteItem = (id) => {
+        if (confirm("Delete this item from your list?")) {
+            shoppingItems = shoppingItems.filter(i => i.id !== id);
+            saveData();
+        }
+    };
+
+    window.markPurchased = (id) => {
+        const item = shoppingItems.find(i => i.id === id);
+        if (item) {
+            document.getElementById('purchaseItemId').value = item.id;
+            document.getElementById('purchaseItemDetails').innerHTML = `Item: <strong>${item.name}</strong><br>Estimated Total: <strong>${formatCurrency(item.estPrice * item.qty)}</strong>`;
+            document.getElementById('purchaseActualPrice').value = (item.estPrice * item.qty).toFixed(2);
+            purchaseModal.classList.remove('hidden');
+        }
+    };
+
+    window.unmarkPurchased = (id) => {
+        const item = shoppingItems.find(i => i.id === id);
+        if (item) {
+            item.purchased = false;
+            item.actualPrice = 0;
+            saveData();
+        }
+    };
+
+    // Filters
+    filterCategory.addEventListener('change', renderShoppingList);
+    filterPendingOnly.addEventListener('change', renderShoppingList);
+
+    // --- Render Functions ---
+    const renderDashboard = () => {
+        let estTotal = 0;
+        let actualTotal = 0;
+
+        // Calculate totals
+        shoppingItems.forEach(i => {
+            estTotal += (i.estPrice * i.qty);
+            if (i.purchased) {
+                actualTotal += i.actualPrice;
+            }
+        });
+
+        const remaining = globalBudget - actualTotal;
+
+        // Update Stats
+        document.getElementById('statTotalBudget').textContent = formatCurrency(globalBudget);
+        document.getElementById('statEstimated').textContent = formatCurrency(estTotal);
+        document.getElementById('statActual').textContent = formatCurrency(actualTotal);
+        
+        const remEl = document.getElementById('statRemaining');
+        remEl.textContent = formatCurrency(remaining);
+        
+        if (remaining < 0) {
+            remEl.className = 'amount text-danger';
+            document.getElementById('actualBg').className = 'card-icon danger-bg';
+        } else {
+            remEl.className = 'amount text-success';
+            document.getElementById('actualBg').className = 'card-icon warning-bg'; // reset to default
+        }
+
+        // Render Alerts
+        const alertsList = document.getElementById('alertsList');
+        alertsList.innerHTML = '';
+        if (globalBudget === 0) {
+            alertsList.innerHTML = '<div class="alert-item warning">Please set a Total Budget to enable alerts.</div>';
+        } else {
+            if (actualTotal > globalBudget) {
+                alertsList.innerHTML += `<div class="alert-item danger">⚠️ You have exceeded your budget by ${formatCurrency(actualTotal - globalBudget)}!</div>`;
+            } else if (actualTotal > globalBudget * 0.9) {
+                alertsList.innerHTML += `<div class="alert-item warning">⚠️ Warning: You have spent over 90% of your budget.</div>`;
+            } else if (estTotal > globalBudget) {
+                alertsList.innerHTML += `<div class="alert-item warning">📋 Notice: Your estimated shopping list total exceeds your budget.</div>`;
+            } else {
+                alertsList.innerHTML += `<div class="alert-item success">✅ You are currently within budget limits.</div>`;
+            }
+        }
+
+        // Category Breakdown
+        const breakdownEl = document.getElementById('categoryBreakdown');
+        breakdownEl.innerHTML = '';
+        
+        const catSpent = {};
+        shoppingItems.forEach(i => {
+            if (i.purchased) {
+                catSpent[i.category] = (catSpent[i.category] || 0) + i.actualPrice;
+            }
+        });
+
+        const categories = Object.keys(catSpent).sort((a,b) => catSpent[b] - catSpent[a]);
+
+        if (categories.length === 0) {
+            breakdownEl.innerHTML = '<div class="empty-state-sm text-muted">No purchased items yet.</div>';
+        } else {
+            categories.forEach(cat => {
+                const amount = catSpent[cat];
+                const pct = actualTotal > 0 ? (amount / actualTotal) * 100 : 0;
+                breakdownEl.innerHTML += `
+                    <div class="cat-item">
+                        <div class="cat-header">
+                            <span>${cat}</span>
+                            <span>${formatCurrency(amount)} (${Math.round(pct)}%)</span>
+                        </div>
+                        <div class="cat-bar-bg">
+                            <div class="cat-bar-fill" style="width: ${pct}%"></div>
+                        </div>
+                    </div>
+                `;
+            });
+        }
+    };
+
+    const renderShoppingList = () => {
+        const grid = document.getElementById('shoppingListGrid');
+        const msg = document.getElementById('noItemsMsg');
+        
+        const catFilter = filterCategory.value;
+        const pendingFilter = filterPendingOnly.checked;
+
+        let filteredItems = shoppingItems.filter(i => {
+            if (catFilter !== 'All' && i.category !== catFilter) return false;
+            if (pendingFilter && i.purchased) return false;
+            return true;
+        });
+
+        grid.innerHTML = '';
+        if (filteredItems.length === 0) {
+            msg.classList.remove('hidden');
+        } else {
+            msg.classList.add('hidden');
+            // Sort: pending first, then by category
+            filteredItems.sort((a, b) => {
+                if (a.purchased === b.purchased) return a.category.localeCompare(b.category);
+                return a.purchased ? 1 : -1;
+            });
+
+            filteredItems.forEach(i => {
+                const estTotal = i.estPrice * i.qty;
+                const isPurchasedClass = i.purchased ? 'purchased' : '';
+                
+                let actionsHTML = '';
+                if (i.purchased) {
+                    actionsHTML = `
+                        <button class="btn btn-secondary btn-sm flex-1" onclick="unmarkPurchased('${i.id}')">Undo Purchase</button>
+                        <button class="btn btn-danger btn-sm" onclick="deleteItem('${i.id}')" title="Delete">✕</button>
+                    `;
+                } else {
+                    actionsHTML = `
+                        <button class="btn btn-success btn-sm flex-1" onclick="markPurchased('${i.id}')">✓ Mark Bought</button>
+                        <button class="btn btn-secondary btn-sm" onclick="editItem('${i.id}')" title="Edit">✎</button>
+                        <button class="btn btn-danger btn-sm" onclick="deleteItem('${i.id}')" title="Delete">✕</button>
+                    `;
+                }
+
+                grid.innerHTML += `
+                    <div class="item-card ${isPurchasedClass}">
+                        <div class="item-header">
+                            <div>
+                                <h4>${i.name}</h4>
+                                <span class="item-cat">${i.category}</span>
+                            </div>
+                        </div>
+                        <div class="item-stats">
+                            <div class="item-stat-box" style="flex:1">
+                                <span class="item-stat-label">Qty</span>
+                                <span class="item-stat-val">${i.qty}</span>
+                            </div>
+                            <div class="item-stat-box" style="flex:1">
+                                <span class="item-stat-label">Est. Total</span>
+                                <span class="item-stat-val">${formatCurrency(estTotal)}</span>
+                            </div>
+                            <div class="item-stat-box" style="flex:1">
+                                <span class="item-stat-label">Actual</span>
+                                <span class="item-stat-val actual">${i.purchased ? formatCurrency(i.actualPrice) : '-'}</span>
+                            </div>
+                        </div>
+                        <div class="item-actions">
+                            ${actionsHTML}
+                        </div>
+                    </div>
+                `;
+            });
+        }
+    };
+
+    // Boot Up
+    renderDashboard();
+});
diff --git a/Projects/Smart Shopping Budget Assistant/style.css b/Projects/Smart Shopping Budget Assistant/style.css
new file mode 100644
index 00000000..375fb81e
--- /dev/null
+++ b/Projects/Smart Shopping Budget Assistant/style.css	
@@ -0,0 +1,369 @@
+/* Base Variables & Theming */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
+
+:root {
+    --success: #10b981;
+    --success-hover: #059669;
+    --danger: #ef4444;
+    --warning: #f59e0b;
+    --font-main: 'Outfit', sans-serif;
+    
+    /* Default Ocean Theme */
+    --primary: #0284c7;
+    --primary-hover: #0369a1;
+    --primary-light: rgba(2, 132, 199, 0.15);
+    --primary-gradient: linear-gradient(135deg, #0ea5e9, #0284c7);
+    
+    /* Light Mode Basics */
+    --bg-body: #f0f9ff;
+    --bg-glass: rgba(255, 255, 255, 0.75);
+    --bg-panel: rgba(255, 255, 255, 0.9);
+    --text-main: #0f172a;
+    --text-muted: #64748b;
+    --border-color: rgba(255, 255, 255, 0.5);
+    --border-glass: 1px solid rgba(255, 255, 255, 0.6);
+    
+    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
+    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
+    --shadow-glow: 0 0 20px var(--primary-light);
+    
+    --radius-md: 16px;
+    --radius-lg: 24px;
+    --radius-xl: 32px;
+}
+
+/* Extended Color Themes */
+[data-color-theme="emerald"] {
+    --primary: #059669; --primary-hover: #047857;
+    --primary-light: rgba(5, 150, 105, 0.15);
+    --primary-gradient: linear-gradient(135deg, #10b981, #047857);
+    --bg-body: #ecfdf5;
+}
+[data-color-theme="amethyst"] {
+    --primary: #8b5cf6; --primary-hover: #7c3aed;
+    --primary-light: rgba(139, 92, 246, 0.15);
+    --primary-gradient: linear-gradient(135deg, #a78bfa, #7c3aed);
+    --bg-body: #f5f3ff;
+}
+[data-color-theme="ruby"] {
+    --primary: #e11d48; --primary-hover: #be123c;
+    --primary-light: rgba(225, 29, 72, 0.15);
+    --primary-gradient: linear-gradient(135deg, #fb7185, #e11d48);
+    --bg-body: #fff1f2;
+}
+[data-color-theme="amber"] {
+    --primary: #d97706; --primary-hover: #b45309;
+    --primary-light: rgba(217, 119, 6, 0.15);
+    --primary-gradient: linear-gradient(135deg, #fbbf24, #d97706);
+    --bg-body: #fffbeb;
+}
+
+/* Dark Mode */
+[data-theme="dark"] {
+    --bg-body: #0f172a;
+    --bg-glass: rgba(30, 41, 59, 0.65);
+    --bg-panel: rgba(30, 41, 59, 0.85);
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --border-color: rgba(255, 255, 255, 0.08);
+    --border-glass: 1px solid rgba(255, 255, 255, 0.08);
+    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.2);
+    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.3);
+    --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.4);
+}
+
+/* Reset & Setup */
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+    font-family: var(--font-main);
+    background-color: var(--bg-body);
+    background-image: 
+        radial-gradient(circle at 20% 40%, var(--primary-light) 0%, transparent 45%),
+        radial-gradient(circle at 80% 60%, rgba(16, 185, 129, 0.1) 0%, transparent 45%);
+    background-attachment: fixed;
+    color: var(--text-main);
+    transition: background-color 0.5s ease, color 0.5s ease;
+    -webkit-font-smoothing: antialiased;
+}
+
+/* Utilities */
+.text-primary { color: var(--primary); }
+.text-success { color: var(--success); }
+.text-danger { color: var(--danger); }
+.text-warning { color: var(--warning); }
+.fw-bold { font-weight: 700; }
+.hidden { display: none !important; }
+.w-full { width: 100%; }
+.mt-3 { margin-top: 15px; }
+.mt-4 { margin-bottom: 25px; }
+.mb-0 { margin-bottom: 0 !important; }
+.mb-4 { margin-bottom: 25px; }
+.mr-2 { margin-right: 10px; }
+.mt-auto { margin-top: auto; }
+
+/* Glassmorphism */
+.glass-panel {
+    background: var(--bg-glass);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    border: var(--border-glass);
+    box-shadow: var(--shadow-md);
+}
+
+.glass-modal {
+    background: var(--bg-panel);
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(30px);
+    border: var(--border-glass);
+}
+
+/* App Container */
+.app-container {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+    animation: fadeIn 0.5s ease forwards;
+}
+
+/* Buttons */
+.btn {
+    padding: 14px 28px;
+    border-radius: 14px;
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
+    font-family: inherit;
+    border: none;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.btn-primary { background: var(--primary-gradient); color: white; box-shadow: 0 4px 15px var(--primary-light); }
+.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); }
+
+.btn-secondary { background: var(--bg-body); border: var(--border-glass); color: var(--text-main); }
+.btn-secondary:hover { background: var(--primary-light); color: var(--primary); border-color: transparent; }
+
+.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
+.btn-danger:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(220, 38, 38, 0.2); }
+
+.btn-success { background: linear-gradient(135deg, #10b981, #059669); color: white; }
+.btn-success:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2); }
+
+.btn-icon {
+    background: transparent; border: none; color: var(--text-main); font-size: 1.4rem;
+    cursor: pointer; padding: 10px; border-radius: 50%; transition: all 0.3s ease;
+    display: flex; align-items: center; justify-content: center;
+}
+.btn-icon:hover { background: var(--primary-light); color: var(--primary); transform: rotate(15deg); }
+
+.btn-sm { padding: 8px 16px; font-size: 0.9rem; border-radius: 10px; }
+
+/* Sidebar */
+.sidebar {
+    width: 290px;
+    margin: 20px 0 20px 20px;
+    border-radius: var(--radius-lg);
+    padding: 30px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    z-index: 10;
+}
+
+.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 0 10px; }
+.brand-icon { font-size: 2.2rem; }
+.brand h2 {
+    font-size: 1.6rem; font-weight: 800;
+    background: var(--primary-gradient);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+}
+
+.sidebar-nav { display: flex; flex-direction: column; gap: 8px; }
+
+.nav-item {
+    padding: 15px 20px; text-decoration: none; color: var(--text-muted);
+    border-radius: 14px; font-weight: 600; font-size: 1.05rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex; align-items: center; gap: 14px;
+}
+.nav-item .icon { font-size: 1.25rem; }
+
+.nav-item:hover, .nav-item.active {
+    background: var(--primary-gradient); color: white;
+    box-shadow: 0 8px 20px var(--primary-light); transform: translateX(5px);
+}
+
+.panel { padding: 20px; border-radius: var(--radius-md); border: var(--border-glass); }
+.panel h3 { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
+
+.theme-controls { display: flex; align-items: center; justify-content: space-between; }
+.color-picker { display: flex; gap: 8px; }
+.color-btn {
+    width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
+    cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+.color-btn:hover { transform: scale(1.15); }
+.color-btn.active { border-color: var(--text-main); transform: scale(1.15); box-shadow: 0 0 0 3px var(--bg-body), 0 0 0 5px var(--text-main); }
+.color-btn.ocean { background: #0284c7; }
+.color-btn.emerald { background: #059669; }
+.color-btn.amethyst { background: #8b5cf6; }
+.color-btn.ruby { background: #e11d48; }
+.color-btn.amber { background: #d97706; }
+
+/* Main Content */
+.main-content {
+    flex: 1; overflow-y: auto; padding: 30px 40px; position: relative; scroll-behavior: smooth;
+}
+.main-content::-webkit-scrollbar { width: 8px; }
+.main-content::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
+
+.main-header {
+    display: flex; justify-content: space-between; align-items: center;
+    margin-bottom: 45px; animation: fadeInDown 0.6s ease;
+}
+
+.page-title { font-size: 2.5rem; font-weight: 800; color: var(--text-main); letter-spacing: -0.03em; }
+.page-subtitle { color: var(--text-muted); font-size: 1.1rem; margin-top: 5px; }
+
+.card { border-radius: var(--radius-lg); padding: 30px; transition: transform 0.4s ease, box-shadow 0.4s ease; }
+.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
+.card h3 { font-size: 1.3rem; margin-bottom: 25px; color: var(--text-main); font-weight: 800; }
+.card-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
+.card-header-flex h3 { margin-bottom: 0; }
+
+/* Overview Cards */
+.overview-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 25px; margin-bottom: 35px; }
+.summary-card { display: flex; align-items: center; gap: 20px; padding: 25px; }
+.card-icon {
+    width: 65px; height: 65px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
+    font-size: 2rem; box-shadow: inset 0 0 20px rgba(255,255,255,0.5);
+}
+.primary-bg { background: var(--primary-light); }
+.warning-bg { background: rgba(217, 119, 6, 0.15); }
+.danger-bg { background: rgba(239, 68, 68, 0.15); }
+.success-bg { background: rgba(16, 185, 129, 0.15); }
+
+.summary-card h3 { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.05em; }
+.summary-card .amount { font-size: 2.2rem; font-weight: 800; line-height: 1; }
+
+.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
+
+/* Category Breakdown */
+.category-breakdown { display: flex; flex-direction: column; gap: 15px; }
+.cat-item { display: flex; flex-direction: column; gap: 8px; }
+.cat-header { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.95rem; }
+.cat-bar-bg { height: 8px; background: var(--border-color); border-radius: 4px; overflow: hidden; }
+.cat-bar-fill { height: 100%; background: var(--primary-gradient); border-radius: 4px; transition: width 1s ease; }
+
+/* Alerts List */
+.alerts-list { display: flex; flex-direction: column; gap: 15px; }
+.alert-item {
+    padding: 15px 20px; border-radius: 12px; font-weight: 600; font-size: 0.95rem;
+    border-left: 4px solid transparent; background: var(--bg-body);
+}
+.alert-item.danger { border-left-color: var(--danger); color: var(--danger); background: rgba(239, 68, 68, 0.1); }
+.alert-item.warning { border-left-color: var(--warning); color: var(--warning); background: rgba(245, 158, 11, 0.1); }
+.alert-item.success { border-left-color: var(--success); color: var(--success); background: rgba(16, 185, 129, 0.1); }
+
+/* Filter Bar */
+.filter-bar { padding: 15px 25px; border-radius: var(--radius-md); display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
+
+/* Shopping List Grid */
+.shopping-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 25px; }
+.item-card {
+    background: var(--bg-panel); padding: 25px; border-radius: var(--radius-lg);
+    border: var(--border-glass); box-shadow: var(--shadow-sm); position: relative;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+.item-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
+.item-card.purchased { opacity: 0.75; }
+.item-card.purchased::after {
+    content: "Purchased"; position: absolute; top: 15px; right: 15px;
+    background: var(--success); color: white; padding: 4px 10px; border-radius: 8px;
+    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
+}
+
+.item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
+.item-header h4 { font-size: 1.3rem; font-weight: 800; color: var(--text-main); margin-bottom: 4px; }
+.item-cat { font-size: 0.85rem; color: var(--primary); font-weight: 600; background: var(--primary-light); padding: 4px 10px; border-radius: 20px; display: inline-block; }
+
+.item-stats { display: flex; gap: 20px; margin-bottom: 20px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 12px 0; }
+.item-stat-box { display: flex; flex-direction: column; }
+.item-stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
+.item-stat-val { font-size: 1.1rem; font-weight: 800; color: var(--text-main); }
+.item-stat-val.actual { color: var(--danger); }
+
+.item-actions { display: flex; gap: 10px; }
+
+/* Modals & Forms */
+.modal-overlay {
+    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(8px);
+    display: flex; align-items: center; justify-content: center; z-index: 100;
+    opacity: 1; transition: opacity 0.3s ease;
+}
+.modal-overlay.hidden { opacity: 0; pointer-events: none; display: flex !important; }
+
+.modal {
+    width: 90%; max-width: 500px; border-radius: var(--radius-xl); padding: 40px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+    transform: scale(1) translateY(0); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.modal-overlay.hidden .modal { transform: scale(0.95) translateY(20px); }
+
+.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
+.modal-header h2 { font-size: 1.8rem; font-weight: 800; color: var(--text-main); }
+
+.form-group { margin-bottom: 22px; text-align: left; }
+.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+.form-group label { display: block; margin-bottom: 10px; font-size: 0.95rem; font-weight: 700; color: var(--text-main); }
+
+.form-group input, .form-group select {
+    width: 100%; padding: 15px 18px; border: 1.5px solid var(--border-color); border-radius: 14px;
+    background: var(--bg-body); color: var(--text-main); font-family: inherit; font-size: 1rem; font-weight: 500;
+    transition: all 0.3s;
+}
+.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); background: var(--bg-panel); }
+
+.select-wrapper { position: relative; }
+.select-wrapper::after { content: "▼"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 0.8rem; color: var(--text-muted); pointer-events: none; }
+.form-group select { appearance: none; padding-right: 40px; cursor: pointer; }
+
+/* Custom Checkbox */
+.checkbox-container { display: flex; align-items: center; position: relative; padding-left: 35px; cursor: pointer; font-size: 1rem; font-weight: 600; user-select: none; }
+.checkbox-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
+.checkmark { position: absolute; top: 0; left: 0; height: 24px; width: 24px; background-color: var(--bg-body); border: 2px solid var(--border-color); border-radius: 6px; transition: all 0.2s; }
+.checkbox-container:hover input ~ .checkmark { border-color: var(--primary); }
+.checkbox-container input:checked ~ .checkmark { background-color: var(--primary); border-color: var(--primary); }
+.checkmark:after { content: ""; position: absolute; display: none; left: 8px; top: 4px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
+.checkbox-container input:checked ~ .checkmark:after { display: block; }
+
+.empty-state { text-align: center; padding: 100px 20px; color: var(--text-muted); }
+.empty-icon { font-size: 4rem; display: block; margin-bottom: 20px; animation: float 3s ease-in-out infinite; }
+.empty-state h2 { font-size: 1.8rem; color: var(--text-main); margin-bottom: 10px; }
+.empty-state-sm { text-align: center; padding: 30px; font-style: italic; font-size: 1rem; }
+
+/* Animations */
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
+
+/* Responsive */
+@media (max-width: 1024px) {
+    .dashboard-grid { grid-template-columns: 1fr; }
+}
+@media (max-width: 768px) {
+    .app-container { flex-direction: column; overflow-y: auto; }
+    .sidebar { width: auto; margin: 0; border-radius: 0; padding: 20px; border-bottom: var(--border-glass); gap: 20px; }
+    .main-content { padding: 20px; }
+    .main-header { flex-direction: column; align-items: flex-start; gap: 20px; }
+    #headerActions { width: 100%; display: flex; gap: 10px; }
+    #headerActions button { flex: 1; }
+    .form-grid { grid-template-columns: 1fr; gap: 15px; }
+}
