diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index d2c10861851c9070702e2e7af08957d8cc33a088..609fbccf5e3687acd59834654daa2609685fb331 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -4,7 +4,7 @@ variables:
   IMAGE_NAME: ${CODE_REGISTRY_IMAGE}/${CI_PROJECT_NAME}:${ENVIRONMENT}-${CI_COMMIT_SHORT_SHA}
   UPSTREAM_PATH: ghsc/nshmp/nshmp-apps
 
-image: ${CI_REGISTRY}/devops/images/usgs/node:20
+image: ${CI_REGISTRY}/devops/images/usgs/node:lts
 
 # Do not run for merge requests
 workflow:
diff --git a/package-lock.json b/package-lock.json
index be43e15d3ad12334bf1019afc9915660c6e005cd..52e209421dbeb07332a00c2e5ebce9e56751c953 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,8 +21,8 @@
         "@bluehalo/ngx-leaflet": "^19.0.0",
         "@compodoc/compodoc": "^1.1.26",
         "@ghsc/disagg-d3": "^0.13.0",
-        "@ghsc/nshmp-lib-ng": "^19.0.0",
-        "@ghsc/nshmp-template": "^19.1.1",
+        "@ghsc/nshmp-lib-ng": "^19.2.2",
+        "@ghsc/nshmp-template": "^19.2.4",
         "@ghsc/nshmp-utils-ts": "^3.12.1",
         "angular-plotly.js": "^6.0.0",
         "d3": "^7.9.0",
@@ -4852,9 +4852,9 @@
       }
     },
     "node_modules/@ghsc/nshmp-lib-ng": {
-      "version": "19.0.0",
-      "resolved": "https://code.usgs.gov/api/v4/projects/12416/packages/npm/@ghsc/nshmp-lib-ng/-/@ghsc/nshmp-lib-ng-19.0.0.tgz",
-      "integrity": "sha1-bkwGldODNQFdbEMnMhOxFf8mp50=",
+      "version": "19.2.2",
+      "resolved": "https://code.usgs.gov/api/v4/projects/12416/packages/npm/@ghsc/nshmp-lib-ng/-/@ghsc/nshmp-lib-ng-19.2.2.tgz",
+      "integrity": "sha1-qRBBKQrd6vYmo+IGz73WI9QIjM8=",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -4864,9 +4864,9 @@
       }
     },
     "node_modules/@ghsc/nshmp-template": {
-      "version": "19.1.1",
-      "resolved": "https://code.usgs.gov/api/v4/projects/1416/packages/npm/@ghsc/nshmp-template/-/@ghsc/nshmp-template-19.1.1.tgz",
-      "integrity": "sha1-p55HT0oEhcSv9ogKZJ33/2CoJc4=",
+      "version": "19.2.4",
+      "resolved": "https://code.usgs.gov/api/v4/projects/1416/packages/npm/@ghsc/nshmp-template/-/@ghsc/nshmp-template-19.2.4.tgz",
+      "integrity": "sha1-YniUKBo7ycH/P7YuVE57oo2EWWQ=",
       "dependencies": {
         "tslib": "^2.3.1"
       },
diff --git a/package.json b/package.json
index 23890c4e6a976ff3c90cf18778c74c130550954f..c03496b4b176c902c8e6a00676d934c1c998e716 100644
--- a/package.json
+++ b/package.json
@@ -45,8 +45,8 @@
     "@bluehalo/ngx-leaflet": "^19.0.0",
     "@compodoc/compodoc": "^1.1.26",
     "@ghsc/disagg-d3": "^0.13.0",
-    "@ghsc/nshmp-lib-ng": "^19.0.0",
-    "@ghsc/nshmp-template": "^19.1.1",
+    "@ghsc/nshmp-lib-ng": "^19.2.2",
+    "@ghsc/nshmp-template": "^19.2.4",
     "@ghsc/nshmp-utils-ts": "^3.12.1",
     "angular-plotly.js": "^6.0.0",
     "d3": "^7.9.0",
diff --git a/projects/nshmp-apps/cypress/integration/dev/math/exceedance-explorer/exceedance-explorer.spec.ts b/projects/nshmp-apps/cypress/integration/dev/math/exceedance-explorer/exceedance-explorer.spec.ts
index 90965311560ac7ee361e1f994d61561fad014eab..f3f644ecbf872a6b324b372914781867d357d735 100644
--- a/projects/nshmp-apps/cypress/integration/dev/math/exceedance-explorer/exceedance-explorer.spec.ts
+++ b/projects/nshmp-apps/cypress/integration/dev/math/exceedance-explorer/exceedance-explorer.spec.ts
@@ -20,7 +20,7 @@ describe('Exceedance Explorer Application', () => {
     utils.changePlotSettings('.exceedance-plot', '.exceedance-settings');
 
     it('Has default plot', () => {
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find('plotly-plot')
         .should('be.visible');
     });
diff --git a/projects/nshmp-apps/cypress/integration/hazard/disagg/disagg.spec.ts b/projects/nshmp-apps/cypress/integration/hazard/disagg/disagg.spec.ts
index ade920cfaf8e2776f7ff0c788f974c6ab1ed7638..ec8be6590f3fb6029400c1508384b9e411c544f2 100644
--- a/projects/nshmp-apps/cypress/integration/hazard/disagg/disagg.spec.ts
+++ b/projects/nshmp-apps/cypress/integration/hazard/disagg/disagg.spec.ts
@@ -34,7 +34,7 @@ describe('Disagg Application', () => {
         plotClass: 'hazard-lib-disagg-plot',
       });
 
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find('.export-button')
         .scrollIntoView()
         .click();
@@ -47,7 +47,7 @@ describe('Disagg Application', () => {
         plotClass: 'hazard-lib-disagg-plot',
       });
 
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find('.summary')
         .find('.summary-report')
         .scrollIntoView()
@@ -68,25 +68,25 @@ describe('Disagg Application', () => {
 
       cy.get('.cdk-overlay-container').as('overlay');
 
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find('.component-select')
         .find('mat-select')
         .should('be.visible')
         .click();
       cy.get('@overlay').find('mat-option').should('not.exist');
 
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find('.export-button')
         .should('be.visible')
         .should('not.be.enabled');
 
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find('.summary')
         .find('app-disagg-summary')
         .scrollIntoView()
         .should('not.be.visible');
 
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find('.summary')
         .find('app-disagg-contributors')
         .scrollIntoView()
@@ -96,7 +96,7 @@ describe('Disagg Application', () => {
         plotClass: 'hazard-lib-disagg-plot',
       });
 
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find('.component-select')
         .scrollIntoView()
         .find('mat-select')
@@ -105,20 +105,20 @@ describe('Disagg Application', () => {
       cy.get('@overlay').find('mat-option').should('have.length.above', 1);
       utils.selectMatOption('Total');
 
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find('.export-button')
         .scrollIntoView()
         .should('be.visible')
         .should('be.enabled')
         .click();
 
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find('.summary')
         .find('app-disagg-summary')
         .scrollIntoView()
         .should('be.visible');
 
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find('.summary')
         .find('app-disagg-contributors')
         .scrollIntoView()
diff --git a/projects/nshmp-apps/cypress/utils/nshmp-template.utils.ts b/projects/nshmp-apps/cypress/utils/nshmp-template.utils.ts
index 86f9982fd2e93d9728f41b4b48c4851bb1ede50c..18cd9977aec361cc6bda4df3bd2e142afbd73621 100644
--- a/projects/nshmp-apps/cypress/utils/nshmp-template.utils.ts
+++ b/projects/nshmp-apps/cypress/utils/nshmp-template.utils.ts
@@ -121,7 +121,7 @@ export function hasNshmpTemplate(navList: NavigationList[]) {
 
 export function hasPlotContent() {
   it('Has plot content', () => {
-    cy.get('nshmp-template-plot-content').should('exist');
+    cy.get('nshmp-template-main-content').should('exist');
   });
 }
 
@@ -129,7 +129,7 @@ export function submitFormCheckPlot(options: CheckPlot) {
   options.intercept =
     options.intercept === undefined ? true : options.intercept;
 
-  cy.get('nshmp-template-plot-content')
+  cy.get('nshmp-template-main-content')
     .find(options.plotClass)
     .then(originalPlot => {
       if (options.intercept) {
@@ -145,7 +145,7 @@ export function submitFormCheckPlot(options: CheckPlot) {
         cy.wait('@service-call');
       }
 
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find(options.plotClass)
         .should(updatedPlot => {
           expect(originalPlot).to.not.equal(updatedPlot);
@@ -157,10 +157,10 @@ export function submitFormCheckPlots(options: CheckPlots) {
   options.intercept =
     options.intercept === undefined ? true : options.intercept;
 
-  cy.get('nshmp-template-plot-content')
+  cy.get('nshmp-template-main-content')
     .find(options.firstPlotClass)
     .then(originalFirstPlot => {
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find(options.secondPlotClass)
         .then(originalSecondPlot => {
           if (options.intercept) {
@@ -178,12 +178,12 @@ export function submitFormCheckPlots(options: CheckPlots) {
             });
           }
 
-          cy.get('nshmp-template-plot-content')
+          cy.get('nshmp-template-main-content')
             .find(options.firstPlotClass)
             .should(updatedFirstPlot => {
               expect(originalFirstPlot).to.not.equal(updatedFirstPlot);
             });
-          cy.get('nshmp-template-plot-content')
+          cy.get('nshmp-template-main-content')
             .find(options.secondPlotClass)
             .should(updatedSecondPlot => {
               expect(originalSecondPlot).to.not.equal(updatedSecondPlot);
@@ -214,9 +214,9 @@ export function togglePlotPanel() {
       .should('be.enabled')
       .as('plot-button');
 
-    cy.get('nshmp-template-plot-content').should('exist');
+    cy.get('nshmp-template-main-content').should('exist');
     cy.get('@plot-button').click();
-    cy.get('nshmp-template-plot-content').should('not.exist');
+    cy.get('nshmp-template-main-content').should('not.exist');
   });
 }
 
diff --git a/projects/nshmp-apps/cypress/utils/plot-lib.utils.ts b/projects/nshmp-apps/cypress/utils/plot-lib.utils.ts
index 3aa50136d37a73519f4a59c4fbda248238d6fe53..7bd671a795b2091857f28dd44e1abf91c567d70c 100644
--- a/projects/nshmp-apps/cypress/utils/plot-lib.utils.ts
+++ b/projects/nshmp-apps/cypress/utils/plot-lib.utils.ts
@@ -14,7 +14,7 @@ export function changePlotSettings(plotClass: string, settingsClass: string) {
         .find(settingsClass)
         .scrollIntoView()
         .as('plot-settings');
-      cy.get('nshmp-template-plot-content')
+      cy.get('nshmp-template-main-content')
         .find(plotClass)
         .scrollIntoView()
         .as('plot');
diff --git a/projects/nshmp-apps/cypress/utils/utils.ts b/projects/nshmp-apps/cypress/utils/utils.ts
index d71198b4e883b5e79ee17a649adee20b8e15c8bd..c5fbc4f1e992de0de6a0846ab13c7eed487fac9a 100644
--- a/projects/nshmp-apps/cypress/utils/utils.ts
+++ b/projects/nshmp-apps/cypress/utils/utils.ts
@@ -1,7 +1,7 @@
 import 'cypress';
 
 export function hasApplicationTab(tabClass: string) {
-  cy.get('nshmp-template-plot-content')
+  cy.get('nshmp-template-main-content')
     .find('mat-tab-group')
     .find(tabClass)
     .should('be.visible')
diff --git a/projects/nshmp-apps/src/app/designmaps/rtgm/app.component.html b/projects/nshmp-apps/src/app/designmaps/rtgm/app.component.html
index cdf8fb7e3520b4e27986db1fdd7d0edf776c1372..464fe56b0043d779f6b76cc773592bb909e855df 100644
--- a/projects/nshmp-apps/src/app/designmaps/rtgm/app.component.html
+++ b/projects/nshmp-apps/src/app/designmaps/rtgm/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
 
     <nshmp-template-settings>
       <app-plot-settings-panel />
diff --git a/projects/nshmp-apps/src/app/designmaps/rtgm/app.component.ts b/projects/nshmp-apps/src/app/designmaps/rtgm/app.component.ts
index 6131c2f823ada3d4f79f9b9e3eab5447bb4c4f5d..b306d8a4ac2dd49f12c736f0c95ebbba3de80559 100644
--- a/projects/nshmp-apps/src/app/designmaps/rtgm/app.component.ts
+++ b/projects/nshmp-apps/src/app/designmaps/rtgm/app.component.ts
@@ -4,7 +4,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
   NshmpTemplateSettingsComponent,
 } from '@ghsc/nshmp-template';
 import {apps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
@@ -21,7 +21,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateControlPanelComponent,
     NshmpTemplateContentContainerComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpLibNgAboutPageComponent,
     NshmpTemplateSettingsComponent,
     ControlPanelComponent,
diff --git a/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-hazard/control-panel-hazard.component.scss b/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-hazard/control-panel-hazard.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..2de7e2145e51a7fd2ddc142b020cd04ff0d5934c 100644
--- a/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-hazard/control-panel-hazard.component.scss
+++ b/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-hazard/control-panel-hazard.component.scss
@@ -0,0 +1,5 @@
+body.small-screen :host ::ng-deep {
+  .form-buttons {
+    width: 100%;
+  }
+}
diff --git a/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-input/control-panel-input.component.html b/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-input/control-panel-input.component.html
index 4ac652ac54d9c398c7c0378b3df7033a3b5f3a62..cacbe97550986aef82698caf8fbba2efb6adb99b 100644
--- a/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-input/control-panel-input.component.html
+++ b/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-input/control-panel-input.component.html
@@ -1,7 +1,7 @@
 <form
   [formGroup]="formGroup"
   class="height-full overflow-auto padding-top-1"
-  (submit)="service.callService()"
+  (submit)="onSubmit()"
 >
   <!-- Building code -->
   <app-building-code-control [control]="formGroup.controls.buildingCode" />
diff --git a/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-input/control-panel-input.component.scss b/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-input/control-panel-input.component.scss
index 479ce114e334096c48ce47bfb3705bd69ef28ea9..32da3bdb5f978637f18e222705e1fb1856a8f4bf 100644
--- a/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-input/control-panel-input.component.scss
+++ b/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-input/control-panel-input.component.scss
@@ -1,3 +1,9 @@
 .hint {
   font-size: 10.9px;
 }
+
+body.small-screen :host ::ng-deep {
+  .form-buttons {
+    width: 100%;
+  }
+}
diff --git a/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-input/control-panel-input.component.ts b/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-input/control-panel-input.component.ts
index 019168b78508826676d1bdc6ea160795db01148f..58e0d805a8f5cd6941a1d6eeb45c7e76c48b09ac 100644
--- a/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-input/control-panel-input.component.ts
+++ b/projects/nshmp-apps/src/app/designmaps/rtgm/components/control-panel-input/control-panel-input.component.ts
@@ -3,7 +3,10 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatError, MatHint, MatInputModule} from '@angular/material/input';
 import {MatFormField, MatSelectModule} from '@angular/material/select';
-import {NshmpLibNgControlPanelButtonsComponent} from '@ghsc/nshmp-lib-ng/nshmp';
+import {
+  NshmpLibNgControlPanelButtonsComponent,
+  NshmpService,
+} from '@ghsc/nshmp-lib-ng/nshmp';
 import {Subscription} from 'rxjs';
 
 import {AppService} from '../../services/app.service';
@@ -32,7 +35,10 @@ export class ControlPanelInputComponent implements OnInit, OnDestroy {
 
   subs: Subscription[] = [];
 
-  constructor(public service: AppService) {}
+  constructor(
+    public service: AppService,
+    private nshmpService: NshmpService,
+  ) {}
 
   ngOnInit(): void {
     const controls = this.formGroup.controls;
@@ -55,4 +61,12 @@ export class ControlPanelInputComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.subs.forEach(sub => sub.unsubscribe());
   }
+
+  /**
+   * On form submit.
+   */
+  onSubmit(): void {
+    this.service.callService();
+    this.nshmpService.selectPlotControl();
+  }
 }
diff --git a/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/app.component.html b/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/app.component.html
index ef6d2a8806a58e8945043ed44ceb9b67c8db67b7..996e7c48b91f5ffa312d91013ff4dd70132b8a8a 100644
--- a/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/app.component.html
+++ b/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/app.component.html
@@ -6,9 +6,9 @@
     </nshmp-template-control-panel>
 
     <!-- Plots -->
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
 
     <!-- Settings -->
     <nshmp-template-settings>
diff --git a/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/app.component.ts b/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/app.component.ts
index e892e89171ac879260502c8c9a6cd3cafe8541b8..199bd29b0890fdb04ffe692abb2de4a759a88618 100644
--- a/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/app.component.ts
+++ b/projects/nshmp-apps/src/app/dev/gmm/hanging-wall-effects/app.component.ts
@@ -4,7 +4,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
   NshmpTemplateSettingsComponent,
 } from '@ghsc/nshmp-template';
 import {devApps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
@@ -21,7 +21,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateContentContainerComponent,
     NshmpTemplateControlPanelComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpTemplateSettingsComponent,
     NshmpLibNgAboutPageComponent,
     ControlPanelComponent,
diff --git a/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/app.component.html b/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/app.component.html
index 375b90fa6d390e2841ee1455e38a1a4a9a7a7906..e86be1762c08239a2f7139d58a004fc4623ac6f7 100644
--- a/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/app.component.html
+++ b/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/app.component.html
@@ -6,9 +6,9 @@
     </nshmp-template-control-panel>
 
     <!-- Plots -->
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
 
     <!-- Settings -->
     <nshmp-template-settings>
diff --git a/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/app.component.ts b/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/app.component.ts
index f239fca482c0df32f72f8d4ee681ab4cee84c87b..22774c738d84bc2cae526435564bb7976ca46082 100644
--- a/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/app.component.ts
+++ b/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/app.component.ts
@@ -5,7 +5,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
   NshmpTemplateSettingsComponent,
 } from '@ghsc/nshmp-template';
 import {devApps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
@@ -22,7 +22,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateContentContainerComponent,
     NshmpTemplateControlPanelComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpTemplateSettingsComponent,
     NshmpLibNgHazardProvisionalModelComponent,
     NshmpLibNgAboutPageComponent,
diff --git a/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/components/plots/plots.component.html b/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/components/plots/plots.component.html
index 14318223902f6a93aefcd651555d5c8f3c5af5ce..895ed83f7046eaeed678ee70d7dd190cfe758fc4 100644
--- a/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/components/plots/plots.component.html
+++ b/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/components/plots/plots.component.html
@@ -6,8 +6,8 @@
       <div
         class="grid-col-12 plots-panel widescreen:grid-col-6"
         [ngClass]="{
-          'panels-opened': panelsOpened$ | async,
-          'desktop-lg:grid-col-6': panelsClosed$ | async,
+          'panels-opened': panelsOpened(),
+          'desktop-lg:grid-col-6': panelsClosed(),
         }"
       >
         <mat-accordion>
diff --git a/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/components/plots/plots.component.ts b/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/components/plots/plots.component.ts
index 21c9fae9edc5b29a6b251a7bfdc62ad28d544ffd..bec0fcca3f63ef4c8d1f3222c52addfe652ab996 100644
--- a/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/components/plots/plots.component.ts
+++ b/projects/nshmp-apps/src/app/dev/hazard/dynamic-compare/components/plots/plots.component.ts
@@ -1,4 +1,4 @@
-import {AsyncPipe, NgClass} from '@angular/common';
+import {NgClass} from '@angular/common';
 import {Component, computed, Signal} from '@angular/core';
 import {MatDivider} from '@angular/material/divider';
 import {
@@ -13,9 +13,8 @@ import {
   NshmpLibNgPlotComponent,
   NshmpLibNgPlotsContainerComponent,
 } from '@ghsc/nshmp-lib-ng/plot';
-import {AppControlsService} from '@ghsc/nshmp-template';
+import {HeaderService} from '@ghsc/nshmp-template';
 import {PlotlyPlot} from '@ghsc/nshmp-utils-ts/libs/plotly';
-import {map} from 'rxjs';
 
 import {Plots} from '../../models/state.model';
 import {AppService} from '../../services/app.service';
@@ -50,7 +49,6 @@ interface PlotInfo {
     MatExpansionPanelTitle,
     MatDivider,
     ParameterSummaryComponent,
-    AsyncPipe,
   ],
   selector: 'app-plots',
   styleUrl: './plots.component.scss',
@@ -88,21 +86,17 @@ export class PlotsComponent {
   );
 
   /** Wheather both the control and settings panels are closed */
-  panelsClosed$ = this.controlsService.controlsChanged.pipe(
-    map(
-      () =>
-        !this.controlsService.controlPanelIsSelected &&
-        !this.controlsService.settingsIsSelected,
-    ),
+  panelsClosed = computed(
+    () =>
+      !this.headerService.controlPanelSelected() &&
+      !this.headerService.settingsSelected(),
   );
 
   /** Wheather both the control and settings panels are opened */
-  panelsOpened$ = this.controlsService.controlsChanged.pipe(
-    map(
-      () =>
-        this.controlsService.controlPanelIsSelected &&
-        this.controlsService.settingsIsSelected,
-    ),
+  panelsOpened = computed(
+    () =>
+      this.headerService.controlPanelSelected() &&
+      this.headerService.settingsSelected(),
   );
 
   /** The plots */
@@ -132,6 +126,6 @@ export class PlotsComponent {
 
   constructor(
     private service: AppService,
-    private controlsService: AppControlsService,
+    private headerService: HeaderService,
   ) {}
 }
diff --git a/projects/nshmp-apps/src/app/dev/math/exceedance-explorer/app.component.html b/projects/nshmp-apps/src/app/dev/math/exceedance-explorer/app.component.html
index 5e121fa46dc54ead22e5a80295f01cda9ae6bb44..3e40d662b9aab1ac6d28633c8813a37ca0b52ad3 100644
--- a/projects/nshmp-apps/src/app/dev/math/exceedance-explorer/app.component.html
+++ b/projects/nshmp-apps/src/app/dev/math/exceedance-explorer/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-plot />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
 
     <nshmp-template-settings>
       <app-plot-settings-panel />
diff --git a/projects/nshmp-apps/src/app/dev/math/exceedance-explorer/app.component.ts b/projects/nshmp-apps/src/app/dev/math/exceedance-explorer/app.component.ts
index 6fd5c89d286d1129fc2041c71bf6d92bcc257456..578861498c75149a6e647c51ac2135b41c83ea0f 100644
--- a/projects/nshmp-apps/src/app/dev/math/exceedance-explorer/app.component.ts
+++ b/projects/nshmp-apps/src/app/dev/math/exceedance-explorer/app.component.ts
@@ -4,7 +4,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
   NshmpTemplateSettingsComponent,
 } from '@ghsc/nshmp-template';
 import {devApps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
@@ -25,7 +25,7 @@ import {PlotSettingsPanelComponent} from './components/plot-settings-panel/plot-
     NshmpLibNgTemplateComponent,
     NshmpTemplateContentContainerComponent,
     NshmpTemplateControlPanelComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpTemplateSettingsComponent,
     NshmpLibNgAboutPageComponent,
     ControlPanelComponent,
diff --git a/projects/nshmp-apps/src/app/gmm/distance/app.component.html b/projects/nshmp-apps/src/app/gmm/distance/app.component.html
index cdf8fb7e3520b4e27986db1fdd7d0edf776c1372..464fe56b0043d779f6b76cc773592bb909e855df 100644
--- a/projects/nshmp-apps/src/app/gmm/distance/app.component.html
+++ b/projects/nshmp-apps/src/app/gmm/distance/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
 
     <nshmp-template-settings>
       <app-plot-settings-panel />
diff --git a/projects/nshmp-apps/src/app/gmm/distance/app.component.ts b/projects/nshmp-apps/src/app/gmm/distance/app.component.ts
index 9c546cadf268b33ef1bf085b5580f48b67909ece..92ff39db7b83e61306b4a9aba84c0a3e48cce1d3 100644
--- a/projects/nshmp-apps/src/app/gmm/distance/app.component.ts
+++ b/projects/nshmp-apps/src/app/gmm/distance/app.component.ts
@@ -4,7 +4,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
   NshmpTemplateSettingsComponent,
 } from '@ghsc/nshmp-template';
 import {apps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
@@ -28,7 +28,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateContentContainerComponent,
     NshmpTemplateControlPanelComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpTemplateSettingsComponent,
     NshmpLibNgAboutPageComponent,
     ControlPanelComponent,
diff --git a/projects/nshmp-apps/src/app/gmm/magnitude/app.component.html b/projects/nshmp-apps/src/app/gmm/magnitude/app.component.html
index cdf8fb7e3520b4e27986db1fdd7d0edf776c1372..464fe56b0043d779f6b76cc773592bb909e855df 100644
--- a/projects/nshmp-apps/src/app/gmm/magnitude/app.component.html
+++ b/projects/nshmp-apps/src/app/gmm/magnitude/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
 
     <nshmp-template-settings>
       <app-plot-settings-panel />
diff --git a/projects/nshmp-apps/src/app/gmm/magnitude/app.component.ts b/projects/nshmp-apps/src/app/gmm/magnitude/app.component.ts
index 8e288d5cb14f0d75daf69dd92da153bded6c3ef4..1d80636ca79111cd32e01f4b04350a7ed4deed28 100644
--- a/projects/nshmp-apps/src/app/gmm/magnitude/app.component.ts
+++ b/projects/nshmp-apps/src/app/gmm/magnitude/app.component.ts
@@ -4,7 +4,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
   NshmpTemplateSettingsComponent,
 } from '@ghsc/nshmp-template';
 import {apps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
@@ -28,7 +28,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateControlPanelComponent,
     NshmpTemplateContentContainerComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpTemplateSettingsComponent,
     NshmpLibNgAboutPageComponent,
     ControlPanelComponent,
diff --git a/projects/nshmp-apps/src/app/gmm/spectra/app.component.html b/projects/nshmp-apps/src/app/gmm/spectra/app.component.html
index cdf8fb7e3520b4e27986db1fdd7d0edf776c1372..464fe56b0043d779f6b76cc773592bb909e855df 100644
--- a/projects/nshmp-apps/src/app/gmm/spectra/app.component.html
+++ b/projects/nshmp-apps/src/app/gmm/spectra/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
 
     <nshmp-template-settings>
       <app-plot-settings-panel />
diff --git a/projects/nshmp-apps/src/app/gmm/spectra/app.component.ts b/projects/nshmp-apps/src/app/gmm/spectra/app.component.ts
index d1b3103672e4af429f72ea2741f18c11721be915..ed3a8c451eb59a684cedfa2fb96870b14cc110fa 100644
--- a/projects/nshmp-apps/src/app/gmm/spectra/app.component.ts
+++ b/projects/nshmp-apps/src/app/gmm/spectra/app.component.ts
@@ -4,7 +4,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
   NshmpTemplateSettingsComponent,
 } from '@ghsc/nshmp-template';
 import {apps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
@@ -28,7 +28,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateControlPanelComponent,
     NshmpTemplateContentContainerComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpTemplateSettingsComponent,
     NshmpLibNgAboutPageComponent,
     ControlPanelComponent,
diff --git a/projects/nshmp-apps/src/app/hazard/disagg/app.component.html b/projects/nshmp-apps/src/app/hazard/disagg/app.component.html
index c38decbf22fd470d2ddc1a1a920fc97f436930d6..12181bf4bed00941ff00faddd624759c4ea3f0a7 100644
--- a/projects/nshmp-apps/src/app/hazard/disagg/app.component.html
+++ b/projects/nshmp-apps/src/app/hazard/disagg/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
   </nshmp-template-content-container>
 
   <!-- Provisional model warning -->
diff --git a/projects/nshmp-apps/src/app/hazard/disagg/app.component.ts b/projects/nshmp-apps/src/app/hazard/disagg/app.component.ts
index 048c8b8bec96ae48bc3076dfd3dadebe82f8e6ae..8b970cb29fafb196c6b0a2c935432769cd5b2dd9 100644
--- a/projects/nshmp-apps/src/app/hazard/disagg/app.component.ts
+++ b/projects/nshmp-apps/src/app/hazard/disagg/app.component.ts
@@ -5,7 +5,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
 } from '@ghsc/nshmp-template';
 import {apps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
 import {navigation} from 'projects/nshmp-apps/src/shared/utils/navigation.utils';
@@ -23,7 +23,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateControlPanelComponent,
     NshmpTemplateContentContainerComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpLibNgAboutPageComponent,
     NshmpLibNgHazardProvisionalModelComponent,
     ControlPanelComponent,
diff --git a/projects/nshmp-apps/src/app/hazard/disagg/components/disagg-contributors/disagg-contributors.component.html b/projects/nshmp-apps/src/app/hazard/disagg/components/disagg-contributors/disagg-contributors.component.html
index f055f198db405f1393b5cae802a1e4099b922a89..7367b3299a9e1a28ad6d4fa65ffbc8529638eb5a 100644
--- a/projects/nshmp-apps/src/app/hazard/disagg/components/disagg-contributors/disagg-contributors.component.html
+++ b/projects/nshmp-apps/src/app/hazard/disagg/components/disagg-contributors/disagg-contributors.component.html
@@ -26,11 +26,9 @@
                 <tr>
                   <th nowrap>
                     Source Set
-                    <mat-icon
-                      class="down-arrow"
-                      aria-label="Down arrow icon"
-                      fontIcon="subdirectory_arrow_right"
-                    />
+                    <mat-icon class="down-arrow" aria-label="Down arrow icon">
+                      subdirectory_arrow_right
+                    </mat-icon>
                     Source
                   </th>
                   <th nowrap>Type</th>
diff --git a/projects/nshmp-apps/src/app/hazard/dynamic/app.component.html b/projects/nshmp-apps/src/app/hazard/dynamic/app.component.html
index 03bdde34cccaca1ef8567a9c19e937c0a8fbd4bd..b7c70d9bdd1656521be13d513dcf150766718885 100644
--- a/projects/nshmp-apps/src/app/hazard/dynamic/app.component.html
+++ b/projects/nshmp-apps/src/app/hazard/dynamic/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
 
     <nshmp-template-settings>
       <app-plot-settings-panel />
diff --git a/projects/nshmp-apps/src/app/hazard/dynamic/app.component.ts b/projects/nshmp-apps/src/app/hazard/dynamic/app.component.ts
index 084042bc4dbc41d1c4debb1fb5ad52e2926ec3af..b1ea4cd94a8be405acdf6edccd9f69898fc3d22c 100644
--- a/projects/nshmp-apps/src/app/hazard/dynamic/app.component.ts
+++ b/projects/nshmp-apps/src/app/hazard/dynamic/app.component.ts
@@ -5,7 +5,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
   NshmpTemplateSettingsComponent,
 } from '@ghsc/nshmp-template';
 import {apps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
@@ -25,7 +25,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateControlPanelComponent,
     NshmpTemplateContentContainerComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpLibNgAboutPageComponent,
     NshmpLibNgHazardProvisionalModelComponent,
     NshmpTemplateSettingsComponent,
diff --git a/projects/nshmp-apps/src/app/hazard/static/app.component.html b/projects/nshmp-apps/src/app/hazard/static/app.component.html
index cdf8fb7e3520b4e27986db1fdd7d0edf776c1372..464fe56b0043d779f6b76cc773592bb909e855df 100644
--- a/projects/nshmp-apps/src/app/hazard/static/app.component.html
+++ b/projects/nshmp-apps/src/app/hazard/static/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
 
     <nshmp-template-settings>
       <app-plot-settings-panel />
diff --git a/projects/nshmp-apps/src/app/hazard/static/app.component.ts b/projects/nshmp-apps/src/app/hazard/static/app.component.ts
index 04a4ef74d335ee23fe5cce8ceeecb12f785f9a6e..903650eabe7f2cd25ffd0b2ae6be5371d55dc163 100644
--- a/projects/nshmp-apps/src/app/hazard/static/app.component.ts
+++ b/projects/nshmp-apps/src/app/hazard/static/app.component.ts
@@ -4,7 +4,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
   NshmpTemplateSettingsComponent,
 } from '@ghsc/nshmp-template';
 import {apps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
@@ -24,7 +24,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateControlPanelComponent,
     NshmpTemplateContentContainerComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpLibNgAboutPageComponent,
     NshmpTemplateSettingsComponent,
     ControlPanelComponent,
diff --git a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/app.component.html b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/app.component.html
index 9e5ed1e206622d1f8b2e8613bb614163b4a295c9..30ea230dcc154436eed88a17184780ff5b9eea39 100644
--- a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/app.component.html
+++ b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
   </nshmp-template-content-container>
 
   <!-- About page -->
diff --git a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/app.component.ts b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/app.component.ts
index 0cbfa4c25a29d435f12de5995d4522976da62776..3c9c639c23497902b6209fc75665385c970fef01 100644
--- a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/app.component.ts
+++ b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/app.component.ts
@@ -4,7 +4,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
 } from '@ghsc/nshmp-template';
 import {internalApps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
 import {internalNavigation} from 'projects/nshmp-apps/src/shared/utils/navigation.utils';
@@ -27,7 +27,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateContentContainerComponent,
     NshmpTemplateControlPanelComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpLibNgAboutPageComponent,
     ControlPanelComponent,
     ContentComponent,
diff --git a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/content/content.component.html b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/content/content.component.html
index e3d7925dde9d8b898b5380ac607eeb5bdf76c0ba..d5e18ca03eaa4cd718f81c7ec8b15ffe97a396e4 100644
--- a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/content/content.component.html
+++ b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/content/content.component.html
@@ -27,19 +27,15 @@
       <span class="logs-toolbar-item">
         <mat-button-toggle-group>
           <mat-button-toggle matTooltip="Scroll to Top" (click)="scrollTop()">
-            <mat-icon
-              aria-label="Scroll to top"
-              fontIcon="vertical_align_top"
-            />
+            <mat-icon aria-label="Scroll to top"> vertical_align_top </mat-icon>
           </mat-button-toggle>
           <mat-button-toggle
             matTooltip="Scroll to Bottom"
             (click)="scrollBottom()"
           >
-            <mat-icon
-              aria-label="Scroll to bottom"
-              fontIcon="vertical_align_bottom"
-            />
+            <mat-icon aria-label="Scroll to bottom">
+              vertical_align_bottom
+            </mat-icon>
           </mat-button-toggle>
         </mat-button-toggle-group>
       </span>
diff --git a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/control-panel/control-panel.component.html b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/control-panel/control-panel.component.html
index 71038f6422fb91cf00d1385c9bbbf0f66d1228cd..d5ded724e9343c090f7fbbe90199f892fba1fa95 100644
--- a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/control-panel/control-panel.component.html
+++ b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/control-panel/control-panel.component.html
@@ -7,7 +7,9 @@
   <!-- Buttons -->
   <div
     class="form-buttons form-buttons--left grid-row"
-    [ngClass]="nshmpService.controlPanelButtonClass$ | async"
+    [ngClass]="{
+      'full-width': (nshmpTemplateService.isSmallScreen$ | async) === true,
+    }"
   >
     <div class="grid-col-6 padding-x-1">
       <button
diff --git a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/control-panel/control-panel.component.ts b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/control-panel/control-panel.component.ts
index af369d2ad3b2e69f4be3bdc12ac0c8474f918d6a..d828dff8cbe9230b80f64ccfb8b09e6d4f9e533e 100644
--- a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/control-panel/control-panel.component.ts
+++ b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/control-panel/control-panel.component.ts
@@ -5,6 +5,7 @@ import {MatButton} from '@angular/material/button';
 import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {NshmpService} from '@ghsc/nshmp-lib-ng/nshmp';
+import {NshmpTemplateService} from '@ghsc/nshmp-template';
 
 import {AppService} from '../../services/app.service';
 
@@ -36,6 +37,7 @@ export class ControlPanelComponent {
   constructor(
     public service: AppService,
     public nshmpService: NshmpService,
+    public nshmpTemplateService: NshmpTemplateService,
   ) {}
 
   /**
diff --git a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/snack-bar/snack-bar.component.html b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/snack-bar/snack-bar.component.html
index d39af39529127541c76ee835bf0b5e3c90c5ab4c..d5fca73b56ae72a0887b31be8a6c3c58ddb89abb 100644
--- a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/snack-bar/snack-bar.component.html
+++ b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/snack-bar/snack-bar.component.html
@@ -15,7 +15,7 @@
     class="download-button"
     (click)="download()"
   >
-    <mat-icon aria-label="Download from cloud" fontIcon="cloud_download" />
+    <mat-icon aria-label="Download from cloud"> cloud_download </mat-icon>
   </button>
 
   <button
@@ -24,6 +24,6 @@
     matTooltip="Click to dismiss"
     (click)="dismiss()"
   >
-    <mat-icon aria-label="Close" fontIcon="close" />
+    <mat-icon aria-label="Close"> close </mat-icon>
   </button>
 </span>
diff --git a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/snack-bar/snack-bar.component.ts b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/snack-bar/snack-bar.component.ts
index 1fb833f5f8c9bdb6d796f8de2302128bb84723f7..e031177e551ccb1755d6c55dc635201f163a20bc 100644
--- a/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/snack-bar/snack-bar.component.ts
+++ b/projects/nshmp-apps/src/app/internal/aws/check-haz-jobs/components/snack-bar/snack-bar.component.ts
@@ -9,6 +9,7 @@ import {
   MatSnackBarLabel,
 } from '@angular/material/snack-bar';
 import {MatTooltip} from '@angular/material/tooltip';
+import {NSHMP_TEMPLATE_PROVIDERS} from '@ghsc/nshmp-template';
 
 /**
  * Angular material snackbar to show link to download results.
@@ -24,6 +25,7 @@ import {MatTooltip} from '@angular/material/tooltip';
     MatSnackBarAction,
     MatIcon,
   ],
+  providers: [NSHMP_TEMPLATE_PROVIDERS],
   selector: 'app-snack-bar',
   styleUrl: './snack-bar.component.scss',
   templateUrl: './snack-bar.component.html',
diff --git a/projects/nshmp-apps/src/app/internal/aws/haz-job-history/app.component.html b/projects/nshmp-apps/src/app/internal/aws/haz-job-history/app.component.html
index 9e5ed1e206622d1f8b2e8613bb614163b4a295c9..30ea230dcc154436eed88a17184780ff5b9eea39 100644
--- a/projects/nshmp-apps/src/app/internal/aws/haz-job-history/app.component.html
+++ b/projects/nshmp-apps/src/app/internal/aws/haz-job-history/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
   </nshmp-template-content-container>
 
   <!-- About page -->
diff --git a/projects/nshmp-apps/src/app/internal/aws/haz-job-history/app.component.ts b/projects/nshmp-apps/src/app/internal/aws/haz-job-history/app.component.ts
index 464e028556fe38c849fb1104e478cfbd4760218e..c40822124fd026bf96868bc665a7acd24ce7fa87 100644
--- a/projects/nshmp-apps/src/app/internal/aws/haz-job-history/app.component.ts
+++ b/projects/nshmp-apps/src/app/internal/aws/haz-job-history/app.component.ts
@@ -4,7 +4,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
 } from '@ghsc/nshmp-template';
 import {internalApps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
 import {internalNavigation} from 'projects/nshmp-apps/src/shared/utils/navigation.utils';
@@ -25,7 +25,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateContentContainerComponent,
     NshmpTemplateControlPanelComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpLibNgAboutPageComponent,
     ControlPanelComponent,
     ContentComponent,
diff --git a/projects/nshmp-apps/src/app/internal/aws/haz-job-history/components/control-panel/control-panel.component.html b/projects/nshmp-apps/src/app/internal/aws/haz-job-history/components/control-panel/control-panel.component.html
index 314f2f13c9eea11c0484ce2128699af1f4c73f37..905b0609ce6f04a5198be5f06da5391e91bb2144 100644
--- a/projects/nshmp-apps/src/app/internal/aws/haz-job-history/components/control-panel/control-panel.component.html
+++ b/projects/nshmp-apps/src/app/internal/aws/haz-job-history/components/control-panel/control-panel.component.html
@@ -21,7 +21,9 @@
   <!-- Buttons -->
   <div
     class="form-buttons form-buttons--left grid-row"
-    [ngClass]="nshmpService.controlPanelButtonClass$ | async"
+    [ngClass]="{
+      'full-width': (nshmpTemplateService.isSmallScreen$ | async) === true,
+    }"
   >
     <div class="grid-col-12 padding-x-1">
       <button
diff --git a/projects/nshmp-apps/src/app/internal/aws/haz-job-history/components/control-panel/control-panel.component.ts b/projects/nshmp-apps/src/app/internal/aws/haz-job-history/components/control-panel/control-panel.component.ts
index fc4f642643739a55f8cf106360c3f4931a312b74..00b5e267f4358c7d327918bcdba38598937c4ae0 100644
--- a/projects/nshmp-apps/src/app/internal/aws/haz-job-history/components/control-panel/control-panel.component.ts
+++ b/projects/nshmp-apps/src/app/internal/aws/haz-job-history/components/control-panel/control-panel.component.ts
@@ -8,6 +8,7 @@ import {MatInput} from '@angular/material/input';
 import {MatSelect} from '@angular/material/select';
 import {JobStatus} from '@ghsc/nshmp-lib-ng/aws';
 import {NshmpService, nshmpUtils} from '@ghsc/nshmp-lib-ng/nshmp';
+import {NshmpTemplateService} from '@ghsc/nshmp-template';
 import {Subscription} from 'rxjs';
 
 import {AppService} from '../../services/app.service';
@@ -43,6 +44,7 @@ export class ControlPanelComponent implements OnInit, OnDestroy {
 
   constructor(
     public nshmpService: NshmpService,
+    public nshmpTemplateService: NshmpTemplateService,
     private service: AppService,
   ) {}
 
diff --git a/projects/nshmp-apps/src/app/internal/aws/submit-haz-jobs/components/form/form.component.html b/projects/nshmp-apps/src/app/internal/aws/submit-haz-jobs/components/form/form.component.html
index a702754e061f06a5d383234f411333007271de71..83b08889787220f98934dd7e4f5c5740f4504391 100644
--- a/projects/nshmp-apps/src/app/internal/aws/submit-haz-jobs/components/form/form.component.html
+++ b/projects/nshmp-apps/src/app/internal/aws/submit-haz-jobs/components/form/form.component.html
@@ -63,7 +63,7 @@
                   "
                 />
                 <span matPrefix>
-                  <mat-icon aria-label="Memory icon" fontIcon="memory" />
+                  <mat-icon aria-label="Memory icon">memory</mat-icon>
                 </span>
                 <a
                   matSuffix
@@ -73,7 +73,7 @@
                   target="__blank"
                   color="primary"
                 >
-                  <mat-icon aria-label="Info icon" fontIcon="info" />
+                  <mat-icon aria-label="Info icon">info</mat-icon>
                 </a>
                 <mat-hint> The AWS EC2 instance type </mat-hint>
                 <mat-error>Must not contain spaces</mat-error>
@@ -110,7 +110,7 @@
                   [formControl]="form.controls.nshmpConfig.controls.email"
                 />
                 <span matPrefix>
-                  <mat-icon aria-label="Email icon" fontIcon="email" />
+                  <mat-icon aria-label="Email icon">email</mat-icon>
                 </span>
                 <mat-error>Must be a valid USGS email</mat-error>
                 <mat-hint>Email to recieve notifications from AWS</mat-hint>
@@ -138,7 +138,7 @@
                       "
                     />
                     <span matPrefix>
-                      <mat-icon aria-label="Code icon" fontIcon="code" />
+                      <mat-icon aria-label="Code icon">code</mat-icon>
                     </span>
                     <a
                       matSuffix
@@ -148,7 +148,7 @@
                       target="__blank"
                       color="primary"
                     >
-                      <mat-icon aria-label="Info icon" fontIcon="info" />
+                      <mat-icon aria-label="Info icon">info</mat-icon>
                     </a>
                     <mat-error>
                       Must be a valid URL ending in <code>.git</code>
@@ -170,7 +170,7 @@
                       "
                     />
                     <span matPrefix>
-                      <mat-icon aria-label="Code icon" fontIcon="code" />
+                      <mat-icon aria-label="Code icon">code</mat-icon>
                     </span>
                     <mat-hint>
                       The branch, tag, or commit of the nshmp-haz repository
@@ -195,7 +195,7 @@
                       }
                     </mat-select>
                     <span matPrefix>
-                      <mat-icon aria-label="Code icon" fontIcon="code" />
+                      <mat-icon aria-label="Code icon">code</mat-icon>
                     </span>
                     <a
                       matSuffix
@@ -205,7 +205,7 @@
                       target="__blank"
                       color="primary"
                     >
-                      <mat-icon aria-label="Info icon" fontIcon="info" />
+                      <mat-icon aria-label="Info icon">info</mat-icon>
                     </a>
                     <mat-hint>Java class name of class to run</mat-hint>
                   </mat-form-field>
@@ -238,7 +238,7 @@
                           "
                         />
                         <span matPrefix>
-                          <mat-icon aria-label="Code icon" fontIcon="code" />
+                          <mat-icon aria-label="Code icon">code</mat-icon>
                         </span>
                         <a
                           matSuffix
@@ -248,7 +248,7 @@
                           target="__blank"
                           color="primary"
                         >
-                          <mat-icon aria-label="Info icon" fontIcon="info" />
+                          <mat-icon aria-label="Info icon">info</mat-icon>
                         </a>
                         <mat-error>
                           Must be a valid URL ending in <code>.git</code>
@@ -276,7 +276,7 @@
                           "
                         />
                         <span matPrefix>
-                          <mat-icon aria-label="Code icon" fontIcon="code" />
+                          <mat-icon aria-label="Code icon">code</mat-icon>
                         </span>
                         <mat-error>
                           Must be a valid URL ending in <code>.git</code>
@@ -311,7 +311,7 @@
                       "
                     />
                     <span matPrefix>
-                      <mat-icon aria-label="Plot icon" fontIcon="show_chart" />
+                      <mat-icon aria-label="Plot icon">show_chart</mat-icon>
                     </span>
                     <a
                       matSuffix
@@ -321,7 +321,7 @@
                       target="__blank"
                       color="primary"
                     >
-                      <mat-icon aria-label="Info icon" fontIcon="info" />
+                      <mat-icon aria-label="Info icon">info</mat-icon>
                     </a>
                     <mat-hint>The Git URL to the NSHM repository</mat-hint>
                     <mat-error>
@@ -343,9 +343,7 @@
                       "
                     />
                     <span matPrefix>
-                      <mat-icon aria-label="Code icon" fontIcon="code"
-                        >code</mat-icon
-                      >
+                      <mat-icon aria-label="Code icon">code</mat-icon>
                     </span>
                     <mat-error>Must not contain spaces</mat-error>
                     <mat-hint>
@@ -366,7 +364,7 @@
                       "
                     />
                     <span matPrefix>
-                      <mat-icon aria-label="Folder icon" fontIcon="folder" />
+                      <mat-icon aria-label="Folder icon">folder</mat-icon>
                     </span>
                     <mat-error>Must not contain spaces</mat-error>
                     <mat-hint>Path inside tarball to model</mat-hint>
@@ -412,7 +410,7 @@
                       "
                     />
                     <span matPrefix>
-                      <mat-icon aria-label="Note icon" fontIcon="note_add" />
+                      <mat-icon aria-label="Note icon">note_add</mat-icon>
                     </span>
                     <a
                       matSuffix
@@ -422,7 +420,7 @@
                       target="__blank"
                       color="primary"
                     >
-                      <mat-icon aria-label="Info icon" fontIcon="info" />
+                      <mat-icon aria-label="Info icon">info</mat-icon>
                     </a>
                     <mat-error> Must be a valid URL </mat-error>
                     <mat-hint
diff --git a/projects/nshmp-apps/src/app/internal/aws/submit-haz-jobs/components/history/history.component.html b/projects/nshmp-apps/src/app/internal/aws/submit-haz-jobs/components/history/history.component.html
index 100d4e3dbd24d262896af3980b10fe667d71856a..c3018fa9ad6098e5f978e2cab24a336db9bf1d5a 100644
--- a/projects/nshmp-apps/src/app/internal/aws/submit-haz-jobs/components/history/history.component.html
+++ b/projects/nshmp-apps/src/app/internal/aws/submit-haz-jobs/components/history/history.component.html
@@ -70,7 +70,7 @@
                     matTooltip="Download the configuration file"
                     (click)="downloadConfiguration(serviceResponse)"
                   >
-                    <mat-icon fontIcon="download" aria-label="Download icon" />
+                    <mat-icon aria-label="Download icon">download</mat-icon>
                   </button>
 
                   <button
@@ -81,7 +81,7 @@
                       service.clearHistory(serviceResponse.response.jobId)
                     "
                   >
-                    <mat-icon fontIcon="delete" aria-label="Delete icon" />
+                    <mat-icon aria-label="Delete icon">delete</mat-icon>
                   </button>
                 </div>
               </mat-card-actions>
diff --git a/projects/nshmp-apps/src/app/internal/aws/terminate-haz-jobs/components/content/content.component.html b/projects/nshmp-apps/src/app/internal/aws/terminate-haz-jobs/components/content/content.component.html
index c227eda608e5ae7244be3ed05f16ff6432bdad36..a741a95660f2b880eec84a44d294860d246fca82 100644
--- a/projects/nshmp-apps/src/app/internal/aws/terminate-haz-jobs/components/content/content.component.html
+++ b/projects/nshmp-apps/src/app/internal/aws/terminate-haz-jobs/components/content/content.component.html
@@ -11,7 +11,7 @@
         <mat-label>Job ID <span class="form-required">*</span></mat-label>
         <input matInput type="text" [formControl]="form.controls.id" />
         <div matSuffix matTooltip="The id of the running job to terminate">
-          <mat-icon aria-label="Info icon" fontIcon="info" />
+          <mat-icon aria-label="Info icon">info</mat-icon>
         </div>
         <mat-hint>The id of the running job to terminate</mat-hint>
       </mat-form-field>
diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/app.component.html b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/app.component.html
index 7b42a2066f03e462b5cd7988f2479fa9f14f278b..3f2a7bef6075f20daf89a70e6fd188a2bffde42f 100644
--- a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/app.component.html
+++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
 
     <nshmp-template-settings>
       <app-plot-settings-panel />
diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/app.component.ts b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/app.component.ts
index 32e2387a5ea476e2eea66f7f1319d555714f857d..c1327eec073f7986e907c92e2c080bc948d183b1 100644
--- a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/app.component.ts
+++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/app.component.ts
@@ -4,7 +4,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
   NshmpTemplateSettingsComponent,
 } from '@ghsc/nshmp-template';
 import {apps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
@@ -21,7 +21,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateControlPanelComponent,
     NshmpTemplateContentContainerComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpLibNgAboutPageComponent,
     NshmpTemplateSettingsComponent,
     ControlPanelComponent,
diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/control-panel/control-panel.component.html b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/control-panel/control-panel.component.html
index e095673423654534dd022843ac19e7aacc506b9b..1defdd8025f3e43687b10a8c8ea75787b22e9eb3 100644
--- a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/control-panel/control-panel.component.html
+++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/control-panel/control-panel.component.html
@@ -2,7 +2,7 @@
 <form
   class="height-full overflow-auto padding-top-1"
   [formGroup]="formGroup"
-  (submit)="service.callService()"
+  (submit)="onSubmit()"
 >
   @let depths = parameters()?.depths;
   @let location = parameters()?.location;
@@ -81,7 +81,7 @@
             class="margin-0 margin-top-neg-105"
             (click)="removeLocation(index)"
           >
-            <mat-icon fontIcon="remove" />
+            <mat-icon>remove</mat-icon>
           </button>
         </span>
       }
@@ -122,7 +122,7 @@
     type="button"
     color="secondary"
   >
-    <mat-icon fontIcon="add" />
+    <mat-icon>add</mat-icon>
     Add additional location
   </button>
 
diff --git a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/control-panel/control-panel.component.ts b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/control-panel/control-panel.component.ts
index 89484208db0e46b32645ae7df3f59e16941b3af2..9a76a3dc0934efc316af84456326fe5c4bf498b6 100644
--- a/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/control-panel/control-panel.component.ts
+++ b/projects/nshmp-apps/src/app/ncm/geophysical-profiles/components/control-panel/control-panel.component.ts
@@ -13,6 +13,7 @@ import {
 import {
   FormGroupControls,
   NshmpLibNgControlPanelButtonsComponent,
+  NshmpService,
 } from '@ghsc/nshmp-lib-ng/nshmp';
 import {NcmUsageParameter} from '@ghsc/nshmp-utils-ts/libs/ncm/geophysical';
 import {Location} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/geo';
@@ -61,7 +62,10 @@ export class ControlPanelComponent implements OnInit, OnDestroy {
 
   private subs: Subscription[] = [];
 
-  constructor(public service: AppService) {}
+  constructor(
+    public service: AppService,
+    private nshmpService: NshmpService,
+  ) {}
 
   ngOnInit(): void {
     const controls = this.formGroup.controls;
@@ -86,6 +90,11 @@ export class ControlPanelComponent implements OnInit, OnDestroy {
     this.subs.forEach(sub => sub.unsubscribe());
   }
 
+  onSubmit(): void {
+    this.service.callService();
+    this.nshmpService.selectPlotControl();
+  }
+
   removeLocation(index: number): void {
     this.formGroup.controls.locations.removeAt(index);
   }
diff --git a/projects/nshmp-apps/src/app/services/components/content/content.component.html b/projects/nshmp-apps/src/app/services/components/content/content.component.html
index fd7dbe5e0fc7633395097f930af04960f7c4a37e..c381cbe8b972209a9deec6c653963776849794de 100644
--- a/projects/nshmp-apps/src/app/services/components/content/content.component.html
+++ b/projects/nshmp-apps/src/app/services/components/content/content.component.html
@@ -30,17 +30,15 @@
         >
           @if (sidenavCollapsed === false) {
             <div class="icon-text">
-              <mat-icon
-                aria-label="Left arrow icon"
-                fontIcon="keyboard_double_arrow_left"
-              />
+              <mat-icon aria-label="Left arrow icon">
+                keyboard_double_arrow_left
+              </mat-icon>
               <span>Collapse sidebar</span>
             </div>
           } @else {
-            <mat-icon
-              aria-label="Right arrow icon"
-              fontIcon="keyboard_double_arrow_right"
-            />
+            <mat-icon aria-label="Right arrow icon">
+              keyboard_double_arrow_right
+            </mat-icon>
           }
         </button>
       </div>
@@ -60,7 +58,7 @@
                     mat-icon-button
                     (click)="onLinkIconClick(serviceGroup.id)"
                   >
-                    <mat-icon aria-label="Link Icon" fontIcon="link" />
+                    <mat-icon aria-label="Link Icon">link</mat-icon>
                   </button>
                   {{ serviceGroup.title }}
                 </div>
diff --git a/projects/nshmp-apps/src/app/source/mfd/app.component.html b/projects/nshmp-apps/src/app/source/mfd/app.component.html
index 03bdde34cccaca1ef8567a9c19e937c0a8fbd4bd..b7c70d9bdd1656521be13d513dcf150766718885 100644
--- a/projects/nshmp-apps/src/app/source/mfd/app.component.html
+++ b/projects/nshmp-apps/src/app/source/mfd/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
 
     <nshmp-template-settings>
       <app-plot-settings-panel />
diff --git a/projects/nshmp-apps/src/app/source/mfd/app.component.ts b/projects/nshmp-apps/src/app/source/mfd/app.component.ts
index 4caa9b025485a76bfe1b4221f657a2d52607e6a3..509376c6dcab573ffda677a60244ea08e774bf86 100644
--- a/projects/nshmp-apps/src/app/source/mfd/app.component.ts
+++ b/projects/nshmp-apps/src/app/source/mfd/app.component.ts
@@ -5,7 +5,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
   NshmpTemplateService,
   NshmpTemplateSettingsComponent,
 } from '@ghsc/nshmp-template';
@@ -29,7 +29,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateContentContainerComponent,
     NshmpTemplateControlPanelComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpTemplateSettingsComponent,
     NshmpLibNgHazardProvisionalModelComponent,
     NshmpLibNgAboutPageComponent,
diff --git a/projects/nshmp-apps/src/app/source/model-maps/app.component.html b/projects/nshmp-apps/src/app/source/model-maps/app.component.html
index 8c5371544bee801ad470186c97b75f15786f6d84..85fc7ab01a23544fb1e0a84c56625d222f96a4c1 100644
--- a/projects/nshmp-apps/src/app/source/model-maps/app.component.html
+++ b/projects/nshmp-apps/src/app/source/model-maps/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-map-content>
+    <nshmp-template-main-content>
       <app-map />
-    </nshmp-template-map-content>
+    </nshmp-template-main-content>
 
     <nshmp-template-settings>
       <app-plot-settings-panel />
diff --git a/projects/nshmp-apps/src/app/source/model-maps/app.component.ts b/projects/nshmp-apps/src/app/source/model-maps/app.component.ts
index b893795adb26d2d27befe02f08f4f95e48a07ec1..8e75d6ec50b6c63c2eec7d67a96b9827351464c4 100644
--- a/projects/nshmp-apps/src/app/source/model-maps/app.component.ts
+++ b/projects/nshmp-apps/src/app/source/model-maps/app.component.ts
@@ -1,12 +1,12 @@
-import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
+import {Component, effect, OnInit, ViewEncapsulation} from '@angular/core';
 import {NshmpLibNgAboutPageComponent} from '@ghsc/nshmp-lib-ng/about';
 import {NshmpLibNgHazardProvisionalModelComponent} from '@ghsc/nshmp-lib-ng/hazard';
 import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
-  AppControlsService,
+  HeaderService,
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplateMapContentComponent,
+  NshmpTemplateMainContentComponent,
   NshmpTemplateSettingsComponent,
 } from '@ghsc/nshmp-template';
 import {apps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
@@ -33,7 +33,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateContentContainerComponent,
     NshmpTemplateControlPanelComponent,
-    NshmpTemplateMapContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpTemplateSettingsComponent,
     NshmpLibNgHazardProvisionalModelComponent,
     NshmpLibNgAboutPageComponent,
@@ -47,7 +47,7 @@ import {AppService} from './services/app.service';
   styleUrl: './app.component.scss',
   templateUrl: './app.component.html',
 })
-export class AppComponent implements OnInit, OnDestroy {
+export class AppComponent implements OnInit {
   /** Subscirption on controls change */
   controlsSubscription: Subscription;
   /** Navigation list for meny */
@@ -57,18 +57,16 @@ export class AppComponent implements OnInit, OnDestroy {
 
   constructor(
     public service: AppService,
-    private controlsService: AppControlsService,
-  ) {}
+    private headerService: HeaderService,
+  ) {
+    effect(() => {
+      this.headerService.controlPanelSelected();
+      this.headerService.settingsSelected();
+      this.service.mapRedraw();
+    });
+  }
 
   ngOnInit() {
     this.service.init();
-
-    this.controlsSubscription = this.controlsService.controlsChanged.subscribe(
-      () => this.service.mapRedraw(),
-    );
-  }
-
-  ngOnDestroy(): void {
-    this.controlsSubscription?.unsubscribe();
   }
 }
diff --git a/projects/nshmp-apps/src/app/source/model-maps/components/control-panel/control-panel.component.html b/projects/nshmp-apps/src/app/source/model-maps/components/control-panel/control-panel.component.html
index 67e0d34170ff59f7a32d96b9681823acbadba4f1..47f433ac422dfceb0b0b27914bb734251939733a 100644
--- a/projects/nshmp-apps/src/app/source/model-maps/components/control-panel/control-panel.component.html
+++ b/projects/nshmp-apps/src/app/source/model-maps/components/control-panel/control-panel.component.html
@@ -1,6 +1,6 @@
 <form [formGroup]="formGroup" class="height-full overflow-auto">
   <div class="settings-section">
-    <mat-label class="settings-section--label">Model Layers</mat-label>
+    <mat-label class="label">Model Layers</mat-label>
     <div class="settings-subsection padding-top-1">
       <div class="settings-subsection--section">
         <nshmp-lib-ng-hazard-model-form
diff --git a/projects/nshmp-apps/src/app/source/model-maps/components/plot-settings-panel/plot-settings-panel.component.html b/projects/nshmp-apps/src/app/source/model-maps/components/plot-settings-panel/plot-settings-panel.component.html
index a9c8dbb791871c0b9419c6ee03e643f7f0832fc3..9b096a51c76a8d1ad192ea4315183040d066099e 100644
--- a/projects/nshmp-apps/src/app/source/model-maps/components/plot-settings-panel/plot-settings-panel.component.html
+++ b/projects/nshmp-apps/src/app/source/model-maps/components/plot-settings-panel/plot-settings-panel.component.html
@@ -1,6 +1,6 @@
 <div class="height-full overflow-auto">
   <div class="settings-section">
-    <mat-label class="settings-section--label">Map Settings</mat-label>
+    <mat-label class="label">Map Settings</mat-label>
 
     <div class="padding-x-2">
       <div class="padding-top-2">
diff --git a/projects/nshmp-apps/src/app/source/rates/app.component.html b/projects/nshmp-apps/src/app/source/rates/app.component.html
index 03bdde34cccaca1ef8567a9c19e937c0a8fbd4bd..b7c70d9bdd1656521be13d513dcf150766718885 100644
--- a/projects/nshmp-apps/src/app/source/rates/app.component.html
+++ b/projects/nshmp-apps/src/app/source/rates/app.component.html
@@ -4,9 +4,9 @@
       <app-control-panel />
     </nshmp-template-control-panel>
 
-    <nshmp-template-plot-content>
+    <nshmp-template-main-content>
       <app-content />
-    </nshmp-template-plot-content>
+    </nshmp-template-main-content>
 
     <nshmp-template-settings>
       <app-plot-settings-panel />
diff --git a/projects/nshmp-apps/src/app/source/rates/app.component.ts b/projects/nshmp-apps/src/app/source/rates/app.component.ts
index 637796ffe2f5df1a76f3e38ecf020cdd460c60c9..7cfe965356c7942233d5dd1558950456b7064047 100644
--- a/projects/nshmp-apps/src/app/source/rates/app.component.ts
+++ b/projects/nshmp-apps/src/app/source/rates/app.component.ts
@@ -5,7 +5,7 @@ import {NshmpLibNgTemplateComponent} from '@ghsc/nshmp-lib-ng/nshmp';
 import {
   NshmpTemplateContentContainerComponent,
   NshmpTemplateControlPanelComponent,
-  NshmpTemplatePlotContentComponent,
+  NshmpTemplateMainContentComponent,
   NshmpTemplateSettingsComponent,
 } from '@ghsc/nshmp-template';
 import {apps} from 'projects/nshmp-apps/src/shared/utils/applications.utils';
@@ -22,7 +22,7 @@ import {AppService} from './services/app.service';
     NshmpLibNgTemplateComponent,
     NshmpTemplateContentContainerComponent,
     NshmpTemplateControlPanelComponent,
-    NshmpTemplatePlotContentComponent,
+    NshmpTemplateMainContentComponent,
     NshmpTemplateSettingsComponent,
     NshmpLibNgHazardProvisionalModelComponent,
     NshmpLibNgAboutPageComponent,
diff --git a/projects/nshmp-apps/src/app/source/rates/components/control-panel/control-panel.component.ts b/projects/nshmp-apps/src/app/source/rates/components/control-panel/control-panel.component.ts
index 2cdb723259b68f54fefd8347bdf92513501aa446..93c1b8534dad45a990608a6a1072d7206a6569f1 100644
--- a/projects/nshmp-apps/src/app/source/rates/components/control-panel/control-panel.component.ts
+++ b/projects/nshmp-apps/src/app/source/rates/components/control-panel/control-panel.component.ts
@@ -10,7 +10,10 @@ import {
   NshmpLibNgMapSelectSiteComponent,
   SelectSiteDialogData,
 } from '@ghsc/nshmp-lib-ng/map';
-import {NshmpLibNgControlPanelButtonsComponent} from '@ghsc/nshmp-lib-ng/nshmp';
+import {
+  NshmpLibNgControlPanelButtonsComponent,
+  NshmpService,
+} from '@ghsc/nshmp-lib-ng/nshmp';
 import {Location} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/geo';
 import {environment} from 'projects/nshmp-apps/src/environments/environment';
 import {Subscription} from 'rxjs';
@@ -55,7 +58,10 @@ export class ControlPanelComponent implements OnInit, OnDestroy {
 
   private subs: Subscription[] = [];
 
-  constructor(public service: AppService) {}
+  constructor(
+    public service: AppService,
+    private nshmpService: NshmpService,
+  ) {}
 
   ngOnInit(): void {
     const controls = this.formGroup.controls;
@@ -83,6 +89,23 @@ export class ControlPanelComponent implements OnInit, OnDestroy {
     this.subs.forEach(sub => sub.unsubscribe());
   }
 
+  onSubmit(): void {
+    this.service.callService();
+    this.nshmpService.selectPlotControl();
+  }
+
+  /**
+   * Set the location form fields.
+   *
+   * @param location The location
+   */
+  setLocation(location: Location): void {
+    this.formGroup.patchValue({
+      latitude: location.latitude,
+      longitude: location.longitude,
+    });
+  }
+
   private onModelChange(): void {
     const {latitude, longitude} = this.formGroup.getRawValue();
     const latitudeBounds = this.service.usage().response.latitude;
@@ -106,20 +129,4 @@ export class ControlPanelComponent implements OnInit, OnDestroy {
     this.formGroup.controls.longitude.markAsPristine();
     this.service.resetState();
   }
-
-  onSubmit(): void {
-    this.service.callService();
-  }
-
-  /**
-   * Set the location form fields.
-   *
-   * @param location The location
-   */
-  setLocation(location: Location): void {
-    this.formGroup.patchValue({
-      latitude: location.latitude,
-      longitude: location.longitude,
-    });
-  }
 }
diff --git a/projects/nshmp-apps/src/styles/_forms.scss b/projects/nshmp-apps/src/styles/_forms.scss
index c1f793ac602f6601646993b7ebfd756993d2a9f8..bb6488c3833c302851c7b7dbe58e120ee401022e 100644
--- a/projects/nshmp-apps/src/styles/_forms.scss
+++ b/projects/nshmp-apps/src/styles/_forms.scss
@@ -6,36 +6,5 @@
 @use '@ghsc/nshmp-template/styles/variables';
 
 nshmp-template-control-panel form {
-  padding-bottom: 3em;
-}
-
-/* Form buttons */
-.form-buttons {
-  bottom: 0;
-  padding: 1em 0 0 0;
-  position: absolute;
-  width: variables.$side-panel-width;
-  z-index: 10;
-  background-color: mat.m2-get-color-from-palette(variables.$nshmp-accent);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
-}
-
-.form-buttons.full-width {
-  width: 100%;
-}
-
-.form-buttons.half-width {
-  width: 50%;
-}
-
-.form-buttons--left {
-  left: 0;
-}
-
-.form-buttons--right {
-  right: 0;
-}
-
-body.dark-mode .form-buttons {
-  background-color: mat.m2-get-color-from-palette(variables.$nshmp-accent, 800);
+  padding: 1em 0.5em 1em;
 }
diff --git a/projects/nshmp-apps/src/styles/_settings-panel.scss b/projects/nshmp-apps/src/styles/_settings-panel.scss
index 5255f646abf4a76792f3e90ea61b8d47fb95a526..af4f946e3ecb67da59767e80f04d0632973a8d96 100644
--- a/projects/nshmp-apps/src/styles/_settings-panel.scss
+++ b/projects/nshmp-apps/src/styles/_settings-panel.scss
@@ -2,11 +2,11 @@
 * Styling for plot settings side panel
 */
 
-.app-content .app-content--side-panel,
+.app-content .side-panel,
 .settings {
   /* Plot settings */
   .settings-section {
-    .settings-section--label {
+    .label {
       font-weight: 900;
       font-size: 18px;
     }
diff --git a/tsconfig.json b/tsconfig.json
index 6b0b78324666be687bc710cc839241ae39a4f7d8..4789584f6ee675120f8b127233d38a41c94182e0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,7 +27,7 @@
     "strictStandalone": true,
     "extendedDiagnostics": {
       "checks": {
-        "unusedStandaloneImports": "error"
+        "unusedStandaloneImports": "warning"
       }
     }
   },