diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/actionbar.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/actionbar.ex
index 818c4042..67393b56 100644
--- a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/actionbar.ex
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/actionbar.ex
@@ -22,8 +22,8 @@ defmodule Phoenix.WebComponent.Actionbar do
 
   """
   @doc type: :component
-  attr(:id, :string,
-    default: "",
+  attr(:id, :any,
+    default: false,
     doc: """
     html attribute id
     """
@@ -53,13 +53,15 @@ defmodule Phoenix.WebComponent.Actionbar do
   def wc_actionbar(assigns) do
     assigns =
       assigns
-      |> assign_new(:id, fn -> false end)
-      |> assign_new(:class, fn -> "" end)
       |> assign_new(:left, fn -> [] end)
       |> 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 1cba2462..02da5d23 100644
--- a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/appbar.ex
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/appbar.ex
@@ -28,8 +28,8 @@ defmodule Phoenix.WebComponent.Appbar do
 
   """
   @doc type: :component
-  attr(:id, :string,
-    default: "",
+  attr(:id, :any,
+    default: false,
     doc: """
     html attribute id
     """
@@ -75,11 +75,7 @@ defmodule Phoenix.WebComponent.Appbar do
   def wc_appbar(assigns) do
     assigns =
       assigns
-      |> assign_new(:id, fn -> false end)
-      |> assign_new(:class, fn -> "" end)
       |> assign_new(:logo, fn -> [] end)
-      |> assign_new(:title, fn -> "GSMLG Title" end)
-      |> assign_new(:menus, fn -> [] end)
       |> assign_new(:user_profile, fn -> [] end)
 
     ~H"""
@@ -123,8 +119,8 @@ defmodule Phoenix.WebComponent.Appbar do
 
   """
   @doc type: :component
-  attr(:id, :string,
-    default: "",
+  attr(:id, :any,
+    default: false,
     doc: """
     html attribute id
     """
@@ -170,25 +166,23 @@ defmodule Phoenix.WebComponent.Appbar do
   def wc_simple_appbar(assigns) do
     assigns =
       assigns
-      |> assign_new(:id, fn -> false end)
-      |> assign_new(:class, fn -> "" end)
       |> assign_new(:logo, fn -> [] end)
-      |> assign_new(:home, fn -> nil end)
-      |> assign_new(:title, fn -> "GSMLG Title" end)
-      |> assign_new(:menus, fn -> [] end)
+      |> assign_new(:home, fn -> false end)
       |> assign_new(:user_profile, fn -> [] end)
 
     ~H"""
     <header
-      class={"h-14 w-screen bg-sky-900 text-white text-xl flex items-center justify-center relative #{@class}"}
+      class={[
+        "h-14 w-screen bg-sky-900 text-white text-xl",
+        "flex items-center justify-center relative",
+        @class
+      ]}
     >
-      <div class="container h-full flex items-center justify-between select-none ">
+      <div class="container h-full flex items-center justify-between select-none">
         <div class="flex flex-row items-center justify-start">
-          <a href={@home}>
-            <%= render_slot(@logo) %>
-          </a>
+          <%= render_slot(@logo) %>
           <h1 class="select-none text-blod hidden lg:inline-flex">
-            <a href={@home}><%= @title %></a>
+            <%= @title %>
           </h1>
           <nav class="text-fuchsia-200 mx-12 hidden md:flex flex-row items-center gap-4">
             <%= for menu <- @menus do %>
@@ -203,7 +197,6 @@ defmodule Phoenix.WebComponent.Appbar do
           <div
             class="hidden md:inline-flex"
           ><%= render_slot(@user_profile) %></div>
-
           <button
             class="inline-flex md:hidden w-10 h-10 justify-center items-center"
             onclick="document.getElementById('header-md-menu').classList.toggle('hidden')"
diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/card.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/card.ex
index e5698509..33fd70c0 100644
--- a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/card.ex
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/card.ex
@@ -23,8 +23,8 @@ defmodule Phoenix.WebComponent.Card do
 
   """
   @doc type: :component
-  attr(:id, :string,
-    default: "",
+  attr(:id, :any,
+    default: false,
     doc: """
     html attribute id
     """
@@ -37,6 +37,13 @@ defmodule Phoenix.WebComponent.Card do
     """
   )
 
+  attr(:fit, :boolean,
+    default: false,
+    doc: """
+    set width and height to fit-content
+    """
+  )
+
   slot(:title,
     required: false,
     doc: """
@@ -47,12 +54,16 @@ defmodule Phoenix.WebComponent.Card do
   def wc_card(assigns) do
     assigns =
       assigns
-      |> assign_new(:id, fn -> false end)
-      |> assign_new(:class, fn -> "" end)
       |> assign_new(:title, fn -> nil end)
 
     ~H"""
-    <div id={@id} class={"bg-white w-fit h-fit m-4 p-6 flex flex-col shadow #{@class}"}>
+    <div id={@id} class={[
+        if(@fit, do: "w-fit h-fit", else: "w-auto h-auto"),
+        "m-4 p-6 flex flex-col",
+        "bg-white shadow",
+        @class
+      ]}
+    >
       <%= unless is_nil(@title) do %>
       <div class="w-full text-xl flex flex-row justify-start items-center h-10 mb-4">
         <%= render_slot(@title) %>
diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/icons.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/icons.ex
index 09473b2e..592bd6b3 100644
--- a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/icons.ex
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/icons.ex
@@ -35,8 +35,8 @@ defmodule Phoenix.WebComponent.Icons do
 
   """
   @doc type: :component
-  attr(:id, :string,
-    default: "",
+  attr(:id, :any,
+    default: false,
     doc: """
     html attribute id
     """
@@ -64,12 +64,6 @@ defmodule Phoenix.WebComponent.Icons do
   )
 
   def wc_mdi(assigns) do
-    assigns =
-      assigns
-      |> assign_new(:id, fn -> false end)
-      |> assign_new(:class, fn -> false end)
-      |> assign_new(:color, fn -> "currentcolor" end)
-
     name = assigns.name
 
     inner_svg =
diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/left_menu.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/left_menu.ex
index 83317612..78cfa6ef 100644
--- a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/left_menu.ex
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/left_menu.ex
@@ -15,8 +15,8 @@ defmodule Phoenix.WebComponent.LeftMenu do
 
   """
   @doc type: :component
-  attr(:id, :string,
-    default: "",
+  attr(:id, :any,
+    default: false,
     doc: """
     html attribute id
     """
@@ -60,17 +60,13 @@ defmodule Phoenix.WebComponent.LeftMenu do
   slot(:title,
     required: false,
     doc: """
-    Render a card title.
+    Render menu title.
     """
   )
 
   def wc_left_menu(assigns) do
     assigns =
       assigns
-      |> assign_new(:id, fn -> false end)
-      |> assign_new(:class, fn -> "" end)
-      |> assign_new(:active, fn -> false end)
-      |> assign_new(:menus, fn -> [] end)
       |> assign_new(:title, fn -> nil end)
 
     ~H"""
diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/markdown.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/markdown.ex
index 2c240292..f9b2f687 100644
--- a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/markdown.ex
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/markdown.ex
@@ -23,22 +23,10 @@ defmodule Phoenix.WebComponent.Markdown do
       <.wc_markdown content={"# Hello"} class="btn" />
       #=> <remark-element class="btn" content="# Hello"></remark-element>
 
-  ## Attributes
-
-    * `id` - `binary`
-    remark-element html attribute id
-
-    * `class` - `binary`
-    remark-element html attribute class
-
-    * `:debug` - print log in browser console
-
-    * `:content` - The content of markdown, replace innerHTML.
-
   """
   @doc type: :component
-  attr(:id, :string,
-    default: "",
+  attr(:id, :any,
+    default: false,
     doc: """
     html attribute id
     """
@@ -66,13 +54,6 @@ defmodule Phoenix.WebComponent.Markdown do
   )
 
   def wc_markdown(assigns) do
-    assigns =
-      assigns
-      |> assign_new(:id, fn -> false end)
-      |> assign_new(:class, fn -> false end)
-      |> assign_new(:debug, fn -> false end)
-      |> assign_new(:content, fn -> "" end)
-
     ~H"""
     <remark-element id={@id} debug={@debug} class={@class}><%= @content %></remark-element>
     """
diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/pagination.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/pagination.ex
index ff4218ca..8498a8ce 100644
--- a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/pagination.ex
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/pagination.ex
@@ -12,30 +12,10 @@ defmodule Phoenix.WebComponent.Pagination do
 
       <.wc_pagination page_num={5} page_size={15} total={100} update_event="update-page"/>
 
-  ## Attributes
-
-    * `id` - `binary`
-    html attribute id
-
-    * `class` - `binary`
-    html attribute class
-
-    * `page_size` - `integer`
-    How manage items are showing in page.
-
-    * `page_num` - `integer`
-    Which page is showing.
-
-    * `total` - `integer`
-    Total item count.
-
-    * `update_event` - `binary`
-    Phoenix live event name for page status update.
-
   """
   @doc type: :component
-  attr(:id, :string,
-    default: "",
+  attr(:id, :any,
+    default: false,
     doc: """
     html attribute id
     """
@@ -70,22 +50,13 @@ defmodule Phoenix.WebComponent.Pagination do
   )
 
   attr(:update_event, :string,
-    default: "",
+    default: "update_current_page",
     doc: """
     Phoenix live event name for page status update.
     """
   )
 
   def wc_pagination(assigns) do
-    assigns =
-      assigns
-      |> assign_new(:id, fn -> false end)
-      |> assign_new(:class, fn -> "" end)
-      |> assign_new(:page_size, fn -> 10 end)
-      |> assign_new(:page_num, fn -> 1 end)
-      |> assign_new(:total, fn -> 0 end)
-      |> assign_new(:update_event, fn -> "update_current_page" end)
-
     max_page =
       if assigns.total > 0 do
         (assigns.total / assigns.page_size) |> ceil
diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/table.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/table.ex
index 6194bf51..31cdcbdd 100644
--- a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/table.ex
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/table.ex
@@ -30,8 +30,8 @@ defmodule Phoenix.WebComponent.Table do
 
   """
   @doc type: :component
-  attr(:id, :string,
-    default: "",
+  attr(:id, :any,
+    default: false,
     doc: """
     html attribute id
     """
@@ -68,10 +68,7 @@ defmodule Phoenix.WebComponent.Table do
   def wc_table(assigns) do
     assigns =
       assigns
-      |> assign_new(:id, fn -> false end)
-      |> assign_new(:class, fn -> "" end)
       |> assign_new(:col, fn -> [] end)
-      |> assign_new(:rows, fn -> [] end)
 
     ~H"""
     <table id={@id} class={"table-fixed border-collapse border-spacing-0 #{@class}"}>