diff --git a/Todo-app/index.html b/Todo-app/index.html
index a2d1385..9c7e371 100644
--- a/Todo-app/index.html
+++ b/Todo-app/index.html
@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Scratch JS Todo list learn by concept clear</title>
+    <title>Advanced Todo App - Task Manager</title>
     <link rel="stylesheet" href="style.css" />
     <script async defer src="https://buttons.github.io/buttons.js"></script>
     <style>
@@ -18,40 +18,121 @@
 
 <body>
     <nav>
-       <!--  <div class="btn">
-            <a class="github-button" href="https://github.com/smthari/Freecodecamp-Responsive-Web-Design-Projects/fork"
-                data-size="large" data-show-count="true"
-                aria-label="Fork smthari/Freecodecamp-Responsive-Web-Design-Projects on GitHub">Fork</a>
-
-            <a class="github-button" href="https://github.com/smthari" data-size="large" data-show-count="true"
-                aria-label="Follow @smthari on GitHub">Follow</a>
+        <div class="nav-left">
+            <h2 class="nav-title">📝 TaskMaster</h2>
         </div>
         <div class="theme-switch-wrapper">
             <label class="theme-switch" for="checkbox">
                 <input type="checkbox" id="checkbox" />
                 <div class="slider round"></div>
             </label>
-            <em>Switch Theme</em>
-        </div> -->
+            <em>🌙 Dark Mode</em>
+        </div>
     </nav>
+    
     <div class="container">
-        <ul class="todo-list js-todo-list"></ul>
+        <!-- Statistics Dashboard -->
+        <div class="stats-dashboard">
+            <div class="stat-card">
+                <i class="fas fa-tasks"></i>
+                <div class="stat-info">
+                    <h3 id="total-tasks">0</h3>
+                    <p>Total Tasks</p>
+                </div>
+            </div>
+            <div class="stat-card">
+                <i class="fas fa-check-circle"></i>
+                <div class="stat-info">
+                    <h3 id="completed-tasks">0</h3>
+                    <p>Completed</p>
+                </div>
+            </div>
+            <div class="stat-card">
+                <i class="fas fa-hourglass-half"></i>
+                <div class="stat-info">
+                    <h3 id="pending-tasks">0</h3>
+                    <p>Pending</p>
+                </div>
+            </div>
+            <div class="stat-card progress-card">
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progress-fill"></div>
+                </div>
+                <p id="progress-text">0% Complete</p>
+            </div>
+        </div>
+
+        <!-- Search and Filter Controls -->
+        <div class="controls">
+            <div class="search-box">
+                <i class="fas fa-search"></i>
+                <input type="text" id="search-input" placeholder="Search tasks..." />
+            </div>
+            <div class="filter-buttons">
+                <button class="filter-btn active" data-filter="all">All</button>
+                <button class="filter-btn" data-filter="active">Active</button>
+                <button class="filter-btn" data-filter="completed">Completed</button>
+            </div>
+        </div>
+
+        <!-- Filter by Priority and Category -->
+        <div class="advanced-filters">
+            <select id="priority-filter" class="filter-select">
+                <option value="all">All Priorities</option>
+                <option value="high">High Priority</option>
+                <option value="medium">Medium Priority</option>
+                <option value="low">Low Priority</option>
+            </select>
+            <select id="category-filter" class="filter-select">
+                <option value="all">All Categories</option>
+                <option value="work">Work</option>
+                <option value="personal">Personal</option>
+                <option value="shopping">Shopping</option>
+                <option value="health">Health</option>
+                <option value="other">Other</option>
+            </select>
+            <button id="clear-filters" class="clear-btn">Clear Filters</button>
+        </div>
+
+        <!-- Todo List -->
+        <ul class="todo-list js-todo-list" id="sortable-list"></ul>
+        
+        <!-- Empty State -->
         <div class="empty-state">
-            <h1 class="app-title">My Todo</h1>
+            <h1 class="app-title">My Tasks</h1>
             <i class="fas fa-tasks icon"></i>
             <p class="empty-state__description">
-                Type in the below field 👇 and press enter to add your todo in the list
+                Create your first task below to get started! 🚀
             </p>
         </div>
+
+        <!-- Add Todo Form -->
         <form class="formselect">
-            <input autofocus type="text" class="inputselect" placeholder="Eg: Workout">
+            <div class="form-row">
+                <input autofocus type="text" class="inputselect" id="task-input" placeholder="What needs to be done?" required>
+                <select id="priority-select" class="input-select-small" required>
+                    <option value="medium">Medium</option>
+                    <option value="high">High</option>
+                    <option value="low">Low</option>
+                </select>
+                <select id="category-select" class="input-select-small" required>
+                    <option value="personal">Personal</option>
+                    <option value="work">Work</option>
+                    <option value="shopping">Shopping</option>
+                    <option value="health">Health</option>
+                    <option value="other">Other</option>
+                </select>
+                <input type="date" id="due-date" class="input-select-small">
+                <button type="submit" class="add-btn">
+                    <i class="fas fa-plus"></i> Add Task
+                </button>
+            </div>
         </form>
     </div>
 
     <script src="https://kit.fontawesome.com/dd8c49730d.js" crossorigin="anonymous"></script>
     <script src="script.js"></script>
 
-
 </body>
 
 </html>
\ No newline at end of file
