diff --git a/src/routes/tasks/[task_id]/+page.server.ts b/src/routes/tasks/[task_id]/+page.server.ts
index bae9647..38f6f3f 100644
--- a/src/routes/tasks/[task_id]/+page.server.ts
+++ b/src/routes/tasks/[task_id]/+page.server.ts
@@ -1,9 +1,33 @@
+import logger from "$lib/server/logger";
 import TasksService from "$lib/server/services/tasks";
+import { error } from "@sveltejs/kit";
 import type { PageServerData } from "./$types";
 
 export const load: PageServerData = async ({ params }) => {
   const tasks = new TasksService("internal");
+  const taskResult = await tasks.getByTaskId([params.task_id]);
+
+  if (taskResult.status === "failure" || !taskResult.data || taskResult.data.length === 0) {
+    error(404, `No record for '${params.task_id}'.`);
+  }
+  if (taskResult.data.length > 1) {
+    logger.error(`Mulitple database entries match '${params.task_id}' when there should only be one.`);
+    error(500, "Internal error. Check the logs.");
+  }
+
+  const task = taskResult.data[0];
+
+  const [parent, children] = await Promise.all([
+    task.parent
+      ? tasks.getByDbId([task.parent])
+      : Promise.resolve({ status: "ok" }),
+    tasks.getByParent(task.id),
+  ]);
+
   return {
-    task: await tasks.getByTaskId([params.task_id]),
+    task,
+    parent,
+    children,
   };
 };
+
diff --git a/src/routes/tasks/[task_id]/+page.svelte b/src/routes/tasks/[task_id]/+page.svelte
index db65da9..81eefbc 100644
--- a/src/routes/tasks/[task_id]/+page.svelte
+++ b/src/routes/tasks/[task_id]/+page.svelte
@@ -1,33 +1,35 @@
 <script lang="ts">
+import type { Task } from "$lib/server/services/tasks";
+import TaskView from "$lib/ui/Tasks/TaskView.svelte";
 import type { PageProps } from "./$types";
 
 let { data }: PageProps = $props();
+
+console.log(data);
+const parentTask: Task | null =
+  (data.parent?.status === "ok" && data.parent.data)
+    ? data.parent.data[0] ?? null
+    : null;
+const childrenTask: Task[] =
+  (data.children.status === "ok" && data.children.data)
+    ? data.children.data
+    : [];
+
+const task = data.task;
+const parent = {
+  prefix: parentTask?.type.prefix ?? null,
+  taskId: parentTask?.taskId ?? null,
+  description: parentTask?.description ?? null,
+};
+const children = childrenTask.map(x => ({
+  prefix: x.type.prefix,
+  taskId: x.taskId,
+  description: x.description,
+  status: x.status,
+}));
 </script>
 
-{#if data.task.status === "ok"}
-  {@const task = data.task.data[0]}
-  {#if task}
-    <h1>
-      {`[[${task.type.prefix}${task.taskId}]] - ${task.description}`}
-    </h1>
-    <div class="container">
-      <p><strong>{task.status}</strong></p>
-      <p><strong>{task.priority}</strong></p>
-    </div>
-    <div>
-      <h2>Body</h2>
-      <p>{task.body}</p>
-    </div>
-  {:else}
-    <p>Task not found.</p>
-  {/if}
-{:else if data.task.status === "failure"}
-  <h2>Error Loading Task</h2>
-  <p>{data.task.error}</p>
-  {#if data.task.code}
-    <p>Error code: {data.task.code}</p>
-  {/if}
-{/if}
+<TaskView {task} {parent} {children} />
 
 <style>
 .container {