diff --git a/src/components/QrCode.tsx b/src/components/QrCode.tsx
index 1decf7f..b4cd7a1 100644
--- a/src/components/QrCode.tsx
+++ b/src/components/QrCode.tsx
@@ -2,10 +2,13 @@ import {
   Component,
   createEffect,
   createResource,
+  createSignal,
   JSX,
+  Show,
   splitProps,
 } from "solid-js";
 import qrcode from "qrcode";
+import WarningIcon from "~icons/carbon/warning-alt-filled";
 
 const QrCode: Component<
   {
@@ -21,15 +24,26 @@ const QrCode: Component<
   ]);
 
   let ref: HTMLDivElement = undefined!;
+  const [qrError, setQrError] = createSignal<string | undefined>();
 
   const [svg] = createResource(
     () => props.value,
-    (value) => {
-      return qrcode.toString(value, {
-        type: "svg",
-        margin: props.margin,
-        errorCorrectionLevel: props.errorCorrectionLevel as any,
-      });
+    async (value) => {
+      let svg;
+
+      try {
+        svg = await qrcode.toString(value, {
+          type: "svg",
+          margin: props.margin,
+          errorCorrectionLevel: props.errorCorrectionLevel as any,
+        });
+        setQrError();
+      } catch (err) {
+        console.error(err);
+        setQrError((err as Error).message);
+      }
+
+      return svg;
     }
   );
 
@@ -40,7 +54,17 @@ const QrCode: Component<
     });
   });
 
-  return <div ref={ref} {...rest}></div>;
+  return (
+    <>
+      <Show when={qrError()}>
+        <div class="absolute h-full p-3 gap-2 rounded-sm flex items-start bg-error/80 backdrop-blur-sm ring-2 ring-error ring-offset-2 border border-error text-error-content overflow-y-auto">
+          <WarningIcon width="2em" height="2em" class="flex-shrink-0" /> Fehler:{" "}
+          {qrError()}
+        </div>
+      </Show>
+      <div ref={ref} {...rest}></div>
+    </>
+  );
 };
 
 export default QrCode;