diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/core_components.ex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/core_components.ex
index 1dd26624..f0cf1c6d 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/core_components.ex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/core_components.ex
@@ -6,8 +6,7 @@ defmodule PhxWCStorybookWeb.CoreComponents do
   See the [Tailwind CSS documentation](https://tailwindcss.com) to learn how to
   customize the generated components in this module.
 
-  Icons are provided by [heroicons](https://heroicons.com), using the
-  [heroicons_elixir](https://github.com/mveytsman/heroicons_elixir) project.
+  Icons are provided by [heroicons](https://heroicons.com). See `icon/1` for usage.
   """
   use Phoenix.Component
 
@@ -34,20 +33,25 @@ defmodule PhxWCStorybookWeb.CoreComponents do
         <:cancel>Cancel</:cancel>
       </.modal>
   """
-  attr(:id, :string, required: true)
-  attr(:show, :boolean, default: false)
-  attr(:on_cancel, JS, default: %JS{})
-  attr(:on_confirm, JS, default: %JS{})
+  attr :id, :string, required: true
+  attr :show, :boolean, default: false
+  attr :on_cancel, JS, default: %JS{}
+  attr :on_confirm, JS, default: %JS{}
 
-  slot(:inner_block, required: true)
-  slot(:title)
-  slot(:subtitle)
-  slot(:confirm)
-  slot(:cancel)
+  slot :inner_block, required: true
+  slot :title
+  slot :subtitle
+  slot :confirm
+  slot :cancel
 
   def modal(assigns) do
     ~H"""
-    <div id={@id} phx-mounted={@show && show_modal(@id)} class="relative z-50 hidden">
+    <div
+      id={@id}
+      phx-mounted={@show && show_modal(@id)}
+      phx-remove={hide_modal(@id)}
+      class="relative z-50 hidden"
+    >
       <div id={"#{@id}-bg"} class="fixed inset-0 bg-zinc-50/90 transition-opacity" aria-hidden="true" />
       <div
         class="fixed inset-0 overflow-y-auto"
@@ -74,7 +78,7 @@ defmodule PhxWCStorybookWeb.CoreComponents do
                   class="-m-3 flex-none p-3 opacity-20 hover:opacity-40"
                   aria-label={gettext("close")}
                 >
-                  <Heroicons.x_mark solid class="h-5 w-5 stroke-current" />
+                  <.icon name="hero-x-mark-solid" class="w-5 h-5" />
                 </button>
               </div>
               <div id={"#{@id}-content"}>
@@ -82,7 +86,11 @@ defmodule PhxWCStorybookWeb.CoreComponents do
                   <h1 id={"#{@id}-title"} class="text-lg font-semibold leading-8 text-zinc-800">
                     <%= render_slot(@title) %>
                   </h1>
-                  <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
+                  <p
+                    :if={@subtitle != []}
+                    id={"#{@id}-description"}
+                    class="mt-2 text-sm leading-6 text-zinc-600"
+                  >
                     <%= render_slot(@subtitle) %>
                   </p>
                 </header>
@@ -122,15 +130,15 @@ defmodule PhxWCStorybookWeb.CoreComponents do
       <.flash kind={:info} flash={@flash} />
       <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
   """
-  attr(:id, :string, default: "flash", doc: "the optional id of flash container")
-  attr(:flash, :map, default: %{}, doc: "the map of flash messages to display")
-  attr(:title, :string, default: nil)
-  attr(:kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup")
-  attr(:autoshow, :boolean, default: true, doc: "whether to auto show the flash on mount")
-  attr(:close, :boolean, default: true, doc: "whether the flash can be closed")
-  attr(:rest, :global, doc: "the arbitrary HTML attributes to add to the flash container")
+  attr :id, :string, default: "flash", doc: "the optional id of flash container"
+  attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
+  attr :title, :string, default: nil
+  attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
+  attr :autoshow, :boolean, default: true, doc: "whether to auto show the flash on mount"
+  attr :close, :boolean, default: true, doc: "whether the flash can be closed"
+  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
 
-  slot(:inner_block, doc: "the optional inner block that renders the flash message")
+  slot :inner_block, doc: "the optional inner block that renders the flash message"
 
   def flash(assigns) do
     ~H"""
@@ -138,7 +146,7 @@ defmodule PhxWCStorybookWeb.CoreComponents do
       :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
       id={@id}
       phx-mounted={@autoshow && show("##{@id}")}
-      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("#flash")}
+      phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
       role="alert"
       class={[
         "fixed hidden top-2 right-2 w-80 sm:w-96 z-50 rounded-lg p-3 shadow-md shadow-zinc-900/5 ring-1",
@@ -148,8 +156,8 @@ defmodule PhxWCStorybookWeb.CoreComponents do
       {@rest}
     >
       <p :if={@title} class="flex items-center gap-1.5 text-[0.8125rem] font-semibold leading-6">
-        <Heroicons.information_circle :if={@kind == :info} mini class="h-4 w-4" />
-        <Heroicons.exclamation_circle :if={@kind == :error} mini class="h-4 w-4" />
+        <.icon :if={@kind == :info} name="hero-information-circle-mini" class="w-4 h-4" />
+        <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="w-4 h-4" />
         <%= @title %>
       </p>
       <p class="mt-2 text-[0.8125rem] leading-5"><%= msg %></p>
@@ -159,35 +167,61 @@ defmodule PhxWCStorybookWeb.CoreComponents do
         class="group absolute top-2 right-1 p-2"
         aria-label={gettext("close")}
       >
-        <Heroicons.x_mark solid class="h-5 w-5 stroke-current opacity-40 group-hover:opacity-70" />
+        <.icon name="hero-x-mark-solid" class="w-5 h-5 opacity-40 group-hover:opacity-70" />
       </button>
     </div>
     """
   end
 
+  @doc """
+  Shows the flash group with standard titles and content.
+
+  ## Examples
+
+      <.flash_group flash={@flash} />
+  """
+  attr :flash, :map, required: true, doc: "the map of flash messages"
+
+  def flash_group(assigns) do
+    ~H"""
+    <.flash kind={:info} title="Success!" flash={@flash} />
+    <.flash kind={:error} title="Error!" flash={@flash} />
+    <.flash
+      id="disconnected"
+      kind={:error}
+      title="We can't find the internet"
+      close={false}
+      autoshow={false}
+      phx-disconnected={show("#disconnected")}
+      phx-connected={hide("#disconnected")}
+    >
+      Attempting to reconnect <.icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" />
+    </.flash>
+    """
+  end
+
   @doc """
   Renders a simple form.
 
   ## Examples
 
-      <.simple_form :let={f} for={:user} phx-change="validate" phx-submit="save">
-        <.input field={{f, :email}} label="Email"/>
-        <.input field={{f, :username}} label="Username" />
+      <.simple_form for={@form} phx-change="validate" phx-submit="save">
+        <.input field={@form[:email]} label="Email"/>
+        <.input field={@form[:username]} label="Username" />
         <:actions>
           <.button>Save</.button>
         </:actions>
       </.simple_form>
   """
-  attr(:for, :any, default: nil, doc: "the datastructure for the form")
-  attr(:as, :any, default: nil, doc: "the server side parameter to collect all input under")
+  attr :for, :any, required: true, doc: "the datastructure for the form"
+  attr :as, :any, default: nil, doc: "the server side parameter to collect all input under"
 
-  attr(:rest, :global,
+  attr :rest, :global,
     include: ~w(autocomplete name rel action enctype method novalidate target),
     doc: "the arbitrary HTML attributes to apply to the form tag"
-  )
 
-  slot(:inner_block, required: true)
-  slot(:actions, doc: "the slot for form actions, such as a submit button")
+  slot :inner_block, required: true
+  slot :actions, doc: "the slot for form actions, such as a submit button"
 
   def simple_form(assigns) do
     ~H"""
@@ -210,11 +244,11 @@ defmodule PhxWCStorybookWeb.CoreComponents do
       <.button>Send!</.button>
       <.button phx-click="go" class="ml-2">Send!</.button>
   """
-  attr(:type, :string, default: nil)
-  attr(:class, :string, default: nil)
-  attr(:rest, :global, include: ~w(disabled form name value))
+  attr :type, :string, default: nil
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(disabled form name value)
 
-  slot(:inner_block, required: true)
+  slot :inner_block, required: true
 
   def button(assigns) do
     ~H"""
@@ -241,60 +275,61 @@ defmodule PhxWCStorybookWeb.CoreComponents do
 
   ## Examples
 
-      <.input field={{f, :email}} type="email" />
+      <.input field={@form[:email]} type="email" />
       <.input name="my-input" errors={["oh no!"]} />
   """
-  attr(:id, :any)
-  attr(:name, :any)
-  attr(:label, :string, default: nil)
+  attr :id, :any, default: nil
+  attr :name, :any
+  attr :label, :string, default: nil
+  attr :value, :any
 
-  attr(:type, :string,
+  attr :type, :string,
     default: "text",
     values: ~w(checkbox color date datetime-local email file hidden month number password
                range radio search select tel text textarea time url week)
-  )
-
-  attr(:value, :any)
-  attr(:field, :any, doc: "a %Phoenix.HTML.Form{}/field name tuple, for example: {f, :email}")
-  attr(:errors, :list)
-  attr(:checked, :boolean, doc: "the checked flag for checkbox inputs")
-  attr(:prompt, :string, default: nil, doc: "the prompt for select inputs")
-  attr(:options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2")
-  attr(:multiple, :boolean, default: false, doc: "the multiple flag for select inputs")
-  attr(:rest, :global, include: ~w(autocomplete disabled form max maxlength min minlength
-                                   pattern placeholder readonly required size step))
-  slot(:inner_block)
-
-  def input(%{field: {f, field}} = assigns) do
+
+  attr :field, Phoenix.HTML.FormField,
+    doc: "a form field struct retrieved from the form, for example: @form[:email]"
+
+  attr :errors, :list, default: []
+  attr :checked, :boolean, doc: "the checked flag for checkbox inputs"
+  attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
+  attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
+  attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"
+  attr :rest, :global, include: ~w(autocomplete cols disabled form max maxlength min minlength
+                                   pattern placeholder readonly required rows size step)
+  slot :inner_block
+
+  def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
     assigns
-    |> assign(field: nil)
-    |> assign_new(:name, fn ->
-      name = Phoenix.HTML.Form.input_name(f, field)
-      if assigns.multiple, do: name <> "[]", else: name
-    end)
-    |> assign_new(:id, fn -> Phoenix.HTML.Form.input_id(f, field) end)
-    |> assign_new(:value, fn -> Phoenix.HTML.Form.input_value(f, field) end)
-    |> assign_new(:errors, fn -> translate_errors(f.errors || [], field) end)
+    |> assign(field: nil, id: assigns.id || field.id)
+    |> assign(:errors, Enum.map(field.errors, &translate_error(&1)))
+    |> assign_new(:name, fn -> if assigns.multiple, do: field.name <> "[]", else: field.name end)
+    |> assign_new(:value, fn -> field.value end)
     |> input()
   end
 
-  def input(%{type: "checkbox"} = assigns) do
-    assigns = assign_new(assigns, :checked, fn -> input_equals?(assigns.value, "true") end)
+  def input(%{type: "checkbox", value: value} = assigns) do
+    assigns =
+      assign_new(assigns, :checked, fn -> Phoenix.HTML.Form.normalize_value("checkbox", value) end)
 
     ~H"""
-    <label phx-feedback-for={@name} class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
-      <input type="hidden" name={@name} value="false" />
-      <input
-        type="checkbox"
-        id={@id || @name}
-        name={@name}
-        value="true"
-        checked={@checked}
-        class="rounded border-zinc-300 text-zinc-900 focus:ring-zinc-900"
-        {@rest}
-      />
-      <%= @label %>
-    </label>
+    <div phx-feedback-for={@name}>
+      <label class="flex items-center gap-4 text-sm leading-6 text-zinc-600">
+        <input type="hidden" name={@name} value="false" />
+        <input
+          type="checkbox"
+          id={@id || @name}
+          name={@name}
+          value="true"
+          checked={@checked}
+          class="rounded border-zinc-300 text-zinc-900 focus:ring-zinc-900"
+          {@rest}
+        />
+        <%= @label %>
+      </label>
+      <.error :for={msg <- @errors}><%= msg %></.error>
+    </div>
     """
   end
 
@@ -309,7 +344,7 @@ defmodule PhxWCStorybookWeb.CoreComponents do
         multiple={@multiple}
         {@rest}
       >
-        <option :if={@prompt}><%= @prompt %></option>
+        <option :if={@prompt} value=""><%= @prompt %></option>
         <%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
       </select>
       <.error :for={msg <- @errors}><%= msg %></.error>
@@ -325,13 +360,14 @@ defmodule PhxWCStorybookWeb.CoreComponents do
         id={@id || @name}
         name={@name}
         class={[
-          input_border(@errors),
           "mt-2 block min-h-[6rem] w-full rounded-lg border-zinc-300 py-[7px] px-[11px]",
           "text-zinc-900 focus:border-zinc-400 focus:outline-none focus:ring-4 focus:ring-zinc-800/5 sm:text-sm sm:leading-6",
-          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5"
+          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5",
+          "border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5",
+          @errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
         ]}
         {@rest}
-      ><%= @value %></textarea>
+      ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
       <.error :for={msg <- @errors}><%= msg %></.error>
     </div>
     """
@@ -345,12 +381,13 @@ defmodule PhxWCStorybookWeb.CoreComponents do
         type={@type}
         name={@name}
         id={@id || @name}
-        value={@value}
+        value={Phoenix.HTML.Form.normalize_value(@type, @value)}
         class={[
-          input_border(@errors),
           "mt-2 block w-full rounded-lg border-zinc-300 py-[7px] px-[11px]",
           "text-zinc-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6",
-          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5"
+          "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400 phx-no-feedback:focus:ring-zinc-800/5",
+          "border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5",
+          @errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
         ]}
         {@rest}
       />
@@ -359,17 +396,11 @@ defmodule PhxWCStorybookWeb.CoreComponents do
     """
   end
 
-  defp input_border([] = _errors),
-    do: "border-zinc-300 focus:border-zinc-400 focus:ring-zinc-800/5"
-
-  defp input_border([_ | _] = _errors),
-    do: "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
-
   @doc """
   Renders a label.
   """
-  attr(:for, :string, default: nil)
-  slot(:inner_block, required: true)
+  attr :for, :string, default: nil
+  slot :inner_block, required: true
 
   def label(assigns) do
     ~H"""
@@ -382,12 +413,12 @@ defmodule PhxWCStorybookWeb.CoreComponents do
   @doc """
   Generates a generic error message.
   """
-  slot(:inner_block, required: true)
+  slot :inner_block, required: true
 
   def error(assigns) do
     ~H"""
     <p class="phx-no-feedback:hidden mt-3 flex gap-3 text-sm leading-6 text-rose-600">
-      <Heroicons.exclamation_circle mini class="mt-0.5 h-5 w-5 flex-none fill-rose-500" />
+      <.icon name="hero-exclamation-circle-mini" class="mt-0.5 w-5 h-5 flex-none" />
       <%= render_slot(@inner_block) %>
     </p>
     """
@@ -396,11 +427,11 @@ defmodule PhxWCStorybookWeb.CoreComponents do
   @doc """
   Renders a header with title.
   """
-  attr(:class, :string, default: nil)
+  attr :class, :string, default: nil
 
-  slot(:inner_block, required: true)
-  slot(:subtitle)
-  slot(:actions)
+  slot :inner_block, required: true
+  slot :subtitle
+  slot :actions
 
   def header(assigns) do
     ~H"""
@@ -428,19 +459,29 @@ defmodule PhxWCStorybookWeb.CoreComponents do
         <:col :let={user} label="username"><%= user.username %></:col>
       </.table>
   """
-  attr(:id, :string, required: true)
-  attr(:row_click, :any, default: nil)
-  attr(:rows, :list, required: true)
+  attr :id, :string, required: true
+  attr :rows, :list, required: true
+  attr :row_id, :any, default: nil, doc: "the function for generating the row id"
+  attr :row_click, :any, default: nil, doc: "the function for handling phx-click on each row"
+
+  attr :row_item, :any,
+    default: &Function.identity/1,
+    doc: "the function for mapping each row before calling the :col and :action slots"
 
   slot :col, required: true do
-    attr(:label, :string)
+    attr :label, :string
   end
 
-  slot(:action, doc: "the slot for showing user actions in the last table column")
+  slot :action, doc: "the slot for showing user actions in the last table column"
 
   def table(assigns) do
+    assigns =
+      with %{rows: %Phoenix.LiveView.LiveStream{}} <- assigns do
+        assign(assigns, row_id: assigns.row_id || fn {id, _item} -> id end)
+      end
+
     ~H"""
-    <div id={@id} class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
+    <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
       <table class="mt-11 w-[40rem] sm:w-full">
         <thead class="text-left text-[0.8125rem] leading-6 text-zinc-500">
           <tr>
@@ -448,34 +489,32 @@ defmodule PhxWCStorybookWeb.CoreComponents do
             <th class="relative p-0 pb-4"><span class="sr-only"><%= gettext("Actions") %></span></th>
           </tr>
         </thead>
-        <tbody class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700">
-          <tr
-            :for={row <- @rows}
-            id={"#{@id}-#{Phoenix.Param.to_param(row)}"}
-            class="relative group hover:bg-zinc-50"
-          >
+        <tbody
+          id={@id}
+          phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
+          class="relative divide-y divide-zinc-100 border-t border-zinc-200 text-sm leading-6 text-zinc-700"
+        >
+          <tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-zinc-50">
             <td
               :for={{col, i} <- Enum.with_index(@col)}
               phx-click={@row_click && @row_click.(row)}
-              class={["p-0", @row_click && "hover:cursor-pointer"]}
+              class={["relative p-0", @row_click && "hover:cursor-pointer"]}
             >
-              <div :if={i == 0}>
-                <span class="absolute h-full w-4 top-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
-                <span class="absolute h-full w-4 top-0 -right-4 group-hover:bg-zinc-50 sm:rounded-r-xl" />
-              </div>
               <div class="block py-4 pr-6">
+                <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
                 <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
-                  <%= render_slot(col, row) %>
+                  <%= render_slot(col, @row_item.(row)) %>
                 </span>
               </div>
             </td>
-            <td :if={@action != []} class="p-0 w-14">
+            <td :if={@action != []} class="relative p-0 w-14">
               <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
+                <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
                 <span
                   :for={action <- @action}
                   class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
                 >
-                  <%= render_slot(action, row) %>
+                  <%= render_slot(action, @row_item.(row)) %>
                 </span>
               </div>
             </td>
@@ -497,7 +536,7 @@ defmodule PhxWCStorybookWeb.CoreComponents do
       </.list>
   """
   slot :item, required: true do
-    attr(:title, :string, required: true)
+    attr :title, :string, required: true
   end
 
   def list(assigns) do
@@ -520,8 +559,8 @@ defmodule PhxWCStorybookWeb.CoreComponents do
 
       <.back navigate={~p"/posts"}>Back to posts</.back>
   """
-  attr(:navigate, :any, required: true)
-  slot(:inner_block, required: true)
+  attr :navigate, :any, required: true
+  slot :inner_block, required: true
 
   def back(assigns) do
     ~H"""
@@ -530,13 +569,42 @@ defmodule PhxWCStorybookWeb.CoreComponents do
         navigate={@navigate}
         class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
       >
-        <Heroicons.arrow_left solid class="w-3 h-3 stroke-current inline" />
+        <.icon name="hero-arrow-left-solid" class="w-3 h-3" />
         <%= render_slot(@inner_block) %>
       </.link>
     </div>
     """
   end
 
+  @doc """
+  Renders a [Hero Icon](https://heroicons.com).
+
+  Hero icons come in three styles – outline, solid, and mini.
+  By default, the outline style is used, but solid an mini may
+  be applied by using the `-solid` and `-mini` suffix.
+
+  You can customize the size and colors of the icons by setting
+  width, height, and background color classes.
+
+  Icons are extracted from your `priv/hero_icons` directory and bundled
+  within your compiled app.css by the plugin in your `assets/tailwind.config.js`.
+
+  ## Examples
+
+      <.icon name="hero-cake" />
+      <.icon name="hero-cake-solid" />
+      <.icon name="hero-cake-mini" />
+      <.icon name="hero-bolt" class="bg-blue-500 w-10 h-10" />
+  """
+  attr :name, :string, required: true
+  attr :class, :string, default: nil
+
+  def icon(%{name: "hero-" <> _} = assigns) do
+    ~H"""
+    <span class={[@name, @class]} />
+    """
+  end
+
   ## JS Commands
 
   def show(js \\ %JS{}, selector) do
@@ -568,6 +636,7 @@ defmodule PhxWCStorybookWeb.CoreComponents do
       transition: {"transition-all transform ease-out duration-300", "opacity-0", "opacity-100"}
     )
     |> show("##{id}-container")
+    |> JS.add_class("overflow-hidden", to: "body")
     |> JS.focus_first(to: "##{id}-content")
   end
 
@@ -579,6 +648,7 @@ defmodule PhxWCStorybookWeb.CoreComponents do
     )
     |> hide("##{id}-container")
     |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
+    |> JS.remove_class("overflow-hidden", to: "body")
     |> JS.pop_focus()
   end
 
@@ -616,8 +686,4 @@ defmodule PhxWCStorybookWeb.CoreComponents do
   def translate_errors(errors, field) when is_list(errors) do
     for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
   end
-
-  defp input_equals?(val1, val2) do
-    Phoenix.HTML.html_escape(val1) == Phoenix.HTML.html_escape(val2)
-  end
 end
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/layouts/app.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/layouts/app.html.heex
index fde91e0f..638fc41f 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/layouts/app.html.heex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/layouts/app.html.heex
@@ -11,7 +11,7 @@
       phx-disconnected={show("#disconnected")}
       phx-connected={hide("#disconnected")}
     >
-      Attempting to reconnect <Heroicons.arrow_path class="ml-1 w-3 h-3 inline animate-spin" />
+      Attempting to reconnect <.wc_bsi name="arrow-repeat" class="ml-1 w-3 h-3 inline animate-spin" />
     </.flash>
     <.wc_left_menu
       class="w-48 h-[calc(100vh-56px)]"
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/bsi.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/bsi.html.heex
index db82d25a..635845a6 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/bsi.html.heex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/bsi.html.heex
@@ -17,11 +17,10 @@
     ```
     """}></.wc_markdown>
     <div class="flex flex-row mt-4 mb-2">
-        <%= form_for @conn, Routes.page_path(@conn, :bsi), [method: "get", class: "flex flex-row gap-2"], fn f -> %>
-        <label class="flex items-center">Icon Name</label>
-        <%= text_input f, :filter, class: "border rounded-lg py-2 px-3" %>
-        <%= submit "Search", class: "broder rounded-lg bg-blue-600 text-slate-100 py-2 px-3" %>
-        <% end %>
+        <.form for={@conn} action={Routes.page_path(@conn, :bsi)} method="get" class={["flex flex-row gap-2"]}>
+            <.input field={:filter} label="Icon Name" />
+            <.button type="submit">Search</.button>
+        </.form>
     </div>
     <div class="flex flex-row flex-wrap gap-4">
         <%= for icon_name <- @bsi_icons do %>
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/mdi.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/mdi.html.heex
index 704db467..2de452e1 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/mdi.html.heex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/mdi.html.heex
@@ -17,11 +17,10 @@
     ```
     """}></.wc_markdown>
     <div class="flex flex-row mt-4 mb-2">
-        <%= form_for @conn, Routes.page_path(@conn, :mdi), [method: "get", class: "flex flex-row gap-2"], fn f -> %>
-        <label class="flex items-center">Icon Name</label>
-        <%= text_input f, :filter, class: "border rounded-lg py-2 px-3" %>
-        <%= submit "Search", class: "broder rounded-lg bg-blue-600 text-slate-100 py-2 px-3" %>
-        <% end %>
+        <.form for={@conn} action={Routes.page_path(@conn, :mdi)} method="get" class={["flex flex-row gap-2"]}>
+            <.input field={:filter} label="Icon Name" />
+            <.button type="submit">Search</.button>
+        </.form>
     </div>
     <div class="flex flex-row flex-wrap gap-4">
         <%= for icon_name <- @mdi_icons do %>
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/router.ex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/router.ex
index c28e64ca..f1dc5269 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/router.ex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/router.ex
@@ -1,12 +1,12 @@
 defmodule PhxWCStorybookWeb.Router do
   use PhxWCStorybookWeb, :router
-  import PhxLiveStorybook.Router
+  import PhoenixStorybook.Router
 
   pipeline :browser do
     plug :accepts, ["html"]
     plug :fetch_session
     plug :fetch_live_flash
-    plug :put_root_layout, {PhxWCStorybookWeb.LayoutView, :root}
+    plug :put_root_layout, {PhxWCStorybookWeb.Layouts, :root}
     plug :protect_from_forgery
     plug :put_secure_browser_headers
   end
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook.ex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook.ex
index 7b581213..9ab1c749 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook.ex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook.ex
@@ -1,6 +1,6 @@
 defmodule PhxWCStorybookWeb.Storybook do
   @moduledoc false
-  use PhxLiveStorybook,
+  use PhoenixStorybook,
     # OTP name of your application.
     otp_app: :phx_wc_storybook_web,
 
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/actionbar.story.exs b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/actionbar.story.exs
index f461351e..2253e349 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/actionbar.story.exs
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/actionbar.story.exs
@@ -1,6 +1,6 @@
 defmodule PhxWCStorybookWeb.Storybook.Components.Actionbar do
   # :live_component or :page are also available
-  use PhxLiveStorybook.Story, :component
+  use PhoenixStorybook.Story, :component
 
   def function, do: &Phoenix.WebComponent.Actionbar.wc_actionbar/1
   def description, do: "A actionbar element."
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/breadcrumb.story.exs b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/breadcrumb.story.exs
index acec8c46..af05b7b8 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/breadcrumb.story.exs
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/breadcrumb.story.exs
@@ -1,6 +1,6 @@
 defmodule PhxWCStorybookWeb.Storybook.Components.Breadcrumb do
   # :live_component or :page are also available
-  use PhxLiveStorybook.Story, :component
+  use PhoenixStorybook.Story, :component
 
   def function, do: &Phoenix.WebComponent.Breadcrumb.wc_breadcrumb/1
   def description, do: "A breadcrumb element."
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/card.story.exs b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/card.story.exs
index 777fa1a2..b5f02cd2 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/card.story.exs
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/card.story.exs
@@ -1,6 +1,6 @@
 defmodule PhxWCStorybookWeb.Storybook.Components.Card do
   # :live_component or :page are also available
-  use PhxLiveStorybook.Story, :component
+  use PhoenixStorybook.Story, :component
 
   def function, do: &Phoenix.WebComponent.Card.wc_card/1
   def description, do: "A card element."
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/left_menu.story.exs b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/left_menu.story.exs
index 5f2d91e7..ff60b416 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/left_menu.story.exs
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/left_menu.story.exs
@@ -1,6 +1,6 @@
 defmodule PhxWCStorybookWeb.Storybook.Components.LeftMenu do
   # :live_component or :page are also available
-  use PhxLiveStorybook.Story, :component
+  use PhoenixStorybook.Story, :component
 
   def function, do: &Phoenix.WebComponent.LeftMenu.wc_left_menu/1
   def description, do: "A left menu element."
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/link.story.exs b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/link.story.exs
index 41aaa98d..360a9971 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/link.story.exs
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/link.story.exs
@@ -1,6 +1,6 @@
 defmodule PhxWCStorybookWeb.Storybook.Components.Link do
   # :live_component or :page are also available
-  use PhxLiveStorybook.Story, :component
+  use PhoenixStorybook.Story, :component
 
   def function, do: &Phoenix.WebComponent.Link.wc_link/1
   def description, do: "Recreate Phoenix.Component.link with custom element."
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/markdown.story.exs b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/markdown.story.exs
index 707dd65d..9b11e110 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/markdown.story.exs
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/markdown.story.exs
@@ -1,6 +1,6 @@
 defmodule PhxWCStorybookWeb.Storybook.Components.Markdown do
   # :live_component or :page are also available
-  use PhxLiveStorybook.Story, :component
+  use PhoenixStorybook.Story, :component
 
   def function, do: &Phoenix.WebComponent.Markdown.wc_markdown/1
   def description, do: "A markdown render element."
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/modal.story.exs b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/modal.story.exs
index 4231efc8..7aa1f169 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/modal.story.exs
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/modal.story.exs
@@ -1,5 +1,5 @@
 defmodule PhxWCStorybookWeb.Storybook.Components.Modal do
-  use PhxLiveStorybook.Story, :component
+  use PhoenixStorybook.Story, :component
 
   def function, do: &Phoenix.WebComponent.Modal.wc_modal/1
 
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/pagination.story.exs b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/pagination.story.exs
index a8c6c852..f67bd55b 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/pagination.story.exs
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/pagination.story.exs
@@ -1,6 +1,6 @@
 defmodule PhxWCStorybookWeb.Storybook.Components.Pagination do
   # :live_component or :page are also available
-  use PhxLiveStorybook.Story, :component
+  use PhoenixStorybook.Story, :component
 
   def function, do: &Phoenix.WebComponent.Pagination.wc_pagination/1
   def description, do: "A pagination element."
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/table.story.exs b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/table.story.exs
index 2f09402e..c7698a03 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/table.story.exs
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/table.story.exs
@@ -1,6 +1,6 @@
 defmodule PhxWCStorybookWeb.Storybook.Components.Table do
   # :live_component or :page are also available
-  use PhxLiveStorybook.Story, :component
+  use PhoenixStorybook.Story, :component
 
   def function, do: &Phoenix.WebComponent.Table.wc_table/1
   def description, do: "A table element."
diff --git a/apps/phx_wc_storybook_web/lib/table.exs b/apps/phx_wc_storybook_web/lib/table.exs
deleted file mode 100644
index 31eabdce..00000000
--- a/apps/phx_wc_storybook_web/lib/table.exs
+++ /dev/null
@@ -1,18 +0,0 @@
-defmodule PhxWCStorybookWeb.Storybook.Components.Table do
-  # :live_component or :page are also available
-  use PhxLiveStorybook.Entry, :component
-
-  def function, do: &Phoenix.WebComponent.Table.wc_table/1
-  def description, do: "A markdown render element."
-
-  def stories do
-    [
-      %Story{
-        id: :default,
-        attributes: %{
-          cols: [%{label: "Name"}]
-        }
-      }
-    ]
-  end
-end