diff --git a/projects/example/src/app/app.component.html b/projects/example/src/app/app.component.html
index 4b8dbc2755373c4754fca9b9d7608f56b092d642..a2950aac1456852ebc96badd6b8f496514396527 100644
--- a/projects/example/src/app/app.component.html
+++ b/projects/example/src/app/app.component.html
@@ -1,15 +1,17 @@
-<!-- US web design government banner -->
-<nshmp-template-gov-banner></nshmp-template-gov-banner>
+<nshmp-template>
+  <!-- US web design government banner -->
+  <nshmp-template-gov-banner></nshmp-template-gov-banner>
 
-<!-- Header -->
-<nshmp-template-header [navigationList]="navigationList"> </nshmp-template-header>
+  <!-- Header -->
+  <nshmp-template-header [navigationList]="navigationList"> </nshmp-template-header>
 
-<!-- Main content -->
-<nshmp-template-main-page>
-  <div>
-    <p *ngFor="let content of fillerContent">{{ content }}</p>
-  </div>
-</nshmp-template-main-page>
+  <!-- Main content -->
+  <nshmp-template-main-page>
+    <div>
+      <p *ngFor="let content of fillerContent">{{ content }}</p>
+    </div>
+  </nshmp-template-main-page>
 
-<!-- Footer -->
-<nshmp-template-footer></nshmp-template-footer>
+  <!-- Footer -->
+  <nshmp-template-footer></nshmp-template-footer>
+</nshmp-template>
diff --git a/projects/example/src/app/app.component.scss b/projects/example/src/app/app.component.scss
index 683ae23faeb400f1a70bacba6e68504c296bc4ef..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/projects/example/src/app/app.component.scss
+++ b/projects/example/src/app/app.component.scss
@@ -1,3 +0,0 @@
-:host {
-  height: 100%;
-}
diff --git a/projects/nshmp-template/src/lib/components/nshmp-template/nshmp-template.component.html b/projects/nshmp-template/src/lib/components/nshmp-template/nshmp-template.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..6dbc74306383aaa6efc4216ee6c449c3b38ceaa9
--- /dev/null
+++ b/projects/nshmp-template/src/lib/components/nshmp-template/nshmp-template.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/projects/nshmp-template/src/lib/components/nshmp-template/nshmp-template.component.scss b/projects/nshmp-template/src/lib/components/nshmp-template/nshmp-template.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..683ae23faeb400f1a70bacba6e68504c296bc4ef
--- /dev/null
+++ b/projects/nshmp-template/src/lib/components/nshmp-template/nshmp-template.component.scss
@@ -0,0 +1,3 @@
+:host {
+  height: 100%;
+}
diff --git a/projects/nshmp-template/src/lib/components/nshmp-template/nshmp-template.component.spec.ts b/projects/nshmp-template/src/lib/components/nshmp-template/nshmp-template.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6410e1c5fefa3c15f4be2adbdb15e1f36e7d9491
--- /dev/null
+++ b/projects/nshmp-template/src/lib/components/nshmp-template/nshmp-template.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NshmpTemplateComponent } from './nshmp-template.component';
+
+describe('NshmpTemplateComponent', () => {
+  let component: NshmpTemplateComponent;
+  let fixture: ComponentFixture<NshmpTemplateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [NshmpTemplateComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NshmpTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/nshmp-template/src/lib/components/nshmp-template/nshmp-template.component.ts b/projects/nshmp-template/src/lib/components/nshmp-template/nshmp-template.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bdc118fcdee93bd6165a5a7e5fc86216c411c148
--- /dev/null
+++ b/projects/nshmp-template/src/lib/components/nshmp-template/nshmp-template.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'nshmp-template',
+  templateUrl: './nshmp-template.component.html',
+  styleUrls: ['./nshmp-template.component.scss']
+})
+export class NshmpTemplateComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}
diff --git a/projects/nshmp-template/src/lib/modules/nshmp-layout.module.ts b/projects/nshmp-template/src/lib/modules/nshmp-layout.module.ts
index 59a000605416778ced5e77c93f61081eac469177..7cd2fdeb6e765a71c741117e02c154b254217583 100644
--- a/projects/nshmp-template/src/lib/modules/nshmp-layout.module.ts
+++ b/projects/nshmp-template/src/lib/modules/nshmp-layout.module.ts
@@ -11,12 +11,14 @@ import { GovBannerComponent } from '../components/gov-banner/gov-banner.componen
 import { HeaderComponent } from '../components/header/header.component';
 import { MainPageComponent } from '../components/main-page/main-page.component';
 import { NavigationComponent } from '../components/navigation/navigation.component';
+import { NshmpTemplateComponent } from '../components/nshmp-template/nshmp-template.component';
 import { SearchBarComponent } from '../components/search-bar/search-bar.component';
 import { MaterialModule } from './material.module';
 
 @NgModule({
   imports: [CommonModule, MaterialModule, RouterModule.forChild([])],
   declarations: [
+    NshmpTemplateComponent,
     FooterBottomNavbarComponent,
     FooterComponent,
     FooterTopNavbarComponent,
@@ -28,6 +30,12 @@ import { MaterialModule } from './material.module';
     MainPageComponent,
     SearchBarComponent
   ],
-  exports: [FooterComponent, GovBannerComponent, HeaderComponent, MainPageComponent]
+  exports: [
+    NshmpTemplateComponent,
+    FooterComponent,
+    GovBannerComponent,
+    HeaderComponent,
+    MainPageComponent
+  ]
 })
 export class NshmpLayoutModule {}