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 @@
+
+
+
+
+
+
+
+Receipt Scanner | ExpenseFlow
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
๐งพ Smart Receipt Scanner
+Upload a receipt and ExpenseFlow will detect your expense automatically
+ +
+
+
+
+
+
+
+
+
+
+Drag receipt or upload image
+ +
+
+
+
+Detected Expense
+ +๐ฐ Amount: -
+๐ Date: -
+๐ท Category: -
+ + + +
+
+
+๐ Scanned Receipt Text
+No scan yet+
Saved Expenses
+ + + +
+
+
+
+
+
+
+
+
\ 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 = "No saved expenses
"; +return; + +} + +receipts.reverse().forEach(r => { + +const card = document.createElement("div"); + +card.className = "receipt-card"; + +card.innerHTML = ` + +
+
+
+
+`;
+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
๐ฐ ${r.amount === "Not detected" ? "Amount not detected" : "โน" + r.amount}
+ +๐ท ${r.category}
+ +๐ ${r.date}
+ +
+
+
+
+
+View OCR Data
+${r.ocr}
+