diff --git a/messages/en.json b/messages/en.json
index 421c344f4..f42fd578d 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -22,6 +22,7 @@
     "resume": "Resume",
     "personality": "Personality",
     "leaderboard": "Leaderboard",
+    "kanban": "Kanban Board",
     "home": "Home",
     "features": "Features",
     "openMenu": "Open navigation menu",
diff --git a/messages/es.json b/messages/es.json
index d2092f0a1..6119bd0ee 100644
--- a/messages/es.json
+++ b/messages/es.json
@@ -22,6 +22,7 @@
     "resume": "CV",
     "personality": "Personalidad",
     "leaderboard": "Clasificación",
+    "kanban": "Tablero Kanban",
     "home": "Inicio",
     "features": "Funciones",
     "openMenu": "Abrir menú de navegación",
diff --git a/src/app/api/kanban/[projectId]/route.ts b/src/app/api/kanban/[projectId]/route.ts
new file mode 100644
index 000000000..1960b495c
--- /dev/null
+++ b/src/app/api/kanban/[projectId]/route.ts
@@ -0,0 +1,83 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { supabaseAdmin } from "@/lib/supabase";
+import { resolveAppUser } from "@/lib/resolve-user";
+
+export const dynamic = "force-dynamic";
+
+interface RouteParams {
+  params: Promise<{
+    projectId: string;
+  }>;
+}
+
+export async function GET(req: Request, props: RouteParams) {
+  const { projectId } = await props.params;
+  const session = await getServerSession(authOptions);
+  if (!session?.githubId) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const user = await resolveAppUser(session.githubId, session.githubLogin);
+  if (!user) return Response.json({ error: "User not found" }, { status: 404 });
+
+  // Verify project belongs to user
+  const { data: project, error: projectError } = await supabaseAdmin
+    .from("projects")
+    .select("*")
+    .eq("id", projectId)
+    .eq("user_id", user.id)
+    .single();
+
+  if (projectError || !project) {
+    return Response.json({ error: "Project not found" }, { status: 404 });
+  }
+
+  // Get stages
+  const { data: stages, error: stagesError } = await supabaseAdmin
+    .from("workflow_stages")
+    .select("*")
+    .eq("project_id", projectId)
+    .order("position", { ascending: true });
+
+  if (stagesError) {
+    return Response.json({ error: stagesError.message }, { status: 500 });
+  }
+
+  // Get tasks
+  const { data: tasks, error: tasksError } = await supabaseAdmin
+    .from("tasks")
+    .select("*")
+    .eq("project_id", projectId)
+    .order("position", { ascending: true });
+
+  if (tasksError) {
+    return Response.json({ error: tasksError.message }, { status: 500 });
+  }
+
+  return Response.json({ project, stages, tasks });
+}
+
+export async function DELETE(req: Request, props: RouteParams) {
+  const { projectId } = await props.params;
+  const session = await getServerSession(authOptions);
+  if (!session?.githubId) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const user = await resolveAppUser(session.githubId, session.githubLogin);
+  if (!user) return Response.json({ error: "User not found" }, { status: 404 });
+
+  // Delete project (cascade will delete stages and tasks)
+  const { error } = await supabaseAdmin
+    .from("projects")
+    .delete()
+    .eq("id", projectId)
+    .eq("user_id", user.id);
+
+  if (error) {
+    return Response.json({ error: error.message }, { status: 500 });
+  }
+
+  return Response.json({ success: true });
+}
diff --git a/src/app/api/kanban/[projectId]/stages/route.ts b/src/app/api/kanban/[projectId]/stages/route.ts
new file mode 100644
index 000000000..63f3b1b70
--- /dev/null
+++ b/src/app/api/kanban/[projectId]/stages/route.ts
@@ -0,0 +1,133 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { supabaseAdmin } from "@/lib/supabase";
+import { resolveAppUser } from "@/lib/resolve-user";
+
+export const dynamic = "force-dynamic";
+
+interface RouteParams {
+  params: Promise<{
+    projectId: string;
+  }>;
+}
+
+export async function POST(req: Request, props: RouteParams) {
+  const { projectId } = await props.params;
+  const session = await getServerSession(authOptions);
+  if (!session?.githubId) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const user = await resolveAppUser(session.githubId, session.githubLogin);
+  if (!user) return Response.json({ error: "User not found" }, { status: 404 });
+
+  // Verify project belongs to user
+  const { data: project, error: projectError } = await supabaseAdmin
+    .from("projects")
+    .select("*")
+    .eq("id", projectId)
+    .eq("user_id", user.id)
+    .single();
+
+  if (projectError || !project) {
+    return Response.json({ error: "Project not found" }, { status: 404 });
+  }
+
+  let body;
+  try {
+    body = await req.json();
+  } catch {
+    return Response.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  const { name, color, position } = body;
+  if (!name) {
+    return Response.json({ error: "Stage name is required" }, { status: 400 });
+  }
+  if (typeof position !== "number") {
+    return Response.json({ error: "Position must be a number" }, { status: 400 });
+  }
+
+  const { data: stage, error: stageError } = await supabaseAdmin
+    .from("workflow_stages")
+    .insert({
+      project_id: projectId,
+      name,
+      color: color || "#6366f1",
+      position,
+    })
+    .select("*")
+    .single();
+
+  if (stageError) {
+    return Response.json({ error: stageError.message }, { status: 500 });
+  }
+
+  return Response.json({ stage }, { status: 201 });
+}
+
+export async function PUT(req: Request, props: RouteParams) {
+  const { projectId } = await props.params;
+  const session = await getServerSession(authOptions);
+  if (!session?.githubId) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const user = await resolveAppUser(session.githubId, session.githubLogin);
+  if (!user) return Response.json({ error: "User not found" }, { status: 404 });
+
+  // Verify project belongs to user
+  const { data: project, error: projectError } = await supabaseAdmin
+    .from("projects")
+    .select("*")
+    .eq("id", projectId)
+    .eq("user_id", user.id)
+    .single();
+
+  if (projectError || !project) {
+    return Response.json({ error: "Project not found" }, { status: 404 });
+  }
+
+  let body;
+  try {
+    body = await req.json();
+  } catch {
+    return Response.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  const { stages, deleteStageId } = body;
+
+  if (deleteStageId) {
+    // Delete the stage
+    const { error: deleteError } = await supabaseAdmin
+      .from("workflow_stages")
+      .delete()
+      .eq("id", deleteStageId)
+      .eq("project_id", projectId);
+
+    if (deleteError) {
+      return Response.json({ error: deleteError.message }, { status: 500 });
+    }
+  }
+
+  if (stages && Array.isArray(stages)) {
+    // Bulk upsert/update positions and attributes of stages
+    const payload = stages.map((s) => ({
+      id: s.id,
+      project_id: projectId,
+      name: s.name,
+      color: s.color || "#6366f1",
+      position: s.position,
+    }));
+
+    const { error: upsertError } = await supabaseAdmin
+      .from("workflow_stages")
+      .upsert(payload, { onConflict: "id" });
+
+    if (upsertError) {
+      return Response.json({ error: upsertError.message }, { status: 500 });
+    }
+  }
+
+  return Response.json({ success: true });
+}
diff --git a/src/app/api/kanban/[projectId]/tasks/route.ts b/src/app/api/kanban/[projectId]/tasks/route.ts
new file mode 100644
index 000000000..94283bb59
--- /dev/null
+++ b/src/app/api/kanban/[projectId]/tasks/route.ts
@@ -0,0 +1,136 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { supabaseAdmin } from "@/lib/supabase";
+import { resolveAppUser } from "@/lib/resolve-user";
+
+export const dynamic = "force-dynamic";
+
+interface RouteParams {
+  params: Promise<{
+    projectId: string;
+  }>;
+}
+
+export async function POST(req: Request, props: RouteParams) {
+  const { projectId } = await props.params;
+  const session = await getServerSession(authOptions);
+  if (!session?.githubId) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const user = await resolveAppUser(session.githubId, session.githubLogin);
+  if (!user) return Response.json({ error: "User not found" }, { status: 404 });
+
+  // Verify project belongs to user
+  const { data: project, error: projectError } = await supabaseAdmin
+    .from("projects")
+    .select("*")
+    .eq("id", projectId)
+    .eq("user_id", user.id)
+    .single();
+
+  if (projectError || !project) {
+    return Response.json({ error: "Project not found" }, { status: 404 });
+  }
+
+  let body;
+  try {
+    body = await req.json();
+  } catch {
+    return Response.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  const { title, description, stageId, position } = body;
+  if (!title) {
+    return Response.json({ error: "Task title is required" }, { status: 400 });
+  }
+  if (!stageId) {
+    return Response.json({ error: "Stage ID is required" }, { status: 400 });
+  }
+
+  const { data: task, error: taskError } = await supabaseAdmin
+    .from("tasks")
+    .insert({
+      project_id: projectId,
+      stage_id: stageId,
+      title,
+      description: description || "",
+      position: typeof position === "number" ? position : 0,
+    })
+    .select("*")
+    .single();
+
+  if (taskError) {
+    return Response.json({ error: taskError.message }, { status: 500 });
+  }
+
+  return Response.json({ task }, { status: 201 });
+}
+
+export async function PUT(req: Request, props: RouteParams) {
+  const { projectId } = await props.params;
+  const session = await getServerSession(authOptions);
+  if (!session?.githubId) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const user = await resolveAppUser(session.githubId, session.githubLogin);
+  if (!user) return Response.json({ error: "User not found" }, { status: 404 });
+
+  // Verify project belongs to user
+  const { data: project, error: projectError } = await supabaseAdmin
+    .from("projects")
+    .select("*")
+    .eq("id", projectId)
+    .eq("user_id", user.id)
+    .single();
+
+  if (projectError || !project) {
+    return Response.json({ error: "Project not found" }, { status: 404 });
+  }
+
+  let body;
+  try {
+    body = await req.json();
+  } catch {
+    return Response.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  const { tasks, deleteTaskId } = body;
+
+  if (deleteTaskId) {
+    // Delete the task
+    const { error: deleteError } = await supabaseAdmin
+      .from("tasks")
+      .delete()
+      .eq("id", deleteTaskId)
+      .eq("project_id", projectId);
+
+    if (deleteError) {
+      return Response.json({ error: deleteError.message }, { status: 500 });
+    }
+  }
+
+  if (tasks && Array.isArray(tasks)) {
+    // Bulk upsert/update positions and attributes of tasks
+    const payload = tasks.map((t) => ({
+      id: t.id,
+      project_id: projectId,
+      stage_id: t.stage_id,
+      title: t.title,
+      description: t.description || "",
+      position: t.position,
+      updated_at: new Date().toISOString(),
+    }));
+
+    const { error: upsertError } = await supabaseAdmin
+      .from("tasks")
+      .upsert(payload, { onConflict: "id" });
+
+    if (upsertError) {
+      return Response.json({ error: upsertError.message }, { status: 500 });
+    }
+  }
+
+  return Response.json({ success: true });
+}
diff --git a/src/app/api/kanban/route.ts b/src/app/api/kanban/route.ts
new file mode 100644
index 000000000..c1f802af1
--- /dev/null
+++ b/src/app/api/kanban/route.ts
@@ -0,0 +1,82 @@
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth";
+import { supabaseAdmin } from "@/lib/supabase";
+import { resolveAppUser } from "@/lib/resolve-user";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  const session = await getServerSession(authOptions);
+  if (!session?.githubId) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const user = await resolveAppUser(session.githubId, session.githubLogin);
+  if (!user) return Response.json({ error: "User not found" }, { status: 404 });
+
+  const { data: projects, error } = await supabaseAdmin
+    .from("projects")
+    .select("*")
+    .eq("user_id", user.id)
+    .order("created_at", { ascending: false });
+
+  if (error) {
+    return Response.json({ error: error.message }, { status: 500 });
+  }
+
+  return Response.json({ projects });
+}
+
+export async function POST(req: Request) {
+  const session = await getServerSession(authOptions);
+  if (!session?.githubId) {
+    return Response.json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  const user = await resolveAppUser(session.githubId, session.githubLogin);
+  if (!user) return Response.json({ error: "User not found" }, { status: 404 });
+
+  let body;
+  try {
+    body = await req.json();
+  } catch {
+    return Response.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  const name = body.name?.trim();
+  if (!name) {
+    return Response.json({ error: "Project name is required" }, { status: 400 });
+  }
+
+  const { data: project, error: projectError } = await supabaseAdmin
+    .from("projects")
+    .insert({
+      user_id: user.id,
+      name,
+    })
+    .select("*")
+    .single();
+
+  if (projectError || !project) {
+    return Response.json({ error: projectError?.message ?? "Failed to create project" }, { status: 500 });
+  }
+
+  // Seed default stages: "To Do", "In Progress", "Done"
+  const defaultStages = [
+    { name: "To Do", position: 0, color: "#6366f1", project_id: project.id },
+    { name: "In Progress", position: 1, color: "#f59e0b", project_id: project.id },
+    { name: "Done", position: 2, color: "#10b981", project_id: project.id },
+  ];
+
+  const { error: stagesError } = await supabaseAdmin
+    .from("workflow_stages")
+    .insert(defaultStages);
+
+  if (stagesError) {
+    // Clean up created project if stage seeding fails
+    await supabaseAdmin.from("projects").delete().eq("id", project.id);
+    return Response.json({ error: "Failed to seed default stages" }, { status: 500 });
+  }
+
+  return Response.json({ project }, { status: 201 });
+}
diff --git a/src/app/dashboard/kanban/[projectId]/page.tsx b/src/app/dashboard/kanban/[projectId]/page.tsx
new file mode 100644
index 000000000..fed6decb2
--- /dev/null
+++ b/src/app/dashboard/kanban/[projectId]/page.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { use, useEffect, useState } from "react";
+import Link from "next/link";
+import { ArrowLeft, FolderKanban } from "lucide-react";
+import KanbanBoard from "@/components/kanban/KanbanBoard";
+
+interface ProjectPageProps {
+  params: Promise<{
+    projectId: string;
+  }>;
+}
+
+export default function KanbanProjectPage({ params }: ProjectPageProps) {
+  const { projectId } = use(params);
+  const [projectName, setProjectName] = useState("");
+
+  useEffect(() => {
+    fetch(`/api/kanban/${projectId}`)
+      .then((res) => {
+        if (res.ok) return res.json();
+        throw new Error();
+      })
+      .then((data) => {
+        setProjectName(data.project?.name ?? "");
+      })
+      .catch(() => {});
+  }, [projectId]);
+
+  return (
+    <main className="min-h-screen bg-[var(--background)] px-4 py-8 text-[var(--foreground)] transition-colors sm:px-6 lg:px-8 max-w-[1600px] mx-auto space-y-6">
+      {/* Back button and title */}
+      <div className="flex items-center gap-4">
+        <Link
+          href="/dashboard/kanban"
+          className="rounded-lg border border-[var(--border)] bg-[var(--card)] p-2 text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:border-[var(--accent)] transition-all shadow-sm"
+        >
+          <ArrowLeft size={18} />
+        </Link>
+        <div className="space-y-1">
+          <div className="flex items-center gap-2">
+            <FolderKanban className="h-5 w-5 text-[var(--accent)]" />
+            <h1 className="text-xl font-bold tracking-tight">
+              {projectName || "Loading project..."}
+            </h1>
+          </div>
+          <p className="text-xs text-[var(--muted-foreground)]">
+            Kanban Workspace
+          </p>
+        </div>
+      </div>
+
+      {/* Kanban Board Container */}
+      <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+        <KanbanBoard projectId={projectId} />
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/dashboard/kanban/page.tsx b/src/app/dashboard/kanban/page.tsx
new file mode 100644
index 000000000..342203743
--- /dev/null
+++ b/src/app/dashboard/kanban/page.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { FolderKanban, Plus, Trash2, ArrowRight } from "lucide-react";
+
+interface Project {
+  id: string;
+  name: string;
+  created_at: string;
+}
+
+export default function KanbanLandingPage() {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [newProjectName, setNewProjectName] = useState("");
+  const [creating, setCreating] = useState(false);
+
+  const fetchProjects = async () => {
+    try {
+      const res = await fetch("/api/kanban");
+      if (!res.ok) throw new Error("Failed to load projects");
+      const data = await res.json();
+      setProjects(data.projects || []);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchProjects();
+  }, []);
+
+  const handleCreateProject = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const name = newProjectName.trim();
+    if (!name) return;
+
+    setCreating(true);
+    try {
+      const res = await fetch("/api/kanban", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name }),
+      });
+      if (!res.ok) throw new Error("Failed to create project");
+      setNewProjectName("");
+      await fetchProjects();
+    } catch (err: any) {
+      alert(err.message);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleDeleteProject = async (id: string, e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!confirm("Are you sure you want to delete this project? This will permanently delete all workflow columns and tasks inside it.")) return;
+
+    try {
+      const res = await fetch(`/api/kanban/${id}`, {
+        method: "DELETE",
+      });
+      if (!res.ok) throw new Error("Failed to delete project");
+      await fetchProjects();
+    } catch (err: any) {
+      alert(err.message);
+    }
+  };
+
+  return (
+    <main className="min-h-screen bg-[var(--background)] px-4 py-8 text-[var(--foreground)] transition-colors sm:px-6 lg:px-8 max-w-[1200px] mx-auto space-y-8">
+      {/* Title */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-3">
+          <FolderKanban className="h-8 w-8 text-[var(--accent)]" />
+          <h1 className="text-3xl font-extrabold tracking-tight">Kanban Boards</h1>
+        </div>
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Manage your developer tasks and project stages in custom workspaces.
+        </p>
+      </div>
+
+      {/* Grid of Projects */}
+      <div className="grid md:grid-cols-3 gap-6 items-start">
+        {/* Create Project Card */}
+        <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm space-y-4">
+          <h2 className="text-base font-bold text-[var(--card-foreground)]">New Project</h2>
+          <form onSubmit={handleCreateProject} className="space-y-3">
+            <input
+              type="text"
+              placeholder="Project name..."
+              value={newProjectName}
+              onChange={(e) => setNewProjectName(e.target.value)}
+              className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] focus:border-[var(--accent)] focus:outline-none"
+              required
+            />
+            <button
+              type="submit"
+              disabled={creating}
+              className="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+            >
+              <Plus size={16} />
+              {creating ? "Creating..." : "Create Project"}
+            </button>
+          </form>
+        </div>
+
+        {/* Existing Projects List */}
+        <div className="md:col-span-2 space-y-4">
+          {loading ? (
+            <div className="flex h-32 items-center justify-center">
+              <div className="h-6 w-6 animate-spin rounded-full border-2 border-[var(--accent)] border-t-transparent" />
+            </div>
+          ) : error ? (
+            <div className="rounded-lg border border-red-500/30 bg-red-500/5 p-4 text-sm text-red-500">
+              {error}
+            </div>
+          ) : projects.length === 0 ? (
+            <div className="rounded-xl border border-dashed border-[var(--border)] p-12 text-center text-[var(--muted-foreground)]">
+              No projects created yet. Use the card to get started!
+            </div>
+          ) : (
+            <div className="grid sm:grid-cols-2 gap-4">
+              {projects.map((project) => (
+                <Link
+                  key={project.id}
+                  href={`/dashboard/kanban/${project.id}`}
+                  className="group relative flex flex-col justify-between rounded-xl border border-[var(--border)] bg-[var(--card)] p-5 shadow-sm transition-all hover:border-[var(--accent)] hover:shadow-md"
+                >
+                  <div className="space-y-2">
+                    <h3 className="text-base font-bold text-[var(--card-foreground)] group-hover:text-[var(--accent)] transition-colors">
+                      {project.name}
+                    </h3>
+                    <p className="text-xs text-[var(--muted-foreground)]">
+                      Created on {new Date(project.created_at).toLocaleDateString()}
+                    </p>
+                  </div>
+
+                  <div className="flex items-center justify-between mt-6 border-t border-[var(--border)] pt-3">
+                    <button
+                      onClick={(e) => handleDeleteProject(project.id, e)}
+                      className="rounded p-1 text-[var(--muted-foreground)] hover:bg-red-500/10 hover:text-red-500 transition-colors"
+                      title="Delete project"
+                    >
+                      <Trash2 size={15} />
+                    </button>
+                    <span className="inline-flex items-center gap-1 text-xs font-semibold text-[var(--accent)]">
+                      Open Board <ArrowRight size={14} className="transition-transform group-hover:translate-x-0.5" />
+                    </span>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/components/AppNavbar.tsx b/src/components/AppNavbar.tsx
index 24d38a914..d6034fe3b 100644
--- a/src/components/AppNavbar.tsx
+++ b/src/components/AppNavbar.tsx
@@ -62,6 +62,7 @@ export default function AppNavbar() {
     if (isAuthenticated) {
       return [
         { href: "/dashboard", label: t("overview") },
+        { href: "/dashboard/kanban", label: t("kanban") },
         { href: "/dashboard/career-intelligence", label: t("resume") },
         { href: "/dashboard/personality", label: t("personality") },
         { href: "/leaderboard", label: t("leaderboard") },
diff --git a/src/components/kanban/KanbanBoard.tsx b/src/components/kanban/KanbanBoard.tsx
new file mode 100644
index 000000000..cc580c3a9
--- /dev/null
+++ b/src/components/kanban/KanbanBoard.tsx
@@ -0,0 +1,514 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  DndContext,
+  useSensor,
+  useSensors,
+  PointerSensor,
+  DragStartEvent,
+  DragOverEvent,
+  DragEndEvent,
+  DragOverlay,
+  defaultDropAnimationSideEffects,
+} from "@dnd-kit/core";
+import { SortableContext, horizontalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
+import { Plus, Settings, Sparkles } from "lucide-react";
+import KanbanColumn from "./KanbanColumn";
+import StageSettingsModal from "./StageSettingsModal";
+import KanbanTaskCard from "./KanbanTaskCard";
+
+interface Stage {
+  id: string;
+  name: string;
+  color: string;
+  position: number;
+}
+
+interface Task {
+  id: string;
+  project_id: string;
+  stage_id: string;
+  title: string;
+  description: string;
+  position: number;
+}
+
+interface KanbanBoardProps {
+  projectId: string;
+}
+
+export default function KanbanBoard({ projectId }: KanbanBoardProps) {
+  const [stages, setStages] = useState<Stage[]>([]);
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Modals / forms state
+  const [showStageSettings, setShowStageSettings] = useState(false);
+  const [showTaskForm, setShowTaskForm] = useState(false);
+  const [taskFormStageId, setTaskFormStageId] = useState<string | null>(null);
+  const [taskFormTask, setTaskFormTask] = useState<Task | null>(null);
+  const [taskTitle, setTaskTitle] = useState("");
+  const [taskDesc, setTaskDesc] = useState("");
+
+  // Drag overlays
+  const [activeColumn, setActiveColumn] = useState<Stage | null>(null);
+  const [activeTask, setActiveTask] = useState<Task | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  );
+
+  const fetchData = async () => {
+    try {
+      const res = await fetch(`/api/kanban/${projectId}`);
+      if (!res.ok) throw new Error("Failed to load project details");
+      const data = await res.json();
+      setStages(data.stages || []);
+      setTasks(data.tasks || []);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [projectId]);
+
+  const handleSaveStages = async (updatedStages: Stage[], deleteStageId?: string) => {
+    try {
+      const res = await fetch(`/api/kanban/${projectId}/stages`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ stages: updatedStages, deleteStageId }),
+      });
+      if (!res.ok) throw new Error("Failed to save stages configuration");
+      await fetchData();
+    } catch (err: any) {
+      alert(err.message);
+    }
+  };
+
+  const handleSaveTask = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!taskTitle.trim()) return;
+
+    try {
+      if (taskFormTask) {
+        // Edit existing task
+        const updatedTasks = tasks.map((t) =>
+          t.id === taskFormTask.id ? { ...t, title: taskTitle, description: taskDesc } : t
+        );
+        const res = await fetch(`/api/kanban/${projectId}/tasks`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ tasks: updatedTasks }),
+        });
+        if (!res.ok) throw new Error("Failed to update task");
+      } else {
+        // Create new task
+        const stageId = taskFormStageId!;
+        const stageTasks = tasks.filter((t) => t.stage_id === stageId);
+        const res = await fetch(`/api/kanban/${projectId}/tasks`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            title: taskTitle,
+            description: taskDesc,
+            stageId,
+            position: stageTasks.length,
+          }),
+        });
+        if (!res.ok) throw new Error("Failed to create task");
+      }
+      setTaskTitle("");
+      setTaskDesc("");
+      setShowTaskForm(false);
+      setTaskFormTask(null);
+      await fetchData();
+    } catch (err: any) {
+      alert(err.message);
+    }
+  };
+
+  const handleDeleteTask = async (taskId: string) => {
+    if (!confirm("Are you sure you want to delete this task?")) return;
+    try {
+      const res = await fetch(`/api/kanban/${projectId}/tasks`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ deleteTaskId: taskId }),
+      });
+      if (!res.ok) throw new Error("Failed to delete task");
+      await fetchData();
+    } catch (err: any) {
+      alert(err.message);
+    }
+  };
+
+  // Drag and Drop Handlers
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    const activeId = active.id.toString();
+
+    // Check if dragging a column
+    const column = stages.find((s) => s.id === activeId);
+    if (column) {
+      setActiveColumn(column);
+      return;
+    }
+
+    // Otherwise dragging a task
+    const task = tasks.find((t) => t.id === activeId);
+    if (task) {
+      setActiveTask(task);
+    }
+  };
+
+  const handleDragOver = (event: DragOverEvent) => {
+    const { active, over } = event;
+    if (!over) return;
+
+    const activeId = active.id.toString();
+    const overId = over.id.toString();
+
+    if (activeId === overId) return;
+
+    // Check if we are dragging a task
+    const isActiveTask = tasks.some((t) => t.id === activeId);
+    if (!isActiveTask) return;
+
+    // Determine target column and position
+    let targetStageId = overId;
+    const isOverTask = tasks.some((t) => t.id === overId);
+
+    if (isOverTask) {
+      const overTask = tasks.find((t) => t.id === overId);
+      targetStageId = overTask!.stage_id;
+    } else {
+      const overColumn = stages.some((s) => s.id === overId);
+      if (!overColumn) return;
+    }
+
+    // Move task in local state visually for snappy feedback
+    setTasks((prevTasks) => {
+      const activeIdx = prevTasks.findIndex((t) => t.id === activeId);
+      const activeTaskItem = prevTasks[activeIdx];
+
+      if (activeTaskItem.stage_id !== targetStageId) {
+        // Change stage
+        const updated = [...prevTasks];
+        updated[activeIdx] = { ...activeTaskItem, stage_id: targetStageId };
+        return updated;
+      }
+
+      return prevTasks;
+    });
+  };
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveColumn(null);
+    setActiveTask(null);
+
+    if (!over) return;
+
+    const activeId = active.id.toString();
+    const overId = over.id.toString();
+
+    // 1. Column reordering
+    if (activeColumn) {
+      if (activeId !== overId) {
+        const oldIndex = stages.findIndex((s) => s.id === activeId);
+        const newIndex = stages.findIndex((s) => s.id === overId);
+
+        const reorderedStages = arrayMove(stages, oldIndex, newIndex).map((s, idx) => ({
+          ...s,
+          position: idx,
+        }));
+
+        setStages(reorderedStages);
+        await handleSaveStages(reorderedStages);
+      }
+      return;
+    }
+
+    // 2. Task reordering or moving
+    if (activeTask) {
+      const activeIdx = tasks.findIndex((t) => t.id === activeId);
+      const activeTaskItem = tasks[activeIdx];
+
+      let targetStageId = overId;
+      const isOverTask = tasks.some((t) => t.id === overId);
+
+      if (isOverTask) {
+        const overTask = tasks.find((t) => t.id === overId);
+        targetStageId = overTask!.stage_id;
+      }
+
+      // Re-order active stage tasks
+      let updatedTasks = [...tasks];
+
+      if (activeTaskItem.stage_id !== targetStageId) {
+        // Move task between columns
+        updatedTasks[activeIdx] = { ...activeTaskItem, stage_id: targetStageId };
+      }
+
+      // Recalculate positions for all stages affected
+      const finalTasks = updatedTasks.map((t) => t); // Clone
+
+      // Re-index positions within each column
+      stages.forEach((stage) => {
+        const stageTasks = finalTasks
+          .filter((t) => t.stage_id === stage.id)
+          .sort((a, b) => a.position - b.position);
+
+        // If the task was moved or reordered, make sure it matches the drop target position
+        if (stage.id === targetStageId) {
+          const activeIndexInStage = stageTasks.findIndex((t) => t.id === activeId);
+          if (activeIndexInStage !== -1) {
+            const overIndexInStage = stageTasks.findIndex((t) => t.id === overId);
+            if (overIndexInStage !== -1 && activeIndexInStage !== overIndexInStage) {
+              const movedTasks = arrayMove(stageTasks, activeIndexInStage, overIndexInStage);
+              movedTasks.forEach((t, idx) => {
+                t.position = idx;
+              });
+            } else {
+              stageTasks.forEach((t, idx) => {
+                t.position = idx;
+              });
+            }
+          } else {
+            stageTasks.forEach((t, idx) => {
+              t.position = idx;
+            });
+          }
+        } else {
+          stageTasks.forEach((t, idx) => {
+            t.position = idx;
+          });
+        }
+      });
+
+      setTasks(finalTasks);
+
+      // Save to database
+      try {
+        const res = await fetch(`/api/kanban/${projectId}/tasks`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ tasks: finalTasks }),
+        });
+        if (!res.ok) throw new Error("Failed to save tasks configuration");
+        await fetchData();
+      } catch (err: any) {
+        alert(err.message);
+      }
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-[var(--accent)] border-t-transparent" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-xl border border-red-500/30 bg-red-500/5 p-6 text-center text-red-500">
+        Error: {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Board Header */}
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div className="flex items-center gap-2">
+          <Sparkles className="h-5 w-5 text-[var(--accent)]" />
+          <h2 className="text-lg font-semibold text-[var(--foreground)]">Project Kanban Board</h2>
+        </div>
+        <button
+          onClick={() => setShowStageSettings(true)}
+          className="inline-flex items-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--card)] px-4 py-2 text-sm font-semibold text-[var(--foreground)] transition-opacity hover:opacity-90 shadow-sm"
+        >
+          <Settings size={16} />
+          Configure Columns
+        </button>
+      </div>
+
+      {/* Columns Container */}
+      <div className="flex gap-6 overflow-x-auto pb-4 pt-1 items-start min-h-[calc(100vh-250px)]">
+        <DndContext
+          sensors={sensors}
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext
+            items={stages.map((s) => s.id)}
+            strategy={horizontalListSortingStrategy}
+          >
+            {stages.map((stage) => (
+              <KanbanColumn
+                key={stage.id}
+                stage={stage}
+                tasks={tasks
+                  .filter((t) => t.stage_id === stage.id)
+                  .sort((a, b) => a.position - b.position)}
+                onAddTask={(stageId) => {
+                  setTaskFormStageId(stageId);
+                  setTaskFormTask(null);
+                  setTaskTitle("");
+                  setTaskDesc("");
+                  setShowTaskForm(true);
+                }}
+                onEditTask={(task) => {
+                  setTaskFormTask(task);
+                  setTaskTitle(task.title);
+                  setTaskDesc(task.description);
+                  setShowTaskForm(true);
+                }}
+                onDeleteTask={handleDeleteTask}
+              />
+            ))}
+          </SortableContext>
+
+          {/* Drag Overlay */}
+          <DragOverlay
+            dropAnimation={{
+              sideEffects: defaultDropAnimationSideEffects({
+                styles: {
+                  active: {
+                    opacity: "0.5",
+                  },
+                },
+              }),
+            }}
+          >
+            {activeColumn && (
+              <KanbanColumn
+                stage={activeColumn}
+                tasks={tasks.filter((t) => t.stage_id === activeColumn.id)}
+                onAddTask={() => {}}
+                onEditTask={() => {}}
+                onDeleteTask={() => {}}
+              />
+            )}
+            {activeTask && (
+              <KanbanTaskCard task={activeTask} onEdit={() => {}} onDelete={() => {}} />
+            )}
+          </DragOverlay>
+        </DndContext>
+      </div>
+
+      {/* Configure Columns Settings Modal */}
+      {showStageSettings && (
+        <StageSettingsModal
+          stages={stages}
+          onClose={() => setShowStageSettings(false)}
+          onSave={handleSaveStages}
+        />
+      )}
+
+      {/* Task Creation / Edit Modal */}
+      {showTaskForm && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
+          <form
+            onSubmit={handleSaveTask}
+            className="w-full max-w-md rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-2xl space-y-4"
+          >
+            <div className="flex items-center justify-between border-b border-[var(--border)] pb-3">
+              <h3 className="text-base font-bold text-[var(--card-foreground)]">
+                {taskFormTask ? "Edit Task" : "Create New Task"}
+              </h3>
+              <button
+                type="button"
+                onClick={() => {
+                  setShowTaskForm(false);
+                  setTaskFormTask(null);
+                }}
+                className="text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            <div className="space-y-1">
+              <label className="text-xs font-semibold text-[var(--muted-foreground)]">Title</label>
+              <input
+                type="text"
+                required
+                placeholder="Task title..."
+                value={taskTitle}
+                onChange={(e) => setTaskTitle(e.target.value)}
+                className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] focus:border-[var(--accent)] focus:outline-none"
+              />
+            </div>
+
+            <div className="space-y-1">
+              <label className="text-xs font-semibold text-[var(--muted-foreground)]">Description</label>
+              <textarea
+                placeholder="Details of the task..."
+                value={taskDesc}
+                onChange={(e) => setTaskDesc(e.target.value)}
+                rows={3}
+                className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] focus:border-[var(--accent)] focus:outline-none resize-none"
+              />
+            </div>
+
+            <div className="flex justify-end gap-3 border-t border-[var(--border)] pt-4 mt-6">
+              <button
+                type="button"
+                onClick={() => {
+                  setShowTaskForm(false);
+                  setTaskFormTask(null);
+                }}
+                className="secondary-button rounded-lg px-4 py-2 text-sm font-medium"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="inline-flex items-center gap-2 rounded-lg bg-[var(--accent)] px-5 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
+              >
+                {taskFormTask ? "Save Task" : "Create Task"}
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Simple X icon replacement since we need it in modals
+function X(props: any) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
diff --git a/src/components/kanban/KanbanColumn.tsx b/src/components/kanban/KanbanColumn.tsx
new file mode 100644
index 000000000..011ce68b0
--- /dev/null
+++ b/src/components/kanban/KanbanColumn.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { useSortable, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Plus, Settings2 } from "lucide-react";
+import KanbanTaskCard from "./KanbanTaskCard";
+
+interface Stage {
+  id: string;
+  name: string;
+  color: string;
+  position: number;
+}
+
+interface Task {
+  id: string;
+  project_id: string;
+  stage_id: string;
+  title: string;
+  description: string;
+  position: number;
+}
+
+interface KanbanColumnProps {
+  stage: Stage;
+  tasks: Task[];
+  onAddTask: (stageId: string) => void;
+  onEditTask: (task: Task) => void;
+  onDeleteTask: (id: string) => void;
+}
+
+export default function KanbanColumn({
+  stage,
+  tasks,
+  onAddTask,
+  onEditTask,
+  onDeleteTask,
+}: KanbanColumnProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
+    useSortable({ id: stage.id, data: { type: "column", stage } });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="flex flex-col flex-shrink-0 w-80 h-[calc(100vh-280px)] rounded-xl border border-[var(--border)] bg-[var(--control)] overflow-hidden shadow-sm"
+    >
+      {/* Column Header */}
+      <div
+        className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)] bg-[var(--card)] cursor-grab active:cursor-grabbing select-none"
+        {...attributes}
+        {...listeners}
+      >
+        <div className="flex items-center gap-2">
+          <span
+            className="w-3.5 h-3.5 rounded-full"
+            style={{ backgroundColor: stage.color }}
+          />
+          <h3 className="text-sm font-bold text-[var(--foreground)] truncate max-w-[160px]">
+            {stage.name}
+          </h3>
+          <span className="rounded-full bg-[var(--background)] px-2 py-0.5 text-xs text-[var(--muted-foreground)]">
+            {tasks.length}
+          </span>
+        </div>
+      </div>
+
+      {/* Task List container */}
+      <div className="flex-1 p-3 overflow-y-auto space-y-3 min-h-[150px]">
+        <SortableContext items={tasks.map((t) => t.id)} strategy={verticalListSortingStrategy}>
+          {tasks.map((task) => (
+            <KanbanTaskCard
+              key={task.id}
+              task={task}
+              onEdit={onEditTask}
+              onDelete={onDeleteTask}
+            />
+          ))}
+        </SortableContext>
+      </div>
+
+      {/* Add Task footer */}
+      <button
+        onClick={() => onAddTask(stage.id)}
+        className="flex items-center justify-center gap-2 border-t border-[var(--border)] bg-[var(--card)] py-3 text-xs font-semibold text-[var(--accent)] transition-all hover:bg-[var(--accent-soft)]"
+      >
+        <Plus size={14} />
+        Add Task
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/kanban/KanbanTaskCard.tsx b/src/components/kanban/KanbanTaskCard.tsx
new file mode 100644
index 000000000..17c06427a
--- /dev/null
+++ b/src/components/kanban/KanbanTaskCard.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Trash2, Edit2 } from "lucide-react";
+import { useState } from "react";
+
+interface Task {
+  id: string;
+  project_id: string;
+  stage_id: string;
+  title: string;
+  description: string;
+  position: number;
+}
+
+interface KanbanTaskCardProps {
+  task: Task;
+  onEdit: (task: Task) => void;
+  onDelete: (id: string) => void;
+}
+
+export default function KanbanTaskCard({ task, onEdit, onDelete }: KanbanTaskCardProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
+    useSortable({ id: task.id });
+
+  const [isHovered, setIsHovered] = useState(false);
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.3 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`group relative rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 shadow-sm transition-all ${
+        isDragging
+          ? "border-[var(--accent)] ring-2 ring-[var(--accent)]/20"
+          : "hover:border-[var(--accent)] hover:shadow-md"
+      }`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Drag handle area */}
+      <div
+        {...attributes}
+        {...listeners}
+        className="absolute inset-x-0 top-0 h-4 cursor-grab active:cursor-grabbing"
+      />
+
+      <div className="flex items-start justify-between gap-2 mt-1">
+        <h4 className="text-sm font-semibold text-[var(--card-foreground)] break-words flex-1">
+          {task.title}
+        </h4>
+        <div
+          className={`flex items-center gap-1.5 transition-opacity ${
+            isHovered ? "opacity-100" : "opacity-0"
+          }`}
+        >
+          <button
+            onClick={() => onEdit(task)}
+            className="rounded p-1 text-[var(--muted-foreground)] hover:bg-[var(--control)] hover:text-[var(--foreground)]"
+            title="Edit task"
+          >
+            <Edit2 size={13} />
+          </button>
+          <button
+            onClick={() => onDelete(task.id)}
+            className="rounded p-1 text-[var(--muted-foreground)] hover:bg-red-500/10 hover:text-red-500"
+            title="Delete task"
+          >
+            <Trash2 size={13} />
+          </button>
+        </div>
+      </div>
+
+      {task.description && (
+        <p className="mt-2 text-xs text-[var(--muted-foreground)] line-clamp-3 break-words">
+          {task.description}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/kanban/StageSettingsModal.tsx b/src/components/kanban/StageSettingsModal.tsx
new file mode 100644
index 000000000..0c4e3c298
--- /dev/null
+++ b/src/components/kanban/StageSettingsModal.tsx
@@ -0,0 +1,231 @@
+"use client";
+
+import { useState } from "react";
+import { X, Plus, Trash2, ArrowUp, ArrowDown } from "lucide-react";
+
+interface Stage {
+  id: string;
+  name: string;
+  color: string;
+  position: number;
+}
+
+interface StageSettingsModalProps {
+  stages: Stage[];
+  onClose: () => void;
+  onSave: (stages: Stage[], deleteStageId?: string) => Promise<void>;
+}
+
+const COLOR_PRESETS = [
+  "#6366f1", // Indigo
+  "#f59e0b", // Amber/Yellow
+  "#10b981", // Emerald/Green
+  "#ef4444", // Red
+  "#3b82f6", // Blue
+  "#8b5cf6", // Purple
+  "#ec4899", // Pink
+  "#14b8a6", // Teal
+];
+
+export default function StageSettingsModal({ stages, onClose, onSave }: StageSettingsModalProps) {
+  const [localStages, setLocalStages] = useState<Stage[]>(
+    [...stages].sort((a, b) => a.position - b.position)
+  );
+  const [newStageName, setNewStageName] = useState("");
+  const [newStageColor, setNewStageColor] = useState(COLOR_PRESETS[0]);
+  const [saving, setSaving] = useState(false);
+  const [deletedIds, setDeletedIds] = useState<string[]>([]);
+
+  const handleAddStage = () => {
+    const trimmed = newStageName.trim();
+    if (!trimmed) return;
+
+    const newStage: Stage = {
+      id: `temp-${Date.now()}`,
+      name: trimmed,
+      color: newStageColor,
+      position: localStages.length,
+    };
+
+    setLocalStages([...localStages, newStage]);
+    setNewStageName("");
+  };
+
+  const handleDeleteStage = (id: string) => {
+    if (localStages.length <= 1) {
+      alert("At least one stage is required.");
+      return;
+    }
+    const filtered = localStages.filter((s) => s.id !== id);
+    // Re-adjust positions
+    const adjusted = filtered.map((s, idx) => ({ ...s, position: idx }));
+    setLocalStages(adjusted);
+
+    if (!id.startsWith("temp-")) {
+      setDeletedIds([...deletedIds, id]);
+    }
+  };
+
+  const handleMove = (index: number, direction: "up" | "down") => {
+    if (direction === "up" && index === 0) return;
+    if (direction === "down" && index === localStages.length - 1) return;
+
+    const newIndex = direction === "up" ? index - 1 : index + 1;
+    const result = [...localStages];
+    const [removed] = result.splice(index, 1);
+    result.splice(newIndex, 0, removed);
+
+    const reindexed = result.map((s, idx) => ({ ...s, position: idx }));
+    setLocalStages(reindexed);
+  };
+
+  const handleRename = (id: string, name: string) => {
+    setLocalStages(localStages.map((s) => (s.id === id ? { ...s, name } : s)));
+  };
+
+  const handleColorChange = (id: string, color: string) => {
+    setLocalStages(localStages.map((s) => (s.id === id ? { ...s, color } : s)));
+  };
+
+  const handleSaveAll = async () => {
+    setSaving(true);
+    try {
+      // First delete removed stages
+      for (const deleteId of deletedIds) {
+        await onSave([], deleteId);
+      }
+      // Save all existing and new stages
+      await onSave(localStages);
+      onClose();
+    } catch (err) {
+      console.error(err);
+      alert("Failed to save stages configuration.");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
+      <div className="w-full max-w-lg rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-2xl">
+        <div className="flex items-center justify-between border-b border-[var(--border)] pb-4">
+          <h3 className="text-lg font-semibold text-[var(--card-foreground)]">
+            Manage Stages
+          </h3>
+          <button onClick={onClose} className="text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Existing / Pending list */}
+        <div className="my-4 max-h-[300px] overflow-y-auto space-y-3 pr-1">
+          {localStages.map((stage, idx) => (
+            <div
+              key={stage.id}
+              className="flex items-center gap-3 rounded-lg border border-[var(--border)] bg-[var(--control)] p-3"
+            >
+              <div className="flex flex-col gap-1">
+                <button
+                  disabled={idx === 0}
+                  onClick={() => handleMove(idx, "up")}
+                  className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] disabled:opacity-30"
+                >
+                  <ArrowUp size={14} />
+                </button>
+                <button
+                  disabled={idx === localStages.length - 1}
+                  onClick={() => handleMove(idx, "down")}
+                  className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] disabled:opacity-30"
+                >
+                  <ArrowDown size={14} />
+                </button>
+              </div>
+
+              <input
+                type="text"
+                value={stage.name}
+                onChange={(e) => handleRename(stage.id, e.target.value)}
+                className="flex-1 rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-1.5 text-sm text-[var(--foreground)] focus:border-[var(--accent)] focus:outline-none"
+              />
+
+              {/* Color Preset Picker */}
+              <div className="flex items-center gap-1">
+                {COLOR_PRESETS.map((color) => (
+                  <button
+                    key={color}
+                    onClick={() => handleColorChange(stage.id, color)}
+                    className={`w-4 h-4 rounded-full border transition-all ${
+                      stage.color === color ? "border-[var(--foreground)] scale-110" : "border-transparent"
+                    }`}
+                    style={{ backgroundColor: color }}
+                  />
+                ))}
+              </div>
+
+              <button
+                onClick={() => handleDeleteStage(stage.id)}
+                className="rounded p-1 text-[var(--muted-foreground)] hover:bg-red-500/10 hover:text-red-500"
+              >
+                <Trash2 size={16} />
+              </button>
+            </div>
+          ))}
+        </div>
+
+        {/* Add Stage Form */}
+        <div className="border-t border-[var(--border)] pt-4 mt-4">
+          <h4 className="text-sm font-semibold mb-2 text-[var(--card-foreground)]">Add New Stage</h4>
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center gap-2">
+              <input
+                type="text"
+                placeholder="e.g. QA, Design Review..."
+                value={newStageName}
+                onChange={(e) => setNewStageName(e.target.value)}
+                className="flex-1 rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm text-[var(--foreground)] focus:border-[var(--accent)] focus:outline-none"
+              />
+              <button
+                onClick={handleAddStage}
+                className="inline-flex items-center gap-2 rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
+              >
+                <Plus size={16} /> Add
+              </button>
+            </div>
+
+            <div className="flex items-center gap-1.5">
+              <span className="text-xs text-[var(--muted-foreground)] mr-2">Color:</span>
+              {COLOR_PRESETS.map((color) => (
+                <button
+                  key={color}
+                  onClick={() => setNewStageColor(color)}
+                  className={`w-5 h-5 rounded-full border transition-all ${
+                    newStageColor === color ? "border-[var(--foreground)] scale-110" : "border-transparent"
+                  }`}
+                  style={{ backgroundColor: color }}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Modal Actions */}
+        <div className="flex justify-end gap-3 border-t border-[var(--border)] pt-4 mt-6">
+          <button
+            onClick={onClose}
+            className="secondary-button rounded-lg px-4 py-2 text-sm font-medium"
+            disabled={saving}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSaveAll}
+            className="inline-flex items-center gap-2 rounded-lg bg-[var(--accent)] px-5 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90"
+            disabled={saving}
+          >
+            {saving ? "Saving..." : "Save Changes"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/lib/leaderboard.ts b/src/lib/leaderboard.ts
index a61736fa9..8b4bc693d 100644
--- a/src/lib/leaderboard.ts
+++ b/src/lib/leaderboard.ts
@@ -159,7 +159,7 @@ export async function clearLeaderboardCache(): Promise<void> {
   await invalidateLeaderboardCache();
 
   // 3. Invalidate Next.js unstable_cache
-  revalidateTag("leaderboard", {});
+  revalidateTag("leaderboard");
 }
 
 async function mapWithConcurrency<T, R>(
@@ -402,7 +402,7 @@ export async function refreshLeaderboardCache(
   const cacheKey = getLeaderboardCacheKey(period);
   await cacheSet(cacheKey, payload, CACHE_STALE_SECONDS);
   setMemoryCachedLeaderboard(payload, period);
-  revalidateTag("leaderboard", {});
+  revalidateTag("leaderboard");
   return payload;
 }
 
diff --git a/supabase/migrations/20260715000000_add_kanban_boards.sql b/supabase/migrations/20260715000000_add_kanban_boards.sql
new file mode 100644
index 000000000..f09f9fbcc
--- /dev/null
+++ b/supabase/migrations/20260715000000_add_kanban_boards.sql
@@ -0,0 +1,137 @@
+-- Create projects table if not exists
+create table if not exists projects (
+  id uuid primary key default gen_random_uuid(),
+  user_id text not null references users(id) on delete cascade,
+  name text not null,
+  created_at timestamptz not null default now()
+);
+
+-- Enable RLS on projects
+alter table projects enable row level security;
+
+-- Policies for projects
+create policy "projects_select_own" on projects
+  for select using (user_id = auth.uid()::text);
+
+create policy "projects_insert_own" on projects
+  for insert with check (user_id = auth.uid()::text);
+
+create policy "projects_update_own" on projects
+  for update using (user_id = auth.uid()::text);
+
+create policy "projects_delete_own" on projects
+  for delete using (user_id = auth.uid()::text);
+
+-- Create indexes for projects
+create index if not exists projects_user_id_idx on projects(user_id);
+
+
+-- Create workflow_stages table if not exists
+create table if not exists workflow_stages (
+  id uuid primary key default gen_random_uuid(),
+  project_id uuid not null references projects(id) on delete cascade,
+  name text not null,
+  position integer not null,
+  color text not null default '#6366f1',
+  created_at timestamptz not null default now()
+);
+
+-- Enable RLS on workflow_stages
+alter table workflow_stages enable row level security;
+
+-- Policies for workflow_stages
+create policy "workflow_stages_select" on workflow_stages
+  for select using (
+    exists (
+      select 1 from projects p
+      where p.id = workflow_stages.project_id
+      and p.user_id = auth.uid()::text
+    )
+  );
+
+create policy "workflow_stages_insert" on workflow_stages
+  for insert with check (
+    exists (
+      select 1 from projects p
+      where p.id = workflow_stages.project_id
+      and p.user_id = auth.uid()::text
+    )
+  );
+
+create policy "workflow_stages_update" on workflow_stages
+  for update using (
+    exists (
+      select 1 from projects p
+      where p.id = workflow_stages.project_id
+      and p.user_id = auth.uid()::text
+    )
+  );
+
+create policy "workflow_stages_delete" on workflow_stages
+  for delete using (
+    exists (
+      select 1 from projects p
+      where p.id = workflow_stages.project_id
+      and p.user_id = auth.uid()::text
+    )
+  );
+
+-- Create indexes for workflow_stages
+create index if not exists workflow_stages_project_id_idx on workflow_stages(project_id);
+
+
+-- Create tasks table if not exists
+create table if not exists tasks (
+  id uuid primary key default gen_random_uuid(),
+  project_id uuid not null references projects(id) on delete cascade,
+  stage_id uuid not null references workflow_stages(id) on delete cascade,
+  title text not null,
+  description text not null default '',
+  position integer not null default 0,
+  created_at timestamptz not null default now(),
+  updated_at timestamptz not null default now()
+);
+
+-- Enable RLS on tasks
+alter table tasks enable row level security;
+
+-- Policies for tasks
+create policy "tasks_select" on tasks
+  for select using (
+    exists (
+      select 1 from projects p
+      where p.id = tasks.project_id
+      and p.user_id = auth.uid()::text
+    )
+  );
+
+create policy "tasks_insert" on tasks
+  for insert with check (
+    exists (
+      select 1 from projects p
+      where p.id = tasks.project_id
+      and p.user_id = auth.uid()::text
+    )
+  );
+
+create policy "tasks_update" on tasks
+  for update using (
+    exists (
+      select 1 from projects p
+      where p.id = tasks.project_id
+      and p.user_id = auth.uid()::text
+    )
+  );
+
+create policy "tasks_delete" on tasks
+  for delete using (
+    exists (
+      select 1 from projects p
+      where p.id = tasks.project_id
+      and p.user_id = auth.uid()::text
+    )
+  );
+
+-- Create indexes for tasks
+create index if not exists tasks_project_id_idx on tasks(project_id);
+create index if not exists tasks_stage_id_idx on tasks(stage_id);