diff --git a/.angular-cli.json b/.angular-cli.json
index 8283fc2..d7d652a 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -19,7 +19,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "of",
       "styles": [
-        "styles.scss"
+        "styles.scss",
+        "../node_modules/@covalent/core/common/platform.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
diff --git a/package.json b/package.json
index c5c1c10..8641694 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,11 @@
     "@angular/platform-browser": "^5.2.1",
     "@angular/platform-browser-dynamic": "^5.2.1",
     "@angular/router": "^5.2.1",
+    "@covalent/core": "^1.0.0-rc.4",
+    "@covalent/dynamic-forms": "^1.0.0-rc.4",
+    "@covalent/highlight": "^1.0.0-rc.4",
+    "@covalent/http": "^1.0.0-rc.4",
+    "@covalent/markdown": "^1.0.0-rc.4",
     "@ngrx/core": "^1.2.0",
     "@ngrx/effects": "^5.0.1",
     "@ngrx/router-store": "^5.0.1",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 36fa40e..cbd6b0c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,6 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppReducerModule } from './app-reducer.module';
 import { MaterialModule } from './commons/ui/material/material.module';
+import { CovalentModule } from './commons/ui/covalent/covalent.module';
 
 import { AppComponent } from './app.component';
 
@@ -19,6 +20,7 @@ import { AppComponent } from './app.component';
     AppRoutingModule,
     AppReducerModule,
     MaterialModule,
+    CovalentModule,
   ],
   bootstrap: [AppComponent]
 })
diff --git a/src/app/commons/layouts/layouts.module.ts b/src/app/commons/layouts/layouts.module.ts
index a7d69f8..2227898 100644
--- a/src/app/commons/layouts/layouts.module.ts
+++ b/src/app/commons/layouts/layouts.module.ts
@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { SidebarComponent } from './sidebar/sidebar.component';
 
 @NgModule({
   imports: [
     CommonModule
   ],
-  declarations: []
+  declarations: [SidebarComponent]
 })
 export class LayoutsModule { }
diff --git a/src/app/commons/layouts/sidebar/menu-element.ts b/src/app/commons/layouts/sidebar/menu-element.ts
new file mode 100644
index 0000000..ae49fc7
--- /dev/null
+++ b/src/app/commons/layouts/sidebar/menu-element.ts
@@ -0,0 +1,312 @@
+export const menus = [
+    {
+        'name': 'Dashboard',
+        'icon': 'dashboard',
+        'link': false,
+        'open': false,
+        'chip': { 'value': 1, 'color': 'accent' },
+        'sub': [
+            {
+                'name': 'Dashboard',
+                'link': '/auth/dashboard',
+                'icon': 'dashboard',
+                'chip': false,
+                'open': true,
+            }
+
+        ]
+    },
+    {
+        'name': 'Material Widget',
+        'icon': 'widgets',
+        'link': false,
+        'open': false,
+        'sub': [
+            {
+                'name': 'Buttons',
+                'link': 'material-widgets/buttons',
+                'icon': 'indeterminate_check_box',
+                'chip': false,
+                'open': false,
+            },
+            {
+                'name': 'List',
+                'link': 'material-widgets/list',
+                'icon': 'list',
+                'chip': false,
+                'open': false,
+            },
+            {
+
+                'name': 'Stepper',
+                'link': 'material-widgets/stepper',
+                'icon': 'view_week',
+                'chip': false,
+                'open': false,
+
+            },
+            {
+                'name': 'Expansion',
+                'link': 'material-widgets/expansion',
+                'icon': 'web_aaset',
+                'chip': false,
+                'open': false,
+            },
+            {
+                'name': 'Progress Spinner',
+                'link': 'material-widgets/spinner',
+                'icon': 'cached',
+                'chip': false,
+                'open': false,
+            },
+            {
+                'name': 'Cards',
+                'link': 'material-widgets/cards',
+                'icon': 'crop_16_9',
+                'chip': false,
+                'open': false,
+            },
+            {
+                'name': 'Icons',
+                'link': 'material-widgets/icons',
+                'icon': 'gif',
+                'chip': false,
+                'open': false,
+            },
+            {
+
+                'name': 'AutoComplete',
+                'link': 'material-widgets/autocomplete',
+                'icon': 'get_app',
+                'chip': false,
+                'open': false,
+            },
+            {
+                'name': 'CheckBox',
+                'link': 'material-widgets/checkbox',
+                'icon': 'check_box',
+                'chip': false,
+                'open': false,
+            },
+            {
+                'name': 'DatePicker',
+                'link': 'material-widgets/datepicker',
+                'icon': 'date_range',
+                'chip': false,
+                'open': false,
+            },
+
+            {
+                'name': 'Slider',
+                'link': 'material-widgets/slider',
+                'icon': 'keyboard_tab',
+                'chip': false,
+                'open': false,
+
+            },
+            {
+                'name': 'Slide Toggle',
+                'link': 'material-widgets/slide-toggle',
+                'icon': 'album',
+                'chip': false,
+                'open': false,
+
+
+            },
+            {
+                'name': 'Menu',
+                'icon': 'menu',
+                'link': 'material-widgets/menu',
+                'chip': false,
+                'open': false,
+            },
+            {
+                'name': 'Progress Bar',
+                'link': 'material-widgets/progress-bar',
+                'icon': 'trending_flat',
+                'chip': false,
+                'open': false,
+
+            },
+            {
+                'name': 'Input',
+                'icon': 'input',
+                'link': 'material-widgets/input',
+                'open': false,
+            },
+            {
+                'name': 'Radio',
+                'icon': 'radio_button_checked',
+                'link': 'material-widgets/radio',
+                'chip': false,
+                'open': false,
+            },
+            {
+                'name': 'Select',
+                'icon': 'select_all',
+                'link': 'material-widgets/select',
+                'open': false,
+            },
+        ]
+    },
+    // {
+    //     'name'   : 'Forms',
+    //     'icon'   : 'mode_edit',
+    //     'open'   : false,
+    //     'link'   : false,
+    //     'sub'    :  [
+    //                     {
+    //                         'name': 'Template Driven',
+    //                         'icon': 'mode_edit',
+    //                         'open'   : false,
+    //                         'link':'forms/template_forms'
+    //                     },
+    //                     {
+    //                         'name': 'Reactive Forms',
+    //                         'icon': 'text_fields',
+    //                         'open'   : false,
+    //                         'link':'forms/reactive_forms'
+    //                     }
+    //                 ]
+    // },
+    {
+        'name': 'Tables',
+        'icon': 'list',
+        'link': false,
+        'open': false,
+        'chip': { 'value': 2, 'color': 'accent' },
+        'sub': [
+            {
+                'name': 'Fixed',
+                'icon': 'filter_list',
+                'link': 'tables/fixed',
+                'open': false,
+            },
+            {
+                'name': 'Feature',
+                'icon': 'done_all',
+                'link': 'tables/featured',
+                'open': false,
+            },
+            {
+                'name': 'Responsive Tables',
+                'icon': 'filter_center_focus',
+                'link': 'tables/responsive',
+                'open': false,
+            }
+        ]
+
+    },
+    {
+        'name': 'Guarded Routes',
+        'icon': 'mode_edit',
+        'link': '/auth/guarded-routes',
+        'open': false,
+
+
+    }, {
+        'name': 'Scrumboard',
+        'open': false,
+        'link': '/auth/scrumboard',
+        'icon': 'grade',
+    }, {
+        'name': 'Applications',
+        'icon': 'view_module',
+        'open': false,
+        'link': false,
+        'sub': [
+            {
+                'name': 'chat',
+                'icon': 'chat',
+                'link': 'chats/chat',
+                'open': false,
+            },
+            {
+                'name': 'mail',
+                'icon': 'mail',
+                'link': 'mail/mail',
+                'open': false,
+            },
+            {
+                'name': 'Editor',
+                'icon': 'editor',
+                'link': 'editor/editor',
+                'open': false,
+            }
+        ]
+    }
+    , {
+        'name': 'Pages',
+        'icon': 'content_copy',
+        'open': false,
+        'link': false,
+        'sub': [
+            {
+                'name': 'Login',
+                'icon': 'work',
+                'open': false,
+                'link': '../login',
+            }, {
+                'name': 'Services',
+                'icon': 'local_laundry_service',
+                'open': false,
+                'link': 'pages/services',
+            }, {
+                'name': 'Contact',
+                'icon': 'directions',
+                'open': false,
+                'link': 'pages/contact'
+            }
+        ]
+    }
+    , {
+
+        'name': 'Charts',
+        'icon': 'pie_chart_outlined',
+        'open': false,
+        'link': false,
+        'sub': [
+            {
+                'name': 'chartjs',
+                'icon': 'view_list',
+                'link': 'charts/chartjs',
+                'open': false,
+
+            },
+            {
+                'name': 'ngx-chart',
+                'icon': 'show_chart',
+                'open': false,
+                'link': 'charts/ngx-charts',
+            },
+            {
+                'name': 'nvd3',
+                'icon': 'pie_chart',
+                'open': false,
+                'link': 'charts/nvd3-charts',
+            }
+
+        ]
+    }, {
+        'name': 'maps',
+        'icon': 'map',
+        'open': false,
+        'link': false,
+        'sub': [
+            {
+                'name': 'google-map',
+                'icon': 'directions',
+                'link': 'maps/googlemap',
+                'open': false,
+            },
+            {
+                'name': 'leaflet-map',
+                'icon': 'directions',
+                'link': 'maps/leafletmap',
+                'open': false,
+            }
+        ]
+    }
+
+
+];
diff --git a/src/app/commons/layouts/sidebar/sidebar.component.html b/src/app/commons/layouts/sidebar/sidebar.component.html
new file mode 100644
index 0000000..b9f3931
--- /dev/null
+++ b/src/app/commons/layouts/sidebar/sidebar.component.html
@@ -0,0 +1 @@
+<div>sidebar</div>
\ No newline at end of file
diff --git a/src/app/commons/layouts/sidebar/sidebar.component.scss b/src/app/commons/layouts/sidebar/sidebar.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/commons/layouts/sidebar/sidebar.component.spec.ts b/src/app/commons/layouts/sidebar/sidebar.component.spec.ts
new file mode 100644
index 0000000..f29709f
--- /dev/null
+++ b/src/app/commons/layouts/sidebar/sidebar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/commons/layouts/sidebar/sidebar.component.ts b/src/app/commons/layouts/sidebar/sidebar.component.ts
new file mode 100644
index 0000000..48c616d
--- /dev/null
+++ b/src/app/commons/layouts/sidebar/sidebar.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { menus } from './menu-element';
+
+@Component({
+  selector: 'of-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss']
+})
+export class SidebarComponent implements OnInit {
+
+  @Input() iconOnly = false;
+  public menus = menus;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/commons/ui/covalent/covalent.module.ts b/src/app/commons/ui/covalent/covalent.module.ts
new file mode 100644
index 0000000..c1628c2
--- /dev/null
+++ b/src/app/commons/ui/covalent/covalent.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+
+import { CovalentLayoutModule } from '@covalent/core/layout';
+import { CovalentStepsModule } from '@covalent/core/steps';
+import { CovalentHighlightModule } from '@covalent/highlight';
+import { CovalentMarkdownModule } from '@covalent/markdown';
+import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
+
+@NgModule({
+    imports: [
+        CovalentLayoutModule,
+        CovalentStepsModule,
+        CovalentHighlightModule,
+        CovalentMarkdownModule,
+        CovalentDynamicFormsModule,
+    ],
+})
+
+export class CovalentModule { }
diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html
index 0971530..a9e91d7 100644
--- a/src/app/pages/pages.component.html
+++ b/src/app/pages/pages.component.html
@@ -1,4 +1,4 @@
 <div>header</div>
-<div>sidebar</div>
+<of-sidebar></of-sidebar>
 <router-outlet></router-outlet>
 <div>footer</div>
\ No newline at end of file
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index 90f0454..b63d680 100644
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@@ -2,14 +2,20 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PagesComponent } from './pages.component';
 import { PagesRoutingModule } from './pages-routing.module';
+import { SidebarComponent } from 'app/commons/layouts/sidebar/sidebar.component';
+import { CovalentModule } from 'app/commons/ui/covalent/covalent.module';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
 
 @NgModule({
   imports: [
     CommonModule,
     PagesRoutingModule,
+    CovalentModule,
+    MaterialModule
   ],
   declarations: [
-    PagesComponent
+    PagesComponent,
+    SidebarComponent
   ]
 })
 export class PagesModule { }
diff --git a/yarn.lock b/yarn.lock
index d200327..503ebd8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -164,6 +164,38 @@
   dependencies:
     tslib "^1.7.1"
 
+"@covalent/core@^1.0.0-rc.4":
+  version "1.0.0-rc.4"
+  resolved "https://registry.yarnpkg.com/@covalent/core/-/core-1.0.0-rc.4.tgz#11990106c38233dc4ba8bc6d295847732cd94351"
+  dependencies:
+    tslib "^1.7.1"
+
+"@covalent/dynamic-forms@^1.0.0-rc.4":
+  version "1.0.0-rc.4"
+  resolved "https://registry.yarnpkg.com/@covalent/dynamic-forms/-/dynamic-forms-1.0.0-rc.4.tgz#efc2b8ae059d99fabe23f27cf4f2531df2558b29"
+  dependencies:
+    "@covalent/core" "^1.0.0-rc.4"
+
+"@covalent/highlight@^1.0.0-rc.4":
+  version "1.0.0-rc.4"
+  resolved "https://registry.yarnpkg.com/@covalent/highlight/-/highlight-1.0.0-rc.4.tgz#1d3c4c17a0aa69cbaf6ad36ae10fafc517997b45"
+  dependencies:
+    highlight.js "9.11.0"
+    tslib "^1.7.1"
+
+"@covalent/http@^1.0.0-rc.4":
+  version "1.0.0-rc.4"
+  resolved "https://registry.yarnpkg.com/@covalent/http/-/http-1.0.0-rc.4.tgz#e600b2f5066cf4a5d36ebf018a3473673f2615cd"
+  dependencies:
+    tslib "^1.7.1"
+
+"@covalent/markdown@^1.0.0-rc.4":
+  version "1.0.0-rc.4"
+  resolved "https://registry.yarnpkg.com/@covalent/markdown/-/markdown-1.0.0-rc.4.tgz#94e8efbf8ffb04907ea4e8d84f30d33592ebafea"
+  dependencies:
+    showdown "1.6.4"
+    tslib "^1.7.1"
+
 "@ngrx/core@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ngrx/core/-/core-1.2.0.tgz#882b46abafa2e0e6d887cb71a1b2c2fa3e6d0dc6"
@@ -2985,6 +3017,10 @@ he@1.1.x:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
 
+highlight.js@9.11.0:
+  version "9.11.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.11.0.tgz#47f98c7399918700db2caf230ded12cec41a84ae"
+
 hipchat-notifier@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/hipchat-notifier/-/hipchat-notifier-1.1.0.tgz#b6d249755437c191082367799d3ba9a0f23b231e"
@@ -6111,6 +6147,12 @@ shell-quote@^1.6.1:
     array-reduce "~0.0.0"
     jsonify "~0.0.0"
 
+showdown@1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/showdown/-/showdown-1.6.4.tgz#056bbb654ecdb8d8643ae12d6d597893ccaf46c6"
+  dependencies:
+    yargs "^6.6.0"
+
 signal-exit@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -7377,7 +7419,7 @@ yargs-parser@^7.0.0:
   dependencies:
     camelcase "^4.1.0"
 
-yargs@6.6.0:
+yargs@6.6.0, yargs@^6.6.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
   dependencies: