diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index a9da5070..2fe38d44 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,72 +1,23 @@
-name: Build
+name: Build and Publish Image
 
 on:
   pull_request:
     branches:
       - main
   push:
-    branches: [main]
+    branches:
+      - main
   release:
-    types: ['published']
-  workflow_dispatch:
-    inputs:
-      tagName:
-        description: 'Tag of the image you want to build and push'
-        required: true
+    types: ["published"]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Prepare
-        id: prep
-        run: |
-          DOCKER_IMAGE=cmusei/player-ui
-          VERSION=development
-          if [[ ! -z "${{ github.event.inputs.tagName }}" ]]; then
-            VERSION=${{ github.event.inputs.tagName }}
-            TAGS="${DOCKER_IMAGE}:${VERSION}"
-          elif [[ $GITHUB_REF == refs/tags/* ]]; then
-            VERSION=${GITHUB_REF#refs/tags/}
-            MAJORMINORVERSION=$(echo $VERSION | grep -oP '(\d+)\.(\d+)')
-            TAGS="${DOCKER_IMAGE}:${VERSION},${DOCKER_IMAGE}:${MAJORMINORVERSION}"
-          elif [[ $GITHUB_REF == refs/heads/* ]]; then
-            VERSION=$(echo ${GITHUB_REF#refs/heads/} | sed -r 's#/+#-#g')
-            TAGS="${DOCKER_IMAGE}:${VERSION}"
-          fi
-          if [[ "${{ github.event_name }}" == "pull_request" ]]; then
-            echo ::set-output name=push::false
-            echo "event is pull_request, not pushing image"
-          else
-            echo ::set-output name=push::true
-            echo "event is not pull_request, pushing image"
-          fi
-          echo ::set-output name=version::${VERSION}
-          echo ::set-output name=tags::${TAGS}
-          echo ::set-output name=created::$(date -u +'%Y-%m-%dT%H:%M:%SZ')
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
-
-      - name: Login to DockerHub
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v1
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_PASSWORD }}
-
-      - name: Build and push
-        uses: docker/build-push-action@v2
-        with:
-          context: .
-          file: ./Dockerfile
-          push: ${{ steps.prep.outputs.push }}
-          pull: true
-          tags: ${{ steps.prep.outputs.tags }}
-          labels: |
-            org.opencontainers.image.source=${{ github.event.repository.clone_url }}
-            org.opencontainers.image.created=${{ steps.prep.outputs.created }}
-            org.opencontainers.image.revision=${{ github.sha }}
+  build-and-publish:
+    name: Build and Publish
+    uses: cmu-sei/Crucible-Github-Actions/.github/workflows/docker-build.yaml@docker-v1
+    with:
+      imageName: cmusei/player-ui
+      versionMode: npm
+      versionFiles: package.json
+    secrets:
+      DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+      DOCKERHUB_PASSWORD: ${{ secrets.DOCKERHUB_PASSWORD }}
diff --git a/.gitignore b/.gitignore
index f9dbff93..8762d743 100644
--- a/.gitignore
+++ b/.gitignore
@@ -301,6 +301,8 @@ __pycache__/
 *.xsd.cs
 
 */assets/config/settings.env.json*
+*/assets/config/settings.shared.json*
 
 /dist
 /docker
+tsconfig.local-npm.json
diff --git a/Dockerfile b/Dockerfile
index 1d6c9a15..463a2e86 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -13,7 +13,7 @@ WORKDIR /ng-app
 
 COPY . .
 
-RUN npx ng build --resources-output-path=assets/fonts --configuration production
+RUN npx ng build --configuration production
 
 ### Stage 2: Setup ###
 
@@ -23,7 +23,7 @@ USER root
 RUN rm -rf /usr/share/nginx/html/*
 COPY default.conf /etc/nginx/conf.d/default.conf
 COPY nginx-basehref.sh /docker-entrypoint.d/90-basehref.sh
-COPY --from=builder /ng-app/dist /usr/share/nginx/html
+COPY --from=builder /ng-app/dist/browser /usr/share/nginx/html
 RUN chown -R nginx:nginx /usr/share/nginx/html
 USER nginx
 
diff --git a/angular.json b/angular.json
index 3bc2db29..79e739fd 100644
--- a/angular.json
+++ b/angular.json
@@ -9,13 +9,14 @@
       "projectType": "application",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["src/polyfills.ts"],
             "allowedCommonJsDependencies": [
               "crypto-js/core.js",
               "crypto-js/enc-base64.js",
@@ -26,7 +27,7 @@
               "src/assets",
               {
                 "glob": "auth-callback-silent.html",
-                "input": "node_modules/@cmusei/crucible-common/src/lib/comn-auth/assets/",
+                "input": "../../libraries/Crucible.Common.Ui/projects/@crucible-common/src/lib/comn-auth/assets/",
                 "output": "/"
               }
             ],
@@ -35,11 +36,11 @@
               "./node_modules/bootstrap/dist/css/bootstrap-utilities.min.css"
             ],
             "stylePreprocessorOptions": {
-              "includePaths": [
-                "src/styles"
-              ]
+              "includePaths": ["src/styles"]
             },
-            "scripts": []
+            "scripts": [],
+            "preserveSymlinks": true,
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -65,13 +66,17 @@
               ]
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true,
-              "preserveSymlinks": true
+              "sourceMap": {
+                "scripts": true,
+                "styles": true,
+                "vendor": true
+              },
+              "namedChunks": true
+            },
+            "localNPM": {
+              "tsConfig": "tsconfig.local-npm.json"
             }
           },
           "defaultConfiguration": "production"
@@ -87,6 +92,9 @@
             },
             "development": {
               "buildTarget": "player-ui:build:development"
+            },
+            "localNPM": {
+              "buildTarget": "player-ui:build:development,localNPM"
             }
           },
           "defaultConfiguration": "development"
diff --git a/package-lock.json b/package-lock.json
index 34b99410..4c3cd0b2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "player.ui",
-  "version": "3.1.1",
+  "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "player.ui",
-      "version": "3.1.1",
+      "version": "0.0.0",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "^21.2.1",
@@ -20,7 +20,7 @@
         "@angular/platform-browser": "^21.2.1",
         "@angular/platform-browser-dynamic": "^21.2.1",
         "@angular/router": "^21.2.1",
-        "@cmusei/crucible-common": "0.4.2",
+        "@cmusei/crucible-common": "^0.6.0",
         "@datorama/akita": "^8.0.1",
         "@datorama/akita-ng-router-store": "^8.0.0",
         "@material/material-color-utilities": "^0.4.0",
@@ -2632,17 +2632,18 @@
       }
     },
     "node_modules/@cmusei/crucible-common": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/@cmusei/crucible-common/-/crucible-common-0.4.2.tgz",
-      "integrity": "sha512-1i/yuZ5ONQh9vJWJyaFk8jo1vKrwlRg0R3Y/eFMyZ8sGSgNFUTpcGTexgK8jePU68JtMo5dsd7fPYlhN5SyxVA==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@cmusei/crucible-common/-/crucible-common-0.6.0.tgz",
+      "integrity": "sha512-/IGL3tOD8ECN2HWoDpmzXz5LlZXCcRN7K4V8AdqCd/JQbSedvWM1XVahvZ4wi2SlbdicZNioN1a2rjoxlr9iOw==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.4.1"
       },
       "peerDependencies": {
-        "@angular/common": ">= 14.0.0",
-        "@angular/core": ">= 14.0.0",
+        "@angular/common": ">=21.0.0",
+        "@angular/core": ">=21.0.0",
         "@datorama/akita": "^8.0.0",
+        "@material/material-color-utilities": "^0.4.0",
         "oidc-client-ts": "^2.4.0 || ^3.0.0",
         "rxjs": "^7.8.1"
       }
@@ -2721,21 +2722,21 @@
       }
     },
     "node_modules/@emnapi/core": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
-      "integrity": "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.0.tgz",
+      "integrity": "sha512-0DQ98G9ZQZOxfUcQn1waV2yS8aWdZ6kJMbYCJB3oUBecjWYO1fqJ+a1DRfPF3O5JEkwqwP1A9QEN/9mYm2Yd0w==",
       "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/wasi-threads": "1.1.0",
+        "@emnapi/wasi-threads": "1.2.0",
         "tslib": "^2.4.0"
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
-      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.0.tgz",
+      "integrity": "sha512-QN75eB0IH2ywSpRpNddCRfQIhmJYBCJ1x5Lb3IscKAL8bMnVAKnRg8dCoXbHzVLLH7P38N2Z3mtulB7W0J0FKw==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -2744,9 +2745,9 @@
       }
     },
     "node_modules/@emnapi/wasi-threads": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
-      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.0.tgz",
+      "integrity": "sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==",
       "dev": true,
       "license": "MIT",
       "optional": true,
diff --git a/package.json b/package.json
index 150ecc7e..87007dfc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "player.ui",
-  "version": "3.1.1",
+  "version": "0.0.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -37,10 +37,10 @@
     "@angular/platform-browser": "^21.2.1",
     "@angular/platform-browser-dynamic": "^21.2.1",
     "@angular/router": "^21.2.1",
-    "@cmusei/crucible-common": "0.4.2",
-    "@material/material-color-utilities": "^0.4.0",
+    "@cmusei/crucible-common": "^0.6.0",
     "@datorama/akita": "^8.0.1",
     "@datorama/akita-ng-router-store": "^8.0.0",
+    "@material/material-color-utilities": "^0.4.0",
     "@mdi/font": "^7.4.47",
     "@microsoft/signalr": "^10.0.0",
     "@popperjs/core": "^2.11.8",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2f8bccf4..9a9e8c6a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,4 +3,10 @@
 Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 -->
 
-<router-outlet></router-outlet>
+<div class="app-layout">
+  <comn-header-bar></comn-header-bar>
+
+  <main class="main-content">
+    <router-outlet></router-outlet>
+  </main>
+</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 9ce6acad..4c08ccb0 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,32 +1,46 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
+.app-layout {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.main-content {
+  overflow: auto;
+}
+
 @font-face {
   font-family: 'open_sansregular';
   /*
    Note about src: url() and BaseHref:
    When using BaseHref SCSS and angular pre-processors do not like relative paths
-   We can escape the angular pre-processors by adding `^` to the start of the URL
-  
+   We can escape the angular pre-processors by adding `../` to the start of the URL
+
   */
-  src: url('^assets/fonts/opensans-regular.woff2') format('woff2'),
-    url('^assets/fonts/opensans-regular.woff') format('woff');
+  src:
+    url('../assets/fonts/opensans-regular.woff2') format('woff2'),
+    url('../assets/fonts/opensans-regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'open_sansbold';
-  src: url('^assets/fonts/opensans-bold.woff2') format('woff2'),
-    url('^assets/fonts/opensans-bold.woff') format('woff');
+  src:
+    url('../assets/fonts/opensans-bold.woff2') format('woff2'),
+    url('../assets/fonts/opensans-bold.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'open_sansitalic';
-  src: url('^assets/fonts/opensans-italic.woff2') format('woff2'),
-    url('^assets/fonts/opensans-italic.woff') format('woff');
+  src:
+    url('../assets/fonts/opensans-italic.woff2') format('woff2'),
+    url('../assets/fonts/opensans-italic.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 58a04ea6..2a29d11c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -48,6 +48,7 @@ import {
   ComnAuthModule,
   ComnSettingsModule,
   ComnSettingsService,
+  ComnHeaderBarModule,
 } from '@cmusei/crucible-common';
 import { AkitaNgRouterStoreModule } from '@datorama/akita-ng-router-store';
 import { AkitaNgDevtools } from '@datorama/akita-ngdevtools';
@@ -220,6 +221,7 @@ export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
         AkitaNgRouterStoreModule,
         ComnSettingsModule.forRoot(),
         ComnAuthModule.forRoot(),
+        ComnHeaderBarModule,
         TableVirtualScrollModule,
         ResizableModule], providers: [
         AppService,
diff --git a/src/app/components/admin-app/admin-app-template-search/admin-template-details/admin-template-details.component.html b/src/app/components/admin-app/admin-app-template-search/admin-template-details/admin-template-details.component.html
index 8821dbd6..d8f5ceed 100644
--- a/src/app/components/admin-app/admin-app-template-search/admin-template-details/admin-template-details.component.html
+++ b/src/app/components/admin-app/admin-app-template-search/admin-template-details/admin-template-details.component.html
@@ -5,9 +5,9 @@
 
 <div class="d-flex flex-column">
   <mat-form-field>
+    <mat-label>Name</mat-label>
     <input
       matInput
-      placeholder="Name"
       tabIndex="1"
       name="name"
       [(ngModel)]="appTemplate.name"
@@ -15,9 +15,9 @@
     />
   </mat-form-field>
   <mat-form-field>
+    <mat-label>URL</mat-label>
     <input
       matInput
-      placeholder="Url"
       tabIndex="2"
       name="url"
       [(ngModel)]="appTemplate.url"
@@ -25,9 +25,9 @@
     />
   </mat-form-field>
   <mat-form-field>
+    <mat-label>Icon Path</mat-label>
     <input
       matInput
-      placeholder="icon"
       tabIndex="3"
       name="icon"
       [(ngModel)]="appTemplate.icon"
diff --git a/src/app/components/admin-app/admin-app.component.scss b/src/app/components/admin-app/admin-app.component.scss
index f2d9e846..d7e75f64 100644
--- a/src/app/components/admin-app/admin-app.component.scss
+++ b/src/app/components/admin-app/admin-app.component.scss
@@ -1,6 +1,5 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
-
 .appitems-container .mat-list-item {
   height: auto;
 }
@@ -15,12 +14,15 @@
   cursor: pointer;
 }
 
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .appcontent-container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  flex: 1;
+  overflow: hidden;
 }
 
 .appbarmenu-container {
diff --git a/src/app/components/admin-app/admin-app.component.ts b/src/app/components/admin-app/admin-app.component.ts
index 2a44f364..cda990d3 100644
--- a/src/app/components/admin-app/admin-app.component.ts
+++ b/src/app/components/admin-app/admin-app.component.ts
@@ -1,7 +1,7 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ElementRef, AfterViewInit, Renderer2 } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { Router } from '@angular/router';
 import {
@@ -25,6 +25,7 @@ import { SystemPermission } from '../../generated/player-api';
 })
 export class AdminAppComponent implements OnInit, OnDestroy {
   @ViewChild('sidenav') sidenav: MatSidenav;
+
   public TopbarView = TopbarView;
   public queryParams: any;
   Section = Section;
@@ -96,7 +97,7 @@ export class AdminAppComponent implements OnInit, OnDestroy {
     private routerQuery: RouterQuery,
     private authQuery: ComnAuthQuery,
     public loggedInUserService: LoggedInUserService,
-    public permissionsService: UserPermissionsService
+    public permissionsService: UserPermissionsService,
   ) {
     this.theme$ = this.authQuery.userTheme$;
   }
diff --git a/src/app/components/admin-app/admin-role-permission-search/create-permission-dialog/create-permission-dialog.component.html b/src/app/components/admin-app/admin-role-permission-search/create-permission-dialog/create-permission-dialog.component.html
index 878ff18f..ee63405a 100644
--- a/src/app/components/admin-app/admin-role-permission-search/create-permission-dialog/create-permission-dialog.component.html
+++ b/src/app/components/admin-app/admin-role-permission-search/create-permission-dialog/create-permission-dialog.component.html
@@ -7,6 +7,7 @@
   <h1 mat-dialog-title>{{ title }}</h1>
   <form (ngSubmit)="done()">
     <mat-form-field>
+      <mat-label>Name</mat-label>
       <input
         matInput
         placeholder="Name"
@@ -17,6 +18,7 @@ <h1 mat-dialog-title>{{ title }}</h1>
     ><br />
     ><br />
     <mat-form-field>
+      <mat-label>Description</mat-label>
       <input
         matInput
         placeholder="Description"
diff --git a/src/app/components/admin-app/admin-role-permission-search/create-role-dialog/create-role-dialog.component.html b/src/app/components/admin-app/admin-role-permission-search/create-role-dialog/create-role-dialog.component.html
index 86182366..afbaf33b 100644
--- a/src/app/components/admin-app/admin-role-permission-search/create-role-dialog/create-role-dialog.component.html
+++ b/src/app/components/admin-app/admin-role-permission-search/create-role-dialog/create-role-dialog.component.html
@@ -7,6 +7,7 @@
   <h1 mat-dialog-title>{{ title }}</h1>
   <form (ngSubmit)="done()">
     <mat-form-field>
+      <mat-label>Name</mat-label>
       <input
         matInput
         placeholder="Name"
diff --git a/src/app/components/admin-app/admin-roles/roles/roles.component.scss b/src/app/components/admin-app/admin-roles/roles/roles.component.scss
index 34d062dc..f8dabb9a 100644
--- a/src/app/components/admin-app/admin-roles/roles/roles.component.scss
+++ b/src/app/components/admin-app/admin-roles/roles/roles.component.scss
@@ -1,9 +1,9 @@
 /*
-Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+Copyright 2021 Carnegie Mellon University. All Rights Reserved.
  Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 */
 
 .container {
   overflow: auto;
-  height: 85vh;
+  height: 80dvh;
 }
diff --git a/src/app/components/admin-app/admin-roles/team-roles/team-roles.component.scss b/src/app/components/admin-app/admin-roles/team-roles/team-roles.component.scss
index 34d062dc..71cbce2d 100644
--- a/src/app/components/admin-app/admin-roles/team-roles/team-roles.component.scss
+++ b/src/app/components/admin-app/admin-roles/team-roles/team-roles.component.scss
@@ -5,5 +5,5 @@ Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 
 .container {
   overflow: auto;
-  height: 85vh;
+  height: 80dvh;
 }
diff --git a/src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.html b/src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.html
index 462ff364..e48391f2 100644
--- a/src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.html
+++ b/src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.html
@@ -76,8 +76,8 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
             <div class="add-margin">
               <div>
                 <mat-form-field>
+                  <mat-label>Status</mat-label>
                   <mat-select
-                    placeholder="Status"
                     [(ngModel)]="view.status"
                     name="viewStatus"
                     (selectionChange)="saveViewStatus()"
@@ -129,7 +129,7 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
               </button>
             </mat-menu>
             <mat-menu #viewAppTemplates="matMenu">
-              @for (t of applicationTemplates; track t) {
+              @for (t of applicationTemplates; track t.id) {
                 <button mat-menu-item (click)="addViewApplication(t)">
                   {{ t.name }}
                 </button>
@@ -157,7 +157,7 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
                   Add New Team
                 </button>
               </div>
-              @for (teamContainer of teams; track teamContainer) {
+              @for (teamContainer of teams; track teamContainer.team.id) {
                 <mat-expansion-panel
                   [expanded]="
                     currentTeam !== undefined &&
@@ -168,6 +168,9 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
                   <mat-expansion-panel-header>
                     <mat-panel-title>
                       {{ teamContainer.name }}
+                      @if (view.defaultTeamId === teamContainer.team.id) {
+                        <span class="default-badge">DEFAULT</span>
+                      }
                     </mat-panel-title>
                   </mat-expansion-panel-header>
                   <div class="d-flex">
@@ -190,11 +193,11 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
                           </span>
                         </div>
                         <mat-form-field>
+                          <mat-label>Team Name (required)</mat-label>
                           <input
                             id="teamName{{ teamContainer.team.id }}"
                             matInput
                             [formControl]="teamNameFormControl"
-                            placeholder="Team Name"
                             (change)="
                               saveTeamName(
                                 $event.target.value,
@@ -287,73 +290,85 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
         </mat-step>
         <mat-step label="Files">
           <mat-accordion>
-            <div>
-              <input
-                hidden
-                (change)="selectFile($event.target.files)"
-                #fileInput
-                type="file"
-              />
-              <div>
-                @if (staged.length === 0) {
-                  <div class="top-button d-flex justify-content-end">
-                    <button mat-stroked-button (click)="fileInput.click()">
-                      Add New File
-                    </button>
-                  </div>
-                }
-                @if (staged.length !== 0) {
-                  <div
-                    class="top-button d-flex justify-content-end align-items-center"
-                  >
-                    <mat-list>
-                      @for (playerFile of staged; track playerFile) {
-                        <mat-list-item>
-                          {{ playerFile.file.name }}
-                          <div>
-                            <button
-                              mat-icon-button
-                              (click)="removeFile(playerFile)"
-                            >
-                              <mat-icon
-                                style="transform: scale(0.85)"
-                                svgIcon="ic_clear_black_24px"
-                              ></mat-icon>
-                            </button>
-                          </div>
-                        </mat-list-item>
-                      }
-                    </mat-list>
-                    <div>
-                      <mat-form-field id="teamSelect">
-                        <mat-label>Select Teams</mat-label>
-                        <mat-select multiple [(ngModel)]="teamsForFile">
-                          @for (teamWrapper of teams; track teamWrapper) {
+            <input
+              hidden
+              (change)="selectFile($event.target.files)"
+              #fileInput
+              type="file"
+            />
+            <div class="top-button d-flex justify-content-end">
+              <button mat-stroked-button (click)="fileInput.click()">
+                Add New File
+              </button>
+            </div>
+            @if (staged.length !== 0) {
+              <mat-expansion-panel [expanded]="true">
+                <mat-expansion-panel-header>
+                  <mat-panel-title>
+                    <div class="d-flex align-items-center">
+                      <img
+                        height="25"
+                        src="assets/img/SP_Icon_Intel.png"
+                        alt="File"
+                      />{{ staged[0].file.name }}
+                    </div>
+                  </mat-panel-title>
+                </mat-expansion-panel-header>
+                <div>
+                  <div class="d-flex flex-column align-items-center">
+                    <div class="d-flex align-items-center">
+                      <mat-checkbox
+                        color="primary"
+                        [(ngModel)]="selectAllTeamsForFile"
+                        (change)="toggleAllTeamsForFile($event.checked)"
+                        class="me-3"
+                      >
+                        Select All Teams
+                      </mat-checkbox>
+                      <mat-form-field id="teamSelect" style="width: 600px">
+                        <mat-label>Teams with Access</mat-label>
+                        <mat-select multiple [(ngModel)]="teamsForFile" (selectionChange)="onTeamsForFileChange()">
+                          @for (teamWrapper of teams; track teamWrapper.team.id) {
                             <mat-option [value]="teamWrapper.team.id">{{
                               teamWrapper.team.name
                             }}</mat-option>
                           }
                         </mat-select>
                       </mat-form-field>
-                      <button
-                        mat-stroked-button
-                        (click)="uploadFile()"
-                        style="height: 35px"
-                      >
-                        Upload File
-                      </button>
-                      @if (uploading) {
-                        <mat-progress-bar
-                          mode="determinate"
-                          [value]="uploadProgess"
-                        ></mat-progress-bar>
-                      }
                     </div>
+                    @if (teamsForFile.length === 0) {
+                      <div class="team-warning">
+                        At least one team must be selected
+                      </div>
+                    }
                   </div>
-                }
-              </div>
-            </div>
-            @for (viewFile of viewFiles; track viewFile) {
+                  @if (uploading) {
+                    <mat-progress-bar
+                      mode="determinate"
+                      [value]="uploadProgess"
+                      class="mb-3"
+                    ></mat-progress-bar>
+                  }
+                  <div class="delete-button d-flex justify-content-end">
+                    <button
+                      mat-stroked-button
+                      (click)="removeFile(staged[0])"
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      mat-stroked-button
+                      (click)="uploadFile()"
+                      [disabled]="teamsForFile.length === 0"
+                      class="ms-2"
+                    >
+                      Upload File
+                    </button>
+                  </div>
+                </div>
+              </mat-expansion-panel>
+            }
+            @for (viewFile of viewFiles; track viewFile.id) {
               <mat-expansion-panel
                 [expanded]="
                   currentFile !== undefined && viewFile.id === currentFile.id
@@ -372,23 +387,38 @@ <h4 class="header-text ms-2">Edit View: {{ view.name }}</h4>
                   </mat-panel-title>
                 </mat-expansion-panel-header>
                 <div>
-                  <div class="d-flex justify-content-around">
-                    <mat-form-field id="teamSelect" style="width: 600px">
-                      <mat-label>Teams with Permission to View</mat-label>
-                      <mat-select
-                        multiple
-                        [ngModel]="viewFile.teamIds"
-                        (selectionChange)="
-                          teamsForFileUpdated($event, viewFile)
-                        "
+                  <div class="d-flex flex-column align-items-center">
+                    <div class="d-flex align-items-center">
+                      <mat-checkbox
+                        color="primary"
+                        [checked]="isAllTeamsSelected(viewFile)"
+                        (change)="toggleAllTeamsForViewFile($event.checked, viewFile)"
+                        class="me-3"
                       >
-                        @for (teamWrapper of teams; track teamWrapper) {
-                          <mat-option [value]="teamWrapper.team.id">{{
-                            teamWrapper.team.name
-                          }}</mat-option>
-                        }
-                      </mat-select>
-                    </mat-form-field>
+                        Select All Teams
+                      </mat-checkbox>
+                      <mat-form-field id="teamSelect" style="width: 600px">
+                        <mat-label>Teams with Access</mat-label>
+                        <mat-select
+                          multiple
+                          [ngModel]="viewFile.teamIds"
+                          (selectionChange)="
+                            teamsForFileUpdated($event, viewFile)
+                          "
+                        >
+                          @for (teamWrapper of teams; track teamWrapper.team.id) {
+                            <mat-option [value]="teamWrapper.team.id">{{
+                              teamWrapper.team.name
+                            }}</mat-option>
+                          }
+                        </mat-select>
+                      </mat-form-field>
+                    </div>
+                    @if (viewFile.teamIds && viewFile.teamIds.length === 0) {
+                      <div class="team-warning">
+                        At least one team must be selected
+                      </div>
+                    }
                   </div>
                   <div class="d-flex justify-content-around">
                     <button
diff --git a/src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.scss b/src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.scss
index 81bab6fa..25841d4e 100644
--- a/src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.scss
+++ b/src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.scss
@@ -70,3 +70,22 @@
 .view-info-container {
   margin-left: 20%;
 }
+
+.default-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  margin-left: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  border-radius: 4px;
+  background-color: var(--mat-sys-primary-container);
+  color: var(--mat-sys-on-primary-container);
+}
+
+.team-warning {
+  color: var(--mat-sys-error);
+  font-size: 12px;
+  margin-top: 4px;
+  font-weight: 500;
+}
diff --git a/src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.ts b/src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.ts
index 612fe0f4..6216f250 100644
--- a/src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.ts
+++ b/src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.ts
@@ -95,6 +95,7 @@ export class AdminViewEditComponent implements OnInit {
 
   public staged: PlayerFile[];
   public teamsForFile: string[];
+  public selectAllTeamsForFile: boolean;
   public uploadProgess: number;
   public uploading: boolean;
   public viewFiles: FileModel[];
@@ -490,6 +491,30 @@ export class AdminViewEditComponent implements OnInit {
     this.staged = this.staged.filter((f) => f.file.name !== file.file.name);
   }
 
+  /**
+   * Toggles selection of all teams for file upload
+   *
+   * @param checked: Whether all teams should be selected
+   */
+  toggleAllTeamsForFile(checked: boolean) {
+    if (checked) {
+      this.teamsForFile = this.teams.map(t => t.team.id);
+    } else {
+      this.teamsForFile = [];
+    }
+  }
+
+  /**
+   * Handles manual changes to team selection
+   * Unchecks "Select All" if not all teams are selected
+   */
+  onTeamsForFileChange() {
+    const allTeamIds = this.teams.map(t => t.team.id);
+    const allSelected = allTeamIds.length === this.teamsForFile.length &&
+                        allTeamIds.every(id => this.teamsForFile.includes(id));
+    this.selectAllTeamsForFile = allSelected;
+  }
+
   /**
    * Returns a link to the download endpoint for a particular file
    */
@@ -649,11 +674,59 @@ export class AdminViewEditComponent implements OnInit {
    * @param file The file to update the teams for
    */
   teamsForFileUpdated(event: any, file: FileModel) {
-    file.teamIds = event.value;
+    const newTeamIds = event.value;
+
+    // Update local state to reflect selection
+    file.teamIds = newTeamIds || [];
+
+    // Only save to server if at least one team is selected
+    if (!newTeamIds || newTeamIds.length === 0) {
+      return;
+    }
+
     this.fileService
       .updateFile(file.id, file.name, file.teamIds, null)
       .pipe(take(1))
-      .subscribe();
+      .subscribe({
+        error: (err) => {
+          console.error('Error updating file teams:', err);
+        }
+      });
+  }
+
+  /**
+   * Checks if all teams are selected for a given file
+   * @param file The file to check
+   */
+  isAllTeamsSelected(file: FileModel): boolean {
+    if (!file.teamIds || !this.teams) {
+      return false;
+    }
+    const allTeamIds = this.teams.map(t => t.team.id);
+    return allTeamIds.length === file.teamIds.length &&
+           allTeamIds.every(id => file.teamIds.includes(id));
+  }
+
+  /**
+   * Toggles selection of all teams for a specific file
+   * @param checked Whether all teams should be selected
+   * @param file The file to update
+   */
+  toggleAllTeamsForViewFile(checked: boolean, file: FileModel) {
+    if (checked) {
+      file.teamIds = this.teams.map(t => t.team.id);
+      this.fileService
+        .updateFile(file.id, file.name, file.teamIds, null)
+        .pipe(take(1))
+        .subscribe({
+          error: (err) => {
+            console.error('Error updating file teams:', err);
+          }
+        });
+    } else {
+      // Allow clearing teams in UI, but don't save until at least one team is selected
+      file.teamIds = [];
+    }
   }
 
   /**
diff --git a/src/app/components/admin-app/app-admin-subscription-search/edit-subscription/edit-subscription.component.html b/src/app/components/admin-app/app-admin-subscription-search/edit-subscription/edit-subscription.component.html
index 6e1f9a8e..26940d8c 100644
--- a/src/app/components/admin-app/app-admin-subscription-search/edit-subscription/edit-subscription.component.html
+++ b/src/app/components/admin-app/app-admin-subscription-search/edit-subscription/edit-subscription.component.html
@@ -2,6 +2,7 @@
 Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 -->
+<div style="overflow: hidden;">
 <h3>{{ currentSub == null ? 'Add Subscription' : 'Edit Subscription' }}</h3>
 <form [formGroup]="form" (ngSubmit)="onSubmit()" class="d-flex flex-column">
   <mat-form-field>
@@ -43,3 +44,4 @@ <h3>{{ currentSub == null ? 'Add Subscription' : 'Edit Subscription' }}</h3>
       </button>
     </div>
   </form>
+</div>
diff --git a/src/app/components/admin-app/view-applications-select/view-applications-select.component.html b/src/app/components/admin-app/view-applications-select/view-applications-select.component.html
index 147c3d44..64ae3235 100644
--- a/src/app/components/admin-app/view-applications-select/view-applications-select.component.html
+++ b/src/app/components/admin-app/view-applications-select/view-applications-select.component.html
@@ -15,7 +15,7 @@
 }
 
 <mat-accordion>
-  @for (app of applications; track app; let i = $index) {
+  @for (app of applications; track app.id; let i = $index) {
     <mat-expansion-panel
       [expanded]="currentApp !== undefined && app.id === currentApp.id"
       (opened)="currentApp = app"
@@ -36,48 +36,35 @@
         <div class="d-flex justify-content-center">
           <div class="d-flex flex-column app-form-section">
             <mat-form-field>
+              <mat-label>Application Name</mat-label>
               <input
                 matInput
-                placeholder="Application Name"
                 (change)="saveApplicationName($event.target.value, app.id)"
                 value="{{ app.name }}"
                 />
-              <!-- <mat-error *ngIf="nameFormControl.hasError('minlength') && !nameFormControl.hasError('required')">
-              Must contain 3 or more characters
-            </mat-error>
-            <mat-error *ngIf="nameFormControl.hasError('required')">
-              Name is <strong>required</strong>
-            </mat-error> -->
           </mat-form-field>
           <mat-form-field>
+            <mat-label>Application URL</mat-label>
             <input
               matInput
-              placeholder="Application Url"
               (change)="saveApplicationUrl($event.target.value, app.id)"
               value="{{ app.url }}"
               [errorStateMatcher]="matcher"
               />
-            <!-- <mat-error *ngIf="urlFormControl.hasError('required')">
-            Url is <strong>required</strong>
-          </mat-error> -->
         </mat-form-field>
         <mat-form-field>
+          <mat-label>Icon Path</mat-label>
           <input
             matInput
-            placeholder="Icon Path"
             (change)="saveApplicationIcon($event.target.value, app.id)"
             value="{{ app.icon }}"
             [errorStateMatcher]="matcher"
             />
-          <!-- <mat-error *ngIf="iconFormControl.hasError('required')">
-          Icon is <strong>required</strong>
-        </mat-error> -->
       </mat-form-field>
       <mat-form-field>
+        <mat-label>Embeddable</mat-label>
         <mat-select
-          placeholder="Embeddable"
           (selectionChange)="saveApplicationEmbeddable(app)"
-          [(value)]="selected"
           [(ngModel)]="app.embeddable"
           >
           <mat-option [value]="null">Inherit from Template</mat-option>
@@ -86,10 +73,9 @@
         </mat-select>
       </mat-form-field>
       <mat-form-field>
+        <mat-label>Load in Background</mat-label>
         <mat-select
-          placeholder="Load in Background"
           (selectionChange)="saveApplicationLoadInBackground(app)"
-          [(value)]="selected"
           [(ngModel)]="app.loadInBackground"
           >
           <mat-option [value]="null">Inherit from Template</mat-option>
@@ -98,14 +84,13 @@
         </mat-select>
       </mat-form-field>
       <mat-form-field>
+        <mat-label>Application Template</mat-label>
         <mat-select
-          placeholder="Application Template"
           (selectionChange)="saveApplicationTemplateId(app)"
-          [(value)]="selected"
           [(ngModel)]="app.applicationTemplateId"
           >
           <mat-option [value]="null">None</mat-option>
-          @for (template of applicationTemplates; track template) {
+          @for (template of applicationTemplates; track template.id) {
             <mat-option
               [value]="template.id"
               >
@@ -127,34 +112,33 @@
     <div class="d-flex w-100 justify-content-center">
       <div class="d-flex flex-column app-form-section">
         <mat-form-field>
+          <mat-label>Template Application Name</mat-label>
           <input
             matInput
             [disabled]="true"
-            placeholder="Application Name"
             value="{{ template.name }}"
             />
         </mat-form-field>
         <mat-form-field>
+          <mat-label>Template Application URL</mat-label>
           <input
             matInput
             [disabled]="true"
-            placeholder="Application Url"
             value="{{ template.url }}"
             />
         </mat-form-field>
         <mat-form-field>
+          <mat-label>Template Icon Path</mat-label>
           <input
             matInput
             [disabled]="true"
-            placeholder="Icon Path"
             value="{{ template.icon }}"
             />
         </mat-form-field>
         <mat-form-field>
+          <mat-label>Template Embeddable</mat-label>
           <mat-select
             [disabled]="true"
-            placeholder="Embeddable"
-            [(value)]="selected"
             [(ngModel)]="template.embeddable"
             >
             <mat-option [value]="null">Inherit from Template</mat-option>
@@ -163,10 +147,9 @@
           </mat-select>
         </mat-form-field>
         <mat-form-field>
+          <mat-label>Template Load in Background</mat-label>
           <mat-select
             [disabled]="true"
-            placeholder="Load in Background"
-            [(value)]="selected"
             [(ngModel)]="template.loadInBackground"
             >
             <mat-option [value]="null">Inherit from Template</mat-option>
diff --git a/src/app/components/admin-app/view-applications-select/view-applications-select.component.ts b/src/app/components/admin-app/view-applications-select/view-applications-select.component.ts
index 9e085800..2d774136 100644
--- a/src/app/components/admin-app/view-applications-select/view-applications-select.component.ts
+++ b/src/app/components/admin-app/view-applications-select/view-applications-select.component.ts
@@ -141,10 +141,7 @@ export class ViewApplicationsSelectComponent implements OnInit {
    * @param application The changed application object
    */
   saveApplicationEmbeddable(application: Application): void {
-    this.applicationService.getApplication(application.id).subscribe((app) => {
-      app.embeddable = application.embeddable;
-      this.saveApplication(app);
-    });
+    this.saveApplication(application);
   }
 
   /**
@@ -152,17 +149,11 @@ export class ViewApplicationsSelectComponent implements OnInit {
    * @param application The changed application object
    */
   saveApplicationLoadInBackground(application: Application): void {
-    this.applicationService.getApplication(application.id).subscribe((app) => {
-      app.loadInBackground = application.loadInBackground;
-      this.saveApplication(app);
-    });
+    this.saveApplication(application);
   }
 
   saveApplicationTemplateId(application: Application): void {
-    this.applicationService.getApplication(application.id).subscribe((app) => {
-      app.applicationTemplateId = application.applicationTemplateId;
-      this.saveApplication(app);
-    });
+    this.saveApplication(application);
   }
 
   /**
@@ -170,12 +161,8 @@ export class ViewApplicationsSelectComponent implements OnInit {
    */
   saveApplication(app: Application) {
     this.applicationService.updateApplication(app.id, app).subscribe(() => {
-      this.applicationService
-        .getViewApplications(this.view.id)
-        .subscribe((appInsts) => {
-          this.applications = appInsts;
-        });
-      console.log('Application name updated');
+      // Don't update local array - ngModel binding keeps it in sync
+      console.log('Application updated');
     });
   }
 
@@ -204,7 +191,7 @@ export class ViewApplicationsSelectComponent implements OnInit {
   getAppName(app: Application) {
     if (app.name != null) {
       return app.name;
-    } else if (app.applicationTemplateId != null) {
+    } else if (app.applicationTemplateId != null && this.applicationTemplates?.length > 0) {
       const template = this.applicationTemplates.find(
         (x) => x.id === app.applicationTemplateId
       );
@@ -212,17 +199,17 @@ export class ViewApplicationsSelectComponent implements OnInit {
       if (template != null) {
         return template.name;
       } else {
-        return null;
+        return 'Application';
       }
     } else {
-      return null;
+      return 'Application';
     }
   }
 
   getAppIcon(app: Application) {
     if (app.icon != null) {
       return app.icon;
-    } else if (app.applicationTemplateId != null) {
+    } else if (app.applicationTemplateId != null && this.applicationTemplates?.length > 0) {
       const template = this.applicationTemplates.find(
         (x) => x.id === app.applicationTemplateId
       );
@@ -230,10 +217,10 @@ export class ViewApplicationsSelectComponent implements OnInit {
       if (template != null) {
         return template.icon;
       } else {
-        return null;
+        return 'assets/img/SP_Icon_Dashboard.png';
       }
     } else {
-      return null;
+      return 'assets/img/SP_Icon_Dashboard.png';
     }
   }
 
diff --git a/src/app/components/home-app/home-app.component.scss b/src/app/components/home-app/home-app.component.scss
index 52cc6c95..0c086d69 100644
--- a/src/app/components/home-app/home-app.component.scss
+++ b/src/app/components/home-app/home-app.component.scss
@@ -3,11 +3,7 @@
 
 .container {
   text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  height: 100%;
 }
 
 .content-container {
diff --git a/src/app/components/home-app/home-app.component.ts b/src/app/components/home-app/home-app.component.ts
index 6c69289e..3edbc531 100644
--- a/src/app/components/home-app/home-app.component.ts
+++ b/src/app/components/home-app/home-app.component.ts
@@ -15,10 +15,11 @@ export class HomeAppComponent implements OnInit {
   public title: string;
   TopbarView = TopbarView;
 
-  constructor(private settingsService: ComnSettingsService) {}
+  constructor(private settingsService: ComnSettingsService,) {}
 
   ngOnInit() {
     // Set the page title from configuration file
     this.title = this.settingsService.settings.AppTopBarText;
   }
+
 }
diff --git a/src/app/components/player/application-list/application-list.component.scss b/src/app/components/player/application-list/application-list.component.scss
index 031d2bcf..61eba6fa 100644
--- a/src/app/components/player/application-list/application-list.component.scss
+++ b/src/app/components/player/application-list/application-list.component.scss
@@ -1,9 +1,17 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
+:host {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 .list-container {
   width: 100%;
-  height: calc(100% - 142px);
+  flex: 1;
+  min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
 }
diff --git a/src/app/components/player/player.component.html b/src/app/components/player/player.component.html
index 2510e833..35c9ba6e 100644
--- a/src/app/components/player/player.component.html
+++ b/src/app/components/player/player.component.html
@@ -21,7 +21,7 @@
       [ngStyle]="resizeStyle"
       >
       <div class="grid">
-        <div>
+        <div class="sidebar-content">
           @if (!(mini$ | async)) {
             <mat-toolbar class="sidenav-header" title="Return to Home" [routerLink]="['/']">
               <a class="nolink" [routerLink]="['/']">
diff --git a/src/app/components/player/player.component.scss b/src/app/components/player/player.component.scss
index 9dc7a166..e149314a 100644
--- a/src/app/components/player/player.component.scss
+++ b/src/app/components/player/player.component.scss
@@ -1,12 +1,15 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .appcontent-container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  flex: 1;
+  overflow: hidden;
 }
 
 .noscroll {
@@ -71,9 +74,15 @@
   width: 40px;
 }
 
+.sidebar-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
 .bottom-div {
-  position: absolute;
-  bottom: 0;
+  flex-shrink: 0;
   width: 100%;
   height: 80px;
 }
diff --git a/src/app/components/shared/add-remove-users-dialog/add-remove-users-dialog.component.html b/src/app/components/shared/add-remove-users-dialog/add-remove-users-dialog.component.html
index 4f585bb5..7bc23cfc 100644
--- a/src/app/components/shared/add-remove-users-dialog/add-remove-users-dialog.component.html
+++ b/src/app/components/shared/add-remove-users-dialog/add-remove-users-dialog.component.html
@@ -11,6 +11,7 @@
     </div>
     <div class="d-flex align-items-center">
       <mat-form-field class="w-100 my-1" subscriptSizing="dynamic">
+        <mat-label>Search</mat-label>
         <mat-icon
           matPrefix
           style="transform: scale(0.85); margin-right: 5px; margin-left: 10px"
@@ -147,6 +148,7 @@
           <mat-header-cell *matHeaderCellDef>Role</mat-header-cell>
           <mat-cell *matCellDef="let element">
             <mat-form-field subscriptSizing="dynamic" class="my-1">
+              <mat-label>Role</mat-label>
               <mat-select
                 placeholder="Role"
                 name="teamMembershipRole"
diff --git a/src/app/components/shared/name-dialog/name-dialog.component.html b/src/app/components/shared/name-dialog/name-dialog.component.html
index 5c5407cd..c7304936 100644
--- a/src/app/components/shared/name-dialog/name-dialog.component.html
+++ b/src/app/components/shared/name-dialog/name-dialog.component.html
@@ -8,6 +8,7 @@ <h1 mat-dialog-title>{{ title }}</h1>
 
 <form [formGroup]="form" class="name-form">
   <mat-form-field class="form-full-width">
+    <mat-label>Name</mat-label>
     <input
       formControlName="name"
       matInput
diff --git a/src/assets/config/settings.shared.json b/src/assets/config/settings.shared.json
new file mode 100644
index 00000000..55bb5655
--- /dev/null
+++ b/src/assets/config/settings.shared.json
@@ -0,0 +1,12 @@
+{
+"HeaderBarSettings" : {
+    "banner_background_color": "#d40000ff",
+    "classification_text": "SECRET",
+    "classification_text_color": "#ffffff",
+    "classification_text_fontsize": "14",
+    "message_text": "Maintenance Message",
+    "message_text_color": "#ffff00",
+    "message_text_fontsize": "14",
+    "enabled": true
+  }
+}
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 275b6adb..c11b4443 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -3,8 +3,7 @@
 
 /* IMPORTS - All @use statements must come first */
 @use '@angular/material' as mat;
-@use '@mdi/font/scss/materialdesignicons' with ($mdi-font-path: '~@mdi/font/fonts'
-);
+@use '@mdi/font/scss/materialdesignicons';
 @use './theme-colors' as theme;
 @use './dark-theme-colors' as dark-theme;
 /* END IMPORTS */
@@ -19,23 +18,35 @@
 }
 
 html {
-  @include mat.theme((color: theme.$primary-palette,
+  @include mat.theme(
+    (
+      color: theme.$primary-palette,
       typography: '"Open Sans", sans-serif',
-    ));
-  @include mat.icon-button-overrides((icon-color: var(--mat-sys-primary),
-    ));
+    )
+  );
+  @include mat.icon-button-overrides(
+    (
+      icon-color: var(--mat-sys-primary),
+    )
+  );
 }
 
 .darkMode {
-  @include mat.theme((color: (primary: dark-theme.$dark-primary-palette,
+  @include mat.theme(
+    (
+      color: (
+        primary: dark-theme.$dark-primary-palette,
         typography: '"Open Sans", sans-serif',
         theme-type: dark,
       ),
-    ));
+    )
+  );
 }
 
 body {
-  font-family: "Open Sans", sans-serif;
+  font-family: 'Open Sans', sans-serif;
+  overflow: auto;
+  margin: 0;
 }
 
 // Override the disabled icon color specifically for mat-icon-button
@@ -130,7 +141,6 @@ mat-paginator {
 }
 
 .highlight {
-
   &:hover,
   &:focus {
     background: var(--mat-sys-surface-variant);
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
index 3a7aba9e..a5bffb75 100644
--- a/src/tsconfig.app.json
+++ b/src/tsconfig.app.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "baseUrl": "./",
-    "types": []
+    "types": [],
   },
   "files": ["main.ts", "polyfills.ts"],
   "include": ["src/**/*.d.ts"],
diff --git a/tsconfig.json b/tsconfig.json
index ceb46feb..c6907daf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,16 +2,16 @@
   "compileOnSave": false,
   "compilerOptions": {
     "module": "es2020",
+    "esModuleInterop": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "bundler",
     "experimentalDecorators": true,
     "target": "ES2022",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "useDefineForClassFields": false
+    "typeRoots": ["node_modules/@types"],
+    "useDefineForClassFields": false,
+    "skipLibCheck": true
   },
   "angularCompilerOptions": {
     "strictInjectionParameters": true,