diff --git a/client/src/components/ui/toaster.tsx b/client/src/components/ui/toaster.tsx
new file mode 100644
index 0000000..7f0c5eb
--- /dev/null
+++ b/client/src/components/ui/toaster.tsx
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { useToast } from "../../hooks/use-toast";
+import { X } from "lucide-react";
+
+export function Toaster() {
+  const { toasts, subscribe } = useToast();
+
+  useEffect(() => {
+    const unsub = subscribe();
+    return unsub;
+  }, [subscribe]);
+
+  return (
+    <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm w-full pointer-events-none">
+      {toasts.map((t) => (
+        <div
+          key={t.id}
+          className={`pointer-events-auto flex items-start gap-3 rounded-xl border p-4 shadow-lg bg-card text-card-foreground border-border animate-in slide-in-from-bottom-4 ${t.variant === "destructive" ? "border-destructive/50 bg-destructive text-destructive-foreground" : t.variant === "success" ? "border-green-500/50" : ""}`}
+          data-testid="toast"
+        >
+          <div className="flex-1">
+            {t.title && <p className="font-semibold text-sm">{t.title}</p>}
+            {t.description && <p className="text-xs mt-0.5 opacity-80">{t.description}</p>}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}