diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex
index 2fb1fdd6..9af88925 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex
@@ -1,6 +1,6 @@
 <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
 <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
-<main class="container h-[calc(100vh-56px)] flex flex-row justify-start items-start overflow-auto">
+<main class="container h-[calc(100vh-56px)] flex flex-row justify-start items-start overflow-hidden">
   <.wc_left_menu
     class="w-48 h-[calc(100vh-56px)]"
     active={assigns[:active_menu]}
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/root.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/root.html.heex
index c0b64de4..53c89e61 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/root.html.heex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/root.html.heex
@@ -23,6 +23,7 @@
       </:logo>
       <:user_profile>
         (^_^)
+        <.wc_mdi name="github" class="w-12 h-12" />
       </:user_profile>
     </.wc_simple_appbar>
     <% else %>
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/index.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/index.html.heex
index 638a05ac..89b17cf0 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/index.html.heex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/index.html.heex
@@ -1,5 +1,5 @@
 
-<.wc_card class="w-[100%_!important] h-[calc(100vh-56px-2em)_!important]">
+<.wc_card class="w-[100%_!important] h-[calc(100vh-56px-2em)_!important] overflow-auto">
     <:title class="flex flex-row justify-center items-center">
         <span class="text-4xl text-blue-600 hover:text-blue-400">
             PhxWCHook
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/mdi.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/mdi.html.heex
index f037c11d..08b4ff61 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/mdi.html.heex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/mdi.html.heex
@@ -1,11 +1,18 @@
-<.wc_card class="w-[100%_!important] h-[calc(100vh-56px-2em)_!important]">
+<.wc_card class="w-[100%_!important] h-[calc(100vh-56px-2em)_!important] overflow-auto">
     <:title class="flex flex-row justify-center items-center">
         <span class="text-4xl text-blue-600 hover:text-blue-400">
             Material Design Icons
         </span>
     </:title>
-    <.wc_markdown>
-    </.wc_markdown>
+    <.wc_markdown content={"""
+    ## Example
+
+    ```html
+    <!-- icon_name is matrial icon name -->
+    <.wc_mdi name={icon_name} class="w-12 h-12" />
+    ```
+
+    """}></.wc_markdown>
     <div class="flex flex-row flex-wrap gap-4">
         <%= for icon_name <- @mdi_icons do %>
         <div class="border flex flex-col w-40 h-40 items-center justify-center">