diff --git a/src/app/workspace/page.tsx b/src/app/workspace/page.tsx
index 7cfbf61..0455e3e 100644
--- a/src/app/workspace/page.tsx
+++ b/src/app/workspace/page.tsx
@@ -1,183 +1,7 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  CardFooter,
-  CardDescription,
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Trash } from "lucide-react";
-import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
-import { Color, getColor } from "@/lib/ui/color";
-
-type Task = {
-  id: string;
-  title: string;
-  description?: string;
-  tags?: { name: string; color: Color }[];
-};
-
-const columnLabels: Record<string, string> = {
-  todo: "To do",
-  inprogress: "In progress",
-  done: "Done",
-};
-
-const id = (prefix = "t") =>
-  `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+import BoardView from "@/components/view/board/BoardView";
 
 export default function Workspace() {
-  const [columns, setColumns] = useState<Record<string, Task[]>>({
-    todo: [],
-    inprogress: [],
-    done: [],
-  });
-
-  useEffect(() => {
-    setColumns({
-      todo: [
-        { id: id(), title: "Buy groceries" },
-        { id: id(), title: "Plan sprint" },
-      ],
-      inprogress: [
-        {
-          id: id(),
-          title: "Build header",
-          description: "A simple description",
-          tags: [
-            { name: "Website", color: "pink" },
-            { name: "Development", color: "blue" },
-            { name: "API", color: "green" },
-            { name: "App", color: "purple" },
-            { name: "Rust", color: "orange" },
-          ],
-        },
-      ],
-      done: [{ id: id(), title: "Set up repo" }],
-    });
-  }, []);
-
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
-
-  if (!mounted) return null;
-
-  function onDragEnd(result: any) {
-    const { source, destination } = result;
-    if (!destination) return;
-
-    const sourceCol = source.droppableId;
-    const destCol = destination.droppableId;
-
-    if (sourceCol === destCol) {
-      const items = Array.from(columns[sourceCol]);
-      const [moved] = items.splice(source.index, 1);
-      items.splice(destination.index, 0, moved);
-      setColumns({ ...columns, [sourceCol]: items });
-    } else {
-      const sourceItems = Array.from(columns[sourceCol]);
-      const destItems = Array.from(columns[destCol]);
-      const [moved] = sourceItems.splice(source.index, 1);
-      destItems.splice(destination.index, 0, moved);
-      setColumns({
-        ...columns,
-        [sourceCol]: sourceItems,
-        [destCol]: destItems,
-      });
-    }
-  }
-
-  return (
-    <div className="p-6 w-full h-full flex flex-col gap-6">
-      <DragDropContext onDragEnd={onDragEnd}>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
-          {Object.keys(columnLabels).map((colKey) => (
-            <Droppable key={colKey} droppableId={colKey}>
-              {(provided) => (
-                <Card
-                  ref={provided.innerRef}
-                  {...provided.droppableProps}
-                  className="min-h-[220px] bg-background"
-                >
-                  <CardHeader>
-                    <CardTitle className="flex items-center justify-between">
-                      <span>{columnLabels[colKey]}</span>
-                      <span className="text-sm text-muted-foreground">
-                        {columns[colKey].length}
-                      </span>
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="flex flex-col gap-3">
-                      {columns[colKey].map((task, index) => (
-                        <Draggable
-                          key={task.id}
-                          draggableId={task.id}
-                          index={index}
-                        >
-                          {(provided) => (
-                            <Card
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              {...provided.dragHandleProps}
-                              className="bg-background"
-                            >
-                              <CardHeader>
-                                <CardTitle>{task.title}</CardTitle>
-                                <CardDescription>
-                                  {task.description}
-                                </CardDescription>
-                              </CardHeader>
-                              <CardContent className="flex flex-wrap gap-2 overflow-hidden">
-                                {task.tags?.map((tag, i) => (
-                                  <span
-                                    key={tag.name}
-                                    style={getColor(tag.color)}
-                                    className="inline-flex items-center py-0.5 px-1.5 rounded-sm max-w-full truncate"
-                                  >
-                                    {tag.name}
-                                  </span>
-                                ))}
-                              </CardContent>
-                            </Card>
-                          )}
-                        </Draggable>
-                      ))}
-                      {provided.placeholder}
-                      {columns[colKey].length === 0 && (
-                        <p className="text-sm text-muted-foreground">
-                          No tasks
-                        </p>
-                      )}
-                    </div>
-                  </CardContent>
-                  <CardFooter>
-                    <div className="flex justify-between w-full items-center">
-                      <Button
-                        size="sm"
-                        onClick={() => {
-                          const t: Task = { id: id(), title: "New task" };
-                          setColumns((c) => ({
-                            ...c,
-                            [colKey]: [...c[colKey], t],
-                          }));
-                        }}
-                        className="ml-auto"
-                      >
-                        Add
-                      </Button>
-                    </div>
-                  </CardFooter>
-                </Card>
-              )}
-            </Droppable>
-          ))}
-        </div>
-      </DragDropContext>
-    </div>
-  );
+  return <BoardView />;
 }
diff --git a/src/components/view/board/BoardView.tsx b/src/components/view/board/BoardView.tsx
new file mode 100644
index 0000000..26a7caa
--- /dev/null
+++ b/src/components/view/board/BoardView.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardDescription,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import { Color, getColor } from "@/lib/ui/color";
+import { PlusIcon } from "lucide-react";
+
+type Task = {
+  id: string;
+  title: string;
+  description?: string;
+  tags?: { name: string; color: Color }[];
+};
+
+const columnLabels: Record<string, string> = {
+  todo: "To do",
+  inprogress: "In progress",
+  done: "Done",
+};
+
+const id = (prefix = "t") =>
+  `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+
+export default function BoardView() {
+  const [columns, setColumns] = useState<Record<string, Task[]>>({
+    todo: [
+      { id: id(), title: "Buy groceries" },
+      { id: id(), title: "Plan sprint" },
+    ],
+    inprogress: [
+      {
+        id: id(),
+        title: "Build header",
+        description: "A simple description",
+        tags: [
+          { name: "Website", color: "pink" },
+          { name: "Development", color: "blue" },
+          { name: "API", color: "green" },
+          { name: "App", color: "purple" },
+          { name: "Rust", color: "orange" },
+        ],
+      },
+    ],
+    done: [],
+  });
+
+  function onDragEnd(result: any) {
+    const { source, destination } = result;
+    if (!destination) return;
+
+    const sourceCol = source.droppableId;
+    const destCol = destination.droppableId;
+
+    if (sourceCol === destCol) {
+      const items = Array.from(columns[sourceCol]);
+      const [moved] = items.splice(source.index, 1);
+      items.splice(destination.index, 0, moved);
+      setColumns({ ...columns, [sourceCol]: items });
+    } else {
+      const sourceItems = Array.from(columns[sourceCol]);
+      const destItems = Array.from(columns[destCol]);
+      const [moved] = sourceItems.splice(source.index, 1);
+      destItems.splice(destination.index, 0, moved);
+      setColumns({
+        ...columns,
+        [sourceCol]: sourceItems,
+        [destCol]: destItems,
+      });
+    }
+  }
+
+  return (
+    <div className="p-6 w-full h-full flex flex-col gap-6">
+      <DragDropContext onDragEnd={onDragEnd}>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
+          {Object.keys(columnLabels).map((colKey) => (
+            <Droppable key={colKey} droppableId={colKey}>
+              {(provided) => (
+                <Card
+                  ref={provided.innerRef}
+                  {...provided.droppableProps}
+                  className="min-h-[170px] bg-background"
+                >
+                  <CardHeader>
+                    <CardTitle className="flex items-center justify-between">
+                      <span>{columnLabels[colKey]}</span>
+                      <Button
+                        size="sm"
+                        className="ml-auto"
+                        variant="outline"
+                        onClick={() => {
+                          const t: Task = { id: id(), title: "New task" };
+                          setColumns((c) => ({
+                            ...c,
+                            [colKey]: [...c[colKey], t],
+                          }));
+                        }}
+                      >
+                        <PlusIcon />
+                      </Button>
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex flex-col gap-3">
+                      {columns[colKey].map((task, index) => (
+                        <Draggable
+                          key={task.id}
+                          draggableId={task.id}
+                          index={index}
+                        >
+                          {(provided) => (
+                            <Card
+                              ref={provided.innerRef}
+                              {...provided.draggableProps}
+                              {...provided.dragHandleProps}
+                              className="bg-background"
+                            >
+                              <CardHeader>
+                                <CardTitle>{task.title}</CardTitle>
+                                <CardDescription>
+                                  {task.description}
+                                </CardDescription>
+                              </CardHeader>
+                              <CardContent className="flex flex-wrap gap-2 overflow-hidden">
+                                {task.tags?.map((tag, i) => (
+                                  <span
+                                    key={tag.name}
+                                    style={getColor(tag.color)}
+                                    className="inline-flex items-center py-0.5 px-1.5 rounded-sm max-w-full truncate"
+                                  >
+                                    {tag.name}
+                                  </span>
+                                ))}
+                              </CardContent>
+                            </Card>
+                          )}
+                        </Draggable>
+                      ))}
+                      {provided.placeholder}
+                      {columns[colKey].length === 0 && (
+                        <p className="text-sm text-muted-foreground">
+                          No tasks
+                        </p>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </Droppable>
+          ))}
+        </div>
+      </DragDropContext>
+    </div>
+  );
+}