diff --git a/index.css b/index.css
index a6d9dea..2c8e6e0 100644
--- a/index.css
+++ b/index.css
@@ -140,6 +140,11 @@ footer > div {
   padding-block: unset;
 }
 
+#main:has(#filter-active:checked) task-item.complete,
+#main:has(#filter-complete:checked) task-item:not(.complete) {
+  display: none;
+}
+
 #clear-completed {
   appearance: none;
   background-color: var(--background-color);
diff --git a/index.js b/index.js
index 5001915..d3b180f 100644
--- a/index.js
+++ b/index.js
@@ -48,10 +48,7 @@ NEW_TASK.addEventListener('keydown', (event) => {
 
 $('#add-task').addEventListener('click', add_task);
 
-$('#filter').addEventListener('change', () => {
-  MAIN.dataset.filter = $('input[name="filter"]:checked').value;
-  save();
-});
+$('#filter').addEventListener('change', save);
 
 $('#clear-completed').addEventListener('click', () => {
   for (const el of $$('task-item.complete')) {