diff --git a/src/routes/tasks/+page.svelte b/src/routes/tasks/+page.svelte
index baafa10..0649cb7 100644
--- a/src/routes/tasks/+page.svelte
+++ b/src/routes/tasks/+page.svelte
@@ -1,36 +1,36 @@
 <script lang="ts">
-	import type { PageProps } from "./$types";
+import type { PageProps } from "./$types";
 
-	let { data }: PageProps = $props();
+let { data }: PageProps = $props();
 </script>
 
-{#if data.tasks.status === "ok" && data.tasks.tasks !== undefined}
-	<p>{data.tasks.tasks.length} total records.</p>
-	<table>
-		<thead>
-			<tr>
-				<td><strong>Id</strong></td>
-				<td><strong>Description</strong></td>
-				<td><strong>Status</strong></td>
-			</tr>
-		</thead>
-		<tbody>
-			{#each data.tasks.tasks as task (task.id)}
-				<tr>
-					<td>
-						<a
-							href={`/tasks/${task.type.prefix}${task.taskId}`}
-						>
-							{task.type?.prefix +
-								task.taskId}
-						</a>
-					</td>
-					<td>{task.description}</td>
-					<td>{task.status}</td>
-				</tr>
-			{/each}
-		</tbody>
-	</table>
+{#if data.tasks.status === "ok" && data.tasks.data !== undefined}
+  <p>{data.tasks.data.length} total records.</p>
+  <table>
+    <thead>
+      <tr>
+        <td><strong>Id</strong></td>
+        <td><strong>Description</strong></td>
+        <td><strong>Status</strong></td>
+      </tr>
+    </thead>
+    <tbody>
+      {#each data.tasks.data as task (task.id)}
+        <tr>
+          <td>
+            <a href={`/tasks/${task.type.prefix}${task.taskId}`}>
+              {
+                task.type?.prefix
+                + task.taskId
+              }
+            </a>
+          </td>
+          <td>{task.description}</td>
+          <td>{task.status}</td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
 {:else}
-	<p>There was an error accessing the database.</p>
+  <p>There was an error accessing the database.</p>
 {/if}
diff --git a/src/routes/tasks/[task_id]/+page.svelte b/src/routes/tasks/[task_id]/+page.svelte
index c3cef46..db65da9 100644
--- a/src/routes/tasks/[task_id]/+page.svelte
+++ b/src/routes/tasks/[task_id]/+page.svelte
@@ -1,23 +1,37 @@
 <script lang="ts">
-	import type { PageProps } from "./$types";
+import type { PageProps } from "./$types";
 
-	let { data }: PageProps = $props();
-	const task = data.task.tasks[0];
+let { data }: PageProps = $props();
 </script>
 
-<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>
+{#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}
 
 <style>
-	.container {
-		display: flex;
-		gap: 1rem;
-	}
+.container {
+  display: flex;
+  gap: 1rem;
+}
 </style>