diff --git a/internals/ui/pages/accordion.templ b/internals/ui/pages/accordion.templ
index 80b9122..66cc715 100644
--- a/internals/ui/pages/accordion.templ
+++ b/internals/ui/pages/accordion.templ
@@ -14,7 +14,6 @@ templ Accordion() {
 			Description: "A vertically  ds stacked set of interactive headings that each reveal a section of content.",
 		}) {
 			@modules.ExampleWrapper(modules.ExampleWrapperProps{
-				SectionName:       "",
 				ShowcaseFile:      showcase.Accordion(),
 				PreviewCodeFile:   "accordion.templ",
 				ComponentCodeFile: "accordion.templ",
diff --git a/internals/ui/pages/datepicker.templ b/internals/ui/pages/datepicker.templ
index aaf9517..3c040b6 100644
--- a/internals/ui/pages/datepicker.templ
+++ b/internals/ui/pages/datepicker.templ
@@ -4,37 +4,19 @@ import (
 	"github.com/axzilla/goilerplate/internals/ui/layouts"
 	"github.com/axzilla/goilerplate/internals/ui/modules"
 	"github.com/axzilla/goilerplate/internals/ui/showcase"
-	"github.com/axzilla/goilerplate/pkg/components"
 )
 
 templ Datepicker() {
 	@layouts.DocsLayout() {
-		<div>
-			<div class="mb-16">
-				<h1 class="text-3xl font-bold mb-2">Datepicker</h1>
-				<p class="mb-4 text-muted-foreground">A date picker component.</p>
-			</div>
-			@components.Tabs(components.TabsProps{
-				Tabs: []components.Tab{
-					{
-						ID:      "preview",
-						Title:   "Preview",
-						Content: showcase.DatepickerShowcase(),
-					},
-					{
-						ID:      "code",
-						Title:   "Code",
-						Content: modules.CodeSnippetFromEmbedded("datepicker.templ", "go", showcase.TemplFiles),
-					},
-					{
-						ID:      "component",
-						Title:   "Component",
-						Content: modules.CodeSnippetFromEmbedded("datepicker.templ", "go", components.TemplFiles),
-					},
-				},
-				TabsContainerClass:    "md:w-1/2",
-				ContentContainerClass: "w-full",
+		@modules.PageWrapper(modules.PageWrapperProps{
+			Name:        "Datepicker",
+			Description: "A date picker component.",
+		}) {
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				ShowcaseFile:      showcase.Datepicker(),
+				PreviewCodeFile:   "datepicker.templ",
+				ComponentCodeFile: "datepicker.templ",
 			})
-		</div>
+		}
 	}
 }
diff --git a/internals/ui/pages/dropdown_menu.templ b/internals/ui/pages/dropdown_menu.templ
index 342a9e4..d86afd4 100644
--- a/internals/ui/pages/dropdown_menu.templ
+++ b/internals/ui/pages/dropdown_menu.templ
@@ -4,37 +4,32 @@ import (
 	"github.com/axzilla/goilerplate/internals/ui/layouts"
 	"github.com/axzilla/goilerplate/internals/ui/modules"
 	"github.com/axzilla/goilerplate/internals/ui/showcase"
-	"github.com/axzilla/goilerplate/pkg/components"
 )
 
 templ DropdownMenu() {
 	@layouts.DocsLayout() {
-		<div>
-			<div class="mb-16">
-				<h1 class="text-3xl font-bold mb-2">Dropdown Menu</h1>
-				<p class="mb-4 text-muted-foreground">The Dropdown Menu component provides a way to display a list of options in a compact form.</p>
-			</div>
-			@components.Tabs(components.TabsProps{
-				Tabs: []components.Tab{
-					{
-						ID:      "preview",
-						Title:   "Preview",
-						Content: showcase.DropdownMenuShowcase(),
-					},
-					{
-						ID:      "code",
-						Title:   "Code",
-						Content: modules.CodeSnippetFromEmbedded("dropdown_menu.templ", "go", showcase.TemplFiles),
-					},
-					{
-						ID:      "component",
-						Title:   "Component",
-						Content: modules.CodeSnippetFromEmbedded("dropdown_menu.templ", "go", components.TemplFiles),
-					},
-				},
-				TabsContainerClass:    "md:w-1/2",
-				ContentContainerClass: "w-full",
+		@modules.PageWrapper(modules.PageWrapperProps{
+			Name:        "Dropdown Menu",
+			Description: "The Dropdown Menu component provides a way to display a list of options in a compact form.",
+		}) {
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "Default",
+				ShowcaseFile:      showcase.DropdownMenuDefault(),
+				PreviewCodeFile:   "dropdownmenu.templ",
+				ComponentCodeFile: "dropdownmenu.templ",
 			})
-		</div>
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "With Icons",
+				ShowcaseFile:      showcase.DropdownMenuWithIcons(),
+				PreviewCodeFile:   "dropdownmenu_with_icons.templ",
+				ComponentCodeFile: "dropdownmenu.templ",
+			})
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "Advanced",
+				ShowcaseFile:      showcase.DropdownMenuAdvanced(),
+				PreviewCodeFile:   "dropdownmenu_advanced.templ",
+				ComponentCodeFile: "dropdownmenu.templ",
+			})
+		}
 	}
 }
diff --git a/internals/ui/pages/icon.templ b/internals/ui/pages/icon.templ
index baecf69..5497c24 100644
--- a/internals/ui/pages/icon.templ
+++ b/internals/ui/pages/icon.templ
@@ -4,34 +4,44 @@ import (
 	"github.com/axzilla/goilerplate/internals/ui/layouts"
 	"github.com/axzilla/goilerplate/internals/ui/modules"
 	"github.com/axzilla/goilerplate/internals/ui/showcase"
-	"github.com/axzilla/goilerplate/pkg/components"
 )
 
 templ Icon() {
 	@layouts.DocsLayout() {
-		<div>
-			<div class="mb-16">
-				<h1 class="text-3xl font-bold mb-2">Icon</h1>
-				<p class="mb-4 text-muted-foreground">
-					A wrapper for <a href="https://lucide.dev" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-2 hover:opacity-80 transition-opacity">Lucide Icons</a> with optional settings for size, color, fill, stroke, and custom classes. Browse available icons in the Lucide library to see what you can use.
-				</p>
-			</div>
-			@components.Tabs(components.TabsProps{
-				Tabs: []components.Tab{
-					{
-						ID:      "preview",
-						Title:   "Preview",
-						Content: showcase.IconShowcase(),
-					},
-					{
-						ID:      "code",
-						Title:   "Code",
-						Content: modules.CodeSnippetFromEmbedded("icon.templ", "go", showcase.TemplFiles),
-					},
-				},
-				TabsContainerClass:    "md:w-1/2",
-				ContentContainerClass: "w-full",
+		@modules.PageWrapper(modules.PageWrapperProps{
+			Name:        "Icon",
+			Description: `A wrapper for <a href="https://lucide.dev" target="_blank" rel="noopener noreferrer" class="text-primary underline underline-offset-2 hover:opacity-80 transition-opacity">Lucide Icons</a> with optional settings for size, color, fill, stroke, and custom classes. Browse available icons in the Lucide library to see what you can use.`,
+		}) {
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "Default",
+				ShowcaseFile:      showcase.IconDefault(),
+				PreviewCodeFile:   "icon_default.templ",
+				ComponentCodeFile: "icon.templ",
 			})
-		</div>
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "Colored",
+				ShowcaseFile:      showcase.IconColored(),
+				PreviewCodeFile:   "icon_colored.templ",
+				ComponentCodeFile: "icon.templ",
+			})
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "Filled",
+				ShowcaseFile:      showcase.IconFilled(),
+				PreviewCodeFile:   "icon_filled.templ",
+				ComponentCodeFile: "icon.templ",
+			})
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "Sizes",
+				ShowcaseFile:      showcase.IconSizes(),
+				PreviewCodeFile:   "icon_sizes.templ",
+				ComponentCodeFile: "icon.templ",
+			})
+			@modules.ExampleWrapper(modules.ExampleWrapperProps{
+				SectionName:       "Custom Classes",
+				ShowcaseFile:      showcase.IconCustomClasses(),
+				PreviewCodeFile:   "icon_custom_classes.templ",
+				ComponentCodeFile: "icon.templ",
+			})
+		}
 	}
 }
diff --git a/internals/ui/showcase/datepicker.templ b/internals/ui/showcase/datepicker.templ
index 52597ce..f9edbbd 100644
--- a/internals/ui/showcase/datepicker.templ
+++ b/internals/ui/showcase/datepicker.templ
@@ -2,14 +2,12 @@ package showcase
 
 import "github.com/axzilla/goilerplate/pkg/components"
 
-templ DatepickerShowcase() {
-	<div class="flex justify-center items-center border rounded-md py-16 px-4">
-		@components.Datepicker(components.DatepickerProps{
-			ID:          "my-datepicker",
-			Name:        "selected-date",
-			Placeholder: "Select a date",
-			Format:      "YYYY-MM-DD",
-			Class:       "w-full max-w-xs",
-		})
-	</div>
+templ Datepicker() {
+	@components.Datepicker(components.DatepickerProps{
+		ID:          "my-datepicker",
+		Name:        "selected-date",
+		Placeholder: "Select a date",
+		Format:      "YYYY-MM-DD",
+		Class:       "w-full max-w-xs",
+	})
 }
diff --git a/internals/ui/showcase/dropdown_menu.templ b/internals/ui/showcase/dropdown_menu.templ
deleted file mode 100644
index ac1643b..0000000
--- a/internals/ui/showcase/dropdown_menu.templ
+++ /dev/null
@@ -1,67 +0,0 @@
-package showcase
-
-import (
-	"github.com/axzilla/goilerplate/pkg/components"
-	"github.com/axzilla/goilerplate/pkg/icons"
-)
-
-templ DropdownMenuShowcase() {
-	<div class="flex justify-center items-center border rounded-md py-16 px-4">
-		<div class="flex gap-2 flex-wrap">
-			@components.DropdownMenu(components.DropdownMenuProps{
-				Items: []components.DropdownMenuItem{
-					{Label: "Profile", Value: "profile"},
-					{Label: "Settings", Value: "settings"},
-					{Label: "Logout", Value: "logout"},
-				},
-			})
-			@components.DropdownMenu(components.DropdownMenuProps{
-				Trigger: components.Button(components.ButtonProps{
-					Text:     "User Menu",
-					Variant:  "outline",
-					IconLeft: icons.Menu(icons.IconProps{Size: "16"}),
-				}),
-				Position: "right",
-				Items: []components.DropdownMenuItem{
-					{
-						Label:    "Profile",
-						IconLeft: icons.User(icons.IconProps{Size: "16"}),
-						Href:     "/docs/components/dropdown-menu",
-					},
-					{
-						Label:    "Settings",
-						IconLeft: icons.Settings(icons.IconProps{Size: "16"}),
-						Href:     "/docs/components/dropdown-menu",
-					},
-					{
-						Label:    "Logout",
-						IconLeft: icons.LogOut(icons.IconProps{Size: "16"}),
-						Value:    "logout",
-					},
-				},
-			})
-			@components.DropdownMenu(components.DropdownMenuProps{
-				Trigger: components.Button(components.ButtonProps{
-					Text:     "Advanced Menu",
-					Variant:  "outline",
-					IconLeft: icons.Menu(icons.IconProps{Size: "16"}),
-				}),
-				Position: "left",
-				Items: []components.DropdownMenuItem{
-					{Label: "File", SubItems: []components.DropdownMenuItem{
-						{Label: "New", Value: "new", Attributes: templ.Attributes{"@click": "alert('New')"}},
-						{Label: "Open", Value: "open", Attributes: templ.Attributes{"@click": "alert('Open')"}},
-						{Label: "Save", Value: "save", Attributes: templ.Attributes{"@click": "alert('Save')"}},
-					}},
-					{Label: "Edit", SubItems: []components.DropdownMenuItem{
-						{Label: "Cut", Value: "cut", Attributes: templ.Attributes{"@click": "alert('Cut')"}},
-						{Label: "Copy", Value: "copy", Attributes: templ.Attributes{"@click": "alert('Copy')"}},
-						{Label: "Paste", Value: "paste", Attributes: templ.Attributes{"@click": "alert('Paste')"}},
-					}},
-					{Label: "View", Disabled: true},
-					{Label: "Help", Href: "https://github.com/axzilla/goilerplate", Target: "_blank"},
-				},
-			})
-		</div>
-	</div>
-}
diff --git a/internals/ui/showcase/dropdown_menu_advanced.templ b/internals/ui/showcase/dropdown_menu_advanced.templ
new file mode 100644
index 0000000..333cef7
--- /dev/null
+++ b/internals/ui/showcase/dropdown_menu_advanced.templ
@@ -0,0 +1,31 @@
+package showcase
+
+import (
+	"github.com/axzilla/goilerplate/pkg/components"
+	"github.com/axzilla/goilerplate/pkg/icons"
+)
+
+templ DropdownMenuAdvanced() {
+	@components.DropdownMenu(components.DropdownMenuProps{
+		Trigger: components.Button(components.ButtonProps{
+			Text:     "Advanced Menu",
+			Variant:  "outline",
+			IconLeft: icons.Menu(icons.IconProps{Size: "16"}),
+		}),
+		Position: "left",
+		Items: []components.DropdownMenuItem{
+			{Label: "File", SubItems: []components.DropdownMenuItem{
+				{Label: "New", Value: "new", Attributes: templ.Attributes{"@click": "alert('New')"}},
+				{Label: "Open", Value: "open", Attributes: templ.Attributes{"@click": "alert('Open')"}},
+				{Label: "Save", Value: "save", Attributes: templ.Attributes{"@click": "alert('Save')"}},
+			}},
+			{Label: "Edit", SubItems: []components.DropdownMenuItem{
+				{Label: "Cut", Value: "cut", Attributes: templ.Attributes{"@click": "alert('Cut')"}},
+				{Label: "Copy", Value: "copy", Attributes: templ.Attributes{"@click": "alert('Copy')"}},
+				{Label: "Paste", Value: "paste", Attributes: templ.Attributes{"@click": "alert('Paste')"}},
+			}},
+			{Label: "View", Disabled: true},
+			{Label: "Help", Href: "https://github.com/axzilla/goilerplate", Target: "_blank"},
+		},
+	})
+}
diff --git a/internals/ui/showcase/dropdown_menu_default.templ b/internals/ui/showcase/dropdown_menu_default.templ
new file mode 100644
index 0000000..566172b
--- /dev/null
+++ b/internals/ui/showcase/dropdown_menu_default.templ
@@ -0,0 +1,13 @@
+package showcase
+
+import "github.com/axzilla/goilerplate/pkg/components"
+
+templ DropdownMenuDefault() {
+	@components.DropdownMenu(components.DropdownMenuProps{
+		Items: []components.DropdownMenuItem{
+			{Label: "Profile", Value: "profile"},
+			{Label: "Settings", Value: "settings"},
+			{Label: "Logout", Value: "logout"},
+		},
+	})
+}
diff --git a/internals/ui/showcase/dropdown_menu_with_icons.templ b/internals/ui/showcase/dropdown_menu_with_icons.templ
new file mode 100644
index 0000000..9c52fbf
--- /dev/null
+++ b/internals/ui/showcase/dropdown_menu_with_icons.templ
@@ -0,0 +1,34 @@
+package showcase
+
+import (
+	"github.com/axzilla/goilerplate/pkg/components"
+	"github.com/axzilla/goilerplate/pkg/icons"
+)
+
+templ DropdownMenuWithIcons() {
+	@components.DropdownMenu(components.DropdownMenuProps{
+		Trigger: components.Button(components.ButtonProps{
+			Text:     "User Menu",
+			Variant:  "outline",
+			IconLeft: icons.Menu(icons.IconProps{Size: "16"}),
+		}),
+		Position: "right",
+		Items: []components.DropdownMenuItem{
+			{
+				Label:    "Profile",
+				IconLeft: icons.User(icons.IconProps{Size: "16"}),
+				Href:     "/docs/components/dropdown-menu",
+			},
+			{
+				Label:    "Settings",
+				IconLeft: icons.Settings(icons.IconProps{Size: "16"}),
+				Href:     "/docs/components/dropdown-menu",
+			},
+			{
+				Label:    "Logout",
+				IconLeft: icons.LogOut(icons.IconProps{Size: "16"}),
+				Value:    "logout",
+			},
+		},
+	})
+}
diff --git a/internals/ui/showcase/icon.templ b/internals/ui/showcase/icon.templ
deleted file mode 100644
index 8582d9f..0000000
--- a/internals/ui/showcase/icon.templ
+++ /dev/null
@@ -1,50 +0,0 @@
-package showcase
-
-import "github.com/axzilla/goilerplate/pkg/icons"
-
-templ IconShowcase() {
-	<div class="flex justify-center items-center border rounded-md py-16 px-4">
-		<div>
-			<div class="mb-8">
-				<h2 class="font-semibold mb-2">Basic Icons</h2>
-				<div class="flex flex-wrap gap-2">
-					@icons.User(icons.IconProps{Size: "24"})
-					@icons.House(icons.IconProps{Size: "24"})
-					@icons.Settings(icons.IconProps{Size: "24"})
-				</div>
-			</div>
-			<div class="mb-8">
-				<h2 class="font-semibold mb-2">Colored Icons</h2>
-				<div class="flex flex-wrap gap-2">
-					@icons.Heart(icons.IconProps{Size: "24", Color: "red"})
-					@icons.Star(icons.IconProps{Size: "24", Color: "gold"})
-					@icons.Check(icons.IconProps{Size: "24", Color: "green"})
-				</div>
-			</div>
-			<div class="mb-8">
-				<h2 class="font-semibold mb-2">Filled Icons</h2>
-				<div class="flex flex-wrap gap-2">
-					@icons.Circle(icons.IconProps{Size: "24", Fill: "blue", Stroke: "blue"})
-					@icons.Square(icons.IconProps{Size: "24", Fill: "purple", Stroke: "purple"})
-					@icons.Triangle(icons.IconProps{Size: "24", Fill: "orange", Stroke: "orange"})
-				</div>
-			</div>
-			<div class="mb-8">
-				<h2 class="font-semibold mb-2">Different Sizes</h2>
-				<div class="flex flex-wrap gap-2">
-					@icons.House(icons.IconProps{Size: "16"})
-					@icons.House(icons.IconProps{Size: "24"})
-					@icons.House(icons.IconProps{Size: "32"})
-					@icons.House(icons.IconProps{Size: "48"})
-				</div>
-			</div>
-			<div class="mb-8">
-				<h2 class="font-semibold mb-2">Custom Classes</h2>
-				<div class="flex flex-wrap gap-2">
-					@icons.ArrowRight(icons.IconProps{Size: "24", Class: "text-blue-500 hover:text-blue-700"})
-					@icons.ArrowLeft(icons.IconProps{Size: "24", Class: "text-green-500 hover:text-green-700"})
-				</div>
-			</div>
-		</div>
-	</div>
-}
diff --git a/internals/ui/showcase/icon_colored.templ b/internals/ui/showcase/icon_colored.templ
new file mode 100644
index 0000000..107ffe7
--- /dev/null
+++ b/internals/ui/showcase/icon_colored.templ
@@ -0,0 +1,11 @@
+package showcase
+
+import "github.com/axzilla/goilerplate/pkg/icons"
+
+templ IconColored() {
+	<div class="flex flex-wrap gap-2">
+		@icons.Heart(icons.IconProps{Size: "24", Color: "red"})
+		@icons.Star(icons.IconProps{Size: "24", Color: "gold"})
+		@icons.Check(icons.IconProps{Size: "24", Color: "green"})
+	</div>
+}
diff --git a/internals/ui/showcase/icon_custom_classes.templ b/internals/ui/showcase/icon_custom_classes.templ
new file mode 100644
index 0000000..28756aa
--- /dev/null
+++ b/internals/ui/showcase/icon_custom_classes.templ
@@ -0,0 +1,10 @@
+package showcase
+
+import "github.com/axzilla/goilerplate/pkg/icons"
+
+templ IconCustomClasses() {
+	<div class="flex flex-wrap gap-2">
+		@icons.ArrowRight(icons.IconProps{Size: "24", Class: "text-blue-500 hover:text-blue-700"})
+		@icons.ArrowLeft(icons.IconProps{Size: "24", Class: "text-green-500 hover:text-green-700"})
+	</div>
+}
diff --git a/internals/ui/showcase/icon_default.templ b/internals/ui/showcase/icon_default.templ
new file mode 100644
index 0000000..a9ae52c
--- /dev/null
+++ b/internals/ui/showcase/icon_default.templ
@@ -0,0 +1,11 @@
+package showcase
+
+import "github.com/axzilla/goilerplate/pkg/icons"
+
+templ IconDefault() {
+	<div class="flex flex-wrap gap-2">
+		@icons.User(icons.IconProps{Size: "24"})
+		@icons.House(icons.IconProps{Size: "24"})
+		@icons.Settings(icons.IconProps{Size: "24"})
+	</div>
+}
diff --git a/internals/ui/showcase/icon_filled.templ b/internals/ui/showcase/icon_filled.templ
new file mode 100644
index 0000000..14fdecb
--- /dev/null
+++ b/internals/ui/showcase/icon_filled.templ
@@ -0,0 +1,11 @@
+package showcase
+
+import "github.com/axzilla/goilerplate/pkg/icons"
+
+templ IconFilled() {
+	<div class="flex flex-wrap gap-2">
+		@icons.Circle(icons.IconProps{Size: "24", Fill: "blue", Stroke: "blue"})
+		@icons.Square(icons.IconProps{Size: "24", Fill: "purple", Stroke: "purple"})
+		@icons.Triangle(icons.IconProps{Size: "24", Fill: "orange", Stroke: "orange"})
+	</div>
+}
diff --git a/internals/ui/showcase/icon_sizes.templ b/internals/ui/showcase/icon_sizes.templ
new file mode 100644
index 0000000..f82ea79
--- /dev/null
+++ b/internals/ui/showcase/icon_sizes.templ
@@ -0,0 +1,12 @@
+package showcase
+
+import "github.com/axzilla/goilerplate/pkg/icons"
+
+templ IconSizes() {
+	<div class="flex flex-wrap gap-2">
+		@icons.House(icons.IconProps{Size: "16"})
+		@icons.House(icons.IconProps{Size: "24"})
+		@icons.House(icons.IconProps{Size: "32"})
+		@icons.House(icons.IconProps{Size: "48"})
+	</div>
+}