diff --git a/web/src/components/dialog/SmallDialog.svelte b/web/src/components/dialog/SmallDialog.svelte
index bce93be4..6767612c 100644
--- a/web/src/components/dialog/SmallDialog.svelte
+++ b/web/src/components/dialog/SmallDialog.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { hapticError } from "$lib/haptics";
     import type { Optional } from "$lib/types/generic";
     import type { MeowbaltEmotions } from "$lib/types/meowbalt";
     import type { DialogButton, SmallDialogIcons } from "$lib/types/dialog";
@@ -21,6 +22,11 @@
     export let leftAligned = false;
 
     let close: () => void;
+
+    // error meowbalt art is not used in dialogs unless it's an error
+    if (meowbalt === "error") {
+        hapticError();
+    }
 </script>
 
 <DialogContainer {id} {dismissable} bind:close>
diff --git a/web/src/lib/haptics.ts b/web/src/lib/haptics.ts
index 347e81bc..87c87f22 100644
--- a/web/src/lib/haptics.ts
+++ b/web/src/lib/haptics.ts
@@ -33,3 +33,11 @@ export const hapticConfirm = () => {
     hapticSwitch();
     setTimeout(() => hapticSwitch(), 120);
 }
+
+export const hapticError = () => {
+    if (!canUseHaptics()) return;
+
+    hapticSwitch();
+    setTimeout(() => hapticSwitch(), 120);
+    setTimeout(() => hapticSwitch(), 240);
+}