diff --git a/frontend/src/routes/documents/[id]/edit/+page.svelte b/frontend/src/routes/documents/[id]/edit/+page.svelte
index 7ff74f28..b8e8e7d4 100644
--- a/frontend/src/routes/documents/[id]/edit/+page.svelte
+++ b/frontend/src/routes/documents/[id]/edit/+page.svelte
@@ -267,14 +267,24 @@ function handleDateInput(e: Event) {
 					<button
 						type="button"
 						onclick={() => (confirmDelete = true)}
-						class="flex items-center gap-1.5 text-sm text-ink-3 transition-colors hover:text-red-600"
+						class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 text-sm font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
 					>
-						<img
-							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Delete/Delete-MD.svg"
-							alt=""
-							aria-hidden="true"
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
 							class="h-4 w-4"
-						/>
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							aria-hidden="true"
+						>
+							<polyline points="3 6 5 6 21 6" />
+							<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+							<path d="M10 11v6M14 11v6" />
+							<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+						</svg>
 						{m.btn_delete()}
 					</button>
 				{/if}