diff --git a/src/App.jsx b/src/App.jsx
index 141ce20..13c23a3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,17 +1,18 @@
 import { createSignal } from "solid-js";
 import { BucketListItem } from "./BucketListItem";
 import { AddToBucket } from "./AddToBucket";
+import { ClearDoneWishes } from "./ClearDoneWishes";
 
 import { getWishes } from "./util/localStorageUtil";
 
 function App() {
   const [items, setItems] = createSignal(getWishes());
 
-
   return (
     <div class="container flex flex-col justify-center items-center gap-4">
       <h1 class="text-4xl font-bold">Solid Bucket List</h1>
       <AddToBucket setItems={setItems} />
+      <ClearDoneWishes setItems={setItems} />
       <ul class="text-2xl">
         <For each={items()}>
           {(item) => <BucketListItem item={item} setItems={setItems} />}
diff --git a/src/ClearDoneWishes.jsx b/src/ClearDoneWishes.jsx
new file mode 100644
index 0000000..fe028af
--- /dev/null
+++ b/src/ClearDoneWishes.jsx
@@ -0,0 +1,19 @@
+import { saveWish } from "./util/localStorageUtil";
+
+export function ClearDoneWishes(props) {
+  return (
+    <button
+      class="px-3 py-1.5 text-xl rounded-md bg-blue-600 text-white capitalize"
+      onClick={(e) => {
+        e.preventDefault();
+        props.setItems((items) => {
+          const updatedWishes = items.filter((item) => !item.complete);
+          saveWish(updatedWishes);
+          return updatedWishes;
+        });
+      }}
+    >
+      clear done wishes
+    </button>
+  );
+}