diff --git a/projects/gameboard-mks/src/app/console/console.component.html b/projects/gameboard-mks/src/app/console/console.component.html
index abbca36f..a2df9ae0 100644
--- a/projects/gameboard-mks/src/app/console/console.component.html
+++ b/projects/gameboard-mks/src/app/console/console.component.html
@@ -15,8 +15,7 @@
       <!-- <div class="audience-item">t1-player3</div> -->
     </div>
 
-    <div *ngIf="state==='stopped'||state==='disconnected'" class="align-mm"
-      [class.hidden]="isConnected">
+    <div *ngIf="state==='stopped'||state==='disconnected'" class="align-mm" [class.hidden]="isConnected">
       <h1>{{shadowstate}}</h1>
       <button class="btn btn-lg" (click)="stateButtonClicked()">{{stateIcon}}</button>
     </div>
@@ -89,7 +88,7 @@ <h1 class="text-danger">{{stateIcon}}</h1>
       </button>
     </div>
 
-      <!-- <div class="flex-h">
+    <!-- <div class="flex-h">
       <span>[Clipboard] </span>
       <button class="btn" (click)="showClipboard=!showClipboard">
         <i class="fa fa-clipboard fa-2x"></i> Show
@@ -136,6 +135,5 @@ <h3>Clipboard</h3>
       <textarea *ngIf="showClipboard" class="form-control" placeholder="Clipboard" rows="20"
         [(ngModel)]="cliptext"></textarea>
     </div>
-
   </div>
 </div>
diff --git a/projects/gameboard-ui/src/app/admin/admin-page/admin-page.component.html b/projects/gameboard-ui/src/app/admin/admin-page/admin-page.component.html
index 069bc050..c9b374a3 100644
--- a/projects/gameboard-ui/src/app/admin/admin-page/admin-page.component.html
+++ b/projects/gameboard-ui/src/app/admin/admin-page/admin-page.component.html
@@ -7,13 +7,13 @@ <h1 class="admin-header mb-0">Administration</h1>
 
 <div class="container mb-4 pb-4">
   <nav class="my-2">
-    <a class="btn btn-link" [routerLink]="['dashboard']">Games</a>
-    <a class="btn btn-link" [routerLink]="['practice']">Practice Area</a>
-    <a class="btn btn-link" [routerLink]="['registrar', 'users']">Users</a>
-    <a class="btn btn-link" [routerLink]="['registrar', 'players']">Players</a>
-    <a class="btn btn-link" [routerLink]="['registrar', 'sponsors']">Sponsors</a>
-    <a class="btn btn-link" [routerLink]="['support']">Challenges</a>
-    <a class="btn btn-link" [routerLink]="['report']">Reports</a>
+    <a class="btn btn-link" routerLinkActive="active" [routerLink]="['dashboard']">Games</a>
+    <a class="btn btn-link" routerLinkActive="active" [routerLink]="['practice']">Practice Area</a>
+    <a class="btn btn-link" routerLinkActive="active" [routerLink]="['registrar', 'users']">Users</a>
+    <a class="btn btn-link" routerLinkActive="active" [routerLink]="['registrar', 'players']">Players</a>
+    <a class="btn btn-link" routerLinkActive="active" [routerLink]="['registrar', 'sponsors']">Sponsors</a>
+    <a class="btn btn-link" routerLinkActive="active" [routerLink]="['support']">Challenges</a>
+    <a class="btn btn-link" routerLinkActive="active" [routerLink]="['report']">Reports</a>
   </nav>
   <main>
     <router-outlet></router-outlet>
diff --git a/projects/gameboard-ui/src/app/admin/admin-page/admin-page.component.scss b/projects/gameboard-ui/src/app/admin/admin-page/admin-page.component.scss
index 847f0f71..7212985e 100644
--- a/projects/gameboard-ui/src/app/admin/admin-page/admin-page.component.scss
+++ b/projects/gameboard-ui/src/app/admin/admin-page/admin-page.component.scss
@@ -10,3 +10,7 @@ a {
 nav a:first-of-type {
   padding-left: 0;
 }
+
+.active {
+  text-decoration: underline;
+}
diff --git a/projects/gameboard-ui/src/app/admin/admin.module.ts b/projects/gameboard-ui/src/app/admin/admin.module.ts
index e39f22a0..0490993a 100644
--- a/projects/gameboard-ui/src/app/admin/admin.module.ts
+++ b/projects/gameboard-ui/src/app/admin/admin.module.ts
@@ -32,7 +32,6 @@ import { PlayerNamesComponent } from './player-names/player-names.component';
 import { PlayerRegistrarComponent } from './player-registrar/player-registrar.component';
 import { PlayerSessionComponent } from './player-session/player-session.component';
 import { PlayerSponsorReportComponent } from './player-sponsor-report/player-sponsor-report.component';
-import { PracticeChallengesComponent } from './practice/practice-challenges/practice-challenges.component';
 import { PracticeSettingsComponent } from './practice/practice-settings/practice-settings.component';
 import { PracticeComponent } from './practice/practice.component';
 import { PrereqsComponent } from './prereqs/prereqs.component';
@@ -44,6 +43,8 @@ import { TeamObserverComponent } from './team-observer/team-observer.component';
 import { UserApiKeysComponent } from './user-api-keys/user-api-keys.component';
 import { UserRegistrarComponent } from './user-registrar/user-registrar.component';
 import { UserReportComponent } from './user-report/user-report.component';
+import { SponsorsModule } from '@/sponsors/sponsors.module';
+import { ChallengeSpecEditorComponent } from './components/challenge-spec-editor/challenge-spec-editor.component';
 
 @NgModule({
   declarations: [
@@ -65,7 +66,6 @@ import { UserReportComponent } from './user-report/user-report.component';
     PlayerSessionComponent,
     PlayerSponsorReportComponent,
     PracticeComponent,
-    PracticeChallengesComponent,
     PracticeSettingsComponent,
     PrereqsComponent,
     ReportPageComponent,
@@ -77,6 +77,7 @@ import { UserReportComponent } from './user-report/user-report.component';
     UserApiKeysComponent,
     UserRegistrarComponent,
     UserReportComponent,
+    ChallengeSpecEditorComponent,
   ],
   imports: [
     CommonModule,
@@ -90,11 +91,10 @@ import { UserReportComponent } from './user-report/user-report.component';
           {
             path: "practice", component: PracticeComponent, children: [
               { path: "", pathMatch: "full", redirectTo: "settings" },
-              { path: "challenges", component: PracticeChallengesComponent },
               { path: "settings", component: PracticeSettingsComponent },
             ]
           },
-          { path: 'registrar/sponsors', component: SponsorBrowserComponent },
+          { path: 'registrar/sponsors', component: SponsorBrowserComponent, title: "Admin | Sponsors" },
           { path: 'registrar/users', component: UserRegistrarComponent, title: "Admin | Users" },
           { path: 'registrar/players', component: PlayerNamesComponent },
           { path: 'registrar/:id', component: PlayerRegistrarComponent },
@@ -119,7 +119,7 @@ import { UserReportComponent } from './user-report/user-report.component';
     ModalModule,
     TooltipModule,
     FontAwesomeModule,
-    // PracModule,
+    SponsorsModule,
   ]
 })
 export class AdminModule { }
diff --git a/projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.html b/projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.html
new file mode 100644
index 00000000..c611060d
--- /dev/null
+++ b/projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.html
@@ -0,0 +1,36 @@
+<div class="challenge-spec-editor-component" *ngIf="spec">
+    <h2 class="m-0 p-0 fs-11">{{ spec.name }}</h2>
+    <hr class="my-2" />
+    <div class="spec-controls-container d-flex flex-wrap align-items-center">
+        <div class="form-group">
+            <label for="slug-input-{{spec.id}}">Support Key</label>
+            <input type="text" class="form-control" id="slug-input-{{spec.id}}" name="slug" [(ngModel)]="spec.tag"
+                [placeholder]="'Enter a support key (e.g. ' + slug(spec.name) + ')'"
+                (ngModelChange)="handleSpecUpdated(spec)">
+        </div>
+
+        <div class="form-group">
+            <label for="points-input-{{spec.id}}">Points</label>
+            <input type="number" class="form-control" id="points-input-{{spec.id}}" name="points"
+                placeholder="Enter a point value for this challenge" [(ngModel)]="spec.points"
+                (ngModelChange)="handleSpecUpdated(spec)">
+        </div>
+
+        <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="disabled-input-{{spec.id}}" name="disabled"
+                [(ngModel)]="spec.disabled" (ngModelChange)="handleSpecUpdated(spec)">
+            <label for="disabled-input-{{spec.id}}">Disabled</label>
+        </div>
+
+        <div *ngIf="showSolutionGuide" class="form-group flex-grow-1">
+            <label for="guide-input-{{spec.id}}">Solution Guide URL</label>
+            <input type="text" class="form-control" id="guide-input-{{spec.id}}" name="guide"
+                placeholder="Enter the solution guide's URL" [(ngModel)]="spec.solutionGuideUrl"
+                (input)="handleSpecUpdated(spec)">
+        </div>
+    </div>
+    <hr class="my-2">
+    <div class="d-flex align-items-center justify-content-end">
+        <app-confirm-button btnClass="btn btn-sm btn-danger">Delete</app-confirm-button>
+    </div>
+</div>
diff --git a/projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.scss b/projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.scss
new file mode 100644
index 00000000..21521be6
--- /dev/null
+++ b/projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.scss
@@ -0,0 +1,35 @@
+@import "../../../../scss/variables";
+
+.challenge-spec-editor-component {
+    background-color: $secondary;
+    border: solid 1px $foreground;
+    border-radius: 6px;
+    padding: 0.5rem;
+
+    hr {
+        border: dashed 1px $foreground;
+    }
+}
+
+label {
+    margin: 0;
+}
+
+.form-group {
+    margin: 8px 0 0 0;
+    padding: 0;
+    flex: 1 1 48%;
+
+    input[type=checkbox] {
+        margin-left: 4px;
+    }
+
+    input[type=text] {
+        margin: 0 12px 0 0;
+    }
+}
+
+.form-check {
+    flex: 1 1 48%;
+    margin-top: 1rem;
+}
diff --git a/projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.ts b/projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.ts
new file mode 100644
index 00000000..05300313
--- /dev/null
+++ b/projects/gameboard-ui/src/app/admin/components/challenge-spec-editor/challenge-spec-editor.component.ts
@@ -0,0 +1,45 @@
+import { Spec } from '@/api/spec-models';
+import { SpecService } from '@/api/spec.service';
+import { fa } from '@/services/font-awesome.service';
+import { UnsubscriberService } from '@/services/unsubscriber.service';
+import { slug } from '@/tools/functions';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Subject, debounceTime, filter, firstValueFrom, switchMap, tap } from 'rxjs';
+
+@Component({
+  selector: 'app-challenge-spec-editor',
+  templateUrl: './challenge-spec-editor.component.html',
+  styleUrls: ['./challenge-spec-editor.component.scss']
+})
+export class ChallengeSpecEditorComponent implements OnChanges {
+  @Input() spec?: Spec;
+  @Input() showSolutionGuide = false;
+  @Output() specUpdate = new EventEmitter<Spec>();
+
+  protected fa = fa;
+  protected slug = slug;
+  protected requestUpdateSpec$ = new Subject<Spec>();
+
+  constructor(
+    private specService: SpecService,
+    private unsub: UnsubscriberService) {
+    this.unsub.add(
+      this.requestUpdateSpec$.pipe(
+        debounceTime(500),
+        filter(s => s.points >= 0),
+        switchMap(s => this.specService.update(s)),
+        tap(s => this.specUpdate.emit(s)),
+      ).subscribe()
+    );
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!this.spec) {
+      throw new Error("The ChallengeSpecEditor requires a challenge spec.");
+    }
+  }
+
+  async handleSpecUpdated(spec: Spec) {
+    this.requestUpdateSpec$.next(spec);
+  }
+}
diff --git a/projects/gameboard-ui/src/app/admin/dashboard/dashboard.component.html b/projects/gameboard-ui/src/app/admin/dashboard/dashboard.component.html
index 50ae9db5..81ed1db2 100644
--- a/projects/gameboard-ui/src/app/admin/dashboard/dashboard.component.html
+++ b/projects/gameboard-ui/src/app/admin/dashboard/dashboard.component.html
@@ -39,13 +39,18 @@
 
     <!-- Card view mode -->
     <ng-container *ngIf="!tableView">
-      <div class="dropzone col-3 card bg-transparent">
-        <app-dropzone class="h-100 my-3" (dropped)="dropped($event)">
-          <pre class="overflow-hidden">Drag in a yaml game array or</pre>
-          <button class="btn btn-secondary btn-sm" (click)="create()">
-            <fa-icon [icon]="faPlus"></fa-icon>
-            <span>New Game</span>
-          </button>
+      <div class="new-game-controls card col-3 my-3 bg-transparent d-flex flex-column align-items-center">
+        <button class=" btn btn-info flex-grow-1 w-100" (click)="create()">
+          <fa-icon [icon]="faPlus"></fa-icon>
+          <span>New Game</span>
+        </button>
+
+        <p class="mt-2">OR</p>
+
+        <app-dropzone class="d-flex flex-grow-1 w-100" (dropped)="dropped($event)">
+          <div class="dropzone-target h-100">
+            <pre class="overflow-hidden">Drag in a yaml game array</pre>
+          </div>
         </app-dropzone>
       </div>
 
@@ -136,12 +141,9 @@
                     container="body" [adaptivePosition]="true" placement="top">
                     <fa-icon [icon]="game.allowTeam ? faTeam : faUser"></fa-icon>
                   </div>
-                  <div
-                    [tooltip]="!!game.feedbackTemplate.challenge.length || !!game.feedbackTemplate.game.length ? 'Accepts Feedback' : 'No Feedback'"
-                    containerClass="light-tooltip" container="body" [adaptivePosition]="true" placement="top">
-                    <fa-icon
-                      [icon]="!!game.feedbackTemplate.challenge.length || !!game.feedbackTemplate.game.length ? faChartBar : faCommentSlash"></fa-icon>
-                  </div>
+                  <ng-container
+                    *ngTemplateOutlet="game.feedbackTemplate && (!!game.feedbackTemplate.challenge.length || !!game.feedbackTemplate.game.length) ? gameAcceptsFeedback : gameDoesntAcceptFeedback">
+                  </ng-container>
                 </td>
                 <td class="thin-col sticky-options sticky-cell">
                   <div dropdown class="btn-group" container="body" #dropdown="bs-dropdown" [autoClose]="true"
@@ -218,3 +220,16 @@ <h4>Announcement</h4>
     <app-spinner></app-spinner>
   </div>
 </ng-template>
+
+<ng-template #gameAcceptsFeedback>
+  <div tooltip="Accepts Feedback" containerClass="light-tooltip" container="body" [adaptivePosition]="true"
+    placement="top">
+    <fa-icon [icon]="faChartBar"></fa-icon>
+  </div>
+</ng-template>
+
+<ng-template #gameDoesntAcceptFeedback>
+  <div tooltip="No Feedback" containerClass="light-tooltip" container="body" [adaptivePosition]="true" placement="top">
+    <fa-icon [icon]="faCommentSlash"></fa-icon>
+  </div>
+</ng-template>
diff --git a/projects/gameboard-ui/src/app/admin/dashboard/dashboard.component.scss b/projects/gameboard-ui/src/app/admin/dashboard/dashboard.component.scss
index 8b19de4d..a716bb83 100644
--- a/projects/gameboard-ui/src/app/admin/dashboard/dashboard.component.scss
+++ b/projects/gameboard-ui/src/app/admin/dashboard/dashboard.component.scss
@@ -1,8 +1,21 @@
 @import '../../../scss/variables';
 
-.wrapper {
-  // position: relative;
+.new-game-controls {
+  height: 340px;
+  padding: .25rem;
 }
+
+::ng-deep app-dropzone .dropzone {
+  flex-grow: 1 !important;
+}
+
+.dropzone-target {
+  border: .25rem dashed lightgray;
+  border-radius: .25rem;
+  height: 100%;
+  padding: .25rem;
+}
+
 .overlay {
   position: absolute;
   top: 0rem;
@@ -13,10 +26,6 @@
   background-color: rgba(black, .8);
   z-index: 10;
 }
-.dropzone {
-  border-radius: 0;
-  border: 0;
-}
 
 .table-wrapper {
   overflow-x: auto;
diff --git a/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.html b/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.html
index 8d7f3719..4fde5eff 100644
--- a/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.html
+++ b/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.html
@@ -116,12 +116,16 @@ <h1 class="mb-0">
             Select an image for the game card shown in the public-facing portion of the app. For best results, use an
             image with an aspect ratio of <strong>1:1.44</strong> (e.g. 750x1080).
           </p>
-          <app-dropzone inputId="logo-input" btnClass="btn btn-sm btn-primary" (dropped)="upload($event, 'card')">
-            <button class="btn btn-sm btn-outline-warning mx-2" (click)="clearImage()">
+          <app-dropzone inputId="logo-input" btnClass="btn btn-sm btn-primary" (dropped)="upload($event, 'card')"
+            [clickToLaunchFilePicker]="false">
+            <button class="btn btn-sm btn-warning mx-2" (click)="clearImage()">
               <fa-icon [icon]="faTrash"></fa-icon>
               <span>Reset</span>
             </button>
-            <app-game-card [game]="game"></app-game-card>
+
+            <div class="dropzone-target">
+              <app-game-card [game]="game"></app-game-card>
+            </div>
           </app-dropzone>
         </div>
 
diff --git a/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.scss b/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.scss
index 5dac2752..34646c09 100644
--- a/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.scss
+++ b/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.scss
@@ -1,3 +1,5 @@
+@import "../../../scss/variables";
+
 label {
   margin-bottom: 0;
 }
@@ -7,6 +9,10 @@ label {
   width: 240px;
 }
 
+.dropzone-target {
+  border: dashed 1px $foreground;
+}
+
 .section-header {
   font-weight: 300;
   cursor: pointer;
diff --git a/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.ts b/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.ts
index cca79eb5..c4f6d314 100644
--- a/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.ts
+++ b/projects/gameboard-ui/src/app/admin/game-editor/game-editor.component.ts
@@ -98,7 +98,7 @@ export class GameEditorComponent implements AfterViewInit {
           }
 
           if (this.needsPracticeModeEnabledRefresh) {
-            this.practiceService.gamePlayerModeChanged({ gameId: game.id, isPractice: game.isPracticeMode })
+            this.practiceService.gamePlayerModeChanged({ gameId: game.id, isPractice: game.isPracticeMode });
             this.needsPracticeModeEnabledRefresh = false;
           }
         }))
diff --git a/projects/gameboard-ui/src/app/admin/game-mapper/game-mapper.component.html b/projects/gameboard-ui/src/app/admin/game-mapper/game-mapper.component.html
index 8a785b46..2474e4c8 100644
--- a/projects/gameboard-ui/src/app/admin/game-mapper/game-mapper.component.html
+++ b/projects/gameboard-ui/src/app/admin/game-mapper/game-mapper.component.html
@@ -59,42 +59,13 @@ <h4>Challenge Specs</h4>
         <span>Sync with Source</span>
       </button>
 
-      <div *ngFor="let item of list$ | async; trackBy:trackById">
-        <div class="row align-items-center bg-secondary mb-2">
-          <div class="col-4">
-            {{item.name}}
-          </div>
-          <div class="col-1">
-            <div class="form-group form-check pb-0 pt-1">
-              <input type="checkbox" class="form-check-input" id="disabled-input-{{item.id}}" name="disabled"
-                [(ngModel)]="item.disabled" (ngModelChange)="updating$.next(item)">
-              <label for="disabled-input-{{item.id}}">Disabled</label>
-            </div>
-          </div>
-          <div class="col-2">
-            <div class="form-group pb-0 pt-1">
-              <label for="slug-input-{{item.id}}">Support Key</label>
-              <input type="text" class="form-control" id="slug-input-{{item.id}}" name="slug" [(ngModel)]="item.tag"
-                (ngModelChange)="updating$.next(item)">
-              <small></small>
-            </div>
-          </div>
-          <div class="col-2">
-            <div class="form-group pb-0 pt-1">
-              <label for="points-input-{{item.id}}">Points</label>
-              <input type="number" class="form-control" id="points-input-{{item.id}}" name="points"
-                [(ngModel)]="item.points" (ngModelChange)="updating$.next(item)">
-              <small></small>
-            </div>
-          </div>
-          <div class="col-3">
-            <app-confirm-button btnClass="btn btn-outline-danger" (confirm)="deleting$.next(item)">
-              <fa-icon [icon]="faTrash"></fa-icon>
-              <span>Delete</span>
-            </app-confirm-button>
-          </div>
-        </div>
-      </div>
+      <ul class="spec-list mt-4">
+        <li *ngFor="let spec of list$ | async">
+          <app-challenge-spec-editor class="d-block mb-3" [spec]="spec"
+            [showSolutionGuide]="game.playerMode == 'practice'"></app-challenge-spec-editor>
+        </li>
+      </ul>
+
       <!-- pre reqs -->
       <app-prereqs [gameId]="game.id" [specs]="list"></app-prereqs>
     </div>
@@ -102,7 +73,6 @@ <h4>Challenge Specs</h4>
     <!-- search external specs -->
     <app-spec-browser [hidden]="viewing!=='search'"></app-spec-browser>
 
-
     <!-- edit spec map locations -->
     <div [hidden]="viewing!=='map'">
 
diff --git a/projects/gameboard-ui/src/app/admin/player-names/player-names.component.html b/projects/gameboard-ui/src/app/admin/player-names/player-names.component.html
index d023a89d..c0ac54aa 100644
--- a/projects/gameboard-ui/src/app/admin/player-names/player-names.component.html
+++ b/projects/gameboard-ui/src/app/admin/player-names/player-names.component.html
@@ -28,16 +28,17 @@ <h4>Players</h4>
     </div>
   </div>
 
-  <small *ngIf="players.length === search.take" class="text-warning">Results limited to {{search.take}}. Refine search
-    term if necessary.</small>
+  <small *ngIf="players.length === search.take" class="text-warning">
+    Results limited to {{search.take}}. Refine search term if necessary.
+  </small>
   <hr />
 
   <small class="text-warning mx-2">count: {{players.length}}</small>
 
   <div *ngFor="let player of players; trackBy:trackById"
     class="d-flex mb-1 mx-2 p-2 flex-wrap align-items-center rounded">
-    <app-player-avatar-list [avatarUris]="player.sponsorList" [enableCaptainSessionStatusDisplay]="true"
-      [captainSession]="player.session"></app-player-avatar-list>
+    <app-player-avatar-list [avatarUris]="player.teamSponsorLogos | sponsorLogoFileNamesToUris"
+      [enableCaptainSessionStatusDisplay]="true" [captainSession]="player.session"></app-player-avatar-list>
     <div>
       <div class="player-info">
         <span class="mx-2">{{player.approvedName}}</span>
diff --git a/projects/gameboard-ui/src/app/admin/player-names/player-names.component.ts b/projects/gameboard-ui/src/app/admin/player-names/player-names.component.ts
index bf97dfd7..dffe8d25 100644
--- a/projects/gameboard-ui/src/app/admin/player-names/player-names.component.ts
+++ b/projects/gameboard-ui/src/app/admin/player-names/player-names.component.ts
@@ -1,9 +1,9 @@
 // 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, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { faSearch, faFilter, faCheck, faArrowLeft, faTimes, faUndo } from '@fortawesome/free-solid-svg-icons';
-import { BehaviorSubject, combineLatest, interval, Observable, scheduled, timer } from 'rxjs';
+import { BehaviorSubject, combineLatest, firstValueFrom, Observable, timer } from 'rxjs';
 import { debounceTime, switchMap, tap } from 'rxjs/operators';
 import { Player, PlayerSearch } from '../../api/player-models';
 import { PlayerService } from '../../api/player.service';
@@ -13,7 +13,7 @@ import { PlayerService } from '../../api/player.service';
   templateUrl: './player-names.component.html',
   styleUrls: ['./player-names.component.scss']
 })
-export class PlayerNamesComponent implements OnInit {
+export class PlayerNamesComponent {
   refresh$ = new BehaviorSubject<boolean>(true);
   players$: Observable<Player[]>;
   source: Player[] = [];
@@ -51,9 +51,6 @@ export class PlayerNamesComponent implements OnInit {
 
   }
 
-  ngOnInit(): void {
-  }
-
   toggleFilter(role: string): void {
     this.filter = this.filter !== role ? role : '';
     if (!!this.filter) {
@@ -69,8 +66,13 @@ export class PlayerNamesComponent implements OnInit {
     this.refresh$.next(true);
   }
 
-  update(model: Player): void {
-    this.api.update(model).subscribe();
+  async update(model: Player): Promise<void> {
+    await firstValueFrom(this.api.update({
+      id: model.id,
+      name: model.name,
+      approvedName: model.approvedName,
+      nameStatus: model.nameStatus
+    }));
   }
 
   approveName(model: Player): void {
diff --git a/projects/gameboard-ui/src/app/admin/player-registrar/player-registrar.component.html b/projects/gameboard-ui/src/app/admin/player-registrar/player-registrar.component.html
index ee4f8f28..feda6370 100644
--- a/projects/gameboard-ui/src/app/admin/player-registrar/player-registrar.component.html
+++ b/projects/gameboard-ui/src/app/admin/player-registrar/player-registrar.component.html
@@ -130,7 +130,8 @@ <h4>Players &mdash; {{ctx.game.name}}</h4>
         <fa-icon [icon]="player.checked ? fa.checkSquare : fa.square"></fa-icon>
       </button>
     </div>
-    <app-player-avatar-list class="cursor-pointer" (click)="view(player)" [avatarUris]="player.sponsorList"
+    <app-player-avatar-list class="cursor-pointer" (click)="view(player)"
+      [avatarUris]="player.teamSponsorLogos | sponsorLogoFileNamesToUris"
       [enableCaptainSessionStatusDisplay]="showSessionStatus"
       [captainSession]="player.session"></app-player-avatar-list>
     <div class="ml-2">
diff --git a/projects/gameboard-ui/src/app/admin/player-registrar/player-registrar.component.ts b/projects/gameboard-ui/src/app/admin/player-registrar/player-registrar.component.ts
index 6b6682f1..0a3b7097 100644
--- a/projects/gameboard-ui/src/app/admin/player-registrar/player-registrar.component.ts
+++ b/projects/gameboard-ui/src/app/admin/player-registrar/player-registrar.component.ts
@@ -4,7 +4,7 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { BsModalService } from 'ngx-bootstrap/modal';
-import { asyncScheduler, BehaviorSubject, combineLatest, firstValueFrom, iif, interval, Observable, of, scheduled, timer } from 'rxjs';
+import { asyncScheduler, BehaviorSubject, combineLatest, firstValueFrom, interval, Observable, scheduled, timer } from 'rxjs';
 import { debounceTime, filter, first, map, mergeAll, switchMap, tap } from 'rxjs/operators';
 import { BoardService } from '../../api/board.service';
 import { Game } from '../../api/game-models';
diff --git a/projects/gameboard-ui/src/app/admin/player-sponsor-report/player-sponsor-report.component.html b/projects/gameboard-ui/src/app/admin/player-sponsor-report/player-sponsor-report.component.html
index 2885f97e..1ddfe76e 100644
--- a/projects/gameboard-ui/src/app/admin/player-sponsor-report/player-sponsor-report.component.html
+++ b/projects/gameboard-ui/src/app/admin/player-sponsor-report/player-sponsor-report.component.html
@@ -27,12 +27,14 @@ <h4>Board Reports</h4>
     </div>
     <div class="col-2 p-2 font-weight-bold" *ngIf="gameSponsorReport && currentGame">
       <div>
-        <button class="btn btn-outline-info btn-sm mx-1" (click)="downloadGameSponsorReport(currentGame.id)">Export Board Report to CSV</button>
+        <button class="btn btn-outline-info btn-sm mx-1" (click)="downloadGameSponsorReport(currentGame.id)">Export
+          Board Report to CSV</button>
       </div>
     </div>
     <div class="col-2 p-2 font-weight-bold" *ngIf="sponsorStats && currentGame">
       <div>
-        <button class="btn btn-outline-info btn-sm mx-1" (click)="downloadSponsorReport()">Export Sponsor Report to CSV</button>
+        <button class="btn btn-outline-info btn-sm mx-1" (click)="downloadSponsorReport()">Export Sponsor Report to
+          CSV</button>
       </div>
     </div>
   </div>
@@ -61,7 +63,8 @@ <h5 class="pt-5">Board: {{g.gameName}}</h5>
         <div class="col-6 fw-bold font-weight-bold">Player Count</div>
       </div>
       <div class="row border-top p-3" *ngFor="let s of g.stats">
-        <div class="col-6"><img width="40" height="40" src="{{s.logo}}" /><span class="pl-3">{{s.name}}</span></div>
+        <div class="col-6"><img width="40" height="40" src="{{s.logo | sponsorLogoFileNamesToUris }}" /><span
+            class="pl-3">{{s.name}}</span></div>
         <div class="col-6">{{s.count}}</div>
       </div>
     </div>
@@ -75,7 +78,9 @@ <h5 class="pt-5">All Sponsors</h5>
     <div class="col-6 fw-bold font-weight-bold">User Count</div>
   </div>
   <div class="row border-top p-3" *ngFor="let s of sponsorStats">
-    <div class="col-6"><img width="40" height="40" src="{{s.logo}}" /><span class="pl-3">{{s.name}}</span></div>
+    <div class="col-6"><img width="40" height="40" src="{{s.logo | sponsorLogoFileNamesToUris}}" /><span
+        class="pl-3">{{s.name}}</span>
+    </div>
     <div class="col-6">{{s.count}}</div>
   </div>
 </div>
diff --git a/projects/gameboard-ui/src/app/admin/player-sponsor-report/player-sponsor-report.component.ts b/projects/gameboard-ui/src/app/admin/player-sponsor-report/player-sponsor-report.component.ts
index 0bcf6785..3a683c38 100644
--- a/projects/gameboard-ui/src/app/admin/player-sponsor-report/player-sponsor-report.component.ts
+++ b/projects/gameboard-ui/src/app/admin/player-sponsor-report/player-sponsor-report.component.ts
@@ -1,8 +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, OnInit, ViewChild } from '@angular/core';
-import { PlatformLocation } from '@angular/common';
+import { Component, ViewChild } from '@angular/core';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { FormGroup, NgForm } from '@angular/forms';
 import { Search } from '../../api/models';
@@ -17,7 +16,7 @@ import { SponsorService } from '../../api/sponsor.service';
   templateUrl: './player-sponsor-report.component.html',
   styleUrls: ['./player-sponsor-report.component.scss']
 })
-export class PlayerSponsorReportComponent implements OnInit {
+export class PlayerSponsorReportComponent {
   @ViewChild(NgForm) form!: FormGroup;
   gameSponsorReport?: GameSponsorReport;
   sponsors?: SponsorReport;
@@ -31,8 +30,7 @@ export class PlayerSponsorReportComponent implements OnInit {
   constructor(
     private api: ReportService,
     private gameService: GameService,
-    private sponsorService: SponsorService,
-    private platform: PlatformLocation
+    private sponsorService: SponsorService
   ) {
     this.gameService.list(this.search).subscribe(
       r => {
@@ -42,7 +40,6 @@ export class PlayerSponsorReportComponent implements OnInit {
 
           this.api.gameSponsorReport(this.currentGame.id).subscribe(
             r => {
-              r.stats.forEach(gss => gss.stats.forEach(ss => ss.logo = sponsorService.getLogoUrl(ss.logo)));
               this.gameSponsorReport = r;
             }
           );
@@ -53,15 +50,11 @@ export class PlayerSponsorReportComponent implements OnInit {
     this.api.sponsorReport().subscribe(
       r => {
         this.sponsors = r;
-        r.stats.forEach(ss => ss.logo = sponsorService.getLogoUrl(ss.logo));
         this.sponsorStats = r.stats;
       }
     );
   }
 
-  ngOnInit(): void {
-  }
-
   updateGame(id: string) {
     if (this.games) {
       this.currentGame = this.games.find(g => g.id == id);
@@ -69,7 +62,6 @@ export class PlayerSponsorReportComponent implements OnInit {
       if (this.currentGame) {
         this.api.gameSponsorReport(this.currentGame.id).subscribe(
           r => {
-            r.stats.forEach(gss => gss.stats.forEach(ss => ss.logo = this.sponsorService.getLogoUrl(ss.logo)));
             this.gameSponsorReport = r;
           }
         );
diff --git a/projects/gameboard-ui/src/app/admin/practice/practice-challenges/practice-challenges.component.html b/projects/gameboard-ui/src/app/admin/practice/practice-challenges/practice-challenges.component.html
deleted file mode 100644
index 614768ce..00000000
--- a/projects/gameboard-ui/src/app/admin/practice/practice-challenges/practice-challenges.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="my-3 text-center">
-    <p>A coolified view of active practice challenges is coming soon!</p>
-</div>
-<ng-container *ngIf="ctx">
-</ng-container>
diff --git a/projects/gameboard-ui/src/app/admin/practice/practice-challenges/practice-challenges.component.ts b/projects/gameboard-ui/src/app/admin/practice/practice-challenges/practice-challenges.component.ts
deleted file mode 100644
index fd515b64..00000000
--- a/projects/gameboard-ui/src/app/admin/practice/practice-challenges/practice-challenges.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { GameCardContext } from '@/api/game-models';
-import { PracticeService } from '@/services/practice.service';
-import { Component, OnInit } from '@angular/core';
-import { firstValueFrom } from 'rxjs';
-
-interface PracticeChallengesContext {
-  games: GameCardContext[];
-  practiceModeIntroText: string;
-}
-
-@Component({
-  selector: 'app-practice-challenges',
-  templateUrl: './practice-challenges.component.html',
-  styleUrls: ['./practice-challenges.component.scss']
-})
-export class PracticeChallengesComponent implements OnInit {
-  protected ctx: PracticeChallengesContext | null = null;
-
-  constructor(private practiceService: PracticeService) { }
-
-  async ngOnInit(): Promise<void> {
-    this.ctx = {
-      games: await firstValueFrom(this.practiceService.listGames()),
-      practiceModeIntroText: ""
-    };
-  }
-}
diff --git a/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.html b/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.html
index 081ff2a7..20d5a022 100644
--- a/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.html
+++ b/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.html
@@ -1,10 +1,9 @@
 <ng-container *ngIf="ctx">
-    <div class="greeting-container mt-4">
-        <h2 class="mt-2">Practice Page Greeting</h2>
+    <div class="greeting-container settings-section mt-4">
+        <h2>Practice Page Greeting</h2>
         <p>
-            This text appears on the practice page to introduce players to playing in the Practice Area. Edit it below to
-            customize it
-            to your needs.
+            This text appears on the practice page to introduce players to playing in the Practice Area. Edit it below
+            to customize it to your needs.
         </p>
 
         <textarea class="form-control" [placeholder]="ctx.introTextPlaceholder"
@@ -12,12 +11,26 @@ <h2 class="mt-2">Practice Page Greeting</h2>
             rows="5"></textarea>
     </div>
 
-    <div class="greeting-container">
-        <h2 class="mt-4">Certificate Template</h2>
+    <div class="suggested-searches-container settings-section">
+        <h2>Suggested searches</h2>
+
+        <p>
+            These search terms will appear on the homepage of the Practice Area, just below the greeting. You can use
+            these to direct players to useful or interesting subsets of the available practice challenges.
+        </p>
+
+        <textarea class="form-control" (input)="handleSettingsChanged(ctx.settings)"
+            [(ngModel)]="suggestedSearchesLineDelimited" rows="10">
+
+        </textarea>
+        <small><strong>NOTE:</strong> Enter one suggested search per line.</small>
+    </div>
+
+    <div class="greeting-container settings-section">
+        <h2>Certificate Template</h2>
         <p>
             Players are able to save certificates in PDF format for each practice challenge they fully complete. Use
-            this field
-            to customize the appearance of these certificates.
+            this field to customize the appearance of these certificates.
         </p>
 
         <textarea class="form-control" (input)="handleSettingsChanged(ctx.settings)"
@@ -28,8 +41,8 @@ <h2 class="mt-4">Certificate Template</h2>
         </button>
     </div>
 
-    <div class="concurrent-sessions-container">
-        <h2 class="mt-4">Session Limits</h2>
+    <div class="concurrent-sessions-container settings-section">
+        <h2>Session Limits</h2>
         <p>
             You can use the controls below to set limits on practice sessions, including how many can be active at once
             how long they are by default, and the max length that a player can play in a single practice session.
diff --git a/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.scss b/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.scss
index 3ee8be9a..4e33c6de 100644
--- a/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.scss
+++ b/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.scss
@@ -1,3 +1,8 @@
 .form-group {
     flex: 1 1 50%;
 }
+
+.settings-section {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+}
diff --git a/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.ts b/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.ts
index 77c32b7c..96c7bb4c 100644
--- a/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.ts
+++ b/projects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.ts
@@ -20,22 +20,18 @@ export class PracticeSettingsComponent implements OnInit {
   ctx: PracticeSettingsContext | null = null;
 
   private _startUpdate$ = new Subject<PracticeModeSettings>();
+  protected suggestedSearchesLineDelimited = "";
+
   protected certificateHtmlPlaceholder = [
     "Enter an HTML template here which will be used to create certificates for the Practice Area. For each challenge they fully solve, players will be able to print a PDF of this certificate.",
     "You can use several variables to display information about the player's performance on the challenge by including these \"magic strings\" in your template.They include: ",
     `
       - {{playerName}} - The player's approved username
-
       - {{score}} - The player's score on the challenge
-
       - {{date}} - The date the player completed the challenge
-
       - {{challengeName}} - The name of the challenge
-
       - {{season}} - The season the challenge was originally played in competitive mode
-
       - {{track}} - The track upon which the challenge was originally placed in competitive mode
-      
       - {{time}} - The amount of time the player spent solving the challenge
     `
   ].join("\n\n");
@@ -56,6 +52,8 @@ export class PracticeSettingsComponent implements OnInit {
       introTextPlaceholder: this.markdownHelpers.getMarkdownPlaceholderHelp(`Enter your "intro to the Practice Area" text here!`),
       settings: await firstValueFrom(this.practiceService.getSettings())
     };
+
+    this.suggestedSearchesLineDelimited = this.ctx.settings.suggestedSearches.join("\n");
   }
 
   handleShowCertificateTemplateHelp() {
@@ -68,6 +66,7 @@ export class PracticeSettingsComponent implements OnInit {
   }
 
   handleSettingsChanged(settings: PracticeModeSettings) {
+    settings.suggestedSearches = !this.suggestedSearchesLineDelimited ? [] : this.suggestedSearchesLineDelimited.split("\n").map(entry => entry.trim());
     this._startUpdate$.next(settings);
   }
 }
diff --git a/projects/gameboard-ui/src/app/admin/sponsor-browser/sponsor-browser.component.html b/projects/gameboard-ui/src/app/admin/sponsor-browser/sponsor-browser.component.html
index 915d99f2..3595a528 100644
--- a/projects/gameboard-ui/src/app/admin/sponsor-browser/sponsor-browser.component.html
+++ b/projects/gameboard-ui/src/app/admin/sponsor-browser/sponsor-browser.component.html
@@ -1,40 +1,30 @@
 <!-- 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. -->
 
-<ng-container *ngIf="created$ | async"></ng-container>
-<ng-container *ngIf="updated$ | async"></ng-container>
-<ng-container *ngIf="deleted$ | async"></ng-container>
-<ng-container *ngIf="dropped$ | async"></ng-container>
+<app-error-div></app-error-div>
 
-<h4>Sponsors</h4>
+<ng-container *ngIf="!isLoading; else loading">
+  <div class="new-sponsor-container my-4">
+    <h4>Create a New Sponsor</h4>
+    <app-sponsor-edit-form (sponsorSaved)="handleSponsorSaved($event)"></app-sponsor-edit-form>
+  </div>
 
-<app-dropzone (dropped)="dropped($event)">
-  <span> or drag sponsor images here. (Filename should be the sponsor key.)</span>
-  <br>
-  <span>Acceptable file types: .png, .jpeg, .jpg, .gif, .webp, .svg</span>
-</app-dropzone>
+  <ng-container *ngIf="sponsors.length">
+    <hr class="mb-4" />
 
-<ng-container *ngIf="source$ | async as sponsors; else loading">
-  <br>
-  <div style="display: table-row-group">
-    <div *ngFor="let s of sponsors" class="panel" style="display: table-row">
-      <div style="display: table-cell; padding: 8px">
-        <img [src]="s.logoUrl" class="img-fluid">
-        <span class="mx-2">{{s.id}}</span>
-      </div>
-      <div style="display: table-cell">
-        <input type="text" class="form-control mx-2" placeholder="title" [(ngModel)]="s.name" (blur)="update(s)">
-        <app-confirm-button btnClass="btn btn-outline-danger" (confirm)="delete(s)">
-          <fa-icon [icon]="faTrash"></fa-icon>
-          <span>Delete</span>
-        </app-confirm-button>
+    <h4>Existing Sponsors</h4>
+    <div *ngFor="let parentSponsor of sponsors" class="d-flex flex-wrap align-items-center my-4 root-sponsor-container">
+      <app-sponsor-admin-entry class="width-100 d-block" [sponsor]="parentSponsor"
+        (requestDelete)="delete(parentSponsor)" (requestRefresh)="reload()"></app-sponsor-admin-entry>
+
+      <div class="child-sponsors-container width-100 pl-5">
+        <app-sponsor-admin-entry *ngFor="let childSponsor of parentSponsor.childSponsors" [sponsor]="childSponsor"
+          (requestDelete)="delete(childSponsor)" (requestRefresh)="reload()"></app-sponsor-admin-entry>
       </div>
-  </div>
-  </div>
+    </div>
+  </ng-container>
 </ng-container>
 
 <ng-template #loading>
-  <div class="text-center">
-    <app-spinner></app-spinner>
-  </div>
+  <app-spinner></app-spinner>
 </ng-template>
diff --git a/projects/gameboard-ui/src/app/admin/sponsor-browser/sponsor-browser.component.scss b/projects/gameboard-ui/src/app/admin/sponsor-browser/sponsor-browser.component.scss
index da605c47..7003d50c 100644
--- a/projects/gameboard-ui/src/app/admin/sponsor-browser/sponsor-browser.component.scss
+++ b/projects/gameboard-ui/src/app/admin/sponsor-browser/sponsor-browser.component.scss
@@ -1,10 +1,17 @@
+@import "../../../scss/variables";
+
+h4 {
+  margin-bottom: 1.5rem;
+}
+
 .panel {
   margin-bottom: .5rem;
-  img {
-    height: 96px;
-  }
-  input {
-    width: 300px;
-    display: inline;
-  }
+}
+
+hr {
+  border: solid 1px $foreground;
+}
+
+.root-sponsor-container {
+  border-bottom: dashed 1px $foreground;
 }
diff --git a/projects/gameboard-ui/src/app/admin/sponsor-browser/sponsor-browser.component.ts b/projects/gameboard-ui/src/app/admin/sponsor-browser/sponsor-browser.component.ts
index 9d961c2b..2856f2d7 100644
--- a/projects/gameboard-ui/src/app/admin/sponsor-browser/sponsor-browser.component.ts
+++ b/projects/gameboard-ui/src/app/admin/sponsor-browser/sponsor-browser.component.ts
@@ -2,11 +2,11 @@
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
 import { Component, OnInit } from '@angular/core';
-import { faArrowLeft, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { BehaviorSubject, from, merge, Observable, of, Subject } from 'rxjs';
-import { debounceTime, filter, map, mergeAll, mergeMap, switchMap, tap } from 'rxjs/operators';
-import { ChangedSponsor, NewSponsor, Sponsor } from '../../api/sponsor-models';
+import { fa } from "@/services/font-awesome.service";
+import { firstValueFrom } from 'rxjs';
+import { ChangedSponsor, Sponsor, SponsorWithChildSponsors } from '../../api/sponsor-models';
 import { SponsorService } from '../../api/sponsor.service';
+import { ToastService } from '@/utility/services/toast.service';
 
 @Component({
   selector: 'app-sponsor-browser',
@@ -14,84 +14,41 @@ import { SponsorService } from '../../api/sponsor.service';
   styleUrls: ['./sponsor-browser.component.scss']
 })
 export class SponsorBrowserComponent implements OnInit {
-  refresh$ = new BehaviorSubject<any>(true);
-  source$: Observable<Sponsor[]>;
-  source!: Sponsor[];
-  creating$ = new Subject<NewSponsor>();
-  created$: Observable<Sponsor>;
-  updating$ = new Subject<ChangedSponsor>();
-  updated$: Observable<Sponsor>;
-  deleteing$ = new Subject<Sponsor>();
-  deleted$: Observable<any>;
-  dropping$ = new Subject<File[]>();
-  dropped$: Observable<Sponsor>;
-  faPlus = faPlus;
-  faTrash = faTrash;
-  faArrowLeft = faArrowLeft;
-
-  newSponsor: NewSponsor = {id: '', name: ''};
+  protected errors: any[] = [];
+  protected fa = fa;
+  protected isLoading = false;
+  protected sponsors: SponsorWithChildSponsors[] = [];
 
   constructor(
-    private api: SponsorService
-  ) {
-    this.source$ = this.refresh$.pipe(
-      debounceTime(500),
-      switchMap(() => api.list({})),
-      tap(r => this.source = r)
-    );
-
-    this.created$ = this.creating$.pipe(
-      filter(m => !!m.id),
-      switchMap(m => api.create(m)),
-      tap(r => this.source.unshift(r)),
-      tap(r => this.clear())
-    );
-
-    this.updated$ = this.updating$.pipe(
-      mergeMap(m => api.update(m))
-    );
-
-    this.deleted$ = this.deleteing$.pipe(
-      filter(m => !!m.id),
-      switchMap(m => api.delete(m.id)),
-      tap(r => this.refresh$.next(true))
-    );
-
-    this.dropped$ = this.dropping$.pipe(
-      switchMap(l => from(l)),
-      mergeMap(f => api.upload(f), 3),
-      tap(() => this.refresh$.next(true))
-    );
-  }
-
-  ngOnInit(): void {
-  }
-
-  create(): void {
-    this.creating$.next(this.newSponsor);
-  }
+    private api: SponsorService,
+    private toastsService: ToastService) { }
 
-  clear(): void {
-    this.newSponsor.id = '';
-    this.newSponsor.name = '';
+  async ngOnInit(): Promise<void> {
+    await this.reload();
   }
 
-  update(s: Sponsor): void {
-    this.updating$.next(s);
+  async update(s: ChangedSponsor): Promise<void> {
+    this.isLoading = true;
+    await firstValueFrom(this.api.update(s));
+    await this.reload();
+    this.isLoading = false;
   }
 
-  delete(s: Sponsor): void {
-    this.deleteing$.next(s);
+  async delete(s: Sponsor): Promise<void> {
+    this.isLoading = true;
+    await firstValueFrom(this.api.delete(s.id));
+    await this.reload();
+    this.isLoading = false;
   }
 
-  remove(s: Sponsor): void {
-    const target = this.source.find(i => i.id === s.id);
-    if (!target) { return; }
-    const index = this.source.indexOf(target);
-    this.source.splice(index, 1);
+  async reload(): Promise<void> {
+    this.isLoading = true;
+    this.sponsors = await firstValueFrom(this.api.listWithChildren());
+    this.isLoading = false;
   }
 
-  dropped(files: File[]): void {
-    this.dropping$.next(files);
+  protected async handleSponsorSaved(sponsor: Sponsor) {
+    this.toastsService.showMessage(`Saved sponsor "${sponsor.name}".`);
+    await this.reload();
   }
 }
diff --git a/projects/gameboard-ui/src/app/admin/team-observer/team-observer.component.ts b/projects/gameboard-ui/src/app/admin/team-observer/team-observer.component.ts
index 6540baf9..11c8e862 100644
--- a/projects/gameboard-ui/src/app/admin/team-observer/team-observer.component.ts
+++ b/projects/gameboard-ui/src/app/admin/team-observer/team-observer.component.ts
@@ -16,7 +16,7 @@ import { ConfigService } from '../../utility/config.service';
   templateUrl: './team-observer.component.html',
   styleUrls: ['./team-observer.component.scss']
 })
-export class TeamObserverComponent implements OnInit, OnDestroy {
+export class TeamObserverComponent implements OnDestroy {
   refresh$ = new BehaviorSubject<boolean>(true);
   game?: Game; // game info like team or individual
   table: Map<string, ObserveTeam> = new Map<string, ObserveTeam>(); // table of teams to display
@@ -46,6 +46,7 @@ export class TeamObserverComponent implements OnInit, OnDestroy {
   faSortAlphaDown = faSortAlphaDown;
   faAngleDoubleUp = faAngleDoubleUp;
   faWindowRestore = faWindowRestore;
+
   constructor(
     route: ActivatedRoute,
     private api: BoardService,
@@ -101,9 +102,6 @@ export class TeamObserverComponent implements OnInit, OnDestroy {
     }
   }
 
-  ngOnInit(): void {
-  }
-
   ngOnDestroy(): void {
     this.tableData.unsubscribe();
     this.gameData.unsubscribe();
diff --git a/projects/gameboard-ui/src/app/admin/user-registrar/user-registrar.component.html b/projects/gameboard-ui/src/app/admin/user-registrar/user-registrar.component.html
index c76e806f..741a217f 100644
--- a/projects/gameboard-ui/src/app/admin/user-registrar/user-registrar.component.html
+++ b/projects/gameboard-ui/src/app/admin/user-registrar/user-registrar.component.html
@@ -68,9 +68,12 @@ <h4>Users</h4>
 
 <ng-container *ngIf="source$ | async as list; else loading">
   <small class="text-warning d-block mx-2 mb-2">count: {{list.length}}</small>
-  <div *ngFor="let user of list" class="d-flex mb-1 p-3 flex-wrap align-items-baseline bg-secondary rounded">
+  <div *ngFor="let user of list" class="d-flex p-3 flex-wrap align-items-center bg-secondary rounded">
+    <div class="user-avatar-container mr-2">
+      <app-player-avatar [avatarUri]="user.sponsor | sponsorToLogoUri"></app-player-avatar>
+    </div>
     <div>
-      <span class="mr-2 fs-11">{{user.approvedName}}</span>
+      <span class="mr-2 fs-11">{{user.approvedName || user.name}}</span>
       <span class="text-muted">{{user.pendingName}}</span><br />
 
       <div class="d-flex align-items-center">
diff --git a/projects/gameboard-ui/src/app/api/board.service.ts b/projects/gameboard-ui/src/app/api/board.service.ts
index b043d9ec..2efe320a 100644
--- a/projects/gameboard-ui/src/app/api/board.service.ts
+++ b/projects/gameboard-ui/src/app/api/board.service.ts
@@ -8,7 +8,6 @@ import { map } from 'rxjs/operators';
 import { GameSessionService } from '../services/game-session.service';
 import { ConfigService } from '../utility/config.service';
 import { BoardPlayer, BoardSpec, Challenge, ChallengeResult, ChallengeSummary, ChangedChallenge, ConsoleActor, NewChallenge, ObserveChallenge, SectionSubmission, VmConsole } from './board-models';
-import { FeedbackTemplate } from './feedback-models';
 
 @Injectable({ providedIn: 'root' })
 export class BoardService {
diff --git a/projects/gameboard-ui/src/app/api/challenges.models.ts b/projects/gameboard-ui/src/app/api/challenges.models.ts
index feab7a39..32539f6f 100644
--- a/projects/gameboard-ui/src/app/api/challenges.models.ts
+++ b/projects/gameboard-ui/src/app/api/challenges.models.ts
@@ -2,7 +2,6 @@ import { ApiTimeWindow, LocalTimeWindow } from "@/core/models/api-time-window";
 import { PlayerMode } from "./player-models";
 import { VmState } from "./board-models";
 import { SimpleEntity } from "./models";
-import { NumberUnitLength } from "luxon";
 
 export interface ActiveChallenge {
     spec: {
diff --git a/projects/gameboard-ui/src/app/api/player-models.ts b/projects/gameboard-ui/src/app/api/player-models.ts
index e30c89cf..dc0ed4bb 100644
--- a/projects/gameboard-ui/src/app/api/player-models.ts
+++ b/projects/gameboard-ui/src/app/api/player-models.ts
@@ -3,7 +3,8 @@
 
 import { ChallengeResult } from "./board-models";
 import { Game } from "./game-models";
-import { Search } from "./models";
+import { Search, SimpleEntity } from "./models";
+import { Sponsor } from "./sponsor-models";
 
 export interface Player {
   id: string;
@@ -17,7 +18,7 @@ export interface Player {
   name: string;
   nameStatus: string;
   approvedName: string;
-  sponsor: string;
+  sponsor: Sponsor;
   role: PlayerRole;
   mode: PlayerMode;
   sessionBegin: Date;
@@ -32,8 +33,7 @@ export interface Player {
   isManager: boolean;
   isReady: boolean;
   advanced: boolean;
-  sponsorLogo: string;
-  sponsorList: string[];
+  teamSponsorLogos: string[];
   pendingName: string;
   checked: boolean;
 }
@@ -143,33 +143,6 @@ export interface ChangedPlayer {
   name: string;
   nameStatus: string;
   approvedName: string;
-  sponsor: string;
-  role: PlayerRole;
-}
-
-export interface ObservePlayer {
-  id: string;
-  teamId: string;
-  userId: string;
-  userName: string;
-  gameId: string;
-  name: string;
-  approvedName: string;
-  sponsor: string;
-  sessionBegin: Date;
-  sessionEnd: Date;
-  sessionMinutes: number;
-  rank: number;
-  score: number;
-  time: number;
-  correctCount: number;
-  partialCount: number;
-  sponsorLogo: string;
-  session: TimeWindow;
-
-  expanded: boolean;
-  pinned: boolean;
-  fullWidth: boolean;
 }
 
 export interface SelfChangedPlayer {
@@ -191,7 +164,6 @@ export interface PlayerEnlistment {
 export interface Standing {
   teamId: string;
   approvedName: string;
-  sponsor: string;
   sessionBegin: Date;
   sessionEnd: Date;
   rank: number;
@@ -200,10 +172,8 @@ export interface Standing {
   correctCount: number;
   partialCount: number;
   session: TimeWindow;
-  sponsorLogo: string;
   advanced: boolean;
-  sponsorList: string[];
-  sponsorTooltip: string;
+  sponsors: Sponsor[];
 }
 
 export interface TeamInvitation {
@@ -230,7 +200,7 @@ export interface Team {
   partialCount: number;
   challenges: TeamChallenge[];
   members: TeamMember[];
-  sponsorList: string[];
+  sponsors: SimpleEntity[];
 }
 
 export interface TeamChallenge {
@@ -257,10 +227,9 @@ export interface TeamPlayer {
   name: string;
   nameStatus: string;
   approvedName: string;
-  sponsor: string;
+  sponsor: Sponsor;
   role: PlayerRole;
   isManager: boolean;
-  sponsorLogo: string;
   pendingName: string;
 }
 
@@ -285,7 +254,6 @@ export interface ObserveTeam {
   teamId: string;
   approvedName: string;
   gameId: string;
-  sponsor: string;
   sessionBegin: Date;
   sessionEnd: Date;
   rank: number;
@@ -296,6 +264,7 @@ export interface ObserveTeam {
   members: ObserveTeamMember[];
   expanded: boolean;
   pinned: boolean;
+  sponsors: SimpleEntity[];
 }
 
 export interface ObserveTeamMember {
diff --git a/projects/gameboard-ui/src/app/api/player.service.ts b/projects/gameboard-ui/src/app/api/player.service.ts
index 5aae868f..0d86686b 100644
--- a/projects/gameboard-ui/src/app/api/player.service.ts
+++ b/projects/gameboard-ui/src/app/api/player.service.ts
@@ -5,7 +5,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
-import { GameSessionService } from '../services/game-session.service';
+import { GameSessionService } from '@/services/game-session.service';
 import { ConfigService } from '../utility/config.service';
 import { ChangedPlayer, NewPlayer, Player, PlayerCertificate, PlayerEnlistment, SessionChangeRequest, Standing, Team, TeamAdvancement, TeamChallenge, TeamInvitation, TeamSummary, TimeWindow } from './player-models';
 
@@ -70,7 +70,7 @@ export class PlayerService {
   }
 
   public resetSession(request: { player: Player, unenrollTeam: boolean }): Observable<any> {
-    return this.http.post<void>(`${this.url}/player/${request.player.id}/session`, { isManualReset: true, unenrollTeam: request.unenrollTeam }).pipe(
+    return this.http.post<void>(`${this.url}/player/${request.player.id}/session`, { unenrollTeam: request.unenrollTeam }).pipe(
       map(r => {
         delete request.player.session;
         return;
@@ -110,18 +110,11 @@ export class PlayerService {
   }
 
   public getTeam(id: string): Observable<Team> {
-    return this.http.get<Team>(`${this.url}/team/${id}`).pipe(
-      map(t => {
-        t.sponsorList = t.sponsorList.map(s => this.transformSponsorUrl(s));
-        return t;
-      })
-    );
+    return this.http.get<Team>(`${this.url}/team/${id}`);
   }
 
   public getTeams(id: string): Observable<TeamSummary[]> {
-    return this.http.get<TeamSummary[]>(`${this.url}/teams/${id}`).pipe(
-      map(result => result.map(t => this.transformSponsor(t)))
-    );
+    return this.http.get<TeamSummary[]>(`${this.url}/teams/${id}`);
   }
 
   public getTeamChallenges = (id: string): Observable<TeamChallenge[]> =>
@@ -148,9 +141,6 @@ export class PlayerService {
   }
 
   public transform(p: Player, disallowedName: string | null = null): Player {
-    p.sponsorLogo = this.transformSponsorUrl(p.sponsor);
-    p.sponsorList = p.sponsorList.map(s => this.transformSponsorUrl(s));
-
     // If the user has no name status but they changed their name, it's pending approval
     if (!p.nameStatus && p.approvedName !== p.name) {
       p.nameStatus = 'pending';
@@ -170,21 +160,7 @@ export class PlayerService {
   }
 
   private transformStanding(p: Standing): Standing {
-    p.sponsorLogo = p.sponsor
-      ? `${this.config.imagehost}/${p.sponsor}`
-      : `${this.config.basehref}assets/sponsor.svg`;
-
-    p.sponsorTooltip = p.sponsorList.map(s => s.split('.').reverse().pop()?.toUpperCase()).join(' | ');
-    p.sponsorList.forEach((s, i, a) => a[i] = `${this.config.imagehost}/${s}`);
     p.session = new TimeWindow(p.sessionBegin, p.sessionEnd);
     return p;
   }
-
-  private transformSponsor<T extends { sponsorLogo: string, sponsor: string }>(p: T): T {
-    p.sponsorLogo = this.transformSponsorUrl(p.sponsor);
-    return p;
-  }
-
-  private transformSponsorUrl = (sponsor: string): string =>
-    sponsor ? `${this.config.imagehost}/${sponsor}` : `${this.config.basehref}assets/sponsor.svg`;
 }
diff --git a/projects/gameboard-ui/src/app/api/report-models.ts b/projects/gameboard-ui/src/app/api/report-models.ts
index 42fef78a..c20b5e7e 100644
--- a/projects/gameboard-ui/src/app/api/report-models.ts
+++ b/projects/gameboard-ui/src/app/api/report-models.ts
@@ -1,6 +1,8 @@
 // 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 { Sponsor } from "./sponsor-models";
+
 export interface UserReport {
   title: string;
   timestamp: Date;
diff --git a/projects/gameboard-ui/src/app/api/spec-models.ts b/projects/gameboard-ui/src/app/api/spec-models.ts
index 4b5e693a..2decf04f 100644
--- a/projects/gameboard-ui/src/app/api/spec-models.ts
+++ b/projects/gameboard-ui/src/app/api/spec-models.ts
@@ -6,6 +6,7 @@ export interface ExternalSpec {
   name: string;
   description: string;
   gameEngineType: GameEngineType;
+  solutionGuideUrl: string;
 }
 
 export interface SpecDetail extends ExternalSpec {
@@ -41,6 +42,7 @@ export interface SpecSummary {
   gameName: string;
   gameLogo: string;
   averageDeploySeconds: number;
+  solutionGuideUrl: string;
 }
 
 export enum GameEngineType {
diff --git a/projects/gameboard-ui/src/app/api/sponsor-models.ts b/projects/gameboard-ui/src/app/api/sponsor-models.ts
index a29c0ab6..d9efb084 100644
--- a/projects/gameboard-ui/src/app/api/sponsor-models.ts
+++ b/projects/gameboard-ui/src/app/api/sponsor-models.ts
@@ -2,20 +2,37 @@
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
 export interface Sponsor {
- id: string;
- name: string;
- logo: string;
- approved: boolean;
- logoUrl: string;
+    id: string;
+    name: string;
+    logo: string;
+    parentSponsorId?: string;
 }
+
+export interface SponsorWithParent extends Sponsor {
+    parentSponsor: Sponsor;
+}
+
+export interface SponsorWithChildSponsors extends Sponsor {
+    childSponsors: Sponsor[];
+}
+
 export interface ChangedSponsor {
- id: string;
- name: string;
- logo: string;
- approved: boolean;
- logoUrl: string;
+    id: string;
+    name?: string;
+    logo?: string;
+    parentSponsorId?: string;
 }
+
+export interface UpsertSponsor {
+    id?: string;
+    name: string;
+    logoFile?: File;
+    parentSponsorId?: string;
+}
+
 export interface NewSponsor {
- id: string;
- name: string;
+    name: string;
+    logoFile?: File;
+    parentSponsorId?: string;
 }
+
diff --git a/projects/gameboard-ui/src/app/api/sponsor.service.ts b/projects/gameboard-ui/src/app/api/sponsor.service.ts
index ffe74e92..3b1656d1 100644
--- a/projects/gameboard-ui/src/app/api/sponsor.service.ts
+++ b/projects/gameboard-ui/src/app/api/sponsor.service.ts
@@ -4,68 +4,75 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { ConfigService } from '../utility/config.service';
-import { ChangedSponsor, NewSponsor, Sponsor } from './sponsor-models';
+import { ChangedSponsor, NewSponsor, Sponsor, SponsorWithChildSponsors, SponsorWithParent } from './sponsor-models';
+import { MimeTypes } from '../../tools';
+import { ApiUrlService } from '@/services/api-url.service';
+
+export interface SponsorSearch {
+  hasParent?: boolean;
+}
 
 @Injectable({ providedIn: 'root' })
 export class SponsorService {
   url = '';
 
   constructor(
-    private http: HttpClient,
-    private config: ConfigService
+    private apiUrl: ApiUrlService,
+    private config: ConfigService,
+    private http: HttpClient
   ) {
     this.url = config.apphost + 'api';
   }
 
-  public list(search?: any): Observable<Sponsor[]> {
-    return this.http.get<Sponsor[]>(this.url + '/sponsors', { params: search }).pipe(
-      map(r => {
-        r.forEach(g => this.transform(g));
-        return r;
-      })
-    );
+  public get allowedMimeTypes(): string[] {
+    return [
+      MimeTypes.Gif,
+      MimeTypes.Jpeg,
+      MimeTypes.Png,
+      MimeTypes.Svg,
+      MimeTypes.Webp
+    ];
   }
 
-  public retrieve(id: string): Observable<Sponsor> {
-    return this.http.get<Sponsor>(`${this.url}/sponsor/${id}`).pipe(
-      map(r => this.transform(r))
-    );
+  public list(search?: SponsorSearch): Observable<SponsorWithParent[]> {
+    return this.http.get<SponsorWithParent[]>(this.url + '/sponsors', { params: { ...(search || {}) } });
   }
 
-  public create(model: NewSponsor): Observable<Sponsor> {
-    return this.http.post<Sponsor>(`${this.url}/sponsor`, model);
+  public listWithChildren(): Observable<SponsorWithChildSponsors[]> {
+    return this.http.get<SponsorWithChildSponsors[]>(this.apiUrl.build("sponsors/with-children"));
   }
 
-  public createAll(model: ChangedSponsor[]): Observable<any> {
-    return this.http.post<any>(`${this.url}/sponsors`, model);
+  public create(model: NewSponsor): Observable<Sponsor> {
+    return this.http.post<Sponsor>(this.apiUrl.build("sponsor"), model);
   }
 
-  public update(model: Sponsor): Observable<any> {
-    return this.http.put<any>(`${this.url}/sponsor`, model);
-  }
+  public setAvatar(sponsorId: string, avatarFile: File) {
+    if (!avatarFile) {
+      throw new Error(`Can't update sponsor ${sponsorId}'s avatar with falsey avatarFile.`);
+    }
 
-  public delete(id: string): Observable<any> {
-    return this.http.delete<any>(`${this.url}/sponsor/${id}`);
+    if (this.allowedMimeTypes.indexOf(avatarFile.type) < 0) {
+      throw new Error(`File type ${avatarFile.type} isn't permitted for sponsor logos.`);
+    }
+
+    const formData = new FormData();
+    formData.append("avatarFile", avatarFile);
+
+    return this.http.put<void>(this.apiUrl.build(`sponsor/${sponsorId}/avatar`), formData);
   }
 
-  public upload(file: File): Observable<Sponsor> {
-    const payload: FormData = new FormData();
-    payload.append('file', file, file.name);
-    return this.http.post<Sponsor>(`${this.url}/sponsor/image`, payload);
+  public update(model: ChangedSponsor): Observable<Sponsor> {
+    return this.http.put<Sponsor>(`${this.url}/sponsor`, model);
   }
 
-  public getLogoUrl(logo: string): string {
-    const logoUrl = logo
-      ? `${this.config.imagehost}/${logo}`
-      : `${this.config.basehref}assets/sponsor.svg`
-      ;
-    return logoUrl;
+  public delete(id: string): Observable<any> {
+    return this.http.delete<any>(`${this.url}/sponsor/${id}`);
   }
 
-  private transform(sponsor: Sponsor): Sponsor {
-    sponsor.logoUrl = this.getLogoUrl(sponsor.logo);
-    return sponsor;
+  public resolveAbsoluteSponsorLogoUri(logoFileName: string | undefined | null) {
+    return !!logoFileName ?
+      `${this.config.imagehost}/${logoFileName}` :
+      `${this.config.basehref}assets/sponsor.svg`;
   }
 }
diff --git a/projects/gameboard-ui/src/app/api/user-models.ts b/projects/gameboard-ui/src/app/api/user-models.ts
index 164d0713..28d2b817 100644
--- a/projects/gameboard-ui/src/app/api/user-models.ts
+++ b/projects/gameboard-ui/src/app/api/user-models.ts
@@ -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.
 
+import { Sponsor } from "./sponsor-models";
+
 export interface ApiUser {
   id: string;
   name: string;
   nameStatus: string;
   approvedName: string;
-  sponsor: string;
+  hasDefaultSponsor: boolean;
+  sponsor: Sponsor;
   role: UserRole;
   createdOn: Date;
   lastLoginDate?: Date;
@@ -18,7 +21,6 @@ export interface ApiUser {
   isTester: boolean;
   isObserver: boolean;
   isSupport: boolean;
-  sponsorLogo: string;
   pendingName: string;
   roleTag: string;
 }
@@ -29,17 +31,17 @@ export interface NewUser {
 
 export interface ChangedUser {
   id: string;
-  name: string;
-  approvedName: string;
-  nameStatus: string;
-  sponsor: string;
-  role: UserRole;
+  name?: string;
+  approvedName?: string;
+  nameStatus?: string;
+  sponsorId?: string;
+  role?: UserRole;
 }
 
 export interface SelfChangedUser {
   id: string;
   name: string;
-  sponsor: string;
+  sponsorId: string;
 }
 
 export interface TeamMember {
diff --git a/projects/gameboard-ui/src/app/api/user.service.ts b/projects/gameboard-ui/src/app/api/user.service.ts
index 044c1e0a..e88af676 100644
--- a/projects/gameboard-ui/src/app/api/user.service.ts
+++ b/projects/gameboard-ui/src/app/api/user.service.ts
@@ -4,7 +4,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators';
 import { ConfigService } from '../utility/config.service';
 import { Announcement, ApiUser, ChangedUser, NewUser, TreeNode, TryCreateUserResult } from './user-models';
 import { LogService } from '@/services/log.service';
@@ -12,20 +12,15 @@ import { ApiUrlService } from '@/services/api-url.service';
 
 @Injectable({ providedIn: 'root' })
 export class UserService {
-
-  url = '';
-
   constructor(
     private apiUrl: ApiUrlService,
     private config: ConfigService,
     private http: HttpClient,
     private log: LogService
-  ) {
-    this.url = config.apphost + 'api';
-  }
+  ) { }
 
   public list(filter: any): Observable<ApiUser[]> {
-    return this.http.get<ApiUser[]>(this.url + '/users', { params: filter }).pipe(
+    return this.http.get<ApiUser[]>(this.apiUrl.build("users"), { params: filter }).pipe(
       map(r => {
         r.forEach(u => this.transform(u));
         return r;
@@ -34,13 +29,13 @@ export class UserService {
   }
 
   public retrieve(id: string): Observable<ApiUser> {
-    return this.http.get<ApiUser>(`${this.url}/user/${id}`).pipe(
+    return this.http.get<ApiUser>(this.apiUrl.build(`user/${id}`)).pipe(
       map(r => this.transform(r))
     );
   }
 
   public tryCreate(model: NewUser): Observable<TryCreateUserResult> {
-    return this.http.post<TryCreateUserResult>(`${this.url}/user`, model).pipe(
+    return this.http.post<TryCreateUserResult>(this.apiUrl.build("user"), model).pipe(
       map(r => {
         r.user = this.transform(r.user);
         return r;
@@ -49,37 +44,37 @@ export class UserService {
   }
 
   public update(model: ChangedUser, disallowedName: string | null = null): Observable<ApiUser> {
-    return this.http.put<any>(`${this.url}/user`, model).pipe(
-      map(() => this.transform(model as ApiUser, disallowedName)),
+    return this.http.put<any>(this.apiUrl.build("user"), model).pipe(
+      map(r => this.transform(r as ApiUser, disallowedName)),
     );
   }
 
   public delete(id: string): Observable<any> {
-    return this.http.delete<any>(`${this.url}/user/${id}`);
+    return this.http.delete<any>(this.apiUrl.build(`user/${id}`));
   }
 
   public logout(): Observable<any> {
-    return this.http.post<any>(`${this.url}/user/logout`, null);
+    return this.http.post<any>(this.apiUrl.build("user/logout"), null);
   }
 
   public ticket(): Observable<any> {
-    return this.http.post<any>(`${this.url}/user/ticket`, null);
+    return this.http.post<any>(this.apiUrl.build("user/ticket"), null);
   }
 
   public getDocs(): Observable<TreeNode> {
-    return this.http.get<string[]>(`${this.url}/docs`).pipe(
+    return this.http.get<string[]>(this.apiUrl.build("docs")).pipe(
       map(r => this.mapToTree(r))
     );
   }
 
   public announce(model: Announcement): Observable<any> {
-    return this.http.post<any>(`${this.url}/announce`, model);
+    return this.http.post<any>(this.apiUrl.build("announce"), model);
   }
 
   // records a login event for the currently authorized user
   public updateLoginEvents(): Observable<void> {
     this.log.logInfo("User login event recorded");
-    return this.http.put<void>(`${this.url}/user/login`, {});
+    return this.http.put<void>(this.apiUrl.build("user/login"), {});
   }
 
   public canEnrollAndPlayOutsideExecutionWindow(user: ApiUser) {
@@ -114,10 +109,6 @@ export class UserService {
   }
 
   private transform(user: ApiUser, disallowedName: string | null = null): ApiUser {
-    user.sponsorLogo = user.sponsor
-      ? `${this.config.imagehost}/${user.sponsor}`
-      : `${this.config.basehref}assets/sponsor.svg`;
-
     // If the user has no name status but they changed their name, it's pending approval
     if (!user.nameStatus && user.approvedName !== user.name) {
       user.nameStatus = 'pending';
diff --git a/projects/gameboard-ui/src/app/app.component.html b/projects/gameboard-ui/src/app/app.component.html
index de5b6788..99d91652 100644
--- a/projects/gameboard-ui/src/app/app.component.html
+++ b/projects/gameboard-ui/src/app/app.component.html
@@ -2,7 +2,10 @@
 <!-- Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information. -->
 
 <div class="app-container">
-  <app-nav></app-nav>
+  <div class="sticky-content" [class.nonsticky]="!(stickyMenu$ | async)">
+    <app-sponsor-select-banner></app-sponsor-select-banner>
+    <app-nav></app-nav>
+  </div>
   <app-message-board></app-message-board>
   <router-outlet></router-outlet>
   <footer></footer>
diff --git a/projects/gameboard-ui/src/app/app.component.scss b/projects/gameboard-ui/src/app/app.component.scss
index 4f383061..4f06c0f4 100644
--- a/projects/gameboard-ui/src/app/app.component.scss
+++ b/projects/gameboard-ui/src/app/app.component.scss
@@ -1,3 +1,14 @@
 .app-container {
   min-height: 100vh;
 }
+
+.sticky-content {
+  top: 0px;
+  left: 0px;
+  position: sticky;
+  z-index: 999;
+
+  &.nonsticky {
+    position: unset;
+  }
+}
diff --git a/projects/gameboard-ui/src/app/app.component.ts b/projects/gameboard-ui/src/app/app.component.ts
index 6008e0d5..9e75e8a9 100644
--- a/projects/gameboard-ui/src/app/app.component.ts
+++ b/projects/gameboard-ui/src/app/app.component.ts
@@ -2,10 +2,18 @@
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
 import { Component } from '@angular/core';
+import { LayoutService } from './utility/layout.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent { }
+export class AppComponent {
+  stickyMenu$: Observable<boolean>;
+
+  constructor(layoutService: LayoutService) {
+    this.stickyMenu$ = layoutService.stickyMenu$;
+  }
+}
diff --git a/projects/gameboard-ui/src/app/app.module.ts b/projects/gameboard-ui/src/app/app.module.ts
index c832e65d..34cc3814 100644
--- a/projects/gameboard-ui/src/app/app.module.ts
+++ b/projects/gameboard-ui/src/app/app.module.ts
@@ -29,13 +29,16 @@ import { AuthService } from './utility/auth.service';
 import { UserService } from './api/user.service';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { NAVIGATOR } from './services/navigator.service';
-import { AppNavComponent } from './nav/nav.component';
+
+import { AppNavComponent } from './components/nav/nav.component';
+import { SponsorSelectBannerComponent } from './components/sponsor-select-banner/sponsor-select-banner.component';
 
 @NgModule({
   declarations: [
     AppComponent,
+    AppNavComponent,
+    SponsorSelectBannerComponent,
     SupportPillComponent,
-    AppNavComponent
   ],
   imports: [
     BrowserModule,
@@ -54,15 +57,6 @@ import { AppNavComponent } from './nav/nav.component';
     BsDropdownModule.forRoot(),
     ProgressbarModule.forRoot(),
   ],
-  // exports: [
-  //   ApiModule,
-  //   UtilityModule,
-  //   FontAwesomeModule,
-  //   ButtonsModule,
-  //   ModalModule,
-  //   BsDropdownModule,
-  //   TooltipModule
-  // ],
   providers: [
     {
       provide: HTTP_INTERCEPTORS,
@@ -108,8 +102,7 @@ export class AppModule { }
 export function loadSettings(
   config: ConfigService,
 ): (() => Observable<any>) {
-  return (): Observable<any> => config.load()
-    ;
+  return (): Observable<any> => config.load();
 }
 
 export function register(user: CurrentUserService): (() => Promise<void>) {
diff --git a/projects/gameboard-ui/src/app/nav/nav.component.html b/projects/gameboard-ui/src/app/components/nav/nav.component.html
similarity index 91%
rename from projects/gameboard-ui/src/app/nav/nav.component.html
rename to projects/gameboard-ui/src/app/components/nav/nav.component.html
index a775ab3b..2aaf17ca 100644
--- a/projects/gameboard-ui/src/app/nav/nav.component.html
+++ b/projects/gameboard-ui/src/app/components/nav/nav.component.html
@@ -1,4 +1,4 @@
-<nav [class]="customBackground" [class.nonsticky]="!(layoutService.stickyMenu$ | async)">
+<nav [class]="customBackground">
     <div class="nav-items d-flex align-items-center justify-content-end">
         <a class="btn btn-link text-success mx-1" routerLinkActive="text-info" [routerLink]="['/home']">Home</a>
         <ng-container *ngIf="(toc$ | async)?.length">
@@ -7,7 +7,7 @@
         </ng-container>
         <a *ngIf="isPracticeModeEnabled" class="btn btn-link text-success mx-1" routerLinkActive="text-info"
             [routerLink]="['practice']">Practice</a>
-        <a class="btn btn-link text-success mx-1" routerLinkActive="text-info" [routerLink]="['profile']">Profile</a>
+        <a class="btn btn-link text-success mx-1" routerLinkActive="text-info" [routerLink]="profileUrl">Profile</a>
         <ng-container *ngIf="user$ | async as user">
             <a class="btn btn-link text-success mx-1" routerLinkActive="text-info" [routerLink]="['support']">
                 <span>Support</span>
diff --git a/projects/gameboard-ui/src/app/nav/nav.component.scss b/projects/gameboard-ui/src/app/components/nav/nav.component.scss
similarity index 57%
rename from projects/gameboard-ui/src/app/nav/nav.component.scss
rename to projects/gameboard-ui/src/app/components/nav/nav.component.scss
index ceca7575..b1a803da 100644
--- a/projects/gameboard-ui/src/app/nav/nav.component.scss
+++ b/projects/gameboard-ui/src/app/components/nav/nav.component.scss
@@ -4,19 +4,8 @@
     }
 }
 
-nav {
-    top: 0px;
-    left: 0px;
-    position: sticky;
-    z-index: 999;
-
-    &.nonsticky {
-        position: unset;
-    }
-
-    a {
-        font-size: 1.5rem;
-    }
+nav a {
+    font-size: 1.5rem;
 }
 
 .nav-items {
diff --git a/projects/gameboard-ui/src/app/nav/nav.component.ts b/projects/gameboard-ui/src/app/components/nav/nav.component.ts
similarity index 90%
rename from projects/gameboard-ui/src/app/nav/nav.component.ts
rename to projects/gameboard-ui/src/app/components/nav/nav.component.ts
index d47faf0f..7de1d20c 100644
--- a/projects/gameboard-ui/src/app/nav/nav.component.ts
+++ b/projects/gameboard-ui/src/app/components/nav/nav.component.ts
@@ -4,12 +4,12 @@ import { UserService as LocalUser } from '@/utility/user.service';
 import { PracticeService } from '@/services/practice.service';
 import { UnsubscriberService } from '@/services/unsubscriber.service';
 import { ConfigService } from '@/utility/config.service';
-import { LayoutService } from '@/utility/layout.service';
 import { DOCUMENT } from '@angular/common';
 import { Component, Inject, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { Observable, map } from 'rxjs';
 import { ReportsService } from '@/reports/reports.service';
+import { RouterService } from '@/services/router.service';
 
 @Component({
   selector: 'app-nav',
@@ -22,15 +22,17 @@ export class AppNavComponent implements OnInit {
   canAccessReporting$?: Observable<boolean>;
   customBackground = "";
   env: any;
-  isPracticeModeEnabled = false;
+
+  protected isPracticeModeEnabled = false;
+  protected profileUrl?: string;
 
   constructor(
     private localUser: LocalUser,
     private config: ConfigService,
     @Inject(DOCUMENT) private document: Document,
-    public layoutService: LayoutService,
     private practiceService: PracticeService,
     private reportsService: ReportsService,
+    private routerService: RouterService,
     private toc: TocService,
     private title: Title,
     private unsub: UnsubscriberService
@@ -40,6 +42,7 @@ export class AppNavComponent implements OnInit {
     this.user$ = this.localUser.user$;
     this.toc$ = this.toc.toc$;
     this.title.setTitle(this.config.settings.appname || 'Gameboard');
+    this.profileUrl = this.routerService.getProfileUrl();
 
     if (this.config.settings.custom_background) {
       this.document.body.classList.add(this.config.settings.custom_background);
diff --git a/projects/gameboard-ui/src/app/components/sponsor-select-banner/sponsor-select-banner.component.scss b/projects/gameboard-ui/src/app/components/sponsor-select-banner/sponsor-select-banner.component.scss
new file mode 100644
index 00000000..cf928911
--- /dev/null
+++ b/projects/gameboard-ui/src/app/components/sponsor-select-banner/sponsor-select-banner.component.scss
@@ -0,0 +1,14 @@
+@media print {
+    nav {
+        display: none;
+    }
+}
+
+:host {
+    position: sticky;
+    top: 0;
+}
+
+a {
+    text-decoration: underline;
+}
diff --git a/projects/gameboard-ui/src/app/components/sponsor-select-banner/sponsor-select-banner.component.ts b/projects/gameboard-ui/src/app/components/sponsor-select-banner/sponsor-select-banner.component.ts
new file mode 100644
index 00000000..179505c8
--- /dev/null
+++ b/projects/gameboard-ui/src/app/components/sponsor-select-banner/sponsor-select-banner.component.ts
@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+import { Observable, map, tap } from 'rxjs';
+import { LogService } from '@/services/log.service';
+import { RouterService } from '@/services/router.service';
+import { ConfigService } from '@/utility/config.service';
+import { UserService as LocalUserService } from '@/utility/user.service';
+import { ApiUser } from '@/api/user-models';
+import { Sponsor } from '@/api/sponsor-models';
+
+@Component({
+  selector: 'app-sponsor-select-banner',
+  template: `
+    <div *ngIf="(user$ | async) && (!(sponsor$ | async) || (user$ | async)!.hasDefaultSponsor)"
+      class="sponsor-select-banner-component position-sticky width-100 bg-warning py-2 text-center">
+      <strong>Heads up!</strong>
+      You haven't selected your sponsoring organization. You'll need to do so before you play challenges on {{appName}}.
+      Head over to your <a [routerLink]="profileUrl" class="color-foreground">profile</a> to
+      choose your sponsor!
+    </div>
+  `,
+  styleUrls: ['./sponsor-select-banner.component.scss']
+})
+export class SponsorSelectBannerComponent {
+  protected appName = "Gameboard";
+  protected profileUrl = "";
+  protected sponsor$: Observable<Sponsor | undefined>;
+  protected user$: Observable<ApiUser | null>;
+
+  constructor(
+    config: ConfigService,
+    localUserService: LocalUserService,
+    logService: LogService,
+    routerService: RouterService) {
+    this.appName = config.settings.appname || this.appName;
+    this.profileUrl = routerService.getProfileUrl();
+
+    if (!this.profileUrl) {
+      logService.logError("Couldn't resolve the profile URL from the router service.");
+    }
+
+    this.user$ = localUserService.user$;
+    this.sponsor$ = localUserService
+      .user$
+      .pipe(
+        map(u => u?.sponsor)
+      );
+  }
+}
diff --git a/projects/gameboard-ui/src/app/core/components/colored-text-chip/colored-text-chip.component.html b/projects/gameboard-ui/src/app/core/components/colored-text-chip/colored-text-chip.component.html
index 29d0eca4..ddae6f68 100644
--- a/projects/gameboard-ui/src/app/core/components/colored-text-chip/colored-text-chip.component.html
+++ b/projects/gameboard-ui/src/app/core/components/colored-text-chip/colored-text-chip.component.html
@@ -1,8 +1,9 @@
 <span [class]="'badge badge-pill mr-2 px-2 py-1 mb-2 colored-text-chip-' + size" [class.click-target]="isClickable"
-    [ngStyle]="text | textToColor" (click)="handleClick(text, id)">
+    [ngStyle]="text | textToColor" (click)="isClickable && handleClick({text, id}, $event)">
     <span class="text-container">{{text}}</span>&nbsp;
-    <span *ngIf="enableSecondaryAction" class="btn p-0 m-0 border-0" (click)="handleSecondaryActionClick(text, id)"
-        class="secondary-action cursor-pointer" style="color: inherit">
+    <span *ngIf="enableSecondaryAction" class="btn p-0 m-0 border-0"
+        (click)="enableSecondaryAction && handleSecondaryActionClick(text, id)" class="secondary-action cursor-pointer"
+        style="color: inherit">
         <fa-icon class="p-0 m-0" [icon]="secondaryActionIcon"></fa-icon>
     </span>
 </span>
diff --git a/projects/gameboard-ui/src/app/core/components/colored-text-chip/colored-text-chip.component.ts b/projects/gameboard-ui/src/app/core/components/colored-text-chip/colored-text-chip.component.ts
index a3eb22c3..82aadffc 100644
--- a/projects/gameboard-ui/src/app/core/components/colored-text-chip/colored-text-chip.component.ts
+++ b/projects/gameboard-ui/src/app/core/components/colored-text-chip/colored-text-chip.component.ts
@@ -25,8 +25,10 @@ export class ColoredTextChipComponent {
 
   constructor(public faService: FontAwesomeService) { }
 
-  handleClick(text: string, id?: any) {
-    this.click.emit({ id, text });
+  handleClick(textChipEvent: ColoredTextChipEvent, event: MouseEvent) {
+    event.stopPropagation();
+    event.preventDefault();
+    this.click.emit(textChipEvent);
   }
 
   handleSecondaryActionClick(text: string, id?: any) {
diff --git a/projects/gameboard-ui/src/app/core/components/confirm-button/confirm-button.component.ts b/projects/gameboard-ui/src/app/core/components/confirm-button/confirm-button.component.ts
index 015bd841..d6a29ab7 100644
--- a/projects/gameboard-ui/src/app/core/components/confirm-button/confirm-button.component.ts
+++ b/projects/gameboard-ui/src/app/core/components/confirm-button/confirm-button.component.ts
@@ -33,4 +33,8 @@ export class ConfirmButtonComponent implements OnInit {
     }
     this.confirming = false;
   }
+
+  public stopConfirming() {
+    this.confirming = false;
+  }
 }
diff --git a/projects/gameboard-ui/src/app/core/components/dropzone/dropzone.component.html b/projects/gameboard-ui/src/app/core/components/dropzone/dropzone.component.html
new file mode 100644
index 00000000..f234fd13
--- /dev/null
+++ b/projects/gameboard-ui/src/app/core/components/dropzone/dropzone.component.html
@@ -0,0 +1,12 @@
+<!-- Copyright 2021 Carnegie Mellon University. -->
+<!-- Released under a MIT (SEI)-style license. See LICENSE.md in the project root. -->
+
+<div class="dropzone cursor-pointer" (click)="clickToLaunchFilePicker && fileInput.click()"
+  [class.dropzone-active]="isDropping">
+  <button *ngIf="!clickToLaunchFilePicker" type="button" class="btn btn-sm btn-info"
+    (click)="fileInput.click()">Browse</button>
+
+  <ng-content></ng-content>
+</div>
+
+<input [id]="inputId" type="file" #fileInput (change)="filesSelected($event)" [multiple]="allowMultiple">
diff --git a/projects/gameboard-ui/src/app/core/components/dropzone/dropzone.component.scss b/projects/gameboard-ui/src/app/core/components/dropzone/dropzone.component.scss
new file mode 100644
index 00000000..0fa0e08c
--- /dev/null
+++ b/projects/gameboard-ui/src/app/core/components/dropzone/dropzone.component.scss
@@ -0,0 +1,10 @@
+@import "../../../../scss/variables";
+
+input[type=file] {
+  display: none;
+}
+
+::ng-deep .dropzone-active .dropzone-target {
+  background-color: rgba(215, 154, 254, 0.5);
+    border: .25rem dashed darkorchid !important;
+}
diff --git a/projects/gameboard-ui/src/app/utility/components/dropzone/dropzone.component.ts b/projects/gameboard-ui/src/app/core/components/dropzone/dropzone.component.ts
similarity index 74%
rename from projects/gameboard-ui/src/app/utility/components/dropzone/dropzone.component.ts
rename to projects/gameboard-ui/src/app/core/components/dropzone/dropzone.component.ts
index 5ba1c87a..1cd5395e 100644
--- a/projects/gameboard-ui/src/app/utility/components/dropzone/dropzone.component.ts
+++ b/projects/gameboard-ui/src/app/core/components/dropzone/dropzone.component.ts
@@ -1,49 +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.
 
-import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'app-dropzone',
   templateUrl: './dropzone.component.html',
   styleUrls: ['./dropzone.component.scss']
 })
-export class DropzoneComponent implements OnInit {
+export class DropzoneComponent {
   @Input() inputId = 'dropzone-input';
   @Input() btnClass = 'btn btn-outline-secondary btn-sm';
+  @Input() allowMultiple = false;
+  @Input() acceptMimeTypes: string[] = [];
+  @Input() clickToLaunchFilePicker = true;
   @Output() dropped = new EventEmitter<File[]>();
-  dropzone = false;
 
-  constructor() { }
+  protected isDropping = false;
 
-  ngOnInit(): void {
-  }
-
-  //
   // Handle component events
-  //
   filesSelected(ev: any): void {
     this.dropped.emit(Array.from(ev.target.files));
   }
 
-  //
   // Handle drag/drop events
-  //
   @HostListener('dragenter', ['$event'])
   @HostListener('dragover', ['$event'])
   onEnter(event: DragEvent): boolean {
-    this.dropzone = true;
+    this.isDropping = true;
     return false;
   }
+
   @HostListener('dragleave', ['$event'])
   @HostListener('dragexit', ['$event'])
   onLeave(event: DragEvent): boolean {
-    this.dropzone = false;
+    this.isDropping = false;
     return false;
   }
+
   @HostListener('drop', ['$event'])
   onDrop(event: DragEvent): boolean {
-    this.dropzone = false;
+    this.isDropping = false;
     this.dropped.emit(Array.from(event.dataTransfer?.files || []));
     return false;
   }
diff --git a/projects/gameboard-ui/src/app/core/components/modal/modal.models.ts b/projects/gameboard-ui/src/app/core/components/modal/modal.models.ts
index b4a130be..fccb9ff6 100644
--- a/projects/gameboard-ui/src/app/core/components/modal/modal.models.ts
+++ b/projects/gameboard-ui/src/app/core/components/modal/modal.models.ts
@@ -8,6 +8,8 @@ export interface ModalConfig<TComponent, TContext> {
     content: ModalContent<TComponent>;
     context: TContext;
     modalClasses?: string[];
+    isBackdropStatic?: boolean;
+    ignoreBackdropClick?: boolean;
 }
 
 export type ModalContent<TComponent> = string | TemplateRef<any> | { new(...args: any[]): TComponent };
diff --git a/projects/gameboard-ui/src/app/core/components/multi-select/multi-select.component.html b/projects/gameboard-ui/src/app/core/components/multi-select/multi-select.component.html
index 07286a5e..4eb96d75 100644
--- a/projects/gameboard-ui/src/app/core/components/multi-select/multi-select.component.html
+++ b/projects/gameboard-ui/src/app/core/components/multi-select/multi-select.component.html
@@ -9,12 +9,13 @@
 
                 <div class="input-group-append" *ngIf="ngModel.searchText">
                     <button type="button" class="btn btn-info" (click)="handleClearClicked()"
-                        tooltip="Clear this searchbox" placement="bottom">
+                        tooltip="Clear this search box" placement="bottom">
                         <fa-icon [icon]="fa.eraser"></fa-icon>
                     </button>
                 </div>
             </div>
         </div>
+
         <div class="form-control scroll-container flex-grow-1">
             <div *ngFor="let option of options; let i = index">
                 <ng-container *ngIf="getOptionVisibility(option)">
diff --git a/projects/gameboard-ui/src/app/core/components/multi-select/multi-select.component.ts b/projects/gameboard-ui/src/app/core/components/multi-select/multi-select.component.ts
index 6e3b34f3..9ece4ca3 100644
--- a/projects/gameboard-ui/src/app/core/components/multi-select/multi-select.component.ts
+++ b/projects/gameboard-ui/src/app/core/components/multi-select/multi-select.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, Input, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { CustomInputComponent, createCustomInputControlValueAccessor } from '../custom-input/custom-input.component';
 import { fa } from "@/services/font-awesome.service";
diff --git a/projects/gameboard-ui/src/app/core/components/player-avatar/player-avatar.component.ts b/projects/gameboard-ui/src/app/core/components/player-avatar/player-avatar.component.ts
index 747f5246..41613e7c 100644
--- a/projects/gameboard-ui/src/app/core/components/player-avatar/player-avatar.component.ts
+++ b/projects/gameboard-ui/src/app/core/components/player-avatar/player-avatar.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { Observable, of } from 'rxjs';
-import { TimeWindow } from '../../../api/player-models';
+import { TimeWindow } from '@/api/player-models';
 
 @Component({
   selector: 'app-player-avatar',
@@ -20,8 +20,9 @@ export class PlayerAvatarComponent implements OnInit, OnChanges {
   @Input() enableSessionStatus = false;
 
   // this accommodates cases where we want to make sure that even though this avatar may be a single item, it
-  // may be in a list-like view with a PlayerAvatarListComponent, and we need to arrange the width such that 
+  // may be in a list-like view with a PlayerAvatarListComponent, and we need to arrange the width such that
   // it's equal to the width of the list component
+  // Ben, months later: ... or maybe just pass some styling semantics in here rather than talking about list views? 🤦
   @Input() maxAvatarsInListView?: number;
 
   protected avatarCountClass = '';
diff --git a/projects/gameboard-ui/src/app/core/core.module.ts b/projects/gameboard-ui/src/app/core/core.module.ts
index b8f300da..7ce0a038 100644
--- a/projects/gameboard-ui/src/app/core/core.module.ts
+++ b/projects/gameboard-ui/src/app/core/core.module.ts
@@ -19,6 +19,7 @@ import 'chartjs-adapter-luxon';
 
 import { ColoredTextChipComponent } from './components/colored-text-chip/colored-text-chip.component';
 import { DoughnutChartComponent } from './components/doughnut-chart/doughnut-chart.component';
+import { DropzoneComponent } from './components/dropzone/dropzone.component';
 import { GameCardImageComponent } from './components/game-card-image/game-card-image.component';
 import { LineChartComponent } from './components/line-chart/line-chart.component';
 import { LongContentHiderComponent } from './components/long-content-hider/long-content-hider.component';
@@ -56,13 +57,19 @@ import { CumulativeTimeClockComponent } from './components/cumulative-time-clock
 import { GameboardPerformanceSummaryComponent } from './components/gameboard-performance-summary/gameboard-performance-summary.component';
 import { RouterModule } from '@angular/router';
 import { ConfirmButtonComponent } from '@/core/components/confirm-button/confirm-button.component';
+
 import { CountdownPipe } from './pipes/countdown.pipe';
 import { ClockPipe } from './pipes/clock.pipe';
 import { CountdownColorPipe } from './pipes/countdown-color.pipe';
 import { FriendlyTimePipe } from './pipes/friendly-time.pipe';
 import { ApiUrlPipe } from './pipes/api-url.pipe';
-import { RelativeToAbsoluteHrefPipe } from './pipes/relative-to-absolute-href.pipe';
 import { MinPipe } from './pipes/min.pipe';
+import { RelativeToAbsoluteHrefPipe } from './pipes/relative-to-absolute-href.pipe';
+import { SimpleEntitiesToTooltipPipe } from './pipes/simple-entities-to-tooltip.pipe';
+import { SponsorToLogoUriPipe } from './pipes/sponsor-to-logo-uri.pipe';
+import { SponsorLogoToLogoUriPipe } from './pipes/sponsor-logo-to-logo-uri.pipe';
+import { SponsorsToLogoUrisPipe } from './pipes/sponsors-to-logo-uris.pipe';
+import { SponsorLogoFileNamesToUrisPipe } from './pipes/sponsor-logo-file-names-to-uris.pipe';
 
 const PUBLIC_DECLARATIONS = [
   ApiUrlPipe,
@@ -71,6 +78,7 @@ const PUBLIC_DECLARATIONS = [
   ConfirmButtonComponent,
   CumulativeTimeClockComponent,
   DoughnutChartComponent,
+  DropzoneComponent,
   FriendlyDateAndTimePipe,
   GameboardPerformanceSummaryComponent,
   GameCardImageComponent,
@@ -98,8 +106,12 @@ const PUBLIC_DECLARATIONS = [
   SelectPagerComponent,
   ShareButtonComponent,
   ShortDatePipe,
+  SimpleEntitiesToTooltipPipe,
   SortPipe,
   SpinnerComponent,
+  SponsorToLogoUriPipe,
+  SponsorsToLogoUrisPipe,
+  SponsorLogoFileNamesToUrisPipe,
   TextToColorPipe,
   ToggleClassPipe,
   ToTemplateContextPipe,
@@ -126,7 +138,7 @@ const RELAYED_MODULES = [
 
 @NgModule({
   declarations: [
-    ...PUBLIC_DECLARATIONS
+    ...PUBLIC_DECLARATIONS,
   ],
   imports: [
     CommonModule,
diff --git a/projects/gameboard-ui/src/app/core/models/multi-select-query-param.model.ts b/projects/gameboard-ui/src/app/core/models/multi-select-query-param.model.ts
index 7c1c2a3a..53de1dcb 100644
--- a/projects/gameboard-ui/src/app/core/models/multi-select-query-param.model.ts
+++ b/projects/gameboard-ui/src/app/core/models/multi-select-query-param.model.ts
@@ -1,9 +1,9 @@
-import { RouterService } from "@/services/router.service";
-import { UnsubscriberService } from "@/services/unsubscriber.service";
-import { arraysEqual } from "@/tools/object-tools.lib";
 import { inject } from "@angular/core";
 import { ActivatedRoute, Params } from "@angular/router";
 import { BehaviorSubject } from "rxjs";
+import { RouterService } from "@/services/router.service";
+import { UnsubscriberService } from "@/services/unsubscriber.service";
+import { arraysEqual } from "@/tools/object-tools.lib";
 
 export interface MultiSelectQueryParamModelConfig<T> {
     paramName: string;
@@ -15,13 +15,13 @@ export interface MultiSelectQueryParamModelConfig<T> {
 export class MultiSelectQueryParamModel<TOption> {
     config: MultiSelectQueryParamModelConfig<TOption>;
     searchText?: string;
-    options: TOption[] = [];
 
     private route: ActivatedRoute = inject(ActivatedRoute);
     private routerService: RouterService = inject(RouterService);
     private unsub: UnsubscriberService = inject(UnsubscriberService);
 
     private static QUERYSTRING_VALUE_DELIMITER = ",";
+    private resolvedOptions: TOption[] = [];
     private _model$ = new BehaviorSubject<TOption[]>([]);
     modelUpdate$ = this._model$.asObservable();
 
@@ -32,7 +32,7 @@ export class MultiSelectQueryParamModel<TOption> {
 
         if (this.config.options) {
             this.config.options.then(options => {
-                this.options = options;
+                this.resolvedOptions = options;
                 this.bindQueryParamsHandler();
             });
         } else {
@@ -49,32 +49,33 @@ export class MultiSelectQueryParamModel<TOption> {
 
         if (!arraysEqual(previousValue, currentValue)) {
             this._model$.next(values);
-            this.updateQueryParams(values);
+            this.updateQueryParams();
         }
     }
 
     private bindQueryParamsHandler() {
         this.unsub.add(
             this.route.queryParamMap.subscribe(paramMap => {
-                this.selectedValues = paramMap.has(this.config.paramName) ?
-                    paramMap.get(this.config.paramName)!
-                        .split(MultiSelectQueryParamModel.QUERYSTRING_VALUE_DELIMITER)
-                        .map(value => this.config.deserializer!(value, this.options))
-                        .filter(o => !!o) as TOption[] :
-                    [];
+                if (!paramMap.has(this.config.paramName) || !paramMap.get(this.config.paramName)) {
+                    this.selectedValues = this.selectedValues || [];
+                    return;
+                }
+
+                this.selectedValues = paramMap.get(this.config.paramName)!
+                    .split(MultiSelectQueryParamModel.QUERYSTRING_VALUE_DELIMITER)
+                    .map(value => this.config.deserializer!(value, this.resolvedOptions))
+                    .filter(o => !!o) as TOption[];
             })
         );
     }
 
-    private updateQueryParams(model: TOption[]) {
+    private updateQueryParams() {
         const params: Params = {};
         params[this.config.paramName] = this
             .selectedValues
             .map(v => this.config.serializer!(v))
             .join(MultiSelectQueryParamModel.QUERYSTRING_VALUE_DELIMITER);
 
-        this.routerService.updateQueryParams({
-            parameters: params
-        });
+        this.routerService.updateQueryParams({ parameters: params });
     }
 }
diff --git a/projects/gameboard-ui/src/app/core/pipes/simple-entities-to-tooltip.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/simple-entities-to-tooltip.pipe.ts
new file mode 100644
index 00000000..3cdf36f1
--- /dev/null
+++ b/projects/gameboard-ui/src/app/core/pipes/simple-entities-to-tooltip.pipe.ts
@@ -0,0 +1,13 @@
+import { SimpleEntity } from '@/api/models';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'simpleEntitiesToTooltip' })
+export class SimpleEntitiesToTooltipPipe implements PipeTransform {
+
+  transform(value: SimpleEntity[] | null | undefined): string {
+    if (!value || value.length == 0)
+      return "";
+
+    return value.map(e => e.name).join(" | ");
+  }
+}
diff --git a/projects/gameboard-ui/src/app/core/pipes/sponsor-logo-file-names-to-uris.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/sponsor-logo-file-names-to-uris.pipe.ts
new file mode 100644
index 00000000..8a3869cc
--- /dev/null
+++ b/projects/gameboard-ui/src/app/core/pipes/sponsor-logo-file-names-to-uris.pipe.ts
@@ -0,0 +1,16 @@
+import { SponsorService } from '@/api/sponsor.service';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'sponsorLogoFileNamesToUris' })
+export class SponsorLogoFileNamesToUrisPipe implements PipeTransform {
+  constructor(private sponsorService: SponsorService) { }
+
+  transform(value: string | string[]): string[] {
+    if (!value) {
+      return [];
+    }
+
+    let valueArray: string[] = Array.isArray(value) ? value : [value];
+    return valueArray.map(logoFileName => this.sponsorService.resolveAbsoluteSponsorLogoUri(logoFileName));
+  }
+}
diff --git a/projects/gameboard-ui/src/app/core/pipes/sponsor-logo-to-logo-uri.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/sponsor-logo-to-logo-uri.pipe.ts
new file mode 100644
index 00000000..a0efd4cc
--- /dev/null
+++ b/projects/gameboard-ui/src/app/core/pipes/sponsor-logo-to-logo-uri.pipe.ts
@@ -0,0 +1,11 @@
+import { SponsorService } from '@/api/sponsor.service';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'sponsorLogoToLogoUri' })
+export class SponsorLogoToLogoUriPipe implements PipeTransform {
+  constructor(private sponsorService: SponsorService) { }
+
+  transform(value: string): string {
+    return this.sponsorService.resolveAbsoluteSponsorLogoUri(value);
+  }
+}
diff --git a/projects/gameboard-ui/src/app/core/pipes/sponsor-to-logo-uri.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/sponsor-to-logo-uri.pipe.ts
new file mode 100644
index 00000000..b55fb477
--- /dev/null
+++ b/projects/gameboard-ui/src/app/core/pipes/sponsor-to-logo-uri.pipe.ts
@@ -0,0 +1,14 @@
+import { SponsorService } from '@/api/sponsor.service';
+import { ConfigService } from '@/utility/config.service';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'sponsorToLogoUri' })
+export class SponsorToLogoUriPipe implements PipeTransform {
+  constructor(
+    private configService: ConfigService,
+    private sponsorService: SponsorService) { }
+
+  transform(value: { logo: string } | null | undefined): string {
+    return this.sponsorService.resolveAbsoluteSponsorLogoUri(value?.logo);
+  }
+}
diff --git a/projects/gameboard-ui/src/app/core/pipes/sponsors-to-logo-uris.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/sponsors-to-logo-uris.pipe.ts
new file mode 100644
index 00000000..844c8d97
--- /dev/null
+++ b/projects/gameboard-ui/src/app/core/pipes/sponsors-to-logo-uris.pipe.ts
@@ -0,0 +1,15 @@
+import { SponsorService } from '@/api/sponsor.service';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'sponsorsToLogoUris' })
+export class SponsorsToLogoUrisPipe implements PipeTransform {
+  constructor(private sponsorService: SponsorService) { }
+
+  transform(value: { logo: string }[]): string[] {
+    if (!value?.length) {
+      return [];
+    }
+
+    return value.map(sponsor => this.sponsorService.resolveAbsoluteSponsorLogoUri(sponsor.logo));
+  }
+}
diff --git a/projects/gameboard-ui/src/app/game/components/play/play.component.html b/projects/gameboard-ui/src/app/game/components/play/play.component.html
index 2db575fe..069acd10 100644
--- a/projects/gameboard-ui/src/app/game/components/play/play.component.html
+++ b/projects/gameboard-ui/src/app/game/components/play/play.component.html
@@ -15,6 +15,17 @@
             <markdown [data]="challenge.challengeDeployment.markdown"></markdown>
         </p>
 
+        <alert *ngIf="challenge.playerMode == 'practice' && challengeSpec.solutionGuideUrl"
+            class="solution-guide-alert my-4" type="info">
+            <h2>Need help?</h2>
+
+            <p>
+                We've created a step-by-step solution guide for this challenge. If you get stuck, you
+                can find it
+                <a [href]="challengeSpec.solutionGuideUrl" target="_blank">here</a>.
+            </p>
+        </alert>
+
         <h3>Gamespace Resources</h3>
         <div class="vms-container my-4">
             <ul class="d-flex flex-wrap">
diff --git a/projects/gameboard-ui/src/app/game/components/sync-start-page/sync-start-page.component.html b/projects/gameboard-ui/src/app/game/components/sync-start-page/sync-start-page.component.html
index aa41a2a3..50c1fe5d 100644
--- a/projects/gameboard-ui/src/app/game/components/sync-start-page/sync-start-page.component.html
+++ b/projects/gameboard-ui/src/app/game/components/sync-start-page/sync-start-page.component.html
@@ -26,8 +26,8 @@ <h1>{{ctx.game.name}}</h1>
                 </div>
 
                 <div class="player-info d-flex mt-4 justify-content-center align-items-center">
-                    <app-player-avatar [avatarUri]=" ctx.player.sponsorLogo" [session]="ctx.player.session"
-                        [size]="'large'"></app-player-avatar>
+                    <app-player-avatar [avatarUri]=" ctx.player.sponsor | sponsorToLogoUri"
+                        [session]="ctx.player.session" [size]="'large'"></app-player-avatar>
                     <div
                         class="ml-4 mt-2 player-team-info d-flex flex-column justify-content-center align-items-center">
                         <h2>{{ctx.player.approvedName}}</h2>
diff --git a/projects/gameboard-ui/src/app/game/gameboard-page/gameboard-page.component.html b/projects/gameboard-ui/src/app/game/gameboard-page/gameboard-page.component.html
index 3374ed7e..696c1ce9 100644
--- a/projects/gameboard-ui/src/app/game/gameboard-page/gameboard-page.component.html
+++ b/projects/gameboard-ui/src/app/game/gameboard-page/gameboard-page.component.html
@@ -52,7 +52,7 @@ <h3 class="font-weight-bold gray-text">To start a challenge, click a circle on t
                     <input type="number" class="form-control" [(ngModel)]="variant">
                   </div>
                 </ng-container>
-                <app-confirm-button btnClass="btn btn-primary" (confirm)="launch(spec)">
+                <app-confirm-button btnClass="btn btn-primary" (confirm)="launch(spec)" #startChallengeConfirmButton>
                   <span>Start Challenge</span>
                 </app-confirm-button>
                 <div *ngIf="!ctx.isPractice">
diff --git a/projects/gameboard-ui/src/app/game/gameboard-page/gameboard-page.component.ts b/projects/gameboard-ui/src/app/game/gameboard-page/gameboard-page.component.ts
index a1db2d9b..b8295098 100644
--- a/projects/gameboard-ui/src/app/game/gameboard-page/gameboard-page.component.ts
+++ b/projects/gameboard-ui/src/app/game/gameboard-page/gameboard-page.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 } from '@angular/core';
+import { Component, OnDestroy, ViewChild } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { faArrowLeft, faBolt, faExclamationTriangle, faTrash, faTv } from '@fortawesome/free-solid-svg-icons';
@@ -17,6 +17,7 @@ import { GameboardPerformanceSummaryViewModel } from '../../core/components/game
 import { BrowserService } from '@/services/browser.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { ApiError } from '@/api/models';
+import { ConfirmButtonComponent } from '@/core/components/confirm-button/confirm-button.component';
 
 @Component({
   selector: 'app-gameboard-page',
@@ -48,6 +49,8 @@ export class GameboardPageComponent implements OnDestroy {
   cid = '';
   performanceSummaryViewModel?: GameboardPerformanceSummaryViewModel;
 
+  @ViewChild("startChallengeConfirmButton") protected startChallengeConfirmButton?: ConfirmButtonComponent;
+
   constructor(
     route: ActivatedRoute,
     title: Title,
@@ -129,6 +132,8 @@ export class GameboardPageComponent implements OnDestroy {
           map(c => this.syncOne({ ...c, specId: s.id }))
         )
       ),
+      // don't persist the "confirming" state if they switch challenges (#178)
+      tap(c => this.startChallengeConfirmButton?.stopConfirming()),
       tap(s => this.selected = s)
     );
 
diff --git a/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.html b/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.html
index 6e023838..1b1698c7 100644
--- a/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.html
+++ b/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.html
@@ -16,17 +16,17 @@
 
       <!-- not yet enrolled -->
       <ng-container *ngIf="!(isEnrolled$ | async)">
-        <div *ngIf="!ctx.user.name || !ctx.user.sponsor">
+        <div *ngIf="!ctx.user.name || !hasSelectedSponsor">
           Ready to play? Before you do, you'll need to visit your
-          <a [routerLink]="['/profile']">profile</a> to...
+          <a [routerLink]="['/user/profile']">profile</a> to...
 
           <ul class="profile-validation">
             <li *ngIf="!ctx.user.name">Make sure you've entered your name</li>
-            <li *ngIf="!ctx.user.sponsor">Select your sponsor</li>
+            <li *ngIf="!hasSelectedSponsor">Select your sponsor</li>
           </ul>
         </div>
 
-        <ng-container *ngIf="!!(ctx.user.name && ctx.user.sponsor) && (canAdminEnroll || canStandardEnroll)">
+        <ng-container *ngIf="!!ctx.user.name && hasSelectedSponsor && (canAdminEnroll || canStandardEnroll)">
           <!-- team -->
           <div *ngIf="ctx.game.allowTeam">
             <p>
@@ -48,39 +48,40 @@
             <alert type="info">By enrolling in {{ctx.game.name}}, you are accepting the following terms.</alert>
             <markdown [data]="ctx.game.registrationMarkdown"></markdown>
           </div>
-        </ng-container>
-
-        <!-- enrollment controls -->
-        <div class="d-flex align-items-center justify-content-center mt-5"
-          *ngIf="ctxDelayed$ | async as delay; else loading">
-          <div *ngIf="canStandardEnroll" class="text-center">
-            <app-confirm-button btnClass="btn btn-primary btn-lg mr-4"
-              (confirm)="handleEnroll(ctx.user.id, ctx.game.id)">
-              <fa-icon [icon]="faEdit"></fa-icon>
-              <span>Enroll</span>
-            </app-confirm-button>
-          </div>
 
-          <div *ngIf="canAdminEnroll" class="text-center">
-            <app-confirm-button btnClass="btn btn-warning btn-lg" (confirm)="handleEnroll(ctx.user.id, ctx.game.id)">
-              <fa-icon [icon]="faEdit"></fa-icon>
-              <span>Admin Enroll</span>
-            </app-confirm-button>
-          </div>
+          <!-- enrollment controls -->
+          <ng-container *ngIf="!ctx.player.id">
+            <div class="d-flex align-items-center justify-content-center mt-5"
+              *ngIf="ctxDelayed$ | async as delay; else loading">
+              <div class="text-center"
+                *ngIf="!!(ctx.user.name && hasSelectedSponsor) && ctx.game.registration.isDuring">
+                <app-confirm-button btnClass="btn btn-primary btn-lg mr-4"
+                  (confirm)="handleEnroll(ctx.user.id, ctx.game.id)">
+                  <fa-icon [icon]="faEdit"></fa-icon>
+                  <span>Enroll</span>
+                </app-confirm-button>
+              </div>
 
-          <app-error-div [errors]="errors"></app-error-div>
-        </div>
+              <div *ngIf="canAdminEnroll" class="text-center">
+                <app-confirm-button btnClass="btn btn-warning btn-lg"
+                  (confirm)="handleEnroll(ctx.user.id, ctx.game.id)">
+                  <fa-icon [icon]="faEdit"></fa-icon>
+                  <span>Admin Enroll</span>
+                </app-confirm-button>
+              </div>
+            </div>
+          </ng-container>
+        </ng-container>
       </ng-container>
 
       <!-- already enrolled -->
-      <ng-container
-        *ngIf="(isEnrolled$ | async) && ctx.player.session?.isBefore && (ctx.game.registration.isDuring || canAdminEnroll)">
+      <ng-container *ngIf="!!ctx.player.id && ctx.player.session?.isBefore && ctx.game.registration.isDuring">
         <div *ngIf="isManager$ | async" class="form-group mb-0">
           <ng-container *ngIf="ctx.player.name !== ctx.player.approvedName">
             <ng-container *ngIf="ctx.player.nameStatus == 'pending' && ctx.player.name != disallowedName">
               <div class="alert alert-info">
-                Your name is pending approval from an administrator. Return later or select 'Update' to see if it's been
-                approved.
+                Your name is pending approval from an administrator. Return later or select 'Update' to see if it's
+                been approved.
               </div>
             </ng-container>
             <ng-container *ngIf="ctx.player.nameStatus && ctx.player.nameStatus != 'pending'">
@@ -147,7 +148,7 @@
 
         <!-- unenroll -->
         <div
-          *ngIf="(!ctx.player.session || ctx.player.session.isBefore) && (!ctx.game.registration.isAfter || ctx.user.isTester)"
+          *ngIf="ctx.player.id && (!ctx.player.session || ctx.player.session.isBefore) && (!ctx.game.registration.isAfter || ctx.user.isTester)"
           class="form-group text-center">
           <div class="tooltip-holder" [tooltip]="unenrollTooltip" container="body" placement="top">
             <app-confirm-button btnClass="btn btn-danger btn" (confirm)="handleUnenroll(ctx.player)"
@@ -173,13 +174,3 @@
     <app-spinner></app-spinner>
   </div>
 </ng-template>
-
-<ng-template #setNameAndSponsor let-user>
-  Ready to play? Before you do, you'll need to visit your
-  <a [routerLink]="['/profile']">profile</a> to...
-
-  <ul class="profile-validation">
-    <li *ngIf="!user.name">Make sure you've entered your name</li>
-    <li *ngIf="!user.sponsor">Select your sponsor</li>
-  </ul>
-</ng-template>
diff --git a/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.scss b/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.scss
index 20eecf91..d783b735 100644
--- a/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.scss
+++ b/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.scss
@@ -1,4 +1,8 @@
 .profile-validation {
     padding-inline-start: 2rem;
     margin: 1rem 0;
+
+    li {
+        list-style-type: square;
+    }
 }
diff --git a/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.ts b/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.ts
index 0fb38b5e..50ff3764 100644
--- a/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.ts
+++ b/projects/gameboard-ui/src/app/game/player-enroll/player-enroll.component.ts
@@ -3,8 +3,8 @@
 
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { faCopy, faEdit, faPaste, faTrash, faUser } from '@fortawesome/free-solid-svg-icons';
-import { Observable, of, Subject, Subscription, timer } from 'rxjs';
-import { finalize, map, tap, delay, first } from 'rxjs/operators';
+import { firstValueFrom, Observable, of, Subject, Subscription, timer } from 'rxjs';
+import { map, tap, delay, first } from 'rxjs/operators';
 import { GameContext } from '../../api/models';
 import { HubPlayer, NewPlayer, Player, PlayerEnlistment, PlayerRole, TeamInvitation, TimeWindow } from '../../api/player-models';
 import { PlayerService } from '../../api/player.service';
@@ -36,6 +36,7 @@ export class PlayerEnrollComponent implements OnInit, OnDestroy {
   protected canStandardEnroll = false;
   protected disallowedName: string | null = null;
   protected disallowedReason: string | null = null;
+  protected hasSelectedSponsor = false;
   protected managerRole = PlayerRole.manager;
   protected isEnrolled$: Observable<boolean>;
   protected isManager$ = new Subject<boolean>();
@@ -75,11 +76,7 @@ export class PlayerEnrollComponent implements OnInit, OnDestroy {
         const localUser = this.localUserService.user$.value;
         const hasPlayerSession = (!!ctx.player.id && !!ctx.player.session && !ctx.player.session.isBefore);
 
-        this.canAdminEnroll = !!localUser && !hasPlayerSession &&
-          (
-            this.ctx.game.registration.isDuring ||
-            this.userService.canEnrollAndPlayOutsideExecutionWindow(localUser)
-          );
+        this.canAdminEnroll = !!localUser && !hasPlayerSession && this.userService.canEnrollAndPlayOutsideExecutionWindow(localUser);
 
         this.canStandardEnroll = !!localUser && !hasPlayerSession &&
           ctx.game.registration.isDuring && (
@@ -87,6 +84,8 @@ export class PlayerEnrollComponent implements OnInit, OnDestroy {
             !ctx.player.session ||
             ctx.player.session?.isBefore
           );
+
+        this.hasSelectedSponsor = !!ctx.user.sponsor?.id && !ctx.user.hasDefaultSponsor;
       })
     );
 
@@ -122,19 +121,20 @@ export class PlayerEnrollComponent implements OnInit, OnDestroy {
       });
   }
 
-  redeem(p: Player): void {
+  async redeem(p: Player): Promise<void> {
     const model = {
       playerId: p.id,
       code: this.token.split('/').pop()
     } as PlayerEnlistment;
 
-    const sub: Subscription = this.api.enlist(model).pipe(
-      tap(p => this.token = ''),
-      finalize(() => sub.unsubscribe())
-    ).subscribe(
-      p => this.enrolled(p),
-      err => this.errors.push(err)
-    );
+    try {
+      const enlistedPlayer = await firstValueFrom(this.api.enlist(model));
+      this.token = "";
+      this.enrolled(enlistedPlayer);
+    }
+    catch (err: any) {
+      this.errors.push(err);
+    }
   }
 
   update(p: Player): void {
diff --git a/projects/gameboard-ui/src/app/game/player-presence/player-presence.component.html b/projects/gameboard-ui/src/app/game/player-presence/player-presence.component.html
index bb970692..29d0a1c4 100644
--- a/projects/gameboard-ui/src/app/game/player-presence/player-presence.component.html
+++ b/projects/gameboard-ui/src/app/game/player-presence/player-presence.component.html
@@ -5,8 +5,8 @@
   <div *ngIf="ctx.player" class="team-leader d-flex align-items-center align-content-center">
     <app-player-avatar-list *ngIf="ctx.hasTeammates" [avatarUris]="ctx.avatarUris" [captainSession]="ctx.player.session"
       class="d-inline-block mr-4 my-2"></app-player-avatar-list>
-    <app-player-avatar *ngIf="!ctx.hasTeammates" [avatarUri]="ctx.player.sponsorLogo" [enableSessionStatus]="true"
-      [session]="ctx.player.session" class="d-inline-block mr-4 my-2"></app-player-avatar>
+    <app-player-avatar *ngIf="!ctx.hasTeammates" [avatarUri]="ctx.player.sponsor | sponsorToLogoUri"
+      [enableSessionStatus]="true" [session]="ctx.player.session" class="d-inline-block mr-4 my-2"></app-player-avatar>
     <div class="mr-2 team-leader-name">
       <p class="team-header">{{ ctx.hasTeammates ? "Team" : "Player" }}</p>
       <p class="team-leader-name-text">
@@ -21,7 +21,7 @@
       <li *ngFor="let teamMember of ctx.allPlayers"
         class="d-flex justify-content-center align-items-center align-content-center">
         <div class="avatar-status-container mr-4">
-          <app-player-avatar [avatarUri]="teamMember.sponsorLogo" [size]="'medium'"
+          <app-player-avatar [avatarUri]="teamMember.sponsor | sponsorToLogoUri" [size]="'medium'"
             [maxAvatarsInListView]="ctx.allPlayers.length" class="mr-4"></app-player-avatar>
         </div>
         <div class="player-name mr-auto align-middle fs-11 mb-4">
diff --git a/projects/gameboard-ui/src/app/game/player-presence/player-presence.component.ts b/projects/gameboard-ui/src/app/game/player-presence/player-presence.component.ts
index 997c4084..b878eeec 100644
--- a/projects/gameboard-ui/src/app/game/player-presence/player-presence.component.ts
+++ b/projects/gameboard-ui/src/app/game/player-presence/player-presence.component.ts
@@ -10,9 +10,9 @@ import { PlayerService } from '../../api/player.service';
 import { NotificationService } from '../../services/notification.service';
 import { GameHubService } from '../../services/signalR/game-hub.service';
 import { SyncStartService } from '../../services/sync-start.service';
-import { SimpleEntity } from '../../api/models';
 import { HubConnectionState } from '@microsoft/signalr';
 import { LogService } from '../../services/log.service';
+import { SponsorService } from '@/api/sponsor.service';
 
 interface PlayerPresenceContext {
   avatarUris: string[];
@@ -21,7 +21,6 @@ interface PlayerPresenceContext {
   allPlayers: HubPlayer[];
   player: HubPlayer;
   playerIsManager: boolean;
-  teamAvatar: string[],
   teamName: string;
 }
 
@@ -43,6 +42,7 @@ export class PlayerPresenceComponent implements OnInit {
     private hub: NotificationService,
     private log: LogService,
     private playerApi: PlayerService,
+    private sponsorService: SponsorService,
     private syncStartService: SyncStartService,
   ) { }
 
@@ -53,7 +53,6 @@ export class PlayerPresenceComponent implements OnInit {
       this.player$,
       this.gameHub.syncStartChanged$.pipe(startWith(null))
     ]).pipe(
-      // map(combo => combo as unknown as { 0: HubPlayer[], 1: HubPlayer, 2: SyncStartState }),
       map(combo => ({ hubState: combo[0], actors: combo[1], player: combo[2], syncStartState: combo[3] })),
       map(context => {
         if (!context.hubState || context.hubState.connectionState == HubConnectionState.Disconnected) {
@@ -67,14 +66,14 @@ export class PlayerPresenceComponent implements OnInit {
         }
 
         const actorInfo = this.findPlayerAndTeammates(context.player, context.actors);
+
         const ctx: PlayerPresenceContext = {
-          avatarUris: actorInfo.allPlayers.map(p => p.sponsorLogo),
+          avatarUris: actorInfo.allPlayers.map(p => this.sponsorService.resolveAbsoluteSponsorLogoUri(p.sponsor.logo)),
           hasTeammates: !!actorInfo.teammates.length,
           manager: actorInfo.manager,
           allPlayers: actorInfo.allPlayers,
           player: actorInfo.player,
           playerIsManager: !!actorInfo.manager && actorInfo.manager.id === actorInfo.player?.id,
-          teamAvatar: this.computeTeamAvatarList(actorInfo.allPlayers),
           teamName: actorInfo.manager?.approvedName || actorInfo.player?.approvedName || "",
         };
 
@@ -97,8 +96,6 @@ export class PlayerPresenceComponent implements OnInit {
   }
 
   private findPlayerAndTeammates(localPlayer: HubPlayer, players: HubPlayer[]) {
-    const player = players.find(p => p.id === localPlayer.id)!;
-
     // currently, the player's representation in the hub is incorrect for some reason - taking 
     // the object we have instead for now
     return {
@@ -109,13 +106,6 @@ export class PlayerPresenceComponent implements OnInit {
     };
   }
 
-  private computeTeamAvatarList(players: HubPlayer[]) {
-    if (!players?.length)
-      return [""];
-
-    return players.map(p => p.sponsorLogo);
-  }
-
   protected promoteToManager(localPlayer: Player, playerId: string) {
     this.hub.state$.pipe(first()).subscribe(s => {
       if (!s.id) {
diff --git a/projects/gameboard-ui/src/app/game/scoreboard-table/scoreboard-table.component.html b/projects/gameboard-ui/src/app/game/scoreboard-table/scoreboard-table.component.html
index 8ea2d0a4..08b4509b 100644
--- a/projects/gameboard-ui/src/app/game/scoreboard-table/scoreboard-table.component.html
+++ b/projects/gameboard-ui/src/app/game/scoreboard-table/scoreboard-table.component.html
@@ -16,7 +16,8 @@
       <tr *ngFor="let s of scores; trackBy:trackById">
         <td>{{s.rank}}</td>
         <td>
-          <app-imagestack [imagelist]="s.sponsorList" width="48px" [tooltip]="s.sponsorTooltip"></app-imagestack>
+          <app-imagestack [imagelist]="s.sponsors | sponsorsToLogoUris" width="48px"
+            [tooltip]="s.sponsors | simpleEntitiesToTooltip"></app-imagestack>
         </td>
         <td>
           <span *ngIf="s.advanced" class="text-success ml-2">
diff --git a/projects/gameboard-ui/src/app/game/scoreboard-table/scoreboard-table.component.ts b/projects/gameboard-ui/src/app/game/scoreboard-table/scoreboard-table.component.ts
index 01174a55..d5c3ac08 100644
--- a/projects/gameboard-ui/src/app/game/scoreboard-table/scoreboard-table.component.ts
+++ b/projects/gameboard-ui/src/app/game/scoreboard-table/scoreboard-table.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 { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { AfterViewInit, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { faStar } from '@fortawesome/free-solid-svg-icons';
 import { combineLatest, iif, interval, merge, Observable, Subject, timer } from 'rxjs';
 import { debounceTime, map, switchMap, tap } from 'rxjs/operators';
diff --git a/projects/gameboard-ui/src/app/home/home.module.ts b/projects/gameboard-ui/src/app/home/home.module.ts
index 27a8e8d2..250682f4 100644
--- a/projects/gameboard-ui/src/app/home/home.module.ts
+++ b/projects/gameboard-ui/src/app/home/home.module.ts
@@ -6,7 +6,6 @@ import { CommonModule } from '@angular/common';
 import { HomePageComponent } from './home-page/home-page.component';
 import { RouterModule } from '@angular/router';
 import { OidcComponent } from './oidc/oidc.component';
-import { ProfileComponent } from './profile/profile.component';
 import { NewsComponent } from './news/news.component';
 import { LandingComponent } from './landing/landing.component';
 import { ForbiddenComponent } from './forbidden/forbidden.component';
@@ -18,13 +17,12 @@ import { MarkdownModule } from 'ngx-markdown';
 import { FormsModule } from '@angular/forms';
 import { AuthGuard } from '../utility/auth.guard';
 import { TocPageComponent } from './toc-page/toc-page.component';
-import { ProfileHistoryComponent } from './profile-history/profile-history.component';
+import { ProfileHistoryComponent } from '../users/components/profile-history/profile-history.component';
 
 @NgModule({
   declarations: [
     HomePageComponent,
     OidcComponent,
-    ProfileComponent,
     NewsComponent,
     LandingComponent,
     ForbiddenComponent,
@@ -40,8 +38,6 @@ import { ProfileHistoryComponent } from './profile-history/profile-history.compo
           { path: '', pathMatch: 'full', redirectTo: '/home' },
           { path: 'login', component: LoginPageComponent },
           { path: 'oidc', component: OidcComponent },
-          { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard], title: "Profile" },
-          { path: 'profile/history', component: ProfileHistoryComponent, canActivate: [AuthGuard] },
           { path: 'doc/:id', component: TocPageComponent },
           { path: 'forbidden', component: ForbiddenComponent },
           { path: 'home', component: LandingComponent }
diff --git a/projects/gameboard-ui/src/app/home/profile/profile.component.html b/projects/gameboard-ui/src/app/home/profile/profile.component.html
deleted file mode 100644
index ade08980..00000000
--- a/projects/gameboard-ui/src/app/home/profile/profile.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- 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-profile-editor></app-profile-editor>
diff --git a/projects/gameboard-ui/src/app/home/profile/profile.component.ts b/projects/gameboard-ui/src/app/home/profile/profile.component.ts
deleted file mode 100644
index 4843233d..00000000
--- a/projects/gameboard-ui/src/app/home/profile/profile.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// 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 } from '@angular/core';
-
-@Component({
-  selector: 'app-profile',
-  templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss']
-})
-export class ProfileComponent { }
diff --git a/projects/gameboard-ui/src/app/home/toc-page/toc-page.component.html b/projects/gameboard-ui/src/app/home/toc-page/toc-page.component.html
index 93c4ce22..56cd5bc5 100644
--- a/projects/gameboard-ui/src/app/home/toc-page/toc-page.component.html
+++ b/projects/gameboard-ui/src/app/home/toc-page/toc-page.component.html
@@ -1,7 +1,6 @@
 <!-- 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 class="reader">
     <ng-container *ngIf="doc$ | async as doc; else loading">
         <markdown [data]="doc"></markdown>
@@ -9,7 +8,7 @@
 </div>
 
 <ng-template #loading>
-<div class="text-center">
-    <app-spinner></app-spinner>
-</div>
+    <div class="text-center">
+        <app-spinner></app-spinner>
+    </div>
 </ng-template>
diff --git a/projects/gameboard-ui/src/app/prac/components/practice-challenge-list/practice-challenge-list.component.html b/projects/gameboard-ui/src/app/prac/components/practice-challenge-list/practice-challenge-list.component.html
index 10e00353..2d5254bf 100644
--- a/projects/gameboard-ui/src/app/prac/components/practice-challenge-list/practice-challenge-list.component.html
+++ b/projects/gameboard-ui/src/app/prac/components/practice-challenge-list/practice-challenge-list.component.html
@@ -6,6 +6,21 @@ <h1 class="mb-4">Practice Area</h1>
     </p>
 
     <ng-container *ngIf="list$ | async as list; else loading">
+        <ng-container *ngIf="!(hasSponsor$ | async)">
+            <alert type="warning">
+                You haven't selected your sponsoring organization yet - you'll need to before you can play practice
+                challenges. Head over to your profile to select your sponsor, then return here to play!
+            </alert>
+        </ng-container>
+
+        <div class="suggested-searches-container my-4" *ngIf="suggestedSearches?.length">
+            <h2>Need a place to start?</h2>
+            Try some of these suggested searches:
+
+            <app-suggested-searches class="d-block mt-4" *ngIf="suggestedSearches?.length"
+                [searches]="suggestedSearches"></app-suggested-searches>
+        </div>
+
         <div class="input-group input-group-sm col-5 ml-auto mb-2 pr-0">
             <app-share-button class="d-block mr-1" size="small"
                 message="Copied a link to this search to your clipboard."
@@ -20,9 +35,10 @@ <h1 class="mb-4">Practice Area</h1>
                 [appQueryParamModel]="{ name: 'term', debounce: 500, resetQueryParams: ['skip', 'take'] }">
         </div>
 
-        <app-pager [skip]="skip || 0" [take]="take || 0" [count]="count" (changed)="paged($event)"></app-pager>
+        <app-pager *ngIf="count > 0" [skip]="skip || 0" [take]="take || 0" [count]="count"
+            (changed)="paged($event)"></app-pager>
 
-        <table class="table">
+        <table class="table" *ngIf="count > 0; else noMatches">
             <thead>
                 <tr>
                     <th>Challenge</th>
@@ -32,7 +48,12 @@ <h1 class="mb-4">Practice Area</h1>
             </thead>
             <tbody>
                 <tr *ngFor="let c of list">
-                    <td class="align-middle"><a [routerLink]="[c.id, slug(c.name)]">{{c.name}}</a>
+                    <td class="align-middle">
+                        <a *ngIf="hasSponsor$ | async" [routerLink]="[c.id, slug(c.name)]">
+                            {{c.name}}
+                        </a>
+                        <p *ngIf="!(hasSponsor$ | async)" class="p-0 m-0 text-success cursor-pointer"
+                            tooltip="Come back after selecting your sponsor to play this challenge.">{{c.name}}</p>
                     </td>
                     <td class="align-middle">{{c.description}}</td>
                     <td>
@@ -46,8 +67,9 @@ <h1 class="mb-4">Practice Area</h1>
             </tbody>
         </table>
 
-        <app-pager display="always" [skip]="skip || 0" [take]="take || 0" [count]="count"
-            (changed)="paged($event)"></app-pager>
+        <app-pager *ngIf="count > 0" display="always" [skip]="skip || 0" [take]="take || 0" [count]="count"
+            (changed)="paged($event)">
+        </app-pager>
     </ng-container>
 </div>
 
@@ -56,3 +78,13 @@ <h1 class="mb-4">Practice Area</h1>
         <app-spinner>Loading practice challenges...</app-spinner>
     </div>
 </ng-template>
+
+<ng-template #challengeNameNoLink let-challengeName="challengeName">
+    <p>{{challengeName}}</p>
+</ng-template>
+
+<ng-template #noMatches>
+    <div class="text-center mt-5">
+        No challenges meet your search criteria. Try again with a new search term.
+    </div>
+</ng-template>
diff --git a/projects/gameboard-ui/src/app/prac/components/practice-challenge-list/practice-challenge-list.component.ts b/projects/gameboard-ui/src/app/prac/components/practice-challenge-list/practice-challenge-list.component.ts
index 6ea49ffb..80f63c9d 100644
--- a/projects/gameboard-ui/src/app/prac/components/practice-challenge-list/practice-challenge-list.component.ts
+++ b/projects/gameboard-ui/src/app/prac/components/practice-challenge-list/practice-challenge-list.component.ts
@@ -2,7 +2,6 @@ import { Search } from '@/api/models';
 import { SpecSummary } from '@/api/spec-models';
 import { PracticeService } from '@/services/practice.service';
 import { RouterService } from '@/services/router.service';
-import { UnsubscriberService } from '@/services/unsubscriber.service';
 import { UserService as LocalUserService } from "@/utility/user.service";
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
@@ -20,8 +19,11 @@ export class PracticeChallengeListComponent {
   search$ = new BehaviorSubject<Search>({});
   appname = '';
   faSearch = faSearch;
+
+  protected hasSponsor$: Observable<boolean>;
   protected localUserId?: string;
   protected introTextMarkdown = "";
+  protected suggestedSearches: string[] = [];
 
   term = "";
   count = 0;
@@ -35,10 +37,15 @@ export class PracticeChallengeListComponent {
     route: ActivatedRoute,
     private api: PracticeService,
     private localUser: LocalUserService,
-    private routerService: RouterService,
-    private unsub: UnsubscriberService,
+    private routerService: RouterService
   ) {
-    this.list$ = this.search$.pipe(
+
+    this.list$ = route.queryParams.pipe(
+      map(queryParams => ({
+        skip: queryParams.skip,
+        take: queryParams.take || PracticeChallengeListComponent.DEFAULT_PAGE_SIZE,
+        term: queryParams.term,
+      } as Search)),
       switchMap(m => api.searchChallenges(m)),
       tap(r => {
         this.count = r.results.paging.itemCount;
@@ -49,17 +56,14 @@ export class PracticeChallengeListComponent {
       map(results => results.results.items)
     );
 
-    this.unsub.add(
-      route.queryParams.subscribe(params => this.search({ ...params } as Search))
-    );
-
-    this.search({ ...route.snapshot.queryParams } as Search);
+    this.hasSponsor$ = localUser.user$.pipe(map(u => !!u?.sponsor && !u.hasDefaultSponsor));
   }
 
   async ngOnInit(): Promise<void> {
     this.localUserId = this.localUser.user$.value?.id;
     const settings = await firstValueFrom(this.api.getSettings());
     this.introTextMarkdown = settings.introTextMarkdown;
+    this.suggestedSearches = settings.suggestedSearches;
   }
 
   paged(s: number): void {
@@ -69,10 +73,4 @@ export class PracticeChallengeListComponent {
       }
     });
   }
-
-  private search(search: Search) {
-    search.take = search.take || PracticeChallengeListComponent.DEFAULT_PAGE_SIZE;
-    search.term = search.term || "";
-    this.search$.next({ ...search });
-  }
 }
diff --git a/projects/gameboard-ui/src/app/prac/components/practice-session/practice-session.component.html b/projects/gameboard-ui/src/app/prac/components/practice-session/practice-session.component.html
index 19ea5ce4..73589c6b 100644
--- a/projects/gameboard-ui/src/app/prac/components/practice-session/practice-session.component.html
+++ b/projects/gameboard-ui/src/app/prac/components/practice-session/practice-session.component.html
@@ -17,6 +17,7 @@
       <markdown *ngIf="showSpecMarkdown" [data]="spec.text" class="d-block mb-5"></markdown>
 
       <div *ngIf="!isStartingSession" class="challenge-management-buttons d-flex justify-content-center">
+
         <app-confirm-button *ngIf="!isDeploying && !(activePracticeChallenge$ | async)"
           btnClass="btn btn-lg btn-info px-4" (confirm)="play(spec.gameId)" class="d-block">
           <span>Start Practice Session</span>
diff --git a/projects/gameboard-ui/src/app/prac/components/suggested-searches/suggested-searches.component.html b/projects/gameboard-ui/src/app/prac/components/suggested-searches/suggested-searches.component.html
new file mode 100644
index 00000000..a636a4fc
--- /dev/null
+++ b/projects/gameboard-ui/src/app/prac/components/suggested-searches/suggested-searches.component.html
@@ -0,0 +1,4 @@
+<div class="suggested-searches-component d-flex flex-wrap w-100">
+    <app-colored-text-chip *ngFor="let search of searches" [text]="search" [isClickable]="true" size="small"
+        (click)="handleSearchClick($event)"></app-colored-text-chip>
+</div>
diff --git a/projects/gameboard-ui/src/app/admin/practice/practice-challenges/practice-challenges.component.scss b/projects/gameboard-ui/src/app/prac/components/suggested-searches/suggested-searches.component.scss
similarity index 100%
rename from projects/gameboard-ui/src/app/admin/practice/practice-challenges/practice-challenges.component.scss
rename to projects/gameboard-ui/src/app/prac/components/suggested-searches/suggested-searches.component.scss
diff --git a/projects/gameboard-ui/src/app/prac/components/suggested-searches/suggested-searches.component.ts b/projects/gameboard-ui/src/app/prac/components/suggested-searches/suggested-searches.component.ts
new file mode 100644
index 00000000..00b8ab62
--- /dev/null
+++ b/projects/gameboard-ui/src/app/prac/components/suggested-searches/suggested-searches.component.ts
@@ -0,0 +1,18 @@
+import { ColoredTextChipEvent } from '@/core/components/colored-text-chip/colored-text-chip.component';
+import { RouterService } from '@/services/router.service';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-suggested-searches',
+  templateUrl: './suggested-searches.component.html',
+  styleUrls: ['./suggested-searches.component.scss']
+})
+export class SuggestedSearchesComponent {
+  @Input() searches: string[] = [];
+
+  constructor(private routerService: RouterService) { }
+
+  protected handleSearchClick(event: ColoredTextChipEvent) {
+    this.routerService.toPracticeAreaWithSearch(event.text);
+  }
+}
diff --git a/projects/gameboard-ui/src/app/prac/prac.module.ts b/projects/gameboard-ui/src/app/prac/prac.module.ts
index a1edce2a..96968a46 100644
--- a/projects/gameboard-ui/src/app/prac/prac.module.ts
+++ b/projects/gameboard-ui/src/app/prac/prac.module.ts
@@ -13,6 +13,7 @@ import { PracticeChallengeListComponent } from './components/practice-challenge-
 import { PracticeSessionComponent } from './components/practice-session/practice-session.component';
 import { PracticeChallengeStateSummaryComponent } from './components/practice-challenge-state-summary/practice-challenge-state-summary.component';
 import { PracticeChallengeSolvedModalComponent } from './components/practice-challenge-solved-modal/practice-challenge-solved-modal.component';
+import { SuggestedSearchesComponent } from './components/suggested-searches/suggested-searches.component';
 
 @NgModule({
   declarations: [
@@ -21,6 +22,7 @@ import { PracticeChallengeSolvedModalComponent } from './components/practice-cha
     PracticePageComponent,
     PracticeSessionComponent,
     PracticeChallengeSolvedModalComponent,
+    SuggestedSearchesComponent,
   ],
   imports: [
     CommonModule,
diff --git a/projects/gameboard-ui/src/app/prac/practice.models.ts b/projects/gameboard-ui/src/app/prac/practice.models.ts
index 52b9bf4e..25c89d9a 100644
--- a/projects/gameboard-ui/src/app/prac/practice.models.ts
+++ b/projects/gameboard-ui/src/app/prac/practice.models.ts
@@ -16,4 +16,5 @@ export interface PracticeModeSettings {
     introTextMarkdown: string;
     maxConcurrentPracticeSessions: number | null;
     maxPracticeSessionLengthMinutes: number | null;
+    suggestedSearches: string[];
 }
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-challenge-spec/parameter-challenge-spec.component.html b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-challenge-spec/parameter-challenge-spec.component.html
deleted file mode 100644
index 5210eec5..00000000
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-challenge-spec/parameter-challenge-spec.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="parameter-challenge-spec-component report-parameter" *ngIf="specs$ | async as specs">
-    <label for="spec" class="report-component-label">Challenge</label>
-    <select class="form-control form-select" name="spec" aria-label="Challenge select" [disabled]="!specs.length"
-        [(ngModel)]="ngModel">
-        <option [value]="undefined" selected>[any challenge]</option>
-        <option *ngFor="let spec of specs" [value]="spec.id">{{spec.name}}
-        </option>
-    </select>
-</div>
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-challenge-spec/parameter-challenge-spec.component.scss b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-challenge-spec/parameter-challenge-spec.component.scss
deleted file mode 100644
index 8b137891..00000000
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-challenge-spec/parameter-challenge-spec.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-challenge-spec/parameter-challenge-spec.component.ts b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-challenge-spec/parameter-challenge-spec.component.ts
deleted file mode 100644
index fab5b631..00000000
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-challenge-spec/parameter-challenge-spec.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges, forwardRef } from '@angular/core';
-import { SimpleEntity } from '../../../../api/models';
-import { Observable } from 'rxjs';
-import { ReportsService } from '../../../reports.service';
-import { CustomInputComponent, createCustomInputControlValueAccessor } from '@/core/components/custom-input/custom-input.component';
-
-@Component({
-  selector: 'app-parameter-challenge-spec',
-  templateUrl: './parameter-challenge-spec.component.html',
-  styleUrls: ['./parameter-challenge-spec.component.scss'],
-  providers: [createCustomInputControlValueAccessor(ParameterChallengeSpecComponent)]
-})
-export class ParameterChallengeSpecComponent extends CustomInputComponent<string> implements OnChanges, OnInit {
-  @Input() gameId?: string;
-  specs$?: Observable<SimpleEntity[]>;
-
-  constructor(private reportsService: ReportsService) {
-    super();
-  }
-
-  ngOnInit(): void {
-    this.loadChallengeSpecs(this.gameId);
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    this.loadChallengeSpecs(this.gameId);
-  }
-
-  private loadChallengeSpecs(gameId?: string) {
-    this.specs$ = this.reportsService.getChallengeSpecs(this.gameId);
-  }
-}
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-series/parameter-series.component.html b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-series/parameter-series.component.html
deleted file mode 100644
index 39ff3bb3..00000000
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-series/parameter-series.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="parameter-series-component report-parameter" *ngIf="series$ | async as series">
-    <label for="series" class="report-component-label">Series</label>
-    <select class="form-control form-select" name="series" aria-label="Series select" [(ngModel)]="ngModel">
-        <option [value]="undefined" selected>[any series]</option>
-        <option *ngFor="let series of series$ | async" [value]="series">
-            {{series}}
-        </option>
-    </select>
-</div>
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-series/parameter-series.component.ts b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-series/parameter-series.component.ts
deleted file mode 100644
index 1f1f92ac..00000000
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-series/parameter-series.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-import { ReportsService } from '../../../reports.service';
-import { Observable } from 'rxjs';
-import { CustomInputComponent, createCustomInputControlValueAccessor } from '@/core/components/custom-input/custom-input.component';
-
-@Component({
-  selector: 'app-parameter-series',
-  templateUrl: './parameter-series.component.html',
-  styleUrls: ['./parameter-series.component.scss'],
-  providers: [createCustomInputControlValueAccessor(ParameterSeriesComponent)]
-})
-export class ParameterSeriesComponent extends CustomInputComponent<string> {
-  series$: Observable<string[]>;
-
-  constructor(private reportsService: ReportsService) {
-    super();
-    this.series$ = this.reportsService.getSeries();
-  }
-}
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.html b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.html
index a79ac5c1..9e7c5076 100644
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.html
@@ -1,7 +1,63 @@
-<div class="report-control parameter-sponsor-component">
-    <label for="sponsor" class="report-component-label">Sponsor</label>
-    <select class="form-control" [(ngModel)]="ngModel">
-        <option [ngValue]="undefined">[any sponsor]</option>
-        <option *ngFor="let sponsor of sponsors$ | async" [ngValue]="sponsor.id">{{sponsor.name}}</option>
-    </select>
+<div class="parameter-sponsor-component" *ngIf="allSponsors?.length">
+    <label class="report-component-label">Sponsor</label>
+    <div class="search-scroll-container d-flex flex-column">
+        <div class="search-container flex-grow-0 flex-shrink-0 mb-1" *ngIf="showSearchBoxThreshold">
+            <div class="input-group">
+                <input type="text" class="form-control" autocomplete="off" placeholder="Search sponsors"
+                    [(ngModel)]="searchText">
+
+                <div class="input-group-append" *ngIf="searchText">
+                    <button type="button" class="btn btn-info" (click)="searchText = ''" tooltip="Clear this search box"
+                        placement="bottom">
+                        <fa-icon [icon]="fa.eraser"></fa-icon>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div class="form-control scroll-container flex-grow-1">
+            <div *ngFor="let sponsor of allSponsors; let i = index">
+                <ng-container *ngIf="getOptionVisibility(sponsor)">
+                    <input class="checkbox-input" type="checkbox" [value]="sponsor"
+                        [checked]="getOptionIsChecked(sponsor)" [id]="'sponsor-select-' + sponsor.id"
+                        (change)="handleCheckedChanged(sponsor, $event)">
+                    <label class="checkbox-label pl-2" [for]="'sponsor-select-' + sponsor.id">
+                        {{ sponsor.name }}
+                    </label>
+                </ng-container>
+
+                <div class="child-sponsors-container ml-4" *ngIf="sponsor.childSponsors.length">
+                    <ng-container *ngFor="let childSponsor of sponsor.childSponsors">
+                        <div *ngIf="getOptionVisibility(childSponsor)">
+                            <input class="checkbox-input" type="checkbox" [value]="childSponsor"
+                                [checked]="getOptionIsChecked(childSponsor)" [id]="'sponsor-select-' + childSponsor.id"
+                                (change)="handleCheckedChanged(childSponsor, $event)">
+                            <label class="checkbox-label pl-2" [for]="'sponsor-select-' + childSponsor.id">
+                                {{ childSponsor.name }}
+                            </label>
+                        </div>
+                    </ng-container>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div *ngIf="selectedSponsors.length && allSponsors.length > showSelectionSummaryThreshold"
+        class="d-flex align-items-center full-width mt-1">
+        <p class="flex-grow-1 m-0">
+            <strong>Selected: </strong>
+            {{ selectionSummary }}
+            <span class="over-threshold-note link-button" (click)="handleSelectedOverDisplayThresholdClicked()"
+                *ngIf="countSelectedOverDisplayThreshold > 0">
+                and {{ countSelectedOverDisplayThreshold }} other
+                item{{ countSelectedOverDisplayThreshold != 1 ? "s": ""}}
+            </span>
+        </p>
+
+        <button type="button" class="btn btn-info ml-1" (click)="handleClearClicked()">Clear</button>
+    </div>
 </div>
+
+<ng-template #defaultItemTemplate let-context>
+    {{ context }}
+</ng-template>
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.scss b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.scss
index e69de29b..eb494909 100644
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.scss
+++ b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.scss
@@ -0,0 +1,4 @@
+.scroll-container {
+    min-height: 10rem;
+    overflow-y: auto;
+}
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
index 837ed82a..31387f49 100644
--- a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/parameters/parameter-sponsor/parameter-sponsor.component.ts
@@ -1,20 +1,164 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+import { fa } from "@/services/font-awesome.service";
+import { Sponsor, SponsorWithChildSponsors } from '@/api/sponsor-models';
 import { SponsorService } from '@/api/sponsor.service';
-import { Observable } from 'rxjs';
-import { Sponsor } from '@/api/sponsor-models';
-import { CustomInputComponent, createCustomInputControlValueAccessor } from '@/core/components/custom-input/custom-input.component';
+import { MarkdownHelpersService } from '@/services/markdown-helpers.service';
+import { ModalConfirmService } from '@/services/modal-confirm.service';
+import { UnsubscriberService } from '@/services/unsubscriber.service';
+import { ActivatedRoute, Params } from '@angular/router';
+import { RouterService } from '@/services/router.service';
+import { unique } from 'projects/gameboard-ui/src/tools';
 
 @Component({
   selector: 'app-parameter-sponsor',
   templateUrl: './parameter-sponsor.component.html',
-  styleUrls: ['./parameter-sponsor.component.scss'],
-  providers: [createCustomInputControlValueAccessor(ParameterSponsorComponent)]
+  styleUrls: ['./parameter-sponsor.component.scss']
 })
-export class ParameterSponsorComponent extends CustomInputComponent<string> {
-  sponsors$: Observable<Sponsor[]>;
+export class ParameterSponsorComponent implements OnInit {
+  @Input() queryParamName = "sponsors";
+  @Input() searchText = "";
+  @Input() showSearchBoxThreshold = 6;
+  @Input() showSelectionSummaryThreshold = 0;
 
-  constructor(private sponsorService: SponsorService) {
-    super();
-    this.sponsors$ = sponsorService.list();
+  protected selectedItemsDisplayedThreshold = 4;
+  protected countSelectedOverDisplayThreshold = 0;
+  protected fa = fa;
+  protected selectionSummary = "";
+  protected allSponsors: SponsorWithChildSponsors[] = [];
+  private static QUERYSTRING_VALUE_DELIMITER = ",";
+
+  constructor(
+    private markdownHelpers: MarkdownHelpersService,
+    private modalService: ModalConfirmService,
+    private route: ActivatedRoute,
+    private routerService: RouterService,
+    private sponsorService: SponsorService,
+    private unsub: UnsubscriberService) { }
+
+  async ngOnInit(): Promise<void> {
+    this.allSponsors = await firstValueFrom(this.sponsorService.listWithChildren());
+
+    this.unsub.add(
+      this.route.queryParamMap.subscribe(async p => {
+        const queryParamSponsorIds = (p.get(this.queryParamName) || "")
+          .split(ParameterSponsorComponent.QUERYSTRING_VALUE_DELIMITER);
+
+        await this.updateSelectedSponsors(
+          queryParamSponsorIds
+            .map(id => this.getSponsorForId(id))
+            .filter(s => !!s) as Sponsor[]
+        );
+      })
+    );
+  }
+
+  protected get selectedSponsors(): Sponsor[] {
+    const paramValue = this.route.snapshot.queryParamMap.get(this.queryParamName);
+    if (!paramValue)
+      return [];
+
+    const parsedParamValue = paramValue.split(ParameterSponsorComponent.QUERYSTRING_VALUE_DELIMITER);
+    return parsedParamValue
+      .map(v => this.getSponsorForId(v))
+      .filter(s => !!s) as Sponsor[];
+  }
+
+  updateSelectionSummary(selectedItemValues: Sponsor[]): void {
+    if (!selectedItemValues?.length) {
+      this.selectionSummary = "";
+      this.countSelectedOverDisplayThreshold = 0;
+      return;
+    }
+
+    const summary = this.selectedSponsors
+      .map(i => i.name)
+      .slice(0, this.selectedItemsDisplayedThreshold).join(", ");
+
+    this.countSelectedOverDisplayThreshold = Math.max(selectedItemValues.length - this.selectedItemsDisplayedThreshold, 0);
+    this.selectionSummary = summary;
+  }
+
+  async handleCheckedChanged(option: Sponsor | SponsorWithChildSponsors, event: any) {
+    const isChecked = (event.target as any).checked;
+    const sponsorsToAddOrRemove = [option];
+
+    // if a parent is being checked/unchecked, adjust its children to have the same selection
+    for (const childSponsor of (option as SponsorWithChildSponsors).childSponsors || []) {
+      sponsorsToAddOrRemove.push(childSponsor);
+    }
+
+    if (!isChecked) {
+      // if the box isn't checked, we must be removing an item
+      await this.updateSelectedSponsors([...this.selectedSponsors.filter(s => !sponsorsToAddOrRemove.some(toRemove => toRemove.id === s.id))]);
+      return;
+    } else {
+      // if we're not removing, we must be adding
+      await this.updateSelectedSponsors([...this.selectedSponsors, ...sponsorsToAddOrRemove]);
+    }
+  }
+
+  protected getOptionIsChecked(option: Sponsor) {
+    return this.selectedSponsors.some(s => s.id === option.id) || false;
+  }
+
+  protected getOptionVisibility(option: Sponsor) {
+    if (!this.searchText) {
+      return true;
+    }
+
+    const optionText = option.name.toLowerCase();
+    return optionText.indexOf(this.searchText.toLowerCase()) >= 0;
+  }
+
+  protected async handleClearClicked() {
+    await this.updateSelectedSponsors([]);
+  }
+
+  protected handleSelectedOverDisplayThresholdClicked() {
+    const displaySelectedOptions = this
+      .selectedSponsors
+      .map(o => o.name);
+
+    // sort works in place, so we have to do this separately
+    displaySelectedOptions.sort();
+
+    // then transform to markdown so we can render as a bulleted list
+    this.modalService.openConfirm({
+      title: `Selected Sponsors`,
+      hideCancel: true,
+      renderBodyAsMarkdown: true,
+      bodyContent: this.markdownHelpers.arrayToBulletList(displaySelectedOptions)
+    });
+  }
+
+  // we use this to constrain or resolve ids coming into/out of the query string and line them up with real sponsors
+  // it's a little trickier than a single statement because some sponsors have child sponsors, so we have to check
+  // those too
+  private getSponsorForId(sponsorId: string): Sponsor | null {
+    for (let sponsor of this.allSponsors) {
+      if (sponsor.id === sponsorId) {
+        return sponsor;
+      }
+
+      const childWithThisId = sponsor.childSponsors.find(c => c.id === sponsorId);
+      if (childWithThisId)
+        return childWithThisId;
+    }
+
+    return null;
+  }
+
+  private async updateSelectedSponsors(value: Sponsor[]): Promise<void> {
+    const validSponsorIds = unique(
+      value
+        .map(v => v.id)
+        .filter(sId => !!this.getSponsorForId(sId))
+    );
+
+    const params: Params = {};
+    params[this.queryParamName] = validSponsorIds.join(ParameterSponsorComponent.QUERYSTRING_VALUE_DELIMITER);
+    await this.routerService.updateQueryParams({ parameters: params });
+    this.updateSelectionSummary(this.selectedSponsors);
   }
 }
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.html b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.html
index 6dfd0336..877eef34 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.html
@@ -9,9 +9,7 @@
         <app-multi-select label="Games" name="games" [options]="games$ | async" [(ngModel)]="gamesQueryModel"
             [itemTemplate]="multiSelectGame" [getSearchText]="displayGameName"
             [value]="getGameValue"></app-multi-select>
-        <app-multi-select label="Sponsors" name="sponsors" ngDefaultControl [options]="sponsors$ | async"
-            [(ngModel)]="sponsorsQueryModel" [itemTemplate]="multiSelectSponsor" [getSearchText]="displaySponsorName"
-            [value]="getSponsorValue"></app-multi-select>
+        <app-parameter-sponsor name="sponsors" ngDefaultControl></app-parameter-sponsor>
         <app-parameter-date-range label="Enrollment Date" ngDefaultControl
             [(ngModel)]="enrollmentDateRangeModel"></app-parameter-date-range>
     </app-report-parameters-container>
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts
index 18f72694..5a59cf64 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { EnrollmentReportFlatParameters, EnrollmentReportParameters, EnrollmentReportRecord, EnrollmentReportStatSummary } from './enrollment-report.models';
-import { ReportResults, ReportResultsWithOverallStats, ReportSponsor, ReportViewUpdate } from '@/reports/reports-models';
+import { ReportResultsWithOverallStats, ReportSponsor, ReportViewUpdate } from '@/reports/reports-models';
 import { EnrollmentReportService } from '@/reports/components/reports/enrollment-report/enrollment-report.service';
 import { Observable, firstValueFrom, of } from 'rxjs';
 import { SimpleEntity } from '@/api/models';
@@ -27,7 +27,6 @@ export class EnrollmentReportComponent extends ReportComponentBase<EnrollmentRep
   games$ = this.reportsService.getGames();
   seasons$ = this.reportsService.getSeasons();
   series$ = this.reportsService.getSeries();
-  sponsors$ = this.reportsService.getSponsors();
   tracks$ = this.reportsService.getTracks();
 
   protected ctx$?: Observable<EnrollmentReportContext>;
@@ -67,13 +66,6 @@ export class EnrollmentReportComponent extends ReportComponentBase<EnrollmentRep
     paramName: "series"
   });
 
-  protected sponsorsQueryModel: MultiSelectQueryParamModel<ReportSponsor> | null = new MultiSelectQueryParamModel<ReportSponsor>({
-    paramName: "sponsors",
-    options: firstValueFrom(this.reportsService.getSponsors()),
-    serializer: (value: ReportSponsor) => value.id,
-    deserializer: (value: string, options?: ReportSponsor[]) => options!.find(s => s.id === value) || null
-  });
-
   protected tracksQueryModel: MultiSelectQueryParamModel<string> | null = new MultiSelectQueryParamModel<string>({
     paramName: "tracks"
   });
@@ -89,7 +81,6 @@ export class EnrollmentReportComponent extends ReportComponentBase<EnrollmentRep
         this.gamesQueryModel!.searchText = undefined;
         this.seasonsQueryModel!.searchText = undefined;
         this.seriesQueryModel!.searchText = undefined;
-        this.sponsorsQueryModel!.searchText = undefined;
         this.tracksQueryModel!.searchText = undefined;
       })
     );
@@ -140,7 +131,6 @@ export class EnrollmentReportComponent extends ReportComponentBase<EnrollmentRep
           scales: {
             x: {
               type: 'time',
-              // distribution: 'series',
               time: {
                 displayFormats: {
                   day: "MM/dd/yy",
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.component.html b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.component.html
index 4ece4115..5d759ccf 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.component.html
@@ -10,9 +10,7 @@
             [itemTemplate]="multiSelectGame" [value]="getGameValue" [getSearchText]="getGameSearchText"
             [(ngModel)]="gamesQueryModel">
         </app-multi-select>
-        <app-multi-select label="Sponsors" name="sponsors" ngDefaultControl [options]="sponsors$ | async"
-            [(ngModel)]="sponsorsQueryModel" [itemTemplate]="multiSelectSponsor" [getSearchText]="getSponsorSearchText"
-            [value]="getSponsorValue"></app-multi-select>
+        <app-parameter-sponsor ngDefaultControl></app-parameter-sponsor>
         <app-parameter-date-range label="Practice Session Date" ngDefaultControl
             [(ngModel)]="practiceDateQueryModel"></app-parameter-date-range>
     </app-report-parameters-container>
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.component.ts b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.component.ts
index 118dbe38..ef211723 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.component.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/practice-mode-report/practice-mode-report.component.ts
@@ -8,8 +8,6 @@ import { PracticeModeReportService } from '@/reports/components/reports/practice
 import { DateRangeQueryParamModel } from '@/core/models/date-range-query-param.model';
 import { MultiSelectQueryParamModel } from '@/core/models/multi-select-query-param.model';
 import { ReportSummaryStat } from '../../report-stat-summary/report-stat-summary.component';
-import { ActiveReportService } from '@/reports/services/active-report.service';
-import { UnsubscriberService } from '@/services/unsubscriber.service';
 
 @Component({
   selector: 'app-practice-mode-report',
@@ -58,12 +56,6 @@ export class PracticeModeReportComponent
     paramName: "series"
   });
 
-  protected sponsorsQueryModel: MultiSelectQueryParamModel<ReportSponsor> | null = new MultiSelectQueryParamModel<ReportSponsor>({
-    paramName: "sponsors",
-    options: firstValueFrom(this.reportsService.getSponsors()),
-    serializer: (value: ReportSponsor) => value.id,
-    deserializer: (value: string, options?: ReportSponsor[]) => options!.find(s => s.id === value) || null
-  });
 
   protected tracksQueryModel: MultiSelectQueryParamModel<string> | null = new MultiSelectQueryParamModel<string>({
     paramName: "tracks"
@@ -77,7 +69,6 @@ export class PracticeModeReportComponent
         this.gamesQueryModel!.searchText = undefined;
         this.seasonsQueryModel!.searchText = undefined;
         this.seriesQueryModel!.searchText = undefined;
-        this.sponsorsQueryModel!.searchText = undefined;
         this.tracksQueryModel!.searchText = undefined;
       })
     );
diff --git a/projects/gameboard-ui/src/app/reports/reports.module.ts b/projects/gameboard-ui/src/app/reports/reports.module.ts
index f8439709..22bb4422 100644
--- a/projects/gameboard-ui/src/app/reports/reports.module.ts
+++ b/projects/gameboard-ui/src/app/reports/reports.module.ts
@@ -3,15 +3,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { CoreModule } from '../core/core.module';
-import { UtilityModule } from '../utility/utility.module';
 import { ChallengeAttemptSummaryComponent } from './components/challenge-attempt-summary/challenge-attempt-summary.component';
 import { ChallengeOrGameFieldComponent } from './components/challenge-or-game-field/challenge-or-game-field.component';
 import { NoReportRecordsComponent } from './components/no-report-records/no-report-records.component';
 import { ParameterChangeLinkComponent } from './components/parameter-change-link/parameter-change-link.component';
-import { ParameterChallengeSpecComponent } from './components/parameters/parameter-challenge-spec/parameter-challenge-spec.component';
 import { ParameterDateRangeComponent } from './components/parameters/parameter-date-range/parameter-date-range.component';
 import { ParameterGameChallengespecComponent } from './components/parameters/parameter-game-challengespec/parameter-game-challengespec.component';
-import { ParameterSeriesComponent } from './components/parameters/parameter-series/parameter-series.component';
 import { ParameterSponsorComponent } from './components/parameters/parameter-sponsor/parameter-sponsor.component';
 import { ParameterTicketLabelsComponent } from './components/parameters/parameter-ticket-labels/parameter-ticket-labels.component';
 import { ParameterTicketStatusComponent } from './components/parameters/parameter-ticket-status/parameter-ticket-status.component';
@@ -51,11 +48,9 @@ import { PlayerChallengeAttemptsModalComponent } from './components/player-chall
     CountToTooltipClassPipe,
     ChallengeAttemptSummaryComponent,
     EnrollmentReportComponent,
-    ParameterChallengeSpecComponent,
     MsToDurationPipe,
     ParameterGameChallengespecComponent,
     ParameterDateRangeComponent,
-    ParameterSeriesComponent,
     ParameterTicketLabelsComponent,
     ParameterTicketStatusComponent,
     ParameterTimespanPickerComponent,
@@ -66,7 +61,6 @@ import { PlayerChallengeAttemptsModalComponent } from './components/player-chall
     ReportParametersContainerComponent,
     ReportSelectComponent,
     ReportsHomeComponent,
-    ParameterSponsorComponent,
     SupportReportComponent,
     SupportReportContextMenuComponent,
     PracticeModeReportComponent,
@@ -81,6 +75,7 @@ import { PlayerChallengeAttemptsModalComponent } from './components/player-chall
     PlayerModePerformanceSummaryComponent,
     ReportStatSummaryComponent,
     PlayerChallengeAttemptsModalComponent,
+    ParameterSponsorComponent,
   ],
   imports: [
     CommonModule,
diff --git a/projects/gameboard-ui/src/app/services/font-awesome.service.ts b/projects/gameboard-ui/src/app/services/font-awesome.service.ts
index 107d9fbc..382a91a2 100644
--- a/projects/gameboard-ui/src/app/services/font-awesome.service.ts
+++ b/projects/gameboard-ui/src/app/services/font-awesome.service.ts
@@ -29,6 +29,7 @@ import {
   faList,
   faLongArrowAltDown,
   faPaperclip,
+  faPlus,
   faSearch,
   faShare,
   faShareAlt,
@@ -36,6 +37,8 @@ import {
   faStar,
   faSyncAlt,
   faTimes,
+  faToggleOff,
+  faToggleOn,
   faTrash,
   faTriangleExclamation,
   faTv,
@@ -71,6 +74,7 @@ export const fa = {
   list: faList,
   gear: faGear,
   paperclip: faPaperclip,
+  plus: faPlus,
   search: faSearch,
   share: faShare,
   shareAlt: faShareAlt,
@@ -78,6 +82,8 @@ export const fa = {
   square: faSquare,
   sync: faSyncAlt,
   times: faTimes,
+  toggleOff: faToggleOff,
+  toggleOn: faToggleOn,
   trash: faTrash,
   triangleExclamation: faTriangleExclamation,
   tv: faTv,
diff --git a/projects/gameboard-ui/src/app/services/modal-confirm.service.ts b/projects/gameboard-ui/src/app/services/modal-confirm.service.ts
index af7e1856..1fdb832e 100644
--- a/projects/gameboard-ui/src/app/services/modal-confirm.service.ts
+++ b/projects/gameboard-ui/src/app/services/modal-confirm.service.ts
@@ -44,18 +44,12 @@ export class ModalConfirmService implements OnDestroy {
     return this.bsModalService.show(config.content, {
       initialState: { context: { ...config.context } } as unknown as Partial<TComponent>,
       class: config.modalClasses?.join(" ") || "modal-dialog-centered",
+      // backdrop: config.isBackdropStatic ? "static" : false,
+      ignoreBackdropClick: config.ignoreBackdropClick || false,
       scrollable: true
     } as ModalOptions<TComponent>);
   }
 
-  private onHidden(onCancel?: Function, suppressOnCancel = false): void {
-    if (!suppressOnCancel && !!onCancel) {
-      onCancel();
-    }
-
-    this.cleanupModalRef();
-  }
-
   private cleanupModalRef(): void {
     this.bsModalRef = undefined;
   }
diff --git a/projects/gameboard-ui/src/app/services/notification.service.ts b/projects/gameboard-ui/src/app/services/notification.service.ts
index d03aadd4..3e5c0853 100644
--- a/projects/gameboard-ui/src/app/services/notification.service.ts
+++ b/projects/gameboard-ui/src/app/services/notification.service.ts
@@ -79,9 +79,7 @@ export class NotificationService {
         pendingName: p.userName === p.userApprovedName ? p.userName : '',
         userNameStatus: p.nameStatus,
         session: p.sessionBegin && p.sessionEnd ? new TimeWindow(p.sessionBegin, p.sessionEnd) : undefined,
-        sponsorLogo: p.sponsor ?
-          `${this.config.imagehost}/${p.sponsor}`
-          : `${this.config.basehref}assets/sponsor.svg`
+        sponsor: p.sponsor,
       });
     });
 
@@ -200,7 +198,7 @@ export class NotificationService {
       return await this.connection.invoke(message, ...args);
     }
     catch (ex) {
-      this.log.logError("Error on message send:", message, args);
+      this.log.logError("Error on message send:", message, args, ex);
       throw ex;
     }
   }
diff --git a/projects/gameboard-ui/src/app/services/router.service.ts b/projects/gameboard-ui/src/app/services/router.service.ts
index 478b96ba..b1201d00 100644
--- a/projects/gameboard-ui/src/app/services/router.service.ts
+++ b/projects/gameboard-ui/src/app/services/router.service.ts
@@ -2,7 +2,6 @@ import { ReportKey } from '@/reports/reports-models';
 import { Injectable } from '@angular/core';
 import { ActivatedRoute, Params, Router, UrlTree } from '@angular/router';
 import { BrowserService } from './browser.service';
-import { LogService } from './log.service';
 import { ObjectService } from './object.service';
 import { VmState } from '@/api/board-models';
 import { ConfigService } from '@/utility/config.service';
@@ -21,7 +20,6 @@ export class RouterService {
     private browser: BrowserService,
     private config: ConfigService,
     private localUser: LocalUser,
-    private logService: LogService,
     public route: ActivatedRoute,
     public router: Router,
     private objectService: ObjectService) { }
@@ -50,6 +48,10 @@ export class RouterService {
     return `/user/${localUserId}/certificates/${mode}/${challengeSpecOrGameId}`;
   }
 
+  public getProfileUrl() {
+    return this.router.createUrlTree(["user", "profile"]).toString();
+  }
+
   public getReportRoute<T extends { [key: string]: any }>(key: ReportKey, query: T | null = null): UrlTree {
     return this.router.createUrlTree(["reports", key], { queryParams: query ? this.objectService.cloneTruthyAndZeroKeys(query) : null });
   }
@@ -62,6 +64,11 @@ export class RouterService {
     return this.router.navigateByUrl("/practice");
   }
 
+  public toPracticeAreaWithSearch(search: string) {
+    const urlTree = this.router.createUrlTree(["practice"], { queryParams: { term: search } });
+    return this.router.navigateByUrl(urlTree);
+  }
+
   public toPracticeCertificates() {
     return this.router.navigateByUrl("/user/certificates/practice");
   }
diff --git a/projects/gameboard-ui/src/app/sponsors/components/sponsor-admin-entry/sponsor-admin-entry.component.html b/projects/gameboard-ui/src/app/sponsors/components/sponsor-admin-entry/sponsor-admin-entry.component.html
new file mode 100644
index 00000000..78b0ba40
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/components/sponsor-admin-entry/sponsor-admin-entry.component.html
@@ -0,0 +1,10 @@
+<div *ngIf="sponsor" class="d-flex align-items-center parent-sponsor-container my-2">
+    <img [src]="sponsor | sponsorToLogoUri" class="img-fluid d-block sponsor-avatar mr-2">
+    <p class="flex-grow-1 m-0 p-0 sponsor-name fs-11">{{ sponsor.name }}</p>
+
+    <button type="button" class="btn btn-warning mx-1" (click)="handleEdit(sponsor)">Edit</button>
+    <app-confirm-button btnClass="btn btn-danger d-block" (confirm)="handleDelete(sponsor.id)">
+        <fa-icon [icon]="fa.trash"></fa-icon>
+        <span>Delete</span>
+    </app-confirm-button>
+</div>
diff --git a/projects/gameboard-ui/src/app/sponsors/components/sponsor-admin-entry/sponsor-admin-entry.component.scss b/projects/gameboard-ui/src/app/sponsors/components/sponsor-admin-entry/sponsor-admin-entry.component.scss
new file mode 100644
index 00000000..6afea9f4
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/components/sponsor-admin-entry/sponsor-admin-entry.component.scss
@@ -0,0 +1,10 @@
+@import "../../../../scss/variables";
+
+img {
+    aspect-ratio: 1 / 1;
+    border-radius: 50%;
+    border: dashed 1px $foreground;
+    object-fit: cover;
+    width: 72px;
+    height: 72px;
+}
diff --git a/projects/gameboard-ui/src/app/sponsors/components/sponsor-admin-entry/sponsor-admin-entry.component.ts b/projects/gameboard-ui/src/app/sponsors/components/sponsor-admin-entry/sponsor-admin-entry.component.ts
new file mode 100644
index 00000000..bf44865e
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/components/sponsor-admin-entry/sponsor-admin-entry.component.ts
@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { fa } from "@/services/font-awesome.service";
+import { Sponsor } from '@/api/sponsor-models';
+import { ModalConfirmService } from '@/services/modal-confirm.service';
+import { SponsorEditModalComponent, SponsorEditModalContext } from '../sponsor-edit-modal/sponsor-edit-modal.component';
+
+@Component({
+  selector: 'app-sponsor-admin-entry',
+  templateUrl: './sponsor-admin-entry.component.html',
+  styleUrls: ['./sponsor-admin-entry.component.scss']
+})
+export class SponsorAdminEntryComponent {
+  @Input() sponsor?: Sponsor;
+  @Output() requestDelete = new EventEmitter<string>();
+  @Output() requestRefresh = new EventEmitter<void>();
+
+  protected fa = fa;
+
+  constructor(private modalService: ModalConfirmService) { }
+
+  handleDelete(sponsorId: string) {
+    this.requestDelete.emit(sponsorId);
+  }
+
+  handleEdit(sponsor: Sponsor) {
+    this.modalService.openComponent<SponsorEditModalComponent, SponsorEditModalContext>({
+      content: SponsorEditModalComponent,
+      context: {
+        editingSponsor: sponsor,
+        onSave: () => this.requestRefresh.emit()
+      },
+      modalClasses: ["modal-dialog-centered", "modal-xl"]
+    });
+  }
+}
diff --git a/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-form/sponsor-edit-form.component.html b/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-form/sponsor-edit-form.component.html
new file mode 100644
index 00000000..0d02a6d7
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-form/sponsor-edit-form.component.html
@@ -0,0 +1,38 @@
+<div class="form-flex-container d-flex flex-wrap align-items-center">
+    <div class="avatar-container mr-2">
+        <app-dropzone (dropped)="handleDrop($event)" [acceptMimeTypes]="allowMimeTypes">
+            <div class="dropzone-target">
+                <div *ngIf="!previewSrc; else previewSponsorAvatar" class="add-button">+</div>
+            </div>
+        </app-dropzone>
+    </div>
+    <div class="form-group m-0 p-0 flex-grow-1">
+        <input type="text" class="form-control" id="name" placeholder="Sponsor name" required maxlength="200"
+            [(ngModel)]="upsertSponsorRequest.name">
+    </div>
+
+    <div class="form-group px-0 mx-2 mt-2">
+        <select name="parentSponsorId" class="form-control" [(ngModel)]="upsertSponsorRequest.parentSponsorId">
+            <option [ngValue]="undefined">[no parent sponsor]</option>
+            <option *ngFor="let eligibleParent of eligibleParentSponsors" [value]="eligibleParent.id">
+                {{eligibleParent.name}}
+            </option>
+        </select>
+    </div>
+
+    <div class="save-button-container">
+        <button type="submit" class="btn btn-success" (click)="handleSave(upsertSponsorRequest)"
+            [disabled]="!upsertSponsorRequest.name">Save</button>
+    </div>
+</div>
+
+<ng-template #previewSponsorAvatar>
+    <img class="d-block mr-2" [src]="previewSrc">
+</ng-template>
+
+<p class="file-type-help fs-08 mt-3">
+    <strong>NOTE:</strong>
+    Sponsor logo files may be in any of the following formats:
+    <em>.png, .jpeg, .jpg, .gif, .webp,</em> and
+    <em>.svg</em>.
+</p>
diff --git a/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-form/sponsor-edit-form.component.scss b/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-form/sponsor-edit-form.component.scss
new file mode 100644
index 00000000..2de6e90c
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-form/sponsor-edit-form.component.scss
@@ -0,0 +1,26 @@
+@import "../../../../scss/variables";
+
+img, .dropzone-target {
+    height: 96px;
+    width: 96px;
+    object-fit: cover;
+}
+
+.dropzone-target {
+    border: dashed 1px $foreground;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: 50%;
+
+    &.is-dropping {
+        border-color: $success;
+    }
+}
+
+.add-button {
+    font-size: 4rem;
+    margin-bottom: 8px;
+}
diff --git a/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-form/sponsor-edit-form.component.ts b/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-form/sponsor-edit-form.component.ts
new file mode 100644
index 00000000..f70ba5c2
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-form/sponsor-edit-form.component.ts
@@ -0,0 +1,85 @@
+import { Sponsor, UpsertSponsor } from '@/api/sponsor-models';
+import { SponsorService } from '@/api/sponsor.service';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-sponsor-edit-form',
+  templateUrl: './sponsor-edit-form.component.html',
+  styleUrls: ['./sponsor-edit-form.component.scss']
+})
+export class SponsorEditFormComponent implements OnInit, OnChanges {
+  @Input() existingSponsor?: Sponsor;
+  @Output() sponsorSaved = new EventEmitter<Sponsor>();
+
+  protected allowMimeTypes = this.sponsorService.allowedMimeTypes;
+  protected previewSrc: null | string = null;
+  protected upsertSponsorRequest: UpsertSponsor = { name: "" };
+  protected eligibleParentSponsors: Sponsor[] = [];
+
+  constructor(private sponsorService: SponsorService) { }
+
+  async ngOnInit(): Promise<void> {
+    await this.loadEligibleParentSponsors();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.initSponsor(this.existingSponsor);
+  }
+
+  protected handleDrop(files: File[]) {
+    if (!files?.length)
+      throw new Error("Drop an image to add it to this sponsor.");
+
+    this.previewDrop(files[0]);
+    this.upsertSponsorRequest.logoFile = files[0];
+  }
+
+  protected async handleSave(sponsor: UpsertSponsor) {
+    let upsertedSponsor: Sponsor | null = null;
+
+    if (!sponsor.id) {
+      upsertedSponsor = await firstValueFrom(this.sponsorService.create(sponsor));
+    }
+    else {
+      upsertedSponsor = await firstValueFrom(this.sponsorService.update({ id: sponsor.id, ...sponsor }));
+    }
+
+    if (!upsertedSponsor) {
+      throw new Error(`Error upserting data for sponsor ${sponsor.name}`);
+    }
+
+    // separately call to upload the image (because it needs a different content type for the request)
+    if (sponsor.logoFile) {
+      await firstValueFrom(this.sponsorService.setAvatar(upsertedSponsor.id, sponsor.logoFile));
+    }
+
+    this.sponsorSaved.emit(upsertedSponsor);
+    this.initSponsor(this.existingSponsor);
+  }
+
+  private async loadEligibleParentSponsors() {
+    this.eligibleParentSponsors = await firstValueFrom(this.sponsorService.list({ hasParent: false }));
+  }
+
+  private initSponsor(existingSponsor?: Sponsor) {
+    this.upsertSponsorRequest = {
+      id: existingSponsor?.id,
+      name: existingSponsor?.name || "",
+      parentSponsorId: existingSponsor?.parentSponsorId || undefined
+    };
+
+    if (this.existingSponsor?.logo) {
+      this.previewSrc = this.sponsorService.resolveAbsoluteSponsorLogoUri(this.existingSponsor.logo);
+    }
+  }
+
+  private previewDrop(file: File) {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      this.previewSrc = reader.result?.toString() || null;
+    });
+
+    reader.readAsDataURL(file);
+  }
+}
diff --git a/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-modal/sponsor-edit-modal.component.html b/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-modal/sponsor-edit-modal.component.html
new file mode 100644
index 00000000..d4f0d717
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-modal/sponsor-edit-modal.component.html
@@ -0,0 +1,15 @@
+<div class="sponsor-edit-modal-wrapper" *ngIf="context">
+    <div class="modal-header">
+        <h2>Edit Sponsor "{{ context.editingSponsor.name }}"</h2>
+        <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="handleModalClose()">
+            <span aria-hidden="true" class="visually-hidden">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body container">
+        <app-sponsor-edit-form [existingSponsor]="context.editingSponsor"
+            (sponsorSaved)="handleSave()"></app-sponsor-edit-form>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-info" (click)="handleModalClose()">Cancel</button>
+    </div>
+</div>
diff --git a/projects/gameboard-ui/src/app/home/profile-history/profile-history.component.scss b/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-modal/sponsor-edit-modal.component.scss
similarity index 100%
rename from projects/gameboard-ui/src/app/home/profile-history/profile-history.component.scss
rename to projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-modal/sponsor-edit-modal.component.scss
diff --git a/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-modal/sponsor-edit-modal.component.ts b/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-modal/sponsor-edit-modal.component.ts
new file mode 100644
index 00000000..e0d64f99
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/components/sponsor-edit-modal/sponsor-edit-modal.component.ts
@@ -0,0 +1,31 @@
+import { Sponsor } from '@/api/sponsor-models';
+import { ModalConfirmService } from '@/services/modal-confirm.service';
+import { Component } from '@angular/core';
+
+export interface SponsorEditModalContext extends Partial<SponsorEditModalComponent> {
+  editingSponsor: Sponsor;
+  onSave: Function;
+}
+
+@Component({
+  selector: 'app-sponsor-edit-modal',
+  templateUrl: './sponsor-edit-modal.component.html',
+  styleUrls: ['./sponsor-edit-modal.component.scss']
+})
+export class SponsorEditModalComponent {
+  protected context!: SponsorEditModalContext;
+
+  constructor(private modalService: ModalConfirmService) { }
+
+  protected handleSave() {
+    if (this.context.onSave) {
+      this.context.onSave();
+    }
+
+    this.modalService.hide();
+  }
+
+  protected handleModalClose() {
+    this.modalService.hide();
+  }
+}
diff --git a/projects/gameboard-ui/src/app/sponsors/components/sponsor-select/sponsor-select.component.html b/projects/gameboard-ui/src/app/sponsors/components/sponsor-select/sponsor-select.component.html
new file mode 100644
index 00000000..ba3f7c8d
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/components/sponsor-select/sponsor-select.component.html
@@ -0,0 +1,30 @@
+<div class="sponsor-select-component">
+    <p>
+        To play challenges on {{ appName }} you'll need to select your sponsoring organization. Their logo will
+        appear next to your name on scoreboards.
+    </p>
+    <p>
+        Some sponsors house other sponsors within them (e.g. the Department of Defense contains the Army).
+        If you're sponsored by one of these entities, you're free to name either the Department of the Defense
+        or your specific branch as your sponsor.
+    </p>
+    <p>
+        <em>
+            <strong>NOTE:</strong>
+            If your sponsor isn't represented here, please
+            <a href="/support/create" target="_blank">file a support ticket</a>.
+        </em>
+    </p>
+</div>
+
+<div *ngIf="isAuthenticated$" class="sponsors-container mt-5">
+    <ng-container *ngIf="(ctx$ | async) as ctx">
+        <app-sponsor-with-children-picker class="my-4" *ngFor="let parentSponsor of ctx.parentSponsors"
+            [parentSponsor]="parentSponsor"
+            [childSponsors]="parentSponsor.childSponsors"></app-sponsor-with-children-picker>
+
+        <!-- an extra for sponsors with no parent-->
+        <app-sponsor-with-children-picker [childSponsors]="ctx.nonParentSponsors"
+            [hideHeader]="!ctx.parentSponsors.length"></app-sponsor-with-children-picker>
+    </ng-container>
+</div>
diff --git a/projects/gameboard-ui/src/app/home/profile/profile.component.scss b/projects/gameboard-ui/src/app/sponsors/components/sponsor-select/sponsor-select.component.scss
similarity index 100%
rename from projects/gameboard-ui/src/app/home/profile/profile.component.scss
rename to projects/gameboard-ui/src/app/sponsors/components/sponsor-select/sponsor-select.component.scss
diff --git a/projects/gameboard-ui/src/app/sponsors/components/sponsor-select/sponsor-select.component.ts b/projects/gameboard-ui/src/app/sponsors/components/sponsor-select/sponsor-select.component.ts
new file mode 100644
index 00000000..9ebbdbaf
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/components/sponsor-select/sponsor-select.component.ts
@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import { Observable, map } from 'rxjs';
+import { Sponsor, SponsorWithChildSponsors } from '@/api/sponsor-models';
+import { SponsorService } from '@/api/sponsor.service';
+import { UserService as LocalUserService } from "@/utility/user.service";
+import { ConfigService } from '@/utility/config.service';
+
+interface SponsorSelectContext {
+  parentSponsors: SponsorWithChildSponsors[];
+  nonParentSponsors: Sponsor[];
+}
+
+@Component({
+  selector: 'app-sponsor-select',
+  templateUrl: './sponsor-select.component.html',
+  styleUrls: ['./sponsor-select.component.scss'],
+})
+export class SponsorSelectComponent {
+  protected appName: string;
+  protected isAuthenticated$: Observable<boolean> = this
+    .localUserService
+    .user$
+    .pipe(map(u => !!u?.id));
+  protected ctx$: Observable<SponsorSelectContext>;
+
+  constructor(
+    config: ConfigService,
+    sponsorService: SponsorService,
+    private localUserService: LocalUserService) {
+    this.appName = config.appName;
+
+    this.ctx$ = sponsorService
+      .listWithChildren()
+      .pipe(map(sponsors => {
+        const parentSponsors = sponsors.filter(s => !!s.childSponsors?.length);
+        const nonParentSponsors = sponsors.filter(s => !s.childSponsors?.length);
+
+        return {
+          parentSponsors: parentSponsors,
+          nonParentSponsors: nonParentSponsors
+        };
+      }));
+  }
+}
diff --git a/projects/gameboard-ui/src/app/sponsors/components/sponsor-with-children-picker/sponsor-with-children-picker.component.html b/projects/gameboard-ui/src/app/sponsors/components/sponsor-with-children-picker/sponsor-with-children-picker.component.html
new file mode 100644
index 00000000..85448e1e
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/components/sponsor-with-children-picker/sponsor-with-children-picker.component.html
@@ -0,0 +1,29 @@
+<ng-container *ngIf="localUser$ | async as localUser;">
+    <div *ngIf="parentSponsor; else noParentHeader" class="parent-sponsor-button parent-header">
+        <h2 class="parent-header">{{ parentSponsor.name }}</h2>
+        <img [src]="parentSponsor | sponsorToLogoUri" [alt]="parentSponsor.name">
+    </div>
+
+    <!--first, a "dummy" card that means you're selecting the parent agency but none of the children (e.g. DOD but not Army)-->
+    <ng-container *ngIf="parentSponsor">
+        <ng-container *ngTemplateOutlet="sponsorCard; context: { $implicit: parentSponsor }"></ng-container>
+    </ng-container>
+
+    <ng-container *ngFor="let s of childSponsors" class="card">
+        <ng-container *ngTemplateOutlet="sponsorCard; context: { $implicit: s }"></ng-container>
+    </ng-container>
+</ng-container>
+
+<ng-template #noParentHeader>
+    <h2 *ngIf="!hideHeader" class="parent-header no-parent">Other Sponsors</h2>
+</ng-template>
+
+<ng-template #sponsorCard let-sponsor>
+    <div class="card" *ngIf="localUser$ | async as localUser" [class.active]="localUser.sponsor.id === sponsor.id"
+        (click)="updateUserSponsor(localUser, sponsor)">
+        <div class="card-body p-1">
+            <div class="card-title">{{sponsor.name || sponsor.id}}</div>
+        </div>
+        <img class="card-img-bottom" [src]="sponsor | sponsorToLogoUri" [alt]="sponsor.name">
+    </div>
+</ng-template>
diff --git a/projects/gameboard-ui/src/app/sponsors/components/sponsor-with-children-picker/sponsor-with-children-picker.component.scss b/projects/gameboard-ui/src/app/sponsors/components/sponsor-with-children-picker/sponsor-with-children-picker.component.scss
new file mode 100644
index 00000000..4240e49d
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/components/sponsor-with-children-picker/sponsor-with-children-picker.component.scss
@@ -0,0 +1,50 @@
+@import "../../../../scss/variables";
+
+:host {
+    display: block;
+}
+
+.card {
+    width: 150px;
+    display: inline-block;
+    margin: 1rem;
+    cursor: pointer;
+    transition: all 0.25s linear;
+}
+
+.active {
+    background-color: lightgray !important;
+    color: black;
+
+    h2 {
+        color: black;
+    }
+}
+
+.parent-header {
+    font-size: 2.2rem;
+
+    &.no-parent {
+        background-color: $gray-900;
+        padding: 0.5rem 1rem;
+    }
+}
+
+.parent-sponsor-button {
+    background-color: $gray-900;
+    border-radius: 8px;
+    color: $foreground;
+    position: relative;
+    padding: 0.5rem 0.5rem 0.5rem 100px;
+    margin: 24px 0;
+
+    img {
+        aspect-ratio: 1/1;
+        border-radius: 50%;
+        height: 96px;
+        width: 96px;
+        position: absolute;
+        left: -16px;
+        top: -16px;
+    }
+}
diff --git a/projects/gameboard-ui/src/app/sponsors/components/sponsor-with-children-picker/sponsor-with-children-picker.component.ts b/projects/gameboard-ui/src/app/sponsors/components/sponsor-with-children-picker/sponsor-with-children-picker.component.ts
new file mode 100644
index 00000000..bdd47580
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/components/sponsor-with-children-picker/sponsor-with-children-picker.component.ts
@@ -0,0 +1,40 @@
+import { Sponsor } from '@/api/sponsor-models';
+import { ApiUser } from '@/api/user-models';
+import { UserService } from '@/api/user.service';
+import { UserService as LocalUserService } from '@/utility/user.service';
+import { Component, Input, OnInit } from '@angular/core';
+import { Observable, firstValueFrom } from 'rxjs';
+
+@Component({
+  selector: 'app-sponsor-with-children-picker',
+  templateUrl: './sponsor-with-children-picker.component.html',
+  styleUrls: ['./sponsor-with-children-picker.component.scss']
+})
+export class SponsorWithChildrenPickerComponent implements OnInit {
+  @Input() parentSponsor?: Sponsor;
+  @Input() childSponsors?: Sponsor[];
+  @Input() hideHeader = false;
+
+  protected localUser$: Observable<ApiUser | null>;
+
+  constructor(
+    private api: UserService,
+    private localUserService: LocalUserService) {
+    this.localUser$ = localUserService.user$.asObservable();
+  }
+
+  ngOnInit(): void {
+    if (!this.childSponsors) {
+      throw new Error("SponsorWithChildrenPickerComponent requires the childSponsors input.");
+    }
+  }
+
+  async updateUserSponsor(user: ApiUser, sponsor: Sponsor) {
+    await firstValueFrom(this.api.update({
+      id: user.id,
+      sponsorId: sponsor.id
+    }));
+
+    this.localUserService.refresh();
+  }
+}
diff --git a/projects/gameboard-ui/src/app/sponsors/sponsors.module.ts b/projects/gameboard-ui/src/app/sponsors/sponsors.module.ts
new file mode 100644
index 00000000..44965173
--- /dev/null
+++ b/projects/gameboard-ui/src/app/sponsors/sponsors.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@/core/core.module';
+import { SponsorEditFormComponent } from './components/sponsor-edit-form/sponsor-edit-form.component';
+import { SponsorEditModalComponent } from './components/sponsor-edit-modal/sponsor-edit-modal.component';
+import { SponsorSelectComponent } from './components/sponsor-select/sponsor-select.component';
+import { SponsorWithChildrenPickerComponent } from './components/sponsor-with-children-picker/sponsor-with-children-picker.component';
+import { SponsorAdminEntryComponent } from './components/sponsor-admin-entry/sponsor-admin-entry.component';
+
+const DECLARATIONS = [
+  SponsorEditFormComponent,
+  SponsorEditModalComponent,
+  SponsorSelectComponent,
+  SponsorWithChildrenPickerComponent,
+  SponsorAdminEntryComponent,
+];
+
+@NgModule({
+  declarations: DECLARATIONS,
+  imports: [
+    CommonModule,
+    CoreModule,
+  ],
+  exports: DECLARATIONS
+})
+export class SponsorsModule { }
diff --git a/projects/gameboard-ui/src/app/support/support-pill/support-pill.component.ts b/projects/gameboard-ui/src/app/support/support-pill/support-pill.component.ts
index c093b7a6..a8d50862 100644
--- a/projects/gameboard-ui/src/app/support/support-pill/support-pill.component.ts
+++ b/projects/gameboard-ui/src/app/support/support-pill/support-pill.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { Router, NavigationStart } from '@angular/router';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import { Subscription } from 'rxjs';
@@ -8,9 +8,8 @@ import { NotificationService } from '../../services/notification.service';
 @Component({
   selector: 'app-support-pill',
   templateUrl: './support-pill.component.html',
-  styleUrls: ['./support-pill.component.scss']
 })
-export class SupportPillComponent implements OnInit, OnDestroy {
+export class SupportPillComponent implements OnDestroy {
   count = 0;
   watching = false;
   faPill = faExclamationCircle;
@@ -37,11 +36,7 @@ export class SupportPillComponent implements OnInit, OnDestroy {
     );
   }
 
-  ngOnInit(): void {
-  }
-
   ngOnDestroy(): void {
     this.subs.forEach(s => s.unsubscribe());
   }
-
 }
diff --git a/projects/gameboard-ui/src/app/users/components/certificates/certificates.component.html b/projects/gameboard-ui/src/app/users/components/certificates/certificates.component.html
index 3d960895..e856bf0b 100644
--- a/projects/gameboard-ui/src/app/users/components/certificates/certificates.component.html
+++ b/projects/gameboard-ui/src/app/users/components/certificates/certificates.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-    <a class="btn btn-link" [routerLink]="['/profile']">
+    <a class="btn btn-link" [routerLink]="profileUrl">
         <fa-icon [icon]="fa.arrowLeft"></fa-icon>
         <span>Back to your profile</span>
     </a>
diff --git a/projects/gameboard-ui/src/app/users/components/certificates/certificates.component.ts b/projects/gameboard-ui/src/app/users/components/certificates/certificates.component.ts
index 4594eefa..33969aa7 100644
--- a/projects/gameboard-ui/src/app/users/components/certificates/certificates.component.ts
+++ b/projects/gameboard-ui/src/app/users/components/certificates/certificates.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { fa } from "@/services/font-awesome.service";
 import { PracticeService } from '@/services/practice.service';
 import { firstValueFrom } from 'rxjs';
+import { RouterService } from '@/services/router.service';
 
 @Component({
   selector: 'app-certificates',
@@ -11,8 +12,13 @@ import { firstValueFrom } from 'rxjs';
 export class CertificatesComponent implements OnInit {
   protected fa = fa;
   protected showTabs = false;
+  protected profileUrl: string;
 
-  constructor(private practiceService: PracticeService) { }
+  constructor(
+    private practiceService: PracticeService,
+    routerService: RouterService) {
+    this.profileUrl = routerService.getProfileUrl();
+  }
 
   async ngOnInit() {
     // the page defaults to competitive certificates through navigation. If
diff --git a/projects/gameboard-ui/src/app/utility/components/profile-editor/profile-editor.component.html b/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.html
similarity index 70%
rename from projects/gameboard-ui/src/app/utility/components/profile-editor/profile-editor.component.html
rename to projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.html
index 2053bf3a..8455e951 100644
--- a/projects/gameboard-ui/src/app/utility/components/profile-editor/profile-editor.component.html
+++ b/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.html
@@ -1,8 +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. -->
 
-<ng-container *ngIf="currentUser$ | async as currentUser">
-
+<div *ngIf="currentUser$ | async as currentUser" class="container">
     <div class="d-flex justify-content-end">
         <a class="btn btn-link" [routerLink]="['/', 'user', 'certificates']">Certificates</a>
         <a class="btn btn-link" [routerLink]="['/', 'profile', 'history']">History</a>
@@ -13,7 +12,7 @@ <h4>1. Set your display name</h4>
 
         <div>
             Choose a <em>default</em> name for public display that is suitable for all audiences. This name will apply
-            to <em>all new games</em>, however you can customize it during registration.
+            to <em>all new games</em>, but you can customize it during registration.
         </div>
         <br>
 
@@ -41,7 +40,7 @@ <h4>1. Set your display name</h4>
         <div class="form-group w-25 d-inline-block">
             <label for="nameInput">Requested Display Name</label>
             <input id="nameInput" class="form-control" [(ngModel)]="currentUser.name"
-                (input)="updateUser(currentUser, currentUser.sponsor)" placeholder="display name" maxlength="64">
+                (input)="updateUserName(currentUser.name)" placeholder="display name" maxlength="64" required>
         </div>
         <ng-container>
             <div class="form-group w-25 d-inline-block">
@@ -50,7 +49,7 @@ <h4>1. Set your display name</h4>
             </div>
 
             <div class="form-group w-25 d-inline-block d-flex align-items-end">
-                <button class="btn btn-secondary" (click)="refresh(currentUser)">
+                <button class="btn btn-secondary" (click)="refresh()">
                     <fa-icon [icon]="faSync"></fa-icon>
                     <span>Refresh</span>
                 </button>
@@ -61,33 +60,13 @@ <h4>1. Set your display name</h4>
     <div class="w-75 d-inline-block">
         <h4>2. Select your sponsoring organization</h4>
 
-        <div>
-            <p>
-                To participate in a game, you must select your organization. This organization will display on the
-                leaderboard alongside your name.
-            </p>
-            <br>
-            <p>
-                If your sponsor isn't represented here, please
-                <a [routerLink]="'/support/create'">file a support ticket</a>.
-            </p>
-        </div>
-
-        <ng-container *ngIf="!currentUser.sponsor">
+        <ng-container *ngIf="!currentUser.sponsor || currentUser.hasDefaultSponsor">
             <br>
             <div class="alert alert-warning">
                 You'll need to select the organization sponsoring you before you play. Choose your organization below.
             </div>
         </ng-container>
     </div>
-    <br>
 
-    <ng-container *ngFor="let s of sponsors$ | async">
-        <div class="card" [class.active]="currentUser.sponsor===s.logo" (click)="updateUser(currentUser, s.logo)">
-            <div class="card-body p-1">
-                <div class="card-title">{{s.name || s.id}}</div>
-            </div>
-            <img class="card-img-bottom" [src]="s.logoUrl" [alt]="s.id">
-        </div>
-    </ng-container>
-</ng-container>
+    <app-sponsor-select></app-sponsor-select>
+</div>
diff --git a/projects/gameboard-ui/src/app/utility/components/profile-editor/profile-editor.component.scss b/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.scss
similarity index 100%
rename from projects/gameboard-ui/src/app/utility/components/profile-editor/profile-editor.component.scss
rename to projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.scss
diff --git a/projects/gameboard-ui/src/app/utility/components/profile-editor/profile-editor.component.ts b/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.ts
similarity index 64%
rename from projects/gameboard-ui/src/app/utility/components/profile-editor/profile-editor.component.ts
rename to projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.ts
index 103f0004..65eee548 100644
--- a/projects/gameboard-ui/src/app/utility/components/profile-editor/profile-editor.component.ts
+++ b/projects/gameboard-ui/src/app/users/components/profile-editor/profile-editor.component.ts
@@ -3,22 +3,19 @@
 
 import { Component } from '@angular/core';
 import { faSyncAlt } from '@fortawesome/free-solid-svg-icons';
-import { asyncScheduler, Observable, scheduled, Subject } from 'rxjs';
+import { asyncScheduler, firstValueFrom, Observable, scheduled, Subject } from 'rxjs';
 import { mergeAll, tap } from 'rxjs/operators';
-import { Sponsor } from '../../../api/sponsor-models';
-import { SponsorService } from '../../../api/sponsor.service';
-import { ApiUser } from '../../../api/user-models';
+import { ApiUser, ChangedUser } from '../../../api/user-models';
 import { UserService as ApiUserService } from '../../../api/user.service';
 import { UserService } from '../../../utility/user.service';
 
 @Component({
   selector: 'app-profile-editor',
   templateUrl: './profile-editor.component.html',
-  styleUrls: ['./profile-editor.component.scss']
+  styleUrls: ['./profile-editor.component.scss'],
 })
 export class ProfileEditorComponent {
   currentUser$: Observable<ApiUser | null>;
-  sponsors$: Observable<Sponsor[]>;
   updating$ = new Subject<ApiUser>();
   errors = [];
 
@@ -30,9 +27,7 @@ export class ProfileEditorComponent {
   constructor(
     private api: ApiUserService,
     private userSvc: UserService,
-    sponsorSvc: SponsorService
   ) {
-    this.sponsors$ = sponsorSvc.list('');
 
     this.currentUser$ = scheduled([
       userSvc.user$,
@@ -40,7 +35,6 @@ export class ProfileEditorComponent {
     ], asyncScheduler).pipe(
       mergeAll(),
       tap(user => {
-
         if (user?.nameStatus && user.nameStatus != "pending") {
           if (this.disallowedName == null) {
             this.disallowedName = user.name;
@@ -53,26 +47,30 @@ export class ProfileEditorComponent {
     this.userSvc.refresh();
   }
 
-  async updateUser(u: ApiUser | null, sponsorLogo: string): Promise<void> {
-    if (!u) {
-      throw new Error("Can't access user to update sponsor.");
-    }
+  async updateUserName(name: string): Promise<void> {
+    if (!this.userSvc.user$.value)
+      throw new Error("Can't update user name if not logged in.");
 
-    if (sponsorLogo) {
-      u.sponsor = sponsorLogo;
-    }
+    if (!name)
+      return;
 
+    // set name status in response
+    let nameStatus = "";
     // If the user's name isn't the disallowed one, mark it as pending
-    if (u.name != this.disallowedName) u.nameStatus = "pending";
+    if (name != this.disallowedName) nameStatus = "pending";
     // Otherwise, if there is a disallowed reason as well, mark it as that reason
-    else if (this.disallowedReason) u.nameStatus = this.disallowedReason;
+    else if (this.disallowedReason) nameStatus = this.disallowedReason;
 
     // update the api
-    const updatedUser = await this.api.update(u, this.disallowedName).toPromise();
+    const updatedUser = await firstValueFrom(this.api.update({
+      id: this.userSvc.user$.value.id,
+      name,
+      nameStatus
+    }, this.disallowedName));
     this.updating$.next(updatedUser!);
   }
 
-  refresh(u: ApiUser): void {
+  refresh(): void {
     this.userSvc.refresh();
   }
 }
diff --git a/projects/gameboard-ui/src/app/home/profile-history/profile-history.component.html b/projects/gameboard-ui/src/app/users/components/profile-history/profile-history.component.html
similarity index 90%
rename from projects/gameboard-ui/src/app/home/profile-history/profile-history.component.html
rename to projects/gameboard-ui/src/app/users/components/profile-history/profile-history.component.html
index 64ab1b9f..a7d807e8 100644
--- a/projects/gameboard-ui/src/app/home/profile-history/profile-history.component.html
+++ b/projects/gameboard-ui/src/app/users/components/profile-history/profile-history.component.html
@@ -17,7 +17,7 @@ <h1>History</h1>
     <tbody>
       <tr *ngFor="let c of list">
         <td>{{c.approvedName}}</td>
-        <td><img [src]="c.sponsorLogo" width="48px"></td>
+        <td><img [src]="c.sponsor | sponsorToLogoUri" width="48px"></td>
         <td>{{c.gameName}}</td>
         <td>{{c.rank}}</td>
         <td>{{c.score}}</td>
diff --git a/projects/gameboard-ui/src/app/reports/components/parameters/parameter-series/parameter-series.component.scss b/projects/gameboard-ui/src/app/users/components/profile-history/profile-history.component.scss
similarity index 100%
rename from projects/gameboard-ui/src/app/reports/components/parameters/parameter-series/parameter-series.component.scss
rename to projects/gameboard-ui/src/app/users/components/profile-history/profile-history.component.scss
diff --git a/projects/gameboard-ui/src/app/home/profile-history/profile-history.component.ts b/projects/gameboard-ui/src/app/users/components/profile-history/profile-history.component.ts
similarity index 68%
rename from projects/gameboard-ui/src/app/home/profile-history/profile-history.component.ts
rename to projects/gameboard-ui/src/app/users/components/profile-history/profile-history.component.ts
index 19b5b339..14c9ad4a 100644
--- a/projects/gameboard-ui/src/app/home/profile-history/profile-history.component.ts
+++ b/projects/gameboard-ui/src/app/users/components/profile-history/profile-history.component.ts
@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 import { filter, map, switchMap } from 'rxjs/operators';
-import { Player } from '../../api/player-models';
-import { PlayerService } from '../../api/player.service';
-import { UserService } from '../../utility/user.service';
+import { Player } from '../../../api/player-models';
+import { PlayerService } from '../../../api/player.service';
+import { UserService } from '../../../utility/user.service';
 
 @Component({
   selector: 'app-profile-history',
@@ -16,11 +16,11 @@ export class ProfileHistoryComponent {
   constructor(
     userSvc: UserService,
     api: PlayerService
-  ){
+  ) {
     this.list$ = userSvc.user$.pipe(
       map(u => u?.id),
       filter(id => !!id),
-      switchMap(uid => api.list({uid, sort:'time'}))
+      switchMap(uid => api.list({ uid, sort: 'time' }))
     );
   }
 }
diff --git a/projects/gameboard-ui/src/app/users/components/user-page/user-page.component.html b/projects/gameboard-ui/src/app/users/components/user-page/user-page.component.html
new file mode 100644
index 00000000..626bd4ee
--- /dev/null
+++ b/projects/gameboard-ui/src/app/users/components/user-page/user-page.component.html
@@ -0,0 +1,7 @@
+<div class="jumbotron">
+    <span class="display-4">{{appName}}</span>
+</div>
+
+<main class="container">
+    <router-outlet></router-outlet>
+</main>
diff --git a/projects/gameboard-ui/src/app/support/support-pill/support-pill.component.scss b/projects/gameboard-ui/src/app/users/components/user-page/user-page.component.scss
similarity index 100%
rename from projects/gameboard-ui/src/app/support/support-pill/support-pill.component.scss
rename to projects/gameboard-ui/src/app/users/components/user-page/user-page.component.scss
diff --git a/projects/gameboard-ui/src/app/users/components/user-page/user-page.component.ts b/projects/gameboard-ui/src/app/users/components/user-page/user-page.component.ts
new file mode 100644
index 00000000..eb9d0a99
--- /dev/null
+++ b/projects/gameboard-ui/src/app/users/components/user-page/user-page.component.ts
@@ -0,0 +1,15 @@
+import { ConfigService } from '@/utility/config.service';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user-page',
+  templateUrl: './user-page.component.html',
+  styleUrls: ['./user-page.component.scss']
+})
+export class UserPageComponent {
+  protected appName: string;
+
+  constructor(config: ConfigService) {
+    this.appName = config.settings.appname || "Gameboard";
+  }
+}
diff --git a/projects/gameboard-ui/src/app/users/users.module.ts b/projects/gameboard-ui/src/app/users/users.module.ts
index d762d503..23ba302b 100644
--- a/projects/gameboard-ui/src/app/users/users.module.ts
+++ b/projects/gameboard-ui/src/app/users/users.module.ts
@@ -9,28 +9,45 @@ import { PracticeCertificatesComponent } from './components/practice-certificate
 import { AuthGuard } from '@/utility/auth.guard';
 import { practiceModeEnabledGuard } from '@/prac/practice-mode-enabled.guard';
 import { CertificatePublishControlsComponent } from './components/certificate-publish-controls/certificate-publish-controls.component';
+import { ProfileEditorComponent } from './components/profile-editor/profile-editor.component';
+import { ProfileHistoryComponent } from './components/profile-history/profile-history.component';
+import { UserPageComponent } from './components/user-page/user-page.component';
+import { SponsorsModule } from '@/sponsors/sponsors.module';
 
 const DECLARED_COMPONENTS = [
   CertificatesComponent,
+  CertificatePublishControlsComponent,
   CertificatePrinterComponent,
   CompetitiveCertificatesComponent,
   PracticeCertificatesComponent,
+  ProfileEditorComponent
 ];
 
 @NgModule({
-  declarations: [...DECLARED_COMPONENTS, CertificatePublishControlsComponent],
+  declarations: [...DECLARED_COMPONENTS, UserPageComponent],
   imports: [
     CommonModule,
     CoreModule,
+    SponsorsModule,
     RouterModule.forChild([
+      { path: ":userId/certificates/:playerMode/:awardedForEntityId", component: CertificatePrinterComponent },
       {
-        path: 'certificates', component: CertificatesComponent, title: "Certificates", canActivate: [AuthGuard], canActivateChild: [AuthGuard], children: [
-          { path: 'competitive', component: CompetitiveCertificatesComponent, title: "Competitive Certificates" },
-          { path: 'practice', component: PracticeCertificatesComponent, title: "Practice Certificates", canActivate: [practiceModeEnabledGuard] },
-          { path: '', pathMatch: 'full', redirectTo: 'competitive' }
+        path: '',
+        component: UserPageComponent,
+        canActivate: [AuthGuard],
+        canActivateChild: [AuthGuard],
+        children: [
+          {
+            path: 'certificates', component: CertificatesComponent, title: "Certificates", canActivate: [AuthGuard], canActivateChild: [AuthGuard], children: [
+              { path: 'competitive', component: CompetitiveCertificatesComponent, title: "Competitive Certificates" },
+              { path: 'practice', component: PracticeCertificatesComponent, title: "Practice Certificates", canActivate: [practiceModeEnabledGuard] },
+              { path: '', pathMatch: 'full', redirectTo: 'competitive' }
+            ]
+          },
+          { path: 'profile', component: ProfileEditorComponent, title: "Profile" },
+          { path: 'profile/history', component: ProfileHistoryComponent, canActivate: [AuthGuard] },
         ]
       },
-      { path: ":userId/certificates/:playerMode/:awardedForEntityId", component: CertificatePrinterComponent },
     ]),
   ]
 })
diff --git a/projects/gameboard-ui/src/app/utility/auth.service.ts b/projects/gameboard-ui/src/app/utility/auth.service.ts
index e7dc1a49..aeca4b47 100644
--- a/projects/gameboard-ui/src/app/utility/auth.service.ts
+++ b/projects/gameboard-ui/src/app/utility/auth.service.ts
@@ -2,7 +2,7 @@
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
 import { Injectable } from '@angular/core';
-import { UserManager, UserManagerSettings, User, WebStorageStateStore, Log, UserSignedInCallback } from 'oidc-client-ts';
+import { UserManager, UserManagerSettings, User, WebStorageStateStore, Log } from 'oidc-client-ts';
 import { BehaviorSubject, Observable, firstValueFrom } from 'rxjs';
 import { distinctUntilChanged, filter } from 'rxjs/operators';
 import { ConfigService, Settings } from './config.service';
diff --git a/projects/gameboard-ui/src/app/utility/components/dropzone/dropzone.component.html b/projects/gameboard-ui/src/app/utility/components/dropzone/dropzone.component.html
deleted file mode 100644
index 8b5ace48..00000000
--- a/projects/gameboard-ui/src/app/utility/components/dropzone/dropzone.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!-- Copyright 2021 Carnegie Mellon University. -->
-<!-- Released under a MIT (SEI)-style license. See LICENSE.md in the project root. -->
-
-<div class="dropzone" [class.dropzone-active]="dropzone">
-
-  <label [for]="inputId">
-    <input [id]="inputId" type="file" style="display:none;" (change)="filesSelected($event)">
-    <span style="border-color:white" class="text-white" [class]="btnClass">Browse</span>
-  </label>
-
-  <ng-content></ng-content>
-
-</div>
diff --git a/projects/gameboard-ui/src/app/utility/components/dropzone/dropzone.component.scss b/projects/gameboard-ui/src/app/utility/components/dropzone/dropzone.component.scss
deleted file mode 100644
index a1afda6c..00000000
--- a/projects/gameboard-ui/src/app/utility/components/dropzone/dropzone.component.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-:host {
-  margin: .25rem;
-}
-.dropzone-active {
-  background-color: rgba(215, 154, 254, 0.5);
-  border-radius: .25rem;
-  border: .25rem dashed darkorchid!important ;
-}
-.dropzone {
-  min-height: 200px;
-  height: 100%;
-  width: 100%;
-  border: .25rem dashed lightgray ;
-  border-radius: .25rem;
-  padding: .25rem;
-}
diff --git a/projects/gameboard-ui/src/app/utility/utility.module.ts b/projects/gameboard-ui/src/app/utility/utility.module.ts
index 226170fb..01f75f06 100644
--- a/projects/gameboard-ui/src/app/utility/utility.module.ts
+++ b/projects/gameboard-ui/src/app/utility/utility.module.ts
@@ -18,7 +18,6 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
 // internal components/services
 import { AgedDatePipe } from './pipes/aged-date.pipe';
 import { ClipspanComponent } from './components/clipspan/clipspan.component';
-import { DropzoneComponent } from './components/dropzone/dropzone.component';
 import { ErrorDivComponent } from './components/error-div/error-div.component';
 import { GameCardComponent } from './components/game-card/game-card.component';
 import { ImageManagerComponent } from './components/image-manager/image-manager.component';
@@ -28,7 +27,6 @@ import { InplaceEditorComponent } from './components/inplace-editor/inplace-edit
 import { LoginComponent } from './components/login/login.component';
 import { MessageBoardComponent } from './components/message-board/message-board.component';
 import { MorphingTextComponent } from './components/morphing-text/morphing-text.component';
-import { ProfileEditorComponent } from './components/profile-editor/profile-editor.component';
 
 import { CamelspacePipe } from './pipes/camelspace.pipe';
 import { FormsModule } from '@angular/forms';
@@ -44,11 +42,9 @@ import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
 const components = [
   ClipspanComponent,
   ErrorDivComponent,
-  DropzoneComponent,
   ImageManagerComponent,
   GameCardComponent,
   LoginComponent,
-  ProfileEditorComponent,
   MessageBoardComponent,
   InplaceEditorComponent,
   AgedDatePipe,
diff --git a/projects/gameboard-ui/src/tools.ts b/projects/gameboard-ui/src/tools.ts
index 20371694..bddb5f96 100644
--- a/projects/gameboard-ui/src/tools.ts
+++ b/projects/gameboard-ui/src/tools.ts
@@ -42,3 +42,11 @@ export function pipeTapLog<T extends Subject<any>>(obs: T, message?: string): T
 export function unique<T>(array: T[]): T[] {
     return array.filter((value, index, arr) => arr.indexOf(value) === index);
 }
+
+export enum MimeTypes {
+    Gif = "image/gif",
+    Jpeg = "image/jpeg",
+    Png = "image/png",
+    Svg = "image/svg+xml",
+    Webp = "image/webp"
+}