diff --git a/public/blog.html b/public/blog.html
index 5cd93f78..cef3d293 100644
--- a/public/blog.html
+++ b/public/blog.html
@@ -459,6 +459,35 @@
 /* Light mode button color */
 html[data-theme="light"] .theme-toggle{
     color:#2563eb;
+}/* Scroll To Top Button */
+
+#scrollTopBtn{
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background: linear-gradient(135deg,#00e6a8,#64ffda);
+    color: #000;
+    border: none;
+    padding: 14px 16px;
+    border-radius: 50%;
+    font-size: 18px;
+    cursor: pointer;
+    display: none;
+    z-index: 1000;
+    box-shadow: 0 0 15px rgba(100,255,218,0.7);
+    transition: all 0.3s ease;
+}
+
+#scrollTopBtn:hover{
+    transform: translateY(-4px) scale(1.1);
+    box-shadow: 0 0 25px rgba(100,255,218,1);
+}
+
+/* Dark Mode */
+
+body.dark-mode #scrollTopBtn{
+    background: linear-gradient(135deg,#64ffda,#00bfa5);
+    color:white;
 }
 </style>
 <body>
@@ -567,6 +596,10 @@ <h4>Follow Us</h4>
         <p>&copy; 2026 ExpenseFlow. All rights reserved.</p>
     </div>
 </footer>
+<!-- Scroll To Top Button -->
+<button id="scrollTopBtn" title="Go to top">
+    <i class="fas fa-arrow-up"></i>
+</button>
 <script>
     const blogs = [
     {title:"Mastering Monthly Budgeting",date:"Feb 26, 2026",author:"Finance Team",
@@ -635,6 +668,21 @@ <h3>${blog.title}</h3>
         document.documentElement.setAttribute("data-theme","light");
         localStorage.setItem("theme","light");
     }
+});const scrollBtn = document.getElementById("scrollTopBtn");
+
+window.onscroll = function () {
+    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
+        scrollBtn.style.display = "block";
+    } else {
+        scrollBtn.style.display = "none";
+    }
+};
+
+scrollBtn.addEventListener("click", function () {
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    });
 });
 </script>
 <script src="blog.js"></script>
diff --git a/public/faq.css b/public/faq.css
index c92ee082..7d83bfeb 100644
--- a/public/faq.css
+++ b/public/faq.css
@@ -681,4 +681,33 @@ html[data-theme="light"] .category-btn:hover{
 /* FAQ hover */
 html[data-theme="light"] .faq-item:hover{
     background:#f9fafb;
+}/* Scroll To Top Button */
+
+#scrollTopBtn{
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background: linear-gradient(135deg,#00e6a8,#64ffda);
+    color: #000;
+    border: none;
+    padding: 14px 16px;
+    border-radius: 50%;
+    font-size: 18px;
+    cursor: pointer;
+    display: none;
+    z-index: 1000;
+    box-shadow: 0 0 15px rgba(100,255,218,0.7);
+    transition: all 0.3s ease;
+}
+
+#scrollTopBtn:hover{
+    transform: translateY(-4px) scale(1.1);
+    box-shadow: 0 0 25px rgba(100,255,218,1);
+}
+
+/* Dark Mode */
+
+body.dark-mode #scrollTopBtn{
+    background: linear-gradient(135deg,#64ffda,#00bfa5);
+    color:white;
 }
\ No newline at end of file
diff --git a/public/faq.html b/public/faq.html
index ede67564..91e02ad2 100644
--- a/public/faq.html
+++ b/public/faq.html
@@ -568,7 +568,10 @@ <h4>Follow Us</h4>
             <p>&copy; 2026 ExpenseFlow. All rights reserved.</p>
         </div>
     </footer>
-
+<!-- Scroll To Top Button -->
+<button id="scrollTopBtn" title="Go to top">
+    <i class="fas fa-arrow-up"></i>
+</button>
     <script src="theme.js"></script>
     <script src="faq.js"></script>
 </body>
diff --git a/public/faq.js b/public/faq.js
index 51f6916d..7221132b 100644
--- a/public/faq.js
+++ b/public/faq.js
@@ -237,4 +237,19 @@ const savedTheme = localStorage.getItem("theme");
 
 if(savedTheme){
 document.documentElement.setAttribute("data-theme",savedTheme);
-}
\ No newline at end of file
+}const scrollBtn = document.getElementById("scrollTopBtn");
+
+window.onscroll = function () {
+    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
+        scrollBtn.style.display = "block";
+    } else {
+        scrollBtn.style.display = "none";
+    }
+};
+
+scrollBtn.addEventListener("click", function () {
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    });
+});
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index ccb4bd6e..6ed0f2af 100644
--- a/public/index.html
+++ b/public/index.html
@@ -467,6 +467,60 @@
     opacity: 1;
     transform: translateY(0);
   }
+}/* Toggle Button */
+
+.theme-toggle {
+  background: linear-gradient(135deg,#6366f1,#64ffda);
+  border: none;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  color: white;
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
+  transition: all 0.3s ease;
+}
+
+.theme-toggle:hover{
+  transform: scale(1.1);
+}
+
+/* LIGHT MODE */
+
+body.light-mode{
+  background:#f5f7fb;
+  color:#222;
+}
+
+body.light-mode .navbar{
+  background:white;
+}
+
+body.light-mode .feature-card{
+  background:white;
+  color:#222;
+}
+
+body.light-mode .balance-card{
+  background:white;
+}
+
+body.light-mode .history-section{
+  background:white;
+}
+
+/* inputs */
+
+body.light-mode input,
+body.light-mode select{
+  background:white;
+  color:#222;
+  border:1px solid #ddd;
 }
   </style>
   <!-- Clerk Authentication SDK -->
@@ -496,6 +550,7 @@
           <a href="analytics.html" class="nav-link">Analytics</a>
           <a href="goals.html" class="nav-link">Goals</a>
           <a href="networth.html" class="nav-link">Net Worth</a>
+          <a href="receipt.html" class="nav-link">Receipt</a>
           <div class="nav-item dropdown">
             <a href="#" class="nav-link dropdown-toggle">More</a>
             <div class="dropdown-menu">
@@ -505,7 +560,16 @@
             </div>
           </div>
         </div>
+        <div class="user-profile">
+
+  <button id="themeToggle" class="theme-toggle">
+    <i class="fas fa-moon"></i>
+  </button>
 
+  <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=50&h=50&fit=crop&crop=face"
+  alt="User" class="profile-img">
+
+</div>
         <div class="nav-toggle" id="nav-toggle">
           <span class="bar"></span>
           <span class="bar"></span>
@@ -522,6 +586,7 @@
             <i class="fas fa-coins"></i>
             <span id="current-currency">INR</span>
           </button>
+          
           <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=50&h=50&fit=crop&crop=face"
             alt="User" class="profile-img">
           <span class="username" id="navUsername"></span>
@@ -1792,6 +1857,33 @@ <h4>Est. Monthly</h4>
       behavior: "smooth"
     });
   });
+</script>
+<script>
+
+const toggleBtn = document.getElementById("themeToggle");
+const body = document.body;
+
+// load saved theme
+if(localStorage.getItem("theme") === "light"){
+    body.classList.add("light-mode");
+    toggleBtn.innerHTML = '<i class="fas fa-sun"></i>';
+}
+
+toggleBtn.addEventListener("click", () => {
+
+    body.classList.toggle("light-mode");
+
+    if(body.classList.contains("light-mode")){
+        localStorage.setItem("theme","light");
+        toggleBtn.innerHTML = '<i class="fas fa-sun"></i>';
+    }
+    else{
+        localStorage.setItem("theme","dark");
+        toggleBtn.innerHTML = '<i class="fas fa-moon"></i>';
+    }
+
+});
+
 </script>
 </body>
 </html>
diff --git a/public/receipt.css b/public/receipt.css
new file mode 100644
index 00000000..dabe78ef
--- /dev/null
+++ b/public/receipt.css
@@ -0,0 +1,474 @@
+/* RESET */
+
+*{
+margin:0;
+padding:0;
+box-sizing:border-box;
+font-family:Segoe UI, Arial, sans-serif;
+transition:background 0.3s,color 0.3s;
+}
+
+/* THEME VARIABLES */
+
+:root{
+
+--bg:#ffffff;
+--text:#0f172a;
+--card:#f1f5f9;
+--accent:#00c9a7;
+--border:#e2e8f0;
+
+}
+
+body.dark{
+
+--bg:#0f172a;
+--text:#ffffff;
+--card:#1e293b;
+--accent:#00ffd5;
+--border:#334155;
+
+}
+
+/* BODY */
+
+body{
+
+background:var(--bg);
+color:var(--text);
+line-height:1.6;
+
+}
+
+/* NAVBAR */
+
+.navbar{
+
+display:flex;
+justify-content:space-between;
+align-items:center;
+
+padding:15px 40px;
+
+background:var(--card);
+
+border-bottom:1px solid var(--border);
+
+}
+
+.logo{
+
+font-size:20px;
+font-weight:bold;
+
+}
+
+.navbar ul{
+
+display:flex;
+gap:20px;
+list-style:none;
+
+}
+
+.navbar a{
+
+text-decoration:none;
+color:var(--text);
+font-weight:500;
+
+}
+
+.navbar a:hover{
+
+color:var(--accent);
+
+}
+
+/* THEME TOGGLE */
+
+#themeToggle{
+
+background:none;
+border:none;
+
+font-size:20px;
+
+cursor:pointer;
+
+color:var(--text);
+
+}
+
+#themeToggle:hover{
+
+transform:rotate(20deg);
+
+}
+
+/* SCANNER SECTION */
+
+.scanner{
+
+max-width:900px;
+
+margin:auto;
+
+padding:40px 20px;
+
+text-align:center;
+
+}
+
+.scanner h1{
+
+font-size:32px;
+margin-bottom:10px;
+
+}
+
+.scanner p{
+
+margin-bottom:30px;
+color:#64748b;
+
+}
+
+/* UPLOAD AREA */
+
+.upload-area{
+
+border:2px dashed var(--accent);
+
+padding:40px;
+
+border-radius:12px;
+
+cursor:pointer;
+
+}
+
+.upload-area:hover{
+
+background:rgba(0,255,200,0.08);
+
+}
+
+/* FILE INPUT */
+
+#fileInput{
+
+margin-top:10px;
+
+}
+
+/* PREVIEW IMAGE */
+
+#preview{
+
+max-width:300px;
+
+margin-top:20px;
+
+border-radius:10px;
+
+box-shadow:0 0 15px rgba(0,255,200,0.4);
+
+display:none;
+
+}
+
+/* BUTTON */
+
+button{
+
+padding:10px 18px;
+
+border:none;
+border-radius:8px;
+
+background:linear-gradient(135deg,var(--accent),#00d9f5);
+
+color:white;
+
+cursor:pointer;
+
+margin-top:15px;
+
+font-weight:bold;
+
+}
+
+button:hover{
+
+transform:scale(1.05);
+
+box-shadow:0 0 10px var(--accent);
+
+}
+
+/* RESULT CARD */
+
+.result{
+
+margin-top:30px;
+
+background:var(--card);
+
+padding:20px;
+
+border-radius:12px;
+
+box-shadow:0 0 10px rgba(0,0,0,0.2);
+
+}
+
+.result p{
+
+margin:8px 0;
+font-size:18px;
+
+}
+
+/* OCR BOX */
+
+.ocr-box{
+
+margin-top:30px;
+
+background:var(--card);
+
+padding:20px;
+
+border-radius:12px;
+
+box-shadow:0 0 10px rgba(0,0,0,0.2);
+
+text-align:left;
+
+}
+
+.ocr-box h3{
+
+margin-bottom:10px;
+
+}
+
+.ocr-box pre{
+
+background:#000;
+
+color:#00ffd5;
+
+padding:10px;
+
+border-radius:8px;
+
+max-height:250px;
+
+overflow:auto;
+
+white-space:pre-wrap;
+
+font-size:13px;
+
+}
+
+/* SAVED SECTION */
+
+.saved{
+
+max-width:1100px;
+
+margin:auto;
+
+padding:40px 20px;
+
+}
+
+.saved h2{
+
+text-align:center;
+margin-bottom:20px;
+
+}
+
+/* RECEIPT GRID */
+
+#receiptList{
+
+display:grid;
+
+grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
+
+gap:20px;
+
+}
+
+/* RECEIPT CARD */
+
+.receipt-card{
+
+background:var(--card);
+
+padding:15px;
+
+border-radius:12px;
+
+box-shadow:0 0 10px rgba(0,0,0,0.2);
+
+transition:0.3s;
+
+}
+
+.receipt-card:hover{
+
+transform:translateY(-5px);
+
+box-shadow:0 0 20px rgba(0,255,200,0.4);
+
+}
+
+/* RECEIPT IMAGE */
+
+.receipt-img{
+
+width:100%;
+
+border-radius:8px;
+
+margin-bottom:10px;
+
+}
+
+/* RECEIPT INFO */
+
+.receipt-info h3{
+
+color:var(--accent);
+
+margin-bottom:5px;
+
+}
+
+/* OCR DETAILS */
+
+details{
+
+margin-top:10px;
+
+}
+
+details summary{
+
+cursor:pointer;
+color:var(--accent);
+font-weight:bold;
+
+}
+
+details pre{
+
+margin-top:10px;
+
+background:#000;
+
+color:#00ffd5;
+
+padding:10px;
+
+border-radius:6px;
+
+font-size:12px;
+
+max-height:200px;
+
+overflow:auto;
+
+}
+
+/* DELETE BUTTON */
+
+.delete-btn{
+
+background:#ef4444;
+
+margin-top:10px;
+
+}
+
+.delete-btn:hover{
+
+background:#dc2626;
+
+}
+
+/* FOOTER */
+
+footer{
+
+margin-top:40px;
+
+padding:20px;
+
+text-align:center;
+
+border-top:1px solid var(--border);
+
+color:#64748b;
+
+}
+
+/* RESPONSIVE DESIGN */
+
+@media (max-width:768px){
+
+.navbar{
+
+flex-direction:column;
+gap:10px;
+
+}
+
+.navbar ul{
+
+flex-wrap:wrap;
+justify-content:center;
+
+}
+
+.scanner h1{
+
+font-size:26px;
+
+}
+
+.upload-area{
+
+padding:30px;
+
+}
+
+#preview{
+
+max-width:100%;
+
+}
+
+}
+
+@media (max-width:480px){
+
+button{
+
+width:100%;
+
+}
+
+.result p{
+
+font-size:16px;
+
+}
+
+}
\ No newline at end of file
diff --git a/public/receipt.html b/public/receipt.html
new file mode 100644
index 00000000..1d90e214
--- /dev/null
+++ b/public/receipt.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+<title>Receipt Scanner | ExpenseFlow</title>
+
+<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js"></script>
+
+<link rel="stylesheet" href="receipt.css">
+
+</head>
+
+<body>
+
+<!-- NAVBAR -->
+
+<nav class="navbar">
+
+<div class="logo">💰 ExpenseFlow</div>
+
+<ul>
+<li><a href="#">Dashboard</a></li>
+<li><a href="#">Expenses</a></li>
+<li><a href="#">Analytics</a></li>
+<li><a href="#">Scanner</a></li>
+</ul>
+
+<button id="themeToggle">🌙</button>
+
+</nav>
+
+
+<!-- MAIN -->
+
+<section class="scanner">
+
+<h1>🧾 Smart Receipt Scanner</h1>
+<p>Upload a receipt and ExpenseFlow will detect your expense automatically</p>
+
+<div class="upload-area">
+
+<input type="file" id="fileInput" accept="image/*">
+
+<p>Drag receipt or upload image</p>
+
+</div>
+
+<img id="preview" style="max-width:300px; display:none; margin-top:20px; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.2);">
+
+<button id="scanBtn">Scan Receipt</button>
+
+<div class="result">
+
+<h3>Detected Expense</h3>
+
+<p>💰 Amount: <span id="amount">-</span></p>
+<p>📅 Date: <span id="date">-</span></p>
+<p>🏷 Category: <span id="category">-</span></p>
+
+<button id="saveBtn">Save Expense</button>
+
+</div>
+
+<div class="ocr-box">
+<h3>🔍 Scanned Receipt Text</h3>
+<pre id="ocrText">No scan yet</pre>
+</div>
+
+</section>
+
+
+<!-- SAVED RECEIPTS -->
+
+<section class="saved">
+
+<h2>Saved Expenses</h2>
+
+<div id="receiptList"></div>
+
+</section>
+
+
+<!-- FOOTER -->
+
+<footer>
+
+<p>© 2026 ExpenseFlow • Smart Personal Finance</p>
+
+</footer>
+<!-- BEAUTIFUL POPUP -->
+
+<div id="popup" class="popup">
+
+<span id="popupMsg"></span>
+
+</div>
+<script src="receipt.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/public/receipt.js b/public/receipt.js
new file mode 100644
index 00000000..bb55f9dc
--- /dev/null
+++ b/public/receipt.js
@@ -0,0 +1,254 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+const fileInput = document.getElementById("fileInput");
+const preview = document.getElementById("preview");
+const scanBtn = document.getElementById("scanBtn");
+const saveBtn = document.getElementById("saveBtn");
+
+const amountEl = document.getElementById("amount");
+const dateEl = document.getElementById("date");
+const categoryEl = document.getElementById("category");
+
+const receiptList = document.getElementById("receiptList");
+
+let detectedAmount = null;
+let detectedCategory = "General";
+
+loadReceipts();
+
+fileInput.addEventListener("change", previewImage);
+scanBtn.addEventListener("click", scanReceipt);
+saveBtn.addEventListener("click", saveReceipt);
+
+
+/* ---------- Preview Image ---------- */
+
+function previewImage() {
+
+const file = fileInput.files[0];
+
+if(!file) return;
+
+const reader = new FileReader();
+
+reader.onload = function(e){
+
+preview.src = e.target.result;
+preview.style.display = "block";
+
+};
+
+reader.readAsDataURL(file);
+
+}
+
+
+/* ---------- Scan Receipt ---------- */
+
+async function scanReceipt(){
+
+const file = fileInput.files[0];
+
+if(!file){
+showPopup("📷 Upload receipt first");
+return;
+}
+
+scanBtn.innerText = "Scanning...";
+
+const result = await Tesseract.recognize(file,"eng");
+
+const text = result.data.text;
+detectedOCR = text;
+document.getElementById("ocrText").innerText = text;
+console.log("OCR TEXT:", text);
+
+/* SHOW OCR TEXT IN FRONTEND */
+
+document.getElementById("ocrText").innerText = text;
+
+/* DETECT DATA */
+
+detectAmount(text);
+detectCategory(text);
+
+amountEl.innerText = detectedAmount ? "₹"+detectedAmount : "Not detected";
+dateEl.innerText = new Date().toLocaleDateString();
+categoryEl.innerText = detectedCategory;
+
+scanBtn.innerText = "Scan Receipt";
+
+}
+
+/* ---------- Detect Amount ---------- */
+
+function detectAmount(text){
+
+const matches = text.match(/(₹\s?\d+[.,]?\d*)|(\d+\.\d{2})/g);
+
+if(!matches){
+
+detectedAmount = null;
+return;
+
+}
+
+let values = matches.map(v =>
+parseFloat(v.replace(/[₹,]/g,""))
+);
+
+detectedAmount = Math.max(...values);
+
+}
+
+
+/* ---------- Detect Category ---------- */
+
+function detectCategory(text){
+
+text = text.toLowerCase();
+
+if(text.includes("restaurant") || text.includes("cafe") || text.includes("food"))
+detectedCategory = "Food";
+
+else if(text.includes("fuel") || text.includes("petrol"))
+detectedCategory = "Transport";
+
+else if(text.includes("medical") || text.includes("pharmacy"))
+detectedCategory = "Healthcare";
+
+else if(text.includes("mart") || text.includes("store") || text.includes("supermarket"))
+detectedCategory = "Shopping";
+
+else
+detectedCategory = "General";
+
+}
+
+
+/* ---------- Save Receipt ---------- */
+
+function saveReceipt(){
+
+const receipts = JSON.parse(localStorage.getItem("receipts")) || [];
+
+const receipt = {
+
+id: Date.now(),
+
+amount: detectedAmount ? detectedAmount : "Not detected",
+
+category: detectedCategory ? detectedCategory : "Unknown",
+
+date: new Date().toLocaleDateString(),
+
+image: preview.src ? preview.src : "",
+
+ocr: detectedOCR ? detectedOCR : "No OCR data available"
+
+};
+
+receipts.push(receipt);
+
+localStorage.setItem("receipts", JSON.stringify(receipts));
+
+loadReceipts();
+
+showPopup("✅ Receipt Saved Successfully");
+
+}
+
+
+/* ---------- Load Receipts ---------- */
+
+function loadReceipts(){
+
+const receipts = JSON.parse(localStorage.getItem("receipts")) || [];
+
+receiptList.innerHTML = "";
+
+if(receipts.length === 0){
+
+receiptList.innerHTML = "<p>No saved expenses</p>";
+return;
+
+}
+
+receipts.reverse().forEach(r => {
+
+const card = document.createElement("div");
+
+card.className = "receipt-card";
+
+card.innerHTML = `
+
+<img src="${r.image}" class="receipt-img">
+
+<div class="receipt-info">
+
+<h3>💰 ${r.amount === "Not detected" ? "Amount not detected" : "₹" + r.amount}</h3>
+
+<p>🏷 ${r.category}</p>
+
+<p>📅 ${r.date}</p>
+
+<details>
+<summary>View OCR Data</summary>
+<pre>${r.ocr}</pre>
+</details>
+
+<button onclick="deleteReceipt(${r.id})" class="delete-btn">
+Delete
+</button>
+
+</div>
+
+`;
+receiptList.appendChild(card);
+
+});
+
+}
+
+
+/* ---------- Delete Receipt ---------- */
+
+window.deleteReceipt = function(id){
+
+let receipts = JSON.parse(localStorage.getItem("receipts")) || [];
+
+receipts = receipts.filter(r => r.id !== id);
+
+localStorage.setItem("receipts",JSON.stringify(receipts));
+
+loadReceipts();
+
+};
+
+
+/* ---------- Dark Light Toggle ---------- */
+
+const toggle = document.getElementById("themeToggle");
+
+toggle.addEventListener("click",()=>{
+
+document.body.classList.toggle("dark");
+
+});
+
+});function showPopup(message){
+
+const popup = document.getElementById("popup");
+const msg = document.getElementById("popupMsg");
+
+msg.innerText = message;
+
+popup.classList.add("show");
+
+setTimeout(()=>{
+
+popup.classList.remove("show");
+
+},3000);
+
+}
\ No newline at end of file
