diff --git a/Domains/Frontend/MiniProjects/to-do-app/README.md b/Domains/Frontend/MiniProjects/to-do-app/README.md
new file mode 100644
index 00000000..93612a5a
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/to-do-app/README.md
@@ -0,0 +1,51 @@
+# ✅ To-Do List App
+
+**Contributor:** [Tanvi2307](https://github.com/Tanvi2307)
+
+---
+
+## 🧾 Description
+
+A **simple and responsive To-Do List web app** built with **HTML**, **CSS**, and **JavaScript**.
+This app allows users to add, complete, and delete tasks — with all data saved in the browser using **localStorage**, so your list stays even after refreshing the page.
+
+---
+
+## 🚀 Features
+
+- ➕ **Add Tasks** – Quickly add tasks via input form.
+- ✅ **Mark as Complete** – Click to toggle task status.
+- 🗑️ **Delete Tasks** – Remove tasks from the list.
+- 💾 **Persistent Storage** – Uses localStorage to save tasks across sessions.
+- 💻 **Responsive UI** – Works on desktop and mobile devices.
+- ⚡ **Instant Updates** – Tasks update dynamically without reloading.
+
+---
+
+## 💡 Bonus Features
+
+- ✨ **Strike-through Styling** for completed tasks.
+- 🎨 **Auto-clear Input Field** after adding a task.
+- 📱 **Mobile-optimized layout** with clean styling.
+- ⚙️ **Simple, lightweight, and fast** — no libraries or frameworks used.
+
+---
+
+## 🧩 Tech Stack
+
+- **HTML5** – Markup and structure
+- **CSS3** – Styling and layout (custom or framework-free)
+- **JavaScript (Vanilla)** – DOM manipulation and data handling
+- **localStorage API** – Persistent task saving
+
+
+---
+
+## 📁 Folder Structure
+
+to-do-app/
+├── index.html # Main HTML file
+├── styles.css # Styling
+├── script.js # JavaScript logic
+└── README.md # Documentation
+
diff --git a/Domains/Frontend/MiniProjects/to-do-app/index.html b/Domains/Frontend/MiniProjects/to-do-app/index.html
new file mode 100644
index 00000000..2743dc59
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/to-do-app/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+ To-Do List
+
+
+
+
+
+
+
diff --git a/Domains/Frontend/MiniProjects/to-do-app/script.js b/Domains/Frontend/MiniProjects/to-do-app/script.js
new file mode 100644
index 00000000..6719df2c
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/to-do-app/script.js
@@ -0,0 +1,52 @@
+const todoForm = document.getElementById('todo-form');
+const todoInput = document.getElementById('todo-input');
+const todoList = document.getElementById('todo-list');
+
+let todos = JSON.parse(localStorage.getItem('todos')) || [];
+
+function saveTodos() {
+ localStorage.setItem('todos', JSON.stringify(todos));
+}
+
+function renderTodos() {
+ todoList.innerHTML = '';
+ todos.forEach((todo, index) => {
+ const li = document.createElement('li');
+ li.className = todo.completed ? 'completed' : '';
+ li.innerHTML = `
+ ${todo.text}
+
+
+
+
+ `;
+ todoList.appendChild(li);
+ });
+}
+
+function addTodo(e) {
+ e.preventDefault();
+ const text = todoInput.value.trim();
+ if (text !== '') {
+ todos.push({ text, completed: false });
+ saveTodos();
+ renderTodos();
+ todoInput.value = '';
+ }
+}
+
+function deleteTodo(index) {
+ todos.splice(index, 1);
+ saveTodos();
+ renderTodos();
+}
+
+function toggleComplete(index) {
+ todos[index].completed = !todos[index].completed;
+ saveTodos();
+ renderTodos();
+}
+
+// Init
+renderTodos();
+todoForm.addEventListener('submit', addTodo);
diff --git a/Domains/Frontend/MiniProjects/to-do-app/style.css b/Domains/Frontend/MiniProjects/to-do-app/style.css
new file mode 100644
index 00000000..0dba32b1
--- /dev/null
+++ b/Domains/Frontend/MiniProjects/to-do-app/style.css
@@ -0,0 +1,75 @@
+body {
+ font-family: 'Segoe UI', sans-serif;
+ background: #f2f2f2;
+ display: flex;
+ justify-content: center;
+ padding: 50px;
+}
+
+.todo-container {
+ background: #fff;
+ padding: 30px;
+ width: 100%;
+ max-width: 400px;
+ border-radius: 8px;
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+h1 {
+ text-align: center;
+ color: #333;
+}
+
+form {
+ display: flex;
+ gap: 10px;
+}
+
+input[type="text"] {
+ flex: 1;
+ padding: 10px;
+ font-size: 16px;
+}
+
+button {
+ padding: 10px 15px;
+ background: #4caf50;
+ color: #fff;
+ border: none;
+ cursor: pointer;
+ border-radius: 4px;
+}
+
+button:hover {
+ background: #45a049;
+}
+
+ul {
+ list-style: none;
+ padding: 0;
+ margin-top: 20px;
+}
+
+li {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: #eee;
+ padding: 10px;
+ margin-bottom: 10px;
+ border-radius: 4px;
+}
+
+li.completed {
+ text-decoration: line-through;
+ color: #888;
+}
+
+li button {
+ background: red;
+ color: #fff;
+ border: none;
+ padding: 5px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+}