diff --git a/lib/bloom/components/avatar.ex b/lib/bloom/components/avatar.ex
index 84d78cd..ede6a85 100644
--- a/lib/bloom/components/avatar.ex
+++ b/lib/bloom/components/avatar.ex
@@ -49,12 +49,8 @@ defmodule Bloom.Components.Avatar do
         "https://api.dicebear.com/8.x/#{assigns[:style]}/svg?seed=#{assigns[:name]}"
 
     ~H"""
-    <div class={["flex items-center w-12 h-12", @class]} {@rest}>
-      <img
-        src={image}
-        alt={"#{@name} avatar"}
-        class="rounded-lg"
-      />
+    <div class={["flex h-12 w-12 items-center", @class]} {@rest}>
+      <img src={image} alt={"#{@name} avatar"} class="rounded-lg" />
     </div>
     """
   end
diff --git a/lib/bloom/components/bento_grid.ex b/lib/bloom/components/bento_grid.ex
index 0a69ebd..462d337 100644
--- a/lib/bloom/components/bento_grid.ex
+++ b/lib/bloom/components/bento_grid.ex
@@ -14,7 +14,10 @@ defmodule Bloom.Components.BentoGrid do
 
   def bento_grid(assigns) do
     ~H"""
-    <div class={["flex flex-col md:grid w-full md:auto-rows-[16rem] !grid-cols-1 md:grid-cols-3 gap-4", @class]}>
+    <div class={[
+      "!grid-cols-1 flex w-full flex-col gap-4 md:auto-rows-[16rem] md:grid md:grid-cols-3",
+      @class
+    ]}>
       <%= render_slot(@inner_block) %>
     </div>
     """
@@ -37,20 +40,22 @@ defmodule Bloom.Components.BentoGrid do
   def bento_card(assigns) do
     ~H"""
     <div class={[
-      "group relative row-span-#{@row_end - @row_start} col-span-#{@col_end - @col_start} row-start-#{@row_start} row-end-#{@row_end} col-start--#{@col_start} col-end-#{@col_end} flex flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]
-      transform-gpu dark:bg-zinc-900 dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
+      "row-span-#{@row_end - @row_start} col-span-#{@col_end - @col_start} row-start-#{@row_start} row-end-#{@row_end} col-start--#{@col_start} col-end-#{@col_end} group relative flex transform-gpu flex-col justify-between overflow-hidden rounded-xl bg-white [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)] dark:bg-zinc-900 dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]",
       @class
     ]}>
       <div><%= render_slot(@background) %></div>
       <div class="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10">
-        <span class={["h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75", @icon]} />
+        <span class={[
+          "h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75",
+          @icon
+        ]} />
         <h3 class="text-xl font-semibold text-neutral-700 dark:text-neutral-300"><%= @name %></h3>
         <p class="max-w-lg text-neutral-400"><%= @description %></p>
       </div>
       <div class="absolute bottom-0 flex w-full translate-y-10 transform-gpu flex-row items-center p-4 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
         <%= render_slot(@inner_block) %>
       </div>
-      <div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] group-hover:dark:bg-neutral-800/10">
+      <div class="pointer-events-none absolute inset-0 transform-gpu transition-all duration-300 group-hover:bg-black/[.03] dark:group-hover:bg-neutral-800/10">
       </div>
     </div>
     """
diff --git a/lib/bloom/components/card.ex b/lib/bloom/components/card.ex
index 98f8e44..8c8c4e8 100644
--- a/lib/bloom/components/card.ex
+++ b/lib/bloom/components/card.ex
@@ -15,12 +15,15 @@ defmodule Bloom.Components.Card do
 
   def card(assigns) do
     ~H"""
-    <figure class={[
-      "relative w-64 cursor-pointer overflow-hidden rounded-xl border transition-all p-4",
-      "border-gray-200 bg-neutral-50-50 hover:bg-neutral-100 text-zinc-500",
-      "dark:border-gray-50 dark:bg-gray-50 dark:hover:bg-gray-50",
-      @class
-    ]} {@rest}>
+    <figure
+      class={[
+        "relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4 transition-all",
+        "bg-neutral-50-50 border-gray-200 text-zinc-500 hover:bg-neutral-100",
+        "dark:border-gray-50 dark:bg-gray-50 dark:hover:bg-gray-50",
+        @class
+      ]}
+      {@rest}
+    >
       <div class="flex flex-row items-center gap-2">
         <img :if={assigns[:image]} class="rounded-full" width="32" height="32" alt="" src={@image} />
         <div class="flex flex-col">
diff --git a/lib/bloom/components/code_snippet.ex b/lib/bloom/components/code_snippet.ex
index 43c12c4..8367a65 100644
--- a/lib/bloom/components/code_snippet.ex
+++ b/lib/bloom/components/code_snippet.ex
@@ -20,16 +20,15 @@ defmodule Bloom.Components.CodeSnippet do
     ~H"""
     <div
       class={[
-        "w-fit min-w-[18rem] rounded-xl bg-#{@background_color} py-5 text-#{@text_color}",
+        "bg-#{@background_color} text-#{@text_color} min-w-[18rem] w-fit rounded-xl py-5",
         @parent_class
-      ]} {@rest}>
-      <div class="mb-4 block h-3 w-3 rounded-full opacity-30 shadow-[1.4em_0,2.8em_0,4.2em_0]"></div>
+      ]}
+      {@rest}
+    >
+      <div class="shadow-[1.4em_0,2.8em_0,4.2em_0] mb-4 block h-3 w-3 rounded-full opacity-30"></div>
       <pre
         before={@delimiter}
-        class={[
-          "whitespace-normal px-8 mt-6 before:opacity-50 before:content-[attr(before)]",
-          @class
-        ]}
+        class={["mt-6 whitespace-normal px-8 before:content-[attr(before)] before:opacity-50", @class]}
       >
         <%= render_slot(@inner_block) %>
       </pre>
diff --git a/lib/bloom/components/glow_button.ex b/lib/bloom/components/glow_button.ex
index 7469cd2..75a49b0 100644
--- a/lib/bloom/components/glow_button.ex
+++ b/lib/bloom/components/glow_button.ex
@@ -35,14 +35,15 @@ defmodule Bloom.Components.GlowButton do
 
   def glow_button(assigns) do
     ~H"""
-      <div class={["w-fit relative", @parent_class]} {@rest}>
-        <div class={"group-hover:opacity-100 animate-tilt transition duration-1000 group-hover:duration-200 absolute blur-lg opacity-75 -inset-0.5 group-hover:-inset-1 bg-gradient-to-r from-#{@from_color} to-#{@to_color} rounded-lg"}></div>
-          <button class={["relative px-7 py-4 bg-black rounded-lg leading-none", @class]}>
-            <span class={"text-#{@text_color} font-medium group-hover:text-#{@from_color} transition-all duration-200"}>
-              <%= render_slot(@inner_block) %>
-            </span>
-        </button>
+    <div class={["relative w-fit", @parent_class]} {@rest}>
+      <div class={"from-#{@from_color} to-#{@to_color} animate-tilt absolute -inset-0.5 rounded-lg bg-gradient-to-r opacity-75 blur-lg transition duration-1000 group-hover:-inset-1 group-hover:opacity-100 group-hover:duration-200"}>
       </div>
+      <button class={["relative rounded-lg bg-black px-7 py-4 leading-none", @class]}>
+        <span class={"text-#{@text_color} font-medium transition-all duration-200 group-hover:text-#{@from_color}"}>
+          <%= render_slot(@inner_block) %>
+        </span>
+      </button>
+    </div>
     """
   end
 end
diff --git a/lib/bloom/components/gradient_text.ex b/lib/bloom/components/gradient_text.ex
index f3344ae..30b06a4 100644
--- a/lib/bloom/components/gradient_text.ex
+++ b/lib/bloom/components/gradient_text.ex
@@ -15,7 +15,13 @@ defmodule Bloom.Components.GradientText do
 
   def gradient_text(assigns) do
     ~H"""
-    <span class={["bg-gradient-to-r bg-clip-text text-transparent from-#{@from_color} to-#{@to_color}", @class]} {@rest}>
+    <span
+      class={[
+        "from-#{@from_color} to-#{@to_color} bg-gradient-to-r bg-clip-text text-transparent",
+        @class
+      ]}
+      {@rest}
+    >
       <%= render_slot(@inner_block) %>
     </span>
     """
diff --git a/lib/bloom/components/hero.ex b/lib/bloom/components/hero.ex
index 47dafba..ce75156 100644
--- a/lib/bloom/components/hero.ex
+++ b/lib/bloom/components/hero.ex
@@ -13,13 +13,13 @@ defmodule Bloom.Components.Hero do
   def hero(assigns) do
     ~H"""
     <div class={["container mx-auto px-4 py-8", @class]}>
-      <div class="text-8xl text-center font-bold text-pretty">
+      <div class="text-pretty text-center text-8xl font-bold">
         <h1><%= render_slot(@inner_block) %></h1>
       </div>
-      <div class="mt-6 text-center text-2xl flex justify-center font-medium text-pretty">
+      <div class="text-pretty mt-6 flex justify-center text-center text-2xl font-medium">
         <%= render_slot(@subtitle) %>
       </div>
-      <div class="mt-14 flex justify-center flex-row gap-4 items-center">
+      <div class="mt-14 flex flex-row items-center justify-center gap-4">
         <%= render_slot(@actions) %>
       </div>
     </div>
diff --git a/lib/bloom/components/marquee.ex b/lib/bloom/components/marquee.ex
index d618c58..3decc58 100644
--- a/lib/bloom/components/marquee.ex
+++ b/lib/bloom/components/marquee.ex
@@ -57,8 +57,8 @@ defmodule Bloom.Components.Marquee do
         <div
           class={[
             "flex shrink-0 justify-around [gap:var(--gap)]",
-            @vertical && "flex-col animate-marquee-vertical",
-            !@vertical && "flex-row animate-marquee",
+            @vertical && "animate-marquee-vertical flex-col",
+            !@vertical && "animate-marquee flex-row",
             @pause_on_hover && "group-hover:[animation-play-state:paused]"
           ]}
           style={@reverse && "animation-direction: reverse;"}