diff --git a/client/src/components/ui/Badge.tsx b/client/src/components/ui/Badge.tsx
new file mode 100644
index 0000000..89c91d5
--- /dev/null
+++ b/client/src/components/ui/Badge.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+/* ------------------------------------------------------------------ */
+/*  Types                                                               */
+/* ------------------------------------------------------------------ */
+
+export type BadgeVariant =
+  | "default"
+  | "primary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "outline";
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  /** Show a colored dot before the label */
+  dot?: boolean;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Styles                                                              */
+/* ------------------------------------------------------------------ */
+
+const variantClasses: Record<BadgeVariant, string> = {
+  default: "bg-gray-100 text-gray-700",
+  primary: "bg-blue-100 text-blue-700",
+  success: "bg-green-100 text-green-700",
+  warning: "bg-yellow-100 text-yellow-700",
+  danger: "bg-red-100 text-red-700",
+  outline: "border border-gray-300 bg-transparent text-gray-700",
+};
+
+const dotVariantClasses: Record<BadgeVariant, string> = {
+  default: "bg-gray-400",
+  primary: "bg-blue-500",
+  success: "bg-green-500",
+  warning: "bg-yellow-500",
+  danger: "bg-red-500",
+  outline: "bg-gray-400",
+};
+
+/* ------------------------------------------------------------------ */
+/*  Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function Badge({
+  variant = "default",
+  dot = false,
+  className,
+  children,
+  ...props
+}: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium",
+        variantClasses[variant],
+        className
+      )}
+      {...props}
+    >
+      {dot && (
+        <span
+          aria-hidden="true"
+          className={cn("h-1.5 w-1.5 rounded-full", dotVariantClasses[variant])}
+        />
+      )}
+      {children}
+    </span>
+  );
+}
diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx
new file mode 100644
index 0000000..9cbbc77
--- /dev/null
+++ b/client/src/components/ui/Button.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+export type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "ghost"
+  | "danger"
+  | "outline";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary:
+    "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500",
+  secondary:
+    "bg-gray-200 text-gray-900 hover:bg-gray-300 focus-visible:ring-gray-400",
+  ghost:
+    "bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-400",
+  danger:
+    "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500",
+  outline:
+    "border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50 focus-visible:ring-gray-400",
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-sm",
+  lg: "h-12 px-6 text-base",
+};
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = "primary",
+      size = "md",
+      loading = false,
+      leftIcon,
+      rightIcon,
+      children,
+      disabled,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const isDisabled = disabled || loading;
+
+    return (
+      <button
+        ref={ref}
+        disabled={isDisabled}
+        aria-busy={loading || undefined}
+        className={cn(
+          "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          "disabled:pointer-events-none disabled:opacity-50",
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        )}
+        {...props}
+      >
+        {loading ? (
+          <span
+            className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+            aria-hidden="true"
+          />
+        ) : (
+          leftIcon
+        )}
+        {children}
+        {!loading && rightIcon}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";
diff --git a/client/src/components/ui/Card.tsx b/client/src/components/ui/Card.tsx
new file mode 100644
index 0000000..7bc677a
--- /dev/null
+++ b/client/src/components/ui/Card.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+/* ------------------------------------------------------------------ */
+/*  Card                                                                */
+/* ------------------------------------------------------------------ */
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Remove default padding */
+  noPadding?: boolean;
+}
+
+export function Card({ noPadding = false, className, children, ...props }: CardProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-gray-200 bg-white shadow-sm",
+        !noPadding && "p-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Card.Header                                                         */
+/* ------------------------------------------------------------------ */
+
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardHeader({ className, children, ...props }: CardHeaderProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between border-b border-gray-100 px-4 py-3",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Card.Body                                                           */
+/* ------------------------------------------------------------------ */
+
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardBody({ className, children, ...props }: CardBodyProps) {
+  return (
+    <div className={cn("px-4 py-4", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Card.Footer                                                         */
+/* ------------------------------------------------------------------ */
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardFooter({ className, children, ...props }: CardFooterProps) {
+  return (
+    <div
+      className={cn(
+        "flex items-center border-t border-gray-100 px-4 py-3",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/client/src/components/ui/Input.tsx b/client/src/components/ui/Input.tsx
new file mode 100644
index 0000000..175b7e7
--- /dev/null
+++ b/client/src/components/ui/Input.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+export type InputSize = "sm" | "md" | "lg";
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  size?: InputSize;
+  leftAddon?: React.ReactNode;
+  rightAddon?: React.ReactNode;
+}
+
+const sizeClasses: Record<InputSize, string> = {
+  sm: "h-8 px-2 text-sm",
+  md: "h-10 px-3 text-sm",
+  lg: "h-12 px-4 text-base",
+};
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      label,
+      hint,
+      error,
+      size = "md",
+      leftAddon,
+      rightAddon,
+      id,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    // Always generate a stable fallback ID so aria-describedby values are never
+    // built from "undefined" even when neither `id` nor `label` is provided.
+    const generatedId = React.useId();
+    const inputId = id ?? generatedId;
+
+    const hintId = hint ? `${inputId}-hint` : undefined;
+    const errorId = error ? `${inputId}-error` : undefined;
+    const describedBy =
+      [hintId, errorId].filter(Boolean).join(" ") || undefined;
+
+    return (
+      <div className="flex flex-col gap-1">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="text-sm font-medium text-gray-700"
+          >
+            {label}
+          </label>
+        )}
+
+        <div className="relative flex items-center">
+          {leftAddon && (
+            <span className="pointer-events-none absolute left-3 text-gray-400">
+              {leftAddon}
+            </span>
+          )}
+
+          <input
+            ref={ref}
+            id={inputId}
+            aria-describedby={describedBy}
+            aria-invalid={error ? true : undefined}
+            className={cn(
+              "w-full rounded-md border bg-white transition-colors",
+              "placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-0",
+              error
+                ? "border-red-400 focus:ring-red-400"
+                : "border-gray-300 focus:ring-blue-500",
+              leftAddon && "pl-9",
+              rightAddon && "pr-9",
+              sizeClasses[size],
+              className
+            )}
+            {...props}
+          />
+
+          {rightAddon && (
+            <span className="pointer-events-none absolute right-3 text-gray-400">
+              {rightAddon}
+            </span>
+          )}
+        </div>
+
+        {error && (
+          <p id={errorId} className="text-xs text-red-600" role="alert">
+            {error}
+          </p>
+        )}
+        {hint && !error && (
+          <p id={hintId} className="text-xs text-gray-500">
+            {hint}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";
diff --git a/client/src/components/ui/Modal.tsx b/client/src/components/ui/Modal.tsx
new file mode 100644
index 0000000..c2fd57e
--- /dev/null
+++ b/client/src/components/ui/Modal.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  className,
+}: ModalProps) {
+  const titleId = React.useId();
+  const descId = React.useId();
+
+  // Scroll lock
+  React.useEffect(() => {
+    if (!open) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [open]);
+
+  // Escape key handler
+  React.useEffect(() => {
+    if (!open) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      role="presentation"
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50"
+        aria-hidden="true"
+        onClick={onClose}
+      />
+
+      {/* Dialog */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+        aria-describedby={description ? descId : undefined}
+        className={cn(
+          "relative z-10 w-full max-w-md rounded-lg bg-white p-6 shadow-xl",
+          "focus:outline-none",
+          className
+        )}
+        tabIndex={-1}
+      >
+        {title && (
+          <h2 id={titleId} className="mb-1 text-lg font-semibold text-gray-900">
+            {title}
+          </h2>
+        )}
+        {description && (
+          <p id={descId} className="mb-4 text-sm text-gray-500">
+            {description}
+          </p>
+        )}
+
+        {children}
+
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close modal"
+          className={cn(
+            "absolute right-4 top-4 rounded-md p-1 text-gray-400",
+            "hover:bg-gray-100 hover:text-gray-600",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+          )}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fillRule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/ui/Select.tsx b/client/src/components/ui/Select.tsx
new file mode 100644
index 0000000..1a67534
--- /dev/null
+++ b/client/src/components/ui/Select.tsx
@@ -0,0 +1,105 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+export type SelectSize = "sm" | "md" | "lg";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  size?: SelectSize;
+  options: SelectOption[];
+  placeholder?: string;
+}
+
+const sizeClasses: Record<SelectSize, string> = {
+  sm: "h-8 px-2 text-sm",
+  md: "h-10 px-3 text-sm",
+  lg: "h-12 px-4 text-base",
+};
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  (
+    {
+      label,
+      hint,
+      error,
+      size = "md",
+      options,
+      placeholder,
+      id,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const generatedId = React.useId();
+    const selectId = id ?? generatedId;
+
+    const hintId = hint ? `${selectId}-hint` : undefined;
+    const errorId = error ? `${selectId}-error` : undefined;
+    const describedBy =
+      [hintId, errorId].filter(Boolean).join(" ") || undefined;
+
+    return (
+      <div className="flex flex-col gap-1">
+        {label && (
+          <label
+            htmlFor={selectId}
+            className="text-sm font-medium text-gray-700"
+          >
+            {label}
+          </label>
+        )}
+
+        <select
+          ref={ref}
+          id={selectId}
+          aria-describedby={describedBy}
+          aria-invalid={error ? true : undefined}
+          className={cn(
+            "w-full rounded-md border bg-white transition-colors",
+            "focus:outline-none focus:ring-2 focus:ring-offset-0",
+            error
+              ? "border-red-400 focus:ring-red-400"
+              : "border-gray-300 focus:ring-blue-500",
+            sizeClasses[size],
+            className
+          )}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {options.map((opt) => (
+            <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+
+        {error && (
+          <p id={errorId} className="text-xs text-red-600" role="alert">
+            {error}
+          </p>
+        )}
+        {hint && !error && (
+          <p id={hintId} className="text-xs text-gray-500">
+            {hint}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Select.displayName = "Select";
diff --git a/client/src/components/ui/Skeleton.tsx b/client/src/components/ui/Skeleton.tsx
new file mode 100644
index 0000000..7635c1b
--- /dev/null
+++ b/client/src/components/ui/Skeleton.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+/* ------------------------------------------------------------------ */
+/*  Base Skeleton                                                       */
+/* ------------------------------------------------------------------ */
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Explicit width (Tailwind class or inline style via `style` prop) */
+  width?: string;
+  /** Explicit height (Tailwind class or inline style via `style` prop) */
+  height?: string;
+  /** Round the skeleton into a circle (for avatars) */
+  circle?: boolean;
+}
+
+export function Skeleton({
+  width,
+  height,
+  circle = false,
+  className,
+  style,
+  ...props
+}: SkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "animate-pulse bg-gray-200",
+        circle ? "rounded-full" : "rounded",
+        className
+      )}
+      style={{
+        width,
+        height,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Text preset — simulates a block of text lines                      */
+/* ------------------------------------------------------------------ */
+
+export interface SkeletonTextProps {
+  lines?: number;
+  className?: string;
+}
+
+export function SkeletonText({ lines = 3, className }: SkeletonTextProps) {
+  return (
+    <div className={cn("flex flex-col gap-2", className)} aria-hidden="true">
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton
+          key={i}
+          height="1rem"
+          // Make the last line shorter for a natural look
+          width={i === lines - 1 ? "66%" : "100%"}
+        />
+      ))}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Card preset — simulates a card with image + text                   */
+/* ------------------------------------------------------------------ */
+
+export interface SkeletonCardProps {
+  className?: string;
+}
+
+export function SkeletonCard({ className }: SkeletonCardProps) {
+  return (
+    <div
+      className={cn("rounded-lg border border-gray-200 p-4", className)}
+      aria-hidden="true"
+    >
+      {/* Image placeholder */}
+      <Skeleton height="10rem" className="mb-4 w-full" />
+      {/* Title */}
+      <Skeleton height="1.25rem" width="60%" className="mb-2" />
+      {/* Body lines */}
+      <SkeletonText lines={2} />
+    </div>
+  );
+}
diff --git a/client/src/components/ui/Toast.tsx b/client/src/components/ui/Toast.tsx
new file mode 100644
index 0000000..4152be8
--- /dev/null
+++ b/client/src/components/ui/Toast.tsx
@@ -0,0 +1,128 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+/* ------------------------------------------------------------------ */
+/*  Types                                                               */
+/* ------------------------------------------------------------------ */
+
+export type ToastVariant = "info" | "success" | "warning" | "error";
+
+export interface Toast {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number; // ms — 0 = persistent
+}
+
+interface ToastContextValue {
+  toasts: Toast[];
+  addToast: (toast: Omit<Toast, "id">) => void;
+  removeToast: (id: string) => void;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Context                                                             */
+/* ------------------------------------------------------------------ */
+
+const ToastContext = React.createContext<ToastContextValue | null>(null);
+
+export function useToast(): ToastContextValue {
+  const ctx = React.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
+  return ctx;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Provider                                                            */
+/* ------------------------------------------------------------------ */
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = React.useState<Toast[]>([]);
+
+  const removeToast = React.useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const addToast = React.useCallback(
+    (toast: Omit<Toast, "id">) => {
+      const id = Math.random().toString(36).slice(2);
+      const duration = toast.duration ?? 4000;
+      setToasts((prev) => [...prev, { ...toast, id }]);
+      if (duration > 0) {
+        setTimeout(() => removeToast(id), duration);
+      }
+    },
+    [removeToast]
+  );
+
+  return (
+    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
+      {children}
+      <ToastViewport />
+    </ToastContext.Provider>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Viewport                                                            */
+/* ------------------------------------------------------------------ */
+
+const variantClasses: Record<ToastVariant, string> = {
+  info: "border-blue-200 bg-blue-50 text-blue-900",
+  success: "border-green-200 bg-green-50 text-green-900",
+  warning: "border-yellow-200 bg-yellow-50 text-yellow-900",
+  error: "border-red-200 bg-red-50 text-red-900",
+};
+
+function ToastViewport() {
+  const { toasts, removeToast } = useToast();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div
+      aria-live="polite"
+      aria-label="Notifications"
+      className="fixed bottom-4 right-4 z-50 flex flex-col gap-2"
+    >
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          role="status"
+          className={cn(
+            "flex w-80 items-start gap-3 rounded-lg border p-4 shadow-md",
+            variantClasses[toast.variant ?? "info"]
+          )}
+        >
+          <div className="flex-1">
+            <p className="text-sm font-semibold">{toast.title}</p>
+            {toast.description && (
+              <p className="mt-0.5 text-xs opacity-80">{toast.description}</p>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={() => removeToast(toast.id)}
+            aria-label="Dismiss notification"
+            className="shrink-0 rounded p-0.5 opacity-60 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-4 w-4"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                fillRule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/client/src/lib/utils.ts b/client/src/lib/utils.ts
new file mode 100644
index 0000000..0606797
--- /dev/null
+++ b/client/src/lib/utils.ts
@@ -0,0 +1,9 @@
+/**
+ * Merges class names, filtering out falsy values.
+ * Drop-in replacement for the `cn` / `clsx` pattern used across UI components.
+ */
+export function cn(
+  ...classes: Array<string | false | null | undefined>
+): string {
+  return classes.filter(Boolean).join(" ");
+}
diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
new file mode 100644
index 0000000..1b9c19b
--- /dev/null
+++ b/src/components/ui/Badge.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+
+type BadgeVariant = "default" | "success" | "warning" | "danger" | "info";
+
+interface BadgeProps {
+  variant?: BadgeVariant;
+  children: React.ReactNode;
+  className?: string;
+  dot?: boolean;
+}
+
+const variantClasses: Record<BadgeVariant, string> = {
+  default: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300",
+  success: "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400",
+  warning: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-400",
+  danger:  "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400",
+  info:    "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400",
+};
+
+const dotClasses: Record<BadgeVariant, string> = {
+  default: "bg-gray-400",
+  success: "bg-green-500",
+  warning: "bg-yellow-500",
+  danger:  "bg-red-500",
+  info:    "bg-blue-500",
+};
+
+export const Badge: React.FC<BadgeProps> = ({
+  variant = "default",
+  children,
+  className = "",
+  dot = false,
+}) => {
+  return (
+    <span
+      className={[
+        "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium",
+        variantClasses[variant],
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {dot && (
+        <span
+          className={["w-1.5 h-1.5 rounded-full flex-shrink-0", dotClasses[variant]].join(" ")}
+          aria-hidden="true"
+        />
+      )}
+      {children}
+    </span>
+  );
+};
+
+export default Badge;
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000..87fb948
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+type ButtonSize = "sm" | "md" | "lg";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  fullWidth?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary:
+    "bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white border border-transparent",
+  secondary:
+    "bg-transparent hover:bg-gray-100 active:bg-gray-200 text-gray-800 border border-gray-300 dark:hover:bg-gray-800 dark:text-gray-100 dark:border-gray-600",
+  ghost:
+    "bg-transparent hover:bg-gray-100 active:bg-gray-200 text-gray-700 border border-transparent dark:hover:bg-gray-800 dark:text-gray-300",
+  danger:
+    "bg-red-600 hover:bg-red-700 active:bg-red-800 text-white border border-transparent",
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: "px-3 py-1.5 text-sm rounded-md gap-1.5",
+  md: "px-4 py-2 text-sm rounded-lg gap-2",
+  lg: "px-5 py-2.5 text-base rounded-lg gap-2",
+};
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  fullWidth = false,
+  leftIcon,
+  rightIcon,
+  children,
+  disabled,
+  className = "",
+  ...rest
+}) => {
+  const isDisabled = disabled || loading;
+
+  return (
+    <button
+      {...rest}
+      disabled={isDisabled}
+      className={[
+        "inline-flex items-center justify-center font-medium transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+        variantClasses[variant],
+        sizeClasses[size],
+        fullWidth ? "w-full" : "",
+        isDisabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "cursor-pointer",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {loading ? (
+        <svg
+          className="animate-spin h-4 w-4 text-current"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+          />
+        </svg>
+      ) : (
+        leftIcon && <span className="flex-shrink-0">{leftIcon}</span>
+      )}
+      {children && <span>{children}</span>}
+      {!loading && rightIcon && (
+        <span className="flex-shrink-0">{rightIcon}</span>
+      )}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
new file mode 100644
index 0000000..1d5e8a0
--- /dev/null
+++ b/src/components/ui/Card.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+
+interface CardProps {
+  children: React.ReactNode;
+  className?: string;
+  /** Adds a subtle hover lift effect */
+  hoverable?: boolean;
+  /** Removes inner padding */
+  noPadding?: boolean;
+  /** Optional card header title */
+  title?: React.ReactNode;
+  /** Optional action placed in the header's trailing slot */
+  action?: React.ReactNode;
+}
+
+export const Card: React.FC<CardProps> = ({
+  children,
+  className = "",
+  hoverable = false,
+  noPadding = false,
+  title,
+  action,
+}) => {
+  return (
+    <div
+      className={[
+        "bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm",
+        hoverable
+          ? "transition-shadow duration-200 hover:shadow-md hover:-translate-y-px"
+          : "",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {(title || action) && (
+        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 dark:border-gray-800">
+          {title && (
+            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+              {title}
+            </h3>
+          )}
+          {action && <div className="ml-auto">{action}</div>}
+        </div>
+      )}
+      <div className={noPadding ? "" : "p-5"}>{children}</div>
+    </div>
+  );
+};
+
+export default Card;
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
new file mode 100644
index 0000000..d01a9a1
--- /dev/null
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,90 @@
+import React from "react";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  leftAdornment?: React.ReactNode;
+  rightAdornment?: React.ReactNode;
+  fullWidth?: boolean;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      label,
+      error,
+      hint,
+      leftAdornment,
+      rightAdornment,
+      fullWidth = false,
+      className = "",
+      id,
+      ...rest
+    },
+    ref
+  ) => {
+    const inputId = id ?? (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);
+
+    return (
+      <div className={["flex flex-col gap-1", fullWidth ? "w-full" : ""].filter(Boolean).join(" ")}>
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="text-sm font-medium text-gray-700 dark:text-gray-300"
+          >
+            {label}
+          </label>
+        )}
+        <div className="relative flex items-center">
+          {leftAdornment && (
+            <span className="absolute left-3 flex items-center text-gray-400 pointer-events-none">
+              {leftAdornment}
+            </span>
+          )}
+          <input
+            ref={ref}
+            id={inputId}
+            className={[
+              "w-full rounded-lg border bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm placeholder:text-gray-400 transition-colors duration-150",
+              "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-0",
+              error
+                ? "border-red-400 focus-visible:ring-red-400"
+                : "border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500",
+              leftAdornment ? "pl-9" : "pl-3",
+              rightAdornment ? "pr-9" : "pr-3",
+              "py-2",
+              className,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            aria-invalid={!!error}
+            aria-describedby={
+              error ? `${inputId}-error` : hint ? `${inputId}-hint` : undefined
+            }
+            {...rest}
+          />
+          {rightAdornment && (
+            <span className="absolute right-3 flex items-center text-gray-400">
+              {rightAdornment}
+            </span>
+          )}
+        </div>
+        {error && (
+          <p id={`${inputId}-error`} className="text-xs text-red-500">
+            {error}
+          </p>
+        )}
+        {!error && hint && (
+          <p id={`${inputId}-hint`} className="text-xs text-gray-400">
+            {hint}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";
+
+export default Input;
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
new file mode 100644
index 0000000..a63a835
--- /dev/null
+++ b/src/components/ui/Modal.tsx
@@ -0,0 +1,117 @@
+import React, { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  /** Width class, e.g. "max-w-md" */
+  maxWidth?: string;
+  /** Whether clicking the backdrop closes the modal */
+  closeOnBackdrop?: boolean;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  open,
+  onClose,
+  title,
+  children,
+  maxWidth = "max-w-md",
+  closeOnBackdrop = true,
+}) => {
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  // Focus trap — focus the dialog when it opens
+  useEffect(() => {
+    if (open) {
+      dialogRef.current?.focus();
+    }
+  }, [open]);
+
+  // Close on Escape
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && open) onClose();
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+
+  // Prevent body scroll while open
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      aria-modal="true"
+      role="dialog"
+      aria-labelledby={title ? "modal-title" : undefined}
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
+        onClick={closeOnBackdrop ? onClose : undefined}
+        aria-hidden="true"
+      />
+
+      {/* Panel */}
+      <div
+        ref={dialogRef}
+        tabIndex={-1}
+        className={[
+          "relative w-full bg-white dark:bg-gray-900 rounded-2xl shadow-xl outline-none",
+          "border border-gray-200 dark:border-gray-700",
+          maxWidth,
+        ].join(" ")}
+      >
+        {/* Header */}
+        {title && (
+          <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 dark:border-gray-800">
+            <h2
+              id="modal-title"
+              className="text-base font-semibold text-gray-900 dark:text-gray-100"
+            >
+              {title}
+            </h2>
+            <button
+              onClick={onClose}
+              className="p-1.5 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+              aria-label="Close"
+            >
+              <svg
+                className="w-4 h-4"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        )}
+
+        {/* Body */}
+        <div className="p-5">{children}</div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default Modal;
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
new file mode 100644
index 0000000..3cd3171
--- /dev/null
+++ b/src/components/ui/Select.tsx
@@ -0,0 +1,112 @@
+import React from "react";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "children"> {
+  options: SelectOption[];
+  label?: string;
+  error?: string;
+  hint?: string;
+  fullWidth?: boolean;
+  placeholder?: string;
+}
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  (
+    {
+      options,
+      label,
+      error,
+      hint,
+      fullWidth = false,
+      placeholder,
+      className = "",
+      id,
+      ...rest
+    },
+    ref
+  ) => {
+    const selectId = id ?? (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);
+
+    return (
+      <div
+        className={["flex flex-col gap-1", fullWidth ? "w-full" : ""]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        {label && (
+          <label
+            htmlFor={selectId}
+            className="text-sm font-medium text-gray-700 dark:text-gray-300"
+          >
+            {label}
+          </label>
+        )}
+        <div className="relative">
+          <select
+            ref={ref}
+            id={selectId}
+            className={[
+              "w-full appearance-none rounded-lg border bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm pr-8 pl-3 py-2 transition-colors duration-150",
+              "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
+              error
+                ? "border-red-400 focus-visible:ring-red-400"
+                : "border-gray-300 dark:border-gray-600 hover:border-gray-400",
+              className,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            aria-invalid={!!error}
+            aria-describedby={
+              error
+                ? `${selectId}-error`
+                : hint
+                ? `${selectId}-hint`
+                : undefined
+            }
+            {...rest}
+          >
+            {placeholder && (
+              <option value="" disabled>
+                {placeholder}
+              </option>
+            )}
+            {options.map((opt) => (
+              <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+          {/* Chevron icon */}
+          <span className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400">
+            <svg className="w-4 h-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path
+                fillRule="evenodd"
+                d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </span>
+        </div>
+        {error && (
+          <p id={`${selectId}-error`} className="text-xs text-red-500">
+            {error}
+          </p>
+        )}
+        {!error && hint && (
+          <p id={`${selectId}-hint`} className="text-xs text-gray-400">
+            {hint}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Select.displayName = "Select";
+
+export default Select;
diff --git a/src/components/ui/Skeleton.tsx b/src/components/ui/Skeleton.tsx
new file mode 100644
index 0000000..bc0196a
--- /dev/null
+++ b/src/components/ui/Skeleton.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Render as a circle (e.g., for avatars) */
+  circle?: boolean;
+  width?: string | number;
+  height?: string | number;
+}
+
+export function Skeleton({ circle = false, width, height, className, style, ...rest }: SkeletonProps) {
+  return (
+    <div
+      role="status"
+      aria-busy="true"
+      aria-label="Loading…"
+      className={cn(
+        "animate-pulse bg-gray-200",
+        circle ? "rounded-full" : "rounded-lg",
+        className
+      )}
+      style={{ width, height, ...style }}
+      {...rest}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Convenience presets
+// ---------------------------------------------------------------------------
+
+export function SkeletonText({
+  lines = 3,
+  className,
+}: {
+  lines?: number;
+  className?: string;
+}) {
+  return (
+    <div className={cn("space-y-2", className)} role="status" aria-label="Loading…">
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton
+          key={i}
+          height={14}
+          className={i === lines - 1 ? "w-4/5" : "w-full"}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function SkeletonCard({ className }: { className?: string }) {
+  return (
+    <div className={cn("rounded-2xl border border-gray-200 bg-white p-6 shadow-sm", className)}>
+      <div className="flex items-center gap-4">
+        <Skeleton circle width={40} height={40} />
+        <div className="flex-1 space-y-2">
+          <Skeleton height={14} width="60%" />
+          <Skeleton height={12} width="40%" />
+        </div>
+      </div>
+      <SkeletonText lines={3} className="mt-4" />
+    </div>
+  );
+}
diff --git a/src/components/ui/Spinner.tsx b/src/components/ui/Spinner.tsx
new file mode 100644
index 0000000..734df89
--- /dev/null
+++ b/src/components/ui/Spinner.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+
+type SpinnerSize = "xs" | "sm" | "md" | "lg";
+
+interface SpinnerProps {
+  size?: SpinnerSize;
+  className?: string;
+  label?: string;
+}
+
+const sizeClasses: Record<SpinnerSize, string> = {
+  xs: "h-3 w-3",
+  sm: "h-4 w-4",
+  md: "h-6 w-6",
+  lg: "h-8 w-8",
+};
+
+export const Spinner: React.FC<SpinnerProps> = ({
+  size = "md",
+  className = "",
+  label = "Loading…",
+}) => {
+  return (
+    <svg
+      role="status"
+      aria-label={label}
+      className={["animate-spin text-current", sizeClasses[size], className]
+        .filter(Boolean)
+        .join(" ")}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+      />
+    </svg>
+  );
+};
+
+export default Spinner;
diff --git a/src/components/ui/Toast.tsx b/src/components/ui/Toast.tsx
new file mode 100644
index 0000000..abee801
--- /dev/null
+++ b/src/components/ui/Toast.tsx
@@ -0,0 +1,167 @@
+import React, { createContext, useCallback, useContext, useReducer } from "react";
+import { cn } from "../../lib/utils";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type ToastVariant = "success" | "error" | "warning" | "info";
+
+export interface ToastItem {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number;
+}
+
+// ---------------------------------------------------------------------------
+// State management
+// ---------------------------------------------------------------------------
+
+type Action =
+  | { type: "ADD"; toast: ToastItem }
+  | { type: "REMOVE"; id: string };
+
+function reducer(state: ToastItem[], action: Action): ToastItem[] {
+  switch (action.type) {
+    case "ADD":
+      return [action.toast, ...state].slice(0, 5); // max 5 toasts
+    case "REMOVE":
+      return state.filter((t) => t.id !== action.id);
+    default:
+      return state;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+interface ToastContextValue {
+  toast: (opts: Omit<ToastItem, "id">) => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Provider
+// ---------------------------------------------------------------------------
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, dispatch] = useReducer(reducer, []);
+
+  const toast = useCallback((opts: Omit<ToastItem, "id">) => {
+    const id = Math.random().toString(36).slice(2);
+    const duration = opts.duration ?? 4000;
+    dispatch({ type: "ADD", toast: { ...opts, id } });
+    if (duration > 0) {
+      setTimeout(() => dispatch({ type: "REMOVE", id }), duration);
+    }
+  }, []);
+
+  const remove = useCallback((id: string) => {
+    dispatch({ type: "REMOVE", id });
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <ToastViewport toasts={toasts} onRemove={remove} />
+    </ToastContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Viewport
+// ---------------------------------------------------------------------------
+
+const variantStyles: Record<ToastVariant, { wrapper: string; icon: React.ReactNode }> = {
+  success: {
+    wrapper: "border-green-200 bg-green-50 text-green-900",
+    icon: (
+      <svg className="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+      </svg>
+    ),
+  },
+  error: {
+    wrapper: "border-red-200 bg-red-50 text-red-900",
+    icon: (
+      <svg className="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    ),
+  },
+  warning: {
+    wrapper: "border-amber-200 bg-amber-50 text-amber-900",
+    icon: (
+      <svg className="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+      </svg>
+    ),
+  },
+  info: {
+    wrapper: "border-blue-200 bg-blue-50 text-blue-900",
+    icon: (
+      <svg className="h-5 w-5 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    ),
+  },
+};
+
+function ToastViewport({
+  toasts,
+  onRemove,
+}: {
+  toasts: ToastItem[];
+  onRemove: (id: string) => void;
+}) {
+  return (
+    <div
+      aria-live="polite"
+      aria-label="Notifications"
+      className="fixed bottom-4 right-4 z-50 flex flex-col gap-2"
+    >
+      {toasts.map((t) => {
+        const v = t.variant ?? "info";
+        const styles = variantStyles[v];
+        return (
+          <div
+            key={t.id}
+            role="alert"
+            className={cn(
+              "flex w-80 items-start gap-3 rounded-xl border p-4 shadow-lg",
+              "animate-in slide-in-from-right-4 fade-in duration-200",
+              styles.wrapper
+            )}
+          >
+            <span className="shrink-0 pt-0.5">{styles.icon}</span>
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium">{t.title}</p>
+              {t.description && (
+                <p className="mt-0.5 text-xs opacity-80">{t.description}</p>
+              )}
+            </div>
+            <button
+              onClick={() => onRemove(t.id)}
+              className="shrink-0 rounded p-0.5 opacity-60 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-current"
+              aria-label="Dismiss"
+            >
+              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/ui/Tooltip.tsx b/src/components/ui/Tooltip.tsx
new file mode 100644
index 0000000..0b76cf6
--- /dev/null
+++ b/src/components/ui/Tooltip.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+
+type TooltipPlacement = "top" | "bottom" | "left" | "right";
+
+interface TooltipProps {
+  content: React.ReactNode;
+  placement?: TooltipPlacement;
+  children: React.ReactElement;
+  className?: string;
+}
+
+const placementClasses: Record<TooltipPlacement, string> = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+  left: "right-full top-1/2 -translate-y-1/2 mr-2",
+  right: "left-full top-1/2 -translate-y-1/2 ml-2",
+};
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  placement = "top",
+  children,
+  className = "",
+}) => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <span
+      className="relative inline-flex"
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+      onFocus={() => setVisible(true)}
+      onBlur={() => setVisible(false)}
+    >
+      {children}
+      {visible && content && (
+        <span
+          role="tooltip"
+          className={[
+            "absolute z-50 pointer-events-none whitespace-nowrap rounded-md bg-gray-900 text-white text-xs px-2 py-1 shadow-lg",
+            placementClasses[placement],
+            className,
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          {content}
+        </span>
+      )}
+    </span>
+  );
+};
+
+export default Tooltip;