diff --git a/src/app/boostwatch/boostwatch.component.html b/src/app/boostwatch/boostwatch.component.html
index bb18158d..b8c71686 100644
--- a/src/app/boostwatch/boostwatch.component.html
+++ b/src/app/boostwatch/boostwatch.component.html
@@ -7,9 +7,18 @@ <h2>Accordions<a class="doc-link ml-2" routerLink="/documentation/accordion" tit
     <h2>Alert<a class="doc-link ml-2" routerLink="/documentation/alert" title="go to alert documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
     <demo-alert></demo-alert>
 
+    <h2>Badge<a class="doc-link ml-2" routerLink="/documentation/badge" title="go to badge documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
+    <demo-badge></demo-badge>
+
+    <h2>Breadcrumb<a class="doc-link ml-2" routerLink="/documentation/breadcrumb" title="go to breadcrumb documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
+    <demo-breadcrumb></demo-breadcrumb>
+
     <h2>Buttons<a class="doc-link ml-2" routerLink="/documentation/buttons" title="go to buttons documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
     <demo-buttons></demo-buttons>
 
+    <h2>Card<a class="doc-link ml-2" routerLink="/documentation/card" title="go to card documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
+    <demo-card></demo-card>
+
     <div class="row">
       <div class="col-md-7">
         <h2>Carousel<a class="doc-link ml-2" routerLink="/documentation/carousel" title="go to carousel documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
@@ -26,6 +35,21 @@ <h2>Datepicker<a class="doc-link ml-2" routerLink="/documentation/datepicker" ti
     <h2>Dropdown<a class="doc-link ml-2" routerLink="/documentation/dropdown" title="go to dropdown documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
     <demo-dropdown></demo-dropdown>
 
+    <h2>Form<a class="doc-link ml-2" routerLink="/documentation/form" title="go to form documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
+    <demo-form></demo-form>
+
+    <h2>Jumbotron<a class="doc-link ml-2" routerLink="/documentation/jumbotron" title="go to jumbotron documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
+    <demo-jumbotron></demo-jumbotron>
+
+    <h2>List-group<a class="doc-link ml-2" routerLink="/documentation/list-group" title="go to list-group documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
+    <demo-list-group></demo-list-group>
+
+    <h2>Local-navigation<a class="doc-link ml-2" routerLink="/documentation/local-navigation" title="go to local-navigation documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
+    <demo-local-navigation></demo-local-navigation>
+    
+    <h2>Media<a class="doc-link ml-2" routerLink="/documentation/media" title="go to media documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
+    <demo-media></demo-media>
+
     <h2>Modal<a class="doc-link ml-2" routerLink="/documentation/modal" title="go to modal documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
     <demo-modal></demo-modal>
     <ng-template ngbModalContainer></ng-template>
@@ -33,6 +57,9 @@ <h2>Modal<a class="doc-link ml-2" routerLink="/documentation/modal" title="go to
     <h2>Navbar<a class="doc-link ml-2" routerLink="/documentation/navbar" title="go to navbar documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
     <demo-navbar></demo-navbar>
 
+    <h2>Orange-footer<a class="doc-link ml-2" routerLink="/documentation/orange-footer" title="go to orange-footer documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
+    <demo-orange-footer></demo-orange-footer>
+
     <h2>Pagination<a class="doc-link ml-2" routerLink="/documentation/pagination" title="go to pagination documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
     <demo-pagination></demo-pagination>
 
@@ -45,6 +72,15 @@ <h2>Progress Bar<a class="doc-link ml-2" routerLink="/documentation/progress" ti
     <h2>Rating<a class="doc-link ml-2" routerLink="/documentation/rating" title="go to rating documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
     <demo-rating></demo-rating>
 
+    <h2>Scrollspy<a class="doc-link ml-2" routerLink="/documentation/scrollspy" title="go to scrollspy documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
+    <demo-scrollspy></demo-scrollspy>
+
+    <h2>Spinner<a class="doc-link ml-2" routerLink="/documentation/spinner" title="go to spinner documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
+    <demo-spinner></demo-spinner>
+
+    <h2>Stepbar<a class="doc-link ml-2" routerLink="/documentation/stepbar" title="go to stepbar documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
+    <demo-stepbar></demo-stepbar>
+
     <h2>Table<a class="doc-link ml-2" routerLink="/documentation/table" title="go to table documentation page"><span class="icon-Forward-curved-arrow"></span></a></h2>
     <demo-table></demo-table>
 
diff --git a/src/app/boostwatch/boostwatch.component.spec.ts b/src/app/boostwatch/boostwatch.component.spec.ts
index 23cbe0f5..8818e005 100644
--- a/src/app/boostwatch/boostwatch.component.spec.ts
+++ b/src/app/boostwatch/boostwatch.component.spec.ts
@@ -14,7 +14,6 @@ import { DemoCardComponent } from '../demos/card.component';
 import { DemoFormComponent } from '../demos/form.component';
 import { DemoJumbotronComponent } from '../demos/jumbotron.component';
 import { DemoMediaComponent } from '../demos/media.component';
-import { DemoOrangePopinComponent } from '../demos/orange-popin.component';
 import { DemoOrangeFooterComponent } from '../demos/orange-footer.component';
 import { DemoListGroupComponent } from '../demos/list-group.component';
 import { DemoLocalNavigationComponent } from '../demos/local-navigation.Component';
@@ -60,7 +59,6 @@ import { DocJumbotronComponent } from '../docs/jumbotron.component';
 import { DocListGroupComponent } from '../docs/list-group.component';
 import { DocLocalNavigationComponent } from '../docs/local-navigation.component';
 import { DocMediaComponent } from '../docs/media.component';
-import { DocOrangePopinComponent } from '../docs/orange-popin.component';
 import { DocOrangeFooterComponent } from '../docs/orange-footer.component';
 import { DocTabsComponent } from '../docs/tabs.component';
 import { DocPaginationComponent } from '../docs/pagination.component';
@@ -115,7 +113,6 @@ describe('BoostwatchComponent', () => {
         DemoFormComponent,
         DemoJumbotronComponent,
         DemoMediaComponent,
-        DemoOrangePopinComponent,
         DemoOrangeFooterComponent,
         DemoListGroupComponent,
         DemoLocalNavigationComponent,
@@ -155,7 +152,6 @@ describe('BoostwatchComponent', () => {
         DocListGroupComponent,
         DocLocalNavigationComponent,
         DocMediaComponent,
-        DocOrangePopinComponent,
         DocOrangeFooterComponent,
         DocBreadcrumbComponent,
         DocAlertComponent,