diff --git a/src/components/KanbanBoard.tsx b/src/components/KanbanBoard.tsx
new file mode 100644
index 0000000..020910b
--- /dev/null
+++ b/src/components/KanbanBoard.tsx
@@ -0,0 +1,276 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  TouchSensor,
+  closestCorners,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from "@dnd-kit/core";
+import { restrictToWindowEdges } from "@dnd-kit/modifiers";
+import { GitBranch, GripVertical, NotebookPen } from "lucide-react";
+import type { ProjectStatus } from "@prisma/client";
+import { CiBadge } from "@/components/CiBadge";
+import { STATUS_META, STATUS_ORDER, accentOf } from "@/lib/status";
+import { cn, truncate } from "@/lib/utils";
+import type { ProjectListItem } from "@/types";
+
+/**
+ * Statusspalten mit Ziehen und Ablegen.
+ *
+ * Der Statuswechsel wird sofort angezeigt und erst danach gespeichert;
+ * scheitert das Speichern, springt die Karte zurueck. Die Reihenfolge
+ * innerhalb einer Spalte ist nicht frei sortierbar – sie folgt der im Board
+ * gewaehlten Sortierung, sonst muesste eine Position mitgespeichert werden.
+ */
+export function KanbanBoard({
+  projects,
+  showArchived,
+}: {
+  projects: ProjectListItem[];
+  showArchived: boolean;
+}) {
+  const router = useRouter();
+  const [overrides, setOverrides] = useState<Record<string, ProjectStatus>>({});
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  // Eine Verschiebung, die der Server bestaetigt hat, braucht keine
+  // oertliche Ausnahme mehr.
+  useEffect(() => {
+    setOverrides((current) => {
+      const next: Record<string, ProjectStatus> = {};
+      for (const [id, status] of Object.entries(current)) {
+        const project = projects.find((entry) => entry.id === id);
+        if (project && project.status !== status) next[id] = status;
+      }
+      return Object.keys(next).length === Object.keys(current).length ? current : next;
+    });
+  }, [projects]);
+
+  const sensors = useSensors(
+    // Erst ab ein paar Pixeln Bewegung ziehen – sonst liesse sich die Karte
+    // nicht mehr anklicken.
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(TouchSensor, { activationConstraint: { delay: 180, tolerance: 8 } }),
+  );
+
+  const statusOf = (project: ProjectListItem) => overrides[project.id] ?? project.status;
+
+  const columns = useMemo(() => {
+    const visible = STATUS_ORDER.filter(
+      (status) => showArchived || status !== "ARCHIVED",
+    );
+    return visible.map((status) => ({
+      status,
+      items: projects.filter((project) => statusOf(project) === status),
+    }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projects, overrides, showArchived]);
+
+  const active = activeId ? projects.find((project) => project.id === activeId) : null;
+
+  function onDragStart(event: DragStartEvent) {
+    setActiveId(String(event.active.id));
+  }
+
+  async function onDragEnd(event: DragEndEvent) {
+    setActiveId(null);
+
+    const id = String(event.active.id);
+    const target = event.over?.id ? (String(event.over.id) as ProjectStatus) : null;
+    if (!target) return;
+
+    const project = projects.find((entry) => entry.id === id);
+    if (!project) return;
+
+    const previous = statusOf(project);
+    if (previous === target) return;
+
+    setOverrides((current) => ({ ...current, [id]: target }));
+
+    try {
+      const response = await fetch(`/api/projects/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: target }),
+      });
+      if (!response.ok) throw new Error("failed");
+      router.refresh();
+    } catch {
+      setOverrides((current) => {
+        const next = { ...current };
+        delete next[id];
+        return next;
+      });
+    }
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCorners}
+      modifiers={[restrictToWindowEdges]}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      onDragCancel={() => setActiveId(null)}
+    >
+      <div className="flex gap-3 overflow-x-auto pb-3">
+        {columns.map((column) => (
+          <Column key={column.status} status={column.status} count={column.items.length}>
+            {column.items.map((project) => (
+              <KanbanCard key={project.id} project={project} />
+            ))}
+          </Column>
+        ))}
+      </div>
+
+      {/* Die mitgezogene Karte haengt am Cursor, nicht in der Spalte. */}
+      <DragOverlay dropAnimation={{ duration: 180, easing: "cubic-bezier(0.22, 1, 0.36, 1)" }}>
+        {active ? <KanbanCard project={active} overlay /> : null}
+      </DragOverlay>
+    </DndContext>
+  );
+}
+
+function Column({
+  status,
+  count,
+  children,
+}: {
+  status: ProjectStatus;
+  count: number;
+  children: React.ReactNode;
+}) {
+  const meta = STATUS_META[status];
+  const { setNodeRef, isOver } = useDroppable({ id: status });
+
+  return (
+    <section
+      ref={setNodeRef}
+      // Eindeutiger Anker fuer Tests und Automatisierung.
+      data-column={status}
+      className={cn(
+        "flex w-[17rem] shrink-0 flex-col rounded-2xl border border-white/6 bg-white/2 transition-colors",
+        isOver && "border-violet-400/40 bg-violet-500/6",
+      )}
+    >
+      <header className="flex items-center gap-2 px-3 py-2.5">
+        <span
+          className="accent-dot h-2 w-2 rounded-full"
+          style={{ backgroundColor: meta.color, color: meta.color }}
+        />
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-slate-300">
+          {meta.label}
+        </h3>
+        <span className="ml-auto rounded-full bg-white/6 px-1.5 py-0.5 text-[10px] tabular-nums text-slate-400">
+          {count}
+        </span>
+      </header>
+
+      <div className="flex min-h-[7rem] flex-1 flex-col gap-2 px-2 pb-2">
+        {children}
+        {count === 0 ? (
+          <p
+            className={cn(
+              "rounded-xl border border-dashed border-white/8 px-3 py-6 text-center text-[11px] text-slate-600 transition-colors",
+              isOver && "border-violet-400/40 text-violet-200",
+            )}
+          >
+            {isOver ? "Hier ablegen" : "leer"}
+          </p>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+function KanbanCard({
+  project,
+  overlay = false,
+}: {
+  project: ProjectListItem;
+  overlay?: boolean;
+}) {
+  const accent = accentOf(project.accent);
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({ id: project.id });
+
+  return (
+    <article
+      ref={overlay ? undefined : setNodeRef}
+      className={cn(
+        "popover group relative overflow-hidden p-3",
+        // Das Original bleibt als blasser Platzhalter stehen.
+        isDragging && !overlay && "opacity-30",
+        overlay && "rotate-2 cursor-grabbing shadow-2xl ring-1 ring-violet-400/40",
+      )}
+      style={
+        {
+          "--accent-from": accent.from,
+          "--accent-to": accent.to,
+        } as React.CSSProperties
+      }
+    >
+      <span className="accent-bar absolute inset-x-0 top-0 h-[2px] opacity-70" aria-hidden="true" />
+
+      <div className="flex items-start gap-2">
+        {/* Nur der Griff zieht – so bleibt der Titel ein normaler Link. */}
+        <button
+          type="button"
+          className="mt-0.5 shrink-0 cursor-grab touch-none rounded p-0.5 text-slate-600 transition-colors hover:text-slate-300 active:cursor-grabbing"
+          aria-label={`${project.name} verschieben`}
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="h-3.5 w-3.5" />
+        </button>
+
+        <div className="min-w-0 flex-1">
+          <Link
+            href={`/projects/${project.id}`}
+            className="block truncate text-sm font-medium text-slate-100 hover:text-violet-200"
+          >
+            {project.name}
+          </Link>
+          {project.summary ? (
+            <p className="mt-0.5 line-clamp-2 text-[11px] leading-snug text-slate-500">
+              {truncate(project.summary, 90)}
+            </p>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="mt-2.5 h-1 w-full overflow-hidden rounded-full bg-white/6">
+        <div
+          className="accent-bar h-full rounded-full"
+          style={{ width: `${Math.max(2, project.progress)}%` }}
+        />
+      </div>
+
+      <div className="mt-2 flex flex-wrap items-center gap-x-2.5 gap-y-1 text-[10px] text-slate-500">
+        <CiBadge state={project.snapshot?.ciState} compact />
+        {project.snapshot?.defaultBranch ? (
+          <span className="inline-flex items-center gap-1 font-mono">
+            <GitBranch className="h-3 w-3" />
+            {project.snapshot.defaultBranch}
+          </span>
+        ) : null}
+        {project._count.notes > 0 ? (
+          <span className="inline-flex items-center gap-1">
+            <NotebookPen className="h-3 w-3" />
+            {project._count.notes}
+          </span>
+        ) : null}
+        <span className="ml-auto tabular-nums">{project.progress}%</span>
+      </div>
+    </article>
+  );
+}