diff --git a/apps/duskmoon_storybook_web/lib/duskmoon_storybook_web/components/layouts/app.html.heex b/apps/duskmoon_storybook_web/lib/duskmoon_storybook_web/components/layouts/app.html.heex
index 39ed35f..1041fd7 100644
--- a/apps/duskmoon_storybook_web/lib/duskmoon_storybook_web/components/layouts/app.html.heex
+++ b/apps/duskmoon_storybook_web/lib/duskmoon_storybook_web/components/layouts/app.html.heex
@@ -54,6 +54,15 @@
     </:title>
     <:menu>
       <.dm_left_menu_group active={assigns[:active_menu]}>
+        <h2 class="menu-title">Page</h2>
+        <ul>
+          <li>
+            <.link class={if("page" == assigns[:active_menu], do: "active")} navigate={~p"/"}>
+              <.dm_mdi name={"page-layout-header"} class="w-4 h-4" />
+              Page
+            </.link>
+          </li>
+        </ul>
         <:title>Page</:title>
         <:menu id="page" to={~p"/"}>
           <.dm_mdi name={"page-layout-header"} class="w-4 h-4" />
@@ -121,8 +130,9 @@
       </.dm_left_menu_group>
     </:menu>
   </.dm_left_menu>
+
   <div class="flex flex-col flex-auto">
-  <%= @inner_content %>
+    <%= @inner_content %>
   </div>
 </main>
 
diff --git a/apps/phoenix_duskmoon/lib/phoenix_duskmoon/component/left_menu.ex b/apps/phoenix_duskmoon/lib/phoenix_duskmoon/component/left_menu.ex
index aaf8f88..3d96cde 100644
--- a/apps/phoenix_duskmoon/lib/phoenix_duskmoon/component/left_menu.ex
+++ b/apps/phoenix_duskmoon/lib/phoenix_duskmoon/component/left_menu.ex
@@ -119,13 +119,6 @@ defmodule PhoenixDuskmoon.Component.LeftMenu do
     """
   )
 
-  attr(:active_class, :any,
-    default: "bg-blue-100 text-blue-500 dark:bg-blue-900 dark:text-blue-100",
-    doc: """
-    active menu html attribute class
-    """
-  )
-
   slot(:title,
     required: true,
     doc: """
@@ -152,42 +145,24 @@ defmodule PhoenixDuskmoon.Component.LeftMenu do
       |> assign_new(:title, fn -> nil end)
 
     ~H"""
-    <div
-      id={@id}
-      class={[
-        "flex flex-col justify-start items-start",
-        "w-full",
-        @class,
-      ]}
+    <h2
+      :for={{title, _i} <- Enum.with_index(@title)}
+      class="menu-title"
     >
-      <div
-        :for={{title, _i} <- Enum.with_index(@title)}
-        class={[
-          "px-10 py-4 w-full",
-          Map.get(title, :class, ""),
-        ]}
+      <%= render_slot(title) %>
+    </h2>
+    <ul>
+      <li
+        :for={{m, _i} <- Enum.with_index(@menu)}
       >
-        <%= render_slot(@title) %>
-      </div>
-      <div class="px-4 w-full">
         <.link
-          :for={{m, _i} <- Enum.with_index(@menu)}
-          class={[
-            "flex flex-row justify-start items-center",
-            "px-6 py-4 rounded-lg w-full cursor-pointer",
-            if Map.get(m, :id, "") == @active do
-              @active_class
-            end,
-            Map.get(m, :class, "")
-          ]}
-          navigate={Map.get(m, :to, "")}
+          class={if(Map.get(m, :id, false) == assigns[:active], do: "active")}
+          navigate={Map.get(m, :to, "#")}
         >
-          <span class="indent-2.5 flex flex-row justify-start items-center">
-            <%= render_slot(m) %>
-          </span>
+          <%= render_slot(m) %>
         </.link>
-      </div>
-    </div>
+      </li>
+    </ul>
     """
   end
 end