diff --git a/frontend/src/lib/components/button/Delete.svelte b/frontend/src/lib/components/button/Delete.svelte
new file mode 100644
index 0000000..1e49128
--- /dev/null
+++ b/frontend/src/lib/components/button/Delete.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let value: string;
+
+	let isPrepared = false;
+
+
+	const buttonLogic = () => {
+		if (isPrepared) {
+			dispatch('delete');
+		} else {
+			dispatch('prepared');
+			isPrepared = true;
+			setTimeout(() => {
+				isPrepared = false;
+			}, 3000);
+		}
+	};
+</script>
+
+<button on:click={buttonLogic} class="animate-bounce" class:isPrepared>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		class="mr-2 h-5 w-5"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke="currentColor"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+		/>
+	</svg>
+
+	{value}
+</button>
+
+<style lang="postcss">
+	button {
+		@apply inline-flex items-center;
+		@apply bg-red-700;
+		@apply @apply rounded-lg p-3 text-xl font-semibold 
+        text-white transition-colors duration-300;
+		@apply w-full;
+
+		animation: none !important;
+	}
+	button:hover {
+		@apply bg-red-800;
+	}
+
+	.isPrepared {
+		@apply bg-red-800;
+		animation: bounce 1s infinite !important;
+	}
+</style>