diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.html b/projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.html
deleted file mode 100644
index 382d1b95..00000000
--- a/projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<div class="content-panel-outer-wrapper">
-  <ng-content select="mad-content-panel-container-content"></ng-content>
-  <ng-content select="mad-content-panel-container-footer"></ng-content>
-</div>
diff --git a/projects/material-addons/src/lib/content-panel/content-header/content-header.component.html b/projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.html
similarity index 100%
rename from projects/material-addons/src/lib/content-panel/content-header/content-header.component.html
rename to projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.html
diff --git a/projects/material-addons/src/lib/content-panel/content-header/content-header.component.scss b/projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.scss
similarity index 50%
rename from projects/material-addons/src/lib/content-panel/content-header/content-header.component.scss
rename to projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.scss
index e6249792..8dd1b16a 100644
--- a/projects/material-addons/src/lib/content-panel/content-header/content-header.component.scss
+++ b/projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.scss
@@ -1,3 +1,4 @@
 .content-header {
   padding-right: 0.5rem;
+  background-color: var(--background-color);
 }
diff --git a/projects/material-addons/src/lib/content-panel/content-header/content-header.component.ts b/projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.ts
similarity index 100%
rename from projects/material-addons/src/lib/content-panel/content-header/content-header.component.ts
rename to projects/material-addons/src/lib/layout/content-panel/content-header/content-header.component.ts
diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.html b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.html
similarity index 100%
rename from projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.html
rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.html
diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.scss b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.scss
similarity index 86%
rename from projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.scss
rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.scss
index fe5ac089..d3b75f18 100644
--- a/projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.scss
+++ b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.scss
@@ -3,5 +3,4 @@
   overflow-y: auto;
   border-top: 0.05rem solid #cccccc;
   padding: 1rem;
-  height: 1rem;
 }
diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.ts b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.ts
similarity index 100%
rename from projects/material-addons/src/lib/content-panel/content-panel-container-content/content-panel-container-content.component.ts
rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container-content/content-panel-container-content.component.ts
diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.html b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-footer/content-panel-container-footer.component.html
similarity index 100%
rename from projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.html
rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container-footer/content-panel-container-footer.component.html
diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.scss b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-footer/content-panel-container-footer.component.scss
similarity index 100%
rename from projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.scss
rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container-footer/content-panel-container-footer.component.scss
diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.ts b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-footer/content-panel-container-footer.component.ts
similarity index 100%
rename from projects/material-addons/src/lib/content-panel/content-panel-container-footer/content-panel-container-footer.component.ts
rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container-footer/content-panel-container-footer.component.ts
diff --git a/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.html b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.html
new file mode 100644
index 00000000..6dbc7430
--- /dev/null
+++ b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.scss b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.scss
new file mode 100644
index 00000000..05db7020
--- /dev/null
+++ b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.scss
@@ -0,0 +1,6 @@
+:host {
+  border-top: 0.05rem solid #cccccc;
+  min-height: 2rem;
+  display: flex;
+  flex: 0 0 auto;
+}
diff --git a/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.ts b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.ts
new file mode 100644
index 00000000..375efe39
--- /dev/null
+++ b/projects/material-addons/src/lib/layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'mad-content-panel-container-sidebar',
+  templateUrl: './content-panel-container-sidebar.component.html',
+  styleUrls: ['./content-panel-container-sidebar.component.scss'],
+})
+export class ContentPanelContainerSidebarComponent {}
diff --git a/projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.html b/projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.html
new file mode 100644
index 00000000..2f432ac2
--- /dev/null
+++ b/projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.html
@@ -0,0 +1,7 @@
+<div class="content-panel-sidebar-wrapper">
+  <ng-content select="mad-content-panel-container-sidebar"></ng-content>
+  <div class="content-panel-outer-wrapper">
+    <ng-content select="mad-content-panel-container-content"></ng-content>
+    <ng-content select="mad-content-panel-container-footer"></ng-content>
+  </div>
+</div>
diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.scss b/projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.scss
similarity index 57%
rename from projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.scss
rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.scss
index a97c234c..876292c8 100644
--- a/projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.scss
+++ b/projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.scss
@@ -4,6 +4,7 @@
   display: flex;
   flex: 1 1 auto;
   min-height: 0.05rem;
+  background-color: var(--background-color);
 }
 
 .content-panel-outer-wrapper {
@@ -11,3 +12,9 @@
   flex: 1 1 auto;
   flex-direction: column;
 }
+.content-panel-sidebar-wrapper {
+  width: 100%;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+}
diff --git a/projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.ts b/projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.ts
similarity index 100%
rename from projects/material-addons/src/lib/content-panel/content-panel-container/content-panel-container.component.ts
rename to projects/material-addons/src/lib/layout/content-panel/content-panel-container/content-panel-container.component.ts
diff --git a/projects/material-addons/src/lib/content-panel/content-panel.module.ts b/projects/material-addons/src/lib/layout/content-panel/content-panel.module.ts
similarity index 83%
rename from projects/material-addons/src/lib/content-panel/content-panel.module.ts
rename to projects/material-addons/src/lib/layout/content-panel/content-panel.module.ts
index 108fce61..01585509 100644
--- a/projects/material-addons/src/lib/content-panel/content-panel.module.ts
+++ b/projects/material-addons/src/lib/layout/content-panel/content-panel.module.ts
@@ -1,17 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
 import { ContentHeaderComponent } from './content-header/content-header.component';
 import { ContentPanelContainerComponent } from './content-panel-container/content-panel-container.component';
 import { ContentPanelContainerContentComponent } from './content-panel-container-content/content-panel-container-content.component';
 import { ContentPanelContainerFooterComponent } from './content-panel-container-footer/content-panel-container-footer.component';
-import { MainContainerComponent } from './main-container/main-container.component';
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { ContentPanelContainerSidebarComponent } from './content-panel-container-sidebar/content-panel-container-sidebar.component';
 
+import { MainContainerComponent } from './main-container/main-container.component';
 @NgModule({
   declarations: [
     ContentHeaderComponent,
     ContentPanelContainerComponent,
     ContentPanelContainerContentComponent,
     ContentPanelContainerFooterComponent,
+    ContentPanelContainerSidebarComponent,
     MainContainerComponent,
   ],
   imports: [CommonModule],
@@ -20,6 +23,7 @@ import { CommonModule } from '@angular/common';
     ContentPanelContainerComponent,
     ContentPanelContainerContentComponent,
     ContentPanelContainerFooterComponent,
+    ContentPanelContainerSidebarComponent,
     MainContainerComponent,
   ],
 })
diff --git a/projects/material-addons/src/lib/content-panel/main-container/main-container.component.html b/projects/material-addons/src/lib/layout/content-panel/main-container/main-container.component.html
similarity index 100%
rename from projects/material-addons/src/lib/content-panel/main-container/main-container.component.html
rename to projects/material-addons/src/lib/layout/content-panel/main-container/main-container.component.html
diff --git a/projects/material-addons/src/lib/content-panel/main-container/main-container.component.scss b/projects/material-addons/src/lib/layout/content-panel/main-container/main-container.component.scss
similarity index 100%
rename from projects/material-addons/src/lib/content-panel/main-container/main-container.component.scss
rename to projects/material-addons/src/lib/layout/content-panel/main-container/main-container.component.scss
diff --git a/projects/material-addons/src/lib/content-panel/main-container/main-container.component.ts b/projects/material-addons/src/lib/layout/content-panel/main-container/main-container.component.ts
similarity index 100%
rename from projects/material-addons/src/lib/content-panel/main-container/main-container.component.ts
rename to projects/material-addons/src/lib/layout/content-panel/main-container/main-container.component.ts
diff --git a/projects/material-addons/src/lib/flowbar/flowbar.component.html b/projects/material-addons/src/lib/layout/flowbar/flowbar.component.html
similarity index 100%
rename from projects/material-addons/src/lib/flowbar/flowbar.component.html
rename to projects/material-addons/src/lib/layout/flowbar/flowbar.component.html
diff --git a/projects/material-addons/src/lib/flowbar/flowbar.component.scss b/projects/material-addons/src/lib/layout/flowbar/flowbar.component.scss
similarity index 100%
rename from projects/material-addons/src/lib/flowbar/flowbar.component.scss
rename to projects/material-addons/src/lib/layout/flowbar/flowbar.component.scss
diff --git a/projects/material-addons/src/lib/flowbar/flowbar.component.ts b/projects/material-addons/src/lib/layout/flowbar/flowbar.component.ts
similarity index 100%
rename from projects/material-addons/src/lib/flowbar/flowbar.component.ts
rename to projects/material-addons/src/lib/layout/flowbar/flowbar.component.ts
diff --git a/projects/material-addons/src/lib/flowbar/flowbar.module.ts b/projects/material-addons/src/lib/layout/flowbar/flowbar.module.ts
similarity index 100%
rename from projects/material-addons/src/lib/flowbar/flowbar.module.ts
rename to projects/material-addons/src/lib/layout/flowbar/flowbar.module.ts
diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.html b/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.html
new file mode 100644
index 00000000..b2c306fd
--- /dev/null
+++ b/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.html
@@ -0,0 +1,4 @@
+<span class="content-wrapper">
+  <ng-content></ng-content>
+</span>
+<span class="focus-overlay"></span>
diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.scss b/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.scss
new file mode 100644
index 00000000..886bf54f
--- /dev/null
+++ b/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.scss
@@ -0,0 +1,33 @@
+[mad-sidebar-item] {
+  padding: 9px 24px 8px;
+  color: var(--panel-color);
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 16px;
+  font-weight: 300;
+
+  letter-spacing: 0.5px;
+
+  .focus-overlay {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    pointer-events: none;
+    border-radius: inherit;
+  }
+
+  &.active-sidebar-item {
+    background-color: var(--panel-select-background);
+  }
+
+  &:hover {
+    .focus-overlay {
+      background-color: black;
+      opacity: 0.04;
+    }
+  }
+}
diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.ts b/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.ts
new file mode 100644
index 00000000..1e361272
--- /dev/null
+++ b/projects/material-addons/src/lib/layout/sidebar/sidebar-item/sidebar-item.component.ts
@@ -0,0 +1,9 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: '[mad-sidebar-item]',
+  templateUrl: 'sidebar-item.component.html',
+  styleUrls: ['sidebar-item.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SidebarItemComponent {}
diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar.component.html b/projects/material-addons/src/lib/layout/sidebar/sidebar.component.html
new file mode 100644
index 00000000..76de45e0
--- /dev/null
+++ b/projects/material-addons/src/lib/layout/sidebar/sidebar.component.html
@@ -0,0 +1,10 @@
+<div [class.collapsed]="collapsed" class="sidebar-wrapper">
+  <div class="sidebar-header">
+    <button (click)="toggleCollapse()" color="basic" mat-button>
+      <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>
+    </button>
+  </div>
+  <div class="item-list">
+    <ng-content></ng-content>
+  </div>
+</div>
diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar.component.scss b/projects/material-addons/src/lib/layout/sidebar/sidebar.component.scss
new file mode 100644
index 00000000..2da1d77d
--- /dev/null
+++ b/projects/material-addons/src/lib/layout/sidebar/sidebar.component.scss
@@ -0,0 +1,42 @@
+$color-gray: #707070;
+
+.sidebar-wrapper {
+  background: var(--panel-background-color);
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--panel-border-color);
+  margin-top: 10px;
+
+  transition: width 0.1s ease-in;
+
+  &:not(.collapsed) {
+    width: 239px;
+  }
+
+  &.collapsed {
+    width: 64px;
+  }
+
+  .sidebar-header {
+    display: flex;
+    flex-direction: row-reverse;
+    border-bottom: 1px solid var(--panel-border-color);
+
+    button {
+      color: $color-gray;
+    }
+  }
+
+  &.collapsed {
+    .item-list {
+      display: none;
+    }
+  }
+
+  .item-list {
+    display: flex;
+    flex-direction: column;
+    margin-top: 16px;
+  }
+}
diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar.component.ts b/projects/material-addons/src/lib/layout/sidebar/sidebar.component.ts
new file mode 100644
index 00000000..3f1d2fcc
--- /dev/null
+++ b/projects/material-addons/src/lib/layout/sidebar/sidebar.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'mad-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss'],
+})
+export class SidebarComponent {
+  collapsed = false;
+
+  toggleCollapse() {
+    this.collapsed = !this.collapsed;
+  }
+}
diff --git a/projects/material-addons/src/lib/layout/sidebar/sidebar.module.ts b/projects/material-addons/src/lib/layout/sidebar/sidebar.module.ts
new file mode 100644
index 00000000..d3797b2f
--- /dev/null
+++ b/projects/material-addons/src/lib/layout/sidebar/sidebar.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SidebarComponent } from './sidebar.component';
+import { SidebarItemComponent } from './sidebar-item/sidebar-item.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+@NgModule({
+  declarations: [SidebarComponent, SidebarItemComponent],
+  exports: [SidebarComponent, SidebarItemComponent],
+  imports: [CommonModule, MatIconModule, MatButtonModule],
+})
+export class SidebarModule {}
diff --git a/projects/material-addons/src/lib/toolbar/toolbar-action.interface.ts b/projects/material-addons/src/lib/layout/toolbar/toolbar-action.interface.ts
similarity index 100%
rename from projects/material-addons/src/lib/toolbar/toolbar-action.interface.ts
rename to projects/material-addons/src/lib/layout/toolbar/toolbar-action.interface.ts
diff --git a/projects/material-addons/src/lib/toolbar/toolbar.component.html b/projects/material-addons/src/lib/layout/toolbar/toolbar.component.html
similarity index 100%
rename from projects/material-addons/src/lib/toolbar/toolbar.component.html
rename to projects/material-addons/src/lib/layout/toolbar/toolbar.component.html
diff --git a/projects/material-addons/src/lib/toolbar/toolbar.component.css b/projects/material-addons/src/lib/layout/toolbar/toolbar.component.scss
similarity index 100%
rename from projects/material-addons/src/lib/toolbar/toolbar.component.css
rename to projects/material-addons/src/lib/layout/toolbar/toolbar.component.scss
diff --git a/projects/material-addons/src/lib/toolbar/toolbar.component.ts b/projects/material-addons/src/lib/layout/toolbar/toolbar.component.ts
similarity index 98%
rename from projects/material-addons/src/lib/toolbar/toolbar.component.ts
rename to projects/material-addons/src/lib/layout/toolbar/toolbar.component.ts
index 69eb1bf2..b78df5c6 100644
--- a/projects/material-addons/src/lib/toolbar/toolbar.component.ts
+++ b/projects/material-addons/src/lib/layout/toolbar/toolbar.component.ts
@@ -9,7 +9,7 @@ import { Action, BackAction, MainAction, ToolbarAction } from './toolbar-action.
 @Component({
   selector: 'mad-toolbar',
   templateUrl: './toolbar.component.html',
-  styleUrls: ['./toolbar.component.css'],
+  styleUrls: ['./toolbar.component.scss'],
 })
 export class ToolbarComponent {
   isHandset$: Observable<boolean> = this.breakpointObserver.observe([Breakpoints.Handset]).pipe(map((result) => result.matches));
diff --git a/projects/material-addons/src/lib/toolbar/toolbar.module.ts b/projects/material-addons/src/lib/layout/toolbar/toolbar.module.ts
similarity index 84%
rename from projects/material-addons/src/lib/toolbar/toolbar.module.ts
rename to projects/material-addons/src/lib/layout/toolbar/toolbar.module.ts
index 6edd29a6..08a88535 100644
--- a/projects/material-addons/src/lib/toolbar/toolbar.module.ts
+++ b/projects/material-addons/src/lib/layout/toolbar/toolbar.module.ts
@@ -2,13 +2,13 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { ToolbarComponent } from './toolbar.component';
-import { MaterialActionButtonModule } from '../material-action-button/material-action-button.module';
+import { MaterialActionButtonModule } from '../../material-action-button/material-action-button.module';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { ButtonModule } from '../button/button.module';
+import { ButtonModule } from '../../button/button.module';
 import { MatBadgeModule } from '@angular/material/badge';
 
 @NgModule({
diff --git a/projects/material-addons/src/lib/toolbar/toolbar.service.ts b/projects/material-addons/src/lib/layout/toolbar/toolbar.service.ts
similarity index 100%
rename from projects/material-addons/src/lib/toolbar/toolbar.service.ts
rename to projects/material-addons/src/lib/layout/toolbar/toolbar.service.ts
diff --git a/projects/material-addons/src/lib/material-addons.module.ts b/projects/material-addons/src/lib/material-addons.module.ts
index 7cfc701e..c5e6b0b7 100644
--- a/projects/material-addons/src/lib/material-addons.module.ts
+++ b/projects/material-addons/src/lib/material-addons.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { ToolbarModule } from './toolbar/toolbar.module';
+import { ToolbarModule } from './layout/toolbar/toolbar.module';
 import { ReadOnlyFormFieldModule } from './readonly/readonly-form-field.module';
 import { MaterialActionButtonModule } from './material-action-button/material-action-button.module';
 import { NumericFieldModule } from './numeric-field/numeric-field.module';
@@ -7,6 +7,7 @@ import { CardModule } from './card/card.module';
 import { QuickListModule } from './quick-list/quick-list.module';
 import { ButtonModule } from './button/button.module';
 import { ThrottleClickModule } from './throttle-click/throttle-click.module';
+import { SidebarModule } from './layout/sidebar/sidebar.module';
 
 @NgModule({
   exports: [
@@ -18,6 +19,7 @@ import { ThrottleClickModule } from './throttle-click/throttle-click.module';
     CardModule,
     QuickListModule,
     ThrottleClickModule,
+    SidebarModule,
   ],
 })
 export class MaterialAddonsModule {}
diff --git a/projects/material-addons/src/lib/quick-list/quick-list-compact/quick-list-compact.component.ts b/projects/material-addons/src/lib/quick-list/quick-list-compact/quick-list-compact.component.ts
index d5669996..447bdfa9 100644
--- a/projects/material-addons/src/lib/quick-list/quick-list-compact/quick-list-compact.component.ts
+++ b/projects/material-addons/src/lib/quick-list/quick-list-compact/quick-list-compact.component.ts
@@ -5,7 +5,15 @@ import { FormBuilder } from '@angular/forms';
 @Component({
   selector: 'mad-quick-list-compact',
   templateUrl: './quick-list-compact.component.html',
-  styleUrls: [],
+  styles: [
+    `
+      .quick-list-row {
+        flex-direction: row;
+        box-sizing: border-box;
+        display: flex;
+      }
+    `,
+  ],
 })
 export class QuickListCompactComponent extends BaseQuickListComponent<QuickListItem> {
   constructor(
diff --git a/projects/material-addons/src/lib/stepper/step-header/step-header.component.scss b/projects/material-addons/src/lib/stepper/step-header/step-header.component.scss
index 38fed57e..46a34a75 100644
--- a/projects/material-addons/src/lib/stepper/step-header/step-header.component.scss
+++ b/projects/material-addons/src/lib/stepper/step-header/step-header.component.scss
@@ -8,8 +8,9 @@
   width: 100%;
   height: 62px;
 
-  display: flex;
   flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
   gap: 1em;
 }
 
diff --git a/projects/material-addons/src/lib/stepper/stepper.component.scss b/projects/material-addons/src/lib/stepper/stepper.component.scss
index ef456682..42a0f8a2 100644
--- a/projects/material-addons/src/lib/stepper/stepper.component.scss
+++ b/projects/material-addons/src/lib/stepper/stepper.component.scss
@@ -36,8 +36,10 @@
   border-left: 1px solid lightgrey;
   border-right: 1px solid lightgrey;
   border-bottom: 1px solid lightgrey;
-  display: flex;
+
   flex-direction: column;
+  box-sizing: border-box;
+  display: flex;
 }
 
 .step-content {
diff --git a/projects/material-addons/src/public_api.ts b/projects/material-addons/src/public_api.ts
index 0167c28f..2cd5c96b 100644
--- a/projects/material-addons/src/public_api.ts
+++ b/projects/material-addons/src/public_api.ts
@@ -8,10 +8,7 @@ export * from './lib/button/button.module';
 export * from './lib/readonly/readonly-form-field.module';
 export * from './lib/readonly/readonly-form-field-wrapper/readonly-form-field-wrapper.component';
 export * from './lib/readonly/readonly-form-field/readonly-form-field.component';
-export * from './lib/toolbar/toolbar.module';
-export * from './lib/toolbar/toolbar.component';
-export * from './lib/toolbar/toolbar.service';
-export * from './lib/toolbar/toolbar-action.interface';
+
 export * from './lib/numeric-field/numeric-field';
 export * from './lib/numeric-field/numeric-field.module';
 export * from './lib/numeric-field/number-format.service';
@@ -29,12 +26,25 @@ export * from './lib/stepper/stepper.component';
 export * from './lib/stepper/step-header/step-header.component';
 export * from './lib/stepper/mad-stepper-animation';
 export * from './lib/stepper/stepper.module';
-export * from './lib/content-panel/content-header/content-header.component';
-export * from './lib/content-panel/content-panel-container/content-panel-container.component';
-export * from './lib/content-panel/content-panel-container-content/content-panel-container-content.component';
-export * from './lib/content-panel/content-panel-container-footer/content-panel-container-footer.component';
-export * from './lib/content-panel/main-container/main-container.component';
-export * from './lib/content-panel/content-panel.module';
-export * from './lib/flowbar/flowbar.component';
-export * from './lib/flowbar/flowbar.module';
+
+export * from './lib/layout/content-panel/content-header/content-header.component';
+export * from './lib//layout/content-panel/content-panel-container/content-panel-container.component';
+export * from './lib//layout/content-panel/content-panel-container-content/content-panel-container-content.component';
+export * from './lib//layout/content-panel/content-panel-container-footer/content-panel-container-footer.component';
+export * from './lib//layout/content-panel/content-panel-container-sidebar/content-panel-container-sidebar.component';
+export * from './lib//layout/content-panel/main-container/main-container.component';
+export * from './lib//layout/content-panel/content-panel.module';
+
+export * from './lib/layout/flowbar/flowbar.component';
+export * from './lib/layout/flowbar/flowbar.module';
+
+export * from './lib/layout/sidebar/sidebar.component';
+export * from './lib/layout/sidebar/sidebar-item/sidebar-item.component';
+export * from './lib/layout/sidebar/sidebar.module';
+
+export * from './lib/layout/toolbar/toolbar.module';
+export * from './lib/layout/toolbar/toolbar.component';
+export * from './lib/layout/toolbar/toolbar.service';
+export * from './lib/layout/toolbar/toolbar-action.interface';
+
 export * from './lib/material-addons.module';
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 4a28cd3a..7abc3d91 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -13,7 +13,9 @@ import { TableDemoComponent } from './component-demos/table-demo/table-demo.comp
 import { MadButtonsDemoComponent } from './component-demos/mad-buttons-demo/mad-buttons-demo.component';
 import { ThrottleClickDemoComponent } from './component-demos/throttle-click-demo/throttle-click-demo.component';
 import { StepperDemoComponent } from './component-demos/stepper-demo/stepper-demo.component';
-import { PageLayoutsComponent } from './component-demos/page-layouts/page-layouts.component';
+import { BasePageLayoutComponent } from './component-demos/page-layouts/base-page-layout/base-page-layout.component';
+import { FlowbarPageLayoutComponent } from './component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component';
+import { SidebarPageLayoutComponent } from './component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component';
 import { ExampleComponentsLayoutComponent } from './example-components-layout/example-components-layout.component';
 import { DataTableDemoComponent } from './component-demos/data-table-demo/data-table-demo.component';
 
@@ -132,11 +134,27 @@ const routes: Routes = [
         },
       },
       {
-        path: 'page-layouts',
-        component: PageLayoutsComponent,
+        path: 'base-page-layout',
+        component: BasePageLayoutComponent,
         pathMatch: 'full',
         data: {
-          i18n: 'layouts.demos.page-layouts',
+          i18n: 'layouts.demos.base-page-layout',
+        },
+      },
+      {
+        path: 'flowbar-page-layout',
+        component: FlowbarPageLayoutComponent,
+        pathMatch: 'full',
+        data: {
+          i18n: 'layouts.demos.flowbar-page-layout',
+        },
+      },
+      {
+        path: 'sidebar-page-layout',
+        component: SidebarPageLayoutComponent,
+        pathMatch: 'full',
+        data: {
+          i18n: 'layouts.demos.sidebar-page-layout',
         },
       },
       {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d9aaa2ba..d374e11a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -86,7 +86,9 @@ import { StepperDemoComponent } from './component-demos/stepper-demo/stepper-dem
 import { CdkStepperModule } from '@angular/cdk/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
 import { QuickListCompactBasicComponent } from './example-components/quick-list-compact-basic/quick-list-compact-basic.component';
-import { PageLayoutsComponent } from './component-demos/page-layouts/page-layouts.component';
+import { BasePageLayoutComponent } from './component-demos/page-layouts/base-page-layout/base-page-layout.component';
+import { FlowbarPageLayoutComponent } from './component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component';
+import { SidebarPageLayoutComponent } from './component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component';
 import { FullPageLayoutsModule } from './full-page-layouts/full-page-layouts.module';
 import { ExampleComponentsLayoutComponent } from './example-components-layout/example-components-layout.component';
 import { DataTableCustomColumnsComponent } from './example-components/data-table-custom-columns/data-table-custom-columns.component';
@@ -103,6 +105,7 @@ import { DataTableChildRowsComponent } from './example-components/data-table-chi
 import { MatChipsModule } from '@angular/material/chips';
 import { QuickListReactiveFormBasicComponent } from './example-components/quick-list-reactive-form-basic/quick-list-reactive-form-basic.component';
 import { QuickListReactiveFormCompactComponent } from './example-components/quick-list-reactive-form-compact/quick-list-reactive-form-compact.component';
+import { FullPageLayoutsRoutingModule } from './full-page-layouts/full-page-layouts-routing.module';
 
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   return new TranslateHttpLoader(http, './assets/i18n/');
@@ -159,7 +162,9 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     QuickListCompactBasicComponent,
     StepperComponent,
     StepperDemoComponent,
-    PageLayoutsComponent,
+    BasePageLayoutComponent,
+    FlowbarPageLayoutComponent,
+    SidebarPageLayoutComponent,
     ExampleComponentsLayoutComponent,
     QuickListReactiveFormBasicComponent,
     QuickListReactiveFormCompactComponent,
@@ -222,6 +227,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     MatSlideToggleModule,
     DataTableDevModule,
     MatChipsModule,
+    FullPageLayoutsRoutingModule,
   ],
   providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline', subscriptSizing: 'dynamic' } }],
   bootstrap: [AppComponent],
diff --git a/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.html b/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.html
new file mode 100644
index 00000000..f180bf04
--- /dev/null
+++ b/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.html
@@ -0,0 +1,33 @@
+<h1>Base Pagelayout</h1>
+<h3>
+  Following example shows a base page layout without multiple pages. If you have different pages (different header, ...) with routing see
+  next example.
+</h3>
+<div>
+  <h3>Design Guidelines</h3>
+  <p>All pages in an application should follow a common layout structure to ensure a consistent user experience across applications.</p>
+  <p>The Base Pagelayout includes the following components:</p>
+  <ul>
+    <li>Main Navigation</li>
+    <li>Pagetitle</li>
+    <li>Content Area</li>
+  </ul>
+  <p>Further components may complete the pagelayout as needed:</p>
+  <ul>
+    <li>Back Button</li>
+    <li>Command bar</li>
+    <li>Content-Panel</li>
+  </ul>
+  <h4>Command Bar</h4>
+  <ul>
+    <li>The Command Bar comprises the most common users tasks.</li>
+    <li>The most important ones are shown, additional ones are accessible in an overflow-menu.</li>
+    <li>
+      Other commands, either less common ones or where the proximity to an ui element is crucial, are provided within the content area.
+    </li>
+  </ul>
+</div>
+
+<h3>Demo</h3>
+<mad-primary-button routerLink="/full-page-layouts/base-page-layout">Open Base Pagelayout Demo</mad-primary-button><br />
+<app-text-code>{{ basePageLayout }}</app-text-code>
diff --git a/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.scss b/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.scss
new file mode 100644
index 00000000..cd0f9378
--- /dev/null
+++ b/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.scss
@@ -0,0 +1 @@
+// define extra css here
diff --git a/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.ts b/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.ts
new file mode 100644
index 00000000..7280d743
--- /dev/null
+++ b/src/app/component-demos/page-layouts/base-page-layout/base-page-layout.component.ts
@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'base-page-layout',
+  templateUrl: './base-page-layout.component.html',
+  styleUrls: ['./base-page-layout.component.scss'],
+})
+export class BasePageLayoutComponent {
+  basePageLayout = `<mad-main-container>
+        <mad-content-header>
+          <div class="fx fx-row fx-space-between fx-align-center">
+            <div class="fx fx-row fx-align-center fx-gap-1em">
+              <button mat-button>
+                <mat-icon color="primary">arrow_back</mat-icon>
+              </button>
+              <h2 class="title">Base Pagelayout</h2>
+            </div>
+          </div>
+        </mad-content-header>
+        <mad-content-panel-container>
+          <mad-content-panel-container-content>
+            <p>Define the page content here</p>
+          </mad-content-panel-container-content>
+          <mad-content-panel-container-footer class="fx fx-space-between fx-align-center">
+            <p>Footer here</p>
+          </mad-content-panel-container-footer>
+       </mad-content-panel-container>
+     </mad-main-container>`;
+}
diff --git a/src/app/component-demos/page-layouts/page-layouts.component.html b/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.html
similarity index 61%
rename from src/app/component-demos/page-layouts/page-layouts.component.html
rename to src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.html
index 94af9d4c..f0fcfffd 100644
--- a/src/app/component-demos/page-layouts/page-layouts.component.html
+++ b/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.html
@@ -1,37 +1,3 @@
-<h1>Base Pagelayout</h1>
-<h3>
-  Following example shows a base page layout without multiple pages. If you have different pages (different header, ...) with routing see
-  next example.
-</h3>
-<div>
-  <h3>Design Guidelines</h3>
-  <p>All pages in an application should follow a common layout structure to ensure a consistent user experience across applications.</p>
-  <p>The Base Pagelayout includes the following components:</p>
-  <ul>
-    <li>Main Navigation</li>
-    <li>Pagetitle</li>
-    <li>Content Area</li>
-  </ul>
-  <p>Further components may complete the pagelayout as needed:</p>
-  <ul>
-    <li>Back Button</li>
-    <li>Command bar</li>
-    <li>Content-Panel</li>
-  </ul>
-  <h4>Command Bar</h4>
-  <ul>
-    <li>The Command Bar comprises the most common users tasks.</li>
-    <li>The most important ones are shown, additional ones are accessible in an overflow-menu.</li>
-    <li>
-      Other commands, either less common ones or where the proximity to an ui element is crucial, are provided within the content area.
-    </li>
-  </ul>
-</div>
-
-<h3>Demo</h3>
-<mad-primary-button routerLink="/full-page-layouts/base-page-layout">Open Base Pagelayout Demo</mad-primary-button><br />
-<app-text-code>{{ basePageLayout }}</app-text-code>
-<br />
 <h1>Flow Bar Layout</h1>
 <h3>The Flow Bar Layout extends the Base Page Layout by adding a wizard-like navigation control.</h3>
 <p>
diff --git a/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss b/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss
new file mode 100644
index 00000000..cd0f9378
--- /dev/null
+++ b/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss
@@ -0,0 +1 @@
+// define extra css here
diff --git a/src/app/component-demos/page-layouts/page-layouts.component.ts b/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.ts
similarity index 72%
rename from src/app/component-demos/page-layouts/page-layouts.component.ts
rename to src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.ts
index 962b51df..b2794f0d 100644
--- a/src/app/component-demos/page-layouts/page-layouts.component.ts
+++ b/src/app/component-demos/page-layouts/flowbar-page-layout/flowbar-page-layout.component.ts
@@ -1,32 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-page-layouts',
-  templateUrl: './page-layouts.component.html',
-  styleUrls: ['./page-layouts.component.scss'],
+  selector: 'flowbar-page-layout',
+  templateUrl: './flowbar-page-layout.component.html',
+  styleUrls: ['./flowbar-page-layout.component.scss'],
 })
-export class PageLayoutsComponent {
-  basePageLayout = `<mad-main-container>
-        <mad-content-header>
-          <div class="fx fx-row fx-space-between fx-align-center">
-            <div class="fx fx-row fx-align-center fx-gap-1em">
-              <button mat-button>
-                <mat-icon color="primary">arrow_back</mat-icon>
-              </button>
-              <h2 class="title">Base Pagelayout</h2>
-            </div>
-          </div>
-        </mad-content-header>
-        <mad-content-panel-container>
-          <mad-content-panel-container-content>
-            <p>Define the page content here</p>
-          </mad-content-panel-container-content>
-          <mad-content-panel-container-footer class="fx fx-space-between fx-align-center">
-            <p>Footer here</p>
-          </mad-content-panel-container-footer>
-       </mad-content-panel-container>
-     </mad-main-container>`;
-
+export class FlowbarPageLayoutComponent {
   flowBarLayout = `
     <mad-main-container>
         <mad-content-header>
diff --git a/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.html b/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.html
new file mode 100644
index 00000000..eef3e156
--- /dev/null
+++ b/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.html
@@ -0,0 +1,16 @@
+<h1>Sidbar Pagelayout</h1>
+<h3>Following example shows a sidebar page layout with a collapsable sidebar container that can hold different navigation entries.</h3>
+<div>
+  <h3>Design Guidelines</h3>
+  <p>All pages in an application should follow a common layout structure to ensure a consistent user experience across applications.</p>
+  <p>The Base SidebarLayout includes the following components:</p>
+  <ul>
+    <li>Same components as the base page layout</li>
+    <li>plus a collapsable navigation panel on the right hand side</li>
+  </ul>
+</div>
+
+<h3>Demo</h3>
+<mad-primary-button routerLink="/full-page-layouts/sidebar-page-layout">Open Sidebar Pagelayout Demo</mad-primary-button><br />
+<app-text-code>{{ sidebarPageLayout }}</app-text-code>
+<br />
diff --git a/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss b/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss
new file mode 100644
index 00000000..cd0f9378
--- /dev/null
+++ b/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss
@@ -0,0 +1 @@
+// define extra css here
diff --git a/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts b/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts
new file mode 100644
index 00000000..5cc51112
--- /dev/null
+++ b/src/app/component-demos/page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts
@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sidebar-page-layouts',
+  templateUrl: './sidebar-page-layout.component.html',
+  styleUrls: ['./sidebar-page-layout.component.scss'],
+})
+export class SidebarPageLayoutComponent {
+  sidebarPageLayout = `<mad-main-container>
+  <mad-content-header>
+    <div class="flex-row align-items-center place-content-center-space-between">
+      <div class="flex-row align-items-center place-content-center fx-gap-1em">
+        <button mat-button>
+          <mat-icon color="primary" (click)="goToPreviousPage()">arrow_back</mat-icon>
+        </button>
+        <h2 class="title">Sidebar layout</h2>
+      </div>
+      <div class="flex-row align-items-center place-content-center fx-gap-1em">
+        <mad-icon-button>
+          <mat-icon color="primary">history</mat-icon>
+        </mad-icon-button>
+        <mad-outline-button>Action A</mad-outline-button>
+        <mad-outline-button color="warn">Action B</mad-outline-button>
+      </div>
+    </div>
+  </mad-content-header>
+  <mad-content-panel-container>
+    <mad-content-panel-container-sidebar>
+      <mad-sidebar>
+        <a mad-sidebar-item routerLink="/full-page-layouts/sidebar-page-layout/1" routerLinkActive="active-sidebar-item">Item 1</a>
+        <a mad-sidebar-item routerLink="/full-page-layouts/sidebar-page-layout/2" routerLinkActive="active-sidebar-item">Item 2</a>
+        <a mad-sidebar-item href="#">A very very long name is here</a>
+      </mad-sidebar>
+    </mad-content-panel-container-sidebar>
+    <mad-content-panel-container-content>
+      <router-outlet></router-outlet>
+    </mad-content-panel-container-content>
+  </mad-content-panel-container>
+</mad-main-container>`;
+}
diff --git a/src/app/example-components/mad-buttons/mad-buttons.component.html b/src/app/example-components/mad-buttons/mad-buttons.component.html
index ff308d25..f112923e 100644
--- a/src/app/example-components/mad-buttons/mad-buttons.component.html
+++ b/src/app/example-components/mad-buttons/mad-buttons.component.html
@@ -5,3 +5,9 @@
 <mad-icon-button [title]="'Create'">
   <mat-icon>create</mat-icon>
 </mad-icon-button>
+<br /><br />
+<mad-button-group>
+  <button mat-stroked-button madButton>Group 1</button>
+  <button mat-stroked-button madButton>Group 2</button>
+  <button mat-stroked-button madButton>Group 3</button>
+</mad-button-group>
diff --git a/src/app/full-page-layouts/example-page-one/example-page-one.component.html b/src/app/full-page-layouts/example-page-one/example-page-one.component.html
new file mode 100644
index 00000000..86b8c4df
--- /dev/null
+++ b/src/app/full-page-layouts/example-page-one/example-page-one.component.html
@@ -0,0 +1,25 @@
+<h2>Page One</h2>
+
+<mat-form-field appearance="outline" class="example-form-field">
+  <mat-label>Clearable input</mat-label>
+  <input matInput type="text" [(ngModel)]="value" />
+  <button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value = ''">
+    <mat-icon>close</mat-icon>
+  </button>
+</mat-form-field>
+
+<mat-form-field appearance="outline" class="example-form-field">
+  <mat-label>Other input</mat-label>
+  <input matInput type="text" placeholder="Placeholder" />
+  <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
+</mat-form-field>
+
+<p *ngFor="let a of [1, 2, 3]">
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+  sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+  ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
+  magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+  takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+  invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+</p>
diff --git a/src/app/full-page-layouts/example-page-one/example-page-one.component.scss b/src/app/full-page-layouts/example-page-one/example-page-one.component.scss
new file mode 100644
index 00000000..55dcc576
--- /dev/null
+++ b/src/app/full-page-layouts/example-page-one/example-page-one.component.scss
@@ -0,0 +1,3 @@
+.example-form-field {
+  width: 200px;
+}
diff --git a/src/app/full-page-layouts/example-page-one/example-page-one.component.ts b/src/app/full-page-layouts/example-page-one/example-page-one.component.ts
new file mode 100644
index 00000000..39085398
--- /dev/null
+++ b/src/app/full-page-layouts/example-page-one/example-page-one.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example-page-one',
+  templateUrl: './example-page-one.component.html',
+  styleUrls: ['./example-page-one.component.scss'],
+})
+export class ExamplePageOneComponent {
+  value = 'Clear me';
+}
diff --git a/src/app/full-page-layouts/example-page-two/example-page-two.component.html b/src/app/full-page-layouts/example-page-two/example-page-two.component.html
new file mode 100644
index 00000000..4e9f8082
--- /dev/null
+++ b/src/app/full-page-layouts/example-page-two/example-page-two.component.html
@@ -0,0 +1,11 @@
+<h2>Page Two</h2>
+
+<p *ngFor="let a of [1, 2, 3]">
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+  sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+  ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
+  magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+  takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+  invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+</p>
diff --git a/src/app/component-demos/page-layouts/page-layouts.component.scss b/src/app/full-page-layouts/example-page-two/example-page-two.component.scss
similarity index 100%
rename from src/app/component-demos/page-layouts/page-layouts.component.scss
rename to src/app/full-page-layouts/example-page-two/example-page-two.component.scss
diff --git a/src/app/full-page-layouts/example-page-two/example-page-two.component.ts b/src/app/full-page-layouts/example-page-two/example-page-two.component.ts
new file mode 100644
index 00000000..7f7e3a1b
--- /dev/null
+++ b/src/app/full-page-layouts/example-page-two/example-page-two.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example-page-two',
+  templateUrl: './example-page-two.component.html',
+  styleUrls: ['./example-page-two.component.scss'],
+})
+export class ExamplePageTwoComponent {}
diff --git a/src/app/full-page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss b/src/app/full-page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss
index dc450bd3..c47e1e50 100644
--- a/src/app/full-page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss
+++ b/src/app/full-page-layouts/flowbar-page-layout/flowbar-page-layout.component.scss
@@ -6,3 +6,7 @@
 mad-content-panel-container-content {
   height: 100%;
 }
+
+:host {
+  width: 100%;
+}
diff --git a/src/app/full-page-layouts/full-page-layouts-routing.module.ts b/src/app/full-page-layouts/full-page-layouts-routing.module.ts
index e00176c4..d9f83c4f 100644
--- a/src/app/full-page-layouts/full-page-layouts-routing.module.ts
+++ b/src/app/full-page-layouts/full-page-layouts-routing.module.ts
@@ -3,6 +3,9 @@ import { BasePageLayoutComponent } from './base-page-layout/base-page-layout.com
 import { RouterModule, Routes } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { FlowbarPageLayoutComponent } from './flowbar-page-layout/flowbar-page-layout.component';
+import { SidebarPageLayoutComponent } from './sidebar-page-layout/sidebar-page-layout.component';
+import { ExamplePageOneComponent } from './example-page-one/example-page-one.component';
+import { ExamplePageTwoComponent } from './example-page-two/example-page-two.component';
 
 const routes: Routes = [
   {
@@ -17,6 +20,24 @@ const routes: Routes = [
         path: 'flowbar-page-layout',
         component: FlowbarPageLayoutComponent,
       },
+      {
+        path: 'sidebar-page-layout',
+        component: SidebarPageLayoutComponent,
+        children: [
+          {
+            path: '1',
+            component: ExamplePageOneComponent,
+          },
+          {
+            path: '2',
+            component: ExamplePageTwoComponent,
+          },
+          {
+            path: '**',
+            redirectTo: '1',
+          },
+        ],
+      },
     ],
   },
 ];
diff --git a/src/app/full-page-layouts/full-page-layouts.component.html b/src/app/full-page-layouts/full-page-layouts.component.html
index 7ccdd09c..792c67f3 100644
--- a/src/app/full-page-layouts/full-page-layouts.component.html
+++ b/src/app/full-page-layouts/full-page-layouts.component.html
@@ -1,52 +1,42 @@
-<div class="fx fx-column">
-  <div class="fx">
+<div class="top-nav-bar">
+  <div class="top-main-nav">
     <mat-toolbar>
-      <mat-toolbar-row class="fx fx-stretch fx-row">
-        <div class="fx fx-stretch fx-row fx-gap-1em">
-          <!-- logo -->
-          <div class="page-toolbar"><a routerLink="/intro"> Project title</a></div>
+      <mat-toolbar-row>
+        <!-- logo -->
+        <div class="logo"><a routerLink="/intro"> Project title</a></div>
 
-          <div class="page-toolbar">
-            <button mat-button [matMenuTriggerFor]="layouts">
-              Layouts
-              <mat-icon>keyboard_arrow_down</mat-icon>
-            </button>
-            <mat-menu #layouts="matMenu">
-              <button mat-menu-item routerLink="base-page-layout">Base Pagelayout</button>
-              <button mat-menu-item routerLink="flowbar-page-layout">Flowbar Layout</button>
-            </mat-menu>
-          </div>
+        <button mat-button [matMenuTriggerFor]="layouts" class="drop-down">Layouts</button>
+        <mat-menu #layouts="matMenu">
+          <button mat-menu-item routerLink="base-page-layout">Base Pagelayout</button>
+          <button mat-menu-item routerLink="flowbar-page-layout">Flowbar Layout</button>
+          <button mat-menu-item routerLink="sidebar-page-layout">Sidebar Layout</button>
+        </mat-menu>
 
-          <div class="fx fx-space-between"></div>
+        <div class="flex-spacer"></div>
 
-          <div class="fx fx-end">
-            <div class="page-toolbar">
-              <!-- notifications button-->
-              <button mat-button>
-                <mat-icon matBadge="5" matBadgeSize="small" color="primary">notifications</mat-icon>
-              </button>
-              <button mat-button [matMenuTriggerFor]="applicationSwitch">
-                <mat-icon color="primary">apps</mat-icon>
-              </button>
-              <mat-menu #applicationSwitch="matMenu" xPosition="before">
-                <button mat-menu-item>Application 1</button>
-                <button mat-menu-item>Application 2</button>
-                <button mat-menu-item class="current-page">Application 3</button>
-              </mat-menu>
-              <button mat-button [matMenuTriggerFor]="accountMenu">
-                <mat-icon color="primary">account_circle</mat-icon>
-              </button>
-              <mat-menu #accountMenu="matMenu">
-                <button mat-menu-item>User Settings</button>
-                <button mat-menu-item>Logout</button>
-              </mat-menu>
-            </div>
-          </div>
-        </div>
+        <!--      <theme-picker></theme-picker>-->
+        <button mat-button>
+          <mat-icon class="material-icons-outlined" color="primary">notifications</mat-icon>
+          <!--          <mat-icon matBadge="5" matBadgeSize="small" color="primary">notifications</mat-icon>-->
+        </button>
+        <button mat-button [matMenuTriggerFor]="applicationSwitch" class="drop-down">
+          <mat-icon color="primary">apps</mat-icon>
+        </button>
+        <mat-menu #applicationSwitch="matMenu" xPosition="before">
+          <button mat-menu-item>Application 1</button>
+          <button mat-menu-item>Application 2</button>
+          <button mat-menu-item class="current-page">Application 3</button>
+        </mat-menu>
+        <button mat-button [matMenuTriggerFor]="accountMenu" class="drop-down">
+          <mat-icon class="material-icons-outlined" color="primary">account_circle</mat-icon>
+        </button>
+        <mat-menu #accountMenu="matMenu">
+          <button mat-menu-item>User Settings</button>
+          <button mat-menu-item>Logout</button>
+        </mat-menu>
       </mat-toolbar-row>
     </mat-toolbar>
   </div>
-  <div class="fx fx-fill">
-    <router-outlet></router-outlet>
-  </div>
 </div>
+
+<router-outlet></router-outlet>
diff --git a/src/app/full-page-layouts/full-page-layouts.module.ts b/src/app/full-page-layouts/full-page-layouts.module.ts
index 4392263e..0415dd93 100644
--- a/src/app/full-page-layouts/full-page-layouts.module.ts
+++ b/src/app/full-page-layouts/full-page-layouts.module.ts
@@ -31,12 +31,16 @@ import {
   FlowbarModule,
   NumericFieldModule,
   QuickListModule,
+  SidebarModule,
   TableModule,
   ThrottleClickModule,
 } from 'material-addons';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { ContentPanelModule } from '../../../projects/material-addons/src/lib/content-panel/content-panel.module';
+import { ContentPanelModule } from '../../../projects/material-addons/src/lib/layout/content-panel/content-panel.module';
 import { FlowbarPageLayoutComponent } from './flowbar-page-layout/flowbar-page-layout.component';
+import { SidebarPageLayoutComponent } from './sidebar-page-layout/sidebar-page-layout.component';
+import { ExamplePageOneComponent } from './example-page-one/example-page-one.component';
+import { ExamplePageTwoComponent } from './example-page-two/example-page-two.component';
 
 @NgModule({
   imports: [
@@ -74,7 +78,15 @@ import { FlowbarPageLayoutComponent } from './flowbar-page-layout/flowbar-page-l
     ThrottleClickModule,
     ContentPanelModule,
     FlowbarModule,
+    SidebarModule,
+  ],
+  declarations: [
+    FullPageLayoutsComponent,
+    BasePageLayoutComponent,
+    FlowbarPageLayoutComponent,
+    SidebarPageLayoutComponent,
+    ExamplePageOneComponent,
+    ExamplePageTwoComponent,
   ],
-  declarations: [FullPageLayoutsComponent, BasePageLayoutComponent, FlowbarPageLayoutComponent],
 })
 export class FullPageLayoutsModule {}
diff --git a/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.html b/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.html
new file mode 100644
index 00000000..b24519eb
--- /dev/null
+++ b/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.html
@@ -0,0 +1,31 @@
+<mad-main-container>
+  <mad-content-header>
+    <div class="flex-row align-items-center place-content-center-space-between">
+      <div class="flex-row align-items-center place-content-center fx-gap-1em">
+        <button mat-button>
+          <mat-icon color="primary" (click)="goToPreviousPage()">arrow_back</mat-icon>
+        </button>
+        <h2 class="title">Sidebar layout</h2>
+      </div>
+      <div class="flex-row align-items-center place-content-center fx-gap-1em">
+        <mad-icon-button>
+          <mat-icon color="primary">history</mat-icon>
+        </mad-icon-button>
+        <mad-outline-button>Action A</mad-outline-button>
+        <mad-outline-button color="warn">Action B</mad-outline-button>
+      </div>
+    </div>
+  </mad-content-header>
+  <mad-content-panel-container>
+    <mad-content-panel-container-sidebar>
+      <mad-sidebar>
+        <a mad-sidebar-item routerLink="/full-page-layouts/sidebar-page-layout/1" routerLinkActive="active-sidebar-item">Item 1</a>
+        <a mad-sidebar-item routerLink="/full-page-layouts/sidebar-page-layout/2" routerLinkActive="active-sidebar-item">Item 2</a>
+        <a mad-sidebar-item href="#">A very very long name is here</a>
+      </mad-sidebar>
+    </mad-content-panel-container-sidebar>
+    <mad-content-panel-container-content>
+      <router-outlet></router-outlet>
+    </mad-content-panel-container-content>
+  </mad-content-panel-container>
+</mad-main-container>
diff --git a/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss b/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss
new file mode 100644
index 00000000..b8c39122
--- /dev/null
+++ b/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.scss
@@ -0,0 +1,36 @@
+:host {
+  width: 100%;
+  height: 95%;
+  position: fixed;
+}
+
+.title {
+  font-weight: unset;
+  margin-top: 15px;
+}
+
+.fx-gap-1em {
+  gap: 1em;
+}
+
+.flex-row {
+  flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+}
+
+mad-content-panel-container-content {
+  height: 100%;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.place-content-center-space-between {
+  place-content: center space-between;
+}
+
+.place-content-center {
+  place-content: center;
+}
diff --git a/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts b/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts
new file mode 100644
index 00000000..5a2e3e09
--- /dev/null
+++ b/src/app/full-page-layouts/sidebar-page-layout/sidebar-page-layout.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-sidebar-page-layout',
+  templateUrl: './sidebar-page-layout.component.html',
+  styleUrls: ['./sidebar-page-layout.component.scss'],
+})
+export class SidebarPageLayoutComponent {
+  constructor(
+    private router: Router,
+    private location: Location,
+  ) {}
+
+  public goToPreviousPage(): void {
+    this.router.navigate([''], { skipLocationChange: true }).then((canRedirect) => {
+      if (canRedirect) {
+        this.location.back();
+      }
+    });
+  }
+}
diff --git a/src/app/home/link-card/link-card.component.scss b/src/app/home/link-card/link-card.component.scss
index 2b8a6ecd..f8b57710 100644
--- a/src/app/home/link-card/link-card.component.scss
+++ b/src/app/home/link-card/link-card.component.scss
@@ -3,6 +3,7 @@
 }
 
 .landing-page-list-card-title {
+  margin: 0 0 0 -16px;
   padding-top: 10px;
 }
 
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 686d9f11..0c4fc925 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -44,7 +44,9 @@
   "layouts": {
     "title": "Layout",
     "demos": {
-      "page-layouts": "Page Layouts"
+      "base-page-layout": "Base Layout",
+      "flowbar-page-layout": "Flowbar Layout",
+      "sidebar-page-layout": "Sidebar Layout"
     }
   }
 }
diff --git a/src/navigation-entries.ts b/src/navigation-entries.ts
index f42e1f5d..e393e3a5 100644
--- a/src/navigation-entries.ts
+++ b/src/navigation-entries.ts
@@ -23,10 +23,24 @@ export class NavigationEntries {
       roles: ['TEST', 'TEST2'],
       children: [
         {
-          name: 'page layouts',
-          i18n: 'layouts.demos.page-layouts',
+          name: 'base layout',
+          i18n: 'layouts.demos.base-page-layout',
           matIcon: 'insert_drive_file',
-          route: '/page-layouts',
+          route: '/base-page-layout',
+          roles: ['TEST3'],
+        },
+        {
+          name: 'flowbar layout',
+          i18n: 'layouts.demos.flowbar-page-layout',
+          matIcon: 'insert_drive_file',
+          route: '/flowbar-page-layout',
+          roles: ['TEST3'],
+        },
+        {
+          name: 'sidebar layout',
+          i18n: 'layouts.demos.sidebar-page-layout',
+          matIcon: 'insert_drive_file',
+          route: '/sidebar-page-layout',
           roles: ['TEST3'],
         },
       ],