feat: implement mobile header (#2559)

* feat: implement mobile header * chore: remove remaining ties to old ui project * chore: remove ionic from login page * chore: address comments
2026-03-30 12:11:56 +00:00 · 2024-02-13 20:03:09 +04:00
parent 9a0ae549f6
commit 513fb3428a
63 changed files with 1551 additions and 799 deletions
--- a/web/projects/ui/src/app/app.module.ts
+++ b/web/projects/ui/src/app/app.module.ts
@@ -1,3 +1,18 @@
+import { HttpClientModule } from '@angular/common/http'
+import { NgModule } from '@angular/core'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { ServiceWorkerModule } from '@angular/service-worker'
+import { IonicModule } from '@ionic/angular'
+import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor'
+import {
+  DarkThemeModule,
+  EnterModule,
+  LightThemeModule,
+  LoadingModule,
+  MarkdownModule,
+  ResponsiveColViewportDirective,
+  SharedPipesModule,
+} from '@start9labs/shared'
 import {
  TuiAlertModule,
  TuiDialogModule,
@@ -5,36 +20,19 @@ import {
  TuiRootModule,
  TuiThemeNightModule,
 } from '@taiga-ui/core'
-import { HttpClientModule } from '@angular/common/http'
-import { NgModule } from '@angular/core'
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { IonicModule } from '@ionic/angular'
-import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor'
-import {
-  DarkThemeModule,
-  SharedPipesModule,
-  LightThemeModule,
-  LoadingModule,
-  ResponsiveColViewportDirective,
-  EnterModule,
-  MarkdownModule,
-} from '@start9labs/shared'
-
+import { WidgetsPageModule } from 'src/app/apps/ui/pages/widgets/widgets.module'
+import { environment } from '../environments/environment'
 import { AppComponent } from './app.component'
-import { RoutingModule } from './routing.module'
-import { OSWelcomePageModule } from './common/os-welcome/os-welcome.module'
-import { QRComponentModule } from './common/qr/qr.module'
-import { PreloaderModule } from './app/preloader/preloader.module'
+import { APP_PROVIDERS } from './app.providers'
+import { ConnectionBarComponentModule } from './app/connection-bar/connection-bar.component.module'
 import { FooterModule } from './app/footer/footer.module'
 import { MenuModule } from './app/menu/menu.module'
-import { APP_PROVIDERS } from './app.providers'
-import { PatchDbModule } from './services/patch-db/patch-db.module'
-import { ToastContainerModule } from './common/toast-container/toast-container.module'
-import { ConnectionBarComponentModule } from './app/connection-bar/connection-bar.component.module'
-import { WidgetsPageModule } from 'src/app/apps/ui/pages/widgets/widgets.module'
-import { ServiceWorkerModule } from '@angular/service-worker'
-import { environment } from '../environments/environment'
+import { PreloaderModule } from './app/preloader/preloader.module'
 import { SidebarHostComponent } from './app/sidebar-host.component'
+import { OSWelcomePageModule } from './common/os-welcome/os-welcome.module'
+import { QRComponentModule } from './common/qr/qr.module'
+import { ToastContainerModule } from './common/toast-container/toast-container.module'
+import { RoutingModule } from './routing.module'

@NgModule({
  declarations: [AppComponent],
@@ -53,7 +51,6 @@ import { SidebarHostComponent } from './app/sidebar-host.component'
    MarkdownModule,
    MonacoEditorModule,
    SharedPipesModule,
-    PatchDbModule,
    ToastContainerModule,
    ConnectionBarComponentModule,
    TuiRootModule,
--- a/web/projects/ui/src/app/app.providers.ts
+++ b/web/projects/ui/src/app/app.providers.ts
@@ -1,7 +1,13 @@
 import { APP_INITIALIZER, Provider } from '@angular/core'
 import { UntypedFormBuilder } from '@angular/forms'
-import { Router, RouteReuseStrategy } from '@angular/router'
+import { Router } from '@angular/router'
 import { IonNav } from '@ionic/angular'
+import {
+  AbstractCategoryService,
+  AbstractMarketplaceService,
+  FilterPackagesPipe,
+} from '@start9labs/marketplace'
+import { RELATIVE_URL, THEME, WorkspaceConfig } from '@start9labs/shared'
 import { TUI_DATE_FORMAT, TUI_DATE_SEPARATOR } from '@taiga-ui/cdk'
 import {
  tuiNumberFormatProvider,
@@ -12,22 +18,17 @@ import {
  TUI_DATE_TIME_VALUE_TRANSFORMER,
  TUI_DATE_VALUE_TRANSFORMER,
 } from '@taiga-ui/kit'
-import { RELATIVE_URL, THEME, WorkspaceConfig } from '@start9labs/shared'
-import {
-  AbstractCategoryService,
-  AbstractMarketplaceService,
-} from '@start9labs/marketplace'
+import { PATCH_DB_PROVIDERS } from 'src/app/services/patch-db/patch-db.providers'
 import { ApiService } from './services/api/embassy-api.service'
-import { MockApiService } from './services/api/embassy-mock-api.service'
 import { LiveApiService } from './services/api/embassy-live-api.service'
+import { MockApiService } from './services/api/embassy-mock-api.service'
 import { AuthService } from './services/auth.service'
+import { CategoryService } from './services/category.service'
 import { ClientStorageService } from './services/client-storage.service'
-import { FilterPackagesPipe } from '../../../marketplace/src/pipes/filter-packages.pipe'
-import { ThemeSwitcherService } from './services/theme-switcher.service'
 import { DateTransformerService } from './services/date-transformer.service'
 import { DatetimeTransformerService } from './services/datetime-transformer.service'
 import { MarketplaceService } from './services/marketplace.service'
-import { CategoryService } from './services/category.service'
+import { ThemeSwitcherService } from './services/theme-switcher.service'

 const {
  useMocks,
@@ -35,6 +36,7 @@ const {
 } = require('../../../../config.json') as WorkspaceConfig

 export const APP_PROVIDERS: Provider[] = [
+  PATCH_DB_PROVIDERS,
  FilterPackagesPipe,
  UntypedFormBuilder,
  IonNav,
--- a/web/projects/ui/src/app/apps/loading/loading.module.ts
+++ b/web/projects/ui/src/app/apps/loading/loading.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { InitializingModule } from '@start9labs/shared'
 import { LoadingPage } from './loading.page'

 const routes: Routes = [
@@ -11,7 +10,6 @@ const routes: Routes = [
 ]

@NgModule({
-  imports: [InitializingModule, RouterModule.forChild(routes)],
-  declarations: [LoadingPage],
+  imports: [RouterModule.forChild(routes)],
 })
 export class LoadingPageModule {}
--- a/web/projects/ui/src/app/apps/loading/loading.page.html
+++ b/web/projects/ui/src/app/apps/loading/loading.page.html
@@ -1,4 +0,0 @@
-<app-initializing
-  class="ion-page"
-  (finished)="navCtrl.navigateForward('/login')"
-></app-initializing>
--- a/web/projects/ui/src/app/apps/loading/loading.page.ts
+++ b/web/projects/ui/src/app/apps/loading/loading.page.ts
@@ -1,6 +1,7 @@
 import { Component, inject } from '@angular/core'
 import { NavController } from '@ionic/angular'
 import {
+  InitializingModule,
  provideSetupLogsService,
  provideSetupService,
 } from '@start9labs/shared'
@@ -8,11 +9,18 @@ import {
 import { ApiService } from 'src/app/services/api/embassy-api.service'

@Component({
-  templateUrl: 'loading.page.html',
+  standalone: true,
+  template: `
+    <app-initializing
+      class="ion-page"
+      (finished)="navCtrl.navigateForward('/login')"
+    ></app-initializing>
+  `,
  providers: [
    provideSetupService(ApiService),
    provideSetupLogsService(ApiService),
  ],
+  imports: [InitializingModule],
 })
 export class LoadingPage {
  readonly navCtrl = inject(NavController)
--- a/web/projects/ui/src/app/apps/login/ca-wizard/ca-wizard.component.html
+++ b/web/projects/ui/src/app/apps/login/ca-wizard/ca-wizard.component.html
@@ -1,100 +1,106 @@
-<div class="center-container">
-  <ng-container *ngIf="!caTrusted; else trusted">
-    <ion-card id="untrusted" class="text-center">
-      <ion-icon name="lock-closed-outline" class="wiz-icon"></ion-icon>
-      <h1>Trust Your Root CA</h1>
-      <p>
-        Download and trust your server's Root Certificate Authority to establish
-        a secure (HTTPS) connection. You will need to repeat this on every
-        device you use to connect to your server.
-      </p>
-      <ol>
-        <li>
-          <b>Bookmark this page</b>
-          - Save this page so you can access it later. You can also find the
-          address in the
-          <code>StartOS-info.html</code>
-          file downloaded at the end of initial setup.
-        </li>
-        <li>
-          <b>Download your server's Root CA</b>
-          - Your server uses its Root CA to generate SSL/TLS certificates for
-          itself and installed services. These certificates are then used to
-          encrypt network traffic with your client devices.
-          <br />
-          <ion-button
-            strong
-            size="small"
-            shape="round"
-            color="tertiary"
-            (click)="download()"
-          >
-            Download
-            <ion-icon slot="end" name="download-outline"></ion-icon>
-          </ion-button>
-        </li>
-        <li>
-          <b>Trust your server's Root CA</b>
-          - Follow instructions for your OS. By trusting your server's Root CA,
-          your device can verify the authenticity of encrypted communications
-          with your server.
-          <br />
-          <ion-button
-            strong
-            size="small"
-            shape="round"
-            color="primary"
-            href="https://docs.start9.com/0.3.5.x/user-manual/trust-ca"
-            target="_blank"
-            noreferrer
-          >
-            View Instructions
-            <ion-icon slot="end" name="open-outline"></ion-icon>
-          </ion-button>
-        </li>
-        <li>
-          <b>Test</b>
-          - Refresh the page. If refreshing the page does not work, you may need
-          to quit and re-open your browser, then revisit this page.
-          <br />
-          <ion-button
-            strong
-            size="small"
-            shape="round"
-            class="refresh"
-            (click)="refresh()"
-          >
-            Refresh
-            <ion-icon slot="end" name="refresh"></ion-icon>
-          </ion-button>
-        </li>
-      </ol>
-      <ion-button fill="clear" (click)="launchHttps()" [disabled]="caTrusted">
-        Skip
-        <ion-icon slot="end" name="open-outline"></ion-icon>
-      </ion-button>
-      <span class="skip_detail">(not recommended)</span>
-    </ion-card>
-  </ng-container>
-
-  <ng-template #trusted>
-    <ion-card id="trusted" class="text-center">
-      <ion-icon
-        name="shield-checkmark-outline"
-        class="wiz-icon"
-        color="success"
-      ></ion-icon>
-      <h1>Root CA Trusted!</h1>
-      <p>
-        You have successfully trusted your server's Root CA and may now log in
-        securely.
-      </p>
-      <ion-button strong (click)="launchHttps()" color="tertiary" shape="round">
-        Go to login
-        <ion-icon slot="end" name="open-outline"></ion-icon>
-      </ion-button>
-    </ion-card>
-  </ng-template>
+<div
+  *ngIf="!caTrusted; else trusted"
+  tuiCardLarge
+  tuiSurface="elevated"
+  class="card"
+>
+  <tui-icon icon="tuiIconLock" [style.font-size.rem]="4" />
+  <h1>Trust Your Root CA</h1>
+  <p>
+    Download and trust your server's Root Certificate Authority to establish a
+    secure (HTTPS) connection. You will need to repeat this on every device you
+    use to connect to your server.
+  </p>
+  <ol>
+    <li>
+      <b>Bookmark this page</b>
+      - Save this page so you can access it later. You can also find the address
+      in the
+      <code>StartOS-info.html</code>
+      file downloaded at the end of initial setup.
+    </li>
+    <li>
+      <b>Download your server's Root CA</b>
+      - Your server uses its Root CA to generate SSL/TLS certificates for itself
+      and installed services. These certificates are then used to encrypt
+      network traffic with your client devices.
+      <br />
+      <a
+        tuiButton
+        size="s"
+        appearance="tertiary-solid"
+        iconRight="tuiIconDownload"
+        href="/eos/local.crt"
+      >
+        Download
+      </a>
+    </li>
+    <li>
+      <b>Trust your server's Root CA</b>
+      - Follow instructions for your OS. By trusting your server's Root CA, your
+      device can verify the authenticity of encrypted communications with your
+      server.
+      <br />
+      <a
+        tuiButton
+        size="s"
+        href="https://docs.start9.com/0.3.5.x/user-manual/trust-ca"
+        target="_blank"
+        rel="noreferrer"
+        iconRight="tuiIconExternalLink"
+      >
+        View Instructions
+      </a>
+    </li>
+    <li>
+      <b>Test</b>
+      - Refresh the page. If refreshing the page does not work, you may need to
+      quit and re-open your browser, then revisit this page.
+      <br />
+      <button
+        tuiButton
+        size="s"
+        class="refresh"
+        appearance="success-solid"
+        iconRight="tuiIconRefreshCw"
+        (click)="refresh()"
+      >
+        Refresh
+      </button>
+    </li>
+  </ol>
+  <button
+    tuiButton
+    size="s"
+    appearance="flat"
+    iconRight="tuiIconExternalLink"
+    (click)="launchHttps()"
+    [disabled]="caTrusted"
+  >
+    Skip
+  </button>
+  <div><small>(not recommended)</small></div>
 </div>

-<a id="install-cert" href="/eos/local.crt"></a>
+<ng-template #trusted>
+  <div tuiCardLarge tuiSurface="elevated" class="card">
+    <tui-icon
+      icon="tuiIconShield"
+      tuiAppearance="icon-success"
+      [style.font-size.rem]="4"
+    />
+    <h1>Root CA Trusted!</h1>
+    <p>
+      You have successfully trusted your server's Root CA and may now log in
+      securely.
+    </p>
+    <button
+      tuiButton
+      appearance="tertiary-solid"
+      iconRight="tuiIconExternalLink"
+      (click)="launchHttps()"
+    >
+      Go to login
+    </button>
+  </div>
+</ng-template>
--- a/web/projects/ui/src/app/apps/login/ca-wizard/ca-wizard.component.scss
+++ b/web/projects/ui/src/app/apps/login/ca-wizard/ca-wizard.component.scss
@@ -1,12 +1,4 @@
-#trusted {
-  max-width: 40%;
-}
-
-#untrusted {
-  max-width: 50%;
-}
-
-.center-container {
+:host {
  padding: 1rem;
  display: flex;
  flex-direction: column;
@@ -15,69 +7,38 @@
  min-height: 100vh;
 }

-ion-card {
-  color: var(--ion-color-dark);
-  background: #414141;
-  box-shadow: 0 4px 4px rgba(17, 17, 17, 0.144);
-  border-radius: 35px;
-  padding: 1.5rem;
-  width: 100%;
-
-  h1 {
-    font-weight: bold;
-    font-size: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-
-  p {
-    font-size: 21px;
-    line-height: 25px;
-    margin-bottom: 30px;
-    margin-top: 0;
-  }
+[tuiButton] {
+  text-transform: uppercase;
+  font-weight: bold;
+  border-radius: 10rem;
+  margin-top: 1rem;
 }

-.text-center {
+.card {
+  max-width: max(70%, 40rem);
  text-align: center;
+  align-items: center !important;
+  gap: 0 !important;
+}
+
+h1 {
+  margin: 1rem;
+  font-weight: bold;
+  font-size: 1.5rem;
+}
+
+p {
+  font-size: 1.3rem;
+  line-height: 1.5rem;
+  margin: 0 0 2rem;
 }

 ol {
-  font-size: 17px;
-  line-height: 25px;
+  font-size: 1rem;
+  line-height: 1.5rem;
  text-align: left;
-
-  li {
-    padding-bottom: 24px;
-  }
-
-  ion-button {
-    margin-top: 10px;
-  }
 }

-.refresh {
-  --background: var(--ion-color-success-shade);
+li {
+  padding-bottom: 1.5rem;
 }
-
-.wiz-icon {
-  font-size: 64px;
-}
-
-.skip_detail {
-  display: block;
-  font-size: 0.8rem;
-  margin-top: -13px;
-  padding-bottom: 0.5rem;
-}
-
-@media (max-width: 700px) {
-  #trusted, #untrusted {
-    max-width: 100%;
-  }
-}
-
-@media (min-width: 701px) and (max-width: 1200px) {
-  #trusted, #untrusted {
-    max-width: 75%;
-  }
-}
--- a/web/projects/ui/src/app/apps/login/ca-wizard/ca-wizard.component.ts
+++ b/web/projects/ui/src/app/apps/login/ca-wizard/ca-wizard.component.ts
@@ -1,25 +1,37 @@
-import { Component, Inject } from '@angular/core'
+import { CommonModule, DOCUMENT } from '@angular/common'
+import { Component, inject } from '@angular/core'
+import { RELATIVE_URL } from '@start9labs/shared'
+import {
+  TuiAppearanceModule,
+  TuiButtonModule,
+  TuiCardModule,
+  TuiIconModule,
+  TuiSurfaceModule,
+} from '@taiga-ui/experimental'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ConfigService } from 'src/app/services/config.service'
-import { RELATIVE_URL } from '@start9labs/shared'
-import { DOCUMENT } from '@angular/common'
-import { WINDOW } from '@ng-web-apis/common'

@Component({
+  standalone: true,
  selector: 'ca-wizard',
  templateUrl: './ca-wizard.component.html',
  styleUrls: ['./ca-wizard.component.scss'],
+  imports: [
+    CommonModule,
+    TuiIconModule,
+    TuiButtonModule,
+    TuiAppearanceModule,
+    TuiCardModule,
+    TuiSurfaceModule,
+  ],
 })
 export class CAWizardComponent {
-  caTrusted = false
+  private readonly api = inject(ApiService)
+  private readonly relativeUrl = inject(RELATIVE_URL)
+  private readonly document = inject(DOCUMENT)

-  constructor(
-    private readonly api: ApiService,
-    public readonly config: ConfigService,
-    @Inject(RELATIVE_URL) private readonly relativeUrl: string,
-    @Inject(DOCUMENT) public readonly document: Document,
-    @Inject(WINDOW) private readonly windowRef: Window,
-  ) {}
+  readonly config = inject(ConfigService)
+  caTrusted = false

  async ngOnInit() {
    await this.testHttps().catch(e =>
@@ -27,17 +39,12 @@ export class CAWizardComponent {
    )
  }

-  download() {
-    this.document.getElementById('install-cert')?.click()
-  }
-
  refresh() {
    this.document.location.reload()
  }

  launchHttps() {
-    const host = this.config.getHost()
-    this.windowRef.open(`https://${host}`, '_self')
+    this.document.defaultView?.open(`https://${this.config.getHost()}`, '_self')
  }

  private async testHttps() {
--- a/web/projects/ui/src/app/apps/login/login.module.ts
+++ b/web/projects/ui/src/app/apps/login/login.module.ts
@@ -1,12 +1,17 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
 import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
-import { IonicModule } from '@ionic/angular'
-import { LoginPage } from './login.page'
+import { RouterModule, Routes } from '@angular/router'
+import { TuiErrorModule, TuiTextfieldControllerModule } from '@taiga-ui/core'
+import {
+  TuiButtonModule,
+  TuiCardModule,
+  TuiSurfaceModule,
+} from '@taiga-ui/experimental'
+import { TuiInputPasswordModule } from '@taiga-ui/kit'
 import { CAWizardComponent } from './ca-wizard/ca-wizard.component'
-import { SharedPipesModule } from '@start9labs/shared'
-import { TuiHintModule, TuiTooltipModule } from '@taiga-ui/core'
+import { LoginPage } from './login.page'
+import { LoginWarningComponent } from './warning.component'

 const routes: Routes = [
  {
@@ -19,12 +24,16 @@ const routes: Routes = [
  imports: [
    CommonModule,
    FormsModule,
-    IonicModule,
-    SharedPipesModule,
+    CAWizardComponent,
+    LoginWarningComponent,
+    TuiButtonModule,
+    TuiCardModule,
+    TuiSurfaceModule,
+    TuiInputPasswordModule,
+    TuiTextfieldControllerModule,
+    TuiErrorModule,
    RouterModule.forChild(routes),
-    TuiTooltipModule,
-    TuiHintModule,
  ],
-  declarations: [LoginPage, CAWizardComponent],
+  declarations: [LoginPage],
 })
 export class LoginPageModule {}
--- a/web/projects/ui/src/app/apps/login/login.page.html
+++ b/web/projects/ui/src/app/apps/login/login.page.html
@@ -1,93 +1,26 @@
-<ion-content class="content">
-  <!-- Local HTTP -->
-  <ng-container *ngIf="config.isLanHttp(); else notLanHttp">
-    <ca-wizard></ca-wizard>
-  </ng-container>
+<!-- Local HTTP -->
+<ca-wizard *ngIf="config.isLanHttp(); else notLanHttp"></ca-wizard>

-  <!-- not Local HTTP -->
-  <ng-template #notLanHttp>
-    <div *ngIf="config.isTorHttp()" class="banner">
-      <ion-item color="warning">
-        <ion-icon slot="start" name="warning-outline"></ion-icon>
-        <ion-label>
-          <h2 style="font-weight: bold">Http detected</h2>
-          <p style="font-weight: 600">
-            Tor is faster over https. Your Root CA must be trusted.
-            <a
-              href="https://docs.start9.com/0.3.5.x/user-manual/trust-ca"
-              target="_blank"
-              noreferrer
-              style="color: black"
-            >
-              View instructions
-            </a>
-          </p>
-        </ion-label>
-        <ion-button slot="end" color="light" (click)="launchHttps()">
-          Open Https
-          <ion-icon slot="end" name="open-outline"></ion-icon>
-        </ion-button>
-      </ion-item>
-    </div>
+<!-- not Local HTTP -->
+<ng-template #notLanHttp>
+  <login-warning />

-    <ion-grid class="grid">
-      <ion-row class="row">
-        <ion-col>
-          <ion-card>
-            <img
-              alt="StartOS Icon"
-              class="header-icon"
-              src="assets/img/icon.png"
-            />
-            <ion-card-header>
-              <ion-card-title class="title">Login to StartOS</ion-card-title>
-            </ion-card-header>
-            <ion-card-content class="ion-margin">
-              <form (submit)="submit()">
-                <ion-item color="dark" fill="solid">
-                  <ion-icon
-                    slot="start"
-                    size="small"
-                    color="base"
-                    name="key-outline"
-                    style="margin-right: 16px"
-                  ></ion-icon>
-                  <ion-input
-                    name="password"
-                    placeholder="Password"
-                    [type]="unmasked ? 'text' : 'password'"
-                    [(ngModel)]="password"
-                    (ionChange)="error = ''"
-                  ></ion-input>
-                  <ion-button
-                    slot="end"
-                    fill="clear"
-                    color="dark"
-                    (click)="unmasked = !unmasked"
-                  >
-                    <ion-icon
-                      slot="icon-only"
-                      size="small"
-                      [name]="unmasked ? 'eye-off-outline' : 'eye-outline'"
-                    ></ion-icon>
-                  </ion-button>
-                </ion-item>
-                <p class="error ion-text-center">
-                  <ion-text color="danger">{{ error }}</ion-text>
-                </p>
-                <ion-button
-                  class="login-button"
-                  type="submit"
-                  expand="block"
-                  color="tertiary"
-                >
-                  Login
-                </ion-button>
-              </form>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-  </ng-template>
-</ion-content>
+  <div tuiCardLarge tuiSurface="elevated" class="card">
+    <img alt="StartOS Icon" class="logo" src="assets/img/icon.png" />
+    <h1 class="header">Login to StartOS</h1>
+    <form (submit)="submit()">
+      <tui-input-password
+        tuiTextfieldIconLeft="tuiIconKeyLarge"
+        [ngModelOptions]="{ standalone: true }"
+        [(ngModel)]="password"
+        (ngModelChange)="error = ''"
+      >
+        Password
+      </tui-input-password>
+      <tui-error class="error" [error]="error || null" />
+      <button tuiButton class="button" appearance="tertiary-solid">
+        Login
+      </button>
+    </form>
+  </div>
+</ng-template>
--- a/web/projects/ui/src/app/apps/login/login.page.scss
+++ b/web/projects/ui/src/app/apps/login/login.page.scss
@@ -1,76 +1,35 @@
-.content {
-  --background: #333333;
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+  background: var(--tui-base-02);
 }

-.grid {
-  height: 100%;
-  max-width: 540px;
-}
-
-.row {
-  height: 100%;
+.card {
+  @include center-all();
+  overflow: visible;
  align-items: center;
  text-align: center;
+  width: max(50%, 20rem);
 }

-.banner {
-  position: absolute;
-  padding: 20px;
-  width: 100%;
-  display: inline-block;
-
-  ion-item {
-    max-width: 800px;
-    margin: auto;
-  }
-}
-
-ion-card {
-  background: #414141;
-  box-shadow: 0 4px 4px rgba(17, 17, 17, 0.144);
-  border-radius: 35px;
-  min-height: 16rem;
-  contain: unset;
-  overflow: unset;
-  position: relative;
-}
-
-ion-item {
-  --background: transparent;
-  --border-radius: 0px;
-}
-  
-.title {
-  padding-top: 55px;
-  color: #e0e0e0;
-  font-size: 1.3rem;
+.logo {
+  @include center-left();
+  top: -17%;
+  width: 6rem;
 }

 .header {
-  &-icon {
-    width: 100px;
-    position: absolute;
-    left: 50%;
-    margin-left: -50px;
-    top: -17%;
-    z-index: 100;
-  }
-}
-
-.login-button {
-  height: 45px;
-  width: 120px;
-  --border-radius: 50px;
-  margin: 0 auto;
-  margin-top: 27px;
-  margin-bottom: 10px;
-}
-
-.item-interactive {
-  --highlight-background: #5260ff !important;
+  margin: 2rem 0 1rem;
+  text-align: center;
+  font-size: 2rem;
 }

 .error {
-  display: block;
-  padding-top: 4px;
+  min-height: 2.5rem;
+}
+
+.button {
+  width: 10rem;
+  border-radius: 10rem;
+  margin-bottom: 1rem;
 }
--- a/web/projects/ui/src/app/apps/login/login.page.ts
+++ b/web/projects/ui/src/app/apps/login/login.page.ts
@@ -8,7 +8,6 @@ import { LoadingService } from '@start9labs/shared'
 import { TuiDestroyService } from '@taiga-ui/cdk'
 import { takeUntil } from 'rxjs'
 import { DOCUMENT } from '@angular/common'
-import { WINDOW } from '@ng-web-apis/common'

@Component({
  selector: 'login',
@@ -18,7 +17,6 @@ import { WINDOW } from '@ng-web-apis/common'
 })
 export class LoginPage {
  password = ''
-  unmasked = false
  error = ''

  constructor(
@@ -29,14 +27,8 @@ export class LoginPage {
    private readonly api: ApiService,
    public readonly config: ConfigService,
    @Inject(DOCUMENT) public readonly document: Document,
-    @Inject(WINDOW) private readonly windowRef: Window,
  ) {}

-  launchHttps() {
-    const host = this.config.getHost()
-    this.windowRef.open(`https://${host}`, '_self')
-  }
-
  async submit() {
    this.error = ''

--- a/web/projects/ui/src/app/apps/login/warning.component.ts
+++ b/web/projects/ui/src/app/apps/login/warning.component.ts
@@ -0,0 +1,60 @@
+import { NgIf } from '@angular/common'
+import { Component, inject } from '@angular/core'
+import { WINDOW } from '@ng-web-apis/common'
+import { TuiNotificationModule } from '@taiga-ui/core'
+import { TuiButtonModule, TuiIconsModule } from '@taiga-ui/experimental'
+import { ConfigService } from 'src/app/services/config.service'
+
+@Component({
+  standalone: true,
+  selector: 'login-warning',
+  template: `
+    <tui-notification *ngIf="config.isTorHttp()" status="warning">
+      <button
+        tuiButton
+        size="s"
+        appearance="neutral"
+        iconRight="tuiIconExternalLink"
+        (click)="launchHttps()"
+      >
+        Open Https
+      </button>
+      <h2><strong>Http detected</strong></h2>
+      <p>
+        Tor is faster over https. Your Root CA must be trusted.
+        <a
+          href="https://docs.start9.com/0.3.5.x/user-manual/trust-ca"
+          target="_blank"
+          rel="noreferrer"
+        >
+          View instructions
+        </a>
+      </p>
+    </tui-notification>
+  `,
+  styles: [
+    `
+      @import '@taiga-ui/core/styles/taiga-ui-local';
+
+      :host {
+        @include center-left();
+        top: 1rem;
+        width: max(50%, 20rem);
+      }
+
+      button {
+        float: right;
+        margin: 0.5rem 0 0.5rem 1rem;
+      }
+    `,
+  ],
+  imports: [NgIf, TuiButtonModule, TuiIconsModule, TuiNotificationModule],
+})
+export class LoginWarningComponent {
+  private readonly windowRef = inject(WINDOW)
+  readonly config = inject(ConfigService)
+
+  launchHttps() {
+    this.windowRef.open(`https://${this.config.getHost()}`, '_self')
+  }
+}
--- a/web/projects/ui/src/app/apps/portal/components/form.component.ts
+++ b/web/projects/ui/src/app/apps/portal/components/form.component.ts
@@ -0,0 +1,166 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input,
+  OnInit,
+} from '@angular/core'
+import { FormGroup, ReactiveFormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { InputSpec } from '@start9labs/start-sdk/lib/config/configTypes'
+import {
+  tuiMarkControlAsTouchedAndValidate,
+  TuiValueChangesModule,
+} from '@taiga-ui/cdk'
+import { TuiDialogContext, TuiModeModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
+import { TuiDialogFormService } from '@taiga-ui/kit'
+import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { compare, Operation } from 'fast-json-patch'
+import { FormModule } from 'src/app/common/form/form.module'
+import { InvalidService } from 'src/app/common/form/invalid.service'
+import { FormService } from 'src/app/services/form.service'
+
+export interface ActionButton<T> {
+  text: string
+  handler?: (value: T) => Promise<boolean | void> | void
+  link?: string
+}
+
+export interface FormContext<T> {
+  spec: InputSpec
+  buttons: ActionButton<T>[]
+  value?: T
+  patch?: Operation[]
+}
+
+@Component({
+  standalone: true,
+  selector: 'app-form',
+  template: `
+    <form
+      [formGroup]="form"
+      (submit.capture.prevent)="(0)"
+      (reset.capture.prevent.stop)="onReset()"
+      (tuiValueChanges)="markAsDirty()"
+    >
+      <form-group [spec]="spec" />
+      <footer tuiMode="onDark">
+        <ng-content />
+        <ng-container *ngFor="let button of buttons; let last = last">
+          <button
+            *ngIf="button.handler; else link"
+            tuiButton
+            [appearance]="last ? 'primary' : 'flat'"
+            [type]="last ? 'submit' : 'button'"
+            (click)="onClick(button.handler)"
+          >
+            {{ button.text }}
+          </button>
+          <ng-template #link>
+            <a
+              tuiButton
+              appearance="flat"
+              [routerLink]="button.link"
+              (click)="close()"
+            >
+              {{ button.text }}
+            </a>
+          </ng-template>
+        </ng-container>
+      </footer>
+    </form>
+  `,
+  styles: [
+    `
+      footer {
+        position: sticky;
+        bottom: 0;
+        z-index: 10;
+        display: flex;
+        justify-content: flex-end;
+        padding: 1rem 0;
+        margin: 1rem 0 -1rem;
+        gap: 1rem;
+        background: var(--tui-elevation-01);
+        border-top: 1px solid var(--tui-base-02);
+      }
+    `,
+  ],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    RouterModule,
+    TuiValueChangesModule,
+    TuiButtonModule,
+    TuiModeModule,
+    FormModule,
+  ],
+  providers: [InvalidService],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormComponent<T extends Record<string, any>> implements OnInit {
+  private readonly dialogFormService = inject(TuiDialogFormService)
+  private readonly formService = inject(FormService)
+  private readonly invalidService = inject(InvalidService)
+  private readonly context = inject<TuiDialogContext<void, FormContext<T>>>(
+    POLYMORPHEUS_CONTEXT,
+    { optional: true },
+  )
+
+  @Input() spec = this.context?.data.spec || {}
+  @Input() buttons = this.context?.data.buttons || []
+  @Input() patch = this.context?.data.patch || []
+  @Input() value?: T = this.context?.data.value
+
+  form = new FormGroup({})
+
+  ngOnInit() {
+    this.dialogFormService.markAsPristine()
+    this.form = this.formService.createForm(this.spec, this.value)
+    this.process(this.patch)
+  }
+
+  onReset() {
+    const { value } = this.form
+
+    this.form = this.formService.createForm(this.spec)
+    this.process(compare(this.form.value, value))
+    tuiMarkControlAsTouchedAndValidate(this.form)
+    this.markAsDirty()
+  }
+
+  async onClick(handler: Required<ActionButton<T>>['handler']) {
+    tuiMarkControlAsTouchedAndValidate(this.form)
+    this.invalidService.scrollIntoView()
+
+    if (this.form.valid && (await handler(this.form.value as T))) {
+      this.close()
+    }
+  }
+
+  markAsDirty() {
+    this.dialogFormService.markAsDirty()
+  }
+
+  close() {
+    this.context?.$implicit.complete()
+  }
+
+  private process(patch: Operation[]) {
+    patch.forEach(({ op, path }) => {
+      const control = this.form.get(path.substring(1).split('/'))
+
+      if (!control || !control.parent) return
+
+      if (op !== 'remove') {
+        control.markAsDirty()
+        control.markAsTouched()
+      }
+
+      control.parent.markAsDirty()
+      control.parent.markAsTouched()
+    })
+  }
+}
--- a/web/projects/ui/src/app/apps/portal/components/header/connection.component.ts
+++ b/web/projects/ui/src/app/apps/portal/components/header/connection.component.ts
@@ -12,9 +12,12 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
  template: `
    <ng-content />
    @if (connection$ | async; as connection) {
+      <!-- data-connection is used to display color indicator in the header through :has() -->
      <tui-icon
        [icon]="connection.icon"
        [style.color]="connection.color"
+        [style.font-size.em]="1.5"
+        [attr.data-connection]="connection.status"
      ></tui-icon>
      {{ connection.message }}
    }
@@ -27,6 +30,11 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
        gap: 0.5rem;
        padding: 0 2rem;
      }
+
+      :host-context(tui-root._mobile) {
+        display: none;
+        font-size: 1rem;
+      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -37,6 +45,7 @@ export class HeaderConnectionComponent {
    message: string
    color: string
    icon: string
+    status: string
  }> = combineLatest([
    inject(ConnectionService).networkConnected$,
    inject(ConnectionService).websocketConnected$.pipe(startWith(false)),
@@ -50,30 +59,35 @@ export class HeaderConnectionComponent {
          message: 'No Internet',
          color: 'var(--tui-error-fill)',
          icon: 'tuiIconCloudOff',
+          status: 'error',
        }
      if (!websocket)
        return {
          message: 'Connecting',
          color: 'var(--tui-warning-fill)',
          icon: 'tuiIconCloudOff',
+          status: 'warning',
        }
      if (status['shutting-down'])
        return {
          message: 'Shutting Down',
          color: 'var(--tui-neutral-fill)',
          icon: 'tuiIconPower',
+          status: 'neutral',
        }
      if (status.restarting)
        return {
          message: 'Restarting',
          color: 'var(--tui-neutral-fill)',
          icon: 'tuiIconPower',
+          status: 'neutral',
        }

      return {
        message: 'Connected',
        color: 'var(--tui-success-fill)',
        icon: 'tuiIconCloud',
+        status: 'success',
      }
    }),
  )
--- a/web/projects/ui/src/app/apps/portal/components/header/header.component.ts
+++ b/web/projects/ui/src/app/apps/portal/components/header/header.component.ts
@@ -1,31 +1,47 @@
 import { AsyncPipe } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { RouterLink, RouterLinkActive } from '@angular/router'
+import {
+  IsActiveMatchOptions,
+  RouterLink,
+  RouterLinkActive,
+} from '@angular/router'
+import { PatchDB } from 'patch-db-client'
 import { HeaderConnectionComponent } from './connection.component'
 import { HeaderHomeComponent } from './home.component'
 import { HeaderCornerComponent } from './corner.component'
 import { HeaderBreadcrumbComponent } from './breadcrumb.component'
+import { HeaderSnekDirective } from './snek.directive'
+import { HeaderMobileComponent } from './mobile.component'
+import { DataModel } from 'src/app/services/patch-db/data-model'
 import { BreadcrumbsService } from '../../services/breadcrumbs.service'

@Component({
  selector: 'header[appHeader]',
  template: `
    <a headerHome routerLink="/portal/desktop" routerLinkActive="active">
-      <div class="plank"></div>
+      <div class="plaque"></div>
    </a>
    @for (item of breadcrumbs$ | async; track $index) {
      <a
        routerLinkActive="active"
        [routerLink]="item.routerLink"
-        [routerLinkActiveOptions]="{ exact: true }"
+        [routerLinkActiveOptions]="options"
        [headerBreadcrumb]="item"
      >
-        <div class="plank"></div>
+        <div class="plaque"></div>
      </a>
    }
-    <div [style.flex]="1"><div class="plank"></div></div>
-    <header-connection><div class="plank"></div></header-connection>
-    <header-corner><div class="plank"></div></header-corner>
+    <div [style.flex]="1" [headerMobile]="breadcrumbs$ | async">
+      <div class="plaque"></div>
+      <img
+        [appSnek]="(snekScore$ | async) || 0"
+        class="snek"
+        alt="Play Snake"
+        src="assets/img/icons/snek.png"
+      />
+    </div>
+    <header-connection><div class="plaque"></div></header-connection>
+    <header-corner><div class="plaque"></div></header-corner>
  `,
  styles: [
    `
@@ -53,9 +69,43 @@ import { BreadcrumbsService } from '../../services/breadcrumbs.service'
            backdrop-filter: blur(2rem) brightness(0.75) saturate(0.75);
          }
        }
+
+        &:has([data-connection='error']) {
+          --status: var(--tui-error-fill);
+        }
+
+        &:has([data-connection='warning']) {
+          --status: var(--tui-warning-fill);
+        }
+
+        &:has([data-connection='neutral']) {
+          --status: var(--tui-neutral-fill);
+        }
+
+        &:has([data-connection='success']) {
+          --status: var(--tui-success-fill);
+        }
      }

-      .plank {
+      header-connection .plaque::before {
+        box-shadow:
+          inset 0 1px rgba(255, 255, 255, 0.25),
+          inset 0 -0.25rem var(--tui-success-fill);
+      }
+
+      :host-context(tui-root._mobile) {
+        a {
+          display: none;
+        }
+
+        header-corner .plaque::before {
+          box-shadow:
+            inset 0 1px rgb(255 255 255 / 25%),
+            inset -0.375rem 0 var(--status);
+        }
+      }
+
+      .plaque {
        @include transition(opacity);
        position: absolute;
        inset: 0;
@@ -83,6 +133,19 @@ import { BreadcrumbsService } from '../../services/breadcrumbs.service'
          box-shadow: inset 0 1px rgb(255 255 255 / 25%);
        }
      }
+
+      .snek {
+        @include center-top();
+        @include transition(opacity);
+        right: 2rem;
+        width: 1rem;
+        opacity: 0.2;
+        cursor: pointer;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
    `,
  ],
  standalone: true,
@@ -90,13 +153,29 @@ import { BreadcrumbsService } from '../../services/breadcrumbs.service'
  imports: [
    RouterLink,
    RouterLinkActive,
+    AsyncPipe,
    HeaderConnectionComponent,
    HeaderHomeComponent,
    HeaderCornerComponent,
-    AsyncPipe,
+    HeaderSnekDirective,
    HeaderBreadcrumbComponent,
+    HeaderMobileComponent,
  ],
 })
 export class HeaderComponent {
+  readonly options = OPTIONS
  readonly breadcrumbs$ = inject(BreadcrumbsService)
+  readonly snekScore$ = inject(PatchDB<DataModel>).watch$(
+    'ui',
+    'gaming',
+    'snake',
+    'high-score',
+  )
+}
+
+const OPTIONS: IsActiveMatchOptions = {
+  paths: 'exact',
+  queryParams: 'ignored',
+  fragment: 'ignored',
+  matrixParams: 'ignored',
 }
--- a/web/projects/ui/src/app/apps/portal/components/header/menu.component.ts
+++ b/web/projects/ui/src/app/apps/portal/components/header/menu.component.ts
@@ -16,6 +16,7 @@ import { AuthService } from 'src/app/services/auth.service'
 import { ABOUT } from './about.component'
 import { getAllPackages } from 'src/app/util/get-package-data'
 import { DataModel } from 'src/app/services/patch-db/data-model'
+import { HeaderConnectionComponent } from './connection.component'

@Component({
  selector: 'header-menu',
@@ -26,7 +27,9 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
      </button>
      <ng-template #content>
        <tui-data-list>
-          <h3 class="title">StartOS</h3>
+          <header-connection class="status">
+            <h3 class="title">StartOS</h3>
+          </header-connection>
          <button tuiOption class="item" (click)="about()">
            <tui-icon icon="tuiIconInfo" />
            About this server
@@ -75,9 +78,16 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
        gap: 0.75rem;
      }

+      .status {
+        display: flex !important;
+        font-size: 0;
+        padding: 0 0.5rem;
+        height: 2rem;
+        width: 14rem;
+      }
+
      .title {
-        margin: 0;
-        padding: 0 0.5rem 0.25rem;
+        margin: 0 auto 0 0;
        font: var(--tui-font-text-l);
        font-weight: bold;
      }
@@ -96,6 +106,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
    TuiSvgModule,
    TuiButtonModule,
    TuiIconModule,
+    HeaderConnectionComponent,
  ],
 })
 export class HeaderMenuComponent {
--- a/web/projects/ui/src/app/apps/portal/components/header/mobile.component.ts
+++ b/web/projects/ui/src/app/apps/portal/components/header/mobile.component.ts
@@ -0,0 +1,68 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { TuiIconModule } from '@taiga-ui/experimental'
+import { Breadcrumb } from '../../services/breadcrumbs.service'
+import { RouterLink } from '@angular/router'
+
+@Component({
+  standalone: true,
+  selector: '[headerMobile]',
+  template: `
+    @if (headerMobile?.length) {
+      <a [routerLink]="back" [style.padding.rem]="0.75">
+        <tui-icon icon="tuiIconArrowLeft" />
+      </a>
+    }
+    <span class="title">{{ title }}</span>
+    <ng-content />
+  `,
+  styles: [
+    `
+      @import '@taiga-ui/core/styles/taiga-ui-local';
+
+      :host {
+        display: flex;
+        align-items: center;
+        font-size: 1rem;
+
+        > * {
+          display: none;
+        }
+      }
+
+      :host-context(tui-root._mobile) {
+        margin: 0;
+        --clip-path: polygon(
+          0% 0%,
+          calc(100% - 1.75rem) 0%,
+          100% 100%,
+          0% 100%
+        );
+
+        > * {
+          display: block;
+        }
+      }
+
+      .title {
+        @include text-overflow();
+        max-width: calc(100% - 5rem);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TuiIconModule, RouterLink],
+})
+export class HeaderMobileComponent {
+  @Input() headerMobile: readonly Breadcrumb[] | null = []
+
+  get title() {
+    return this.headerMobile?.[this.headerMobile?.length - 1]?.title || ''
+  }
+
+  get back() {
+    return (
+      this.headerMobile?.[this.headerMobile?.length - 2]?.routerLink ||
+      '/portal/desktop'
+    )
+  }
+}
--- a/web/projects/ui/src/app/apps/portal/components/header/snek.component.ts
+++ b/web/projects/ui/src/app/apps/portal/components/header/snek.component.ts
@@ -0,0 +1,300 @@
+import { DOCUMENT } from '@angular/common'
+import {
+  AfterViewInit,
+  Component,
+  HostListener,
+  inject,
+  OnDestroy,
+} from '@angular/core'
+import { pauseFor } from '@start9labs/shared'
+import { TuiButtonModule } from '@taiga-ui/experimental'
+import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { TuiDialogContext } from '@taiga-ui/core'
+
+@Component({
+  standalone: true,
+  template: `
+    <div class="canvas-center">
+      <canvas id="game"></canvas>
+    </div>
+    <footer class="footer">
+      <strong>Score: {{ score }}</strong>
+      <span>High Score: {{ highScore }}</span>
+      <button tuiButton (click)="dismiss()">Save and Quit</button>
+    </footer>
+  `,
+  styles: [
+    `
+      .canvas-center {
+        min-height: 50vh;
+        padding-top: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-top: 32px;
+      }
+    `,
+  ],
+  imports: [TuiButtonModule],
+})
+export class HeaderSnekComponent implements AfterViewInit, OnDestroy {
+  private readonly document = inject(DOCUMENT)
+  private readonly dialog = inject(POLYMORPHEUS_CONTEXT) as TuiDialogContext<
+    number,
+    number
+  >
+
+  highScore: number = this.dialog.data
+  score = 0
+
+  private readonly speed = 45
+  private readonly width = 40
+  private readonly height = 26
+  private grid = NaN
+
+  private readonly startingLength = 4
+
+  private xDown?: number
+  private yDown?: number
+  private canvas!: HTMLCanvasElement
+  private image!: HTMLImageElement
+  private context!: CanvasRenderingContext2D
+
+  private snake: any
+  private bitcoin: { x: number; y: number } = { x: NaN, y: NaN }
+
+  private moveQueue: String[] = []
+  private destroyed = false
+
+  dismiss() {
+    this.dialog.completeWith(this.highScore)
+  }
+
+  @HostListener('document:keydown', ['$event'])
+  keyEvent(e: KeyboardEvent) {
+    this.moveQueue.push(e.key)
+  }
+
+  @HostListener('touchstart', ['$event'])
+  touchStart(e: TouchEvent) {
+    this.handleTouchStart(e)
+  }
+
+  @HostListener('touchmove', ['$event'])
+  touchMove(e: TouchEvent) {
+    this.handleTouchMove(e)
+  }
+
+  @HostListener('window:resize')
+  sizeChange() {
+    this.init()
+  }
+
+  ngOnDestroy() {
+    this.destroyed = true
+  }
+
+  ngAfterViewInit() {
+    this.init()
+
+    this.image = new Image()
+    this.image.onload = () => {
+      requestAnimationFrame(async () => await this.loop())
+    }
+    this.image.src = '../../../../../../assets/img/icons/bitcoin.svg'
+  }
+
+  init() {
+    this.canvas = this.document.querySelector('canvas#game')!
+    this.canvas.style.border = '1px solid #e0e0e0'
+    this.context = this.canvas.getContext('2d')!
+    const container = this.document.querySelector('.canvas-center')!
+    this.grid = Math.min(
+      Math.floor(container.clientWidth / this.width),
+      Math.floor(container.clientHeight / this.height),
+    )
+    this.snake = {
+      x: this.grid * (Math.floor(this.width / 2) - this.startingLength),
+      y: this.grid * Math.floor(this.height / 2),
+      // snake velocity. moves one grid length every frame in either the x or y direction
+      dx: this.grid,
+      dy: 0,
+      // keep track of all grids the snake body occupies
+      cells: [],
+      // length of the snake. grows when eating an bitcoin
+      maxCells: this.startingLength,
+    }
+    this.bitcoin = {
+      x: this.getRandomInt(0, this.width) * this.grid,
+      y: this.getRandomInt(0, this.height) * this.grid,
+    }
+
+    this.canvas.width = this.grid * this.width
+    this.canvas.height = this.grid * this.height
+    this.context.imageSmoothingEnabled = false
+  }
+
+  getTouches(evt: TouchEvent) {
+    return evt.touches
+  }
+
+  handleTouchStart(evt: TouchEvent) {
+    const firstTouch = this.getTouches(evt)[0]
+    this.xDown = firstTouch.clientX
+    this.yDown = firstTouch.clientY
+  }
+
+  handleTouchMove(evt: TouchEvent) {
+    if (!this.xDown || !this.yDown) {
+      return
+    }
+
+    var xUp = evt.touches[0].clientX
+    var yUp = evt.touches[0].clientY
+
+    var xDiff = this.xDown - xUp
+    var yDiff = this.yDown - yUp
+
+    if (Math.abs(xDiff) > Math.abs(yDiff)) {
+      /*most significant*/
+      if (xDiff > 0) {
+        this.moveQueue.push('ArrowLeft')
+      } else {
+        this.moveQueue.push('ArrowRight')
+      }
+    } else {
+      if (yDiff > 0) {
+        this.moveQueue.push('ArrowUp')
+      } else {
+        this.moveQueue.push('ArrowDown')
+      }
+    }
+    /* reset values */
+    this.xDown = undefined
+    this.yDown = undefined
+  }
+
+  // game loop
+  async loop() {
+    if (this.destroyed) return
+
+    await pauseFor(this.speed)
+
+    requestAnimationFrame(async () => await this.loop())
+
+    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
+
+    // move snake by its velocity
+    this.snake.x += this.snake.dx
+    this.snake.y += this.snake.dy
+
+    if (this.moveQueue.length) {
+      const move = this.moveQueue.shift()
+      // left arrow key
+      if (move === 'ArrowLeft' && this.snake.dx === 0) {
+        this.snake.dx = -this.grid
+        this.snake.dy = 0
+      }
+      // up arrow key
+      else if (move === 'ArrowUp' && this.snake.dy === 0) {
+        this.snake.dy = -this.grid
+        this.snake.dx = 0
+      }
+      // right arrow key
+      else if (move === 'ArrowRight' && this.snake.dx === 0) {
+        this.snake.dx = this.grid
+        this.snake.dy = 0
+      }
+      // down arrow key
+      else if (move === 'ArrowDown' && this.snake.dy === 0) {
+        this.snake.dy = this.grid
+        this.snake.dx = 0
+      }
+    }
+
+    // edge death
+    if (
+      this.snake.x < 0 ||
+      this.snake.y < 0 ||
+      this.snake.x >= this.canvas.width ||
+      this.snake.y >= this.canvas.height
+    ) {
+      this.death()
+    }
+
+    // keep track of where snake has been. front of the array is always the head
+    this.snake.cells.unshift({ x: this.snake.x, y: this.snake.y })
+
+    // remove cells as we move away from them
+    if (this.snake.cells.length > this.snake.maxCells) {
+      this.snake.cells.pop()
+    }
+
+    // draw bitcoin
+    this.context.fillStyle = '#ff4961'
+    this.context.drawImage(
+      this.image,
+      this.bitcoin.x - 1,
+      this.bitcoin.y - 1,
+      this.grid + 2,
+      this.grid + 2,
+    )
+
+    // draw snake one cell at a time
+    this.context.fillStyle = '#2fdf75'
+
+    const firstCell = this.snake.cells[0]
+
+    for (let index = 0; index < this.snake.cells.length; index++) {
+      const cell = this.snake.cells[index]
+
+      // drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is
+      this.context.fillRect(cell.x, cell.y, this.grid - 1, this.grid - 1)
+
+      // snake ate bitcoin
+      if (cell.x === this.bitcoin.x && cell.y === this.bitcoin.y) {
+        this.score++
+        this.highScore = Math.max(this.score, this.highScore)
+        this.snake.maxCells++
+
+        this.bitcoin.x = this.getRandomInt(0, this.width) * this.grid
+        this.bitcoin.y = this.getRandomInt(0, this.height) * this.grid
+      }
+
+      if (index > 0) {
+        // check collision with all cells after this one (modified bubble sort)
+        // snake occupies same space as a body part. reset game
+        if (
+          firstCell.x === this.snake.cells[index].x &&
+          firstCell.y === this.snake.cells[index].y
+        ) {
+          this.death()
+        }
+      }
+    }
+  }
+
+  death() {
+    this.snake.x =
+      this.grid * (Math.floor(this.width / 2) - this.startingLength)
+    this.snake.y = this.grid * Math.floor(this.height / 2)
+    this.snake.cells = []
+    this.snake.maxCells = this.startingLength
+    this.snake.dx = this.grid
+    this.snake.dy = 0
+
+    this.bitcoin.x = this.getRandomInt(0, 25) * this.grid
+    this.bitcoin.y = this.getRandomInt(0, 25) * this.grid
+    this.score = 0
+  }
+
+  getRandomInt(min: number, max: number) {
+    return Math.floor(Math.random() * (max - min)) + min
+  }
+}
--- a/web/projects/ui/src/app/apps/portal/components/header/snek.directive.ts
+++ b/web/projects/ui/src/app/apps/portal/components/header/snek.directive.ts
@@ -0,0 +1,47 @@
+import { Directive, HostListener, inject, Input } from '@angular/core'
+import { ErrorService, LoadingService } from '@start9labs/shared'
+import { TuiDialogService } from '@taiga-ui/core'
+import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
+import { filter } from 'rxjs'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { HeaderSnekComponent } from './snek.component'
+
+@Directive({
+  standalone: true,
+  selector: 'img[appSnek]',
+})
+export class HeaderSnekDirective {
+  private readonly dialogs = inject(TuiDialogService)
+  private readonly loader = inject(LoadingService)
+  private readonly errorService = inject(ErrorService)
+  private readonly api = inject(ApiService)
+
+  @Input()
+  appSnek = 0
+
+  @HostListener('click')
+  async onClick() {
+    this.dialogs
+      .open<number>(new PolymorpheusComponent(HeaderSnekComponent), {
+        label: 'Snake!',
+        closeable: false,
+        dismissible: false,
+        data: this.appSnek,
+      })
+      .pipe(filter(score => score > this.appSnek))
+      .subscribe(async score => {
+        const loader = this.loader.open('Saving high score...').subscribe()
+
+        try {
+          await this.api.setDbValue<number>(
+            ['gaming', 'snake', 'high-score'],
+            score,
+          )
+        } catch (e: any) {
+          this.errorService.handleError(e)
+        } finally {
+          loader.unsubscribe()
+        }
+      })
+  }
+}
--- a/web/projects/ui/src/app/apps/portal/modals/prompt.component.ts
+++ b/web/projects/ui/src/app/apps/portal/modals/prompt.component.ts
@@ -0,0 +1,124 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { TuiAutoFocusModule } from '@taiga-ui/cdk'
+import { TuiDialogContext, TuiTextfieldControllerModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
+import { TuiInputModule } from '@taiga-ui/kit'
+import {
+  POLYMORPHEUS_CONTEXT,
+  PolymorpheusComponent,
+} from '@tinkoff/ng-polymorpheus'
+
+@Component({
+  standalone: true,
+  template: `
+    <p>{{ options.message }}</p>
+    <p *ngIf="options.warning" class="warning">{{ options.warning }}</p>
+    <form (ngSubmit)="submit(value.trim())">
+      <tui-input
+        tuiAutoFocus
+        [tuiTextfieldLabelOutside]="!options.label"
+        [tuiTextfieldCustomContent]="options.useMask ? toggle : ''"
+        [ngModelOptions]="{ standalone: true }"
+        [(ngModel)]="value"
+      >
+        {{ options.label }}
+        <span *ngIf="options.required !== false && options.label">*</span>
+        <input
+          tuiTextfield
+          [class.masked]="options.useMask && masked && value"
+          [placeholder]="options.placeholder || ''"
+        />
+      </tui-input>
+      <footer class="g-buttons">
+        <button
+          tuiButton
+          type="button"
+          appearance="secondary"
+          (click)="cancel()"
+        >
+          Cancel
+        </button>
+        <button tuiButton [disabled]="!value && options.required !== false">
+          {{ options.buttonText || 'Submit' }}
+        </button>
+      </footer>
+    </form>
+
+    <ng-template #toggle>
+      <button
+        tuiIconButton
+        type="button"
+        appearance="icon"
+        title="Toggle masking"
+        size="xs"
+        class="button"
+        [iconLeft]="masked ? 'tuiIconEye' : 'tuiIconEyeOff'"
+        (click)="masked = !masked"
+      ></button>
+    </ng-template>
+  `,
+  styles: [
+    `
+      .warning {
+        color: var(--tui-warning-fill);
+      }
+
+      .button {
+        pointer-events: auto;
+        margin-left: 0.25rem;
+      }
+
+      .masked {
+        font-family: text-security-disc;
+        -webkit-text-security: disc;
+      }
+    `,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    TuiInputModule,
+    TuiButtonModule,
+    TuiTextfieldControllerModule,
+    TuiAutoFocusModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PromptComponent {
+  masked = this.options.useMask
+  value = this.options.initialValue || ''
+
+  constructor(
+    @Inject(POLYMORPHEUS_CONTEXT)
+    private readonly context: TuiDialogContext<string, PromptOptions>,
+  ) {}
+
+  get options(): PromptOptions {
+    return this.context.data
+  }
+
+  cancel() {
+    this.context.$implicit.complete()
+  }
+
+  submit(value: string) {
+    if (value || !this.options.required) {
+      this.context.$implicit.next(value)
+    }
+  }
+}
+
+export const PROMPT = new PolymorpheusComponent(PromptComponent)
+
+export interface PromptOptions {
+  message: string
+  label?: string
+  warning?: string
+  buttonText?: string
+  placeholder?: string
+  required?: boolean
+  useMask?: boolean
+  initialValue?: string | null
+}
--- a/web/projects/ui/src/app/apps/portal/routes/service/modals/config.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/service/modals/config.component.ts
@@ -29,8 +29,10 @@ import { hasCurrentDeps } from 'src/app/util/has-deps'
 import { getAllPackages, getPackage } from 'src/app/util/get-package-data'
 import { Breakages } from 'src/app/services/api/api.types'
 import { InvalidService } from 'src/app/common/form/invalid.service'
-import { ActionButton, FormPage } from 'src/app/apps/ui/modals/form/form.page'
-import { FormPageModule } from 'src/app/apps/ui/modals/form/form.module'
+import {
+  ActionButton,
+  FormComponent,
+} from 'src/app/apps/portal/components/form.component'
 import { PackageConfigData } from '../types/package-config-data'
 import { ConfigDepComponent } from '../components/config-dep.component'

@@ -68,7 +70,7 @@ import { ConfigDepComponent } from '../components/config-dep.component'
        {{ pkg.manifest.version }}.
      </tui-notification>

-      <form-page
+      <app-form
        tuiMode="onDark"
        [spec]="spec"
        [value]="value || {}"
@@ -83,7 +85,7 @@ import { ConfigDepComponent } from '../components/config-dep.component'
        >
          Reset Defaults
        </button>
-      </form-page>
+      </app-form>
    </ng-container>
  `,
  styles: [
@@ -97,7 +99,7 @@ import { ConfigDepComponent } from '../components/config-dep.component'
  standalone: true,
  imports: [
    CommonModule,
-    FormPageModule,
+    FormComponent,
    TuiLoaderModule,
    TuiNotificationModule,
    TuiButtonModule,
@@ -107,8 +109,8 @@ import { ConfigDepComponent } from '../components/config-dep.component'
  providers: [InvalidService],
 })
 export class ServiceConfigModal {
-  @ViewChild(FormPage)
-  private readonly form?: FormPage<Record<string, any>>
+  @ViewChild(FormComponent)
+  private readonly form?: FormComponent<Record<string, any>>

  readonly pkgId = this.context.data.pkgId
  readonly dependentInfo = this.context.data.dependentInfo
--- a/web/projects/ui/src/app/apps/portal/routes/service/routes/actions.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/service/routes/actions.component.ts
@@ -13,6 +13,7 @@ import { TUI_PROMPT } from '@taiga-ui/kit'
 import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
 import { PatchDB } from 'patch-db-client'
 import { filter, switchMap, timer } from 'rxjs'
+import { FormComponent } from 'src/app/apps/portal/components/form.component'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import {
  Action,
@@ -22,7 +23,6 @@ import {
 } from 'src/app/services/patch-db/data-model'
 import { hasCurrentDeps } from 'src/app/util/has-deps'
 import { FormDialogService } from 'src/app/services/form-dialog.service'
-import { FormPage } from 'src/app/apps/ui/modals/form/form.page'
 import { ServiceActionComponent } from '../components/action.component'
 import { ServiceActionSuccessComponent } from '../components/action-success.component'
 import { DesktopService } from '../../../services/desktop.service'
@@ -97,7 +97,7 @@ export class ServiceActionsRoute {
        .subscribe()
    } else {
      if (action['input-spec'] && !isEmptyObject(action['input-spec'])) {
-        this.formDialog.open(FormPage, {
+        this.formDialog.open(FormComponent, {
          label: action.name,
          data: {
            spec: action['input-spec'],
--- a/web/projects/ui/src/app/apps/portal/routes/system/backups/components/physical.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/backups/components/physical.component.ts
@@ -9,9 +9,8 @@ import {
 import { TuiForModule } from '@taiga-ui/cdk'
 import { TuiSvgModule } from '@taiga-ui/core'
 import { TuiButtonModule } from '@taiga-ui/experimental'
-import { UnknownDisk } from 'src/app/services/api/api.types'
-import { IonicModule } from '@ionic/angular'
 import { UnitConversionPipesModule } from '@start9labs/shared'
+import { UnknownDisk } from 'src/app/services/api/api.types'

@Component({
  selector: 'table[backupsPhysical]',
@@ -69,7 +68,6 @@ import { UnitConversionPipesModule } from '@start9labs/shared'
    TuiForModule,
    TuiSvgModule,
    TuiButtonModule,
-    IonicModule,
    UnitConversionPipesModule,
  ],
 })
--- a/web/projects/ui/src/app/apps/portal/routes/system/backups/modals/targets.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/backups/modals/targets.component.ts
@@ -9,7 +9,7 @@ import { TuiNotificationModule } from '@taiga-ui/core'
 import { TuiButtonModule, TuiFadeModule } from '@taiga-ui/experimental'
 import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
 import { BehaviorSubject } from 'rxjs'
-import { FormPage } from 'src/app/apps/ui/modals/form/form.page'
+import { FormComponent } from 'src/app/apps/portal/components/form.component'
 import { configBuilderToSpec } from 'src/app/util/configBuilderToSpec'
 import {
  cifsSpec,
@@ -17,7 +17,7 @@ import {
  dropboxSpec,
  googleDriveSpec,
  remoteBackupTargetSpec,
-} from 'src/app/apps/ui/pages/backups/types/target-types'
+} from '../types/target'
 import { FormDialogService } from 'src/app/services/form-dialog.service'
 import {
  BackupTarget,
@@ -126,7 +126,7 @@ export class BackupsTargetsModal implements OnInit {
  }

  async onUpdate(value: BackupTarget) {
-    this.formDialog.open(FormPage, {
+    this.formDialog.open(FormComponent, {
      label: 'Update Target',
      data: {
        value,
@@ -147,7 +147,7 @@ export class BackupsTargetsModal implements OnInit {
  }

  async addPhysical(disk: UnknownDisk) {
-    this.formDialog.open(FormPage, {
+    this.formDialog.open(FormComponent, {
      label: 'New Physical Target',
      data: {
        spec: await configBuilderToSpec(diskBackupTargetSpec),
@@ -173,7 +173,7 @@ export class BackupsTargetsModal implements OnInit {
  }

  async addRemote() {
-    this.formDialog.open(FormPage, {
+    this.formDialog.open(FormComponent, {
      label: 'New Remote Target',
      data: {
        spec: await configBuilderToSpec(remoteBackupTargetSpec),
--- a/web/projects/ui/src/app/apps/portal/routes/system/backups/services/restore.service.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/backups/services/restore.service.ts
@@ -14,12 +14,12 @@ import {
  take,
  tap,
 } from 'rxjs'
-import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { BackupTarget } from 'src/app/services/api/api.types'
 import {
  PROMPT,
  PromptOptions,
-} from 'src/app/apps/ui/modals/prompt/prompt.component'
+} from 'src/app/apps/portal/modals/prompt.component'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { BackupTarget } from 'src/app/services/api/api.types'
 import { TARGET, TARGET_RESTORE } from '../modals/target.component'
 import { RECOVER } from '../modals/recover.component'
 import { RecoverData } from '../types/recover-data'
--- a/web/projects/ui/src/app/apps/portal/routes/system/backups/types/target.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/backups/types/target.ts
@@ -0,0 +1,121 @@
+import { Config } from '@start9labs/start-sdk/lib/config/builder/config'
+import { Value } from '@start9labs/start-sdk/lib/config/builder/value'
+import { Variants } from '@start9labs/start-sdk/lib/config/builder/variants'
+
+export const dropboxSpec = Config.of({
+  name: Value.text({
+    name: 'Name',
+    description: 'A friendly name for this Dropbox target',
+    placeholder: 'My Dropbox',
+    required: { default: null },
+  }),
+  token: Value.text({
+    name: 'Access Token',
+    description: 'The secret access token for your custom Dropbox app',
+    required: { default: null },
+    masked: true,
+  }),
+  path: Value.text({
+    name: 'Path',
+    description: 'The fully qualified path to the backup directory',
+    placeholder: 'e.g. /Desktop/my-folder',
+    required: { default: null },
+  }),
+})
+
+export const googleDriveSpec = Config.of({
+  name: Value.text({
+    name: 'Name',
+    description: 'A friendly name for this Google Drive target',
+    placeholder: 'My Google Drive',
+    required: { default: null },
+  }),
+  path: Value.text({
+    name: 'Path',
+    description: 'The fully qualified path to the backup directory',
+    placeholder: 'e.g. /Desktop/my-folder',
+    required: { default: null },
+  }),
+  key: Value.file({
+    name: 'Private Key File',
+    description:
+      'Your Google Drive service account private key file (.json file)',
+    required: { default: null },
+    extensions: ['json'],
+  }),
+})
+
+export const cifsSpec = Config.of({
+  name: Value.text({
+    name: 'Name',
+    description: 'A friendly name for this Network Folder',
+    placeholder: 'My Network Folder',
+    required: { default: null },
+  }),
+  hostname: Value.text({
+    name: 'Hostname',
+    description:
+      'The hostname of your target device on the Local Area Network.',
+    warning: null,
+    placeholder: `e.g. 'My Computer' OR 'my-computer.local'`,
+    required: { default: null },
+    patterns: [],
+  }),
+  path: Value.text({
+    name: 'Path',
+    description: `On Windows, this is the fully qualified path to the shared folder, (e.g. /Desktop/my-folder).\n\n On Linux and Mac, this is the literal name of the shared folder (e.g. my-shared-folder).`,
+    placeholder: 'e.g. my-shared-folder or /Desktop/my-folder',
+    required: { default: null },
+  }),
+  username: Value.text({
+    name: 'Username',
+    description: `On Linux, this is the samba username you created when sharing the folder.\n\n On Mac and Windows, this is the username of the user who is sharing the folder.`,
+    required: { default: null },
+    placeholder: 'My Network Folder',
+  }),
+  password: Value.text({
+    name: 'Password',
+    description: `On Linux, this is the samba password you created when sharing the folder.\n\n On Mac and Windows, this is the password of the user who is sharing the folder.`,
+    required: false,
+    masked: true,
+    placeholder: 'My Network Folder',
+  }),
+})
+
+export const remoteBackupTargetSpec = Config.of({
+  type: Value.union(
+    {
+      name: 'Target Type',
+      required: { default: 'dropbox' },
+    },
+    Variants.of({
+      dropbox: {
+        name: 'Dropbox',
+        spec: dropboxSpec,
+      },
+      'google-drive': {
+        name: 'Google Drive',
+        spec: googleDriveSpec,
+      },
+      cifs: {
+        name: 'Network Folder',
+        spec: cifsSpec,
+      },
+    }),
+  ),
+})
+
+export const diskBackupTargetSpec = Config.of({
+  name: Value.text({
+    name: 'Name',
+    description: 'A friendly name for this physical target',
+    placeholder: 'My Physical Target',
+    required: { default: null },
+  }),
+  path: Value.text({
+    name: 'Path',
+    description: 'The fully qualified path to the backup directory',
+    placeholder: 'e.g. /Backups/my-folder',
+    required: { default: null },
+  }),
+})
--- a/web/projects/ui/src/app/apps/portal/routes/system/marketplace/components/sidebars.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/marketplace/components/sidebars.component.ts
@@ -13,7 +13,7 @@ import { MarketplaceSidebarService } from '../services/sidebar.service'
    `
      :host {
        position: fixed;
-        inset: 7.5rem 0 0;
+        inset: 3.5rem 0 0;
        pointer-events: none;
        transform: translate3d(0, 0, 0);
      }
--- a/web/projects/ui/src/app/apps/portal/routes/system/marketplace/modals/registry.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/marketplace/modals/registry.component.ts
@@ -21,11 +21,11 @@ import { TUI_PROMPT } from '@taiga-ui/kit'
 import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
 import { PatchDB } from 'patch-db-client'
 import { combineLatest, filter, firstValueFrom, map, Subscription } from 'rxjs'
+import { FormComponent } from 'src/app/apps/portal/components/form.component'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { DataModel, UIStore } from 'src/app/services/patch-db/data-model'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
 import { FormDialogService } from 'src/app/services/form-dialog.service'
-import { FormPage } from 'src/app/apps/ui/modals/form/form.page'
 import { MarketplaceRegistryComponent } from '../components/registry.component'
 import { getMarketplaceValueSpec, getPromptOptions } from '../utils/registry'

@@ -112,7 +112,7 @@ export class MarketplaceRegistryModal {
  add() {
    const { name, spec } = getMarketplaceValueSpec()

-    this.formDialog.open(FormPage, {
+    this.formDialog.open(FormComponent, {
      label: name,
      data: {
        spec,
--- a/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/domains/domains.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/domains/domains.component.ts
@@ -6,14 +6,16 @@ import { TuiButtonModule } from '@taiga-ui/experimental'
 import { TUI_PROMPT } from '@taiga-ui/kit'
 import { PatchDB } from 'patch-db-client'
 import { filter, firstValueFrom, map } from 'rxjs'
-import { DataModel } from 'src/app/services/patch-db/data-model'
-import { FormContext, FormPage } from 'src/app/apps/ui/modals/form/form.page'
-import { FormDialogService } from 'src/app/services/form-dialog.service'
+import {
+  FormComponent,
+  FormContext,
+} from 'src/app/apps/portal/components/form.component'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { getCustomSpec } from 'src/app/apps/ui/pages/system/domains/domain.const'
-import { getStart9ToSpec } from './constants'
-import { DomainsTableComponent } from './table.component'
+import { FormDialogService } from 'src/app/services/form-dialog.service'
+import { DataModel } from 'src/app/services/patch-db/data-model'
+import { getCustomSpec, getStart9ToSpec } from './constants'
 import { DomainsInfoComponent } from './info.component'
+import { DomainsTableComponent } from './table.component'

@Component({
  template: `
@@ -121,7 +123,7 @@ export class SettingsDomainsComponent {
      },
    }

-    this.formDialog.open(FormPage, options)
+    this.formDialog.open(FormComponent, options)
  }

  async claim() {
@@ -146,7 +148,7 @@ export class SettingsDomainsComponent {
      },
    }

-    this.formDialog.open(FormPage, options)
+    this.formDialog.open(FormComponent, options)
  }

  private getNetworkStrategy(strategy: any) {
--- a/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/email/email.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/email/email.component.ts
@@ -24,24 +24,22 @@ import { EmailInfoComponent } from './info.component'
  template: `
    <email-info />
    <ng-container *ngIf="form$ | async as form">
-      <form [formGroup]="form">
+      <form [formGroup]="form" [style.text-align]="'right'">
        <h3 class="g-title">SMTP Credentials</h3>
        <form-group
          *ngIf="spec | async as resolved"
          [spec]="resolved"
        ></form-group>
-        <div class="ion-text-right ion-padding-top">
-          <button
-            tuiButton
-            size="m"
-            [disabled]="form.invalid"
-            (click)="save(form.value)"
-          >
-            Save
-          </button>
-        </div>
+        <button
+          tuiButton
+          [style.margin-top.rem]="1"
+          [disabled]="form.invalid"
+          (click)="save(form.value)"
+        >
+          Save
+        </button>
      </form>
-      <form>
+      <form [style.text-align]="'right'">
        <h3 class="g-title">Test Email</h3>
        <tui-input
          [(ngModel)]="testAddress"
@@ -50,17 +48,15 @@ import { EmailInfoComponent } from './info.component'
          Firstname Lastname &lt;email&#64;example.com&gt;
          <input tuiTextfield inputmode="email" />
        </tui-input>
-        <div class="ion-text-right ion-padding-top">
-          <button
-            tuiButton
-            appearance="secondary"
-            size="m"
-            [disabled]="!testAddress || form.invalid"
-            (click)="sendTestEmail(form)"
-          >
-            Send Test Email
-          </button>
-        </div>
+        <button
+          tuiButton
+          appearance="secondary"
+          [style.margin-top.rem]="1"
+          [disabled]="!testAddress || form.invalid"
+          (click)="sendTestEmail(form)"
+        >
+          Send Test Email
+        </button>
      </form>
    </ng-container>
  `,
--- a/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/proxies/menu.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/proxies/menu.component.ts
@@ -17,9 +17,12 @@ import {
 } from '@taiga-ui/core'
 import { TUI_PROMPT } from '@taiga-ui/kit'
 import { filter } from 'rxjs'
+import {
+  FormComponent,
+  FormContext,
+} from 'src/app/apps/portal/components/form.component'
 import { Proxy } from 'src/app/services/patch-db/data-model'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { FormContext, FormPage } from 'src/app/apps/ui/modals/form/form.page'
 import { FormDialogService } from 'src/app/services/form-dialog.service'
 import { DELETE_OPTIONS, ProxyUpdate } from './constants'

@@ -132,6 +135,6 @@ export class ProxiesMenuComponent {
      },
    }

-    this.formDialog.open(FormPage, options)
+    this.formDialog.open(FormComponent, options)
  }
 }
--- a/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/proxies/proxies.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/proxies/proxies.component.ts
@@ -4,8 +4,11 @@ import { ErrorService, LoadingService } from '@start9labs/shared'
 import { TuiDialogOptions, TuiDialogService } from '@taiga-ui/core'
 import { TuiButtonModule } from '@taiga-ui/experimental'
 import { PatchDB } from 'patch-db-client'
+import {
+  FormComponent,
+  FormContext,
+} from 'src/app/apps/portal/components/form.component'
 import { DataModel } from 'src/app/services/patch-db/data-model'
-import { FormContext, FormPage } from 'src/app/apps/ui/modals/form/form.page'
 import { FormDialogService } from 'src/app/services/form-dialog.service'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ProxiesTableComponent } from './table.component'
@@ -58,7 +61,7 @@ export class SettingsProxiesComponent {
      },
    }

-    this.formDialog.open(FormPage, options)
+    this.formDialog.open(FormComponent, options)
  }

  private async save({ name, config }: WireguardSpec): Promise<boolean> {
--- a/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/ssh/table.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/ssh/table.component.ts
@@ -12,11 +12,11 @@ import {
  TuiLinkModule,
 } from '@taiga-ui/core'
 import { TuiButtonModule } from '@taiga-ui/experimental'
+import { PROMPT } from 'src/app/apps/portal/modals/prompt.component'
 import { SSHKey } from 'src/app/services/api/api.types'
-import { PROMPT } from '../../../../../../ui/modals/prompt/prompt.component'
 import { filter, take } from 'rxjs'
 import { ErrorService, LoadingService } from '@start9labs/shared'
-import { ApiService } from '../../../../../../../services/api/embassy-api.service'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { TUI_PROMPT, TuiPromptData } from '@taiga-ui/kit'
 import { TuiForModule } from '@taiga-ui/cdk'

@@ -35,7 +35,7 @@ import { TuiForModule } from '@taiga-ui/cdk'
    <tbody>
      <tr *ngFor="let key of keys; else: loading">
        <td>{{ key.hostname }}</td>
-        <td>{{ key['created-at'] | date : 'medium' }}</td>
+        <td>{{ key['created-at'] | date: 'medium' }}</td>
        <td>{{ key.alg }}</td>
        <td>{{ key.fingerprint }}</td>
        <td>
--- a/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/wifi/table.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/wifi/table.component.ts
@@ -15,9 +15,12 @@ import {
  TuiIconModule,
  TuiTitleModule,
 } from '@taiga-ui/experimental'
+import {
+  FormComponent,
+  FormContext,
+} from 'src/app/apps/portal/components/form.component'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { FormDialogService } from 'src/app/services/form-dialog.service'
-import { FormContext, FormPage } from 'src/app/apps/ui/modals/form/form.page'
 import { Wifi, WiFiForm, wifiSpec } from './utils'
 import { SettingsWifiComponent } from './wifi.component'

@@ -142,7 +145,7 @@ export class WifiTableComponent {
        },
      }

-      this.formDialog.open(FormPage, options)
+      this.formDialog.open(FormComponent, options)
    }
  }
 }
--- a/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/wifi/wifi.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/settings/routes/wifi/wifi.component.ts
@@ -25,18 +25,17 @@ import {
 } from '@taiga-ui/experimental'
 import { PatchDB } from 'patch-db-client'
 import { catchError, defer, merge, Observable, of, Subject, map } from 'rxjs'
+import {
+  FormComponent,
+  FormContext,
+} from 'src/app/apps/portal/components/form.component'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 import { WifiInfoComponent } from './info.component'
 import { WifiTableComponent } from './table.component'
 import { parseWifi, WifiData, WiFiForm } from './utils'
-import { RR } from '../../../../../../../services/api/api.types'
-import {
-  FormContext,
-  FormPage,
-} from '../../../../../../ui/modals/form/form.page'
 import { wifiSpec } from '../../../../../../ui/pages/system/wifi/wifi.const'
-import { FormDialogService } from '../../../../../../../services/form-dialog.service'
+import { FormDialogService } from 'src/app/services/form-dialog.service'

@Component({
  template: `
@@ -143,7 +142,7 @@ export class SettingsWifiComponent {
      },
    }

-    this.formDialog.open(FormPage, options)
+    this.formDialog.open(FormComponent, options)
  }

  async saveAndConnect(ssid: string, password?: string): Promise<boolean> {
--- a/web/projects/ui/src/app/apps/portal/routes/system/settings/settings.service.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/settings/settings.service.ts
@@ -6,14 +6,14 @@ import { TUI_PROMPT } from '@taiga-ui/kit'
 import { PatchDB } from 'patch-db-client'
 import { filter, from, take } from 'rxjs'
 import { switchMap } from 'rxjs/operators'
+import { FormComponent } from 'src/app/apps/portal/components/form.component'
+import { PROMPT } from 'src/app/apps/portal/modals/prompt.component'
 import { ProxyService } from 'src/app/services/proxy.service'
-import { FormPage } from 'src/app/apps/ui/modals/form/form.page'
 import { configBuilderToSpec } from 'src/app/util/configBuilderToSpec'
 import { getServerInfo } from 'src/app/util/get-server-info'
 import { FormDialogService } from 'src/app/services/form-dialog.service'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { PROMPT } from 'src/app/apps/ui/modals/prompt/prompt.component'

 import { passwordSpec, PasswordSpec, SettingBtn } from './settings.types'

@@ -160,7 +160,7 @@ export class SettingsService {
        switchMap(() => from(configBuilderToSpec(passwordSpec))),
      )
      .subscribe(spec => {
-        this.formDialog.open(FormPage, {
+        this.formDialog.open(FormComponent, {
          label: 'Change Master Password',
          data: {
            spec,
--- a/web/projects/ui/src/app/apps/portal/routes/system/snek/snek.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/snek/snek.component.ts
@@ -1,8 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
-
-@Component({
-  template: 'Here be snek',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export default class SnekComponent {}
--- a/web/projects/ui/src/app/apps/portal/routes/system/system.module.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/system/system.module.ts
@@ -46,12 +46,6 @@ const ROUTES: Routes = [
    loadComponent: () => import('./updates/updates.component'),
    data: toNavigationItem('/portal/system/updates'),
  },
-  {
-    title: systemTabResolver,
-    path: 'snek',
-    loadComponent: () => import('./snek/snek.component'),
-    data: toNavigationItem('/portal/system/snek'),
-  },
 ]

@NgModule({ imports: [RouterModule.forChild(ROUTES)] })
--- a/web/projects/ui/src/app/apps/portal/services/breadcrumbs.service.ts
+++ b/web/projects/ui/src/app/apps/portal/services/breadcrumbs.service.ts
@@ -30,7 +30,7 @@ export class BreadcrumbsService extends BehaviorSubject<readonly Breadcrumb[]> {
    const packages = await getAllPackages(this.patch)

    try {
-      this.next(toBreadcrumbs(page, packages))
+      this.next(toBreadcrumbs(page.split('?')[0], packages))
    } catch (e) {
      this.next([])
    }
--- a/web/projects/ui/src/app/services/patch-db/patch-db.module.ts
+++ b/web/projects/ui/src/app/services/patch-db/patch-db.module.ts
@@ -1,20 +0,0 @@
-import { PatchDB } from 'patch-db-client'
-import { Injector, NgModule } from '@angular/core'
-import { PATCH_SOURCE, sourceFactory } from './patch-db.factory'
-
-// This module is purely for providers organization purposes
-@NgModule({
-  providers: [
-    {
-      provide: PATCH_SOURCE,
-      deps: [Injector],
-      useFactory: sourceFactory,
-    },
-    {
-      provide: PatchDB,
-      deps: [PATCH_SOURCE],
-      useClass: PatchDB,
-    },
-  ],
-})
-export class PatchDbModule {}
--- a/web/projects/ui/src/app/services/patch-db/patch-db.providers.ts
+++ b/web/projects/ui/src/app/services/patch-db/patch-db.providers.ts
@@ -0,0 +1,16 @@
+import { PatchDB } from 'patch-db-client'
+import { Injector } from '@angular/core'
+import { PATCH_SOURCE, sourceFactory } from './patch-db.factory'
+
+export const PATCH_DB_PROVIDERS = [
+  {
+    provide: PATCH_SOURCE,
+    deps: [Injector],
+    useFactory: sourceFactory,
+  },
+  {
+    provide: PatchDB,
+    deps: [PATCH_SOURCE],
+    useClass: PatchDB,
+  },
+]