diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..600d2d33
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.vscode
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 3d2cf3d4..00000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "liveServer.settings.port": 5501,
-  "livePreview.defaultPreviewPath": "/Domains/Frontend/MiniProjects/MusicVisualizer/index.html"
-}
diff --git a/Domains/Frontend/MiniProjects/CGPACalculator/README.md b/Domains/Frontend/MiniProjects/CGPACalculator/README.md
index bb8b7dc7..4016abb6 100644
--- a/Domains/Frontend/MiniProjects/CGPACalculator/README.md
+++ b/Domains/Frontend/MiniProjects/CGPACalculator/README.md
@@ -1,6 +1,6 @@
 # 🎓 CGPA Calculator
 
-**Contributor:** SOHAM-GADEKAR  
+**Contributor:** SOHAM-GADEKAR 
 **Domain:** Frontend  
 **Difficulty:** Beginner  
 **Tech Stack:** HTML, CSS, JavaScript
diff --git a/Domains/Frontend/MiniProjects/SalaryCalculator/README.md b/Domains/Frontend/MiniProjects/SalaryCalculator/README.md
new file mode 100644
index 00000000..36392fb6
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/SalaryCalculator/README.md
@@ -0,0 +1,268 @@
+# 💰 Salary Calculator - CTC to In-Hand Salary
+
+**Contributor:** SOHAM-GADEKAR 
+**Domain:** Frontend  
+**Difficulty:** Intermediate  
+**Tech Stack:** HTML, CSS, JavaScript
+
+---
+
+## 📝 Description
+
+A comprehensive salary calculator that converts CTC (Cost to Company) or salary breakdown into accurate in-hand salary calculations. Features both new and old tax regimes, detailed deductions breakdown, and real-time calculations. Perfect for employees to understand their actual take-home pay!
+
+---
+
+## 🎯 Features
+
+- ✅ **Dual Input Methods** - CTC method and detailed salary breakdown
+- ✅ **Tax Regime Support** - Both new (2023-24) and old tax regimes
+- ✅ **Accurate Calculations** - PF, ESI, Professional Tax, Income Tax
+- ✅ **Real-time Updates** - Instant calculations as you type
+- ✅ **Detailed Breakdown** - Complete salary component analysis
+- ✅ **Tax Savings Display** - Compare old vs new regime benefits
+- ✅ **Responsive Design** - Works on all devices
+- ✅ **Professional UI** - Modern gradients and smooth animations
+- ✅ **Input Validation** - Error handling and user feedback
+- ✅ **Clear All Function** - Reset all fields with one click
+
+---
+
+## 🛠️ Tech Stack
+
+- **HTML5** - Semantic markup structure
+- **CSS3** - Modern styling with Grid/Flexbox, gradients, animations
+- **JavaScript (ES6+)** - Classes, real-time calculations, tax logic
+- **Responsive Design** - Mobile-first approach
+
+---
+
+## 🚀 How to Run
+
+### Method 1: Direct Browser
+
+1. Download or clone this folder
+2. Open `index.html` in your browser
+3. Start calculating your salary!
+
+### Method 2: Live Server
+
+1. Install VS Code Live Server extension
+2. Right-click on `index.html`
+3. Select "Open with Live Server"
+4. App opens at `http://localhost:5500`
+
+---
+
+## 📁 Project Structure
+
+```
+SalaryCalculator/
+├── index.html          # Main HTML file
+├── style.css           # Styling and responsive design
+├── script.js           # JavaScript functionality
+└── README.md           # Documentation
+```
+
+---
+
+## 💻 Code Highlights
+
+### Tax Calculation Logic
+```javascript
+calculateIncomeTax(taxableIncome) {
+    const regime = this.taxRegimeSelect.value;
+    const brackets = regime === 'new' ? this.newTaxBrackets : this.oldTaxBrackets;
+    
+    let tax = 0;
+    for (const bracket of brackets) {
+        if (taxableIncome > bracket.min) {
+            const taxableInBracket = Math.min(taxableIncome, bracket.max) - bracket.min;
+            tax += taxableInBracket * bracket.rate;
+        }
+    }
+    return tax;
+}
+```
+
+### CTC to Salary Breakdown
+```javascript
+calculateFromCTC() {
+    const ctc = parseFloat(this.ctcInput.value) || 0;
+    
+    // Calculate monthly components
+    const annualBasic = ctc * 0.5; // 50% of CTC as basic
+    const annualHRA = ctc * 0.2;  // 20% of CTC as HRA
+    const annualOtherAllowances = ctc * 0.3; // 30% as other allowances
+    
+    return this.calculateDeductions({
+        basic: annualBasic / 12,
+        hra: annualHRA / 12,
+        otherAllowances: annualOtherAllowances / 12
+    });
+}
+```
+
+### Real-time Calculation
+```javascript
+inputs.forEach(input => {
+    input.addEventListener('input', () => this.calculateSalary());
+});
+```
+
+---
+
+## 📚 Learning Outcomes
+
+### Skills Practiced
+- ✅ **Complex Calculations** - Tax brackets and deductions
+- ✅ **Form Handling** - Multiple input methods
+- ✅ **Real-time Updates** - Dynamic calculations
+- ✅ **Data Validation** - Input error handling
+- ✅ **UI/UX Design** - Professional interface
+- ✅ **Responsive Layout** - Mobile-first design
+- ✅ **JavaScript Classes** - Object-oriented programming
+- ✅ **Financial Logic** - Salary and tax calculations
+
+### Concepts Learned
+- Indian tax system and brackets
+- Salary component breakdown
+- PF, ESI, and professional tax calculations
+- CTC vs in-hand salary differences
+- Tax regime comparisons
+- Financial planning tools
+
+---
+
+## 🧮 Calculation Methods
+
+### CTC Method
+1. **Enter Annual CTC** - Total cost to company
+2. **Add Bonuses** - Annual bonus and gratuity
+3. **Auto-breakdown** - 50% basic, 20% HRA, 30% allowances
+4. **Calculate Deductions** - PF, ESI, taxes
+
+### Salary Breakdown Method
+1. **Enter Components** - Basic, HRA, DA, allowances
+2. **Set Deductions** - PF%, ESI%, professional tax
+3. **Choose Tax Regime** - New or old tax regime
+4. **Get Results** - Detailed breakdown and in-hand salary
+
+---
+
+## 📊 Tax Regimes Supported
+
+### New Tax Regime (2023-24)
+| Income Range | Tax Rate |
+|--------------|----------|
+| ₹0 - ₹3,00,000 | 0% |
+| ₹3,00,001 - ₹6,00,000 | 5% |
+| ₹6,00,001 - ₹9,00,000 | 10% |
+| ₹9,00,001 - ₹12,00,000 | 15% |
+| ₹12,00,001 - ₹15,00,000 | 20% |
+| Above ₹15,00,000 | 30% |
+
+### Old Tax Regime
+| Income Range | Tax Rate |
+|--------------|----------|
+| ₹0 - ₹2,50,000 | 0% |
+| ₹2,50,001 - ₹5,00,000 | 5% |
+| ₹5,00,001 - ₹10,00,000 | 20% |
+| Above ₹10,00,000 | 30% |
+
+---
+
+## 💡 Usage Examples
+
+### Example 1: CTC Method
+- **CTC**: ₹6,00,000
+- **Bonus**: ₹50,000
+- **Result**: In-hand salary with detailed breakdown
+
+### Example 2: Salary Breakdown
+- **Basic**: ₹30,000
+- **HRA**: ₹15,000
+- **Other Allowances**: ₹15,000
+- **Result**: Complete deduction analysis
+
+---
+
+## 🎨 Customization Ideas
+
+Want to enhance this project? Try adding:
+
+1. **Multiple Countries** - Support for different tax systems
+2. **Investment Planning** - 80C, 80D deductions
+3. **Salary History** - Track salary changes over time
+4. **Export Results** - Save calculations as PDF
+5. **Comparison Tool** - Compare different job offers
+6. **Retirement Planning** - PF and pension calculations
+7. **Bonus Calculator** - Variable pay calculations
+8. **Tax Optimization** - Suggest tax-saving investments
+
+---
+
+## 🔧 Advanced Features
+
+### Deduction Calculations
+- **Provident Fund**: 12% of basic salary (max ₹1,800/month)
+- **ESI**: 0.75% of gross salary (if gross < ₹21,000)
+- **Professional Tax**: ₹200/month (varies by state)
+- **Income Tax**: Based on tax regime and brackets
+
+### Tax Savings Analysis
+- Compare old vs new tax regime
+- Display potential tax savings
+- Help choose optimal tax regime
+
+---
+
+## 📱 Responsive Design
+
+- **Desktop**: Full feature layout with side-by-side inputs
+- **Tablet**: Optimized grid layout
+- **Mobile**: Single-column layout with touch-friendly inputs
+
+---
+
+## 🚀 Future Enhancements
+
+- [ ] **Investment Calculator** - Tax-saving investments
+- [ ] **Salary Comparison** - Multiple job offers
+- [ ] **Historical Data** - Salary progression tracking
+- [ ] **Export Features** - PDF/Excel export
+- [ ] **Advanced Tax** - HRA exemption, LTA calculations
+- [ ] **Multi-language** - Regional language support
+- [ ] **Dark Mode** - Theme toggle
+- [ ] **Offline Support** - PWA functionality
+
+---
+
+## ⚠️ Important Notes
+
+- **Tax Accuracy**: Calculations based on 2023-24 tax slabs
+- **State Variations**: Professional tax varies by state
+- **PF Limits**: Maximum PF contribution is ₹1,800/month
+- **ESI Threshold**: ESI applicable if gross salary < ₹21,000
+- **Regular Updates**: Tax slabs change annually
+
+---
+
+## 📄 License
+
+MIT License - Free to use and modify!
+
+---
+
+## 🤝 Contributing
+
+This is a sample project for ProjectHive. Feel free to:
+- Fork and enhance
+- Report issues
+- Suggest improvements
+- Use as learning material
+- Add new features
+
+---
+
+**Happy Calculating! 💰✨**
diff --git a/Domains/Frontend/MiniProjects/SalaryCalculator/index.html b/Domains/Frontend/MiniProjects/SalaryCalculator/index.html
new file mode 100644
index 00000000..8b53b498
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/SalaryCalculator/index.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>In-Hand Salary Calculator</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>💰 In-Hand Salary Calculator</h1>
+            <p class="subtitle">Based on your salary breakup sheet</p>
+        </header>
+
+        <div class="main-content">
+            <div class="card input-section">
+                <h2>📥 Salary Components</h2>
+                <form id="salaryForm">
+                    <div class="form-group">
+                        <h3>Monthly Components</h3>
+                        
+                        <label for="basicSalary">
+                            Basic Salary (₹/month)
+                            <span class="tooltip">ℹ️
+                                <span class="tooltiptext">Fixed base component of your salary</span>
+                            </span>
+                        </label>
+                        <input type="number" id="basicSalary" placeholder="e.g., 10000" required>
+
+                        <label for="allowances">
+                            Basket of Allowances (₹/month)
+                            <span class="tooltip">ℹ️
+                                <span class="tooltiptext">HRA + LTA + Medical + Transport + Misc.</span>
+                            </span>
+                        </label>
+                        <input type="number" id="allowances" placeholder="e.g., 20000" required>
+
+                        <label for="bonus">
+                            Bonus/Ex-Gratia (₹/month)
+                            <span class="tooltip">ℹ️
+                                <span class="tooltiptext">Paid monthly (e.g., 95% of eligible)</span>
+                            </span>
+                        </label>
+                        <input type="number" id="bonus" placeholder="e.g., 2000" value="0">
+
+                        <label for="additionalBonus">
+                            Additional Bonus (₹/month)
+                            <span class="tooltip">ℹ️
+                                <span class="tooltiptext">Year-end 5% adjustment</span>
+                            </span>
+                        </label>
+                        <input type="number" id="additionalBonus" placeholder="e.g., 100" value="0">
+                    </div>
+
+                    <div class="form-group">
+                        <h3>Retiral Benefits (% of Basic)</h3>
+                        
+                        <label for="employerPF">Employer PF (%)</label>
+                        <input type="number" id="employerPF" value="12" step="0.01">
+
+                        <label for="gratuity">Gratuity (%)</label>
+                        <input type="number" id="gratuity" value="4" step="0.01">
+
+                        <label for="employeePF">Employee PF (%)</label>
+                        <input type="number" id="employeePF" value="12" step="0.01">
+                    </div>
+
+                    <div class="form-group">
+                        <h3>Deductions</h3>
+                        
+                        <label for="professionalTax">Professional Tax (₹/month)</label>
+                        <input type="number" id="professionalTax" value="200">
+
+                        <label for="taxRegime">Tax Regime</label>
+                        <select id="taxRegime">
+                            <option value="new">New Regime</option>
+                            <option value="old">Old Regime</option>
+                        </select>
+                    </div>
+
+                    <button type="submit" class="calculate-btn">Calculate In-Hand Salary</button>
+                </form>
+            </div>
+
+            <div class="card result-section" id="resultSection" style="display: none;">
+                <h2>📊 Results</h2>
+                
+                <div class="result-grid">
+                    <div class="result-item">
+                        <span class="label">Monthly Gross Salary</span>
+                        <span class="value" id="monthlyGross">₹0</span>
+                    </div>
+                    
+                    <div class="result-item">
+                        <span class="label">Annual Gross Salary</span>
+                        <span class="value" id="annualGross">₹0</span>
+                    </div>
+
+                    <div class="divider"></div>
+
+                    <div class="result-item deduction">
+                        <span class="label">Employee PF</span>
+                        <span class="value" id="employeePFAmount">₹0</span>
+                    </div>
+
+                    <div class="result-item deduction">
+                        <span class="label">Professional Tax</span>
+                        <span class="value" id="professionalTaxAmount">₹0</span>
+                    </div>
+
+                    <div class="result-item deduction">
+                        <span class="label">Monthly TDS</span>
+                        <span class="value" id="monthlyTDS">₹0</span>
+                    </div>
+
+                    <div class="result-item deduction">
+                        <span class="label">Total Monthly Deductions</span>
+                        <span class="value" id="totalDeductions">₹0</span>
+                    </div>
+
+                    <div class="divider"></div>
+
+                    <div class="result-item highlight">
+                        <span class="label">✅ Monthly In-Hand Salary</span>
+                        <span class="value" id="monthlyInHand">₹0</span>
+                    </div>
+
+                    <div class="result-item highlight">
+                        <span class="label">Annual In-Hand Salary</span>
+                        <span class="value" id="annualInHand">₹0</span>
+                    </div>
+                </div>
+
+                <div class="tax-breakdown">
+                    <h3>Tax Calculation Breakdown</h3>
+                    <div id="taxBreakdown"></div>
+                </div>
+
+                <div class="chart-container">
+                    <h3>Salary Distribution</h3>
+                    <canvas id="salaryChart"></canvas>
+                </div>
+            </div>
+        </div>
+
+        <footer>
+            <p>Made by Soham Gadekar • <a href="https://github.com" target="_blank">Open Source on GitHub</a></p>
+        </footer>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Domains/Frontend/MiniProjects/SalaryCalculator/script.js b/Domains/Frontend/MiniProjects/SalaryCalculator/script.js
new file mode 100644
index 00000000..f44509d2
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/SalaryCalculator/script.js
@@ -0,0 +1,264 @@
+// Chart instance
+let salaryChart = null;
+
+// Form submission handler
+document.getElementById('salaryForm').addEventListener('submit', function(e) {
+    e.preventDefault();
+    calculateSalary();
+});
+
+function calculateSalary() {
+    // Get input values
+    const basicSalary = parseFloat(document.getElementById('basicSalary').value) || 0;
+    const allowances = parseFloat(document.getElementById('allowances').value) || 0;
+    const bonus = parseFloat(document.getElementById('bonus').value) || 0;
+    const additionalBonus = parseFloat(document.getElementById('additionalBonus').value) || 0;
+    
+    const employerPFPercent = parseFloat(document.getElementById('employerPF').value) || 12;
+    const gratuityPercent = parseFloat(document.getElementById('gratuity').value) || 4.81;
+    const employeePFPercent = parseFloat(document.getElementById('employeePF').value) || 12;
+    
+    const professionalTax = parseFloat(document.getElementById('professionalTax').value) || 0;
+    const taxRegime = document.getElementById('taxRegime').value;
+
+    // Step 1: Calculate Monthly Gross
+    const monthlyGross = basicSalary + allowances + bonus + additionalBonus;
+
+    // Step 2: Calculate Annual Gross
+    const annualGross = monthlyGross * 12;
+
+    // Step 3: Calculate Employee Deductions
+    const employeePFMonthly = (basicSalary * employeePFPercent) / 100;
+    const employeePFAnnual = employeePFMonthly * 12;
+
+    // Step 4: Calculate Taxable Income
+    const standardDeduction = 75000; // FY 2025-26
+    const taxableIncome = annualGross - standardDeduction - employeePFAnnual;
+
+    // Step 5: Calculate Tax
+    const { totalTax, taxBreakdown } = calculateIncomeTax(taxableIncome, taxRegime);
+    const monthlyTDS = totalTax / 12;
+
+    // Step 6: Calculate In-Hand
+    const totalMonthlyDeductions = employeePFMonthly + professionalTax + monthlyTDS;
+    const monthlyInHand = monthlyGross - totalMonthlyDeductions;
+    const annualInHand = monthlyInHand * 12;
+
+    // Display Results
+    displayResults({
+        monthlyGross,
+        annualGross,
+        employeePFMonthly,
+        professionalTax,
+        monthlyTDS,
+        totalMonthlyDeductions,
+        monthlyInHand,
+        annualInHand,
+        taxBreakdown
+    });
+}
+
+function calculateIncomeTax(taxableIncome, regime) {
+    let totalTax = 0;
+    let breakdown = [];
+
+    if (regime === 'new') {
+        // New Tax Regime Slabs (FY 2025-26)
+        const slabs = [
+            { limit: 300000, rate: 0, name: '0 - 3L' },
+            { limit: 600000, rate: 5, name: '3L - 6L' },
+            { limit: 900000, rate: 10, name: '6L - 9L' },
+            { limit: 1200000, rate: 15, name: '9L - 12L' },
+            { limit: 1500000, rate: 20, name: '12L - 15L' },
+            { limit: Infinity, rate: 30, name: '15L+' }
+        ];
+
+        let remainingIncome = taxableIncome;
+        let previousLimit = 0;
+
+        for (let slab of slabs) {
+            if (remainingIncome <= 0) break;
+
+            const taxableAtThisSlab = Math.min(remainingIncome, slab.limit - previousLimit);
+            const taxAtThisSlab = (taxableAtThisSlab * slab.rate) / 100;
+
+            if (taxableAtThisSlab > 0) {
+                totalTax += taxAtThisSlab;
+                breakdown.push({
+                    slab: slab.name,
+                    income: taxableAtThisSlab,
+                    rate: slab.rate,
+                    tax: taxAtThisSlab
+                });
+            }
+
+            remainingIncome -= taxableAtThisSlab;
+            previousLimit = slab.limit;
+        }
+    } else {
+        // Old Tax Regime (with standard deduction)
+        const slabs = [
+            { limit: 250000, rate: 0, name: '0 - 2.5L' },
+            { limit: 500000, rate: 5, name: '2.5L - 5L' },
+            { limit: 1000000, rate: 20, name: '5L - 10L' },
+            { limit: Infinity, rate: 30, name: '10L+' }
+        ];
+
+        let remainingIncome = taxableIncome;
+        let previousLimit = 0;
+
+        for (let slab of slabs) {
+            if (remainingIncome <= 0) break;
+
+            const taxableAtThisSlab = Math.min(remainingIncome, slab.limit - previousLimit);
+            const taxAtThisSlab = (taxableAtThisSlab * slab.rate) / 100;
+
+            if (taxableAtThisSlab > 0) {
+                totalTax += taxAtThisSlab;
+                breakdown.push({
+                    slab: slab.name,
+                    income: taxableAtThisSlab,
+                    rate: slab.rate,
+                    tax: taxAtThisSlab
+                });
+            }
+
+            remainingIncome -= taxableAtThisSlab;
+            previousLimit = slab.limit;
+        }
+    }
+
+    // Add 4% cess
+    const cess = totalTax * 0.04;
+    totalTax += cess;
+
+    breakdown.push({
+        slab: 'Health & Education Cess (4%)',
+        income: 0,
+        rate: 4,
+        tax: cess
+    });
+
+    return { totalTax: Math.max(0, totalTax), taxBreakdown: breakdown };
+}
+
+function displayResults(results) {
+    // Show result section
+    document.getElementById('resultSection').style.display = 'block';
+    
+    // Scroll to results
+    document.getElementById('resultSection').scrollIntoView({ behavior: 'smooth' });
+
+    // Update values
+    document.getElementById('monthlyGross').textContent = formatCurrency(results.monthlyGross);
+    document.getElementById('annualGross').textContent = formatCurrency(results.annualGross);
+    document.getElementById('employeePFAmount').textContent = formatCurrency(results.employeePFMonthly);
+    document.getElementById('professionalTaxAmount').textContent = formatCurrency(results.professionalTax);
+    document.getElementById('monthlyTDS').textContent = formatCurrency(results.monthlyTDS);
+    document.getElementById('totalDeductions').textContent = formatCurrency(results.totalMonthlyDeductions);
+    document.getElementById('monthlyInHand').textContent = formatCurrency(results.monthlyInHand);
+    document.getElementById('annualInHand').textContent = formatCurrency(results.annualInHand);
+
+    // Display tax breakdown
+    displayTaxBreakdown(results.taxBreakdown);
+
+    // Update chart
+    updateChart(results);
+}
+
+function displayTaxBreakdown(breakdown) {
+    const container = document.getElementById('taxBreakdown');
+    container.innerHTML = '';
+
+    breakdown.forEach(item => {
+        const p = document.createElement('p');
+        if (item.slab.includes('Cess')) {
+            p.textContent = `${item.slab}: ₹${formatNumber(item.tax)}`;
+        } else {
+            p.textContent = `${item.slab} @ ${item.rate}%: ₹${formatNumber(item.income)} → Tax: ₹${formatNumber(item.tax)}`;
+        }
+        container.appendChild(p);
+    });
+}
+
+function updateChart(results) {
+    const ctx = document.getElementById('salaryChart').getContext('2d');
+
+    // Destroy existing chart if it exists
+    if (salaryChart) {
+        salaryChart.destroy();
+    }
+
+    const data = {
+        labels: ['In-Hand', 'Employee PF', 'Professional Tax', 'TDS'],
+        datasets: [{
+            data: [
+                results.monthlyInHand,
+                results.employeePFMonthly,
+                results.professionalTax,
+                results.monthlyTDS
+            ],
+            backgroundColor: [
+                '#38ef7d',
+                '#667eea',
+                '#764ba2',
+                '#e74c3c'
+            ],
+            borderWidth: 2,
+            borderColor: '#fff'
+        }]
+    };
+
+    salaryChart = new Chart(ctx, {
+        type: 'pie',
+        data: data,
+        options: {
+            responsive: true,
+            maintainAspectRatio: true,
+            plugins: {
+                legend: {
+                    position: 'bottom',
+                    labels: {
+                        padding: 15,
+                        font: {
+                            size: 12
+                        }
+                    }
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            let label = context.label || '';
+                            if (label) {
+                                label += ': ';
+                            }
+                            label += '₹' + formatNumber(context.parsed);
+                            return label;
+                        }
+                    }
+                }
+            }
+        }
+    });
+}
+
+function formatCurrency(amount) {
+    return '₹' + formatNumber(amount);
+}
+
+function formatNumber(num) {
+    return new Intl.NumberFormat('en-IN', {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+    }).format(Math.round(num));
+}
+
+// Auto-calculate on input change (optional)
+const inputs = document.querySelectorAll('input, select');
+inputs.forEach(input => {
+    input.addEventListener('change', function() {
+        if (document.getElementById('resultSection').style.display === 'block') {
+            calculateSalary();
+        }
+    });
+});
\ No newline at end of file
diff --git a/Domains/Frontend/MiniProjects/SalaryCalculator/style.css b/Domains/Frontend/MiniProjects/SalaryCalculator/style.css
new file mode 100644
index 00000000..d7803a81
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/SalaryCalculator/style.css
@@ -0,0 +1,309 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    padding: 20px;
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+/* Header */
+header {
+    text-align: center;
+    color: white;
+    margin-bottom: 30px;
+    padding: 20px;
+}
+
+header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.subtitle {
+    font-size: 1.1rem;
+    opacity: 0.9;
+}
+
+/* Main Content */
+.main-content {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+}
+
+@media (min-width: 1024px) {
+    .main-content {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+/* Card Styling */
+.card {
+    background: white;
+    border-radius: 16px;
+    padding: 30px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.card h2 {
+    color: #667eea;
+    margin-bottom: 25px;
+    font-size: 1.8rem;
+    border-bottom: 3px solid #667eea;
+    padding-bottom: 10px;
+}
+
+/* Form Styling */
+.form-group {
+    margin-bottom: 30px;
+}
+
+.form-group h3 {
+    color: #333;
+    margin-bottom: 15px;
+    font-size: 1.2rem;
+    display: flex;
+    align-items: center;
+}
+
+label {
+    display: block;
+    margin-bottom: 8px;
+    color: #555;
+    font-weight: 500;
+    font-size: 0.95rem;
+}
+
+input, select {
+    width: 100%;
+    padding: 12px 15px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 1rem;
+    margin-bottom: 15px;
+    transition: all 0.3s ease;
+}
+
+input:focus, select:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+input::placeholder {
+    color: #aaa;
+}
+
+/* Tooltip */
+.tooltip {
+    position: relative;
+    display: inline-block;
+    cursor: help;
+    margin-left: 5px;
+}
+
+.tooltiptext {
+    visibility: hidden;
+    width: 200px;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 8px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -100px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 0.85rem;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
+/* Button */
+.calculate-btn {
+    width: 100%;
+    padding: 15px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.calculate-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+}
+
+.calculate-btn:active {
+    transform: translateY(0);
+}
+
+/* Result Section */
+.result-section {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+.result-grid {
+    display: grid;
+    gap: 15px;
+}
+
+.result-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+}
+
+.result-item .label {
+    font-weight: 500;
+    color: #555;
+}
+
+.result-item .value {
+    font-weight: 700;
+    font-size: 1.2rem;
+    color: #333;
+}
+
+.result-item.deduction .value {
+    color: #e74c3c;
+}
+
+.result-item.highlight {
+    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+    color: white;
+    font-size: 1.1rem;
+    padding: 20px;
+}
+
+.result-item.highlight .label,
+.result-item.highlight .value {
+    color: white;
+}
+
+.divider {
+    height: 2px;
+    background: linear-gradient(90deg, transparent, #667eea, transparent);
+    margin: 10px 0;
+}
+
+/* Tax Breakdown */
+.tax-breakdown {
+    margin-top: 30px;
+    padding: 20px;
+    background: white;
+    border-radius: 8px;
+}
+
+.tax-breakdown h3 {
+    color: #667eea;
+    margin-bottom: 15px;
+}
+
+.tax-breakdown p {
+    margin: 8px 0;
+    padding: 8px;
+    background: #f5f7fa;
+    border-radius: 4px;
+    font-size: 0.95rem;
+}
+
+/* Chart Container */
+.chart-container {
+    margin-top: 30px;
+    padding: 20px;
+    background: white;
+    border-radius: 8px;
+}
+
+.chart-container h3 {
+    color: #667eea;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+/* Footer */
+footer {
+    text-align: center;
+    margin-top: 40px;
+    padding: 20px;
+    color: white;
+}
+
+footer a {
+    color: white;
+    text-decoration: underline;
+}
+
+footer a:hover {
+    opacity: 0.8;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    header h1 {
+        font-size: 2rem;
+    }
+
+    .card {
+        padding: 20px;
+    }
+
+    .result-item {
+        flex-direction: column;
+        text-align: center;
+        gap: 10px;
+    }
+}
+
+/* Loading Animation */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+.loading {
+    animation: pulse 1.5s ease-in-out infinite;
+}
\ No newline at end of file