diff --git a/projects/gameboard-ui/src/app/admin/challenge-observer/challenge-observer.component.html b/projects/gameboard-ui/src/app/admin/challenge-observer/challenge-observer.component.html
index 3fe6bd16..ae190e42 100644
--- a/projects/gameboard-ui/src/app/admin/challenge-observer/challenge-observer.component.html
+++ b/projects/gameboard-ui/src/app/admin/challenge-observer/challenge-observer.component.html
@@ -25,15 +25,15 @@ <h2>Observe Challenges</h2>
   </div>
   <div class="input-group mt-2 mb-0 ml-auto col-5">
     <div id="feedbackType-input" #selectType class="btn-group mb-2 ml-auto" btnRadioGroup name="sortType" tabindex="0"
-    [(ngModel)]="sort" [ngModelOptions]="{updateOn: 'change'}">
-    <label class="btn btn-outline-dark btn-md text-white" btnRadio="byName">
-      <fa-icon [icon]="faSortAlphaDown"></fa-icon>
-      Name
-    </label>
-    <label class="btn btn-outline-dark btn-md text-white" btnRadio="byRank">
-      <fa-icon [icon]="faSortAmountDown"></fa-icon>
-      Rank
-    </label>
+      [(ngModel)]="sort" [ngModelOptions]="{updateOn: 'change'}">
+      <label class="btn btn-outline-dark btn-md text-white" btnRadio="byName">
+        <fa-icon [icon]="faSortAlphaDown"></fa-icon>
+        Name
+      </label>
+      <label class="btn btn-outline-dark btn-md text-white" btnRadio="byRank">
+        <fa-icon [icon]="faSortAmountDown"></fa-icon>
+        Rank
+      </label>
     </div>
   </div>
 </div> <!-- end row for search and filtering -->
@@ -49,24 +49,31 @@ <h4 class="col-2 text-right p-0">Challenge Score</h4>
     <h4 class="col-2 text-right">Consoles</h4>
   </div>
   <div class="d-flex flex-column">
-    <ng-container *ngIf="(!!table.size || !isLoading) && {actors: fetchActors$ | async, term : (term$ | async) ?? ''} as updates; else loading">
-      <div *ngFor="let row of table | keyvalue:sortByName; trackBy:trackByChallengeId;" [class]="row.value.pinned ? 'pinned' : ''"
-        [ngStyle]="{'order': row.value.gameRank | observeorder:row.value.pinned:sort:maxRank }"> 
+    <ng-container
+      *ngIf="(!!table.size || !isLoading) && {actors: fetchActors$ | async, term : (term$ | async) ?? ''} as updates; else loading">
+      <div *ngFor="let row of table | keyvalue:sortByName; trackBy:trackByChallengeId;"
+        [class]="row.value.pinned ? 'pinned' : ''"
+        [ngStyle]="{'order': row.value.gameRank | observeorder:row.value.pinned:sort:maxRank }">
         <ng-container *ngIf="row.value | matchesterm:updates.term:'playerName':'name':'tag':'id'">
           <div class="row mx-0 border-top border-light py-2">
             <div class="col-2 align-self-center pl-1 text-left">
-              <button class="mr-1 btn btn-sm border-0" [class]="row.value.pinned ?  'btn-outline-success' : 'btn-outline-light'" 
+              <button class="mr-1 btn btn-sm border-0"
+                [class]="row.value.pinned ?  'btn-outline-success' : 'btn-outline-light'"
                 (click)="togglePinRow(row.value)">
-                <fa-icon class="pin-icon" [icon]="faAngleDoubleUp" [rotate]="row.value.pinned ? 90 : undefined"></fa-icon>
+                <fa-icon class="pin-icon" [icon]="faAngleDoubleUp"
+                  [rotate]="row.value.pinned ? 90 : undefined"></fa-icon>
               </button>
               <span>{{row.value.playerName}}</span>
             </div>
             <div class="col-2 align-self-center text-right">{{row.value.gameScore | number}} {{""}}</div>
-            <div class="col-2 align-self-center text-left">{{row.value.name}}<span class="badge badge-light text-black ml-2">{{row.value.id | slice:0:8}} {{row.value.tag}}</span></div>
+            <div class="col-2 align-self-center text-left">{{row.value.name}}<span
+                class="badge badge-light text-black ml-2">{{row.value.id | slice:0:8}} {{row.value.tag}}</span></div>
             <div class="col-2 align-self-center text-right">{{row.value.duration | clock }}</div>
             <div class="col-2 align-self-center text-right">{{row.value.challengeScore | number}}</div>
             <div class="col-2 align-self-center text-right">
-              <button *ngIf="row.value.consoles?.length" class="btn btn-sm" [class]="row.value.expanded ? 'btn-success' : 'btn-outline-success' "(click)="toggleShowConsoles(row.value)">
+              <button *ngIf="row.value.consoles?.length" class="btn btn-sm"
+                [class]="row.value.expanded ? 'btn-success' : 'btn-outline-success' "
+                (click)="toggleShowConsoles(row.value)">
                 <fa-icon [icon]="faGrid"></fa-icon>
               </button>
             </div>
@@ -84,22 +91,26 @@ <h4 class="col-2 text-right">Consoles</h4>
                         </button>
                       </div>
                       <div class="mx-0 px-0 text-right">
-                        <button class="btn btn-outline-success btn-sm px-2 py-1 border-0 ml-1" (click)="minimizeAllOthers(vm, row.value)">
+                        <button class="btn btn-outline-success btn-sm px-2 py-1 border-0 ml-1"
+                          (click)="minimizeAllOthers(vm, row.value)">
                           <fa-icon [icon]="faWindowRestore"></fa-icon>
                         </button>
-                        <button class="btn btn-outline-success btn-sm px-2 py-1 border-0 ml-1" (click)="toggleMinimize(vm)">
+                        <button class="btn btn-outline-success btn-sm px-2 py-1 border-0 ml-1"
+                          (click)="toggleMinimize(vm)">
                           <fa-icon [icon]="faMinusSquare"></fa-icon>
                         </button>
-                        <button class="btn btn-outline-success btn-sm px-2 py-1 border-0 mr-1" (click)="toggleFullWidth(vm)">
+                        <button class="btn btn-outline-success btn-sm px-2 py-1 border-0 mr-1"
+                          (click)="toggleFullWidth(vm)">
                           <fa-icon [icon]="vm.fullWidth ? faCompressAlt : faExpandAlt"></fa-icon>
                         </button>
                       </div>
                     </div> <!-- end console header -->
-                    <div *ngIf="updates.actors?.get(row.value.id+'#'+vm.name) as activeUsers" class="mx-1 mb-1 p-0 text-left" >
-                        <span *ngFor="let user of activeUsers" class="badge badge-success m-1 text-break text-dark">
-                          <fa-icon class="pr-1" [icon]="faUser"></fa-icon>
-                          {{user.userName}}
-                        </span>
+                    <div *ngIf="updates.actors?.get(row.value.id+'#'+vm.name) as activeUsers"
+                      class="mx-1 mb-1 p-0 text-left">
+                      <span *ngFor="let user of activeUsers" class="badge badge-success m-1 text-break text-dark">
+                        <fa-icon class="pr-1" [icon]="faUser"></fa-icon>
+                        {{user.userName}}
+                      </span>
                     </div> <!-- end users list header -->
                     <div class="iframe-wrapper mt-auto" style="padding: 0px;">
                       <iframe class="rounded-bottom w-100 h-100" frameborder="0"
@@ -115,7 +126,7 @@ <h4 class="col-2 text-right">Consoles</h4>
                 <div *ngIf="vm.minimized" class="m-0 p-2">
                   <button class="btn btn-outline-success btn-sm p-2 w-100" (click)="toggleMinimize(vm)">
                     <div *ngIf="updates.actors?.get(row.value.id+'#'+vm.name)?.length as userCount" class="float-left">
-                      <fa-icon [icon]="faUser" ></fa-icon>
+                      <fa-icon [icon]="faUser"></fa-icon>
                       <span>{{userCount}}</span>
                     </div>
                     <span class="mx-3">{{vm.name}}</span>
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 c0142910..e8d6d4c2 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
@@ -98,7 +98,6 @@ <h4>Challenge Specs</h4>
     <!-- edit spec map locations -->
     <div [hidden]="viewing!=='map'">
 
-
       <div #mapbox class="mapbox" [class.mapbox-active]="!!this.specDrag" [class.mapbox-hover]="!!specHover">
         <div #callout class="callout bg-primary m-0 p-4" [hidden]="!this.specHover">
           <span>{{this.specHover?.name}}</span><br />
@@ -125,9 +124,6 @@ <h4>Challenge Specs</h4>
           </ng-container>
         </svg>
       </div>
-
     </div>
-
   </div>
-
 </div>
diff --git a/projects/gameboard-ui/src/app/admin/user-api-keys/user-api-keys.component.html b/projects/gameboard-ui/src/app/admin/user-api-keys/user-api-keys.component.html
index 146a018c..475e37b0 100644
--- a/projects/gameboard-ui/src/app/admin/user-api-keys/user-api-keys.component.html
+++ b/projects/gameboard-ui/src/app/admin/user-api-keys/user-api-keys.component.html
@@ -32,9 +32,15 @@ <h6>You've got a new API key!</h6>
                 <th></th>
             </tr>
             <tr *ngFor="let key of apiKeys || []">
-                <td [innerHTML]="key.name || '<em>Unnamed</em>' | safeHtml"></td>
+                <td>
+                    <span *ngIf="key.name else unnamedKey">{{key.name}}</span>
+                    <ng-template #unnamedKey><em>Unnamed</em></ng-template>
+                </td>
                 <td>{{ key.generatedOn | shortdate }}</td>
-                <td [innerHTML]="(!!key.expiresOn ? (key.expiresOn | shortdate) : '<em>Doesn\'t expire</em>')"></td>
+                <td>
+                    <span *ngIf="!!key.expiresOn">{{key.expiresOn | shortdate}}</span>
+                    <ng-template #noExpiresKey><em>Doesn't expire</em></ng-template>
+                </td>
                 <td>
                     <app-confirm-button btnClass="btn btn-danger" (confirm)="delete(key.id)">
                         <span>Delete</span>
diff --git a/projects/gameboard-ui/src/app/core/core.module.ts b/projects/gameboard-ui/src/app/core/core.module.ts
index 0bf52685..3b98cd14 100644
--- a/projects/gameboard-ui/src/app/core/core.module.ts
+++ b/projects/gameboard-ui/src/app/core/core.module.ts
@@ -11,7 +11,7 @@ import { PlayerAvatarListComponent } from './components/player-avatar-list/playe
 import { ModalConfirmComponent } from './components/modal/modal-confirm.component';
 import { ModalConfirmDirective } from './directives/modal-confirm.directive';
 import { PlayerStatusComponent } from './components/player-status/player-status.component';
-import { SafeHtmlPipe } from './pipes/safe-html.pipe';
+import { SanitizeHtmlPipe } from './pipes/sanitize-html.pipe';
 import { YamlBlockComponent } from './components/yaml-block/yaml-block.component';
 import { YamlPipe } from './pipes/yaml.pipe';
 import { CustomInputComponent } from './components/custom-input/custom-input.component';
@@ -25,7 +25,7 @@ const PUBLIC_DECLARATIONS = [
   PlayerAvatarListComponent,
   PlayerStatusComponent,
   RelativeUrlsPipe,
-  SafeHtmlPipe,
+  SanitizeHtmlPipe,
   UrlRewritePipe,
   YamlBlockComponent,
   YamlPipe
diff --git a/projects/gameboard-ui/src/app/core/pipes/linkify-html.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/linkify-html.pipe.ts
index d54ab07c..42942026 100644
--- a/projects/gameboard-ui/src/app/core/pipes/linkify-html.pipe.ts
+++ b/projects/gameboard-ui/src/app/core/pipes/linkify-html.pipe.ts
@@ -1,4 +1,4 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import linkifyHtml from 'linkify-html';
 
@@ -6,7 +6,7 @@ import linkifyHtml from 'linkify-html';
 export class LinkifyHtmlPipe implements PipeTransform {
   constructor(private domSanitizer: DomSanitizer) { }
 
-  transform(value: string, ...args: unknown[]): SafeHtml {
-    return this.domSanitizer.bypassSecurityTrustHtml(linkifyHtml(value, { nl2br: true }));
+  transform(value: string, ...args: unknown[]): string {
+    return this.domSanitizer.sanitize(SecurityContext.HTML, linkifyHtml(value, { nl2br: true })) || "";
   }
 }
diff --git a/projects/gameboard-ui/src/app/core/pipes/safe-html.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/safe-html.pipe.ts
deleted file mode 100644
index 58065c87..00000000
--- a/projects/gameboard-ui/src/app/core/pipes/safe-html.pipe.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-
-@Pipe({ name: 'safeHtml' })
-export class SafeHtmlPipe implements PipeTransform {
-    constructor(private domSanitizer: DomSanitizer) { }
-
-    transform(value: string): SafeHtml {
-        return this.domSanitizer.bypassSecurityTrustHtml(value);
-    }
-}
diff --git a/projects/gameboard-ui/src/app/core/pipes/sanitize-html.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/sanitize-html.pipe.ts
new file mode 100644
index 00000000..3e00d2c5
--- /dev/null
+++ b/projects/gameboard-ui/src/app/core/pipes/sanitize-html.pipe.ts
@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'sanitizeHtml' })
+export class SanitizeHtmlPipe implements PipeTransform {
+    constructor(private domSanitizer: DomSanitizer) { }
+
+    transform(value: string): string {
+        return this.domSanitizer.sanitize(SecurityContext.HTML, value) || '';
+    }
+}
diff --git a/projects/gameboard-ui/src/app/game/certificate/certificate.component.ts b/projects/gameboard-ui/src/app/game/certificate/certificate.component.ts
index cae6140f..d0ce92a0 100644
--- a/projects/gameboard-ui/src/app/game/certificate/certificate.component.ts
+++ b/projects/gameboard-ui/src/app/game/certificate/certificate.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, SecurityContext } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { faPrint } from '@fortawesome/free-solid-svg-icons';
 import { Observable } from 'rxjs';
@@ -13,7 +13,7 @@ import { PlayerService } from '../../api/player.service';
 })
 export class CertificateComponent implements OnInit {
   @Input() ctx!: GameContext;
-  cert$!: Observable<SafeHtml>;
+  cert$!: Observable<string>;
   toPrint: string = "";
   faPrint = faPrint;
 
@@ -26,7 +26,7 @@ export class CertificateComponent implements OnInit {
     this.cert$ = this.apiPlayer.getCertificate(this.ctx.player.id).pipe(
       tap(g => this.toPrint = g.html),
       // sanitize html to render in iframe binding and add wrapper div to center certificate
-      map(g => this.sanitizer.bypassSecurityTrustHtml(`<div style="max-width: max-content; margin: auto;">${g.html}</div>`)),
+      map(g => this.sanitizer.sanitize(SecurityContext.HTML, `<div style="max-width: max-content; margin: auto;">${g.html}</div>`) || ''),
     );
   }
 
diff --git a/projects/gameboard-ui/src/app/home/certificate-list/certificate-list.component.html b/projects/gameboard-ui/src/app/home/certificate-list/certificate-list.component.html
index ee51eee6..ea4fab51 100644
--- a/projects/gameboard-ui/src/app/home/certificate-list/certificate-list.component.html
+++ b/projects/gameboard-ui/src/app/home/certificate-list/certificate-list.component.html
@@ -14,7 +14,8 @@ <h2>Certificates</h2>
   <div *ngFor="let cert of certs" class="row rounded bg-secondary mb-1 mx-0 py-2">
     <div class="col-3 d-flex flex-wrap">
       <div class="ml-2">
-        <a class="btn btn-link p-0 text-left" [routerLink]="['/', 'game', cert.game.id]"><span class="mr-2 h5">{{cert.game.name}}</span></a>
+        <a class="btn btn-link p-0 text-left" [routerLink]="['/', 'game', cert.game.id]"><span
+            class="mr-2 h5">{{cert.game.name}}</span></a>
         <div class="text-muted">
           <span> {{cert.game.gameEnd | shortdate}}</span>
         </div>
@@ -24,15 +25,16 @@ <h2>Certificates</h2>
       <span class="mr-4">{{cert.player.rank}} <fa-icon [icon]="faMedal"></fa-icon></span>
     </div>
     <div class="col-4 align-self-center">
-      <span class=""><fa-icon [icon]="cert.game.allowTeam ? faUsers : faUser"></fa-icon> {{cert.player.approvedName}}</span>
+      <span class=""><fa-icon [icon]="cert.game.allowTeam ? faUsers : faUser"></fa-icon>
+        {{cert.player.approvedName}}</span>
     </div>
     <div class="col-2 align-self-center text-right ml-auto">
-      <button *ngIf="true" class="btn btn-outline-success btn-sm ml-1" (click)="print(cert.html)">
+      <button *ngIf="true" class="btn btn-outline-success btn-sm ml-1" (click)="print(cert)">
         <fa-icon [icon]="faPrint"></fa-icon>
         <span>Print</span>
       </button>
     </div>
-  </div> 
+  </div>
   <div *ngIf="!certs?.length" class="text-center text-muted my-4">
     No certificates yet
   </div>
diff --git a/projects/gameboard-ui/src/app/home/certificate-list/certificate-list.component.ts b/projects/gameboard-ui/src/app/home/certificate-list/certificate-list.component.ts
index 4109baae..aa4a3b9c 100644
--- a/projects/gameboard-ui/src/app/home/certificate-list/certificate-list.component.ts
+++ b/projects/gameboard-ui/src/app/home/certificate-list/certificate-list.component.ts
@@ -1,8 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, SecurityContext } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { faArrowLeft, faAward, faPrint, faMedal, faUser, faUsers } from '@fortawesome/free-solid-svg-icons';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { PlayerCertificate } from '../../api/player-models';
 import { PlayerService } from '../../api/player.service';
 
@@ -19,29 +18,28 @@ export class CertificateListComponent implements OnInit {
   faUser = faUser;
   faUsers = faUsers;
   certs$: Observable<PlayerCertificate[]>;
+
   constructor(
-    private apiPlayer: PlayerService,
+    apiPlayer: PlayerService,
     private sanitizer: DomSanitizer
-    ) { 
-      this.certs$ = apiPlayer.getUserCertificates().pipe(
-        map(c => c.map(a => ({...a, safeHtml: sanitizer.bypassSecurityTrustHtml(a.html)}))
-      ));
+  ) {
+    this.certs$ = apiPlayer.getUserCertificates();
   }
 
   ngOnInit(): void {
   }
 
-  print(html: string): void {
+  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(html);
+    printWindow?.document.write(this.sanitizer.sanitize(SecurityContext.HTML, cert.html) || "");
     printWindow?.document.close();
     printWindow?.focus();
     printWindow?.addEventListener('load', printWindow?.print, true); // wait until all content loads before printing
     // don't close new tab automatically in case want to keep open for some reason [ printWindow?.close(); ]
-   }
+  }
 
 }
diff --git a/projects/gameboard-ui/src/app/services/router.service.ts b/projects/gameboard-ui/src/app/services/router.service.ts
index 13725ccd..8b24fa5f 100644
--- a/projects/gameboard-ui/src/app/services/router.service.ts
+++ b/projects/gameboard-ui/src/app/services/router.service.ts
@@ -3,13 +3,16 @@ import { Router } from '@angular/router';
 
 @Injectable({ providedIn: 'root' })
 export class RouterService {
-
   constructor(public router: Router) { }
 
   public goHome(): void {
     this.router.navigateByUrl("/");
   }
 
+  public toSupportTickets(highlightTicketKey: string) {
+    return this.router.navigateByUrl(this.router.parseUrl(`/support/tickets/${highlightTicketKey}`));
+  }
+
   public tryGoBack() {
     const prevUrl = this.router.getCurrentNavigation()?.previousNavigation?.initialUrl;
     if (prevUrl) {
diff --git a/projects/gameboard-ui/src/app/support/ticket-details/ticket-details.component.html b/projects/gameboard-ui/src/app/support/ticket-details/ticket-details.component.html
index 2e8243c9..cecd73c2 100644
--- a/projects/gameboard-ui/src/app/support/ticket-details/ticket-details.component.html
+++ b/projects/gameboard-ui/src/app/support/ticket-details/ticket-details.component.html
@@ -7,7 +7,7 @@
       <span>Back</span>
     </a>
 
-    <h2 class="m-0 p-0 summary-break">
+    <h2 class="mb-1 p-0 summary-break">
       <span class="text-muted">{{ctx.ticket.fullKey}}</span>&nbsp;
       <span *ngIf="!editingContent">{{ctx.ticket.summary}}</span>
     </h2>
@@ -22,8 +22,9 @@ <h2 class="m-0 p-0 summary-break">
         <button class="btn btn-success float-right" (click)="saveEditedTicket()">Save</button>
       </div>
     </div>
-    <div class="d-flex flex-wrap align-items-center mb-2">
-      <h4 class="m-0 p-0"><span class="badge" [class.badge-info]="ctx.ticket.status == 'Open' || !ctx.ticket.status"
+    <div class="d-flex flex-wrap align-items-baseline justify-content-center mb-2">
+      <h4 class="p-0 mr-2">
+        <span class="badge" [class.badge-info]="ctx.ticket.status == 'Open' || !ctx.ticket.status"
           [class.badge-success]="ctx.ticket.status == 'In Progress'"
           [class.badge-dark]="ctx.ticket.status == 'Closed'">{{ctx.ticket.status}}</span>
       </h4>
@@ -69,7 +70,7 @@ <h4 class="m-0 p-0"><span class="badge" [class.badge-info]="ctx.ticket.status ==
           </div>
           <div class="card-body">
             <app-long-content-hider>
-              <p class="card-text" [innerHtml]="ctx.ticket.description | linkifyHtml"></p>
+              <p class="card-text" [innerHtml]="ctx.ticket.description"></p>
             </app-long-content-hider>
             <ng-container *ngIf="editingContent && changedTicket && !!changedTicket?.id">
               <textarea type="text" class="form-control w-100 text-white" rows=8 autocomplete="off"
@@ -101,6 +102,7 @@ <h4 class="mt-2 d-flex justify-content-between">
         <div class="mx-md-4 mx-0 mt-2">
           <div class="card mx-3">
             <div class="card-body rounded p-2">
+              <app-error-div [errors]="errors"></app-error-div>
               <textarea class="form-control w-100 text-white border-0 dark-textarea" [rows]="newCommentFocus? 4 : 2"
                 placeholder="Add a comment..." (focus)="newCommentFocus = true" [(ngModel)]="newCommentText"
                 style="background-color: #111"></textarea>
@@ -131,11 +133,8 @@ <h4 class="mt-2 d-flex justify-content-between">
               </div>
             </div>
           </div>
-
         </div>
 
-
-
         <div *ngIf="!!ctx.ticket.activity" class="mx-md-4 mx-0">
           <div *ngFor="let activity of ctx.ticket.activity; let i = index;" class="border-dark1 border-top1 ">
             <div class="card my-3 mx-3" *ngIf="activity.type == 0"> <!-- Comment -->
@@ -153,7 +152,7 @@ <h4 class="mt-2 d-flex justify-content-between">
               </div>
               <div class="card-body">
                 <app-long-content-hider>
-                  <p class="card-text" [innerHtml]="activity.message | linkifyHtml"></p>
+                  <p class="card-text" [innerHtml]="activity.message"></p>
                 </app-long-content-hider>
                 <div *ngIf="activity.attachmentFiles?.length" class="d-flex overflow-auto my-auto">
                   <ng-container *ngFor="let file of activity.attachmentFiles; let j = index;">
@@ -340,4 +339,4 @@ <h4 id="dialog-sizes-name1" class="modal-title pull-left">
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/projects/gameboard-ui/src/app/support/ticket-details/ticket-details.component.ts b/projects/gameboard-ui/src/app/support/ticket-details/ticket-details.component.ts
index c06c0f6e..689c9b79 100644
--- a/projects/gameboard-ui/src/app/support/ticket-details/ticket-details.component.ts
+++ b/projects/gameboard-ui/src/app/support/ticket-details/ticket-details.component.ts
@@ -14,7 +14,6 @@ import { UserService } from '../../api/user.service';
 import { EditData, SuggestionOption } from '../../utility/components/inplace-editor/inplace-editor.component';
 import { UserService as LocalUserService } from '../../utility/user.service';
 import { NotificationService } from '../../services/notification.service';
-import linkifyHtml from 'linkify-html';
 import { ClipboardService } from "../../utility/services/clipboard.service";
 import { ToastService } from '../../utility/services/toast.service';
 import { FontAwesomeService } from '../../services/font-awesome.service';
@@ -55,6 +54,7 @@ export class TicketDetailsComponent implements AfterViewInit, OnDestroy {
   editingContent = false;
   savingContent = false;
   editingCommentId = null;
+  errors: string[] = [];
 
   currentLabels = new Set<string>();
 
@@ -105,7 +105,6 @@ export class TicketDetailsComponent implements AfterViewInit, OnDestroy {
     const ticket$ = combineLatest([
       route.params,
       this.refresh$,
-      // timer(0, 30_000) // refresh-causing line - runs every 30 seconds
     ]).pipe(
       map(([p, r]) => p),
       filter(p => !!p.id && (!this.editingContent || this.savingContent)), // don't refresh data if editing and not saving yet
@@ -127,12 +126,16 @@ export class TicketDetailsComponent implements AfterViewInit, OnDestroy {
       tap(a => {
         // Initialize ticket attachment URL object
         this.attachmentObjectUrls = new Array<SafeResourceUrl>(a.attachmentFiles.length);
+
         // Set the selected object urls
         this.selectedObjectUrls = this.attachmentObjectUrls;
+
         // Fetch each original ticket's attachment file
         a.attachmentFiles.forEach((f, i) => this.fetchFile(f, i));
+
         // Initialize comment attachment URL object - store it in a map to account for multiple comments
         a.activity.forEach((g, i) => this.commentAttachmentMap.set(g.id, new Array<SafeResourceUrl>(g.attachmentFiles.length)));
+
         // Fetch each comment's attachments
         a.activity.forEach((g, i) => g.attachmentFiles.forEach((f, j) => this.fetchFile(f, j, g)));
         a.selfCreated = a.creatorId == a.requesterId;
@@ -174,9 +177,11 @@ export class TicketDetailsComponent implements AfterViewInit, OnDestroy {
         // Get the image element on the screen, abort if it or the blob is null
         let img = activity ? document.getElementById(`comment-attachment-${activity.id}-${imgId}`) : document.getElementById(`attachment-${imgId}`);
         if (img == null || a.body == null) return;
+
         // Create a new object URL from the blob, then set the src to reference that
-        let url: string = URL.createObjectURL(a.body);
+        const url = URL.createObjectURL(a.body);
         img.setAttribute("src", url);
+
         // Set the appropriate storage object based on whether this is being called on a comment or not
         if (activity) this.commentAttachmentMap.get(activity.id)![imgId] = this.sanitizer.bypassSecurityTrustResourceUrl(url);
         else this.attachmentObjectUrls[imgId] = this.sanitizer.bypassSecurityTrustResourceUrl(url);
@@ -201,6 +206,7 @@ export class TicketDetailsComponent implements AfterViewInit, OnDestroy {
   }
 
   addComment() {
+    this.errors = [];
     if (!!this.newCommentText || !!this.newCommentAttachments) {
       let newComment = {
         ticketId: this.id,
@@ -216,7 +222,7 @@ export class TicketDetailsComponent implements AfterViewInit, OnDestroy {
           this.resetAttachments$.next(true);
         },
         (err) => {
-          alert(err);
+          this.errors.push(err);
         }
       );
     }
@@ -476,9 +482,4 @@ export class TicketDetailsComponent implements AfterViewInit, OnDestroy {
       });
     });
   }
-
-  public detectLinks(body: string, id: string): void {
-    var elem = document.getElementById(id);
-    if (elem && body) elem.innerHTML = linkifyHtml(body, { nl2br: true });
-  }
 }
diff --git a/projects/gameboard-ui/src/app/support/ticket-form/ticket-form.component.html b/projects/gameboard-ui/src/app/support/ticket-form/ticket-form.component.html
index 04d9ecdd..f450f20f 100644
--- a/projects/gameboard-ui/src/app/support/ticket-form/ticket-form.component.html
+++ b/projects/gameboard-ui/src/app/support/ticket-form/ticket-form.component.html
@@ -7,40 +7,43 @@
 
 
   <div class="section-header">
-      <h2 class="d-inline">New Ticket</h2>
+    <h2 class="d-inline">New Ticket</h2>
   </div>
 
   <form #form="ngForm" class="pop-light p-4 mt-2">
 
     <app-error-div [errors]="errors"></app-error-div>
-    
+
     <ng-container *ngIf="canManage$ | async as canManage">
       <div *ngIf="canManage" class="mb-3">
         <label class="mb-0" for="form-requester">Requested By</label>
-        <app-inplace-editor [editData]="requesters" [currentText]="(!!ticket.requester ? ticket.requester.approvedName + ' ('+(ticket.requesterId | slice:0:8)+')' : 'Me')"
-        (startEditFunc)="startEditRequesters()" (selectOptionFunc)="selectRequester($event)"></app-inplace-editor>
+        <app-inplace-editor [editData]="requesters"
+          [currentText]="(!!ticket.requester ? ticket.requester.approvedName + ' ('+(ticket.requesterId | slice:0:8)+')' : 'Me')"
+          (startEditFunc)="startEditRequesters()" (selectOptionFunc)="selectRequester($event)"></app-inplace-editor>
         <p class="mb-0 pt-0 align-items-center small">Select the user this request is coming from</p>
       </div>
     </ng-container>
 
     <div class="mb-3">
       <label class="mb-0" for="form-challenges">Challenge</label>
-      
+
       <div class="input-group">
         <select [(ngModel)]="ticket.challengeId" class="form-control" name="challenges" id="challenges">
           <option value="" selected>n/a</option>
-          <option *ngFor="let challenge of challengeOptions" [value]="challenge.id">{{challenge.name}} ({{(challenge?.id | slice:0:8) + ' ' + challenge?.tag}}), {{challenge?.gameName}}</option>
+          <option *ngFor="let challenge of challengeOptions" [value]="challenge.id">{{challenge.name}} ({{(challenge?.id
+            | slice:0:8) + ' ' + challenge?.tag}}), {{challenge?.gameName}}</option>
         </select>
       </div>
       <p class="mb-0 pt-0 align-items-center small">If applicable, select one of your recent challenges</p>
     </div>
 
-  
+
     <div class="mb-3">
       <label class="mb-0" for="form-summary">Summary</label>
-      <input type="text" class="form-control" id="form-summary" name="form-summary" autocomplete="off" [maxlength]="summaryLimit"
-      [(ngModel)]="ticket.summary">
-      <small class="d-flex justify-content-between" [class]="ticket.summary.length == summaryLimit ? 'text-warning' : 'text-muted'">
+      <input type="text" class="form-control" id="form-summary" name="form-summary" autocomplete="off"
+        [maxlength]="summaryLimit" [(ngModel)]="ticket.summary">
+      <small class="d-flex justify-content-between"
+        [class]="ticket.summary.length == summaryLimit ? 'text-warning' : 'text-muted'">
         <span class="text-dark">A short way to summarize the problem</span>
         <span>{{summaryLimit - ticket.summary.length}}</span>
       </small>
@@ -50,7 +53,7 @@ <h2 class="d-inline">New Ticket</h2>
         Description
       </label>
       <textarea rows="3" type="text" class="form-control" id="form-description" name="form-description"
-      [(ngModel)]="ticket.description" rows="6"></textarea>
+        [(ngModel)]="ticket.description" rows="6"></textarea>
       <small class="text-dark">All the details that would help resolve this issue</small>
     </div>
     <div class="mb-0">
@@ -62,6 +65,5 @@ <h2 class="d-inline">New Ticket</h2>
     <div class="mt-3">
       <button class="btn btn-dark" (click)="submit()" [disabled]="!ticket.summary.length">Submit</button>
     </div>
-
   </form>
 </div>
diff --git a/projects/gameboard-ui/src/app/support/ticket-form/ticket-form.component.ts b/projects/gameboard-ui/src/app/support/ticket-form/ticket-form.component.ts
index 5da17dbf..72591502 100644
--- a/projects/gameboard-ui/src/app/support/ticket-form/ticket-form.component.ts
+++ b/projects/gameboard-ui/src/app/support/ticket-form/ticket-form.component.ts
@@ -1,25 +1,24 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, OnDestroy } from '@angular/core';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
-import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs';
-import { debounceTime, switchMap, tap, mergeMap, filter, map, defaultIfEmpty } from 'rxjs/operators';
-import { Challenge, ChallengeOverview } from '../../api/board-models';
-import { BoardService } from '../../api/board.service';
+import { BehaviorSubject, Observable, Subject, Subscription, firstValueFrom } from 'rxjs';
+import { debounceTime, switchMap, tap, filter, map } from 'rxjs/operators';
+import { ChallengeOverview } from '../../api/board-models';
 import { NewTicket } from '../../api/support-models';
 import { SupportService } from '../../api/support.service';
 import { UserService } from '../../api/user.service';
 import { EditData, SuggestionOption } from '../../utility/components/inplace-editor/inplace-editor.component';
 import { UserService as LocalUserService } from '../../utility/user.service';
+import { RouterService } from '@/services/router.service';
+import { ActivatedRoute } from '@angular/router';
+import { BoardService } from '@/api/board.service';
 
 @Component({
   selector: 'app-ticket-form',
   templateUrl: './ticket-form.component.html',
   styleUrls: ['./ticket-form.component.scss']
 })
-export class TicketFormComponent implements OnInit {
-
+export class TicketFormComponent implements OnDestroy {
   summaryLimit = 128;
-
   requesters: EditData = { isEditing: false, loaded: false, allOptions: [], filteredOptions: [], filtering$: new Subject<string>() };
 
   ticket: NewTicket = {
@@ -29,8 +28,6 @@ export class TicketFormComponent implements OnInit {
     uploads: []
   } as any;
 
-  // challenge$: Observable<Challenge>;
-
   challengeRefresh: BehaviorSubject<any> = new BehaviorSubject({});
   challengeOptions: ChallengeOverview[] = [];
 
@@ -39,17 +36,21 @@ export class TicketFormComponent implements OnInit {
   errors: any[] = [];
   canManage$: Observable<boolean>;
 
+  private challengeRefreshSub?: Subscription;
+  private requestersFilteringSub?: Subscription;
+  private routeSub?: Subscription;
+
   constructor(
     private api: SupportService,
-    private boardApi: BoardService,
+    private routerService: RouterService,
     private userApi: UserService,
-    private router: Router,
-    private route: ActivatedRoute,
-    private local: LocalUserService
+    boardApi: BoardService,
+    route: ActivatedRoute,
+    localUserService: LocalUserService
   ) {
+    this.canManage$ = localUserService.user$.pipe(map(u => !!u?.isSupport));
 
-    // todo, could remove this and just set the challenge id since it is also fetching list of challenge options
-    const paramChallenge$ = route.queryParams.pipe(
+    this.routeSub = route.queryParams.pipe(
       filter(p => !!p.cid),
       switchMap(p => boardApi.retrieve(p.cid)),
       tap(c => {
@@ -58,39 +59,25 @@ export class TicketFormComponent implements OnInit {
       })
     ).subscribe();
 
-    const challenges$ = this.challengeRefresh.pipe(
-        switchMap(search => this.api.listUserChallenges(search))
-      )
-      .subscribe((a) => this.challengeOptions = a);
+    this.challengeRefreshSub = this.challengeRefresh.pipe(
+      switchMap(search => this.api.listUserChallenges(search))
+    ).subscribe((a) => this.challengeOptions = a);
 
-    this.canManage$ = local.user$.pipe(
-      map(u => !!u?.isSupport)
-    );
-
-    this.requesters.filtering$.pipe(
+    this.requestersFilteringSub = this.requesters.filtering$.pipe(
       debounceTime(200),
-      switchMap((term) => this.userApi.list({term: term, take: 25})),
+      switchMap((term) => this.userApi.list({ term: term, take: 25 })),
     ).subscribe(
       (result) => {
-        this.requesters.filteredOptions = result.map(u => ({name:u.approvedName, secondary: u.id.slice(0,8), data:u})).slice(0, 20);
+        this.requesters.filteredOptions = result.map(u => ({ name: u.approvedName, secondary: u.id.slice(0, 8), data: u })).slice(0, 20);
       }
     );
-
   }
 
-  ngOnInit(): void {
-
-  }
-
-  submit() {
-    this.api.upload(this.ticket).subscribe(
-      (ticket) => {
-        if (!!ticket.id) { // success
-          this.router.navigate(['/support/tickets', ticket.key]);
-        }
-      },
-      (err) => this.errors.push(err)
-    );
+  async submit() {
+    const ticket = await firstValueFrom(this.api.upload(this.ticket));
+    if (!!ticket.id) {
+      this.routerService.toSupportTickets(ticket.key.toString());
+    }
   }
 
   attachments(files: File[]) {
@@ -109,9 +96,13 @@ export class TicketFormComponent implements OnInit {
     this.requesters.isEditing = false;
     if (prevId != this.ticket.requesterId) {
       this.ticket.challengeId = "";
-      this.challengeRefresh.next({uid: this.ticket.requesterId});
+      this.challengeRefresh.next({ uid: this.ticket.requesterId });
     }
   }
 
-
+  ngOnDestroy(): void {
+    this.challengeRefreshSub?.unsubscribe();
+    this.requestersFilteringSub?.unsubscribe();
+    this.routeSub?.unsubscribe();
+  }
 }
diff --git a/projects/gameboard-ui/src/app/unity/unity-board/unity-board.component.ts b/projects/gameboard-ui/src/app/unity/unity-board/unity-board.component.ts
index c92e2437..10dfabaf 100644
--- a/projects/gameboard-ui/src/app/unity/unity-board/unity-board.component.ts
+++ b/projects/gameboard-ui/src/app/unity/unity-board/unity-board.component.ts
@@ -39,11 +39,6 @@ export class UnityBoardComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    // if (!this.config.settings.unityclienthost) {
-    //   const errorMessage = `Unity host is not set: ${this.config.settings.unityclienthost}`;
-    //   this.handleError(errorMessage);
-    // }
-
     this.unityHost = this.config.settings.unityclienthost || null;
     this.unityService.error$.subscribe(err => this.handleError(err));
 
diff --git a/projects/gameboard-ui/src/app/utility/components/image-manager/image-manager.component.html b/projects/gameboard-ui/src/app/utility/components/image-manager/image-manager.component.html
index bc4b19b3..0159a827 100644
--- a/projects/gameboard-ui/src/app/utility/components/image-manager/image-manager.component.html
+++ b/projects/gameboard-ui/src/app/utility/components/image-manager/image-manager.component.html
@@ -2,16 +2,20 @@
 <!-- Released under a 3 Clause BSD-style license. See LICENSE.md in the project root. -->
 
 <div class="dropzone d-flex flex-column my-0" [class.dropzone-active]="dropzone" [style.min-height.px]="defaultHeight">
+  <app-error-div [errors]="errors"></app-error-div>
   <div>
     <label for="fileSelector">
       <input id="fileSelector" type="file" style="display:none;" multiple (change)="filesSelected($event)">
       <span class="btn btn-sm" [class]="browseButtonStyle">Browse</span>
     </label>
-    <small> or drag files here. {{maxCombinedSizeMB}}MB limit. Acceptable file types: .png, .jpeg, .jpg, .gif, .webp, .svg, .txt</small>
+    <small> or drag files here. {{maxCombinedSizeMB}}MB limit. Accepted file types: .png, .jpeg, .jpg, .gif, .webp,
+      .svg, .txt</small>
   </div>
   <div class="d-flex overflow-auto my-auto">
-    <fa-icon *ngIf="showIcon && !files.size" class="background-icon mx-auto align-middle" [icon]="faUpload" size="lg"></fa-icon> 
-    <div class="p-2 position-relative d-flex flex-column" *ngFor="let img of files | keyvalue:insertOrder" (focus)="focus(img.key)" (mouseenter)="focus(img.key)" (mouseleave)="blur(img.key)">
+    <fa-icon *ngIf="showIcon && !files.size" class="background-icon mx-auto align-middle" [icon]="faUpload"
+      size="lg"></fa-icon>
+    <div class="p-2 position-relative d-flex flex-column" *ngFor="let img of files | keyvalue:insertOrder"
+      (focus)="focus(img.key)" (mouseenter)="focus(img.key)" (mouseleave)="blur(img.key)">
       <img *ngIf="!!img.value.encoded" [src]="img.value.encoded" class="rounded">
       <div *ngIf="!img.value.encoded" class="p-2 rounded no-preview text-center d-flex flex-column">
         <fa-icon class="mt-0 mb-auto no-preview-icon" [icon]="faFileAlt" size="lg"></fa-icon>
diff --git a/projects/gameboard-ui/src/app/utility/components/image-manager/image-manager.component.ts b/projects/gameboard-ui/src/app/utility/components/image-manager/image-manager.component.ts
index 7117270b..d427b357 100644
--- a/projects/gameboard-ui/src/app/utility/components/image-manager/image-manager.component.ts
+++ b/projects/gameboard-ui/src/app/utility/components/image-manager/image-manager.component.ts
@@ -1,10 +1,10 @@
 // Copyright 2021 Carnegie Mellon University.
 // Released under a 3 Clause BSD-style license. See LICENSE.md in the project root.
 
-import { Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SecurityContext, SimpleChanges } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { faTrash, faArrowDown, faPaperclip, faUpload, faFileAlt } from '@fortawesome/free-solid-svg-icons';
+import { faTrash, faPaperclip, faUpload, faFileAlt } from '@fortawesome/free-solid-svg-icons';
 import { SupportService } from '../../../api/support.service';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
@@ -15,15 +15,13 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 })
 export class ImageManagerComponent implements OnInit, OnChanges {
   @Input() maxCombinedSizeMB = 30;
-
   @Input() showIcon = true;
   @Input() defaultHeight = 200;
   @Input() browseButtonStyle = "btn-outline-secondary";
+  @Input() reset$?: Subject<boolean>;
 
   @Output() added = new EventEmitter<File[]>(); // emit files to parent component when changed
 
-  @Input() reset$?: Subject<boolean>;
-
   dropzone = false;
   drops = new Subject<FileList>();
   refresh = new BehaviorSubject<boolean>(true);
@@ -33,45 +31,46 @@ export class ImageManagerComponent implements OnInit, OnChanges {
   faPaperclip = faPaperclip;
   faUpload = faUpload;
   faFileAlt = faFileAlt;
+  errors: string[] = [];
+
+  private static ALLOWED_MIME_TYPES = [
+    "image/bmp",
+    "image/jpeg",
+    "image/x-png",
+    "image/png",
+    "image/gif",
+    "image/webp",
+    "image/svg+xml",
+    "text/plain"
+  ];
 
   combineSize = 0;
 
   files = new Map<string, FileData>();
 
-  constructor(
-    api: SupportService,
-    private sanitizer: DomSanitizer
-  ) {
-
+  constructor(api: SupportService) {
     this.drops.pipe(
       map(a => Array.from(a)),
     ).subscribe(
       files => {
+        if (!this.validateFiles(files))
+          return;
 
         files.forEach(file => {
-          var key = file.name + file.lastModified;
-          if (!this.files.has(key)) {
-            if (this.combineSize + file.size < this.maxCombinedSizeMB * 1_000_000) {
-              this.combineSize += file.size;
-              var data: FileData = { file: file };
-              if (file.type.match(/(image|application)\/(png|jpeg|gif|webp|svg)/)) {
-                const reader = new FileReader();
-                reader.onload = e => {
-                  var result = reader.result as string;
-                  if (!!result)
-                    data.encoded = sanitizer.bypassSecurityTrustResourceUrl(result);
-                };
-                reader.readAsDataURL(file);
-              }
-              this.files.set(key, data);
+          const data: FileData = { file: file };
+          const reader = new FileReader();
+          reader.onload = e => {
+            var result = reader.result as string;
+            if (!!result) {
+              data.encoded = result;
+              this.files.set(this.getFileKey(file), data);
+              this.emitFiles();
             }
-          }
+          };
+          reader.readAsDataURL(file);
         });
-        this.emitFiles();
-
       }
     );
-
   }
 
   emitFiles() {
@@ -83,6 +82,7 @@ export class ImageManagerComponent implements OnInit, OnChanges {
     this.reset$?.subscribe(
       () => {
         this.files.clear();
+        this.errors = [];
       }
     );
   }
@@ -119,6 +119,30 @@ export class ImageManagerComponent implements OnInit, OnChanges {
     return 0;
   }
 
+  private getFileKey = (file: File) => (file.name + file.lastModified);
+
+  private validateFiles = (files: File[]) => {
+    this.errors = [];
+
+    for (const file of files) {
+      const fileDescription = files.length > 1 ? `File "${file.name}"` : "This file";
+
+      if (this.files.has(this.getFileKey(file))) {
+        this.errors.push(`${fileDescription} has already been uploaded.`);
+      }
+
+      if (this.combineSize + file.size > (this.maxCombinedSizeMB * 1_000_000)) {
+        this.errors.push(`${fileDescription} would cause your total uploads to exceed the maximum allowable size.`);
+      }
+
+      if (ImageManagerComponent.ALLOWED_MIME_TYPES.indexOf(file.type.toLowerCase()) < 0) {
+        this.errors.push(`${fileDescription}'s type is not permitted. Accepted types are .png, .jpeg, .jpg, .gif, .webp, .svg, and .txt.`);
+      }
+    }
+
+    return !this.errors.length;
+  };
+
   //
   // Handle drag/drop events
   //
@@ -145,7 +169,6 @@ export class ImageManagerComponent implements OnInit, OnChanges {
   }
 }
 
-
 export interface FileData {
   file: File;
   encoded?: SafeResourceUrl;
diff --git a/projects/gameboard-ui/src/app/utility/components/morphing-text/morphing-text.component.ts b/projects/gameboard-ui/src/app/utility/components/morphing-text/morphing-text.component.ts
index 4c48a9a9..4594e983 100644
--- a/projects/gameboard-ui/src/app/utility/components/morphing-text/morphing-text.component.ts
+++ b/projects/gameboard-ui/src/app/utility/components/morphing-text/morphing-text.component.ts
@@ -114,11 +114,12 @@ export class MorphingTextComponent implements AfterViewInit {
     }
   }
 
-  private renderTextContent(text: string): SafeHtml {
-    return this.sanitizer.bypassSecurityTrustHtml(
+  private renderTextContent(text: string): string {
+    return this.sanitizer.sanitize(
+      SecurityContext.HTML,
       this.markdown.parse(
         this.sanitizer.sanitize(SecurityContext.HTML, text) || ""
       )
-    );
+    ) || '';
   }
 }
diff --git a/projects/gameboard-ui/src/app/utility/pipes/safe-url.pipe.ts b/projects/gameboard-ui/src/app/utility/pipes/safe-url.pipe.ts
index f68570a1..f08ab8c2 100644
--- a/projects/gameboard-ui/src/app/utility/pipes/safe-url.pipe.ts
+++ b/projects/gameboard-ui/src/app/utility/pipes/safe-url.pipe.ts
@@ -1,15 +1,11 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
-@Pipe({
-  name: 'safeurl'
-})
+@Pipe({ name: 'safeurl' })
 export class SafeUrlPipe implements PipeTransform {
+  constructor(protected sanitizer: DomSanitizer) { }
 
-  constructor(protected sanitizer: DomSanitizer) {}
-  
   transform(url: any, ...args: unknown[]): unknown {
     return this.sanitizer.bypassSecurityTrustResourceUrl(url);
   }
-
 }