diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index defa9f2..e4c761b 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,7 +1,33 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './examples/home/home.component';
+import { ButtonsComponent } from './examples/buttons/buttons.component';
+import { CurrencyInputComponent } from './examples/currency-input/currency-input.component';
+import { StepperComponent } from './examples/stepper/stepper.component';
+import { DataFilterComponent } from './examples/data-filter/data-filter.component';
+import { MoreMenuComponent } from './examples/more-menu/more-menu.component';
+import { DatePickerComponent } from './examples/date-picker/date-picker.component';
+import { SelectComponent } from './examples/select/select.component';
+import { TableOfContentsComponent } from './examples/table-of-contents/table-of-contents.component';
+import { TextEditorComponent } from './examples/text-editor/text-editor.component';
+import { PageHeaderComponent } from './examples/page-header/page-header.component';
+import { DataTableComponent } from './examples/data-table/data-table.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path: '', redirectTo: 'home', pathMatch: 'full'},
+  {path: 'buttons',component: ButtonsComponent},
+  {path: 'currency-input',component: CurrencyInputComponent},
+  {path: 'stepper',component: StepperComponent},
+  //{path: 'data-filter',component: DataFilterComponent},
+  {path: 'more-menu',component: MoreMenuComponent},
+  {path: 'date-picker',component: DatePickerComponent},
+  {path: 'select',component: SelectComponent},
+  {path: 'home',component: HomeComponent},
+  {path: 'toc',component: TableOfContentsComponent},
+  {path: 'text-editor',component: TextEditorComponent},
+  {path: 'page-header', component: PageHeaderComponent},
+  {path: 'data-table',component: DataTableComponent}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 233b312..ce4798d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,187 +1,21 @@
-<sa-base-page>
-  <div class="page-header">
-    <sa-header
-      [header]="headerConfig"
-      (primaryClick)="onPrimaryClick($event)"
-      (secondaryClick)="onSecondaryClick($event)"
-    ></sa-header>
-  </div>
-</sa-base-page>
-<ng-template #myTemplate let-item>
-  <button mat-icon-button [matMenuTriggerFor]="menu">
-    <mat-icon>more_vert</mat-icon>
-  </button>
-  <mat-menu #menu="matMenu">
-    <button mat-menu-item (click)="deleteByIndex()">Delete By Index</button>
-    <button mat-menu-item (click)="deleteByPredicate(item)">Delete By Predicate</button>
-    <button mat-menu-item (click)="deleteByObject(item)">Delete By Object Matching</button>
-  </mat-menu>
-</ng-template>
-<h3 style="float: right"> Navigation Menu Component </h3>
-<sa-navigable-page [secondaryMenu]="secondaryNavMenu">
-  <h3> Header Component </h3>
-  <sa-base-page>
-    <div class="page-header">
-      <sa-header
-        [header]="headerConfig"
-        (primaryClick)="onPrimaryClick($event)"
-        (secondaryClick)="onSecondaryClick($event)"
-      ></sa-header>
-    </div>
-  </sa-base-page>
-
-  <h3> Short Number Pipe </h3>
-  <ul>
-    <li>10 => {{ 10 | abbreviateNumber: true }}</li>
-    <li>143 => {{ 143 | abbreviateNumber: true }}</li>
-    <li>-14.34 => {{ -14.34 | abbreviateNumber: true }}</li>
-    <li>-$1,000000.00 => {{ '-$1,000000.00' | abbreviateNumber: true }}</li>
-    <li>-$100000000000 => {{ '$-100000000000' | abbreviateNumber: true }}</li>
-    <li>100065783884000 => {{ '100065783884000$' | abbreviateNumber: true }}</li>
-    <li>fffff => {{ 'fffff' | abbreviateNumber }}</li>
-  </ul>
-
-  <p>{{ date | dateTime: dateFormats.timeZoneAbb }}</p>
-  <p>{{ date1 | dateTime: dateFormats.timeZoneAbb }}</p>
-  <p>{{ date2 | dateTime: dateFormats.timeZoneAbb }}</p>
-
-  <h3> Button Component </h3>
-  <sa-button [config]="saveButtonConfig" (onClick)="onClick()"></sa-button>
-
-  <br />
-  <h3> Currency Inpput Component </h3>
-  <mat-form-field>
-    <mat-label>Currency</mat-label>
-    <sa-currency-input></sa-currency-input>
-  </mat-form-field>
-
-  <h3> Filter Component </h3>
-  <sa-data-filter [filters]="dataFilterConfigArray"></sa-data-filter>
-
-  <h3> Date Time Component </h3>
-  <mat-form-field>
-    <mat-label>Enter Date</mat-label>
-    <sa-date-picker
-      [dateConfig]="dateConfig"
-      [formControl]="data"
-      (onSelection)="dateSelectionChange($event)"
-    ></sa-date-picker>
-  </mat-form-field>
-
-  <h3> More Menu Component </h3>
-  <sa-more-menu [items]="menuItems"></sa-more-menu>
-
-  <h3> Select Component </h3>
-  <mat-form-field>
-    <mat-label>Select</mat-label>
-    <sa-select [config]="selectOptions" [formControl]="select"></sa-select>
-  </mat-form-field>
-
-  <h3> Stepper Component </h3>
-  <sa-stepper [value]="2" label="Stepper"></sa-stepper>
-
-  <h3> Text Editor Component </h3>
-  <form [formGroup]="editorForm">
-    <mat-form-field style="width: 100%">
-      <mat-label>Text Editor</mat-label>
-      <sa-text-editor [required]="true" formControlName="description" name="Description"></sa-text-editor>
-    </mat-form-field>
-  </form>
-
-  <h3> Data Table Component </h3>
-  <sa-button [config]="saveButtonConfig" (onClick)="updateTable()"></sa-button>
-  <button mat-raised-button (click)="refreshTable()">Refresh Table</button>
-
-  <ng-template #selectOptionBody let-item>{{ item }}</ng-template>
-
-  <ng-template #myTemplate let-item>
-    <button mat-icon-button [matMenuTriggerFor]="menu">
-      <mat-icon>more_vert</mat-icon>
-    </button>
-    <mat-menu #menu="matMenu">
-      <button mat-menu-item (click)="deleteByIndex()">Delete By Index</button>
-      <button mat-menu-item (click)="deleteByPredicate(item)">Delete By Predicate</button>
-      <button mat-menu-item (click)="deleteByObject(item)">Delete By Object Matching</button>
-    </mat-menu>
-  </ng-template>
-
-  <ng-template #colTemplate let-column="column" let-row="row">
-    <div matTooltip="my tooltip "> Something very long that </div>
-  </ng-template>
-  <h3 id="reactiveForms">Reactive Forms and patch value</h3>
-
-  <button type="button" (click)="hide = !!!hide"> hide / show </button>
-
-  <button type="button" (click)="quillform.enabled ? quillform.disable() : quillform.enable()">
-    disable / enable
-  </button>
-
-  <button type="button" (click)="backgroundColor = backgroundColor ? '' : 'grey'">toggle backgroundColor </button>
-
-  <pre>{{ quillform.get('editor').value }}</pre>
-  <button type="button" (click)="patchValue()">patchValue</button>
-  <button type="button" (click)="setControl()">setControl</button>
-  <button (click)="toggleReadOnly()">Toggle ReadOnly</button>
-  <button (click)="toggleRequired()">Toggle Required</button>
-  <p>Readonly: {{ isReadOnly }} Required: {{ isRequired }}</p>
-
-  <form [formGroup]="quillform">
-    FormControl valid: {{ quillform.get('editor').valid }}<br />
-    <quill-editor
-      #editor
-      [style.display]="hide ? 'none' : 'block'"
-      [styles]="{ backgroundColor: backgroundColor }"
-      formControlName="editor"
-      [maxLength]="10"
-      [trimOnValidation]="isRequired"
-      [required]="isRequired"
-    >
-    </quill-editor>
-
-    <h4>Material Quill</h4>
-
-    <pre>{{ quillform.get('matEditor').value }}</pre>
-    FormControl valid: {{ quillform.get('matEditor').valid }}<br />
-    <mat-form-field appearance="fill" style="display: block !important">
-      <sa-text-editor
-        #matEditor
-        [style.display]="hide ? 'none' : 'block'"
-        formControlName="matEditor"
-        [maxLength]="10"
-        [required]="isRequired"
-        [readOnly]="isReadOnly"
-        [trimOnValidation]="isRequired"
-        (onContentChanged)="logChange($event)"
-        (onSelectionChanged)="logSelection($event)"
-      >
-      </sa-text-editor>
-    </mat-form-field>
-  </form>
-</sa-navigable-page>
-
-<sa-data-table [dataTable]="dataTable">
-  <ng-template #listItemTemplate let-row="row">
-    <mat-list-item>Area: {{ row.area }} Line: {{ row.line }} Machine: {{ row.machine }}</mat-list-item>
-    <mat-divider></mat-divider>
-  </ng-template>
-</sa-data-table>
-
-<ng-template #titleTemplate let-column="column" let-row="row">
-  <td class="text-truncate" matTooltip="{{ row['title'] }}">
-    {{ row['title'] }}
-  </td>
-</ng-template>
-
-<ng-template #issueTemplate let-column="column" let-row="row">
-  <td class="text-truncate" matTooltip="{{ row['issue'] }}">
-    {{ row['issue'] }}
-  </td>
-</ng-template>
-
-<ng-template #statusTemplate let-column="column" let-row="row">
-  <div *ngIf="row['status']">
-    <span [ngStyle]="{ width: 'max-content' }">
-      {{ row['status'] }}
-    </span>
-  </div>
-</ng-template>
+<div>
+  <mat-drawer-container style='height: 100vh' [hasBackdrop]="true">
+    <mat-drawer style='width: 200px' #drawer mode="over">
+      <mat-nav-list>
+        <a mat-list-item [href]='link' *ngFor="let link of links"> {{ link }} </a>
+      </mat-nav-list>
+    </mat-drawer>
+    <mat-drawer-content>
+      <div>
+        <mat-toolbar color='primary'>
+          <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon" (click)='drawer.toggle()'>
+            <mat-icon>menu</mat-icon>
+          </button>
+          <span>Simplified UI</span>
+          <span fxFlex></span>
+        </mat-toolbar>
+        <router-outlet style='margin: 40px'></router-outlet>
+      </div>
+    </mat-drawer-content>
+  </mat-drawer-container>
+</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index a036256..d145494 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -4,3 +4,4 @@
 .sa-invalid {
   background-color: blue;
 }
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 31a4858..ad748ac 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -34,592 +34,20 @@ const moment = moment_;
   styleUrls: ['./app.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class AppComponent implements OnInit {
-  @ViewChild('selectOptionBody', { static: true }) selectOptionBody;
-  @ViewChild('myTemplate', { static: true }) dataTableOptionsRef: TemplateRef<any>;
-  @ViewChild('colTemplate', { static: true }) colTemplate: TemplateRef<any>;
-
-  dateFormats = DateFormats;
-
-  date = moment.tz(moment(), moment.tz.guess()); //current timezone
-  date1 = moment.tz(moment(), 'America/Toronto'); //string timezone
-  date2 = moment.tz(); //UTC timezone
-
-  content = 'abc';
-
-  items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
-
-  isLoading: boolean = true;
-
-  isSpin: boolean = true;
-
-  saveButtonConfig = new SaButtonConfig('Toggle Spinner');
-
-  dataFilterConfig: IDataFilterViewModel;
-
-  dataFilterConfigArray: IDataFilterViewModel[] = [];
-
-  selectOptions = new SaSelectConfig<string>();
-
-  dateConfig = new DatePickerConfig();
-
-  data = new FormControl();
-
-  primarButton = new SaButtonConfig('primary');
-  secondaryButton = new SaButtonConfig('secondary');
-
-  headerConfig: IHeaderViewModel = {
-    title: 'Header',
-    primaryButton: this.primarButton,
-    secondaryButton: this.secondaryButton,
-    moreMenu: null,
-    tooltip: 'Hello THere!'
-  };
-
-  currencyForm = this.fb.group({
-    currency: new FormControl()
-  });
-
-  menuItems: SaMoreMenuItem[] = [new SaMoreMenuItem('Item 1'), new SaMoreMenuItem('Item 2')];
-
-  primaryMenu: NavigationItem[] = [
-    new NavigationItem('Basic Information', 'basicInformation'),
-    new NavigationItem('5G', '5g'),
-    new NavigationItem('MOC', 'moc'),
-    new NavigationItem('Tools', 'tools'),
-    new NavigationItem('Team', 'team'),
-    new NavigationItem('5W1H', '5w1h'),
-    new NavigationItem('Results', 'results')
-  ];
-
-  quickPrimaryMenu: NavigationItem[] = [
-    new NavigationItem('Basic Information', 'basicInformation'),
-    new NavigationItem('5G', '5g'),
-    new NavigationItem('MOC', 'moc'),
-    new NavigationItem('Tools', 'tools'),
-    new NavigationItem('Team', 'team'),
-    new NavigationItem('5W1H', '5w1h'),
-    new NavigationItem('Results', 'results')
-  ];
-
-  standardPrimaryMenu: NavigationItem[] = [
-    new NavigationItem('Basic Information', 'basicInformation'),
-    new NavigationItem('Kaizen Information', 'kaizenInformation'),
-    new NavigationItem('5G', '5g'),
-    new NavigationItem('MOC', 'moc'),
-    new NavigationItem('Tools', 'tools'),
-    new NavigationItem('Team', 'team'),
-    new NavigationItem('Targets', 'targets'),
-    new NavigationItem('5W1H', '5w1h'),
-    new NavigationItem('4M1D', '4m1d'),
-    new NavigationItem('5WHY', '5why'),
-    new NavigationItem('Results', 'results')
-  ];
-
-  secondaryNavMenu: NavigationItem[] = [new NavigationItem('Nav 1', null), new NavigationItem('Nav 2', null)];
-
-  //example new quil
-  hide = false;
-  quillform: FormGroup;
-  backgroundColor = '';
-  @ViewChild('editor', {
-    static: true
-  })
-  editor: QuillEditorComponent;
-  @ViewChild('matEditor', {
-    static: true
-  })
-  matEditor: SaTextEditorComponent;
-  isReadOnly = false;
-  isRequired = false;
-
-  setControl() {
-    this.quillform.setControl('editor', new FormControl('test - new Control'));
-    this.quillform.setControl('matEditor', new FormControl('test - new Control'));
-  }
-
-  patchValue() {
-    this.quillform.get('editor').patchValue(`${this.quillform.get('editor').value} patched!`);
-    this.quillform.get('matEditor').patchValue(`${this.quillform.get('matEditor').value} patched!`);
-  }
-
-  logChange($event: ContentChange) {
-    // tslint:disable-next-line:no-console
-  }
-
-  logSelection($event: SelectionChange) {
-    // tslint:disable-next-line:no-console
-  }
-
-  toggleReadOnly() {
-    this.isReadOnly = !this.isReadOnly;
-  }
-
-  toggleRequired() {
-    this.isRequired = !this.isRequired;
-  }
-
-  //end
-  editorForm = this.fb.group({
-    description: new FormControl(null, Validators.required)
-  });
-  description = new FormControl(null, Validators.required);
-
-  dataTable: DataTable<any> = new DataTable();
-
-  select = new FormControl();
-
-  constructor(private fb: FormBuilder, private client: HttpClient) {
-    this.quillform = fb.group({
-      editor: ['<ol><li>test</li><li>123</li></ol>'],
-      matEditor: ['<ol><li>test</li><li>123</li></ol>']
-    });
-  }
-
-  ngOnInit() {
-    this.quillform.controls.editor.valueChanges.pipe(debounceTime(400), distinctUntilChanged()).subscribe((data) => {
-      // tslint:disable-next-line:no-console
-      console.log('native fromControl value changes with debounce', data);
-    });
-
-    this.editor.onContentChanged.pipe(debounceTime(400), distinctUntilChanged()).subscribe((data: ContentChange) => {
-      // tslint:disable-next-line:no-console
-      console.log('view child + directly subscription', data);
-    });
-
-    this.matEditor.onContentChanged.pipe(debounceTime(400), distinctUntilChanged()).subscribe((data: ContentChange) => {
-      // tslint:disable-next-line:no-console
-      console.log('view child + directly subscription', data);
-    });
-
-    this.selectOptions.templateRef = this.selectOptionBody;
-    this.selectOptions.getResults = (page, term) => {
-      return this.client.get(`https://localhost:44386/api/v2/team/teams?term=${term}&pageNumber=${page}`).pipe(
-        map((x) => {
-          let genericList = <IGenericPageListViewModel<any>>x;
-          genericList.List = genericList.List.map((y) => y.name);
-          return genericList;
-        })
-      );
-    };
-
-    this.primarButton.type = SaButtonType.Secondary;
-
-    this.dataFilterConfig = {
-      filterType: FilterTypeEnum.date,
-      config: new DatePickerConfig(),
-      key: 'createdDate',
-      title: 'Created Date'
-    };
-
-    this.dataFilterConfigArray.push(this.dataFilterConfig);
-
-    this.saveButtonConfig.isSpinning = false;
-    this.saveButtonConfig.loadingText = 'Saving';
-    this.saveButtonConfig.type = SaButtonType.Anchor;
-
-    this.currencyForm.controls.currency.setValue('100');
-    this.setupDataTable();
-
-    this.dateConfig.pickerType = DatePickerType.calendar;
-    this.dateConfig.selectMode = DatePickerSelectMode.range;
-
-    // this.data.valueChanges.subscribe(x => console.log("value changes", x));
-  }
-  dateSelectionChange(a) {
-    console.log('selection change', a);
-  }
-  onClick() {}
-
-  onPrimaryClick(event) {
-    this.primarButton.isSpinning = true;
-    this.editorForm.disable();
-  }
-
-  onSecondaryClick(event) {
-    this.primarButton.isSpinning = false;
-  }
-
-  updateTable() {
-    this.dataTable.addRow({
-      key: this.json.length + 1,
-      area: 'column 1',
-      line: 'column 2',
-      machine: 'column 3'
-    });
-  }
-
-  private setupDataTable() {
-    this.dataTable.defaultPageSize = 1;
-    this.dataTable.optionsColumnRef = this.dataTableOptionsRef;
-    // this.dataTable.showFilters = false;
-    this.dataTable.disableSorting = true;
-    this.dataTable.showColumnToggle = true;
-    this.dataTable.routerLinkEnabled = true;
-    this.dataTable.showCheckboxColumn = true;
-    this.dataTable.addFilter(this.dataFilterConfig);
-
-    this.dataTable.addColumn({
-      key: 'name',
-      title: 'Tool Name',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      }
-      // template: this.colTemplate,
-      // sticky: true
-    });
-
-    this.dataTable.addColumn({
-      key: 'area1',
-      title: 'Area that is too big to fit in a row',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      },
-      template: this.colTemplate
-    });
-
-    this.dataTable.addColumn({
-      key: 'area188',
-      title: 'Area that is too big to fit in a row',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      },
-      template: this.colTemplate
-    });
-
-    this.dataTable.addColumn({
-      key: 'area121112',
-      title: 'Area that is too big to fit in a row',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      },
-      template: this.colTemplate
-    });
-
-    this.dataTable.addColumn({
-      key: 'area12111',
-      title: 'Area that is too big to fit in a row',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      },
-      template: this.colTemplate
-    });
-
-    this.dataTable.addColumn({
-      key: 'area199',
-      title: 'Area that is too big to fit in a row',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      },
-      template: this.colTemplate
-    });
-
-    this.dataTable.addColumn({
-      key: 'area2',
-      title: 'Area',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      },
-      template: this.colTemplate
-    });
-
-    this.dataTable.addColumn({
-      key: 'area3',
-      title: 'Area that is too big to fit in a row',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      },
-      template: this.colTemplate
-    });
-
-    this.dataTable.addColumn({
-      key: 'area4',
-      title: 'Area',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      },
-      template: this.colTemplate
-    });
-
-    this.dataTable.addColumn({
-      key: 'area5',
-      title: 'Area',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      },
-      template: this.colTemplate
-    });
-
-    this.dataTable.addColumn({
-      key: 'area6',
-      title: 'Area',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      },
-      template: this.colTemplate
-    });
-
-    this.dataTable.addColumn({
-      key: 'area7',
-      title: 'Area',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      },
-      template: this.colTemplate
-    });
-
-    this.dataTable.addColumn({
-      key: 'area8',
-      title: 'Area',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      },
-      template: this.colTemplate
-    });
-
-    this.dataTable.addColumn({
-      key: 'area9',
-      title: 'Area',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.text,
-        key: 'column1'
-      },
-      template: this.colTemplate
-    });
-
-    let datepickerConfig = new DatePickerConfig();
-
-    this.dataTable.addColumn({
-      key: 'line',
-      title: 'Line',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        title: 'Line',
-        config: datepickerConfig,
-        filterType: FilterTypeEnum.date,
-        key: 'column2',
-        defaults: [
-          // [new Date(), new Date().setMonth(10)],
-          // [new Date(), new Date(new Date().setMonth(10))],
-          // [new Date(), new Date().setMonth(10)],
-        ]
-      }
-    });
-
-    this.dataTable.addColumn({
-      key: 'machine',
-      title: 'Machine',
-      type: DataTableColumnTypeEnum.text,
-      filter: {
-        config: null,
-        filterType: FilterTypeEnum.none,
-        key: 'column3'
-      }
-    });
-
-    this.dataTable.selectedRowPredicate = (row, selected) => {
-      if (selected && selected.id == row.id) {
-        console.log('row matched', row);
-      }
-      if (row.id == 1) {
-        console.log('row matched static', row);
-      }
-
-      return (selected && selected.id == row.id) || row.id == 1;
-    };
-    this.dataTable.showPaginator = true;
-    this.dataTable.getResults = (requestModel) => {
-      let res = this.json.filter((x) => x.area.includes(requestModel.filter.keyword));
-
-      return of({
-        Capacity: 100,
-        Count: 1,
-        List: res,
-        Pager: {
-          CurrentPage: 1,
-          PagenumberToDisplay: [1],
-          PageSize: 5,
-          Pages: 1,
-          TotalRecords: 100,
-          UrlFormat: ''
-        }
-      });
-    };
-    this.dataTable.isClientSide = true;
-  }
-
-  deleteByIndex() {
-    this.dataTable.deleteRow(2);
-  }
-
-  deleteByPredicate(item) {
-    this.dataTable.deleteRow((x: any[]) => {
-      x = x.filter((c) => c != item);
-      return x;
-    });
-  }
-
-  deleteByObject(item) {
-    this.dataTable.deleteRow(item);
-  }
-
-  refreshTable() {
-    this.json = [
-      {
-        key: 4,
-        area: 'Area 4',
-        line: 'Line 4',
-        machine: 'Machine 4'
-      }
-    ];
-    this.dataTable.refresh();
-  }
-
-  json = [
-    {
-      key: 1,
-      area: 'Area 1',
-      line: 'Line 1',
-      machine: 'Machine 1',
-      route: 'something'
-    },
-    {
-      key: 2,
-      area: 'Area 2',
-      line: 'Line 2',
-      machine: 'Machine 2'
-    },
-    {
-      key: 3,
-      area: 'Area 2',
-      line: 'Line 3',
-      machine: 'Machine 3'
-    },
-    {
-      key: 4,
-      area: 'Area 4',
-      line: 'Line 4',
-      machine: 'Machine 4'
-    },
-    {
-      key: 5,
-      area: 'Area 5',
-      line: 'Line 5',
-      machine: 'Machine 5'
-    },
-    {
-      key: 6,
-      area: 'Area 6',
-      line: 'Line 6',
-      machine: 'Machine 6'
-    },
-    {
-      key: 7,
-      area: 'Area 7',
-      line: 'Line 7',
-      machine: 'Machine 7'
-    },
-    {
-      key: 8,
-      area: 'Area 8',
-      line: 'Line 8',
-      machine: 'Machine 8'
-    },
-    {
-      key: 9,
-      area: 'Area 9',
-      line: 'Line 9',
-      machine: 'Machine 9'
-    },
-    {
-      key: 18,
-      area: 'Area 18',
-      line: 'Line 18',
-      machine: 'Machine 18'
-    },
-    {
-      key: 19,
-      area: 'Area 19',
-      line: 'Line 19',
-      machine: 'Machine 19'
-    },
-    {
-      key: 28,
-      area: 'Area 28',
-      line: 'Line 28',
-      machine: 'Machine 28'
-    },
-    {
-      key: 29,
-      area: 'Area 29',
-      line: 'Line 29',
-      machine: 'Machine 29'
-    },
-    {
-      key: 28,
-      area: 'Area 28',
-      line: 'Line 28',
-      machine: 'Machine 28'
-    },
-    {
-      key: 29,
-      area: 'Area 29',
-      line: 'Line 29',
-      machine: 'Machine 29'
-    }
+export class AppComponent {
+
+  links = [
+    'home',
+    'currency-input',
+    'buttons',
+    'stepper',
+    'more-menu',
+    'date-picker',
+    'select',
+    'toc',
+    'text-editor',
+    'page-header',
+    'data-table'
   ];
 
-  getClass(row: any): string {
-    row.areaClass = this.areas.some((x) => x == row['area']) ? 'sa-valid' : 'sa-invalid';
-    return row.areaClass;
-  }
-
-  areas: string[] = ['Area 1'];
-
-  //ftag datatable
-  ftagDataTable: DataTable<any> = new DataTable();
-  @ViewChild('statusTemplate', { static: true }) statusTemplate: TemplateRef<any>;
-  @ViewChild('issueTemplate', { static: true }) issueTemplate: TemplateRef<any>;
-  @ViewChild('titleTemplate', { static: true }) titleTemplate: TemplateRef<any>;
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cef2c28..baa8391 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA, LOCALE_ID } from '@angular/core';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -12,9 +12,35 @@ import { MatIconModule } from '@angular/material/icon';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { HttpClientModule } from '@angular/common/http';
+import { HomeComponent } from './examples/home/home.component';
+import { CurrencyInputComponent } from './examples/currency-input/currency-input.component';
+import { ButtonsComponent } from './examples/buttons/buttons.component';
+import { DataFilterComponent } from './examples/data-filter/data-filter.component';
+import { SelectComponent } from './examples/select/select.component';
+import { StepperComponent } from './examples/stepper/stepper.component';
+import { DatePickerComponent } from './examples/date-picker/date-picker.component';
+import { MoreMenuComponent } from './examples/more-menu/more-menu.component';
+import { TableOfContentsComponent } from './examples/table-of-contents/table-of-contents.component';
+import { DataTableComponent } from './examples/data-table/data-table.component';
+import { PageHeaderComponent } from './examples/page-header/page-header.component';
+import { TextEditorComponent } from './examples/text-editor/text-editor.component';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [
+    AppComponent,
+    HomeComponent,
+    ButtonsComponent,
+    CurrencyInputComponent,
+    StepperComponent,
+    DataFilterComponent,
+    MoreMenuComponent,
+    DatePickerComponent,
+    SelectComponent,
+    TableOfContentsComponent,
+    TextEditorComponent,
+    PageHeaderComponent,
+    DataTableComponent,
+  ],
   imports: [
     BrowserModule,
     AppRoutingModule,
@@ -28,7 +54,7 @@ import { HttpClientModule } from '@angular/common/http';
     HttpClientModule,
     MatFormFieldModule,
     QuillModule,
-    SimplifiedUiModule
+    SimplifiedUiModule,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }],
diff --git a/src/app/examples/buttons/buttons.component.html b/src/app/examples/buttons/buttons.component.html
new file mode 100644
index 0000000..3ee29d3
--- /dev/null
+++ b/src/app/examples/buttons/buttons.component.html
@@ -0,0 +1,15 @@
+<div style='padding: 20px 20px'>
+  <div *ngFor='let saButtonConfig of saButtonConfigs'>
+   <div fxLayout='row wrap' fxLayoutAlign='start center' fxLayoutGap='20px' style='margin-bottom: 20px'>
+     <div fxFlex='30'>
+       <sa-button [config]='saButtonConfig' [isDisabled]='false' (onClick)='onButtonClick(saButtonConfig)'></sa-button>
+     </div>
+     <div fxFlex='20'>
+       <button mat-stroked-button style='font-size: 12px' (click)='toggleDisability(saButtonConfig)'>{{"Enable : " + saButtonConfig.isDisabled}}</button>
+     </div>
+     <div fxFlex='20'>
+       <button mat-stroked-button style='font-size: 12px' (click)='toggleLoading(saButtonConfig)'>{{"Loading : " + saButtonConfig.isSpinning}}</button>
+     </div>
+   </div>
+  </div>
+</div>
diff --git a/src/app/examples/buttons/buttons.component.scss b/src/app/examples/buttons/buttons.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/examples/buttons/buttons.component.spec.ts b/src/app/examples/buttons/buttons.component.spec.ts
new file mode 100644
index 0000000..4f0b4bd
--- /dev/null
+++ b/src/app/examples/buttons/buttons.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonsComponent } from './buttons.component';
+
+describe('ButtonsComponent', () => {
+  let component: ButtonsComponent;
+  let fixture: ComponentFixture<ButtonsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ButtonsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ButtonsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/examples/buttons/buttons.component.ts b/src/app/examples/buttons/buttons.component.ts
new file mode 100644
index 0000000..0b1efc2
--- /dev/null
+++ b/src/app/examples/buttons/buttons.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { SaButtonConfig, SaButtonType } from '../../../../projects/simplified-ui/src/lib/sa-button/sa-button.component';
+
+@Component({
+  selector: 'app-buttons',
+  templateUrl: './buttons.component.html',
+  styleUrls: ['./buttons.component.scss']
+})
+export class ButtonsComponent implements OnInit {
+
+  saButtonConfigs: SaButtonConfig[] = [
+    new SaButtonConfig('primary'),
+    new SaButtonConfig('secondary'),
+    new SaButtonConfig('anchor'),
+  ];
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.saButtonConfigs[0].type = SaButtonType.Primary;
+    this.saButtonConfigs[1].type = SaButtonType.Secondary;
+    this.saButtonConfigs[2].type = SaButtonType.Anchor;
+
+    this.saButtonConfigs[0].loadingText = 'Loading ...';
+    this.saButtonConfigs[0].loadingStopped.subscribe((val) => {
+      console.log("Lading Stopped : ",val);
+    })
+    /*this.saButtonConfig.isDisabled = false;
+    this.saButtonConfig.type = SaButtonType.Secondary;
+    this.saButtonConfig.isSpinning = false;
+    this.saButtonConfig.loadingText = "Loading ...";
+    this.saButtonConfig.loadingStopped.subscribe((val) => {
+      if(val) {
+        console.log("Loading stopped true");
+      }
+      else {
+        console.log("Loading stopped false");
+      }
+    }) */
+  }
+
+  onButtonClick(saButtonConfig: SaButtonConfig) {
+    saButtonConfig.isSpinning = !saButtonConfig.isSpinning;
+  }
+
+  toggleDisability(saButtonConfig: SaButtonConfig) {
+    saButtonConfig.isDisabled = !saButtonConfig.isDisabled;
+  }
+
+  toggleLoading(saButtonConfig: SaButtonConfig) {
+    saButtonConfig.isSpinning = !saButtonConfig.isSpinning;
+  }
+
+}
diff --git a/src/app/examples/currency-input/currency-input.component.html b/src/app/examples/currency-input/currency-input.component.html
new file mode 100644
index 0000000..8785506
--- /dev/null
+++ b/src/app/examples/currency-input/currency-input.component.html
@@ -0,0 +1,12 @@
+<div fxLayout='row wrap' fxLayoutAlign='start center' fxLayoutGap='10px'>
+  <mat-form-field>
+    <mat-label>Currency</mat-label>
+    <sa-currency-input placeholder='Enter you amount ...' [formControl]='formControl'></sa-currency-input>
+    <mat-error>Error</mat-error>
+  </mat-form-field>
+  <button mat-button (click)='toggleState()'>{{this.formControl.disabled ? "Enable" : "Disable"}}</button>
+  <button mat-button (click)='resetValue()'>Reset</button>
+</div>
+
+
+<!-- Dont use the value attribute to initialize, initialize through form control only. It's not optimized to parse into currency input. -->
diff --git a/src/app/examples/currency-input/currency-input.component.scss b/src/app/examples/currency-input/currency-input.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/examples/currency-input/currency-input.component.spec.ts b/src/app/examples/currency-input/currency-input.component.spec.ts
new file mode 100644
index 0000000..5e04aa6
--- /dev/null
+++ b/src/app/examples/currency-input/currency-input.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CurrencyInputComponent } from './currency-input.component';
+
+describe('CurrencyInputComponent', () => {
+  let component: CurrencyInputComponent;
+  let fixture: ComponentFixture<CurrencyInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CurrencyInputComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CurrencyInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/examples/currency-input/currency-input.component.ts b/src/app/examples/currency-input/currency-input.component.ts
new file mode 100644
index 0000000..03af903
--- /dev/null
+++ b/src/app/examples/currency-input/currency-input.component.ts
@@ -0,0 +1,47 @@
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { SaCurrencyInputComponent } from '../../../../projects/simplified-ui/src/lib/sa-currency-input/sa-currency-input.component';
+
+@Component({
+  selector: 'app-currency-input',
+  templateUrl: './currency-input.component.html',
+  styleUrls: ['./currency-input.component.scss']
+})
+export class CurrencyInputComponent implements OnInit, AfterViewInit {
+
+  formControl: FormControl = new FormControl({value: '234',disabled: true},[Validators.required]);
+
+  @ViewChild(SaCurrencyInputComponent) saCurrencyInputComponent: SaCurrencyInputComponent;
+
+  constructor() { }
+
+  ngAfterViewInit(): void {
+      console.log("Currency Value : ",this.saCurrencyInputComponent.currencyValue);
+      console.log("Control Type : ",this.saCurrencyInputComponent.controlType);
+  }
+
+  ngOnInit(): void {  }
+
+  toggleState() {
+    this.formControl.disabled ? this.formControl.enable() : this.formControl.disable();
+  }
+
+  resetValue() {
+    this.formControl.setValue('');
+  }
+
+}
+
+
+
+/*
+
+Bugs :
+
+- Setting initial value through html 'value' is not optimized to parse it to currency.
+- Reseting value to empty dynamically is not handled well (Try the reset button)
+
+
+Note :
+- required, disabled, value can also be set through html attributes too just like normal textfield.
+*/
diff --git a/src/app/examples/data-filter/data-filter.component.html b/src/app/examples/data-filter/data-filter.component.html
new file mode 100644
index 0000000..4bc9e13
--- /dev/null
+++ b/src/app/examples/data-filter/data-filter.component.html
@@ -0,0 +1,2 @@
+<sa-data-filter [filters]='filterModel' (filterChange)='onFilterChange($event)'></sa-data-filter>
+
diff --git a/src/app/examples/data-filter/data-filter.component.scss b/src/app/examples/data-filter/data-filter.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/examples/data-filter/data-filter.component.spec.ts b/src/app/examples/data-filter/data-filter.component.spec.ts
new file mode 100644
index 0000000..4441123
--- /dev/null
+++ b/src/app/examples/data-filter/data-filter.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataFilterComponent } from './data-filter.component';
+
+describe('DataFilterComponent', () => {
+  let component: DataFilterComponent;
+  let fixture: ComponentFixture<DataFilterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DataFilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/examples/data-filter/data-filter.component.ts b/src/app/examples/data-filter/data-filter.component.ts
new file mode 100644
index 0000000..64ad233
--- /dev/null
+++ b/src/app/examples/data-filter/data-filter.component.ts
@@ -0,0 +1,56 @@
+/*
+Add default parameter values for models and constructors
+ */
+
+
+import { Component } from '@angular/core';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import {
+  FilterTypeEnum,
+  IDataFilterViewModel
+} from '../../../../projects/simplified-ui/src/lib/models/DataFilterModels';
+import { DatePickerConfig } from '../../../../projects/simplified-ui/src/lib/models/DatePickerConfigModel';
+import { SaSelectConfig } from '../../../../projects/simplified-ui/src/lib/models/SaSelectModels';
+
+@Component({
+  selector: 'app-data-filter',
+  templateUrl: './data-filter.component.html',
+  styleUrls: ['./data-filter.component.scss'],
+  providers: [{provide: MatFormFieldControl,useExisting: DataFilterComponent}],
+})
+export class DataFilterComponent {
+
+  filterModel: IDataFilterViewModel[] = [
+    {
+      filterType: FilterTypeEnum.date,
+      config: new DatePickerConfig(),
+      key: 'date',
+      title: 'Date filter'
+    },
+    {
+      filterType: FilterTypeEnum.select,
+      config: new SaSelectConfig(),
+      key: 'select',
+      title: 'Select filter'
+    },
+    {
+      filterType: FilterTypeEnum.text,
+      key: 'text',
+      config: 'config',
+      title: 'Title filter'
+    },
+    {                                            /// Not sure how to implement this one
+      filterType: FilterTypeEnum.number,
+      key: 'number',
+      config: 'config 1',
+      title: 'Number Filter'
+    },
+  ];
+
+  constructor() {}
+
+  onFilterChange(event) {
+    console.log("Filter Change : ",event);
+  }
+
+}
diff --git a/src/app/examples/data-table/data-table.component.html b/src/app/examples/data-table/data-table.component.html
new file mode 100644
index 0000000..265b232
--- /dev/null
+++ b/src/app/examples/data-table/data-table.component.html
@@ -0,0 +1,6 @@
+<sa-data-table [dataTable]="dataTable">
+  <ng-template #listItemTemplate let-row="row">
+    <mat-list-item>Area: {{ row.area }} Line: {{ row.line }} Machine: {{ row.machine }}</mat-list-item>
+    <mat-divider></mat-divider>
+  </ng-template>
+</sa-data-table>
diff --git a/src/app/examples/data-table/data-table.component.scss b/src/app/examples/data-table/data-table.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/examples/data-table/data-table.component.spec.ts b/src/app/examples/data-table/data-table.component.spec.ts
new file mode 100644
index 0000000..1e6e66f
--- /dev/null
+++ b/src/app/examples/data-table/data-table.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataTableComponent } from './data-table.component';
+
+describe('DataTableComponent', () => {
+  let component: DataTableComponent;
+  let fixture: ComponentFixture<DataTableComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DataTableComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/examples/data-table/data-table.component.ts b/src/app/examples/data-table/data-table.component.ts
new file mode 100644
index 0000000..a5353d2
--- /dev/null
+++ b/src/app/examples/data-table/data-table.component.ts
@@ -0,0 +1,104 @@
+import { Component, OnInit } from '@angular/core';
+import { DataTable, DataTableColumnTypeEnum } from '../../../../projects/simplified-ui/src/lib/models/DataTableModel';
+import { FilterTypeEnum } from '../../../../projects/simplified-ui/src/lib/models/DataFilterModels';
+import { DatePickerConfig } from '../../../../projects/simplified-ui/src/lib/models/DatePickerConfigModel';
+import { SaSelectConfig } from '../../../../projects/simplified-ui/src/lib/models/SaSelectModels';
+import { SaButtonConfig } from '../../../../projects/simplified-ui/src/lib/sa-button/sa-button.component';
+
+@Component({
+  selector: 'app-data-table',
+  templateUrl: './data-table.component.html',
+  styleUrls: ['./data-table.component.scss']
+})
+export class DataTableComponent implements OnInit {
+
+  dataTable: DataTable<any> = new DataTable();
+
+  filters = [
+    {
+      filterType: FilterTypeEnum.date,
+      config: new DatePickerConfig(),
+      key: 'date',
+      title: 'Date filter'
+    },
+    {
+      filterType: FilterTypeEnum.select,
+      config: new SaSelectConfig(),
+      key: 'select',
+      title: 'Select filter'
+    },
+    {
+      filterType: FilterTypeEnum.text,
+      key: 'text',
+      config: 'config',
+      title: 'Text filter'
+    }
+
+  ];
+
+
+  columns = [
+    {key: '0',title: 'Column 1',type: DataTableColumnTypeEnum.text,filter: {
+        filterType: FilterTypeEnum.number,
+        config: new DatePickerConfig(),
+        key: 'filter 1',
+        title: 'Column 1 filter'
+    }},
+    {key: '1',title: 'Column 2',type: DataTableColumnTypeEnum.text,filter: {
+        filterType: FilterTypeEnum.text,
+        config: new DatePickerConfig(),
+        key: 'filter 2',
+        title: 'Column 2 filter'
+    }},
+    {key: '2',title: 'Column 3',type: DataTableColumnTypeEnum.text,filter: {
+        filterType: FilterTypeEnum.date,
+        config: new DatePickerConfig(),
+        key: 'filter 3',
+        title: 'Column 3 filter'
+    }},
+    {key: '3',title: 'Column 4',type: DataTableColumnTypeEnum.text,filter: {
+        filterType: FilterTypeEnum.select,
+        config: new DatePickerConfig(),
+        key: 'filter 4',
+        title: 'Column 4 filter'
+    }}
+  ];
+
+  rows = [
+    {0: 1,1: 'text - 1',2: new Date(2001,2,12),3: 'select - 1'},
+    {0: 2,1: 'text - 2',2: new Date(2001,2,12),3: 'select - 2'},
+    {0: 3,1: 'text - 3',2: new Date(2001,2,12),3: 'select - 3'},
+  ];
+
+  constructor() {
+    this.dataTable.showFilters = true;
+    this.dataTable.isClientSide = true;
+    //this.dataTable.showPaginator = false;
+
+    this.dataTable.mainActionMenu = [new SaButtonConfig('menu-1'),new SaButtonConfig('menu-2')];
+
+    for(let i =0;i< this.filters.length;i++) {
+      this.dataTable.addFilter(this.filters[i]);
+    }
+
+    for(let i=0;i<this.columns.length;i++) {
+      this.dataTable.addColumn(this.columns[i],i+1);
+    }
+
+    for(let i=0;i<this.rows.length;i++) {
+      this.dataTable.addRow(this.rows[i]);
+    }
+
+    this.dataTable.onFilterAdded().subscribe((val)=>{
+      console.log("Filter added : ",val);
+    })
+
+    this.dataTable.onFilterApplied().subscribe((val) => {
+      console.log("Filter applied : ",val);
+    })
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/examples/date-picker/date-picker.component.html b/src/app/examples/date-picker/date-picker.component.html
new file mode 100644
index 0000000..bf5282f
--- /dev/null
+++ b/src/app/examples/date-picker/date-picker.component.html
@@ -0,0 +1,8 @@
+<div style='padding: 20px'>
+  <mat-form-field>
+    <mat-label>Date Picker</mat-label>
+    <sa-date-picker [dateConfig]='dateConfig' [formControl]='formControl' (onSelection)='onDateSelection($event)' ></sa-date-picker>
+  </mat-form-field>
+  <button mat-button (click)='toggleState()'>{{this.formControl.disabled ? "Enable" : "Disable"}}</button>
+  <button mat-button (click)='resetValue()'>Reset</button>
+</div>
diff --git a/src/app/examples/date-picker/date-picker.component.scss b/src/app/examples/date-picker/date-picker.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/examples/date-picker/date-picker.component.spec.ts b/src/app/examples/date-picker/date-picker.component.spec.ts
new file mode 100644
index 0000000..08d1d3b
--- /dev/null
+++ b/src/app/examples/date-picker/date-picker.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DatePickerComponent } from './date-picker.component';
+
+describe('DatePickerComponent', () => {
+  let component: DatePickerComponent;
+  let fixture: ComponentFixture<DatePickerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DatePickerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatePickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/examples/date-picker/date-picker.component.ts b/src/app/examples/date-picker/date-picker.component.ts
new file mode 100644
index 0000000..fa874f2
--- /dev/null
+++ b/src/app/examples/date-picker/date-picker.component.ts
@@ -0,0 +1,53 @@
+/*
+Bugs :
+- Label not floating when value if filled and is unfocused. Or gets unfocused during date selection and overlaps the pre-selected date.
+
+ */
+
+
+import { Component, OnInit } from '@angular/core';
+import {
+  DatePickerConfig,
+  DatePickerMode,
+  DatePickerType
+} from '../../../../projects/simplified-ui/src/lib/models/DatePickerConfigModel';
+import { FormControl, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-date-picker',
+  templateUrl: './date-picker.component.html',
+  styleUrls: ['./date-picker.component.scss']
+})
+export class DatePickerComponent implements OnInit {
+
+  formControl: FormControl = new FormControl({value: '',disabled: true},[Validators.required]);
+
+  dateConfig: DatePickerConfig;
+
+  constructor() {
+    this.dateConfig = new DatePickerConfig();
+  }
+
+  ngOnInit(): void {
+    this.dateConfig.min = new Date(2021, 5,10);
+    this.dateConfig.max = new Date(2021,12,24);
+    this.dateConfig.pickerMode = DatePickerMode.dialog; // DatePickerMode.popup
+    this.dateConfig.pickerType = DatePickerType.timer;  // DatePickerType.calender | DatePickerType.both
+    this.formControl.valueChanges.subscribe((val) => {
+      console.log("Form value changed : ",val);
+    })
+  }
+
+  onDateSelection(event) {
+    console.log("New selected date : ",event);
+  }
+
+  toggleState() {
+    this.formControl.disabled ? this.formControl.enable() : this.formControl.disable();
+  }
+
+  resetValue() {
+    this.formControl.setValue('');
+  }
+
+}
diff --git a/src/app/examples/home/home.component.html b/src/app/examples/home/home.component.html
new file mode 100644
index 0000000..233b312
--- /dev/null
+++ b/src/app/examples/home/home.component.html
@@ -0,0 +1,187 @@
+<sa-base-page>
+  <div class="page-header">
+    <sa-header
+      [header]="headerConfig"
+      (primaryClick)="onPrimaryClick($event)"
+      (secondaryClick)="onSecondaryClick($event)"
+    ></sa-header>
+  </div>
+</sa-base-page>
+<ng-template #myTemplate let-item>
+  <button mat-icon-button [matMenuTriggerFor]="menu">
+    <mat-icon>more_vert</mat-icon>
+  </button>
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item (click)="deleteByIndex()">Delete By Index</button>
+    <button mat-menu-item (click)="deleteByPredicate(item)">Delete By Predicate</button>
+    <button mat-menu-item (click)="deleteByObject(item)">Delete By Object Matching</button>
+  </mat-menu>
+</ng-template>
+<h3 style="float: right"> Navigation Menu Component </h3>
+<sa-navigable-page [secondaryMenu]="secondaryNavMenu">
+  <h3> Header Component </h3>
+  <sa-base-page>
+    <div class="page-header">
+      <sa-header
+        [header]="headerConfig"
+        (primaryClick)="onPrimaryClick($event)"
+        (secondaryClick)="onSecondaryClick($event)"
+      ></sa-header>
+    </div>
+  </sa-base-page>
+
+  <h3> Short Number Pipe </h3>
+  <ul>
+    <li>10 => {{ 10 | abbreviateNumber: true }}</li>
+    <li>143 => {{ 143 | abbreviateNumber: true }}</li>
+    <li>-14.34 => {{ -14.34 | abbreviateNumber: true }}</li>
+    <li>-$1,000000.00 => {{ '-$1,000000.00' | abbreviateNumber: true }}</li>
+    <li>-$100000000000 => {{ '$-100000000000' | abbreviateNumber: true }}</li>
+    <li>100065783884000 => {{ '100065783884000$' | abbreviateNumber: true }}</li>
+    <li>fffff => {{ 'fffff' | abbreviateNumber }}</li>
+  </ul>
+
+  <p>{{ date | dateTime: dateFormats.timeZoneAbb }}</p>
+  <p>{{ date1 | dateTime: dateFormats.timeZoneAbb }}</p>
+  <p>{{ date2 | dateTime: dateFormats.timeZoneAbb }}</p>
+
+  <h3> Button Component </h3>
+  <sa-button [config]="saveButtonConfig" (onClick)="onClick()"></sa-button>
+
+  <br />
+  <h3> Currency Inpput Component </h3>
+  <mat-form-field>
+    <mat-label>Currency</mat-label>
+    <sa-currency-input></sa-currency-input>
+  </mat-form-field>
+
+  <h3> Filter Component </h3>
+  <sa-data-filter [filters]="dataFilterConfigArray"></sa-data-filter>
+
+  <h3> Date Time Component </h3>
+  <mat-form-field>
+    <mat-label>Enter Date</mat-label>
+    <sa-date-picker
+      [dateConfig]="dateConfig"
+      [formControl]="data"
+      (onSelection)="dateSelectionChange($event)"
+    ></sa-date-picker>
+  </mat-form-field>
+
+  <h3> More Menu Component </h3>
+  <sa-more-menu [items]="menuItems"></sa-more-menu>
+
+  <h3> Select Component </h3>
+  <mat-form-field>
+    <mat-label>Select</mat-label>
+    <sa-select [config]="selectOptions" [formControl]="select"></sa-select>
+  </mat-form-field>
+
+  <h3> Stepper Component </h3>
+  <sa-stepper [value]="2" label="Stepper"></sa-stepper>
+
+  <h3> Text Editor Component </h3>
+  <form [formGroup]="editorForm">
+    <mat-form-field style="width: 100%">
+      <mat-label>Text Editor</mat-label>
+      <sa-text-editor [required]="true" formControlName="description" name="Description"></sa-text-editor>
+    </mat-form-field>
+  </form>
+
+  <h3> Data Table Component </h3>
+  <sa-button [config]="saveButtonConfig" (onClick)="updateTable()"></sa-button>
+  <button mat-raised-button (click)="refreshTable()">Refresh Table</button>
+
+  <ng-template #selectOptionBody let-item>{{ item }}</ng-template>
+
+  <ng-template #myTemplate let-item>
+    <button mat-icon-button [matMenuTriggerFor]="menu">
+      <mat-icon>more_vert</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item (click)="deleteByIndex()">Delete By Index</button>
+      <button mat-menu-item (click)="deleteByPredicate(item)">Delete By Predicate</button>
+      <button mat-menu-item (click)="deleteByObject(item)">Delete By Object Matching</button>
+    </mat-menu>
+  </ng-template>
+
+  <ng-template #colTemplate let-column="column" let-row="row">
+    <div matTooltip="my tooltip "> Something very long that </div>
+  </ng-template>
+  <h3 id="reactiveForms">Reactive Forms and patch value</h3>
+
+  <button type="button" (click)="hide = !!!hide"> hide / show </button>
+
+  <button type="button" (click)="quillform.enabled ? quillform.disable() : quillform.enable()">
+    disable / enable
+  </button>
+
+  <button type="button" (click)="backgroundColor = backgroundColor ? '' : 'grey'">toggle backgroundColor </button>
+
+  <pre>{{ quillform.get('editor').value }}</pre>
+  <button type="button" (click)="patchValue()">patchValue</button>
+  <button type="button" (click)="setControl()">setControl</button>
+  <button (click)="toggleReadOnly()">Toggle ReadOnly</button>
+  <button (click)="toggleRequired()">Toggle Required</button>
+  <p>Readonly: {{ isReadOnly }} Required: {{ isRequired }}</p>
+
+  <form [formGroup]="quillform">
+    FormControl valid: {{ quillform.get('editor').valid }}<br />
+    <quill-editor
+      #editor
+      [style.display]="hide ? 'none' : 'block'"
+      [styles]="{ backgroundColor: backgroundColor }"
+      formControlName="editor"
+      [maxLength]="10"
+      [trimOnValidation]="isRequired"
+      [required]="isRequired"
+    >
+    </quill-editor>
+
+    <h4>Material Quill</h4>
+
+    <pre>{{ quillform.get('matEditor').value }}</pre>
+    FormControl valid: {{ quillform.get('matEditor').valid }}<br />
+    <mat-form-field appearance="fill" style="display: block !important">
+      <sa-text-editor
+        #matEditor
+        [style.display]="hide ? 'none' : 'block'"
+        formControlName="matEditor"
+        [maxLength]="10"
+        [required]="isRequired"
+        [readOnly]="isReadOnly"
+        [trimOnValidation]="isRequired"
+        (onContentChanged)="logChange($event)"
+        (onSelectionChanged)="logSelection($event)"
+      >
+      </sa-text-editor>
+    </mat-form-field>
+  </form>
+</sa-navigable-page>
+
+<sa-data-table [dataTable]="dataTable">
+  <ng-template #listItemTemplate let-row="row">
+    <mat-list-item>Area: {{ row.area }} Line: {{ row.line }} Machine: {{ row.machine }}</mat-list-item>
+    <mat-divider></mat-divider>
+  </ng-template>
+</sa-data-table>
+
+<ng-template #titleTemplate let-column="column" let-row="row">
+  <td class="text-truncate" matTooltip="{{ row['title'] }}">
+    {{ row['title'] }}
+  </td>
+</ng-template>
+
+<ng-template #issueTemplate let-column="column" let-row="row">
+  <td class="text-truncate" matTooltip="{{ row['issue'] }}">
+    {{ row['issue'] }}
+  </td>
+</ng-template>
+
+<ng-template #statusTemplate let-column="column" let-row="row">
+  <div *ngIf="row['status']">
+    <span [ngStyle]="{ width: 'max-content' }">
+      {{ row['status'] }}
+    </span>
+  </div>
+</ng-template>
diff --git a/src/app/examples/home/home.component.scss b/src/app/examples/home/home.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/examples/home/home.component.spec.ts b/src/app/examples/home/home.component.spec.ts
new file mode 100644
index 0000000..490e81b
--- /dev/null
+++ b/src/app/examples/home/home.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/examples/home/home.component.ts b/src/app/examples/home/home.component.ts
new file mode 100644
index 0000000..1a81f54
--- /dev/null
+++ b/src/app/examples/home/home.component.ts
@@ -0,0 +1,625 @@
+import { Component, OnInit, ViewChild, TemplateRef, ViewEncapsulation } from '@angular/core';
+import {
+  SaButtonConfig,
+  SaButtonType,
+  IDataFilterViewModel,
+  FilterTypeEnum,
+  SaSelectConfig,
+  DatePickerConfig,
+  IHeaderViewModel,
+  SaMoreMenuItem,
+  NavigationItem,
+  DataTable,
+  IDataTableColumn,
+  DataTableColumnTypeEnum,
+  IRequestModel,
+  IGenericPageListViewModel,
+  DateFormats,
+  DatePickerType,
+  DatePickerMode,
+  DatePickerSelectMode,
+  SaTextEditorComponent
+} from 'projects/simplified-ui/src/public-api';
+import { FormControl, FormBuilder, Validators, FormGroup } from '@angular/forms';
+import { of } from 'rxjs';
+import * as moment_ from 'moment-timezone';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { QuillEditorComponent, ContentChange, SelectionChange } from 'ngx-quill';
+const moment = moment_;
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class HomeComponent implements OnInit {
+  @ViewChild('selectOptionBody', { static: true }) selectOptionBody;
+  @ViewChild('myTemplate', { static: true }) dataTableOptionsRef: TemplateRef<any>;
+  @ViewChild('colTemplate', { static: true }) colTemplate: TemplateRef<any>;
+
+  dateFormats = DateFormats;
+
+  date = moment.tz(moment(), moment.tz.guess()); //current timezone
+  date1 = moment.tz(moment(), 'America/Toronto'); //string timezone
+  date2 = moment.tz(); //UTC timezone
+
+  content = 'abc';
+
+  items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
+
+  isLoading: boolean = true;
+
+  isSpin: boolean = true;
+
+  saveButtonConfig = new SaButtonConfig('Toggle Spinner');
+
+  dataFilterConfig: IDataFilterViewModel;
+
+  dataFilterConfigArray: IDataFilterViewModel[] = [];
+
+  selectOptions = new SaSelectConfig<string>();
+
+  dateConfig = new DatePickerConfig();
+
+  data = new FormControl();
+
+  primarButton = new SaButtonConfig('primary');
+  secondaryButton = new SaButtonConfig('secondary');
+
+  headerConfig: IHeaderViewModel = {
+    title: 'Header',
+    primaryButton: this.primarButton,
+    secondaryButton: this.secondaryButton,
+    moreMenu: null,
+    tooltip: 'Hello THere!'
+  };
+
+  currencyForm = this.fb.group({
+    currency: new FormControl()
+  });
+
+  menuItems: SaMoreMenuItem[] = [new SaMoreMenuItem('Item 1'), new SaMoreMenuItem('Item 2')];
+
+  primaryMenu: NavigationItem[] = [
+    new NavigationItem('Basic Information', 'basicInformation'),
+    new NavigationItem('5G', '5g'),
+    new NavigationItem('MOC', 'moc'),
+    new NavigationItem('Tools', 'tools'),
+    new NavigationItem('Team', 'team'),
+    new NavigationItem('5W1H', '5w1h'),
+    new NavigationItem('Results', 'results')
+  ];
+
+  quickPrimaryMenu: NavigationItem[] = [
+    new NavigationItem('Basic Information', 'basicInformation'),
+    new NavigationItem('5G', '5g'),
+    new NavigationItem('MOC', 'moc'),
+    new NavigationItem('Tools', 'tools'),
+    new NavigationItem('Team', 'team'),
+    new NavigationItem('5W1H', '5w1h'),
+    new NavigationItem('Results', 'results')
+  ];
+
+  standardPrimaryMenu: NavigationItem[] = [
+    new NavigationItem('Basic Information', 'basicInformation'),
+    new NavigationItem('Kaizen Information', 'kaizenInformation'),
+    new NavigationItem('5G', '5g'),
+    new NavigationItem('MOC', 'moc'),
+    new NavigationItem('Tools', 'tools'),
+    new NavigationItem('Team', 'team'),
+    new NavigationItem('Targets', 'targets'),
+    new NavigationItem('5W1H', '5w1h'),
+    new NavigationItem('4M1D', '4m1d'),
+    new NavigationItem('5WHY', '5why'),
+    new NavigationItem('Results', 'results')
+  ];
+
+  secondaryNavMenu: NavigationItem[] = [new NavigationItem('Nav 1', null), new NavigationItem('Nav 2', null)];
+
+  //example new quil
+  hide = false;
+  quillform: FormGroup;
+  backgroundColor = '';
+  @ViewChild('editor', {
+    static: true
+  })
+  editor: QuillEditorComponent;
+  @ViewChild('matEditor', {
+    static: true
+  })
+  matEditor: SaTextEditorComponent;
+  isReadOnly = false;
+  isRequired = false;
+
+  setControl() {
+    this.quillform.setControl('editor', new FormControl('test - new Control'));
+    this.quillform.setControl('matEditor', new FormControl('test - new Control'));
+  }
+
+  patchValue() {
+    this.quillform.get('editor').patchValue(`${this.quillform.get('editor').value} patched!`);
+    this.quillform.get('matEditor').patchValue(`${this.quillform.get('matEditor').value} patched!`);
+  }
+
+  logChange($event: ContentChange) {
+    // tslint:disable-next-line:no-console
+  }
+
+  logSelection($event: SelectionChange) {
+    // tslint:disable-next-line:no-console
+  }
+
+  toggleReadOnly() {
+    this.isReadOnly = !this.isReadOnly;
+  }
+
+  toggleRequired() {
+    this.isRequired = !this.isRequired;
+  }
+
+  //end
+  editorForm = this.fb.group({
+    description: new FormControl(null, Validators.required)
+  });
+  description = new FormControl(null, Validators.required);
+
+  dataTable: DataTable<any> = new DataTable();
+
+  select = new FormControl();
+
+  constructor(private fb: FormBuilder, private client: HttpClient) {
+    this.quillform = fb.group({
+      editor: ['<ol><li>test</li><li>123</li></ol>'],
+      matEditor: ['<ol><li>test</li><li>123</li></ol>']
+    });
+  }
+
+  ngOnInit() {
+    this.quillform.controls.editor.valueChanges.pipe(debounceTime(400), distinctUntilChanged()).subscribe((data) => {
+      // tslint:disable-next-line:no-console
+      console.log('native fromControl value changes with debounce', data);
+    });
+
+    this.editor.onContentChanged.pipe(debounceTime(400), distinctUntilChanged()).subscribe((data: ContentChange) => {
+      // tslint:disable-next-line:no-console
+      console.log('view child + directly subscription', data);
+    });
+
+    this.matEditor.onContentChanged.pipe(debounceTime(400), distinctUntilChanged()).subscribe((data: ContentChange) => {
+      // tslint:disable-next-line:no-console
+      console.log('view child + directly subscription', data);
+    });
+
+    this.selectOptions.templateRef = this.selectOptionBody;
+    this.selectOptions.getResults = (page, term) => {
+      return this.client.get(`https://localhost:44386/api/v2/team/teams?term=${term}&pageNumber=${page}`).pipe(
+        map((x) => {
+          let genericList = <IGenericPageListViewModel<any>>x;
+          genericList.List = genericList.List.map((y) => y.name);
+          return genericList;
+        })
+      );
+    };
+
+    this.primarButton.type = SaButtonType.Secondary;
+
+    this.dataFilterConfig = {
+      filterType: FilterTypeEnum.date,
+      config: new DatePickerConfig(),
+      key: 'createdDate',
+      title: 'Created Date'
+    };
+
+    this.dataFilterConfigArray.push(this.dataFilterConfig);
+
+    this.saveButtonConfig.isSpinning = false;
+    this.saveButtonConfig.loadingText = 'Saving';
+    this.saveButtonConfig.type = SaButtonType.Anchor;
+
+    this.currencyForm.controls.currency.setValue('100');
+    this.setupDataTable();
+
+    this.dateConfig.pickerType = DatePickerType.calendar;
+    this.dateConfig.selectMode = DatePickerSelectMode.range;
+
+    // this.data.valueChanges.subscribe(x => console.log("value changes", x));
+  }
+  dateSelectionChange(a) {
+    console.log('selection change', a);
+  }
+  onClick() {}
+
+  onPrimaryClick(event) {
+    this.primarButton.isSpinning = true;
+    this.editorForm.disable();
+  }
+
+  onSecondaryClick(event) {
+    this.primarButton.isSpinning = false;
+  }
+
+  updateTable() {
+    this.dataTable.addRow({
+      key: this.json.length + 1,
+      area: 'column 1',
+      line: 'column 2',
+      machine: 'column 3'
+    });
+  }
+
+  private setupDataTable() {
+    this.dataTable.defaultPageSize = 1;
+    this.dataTable.optionsColumnRef = this.dataTableOptionsRef;
+    // this.dataTable.showFilters = false;
+    this.dataTable.disableSorting = true;
+    this.dataTable.showColumnToggle = true;
+    this.dataTable.routerLinkEnabled = true;
+    this.dataTable.showCheckboxColumn = true;
+    this.dataTable.addFilter(this.dataFilterConfig);
+
+    this.dataTable.addColumn({
+      key: 'name',
+      title: 'Tool Name',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      }
+      // template: this.colTemplate,
+      // sticky: true
+    });
+
+    this.dataTable.addColumn({
+      key: 'area1',
+      title: 'Area that is too big to fit in a row',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      },
+      template: this.colTemplate
+    });
+
+    this.dataTable.addColumn({
+      key: 'area188',
+      title: 'Area that is too big to fit in a row',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      },
+      template: this.colTemplate
+    });
+
+    this.dataTable.addColumn({
+      key: 'area121112',
+      title: 'Area that is too big to fit in a row',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      },
+      template: this.colTemplate
+    });
+
+    this.dataTable.addColumn({
+      key: 'area12111',
+      title: 'Area that is too big to fit in a row',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      },
+      template: this.colTemplate
+    });
+
+    this.dataTable.addColumn({
+      key: 'area199',
+      title: 'Area that is too big to fit in a row',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      },
+      template: this.colTemplate
+    });
+
+    this.dataTable.addColumn({
+      key: 'area2',
+      title: 'Area',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      },
+      template: this.colTemplate
+    });
+
+    this.dataTable.addColumn({
+      key: 'area3',
+      title: 'Area that is too big to fit in a row',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      },
+      template: this.colTemplate
+    });
+
+    this.dataTable.addColumn({
+      key: 'area4',
+      title: 'Area',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      },
+      template: this.colTemplate
+    });
+
+    this.dataTable.addColumn({
+      key: 'area5',
+      title: 'Area',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      },
+      template: this.colTemplate
+    });
+
+    this.dataTable.addColumn({
+      key: 'area6',
+      title: 'Area',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      },
+      template: this.colTemplate
+    });
+
+    this.dataTable.addColumn({
+      key: 'area7',
+      title: 'Area',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      },
+      template: this.colTemplate
+    });
+
+    this.dataTable.addColumn({
+      key: 'area8',
+      title: 'Area',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      },
+      template: this.colTemplate
+    });
+
+    this.dataTable.addColumn({
+      key: 'area9',
+      title: 'Area',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.text,
+        key: 'column1'
+      },
+      template: this.colTemplate
+    });
+
+    let datepickerConfig = new DatePickerConfig();
+
+    this.dataTable.addColumn({
+      key: 'line',
+      title: 'Line',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        title: 'Line',
+        config: datepickerConfig,
+        filterType: FilterTypeEnum.date,
+        key: 'column2',
+        defaults: [
+          // [new Date(), new Date().setMonth(10)],
+          // [new Date(), new Date(new Date().setMonth(10))],
+          // [new Date(), new Date().setMonth(10)],
+        ]
+      }
+    });
+
+    this.dataTable.addColumn({
+      key: 'machine',
+      title: 'Machine',
+      type: DataTableColumnTypeEnum.text,
+      filter: {
+        config: null,
+        filterType: FilterTypeEnum.none,
+        key: 'column3'
+      }
+    });
+
+    this.dataTable.selectedRowPredicate = (row, selected) => {
+      if (selected && selected.id == row.id) {
+        console.log('row matched', row);
+      }
+      if (row.id == 1) {
+        console.log('row matched static', row);
+      }
+
+      return (selected && selected.id == row.id) || row.id == 1;
+    };
+    this.dataTable.showPaginator = true;
+    this.dataTable.getResults = (requestModel) => {
+      let res = this.json.filter((x) => x.area.includes(requestModel.filter.keyword));
+
+      return of({
+        Capacity: 100,
+        Count: 1,
+        List: res,
+        Pager: {
+          CurrentPage: 1,
+          PagenumberToDisplay: [1],
+          PageSize: 5,
+          Pages: 1,
+          TotalRecords: 100,
+          UrlFormat: ''
+        }
+      });
+    };
+    this.dataTable.isClientSide = true;
+  }
+
+  deleteByIndex() {
+    this.dataTable.deleteRow(2);
+  }
+
+  deleteByPredicate(item) {
+    this.dataTable.deleteRow((x: any[]) => {
+      x = x.filter((c) => c != item);
+      return x;
+    });
+  }
+
+  deleteByObject(item) {
+    this.dataTable.deleteRow(item);
+  }
+
+  refreshTable() {
+    this.json = [
+      {
+        key: 4,
+        area: 'Area 4',
+        line: 'Line 4',
+        machine: 'Machine 4'
+      }
+    ];
+    this.dataTable.refresh();
+  }
+
+  json = [
+    {
+      key: 1,
+      area: 'Area 1',
+      line: 'Line 1',
+      machine: 'Machine 1',
+      route: 'something'
+    },
+    {
+      key: 2,
+      area: 'Area 2',
+      line: 'Line 2',
+      machine: 'Machine 2'
+    },
+    {
+      key: 3,
+      area: 'Area 2',
+      line: 'Line 3',
+      machine: 'Machine 3'
+    },
+    {
+      key: 4,
+      area: 'Area 4',
+      line: 'Line 4',
+      machine: 'Machine 4'
+    },
+    {
+      key: 5,
+      area: 'Area 5',
+      line: 'Line 5',
+      machine: 'Machine 5'
+    },
+    {
+      key: 6,
+      area: 'Area 6',
+      line: 'Line 6',
+      machine: 'Machine 6'
+    },
+    {
+      key: 7,
+      area: 'Area 7',
+      line: 'Line 7',
+      machine: 'Machine 7'
+    },
+    {
+      key: 8,
+      area: 'Area 8',
+      line: 'Line 8',
+      machine: 'Machine 8'
+    },
+    {
+      key: 9,
+      area: 'Area 9',
+      line: 'Line 9',
+      machine: 'Machine 9'
+    },
+    {
+      key: 18,
+      area: 'Area 18',
+      line: 'Line 18',
+      machine: 'Machine 18'
+    },
+    {
+      key: 19,
+      area: 'Area 19',
+      line: 'Line 19',
+      machine: 'Machine 19'
+    },
+    {
+      key: 28,
+      area: 'Area 28',
+      line: 'Line 28',
+      machine: 'Machine 28'
+    },
+    {
+      key: 29,
+      area: 'Area 29',
+      line: 'Line 29',
+      machine: 'Machine 29'
+    },
+    {
+      key: 28,
+      area: 'Area 28',
+      line: 'Line 28',
+      machine: 'Machine 28'
+    },
+    {
+      key: 29,
+      area: 'Area 29',
+      line: 'Line 29',
+      machine: 'Machine 29'
+    }
+  ];
+
+  getClass(row: any): string {
+    row.areaClass = this.areas.some((x) => x == row['area']) ? 'sa-valid' : 'sa-invalid';
+    return row.areaClass;
+  }
+
+  areas: string[] = ['Area 1'];
+
+  //ftag datatable
+  ftagDataTable: DataTable<any> = new DataTable();
+  @ViewChild('statusTemplate', { static: true }) statusTemplate: TemplateRef<any>;
+  @ViewChild('issueTemplate', { static: true }) issueTemplate: TemplateRef<any>;
+  @ViewChild('titleTemplate', { static: true }) titleTemplate: TemplateRef<any>;
+}
diff --git a/src/app/examples/more-menu/more-menu.component.html b/src/app/examples/more-menu/more-menu.component.html
new file mode 100644
index 0000000..8b71809
--- /dev/null
+++ b/src/app/examples/more-menu/more-menu.component.html
@@ -0,0 +1 @@
+<sa-more-menu [items]='itemList'></sa-more-menu>
diff --git a/src/app/examples/more-menu/more-menu.component.scss b/src/app/examples/more-menu/more-menu.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/examples/more-menu/more-menu.component.spec.ts b/src/app/examples/more-menu/more-menu.component.spec.ts
new file mode 100644
index 0000000..6f1de07
--- /dev/null
+++ b/src/app/examples/more-menu/more-menu.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MoreMenuComponent } from './more-menu.component';
+
+describe('MoreMenuComponent', () => {
+  let component: MoreMenuComponent;
+  let fixture: ComponentFixture<MoreMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MoreMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MoreMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/examples/more-menu/more-menu.component.ts b/src/app/examples/more-menu/more-menu.component.ts
new file mode 100644
index 0000000..b1ca3f8
--- /dev/null
+++ b/src/app/examples/more-menu/more-menu.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { SaMoreMenuItem } from '../../../../projects/simplified-ui/src/lib/sa-more-menu/sa-more-menu.component';
+
+@Component({
+  selector: 'app-more-menu',
+  templateUrl: './more-menu.component.html',
+  styleUrls: ['./more-menu.component.scss']
+})
+export class MoreMenuComponent implements OnInit {
+
+  itemList: SaMoreMenuItem[] = [
+    new SaMoreMenuItem('title 1'),
+    new SaMoreMenuItem('title 2')
+  ];
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+    this.itemList[0].data = "Item 1 Page Data";
+    this.itemList[1].data = "Item 2 Page Data";
+
+    this.itemList[0].onClick.subscribe((_) => {
+      console.log('Item 1 Clicked with data : ',this.itemList[0].data);
+    })
+
+    this.itemList[1].onClick.subscribe((_) => {
+      console.log('Item 2 Clicked with data : ',this.itemList[1].data);
+    })
+
+  }
+
+}
diff --git a/src/app/examples/page-header/page-header.component.html b/src/app/examples/page-header/page-header.component.html
new file mode 100644
index 0000000..52a13c8
--- /dev/null
+++ b/src/app/examples/page-header/page-header.component.html
@@ -0,0 +1 @@
+<sa-header [header]="headerViewModel" (primaryClick)='onPrimaryClick()' (secondaryClick)='onSecondaryClick()'></sa-header>
diff --git a/src/app/examples/page-header/page-header.component.scss b/src/app/examples/page-header/page-header.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/examples/page-header/page-header.component.spec.ts b/src/app/examples/page-header/page-header.component.spec.ts
new file mode 100644
index 0000000..8b7949d
--- /dev/null
+++ b/src/app/examples/page-header/page-header.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageHeaderComponent } from './page-header.component';
+
+describe('PageHeaderComponent', () => {
+  let component: PageHeaderComponent;
+  let fixture: ComponentFixture<PageHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PageHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/examples/page-header/page-header.component.ts b/src/app/examples/page-header/page-header.component.ts
new file mode 100644
index 0000000..87dd76e
--- /dev/null
+++ b/src/app/examples/page-header/page-header.component.ts
@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import { IHeaderViewModel } from '../../../../projects/simplified-ui/src/lib/models/HeaderViewModels';
+import { SaButtonConfig, SaButtonType } from '../../../../projects/simplified-ui/src/lib/sa-button/sa-button.component';
+
+@Component({
+  selector: 'app-page-header',
+  templateUrl: './page-header.component.html',
+  styleUrls: ['./page-header.component.scss']
+})
+export class PageHeaderComponent implements OnInit {
+
+  headerViewModel: IHeaderViewModel = {
+    title: 'Page Header',
+    primaryButton: new SaButtonConfig('primary'),
+    secondaryButton: new SaButtonConfig('secondary'),
+    tooltip: 'tooltip',
+    moreMenu: {
+      primaryMenu: [{title: 'primary-menu 1',action: () => {console.log("Primary Menu")}},{title: 'primary-menu 2',action: () => {console.log("Primary Menu")}}],
+      secondaryMenu: [{title: 'secondary-menu',action: () => {console.log("Secondary Menu")}},{title: 'secondary-menu 2',action: () => {console.log("Primary Menu")}}],
+      }
+    };
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.headerViewModel.primaryButton.type = SaButtonType.Primary;
+    this.headerViewModel.secondaryButton.type = SaButtonType.Secondary;
+  }
+
+  onPrimaryClick(){
+    console.log("Primary Click");
+  }
+
+  onSecondaryClick() {
+    console.log("Secondary Click");
+  }
+
+}
diff --git a/src/app/examples/select/select.component.html b/src/app/examples/select/select.component.html
new file mode 100644
index 0000000..fb8d670
--- /dev/null
+++ b/src/app/examples/select/select.component.html
@@ -0,0 +1,4 @@
+<mat-form-field>
+  <mat-label>Select</mat-label>
+  <sa-select [formControl]='formControl'></sa-select>
+</mat-form-field>
diff --git a/src/app/examples/select/select.component.scss b/src/app/examples/select/select.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/examples/select/select.component.spec.ts b/src/app/examples/select/select.component.spec.ts
new file mode 100644
index 0000000..b1cd6f8
--- /dev/null
+++ b/src/app/examples/select/select.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectComponent } from './select.component';
+
+describe('SelectComponent', () => {
+  let component: SelectComponent;
+  let fixture: ComponentFixture<SelectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SelectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/examples/select/select.component.ts b/src/app/examples/select/select.component.ts
new file mode 100644
index 0000000..112932a
--- /dev/null
+++ b/src/app/examples/select/select.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { SaSelectConfig } from '../../../../projects/simplified-ui/src/lib/models/SaSelectModels';
+import { BehaviorSubject } from 'rxjs';
+
+@Component({
+  selector: 'app-select',
+  templateUrl: './select.component.html',
+  styleUrls: ['./select.component.scss']
+})
+export class SelectComponent implements OnInit {
+
+  formControl: FormControl = new FormControl('',[Validators.required]);
+  saSelectConfig: SaSelectConfig<any> = new SaSelectConfig<any>();
+
+  constructor() {
+    this.saSelectConfig.options = new BehaviorSubject<any[]>([
+      "Item 1",
+      "Item 2"
+    ]);
+    this.saSelectConfig.searchPlaceholder = "Search placeholder";
+    this.saSelectConfig.emptyResultsText = "Empty result text";
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/examples/stepper/stepper.component.html b/src/app/examples/stepper/stepper.component.html
new file mode 100644
index 0000000..7e6d5f0
--- /dev/null
+++ b/src/app/examples/stepper/stepper.component.html
@@ -0,0 +1,3 @@
+<div style='padding: 20px'>
+  <sa-stepper [value]="2" [min]='1' [max]='10' label="Stepper" (valueChanged)='onValueChange($event)'></sa-stepper>
+</div>
diff --git a/src/app/examples/stepper/stepper.component.scss b/src/app/examples/stepper/stepper.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/examples/stepper/stepper.component.spec.ts b/src/app/examples/stepper/stepper.component.spec.ts
new file mode 100644
index 0000000..4bf2213
--- /dev/null
+++ b/src/app/examples/stepper/stepper.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StepperComponent } from './stepper.component';
+
+describe('StepperComponent', () => {
+  let component: StepperComponent;
+  let fixture: ComponentFixture<StepperComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StepperComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StepperComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/examples/stepper/stepper.component.ts b/src/app/examples/stepper/stepper.component.ts
new file mode 100644
index 0000000..3b025e3
--- /dev/null
+++ b/src/app/examples/stepper/stepper.component.ts
@@ -0,0 +1,27 @@
+/*
+- Can add a form control to our stepper component. Will provide us ability to enable/disable, mark are required etc.
+*/
+
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { SaStepperComponent } from '../../../../projects/simplified-ui/src/lib/sa-stepper/sa-stepper.component';
+
+@Component({
+  selector: 'app-stepper',
+  templateUrl: './stepper.component.html',
+  styleUrls: ['./stepper.component.scss']
+})
+export class StepperComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+
+  }
+
+  onValueChange(event) {
+    console.log("Value Changed to : ",event)
+  }
+
+
+
+}
diff --git a/src/app/examples/table-of-contents/table-of-contents.component.html b/src/app/examples/table-of-contents/table-of-contents.component.html
new file mode 100644
index 0000000..2db51d4
--- /dev/null
+++ b/src/app/examples/table-of-contents/table-of-contents.component.html
@@ -0,0 +1 @@
+<sa-table-of-contents [primaryMenu]='primaryMenu' [secondaryMenu]='secondaryMenu'></sa-table-of-contents>
diff --git a/src/app/examples/table-of-contents/table-of-contents.component.scss b/src/app/examples/table-of-contents/table-of-contents.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/examples/table-of-contents/table-of-contents.component.spec.ts b/src/app/examples/table-of-contents/table-of-contents.component.spec.ts
new file mode 100644
index 0000000..fedda2f
--- /dev/null
+++ b/src/app/examples/table-of-contents/table-of-contents.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableOfContentsComponent } from './table-of-contents.component';
+
+describe('TableOfContentsComponent', () => {
+  let component: TableOfContentsComponent;
+  let fixture: ComponentFixture<TableOfContentsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TableOfContentsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TableOfContentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/examples/table-of-contents/table-of-contents.component.ts b/src/app/examples/table-of-contents/table-of-contents.component.ts
new file mode 100644
index 0000000..e1258d2
--- /dev/null
+++ b/src/app/examples/table-of-contents/table-of-contents.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { NavigationItem } from '../../../../projects/simplified-ui/src/lib/models/NavigationItem';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'app-table-of-contents',
+  templateUrl: './table-of-contents.component.html',
+  styleUrls: ['./table-of-contents.component.scss']
+})
+export class TableOfContentsComponent implements OnInit {
+
+  primaryMenu: NavigationItem[] = [
+    new NavigationItem('Item 1','item1','', new Observable<string>()),
+    new NavigationItem('Item 2','item2','', new Observable<string>()),
+    new NavigationItem('Item 3','item3','', new Observable<string>()),
+  ];
+
+  secondaryMenu: NavigationItem[] = [
+    new NavigationItem('Item 1','item1','', new Observable<string>()),
+    new NavigationItem('Item 2','item2','', new Observable<string>()),
+    new NavigationItem('Item 3','item3','', new Observable<string>()),
+  ];
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/examples/text-editor/text-editor.component.html b/src/app/examples/text-editor/text-editor.component.html
new file mode 100644
index 0000000..48e258d
--- /dev/null
+++ b/src/app/examples/text-editor/text-editor.component.html
@@ -0,0 +1,9 @@
+<div>
+  <mat-form-field style="width: 100%">
+    <mat-label>Text Editor</mat-label>
+    <sa-text-editor [required]="true" [formControl]="formControl" name="Text Editor"></sa-text-editor>
+  </mat-form-field>
+  <button mat-button (click)='toggleState()'>{{this.formControl.disabled ? "Enable" : "Disable"}}</button>
+  <button mat-button (click)='reset()'>Reset</button>
+</div>
+
diff --git a/src/app/examples/text-editor/text-editor.component.scss b/src/app/examples/text-editor/text-editor.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/examples/text-editor/text-editor.component.spec.ts b/src/app/examples/text-editor/text-editor.component.spec.ts
new file mode 100644
index 0000000..766b86d
--- /dev/null
+++ b/src/app/examples/text-editor/text-editor.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextEditorComponent } from './text-editor.component';
+
+describe('TextEditorComponent', () => {
+  let component: TextEditorComponent;
+  let fixture: ComponentFixture<TextEditorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TextEditorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TextEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/examples/text-editor/text-editor.component.ts b/src/app/examples/text-editor/text-editor.component.ts
new file mode 100644
index 0000000..dafb3ba
--- /dev/null
+++ b/src/app/examples/text-editor/text-editor.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-text-editor',
+  templateUrl: './text-editor.component.html',
+  styleUrls: ['./text-editor.component.scss']
+})
+export class TextEditorComponent implements OnInit {
+
+  formControl: FormControl = new FormControl('',[Validators.required]);
+
+  constructor() { }
+
+  ngOnInit(): void {}
+
+  toggleState() {
+    this.formControl.disabled ? this.formControl.enable() : this.formControl.disable();
+  }
+
+  reset(){
+    this.formControl.setValue('');
+  }
+
+}
+
diff --git a/src/styles.scss b/src/styles.scss
index 09c20f5..45e09ee 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,3 +1,8 @@
 @import '@angular/material/prebuilt-themes/deeppurple-amber.css';
 @import '~@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
 @import '../projects/simplified-ui/src/lib/styles/simplified-ui.scss';
+
+
+body {
+  margin: 0;
+}