diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/actionbar.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/actionbar.ex
index 67393b56..4f1f4ba6 100644
--- a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/actionbar.ex
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/actionbar.ex
@@ -57,11 +57,14 @@ defmodule Phoenix.WebComponent.Actionbar do
       |> assign_new(:right, fn -> [] end)
 
     ~H"""
-    <div id={@id} class={[
-      "w-full h-16 px-4",
-      "flex justify-between items-center",
-      @class
-    ]}>
+    <div
+      id={@id}
+      class={[
+        "w-full h-16 px-4",
+        "flex justify-between items-center",
+        @class,
+      ]}
+    >
       <div classs="flex justify-start items-center">
         <%= render_slot(@left) %>
       </div>
diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/appbar.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/appbar.ex
index 1aedf7af..ed6e4cee 100644
--- a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/appbar.ex
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/appbar.ex
@@ -173,6 +173,7 @@ defmodule Phoenix.WebComponent.Appbar do
 
     ~H"""
     <header
+      id={@id}
       class={[
         "h-14 w-screen bg-sky-900 text-white text-xl",
         "flex items-center justify-center relative",
@@ -199,7 +200,10 @@ defmodule Phoenix.WebComponent.Appbar do
             class="hidden md:inline-flex"
           ><%= render_slot(@user_profile) %></div>
           <button
-            class="inline-flex md:hidden w-10 h-10 justify-center items-center"
+            class={[
+              "inline-flex justify-center items-center",
+              "md:hidden w-10 h-10",
+            ]}
             onclick="document.getElementById('header-md-menu').classList.toggle('hidden')"
           >
             <.wc_mdi name="menu" class="w-8 h-8" />
@@ -209,7 +213,12 @@ defmodule Phoenix.WebComponent.Appbar do
       <div id="header-md-menu" class="absolute z-50 top-14 w-full bg-sky-900 flex flex-col md:hidden hidden">
         <%= for menu <- @menus do %>
         <a
-          class="w-full bg-cyan-600 hover:bg-cyan-400 py-2 px-6 text-lg font-semibold leading-6 text-center text-white active:text-white/80"
+          class={[
+            "w-full py-2 px-6",
+            "bg-cyan-600 hover:bg-cyan-400",
+            "font-semibold leading-6",
+            "text-lg text-center text-white active:text-white/80",
+          ]}
           href={menu.to}
         ><%= menu.label %></a>
         <% end %>
diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/card.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/card.ex
index 094c8f31..26729d43 100644
--- a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/card.ex
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/card.ex
@@ -50,7 +50,9 @@ defmodule Phoenix.WebComponent.Card do
       |> assign_new(:title, fn -> nil end)
 
     ~H"""
-    <div id={@id} class={[
+    <div
+      id={@id}
+      class={[
         "m-4 p-6 flex flex-col",
         "bg-white shadow",
         @class
@@ -61,7 +63,8 @@ defmodule Phoenix.WebComponent.Card do
         class={[
           "w-full text-xl",
           "flex flex-row justify-start items-center",
-          "h-10 mb-4"
+          "h-10 mb-4",
+          Map.get(title, :class, ""),
         ]}
       >
         <%= render_slot(title) %>
diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/pagination.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/pagination.ex
index 8498a8ce..4ebc2a1d 100644
--- a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/pagination.ex
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/pagination.ex
@@ -96,7 +96,15 @@ defmodule Phoenix.WebComponent.Pagination do
       |> assign(:pages, pages)
 
     ~H"""
-    <div id={@id} class={"flex items-center justify-end border-t border-gray-200 bg-white px-4 py-3 #{@class}"}>
+    <div
+      id={@id}
+      class={[
+        "flex items-center justify-end",
+        "border-t border-gray-200",
+        "bg-white px-4 py-3",
+        @class
+      ]}
+    >
       <div class="flex flex-row items-center mx-8">
         <div class="inline-flex flex-row items-center mx-8">
           <p class="inline-flex flex-row items-center text-medium text-gray-700">
@@ -110,7 +118,13 @@ defmodule Phoenix.WebComponent.Pagination do
               phx-click={if @page_num == 1, do: false, else: @update_event}
               phx-value-current={if @page_num == 1, do: nil, else: @page_num - 1}
               disabled={if @page_num == 1, do: true, else: false}
-              class={"#{if @page_num == 1, do: "", else: "cursor-pointer"} relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"}>
+              class={[
+                "relative inline-flex items-center",
+                "rounded-l-md border border-gray-300",
+                "bg-white hover:bg-gray-50 px-2 py-2",
+                "text-sm font-medium text-gray-500 focus:z-20",
+                if(@page_num == 1, do: "", else: "cursor-pointer"),
+              ]}>
               <span class="sr-only">Previous</span>
               <!-- Heroicon name: mini/chevron-left -->
               <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -121,12 +135,26 @@ defmodule Phoenix.WebComponent.Pagination do
 
           <%= for p <- @pages do %>
             <%= if is_binary(p) do %>
-              <span class={"relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"}><%= p %></span>
+              <span
+                class={[
+                  "relative inline-flex items-center",
+                  "border border-gray-300",
+                  "bg-white hover:bg-gray-50",
+                  "px-4 py-2",
+                  "text-sm font-medium text-gray-500 focus:z-20",
+                ]}
+              ><%= p %></span>
             <% else %>
               <span
                 phx-click={@update_event} phx-value-current={p}
                 aria-current={if p == @page_num, do: "page", else: false }
-                class={"relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20" <> if p == @page_num, do: " z-10 bg-indigo-50 border-indigo-500 text-indigo-600", else: " cursor-pointer" }
+                class={[
+                  "relative inline-flex items-center",
+                  "border border-gray-300",
+                  "bg-white hover:bg-gray-50 px-4 py-2",
+                  "text-sm font-medium text-gray-500 focus:z-20",
+                  if(p == @page_num, do: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", else: "cursor-pointer"),
+                ]}
               ><%= p %></span>
             <% end %>
           <% end %>
@@ -135,7 +163,14 @@ defmodule Phoenix.WebComponent.Pagination do
               phx-click={if @page_num == @max_page, do: false, else: @update_event}
               phx-value-current={if @page_num == @max_page, do: nil, else: @page_num + 1}
               disabled={if @page_num == @max_page, do: true, else: false}
-              class={"#{if @page_num == @max_page, do: "", else: "cursor-pointer"} relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"}>
+              class={[
+                "inline-flex items-center",
+                "relative px-2 py-2",
+                "border border-gray-300 rounded-r-md",
+                "bg-white hover:bg-gray-50",
+                "text-sm font-medium text-gray-500 focus:z-20",
+                if(@page_num == @max_page, do: "", else: "cursor-pointer"),
+              ]}>
               <span class="sr-only">Next</span>
               <!-- Heroicon name: mini/chevron-right -->
               <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -144,7 +179,6 @@ defmodule Phoenix.WebComponent.Pagination do
             </span>
           </nav>
         </div>
-
       </div>
     </div>
     """