diff --git a/wowskarma.app/src/app/app-routing.module.ts b/wowskarma.app/src/app/app-routing.module.ts
index 62123fb1..c1a92940 100644
--- a/wowskarma.app/src/app/app-routing.module.ts
+++ b/wowskarma.app/src/app/app-routing.module.ts
@@ -18,7 +18,7 @@ import { AuthGuard } from "./services/guards/auth.guard";
 import { HtmlLoaderComponent } from "./shared/components/html-loader/html-loader.component";
 import { LayoutComponent } from "./shared/layout/layout.component";
 
-const routes: Routes = [
+export const routes: Routes = [
   // Set defaults for the app.
   {
     path: "",
@@ -81,10 +81,3 @@ const routes: Routes = [
     ],
   },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {
-}
diff --git a/wowskarma.app/src/app/app-wrapper.component.html b/wowskarma.app/src/app/app-wrapper.component.html
index b9ee000d..5e492f0f 100644
--- a/wowskarma.app/src/app/app-wrapper.component.html
+++ b/wowskarma.app/src/app/app-wrapper.component.html
@@ -1,8 +1,8 @@
 <ng-container *ngIf="appInit.isInitialized$ | async as initialized">
   <div class="app-loading-wrapper" *ngIf="!initialized">
-    <img alt="App Loading Logo" id="app-init-logo-light" class="app-loading-logo" src="../assets/logos/rci-logo-light.svg"/>
-    <img alt="App Loading Logo" id="app-init-logo-dark" class="app-loading-logo" src="../assets/logos/rci-logo-dark.svg"/>
+<!--     <img alt="App Loading Logo" id="app-init-logo-light" class="app-loading-logo" src="../assets/logos/rci-logo-light.svg"/> -->
+<!--     <img alt="App Loading Logo" id="app-init-logo-dark" class="app-loading-logo" src="..k/assets/logos/rci-logo-dark.svg"/> -->
   </div>
 </ng-container>
 
-<router-outlet></router-outlet>
+<router-outlet />
diff --git a/wowskarma.app/src/app/app-wrapper.component.ts b/wowskarma.app/src/app/app-wrapper.component.ts
index 268e1cf2..992c4544 100644
--- a/wowskarma.app/src/app/app-wrapper.component.ts
+++ b/wowskarma.app/src/app/app-wrapper.component.ts
@@ -1,13 +1,19 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { AppInitService } from "./services/app-init.service";
+import { RouterOutlet } from "@angular/router";
+import { AsyncPipe, NgIf } from "@angular/common";
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   templateUrl: './app-wrapper.component.html',
+  imports: [
+    RouterOutlet,
+    AsyncPipe,
+    NgIf
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppWrapperComponent {
-
-  constructor(public appInit: AppInitService) {
-  }
+  constructor(public appInit: AppInitService) { }
 }
diff --git a/wowskarma.app/src/app/app.component.ts b/wowskarma.app/src/app/app.component.ts
index 1c51e136..2071c2c2 100644
--- a/wowskarma.app/src/app/app.component.ts
+++ b/wowskarma.app/src/app/app.component.ts
@@ -1,12 +1,15 @@
 import { Component } from "@angular/core";
-import { ActivatedRouteSnapshot, ResolveEnd, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, ResolveEnd, Router, RouterOutlet } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { AppInitService } from "./services/app-init.service";
 import { AppInsightsService } from "./services/app-insights.service";
 
 @Component({
-  template: "<router-outlet></router-outlet>",
-
+  standalone: true,
+  template: "<router-outlet />",
+  imports: [
+    RouterOutlet
+  ]
 })
 export class AppComponent {
   constructor(
diff --git a/wowskarma.app/src/app/app.module.ts b/wowskarma.app/src/app/app.module.ts
deleted file mode 100644
index a1db2294..00000000
--- a/wowskarma.app/src/app/app.module.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
-import { NgModule } from "@angular/core";
-import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { BrowserModule } from "@angular/platform-browser";
-import { ServiceWorkerModule } from "@angular/service-worker";
-import { NgbCollapseModule, NgbPaginationModule, NgbTooltipModule, NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { ModActionTypeDisplayPipe } from 'src/app/services/pipes/mod-action-type-display.pipe';
-import { AppRoutingModule } from "./app-routing.module";
-import { AppWrapperComponent } from "./app-wrapper.component";
-import { AppComponent } from "./app.component";
-import { LoginComponent } from "./pages/auth/login.component";
-import { LogoutComponent } from "./pages/auth/logout.component";
-import { ProfileComponent as ClanProfileComponent } from "./pages/clan/profile/profile.component";
-import { SearchComponent as ClanSearchComponent } from "./pages/clan/search/search.component";
-import { NotFoundComponent } from "./pages/fallbacks/not-found/not-found.component";
-import { ProfileComponent as PlayerProfileComponent } from "./pages/player/profile/profile.component";
-import { SearchComponent as PlayerSearchComponent } from "./pages/player/search/search.component";
-import { ListLatestComponent } from "src/app/pages/post/list/list-latest.component";
-import { ViewPostComponent } from "./pages/post/view/view-post.component";
-import { SettingsComponent } from "./pages/settings/settings.component";
-import { ApiModule } from "./services/api/api.module";
-import { AppConfigService } from "./services/app-config.service";
-import { AppInitService } from "./services/app-init.service";
-import { AppInsightsService } from "./services/app-insights.service";
-import { AuthService } from "./services/auth.service";
-import { AppInitGuard } from "./services/guards/app-init.guard";
-import { AuthGuard } from "./services/guards/auth.guard";
-import { AuthenticationInterceptor } from "./services/interceptors/authentication.interceptor";
-import { ErrorInterceptor } from "./services/interceptors/error.interceptor";
-import { BypassHtmlPipe } from "./services/pipes/bypass-html.pipe";
-import { ColorHexPipe } from "./services/pipes/colorHex.pipe";
-import { FormErrorsPipe } from "./services/pipes/form-errors.pipe";
-import { KarmaColorPipe } from "./services/pipes/karma-color.pipe";
-import { PostBorderColorPipe } from "./services/pipes/post-border-color.pipe";
-import { SafeStylePipe } from "./services/pipes/safe-style.pipe";
-import { WowsNumbersClanLinkPipe } from "./services/pipes/wows-numbers-clan-link.pipe";
-import { WowsNumbersPlayerLinkPipe } from "./services/pipes/wows-numbers-player-link.pipe";
-import { HtmlLoaderComponent } from "./shared/components/html-loader/html-loader.component";
-import { MinMaxMetricComponent } from "./shared/components/minmax-metric/min-max-metric.component";
-import { ControlExtensionsDirective } from "./shared/directives/control-extensions.directive";
-import { FormErrorsComponent } from "./shared/form-errors/form-errors.component";
-import { FooterComponent } from "./shared/layout/footer/footer.component";
-import { LayoutComponent } from "./shared/layout/layout.component";
-import { NavAuthComponent } from "./shared/layout/navbar/nav-auth/nav-auth.component";
-import { NavbarComponent } from "./shared/layout/navbar/navbar.component";
-import { NotificationsButtonComponent } from "./shared/layout/navbar/notifications-button/notifications-button.component";
-import { PostDeleteComponent } from "./shared/modals/post-delete/post-delete.component";
-import { PostEditorComponent } from "./shared/modals/post-editor/post-editor.component";
-import { PostModDeleteComponent } from "./shared/modals/post-mod-delete/post-mod-delete.component";
-import { SeedTokenChangeComponent } from "./shared/modals/seed-token-change/seed-token-change.component";
-import { NotificationComponent } from "./shared/notifications/notification/notification.component";
-import { NotificationsMenuComponent } from "./shared/notifications/notifications-menu/notifications-menu.component";
-import { PostsReceivedComponent } from "./shared/player/profile/posts-received/posts-received.component";
-import { PostsSentComponent } from "./shared/player/profile/posts-sent/posts-sent.component";
-import { FlairMarkupsComponent } from "./shared/post/flair-markup/flair-markups.component";
-import { PostComponent } from "./shared/post/post.component";
-import { ChatLogComponent } from "./shared/replay/chat-log/chat-log.component";
-import { TeamRosterComponent } from "./shared/replay/team-roster/team-roster.component";
-import { ChatMessageChannelPipe } from './services/pipes/chat-message-channel.pipe';
-import { PostModEditorComponent } from 'src/app/shared/modals/post-mod-edit/post-mod-editor.component';
-import { UnauthorizedComponent } from './pages/fallbacks/unauthorized/unauthorized.component';
-import { ForbiddenComponent } from './pages/fallbacks/forbidden/forbidden.component';
-import { ClanRankComponent } from './shared/components/icons/clan-rank/clan-rank.component';
-import { PlayerNamelinkComponent } from './shared/components/player-namelink/player-namelink.component';
-import { ProfileModActionsViewComponent } from './shared/modals/profile-mod-actions-view/profile-mod-actions-view.component';
-import { ProfilePlatformBansViewComponent } from './shared/modals/profile-platform-bans-view/profile-platform-bans-view.component';
-import { UserRolesComponent } from './shared/components/icons/user-roles/user-roles.component';
-import { NgOptimizedImage } from "@angular/common";
-import { MarkdownComponent, MarkdownModule, MARKED_OPTIONS } from "ngx-markdown";
-
-@NgModule({
-    declarations: [
-        AppComponent,
-        LayoutComponent,
-        NavbarComponent,
-        FooterComponent,
-        NotFoundComponent,
-        PlayerSearchComponent,
-        AppWrapperComponent,
-        PlayerProfileComponent,
-        SafeStylePipe,
-        ColorHexPipe,
-        PostComponent,
-        FlairMarkupsComponent,
-        PostsReceivedComponent,
-        PostsSentComponent,
-        ViewPostComponent,
-        TeamRosterComponent,
-        ChatLogComponent,
-        NavAuthComponent,
-        LoginComponent,
-        LogoutComponent,
-        ListLatestComponent,
-        PostEditorComponent,
-        ControlExtensionsDirective,
-        FormErrorsComponent,
-        FormErrorsPipe,
-        ClanSearchComponent,
-        ClanProfileComponent,
-        SettingsComponent,
-        SeedTokenChangeComponent,
-        PostDeleteComponent,
-        PostModDeleteComponent,
-        KarmaColorPipe,
-        BypassHtmlPipe,
-        HtmlLoaderComponent,
-        MinMaxMetricComponent,
-        PostBorderColorPipe,
-        WowsNumbersPlayerLinkPipe,
-        WowsNumbersClanLinkPipe,
-        NotificationsButtonComponent,
-        NotificationsMenuComponent,
-        NotificationComponent,
-        ChatMessageChannelPipe,
-        PostModEditorComponent,
-        UnauthorizedComponent,
-        ForbiddenComponent,
-        ClanRankComponent,
-        PlayerNamelinkComponent,
-        ProfileModActionsViewComponent,
-        ProfilePlatformBansViewComponent,
-        ModActionTypeDisplayPipe,
-        UserRolesComponent
-    ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    ReactiveFormsModule,
-    FormsModule,
-    HttpClientModule,
-    ApiModule,
-    ServiceWorkerModule.register("ngsw-worker.js", {
-      // enabled: environment.production,
-      // Register the ServiceWorker as soon as the application is stable
-      // or after 30 seconds (whichever comes first).
-      registrationStrategy: "registerWhenStable:30000",
-    }),
-    NgbCollapseModule,
-    NgbPaginationModule,
-    NgbTooltipModule,
-    NgbModule,
-    NgOptimizedImage,
-    MarkdownModule.forRoot({
-      markedOptions: {
-        provide: MARKED_OPTIONS,
-        useValue: {
-          gfm: true,
-          breaks: true
-        }
-      }
-    })
-  ],
-    providers: [
-        AuthService,
-        AppConfigService,
-        AppInsightsService,
-        AppInitService,
-        AppInitGuard,
-        AuthGuard,
-        { provide: HTTP_INTERCEPTORS, multi: true, useClass: AuthenticationInterceptor },
-        { provide: HTTP_INTERCEPTORS, multi: true, useClass: ErrorInterceptor },
-    ],
-    bootstrap: [AppWrapperComponent],
-})
-export class AppModule {
-
-}
-
diff --git a/wowskarma.app/src/app/pages/clan/profile/profile.component.html b/wowskarma.app/src/app/pages/clan/profile/profile.component.html
index 64456e23..4f7a2d5f 100644
--- a/wowskarma.app/src/app/pages/clan/profile/profile.component.html
+++ b/wowskarma.app/src/app/pages/clan/profile/profile.component.html
@@ -34,14 +34,14 @@ <h1 id="clan-name" class="mb-5">
         <h2>Clan Metrics</h2>
 
         <div class="row justify-content-center my-5">
-          <div class="col"><minmax-metric [metric]="clanMetrics['game']" name="In-Game Karma"></minmax-metric></div>
-          <div class="col"><minmax-metric [metric]="clanMetrics['platform']" name="Platform Karma"></minmax-metric></div>
+          <div class="col"><minmax-metric [metric]="clanMetrics['game']" name="In-Game Karma" /></div>
+          <div class="col"><minmax-metric [metric]="clanMetrics['platform']" name="Platform Karma" /></div>
         </div>
 
         <div class="row justify-content-center my-5">
-          <div class="col"><minmax-metric [metric]="clanMetrics['performance']" name="Performance"></minmax-metric></div>
-          <div class="col"><minmax-metric [metric]="clanMetrics['teamplay']" name="Teamplay"></minmax-metric></div>
-          <div class="col"><minmax-metric [metric]="clanMetrics['courtesy']" name="Courtesy"></minmax-metric></div>
+          <div class="col"><minmax-metric [metric]="clanMetrics['performance']" name="Performance" /></div>
+          <div class="col"><minmax-metric [metric]="clanMetrics['teamplay']" name="Teamplay" /></div>
+          <div class="col"><minmax-metric [metric]="clanMetrics['courtesy']" name="Courtesy" /></div>
         </div>
       </div>
     </div>
@@ -64,7 +64,7 @@ <h2>Clan Metrics</h2>
 
       <tbody>
         <tr *ngFor="let member of clan.members!.sort(sortByRankThenJoinDate)">
-          <td><icon-clan-rank [clanRank]="member.clan!.clanMemberRole"></icon-clan-rank></td>
+          <td><icon-clan-rank [clanRank]="member.clan!.clanMemberRole" /></td>
           <td><a [routerLink]="['/player', member.id + ',' + member.username]">{{member.username}}</a></td>
           <td class="small">{{member.wgAccountCreatedAt | date:"short"}}</td>
           <td class="small">{{member.clan!.joinedClanAt | date:"short"}}</td>
@@ -81,7 +81,7 @@ <h2>Clan Metrics</h2>
 </ng-container>
 
 <ng-template #notFound>
-  <app-not-found message="Sorry, no clan was found."></app-not-found>
+  <app-not-found message="Sorry, no clan was found." />
 </ng-template>
 
 <ng-template #loading>
diff --git a/wowskarma.app/src/app/pages/clan/profile/profile.component.ts b/wowskarma.app/src/app/pages/clan/profile/profile.component.ts
index 177e7122..6f25d283 100644
--- a/wowskarma.app/src/app/pages/clan/profile/profile.component.ts
+++ b/wowskarma.app/src/app/pages/clan/profile/profile.component.ts
@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component, inject} from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, RouterLink } from "@angular/router";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
 import { ClanProfileFullDto } from "src/app/services/api/models/clan-profile-full-dto";
@@ -8,8 +8,15 @@ import { ClanListingDto } from "src/app/services/api/models/clan-listing-dto";
 import { ClanRole } from "src/app/services/api/models/clan-role";
 import { PlayerProfileDto } from "src/app/services/api/models/player-profile-dto";
 import { ClanService } from "src/app/services/api/services/clan.service";
-import { MinMaxMetricObject } from "src/app/shared/components/minmax-metric/min-max-metric.component";
+import { MinMaxMetricComponent, MinMaxMetricObject } from "src/app/shared/components/minmax-metric/min-max-metric.component";
 import { mapApiModelState, routeParam, shareReplayRefCount } from "src/app/shared/rxjs-operators";
+import { AsyncPipe, DatePipe, NgForOf, NgIf } from "@angular/common";
+import { MarkdownComponent } from "ngx-markdown";
+import { WowsNumbersClanLinkPipe } from "../../../services/pipes/wows-numbers-clan-link.pipe";
+import { KarmaColorPipe } from "../../../services/pipes/karma-color.pipe";
+import { ClanRankComponent } from "../../../shared/components/icons/clan-rank/clan-rank.component";
+import { NotFoundComponent } from "../../fallbacks/not-found/not-found.component";
+import { ColorHexPipe } from "../../../services/pipes/colorHex.pipe";
 
 type ApiModelState<T> = {
   notFound?: true,
@@ -18,8 +25,23 @@ type ApiModelState<T> = {
 
 
 @Component({
+  standalone: true,
   templateUrl: "./profile.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    AsyncPipe,
+    NgIf,
+    MarkdownComponent,
+    DatePipe,
+    WowsNumbersClanLinkPipe,
+    MinMaxMetricComponent,
+    KarmaColorPipe,
+    ClanRankComponent,
+    RouterLink,
+    NotFoundComponent,
+    ColorHexPipe,
+    NgForOf
+  ]
 })
 export class ProfileComponent {
   //loaded$ = new BehaviorSubject<boolean>(false);
diff --git a/wowskarma.app/src/app/pages/clan/search/search.component.ts b/wowskarma.app/src/app/pages/clan/search/search.component.ts
index a0d67f89..eabde4e1 100644
--- a/wowskarma.app/src/app/pages/clan/search/search.component.ts
+++ b/wowskarma.app/src/app/pages/clan/search/search.component.ts
@@ -1,12 +1,23 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from "@angular/forms";
+import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
 import { BehaviorSubject, debounceTime, distinctUntilChanged, tap } from "rxjs";
 import { map } from "rxjs/operators";
 import { ClanService } from "../../../services/api/services/clan.service";
 import { filterNotNull, switchMapCatchError, tapAny } from "../../../shared/rxjs-operators";
+import { AsyncPipe, NgForOf } from "@angular/common";
+import { ColorHexPipe } from "../../../services/pipes/colorHex.pipe";
+import { RouterLink } from "@angular/router";
 
 @Component({
+  standalone: true,
   templateUrl: "./search.component.html",
+  imports: [
+    ReactiveFormsModule,
+    AsyncPipe,
+    ColorHexPipe,
+    RouterLink,
+    NgForOf
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SearchComponent {
diff --git a/wowskarma.app/src/app/pages/fallbacks/not-found/not-found.component.ts b/wowskarma.app/src/app/pages/fallbacks/not-found/not-found.component.ts
index 8913229b..ed376a33 100644
--- a/wowskarma.app/src/app/pages/fallbacks/not-found/not-found.component.ts
+++ b/wowskarma.app/src/app/pages/fallbacks/not-found/not-found.component.ts
@@ -1,9 +1,14 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgOptimizedImage } from "@angular/common";
 
 @Component({
+  standalone: true,
   selector: 'app-not-found',
   templateUrl: './not-found.component.html',
   styleUrls: ['./not-found.component.scss'],
+  imports: [
+    NgOptimizedImage
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NotFoundComponent {
diff --git a/wowskarma.app/src/app/pages/player/profile/profile.component.ts b/wowskarma.app/src/app/pages/player/profile/profile.component.ts
index 63bfe2b7..9a31c300 100644
--- a/wowskarma.app/src/app/pages/player/profile/profile.component.ts
+++ b/wowskarma.app/src/app/pages/player/profile/profile.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ActivatedRoute, RouterLink } from "@angular/router";
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { firstValueFrom, merge, Subject } from "rxjs";
 import { filter, map } from "rxjs/operators";
 import { ModActionService } from 'src/app/services/api/services/mod-action.service';
@@ -11,11 +11,36 @@ import { ProfilePlatformBansViewComponent } from 'src/app/shared/modals/profile-
 import { PlayerService } from "../../../services/api/services/player.service";
 import { mapApiModelState, routeParam, shareReplayRefCount, switchMapCatchError } from "../../../shared/rxjs-operators";
 import { ProfileService } from "../../../services/api/services/profile.service";
+import { AsyncPipe, DatePipe, NgIf } from "@angular/common";
+import { KarmaColorPipe } from "../../../services/pipes/karma-color.pipe";
+import { ColorHexPipe } from "../../../services/pipes/colorHex.pipe";
+import { ClanRankComponent } from "../../../shared/components/icons/clan-rank/clan-rank.component";
+import { UserRolesComponent } from "../../../shared/components/icons/user-roles/user-roles.component";
+import { WowsNumbersPlayerLinkPipe } from "../../../services/pipes/wows-numbers-player-link.pipe";
+import { NotFoundComponent } from "../../fallbacks/not-found/not-found.component";
+import { PostsSentComponent } from "../../../shared/player/profile/posts-sent/posts-sent.component";
+import { PostsReceivedComponent } from "../../../shared/player/profile/posts-received/posts-received.component";
 
 
 @Component({
+  standalone: true,
   templateUrl: "./profile.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    RouterLink,
+    AsyncPipe,
+    KarmaColorPipe,
+    ColorHexPipe,
+    NgbTooltip,
+    ClanRankComponent,
+    UserRolesComponent,
+    NgIf,
+    DatePipe,
+    WowsNumbersPlayerLinkPipe,
+    NotFoundComponent,
+    PostsSentComponent,
+    PostsReceivedComponent
+  ]
 })
 export class ProfileComponent {
   // Get the "ID,username" from the route params.
diff --git a/wowskarma.app/src/app/pages/player/search/search.component.ts b/wowskarma.app/src/app/pages/player/search/search.component.ts
index ac30ec5c..8511db3a 100644
--- a/wowskarma.app/src/app/pages/player/search/search.component.ts
+++ b/wowskarma.app/src/app/pages/player/search/search.component.ts
@@ -1,14 +1,20 @@
 import { ChangeDetectionStrategy, Component, OnInit, signal } from "@angular/core";
-import { FormControl, FormGroup } from "@angular/forms";
+import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
 import { BehaviorSubject, catchError, debounceTime, distinctUntilChanged, of, switchMap, tap } from "rxjs";
 import { map } from "rxjs/operators";
 import { PlayerService } from "../../../services/api/services";
 import { filterNotNull, switchMapCatchError, tapAny } from "../../../shared/rxjs-operators";
 import { toSignal } from "@angular/core/rxjs-interop";
+import { PlayerNamelinkComponent } from "../../../shared/components/player-namelink/player-namelink.component";
 
 @Component({
+  standalone: true,
   selector: "app-search",
   templateUrl: "./search.component.html",
+  imports: [
+    ReactiveFormsModule,
+    PlayerNamelinkComponent
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SearchComponent {
diff --git a/wowskarma.app/src/app/pages/post/list/list-latest.component.html b/wowskarma.app/src/app/pages/post/list/list-latest.component.html
index a6e5e49e..746b0d5c 100644
--- a/wowskarma.app/src/app/pages/post/list/list-latest.component.html
+++ b/wowskarma.app/src/app/pages/post/list/list-latest.component.html
@@ -43,8 +43,7 @@ <h4>View</h4>
           <ng-container *ngIf="pageInfo$ | async as pageInfo">
             <ngb-pagination [(page)]="pageInfo.currentPage" [boundaryLinks]="true" [collectionSize]="pageInfo.totalItems"
                             [maxSize]="5" [pageSize]="pageInfo.pageSize" [rotate]="true" (pageChange)="onPageChanged($event)"
-            >
-            </ngb-pagination>
+            />
           </ng-container>
         </div>
 
@@ -82,7 +81,7 @@ <h5 *ngIf="posts$ | async as posts" class="my-3 text-info">Loaded {{(posts.lengt
 <div *ngIf="posts$ | async as posts else loadingPosts">
   <div *ngIf="posts.length > 0 else noPosts" class="row gx-2 gy-3">
     <div *ngFor="let post of posts" class="col-lg-4 col-md-6">
-      <app-post [post]="post" [postDisplayType]="'neutral'"></app-post>
+      <app-post [post]="post" [postDisplayType]="'neutral'" />
     </div>
   </div>
 
diff --git a/wowskarma.app/src/app/pages/post/list/list-latest.component.ts b/wowskarma.app/src/app/pages/post/list/list-latest.component.ts
index 21f436bc..cbabc6f9 100644
--- a/wowskarma.app/src/app/pages/post/list/list-latest.component.ts
+++ b/wowskarma.app/src/app/pages/post/list/list-latest.component.ts
@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component, inject} from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
 import { BehaviorSubject, combineLatest, Observable, of } from "rxjs";
 import { map, debounceTime, distinctUntilChanged, shareReplay, startWith, tap } from "rxjs/operators";
 import { PlayerPostDto } from "src/app/services/api/models/player-post-dto";
@@ -7,14 +7,26 @@ import { PostService } from "src/app/services/api/services/post.service";
 import { AuthService } from "src/app/services/auth.service";
 import { PostsHub } from "src/app/services/hubs/posts-hub.service";
 import { filterNotNull, filterPartials, mergeAndCache, shareReplayRefCount, startFrom, switchMapCatchError, tapAny, tapPageInfoHeaders } from "../../../shared/rxjs-operators";
+import { AsyncPipe, NgForOf, NgIf } from "@angular/common";
+import { NgbPagination } from "@ng-bootstrap/ng-bootstrap";
+import { PostComponent } from "../../../shared/post/post.component";
 
 export declare type HasId = { id: string };
 export declare type PostChange = { mode: "new" | "edited" | "deleted", post: HasId };
 
 
 @Component({
+  standalone: true,
   templateUrl: "./list-latest.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    ReactiveFormsModule,
+    AsyncPipe,
+    NgbPagination,
+    NgIf,
+    PostComponent,
+    NgForOf
+  ]
 })
 export class ListLatestComponent {
   public authService: AuthService = inject(AuthService);
diff --git a/wowskarma.app/src/app/pages/post/view/view-post.component.ts b/wowskarma.app/src/app/pages/post/view/view-post.component.ts
index 9093700f..7e447c31 100644
--- a/wowskarma.app/src/app/pages/post/view/view-post.component.ts
+++ b/wowskarma.app/src/app/pages/post/view/view-post.component.ts
@@ -8,10 +8,26 @@ import { PostService } from "../../../services/api/services/post.service";
 import { PostsHub } from "../../../services/hubs/posts-hub.service";
 import { filterNotNull, mapApiModelState, reloadWhen, routeParam, shareReplayRefCount, switchMapCatchError } from "../../../shared/rxjs-operators";
 import { toObservable } from "@angular/core/rxjs-interop";
+import { PostComponent } from "../../../shared/post/post.component";
+import { AsyncPipe, NgIf } from "@angular/common";
+import { MarkdownComponent } from "ngx-markdown";
+import { TeamRosterComponent } from "../../../shared/replay/team-roster/team-roster.component";
+import { ChatLogComponent } from "../../../shared/replay/chat-log/chat-log.component";
+import { NotFoundComponent } from "../../fallbacks/not-found/not-found.component";
 
 @Component({
-    templateUrl: "./view-post.component.html",
-    changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  templateUrl: "./view-post.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    PostComponent,
+    AsyncPipe,
+    MarkdownComponent,
+    NgIf,
+    TeamRosterComponent,
+    ChatLogComponent,
+    NotFoundComponent
+  ]
 })
 export class ViewPostComponent implements  OnDestroy {
     private route: ActivatedRoute = inject(ActivatedRoute);
diff --git a/wowskarma.app/src/app/pages/settings/settings.component.ts b/wowskarma.app/src/app/pages/settings/settings.component.ts
index 000d28ee..e04bb1d7 100644
--- a/wowskarma.app/src/app/pages/settings/settings.component.ts
+++ b/wowskarma.app/src/app/pages/settings/settings.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, inject, signal } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { FormBuilder, FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { BehaviorSubject, tap } from "rxjs";
 import { map } from "rxjs/operators";
@@ -7,10 +7,19 @@ import "src/app/services/extensions";
 import { ProfileService } from "../../services/api/services/profile.service";
 import { AuthService } from "../../services/auth.service";
 import { SeedTokenChangeComponent } from "../../shared/modals/seed-token-change/seed-token-change.component";
+import { AsyncPipe, DatePipe, NgIf } from "@angular/common";
 
 @Component({
-    templateUrl: "./settings.component.html",
-    changeDetection: ChangeDetectionStrategy.Default,
+  standalone: true,
+  templateUrl: "./settings.component.html",
+  changeDetection: ChangeDetectionStrategy.Default,
+  imports: [
+    AsyncPipe,
+    ReactiveFormsModule,
+    FormsModule,
+    DatePipe,
+    NgIf
+  ]
 })
 export class SettingsComponent {
     public authService: AuthService = inject(AuthService);
diff --git a/wowskarma.app/src/app/services/pipes/bypass-html.pipe.ts b/wowskarma.app/src/app/services/pipes/bypass-html.pipe.ts
index e5fe08c6..ff7b4dea 100644
--- a/wowskarma.app/src/app/services/pipes/bypass-html.pipe.ts
+++ b/wowskarma.app/src/app/services/pipes/bypass-html.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from "@angular/core";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 
 @Pipe({
+    standalone: true,
     name: "bypassHtml",
 })
 export class BypassHtmlPipe implements PipeTransform {
diff --git a/wowskarma.app/src/app/services/pipes/chat-message-channel.pipe.ts b/wowskarma.app/src/app/services/pipes/chat-message-channel.pipe.ts
index 9f9bede4..0495cc33 100644
--- a/wowskarma.app/src/app/services/pipes/chat-message-channel.pipe.ts
+++ b/wowskarma.app/src/app/services/pipes/chat-message-channel.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { ReplayChatMessageDto } from "../api/models/replay-chat-message-dto";
 
 @Pipe({
+  standalone: true,
   name: 'chatMessageChannel'
 })
 export class ChatMessageChannelPipe implements PipeTransform {
diff --git a/wowskarma.app/src/app/services/pipes/colorHex.pipe.ts b/wowskarma.app/src/app/services/pipes/colorHex.pipe.ts
index 4f053ed1..aff083d5 100644
--- a/wowskarma.app/src/app/services/pipes/colorHex.pipe.ts
+++ b/wowskarma.app/src/app/services/pipes/colorHex.pipe.ts
@@ -1,6 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
+  standalone: true,
   name: 'colorHex'
 })
 export class ColorHexPipe implements PipeTransform {
diff --git a/wowskarma.app/src/app/services/pipes/karma-color.pipe.ts b/wowskarma.app/src/app/services/pipes/karma-color.pipe.ts
index 7711a5b8..e0f8759e 100644
--- a/wowskarma.app/src/app/services/pipes/karma-color.pipe.ts
+++ b/wowskarma.app/src/app/services/pipes/karma-color.pipe.ts
@@ -3,14 +3,15 @@ import { PostFlairs } from "../api/models/post-flairs";
 import { getKarmaColor, getPostBorderColor } from "../helpers";
 
 @Pipe({
-    name: "karmaColor",
+  standalone: true,
+  name: "karmaColor",
 })
 export class KarmaColorPipe implements PipeTransform {
-    transform(value: number | undefined | null): "success" | "danger" | "warning" {
-        if (typeof value === "number") {
-            return getKarmaColor(value);
-        }
-
-        return "warning";
+  transform(value: number | undefined | null): "success" | "danger" | "warning" {
+    if (typeof value === "number") {
+      return getKarmaColor(value);
     }
+
+    return "warning";
+  }
 }
diff --git a/wowskarma.app/src/app/services/pipes/mod-action-type-display.pipe.ts b/wowskarma.app/src/app/services/pipes/mod-action-type-display.pipe.ts
index 79960ce4..92c9d363 100644
--- a/wowskarma.app/src/app/services/pipes/mod-action-type-display.pipe.ts
+++ b/wowskarma.app/src/app/services/pipes/mod-action-type-display.pipe.ts
@@ -4,15 +4,16 @@ import { PostFlairs } from "../api/models/post-flairs";
 import { getKarmaColor, getPostBorderColor } from "../helpers";
 
 @Pipe({
-    name: "modActionTypeDisplay",
+  standalone: true,
+  name: "modActionTypeDisplay",
 })
 export class ModActionTypeDisplayPipe implements PipeTransform {
-    transform(value: ModActionType) {
-      switch (value) {
-        case ModActionType.Update:
-          return {text: "Edit", color: "text-warning"};
-        case ModActionType.Delete:
-          return {text: "Deletion", color: "text-danger"};
-      }
+  transform(value: ModActionType) {
+    switch (value) {
+      case ModActionType.Update:
+        return {text: "Edit", color: "text-warning"};
+      case ModActionType.Delete:
+        return {text: "Deletion", color: "text-danger"};
     }
+  }
 }
diff --git a/wowskarma.app/src/app/services/pipes/post-border-color.pipe.ts b/wowskarma.app/src/app/services/pipes/post-border-color.pipe.ts
index 0f9f5ab8..12c97b1a 100644
--- a/wowskarma.app/src/app/services/pipes/post-border-color.pipe.ts
+++ b/wowskarma.app/src/app/services/pipes/post-border-color.pipe.ts
@@ -3,11 +3,12 @@ import { PostFlairs } from "../api/models/post-flairs";
 import { getPostBorderColor } from "../helpers";
 
 @Pipe({
+  standalone: true,
   name: 'postBorderColor'
 })
 export class PostBorderColorPipe implements PipeTransform {
 
   transform(value: PostFlairs | number): unknown {
-      return getPostBorderColor({ flairs: value });
+    return getPostBorderColor({flairs: value});
   }
 }
diff --git a/wowskarma.app/src/app/services/pipes/wows-numbers-clan-link.pipe.ts b/wowskarma.app/src/app/services/pipes/wows-numbers-clan-link.pipe.ts
index cf4c32e8..f626e21e 100644
--- a/wowskarma.app/src/app/services/pipes/wows-numbers-clan-link.pipe.ts
+++ b/wowskarma.app/src/app/services/pipes/wows-numbers-clan-link.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { getWowsNumbersClanLink } from "../helpers";
 
 @Pipe({
+  standalone: true,
   name: 'wowsNumbersClanLink'
 })
 export class WowsNumbersClanLinkPipe implements PipeTransform {
diff --git a/wowskarma.app/src/app/services/pipes/wows-numbers-player-link.pipe.ts b/wowskarma.app/src/app/services/pipes/wows-numbers-player-link.pipe.ts
index e099d4bb..adac6576 100644
--- a/wowskarma.app/src/app/services/pipes/wows-numbers-player-link.pipe.ts
+++ b/wowskarma.app/src/app/services/pipes/wows-numbers-player-link.pipe.ts
@@ -2,12 +2,13 @@ import { Pipe, PipeTransform } from "@angular/core";
 import { getWowsNumbersPlayerLink } from "../helpers";
 
 @Pipe({
-    name: "wowsNumbersPlayerLink",
+  standalone: true,
+  name: "wowsNumbersPlayerLink",
 })
 export class WowsNumbersPlayerLinkPipe implements PipeTransform {
 
-    transform(player: { id?: number, username?: string | null }) {
-        return getWowsNumbersPlayerLink({ id: player.id!, username: player.username! });
-    }
+  transform(player: { id?: number, username?: string | null }) {
+    return getWowsNumbersPlayerLink({id: player.id!, username: player.username!});
+  }
 
 }
diff --git a/wowskarma.app/src/app/shared/components/html-loader/html-loader.component.ts b/wowskarma.app/src/app/shared/components/html-loader/html-loader.component.ts
index 21ff211e..8096527e 100644
--- a/wowskarma.app/src/app/shared/components/html-loader/html-loader.component.ts
+++ b/wowskarma.app/src/app/shared/components/html-loader/html-loader.component.ts
@@ -3,11 +3,16 @@ import { ChangeDetectionStrategy, Component, computed, inject, input } from "@an
 import { DomSanitizer } from "@angular/platform-browser";
 import { ActivatedRoute } from "@angular/router";
 import { firstValueFrom } from "rxjs";
+import { AsyncPipe } from "@angular/common";
 
 @Component({
-    selector: "html-loader",
-    template: '<div [innerHtml]="content() | async"></div>',
-    changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  selector: "html-loader",
+  template: '<div [innerHtml]="content() | async"></div>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    AsyncPipe
+  ]
 })
 export class HtmlLoaderComponent {
     // No requirement, as it can also be loaded from snapshot data.
@@ -20,11 +25,11 @@ export class HtmlLoaderComponent {
     // Get the HTML content from the server, at the path specified by the path$ input.
     content = computed(async () => {
         const path = this.path() || this.route.snapshot.data["path"];
-        
+
         if (!path) {
             return null;
         }
-        
+
         let html = await firstValueFrom(this.http.get(path, {responseType: "text"}));
         return this.sanitizer.bypassSecurityTrustHtml(html);
     });
diff --git a/wowskarma.app/src/app/shared/components/icons/clan-rank/clan-rank.component.ts b/wowskarma.app/src/app/shared/components/icons/clan-rank/clan-rank.component.ts
index 62e7f07e..b1171ca0 100644
--- a/wowskarma.app/src/app/shared/components/icons/clan-rank/clan-rank.component.ts
+++ b/wowskarma.app/src/app/shared/components/icons/clan-rank/clan-rank.component.ts
@@ -1,10 +1,15 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { ClanRole } from 'src/app/services/api/models/clan-role';
+import { NgbTooltip } from "@ng-bootstrap/ng-bootstrap";
 
 @Component({
+  standalone: true,
   selector: 'icon-clan-rank',
   template: `<i [className]="clanRankIconName" [ngbTooltip]="clanRankDisplayName" placement="bottom" [title]="clanRankDisplayName"></i>`,
   styleUrls: ['./clan-rank.component.scss'],
+  imports: [
+    NgbTooltip
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ClanRankComponent {
diff --git a/wowskarma.app/src/app/shared/components/icons/user-roles/user-roles.component.ts b/wowskarma.app/src/app/shared/components/icons/user-roles/user-roles.component.ts
index 6f11e1eb..6faf0c2d 100644
--- a/wowskarma.app/src/app/shared/components/icons/user-roles/user-roles.component.ts
+++ b/wowskarma.app/src/app/shared/components/icons/user-roles/user-roles.component.ts
@@ -1,9 +1,14 @@
 import { ChangeDetectionStrategy, Component, input, Input } from '@angular/core';
+import { NgbTooltip } from "@ng-bootstrap/ng-bootstrap";
 
 @Component({
+  standalone: true,
   selector: 'icon-user-roles',
   templateUrl: './user-roles.component.html',
   styleUrls: ['./user-roles.component.scss'],
+  imports: [
+    NgbTooltip
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class UserRolesComponent {
diff --git a/wowskarma.app/src/app/shared/components/minmax-metric/min-max-metric.component.ts b/wowskarma.app/src/app/shared/components/minmax-metric/min-max-metric.component.ts
index 63cda7f6..ad938177 100644
--- a/wowskarma.app/src/app/shared/components/minmax-metric/min-max-metric.component.ts
+++ b/wowskarma.app/src/app/shared/components/minmax-metric/min-max-metric.component.ts
@@ -1,10 +1,17 @@
-import { ChangeDetectionStrategy, Component, input, Input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { NgbTooltip } from "@ng-bootstrap/ng-bootstrap";
+import { KarmaColorPipe } from "../../../services/pipes/karma-color.pipe";
 
 @Component({
-    selector: "minmax-metric",
-    templateUrl: "./min-max-metric.component.html",
-    styleUrls: ["./min-max-metric.component.scss"],
-    changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  selector: "minmax-metric",
+  templateUrl: "./min-max-metric.component.html",
+  styleUrls: ["./min-max-metric.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NgbTooltip,
+    KarmaColorPipe
+  ]
 })
 export class MinMaxMetricComponent {
     metric = input<MinMaxMetricObject>();
@@ -13,4 +20,4 @@ export class MinMaxMetricComponent {
     constructor() { }
 }
 
-export type MinMaxMetricObject = { total: any; min: number; max: number };
\ No newline at end of file
+export type MinMaxMetricObject = { total: any; min: number; max: number };
diff --git a/wowskarma.app/src/app/shared/components/player-namelink/player-namelink.component.ts b/wowskarma.app/src/app/shared/components/player-namelink/player-namelink.component.ts
index 5980f2b4..2bbf2726 100644
--- a/wowskarma.app/src/app/shared/components/player-namelink/player-namelink.component.ts
+++ b/wowskarma.app/src/app/shared/components/player-namelink/player-namelink.component.ts
@@ -1,10 +1,19 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { AccountClanListingDto } from 'src/app/services/api/models/account-clan-listing-dto';
 import { ClanListingDto } from 'src/app/services/api/models/clan-listing-dto';
+import { RouterLink } from "@angular/router";
+import { NgIf } from "@angular/common";
+import { ColorHexPipe } from "../../../services/pipes/colorHex.pipe";
 
 @Component({
+  standalone: true,
   selector: 'player-namelink',
   templateUrl: './player-namelink.component.html',
+  imports: [
+    RouterLink,
+    NgIf,
+    ColorHexPipe
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PlayerNamelinkComponent {
diff --git a/wowskarma.app/src/app/shared/directives/control-extensions.directive.ts b/wowskarma.app/src/app/shared/directives/control-extensions.directive.ts
index 040fd923..6dad993d 100644
--- a/wowskarma.app/src/app/shared/directives/control-extensions.directive.ts
+++ b/wowskarma.app/src/app/shared/directives/control-extensions.directive.ts
@@ -2,6 +2,7 @@ import { Directive, ElementRef, Host, HostBinding, HostListener, Input } from "@
 import { FormControl, FormControlDirective } from "@angular/forms";
 
 @Directive({
+  standalone: true,
   selector: '[formControlExtensions]'
 })
 export class ControlExtensionsDirective {
diff --git a/wowskarma.app/src/app/shared/form-errors/form-errors.component.html b/wowskarma.app/src/app/shared/form-errors/form-errors.component.html
index 289ad712..6ae87dae 100644
--- a/wowskarma.app/src/app/shared/form-errors/form-errors.component.html
+++ b/wowskarma.app/src/app/shared/form-errors/form-errors.component.html
@@ -1,17 +1,17 @@
 @if (control()?.dirty) {
-    @if (control()?.errors; as errors) {
-        <small class="text-danger">
-            <ng-container *ngIf="errors['required']">This field is required.</ng-container>
-            <ng-container *ngIf="errors['minlength'] as e">The value must be at least {{e['requiredLength']}} characters long.</ng-container>
-            <ng-container *ngIf="errors['maxlength'] as e">The value must be at most {{e['requiredLength']}} characters long.</ng-container>
-            <ng-container *ngIf="errors['pattern']">The value doesn't follow the required pattern.</ng-container>
+  @if (control()?.errors; as errors) {
+    <small class="text-danger">
+      <ng-container *ngIf="errors['required']">This field is required.</ng-container>
+      <ng-container *ngIf="errors['minlength'] as e">The value must be at least {{ e['requiredLength'] }} characters long.</ng-container>
+      <ng-container *ngIf="errors['maxlength'] as e">The value must be at most {{ e['requiredLength'] }} characters long.</ng-container>
+      <ng-container *ngIf="errors['pattern']">The value doesn't follow the required pattern.</ng-container>
 
-            <ng-container *ngIf="errors['replayFile'] as re">
-                <ng-container *ngIf="re['required']">This field is required.</ng-container>
-                <ng-container *ngIf="re['maxsize'] as maxsize">The file size must be at most {{formatBytesSize(maxsize)}}.</ng-container>
-                <ng-container *ngIf="re['mimetype']">The format of the specified file is not supported.</ng-container>
-                <ng-container *ngIf="re['extension'] as extension">The file extension must be <span class="font-monospace">{{extension}}</span>.</ng-container>
-            </ng-container>
-        </small>
-    }
+      <ng-container *ngIf="errors['replayFile'] as re">
+        <ng-container *ngIf="re['required']">This field is required.</ng-container>
+        <ng-container *ngIf="re['maxsize'] as maxsize">The file size must be at most {{ formatBytesSize(maxsize) }}.</ng-container>
+        <ng-container *ngIf="re['mimetype']">The format of the specified file is not supported.</ng-container>
+        <ng-container *ngIf="re['extension'] as extension">The file extension must be <span class="font-monospace">{{ extension }}</span>.</ng-container>
+      </ng-container>
+    </small>
+  }
 }
diff --git a/wowskarma.app/src/app/shared/form-errors/form-errors.component.ts b/wowskarma.app/src/app/shared/form-errors/form-errors.component.ts
index 0700567f..abae716e 100644
--- a/wowskarma.app/src/app/shared/form-errors/form-errors.component.ts
+++ b/wowskarma.app/src/app/shared/form-errors/form-errors.component.ts
@@ -1,15 +1,20 @@
 import { Component, input, Input } from "@angular/core";
 import { FormControl } from "@angular/forms";
 import { formatBytesSize } from "../../services/helpers";
+import { NgIf } from "@angular/common";
 
 @Component({
-    selector: "form-errors",
-    templateUrl: "./form-errors.component.html",
+  standalone: true,
+  selector: "form-errors",
+  templateUrl: "./form-errors.component.html",
+  imports: [
+    NgIf
+  ]
 })
 export class FormErrorsComponent {
-    control = input<FormControl>();
+  control = input<FormControl>();
 
-    formatBytesSize(bytesSize: number) {
-        return formatBytesSize(bytesSize);
-    }
-}
\ No newline at end of file
+  formatBytesSize(bytesSize: number) {
+    return formatBytesSize(bytesSize);
+  }
+}
diff --git a/wowskarma.app/src/app/shared/layout/footer/footer.component.scss b/wowskarma.app/src/app/shared/layout/footer/footer.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/wowskarma.app/src/app/shared/layout/footer/footer.component.ts b/wowskarma.app/src/app/shared/layout/footer/footer.component.ts
index ef9da2ed..b157659d 100644
--- a/wowskarma.app/src/app/shared/layout/footer/footer.component.ts
+++ b/wowskarma.app/src/app/shared/layout/footer/footer.component.ts
@@ -5,11 +5,15 @@ import { anyTrue, shareReplayRefCount } from 'src/app/shared/rxjs-operators';
 import { environment } from "src/environments/environment";
 import { ApiRegion } from "src/app/models/ApiRegion";
 import { AppConfigService } from "src/app/services/app-config.service";
+import { RouterLink } from "@angular/router";
 
 @Component({
+  standalone: true,
   selector: "app-footer",
   templateUrl: "./footer.component.html",
-  styleUrls: ["./footer.component.scss"],
+  imports: [
+    RouterLink
+  ]
 })
 export class FooterComponent {
 
diff --git a/wowskarma.app/src/app/shared/layout/layout.component.html b/wowskarma.app/src/app/shared/layout/layout.component.html
index 38ff9f05..3b3c667c 100644
--- a/wowskarma.app/src/app/shared/layout/layout.component.html
+++ b/wowskarma.app/src/app/shared/layout/layout.component.html
@@ -1,16 +1,16 @@
 <header>
-    <app-navbar></app-navbar>
+    <app-navbar />
 </header>
 
 <div class="container-lg" style="margin-top: 100px !important">
     <div id="psa-header" role="alert" class="mb-5">
-        <html-loader path="/assets/psa.global.html"></html-loader>
-        <html-loader path="/assets/psa.{{currentRegion.toString().toLocaleLowerCase()}}.html"></html-loader>
+        <html-loader path="/assets/psa.global.html" />
+        <html-loader path="/assets/psa.{{currentRegion.toString().toLocaleLowerCase()}}.html" />
     </div>
 
     <main role="main" class="my-5">
-        <router-outlet></router-outlet>
+        <router-outlet />
     </main>
 </div>
 
-<app-footer></app-footer>
+<app-footer />
diff --git a/wowskarma.app/src/app/shared/layout/layout.component.ts b/wowskarma.app/src/app/shared/layout/layout.component.ts
index 4ee88a92..6ec2679f 100644
--- a/wowskarma.app/src/app/shared/layout/layout.component.ts
+++ b/wowskarma.app/src/app/shared/layout/layout.component.ts
@@ -1,10 +1,22 @@
 import {Component, inject, OnInit} from '@angular/core';
 import { AppConfigService } from "../../services/app-config.service";
+import { NavbarComponent } from "./navbar/navbar.component";
+import { HtmlLoaderComponent } from "../components/html-loader/html-loader.component";
+import { RouterOutlet } from "@angular/router";
+import { FooterComponent } from "./footer/footer.component";
 
 @Component({
+  standalone: true,
   selector: 'app-layout',
   templateUrl: './layout.component.html',
-  styleUrls: ['./layout.component.scss']
+  styleUrls: ['./layout.component.scss'],
+  imports: [
+    NavbarComponent,
+    HtmlLoaderComponent,
+    RouterOutlet,
+    FooterComponent
+
+  ]
 })
 export class LayoutComponent {
   private appConfigService: AppConfigService = inject(AppConfigService);
diff --git a/wowskarma.app/src/app/shared/layout/navbar/nav-auth/nav-auth.component.html b/wowskarma.app/src/app/shared/layout/navbar/nav-auth/nav-auth.component.html
index f64f27a6..b475db92 100644
--- a/wowskarma.app/src/app/shared/layout/navbar/nav-auth/nav-auth.component.html
+++ b/wowskarma.app/src/app/shared/layout/navbar/nav-auth/nav-auth.component.html
@@ -3,7 +3,7 @@
     <li class="navbar-text text-white me-3">Welcome, {{user.username}}.</li>
 
     <li class="nav-item">
-      <a class="nav-link" [routerLink]="['/player', user.id +','+ user.username]" routerLinkActive="active">Profile</a>
+      <a class="nav-link" [routerLink]="['/player', user.id + ',' + user.username]" routerLinkActive="active">Profile</a>
     </li>
 
     <li class="nav-item"><a class="nav-link" routerLink="/settings" routerLinkActive="active">Settings</a></li>
diff --git a/wowskarma.app/src/app/shared/layout/navbar/nav-auth/nav-auth.component.ts b/wowskarma.app/src/app/shared/layout/navbar/nav-auth/nav-auth.component.ts
index d1c87ccd..bda6a57a 100644
--- a/wowskarma.app/src/app/shared/layout/navbar/nav-auth/nav-auth.component.ts
+++ b/wowskarma.app/src/app/shared/layout/navbar/nav-auth/nav-auth.component.ts
@@ -1,13 +1,20 @@
 import {ChangeDetectionStrategy, Component, inject} from "@angular/core";
-import { NavigationEnd, Router } from "@angular/router";
+import { NavigationEnd, Router, RouterLink, RouterLinkActive } from "@angular/router";
 import { shareReplay, startWith } from "rxjs";
 import { filter, map } from "rxjs/operators";
 import { AuthService } from "src/app/services/auth.service";
+import { AsyncPipe } from "@angular/common";
 
 @Component({
+  standalone: true,
   selector: "navbar-auth",
   templateUrl: "./nav-auth.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    AsyncPipe,
+    RouterLink,
+    RouterLinkActive
+  ]
 })
 export class NavAuthComponent {
   public authService: AuthService = inject(AuthService);
diff --git a/wowskarma.app/src/app/shared/layout/navbar/navbar.component.html b/wowskarma.app/src/app/shared/layout/navbar/navbar.component.html
index 3d74f906..227cab02 100644
--- a/wowskarma.app/src/app/shared/layout/navbar/navbar.component.html
+++ b/wowskarma.app/src/app/shared/layout/navbar/navbar.component.html
@@ -40,7 +40,7 @@
         -->
 
         <li *ngIf="authService.userInfo$ | async" class="nav-item ml-3 msl-5">
-          <app-notifications-button></app-notifications-button>
+          <app-notifications-button />
         </li>
       </ul>
     </div>
diff --git a/wowskarma.app/src/app/shared/layout/navbar/navbar.component.scss b/wowskarma.app/src/app/shared/layout/navbar/navbar.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/wowskarma.app/src/app/shared/layout/navbar/navbar.component.ts b/wowskarma.app/src/app/shared/layout/navbar/navbar.component.ts
index 01244b6d..5d561ce6 100644
--- a/wowskarma.app/src/app/shared/layout/navbar/navbar.component.ts
+++ b/wowskarma.app/src/app/shared/layout/navbar/navbar.component.ts
@@ -1,11 +1,25 @@
 import { Component, inject } from "@angular/core";
 import { AuthService } from "src/app/services/auth.service";
 import { environment } from "../../../../environments/environment";
+import { RouterLink, RouterLinkActive } from "@angular/router";
+import { AsyncPipe, NgIf } from "@angular/common";
+import { NgbCollapse } from "@ng-bootstrap/ng-bootstrap";
+import { NavAuthComponent } from "./nav-auth/nav-auth.component";
+import { NotificationsButtonComponent } from "./notifications-button/notifications-button.component";
 
 @Component({
+  standalone: true,
   selector: "app-navbar",
   templateUrl: "./navbar.component.html",
-  styleUrls: ["./navbar.component.scss"],
+  imports: [
+    RouterLink,
+    RouterLinkActive,
+    AsyncPipe,
+    NgbCollapse,
+    NavAuthComponent,
+    NotificationsButtonComponent,
+    NgIf
+  ]
 })
 export class NavbarComponent {
   public isCollapsed = true;
diff --git a/wowskarma.app/src/app/shared/layout/navbar/notifications-button/notifications-button.component.html b/wowskarma.app/src/app/shared/layout/navbar/notifications-button/notifications-button.component.html
index d72e9506..32f5dc3b 100644
--- a/wowskarma.app/src/app/shared/layout/navbar/notifications-button/notifications-button.component.html
+++ b/wowskarma.app/src/app/shared/layout/navbar/notifications-button/notifications-button.component.html
@@ -1,6 +1,6 @@
-<app-notifications-menu #menu (notificationsCount$)="count$.next($event)"></app-notifications-menu>
+<app-notifications-menu #menu (notificationsCount$)="count$.next($event)" />
 
 <button class="btn btn-link text-light dropdown-toggle" type="button" id="notifications-dropdown" (click)="menu.openMenu()">
     <i class="bi bi-bell-fill"></i>
     <span *ngIf="count$ | async as count" class="badge bg-primary rounded-pill ms-2 me-1">{{count}}</span>
-</button>
\ No newline at end of file
+</button>
diff --git a/wowskarma.app/src/app/shared/layout/navbar/notifications-button/notifications-button.component.ts b/wowskarma.app/src/app/shared/layout/navbar/notifications-button/notifications-button.component.ts
index 112a9816..99486b22 100644
--- a/wowskarma.app/src/app/shared/layout/navbar/notifications-button/notifications-button.component.ts
+++ b/wowskarma.app/src/app/shared/layout/navbar/notifications-button/notifications-button.component.ts
@@ -1,10 +1,18 @@
 import { ChangeDetectionStrategy, Component } from "@angular/core";
 import { BehaviorSubject } from "rxjs";
+import { NotificationsMenuComponent } from "../../../notifications/notifications-menu/notifications-menu.component";
+import { AsyncPipe, NgIf } from "@angular/common";
 
 @Component({
-    selector: "app-notifications-button",
-    templateUrl: "./notifications-button.component.html",
-    changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  selector: "app-notifications-button",
+  templateUrl: "./notifications-button.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NotificationsMenuComponent,
+    AsyncPipe,
+    NgIf
+  ]
 })
 export class NotificationsButtonComponent {
     count$ = new BehaviorSubject(0);
diff --git a/wowskarma.app/src/app/shared/modals/post-editor/post-editor.component.html b/wowskarma.app/src/app/shared/modals/post-editor/post-editor.component.html
index dc658a7b..5e84a2b5 100644
--- a/wowskarma.app/src/app/shared/modals/post-editor/post-editor.component.html
+++ b/wowskarma.app/src/app/shared/modals/post-editor/post-editor.component.html
@@ -25,7 +25,7 @@ <h4 class="modal-title">{{post.id ? "Edit" : "Create"}} Post</h4>
     <div class="form-group mb-3">
       <div class="d-flex justify-content-between" #contentError>
         <label for="content" class="mb-2">Content</label>
-        <form-errors [control]="form.controls.content"></form-errors>
+        <form-errors [control]="form.controls.content" />
       </div>
 
       <textarea id="content" required minlength="50" maxlength="2000" [formControl]="form.controls.content"
@@ -92,8 +92,7 @@ <h4 class="mb-2">Replay File</h4>
       >
 
       <label class="form-check-label">
-        I hereby affirm to have read and followed the <a [routerLink]="'/guidelines'" target="_blank">Posting
-        Guidelines</a>.
+        I hereby affirm to have read and followed the <a [routerLink]="'/guidelines'" target="_blank">Posting Guidelines</a>.
       </label>
     </div>
 
diff --git a/wowskarma.app/src/app/shared/modals/post-editor/post-editor.component.ts b/wowskarma.app/src/app/shared/modals/post-editor/post-editor.component.ts
index 29a33063..50bdcc44 100644
--- a/wowskarma.app/src/app/shared/modals/post-editor/post-editor.component.ts
+++ b/wowskarma.app/src/app/shared/modals/post-editor/post-editor.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, HostListener, Input } from "@angular/core";
-import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
+import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
 import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
 import { AccountClanListingDto } from "src/app/services/api/models/account-clan-listing-dto";
 import { PlayerPostDto } from "src/app/services/api/models/player-post-dto";
@@ -9,11 +9,24 @@ import { PostService } from "src/app/services/api/services/post.service";
 import { markTouchedDirtyAndValidate, TypedFormControls, TypedFormGroup } from "src/app/services/helpers";
 import { parseFlairsEnum, toEnum } from "src/app/services/metricsHelpers";
 import * as ReplayValidators from "../../validation/replay-validators";
+import { FormErrorsComponent } from "../../form-errors/form-errors.component";
+import { ControlExtensionsDirective } from "../../directives/control-extensions.directive";
+import { NgClass } from "@angular/common";
+import { RouterLink } from "@angular/router";
 
 @Component({
-    selector: "post-editor",
-    templateUrl: "./post-editor.component.html",
-    changeDetection: ChangeDetectionStrategy.Default,
+  standalone: true,
+  selector: "post-editor",
+  templateUrl: "./post-editor.component.html",
+  changeDetection: ChangeDetectionStrategy.Default,
+  imports: [
+    FormsModule,
+    FormErrorsComponent,
+    ReactiveFormsModule,
+    ControlExtensionsDirective,
+    NgClass,
+    RouterLink
+  ]
 })
 export class PostEditorComponent {
     @Input() post!: PlayerPostEditorDto;
diff --git a/wowskarma.app/src/app/shared/modals/post-mod-delete/post-mod-delete.component.html b/wowskarma.app/src/app/shared/modals/post-mod-delete/post-mod-delete.component.html
index 658f0d2e..ce0ff51a 100644
--- a/wowskarma.app/src/app/shared/modals/post-mod-delete/post-mod-delete.component.html
+++ b/wowskarma.app/src/app/shared/modals/post-mod-delete/post-mod-delete.component.html
@@ -1,24 +1,26 @@
 <!-- Modal Header -->
 <div class="modal-header">
-    <h4 class="modal-title">Remove Post by Moderation ?</h4>
+  <h4 class="modal-title">Remove Post by Moderation ?</h4>
 </div>
 
 <form #f="ngForm" (ngSubmit)="f.form.valid && onSubmit()">
-    <!-- Modal body -->
-    <div class="modal-body">
-        <div class="d-flex justify-content-between" #reasonError>
-            <label for="reason" class="mb-2">Reason</label>
-            <form-errors [control]="form.controls.reason"></form-errors>
-        </div>
-        <textarea name="reason" id="reason" class="form-control"
-                  [formControl]="form.controls.reason"
-                  [formControlExtensions]="reasonError"
-                  style="height: 10rem;"></textarea>
+  <!-- Modal body -->
+  <div class="modal-body">
+    <div class="d-flex justify-content-between" #reasonError>
+      <label for="reason" class="mb-2">Reason</label>
+      <form-errors [control]="form.controls.reason" />
     </div>
+    <textarea
+      name="reason" id="reason" class="form-control"
+      [formControl]="form.controls.reason"
+      [formControlExtensions]="reasonError"
+      style="height: 10rem;"
+    ></textarea>
+  </div>
 
-    <!-- Modal footer -->
-    <div class="modal-footer">
-        <button type="button" class="btn btn-secondary px-3" (click)="this.modal.close()">Cancel</button>
-        <button type="submit" class="btn btn-danger px-3">Delete</button>
-    </div>
-</form>
\ No newline at end of file
+  <!-- Modal footer -->
+  <div class="modal-footer">
+    <button type="button" class="btn btn-secondary px-3" (click)="this.modal.close()">Cancel</button>
+    <button type="submit" class="btn btn-danger px-3">Delete</button>
+  </div>
+</form>
diff --git a/wowskarma.app/src/app/shared/modals/post-mod-delete/post-mod-delete.component.ts b/wowskarma.app/src/app/shared/modals/post-mod-delete/post-mod-delete.component.ts
index 1dee74ee..569d4c66 100644
--- a/wowskarma.app/src/app/shared/modals/post-mod-delete/post-mod-delete.component.ts
+++ b/wowskarma.app/src/app/shared/modals/post-mod-delete/post-mod-delete.component.ts
@@ -1,41 +1,51 @@
 import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
-import { FormBuilder, Validators } from "@angular/forms";
+import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
 import { NgbModal, NgbModalRef } from "@ng-bootstrap/ng-bootstrap";
 import { ModActionType } from "../../../services/api/models";
 import { ModActionService } from "../../../services/api/services/mod-action.service";
+import { FormErrorsComponent } from "../../form-errors/form-errors.component";
+import { ControlExtensionsDirective } from "../../directives/control-extensions.directive";
 
 @Component({
-    selector: "app-post-mod-delete",
-    templateUrl: "./post-mod-delete.component.html",
-    styleUrls: ["./post-mod-delete.component.scss"],
-    changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  selector: "app-post-mod-delete",
+  templateUrl: "./post-mod-delete.component.html",
+  styleUrls: ["./post-mod-delete.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    FormsModule,
+    FormErrorsComponent,
+    ReactiveFormsModule,
+    ControlExtensionsDirective
+  ]
 })
 export class PostModDeleteComponent {
-    @Input() form = new FormBuilder().nonNullable.group({
-        postId: "",
-        // actionType: ModActionType.$0,
-        reason: ["", [Validators.required, Validators.maxLength(1000)]]
-    });
-    @Input() modal!: NgbModalRef;
+  @Input() form = new FormBuilder().nonNullable.group({
+    postId: "",
+    // actionType: ModActionType.$0,
+    reason: ["", [Validators.required, Validators.maxLength(1000)]]
+  });
+  @Input() modal!: NgbModalRef;
 
-    constructor(private modActionService: ModActionService) {}
+  constructor(private modActionService: ModActionService) {
+  }
 
-    static OpenModal(modalService: NgbModal, post: { id?: string | null }) {
-        const modalRef = modalService.open(PostModDeleteComponent, {});
-        modalRef.componentInstance.modal = modalRef;
-        modalRef.componentInstance.form.controls.postId.patchValue(post.id);
-    }
+  static OpenModal(modalService: NgbModal, post: { id?: string | null }) {
+    const modalRef = modalService.open(PostModDeleteComponent, {});
+    modalRef.componentInstance.modal = modalRef;
+    modalRef.componentInstance.form.controls.postId.patchValue(post.id);
+  }
 
-    onSubmit() {
-        this.modActionService.apiModActionPost({
-            body: {
-                postId: this.form.value.postId as string,
-                reason: this.form.value.reason as string,
-                actionType: ModActionType.Delete,
-            },
-        }).subscribe(() => {
-            this.modal.close();
-            window.location.reload();
-        });
-    }
+  onSubmit() {
+    this.modActionService.apiModActionPost({
+      body: {
+        postId: this.form.value.postId as string,
+        reason: this.form.value.reason as string,
+        actionType: ModActionType.Delete,
+      },
+    }).subscribe(() => {
+      this.modal.close();
+      window.location.reload();
+    });
+  }
 }
diff --git a/wowskarma.app/src/app/shared/modals/post-mod-edit/post-mod-editor.component.html b/wowskarma.app/src/app/shared/modals/post-mod-edit/post-mod-editor.component.html
index dcaf6655..c071b389 100644
--- a/wowskarma.app/src/app/shared/modals/post-mod-edit/post-mod-editor.component.html
+++ b/wowskarma.app/src/app/shared/modals/post-mod-edit/post-mod-editor.component.html
@@ -40,7 +40,7 @@ <h4 class="mb-2">Flairs</h4>
 
         <dl class="row align-content-center" id="flairs-selector">
           <ng-container *ngFor="let group of flairGroups">
-            <dd class="col-lg-6 col-8 btn-group mr-2" role="group">
+            <dd class="col-lg-6 col-8 btn-group mr-2">
               <ng-container *ngFor="let option of group.options">
                 <input [value]="option.value" class="btn-check" [formControl]="group.control"
                        [id]="group.label + '-' + option.label"
diff --git a/wowskarma.app/src/app/shared/modals/post-mod-edit/post-mod-editor.component.ts b/wowskarma.app/src/app/shared/modals/post-mod-edit/post-mod-editor.component.ts
index d7816444..137434c2 100644
--- a/wowskarma.app/src/app/shared/modals/post-mod-edit/post-mod-editor.component.ts
+++ b/wowskarma.app/src/app/shared/modals/post-mod-edit/post-mod-editor.component.ts
@@ -7,11 +7,27 @@ import { PostService } from 'src/app/services/api/services/post.service';
 import { markTouchedDirtyAndValidate } from 'src/app/services/helpers';
 import { parseFlairsEnum, toEnum } from 'src/app/services/metricsHelpers';
 import { PlayerPostEditorDto, PostEditorComponent } from 'src/app/shared/modals/post-editor/post-editor.component';
+import { ControlExtensionsDirective } from "../../directives/control-extensions.directive";
+import { NgClass, NgForOf, NgIf } from "@angular/common";
+import { FormErrorsComponent } from "../../form-errors/form-errors.component";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { RouterLink } from "@angular/router";
 
 @Component({
   selector: 'app-post-mod-edit',
   templateUrl: './post-mod-editor.component.html',
   styleUrls: ['./post-mod-editor.component.scss'],
+  standalone: true,
+  imports: [
+    FormErrorsComponent,
+    FormsModule,
+    NgIf,
+    ReactiveFormsModule,
+    ControlExtensionsDirective,
+    NgClass,
+    RouterLink,
+    NgForOf
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PostModEditorComponent extends PostEditorComponent {
diff --git a/wowskarma.app/src/app/shared/modals/profile-mod-actions-view/profile-mod-actions-view.component.ts b/wowskarma.app/src/app/shared/modals/profile-mod-actions-view/profile-mod-actions-view.component.ts
index 3aadce81..52c08244 100644
--- a/wowskarma.app/src/app/shared/modals/profile-mod-actions-view/profile-mod-actions-view.component.ts
+++ b/wowskarma.app/src/app/shared/modals/profile-mod-actions-view/profile-mod-actions-view.component.ts
@@ -7,10 +7,22 @@ import { ModActionService } from 'src/app/services/api/services/mod-action.servi
 import { InputObservable, shareReplayRefCount, switchMapCatchError, tapAny } from 'src/app/shared/rxjs-operators';
 import { toObservable } from "@angular/core/rxjs-interop";
 import { PostModActionDto } from "../../../services/api/models/post-mod-action-dto";
+import { RouterLink } from "@angular/router";
+import { AsyncPipe, NgIf } from "@angular/common";
+import { PlayerNamelinkComponent } from "../../components/player-namelink/player-namelink.component";
+import { ModActionTypeDisplayPipe } from "../../../services/pipes/mod-action-type-display.pipe";
 
 @Component({
+  standalone: true,
   selector: 'profile-mod-actions-view-modal',
   templateUrl: './profile-mod-actions-view.component.html',
+  imports: [
+    RouterLink,
+    AsyncPipe,
+    PlayerNamelinkComponent,
+    NgIf,
+    ModActionTypeDisplayPipe
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProfileModActionsViewComponent {
diff --git a/wowskarma.app/src/app/shared/modals/profile-platform-bans-view/profile-platform-bans-view.component.html b/wowskarma.app/src/app/shared/modals/profile-platform-bans-view/profile-platform-bans-view.component.html
index 32262c7b..b7d35d27 100644
--- a/wowskarma.app/src/app/shared/modals/profile-platform-bans-view/profile-platform-bans-view.component.html
+++ b/wowskarma.app/src/app/shared/modals/profile-platform-bans-view/profile-platform-bans-view.component.html
@@ -48,7 +48,7 @@ <h4 class="modal-title">Platform Bans</h4>
               <tr>
                 <th>Banned by</th>
                 <td>
-                  <player-namelink [player]="{id: ban.modId!, username: ban.modUsername!}"></player-namelink>
+                  <player-namelink [player]="{id: ban.modId!, username: ban.modUsername!}" />
                 </td>
               </tr>
               <tr>
diff --git a/wowskarma.app/src/app/shared/modals/profile-platform-bans-view/profile-platform-bans-view.component.ts b/wowskarma.app/src/app/shared/modals/profile-platform-bans-view/profile-platform-bans-view.component.ts
index 77f93eb0..6fb1b844 100644
--- a/wowskarma.app/src/app/shared/modals/profile-platform-bans-view/profile-platform-bans-view.component.ts
+++ b/wowskarma.app/src/app/shared/modals/profile-platform-bans-view/profile-platform-bans-view.component.ts
@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, inject, input, Input, model, signal } from '@angular/core';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
-import { BehaviorSubject, of, pipe } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { PlatformBansService } from 'src/app/services/api/services/platform-bans.service';
 import {
@@ -10,11 +9,20 @@ import {
   switchMapCatchError,
   tapAny
 } from 'src/app/shared/rxjs-operators';
-import { PlatformBanDto } from "../../../services/api/models/platform-ban-dto";
 import { toObservable } from "@angular/core/rxjs-interop";
+import { PlatformBanDto } from 'src/app/services/api/models';
+import { AsyncPipe, DatePipe, NgIf } from "@angular/common";
+import { PlayerNamelinkComponent } from "../../components/player-namelink/player-namelink.component";
 
 @Component({
+  standalone: true,
   templateUrl: './profile-platform-bans-view.component.html',
+  imports: [
+    AsyncPipe,
+    NgIf,
+    PlayerNamelinkComponent,
+    DatePipe
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProfilePlatformBansViewComponent {
diff --git a/wowskarma.app/src/app/shared/modals/seed-token-change/seed-token-change.component.ts b/wowskarma.app/src/app/shared/modals/seed-token-change/seed-token-change.component.ts
index 16ee7650..59b18fd6 100644
--- a/wowskarma.app/src/app/shared/modals/seed-token-change/seed-token-change.component.ts
+++ b/wowskarma.app/src/app/shared/modals/seed-token-change/seed-token-change.component.ts
@@ -5,25 +5,25 @@ import { AuthService } from "../../../services/api/services/auth.service";
 import { AppConfigService } from "../../../services/app-config.service";
 
 @Component({
-    selector: "modal-seed-token-change",
-    templateUrl: "./seed-token-change.component.html",
-    styleUrls: ["./seed-token-change.component.scss"],
-    changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  templateUrl: "./seed-token-change.component.html",
+  styleUrls: ["./seed-token-change.component.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SeedTokenChangeComponent {
-    @Input() modal!: NgbModalRef;
+  @Input() modal!: NgbModalRef;
 
-    constructor(private apiAuthService: AuthService, private appConfigService: AppConfigService) {}
+  constructor(private apiAuthService: AuthService, private appConfigService: AppConfigService) { }
 
-    static OpenModal(modalService: NgbModal) {
-        const modalRef = modalService.open(SeedTokenChangeComponent, {});
-        modalRef.componentInstance.modal = modalRef;
-    }
+  static OpenModal(modalService: NgbModal) {
+    const modalRef = modalService.open(SeedTokenChangeComponent, {});
+    modalRef.componentInstance.modal = modalRef;
+  }
 
-    onSubmit() {
-        this.apiAuthService.apiAuthRenewSeedPost().subscribe(() => {
-            document.cookie = environment.cookies.name[this.appConfigService.currentRegion] + "=; Max-Age=-99999999;";
-            window.location.href = window.location.origin;
-        });
-    }
+  onSubmit() {
+    this.apiAuthService.apiAuthRenewSeedPost().subscribe(() => {
+      document.cookie = environment.cookies.name[this.appConfigService.currentRegion] + "=; Max-Age=-99999999;";
+      window.location.href = window.location.origin;
+    });
+  }
 }
diff --git a/wowskarma.app/src/app/shared/notifications/notification/notification.component.ts b/wowskarma.app/src/app/shared/notifications/notification/notification.component.ts
index 04fc024a..e4c11193 100644
--- a/wowskarma.app/src/app/shared/notifications/notification/notification.component.ts
+++ b/wowskarma.app/src/app/shared/notifications/notification/notification.component.ts
@@ -18,16 +18,26 @@ import {
 } from "../../../services/api/models/notification";
 import {PlayerPostDto} from "../../../services/api/models/player-post-dto";
 import {PostModActionDto} from "../../../services/api/models/post-mod-action-dto";
+import { RouterLink } from "@angular/router";
+import { DatePipe } from "@angular/common";
+import { BypassHtmlPipe } from "../../../services/pipes/bypass-html.pipe";
 
 @Component({
+  standalone: true,
   selector: "app-notification",
   styleUrls: ["./notification.component.scss"],
   templateUrl: "./notification.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    RouterLink,
+    DatePipe,
+    BypassHtmlPipe
+
+  ]
 })
 export class NotificationComponent {
   notification = input.required<Notification>();
-  
+
   @Output() onClick = new EventEmitter();
   @Output() onDismiss = new EventEmitter();
 
diff --git a/wowskarma.app/src/app/shared/notifications/notifications-menu/notifications-menu.component.html b/wowskarma.app/src/app/shared/notifications/notifications-menu/notifications-menu.component.html
index 529f2c33..586c43e4 100644
--- a/wowskarma.app/src/app/shared/notifications/notifications-menu/notifications-menu.component.html
+++ b/wowskarma.app/src/app/shared/notifications/notifications-menu/notifications-menu.component.html
@@ -1,13 +1,17 @@
 <ng-template #content let-offcanvas>
-    <div class="offcanvas-header">
-        <h4 class="offcanvas-title">Notifications</h4>
-        <button id="clear-all" type="button" class="btn btn-primary" (click)="clearAllNotifications(); offcanvas.close('Close click');">Clear all</button>
-    </div>
+  <div class="offcanvas-header">
+    <h4 class="offcanvas-title">Notifications</h4>
+    <button id="clear-all" type="button" class="btn btn-primary" (click)="clearAllNotifications(); offcanvas.close('Close click');">Clear all</button>
+  </div>
 
-    <div class="offcanvas-body">
-        <div class="d-flex flex-column gap-3">
-            <app-notification *ngFor="let notification of notifications$ | async" [notification]="notification"
-                              (onClick)="closeMenu()" (onDismiss)="clearNotification(notification.id)"></app-notification>
-        </div>
+  <div class="offcanvas-body">
+    <div class="d-flex flex-column gap-3">
+      <app-notification
+        *ngFor="let notification of notifications$ | async"
+        [notification]="notification"
+        (onClick)="closeMenu()"
+        (onDismiss)="clearNotification(notification.id)"
+      />
     </div>
-</ng-template>
\ No newline at end of file
+  </div>
+</ng-template>
diff --git a/wowskarma.app/src/app/shared/notifications/notifications-menu/notifications-menu.component.ts b/wowskarma.app/src/app/shared/notifications/notifications-menu/notifications-menu.component.ts
index f93a0ffc..975ec0f4 100644
--- a/wowskarma.app/src/app/shared/notifications/notifications-menu/notifications-menu.component.ts
+++ b/wowskarma.app/src/app/shared/notifications/notifications-menu/notifications-menu.component.ts
@@ -7,13 +7,21 @@ import { AuthService } from "../../../services/auth.service";
 import { sortByDateField } from "../../../services/helpers";
 import { NotificationsHub } from "../../../services/hubs/notifications-hub.service";
 import { filterNotNull } from "../../rxjs-operators";
+import { NotificationComponent } from "../notification/notification.component";
+import { AsyncPipe, NgForOf } from "@angular/common";
 
 @Component({
+    standalone: true,
     selector: "app-notifications-menu",
     templateUrl: "./notifications-menu.component.html",
     styleUrls: ["./notifications-menu.component.scss"],
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
+  imports: [
+    NotificationComponent,
+    AsyncPipe,
+    NgForOf
+  ]
 })
 export class NotificationsMenuComponent {
     @ViewChild("content")
diff --git a/wowskarma.app/src/app/shared/player/profile/posts-received/posts-received.component.html b/wowskarma.app/src/app/shared/player/profile/posts-received/posts-received.component.html
index 5eeccdd2..6a6ab114 100644
--- a/wowskarma.app/src/app/shared/player/profile/posts-received/posts-received.component.html
+++ b/wowskarma.app/src/app/shared/player/profile/posts-received/posts-received.component.html
@@ -21,7 +21,7 @@
         <div class="row gx-2 gy-3">
             @for (p of posts; track $index) {
                 <div class="col-lg-4 col-md-6">
-                    <app-post [post]="p" postDisplayType="received"></app-post>
+                    <app-post [post]="p" postDisplayType="received" />
                 </div>
             }
         </div>
diff --git a/wowskarma.app/src/app/shared/player/profile/posts-received/posts-received.component.ts b/wowskarma.app/src/app/shared/player/profile/posts-received/posts-received.component.ts
index 103a2528..e168f1be 100644
--- a/wowskarma.app/src/app/shared/player/profile/posts-received/posts-received.component.ts
+++ b/wowskarma.app/src/app/shared/player/profile/posts-received/posts-received.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, inject, input, signal, TemplateRef, ViewChild } from "@angular/core";
-import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { NgbModal, NgbPagination } from "@ng-bootstrap/ng-bootstrap";
 import { BehaviorSubject, combineLatest, combineLatestWith, filter, firstValueFrom, merge, Observable, shareReplay, tap, withLatestFrom } from "rxjs";
 import { distinctUntilChanged, map, startWith, } from "rxjs/operators";
 import { PlayerPostDto } from "../../../../services/api/models/player-post-dto";
@@ -10,12 +10,25 @@ import { PostsHub } from "../../../../services/hubs/posts-hub.service";
 import { PostEditorComponent } from "../../../modals/post-editor/post-editor.component";
 import { filterNotNull, InputObservable, reloadWhen, shareReplayRefCount, switchMapCatchError, tapAny, tapPageInfoHeaders } from "../../../rxjs-operators";
 import { toObservable } from "@angular/core/rxjs-interop";
+import { AsyncPipe, DatePipe, NgIf, NgTemplateOutlet } from "@angular/common";
+import { PostComponent } from "../../../post/post.component";
+import { RouterLink } from "@angular/router";
 
 
 @Component({
-    selector: "app-posts-received",
-    templateUrl: "./posts-received.component.html",
-    changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  selector: "app-posts-received",
+  templateUrl: "./posts-received.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    AsyncPipe,
+    NgTemplateOutlet,
+    NgIf,
+    NgbPagination,
+    PostComponent,
+    RouterLink,
+    DatePipe
+  ]
 })
 export class PostsReceivedComponent {
   @ViewChild("createPostButton") buttonTemplate!: TemplateRef<any>;
diff --git a/wowskarma.app/src/app/shared/player/profile/posts-sent/posts-sent.component.ts b/wowskarma.app/src/app/shared/player/profile/posts-sent/posts-sent.component.ts
index 634905c7..45895fb7 100644
--- a/wowskarma.app/src/app/shared/player/profile/posts-sent/posts-sent.component.ts
+++ b/wowskarma.app/src/app/shared/player/profile/posts-sent/posts-sent.component.ts
@@ -7,11 +7,21 @@ import { sortByCreationDate } from "../../../../services/helpers";
 import { PostsHub } from "../../../../services/hubs/posts-hub.service";
 import { filterNotNull, InputObservable, reloadWhen, shareReplayRefCount, switchMapCatchError, tapAny, tapPageInfoHeaders } from "../../../rxjs-operators";
 import { toObservable } from "@angular/core/rxjs-interop";
+import { AsyncPipe, NgIf } from "@angular/common";
+import { NgbPagination } from "@ng-bootstrap/ng-bootstrap";
+import { PostComponent } from "../../../post/post.component";
 
 @Component({
+  standalone: true,
   selector: "app-posts-sent",
   templateUrl: "./posts-sent.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    AsyncPipe,
+    NgbPagination,
+    NgIf,
+    PostComponent
+  ]
 })
 export class PostsSentComponent {
   userId = input(0)
diff --git a/wowskarma.app/src/app/shared/post/flair-markup/flair-markups.component.ts b/wowskarma.app/src/app/shared/post/flair-markup/flair-markups.component.ts
index 5aaf8096..e66910ce 100644
--- a/wowskarma.app/src/app/shared/post/flair-markup/flair-markups.component.ts
+++ b/wowskarma.app/src/app/shared/post/flair-markup/flair-markups.component.ts
@@ -1,12 +1,18 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from "@angular/core";
 import { PostFlairs } from "../../../services/api/models/post-flairs";
 import { parseFlairsEnum } from "../../../services/metricsHelpers";
+import { NgForOf, NgIf } from "@angular/common";
 
 @Component({
+  standalone: true,
   selector: "flairs-markup",
   templateUrl: "./flair-markups.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
   inputs: ["flairsEnum"],
+  imports: [
+    NgForOf,
+    NgIf
+  ]
 })
 export class FlairMarkupsComponent implements OnInit {
   // Post Flairs
diff --git a/wowskarma.app/src/app/shared/post/post.component.ts b/wowskarma.app/src/app/shared/post/post.component.ts
index 7674e79a..96b36552 100644
--- a/wowskarma.app/src/app/shared/post/post.component.ts
+++ b/wowskarma.app/src/app/shared/post/post.component.ts
@@ -6,10 +6,26 @@ import { AuthService } from "../../services/auth.service";
 import { PostDeleteComponent } from "../modals/post-delete/post-delete.component";
 import { PostEditorComponent } from "../modals/post-editor/post-editor.component";
 import { PostModDeleteComponent } from "../modals/post-mod-delete/post-mod-delete.component";
+import { PlayerNamelinkComponent } from "../components/player-namelink/player-namelink.component";
+import { DatePipe, NgIf } from "@angular/common";
+import { MarkdownComponent } from "ngx-markdown";
+import { RouterLink } from "@angular/router";
+import { FlairMarkupsComponent } from "./flair-markup/flair-markups.component";
+import { PostBorderColorPipe } from "../../services/pipes/post-border-color.pipe";
 
 @Component({
+  standalone: true,
   selector: "app-post",
   templateUrl: "./post.component.html",
+  imports: [
+    PlayerNamelinkComponent,
+    NgIf,
+    MarkdownComponent,
+    RouterLink,
+    FlairMarkupsComponent,
+    DatePipe,
+    PostBorderColorPipe
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 
diff --git a/wowskarma.app/src/app/shared/replay/chat-log/chat-log.component.ts b/wowskarma.app/src/app/shared/replay/chat-log/chat-log.component.ts
index a3067431..354deb94 100644
--- a/wowskarma.app/src/app/shared/replay/chat-log/chat-log.component.ts
+++ b/wowskarma.app/src/app/shared/replay/chat-log/chat-log.component.ts
@@ -3,10 +3,19 @@ import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
 import { ReplayDto } from "../../../services/api/models/replay-dto";
 import { InputObservable } from "../../rxjs-operators";
+import { RouterLink } from "@angular/router";
+import { NgForOf } from "@angular/common";
+import { ChatMessageChannelPipe } from "../../../services/pipes/chat-message-channel.pipe";
 
 @Component({
+  standalone: true,
   selector: 'replay-chat-log',
   templateUrl: './chat-log.component.html',
+  imports: [
+    RouterLink,
+    NgForOf,
+    ChatMessageChannelPipe
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ChatLogComponent {
diff --git a/wowskarma.app/src/app/shared/replay/team-roster/team-roster.component.ts b/wowskarma.app/src/app/shared/replay/team-roster/team-roster.component.ts
index f8a96e5b..9eda97cd 100644
--- a/wowskarma.app/src/app/shared/replay/team-roster/team-roster.component.ts
+++ b/wowskarma.app/src/app/shared/replay/team-roster/team-roster.component.ts
@@ -4,11 +4,18 @@ import { map } from "rxjs/operators";
 import { ReplayDto } from "../../../services/api/models/replay-dto";
 import { ReplayPlayerDto } from "../../../services/api/models/replay-player-dto";
 import { InputObservable, shareReplayRefCount } from "../../rxjs-operators";
+import { NgIf } from "@angular/common";
+import { RouterLink } from "@angular/router";
 
 @Component({
+  standalone: true,
   selector: "replay-team-roster",
   templateUrl: "./team-roster.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NgIf,
+    RouterLink
+  ]
 })
 export class TeamRosterComponent {
   replay = input.required<ReplayDto>()
diff --git a/wowskarma.app/src/main.ts b/wowskarma.app/src/main.ts
index c5e7a552..7b41277d 100644
--- a/wowskarma.app/src/main.ts
+++ b/wowskarma.app/src/main.ts
@@ -1,15 +1,64 @@
 /// <reference types="@angular/localize" />
 
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
+import { bootstrapApplication } from "@angular/platform-browser";
+import { AppWrapperComponent } from "./app/app-wrapper.component";
+import { AppComponent } from "./app/app.component";
+import { AuthService } from "./app/services/auth.service";
+import { AppConfigService } from "./app/services/app-config.service";
+import { AppInsightsService } from "./app/services/app-insights.service";
+import { AppInitService } from "./app/services/app-init.service";
+import { AppInitGuard } from "./app/services/guards/app-init.guard";
+import { AuthGuard } from "./app/services/guards/auth.guard";
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptors, withInterceptorsFromDi } from "@angular/common/http";
+import { AuthenticationInterceptor } from "./app/services/interceptors/authentication.interceptor";
+import { ErrorInterceptor } from "./app/services/interceptors/error.interceptor";
+import { MARKED_OPTIONS, provideMarkdown } from "ngx-markdown";
+import { provideServiceWorker } from "@angular/service-worker";
+import { CommonModule } from "@angular/common";
+import { provideRouter } from "@angular/router";
+import { routes } from "./app/app-routing.module";
+import { ApiModule } from "./app/services/api/api.module";
 
 if (environment.name === "production") {
   enableProdMode();
   //console.debug = (...args: any[]) => {};
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppWrapperComponent, {
+  providers: [
+    AuthService,
+    AppConfigService,
+    AppInsightsService,
+    AppInitService,
+    AppInitGuard,
+    AuthGuard,
+    {provide: HTTP_INTERCEPTORS, multi: true, useClass: AuthenticationInterceptor},
+    {provide: HTTP_INTERCEPTORS, multi: true, useClass: ErrorInterceptor},
+    importProvidersFrom(CommonModule, ApiModule),
+    provideRouter(routes),
+    provideExperimentalZonelessChangeDetection(),
+    provideHttpClient(withInterceptorsFromDi()),
+
+    provideMarkdown({
+      markedOptions: {
+        provide: MARKED_OPTIONS,
+        useValue: {
+          gfm: true,
+          breaks: true
+        }
+      }
+    }),
+
+    provideServiceWorker("ngsw-worker.js", {
+      enabled: environment.name === "production",
+      // Register the ServiceWorker as soon as the application is stable
+      // or after 30 seconds (whichever comes first).
+      registrationStrategy: "registerWhenStable:30000",
+    }),
+  ]
+})
   .catch(err => console.error(err));