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]/activity/route.ts b/src/app/api/kanban/[projectId]/activity/route.ts
new file mode 100644
index 000000000..e3d9bf9e6
--- /dev/null
+++ b/src/app/api/kanban/[projectId]/activity/route.ts
@@ -0,0 +1,68 @@
+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 });
+  }
+
+  // Parse URL query filters
+  const { searchParams } = new URL(req.url);
+  const actionType = searchParams.get("actionType");
+  const dateFrom = searchParams.get("dateFrom");
+  const dateTo = searchParams.get("dateTo");
+  const limit = parseInt(searchParams.get("limit") || "20", 10);
+  const offset = parseInt(searchParams.get("offset") || "0", 10);
+
+  let query = supabaseAdmin
+    .from("activity_log")
+    .select("*")
+    .eq("project_id", projectId)
+    .order("created_at", { ascending: false })
+    .range(offset, offset + limit - 1);
+
+  if (actionType) {
+    query = query.eq("action", actionType);
+  }
+  if (dateFrom) {
+    query = query.gte("created_at", dateFrom);
+  }
+  if (dateTo) {
+    query = query.lte("created_at", dateTo);
+  }
+
+  const { data: activities, error: activitiesError } = await query;
+
+  if (activitiesError) {
+    return Response.json({ error: activitiesError.message }, { status: 500 });
+  }
+
+  return Response.json({ activities });
+}
diff --git a/src/app/api/kanban/[projectId]/route.ts b/src/app/api/kanban/[projectId]/route.ts
new file mode 100644
index 000000000..52dc3cdad
--- /dev/null
+++ b/src/app/api/kanban/[projectId]/route.ts
@@ -0,0 +1,93 @@
+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 });
+  }
+
+  // Get dependencies
+  const { data: dependencies, error: depsError } = await supabaseAdmin
+    .from("task_dependencies")
+    .select("*")
+    .eq("project_id", projectId);
+
+  if (depsError) {
+    return Response.json({ error: depsError.message }, { status: 500 });
+  }
+
+  return Response.json({ project, stages, tasks, dependencies });
+}
+
+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..148ed6661
--- /dev/null
+++ b/src/app/api/kanban/[projectId]/stages/route.ts
@@ -0,0 +1,163 @@
+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 });
+  }
+
+  // Log activity
+  await supabaseAdmin.from("activity_log").insert({
+    project_id: projectId,
+    user_id: user.id,
+    action: "stage_created",
+    entity_type: "stage",
+    entity_id: stage.id,
+    metadata: { name: stage.name },
+  });
+
+  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 });
+    }
+
+    // Log activity
+    await supabaseAdmin.from("activity_log").insert({
+      project_id: projectId,
+      user_id: user.id,
+      action: "stage_deleted",
+      entity_type: "stage",
+      entity_id: deleteStageId,
+      metadata: { id: deleteStageId },
+    });
+  }
+
+  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 });
+    }
+
+    // Log activity
+    await supabaseAdmin.from("activity_log").insert({
+      project_id: projectId,
+      user_id: user.id,
+      action: "stages_reordered",
+      entity_type: "stage",
+      entity_id: projectId,
+      metadata: { count: stages.length },
+    });
+  }
+
+  return Response.json({ success: true });
+}
diff --git a/src/app/api/kanban/[projectId]/tasks/[taskId]/dependencies/route.ts b/src/app/api/kanban/[projectId]/tasks/[taskId]/dependencies/route.ts
new file mode 100644
index 000000000..e1bb61d7c
--- /dev/null
+++ b/src/app/api/kanban/[projectId]/tasks/[taskId]/dependencies/route.ts
@@ -0,0 +1,107 @@
+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;
+    taskId: string;
+  }>;
+}
+
+export async function POST(req: Request, props: RouteParams) {
+  const { projectId, taskId } = 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 { blockingTaskId } = body;
+  if (!blockingTaskId) {
+    return Response.json({ error: "blockingTaskId is required" }, { status: 400 });
+  }
+
+  const { data: dep, error: depError } = await supabaseAdmin
+    .from("task_dependencies")
+    .insert({
+      project_id: projectId,
+      blocked_task_id: taskId,
+      blocking_task_id: blockingTaskId,
+    })
+    .select("*")
+    .single();
+
+  if (depError) {
+    return Response.json({ error: depError.message }, { status: 500 });
+  }
+
+  return Response.json({ dependency: dep }, { status: 201 });
+}
+
+export async function DELETE(req: Request, props: RouteParams) {
+  const { projectId, taskId } = 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 });
+  }
+
+  const { searchParams } = new URL(req.url);
+  const blockingTaskId = searchParams.get("blockingTaskId");
+
+  if (!blockingTaskId) {
+    return Response.json({ error: "blockingTaskId is required" }, { status: 400 });
+  }
+
+  const { error: deleteError } = await supabaseAdmin
+    .from("task_dependencies")
+    .delete()
+    .eq("project_id", projectId)
+    .eq("blocked_task_id", taskId)
+    .eq("blocking_task_id", blockingTaskId);
+
+  if (deleteError) {
+    return Response.json({ error: deleteError.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..51d8c052c
--- /dev/null
+++ b/src/app/api/kanban/[projectId]/tasks/route.ts
@@ -0,0 +1,191 @@
+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 });
+  }
+
+  // Log activity
+  await supabaseAdmin.from("activity_log").insert({
+    project_id: projectId,
+    user_id: user.id,
+    action: "task_created",
+    entity_type: "task",
+    entity_id: task.id,
+    metadata: { title: task.title, stage_id: task.stage_id },
+  });
+
+  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, movedTask, editedTask } = body;
+
+  if (deleteTaskId) {
+    // Get task details before deleting for a better log
+    const { data: taskToDelete } = await supabaseAdmin
+      .from("tasks")
+      .select("title")
+      .eq("id", deleteTaskId)
+      .single();
+
+    // 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 });
+    }
+
+    // Log activity
+    await supabaseAdmin.from("activity_log").insert({
+      project_id: projectId,
+      user_id: user.id,
+      action: "task_deleted",
+      entity_type: "task",
+      entity_id: deleteTaskId,
+      metadata: { title: taskToDelete?.title || "Deleted Task" },
+    });
+  }
+
+  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 });
+    }
+
+    // Log activity if moved or edited specifically
+    if (movedTask) {
+      // Find destination stage name
+      const { data: stage } = await supabaseAdmin
+        .from("workflow_stages")
+        .select("name")
+        .eq("id", movedTask.toStageId)
+        .single();
+
+      await supabaseAdmin.from("activity_log").insert({
+        project_id: projectId,
+        user_id: user.id,
+        action: "task_moved",
+        entity_type: "task",
+        entity_id: movedTask.id,
+        metadata: { title: movedTask.title, stage_name: stage?.name || "new column" },
+      });
+    } else if (editedTask) {
+      await supabaseAdmin.from("activity_log").insert({
+        project_id: projectId,
+        user_id: user.id,
+        action: "task_updated",
+        entity_type: "task",
+        entity_id: editedTask.id,
+        metadata: { title: editedTask.title },
+      });
+    }
+  }
+
+  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/ActivityFeed.tsx b/src/components/kanban/ActivityFeed.tsx
new file mode 100644
index 000000000..ab2d5cad6
--- /dev/null
+++ b/src/components/kanban/ActivityFeed.tsx
@@ -0,0 +1,275 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Clock, Filter, Calendar, RefreshCw } from "lucide-react";
+
+interface Activity {
+  id: string;
+  project_id: string;
+  user_id: string;
+  action: string;
+  entity_type: string;
+  entity_id: string;
+  metadata: {
+    title?: string;
+    name?: string;
+    stage_name?: string;
+    count?: number;
+    id?: string;
+  };
+  created_at: string;
+}
+
+interface ActivityFeedProps {
+  projectId: string;
+  refreshTrigger: number;
+}
+
+const ACTION_LABELS: Record<string, string> = {
+  task_created: "Task Created",
+  task_moved: "Task Moved",
+  task_updated: "Task Updated",
+  task_deleted: "Task Deleted",
+  stage_created: "Column Created",
+  stage_deleted: "Column Deleted",
+  stages_reordered: "Columns Reordered",
+};
+
+export default function ActivityFeed({ projectId, refreshTrigger }: ActivityFeedProps) {
+  const [activities, setActivities] = useState<Activity[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [hasMore, setHasMore] = useState(true);
+  const [offset, setOffset] = useState(0);
+
+  // Filters
+  const [actionType, setActionType] = useState<string>("");
+  const [dateFrom, setDateFrom] = useState<string>("");
+  const [dateTo, setDateTo] = useState<string>("");
+
+  const limit = 15;
+
+  const loadActivities = useCallback(async (isInitial = true) => {
+    if (isInitial) {
+      setLoading(true);
+      setOffset(0);
+    } else {
+      setLoadingMore(true);
+    }
+
+    try {
+      const currentOffset = isInitial ? 0 : offset;
+      let url = `/api/kanban/${projectId}/activity?limit=${limit}&offset=${currentOffset}`;
+      if (actionType) url += `&actionType=${actionType}`;
+      if (dateFrom) url += `&dateFrom=${new Date(dateFrom).toISOString()}`;
+      if (dateTo) url += `&dateTo=${new Date(dateTo).toISOString()}`;
+
+      const res = await fetch(url);
+      if (!res.ok) throw new Error("Failed to load activity logs");
+      const data = await res.json();
+      const fetched: Activity[] = data.activities || [];
+
+      if (isInitial) {
+        setActivities(fetched);
+      } else {
+        setActivities((prev) => [...prev, ...fetched]);
+      }
+
+      setHasMore(fetched.length === limit);
+      setOffset(currentOffset + fetched.length);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  }, [projectId, actionType, dateFrom, dateTo, offset]);
+
+  useEffect(() => {
+    loadActivities(true);
+  }, [projectId, actionType, dateFrom, dateTo, refreshTrigger]);
+
+  const getActivityMessage = (activity: Activity) => {
+    const meta = activity.metadata;
+    switch (activity.action) {
+      case "task_created":
+        return (
+          <span>
+            created task <strong className="text-[var(--foreground)]">{meta.title}</strong>
+          </span>
+        );
+      case "task_moved":
+        return (
+          <span>
+            moved task <strong className="text-[var(--foreground)]">{meta.title}</strong> to <strong className="text-[var(--accent)]">{meta.stage_name}</strong>
+          </span>
+        );
+      case "task_updated":
+        return (
+          <span>
+            updated task <strong className="text-[var(--foreground)]">{meta.title}</strong>
+          </span>
+        );
+      case "task_deleted":
+        return (
+          <span>
+            deleted task <strong className="text-[var(--foreground)]">{meta.title}</strong>
+          </span>
+        );
+      case "stage_created":
+        return (
+          <span>
+            created column <strong className="text-[var(--foreground)]">{meta.name}</strong>
+          </span>
+        );
+      case "stage_deleted":
+        return (
+          <span>
+            deleted a column
+          </span>
+        );
+      case "stages_reordered":
+        return (
+          <span>
+            reordered board columns
+          </span>
+        );
+      default:
+        return <span>performed an action</span>;
+    }
+  };
+
+  const getActionIconColor = (action: string) => {
+    switch (action) {
+      case "task_created":
+        return "bg-emerald-500/10 text-emerald-500 border-emerald-500/20";
+      case "task_deleted":
+      case "stage_deleted":
+        return "bg-red-500/10 text-red-500 border-red-500/20";
+      case "task_moved":
+      case "stages_reordered":
+        return "bg-indigo-500/10 text-indigo-500 border-indigo-500/20";
+      default:
+        return "bg-amber-500/10 text-amber-500 border-amber-500/20";
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-[var(--card)] text-[var(--foreground)]">
+      {/* Filters header */}
+      <div className="border-b border-[var(--border)] p-4 bg-[var(--control)]/45 space-y-3 rounded-t-xl">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-bold flex items-center gap-2 text-[var(--foreground)]">
+            <Clock size={16} /> Activity History
+          </h3>
+          <button
+            onClick={() => loadActivities(true)}
+            className="rounded p-1.5 text-[var(--muted-foreground)] hover:bg-[var(--control)] hover:text-[var(--foreground)] transition-colors"
+            title="Refresh feed"
+          >
+            <RefreshCw size={14} className={loading ? "animate-spin" : ""} />
+          </button>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
+          {/* Action filter */}
+          <div className="relative">
+            <select
+              value={actionType}
+              onChange={(e) => setActionType(e.target.value)}
+              className="w-full text-xs rounded-lg border border-[var(--border)] bg-[var(--background)] py-1.5 pl-2 pr-6 text-[var(--foreground)] focus:border-[var(--accent)] focus:outline-none appearance-none"
+            >
+              <option value="">All Actions</option>
+              {Object.entries(ACTION_LABELS).map(([val, label]) => (
+                <option key={val} value={val}>
+                  {label}
+                </option>
+              ))}
+            </select>
+            <Filter size={12} className="absolute right-2.5 top-2.5 text-[var(--muted-foreground)] pointer-events-none" />
+          </div>
+
+          {/* Date from */}
+          <input
+            type="date"
+            value={dateFrom}
+            onChange={(e) => setDateFrom(e.target.value)}
+            className="w-full text-xs rounded-lg border border-[var(--border)] bg-[var(--background)] px-2 py-1.5 text-[var(--foreground)] focus:border-[var(--accent)] focus:outline-none"
+            placeholder="From"
+          />
+
+          {/* Date to */}
+          <input
+            type="date"
+            value={dateTo}
+            onChange={(e) => setDateTo(e.target.value)}
+            className="w-full text-xs rounded-lg border border-[var(--border)] bg-[var(--background)] px-2 py-1.5 text-[var(--foreground)] focus:border-[var(--accent)] focus:outline-none"
+            placeholder="To"
+          />
+        </div>
+      </div>
+
+      {/* Timeline items */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-6 min-h-[300px]">
+        {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-xs text-red-500">
+            Error: {error}
+          </div>
+        ) : activities.length === 0 ? (
+          <div className="text-center text-xs text-[var(--muted-foreground)] py-12">
+            No activity matches the filters.
+          </div>
+        ) : (
+          <div className="relative border-l-2 border-[var(--border)] pl-4 ml-3 space-y-6">
+            {activities.map((activity) => (
+              <div key={activity.id} className="relative group">
+                {/* Timeline Dot Icon */}
+                <span
+                  className={`absolute -left-[27px] top-0.5 flex h-5 w-5 items-center justify-center rounded-full border text-[9px] font-bold shadow-sm transition-transform group-hover:scale-110 ${getActionIconColor(
+                    activity.action
+                  )}`}
+                >
+                  {activity.action.startsWith("task") ? "T" : "C"}
+                </span>
+
+                {/* Content */}
+                <div className="space-y-1">
+                  <p className="text-xs text-[var(--muted-foreground)] leading-relaxed">
+                    {getActivityMessage(activity)}
+                  </p>
+                  <span className="inline-flex items-center gap-1 text-[10px] text-[var(--muted-foreground)] opacity-60">
+                    <Calendar size={10} />
+                    {new Date(activity.created_at).toLocaleString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Pagination Footer */}
+      {hasMore && !loading && (
+        <div className="p-3 border-t border-[var(--border)] bg-[var(--control)]/20 text-center">
+          <button
+            onClick={() => loadActivities(false)}
+            disabled={loadingMore}
+            className="text-xs font-semibold text-[var(--accent)] hover:underline disabled:opacity-50"
+          >
+            {loadingMore ? "Loading more..." : "Load More Activities"}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/kanban/DependencyModal.tsx b/src/components/kanban/DependencyModal.tsx
new file mode 100644
index 000000000..93393964a
--- /dev/null
+++ b/src/components/kanban/DependencyModal.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import { useState } from "react";
+import { X, Plus, Trash2 } from "lucide-react";
+
+interface Task {
+  id: string;
+  project_id: string;
+  stage_id: string;
+  title: string;
+  description: string;
+  position: number;
+}
+
+interface Dependency {
+  id: string;
+  project_id: string;
+  blocked_task_id: string;
+  blocking_task_id: string;
+}
+
+interface DependencyModalProps {
+  task: Task;
+  tasks: Task[];
+  dependencies: Dependency[];
+  projectId: string;
+  onClose: () => void;
+  onRefresh: () => Promise<void>;
+}
+
+export default function DependencyModal({
+  task,
+  tasks,
+  dependencies,
+  projectId,
+  onClose,
+  onRefresh,
+}: DependencyModalProps) {
+  const [selectedTaskId, setSelectedTaskId] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  // Blockers: tasks that are blocking this task (blocking_task_id)
+  const blockers = dependencies
+    .filter((d) => d.blocked_task_id === task.id)
+    .map((d) => tasks.find((t) => t.id === d.blocking_task_id))
+    .filter(Boolean) as Task[];
+
+  // Blocked: tasks that this task is blocking (blocked_task_id)
+  const blockedTasks = dependencies
+    .filter((d) => d.blocking_task_id === task.id)
+    .map((d) => tasks.find((t) => t.id === d.blocked_task_id))
+    .filter(Boolean) as Task[];
+
+  // Eligible tasks to add as blocker: other tasks in the project not already blocking this task, and not itself
+  const blockerIds = blockers.map((b) => b.id);
+  const eligibleTasks = tasks.filter(
+    (t) => t.id !== task.id && !blockerIds.includes(t.id) && t.id !== task.id
+  );
+
+  const handleAddDependency = async () => {
+    if (!selectedTaskId) return;
+    setSubmitting(true);
+    try {
+      const res = await fetch(`/api/kanban/${projectId}/tasks/${task.id}/dependencies`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ blockingTaskId: selectedTaskId }),
+      });
+      if (!res.ok) throw new Error("Failed to add dependency");
+      setSelectedTaskId("");
+      await onRefresh();
+    } catch (err: any) {
+      alert(err.message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleRemoveDependency = async (blockingId: string) => {
+    try {
+      const res = await fetch(
+        `/api/kanban/${projectId}/tasks/${task.id}/dependencies?blockingTaskId=${blockingId}`,
+        { method: "DELETE" }
+      );
+      if (!res.ok) throw new Error("Failed to remove dependency");
+      await onRefresh();
+    } catch (err: any) {
+      alert(err.message);
+    }
+  };
+
+  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-md rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-2xl space-y-5">
+        <div className="flex items-center justify-between border-b border-[var(--border)] pb-3">
+          <div>
+            <h3 className="text-base font-bold text-[var(--card-foreground)]">
+              Manage Dependencies
+            </h3>
+            <p className="text-xs text-[var(--muted-foreground)] truncate max-w-[300px]">
+              For: {task.title}
+            </p>
+          </div>
+          <button onClick={onClose} className="text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Add Blocker Form */}
+        <div className="space-y-2">
+          <label className="text-xs font-semibold text-[var(--muted-foreground)]">
+            Add Blocker Task
+          </label>
+          <div className="flex gap-2">
+            <select
+              value={selectedTaskId}
+              onChange={(e) => setSelectedTaskId(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"
+            >
+              <option value="">Select a task...</option>
+              {eligibleTasks.map((t) => (
+                <option key={t.id} value={t.id}>
+                  {t.title}
+                </option>
+              ))}
+            </select>
+            <button
+              onClick={handleAddDependency}
+              disabled={submitting || !selectedTaskId}
+              className="inline-flex items-center justify-center rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-40"
+            >
+              <Plus size={16} />
+            </button>
+          </div>
+        </div>
+
+        {/* Blockers list */}
+        <div className="space-y-2">
+          <h4 className="text-xs font-semibold text-[var(--muted-foreground)] border-b border-[var(--border)] pb-1">
+            Blocked By (Blockers)
+          </h4>
+          {blockers.length === 0 ? (
+            <p className="text-xs text-[var(--muted-foreground)] italic">This task is not blocked.</p>
+          ) : (
+            <div className="space-y-1.5 max-h-32 overflow-y-auto">
+              {blockers.map((b) => (
+                <div
+                  key={b.id}
+                  className="flex items-center justify-between gap-3 rounded-lg border border-[var(--border)] bg-[var(--control)]/40 p-2 text-xs"
+                >
+                  <span className="font-semibold text-[var(--foreground)] truncate flex-1">
+                    {b.title}
+                  </span>
+                  <button
+                    onClick={() => handleRemoveDependency(b.id)}
+                    className="text-[var(--muted-foreground)] hover:text-red-500 rounded p-1 hover:bg-red-500/10"
+                    title="Remove dependency"
+                  >
+                    <Trash2 size={13} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Blocking list */}
+        <div className="space-y-2">
+          <h4 className="text-xs font-semibold text-[var(--muted-foreground)] border-b border-[var(--border)] pb-1">
+            Blocking Tasks
+          </h4>
+          {blockedTasks.length === 0 ? (
+            <p className="text-xs text-[var(--muted-foreground)] italic">This task is not blocking other tasks.</p>
+          ) : (
+            <div className="space-y-1.5 max-h-32 overflow-y-auto">
+              {blockedTasks.map((bt) => (
+                <div
+                  key={bt.id}
+                  className="rounded-lg border border-[var(--border)] bg-[var(--control)]/40 p-2 text-xs font-semibold text-[var(--foreground)] truncate"
+                >
+                  {bt.title}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/kanban/KanbanBoard.tsx b/src/components/kanban/KanbanBoard.tsx
new file mode 100644
index 000000000..c0b85ad4a
--- /dev/null
+++ b/src/components/kanban/KanbanBoard.tsx
@@ -0,0 +1,600 @@
+"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, Clock } from "lucide-react";
+import KanbanColumn from "./KanbanColumn";
+import StageSettingsModal from "./StageSettingsModal";
+import KanbanTaskCard from "./KanbanTaskCard";
+import ActivityFeed from "./ActivityFeed";
+import DependencyModal from "./DependencyModal";
+
+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 Dependency {
+  id: string;
+  project_id: string;
+  blocked_task_id: string;
+  blocking_task_id: string;
+}
+
+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);
+
+  // Activity feed state
+  const [showActivityFeed, setShowActivityFeed] = useState(false);
+  const [refreshActivityTrigger, setRefreshActivityTrigger] = useState(0);
+
+  // Task dependencies state
+  const [dependencies, setDependencies] = useState<Dependency[]>([]);
+  const [dependencyModalTask, setDependencyModalTask] = 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 || []);
+      setDependencies(data.dependencies || []);
+      setRefreshActivityTrigger((prev) => prev + 1);
+    } 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,
+            editedTask: { id: taskFormTask.id, title: taskTitle },
+          }),
+        });
+        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;
+      }
+
+      // Check if moving to the final stage
+      const sortedStages = [...stages].sort((a, b) => a.position - b.position);
+      const finalStage = sortedStages[sortedStages.length - 1];
+
+      if (targetStageId === finalStage?.id) {
+        const blockers = dependencies
+          .filter((d) => d.blocked_task_id === activeId)
+          .map((d) => tasks.find((t) => t.id === d.blocking_task_id))
+          .filter(Boolean);
+
+        const activeBlockers = blockers.filter((b) => b!.stage_id !== finalStage.id);
+
+        if (activeBlockers.length > 0) {
+          alert(
+            `Cannot move task to ${finalStage.name}. It is blocked by unfinished tasks:\n` +
+              activeBlockers.map((b) => `- ${b!.title}`).join("\n")
+          );
+          return;
+        }
+      }
+
+      // 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,
+            movedTask: { id: activeId, title: activeTaskItem.title, toStageId: targetStageId },
+          }),
+        });
+        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>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setShowActivityFeed(!showActivityFeed)}
+            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"
+          >
+            <Clock size={16} />
+            {showActivityFeed ? "Hide History" : "Show History"}
+          </button>
+          <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>
+      </div>
+
+      {/* Columns Container */}
+      <div className="flex gap-6 items-start">
+        <div className="flex-1 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)}
+                  dependencies={dependencies}
+                  onAddTask={(stageId) => {
+                    setTaskFormStageId(stageId);
+                    setTaskFormTask(null);
+                    setTaskTitle("");
+                    setTaskDesc("");
+                    setShowTaskForm(true);
+                  }}
+                  onEditTask={(task) => {
+                    setTaskFormTask(task);
+                    setTaskTitle(task.title);
+                    setTaskDesc(task.description);
+                    setShowTaskForm(true);
+                  }}
+                  onDeleteTask={handleDeleteTask}
+                  onManageDependencies={(task) => setDependencyModalTask(task)}
+                />
+              ))}
+            </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)}
+                  dependencies={[]}
+                  onAddTask={() => {}}
+                  onEditTask={() => {}}
+                  onDeleteTask={() => {}}
+                  onManageDependencies={() => {}}
+                />
+              )}
+              {activeTask && (
+                <KanbanTaskCard
+                  task={activeTask}
+                  onEdit={() => {}}
+                  onDelete={() => {}}
+                  blockersCount={0}
+                  blockingCount={0}
+                  onManageDependencies={() => {}}
+                />
+              )}
+            </DragOverlay>
+          </DndContext>
+        </div>
+
+        {showActivityFeed && (
+          <div className="w-80 border border-[var(--border)] rounded-xl shadow-sm bg-[var(--card)] self-stretch h-[calc(100vh-280px)] overflow-hidden hidden md:block">
+            <ActivityFeed projectId={projectId} refreshTrigger={refreshActivityTrigger} />
+          </div>
+        )}
+      </div>
+
+      {/* Configure Columns Settings Modal */}
+      {showStageSettings && (
+        <StageSettingsModal
+          stages={stages}
+          onClose={() => setShowStageSettings(false)}
+          onSave={handleSaveStages}
+        />
+      )}
+
+      {/* Dependency Modal */}
+      {dependencyModalTask && (
+        <DependencyModal
+          task={dependencyModalTask}
+          tasks={tasks}
+          dependencies={dependencies}
+          projectId={projectId}
+          onClose={() => setDependencyModalTask(null)}
+          onRefresh={fetchData}
+        />
+      )}
+
+      {/* 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..76d879e6a
--- /dev/null
+++ b/src/components/kanban/KanbanColumn.tsx
@@ -0,0 +1,117 @@
+"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 Dependency {
+  id: string;
+  project_id: string;
+  blocked_task_id: string;
+  blocking_task_id: string;
+}
+
+interface KanbanColumnProps {
+  stage: Stage;
+  tasks: Task[];
+  dependencies: Dependency[];
+  onAddTask: (stageId: string) => void;
+  onEditTask: (task: Task) => void;
+  onDeleteTask: (id: string) => void;
+  onManageDependencies: (task: Task) => void;
+}
+
+export default function KanbanColumn({
+  stage,
+  tasks,
+  dependencies,
+  onAddTask,
+  onEditTask,
+  onDeleteTask,
+  onManageDependencies,
+}: 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) => {
+            const blockersCount = dependencies.filter((d) => d.blocked_task_id === task.id).length;
+            const blockingCount = dependencies.filter((d) => d.blocking_task_id === task.id).length;
+
+            return (
+              <KanbanTaskCard
+                key={task.id}
+                task={task}
+                onEdit={onEditTask}
+                onDelete={onDeleteTask}
+                blockersCount={blockersCount}
+                blockingCount={blockingCount}
+                onManageDependencies={onManageDependencies}
+              />
+            );
+          })}
+        </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..1b13d793c
--- /dev/null
+++ b/src/components/kanban/KanbanTaskCard.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Trash2, Edit2, Link2 } 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;
+  blockersCount: number;
+  blockingCount: number;
+  onManageDependencies: (task: Task) => void;
+}
+
+export default function KanbanTaskCard({
+  task,
+  onEdit,
+  onDelete,
+  blockersCount,
+  blockingCount,
+  onManageDependencies,
+}: 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>
+      )}
+
+      {/* Dependency Badges */}
+      <div className="flex flex-wrap gap-1.5 mt-3 pt-3 border-t border-[var(--border)]">
+        {blockersCount > 0 && (
+          <button
+            onClick={() => onManageDependencies(task)}
+            className="inline-flex items-center gap-1 rounded bg-red-500/10 px-1.5 py-0.5 text-[10px] font-bold text-red-500 hover:bg-red-500/20 transition-colors"
+            title="Click to view blockers"
+          >
+            Blocked By: {blockersCount}
+          </button>
+        )}
+        {blockingCount > 0 && (
+          <button
+            onClick={() => onManageDependencies(task)}
+            className="inline-flex items-center gap-1 rounded bg-indigo-500/10 px-1.5 py-0.5 text-[10px] font-bold text-indigo-500 hover:bg-indigo-500/20 transition-colors"
+            title="Click to view blocked tasks"
+          >
+            Blocking: {blockingCount}
+          </button>
+        )}
+        <button
+          onClick={() => onManageDependencies(task)}
+          className="inline-flex items-center gap-1 rounded bg-[var(--control)] px-1.5 py-0.5 text-[10px] font-bold text-[var(--muted-foreground)] hover:text-[var(--foreground)] ml-auto transition-colors"
+        >
+          <Link2 size={10} /> Link
+        </button>
+      </div>
+    </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);
diff --git a/supabase/migrations/20260715000001_add_activity_log.sql b/supabase/migrations/20260715000001_add_activity_log.sql
new file mode 100644
index 000000000..a5d7df6b9
--- /dev/null
+++ b/supabase/migrations/20260715000001_add_activity_log.sql
@@ -0,0 +1,36 @@
+-- Create activity_log table if not exists
+create table if not exists activity_log (
+  id uuid primary key default gen_random_uuid(),
+  project_id uuid not null references projects(id) on delete cascade,
+  user_id text not null references users(id) on delete cascade,
+  action text not null,
+  entity_type text not null,
+  entity_id uuid not null,
+  metadata jsonb not null default '{}'::jsonb,
+  created_at timestamptz not null default now()
+);
+
+-- Enable RLS
+alter table activity_log enable row level security;
+
+-- Policies for activity_log
+create policy "activity_log_select" on activity_log
+  for select using (
+    exists (
+      select 1 from projects p
+      where p.id = activity_log.project_id
+      and p.user_id = auth.uid()::text
+    )
+  );
+
+create policy "activity_log_insert" on activity_log
+  for insert with check (
+    exists (
+      select 1 from projects p
+      where p.id = activity_log.project_id
+      and p.user_id = auth.uid()::text
+    )
+  );
+
+-- Create index for performance
+create index if not exists activity_log_project_id_created_at_idx on activity_log(project_id, created_at desc);
diff --git a/supabase/migrations/20260715000002_add_task_dependencies.sql b/supabase/migrations/20260715000002_add_task_dependencies.sql
new file mode 100644
index 000000000..1869dcb81
--- /dev/null
+++ b/supabase/migrations/20260715000002_add_task_dependencies.sql
@@ -0,0 +1,49 @@
+-- Create task_dependencies table if not exists
+create table if not exists task_dependencies (
+  id uuid primary key default gen_random_uuid(),
+  project_id uuid not null references projects(id) on delete cascade,
+  blocked_task_id uuid not null references tasks(id) on delete cascade,
+  blocking_task_id uuid not null references tasks(id) on delete cascade,
+  created_at timestamptz not null default now(),
+  
+  -- Prevent self-dependencies
+  constraint check_not_self_dependency check (blocked_task_id <> blocking_task_id),
+  -- Unique pair constraint
+  constraint unique_task_dependency_pair unique (blocked_task_id, blocking_task_id)
+);
+
+-- Enable RLS
+alter table task_dependencies enable row level security;
+
+-- Policies for task_dependencies
+create policy "task_dependencies_select" on task_dependencies
+  for select using (
+    exists (
+      select 1 from projects p
+      where p.id = task_dependencies.project_id
+      and p.user_id = auth.uid()::text
+    )
+  );
+
+create policy "task_dependencies_insert" on task_dependencies
+  for insert with check (
+    exists (
+      select 1 from projects p
+      where p.id = task_dependencies.project_id
+      and p.user_id = auth.uid()::text
+    )
+  );
+
+create policy "task_dependencies_delete" on task_dependencies
+  for delete using (
+    exists (
+      select 1 from projects p
+      where p.id = task_dependencies.project_id
+      and p.user_id = auth.uid()::text
+    )
+  );
+
+-- Indexes for performance
+create index if not exists task_dependencies_project_id_idx on task_dependencies(project_id);
+create index if not exists task_dependencies_blocked_task_id_idx on task_dependencies(blocked_task_id);
+create index if not exists task_dependencies_blocking_task_id_idx on task_dependencies(blocking_task_id);