diff --git a/src/lib/components/channelDialog.svelte b/src/lib/components/channelDialog.svelte
index bebe7a2..64700bc 100644
--- a/src/lib/components/channelDialog.svelte
+++ b/src/lib/components/channelDialog.svelte
@@ -33,7 +33,7 @@
         bind:value={$form.channelName}
         aria-invalid={$errors.channelName ? 'true' : undefined}
         {...$constraints.channelName} />
-      {#if $errors.channelName}<Label for="channelName" class="text-red-500 m-0 p-0">{$errors.channelName}</Label>{/if}
+      {#if $errors.channelName}<Label for="channelName" class="m-0 p-0 text-red-500">{$errors.channelName}</Label>{/if}
       <Dialog.Footer>
         <Button type="submit">Create</Button>
       </Dialog.Footer>
diff --git a/src/lib/components/mainLayout.svelte b/src/lib/components/mainLayout.svelte
index 877c51a..747df1f 100644
--- a/src/lib/components/mainLayout.svelte
+++ b/src/lib/components/mainLayout.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
-  <div class="bg-muted/40 hidden border-r md:block">
+  <div class="hidden border-r bg-muted/40 md:block">
     <div class="flex h-full max-h-screen flex-col gap-2">
       <div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
         <a href="/" class="flex items-center gap-2 font-semibold">
@@ -45,7 +45,7 @@
       </div>
     </div>
   </div>
-  <div class="p-2 max-h-screen">
+  <div class="max-h-screen p-2">
     {@render children()}
   </div>
 </div>
diff --git a/src/lib/components/message.svelte b/src/lib/components/message.svelte
index 18a20f1..c7af1b4 100644
--- a/src/lib/components/message.svelte
+++ b/src/lib/components/message.svelte
@@ -3,9 +3,9 @@
   const { message, imageSrc, user }: TypeMessage = $props();
 </script>
 
-<div class="w-full hover:bg-zinc-200 flex py-2 dark:hover:bg-stone-900">
+<div class="flex w-full py-2 hover:bg-zinc-200 dark:hover:bg-stone-900">
   <div class="avatar mx-2 rounded-sm">
-    <div class="w-12 h-12 overflow-hidden rounded-lg border bg-white">
+    <div class="h-12 w-12 overflow-hidden rounded-lg border bg-white">
       <img src={imageSrc} alt="Profile image for {user}" />
     </div>
   </div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
index 72ff678..bbe3e27 100644
--- a/src/lib/components/ui/card/card-description.svelte
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -8,6 +8,6 @@
   export { className as class };
 </script>
 
-<p class={cn('text-muted-foreground text-sm', className)} {...$$restProps}>
+<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
   <slot />
 </p>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
index 2b8296a..7ff52a0 100644
--- a/src/lib/components/ui/card/card.svelte
+++ b/src/lib/components/ui/card/card.svelte
@@ -10,7 +10,7 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class={cn('bg-card text-card-foreground rounded-xl border shadow', className)}
+  class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
   {...$$restProps}
   on:click
   on:focusin
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
index defccc8..b24d9a5 100644
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -20,13 +20,13 @@
     {transition}
     {transitionConfig}
     class={cn(
-      'bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg md:w-full',
+      'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full',
       className,
     )}
     {...$$restProps}>
     <slot />
     <DialogPrimitive.Close
-      class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
       <Cross2 class="h-4 w-4" />
       <span class="sr-only">Close</span>
     </DialogPrimitive.Close>
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
index 64e79f7..de03478 100644
--- a/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -8,6 +8,6 @@
   export { className as class };
 </script>
 
-<DialogPrimitive.Description class={cn('text-muted-foreground text-sm', className)} {...$$restProps}>
+<DialogPrimitive.Description class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
   <slot />
 </DialogPrimitive.Description>
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
index 2ef74db..80cc79c 100644
--- a/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -16,5 +16,5 @@
 <DialogPrimitive.Overlay
   {transition}
   {transitionConfig}
-  class={cn('bg-background/80 fixed inset-0 z-50 backdrop-blur-sm ', className)}
+  class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ', className)}
   {...$$restProps} />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index b976af4..d30cebc 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -14,7 +14,7 @@
 <DropdownMenuPrimitive.CheckboxItem
   bind:checked
   class={cn(
-    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
     className,
   )}
   {...$$restProps}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index a9f8d73..7bf1754 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -15,7 +15,7 @@
   {transition}
   {transitionConfig}
   {sideOffset}
-  class={cn('bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none', className)}
+  class={cn('z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none', className)}
   {...$$restProps}
   on:keydown>
   <slot />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index ef74d45..6d00677 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -14,7 +14,7 @@
 
 <DropdownMenuPrimitive.Item
   class={cn(
-    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
     inset && 'pl-8',
     className,
   )}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index acfdb3a..e06b473 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -13,7 +13,7 @@
 
 <DropdownMenuPrimitive.RadioItem
   class={cn(
-    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
     className,
   )}
   {value}
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
index 0d46384..dbf2184 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -8,4 +8,4 @@
   export { className as class };
 </script>
 
-<DropdownMenuPrimitive.Separator class={cn('bg-muted -mx-1 my-1 h-px', className)} {...$$restProps} />
+<DropdownMenuPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', className)} {...$$restProps} />
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index 1955384..bf25cad 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -16,7 +16,7 @@
 <DropdownMenuPrimitive.SubContent
   {transition}
   {transitionConfig}
-  class={cn('bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none', className)}
+  class={cn('z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none', className)}
   {...$$restProps}
   on:keydown
   on:focusout
diff --git a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index 7e4bc9d..d08db87 100644
--- a/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -15,7 +15,7 @@
 
 <DropdownMenuPrimitive.SubTrigger
   class={cn(
-    'data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+    'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground',
     inset && 'pl-8',
     className,
   )}
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
index ef65e2a..e6c1ec3 100644
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@@ -17,7 +17,7 @@
 
 <input
   class={cn(
-    'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+    'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
     className,
   )}
   bind:value
diff --git a/src/lib/components/ui/sheet/sheet-content.svelte b/src/lib/components/ui/sheet/sheet-content.svelte
index 1937f26..854de27 100644
--- a/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/src/lib/components/ui/sheet/sheet-content.svelte
@@ -29,7 +29,7 @@
     {...$$restProps}>
     <slot />
     <SheetPrimitive.Close
-      class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
       <Cross2 class="h-4 w-4" />
       <span class="sr-only">Close</span>
     </SheetPrimitive.Close>
diff --git a/src/lib/components/ui/sheet/sheet-description.svelte b/src/lib/components/ui/sheet/sheet-description.svelte
index ba17548..99ed1b9 100644
--- a/src/lib/components/ui/sheet/sheet-description.svelte
+++ b/src/lib/components/ui/sheet/sheet-description.svelte
@@ -8,6 +8,6 @@
   export { className as class };
 </script>
 
-<SheetPrimitive.Description class={cn('text-muted-foreground text-sm', className)} {...$$restProps}>
+<SheetPrimitive.Description class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
   <slot />
 </SheetPrimitive.Description>
diff --git a/src/lib/components/ui/sheet/sheet-overlay.svelte b/src/lib/components/ui/sheet/sheet-overlay.svelte
index 52b450a..26e55ff 100644
--- a/src/lib/components/ui/sheet/sheet-overlay.svelte
+++ b/src/lib/components/ui/sheet/sheet-overlay.svelte
@@ -16,5 +16,5 @@
 <SheetPrimitive.Overlay
   {transition}
   {transitionConfig}
-  class={cn('bg-background/80 fixed inset-0 z-50 backdrop-blur-sm', className)}
+  class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)}
   {...$$restProps} />
diff --git a/src/lib/components/ui/sheet/sheet-title.svelte b/src/lib/components/ui/sheet/sheet-title.svelte
index b8d0128..11267e6 100644
--- a/src/lib/components/ui/sheet/sheet-title.svelte
+++ b/src/lib/components/ui/sheet/sheet-title.svelte
@@ -8,6 +8,6 @@
   export { className as class };
 </script>
 
-<SheetPrimitive.Title class={cn('text-foreground text-lg font-semibold', className)} {...$$restProps}>
+<SheetPrimitive.Title class={cn('text-lg font-semibold text-foreground', className)} {...$$restProps}>
   <slot />
 </SheetPrimitive.Title>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 5edf40b..f5ee9cd 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -6,12 +6,12 @@
 </script>
 
 <main class="relative size-full">
-  <Card.Root class="md:w-1/4 w-1/2 h-1/2 abs-center flex flex-col">
+  <Card.Root class="abs-center flex h-1/2 w-1/2 flex-col md:w-1/4">
     <Card.Header class="h-fit">
       <Card.Title class="text-center">{page.status} - {page.error?.message}</Card.Title>
     </Card.Header>
     <Card.Content class="relative grow">
-      <BrokenHeart class="size-1/2 abs-center" />
+      <BrokenHeart class="abs-center size-1/2" />
     </Card.Content>
     <Card.Footer class="h-fit">
       <Button href="/channel/general" variant="secondary" class="mx-auto">Go Home</Button>
diff --git a/src/routes/channel/[channel]/+page.svelte b/src/routes/channel/[channel]/+page.svelte
index 44d9a1f..2920b99 100644
--- a/src/routes/channel/[channel]/+page.svelte
+++ b/src/routes/channel/[channel]/+page.svelte
@@ -39,13 +39,13 @@
     <Message imageSrc={message.imageSrc} user={message.user} message={message.message} />
   {/each}
 {/snippet}
-<div class="flex flex-1 flex-col items-center justify-center rounded-lg shadow-sm gap-1 h-full">
-  <div class="flex-grow flex-col-reverse flex flex-auto overflow-y-scroll overflow-x-hidden rounded-lg border w-full">
+<div class="flex h-full flex-1 flex-col items-center justify-center gap-1 rounded-lg shadow-sm">
+  <div class="flex w-full flex-auto flex-grow flex-col-reverse overflow-x-hidden overflow-y-scroll rounded-lg border">
     {@render message(socket?.messages!)}
     {@render message(data.messages)}
   </div>
   <form
-    class="flex gap-1 w-full"
+    class="flex w-full gap-1"
     onsubmit={() => {
       socket?.sendMessage(user!, msg);
       msg = '';