diff --git a/projects/expense-tracker/README.md b/projects/expense-tracker/README.md
new file mode 100644
index 0000000..806b60e
--- /dev/null
+++ b/projects/expense-tracker/README.md
@@ -0,0 +1,26 @@
+# Expense Tracker 💰
+
+A simple and lightweight **Expense Tracker** web application built using **HTML, CSS, and JavaScript**. This app allows users to add, view, and remove expenses while automatically calculating the total amount. All data is stored in the browser using **localStorage**, so expenses persist even after a page refresh.
+
+---
+
+## Features
+
+- Add expenses with name and amount
+- Display a list of all expenses
+- Remove individual expenses
+- Automatically calculate total expenses
+- Data persistence using browser localStorage
+- Responsive and clean UI
+
+---
+
+## Technologies Used
+
+- HTML5
+- CSS3
+- JavaScript
+- Browser Local Storage
+
+---
+
diff --git a/projects/expense-tracker/app.js b/projects/expense-tracker/app.js
new file mode 100644
index 0000000..2dda86b
--- /dev/null
+++ b/projects/expense-tracker/app.js
@@ -0,0 +1,70 @@
+// Select elements
+const form = document.querySelector("form");
+const inputs = document.querySelectorAll("input");
+
+let expenses = JSON.parse(localStorage.getItem("expenses")) || [];
+
+// Create expense list container
+const list = document.createElement("ul");
+const totalText = document.createElement("h3");
+
+document.querySelector(".container").appendChild(list);
+document.querySelector(".container").appendChild(totalText);
+
+// Render expenses
+function renderExpenses() {
+ list.innerHTML = "";
+ let total = 0;
+
+ expenses.forEach((expense, index) => {
+ const li = document.createElement("li");
+ li.style.display = "flex";
+ li.style.justifyContent = "space-between";
+ li.style.alignItems = "center";
+ li.style.margin = "5px 0";
+
+ const text = document.createElement("span");
+ text.textContent = `${expense.name} - Rs ${expense.amount}`;
+
+ const removeBtn = document.createElement("button");
+ removeBtn.textContent = "Remove";
+ removeBtn.style.cursor = "pointer";
+
+ removeBtn.addEventListener("click", () => {
+ expenses.splice(index, 1);
+ renderExpenses();
+ });
+
+ li.appendChild(text);
+ li.appendChild(removeBtn);
+ list.appendChild(li);
+
+ total += expense.amount;
+ });
+
+ totalText.textContent = `Total Expense: Rs ${total}`;
+ localStorage.setItem("expenses", JSON.stringify(expenses));
+}
+
+// Add expense
+form.addEventListener("submit", function (e) {
+ e.preventDefault();
+
+ const name = inputs[0].value.trim();
+ const amount = Number(inputs[1].value);
+
+ if (name === "" || amount <= 0) {
+ alert("Please enter valid expense details");
+ return;
+ }
+
+ expenses.push({ name, amount });
+
+ inputs[0].value = "";
+ inputs[1].value = "";
+
+ renderExpenses();
+});
+
+// Load saved data on refresh
+renderExpenses();
diff --git a/projects/expense-tracker/index.html b/projects/expense-tracker/index.html
new file mode 100644
index 0000000..f873c5d
--- /dev/null
+++ b/projects/expense-tracker/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+ Expense Tracker App
+
+
+
+
+
+
+
+
+
+
diff --git a/projects/expense-tracker/style.css b/projects/expense-tracker/style.css
new file mode 100644
index 0000000..7971dc1
--- /dev/null
+++ b/projects/expense-tracker/style.css
@@ -0,0 +1,68 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: Arial, Helvetica, sans-serif;
+ outline: none;
+}
+body {
+ background-color: #fff;
+ height: 100dvh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.container {
+ width: 50dvw;
+ height: auto;
+ border: 1px solid red;
+ padding: 10px;
+ background-color: gray;
+}
+.container h1 {
+ text-align: center;
+ color: white;
+}
+.container form {
+ margin: 10px;
+}
+.container form input {
+ width: 100%;
+ height: 2rem;
+ padding: 20px 10px;
+ margin: 5px 0;
+ border: 1px solid red;
+ border-radius: 10px;
+}
+.container form #btn {
+ box-shadow: 0 5px 10px red;
+ margin-top: 10px;
+ border-radius: 10px;
+}
+.container form #btn button {
+ width: 100%;
+ height: 3rem;
+ border-radius: 10px;
+ border: 1px solid red;
+ cursor: pointer;
+}
+.container ul {
+ margin: 20px 0 10px 0;
+}
+.container ul li {
+ padding: 5px 10px;
+ list-style: none;
+ color: white;
+ font-size: 20px;
+ border-bottom: 2px solid red;
+}
+.container h3 {
+ font-size: 25px;
+ text-align: center;
+ color: white;
+}
+.container ul li button {
+ padding: 5px 10px;
+ border-radius: 10px;
+ border: 1px solid red;
+}