diff --git a/src/app/components/menus/confirmation.component.ts b/src/app/components/menus/confirmation.component.ts
index 8e44b76..b7c219e 100644
--- a/src/app/components/menus/confirmation.component.ts
+++ b/src/app/components/menus/confirmation.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-confirmation',
   template: `
-  <div class="flex flex-column align-items-center py-5 px-3">
+  <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
     <i class="pi pi-fw pi-check mr-2 text-2xl"></i>
     <p class="m-0 mt-5 text-center text-lg">Confirmation Component Content via Child Route</p>
   </div>
diff --git a/src/app/components/menus/menus.component.html b/src/app/components/menus/menus.component.html
index 3447d60..4eaf91e 100755
--- a/src/app/components/menus/menus.component.html
+++ b/src/app/components/menus/menus.component.html
@@ -22,15 +22,14 @@
 
     <div class="col-12">
         <div class="card card-w-title flex flex-wrap">
-            <div class="col-12">
-                <h5>TabMenu and Steps</h5>
-                <p>TabMenu and Steps are integrated with the same child routes.</p>
+            <div class="col-12 md:col-8 h-full">
+                <h5>TabMenu</h5>
+                <p-tabMenu styleClass="mb-5" [model]="routeItems"></p-tabMenu>
+
+                <h5>Steps</h5>
+                <p-steps [model]="routeItems" styleClass="mt-5" [readonly]="false"></p-steps>
             </div>
-            <div class="col-12 md:col-8">
-                    <p-tabMenu [model]="routeItems"></p-tabMenu>
-                    <p-steps [model]="routeItems" styleClass="mt-5" [readonly]="false"></p-steps>
-            </div>
-            <div class="col-12 md:col-4 align-self-center h-full">
+            <div class="col-12 md:col-4 mt-5 md:mt-0">
                 <router-outlet></router-outlet>
             </div>
         </div>
diff --git a/src/app/components/menus/payment.component.ts b/src/app/components/menus/payment.component.ts
index 48eac4a..7821418 100644
--- a/src/app/components/menus/payment.component.ts
+++ b/src/app/components/menus/payment.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-payment',
   template: `
-    <div class="flex flex-column align-items-center py-5 px-3">
+    <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
       <i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
       <p class="m-0 mt-5 text-center text-lg">Payment Component Content via Child Route</p>
     </div>
diff --git a/src/app/components/menus/personal.component.ts b/src/app/components/menus/personal.component.ts
index 4762727..339d499 100644
--- a/src/app/components/menus/personal.component.ts
+++ b/src/app/components/menus/personal.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-personal',
   template: `
-  <div class="flex flex-column align-items-center py-5 px-3">
+  <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
     <i class="pi pi-fw pi-user mr-2 text-2xl"></i>
     <p class="mt-5 text-center text-lg">Personal Component Content via Child Route</p>
   </div>
diff --git a/src/app/components/menus/seat.component.ts b/src/app/components/menus/seat.component.ts
index e1220e0..11a56ea 100644
--- a/src/app/components/menus/seat.component.ts
+++ b/src/app/components/menus/seat.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-seat',
   template: `
-    <div class="flex flex-column align-items-center py-5 px-3">
+    <div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
       <i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
       <p class="m-0 mt-5 text-center text-lg">Seat Component Content via Child Route</p>
     </div>