diff --git a/src/lib/components/channel.svelte b/src/lib/components/channel.svelte
index 7942960..b88572f 100644
--- a/src/lib/components/channel.svelte
+++ b/src/lib/components/channel.svelte
@@ -10,7 +10,7 @@
   const color = $derived(page.params.channel === channelName ? 'text-primary' : 'text-muted-foreground hover:text-primary');
 </script>
 
-<a href={`/channel/${channelName}`} class={`flex items-center gap-3 rounded-lg px-3 py-2 transition-all ${color}`}>
+<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/lib/components/channelDialog.svelte b/src/lib/components/channelDialog.svelte
index d0cdfa4..75be7b0 100644
--- a/src/lib/components/channelDialog.svelte
+++ b/src/lib/components/channelDialog.svelte
@@ -19,7 +19,7 @@
 </script>
 
 <Dialog.Root bind:open>
-  <Dialog.Trigger class={buttonVariants({ variant: 'secondary' }) + ' w-full'}>Create Channel</Dialog.Trigger>
+  <Dialog.Trigger class="{buttonVariants({ variant: 'secondary' })} w-full">Create Channel</Dialog.Trigger>
   <Dialog.Content class="sm:max-w-[425px]">
     <Dialog.Header>
       <Dialog.Title>Create Channel</Dialog.Title>
diff --git a/src/lib/components/prose.svelte b/src/lib/components/prose.svelte
index 8ced97c..a0e860e 100644
--- a/src/lib/components/prose.svelte
+++ b/src/lib/components/prose.svelte
@@ -9,6 +9,6 @@
   const { children, class: className = '' }: Props = $props();
 </script>
 
-<div class={className + ' prose prose-stone prose-blue !max-w-full dark:prose-invert prose-pre:w-fit prose-pre:max-w-[95%] '}>
+<div class="{className} prose prose-stone prose-blue !max-w-full dark:prose-invert prose-pre:w-fit prose-pre:max-w-[95%]">
   {@render children()}
 </div>