diff --git a/Projects/Home Renovation Budget Planner/README.md b/Projects/Home Renovation Budget Planner/README.md
new file mode 100644
index 00000000..26eb1015
--- /dev/null
+++ b/Projects/Home Renovation Budget Planner/README.md	
@@ -0,0 +1,29 @@
+# 🏗️ Home Renovation Budget Planner
+
+A responsive Home Renovation Budget Planner that helps homeowners, property investors, and interior designers plan renovation budgets and monitor project expenses.
+
+## Features
+
+- **Dashboard Overview**: See your Total Budget, Total Spent, and Remaining balance at a glance.
+- **Budget Utilization Bar**: A visual progress bar that turns warning yellow at 80% capacity, and danger red when exceeding 100%.
+- **Category Breakdown**: View exactly how much you're spending on categories like Interior Design, Painting, Flooring, Plumbing, etc.
+- **Expense History**: Keep track of every single expense with its description, amount, and date.
+- **Data Persistence**: Automatically saves all your data, budget, and project name in `LocalStorage` so you won't lose your work on refresh.
+- **Theme Support**: Includes both Light and Dark mode options.
+- **Navigation**: Switch cleanly between the visual Dashboard and the tabular Expenses views.
+
+## How to Run
+
+1. Clone the repository.
+2. Navigate to `Projects/home-renovation-budget-planner/`.
+3. Open `index.html` in your web browser.
+
+## Technologies Used
+
+- HTML5 (Semantic Structure)
+- CSS3 (Variables, Grid, Flexbox, Responsive Design)
+- Vanilla JavaScript (LocalStorage API, DOM manipulation, Expense Logic)
+
+## Author
+
+- [MistryVishwa](https://github.com/MistryVishwa)
diff --git a/Projects/Home Renovation Budget Planner/index.html b/Projects/Home Renovation Budget Planner/index.html
new file mode 100644
index 00000000..78bc0378
--- /dev/null
+++ b/Projects/Home Renovation Budget Planner/index.html	
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home Renovation Budget Planner</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body data-color-theme="indigo">
+    <div class="app-container">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <div class="brand">
+                    <span class="brand-icon">✨</span>
+                    <h2>RenoPlanner</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="navExpenses">
+                    <span class="icon">💸</span> Expenses
+                </a>
+            </nav>
+
+            <div class="project-info panel glass">
+                <h3>Current Project</h3>
+                <input type="text" id="projectName" placeholder="Enter project name..." value="My Home Renovation">
+                <div class="budget-input">
+                    <label>Total Budget ($)</label>
+                    <input type="number" id="totalBudget" value="50000" min="0">
+                </div>
+            </div>
+
+            <div class="theme-settings panel glass">
+                <h3>Theme Customization</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 indigo active" data-color="indigo"></button>
+                        <button class="color-btn emerald" data-color="emerald"></button>
+                        <button class="color-btn rose" data-color="rose"></button>
+                        <button class="color-btn amber" data-color="amber"></button>
+                    </div>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <header class="main-header">
+                <div>
+                    <h1 class="page-title">Budget Dashboard</h1>
+                    <p class="page-subtitle">Track your renovation expenses in real-time.</p>
+                </div>
+                <button id="addExpenseBtn" class="btn btn-primary shadow-hover">+ Add Expense</button>
+            </header>
+
+            <div class="dashboard-grid" id="dashboardView">
+                <!-- Overview Cards -->
+                <div class="overview-cards">
+                    <div class="card summary-card glass">
+                        <div class="card-icon primary-bg">💰</div>
+                        <div class="card-content">
+                            <h3>Total Budget</h3>
+                            <div class="amount text-primary" id="displayTotalBudget">$0</div>
+                        </div>
+                    </div>
+                    <div class="card summary-card glass">
+                        <div class="card-icon danger-bg">📉</div>
+                        <div class="card-content">
+                            <h3>Total Spent</h3>
+                            <div class="amount text-danger" id="displayTotalSpent">$0</div>
+                        </div>
+                    </div>
+                    <div class="card summary-card glass">
+                        <div class="card-icon success-bg">📈</div>
+                        <div class="card-content">
+                            <h3>Remaining</h3>
+                            <div class="amount text-success" id="displayRemaining">$0</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="dashboard-bottom-grid">
+                    <!-- Progress Bar -->
+                    <div class="card progress-card glass">
+                        <h3>Budget Utilization</h3>
+                        <div class="progress-wrapper">
+                            <div class="progress-container">
+                                <div class="progress-bar" id="budgetProgressBar"></div>
+                            </div>
+                            <div class="progress-labels">
+                                <span>0%</span>
+                                <span class="progress-text fw-bold" id="budgetProgressText">0% Used</span>
+                                <span>100%</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Category Breakdown -->
+                    <div class="card category-card glass">
+                        <h3>Spending by Category</h3>
+                        <div class="category-list" id="categoryBreakdown">
+                            <!-- Populated by JS -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Expenses View (Hidden by default) -->
+            <div class="expenses-view hidden" id="expensesView">
+                <div class="card glass full-height">
+                    <h3>Expense History</h3>
+                    <div class="table-container">
+                        <table class="expense-table">
+                            <thead>
+                                <tr>
+                                    <th>Date</th>
+                                    <th>Description</th>
+                                    <th>Category</th>
+                                    <th>Amount</th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody id="expenseTableBody">
+                                <!-- Populated by JS -->
+                            </tbody>
+                        </table>
+                        <div id="noExpensesMsg" class="empty-state">
+                            <span class="empty-icon">📄</span>
+                            <p>No expenses added yet.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Add Expense Modal -->
+    <div class="modal-overlay hidden" id="expenseModal">
+        <div class="modal glass-modal">
+            <div class="modal-header">
+                <h2>Add New Expense</h2>
+                <button id="closeModalBtn" class="btn-icon">×</button>
+            </div>
+            <form id="expenseForm">
+                <div class="form-group">
+                    <label>Description</label>
+                    <input type="text" id="expDesc" required placeholder="e.g. Living room paint">
+                </div>
+                <div class="form-group">
+                    <label>Amount ($)</label>
+                    <input type="number" id="expAmount" required min="0.01" step="0.01">
+                </div>
+                <div class="form-group">
+                    <label>Category</label>
+                    <select id="expCategory" required>
+                        <option value="Interior Design">Interior Design</option>
+                        <option value="Painting">Painting</option>
+                        <option value="Flooring">Flooring</option>
+                        <option value="Furniture">Furniture</option>
+                        <option value="Plumbing">Plumbing</option>
+                        <option value="Electrical">Electrical Work</option>
+                        <option value="Kitchen">Kitchen Renovation</option>
+                        <option value="Bathroom">Bathroom Renovation</option>
+                        <option value="Landscaping">Landscaping</option>
+                        <option value="Misc">Miscellaneous</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label>Date</label>
+                    <input type="date" id="expDate" required>
+                </div>
+                <button type="submit" class="btn btn-primary w-full shadow-hover">Save Expense</button>
+            </form>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Projects/Home Renovation Budget Planner/project.json b/Projects/Home Renovation Budget Planner/project.json
new file mode 100644
index 00000000..608ee980
--- /dev/null
+++ b/Projects/Home Renovation Budget Planner/project.json	
@@ -0,0 +1,17 @@
+{
+  "title": "Home Renovation Budget Planner",
+  "description": "Create a responsive Home Renovation Budget Planner using HTML, CSS, and JavaScript that helps hom...",
+  "author": {
+    "name": "MistryVishwa",
+    "github": "MistryVishwa"
+  },
+  "tags": [
+    "enhancement",
+    "good-first-issue",
+    "javascript",
+    "frontend",
+    "finance",
+    "budgeting"
+  ],
+  "entry": "index.html"
+}
diff --git a/Projects/Home Renovation Budget Planner/script.js b/Projects/Home Renovation Budget Planner/script.js
new file mode 100644
index 00000000..622b4d32
--- /dev/null
+++ b/Projects/Home Renovation Budget Planner/script.js	
@@ -0,0 +1,265 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // State
+    let expenses = JSON.parse(localStorage.getItem('renoExpenses')) || [];
+    let totalBudget = parseFloat(localStorage.getItem('renoTotalBudget')) || 50000;
+    let projectName = localStorage.getItem('renoProjectName') || 'My Home Renovation';
+
+    // DOM Elements - Sidebar
+    const themeToggle = document.getElementById('themeToggle');
+    const colorBtns = document.querySelectorAll('.color-btn');
+    const projectNameInput = document.getElementById('projectName');
+    const totalBudgetInput = document.getElementById('totalBudget');
+    const navDashboard = document.getElementById('navDashboard');
+    const navExpenses = document.getElementById('navExpenses');
+
+    // DOM Elements - Main
+    const dashboardView = document.getElementById('dashboardView');
+    const expensesView = document.getElementById('expensesView');
+    const displayTotalBudget = document.getElementById('displayTotalBudget');
+    const displayTotalSpent = document.getElementById('displayTotalSpent');
+    const displayRemaining = document.getElementById('displayRemaining');
+    const budgetProgressBar = document.getElementById('budgetProgressBar');
+    const budgetProgressText = document.getElementById('budgetProgressText');
+    const categoryBreakdown = document.getElementById('categoryBreakdown');
+    
+    const expenseTableBody = document.getElementById('expenseTableBody');
+    const noExpensesMsg = document.getElementById('noExpensesMsg');
+
+    // DOM Elements - Modal
+    const addExpenseBtn = document.getElementById('addExpenseBtn');
+    const expenseModal = document.getElementById('expenseModal');
+    const closeModalBtn = document.getElementById('closeModalBtn');
+    const expenseForm = document.getElementById('expenseForm');
+
+    // --- Initialization ---
+    // Dark Mode
+    if (localStorage.getItem('renoTheme') === 'dark') {
+        document.body.setAttribute('data-theme', 'dark');
+        themeToggle.textContent = '☀️';
+    }
+
+    // Color Theme
+    const savedColorTheme = localStorage.getItem('renoColorTheme') || 'indigo';
+    document.body.setAttribute('data-color-theme', savedColorTheme);
+    colorBtns.forEach(btn => {
+        if (btn.dataset.color === savedColorTheme) {
+            btn.classList.add('active');
+        } else {
+            btn.classList.remove('active');
+        }
+    });
+
+    projectNameInput.value = projectName;
+    totalBudgetInput.value = totalBudget;
+    
+    // Set today as default date in form
+    document.getElementById('expDate').valueAsDate = new Date();
+
+    // --- Utilities ---
+    const formatCurrency = (amount) => {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
+    };
+
+    const calculateTotals = () => {
+        const totalSpent = expenses.reduce((sum, exp) => sum + exp.amount, 0);
+        const remaining = totalBudget - totalSpent;
+        const percentUsed = totalBudget > 0 ? (totalSpent / totalBudget) * 100 : 0;
+
+        return { totalSpent, remaining, percentUsed };
+    };
+
+    const getCategoryBreakdown = () => {
+        const breakdown = {};
+        expenses.forEach(exp => {
+            if (!breakdown[exp.category]) breakdown[exp.category] = 0;
+            breakdown[exp.category] += exp.amount;
+        });
+        return Object.entries(breakdown).sort((a, b) => b[1] - a[1]); // Sort by amount desc
+    };
+
+    const saveData = () => {
+        localStorage.setItem('renoExpenses', JSON.stringify(expenses));
+        localStorage.setItem('renoTotalBudget', totalBudget);
+        localStorage.setItem('renoProjectName', projectName);
+    };
+
+    // --- Render Functions ---
+    const updateDashboard = () => {
+        const { totalSpent, remaining, percentUsed } = calculateTotals();
+
+        // Animate numbers for premium feel
+        displayTotalBudget.textContent = formatCurrency(totalBudget);
+        displayTotalSpent.textContent = formatCurrency(totalSpent);
+        displayRemaining.textContent = formatCurrency(remaining);
+
+        // Update Progress Bar
+        budgetProgressBar.style.width = `${Math.min(percentUsed, 100)}%`;
+        budgetProgressText.textContent = `${percentUsed.toFixed(1)}% Used`;
+
+        if (percentUsed > 100) {
+            budgetProgressBar.style.background = 'var(--danger)';
+            displayRemaining.classList.replace('text-success', 'text-danger');
+        } else if (percentUsed > 80) {
+            budgetProgressBar.style.background = 'var(--warning)';
+            displayRemaining.classList.replace('text-danger', 'text-success');
+        } else {
+            budgetProgressBar.style.background = 'linear-gradient(90deg, var(--primary), var(--primary-hover))';
+            displayRemaining.classList.replace('text-danger', 'text-success');
+        }
+
+        // Update Category List
+        const cats = getCategoryBreakdown();
+        categoryBreakdown.innerHTML = '';
+        if (cats.length === 0) {
+            categoryBreakdown.innerHTML = '<div class="text-muted" style="padding: 10px;">No spending data yet.</div>';
+        } else {
+            cats.forEach(([cat, amount]) => {
+                const el = document.createElement('div');
+                el.className = 'category-item';
+                el.innerHTML = `
+                    <span class="cat-name">${cat}</span>
+                    <span class="cat-amount">${formatCurrency(amount)}</span>
+                `;
+                categoryBreakdown.appendChild(el);
+            });
+        }
+    };
+
+    const updateExpenseTable = () => {
+        expenseTableBody.innerHTML = '';
+        
+        if (expenses.length === 0) {
+            noExpensesMsg.style.display = 'block';
+        } else {
+            noExpensesMsg.style.display = 'none';
+            // Sort expenses by date descending
+            const sorted = [...expenses].sort((a, b) => new Date(b.date) - new Date(a.date));
+            
+            sorted.forEach(exp => {
+                const tr = document.createElement('tr');
+                tr.innerHTML = `
+                    <td>${new Date(exp.date).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })}</td>
+                    <td class="fw-bold">${exp.description}</td>
+                    <td><span style="background: var(--bg-body); padding: 4px 8px; border-radius: 4px; font-size: 0.85rem;">${exp.category}</span></td>
+                    <td class="text-danger fw-bold">-${formatCurrency(exp.amount)}</td>
+                    <td>
+                        <button class="btn btn-danger delete-btn" data-id="${exp.id}">Delete</button>
+                    </td>
+                `;
+                expenseTableBody.appendChild(tr);
+            });
+
+            // Add delete listeners
+            document.querySelectorAll('.delete-btn').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    const id = e.target.getAttribute('data-id');
+                    expenses = expenses.filter(x => x.id !== id);
+                    saveData();
+                    updateAll();
+                });
+            });
+        }
+    };
+
+    const updateAll = () => {
+        updateDashboard();
+        updateExpenseTable();
+    };
+
+    // --- Event Listeners ---
+
+    // Theme Toggle
+    themeToggle.addEventListener('click', () => {
+        const isDark = document.body.hasAttribute('data-theme');
+        if (isDark) {
+            document.body.removeAttribute('data-theme');
+            themeToggle.textContent = '🌙';
+            localStorage.setItem('renoTheme', 'light');
+        } else {
+            document.body.setAttribute('data-theme', 'dark');
+            themeToggle.textContent = '☀️';
+            localStorage.setItem('renoTheme', 'dark');
+        }
+    });
+
+    // Color Theme Picker
+    colorBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const color = btn.dataset.color;
+            document.body.setAttribute('data-color-theme', color);
+            localStorage.setItem('renoColorTheme', color);
+            
+            colorBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            
+            // Re-render dashboard to update progress bar color gradients if needed
+            updateDashboard();
+        });
+    });
+
+    // Navigation
+    navDashboard.addEventListener('click', (e) => {
+        e.preventDefault();
+        navDashboard.classList.add('active');
+        navExpenses.classList.remove('active');
+        dashboardView.classList.remove('hidden');
+        expensesView.classList.add('hidden');
+    });
+
+    navExpenses.addEventListener('click', (e) => {
+        e.preventDefault();
+        navExpenses.classList.add('active');
+        navDashboard.classList.remove('active');
+        expensesView.classList.remove('hidden');
+        dashboardView.classList.add('hidden');
+    });
+
+    // Settings Inputs
+    projectNameInput.addEventListener('change', (e) => {
+        projectName = e.target.value;
+        saveData();
+    });
+
+    totalBudgetInput.addEventListener('change', (e) => {
+        totalBudget = parseFloat(e.target.value) || 0;
+        saveData();
+        updateDashboard();
+    });
+
+    // Modal
+    addExpenseBtn.addEventListener('click', () => {
+        expenseModal.classList.remove('hidden');
+    });
+
+    closeModalBtn.addEventListener('click', () => {
+        expenseModal.classList.add('hidden');
+    });
+
+    // Form Submission
+    expenseForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        
+        const newExpense = {
+            id: Date.now().toString(),
+            description: document.getElementById('expDesc').value,
+            amount: parseFloat(document.getElementById('expAmount').value),
+            category: document.getElementById('expCategory').value,
+            date: document.getElementById('expDate').value
+        };
+
+        expenses.push(newExpense);
+        saveData();
+        updateAll();
+        
+        // Reset form and close modal
+        expenseForm.reset();
+        document.getElementById('expDate').valueAsDate = new Date(); // reset to today
+        expenseModal.classList.add('hidden');
+        
+        // Switch to expenses view automatically
+        navExpenses.click();
+    });
+
+    // Initial Render
+    updateAll();
+});
diff --git a/Projects/Home Renovation Budget Planner/style.css b/Projects/Home Renovation Budget Planner/style.css
new file mode 100644
index 00000000..2c1c624a
--- /dev/null
+++ b/Projects/Home Renovation Budget Planner/style.css	
@@ -0,0 +1,609 @@
+/* Base Variables */
+:root {
+    --success: #10b981;
+    --danger: #ef4444;
+    --warning: #f59e0b;
+    --font-main: 'Outfit', sans-serif;
+    
+    /* Default Indigo Theme */
+    --primary: #6366f1;
+    --primary-hover: #4f46e5;
+    --primary-light: rgba(99, 102, 241, 0.1);
+    
+    /* Light Mode Basics */
+    --bg-body: #f8fafc;
+    --bg-glass: rgba(255, 255, 255, 0.7);
+    --bg-panel: rgba(255, 255, 255, 0.9);
+    --text-main: #0f172a;
+    --text-muted: #64748b;
+    --border-color: rgba(226, 232, 240, 0.8);
+    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    --radius-md: 12px;
+    --radius-lg: 20px;
+}
+
+/* Color Themes */
+[data-color-theme="emerald"] {
+    --primary: #10b981;
+    --primary-hover: #059669;
+    --primary-light: rgba(16, 185, 129, 0.1);
+}
+[data-color-theme="rose"] {
+    --primary: #f43f5e;
+    --primary-hover: #e11d48;
+    --primary-light: rgba(244, 63, 94, 0.1);
+}
+[data-color-theme="amber"] {
+    --primary: #f59e0b;
+    --primary-hover: #d97706;
+    --primary-light: rgba(245, 158, 11, 0.1);
+}
+
+/* Dark Mode */
+[data-theme="dark"] {
+    --bg-body: #0f172a;
+    --bg-glass: rgba(30, 41, 59, 0.7);
+    --bg-panel: rgba(30, 41, 59, 0.9);
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --border-color: rgba(51, 65, 85, 0.8);
+    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+}
+
+* {
+    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 0% 0%, var(--primary-light) 0%, transparent 50%),
+                      radial-gradient(circle at 100% 100%, var(--primary-light) 0%, transparent 50%);
+    background-attachment: fixed;
+    color: var(--text-main);
+    transition: background-color 0.4s ease, color 0.4s ease;
+}
+
+.app-container {
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+    backdrop-filter: blur(10px);
+}
+
+/* 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%; }
+
+/* Glassmorphism */
+.glass {
+    background: var(--bg-glass);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--border-color);
+}
+
+.glass-modal {
+    background: var(--bg-panel);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--border-color);
+}
+
+/* Buttons */
+.btn {
+    padding: 10px 20px;
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    font-size: 0.95rem;
+    cursor: pointer;
+    font-family: inherit;
+    border: none;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
+    color: white;
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 15px var(--primary-light);
+}
+
+.btn-danger {
+    background: rgba(239, 68, 68, 0.1);
+    color: var(--danger);
+    padding: 6px 12px;
+}
+
+.btn-danger:hover {
+    background: var(--danger);
+    color: white;
+    transform: translateY(-1px);
+}
+
+.btn-icon {
+    background: var(--bg-glass);
+    border: 1px solid var(--border-color);
+    color: var(--text-main);
+    font-size: 1.2rem;
+    cursor: pointer;
+    padding: 8px;
+    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);
+}
+
+/* Sidebar */
+.sidebar {
+    width: 280px;
+    background: var(--bg-glass);
+    border-right: 1px solid var(--border-color);
+    padding: 30px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    z-index: 10;
+}
+
+.sidebar-header {
+    margin-bottom: 10px;
+}
+
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.brand-icon {
+    font-size: 1.5rem;
+}
+
+.brand h2 {
+    font-size: 1.6rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.sidebar-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.nav-item {
+    padding: 12px 18px;
+    text-decoration: none;
+    color: var(--text-muted);
+    border-radius: var(--radius-md);
+    font-weight: 500;
+    font-size: 1.05rem;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.nav-item .icon {
+    font-size: 1.2rem;
+}
+
+.nav-item:hover, .nav-item.active {
+    background: var(--primary-light);
+    color: var(--primary);
+    transform: translateX(5px);
+}
+
+.nav-item.active {
+    font-weight: 600;
+}
+
+.panel {
+    padding: 20px;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-sm);
+}
+
+.panel h3 {
+    font-size: 0.95rem;
+    color: var(--text-main);
+    margin-bottom: 15px;
+    font-weight: 600;
+}
+
+.panel input {
+    width: 100%;
+    padding: 10px 12px;
+    margin-bottom: 12px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    background: var(--bg-body);
+    color: var(--text-main);
+    font-family: inherit;
+    font-size: 0.95rem;
+    transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+.panel input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px var(--primary-light);
+}
+
+.budget-input label {
+    display: block;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    margin-bottom: 6px;
+    font-weight: 500;
+}
+
+.theme-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.color-picker {
+    display: flex;
+    gap: 8px;
+}
+
+.color-btn {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    cursor: pointer;
+    transition: transform 0.2s, border-color 0.2s;
+}
+
+.color-btn:hover {
+    transform: scale(1.1);
+}
+
+.color-btn.active {
+    border-color: var(--text-main);
+    transform: scale(1.1);
+}
+
+.color-btn.indigo { background: #6366f1; }
+.color-btn.emerald { background: #10b981; }
+.color-btn.rose { background: #f43f5e; }
+.color-btn.amber { background: #f59e0b; }
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 40px;
+    position: relative;
+}
+
+.main-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 40px;
+}
+
+.page-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-main);
+}
+
+.page-subtitle {
+    color: var(--text-muted);
+    font-size: 1rem;
+    margin-top: 4px;
+}
+
+.card {
+    border-radius: var(--radius-lg);
+    padding: 25px;
+    box-shadow: var(--shadow-md);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-hover);
+}
+
+.card h3 {
+    font-size: 1.15rem;
+    margin-bottom: 20px;
+    color: var(--text-main);
+    font-weight: 600;
+}
+
+/* Dashboard Grid */
+.dashboard-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.overview-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 30px;
+}
+
+.summary-card {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.card-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.8rem;
+}
+
+.primary-bg { background: var(--primary-light); }
+.danger-bg { background: rgba(239, 68, 68, 0.1); }
+.success-bg { background: rgba(16, 185, 129, 0.1); }
+
+.summary-card h3 {
+    font-size: 0.95rem;
+    color: var(--text-muted);
+    margin-bottom: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.summary-card .amount {
+    font-size: 2.2rem;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.dashboard-bottom-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+}
+
+/* Progress */
+.progress-wrapper {
+    margin-top: 30px;
+}
+
+.progress-container {
+    height: 16px;
+    background: var(--bg-body);
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 12px;
+    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary), var(--primary-hover));
+    width: 0%;
+    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
+    border-radius: 8px;
+}
+
+.progress-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+}
+
+.progress-text {
+    color: var(--text-main);
+}
+
+/* Category List */
+.category-list {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.category-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 15px;
+    background: var(--bg-body);
+    border-radius: var(--radius-md);
+    transition: transform 0.2s ease;
+}
+
+.category-item:hover {
+    transform: translateX(5px);
+}
+
+.cat-name { font-weight: 500; font-size: 1rem;}
+.cat-amount { font-weight: 600; color: var(--text-main); }
+
+/* Table */
+.full-height {
+    min-height: 600px;
+}
+
+.table-container {
+    overflow-x: auto;
+}
+
+.expense-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.expense-table th, .expense-table td {
+    padding: 15px;
+    text-align: left;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.expense-table th {
+    font-weight: 600;
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.expense-table tr {
+    transition: background-color 0.2s;
+}
+
+.expense-table tbody tr:hover {
+    background-color: var(--bg-body);
+}
+
+.empty-state {
+    text-align: center;
+    padding: 60px 20px;
+    color: var(--text-muted);
+}
+
+.empty-icon {
+    font-size: 3rem;
+    display: block;
+    margin-bottom: 15px;
+    opacity: 0.5;
+}
+
+/* Modal */
+.modal-overlay {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(4px);
+    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; /* Overriding display none for animation */
+}
+
+.modal {
+    width: 90%;
+    max-width: 480px;
+    border-radius: var(--radius-lg);
+    padding: 35px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    transform: scale(1);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.modal-overlay.hidden .modal {
+    transform: scale(0.95);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 25px;
+}
+
+.modal-header h2 {
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: var(--text-main);
+}
+
+.form-group input, .form-group select {
+    width: 100%;
+    padding: 12px 15px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    background: var(--bg-body);
+    color: var(--text-main);
+    font-family: inherit;
+    font-size: 1rem;
+    transition: all 0.3s;
+}
+
+.form-group input:focus, .form-group select:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px var(--primary-light);
+}
+
+@media (max-width: 1024px) {
+    .dashboard-bottom-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .app-container {
+        flex-direction: column;
+        overflow-y: auto;
+    }
+    .sidebar {
+        width: 100%;
+        height: auto;
+        border-right: none;
+        border-bottom: 1px solid var(--border-color);
+        padding: 20px;
+    }
+    .overview-cards {
+        grid-template-columns: 1fr;
+    }
+    .main-content {
+        padding: 20px;
+        overflow-y: visible;
+    }
+    .main-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 15px;
+    }
+}
