diff --git a/src/lib/components/channel.svelte b/src/lib/components/channel.svelte
index dd9f7f0..f292f22 100644
--- a/src/lib/components/channel.svelte
+++ b/src/lib/components/channel.svelte
@@ -1,20 +1,18 @@
 <script lang="ts">
   import MessageSquare from 'lucide-svelte/icons/message-square';
-  import MessageUnread from 'lucide-svelte/icons/message-square-dot';
+  import { page } from '$app/state';
 
   interface Props {
     channelName: string;
-    unread?: boolean;
   }
 
-  const { channelName, unread = false }: Props = $props();
+  const { channelName }: Props = $props();
+  const color = $derived(page.params.channel === channelName ? 'text-primary' : 'text-muted-foreground hover:text-primary');
+
+  $inspect(page.params.channel, color);
 </script>
 
-<a href={`/channel/${channelName}`} class="text-muted-foreground hover:text-primary flex items-center gap-3 rounded-lg px-3 py-2 transition-all">
-  {#if unread}
-    <MessageUnread class="h-4 w-4" />
-  {:else}
-    <MessageSquare class="h-4 w-4" />
-  {/if}
+<a href={`/channel/${channelName}`} class={`flex items-center gap-3 rounded-lg px-3 py-2 transition-all ${color}`}>
+  <MessageSquare class="h-4 w-4" />
   {channelName}
 </a>
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index 8f4aede..8640f49 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -1,7 +1,6 @@
 import { db } from '$lib/server/db';
-import type { LayoutServerLoad } from './$types';
 
-export const load: LayoutServerLoad = async () => {
+export async function load() {
   const rows = await db.getChannels();
   const channels: string[] = rows
     ? rows.map((value) => {
@@ -12,4 +11,4 @@ export const load: LayoutServerLoad = async () => {
   return {
     channels,
   };
-};
+}