diff --git a/public/index.html b/public/index.html
index a4e0fac..9891718 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,7 +25,11 @@
             <div id="empty-state"></div>
             
             <!-- Filter Controls (Issue #13) -->
-            <div id="filter-controls"></div>
+            <div id="filter-controls"><div class="filters">
+    <button onclick="filterTasks('all')">All</button>
+    <button onclick="filterTasks('active')">Active</button>
+    <button onclick="filterTasks('completed')">Completed</button>
+</div></div>
         </main>
 
         <footer id="main-footer"></footer>
diff --git a/public/script.js b/public/script.js
index 9c6912e..3db72d4 100644
--- a/public/script.js
+++ b/public/script.js
@@ -10,3 +10,17 @@ document.addEventListener('DOMContentLoaded', () => {
     // Load tasks will be called here later (Issue #9)
 });
 
+let currentFilter = 'all';
+
+function filterTasks(status) {
+    currentFilter = status;
+    renderTasks();
+}
+
+// Note: You must update renderTasks() to respect this filter:
+// const filtered = tasks.filter(t => {
+//   if (currentFilter === 'active') return !t.completed;
+//   if (currentFilter === 'completed') return t.completed;
+//   return true;
+// });
+