diff --git a/src/components/ErrorPopup.test.ts b/src/components/ErrorPopup.test.ts
new file mode 100644
index 0000000..7e2cd7a
--- /dev/null
+++ b/src/components/ErrorPopup.test.ts
@@ -0,0 +1,37 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import ErrorPopup from "./ErrorPopup.vue";
+
+describe("ErrorPopup", () => {
+  it("renders nothing when show is false", () => {
+    const w = mount(ErrorPopup, { props: { show: false, message: "error" } });
+    expect(w.find("[class*=fixed]").exists()).toBe(false);
+  });
+
+  it("renders nothing when message is null even if show is true", () => {
+    const w = mount(ErrorPopup, { props: { show: true, message: null } });
+    expect(w.find("[class*=fixed]").exists()).toBe(false);
+  });
+
+  it("renders popup when show is true and message is set", () => {
+    const w = mount(ErrorPopup, { props: { show: true, message: "Verbindung fehlgeschlagen" } });
+    expect(w.text()).toContain("Verbindung fehlgeschlagen");
+  });
+
+  it("emits close when backdrop is clicked", async () => {
+    const w = mount(ErrorPopup, { props: { show: true, message: "err" } });
+    await w.find(".absolute.inset-0").trigger("click");
+    expect(w.emitted("close")).toHaveLength(1);
+  });
+
+  it("emits close when OK button is clicked", async () => {
+    const w = mount(ErrorPopup, { props: { show: true, message: "err" } });
+    await w.find("button").trigger("click");
+    expect(w.emitted("close")).toHaveLength(1);
+  });
+
+  it("displays Verbindungsfehler heading", () => {
+    const w = mount(ErrorPopup, { props: { show: true, message: "x" } });
+    expect(w.text()).toContain("Verbindungsfehler");
+  });
+});
diff --git a/src/components/ErrorPopup.vue b/src/components/ErrorPopup.vue
new file mode 100644
index 0000000..7088eb8
--- /dev/null
+++ b/src/components/ErrorPopup.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import LimelightButton from "./LimelightButton.vue";
+
+const props = defineProps<{
+  message: string | null;
+  show: boolean;
+  title?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "close"): void;
+}>();
+</script>
+
+<template>
+  <div
+    v-if="show && message"
+    class="fixed inset-0 z-50 flex items-center justify-center"
+  >
+    <!-- backdrop -->
+    <div class="absolute inset-0 bg-black/60" @click="$emit('close')" />
+
+    <!-- popup -->
+    <div
+      class="relative bg-secondary border border-red-500/40 rounded-2xl p-5 max-w-sm w-[90%] shadow-xl"
+    >
+      <div class="flex items-center gap-3 mb-3">
+        <div
+          class="w-10 h-10 rounded-full bg-red/15 flex items-center justify-center"
+        >
+          <svg
+            class="w-5 h-5 text-red"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 9v2m0 4h.01M10.29 3.86l-8.2 14A1.5 1.5 0 003.3 20h16.4a1.5 1.5 0 001.21-2.14l-8.2-14a1.5 1.5 0 00-2.42 0z"
+            />
+          </svg>
+        </div>
+
+        <p class="text-white font-semibold">{{ title ?? "Verbindungsfehler" }}</p>
+      </div>
+
+      <p class="text-white/80 text-sm whitespace-pre-line">
+        {{ message }}
+      </p>
+
+      <LimelightButton variant="danger" class="mt-4 w-full" @click="$emit('close')">
+        OK
+      </LimelightButton>
+    </div>
+  </div>
+</template>
diff --git a/src/index.ts b/src/index.ts
index ae144a9..1e84313 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,2 +1,3 @@
 export { default as LimelightButton } from './components/LimelightButton.vue'
+export { default as ErrorPopup } from './components/ErrorPopup.vue'
 export * from './utils/webviewer'