diff --git a/projects/nshmp-template/src/lib/components/header/header.component.html b/projects/nshmp-template/src/lib/components/header/header.component.html
index 4c30b482ccb1322100e64aa1912841dc5ac05ec4..680a0ba0c489f40ae4cdf6c0f9e8b05863843cbc 100644
--- a/projects/nshmp-template/src/lib/components/header/header.component.html
+++ b/projects/nshmp-template/src/lib/components/header/header.component.html
@@ -2,7 +2,7 @@
 <header class="usa-header usa-header--basic" [ngClass]="{ 'header-minimal': minimal }">
   <div class="grid-row">
     <!-- USGS logo -->
-    <div class="grid-col">
+    <div class="grid-col-auto">
       <div class="usgs-logo border-0 width-auto">
         <img
           alt="U.S. Geological Survey"
@@ -14,18 +14,19 @@
       </div>
     </div>
 
+    <!-- Add content in header -->
+    <div class="grid-col-fill">
+      <ng-content></ng-content>
+    </div>
+
     <!-- USGS site wide search bar -->
     <ng-container *ngIf="!minimal ? renderSearchBar : false">
-      <nshmp-template-search-bar class="search-bar grid-col-12 mobile-lg:grid-col">
-      </nshmp-template-search-bar>
+      <nshmp-template-search-bar class="search-bar grid-col-auto"> </nshmp-template-search-bar>
     </ng-container>
 
-    <!-- Header controls and site navigation -->
-    <div class="grid-col-8 mobile-lg:grid-col-4 desktop:grid-col-2">
+    <!-- Site navigation -->
+    <div class="grid-col-auto">
       <div class="grid-row float-right">
-        <!-- Add content next to dropdown menu -->
-        <ng-content></ng-content>
-
         <!-- Header dropdown menu -->
         <nshmp-template-navigation class="margin-x-1" [navigationList]="navigationList">
         </nshmp-template-navigation>
diff --git a/projects/nshmp-template/src/lib/components/main-page/main-page.component.scss b/projects/nshmp-template/src/lib/components/main-page/main-page.component.scss
index 107fbff3cd56c540241ecd332f6ad2f6d4f45b01..77b58f7ca7d41dea95120b88f0a82647eec27b4e 100644
--- a/projects/nshmp-template/src/lib/components/main-page/main-page.component.scss
+++ b/projects/nshmp-template/src/lib/components/main-page/main-page.component.scss
@@ -11,4 +11,5 @@ main {
   order: 0;
   flex: 1 1 auto;
   align-self: auto;
+  height: 100%;
 }
diff --git a/projects/nshmp-template/src/lib/nshmp-template.module.ts b/projects/nshmp-template/src/lib/nshmp-template.module.ts
index 905681ac813ee829b1b82251217edfbfa6d09cba..6b1750f6b35575aef8b895a7a9fdf0535cd37179 100644
--- a/projects/nshmp-template/src/lib/nshmp-template.module.ts
+++ b/projects/nshmp-template/src/lib/nshmp-template.module.ts
@@ -1,10 +1,11 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 
 import { NshmpLayoutModule } from './modules/nshmp-layout.module';
 
 @NgModule({
-  imports: [NshmpLayoutModule, RouterModule.forRoot([])],
+  imports: [NshmpLayoutModule, BrowserAnimationsModule, RouterModule.forRoot([])],
   exports: [NshmpLayoutModule]
 })
 export class NshmpTemplateModuleForRoot {}
@@ -16,7 +17,7 @@ export class NshmpTemplateModuleForRoot {}
  * RouterModule.forRoot() must call NshmpTemplateModule.forRoot()
  */
 @NgModule({
-  imports: [NshmpLayoutModule],
+  imports: [NshmpLayoutModule, BrowserAnimationsModule],
   exports: [NshmpLayoutModule]
 })
 export class NshmpTemplateModule {