diff --git a/package.json b/package.json
index 0f68713e..3e3ee828 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "blueprint-ui",
-  "version": "0.3.7-rc4",
+  "version": "0.3.7-rc5",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
diff --git a/src/app/components/admin/admin-container/admin-container.component.html b/src/app/components/admin/admin-container/admin-container.component.html
index 8f5d6dce..f3172600 100755
--- a/src/app/components/admin/admin-container/admin-container.component.html
+++ b/src/app/components/admin/admin-container/admin-container.component.html
@@ -110,7 +110,7 @@ <h2 class="icon-text">Administration</h2>
         [src]="
           (theme$ | async) === 'light-theme'
             ? '/assets/img/cmu-red-gray.png'
-            : '/assets/img/cmu-red-gray.png'
+            : '/assets/img/sei-logo-gray.png'
         "
       />
     </mat-sidenav>
diff --git a/src/app/components/card-list/card-list.component.html b/src/app/components/card-list/card-list.component.html
index d710dd4b..0b4b887e 100644
--- a/src/app/components/card-list/card-list.component.html
+++ b/src/app/components/card-list/card-list.component.html
@@ -3,101 +3,98 @@
 Released under a MIT (SEI)-style license, please see LICENSE.md in the
 project root for license information or contact permission@sei.cmu.edu for full terms.
 -->
-<div *ngIf="msel" style="height: 100%;">
-
-  <div style="height: 100%">
-    <section
-      matSort
-      (matSortChange)="sortChanged($event)"
-      class="mat-elevation-z2 mat-header-row background-alt"
-    >
-      <span class="mat-header-cell one-cell" mat-sort-header="move">
+<div *ngIf="msel" class="frame">
+  <section
+    matSort
+    (matSortChange)="sortChanged($event)"
+    class="mat-elevation-z2 mat-header-row background-alt"
+  >
+    <span class="mat-header-cell one-cell" mat-sort-header="move">
+      <button
+        mat-icon-button
+        (click)="addCard(); $event.stopPropagation()"
+        style="outline: none; margin-right: 15px;"
+        title="Add new card"
+        *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
+      >
+        <mat-icon class="mdi-24px self-center" fontIcon="mdi-plus-circle-outline"></mat-icon>
+      </button>
+      Move
+    </span>
+    <span class="mat-header-cell one-cell" mat-sort-header="inject">
+      Inject
+    </span>
+    <span class="mat-header-cell three-cell" mat-sort-header="name">Name</span>
+    <span class="mat-header-cell two-cell" mat-sort-header="description">Description</span>
+    <span class="mat-header-cell three-cell search-cell">
+      <mat-form-field class="search-control">
+        <input matInput [formControl]="filterControl" placeholder="Search" />
+      </mat-form-field>
+      <div style="width: 30px;">
         <button
           mat-icon-button
-          (click)="addCard(); $event.stopPropagation()"
-          style="outline: none; margin-right: 15px;"
-          title="Add new card"
-          *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
+          (click)="filterControl.setValue(''); $event.stopPropagation()"
+          style="outline: none;"
+          title="Clear Search"
+          [disabled]="!filterString"
         >
-          <mat-icon class="mdi-24px self-center" fontIcon="mdi-plus-circle-outline"></mat-icon>
+          <mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
         </button>
-        Move
-      </span>
-      <span class="mat-header-cell one-cell" mat-sort-header="inject">
-        Inject
-      </span>
-      <span class="mat-header-cell three-cell" mat-sort-header="name">Name</span>
-      <span class="mat-header-cell two-cell" mat-sort-header="description">Description</span>
-      <span class="mat-header-cell three-cell search-cell">
-        <mat-form-field class="search-control">
-          <input matInput [formControl]="filterControl" placeholder="Search" />
-        </mat-form-field>
-        <div style="width: 30px;">
+      </div>
+    </span>
+  </section>
+
+  <section class="scrolling-region">
+    <!-- existing cards -->
+    <mat-expansion-panel
+      *ngFor="let item of sortedCards;"
+      [expanded]="expandedId === item.id"
+    >
+      <mat-expansion-panel-header
+        class="mat-row"
+        (click)="expandCard(item.id); $event.stopPropagation();"
+      >
+        <div class="mat-cell flex-row-cell one-cell">
+          <button
+            mat-icon-button
+            class="card-button"
+            (click)="editCard(item); $event.stopPropagation()"
+            title="Edit this card"
+            *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
+          >
+            <mat-icon class="mdi-18px up-12" fontIcon="mdi-square-edit-outline"></mat-icon>
+          </button>
           <button
             mat-icon-button
-            (click)="filterControl.setValue(''); $event.stopPropagation()"
-            style="outline: none;"
-            title="Clear Search"
-            [disabled]="!filterString"
+            class="card-button"
+            (click)="deleteCard(item); $event.stopPropagation()"
+            title="Delete this card"
+            *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
           >
-            <mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
+            <mat-icon class="mdi-18px up-12" fontIcon="mdi-delete"></mat-icon>
           </button>
+          &nbsp;{{ item.move }}
         </div>
-      </span>
-    </section>
-
-    <section class="scrolling-region">
-      <!-- existing cards -->
-      <mat-expansion-panel
-        *ngFor="let item of sortedCards;"
-        [expanded]="expandedId === item.id"
-      >
-        <mat-expansion-panel-header
-          class="mat-row"
-          (click)="expandCard(item.id); $event.stopPropagation();"
-        >
-          <div class="mat-cell flex-row-cell one-cell">
-            <button
-              mat-icon-button
-              class="card-button"
-              (click)="editCard(item); $event.stopPropagation()"
-              title="Edit this card"
-              *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
-            >
-              <mat-icon class="mdi-18px up-12" fontIcon="mdi-square-edit-outline"></mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              class="card-button"
-              (click)="deleteCard(item); $event.stopPropagation()"
-              title="Delete this card"
-              *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
-            >
-              <mat-icon class="mdi-18px up-12" fontIcon="mdi-delete"></mat-icon>
-            </button>
-            &nbsp;{{ item.move }}
-          </div>
-          <div class="mat-cell flex-row-cell one-cell">
-            &nbsp;{{ item.inject }}
+        <div class="mat-cell flex-row-cell one-cell">
+          &nbsp;{{ item.inject }}
+        </div>
+        <div class="mat-cell three-cell center-self">{{ item.name }}</div>
+        <div class="mat-cell five-cell center-self">{{ item.description }}</div>
+      </mat-expansion-panel-header>
+      <ng-template matExpansionPanelContent>
+        <div class="card-detail" (click)="$event.stopPropagation();">
+          <div class="single-detail">
+            <h4>Select Teams</h4>
           </div>
-          <div class="mat-cell three-cell center-self">{{ item.name }}</div>
-          <div class="mat-cell five-cell center-self">{{ item.description }}</div>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-          <div class="card-detail" (click)="$event.stopPropagation();">
-            <div class="single-detail">
-              <h4>Select Teams</h4>
-            </div>
-            <div class="single-detail">
-              <app-card-teams
-                style="width: 100%;"
-                [cardId]="item.id"
-              >
-              </app-card-teams>
-            </div>
+          <div class="single-detail">
+            <app-card-teams
+              style="width: 100%;"
+              [cardId]="item.id"
+            >
+            </app-card-teams>
           </div>
-        </ng-template>
-      </mat-expansion-panel>
-    </section>
-  </div>
+        </div>
+      </ng-template>
+    </mat-expansion-panel>
+  </section>
 </div>
diff --git a/src/app/components/card-list/card-list.component.scss b/src/app/components/card-list/card-list.component.scss
index 740ee6be..cbbf2cdb 100644
--- a/src/app/components/card-list/card-list.component.scss
+++ b/src/app/components/card-list/card-list.component.scss
@@ -2,6 +2,13 @@
 // Released under a MIT (SEI)-style license. See LICENSE.md in the
 // project root for license information.
 
+.frame {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: calc(100vh - 39px);
+}
+
 .mat-header-row {
   min-height: 40px;
   padding-left:30px;
@@ -118,7 +125,7 @@
 }
 
 .scrolling-region {
-  height: calc(100vh - 144px);
+  height: calc(100vh - 89px);
   overflow: auto;
 }
 
diff --git a/src/app/components/cite-action-list/cite-action-list.component.html b/src/app/components/cite-action-list/cite-action-list.component.html
index 128929b5..410e7963 100644
--- a/src/app/components/cite-action-list/cite-action-list.component.html
+++ b/src/app/components/cite-action-list/cite-action-list.component.html
@@ -3,102 +3,99 @@
 Released under a MIT (SEI)-style license, please see LICENSE.md in the
 project root for license information or contact permission@sei.cmu.edu for full terms.
 -->
-<div *ngIf="msel" style="height: 100%;">
-
-  <div style="height: 100%">
-    <section
-      matSort
-      (matSortChange)="sortChanged($event)"
-      class="mat-elevation-z2 mat-header-row background-alt"
-    >
-      <span class="mat-header-cell one-cell">
+<div *ngIf="msel" class="frame">
+  <section
+    matSort
+    (matSortChange)="sortChanged($event)"
+    class="mat-elevation-z2 mat-header-row background-alt"
+  >
+    <span class="mat-header-cell one-cell">
+      <button
+        mat-icon-button
+        (click)="addOrEditCiteAction(null)"
+        style="outline: none; margin-right: 15px;"
+        title="Add new citeAction"
+        *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
+      >
+        <mat-icon class="mdi-24px self-center" fontIcon="mdi-plus-circle-outline"></mat-icon>
+      </button>
+    </span>
+    <span class="mat-header-cell one-cell" mat-sort-header="moveNumber">
+      <mat-form-field class="clear-search">
+        <mat-label>Move</mat-label>
+        <mat-select placeholder="Move" [value]="selectedMoveNumber" (selectionChange)="selectMove($event.value)" (click)="$event.stopPropagation()">
+          <mat-option [value]="-1">All</mat-option>
+          <mat-option *ngFor="let move of moveList" [value]="move.moveNumber">
+            {{ move.moveNumber }} - {{ move.title }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </span>
+    <span class="mat-header-cell four-cell" mat-sort-header="team">
+      <mat-form-field class="team-selector">
+        <mat-label>Team</mat-label>
+        <mat-select placeholder="Team" [value]="selectedTeamId" (selectionChange)="selectTeam($event.value)" (click)="$event.stopPropagation()">
+          <mat-option value="">All Teams</mat-option>
+          <mat-option *ngFor="let team of mselTeamList" [value]="team.id">
+            {{ team.shortName }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </span>
+    <span class="mat-header-cell one-cell">Display Order</span>
+    <span class="mat-header-cell two-cell" mat-sort-header="description">Description</span>
+    <span class="mat-header-cell two-cell search-cell">
+      <mat-form-field class="search-control">
+        <input matInput [formControl]="filterControl" placeholder="Search" />
+      </mat-form-field>
+      <div style="width: 30px;">
         <button
           mat-icon-button
-          (click)="addOrEditCiteAction(null)"
-          style="outline: none; margin-right: 15px;"
-          title="Add new citeAction"
-          *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
+          (click)="filterControl.setValue('')"
+          style="outline: none;"
+          title="Clear Search"
+          [disabled]="!filterString"
         >
-          <mat-icon class="mdi-24px self-center" fontIcon="mdi-plus-circle-outline"></mat-icon>
+          <mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
         </button>
-      </span>
-      <span class="mat-header-cell one-cell" mat-sort-header="moveNumber">
-        <mat-form-field class="clear-search">
-          <mat-label>Move</mat-label>
-          <mat-select placeholder="Move" [value]="selectedMoveNumber" (selectionChange)="selectMove($event.value)" (click)="$event.stopPropagation()">
-            <mat-option [value]="-1">All</mat-option>
-            <mat-option *ngFor="let move of moveList" [value]="move.moveNumber">
-              {{ move.moveNumber }} - {{ move.title }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </span>
-      <span class="mat-header-cell four-cell" mat-sort-header="team">
-        <mat-form-field class="team-selector">
-          <mat-label>Team</mat-label>
-          <mat-select placeholder="Team" [value]="selectedTeamId" (selectionChange)="selectTeam($event.value)" (click)="$event.stopPropagation()">
-            <mat-option value="">All Teams</mat-option>
-            <mat-option *ngFor="let team of mselTeamList" [value]="team.id">
-              {{ team.shortName }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </span>
-      <span class="mat-header-cell one-cell">Display Order</span>
-      <span class="mat-header-cell two-cell" mat-sort-header="description">Description</span>
-      <span class="mat-header-cell two-cell search-cell">
-        <mat-form-field class="search-control">
-          <input matInput [formControl]="filterControl" placeholder="Search" />
-        </mat-form-field>
-        <div style="width: 30px;">
+      </div>
+    </span>
+  </section>
+
+  <section class="scrolling-region">
+    <!-- existing citeActions -->
+    <mat-expansion-panel
+      *ngFor="let item of sortedCiteActions;"
+      disabled
+    >
+      <mat-expansion-panel-header
+        class="mat-row"
+      >
+        <div class="mat-cell flex-row-cell one-cell">
           <button
             mat-icon-button
-            (click)="filterControl.setValue('')"
-            style="outline: none;"
-            title="Clear Search"
-            [disabled]="!filterString"
+            class="cite-action-button"
+            title="Edit this citeAction"
+            (click)="addOrEditCiteAction(item)"
+            *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
           >
-            <mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
+            <mat-icon class="mdi-18px up-12" fontIcon="mdi-square-edit-outline"></mat-icon>
+          </button>
+          <button
+            mat-icon-button
+            class="cite-action-button"
+            (click)="deleteCiteAction(item)"
+            title="Delete this citeAction"
+            *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
+          >
+            <mat-icon class="mdi-18px up-12" fontIcon="mdi-delete"></mat-icon>
           </button>
         </div>
-      </span>
-    </section>
-
-    <section class="scrolling-region">
-      <!-- existing citeActions -->
-      <mat-expansion-panel
-        *ngFor="let item of sortedCiteActions;"
-        disabled
-      >
-        <mat-expansion-panel-header
-          class="mat-row"
-        >
-          <div class="mat-cell flex-row-cell one-cell">
-            <button
-              mat-icon-button
-              class="cite-action-button"
-              title="Edit this citeAction"
-              (click)="addOrEditCiteAction(item)"
-              *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
-            >
-              <mat-icon class="mdi-18px up-12" fontIcon="mdi-square-edit-outline"></mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              class="cite-action-button"
-              (click)="deleteCiteAction(item)"
-              title="Delete this citeAction"
-              *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
-            >
-              <mat-icon class="mdi-18px up-12" fontIcon="mdi-delete"></mat-icon>
-            </button>
-          </div>
-          <div class="mat-cell flex-row-cell one-cell">{{ item.moveNumber }}</div>
-          <div class="mat-cell four-cell center-self">{{ item.team.shortName }} - {{ item.team.name }}</div>
-          <div class="mat-cell one-cell center-self">{{ item.actionNumber }}</div>
-          <div class="mat-cell four-cell center-self">{{ item.description }}</div>
-        </mat-expansion-panel-header>
-      </mat-expansion-panel>
-    </section>
-  </div>
+        <div class="mat-cell flex-row-cell one-cell">{{ item.moveNumber }}</div>
+        <div class="mat-cell four-cell center-self">{{ item.team.shortName }} - {{ item.team.name }}</div>
+        <div class="mat-cell one-cell center-self">{{ item.actionNumber }}</div>
+        <div class="mat-cell four-cell center-self">{{ item.description }}</div>
+      </mat-expansion-panel-header>
+    </mat-expansion-panel>
+  </section>
 </div>
diff --git a/src/app/components/cite-action-list/cite-action-list.component.scss b/src/app/components/cite-action-list/cite-action-list.component.scss
index ea014970..4f8acaf1 100644
--- a/src/app/components/cite-action-list/cite-action-list.component.scss
+++ b/src/app/components/cite-action-list/cite-action-list.component.scss
@@ -1,7 +1,14 @@
 // Copyright 2022 Carnegie Mellon University. All Rights Reserved.
-// Released under a MIT (SEI)-style license, please see LICENSE.md in the
+// Released under a MIT (SEI)-style license, please see LICENSE.md in the
 // project root for license information or contact permission@sei.cmu.edu for full terms.
 
+.frame {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: calc(100vh - 39px);
+}
+
 .mat-header-row {
   min-height: 40px;
   padding-left:30px;
@@ -118,7 +125,7 @@
 }
 
 .scrolling-region {
-  height: calc(100vh - 144px);
+  height: calc(100vh - 89px);
   overflow: auto;
 }
 
diff --git a/src/app/components/cite-role-list/cite-role-list.component.html b/src/app/components/cite-role-list/cite-role-list.component.html
index 5b6b23a1..f03ef033 100644
--- a/src/app/components/cite-role-list/cite-role-list.component.html
+++ b/src/app/components/cite-role-list/cite-role-list.component.html
@@ -3,91 +3,88 @@
 Released under a MIT (SEI)-style license, please see LICENSE.md in the
 project root for license information or contact permission@sei.cmu.edu for full terms.
 -->
-<div *ngIf="msel" style="height: 100%;">
-
-  <div style="height: 100%">
-    <section
-      matSort
-      (matSortChange)="sortChanged($event)"
-      class="mat-elevation-z2 mat-header-row background-alt"
-    >
-      <span class="mat-header-cell four-cell" mat-sort-header="name">
+<div *ngIf="msel" class="frame">
+  <section
+    matSort
+    (matSortChange)="sortChanged($event)"
+    class="mat-elevation-z2 mat-header-row background-alt"
+  >
+    <span class="mat-header-cell four-cell" mat-sort-header="name">
+      <button
+        mat-icon-button
+        (click)="addOrEditCiteRole(null)"
+        style="outline: none; margin-right: 15px;"
+        title="Add new citeRole"
+        *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
+      >
+        <mat-icon class="mdi-24px self-center" fontIcon="mdi-plus-circle-outline"></mat-icon>
+      </button>
+      Name
+    </span>
+    <span class="mat-header-cell three-cell" mat-sort-header="team">
+      <mat-form-field class="team-selector">
+        <mat-label>Team</mat-label>
+        <mat-select placeholder="Team" [value]="selectedTeamId" (selectionChange)="selectTeam($event.value)" (click)="$event.stopPropagation()">
+          <mat-option value="">All Teams</mat-option>
+          <mat-option *ngFor="let team of mselTeamList" [value]="team.id">
+            {{ team.shortName }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </span>
+    <span class="mat-header-cell three-cell search-cell">
+      <mat-form-field class="search-control">
+        <input matInput [formControl]="filterControl" placeholder="Search" />
+      </mat-form-field>
+      <div style="width: 30px;">
         <button
           mat-icon-button
-          (click)="addOrEditCiteRole(null)"
-          style="outline: none; margin-right: 15px;"
-          title="Add new citeRole"
-          *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
+          (click)="filterControl.setValue('')"
+          style="outline: none;"
+          title="Clear Search"
+          [disabled]="!filterString"
         >
-          <mat-icon class="mdi-24px self-center" fontIcon="mdi-plus-circle-outline"></mat-icon>
+          <mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
         </button>
-        Name
-      </span>
-      <span class="mat-header-cell three-cell" mat-sort-header="team">
-        <mat-form-field class="team-selector">
-          <mat-label>Team</mat-label>
-          <mat-select placeholder="Team" [value]="selectedTeamId" (selectionChange)="selectTeam($event.value)" (click)="$event.stopPropagation()">
-            <mat-option value="">All Teams</mat-option>
-            <mat-option *ngFor="let team of mselTeamList" [value]="team.id">
-              {{ team.shortName }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </span>
-      <span class="mat-header-cell three-cell search-cell">
-        <mat-form-field class="search-control">
-          <input matInput [formControl]="filterControl" placeholder="Search" />
-        </mat-form-field>
-        <div style="width: 30px;">
+      </div>
+    </span>
+  </section>
+
+  <section class="scrolling-region">
+    <!-- existing citeRoles -->
+    <mat-expansion-panel
+      *ngFor="let item of sortedCiteRoles;"
+      disabled
+    >
+      <mat-expansion-panel-header
+        class="mat-row"
+      >
+        <div class="mat-cell flex-row-cell four-cell">
+          <button
+            mat-icon-button
+            class="cite-role-button"
+            title="Edit this citeRole"
+            (click)="addOrEditCiteRole(item)"
+            *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
+          >
+            <mat-icon class="mdi-18px up-12" fontIcon="mdi-square-edit-outline"></mat-icon>
+          </button>
           <button
             mat-icon-button
-            (click)="filterControl.setValue('')"
-            style="outline: none;"
-            title="Clear Search"
-            [disabled]="!filterString"
+            class="cite-role-button"
+            (click)="deleteCiteRole(item)"
+            title="Delete this citeRole"
+            *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
           >
-            <mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
+            <mat-icon class="mdi-18px up-12" fontIcon="mdi-delete"></mat-icon>
           </button>
+          &nbsp;{{ item.name }}
         </div>
-      </span>
-    </section>
-
-    <section class="scrolling-region">
-      <!-- existing citeRoles -->
-      <mat-expansion-panel
-        *ngFor="let item of sortedCiteRoles;"
-        disabled
-      >
-        <mat-expansion-panel-header
-          class="mat-row"
-        >
-          <div class="mat-cell flex-row-cell four-cell">
-            <button
-              mat-icon-button
-              class="cite-role-button"
-              title="Edit this citeRole"
-              (click)="addOrEditCiteRole(item)"
-              *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
-            >
-              <mat-icon class="mdi-18px up-12" fontIcon="mdi-square-edit-outline"></mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              class="cite-role-button"
-              (click)="deleteCiteRole(item)"
-              title="Delete this citeRole"
-              *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
-            >
-              <mat-icon class="mdi-18px up-12" fontIcon="mdi-delete"></mat-icon>
-            </button>
-            &nbsp;{{ item.name }}
-          </div>
-          <div class="mat-cell three-cell center-self">
-            {{ item.team.shortName }} - {{ item.team.name }}
-          </div>
-          <div class="mat-cell three-cell center-self">&nbsp;</div>
-        </mat-expansion-panel-header>
-      </mat-expansion-panel>
-    </section>
-  </div>
+        <div class="mat-cell three-cell center-self">
+          {{ item.team.shortName }} - {{ item.team.name }}
+        </div>
+        <div class="mat-cell three-cell center-self">&nbsp;</div>
+      </mat-expansion-panel-header>
+    </mat-expansion-panel>
+  </section>
 </div>
diff --git a/src/app/components/cite-role-list/cite-role-list.component.scss b/src/app/components/cite-role-list/cite-role-list.component.scss
index a4cbc6d8..c4efe704 100644
--- a/src/app/components/cite-role-list/cite-role-list.component.scss
+++ b/src/app/components/cite-role-list/cite-role-list.component.scss
@@ -1,7 +1,14 @@
 // Copyright 2022 Carnegie Mellon University. All Rights Reserved.
-// Released under a MIT (SEI)-style license, please see LICENSE.md in the
+// Released under a MIT (SEI)-style license, please see LICENSE.md in the
 // project root for license information or contact permission@sei.cmu.edu for full terms.
 
+.frame {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: calc(100vh - 39px);
+}
+
 .mat-header-row {
   min-height: 40px;
   padding-left:30px;
@@ -118,7 +125,7 @@
 }
 
 .scrolling-region {
-  height: calc(100vh - 144px);
+  height: calc(100vh - 89px);
   overflow: auto;
 }
 
diff --git a/src/app/components/data-field-list/data-field-list.component.html b/src/app/components/data-field-list/data-field-list.component.html
index 6f065e3c..f37d57c5 100755
--- a/src/app/components/data-field-list/data-field-list.component.html
+++ b/src/app/components/data-field-list/data-field-list.component.html
@@ -3,122 +3,119 @@
 Released under a MIT (SEI)-style license, please see LICENSE.md in the
 project root for license information or contact permission@sei.cmu.edu for full terms.
 -->
-<div *ngIf="msel" style="height: 100%;">
-
-  <div style="height: 100%">
-    <section
-      matSort
-      (matSortChange)="sortChanged($event)"
-      class="mat-elevation-z2 mat-header-row background-alt"
-    >
-      <span class="mat-header-cell one-cell" mat-sort-header="displayOrder">
+<div *ngIf="msel" class="frame">
+  <section
+    matSort
+    (matSortChange)="sortChanged($event)"
+    class="mat-elevation-z2 mat-header-row background-alt"
+  >
+    <span class="mat-header-cell one-cell" mat-sort-header="displayOrder">
+      <button
+        mat-icon-button
+        (click)="addOrEditDataField(null); $event.stopPropagation()"
+        style="outline: none; margin-right: 15px;"
+        title="Add new data field"
+        *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
+      >
+        <mat-icon class="mdi-24px self-center" fontIcon="mdi-plus-circle-outline"></mat-icon>
+      </button>
+      Order
+    </span>
+    <span class="mat-header-cell one-cell">Display On<br />Injects&nbsp;&nbsp;&nbsp;&nbsp;Exercise View</span>
+    <span class="mat-header-cell two-cell" mat-sort-header="name">Name</span>
+    <span class="mat-header-cell one-cell" mat-sort-header="dataType">Data Type</span>
+    <span class="mat-header-cell one-cell" mat-sort-header="integration">
+      <span class="integration">Integration
+        <span class="gallery-warning" *ngIf="!!galleryToDo()" title="** See warning message below!">
+          **
+        </span>
+      </span>
+    </span>
+    <span class="mat-header-cell one-cell" mat-sort-header="isChosenFromList">Options</span>
+    <span class="mat-header-cell one-cell search-cell">
+      <mat-form-field class="search-control">
+        <input matInput [formControl]="filterControl" placeholder="Search" />
+      </mat-form-field>
+      <div style="width: 30px;">
         <button
           mat-icon-button
-          (click)="addOrEditDataField(null); $event.stopPropagation()"
-          style="outline: none; margin-right: 15px;"
-          title="Add new data field"
-          *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
+          (click)="filterControl.setValue(''); $event.stopPropagation()"
+          style="outline: none;"
+          title="Clear Search"
+          [disabled]="!filterString"
         >
-          <mat-icon class="mdi-24px self-center" fontIcon="mdi-plus-circle-outline"></mat-icon>
+          <mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
         </button>
-        Order
-      </span>
-      <span class="mat-header-cell one-cell">Display On<br />Injects&nbsp;&nbsp;&nbsp;&nbsp;Exercise View</span>
-      <span class="mat-header-cell two-cell" mat-sort-header="name">Name</span>
-      <span class="mat-header-cell one-cell" mat-sort-header="dataType">Data Type</span>
-      <span class="mat-header-cell one-cell" mat-sort-header="integration">
-        <span class="integration">Integration
-          <span class="gallery-warning" *ngIf="!!galleryToDo()" title="** See warning message below!">
-            **
-          </span>
-        </span>
-      </span>
-      <span class="mat-header-cell one-cell" mat-sort-header="isChosenFromList">Options</span>
-      <span class="mat-header-cell one-cell search-cell">
-        <mat-form-field class="search-control">
-          <input matInput [formControl]="filterControl" placeholder="Search" />
-        </mat-form-field>
-        <div style="width: 30px;">
+      </div>
+    </span>
+  </section>
+
+  <section class="scrolling-region">
+    <!-- existing data fields -->
+    <mat-expansion-panel
+      *ngFor="let item of sortedDataFields;"
+      disabled
+    >
+      <mat-expansion-panel-header
+        class="mat-row"
+      >
+        <div class="mat-cell flex-row-cell one-cell">
+          <button
+            mat-icon-button
+            class="data-field-button"
+            title="Edit this data field"
+            (click)="addOrEditDataField(item)"
+            *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
+          >
+            <mat-icon class="mdi-18px up-12" fontIcon="mdi-square-edit-outline"></mat-icon>
+          </button>
           <button
             mat-icon-button
-            (click)="filterControl.setValue(''); $event.stopPropagation()"
-            style="outline: none;"
-            title="Clear Search"
-            [disabled]="!filterString"
+            class="data-field-button"
+            (click)="deleteDataField(item); $event.stopPropagation()"
+            title="Delete this data field"
+            *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
           >
-            <mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
+            <mat-icon class="mdi-18px up-12" fontIcon="mdi-delete"></mat-icon>
           </button>
+          &nbsp;{{ item.displayOrder }}
         </div>
-      </span>
-    </section>
-
-    <section class="scrolling-region">
-      <!-- existing data fields -->
-      <mat-expansion-panel
-        *ngFor="let item of sortedDataFields;"
-        disabled
-      >
-        <mat-expansion-panel-header
-          class="mat-row"
-        >
-          <div class="mat-cell flex-row-cell one-cell">
-            <button
-              mat-icon-button
-              class="data-field-button"
-              title="Edit this data field"
-              (click)="addOrEditDataField(item)"
-              *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
-            >
-              <mat-icon class="mdi-18px up-12" fontIcon="mdi-square-edit-outline"></mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              class="data-field-button"
-              (click)="deleteDataField(item); $event.stopPropagation()"
-              title="Delete this data field"
-              *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
-            >
-              <mat-icon class="mdi-18px up-12" fontIcon="mdi-delete"></mat-icon>
-            </button>
-            &nbsp;{{ item.displayOrder }}
-          </div>
-          <div class="mat-cell flex-row-cell one-cell center-self">
-            <mat-checkbox
-              [(ngModel)]="item.onScenarioEventList"
-              [disabled]="!isContentDeveloper && !msel.hasRole(loggedInUserId, null).owner"
-              (change)="saveChange(item)"
-              (click)="$event.stopPropagation()"
-            >
-            </mat-checkbox>
-            <mat-checkbox
-              [(ngModel)]="item.onExerciseView"
-              [disabled]="!isContentDeveloper && !msel.hasRole(loggedInUserId, null).owner"
-              (change)="saveChange(item)"
-              (click)="$event.stopPropagation();"
-              class="exercise-view-checkbox"
-            >
-            </mat-checkbox>
-          </div>
-          <div class="mat-cell two-cell center-self">{{ item.name }}</div>
-          <div class="mat-cell one-cell center-self">{{ item.dataType }}</div>
-          <div class="mat-cell one-cell center-self">
-            <mat-select
-              class="integration"
-              [(ngModel)]="item.galleryArticleParameter"
-              (selectionChange)="saveChange(item)"
-              (click)="$event.stopPropagation();"
-              [disabled]="!isContentDeveloper && !msel.hasRole(this.loggedInUserId, null).owner"
-            >
-              <mat-option value=""></mat-option>
-              <mat-option *ngFor="let parameter of msel.galleryArticleParameters" value="{{ parameter }}">{{ parameter }}</mat-option>
-            </mat-select>
-          </div>
-          <div class="mat-cell two-cell center-self">{{ getDataOptionsString(item.id) }}</div>
-        </mat-expansion-panel-header>
-        <ng-template matExpansionPanelContent>
-        </ng-template>
-      </mat-expansion-panel>
-      <span class="gallery-warning" *ngIf="!!galleryToDo()">** These Gallery Article Parameters have not been assigned:  {{ galleryToDo() }}</span>
-    </section>
-  </div>
+        <div class="mat-cell flex-row-cell one-cell center-self">
+          <mat-checkbox
+            [(ngModel)]="item.onScenarioEventList"
+            [disabled]="!isContentDeveloper && !msel.hasRole(loggedInUserId, null).owner"
+            (change)="saveChange(item)"
+            (click)="$event.stopPropagation()"
+          >
+          </mat-checkbox>
+          <mat-checkbox
+            [(ngModel)]="item.onExerciseView"
+            [disabled]="!isContentDeveloper && !msel.hasRole(loggedInUserId, null).owner"
+            (change)="saveChange(item)"
+            (click)="$event.stopPropagation();"
+            class="exercise-view-checkbox"
+          >
+          </mat-checkbox>
+        </div>
+        <div class="mat-cell two-cell center-self">{{ item.name }}</div>
+        <div class="mat-cell one-cell center-self">{{ item.dataType }}</div>
+        <div class="mat-cell one-cell center-self">
+          <mat-select
+            class="integration"
+            [(ngModel)]="item.galleryArticleParameter"
+            (selectionChange)="saveChange(item)"
+            (click)="$event.stopPropagation();"
+            [disabled]="!isContentDeveloper && !msel.hasRole(this.loggedInUserId, null).owner"
+          >
+            <mat-option value=""></mat-option>
+            <mat-option *ngFor="let parameter of msel.galleryArticleParameters" value="{{ parameter }}">{{ parameter }}</mat-option>
+          </mat-select>
+        </div>
+        <div class="mat-cell two-cell center-self">{{ getDataOptionsString(item.id) }}</div>
+      </mat-expansion-panel-header>
+      <ng-template matExpansionPanelContent>
+      </ng-template>
+    </mat-expansion-panel>
+    <span class="gallery-warning" *ngIf="!!galleryToDo()">** These Gallery Article Parameters have not been assigned:  {{ galleryToDo() }}</span>
+  </section>
 </div>
diff --git a/src/app/components/data-field-list/data-field-list.component.scss b/src/app/components/data-field-list/data-field-list.component.scss
index 54d57d94..2010898d 100755
--- a/src/app/components/data-field-list/data-field-list.component.scss
+++ b/src/app/components/data-field-list/data-field-list.component.scss
@@ -2,8 +2,15 @@
 // Released under a MIT (SEI)-style license. See LICENSE.md in the
 // project root for license information.
 
+.frame {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: calc(100vh - 39px);
+}
+
 .mat-header-row {
-  min-height: 40px;
+  height: 48px;
   padding-left:30px;
   padding-right: 50px;
 }
@@ -114,7 +121,7 @@
 }
 
 .scrolling-region {
-  height: calc(100vh - 144px);
+  height: calc(100vh - 89px);
   overflow: auto;
 }
 
diff --git a/src/app/components/move-list/move-list.component.html b/src/app/components/move-list/move-list.component.html
index 0e7e2592..d3413186 100755
--- a/src/app/components/move-list/move-list.component.html
+++ b/src/app/components/move-list/move-list.component.html
@@ -3,88 +3,85 @@
 Released under a MIT (SEI)-style license, please see LICENSE.md in the
 project root for license information or contact permission@sei.cmu.edu for full terms.
 -->
-<div *ngIf="msel" style="height: 100%;">
-
-  <div style="height: 100%">
-    <section
-      matSort
-      (matSortChange)="sortChanged($event)"
-      class="mat-elevation-z2 mat-header-row background-alt"
-    >
-      <span class="mat-header-cell one-cell" mat-sort-header="moveNumber">
+<div *ngIf="msel" class="frame">
+  <section
+    matSort
+    (matSortChange)="sortChanged($event)"
+    class="mat-elevation-z2 mat-header-row background-alt"
+  >
+    <span class="mat-header-cell one-cell" mat-sort-header="moveNumber">
+      <button
+        mat-icon-button
+        (click)="addOrEditMove(null); $event.stopPropagation()"
+        style="outline: none; margin-right: 15px;"
+        title="Add new move"
+        [disabled]="isAddingMove"
+        *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner || msel.hasRole(loggedInUserId, null).moveEditor"
+      >
+        <mat-icon class="mdi-24px self-center" fontIcon="mdi-plus-circle-outline"></mat-icon>
+      </button>
+      Move
+    </span>
+    <span class="mat-header-cell one-cell" mat-sort-header="moveStartTime">Start</span>
+    <span class="mat-header-cell one-cell" mat-sort-header="moveStopTime">Stop</span>
+    <span class="mat-header-cell one-cell" mat-sort-header="situationTime">Situation Time</span>
+    <span class="mat-header-cell two-cell" mat-sort-header="title">Title</span>
+    <span class="mat-header-cell two-cell" mat-sort-header="description">Description</span>
+    <span class="mat-header-cell two-cell search-cell">
+      <mat-form-field class="search-control">
+        <input matInput [formControl]="filterControl" placeholder="Search" />
+      </mat-form-field>
+      <div style="width: 30px;">
         <button
           mat-icon-button
-          (click)="addOrEditMove(null); $event.stopPropagation()"
-          style="outline: none; margin-right: 15px;"
-          title="Add new move"
-          [disabled]="isAddingMove"
-          *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner || msel.hasRole(loggedInUserId, null).moveEditor"
+          (click)="filterControl.setValue(''); $event.stopPropagation()"
+          style="outline: none;"
+          title="Clear Search"
+          [disabled]="!filterString"
         >
-          <mat-icon class="mdi-24px self-center" fontIcon="mdi-plus-circle-outline"></mat-icon>
+          <mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
         </button>
-        Move
-      </span>
-      <span class="mat-header-cell one-cell" mat-sort-header="moveStartTime">Start</span>
-      <span class="mat-header-cell one-cell" mat-sort-header="moveStopTime">Stop</span>
-      <span class="mat-header-cell one-cell" mat-sort-header="situationTime">Situation Time</span>
-      <span class="mat-header-cell two-cell" mat-sort-header="title">Title</span>
-      <span class="mat-header-cell two-cell" mat-sort-header="description">Description</span>
-      <span class="mat-header-cell two-cell search-cell">
-        <mat-form-field class="search-control">
-          <input matInput [formControl]="filterControl" placeholder="Search" />
-        </mat-form-field>
-        <div style="width: 30px;">
+      </div>
+    </span>
+  </section>
+
+  <section class="scrolling-region">
+    <!-- existing moves -->
+    <mat-expansion-panel
+      *ngFor="let item of displayedMoves;"
+      [expanded]="editingId === item.id"
+      disabled
+    >
+      <mat-expansion-panel-header
+        class="mat-row"
+      >
+        <div class="mat-cell flex-row-cell one-cell">
           <button
             mat-icon-button
-            (click)="filterControl.setValue(''); $event.stopPropagation()"
-            style="outline: none;"
-            title="Clear Search"
-            [disabled]="!filterString"
+            class="move-button"
+            (click)="addOrEditMove(item)"
+            title="Edit this move"
+            *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner || msel.hasRole(loggedInUserId, null).moveEditor"
           >
-            <mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
+            <mat-icon class="mdi-18px up-12" fontIcon="mdi-square-edit-outline"></mat-icon>
           </button>
+          <button
+            mat-icon-button
+            class="move-button"
+            (click)="deleteMove(item)"
+            title="Delete this move"
+            *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner || msel.hasRole(loggedInUserId, null).moveEditor"
+          >
+            <mat-icon class="mdi-18px up-12" fontIcon="mdi-delete"></mat-icon>
+          </button>
+          &nbsp;{{ item.moveNumber }}
         </div>
-      </span>
-    </section>
-
-    <section class="scrolling-region">
-      <!-- existing moves -->
-      <mat-expansion-panel
-        *ngFor="let item of displayedMoves;"
-        [expanded]="editingId === item.id"
-        disabled
-      >
-        <mat-expansion-panel-header
-          class="mat-row"
-        >
-          <div class="mat-cell flex-row-cell one-cell">
-            <button
-              mat-icon-button
-              class="move-button"
-              (click)="addOrEditMove(item)"
-              title="Edit this move"
-              *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner || msel.hasRole(loggedInUserId, null).moveEditor"
-            >
-              <mat-icon class="mdi-18px up-12" fontIcon="mdi-square-edit-outline"></mat-icon>
-            </button>
-            <button
-              mat-icon-button
-              class="move-button"
-              (click)="deleteMove(item)"
-              title="Delete this move"
-              *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner || msel.hasRole(loggedInUserId, null).moveEditor"
-            >
-              <mat-icon class="mdi-18px up-12" fontIcon="mdi-delete"></mat-icon>
-            </button>
-            &nbsp;{{ item.moveNumber }}
-          </div>
-          <div class="mat-cell one-cell center-self">{{ item.moveStartTime | date: 'HH:mm' }}</div>
-          <div class="mat-cell one-cell center-self">{{ item.moveStopTime | date: 'HH:mm' }}</div>
-          <div class="mat-cell one-cell center-self">{{ item.situationTime | date: 'MM/dd/yyyy HH:mm' }}</div>
-          <div class="mat-cell two-cell center-self">{{ item.title }}</div>
-          <div class="mat-cell four-cell center-self">{{ item.description }}</div>
-        </mat-expansion-panel-header>
-      </mat-expansion-panel>
-    </section>
-  </div>
+        <div class="mat-cell one-cell center-self">{{ item.moveStartTime | date: 'HH:mm' }}</div>
+        <div class="mat-cell one-cell center-self">{{ item.moveStopTime | date: 'HH:mm' }}</div>
+        <div class="mat-cell one-cell center-self">{{ item.situationTime | date: 'MM/dd/yyyy HH:mm' }}</div>
+        <div class="mat-cell two-cell center-self">{{ item.title }}</div>
+        <div class="mat-cell four-cell center-self">{{ item.description }}</div>
+      </mat-expansion-panel-header>
+    </mat-expansion-panel>
+  </section>
 </div>
diff --git a/src/app/components/move-list/move-list.component.scss b/src/app/components/move-list/move-list.component.scss
index fdb9cea4..c49729a7 100755
--- a/src/app/components/move-list/move-list.component.scss
+++ b/src/app/components/move-list/move-list.component.scss
@@ -1,7 +1,14 @@
 // Copyright 2022 Carnegie Mellon University. All Rights Reserved.
-// Released under a MIT (SEI)-style license. See LICENSE.md in the
+// Released under a MIT (SEI)-style license. See LICENSE.md in the
 // project root for license information.
 
+.frame {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: calc(100vh - 39px);
+}
+
 .mat-header-row {
   min-height: 40px;
   padding-left:30px;
@@ -110,7 +117,7 @@
 }
 
 .scrolling-region {
-  height: calc(100vh - 144px);
+  height: calc(100vh - 89px);
   overflow: auto;
 }
 
diff --git a/src/app/components/msel-info/msel-info.component.html b/src/app/components/msel-info/msel-info.component.html
index 9422bb8f..aef9a9cb 100755
--- a/src/app/components/msel-info/msel-info.component.html
+++ b/src/app/components/msel-info/msel-info.component.html
@@ -6,10 +6,10 @@
 <div class="frame">
   <mat-tab-group
     mat-align-tabs="start"
-    class="tab-group"
+    class="mat-tab-group"
     (selectedTabChange)="tabChange($event)">
   >
-    <mat-tab label="Config">
+    <mat-tab label="Config" class="mat-tab">
       <div class="edit-buttons">
         <span>
           <button
@@ -33,7 +33,7 @@
         </span>
       </div>
       <div *ngIf="msel" class="scrolling-region">
-        <div class="scenario-event-detail">
+        <div class="info-detail">
           <div class="single-detail">
             <mat-form-field class="full-width">
               <input
@@ -327,7 +327,7 @@
         </div>
       </div>
     </mat-tab>
-    <mat-tab *ngFor="let page of mselPages" label="{{ page.name }}">
+    <mat-tab *ngFor="let page of mselPages" label="{{ page.name }}" class="mat-tab">
       <!-- page content -->
       <div class="edit-buttons">
         <span *ngIf="!editingPageId">
diff --git a/src/app/components/msel-info/msel-info.component.scss b/src/app/components/msel-info/msel-info.component.scss
index 87f962ac..a6422ce8 100755
--- a/src/app/components/msel-info/msel-info.component.scss
+++ b/src/app/components/msel-info/msel-info.component.scss
@@ -4,12 +4,17 @@
 
 .frame {
   width: 100%;
-  height: calc(100vh - 88px);
+  height: calc(100vh - 39px);
 }
 
-.tab-group {
-  width: 90%;
-  margin-left: 10%;
+.mat-tab-group {
+  width: 100%;
+  height: 100%;
+}
+
+.mat-tab {
+  width: 100%;
+  height: 480px;
 }
 
 .flex-row-cell {
@@ -20,16 +25,15 @@
   text-align: left;
 }
 
-.scenario-event-detail {
-  width: 90%;
-  margin-left: 5%;
+.info-detail {
+  width: 80%;
+  margin-left: 20px;
 }
 
 .scrolling-region {
-  height: calc(100vh - 198px);
   overflow: auto;
-  padding-top: 20px;
   width: 100%;
+  height: calc(100% - 40px);
 }
 
 .page-content-region {
@@ -57,7 +61,7 @@
   display: flex;
   flex-flow: row;
   align-items:flex-start;
-  width: 70%;
+  width: 100%;
 }
 
 .top-margin {
diff --git a/src/app/components/msel-roles/msel-roles.component.scss b/src/app/components/msel-roles/msel-roles.component.scss
index 0915098e..73f83cec 100755
--- a/src/app/components/msel-roles/msel-roles.component.scss
+++ b/src/app/components/msel-roles/msel-roles.component.scss
@@ -3,19 +3,19 @@
 // project root for license information.
 
 .scrolling-region {
-  height: calc(100vh - 87px);
+  width: 100%;
+  height: calc(100vh - 60px);
   overflow: auto;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
+  margin-top: 20px;
 }
 
 .section-container {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  margin: 20px;
-  width:70%;
+  width: 100%;
 }
 
 .section-content {
@@ -23,7 +23,7 @@
 }
 
 .mat-expansion-panel {
-  width: calc(100% - 1-px);
+  width: calc(100% - 1px);
   margin: 5px;
 }
 
diff --git a/src/app/components/msel-view/msel-view.component.scss b/src/app/components/msel-view/msel-view.component.scss
index 04ca9b7e..b877045e 100755
--- a/src/app/components/msel-view/msel-view.component.scss
+++ b/src/app/components/msel-view/msel-view.component.scss
@@ -3,8 +3,10 @@
 // project root for license information.
 
 .container {
-  height: calc(100vh - 87px);
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: calc(100vh - 39px);
   overflow: auto;
 }
 
diff --git a/src/app/components/msel/msel.component.html b/src/app/components/msel/msel.component.html
index b803dfab..58b04026 100755
--- a/src/app/components/msel/msel.component.html
+++ b/src/app/components/msel/msel.component.html
@@ -4,89 +4,187 @@
 project root for license information or contact permission@sei.cmu.edu for full terms.
 -->
 
-<mat-tab-group
-  *ngIf="selectedTab !== '<<  Back'"
-  #tabGroup0
-  class="tab-group"
-  mat-align-tabs="start"
-  [selectedIndex]="selectedIndex"
-  (selectedTabChange)="tabChange($event)">
-  <mat-tab label="<<  Back">
-  </mat-tab>
-  <mat-tab label="Info">
-    <app-msel-info
-      *ngIf="selectedTab === 'Info'"
-      [loggedInUserId]="loggedInUserId"
-      [isContentDeveloper]="isContentDeveloper"
-    ></app-msel-info>
-  </mat-tab>
-  <mat-tab label="Teams">
-    <app-msel-roles
-      *ngIf="selectedTab === 'Teams'"
-      [loggedInUserId]="loggedInUserId"
-      [isContentDeveloper]="isContentDeveloper"
-    ></app-msel-roles>
-  </mat-tab>
-  <mat-tab label="Data Fields">
-    <app-data-field-list
-      *ngIf="selectedTab === 'Data Fields'"
-      [loggedInUserId]="loggedInUserId"
-      [isContentDeveloper]="isContentDeveloper"
-    ></app-data-field-list>
-  </mat-tab>
-  <mat-tab label="Organizations">
-    <app-organization-list
-      *ngIf="selectedTab === 'Organizations'"
-      [loggedInUserId]="loggedInUserId"
-      [isContentDeveloper]="isContentDeveloper"
-    >Organizations</app-organization-list>
-  </mat-tab>
-  <mat-tab label="Moves">
-    <app-move-list
-      *ngIf="selectedTab === 'Moves'"
-      [loggedInUserId]="loggedInUserId"
-      [isContentDeveloper]="isContentDeveloper"
-    ></app-move-list>
-  </mat-tab>
-  <mat-tab label="Gallery Cards" *ngIf="(msel | async)?.useGallery">
-    <app-card-list
-      *ngIf="selectedTab === 'Gallery Cards'"
-      [loggedInUserId]="loggedInUserId"
-      [isContentDeveloper]="isContentDeveloper"
-    ></app-card-list>
-  </mat-tab>
-  <mat-tab label="CiteActions" *ngIf="(msel | async)?.useCite">
-    <app-cite-action-list
-      *ngIf="selectedTab === 'CiteActions'"
-      [loggedInUserId]="loggedInUserId"
-      [isContentDeveloper]="isContentDeveloper"
-    ></app-cite-action-list>
-  </mat-tab>
-  <mat-tab label="CiteRoles" *ngIf="(msel | async)?.useCite">
-    <app-cite-role-list
-      *ngIf="selectedTab === 'CiteRoles'"
-      [loggedInUserId]="loggedInUserId"
-      [isContentDeveloper]="isContentDeveloper"
-    ></app-cite-role-list>
-  </mat-tab>
-  <mat-tab label="Injects">
-    <app-scenario-event-list
-      *ngIf="selectedTab === 'Injects'"
-      [loggedInUserId]="loggedInUserId"
-      [isContentDeveloper]="isContentDeveloper"
-      [userTheme]="userTheme$ | async"
-    ></app-scenario-event-list>
-  </mat-tab>
-  <mat-tab label="Exercise View">
-    <app-msel-view
-      *ngIf="selectedTab === 'Exercise View'"
-      [tabHeight]="48"
-      [userTheme]="userTheme$ | async"
-    ></app-msel-view>
-  </mat-tab>
-</mat-tab-group>
+<mat-sidenav-container class="content-container background">
+  <mat-sidenav
+    #sidenav
+    mode="side"
+    opened
+    *ngIf="!sideNavExpanded"
+  >
+    <mat-list [ngClass]="getSidebarClass()">
+
+      <mat-list-item class="top-item background">
+        <button
+          mat-button
+          class="icon-color sidenav-button"
+          style="outline: none;"
+          (click)="setExpanded(true)"
+          title="Expand Navigation Panel"
+        >
+          <mat-icon aria-hidden="false" class="icon-color sidenav-icon mdi-36px" fontIcon="mdi-chevron-right"></mat-icon>
+        </button>
+        <mat-divider></mat-divider>
+      </mat-list-item>
+
+      <mat-list-item class="list-item background">
+        <div class="lefticon">
+          <button mat-icon-button title="Return to MSEL list" (click)="tabChange('Back')">
+            <mat-icon
+              inline="true"
+              class="primary mdi-36px"
+              fontIcon="mdi-close-circle-outline"
+            ></mat-icon>
+          </button>
+        </div>
+      </mat-list-item>
+      <mat-list-item *ngFor="let tabName of tabList" [ngClass]="getListItemClass(tabName)" (click)="tabChange(tabName)">
+        <div class="lefticon">
+          <button mat-icon-button title="{{ tabName }}" (click)="tabChange(tabName)">
+            <mat-icon
+              inline="true"
+              class="primary mdi-36px"
+              fontIcon="{{ fontIconList.get(tabName) }}"
+            ></mat-icon>
+          </button>
+        </div>
+      </mat-list-item>
+    </mat-list>
+  </mat-sidenav>
+  <mat-sidenav
+    #sidenav
+    mode="side"
+    opened
+    *ngIf="sideNavExpanded"
+  >
+    <mat-list [ngClass]="getSidebarClass()">
+
+      <mat-list-item class="top-item background">
+        <div class="collapse">
+          <button
+            mat-button
+            class="icon-color sidenav-button"
+            style="outline: none;"
+            (click)="setExpanded(false)"
+            title="Collapse Navigation Panel"
+          >
+            <mat-icon aria-hidden="false" class="icon-color sidenav-icon mdi-36px" fontIcon="mdi-chevron-left"></mat-icon>
+          </button>
+        </div>
+        <mat-divider></mat-divider>
+      </mat-list-item>
+
+      <mat-list-item class="list-item background">
+        <div class="lefticon">
+          <button mat-icon-button title="Return to MSEL list" (click)="tabChange('Back')">
+            <mat-icon
+              inline="true"
+              class="primary mdi-36px"
+              fontIcon="mdi-chevron-double-left"
+            ></mat-icon>
+          </button>
+        </div>
+        <div class="application-name" *ngIf="sideNavExpanded">
+          MSEL List
+        </div>
+        <div *ngIf="sideNavExpanded">
+         &nbsp;
+        </div>
+      </mat-list-item>
+      <mat-list-item *ngFor="let tabName of tabList" [ngClass]="getListItemClass(tabName)" (click)="tabChange(tabName)">
+        <div class="lefticon">
+          <button mat-icon-button title="{{ tabName }}" (click)="tabChange(tabName)">
+            <mat-icon
+              inline="true"
+              class="primary mdi-36px"
+              fontIcon="{{ fontIconList.get(tabName) }}"
+            ></mat-icon>
+          </button>
+        </div>
+        <div class="application-name" *ngIf="sideNavExpanded">
+          {{ tabName }}
+        </div>
+        <div *ngIf="sideNavExpanded">
+          <button mat-icon-button title="{{ tabName }}">
+            <mat-icon class="icon-color" svgIcon="ic_chevron_right"></mat-icon>
+          </button>
+        </div>
+      </mat-list-item>
+      <mat-list-item class="background">&nbsp;</mat-list-item>
+    </mat-list>
+    <img
+      class="cmu-logo"
+      [src]="
+        (theme$ | async) === 'light-theme'
+          ? '/assets/img/cmu-red-gray.png'
+          : '/assets/img/sei-logo-gray.png'
+      "
+    />
+  </mat-sidenav>
+  <mat-sidenav-content class="content-frame">
+    <div class="main-content">
+      <app-msel-info
+        *ngIf="selectedTab === 'Info'"
+        [loggedInUserId]="loggedInUserId"
+        [isContentDeveloper]="isContentDeveloper"
+      ></app-msel-info>
+      <app-msel-roles
+        *ngIf="selectedTab === 'Teams'"
+        [loggedInUserId]="loggedInUserId"
+        [isContentDeveloper]="isContentDeveloper"
+      ></app-msel-roles>
+      <app-data-field-list
+        *ngIf="selectedTab === 'Data Fields'"
+        [loggedInUserId]="loggedInUserId"
+        [isContentDeveloper]="isContentDeveloper"
+      ></app-data-field-list>
+      <app-organization-list
+        *ngIf="selectedTab === 'Organizations'"
+        [loggedInUserId]="loggedInUserId"
+        [isContentDeveloper]="isContentDeveloper"
+      >Organizations</app-organization-list>
+      <app-move-list
+        *ngIf="selectedTab === 'Moves'"
+        [loggedInUserId]="loggedInUserId"
+        [isContentDeveloper]="isContentDeveloper"
+      ></app-move-list>
+      <app-card-list
+        *ngIf="selectedTab === 'Gallery Cards'"
+        [loggedInUserId]="loggedInUserId"
+        [isContentDeveloper]="isContentDeveloper"
+      ></app-card-list>
+      <app-cite-action-list
+        *ngIf="selectedTab === 'Cite Actions'"
+        [loggedInUserId]="loggedInUserId"
+        [isContentDeveloper]="isContentDeveloper"
+      ></app-cite-action-list>
+      <app-cite-role-list
+        *ngIf="selectedTab === 'Cite Roles'"
+        [loggedInUserId]="loggedInUserId"
+        [isContentDeveloper]="isContentDeveloper"
+      ></app-cite-role-list>
+      <app-scenario-event-list
+        *ngIf="selectedTab === 'Events'"
+        [loggedInUserId]="loggedInUserId"
+        [isContentDeveloper]="isContentDeveloper"
+        [userTheme]="userTheme$ | async"
+      ></app-scenario-event-list>
+      <app-msel-view
+        *ngIf="selectedTab === 'Exercise View'"
+        [tabHeight]="48"
+        [userTheme]="userTheme$ | async"
+      ></app-msel-view>
+    </div>
+  </mat-sidenav-content>
+</mat-sidenav-container>
+<img
+class="small-logo"
+[src]="
+  (theme$ | async) === 'light-theme'
+    ? '/assets/img/cmu-red-gray.png'
+    : '/assets/img/sei-logo-gray.png'
+"
+/>
+<br />&nbsp;
+<br />&nbsp;
+<br />&nbsp;
 
-<app-msel-view
-  *ngIf="selectedTab === '<<  Back'"
-  [tabHeight]="0"
-></app-msel-view>
diff --git a/src/app/components/msel/msel.component.scss b/src/app/components/msel/msel.component.scss
index 974aa394..580a3fa0 100755
--- a/src/app/components/msel/msel.component.scss
+++ b/src/app/components/msel/msel.component.scss
@@ -2,6 +2,107 @@
 // Released under a MIT (SEI)-style license. See LICENSE.md in the
 // project root for license information.
 
-.tab-group {
-  width: calc(100% - 30px);
+.content-container {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  margin-right: 26px;
+  height: 100%;
+}
+
+.content-frame {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  height: 100%;
+}
+
+.main-content {
+  width: 100%;
+  height: 100%;
+}
+
+.left-content-open {
+  width: 100%;
+  height: calc(100% - 8px);
+}
+
+.left-content-closed {
+  width: 100%;
+  height: calc(100% - 8px);
+}
+
+.top-item {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  cursor: pointer;
+  align-items: flex-end;
+  height: 36px;
+  margin-top: -8px;
+}
+
+.list-item {
+  cursor: pointer;
+  text-align: left;
+}
+
+.top-button {
+  text-align: right;
+  height: 36px;
+}
+
+.list-button {
+  width: 100%;
+  text-align: left;
+}
+
+.sidenav-button {
+  width: 26px !important;
+  height: 26px !important;
+  min-width: unset !important;
+}
+
+.sidenav-icon {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  align-items: center;
+  justify-items: center;
+  margin-left: -14px;
+}
+
+.collapse {
+  width: 100%;
+  float: right;
+  text-align: right;
+}
+
+.lefticon {
+  width: 40px;
+  height: 40px;
+}
+
+.application-name {
+  width: 120px;
+  margin-left: 16px;
+}
+
+.mat-list-item, .mat-list-item-content {
+  padding: 0px !important;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.cmu-logo {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}
+
+.small-logo {
+  width: 300px;
 }
diff --git a/src/app/components/msel/msel.component.ts b/src/app/components/msel/msel.component.ts
index dee50541..44a2641f 100755
--- a/src/app/components/msel/msel.component.ts
+++ b/src/app/components/msel/msel.component.ts
@@ -1,12 +1,13 @@
 // Copyright 2022 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, Input, OnDestroy, ViewChild, ViewChildren, QueryList, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { Component, Input, OnDestroy, ViewChild, ViewChildren, QueryList } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Subject, Observable } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import {
   Theme,
+  ComnAuthQuery
 } from '@cmusei/crucible-common';
 import {
   Msel
@@ -34,19 +35,44 @@ import { UserMselRoleDataService } from 'src/app/data/user-msel-role/user-msel-r
   templateUrl: './msel.component.html',
   styleUrls: ['./msel.component.scss'],
 })
-export class MselComponent implements OnDestroy, AfterViewInit {
+export class MselComponent implements OnDestroy {
   @Input() loggedInUserId: string;
   @Input() isContentDeveloper: boolean;
   @Input() userTheme$: Observable<Theme>;
   @ViewChild('tabGroup0', { static: false }) tabGroup0: MatTabGroup;
   @ViewChildren('MatTab') tabs: QueryList<MatTab>;
-  private tabList: MatTab[] = [];
+  tabList: string[] = [
+    'Info',
+    'Teams',
+    'Data Fields',
+    'Organizations',
+    'Moves',
+    'Gallery Cards',
+    'Cite Actions',
+    'Cite Roles',
+    'Events',
+    'Exercise View'
+  ];
   private unsubscribe$ = new Subject();
   msel = this.mselQuery.selectActive() as Observable<Msel>;
-  selectedTab = 'Info';
+  selectedTab = '';
   defaultTab = 'Info';
   selectedIndex = 1;
   selectedMselId = '';
+  sideNavExpanded = true;
+  fontIconList = new Map<string, string>([
+    ['Info', 'mdi-note-outline'],
+    ['Teams', 'mdi-account-group-outline'],
+    ['Data Fields', 'mdi-view-column-outline'],
+    ['Organizations', 'mdi-office-building-outline'],
+    ['Moves', 'mdi-gamepad'],
+    ['Gallery Cards', 'mdi-view-grid-outline'],
+    ['Cite Actions', 'mdi-clipboard-check-outline'],
+    ['Cite Roles', 'mdi-clipboard-account-outline'],
+    ['Events', 'mdi-chart-timeline'],
+    ['Exercise View', 'mdi-eye-outline'],
+  ]);
+  theme$: Observable<Theme>;
 
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -63,12 +89,13 @@ export class MselComponent implements OnDestroy, AfterViewInit {
     private mselTeamDataService: MselTeamDataService,
     private mselQuery: MselQuery,
     private organizationDataService: OrganizationDataService,
-    private changeDetectorRef: ChangeDetectorRef,
     private scenarioEventDataService: ScenarioEventDataService,
     private teamDataService: TeamDataService,
     private uiDataService: UIDataService,
-    private userMselRoleDataService: UserMselRoleDataService
+    private userMselRoleDataService: UserMselRoleDataService,
+    private authQuery: ComnAuthQuery
   ) {
+    this.theme$ = this.authQuery.userTheme$;
     // subscribe to route changes
     this.activatedRoute.queryParamMap.pipe(takeUntil(this.unsubscribe$)).subscribe(params => {
       // load the selected MSEL data
@@ -104,56 +131,45 @@ export class MselComponent implements OnDestroy, AfterViewInit {
     // load the organization templates
     this.organizationDataService.loadTemplates();
     // set the selected tab
-    const selectedTab = this.uiDataService.getMselTab();
+    let selectedTab = this.uiDataService.getMselTab();
     if (!selectedTab) {
       this.uiDataService.setMselTab(this.defaultTab);
+      selectedTab = this.defaultTab;
     }
+    this.selectedTab = selectedTab;
+    // set the side nav expansion
+    this.sideNavExpanded = this.uiDataService.isNavExpanded();
   }
 
-  ngAfterViewInit() {
-    // have to check for current state and then subscribe to future changes
-    // tabGroup0._tabs doesn't exist until after view init, so we need the detectChanges()
-    if (this.tabGroup0 && this.tabGroup0._tabs && this.tabGroup0._tabs.length > 0) {
-      this.tabList = this.tabGroup0._tabs.toArray();
-      this.setTabBySection();
-      this.changeDetectorRef.detectChanges();
-    }
-    this.tabGroup0._tabs.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(tabs => {
-      const count = tabs ? tabs.length : 0;
-      this.tabList = tabs.toArray();
-      this.setTabBySection();
-      this.changeDetectorRef.detectChanges();
-    });
-  }
-
-  tabChange(event) {
-    if (event.index === 0) {
+  tabChange(tabName: string) {
+    if (tabName === 'Back') {
       this.uiDataService.setMselTab(this.defaultTab);
       this.router.navigate([], {
         queryParams: { }
       });
     } else {
-      this.uiDataService.setMselTab(event.tab.textLabel);
-      this.setTabBySection();
+      this.uiDataService.setMselTab(tabName);
+      this.selectedTab = tabName;
     }
   }
 
-  setTabBySection() {
-    if (this.tabList) {
-      const tabIndex = this.tabList.findIndex(t => t.textLabel === this.uiDataService.getMselTab());
-      if (tabIndex > -1) {
-        this.selectedTab = this.uiDataService.getMselTab();
-        this.selectedIndex = tabIndex;
-      } else {
-        this.selectedTab = this.defaultTab;
-        this.selectedIndex = 1;
-      }
+  getListItemClass(tab: string) {
+    if (tab === this.selectedTab) {
+      return 'list-item background-alt';
     } else {
-      this.selectedTab = this.defaultTab;
-      this.selectedIndex = 1;
+      return 'list-item background';
     }
   }
 
+  getSidebarClass() {
+    return this.sideNavExpanded ? 'left-content-open background' : 'left-content-closed background';
+  }
+
+  setExpanded(value: boolean) {
+    this.sideNavExpanded = value;
+    this.uiDataService.setNavExpanded(value);
+  }
+
   ngOnDestroy() {
     this.unsubscribe$.next(null);
     this.unsubscribe$.complete();
diff --git a/src/app/components/organization-list/organization-list.component.html b/src/app/components/organization-list/organization-list.component.html
index ff47a4ae..855bef43 100755
--- a/src/app/components/organization-list/organization-list.component.html
+++ b/src/app/components/organization-list/organization-list.component.html
@@ -3,58 +3,100 @@
 Released under a MIT (SEI)-style license, please see LICENSE.md in the
 project root for license information or contact permission@sei.cmu.edu for full terms.
 -->
-<div *ngIf="msel" style="height: 100%;">
-
-  <div style="height: 100%">
-    <section
-      class="mat-elevation-z2 mat-header-row background-alt"
+<div *ngIf="msel" class="frame">
+  <section
+    class="mat-elevation-z2 mat-header-row background-alt"
+  >
+    <span
+      class="mat-header-cell three-cell"
+    >
+      <span *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner">
+        <button
+          mat-icon-button
+          (click)="addOrEditOrganization(null, false); $event.stopPropagation()"
+          style="outline: none; margin-right: 15px;"
+          title="Add organization"
+        >
+          <mat-icon class="mdi-24px self-center" fontIcon="mdi-bank-plus"></mat-icon>
+        </button>
+        Add Organization
+      </span> &nbsp;
+    </span>
+    <span
+      class="mat-header-cell three-cell"
     >
-      <span
-        class="mat-header-cell three-cell"
-      >
-        <span *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner">
+      <span *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner">
+        <mat-checkbox [(ngModel)]="showTemplates">Show Templates</mat-checkbox>
+      </span> &nbsp;
+    </span>
+    <span class="mat-header-cell three-cell search-cell">
+      <mat-form-field class="search-control">
+        <input matInput [formControl]="filterControl" placeholder="Search" />
+      </mat-form-field>
+      <div style="width: 30px;">
+        <button
+          mat-icon-button
+          (click)="filterControl.setValue(''); $event.stopPropagation()"
+          style="outline: none;"
+          title="Clear Search"
+          [disabled]="!filterString"
+        >
+          <mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
+        </button>
+      </div>
+    </span>
+  </section>
+
+  <section class="scrolling-region">
+    <section class="cards cssLayoutRowStartStretch">
+      <mat-card class="card" *ngFor="let org of sortedOrganizations">
+        <mat-card-header>
+          <mat-card-title class="org-title">{{ org.name }}</mat-card-title>
+          <mat-card-subtitle>{{org.shortName}}</mat-card-subtitle>
+        </mat-card-header>
+        <mat-card-actions
+          class="action-buttons"
+          *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
+        >
           <button
             mat-icon-button
-            (click)="addOrEditOrganization(null, false); $event.stopPropagation()"
-            style="outline: none; margin-right: 15px;"
-            title="Add organization"
+            class="organization-button"
+            title="Edit this organization"
+            (click)="addOrEditOrganization(org, false)"
           >
-            <mat-icon class="mdi-24px self-center" fontIcon="mdi-bank-plus"></mat-icon>
+            <mat-icon class="mdi-24px" fontIcon="mdi-square-edit-outline"></mat-icon>
           </button>
-          Add Organization
-        </span> &nbsp;
-      </span>
-      <span
-        class="mat-header-cell three-cell"
-      >
-        <span *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner">
-          <mat-checkbox [(ngModel)]="showTemplates">Show Templates</mat-checkbox>
-        </span> &nbsp;
-      </span>
-      <span class="mat-header-cell three-cell search-cell">
-        <mat-form-field class="search-control">
-          <input matInput [formControl]="filterControl" placeholder="Search" />
-        </mat-form-field>
-        <div style="width: 30px;">
           <button
             mat-icon-button
-            (click)="filterControl.setValue(''); $event.stopPropagation()"
-            style="outline: none;"
-            title="Clear Search"
-            [disabled]="!filterString"
+            class="organization-button"
+            title="Create a template from this organization"
+            (click)="addOrEditOrganization(org, true)"
+            *ngIf="isContentDeveloper"
           >
-            <mat-icon class="mdi-24px self-center" fontIcon="mdi-close-circle-outline"></mat-icon>
+            <mat-icon class="mdi-24px" fontIcon="mdi-bank-outline"></mat-icon>
           </button>
-        </div>
-      </span>
+          <button
+            mat-icon-button
+            class="organization-button"
+            (click)="deleteOrganization(org); $event.stopPropagation()"
+            title="Delete this organization"
+          >
+            <mat-icon class="mdi-24px" fontIcon="mdi-delete"></mat-icon>
+          </button>
+        </mat-card-actions>
+        <mat-card-content class="org-text" contenteditable="false">
+          {{org.summary}}
+        </mat-card-content>
+      </mat-card>
     </section>
-
-    <section class="scrolling-region">
-      <section class="cards cssLayoutRowStartStretch">
-        <mat-card class="card" *ngFor="let org of sortedOrganizations">
+    <span *ngIf="showTemplates">
+      <hr />
+      <h1>Templates</h1>
+      <section class="cards cssLayoutRowSpaceStretch">
+        <mat-card class="card" *ngFor="let org of templateOrganizations">
           <mat-card-header>
-            <mat-card-title class="org-title">{{ org.name }}</mat-card-title>
-            <mat-card-subtitle>{{org.shortName}}</mat-card-subtitle>
+            <mat-card-title>{{ org.name }}</mat-card-title>
+            <mat-card-subtitle>{{ org.shortName }}</mat-card-subtitle>
           </mat-card-header>
           <mat-card-actions
             class="action-buttons"
@@ -63,80 +105,35 @@
             <button
               mat-icon-button
               class="organization-button"
-              title="Edit this organization"
-              (click)="addOrEditOrganization(org, false)"
+              title="Edit this template"
+              (click)="addOrEditOrganization(org, true)"
+              *ngIf="isContentDeveloper"
             >
               <mat-icon class="mdi-24px" fontIcon="mdi-square-edit-outline"></mat-icon>
             </button>
             <button
               mat-icon-button
               class="organization-button"
-              title="Create a template from this organization"
-              (click)="addOrEditOrganization(org, true)"
-              *ngIf="isContentDeveloper"
+              title="Add to MSEL organizations"
+              (click)="addOrEditOrganization(org, false)"
             >
-              <mat-icon class="mdi-24px" fontIcon="mdi-bank-outline"></mat-icon>
+              <mat-icon class="mdi-24px" fontIcon="mdi-bank-plus"></mat-icon>
             </button>
             <button
               mat-icon-button
               class="organization-button"
               (click)="deleteOrganization(org); $event.stopPropagation()"
-              title="Delete this organization"
+              title="Delete this template"
+              *ngIf="isContentDeveloper"
             >
               <mat-icon class="mdi-24px" fontIcon="mdi-delete"></mat-icon>
             </button>
           </mat-card-actions>
           <mat-card-content class="org-text" contenteditable="false">
-            {{org.summary}}
+            {{ org.summary }}
           </mat-card-content>
         </mat-card>
       </section>
-      <span *ngIf="showTemplates">
-        <hr />
-        <h1>Templates</h1>
-        <section class="cards cssLayoutRowSpaceStretch">
-          <mat-card class="card" *ngFor="let org of templateOrganizations">
-            <mat-card-header>
-              <mat-card-title>{{ org.name }}</mat-card-title>
-              <mat-card-subtitle>{{ org.shortName }}</mat-card-subtitle>
-            </mat-card-header>
-            <mat-card-actions
-              class="action-buttons"
-              *ngIf="isContentDeveloper || msel.hasRole(loggedInUserId, null).owner"
-            >
-              <button
-                mat-icon-button
-                class="organization-button"
-                title="Edit this template"
-                (click)="addOrEditOrganization(org, true)"
-                *ngIf="isContentDeveloper"
-              >
-                <mat-icon class="mdi-24px" fontIcon="mdi-square-edit-outline"></mat-icon>
-              </button>
-              <button
-                mat-icon-button
-                class="organization-button"
-                title="Add to MSEL organizations"
-                (click)="addOrEditOrganization(org, false)"
-              >
-                <mat-icon class="mdi-24px" fontIcon="mdi-bank-plus"></mat-icon>
-              </button>
-              <button
-                mat-icon-button
-                class="organization-button"
-                (click)="deleteOrganization(org); $event.stopPropagation()"
-                title="Delete this template"
-                *ngIf="isContentDeveloper"
-              >
-                <mat-icon class="mdi-24px" fontIcon="mdi-delete"></mat-icon>
-              </button>
-            </mat-card-actions>
-            <mat-card-content class="org-text" contenteditable="false">
-              {{ org.summary }}
-            </mat-card-content>
-          </mat-card>
-        </section>
-      </span>
-    </section>
-  </div>
+    </span>
+  </section>
 </div>
diff --git a/src/app/components/organization-list/organization-list.component.scss b/src/app/components/organization-list/organization-list.component.scss
index 2ffa57a6..dd86bba0 100755
--- a/src/app/components/organization-list/organization-list.component.scss
+++ b/src/app/components/organization-list/organization-list.component.scss
@@ -1,7 +1,14 @@
 // Copyright 2022 Carnegie Mellon University. All Rights Reserved.
-// Released under a MIT (SEI)-style license. See LICENSE.md in the
+// Released under a MIT (SEI)-style license. See LICENSE.md in the
 // project root for license information.
 
+.frame {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: calc(100vh - 39px);
+}
+
 .mat-header-row {
   min-height: 40px;
   padding-left:30px;
@@ -59,7 +66,7 @@
 }
 
 .scrolling-region {
-  height: calc(100vh - 144px);
+  height: calc(100vh - 89px);
   overflow: auto;
 }
 
diff --git a/src/app/components/scenario-event-list/scenario-event-list.component.scss b/src/app/components/scenario-event-list/scenario-event-list.component.scss
index 25bd5bd2..0de98508 100755
--- a/src/app/components/scenario-event-list/scenario-event-list.component.scss
+++ b/src/app/components/scenario-event-list/scenario-event-list.component.scss
@@ -3,8 +3,10 @@
 // project root for license information.
 
 .container {
-  height: calc(100vh - 87px);
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: calc(100vh - 39px);
   overflow: auto;
 }
 
diff --git a/src/app/components/scenario-event-list/scenario-event-list.component.ts b/src/app/components/scenario-event-list/scenario-event-list.component.ts
index 1fe957db..51d5bb15 100755
--- a/src/app/components/scenario-event-list/scenario-event-list.component.ts
+++ b/src/app/components/scenario-event-list/scenario-event-list.component.ts
@@ -240,7 +240,7 @@ export class ScenarioEventListComponent implements OnDestroy {
 
   getMselUsers(): User[] {
     let users = [];
-    this.teamList.forEach(team => {
+    this.msel.teams.forEach(team => {
       team.users.forEach(user => {
         users.push({... user});
       });
@@ -265,7 +265,7 @@ export class ScenarioEventListComponent implements OnDestroy {
     this.organizationList.forEach(o => {
       orgs.push(o.shortName);
     });
-    this.teamList.forEach(t => {
+    this.msel.teams.forEach(t => {
       orgs.push(t.shortName);
     });
     orgs = orgs.sort((a, b) => a < b ? -1 : 1);
@@ -274,7 +274,7 @@ export class ScenarioEventListComponent implements OnDestroy {
 
   getSortedTeamOptions(): string[] {
     let orgs: string[] = [];
-    this.teamList.forEach(t => {
+    this.msel.teams.forEach(t => {
       orgs.push(t.shortName);
     });
     orgs = orgs.sort((a, b) => a < b ? -1 : 1);
@@ -478,7 +478,7 @@ export class ScenarioEventListComponent implements OnDestroy {
         dataFields: this.allDataFields,
         dataOptions: this.sortedDataOptions,
         organizationList: this.getSortedOrganizationOptions(),
-        teamList: this.teamList,
+        teamList: this.msel.teams,
         moveList: this.moveList,
         cardList: this.cardList,
         gallerySourceTypes: this.msel.gallerySourceTypes,
diff --git a/src/app/data/ui/ui-data.service.ts b/src/app/data/ui/ui-data.service.ts
index 811b2184..3704ffd3 100644
--- a/src/app/data/ui/ui-data.service.ts
+++ b/src/app/data/ui/ui-data.service.ts
@@ -10,6 +10,7 @@ export class UIState {
   selectedTheme = '';
   selectedMselTab = '';
   expandedItems: string[] = [];
+  navExpanded: boolean;
 }
 
 @Injectable({
@@ -38,6 +39,18 @@ export class UIDataService {
   }
   // end item expansion
 
+  //
+  // Nav bar Expansion
+  isNavExpanded(): boolean {
+    return this.uiState.navExpanded;
+  }
+
+  setNavExpanded(value: boolean) {
+    this.uiState.navExpanded = value;
+    this.saveChanges();
+  }
+  // end item expansion
+
   //
   // MSEL tab selection
   setMselTab(tabName: string) {
diff --git a/src/assets/img/sei-logo-gray.png b/src/assets/img/sei-logo-gray.png
new file mode 100644
index 00000000..bb346f2a
Binary files /dev/null and b/src/assets/img/sei-logo-gray.png differ
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index 6a233dc8..ffe8afac 100755
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -185,6 +185,10 @@ $custom-typography: mat.define-legacy-typography-config(
     color: map-get($theme, 'text');
   }
 
+  .primary {
+    color: mat.get-color-from-palette($primary);
+  }
+
   .selected {
     background: mat.get-color-from-palette($primary);
     &:hover,