diff --git a/src/views/uikit/menudoc.ts b/src/views/uikit/menudoc.ts
index 0a9ce60..ed08585 100644
--- a/src/views/uikit/menudoc.ts
+++ b/src/views/uikit/menudoc.ts
@@ -10,80 +10,102 @@ import { PanelMenuModule } from 'primeng/panelmenu';
 import { TabsModule } from 'primeng/tabs';
 import { MenubarModule } from 'primeng/menubar';
 import { InputTextModule } from 'primeng/inputtext';
+import { StepperModule } from 'primeng/stepper';
 
 
 @Component({
     standalone:true,
-    imports: [CommonModule, BreadcrumbModule, TieredMenuModule, MenuModule, ButtonModule, ContextMenuModule, MegaMenuModule, PanelMenuModule, TabsModule, MenubarModule, InputTextModule],
-    template: `<div class="grid p-fluid">
-        <div class="col-12">
-            <div class="card card-w-title">
-                <h5>MenuBar</h5>
-                <p-menubar [model]="nestedMenuItems">
-                    <ng-template #end>
+    imports: [CommonModule, BreadcrumbModule, TieredMenuModule, MenuModule, ButtonModule, ContextMenuModule, MegaMenuModule, PanelMenuModule, TabsModule, MenubarModule, InputTextModule, TabsModule, StepperModule, TabsModule],
+    template: `
+        <div class="card">
+            <div class="font-semibold text-xl mb-4">Menubar</div>
+            <p-menubar [model]="nestedMenuItems">
+                <ng-template #end>
                     <span class="p-input-icon-right">
                         <input type="text" pInputText placeholder="Search">
                         <i class="pi pi-search"></i>
                     </span>
-                    </ng-template>
-                </p-menubar>
+                </ng-template>
+            </p-menubar>
+        </div>
+
+        <div class="card">
+            <div class="font-semibold text-xl mb-4">Breadcrumb</div>
+            <p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb>
+        </div>
+
+        <div class="flex flex-col md:flex-row gap-8">
+            <div class="md:w-1/2">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">Steps</div>
+                    <p-stepper [value]="1">
+                        <p-step-list>
+                            <p-step [value]="1">Header I</p-step>
+                            <p-step [value]="2">Header II</p-step>
+                            <p-step [value]="3">Header III</p-step>
+                        </p-step-list>
+                    </p-stepper>
+                </div>
+            </div>
+            <div class="md:w-1/2">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">TabMenu</div>
+                    <p-tabs [value]="0">
+                        <p-tablist>
+                            <p-tab [value]="0">Header I</p-tab>
+                            <p-tab [value]="1">Header II</p-tab>
+                            <p-tab [value]="2">Header III</p-tab>
+                        </p-tablist>
+                    </p-tabs>
+                </div>
             </div>
         </div>
 
-        <div class="col-12">
-            <div class="card card-w-title">
-                <h5>Breadcrumb</h5>
-                <p-breadcrumb [model]="breadcrumbItems" [home]="breadcrumbHome"></p-breadcrumb>
+        <div class="flex flex-col md:flex-row gap-8 mt-6">
+            <div class="md:w-1/3">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">Tiered Menu</div>
+                    <p-tieredMenu [model]="tieredMenuItems"></p-tieredMenu>
+                </div>
+            </div>
+            <div class="md:w-1/3">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">Plain Menu</div>
+                    <p-menu [model]="menuItems"></p-menu>
+                </div>
+            </div>
+            <div class="md:w-1/3">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">Overlay Menu</div>
+                    <p-menu #menu [popup]="true" [model]="overlayMenuItems"></p-menu>
+                    <button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
+                </div>
+
+                <div class="card" #anchor>
+                    <div class="font-semibold text-xl mb-4">Context Menu</div>
+                    Right click to display.
+                    <p-contextMenu [target]="anchor" [model]="contextMenuItems"></p-contextMenu>
+                </div>
             </div>
         </div>
 
+        <div class="flex flex-col md:flex-row gap-8 mt-8">
+            <div class="md:w-1/2">
+                <div class="card">
+                    <div class="font-semibold text-xl mb-4">MegaMenu | Horizontal</div>
+                    <p-megaMenu [model]="megaMenuItems" />
 
-        <div class="col-12 md:col-4">
-            <div class="card card-w-title">
-                <h5>TieredMenu</h5>
-                <p-tieredMenu [model]="tieredMenuItems"></p-tieredMenu>
+                    <div class="font-semibold text-xl mb-4 mt-8">MegaMenu | Vertical</div>
+                    <p-megaMenu [model]="megaMenuItems" orientation="vertical" />
+                </div>
+
+                <div class="md:w-1/2">
+                    <div class="card">
+                        <div class="font-semibold text-xl mb-4">PanelMenu</div>
+                        <p-panelMenu [model]="panelMenuItems" />
+                    </div>
+                </div>
             </div>
-        </div>
-
-        <div class="col-12 md:col-4">
-            <div class="card card-w-title">
-                <h5>Plain Menu</h5>
-                <p-menu [model]="menuItems"></p-menu>
-            </div>
-        </div>
-
-        <div class="col-12 md:col-4">
-
-            <div class="card card-w-title">
-                <h5>Overlay Menu</h5>
-
-                <p-menu #menu [popup]="true" [model]="overlayMenuItems"></p-menu>
-                <button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
-            </div>
-
-            <div class="card card-w-title" #anchor>
-                <h5>ContextMenu</h5>
-                Right click to display.
-                <p-contextMenu [target]="anchor" [model]="contextMenuItems"></p-contextMenu>
-            </div>
-        </div>
-
-        <div class="col-12 md:col-6">
-            <div class="card card-w-title">
-                <h5>MegaMenu - Horizontal</h5>
-                <p-megaMenu [model]="megaMenuItems"></p-megaMenu>
-
-                <h5>MegaMenu - Vertical</h5>
-                <p-megaMenu [model]="megaMenuItems" orientation="vertical" [style]="{'width':'200px'}"></p-megaMenu>
-            </div>
-        </div>
-
-        <div class="col-12 md:col-6">
-            <div class="card card-w-title">
-                <h5>PanelMenu</h5>
-                <p-panelMenu [model]="panelMenuItems"></p-panelMenu>
-            </div>
-        </div>
     </div>
     `,
 })