diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
index 428701bc27..6ac5c09235 100644
--- a/demo/assets/css/style.css
+++ b/demo/assets/css/style.css
@@ -1,252 +1,612 @@
-/*!
- * Bootstrap Docs (http://getbootstrap.com)
- * Copyright 2011-2014 Twitter, Inc.
- * Licensed under the Creative Commons Attribution 3.0 Unported License. For
- * details, see http://creativecommons.org/licenses/by/3.0/.
- */
-
-.h1, .h2, .h3, h1, h2, h3 {
-  margin-top: 20px;
-  margin-bottom: 10px;
+body {
+  font-family: 'Roboto', sans-serif;
+  background-color: #f5f9fb;
 }
 
-.h1, h1 {
-  font-size: 36px;
+.text-red {
+  color: #cd151e;
 }
 
-.btn-group-lg > .btn, .btn-lg {
-  font-size: 18px;
+/************* START TOP MENU **************/
+
+#top-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: #1d1d2b;
+  z-index: 2;
 }
 
-section {
-  padding-top: 30px;
+#top-menu > div:not(.menu-right) {
+  float: left;
 }
 
-.bd-pageheader {
-  margin-top: 51px;
+#top-menu .menu-right {
+  float: right;
 }
 
-.page-header {
-  padding-bottom: 9px;
-  margin: 10px 0 40px;
-  border-bottom: 1px solid #eee;
+#top-menu .menu-right > div {
+  float: left;
 }
 
-.navbar-default .navbar-nav > li > a {
-  color: #777;
+#top-menu .title {
+  border-right: 1px solid #191924;
+  min-width: 270px;
+  cursor: pointer;
 }
 
-.navbar {
-  padding: 0;
+#top-menu .title h2 {
+  font-size: 22px;
+  padding: 22px 10px;
+  font-weight: 500;
+  color: #fff;
+  margin: 0;
 }
 
-.navbar-nav .nav-item {
-  margin-left: 0 !important;
+#top-menu .top-menu-container {
+  margin-left: 13px;
 }
 
-.nav > li > a {
-  position: relative;
-  display: block;
-  padding: 10px 15px;
+#top-menu .top-menu-container ul {
+  overflow: hidden;
+  margin: 0;
 }
 
-.nav .navbar-brand {
+#top-menu .top-menu-container li {
   float: left;
-  height: 50px;
-  padding: 15px 15px;
+}
+
+#top-menu .top-menu-container li a {
+  text-decoration: none;
+  display: inline-block;
+  padding: 24px 15px;
   font-size: 18px;
-  line-height: 20px;
-  margin-right: 0 !important;
+  font-weight: 300;
+  color: #fff;
 }
 
-.navbar-brand {
-  color: #777;
-  float: left;
+#top-menu .top-menu-container li a:hover {
+  color: #cd151e;
+}
+
+#top-menu .logo {
+  margin: 3px 25px 11px 0;
+}
+
+#top-menu .logo img {
   height: 50px;
-  padding: 15px 15px;
-  font-size: 18px;
-  line-height: 20px;
 }
 
-.navbar-toggler {
-  margin-top: 8px;
-  margin-right: 15px;
+#top-menu .git-hub {
+  margin: 22px 0;
+}
+
+#top-menu .git-hub iframe {
+  height: 20px;
+  width: 95px;
+}
+
+#mobile-top-menu,
+#mobile-main-menu {
+  display: none;
+  cursor: pointer;
 }
 
-.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
-  color: #333;
-  background-color: transparent;
+#mobile-main-menu {
+  padding: 24px 15px;
 }
 
-.bd-pageheader, .bs-docs-masthead {
+#mobile-top-menu {
+  padding: 24px 30px 24px 10px;
+}
+
+#mobile-main-menu img,
+#mobile-top-menu img {
+  height: 16px;
+}
+
+#top-menu #top-menu-link {
+  -webkit-transition: max-height .5s ease;
+  -moz-transition: max-height .5s ease;
+  -ms-transition: max-height .5s ease;
+  -o-transition: max-height .5s ease;
+  transition: max-height .5s ease;
+  overflow: hidden;
+}
+
+#top-menu #top-menu-link.active {
+  max-height: 500px;
+}
+
+/************* END TOP MENU **************/
+
+/************* START MAIN MENU **************/
+
+#main-menu {
+  width: 270px;
+  height: calc(100% - 66px);
+  float: left;
+  background-color: #20202f;
+  margin-top: 65px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  -webkit-transition: left .5s ease;
+  -moz-transition: left .5s ease;
+  -ms-transition: left .5s ease;
+  -o-transition: left .5s ease;
+  transition: left .5s ease;
+}
+
+#main-menu.active {
+  left: 0;
+}
+
+#main-menu > div {
+  border-top: 1px solid #191924;
+}
+
+#main-menu .menu-search {
   position: relative;
-  padding: 30px 0;
-  color: #cdbfe3;
-  text-align: center;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, .1);
-  background-color: #6f5499;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499));
-  background-image: -webkit-linear-gradient(top, #563d7c 0, #6f5499 100%);
-  background-image: -o-linear-gradient(top, #563d7c 0, #6f5499 100%);
-  background-image: linear-gradient(to bottom, #563d7c 0, #6f5499 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
-  background-repeat: repeat-x;
-}
-
-.bd-pageheader {
-  margin-bottom: 40px;
-  font-size: 20px;
-}
-
-.bd-pageheader h1 {
-  margin-top: 0;
+  padding: 10px;
+}
+
+#main-menu .menu-search input {
+  border: 1px solid #babfc4;
+  font-size: 14px;
+  color: #a4a4b0;
+  padding: 8px 10px 8px 30px;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+
+#main-menu .menu-search:before {
+  content: "";
+  background: url("../images/search-doc.png") no-repeat 50% 50%;
+  background-size: contain;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 19px;
+  left: 17px;
+}
+
+#main-menu .menu-search input:focus,
+#main-menu .menu-search input:active {
+  outline: 0;
+}
+
+#main-menu .main-menu-container {
+  overflow-y: auto;
+  height: calc(100% - 56px);
+}
+
+#main-menu .section .item h4 {
+  position: relative;
+}
+
+#main-menu .section .item h4 .arrow {
+  display: block;
+  width: 11px;
+  height: 12px;
+  background: url("../images/repa-down.png") no-repeat bottom left;
+  background-size: contain !important;
+  position: absolute;
+  top: calc(50% - 6px);
+  right: 0;
+}
+
+#main-menu .section .item.active h4 .arrow {
+  background: url("../images/repa-up.png") no-repeat top left;
+}
+
+#main-menu .menu-content {
+  padding: 0 15px 0 10px;
+}
+
+#main-menu .section h3 {
+  font-size: 16px;
+  font-weight: 300;
+  color: #a4a4b0;
+  text-transform: uppercase;
+  margin: 15px 0;
+  cursor: pointer;
+
+  -webkit-transition: all .2s ease-out;
+  -moz-transition: all .2s ease-out;
+  -o-transition: all .2s ease-out;
+  transition: all .2s ease-out;
+}
+
+#main-menu .section h3:hover,
+#main-menu .section.active h3 {
   color: #fff;
 }
 
-.bd-pageheader p {
-  margin-bottom: 0;
+#main-menu .section .item {
+  margin-bottom: 13px;
+  margin-left: 15px;
+  display: none;
+}
+
+#main-menu .section:first-child .item {
+  display: none !important;
+}
+
+#main-menu .section.active .item {
+  display: block;
+}
+
+#main-menu .section h4 {
+  color: #a4a4b0;
+  font-size: 16px;
+  cursor: pointer;
   font-weight: 300;
-  line-height: 1.4;
+  -webkit-transition: all .2s ease-out;
+  -moz-transition: all .2s ease-out;
+  -o-transition: all .2s ease-out;
+  transition: all .2s ease-out;
+}
+
+#main-menu .section h4:hover {
+  color: #fff;
+}
+
+#main-menu .section .item h4 .arrow {
+  width: 8px;
+  height: 9px;
+  top: calc(50% - 5px);
 }
 
-.bd-pageheader .btn {
-  margin: 10px 0;
+#main-menu .section ul {
+  display: none;
 }
 
-.scrollable-menu .nav-link {
-  color: #337ab7;
+#main-menu .section .item.active ul {
+  display: block;
+  margin: 5px 0 -5px;
+  padding: 0 0 0 5px;
+  background: url("../images/border-dot.png") repeat-y 5px 0;
+}
+
+#main-menu .section .item li {
+  color: #a4a4b0;
   font-size: 14px;
+  padding: 0 0 0 12px;
+  margin: 14px 0;
+  font-family: 'Source Code Pro';
+  border-left: 1px solid transparent;
+  list-style: none;
 }
 
-.scrollable-menu .nav-link:hover {
-  color: #23527c;
-  background-color: #eee;
+#main-menu .section .item li.active,
+#main-menu .section .item li:hover {
+  color: #cd151e;
+  border-left: 1px solid #cd151e;
 }
 
-@media (min-width: 992px) {
-  .bd-pageheader h1, .bd-pageheader p {
-    margin-right: 380px;
-  }
+#main-menu .section .item li:not(.active):hover {
+  cursor: pointer;
 }
 
-@media (min-width: 768px) {
-  .bd-pageheader {
-    padding-top: 60px;
-    padding-bottom: 60px;
-    font-size: 24px;
-    text-align: left;
-  }
+/************* END MAIN MENU **************/
 
-  .bd-pageheader h1 {
-    font-size: 60px;
-    line-height: 1;
-  }
+/************* START MAIN **************/
 
-  .navbar-nav > li > a.nav-link {
-    padding-top: 15px;
-    padding-bottom: 15px;
-    font-size: 14px;
-  }
+#main {
+  width: calc(100% - 270px);
+  height: 100%;
+  float: right;
+  margin-top: 65px;
+  padding: 30px 30px 0;
+  box-sizing: border-box;
+}
 
-  .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
-    margin-left: -15px;
-  }
+#main .content-header {
+  border-left: 3px solid #babfc4;
+  padding-left: 15px;
 }
 
-@media (max-width: 767px) {
-  .hidden-xs {
-    display: none !important;
-  }
+#main .content-header h2 {
+  font-size: 34px;
+  font-weight: 700;
+  color: #1d1d2b;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+  line-height: 23px;
+}
 
-  .navbar .container {
-    width: 100%;
-    max-width: 100%;
-  }
-  .navbar .container,
-  .navbar .container .navbar-header {
-    padding: 0;
-    margin: 0;
-  }
+#main .content-header h2 a {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 4px;
+  line-height: 0;
 }
 
-@media (max-width: 400px) {
-  code, kbd {
-    font-size: 60%;
-  }
+#main .content-header h2 img {
+  width: 15px;
+  vertical-align: top;
 }
 
-/**
-    * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
-    *
-    * To overcome this, create media queries that target the width, height, and orientation of iOS devices.
-    * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
-    * the height of element '.scrollable-menu' —which is a full width and height cover image.
-    *
-    * iOS Resolution Quick Reference: http://www.iosres.com/
-    */
+#main .content-header p {
+  font-size: 18px;
+  color: #1d1d2b;
+  font-weight: 300;
+  line-height: 30px;
+}
 
-.scrollable-menu {
-  height: 90vh;
-  width: 100vw;
-  overflow-x: hidden;
-  padding: 0 0 20px;
+#main .content-box {
+  margin-top: 20px;
+  padding: 30px;
+  box-sizing: border-box;
+  background-color: #fff;
+  margin-bottom: 30px;
 }
 
-/**
- * iPad with portrait orientation.
- */
-@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
-  .scrollable-menu {
-    height: 1024px !important;
-  }
+/************* END MAIN **************/
+
+/************* START CONTENT **************/
+
+#content p,
+#content li,
+#content .accordion h4 {
+  font-weight: 300;
+  font-size: 16px;
+  color: #1d1d2b;
 }
 
-/**
- * iPad with landscape orientation.
- */
-@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
-  .scrollable-menu {
-    height: 768px !important;
-  }
+#content p {
+  line-height: 30px;
 }
 
-/**
- * iPhone 5
- * You can also target devices with aspect ratio.
- */
-@media screen and (device-aspect-ratio: 40/71) {
-  .scrollable-menu {
-    height: 500px !important;
-  }
+#content p,
+#content li {
+  line-height: 30px;
 }
 
-.navbar-default .navbar-toggle .icon-bar {
-  background-color: #888;
+#content li a,
+#content p a {
+  color: #0808df;
+  text-decoration: none;
 }
 
-.navbar-toggle:focus {
-  outline: 0
+#content .bash-code {
+  color: #55555c !important;
+  padding: 0 5px;
+  border-radius: 2px;
+  background-color: #eef5f9 !important;
 }
 
-.navbar-toggle .icon-bar {
-  display: block;
-  width: 22px;
-  height: 2px;
-  border-radius: 1px
+#content .code-container {
+  border-radius: 2px;
+  margin: 15px 0;
+  background-color: #eef5f9 !important;
+  padding: 15px;
+}
+
+#content .code-container:empty {
+  display: none;
+}
+
+#content .code-style {
+  font-size: 16px;
+  color: #1d1d2b;
 }
 
-.navbar-toggle .icon-bar + .icon-bar {
-  margin-top: 4px
+#content .bash-code,
+#content .code-container,
+#content .code-style {
+  font-family: 'Source Code Pro' !important;
 }
 
-pre {
-  white-space: pre-wrap;       /* CSS 3 */
-  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-  white-space: -pre-wrap;      /* Opera 4-6 */
-  white-space: -o-pre-wrap;    /* Opera 7 */
-  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+#content .section:not(:first-child) {
+  border-top: 1px solid #babfc4;
+  padding: 30px 0 0;
+  margin: 30px 0 0;
+}
+
+#content .section > h3 {
+  color: #1d1d2b;
+  font-size: 28px;
+  font-weight: 500;
+  margin-bottom: 10px;
 }
 
-#getting-started {
+#content .list-container ul {
   padding: 0;
 }
+
+#content .list-container ul li {
+  list-style: none;
+}
+
+#content .list-container ul li:before {
+  content: '•';
+  display: inline-block;
+  margin-right: 5px;
+}
+
+#content .list-container ol {
+  list-style: decimal;
+  margin-left: 18px;
+}
+
+#content .accordion {
+  position: relative;
+}
+
+#content .accordion:not(:first-child) {
+  height: 90vh;
+  border-top: 1px dashed #babfc4;
+  padding: 30px 35px 0;
+  margin-top: 30px;
+}
+
+#content .accordion:first-child {
+  padding: 0 35px;
+  margin-top: 30px;
+}
+
+#content .accordion .accordion-header {
+  color: #55555c;
+  cursor: pointer;
+}
+
+#content .accordion .accordion-header h4 {
+  font-family: 'Source Code Pro';
+  font-size: 16px;
+}
+
+#content .accordion .accordion-body {
+  display: none;
+  margin-top: 10px;
+}
+
+#content .accordion.active .accordion-body {
+  display: block;
+}
+
+#content .accordion.notEmpty:before {
+  content: '';
+  background-image: url('../images/anactive.svg');
+  background-size: 8px 13px;
+  width: 8px;
+  height: 13px;
+  position: absolute;
+  top: 32px;
+  left: 15px;
+}
+
+#content .accordion.notEmpty:first-child:before {
+  top: 2px;
+}
+
+#content .accordion.active:before {
+  content: '';
+  background-image: url('../images/active.svg');
+  background-size: 12px 9px;
+  width: 12px;
+  height: 9px;
+  top: 36px;
+}
+
+#content .accordion.active:after {
+  content: '';
+  width: 1px;
+  height: calc(100% - 55px);
+  position: absolute;
+  bottom: 0;
+  left: 20.5px;
+  background-color: #20202f;
+}
+
+#content .item > h4 {
+  font-size: 22px;
+  margin: 20px 0 15px;
+}
+
+/************* END CONTENT **************/
+
+@media (max-width: 1020px) {
+  #top-menu {
+    border-bottom: 1px solid #191924;
+  }
+
+  #top-menu .logo {
+    display: none;
+  }
+
+  #top-menu .top-menu-container {
+    position: fixed;
+    background-color: #1d1d2b;
+    left: 0;
+    right: 0;
+    top: 67px;
+    margin: 0;
+    max-height: 0;
+  }
+
+  #top-menu .title {
+    max-width: 300px;
+    min-width: 1px;
+  }
+
+  #top-menu .top-menu-container ul {
+    padding: 10px 0;
+  }
+
+  #top-menu .top-menu-container li {
+    float: none;
+  }
+
+  #top-menu .top-menu-container li a {
+    display: block;
+    padding: 10px 10px;
+  }
+
+  #mobile-top-menu,
+  #mobile-main-menu {
+    display: inline-block;
+  }
+
+  #main-menu {
+    left: -100%;
+  }
+
+  #main {
+    width: 100%;
+    float: none;
+  }
+}
+
+@media (max-width: 600px) {
+  #top-menu .title {
+    width: 100%;
+    max-width: 100%;
+    text-align: center;
+  }
+
+  #top-menu .title h2 {
+    padding: 15px;
+  }
+
+  #top-menu .menu-right {
+    float: left;
+    width: calc(100% - 50px);
+    text-align: center;
+    padding-right: 50px;
+    box-sizing: border-box;
+  }
+
+  #top-menu .git-hub {
+    display: inline-block;
+    float: none !important;
+    margin: 15px 0;
+  }
+
+  #top-menu #mobile-top-menu {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 15px 30px 15px 10px;
+  }
+
+  #mobile-main-menu {
+    padding: 17px 15px;
+  }
+
+  #top-menu .top-menu-container {
+    top: 105px;
+  }
+
+  #main-menu {
+    height: calc(100% - 105px);
+  }
+
+  #main {
+    margin-top: 105px;
+  }
+}
diff --git a/demo/assets/images/active.svg b/demo/assets/images/active.svg
new file mode 100644
index 0000000000..a77b494616
--- /dev/null
+++ b/demo/assets/images/active.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #20202f;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="active_class" data-name="active class" class="cls-1" d="M716,2569l-12-16h24Z" transform="translate(-704 -2553)"/>
+</svg>
diff --git a/demo/assets/images/anactive.svg b/demo/assets/images/anactive.svg
new file mode 100644
index 0000000000..8653861de4
--- /dev/null
+++ b/demo/assets/images/anactive.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="13" viewBox="0 0 18 26">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #20202f;
+        stroke-width: 2px;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="anactive" class="cls-1" d="M724,3991l-16,12v-24Z" transform="translate(-707 -3978)"/>
+</svg>
diff --git a/demo/assets/images/bar-doc.png b/demo/assets/images/bar-doc.png
new file mode 100644
index 0000000000..48d7110a89
Binary files /dev/null and b/demo/assets/images/bar-doc.png differ
diff --git a/demo/assets/images/border-dot.png b/demo/assets/images/border-dot.png
new file mode 100644
index 0000000000..7a5ac4bd95
Binary files /dev/null and b/demo/assets/images/border-dot.png differ
diff --git a/demo/assets/images/link-doc.png b/demo/assets/images/link-doc.png
new file mode 100644
index 0000000000..26562334b5
Binary files /dev/null and b/demo/assets/images/link-doc.png differ
diff --git a/demo/assets/images/logo.png b/demo/assets/images/logo.png
new file mode 100644
index 0000000000..a077034ff4
Binary files /dev/null and b/demo/assets/images/logo.png differ
diff --git a/demo/assets/images/menu-left.svg b/demo/assets/images/menu-left.svg
new file mode 100644
index 0000000000..6f15239262
--- /dev/null
+++ b/demo/assets/images/menu-left.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="22" viewBox="0 0 52 44">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="menu.svg" class="cls-1" d="M243.013,106.181h45.973a3.089,3.089,0,0,0,0-6.176H243.013A3.089,3.089,0,0,0,243.013,106.181Zm45.973,12.732H243.013a3.088,3.088,0,0,0,0,6.175h45.973A3.088,3.088,0,0,0,288.986,118.913Zm0,18.908H243.013a3.089,3.089,0,0,0,0,6.176h45.973A3.089,3.089,0,0,0,288.986,137.821Z" transform="translate(-240 -100)"/>
+</svg>
diff --git a/demo/assets/images/menu-right.svg b/demo/assets/images/menu-right.svg
new file mode 100644
index 0000000000..492de905c0
--- /dev/null
+++ b/demo/assets/images/menu-right.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="3" height="22" viewBox="0 0 6 44">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="menu.svg" class="cls-1" d="M264.348,106.181h5.3c0.192,0,.348-1.381.348-3.087s-0.156-3.089-.348-3.089h-5.3c-0.193,0-.348,1.386-0.348,3.089S264.155,106.181,264.348,106.181Zm5.3,12.732h-5.3c-0.193,0-.348,1.386-0.348,3.088s0.155,3.087.348,3.087h5.3c0.192,0,.348-1.378.348-3.087S269.844,118.913,269.652,118.913Zm0,18.908h-5.3c-0.193,0-.348,1.386-0.348,3.087s0.155,3.089.348,3.089h5.3c0.192,0,.348-1.381.348-3.089S269.844,137.821,269.652,137.821Z" transform="translate(-264 -100)"/>
+</svg>
diff --git a/demo/assets/images/repa-down.png b/demo/assets/images/repa-down.png
new file mode 100644
index 0000000000..06a07f8fcb
Binary files /dev/null and b/demo/assets/images/repa-down.png differ
diff --git a/demo/assets/images/repa-up.png b/demo/assets/images/repa-up.png
new file mode 100644
index 0000000000..e4068e0a05
Binary files /dev/null and b/demo/assets/images/repa-up.png differ
diff --git a/demo/assets/images/search-doc.png b/demo/assets/images/search-doc.png
new file mode 100644
index 0000000000..367c42f97f
Binary files /dev/null and b/demo/assets/images/search-doc.png differ
diff --git a/demo/components/accordion-section.ts b/demo/components/accordion-section.ts
index a8ae43edc1..0d82865a80 100644
--- a/demo/components/accordion-section.ts
+++ b/demo/components/accordion-section.ts
@@ -1,62 +1,29 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {AccordionDemoComponent} from './accordion/accordion-demo';
+import {DemoSection} from './demo-section';
 
-let name = 'Accordion';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/accordion/';
 // webpack html imports
 let doc = require('../../components/accordion/readme.md');
 let titleDoc = require('../../components/accordion/title.md');
+
 let ts = require('!!prismjs?lang=typescript!./accordion/accordion-demo.ts');
 let html = require('!!prismjs?lang=markup!./accordion/accordion-demo.html');
 
 @Component({
   selector: 'accordion-section',
+  directives: [DemoSection, AccordionDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-
-    <br/>
-
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <accordion-demo></accordion-demo>
-      </div>
-    </div>
-    
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-    
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `,
-  directives: [AccordionDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES]
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <accordion-demo></accordion-demo>
+    </demo-section>`
 })
 export class AccordionSectionComponent {
+  private name:string = 'Accordion';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/accordion';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/alert-section.ts b/demo/components/alert-section.ts
index 9885317f6d..60475cbb08 100644
--- a/demo/components/alert-section.ts
+++ b/demo/components/alert-section.ts
@@ -1,64 +1,28 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {AlertDemoComponent} from './alert/alert-demo';
-
-let name = 'Alerts';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/alert/';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/alert/readme.md');
 let titleDoc = require('../../components/alert/title.md');
-
 let ts = require('!!prismjs?lang=typescript!./alert/alert-demo.ts');
 let html = require('!!prismjs?lang=markup!./alert/alert-demo.html');
 
 @Component({
   selector: 'alert-section',
+  directives: [DemoSection, AlertDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <alert-demo></alert-demo>
-      </div>
-    </div>
-    
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-    
-    <br/>
-      
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `,
-  directives: [AlertDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES]
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <alert-demo></alert-demo>
+    </demo-section>`
 })
 export class AlertSectionComponent {
+  private name:string = 'Alerts';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/alert';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/buttons-section.ts b/demo/components/buttons-section.ts
index b19c9e2a92..acb01eb82d 100644
--- a/demo/components/buttons-section.ts
+++ b/demo/components/buttons-section.ts
@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {ButtonsDemoComponent} from './buttons/buttons-demo';
-
-let name = 'Buttons';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/buttons/';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/buttons/readme.md');
@@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./buttons/buttons-demo.html');
 
 @Component({
   selector: 'buttons-section',
-  directives: [ButtonsDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES],
+  directives: [DemoSection, ButtonsDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <buttons-demo></buttons-demo>
-      </div>
-    </div>
-
-    <br/>
-    
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <buttons-demo></buttons-demo>
+    </demo-section>`
 })
-export class ButtonsSectionComponent {
+
+  private name:string = 'Buttons';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/buttons';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/carousel-section.ts b/demo/components/carousel-section.ts
index 8604b4b280..0fbca29aa9 100644
--- a/demo/components/carousel-section.ts
+++ b/demo/components/carousel-section.ts
@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {CarouselDemoComponent} from './carousel/carousel-demo';
-
-let name = 'Carousel';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/carousel/';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/carousel/readme.md');
@@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./carousel/carousel-demo.html');
 
 @Component({
   selector: 'carousel-section',
-  directives: [CarouselDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES],
+  directives: [DemoSection, CarouselDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <carousel-demo></carousel-demo>
-      </div>
-    </div>
-
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <carousel-demo></carousel-demo>
+    </demo-section>`
 })
 export class CarouselSectionComponent {
+  private name:string = 'Carousel';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/carousel';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/collapse-section.ts b/demo/components/collapse-section.ts
index 571ae8f761..eb3054cc74 100644
--- a/demo/components/collapse-section.ts
+++ b/demo/components/collapse-section.ts
@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {CollapseDemoComponent} from './collapse/collapse-demo';
-
-let name = 'Collapse';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/collapse/';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/collapse/readme.md');
@@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./collapse/collapse-demo.html');
 
 @Component({
   selector: 'collapse-section',
-  directives: [CollapseDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES],
+  directives: [DemoSection, CollapseDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <collapse-demo></collapse-demo>
-      </div>
-    </div>
-
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <collapse-demo></collapse-demo>
+    </demo-section>`
 })
 export class CollapseSectionComponent {
+  private name:string = 'Collapse';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/collapse';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/datepicker-section.ts b/demo/components/datepicker-section.ts
index 46eefd7283..08d48ca91b 100644
--- a/demo/components/datepicker-section.ts
+++ b/demo/components/datepicker-section.ts
@@ -1,11 +1,8 @@
-import {Component} from '@angular/core';
+import {Component} from 'angular2/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {DatepickerDemoComponent} from './datepicker/datepicker-demo';
-
-let name = 'Datepicker';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/datepicker/';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/datepicker/readme.md');
@@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./datepicker/datepicker-demo.html');
 
 @Component({
   selector: 'datepicker-section',
+  directives: [DemoSection, DatepickerDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <datepicker-demo></datepicker-demo>
-      </div>
-    </div>
-
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `,
-  directives: [DatepickerDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES]
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <datepicker-demo></datepicker-demo>
+    </demo-section>`
 })
-export class DatepickerSectionComponent {
+
+  private name:string = 'Datepicker';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/datepicker';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/demo-header.ts b/demo/components/demo-header.ts
deleted file mode 100644
index f96a1e94cc..0000000000
--- a/demo/components/demo-header.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import {Component} from '@angular/core';
-import {CORE_DIRECTIVES} from '@angular/common';
-import {
-  CollapseDirective, DROPDOWN_DIRECTIVES, Ng2BootstrapConfig, Ng2BootstrapTheme
-} from '../../ng2-bootstrap';
-
-let components = [
-  'Accordion', 'Alerts', 'Buttons', 'Carousel', 'Collapse', 'Datepicker',
-  'Dropdowns', 'Modals', 'Pagination', /*'Popover',*/ 'Progressbar',
-  'Rating', 'Tabs', 'Timepicker', 'Tooltip', 'Typeahead'
-];
-
-let template = `
-    <header class="navbar navbar-default navbar-fixed-top navbar-inner bg-faded">
-    <div class="container">
-      <div class="navbar-header hidden-md-up">
-        <button type="button" class="navbar-toggle navbar-toggler pull-right" (click)="isCollapsed = !isCollapsed">
-          <span class="sr-only">Toggle navigation</span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-        </button>
-        <a class="navbar-brand visible-xs" href="{{prefix}}#">ng2-bootstrap</a>
-      </div>
-      <nav class="hidden-xs hidden-xs-down">
-        <ul class="nav navbar-nav">
-          <li class="nav-item"><a href="{{prefix}}#top" role="button" class="navbar-brand">ng2-bootstrap</a></li>
-          <li class="nav-item dropdown" dropdown>
-            <a role="button" class="nav-link dropdownToggle" dropdownToggle>Directives <b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li *ngFor="let comp of components"><a class="dropdown-item" href="{{prefix}}#{{comp.toLowerCase()}}">{{comp}}</a></li>
-            </ul>
-          </li>
-          <li class="nav-item"><a class="nav-link" href="{{prefix}}#getting-started">Getting started</a></li>
-          <li class="nav-item"><a class="nav-link" href="{{prefix}}#migration">Migration</a></li>
-        </ul>
-      </nav>
-      <nav class="visible-xs hidden-md-up">
-        <ul class="nav nav-pills nav-stacked scrollable-menu" [collapse]="isCollapsed" (click)="isCollapsed = !isCollapsed; true">
-          <li class="nav-item"><a class="nav-link" href="{{prefix}}#getting-started">Getting started</a></li>
-          <li class="nav-item"><a class="nav-link" href="{{prefix}}#migration">Migration</a></li>
-          <li *ngFor="let comp of components" class="nav-item"><a class="dropdown-item nav-link" href="{{prefix}}#{{comp.toLowerCase()}}">{{comp}}</a></li>
-        </ul>
-      </nav>
-    </div>
-  </header>`;
-
-@Component({
-  selector: 'demo-header',
-  template: template,
-  directives: [
-    CORE_DIRECTIVES,
-    CollapseDirective,
-    DROPDOWN_DIRECTIVES
-  ]
-})
-export class DemoHeaderComponent {
-  public components:Array<string> = components;
-  public isCollapsed:boolean = true;
-  public prefix:string;
-
-  public constructor() {
-    this.prefix = Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS4
-      ? 'index-bs4.html'
-      : '';
-  }
-}
diff --git a/demo/components/demo-section.template.html b/demo/components/demo-section.template.html
new file mode 100644
index 0000000000..7786676173
--- /dev/null
+++ b/demo/components/demo-section.template.html
@@ -0,0 +1,44 @@
+<div class="content-header">
+  <h2>{{name}}
+    <a [href]="src" target="_blank">
+      <img src="/assets/images/link-doc.png" alt=""/>
+    </a>
+  </h2>
+
+  <p class="description" [innerHTML]="titleDoc"></p>
+</div>
+
+<div id="content" class="content-box">
+  <div id="example" class="section">
+    <h3>Example</h3>
+
+    <div class="item">
+      <ng-content></ng-content>
+    </div>
+  </div>
+
+  <div id="markup" class="section">
+    <h3>Markup</h3>
+
+    <div class="item">
+      <tabset>
+        <tab heading="Markup">
+          <pre class="language-html">
+            <code class="language-html" [innerHTML]="html"></code>
+          </pre>
+        </tab>
+        <tab heading="TypeScript">
+          <pre class="language-typescript">
+            <code class="language-typescript" [innerHTML]="ts"></code>
+          </pre>
+        </tab>
+      </tabset>
+    </div>
+  </div>
+
+  <div id="api" class="section">
+    <h3>Api</h3>
+
+    <div class="item list-container" [innerHTML]="doc"></div>
+  </div>
+</div>
diff --git a/demo/components/demo-section.ts b/demo/components/demo-section.ts
index 7e9e0ea079..f07d9c42fa 100644
--- a/demo/components/demo-section.ts
+++ b/demo/components/demo-section.ts
@@ -1,76 +1,25 @@
-import {Component} from '@angular/core';
-import {CORE_DIRECTIVES} from '@angular/common';
+import {Component, Input} from 'angular2/core';
 import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 
-let name = 'Alerts';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/alert/';
-
-// webpack html imports
-let doc = require('../../components/alert/readme.md');
-let titleDoc = require('../../components/alert/title.md');
-
-let ts = require('!!prismjs?lang=typescript!./alert/alert-demo.ts');
-let html = require('!!prismjs?lang=markup!./alert/alert-demo.html');
-let annotations = require('!!prismjs?lang=typescript!../../components/alert/annotation.md');
-
-export class DemoSectionConfig {
-  public doc:string;
-  public title:string;
-  public ts:string;
-  public html:string;
-  public annotations:string;
-}
+let template = require('./demo-section.template.html');
 
 @Component({
   selector: 'demo-section',
-  properties: ['demoSection'],
-  template: `
-  <br>
-  <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
-
-    <hr>
-
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <ng-content></ng-content>
-      </div>
-    </div>
-
-    <br>
-
-    <div class="row">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br>
-
-    <div class="row">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">
-      <h2>Annotations</h2>
-      <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${annotations}</code></pre>
-      ${doc}
-      </div>
-    </div>
-  </section>
-  `,
-  directives: [TAB_DIRECTIVES, CORE_DIRECTIVES]
+  directives: [TAB_DIRECTIVES],
+  template: template
 })
-export class DemoSectionComponent {
-  public demoSection:DemoSectionConfig;
+
+export class DemoSection {
+  @Input()
+  private name:string;
+  @Input()
+  private titleDoc:string;
+  @Input()
+  private src:string;
+  @Input()
+  private html:string;
+  @Input()
+  private ts:string;
+  @Input()
+  private doc:string;
 }
diff --git a/demo/components/dropdown-section.ts b/demo/components/dropdown-section.ts
index 82e25ba487..8337962944 100644
--- a/demo/components/dropdown-section.ts
+++ b/demo/components/dropdown-section.ts
@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {DropdownDemoComponent} from './dropdown/dropdown-demo';
-
-let name = 'Dropdowns';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/dropdown/';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/dropdown/readme.md');
@@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./dropdown/dropdown-demo.html');
 
 @Component({
   selector: 'dropdown-section',
-  directives: [DropdownDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES],
+  directives: [DemoSection, DropdownDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <dropdown-demo></dropdown-demo>
-      </div>
-    </div>
-
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <dropdown-demo></dropdown-demo>
+    </demo-section>`
 })
-export class DropdownSectionComponent {
+
+  private name:string = 'Dropdowns';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/dropdown';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/getting-started/dependencies.md b/demo/components/getting-started/dependencies.md
new file mode 100644
index 0000000000..9cb3604bf4
--- /dev/null
+++ b/demo/components/getting-started/dependencies.md
@@ -0,0 +1,10 @@
+### Dependencies
+This module consists of native Angular2 components and directives, no jQuery or Bootstrap javascript is required.
+
+*datepicker*: requires moment for data parsing, until Intl polyfill will be implemented
+
+Always actual list of JS dependencies you can find [here](https://david-dm.org/valor-software/ng2-bootstrap)
+
+Plus this module plays nice with Bootstrap CSS [v3](http://getbootstrap.com/css/) and [v4](http://v4-alpha.getbootstrap.com)
+
+*Note* later on each component will be available independently via npm, jspm, etc.
diff --git a/demo/components/getting-started/description.md b/demo/components/getting-started/description.md
new file mode 100644
index 0000000000..bd64d14fad
--- /dev/null
+++ b/demo/components/getting-started/description.md
@@ -0,0 +1 @@
+**80%** of baseline functionality is ready in Angular2
diff --git a/demo/components/getting-started/getting-started.template.html b/demo/components/getting-started/getting-started.template.html
new file mode 100644
index 0000000000..77261d7673
--- /dev/null
+++ b/demo/components/getting-started/getting-started.template.html
@@ -0,0 +1,11 @@
+<div class="content-header">
+  <h2>{{name}}</h2>
+
+  <p class="description" [innerHTML]="desc"></p>
+</div>
+
+<div id="content" class="content-box">
+  <div class="section" [innerHTML]="dependencies"></div>
+  <div class="section" [innerHTML]="installation"></div>
+  <div class="section" [innerHTML]="readingDocumentation"></div>
+</div>
diff --git a/demo/components/getting-started/getting-started.ts b/demo/components/getting-started/getting-started.ts
new file mode 100644
index 0000000000..7cd21ac55a
--- /dev/null
+++ b/demo/components/getting-started/getting-started.ts
@@ -0,0 +1,24 @@
+import {Component} from 'angular2/core';
+
+let name = 'First of all, Welcome!';
+
+// webpack html imports
+let template = require('./getting-started.template.html');
+
+let desc = require('./description.md');
+let dependencies = require('./dependencies.md');
+let installation = require('./installation.md');
+let readingDocumentation = require('./reading-documentation.md');
+
+@Component({
+  selector: 'accordion-section',
+  template: template
+})
+
+export class GettingStartedSection {
+  private name:string = name;
+  private desc:string = desc;
+  private dependencies:string = dependencies;
+  private installation:string = installation;
+  private readingDocumentation:string = readingDocumentation;
+}
diff --git a/demo/components/getting-started/installation.md b/demo/components/getting-started/installation.md
new file mode 100644
index 0000000000..00e9c5e71b
--- /dev/null
+++ b/demo/components/getting-started/installation.md
@@ -0,0 +1,9 @@
+### Installation
+
+Currently preferable way to install this module is `npm`:
+
+```bash
+npm install --save ng2-bootstrap
+```
+
+Have fun!
diff --git a/demo/components/getting-started/reading-documentation.md b/demo/components/getting-started/reading-documentation.md
new file mode 100644
index 0000000000..db173348b1
--- /dev/null
+++ b/demo/components/getting-started/reading-documentation.md
@@ -0,0 +1,4 @@
+### Reading documentation
+
+Each `ng2-bootstrap` component has api and annotation docs, examples and working demo. Each `property` and `event` has type annotation and default value if any.
+
diff --git a/demo/components/main-menu/main-menu.component.ts b/demo/components/main-menu/main-menu.component.ts
new file mode 100644
index 0000000000..9465e95ddf
--- /dev/null
+++ b/demo/components/main-menu/main-menu.component.ts
@@ -0,0 +1,25 @@
+import {Component, Inject} from 'angular2/core';
+import {RouterLink, Router} from 'angular2/router';
+
+import {config} from './../../config';
+import {SearchFilter} from './search-filter.pipe';
+
+// webpack html imports
+let template = require('./main-menu.template.html');
+
+@Component({
+  selector: 'main-menu',
+  template: template,
+  directives: [RouterLink],
+  pipes: [SearchFilter]
+})
+
+export class MainMenuComponent {
+  private routes:any = config.routes;
+  private router:Router;
+  private search:any = {};
+
+  constructor(@Inject(Router) router:Router) {
+    this.router = router;
+  }
+}
diff --git a/demo/components/main-menu/main-menu.template.html b/demo/components/main-menu/main-menu.template.html
new file mode 100644
index 0000000000..f67271ff95
--- /dev/null
+++ b/demo/components/main-menu/main-menu.template.html
@@ -0,0 +1,32 @@
+<div id="main-menu">
+  <div class="menu-search">
+    <input type="text" name="search" placeholder="Search..." [(ngModel)]="search.text"/>
+  </div>
+  <div class="main-menu-container">
+    <div class="menu-content">
+      <div class="section"
+           *ngFor="#route of routes | SearchFilter:search.text"
+           [class.active]="router.isRouteActive(router.generate([route.name]))">
+        <h3 [routerLink]="[route.name]">{{route.name}}</h3>
+
+        <div class="item">
+          <h4>
+            <span [routerLink]="[route.name]">Example</span>
+          </h4>
+        </div>
+
+        <div class="item">
+          <h4>
+            <span [routerLink]="[route.name]">Api</span>
+          </h4>
+        </div>
+
+        <div class="item">
+          <h4>
+            <span [routerLink]="[route.name]">Properties</span>
+          </h4>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/demo/components/main-menu/search-filter.pipe.ts b/demo/components/main-menu/search-filter.pipe.ts
new file mode 100644
index 0000000000..2c5efc4eb2
--- /dev/null
+++ b/demo/components/main-menu/search-filter.pipe.ts
@@ -0,0 +1,26 @@
+import {Pipe} from 'angular2/core';
+
+@Pipe({
+  name: 'SearchFilter'
+})
+
+export class SearchFilter {
+  transform(value:any, args:any) {
+    let [text] = args;
+
+    if (!text) {
+      return value;
+    }
+
+    var items:any = value;
+    var newItems:any = [];
+
+    items.forEach(function (item:any) {
+      if (item.name.toLowerCase().indexOf(text.toLowerCase()) !== -1) {
+        newItems.push(item);
+      }
+    });
+
+    return newItems;
+  }
+}
diff --git a/demo/components/pagination-section.ts b/demo/components/pagination-section.ts
index 9a2d5e2d5e..80e06520f0 100644
--- a/demo/components/pagination-section.ts
+++ b/demo/components/pagination-section.ts
@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {PaginationDemoComponent} from './pagination/pagination-demo';
-
-let name = 'Pagination';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/pagination/';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/pagination/readme.md');
@@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./pagination/pagination-demo.html');
 
 @Component({
   selector: 'pagination-section',
-  directives: [PaginationDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES],
+  directives: [DemoSection, PaginationDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <pagination-demo></pagination-demo>
-      </div>
-    </div>
-
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <pagination-demo></pagination-demo>
+    </demo-section>`
 })
-export class PaginationSectionComponent {
+
+  private name:string = 'Pagination';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/pagination';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/progressbar-section.ts b/demo/components/progressbar-section.ts
index 42a7a7da0b..b6465832d9 100644
--- a/demo/components/progressbar-section.ts
+++ b/demo/components/progressbar-section.ts
@@ -1,72 +1,36 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {
-  TAB_DIRECTIVES,
-  Ng2BootstrapConfig,
-  Ng2BootstrapTheme
-} from '../../ng2-bootstrap';
+import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../../ng2-bootstrap';
 import {ProgressbarDemoComponent} from './progressbar/progressbar-demo';
-
-let name = 'Progressbar';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/progressbar/';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/progressbar/readme.md');
 let titleDoc = require('../../components/progressbar/title.md');
 
 let ts = require('!!prismjs?lang=typescript!./progressbar/progressbar-demo.ts');
+
 let templates:any = {
   [Ng2BootstrapTheme.BS3]: require('!!prismjs?lang=markup!./progressbar/progressbar-demo.html'),
   [Ng2BootstrapTheme.BS4]: require('!!prismjs?lang=markup!./progressbar/progressbar-demo-bs4.html')
 };
+
 let html = templates[Ng2BootstrapConfig.theme];
 
 @Component({
   selector: 'progressbar-section',
-  directives: [ProgressbarDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES],
+  directives: [DemoSection, ProgressbarDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <progressbar-demo></progressbar-demo>
-      </div>
-    </div>
-
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <progressbar-demo></progressbar-demo>
+    </demo-section>`
 })
-export class ProgressbarSectionComponent {
+
+  private name:string = 'Progressbar';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/progressbar';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/rating-section.ts b/demo/components/rating-section.ts
index d21c8cf5cf..e2622247c4 100644
--- a/demo/components/rating-section.ts
+++ b/demo/components/rating-section.ts
@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {RatingDemoComponent} from './rating/rating-demo';
-
-let name = 'Rating';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/rating/';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/rating/readme.md');
@@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./rating/rating-demo.html');
 
 @Component({
   selector: 'rating-section',
-  directives: [RatingDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES],
+  directives: [DemoSection, RatingDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <rating-demo></rating-demo>
-      </div>
-    </div>
-
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <rating-demo></rating-demo>
+    </demo-section>`
 })
-export class RatingSectionComponent {
+
+  private name:string = 'Rating';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/rating';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/tabs-section.ts b/demo/components/tabs-section.ts
index 95aec38809..516cd36095 100644
--- a/demo/components/tabs-section.ts
+++ b/demo/components/tabs-section.ts
@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {TabsDemoComponent} from './tabs/tabs-demo';
-
-let name = 'Tabs';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tabs/';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/tabs/readme.md');
@@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./tabs/tabs-demo.html');
 
 @Component({
   selector: 'tabs-section',
-  directives: [TabsDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES],
+  directives: [DemoSection, TabsDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <tabs-demo></tabs-demo>
-      </div>
-    </div>
-
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <tabs-demo></tabs-demo>
+    </demo-section>`
 })
-export class TabsSectionComponent {
+
+  private name:string = 'Tabs';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tabs';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/timepicker-section.ts b/demo/components/timepicker-section.ts
index 6bbcd9dca4..50ba2d246f 100644
--- a/demo/components/timepicker-section.ts
+++ b/demo/components/timepicker-section.ts
@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {TimepickerDemoComponent} from './timepicker/timepicker-demo';
-
-let name = 'Timepicker';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/timepicker/timepicker';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/timepicker/readme.md');
@@ -16,49 +13,18 @@ let html = require('!!prismjs?lang=markup!./timepicker/timepicker-demo.html');
 
 @Component({
   selector: 'timepicker-section',
-  directives: [TimepickerDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES],
+  directives: [DemoSection, TimepickerDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <timepicker-demo></timepicker-demo>
-      </div>
-    </div>
-
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <timepicker-demo></timepicker-demo>
+    </demo-section>`
+})
 
-    <br/>
 
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `
-})
-export class TimepickerSectionComponent {
+  private name:string = 'Timepicker';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/timepicker';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/tooltip-section.ts b/demo/components/tooltip-section.ts
index 692b7f5dfb..3d55a421cc 100644
--- a/demo/components/tooltip-section.ts
+++ b/demo/components/tooltip-section.ts
@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {TooltipDemoComponent} from './tooltip/tooltip-demo';
+import {DemoSection} from './demo-section';
 
 let name = 'Tooltip';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tooltip/';
+let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tooltip';
 
 // webpack html imports
 let doc = require('../../components/tooltip/readme.md');
@@ -16,49 +16,17 @@ let html = require('!!prismjs?lang=markup!./tooltip/tooltip-demo.html');
 
 @Component({
   selector: 'tooltip-section',
-  directives: [TooltipDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES],
+  directives: [DemoSection, TooltipDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <tooltip-demo></tooltip-demo>
-      </div>
-    </div>
-
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <tooltip-demo></tooltip-demo>
+    </demo-section>`
 })
-export class TooltipSectionComponent {
+
+  private name:string = 'Tooltip';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/tooltip';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/components/top-menu/top-menu.component.ts b/demo/components/top-menu/top-menu.component.ts
new file mode 100644
index 0000000000..b416039c36
--- /dev/null
+++ b/demo/components/top-menu/top-menu.component.ts
@@ -0,0 +1,14 @@
+import {Component} from 'angular2/core';
+import {RouterLink} from 'angular2/router';
+
+// webpack html imports
+let template = require('./top-menu.template.html');
+
+@Component({
+  selector: 'top-menu',
+  template: template,
+  directives: [RouterLink]
+})
+
+export class TopMenuComponent {
+}
diff --git a/demo/components/top-menu/top-menu.template.html b/demo/components/top-menu/top-menu.template.html
new file mode 100644
index 0000000000..2c7c169194
--- /dev/null
+++ b/demo/components/top-menu/top-menu.template.html
@@ -0,0 +1,28 @@
+<div id="top-menu">
+  <div class="title">
+    <h2>ng2-bootstrap</h2>
+  </div>
+
+  <div id="mobile-main-menu">
+    <img src="assets/images/menu-left.svg" alt="">
+  </div>
+
+  <div class="menu-right">
+    <div class="git-hub">
+      <iframe frameborder="0" scrolling="0"
+              src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-bootstrap&type=star&count=true"></iframe>
+      <iframe frameborder="0" scrolling="0"
+              src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-bootstrap&type=fork&count=true"></iframe>
+    </div>
+
+    <div class="logo">
+      <a href="">
+        <img src="/assets/images/logo.png" alt="">
+      </a>
+    </div>
+
+    <div id="mobile-top-menu">
+      <img src="/assets/images/menu-right.svg" alt="">
+    </div>
+  </div>
+</div>
diff --git a/demo/components/typeahead-section.ts b/demo/components/typeahead-section.ts
index cf9cf4b6df..caba7012cb 100644
--- a/demo/components/typeahead-section.ts
+++ b/demo/components/typeahead-section.ts
@@ -1,11 +1,8 @@
 import {Component} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
-import {TAB_DIRECTIVES} from '../../ng2-bootstrap';
 import {TypeaheadDemoComponent} from './typeahead/typeahead-demo';
-
-let name = 'Typeahead';
-let src = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/typeahead/typeahead';
+import {DemoSection} from './demo-section';
 
 // webpack html imports
 let doc = require('../../components/typeahead/readme.md');
@@ -16,49 +13,17 @@ let html = require('!!prismjs?lang=markup!./typeahead/typeahead-demo.html');
 
 @Component({
   selector: 'typeahead-section',
-  directives: [TypeaheadDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES],
+  directives: [DemoSection, TypeaheadDemo, CORE_DIRECTIVES],
   template: `
-  <section id="${name.toLowerCase()}">
-    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
-
-    <hr>
-
-    <div class="description">${titleDoc}</div>
-    
-    <br/>
-    
-    <div class="example">
-      <h2>Example</h2>
-      <div class="card card-block panel panel-default panel-body">
-        <typeahead-demo></typeahead-demo>
-      </div>
-    </div>
-
-    <br/>
-
-    <div class="markup">
-      <tabset>
-        <tab heading="Markup">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-html"><code class="language-html" ngNonBindable>${html}</code></pre>
-          </div>
-        </tab>
-        <tab heading="TypeScript">
-          <div class="card card-block panel panel-default panel-body">
-            <pre class="language-typescript"><code class="language-typescript" ngNonBindable>${ts}</code></pre>
-          </div>
-        </tab>
-      </tabset>
-    </div>
-
-    <br/>
-
-    <div class="api">
-      <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">${doc}</div>
-    </div>
-  </section>
-  `
+    <demo-section [name]="name" [src]="src" [titleDoc]="titleDoc" [html]="html" [ts]="ts" [doc]="doc">
+      <typeahead-demo></typeahead-demo>
+    </demo-section>`
 })
-export class TypeaheadSectionComponent {
+
+  private name:string = 'Typeahead';
+  private src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/typeahead';
+  private html:string = html;
+  private ts:string = ts;
+  private titleDoc:string = titleDoc;
+  private doc:string = doc;
 }
diff --git a/demo/config.ts b/demo/config.ts
new file mode 100644
index 0000000000..8085951e7b
--- /dev/null
+++ b/demo/config.ts
@@ -0,0 +1,80 @@
+import {GettingStartedSection} from './components/getting-started/getting-started';
+import {AccordionSection} from './components/accordion-section';
+import {AlertSection} from './components/alert-section';
+import {ButtonsSection} from './components/buttons-section';
+import {CarouselSection} from './components/carousel-section';
+import {CollapseSection} from './components/collapse-section';
+import {DatepickerSection} from './components/datepicker-section';
+import {DropdownSection} from './components/dropdown-section';
+import {PaginationSection} from './components/pagination-section';
+import {ProgressbarSection} from './components/progressbar-section';
+import {RatingSection} from './components/rating-section';
+import {TabsSection} from './components/tabs-section';
+import {TimepickerSection} from './components/timepicker-section';
+import {TooltipSection} from './components/tooltip-section';
+import {TypeaheadSection} from './components/typeahead-section';
+
+export module config {
+  export let routes = [{
+    path: '/getting-started',
+    name: 'Getting started',
+    component: GettingStartedSection,
+    useAsDefault: true
+  }, {
+    path: '/accordion',
+    name: 'Accordion',
+    component: AccordionSection
+  }, {
+    path: '/alerts',
+    name: 'Alerts',
+    component: AlertSection
+  }, {
+    path: '/buttons',
+    name: 'Buttons',
+    component: ButtonsSection
+  }, {
+    path: '/carousel',
+    name: 'Carousel',
+    component: CarouselSection
+  }, {
+    path: '/collapse',
+    name: 'Collapse',
+    component: CollapseSection
+  }, {
+    path: '/datepicker',
+    name: 'Datepicker',
+    component: DatepickerSection
+  }, {
+    path: '/dropdowns',
+    name: 'Dropdowns',
+    component: DropdownSection
+  }, {
+    path: '/pagination',
+    name: 'Pagination',
+    component: PaginationSection
+  }, {
+    path: '/progressbar',
+    name: 'Progressbar',
+    component: ProgressbarSection
+  }, {
+    path: '/rating',
+    name: 'Rating',
+    component: RatingSection
+  }, {
+    path: '/tabs',
+    name: 'Tabs',
+    component: TabsSection
+  }, {
+    path: '/timepicker',
+    name: 'Timepicker',
+    component: TimepickerSection
+  }, {
+    path: '/tooltip',
+    name: 'Tooltip',
+    component: TooltipSection
+  }, {
+    path: '/typeahead',
+    name: 'Typeahead',
+    component: TypeaheadSection
+  }];
+}
diff --git a/demo/demo.template.html b/demo/demo.template.html
new file mode 100644
index 0000000000..7cf33786fc
--- /dev/null
+++ b/demo/demo.template.html
@@ -0,0 +1,6 @@
+<top-menu></top-menu>
+<main-menu></main-menu>
+
+<div id="main">
+  <router-outlet></router-outlet>
+</div>
diff --git a/demo/index.html b/demo/index.html
index df9b6b01d4..68c70ee7ba 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -11,6 +11,10 @@
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
   <link rel="author" href="https://github.com/valor-software/ng2-bootstrap/graphs/contributors">
 
+  <!--link to fonts-->
+  <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
+  <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
+
   <!--link to bootstrap.css-->
   <link rel="stylesheet" href="assets/css/prism-okaidia.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
diff --git a/demo/index.ts b/demo/index.ts
index c0fc69bc55..05bc069940 100644
--- a/demo/index.ts
+++ b/demo/index.ts
@@ -1,9 +1,9 @@
 import {Component, enableProdMode, ViewContainerRef} from '@angular/core';
-import {CORE_DIRECTIVES} from '@angular/common';
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import {Component, provide, enableProdMode} from 'angular2/core';
+import {RouterOutlet, RouteConfig, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap';
-import {AccordionSectionComponent} from './components/accordion-section';
-import {AlertSectionComponent} from './components/alert-section';
+import {MainMenuComponent} from './components/main-menu/main-menu.component';
+import {TopMenuComponent} from './components/top-menu/top-menu.component';
 import {ButtonsSectionComponent} from './components/buttons-section';
 import {CarouselSectionComponent} from './components/carousel-section';
 import {CollapseSectionComponent} from './components/collapse-section';
@@ -19,95 +19,32 @@ import {TooltipSectionComponent} from './components/tooltip-section';
 import {TypeaheadSectionComponent} from './components/typeahead-section';
 import {DemoHeaderComponent} from './components/demo-header';
 
+import {config} from './config';
+
 // todo: enable prod mod only for prod build
 // if (false) {
 enableProdMode();
 // }
 
 let w:any = window;
+
 if (w && w.__theme === 'bs4') {
   Ng2BootstrapConfig.theme = Ng2BootstrapTheme.BS4;
 }
 
-let gettingStarted = require('./getting-started.md');
+let tmp = require('./demo.template.html');
 
 @Component({
   selector: 'app',
-  template: `
-  <demo-header>Loading header</demo-header>
-  <main class="bd-pageheader">
-    <div class="container">
-      <h1>ng2-bootstrap</h1>
-      <p>Native Angular2 directives for Bootstrap</p>
-      <a class="btn btn-primary" href="https://github.com/valor-software/ng2-bootstrap">View on GitHub</a>
-      <div class="row">
-        <div class="col-lg-1"><iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-bootstrap&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe></div>
-        <div class="col-lg-1"><iframe src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ng2-bootstrap&type=fork&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe></div>
-      </div>
-    </div>
-  </main>
+  template: tmp,
+  directives: [RouterOutlet, TopMenuComponent, MainMenuComponent]
 
-  <div class="container">
-    <h1 id="overview" class="page-header">
-      ng2-bootstrap available with:
-      <a class="btn btn-default btn-secondary btn-lg" [ngClass]="{active: isBs3}" href="./">Bootstrap 3</a>
-      <a class="btn btn-default btn-secondary btn-lg" [ngClass]="{active: !isBs3}" href="./index-bs4.html">Bootstrap 4</a>
-    </h1>
-    
-    <section id="getting-started">${gettingStarted}</section>
+@RouteConfig(config.routes)
 
-    <accordion-section></accordion-section>
-    <alert-section></alert-section>
-    <buttons-section></buttons-section>
-    <carousel-section></carousel-section>
-    <collapse-section></collapse-section>
-    <datepicker-section></datepicker-section>
-    <dropdown-section></dropdown-section>
     <modal-section></modal-section>
-    <pagination-section></pagination-section>
-    <progressbar-section></progressbar-section>
-    <rating-section></rating-section>
-    <tabs-section></tabs-section>
-    <timepicker-section></timepicker-section>
-    <tooltip-section></tooltip-section>
-    <typeahead-section></typeahead-section>
-  </div>
-
-  <footer class="footer">
-    <div class="container">
-      <p class="text-muted text-center">
-        <a href="https://github.com/valor-software/ng2-bootstrap">ng2-bootstrap</a> is maintained by <a href="https://github.com/valor-software">valor-software</a>.
-      </p>
-    </div>
-  </footer>
-  `,
-  directives: [
-    CORE_DIRECTIVES,
-    DemoHeaderComponent,
-
-    AccordionSectionComponent,
-    AlertSectionComponent,
-    ButtonsSectionComponent,
-    CarouselSectionComponent,
-    CollapseSectionComponent,
-
-    // todo: fix it to much write value calls!!!
-    DatepickerSectionComponent,
-    //
-    DropdownSectionComponent,
-    ModalSectionComponent,
-    PaginationSectionComponent,
-    ProgressbarSectionComponent,
-    RatingSectionComponent,
-    TabsSectionComponent,
-    TimepickerSectionComponent,
-    TooltipSectionComponent,
     TypeaheadSectionComponent
-  ]
-})
 export class DemoComponent {
   public isBs3:boolean = Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS3;
-
   private viewContainerRef:ViewContainerRef;
 
   public constructor(viewContainerRef:ViewContainerRef) {
@@ -116,4 +53,5 @@ export class DemoComponent {
   }
 }
 
-bootstrap(DemoComponent);
+bootstrap(Demo, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'})]);
+