diff --git a/.gitignore b/.gitignore
index 04c2272b..823dca25 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,9 @@ proxy.conf.json
 npm-debug.log
 yarn-error.log
 
+# NX
+.nx/cache
+
 # IDEs and editors
 .idea/
 .project
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 9b338e4e..4d8b8bc3 100644
--- a/src/app/common/dialog/configurable-dialog/configurable-dialog.component.html
+++ b/src/app/common/dialog/configurable-dialog/configurable-dialog.component.html
@@ -1,7 +1,8 @@
 <asy-modal
 	[title]="data.title"
-	[cancelText]="data.cancelText"
+	[cancelText]="data.cancelText ?? 'Cancel'"
 	[disableOk]="!modalForm.form.valid"
+	[hideCancel]="data.hideCancel ?? false"
 	[okText]="data.okText"
 	(cancel)="cancel()"
 	(ok)="ok()"
diff --git a/src/app/common/dialog/configurable-dialog/configurable-dialog.component.ts b/src/app/common/dialog/configurable-dialog/configurable-dialog.component.ts
index 4c0dad0b..f01a77ff 100644
--- a/src/app/common/dialog/configurable-dialog/configurable-dialog.component.ts
+++ b/src/app/common/dialog/configurable-dialog/configurable-dialog.component.ts
@@ -17,6 +17,7 @@ export class ConfigurableDialogData {
 	title: string;
 	okText: string;
 	cancelText?: string;
+	hideCancel?: boolean;
 	message: string;
 	inputs?: DialogInput[];
 }
diff --git a/src/app/common/dialog/dialog.service.ts b/src/app/common/dialog/dialog.service.ts
index 79ff402a..8bf9dd7e 100644
--- a/src/app/common/dialog/dialog.service.ts
+++ b/src/app/common/dialog/dialog.service.ts
@@ -24,7 +24,8 @@ export class DialogService {
 			{
 				title,
 				message,
-				okText
+				okText,
+				hideCancel: true
 			},
 			modalOptions
 		);
diff --git a/src/app/common/modal/modal/modal.component.html b/src/app/common/modal/modal/modal.component.html
index 4ac19725..3ee474fd 100644
--- a/src/app/common/modal/modal/modal.component.html
+++ b/src/app/common/modal/modal/modal.component.html
@@ -1,6 +1,6 @@
 <section class="modal-header">
 	<h2 class="modal-title">
-		{{ title }}
+		{{ title() }}
 	</h2>
 
 	<button class="btn-close" type="button" aria-label="Cancel" (click)="cancel.emit()"></button>
@@ -11,12 +11,12 @@ <h2 class="modal-title">
 </section>
 
 <section class="modal-footer">
-	@if (cancelText) {
+	@if (hideCancel()) {
 		<button class="btn btn-outline-primary me-2" type="button" (click)="cancel.emit()">
-			{{ cancelText }}
+			{{ cancelText() }}
 		</button>
 	}
-	<button class="btn btn-primary" type="button" [disabled]="disableOk" (click)="ok.emit()">
-		{{ okText }}
+	<button class="btn btn-primary" type="button" [disabled]="disableOk()" (click)="ok.emit()">
+		{{ okText() }}
 	</button>
 </section>
diff --git a/src/app/common/modal/modal/modal.component.ts b/src/app/common/modal/modal/modal.component.ts
index 47f435ef..726b7adf 100644
--- a/src/app/common/modal/modal/modal.component.ts
+++ b/src/app/common/modal/modal/modal.component.ts
@@ -1,5 +1,5 @@
 import { A11yModule } from '@angular/cdk/a11y';
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, booleanAttribute, input, output } from '@angular/core';
 
 @Component({
 	selector: 'asy-modal',
@@ -13,27 +13,21 @@ export class ModalComponent {
 	/**
 	 * Title to display in the modal header
 	 */
-	@Input()
-	title = '';
+	readonly title = input('');
 
 	/**
 	 * Text to display on the modal 'ok' button
 	 */
-	@Input()
-	okText = 'OK';
+	readonly okText = input('OK');
 
 	/**
 	 * Text to display on the modal 'cancel' button
 	 */
-	@Input()
-	cancelText?: string = 'Cancel';
+	readonly cancelText = input('Cancel');
 
-	@Input()
-	disableOk = false;
+	readonly disableOk = input(false, { transform: booleanAttribute });
+	readonly hideCancel = input(false, { transform: booleanAttribute });
 
-	@Output()
-	readonly ok = new EventEmitter<void>();
-
-	@Output()
-	readonly cancel = new EventEmitter<void>();
+	readonly ok = output();
+	readonly cancel = output();
 }
diff --git a/src/app/common/multi-select.directive.ts b/src/app/common/multi-select.directive.ts
index 30a19f21..2e7edf32 100644
--- a/src/app/common/multi-select.directive.ts
+++ b/src/app/common/multi-select.directive.ts
@@ -1,11 +1,11 @@
 import {
 	DestroyRef,
 	Directive,
-	HostBinding,
-	Input,
 	OnInit,
 	SimpleChange,
-	inject
+	booleanAttribute,
+	inject,
+	input
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
@@ -13,47 +13,48 @@ import { NgSelectComponent } from '@ng-select/ng-select';
 
 @Directive({
 	selector: 'ng-select[multi-select]',
-	standalone: true
+	standalone: true,
+	// eslint-disable-next-line @angular-eslint/no-host-metadata-property
+	host: {
+		['class.ng-hide-arrow-wrapper']: 'hideArrow()'
+	}
 })
 export class MultiSelectDirective implements OnInit {
-	private select = inject(NgSelectComponent);
-
-	private destroyRef = inject(DestroyRef);
+	readonly #select = inject(NgSelectComponent);
+	readonly #destroyRef = inject(DestroyRef);
 
-	@Input()
-	@HostBinding('class.ng-hide-arrow-wrapper')
-	hideArrow = true;
+	readonly hideArrow = input(true, { transform: booleanAttribute });
 
 	ngOnInit() {
-		this.select.addTag = true;
-		this.select.hideSelected = true;
-		this.select.multiple = true;
+		this.#select.addTag = true;
+		this.#select.hideSelected = true;
+		this.#select.multiple = true;
 		this.updateIsOpen(false);
 
 		// change detection doesn't work properly when setting items programmatically
 		// tslint:disable-next-line:no-lifecycle-call
-		this.select.ngOnChanges({
+		this.#select.ngOnChanges({
 			items: new SimpleChange([], [], true)
 		});
 
-		this.select.addEvent.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+		this.#select.addEvent.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
 			this.updateIsOpen(false);
 		});
-		this.select.searchEvent.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+		this.#select.searchEvent.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((event) => {
 			const isOpen = event.term.trim().length > 0;
 			this.updateIsOpen(isOpen);
 		});
 		// Clear the items on clear event.  Fixes bug where cleared items are suggested as options.
-		this.select.clearEvent.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-			this.select.itemsList.setItems([]);
+		this.#select.clearEvent.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+			this.#select.itemsList.setItems([]);
 		});
 	}
 
 	private updateIsOpen(isOpen: boolean) {
 		// change detection doesn't work properly when setting input programmatically
 		// tslint:disable-next-line:no-lifecycle-call
-		const change = new SimpleChange(this.select.isOpen, isOpen, false);
-		this.select.isOpen = isOpen;
-		this.select.ngOnChanges({ isOpen: change });
+		const change = new SimpleChange(this.#select.isOpen, isOpen, false);
+		this.#select.isOpen = isOpen;
+		this.#select.ngOnChanges({ isOpen: change });
 	}
 }
diff --git a/src/app/common/system-alert/system-alert.component.html b/src/app/common/system-alert/system-alert.component.html
index 388c0dbf..eddd8f7c 100644
--- a/src/app/common/system-alert/system-alert.component.html
+++ b/src/app/common/system-alert/system-alert.component.html
@@ -1,4 +1,4 @@
-@for (alert of alertService.alerts$ | async; track alert; let i = $index) {
+@for (alert of alerts(); track alert; let i = $index) {
 	<div
 		class="alert alert-{{ alert.type }} alert-dismissible d-flex"
 		role="alert"
diff --git a/src/app/common/system-alert/system-alert.component.ts b/src/app/common/system-alert/system-alert.component.ts
index 01e9f81c..b629cbc0 100644
--- a/src/app/common/system-alert/system-alert.component.ts
+++ b/src/app/common/system-alert/system-alert.component.ts
@@ -1,6 +1,5 @@
 import { animate, style, transition, trigger } from '@angular/animations';
-import { AsyncPipe } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
 import { SystemAlertService } from './system-alert.service';
 
@@ -22,10 +21,11 @@ import { SystemAlertService } from './system-alert.service';
 		])
 	],
 	standalone: true,
-	imports: [AsyncPipe]
+	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SystemAlertComponent {
-	alertService = inject(SystemAlertService);
+	readonly alertService = inject(SystemAlertService);
+	readonly alerts = this.alertService.alerts;
 
 	clearAlert(index: number) {
 		this.alertService.clear(index);
diff --git a/src/app/common/system-alert/system-alert.service.spec.ts b/src/app/common/system-alert/system-alert.service.spec.ts
index f26b4a3a..8c71af8c 100644
--- a/src/app/common/system-alert/system-alert.service.spec.ts
+++ b/src/app/common/system-alert/system-alert.service.spec.ts
@@ -19,7 +19,7 @@ describe('SystemAlertService', () => {
 	describe('clearAllAlerts', () => {
 		it('clears all alerts', () => {
 			service.clearAllAlerts();
-			expect(service.getAlerts().length).toBe(0);
+			expect(service.alerts().length).toBe(0);
 		});
 	});
 
@@ -27,7 +27,7 @@ describe('SystemAlertService', () => {
 		it('clears single alert by index', () => {
 			const indexToClear = 3;
 			service.clear(indexToClear);
-			const alerts = service.getAlerts();
+			const alerts = service.alerts();
 			expect(alerts.length).toBe(4);
 			for (const alert of alerts) {
 				expect(alert.msg).not.toBe(testAlertMsgs[indexToClear]);
@@ -38,9 +38,10 @@ describe('SystemAlertService', () => {
 	describe('clearAlertById', () => {
 		it('clears single alert by Id', () => {
 			const idToClear = 3;
-			const clearedAlertMsg = service.getAlerts().find((alert) => alert.id === idToClear).msg;
+			const clearedAlertMsg =
+				service.alerts().find((alert) => alert.id === idToClear)?.msg ?? 'not found';
 			service.clearAlertById(idToClear);
-			const alerts = service.getAlerts();
+			const alerts = service.alerts();
 			expect(alerts.length).toBe(4);
 			for (const alert of alerts) {
 				expect(alert.msg).not.toBe(clearedAlertMsg);
@@ -52,7 +53,7 @@ describe('SystemAlertService', () => {
 		it('new alert is created added to list', () => {
 			const newAlertMsg = 'added alert';
 			service.addAlert(newAlertMsg);
-			const alerts = service.getAlerts();
+			const alerts = service.alerts();
 			expect(alerts.length).toBe(6);
 
 			const newAlert = alerts[alerts.length - 1];
@@ -66,7 +67,7 @@ describe('SystemAlertService', () => {
 			const newAlertType = 'warning';
 			const newAlertSubtext = 'alert subtext';
 			service.addAlert(newAlertMsg, newAlertType, null, newAlertSubtext);
-			const alerts = service.getAlerts();
+			const alerts = service.alerts();
 			expect(alerts.length).toBe(6);
 
 			const newAlert = alerts[alerts.length - 1];
@@ -82,12 +83,12 @@ describe('SystemAlertService', () => {
 			const newAlertMsg = 'added alert';
 			const spy = spyOn(service, 'clearAlertById').and.callThrough();
 			service.addAlert(newAlertMsg, 'danger', ttl);
-			expect(service.getAlerts().length).toBe(6);
+			expect(service.alerts().length).toBe(6);
 
 			jasmine.clock().tick(ttl);
 
 			expect(spy).toHaveBeenCalled();
-			expect(service.getAlerts().length).toBe(5);
+			expect(service.alerts().length).toBe(5);
 
 			jasmine.clock().uninstall();
 		});
@@ -104,7 +105,7 @@ describe('SystemAlertService', () => {
 					}
 				})
 			);
-			const alerts = service.getAlerts();
+			const alerts = service.alerts();
 			expect(alerts.length).toBe(6);
 			expect(alerts[alerts.length - 1].msg).toBe(newAlertMsg);
 		});
@@ -118,14 +119,13 @@ describe('SystemAlertService', () => {
 					}
 				})
 			);
-			const alerts = service.getAlerts();
-			expect(alerts.length).toBe(5);
+			expect(service.alerts().length).toBe(5);
 		});
 	});
 
 	describe('getAlerts', () => {
 		it('gets all alerts', () => {
-			const alerts = service.getAlerts();
+			const alerts = service.alerts();
 			expect(alerts.length).toBe(5);
 			for (let i = 0; i < testAlertMsgs.length; i++) {
 				expect(alerts[i].msg).toBe(testAlertMsgs[i]);
diff --git a/src/app/common/system-alert/system-alert.service.ts b/src/app/common/system-alert/system-alert.service.ts
index d79d509c..6e4c701b 100644
--- a/src/app/common/system-alert/system-alert.service.ts
+++ b/src/app/common/system-alert/system-alert.service.ts
@@ -1,7 +1,5 @@
 import { HttpErrorResponse } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-
-import { BehaviorSubject } from 'rxjs';
+import { Injectable, signal } from '@angular/core';
 
 import { SystemAlert } from './system-alert.model';
 
@@ -9,36 +7,36 @@ import { SystemAlert } from './system-alert.model';
 	providedIn: 'root'
 })
 export class SystemAlertService {
-	private id = 0;
-	private defaultType = 'danger';
-	private alerts: SystemAlert[] = [];
-	alerts$: BehaviorSubject<SystemAlert[]> = new BehaviorSubject(this.alerts);
+	#id = 0;
+	#defaultType = 'danger';
+	#alerts = signal<SystemAlert[]>([]);
+
+	alerts = this.#alerts.asReadonly();
 
 	clearAllAlerts() {
-		this.alerts.length = 0;
-		this.alerts$.next(this.alerts);
+		this.#alerts.set([]);
 	}
 
 	clear(index: number) {
-		this.alerts.splice(index, 1);
-		this.alerts$.next(this.alerts);
+		this.#alerts.update((a) => {
+			a.splice(index, 1);
+			return [...a];
+		});
 	}
 
 	clearAlertById(id: number) {
-		const index = this.alerts.findIndex((value) => value.id === id);
+		const index = this.#alerts().findIndex((value) => value.id === id);
 		this.clear(index);
 	}
 
 	addAlert(msg: string, type?: string, ttl?: number, subtext?: string) {
-		const alert = new SystemAlert(this.id++, type || this.defaultType, msg, subtext);
-
-		this.alerts.push(alert);
+		const alert = new SystemAlert(this.#id++, type || this.#defaultType, msg, subtext);
 
 		// If they passed in a ttl parameter, age off the alert after said timeout
-		if (ttl && ttl > 0) {
+		if (ttl ?? 0 > 0) {
 			setTimeout(() => this.clearAlertById(alert.id), ttl);
 		}
-		this.alerts$.next(this.alerts);
+		this.#alerts.update((alerts) => [...alerts, alert]);
 	}
 
 	addClientErrorAlert(error: HttpErrorResponse) {
@@ -46,8 +44,4 @@ export class SystemAlertService {
 			this.addAlert(error.error.message);
 		}
 	}
-
-	getAlerts(): SystemAlert[] {
-		return this.alerts;
-	}
 }
diff --git a/src/app/common/table/actions-menu-column/actions-menu-column.component.html b/src/app/common/table/actions-menu-column/actions-menu-column.component.html
index 06eec2dd..79c82524 100644
--- a/src/app/common/table/actions-menu-column/actions-menu-column.component.html
+++ b/src/app/common/table/actions-menu-column/actions-menu-column.component.html
@@ -1,4 +1,4 @@
-<ng-container cdkColumnDef="actionsMenu" [sticky]="sticky" [stickyEnd]="stickyEnd">
+<ng-container cdkColumnDef="actionsMenu" [sticky]="sticky()" [stickyEnd]="stickyEnd()">
 	<th cdk-header-cell *cdkHeaderCellDef></th>
 	<td cdk-cell *cdkCellDef="let item; let index = index">
 		<button
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 02cc7bfa..6d81eb12 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
@@ -1,12 +1,12 @@
-<ng-container cdkColumnDef [sticky]="sticky" [stickyEnd]="stickyEnd">
-	<th asy-sort-header cdk-header-cell *cdkHeaderCellDef [sortable]="sortable">
+<ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
+	<th asy-sort-header cdk-header-cell *cdkHeaderCellDef [sortable]="sortable()">
 		<ng-template #defaultHeaderTemplate>
-			{{ header ?? (name | titlecase) }}
+			{{ header() ?? (name | titlecase) }}
 		</ng-template>
 		<ng-template
-			[ngTemplateOutlet]="headerTemplate || defaultHeaderTemplate"
+			[ngTemplateOutlet]="headerTemplate ?? defaultHeaderTemplate"
 			[ngTemplateOutletContext]="{
-				header: header
+				header: header()
 			}"
 		>
 		</ng-template>
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 fe3ad00d..8c393445 100644
--- a/src/app/common/table/columns/asy-abstract-column.component.ts
+++ b/src/app/common/table/columns/asy-abstract-column.component.ts
@@ -6,7 +6,8 @@ import {
 	OnInit,
 	ViewChild,
 	booleanAttribute,
-	inject
+	inject,
+	input
 } from '@angular/core';
 
 @Directive()
@@ -28,14 +29,12 @@ export abstract class AsyAbstractColumnComponent<T> implements OnDestroy, OnInit
 	/**
 	 * Whether this column should be sticky positioned on the front of the row.
 	 */
-	@Input({ transform: booleanAttribute })
-	sticky = false;
+	readonly sticky = input(false, { transform: booleanAttribute });
 
 	/**
 	 * Whether this column should be sticky positioned on the end of the row.
 	 */
-	@Input({ transform: booleanAttribute })
-	stickyEnd = false;
+	readonly stickyEnd = input(false, { transform: booleanAttribute });
 
 	/** @docs-private */
 	@ViewChild(CdkColumnDef, { static: true }) columnDef: CdkColumnDef;
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 a3add462..827fe09e 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
@@ -1,15 +1,12 @@
-import { ContentChild, Directive, Input, TemplateRef, booleanAttribute } from '@angular/core';
+import { ContentChild, Directive, TemplateRef, booleanAttribute, input } from '@angular/core';
 
 import { AsyAbstractColumnComponent } from './asy-abstract-column.component';
 import { HeaderTemplateDirective } from './header-template.directive';
 
 @Directive()
 export abstract class AsyAbstractValueColumnComponent<T> extends AsyAbstractColumnComponent<T> {
-	@Input()
-	header?: string;
+	readonly header = input<string>();
+	readonly sortable = input(true, { transform: booleanAttribute });
 
-	@Input({ transform: booleanAttribute })
-	sortable = true;
-
-	@ContentChild(HeaderTemplateDirective, { read: TemplateRef }) headerTemplate: TemplateRef<any>;
+	@ContentChild(HeaderTemplateDirective, { read: TemplateRef }) headerTemplate?: TemplateRef<any>;
 }
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 222226a6..7fc325d1 100644
--- a/src/app/common/table/columns/date/date-column.component.html
+++ b/src/app/common/table/columns/date/date-column.component.html
@@ -1,12 +1,12 @@
-<ng-container cdkColumnDef [sticky]="sticky" [stickyEnd]="stickyEnd">
-	<th asy-sort-header cdk-header-cell *cdkHeaderCellDef [sortable]="sortable">
+<ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
+	<th asy-sort-header cdk-header-cell *cdkHeaderCellDef [sortable]="sortable()">
 		<ng-template #defaultHeaderTemplate>
-			{{ header ?? (name | titlecase) }}
+			{{ header() ?? (name | titlecase) }}
 		</ng-template>
 		<ng-template
-			[ngTemplateOutlet]="headerTemplate || defaultHeaderTemplate"
+			[ngTemplateOutlet]="headerTemplate ?? defaultHeaderTemplate"
 			[ngTemplateOutletContext]="{
-				header: header
+				header: header()
 			}"
 		>
 		</ng-template>
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 da34f701..139e0e0f 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
@@ -1,12 +1,12 @@
-<ng-container cdkColumnDef [sticky]="sticky" [stickyEnd]="stickyEnd">
+<ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
 	<th cdk-header-cell *cdkHeaderCellDef>
 		<ng-template #defaultHeaderTemplate>
-			{{ header ?? (name | titlecase) }}
+			{{ header() ?? (name | titlecase) }}
 		</ng-template>
 		<ng-template
-			[ngTemplateOutlet]="headerTemplate || defaultHeaderTemplate"
+			[ngTemplateOutlet]="headerTemplate ?? defaultHeaderTemplate"
 			[ngTemplateOutletContext]="{
-				header: header
+				header: header()
 			}"
 		>
 		</ng-template>
@@ -26,7 +26,7 @@
 								{{ listItem }}
 							</ng-template>
 							<ng-template
-								[ngTemplateOutlet]="itemTemplate || defaultItemTemplate"
+								[ngTemplateOutlet]="itemTemplate ?? defaultItemTemplate"
 								[ngTemplateOutletContext]="{
 									listItem: listItem,
 									item: item,
diff --git a/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.ts b/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.ts
index 8b0529c6..f712d58b 100644
--- a/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.ts
+++ b/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.ts
@@ -21,16 +21,16 @@ export class AsyExpandableListColumnComponent<T>
 	extends AsyAbstractValueColumnComponent<T>
 	implements OnInit
 {
-	@ContentChild(ItemTemplateDirective, { read: TemplateRef })
-	itemTemplate: TemplateRef<any>;
+	readonly #selectionModel = new SelectionModel<T>();
 
-	private selectionModel = new SelectionModel<T>();
+	@ContentChild(ItemTemplateDirective, { read: TemplateRef })
+	itemTemplate?: TemplateRef<any>;
 
 	toggle(item: T) {
-		this.selectionModel.toggle(item);
+		this.#selectionModel.toggle(item);
 	}
 
 	isCollapsed(item: T) {
-		return !this.selectionModel.isSelected(item);
+		return !this.#selectionModel.isSelected(item);
 	}
 }
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 2c1f0bcd..83d8da84 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
@@ -1,7 +1,7 @@
-<ng-container cdkColumnDef [sticky]="sticky" [stickyEnd]="stickyEnd">
+<ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
 	<th cdk-header-cell style="width: 42px" *cdkHeaderCellDef></th>
 	<td cdk-cell *cdkCellDef="let item; let index = index">
-		@if (isExpandable(index, item)) {
+		@if (isExpandable()(index, item)) {
 			<div style="cursor: pointer" (click)="toggle(index, item)">
 				<span
 					class="fa-solid fa-2x fa-angle-down"
diff --git a/src/app/common/table/columns/expander/asy-expander-column.component.ts b/src/app/common/table/columns/expander/asy-expander-column.component.ts
index a2b84a22..665c2c43 100644
--- a/src/app/common/table/columns/expander/asy-expander-column.component.ts
+++ b/src/app/common/table/columns/expander/asy-expander-column.component.ts
@@ -1,16 +1,12 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { CdkTableModule } from '@angular/cdk/table';
-import {
-	ChangeDetectionStrategy,
-	Component,
-	Input,
-	OnInit,
-	booleanAttribute,
-	input
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, booleanAttribute, input } from '@angular/core';
 
 import { AsyAbstractColumnComponent } from '../asy-abstract-column.component';
 
+type IsExpandableFn<T> = (index: number, rowData: T) => boolean;
+type TrackByFn<T, TB> = (index: number, rowData: T) => TB;
+
 @Component({
 	selector: 'asy-expander-column',
 	templateUrl: './asy-expander-column.component.html',
@@ -26,12 +22,8 @@ export class AsyExpanderColumnComponent<T, TB>
 	#selectionModel: SelectionModel<TB>;
 
 	readonly multi = input(true, { transform: booleanAttribute });
-
-	@Input()
-	isExpandable: (index: number, rowData: T) => boolean = () => true;
-
-	@Input()
-	trackBy: (index: number, rowData: T) => TB = (index, rowData) => rowData as unknown as TB;
+	readonly isExpandable = input<IsExpandableFn<T>>(() => true);
+	readonly trackBy = input<TrackByFn<T, TB>>((index, rowData) => rowData as unknown as TB);
 
 	constructor() {
 		super();
@@ -49,11 +41,11 @@ export class AsyExpanderColumnComponent<T, TB>
 	}
 
 	toggle(index: number, result: T) {
-		this.#selectionModel.toggle(this.trackBy(index, result));
+		this.#selectionModel.toggle(this.trackBy()(index, result));
 	}
 
 	isExpanded(index: number, result: T) {
-		return this.#selectionModel.isSelected(this.trackBy(index, result));
+		return this.#selectionModel.isSelected(this.trackBy()(index, result));
 	}
 
 	get expanded() {
diff --git a/src/app/common/table/columns/selection/asy-selection-column.component.html b/src/app/common/table/columns/selection/asy-selection-column.component.html
index 4a75fd36..e4c4ef06 100644
--- a/src/app/common/table/columns/selection/asy-selection-column.component.html
+++ b/src/app/common/table/columns/selection/asy-selection-column.component.html
@@ -1,4 +1,4 @@
-<ng-container cdkColumnDef [sticky]="sticky" [stickyEnd]="stickyEnd">
+<ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
 	<th cdk-header-cell *cdkHeaderCellDef>
 		@if (enableSelectAll() && multi()) {
 			<div class="form-check">
@@ -20,7 +20,7 @@
 				id="table-selected-{{ _isMultiTemplateDataRows ? dataIndex : index }}"
 				type="{{ multi() ? 'checkbox' : 'radio' }}"
 				[checked]="isSelected(_isMultiTemplateDataRows ? dataIndex : index, result)"
-				[disabled]="!isSelectable(_isMultiTemplateDataRows ? dataIndex : index, result)"
+				[disabled]="!isSelectable()(_isMultiTemplateDataRows ? dataIndex : index, result)"
 				(change)="toggle(_isMultiTemplateDataRows ? dataIndex : index, result)"
 			/>
 			<label
diff --git a/src/app/common/table/columns/selection/asy-selection-column.component.ts b/src/app/common/table/columns/selection/asy-selection-column.component.ts
index 4d7ec4af..45960666 100644
--- a/src/app/common/table/columns/selection/asy-selection-column.component.ts
+++ b/src/app/common/table/columns/selection/asy-selection-column.component.ts
@@ -6,7 +6,6 @@ import {
 	ChangeDetectionStrategy,
 	Component,
 	DestroyRef,
-	Input,
 	OnInit,
 	booleanAttribute,
 	inject,
@@ -20,6 +19,10 @@ import { map } from 'rxjs/operators';
 import { AsyTableDataSource } from '../../asy-table-data-source';
 import { AsyAbstractColumnComponent } from '../asy-abstract-column.component';
 
+type IsSelectableFn<T> = (index: number, rowData: T) => boolean;
+
+type TrackByFn<T, TB> = (index: number, rowData: T) => TB;
+
 @Component({
 	selector: 'asy-selection-column',
 	templateUrl: './asy-selection-column.component.html',
@@ -32,19 +35,15 @@ export class AsySelectionColumnComponent<T, TB = T>
 	extends AsyAbstractColumnComponent<T>
 	implements AfterViewInit, OnInit
 {
-	#destroyRef = inject(DestroyRef);
+	readonly #destroyRef = inject(DestroyRef);
 	#dataSource: AsyTableDataSource<T>;
 	#selectionModel: SelectionModel<TB>;
 
 	readonly enableSelectAll = input(true, { transform: booleanAttribute });
 	readonly clearOnLoad = input(true, { transform: booleanAttribute });
 	readonly multi = input(true, { transform: booleanAttribute });
-
-	@Input()
-	isSelectable: (index: number, rowData: T) => boolean = () => true;
-
-	@Input()
-	trackBy: (index: number, rowData: T) => TB = (index, rowData) => rowData as unknown as TB;
+	readonly isSelectable = input<IsSelectableFn<T>>(() => true);
+	readonly trackBy = input<TrackByFn<T, TB>>((index, rowData) => rowData as unknown as TB);
 
 	_isAllSelected$: Observable<boolean>;
 
@@ -90,11 +89,11 @@ export class AsySelectionColumnComponent<T, TB = T>
 	}
 
 	toggle(index: number, result: T) {
-		this.#selectionModel.toggle(this.trackBy(index, result));
+		this.#selectionModel.toggle(this.trackBy()(index, result));
 	}
 
 	isSelected(index: number, result: T) {
-		return this.#selectionModel.isSelected(this.trackBy(index, result));
+		return this.#selectionModel.isSelected(this.trackBy()(index, result));
 	}
 
 	get selected() {
@@ -115,7 +114,7 @@ export class AsySelectionColumnComponent<T, TB = T>
 			this.#selectionModel.selected.length > 0 &&
 			this.#selectionModel.selected.length ===
 				this.#dataSource.pagingResults$.value.elements.filter((result, index) =>
-					this.isSelectable(index, result)
+					this.isSelectable()(index, result)
 				).length
 		);
 	}
@@ -125,8 +124,8 @@ export class AsySelectionColumnComponent<T, TB = T>
 			this.#selectionModel.clear();
 		} else {
 			this.#dataSource.pagingResults$.value.elements.forEach((result, index) => {
-				if (this.isSelectable(index, result)) {
-					this.select(this.trackBy(index, result));
+				if (this.isSelectable()(index, result)) {
+					this.select(this.trackBy()(index, result));
 				}
 			});
 		}
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 1c62c390..5814c578 100644
--- a/src/app/common/table/columns/text/text-column.component.html
+++ b/src/app/common/table/columns/text/text-column.component.html
@@ -1,12 +1,12 @@
-<ng-container cdkColumnDef [sticky]="sticky" [stickyEnd]="stickyEnd">
-	<th asy-sort-header cdk-header-cell *cdkHeaderCellDef [sortable]="sortable">
+<ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
+	<th asy-sort-header cdk-header-cell *cdkHeaderCellDef [sortable]="sortable()">
 		<ng-template #defaultHeaderTemplate>
-			{{ header ?? (name | titlecase) }}
+			{{ header() ?? (name | titlecase) }}
 		</ng-template>
 		<ng-template
-			[ngTemplateOutlet]="headerTemplate || defaultHeaderTemplate"
+			[ngTemplateOutlet]="headerTemplate ?? defaultHeaderTemplate"
 			[ngTemplateOutletContext]="{
-				header: header
+				header: header()
 			}"
 		>
 		</ng-template>
diff --git a/src/app/common/table/sidebar/sidebar.component.html b/src/app/common/table/sidebar/sidebar.component.html
index ea44fe5e..7ceb08e3 100644
--- a/src/app/common/table/sidebar/sidebar.component.html
+++ b/src/app/common/table/sidebar/sidebar.component.html
@@ -1,5 +1,5 @@
-<div class="sidebar-header" [class.card-header]="showInCard">
-	<h2>{{ headerText }}</h2>
+<div class="sidebar-header" [class.card-header]="showInCard()">
+	<h2>{{ headerText() }}</h2>
 	<button
 		class="btn-close ms-auto"
 		type="button"
@@ -7,9 +7,9 @@ <h2>{{ headerText }}</h2>
 		container="body"
 		placement="bottom"
 		tooltip="Close"
-		(click)="open = false"
+		(click)="open.set(false)"
 	></button>
 </div>
-<div class="sidebar-body" [class.card-body]="showInCard">
+<div class="sidebar-body" [class.card-body]="showInCard()">
 	<ng-content></ng-content>
 </div>
diff --git a/src/app/common/table/sidebar/sidebar.component.ts b/src/app/common/table/sidebar/sidebar.component.ts
index 2063e517..32e52fbe 100644
--- a/src/app/common/table/sidebar/sidebar.component.ts
+++ b/src/app/common/table/sidebar/sidebar.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, booleanAttribute, input, signal } from '@angular/core';
 
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
@@ -9,26 +9,23 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
 	// eslint-disable-next-line @angular-eslint/no-host-metadata-property
 	host: {
 		class: 'sidebar',
-		'[class.sidebar-left]': 'placement === "left"'
+		'[class.sidebar-open]': 'open()',
+		'[class.sidebar-left]': 'placement() === "left"',
+		'[class.card]': 'showInCard()'
 	},
 	imports: [TooltipModule],
 	standalone: true
 })
 export class SidebarComponent {
-	@Input()
-	headerText = '';
+	readonly headerText = input('');
 
-	@HostBinding('class.card')
-	@Input()
-	showInCard = true;
+	readonly showInCard = input(true, { transform: booleanAttribute });
 
-	@HostBinding('class.sidebar-open')
-	open = false;
+	readonly placement = input<'left' | 'right'>('right');
 
-	@Input()
-	placement: 'left' | 'right' = 'right';
+	readonly open = signal(false);
 
 	toggle(): void {
-		this.open = !this.open;
+		this.open.update((open) => !open);
 	}
 }
diff --git a/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.html b/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.html
index a35d10cf..65797fb0 100644
--- a/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.html
+++ b/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.html
@@ -1,6 +1,6 @@
 <table class="table table-striped">
 	<tbody>
-		@for (e of _rows; track e) {
+		@for (e of _rows(); track e) {
 			<tr class="skeleton-row">
 				<td>&nbsp;</td>
 			</tr>
diff --git a/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.scss b/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.scss
index c26fc190..feaf24cf 100644
--- a/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.scss
+++ b/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.scss
@@ -1,6 +1,6 @@
 @import '../../../../styles/shared';
 
-$skeleton-row-height: 52px !default;
+$skeleton-row-height: 41px !default;
 $skeleton-row-gradient-percent: 20% !default;
 $skeleton-row-gradient-color: rgba(215, 215, 215, 0.3) !default;
 $skeleton-row-animation-speed: 2s !default;
diff --git a/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.ts b/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.ts
index 51827597..eaf94174 100644
--- a/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.ts
+++ b/src/app/common/table/skeleton-rows/asy-skeleton-rows.component.ts
@@ -1,18 +1,20 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	input,
+	numberAttribute
+} from '@angular/core';
 
 @Component({
 	selector: 'asy-skeleton-rows',
 	templateUrl: './asy-skeleton-rows.component.html',
 	styleUrls: ['./asy-skeleton-rows.component.scss'],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	standalone: true,
-	imports: []
+	standalone: true
 })
 export class AsySkeletonRowsComponent {
-	_rows: Array<number> = [];
+	readonly rows = input.required({ transform: numberAttribute });
 
-	@Input({ required: true })
-	set rows(numRows: number) {
-		this._rows = Array(numRows).fill(0);
-	}
+	readonly _rows = computed(() => Array(this.rows()).fill(0));
 }
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 7cca943a..31a9772e 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
@@ -2,15 +2,15 @@
 	<button class="px-0">
 		<ng-content></ng-content>
 
-		@if (sortable) {
+		@if (sortable()) {
 			<span class="fa-stack">
 				<span
 					class="fa-solid fa-sort-desc fa-stack-1x low-opacity"
-					[class.sorted]="isSorted && sortDir === 'DESC'"
+					[class.sorted]="isSorted() && sortDir() === 'DESC'"
 				></span>
 				<span
 					class="fa-solid fa-sort-asc fa-stack-1x low-opacity"
-					[class.sorted]="isSorted && sortDir === 'ASC'"
+					[class.sorted]="isSorted() && sortDir() === 'ASC'"
 				></span>
 			</span>
 		}
diff --git a/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.ts b/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.ts
index f72eadb0..3891f759 100644
--- a/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.ts
+++ b/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.ts
@@ -9,7 +9,9 @@ import {
 	OnInit,
 	Optional,
 	booleanAttribute,
-	inject
+	inject,
+	input,
+	signal
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
@@ -29,7 +31,7 @@ interface AsySortHeaderColumnDef {
 	host: {
 		class: 'asy-sort-header',
 		'(click)': '_handleClick()',
-		'[class.asy-sort-header-sorted]': 'isSorted',
+		'[class.asy-sort-header-sorted]': 'isSorted()',
 		'[attr.aria-sort]': '_getAriaSortAttribute()'
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
@@ -37,10 +39,13 @@ interface AsySortHeaderColumnDef {
 	imports: []
 })
 export class AsySortHeaderComponent implements AsySortable, OnDestroy, OnInit {
-	/** The direction the arrow should be facing according to the current state. */
-	sortDir: SortDir = SortDirection.asc;
+	readonly #destroyRef = inject(DestroyRef);
+	readonly #changeDetectorRef = inject(ChangeDetectorRef);
+
+	readonly isSorted = signal(false);
 
-	isSorted = false;
+	/** The direction the arrow should be facing according to the current state. */
+	readonly sortDir = signal<SortDir>(SortDirection.asc);
 
 	/**
 	 * ID of this sort header. If used within the context of a CdkColumnDef, this will default to
@@ -50,14 +55,9 @@ export class AsySortHeaderComponent implements AsySortable, OnDestroy, OnInit {
 	id: string;
 
 	/** Overrides the sort start value of the containing AsySort for this AsySortable. */
-	@Input()
-	start: SortDir;
-
-	@Input({ transform: booleanAttribute })
-	sortable = true;
+	readonly start = input<SortDir>();
 
-	private destroyRef = inject(DestroyRef);
-	private changeDetectorRef = inject(ChangeDetectorRef);
+	readonly sortable = input(true, { transform: booleanAttribute });
 
 	constructor(
 		// `AsySortDirective` is not optionally injected, but just asserted manually w/ better error.
@@ -80,14 +80,15 @@ export class AsySortHeaderComponent implements AsySortable, OnDestroy, OnInit {
 		}
 		this._sort.register(this);
 
-		this._sort.dataSource.sortEvent$
-			.pipe(takeUntilDestroyed(this.destroyRef))
+		this._sort
+			.dataSource()
+			.sortEvent$.pipe(takeUntilDestroyed(this.#destroyRef))
 			.subscribe((sortChange) => {
-				this.isSorted = sortChange.sortField === this.id;
-				if (this.isSorted) {
-					this.sortDir = sortChange.sortDir;
+				this.isSorted.set(sortChange.sortField === this.id);
+				if (this.isSorted()) {
+					this.sortDir.set(sortChange.sortDir);
 				}
-				this.changeDetectorRef.markForCheck();
+				this.#changeDetectorRef.markForCheck();
 			});
 	}
 
@@ -96,10 +97,10 @@ export class AsySortHeaderComponent implements AsySortable, OnDestroy, OnInit {
 	}
 
 	_handleClick() {
-		if (this.sortable) {
+		if (this.sortable()) {
 			this._sort.sort({
 				sortField: this.id,
-				sortDir: this.getNextSortDirection(this.sortDir)
+				sortDir: this.getNextSortDirection(this.sortDir())
 			});
 		}
 	}
@@ -118,11 +119,11 @@ export class AsySortHeaderComponent implements AsySortable, OnDestroy, OnInit {
 	 * ensures this is true.
 	 */
 	_getAriaSortAttribute() {
-		if (!this.isSorted) {
+		if (!this.isSorted()) {
 			return 'none';
 		}
 
-		return this._sort.dataSource.sortEvent$.value.sortDir === SortDirection.asc
+		return this._sort.dataSource().sortEvent$.value.sortDir === SortDirection.asc
 			? 'ascending'
 			: 'descending';
 	}
diff --git a/src/app/common/table/sort/asy-sort.directive.spec.ts b/src/app/common/table/sort/asy-sort.directive.spec.ts
deleted file mode 100644
index e22f79b4..00000000
--- a/src/app/common/table/sort/asy-sort.directive.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { AsySortDirective } from './asy-sort.directive';
-
-describe('AsySortDirective', () => {
-	it('should create an instance', () => {
-		const directive = new AsySortDirective();
-		expect(directive).toBeTruthy();
-	});
-});
diff --git a/src/app/common/table/sort/asy-sort.directive.ts b/src/app/common/table/sort/asy-sort.directive.ts
index c51054dc..326c7f49 100644
--- a/src/app/common/table/sort/asy-sort.directive.ts
+++ b/src/app/common/table/sort/asy-sort.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, Input } from '@angular/core';
+import { Directive, input } from '@angular/core';
 
 import { SortChange } from '../../sorting.model';
 import { AsyTableDataSource } from '../asy-table-data-source';
@@ -17,12 +17,11 @@ export interface AsySortable {
 	standalone: true
 })
 export class AsySortDirective {
+	readonly dataSource = input.required<AsyTableDataSource<any>>();
+
 	/** Collection of all registered sortables that this directive manages. */
 	sortables = new Map<string, AsySortable>();
 
-	@Input({ required: true })
-	dataSource: AsyTableDataSource<any>;
-
 	/**
 	 * Register function to be used by the contained AsySortables. Adds the AsySortable to the
 	 * collection of AsySortables.
@@ -48,6 +47,6 @@ export class AsySortDirective {
 	}
 
 	sort(sortChange: SortChange): void {
-		this.dataSource.sort(sortChange);
+		this.dataSource().sort(sortChange);
 	}
 }
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 27ca316a..cafa7e01 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,10 +1,4 @@
-<asy-modal
-	title="Cache Entry Details"
-	cancelText=""
-	okText="Close"
-	(cancel)="close()"
-	(ok)="close()"
->
+<asy-modal title="Cache Entry Details" hideCancel okText="Close" (cancel)="close()" (ok)="close()">
 	<div class="row">
 		<div class="col-md-12">
 			<label>Key</label>
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 1ca6e47c..b5847ae6 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
@@ -11,61 +11,49 @@
 		(ngSubmit)="submitEua()"
 	>
 		<div class="mb-4">
-			<h2 skipTo>{{ mode | titlecase }} EUA</h2>
-			@if (mode === 'create') {
+			<h2 skipTo>{{ mode() | titlecase }} EUA</h2>
+			@if (mode() === 'create') {
 				Provide the required information to create a new EUA
-			} @else if (mode === 'edit') {
+			} @else if (mode() === 'edit') {
 				Make changes to the EUA's information
 			}
 		</div>
 
 		<!-- Basic Information -->
 		<div class="mb-3">
-			<label class="form-label form-required" for="title">Title of the Agreement</label>
-			<div>
-				<input
-					class="form-control"
-					id="title"
-					name="title"
-					type="text"
-					required
-					[(ngModel)]="eua.title"
-				/>
-			</div>
+			<label class="form-label form-required" for="title">Title</label>
+			<input
+				class="form-control"
+				id="title"
+				name="title"
+				type="text"
+				required
+				[(ngModel)]="eua().title"
+			/>
 		</div>
 
 		<div class="mb-3">
-			<label class="form-label form-required" for="text">Text Content of the Agreement</label>
-			<div>
-				<textarea
-					class="form-control"
-					id="text"
-					name="text"
-					required
-					rows="15"
-					[(ngModel)]="eua.text"
-				></textarea>
-			</div>
+			<label class="form-label form-required" for="text">Body</label>
+			<textarea
+				class="form-control"
+				id="text"
+				name="text"
+				required
+				rows="15"
+				[(ngModel)]="eua().text"
+			></textarea>
 		</div>
 
-		<div class="mb-3">
-			<div class="text-end">
-				<button class="btn btn-link me-2" type="button" [routerLink]="['/admin/euas']">
-					Cancel
-				</button>
-				<button class="btn btn-outline-primary me-2" type="button" (click)="previewEua()">
-					Preview
-				</button>
-				<button class="btn btn-primary" type="submit" [disabled]="!form.form.valid">
-					{{ mode === 'create' ? 'Create' : 'Save' }}
-				</button>
-			</div>
+		<div class="mb-3 text-end">
+			<button class="btn btn-link me-2" type="button" [routerLink]="['/admin/euas']">
+				Cancel
+			</button>
+			<button class="btn btn-outline-primary me-2" type="button" (click)="previewEua()">
+				Preview
+			</button>
+			<button class="btn btn-primary" type="submit" [disabled]="!form.form.valid">
+				{{ mode() === 'create' ? 'Create' : 'Save' }}
+			</button>
 		</div>
-
-		@if (error) {
-			<div class="mb-3">
-				<div class="text-end text-danger font-weight-bolder">{{ error }}</div>
-			</div>
-		}
 	</form>
 </section>
diff --git a/src/app/core/admin/end-user-agreement/manage-eua/manage-eua.component.ts b/src/app/core/admin/end-user-agreement/manage-eua/manage-eua.component.ts
index d91f4bff..d9e08167 100644
--- a/src/app/core/admin/end-user-agreement/manage-eua/manage-eua.component.ts
+++ b/src/app/core/admin/end-user-agreement/manage-eua/manage-eua.component.ts
@@ -1,5 +1,5 @@
 import { TitleCasePipe } from '@angular/common';
-import { Component, DestroyRef, Input, OnInit, inject } from '@angular/core';
+import { Component, DestroyRef, computed, inject, input } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
@@ -16,35 +16,28 @@ import { EuaService } from '../eua.service';
 	templateUrl: './manage-eua.component.html',
 	imports: [RouterLink, SystemAlertComponent, FormsModule, TitleCasePipe, SkipToDirective]
 })
-export class ManageEuaComponent implements OnInit {
+export class ManageEuaComponent {
 	readonly #router = inject(Router);
 	readonly #destroyRef = inject(DestroyRef);
 	readonly #euaService = inject(EuaService);
 	readonly #alertService = inject(SystemAlertService);
 	readonly #dialogService = inject(DialogService);
 
-	mode: 'create' | 'edit' = 'create';
+	readonly eua = input.required({
+		transform: (value?: EndUserAgreement) => value ?? new EndUserAgreement()
+	});
 
-	error?: string;
+	readonly mode = computed(() => (this.eua()._id ? 'edit' : 'create'));
 
-	@Input()
-	eua: EndUserAgreement;
-
-	ngOnInit() {
+	constructor() {
 		this.#alertService.clearAllAlerts();
-
-		if (this.eua) {
-			this.mode = 'edit';
-		} else {
-			this.eua = new EndUserAgreement();
-		}
 	}
 
 	submitEua(): any {
 		const obs$ =
-			this.mode === 'create'
-				? this.#euaService.create(this.eua)
-				: this.#euaService.update(this.eua);
+			this.mode() === 'create'
+				? this.#euaService.create(this.eua())
+				: this.#euaService.update(this.eua());
 
 		obs$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() =>
 			this.#router.navigate(['/admin/euas'])
@@ -52,6 +45,6 @@ export class ManageEuaComponent implements OnInit {
 	}
 
 	previewEua() {
-		this.#dialogService.alert(this.eua.title, this.eua.text);
+		this.#dialogService.alert(this.eua().title, this.eua().text);
 	}
 }
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 efb4b7bc..4ee0ef79 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
@@ -2,77 +2,71 @@
 	<!-- Alert Notifications -->
 	<system-alert></system-alert>
 
-	@if (message) {
-		<form role="form" autocomplete="off" novalidate #form="ngForm" (ngSubmit)="submitMessage()">
-			<div class="mb-4">
-				<h2 skipTo>{{ mode | titlecase }} Message</h2>
-				@if (mode === 'create') {
-					Provide the required information to create a new message
-				}
-				@if (mode === 'edit') {
-					Make changes to the message's information
-				}
-			</div>
+	<form role="form" autocomplete="off" novalidate #form="ngForm" (ngSubmit)="submitMessage()">
+		<div class="mb-4">
+			<h2 skipTo>{{ mode() | titlecase }} Message</h2>
+			@if (mode() === 'create') {
+				Provide the required information to create a new message
+			}
+			@if (mode() === 'edit') {
+				Make changes to the message's information
+			}
+		</div>
 
-			<!-- Type -->
-			<div class="mb-3">
-				<label class="form-label form-required" for="messageType">Type</label>
-				<ng-select
-					id="messageType"
-					name="type"
-					bindLabel="display"
-					bindValue="value"
-					style="width: 350px"
-					[(ngModel)]="message.type"
-					[items]="typeOptions"
-				></ng-select>
-			</div>
-			<!-- Title -->
-			<div class="mb-3">
-				<label class="form-label form-required" for="title">Title</label>
-				<input
-					class="form-control"
-					id="title"
-					name="title"
-					type="text"
-					required
-					[(ngModel)]="message.title"
-				/>
-			</div>
-			<!-- Body -->
-			<div class="mb-3">
-				<label class="form-label form-required" for="text">Message Body</label>
-				<textarea
-					class="form-control"
-					id="text"
-					name="text"
-					required
-					rows="6"
-					[(ngModel)]="message.body"
-				></textarea>
-			</div>
-			<!-- Buttons -->
-			<div class="mb-3">
-				<div class="text-end">
-					<button
-						class="btn btn-link me-2"
-						type="button"
-						[routerLink]="['/admin/messages']"
-					>
-						Cancel
-					</button>
-					<button
-						class="btn btn-outline-primary me-2"
-						type="button"
-						(click)="previewMessage()"
-					>
-						Preview
-					</button>
-					<button class="btn btn-primary" type="submit" [disabled]="!form.form.valid">
-						{{ mode === 'create' ? 'Create' : 'Save' }}
-					</button>
-				</div>
+		<!-- Type -->
+		<div class="mb-3">
+			<label class="form-label form-required" for="messageType">Type</label>
+			<ng-select
+				id="messageType"
+				name="type"
+				bindLabel="display"
+				bindValue="value"
+				style="width: 350px"
+				[(ngModel)]="message().type"
+				[items]="typeOptions"
+			></ng-select>
+		</div>
+		<!-- Title -->
+		<div class="mb-3">
+			<label class="form-label form-required" for="title">Title</label>
+			<input
+				class="form-control"
+				id="title"
+				name="title"
+				type="text"
+				required
+				[(ngModel)]="message().title"
+			/>
+		</div>
+		<!-- Body -->
+		<div class="mb-3">
+			<label class="form-label form-required" for="text">Message Body</label>
+			<textarea
+				class="form-control"
+				id="text"
+				name="text"
+				required
+				rows="6"
+				[(ngModel)]="message().body"
+			></textarea>
+		</div>
+		<!-- Buttons -->
+		<div class="mb-3">
+			<div class="text-end">
+				<button class="btn btn-link me-2" type="button" [routerLink]="['/admin/messages']">
+					Cancel
+				</button>
+				<button
+					class="btn btn-outline-primary me-2"
+					type="button"
+					(click)="previewMessage()"
+				>
+					Preview
+				</button>
+				<button class="btn btn-primary" type="submit" [disabled]="!form.form.valid">
+					{{ mode() === 'create' ? 'Create' : 'Save' }}
+				</button>
 			</div>
-		</form>
-	}
+		</div>
+	</form>
 </section>
diff --git a/src/app/core/admin/messages/manage-message/manage-message.component.spec.ts b/src/app/core/admin/messages/manage-message/manage-message.component.spec.ts
index 5feef908..0c7461e3 100644
--- a/src/app/core/admin/messages/manage-message/manage-message.component.spec.ts
+++ b/src/app/core/admin/messages/manage-message/manage-message.component.spec.ts
@@ -50,6 +50,7 @@ describe('ManageMessageComponent', () => {
 			]
 		});
 		fixture = TestBed.createComponent(ManageMessageComponent);
+		fixture.componentRef.setInput('message', undefined);
 		component = fixture.componentInstance;
 		rootHTMLElement = fixture.debugElement.nativeElement;
 
diff --git a/src/app/core/admin/messages/manage-message/manage-message.component.ts b/src/app/core/admin/messages/manage-message/manage-message.component.ts
index f9b1babb..fa9b0e95 100644
--- a/src/app/core/admin/messages/manage-message/manage-message.component.ts
+++ b/src/app/core/admin/messages/manage-message/manage-message.component.ts
@@ -1,5 +1,5 @@
 import { TitleCasePipe } from '@angular/common';
-import { Component, DestroyRef, Input, OnInit, inject } from '@angular/core';
+import { Component, DestroyRef, computed, inject, input } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
@@ -26,48 +26,42 @@ import { MessageService } from '../../../messages/message.service';
 		SkipToDirective
 	]
 })
-export class ManageMessageComponent implements OnInit {
-	mode: 'create' | 'edit' = 'create';
+export class ManageMessageComponent {
+	readonly #destroyRef = inject(DestroyRef);
+	readonly #dialogService = inject(DialogService);
+	readonly #router = inject(Router);
+	readonly #alertService = inject(SystemAlertService);
+	readonly #messageService = inject(MessageService);
 
-	@Input()
-	message: Message;
+	readonly message = input.required({
+		transform: (value?: Message) => value ?? new Message({ type: MessageType.MOTD })
+	});
 
-	typeOptions: any[] = [
+	readonly mode = computed(() => (this.message()._id ? 'edit' : 'create'));
+
+	readonly typeOptions: { value: string; display: string }[] = [
 		{ value: 'MOTD', display: 'MOTD' },
 		{ value: 'INFO', display: 'INFO' },
 		{ value: 'WARN', display: 'WARN' },
 		{ value: 'ERROR', display: 'ERROR' }
 	];
 
-	private destroyRef = inject(DestroyRef);
-	private dialogService = inject(DialogService);
-	private router = inject(Router);
-	private alertService = inject(SystemAlertService);
-	private messageService = inject(MessageService);
-
-	ngOnInit() {
-		this.alertService.clearAllAlerts();
-
-		if (this.message) {
-			this.mode = 'edit';
-		} else {
-			this.message = new Message();
-			this.message.type = MessageType.MOTD;
-		}
+	constructor() {
+		this.#alertService.clearAllAlerts();
 	}
 
 	submitMessage() {
 		const obs$ =
-			this.mode === 'create'
-				? this.messageService.create(this.message)
-				: this.messageService.update(this.message);
+			this.mode() === 'create'
+				? this.#messageService.create(this.message())
+				: this.#messageService.update(this.message());
 
-		obs$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((message) => {
-			this.router.navigate(['/admin/messages']);
+		obs$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((message) => {
+			this.#router.navigate(['/admin/messages']);
 		});
 	}
 
 	previewMessage() {
-		this.dialogService.alert(this.message.title, this.message.body);
+		this.#dialogService.alert(this.message().title, this.message().body);
 	}
 }
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 866e8750..86e80acf 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
@@ -2,203 +2,199 @@
 	<!-- Alert Notifications -->
 	<system-alert></system-alert>
 
-	@if (user) {
-		<form
-			role="form"
-			autocomplete="off"
-			novalidate
-			style="max-width: 1000px"
-			#form="ngForm"
-			(ngSubmit)="submitUser()"
-		>
-			<div class="mb-4">
-				<h2 skipTo>{{ mode | titlecase }} User</h2>
-				@if (mode === 'create') {
-					Provide the required information to create a new User
-				}
-				@if (mode === 'edit') {
-					Make changes to the User's information
-				}
+	<form
+		role="form"
+		autocomplete="off"
+		novalidate
+		style="max-width: 1000px"
+		#form="ngForm"
+		(ngSubmit)="submitUser()"
+	>
+		<div class="mb-4">
+			<h2 skipTo>{{ mode() | titlecase }} User</h2>
+			@if (mode() === 'create') {
+				Provide the required information to create a new User
+			}
+			@if (mode() === 'edit') {
+				Make changes to the User's information
+			}
+		</div>
+
+		<!-- Name -->
+		<div class="mb-3">
+			<label class="form-label form-required" for="name">Name</label>
+			<input
+				class="form-control"
+				id="name"
+				name="name"
+				type="text"
+				required
+				[(ngModel)]="user().name"
+				[disabled]="metadataLocked()"
+			/>
+		</div>
+		<!-- Username -->
+		<div class="mb-3">
+			<label class="form-label form-required" for="username">Username</label>
+			<input
+				class="form-control"
+				id="username"
+				name="username"
+				type="text"
+				required
+				[(ngModel)]="user().username"
+				[disabled]="metadataLocked()"
+			/>
+		</div>
+		<!-- Organization -->
+		<div class="mb-3">
+			<label class="form-label form-required" for="organization">Organization</label>
+			<input
+				class="form-control"
+				id="organization"
+				name="organization"
+				type="text"
+				required
+				[(ngModel)]="user().organization"
+				[disabled]="metadataLocked()"
+			/>
+		</div>
+		<!-- Email -->
+		<div class="mb-3">
+			<label class="form-label form-required" for="email">Email</label>
+			<input
+				class="form-control"
+				id="email"
+				name="email"
+				type="email"
+				required
+				[(ngModel)]="user().email"
+				[disabled]="metadataLocked()"
+			/>
+		</div>
+		<!-- Local Login Information -->
+		@if (!proxyPki()) {
+			<div class="py-3">
+				<h3>Password</h3>
+				At least 6 characters.
+				<span>Leave blank if you do not want to change the password.</span>
 			</div>
 
-			<!-- Name -->
 			<div class="mb-3">
-				<label class="form-label form-required" for="name">Name</label>
+				<label class="form-label" for="password">
+					@if (mode() === 'edit') {
+						<label>New</label>
+					}
+					Password</label
+				>
 				<input
 					class="form-control"
-					id="name"
-					name="name"
-					type="text"
-					required
-					[(ngModel)]="user.name"
-					[disabled]="metadataLocked()"
+					id="password"
+					name="password"
+					type="password"
+					autocomplete="off"
+					[(ngModel)]="user().password"
 				/>
 			</div>
-			<!-- Username -->
 			<div class="mb-3">
-				<label class="form-label form-required" for="username">Username</label>
+				<label class="form-label" for="password2"
+					>Re-enter
+					@if (mode() === 'edit') {
+						<label>New</label>
+					}
+					Password</label
+				>
 				<input
 					class="form-control"
-					id="username"
-					name="username"
-					type="text"
-					required
-					[(ngModel)]="user.username"
-					[disabled]="metadataLocked()"
+					id="password2"
+					name="password2"
+					type="password"
+					autocomplete="off"
+					[(ngModel)]="user().verifyPassword"
 				/>
 			</div>
-			<!-- Organization -->
+		}
+		<!-- PKI Information -->
+		@if (proxyPki()) {
+			<!-- Bypass Access Checker -->
+			<div class="mb-3">
+				<label class="form-label">Access Check</label>
+				<div class="form-check m-n1">
+					<input
+						class="form-check-input"
+						id="bypassAC"
+						name="bypassAccessCheck"
+						type="checkbox"
+						[(ngModel)]="user().bypassAccessCheck"
+					/>
+					<label class="form-check-label" for="bypassAC">Bypass Access Check</label>
+				</div>
+			</div>
+			<!-- Stuff that normal users can see, but won't be able to modify -->
+			<!-- dn -->
 			<div class="mb-3">
-				<label class="form-label form-required" for="organization">Organization</label>
+				<label class="form-label" for="dn">DN</label>
 				<input
 					class="form-control"
-					id="organization"
-					name="organization"
+					id="dn"
+					name="dn"
 					type="text"
-					required
-					[(ngModel)]="user.organization"
-					[disabled]="metadataLocked()"
+					disabled
+					[(ngModel)]="user().providerData.dn"
 				/>
 			</div>
-			<!-- Email -->
 			<div class="mb-3">
-				<label class="form-label form-required" for="email">Email</label>
-				<input
+				<label class="form-label" for="externalRoles">External Roles</label>
+				<textarea
 					class="form-control"
-					id="email"
-					name="email"
-					type="email"
-					required
-					[(ngModel)]="user.email"
-					[disabled]="metadataLocked()"
-				/>
+					id="externalRoles"
+					name="externalRoles"
+					type="text"
+					disabled
+					rows="4"
+					>{{ user().externalRolesDisplay | join: '\n' }}</textarea
+				>
 			</div>
-			<!-- Local Login Information -->
-			@if (!proxyPki()) {
-				<div class="py-3">
-					<h3>Password</h3>
-					At least 6 characters.
-					<span>Leave blank if you do not want to change the password.</span>
-				</div>
-
-				<div class="mb-3">
-					<label class="form-label" for="password">
-						@if (mode === 'edit') {
-							<label>New</label>
-						}
-						Password</label
-					>
-					<input
-						class="form-control"
-						id="password"
-						name="password"
-						type="password"
-						autocomplete="off"
-						[(ngModel)]="user.password"
-					/>
-				</div>
-				<div class="mb-3">
-					<label class="form-label" for="password2"
-						>Re-enter
-						@if (mode === 'edit') {
-							<label>New</label>
-						}
-						Password</label
-					>
-					<input
-						class="form-control"
-						id="password2"
-						name="password2"
-						type="password"
-						autocomplete="off"
-						[(ngModel)]="user.verifyPassword"
-					/>
-				</div>
-			}
-			<!-- PKI Information -->
-			@if (proxyPki()) {
-				<!-- Bypass Access Checker -->
-				<div class="mb-3">
-					<label class="form-label">Access Check</label>
-					<div class="form-check m-n1">
+			<div class="mb-3">
+				<label class="form-label" for="externalGroups">External Groups</label>
+				<textarea
+					class="form-control"
+					id="externalGroups"
+					name="externalGroups"
+					type="text"
+					disabled
+					rows="4"
+					>{{ user().externalGroups | join: '\n' }}</textarea
+				>
+			</div>
+		}
+		<!-- 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="bypassAC"
-							name="bypassAccessCheck"
+							id="role{{ role.role }}Cb"
+							name="role{{ role.role }}Cb"
 							type="checkbox"
-							[(ngModel)]="user.bypassAccessCheck"
+							[(ngModel)]="user().roles[role.role]"
 						/>
-						<label class="form-check-label" for="bypassAC">Bypass Access Check</label>
+						<label class="form-check-label" for="role{{ role.role }}Cb">{{
+							role.label
+						}}</label>
 					</div>
-				</div>
-				<!-- Stuff that normal users can see, but won't be able to modify -->
-				<!-- dn -->
-				<div class="mb-3">
-					<label class="form-label" for="dn">DN</label>
-					<input
-						class="form-control"
-						id="dn"
-						name="dn"
-						type="text"
-						disabled
-						[(ngModel)]="user.providerData.dn"
-					/>
-				</div>
-				<div class="mb-3">
-					<label class="form-label" for="externalRoles">External Roles</label>
-					<textarea
-						class="form-control"
-						id="externalRoles"
-						name="externalRoles"
-						type="text"
-						disabled
-						rows="4"
-						>{{ user.externalRolesDisplay | join: '\n' }}</textarea
-					>
-				</div>
-				<div class="mb-3">
-					<label class="form-label" for="externalGroups">External Groups</label>
-					<textarea
-						class="form-control"
-						id="externalGroups"
-						name="externalGroups"
-						type="text"
-						disabled
-						rows="4"
-						>{{ user.externalGroups | join: '\n' }}</textarea
-					>
-				</div>
-			}
-			<!-- 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>
-			<div class="mb-3">
-				<div class="text-end">
-					<button class="btn btn-link me-2" type="button" routerLink="/admin/users">
-						Cancel
-					</button>
-					<button class="btn btn-primary" type="submit" [disabled]="!form.form.valid">
-						{{ mode === 'create' ? 'Create' : 'Save' }}
-					</button>
-				</div>
+				}
 			</div>
-		</form>
-	}
+		</div>
+		<div class="mb-3 text-end">
+			<button class="btn btn-link me-2" type="button" routerLink="/admin/users">
+				Cancel
+			</button>
+			<button class="btn btn-primary" type="submit" [disabled]="!form.form.valid">
+				{{ mode() === 'create' ? 'Create' : 'Save' }}
+			</button>
+		</div>
+	</form>
 </section>
diff --git a/src/app/core/admin/user/manage-user/manage-user.component.spec.ts b/src/app/core/admin/user/manage-user/manage-user.component.spec.ts
index 991eb10a..8d07f970 100644
--- a/src/app/core/admin/user/manage-user/manage-user.component.spec.ts
+++ b/src/app/core/admin/user/manage-user/manage-user.component.spec.ts
@@ -22,6 +22,7 @@ describe('ManageUserComponent', () => {
 			]
 		});
 		fixture = TestBed.createComponent(ManageUserComponent);
+		fixture.componentRef.setInput('user', undefined);
 		component = fixture.componentInstance;
 		fixture.detectChanges();
 	});
diff --git a/src/app/core/admin/user/manage-user/manage-user.component.ts b/src/app/core/admin/user/manage-user/manage-user.component.ts
index 2197582c..4c852962 100644
--- a/src/app/core/admin/user/manage-user/manage-user.component.ts
+++ b/src/app/core/admin/user/manage-user/manage-user.component.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, DestroyRef, Input, OnInit, computed, inject } from '@angular/core';
+import { Component, DestroyRef, computed, inject, input } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
@@ -29,7 +29,7 @@ import { AdminUsersService } from '../admin-users.service';
 	templateUrl: './manage-user.component.html',
 	styleUrls: ['./manage-user.component.scss']
 })
-export class ManageUserComponent implements OnInit {
+export class ManageUserComponent {
 	readonly #alertService = inject(SystemAlertService);
 	readonly #adminUsersService = inject(AdminUsersService);
 
@@ -40,29 +40,24 @@ export class ManageUserComponent implements OnInit {
 	readonly proxyPki = computed(() => this.config()?.auth === 'proxy-pki');
 	readonly metadataLocked = computed(() => this.proxyPki());
 
-	readonly possibleRoles = Role.ROLES;
+	readonly user = input.required({
+		transform: (value?: EditUser) => value ?? new EditUser()
+	});
 
-	mode: 'create' | 'edit' = 'create';
+	readonly mode = computed(() => (this.user()._id ? 'edit' : 'create'));
 
-	@Input()
-	user: EditUser;
+	readonly possibleRoles = Role.ROLES;
 
-	ngOnInit() {
+	constructor() {
 		this.#alertService.clearAllAlerts();
-
-		if (this.user) {
-			this.mode = 'edit';
-		} else {
-			this.user = new EditUser();
-		}
 	}
 
 	submitUser(): any {
 		if (this.validatePassword()) {
 			const obs$ =
-				this.mode === 'create'
-					? this.#adminUsersService.create(this.user)
-					: this.#adminUsersService.update(this.user);
+				this.mode() === 'create'
+					? this.#adminUsersService.create(this.user())
+					: this.#adminUsersService.update(this.user());
 
 			obs$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
 				next: () => this.router.navigate(['/admin/users']),
@@ -76,7 +71,7 @@ export class ManageUserComponent implements OnInit {
 	}
 
 	private validatePassword(): boolean {
-		if (this.user.password === this.user.verifyPassword) {
+		if (this.user().password === this.user().verifyPassword) {
 			return true;
 		}
 
diff --git a/src/app/core/audit/audit-view-change-modal/audit-view-change-modal.component.html b/src/app/core/audit/audit-view-change-modal/audit-view-change-modal.component.html
index 26bc3997..05715fc7 100644
--- a/src/app/core/audit/audit-view-change-modal/audit-view-change-modal.component.html
+++ b/src/app/core/audit/audit-view-change-modal/audit-view-change-modal.component.html
@@ -2,7 +2,7 @@
 	title="Changes to {{ auditEntry?.audit?.auditType }} by {{
 		auditEntry?.audit?.actor?.username
 	}} on {{ auditEntry?.created | utcDate }}"
-	cancelText=""
+	hideCancel
 	okText="Close"
 	(cancel)="close()"
 	(ok)="close()"
diff --git a/src/app/core/audit/audit-view-details-modal/audit-view-details-modal.component.html b/src/app/core/audit/audit-view-details-modal/audit-view-details-modal.component.html
index 3821ea07..0c17c8cf 100644
--- a/src/app/core/audit/audit-view-details-modal/audit-view-details-modal.component.html
+++ b/src/app/core/audit/audit-view-details-modal/audit-view-details-modal.component.html
@@ -2,7 +2,7 @@
 	title="{{ auditEntry?.audit?.auditType | titlecase }} {{
 		auditEntry?.audit?.action + 'd'
 	}} by {{ auditEntry?.audit?.actor?.username }} on {{ auditEntry?.created | utcDate }}"
-	cancelText=""
+	hideCancel
 	okText="Close"
 	(cancel)="close()"
 	(ok)="close()"