diff --git a/packages/web/bun.lockb b/packages/web/bun.lockb
index 099b785..508f4e5 100755
Binary files a/packages/web/bun.lockb and b/packages/web/bun.lockb differ
diff --git a/packages/web/components.json b/packages/web/components.json
index 7b2aff4..62c62c7 100644
--- a/packages/web/components.json
+++ b/packages/web/components.json
@@ -1,14 +1,16 @@
 {
 	"$schema": "https://shadcn-svelte.com/schema.json",
-	"style": "default",
 	"tailwind": {
-		"config": "tailwind.config.js",
 		"css": "src/app.css",
 		"baseColor": "slate"
 	},
 	"aliases": {
 		"components": "$lib/components",
-		"utils": "$lib/utils"
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
 	},
-	"typescript": true
-}
\ No newline at end of file
+	"typescript": true,
+	"registry": "https://tw3.shadcn-svelte.com/registry/default"
+}
diff --git a/packages/web/package.json b/packages/web/package.json
index 8936f8c..3461051 100755
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -25,7 +25,7 @@
     "@types/eslint": "9.6.1",
     "@types/pg": "^8.11.10",
     "autoprefixer": "^10.4.20",
-    "bits-ui": "^0.22.0",
+    "bits-ui": "^1.4.7",
     "clsx": "^2.1.1",
     "cmdk-sv": "^0.0.18",
     "drizzle-kit": "^0.30.1",
diff --git a/packages/web/src/lib/components/ui/table/index.ts b/packages/web/src/lib/components/ui/table/index.ts
new file mode 100644
index 0000000..14695c8
--- /dev/null
+++ b/packages/web/src/lib/components/ui/table/index.ts
@@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};
diff --git a/packages/web/src/lib/components/ui/table/table-body.svelte b/packages/web/src/lib/components/ui/table/table-body.svelte
new file mode 100644
index 0000000..6c20c01
--- /dev/null
+++ b/packages/web/src/lib/components/ui/table/table-body.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody bind:this={ref} class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+	{@render children?.()}
+</tbody>
diff --git a/packages/web/src/lib/components/ui/table/table-caption.svelte b/packages/web/src/lib/components/ui/table/table-caption.svelte
new file mode 100644
index 0000000..2b0cba5
--- /dev/null
+++ b/packages/web/src/lib/components/ui/table/table-caption.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption bind:this={ref} class={cn("text-muted-foreground mt-4 text-sm", className)} {...restProps}>
+	{@render children?.()}
+</caption>
diff --git a/packages/web/src/lib/components/ui/table/table-cell.svelte b/packages/web/src/lib/components/ui/table/table-cell.svelte
new file mode 100644
index 0000000..0536552
--- /dev/null
+++ b/packages/web/src/lib/components/ui/table/table-cell.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLTdAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+	bind:this={ref}
+	class={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</td>
diff --git a/packages/web/src/lib/components/ui/table/table-footer.svelte b/packages/web/src/lib/components/ui/table/table-footer.svelte
new file mode 100644
index 0000000..0267c47
--- /dev/null
+++ b/packages/web/src/lib/components/ui/table/table-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot bind:this={ref} class={cn("bg-muted/50 font-medium", className)} {...restProps}>
+	{@render children?.()}
+</tfoot>
diff --git a/packages/web/src/lib/components/ui/table/table-head.svelte b/packages/web/src/lib/components/ui/table/table-head.svelte
new file mode 100644
index 0000000..5300ce6
--- /dev/null
+++ b/packages/web/src/lib/components/ui/table/table-head.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLThAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th
+	bind:this={ref}
+	class={cn(
+		"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</th>
diff --git a/packages/web/src/lib/components/ui/table/table-header.svelte b/packages/web/src/lib/components/ui/table/table-header.svelte
new file mode 100644
index 0000000..684a57b
--- /dev/null
+++ b/packages/web/src/lib/components/ui/table/table-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead bind:this={ref} class={cn("[&_tr]:border-b", className)} {...restProps}>
+	{@render children?.()}
+</thead>
diff --git a/packages/web/src/lib/components/ui/table/table-row.svelte b/packages/web/src/lib/components/ui/table/table-row.svelte
new file mode 100644
index 0000000..9e693bc
--- /dev/null
+++ b/packages/web/src/lib/components/ui/table/table-row.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
+</script>
+
+<tr
+	bind:this={ref}
+	class={cn(
+		"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</tr>
diff --git a/packages/web/src/lib/components/ui/table/table.svelte b/packages/web/src/lib/components/ui/table/table.svelte
new file mode 100644
index 0000000..e3a95b6
--- /dev/null
+++ b/packages/web/src/lib/components/ui/table/table.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div class="relative w-full overflow-auto">
+	<table bind:this={ref} class={cn("w-full caption-bottom text-sm", className)} {...restProps}>
+		{@render children?.()}
+	</table>
+</div>
diff --git a/packages/web/src/routes/progress/+page.server.ts b/packages/web/src/routes/progress/+page.server.ts
index 8046474..88b4421 100755
--- a/packages/web/src/routes/progress/+page.server.ts
+++ b/packages/web/src/routes/progress/+page.server.ts
@@ -2,7 +2,7 @@ import { db } from '$lib/db';
 import { tasks } from '$lib/db/schema.js';
 import { desc } from 'drizzle-orm';
 
-export const load = async ({ cookies }) => {
+export const load = async () => {
 	return {
 		tasks: await db.query.tasks.findMany({
 			with: {
diff --git a/packages/web/src/routes/progress/+page.svelte b/packages/web/src/routes/progress/+page.svelte
index be69947..9d5b5a7 100755
--- a/packages/web/src/routes/progress/+page.svelte
+++ b/packages/web/src/routes/progress/+page.svelte
@@ -19,6 +19,13 @@
 			<h1 class="font-bold text-2xl">
 				Tasks ({data.tasks.length})
 			</h1>
+
+			<a href="/progress/topics">
+				<button class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-600 transition">
+					Topics
+				</button>
+			</a>
+
 			{#if data.editable}
 				<a href="/progress/create">
 					<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition">
@@ -59,12 +66,12 @@
 						</tr>
 					</thead>
 					<tbody>
-                                                {#each filteredTasks as task, index}
-                                                        <tr class="{index % 2 === 0 ? 'bg-black' : 'bg-gray-950'} hover:bg-gray-800">
-                                                                <td class="px-6 py-2 border-b">
-                                                                        <a href={`/progress/${task.id}`} class="text-blue-500 hover:underline">
-                                                                                {data.tasks.indexOf(task) + 1}. {task.name}
-                                                                        </a>
+						{#each filteredTasks as task, index}
+							<tr class="{index % 2 === 0 ? 'bg-black' : 'bg-gray-950'} hover:bg-gray-800">
+								<td class="px-6 py-2 border-b">
+									<a href={`/progress/${task.id}`} class="text-blue-500 hover:underline">
+										{data.tasks.indexOf(task) + 1}. {task.name}
+									</a>
 								</td>
 								<td class="px-6 py-2 border-b">
 									<a href={`/progress/${task.id}`} class="flex gap-2 flex-wrap">
diff --git a/packages/web/src/routes/progress/topics/+page.server.ts b/packages/web/src/routes/progress/topics/+page.server.ts
new file mode 100644
index 0000000..a89606c
--- /dev/null
+++ b/packages/web/src/routes/progress/topics/+page.server.ts
@@ -0,0 +1,17 @@
+import { db } from '$lib/db';
+import { topics } from '$lib/db/schema';
+import { eq } from 'drizzle-orm';
+
+export const load = async ({ params }) => {
+	return {
+		topics: await db.query.topics.findMany({
+			with: {
+				topicsToTasks: {
+					with: {
+						task: true
+					}
+				}
+			}
+		})
+	};
+};
diff --git a/packages/web/src/routes/progress/topics/+page.svelte b/packages/web/src/routes/progress/topics/+page.svelte
new file mode 100644
index 0000000..31c7418
--- /dev/null
+++ b/packages/web/src/routes/progress/topics/+page.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import * as Table from '$lib/components/ui/table/index.js';
+
+	let { data } = $props();
+</script>
+
+<Table.Root>
+	<Table.Header>
+		<Table.Row>
+			<Table.Head class="w-[100px]">Name</Table.Head>
+			<Table.Head>Amount of Tasks</Table.Head>
+			<Table.Head class="text-right">Actions</Table.Head>
+		</Table.Row>
+	</Table.Header>
+	<Table.Body>
+		{#each data.topics as topic}
+			<Table.Row>
+				<Table.Cell class="font-medium">{topic.name}</Table.Cell>
+				<Table.Cell>{topic.topicsToTasks.length}</Table.Cell>
+
+				<Table.Cell class="text-right"></Table.Cell>
+			</Table.Row>
+		{/each}
+	</Table.Body>
+</Table.Root>