From 10508e9e11b21690c17985df3ec0496bf61d9024 Mon Sep 17 00:00:00 2001
From: omkar hole <omkarhole314@gmail.com>
Date: Wed, 28 Jan 2026 20:58:21 +0530
Subject: [PATCH] implemented protected routes

closes: #404

@Renu-code123  please review it
---
 analytics-dashboard.js          |    6 +-
 api-integration.js              |    2 +-
 auth-integration.js             |   10 +-
 budget-goals.js                 |    4 +-
 middleware/authMiddleware.js    |   21 +
 notification-center.js          |    2 +-
 package-lock.json               |   79 ++-
 package.json                    |    3 +-
 public/Community.html           |    2 +-
 public/Help-Center.html         |    2 +-
 public/Monthlysummary.html      | 1162 +++++++++++++++++--------------
 public/PrivacyPolicy.html       |    1 +
 public/accounts-dashboard.js    |   22 +-
 public/accounts.html            |    6 +-
 public/analytics.html           |    2 +-
 public/auth-check.js            |   32 -
 public/auth.js                  |   19 +-
 public/budget.html              |    2 +-
 public/challenges.html          |    2 +-
 public/contact.html             |    2 +-
 public/dashboard-clean.html     |    2 +-
 public/dashboard.html           |   11 +-
 public/feedback.html            |    2 +-
 public/finance-tips.html        |    2 +-
 public/goals.html               |    2 +-
 public/index.html               |  157 +----
 public/investment-portfolio.js  |    6 +-
 public/login.html               |    3 +-
 public/login.js                 |   42 ++
 public/performance.html         |    2 +-
 public/protect.js               |    8 +
 public/pwa-features.html        |    2 +-
 public/reports-performance.html |    2 +-
 public/reports.html             |    2 +-
 public/settings.html            |    2 +-
 public/sw.js                    |   74 +-
 public/tax-reports.html         |    2 +-
 public/tax-reports.js           |   12 +-
 public/terms_service.html       |    2 +-
 public/trackerscript.js         |   58 +-
 public/transactions.html        |    2 +-
 public/transactions.js          |   49 +-
 public/workspace-feature.js     |   26 +-
 realtime-sync.js                |    2 +-
 receipt-upload.js               |    2 +-
 server.js                       |   54 +-
 workspace-feature.js            |    4 +-
 47 files changed, 1057 insertions(+), 856 deletions(-)
 create mode 100644 middleware/authMiddleware.js
 delete mode 100644 public/auth-check.js
 create mode 100644 public/login.js
 create mode 100644 public/protect.js

diff --git a/analytics-dashboard.js b/analytics-dashboard.js
index fee3b281..50780aa4 100644
--- a/analytics-dashboard.js
+++ b/analytics-dashboard.js
@@ -34,7 +34,7 @@ function formatAnalyticsCurrency(value, options = {}) {
 // ========================
 
 async function getAuthHeaders() {
-  const token = localStorage.getItem('authToken');
+  const token = localStorage.getItem('token');
   return {
     'Content-Type': 'application/json',
     'Authorization': token ? `Bearer ${token}` : ''
@@ -46,7 +46,7 @@ async function getAuthHeaders() {
  */
 async function fetchSpendingTrends(period = 'monthly', months = 6) {
   try {
-    const token = localStorage.getItem('authToken');
+    const token = localStorage.getItem('token');
     if (!token) return { data: [] };
 
     const response = await fetch(
@@ -671,7 +671,7 @@ async function loadAnalyticsDashboard() {
   const dashboardContainer = document.getElementById('analytics-dashboard');
   if (!dashboardContainer) return;
 
-  const token = localStorage.getItem('authToken');
+  const token = localStorage.getItem('token');
   if (!token) return;
 
   try {
diff --git a/api-integration.js b/api-integration.js
index eb2d81ca..49e21cfb 100644
--- a/api-integration.js
+++ b/api-integration.js
@@ -83,7 +83,7 @@ const formatAppCurrency = (value, { showPlus = false, absolute = false } = {}) =
 // ========================
 
 function getAuthToken() {
-  return localStorage.getItem('authToken');
+  return localStorage.getItem('token');
 }
 
 async function fetchExpenses(page = 1, limit = 50, workspaceId = null) {
diff --git a/auth-integration.js b/auth-integration.js
index d1f954ac..510b4b5b 100644
--- a/auth-integration.js
+++ b/auth-integration.js
@@ -4,7 +4,7 @@
  */
 
 var API_BASE_URL = '/api';
-var authToken = localStorage.getItem('authToken');
+var authToken = localStorage.getItem('token');
 var currentUser = JSON.parse(localStorage.getItem('currentUser') || 'null');
 var currentSessionId = localStorage.getItem('sessionId');
 
@@ -30,7 +30,7 @@ async function register(userData) {
     currentUser = data.user;
     currentSessionId = data.sessionId;
 
-    localStorage.setItem('authToken', authToken);
+    localStorage.setItem('token ', authToken);
     localStorage.setItem('currentUser', JSON.stringify(currentUser));
     localStorage.setItem('sessionId', currentSessionId);
 
@@ -67,7 +67,7 @@ async function login(credentials) {
     currentUser = data.user;
     currentSessionId = data.sessionId;
 
-    localStorage.setItem('authToken', authToken);
+    localStorage.setItem('token', authToken);
     localStorage.setItem('currentUser', JSON.stringify(currentUser));
     localStorage.setItem('sessionId', currentSessionId);
 
@@ -95,7 +95,7 @@ async function verify2FA(userId, totpToken, rememberMe = false) {
     currentUser = data.user;
     currentSessionId = data.sessionId;
 
-    localStorage.setItem('authToken', authToken);
+    localStorage.setItem('token', authToken);
     localStorage.setItem('currentUser', JSON.stringify(currentUser));
     localStorage.setItem('sessionId', currentSessionId);
 
@@ -119,7 +119,7 @@ async function logout() {
     authToken = null;
     currentUser = null;
     currentSessionId = null;
-    localStorage.removeItem('authToken');
+    localStorage.removeItem('token');
     localStorage.removeItem('currentUser');
     localStorage.removeItem('sessionId');
     localStorage.removeItem('transactions');
diff --git a/budget-goals.js b/budget-goals.js
index e2579cdd..3a4aacea 100644
--- a/budget-goals.js
+++ b/budget-goals.js
@@ -2,7 +2,7 @@
 class BudgetGoalsManager {
   constructor() {
     this.apiUrl = '/api';
-    this.authToken = localStorage.getItem('authToken');
+    this.authToken = localStorage.getItem('token');
     this.initializeDashboard();
   }
   
@@ -199,7 +199,7 @@ class BudgetGoalsManager {
 
   // Load dashboard data
   async loadDashboardData() {
-    this.authToken = localStorage.getItem('authToken');
+    this.authToken = localStorage.getItem('token');
     if (!this.authToken) return;
 
     try {
diff --git a/middleware/authMiddleware.js b/middleware/authMiddleware.js
new file mode 100644
index 00000000..904e36ca
--- /dev/null
+++ b/middleware/authMiddleware.js
@@ -0,0 +1,21 @@
+const jwt=require("jsonwebtoken");
+
+
+const protect=async(req,res,next)=>{
+    const authHeader=req.headers.authorization;
+
+    if(!authHeader || !authHeader.startsWith("Bearer")){
+        return res.status(401).json({message:"unauthorzed access"});
+    }
+    try{
+        const token=authHeader.split(" ")[1];
+        const decoded=jwt.verify(token,process.env,JWT_SECRET);
+        req.user=decoded;
+        next();
+    }
+    catch(err){
+        return res.status(401).json({message:"Invalid token"});
+    }
+
+};
+module.exports=protect;
\ No newline at end of file
diff --git a/notification-center.js b/notification-center.js
index 43ab6532..df04821b 100644
--- a/notification-center.js
+++ b/notification-center.js
@@ -2,7 +2,7 @@
 class NotificationCenter {
   constructor() {
     this.apiUrl = 'http://localhost:3000/api';
-    this.authToken = localStorage.getItem('authToken');
+    this.authToken = localStorage.getItem('token');
     this.notifications = [];
     this.unreadCount = 0;
     this.socket = null;
diff --git a/package-lock.json b/package-lock.json
index 1357c778..b0cd562f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "axios": "^1.6.2",
         "bcryptjs": "^2.4.3",
         "canvas": "^3.2.1",
-        "chart.js": "^4.4.1",
+        "chart.js": "^4.5.1",
         "chartjs-node-canvas": "^5.0.0",
         "cors": "^2.8.5",
         "dotenv": "^16.3.1",
@@ -36,6 +36,7 @@
         "qrcode": "^1.5.4",
         "simple-statistics": "^7.8.3",
         "socket.io": "^4.8.3",
+        "socket.io-client": "^4.8.3",
         "twilio": "^5.12.0",
         "web-push": "^3.6.7",
         "xero-node": "^13.3.1",
@@ -1380,6 +1381,39 @@
         "node": ">=10.2.0"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.4.tgz",
+      "integrity": "sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.18.3",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
     "node_modules/engine.io-parser": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
@@ -4219,6 +4253,41 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/socket.io-client": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.3.tgz",
+      "integrity": "sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.4.1",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-client/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-client/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
     "node_modules/socket.io-parser": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.5.tgz",
@@ -4980,6 +5049,14 @@
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/xss": {
       "version": "1.0.15",
       "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.15.tgz",
diff --git a/package.json b/package.json
index 1b11fdc8..af69eaa8 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "axios": "^1.6.2",
     "bcryptjs": "^2.4.3",
     "canvas": "^3.2.1",
-    "chart.js": "^4.4.1",
+    "chart.js": "^4.5.1",
     "chartjs-node-canvas": "^5.0.0",
     "cors": "^2.8.5",
     "dotenv": "^16.3.1",
@@ -36,6 +36,7 @@
     "qrcode": "^1.5.4",
     "simple-statistics": "^7.8.3",
     "socket.io": "^4.8.3",
+    "socket.io-client": "^4.8.3",
     "twilio": "^5.12.0",
     "web-push": "^3.6.7",
     "xero-node": "^13.3.1",
diff --git a/public/Community.html b/public/Community.html
index e419b7b0..d062883c 100644
--- a/public/Community.html
+++ b/public/Community.html
@@ -819,7 +819,7 @@
 </style>
 
 <div class="cursor-trail-container" id="cursor-trail"></div>
-
+<script src="protect.js"></script>
 <script>
 (function() {
   // Hide default cursor
diff --git a/public/Help-Center.html b/public/Help-Center.html
index 0becc4a4..f34e0c55 100644
--- a/public/Help-Center.html
+++ b/public/Help-Center.html
@@ -503,7 +503,7 @@
 </style>
 
 <div class="cursor-trail-container" id="cursor-trail"></div>
-
+<script src="protect.js"></script>
 <script>
 (function() {
   // Hide default cursor
diff --git a/public/Monthlysummary.html b/public/Monthlysummary.html
index dfc41549..4ec3af1c 100644
--- a/public/Monthlysummary.html
+++ b/public/Monthlysummary.html
@@ -1,531 +1,663 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-<meta charset="UTF-8">
-<title>Reports | ExpenseFlow</title>
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-<!-- Fonts & Icons -->
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-
-<!-- SAME CSS -->
-<link rel="stylesheet" href="expensetracker.css">
-
-<!-- Export libs -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-
-<style>
-.fade-in{animation:fadeIn .8s ease forwards}
-.slide-up{animation:slideUp .8s ease forwards}
-.scale-in{animation:scaleIn .6s ease forwards}
-
-@keyframes fadeIn{from{opacity:0}to{opacity:1}}
-@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
-@keyframes scaleIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
-
-.stats-grid{
-display:grid;
-grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
-gap:1.2rem;
-margin-top:1.2rem;
-}
-.stat-card{text-align:center}
-
-/* Footer alignment */
-.footer,.footer-container,.footer-bottom{text-align:center}
-.footer-container{
-display:flex;
-flex-wrap:wrap;
-justify-content:center;
-align-items:center;
-gap:2rem;
-}
-.footer-links{padding:0;margin:0}
-.footer-links li{list-style:none}
-.footer-bottom p{margin:0;padding:.8rem 0}
-#summaryChart {
-  max-height: 250px; /* limits height */
-  width: 100% !important; /* full width inside card */
-  object-fit: contain;   /* scale nicely */
-}
-
-</style>
-</head>
-
-<body>
-
-        <!-- Smooth Cursor Trail -->
-<style>
-  .cursor-trail-container {
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    z-index: 999999;
-  }
-
-  .trail-dot {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #64ffda 0%, #00b4d8 100%);
-    box-shadow: 
-      0 0 15px rgba(100, 255, 218, 0.8),
-      0 0 30px rgba(100, 255, 218, 0.4);
-    transform: translate(-50%, -50%);
-    will-change: transform, opacity;
-    mix-blend-mode: screen;
-    transition: opacity 0.3s ease, transform 0.3s ease;
-  }
-
-  .trail-dot:first-child {
-    width: 12px;
-    height: 12px;
-    background: linear-gradient(135deg, #64ffda 0%, #00b4d8 100%);
-    box-shadow: 
-      0 0 20px rgba(100, 255, 218, 0.9),
-      0 0 40px rgba(100, 255, 218, 0.6);
-    z-index: 2;
-  }
-
-  .cursor-clicking {
-    transform: translate(-50%, -50%) scale(1.5);
-    background: linear-gradient(135deg, #ff6b9d 0%, #ffcc00 100%) !important;
-    box-shadow: 
-      0 0 25px rgba(255, 107, 157, 0.9),
-      0 0 50px rgba(255, 107, 157, 0.6) !important;
-  }
-
-  .cursor-hovering {
-    transform: translate(-50%, -50%) scale(1.3);
-    background: linear-gradient(135deg, #00b4d8 0%, #64ffda 100%) !important;
-  }
-</style>
-
-<div class="cursor-trail-container" id="cursor-trail"></div>
-
-<script>
-(function() {
-  // Hide default cursor
-  document.body.style.cursor = 'none';
-
-  const container = document.getElementById('cursor-trail');
-  const coords = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
-  const trailCircles = [];
-  const COUNT = 12; // Fewer circles for smoother trail
-
-  // Create trail circles
-  for (let i = 0; i < COUNT; i++) {
-    const circle = document.createElement('div');
-    circle.className = 'trail-dot';
-
-    // Opacity decreases along the trail
-    const opacity = 0.9 - (i / COUNT) * 0.8;
-    circle.style.opacity = opacity.toString();
-
-    // Size decreases along the trail
-    const scale = 1 - (i / COUNT) * 0.5;
-    circle.style.transform = `translate(-50%, -50%) scale(${scale})`;
-
-    container.appendChild(circle);
-    trailCircles.push({ 
-      element: circle, 
-      x: coords.x, 
-      y: coords.y,
-      targetX: coords.x,
-      targetY: coords.y
-    });
-  }
-
-  // Track mouse position
-  let isMoving = false;
-  let lastMouseX = coords.x;
-  let lastMouseY = coords.y;
-  let velocity = { x: 0, y: 0 };
-
-  window.addEventListener('mousemove', e => {
-    coords.x = e.clientX;
-    coords.y = e.clientY;
-
-    // Calculate velocity for smooth movement
-    velocity.x = e.clientX - lastMouseX;
-    velocity.y = e.clientY - lastMouseY;
-    lastMouseX = e.clientX;
-    lastMouseY = e.clientY;
-
-    isMoving = true;
-
-    // Reset movement timeout
-    clearTimeout(window.movementTimeout);
-    window.movementTimeout = setTimeout(() => {
-      isMoving = false;
-    }, 50);
-  });
-
-  // Click effect
-  window.addEventListener('mousedown', () => {
-    trailCircles.forEach(circle => {
-      circle.element.classList.add('cursor-clicking');
-    });
-  });
-
-  window.addEventListener('mouseup', () => {
-    trailCircles.forEach(circle => {
-      circle.element.classList.remove('cursor-clicking');
-    });
-  });
-
-  // Hover effect for interactive elements
-  window.addEventListener('mouseover', e => {
-    const interactive = e.target.closest('a, button, input, select, textarea, [role="button"]');
-    trailCircles.forEach(circle => {
-      circle.element.classList.toggle('cursor-hovering', !!interactive);
-    });
-  });
-
-  // Smooth animation function
-  function animateTrail() {
-    let targetX = coords.x;
-    let targetY = coords.y;
-
-    // Add velocity offset to first circle for more natural feel
-    const velocityOffset = 0.5;
-    const offsetX = velocity.x * velocityOffset;
-    const offsetY = velocity.y * velocityOffset;
-
-    trailCircles.forEach((circle, index) => {
-      // First circle follows cursor exactly
-      if (index === 0) {
-        circle.x = targetX + offsetX;
-        circle.y = targetY + offsetY;
-      } 
-      // Other circles follow with smooth delay
-      else {
-        const prevCircle = trailCircles[index - 1];
-
-        // Smooth interpolation factor (changes based on movement speed)
-        const speed = Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y);
-        const lerpFactor = isMoving ? 
-          Math.min(0.3 + (speed * 0.01), 0.5) :  // Faster movement = tighter trail
-          0.1; // Slow movement = more spread
-
-        circle.x += (prevCircle.x - circle.x) * lerpFactor;
-        circle.y += (prevCircle.y - circle.y) * lerpFactor;
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reports | ExpenseFlow</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- Fonts & Icons -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
+    />
+
+    <!-- SAME CSS -->
+    <link rel="stylesheet" href="expensetracker.css" />
+
+    <!-- Export libs -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+    <style>
+      .fade-in {
+        animation: fadeIn 0.8s ease forwards;
+      }
+      .slide-up {
+        animation: slideUp 0.8s ease forwards;
+      }
+      .scale-in {
+        animation: scaleIn 0.6s ease forwards;
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      @keyframes slideUp {
+        from {
+          opacity: 0;
+          transform: translateY(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      @keyframes scaleIn {
+        from {
+          transform: scale(0.9);
+          opacity: 0;
+        }
+        to {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+        gap: 1.2rem;
+        margin-top: 1.2rem;
+      }
+      .stat-card {
+        text-align: center;
+      }
+
+      /* Footer alignment */
+      .footer,
+      .footer-container,
+      .footer-bottom {
+        text-align: center;
+      }
+      .footer-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        gap: 2rem;
+      }
+      .footer-links {
+        padding: 0;
+        margin: 0;
+      }
+      .footer-links li {
+        list-style: none;
+      }
+      .footer-bottom p {
+        margin: 0;
+        padding: 0.8rem 0;
+      }
+      #summaryChart {
+        max-height: 250px; /* limits height */
+        width: 100% !important; /* full width inside card */
+        object-fit: contain; /* scale nicely */
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- Smooth Cursor Trail -->
+    <style>
+      .cursor-trail-container {
+        position: fixed;
+        inset: 0;
+        pointer-events: none;
+        z-index: 999999;
       }
 
-      // Apply position with easing
-      circle.element.style.left = circle.x + 'px';
-      circle.element.style.top = circle.y + 'px';
+      .trail-dot {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #64ffda 0%, #00b4d8 100%);
+        box-shadow:
+          0 0 15px rgba(100, 255, 218, 0.8),
+          0 0 30px rgba(100, 255, 218, 0.4);
+        transform: translate(-50%, -50%);
+        will-change: transform, opacity;
+        mix-blend-mode: screen;
+        transition:
+          opacity 0.3s ease,
+          transform 0.3s ease;
+      }
 
-      // Dynamic opacity based on speed and position
-      if (index > 0) {
-        const speed = Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y);
-        const baseOpacity = 0.9 - (index / COUNT) * 0.8;
-        const speedMultiplier = Math.min(1 + speed * 0.02, 1.5);
-        circle.element.style.opacity = (baseOpacity * speedMultiplier).toString();
+      .trail-dot:first-child {
+        width: 12px;
+        height: 12px;
+        background: linear-gradient(135deg, #64ffda 0%, #00b4d8 100%);
+        box-shadow:
+          0 0 20px rgba(100, 255, 218, 0.9),
+          0 0 40px rgba(100, 255, 218, 0.6);
+        z-index: 2;
       }
 
-      // Update target for next circle
-      targetX = circle.x;
-      targetY = circle.y;
-    });
-
-    requestAnimationFrame(animateTrail);
-  }
-
-  // Handle window resize
-  window.addEventListener('resize', () => {
-    // Adjust if cursor goes out of bounds
-    if (coords.x > window.innerWidth) coords.x = window.innerWidth;
-    if (coords.y > window.innerHeight) coords.y = window.innerHeight;
-  });
-
-  // Handle mouse leave/enter
-  window.addEventListener('mouseleave', () => {
-    trailCircles.forEach(circle => {
-      circle.element.style.opacity = '0';
-    });
-  });
-
-  window.addEventListener('mouseenter', () => {
-    trailCircles.forEach((circle, index) => {
-      const opacity = 0.9 - (index / COUNT) * 0.8;
-      circle.element.style.opacity = opacity.toString();
-    });
-  });
-
-  // Start animation
-  animateTrail();
-})();
-</script>
-
-<header class="header">
-<nav class="navbar">
-<div class="nav-container">
-<div class="nav-logo">
-<i class="fas fa-wallet"></i>
-<span>ExpenseFlow</span>
-</div>
-<div class="nav-menu">
-<a href="login.html" class="nav-link">Dashboard</a>
-<a href="#analytics.html" class="nav-link">Analytics</a>
-<a href="Monthlysummary.html" class="nav-link active">Finance Summary</a>
-<a href="finance-tips.html" class="nav-link">Finance Tips</a>
-<a href="#settings.html" class="nav-link">Settings</a>
-</div>
-</div>
-</nav>
-</header>
-
-<main class="main-content">
-
-<section class="hero-section fade-in">
-<h1 class="hero-title" style="text-align:center">Monthly / Yearly Summary</h1>
-<p class="hero-subtitle" style="text-align:center">Visual insights into your money habits 📊</p>
-</section>
-
-<div class="container">
-
-<div class="balance-card slide-up">
-<div class="balance-header" style="justify-content:center">
-<i class="fas fa-calendar"></i>
-<h4>Select Period</h4>
-</div>
-
-<div style="display:flex;gap:1rem;flex-wrap:wrap;justify-content:center">
-<select id="type" class="filter-btn">
-<option value="month">Monthly</option>
-<option value="year">Yearly</option>
-</select>
-
-<select id="period" class="filter-btn"></select>
-
-<button class="btn-submit" onclick="generateReport()">Generate Report</button>
-</div>
-
-<div id="report" class="balance-card scale-in" style="display:none">
-<div class="balance-header" style="justify-content:center">
-<i class="fas fa-chart-line"></i>
-<h4 id="reportTitle"></h4>
-</div>
-
-<p id="summaryText" class="hero-subtitle" style="text-align:center;margin-top:.8rem"></p>
-
-<div class="stats-grid">
-<div class="stat-card balance-card">
-<p>Total Income</p>
-<h2 id="income">₹0</h2>
-</div>
-
-<div class="stat-card balance-card">
-<p>Total Expenses</p>
-<h2 id="expense">₹0</h2>
-</div>
-
-<div class="stat-card balance-card">
-<p>Top Category</p>
-<h2 id="category">-</h2>
-</div>
-
-<div class="stat-card balance-card">
-<p>Savings</p>
-<h2 id="savings">0%</h2>
-</div>
-</div>
-
-<div style="margin-top:1.5rem">
-<canvas id="summaryChart" height="120"></canvas>
-</div>
-
-<div style="margin-top:1.5rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center">
-<button class="filter-btn" onclick="downloadImage()"><i class="fas fa-image"></i> Download Image</button>
-<button class="filter-btn" onclick="downloadPDF()"><i class="fas fa-file-pdf"></i> Download PDF</button>
-</div>
-</div>
-</div>
-</div>
-</main>
-
-<footer class="footer fade-in">
-<div class="footer-container">
-<div class="footer-section">
-<div class="footer-logo">
-<i class="fas fa-wallet"></i>
-<span>ExpenseFlow</span>
-</div>
-<p>Smart money management made simple.</p>
-</div>
-
-<div class="footer-section">
-<h4>Resources</h4>
-<ul class="footer-links">
-<li><a href="finance-tips.html">Finance Tips</a></li>
-<li><a href="Help-Center.html">Help Center</a></li>
-<li><a href="community.html">Community</a></li>
-</ul>
-</div>
-</div>
-
-<div class="footer-bottom">
-<p>&copy; 2026 ExpenseFlow. All rights reserved.</p>
-</div>
-</footer>
-
-<script>
-/* ========= ELEMENT REFERENCES ========= */
-const incomeEl = document.getElementById("income");
-const expenseEl = document.getElementById("expense");
-const categoryEl = document.getElementById("category");
-const savingsEl = document.getElementById("savings");
-const report = document.getElementById("report");
-const reportTitle = document.getElementById("reportTitle");
-const summaryText = document.getElementById("summaryText");
-const typeSelect = document.getElementById("type");
-const periodSelect = document.getElementById("period");
-const chartCanvas = document.getElementById("summaryChart");
-
-let chartInstance = null;
-
-/* ========= DUMMY DATA ========= */
-const dummyExpenses = [
-  {amount:45000,type:"income",category:"Salary",date:"2026-01-05"},
-  {amount:12000,type:"expense",category:"Food",date:"2026-01-10"},
-  {amount:8000,type:"expense",category:"Rent",date:"2026-01-01"},
-  {amount:4000,type:"expense",category:"Travel",date:"2026-01-18"},
-  {amount:45000,type:"income",category:"Salary",date:"2026-02-05"},
-  {amount:10000,type:"expense",category:"Food",date:"2026-02-12"},
-  {amount:9000,type:"expense",category:"Rent",date:"2026-02-02"},
-  {amount:5000,type:"expense",category:"Shopping",date:"2026-02-20"}
-];
-
-let expenses = JSON.parse(localStorage.getItem("expenses"));
-if(!expenses || !expenses.length){
-  expenses = dummyExpenses;
-  localStorage.setItem("expenses", JSON.stringify(expenses));
-}
-
-/* ========= LOAD PERIODS ========= */
-function loadPeriods(){
-  periodSelect.innerHTML = "";
-  const y = new Date().getFullYear();
-
-  if(typeSelect.value === "month"){
-    for(let m=1; m<=12; m++){
-      const opt = document.createElement("option");
-      opt.value = `${y}-${m}`;
-      opt.text = `${y} - ${new Date(y, m-1).toLocaleString("default",{month:"long"})}`;
-      periodSelect.appendChild(opt);
-    }
-  } else {
-    for(let i=y-2; i<=y+1; i++){
-      const opt = document.createElement("option");
-      opt.value = i;
-      opt.text = i;
-      periodSelect.appendChild(opt);
-    }
-  }
-}
-
-/* ========= GENERATE REPORT ========= */
-function generateReport(){
-  let income = 0, expense = 0, categories = {};
-
-  expenses.forEach(e=>{
-    const d = new Date(e.date);
-    let match = false;
-
-    if(typeSelect.value === "month"){
-      match = `${d.getFullYear()}-${d.getMonth()+1}` === periodSelect.value;
-    } else {
-      match = d.getFullYear() == periodSelect.value;
-    }
-
-    if(match){
-      if(e.type === "income") income += e.amount;
-      else{
-        expense += e.amount;
-        categories[e.category] = (categories[e.category] || 0) + e.amount;
+      .cursor-clicking {
+        transform: translate(-50%, -50%) scale(1.5);
+        background: linear-gradient(
+          135deg,
+          #ff6b9d 0%,
+          #ffcc00 100%
+        ) !important;
+        box-shadow:
+          0 0 25px rgba(255, 107, 157, 0.9),
+          0 0 50px rgba(255, 107, 157, 0.6) !important;
       }
-    }
-  });
 
-  const topCategory = Object.keys(categories).length
-    ? Object.keys(categories).sort((a,b)=>categories[b]-categories[a])[0]
-    : "-";
+      .cursor-hovering {
+        transform: translate(-50%, -50%) scale(1.3);
+        background: linear-gradient(
+          135deg,
+          #00b4d8 0%,
+          #64ffda 100%
+        ) !important;
+      }
+    </style>
+
+    <div class="cursor-trail-container" id="cursor-trail"></div>
+
+    <script>
+      (function () {
+        // Hide default cursor
+        document.body.style.cursor = "none";
+
+        const container = document.getElementById("cursor-trail");
+        const coords = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+        const trailCircles = [];
+        const COUNT = 12; // Fewer circles for smoother trail
+
+        // Create trail circles
+        for (let i = 0; i < COUNT; i++) {
+          const circle = document.createElement("div");
+          circle.className = "trail-dot";
+
+          // Opacity decreases along the trail
+          const opacity = 0.9 - (i / COUNT) * 0.8;
+          circle.style.opacity = opacity.toString();
+
+          // Size decreases along the trail
+          const scale = 1 - (i / COUNT) * 0.5;
+          circle.style.transform = `translate(-50%, -50%) scale(${scale})`;
+
+          container.appendChild(circle);
+          trailCircles.push({
+            element: circle,
+            x: coords.x,
+            y: coords.y,
+            targetX: coords.x,
+            targetY: coords.y,
+          });
+        }
 
-  const savingsPct = income
-    ? (((income-expense)/income)*100).toFixed(1)
-    : 0;
+        // Track mouse position
+        let isMoving = false;
+        let lastMouseX = coords.x;
+        let lastMouseY = coords.y;
+        let velocity = { x: 0, y: 0 };
+
+        window.addEventListener("mousemove", (e) => {
+          coords.x = e.clientX;
+          coords.y = e.clientY;
+
+          // Calculate velocity for smooth movement
+          velocity.x = e.clientX - lastMouseX;
+          velocity.y = e.clientY - lastMouseY;
+          lastMouseX = e.clientX;
+          lastMouseY = e.clientY;
+
+          isMoving = true;
+
+          // Reset movement timeout
+          clearTimeout(window.movementTimeout);
+          window.movementTimeout = setTimeout(() => {
+            isMoving = false;
+          }, 50);
+        });
+
+        // Click effect
+        window.addEventListener("mousedown", () => {
+          trailCircles.forEach((circle) => {
+            circle.element.classList.add("cursor-clicking");
+          });
+        });
+
+        window.addEventListener("mouseup", () => {
+          trailCircles.forEach((circle) => {
+            circle.element.classList.remove("cursor-clicking");
+          });
+        });
+
+        // Hover effect for interactive elements
+        window.addEventListener("mouseover", (e) => {
+          const interactive = e.target.closest(
+            'a, button, input, select, textarea, [role="button"]',
+          );
+          trailCircles.forEach((circle) => {
+            circle.element.classList.toggle("cursor-hovering", !!interactive);
+          });
+        });
+
+        // Smooth animation function
+        function animateTrail() {
+          let targetX = coords.x;
+          let targetY = coords.y;
+
+          // Add velocity offset to first circle for more natural feel
+          const velocityOffset = 0.5;
+          const offsetX = velocity.x * velocityOffset;
+          const offsetY = velocity.y * velocityOffset;
+
+          trailCircles.forEach((circle, index) => {
+            // First circle follows cursor exactly
+            if (index === 0) {
+              circle.x = targetX + offsetX;
+              circle.y = targetY + offsetY;
+            }
+            // Other circles follow with smooth delay
+            else {
+              const prevCircle = trailCircles[index - 1];
+
+              // Smooth interpolation factor (changes based on movement speed)
+              const speed = Math.sqrt(
+                velocity.x * velocity.x + velocity.y * velocity.y,
+              );
+              const lerpFactor = isMoving
+                ? Math.min(0.3 + speed * 0.01, 0.5) // Faster movement = tighter trail
+                : 0.1; // Slow movement = more spread
+
+              circle.x += (prevCircle.x - circle.x) * lerpFactor;
+              circle.y += (prevCircle.y - circle.y) * lerpFactor;
+            }
+
+            // Apply position with easing
+            circle.element.style.left = circle.x + "px";
+            circle.element.style.top = circle.y + "px";
+
+            // Dynamic opacity based on speed and position
+            if (index > 0) {
+              const speed = Math.sqrt(
+                velocity.x * velocity.x + velocity.y * velocity.y,
+              );
+              const baseOpacity = 0.9 - (index / COUNT) * 0.8;
+              const speedMultiplier = Math.min(1 + speed * 0.02, 1.5);
+              circle.element.style.opacity = (
+                baseOpacity * speedMultiplier
+              ).toString();
+            }
+
+            // Update target for next circle
+            targetX = circle.x;
+            targetY = circle.y;
+          });
+
+          requestAnimationFrame(animateTrail);
+        }
 
-  incomeEl.innerText = `₹${income.toLocaleString()}`;
-  expenseEl.innerText = `₹${expense.toLocaleString()}`;
-  categoryEl.innerText = topCategory;
-  savingsEl.innerText = `${savingsPct}%`;
+        // Handle window resize
+        window.addEventListener("resize", () => {
+          // Adjust if cursor goes out of bounds
+          if (coords.x > window.innerWidth) coords.x = window.innerWidth;
+          if (coords.y > window.innerHeight) coords.y = window.innerHeight;
+        });
+
+        // Handle mouse leave/enter
+        window.addEventListener("mouseleave", () => {
+          trailCircles.forEach((circle) => {
+            circle.element.style.opacity = "0";
+          });
+        });
+
+        window.addEventListener("mouseenter", () => {
+          trailCircles.forEach((circle, index) => {
+            const opacity = 0.9 - (index / COUNT) * 0.8;
+            circle.element.style.opacity = opacity.toString();
+          });
+        });
+
+        // Start animation
+        animateTrail();
+      })();
+    </script>
+
+    <header class="header">
+      <nav class="navbar">
+        <div class="nav-container">
+          <div class="nav-logo">
+            <i class="fas fa-wallet"></i>
+            <span>ExpenseFlow</span>
+          </div>
+          <div class="nav-menu">
+            <a href="login.html" class="nav-link">Dashboard</a>
+            <a href="#analytics.html" class="nav-link">Analytics</a>
+            <a href="Monthlysummary.html" class="nav-link active"
+              >Finance Summary</a
+            >
+            <a href="finance-tips.html" class="nav-link">Finance Tips</a>
+            <a href="#settings.html" class="nav-link">Settings</a>
+          </div>
+        </div>
+      </nav>
+    </header>
+
+    <main class="main-content">
+      <section class="hero-section fade-in">
+        <h1 class="hero-title" style="text-align: center">
+          Monthly / Yearly Summary
+        </h1>
+        <p class="hero-subtitle" style="text-align: center">
+          Visual insights into your money habits 📊
+        </p>
+      </section>
+
+      <div class="container">
+        <div class="balance-card slide-up">
+          <div class="balance-header" style="justify-content: center">
+            <i class="fas fa-calendar"></i>
+            <h4>Select Period</h4>
+          </div>
+
+          <div
+            style="
+              display: flex;
+              gap: 1rem;
+              flex-wrap: wrap;
+              justify-content: center;
+            "
+          >
+            <select id="type" class="filter-btn">
+              <option value="month">Monthly</option>
+              <option value="year">Yearly</option>
+            </select>
+
+            <select id="period" class="filter-btn"></select>
+
+            <button class="btn-submit" onclick="generateReport()">
+              Generate Report
+            </button>
+          </div>
+
+          <div id="report" class="balance-card scale-in" style="display: none">
+            <div class="balance-header" style="justify-content: center">
+              <i class="fas fa-chart-line"></i>
+              <h4 id="reportTitle"></h4>
+            </div>
+
+            <p
+              id="summaryText"
+              class="hero-subtitle"
+              style="text-align: center; margin-top: 0.8rem"
+            ></p>
+
+            <div class="stats-grid">
+              <div class="stat-card balance-card">
+                <p>Total Income</p>
+                <h2 id="income">₹0</h2>
+              </div>
+
+              <div class="stat-card balance-card">
+                <p>Total Expenses</p>
+                <h2 id="expense">₹0</h2>
+              </div>
+
+              <div class="stat-card balance-card">
+                <p>Top Category</p>
+                <h2 id="category">-</h2>
+              </div>
+
+              <div class="stat-card balance-card">
+                <p>Savings</p>
+                <h2 id="savings">0%</h2>
+              </div>
+            </div>
+
+            <div style="margin-top: 1.5rem">
+              <canvas id="summaryChart" height="120"></canvas>
+            </div>
+
+            <div
+              style="
+                margin-top: 1.5rem;
+                display: flex;
+                gap: 1rem;
+                flex-wrap: wrap;
+                justify-content: center;
+              "
+            >
+              <button class="filter-btn" onclick="downloadImage()">
+                <i class="fas fa-image"></i> Download Image
+              </button>
+              <button class="filter-btn" onclick="downloadPDF()">
+                <i class="fas fa-file-pdf"></i> Download PDF
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <footer class="footer fade-in">
+      <div class="footer-container">
+        <div class="footer-section">
+          <div class="footer-logo">
+            <i class="fas fa-wallet"></i>
+            <span>ExpenseFlow</span>
+          </div>
+          <p>Smart money management made simple.</p>
+        </div>
+
+        <div class="footer-section">
+          <h4>Resources</h4>
+          <ul class="footer-links">
+            <li><a href="finance-tips.html">Finance Tips</a></li>
+            <li><a href="Help-Center.html">Help Center</a></li>
+            <li><a href="community.html">Community</a></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="footer-bottom">
+        <p>&copy; 2026 ExpenseFlow. All rights reserved.</p>
+      </div>
+    </footer>
+    <script src="protect.js"></script>
+
+    <script>
+      /* ========= ELEMENT REFERENCES ========= */
+      const incomeEl = document.getElementById("income");
+      const expenseEl = document.getElementById("expense");
+      const categoryEl = document.getElementById("category");
+      const savingsEl = document.getElementById("savings");
+      const report = document.getElementById("report");
+      const reportTitle = document.getElementById("reportTitle");
+      const summaryText = document.getElementById("summaryText");
+      const typeSelect = document.getElementById("type");
+      const periodSelect = document.getElementById("period");
+      const chartCanvas = document.getElementById("summaryChart");
+
+      let chartInstance = null;
+
+      /* ========= DUMMY DATA ========= */
+      const dummyExpenses = [
+        {
+          amount: 45000,
+          type: "income",
+          category: "Salary",
+          date: "2026-01-05",
+        },
+        {
+          amount: 12000,
+          type: "expense",
+          category: "Food",
+          date: "2026-01-10",
+        },
+        { amount: 8000, type: "expense", category: "Rent", date: "2026-01-01" },
+        {
+          amount: 4000,
+          type: "expense",
+          category: "Travel",
+          date: "2026-01-18",
+        },
+        {
+          amount: 45000,
+          type: "income",
+          category: "Salary",
+          date: "2026-02-05",
+        },
+        {
+          amount: 10000,
+          type: "expense",
+          category: "Food",
+          date: "2026-02-12",
+        },
+        { amount: 9000, type: "expense", category: "Rent", date: "2026-02-02" },
+        {
+          amount: 5000,
+          type: "expense",
+          category: "Shopping",
+          date: "2026-02-20",
+        },
+      ];
+
+      let expenses = JSON.parse(localStorage.getItem("expenses"));
+      if (!expenses || !expenses.length) {
+        expenses = dummyExpenses;
+        localStorage.setItem("expenses", JSON.stringify(expenses));
+      }
 
-  reportTitle.innerText =
-    `Report: ${periodSelect.options[periodSelect.selectedIndex].text}`;
+      /* ========= LOAD PERIODS ========= */
+      function loadPeriods() {
+        periodSelect.innerHTML = "";
+        const y = new Date().getFullYear();
+
+        if (typeSelect.value === "month") {
+          for (let m = 1; m <= 12; m++) {
+            const opt = document.createElement("option");
+            opt.value = `${y}-${m}`;
+            opt.text = `${y} - ${new Date(y, m - 1).toLocaleString("default", { month: "long" })}`;
+            periodSelect.appendChild(opt);
+          }
+        } else {
+          for (let i = y - 2; i <= y + 1; i++) {
+            const opt = document.createElement("option");
+            opt.value = i;
+            opt.text = i;
+            periodSelect.appendChild(opt);
+          }
+        }
+      }
 
-  summaryText.innerHTML = income
-    ? `You earned <b>₹${income.toLocaleString()}</b> and spent <b>₹${expense.toLocaleString()}</b>.
+      /* ========= GENERATE REPORT ========= */
+      function generateReport() {
+        let income = 0,
+          expense = 0,
+          categories = {};
+
+        expenses.forEach((e) => {
+          const d = new Date(e.date);
+          let match = false;
+
+          if (typeSelect.value === "month") {
+            match =
+              `${d.getFullYear()}-${d.getMonth() + 1}` === periodSelect.value;
+          } else {
+            match = d.getFullYear() == periodSelect.value;
+          }
+
+          if (match) {
+            if (e.type === "income") income += e.amount;
+            else {
+              expense += e.amount;
+              categories[e.category] = (categories[e.category] || 0) + e.amount;
+            }
+          }
+        });
+
+        const topCategory = Object.keys(categories).length
+          ? Object.keys(categories).sort(
+              (a, b) => categories[b] - categories[a],
+            )[0]
+          : "-";
+
+        const savingsPct = income
+          ? (((income - expense) / income) * 100).toFixed(1)
+          : 0;
+
+        incomeEl.innerText = `₹${income.toLocaleString()}`;
+        expenseEl.innerText = `₹${expense.toLocaleString()}`;
+        categoryEl.innerText = topCategory;
+        savingsEl.innerText = `${savingsPct}%`;
+
+        reportTitle.innerText = `Report: ${periodSelect.options[periodSelect.selectedIndex].text}`;
+
+        summaryText.innerHTML = income
+          ? `You earned <b>₹${income.toLocaleString()}</b> and spent <b>₹${expense.toLocaleString()}</b>.
        Highest spending was on <b>${topCategory}</b>.
        Savings rate is <b>${savingsPct}%</b>.`
-    : `No data available for the selected period.`;
-
-  /* ========= CHART ========= */
-  if(chartInstance) chartInstance.destroy();
-
-  chartInstance = new Chart(chartCanvas, {
-    type: "doughnut",
-    data: {
-      labels: Object.keys(categories),
-      datasets: [{
-        data: Object.values(categories),
-        borderWidth: 0
-      }]
-    },
-    options: {
-      responsive: true,
-      plugins: {
-        legend: {
-          labels: { color: "#b4b4b4" }
-        }
+          : `No data available for the selected period.`;
+
+        /* ========= CHART ========= */
+        if (chartInstance) chartInstance.destroy();
+
+        chartInstance = new Chart(chartCanvas, {
+          type: "doughnut",
+          data: {
+            labels: Object.keys(categories),
+            datasets: [
+              {
+                data: Object.values(categories),
+                borderWidth: 0,
+              },
+            ],
+          },
+          options: {
+            responsive: true,
+            plugins: {
+              legend: {
+                labels: { color: "#b4b4b4" },
+              },
+            },
+          },
+        });
+
+        report.style.display = "block";
       }
-    }
-  });
-
-  report.style.display = "block";
-}
-
-/* ========= DOWNLOAD IMAGE ========= */
-function downloadImage(){
-  html2canvas(report).then(canvas=>{
-    const link = document.createElement("a");
-    link.download = "ExpenseFlow_Report.png";
-    link.href = canvas.toDataURL();
-    link.click();
-  });
-}
-
-/* ========= DOWNLOAD PDF ========= */
-function downloadPDF(){
-  html2canvas(report).then(canvas=>{
-    const imgData = canvas.toDataURL("image/png");
-    const pdf = new jspdf.jsPDF("p","mm","a4");
-    const w = pdf.internal.pageSize.getWidth();
-    const h = canvas.height * w / canvas.width;
-    pdf.addImage(imgData,"PNG",0,10,w,h);
-    pdf.save("ExpenseFlow_Report.pdf");
-  });
-}
-
-/* ========= INIT ========= */
-typeSelect.onchange = loadPeriods;
-loadPeriods();
-</script>
-
-</body>
+
+      /* ========= DOWNLOAD IMAGE ========= */
+      function downloadImage() {
+        html2canvas(report).then((canvas) => {
+          const link = document.createElement("a");
+          link.download = "ExpenseFlow_Report.png";
+          link.href = canvas.toDataURL();
+          link.click();
+        });
+      }
+
+      /* ========= DOWNLOAD PDF ========= */
+      function downloadPDF() {
+        html2canvas(report).then((canvas) => {
+          const imgData = canvas.toDataURL("image/png");
+          const pdf = new jspdf.jsPDF("p", "mm", "a4");
+          const w = pdf.internal.pageSize.getWidth();
+          const h = (canvas.height * w) / canvas.width;
+          pdf.addImage(imgData, "PNG", 0, 10, w, h);
+          pdf.save("ExpenseFlow_Report.pdf");
+        });
+      }
+
+      /* ========= INIT ========= */
+      typeSelect.onchange = loadPeriods;
+      loadPeriods();
+    </script>
+  </body>
 </html>
diff --git a/public/PrivacyPolicy.html b/public/PrivacyPolicy.html
index 78b9dcb8..5745c499 100644
--- a/public/PrivacyPolicy.html
+++ b/public/PrivacyPolicy.html
@@ -781,6 +781,7 @@ <h4>Resources</h4>
       <p>&copy; 2026 ExpenseFlow. All rights reserved.</p>
     </div>
   </div>
+  <script src="protect.js"></script>
 </footer>
 
 </body>
diff --git a/public/accounts-dashboard.js b/public/accounts-dashboard.js
index abc911aa..1ac93f06 100644
--- a/public/accounts-dashboard.js
+++ b/public/accounts-dashboard.js
@@ -18,7 +18,7 @@ let netWorthChart = null;
 // ============================================
 
 async function fetchAccounts() {
-  const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+  const token = localStorage.getItem('token') || localStorage.getItem('token');
   if (!token) throw new Error('Not authenticated');
 
   const response = await fetch(ACCOUNTS_API, {
@@ -30,7 +30,7 @@ async function fetchAccounts() {
 }
 
 async function createAccount(accountData) {
-  const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+  const token = localStorage.getItem('token') || localStorage.getItem('token');
   
   const response = await fetch(ACCOUNTS_API, {
     method: 'POST',
@@ -49,7 +49,7 @@ async function createAccount(accountData) {
 }
 
 async function updateAccount(accountId, updates) {
-  const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+  const token = localStorage.getItem('token') || localStorage.getItem('token');
   
   const response = await fetch(`${ACCOUNTS_API}/${accountId}`, {
     method: 'PUT',
@@ -65,7 +65,7 @@ async function updateAccount(accountId, updates) {
 }
 
 async function deleteAccount(accountId) {
-  const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+  const token = localStorage.getItem('token') || localStorage.getItem('token');
   
   const response = await fetch(`${ACCOUNTS_API}/${accountId}`, {
     method: 'DELETE',
@@ -77,7 +77,7 @@ async function deleteAccount(accountId) {
 }
 
 async function updateAccountBalance(accountId, balance, description = '') {
-  const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+  const token = localStorage.getItem('token') || localStorage.getItem('token');
   
   const response = await fetch(`${ACCOUNTS_API}/${accountId}/balance`, {
     method: 'PATCH',
@@ -93,7 +93,7 @@ async function updateAccountBalance(accountId, balance, description = '') {
 }
 
 async function executeTransfer(transferData) {
-  const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+  const token = localStorage.getItem('token') || localStorage.getItem('token');
   
   const response = await fetch(`${ACCOUNTS_API}/transfer`, {
     method: 'POST',
@@ -112,7 +112,7 @@ async function executeTransfer(transferData) {
 }
 
 async function fetchNetWorthSummary() {
-  const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+  const token = localStorage.getItem('token') || localStorage.getItem('token');
   
   const response = await fetch(`${ACCOUNTS_API}/networth/summary`, {
     headers: { 'Authorization': `Bearer ${token}` }
@@ -123,7 +123,7 @@ async function fetchNetWorthSummary() {
 }
 
 async function fetchNetWorthTrend(days = 30) {
-  const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+  const token = localStorage.getItem('token') || localStorage.getItem('token');
   
   const response = await fetch(`${ACCOUNTS_API}/networth/trend?days=${days}`, {
     headers: { 'Authorization': `Bearer ${token}` }
@@ -134,7 +134,7 @@ async function fetchNetWorthTrend(days = 30) {
 }
 
 async function fetchAccountHistory(accountId, days = 30) {
-  const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+  const token = localStorage.getItem('token') || localStorage.getItem('token');
   
   const response = await fetch(`${ACCOUNTS_API}/${accountId}/history?days=${days}`, {
     headers: { 'Authorization': `Bearer ${token}` }
@@ -145,7 +145,7 @@ async function fetchAccountHistory(accountId, days = 30) {
 }
 
 async function fetchTransferHistory(limit = 20) {
-  const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+  const token = localStorage.getItem('token') || localStorage.getItem('token');
   
   const response = await fetch(`${ACCOUNTS_API}/transfers/history?limit=${limit}`, {
     headers: { 'Authorization': `Bearer ${token}` }
@@ -156,7 +156,7 @@ async function fetchTransferHistory(limit = 20) {
 }
 
 async function fetchDashboardData() {
-  const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+  const token = localStorage.getItem('token') || localStorage.getItem('token');
   
   const response = await fetch(`${ACCOUNTS_API}/dashboard/summary`, {
     headers: { 'Authorization': `Bearer ${token}` }
diff --git a/public/accounts.html b/public/accounts.html
index 215edaef..27773238 100644
--- a/public/accounts.html
+++ b/public/accounts.html
@@ -139,7 +139,7 @@
       <p>&copy; 2024 ExpenseFlow. All rights reserved.</p>
     </div>
   </footer>
-
+<script src="protect.js"></script>
   <!-- Scripts -->
   <script src="auth-check.js"></script>
   <script src="auth.js"></script>
@@ -149,7 +149,7 @@
     // Initialize page
     document.addEventListener('DOMContentLoaded', () => {
       // Check authentication
-      const token = localStorage.getItem('token') || localStorage.getItem('authToken');
+      const token = localStorage.getItem('token') || localStorage.getItem('token');
       if (!token) {
         window.location.href = 'index.html';
         return;
@@ -175,7 +175,7 @@
     // Logout function
     function logout() {
       localStorage.removeItem('token');
-      localStorage.removeItem('authToken');
+      localStorage.removeItem('token');
       window.location.href = 'index.html';
     }
 
diff --git a/public/analytics.html b/public/analytics.html
index e774ad67..beca199a 100644
--- a/public/analytics.html
+++ b/public/analytics.html
@@ -251,7 +251,7 @@ <h4>Savings Opportunity</h4>
             </div>
         </section>
     </div>
-
+<script src="protect.js"></script>
     <script src="analytics.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/auth-check.js b/public/auth-check.js
deleted file mode 100644
index a7cfeaea..00000000
--- a/public/auth-check.js
+++ /dev/null
@@ -1,32 +0,0 @@
-(function () {
-  // ❌ DO NOT RUN ON LOGIN / SIGNUP
-  if (
-    location.pathname.includes('login') ||
-    location.pathname.includes('signup')
-  ) {
-    return;
-  }
-
-  const token = localStorage.getItem('token');
-  const userStr = localStorage.getItem('user');
-
-  if (!token || !userStr) {
-    window.location.href = '/login.html';
-    return;
-  }
-
-  try {
-    const user = JSON.parse(userStr);
-    const usernameEl = document.getElementById('navUsername');
-
-    if (usernameEl && user.name) {
-      usernameEl.textContent = user.name;
-    }
-  } catch (err) {
-    localStorage.clear();
-    window.location.href = '/login.html';
-  }
-})();
-
-
-
diff --git a/public/auth.js b/public/auth.js
index a92098cb..dc49e538 100644
--- a/public/auth.js
+++ b/public/auth.js
@@ -1,3 +1,17 @@
+(function () {
+  const token = localStorage.getItem("token");
+
+  // If no token, go to login
+  if (!token) {
+    window.location.replace("login.html");
+    return;
+  }
+
+  // If token exists, DO NOTHING
+})();
+
+
+
 function getPasswordErrors(password) {
     const errors = [];
 
@@ -59,7 +73,7 @@ if (loginForm) {
             localStorage.setItem("token", data.token);
             localStorage.setItem("user", JSON.stringify(data.user));
             // redirect to index
-            window.location.href = "/index.html";
+            window.location.href = "/";
         } catch (err) {
             console.error("Error during login:", err);
             alert("server error during login");
@@ -151,7 +165,7 @@ if (registerForm) {
             localStorage.setItem("token", data.token);
             localStorage.setItem("user", JSON.stringify(data.user));
 
-            window.location.href = "/index.html";
+            window.location.href = "/";
         } catch (err) {
             console.error(err);
             alert("Server error during registration");
@@ -162,6 +176,7 @@ if (registerForm) {
 // logout function
 function logout() {
     // Clear auth data
+    localStorage.clear();
     localStorage.removeItem('token');
     localStorage.removeItem('user');
 
diff --git a/public/budget.html b/public/budget.html
index 572dfc6c..da97af2e 100644
--- a/public/budget.html
+++ b/public/budget.html
@@ -277,7 +277,7 @@ <h3 id="budget-modal-title">Create Budget</h3>
             </form>
         </div>
     </div>
-
+<script src="protect.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="budget.js"></script>
 </body>
diff --git a/public/challenges.html b/public/challenges.html
index f51fb0cd..733d7667 100644
--- a/public/challenges.html
+++ b/public/challenges.html
@@ -1249,7 +1249,7 @@
 </style>
 
 <div class="cursor-trail-container" id="cursor-trail"></div>
-
+<script src="protect.js"></script>
 <script>
 (function() {
   // Hide default cursor
diff --git a/public/contact.html b/public/contact.html
index bdbc6214..ab8bced2 100644
--- a/public/contact.html
+++ b/public/contact.html
@@ -203,7 +203,7 @@
 </style>
 
 <div class="cursor-trail-container" id="cursor-trail"></div>
-
+<script src="protect.js"></script>
 <script>
 (function() {
   // Hide default cursor
diff --git a/public/dashboard-clean.html b/public/dashboard-clean.html
index 6e581c20..f192b3e2 100644
--- a/public/dashboard-clean.html
+++ b/public/dashboard-clean.html
@@ -416,7 +416,7 @@ <h3 id="modal-title">Add Transaction</h3>
             </form>
         </div>
     </div>
-
+<script src="protect.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="dashboard.js"></script>
 </body>
diff --git a/public/dashboard.html b/public/dashboard.html
index 19ff825d..4864e64e 100644
--- a/public/dashboard.html
+++ b/public/dashboard.html
@@ -57,8 +57,9 @@
 </style>
 
 <div class="cursor-trail-container" id="cursor-trail"></div>
-
+<script src="protect.js"></script>
 <script>
+  
 (function() {
   // Hide default cursor
   document.body.style.cursor = 'none';
@@ -1817,7 +1818,7 @@ <h3 data-i18n="install.title">Install ExpenseFlow</h3>
   // Load supported currencies on page load
   async function loadSupportedCurrencies() {
     try {
-      const token = localStorage.getItem('authToken');
+      const token = localStorage.getItem('token');
       if (!token) return;
 
       const response = await fetch('/api/currency/supported', {
@@ -1859,7 +1860,7 @@ <h3 data-i18n="install.title">Install ExpenseFlow</h3>
   // Load user's currency preference
   async function loadUserCurrencyPreference() {
     try {
-      const token = localStorage.getItem('authToken');
+      const token = localStorage.getItem('token');
       if (!token) return;
 
         const data = await response.json();
@@ -1906,7 +1907,7 @@ <h3 data-i18n="install.title">Install ExpenseFlow</h3>
   // Load exchange rate information
   async function loadExchangeRateInfo() {
     try {
-      const token = localStorage.getItem('authToken');
+      const token = localStorage.getItem('token');
       const response = await fetch(`/api/currency/rates?base=${currentUserCurrency}`, {
         headers: {
           'Authorization': `Bearer ${token}`
@@ -1957,7 +1958,7 @@ <h3 data-i18n="install.title">Install ExpenseFlow</h3>
   // Save currency preference
   async function saveCurrencyPreference() {
     try {
-      const token = localStorage.getItem('authToken');
+      const token = localStorage.getItem('token');
       const prefSelect = document.getElementById('preferred-currency');
       if (!prefSelect) return;
 
diff --git a/public/feedback.html b/public/feedback.html
index 8ad791f8..a32502d0 100644
--- a/public/feedback.html
+++ b/public/feedback.html
@@ -307,7 +307,7 @@ <h3>Share Your Experience</h3>
 <footer class="footer">
   © 2026 ExpenseFlow. All rights reserved.
 </footer>
-
+<script src="protect.js"></script>
 <script>
 let ratingValue = 0;
 const stars = document.querySelectorAll('.rating span');
diff --git a/public/finance-tips.html b/public/finance-tips.html
index d927da25..dd37ed35 100644
--- a/public/finance-tips.html
+++ b/public/finance-tips.html
@@ -518,7 +518,7 @@
 </style>
 
 <div class="cursor-trail-container" id="cursor-trail"></div>
-
+<script src="protect.js"></script>
 <script>
 (function() {
   // Hide default cursor
diff --git a/public/goals.html b/public/goals.html
index 752f6540..ad3e8bd0 100644
--- a/public/goals.html
+++ b/public/goals.html
@@ -298,7 +298,7 @@ <h3>Add Contribution</h3>
             </form>
         </div>
     </div>
-
+    <script src="protect.js"></script>
     <script src="goals.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 13f96182..70a60bbd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -174,110 +174,7 @@
 <!-- Cursor -->
 <div id="cursor-trail" class="cursor-trail-container"></div>
 
-  window.addEventListener('mousemove', e => {
-    coords.x = e.clientX;
-    coords.y = e.clientY;
-
-    // Calculate velocity for smooth movement
-    velocity.x = e.clientX - lastMouseX;
-    velocity.y = e.clientY - lastMouseY;
-    lastMouseX = e.clientX;
-    lastMouseY = e.clientY;
-
-    isMoving = true;
-
-    // Reset movement timeout
-    clearTimeout(window.movementTimeout);
-    window.movementTimeout = setTimeout(() => {
-      isMoving = false;
-    }, 50);
-  });
-
-  // Click effect
-  window.addEventListener('mousedown', () => {
-    trailCircles.forEach(circle => {
-      circle.element.classList.add('cursor-clicking');
-    });
-  });
-
-  window.addEventListener('mouseup', () => {
-    trailCircles.forEach(circle => {
-      circle.element.classList.remove('cursor-clicking');
-    });
-  });
-
-  // Hover effect for interactive elements
-  window.addEventListener('mouseover', e => {
-    const interactive = e.target.closest('a, button, input, select, textarea, [role="button"]');
-    trailCircles.forEach(circle => {
-      circle.element.classList.toggle('cursor-hovering', !!interactive);
-    });
-  });
-
-  // Smooth animation function
-  function animateTrail() {
-    let targetX = coords.x;
-    let targetY = coords.y;
-
-    // Add velocity offset to first circle for more natural feel
-    const velocityOffset = 0.5;
-    const offsetX = velocity.x * velocityOffset;
-    const offsetY = velocity.y * velocityOffset;
-
-    trailCircles.forEach((circle, index) => {
-      // First circle follows cursor exactly
-      if (index === 0) {
-        circle.x = targetX + offsetX;
-        circle.y = targetY + offsetY;
-      } 
-      // Other circles follow with smooth delay
-      else {
-        const prevCircle = trailCircles[index - 1];
-
-        // Smooth interpolation factor (changes based on movement speed)
-        const speed = Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y);
-        const lerpFactor = isMoving ? 
-          Math.min(0.3 + (speed * 0.01), 0.5) :  // Faster movement = tighter trail
-          0.1; // Slow movement = more spread
-
-        circle.x += (prevCircle.x - circle.x) * lerpFactor;
-        circle.y += (prevCircle.y - circle.y) * lerpFactor;
-      }
-
-      // Apply position with easing
-      circle.element.style.left = circle.x + 'px';
-      circle.element.style.top = circle.y + 'px';
-
-      // Dynamic opacity based on speed and position
-      if (index > 0) {
-        const speed = Math.sqrt(velocity.x * velocity.x + velocity.y * velocity.y);
-        const baseOpacity = 0.9 - (index / COUNT) * 0.8;
-        const speedMultiplier = Math.min(1 + speed * 0.02, 1.5);
-        circle.element.style.opacity = (baseOpacity * speedMultiplier).toString();
-      }
-
-      // Update target for next circle
-      targetX = circle.x;
-      targetY = circle.y;
-    });
-
-    requestAnimationFrame(animateTrail);
-  }
-
-  // Handle window resize
-  window.addEventListener('resize', () => {
-    // Adjust if cursor goes out of bounds
-    if (coords.x > window.innerWidth) coords.x = window.innerWidth;
-    if (coords.y > window.innerHeight) coords.y = window.innerHeight;
-  });
-
-  // Handle mouse leave/enter
-  window.addEventListener('mouseleave', () => {
-    trailCircles.forEach(circle => {
-      circle.element.style.opacity = '0';
-    });
-  });
-
+ 
 
 
   <!-- Header -->
@@ -1336,9 +1233,7 @@ <h4>Features</h4>
     });
   </script>
   <script>
-    // Currency Management Functions
-    let supportedCurrencies = [];
-    let currentUserCurrency = 'INR';
+   
 
     // Load supported currencies on page load
     async function loadSupportedCurrencies() {
@@ -1361,11 +1256,7 @@ <h4>Features</h4>
         console.error('Error loading currencies:', error);
       }
     }
-
-    // Populate currency dropdowns
-    function populateCurrencySelects() {
-      const currencySelect = document.getElementById('currency');
-      const preferredCurrencySelect = document.getElementById('preferred-currency');
+    </script>
 
   <style>
     @keyframes spin {
@@ -1624,6 +1515,7 @@ <h4>Support</h4>
     <p>© 2026 ExpenseFlow. All rights reserved.</p>
   </div>
 </footer>
+<script src="protect.js"></script>
 
 <script src="trackerscript.js"></script>
 <script src="analytics-dashboard.js"></script>
@@ -1641,23 +1533,6 @@ <h4>Support</h4>
   }
 });
 </script>
-
-
-    // Mobile Navigation Toggle
-    const navToggle = document.getElementById('navToggle');
-    const navMenu = document.getElementById('navMenu');
-
-      // Close modal when clicking outside
-      const modal = document.getElementById('recurring-modal');
-      if (modal) {
-        modal.addEventListener('click', (e) => {
-          if (e.target === modal) {
-            closeRecurringModal();
-          }
-        });
-      }
-    });
-  </script>
   <script>
     // Currency Management Functions
     let supportedCurrencies = [];
@@ -1675,7 +1550,15 @@ <h4>Support</h4>
             'Authorization': `Bearer ${token}`
           }
         });
-
+        const data = await response.json();
+        if (data.success) {
+          supportedCurrencies = data.data.currencies;
+          populateCurrencySelects();
+        }
+      } catch (error) {
+        console.error('Error loading currencies:', error);
+      }
+    }
     const closeBtn = document.getElementById('recurring-modal-close');
     if (closeBtn) {
       closeBtn.addEventListener('click', closeRecurringModal);
@@ -1695,17 +1578,14 @@ <h4>Support</h4>
         }
       });
     }
-  });
 </script>
 <script>
-  // Currency Management Functions
-  let supportedCurrencies = [];
-  let currentUserCurrency = 'INR';
+
 
   // Load supported currencies on page load
   async function loadSupportedCurrencies() {
     try {
-      const token = localStorage.getItem('authToken');
+      const token = localStorage.getItem('token');
       if (!token) return;
 
       const response = await fetch('/api/currency/supported', {
@@ -1747,7 +1627,7 @@ <h4>Support</h4>
   // Load user's currency preference
   async function loadUserCurrencyPreference() {
     try {
-      const token = localStorage.getItem('authToken');
+      const token = localStorage.getItem('token');
       if (!token) return;
 
         const data = await response.json();
@@ -1794,7 +1674,7 @@ <h4>Support</h4>
   // Load exchange rate information
   async function loadExchangeRateInfo() {
     try {
-      const token = localStorage.getItem('authToken');
+      const token = localStorage.getItem('token');
       const response = await fetch(`/api/currency/rates?base=${currentUserCurrency}`, {
         headers: {
           'Authorization': `Bearer ${token}`
@@ -1845,7 +1725,7 @@ <h4>Support</h4>
   // Save currency preference
   async function saveCurrencyPreference() {
     try {
-      const token = localStorage.getItem('authToken');
+      const token = localStorage.getItem('token');
       const prefSelect = document.getElementById('preferred-currency');
       if (!prefSelect) return;
 
@@ -1910,7 +1790,6 @@ <h3>Install ExpenseFlow</h3>
     </div>
   </div>
   <script src="auth-check.js"></script>
-  <script src="auth.js"></script>
   <script src="trackerscript.js"></script>
   <script src="analytics-dashboard.js"></script>
   <script src="workspace-feature.js"></script>
diff --git a/public/investment-portfolio.js b/public/investment-portfolio.js
index c53d1985..c98f5b17 100644
--- a/public/investment-portfolio.js
+++ b/public/investment-portfolio.js
@@ -48,7 +48,7 @@ async function loadInvestments() {
     `;
 
     try {
-        const token = localStorage.getItem('authToken');
+        const token = localStorage.getItem('token');
         if (!token) return;
 
         const response = await fetch(INVESTMENT_API_URL, {
@@ -79,7 +79,7 @@ async function handleAddInvestment(e) {
     const buyPrice = document.getElementById('inv-buy-price').value;
 
     try {
-        const token = localStorage.getItem('authToken');
+        const token = localStorage.getItem('token');
         const response = await fetch(INVESTMENT_API_URL, {
             method: 'POST',
             headers: {
@@ -116,7 +116,7 @@ async function removeInvestment(id) {
     if (!confirm('Are you sure you want to remove this holding?')) return;
 
     try {
-        const token = localStorage.getItem('authToken');
+        const token = localStorage.getItem('token');
         const response = await fetch(`${INVESTMENT_API_URL}/${id}`, {
             method: 'DELETE',
             headers: {
diff --git a/public/login.html b/public/login.html
index 6f3e0877..b72f6773 100644
--- a/public/login.html
+++ b/public/login.html
@@ -584,7 +584,8 @@ <h4>Company</h4>
             </div>
         </div>
     </footer>
-    <script src="auth.js"></script>
+    <script src="login.js"></script>
+
 </body>
 
 </html>
diff --git a/public/login.js b/public/login.js
new file mode 100644
index 00000000..38315f8a
--- /dev/null
+++ b/public/login.js
@@ -0,0 +1,42 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const form = document.getElementById("loginForm");
+
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    const email = document.getElementById("loginEmail").value.trim();
+    const password = document.getElementById("loginPassword").value.trim();
+
+    if (!email || !password) {
+      alert("Please fill all fields");
+      return;
+    }
+
+    try {
+      const res = await fetch("http://localhost:3000/api/auth/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ email, password })
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        alert(data.message || "Login failed");
+        return;
+      }
+
+      // ✅ Save auth data
+      localStorage.setItem("token", data.token);
+      localStorage.setItem("user", JSON.stringify(data.user));
+
+      // ✅ Redirect to dashboard
+      window.location.href = "/";
+    } catch (err) {
+      console.error(err);
+      alert("Server error. Try again later.");
+    }
+  });
+});
diff --git a/public/performance.html b/public/performance.html
index 60adda55..1744071f 100644
--- a/public/performance.html
+++ b/public/performance.html
@@ -169,7 +169,7 @@ <h2>📋 Resource Analysis</h2>
             </div>
         </section>
     </div>
-
+    <script src="protect.js"></script>
     <!-- Performance JavaScript -->
     <script>
         // Performance monitoring
diff --git a/public/protect.js b/public/protect.js
new file mode 100644
index 00000000..9667ef07
--- /dev/null
+++ b/public/protect.js
@@ -0,0 +1,8 @@
+// protect.js to restrict access to authenticated users only for frontend pages
+
+(function(){
+    const token=localStorage.getItem('authToken');
+    if(!token){
+        window.location.href='/login.html';
+    }
+})();
\ No newline at end of file
diff --git a/public/pwa-features.html b/public/pwa-features.html
index b95b6890..24ef6996 100644
--- a/public/pwa-features.html
+++ b/public/pwa-features.html
@@ -265,7 +265,7 @@ <h2>⚡ PWA Actions</h2>
             </div>
         </div>
     </div>
-
+    <script src="protect.js"></script>
     <!-- PWA JavaScript -->
     <script src="pwa-features.js"></script>
     <script>
diff --git a/public/reports-performance.html b/public/reports-performance.html
index 59ee541c..53b004c5 100644
--- a/public/reports-performance.html
+++ b/public/reports-performance.html
@@ -86,7 +86,7 @@ <h3>Custom Report</h3>
             </div>
         </div>
     </div>
-
+    <script src="protect.js"></script>
     <!-- Critical JS -->
     <script>
         // Performance monitoring
diff --git a/public/reports.html b/public/reports.html
index d6789355..a28e8c4d 100644
--- a/public/reports.html
+++ b/public/reports.html
@@ -140,7 +140,7 @@ <h3>Custom Report</h3>
             <div class="loading-skeleton" style="height:200px;border-radius:12px;margin:2rem 0"></div>
         </div>
     </div>
-
+    <script src="protect.js"></script>
     <!-- Modals - Lazy loaded -->
     <div id="modals-placeholder"></div>
 
diff --git a/public/settings.html b/public/settings.html
index 4b6560ce..110a84f0 100644
--- a/public/settings.html
+++ b/public/settings.html
@@ -586,7 +586,7 @@ <h4>Delete Account</h4>
             </div>
         </main>
     </div>
-
+    <script src="protect.js"></script>
     <script src="settings.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/sw.js b/public/sw.js
index 96259fdd..71ff4a55 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -1,6 +1,5 @@
 const CACHE_NAME = 'expenseflow-v1.0.0';
 const urlsToCache = [
-  '/expensetracker.html',
   '/expensetracker.css',
   '/trackerscript.js',
   '/manifest.json',
@@ -47,49 +46,48 @@ self.addEventListener('activate', (event) => {
 
 // Fetch event - serve from cache when offline
 self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url);
+
+  // 🚫 Never cache API requests
+  if (url.pathname.startsWith('/api')) {
+    event.respondWith(fetch(event.request));
+    return;
+  }
+
+  // 🚫 Never cache HTML documents (auth pages)
+  if (event.request.destination === 'document') {
+    event.respondWith(fetch(event.request));
+    return;
+  }
+
+  // ✅ Cache-first strategy for static assets only
   event.respondWith(
-    caches.match(event.request)
-      .then((response) => {
-        // Return cached version or fetch from network
-        if (response) {
-          console.log('Serving from cache:', event.request.url);
-          return response;
+    caches.match(event.request).then((cachedResponse) => {
+      if (cachedResponse) {
+        return cachedResponse;
+      }
+
+      return fetch(event.request).then((networkResponse) => {
+        if (
+          !networkResponse ||
+          networkResponse.status !== 200 ||
+          networkResponse.type !== 'basic'
+        ) {
+          return networkResponse;
         }
-        
-        // Clone the request because it's a stream that can only be consumed once
-        const fetchRequest = event.request.clone();
-        
-        return fetch(fetchRequest).then((response) => {
-          // Check if we received a valid response
-          if (!response || response.status !== 200 || response.type !== 'basic') {
-            return response;
-          }
-          
-          // Clone the response because it's a stream that can only be consumed once
-          const responseToCache = response.clone();
-          
-          // Cache the fetched resource for future use
-          caches.open(CACHE_NAME)
-            .then((cache) => {
-              cache.put(event.request, responseToCache);
-            });
-          
-          return response;
-        }).catch((error) => {
-          console.error('Fetch failed:', error);
-          
-          // Return a custom offline page or response for HTML requests
-          if (event.request.destination === 'document') {
-            return caches.match('/expensetracker.html');
-          }
-          
-          // For other resources, you might want to return a default response
-          throw error;
+
+        const responseToCache = networkResponse.clone();
+        caches.open(CACHE_NAME).then((cache) => {
+          cache.put(event.request, responseToCache);
         });
-      })
+
+        return networkResponse;
+      });
+    })
   );
 });
 
+
 // Background sync for offline data synchronization
 self.addEventListener('sync', (event) => {
   if (event.tag === 'background-sync') {
diff --git a/public/tax-reports.html b/public/tax-reports.html
index 2c1f2f44..617d38d9 100644
--- a/public/tax-reports.html
+++ b/public/tax-reports.html
@@ -1086,7 +1086,7 @@ <h2>Custom Deductions</h2>
       </div>
     </div>
   </div>
-
+  <script src="protect.js"></script>
   <script src="tax-reports.js"></script>
   <script>
     // Tab switching
diff --git a/public/tax-reports.js b/public/tax-reports.js
index 8b691535..4a327374 100644
--- a/public/tax-reports.js
+++ b/public/tax-reports.js
@@ -1,3 +1,7 @@
+if (!localStorage.getItem('token')) {
+  window.location.replace('/login.html');
+}
+
 /**
  * Tax Calculator & Reports Client-Side Manager
  * Handles tax calculations, report generation, and PDF exports
@@ -66,10 +70,10 @@ class TaxReportsManager {
    */
   async request(url, options = {}) {
     const token = this.getToken();
-    if (!token) {
-      window.location.href = '/login.html';
-      return;
-    }
+  if (!token) {
+  window.location.replace('/login.html');
+  throw new Error('Not authenticated');
+}
 
     const config = {
       ...options,
diff --git a/public/terms_service.html b/public/terms_service.html
index 23913d80..d9e18329 100644
--- a/public/terms_service.html
+++ b/public/terms_service.html
@@ -819,6 +819,6 @@ <h4>Resources</h4>
     </div>
   </div>
 </footer>
-
+<script src="protect.js"></script>
 </body>
 </html>
diff --git a/public/trackerscript.js b/public/trackerscript.js
index e94fa7bc..d4bacfdd 100644
--- a/public/trackerscript.js
+++ b/public/trackerscript.js
@@ -1,3 +1,7 @@
+if (!localStorage.getItem('token')) {
+  window.location.replace('/login.html');
+}
+
 document.addEventListener("DOMContentLoaded", () => {
 
   /* =====================
@@ -107,29 +111,41 @@ document.addEventListener("DOMContentLoaded", () => {
   /* =====================
      API FUNCTIONS
   ====================== */
-  async function fetchExpenses() {
-    try {
-      const response = await fetch(`${API_BASE_URL}/expenses`, {
-        headers: getAuthHeaders()
-      });
-      if (!response.ok) throw new Error('Failed to fetch expenses');
-      const data = await response.json();
-      return data.data.map(expense => ({
-        id: expense._id,
-        text: expense.description,
-        amount: expense.type === 'expense' ? -(expense.displayAmount || expense.amount) : (expense.displayAmount || expense.amount),
-        category: expense.category,
-        type: expense.type,
-        date: expense.date,
-        displayCurrency: expense.displayCurrency || 'INR',
-        approvalStatus: expense.approvalStatus || 'approved' // Default to approved for backward compatibility
-      }));
-    } catch (error) {
-      console.error('Error fetching expenses:', error);
-      // Fallback to localStorage
-      return JSON.parse(localStorage.getItem('transactions') || '[]');
+ async function fetchExpenses() {
+  try {
+    const response = await fetch(`${API_BASE_URL}/expenses`, {
+      headers: getAuthHeaders()
+    });
+
+    if (response.status === 401) {
+      localStorage.clear();
+      window.location.replace('/login.html');
+      return [];
     }
+
+    if (!response.ok) {
+      throw new Error('Failed to fetch expenses');
+    }
+
+    const data = await response.json();
+    return data.data.map(expense => ({
+      id: expense._id,
+      text: expense.description,
+      amount: expense.type === 'expense'
+        ? -(expense.displayAmount || expense.amount)
+        : (expense.displayAmount || expense.amount),
+      category: expense.category,
+      type: expense.type,
+      date: expense.date,
+      displayCurrency: expense.displayCurrency || 'INR',
+      approvalStatus: expense.approvalStatus || 'approved'
+    }));
+  } catch (error) {
+    console.error('Network error, loading offline data:', error);
+    return JSON.parse(localStorage.getItem('transactions') || '[]');
   }
+}
+
 
   async function saveExpense(expense) {
     try {
diff --git a/public/transactions.html b/public/transactions.html
index 62c6c573..a0a85209 100644
--- a/public/transactions.html
+++ b/public/transactions.html
@@ -306,7 +306,7 @@ <h3>Bulk Categorize</h3>
             </div>
         </div>
     </div>
-
+    <script src="protect.js"></script>
     <script src="transactions.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/transactions.js b/public/transactions.js
index e577bcbc..4d1f29e8 100644
--- a/public/transactions.js
+++ b/public/transactions.js
@@ -1,3 +1,7 @@
+if (!localStorage.getItem('token')) {
+    window.location.replace('/login.html');
+}
+
 // Transactions Page JavaScript
 class TransactionsManager {
     constructor() {
@@ -77,29 +81,36 @@ class TransactionsManager {
     }
 
     async loadTransactions() {
-        try {
-            // Try to load from API first
-            const response = await fetch('/api/expenses', {
-                headers: {
-                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
-                    'Content-Type': 'application/json'
-                }
-            });
-            
-            if (response.ok) {
-                this.transactions = await response.json();
-            } else {
-                throw new Error('API not available');
+    try {
+        const response = await fetch('/api/expenses', {
+            headers: {
+                'Authorization': `Bearer ${localStorage.getItem('token')}`,
+                'Content-Type': 'application/json'
             }
-        } catch (error) {
-            console.log('Using mock data for demo');
-            this.transactions = this.generateMockTransactions();
+        });
+
+        if (response.status === 401) {
+            // Token invalid or missing → logout
+            localStorage.clear();
+            window.location.replace('/login.html');
+            return;
         }
-        
-        this.applyFilters();
-        this.hideLoading();
+
+        if (!response.ok) {
+            throw new Error('API error');
+        }
+
+        this.transactions = await response.json();
+    } catch (error) {
+        console.error('Failed to load transactions:', error);
+        this.showNotification('Unable to load transactions', 'error');
     }
 
+    this.applyFilters();
+    this.hideLoading();
+}
+
+
     hideLoading() {
         document.getElementById('loadingState').style.display = 'none';
     }
diff --git a/public/workspace-feature.js b/public/workspace-feature.js
index 4176cfcd..9c20fcd3 100644
--- a/public/workspace-feature.js
+++ b/public/workspace-feature.js
@@ -1,3 +1,7 @@
+// Helper to get auth token
+function getAuthToken() {
+  return localStorage.getItem('token');
+}
 // Workspace and Settings Management
 let currentWorkspace = null;
 let currentUser = null;
@@ -27,7 +31,7 @@ function initializeWorkspaceFeatures() {
 
 async function loadCurrentUser() {
   try {
-    const token = localStorage.getItem('authToken');
+    const token = getAuthToken();
     if (!token) return;
 
     const response = await fetch('/api/auth/me', {
@@ -64,7 +68,7 @@ function updateUserDisplay() {
 
 async function loadWorkspaceData() {
   try {
-    const token = localStorage.getItem('authToken');
+    const token = getAuthToken();
     if (!token) return;
 
     // Load current workspace
@@ -106,7 +110,7 @@ function updateWorkspaceDisplay() {
 
 async function loadMembers() {
   try {
-    const token = localStorage.getItem('authToken');
+    const token = getAuthToken();
     if (!token || !currentWorkspace) return;
 
     const response = await fetch(`/api/workspaces/${currentWorkspace._id}/members`, {
@@ -183,7 +187,7 @@ function canManageMember(member) {
 
 async function changeMemberRole(memberId, newRole) {
   try {
-    const token = localStorage.getItem('authToken');
+    const token = getAuthToken();
     if (!token || !currentWorkspace) return;
 
     const response = await fetch(`/api/workspaces/${currentWorkspace._id}/members/${memberId}`, {
@@ -214,7 +218,7 @@ async function removeMember(memberId) {
   }
 
   try {
-    const token = localStorage.getItem('authToken');
+    const token = getAuthToken();
     if (!token || !currentWorkspace) return;
 
     const response = await fetch(`/api/workspaces/${currentWorkspace._id}/members/${memberId}`, {
@@ -276,7 +280,7 @@ function openInviteModal() {
 // Approval Settings Functions
 async function loadApprovalSettings() {
   try {
-    const token = localStorage.getItem('authToken');
+    const token = getAuthToken();
     if (!token || !currentWorkspace) return;
 
     const response = await fetch(`/api/workspaces/${currentWorkspace._id}/settings`, {
@@ -299,7 +303,7 @@ async function loadApprovalSettings() {
 
 async function saveApprovalSettings() {
   try {
-    const token = localStorage.getItem('authToken');
+    const token = localStorage.getItem('token');
     if (!token || !currentWorkspace) return;
 
     const approvalRequired = document.getElementById('approval-required');
@@ -332,7 +336,7 @@ async function saveApprovalSettings() {
 
 async function loadPendingApprovals() {
   try {
-    const token = localStorage.getItem('authToken');
+    const token = localStorage.getItem('token');
     if (!token) return;
 
     const response = await fetch('/api/approvals/pending', {
@@ -352,7 +356,7 @@ async function loadPendingApprovals() {
 
 async function loadApprovalHistory() {
   try {
-    const token = localStorage.getItem('authToken');
+    const token = localStorage.getItem('token');
     if (!token) return;
 
     const response = await fetch('/api/approvals/history', {
@@ -423,7 +427,7 @@ async function rejectExpense(approvalId) {
 
 async function processApproval(approvalId, status) {
   try {
-    const token = localStorage.getItem('authToken');
+    const token = localStorage.getItem('token');
     if (!token) return;
 
     const response = await fetch(`/api/approvals/${approvalId}`, {
@@ -456,7 +460,7 @@ async function processApproval(approvalId, status) {
 // Profile Functions
 async function updateProfile() {
   try {
-    const token = localStorage.getItem('authToken');
+    const token = localStorage.getItem('token');
     if (!token) return;
 
     const nameInput = document.getElementById('profile-name');
diff --git a/realtime-sync.js b/realtime-sync.js
index 7e29d6d1..84b8ac8f 100644
--- a/realtime-sync.js
+++ b/realtime-sync.js
@@ -1,7 +1,7 @@
 // Real-time synchronization with Socket.IO
 var API_BASE_URL = '/api';
 let socket = null;
-var authToken = localStorage.getItem('authToken');
+var authToken = localStorage.getItem('token');
 var currentUser = JSON.parse(localStorage.getItem('currentUser') || 'null');
 let offlineQueue = JSON.parse(localStorage.getItem('offlineQueue') || '[]');
 let deviceId = localStorage.getItem('deviceId') || generateDeviceId();
diff --git a/receipt-upload.js b/receipt-upload.js
index e7e21003..c95eb887 100644
--- a/receipt-upload.js
+++ b/receipt-upload.js
@@ -2,7 +2,7 @@
 class ReceiptManager {
   constructor() {
     this.apiUrl = '/api';
-    this.authToken = localStorage.getItem('authToken');
+    this.authToken = localStorage.getItem('token');
     this.initializeUploadArea();
   }
 
diff --git a/server.js b/server.js
index d2eea086..6da4437b 100644
--- a/server.js
+++ b/server.js
@@ -9,6 +9,7 @@ const CronJobs = require('./services/cronJobs');
 const { generalLimiter } = require('./middleware/rateLimiter');
 const { sanitizeInput, mongoSanitizeMiddleware } = require('./middleware/sanitization');
 const securityMonitor = require('./services/securityMonitor');
+const protect=require("./middleware/authMiddleware");
 require('dotenv').config();
 
 const authRoutes = require('./routes/auth');
@@ -35,10 +36,30 @@ app.use(helmet({
     directives: {
       defaultSrc: ["'self'"],
       styleSrc: ["'self'", "'unsafe-inline'", "https://cdnjs.cloudflare.com", "https://fonts.googleapis.com"],
-      scriptSrc: ["'self'", "'unsafe-inline'"],
+      scriptSrc: [
+  "'self'",
+  "'unsafe-inline'",
+  "https://cdn.socket.io",
+  "https://cdn.jsdelivr.net"
+],
       scriptSrcAttr: ["'unsafe-inline'"],
       imgSrc: ["'self'", "data:", "https:", "https://res.cloudinary.com"],
-      connectSrc: ["'self'", "https://fonts.googleapis.com", "https://fonts.gstatic.com", "https://api.exchangerate-api.com", "https://api.frankfurter.app", "https://res.cloudinary.com"],
+      connectSrc: [
+  "'self'",
+  "http://localhost:3000",
+  "ws://localhost:3000",
+
+  // APIs
+  "https://api.exchangerate-api.com",
+  "https://api.frankfurter.app",
+
+  // Media
+  "https://res.cloudinary.com",
+
+  // Source maps + CDNs
+  "https://cdn.socket.io",
+  "https://cdn.jsdelivr.net"
+],
       fontSrc: ["'self'", "https://cdnjs.cloudflare.com", "https://fonts.gstatic.com"],
       objectSrc: ["'none'"],
       mediaSrc: ["'self'"],
@@ -151,21 +172,22 @@ io.on('connection', (socket) => {
 
 // Routes
 app.use('/api/auth', require('./middleware/rateLimiter').authLimiter, authRoutes);
-app.use('/api/expenses', require('./middleware/rateLimiter').expenseLimiter, expenseRoutes);
-app.use('/api/sync', syncRoutes);
-app.use('/api/notifications', require('./routes/notifications'));
-app.use('/api/receipts', require('./middleware/rateLimiter').uploadLimiter, require('./routes/receipts'));
-app.use('/api/budgets', require('./routes/budgets'));
-app.use('/api/goals', require('./routes/goals'));
-app.use('/api/analytics', require('./routes/analytics'));
 app.use('/api/currency', require('./routes/currency'));
-app.use('/api/groups', require('./routes/groups'));
-app.use('/api/splits', require('./routes/splits'));
-app.use('/api/workspaces', require('./routes/workspaces'));
-app.use('/api/tax', require('./routes/tax'));
-app.use('/api/bills', require('./routes/bills'));
-app.use('/api/calendar', require('./routes/calendar'));
-app.use('/api/reminders', require('./routes/reminders'));
+
+app.use('/api/expenses', require('./middleware/rateLimiter').expenseLimiter, protect, expenseRoutes);
+app.use('/api/sync', protect, syncRoutes);
+app.use('/api/notifications', protect, require('./routes/notifications'));
+app.use('/api/receipts', require('./middleware/rateLimiter').uploadLimiter, protect, require('./routes/receipts'));
+app.use('/api/budgets', protect, require('./routes/budgets'));
+app.use('/api/goals', protect, require('./routes/goals'));
+app.use('/api/analytics', protect, require('./routes/analytics'));
+app.use('/api/groups', protect, require('./routes/groups'));
+app.use('/api/splits', protect, require('./routes/splits'));
+app.use('/api/workspaces', protect, require('./routes/workspaces'));
+app.use('/api/tax', protect, require('./routes/tax'));
+app.use('/api/bills', protect, require('./routes/bills'));
+app.use('/api/calendar', protect, require('./routes/calendar'));
+app.use('/api/reminders', protect, require('./routes/reminders'));
 
 // Root route to serve the UI
 app.get('/', (req, res) => {
diff --git a/workspace-feature.js b/workspace-feature.js
index f02ec062..eab53f6e 100644
--- a/workspace-feature.js
+++ b/workspace-feature.js
@@ -8,7 +8,7 @@ let isInitialized = false;
 
 // Enhanced API Functions with better error handling
 async function getAuthHeaders() {
-    const token = localStorage.getItem('authToken');
+    const token = localStorage.getItem('token');
     if (!token) {
         throw new Error('No authentication token found. Please log in again.');
     }
@@ -44,7 +44,7 @@ async function fetchWorkspaces(forceRefresh = false) {
         
         if (response.status === 401) {
             // Token expired, redirect to login
-            localStorage.removeItem('authToken');
+            localStorage.removeItem('token');
             window.location.href = 'login.html';
             return [];
         }