diff --git a/src/AddToBucket.jsx b/src/AddToBucket.jsx
index d2d1e3e..72dea56 100644
--- a/src/AddToBucket.jsx
+++ b/src/AddToBucket.jsx
@@ -1,30 +1,36 @@
 import { createSignal } from "solid-js";
 
 export function AddToBucket(props) {
-  const [newItem, setNewItem] = createSignal('');
+    const [newItem, setNewItem] = createSignal("");
 
-  return (
-    <form>
-      <input
-        type="text"
-        placeholder="Make a wish"
-        value={newItem()}
-        onChange={(e) => {
-          setNewItem(e.target.value);
-        }}
-      />
-      <button
-        type="submit"
-        onClick={(e) => {
-          e.preventDefault();
-          props.setItems((items) => {
-            return [...items, { text: newItem(), complete: false }].reverse();
-          });
-          setNewItem('');
-        }}
-      >
-        Add
-      </button>
-    </form>
-  );
-}
\ No newline at end of file
+    return (
+        <form>
+            <input
+                type="text"
+                placeholder="Make a wish"
+                value={newItem()}
+                onChange={(e) => {
+                    setNewItem(e.target.value);
+                }}
+            />
+            <button
+                type="submit"
+                onClick={(e) => {
+                    e.preventDefault();
+                    if (newItem()!=='') {
+                        props.setItems((items) => {
+                            return [
+                                ...items,
+                                { text: newItem(), complete: false },
+                            ].reverse();
+                        });
+                        setNewItem("");
+                    } else {
+                        alert(`You can't submit empty value`);
+                    }
+                }}>
+                Add
+            </button>
+        </form>
+    );
+}
diff --git a/src/BucketListItem.jsx b/src/BucketListItem.jsx
index aa76c22..c833438 100644
--- a/src/BucketListItem.jsx
+++ b/src/BucketListItem.jsx
@@ -1,28 +1,42 @@
 export function BucketListItem(props) {
-  return (
-    <li
-      class="list-item"
-      style={{
-        "text-decoration": props.item.complete ? "line-through" : undefined,
-      }}
-    >
-      <label>
-        <input
-          type="checkbox"
-          checked={props.item.complete}
-          onChange={() => {
-            props.setItems((items) => {
-              const newItems = items.map((item) =>
-                props.item === item
-                  ? { ...item, complete: !item.complete }
-                  : item
-              );
-              return newItems;
+    const { item, setItems } = props;
+
+    const handleDelete = () => {
+        setItems((prevItems) => {
+            return prevItems.filter((prevItem) => {
+                return prevItem.text !== item.text;
             });
-          }}
-        />
-        {props.item.text}
-      </label>
-    </li>
-  );
+        });
+    };
+
+    return (
+        <li
+            class="list-item"
+            style={{
+                "text-decoration": props.item.complete
+                    ? "line-through"
+                    : undefined,
+            }}>
+            <label>
+                <input
+                    type="checkbox"
+                    checked={props.item.complete}
+                    onChange={() => {
+                        props.setItems((items) => {
+                            const newItems = items.map((item) =>
+                                props.item === item
+                                    ? { ...item, complete: !item.complete }
+                                    : item
+                            );
+                            return newItems;
+                        });
+                    }}
+                />
+                {props.item.text}
+            </label>
+            <button onClick={handleDelete} style={{ "margin-left": "10px" }}>
+                Delete
+            </button>
+        </li>
+    );
 }