diff --git a/packages/web/src/routes/progress/+page.server.ts b/packages/web/src/routes/progress/+page.server.ts
index 8c8d3c6..38f84e5 100644
--- a/packages/web/src/routes/progress/+page.server.ts
+++ b/packages/web/src/routes/progress/+page.server.ts
@@ -1,7 +1,7 @@
-import { db, tasks } from "$lib/db/schema"
+import { db } from "$lib/db"
 
 export const load = async () => {
 	return {
-		tasks: await db.select().from(tasks)
+		tasks: await db.query.tasks.findMany()
 	}
 }
diff --git a/packages/web/src/routes/progress/[id]/+page.server.ts b/packages/web/src/routes/progress/[id]/+page.server.ts
index 112e483..e3bba51 100644
--- a/packages/web/src/routes/progress/[id]/+page.server.ts
+++ b/packages/web/src/routes/progress/[id]/+page.server.ts
@@ -1,12 +1,26 @@
 import { db } from "$lib/db"
+import { tasksToTopics } from "$lib/db/schema"
 
 export const load = async () => {
 	return {
 		task: (await db.query.tasks.findFirst({
 			with: {
-				tasksToTopics: true
+				tasksToTopics: {
+					with: {
+						topic: true
+					}
+				}
 			}
 		})
-		)
+		),
+		topics: await db.query.topics.findMany()
+	}
+}
+
+export const actions = {
+	addTopic: async ({ request, params }) => {
+		const data = await request.formData()
+
+		const task = await db.insert(tasksToTopics).values({ taskId: params.id, topicId: data.get('topic-id') }).returning()
 	}
 }
diff --git a/packages/web/src/routes/progress/[id]/+page.svelte b/packages/web/src/routes/progress/[id]/+page.svelte
index b670909..0ef9650 100644
--- a/packages/web/src/routes/progress/[id]/+page.svelte
+++ b/packages/web/src/routes/progress/[id]/+page.svelte
@@ -1,14 +1,56 @@
 <script lang="ts">
 	let { data } = $props();
+
+	let addTopicsDropdownShown = $state(false);
 </script>
 
 <h1 class="my-4 text-2xl font-bold text-center">{data.task?.name}</h1>
 
-<h2>Topics ({data.task?.tasksToTopics.length})</h2>
-{#if data.task?.tasksToTopics}
-	{#each data.task?.tasksToTopics as topic}
-		<div class="rounded px-4 py-2 bg-gray-300">
-			{topic.topicId}
+<div class="my-4">
+	<div class="flex justify-center gap-4 items-center relative">
+		<h2 class="text-xl font-semibold">topics ({data.task?.tasksToTopics.length})</h2>
+		<div class="relative">
+			<button
+				class="px-2 py-1 rounded bg-green-500 text-white font-medium shadow"
+				onclick={() => (addTopicsDropdownShown = !addTopicsDropdownShown)}
+			>
+				+
+			</button>
+			{#if addTopicsDropdownShown}
+				<form
+					method="post"
+					action="?/addTopic"
+					class="absolute mt-2 rounded-xl bg-gray-100 p-2 shadow-md items-center flex flex-col"
+				>
+					<select name="topic-id" class="rounded p-2 border border-gray-300 my-2" required>
+						<option value="" disabled selected>select a topic</option>
+						{#each data.topics as topic}
+							{#if !data.task?.tasksToTopics.some((t) => t.topicId === topic.id)}
+								<option value={topic.id}>{topic.name}</option>
+							{/if}
+						{/each}
+					</select>
+					<button
+						type="submit"
+						class="ml-2 px-2 py-1 rounded bg-blue-500 text-white font-medium shadow"
+					>
+						Add
+					</button>
+				</form>
+			{/if}
 		</div>
-	{/each}
-{/if}
+	</div>
+
+	<div class="flex justify-center flex-wrap gap-2 my-1">
+		{#if data.task?.tasksToTopics}
+			{#each data.task?.tasksToTopics as topic}
+				<div
+					class="bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer"
+					title="Click for more details about {topic.topic.name}"
+				>
+					{topic.topic.name}
+				</div>
+			{/each}
+		{/if}
+	</div>
+</div>
diff --git a/packages/web/src/routes/progress/create/+page.server.ts b/packages/web/src/routes/progress/create/+page.server.ts
index f90e503..ce0adb5 100644
--- a/packages/web/src/routes/progress/create/+page.server.ts
+++ b/packages/web/src/routes/progress/create/+page.server.ts
@@ -1,4 +1,5 @@
-import { db, tasks } from "$lib/db/schema"
+import { db } from "$lib/db"
+import { tasks } from "$lib/db/schema"
 import { redirect } from "@sveltejs/kit"
 
 export const actions = {