From 01c6b91c52c38df06e1b89a29e75d95c07e6b8da Mon Sep 17 00:00:00 2001
From: Matt Hill <matthewonthemoon@gmail.com>
Date: Mon, 5 Jul 2021 20:26:42 -0600
Subject: [PATCH] rework modals and more

---
 ui/src/app/app.component.html                 | 44 +++++--------
 ui/src/app/app.component.ts                   | 51 +++++++++++----
 ui/src/app/app.module.ts                      | 12 ++--
 .../badge-menu-button/badge-menu.component.ts |  2 +-
 .../information-popover.component.html        | 11 ----
 .../information-popover.component.module.ts   | 20 ------
 .../information-popover.component.ts          | 18 -----
 .../dependents/dependents.component.module.ts |  2 -
 .../install-wizard/prebaked-wizards.ts        |  2 +-
 .../recommendation-button.component.html      |  9 ---
 .../recommendation-button.component.module.ts | 20 ------
 .../recommendation-button.component.scss      |  0
 .../recommendation-button.component.ts        | 65 -------------------
 .../app/components/status/status.component.ts |  3 +-
 ui/src/app/guards/maintenance.guard.ts        |  4 +-
 ui/src/app/guards/unmaintenance.guard.ts      |  4 +-
 ui/src/app/modals/app-config-injectable.ts    | 19 ++++++
 .../modal-injectable-token.ts                 |  3 -
 .../modal-injectable-type.ts                  |  4 --
 .../modal-injectable-value.ts                 | 16 -----
 .../app-config-value/app-config-value.page.ts | 11 ++--
 .../backup-confirmation.component.html        | 17 +++--
 .../backup-confirmation.component.ts          | 10 +--
 ui/src/app/modals/markdown/markdown.module.ts | 15 +++++
 ui/src/app/modals/markdown/markdown.page.html |  3 +
 .../markdown/markdown.page.scss}              |  0
 ui/src/app/modals/markdown/markdown.page.ts   | 19 ++++++
 ui/src/app/models/storage-keys.ts             |  6 --
 .../app-actions/app-actions.page.ts           |  4 +-
 .../app-config/app-config.module.ts           |  4 --
 .../apps-routes/app-config/app-config.page.ts | 43 +++---------
 .../app-instructions/app-instructions.page.ts |  2 +-
 .../app-interfaces/app-interfaces.page.ts     |  4 +-
 .../apps-routes/app-list/app-list.page.ts     |  4 +-
 .../app-manifest/app-manifest.page.ts         |  4 +-
 .../app-metrics/app-metrics.page.ts           |  4 +-
 .../app-properties/app-properties.page.ts     |  4 +-
 .../app-restore/app-restore.page.html         |  2 +-
 .../app-restore/app-restore.page.ts           |  6 +-
 .../apps-routes/app-show/app-show.page.html   | 18 ++---
 .../apps-routes/app-show/app-show.page.ts     | 11 ++--
 .../app/pages/maintenance/maintenance.page.ts |  4 +-
 .../marketplace-list.page.html                |  2 +-
 .../marketplace-list/marketplace-list.page.ts |  4 +-
 .../marketplace-show.module.ts                |  2 -
 .../marketplace-show.page.html                | 51 +++++++--------
 .../marketplace-show/marketplace-show.page.ts | 21 ++++--
 .../dev-options/dev-options.page.ts           |  4 +-
 .../app/pages/server-routes/lan/lan.page.ts   |  2 +-
 .../preferences/preferences.page.html         |  4 --
 .../preferences/preferences.page.ts           |  4 +-
 .../server-backup/server-backup.page.html     |  2 +-
 .../server-backup/server-backup.page.ts       |  6 +-
 .../server-routes/server-routing.module.ts    |  4 ++
 .../server-show/server-show.page.html         |  2 +-
 .../server-show/server-show.page.ts           |  6 --
 .../server-specs/server-specs.page.html       |  2 +-
 .../server-specs/server-specs.page.ts         |  4 +-
 .../pages/server-routes/wifi/wifi.page.html   |  2 +-
 .../app/pages/server-routes/wifi/wifi.page.ts |  4 +-
 .../pages/server-routes/wifi/wifi.service.ts  |  2 +-
 ui/src/app/pipes/display-bulb.pipe.ts         |  2 +-
 ui/src/app/pipes/status.pipe.ts               |  2 +-
 ui/src/app/pipes/ui.pipe.ts                   |  2 +-
 ui/src/app/pkg-config/modal-presentable.ts    |  5 +-
 ui/src/app/services/api/api-types.ts          |  4 +-
 ui/src/app/services/api/api.service.ts        | 29 ++-------
 ui/src/app/services/api/live-api.service.ts   |  4 --
 ui/src/app/services/api/mock-api.service.ts   | 25 +++----
 ui/src/app/services/api/mock-app-fixures.ts   | 34 +++++++---
 ui/src/app/services/auth.service.ts           |  6 +-
 ui/src/app/services/config.service.ts         |  2 +-
 ui/src/app/services/connection.service.ts     | 17 +++--
 .../patch-db/data-model.ts                    |  1 -
 .../patch-db/local-storage-bootstrap.ts       |  0
 .../patch-db/patch-db.factory.ts}             | 10 +--
 .../patch-db/patch-db.service.ts}             | 32 +++++----
 .../services/pkg-status-rendering.service.ts  |  4 +-
 ui/src/app/services/server-config.service.ts  |  8 +--
 .../tracking-modal-controller.service.ts      |  7 +-
 ui/src/app/util/misc.util.ts                  |  8 +++
 .../api => assets/markdown}/md-sample.md      |  0
 ui/src/global.scss                            | 52 ++++++---------
 ui/ui-config.json                             |  2 +-
 84 files changed, 380 insertions(+), 508 deletions(-)
 delete mode 100644 ui/src/app/components/information-popover/information-popover.component.html
 delete mode 100644 ui/src/app/components/information-popover/information-popover.component.module.ts
 delete mode 100644 ui/src/app/components/information-popover/information-popover.component.ts
 delete mode 100644 ui/src/app/components/recommendation-button/recommendation-button.component.html
 delete mode 100644 ui/src/app/components/recommendation-button/recommendation-button.component.module.ts
 delete mode 100644 ui/src/app/components/recommendation-button/recommendation-button.component.scss
 delete mode 100644 ui/src/app/components/recommendation-button/recommendation-button.component.ts
 create mode 100644 ui/src/app/modals/app-config-injectable.ts
 delete mode 100644 ui/src/app/modals/app-config-injectable/modal-injectable-token.ts
 delete mode 100644 ui/src/app/modals/app-config-injectable/modal-injectable-type.ts
 delete mode 100644 ui/src/app/modals/app-config-injectable/modal-injectable-value.ts
 create mode 100644 ui/src/app/modals/markdown/markdown.module.ts
 create mode 100644 ui/src/app/modals/markdown/markdown.page.html
 rename ui/src/app/{components/information-popover/information-popover.component.scss => modals/markdown/markdown.page.scss} (100%)
 create mode 100644 ui/src/app/modals/markdown/markdown.page.ts
 delete mode 100644 ui/src/app/models/storage-keys.ts
 rename ui/src/app/{models => services}/patch-db/data-model.ts (99%)
 rename ui/src/app/{models => services}/patch-db/local-storage-bootstrap.ts (100%)
 rename ui/src/app/{models/patch-db/patch-db-model.factory.ts => services/patch-db/patch-db.factory.ts} (78%)
 rename ui/src/app/{models/patch-db/patch-db-model.ts => services/patch-db/patch-db.service.ts} (63%)
 rename ui/src/{app/services/api => assets/markdown}/md-sample.md (100%)

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index c51219840..c775eb98d 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -1,34 +1,24 @@
 <ion-app>
   <ion-split-pane [disabled]="!showMenu" (ionSplitPaneVisible)="splitPaneVisible($event)" contentId="main-content">
     <ion-menu contentId="main-content" type="overlay">
-      <ion-header>
-        <ion-toolbar style="--background: var(--ion-background-color);">
-          <ion-title>Menu</ion-title>
-          <ng-template #dots>
-            <ion-title><ion-spinner name="dots" color="warning"></ion-spinner></ion-title>
-          </ng-template>
-        </ion-toolbar>
-      </ion-header>
       <ion-content scrollY="false" class="menu-style">
-        <ng-container>
-          <ion-list style="padding: 0px">
-            <ion-menu-toggle auto-hide="false" *ngFor="let page of appPages; let i = index">
-              <ion-item
-                button
-                (click)="selectedIndex = i"
-                routerDirection="root"
-                [routerLink]="[page.url]"
-                lines="none"
-                detail="false"
-                [class.selected]="selectedIndex === i"
-              >
-                <ion-icon slot="start" [name]="page.icon"></ion-icon>
-                <ion-label style="font-family: 'Montserrat';">{{ page.title }}</ion-label>
-                <ion-badge *ngIf="page.url === '/notifications' && unreadCount" color="danger" style="margin-right: 3%;" [class.selected-badge]="selectedIndex == i">{{ unreadCount }}</ion-badge>
-              </ion-item>
-            </ion-menu-toggle>
-          </ion-list>
-        </ng-container>
+        <ion-list style="padding: 0px">
+          <ion-menu-toggle auto-hide="false" *ngFor="let page of appPages; let i = index">
+            <ion-item
+              button
+              (click)="selectedIndex = i"
+              routerDirection="root"
+              [routerLink]="[page.url]"
+              lines="none"
+              detail="false"
+              [class.selected]="selectedIndex === i"
+            >
+              <ion-icon slot="start" [name]="page.icon"></ion-icon>
+              <ion-label style="font-family: 'Montserrat';">{{ page.title }}</ion-label>
+              <ion-badge *ngIf="page.url === '/notifications' && unreadCount" color="danger" style="margin-right: 3%;" [class.selected-badge]="selectedIndex == i">{{ unreadCount }}</ion-badge>
+            </ion-item>
+          </ion-menu-toggle>
+        </ion-list>
       </ion-content>
       <ion-footer style="padding-bottom: 16px; text-align: center;" class="menu-style">
         <ion-menu-toggle auto-hide="false">
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index bb9e718c9..70619e4eb 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -3,17 +3,16 @@ import { Storage } from '@ionic/storage'
 import { AuthService, AuthState } from './services/auth.service'
 import { ApiService } from './services/api/api.service'
 import { Router, RoutesRecognized } from '@angular/router'
-import { distinctUntilChanged, filter, finalize, takeWhile } from 'rxjs/operators'
+import { debounceTime, distinctUntilChanged, filter, finalize, takeWhile } from 'rxjs/operators'
 import { AlertController, ToastController } from '@ionic/angular'
 import { LoaderService } from './services/loader.service'
 import { Emver } from './services/emver.service'
 import { SplitPaneTracker } from './services/split-pane.service'
 import { LoadingOptions } from '@ionic/core'
-import { PatchDbModel } from './models/patch-db/patch-db-model'
+import { PatchDbModel } from './services/patch-db/patch-db.service'
 import { HttpService } from './services/http.service'
-import { ServerStatus } from './models/patch-db/data-model'
+import { ServerStatus } from './services/patch-db/data-model'
 import { ConnectionFailure, ConnectionService } from './services/connection.service'
-import { combineLatest, merge } from 'rxjs'
 
 @Component({
   selector: 'app-root',
@@ -29,7 +28,7 @@ export class AppComponent {
   unreadCount: number
   appPages = [
     {
-      title: 'Services',
+      title: 'Installed Services',
       url: '/services',
       icon: 'grid-outline',
     },
@@ -39,7 +38,7 @@ export class AppComponent {
       icon: 'cube-outline',
     },
     {
-      title: 'Marketplace',
+      title: 'Service Marketplace',
       url: '/marketplace',
       icon: 'storefront-outline',
     },
@@ -120,19 +119,38 @@ export class AppComponent {
   }
 
   private watchConnection (auth: AuthState): void {
-    this.connectionService.watch$()
+    this.connectionService.watchFailure$()
     .pipe(
       distinctUntilChanged(),
+      debounceTime(500),
       takeWhile(() => auth === AuthState.VERIFIED),
     )
-    .subscribe(connectionFailure => {
-      if (connectionFailure !== ConnectionFailure.None) {
-        this.presentToastOffline()
-      } else {
+    .subscribe(async connectionFailure => {
+      if (connectionFailure === ConnectionFailure.None) {
         if (this.offlineToast) {
           this.offlineToast.dismiss()
           this.offlineToast = undefined
         }
+      } else {
+        let message: string
+        switch (connectionFailure) {
+          case ConnectionFailure.Network:
+            message = 'No network'
+            break
+          case ConnectionFailure.Diagnosing:
+            message = 'Diagnosing'
+            break
+          case ConnectionFailure.Embassy:
+            message = 'Embassy is unreachable'
+            break
+          case ConnectionFailure.Tor:
+            message = 'Tor issues'
+            break
+          case ConnectionFailure.Internet:
+            message = 'No Internet'
+            break
+        }
+        await this.presentToastOffline(message)
       }
     })
   }
@@ -237,10 +255,15 @@ export class AppComponent {
     await toast.present()
   }
 
-  private async presentToastOffline () {
+  private async presentToastOffline (message: string) {
+    if (this.offlineToast) {
+      this.offlineToast.message = message
+      return
+    }
+
     this.offlineToast = await this.toastCtrl.create({
-      header: 'No Internet',
-      message: `Please check your Internet connection and try again.`,
+      header: 'Connection Issue',
+      message,
       position: 'bottom',
       duration: 0,
       buttons: [
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 781d83f95..b547c5ab7 100644
--- a/ui/src/app/app.module.ts
+++ b/ui/src/app/app.module.ts
@@ -9,16 +9,17 @@ import { AppComponent } from './app.component'
 import { AppRoutingModule } from './app-routing.module'
 import { ApiService } from './services/api/api.service'
 import { ApiServiceFactory } from './services/api/api.service.factory'
-import { PatchDbModelFactory } from './models/patch-db/patch-db-model.factory'
+import { PatchDbModelFactory } from './services/patch-db/patch-db.factory'
 import { HttpService } from './services/http.service'
 import { ConfigService } from './services/config.service'
 import { QRCodeModule } from 'angularx-qrcode'
-import { APP_CONFIG_COMPONENT_MAPPING } from './modals/app-config-injectable/modal-injectable-token'
-import { appConfigComponents } from './modals/app-config-injectable/modal-injectable-value'
+import { appConfigComponents } from './modals/app-config-injectable'
 import { OSWelcomePageModule } from './modals/os-welcome/os-welcome.module'
-import { PatchDbModel } from './models/patch-db/patch-db-model'
-import { LocalStorageBootstrap } from './models/patch-db/local-storage-bootstrap'
+import { MarkdownPageModule } from './modals/markdown/markdown.module'
+import { PatchDbModel } from './services/patch-db/patch-db.service'
+import { LocalStorageBootstrap } from './services/patch-db/local-storage-bootstrap'
 import { SharingModule } from './modules/sharing.module'
+import { APP_CONFIG_COMPONENT_MAPPING } from './services/tracking-modal-controller.service'
 
 @NgModule({
   declarations: [AppComponent],
@@ -36,6 +37,7 @@ import { SharingModule } from './modules/sharing.module'
     }),
     QRCodeModule,
     OSWelcomePageModule,
+    MarkdownPageModule,
     SharingModule,
   ],
   providers: [
diff --git a/ui/src/app/components/badge-menu-button/badge-menu.component.ts b/ui/src/app/components/badge-menu-button/badge-menu.component.ts
index 89c57a9b7..eac9e814b 100644
--- a/ui/src/app/components/badge-menu-button/badge-menu.component.ts
+++ b/ui/src/app/components/badge-menu-button/badge-menu.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core'
 import { SplitPaneTracker } from 'src/app/services/split-pane.service'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { combineLatest, Subscription } from 'rxjs'
 
 @Component({
diff --git a/ui/src/app/components/information-popover/information-popover.component.html b/ui/src/app/components/information-popover/information-popover.component.html
deleted file mode 100644
index 66a3b6b84..000000000
--- a/ui/src/app/components/information-popover/information-popover.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div style="padding: 15px;
-    border-style: solid;
-    border-width: 1px;
-    background: var(--ion-color-light);
-    border-radius: 10px;
-    border-color: var(--ion-color-warning);
-    color: white;
-    font-size: small;
-    "
-    [innerHTML]="unsafeInformation">
-</div>
diff --git a/ui/src/app/components/information-popover/information-popover.component.module.ts b/ui/src/app/components/information-popover/information-popover.component.module.ts
deleted file mode 100644
index 7aaa53cfa..000000000
--- a/ui/src/app/components/information-popover/information-popover.component.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { InformationPopoverComponent } from './information-popover.component'
-import { IonicModule } from '@ionic/angular'
-import { RouterModule } from '@angular/router'
-import { SharingModule } from 'src/app/modules/sharing.module'
-
-@NgModule({
-  declarations: [
-    InformationPopoverComponent,
-  ],
-  imports: [
-    CommonModule,
-    IonicModule,
-    RouterModule.forChild([]),
-    SharingModule,
-  ],
-  exports: [InformationPopoverComponent],
-})
-export class InformationPopoverComponentModule { }
diff --git a/ui/src/app/components/information-popover/information-popover.component.ts b/ui/src/app/components/information-popover/information-popover.component.ts
deleted file mode 100644
index 80f60f636..000000000
--- a/ui/src/app/components/information-popover/information-popover.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
-
-@Component({
-  selector: 'app-information-popover',
-  templateUrl: './information-popover.component.html',
-  styleUrls: ['./information-popover.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class InformationPopoverComponent implements OnInit {
-  @Input() title: string
-  @Input() information: string
-  unsafeInformation: SafeHtml
-  constructor (private sanitizer: DomSanitizer) { }
-  ngOnInit () {
-    this.unsafeInformation = this.sanitizer.bypassSecurityTrustHtml(this.information)
-  }
-}
diff --git a/ui/src/app/components/install-wizard/dependents/dependents.component.module.ts b/ui/src/app/components/install-wizard/dependents/dependents.component.module.ts
index cbe95d71f..ded0ae5f3 100644
--- a/ui/src/app/components/install-wizard/dependents/dependents.component.module.ts
+++ b/ui/src/app/components/install-wizard/dependents/dependents.component.module.ts
@@ -4,7 +4,6 @@ import { DependentsComponent } from './dependents.component'
 import { IonicModule } from '@ionic/angular'
 import { RouterModule } from '@angular/router'
 import { SharingModule } from 'src/app/modules/sharing.module'
-import { InformationPopoverComponentModule } from '../../information-popover/information-popover.component.module'
 
 @NgModule({
   declarations: [
@@ -15,7 +14,6 @@ import { InformationPopoverComponentModule } from '../../information-popover/inf
     IonicModule,
     RouterModule.forChild([]),
     SharingModule,
-    InformationPopoverComponentModule,
   ],
   exports: [DependentsComponent],
 })
diff --git a/ui/src/app/components/install-wizard/prebaked-wizards.ts b/ui/src/app/components/install-wizard/prebaked-wizards.ts
index 8eafedd9f..bc20e5a99 100644
--- a/ui/src/app/components/install-wizard/prebaked-wizards.ts
+++ b/ui/src/app/components/install-wizard/prebaked-wizards.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { InstalledPackageDataEntry } from 'src/app/models/patch-db/data-model'
+import { InstalledPackageDataEntry } from 'src/app/services/patch-db/data-model'
 import { Breakages } from 'src/app/services/api/api-types'
 import { exists } from 'src/app/util/misc.util'
 import { ApiService } from '../../services/api/api.service'
diff --git a/ui/src/app/components/recommendation-button/recommendation-button.component.html b/ui/src/app/components/recommendation-button/recommendation-button.component.html
deleted file mode 100644
index 67de111c5..000000000
--- a/ui/src/app/components/recommendation-button/recommendation-button.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<ion-fab id="recommendation" vertical="top" horizontal="end" slot="fixed"> 
-  <ion-fab-button [disabled]="disabled" style="border-style: solid;
-  border-radius: 100px;
-  border-color: #FFEB3B;
-  border-width: medium;
-  box-shadow: 0 0 10px white;" size="small" (click)="presentPopover($event)">
-    <img [src]="rec.iconURL" />
-  </ion-fab-button>
-</ion-fab>
diff --git a/ui/src/app/components/recommendation-button/recommendation-button.component.module.ts b/ui/src/app/components/recommendation-button/recommendation-button.component.module.ts
deleted file mode 100644
index 4bceb29c8..000000000
--- a/ui/src/app/components/recommendation-button/recommendation-button.component.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { RecommendationButtonComponent } from './recommendation-button.component'
-import { IonicModule } from '@ionic/angular'
-import { RouterModule } from '@angular/router'
-import { SharingModule } from 'src/app/modules/sharing.module'
-
-@NgModule({
-  declarations: [
-    RecommendationButtonComponent,
-  ],
-  imports: [
-    CommonModule,
-    IonicModule,
-    RouterModule.forChild([]),
-    SharingModule,
-  ],
-  exports: [RecommendationButtonComponent],
-})
-export class RecommendationButtonComponentModule { }
diff --git a/ui/src/app/components/recommendation-button/recommendation-button.component.scss b/ui/src/app/components/recommendation-button/recommendation-button.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/src/app/components/recommendation-button/recommendation-button.component.ts b/ui/src/app/components/recommendation-button/recommendation-button.component.ts
deleted file mode 100644
index 80c2461fb..000000000
--- a/ui/src/app/components/recommendation-button/recommendation-button.component.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Component, Input } from '@angular/core'
-import { Router } from '@angular/router'
-import { PopoverController } from '@ionic/angular'
-import { filter, take } from 'rxjs/operators'
-import { capitalizeFirstLetter } from 'src/app/util/misc.util'
-import { InformationPopoverComponent } from '../information-popover/information-popover.component'
-
-@Component({
-  selector: 'recommendation-button',
-  templateUrl: './recommendation-button.component.html',
-  styleUrls: ['./recommendation-button.component.scss'],
-})
-export class RecommendationButtonComponent {
-  @Input() rec: Recommendation
-  @Input() raise?: { id: string }
-  constructor (
-    private readonly router: Router,
-    private readonly popoverController: PopoverController,
-  ) { }
-
-  ngOnInit () {
-    if (!this.raise) return
-    const mainContent = document.getElementsByTagName('ion-app')[0]
-    const recButton = document.getElementById(this.raise.id)
-    mainContent.appendChild(recButton)
-
-    this.router.events.pipe(filter(e => !!(e as any).urlAfterRedirects, take(1))).subscribe((e: any) => {
-      recButton.remove()
-    })
-  }
-
-  disabled = false
-
-  async presentPopover (ev: any) {
-    const popover = await this.popoverController.create({
-      component: InformationPopoverComponent,
-      event: ev,
-      translucent: false,
-      showBackdrop: true,
-      backdropDismiss: true,
-      componentProps: {
-        information: `
-          <div style="font-size: medium; font-style: italic; margin: 5px 0px;">
-            ${capitalizeFirstLetter(this.rec.dependentTitle)} Installation Recommendations
-          </div>
-          <div>
-            ${this.rec.description}
-          </div>`,
-      },
-    })
-    popover.onWillDismiss().then(() => {
-      this.disabled = false
-    })
-    this.disabled = true
-    return await popover.present()
-  }
-}
-
-export type Recommendation = {
-  dependentId: string
-  dependentTitle: string
-  dependentIcon: string,
-  description: string
-  version?: string
-}
diff --git a/ui/src/app/components/status/status.component.ts b/ui/src/app/components/status/status.component.ts
index 7e91441c5..22aa9fd78 100644
--- a/ui/src/app/components/status/status.component.ts
+++ b/ui/src/app/components/status/status.component.ts
@@ -1,7 +1,6 @@
 import { Component, Input } from '@angular/core'
-import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
+import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 import { renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
-import { ConnectionStatus } from 'patch-db-client'
 
 @Component({
   selector: 'status',
diff --git a/ui/src/app/guards/maintenance.guard.ts b/ui/src/app/guards/maintenance.guard.ts
index ce000ab25..dd2b58b0a 100644
--- a/ui/src/app/guards/maintenance.guard.ts
+++ b/ui/src/app/guards/maintenance.guard.ts
@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core'
 import { CanActivate, Router, CanActivateChild } from '@angular/router'
 import { tap } from 'rxjs/operators'
-import { ServerStatus } from '../models/patch-db/data-model'
-import { PatchDbModel } from '../models/patch-db/patch-db-model'
+import { ServerStatus } from '../services/patch-db/data-model'
+import { PatchDbModel } from '../services/patch-db/patch-db.service'
 
 @Injectable({
   providedIn: 'root',
diff --git a/ui/src/app/guards/unmaintenance.guard.ts b/ui/src/app/guards/unmaintenance.guard.ts
index 58958197e..5be0a6049 100644
--- a/ui/src/app/guards/unmaintenance.guard.ts
+++ b/ui/src/app/guards/unmaintenance.guard.ts
@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core'
 import { CanActivate, Router } from '@angular/router'
 import { tap } from 'rxjs/operators'
-import { ServerStatus } from '../models/patch-db/data-model'
-import { PatchDbModel } from '../models/patch-db/patch-db-model'
+import { ServerStatus } from '../services/patch-db/data-model'
+import { PatchDbModel } from '../services/patch-db/patch-db.service'
 
 @Injectable({
   providedIn: 'root',
diff --git a/ui/src/app/modals/app-config-injectable.ts b/ui/src/app/modals/app-config-injectable.ts
new file mode 100644
index 000000000..f5e19519f
--- /dev/null
+++ b/ui/src/app/modals/app-config-injectable.ts
@@ -0,0 +1,19 @@
+import { AppConfigObjectPage } from './app-config-object/app-config-object.page'
+import { AppConfigListPage } from './app-config-list/app-config-list.page'
+import { AppConfigUnionPage } from './app-config-union/app-config-union.page'
+import { AppConfigValuePage } from './app-config-value/app-config-value.page'
+import { Type } from '@angular/core'
+import { ValueType } from 'src/app/pkg-config/config-types'
+
+export const appConfigComponents: AppConfigComponentMapping = {
+  'string': AppConfigValuePage,
+  'number': AppConfigValuePage,
+  'enum': AppConfigValuePage,
+  'boolean': AppConfigValuePage,
+  'list': AppConfigListPage,
+  'object': AppConfigObjectPage,
+  'union': AppConfigUnionPage,
+  'pointer': undefined,
+}
+
+export type AppConfigComponentMapping = { [k in ValueType]: Type<any> }
diff --git a/ui/src/app/modals/app-config-injectable/modal-injectable-token.ts b/ui/src/app/modals/app-config-injectable/modal-injectable-token.ts
deleted file mode 100644
index 158df9672..000000000
--- a/ui/src/app/modals/app-config-injectable/modal-injectable-token.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { InjectionToken } from '@angular/core'
-
-export const APP_CONFIG_COMPONENT_MAPPING = new InjectionToken<string>('APP_CONFIG_COMPONENTS')
\ No newline at end of file
diff --git a/ui/src/app/modals/app-config-injectable/modal-injectable-type.ts b/ui/src/app/modals/app-config-injectable/modal-injectable-type.ts
deleted file mode 100644
index fb8207817..000000000
--- a/ui/src/app/modals/app-config-injectable/modal-injectable-type.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { Type } from '@angular/core'
-import { ValueType } from 'src/app/pkg-config/config-types'
-
-export type AppConfigComponentMapping = { [k in ValueType]: Type<any> }
diff --git a/ui/src/app/modals/app-config-injectable/modal-injectable-value.ts b/ui/src/app/modals/app-config-injectable/modal-injectable-value.ts
deleted file mode 100644
index 727cd8f8f..000000000
--- a/ui/src/app/modals/app-config-injectable/modal-injectable-value.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { AppConfigObjectPage } from '../app-config-object/app-config-object.page'
-import { AppConfigListPage } from '../app-config-list/app-config-list.page'
-import { AppConfigUnionPage } from '../app-config-union/app-config-union.page'
-import { AppConfigValuePage } from '../app-config-value/app-config-value.page'
-import { AppConfigComponentMapping } from './modal-injectable-type'
-
-export const appConfigComponents: AppConfigComponentMapping = {
-  'string': AppConfigValuePage,
-  'number': AppConfigValuePage,
-  'enum': AppConfigValuePage,
-  'boolean': AppConfigValuePage,
-  'list': AppConfigListPage,
-  'object': AppConfigObjectPage,
-  'union': AppConfigUnionPage,
-  'pointer': undefined,
-}
diff --git a/ui/src/app/modals/app-config-value/app-config-value.page.ts b/ui/src/app/modals/app-config-value/app-config-value.page.ts
index 72f1db502..c225f4ff9 100644
--- a/ui/src/app/modals/app-config-value/app-config-value.page.ts
+++ b/ui/src/app/modals/app-config-value/app-config-value.page.ts
@@ -1,8 +1,7 @@
 import { Component, Input } from '@angular/core'
 import { getDefaultConfigValue, getDefaultDescription, Range } from 'src/app/pkg-config/config-utilities'
-import { AlertController, ToastController } from '@ionic/angular'
+import { AlertController, ModalController, ToastController } from '@ionic/angular'
 import { LoaderService } from 'src/app/services/loader.service'
-import { TrackingModalController } from 'src/app/services/tracking-modal-controller.service'
 import { ConfigCursor } from 'src/app/pkg-config/config-cursor'
 import { ValueSpecOf } from 'src/app/pkg-config/config-types'
 import { copyToClipboard } from 'src/app/util/web.util'
@@ -31,7 +30,7 @@ export class AppConfigValuePage {
 
   constructor (
     private readonly loader: LoaderService,
-    private readonly trackingModalCtrl: TrackingModalController,
+    private readonly modalCtrl: ModalController,
     private readonly alertCtrl: AlertController,
     private readonly toastCtrl: ToastController,
   ) { }
@@ -58,7 +57,7 @@ export class AppConfigValuePage {
     if ((!!this.saveFn && this.edited) || (!this.saveFn && this.error)) {
       await this.presentAlert()
     } else {
-      await this.trackingModalCtrl.dismiss()
+      await this.modalCtrl.dismiss()
     }
   }
 
@@ -76,7 +75,7 @@ export class AppConfigValuePage {
       }),
     )
 
-    await this.trackingModalCtrl.dismiss(this.value)
+    await this.modalCtrl.dismiss(this.value)
   }
 
   refreshDefault () {
@@ -172,7 +171,7 @@ export class AppConfigValuePage {
           text: `Leave`,
           cssClass: 'alert-danger',
           handler: () => {
-            this.trackingModalCtrl.dismiss()
+            this.modalCtrl.dismiss()
           },
         },
       ],
diff --git a/ui/src/app/modals/backup-confirmation/backup-confirmation.component.html b/ui/src/app/modals/backup-confirmation/backup-confirmation.component.html
index ec3b82802..a95251009 100644
--- a/ui/src/app/modals/backup-confirmation/backup-confirmation.component.html
+++ b/ui/src/app/modals/backup-confirmation/backup-confirmation.component.html
@@ -1,10 +1,14 @@
-<!-- TODO: EJECT-DISKS, add a check box to allow a user to eject a disk on backup completion. -->
 <ion-content>
-  <div style="height: 85%; margin: 20px; display: flex; flex-direction: column; justify-content: space-between;">
-    <div>
-      <h4><ion-text color="dark">Ready to Backup</ion-text></h4>
+  <div style="height: 85%; margin: 24px; display: flex; flex-direction: column; justify-content: space-between;">
+    <div *ngIf="type === 'backup'">
+      <h4><ion-text color="dark">Encrypt Backup</ion-text></h4>
       <p><ion-text color="medium">Enter your master password to create an encrypted backup.</ion-text></p>  
     </div>
+    <div *ngIf="type === 'restore'">
+      <h4><ion-text color="dark">Decrypt Backup</ion-text></h4>
+      <p><ion-text color="medium">Enter the password that was originally used to encrypt this backup.</ion-text></p>  
+    </div>
+
     <div>
       <ion-item lines="none" style="--background: var(--ion-background-color); --border-color: var(--ion-color-medium);">
         <ion-label style="font-size: small" position="floating">Master Password</ion-label>
@@ -14,12 +18,13 @@
         <ion-label style="font-size: small" color="danger" class="ion-text-wrap">{{ error }}</ion-label>
       </ion-item>
     </div>
+
     <div style="display: flex; justify-content: flex-end; align-items: center;">
       <ion-button fill="clear" color="medium" (click)="cancel()">
         Cancel
       </ion-button>
-      <ion-button fill="clear" color="primary" (click)="submit()">
-        Create Backup
+      <ion-button fill="clear" (click)="submit()">
+        {{ type === 'backup' ? 'Create Backup' : 'Restore Backup' }}
       </ion-button>
     </div>
   </div>
diff --git a/ui/src/app/modals/backup-confirmation/backup-confirmation.component.ts b/ui/src/app/modals/backup-confirmation/backup-confirmation.component.ts
index 7856ebe73..a9eb75769 100644
--- a/ui/src/app/modals/backup-confirmation/backup-confirmation.component.ts
+++ b/ui/src/app/modals/backup-confirmation/backup-confirmation.component.ts
@@ -1,6 +1,5 @@
 import { Component, Input } from '@angular/core'
 import { ModalController } from '@ionic/angular'
-import { PartitionInfo } from 'src/app/services/api/api-types'
 
 @Component({
   selector: 'backup-confirmation',
@@ -8,20 +7,15 @@ import { PartitionInfo } from 'src/app/services/api/api-types'
   styleUrls: ['./backup-confirmation.component.scss'],
 })
 export class BackupConfirmationComponent {
-  @Input() name: string
+  @Input() type: 'backup' | 'restore'
   unmasked = false
-  password: string
-  message: string
+  password = ''
   error = ''
 
   constructor (
     private readonly modalCtrl: ModalController,
   ) { }
 
-  ngOnInit () {
-    this.message = `Enter your master password to create an encrypted backup on "${this.name}".`
-  }
-
   toggleMask () {
     this.unmasked = !this.unmasked
   }
diff --git a/ui/src/app/modals/markdown/markdown.module.ts b/ui/src/app/modals/markdown/markdown.module.ts
new file mode 100644
index 000000000..8e3ff6bd1
--- /dev/null
+++ b/ui/src/app/modals/markdown/markdown.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { MarkdownPage } from './markdown.page'
+import { SharingModule } from 'src/app/modules/sharing.module'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    SharingModule,
+  ],
+  declarations: [MarkdownPage],
+})
+export class MarkdownPageModule { }
diff --git a/ui/src/app/modals/markdown/markdown.page.html b/ui/src/app/modals/markdown/markdown.page.html
new file mode 100644
index 000000000..a595e240c
--- /dev/null
+++ b/ui/src/app/modals/markdown/markdown.page.html
@@ -0,0 +1,3 @@
+<ion-content>
+  <div [innerHTML]="content | markdown"></div>
+</ion-content>
diff --git a/ui/src/app/components/information-popover/information-popover.component.scss b/ui/src/app/modals/markdown/markdown.page.scss
similarity index 100%
rename from ui/src/app/components/information-popover/information-popover.component.scss
rename to ui/src/app/modals/markdown/markdown.page.scss
diff --git a/ui/src/app/modals/markdown/markdown.page.ts b/ui/src/app/modals/markdown/markdown.page.ts
new file mode 100644
index 000000000..990de0495
--- /dev/null
+++ b/ui/src/app/modals/markdown/markdown.page.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core'
+import { ModalController } from '@ionic/angular'
+
+@Component({
+  selector: 'markdown',
+  templateUrl: './markdown.page.html',
+  styleUrls: ['./markdown.page.scss'],
+})
+export class MarkdownPage {
+  @Input() content: string
+
+  constructor (
+    private readonly modalCtrl: ModalController,
+  ) { }
+
+  async dismiss () {
+    return this.modalCtrl.dismiss(true)
+  }
+}
diff --git a/ui/src/app/models/storage-keys.ts b/ui/src/app/models/storage-keys.ts
deleted file mode 100644
index 353f8b322..000000000
--- a/ui/src/app/models/storage-keys.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export class StorageKeys {
-  static APPS_CACHE_KEY = 'apps'
-  static SERVER_CACHE_KEY = 'embassy'
-  static LOGGED_IN_KEY = 'loggedInKey'
-  static VIEWED_INSTRUCTIONS_KEY = 'viewedInstructions'
-}
\ No newline at end of file
diff --git a/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts b/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
index e1268b8f9..c9d9aa775 100644
--- a/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
+++ b/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
@@ -4,8 +4,8 @@ import { ApiService } from 'src/app/services/api/api.service'
 import { AlertController, IonContent, ModalController, NavController } from '@ionic/angular'
 import { LoaderService } from 'src/app/services/loader.service'
 import { HttpErrorResponse } from '@angular/common/http'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { Action, InstalledPackageDataEntry, Manifest, PackageMainStatus } from 'src/app/models/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { Action, InstalledPackageDataEntry, Manifest, PackageMainStatus } from 'src/app/services/patch-db/data-model'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { Subscription } from 'rxjs'
diff --git a/ui/src/app/pages/apps-routes/app-config/app-config.module.ts b/ui/src/app/pages/apps-routes/app-config/app-config.module.ts
index 92ed8db4c..430926953 100644
--- a/ui/src/app/pages/apps-routes/app-config/app-config.module.ts
+++ b/ui/src/app/pages/apps-routes/app-config/app-config.module.ts
@@ -10,8 +10,6 @@ import { AppConfigObjectPageModule } from 'src/app/modals/app-config-object/app-
 import { AppConfigUnionPageModule } from 'src/app/modals/app-config-union/app-config-union.module'
 import { AppConfigValuePageModule } from 'src/app/modals/app-config-value/app-config-value.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
-import { RecommendationButtonComponentModule } from 'src/app/components/recommendation-button/recommendation-button.component.module'
-import { InformationPopoverComponentModule } from 'src/app/components/information-popover/information-popover.component.module'
 
 const routes: Routes = [
   {
@@ -32,8 +30,6 @@ const routes: Routes = [
     FormsModule,
     IonicModule,
     RouterModule.forChild(routes),
-    RecommendationButtonComponentModule,
-    InformationPopoverComponentModule,
   ],
   declarations: [AppConfigPage],
 })
diff --git a/ui/src/app/pages/apps-routes/app-config/app-config.page.ts b/ui/src/app/pages/apps-routes/app-config/app-config.page.ts
index c363688b1..8b94699cc 100644
--- a/ui/src/app/pages/apps-routes/app-config/app-config.page.ts
+++ b/ui/src/app/pages/apps-routes/app-config/app-config.page.ts
@@ -1,20 +1,18 @@
 import { Component, ViewChild } from '@angular/core'
-import { NavController, AlertController, ModalController, PopoverController, IonContent } from '@ionic/angular'
+import { NavController, AlertController, ModalController, IonContent } from '@ionic/angular'
 import { ActivatedRoute } from '@angular/router'
 import { ApiService } from 'src/app/services/api/api.service'
-import { isEmptyObject } from 'src/app/util/misc.util'
+import { isEmptyObject, Recommendation } from 'src/app/util/misc.util'
 import { LoaderService } from 'src/app/services/loader.service'
 import { TrackingModalController } from 'src/app/services/tracking-modal-controller.service'
 import { from, fromEvent, of, Subscription } from 'rxjs'
 import { catchError, concatMap, map, take, tap } from 'rxjs/operators'
-import { Recommendation } from 'src/app/components/recommendation-button/recommendation-button.component'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
-import { InformationPopoverComponent } from 'src/app/components/information-popover/information-popover.component'
 import { ConfigSpec } from 'src/app/pkg-config/config-types'
 import { ConfigCursor } from 'src/app/pkg-config/config-cursor'
-import { InstalledPackageDataEntry, PackageState } from 'src/app/models/patch-db/data-model'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { InstalledPackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 
 @Component({
   selector: 'app-config',
@@ -31,7 +29,7 @@ export class AppConfigPage {
   pkg: InstalledPackageDataEntry
   hasConfig = false
 
-  backButtonDefense = false
+  mocalShowing = false
   packageState = PackageState
 
   rec: Recommendation | null = null
@@ -57,7 +55,6 @@ export class AppConfigPage {
     private readonly alertCtrl: AlertController,
     private readonly modalController: ModalController,
     private readonly trackingModalCtrl: TrackingModalController,
-    private readonly popoverController: PopoverController,
     private readonly patch: PatchDbModel,
   ) { }
 
@@ -71,17 +68,17 @@ export class AppConfigPage {
         }
       }),
       fromEvent(window, 'popstate').subscribe(() => {
-        this.backButtonDefense = false
+        this.mocalShowing = false
         this.trackingModalCtrl.dismissAll()
       }),
       this.trackingModalCtrl.onCreateAny$().subscribe(() => {
-        if (!this.backButtonDefense) {
+        if (!this.mocalShowing) {
           window.history.pushState(null, null, window.location.href + '/edit')
-          this.backButtonDefense = true
+          this.mocalShowing = true
         }
       }),
       this.trackingModalCtrl.onDismissAny$().subscribe(() => {
-        if (!this.trackingModalCtrl.anyModals && this.backButtonDefense === true) {
+        if (!this.trackingModalCtrl.anyModals && this.mocalShowing === true) {
           this.navCtrl.back()
         }
       }),
@@ -135,28 +132,6 @@ export class AppConfigPage {
     this.subs.forEach(sub => sub.unsubscribe())
   }
 
-  async presentPopover (title: string, description: string, ev: any) {
-    const information = `
-      <div style="font-size: medium; font-style: italic; margin: 5px 0px;">
-        ${title}
-      </div>
-      <div>
-        ${description}
-      </div>
-    `
-    const popover = await this.popoverController.create({
-      component: InformationPopoverComponent,
-      event: ev,
-      translucent: false,
-      showBackdrop: true,
-      backdropDismiss: true,
-      componentProps: {
-        information,
-      },
-    })
-    return await popover.present()
-  }
-
   setConfig (spec: ConfigSpec, config: object, dependencyConfig?: object) {
     this.rootCursor = dependencyConfig ? new ConfigCursor(spec, config, null, dependencyConfig) : new ConfigCursor(spec, config)
     this.spec = this.rootCursor.spec().spec
diff --git a/ui/src/app/pages/apps-routes/app-instructions/app-instructions.page.ts b/ui/src/app/pages/apps-routes/app-instructions/app-instructions.page.ts
index f983f3067..de395e084 100644
--- a/ui/src/app/pages/apps-routes/app-instructions/app-instructions.page.ts
+++ b/ui/src/app/pages/apps-routes/app-instructions/app-instructions.page.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router'
 import { IonContent } from '@ionic/angular'
 import { Subscription } from 'rxjs'
 import { concatMap, take, tap } from 'rxjs/operators'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { ApiService } from 'src/app/services/api/api.service'
 
 @Component({
diff --git a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts b/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
index 33d8bbd5d..185a3354a 100644
--- a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
+++ b/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
@@ -2,8 +2,8 @@ import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { IonContent, ToastController } from '@ionic/angular'
 import { Subscription } from 'rxjs'
-import { InstalledPackageDataEntry, PackageDataEntry } from 'src/app/models/patch-db/data-model'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { InstalledPackageDataEntry, PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { ConfigService } from 'src/app/services/config.service'
 import { copyToClipboard } from 'src/app/util/web.util'
 
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list.page.ts b/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
index cc329ebb0..4a07daa12 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
+++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core'
 import { ConfigService } from 'src/app/services/config.service'
 import { ConnectionService } from 'src/app/services/connection.service'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 import { Subscription } from 'rxjs'
 
 @Component({
diff --git a/ui/src/app/pages/apps-routes/app-manifest/app-manifest.page.ts b/ui/src/app/pages/apps-routes/app-manifest/app-manifest.page.ts
index 5dc757e98..99b92350c 100644
--- a/ui/src/app/pages/apps-routes/app-manifest/app-manifest.page.ts
+++ b/ui/src/app/pages/apps-routes/app-manifest/app-manifest.page.ts
@@ -1,8 +1,8 @@
 import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { Subscription } from 'rxjs'
-import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { getManifest } from 'src/app/services/config.service'
 import * as JsonPointer from 'json-pointer'
 import { IonContent } from '@ionic/angular'
diff --git a/ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.ts b/ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.ts
index e83d2cfff..a6cad8960 100644
--- a/ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.ts
+++ b/ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.ts
@@ -2,8 +2,8 @@ import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { IonContent } from '@ionic/angular'
 import { Subscription } from 'rxjs'
-import { PackageDataEntry } from 'src/app/models/patch-db/data-model'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 
 @Component({
   selector: 'app-metrics',
diff --git a/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts b/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
index be6fee88b..308991d77 100644
--- a/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
+++ b/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
@@ -6,10 +6,10 @@ import { copyToClipboard } from 'src/app/util/web.util'
 import { AlertController, IonContent, NavController, PopoverController, ToastController } from '@ionic/angular'
 import { PackageProperties } from 'src/app/util/properties.util'
 import { QRComponent } from 'src/app/components/qr/qr.component'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import * as JsonPointer from 'json-pointer'
 import { FEStatus } from 'src/app/services/pkg-status-rendering.service'
-import { PackageMainStatus } from 'src/app/models/patch-db/data-model'
+import { PackageMainStatus } from 'src/app/services/patch-db/data-model'
 
 @Component({
   selector: 'app-properties',
diff --git a/ui/src/app/pages/apps-routes/app-restore/app-restore.page.html b/ui/src/app/pages/apps-routes/app-restore/app-restore.page.html
index e4615d4f3..9533a8470 100644
--- a/ui/src/app/pages/apps-routes/app-restore/app-restore.page.html
+++ b/ui/src/app/pages/apps-routes/app-restore/app-restore.page.html
@@ -57,7 +57,7 @@
             </ion-card-header>
             <ion-card-content>
               <ion-item-group>
-                <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key, partition.value)">
+                <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
                   <ion-icon slot="start" name="save-outline"></ion-icon>
                   <ion-label>
                     <h2>{{ partition.value.label || partition.key }} ({{ partition.value.size || 'unknown size' }})</h2>
diff --git a/ui/src/app/pages/apps-routes/app-restore/app-restore.page.ts b/ui/src/app/pages/apps-routes/app-restore/app-restore.page.ts
index d64b36abb..c675f29cd 100644
--- a/ui/src/app/pages/apps-routes/app-restore/app-restore.page.ts
+++ b/ui/src/app/pages/apps-routes/app-restore/app-restore.page.ts
@@ -4,7 +4,7 @@ import { ApiService } from 'src/app/services/api/api.service'
 import { BackupConfirmationComponent } from 'src/app/modals/backup-confirmation/backup-confirmation.component'
 import { DiskInfo, PartitionInfoEntry } from 'src/app/services/api/api-types'
 import { ActivatedRoute } from '@angular/router'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { Subscription } from 'rxjs'
 
 @Component({
@@ -69,10 +69,10 @@ export class AppRestorePage {
     }
   }
 
-  async presentModal (logicalname: string, partition: PartitionInfoEntry): Promise<void> {
+  async presentModal (logicalname: string): Promise<void> {
     const m = await this.modalCtrl.create({
       componentProps: {
-        name: partition.label || logicalname,
+        type: 'restore',
       },
       cssClass: 'alertlike-modal',
       component: BackupConfirmationComponent,
diff --git a/ui/src/app/pages/apps-routes/app-show/app-show.page.html b/ui/src/app/pages/apps-routes/app-show/app-show.page.html
index c6034f0b7..5315d6111 100644
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.html
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.html
@@ -33,16 +33,16 @@
   
       <div class="status-readout">
         <status *ngIf="connected" size="large" weight="500" [pkg]="pkg"></status>
-        <ion-button *ngIf="pkg.status === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
+        <ion-button *ngIf="(pkg | status) === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
           Configure
         </ion-button>
-        <ion-button *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : pkg.status" expand="block" color="danger" (click)="stop()">
+        <ion-button *ngIf="[FeStatus.Running, FeStatus.StartingUp, FeStatus.NeedsAttention] | includes : (pkg | status)" expand="block" color="danger" (click)="stop()">
           Stop
         </ion-button>
-        <ion-button *ngIf="pkg.status === FeStatus.DependencyIssue" expand="block" (click)="scrollToRequirements()">
+        <ion-button *ngIf="(pkg | status) === FeStatus.DependencyIssue" expand="block" (click)="scrollToRequirements()">
           Fix
         </ion-button>
-        <ion-button *ngIf="pkg.status === FeStatus.Stopped" expand="block" color="success" (click)="tryStart()">
+        <ion-button *ngIf="(pkg | status) === FeStatus.Stopped" expand="block" color="success" (click)="tryStart()">
           Start
         </ion-button>
       </div>
@@ -86,23 +86,23 @@
                     <p><ion-text [color]="pkg.installed.status['dependency-errors'][dep.key] ? 'warning' : 'success'">{{ pkg.installed.status['dependency-errors'][dep.key] ? pkg.installed.status['dependency-errors'][dep.key].type : 'satisfied' }}</ion-text></p>
                   </ion-label>
 
-                  <ion-button *ngIf="!pkg.installed.status['dependency-errors'][dep.key] || (pkg.installed.status['dependency-errors'][dep.key] && [DependencyErrorType.InterfaceHealthChecksFailed, DependencyErrorType.HealthChecksFailed] | includes : pkg.installed.status['dependency-errors'][dep.key].type)" slot="end" size="small" color="dark" [routerLink]="['/services', dep.key]" fill="outline">
+                  <ion-button *ngIf="!pkg.installed.status['dependency-errors'][dep.key] || (pkg.installed.status['dependency-errors'][dep.key] && [DependencyErrorType.InterfaceHealthChecksFailed, DependencyErrorType.HealthChecksFailed] | includes : pkg.installed.status['dependency-errors'][dep.key].type)" slot="end" size="small" [routerLink]="['/services', dep.key]">
                     View
                   </ion-button>
 
                   <ng-container *ngIf="pkg.installed.status['dependency-errors'][dep.key]">
-                    <ion-button *ngIf="!localDep" slot="end" size="small" color="dark" (click)="fixDep('install', dep.key)" fill="outline">
+                    <ion-button *ngIf="!localDep" slot="end" size="small" (click)="fixDep('install', dep.key)">
                       Install
                     </ion-button>
 
                     <ng-container *ngIf="localDep && localDep.state === PackageState.Installed">
-                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.NotRunning" slot="end" size="small" color="dark" [routerLink]="['/services', dep.key]" fill="outline">
+                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.NotRunning" slot="end" size="small" [routerLink]="['/services', dep.key]">
                         Start
                       </ion-button>
-                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.IncorrectVersion" slot="end" size="small" color="dark" (click)="fixDep('update', dep.key)" fill="outline">
+                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.IncorrectVersion" slot="end" size="small" (click)="fixDep('update', dep.key)">
                         Update
                       </ion-button>
-                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.ConfigUnsatisfied" slot="end" size="small" color="dark" (click)="fixDep('configure', dep.key)" fill="outline">
+                      <ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.ConfigUnsatisfied" slot="end" size="small" (click)="fixDep('configure', dep.key)">
                         Configure
                       </ion-button>
                     </ng-container>
diff --git a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
index c19352694..b906e333b 100644
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
@@ -2,17 +2,16 @@ import { Component, ViewChild } from '@angular/core'
 import { AlertController, NavController, ModalController, IonContent } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/api.service'
 import { ActivatedRoute, NavigationExtras } from '@angular/router'
-import { chill, isEmptyObject } from 'src/app/util/misc.util'
+import { chill, isEmptyObject, Recommendation } from 'src/app/util/misc.util'
 import { LoaderService } from 'src/app/services/loader.service'
 import { Observable, of, Subscription } from 'rxjs'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { ConfigService, getManifest } from 'src/app/services/config.service'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, Manifest, PackageDataEntry, PackageState } from 'src/app/models/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, Manifest, PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
 import { FEStatus } from 'src/app/services/pkg-status-rendering.service'
 import { ConnectionService } from 'src/app/services/connection.service'
-import { Recommendation } from 'src/app/components/recommendation-button/recommendation-button.component'
 
 @Component({
   selector: 'app-show',
@@ -80,7 +79,9 @@ export class AppShowPage {
     }).displayDuringAsync(async () => {
       const breakages = await this.apiService.dryStopPackage({ id })
 
-      if (isEmptyObject(breakages.length)) {
+      console.log('BREAKAGES', breakages)
+
+      if (!isEmptyObject(breakages)) {
         const { cancelled } = await wizardModal(
           this.modalCtrl,
           this.wizardBaker.stop({
diff --git a/ui/src/app/pages/maintenance/maintenance.page.ts b/ui/src/app/pages/maintenance/maintenance.page.ts
index 3726e3e4b..bee3a1204 100644
--- a/ui/src/app/pages/maintenance/maintenance.page.ts
+++ b/ui/src/app/pages/maintenance/maintenance.page.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core'
-import { ServerStatus } from 'src/app/models/patch-db/data-model'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { ServerStatus } from 'src/app/services/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 
 @Component({
   selector: 'Maintenance',
diff --git a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
index 07f5d48f1..bc29ca0a4 100644
--- a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
+++ b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>Embassy Marketplace</ion-title>
+    <ion-title>Service Marketplace</ion-title>
     <ion-buttons slot="end">
       <badge-menu-button></badge-menu-button>
     </ion-buttons>
diff --git a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts
index a850bcf6c..eadcee88e 100644
--- a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts
+++ b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts
@@ -4,8 +4,8 @@ import { MarketplaceData, MarketplaceEOS, AvailablePreview } from 'src/app/servi
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { ModalController } from '@ionic/angular'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { PackageDataEntry, PackageState } from 'src/app/models/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
 import { Subscription } from 'rxjs'
 
 @Component({
diff --git a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts
index 1f9bac22d..559da69f8 100644
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts
+++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts
@@ -7,7 +7,6 @@ import { SharingModule } from 'src/app/modules/sharing.module'
 import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
 import { StatusComponentModule } from 'src/app/components/status/status.component.module'
-import { RecommendationButtonComponentModule } from 'src/app/components/recommendation-button/recommendation-button.component.module'
 import { InstallWizardComponentModule } from 'src/app/components/install-wizard/install-wizard.component.module'
 
 const routes: Routes = [
@@ -25,7 +24,6 @@ const routes: Routes = [
     RouterModule.forChild(routes),
     SharingModule,
     PwaBackComponentModule,
-    RecommendationButtonComponentModule,
     BadgeMenuComponentModule,
     InstallWizardComponentModule,
   ],
diff --git a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
index 192f4ced2..502469548 100644
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
+++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
@@ -155,72 +155,65 @@
                   <p>{{ pkg.categories.join(', ') }}</p>
                 </ion-label>
               </ion-item>
-              <ion-item detail="false">
+              <ion-item button detail="false" (click)="presentAlertVersions()">
                 <ion-label>
                   <h2>Other Versions</h2>
                   <p>Click to view other versions</p>
                 </ion-label>
-                <ion-button slot="end" fill="clear" (click)="presentAlertVersions()">
-                  <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
               </ion-item>
-              <ion-item detail="false">
+              <ion-item button detail="false" (click)="presentModalMd(pkg.manifest.)">
                 <ion-label>
                   <h2>License</h2>
                   <p>{{ pkg.manifest.license }}</p>
                 </ion-label>
-                <ion-button slot="end" fill="clear" (click)="presentModalLicense()">
-                  <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+              </ion-item>
+              <ion-item button detail="false" (click)="presentModalMd('instructions')">
+                <ion-label>
+                  <h2>Instructions</h2>
+                  <p>Click to view instructions</p>
+                </ion-label>
+                <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
               </ion-item>
             </ion-item-group>
           </ion-col>
-          <ion-col>
+          <ion-col sizeSm="12" sizeMd="6">
             <ion-item-group>
-              <ion-item detail="false">
+              <ion-item [href]="pkg.manifest['upstream-repo']" target="_blank" detail="false">
                 <ion-label>
                   <h2>Source Repository</h2>
                   <p>{{ pkg.manifest['upstream-repo'] }}</p>
                 </ion-label>
-                <ion-button slot="end" fill="clear" [href]="pkg.manifest['upstream-repo']" target="_blank">
-                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="open-outline"></ion-icon>
               </ion-item>
-              <ion-item detail="false">
+              <ion-item [href]="pkg.manifest['wrapper-repo']" target="_blank" detail="false">
                 <ion-label>
                   <h2>Wrapper Repository</h2>
                   <p>{{ pkg.manifest['wrapper-repo'] }}</p>
                 </ion-label>
-                <ion-button slot="end" fill="clear" [href]="pkg.manifest['wrapper-repo']" target="_blank">
-                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="open-outline"></ion-icon>
               </ion-item>
-              <ion-item detail="false">
+              <ion-item [href]="pkg.manifest['support-site']" target="_blank" detail="false">
                 <ion-label>
                   <h2>Support Site</h2>
                   <p>{{ pkg.manifest['support-site'] }}</p>
                 </ion-label>
-                <ion-button slot="end" fill="clear" [href]="pkg.manifest['support-site']" target="_blank">
-                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="open-outline"></ion-icon>
               </ion-item>
-              <ion-item detail="false">
+              <ion-item [href]="pkg.manifest['marketing-site']" target="_blank" detail="false">
                 <ion-label>
                   <h2>Marketing Site</h2>
                   <p>{{ pkg.manifest['marketing-site'] }}</p>
                 </ion-label>
-                <ion-button slot="end" fill="clear" [href]="pkg.manifest['marketing-site']" target="_blank">
-                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="open-outline"></ion-icon>
               </ion-item>
-              <ion-item *ngIf="pkg.manifest['donation-url'] as donationUrl" detail="false">
+              <ion-item *ngIf="pkg.manifest['donation-url'] as donationUrl" [href]="donationUrl" target="_blank" detail="false">
                 <ion-label>
                   <h2>Donation Site</h2>
                   <p>{{ donationUrl }}</p>
                 </ion-label>
-                <ion-button slot="end" fill="clear" [href]="donationUrl" target="_blank">
-                  <ion-icon slot="icon-only" name="open-outline"></ion-icon>
-                </ion-button>
+                <ion-icon slot="end" name="open-outline"></ion-icon>
               </ion-item>
             </ion-item-group>
           </ion-col>
diff --git a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts
index 5eb62a794..c874ee857 100644
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts
+++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts
@@ -1,16 +1,16 @@
 import { Component } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { AlertController, ModalController, NavController } from '@ionic/angular'
-import { Recommendation } from 'src/app/components/recommendation-button/recommendation-button.component'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { Emver } from 'src/app/services/emver.service'
 import { displayEmver } from 'src/app/pipes/emver.pipe'
-import { pauseFor } from 'src/app/util/misc.util'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { PackageDataEntry, PackageState } from 'src/app/models/patch-db/data-model'
+import { pauseFor, Recommendation } from 'src/app/util/misc.util'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
 import { MarketplaceService } from '../marketplace.service'
 import { Subscription } from 'rxjs'
+import { MarkdownPage } from 'src/app/modals/markdown/markdown.page'
 
 @Component({
   selector: 'marketplace-show',
@@ -35,7 +35,7 @@ export class MarketplaceShowPage {
     private readonly navCtrl: NavController,
     private readonly emver: Emver,
     private readonly patch: PatchDbModel,
-    public marketplaceService: MarketplaceService,
+    public readonly marketplaceService: MarketplaceService,
   ) { }
 
   async ngOnInit () {
@@ -95,6 +95,17 @@ export class MarketplaceShowPage {
     await alert.present()
   }
 
+  async presentModalMd (content: string) {
+    const modal = await this.modalCtrl.create({
+      componentProps: {
+        content,
+      },
+      component: MarkdownPage,
+    })
+
+    await modal.present()
+  }
+
   async install () {
     const { id, title, version, dependencies, alerts } = this.marketplaceService.pkgs[this.pkgId].manifest
     const { cancelled } = await wizardModal(
diff --git a/ui/src/app/pages/server-routes/developer-routes/dev-options/dev-options.page.ts b/ui/src/app/pages/server-routes/developer-routes/dev-options/dev-options.page.ts
index 4c12bf9df..09f4c3be6 100644
--- a/ui/src/app/pages/server-routes/developer-routes/dev-options/dev-options.page.ts
+++ b/ui/src/app/pages/server-routes/developer-routes/dev-options/dev-options.page.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 import { ServerConfigService } from 'src/app/services/server-config.service'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { ServerInfo } from 'src/app/models/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { ServerInfo } from 'src/app/services/patch-db/data-model'
 import { Subscription } from 'rxjs'
 
 @Component({
diff --git a/ui/src/app/pages/server-routes/lan/lan.page.ts b/ui/src/app/pages/server-routes/lan/lan.page.ts
index 96ec0009a..7e1b4abc6 100644
--- a/ui/src/app/pages/server-routes/lan/lan.page.ts
+++ b/ui/src/app/pages/server-routes/lan/lan.page.ts
@@ -4,7 +4,7 @@ import { copyToClipboard } from 'src/app/util/web.util'
 import { ConfigService } from 'src/app/services/config.service'
 import { LoaderService } from 'src/app/services/loader.service'
 import { ApiService } from 'src/app/services/api/api.service'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { Subscription } from 'rxjs'
 
 @Component({
diff --git a/ui/src/app/pages/server-routes/preferences/preferences.page.html b/ui/src/app/pages/server-routes/preferences/preferences.page.html
index bdc35663f..8c193984b 100644
--- a/ui/src/app/pages/server-routes/preferences/preferences.page.html
+++ b/ui/src/app/pages/server-routes/preferences/preferences.page.html
@@ -10,10 +10,6 @@
 <ion-content class="ion-padding-top">
 
   <ion-item-group>
-    <ion-item button (click)="presentModalValueEdit('name', ui['server-name'])">
-      <ion-label>Embassy Name</ion-label>
-      <ion-note slot="end">{{ ui['server-name'] }}</ion-note>
-    </ion-item>
     <ion-item button (click)="presentModalValueEdit('autoCheckUpdates', ui['auto-check-updates'])">
       <ion-label>Auto Check for Updates</ion-label>
       <ion-note slot="end">{{ ui['auto-check-updates'] }}</ion-note>
diff --git a/ui/src/app/pages/server-routes/preferences/preferences.page.ts b/ui/src/app/pages/server-routes/preferences/preferences.page.ts
index 46eddd2f9..8b11e4550 100644
--- a/ui/src/app/pages/server-routes/preferences/preferences.page.ts
+++ b/ui/src/app/pages/server-routes/preferences/preferences.page.ts
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core'
 import { ServerConfigService } from 'src/app/services/server-config.service'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { Subscription } from 'rxjs'
-import { UIData } from 'src/app/models/patch-db/data-model'
+import { UIData } from 'src/app/services/patch-db/data-model'
 
 @Component({
   selector: 'preferences',
diff --git a/ui/src/app/pages/server-routes/server-backup/server-backup.page.html b/ui/src/app/pages/server-routes/server-backup/server-backup.page.html
index ce8fcdd85..5798aadc8 100644
--- a/ui/src/app/pages/server-routes/server-backup/server-backup.page.html
+++ b/ui/src/app/pages/server-routes/server-backup/server-backup.page.html
@@ -52,7 +52,7 @@
             </ion-card-header>
             <ion-card-content>
               <ion-item-group>
-                <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key, partition.value)">
+                <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
                   <ion-icon slot="start" name="save-outline"></ion-icon>
                   <ion-label>
                     <h2>{{ partition.value.label || partition.key }} ({{ partition.value.size || 'unknown size' }})</h2>
diff --git a/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts b/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
index 9bf279df9..9133c192e 100644
--- a/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
+++ b/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core'
 import { LoadingController, ModalController } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/api.service'
 import { BackupConfirmationComponent } from 'src/app/modals/backup-confirmation/backup-confirmation.component'
-import { DiskInfo, PartitionInfoEntry } from 'src/app/services/api/api-types'
+import { DiskInfo } from 'src/app/services/api/api-types'
 
 @Component({
   selector: 'server-backup',
@@ -42,10 +42,10 @@ export class ServerBackupPage {
     }
   }
 
-  async presentModal (logicalname: string, partition: PartitionInfoEntry): Promise<void> {
+  async presentModal (logicalname: string): Promise<void> {
     const m = await this.modalCtrl.create({
       componentProps: {
-        name: partition.label || logicalname,
+        type: 'backup',
       },
       cssClass: 'alertlike-modal',
       component: BackupConfirmationComponent,
diff --git a/ui/src/app/pages/server-routes/server-routing.module.ts b/ui/src/app/pages/server-routes/server-routing.module.ts
index af45a7906..c85246830 100644
--- a/ui/src/app/pages/server-routes/server-routing.module.ts
+++ b/ui/src/app/pages/server-routes/server-routing.module.ts
@@ -26,6 +26,10 @@ const routes: Routes = [
     path: 'preferences',
     loadChildren: () => import('./preferences/preferences.module').then(m => m.PreferencesPageModule),
   },
+  {
+    path: 'preferences/edit',
+    loadChildren: () => import('./preferences/preferences.module').then(m => m.PreferencesPageModule),
+  },
   {
     path: 'wifi',
     loadChildren: () => import('./wifi/wifi.module').then(m => m.WifiListPageModule),
diff --git a/ui/src/app/pages/server-routes/server-show/server-show.page.html b/ui/src/app/pages/server-routes/server-show/server-show.page.html
index 1f29117ae..bf21fdfc6 100644
--- a/ui/src/app/pages/server-routes/server-show/server-show.page.html
+++ b/ui/src/app/pages/server-routes/server-show/server-show.page.html
@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>{{ patch.watch$('ui', 'server-name') | async }}</ion-title>
+    <ion-title>Embassy</ion-title>
     <ion-buttons slot="end">
       <badge-menu-button></badge-menu-button>
     </ion-buttons>
diff --git a/ui/src/app/pages/server-routes/server-show/server-show.page.ts b/ui/src/app/pages/server-routes/server-show/server-show.page.ts
index 582ae9f4a..e3a7bab6c 100644
--- a/ui/src/app/pages/server-routes/server-show/server-show.page.ts
+++ b/ui/src/app/pages/server-routes/server-show/server-show.page.ts
@@ -3,8 +3,6 @@ import { LoadingOptions } from '@ionic/core'
 import { AlertController, NavController } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/api.service'
 import { LoaderService } from 'src/app/services/loader.service'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { ServerStatus } from 'src/app/models/patch-db/data-model'
 import { ActivatedRoute } from '@angular/router'
 
 @Component({
@@ -13,7 +11,6 @@ import { ActivatedRoute } from '@angular/router'
   styleUrls: ['server-show.page.scss'],
 })
 export class ServerShowPage {
-  ServerStatus = ServerStatus
   settings: ServerSettings = { }
 
   constructor (
@@ -22,7 +19,6 @@ export class ServerShowPage {
     private readonly apiService: ApiService,
     private readonly navCtrl: NavController,
     private readonly route: ActivatedRoute,
-    public readonly patch: PatchDbModel,
   ) { }
 
   ngOnInit () {
@@ -77,7 +73,6 @@ export class ServerShowPage {
     this.loader
       .of(LoadingSpinner(`Restarting...`))
       .displayDuringAsync( async () => {
-        // this.serverModel.markUnreachable()
         await this.apiService.restartServer({ })
       })
       .catch(console.error)
@@ -87,7 +82,6 @@ export class ServerShowPage {
     this.loader
       .of(LoadingSpinner(`Shutting down...`))
       .displayDuringAsync( async () => {
-        // this.serverModel.markUnreachable()
         await this.apiService.shutdownServer({ })
       })
       .catch(console.error)
diff --git a/ui/src/app/pages/server-routes/server-specs/server-specs.page.html b/ui/src/app/pages/server-routes/server-specs/server-specs.page.html
index e6fb810c4..8340e728c 100644
--- a/ui/src/app/pages/server-routes/server-specs/server-specs.page.html
+++ b/ui/src/app/pages/server-routes/server-specs/server-specs.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding-top">
+<ion-content>
 
   <ion-item-divider>Basic</ion-item-divider>
 
diff --git a/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts b/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts
index 87208181d..11b5c652c 100644
--- a/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts
+++ b/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core'
 import { ToastController } from '@ionic/angular'
 import { copyToClipboard } from 'src/app/util/web.util'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
-import { ServerInfo } from 'src/app/models/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
+import { ServerInfo } from 'src/app/services/patch-db/data-model'
 import { Subscription } from 'rxjs'
 
 @Component({
diff --git a/ui/src/app/pages/server-routes/wifi/wifi.page.html b/ui/src/app/pages/server-routes/wifi/wifi.page.html
index 374bb9122..cb10f4339 100644
--- a/ui/src/app/pages/server-routes/wifi/wifi.page.html
+++ b/ui/src/app/pages/server-routes/wifi/wifi.page.html
@@ -29,7 +29,7 @@
     <ng-container *ngIf="wifi">
       <ion-item button detail="false" *ngFor="let ssid of wifi.ssids" (click)="presentAction(ssid, wifi)">
         <ion-label>{{ ssid }}</ion-label>
-        <ion-icon *ngIf="ssid === wifi.connected" name="wifi" color="success"></ion-icon>
+        <ion-note slot="end" *ngIf="ssid === wifi.connected"><ion-text color="success">Connected</ion-text></ion-note>
       </ion-item>
     </ng-container>
   </ion-item-group>
diff --git a/ui/src/app/pages/server-routes/wifi/wifi.page.ts b/ui/src/app/pages/server-routes/wifi/wifi.page.ts
index 82cb1cf25..31a9830dd 100644
--- a/ui/src/app/pages/server-routes/wifi/wifi.page.ts
+++ b/ui/src/app/pages/server-routes/wifi/wifi.page.ts
@@ -4,8 +4,8 @@ import { ApiService } from 'src/app/services/api/api.service'
 import { ActionSheetButton } from '@ionic/core'
 import { WifiService } from './wifi.service'
 import { LoaderService } from 'src/app/services/loader.service'
-import { WiFiInfo } from 'src/app/models/patch-db/data-model'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { WiFiInfo } from 'src/app/services/patch-db/data-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { Subscription } from 'rxjs'
 
 @Component({
diff --git a/ui/src/app/pages/server-routes/wifi/wifi.service.ts b/ui/src/app/pages/server-routes/wifi/wifi.service.ts
index ccbd1cfb8..dc87234e0 100644
--- a/ui/src/app/pages/server-routes/wifi/wifi.service.ts
+++ b/ui/src/app/pages/server-routes/wifi/wifi.service.ts
@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'
 import { AlertController, ToastController } from '@ionic/angular'
 import { merge, Observable, timer } from 'rxjs'
 import { filter, map, take, tap } from 'rxjs/operators'
-import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
+import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 
 @Injectable({
   providedIn: 'root',
diff --git a/ui/src/app/pipes/display-bulb.pipe.ts b/ui/src/app/pipes/display-bulb.pipe.ts
index bd9be9be0..003245bc1 100644
--- a/ui/src/app/pipes/display-bulb.pipe.ts
+++ b/ui/src/app/pipes/display-bulb.pipe.ts
@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import { PackageDataEntry } from '../models/patch-db/data-model'
+import { PackageDataEntry } from '../services/patch-db/data-model'
 import { renderPkgStatus } from '../services/pkg-status-rendering.service'
 
 @Pipe({
diff --git a/ui/src/app/pipes/status.pipe.ts b/ui/src/app/pipes/status.pipe.ts
index ff841e86a..85ba8b365 100644
--- a/ui/src/app/pipes/status.pipe.ts
+++ b/ui/src/app/pipes/status.pipe.ts
@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import { PackageDataEntry } from '../models/patch-db/data-model'
+import { PackageDataEntry } from '../services/patch-db/data-model'
 import { FEStatus, renderPkgStatus } from '../services/pkg-status-rendering.service'
 
 @Pipe({
diff --git a/ui/src/app/pipes/ui.pipe.ts b/ui/src/app/pipes/ui.pipe.ts
index 7c02a9f68..f3a36b903 100644
--- a/ui/src/app/pipes/ui.pipe.ts
+++ b/ui/src/app/pipes/ui.pipe.ts
@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core'
-import { PackageDataEntry, Manifest } from '../models/patch-db/data-model'
+import { PackageDataEntry, Manifest } from '../services/patch-db/data-model'
 import { ConfigService, getManifest, hasUi } from '../services/config.service'
 
 @Pipe({
diff --git a/ui/src/app/pkg-config/modal-presentable.ts b/ui/src/app/pkg-config/modal-presentable.ts
index 52473b947..3a2496037 100644
--- a/ui/src/app/pkg-config/modal-presentable.ts
+++ b/ui/src/app/pkg-config/modal-presentable.ts
@@ -2,7 +2,10 @@ import { ConfigCursor } from './config-cursor'
 import { TrackingModalController } from '../services/tracking-modal-controller.service'
 
 export class ModalPresentable {
-  constructor (private readonly trackingModalCtrl: TrackingModalController) { }
+
+  constructor (
+    private readonly trackingModalCtrl: TrackingModalController,
+  ) { }
 
   async presentModal (cursor: ConfigCursor<any>, callback: () => any) {
     const modal = await this.trackingModalCtrl.createConfigModal({
diff --git a/ui/src/app/services/api/api-types.ts b/ui/src/app/services/api/api-types.ts
index cae4c8195..948e1ffa9 100644
--- a/ui/src/app/services/api/api-types.ts
+++ b/ui/src/app/services/api/api-types.ts
@@ -1,7 +1,7 @@
 import { Dump, Revision } from 'patch-db-client'
 import { PackagePropertiesVersioned } from 'src/app/util/properties.util'
 import { ConfigSpec } from 'src/app/pkg-config/config-types'
-import { DataModel, DependencyError, Manifest, URL } from 'src/app/models/patch-db/data-model'
+import { DataModel, DependencyError, Manifest, URL } from 'src/app/services/patch-db/data-model'
 
 export module RR {
 
@@ -187,6 +187,8 @@ export interface AvailablePreview {
 
 export interface AvailableShow {
   icon: URL
+  license: URL
+  instructions: URL
   manifest: Manifest
   categories: string[]
   versions: string[]
diff --git a/ui/src/app/services/api/api.service.ts b/ui/src/app/services/api/api.service.ts
index 5f9be1c9b..c0b258fce 100644
--- a/ui/src/app/services/api/api.service.ts
+++ b/ui/src/app/services/api/api.service.ts
@@ -1,22 +1,17 @@
 import { Subject, Observable } from 'rxjs'
-import { Http, Update, Operation, Revision } from 'patch-db-client'
+import { Http, Update, Operation, Revision, Source, Store } from 'patch-db-client'
 import { RR } from './api-types'
-import { DataModel } from 'src/app/models/patch-db/data-model'
-import { filter } from 'rxjs/operators'
+import { DataModel } from 'src/app/services/patch-db/data-model'
 
-export abstract class ApiService implements Http<DataModel> {
+export abstract class ApiService implements Source<DataModel>, Http<DataModel> {
   protected readonly sync = new Subject<Update<DataModel>>()
-  private syncing = true
 
   /** PatchDb Source interface. Post/Patch requests provide a source of patches to the db. */
   // sequenceStream '_' is not used by the live api, but is overridden by the mock
-  watch$ (_?: Observable<number>): Observable<Update<DataModel>> {
-    return this.sync.asObservable().pipe(filter(() => this.syncing))
+  watch$ (_?: Store<DataModel>): Observable<Update<DataModel>> {
+    return this.sync.asObservable()
   }
 
-  // used for determining internet connectivity
-  abstract echo (): Promise<string>
-
   // for getting static files: ex icons, instructions, licenses
   abstract getStatic (url: string): Promise<string>
 
@@ -189,18 +184,4 @@ export abstract class ApiService implements Http<DataModel> {
       }) as any
     }
   }
-
-  // @TODO better types?
-  // private async process<T, F extends (args: object) => Promise<{ response: T, revision?: Revision }>> (f: F, temps: Operation[] = []): Promise<T> {
-  //   let expireId = undefined
-  //   if (temps.length) {
-  //     expireId = uuid.v4()
-  //     this.sync.next({ patch: temps, expiredBy: expireId })
-  //   }
-  //   const { response, revision } = await f({ ...f.arguments, expireId })
-  //   if (revision) this.sync.next(revision)
-  //   return response
-  // }
 }
-// used for type inference in syncResponse
-type ExtractResultPromise<T extends Promise<any>> = T extends Promise<infer R> ? Promise<R> : any
diff --git a/ui/src/app/services/api/live-api.service.ts b/ui/src/app/services/api/live-api.service.ts
index df3433cd3..24a538285 100644
--- a/ui/src/app/services/api/live-api.service.ts
+++ b/ui/src/app/services/api/live-api.service.ts
@@ -10,10 +10,6 @@ export class LiveApiService extends ApiService {
     private readonly http: HttpService,
   ) { super() }
 
-  async echo (): Promise<string> {
-    return this.http.rpcRequest({ method: 'echo', params: { } })
-  }
-
   async getStatic (url: string): Promise<string> {
     return this.http.httpRequest({ method: Method.GET, url })
   }
diff --git a/ui/src/app/services/api/mock-api.service.ts b/ui/src/app/services/api/mock-api.service.ts
index c20754cb4..9da2b921b 100644
--- a/ui/src/app/services/api/mock-api.service.ts
+++ b/ui/src/app/services/api/mock-api.service.ts
@@ -2,13 +2,14 @@ import { Injectable } from '@angular/core'
 import { pauseFor } from '../../util/misc.util'
 import { ApiService } from './api.service'
 import { Observable } from 'rxjs'
-import { PatchOp, Update } from 'patch-db-client'
-import { DataModel, PackageDataEntry, PackageMainStatus, PackageState, ServerStatus } from 'src/app/models/patch-db/data-model'
+import { PatchOp, Store, Update } from 'patch-db-client'
+import { DataModel, PackageDataEntry, PackageMainStatus, PackageState, ServerStatus } from 'src/app/services/patch-db/data-model'
 import { RR } from './api-types'
 import { parsePropertiesPermissive } from 'src/app/util/properties.util'
 import { Mock } from './mock-app-fixures'
 import { HttpService } from '../http.service'
-import { ConfigService } from '../config.service'
+import markdown from 'raw-loader!src/assets/markdown/md-sample.md'
+import { map } from 'rxjs/operators'
 
 @Injectable()
 export class MockApiService extends ApiService {
@@ -20,18 +21,20 @@ export class MockApiService extends ApiService {
   ) { super() }
 
   // every time a patch is returned from the mock, we override its sequence to be 1 more than the last sequence in the patch-db as provided by `o`.
-  watch$ (sequenceStream: Observable<number>): Observable<Update<DataModel>> {
-    sequenceStream.subscribe(i => this.sequence < i ? (this.sequence = i) : { })
+  watch$ (store: Store<DataModel>): Observable<Update<DataModel>> {
+    store.watchCache$().pipe(map(cache => cache.sequence)).subscribe(seq => {
+      console.log('INCOMING: ', seq)
+      if (this.sequence < seq) {
+        console.log('hererereree')
+        this.sequence = seq
+      }
+    })
     return super.watch$()
   }
 
-  async echo (): Promise<string> {
-    console.log('echo...echo')
-    return ''
-  }
-
   async getStatic (url: string): Promise<string> {
-    return Mock.DbDump.value['package-data']['bitcoind']['static-files'].instructions
+    await pauseFor(2000)
+    return markdown
   }
 
   // db
diff --git a/ui/src/app/services/api/mock-app-fixures.ts b/ui/src/app/services/api/mock-app-fixures.ts
index 4677bafb8..a0d13e168 100644
--- a/ui/src/app/services/api/mock-app-fixures.ts
+++ b/ui/src/app/services/api/mock-app-fixures.ts
@@ -1,13 +1,12 @@
-import { DependencyErrorType, DockerIoFormat, Manifest, PackageDataEntry, PackageMainStatus, PackageState, ServerStatus } from 'src/app/models/patch-db/data-model'
+import { DependencyErrorType, DockerIoFormat, Manifest, PackageDataEntry, PackageMainStatus, PackageState, ServerStatus } from 'src/app/services/patch-db/data-model'
 import { NotificationLevel, RR, ServerNotification, ServerNotifications } from './api-types'
-import markdown from 'raw-loader!./md-sample.md'
 
 export module Mock {
 
   export const MarketplaceEos: RR.GetMarketplaceEOSRes = {
     version: '1.0.0',
     headline: 'Our biggest release ever.',
-    'release-notes': { '1.0.0': markdown },
+    'release-notes': { '1.0.0': 'Some **Markdown** release _notes_' },
   }
 
   export const AvailableList: RR.GetAvailableListRes = [
@@ -402,6 +401,8 @@ export module Mock {
     'bitcoind': {
       '0.19.2': {
         icon: 'assets/img/service-icons/bitcoind.png',
+        license: 'licenseUrl',
+        instructions: 'instructionsUrl',
         manifest: {
           ...Mock.MockManifestBitcoind,
           version: '0.19.0',
@@ -417,6 +418,8 @@ export module Mock {
       },
       '0.20.0': {
         icon: 'assets/img/service-icons/bitcoind.png',
+        license: 'licenseUrl',
+        instructions: 'instructionsUrl',
         manifest: {
           ...Mock.MockManifestBitcoind,
           version: '0.20.0',
@@ -432,6 +435,8 @@ export module Mock {
       },
       '0.21.0': {
         icon: 'assets/img/service-icons/bitcoind.png',
+        license: 'licenseUrl',
+        instructions: 'instructionsUrl',
         manifest: {
           ...Mock.MockManifestBitcoind,
           version: '0.21.0',
@@ -448,6 +453,8 @@ export module Mock {
       },
       'latest': {
         icon: 'assets/img/service-icons/bitcoind.png',
+        license: 'licenseUrl',
+        instructions: 'instructionsUrl',
         manifest: {
           ...Mock.MockManifestBitcoind,
           'release-notes': 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.',
@@ -465,6 +472,8 @@ export module Mock {
     'lnd': {
       '0.11.0': {
         icon: 'assets/img/service-icons/lnd.png',
+        license: 'licenseUrl',
+        instructions: 'instructionsUrl',
         manifest: {
           ...Mock.MockManifestLnd,
           version: '0.11.0',
@@ -490,6 +499,8 @@ export module Mock {
       },
       '0.11.1': {
         icon: 'assets/img/service-icons/lnd.png',
+        license: 'licenseUrl',
+        instructions: 'instructionsUrl',
         manifest: {
           ...Mock.MockManifestLnd,
           version: '0.11.1',
@@ -515,6 +526,8 @@ export module Mock {
       },
       'latest': {
         icon: 'assets/img/service-icons/lnd.png',
+        license: 'licenseUrl',
+        instructions: 'instructionsUrl',
         manifest: Mock.MockManifestLnd,
         categories: ['bitcoin', 'lightning', 'cryptocurrency'],
         versions: ['0.11.0', '0.11.1'],
@@ -538,6 +551,8 @@ export module Mock {
     'bitcoin-proxy': {
       'latest': {
         icon: 'assets/img/service-icons/bitcoin-proxy.png',
+        license: 'licenseUrl',
+        instructions: 'instructionsUrl',
         manifest: Mock.MockManifestBitcoinProxy,
         categories: ['bitcoin'],
         versions: ['0.2.2'],
@@ -559,9 +574,9 @@ export module Mock {
   export const bitcoind: PackageDataEntry = {
     state: PackageState.Installed,
     'static-files': {
-      license: 'licenseURL',
+      license: 'licenseUrl', // /public/package-data/bitcoind/0.21.1/LICENSE.md,
       icon: 'assets/img/service-icons/bitcoind.png',
-      instructions: markdown, // /public/package-data/bitcoind/0.21.1/INSTRUCTIONS.md
+      instructions: 'instructionsUrl', // /public/package-data/bitcoind/0.21.1/INSTRUCTIONS.md
     },
     'temp-manifest': undefined,
     installed: {
@@ -610,9 +625,9 @@ export module Mock {
   export const lnd: PackageDataEntry = {
     state: PackageState.Installed,
     'static-files': {
-      license: 'licenseURL',
+      license: 'licenseUrl', // /public/package-data/lnd/0.21.1/LICENSE.md,
       icon: 'assets/img/service-icons/lnd.png',
-      instructions: markdown, // /public/package-data/bitcoind/0.21.1/INSTRUCTIONS.md
+      instructions: 'instructionsUrl', // /public/package-data/lnd/0.21.1/INSTRUCTIONS.md
     },
     'temp-manifest': undefined,
     installed: {
@@ -662,9 +677,9 @@ export module Mock {
   export const bitcoinproxy: PackageDataEntry = {
     state: PackageState.Installed,
     'static-files': {
-      license: 'licenseURL',
+      license: 'licenseUrl', // /public/package-data/bitcoinproxy/0.21.1/LICENSE.md,
       icon: 'assets/img/service-icons/bitcoin-proxy.png',
-      instructions: '*These are some instructions.*', // /public/package-data/bitcoinproxy/0.2.2/INSTRUCTIONS.md
+      instructions: 'instructionsUrl', // /public/package-data/bitcoinproxy/0.2.2/INSTRUCTIONS.md
     },
     'temp-manifest': undefined,
     installed: {
@@ -737,7 +752,6 @@ export module Mock {
         'lnd': lnd,
       },
       ui: {
-        'server-name': 'My Embassy',
         'welcome-ack': '1.0.0',
         'auto-check-updates': true,
       },
diff --git a/ui/src/app/services/auth.service.ts b/ui/src/app/services/auth.service.ts
index a13cfb9b2..725a64d41 100644
--- a/ui/src/app/services/auth.service.ts
+++ b/ui/src/app/services/auth.service.ts
@@ -3,7 +3,6 @@ import { BehaviorSubject, Observable } from 'rxjs'
 import { distinctUntilChanged } from 'rxjs/operators'
 import { ApiService } from './api/api.service'
 import { Storage } from '@ionic/storage'
-import { StorageKeys } from '../models/storage-keys'
 
 export enum AuthState {
   UNVERIFIED,
@@ -14,6 +13,7 @@ export enum AuthState {
   providedIn: 'root',
 })
 export class AuthService {
+  private readonly LOGGED_IN_KEY = 'loggedInKey'
   private readonly authState$: BehaviorSubject<AuthState> = new BehaviorSubject(AuthState.INITIALIZING)
 
   constructor (
@@ -22,7 +22,7 @@ export class AuthService {
   ) { }
 
   async init (): Promise<void> {
-    const loggedIn = await this.storage.get(StorageKeys.LOGGED_IN_KEY)
+    const loggedIn = await this.storage.get(this.LOGGED_IN_KEY)
     this.authState$.next( loggedIn ? AuthState.VERIFIED : AuthState.UNVERIFIED)
   }
 
@@ -32,7 +32,7 @@ export class AuthService {
 
   async login (password: string): Promise<void> {
     await this.api.login({ password })
-    await this.storage.set(StorageKeys.LOGGED_IN_KEY, true)
+    await this.storage.set(this.LOGGED_IN_KEY, true)
     this.authState$.next(AuthState.VERIFIED)
   }
 
diff --git a/ui/src/app/services/config.service.ts b/ui/src/app/services/config.service.ts
index ba0817e73..909501c45 100644
--- a/ui/src/app/services/config.service.ts
+++ b/ui/src/app/services/config.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { InstalledPackageDataEntry, InterfaceDef, Manifest, PackageDataEntry, PackageMainStatus, PackageState } from '../models/patch-db/data-model'
+import { InstalledPackageDataEntry, InterfaceDef, Manifest, PackageDataEntry, PackageMainStatus, PackageState } from './patch-db/data-model'
 
 const { patchDb, api, mocks } = require('../../../ui-config.json') as UiConfig
 
diff --git a/ui/src/app/services/connection.service.ts b/ui/src/app/services/connection.service.ts
index bcd8e2c25..a6a265b0e 100644
--- a/ui/src/app/services/connection.service.ts
+++ b/ui/src/app/services/connection.service.ts
@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core'
-import { BehaviorSubject, combineLatest, fromEvent, merge, Observable, Subscription } from 'rxjs'
-import { ConnectionStatus } from '../../../../../patch-db/client/dist'
-import { DataModel } from '../models/patch-db/data-model'
-import { PatchDbModel } from '../models/patch-db/patch-db-model'
+import { BehaviorSubject, combineLatest, fromEvent, merge, Subscription } from 'rxjs'
+import { DataModel } from './patch-db/data-model'
+import { ConnectionStatus, PatchDbModel } from './patch-db/patch-db.service'
 import { HttpService, Method } from './http.service'
+import { distinctUntilChanged } from 'rxjs/operators'
 
 @Injectable({
   providedIn: 'root',
@@ -19,7 +19,7 @@ export class ConnectionService {
     private readonly patch: PatchDbModel,
   ) { }
 
-  watch$ () {
+  watchFailure$ () {
     return this.connectionFailure$.asObservable()
   }
 
@@ -39,22 +39,27 @@ export class ConnectionService {
         this.networkState$.next(event.type === 'online')
       }),
 
-      combineLatest([this.networkState$, this.patch.connectionStatus$()])
+      combineLatest([this.networkState$.pipe(distinctUntilChanged()), this.patch.watchConnection$().pipe(distinctUntilChanged())])
       .subscribe(async ([network, connectionStatus]) => {
+        console.log('CONNECTION STATUS', connectionStatus)
         if (connectionStatus !== ConnectionStatus.Disconnected) {
           this.connectionFailure$.next(ConnectionFailure.None)
         } else if (!network) {
           this.connectionFailure$.next(ConnectionFailure.Network)
         } else {
+          console.log('diagnosing')
           this.connectionFailure$.next(ConnectionFailure.Diagnosing)
           const torSuccess = await this.testAddrs(this.addrs.tor)
           if (torSuccess) {
+            console.log('TOR SUCCESS, EMBASSY IS PROBLEM')
             this.connectionFailure$.next(ConnectionFailure.Embassy)
           } else {
             const clearnetSuccess = await this.testAddrs(this.addrs.clearnet)
             if (clearnetSuccess) {
+              console.log('CLEARNET SUCCESS, TOR IS PROBLEM')
               this.connectionFailure$.next(ConnectionFailure.Tor)
             } else {
+              console.log('INTERNET IS PROBLEM')
               this.connectionFailure$.next(ConnectionFailure.Internet)
             }
           }
diff --git a/ui/src/app/models/patch-db/data-model.ts b/ui/src/app/services/patch-db/data-model.ts
similarity index 99%
rename from ui/src/app/models/patch-db/data-model.ts
rename to ui/src/app/services/patch-db/data-model.ts
index 0defaddef..1e825b03e 100644
--- a/ui/src/app/models/patch-db/data-model.ts
+++ b/ui/src/app/services/patch-db/data-model.ts
@@ -379,7 +379,6 @@ export interface InterfaceInfo {
 export type URL = string
 
 export interface UIData {
-  'server-name': string
   'welcome-ack': string
   'auto-check-updates': boolean
 }
diff --git a/ui/src/app/models/patch-db/local-storage-bootstrap.ts b/ui/src/app/services/patch-db/local-storage-bootstrap.ts
similarity index 100%
rename from ui/src/app/models/patch-db/local-storage-bootstrap.ts
rename to ui/src/app/services/patch-db/local-storage-bootstrap.ts
diff --git a/ui/src/app/models/patch-db/patch-db-model.factory.ts b/ui/src/app/services/patch-db/patch-db.factory.ts
similarity index 78%
rename from ui/src/app/models/patch-db/patch-db-model.factory.ts
rename to ui/src/app/services/patch-db/patch-db.factory.ts
index 949392f93..a6c5fdffe 100644
--- a/ui/src/app/models/patch-db/patch-db-model.factory.ts
+++ b/ui/src/app/services/patch-db/patch-db.factory.ts
@@ -2,13 +2,13 @@ import { PollSource, Source, WebsocketSource } from 'patch-db-client'
 import { ConfigService } from 'src/app/services/config.service'
 import { DataModel } from './data-model'
 import { LocalStorageBootstrap } from './local-storage-bootstrap'
-import { PatchDbModel } from './patch-db-model'
+import { PatchDbModel } from './patch-db.service'
 import { ApiService } from 'src/app/services/api/api.service'
 
 export function PatchDbModelFactory (
   config: ConfigService,
   bootstrapper: LocalStorageBootstrap,
-  http: ApiService,
+  apiService: ApiService,
 ): PatchDbModel {
 
   const { mocks, patchDb: { poll }, isConsulate } = config
@@ -17,13 +17,13 @@ export function PatchDbModelFactory (
 
   if (mocks.enabled) {
     if (mocks.connection === 'poll') {
-      source = new PollSource({ ...poll }, http)
+      source = new PollSource({ ...poll }, apiService)
     } else {
       source = new WebsocketSource(`ws://localhost:${config.mocks.wsPort}/db`)
     }
   } else {
     if (isConsulate) {
-      source = new PollSource({ ...poll }, http)
+      source = new PollSource({ ...poll }, apiService)
     } else {
       const protocol = window.location.protocol === 'http:' ? 'ws' : 'wss'
       const host = window.location.host
@@ -31,5 +31,5 @@ export function PatchDbModelFactory (
     }
   }
 
-  return new PatchDbModel(bootstrapper, source)
+  return new PatchDbModel(bootstrapper, [source, apiService])
 }
\ No newline at end of file
diff --git a/ui/src/app/models/patch-db/patch-db-model.ts b/ui/src/app/services/patch-db/patch-db.service.ts
similarity index 63%
rename from ui/src/app/models/patch-db/patch-db-model.ts
rename to ui/src/app/services/patch-db/patch-db.service.ts
index 8fd1f376b..ca66e8dd6 100644
--- a/ui/src/app/models/patch-db/patch-db-model.ts
+++ b/ui/src/app/services/patch-db/patch-db.service.ts
@@ -1,27 +1,34 @@
 import { Inject, Injectable, InjectionToken } from '@angular/core'
-import { Bootstrapper, ConnectionStatus, PatchDB, Source, Store } from 'patch-db-client'
-import { Observable, of, Subscription } from 'rxjs'
-import { catchError, debounceTime, map } from 'rxjs/operators'
+import { Bootstrapper, PatchDB, Source, Store } from 'patch-db-client'
+import { BehaviorSubject, Observable, of, Subscription } from 'rxjs'
+import { catchError, debounceTime, map, tap } from 'rxjs/operators'
 import { DataModel } from './data-model'
 
 export const BOOTSTRAPPER = new InjectionToken<Bootstrapper<DataModel>>('app.config')
 export const PATCH_SOURCE = new InjectionToken<Source<DataModel>>('app.config')
 
+export enum ConnectionStatus {
+  Initializing = 'initializing',
+  Connected = 'connected',
+  Disconnected = 'disconnected',
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class PatchDbModel {
-  patchDb: PatchDB<DataModel>
+  connectionStatus$ = new BehaviorSubject(ConnectionStatus.Initializing)
+  private patchDb: PatchDB<DataModel>
   private patchSub: Subscription
 
   constructor (
     @Inject(BOOTSTRAPPER) private readonly bootstrapper: Bootstrapper<DataModel>,
-    @Inject(PATCH_SOURCE) private readonly source: Source<DataModel>,
+    @Inject(PATCH_SOURCE) private readonly sources: Source<DataModel>[],
   ) { }
 
   async init (): Promise<void> {
     const cache = await this.bootstrapper.init()
-    this.patchDb = new PatchDB(this.source, cache)
+    this.patchDb = new PatchDB(this.sources, cache)
   }
 
   start (): void {
@@ -32,12 +39,14 @@ export class PatchDbModel {
       .pipe(debounceTime(500))
       .subscribe({
         next: cache => {
-          console.log('saving cache: ', cache.sequence)
+          console.log('saving cacheee: ', cache)
+          this.connectionStatus$.next(ConnectionStatus.Connected)
           this.bootstrapper.update(cache)
         },
         error: e => {
           console.error('patch-db-sync sub ERROR', e)
-          this.start()
+          this.connectionStatus$.next(ConnectionStatus.Disconnected)
+          // this.start()
         },
         complete: () => {
           console.error('patch-db-sync sub COMPLETE')
@@ -56,19 +65,20 @@ export class PatchDbModel {
   }
 
   connected$ (): Observable<boolean> {
-    return this.patchDb.connectionStatus$
+    return this.connectionStatus$
     .pipe(
       map(status => status === ConnectionStatus.Connected),
     )
   }
 
-  connectionStatus$ (): Observable<ConnectionStatus> {
-    return this.patchDb.connectionStatus$.asObservable()
+  watchConnection$ (): Observable<ConnectionStatus> {
+    return this.connectionStatus$.asObservable()
   }
 
   watch$: Store<DataModel> ['watch$'] = (...args: (string | number)[]): Observable<DataModel> => {
     // console.log('WATCHING')
     return this.patchDb.store.watch$(...(args as [])).pipe(
+      tap(cache => console.log('CHANGE IN STORE', cache)),
       catchError(e => {
         console.error(e)
         return of(e.message)
diff --git a/ui/src/app/services/pkg-status-rendering.service.ts b/ui/src/app/services/pkg-status-rendering.service.ts
index 219bd6f30..fbcf06422 100644
--- a/ui/src/app/services/pkg-status-rendering.service.ts
+++ b/ui/src/app/services/pkg-status-rendering.service.ts
@@ -1,4 +1,4 @@
-import { HealthCheckResultLoading, MainStatusRunning, PackageDataEntry, PackageMainStatus, PackageState, Status } from '../models/patch-db/data-model'
+import { HealthCheckResultLoading, MainStatusRunning, PackageDataEntry, PackageMainStatus, PackageState, Status } from './patch-db/data-model'
 
 export function renderPkgStatus (pkg: PackageDataEntry): PkgStatusRendering {
   switch (pkg.state) {
@@ -15,7 +15,7 @@ function handleInstalledState (status: Status): PkgStatusRendering {
   }
 
   if (Object.keys(status['dependency-errors']).length) {
-    return { display: 'Needs Attention', color: 'warning', showDots: false, feStatus: FEStatus.DependencyIssue }
+    return { display: 'Dependency Issue', color: 'warning', showDots: false, feStatus: FEStatus.DependencyIssue }
   }
 
   switch (status.main.status) {
diff --git a/ui/src/app/services/server-config.service.ts b/ui/src/app/services/server-config.service.ts
index bf5bb5b5d..96eb8f132 100644
--- a/ui/src/app/services/server-config.service.ts
+++ b/ui/src/app/services/server-config.service.ts
@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core'
-import { ModalController } from '@ionic/angular'
 import { AppConfigValuePage } from '../modals/app-config-value/app-config-value.page'
 import { ApiService } from './api/api.service'
 import { ConfigSpec } from '../pkg-config/config-types'
 import { ConfigCursor } from '../pkg-config/config-cursor'
 import { SSHService } from '../pages/server-routes/developer-routes/dev-ssh-keys/ssh.service'
+import { TrackingModalController } from './tracking-modal-controller.service'
 
 @Injectable({
   providedIn: 'root',
@@ -12,7 +12,7 @@ import { SSHService } from '../pages/server-routes/developer-routes/dev-ssh-keys
 export class ServerConfigService {
 
   constructor (
-    private readonly modalCtrl: ModalController,
+    private readonly trackingModalCtrl: TrackingModalController,
     private readonly apiService: ApiService,
     private readonly sshService: SSHService,
   ) { }
@@ -20,10 +20,10 @@ export class ServerConfigService {
   async presentModalValueEdit (key: string, current?: string) {
     const cursor = new ConfigCursor(serverConfig, { [key]: current }).seekNext(key)
 
-    const modal = await this.modalCtrl.create({
+    const modal = await this.trackingModalCtrl.create({
       backdropDismiss: false,
       component: AppConfigValuePage,
-      presentingElement: await this.modalCtrl.getTop(),
+      presentingElement: await this.trackingModalCtrl.getTop(),
       componentProps: {
         cursor,
         saveFn: this.saveFns[key],
diff --git a/ui/src/app/services/tracking-modal-controller.service.ts b/ui/src/app/services/tracking-modal-controller.service.ts
index 28a5aab06..a17225905 100644
--- a/ui/src/app/services/tracking-modal-controller.service.ts
+++ b/ui/src/app/services/tracking-modal-controller.service.ts
@@ -1,10 +1,11 @@
-import { Inject, Injectable } from '@angular/core'
+import { Inject, Injectable, InjectionToken } from '@angular/core'
 import { Observable, Subject } from 'rxjs'
 import { ModalController } from '@ionic/angular'
 import { ModalOptions } from '@ionic/core'
-import { APP_CONFIG_COMPONENT_MAPPING } from '../modals/app-config-injectable/modal-injectable-token'
-import { AppConfigComponentMapping } from '../modals/app-config-injectable/modal-injectable-type'
 import { ValueSpec } from '../pkg-config/config-types'
+import { AppConfigComponentMapping } from '../modals/app-config-injectable'
+
+export const APP_CONFIG_COMPONENT_MAPPING = new InjectionToken<string>('APP_CONFIG_COMPONENTS')
 
 @Injectable({
   providedIn: 'root',
diff --git a/ui/src/app/util/misc.util.ts b/ui/src/app/util/misc.util.ts
index b94a2a1a2..e2ee6912f 100644
--- a/ui/src/app/util/misc.util.ts
+++ b/ui/src/app/util/misc.util.ts
@@ -1,6 +1,14 @@
 export type Omit<ObjectType, KeysType extends keyof ObjectType> = Pick<ObjectType, Exclude<keyof ObjectType, KeysType>>
 export type PromiseRes<T> = { result: 'resolve', value: T } | { result: 'reject', value: Error }
 
+export type Recommendation = {
+  dependentId: string
+  dependentTitle: string
+  dependentIcon: string,
+  description: string
+  version?: string
+}
+
 import { OperatorFunction } from 'rxjs'
 import { map } from 'rxjs/operators'
 
diff --git a/ui/src/app/services/api/md-sample.md b/ui/src/assets/markdown/md-sample.md
similarity index 100%
rename from ui/src/app/services/api/md-sample.md
rename to ui/src/assets/markdown/md-sample.md
diff --git a/ui/src/global.scss b/ui/src/global.scss
index 458dfcd80..e2550f2cc 100644
--- a/ui/src/global.scss
+++ b/ui/src/global.scss
@@ -111,7 +111,7 @@ ion-badge {
 ion-item-divider {
   --background: transparent;
   text-transform: uppercase;
-  margin-top: 16px;
+  margin-top: 12px;
   font-weight: 400;
 }
 
@@ -161,9 +161,9 @@ ion-popover {
 
 .modal-wrapper {
   position: absolute;
-  height: 90%!important;
+  height: 90% !important;
   top: 5%;
-  width: 90%!important;
+  width: 90% !important;
   left: 5%;
   display: block;
 }
@@ -171,37 +171,30 @@ ion-popover {
 @media (min-width:1000px) {
   .modal-wrapper {
     position: absolute;
-    height: 80% !important;
-    top: 10%;
-    width: 60% !important;
-    left: 20%;
+    height: 60% !important;
+    top: 20%;
+    width: 50% !important;
+    left: 25%;
     display: block;
   }
 }
 
-
-@media (min-width:1000px) {
-  .alertlike-modal {
-    --backdrop-opacity: 0.7 !important;
-    .modal-wrapper {
-      height: 46% !important;
-      width: 46% !important;
-      left: 26% !important;
-      top: 26% !important;
-      --box-shadow: none !important;
-    }
+.alertlike-modal {
+  .modal-wrapper {
+    height: 50% !important;
+    top: 25% !important;
+    width: 90% !important;
+    left: 5% !important;
+    --box-shadow: none !important;
   }
 }
 
-
-.alertlike-modal {
-  --backdrop-opacity: 0.7 !important;
-  .modal-wrapper {
-    height: 60% !important;
-    width: 80% !important;
-    left: 10% !important;
-    top: 20% !important;
-    --box-shadow: none !important;
+@media (min-width:1000px) {
+  .alertlike-modal {
+    .modal-wrapper {
+      width: 50% !important;
+      left: 25% !important;
+    }
   }
 }
 
@@ -234,14 +227,9 @@ ion-loading {
 }
 
 ion-modal {
-  --box-shadow: 3px 4px 14px 3px rgba(255,255,255,0.3) !important;
-}
-
-ion-modal:first-of-type {
   --backdrop-opacity: 0.75 !important;
 }
 
-
 .swiper-pagination {
   position: fixed;
   bottom: 0px;
diff --git a/ui/ui-config.json b/ui/ui-config.json
index 65a58f496..7f06abd3a 100644
--- a/ui/ui-config.json
+++ b/ui/ui-config.json
@@ -10,7 +10,7 @@
   },
   "mocks": {
     "enabled": true,
-    "connection": "ws",
+    "connection": "poll",
     "rpcPort": "5959",
     "wsPort": "5960",
     "maskAs": "tor",