diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index a21a601..7ec2485 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,29 +1,28 @@
-import {RouterModule} from '@angular/router';
-import {NgModule} from '@angular/core';
-import {DashboardComponent} from './components/dashboard/dashboard.component';
-import {FormLayoutComponent} from './components/formlayout/formlayout.component';
-import {PanelsComponent} from './components/panels/panels.component';
-import {OverlaysComponent} from './components/overlays/overlays.component';
-import {MediaComponent} from './components/media/media.component';
-import {MessagesComponent} from './components/messages/messages.component';
-import {MiscComponent} from './components/misc/misc.component';
-import {EmptyComponent} from './components/empty/empty.component';
-import {ChartsComponent} from './components/charts/charts.component';
-import {FileComponent} from './components/file/file.component';
-import {DocumentationComponent} from './components/documentation/documentation.component';
-import {AppMainComponent} from './app.main.component';
-import {InputComponent} from './components/input/input.component';
-import {ButtonComponent} from './components/button/button.component';
-import {TableComponent} from './components/table/table.component';
-import {ListComponent} from './components/list/list.component';
-import {TreeComponent} from './components/tree/tree.component';
-import {CrudComponent} from './components/crud/crud.component';
-import {AppBlocksComponent} from './components/app-blocks/app-blocks.component';
-import {FloatLabelComponent} from './components/floatlabel/floatlabel.component';
-import {InvalidStateComponent} from './components/invalidstate/invalidstate.component';
-import {TimelineComponent} from './components/timeline/timeline.component';
-import {IconsComponent} from './components/icons/icons.component';
-import {MenusComponent} from './components/menus/menus.component';
+import { RouterModule } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { DashboardComponent } from './components/dashboard/dashboard.component';
+import { FormLayoutComponent } from './components/formlayout/formlayout.component';
+import { PanelsComponent } from './components/panels/panels.component';
+import { OverlaysComponent } from './components/overlays/overlays.component';
+import { MediaComponent } from './components/media/media.component';
+import { MessagesComponent } from './components/messages/messages.component';
+import { MiscComponent } from './components/misc/misc.component';
+import { EmptyComponent } from './components/empty/empty.component';
+import { ChartsComponent } from './components/charts/charts.component';
+import { FileComponent } from './components/file/file.component';
+import { DocumentationComponent } from './components/documentation/documentation.component';
+import { AppMainComponent } from './app.main.component';
+import { InputComponent } from './components/input/input.component';
+import { ButtonComponent } from './components/button/button.component';
+import { TableComponent } from './components/table/table.component';
+import { ListComponent } from './components/list/list.component';
+import { TreeComponent } from './components/tree/tree.component';
+import { CrudComponent } from './components/crud/crud.component';
+import { AppBlocksComponent } from './components/app-blocks/app-blocks.component';
+import { FloatLabelComponent } from './components/floatlabel/floatlabel.component';
+import { InvalidStateComponent } from './components/invalidstate/invalidstate.component';
+import { TimelineComponent } from './components/timeline/timeline.component';
+import { IconsComponent } from './components/icons/icons.component';
 @NgModule({
     imports: [
         RouterModule.forRoot([
@@ -42,7 +41,7 @@ import {MenusComponent} from './components/menus/menus.component';
                     {path: 'uikit/panel', component: PanelsComponent},
                     {path: 'uikit/overlay', component: OverlaysComponent},
                     {path: 'uikit/media', component: MediaComponent},
-                    {path: 'uikit/menu', component: MenusComponent},
+                    {path: 'uikit/menu', loadChildren: () => import('./components/menus/menus.module').then(m => m.MenusModule)},
                     {path: 'uikit/message', component: MessagesComponent},
                     {path: 'uikit/misc', component: MiscComponent},
                     {path: 'uikit/charts', component: ChartsComponent},
diff --git a/src/app/app.config.component.ts b/src/app/app.config.component.ts
index 4813f29..726941f 100644
--- a/src/app/app.config.component.ts
+++ b/src/app/app.config.component.ts
@@ -1,6 +1,6 @@
-import {Component, OnInit} from '@angular/core';
-import {AppComponent} from './app.component';
-import {AppMainComponent} from './app.main.component';
+import { Component, OnInit } from '@angular/core';
+import { AppComponent } from './app.component';
+import { AppMainComponent } from './app.main.component';
 
 @Component({
     selector: 'app-config',
diff --git a/src/app/app.footer.component.ts b/src/app/app.footer.component.ts
index 5f8246e..dece5ec 100644
--- a/src/app/app.footer.component.ts
+++ b/src/app/app.footer.component.ts
@@ -1,5 +1,5 @@
-import {Component} from '@angular/core';
-import {AppComponent} from './app.component';
+import { Component } from '@angular/core';
+import { AppComponent } from './app.component';
 
 @Component({
     selector: 'app-footer',
diff --git a/src/app/app.main.component.ts b/src/app/app.main.component.ts
index 3832599..31359eb 100644
--- a/src/app/app.main.component.ts
+++ b/src/app/app.main.component.ts
@@ -1,5 +1,5 @@
-import {Component, AfterViewInit, OnDestroy, ViewChild, Renderer2, OnInit} from '@angular/core';
-import {trigger, state, style, transition, animate} from '@angular/animations';
+import { Component, AfterViewInit, OnDestroy, Renderer2, OnInit } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import { PrimeNGConfig } from 'primeng/api';
 import { AppComponent } from './app.component';
 
diff --git a/src/app/app.menu.component.ts b/src/app/app.menu.component.ts
index dff5473..8777f68 100644
--- a/src/app/app.menu.component.ts
+++ b/src/app/app.menu.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit } from '@angular/core';
-import {AppComponent} from './app.component';
+import { Component, OnInit } from '@angular/core';
+import { AppComponent } from './app.component';
 
 @Component({
     selector: 'app-menu',
diff --git a/src/app/app.menuitem.component.ts b/src/app/app.menuitem.component.ts
index 9222c33..2d73144 100644
--- a/src/app/app.menuitem.component.ts
+++ b/src/app/app.menuitem.component.ts
@@ -1,10 +1,10 @@
-import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit} from '@angular/core';
-import {NavigationEnd, Router} from '@angular/router';
-import {animate, state, style, transition, trigger} from '@angular/animations';
-import {Subscription} from 'rxjs';
-import {filter} from 'rxjs/operators';
-import {MenuService} from './service/app.menu.service';
-import {AppMainComponent} from './app.main.component';
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { MenuService } from './service/app.menu.service';
+import { AppMainComponent } from './app.main.component';
 
 @Component({
     /* tslint:disable:component-selector */
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 54ea0c5..ce9272e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,133 +1,137 @@
-import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
-import {BrowserModule} from '@angular/platform-browser';
-import {LocationStrategy, HashLocationStrategy} from '@angular/common';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {AppRoutingModule} from './app-routing.module';
+import { BrowserModule } from '@angular/platform-browser';
+import { LocationStrategy, HashLocationStrategy } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AppRoutingModule } from './app-routing.module';
 
-import {AccordionModule} from 'primeng/accordion';
-import {AutoCompleteModule} from 'primeng/autocomplete';
-import {AvatarModule} from 'primeng/avatar';
-import {AvatarGroupModule} from 'primeng/avatargroup';
-import {BadgeModule} from 'primeng/badge';
-import {BreadcrumbModule} from 'primeng/breadcrumb';
-import {ButtonModule} from 'primeng/button';
-import {CalendarModule} from 'primeng/calendar';
-import {CardModule} from 'primeng/card';
-import {CarouselModule} from 'primeng/carousel';
-import {CascadeSelectModule} from 'primeng/cascadeselect';
-import {ChartModule} from 'primeng/chart';
-import {CheckboxModule} from 'primeng/checkbox';
-import {ChipModule} from 'primeng/chip';
-import {ChipsModule} from 'primeng/chips';
-import {CodeHighlighterModule} from 'primeng/codehighlighter';
-import {ConfirmDialogModule} from 'primeng/confirmdialog';
-import {ConfirmPopupModule} from 'primeng/confirmpopup';
-import {ColorPickerModule} from 'primeng/colorpicker';
-import {ContextMenuModule} from 'primeng/contextmenu';
-import {DataViewModule} from 'primeng/dataview';
-import {DialogModule} from 'primeng/dialog';
-import {DividerModule} from 'primeng/divider';
-import {DropdownModule} from 'primeng/dropdown';
-import {FieldsetModule} from 'primeng/fieldset';
-import {FileUploadModule} from 'primeng/fileupload';
-import {GalleriaModule} from 'primeng/galleria';
-import {ImageModule} from 'primeng/image';
-import {InplaceModule} from 'primeng/inplace';
-import {InputNumberModule} from 'primeng/inputnumber';
-import {InputMaskModule} from 'primeng/inputmask';
-import {InputSwitchModule} from 'primeng/inputswitch';
-import {InputTextModule} from 'primeng/inputtext';
-import {InputTextareaModule} from 'primeng/inputtextarea';
-import {KnobModule} from 'primeng/knob';
-import {LightboxModule} from 'primeng/lightbox';
-import {ListboxModule} from 'primeng/listbox';
-import {MegaMenuModule} from 'primeng/megamenu';
-import {MenuModule} from 'primeng/menu';
-import {MenubarModule} from 'primeng/menubar';
-import {MessagesModule} from 'primeng/messages';
-import {MessageModule} from 'primeng/message';
-import {MultiSelectModule} from 'primeng/multiselect';
-import {OrderListModule} from 'primeng/orderlist';
-import {OrganizationChartModule} from 'primeng/organizationchart';
-import {OverlayPanelModule} from 'primeng/overlaypanel';
-import {PaginatorModule} from 'primeng/paginator';
-import {PanelModule} from 'primeng/panel';
-import {PanelMenuModule} from 'primeng/panelmenu';
-import {PasswordModule} from 'primeng/password';
-import {PickListModule} from 'primeng/picklist';
-import {ProgressBarModule} from 'primeng/progressbar';
-import {RadioButtonModule} from 'primeng/radiobutton';
-import {RatingModule} from 'primeng/rating';
-import {RippleModule} from 'primeng/ripple';
-import {ScrollPanelModule} from 'primeng/scrollpanel';
-import {ScrollTopModule} from 'primeng/scrolltop';
-import {SelectButtonModule} from 'primeng/selectbutton';
-import {SidebarModule} from 'primeng/sidebar';
-import {SkeletonModule} from 'primeng/skeleton';
-import {SlideMenuModule} from 'primeng/slidemenu';
-import {SliderModule} from 'primeng/slider';
-import {SplitButtonModule} from 'primeng/splitbutton';
-import {SplitterModule} from 'primeng/splitter';
-import {StepsModule} from 'primeng/steps';
-import {TabMenuModule} from 'primeng/tabmenu';
-import {TableModule} from 'primeng/table';
-import {TabViewModule} from 'primeng/tabview';
-import {TagModule} from 'primeng/tag';
-import {TerminalModule} from 'primeng/terminal';
-import {TieredMenuModule} from 'primeng/tieredmenu';
-import {TimelineModule} from 'primeng/timeline';
-import {ToastModule} from 'primeng/toast';
-import {ToggleButtonModule} from 'primeng/togglebutton';
-import {ToolbarModule} from 'primeng/toolbar';
-import {TooltipModule} from 'primeng/tooltip';
-import {TreeModule} from 'primeng/tree';
-import {TreeSelectModule} from 'primeng/treeselect';
-import {TreeTableModule} from 'primeng/treetable';
-import {VirtualScrollerModule} from 'primeng/virtualscroller';
-import {BlockViewer} from './components/app-blockviewer/app.blockviewer.component';
+import { AccordionModule } from 'primeng/accordion';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { AvatarModule } from 'primeng/avatar';
+import { AvatarGroupModule } from 'primeng/avatargroup';
+import { BadgeModule } from 'primeng/badge';
+import { BreadcrumbModule } from 'primeng/breadcrumb';
+import { ButtonModule } from 'primeng/button';
+import { CalendarModule } from 'primeng/calendar';
+import { CardModule } from 'primeng/card';
+import { CarouselModule } from 'primeng/carousel';
+import { CascadeSelectModule } from 'primeng/cascadeselect';
+import { ChartModule } from 'primeng/chart';
+import { CheckboxModule } from 'primeng/checkbox';
+import { ChipModule } from 'primeng/chip';
+import { ChipsModule } from 'primeng/chips';
+import { CodeHighlighterModule } from 'primeng/codehighlighter';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ConfirmPopupModule } from 'primeng/confirmpopup';
+import { ColorPickerModule } from 'primeng/colorpicker';
+import { ContextMenuModule } from 'primeng/contextmenu';
+import { DataViewModule } from 'primeng/dataview';
+import { DialogModule } from 'primeng/dialog';
+import { DividerModule } from 'primeng/divider';
+import { DropdownModule } from 'primeng/dropdown';
+import { FieldsetModule } from 'primeng/fieldset';
+import { FileUploadModule } from 'primeng/fileupload';
+import { GalleriaModule } from 'primeng/galleria';
+import { ImageModule } from 'primeng/image';
+import { InplaceModule } from 'primeng/inplace';
+import { InputNumberModule } from 'primeng/inputnumber';
+import { InputMaskModule } from 'primeng/inputmask';
+import { InputSwitchModule } from 'primeng/inputswitch';
+import { InputTextModule } from 'primeng/inputtext';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { KnobModule } from 'primeng/knob';
+import { LightboxModule } from 'primeng/lightbox';
+import { ListboxModule } from 'primeng/listbox';
+import { MegaMenuModule } from 'primeng/megamenu';
+import { MenuModule } from 'primeng/menu';
+import { MenubarModule } from 'primeng/menubar';
+import { MessagesModule } from 'primeng/messages';
+import { MessageModule } from 'primeng/message';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { OrderListModule } from 'primeng/orderlist';
+import { OrganizationChartModule } from 'primeng/organizationchart';
+import { OverlayPanelModule } from 'primeng/overlaypanel';
+import { PaginatorModule } from 'primeng/paginator';
+import { PanelModule } from 'primeng/panel';
+import { PanelMenuModule } from 'primeng/panelmenu';
+import { PasswordModule } from 'primeng/password';
+import { PickListModule } from 'primeng/picklist';
+import { ProgressBarModule } from 'primeng/progressbar';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { RatingModule } from 'primeng/rating';
+import { RippleModule } from 'primeng/ripple';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+import { ScrollTopModule } from 'primeng/scrolltop';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import { SidebarModule } from 'primeng/sidebar';
+import { SkeletonModule } from 'primeng/skeleton';
+import { SlideMenuModule } from 'primeng/slidemenu';
+import { SliderModule } from 'primeng/slider';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import { SplitterModule } from 'primeng/splitter';
+import { StepsModule } from 'primeng/steps';
+import { TabMenuModule } from 'primeng/tabmenu';
+import { TableModule } from 'primeng/table';
+import { TabViewModule } from 'primeng/tabview';
+import { TagModule } from 'primeng/tag';
+import { TerminalModule } from 'primeng/terminal';
+import { TieredMenuModule } from 'primeng/tieredmenu';
+import { TimelineModule } from 'primeng/timeline';
+import { ToastModule } from 'primeng/toast';
+import { ToggleButtonModule } from 'primeng/togglebutton';
+import { ToolbarModule } from 'primeng/toolbar';
+import { TooltipModule } from 'primeng/tooltip';
+import { TreeModule } from 'primeng/tree';
+import { TreeSelectModule } from 'primeng/treeselect';
+import { TreeTableModule } from 'primeng/treetable';
+import { VirtualScrollerModule } from 'primeng/virtualscroller';
+import { BlockViewer } from './components/app-blockviewer/app.blockviewer.component';
+ 
+import { AppCodeModule } from './components/app-code/app.code.component';
+import { AppComponent } from './app.component';
+import { AppMainComponent } from './app.main.component';
+import { AppTopBarComponent } from './app.topbar.component';
+import { AppFooterComponent } from './app.footer.component';
+import { AppConfigComponent } from './app.config.component';
+import { AppMenuComponent } from './app.menu.component';
+import { AppMenuitemComponent } from './app.menuitem.component';
+import { DashboardComponent } from './components/dashboard/dashboard.component';
+import { FormLayoutComponent } from './components/formlayout/formlayout.component';
+import { FloatLabelComponent } from './components/floatlabel/floatlabel.component';
+import { InvalidStateComponent } from './components/invalidstate/invalidstate.component';
+import { InputComponent } from './components/input/input.component';
+import { ButtonComponent } from './components/button/button.component';
+import { TableComponent } from './components/table/table.component';
+import { ListComponent } from './components/list/list.component';
+import { TreeComponent } from './components/tree/tree.component';
+import { PanelsComponent } from './components/panels/panels.component';
+import { OverlaysComponent } from './components/overlays/overlays.component';
+import { MediaComponent } from './components/media/media.component';
+import { MenusComponent } from './components/menus/menus.component';
+import { MessagesComponent } from './components/messages/messages.component';
+import { MiscComponent } from './components/misc/misc.component';
+import { EmptyComponent } from './components/empty/empty.component';
+import { ChartsComponent } from './components/charts/charts.component';
+import { FileComponent } from './components/file/file.component';
+import { DocumentationComponent } from './components/documentation/documentation.component';
+import { CrudComponent } from './components/crud/crud.component';
+import { TimelineComponent } from './components/timeline/timeline.component';
+import { IconsComponent } from './components/icons/icons.component';
+import { AppBlocksComponent } from './components/app-blocks/app-blocks.component';
 
-import {AppCodeModule} from './components/app-code/app.code.component';
-import {AppComponent} from './app.component';
-import {AppMainComponent} from './app.main.component';
-import {AppTopBarComponent} from './app.topbar.component';
-import {AppFooterComponent} from './app.footer.component';
-import {AppConfigComponent} from './app.config.component';
-import {AppMenuComponent} from './app.menu.component';
-import {AppMenuitemComponent} from './app.menuitem.component';
-import {DashboardComponent} from './components/dashboard/dashboard.component';
-import {FormLayoutComponent} from './components/formlayout/formlayout.component';
-import {FloatLabelComponent} from './components/floatlabel/floatlabel.component';
-import {InvalidStateComponent} from './components/invalidstate/invalidstate.component';
-import {InputComponent} from './components/input/input.component';
-import {ButtonComponent} from './components/button/button.component';
-import {TableComponent} from './components/table/table.component';
-import {ListComponent} from './components/list/list.component';
-import {TreeComponent} from './components/tree/tree.component';
-import {PanelsComponent} from './components/panels/panels.component';
-import {OverlaysComponent} from './components/overlays/overlays.component';
-import {MediaComponent} from './components/media/media.component';
-import {MenusComponent} from './components/menus/menus.component';
-import {MessagesComponent} from './components/messages/messages.component';
-import {MiscComponent} from './components/misc/misc.component';
-import {EmptyComponent} from './components/empty/empty.component';
-import {ChartsComponent} from './components/charts/charts.component';
-import {FileComponent} from './components/file/file.component';
-import {DocumentationComponent} from './components/documentation/documentation.component';
-import {CrudComponent} from './components/crud/crud.component';
-import {TimelineComponent} from './components/timeline/timeline.component';
-import {IconsComponent} from './components/icons/icons.component';
-import {AppBlocksComponent} from './components/app-blocks/app-blocks.component';
-
-import {CountryService} from './service/countryservice';
-import {CustomerService} from './service/customerservice';
-import {EventService} from './service/eventservice';
-import {IconService} from './service/iconservice';
-import {NodeService} from './service/nodeservice';
-import {PhotoService} from './service/photoservice';
-import {ProductService} from './service/productservice';
-import {MenuService} from './service/app.menu.service';
+import { PaymentComponent} from './components/menus/payment.component';
+import { ConfirmationComponent } from './components/menus/confirmation.component';
+import { PersonalComponent } from './components/menus/personal.component';
+import { SeatComponent } from './components/menus/seat.component';
+import { CountryService } from './service/countryservice';
+import { CustomerService } from './service/customerservice';
+import { EventService } from './service/eventservice';
+import { IconService } from './service/iconservice';
+import { NodeService } from './service/nodeservice';
+import { PhotoService } from './service/photoservice';
+import { ProductService } from './service/productservice';
+import { MenuService } from './service/app.menu.service';
 
 @NgModule({
     imports: [
@@ -250,11 +254,11 @@ import {MenuService} from './service/app.menu.service';
         TimelineComponent,
         AppBlocksComponent,
         BlockViewer,
-        // SeatDemoComponent,
-        // PaymentDemoComponent,
-        // PersonalDemoComponent,
-        // ConfirmationDemoComponent,
-        MediaComponent
+        MediaComponent,
+        PaymentComponent,
+        ConfirmationComponent,
+        PersonalComponent,
+        SeatComponent,
     ],
     providers: [
         {provide: LocationStrategy, useClass: HashLocationStrategy},
diff --git a/src/app/app.topbar.component.ts b/src/app/app.topbar.component.ts
index 3cd3e6d..5622d60 100644
--- a/src/app/app.topbar.component.ts
+++ b/src/app/app.topbar.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnDestroy} from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { AppComponent } from './app.component';
 import { AppMainComponent } from './app.main.component';
 import { Subscription } from 'rxjs';
diff --git a/src/app/components/button/button.component.ts b/src/app/components/button/button.component.ts
index d8eb595..f0dc617 100644
--- a/src/app/components/button/button.component.ts
+++ b/src/app/components/button/button.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit} from '@angular/core';
-import {MenuItem} from 'primeng/api';
+import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
 
 @Component({
     templateUrl: './button.component.html'
diff --git a/src/app/components/charts/charts.component.ts b/src/app/components/charts/charts.component.ts
index e2126a3..4554485 100755
--- a/src/app/components/charts/charts.component.ts
+++ b/src/app/components/charts/charts.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
     templateUrl: './charts.component.html'
diff --git a/src/app/components/crud/crud.component.ts b/src/app/components/crud/crud.component.ts
index fd56ac3..b262137 100644
--- a/src/app/components/crud/crud.component.ts
+++ b/src/app/components/crud/crud.component.ts
@@ -1,7 +1,7 @@
-import {Component, OnInit} from '@angular/core';
-import {Product} from '../../api/product';
-import {ProductService} from '../../service/productservice';
-import {ConfirmationService, MessageService} from 'primeng/api';
+import { Component, OnInit } from '@angular/core';
+import { Product } from '../../api/product';
+import { ProductService } from '../../service/productservice';
+import { ConfirmationService, MessageService } from 'primeng/api';
 
 @Component({
     templateUrl: './crud.component.html',
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index d6849c5..a25750a 100755
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -1,8 +1,7 @@
-import {Component, OnInit} from '@angular/core';
-import {MenuModule} from 'primeng/menu';
-import {MenuItem} from 'primeng/api';
-import {Product} from '../../api/product';
-import {ProductService} from '../../service/productservice';
+import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { Product } from '../../api/product';
+import { ProductService } from '../../service/productservice';
  
 @Component({
     templateUrl: './dashboard.component.html',
diff --git a/src/app/components/documentation/documentation.component.ts b/src/app/components/documentation/documentation.component.ts
index 6547bd6..b8cb341 100755
--- a/src/app/components/documentation/documentation.component.ts
+++ b/src/app/components/documentation/documentation.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     templateUrl: './documentation.component.html',
diff --git a/src/app/components/empty/empty.component.ts b/src/app/components/empty/empty.component.ts
index f319d14..7b17016 100755
--- a/src/app/components/empty/empty.component.ts
+++ b/src/app/components/empty/empty.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     templateUrl: './empty.component.html'
diff --git a/src/app/components/file/file.component.ts b/src/app/components/file/file.component.ts
index 6d3166e..383eef7 100755
--- a/src/app/components/file/file.component.ts
+++ b/src/app/components/file/file.component.ts
@@ -1,5 +1,5 @@
-import {Component} from '@angular/core';
-import {MessageService} from 'primeng/api';
+import { Component } from '@angular/core';
+import { MessageService } from 'primeng/api';
 
 @Component({
     templateUrl: './file.component.html',
diff --git a/src/app/components/floatlabel/floatlabel.component.ts b/src/app/components/floatlabel/floatlabel.component.ts
index 3eda93d..4b2c018 100644
--- a/src/app/components/floatlabel/floatlabel.component.ts
+++ b/src/app/components/floatlabel/floatlabel.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit} from '@angular/core';
-import {CountryService} from '../../service/countryservice';
+import { Component, OnInit } from '@angular/core';
+import { CountryService } from '../../service/countryservice';
 
 @Component({
     templateUrl: './floatlabel.component.html',
diff --git a/src/app/components/formlayout/formlayout.component.ts b/src/app/components/formlayout/formlayout.component.ts
index 6ef4fa4..27a5d9c 100644
--- a/src/app/components/formlayout/formlayout.component.ts
+++ b/src/app/components/formlayout/formlayout.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     templateUrl: './formlayout.component.html'
diff --git a/src/app/components/input/input.component.ts b/src/app/components/input/input.component.ts
index 4f95f37..3d25f57 100644
--- a/src/app/components/input/input.component.ts
+++ b/src/app/components/input/input.component.ts
@@ -1,7 +1,7 @@
-import {Component, OnInit} from '@angular/core';
-import {CountryService} from '../../service/countryservice';
-import {NodeService} from '../../service/nodeservice';
-import {SelectItem} from 'primeng/api';
+import { Component, OnInit } from '@angular/core';
+import { CountryService } from '../../service/countryservice';
+import { NodeService } from '../../service/nodeservice';
+import { SelectItem } from 'primeng/api';
 
 @Component({
     templateUrl: './input.component.html',
diff --git a/src/app/components/invalidstate/invalidstate.component.ts b/src/app/components/invalidstate/invalidstate.component.ts
index 59c7e79..097db7f 100644
--- a/src/app/components/invalidstate/invalidstate.component.ts
+++ b/src/app/components/invalidstate/invalidstate.component.ts
@@ -1,12 +1,11 @@
-import {Component, OnInit} from '@angular/core';
-import {CountryService} from '../../service/countryservice';
+import { Component, OnInit } from '@angular/core';
+import { CountryService } from '../../service/countryservice';
 
 @Component({
     templateUrl: './invalidstate.component.html'
 })
 export class InvalidStateComponent implements OnInit {
 
-
     countries: any[];
 
     cities: any[];
diff --git a/src/app/components/list/list.component.ts b/src/app/components/list/list.component.ts
index adc7495..85ad36b 100644
--- a/src/app/components/list/list.component.ts
+++ b/src/app/components/list/list.component.ts
@@ -1,7 +1,7 @@
-import {Component, OnInit} from '@angular/core';
-import {SelectItem} from 'primeng/api';
-import {Product} from '../../api/product';
-import {ProductService} from '../../service/productservice';
+import { Component, OnInit } from '@angular/core';
+import { SelectItem } from 'primeng/api';
+import { Product } from '../../api/product';
+import { ProductService } from '../../service/productservice';
 
 @Component({
     templateUrl: './list.component.html',
diff --git a/src/app/components/media/media.component.ts b/src/app/components/media/media.component.ts
index fc15fc5..e9c516b 100644
--- a/src/app/components/media/media.component.ts
+++ b/src/app/components/media/media.component.ts
@@ -1,7 +1,7 @@
-import {Component, OnInit} from '@angular/core';
-import {ProductService} from '../../service/productservice';
-import {PhotoService} from '../../service/photoservice';
-import {Product} from '../../api/product';
+import { Component, OnInit } from '@angular/core';
+import { ProductService } from '../../service/productservice';
+import { PhotoService } from '../../service/photoservice';
+import { Product } from '../../api/product';
 
 @Component({
   selector: 'app-media',
diff --git a/src/app/components/menus/stepsmenu/confirmationdemo.component.ts b/src/app/components/menus/confirmation.component.ts
similarity index 80%
rename from src/app/components/menus/stepsmenu/confirmationdemo.component.ts
rename to src/app/components/menus/confirmation.component.ts
index de2ba90..8e44b76 100644
--- a/src/app/components/menus/stepsmenu/confirmationdemo.component.ts
+++ b/src/app/components/menus/confirmation.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-confirmationdemo',
+  selector: 'app-confirmation',
   template: `
   <div class="flex flex-column align-items-center py-5 px-3">
     <i class="pi pi-fw pi-check mr-2 text-2xl"></i>
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
   </div>
   `
 })
-export class ConfirmationDemoComponent {
+export class ConfirmationComponent {
 
   constructor() { }
 }
diff --git a/src/app/components/menus/menus.component.ts b/src/app/components/menus/menus.component.ts
index fceb7e2..d9a3859 100755
--- a/src/app/components/menus/menus.component.ts
+++ b/src/app/components/menus/menus.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit, ViewEncapsulation} from '@angular/core';
-import {MegaMenuItem, MenuItem} from 'primeng/api';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { MegaMenuItem, MenuItem } from 'primeng/api';
 
 @Component({
     templateUrl: './menus.component.html',
diff --git a/src/app/components/menus/menus.module.ts b/src/app/components/menus/menus.module.ts
new file mode 100644
index 0000000..2d594d6
--- /dev/null
+++ b/src/app/components/menus/menus.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+
+import { PaymentComponent } from './payment.component';
+import { SeatComponent } from './seat.component';
+import { PersonalComponent } from './personal.component';
+import { ConfirmationComponent } from './confirmation.component';
+import { MenusComponent } from './menus.component';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([
+        {path:'',component: MenusComponent, children:[
+				{path:'', redirectTo: 'personal', pathMatch: 'full'},
+				{path: 'personal', component: PersonalComponent},
+				{path: 'confirmation', component: ConfirmationComponent},
+				{path: 'seat', component: SeatComponent},
+				{path: 'payment', component: PaymentComponent}
+        ]}
+    ])
+  ],
+  exports: [RouterModule]
+})
+export class MenusModule { }
diff --git a/src/app/components/menus/stepsmenu/paymentdemo.component.ts b/src/app/components/menus/payment.component.ts
similarity index 83%
rename from src/app/components/menus/stepsmenu/paymentdemo.component.ts
rename to src/app/components/menus/payment.component.ts
index e262a3f..48eac4a 100644
--- a/src/app/components/menus/stepsmenu/paymentdemo.component.ts
+++ b/src/app/components/menus/payment.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-paymentdemo',
+  selector: 'app-payment',
   template: `
     <div class="flex flex-column align-items-center py-5 px-3">
       <i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
     </div>
   `
 })
-export class PaymentDemoComponent{
+export class PaymentComponent{
 
   constructor() { }
 }
diff --git a/src/app/components/menus/stepsmenu/personaldemo.component.ts b/src/app/components/menus/personal.component.ts
similarity index 82%
rename from src/app/components/menus/stepsmenu/personaldemo.component.ts
rename to src/app/components/menus/personal.component.ts
index 4a405d5..4762727 100644
--- a/src/app/components/menus/stepsmenu/personaldemo.component.ts
+++ b/src/app/components/menus/personal.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-personaldemo',
+  selector: 'app-personal',
   template: `
   <div class="flex flex-column align-items-center py-5 px-3">
     <i class="pi pi-fw pi-user mr-2 text-2xl"></i>
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
   </div>
   `
 })
-export class PersonalDemoComponent{
+export class PersonalComponent{
 
   constructor() { }
 }
diff --git a/src/app/components/menus/stepsmenu/seatdemo.component.ts b/src/app/components/menus/seat.component.ts
similarity index 84%
rename from src/app/components/menus/stepsmenu/seatdemo.component.ts
rename to src/app/components/menus/seat.component.ts
index 46e8ba3..e1220e0 100644
--- a/src/app/components/menus/stepsmenu/seatdemo.component.ts
+++ b/src/app/components/menus/seat.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-seatdemo',
+  selector: 'app-seat',
   template: `
     <div class="flex flex-column align-items-center py-5 px-3">
       <i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
     </div>
   `
 })
-export class SeatDemoComponent{
+export class SeatComponent{
 
   constructor() { }
 }
diff --git a/src/app/components/menus/stepsmenu/stepsmenu.module.ts b/src/app/components/menus/stepsmenu/stepsmenu.module.ts
deleted file mode 100644
index 5acc98e..0000000
--- a/src/app/components/menus/stepsmenu/stepsmenu.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule, Routes } from '@angular/router';
-
-import { PaymentDemoComponent } from './paymentdemo.component';
-import { SeatDemoComponent } from './seatdemo.component';
-import { PersonalDemoComponent } from './personaldemo.component';
-import { ConfirmationDemoComponent } from './confirmationdemo.component';
-// import { MenusDemoComponent } from '../menusdemo.component';
-
-@NgModule({
-  declarations: [],
-  imports: [
-    CommonModule,
-    RouterModule.forChild([
-        // {path:'',component: MenusDemoComponent, children:[
-				// {path:'', redirectTo: 'personal', pathMatch: 'full'},
-				// {path: 'personal', component: PersonalDemoComponent},
-				// {path: 'confirmation', component: ConfirmationDemoComponent},
-				// {path: 'seat', component: SeatDemoComponent},
-				// {path: 'payment', component: PaymentDemoComponent}
-        // ]}
-    ])
-  ],
-  exports: [RouterModule]
-})
-export class MenudemoModule { }
diff --git a/src/app/components/messages/messages.component.ts b/src/app/components/messages/messages.component.ts
index 9d7a843..a50e0f9 100755
--- a/src/app/components/messages/messages.component.ts
+++ b/src/app/components/messages/messages.component.ts
@@ -1,5 +1,5 @@
-import {Component} from '@angular/core';
-import {Message, MessageService} from 'primeng/api';
+import { Component } from '@angular/core';
+import { Message, MessageService } from 'primeng/api';
 
 @Component({
     templateUrl: './messages.component.html',
diff --git a/src/app/components/misc/misc.component.ts b/src/app/components/misc/misc.component.ts
index 9008e0c..cb4cddf 100755
--- a/src/app/components/misc/misc.component.ts
+++ b/src/app/components/misc/misc.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
     templateUrl: './misc.component.html',
diff --git a/src/app/components/overlays/overlays.component.ts b/src/app/components/overlays/overlays.component.ts
index 65a32d1..592bde4 100755
--- a/src/app/components/overlays/overlays.component.ts
+++ b/src/app/components/overlays/overlays.component.ts
@@ -1,8 +1,8 @@
-import {Component, OnInit} from '@angular/core';
-import {ConfirmationService, MessageService} from 'primeng/api';
-import {Product} from '../../api/product';
-import {AppMainComponent} from 'src/app/app.main.component';
-import {ProductService} from '../../service/productservice';
+import { Component, OnInit } from '@angular/core';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import { Product } from '../../api/product';
+import { AppMainComponent } from 'src/app/app.main.component';
+import { ProductService } from '../../service/productservice';
 
 @Component({
     templateUrl: './overlays.component.html',
diff --git a/src/app/components/panels/panels.component.ts b/src/app/components/panels/panels.component.ts
index 45bcc06..cb6e02e 100755
--- a/src/app/components/panels/panels.component.ts
+++ b/src/app/components/panels/panels.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit} from '@angular/core';
-import {MenuItem} from 'primeng/api';
+import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
 
 @Component({
     templateUrl: './panels.component.html',
diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts
index a46837f..d8cd477 100644
--- a/src/app/components/table/table.component.ts
+++ b/src/app/components/table/table.component.ts
@@ -1,9 +1,9 @@
-import {Component, OnInit, ViewChild, ChangeDetectorRef, ElementRef} from '@angular/core';
-import {Customer, Representative} from '../../api/customer';
-import {CustomerService} from '../../service/customerservice';
-import {Product} from '../../api/product';
-import {ProductService} from '../../service/productservice';
-import {Table} from 'primeng/table';
+import { Component, OnInit, ViewChild, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { Customer, Representative } from '../../api/customer';
+import { CustomerService } from '../../service/customerservice';
+import { Product } from '../../api/product';
+import { ProductService } from '../../service/productservice';
+import { Table } from 'primeng/table';
 import { MessageService, ConfirmationService } from 'primeng/api'
 
 @Component({
diff --git a/src/app/components/timeline/timeline.component.ts b/src/app/components/timeline/timeline.component.ts
index e6add27..bde3c8b 100644
--- a/src/app/components/timeline/timeline.component.ts
+++ b/src/app/components/timeline/timeline.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit} from '@angular/core';
-import {PrimeIcons} from 'primeng/api';
+import { Component, OnInit } from '@angular/core';
+import { PrimeIcons } from 'primeng/api';
 
 @Component({
     templateUrl: './timeline.component.html',
diff --git a/src/app/components/tree/tree.component.ts b/src/app/components/tree/tree.component.ts
index 6566cc2..f0161ae 100644
--- a/src/app/components/tree/tree.component.ts
+++ b/src/app/components/tree/tree.component.ts
@@ -1,6 +1,6 @@
-import {Component, OnInit} from '@angular/core';
-import {NodeService} from '../../service/nodeservice';
-import {TreeNode} from 'primeng/api';
+import { Component, OnInit } from '@angular/core';
+import { NodeService } from '../../service/nodeservice';
+import { TreeNode } from 'primeng/api';
 
 @Component({
     templateUrl: './tree.component.html'