From a5b990b854634d9dec8902e16a23a3a5425ed953 Mon Sep 17 00:00:00 2001
From: Ben Stein <115497763+sei-bstein@users.noreply.github.com>
Date: Fri, 20 Dec 2024 10:19:09 -0500
Subject: [PATCH] v3.27.0 (#214)

* Certificates revamp MVP

* Light revamp of name approvals
---
 .../src/app/admin/admin.module.ts             |   5 +
 .../game-center-settings.component.html       |  49 ++-----
 .../game-center-settings.component.ts         |  19 +++
 .../game-center-team-detail.component.html    |  86 ++++++-----
 .../game-center-team-detail.component.ts      |  24 +++-
 .../player-names/player-names.component.ts    |   5 +-
 .../practice-settings.component.html          |  13 +-
 .../practice-settings.component.ts            |  29 ++--
 .../gameboard-ui/src/app/api/admin.models.ts  |  11 +-
 .../gameboard-ui/src/app/api/admin.service.ts |   4 +-
 .../src/app/api/certificates.service.ts       |  38 ++++-
 .../gameboard-ui/src/app/api/game-models.ts   |   4 +-
 .../app/certificates/certificates.models.ts   |  65 +++++++++
 .../certificate-previewer.component.html      |  20 +++
 .../certificate-previewer.component.scss      |   8 ++
 .../certificate-previewer.component.ts        |  46 ++++++
 ...certificate-template-picker.component.html | 127 ++++++++++++++++
 ...certificate-template-picker.component.scss |   3 +
 .../certificate-template-picker.component.ts  | 136 ++++++++++++++++++
 ...meboard-performance-summary.component.html |   2 +-
 .../feedback-template-picker.component.html   |   3 +-
 .../pages/game-page/game-page.component.html  |   2 +-
 ...tice-challenge-solved-modal.component.html |  10 +-
 ...actice-challenge-solved-modal.component.ts |  30 ++--
 .../practice-session.component.ts             |   1 +
 .../gameboard-ui/src/app/prac/prac.module.ts  |   5 +-
 .../src/app/prac/practice.models.ts           |   2 +-
 .../report-stat-summary.component.html        |   8 +-
 .../enrollment-report.component.ts            |   8 +-
 .../enrollment-report.models.ts               |  14 +-
 .../games/components/play/play.component.html |   2 +-
 .../certificate-printer.component.ts          |   6 +-
 .../certificate-publish-controls.component.ts |   2 +-
 .../certificates/certificates.component.ts    |   8 +-
 .../competitive-certificates.component.html   |  29 ++--
 .../competitive-certificates.component.ts     |  54 +++----
 .../practice-certificates.component.html      |   5 +-
 .../practice-certificates.component.scss      |   4 +-
 .../practice-certificates.component.ts        |   2 +-
 .../gameboard-ui/src/app/users/functions.ts   |  10 +-
 .../src/app/users/users.models.ts             |  34 -----
 .../src/app/users/users.module.ts             |   2 -
 .../certificate-template.sample.html          |   0
 .../practice-certificate.template.html        |  47 ------
 projects/gameboard-ui/src/styles.scss         |  12 +-
 45 files changed, 670 insertions(+), 324 deletions(-)
 create mode 100644 projects/gameboard-ui/src/app/certificates/certificates.models.ts
 create mode 100644 projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.html
 create mode 100644 projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.scss
 create mode 100644 projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.ts
 create mode 100644 projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.html
 create mode 100644 projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.scss
 create mode 100644 projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.ts
 create mode 100644 projects/gameboard-ui/src/assets/templates/certificate-template.sample.html
 delete mode 100644 projects/gameboard-ui/src/assets/templates/practice-certificate.template.html

diff --git a/projects/gameboard-ui/src/app/admin/admin.module.ts b/projects/gameboard-ui/src/app/admin/admin.module.ts
index 912dbcba3..63b187a08 100644
--- a/projects/gameboard-ui/src/app/admin/admin.module.ts
+++ b/projects/gameboard-ui/src/app/admin/admin.module.ts
@@ -88,6 +88,8 @@ import { ToSupportCodePipe } from '@/standalone/core/pipes/to-support-code.pipe'
 import { IfHasPermissionDirective } from '@/standalone/directives/if-has-permission.directive';
 import { FeedbackTemplatePickerComponent } from "../feedback/components/feedback-template-picker/feedback-template-picker.component";
 import { UserPickerComponent } from '@/standalone/users/user-picker/user-picker.component';
+import { CertificateTemplatePickerComponent } from '@/certificates/components/certificate-template-picker/certificate-template-picker.component';
+import { CertificatePreviewerComponent } from '@/certificates/components/certificate-previewer/certificate-previewer.component';
 
 @NgModule({
   declarations: [
@@ -160,6 +162,7 @@ import { UserPickerComponent } from '@/standalone/users/user-picker/user-picker.
     RouterModule.forChild([
       {
         path: '', component: AdminPageComponent, title: "Admin", children: [
+          { path: "certificates/templates/:templateId/preview", component: CertificatePreviewerComponent, title: "Certificate Template Preview" },
           { path: '', pathMatch: 'full', redirectTo: 'dashboard' },
           { path: 'dashboard', component: DashboardComponent },
           {
@@ -225,6 +228,8 @@ import { UserPickerComponent } from '@/standalone/users/user-picker/user-picker.
     SafeUrlPipe,
     SpinnerComponent,
     ToSupportCodePipe,
+    CertificatePreviewerComponent,
+    CertificateTemplatePickerComponent,
     FeedbackTemplatePickerComponent,
     UserPickerComponent,
   ]
diff --git a/projects/gameboard-ui/src/app/admin/components/game-center/game-center-settings/game-center-settings.component.html b/projects/gameboard-ui/src/app/admin/components/game-center/game-center-settings/game-center-settings.component.html
index 5589c676b..7b2a05580 100644
--- a/projects/gameboard-ui/src/app/admin/components/game-center/game-center-settings/game-center-settings.component.html
+++ b/projects/gameboard-ui/src/app/admin/components/game-center/game-center-settings/game-center-settings.component.html
@@ -147,6 +147,7 @@
             </div>
 
             <div class="col-12 mt-5">
+                <h4>Player Feedback</h4>
                 <app-feedback-template-picker labelText="Game Feedback Template"
                     [(templateId)]="game.feedbackTemplateId"
                     (select)="handleGameFeedbackTemplateChanged($event)"></app-feedback-template-picker>
@@ -157,46 +158,14 @@
             </div>
 
             <div class="col-12 mt-5">
-                <div class="form-group pb-0 pt-1">
-                    <label for="certificateTemplate-input">Certificate Template</label>
-                    <textarea rows="11" type="text" class="form-control" id="certificateTemplate-input"
-                        name="certificateTemplate" [(ngModel)]="game.certificateTemplate"></textarea>
-                    <small>design with HTML and inline/internal CSS; use a 11:8.5 aspect ratio</small>
-                    <button class="btn btn-sm btn-link-white" [(ngModel)]="showCertificateInfo"
-                        [ngModelOptions]="{standalone: true}" btnCheckbox>
-                        <fa-icon [icon]="fa.infoCircle"></fa-icon>
-                    </button>
-                    <div class="ml-4 px-2" *ngIf="showCertificateInfo">
-                        <p class="cert-info mb-2">
-                            Insert dynamic content by referring to a property with double-curly syntax
-                            <code>{{"\{\{game_name\}\}"}}</code>. For example,
-                            <code>&lt;h1&gt;{{"\{\{leaderboard_name\}\}"}}&lt;/h1&gt;</code>. <br>
-                            The following properties will get replaced when a player certificate renders:
-                        </p>
-                        <pre class="mb-1">
-      game_name &mdash; Name of this game
-      competition &mdash; Competition type of this game
-      season &mdash; Season of this game
-      round &mdash; Round of this game
-      track &mdash; Track of this game
-      user_name &mdash; Individual user's approved name
-      score &mdash; Total player score for this game
-      rank &mdash; Final leaderboard ranking of the player
-      leaderboard_name &mdash; Approved name for either team or individual
-      date &mdash; Date player's session ended for this game
-      player_count &mdash; Number of players who participated in this game
-      team_count &mdash; Number of teams who participated in this game</pre>
-                        <p class="cert-info mb-2">
-                            Tip: Create an outer div with fixed height and width and <code>position: relative</code>.
-                            Create inner
-                            divs with <code>position: absolute; text-align: center;</code> and set textbox width and X/Y
-                            position with
-                            <code>top: __px; left: __px; width: __px;</code>.
-                            To add a background image, use
-                            <code>background-size: 100% 100%; background-image: url('URL_HERE');</code>
-                        </p>
-                    </div>
-                </div>
+                <h4>Completion Certificates</h4>
+                <app-certificate-template-picker labelText="Competitive Certificate Template"
+                    [selectedTemplateId]="game.certificateTemplateId"
+                    (selected)="handleCertificateTemplateChanged($event)"></app-certificate-template-picker>
+                <app-certificate-template-picker labelText="Practice Certificate Template"
+                    defaultOptionText="[use global practice area template]"
+                    [selectedTemplateId]="game.practiceCertificateTemplateId"
+                    (selected)="handlePracticeCertificateTemplateChanged($event)"></app-certificate-template-picker>
             </div>
         </div>
 
diff --git a/projects/gameboard-ui/src/app/admin/components/game-center/game-center-settings/game-center-settings.component.ts b/projects/gameboard-ui/src/app/admin/components/game-center/game-center-settings/game-center-settings.component.ts
index e7e51f939..243ca0ac5 100644
--- a/projects/gameboard-ui/src/app/admin/components/game-center/game-center-settings/game-center-settings.component.ts
+++ b/projects/gameboard-ui/src/app/admin/components/game-center/game-center-settings/game-center-settings.component.ts
@@ -10,6 +10,7 @@ import { UnsubscriberService } from '@/services/unsubscriber.service';
 import { ToastService } from '@/utility/services/toast.service';
 import { ActivatedRoute } from '@angular/router';
 import { FeedbackTemplateView } from '@/feedback/feedback.models';
+import { CertificateTemplateView } from '@/certificates/certificates.models';
 
 export type SelectedSubTab = "settings" | "modes" | "registration";
 
@@ -86,6 +87,24 @@ export class GameCenterSettingsComponent implements AfterViewInit {
     }
   }
 
+  protected async handleCertificateTemplateChanged(template?: CertificateTemplateView) {
+    if (!this.game) {
+      throw new Error("Game is required");
+    }
+
+    this.game.certificateTemplateId = template?.id;
+    await firstValueFrom(this.gameService.update(this.game));
+  }
+
+  protected async handlePracticeCertificateTemplateChanged(template?: CertificateTemplateView) {
+    if (!this.game) {
+      throw new Error("Game is required");
+    }
+
+    this.game.practiceCertificateTemplateId = template?.id;
+    await firstValueFrom(this.gameService.update(this.game));
+  }
+
   protected async handleChallengesFeedbackTemplateChanged(template?: FeedbackTemplateView) {
     if (!this.game) {
       throw new Error("Game is required");
diff --git a/projects/gameboard-ui/src/app/admin/components/game-center/game-center-team-detail/game-center-team-detail.component.html b/projects/gameboard-ui/src/app/admin/components/game-center/game-center-team-detail/game-center-team-detail.component.html
index 54dad34b0..f5abcbf41 100644
--- a/projects/gameboard-ui/src/app/admin/components/game-center/game-center-team-detail/game-center-team-detail.component.html
+++ b/projects/gameboard-ui/src/app/admin/components/game-center/game-center-team-detail/game-center-team-detail.component.html
@@ -15,48 +15,49 @@ <h6>Score</h6>
     </div>
 
     <ng-container>
-        <h4 class="mt-4 px-3">Team Management</h4>
-        <div class="name-management">
-            <ul class="container mx-0">
-                <li class="row">
-                    <div class="col-3">
-                        <label class="mb-0 text-muted">Current Name</label>
-                    </div>
-                    <div class="col-4">
-                        <label class="mb-0 text-muted">Requested Name</label>
-                    </div>
-                    <div class="col-3">
-                        <label class="mb-0 text-muted" for="reason-input">Reason for Change</label>
-                    </div>
-                </li>
-                <li *ngFor="let player of team.players" class="row mb-2">
-                    <div class="col-3">
-                        <div class="fs-10 player-current-name">{{ player.name }}</div>
-                    </div>
-                    <div class="col-4">
-                        <input type="text" class="form-control" name="pending-name-input-{{player.id}}" type="text"
-                            [placeholder]="(player.pendingName ? 'Name this player (requested: ' + player.pendingName + ')' : 'No pending name change requests from this player')"
-                            minlength="2" [value]="player.pendingName" #pendingNameInput>
-                    </div>
-                    <div class="col-3">
-                        <select name="reason-select" class="form-control" #reasonSelect>
-                            <option [value]="''">[not disapproved]</option>
-                            <option *ngFor="let reason of reasons" [value]="reason">
-                                {{reason}}
-                            </option>
-                        </select>
-                    </div>
-                    <div>
-                        <button type="button" class="btn btn-warning mr-2"
-                            [disabled]="pendingNameInput.value.length < 2"
-                            (click)="approveName(player.id, { name: pendingNameInput.value, revisionReason: reasonSelect.value })">Approve</button>
+        <div class="mt-4 px-3">
+            <h4>Team Management</h4>
+            <table class="width-100">
+                <col class="width-20">
+                <col class="width-20">
+                <col class="width-20">
+                <col class="width-20">
+                <col class="width-20">
 
-                        <button type="button" class="btn btn-danger"
-                            [disabled]="team.players.length == 1 || (player.id === team.captain.id)"
-                            (click)="handleRemovePlayerConfirm(player)">Remove</button>
-                    </div>
-                </li>
-            </ul>
+                <thead>
+                    <th>Name</th>
+                    <th>Requested Name</th>
+                    <th>Override Name</th>
+                    <th>Status</th>
+                    <th></th>
+                </thead>
+
+                <tbody>
+                    <tr *ngFor="let player of team.players">
+                        <td>{{ player.name }}</td>
+                        <td>{{ player.pendingName || "--" }}</td>
+                        <td>
+                            <input type="text" class="form-control" placeholder="Enter a name" #overrideName>
+                        </td>
+                        <td>
+                            <select name="reason-select" class="form-control" #reasonSelect>
+                                <option [value]="''">[approved]</option>
+                                <option *ngFor="let reason of reasons" [value]="reason">
+                                    {{reason}}
+                                </option>
+                            </select>
+                        </td>
+                        <td class="d-flex align-items-center justify-content-center">
+                            <button type="button" class="btn btn-warning mr-2"
+                                (click)="updateNameChangeRequest(player.id, overrideName.value, { requestedName: player.pendingName || '', approvedName: player.name || '', status: reasonSelect.value })">Update</button>
+
+                            <button type="button" class="btn btn-danger"
+                                [disabled]="team.players.length == 1 || (player.id === team.captain.id)"
+                                (click)="handleRemovePlayerConfirm(player)">Remove</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </ng-container>
 
@@ -81,9 +82,6 @@ <h4 class="mt-4 px-3">Session</h4>
         </div>
 
         <h4 class="px-3 mr-1">Timeline</h4>
-        <!-- <div class="d-flex align-items-baseline">
-            
-        </div> -->
         <div class="timeline-container px-3 mb-4">
             <app-team-event-horizon [teamId]="team.id"></app-team-event-horizon>
         </div>
diff --git a/projects/gameboard-ui/src/app/admin/components/game-center/game-center-team-detail/game-center-team-detail.component.ts b/projects/gameboard-ui/src/app/admin/components/game-center/game-center-team-detail/game-center-team-detail.component.ts
index c28a4343c..51d199bc4 100644
--- a/projects/gameboard-ui/src/app/admin/components/game-center/game-center-team-detail/game-center-team-detail.component.ts
+++ b/projects/gameboard-ui/src/app/admin/components/game-center/game-center-team-detail/game-center-team-detail.component.ts
@@ -10,6 +10,7 @@ import { AdminService } from '@/api/admin.service';
 import { ToastService } from '@/utility/services/toast.service';
 import { TeamService } from '@/api/team.service';
 import { SimpleEntity } from '@/api/models';
+import { UpdatePlayerNameChangeRequest } from '@/api/admin.models';
 
 @Component({
   selector: 'app-game-center-team-detail',
@@ -106,20 +107,29 @@ export class GameCenterTeamDetailComponent implements OnInit {
     this.showChallengeYaml = isExpanding;
   }
 
-  protected async approveName(playerId: string, args: { name: string, revisionReason: string }) {
-    const finalName = args.name.trim();
-    await this.adminService.approvePlayerName(playerId, args);
+  protected async updateNameChangeRequest(playerId: string, overrideName: string, args: UpdatePlayerNameChangeRequest) {
+    if (!args.status) {
+      args.approvedName = overrideName || args.requestedName;
+    }
+
+    // tell the API
+    await this.adminService.updatePlayerNameChangeRequest(playerId, args);
 
+    // rebind
     const player = this.team.players.find(p => p.id === playerId);
     if (player) {
-      player.pendingName = "";
-      player.name = args.name;
+      player.pendingName = player.pendingName == args.approvedName ? "" : player.pendingName;
+      player.name = args.approvedName;
     }
 
     if (this.team.captain.id === playerId)
-      this.team.name = args.name;
+      this.team.name = args.approvedName;
+
+    this.toastService.showMessage(`This player's name has been changed to **${args.approvedName}**.${args.status ? ` (reason: **${args.status}**)` : ""}`);
+  }
 
-    this.toastService.showMessage(`This player's name has been changed to **${args.name}**.${args.revisionReason ? ` (reason: **${args.revisionReason}**)` : ""}`);
+  protected handleAdminNameChangeRequest() {
+    this.modalService.openConfirm({ bodyContent: "Are you sure?" });
   }
 
   protected async handleRemovePlayerConfirm(player: SimpleEntity) {
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 cd964e3e1..7bea19669 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
@@ -78,10 +78,13 @@ export class PlayerNamesComponent {
   }
 
   async approveName(model: Player) {
+    const requested = model.name;
+    const approved = model.approvedName;
+
     model.approvedName = model.name;
     model.nameStatus = "";
     model.pendingName = "";
-    await this.adminService.approvePlayerName(model.id, { name: model.name });
+    await this.adminService.updatePlayerNameChangeRequest(model.id, { approvedName: approved, requestedName: requested, status: "" });
   }
 
   resetName(model: Player): void {
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 d1e96685e..3fdadcf7b 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
@@ -35,16 +35,13 @@ <h2>Suggested searches</h2>
     <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.
+            Players are able to save certificates in PDF format for each practice challenge they fully complete. Choose
+            a template below to customize the appearance of these certificates.
         </p>
 
-        <textarea class="form-control" (input)="handleSettingsChanged(ctx.settings)"
-            [placeholder]="certificateHtmlPlaceholder" [(ngModel)]="ctx.settings.certificateHtmlTemplate"
-            rows="5"></textarea>
-        <button type="button" class="btn btn-link text-success" (click)="handleShowCertificateTemplateHelp()">
-            How do I create a certificate template?
-        </button>
+        <app-certificate-template-picker [selectedTemplateId]="ctx.settings.certificateTemplateId" [hideLabel]="true"
+            (selected)="handleCertificateTemplateSelect($event)"
+            defaultOptionText="[no global practice certificate template]"></app-certificate-template-picker>
     </div>
 
     <div class="concurrent-sessions-container settings-section">
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 72d054070..3e13a7070 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
@@ -1,10 +1,11 @@
+import { CertificateTemplateView } from '@/certificates/certificates.models';
 import { PracticeModeSettings } from '@/prac/practice.models';
 import { MarkdownHelpersService } from '@/services/markdown-helpers.service';
 import { ModalConfirmService } from '@/services/modal-confirm.service';
 import { PracticeService } from '@/services/practice.service';
 import { UnsubscriberService } from '@/services/unsubscriber.service';
 import { Component, OnInit } from '@angular/core';
-import { Subject, debounceTime, firstValueFrom, map, of, tap } from 'rxjs';
+import { Subject, debounceTime, firstValueFrom, map } from 'rxjs';
 
 interface PracticeSettingsContext {
   introTextPlaceholder: string;
@@ -23,18 +24,6 @@ export class PracticeSettingsComponent implements OnInit {
   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");
-
   constructor(
     private modalService: ModalConfirmService,
     private markdownHelpers: MarkdownHelpersService,
@@ -55,13 +44,13 @@ export class PracticeSettingsComponent implements OnInit {
     this.suggestedSearchesLineDelimited = this.ctx.settings.suggestedSearches.join("\n");
   }
 
-  protected handleShowCertificateTemplateHelp() {
-    this.modalService.open({
-      title: "Creating a certificate template",
-      bodyContent: this.certificateHtmlPlaceholder,
-      modalClasses: ["modal-lg"],
-      renderBodyAsMarkdown: true
-    });
+  protected handleCertificateTemplateSelect(template?: CertificateTemplateView) {
+    if (!this.ctx) {
+      return;
+    }
+
+    this.ctx.settings.certificateTemplateId = template?.id;
+    this._startUpdate$.next(this.ctx.settings);
   }
 
   protected handleShowSuggestedSearchesNote() {
diff --git a/projects/gameboard-ui/src/app/api/admin.models.ts b/projects/gameboard-ui/src/app/api/admin.models.ts
index b8012acd4..931f62f0b 100644
--- a/projects/gameboard-ui/src/app/api/admin.models.ts
+++ b/projects/gameboard-ui/src/app/api/admin.models.ts
@@ -31,11 +31,6 @@ export interface AppActiveChallengeGame {
     isTeamGame: boolean;
 }
 
-export interface ApprovePlayerNameRequest {
-    name: string;
-    revisionReason?: string;
-}
-
 export interface GetAppActiveChallengesResponse {
     specs: AppActiveChallengeSpec[];
 }
@@ -89,3 +84,9 @@ export interface SendAnnouncement {
     title?: string;
     teamId?: string;
 }
+
+export interface UpdatePlayerNameChangeRequest {
+    approvedName: string;
+    requestedName: string;
+    status: string;
+}
diff --git a/projects/gameboard-ui/src/app/api/admin.service.ts b/projects/gameboard-ui/src/app/api/admin.service.ts
index 4f8e288ec..da859693f 100644
--- a/projects/gameboard-ui/src/app/api/admin.service.ts
+++ b/projects/gameboard-ui/src/app/api/admin.service.ts
@@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
 import { DateTime } from 'luxon';
 import { Observable, firstValueFrom, map, tap } from 'rxjs';
 import { ApiUrlService } from '@/services/api-url.service';
-import { ApprovePlayerNameRequest, GetAppActiveChallengesResponse, GetAppActiveTeamsResponse, GetPlayersCsvExportResponse, GetPlayersCsvExportResponsePlayer, GetSiteOverviewStatsResponse, SendAnnouncement } from './admin.models';
+import { UpdatePlayerNameChangeRequest, GetAppActiveChallengesResponse, GetAppActiveTeamsResponse, GetPlayersCsvExportResponse, GetPlayersCsvExportResponsePlayer, GetSiteOverviewStatsResponse, SendAnnouncement } from './admin.models';
 import { PlayerMode } from './player-models';
 import { GameCenterContext, GameCenterPracticeContext, GameCenterTeamsRequestArgs, GameCenterTeamsResults, GetGameCenterPracticeContextRequest } from '@/admin/components/game-center/game-center.models';
 
@@ -13,7 +13,7 @@ export class AdminService {
     private apiUrl: ApiUrlService,
     private http: HttpClient) { }
 
-  async approvePlayerName(playerId: string, request: ApprovePlayerNameRequest) {
+  async updatePlayerNameChangeRequest(playerId: string, request: UpdatePlayerNameChangeRequest) {
     return await firstValueFrom(this.http.put(this.apiUrl.build(`admin/players/${playerId}/name`), request));
   }
 
diff --git a/projects/gameboard-ui/src/app/api/certificates.service.ts b/projects/gameboard-ui/src/app/api/certificates.service.ts
index 6aca5b6bd..e85ee6423 100644
--- a/projects/gameboard-ui/src/app/api/certificates.service.ts
+++ b/projects/gameboard-ui/src/app/api/certificates.service.ts
@@ -3,8 +3,8 @@ import { Injectable } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Observable, firstValueFrom, forkJoin, map } from 'rxjs';
 import { ApiUrlService } from '@/services/api-url.service';
-import { PracticeModeCertificate, PublishedCertificateViewModel } from '@/users/users.models';
 import { PlayerMode } from './player-models';
+import { CertificateTemplateView, CompetitiveModeCertificate, PracticeModeCertificate, PublishedCertificateViewModel, UpsertCertificateTemplate } from '@/certificates/certificates.models';
 
 @Injectable({ providedIn: 'root' })
 export class CertificatesService {
@@ -13,10 +13,10 @@ export class CertificatesService {
     private domSanitizer: DomSanitizer,
     private http: HttpClient) { }
 
-  getCertificateImage(mode: PlayerMode, userId: string, challengeSpecId: string, requestedName?: string) {
+  getCertificateImage(mode: PlayerMode, userId: string, awardedForEntityId: string, requestedName?: string) {
     const queryArgs = requestedName ? `?requestedNameOverride=${requestedName}` : "";
 
-    return this.http.get(this.apiUrl.build(`user/${userId}/certificates/${this.coerceCompetitionModeString(mode)}/${challengeSpecId}${queryArgs}`), {
+    return this.http.get(this.apiUrl.build(`user/${userId}/certificates/${this.coerceCompetitionModeString(mode)}/${awardedForEntityId}${queryArgs}`), {
       responseType: "arraybuffer"
     }).pipe(
       map(response => new Blob([response])),
@@ -25,6 +25,22 @@ export class CertificatesService {
     );
   }
 
+  getCertificatePreviewImage(templateId: string) {
+    return firstValueFrom(
+      this.http.get(this.apiUrl.build(`certificates/templates/${templateId}/preview`), {
+        responseType: "arraybuffer"
+      }).pipe(
+        map(response => new Blob([response])),
+        map(blob => window.URL.createObjectURL(blob)),
+        map(url => this.domSanitizer.bypassSecurityTrustUrl(url))
+      )
+    );
+  }
+
+  getCompetitiveCertificates(userId: string): Promise<CompetitiveModeCertificate[]> {
+    return firstValueFrom(this.http.get<CompetitiveModeCertificate[]>(this.apiUrl.build(`user/${userId}/certificates/competitive`)));
+  }
+
   getPracticeCertificates(userId: string): Observable<PracticeModeCertificate[]> {
     return this.http.get<PracticeModeCertificate[]>(this.apiUrl.build(`user/${userId}/certificates/practice`));
   }
@@ -44,6 +60,22 @@ export class CertificatesService {
         .delete<PublishedCertificateViewModel>(this.apiUrl.build(`user/${ownerUserId}/certificates/${this.coerceCompetitionModeString(mode)}/${awardedForEntityId}`)));
   }
 
+  public async templateDelete(id: string): Promise<void> {
+    await firstValueFrom(this.http.delete(this.apiUrl.build(`certificates/templates/${id}`)));
+  }
+
+  public templateList(): Promise<CertificateTemplateView[]> {
+    return firstValueFrom(this.http.get<CertificateTemplateView[]>(this.apiUrl.build("certificates/templates")));
+  }
+
+  public templateCreate(template: UpsertCertificateTemplate): Promise<CertificateTemplateView> {
+    return firstValueFrom(this.http.post<CertificateTemplateView>(this.apiUrl.build("certificates/templates"), template));
+  }
+
+  public templateUpdate(template: UpsertCertificateTemplate): Promise<CertificateTemplateView> {
+    return firstValueFrom(this.http.put<CertificateTemplateView>(this.apiUrl.build(`certificates/templates/${template.id}`), template));
+  }
+
   private coerceCompetitionModeString(mode: PlayerMode) {
     return mode == PlayerMode.competition ? "competitive" : "practice";
   }
diff --git a/projects/gameboard-ui/src/app/api/game-models.ts b/projects/gameboard-ui/src/app/api/game-models.ts
index c401e17fd..0fe8150b3 100644
--- a/projects/gameboard-ui/src/app/api/game-models.ts
+++ b/projects/gameboard-ui/src/app/api/game-models.ts
@@ -22,7 +22,9 @@ export interface GameDetail {
   gameEnd: Date;
   gameMarkdown: string;
   feedbackConfig: string;
-  certificateTemplate: string;
+  certificateTemplateId?: string;
+  practiceCertificateTemplateId?: string;
+  certificateTemplateLegacy: string;
   externalHostId?: string;
   feedbackTemplate?: FeedbackTemplate;
   challengesFeedbackTemplateId?: string;
diff --git a/projects/gameboard-ui/src/app/certificates/certificates.models.ts b/projects/gameboard-ui/src/app/certificates/certificates.models.ts
new file mode 100644
index 000000000..03ad3d544
--- /dev/null
+++ b/projects/gameboard-ui/src/app/certificates/certificates.models.ts
@@ -0,0 +1,65 @@
+import { SimpleEntity } from "@/api/models";
+import { PlayerMode } from "@/api/player-models";
+import { DateTime, Duration } from "luxon";
+
+export interface CertificateTemplateView {
+    id?: string;
+    name: string;
+    content: string;
+    createdByUser: SimpleEntity;
+    useAsPracticeTemplateForGames: SimpleEntity[];
+    useAsTemplateForGames: SimpleEntity[];
+}
+
+export interface CompetitiveModeCertificate {
+    playerName: string;
+    teamName: string;
+    userName: string;
+    duration: Duration;
+    game: CertificateGameView;
+    date: DateTime;
+    rank?: number;
+    score: number;
+    uniquePlayerCount: number;
+    uniqueTeamCount: number;
+}
+
+export interface PracticeModeCertificate {
+    challenge: {
+        id: string;
+        name: string;
+        description: string;
+        challengeSpecId: string;
+    };
+    date: Date;
+    game: CertificateGameView;
+    ownerUser: SimpleEntity;
+    playerName: string;
+    publishedOn?: Date;
+    score: number;
+    time: Duration;
+}
+
+export interface CertificateGameView {
+    id: string;
+    name: string;
+    season: string;
+    track: string;
+    division: string;
+    series: string;
+    isTeamGame: boolean;
+    maxPossibleScore: number;
+}
+
+export interface PublishedCertificateViewModel {
+    id?: string;
+    publishedOn?: Date;
+    awardedForEntity: SimpleEntity;
+    mode: PlayerMode;
+}
+
+export interface UpsertCertificateTemplate {
+    id?: string | null;
+    name: string;
+    content: string;
+}
diff --git a/projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.html b/projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.html
new file mode 100644
index 000000000..e0807b72d
--- /dev/null
+++ b/projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.html
@@ -0,0 +1,20 @@
+<div class="certificate-template-previewer-component">
+    <ng-container *ngIf="!isDownloading; else loading">
+        <div class="gameboard-print">
+            <img class="certificate-img" [src]="imageUrl" alt="Certificate Preview Image" (load)="handleImageLoad()"
+                *ngIf="imageUrl" (error)="handleError($event)" />
+        </div>
+
+        <ng-template #notPublished>
+            <div class="is-not-published">
+                This certificate either doesn't exist or has not been published by its owner.
+            </div>
+        </ng-template>
+    </ng-container>
+</div>
+
+<ng-template #loading>
+    <app-spinner>
+        Loading your preview...
+    </app-spinner>
+</ng-template>
diff --git a/projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.scss b/projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.scss
new file mode 100644
index 000000000..8e284e9ef
--- /dev/null
+++ b/projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.scss
@@ -0,0 +1,8 @@
+.gameboard-print {
+  display: flex;
+  justify-content: center;
+}
+
+img {
+  height: 100vh;
+}
diff --git a/projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.ts b/projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.ts
new file mode 100644
index 000000000..2de408508
--- /dev/null
+++ b/projects/gameboard-ui/src/app/certificates/components/certificate-previewer/certificate-previewer.component.ts
@@ -0,0 +1,46 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SimpleEntity } from '@/api/models';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CertificatesService } from '@/api/certificates.service';
+import { SafeUrl } from '@angular/platform-browser';
+import { SpinnerComponent } from '@/standalone/core/components/spinner/spinner.component';
+import { WindowService } from '@/services/window.service';
+
+@Component({
+  selector: 'app-certificate-previewer',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SpinnerComponent
+  ],
+  templateUrl: './certificate-previewer.component.html',
+  styleUrls: ['./certificate-previewer.component.scss']
+})
+export class CertificatePreviewerComponent implements OnInit {
+  protected errors: any[] = [];
+  protected isDownloading = false;
+  protected imageUrl?: SafeUrl;
+  protected template?: SimpleEntity;
+
+  private route = inject(ActivatedRoute);
+  private certificatesService = inject(CertificatesService);
+
+  async ngOnInit(): Promise<void> {
+    const templateId = this.route.snapshot.queryParamMap.get("templateId");
+
+    if (!templateId) {
+      this.errors.push("Template ID is required.");
+    }
+
+    this.imageUrl = await this.certificatesService.getCertificatePreviewImage(templateId || "");
+  }
+
+  protected handleError(ev: ErrorEvent) {
+    this.errors.push(ev);
+  }
+
+  protected handleImageLoad() {
+    this.isDownloading = false;
+  }
+}
diff --git a/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.html b/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.html
new file mode 100644
index 000000000..27a2d4247
--- /dev/null
+++ b/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.html
@@ -0,0 +1,127 @@
+<div class="feedback-template-picker-component">
+    <div class="form-group">
+        <label *ngIf="!hideLabel" for="feedbackTemplate" class="form-label">
+            {{ labelText || "Certificate Template" }}
+        </label>
+
+        <div class="input-group">
+            <select id="feedbackTemplate" class="form-control" [(ngModel)]="selectedTemplate"
+                (change)="handleTemplateSelect()">
+                <option [ngValue]="undefined">{{ defaultOptionText }}</option>
+                <option *ngFor="let template of templates" [ngValue]="template">
+                    {{ template.name }}
+                </option>
+            </select>
+
+            <div class="input-group-append gb-button-group">
+                <button type="button" class="btn btn-success btn-sm" (click)="handleCreate()">
+                    <fa-icon [icon]="fa.plus"></fa-icon>
+                </button>
+
+                <ng-container *ngIf="selectedTemplate">
+                    <a class="btn btn-success btn-sm p-0"
+                        [routerLink]="['/admin', 'certificates', 'templates', selectedTemplateId, 'preview']"
+                        [queryParams]="{ templateId: this.selectedTemplate.id}" target="_blank"
+                        tooltip="Preview this certificate template">
+                        <fa-icon [icon]="fa.eye"></fa-icon>
+                    </a>
+                    <button type="button" class="btn btn-success btn-sm" (click)="handleEdit()"
+                        tooltip="Edit this template">
+                        <fa-icon [icon]="fa.edit"></fa-icon>
+                    </button>
+                    <button type="button" class="btn btn-success btn-sm" [appCopyOnClick]="selectedTemplate.content"
+                        tooltip="Copy this template's HTML configuration"
+                        appCopyOnClickMessage="Copied this template's HTML to your clipboard.">
+                        <fa-icon [icon]="fa.copy"></fa-icon>
+                    </button>
+                    <button type="button" class="btn btn-danger btn-sm" (click)="handleDelete()"
+                        tooltip="Delete this template">
+                        <fa-icon [icon]="fa.trash"></fa-icon>
+                    </button>
+                </ng-container>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 
+<ng-template #previewTemplate>
+    <ng-container *ngIf="selectedTemplate">
+        <app-modal-content [title]="selectedTemplate.name" subtitle="Preview Certificate Template" [hideCancel]="true">
+
+        </app-modal-content>
+    </ng-container>
+</ng-template>
+-->
+
+<ng-template #createEditModal>
+    <app-modal-content title="{{ createEditForm.value.id ? 'Edit' : 'Create' }} Certificate Template"
+        [confirmDisabled]="!!!createEditForm.valid" [subtitle]="createEditForm.value.name || ''"
+        (confirm)="handleModalSubmit()">
+
+        <form [formGroup]="createEditForm">
+            <input type="hidden" formControlName="id" name="id">
+            <div class="form-group">
+                <label for="name" class="form-label">Name</label>
+                <input type="text" class="form-control" formControlName="name" required appAutofocus
+                    placeholder="Enter a name for your certificate template (like &quot;Hackathon Winners&quot;)">
+            </div>
+
+            <div class="form-group">
+                <label for="content" class="form-label">Template</label>
+                <textarea type="text" class="form-control font-fixed-width" formControlName="content" required rows="10"
+                    placeholder="Enter a certificate template here. You can also click the button below to paste an example feedback configuration or use the other controls to copy an existing template.">
+                    </textarea>
+            </div>
+        </form>
+
+        <ng-container *ngIf="createEditForm.touched && !createEditForm.valid">
+            <alert type="warning" class="my-2">
+                <h5>Oops. A thing or two to sort out here...</h5>
+                <ul class="my-2 ml-2 li-style-type-circle">
+                    <li *ngIf="createEditForm.controls['name'].hasError('required')">
+                        Your certificate template needs a name so you can find it later. How about "Super Sweet
+                        Certificate Template of Awesome Accomplishment"?
+                    </li>
+                    <li *ngIf="createEditForm.controls['content'].hasError('required')">
+                        A template isn't complete without HTML. Enter some in the box above to style the certificate.
+                    </li>
+                </ul>
+            </alert>
+        </ng-container>
+
+        <div class="d-flex align-items-center">
+            <!-- <button type="button" class="btn btn-sm btn-success d-block mr-2" [disabled]="!sampleConfig"
+                (click)="handlePasteSample()">
+                Paste Example Configuration
+            </button> -->
+
+            <div class="mr-2">
+                <hr class="light">
+                <label class="copy-from-label d-block text-muted mr-2 mb-0">Copy from: </label>
+
+                <div class="input-group">
+                    <select class="form-control custom-select custom-select-sm" #copyTemplateContentSelect>
+                        <option value="">[Choose a template to copy from]</option>
+                        <option *ngFor="let template of templates" [value]="template.content">
+                            {{ template.name }}
+                        </option>
+                    </select>
+
+                    <div class="input-group-append">
+                        <button type="button" class="btn btn-sm btn-warning"
+                            (click)="handleCopyFromTemplate(copyTemplateContentSelect.value)"
+                            [disabled]="!copyTemplateContentSelect.value">
+                            <fa-icon [icon]="fa.copy"></fa-icon>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div footer>
+            <a href="https://cmu-sei.github.io/crucible/gameboard/completion-certificates/" target="_blank">
+                About certificate templates
+            </a>
+        </div>
+    </app-modal-content>
+</ng-template>
diff --git a/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.scss b/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.scss
new file mode 100644
index 000000000..e54978ac1
--- /dev/null
+++ b/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.scss
@@ -0,0 +1,3 @@
+.form-group {
+  padding: 0;
+}
diff --git a/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.ts b/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.ts
new file mode 100644
index 000000000..52a453ff0
--- /dev/null
+++ b/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.ts
@@ -0,0 +1,136 @@
+import { Component, EventEmitter, inject, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, Validators } from '@angular/forms';
+import { CoreModule } from '@/core/core.module';
+import { CertificateTemplateView } from '@/certificates/certificates.models';
+import { fa } from "@/services/font-awesome.service";
+import { CertificatesService } from '@/api/certificates.service';
+import { ModalConfirmService } from '@/services/modal-confirm.service';
+
+@Component({
+  selector: 'app-certificate-template-picker',
+  standalone: true,
+  imports: [
+    CommonModule,
+    CoreModule,
+  ],
+  templateUrl: './certificate-template-picker.component.html',
+  styleUrls: ['./certificate-template-picker.component.scss']
+})
+export class CertificateTemplatePickerComponent implements OnInit, OnChanges {
+  @Input() defaultOptionText = "[no feedback template]";
+  @Input() hideLabel = false;
+  @Input() labelText = "";
+  @Input() selectedTemplateId?: string;
+  @Output() selected = new EventEmitter<CertificateTemplateView | undefined>();
+  @ViewChild("createEditModal") createEditModal?: TemplateRef<any>;
+
+  private certificatesService = inject(CertificatesService);
+  private formBuilder = inject(FormBuilder);
+  private initialLoad = false;
+  private modalService = inject(ModalConfirmService);
+
+  protected fa = fa;
+  protected createEditForm = this.formBuilder.group({
+    id: this.formBuilder.control(""),
+    name: this.formBuilder.control("", Validators.required),
+    content: this.formBuilder.control("", Validators.required)
+  });
+  protected selectedTemplate?: CertificateTemplateView;
+  protected templates: CertificateTemplateView[] = [];
+
+  async ngOnInit(): Promise<void> {
+    if (!this.initialLoad) {
+      await this.load();
+    }
+  }
+
+  async ngOnChanges(changes: SimpleChanges): Promise<void> {
+    if (changes.selectedTemplateId?.currentValue && changes.selectedTemplateId.currentValue !== this.selectedTemplate?.id) {
+      await this.load();
+      this.selectedTemplate = this.templates.find(t => t.id === changes.selectedTemplateId.currentValue);
+    }
+  }
+
+  protected handleCreate() {
+    if (!this.createEditModal) {
+      throw new Error("Couldn't resolve the modal template");
+    }
+
+    this.createEditForm.setValue({
+      id: "",
+      name: "",
+      content: ""
+    });
+
+    this.modalService.openTemplate(this.createEditModal);
+  }
+
+  protected handleEdit() {
+    if (!this.createEditModal) {
+      throw new Error("Couldn't resolve the modal template");
+    }
+
+    if (!this.selectedTemplate) {
+      throw new Error("No template selected");
+    }
+
+    this.createEditForm.setValue({
+      id: this.selectedTemplate.id!,
+      name: this.selectedTemplate.name,
+      content: this.selectedTemplate.content
+    });
+
+    this.modalService.openTemplate(this.createEditModal);
+  }
+
+  protected async handleModalSubmit() {
+    if (!this.createEditForm.valid) {
+      throw new Error("Template isn't valid.");
+    }
+
+    this.modalService.hide();
+
+    const request = {
+      id: this.createEditForm.value.id,
+      name: this.createEditForm.value.name || "New Certificate Template",
+      content: this.createEditForm.value.content || '<div class="template"></div>'
+    };
+    if (!this.createEditForm.value.id) {
+      await this.certificatesService.templateCreate(request);
+    } else {
+      await this.certificatesService.templateUpdate(request);
+    }
+
+    await this.load();
+
+    if (this.createEditForm.value.id) {
+      this.selectedTemplate = this.templates.find(t => t.id === this.createEditForm.value.id);
+    }
+    else {
+      this.selectedTemplate = undefined;
+    }
+  }
+
+  protected handleCopyFromTemplate(otherTemplateContent: string) {
+    this.createEditForm.patchValue({ content: otherTemplateContent }, { emitEvent: true });
+  }
+
+  protected async handleDelete() {
+    if (!this.selectedTemplate?.id) {
+      throw new Error("No template selected");
+    }
+
+    await this.certificatesService.templateDelete(this.selectedTemplate.id!);
+    await this.load();
+  }
+
+  protected handleTemplateSelect() {
+    this.selected.emit(this.selectedTemplate);
+  }
+
+  private async load() {
+    this.initialLoad = true;
+    this.templates = await this.certificatesService.templateList();
+  }
+}
diff --git a/projects/gameboard-ui/src/app/core/components/gameboard-performance-summary/gameboard-performance-summary.component.html b/projects/gameboard-ui/src/app/core/components/gameboard-performance-summary/gameboard-performance-summary.component.html
index a138e01d9..e71ef55c9 100644
--- a/projects/gameboard-ui/src/app/core/components/gameboard-performance-summary/gameboard-performance-summary.component.html
+++ b/projects/gameboard-ui/src/app/core/components/gameboard-performance-summary/gameboard-performance-summary.component.html
@@ -17,7 +17,7 @@
             <tr>
                 <td *ngIf="ctx.player.scoring.rank">Rank</td>
                 <td>Score</td>
-                <td>Cumulative Time</td>
+                <td>Session Time</td>
                 <td>Completes</td>
                 <td>Partials</td>
             </tr>
diff --git a/projects/gameboard-ui/src/app/feedback/components/feedback-template-picker/feedback-template-picker.component.html b/projects/gameboard-ui/src/app/feedback/components/feedback-template-picker/feedback-template-picker.component.html
index e38632a08..21dcf0ebe 100644
--- a/projects/gameboard-ui/src/app/feedback/components/feedback-template-picker/feedback-template-picker.component.html
+++ b/projects/gameboard-ui/src/app/feedback/components/feedback-template-picker/feedback-template-picker.component.html
@@ -117,7 +117,8 @@ <h5>Oops. A thing or two to sort out here...</h5>
                 <div class="input-group">
                     <select class="form-control custom-select custom-select-sm" #copyTemplateContentSelect>
                         <option value="">[Choose a template to copy from]</option>
-                        <option *ngFor="let template of templates" [value]="template.id">{{ template.name }}</option>
+                        <option *ngFor="let template of templates" [value]="template.content">{{ template.name }}
+                        </option>
                     </select>
 
                     <div class="input-group-append">
diff --git a/projects/gameboard-ui/src/app/game/pages/game-page/game-page.component.html b/projects/gameboard-ui/src/app/game/pages/game-page/game-page.component.html
index 1aae69579..9436cbb9d 100644
--- a/projects/gameboard-ui/src/app/game/pages/game-page/game-page.component.html
+++ b/projects/gameboard-ui/src/app/game/pages/game-page/game-page.component.html
@@ -39,7 +39,7 @@
 
     <!-- if auth'd, enrolled, opened a session, game ended, and certificate defined -->
     <ng-container
-      *ngIf="!!ctx.user.id && !!ctx.player.id && !!ctx.player.sessionEnd && ctx.game.hasEnded && !!ctx.game.certificateTemplate">
+      *ngIf="!!ctx.user.id && !!ctx.player.id && !!ctx.player.sessionEnd && ctx.game.hasEnded && !!ctx.game.certificateTemplateLegacy">
       <div class="row justify-content-center">
         <div class="col panel">
           <div tabindex="0" (click)="showCert = !showCert">
diff --git a/projects/gameboard-ui/src/app/prac/components/practice-challenge-solved-modal/practice-challenge-solved-modal.component.html b/projects/gameboard-ui/src/app/prac/components/practice-challenge-solved-modal/practice-challenge-solved-modal.component.html
index 09d706175..642b25fff 100644
--- a/projects/gameboard-ui/src/app/prac/components/practice-challenge-solved-modal/practice-challenge-solved-modal.component.html
+++ b/projects/gameboard-ui/src/app/prac/components/practice-challenge-solved-modal/practice-challenge-solved-modal.component.html
@@ -16,10 +16,12 @@ <h2>Congratulations!</h2>
             </span>
         </p>
 
-        <div class="feedback-container my-4">
-            <!-- <app-feedback-form *ngIf="feedbackFormContext" [boardPlayer]="feedbackFormContext.boardPlayer"
-                title="Practice Challenge Feedback" [spec]="feedbackFormContext.boardSpec"
-                [hideIfFeedbackProvidedPreviously]="true" type="challenge"></app-feedback-form> -->
+        <div class="feedback-container my-4" *ngIf="feedbackTemplateId">
+            <app-feedback-submission-form
+                [feedbackEntity]="{ entityType: 'challengeSpec', id: context.challenge.spec.id}"
+                [templateId]="feedbackTemplateId">
+
+            </app-feedback-submission-form>
         </div>
 
         <p>
diff --git a/projects/gameboard-ui/src/app/prac/components/practice-challenge-solved-modal/practice-challenge-solved-modal.component.ts b/projects/gameboard-ui/src/app/prac/components/practice-challenge-solved-modal/practice-challenge-solved-modal.component.ts
index 1ef1bc2a8..081e820de 100644
--- a/projects/gameboard-ui/src/app/prac/components/practice-challenge-solved-modal/practice-challenge-solved-modal.component.ts
+++ b/projects/gameboard-ui/src/app/prac/components/practice-challenge-solved-modal/practice-challenge-solved-modal.component.ts
@@ -6,6 +6,7 @@ import { PracticeService } from '@/services/practice.service';
 import { RouterService } from '@/services/router.service';
 import { UnsubscriberService } from '@/services/unsubscriber.service';
 import { BsModalRef } from 'ngx-bootstrap/modal';
+import { GameService } from '@/api/game.service';
 
 export interface PracticeChallengeSolvedModalContext {
   challenge: UserActiveChallenge;
@@ -20,9 +21,11 @@ export interface PracticeChallengeSolvedModalContext {
 export class PracticeChallengeSolvedModalComponent implements OnInit {
   context?: PracticeChallengeSolvedModalContext;
   protected certificateUrl?: string;
+  protected feedbackTemplateId?: string;
   protected isCertificateConfigured = false;
 
   constructor(
+    private gameService: GameService,
     private practiceService: PracticeService,
     private routerService: RouterService,
     private unsub: UnsubscriberService,
@@ -33,13 +36,14 @@ export class PracticeChallengeSolvedModalComponent implements OnInit {
       throw new Error("Can't resolve the context for the PracticeChallengeSolvedModalComponent.");
     }
 
+    // we need the game to check its challenges feedback template and its cert template
+    const game = await firstValueFrom(this.gameService.retrieve(this.context.challenge.game.id));
+
+    this.feedbackTemplateId = game.challengesFeedbackTemplateId;
     const practiceSettings = await firstValueFrom(this.practiceService.getSettings());
-    this.isCertificateConfigured = !!practiceSettings.certificateHtmlTemplate;
+    this.isCertificateConfigured = !!game.practiceCertificateTemplateId || !!practiceSettings.certificateTemplateId;
     this.certificateUrl = this.routerService.getCertificatePrintableUrl(PlayerMode.practice, this.context.challenge.spec.id);
 
-    // load feedback form data
-    // this.feedbackFormContext = await this.loadFeedbackFormContext(this.context.challenge);
-
     // wire up event handler for background-click dismiss
     if (this.modalRef.onHidden) {
       this.unsub.add(
@@ -52,22 +56,4 @@ export class PracticeChallengeSolvedModalComponent implements OnInit {
     this.modalRef.hide();
     this.routerService.toPracticeArea();
   }
-
-  // private async loadFeedbackFormContext(challenge: UserActiveChallenge): Promise<LegacyFeedbackFormContext | undefined> {
-  //   const player = await firstValueFrom(this.boardService.load(challenge.player.id));
-
-  //   if (!player.game.feedbackTemplate?.challenge?.length)
-  //     return undefined;
-
-  //   return {
-  //     boardPlayer: player,
-  //     boardSpec: {
-  //       id: challenge.spec.id,
-  //       instance: {
-  //         id: challenge.challengeDeployment.challengeId,
-  //         state: { isActive: challenge.challengeDeployment.isDeployed },
-  //       }
-  //     }
-  //   };
-  // }
 }
diff --git a/projects/gameboard-ui/src/app/prac/components/practice-session/practice-session.component.ts b/projects/gameboard-ui/src/app/prac/components/practice-session/practice-session.component.ts
index 7db9f8b1b..fb4f74e7c 100644
--- a/projects/gameboard-ui/src/app/prac/components/practice-session/practice-session.component.ts
+++ b/projects/gameboard-ui/src/app/prac/components/practice-session/practice-session.component.ts
@@ -153,6 +153,7 @@ export class PracticeSessionComponent implements OnInit {
           challenge
         }
       },
+      modalClasses: ["modal-xl"]
     });
   }
 
diff --git a/projects/gameboard-ui/src/app/prac/prac.module.ts b/projects/gameboard-ui/src/app/prac/prac.module.ts
index 05bcbcfd1..848fce794 100644
--- a/projects/gameboard-ui/src/app/prac/prac.module.ts
+++ b/projects/gameboard-ui/src/app/prac/prac.module.ts
@@ -20,6 +20,7 @@ import { SpinnerComponent } from '@/standalone/core/components/spinner/spinner.c
 import { EpochMsToTimeRemainingStringPipe } from '@/standalone/core/pipes/epoch-ms-to-time-remaining.pipe';
 import { EpochMsToMsRemainingPipe } from '@/standalone/core/pipes/epoch-ms-to-ms-remaining.pipe';
 import { InfoBubbleComponent } from '@/standalone/core/components/info-bubble/info-bubble.component';
+import { FeedbackSubmissionFormComponent } from "../feedback/components/feedback-submission-form/feedback-submission-form.component";
 
 @NgModule({
   declarations: [
@@ -46,14 +47,14 @@ import { InfoBubbleComponent } from '@/standalone/core/components/info-bubble/in
       }
     ]),
     GameModule,
-
     // standalones
     EpochMsToMsRemainingPipe,
     EpochMsToTimeRemainingStringPipe,
     ErrorDivComponent,
     InfoBubbleComponent,
     PlayComponent,
-    SpinnerComponent
+    SpinnerComponent,
+    FeedbackSubmissionFormComponent
   ]
 })
 export class PracModule { }
diff --git a/projects/gameboard-ui/src/app/prac/practice.models.ts b/projects/gameboard-ui/src/app/prac/practice.models.ts
index 989e9cdd0..8eba1a52e 100644
--- a/projects/gameboard-ui/src/app/prac/practice.models.ts
+++ b/projects/gameboard-ui/src/app/prac/practice.models.ts
@@ -11,7 +11,7 @@ export interface SearchGamesResult {
 
 export interface PracticeModeSettings {
     attemptLimit?: number;
-    certificateHtmlTemplate: string;
+    certificateTemplateId?: string;
     defaultPracticeSessionLengthMinutes: number;
     introTextMarkdown: string;
     maxConcurrentPracticeSessions: number | null;
diff --git a/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.html b/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.html
index ab9107910..8f6cd2f8c 100644
--- a/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.html
+++ b/projects/gameboard-ui/src/app/reports/components/report-stat-summary/report-stat-summary.component.html
@@ -31,7 +31,13 @@ <h2 class="text-center text-upper mb-5">Summary</h2>
 <ng-template #collapsedView>
     <ul class="d-flex">
         <li *ngFor="let stat of allStats" class="d-block mr-4">
-            <strong>{{ stat.label }}: </strong> <span class="text-success">{{stat.value}}</span>
+            <strong>{{ stat.label }}: </strong>
+            <span class="text-success">
+                {{stat.value}}
+                <span class="text-muted" *ngIf="stat.additionalInfo">
+                    {{ stat.additionalInfo }}
+                </span>
+            </span>
         </li>
     </ul>
 </ng-template>
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 5cec53312..4be1a8dda 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
@@ -125,13 +125,13 @@ export class EnrollmentReportComponent extends ReportComponentBase<EnrollmentRep
             `(${stats.sponsorWithMostPlayers!.distinctPlayerCount} players)` : ""
         };
 
-        const otherStats = [
+        const otherStats: ReportSummaryStat[] = [
           { label: "Games", value: stats.distinctGameCount },
           { label: "Players", value: stats.distinctPlayerCount },
-          { label: "Teams", value: stats.distinctTeamCount },
+          { label: "Teams", value: stats.distinctTeamCount, },
           { label: "Sponsors", value: stats.distinctSponsorCount },
-          { label: "Teams With Unstarted Sessions", value: stats.teamsWithNoSessionCount },
-          { label: "Teams With No Started Challenges", value: stats.teamsWithNoStartedChallengeCount }
+          { label: "Teams With Unstarted Sessions", value: stats.teamsWithNoSessionCount, additionalInfo: `(${stats.playersWithNoSessionCount} players)` },
+          { label: "Teams With No Started Challenges", value: stats.teamsWithNoStartedChallengeCount, additionalInfo: `(${stats.playersWithNoStartedChallengeCount} players)` }
         ]
           .filter(e => !!e)
           .map(e => e! as ReportSummaryStat);
diff --git a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts
index bc96d4139..50baed167 100644
--- a/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts
+++ b/projects/gameboard-ui/src/app/reports/components/reports/enrollment-report/enrollment-report.models.ts
@@ -83,6 +83,8 @@ export interface EnrollmentReportStatSummary {
         sponsor: ReportSponsor,
         distinctPlayerCount: number;
     }
+    playersWithNoSessionCount: number;
+    playersWithNoStartedChallengeCount: number;
     teamsWithNoSessionCount: number;
     teamsWithNoStartedChallengeCount: number;
 }
@@ -101,18 +103,6 @@ export interface EnrollmentReportLineChartResponse {
     periodEnd: DateTime;
 }
 
-// export interface EnrollmentReportLineChartPlayer {
-//     id: string;
-//     name: string;
-//     game: SimpleEntity;
-//     enrollDate: Date;
-// }
-
-// export interface EnrollmentReportLineChartPlayerGame {
-//     id: string;
-//     gameId: string;
-// }
-
 // these are client side models that represents the data after it's been structured from the API
 export interface EnrollmentReportLineChartViewModel {
     byDate: Map<DateTime, number>;
diff --git a/projects/gameboard-ui/src/app/standalone/games/components/play/play.component.html b/projects/gameboard-ui/src/app/standalone/games/components/play/play.component.html
index 09cd2da10..ad4a84d8c 100644
--- a/projects/gameboard-ui/src/app/standalone/games/components/play/play.component.html
+++ b/projects/gameboard-ui/src/app/standalone/games/components/play/play.component.html
@@ -89,7 +89,7 @@ <h5>Questions</h5>
         <div class="support-container mt-4">
             <h5>Need help?</h5>
 
-            <ul class="support-links li-style-type-circle">
+            <ul class="support-links li-style-type-circle ml-2">
                 <li>
                     <a target="_blank" [routerLink]="['/support/create']" [queryParams]="{cid: challenge.id}">
                         <span>Open a ticket</span>
diff --git a/projects/gameboard-ui/src/app/users/components/certificate-printer/certificate-printer.component.ts b/projects/gameboard-ui/src/app/users/components/certificate-printer/certificate-printer.component.ts
index b05a132e4..2cbea3f4b 100644
--- a/projects/gameboard-ui/src/app/users/components/certificate-printer/certificate-printer.component.ts
+++ b/projects/gameboard-ui/src/app/users/components/certificate-printer/certificate-printer.component.ts
@@ -1,4 +1,5 @@
 import { Component, TemplateRef, ViewChild } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { SafeUrl } from '@angular/platform-browser';
 import { firstValueFrom } from 'rxjs';
@@ -6,11 +7,10 @@ import { WindowService } from '@/services/window.service';
 import { CertificatesService } from '@/api/certificates.service';
 import { PlayerMode } from '@/api/player-models';
 import { LogService } from '@/services/log.service';
-import { ConfigService } from '@/utility/config.service';
 import { ModalConfirmService } from '@/services/modal-confirm.service';
 import { UnsubscriberService } from '@/services/unsubscriber.service';
 import { RouterService } from '@/services/router.service';
-import { FormControl, FormGroup } from '@angular/forms';
+import { ConfigService } from '@/utility/config.service';
 
 @Component({
   selector: 'app-certificate-printer',
@@ -95,7 +95,7 @@ export class CertificatePrinterComponent {
   private async downloadCertificate(providedName?: string) {
     this.isDownloading = true;
     this.imageUrl = undefined;
-    this.title = `${this.viewModel.mode} Certificate | `;
+    this.title = `${this.viewModel.mode} Certificate | ${this.configService.appName}`;
 
     if (!this.viewModel.userId || !this.viewModel.awardedForEntityId) {
       throw new Error(`Couldn't resolve user and entity for certificate (user ${this.viewModel.userId}, entity ${this.viewModel.awardedForEntityId}).`);
diff --git a/projects/gameboard-ui/src/app/users/components/certificate-publish-controls/certificate-publish-controls.component.ts b/projects/gameboard-ui/src/app/users/components/certificate-publish-controls/certificate-publish-controls.component.ts
index 8a0e3b551..ae88ea580 100644
--- a/projects/gameboard-ui/src/app/users/components/certificate-publish-controls/certificate-publish-controls.component.ts
+++ b/projects/gameboard-ui/src/app/users/components/certificate-publish-controls/certificate-publish-controls.component.ts
@@ -2,8 +2,8 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { CertificatesService } from '@/api/certificates.service';
 import { UserService as LocalUser } from "@/utility/user.service";
 import { ModalConfirmService } from '@/services/modal-confirm.service';
-import { PracticeModeCertificate, PublishedCertificateViewModel } from '@/users/users.models';
 import { ConfigService } from '@/utility/config.service';
+import { PublishedCertificateViewModel } from '@/certificates/certificates.models';
 
 @Component({
   selector: 'app-certificate-publish-controls',
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 35ee08239..2064e8a4e 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
@@ -1,8 +1,6 @@
 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',
@@ -18,9 +16,7 @@ export class CertificatesComponent implements OnInit {
 
   async ngOnInit() {
     // the page defaults to competitive certificates through navigation. If
-    // practice area isn't enabled or if there's no certificate template, hide the tabbed
-    // interface since it's not needed.
-    const practiceSettings = await firstValueFrom(this.practiceService.getSettings());
-    this.showTabs = await this.practiceService.isEnabled() && !!practiceSettings.certificateHtmlTemplate;
+    // practice area isn't enabled, hide the tabbed interface since it's not needed.
+    this.showTabs = await this.practiceService.isEnabled();
   }
 }
diff --git a/projects/gameboard-ui/src/app/users/components/competitive-certificates/competitive-certificates.component.html b/projects/gameboard-ui/src/app/users/components/competitive-certificates/competitive-certificates.component.html
index 3656e14ed..e90a6ec46 100644
--- a/projects/gameboard-ui/src/app/users/components/competitive-certificates/competitive-certificates.component.html
+++ b/projects/gameboard-ui/src/app/users/components/competitive-certificates/competitive-certificates.component.html
@@ -1,4 +1,4 @@
-<table *ngIf="certs$ | async as certs; else loading" class="table table-striped table-hover gameboard-table">
+<table *ngIf="!isLoading; else loading" class="table table-striped table-hover gameboard-table">
   <col class="width-30">
   <col class="width-15">
   <col class="width-35">
@@ -14,34 +14,37 @@
   </thead>
 
   <tbody>
-    <tr class="data-row cursor-pointer" *ngFor="let cert of certs">
+    <tr class="data-row cursor-pointer" *ngFor="let certificate of certificates">
       <td>
-        <a class="btn btn-link d-block text-left p-0" [routerLink]="['/', 'game', cert.game.id]">
-          <span class="h5">{{cert.game.name}}</span>
+        <a class="btn btn-link d-block text-left p-0" [routerLink]="['/', 'game', certificate.game.id]">
+          <span class="h5">{{certificate.game.name}}</span>
         </a>
         <div class="text-muted">
-          <span> {{cert.game.gameEnd | shortdate}}</span>
+          <span> {{certificate.date | shortdate}}</span>
         </div>
       </td>
       <td>
-        <span class="text-center">{{cert.player.rank}} <fa-icon [icon]=" faMedal"></fa-icon></span>
+        <span class="text-center">{{certificate.rank}} <fa-icon [icon]="faMedal"></fa-icon></span>
       </td>
       <td>
-        <span><fa-icon [icon]="cert.game.allowTeam ? faUsers : faUser"></fa-icon>
-          {{cert.player.approvedName}}</span>
+        <span><fa-icon [icon]="certificate.game.isTeamGame ? faUsers : faUser"></fa-icon>
+          {{certificate.playerName}}</span>
       </td>
       <td class="text-right">
         <div class="d-flex align-items-center justify-content-end">
-          <app-certificate-publish-controls class="d-block mr-2" [certificate]="toPublishedViewModel(cert)"
-            (publishStatusChange)="loadCertificates()"></app-certificate-publish-controls>
-          <button class="btn btn-success" (click)="print(cert)">Open</button>
+          <app-certificate-publish-controls class="d-block mr-2" [certificate]="toPublishedViewModel(certificate)"
+            (publishStatusChange)="load()"></app-certificate-publish-controls>
+          <a *ngIf="apiHost && (localUser$ | async)?.id" target="_blank" class="btn btn-success"
+            [href]="'user/' + (localUser$ | async)!.id + '/certificates/competitive/' + certificate.game.id | relativeToAbsoluteHref">
+            Open
+          </a>
         </div>
       </td>
     </tr>
   </tbody>
 </table>
 
-<ng-container *ngIf="!(certs$ | async)?.length">
+<ng-container *ngIf="!certificates.length">
   <div class="text-center text-muted my-4">
     No certificates yet
   </div>
@@ -49,6 +52,6 @@
 
 <ng-template #loading>
   <div class="text-center">
-    <app-spinner></app-spinner>
+    <app-spinner>Loading your certificates...</app-spinner>
   </div>
 </ng-template>
diff --git a/projects/gameboard-ui/src/app/users/components/competitive-certificates/competitive-certificates.component.ts b/projects/gameboard-ui/src/app/users/components/competitive-certificates/competitive-certificates.component.ts
index 87fda9348..877b74a2b 100644
--- a/projects/gameboard-ui/src/app/users/components/competitive-certificates/competitive-certificates.component.ts
+++ b/projects/gameboard-ui/src/app/users/components/competitive-certificates/competitive-certificates.component.ts
@@ -1,49 +1,53 @@
-import { Component, OnInit, SecurityContext } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
+import { Component, OnInit } from '@angular/core';
 import { faArrowLeft, faAward, faPrint, faMedal, faUser, faUsers } from '@fortawesome/free-solid-svg-icons';
-import { Observable } from 'rxjs';
 import { competitiveCertificateToPublishedViewmodel } from '@/users/functions';
-import { PlayerCertificate } from '../../../api/player-models';
-import { PlayerService } from '../../../api/player.service';
+import { CompetitiveModeCertificate } from '@/certificates/certificates.models';
+import { CertificatesService } from '@/api/certificates.service';
+import { UserService as LocalUserService } from '@/utility/user.service';
+import { ConfigService } from '@/utility/config.service';
+import { ApiUser } from '@/api/user-models';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-certificate-list',
   templateUrl: './competitive-certificates.component.html',
   styleUrls: ['./competitive-certificates.component.scss']
 })
-export class CompetitiveCertificatesComponent {
+export class CompetitiveCertificatesComponent implements OnInit {
   faArrowLeft = faArrowLeft;
   faAward = faAward;
   faMedal = faMedal;
   faPrint = faPrint;
   faUser = faUser;
   faUsers = faUsers;
-  certs$?: Observable<PlayerCertificate[]>;
+
+  protected apiHost = "";
+  protected isLoading = false;
+  protected localUser$: Observable<ApiUser | null>;
   protected toPublishedViewModel = competitiveCertificateToPublishedViewmodel;
+  protected certificates: CompetitiveModeCertificate[] = [];
 
   constructor(
-    private apiPlayer: PlayerService,
-    private sanitizer: DomSanitizer
+    private certificatesService: CertificatesService,
+    private configService: ConfigService,
+    private localUser: LocalUserService
   ) {
-    this.loadCertificates();
+    this.localUser$ = localUser.user$;
   }
 
-  print(cert: PlayerCertificate): void {
-    let printWindow = window.open('', '', '');
-    // make sure background is always there and no margins to print to pdf as is
-    printWindow?.document?.write(`<style type="text/css">* {-webkit-print-color-adjust: exact !important; color-adjust: exact !important; }</style>`);
-    printWindow?.document?.write(`<style type="text/css">@media print { body { margin: 0mm!important;} @page{ margin: 0mm!important; }}</style>`);
-    printWindow?.document?.write(`<style type="text/css" media="print"> @page { size: landscape; } </style>`);
-    printWindow?.document.write(cert.html);
-    printWindow?.document.close();
-    printWindow?.focus();
-    // we're no longer automatically popping the print dialogue because we want them to assume responsibility for scaling/orienting the output
-    // (since we can't control it with CSS very well)
-    // printWindow?.addEventListener('load', printWindow?.print, true); // wait until all content loads before printing
+  async ngOnInit(): Promise<void> {
+    this.apiHost = this.configService.apphost;
+    this.localUser$ = this.localUser.user$;
+    await this.load();
   }
 
-  protected loadCertificates() {
-    this.certs$ = this.apiPlayer.getUserCertificates();
-  }
+  protected async load(): Promise<void> {
+    if (!this.localUser.user$.value?.id) {
+      return;
+    }
 
+    this.isLoading = true;
+    this.certificates = await this.certificatesService.getCompetitiveCertificates(this.localUser.user$.value.id);
+    this.isLoading = false;
+  }
 }
diff --git a/projects/gameboard-ui/src/app/users/components/practice-certificates/practice-certificates.component.html b/projects/gameboard-ui/src/app/users/components/practice-certificates/practice-certificates.component.html
index 6067c4e3d..b1a1e57df 100644
--- a/projects/gameboard-ui/src/app/users/components/practice-certificates/practice-certificates.component.html
+++ b/projects/gameboard-ui/src/app/users/components/practice-certificates/practice-certificates.component.html
@@ -17,12 +17,13 @@
         <tbody>
             <tr class="data-row cursor-pointer" *ngFor="let certificate of ctx.certificates">
                 <td>
-                    <span class="h5 p-0">
+                    <div class="h5 p-0 mb-0">
                         <a target="_blank"
                             [routerLink]="['/practice/', certificate.challenge.challengeSpecId, slug(certificate.challenge.name) ]">
                             {{ certificate.challenge.name }}
                         </a>
-                    </span>
+                    </div>
+                    <div class="text-muted m-0">{{ certificate.game.name }}</div>
                 </td>
                 <td>{{ certificate.score }}</td>
                 <td>{{ certificate.date | friendlyDateAndTime }}</td>
diff --git a/projects/gameboard-ui/src/app/users/components/practice-certificates/practice-certificates.component.scss b/projects/gameboard-ui/src/app/users/components/practice-certificates/practice-certificates.component.scss
index c989ffa38..018775bee 100644
--- a/projects/gameboard-ui/src/app/users/components/practice-certificates/practice-certificates.component.scss
+++ b/projects/gameboard-ui/src/app/users/components/practice-certificates/practice-certificates.component.scss
@@ -1,4 +1,4 @@
 .data-row {
-    height: 3rem !important;
-    line-height: 3rem !important;
+  height: 3rem !important;
+  // line-height: 3rem !important;
 }
diff --git a/projects/gameboard-ui/src/app/users/components/practice-certificates/practice-certificates.component.ts b/projects/gameboard-ui/src/app/users/components/practice-certificates/practice-certificates.component.ts
index 5d3c52ddf..13d3e2731 100644
--- a/projects/gameboard-ui/src/app/users/components/practice-certificates/practice-certificates.component.ts
+++ b/projects/gameboard-ui/src/app/users/components/practice-certificates/practice-certificates.component.ts
@@ -4,8 +4,8 @@ import { slug } from '@/../tools/functions';
 import { CertificatesService } from '@/api/certificates.service';
 import { UserService as LocalUser } from '@/utility/user.service';
 import { ConfigService } from '@/utility/config.service';
-import { PracticeModeCertificate } from '@/users/users.models';
 import { practiceCertificateToPublishedViewModel } from '@/users/functions';
+import { PracticeModeCertificate } from '@/certificates/certificates.models';
 
 interface PracticeCertificatesContext {
   certificates: PracticeModeCertificate[];
diff --git a/projects/gameboard-ui/src/app/users/functions.ts b/projects/gameboard-ui/src/app/users/functions.ts
index 3a5ba6900..5f4eec1a3 100644
--- a/projects/gameboard-ui/src/app/users/functions.ts
+++ b/projects/gameboard-ui/src/app/users/functions.ts
@@ -1,5 +1,5 @@
-import { PlayerCertificate, PlayerMode } from "@/api/player-models";
-import { PracticeModeCertificate, PublishedCertificateViewModel } from "./users.models";
+import { PlayerMode } from "@/api/player-models";
+import { CompetitiveModeCertificate, PracticeModeCertificate, PublishedCertificateViewModel } from "@/certificates/certificates.models";
 
 export function practiceCertificateToPublishedViewModel(certificate: PracticeModeCertificate): PublishedCertificateViewModel {
     return {
@@ -9,12 +9,10 @@ export function practiceCertificateToPublishedViewModel(certificate: PracticeMod
     };
 }
 
-export function competitiveCertificateToPublishedViewmodel(certificate: PlayerCertificate): PublishedCertificateViewModel {
+export function competitiveCertificateToPublishedViewmodel(certificate: CompetitiveModeCertificate): PublishedCertificateViewModel {
     return {
-        id: undefined,
-        publishedOn: certificate.publishedOn,
+        ...certificate,
         awardedForEntity: { id: certificate.game.id, name: certificate.game.name },
-        ownerUser: { id: certificate.player.userId, name: certificate.player.approvedName },
         mode: PlayerMode.competition
     };
 }
diff --git a/projects/gameboard-ui/src/app/users/users.models.ts b/projects/gameboard-ui/src/app/users/users.models.ts
index ffe2a613f..0411ccbfa 100644
--- a/projects/gameboard-ui/src/app/users/users.models.ts
+++ b/projects/gameboard-ui/src/app/users/users.models.ts
@@ -1,37 +1,3 @@
-import { Duration } from "luxon";
-import { SimpleEntity } from "@/api/models";
-import { PlayerMode } from "@/api/player-models";
-
-export interface PracticeModeCertificate {
-    challenge: {
-        id: string;
-        name: string;
-        description: string;
-        challengeSpecId: string;
-    };
-    date: Date;
-    game: {
-        id: string;
-        name: string;
-        season: string;
-        track: string;
-        division: string;
-    }
-    ownerUser: SimpleEntity;
-    playerName: string;
-    publishedOn?: Date;
-    score: number;
-    time: Duration;
-}
-
-export interface PublishedCertificateViewModel {
-    id?: string;
-    publishedOn?: Date;
-    awardedForEntity: SimpleEntity;
-    ownerUser: SimpleEntity;
-    mode: PlayerMode;
-}
-
 export interface UserAppSettings {
     useStickyChallengePanel: boolean;
 }
diff --git a/projects/gameboard-ui/src/app/users/users.module.ts b/projects/gameboard-ui/src/app/users/users.module.ts
index f5efe7128..66ee78df1 100644
--- a/projects/gameboard-ui/src/app/users/users.module.ts
+++ b/projects/gameboard-ui/src/app/users/users.module.ts
@@ -14,7 +14,6 @@ import { ProfileHistoryComponent } from './components/profile-history/profile-hi
 import { UserPageComponent } from './components/user-page/user-page.component';
 import { SponsorsModule } from '@/sponsors/sponsors.module';
 import { SettingsComponent } from './components/settings/settings.component';
-import { UserService as LocalUserService } from '@/utility/user.service';
 import { UserRolePermissionsService } from '@/api/user-role-permissions.service';
 import { SpinnerComponent } from '@/standalone/core/components/spinner/spinner.component';
 
@@ -59,7 +58,6 @@ const DECLARED_COMPONENTS = [
             component: SettingsComponent,
             canActivate: [() => {
               const permissionsService = inject(UserRolePermissionsService);
-              const localUser = inject(LocalUserService);
 
               return permissionsService.can("Admin_View");
             }]
diff --git a/projects/gameboard-ui/src/assets/templates/certificate-template.sample.html b/projects/gameboard-ui/src/assets/templates/certificate-template.sample.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/projects/gameboard-ui/src/assets/templates/practice-certificate.template.html b/projects/gameboard-ui/src/assets/templates/practice-certificate.template.html
deleted file mode 100644
index 7d5fcddf8..000000000
--- a/projects/gameboard-ui/src/assets/templates/practice-certificate.template.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <title>{{title}}</title>
-</head>
-
-<body>
-    <style>
-        * {
-            -webkit-print-color-adjust: exact !important;
-            print-color-adjust: exact !important;
-        }
-
-        @media print {
-            @page {
-                margin: 0;
-                padding: 0;
-                size: 2550px 3300px landscape;
-            }
-        }
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        html,
-        body {
-            margin: 0;
-            height: 2550px;
-            width: 3300px;
-        }
-
-        .gameboard-print-html {
-            height: 100%;
-            width: 100%;
-        }
-    </style>
-    <div class="gameboard-print-html">
-        {{bodyContent}}
-    </div>
-</body>
-
-</html>
diff --git a/projects/gameboard-ui/src/styles.scss b/projects/gameboard-ui/src/styles.scss
index 1f20330ff..c9744a007 100644
--- a/projects/gameboard-ui/src/styles.scss
+++ b/projects/gameboard-ui/src/styles.scss
@@ -179,6 +179,12 @@ app-root {
   color: $danger !important;
 }
 
+a.btn fa-icon {
+  display: block;
+  padding: 4px;
+  margin: 4px 2px 0 2px;
+}
+
 fa-icon + span {
   margin-left: 4px;
 }
@@ -204,6 +210,10 @@ th[align="center"] {
   border-left: solid 1px white;
 }
 
+.gb-button-group > a {
+  border-left: solid 1px #fff;
+}
+
 table.gameboard-table {
   width: 100%;
   margin-bottom: 0;
@@ -400,7 +410,7 @@ tabset a.nav-link.active {
 }
 
 .custom-bg-orange {
-  background-color: #431;
+  background-color: #ffac1c;
 }
 
 .custom-bg-yellow {