From 50afa71c847a385a9655c5dbcc149a8cea3b26e8 Mon Sep 17 00:00:00 2001
From: John Rassa <john.rassa@bluehalo.com>
Date: Thu, 27 Jun 2024 13:58:44 -0400
Subject: [PATCH] feat: Enable additional eslint rules

---
 .eslintrc.json                                | 25 ++++++++-
 src/app/app.component.html                    |  2 +-
 .../common/breadcrumb/breadcrumb.component.ts |  4 +-
 .../bs-dialog-container.component.html        |  2 +-
 .../configurable-dialog.component.html        |  5 +-
 src/app/common/flyout/flyout.component.html   |  3 +-
 .../loading-overlay.component.html            |  6 ++-
 .../loading-overlay.component.ts              |  4 +-
 .../loading-spinner.component.spec.ts         |  4 +-
 .../loading-spinner.component.ts              |  4 +-
 .../common/modal/modal/modal.component.html   |  2 +-
 .../notification/notification.component.html  |  2 +-
 .../notification/notification.component.ts    |  4 +-
 .../search-input/search-input.component.html  | 11 ++--
 .../search-input/search-input.component.scss  | 12 ++---
 .../search-input.component.spec.ts            |  8 ++-
 .../search-input/search-input.component.ts    | 16 +++---
 .../system-alert/system-alert.component.ts    |  4 +-
 .../actions-menu-column.component.scss        |  3 +-
 .../ago-date/ago-date-column.component.html   |  3 +-
 .../columns/asy-abstract-column.component.ts  |  2 +-
 .../asy-abstract-value-column.component.ts    |  2 +-
 .../columns/date/date-column.component.html   |  3 +-
 .../asy-expandable-list-column.component.html |  8 ++-
 .../asy-expander-column.component.html        |  4 +-
 .../asy-expander-column.component.scss        |  9 ++++
 .../columns/text/text-column.component.html   |  3 +-
 .../asy-abstract-header-filter.component.ts   |  2 +-
 .../asy-header-date-filter.component.html     |  1 +
 .../asy-header-list-filter.component.html     | 14 +++--
 .../asy-header-text-filter.component.html     |  7 ++-
 ...asy-header-typeahead-filter.component.html |  4 +-
 .../table/paginator/paginator.component.html  |  3 +-
 .../table/sidebar/sidebar.component.html      |  2 +-
 .../asy-sort-header.component.html            |  4 +-
 .../asy-table-empty-state.component.html      | 16 ++++--
 .../asy-table-empty-state.component.ts        |  3 +-
 src/app/core/admin/admin.component.html       |  2 +-
 src/app/core/admin/admin.component.ts         |  4 +-
 .../cache-entry-modal.component.html          | 16 +++---
 .../cache-entry-modal.component.ts            |  2 +-
 .../admin/cache-entries/cache-entry.model.ts  |  1 -
 .../list-cache-entries.component.html         | 15 +++---
 .../list-cache-entries.component.ts           |  1 +
 .../list-euas/admin-list-euas.component.html  | 28 ++++++----
 .../manage-eua/manage-eua.component.html      |  2 +-
 .../admin-list-feedback.component.html        | 31 +++++------
 .../admin-list-feedback.component.ts          |  4 +-
 .../list-messages.component.html              | 14 ++---
 .../manage-message.component.html             |  4 +-
 .../admin-list-users.component.html           | 42 +++++++--------
 .../manage-user/manage-user.component.html    | 52 +++++++++----------
 src/app/core/audit/audit.service.ts           |  1 +
 .../list-audit-entries.component.html         | 33 +++++-------
 src/app/core/eua/user-eua.component.html      |  2 +-
 src/app/core/eua/user-eua.component.ts        |  2 +-
 .../feedback-flyout.component.html            |  9 ++--
 .../feedback-modal.component.html             |  9 ++--
 .../feedback-modal.component.ts               |  4 +-
 .../external-links.component.ts               |  2 +-
 .../getting-started-help.component.html       |  2 +-
 .../getting-started-help.component.ts         |  2 +-
 src/app/core/help/help.component.html         |  2 +-
 src/app/core/help/help.component.ts           |  4 +-
 .../masquerade/masquerade.component.html      |  6 +--
 .../masquerade/masquerade.component.ts        |  2 +-
 .../recent-messages.component.html            |  9 ++--
 .../view-all-messages.component.html          |  7 ++-
 src/app/core/page-title.strategy.ts           |  1 +
 src/app/core/signin/signin.component.html     |  2 +-
 src/app/core/signin/signin.component.ts       |  4 +-
 src/app/core/signup/signed-up.component.ts    |  2 +-
 src/app/core/signup/signup.component.html     |  2 +-
 .../site-container.component.html             |  2 +-
 .../site-container.component.ts               |  4 +-
 .../site-navbar/site-navbar.component.html    | 38 +++++++++-----
 .../site-navbar/site-navbar.component.scss    |  2 +-
 .../core/site-navbar/site-navbar.component.ts |  9 ++--
 .../add-members-modal.component.html          |  4 +-
 .../create-team/create-team.component.html    | 23 ++++----
 .../list-team-members.component.html          | 20 +++----
 .../list-teams/base-list-teams.component.ts   |  2 +-
 .../list-teams/list-teams.component.html      | 10 ++--
 .../general-details.component.html            | 28 ++++++----
 .../teams/view-team/view-team.component.html  |  4 +-
 .../theme-toggle/theme-toggle.component.html  |  1 +
 .../site/example/alerts/alerts.component.html |  4 +-
 .../site/example/forms/forms.component.html   |  6 +--
 .../example-loading-overlay.component.html    | 16 ++++--
 .../example/shared/example-mock.service.ts    | 27 ----------
 .../example/shared/example-rest.service.ts    | 20 -------
 src/app/site/example/shared/example.model.ts  |  5 --
 .../site/example/shared/example.service.ts    | 10 ----
 src/index.html                                |  9 +++-
 src/styles/_globals.scss                      |  2 +-
 95 files changed, 400 insertions(+), 382 deletions(-)
 delete mode 100644 src/app/site/example/shared/example-mock.service.ts
 delete mode 100644 src/app/site/example/shared/example-rest.service.ts
 delete mode 100644 src/app/site/example/shared/example.model.ts
 delete mode 100644 src/app/site/example/shared/example.service.ts

diff --git a/.eslintrc.json b/.eslintrc.json
index 1cce03ac..8cbb1d32 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -49,6 +49,13 @@
             "style": "kebab-case"
           }
         ],
+        "@angular-eslint/prefer-on-push-component-change-detection": ["off"],
+        "@angular-eslint/prefer-output-readonly": ["error"],
+        "@angular-eslint/prefer-standalone": ["warn"],
+        "@angular-eslint/relative-url-prefix": ["error"],
+        "@angular-eslint/use-component-view-encapsulation": ["error"],
+        "@angular-eslint/use-injectable-provided-in": ["error"],
+        "@angular-eslint/use-lifecycle-interface": ["error"],
         "@typescript-eslint/no-explicit-any": ["off"],
         "@typescript-eslint/no-unused-vars": [
           "warn",
@@ -106,7 +113,23 @@
       "extends": [
         "plugin:@angular-eslint/template/recommended"
       ],
-      "rules": {}
+      "rules": {
+        "@angular-eslint/template/alt-text": ["error"],
+        "@angular-eslint/template/button-has-type": ["error"],
+        "@angular-eslint/template/click-events-have-key-events": ["error"],
+        "@angular-eslint/template/elements-content": ["error"],
+        "@angular-eslint/template/interactive-supports-focus": ["error"],
+        "@angular-eslint/template/label-has-associated-control": ["error"],
+        "@angular-eslint/template/mouse-events-have-key-events": ["error"],
+        "@angular-eslint/template/no-any": ["error"],
+        "@angular-eslint/template/no-distracting-elements": ["error"],
+        "@angular-eslint/template/prefer-control-flow": ["error"],
+        "@angular-eslint/template/prefer-ngsrc": ["error"],
+        "@angular-eslint/template/prefer-self-closing-tags": ["error"],
+        "@angular-eslint/template/role-has-required-aria": ["error"],
+        "@angular-eslint/template/table-scope": ["error"],
+        "@angular-eslint/template/valid-aria": ["error"]
+      }
     },
     {
       "files": [
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5f1a60ac..082586e2 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,5 @@
 <div class="app-container">
 	<site-container>
-		<router-outlet></router-outlet>
+		<router-outlet />
 	</site-container>
 </div>
diff --git a/src/app/common/breadcrumb/breadcrumb.component.ts b/src/app/common/breadcrumb/breadcrumb.component.ts
index a1c320af..81e341a4 100644
--- a/src/app/common/breadcrumb/breadcrumb.component.ts
+++ b/src/app/common/breadcrumb/breadcrumb.component.ts
@@ -9,8 +9,8 @@ import { Breadcrumb, BreadcrumbService } from './breadcrumb.service';
 
 @Component({
 	selector: 'breadcrumb',
-	templateUrl: 'breadcrumb.component.html',
-	styleUrls: ['breadcrumb.component.scss'],
+	templateUrl: './breadcrumb.component.html',
+	styleUrls: ['./breadcrumb.component.scss'],
 	standalone: true,
 	imports: [RouterLink]
 })
diff --git a/src/app/common/dialog/bs-dialog-container/bs-dialog-container.component.html b/src/app/common/dialog/bs-dialog-container/bs-dialog-container.component.html
index 77131635..affee68c 100644
--- a/src/app/common/dialog/bs-dialog-container/bs-dialog-container.component.html
+++ b/src/app/common/dialog/bs-dialog-container/bs-dialog-container.component.html
@@ -1,5 +1,5 @@
 <div class="modal-dialog modal-dialog-scrollable modal-lg">
 	<div class="modal-content">
-		<ng-template cdkPortalOutlet></ng-template>
+		<ng-template cdkPortalOutlet />
 	</div>
 </div>
diff --git a/src/app/common/dialog/configurable-dialog/configurable-dialog.component.html b/src/app/common/dialog/configurable-dialog/configurable-dialog.component.html
index 4d8b8bc3..0f88a670 100644
--- a/src/app/common/dialog/configurable-dialog/configurable-dialog.component.html
+++ b/src/app/common/dialog/configurable-dialog/configurable-dialog.component.html
@@ -13,10 +13,13 @@
 	<form id="modalForm" #modalForm="ngForm">
 		@for (input of data.inputs; track input; let isFirst = $first) {
 			<div class="mb-3">
-				<label [class.form-required]="input.required">{{ input.label }}</label>
+				<label [class.form-required]="input.required" for="dialog-input-{{ input.key }}">
+					{{ input.label }}
+				</label>
 				@if (input.type === 'textarea') {
 					<textarea
 						class="form-control text-area"
+						id="dialog-input-{{ input.key }}"
 						[name]="input.key"
 						placeholder="Enter {{ input.label }}..."
 						[(ngModel)]="formData[input.key]"
diff --git a/src/app/common/flyout/flyout.component.html b/src/app/common/flyout/flyout.component.html
index 5ac472b8..264a57f1 100644
--- a/src/app/common/flyout/flyout.component.html
+++ b/src/app/common/flyout/flyout.component.html
@@ -2,6 +2,7 @@
 	<button
 		class="btn btn-primary flyout-btn d-flex align-items-center"
 		data-inline="true"
+		type="button"
 		(click)="toggle()"
 	>
 		{{ label() }}
@@ -9,6 +10,6 @@
 	</button>
 
 	<div class="flyout-content" #flyoutContentContainer>
-		<ng-content></ng-content>
+		<ng-content />
 	</div>
 </section>
diff --git a/src/app/common/loading-overlay/loading-overlay.component.html b/src/app/common/loading-overlay/loading-overlay.component.html
index 7a1d0b93..53b1af04 100644
--- a/src/app/common/loading-overlay/loading-overlay.component.html
+++ b/src/app/common/loading-overlay/loading-overlay.component.html
@@ -3,12 +3,14 @@
 		@if (isError()) {
 			<notification notificationType="danger" showActions [message]="errorMessage()">
 				<ng-template #notificationActions>
-					<button class="btn btn-primary" (click)="retry.emit()">Retry</button>
+					<button class="btn btn-primary" type="button" (click)="retry.emit()">
+						Retry
+					</button>
 				</ng-template>
 			</notification>
 		} @else {
 			<div class="overlay-spinner">
-				<loading-spinner [message]="message()"> </loading-spinner>
+				<loading-spinner [message]="message()" />
 			</div>
 		}
 	</div>
diff --git a/src/app/common/loading-overlay/loading-overlay.component.ts b/src/app/common/loading-overlay/loading-overlay.component.ts
index 75ea7d2f..16595da4 100644
--- a/src/app/common/loading-overlay/loading-overlay.component.ts
+++ b/src/app/common/loading-overlay/loading-overlay.component.ts
@@ -5,8 +5,8 @@ import { NotificationComponent } from '../notification/notification.component';
 
 @Component({
 	selector: 'loading-overlay',
-	templateUrl: 'loading-overlay.component.html',
-	styleUrls: ['loading-overlay.component.scss'],
+	templateUrl: './loading-overlay.component.html',
+	styleUrls: ['./loading-overlay.component.scss'],
 	standalone: true,
 	imports: [NotificationComponent, LoadingSpinnerComponent],
 	changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/common/loading-spinner/loading-spinner.component.spec.ts b/src/app/common/loading-spinner/loading-spinner.component.spec.ts
index a84258f8..e646009e 100644
--- a/src/app/common/loading-spinner/loading-spinner.component.spec.ts
+++ b/src/app/common/loading-spinner/loading-spinner.component.spec.ts
@@ -4,14 +4,14 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { LoadingSpinnerComponent } from './loading-spinner.component';
 
 @Component({
-	template: '<loading-spinner></loading-spinner>',
+	template: '<loading-spinner />',
 	standalone: true,
 	imports: [LoadingSpinnerComponent]
 })
 export class LoadingSpinnerDefaultTestHostComponent {}
 
 @Component({
-	template: '<loading-spinner [message]="message"></loading-spinner>',
+	template: '<loading-spinner [message]="message" />',
 	standalone: true,
 	imports: [LoadingSpinnerComponent]
 })
diff --git a/src/app/common/loading-spinner/loading-spinner.component.ts b/src/app/common/loading-spinner/loading-spinner.component.ts
index 3ec24a27..abc7abad 100644
--- a/src/app/common/loading-spinner/loading-spinner.component.ts
+++ b/src/app/common/loading-spinner/loading-spinner.component.ts
@@ -2,8 +2,8 @@ import { Component, input } from '@angular/core';
 
 @Component({
 	selector: 'loading-spinner',
-	templateUrl: 'loading-spinner.component.html',
-	styleUrls: ['loading-spinner.component.scss'],
+	templateUrl: './loading-spinner.component.html',
+	styleUrls: ['./loading-spinner.component.scss'],
 	standalone: true
 })
 export class LoadingSpinnerComponent {
diff --git a/src/app/common/modal/modal/modal.component.html b/src/app/common/modal/modal/modal.component.html
index 3ee474fd..702caec0 100644
--- a/src/app/common/modal/modal/modal.component.html
+++ b/src/app/common/modal/modal/modal.component.html
@@ -7,7 +7,7 @@ <h2 class="modal-title">
 </section>
 
 <section class="modal-body">
-	<ng-content></ng-content>
+	<ng-content />
 </section>
 
 <section class="modal-footer">
diff --git a/src/app/common/notification/notification.component.html b/src/app/common/notification/notification.component.html
index 0b179105..7aec8dd6 100644
--- a/src/app/common/notification/notification.component.html
+++ b/src/app/common/notification/notification.component.html
@@ -4,7 +4,7 @@
 	</div>
 	@if (showActions() && actionTemplate()) {
 		<div class="table-actions d-flex">
-			<ng-container *ngTemplateOutlet="actionTemplate() ?? null"></ng-container>
+			<ng-container *ngTemplateOutlet="actionTemplate() ?? null" />
 		</div>
 	}
 </div>
diff --git a/src/app/common/notification/notification.component.ts b/src/app/common/notification/notification.component.ts
index b9335b4a..fa0946b3 100644
--- a/src/app/common/notification/notification.component.ts
+++ b/src/app/common/notification/notification.component.ts
@@ -10,8 +10,8 @@ import {
 
 @Component({
 	selector: 'notification',
-	templateUrl: 'notification.component.html',
-	styleUrls: ['notification.component.scss'],
+	templateUrl: './notification.component.html',
+	styleUrls: ['./notification.component.scss'],
 	standalone: true,
 	imports: [NgTemplateOutlet],
 	changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/common/search-input/search-input.component.html b/src/app/common/search-input/search-input.component.html
index 961fd73d..b3ad3c2f 100644
--- a/src/app/common/search-input/search-input.component.html
+++ b/src/app/common/search-input/search-input.component.html
@@ -7,11 +7,12 @@
 		(input)="onInput()"
 		(keyup)="onKeyup()"
 	/>
-	@if (search().length === 0) {
-		<span class="icon fa-solid fa-search"></span>
-	} @else {
-		<span class="icon fa-solid fa-times" (click)="clearSearch($event)"></span>
-	}
+	<button class="btn shadow-none" type="button" (click)="clearSearch($event)">
+		<span
+			class="fa-solid fa-fw"
+			[ngClass]="search().length === 0 ? 'fa-search' : 'fa-times'"
+		></span>
+	</button>
 </div>
 @if (!disableMinCountMessage() && showMinCountMessage()) {
 	<div class="text-body-secondary pt-2" [@minCount]>
diff --git a/src/app/common/search-input/search-input.component.scss b/src/app/common/search-input/search-input.component.scss
index 73cca23b..bba22a75 100644
--- a/src/app/common/search-input/search-input.component.scss
+++ b/src/app/common/search-input/search-input.component.scss
@@ -1,12 +1,8 @@
 .search-input-container {
 	width: 350px;
-}
 
-.icon {
-	position: relative;
-	display: flex;
-	align-items: center;
-	margin-left: -20px;
-	float: right;
-	z-index: 500;
+	button {
+		margin-left: -40px;
+		border: 0;
+	}
 }
diff --git a/src/app/common/search-input/search-input.component.spec.ts b/src/app/common/search-input/search-input.component.spec.ts
index 375a24b2..721fc520 100644
--- a/src/app/common/search-input/search-input.component.spec.ts
+++ b/src/app/common/search-input/search-input.component.spec.ts
@@ -151,7 +151,7 @@ describe('SearchInputComponent', () => {
 		inputElement.nativeElement.dispatchEvent(new Event('input'));
 		fixture.detectChanges();
 
-		expect(fixture.debugElement.queryAll(By.css('.icon.fa-times')).length).toBe(1);
+		expect(fixture.debugElement.queryAll(By.css('.fa-times')).length).toBe(1);
 	});
 
 	it('should not show clear-search options if search input length === 0', () => {
@@ -159,7 +159,7 @@ describe('SearchInputComponent', () => {
 		inputElement.nativeElement.dispatchEvent(new Event('input'));
 		fixture.detectChanges();
 
-		expect(fixture.debugElement.queryAll(By.css('span.icon.fa-times')).length).toBe(0);
+		expect(fixture.debugElement.queryAll(By.css('.fa-times')).length).toBe(0);
 	});
 
 	it('should clear the search when the clearSearch span is clicked', waitForAsync(() => {
@@ -170,9 +170,7 @@ describe('SearchInputComponent', () => {
 		fixture.detectChanges();
 
 		// click the clear-search option
-		(
-			fixture.debugElement.query(By.css('span.icon.fa-times')).nativeElement as HTMLElement
-		).click();
+		(fixture.debugElement.query(By.css('.fa-times')).nativeElement as HTMLElement).click();
 
 		fixture.detectChanges();
 
diff --git a/src/app/common/search-input/search-input.component.ts b/src/app/common/search-input/search-input.component.ts
index fc95c962..4065cc19 100644
--- a/src/app/common/search-input/search-input.component.ts
+++ b/src/app/common/search-input/search-input.component.ts
@@ -1,10 +1,12 @@
 import { animate, style, transition, trigger } from '@angular/animations';
+import { NgClass } from '@angular/common';
 import {
 	ChangeDetectionStrategy,
 	Component,
 	booleanAttribute,
 	input,
 	model,
+	numberAttribute,
 	output,
 	signal
 } from '@angular/core';
@@ -31,7 +33,7 @@ import { debounceTime } from 'rxjs/operators';
 		])
 	],
 	standalone: true,
-	imports: [FormsModule],
+	imports: [FormsModule, NgClass],
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SearchInputComponent {
@@ -48,7 +50,7 @@ export class SearchInputComponent {
 	 * Specifies a minimum character count required to search.
 	 * In the event the number of characters is between 0 and the minimum, a warning message is shown beneath the search bar
 	 */
-	readonly minSearchCharacterCount = input(0);
+	readonly minSearchCharacterCount = input(0, { transform: numberAttribute });
 
 	/**
 	 * When set to true, the minimum search character
@@ -90,10 +92,12 @@ export class SearchInputComponent {
 	}
 
 	clearSearch(event?: MouseEvent) {
-		this.search.set('');
-		this.applySearch.emit(this.search());
-		if (event) {
-			event.stopPropagation();
+		if (this.search().length > 0) {
+			this.search.set('');
+			this.applySearch.emit(this.search());
+			if (event) {
+				event.stopPropagation();
+			}
 		}
 	}
 }
diff --git a/src/app/common/system-alert/system-alert.component.ts b/src/app/common/system-alert/system-alert.component.ts
index b629cbc0..091e5c8c 100644
--- a/src/app/common/system-alert/system-alert.component.ts
+++ b/src/app/common/system-alert/system-alert.component.ts
@@ -5,8 +5,8 @@ import { SystemAlertService } from './system-alert.service';
 
 @Component({
 	selector: 'system-alert',
-	templateUrl: 'system-alert.component.html',
-	styleUrls: ['system-alert.component.scss'],
+	templateUrl: './system-alert.component.html',
+	styleUrls: ['./system-alert.component.scss'],
 	animations: [
 		trigger('animateAddRemove', [
 			transition(':enter', [
diff --git a/src/app/common/table/actions-menu-column/actions-menu-column.component.scss b/src/app/common/table/actions-menu-column/actions-menu-column.component.scss
index c8b67823..086cef1a 100644
--- a/src/app/common/table/actions-menu-column/actions-menu-column.component.scss
+++ b/src/app/common/table/actions-menu-column/actions-menu-column.component.scss
@@ -1,8 +1,7 @@
-.cdk-column-actionsMenu {
+.cdk-cell {
 	width: 50px;
 
 	button.dropdown-toggle {
-		display: block;
 		border: 0;
 
 		&:hover {
diff --git a/src/app/common/table/columns/ago-date/ago-date-column.component.html b/src/app/common/table/columns/ago-date/ago-date-column.component.html
index c604cb64..17f81917 100644
--- a/src/app/common/table/columns/ago-date/ago-date-column.component.html
+++ b/src/app/common/table/columns/ago-date/ago-date-column.component.html
@@ -8,8 +8,7 @@
 			[ngTemplateOutletContext]="{
 				header: header()
 			}"
-		>
-		</ng-template>
+		/>
 	</th>
 	<td class="text-nowrap" cdk-cell *cdkCellDef="let obj">
 		<div class="text-nowrap" container="body" tooltip="{{ obj[name] | utcDate: format() }}">
diff --git a/src/app/common/table/columns/asy-abstract-column.component.ts b/src/app/common/table/columns/asy-abstract-column.component.ts
index 8c393445..28449925 100644
--- a/src/app/common/table/columns/asy-abstract-column.component.ts
+++ b/src/app/common/table/columns/asy-abstract-column.component.ts
@@ -10,7 +10,7 @@ import {
 	input
 } from '@angular/core';
 
-@Directive()
+@Directive({ standalone: true })
 export abstract class AsyAbstractColumnComponent<T> implements OnDestroy, OnInit {
 	/** Column name that should be used to reference this column. */
 	@Input()
diff --git a/src/app/common/table/columns/asy-abstract-value-column.component.ts b/src/app/common/table/columns/asy-abstract-value-column.component.ts
index 974161c4..6ea0d4fa 100644
--- a/src/app/common/table/columns/asy-abstract-value-column.component.ts
+++ b/src/app/common/table/columns/asy-abstract-value-column.component.ts
@@ -3,7 +3,7 @@ import { Directive, TemplateRef, booleanAttribute, contentChild, input } from '@
 import { AsyAbstractColumnComponent } from './asy-abstract-column.component';
 import { HeaderTemplateDirective } from './header-template.directive';
 
-@Directive()
+@Directive({ standalone: true })
 export abstract class AsyAbstractValueColumnComponent<T> extends AsyAbstractColumnComponent<T> {
 	readonly header = input<string>();
 	readonly sortable = input(true, { transform: booleanAttribute });
diff --git a/src/app/common/table/columns/date/date-column.component.html b/src/app/common/table/columns/date/date-column.component.html
index 00037523..bf918206 100644
--- a/src/app/common/table/columns/date/date-column.component.html
+++ b/src/app/common/table/columns/date/date-column.component.html
@@ -8,8 +8,7 @@
 			[ngTemplateOutletContext]="{
 				header: header()
 			}"
-		>
-		</ng-template>
+		/>
 	</th>
 	<td class="text-nowrap" cdk-cell *cdkCellDef="let obj">
 		{{ obj[name] | utcDate: format() }}
diff --git a/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.html b/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.html
index 463699ca..6b752ea6 100644
--- a/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.html
+++ b/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.html
@@ -8,8 +8,7 @@
 			[ngTemplateOutletContext]="{
 				header: header()
 			}"
-		>
-		</ng-template>
+		/>
 	</th>
 	<td
 		class=""
@@ -32,15 +31,14 @@
 									item: item,
 									index: item.index
 								}"
-							>
-							</ng-template>
+							/>
 						</div>
 					}
 				</div>
 			}
 			@if (item[name]?.length > 1) {
 				<div class="ps-auto">
-					<button class="btn btn-sm btn-link py-0" (click)="toggle(item)">
+					<button class="btn btn-sm btn-link py-0" type="button" (click)="toggle(item)">
 						<span class="fa-solid fa-lg fa-angle-down"></span>
 					</button>
 				</div>
diff --git a/src/app/common/table/columns/expander/asy-expander-column.component.html b/src/app/common/table/columns/expander/asy-expander-column.component.html
index 0def06bb..57e4b159 100644
--- a/src/app/common/table/columns/expander/asy-expander-column.component.html
+++ b/src/app/common/table/columns/expander/asy-expander-column.component.html
@@ -2,12 +2,12 @@
 	<th cdk-header-cell style="width: 42px" *cdkHeaderCellDef></th>
 	<td cdk-cell *cdkCellDef="let item; let index = index">
 		@if (isExpandable()(index, item)) {
-			<div style="cursor: pointer" (click)="toggle(index, item)">
+			<button class="btn shadow-none p-0" type="button" (click)="toggle(index, item)">
 				<span
 					class="fa-solid fa-lg fa-angle-down"
 					[class.fa-flip-vertical]="isExpanded(index, item)"
 				></span>
-			</div>
+			</button>
 		}
 	</td>
 </ng-container>
diff --git a/src/app/common/table/columns/expander/asy-expander-column.component.scss b/src/app/common/table/columns/expander/asy-expander-column.component.scss
index e69de29b..a82e276c 100644
--- a/src/app/common/table/columns/expander/asy-expander-column.component.scss
+++ b/src/app/common/table/columns/expander/asy-expander-column.component.scss
@@ -0,0 +1,9 @@
+.cdk-cell {
+	button {
+		border: 0;
+
+		&:hover {
+			color: var(--bs-link-hover-color);
+		}
+	}
+}
diff --git a/src/app/common/table/columns/text/text-column.component.html b/src/app/common/table/columns/text/text-column.component.html
index 70966f77..1a59c5f3 100644
--- a/src/app/common/table/columns/text/text-column.component.html
+++ b/src/app/common/table/columns/text/text-column.component.html
@@ -8,8 +8,7 @@
 			[ngTemplateOutletContext]="{
 				header: header()
 			}"
-		>
-		</ng-template>
+		/>
 	</th>
 	<td class="text-nowrap" cdk-cell *cdkCellDef="let obj">
 		{{ obj[name] || defaultValue() }}
diff --git a/src/app/common/table/filter/asy-abstract-header-filter.component.ts b/src/app/common/table/filter/asy-abstract-header-filter.component.ts
index 19f5568b..9fcb8cdc 100644
--- a/src/app/common/table/filter/asy-abstract-header-filter.component.ts
+++ b/src/app/common/table/filter/asy-abstract-header-filter.component.ts
@@ -20,7 +20,7 @@ export interface AsyFilterHeaderColumnDef {
 	name: string;
 }
 
-@Directive()
+@Directive({ standalone: true })
 export abstract class AsyAbstractHeaderFilterComponent
 	implements AsyFilterable, AfterViewInit, OnDestroy, OnInit
 {
diff --git a/src/app/common/table/filter/asy-header-date-filter/asy-header-date-filter.component.html b/src/app/common/table/filter/asy-header-date-filter/asy-header-date-filter.component.html
index f91c4ab0..de9c2bff 100644
--- a/src/app/common/table/filter/asy-header-date-filter/asy-header-date-filter.component.html
+++ b/src/app/common/table/filter/asy-header-date-filter/asy-header-date-filter.component.html
@@ -1,5 +1,6 @@
 <button
 	class="dropdown-toggle dropdown-toggle-hide-caret"
+	type="button"
 	cdkOverlayOrigin
 	#trigger
 	(click)="toggle()"
diff --git a/src/app/common/table/filter/asy-header-list-filter/asy-header-list-filter.component.html b/src/app/common/table/filter/asy-header-list-filter/asy-header-list-filter.component.html
index a4147626..241ec43e 100644
--- a/src/app/common/table/filter/asy-header-list-filter/asy-header-list-filter.component.html
+++ b/src/app/common/table/filter/asy-header-list-filter/asy-header-list-filter.component.html
@@ -1,5 +1,6 @@
 <button
 	class="dropdown-toggle dropdown-toggle-hide-caret"
+	type="button"
 	cdkOverlayOrigin
 	#trigger
 	(click)="toggle()"
@@ -34,8 +35,7 @@
 					placeholder="Search..."
 					[search]="search"
 					(applySearch)="onSearchOptions($event)"
-				>
-				</asy-search-input>
+				/>
 			</div>
 			<div class="divider dropdown-divider mb-0 mx-3"></div>
 		}
@@ -68,8 +68,8 @@
 		</div>
 		@if (showMatch()) {
 			<div class="divider dropdown-divider my-0 mx-3"></div>
-			<div class="my-1">
-				<label class="mb-0 me-3">Match:</label>
+			<div class="mt-2 mb-1">
+				<span class="me-3">Match:</span>
 				@for (operatorOption of [false, true]; track operatorOption; let i = $index) {
 					<div class="form-check form-check-inline">
 						<input
@@ -91,7 +91,11 @@
 		@if (isFiltered()) {
 			<div class="divider dropdown-divider mb-0 mx-3"></div>
 			<div class="mt-2">
-				<button class="btn btn-link px-0" (click)="clearFilter(); $event.stopPropagation()">
+				<button
+					class="btn btn-link px-0"
+					type="button"
+					(click)="clearFilter(); $event.stopPropagation()"
+				>
 					Clear Filters
 				</button>
 			</div>
diff --git a/src/app/common/table/filter/asy-header-text-filter/asy-header-text-filter.component.html b/src/app/common/table/filter/asy-header-text-filter/asy-header-text-filter.component.html
index 1ae029ed..4fa3f44a 100644
--- a/src/app/common/table/filter/asy-header-text-filter/asy-header-text-filter.component.html
+++ b/src/app/common/table/filter/asy-header-text-filter/asy-header-text-filter.component.html
@@ -1,5 +1,6 @@
 <button
 	class="dropdown-toggle dropdown-toggle-hide-caret"
+	type="button"
 	cdkOverlayOrigin
 	#trigger
 	(click)="toggle()"
@@ -35,16 +36,14 @@
 				[searchable]="false"
 				(click)="$event.stopPropagation()"
 				(ngModelChange)="onSearchTypeChange()"
-			>
-			</ng-select>
+			/>
 		</div>
 		<div class="search mt-2 mb-3">
 			<asy-search-input
 				placeholder="Search..."
 				[search]="search()"
 				(applySearch)="onSearchText($event)"
-			>
-			</asy-search-input>
+			/>
 		</div>
 	</div>
 </ng-template>
diff --git a/src/app/common/table/filter/asy-header-typeahead-filter/asy-header-typeahead-filter.component.html b/src/app/common/table/filter/asy-header-typeahead-filter/asy-header-typeahead-filter.component.html
index b882c450..a28064b6 100644
--- a/src/app/common/table/filter/asy-header-typeahead-filter/asy-header-typeahead-filter.component.html
+++ b/src/app/common/table/filter/asy-header-typeahead-filter/asy-header-typeahead-filter.component.html
@@ -1,5 +1,6 @@
 <button
 	class="dropdown-toggle dropdown-toggle-hide-caret"
+	type="button"
 	cdkOverlayOrigin
 	#trigger
 	(click)="toggle()"
@@ -38,8 +39,7 @@
 				[loading]="loading()"
 				[typeahead]="input$"
 				(ngModelChange)="onFilterChange()"
-			>
-			</ng-select>
+			/>
 		</div>
 	</div>
 </ng-template>
diff --git a/src/app/common/table/paginator/paginator.component.html b/src/app/common/table/paginator/paginator.component.html
index 727ba832..8e630e1f 100644
--- a/src/app/common/table/paginator/paginator.component.html
+++ b/src/app/common/table/paginator/paginator.component.html
@@ -9,8 +9,7 @@
 				[ngModel]="page.pageSize"
 				[searchable]="false"
 				(change)="setPageSize($event)"
-			>
-			</ng-select>
+			/>
 		</span>
 		<!-- Count message -->
 		<span class="pager-status">
diff --git a/src/app/common/table/sidebar/sidebar.component.html b/src/app/common/table/sidebar/sidebar.component.html
index 7ceb08e3..26e74c21 100644
--- a/src/app/common/table/sidebar/sidebar.component.html
+++ b/src/app/common/table/sidebar/sidebar.component.html
@@ -11,5 +11,5 @@ <h2>{{ headerText() }}</h2>
 	></button>
 </div>
 <div class="sidebar-body" [class.card-body]="showInCard()">
-	<ng-content></ng-content>
+	<ng-content />
 </div>
diff --git a/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.html b/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.html
index bb592a25..d99bcfc2 100644
--- a/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.html
+++ b/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.html
@@ -1,6 +1,6 @@
 <div class="text-nowrap">
-	<button class="px-0">
-		<ng-content></ng-content>
+	<button class="px-0" type="button">
+		<ng-content />
 
 		@if (sortable()) {
 			<span class="fa-stack">
diff --git a/src/app/common/table/table-empty-state/asy-table-empty-state.component.html b/src/app/common/table/table-empty-state/asy-table-empty-state.component.html
index 72e24b12..24b9ff3d 100644
--- a/src/app/common/table/table-empty-state/asy-table-empty-state.component.html
+++ b/src/app/common/table/table-empty-state/asy-table-empty-state.component.html
@@ -1,10 +1,15 @@
 @if (dataSource().loading) {
-	<asy-skeleton-rows [rows]="dataSource().pageChangeEvent$.value.pageSize"></asy-skeleton-rows>
+	<asy-skeleton-rows [rows]="dataSource().pageChangeEvent$.value.pageSize" />
 } @else if (dataSource().pagingResults$.value.elements.length === 0) {
 	<div class="d-flex justify-content-center py-5">
 		@if (dataSource().isFiltered) {
 			@if (showIcons()) {
-				<img src="/assets/images/empty-state/no-results.png" />
+				<img
+					alt="No Results"
+					height="237"
+					ngSrc="/assets/images/empty-state/no-results.png"
+					width="257"
+				/>
 			}
 			<div class="d-flex flex-column align-items-start">
 				<h3>{{ filteredText() }}</h3>
@@ -20,7 +25,12 @@ <h3>{{ filteredText() }}</h3>
 			</div>
 		} @else {
 			@if (showIcons()) {
-				<img src="/assets/images/empty-state/no-data.png" />
+				<img
+					alt="No Results"
+					height="220"
+					ngSrc="/assets/images/empty-state/no-data.png"
+					width="219"
+				/>
 			}
 			<div class="d-flex flex-column align-items-start">
 				<h3>{{ emptyText() }}</h3>
diff --git a/src/app/common/table/table-empty-state/asy-table-empty-state.component.ts b/src/app/common/table/table-empty-state/asy-table-empty-state.component.ts
index 6dec28e5..5a2c3c6a 100644
--- a/src/app/common/table/table-empty-state/asy-table-empty-state.component.ts
+++ b/src/app/common/table/table-empty-state/asy-table-empty-state.component.ts
@@ -1,3 +1,4 @@
+import { NgOptimizedImage } from '@angular/common';
 import { Component, booleanAttribute, input, output } from '@angular/core';
 
 import { AsyTableDataSource } from '../asy-table-data-source';
@@ -8,7 +9,7 @@ import { AsySkeletonRowsComponent } from '../skeleton-rows/asy-skeleton-rows.com
 	templateUrl: './asy-table-empty-state.component.html',
 	styleUrls: ['./asy-table-empty-state.component.scss'],
 	standalone: true,
-	imports: [AsySkeletonRowsComponent]
+	imports: [AsySkeletonRowsComponent, NgOptimizedImage]
 })
 export class AsyTableEmptyStateComponent<T> {
 	readonly dataSource = input.required<AsyTableDataSource<T>>();
diff --git a/src/app/core/admin/admin.component.html b/src/app/core/admin/admin.component.html
index a09e2699..5c48d820 100644
--- a/src/app/core/admin/admin.component.html
+++ b/src/app/core/admin/admin.component.html
@@ -14,6 +14,6 @@
 	</ul>
 
 	<div class="admin-section-container">
-		<router-outlet></router-outlet>
+		<router-outlet />
 	</div>
 </section>
diff --git a/src/app/core/admin/admin.component.ts b/src/app/core/admin/admin.component.ts
index e7841ebc..dbaf432a 100644
--- a/src/app/core/admin/admin.component.ts
+++ b/src/app/core/admin/admin.component.ts
@@ -4,8 +4,8 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { injectAdminTopics } from './provider';
 
 @Component({
-	templateUrl: 'admin.component.html',
-	styleUrls: ['admin.component.scss'],
+	templateUrl: './admin.component.html',
+	styleUrls: ['./admin.component.scss'],
 	standalone: true,
 	imports: [RouterLinkActive, RouterLink, RouterOutlet]
 })
diff --git a/src/app/core/admin/cache-entries/cache-entry-modal/cache-entry-modal.component.html b/src/app/core/admin/cache-entries/cache-entry-modal/cache-entry-modal.component.html
index cafa7e01..6db9ebb1 100644
--- a/src/app/core/admin/cache-entries/cache-entry-modal/cache-entry-modal.component.html
+++ b/src/app/core/admin/cache-entries/cache-entry-modal/cache-entry-modal.component.html
@@ -1,14 +1,10 @@
 <asy-modal title="Cache Entry Details" hideCancel okText="Close" (cancel)="close()" (ok)="close()">
-	<div class="row">
-		<div class="col-md-12">
-			<label>Key</label>
-			<div>{{ cacheEntry.key }}</div>
+	<div>Key</div>
+	<div class="mb-3">{{ cacheEntry.key }}</div>
 
-			<label>Last Updated</label>
-			<div>{{ cacheEntry.date | utcDate }} ({{ cacheEntry.date | agoDate: false }})</div>
+	<div>Last Updated</div>
+	<div class="mb-3">{{ cacheEntry.ts | utcDate }} ({{ cacheEntry.ts | agoDate: false }})</div>
 
-			<label>Value</label>
-			<pre>{{ cacheEntry.value | json }}</pre>
-		</div>
-	</div>
+	<div>Value</div>
+	<pre>{{ cacheEntry.value | json }}</pre>
 </asy-modal>
diff --git a/src/app/core/admin/cache-entries/cache-entry-modal/cache-entry-modal.component.ts b/src/app/core/admin/cache-entries/cache-entry-modal/cache-entry-modal.component.ts
index ac3cd3ec..489a1dc6 100644
--- a/src/app/core/admin/cache-entries/cache-entry-modal/cache-entry-modal.component.ts
+++ b/src/app/core/admin/cache-entries/cache-entry-modal/cache-entry-modal.component.ts
@@ -11,7 +11,7 @@ export class CacheEntryModalData {
 	cacheEntry: CacheEntry;
 }
 @Component({
-	templateUrl: 'cache-entry-modal.component.html',
+	templateUrl: './cache-entry-modal.component.html',
 	styles: [
 		`
 			:host {
diff --git a/src/app/core/admin/cache-entries/cache-entry.model.ts b/src/app/core/admin/cache-entries/cache-entry.model.ts
index d42e94b3..e4b10b16 100644
--- a/src/app/core/admin/cache-entries/cache-entry.model.ts
+++ b/src/app/core/admin/cache-entries/cache-entry.model.ts
@@ -1,6 +1,5 @@
 export class CacheEntry {
 	isRefreshing = false;
-	date: number;
 
 	constructor(
 		public key: string,
diff --git a/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.html b/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.html
index 502cba23..4f20ca86 100644
--- a/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.html
+++ b/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.html
@@ -3,7 +3,7 @@
 		<h1 skipTo>Cache Entries</h1>
 		View and manage user cache entries.
 	</div>
-	<system-alert></system-alert>
+	<system-alert />
 </section>
 
 <section class="page-body anchored-page-body">
@@ -14,21 +14,21 @@ <h1 skipTo>Cache Entries</h1>
 					placeholder="Search key and value..."
 					[search]="dataSource.searchEvent$.value"
 					(applySearch)="dataSource.search($event)"
-				></asy-search-input>
+				/>
 			</div>
 		</div>
 	</div>
 
 	<div class="table-content">
 		<table class="table table-striped" asyFilter asySort cdk-table [dataSource]="dataSource">
-			<asy-text-column name="key"></asy-text-column>
+			<asy-text-column name="key" />
 			<ng-container cdkColumnDef="value">
 				<th cdk-header-cell *cdkHeaderCellDef>Value</th>
 				<td class="hide-overflow" cdk-cell style="max-width: 300px" *cdkCellDef="let entry">
 					{{ entry.value | json }}
 				</td>
 			</ng-container>
-			<asy-ago-date-column name="ts" header="Created"></asy-ago-date-column>
+			<asy-ago-date-column name="ts" header="Created" />
 			<asy-actions-menu-column scope="cache-entry" stickyEnd>
 				<ng-template
 					actions-menu-tmp
@@ -44,6 +44,7 @@ <h1 skipTo>Cache Entries</h1>
 					>
 						<button
 							class="dropdown-item"
+							type="button"
 							cdkMenuItem
 							(cdkMenuItemTriggered)="viewCacheEntry(item)"
 						>
@@ -51,6 +52,7 @@ <h1 skipTo>Cache Entries</h1>
 						</button>
 						<button
 							class="dropdown-item"
+							type="button"
 							cdkMenuItem
 							(cdkMenuItemTriggered)="refreshCacheEntry(item)"
 						>
@@ -58,6 +60,7 @@ <h1 skipTo>Cache Entries</h1>
 						</button>
 						<button
 							class="dropdown-item"
+							type="button"
 							cdkMenuItem
 							(cdkMenuItemTriggered)="confirmDeleteEntry(item)"
 						>
@@ -75,12 +78,12 @@ <h1 skipTo>Cache Entries</h1>
 			filteredText="No cache entries matched your search."
 			[dataSource]="dataSource"
 			(clearFilters)="clearFilters()"
-		></asy-table-empty-state>
+		/>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
 		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource"></asy-paginator>
+			<asy-paginator [dataSource]="dataSource" />
 		</div>
 	</div>
 </section>
diff --git a/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.ts b/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.ts
index bef13f87..5296e45b 100644
--- a/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.ts
+++ b/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.ts
@@ -126,6 +126,7 @@ export class ListCacheEntriesComponent implements OnInit {
 	}
 
 	viewCacheEntry(cacheEntry: CacheEntry) {
+		console.log(cacheEntry);
 		this.#dialogService.open<unknown, CacheEntryModalData>(CacheEntryModalComponent, {
 			data: {
 				cacheEntry
diff --git a/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html b/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html
index a754dea5..9a8427fc 100644
--- a/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html
+++ b/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html
@@ -3,7 +3,7 @@
 		<h1 skipTo>EUAs</h1>
 		View and manage end user agreements.
 	</div>
-	<system-alert></system-alert>
+	<system-alert />
 </section>
 
 <section class="page-body anchored-page-body">
@@ -14,7 +14,7 @@ <h1 skipTo>EUAs</h1>
 					placeholder="Search..."
 					[search]="dataSource.searchEvent$.value"
 					(applySearch)="dataSource.search($event)"
-				></asy-search-input>
+				/>
 			</div>
 
 			<div class="mb-3 ms-auto">
@@ -43,7 +43,7 @@ <h1 skipTo>EUAs</h1>
 				cdk-table
 				[dataSource]="dataSource"
 			>
-				<asy-text-column name="_id" header="ID" [sortable]="false"></asy-text-column>
+				<asy-text-column name="_id" header="ID" [sortable]="false" />
 				<ng-container cdkColumnDef="title">
 					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Title</th>
 					<td class="hide-overflow" cdk-cell *cdkCellDef="let eua">
@@ -56,9 +56,9 @@ <h1 skipTo>EUAs</h1>
 						{{ eua.text }}
 					</td>
 				</ng-container>
-				<asy-date-column name="created"></asy-date-column>
-				<asy-date-column name="published"></asy-date-column>
-				<asy-date-column name="updated"></asy-date-column>
+				<asy-date-column name="created" />
+				<asy-date-column name="published" />
+				<asy-date-column name="updated" />
 				<asy-actions-menu-column scope="eua" stickyEnd>
 					<ng-template
 						actions-menu-tmp
@@ -74,6 +74,7 @@ <h1 skipTo>EUAs</h1>
 						>
 							<button
 								class="dropdown-item"
+								type="button"
 								cdkMenuItem
 								[routerLink]="['/admin/eua', item._id]"
 							>
@@ -81,16 +82,23 @@ <h1 skipTo>EUAs</h1>
 							</button>
 							<button
 								class="dropdown-item"
+								type="button"
 								cdkMenuItem
 								(click)="previewEndUserAgreement(item)"
 							>
 								Preview
 							</button>
-							<button class="dropdown-item" cdkMenuItem (click)="publishEua(item)">
+							<button
+								class="dropdown-item"
+								type="button"
+								cdkMenuItem
+								(click)="publishEua(item)"
+							>
 								Publish
 							</button>
 							<button
 								class="dropdown-item"
+								type="button"
 								cdkMenuItem
 								(click)="confirmDeleteEua(item)"
 							>
@@ -108,7 +116,7 @@ <h1 skipTo>EUAs</h1>
 				filteredText="No EUAs matched your search."
 				[dataSource]="dataSource"
 				(clearFilters)="clearFilters()"
-			></asy-table-empty-state>
+			/>
 		</div>
 
 		<asy-sidebar headerText="Columns" #sidebar>
@@ -116,13 +124,13 @@ <h1 skipTo>EUAs</h1>
 				[columns]="columns"
 				[storageKey]="dataSource.storageKey"
 				(columnsChange)="columnsChanged($event)"
-			></asy-column-chooser>
+			/>
 		</asy-sidebar>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
 		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource"></asy-paginator>
+			<asy-paginator [dataSource]="dataSource" />
 		</div>
 	</div>
 </section>
diff --git a/src/app/core/admin/end-user-agreement/manage-eua/manage-eua.component.html b/src/app/core/admin/end-user-agreement/manage-eua/manage-eua.component.html
index b5847ae6..e9088bf8 100644
--- a/src/app/core/admin/end-user-agreement/manage-eua/manage-eua.component.html
+++ b/src/app/core/admin/end-user-agreement/manage-eua/manage-eua.component.html
@@ -1,6 +1,6 @@
 <section>
 	<!-- Alert Notifications -->
-	<system-alert></system-alert>
+	<system-alert />
 
 	<form
 		name="euaForm"
diff --git a/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html b/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html
index 4c73e857..8932ae2b 100644
--- a/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html
+++ b/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html
@@ -3,7 +3,7 @@
 		<h1 skipTo>System Feedback</h1>
 		View and manage system feedback.
 	</div>
-	<system-alert></system-alert>
+	<system-alert />
 </section>
 
 <section class="page-body anchored-page-body">
@@ -14,7 +14,7 @@ <h1 skipTo>System Feedback</h1>
 					placeholder="Search..."
 					[search]="dataSource.searchEvent$.value"
 					(applySearch)="dataSource.search($event)"
-				></asy-search-input>
+				/>
 			</div>
 
 			<div class="mb-3 ms-auto">
@@ -71,8 +71,8 @@ <h1 skipTo>System Feedback</h1>
 						{{ feedback.creator.organization }}
 					</td>
 				</ng-container>
-				<asy-ago-date-column name="created" header="Submitted Date"></asy-ago-date-column>
-				<asy-ago-date-column name="updated"></asy-ago-date-column>
+				<asy-ago-date-column name="created" header="Submitted Date" />
+				<asy-ago-date-column name="updated" />
 				<ng-container cdkColumnDef="type">
 					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Type</th>
 					<td class="text-nowrap" cdk-cell *cdkCellDef="let feedback">
@@ -82,22 +82,19 @@ <h1 skipTo>System Feedback</h1>
 				<ng-container cdkColumnDef="body">
 					<th cdk-header-cell *cdkHeaderCellDef>
 						Feedback
-						<asy-header-filter text-filter></asy-header-filter>
+						<asy-header-filter text-filter />
 					</th>
 					<td cdk-cell *cdkCellDef="let feedback">
 						{{ feedback.body }}
 					</td>
 				</ng-container>
-				<asy-text-column name="browser"></asy-text-column>
-				<asy-text-column name="os"></asy-text-column>
-				<asy-text-column name="url" header="Submitted From"></asy-text-column>
+				<asy-text-column name="browser" />
+				<asy-text-column name="os" />
+				<asy-text-column name="url" header="Submitted From" />
 				<ng-container cdkColumnDef="status">
 					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>
 						Status
-						<asy-header-filter
-							list-filter
-							[options]="['New', 'Open', 'Closed']"
-						></asy-header-filter>
+						<asy-header-filter list-filter [options]="['New', 'Open', 'Closed']" />
 					</th>
 					<td cdk-cell *cdkCellDef="let feedback">
 						<button
@@ -119,6 +116,7 @@ <h1 skipTo>System Feedback</h1>
 								@if (feedback.status !== feedbackStatusOptions.OPEN) {
 									<button
 										class="dropdown-item"
+										type="button"
 										cdkMenuItem
 										(cdkMenuItemTriggered)="
 											updateFeedbackStatus(
@@ -133,6 +131,7 @@ <h1 skipTo>System Feedback</h1>
 								@if (feedback.status !== feedbackStatusOptions.CLOSED) {
 									<button
 										class="dropdown-item"
+										type="button"
 										cdkMenuItem
 										(cdkMenuItemTriggered)="
 											updateFeedbackStatus(
@@ -169,6 +168,7 @@ <h1 skipTo>System Feedback</h1>
 							>
 								<button
 									class="dropdown-item"
+									type="button"
 									cdkMenuItem
 									(cdkMenuItemTriggered)="updateFeedbackAssignee(feedback)"
 								>
@@ -177,6 +177,7 @@ <h1 skipTo>System Feedback</h1>
 								@for (username of assigneeUsernames(); track username) {
 									<button
 										class="dropdown-item"
+										type="button"
 										cdkMenuItem
 										(cdkMenuItemTriggered)="
 											updateFeedbackAssignee(feedback, username)
@@ -198,7 +199,7 @@ <h1 skipTo>System Feedback</h1>
 				filteredText="No feedback matched your search."
 				[dataSource]="dataSource"
 				(clearFilters)="clearFilters()"
-			></asy-table-empty-state>
+			/>
 		</div>
 
 		<asy-sidebar headerText="Columns" #sidebar>
@@ -206,13 +207,13 @@ <h1 skipTo>System Feedback</h1>
 				[columns]="columns"
 				[storageKey]="dataSource.storageKey"
 				(columnsChange)="columnsChanged($event)"
-			></asy-column-chooser>
+			/>
 		</asy-sidebar>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
 		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource"></asy-paginator>
+			<asy-paginator [dataSource]="dataSource" />
 		</div>
 	</div>
 </section>
diff --git a/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.ts b/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.ts
index f61f2e10..e9067e06 100644
--- a/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.ts
+++ b/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.ts
@@ -36,8 +36,8 @@ import { Feedback, FeedbackService, FeedbackStatusOption } from '../../../feedba
 import { AdminUsersService } from '../../user/admin-users.service';
 
 @Component({
-	templateUrl: 'admin-list-feedback.component.html',
-	styleUrls: ['admin-list-feedback.component.scss'],
+	templateUrl: './admin-list-feedback.component.html',
+	styleUrls: ['./admin-list-feedback.component.scss'],
 	standalone: true,
 	imports: [
 		SystemAlertComponent,
diff --git a/src/app/core/admin/messages/list-messages/list-messages.component.html b/src/app/core/admin/messages/list-messages/list-messages.component.html
index d2a35ad1..9f93e7db 100644
--- a/src/app/core/admin/messages/list-messages/list-messages.component.html
+++ b/src/app/core/admin/messages/list-messages/list-messages.component.html
@@ -3,7 +3,7 @@
 		<h1 skipTo>Messages</h1>
 		View and manage messages.
 	</div>
-	<system-alert></system-alert>
+	<system-alert />
 </section>
 
 <section class="page-body anchored-page-body">
@@ -14,7 +14,7 @@ <h1 skipTo>Messages</h1>
 					placeholder="Search..."
 					[search]="dataSource.searchEvent$.value"
 					(applySearch)="dataSource.search($event)"
-				></asy-search-input>
+				/>
 			</div>
 
 			<div class="mb-3 ms-auto">
@@ -37,15 +37,15 @@ <h1 skipTo>Messages</h1>
 					<a [routerLink]="['/admin/message', message._id]">{{ message.title }}</a>
 				</td>
 			</ng-container>
-			<asy-text-column name="type"></asy-text-column>
+			<asy-text-column name="type" />
 			<ng-container cdkColumnDef="body">
 				<th cdk-header-cell *cdkHeaderCellDef>Body</th>
 				<td class="hide-overflow" cdk-cell *cdkCellDef="let message">
 					{{ message.body }}
 				</td>
 			</ng-container>
-			<asy-date-column name="created"></asy-date-column>
-			<asy-date-column name="updated"></asy-date-column>
+			<asy-date-column name="created" />
+			<asy-date-column name="updated" />
 			<asy-actions-menu-column scope="user" stickyEnd>
 				<ng-template
 					actions-menu-tmp
@@ -89,12 +89,12 @@ <h1 skipTo>Messages</h1>
 			filteredText="No messages matched your search."
 			[dataSource]="dataSource"
 			(clearFilters)="clearFilters()"
-		></asy-table-empty-state>
+		/>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
 		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource"></asy-paginator>
+			<asy-paginator [dataSource]="dataSource" />
 		</div>
 	</div>
 </section>
diff --git a/src/app/core/admin/messages/manage-message/manage-message.component.html b/src/app/core/admin/messages/manage-message/manage-message.component.html
index 4ee0ef79..db11a7b8 100644
--- a/src/app/core/admin/messages/manage-message/manage-message.component.html
+++ b/src/app/core/admin/messages/manage-message/manage-message.component.html
@@ -1,6 +1,6 @@
 <section>
 	<!-- Alert Notifications -->
-	<system-alert></system-alert>
+	<system-alert />
 
 	<form role="form" autocomplete="off" novalidate #form="ngForm" (ngSubmit)="submitMessage()">
 		<div class="mb-4">
@@ -24,7 +24,7 @@ <h2 skipTo>{{ mode() | titlecase }} Message</h2>
 				style="width: 350px"
 				[(ngModel)]="message().type"
 				[items]="typeOptions"
-			></ng-select>
+			/>
 		</div>
 		<!-- Title -->
 		<div class="mb-3">
diff --git a/src/app/core/admin/user/list-users/admin-list-users.component.html b/src/app/core/admin/user/list-users/admin-list-users.component.html
index d23f6bbe..e93bbbd2 100644
--- a/src/app/core/admin/user/list-users/admin-list-users.component.html
+++ b/src/app/core/admin/user/list-users/admin-list-users.component.html
@@ -3,7 +3,7 @@
 		<h1 skipTo>Users</h1>
 		View and manage user accounts.
 	</div>
-	<system-alert></system-alert>
+	<system-alert />
 </section>
 
 <section class="page-body anchored-page-body">
@@ -14,7 +14,7 @@ <h1 skipTo>Users</h1>
 					placeholder="Search..."
 					[search]="dataSource.searchEvent$.value"
 					(applySearch)="dataSource.search($event)"
-				></asy-search-input>
+				/>
 			</div>
 
 			<div class="mb-3 ms-auto">
@@ -47,33 +47,27 @@ <h1 skipTo>Users</h1>
 				cdk-table
 				[dataSource]="dataSource"
 			>
-				<asy-text-column name="_id" header="ID" [sortable]="false"></asy-text-column>
+				<asy-text-column name="_id" header="ID" [sortable]="false" />
 				<ng-container cdkColumnDef="name">
 					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Name</th>
 					<td class="text-nowrap" cdk-cell *cdkCellDef="let user">
 						<a [routerLink]="['/admin/user', user._id]">{{ user.name }}</a>
 					</td>
 				</ng-container>
-				<asy-text-column name="username" [sortable]="false"></asy-text-column>
-				<asy-text-column name="organization" [sortable]="false"></asy-text-column>
-				<asy-text-column name="email" [sortable]="false"></asy-text-column>
-				<asy-text-column name="phone" [sortable]="false"></asy-text-column>
-				<asy-ago-date-column name="acceptedEua" header="EUA"></asy-ago-date-column>
-				<asy-ago-date-column name="lastLogin" header="Last Login"></asy-ago-date-column>
-				<asy-date-column name="created"></asy-date-column>
-				<asy-date-column name="updated"></asy-date-column>
-				<asy-expandable-list-column
-					name="externalRoles"
-					header="External Roles"
-				></asy-expandable-list-column>
-				<asy-expandable-list-column
-					name="externalGroups"
-					header="External Groups"
-				></asy-expandable-list-column>
+				<asy-text-column name="username" [sortable]="false" />
+				<asy-text-column name="organization" [sortable]="false" />
+				<asy-text-column name="email" [sortable]="false" />
+				<asy-text-column name="phone" [sortable]="false" />
+				<asy-ago-date-column name="acceptedEua" header="EUA" />
+				<asy-ago-date-column name="lastLogin" header="Last Login" />
+				<asy-date-column name="created" />
+				<asy-date-column name="updated" />
+				<asy-expandable-list-column name="externalRoles" header="External Roles" />
+				<asy-expandable-list-column name="externalGroups" header="External Groups" />
 				<ng-container cdkColumnDef="roles">
 					<th cdk-header-cell *cdkHeaderCellDef>
 						Roles
-						<asy-header-filter list-filter user-role-filter></asy-header-filter>
+						<asy-header-filter list-filter user-role-filter />
 					</th>
 					<td cdk-cell *cdkCellDef="let user">
 						@for (role of possibleRoles; track role) {
@@ -111,6 +105,7 @@ <h1 skipTo>Users</h1>
 						>
 							<button
 								class="dropdown-item"
+								type="button"
 								cdkMenuItem
 								[routerLink]="['/admin/user', item._id]"
 							>
@@ -119,6 +114,7 @@ <h1 skipTo>Users</h1>
 							@if (allowDeleteUser()) {
 								<button
 									class="dropdown-item"
+									type="button"
 									cdkMenuItem
 									(cdkMenuItemTriggered)="confirmDeleteUser(item)"
 								>
@@ -137,7 +133,7 @@ <h1 skipTo>Users</h1>
 				filteredText="No users matched your search."
 				[dataSource]="dataSource"
 				(clearFilters)="clearFilters()"
-			></asy-table-empty-state>
+			/>
 		</div>
 
 		<asy-sidebar headerText="Columns" #sidebar>
@@ -145,13 +141,13 @@ <h1 skipTo>Users</h1>
 				[columns]="columns"
 				[storageKey]="dataSource.storageKey"
 				(columnsChange)="columnsChanged($event)"
-			></asy-column-chooser>
+			/>
 		</asy-sidebar>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
 		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource"></asy-paginator>
+			<asy-paginator [dataSource]="dataSource" />
 		</div>
 	</div>
 </section>
diff --git a/src/app/core/admin/user/manage-user/manage-user.component.html b/src/app/core/admin/user/manage-user/manage-user.component.html
index 86e80acf..8bb58809 100644
--- a/src/app/core/admin/user/manage-user/manage-user.component.html
+++ b/src/app/core/admin/user/manage-user/manage-user.component.html
@@ -1,6 +1,6 @@
 <section>
 	<!-- Alert Notifications -->
-	<system-alert></system-alert>
+	<system-alert />
 
 	<form
 		role="form"
@@ -83,10 +83,10 @@ <h3>Password</h3>
 			<div class="mb-3">
 				<label class="form-label" for="password">
 					@if (mode() === 'edit') {
-						<label>New</label>
+						New
 					}
-					Password</label
-				>
+					Password
+				</label>
 				<input
 					class="form-control"
 					id="password"
@@ -97,13 +97,13 @@ <h3>Password</h3>
 				/>
 			</div>
 			<div class="mb-3">
-				<label class="form-label" for="password2"
-					>Re-enter
+				<label class="form-label" for="password2">
+					Re-enter
 					@if (mode() === 'edit') {
-						<label>New</label>
+						New
 					}
-					Password</label
-				>
+					Password
+				</label>
 				<input
 					class="form-control"
 					id="password2"
@@ -118,7 +118,7 @@ <h3>Password</h3>
 		@if (proxyPki()) {
 			<!-- Bypass Access Checker -->
 			<div class="mb-3">
-				<label class="form-label">Access Check</label>
+				<div class="form-label">Access Check</div>
 				<div class="form-check m-n1">
 					<input
 						class="form-check-input"
@@ -170,23 +170,21 @@ <h3>Password</h3>
 		}
 		<!-- Admin only stuff -->
 		<div class="mb-3">
-			<label class="form-label">Roles</label>
-			<div>
-				@for (role of possibleRoles; track role) {
-					<div class="form-check form-check-inline" tooltip="{{ role.description }}">
-						<input
-							class="form-check-input"
-							id="role{{ role.role }}Cb"
-							name="role{{ role.role }}Cb"
-							type="checkbox"
-							[(ngModel)]="user().roles[role.role]"
-						/>
-						<label class="form-check-label" for="role{{ role.role }}Cb">{{
-							role.label
-						}}</label>
-					</div>
-				}
-			</div>
+			<div class="form-label">Roles</div>
+			@for (role of possibleRoles; track role) {
+				<div class="form-check form-check-inline" tooltip="{{ role.description }}">
+					<input
+						class="form-check-input"
+						id="role{{ role.role }}Cb"
+						name="role{{ role.role }}Cb"
+						type="checkbox"
+						[(ngModel)]="user().roles[role.role]"
+					/>
+					<label class="form-check-label" for="role{{ role.role }}Cb">{{
+						role.label
+					}}</label>
+				</div>
+			}
 		</div>
 		<div class="mb-3 text-end">
 			<button class="btn btn-link me-2" type="button" routerLink="/admin/users">
diff --git a/src/app/core/audit/audit.service.ts b/src/app/core/audit/audit.service.ts
index 8a1aecd9..27c1d0e9 100644
--- a/src/app/core/audit/audit.service.ts
+++ b/src/app/core/audit/audit.service.ts
@@ -9,6 +9,7 @@ import { SystemAlertService } from '../../common/system-alert';
 import { User } from '../auth';
 import { AuditActionTypes } from './audit.classes';
 
+// eslint-disable-next-line @angular-eslint/use-injectable-provided-in
 @Injectable()
 export class AuditService {
 	readonly #http = inject(HttpClient);
diff --git a/src/app/core/audit/list-audit-entries/list-audit-entries.component.html b/src/app/core/audit/list-audit-entries/list-audit-entries.component.html
index 10d2d6c6..249d1e1b 100644
--- a/src/app/core/audit/list-audit-entries/list-audit-entries.component.html
+++ b/src/app/core/audit/list-audit-entries/list-audit-entries.component.html
@@ -3,7 +3,7 @@
 		<h1 skipTo>Audit Logs</h1>
 		Browse and search audit logs.
 	</div>
-	<system-alert></system-alert>
+	<system-alert />
 </section>
 
 <section class="page-body anchored-page-body">
@@ -22,20 +22,17 @@ <h1 skipTo>Audit Logs</h1>
 				<th asy-sort-header="audit.actor.name" cdk-header-cell *cdkHeaderCellDef>
 					<span class="fa-solid fa-user"></span>
 					Actor
-					<asy-header-filter audit-actor-filter typeahead-filter></asy-header-filter>
+					<asy-header-filter audit-actor-filter typeahead-filter />
 				</th>
 				<td class="text-nowrap" cdk-cell *cdkCellDef="let entry">
-					<asy-audit-component
-						auditType="user"
-						[auditObject]="entry.audit.actor"
-					></asy-audit-component>
+					<asy-audit-component auditType="user" [auditObject]="entry.audit.actor" />
 				</td>
 			</ng-container>
 			<ng-container cdkColumnDef="created">
 				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>
 					<span class="fa-solid fa-clock"></span>
 					Timestamp
-					<asy-header-filter date-filter></asy-header-filter>
+					<asy-header-filter date-filter />
 				</th>
 				<td class="text-nowrap" cdk-cell *cdkCellDef="let entry">
 					{{ entry?.created | utcDate }}
@@ -45,11 +42,7 @@ <h1 skipTo>Audit Logs</h1>
 				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>
 					<span class="fa-solid fa-mouse-pointer"></span>
 					Action
-					<asy-header-filter
-						audit-distinct-value-filter
-						list-filter
-						showSearch
-					></asy-header-filter>
+					<asy-header-filter audit-distinct-value-filter list-filter showSearch />
 				</th>
 				<td class="text-nowrap" cdk-cell *cdkCellDef="let entry">
 					{{ entry?.audit?.action }}
@@ -59,11 +52,7 @@ <h1 skipTo>Audit Logs</h1>
 				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>
 					<span class="fa-solid fa-tag"></span>
 					Type
-					<asy-header-filter
-						audit-distinct-value-filter
-						list-filter
-						showSearch
-					></asy-header-filter>
+					<asy-header-filter audit-distinct-value-filter list-filter showSearch />
 				</th>
 				<td class="text-nowrap" cdk-cell *cdkCellDef="let entry">
 					{{ entry?.audit?.auditType }}
@@ -75,11 +64,12 @@ <h1 skipTo>Audit Logs</h1>
 					<asy-audit-component
 						[auditObject]="entry.audit.object?.after ?? entry.audit.object"
 						[auditType]="entry.audit.auditType"
-					></asy-audit-component>
+					/>
 					<div>
 						@if (entry.isViewDetailsAction) {
 							<button
 								class="btn btn-link btn-sm"
+								type="button"
 								container="body"
 								placement="bottom"
 								tooltip="See details of the update"
@@ -104,11 +94,12 @@ <h1 skipTo>Audit Logs</h1>
 					<asy-audit-component
 						[auditObject]="entry.audit.object?.before"
 						[auditType]="entry.audit.auditType"
-					></asy-audit-component>
+					/>
 					<div>
 						@if (entry.isViewChangesAction) {
 							<button
 								class="btn btn-link btn-sm"
+								type="button"
 								container="body"
 								placement="bottom"
 								tooltip="See details of the update"
@@ -151,12 +142,12 @@ <h1 skipTo>Audit Logs</h1>
 			filteredText="No audit logs matched your search."
 			[dataSource]="dataSource"
 			(clearFilters)="clearFilters()"
-		></asy-table-empty-state>
+		/>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
 		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource"></asy-paginator>
+			<asy-paginator [dataSource]="dataSource" />
 		</div>
 	</div>
 </section>
diff --git a/src/app/core/eua/user-eua.component.html b/src/app/core/eua/user-eua.component.html
index afe4eb1c..ffae7ee3 100644
--- a/src/app/core/eua/user-eua.component.html
+++ b/src/app/core/eua/user-eua.component.html
@@ -9,7 +9,7 @@ <h1>
 					}
 				</h1>
 				<!-- Alert Notifications -->
-				<system-alert></system-alert>
+				<system-alert />
 				<form name="userForm" role="form" autocomplete="off">
 					<div class="card mt-3">
 						<div class="card-header">
diff --git a/src/app/core/eua/user-eua.component.ts b/src/app/core/eua/user-eua.component.ts
index 9beab624..8afdcb2e 100644
--- a/src/app/core/eua/user-eua.component.ts
+++ b/src/app/core/eua/user-eua.component.ts
@@ -20,7 +20,7 @@ import { NavigationService } from '../navigation.service';
 import { APP_SESSION } from '../tokens';
 
 @Component({
-	templateUrl: 'user-eua.component.html',
+	templateUrl: './user-eua.component.html',
 	standalone: true,
 	imports: [SystemAlertComponent, FormsModule, AsyncPipe],
 	changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/core/feedback/feedback-flyout/feedback-flyout.component.html b/src/app/core/feedback/feedback-flyout/feedback-flyout.component.html
index d5573fef..9efe0a1c 100644
--- a/src/app/core/feedback/feedback-flyout/feedback-flyout.component.html
+++ b/src/app/core/feedback/feedback-flyout/feedback-flyout.component.html
@@ -21,7 +21,7 @@ <h2 class="pb-2">What's on your mind?</h2>
 					>
 				</div>
 				@if (feedback.type === 'general feedback') {
-					<ng-container *ngTemplateOutlet="textInput"></ng-container>
+					<ng-container *ngTemplateOutlet="textInput" />
 				}
 				<div class="form-check">
 					<input
@@ -38,7 +38,7 @@ <h2 class="pb-2">What's on your mind?</h2>
 					>
 				</div>
 				@if (feedback.type === 'feature request') {
-					<ng-container *ngTemplateOutlet="textInput"></ng-container>
+					<ng-container *ngTemplateOutlet="textInput" />
 				}
 				<div class="form-check">
 					<input
@@ -135,7 +135,7 @@ <h3 class="pt-3 pb-2">What's the bug/error type?</h3>
 						>
 					</div>
 					<h3 class="pt-2">What happened?</h3>
-					<ng-container *ngTemplateOutlet="textInput"></ng-container>
+					<ng-container *ngTemplateOutlet="textInput" />
 				}
 				<ng-template #textInput>
 					@if (classificationOptions().length > 0) {
@@ -149,8 +149,7 @@ <h3 class="pt-2">What happened?</h3>
 								[(ngModel)]="feedback.classification"
 								[clearable]="false"
 								[items]="classificationOptions()"
-							>
-							</ng-select>
+							/>
 						</div>
 					}
 					<div
diff --git a/src/app/core/feedback/feedback-modal/feedback-modal.component.html b/src/app/core/feedback/feedback-modal/feedback-modal.component.html
index 4846dc48..a16d505d 100644
--- a/src/app/core/feedback/feedback-modal/feedback-modal.component.html
+++ b/src/app/core/feedback/feedback-modal/feedback-modal.component.html
@@ -25,7 +25,7 @@ <h2 class="pb-2">What's on your mind?</h2>
 		</div>
 
 		@if (feedback.type === 'general feedback') {
-			<ng-container *ngTemplateOutlet="textInput"></ng-container>
+			<ng-container *ngTemplateOutlet="textInput" />
 		}
 
 		<div class="form-check">
@@ -42,7 +42,7 @@ <h2 class="pb-2">What's on your mind?</h2>
 		</div>
 
 		@if (feedback.type === 'feature request') {
-			<ng-container *ngTemplateOutlet="textInput"></ng-container>
+			<ng-container *ngTemplateOutlet="textInput" />
 		}
 
 		<div class="form-check">
@@ -131,7 +131,7 @@ <h3 class="pt-3 pb-2">What's the bug/error type?</h3>
 				<label class="form-check-label mb-2" for="subtype-option-5">Unsure</label>
 			</div>
 			<h3 class="pt-2">What happened?</h3>
-			<ng-container *ngTemplateOutlet="textInput"></ng-container>
+			<ng-container *ngTemplateOutlet="textInput" />
 		}
 
 		<ng-template #textInput>
@@ -146,8 +146,7 @@ <h3 class="pt-2">What happened?</h3>
 						[(ngModel)]="feedback.classification"
 						[clearable]="false"
 						[items]="classificationOptions()"
-					>
-					</ng-select>
+					/>
 				</div>
 			}
 
diff --git a/src/app/core/feedback/feedback-modal/feedback-modal.component.ts b/src/app/core/feedback/feedback-modal/feedback-modal.component.ts
index fcdd4980..d5d08c43 100644
--- a/src/app/core/feedback/feedback-modal/feedback-modal.component.ts
+++ b/src/app/core/feedback/feedback-modal/feedback-modal.component.ts
@@ -20,8 +20,8 @@ import { Feedback } from '../feedback.model';
 import { FeedbackService } from '../feedback.service';
 
 @Component({
-	templateUrl: 'feedback-modal.component.html',
-	styleUrls: ['feedback-modal.component.scss'],
+	templateUrl: './feedback-modal.component.html',
+	styleUrls: ['./feedback-modal.component.scss'],
 	standalone: true,
 	imports: [ModalComponent, FormsModule, NgTemplateOutlet, NgSelectModule],
 	changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/core/help/getting-started/external-links.component.ts b/src/app/core/help/getting-started/external-links.component.ts
index 8ad44f8f..2ec179e6 100644
--- a/src/app/core/help/getting-started/external-links.component.ts
+++ b/src/app/core/help/getting-started/external-links.component.ts
@@ -4,7 +4,7 @@ import { Config } from '../../config.model';
 
 @Component({
 	selector: 'external-links',
-	templateUrl: 'external-links.component.html',
+	templateUrl: './external-links.component.html',
 	standalone: true,
 	imports: []
 })
diff --git a/src/app/core/help/getting-started/getting-started-help.component.html b/src/app/core/help/getting-started/getting-started-help.component.html
index d0a8d92d..b91d8719 100644
--- a/src/app/core/help/getting-started/getting-started-help.component.html
+++ b/src/app/core/help/getting-started/getting-started-help.component.html
@@ -41,6 +41,6 @@ <h4>Looking for help?</h4>
 @if (externalLinks().length > 0) {
 	<div class="mt-3">
 		<h3>External Resources</h3>
-		<external-links [links]="externalLinks()"></external-links>
+		<external-links [links]="externalLinks()" />
 	</div>
 }
diff --git a/src/app/core/help/getting-started/getting-started-help.component.ts b/src/app/core/help/getting-started/getting-started-help.component.ts
index 3c79e293..47b29a4f 100644
--- a/src/app/core/help/getting-started/getting-started-help.component.ts
+++ b/src/app/core/help/getting-started/getting-started-help.component.ts
@@ -4,7 +4,7 @@ import { APP_CONFIG } from '../../tokens';
 import { ExternalLinksComponent } from './external-links.component';
 
 @Component({
-	templateUrl: 'getting-started-help.component.html',
+	templateUrl: './getting-started-help.component.html',
 	standalone: true,
 	imports: [ExternalLinksComponent]
 })
diff --git a/src/app/core/help/help.component.html b/src/app/core/help/help.component.html
index 7f596523..07a6ba66 100644
--- a/src/app/core/help/help.component.html
+++ b/src/app/core/help/help.component.html
@@ -20,7 +20,7 @@ <h3>
 	<div class="col-lg-9 col-xl-10 h-100" role="main">
 		<section class="card h-100">
 			<div class="card-body overflow-auto">
-				<router-outlet></router-outlet>
+				<router-outlet />
 			</div>
 		</section>
 	</div>
diff --git a/src/app/core/help/help.component.ts b/src/app/core/help/help.component.ts
index f256442f..c3110da0 100644
--- a/src/app/core/help/help.component.ts
+++ b/src/app/core/help/help.component.ts
@@ -13,8 +13,8 @@ import {
 import { filter, map } from 'rxjs/operators';
 
 @Component({
-	templateUrl: 'help.component.html',
-	styleUrls: ['help.component.scss'],
+	templateUrl: './help.component.html',
+	styleUrls: ['./help.component.scss'],
 	standalone: true,
 	imports: [RouterLinkActive, RouterLink, RouterOutlet, TitleCasePipe, JsonPipe]
 })
diff --git a/src/app/core/masquerade/masquerade/masquerade.component.html b/src/app/core/masquerade/masquerade/masquerade.component.html
index 87befe08..101b9b32 100644
--- a/src/app/core/masquerade/masquerade/masquerade.component.html
+++ b/src/app/core/masquerade/masquerade/masquerade.component.html
@@ -1,10 +1,10 @@
 @if (isMasquerading) {
 	<div class="mx-auto mt-5">
-		<loading-spinner message="Clearing Masquerade..."> </loading-spinner>
+		<loading-spinner message="Clearing Masquerade..." />
 	</div>
 } @else {
 	<div class="mb-2">
-		<label>Search Type</label>
+		<div class="form-label">Search Type</div>
 		<div class="form-check">
 			<input
 				class="form-check-input"
@@ -54,7 +54,7 @@
 			/>
 		</div>
 	}
-	<button class="btn btn-primary" [disabled]="!selectedUserDn" (click)="submit()">
+	<button class="btn btn-primary" type="button" [disabled]="!selectedUserDn" (click)="submit()">
 		Masquerade
 	</button>
 }
diff --git a/src/app/core/masquerade/masquerade/masquerade.component.ts b/src/app/core/masquerade/masquerade/masquerade.component.ts
index 0ebed6e8..b1a13335 100644
--- a/src/app/core/masquerade/masquerade/masquerade.component.ts
+++ b/src/app/core/masquerade/masquerade/masquerade.component.ts
@@ -45,7 +45,7 @@ export class MasqueradeComponent implements OnInit {
 		} else if (this.#session().user?.canMasquerade) {
 			this.loadUsers();
 		} else {
-			window.location.href = '#/';
+			// window.location.href = '#/';
 		}
 	}
 
diff --git a/src/app/core/messages/recent-messages/recent-messages.component.html b/src/app/core/messages/recent-messages/recent-messages.component.html
index ffe7d359..596bb455 100644
--- a/src/app/core/messages/recent-messages/recent-messages.component.html
+++ b/src/app/core/messages/recent-messages/recent-messages.component.html
@@ -19,11 +19,12 @@ <h4 class="mb-0">Notifications</h4>
 						<div class="card-body">
 							<div class="d-flex">
 								<h4 class="card-title text-truncate me-3">{{ message.title }}</h4>
-								<span
-									class="fa-solid fa-lg fa-close ms-auto"
-									style="cursor: pointer"
+								<button
+									class="btn-close ms-auto"
+									type="button"
+									aria-label="Dismiss Message"
 									(click)="dismissMessage(message)"
-								></span>
+								></button>
 							</div>
 							<p class="card-text line-clamp" [innerHTML]="message.body"></p>
 						</div>
diff --git a/src/app/core/messages/view-all-messages/view-all-messages.component.html b/src/app/core/messages/view-all-messages/view-all-messages.component.html
index a4e04e48..42036da7 100644
--- a/src/app/core/messages/view-all-messages/view-all-messages.component.html
+++ b/src/app/core/messages/view-all-messages/view-all-messages.component.html
@@ -2,19 +2,18 @@
 	<h1 class="mb-3">Notifications</h1>
 
 	<!-- Alert Notifications -->
-	<system-alert></system-alert>
+	<system-alert />
 
 	<div class="pt-2 d-flex flex-column align-items-stretch">
 		<asy-search-input
 			class="mx-auto mb-4"
 			placeholder="Search messages..."
 			(applySearch)="onSearch($event)"
-		>
-		</asy-search-input>
+		/>
 		<div class="p-2">
 			@if (newMessages()) {
 				<div>
-					<button class="btn btn-sm btn-link" (click)="loadNewMessages()">
+					<button class="btn btn-sm btn-link" type="button" (click)="loadNewMessages()">
 						Load new messages
 					</button>
 				</div>
diff --git a/src/app/core/page-title.strategy.ts b/src/app/core/page-title.strategy.ts
index bad87d0d..5d66db4f 100644
--- a/src/app/core/page-title.strategy.ts
+++ b/src/app/core/page-title.strategy.ts
@@ -7,6 +7,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import { APP_CONFIG } from './tokens';
 
+// eslint-disable-next-line @angular-eslint/use-injectable-provided-in
 @Injectable()
 export class PageTitleStrategy extends TitleStrategy {
 	readonly #title = inject(Title);
diff --git a/src/app/core/signin/signin.component.html b/src/app/core/signin/signin.component.html
index 23524235..9e869d62 100644
--- a/src/app/core/signin/signin.component.html
+++ b/src/app/core/signin/signin.component.html
@@ -2,7 +2,7 @@
 	<!-- PKI Authentication Strategy -->
 	@if (pkiMode()) {
 		<div class="signin-container mx-auto mt-5">
-			<loading-spinner message="Signing In..." [hidden]="error()"> </loading-spinner>
+			<loading-spinner message="Signing In..." [hidden]="error()" />
 			<div class="text-center text-danger" [hidden]="!error()">
 				<p>Unable to authenticate:</p>
 				<strong>{{ error() }}</strong>
diff --git a/src/app/core/signin/signin.component.ts b/src/app/core/signin/signin.component.ts
index 5d9f4007..b92d7a54 100644
--- a/src/app/core/signin/signin.component.ts
+++ b/src/app/core/signin/signin.component.ts
@@ -17,8 +17,8 @@ import { NavigationService } from '../navigation.service';
 import { APP_CONFIG } from '../tokens';
 
 @Component({
-	templateUrl: 'signin.component.html',
-	styleUrls: ['signin.component.scss'],
+	templateUrl: './signin.component.html',
+	styleUrls: ['./signin.component.scss'],
 	standalone: true,
 	imports: [LoadingSpinnerComponent, FormsModule, RouterLink],
 	changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/core/signup/signed-up.component.ts b/src/app/core/signup/signed-up.component.ts
index 4133799c..bf0dd6c4 100644
--- a/src/app/core/signup/signed-up.component.ts
+++ b/src/app/core/signup/signed-up.component.ts
@@ -3,7 +3,7 @@ import { RouterLink } from '@angular/router';
 
 @Component({
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	templateUrl: 'signed-up.component.html',
+	templateUrl: './signed-up.component.html',
 	standalone: true,
 	imports: [RouterLink]
 })
diff --git a/src/app/core/signup/signup.component.html b/src/app/core/signup/signup.component.html
index 4d9e6fe9..bb9646c9 100644
--- a/src/app/core/signup/signup.component.html
+++ b/src/app/core/signup/signup.component.html
@@ -1,6 +1,6 @@
 <section>
 	<!-- Alert Notifications -->
-	<system-alert></system-alert>
+	<system-alert />
 
 	@if (user) {
 		<form
diff --git a/src/app/core/site-container/site-container.component.html b/src/app/core/site-container/site-container.component.html
index 9ee7be86..2fdc47c0 100644
--- a/src/app/core/site-container/site-container.component.html
+++ b/src/app/core/site-container/site-container.component.html
@@ -11,7 +11,7 @@
 <section class="site-body">
 	<site-navbar>
 		<main class="site-content h-100 overflow-auto" id="app-content" cdkScrollable tabindex="-1">
-			<ng-content></ng-content>
+			<ng-content />
 		</main>
 	</site-navbar>
 </section>
diff --git a/src/app/core/site-container/site-container.component.ts b/src/app/core/site-container/site-container.component.ts
index 248997d4..3b33d873 100644
--- a/src/app/core/site-container/site-container.component.ts
+++ b/src/app/core/site-container/site-container.component.ts
@@ -9,8 +9,8 @@ import { APP_CONFIG, APP_SESSION } from '../tokens';
 @Component({
 	selector: 'site-container',
 
-	templateUrl: 'site-container.component.html',
-	styleUrls: ['site-container.component.scss'],
+	templateUrl: './site-container.component.html',
+	styleUrls: ['./site-container.component.scss'],
 	standalone: true,
 	imports: [SiteNavbarComponent, IsAuthenticatedDirective, FeedbackFlyoutComponent, CdkScrollable]
 })
diff --git a/src/app/core/site-navbar/site-navbar.component.html b/src/app/core/site-navbar/site-navbar.component.html
index ca2778d9..c65a18fd 100644
--- a/src/app/core/site-navbar/site-navbar.component.html
+++ b/src/app/core/site-navbar/site-navbar.component.html
@@ -4,7 +4,7 @@
 >
 	<nav class="nav flex-column border-bottom">
 		<a class="nav-link navbar-logo p-1 border-bottom" href="#">
-			<img src="/assets/images/nav-logo.png" alt="Logo" />
+			<img alt="Logo" height="184" ngSrc="/assets/images/nav-logo.png" width="184" />
 			<span class="nav-label">{{ appTitle() }}</span>
 		</a>
 	</nav>
@@ -98,7 +98,12 @@
 						<!-- User Signout -->
 						<a class="dropdown-item" href="/api/auth/signout" cdkMenuItem> Sign out </a>
 						@if (session().user?.eua) {
-							<button class="dropdown-item" cdkMenuItem routerLink="/eua">
+							<button
+								class="dropdown-item"
+								type="button"
+								cdkMenuItem
+								routerLink="/eua"
+							>
 								View EUA
 							</button>
 						}
@@ -107,6 +112,7 @@
 						@if (showUserPreferencesLink()) {
 							<button
 								class="dropdown-item"
+								type="button"
 								cdkMenuItem
 								[routerLink]="userPreferencesLink()"
 							>
@@ -114,7 +120,12 @@
 							</button>
 						}
 						@if (masqueradeEnabled() && (canMasquerade() || isMasquerade())) {
-							<button class="dropdown-item" cdkMenuItem routerLink="/masquerade">
+							<button
+								class="dropdown-item"
+								type="button"
+								cdkMenuItem
+								routerLink="/masquerade"
+							>
 								@if (isMasquerade()) {
 									Clear
 								}
@@ -175,6 +186,7 @@
 						@for (adminItem of adminTopics; track adminItem) {
 							<button
 								class="dropdown-item"
+								type="button"
 								cdkMenuItem
 								[routerLink]="['admin/' + adminItem.path]"
 							>
@@ -187,11 +199,11 @@
 
 			<!-- Messages Nav   -->
 			@if (session().isUser()) {
-				<a
+				<button
 					class="nav-link"
 					[class.highlight-link]="messagesNavOpen()"
+					type="button"
 					container="body"
-					linkAccessibility
 					placement="left bottom"
 					tooltip="Notifications"
 					#trigger
@@ -204,7 +216,7 @@
 						[attr.data-new-messages-count]="numNewMessages()"
 					></span>
 					<span class="nav-label">Notifications</span>
-				</a>
+				</button>
 				<ng-template
 					cdkConnectedOverlay
 					cdkConnectedOverlayPanelClass="messages-nav"
@@ -216,9 +228,7 @@
 					(overlayOutsideClick)="messagesNavOpen.set(false)"
 				>
 					<div class="dropdown-menu messages-menu">
-						<app-recent-messages
-							(viewAllClicked)="messagesNavOpen.set(false)"
-						></app-recent-messages>
+						<app-recent-messages (viewAllClicked)="messagesNavOpen.set(false)" />
 					</div>
 				</ng-template>
 			}
@@ -252,7 +262,7 @@
 				>
 					<!-- Help -->
 					@if (helpEnabled) {
-						<button class="dropdown-item" cdkMenuItem routerLink="/help">
+						<button class="dropdown-item" type="button" cdkMenuItem routerLink="/help">
 							Help Docs
 						</button>
 					}
@@ -260,6 +270,7 @@
 					@if (isAuthenticated() && showFeedbackOption()) {
 						<button
 							class="dropdown-item"
+							type="button"
 							cdkMenuItem
 							(cdkMenuItemTriggered)="showFeedbackModal()"
 						>
@@ -273,7 +284,9 @@
 						</a>
 					}
 					<!-- About -->
-					<button class="dropdown-item" cdkMenuItem routerLink="/about">About</button>
+					<button class="dropdown-item" type="button" cdkMenuItem routerLink="/about">
+						About
+					</button>
 				</div>
 			</ng-template>
 		</nav>
@@ -286,6 +299,7 @@
 		<!-- Collapse/Expand -->
 		<button
 			class="nav-link text-start"
+			type="button"
 			container="body"
 			placement="left"
 			tooltip="Expand"
@@ -305,5 +319,5 @@
 	class="navbar-content"
 	[ngClass]="{ 'navbar-open': navbarOpen(), 'navbar-close': !navbarOpen() }"
 >
-	<ng-content></ng-content>
+	<ng-content />
 </div>
diff --git a/src/app/core/site-navbar/site-navbar.component.scss b/src/app/core/site-navbar/site-navbar.component.scss
index 5033a296..92cbdb50 100644
--- a/src/app/core/site-navbar/site-navbar.component.scss
+++ b/src/app/core/site-navbar/site-navbar.component.scss
@@ -113,7 +113,7 @@ $nav-popover-width: 192px !default;
 }
 
 .messages-menu {
-	max-width: min(calc(100vw - #{$nav-open-width} - 1rem), #{$nav-messages-popover-max-width});
+	width: min(calc(100vw - #{$nav-open-width} - 1rem), #{$nav-messages-popover-max-width});
 }
 
 .nav-menu {
diff --git a/src/app/core/site-navbar/site-navbar.component.ts b/src/app/core/site-navbar/site-navbar.component.ts
index 28de56d3..9cfde912 100644
--- a/src/app/core/site-navbar/site-navbar.component.ts
+++ b/src/app/core/site-navbar/site-navbar.component.ts
@@ -1,7 +1,7 @@
 import { A11yModule } from '@angular/cdk/a11y';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { CdkConnectedOverlay, CdkScrollable, ConnectedPosition } from '@angular/cdk/overlay';
-import { NgClass } from '@angular/common';
+import { NgClass, NgOptimizedImage } from '@angular/common';
 import { Component, OnInit, computed, effect, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { RouterLink, RouterLinkActive } from '@angular/router';
@@ -33,8 +33,8 @@ const NAV_OPEN_STORAGE_KEY = 'navbar-open';
 
 @Component({
 	selector: 'site-navbar',
-	templateUrl: 'site-navbar.component.html',
-	styleUrls: ['site-navbar.component.scss'],
+	templateUrl: './site-navbar.component.html',
+	styleUrls: ['./site-navbar.component.scss'],
 	standalone: true,
 	imports: [
 		NgClass,
@@ -54,7 +54,8 @@ const NAV_OPEN_STORAGE_KEY = 'navbar-open';
 		CdkConnectedOverlay,
 		A11yModule,
 		CdkScrollable,
-		ThemeToggleComponent
+		ThemeToggleComponent,
+		NgOptimizedImage
 	]
 })
 export class SiteNavbarComponent implements OnInit {
diff --git a/src/app/core/teams/add-members-modal/add-members-modal.component.html b/src/app/core/teams/add-members-modal/add-members-modal.component.html
index e9d74a12..f2f6a3ec 100644
--- a/src/app/core/teams/add-members-modal/add-members-modal.component.html
+++ b/src/app/core/teams/add-members-modal/add-members-modal.component.html
@@ -19,7 +19,7 @@ <h3>Add users</h3>
 			[typeahead]="usersInput$"
 			(change)="typeaheadOnSelect($event, selectDropdown)"
 		>
-			<ng-template let-item="item" ng-label-tmp> </ng-template>
+			<ng-template let-item="item" ng-label-tmp />
 		</ng-select>
 	</div>
 
@@ -65,6 +65,7 @@ <h3 class="pt-2">Set user roles</h3>
 						@for (role of teamRoleOptions; track role) {
 							<button
 								class="dropdown-item"
+								type="button"
 								[value]="role.role"
 								cdkMenuItem
 								(cdkMenuItemTriggered)="updateRoleSelection(member, role.role)"
@@ -81,6 +82,7 @@ <h3 class="pt-2">Set user roles</h3>
 			<td cdk-cell *cdkCellDef="let index = index">
 				<button
 					class="btn btn-link p-0"
+					type="button"
 					container="body"
 					placement="left"
 					tooltip="Remove User"
diff --git a/src/app/core/teams/create-team/create-team.component.html b/src/app/core/teams/create-team/create-team.component.html
index bac0a344..bfe9c2d4 100644
--- a/src/app/core/teams/create-team/create-team.component.html
+++ b/src/app/core/teams/create-team/create-team.component.html
@@ -1,6 +1,6 @@
 <section>
 	<!-- Alert Notifications -->
-	<system-alert></system-alert>
+	<system-alert />
 
 	<form role="form" autocomplete="off" novalidate #form="ngForm" (ngSubmit)="save()">
 		<div>
@@ -32,8 +32,9 @@ <h2 skipTo>Create Team</h2>
 		<!-- Team Admin -->
 		@if (isAdmin()) {
 			<div class="mb-3">
-				<label class="form-label form-required">Team Admin</label>
+				<label class="form-label form-required" for="teamAdmin">Team Admin</label>
 				<ng-select
+					id="teamAdmin"
 					name="teamAdmin"
 					bindLabel="name"
 					placeholder="Search for user..."
@@ -43,8 +44,7 @@ <h2 skipTo>Create Team</h2>
 					[items]="typeaheadUsers()"
 					[loading]="usersLoading()"
 					[typeahead]="usersInput$"
-				>
-				</ng-select>
+				/>
 				<button
 					class="btn btn-sm btn-link px-0 pb-0"
 					type="button"
@@ -81,15 +81,14 @@ <h2 skipTo>Create Team</h2>
 					placeholder="Select parent..."
 					style="width: 400px"
 					[(ngModel)]="team.parent"
-				>
-				</ng-select>
+				/>
 			</div>
 		}
 
 		<!-- Implicit Teams Members -->
 		@if (implicitMembersStrategy() !== undefined) {
 			<div class="mb-3">
-				<label class="form-label form-required">Implicit Team Members</label>
+				<div class="form-label form-required">Implicit Team Members</div>
 				<p class="mt-n1 mb-1">
 					Do you want to automatically grant users access to team based on external
 					{{ implicitMembersStrategy() }}?
@@ -124,25 +123,27 @@ <h2 skipTo>Create Team</h2>
 		@if (implicitMembersStrategy() === 'roles') {
 			<!-- External Roles -->
 			<div class="mb-3" [hidden]="!team.implicitMembers">
-				<label class="form-label">External Roles</label>
+				<label class="form-label" for="externalRoles">External Roles</label>
 				<ng-select
+					id="externalRoles"
 					name="externalRoles"
 					appUserExternalRolesSelect
 					multi-select
 					placeholder="Start typing a role..."
 					[(ngModel)]="team.requiresExternalRoles"
-				></ng-select>
+				/>
 			</div>
 		} @else if (implicitMembersStrategy() === 'teams') {
 			<!-- External Teams -->
 			<div class="mb-3" [hidden]="!team.implicitMembers">
-				<label class="form-label">External Teams</label>
+				<label class="form-label" for="externalTeams">External Teams</label>
 				<ng-select
+					id="externalTeams"
 					name="externalTeams"
 					multi-select
 					placeholder="Start typing a team..."
 					[(ngModel)]="team.requiresExternalTeams"
-				></ng-select>
+				/>
 			</div>
 		}
 
diff --git a/src/app/core/teams/list-team-members/list-team-members.component.html b/src/app/core/teams/list-team-members/list-team-members.component.html
index efa86fc2..ff7093bc 100644
--- a/src/app/core/teams/list-team-members/list-team-members.component.html
+++ b/src/app/core/teams/list-team-members/list-team-members.component.html
@@ -6,7 +6,7 @@
 					placeholder="Search team members..."
 					[search]="dataSource.searchEvent$.value"
 					(applySearch)="dataSource.search($event)"
-				></asy-search-input>
+				/>
 			</div>
 
 			<div class="mb-3 ms-auto">
@@ -21,14 +21,13 @@
 
 	<div class="table-content">
 		<table class="table table-striped" asyFilter asySort cdk-table [dataSource]="dataSource">
-			<asy-text-column name="name"></asy-text-column>
-			<asy-text-column name="username"></asy-text-column>
-			<asy-ago-date-column name="lastLogin" header="Last Login"></asy-ago-date-column>
+			<asy-text-column name="name" />
+			<asy-text-column name="username" />
+			<asy-ago-date-column name="lastLogin" header="Last Login" />
 			<ng-container cdkColumnDef="type">
 				<th cdk-header-cell *cdkHeaderCellDef>
 					Type
-					<asy-header-filter list-filter [options]="typeFilterOptions">
-					</asy-header-filter>
+					<asy-header-filter list-filter [options]="typeFilterOptions" />
 				</th>
 
 				<td cdk-cell *cdkCellDef="let member">
@@ -42,8 +41,7 @@
 			<ng-container cdkColumnDef="role">
 				<th cdk-header-cell *cdkHeaderCellDef>
 					Role
-					<asy-header-filter list-filter [options]="roleFilterOptions">
-					</asy-header-filter>
+					<asy-header-filter list-filter [options]="roleFilterOptions" />
 				</th>
 				<td cdk-cell *cdkCellDef="let member">
 					@if (isTeamAdmin()) {
@@ -66,6 +64,7 @@
 								@for (role of teamRoleOptions; track role) {
 									<button
 										class="dropdown-item"
+										type="button"
 										cdkMenuItem
 										(cdkMenuItemTriggered)="updateRole(member, role.role)"
 									>
@@ -85,6 +84,7 @@
 					@if (isTeamAdmin() && member.explicit) {
 						<button
 							class="btn btn-link p-0"
+							type="button"
 							container="body"
 							placement="left"
 							tooltip="Remove Member"
@@ -104,12 +104,12 @@
 			filteredText="No team members matched your search."
 			[dataSource]="dataSource"
 			(clearFilters)="clearFilters()"
-		></asy-table-empty-state>
+		/>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
 		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource"></asy-paginator>
+			<asy-paginator [dataSource]="dataSource" />
 		</div>
 	</div>
 </section>
diff --git a/src/app/core/teams/list-teams/base-list-teams.component.ts b/src/app/core/teams/list-teams/base-list-teams.component.ts
index 1e37a8be..3a5801ee 100644
--- a/src/app/core/teams/list-teams/base-list-teams.component.ts
+++ b/src/app/core/teams/list-teams/base-list-teams.component.ts
@@ -17,7 +17,7 @@ import { APP_SESSION } from '../../tokens';
 import { Team } from '../team.model';
 import { TeamsService } from '../teams.service';
 
-@Directive()
+@Directive({ standalone: true })
 export abstract class BaseListTeamsComponent {
 	readonly #teamsService = inject(TeamsService);
 	readonly #alertService = inject(SystemAlertService);
diff --git a/src/app/core/teams/list-teams/list-teams.component.html b/src/app/core/teams/list-teams/list-teams.component.html
index a021ce31..cfabd392 100644
--- a/src/app/core/teams/list-teams/list-teams.component.html
+++ b/src/app/core/teams/list-teams/list-teams.component.html
@@ -4,7 +4,7 @@
 			<h1 skipTo>Teams</h1>
 			View and manage team membership and roles.
 		</div>
-		<system-alert></system-alert>
+		<system-alert />
 	</section>
 }
 
@@ -16,7 +16,7 @@ <h1 skipTo>Teams</h1>
 					placeholder="Search teams..."
 					[search]="dataSource.searchEvent$.value"
 					(applySearch)="dataSource.search($event)"
-				></asy-search-input>
+				/>
 			</div>
 
 			<div class="mb-3 ms-auto">
@@ -42,7 +42,7 @@ <h1 skipTo>Teams</h1>
 					<a [routerLink]="['/team', team._id]">{{ team.name }}</a>
 				</td>
 			</ng-container>
-			<asy-ago-date-column name="created"></asy-ago-date-column>
+			<asy-ago-date-column name="created" />
 			<ng-container cdkColumnDef="description">
 				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Description</th>
 				<td cdk-cell *cdkCellDef="let team">
@@ -58,12 +58,12 @@ <h1 skipTo>Teams</h1>
 			filteredText="No {{ parent() ? 'sub-teams' : 'teams' }} matched your search."
 			[dataSource]="dataSource"
 			(clearFilters)="clearFilters()"
-		></asy-table-empty-state>
+		/>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
 		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource"></asy-paginator>
+			<asy-paginator [dataSource]="dataSource" />
 		</div>
 	</div>
 </section>
diff --git a/src/app/core/teams/view-team/general-details/general-details.component.html b/src/app/core/teams/view-team/general-details/general-details.component.html
index 5867535b..dd76cbb0 100644
--- a/src/app/core/teams/view-team/general-details/general-details.component.html
+++ b/src/app/core/teams/view-team/general-details/general-details.component.html
@@ -5,7 +5,7 @@
 				<h2>Members</h2>
 			</div>
 			<div class="card-body">
-				<list-team-members [team]="team()"></list-team-members>
+				<list-team-members [team]="team()" />
 			</div>
 		</div>
 	</div>
@@ -47,7 +47,7 @@ <h2>Details</h2>
 				<form id="edit-team-form" #editTeamForm="ngForm">
 					<div class="form-inline-edit" [class.mb-3]="isEditing()">
 						<div class="form-inline-edit-item">
-							<label class="col col-form-label">Name</label>
+							<label class="col col-form-label" for="name">Name</label>
 							@if (!isEditing()) {
 								<div class="col col-form-readonly-value">
 									<div>{{ team().name || '' | titlecase }}</div>
@@ -56,6 +56,7 @@ <h2>Details</h2>
 								<div class="col">
 									<input
 										class="form-control"
+										id="name"
 										name="name"
 										placeholder="Enter name"
 										required
@@ -65,7 +66,7 @@ <h2>Details</h2>
 							}
 						</div>
 						<div class="form-inline-edit-item">
-							<label class="col col-form-label">Description</label>
+							<label class="col col-form-label" for="description">Description</label>
 							@if (!isEditing()) {
 								<div class="col col-form-readonly-value">
 									<div style="white-space: pre-wrap">
@@ -76,6 +77,7 @@ <h2>Details</h2>
 								<div class="col">
 									<textarea
 										class="form-control"
+										id="description"
 										name="description"
 										placeholder="Enter description"
 										[(ngModel)]="teamEditCopy.description"
@@ -90,7 +92,9 @@ <h2>Details</h2>
 							((team().requiresExternalRoles.length || 0) > 0 || isEditing())
 						) {
 							<div class="form-inline-edit-item">
-								<label class="col col-form-label">External Roles</label>
+								<label class="col col-form-label" for="externalRoles">
+									External Roles
+								</label>
 								@if (!isEditing()) {
 									<div class="col col-form-readonly-value">
 										<div>
@@ -100,12 +104,13 @@ <h2>Details</h2>
 								} @else {
 									<div class="col">
 										<ng-select
+											id="externalRoles"
 											name="externalRoles"
 											appUserExternalRolesSelect
 											multi-select
 											placeholder="Start typing a role..."
 											[(ngModel)]="teamEditCopy.requiresExternalRoles"
-										></ng-select>
+										/>
 									</div>
 								}
 							</div>
@@ -116,7 +121,9 @@ <h2>Details</h2>
 							((team().requiresExternalTeams.length || 0) > 0 || isEditing())
 						) {
 							<div class="form-inline-edit-item">
-								<label class="col col-form-label">External Teams</label>
+								<label class="col col-form-label" for="externalTeams">
+									External Teams
+								</label>
 								@if (!isEditing()) {
 									<div class="col col-form-readonly-value">
 										<div>
@@ -126,24 +133,25 @@ <h2>Details</h2>
 								} @else {
 									<div class="col">
 										<ng-select
+											id="externalTeams"
 											name="externalTeams"
 											multi-select
 											placeholder="Start typing a team..."
 											[(ngModel)]="teamEditCopy.requiresExternalTeams"
-										></ng-select>
+										/>
 									</div>
 								}
 							</div>
 						}
 						<div class="form-inline-edit-item">
-							<label class="col col-form-label">Date Created</label>
+							<div class="col col-form-label">Date Created</div>
 							<div class="col col-form-readonly-value">
 								<div>{{ team().created | utcDate: 'yyyy-MM-dd' }}</div>
 							</div>
 						</div>
 						@if (team().parent) {
 							<div class="form-inline-edit-item">
-								<label class="col col-form-label">Parent</label>
+								<div class="col col-form-label">Parent</div>
 								<div class="col col-form-readonly-value">
 									<div>
 										<a
@@ -189,7 +197,7 @@ <h2>Details</h2>
 					<h2>Sub-Teams</h2>
 				</div>
 				<div class="card-body">
-					<app-list-sub-teams embedded [parent]="team()"></app-list-sub-teams>
+					<app-list-sub-teams embedded [parent]="team()" />
 				</div>
 			</div>
 		</div>
diff --git a/src/app/core/teams/view-team/view-team.component.html b/src/app/core/teams/view-team/view-team.component.html
index 53218d91..4058d6b7 100644
--- a/src/app/core/teams/view-team/view-team.component.html
+++ b/src/app/core/teams/view-team/view-team.component.html
@@ -1,6 +1,6 @@
 <section class="view-team-container">
 	<!-- Alert Notifications -->
-	<system-alert></system-alert>
+	<system-alert />
 
 	<div class="d-flex mb-3">
 		<h1>{{ team().name }}</h1>
@@ -24,6 +24,6 @@ <h1>{{ team().name }}</h1>
 		}
 	</ul>
 	<div class="view-team-section-container">
-		<router-outlet></router-outlet>
+		<router-outlet />
 	</div>
 </section>
diff --git a/src/app/core/theming/theme-toggle/theme-toggle.component.html b/src/app/core/theming/theme-toggle/theme-toggle.component.html
index 80f4e18b..c64ad658 100644
--- a/src/app/core/theming/theme-toggle/theme-toggle.component.html
+++ b/src/app/core/theming/theme-toggle/theme-toggle.component.html
@@ -8,6 +8,7 @@
 			<button
 				class="dropdown-item"
 				[class.active]="theme === selectedTheme()"
+				type="button"
 				cdkMenuItem
 				(cdkMenuItemTriggered)="setTheme(theme)"
 			>
diff --git a/src/app/site/example/alerts/alerts.component.html b/src/app/site/example/alerts/alerts.component.html
index cf57e34e..2b7fca99 100644
--- a/src/app/site/example/alerts/alerts.component.html
+++ b/src/app/site/example/alerts/alerts.component.html
@@ -2,7 +2,7 @@
 	<h1>System Alerts</h1>
 	<div class="row mt-3">
 		<div class="col-md-12">
-			<system-alert></system-alert>
+			<system-alert />
 		</div>
 	</div>
 
@@ -48,5 +48,5 @@ <h2 class="mt-3">Add Alert</h2>
 		</div>
 	</div>
 
-	<button class="btn btn-primary" (click)="addAlert()">Add Alert</button>
+	<button class="btn btn-primary" type="button" (click)="addAlert()">Add Alert</button>
 </div>
diff --git a/src/app/site/example/forms/forms.component.html b/src/app/site/example/forms/forms.component.html
index a81dff96..b0e89a92 100644
--- a/src/app/site/example/forms/forms.component.html
+++ b/src/app/site/example/forms/forms.component.html
@@ -77,8 +77,7 @@ <h2 class="pt-4">
 				{ value: 'item4' },
 				{ value: 'item5', disabled: true }
 			]"
-		>
-		</ng-select>
+		/>
 	</div>
 
 	<div class="mb-3">
@@ -97,8 +96,7 @@ <h2 class="pt-4">
 				{ value: 'item5', disabled: true }
 			]"
 			[multiple]="true"
-		>
-		</ng-select>
+		/>
 	</div>
 
 	<h2 class="pt-4">Checkboxes and radios</h2>
diff --git a/src/app/site/example/loading-overlay/example-loading-overlay.component.html b/src/app/site/example/loading-overlay/example-loading-overlay.component.html
index 695a3b7d..c8252c6b 100644
--- a/src/app/site/example/loading-overlay/example-loading-overlay.component.html
+++ b/src/app/site/example/loading-overlay/example-loading-overlay.component.html
@@ -6,17 +6,27 @@ <h1>Loading Overlay</h1>
 			[isError]="isError"
 			[isLoading]="isLoading"
 			(retry)="handleRetry()"
-		></loading-overlay>
+		/>
 		<p class="p-3">This is the where the loaded content will go</p>
 		<br />
 		<br />
 	</div>
 
 	<div class="btn-group">
-		<button class="btn btn-primary" [disabled]="isError" (click)="toggleLoading()">
+		<button
+			class="btn btn-primary"
+			type="button"
+			[disabled]="isError"
+			(click)="toggleLoading()"
+		>
 			{{ isLoading ? 'Stop' : 'Start' }} Loading
 		</button>
-		<button class="btn btn-primary ms-3" [disabled]="!isLoading" (click)="toggleError()">
+		<button
+			class="btn btn-primary ms-3"
+			type="button"
+			[disabled]="!isLoading"
+			(click)="toggleError()"
+		>
 			{{ isError ? 'Hide' : 'Show' }} Error
 		</button>
 	</div>
diff --git a/src/app/site/example/shared/example-mock.service.ts b/src/app/site/example/shared/example-mock.service.ts
deleted file mode 100644
index bc5192db..00000000
--- a/src/app/site/example/shared/example-mock.service.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { Observable, of } from 'rxjs';
-
-import { Example } from './example.model';
-import { ExampleService } from './example.service';
-
-@Injectable()
-export class ExampleMockService extends ExampleService {
-	/*
-	 * API Methods
-	 */
-	public getExamples(): Observable<Example[]> {
-		return of([
-			{
-				foo: 'Foo 1',
-				bar: 10,
-				baz: new Date()
-			},
-			{
-				foo: 'Foo 2',
-				bar: 8,
-				baz: new Date()
-			}
-		]);
-	}
-}
diff --git a/src/app/site/example/shared/example-rest.service.ts b/src/app/site/example/shared/example-rest.service.ts
deleted file mode 100644
index f18f88be..00000000
--- a/src/app/site/example/shared/example-rest.service.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { Injectable, inject } from '@angular/core';
-
-import { Observable } from 'rxjs';
-
-import { Example } from './example.model';
-import { ExampleService } from './example.service';
-
-@Injectable()
-export class ExampleRestService extends ExampleService {
-	private http = inject(HttpClient);
-
-	/*
-	 * API Methods
-	 */
-
-	public getExamples(): Observable<Example[]> {
-		return this.http.get<Example[]>(`api/example`);
-	}
-}
diff --git a/src/app/site/example/shared/example.model.ts b/src/app/site/example/shared/example.model.ts
deleted file mode 100644
index 5b533dad..00000000
--- a/src/app/site/example/shared/example.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface Example {
-	foo: string;
-	bar: number;
-	baz: Date;
-}
diff --git a/src/app/site/example/shared/example.service.ts b/src/app/site/example/shared/example.service.ts
deleted file mode 100644
index 39b2dee1..00000000
--- a/src/app/site/example/shared/example.service.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { Observable } from 'rxjs';
-
-import { Example } from './example.model';
-
-@Injectable()
-export abstract class ExampleService {
-	abstract getExamples(): Observable<Example[]>;
-}
diff --git a/src/index.html b/src/index.html
index b1362a1b..df72df24 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,4 +1,5 @@
 <!doctype html>
+<!-- eslint-disable @angular-eslint/template/prefer-ngsrc -->
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
@@ -51,7 +52,12 @@
 		<app-root>
 			<div class="site-loading-container">
 				<div class="site-loading-message">
-					<img src="/assets/images/site-loading.png" alt="Site loading image" />
+					<img
+						src="/assets/images/site-loading.png"
+						alt="Site loading image"
+						height="250"
+						width="250"
+					/>
 					<div class="message">Loading...</div>
 				</div>
 			</div>
@@ -78,3 +84,4 @@
 		</noscript>
 	</body>
 </html>
+<!-- eslint-enable @angular-eslint/template/prefer-ngsrc -->
diff --git a/src/styles/_globals.scss b/src/styles/_globals.scss
index f8929552..6fedba09 100644
--- a/src/styles/_globals.scss
+++ b/src/styles/_globals.scss
@@ -3,7 +3,7 @@ $form-required: after !default;
 $nav-closed-width: 54px !default;
 $nav-open-width: 275px !default;
 
-$nav-messages-popover-max-width: 800px !default;
+$nav-messages-popover-max-width: 400px !default;
 $nav-messages-popover-max-height: 392px !default;
 
 $site-content-padding-y: 2rem !default;