diff --git a/angular.json b/angular.json
index 0fcc3b76..9b71a64a 100644
--- a/angular.json
+++ b/angular.json
@@ -63,23 +63,23 @@
                 }
               ]
             },
-            "web": {
-              "optimization": false,
-              "outputHashing": "none",
-              "sourceMap": true,
+            "capacitor": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
               "namedChunks": false,
-              "aot": false,
+              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": false,
+              "buildOptimizer": true,
               "fileReplacements": [
                 {
                   "replace": "apps/web/environments/environment.ts",
-                  "with": "apps/web/environments/environment.web.ts"
+                  "with": "apps/web/environments/environment.capacitor.ts"
                 }
               ]
             },
-            "production": {
+            "electron": {
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -91,7 +91,7 @@
               "fileReplacements": [
                 {
                   "replace": "apps/web/environments/environment.ts",
-                  "with": "apps/web/environments/environment.prod.ts"
+                  "with": "apps/web/environments/environment.electron.ts"
                 }
               ]
             }
diff --git a/angular.webpack.js b/angular.webpack.js
index 5aeff7ac..3bccf4c1 100644
--- a/angular.webpack.js
+++ b/angular.webpack.js
@@ -7,17 +7,11 @@ const env = require('./env')
  * Custom angular webpack configuration
  */
 module.exports = (config, options) => {
-  config.target = 'electron-renderer'
-
   if (options.fileReplacements) {
-    for (let fileReplacement of options.fileReplacements) {
-      if (fileReplacement.replace !== 'apps/web/environments/environment.ts') {
-        continue
-      }
-
-      let fileReplacementParts = fileReplacement['with'].split('.')
-      if (fileReplacementParts.length > 1 && ['web'].indexOf(fileReplacementParts[1]) >= 0) {
-        config.target = 'web'
+    for (let replacement of options.fileReplacements) {
+      let parts = replacement.with.split('.')
+      if (parts.includes('electron')) {
+        config.target = 'electron-renderer'
       }
       break
     }
@@ -34,5 +28,6 @@ module.exports = (config, options) => {
    })
   ]
 
+  console.log('[WEBPACK] using target', config.target)
   return config
 }
diff --git a/apps/.gitignore b/apps/.gitignore
new file mode 100644
index 00000000..9cd1f97b
--- /dev/null
+++ b/apps/.gitignore
@@ -0,0 +1,2 @@
+android
+ios
diff --git a/apps/web/app/app-routing.module.ts b/apps/web/app/app-routing.module.ts
deleted file mode 100644
index 1ccbfd65..00000000
--- a/apps/web/app/app-routing.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { NgModule } from '@angular/core'
-import { Routes, RouterModule } from '@angular/router'
-
-const routes: Routes = [
-  {
-    path: '',
-    pathMatch: 'full',
-    redirectTo: 'items'
-  },
-  { path: 'items', loadChildren: () => import('./pages/items').then(m => m.ItemsModule) },
-  { path: 'perks', loadChildren: () => import('./pages/perks').then(m => m.PerksModule) },
-  { path: 'armorsets', loadChildren: () => import('./pages/armorsets').then(m => m.ArmorsetsModule) },
-  { path: 'status-effects', loadChildren: () => import('./pages/status-effects').then(m => m.StatusEffectsModule) },
-  { path: 'abilities', loadChildren: () => import('./pages/abilities').then(m => m.AbilitiesModule) },
-  { path: 'housing', loadChildren: () => import('./pages/housing').then(m => m.HousingModule) },
-  { path: 'crafting', loadChildren: () => import('./pages/crafting').then(m => m.CraftingModule) },
-  { path: 'preferences', loadChildren: () => import('./pages/preferences').then(m => m.PreferencesModule) },
-  { path: 'dungeons', loadChildren: () => import('./pages/dungeons').then(m => m.DungeonsModule) },
-  { path: 'territories', loadChildren: () => import('./pages/territories').then(m => m.TerritoriesModule) },
-  { path: 'progression', loadChildren: () => import('./pages/progression').then(m => m.ProgressionModule) },
-  { path: 'vitals', loadChildren: () => import('./pages/vitals/vitals.module').then(m => m.VitalsModule) },
-  { path: 'about', loadChildren: () => import('./pages/about/about.module').then(m => m.AboutModule) },
-  { path: 'dev', loadChildren: () => import('./pages/dev/dev.module').then(m => m.DevModule) },
-  { path: '**', loadChildren: () => import('./pages/not-found').then((m) => m.NotFoundModule) },
-]
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, {
-
-  })],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}
diff --git a/apps/web/app/app.component.html b/apps/web/app/app.component.html
index 46a17889..d7cae69b 100644
--- a/apps/web/app/app.component.html
+++ b/apps/web/app/app.component.html
@@ -1,75 +1,50 @@
 <nwb-title-bar *ngIf="isElectron"></nwb-title-bar>
 
-<div class="navbar bg-base-100 z-50 rounded-md font-bold">
-  <div class="px-2 flex-none">
-    <a class="text-lg font-bold">
-      <img src="assets/icons/favicon.png" class="w-12" />
-    </a>
+<div class="layout-pad-x layout-pad-t">
+  <div class="navbar bg-base-100 z-50 font-bold rounded-md shadow-xl">
+    <div class="navbar-start w-auto flex-none">
+      <button class="btn btn-square btn-ghost text-primary lg:hidden" [nwbScreenDrawerToggle]="'toggle'">
+        <svg fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+        </svg>
+      </button>
+      <a class="hidden lg:inline-block text-lg font-bold">
+        <img src="assets/icons/favicon.png" class="w-12" />
+      </a>
+    </div>
+    <div class="navbar-center flex-1 items-center justify-center">
+      <a class=" lg:hidden text-lg font-bold">
+        <img src="assets/icons/favicon.png" class="w-12" />
+      </a>
+    </div>
+    <div class="navbar-end w-auto flex-none">
+      <select class="select select-bordered w-20" [(ngModel)]="language">
+        <option *ngFor="let item of langOptions" [value]="item.value">{{ item.label }}</option>
+      </select>
+    </div>
   </div>
-  <div class="flex flex-1 px-2 overflow-x-overlay scrollable">
-    <a #link class="btn btn-ghost" routerLinkActive="text-primary" routerLink="/items"> Items </a>
-    <a #link class="btn btn-ghost" routerLinkActive="text-primary" routerLink="/housing"> Housing </a>
-    <a #link class="btn btn-ghost" routerLinkActive="text-primary" routerLink="/crafting"> Crafting </a>
-
-    <div class="divider divider-horizontal"></div>
-    <a #link class="btn btn-ghost" routerLinkActive="text-primary" routerLink="/perks"> Perks </a>
-    <a #link class="btn btn-ghost" routerLinkActive="text-primary" routerLink="/abilities"> Abilities </a>
-    <a #link class="btn btn-ghost" routerLinkActive="text-primary" routerLink="/status-effects"> Statuseffects </a>
-
-    <div class="divider divider-horizontal"></div>
-
-    <a #link class="btn btn-ghost" routerLinkActive="text-primary" routerLink="/armorsets">Armorsets</a>
-    <a #link class="btn btn-ghost" routerLinkActive="text-primary" routerLink="/progression"> Progression </a>
-
-    <div class="divider divider-horizontal"></div>
+</div>
+<nwb-screen-drawer class="select-none">
+  <nwb-screen-drawer-side class="rounded-md layout-pad-l layout-pad-b" [nwbScreenDrawerToggle]="'close'">
+    <ng-container *ngFor="let group of mainMenu">
+      <ul class="menu menu-compact w-60 bg-base-300 rounded-md flex-none">
+        <li class="menu-title uppercase mt-2" *ngIf="group.category">
+          <span>{{ group.category }}</span>
+        </li>
+        <ng-container *ngFor="let item of group.items">
+          <li *ngIf="item.divider"></li>
+          <li routerLinkActive="bordered">
+            <a #link  [routerLink]="item.path"> {{ item.label }} </a>
+          </li>
+        </ng-container>
 
-    <a #link class="btn btn-ghost" routerLinkActive="text-primary" routerLink="/territories"> Territories </a>
-    <a #link class="btn btn-ghost" routerLinkActive="text-primary" routerLink="/dungeons">Dungeons</a>
-    <a #link class="btn btn-ghost" routerLinkActive="text-primary" routerLink="/vitals"> Vitals </a>
-  </div>
-  <div class="flex flex-none px-2">
-    <select class="select select-bordered w-20" [(ngModel)]="language">
-      <option disabled selected>Pick one</option>
-      <option value="de-de">DE</option>
-      <option value="en-us">EN</option>
-      <option value="es-es">ES</option>
-      <option value="fr-fr">FR</option>
-      <option value="it-it">IT</option>
-      <option value="pl-pl">PL</option>
-      <option value="pt-br">BR</option>
-    </select>
+      </ul>
+    </ng-container>
 
-    <div class="dropdown dropdown-end">
-      <label tabindex="0" class="btn btn-ghost btn-circle">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
-        </svg>
-      </label>
-      <ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-md w-52">
-        <li>
-          <a routerLinkActive="text-primary" routerLink="/preferences"> Preferences </a>
-        </li>
-        <li>
-          <a routerLinkActive="text-primary" routerLink="/about"> About </a>
-        </li>
 
-        <li class="menu-title">
-          <span>Tools on the web</span>
-        </li>
 
-        <li *ngFor="let it of links">
-          <a target="_blank" [href]="it.url">
-            <svg viewBox="0 0 448 512" class="w-4 h-4">
-              <path
-                fill="currentColor"
-                d="M288 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h50.7L169.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L384 141.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H288zM80 64C35.8 64 0 99.8 0 144v256c0 44.2 35.8 80 80 80h256c44.2 0 80-35.8 80-80v-80c0-17.7-14.3-32-32-32s-32 14.3-32 32v80c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V144c0-8.8 7.2-16 16-16h80c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"
-              />
-            </svg>
-            <span class="whitespace-nowrap">{{ it.label }}</span>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-<router-outlet></router-outlet>
+  </nwb-screen-drawer-side>
+  <nwb-screen-drawer-content class="layout-row layout-gap layout-pad-x layout-pad-b">
+    <router-outlet></router-outlet>
+  </nwb-screen-drawer-content>
+</nwb-screen-drawer>
diff --git a/apps/web/app/app.component.scss b/apps/web/app/app.component.scss
index 86d1b45e..fb417be7 100644
--- a/apps/web/app/app.component.scss
+++ b/apps/web/app/app.component.scss
@@ -1,6 +1,4 @@
 :host {
-  gap: 1rem;
-  padding: 1rem;
 
   .navbar {
     -webkit-app-region: drag;
diff --git a/apps/web/app/app.component.ts b/apps/web/app/app.component.ts
index 0706c492..68f99439 100644
--- a/apps/web/app/app.component.ts
+++ b/apps/web/app/app.component.ts
@@ -1,25 +1,32 @@
-import { Component, ElementRef, QueryList, ViewChildren } from '@angular/core'
+import { Component, HostBinding } from '@angular/core'
 import { sortBy } from 'lodash'
+import { APP_CONFIG } from '../environments/environment'
 
 import { ElectronService } from './electron'
 import { TranslateService } from './i18n'
 
+import { LANG_OPTIONS, MAIN_MENU } from './menu'
 import { AppPreferencesService } from './preferences'
-import { Hotkeys } from './utils'
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   host: {
-    class: 'layout-frame layout-column',
+    class: 'layout-frame layout-col layout-gap',
   },
 })
 export class AppComponent {
+  @HostBinding('class.is-electron')
   public get isElectron() {
     return this.electron.isElectron
   }
 
+  @HostBinding('class.is-web')
+  public get isWeb() {
+    return APP_CONFIG.environment === 'WEB' || APP_CONFIG.environment === 'DEV'
+  }
+
   public get language() {
     return this.preferences.language.get()
   }
@@ -27,67 +34,14 @@ export class AppComponent {
     this.preferences.language.set(value)
   }
 
-  protected links = sortBy(
-    [
-      {
-        url: 'https://nwdb.info/',
-        label: 'nwdb.info',
-      },
-      {
-        url: 'https://www.nw-tools.info/',
-        label: 'www.nw-tools.info',
-      },
-      {
-        url: 'https://gaming.tools/newworld/',
-        label: 'gaming.tools',
-      },
-      {
-        url: 'https://new-world.exchange/',
-        label: 'new-world.exchange',
-      },
-      {
-        url: 'https://nwmarketprices.com/',
-        label: 'nwmarketprices.com',
-      },
-      {
-        url: 'https://newworldfans.com/',
-        label: 'newworldfans.com',
-      },
-      {
-        url: 'https://www.newworld-map.com/',
-        label: 'newworld-map.com',
-      },
-      {
-        url: 'https://mapgenie.io/new-world',
-        label: 'mapgenie.io',
-      },
-      {
-        url: 'https://raidplan.io/newworld',
-        label: 'raidplan.io'
-      }
-    ],
-    (it) => it.label
-  )
-
-  @ViewChildren('link')
-  public tabs: QueryList<ElementRef<HTMLAnchorElement>>
+  protected mainMenu = MAIN_MENU
+  protected langOptions = LANG_OPTIONS
 
   constructor(
     private preferences: AppPreferencesService,
     private electron: ElectronService,
-    private hotkeys: Hotkeys,
     translate: TranslateService
   ) {
     preferences.language.observe().subscribe((locale) => translate.use(locale))
-
-    ;[1, 2, 3, 4, 5, 6, 7, 8, 9, 0].forEach((i) => {
-      this.hotkeys
-        .addShortcut({
-          keys: `control.${i}`,
-        })
-        .subscribe(() => {
-          this.tabs.get((i || 10) - 1)?.nativeElement?.click()
-        })
-    })
   }
 }
diff --git a/apps/web/app/app.module.ts b/apps/web/app/app.module.ts
index 559db112..57b81e33 100644
--- a/apps/web/app/app.module.ts
+++ b/apps/web/app/app.module.ts
@@ -2,21 +2,24 @@ import { HttpClientModule } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { BrowserModule } from '@angular/platform-browser'
+import { RouterModule } from '@angular/router'
 
-import { AppRoutingModule } from './app-routing.module'
+import { ROUTES } from './app.routes'
 
 import { AppComponent } from './app.component'
 import { TranslateModule } from './i18n'
 import { NwDataService } from './nw'
 import { TitleBarComponent } from './title-bar.component'
+import { ScreenModule } from './ui/screen'
 
 @NgModule({
   declarations: [AppComponent, TitleBarComponent],
   imports: [
+    RouterModule.forRoot(ROUTES),
     BrowserModule,
     FormsModule,
     HttpClientModule,
-    AppRoutingModule,
+    ScreenModule,
     TranslateModule.forRoot({
       loader: NwDataService,
     }),
diff --git a/apps/web/app/app.routes.ts b/apps/web/app/app.routes.ts
new file mode 100644
index 00000000..dceea42b
--- /dev/null
+++ b/apps/web/app/app.routes.ts
@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core'
+import { Routes, RouterModule } from '@angular/router'
+
+export const ROUTES: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'items',
+  },
+  { path: 'abilities', loadChildren: () => import('./pages/database/abilities').then((m) => m.AbilitiesModule) },
+  { path: 'crafting', loadChildren: () => import('./pages/database/crafting').then((m) => m.CraftingModule) },
+  { path: 'housing', loadChildren: () => import('./pages/database/housing').then((m) => m.HousingModule) },
+  { path: 'items', loadChildren: () => import('./pages/database/items').then((m) => m.ItemsModule) },
+  { path: 'perks', loadChildren: () => import('./pages/database/perks').then((m) => m.PerksModule) },
+  { path: 'poi', loadChildren: () => import('./pages/database/poi').then((m) => m.PoiModule) },
+  {
+    path: 'status-effects',
+    loadChildren: () => import('./pages/database/status-effects').then((m) => m.StatusEffectsModule),
+  },
+  { path: 'vitals', loadChildren: () => import('./pages/database/vitals').then((m) => m.VitalsModule) },
+
+  { path: 'armorsets', loadChildren: () => import('./pages/tools/armorsets').then((m) => m.ArmorsetsModule) },
+  { path: 'dungeons', loadChildren: () => import('./pages/tools/dungeons').then((m) => m.DungeonsModule) },
+  { path: 'gearbuilder', loadChildren: () => import('./pages/tools/gearbuilder').then((m) => m.GearbuilderModule) },
+  { path: 'info-cards', loadChildren: () => import('./pages/tools/info-cards').then((m) => m.InfoCardsModule) },
+  { path: 'level-xp', loadChildren: () => import('./pages/tools/level-xp').then((m) => m.LevelXpModule) },
+  { path: 'territories', loadChildren: () => import('./pages/tools/territories').then((m) => m.TerritoriesModule) },
+  { path: 'leveling', loadChildren: () => import('./pages/tools/leveling').then((m) => m.LevelingModule) },
+  { path: 'umbral-shards', loadChildren: () => import('./pages/tools/umbral-shards').then((m) => m.UmbralShardsModule) },
+
+  { path: 'dev', loadChildren: () => import('./pages/dev/dev.module').then((m) => m.DevModule) },
+  { path: 'links', loadChildren: () => import('./pages/misc/links').then((m) => m.LinksModule) },
+  { path: 'about', loadChildren: () => import('./pages/misc/about').then((m) => m.AboutModule) },
+  { path: 'preferences', loadChildren: () => import('./pages/misc/preferences').then((m) => m.PreferencesModule) },
+
+  { path: '**', loadChildren: () => import('./pages/misc/not-found').then((m) => m.NotFoundModule) },
+]
diff --git a/apps/web/app/i18n/translate.module.ts b/apps/web/app/i18n/translate.module.ts
index 8aba94c5..545168c5 100644
--- a/apps/web/app/i18n/translate.module.ts
+++ b/apps/web/app/i18n/translate.module.ts
@@ -1,4 +1,4 @@
-import { NgModule, ModuleWithProviders, Type } from '@angular/core'
+import { NgModule, ModuleWithProviders, Type, LOCALE_ID } from '@angular/core'
 import { TranslateLoader } from './translate-loader'
 
 @NgModule({})
@@ -6,12 +6,14 @@ export class TranslateModule {
 
   public static forRoot(options?: {
     loader?: Type<TranslateLoader>
+    locale?: string
   }): ModuleWithProviders<TranslateModule> {
     return {
       ngModule: TranslateModule,
       providers: [
+        options?.locale ? { provide: LOCALE_ID, useValue: options.locale } : null,
         options?.loader ? TranslateLoader.provideClass(options.loader) : TranslateLoader,
-      ]
+      ].filter((it) => !!it)
     }
   }
 }
diff --git a/apps/web/app/i18n/translate.service.ts b/apps/web/app/i18n/translate.service.ts
index 7e1318b1..b9ae8cb1 100644
--- a/apps/web/app/i18n/translate.service.ts
+++ b/apps/web/app/i18n/translate.service.ts
@@ -25,7 +25,7 @@ export class TranslateService implements OnDestroy {
     //
   }
 
-  public observe(key: string | Observable<string>, locale?: string | Observable<string>) {
+  public observe(key: string | string[] | Observable<string | string[]>, locale?: string | Observable<string>) {
     if (!locale) {
       locale = this.locale.value$
     }
@@ -38,7 +38,14 @@ export class TranslateService implements OnDestroy {
     .pipe(distinctUntilChanged())
   }
 
-  public get(key: string, locale: string = this.locale.value) {
+  public get(key: string | string[], locale: string = this.locale.value) {
+    if (Array.isArray(key)) {
+      return key.map((it) => this.lookup(it)).join(' ')
+    }
+    return this.lookup(key)
+  }
+
+  public lookup(key: string, locale: string = this.locale.value) {
     if (!key) {
       return ''
     }
diff --git a/apps/web/app/menu.ts b/apps/web/app/menu.ts
new file mode 100644
index 00000000..43b94c59
--- /dev/null
+++ b/apps/web/app/menu.ts
@@ -0,0 +1,52 @@
+export const MAIN_MENU = [
+  {
+    category: 'Database',
+    items: [
+      { label: 'Items', path: '/items' },
+      { label: 'Housing', path: '/housing' },
+      { label: 'Crafting', path: '/crafting' },
+
+      { label: 'Perks', path: '/perks', divider: true },
+      { label: 'Abilities', path: '/abilities' },
+      { label: 'Statuseffects', path: '/status-effects' },
+
+      { label: 'Points Of Interest', path: '/poi', divider: true },
+      { label: 'Vitals', path: '/vitals' },
+    ]
+  },
+  {
+    category: 'Tools & Infos',
+    items: [
+      { label: 'Territories', path: '/territories' },
+      { label: 'Expeditions', path: '/dungeons' },
+      { label: 'Armorsets', path: '/armorsets' },
+      { label: 'Gear builder', path: '/gearbuilder' },
+      { label: 'Umbral Shards', path: '/umbral-shards' },
+
+      { label: 'Leveling and Skills', path: '/leveling' },
+
+      { label: 'Trophies', path: '/info-cards/trophies', divider: true },
+      { label: 'Runes', path: '/info-cards/runes' },
+      { label: 'Vitals', path: '/info-cards/vitals' },
+      { label: 'Gems', path: '/info-cards/gems' },
+    ]
+  },
+  {
+    category: null,
+    items: [
+      { label: 'Links', path: '/links' },
+      { label: 'Preferences', path: '/preferences' },
+      { label: 'About', path: '/about' },
+    ]
+  }
+]
+
+export const LANG_OPTIONS = [
+  { value: 'de-de', label: 'DE' },
+  { value: 'en-us', label: 'EN' },
+  { value: 'es-es', label: 'ES' },
+  { value: 'fr-fr', label: 'FR' },
+  { value: 'it-it', label: 'IT' },
+  { value: 'pl-pl', label: 'PL' },
+  { value: 'pt-br', label: 'BR' },
+]
diff --git a/apps/web/app/nw/nw-db.service.ts b/apps/web/app/nw/nw-db.service.ts
index a076b6cc..df5cd427 100644
--- a/apps/web/app/nw/nw-db.service.ts
+++ b/apps/web/app/nw/nw-db.service.ts
@@ -92,6 +92,10 @@ export class NwDbService {
   public damageTableMap = index(() => this.damageTables, 'DamageID')
   public damageTable = lookup(() => this.damageTableMap)
 
+  public armors = list(() => [this.data.itemdefinitionsArmor()])
+  public armorsMap = index(() => this.armors, 'WeaponID')
+  public armor = lookup(() => this.armorsMap)
+
   public weapons = list(() => [this.data.itemdefinitionsWeapons()])
   public weaponsMap = index(() => this.weapons, 'WeaponID')
   public weapon = lookup(() => this.weaponsMap)
@@ -229,6 +233,8 @@ export class NwDbService {
   public lootLimits = list(() => [this.data.lootlimits()])
   public lootLimitsMap = index(() => this.lootLimits, 'LootLimitID')
 
+  public xpAmounts = this.data.xpamountsbylevel().pipe(shareReplay(1))
+
   public constructor(public readonly data: NwDataService) {
     //
   }
diff --git a/apps/web/app/nw/nw-expression.service.ts b/apps/web/app/nw/nw-expression.service.ts
index 68f86b8a..2cad754e 100644
--- a/apps/web/app/nw/nw-expression.service.ts
+++ b/apps/web/app/nw/nw-expression.service.ts
@@ -1,11 +1,11 @@
 import { Injectable } from '@angular/core'
-import { catchError, combineLatest, map, Observable, of, startWith, throwError } from 'rxjs'
+import { catchError, combineLatest, map, Observable, of, startWith, tap, throwError } from 'rxjs'
 import { NwDbService } from './nw-db.service'
-import { parseNwExpression } from './utils'
+import { getPerkMultiplier, parseNwExpression } from './utils'
 
 export interface NwExpressionContext {
   text: string
-  itemId: string
+  itemId?: string
   charLevel: number
   gearScore: number
   ConsumablePotency?: number
@@ -139,7 +139,7 @@ export class NwExpressionService {
         return this.db.perksMap.pipe(
           map((it) => {
             if (it.has(context.itemId)) {
-              return it.get(context.itemId).ScalingPerGearScore * Math.max(0, context.gearScore - 100) + 1
+              return getPerkMultiplier(it.get(context.itemId), context.gearScore)
             }
             throw new Error(`perkMultiplier not resolved (for token "${token}" and id "${context.itemId}" in text "${context.text}")`)
           })
diff --git a/apps/web/app/nw/nw-icon.component.ts b/apps/web/app/nw/nw-icon.component.ts
index 8dc538de..b062ec26 100644
--- a/apps/web/app/nw/nw-icon.component.ts
+++ b/apps/web/app/nw/nw-icon.component.ts
@@ -32,13 +32,20 @@ export class NwIconComponent {
     this.cdRef.markForCheck()
   }
 
+  @Input()
+  public set nwRarity(value: number) {
+    this.rarityOverride = value
+  }
+
   protected src: string
   protected isLoaded = false
   private rarity: number
+  private rarityOverride: number
 
   @HostBinding('class')
   protected get bgRarity() {
-    return this.rarity ? `bg-rarity-${this.rarity}` : null
+    const rarity = this.rarityOverride || this.rarity
+    return rarity ? `bg-rarity-${rarity}` : null
   }
 
   public constructor(private cdRef: ChangeDetectorRef, private elRef: ElementRef<HTMLImageElement>) {
diff --git a/apps/web/app/nw/nw-text.pipe.ts b/apps/web/app/nw/nw-text.pipe.ts
new file mode 100644
index 00000000..d503b3c4
--- /dev/null
+++ b/apps/web/app/nw/nw-text.pipe.ts
@@ -0,0 +1,55 @@
+import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core'
+import { isEqual } from 'lodash'
+import { Subject, switchMap, takeUntil } from 'rxjs'
+import { TranslateService } from '~/i18n'
+import { NwExpressionContext, NwExpressionService } from './nw-expression.service'
+
+export type NwTextPipeOptions = Partial<NwExpressionContext>
+
+@Pipe({
+  name: 'nwText',
+  pure: false,
+})
+export class NwTextPipe implements PipeTransform, OnDestroy {
+  private dispose$ = new Subject<void>()
+  private key: string | string[]
+  private options: NwTextPipeOptions = null
+  private value: string
+
+  public constructor(
+    private i18n: TranslateService,
+    private expr: NwExpressionService,
+    private cdRef: ChangeDetectorRef
+  ) {}
+
+  public transform(key: string | string[], options: NwTextPipeOptions = null) {
+    if (isEqual(this.key, key) && isEqual(this.options, options)) {
+      return this.value
+    }
+    this.dispose$.next()
+    this.key = key
+    this.options = options
+    this.i18n
+      .observe(key)
+      .pipe(
+        switchMap((value) =>
+          this.expr.solve({
+            charLevel: 60,
+            gearScore: 600,
+            ...(options || {}),
+            text: value,
+          })
+        )
+      )
+      .pipe(takeUntil(this.dispose$))
+      .subscribe((value) => {
+        this.value = value
+        this.cdRef.markForCheck()
+      })
+    return this.value
+  }
+
+  public ngOnDestroy(): void {
+    this.dispose$.next()
+  }
+}
diff --git a/apps/web/app/nw/nw.module.ts b/apps/web/app/nw/nw.module.ts
index 26a1d1db..ae63f6e7 100644
--- a/apps/web/app/nw/nw.module.ts
+++ b/apps/web/app/nw/nw.module.ts
@@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms'
 import { NwIconComponent, NwImageComponent } from './nw-icon.component'
 import { NwInfoLinkDirective } from './nw-info-link.directive'
 import { NwTextDirective } from './nw-text.directive'
+import { NwTextPipe } from './nw-text.pipe'
 
 @NgModule({
   imports: [
@@ -15,12 +16,14 @@ import { NwTextDirective } from './nw-text.directive'
     NwIconComponent,
     NwImageComponent,
     NwInfoLinkDirective,
+    NwTextPipe
   ],
   exports: [
     NwTextDirective,
     NwIconComponent,
     NwImageComponent,
     NwInfoLinkDirective,
+    NwTextPipe,
   ],
 })
 export class NwModule {
diff --git a/apps/web/app/nw/utils/constants.ts b/apps/web/app/nw/utils/constants.ts
new file mode 100644
index 00000000..344625c0
--- /dev/null
+++ b/apps/web/app/nw/utils/constants.ts
@@ -0,0 +1,6 @@
+export const NW_MIN_GEAR_SCORE = 100
+export const NW_MAX_GEAR_SCORE = 625
+export const NW_MAX_CHARACTER_LEVEL = 60
+export const NW_MAX_TRADESKILL_LEVEL = 200
+export const NW_MAX_WEAPON_LEVEL = 20
+export const NW_MIN_ATTRIBUTES = 5
diff --git a/apps/web/app/nw/utils/crafting.ts b/apps/web/app/nw/utils/crafting.ts
index 5eed4c7d..969144e2 100644
--- a/apps/web/app/nw/utils/crafting.ts
+++ b/apps/web/app/nw/utils/crafting.ts
@@ -1,4 +1,5 @@
 import { Crafting, GameEvent, Housingitems, ItemDefinitionMaster } from '@nw-data/types'
+import { NW_MAX_TRADESKILL_LEVEL } from './constants'
 
 export type CraftingIngredients = Pick<
   Crafting,
@@ -107,7 +108,7 @@ export function calculateBonusItemChance({
     return (diff < 0 ? decrements : increments)[Math.abs(diff) - 1] ?? 0
   })
   const baseChance = recipe.BonusItemChance
-  const skillChance = (skill ?? 200) / 1000
+  const skillChance = (skill ?? NW_MAX_TRADESKILL_LEVEL) / 1000
   const ingrChance = ingrChances.reduce((a, b) => a + b, 0)
 
   let result = baseChance + skillChance + ingrChance
diff --git a/apps/web/app/nw/utils/equip-slot.ts b/apps/web/app/nw/utils/equip-slot.ts
new file mode 100644
index 00000000..2ec8d8ad
--- /dev/null
+++ b/apps/web/app/nw/utils/equip-slot.ts
@@ -0,0 +1,99 @@
+export type EquipSlotId = 'head' | 'chest' | 'hands' | 'legs' | 'feet' | 'weapon1' | 'weapon2' | 'weapon3' | 'amulet' | 'ring' | 'earring'
+export interface EquipSlot {
+  id: EquipSlotId
+  icon: string
+  name: string
+  itemType: string
+}
+
+export const EQUIP_SLOTS: Array<EquipSlot> = [
+  {
+    id: 'head',
+    icon: 'assets/icons/slots/lightheada.png',
+    name: 'ui_itemtypedescription_head_slot',
+    itemType: 'EquippableHead',
+  },
+  {
+    id: 'chest',
+    icon: 'assets/icons/slots/lightchesta.png',
+    name: 'ui_itemtypedescription_chest_slot',
+    itemType: 'EquippableChest',
+  },
+  {
+    id: 'hands',
+    icon: 'assets/icons/slots/lighthandsa.png',
+    name: 'ui_itemtypedescription_hands_slot',
+    itemType: 'EquippableHands',
+  },
+  {
+    id: 'legs',
+    icon: 'assets/icons/slots/lightlegsa.png',
+    name: 'ui_itemtypedescription_legs_slot',
+    itemType: 'EquippableLegs',
+  },
+  {
+    id: 'feet',
+    icon: 'assets/icons/slots/lightfeeta.png',
+    name: 'ui_itemtypedescription_feet_slot',
+    itemType: 'EquippableFeet',
+  },
+  {
+    id: 'weapon1',
+    icon: 'assets/icons/slots/weapon.png',
+    name: 'ui_weapon1',
+    itemType: 'Weapon',
+  },
+  {
+    id: 'weapon2',
+    icon: 'assets/icons/slots/weapon.png',
+    name: 'ui_weapon2',
+    itemType: 'Weapon',
+  },
+  {
+    id: 'weapon3',
+    icon: 'assets/icons/slots/weapon.png',
+    name: 'ui_weapon3',
+    itemType: 'Shield',
+  },
+  {
+    id: 'amulet',
+    icon: 'assets/icons/slots/trinketp.png',
+    name: 'ui_amulet_slot_tooltip',
+    itemType: 'EquippableAmulet',
+  },
+  {
+    id: 'ring',
+    icon: 'assets/icons/slots/trinketa.png',
+    name: 'ui_ring_slot_tooltip',
+    itemType: 'EquippableRing',
+  },
+  {
+    id: 'earring',
+    icon: 'assets/icons/slots/trinkete.png',
+    name: 'ui_unlock_token_slot',
+    itemType: 'EquippableToken',
+  },
+]
+
+const GS_WEIGHTS: Record<EquipSlotId, number> = {
+  head: 42,
+  chest: 73,
+  hands: 31,
+  legs: 42,
+  feet: 21,
+  weapon1: 135,
+  weapon2: 135,
+  weapon3: 0,
+  amulet: 40,
+  ring: 40,
+  earring: 40,
+}
+
+export function totalGearScore(equip: Array<{ id: EquipSlotId, gearScore: number }>) {
+  const total = Object.values(GS_WEIGHTS).reduce((a, b) => a + b, 0)
+  let result = 0
+  for (const slot of equip) {
+    result += slot.gearScore * (GS_WEIGHTS[slot.id] || 0) / total
+  }
+  return result
+}
diff --git a/apps/web/app/nw/utils/index.ts b/apps/web/app/nw/utils/index.ts
index 2c6f04ac..dafe490d 100644
--- a/apps/web/app/nw/utils/index.ts
+++ b/apps/web/app/nw/utils/index.ts
@@ -9,3 +9,4 @@ export * from './loottables'
 export * from './expressions'
 export * from './lootgraph'
 export * from './territories'
+export * from './equip-slot'
diff --git a/apps/web/app/nw/utils/item.ts b/apps/web/app/nw/utils/item.ts
index 3a2145b4..e374a02f 100644
--- a/apps/web/app/nw/utils/item.ts
+++ b/apps/web/app/nw/utils/item.ts
@@ -1,4 +1,5 @@
-import { Crafting, Housingitems, ItemDefinitionMaster, Perkbuckets, Perks } from '@nw-data/types'
+import { Crafting, Housingitems, ItemDefinitionMaster, ItemdefinitionsArmor, ItemdefinitionsWeapons, Perkbuckets, Perks } from '@nw-data/types'
+import { NW_MAX_GEAR_SCORE, NW_MIN_GEAR_SCORE } from './constants'
 
 export function isMasterItem(item: ItemDefinitionMaster | Housingitems): item is ItemDefinitionMaster {
   return item && 'ItemID' in item
@@ -16,27 +17,24 @@ export function isItemWeapon(item: ItemDefinitionMaster) {
   return item?.ItemType === 'Weapon'
 }
 
-export function getItemRarity(item: ItemDefinitionMaster | Housingitems) {
+export function hasItemIngredientCategory(item: ItemDefinitionMaster, categoryId: string) {
+  return item.IngredientCategories?.some((it) => it.toLocaleLowerCase() === String(categoryId).toLocaleLowerCase())
+}
+
+export function getItemRarity(item: ItemDefinitionMaster | Housingitems, itemPerkIds?: string[]) {
+  if (!item) {
+    return 0
+  }
   if (item.ForceRarity) {
     return item.ForceRarity
   }
+
   let rarity = 0
   if (isMasterItem(item)) {
-    if (item.Perk1 && !item.Perk1?.startsWith('PerkID_Stat_')) {
-      rarity += 1
-    }
-    if (item.Perk2 && !item.Perk2?.startsWith('PerkID_Stat_')) {
-      rarity += 1
-    }
-    if (item.Perk3 && !item.Perk3?.startsWith('PerkID_Stat_')) {
-      rarity += 1
-    }
-    if (item.Perk4 && !item.Perk4?.startsWith('PerkID_Stat_')) {
-      rarity += 1
-    }
-    if (item.Perk5 && !item.Perk5?.startsWith('PerkID_Stat_')) {
-      rarity += 1
+    if (!itemPerkIds) {
+      itemPerkIds = [item.Perk1, item.Perk2, item.Perk3, item.Perk4, item.Perk5]
     }
+    rarity += itemPerkIds.filter((it) => it && !it?.startsWith('PerkID_Stat_')).length
   }
   return Math.min(rarity, 4)
 }
@@ -46,6 +44,10 @@ export function getItemRarityName(item: ItemDefinitionMaster | Housingitems | nu
   return `RarityLevel${item}_DisplayName`
 }
 
+export function getItemPerkKeys(item: ItemDefinitionMaster) {
+  return ['Perk1', 'Perk2', 'Perk3', 'Perk4', 'Perk5'].filter((it) => item && it in item)
+}
+
 export function getItemPerkIds(item: ItemDefinitionMaster) {
   return item && [item.Perk1, item.Perk2, item.Perk3, item.Perk4, item.Perk5].filter((it) => !!it)
 }
@@ -54,6 +56,10 @@ export function getItemPerks(item: ItemDefinitionMaster, perks: Map<string, Perk
   return item && getItemPerkIds(item).map((it) => perks.get(it))
 }
 
+export function getItemPerkBucketKeys(item: ItemDefinitionMaster) {
+  return ['PerkBucket1', 'PerkBucket2', 'PerkBucket3', 'PerkBucket4', 'PerkBucket5'].filter((it) => item && it in item)
+}
+
 export function getItemPerkBucketIds(item: ItemDefinitionMaster) {
   return [item.PerkBucket1, item.PerkBucket2, item.PerkBucket3, item.PerkBucket4, item.PerkBucket5].filter((it) => !!it)
 }
@@ -62,6 +68,38 @@ export function getItemPerkBucket(item: ItemDefinitionMaster, buckets: Map<strin
   return item && getItemPerkBucketIds(item).map((it) => buckets.get(it))
 }
 
+export function getItemMaxGearScore(item: ItemDefinitionMaster) {
+  return item?.GearScoreOverride || item?.MaxGearScore || NW_MAX_GEAR_SCORE
+}
+export function getItemMinGearScore(item: ItemDefinitionMaster) {
+  return item?.GearScoreOverride || item?.MinGearScore || NW_MIN_GEAR_SCORE
+}
+export function getItemGearScoreLabel(item: ItemDefinitionMaster) {
+  if (!item) {
+    return ''
+  }
+  if (item.GearScoreOverride) {
+    return String(item.GearScoreOverride)
+  }
+  if (item.MinGearScore && item.MaxGearScore) {
+    return `${item.MinGearScore}-${item.MaxGearScore}`
+  }
+  return String(item.MaxGearScore || item.MinGearScore || '')
+}
+export function getItemType(item: ItemDefinitionMaster | Housingitems) {
+  return item?.ItemType
+}
+
+export function getItemTypeName(item: ItemDefinitionMaster | Housingitems) {
+  if (isMasterItem(item)) {
+    return item.ItemTypeDisplayName
+  }
+  if (isHousingItem(item)) {
+    return item.ItemType
+  }
+  return null
+}
+
 export function getItemId(item: ItemDefinitionMaster | Housingitems) {
   if (isMasterItem(item)) {
     return item.ItemID
@@ -126,3 +164,28 @@ export function getItemIconPath(item: ItemDefinitionMaster | Housingitems, femal
   }
   return item.IconPath
 }
+
+export function getArmorRatingElemental(item: ItemdefinitionsArmor | ItemdefinitionsWeapons, gearScore: number) {
+  if (!item?.ElementalArmorSetScaleFactor) {
+    return 0
+  }
+  return Math.pow(gearScore, 1.2) * item.ElementalArmorSetScaleFactor * item.ArmorRatingScaleFactor
+}
+
+export function getArmorRatingPhysical(item: ItemdefinitionsArmor | ItemdefinitionsWeapons, gearScore: number) {
+  if (!item?.PhysicalArmorSetScaleFactor) {
+    return 0
+  }
+  return Math.pow(gearScore, 1.2) * item.PhysicalArmorSetScaleFactor * item.ArmorRatingScaleFactor
+}
+
+export function getWeightLabel(weight: number) {
+  let label = 'light'
+  if (weight >= 13) {
+    label = 'medium'
+  }
+  if (weight >= 23) {
+    label = 'heavy'
+  }
+  return label
+}
diff --git a/apps/web/app/nw/utils/perks.ts b/apps/web/app/nw/utils/perks.ts
index ed62fdb6..9d2d9683 100644
--- a/apps/web/app/nw/utils/perks.ts
+++ b/apps/web/app/nw/utils/perks.ts
@@ -1,24 +1,102 @@
-import { Affixstats, Perks } from "@nw-data/types"
+import { Ability, Affixstats, Perks } from '@nw-data/types'
 
-export function hasPerkAffixStats(perk: Perks): boolean {
-  return !!perk && !!perk.Affix && perk.PerkType === 'Inherent'
+export function isPerkInherent(perk: Perks) {
+  return perk?.PerkType === 'Inherent'
 }
 
-export function getPerkAffixStat(perk: Perks, affix: Affixstats, gearScore: number) {
-  return getAffixStats(affix, perk.ScalingPerGearScore * gearScore)
+export function isPerkGem(perk: Perks) {
+  return perk?.PerkType === 'Gem'
 }
 
-export function getAffixStats(affix: Affixstats, scale: number) {
-  return Object.keys(affix)
-    .filter((it) => it.startsWith('MOD'))
-    .map((key) => {
+export function isPerkGenerated(perk: Perks) {
+  return perk?.PerkType === 'Generated'
+}
+
+export function hasPerkInherentAffix(perk: Perks): boolean {
+  return isPerkInherent(perk) && !!perk?.Affix
+}
+
+export function getPerksInherentMODs(perk: Pick<Perks, 'ScalingPerGearScore'>, affix: Affixstats, gearScore: number) {
+  return getAffixMODs(affix, getPerkMultiplier(perk, gearScore))
+}
+
+export function getPerksGemABSs(perk: Pick<Perks, 'ScalingPerGearScore'>, affix: Affixstats, gearScore: number) {
+  return getAffixMODs(affix, getPerkMultiplier(perk, gearScore))
+}
+
+export function getPerkMultiplier(perk: Pick<Perks, 'ScalingPerGearScore'> , gearScore: number) {
+  // TODO: solve precision
+  const scale = Number(perk.ScalingPerGearScore.toFixed(8))
+  return Math.max(0, gearScore - 100) * scale + 1
+}
+
+export function getAffixMODs(affix: Partial<Affixstats>, scale: number) {
+  return getAffixProperties(affix)
+    .filter((it) => it.key.startsWith('MOD'))
+    .map(({ key, value }) => {
       const label = key.replace('MOD', '').toLowerCase()
-      const value = String(affix[key])
+      const valNum = Number(value)
       return {
         key: key,
         label: `ui_${label}`,
-        value: value.includes('-') ? value : Math.round(Number(value) * Math.floor(scale))
+        value: Number.isFinite(valNum) ? Math.floor(valNum * scale) : value,
       }
     })
-    .filter((it) => it.value)
+}
+
+export function getAffixABSs(affix: Partial<Affixstats>, scale: number) {
+  return getAffixProperties(affix)
+    .filter((it) => it.key.startsWith('ABS'))
+    .map(({ key, value }) => {
+      const name = key.replace('ABS', '').toLowerCase()
+      let label: string
+      if (name.startsWith('vitalscategory ')) {
+        label = `VC_${name.replace('vitalscategory ', '')}`
+      } else {
+        label = `${name}_DamageName`
+      }
+      const valNum = Number(value)
+      return {
+        key: key,
+        label: [label, 'ui_resistance'],
+        value: Number.isFinite(valNum) ? valNum * scale : value,
+      }
+    })
+}
+
+export function getAffixProperties(affix: Partial<Affixstats>): Array<{ key: string; value: number | string }> {
+  return Object.entries((affix || {}) as Affixstats)
+    .filter(([key]) => key !== 'StatusID')
+    .map(([key, value]) => {
+      if (typeof value === 'string') {
+        if (value.includes('=')) {
+          const [a, b] = value.split('=')
+          key = `${key} ${a}`
+          value = Number(b)
+        }
+      }
+      return {
+        key,
+        value,
+      }
+    })
+    .filter((it) => !!it.value)
+}
+
+export function stripAffixProperties(item: Affixstats): Partial<Affixstats> {
+  return Object.entries(item || {})
+    .filter(([key, value]) => key !== 'StatusID' && key !== '$source' && !!value)
+    .reduce((it, [key, value]) => {
+      it[key] = value
+      return it
+    }, {})
+}
+
+export function stripAbilityProperties(item: Ability): Partial<Ability> {
+  return Object.entries(item || {})
+    .filter(([key, value]) => key !== 'AbilityID' && key !== '$source' && !!value)
+    .reduce((it, [key, value]) => {
+      it[key] = value
+      return it
+    }, {})
 }
diff --git a/apps/web/app/nw/utils/tier-to-roman.ts b/apps/web/app/nw/utils/tier-to-roman.ts
index 046804bb..66a209d9 100644
--- a/apps/web/app/nw/utils/tier-to-roman.ts
+++ b/apps/web/app/nw/utils/tier-to-roman.ts
@@ -1,11 +1,17 @@
-const ROMAN = {
+const ROMAN_UNICODE = {
   1: 'Ⅰ',
   2: 'Ⅱ',
   3: 'Ⅲ',
   4: 'Ⅳ',
   5: 'Ⅴ',
 }
-
-export function getItemTierAsRoman(tier: number) {
-  return ROMAN[tier] || ''
+const ROMAN = {
+  1: 'I',
+  2: 'II',
+  3: 'III',
+  4: 'IV',
+  5: 'V',
+}
+export function getItemTierAsRoman(tier: number, unicode = false) {
+  return (unicode ? ROMAN_UNICODE : ROMAN)[tier] || ''
 }
diff --git a/apps/web/app/pages/abilities/abilities-table.component.ts b/apps/web/app/pages/abilities/abilities-table.component.ts
deleted file mode 100644
index 81c3f129..00000000
--- a/apps/web/app/pages/abilities/abilities-table.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { QuicksearchService } from '~/ui/quicksearch';
-
-@Component({
-  selector: 'nwb-abilities-table',
-  templateUrl: './abilities-table.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'layout-row gap-4',
-  },
-})
-export class AbilitiesTableComponent implements OnInit {
-
-  constructor(public search: QuicksearchService) { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/apps/web/app/pages/abilities/abilities.component.html b/apps/web/app/pages/abilities/abilities.component.html
deleted file mode 100644
index a590b8e1..00000000
--- a/apps/web/app/pages/abilities/abilities.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="w-36 xl:w-40 flex flex-col gap-4">
-  <nwb-quicksearch-input #search></nwb-quicksearch-input>
-  <nwb-data-table-categories
-    categoryChildRoute
-    [childRouteIndex]="'table'"
-    class="bg-base-100 rounded-md overflow-y-auto"
-  ></nwb-data-table-categories>
-</div>
-<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/abilities/abilities.component.ts b/apps/web/app/pages/abilities/abilities.component.ts
deleted file mode 100644
index b674cb70..00000000
--- a/apps/web/app/pages/abilities/abilities.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-} from '@angular/core'
-import { DataTableAdapter } from '~/ui/data-table'
-import { QuicksearchService } from '~/ui/quicksearch'
-import { AbilitiesAdapterService } from './abilities-table-adapter'
-
-@Component({
-  selector: 'nwb-abilities',
-  templateUrl: './abilities.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'layout-row gap-4',
-  },
-  providers: [
-    DataTableAdapter.provideClass(AbilitiesAdapterService),
-    QuicksearchService
-  ]
-})
-export class AbilitiesComponent {
-  //
-}
diff --git a/apps/web/app/pages/abilities/abilities.module.ts b/apps/web/app/pages/abilities/abilities.module.ts
deleted file mode 100644
index 2dfe5341..00000000
--- a/apps/web/app/pages/abilities/abilities.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-
-import { AbilitiesRoutingModule } from './abilities-routing.module'
-import { AbilitiesComponent } from './abilities.component'
-import { DataTableModule } from '~/ui/data-table'
-import { QuicksearchModule } from '~/ui/quicksearch';
-import { AbilitiesTableComponent } from './abilities-table.component'
-
-@NgModule({
-  declarations: [AbilitiesComponent, AbilitiesTableComponent],
-  imports: [CommonModule, AbilitiesRoutingModule, DataTableModule, QuicksearchModule],
-})
-export class AbilitiesModule {}
diff --git a/apps/web/app/pages/abilities/index.ts b/apps/web/app/pages/abilities/index.ts
deleted file mode 100644
index f72280cc..00000000
--- a/apps/web/app/pages/abilities/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './abilities-routing.module'
-export * from './abilities.module'
diff --git a/apps/web/app/pages/about/about-routing.module.ts b/apps/web/app/pages/about/about-routing.module.ts
deleted file mode 100644
index 4a61313d..00000000
--- a/apps/web/app/pages/about/about-routing.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AboutComponent } from './about.component';
-
-const routes: Routes = [{ path: '', component: AboutComponent }];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class AboutRoutingModule { }
diff --git a/apps/web/app/pages/about/about.component.html b/apps/web/app/pages/about/about.component.html
deleted file mode 100644
index 9b1d668a..00000000
--- a/apps/web/app/pages/about/about.component.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<div class="flex flex-col items-center">
-  <footer class="footer footer-center p-10 text-neutral-content rounded-md">
-    <div>
-      <img src="assets/icons/favicon.png" class="w-20 mb-4" />
-
-      <p class="font-bold">
-        New World Buddy
-        <br />
-        Version {{version}}
-        <br />
-        Game Version {{gameVersion}}
-      </p>
-      <p>
-        For personal and fair use purposes
-        <br />
-        We are not affiliated by Amazon or Amazon Game Studios
-        <br />
-        Game content is used under the
-        <a
-          href="https://www.amazon.com/gp/help/customer/display.html?nodeId=GNX7GA7HXVL9V8XZ&pop-up=1"
-          target="_blank"
-          class="text-primary"
-        >
-          Content Usage Policy
-        </a>
-        from
-        <a href="https://www.newworld.com/en-us/legal" target="_blank" class="text-primary">newworld.com</a>
-        <br />
-        Item popovers used from
-        <a
-          href="https://nwdb.info/"
-          target="_blank"
-          class="text-primary"
-        >
-          New World Database
-        </a>
-      </p>
-    </div>
-    <div class="flex">
-      <a href="https://github.com/giniedp/nw-buddy" target="_blank" class="tooltip" data-tip="Github">
-        <svg class="w-8 h-8" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
-      </a>
-      <a href=" https://discord.gg/PWxUwUagVX" target="_blank" class="tooltip" data-tip="Discord">
-        <svg class="w-8 h-8" viewBox="0 0 640 512"><path fill="currentColor" d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
-      </a>
-    </div>
-  </footer>
-</div>
diff --git a/apps/web/app/pages/about/about.component.scss b/apps/web/app/pages/about/about.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/web/app/pages/about/about.component.spec.ts b/apps/web/app/pages/about/about.component.spec.ts
deleted file mode 100644
index 0e0d812f..00000000
--- a/apps/web/app/pages/about/about.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AboutComponent } from './about.component';
-
-describe('AboutComponent', () => {
-  let component: AboutComponent;
-  let fixture: ComponentFixture<AboutComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ AboutComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AboutComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/apps/web/app/pages/about/about.module.ts b/apps/web/app/pages/about/about.module.ts
deleted file mode 100644
index baea2edb..00000000
--- a/apps/web/app/pages/about/about.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { AboutRoutingModule } from './about-routing.module';
-import { AboutComponent } from './about.component';
-
-
-@NgModule({
-  declarations: [
-    AboutComponent
-  ],
-  imports: [
-    CommonModule,
-    AboutRoutingModule
-  ]
-})
-export class AboutModule { }
diff --git a/apps/web/app/pages/armorsets/armorsets-table.component.html b/apps/web/app/pages/armorsets/armorsets-table.component.html
deleted file mode 100644
index 3774dad2..00000000
--- a/apps/web/app/pages/armorsets/armorsets-table.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<nwb-data-table
-  #table
-  [stateKey]="'armorsets-table'"
-  [categoryRouteParam]
-  [detailRoutParam]="'id'"
-  [quickFilter]="search.query | async"
-  class="flex-1 rounded-md overflow-clip"
-></nwb-data-table>
-
-<div class="flex-none w-[400px] xl:w-[450px] 2xl:w-[500px] overflow-y-auto" *ngIf="selectedItems | async; let items">
-  <nwb-item-detail
-    *ngFor="let item of items; trackBy: trackByIndex"
-    [itemId]="item.ItemID"
-    class="rounded-md overflow-clip mb-4"
-    [enableMarker]="true"
-    [enableTracker]="true"
-    [enableDescription]="true"
-    [enablePerks]="true"
-  ></nwb-item-detail>
-</div>
diff --git a/apps/web/app/pages/armorsets/armorsets-table.component.scss b/apps/web/app/pages/armorsets/armorsets-table.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/web/app/pages/armorsets/armorsets.component.html b/apps/web/app/pages/armorsets/armorsets.component.html
deleted file mode 100644
index a590b8e1..00000000
--- a/apps/web/app/pages/armorsets/armorsets.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="w-36 xl:w-40 flex flex-col gap-4">
-  <nwb-quicksearch-input #search></nwb-quicksearch-input>
-  <nwb-data-table-categories
-    categoryChildRoute
-    [childRouteIndex]="'table'"
-    class="bg-base-100 rounded-md overflow-y-auto"
-  ></nwb-data-table-categories>
-</div>
-<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/armorsets/armorsets.component.scss b/apps/web/app/pages/armorsets/armorsets.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/web/app/pages/armorsets/armorsets.module.ts b/apps/web/app/pages/armorsets/armorsets.module.ts
deleted file mode 100644
index 59c87f5d..00000000
--- a/apps/web/app/pages/armorsets/armorsets.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-
-import { SetsRoutingModule } from './armorsets-routing.module'
-
-import { NwModule } from '~/nw'
-import { FormsModule } from '@angular/forms'
-import { ArmorsetsComponent } from './armorsets.component'
-import { DataTableModule } from '~/ui/data-table'
-import { ItemDetailModule } from '~/widgets/item-detail'
-import { QuicksearchModule } from '~/ui/quicksearch';
-import { ArmorsetsTableComponent } from './armorsets-table.component';
-
-@NgModule({
-  imports: [CommonModule, NwModule, SetsRoutingModule, FormsModule, DataTableModule, ItemDetailModule, QuicksearchModule],
-  declarations: [ArmorsetsComponent, ArmorsetsTableComponent],
-  exports: [ArmorsetsComponent],
-})
-export class ArmorsetsModule {}
diff --git a/apps/web/app/pages/armorsets/index.ts b/apps/web/app/pages/armorsets/index.ts
deleted file mode 100644
index 1e958bf9..00000000
--- a/apps/web/app/pages/armorsets/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './armorsets-routing.module'
-export * from './armorsets.module'
diff --git a/apps/web/app/pages/crafting/crafting-detail.component.html b/apps/web/app/pages/crafting/crafting-detail.component.html
deleted file mode 100644
index c37342dd..00000000
--- a/apps/web/app/pages/crafting/crafting-detail.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<nwb-item-detail
-  [recipeId]="itemId | async"
-  [enableDescription]="true"
-  [enableRecipe]="true"
-  [enablePerks]="true"
-  [enableInfo]="false"
-></nwb-item-detail>
diff --git a/apps/web/app/pages/crafting/crafting-detail.component.ts b/apps/web/app/pages/crafting/crafting-detail.component.ts
deleted file mode 100644
index eb2a467b..00000000
--- a/apps/web/app/pages/crafting/crafting-detail.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
-import { observeRouteParam } from '~/utils'
-
-@Component({
-  selector: 'nwb-crafting-detail',
-  templateUrl: './crafting-detail.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'layout-content flex-none max-w-lg'
-  }
-})
-export class CraftingDetailComponent {
-  public itemId = observeRouteParam(this.route, 'id')
-  public constructor(private route: ActivatedRoute) {
-    //
-  }
-}
diff --git a/apps/web/app/pages/crafting/crafting-runes.component.html b/apps/web/app/pages/crafting/crafting-runes.component.html
deleted file mode 100644
index 5e271f46..00000000
--- a/apps/web/app/pages/crafting/crafting-runes.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="grid grid-cols-5 gap-1">
-  <ng-container *ngFor="let row of rows | async">
-    <div *ngFor="let item of row" class="bg-base-300 flex flex-col">
-      <nwb-item-detail [itemId]="item.$itemId" [enableDescription]="true" [enablePerks]="true"></nwb-item-detail>
-      <div>
-        <div *ngFor="let ingr of item.$ingredients" class="flex flex-row gap-1 m-1 justify-start items-center">
-          <picture [nwIcon]="ingr.item" class="w-8 h-8 nw-icon flex-none"></picture>
-          <span>{{ ingr.quantity }}</span>
-          <span>&times;</span>
-          <span [nwText]="ingr.item.Name"></span>
-        </div>
-      </div>
-    </div>
-  </ng-container>
-</div>
diff --git a/apps/web/app/pages/crafting/crafting-table.component.ts b/apps/web/app/pages/crafting/crafting-table.component.ts
deleted file mode 100644
index 863094b5..00000000
--- a/apps/web/app/pages/crafting/crafting-table.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { QuicksearchService } from '~/ui/quicksearch';
-
-@Component({
-  selector: 'nwb-crafting-table',
-  templateUrl: './crafting-table.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'layout-row gap-4',
-  },
-})
-export class CraftingTableComponent {
-  public constructor(public search: QuicksearchService) {
-    //
-  }
-}
diff --git a/apps/web/app/pages/crafting/crafting-trophies.component.html b/apps/web/app/pages/crafting/crafting-trophies.component.html
deleted file mode 100644
index bbb6646c..00000000
--- a/apps/web/app/pages/crafting/crafting-trophies.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="grid grid-cols-3 gap-1">
-  <ng-container *ngFor="let row of rows | async">
-    <div *ngFor="let item of row" class="bg-base-300 flex flex-col">
-      <nwb-item-detail [itemId]="item.$itemId" [enableDescription]="true" [enablePerks]="true" [enableMarker]="true"></nwb-item-detail>
-      <div>
-        <div *ngFor="let ingr of item.$ingredients" class="flex flex-row gap-1 m-1 justify-start items-center">
-          <picture [nwIcon]="ingr.item" class="w-8 h-8 nw-icon flex-none"></picture>
-          <span>{{ ingr.quantity }}</span>
-          <span>&times;</span>
-          <span [nwText]="ingr.item.Name"></span>
-        </div>
-      </div>
-    </div>
-  </ng-container>
-</div>
diff --git a/apps/web/app/pages/crafting/crafting.component.html b/apps/web/app/pages/crafting/crafting.component.html
deleted file mode 100644
index d66f6819..00000000
--- a/apps/web/app/pages/crafting/crafting.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="w-36 xl:w-40 flex flex-col gap-4">
-  <nwb-quicksearch-input #search></nwb-quicksearch-input>
-  <nwb-data-table-categories
-    categoryChildRoute
-    [childRouteIndex]="'table'"
-    class="bg-base-100 rounded-md overflow-y-auto"
-  ></nwb-data-table-categories>
-  <ul class="menu menu-compact xl:menu-normal bg-base-100 rounded-md">
-    <li [routerLinkActive]="'bordered'">
-      <a [routerLink]="'trophies'" > Trophies </a>
-    </li>
-    <!-- <li [routerLinkActive]="'bordered'">
-      <a [routerLink]="'runes'" > Runes </a>
-    </li> -->
-  </ul>
-</div>
-<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/crafting/crafting.component.ts b/apps/web/app/pages/crafting/crafting.component.ts
deleted file mode 100644
index 45c75bea..00000000
--- a/apps/web/app/pages/crafting/crafting.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core'
-import { DataTableAdapter } from '~/ui/data-table'
-import { QuicksearchService } from '~/ui/quicksearch'
-import { CraftingAdapterService } from './crafting-table-adapter'
-
-@Component({
-  selector: 'nwb-crafting',
-  templateUrl: './crafting.component.html',
-  host: {
-    class: 'layout-row gap-4',
-  },
-  providers: [DataTableAdapter.provideClass(CraftingAdapterService), QuicksearchService],
-})
-export class CraftingComponent {
-  //
-}
diff --git a/apps/web/app/pages/crafting/crafting.module.ts b/apps/web/app/pages/crafting/crafting.module.ts
deleted file mode 100644
index 97e639df..00000000
--- a/apps/web/app/pages/crafting/crafting.module.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-
-import { FormsModule } from '@angular/forms'
-import { NwModule } from '~/nw'
-import { DataTableModule } from '~/ui/data-table'
-import { PropertyGridModule } from '~/ui/property-grid'
-import { QuicksearchModule } from '~/ui/quicksearch'
-import { CraftingCalculatorModule } from '~/widgets/crafting-calculator'
-import { ItemDetailModule } from '~/widgets/item-detail'
-import { CraftingDetailComponent } from './crafting-detail.component'
-import { CraftingRoutingModule } from './crafting-routing.module'
-import { CraftingRunesComponent } from './crafting-runes.component'
-import { CraftingTableComponent } from './crafting-table.component'
-import { CraftingTrophiesComponent } from './crafting-trophies.component'
-import { CraftingComponent } from './crafting.component'
-
-@NgModule({
-  imports: [
-    CommonModule,
-    CraftingRoutingModule,
-    PropertyGridModule,
-    FormsModule,
-    ItemDetailModule,
-    DataTableModule,
-    QuicksearchModule,
-    CraftingCalculatorModule,
-    NwModule
-  ],
-  declarations: [CraftingComponent, CraftingDetailComponent, CraftingTableComponent, CraftingRunesComponent, CraftingTrophiesComponent],
-})
-export class CraftingModule {}
diff --git a/apps/web/app/pages/database/abilities/abilities-detail.component.html b/apps/web/app/pages/database/abilities/abilities-detail.component.html
new file mode 100644
index 00000000..00726b4d
--- /dev/null
+++ b/apps/web/app/pages/database/abilities/abilities-detail.component.html
@@ -0,0 +1,8 @@
+<div [nwbAbilityDetail]="itemId | async" #detail="abilityDetail" class="flex flex-col layout-gap">
+  <nwb-property-grid
+    [rows]="detail.properties$ | async"
+    [numberFormat]="'0.0-4'"
+    class="gap-x-1 font-mono w-full bg-base-100 rounded-md p-3 overflow-auto"
+  >
+  </nwb-property-grid>
+</div>
diff --git a/apps/web/app/pages/database/abilities/abilities-detail.component.ts b/apps/web/app/pages/database/abilities/abilities-detail.component.ts
new file mode 100644
index 00000000..059352ad
--- /dev/null
+++ b/apps/web/app/pages/database/abilities/abilities-detail.component.ts
@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common'
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { ActivatedRoute, RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { PropertyGridModule } from '~/ui/property-grid'
+import { observeRouteParam } from '~/utils'
+import { AbilityDetailModule } from '~/widgets/ability-detail'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-abilities-detail',
+  templateUrl: './abilities-detail.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule, RouterModule, AbilityDetailModule, PropertyGridModule],
+  host: {
+    class: 'layout-content xl:max-w-md p-3',
+  },
+})
+export class AbilitiesDetailComponent {
+  public itemId = observeRouteParam(this.route, 'id')
+
+  public constructor(private route: ActivatedRoute) {
+    //
+  }
+}
diff --git a/apps/web/app/pages/abilities/abilities-table.component.html b/apps/web/app/pages/database/abilities/abilities-table.component.html
similarity index 82%
rename from apps/web/app/pages/abilities/abilities-table.component.html
rename to apps/web/app/pages/database/abilities/abilities-table.component.html
index d7b12415..390f37c9 100644
--- a/apps/web/app/pages/abilities/abilities-table.component.html
+++ b/apps/web/app/pages/database/abilities/abilities-table.component.html
@@ -4,7 +4,7 @@
   [categoryRouteParam]
   [detailRoutParam]="'id'"
   [quickFilter]="search.query | async"
-  class="flex-1 rounded-md overflow-clip"
+  class="flex-1"
 ></nwb-data-table>
 
 <router-outlet></router-outlet>
diff --git a/apps/web/app/pages/database/abilities/abilities-table.component.ts b/apps/web/app/pages/database/abilities/abilities-table.component.ts
new file mode 100644
index 00000000..1eb03e73
--- /dev/null
+++ b/apps/web/app/pages/database/abilities/abilities-table.component.ts
@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common'
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableModule } from '~/ui/data-table'
+import { QuicksearchService } from '~/ui/quicksearch'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-abilities-table',
+  templateUrl: './abilities-table.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, DataTableModule],
+  host: {
+    class: 'layout-col xl:flex-row',
+  },
+})
+export class AbilitiesTableComponent implements OnInit {
+  public constructor(public search: QuicksearchService) {
+    //
+  }
+
+  public ngOnInit(): void {
+    //
+  }
+}
diff --git a/apps/web/app/pages/database/abilities/abilities.component.html b/apps/web/app/pages/database/abilities/abilities.component.html
new file mode 100644
index 00000000..062f6a80
--- /dev/null
+++ b/apps/web/app/pages/database/abilities/abilities.component.html
@@ -0,0 +1,11 @@
+<div class="flex-none flex flex-row bg-base-300 rounded-t-md">
+  <nwb-data-table-categories
+    categoryChildRoute
+    [childRouteIndex]="'table'"
+    class="flex-1"
+  ></nwb-data-table-categories>
+  <div class="flex-none p-2 max-w-[50%]">
+    <nwb-quicksearch-input #search></nwb-quicksearch-input>
+  </div>
+</div>
+<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/database/abilities/abilities.component.ts b/apps/web/app/pages/database/abilities/abilities.component.ts
new file mode 100644
index 00000000..e8ceb064
--- /dev/null
+++ b/apps/web/app/pages/database/abilities/abilities.component.ts
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableAdapter, DataTableModule } from '~/ui/data-table'
+import { QuicksearchModule, QuicksearchService } from '~/ui/quicksearch'
+import { AbilitiesTableAdapter } from '~/widgets/adapter'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-abilities-page',
+  templateUrl: './abilities.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, DataTableModule, QuicksearchModule],
+  host: {
+    class: 'layout-col bg-base-300 rounded-md overflow-clip',
+  },
+  providers: [DataTableAdapter.provideClass(AbilitiesTableAdapter), QuicksearchService],
+})
+export class AbilitiesComponent {
+  //
+}
diff --git a/apps/web/app/pages/abilities/abilities-routing.module.ts b/apps/web/app/pages/database/abilities/abilities.module.ts
similarity index 64%
rename from apps/web/app/pages/abilities/abilities-routing.module.ts
rename to apps/web/app/pages/database/abilities/abilities.module.ts
index abdaa9d4..04daac5f 100644
--- a/apps/web/app/pages/abilities/abilities-routing.module.ts
+++ b/apps/web/app/pages/database/abilities/abilities.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { EmptyComponent } from '~/widgets/empty'
+
+import { AbilitiesDetailComponent } from './abilities-detail.component'
 import { AbilitiesTableComponent } from './abilities-table.component'
 import { AbilitiesComponent } from './abilities.component'
 
@@ -17,18 +18,22 @@ const routes: Routes = [
       {
         path: 'table',
         component: AbilitiesTableComponent,
-        children: [{
-          path: ':id',
-          component: EmptyComponent
-        }]
+        children: [
+          {
+            path: ':id',
+            component: AbilitiesDetailComponent,
+          },
+        ],
       },
       {
         path: ':category',
         component: AbilitiesTableComponent,
-        children: [{
-          path: ':id',
-          component: EmptyComponent
-        }]
+        children: [
+          {
+            path: ':id',
+            component: AbilitiesDetailComponent,
+          },
+        ],
       },
     ],
   },
@@ -36,6 +41,5 @@ const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
 })
-export class AbilitiesRoutingModule {}
+export class AbilitiesModule {}
diff --git a/apps/web/app/pages/database/abilities/index.ts b/apps/web/app/pages/database/abilities/index.ts
new file mode 100644
index 00000000..ae5c57b8
--- /dev/null
+++ b/apps/web/app/pages/database/abilities/index.ts
@@ -0,0 +1 @@
+export * from './abilities.module'
diff --git a/apps/web/app/pages/database/crafting/crafting-detail.component.html b/apps/web/app/pages/database/crafting/crafting-detail.component.html
new file mode 100644
index 00000000..e9b44166
--- /dev/null
+++ b/apps/web/app/pages/database/crafting/crafting-detail.component.html
@@ -0,0 +1,5 @@
+<nwb-item-card [entityId]="itemId$ | async" [enableInfoLink]="true" class="m-3 mt-0">
+  <div class="p-3">
+    <nwb-crafting-calculator [recipe]="recipe$ | async"></nwb-crafting-calculator>
+  </div>
+</nwb-item-card>
diff --git a/apps/web/app/pages/database/crafting/crafting-detail.component.ts b/apps/web/app/pages/database/crafting/crafting-detail.component.ts
new file mode 100644
index 00000000..8d5a5690
--- /dev/null
+++ b/apps/web/app/pages/database/crafting/crafting-detail.component.ts
@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ActivatedRoute, RouterModule } from '@angular/router'
+import { map } from 'rxjs'
+import { NwDbService, NwModule } from '~/nw'
+import { getItemIdFromRecipe } from '~/nw/utils'
+import { observeRouteParam } from '~/utils'
+import { CraftingCalculatorModule } from '~/widgets/crafting-calculator'
+import { ItemDetailModule } from '~/widgets/item-detail'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-crafting-detail',
+  templateUrl: './crafting-detail.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, ItemDetailModule, CraftingCalculatorModule],
+  host: {
+    class: 'layout-content xl:max-w-md',
+  },
+})
+export class CraftingDetailComponent {
+  protected id$ = observeRouteParam(this.route, 'id')
+  protected recipe$ = this.db.recipe(this.id$)
+  protected itemId$ = this.recipe$.pipe(map((it) => getItemIdFromRecipe(it)))
+
+  public constructor(private route: ActivatedRoute, private db: NwDbService) {
+    //
+  }
+}
diff --git a/apps/web/app/pages/crafting/crafting-table.component.html b/apps/web/app/pages/database/crafting/crafting-table.component.html
similarity index 82%
rename from apps/web/app/pages/crafting/crafting-table.component.html
rename to apps/web/app/pages/database/crafting/crafting-table.component.html
index 5d3d9dd7..50aa4f8f 100644
--- a/apps/web/app/pages/crafting/crafting-table.component.html
+++ b/apps/web/app/pages/database/crafting/crafting-table.component.html
@@ -4,7 +4,7 @@
   [categoryRouteParam]
   [detailRoutParam]="'id'"
   [quickFilter]="search.query | async"
-  class="flex-1 rounded-md overflow-clip"
+  class="flex-1"
 ></nwb-data-table>
 
 <router-outlet></router-outlet>
diff --git a/apps/web/app/pages/database/crafting/crafting-table.component.ts b/apps/web/app/pages/database/crafting/crafting-table.component.ts
new file mode 100644
index 00000000..4e84393c
--- /dev/null
+++ b/apps/web/app/pages/database/crafting/crafting-table.component.ts
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableModule } from '~/ui/data-table'
+import { QuicksearchService } from '~/ui/quicksearch'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-crafting-table',
+  templateUrl: './crafting-table.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, DataTableModule],
+  host: {
+    class: 'layout-col xl:flex-row',
+  },
+})
+export class CraftingTableComponent {
+  public constructor(public search: QuicksearchService) {
+    //
+  }
+}
diff --git a/apps/web/app/pages/database/crafting/crafting.component.html b/apps/web/app/pages/database/crafting/crafting.component.html
new file mode 100644
index 00000000..062f6a80
--- /dev/null
+++ b/apps/web/app/pages/database/crafting/crafting.component.html
@@ -0,0 +1,11 @@
+<div class="flex-none flex flex-row bg-base-300 rounded-t-md">
+  <nwb-data-table-categories
+    categoryChildRoute
+    [childRouteIndex]="'table'"
+    class="flex-1"
+  ></nwb-data-table-categories>
+  <div class="flex-none p-2 max-w-[50%]">
+    <nwb-quicksearch-input #search></nwb-quicksearch-input>
+  </div>
+</div>
+<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/database/crafting/crafting.component.ts b/apps/web/app/pages/database/crafting/crafting.component.ts
new file mode 100644
index 00000000..e615fb5a
--- /dev/null
+++ b/apps/web/app/pages/database/crafting/crafting.component.ts
@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common'
+import { Component } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableAdapter, DataTableModule } from '~/ui/data-table'
+import { QuicksearchModule, QuicksearchService } from '~/ui/quicksearch'
+import { CraftingTableAdapter } from '~/widgets/adapter'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-crafting',
+  templateUrl: './crafting.component.html',
+  imports: [CommonModule, RouterModule, NwModule, QuicksearchModule, DataTableModule],
+  host: {
+    class: 'layout-col bg-base-300 rounded-md overflow-clip',
+  },
+  providers: [DataTableAdapter.provideClass(CraftingTableAdapter), QuicksearchService],
+})
+export class CraftingComponent {
+  //
+}
diff --git a/apps/web/app/pages/crafting/crafting-routing.module.ts b/apps/web/app/pages/database/crafting/crafting.module.ts
similarity index 72%
rename from apps/web/app/pages/crafting/crafting-routing.module.ts
rename to apps/web/app/pages/database/crafting/crafting.module.ts
index 5bf4fc59..9643f4a8 100644
--- a/apps/web/app/pages/crafting/crafting-routing.module.ts
+++ b/apps/web/app/pages/database/crafting/crafting.module.ts
@@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
+
 import { CraftingDetailComponent } from './crafting-detail.component'
-import { CraftingRunesComponent } from './crafting-runes.component'
 import { CraftingTableComponent } from './crafting-table.component'
-import { CraftingTrophiesComponent } from './crafting-trophies.component'
 import { CraftingComponent } from './crafting.component'
 
 const routes: Routes = [
@@ -16,14 +15,6 @@ const routes: Routes = [
         pathMatch: 'full',
         redirectTo: 'table',
       },
-      {
-        path: 'runes',
-        component: CraftingRunesComponent
-      },
-      {
-        path: 'trophies',
-        component: CraftingTrophiesComponent
-      },
       {
         path: 'table',
         component: CraftingTableComponent,
@@ -50,6 +41,5 @@ const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
 })
-export class CraftingRoutingModule {}
+export class CraftingModule {}
diff --git a/apps/web/app/pages/crafting/index.ts b/apps/web/app/pages/database/crafting/index.ts
similarity index 100%
rename from apps/web/app/pages/crafting/index.ts
rename to apps/web/app/pages/database/crafting/index.ts
diff --git a/apps/web/app/pages/database/housing/housing-detail.component.html b/apps/web/app/pages/database/housing/housing-detail.component.html
new file mode 100644
index 00000000..f7b1ff62
--- /dev/null
+++ b/apps/web/app/pages/database/housing/housing-detail.component.html
@@ -0,0 +1 @@
+<nwb-item-card [entityId]="itemId | async" [enableInfoLink]="true" [enableTracker]="true" class="m-3 mt-0"></nwb-item-card>
diff --git a/apps/web/app/pages/housing/housing-detail.component.ts b/apps/web/app/pages/database/housing/housing-detail.component.ts
similarity index 56%
rename from apps/web/app/pages/housing/housing-detail.component.ts
rename to apps/web/app/pages/database/housing/housing-detail.component.ts
index 31118bec..87fa282f 100644
--- a/apps/web/app/pages/housing/housing-detail.component.ts
+++ b/apps/web/app/pages/database/housing/housing-detail.component.ts
@@ -1,13 +1,18 @@
+import { CommonModule } from '@angular/common'
 import { Component, ChangeDetectionStrategy } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
+import { ActivatedRoute, RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
 import { observeRouteParam } from '~/utils'
+import { ItemDetailModule } from '~/widgets/item-detail'
 
 @Component({
+  standalone: true,
   selector: 'nwb-housing-detail',
   templateUrl: './housing-detail.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, ItemDetailModule],
   host: {
-    class: 'layout-content flex-none max-w-lg'
+    class: 'layout-content xl:max-w-md',
   }
 })
 export class HousingDetailComponent {
diff --git a/apps/web/app/pages/housing/housing-table-adapter.ts b/apps/web/app/pages/database/housing/housing-table-adapter.ts
similarity index 100%
rename from apps/web/app/pages/housing/housing-table-adapter.ts
rename to apps/web/app/pages/database/housing/housing-table-adapter.ts
diff --git a/apps/web/app/pages/housing/housing-table.component.html b/apps/web/app/pages/database/housing/housing-table.component.html
similarity index 82%
rename from apps/web/app/pages/housing/housing-table.component.html
rename to apps/web/app/pages/database/housing/housing-table.component.html
index f3921122..d6a7e7e5 100644
--- a/apps/web/app/pages/housing/housing-table.component.html
+++ b/apps/web/app/pages/database/housing/housing-table.component.html
@@ -4,7 +4,7 @@
   [categoryRouteParam]
   [detailRoutParam]="'id'"
   [quickFilter]="search.query | async"
-  class="rounded-md overflow-clip flex-1"
+  class="flex-1"
 ></nwb-data-table>
 
 <router-outlet></router-outlet>
diff --git a/apps/web/app/pages/housing/housing-table.component.ts b/apps/web/app/pages/database/housing/housing-table.component.ts
similarity index 58%
rename from apps/web/app/pages/housing/housing-table.component.ts
rename to apps/web/app/pages/database/housing/housing-table.component.ts
index a650afc8..6f24c8d1 100644
--- a/apps/web/app/pages/housing/housing-table.component.ts
+++ b/apps/web/app/pages/database/housing/housing-table.component.ts
@@ -1,12 +1,18 @@
+import { CommonModule } from '@angular/common'
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableModule } from '~/ui/data-table'
 import { QuicksearchService } from '~/ui/quicksearch'
 
 @Component({
+  standalone: true,
   selector: 'nwb-housing-table',
   templateUrl: './housing-table.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, DataTableModule],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-col xl:flex-row',
   },
 })
 export class HousingTableComponent implements OnInit {
diff --git a/apps/web/app/pages/database/housing/housing.component.html b/apps/web/app/pages/database/housing/housing.component.html
new file mode 100644
index 00000000..062f6a80
--- /dev/null
+++ b/apps/web/app/pages/database/housing/housing.component.html
@@ -0,0 +1,11 @@
+<div class="flex-none flex flex-row bg-base-300 rounded-t-md">
+  <nwb-data-table-categories
+    categoryChildRoute
+    [childRouteIndex]="'table'"
+    class="flex-1"
+  ></nwb-data-table-categories>
+  <div class="flex-none p-2 max-w-[50%]">
+    <nwb-quicksearch-input #search></nwb-quicksearch-input>
+  </div>
+</div>
+<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/database/housing/housing.component.ts b/apps/web/app/pages/database/housing/housing.component.ts
new file mode 100644
index 00000000..d651b3bd
--- /dev/null
+++ b/apps/web/app/pages/database/housing/housing.component.ts
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableAdapter, DataTableModule } from '~/ui/data-table'
+import { QuicksearchModule, QuicksearchService } from '~/ui/quicksearch'
+import { HousingAdapterService } from './housing-table-adapter'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-housing-page',
+  templateUrl: './housing.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, QuicksearchModule, DataTableModule],
+  host: {
+    class: 'layout-col bg-base-300 rounded-md overflow-clip',
+  },
+  providers: [DataTableAdapter.provideClass(HousingAdapterService), QuicksearchService],
+})
+export class HousingComponent {
+  //
+}
diff --git a/apps/web/app/pages/housing/housing-routing.module.ts b/apps/web/app/pages/database/housing/housing.module.ts
similarity index 93%
rename from apps/web/app/pages/housing/housing-routing.module.ts
rename to apps/web/app/pages/database/housing/housing.module.ts
index 8d2bd621..80077f07 100644
--- a/apps/web/app/pages/housing/housing-routing.module.ts
+++ b/apps/web/app/pages/database/housing/housing.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
+
 import { HousingDetailComponent } from './housing-detail.component'
 import { HousingTableComponent } from './housing-table.component'
 import { HousingComponent } from './housing.component'
@@ -40,6 +41,5 @@ const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
 })
-export class HousingRoutingModule {}
+export class HousingModule {}
diff --git a/apps/web/app/pages/housing/index.ts b/apps/web/app/pages/database/housing/index.ts
similarity index 100%
rename from apps/web/app/pages/housing/index.ts
rename to apps/web/app/pages/database/housing/index.ts
diff --git a/apps/web/app/pages/database/items/index.ts b/apps/web/app/pages/database/items/index.ts
new file mode 100644
index 00000000..c3eef00e
--- /dev/null
+++ b/apps/web/app/pages/database/items/index.ts
@@ -0,0 +1 @@
+export * from './items.module'
diff --git a/apps/web/app/pages/database/items/item.component.html b/apps/web/app/pages/database/items/item.component.html
new file mode 100644
index 00000000..f7b1ff62
--- /dev/null
+++ b/apps/web/app/pages/database/items/item.component.html
@@ -0,0 +1 @@
+<nwb-item-card [entityId]="itemId | async" [enableInfoLink]="true" [enableTracker]="true" class="m-3 mt-0"></nwb-item-card>
diff --git a/apps/web/app/pages/items/item.component.ts b/apps/web/app/pages/database/items/item.component.ts
similarity index 53%
rename from apps/web/app/pages/items/item.component.ts
rename to apps/web/app/pages/database/items/item.component.ts
index 8d1ff074..6d814f5a 100644
--- a/apps/web/app/pages/items/item.component.ts
+++ b/apps/web/app/pages/database/items/item.component.ts
@@ -1,13 +1,18 @@
+import { CommonModule } from '@angular/common'
 import { Component, ChangeDetectionStrategy } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
+import { ActivatedRoute, RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
 import { observeRouteParam } from '~/utils'
+import { ItemDetailModule } from '~/widgets/item-detail'
 
 @Component({
+  standalone: true,
   templateUrl: './item.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, ItemDetailModule],
   host: {
-    class: 'layout-content flex-none max-w-lg'
-  }
+    class: 'layout-content xl:max-w-md',
+  },
 })
 export class ItemComponent {
   public itemId = observeRouteParam(this.route, 'id')
diff --git a/apps/web/app/pages/items/items-table.component.html b/apps/web/app/pages/database/items/items-table.component.html
similarity index 82%
rename from apps/web/app/pages/items/items-table.component.html
rename to apps/web/app/pages/database/items/items-table.component.html
index 052a653f..9cd8056a 100644
--- a/apps/web/app/pages/items/items-table.component.html
+++ b/apps/web/app/pages/database/items/items-table.component.html
@@ -4,7 +4,7 @@
   [categoryRouteParam]
   [detailRoutParam]="'id'"
   [quickFilter]="search.query | async"
-  class="flex-1 rounded-md overflow-clip"
+  class="flex-1"
 ></nwb-data-table>
 
 <router-outlet></router-outlet>
diff --git a/apps/web/app/pages/database/items/items-table.component.ts b/apps/web/app/pages/database/items/items-table.component.ts
new file mode 100644
index 00000000..19be604d
--- /dev/null
+++ b/apps/web/app/pages/database/items/items-table.component.ts
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common'
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableModule } from '~/ui/data-table'
+import { QuicksearchModule, QuicksearchService } from '~/ui/quicksearch'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-items-table',
+  templateUrl: './items-table.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, QuicksearchModule, DataTableModule],
+  host: {
+    class: 'layout-col xl:flex-row',
+  },
+})
+export class ItemsTableComponent {
+  public constructor(public search: QuicksearchService) {
+    //
+  }
+}
diff --git a/apps/web/app/pages/database/items/items.component.html b/apps/web/app/pages/database/items/items.component.html
new file mode 100644
index 00000000..f8290890
--- /dev/null
+++ b/apps/web/app/pages/database/items/items.component.html
@@ -0,0 +1,11 @@
+<div class="flex-none flex flex-row bg-base-300 rounded-t-md">
+  <nwb-data-table-categories
+    categoryChildRoute
+    [childRouteIndex]="'table'"
+    class="flex-1"
+  ></nwb-data-table-categories>
+  <div class="flex-none p-2 max-w-[30%]">
+    <nwb-quicksearch-input #search></nwb-quicksearch-input>
+  </div>
+</div>
+<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/database/items/items.component.ts b/apps/web/app/pages/database/items/items.component.ts
new file mode 100644
index 00000000..39b612c2
--- /dev/null
+++ b/apps/web/app/pages/database/items/items.component.ts
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableAdapter, DataTableModule } from '~/ui/data-table'
+import { QuicksearchModule, QuicksearchService } from '~/ui/quicksearch'
+import { ItemsTableAdapter } from '~/widgets/adapter'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-items-page',
+  templateUrl: './items.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, QuicksearchModule, DataTableModule],
+  host: {
+    class: 'layout-col bg-base-300 rounded-md overflow-clip',
+  },
+  providers: [DataTableAdapter.provideClass(ItemsTableAdapter), QuicksearchService],
+})
+export class ItemsComponent {
+
+}
diff --git a/apps/web/app/pages/items/items-routing.module.ts b/apps/web/app/pages/database/items/items.module.ts
similarity index 93%
rename from apps/web/app/pages/items/items-routing.module.ts
rename to apps/web/app/pages/database/items/items.module.ts
index 457cb0a3..c47162f0 100644
--- a/apps/web/app/pages/items/items-routing.module.ts
+++ b/apps/web/app/pages/database/items/items.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
+
 import { ItemComponent } from './item.component'
 import { ItemsTableComponent } from './items-table.component'
 import { ItemsComponent } from './items.component'
@@ -36,6 +37,6 @@ const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
+  declarations: [],
 })
-export class ItemsRoutingModule {}
+export class ItemsModule {}
diff --git a/apps/web/app/pages/database/perks/index.ts b/apps/web/app/pages/database/perks/index.ts
new file mode 100644
index 00000000..35390768
--- /dev/null
+++ b/apps/web/app/pages/database/perks/index.ts
@@ -0,0 +1 @@
+export * from './perks.module'
diff --git a/apps/web/app/pages/database/perks/perks-detail.component.html b/apps/web/app/pages/database/perks/perks-detail.component.html
new file mode 100644
index 00000000..a8ca1f8d
--- /dev/null
+++ b/apps/web/app/pages/database/perks/perks-detail.component.html
@@ -0,0 +1,25 @@
+<div [nwbPerkDetail]="itemId | async" #detail="perkDetail" class="flex flex-col layout-gap">
+  <nwb-property-grid
+    [rows]="detail.properties$ | async"
+    [numberFormat]="'0.0-4'"
+    class="gap-x-1 font-mono w-full bg-base-100 rounded-md p-3 overflow-auto"
+  >
+  </nwb-property-grid>
+
+  <ng-container *ngFor="let data of detail.abilities$ | async">
+    <nwb-property-grid
+      [item]="data"
+      [numberFormat]="'0.0-4'"
+      class="gap-x-1 font-mono w-full bg-base-100 rounded-md p-3 overflow-auto"
+    >
+    </nwb-property-grid>
+  </ng-container>
+
+  <nwb-property-grid
+    *ngIf="detail.affix$ | async; let data"
+    [item]="data"
+    [numberFormat]="'0.0-4'"
+    class="gap-x-1 font-mono w-full bg-base-100 rounded-md p-3 overflow-auto"
+  >
+  </nwb-property-grid>
+</div>
diff --git a/apps/web/app/pages/database/perks/perks-detail.component.ts b/apps/web/app/pages/database/perks/perks-detail.component.ts
new file mode 100644
index 00000000..3eccb56b
--- /dev/null
+++ b/apps/web/app/pages/database/perks/perks-detail.component.ts
@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common'
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { ActivatedRoute, RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { PropertyGridModule } from '~/ui/property-grid'
+import { observeRouteParam } from '~/utils'
+import { AbilityDetailModule } from '~/widgets/ability-detail'
+import { PerkDetailModule } from '~/widgets/perk-detail'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-perks-detail',
+  templateUrl: './perks-detail.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule, RouterModule, PerkDetailModule, PropertyGridModule],
+  host: {
+    class: 'layout-content xl:max-w-md p-3',
+  },
+})
+export class PerksDetailComponent {
+  public itemId = observeRouteParam(this.route, 'id')
+
+  public constructor(private route: ActivatedRoute) {
+    //
+  }
+}
diff --git a/apps/web/app/pages/perks/perks-table.component.html b/apps/web/app/pages/database/perks/perks-table.component.html
similarity index 82%
rename from apps/web/app/pages/perks/perks-table.component.html
rename to apps/web/app/pages/database/perks/perks-table.component.html
index 30f4902a..5662e8f4 100644
--- a/apps/web/app/pages/perks/perks-table.component.html
+++ b/apps/web/app/pages/database/perks/perks-table.component.html
@@ -4,7 +4,7 @@
   [categoryRouteParam]
   [detailRoutParam]="'id'"
   [quickFilter]="search.query | async"
-  class="flex-1 rounded-md overflow-clip"
+  class="flex-1"
 ></nwb-data-table>
 
 <router-outlet></router-outlet>
diff --git a/apps/web/app/pages/database/perks/perks-table.component.ts b/apps/web/app/pages/database/perks/perks-table.component.ts
new file mode 100644
index 00000000..6fee17e5
--- /dev/null
+++ b/apps/web/app/pages/database/perks/perks-table.component.ts
@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common'
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableModule } from '~/ui/data-table'
+import { QuicksearchModule, QuicksearchService } from '~/ui/quicksearch'
+
+@Component({
+  standalone: true,
+  templateUrl: './perks-table.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, QuicksearchModule, DataTableModule],
+  host: {
+    class: 'layout-col xl:flex-row',
+  },
+})
+export class PerksTableComponent {
+  public constructor(public search: QuicksearchService) {
+    //
+  }
+}
diff --git a/apps/web/app/pages/database/perks/perks.component.html b/apps/web/app/pages/database/perks/perks.component.html
new file mode 100644
index 00000000..89a5385d
--- /dev/null
+++ b/apps/web/app/pages/database/perks/perks.component.html
@@ -0,0 +1,49 @@
+<div class="flex-none flex flex-row bg-base-300 rounded-t-md">
+  <nwb-data-table-categories categoryChildRoute [childRouteIndex]="'table'" class="flex-1"></nwb-data-table-categories>
+  <ul class="menu menu-horizontal">
+    <li cdkOverlayOrigin #overlay="cdkOverlayOrigin" (click)="isToolOpen = !isToolOpen">
+      <a>
+        <svg viewBox="0 0 640 512" class="w-5 h-5">
+          <path
+            fill="currentColor"
+            d="M308.5 135.3c7.1-6.3 9.9-16.2 6.2-25c-2.3-5.3-4.8-10.5-7.6-15.5L304 89.4c-3-5-6.3-9.9-9.8-14.6c-5.7-7.6-15.7-10.1-24.7-7.1l-28.2 9.3c-10.7-8.8-23-16-36.2-20.9L199 27.1c-1.9-9.3-9.1-16.7-18.5-17.8C173.7 8.4 166.9 8 160 8s-13.7 .4-20.4 1.2c-9.4 1.1-16.6 8.6-18.5 17.8L115 56.1c-13.3 5-25.5 12.1-36.2 20.9L50.5 67.8c-9-3-19-.5-24.7 7.1c-3.5 4.7-6.8 9.6-9.9 14.6l-3 5.3c-2.8 5-5.3 10.2-7.6 15.6c-3.7 8.7-.9 18.6 6.2 25l22.2 19.8C32.6 161.9 32 168.9 32 176s.6 14.1 1.7 20.9L11.5 216.7c-7.1 6.3-9.9 16.2-6.2 25c2.3 5.3 4.8 10.5 7.6 15.6l3 5.2c3 5.1 6.3 9.9 9.9 14.6c5.7 7.6 15.7 10.1 24.7 7.1l28.2-9.3c10.7 8.8 23 16 36.2 20.9l6.1 29.1c1.9 9.3 9.1 16.7 18.5 17.8c6.7 .8 13.5 1.2 20.4 1.2s13.7-.4 20.4-1.2c9.4-1.1 16.6-8.6 18.5-17.8l6.1-29.1c13.3-5 25.5-12.1 36.2-20.9l28.2 9.3c9 3 19 .5 24.7-7.1c3.5-4.7 6.8-9.5 9.8-14.6l3.1-5.4c2.8-5 5.3-10.2 7.6-15.5c3.7-8.7 .9-18.6-6.2-25l-22.2-19.8c1.1-6.8 1.7-13.8 1.7-20.9s-.6-14.1-1.7-20.9l22.2-19.8zM208 176c0 26.5-21.5 48-48 48s-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48zM504.7 500.5c6.3 7.1 16.2 9.9 25 6.2c5.3-2.3 10.5-4.8 15.5-7.6l5.4-3.1c5-3 9.9-6.3 14.6-9.8c7.6-5.7 10.1-15.7 7.1-24.7l-9.3-28.2c8.8-10.7 16-23 20.9-36.2l29.1-6.1c9.3-1.9 16.7-9.1 17.8-18.5c.8-6.7 1.2-13.5 1.2-20.4s-.4-13.7-1.2-20.4c-1.1-9.4-8.6-16.6-17.8-18.5L583.9 307c-5-13.3-12.1-25.5-20.9-36.2l9.3-28.2c3-9 .5-19-7.1-24.7c-4.7-3.5-9.6-6.8-14.6-9.9l-5.3-3c-5-2.8-10.2-5.3-15.6-7.6c-8.7-3.7-18.6-.9-25 6.2l-19.8 22.2c-6.8-1.1-13.8-1.7-20.9-1.7s-14.1 .6-20.9 1.7l-19.8-22.2c-6.3-7.1-16.2-9.9-25-6.2c-5.3 2.3-10.5 4.8-15.6 7.6l-5.2 3c-5.1 3-9.9 6.3-14.6 9.9c-7.6 5.7-10.1 15.7-7.1 24.7l9.3 28.2c-8.8 10.7-16 23-20.9 36.2L315.1 313c-9.3 1.9-16.7 9.1-17.8 18.5c-.8 6.7-1.2 13.5-1.2 20.4s.4 13.7 1.2 20.4c1.1 9.4 8.6 16.6 17.8 18.5l29.1 6.1c5 13.3 12.1 25.5 20.9 36.2l-9.3 28.2c-3 9-.5 19 7.1 24.7c4.7 3.5 9.5 6.8 14.6 9.8l5.4 3.1c5 2.8 10.2 5.3 15.5 7.6c8.7 3.7 18.6 .9 25-6.2l19.8-22.2c6.8 1.1 13.8 1.7 20.9 1.7s14.1-.6 20.9-1.7l19.8 22.2zM464 400c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48z"
+          />
+        </svg>
+      </a>
+    </li>
+  </ul>
+  <div class="flex-none p-2 max-w-[50%]">
+    <nwb-quicksearch-input #search></nwb-quicksearch-input>
+  </div>
+</div>
+<router-outlet></router-outlet>
+
+<ng-template
+  cdkConnectedOverlay
+  [cdkConnectedOverlayOrigin]="overlay"
+  [cdkConnectedOverlayOpen]="isToolOpen"
+  [cdkConnectedOverlayHasBackdrop]="true"
+  (backdropClick)="isToolOpen = false"
+  (detach)="isToolOpen = false"
+>
+  <div class="bg-base-100 p-3 w-80">
+    <div class="form-control w-full">
+      <label class="label">
+        <span class="label-text">Char Level: {{ ctx.level }}</span>
+      </label>
+      <input type="range" min="0" max="60" [(ngModel)]="ctx.level" class="range range-xs" />
+    </div>
+    <div class="form-control w-full">
+      <label class="label">
+        <span class="label-text">Gear Score: {{ ctx.gs }}</span>
+      </label>
+      <input type="range" min="0" max="625" [(ngModel)]="ctx.gs" class="range range-xs" />
+    </div>
+    <div class="form-control w-full">
+      <label class="label cursor-pointer">
+        <span class="label-text">GS Bonus</span>
+        <input type="checkbox" checked="checked" [(ngModel)]="ctx.gsBonus" class="checkbox checkbox-xs" />
+      </label>
+    </div>
+  </div>
+</ng-template>
diff --git a/apps/web/app/pages/database/perks/perks.component.ts b/apps/web/app/pages/database/perks/perks.component.ts
new file mode 100644
index 00000000..efe010f3
--- /dev/null
+++ b/apps/web/app/pages/database/perks/perks.component.ts
@@ -0,0 +1,36 @@
+import { OverlayModule } from '@angular/cdk/overlay'
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { firstValueFrom } from 'rxjs'
+import { NwModule } from '~/nw'
+import { CharacterPreferencesService } from '~/preferences'
+import { DataTableAdapter, DataTableModule } from '~/ui/data-table'
+import { QuicksearchModule } from '~/ui/quicksearch'
+import { PerksTableAdapter } from '~/widgets/adapter'
+import { ExprContextService } from '~/widgets/adapter/exp-context.service'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-perks-page',
+  templateUrl: './perks.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, FormsModule, OverlayModule, NwModule, QuicksearchModule, DataTableModule],
+  host: {
+    class: 'layout-col bg-base-300 rounded-md overflow-clip',
+  },
+  providers: [
+    DataTableAdapter.provideClass(PerksTableAdapter),
+    ExprContextService
+  ]
+})
+export class PerksComponent {
+
+  protected isToolOpen = false
+  public constructor(public ctx: ExprContextService, char: CharacterPreferencesService) {
+    firstValueFrom(char.level$).then((value) => {
+      ctx.level = value
+    })
+  }
+}
diff --git a/apps/web/app/pages/perks/perks-routing.module.ts b/apps/web/app/pages/database/perks/perks.module.ts
similarity index 56%
rename from apps/web/app/pages/perks/perks-routing.module.ts
rename to apps/web/app/pages/database/perks/perks.module.ts
index 7c90ff2b..e855a45d 100644
--- a/apps/web/app/pages/perks/perks-routing.module.ts
+++ b/apps/web/app/pages/database/perks/perks.module.ts
@@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { AttributesTableComponent } from '~/widgets/attributes-table/attributes-table.component'
-import { EmptyComponent } from '~/widgets/empty'
-import { PerksTableComponent } from './perks-table.component'
 
+import { PerksDetailComponent } from './perks-detail.component'
+import { PerksTableComponent } from './perks-table.component'
 import { PerksComponent } from './perks.component'
 
 const routes: Routes = [
@@ -16,25 +15,25 @@ const routes: Routes = [
         pathMatch: 'full',
         redirectTo: 'table',
       },
-      {
-        path: 'attributes',
-        component: AttributesTableComponent,
-      },
       {
         path: 'table',
         component: PerksTableComponent,
-        children: [{
-          path: ':id',
-          component: EmptyComponent
-        }]
+        children: [
+          {
+            path: ':id',
+            component: PerksDetailComponent,
+          },
+        ],
       },
       {
         path: ':category',
         component: PerksTableComponent,
-        children: [{
-          path: ':id',
-          component: EmptyComponent
-        }]
+        children: [
+          {
+            path: ':id',
+            component: PerksDetailComponent,
+          },
+        ],
       },
     ],
   },
@@ -42,6 +41,5 @@ const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
 })
-export class PerksRoutingModule {}
+export class PerksModule {}
diff --git a/apps/web/app/pages/database/poi/index.ts b/apps/web/app/pages/database/poi/index.ts
new file mode 100644
index 00000000..bea6ce2c
--- /dev/null
+++ b/apps/web/app/pages/database/poi/index.ts
@@ -0,0 +1 @@
+export * from './poi.module'
diff --git a/apps/web/app/pages/territories/poi-table-adapter.ts b/apps/web/app/pages/database/poi/poi-table-adapter.ts
similarity index 94%
rename from apps/web/app/pages/territories/poi-table-adapter.ts
rename to apps/web/app/pages/database/poi/poi-table-adapter.ts
index a373ac8a..885ccad3 100644
--- a/apps/web/app/pages/territories/poi-table-adapter.ts
+++ b/apps/web/app/pages/database/poi/poi-table-adapter.ts
@@ -75,6 +75,14 @@ export class PoiTableAdapter extends DataTableAdapter<PoiDefinition> {
             showCondition: true,
           })
         },
+        {
+          field: this.fieldName('LevelRange'),
+          hide: false,
+        },
+        {
+          field: this.fieldName('VitalsCategory'),
+          hide: false,
+        },
       ],
     }
   }
diff --git a/apps/web/app/pages/territories/poi-table.component.html b/apps/web/app/pages/database/poi/poi-table.component.html
similarity index 100%
rename from apps/web/app/pages/territories/poi-table.component.html
rename to apps/web/app/pages/database/poi/poi-table.component.html
diff --git a/apps/web/app/pages/territories/poi-table.component.ts b/apps/web/app/pages/database/poi/poi-table.component.ts
similarity index 87%
rename from apps/web/app/pages/territories/poi-table.component.ts
rename to apps/web/app/pages/database/poi/poi-table.component.ts
index 83c6838f..1d534f8a 100644
--- a/apps/web/app/pages/territories/poi-table.component.ts
+++ b/apps/web/app/pages/database/poi/poi-table.component.ts
@@ -12,9 +12,9 @@ import { PoiTableAdapter } from './poi-table-adapter'
   templateUrl: './poi-table.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CommonModule, NwModule, DataTableModule, RouterModule],
-  providers: [DataTableAdapter.provideClass(PoiTableAdapter)],
+  //providers: [DataTableAdapter.provideClass(PoiTableAdapter)],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-row layout-gap',
   },
 })
 export class PoiTableComponent {
diff --git a/apps/web/app/pages/database/poi/poi.component.html b/apps/web/app/pages/database/poi/poi.component.html
new file mode 100644
index 00000000..062f6a80
--- /dev/null
+++ b/apps/web/app/pages/database/poi/poi.component.html
@@ -0,0 +1,11 @@
+<div class="flex-none flex flex-row bg-base-300 rounded-t-md">
+  <nwb-data-table-categories
+    categoryChildRoute
+    [childRouteIndex]="'table'"
+    class="flex-1"
+  ></nwb-data-table-categories>
+  <div class="flex-none p-2 max-w-[50%]">
+    <nwb-quicksearch-input #search></nwb-quicksearch-input>
+  </div>
+</div>
+<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/database/poi/poi.component.ts b/apps/web/app/pages/database/poi/poi.component.ts
new file mode 100644
index 00000000..a9a61ce0
--- /dev/null
+++ b/apps/web/app/pages/database/poi/poi.component.ts
@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableAdapter, DataTableModule } from '~/ui/data-table'
+import { QuicksearchModule } from '~/ui/quicksearch'
+import { PerksTableAdapter } from '~/widgets/adapter'
+import { ExprContextService } from '~/widgets/adapter/exp-context.service'
+import { PoiTableAdapter } from './poi-table-adapter'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-poi-page',
+  templateUrl: './poi.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, QuicksearchModule, DataTableModule],
+  host: {
+    class: 'layout-col bg-base-300 rounded-md overflow-clip',
+  },
+  providers: [
+    DataTableAdapter.provideClass(PoiTableAdapter),
+    ExprContextService
+  ]
+})
+export class PoiComponent {
+
+  public constructor(public ctx: ExprContextService) {
+
+  }
+}
diff --git a/apps/web/app/pages/database/poi/poi.module.ts b/apps/web/app/pages/database/poi/poi.module.ts
new file mode 100644
index 00000000..96dfe34d
--- /dev/null
+++ b/apps/web/app/pages/database/poi/poi.module.ts
@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { EmptyComponent } from '~/widgets/empty'
+
+import { PoiTableComponent } from './poi-table.component'
+import { PoiComponent } from './poi.component'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PoiComponent,
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'table',
+      },
+      {
+        path: 'table',
+        component: PoiTableComponent,
+        children: [
+          {
+            path: ':id',
+            component: EmptyComponent,
+          },
+        ],
+      },
+      {
+        path: ':category',
+        component: PoiTableComponent,
+        children: [
+          {
+            path: ':id',
+            component: EmptyComponent,
+          },
+        ],
+      },
+    ],
+  },
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+})
+export class PoiModule {}
diff --git a/apps/web/app/pages/status-effects/index.ts b/apps/web/app/pages/database/status-effects/index.ts
similarity index 100%
rename from apps/web/app/pages/status-effects/index.ts
rename to apps/web/app/pages/database/status-effects/index.ts
diff --git a/apps/web/app/pages/database/status-effects/status-effects-detail.component.html b/apps/web/app/pages/database/status-effects/status-effects-detail.component.html
new file mode 100644
index 00000000..65be3ef1
--- /dev/null
+++ b/apps/web/app/pages/database/status-effects/status-effects-detail.component.html
@@ -0,0 +1,8 @@
+<div [nwbStatusEffectDetail]="itemId | async" #detail="effectDetail" class="flex flex-col layout-gap">
+  <nwb-property-grid
+    [rows]="detail.properties$ | async"
+    [numberFormat]="'0.0-4'"
+    class="gap-x-1 font-mono w-full bg-base-100 rounded-md p-3 overflow-auto"
+  >
+  </nwb-property-grid>
+</div>
diff --git a/apps/web/app/pages/database/status-effects/status-effects-detail.component.ts b/apps/web/app/pages/database/status-effects/status-effects-detail.component.ts
new file mode 100644
index 00000000..ab928fd7
--- /dev/null
+++ b/apps/web/app/pages/database/status-effects/status-effects-detail.component.ts
@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common'
+import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { ActivatedRoute, RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { PropertyGridModule } from '~/ui/property-grid'
+import { observeRouteParam } from '~/utils'
+import { StatusEffectDetailModule } from '~/widgets/status-effect-detail'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-status-effects-detail',
+  templateUrl: './status-effects-detail.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule, RouterModule, StatusEffectDetailModule, PropertyGridModule],
+  host: {
+    class: 'layout-content xl:max-w-md p-3',
+  },
+})
+export class AbilitiesDetailComponent {
+  public itemId = observeRouteParam(this.route, 'id')
+
+  public constructor(private route: ActivatedRoute) {
+    //
+  }
+}
diff --git a/apps/web/app/pages/status-effects/status-effects-table.component.html b/apps/web/app/pages/database/status-effects/status-effects-table.component.html
similarity index 82%
rename from apps/web/app/pages/status-effects/status-effects-table.component.html
rename to apps/web/app/pages/database/status-effects/status-effects-table.component.html
index fc74abc8..60788617 100644
--- a/apps/web/app/pages/status-effects/status-effects-table.component.html
+++ b/apps/web/app/pages/database/status-effects/status-effects-table.component.html
@@ -4,7 +4,7 @@
   [categoryRouteParam]
   [detailRoutParam]="'id'"
   [quickFilter]="search.query | async"
-  class="flex-1 rounded-md overflow-clip"
+  class="flex-1"
 ></nwb-data-table>
 
 <router-outlet></router-outlet>
diff --git a/apps/web/app/pages/status-effects/status-effects-table.component.ts b/apps/web/app/pages/database/status-effects/status-effects-table.component.ts
similarity index 52%
rename from apps/web/app/pages/status-effects/status-effects-table.component.ts
rename to apps/web/app/pages/database/status-effects/status-effects-table.component.ts
index a14828c9..55edb325 100644
--- a/apps/web/app/pages/status-effects/status-effects-table.component.ts
+++ b/apps/web/app/pages/database/status-effects/status-effects-table.component.ts
@@ -1,12 +1,18 @@
+import { CommonModule } from '@angular/common'
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'
-import { QuicksearchService } from '~/ui/quicksearch'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableModule } from '~/ui/data-table'
+import { QuicksearchModule, QuicksearchService } from '~/ui/quicksearch'
 
 @Component({
+  standalone: true,
   selector: 'nwb-status-effects-table',
   templateUrl: './status-effects-table.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, QuicksearchModule, DataTableModule],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-col xl:flex-row',
   },
 })
 export class StatusEffectsTableComponent implements OnInit {
diff --git a/apps/web/app/pages/database/status-effects/status-effects.component.html b/apps/web/app/pages/database/status-effects/status-effects.component.html
new file mode 100644
index 00000000..062f6a80
--- /dev/null
+++ b/apps/web/app/pages/database/status-effects/status-effects.component.html
@@ -0,0 +1,11 @@
+<div class="flex-none flex flex-row bg-base-300 rounded-t-md">
+  <nwb-data-table-categories
+    categoryChildRoute
+    [childRouteIndex]="'table'"
+    class="flex-1"
+  ></nwb-data-table-categories>
+  <div class="flex-none p-2 max-w-[50%]">
+    <nwb-quicksearch-input #search></nwb-quicksearch-input>
+  </div>
+</div>
+<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/database/status-effects/status-effects.component.ts b/apps/web/app/pages/database/status-effects/status-effects.component.ts
new file mode 100644
index 00000000..b9e4d148
--- /dev/null
+++ b/apps/web/app/pages/database/status-effects/status-effects.component.ts
@@ -0,0 +1,22 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableAdapter, DataTableModule } from '~/ui/data-table'
+import { QuicksearchModule, QuicksearchService } from '~/ui/quicksearch'
+import { StatusEffectsTableAdapter } from '~/widgets/adapter'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-status-effects',
+  templateUrl: './status-effects.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, QuicksearchModule, DataTableModule],
+  host: {
+    class: 'layout-col bg-base-300 rounded-md overflow-clip',
+  },
+  providers: [DataTableAdapter.provideClass(StatusEffectsTableAdapter), QuicksearchService],
+})
+export class StatusEffectsComponent {
+  //
+}
diff --git a/apps/web/app/pages/status-effects/status-effects-routing.module.ts b/apps/web/app/pages/database/status-effects/status-effects.module.ts
similarity index 66%
rename from apps/web/app/pages/status-effects/status-effects-routing.module.ts
rename to apps/web/app/pages/database/status-effects/status-effects.module.ts
index ab928109..f79e7f28 100644
--- a/apps/web/app/pages/status-effects/status-effects-routing.module.ts
+++ b/apps/web/app/pages/database/status-effects/status-effects.module.ts
@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
+
 import { EmptyComponent } from '~/widgets/empty'
+import { AbilitiesDetailComponent } from './status-effects-detail.component'
 import { StatusEffectsTableComponent } from './status-effects-table.component'
 import { StatusEffectsComponent } from './status-effects.component'
 
@@ -17,18 +19,22 @@ const routes: Routes = [
       {
         path: 'table',
         component: StatusEffectsTableComponent,
-        children: [{
-          path: ':id',
-          component: EmptyComponent
-        }]
+        children: [
+          {
+            path: ':id',
+            component: AbilitiesDetailComponent,
+          },
+        ],
       },
       {
         path: ':category',
         component: StatusEffectsTableComponent,
-        children: [{
-          path: ':id',
-          component: EmptyComponent
-        }]
+        children: [
+          {
+            path: ':id',
+            component: AbilitiesDetailComponent,
+          },
+        ],
       },
     ],
   },
@@ -36,6 +42,5 @@ const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
 })
-export class StatusEffectsRoutingModule {}
+export class StatusEffectsModule {}
diff --git a/apps/web/app/pages/database/vitals/index.ts b/apps/web/app/pages/database/vitals/index.ts
new file mode 100644
index 00000000..98f18116
--- /dev/null
+++ b/apps/web/app/pages/database/vitals/index.ts
@@ -0,0 +1 @@
+export * from './vitals.module'
diff --git a/apps/web/app/pages/vitals/vital.component.html b/apps/web/app/pages/database/vitals/vital.component.html
similarity index 99%
rename from apps/web/app/pages/vitals/vital.component.html
rename to apps/web/app/pages/database/vitals/vital.component.html
index 8357a8d0..618e2961 100644
--- a/apps/web/app/pages/vitals/vital.component.html
+++ b/apps/web/app/pages/database/vitals/vital.component.html
@@ -1,3 +1,4 @@
+
 <ng-container *ngIf="vital$ | async; let vital">
   <nwb-vital-detail [vital]="vital"></nwb-vital-detail>
   <nwb-loot-table [tableId]="vital.LootTableId" [tags]="lootTags$ | async" [enemyLevel]="vital.Level" class="flex-1"></nwb-loot-table>
diff --git a/apps/web/app/pages/vitals/vital.component.scss b/apps/web/app/pages/database/vitals/vital.component.scss
similarity index 100%
rename from apps/web/app/pages/vitals/vital.component.scss
rename to apps/web/app/pages/database/vitals/vital.component.scss
diff --git a/apps/web/app/pages/vitals/vital.component.ts b/apps/web/app/pages/database/vitals/vital.component.ts
similarity index 78%
rename from apps/web/app/pages/vitals/vital.component.ts
rename to apps/web/app/pages/database/vitals/vital.component.ts
index 756bab1d..bf60b4f2 100644
--- a/apps/web/app/pages/vitals/vital.component.ts
+++ b/apps/web/app/pages/database/vitals/vital.component.ts
@@ -1,17 +1,22 @@
+import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
+import { ActivatedRoute, RouterModule } from '@angular/router'
 import { uniq } from 'lodash'
 import { combineLatest, defer, map } from 'rxjs'
-import { NwDbService } from '~/nw'
+import { NwDbService, NwModule } from '~/nw'
 import { getVitalDungeon } from '~/nw/utils'
 import { observeRouteParam } from '~/utils'
+import { LootModule } from '~/widgets/loot'
+import { VitalsFamiliesModule } from '~/widgets/vitals-families'
 
 @Component({
+  standalone: true,
   templateUrl: './vital.component.html',
   styleUrls: ['./vital.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, VitalsFamiliesModule, LootModule],
   host: {
-    class: 'layout-column flex-none max-w-lg gap-4'
+    class: 'layout-col xl:max-w-md layout-pad',
   }
 })
 export class VitalComponent {
diff --git a/apps/web/app/pages/vitals/vitals-table.component.html b/apps/web/app/pages/database/vitals/vitals-table.component.html
similarity index 77%
rename from apps/web/app/pages/vitals/vitals-table.component.html
rename to apps/web/app/pages/database/vitals/vitals-table.component.html
index 93713be0..5418e0b4 100644
--- a/apps/web/app/pages/vitals/vitals-table.component.html
+++ b/apps/web/app/pages/database/vitals/vitals-table.component.html
@@ -1,9 +1,10 @@
 <nwb-data-table
   #table
+  [stateKey]="'vitals-table'"
   [categoryRouteParam]
   [detailRoutParam]="'id'"
   [quickFilter]="search.query | async"
-  class="flex-1 rounded-md overflow-clip"
+  class="flex-1"
 ></nwb-data-table>
 
 <router-outlet></router-outlet>
diff --git a/apps/web/app/pages/vitals/vitals-table.component.ts b/apps/web/app/pages/database/vitals/vitals-table.component.ts
similarity index 52%
rename from apps/web/app/pages/vitals/vitals-table.component.ts
rename to apps/web/app/pages/database/vitals/vitals-table.component.ts
index 8ecef1b6..cbb9b730 100644
--- a/apps/web/app/pages/vitals/vitals-table.component.ts
+++ b/apps/web/app/pages/database/vitals/vitals-table.component.ts
@@ -1,16 +1,21 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { QuicksearchService } from '~/ui/quicksearch';
+import { CommonModule } from '@angular/common'
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableModule } from '~/ui/data-table'
+import { QuicksearchService } from '~/ui/quicksearch'
 
 @Component({
+  standalone: true,
   selector: 'nwb-vitals-table',
   templateUrl: './vitals-table.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, DataTableModule],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-col xl:flex-row',
   },
 })
 export class VitalsTableComponent implements OnInit {
-
   public constructor(public readonly search: QuicksearchService) {
     //
   }
@@ -18,5 +23,4 @@ export class VitalsTableComponent implements OnInit {
   public ngOnInit(): void {
     //
   }
-
 }
diff --git a/apps/web/app/pages/database/vitals/vitals.component.html b/apps/web/app/pages/database/vitals/vitals.component.html
new file mode 100644
index 00000000..062f6a80
--- /dev/null
+++ b/apps/web/app/pages/database/vitals/vitals.component.html
@@ -0,0 +1,11 @@
+<div class="flex-none flex flex-row bg-base-300 rounded-t-md">
+  <nwb-data-table-categories
+    categoryChildRoute
+    [childRouteIndex]="'table'"
+    class="flex-1"
+  ></nwb-data-table-categories>
+  <div class="flex-none p-2 max-w-[50%]">
+    <nwb-quicksearch-input #search></nwb-quicksearch-input>
+  </div>
+</div>
+<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/database/vitals/vitals.component.ts b/apps/web/app/pages/database/vitals/vitals.component.ts
new file mode 100644
index 00000000..d34f5fa1
--- /dev/null
+++ b/apps/web/app/pages/database/vitals/vitals.component.ts
@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { DataTableAdapter, DataTableModule } from '~/ui/data-table'
+import { QuicksearchModule, QuicksearchService } from '~/ui/quicksearch'
+import { VitalsTableAdapter } from '~/widgets/adapter'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-vitals-page',
+  templateUrl: './vitals.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, DataTableModule, QuicksearchModule],
+  host: {
+    class: 'layout-col bg-base-300 rounded-md overflow-clip',
+  },
+  providers: [DataTableAdapter.provideClass(VitalsTableAdapter), QuicksearchService],
+})
+export class VitalsComponent {}
diff --git a/apps/web/app/pages/vitals/vitals-routing.module.ts b/apps/web/app/pages/database/vitals/vitals.module.ts
similarity index 63%
rename from apps/web/app/pages/vitals/vitals-routing.module.ts
rename to apps/web/app/pages/database/vitals/vitals.module.ts
index cf32003e..49e2a0b8 100644
--- a/apps/web/app/pages/vitals/vitals-routing.module.ts
+++ b/apps/web/app/pages/database/vitals/vitals.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { VitalComponent } from './vital.component'
-import { VitalsFamiliesComponent } from './vitals-families.component'
+
 import { VitalsTableComponent } from './vitals-table.component'
 import { VitalsComponent } from './vitals.component'
 
@@ -15,33 +15,31 @@ const routes: Routes = [
         pathMatch: 'full',
         redirectTo: 'table',
       },
-      {
-        path: 'families',
-        component: VitalsFamiliesComponent,
-      },
       {
         path: 'table',
         component: VitalsTableComponent,
-        children: [{
-          path: ':id',
-          component: VitalComponent
-        }]
+        children: [
+          {
+            path: ':id',
+            component: VitalComponent,
+          },
+        ],
       },
       {
         path: ':category',
         component: VitalsTableComponent,
-        children: [{
-          path: ':id',
-          component: VitalComponent
-        }]
+        children: [
+          {
+            path: ':id',
+            component: VitalComponent,
+          },
+        ],
       },
     ],
   },
-
 ]
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
 })
-export class VitalsRoutingModule {}
+export class VitalsModule {}
diff --git a/apps/web/app/pages/dev/dev.component.html b/apps/web/app/pages/dev/dev.component.html
index bf688d48..3868ca8e 100644
--- a/apps/web/app/pages/dev/dev.component.html
+++ b/apps/web/app/pages/dev/dev.component.html
@@ -1,4 +1,4 @@
-<div class="w-56 flex flex-col gap-4">
+<div class="w-56 flex flex-col layout-gap">
   <ul class="menu bg-base-100 rounded-md">
     <li [routerLinkActive]="'bordered'" >
       <a [routerLink]="'loottables'">Loottables</a>
diff --git a/apps/web/app/pages/dev/dev.component.ts b/apps/web/app/pages/dev/dev.component.ts
index 953cccd5..156d4c02 100644
--- a/apps/web/app/pages/dev/dev.component.ts
+++ b/apps/web/app/pages/dev/dev.component.ts
@@ -7,7 +7,7 @@ import { RouterModule } from "@angular/router";
   templateUrl: './dev.component.html',
   imports: [CommonModule, RouterModule],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-row layout-gap',
   },
 })
 export class DevComponent {
diff --git a/apps/web/app/pages/dev/expressions/expressions.component.ts b/apps/web/app/pages/dev/expressions/expressions.component.ts
index 3da5503b..40d9c20d 100644
--- a/apps/web/app/pages/dev/expressions/expressions.component.ts
+++ b/apps/web/app/pages/dev/expressions/expressions.component.ts
@@ -8,7 +8,7 @@ import { NwDbService } from '~/nw'
   templateUrl: './expressions.component.html',
   imports: [CommonModule],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-row layout-gap',
   },
 })
 export class ExpressionsComponent {
diff --git a/apps/web/app/pages/dev/lootbuckets/lootbuckets.component.ts b/apps/web/app/pages/dev/lootbuckets/lootbuckets.component.ts
index 77f7a114..eaa86e45 100644
--- a/apps/web/app/pages/dev/lootbuckets/lootbuckets.component.ts
+++ b/apps/web/app/pages/dev/lootbuckets/lootbuckets.component.ts
@@ -8,7 +8,7 @@ import { NwDbService } from '~/nw'
   templateUrl: './lootbuckets.component.html',
   imports: [CommonModule],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-row layout-gap',
   },
 })
 export class LootbucketsComponent {
diff --git a/apps/web/app/pages/dev/loottables/loottables.component.ts b/apps/web/app/pages/dev/loottables/loottables.component.ts
index 3541fff1..f37d5c03 100644
--- a/apps/web/app/pages/dev/loottables/loottables.component.ts
+++ b/apps/web/app/pages/dev/loottables/loottables.component.ts
@@ -8,7 +8,7 @@ import { NwDbService } from '~/nw'
   templateUrl: './loottables.component.html',
   imports: [CommonModule],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-row layout-gap',
   },
 })
 export class LoottablesComponent {
diff --git a/apps/web/app/pages/dungeons/dungeons.component.html b/apps/web/app/pages/dungeons/dungeons.component.html
deleted file mode 100644
index 84537792..00000000
--- a/apps/web/app/pages/dungeons/dungeons.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="w-56 flex flex-col gap-4">
-  <ul class="menu bg-base-100 rounded-md">
-    <li *ngFor="let item of dungeon$ | async"  [routerLinkActive]="'bordered'" >
-      <a [routerLink]="item.GameModeId">
-        <span [nwText]="item.DisplayName"></span>
-      </a>
-    </li>
-  </ul>
-</div>
-<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/dungeons/dungeons.component.ts b/apps/web/app/pages/dungeons/dungeons.component.ts
deleted file mode 100644
index 62b74e57..00000000
--- a/apps/web/app/pages/dungeons/dungeons.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { DungeonsService } from './dungeons.service'
-
-@Component({
-  selector: 'nwb-dungeons',
-  templateUrl: './dungeons.component.html',
-  styleUrls: ['./dungeons.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'layout-row gap-4',
-  },
-})
-export class DungeonsComponent {
-
-  public get dungeon$() {
-    return this.ds.dungeon$
-  }
-
-  public constructor(private ds: DungeonsService) {
-    //
-  }
-
-}
diff --git a/apps/web/app/pages/dungeons/dungeons.module.ts b/apps/web/app/pages/dungeons/dungeons.module.ts
deleted file mode 100644
index 78321bae..00000000
--- a/apps/web/app/pages/dungeons/dungeons.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-
-import { DungeonsRoutingModule } from './dungeons-routing.module'
-import { DungeonsComponent } from './dungeons.component'
-import { ItemDetailModule } from '~/widgets/item-detail'
-import { NwModule } from '~/nw';
-import { FormsModule } from '@angular/forms';
-import { DungeonDetailComponent } from './dungeon-detail.component';
-import { VitalsFamiliesModule } from '~/widgets/vitals-families'
-
-@NgModule({
-  imports: [CommonModule, NwModule, DungeonsRoutingModule, ItemDetailModule, FormsModule, VitalsFamiliesModule
-  ],
-  declarations: [DungeonsComponent, DungeonDetailComponent],
-})
-export class DungeonsModule {}
diff --git a/apps/web/app/pages/dungeons/index.ts b/apps/web/app/pages/dungeons/index.ts
deleted file mode 100644
index fa10b438..00000000
--- a/apps/web/app/pages/dungeons/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './dungeons-routing.module'
-export * from './dungeons.module'
diff --git a/apps/web/app/pages/gearbuilder/gearbuilder.component.html b/apps/web/app/pages/gearbuilder/gearbuilder.component.html
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/web/app/pages/gearbuilder/gearbuilder.component.ts b/apps/web/app/pages/gearbuilder/gearbuilder.component.ts
deleted file mode 100644
index cbd6c0f0..00000000
--- a/apps/web/app/pages/gearbuilder/gearbuilder.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
-  standalone: true,
-  selector: 'nwb-gearbuilder-page',
-  templateUrl: './gearbuilder.component.html',
-  host: {
-    class: 'block'
-  }
-})
-export class GearbuilderComponent {
-
-}
diff --git a/apps/web/app/pages/gearbuilder/gearbuilder.module.ts b/apps/web/app/pages/gearbuilder/gearbuilder.module.ts
deleted file mode 100644
index e69de29b..00000000
diff --git "a/apps/web/app/pages/gearbuilder/gearbuilder\303\237routes.module.ts" "b/apps/web/app/pages/gearbuilder/gearbuilder\303\237routes.module.ts"
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/web/app/pages/home/home.component.html b/apps/web/app/pages/home/home.component.html
deleted file mode 100644
index 5f2c53ff..00000000
--- a/apps/web/app/pages/home/home.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>home works!</p>
diff --git a/apps/web/app/pages/home/home.component.scss b/apps/web/app/pages/home/home.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/web/app/pages/home/home.component.spec.ts b/apps/web/app/pages/home/home.component.spec.ts
deleted file mode 100644
index 2c5a1726..00000000
--- a/apps/web/app/pages/home/home.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HomeComponent } from './home.component';
-
-describe('HomeComponent', () => {
-  let component: HomeComponent;
-  let fixture: ComponentFixture<HomeComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ HomeComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HomeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/apps/web/app/pages/home/home.component.ts b/apps/web/app/pages/home/home.component.ts
deleted file mode 100644
index e1b3c5cf..00000000
--- a/apps/web/app/pages/home/home.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
-})
-export class HomeComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/apps/web/app/pages/home/home.module.ts b/apps/web/app/pages/home/home.module.ts
deleted file mode 100644
index de1c7cb6..00000000
--- a/apps/web/app/pages/home/home.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-
-import { HomeComponent } from './home.component'
-import { HomeRoutingModule } from './home.routing'
-
-@NgModule({
-  imports: [CommonModule, HomeRoutingModule],
-  declarations: [HomeComponent],
-})
-export class HomeModule {}
diff --git a/apps/web/app/pages/home/index.ts b/apps/web/app/pages/home/index.ts
deleted file mode 100644
index e58fdd5e..00000000
--- a/apps/web/app/pages/home/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './home.component'
-export * from './home.module'
-export * from './home.routing'
diff --git a/apps/web/app/pages/housing/housing-detail.component.html b/apps/web/app/pages/housing/housing-detail.component.html
deleted file mode 100644
index 56780f58..00000000
--- a/apps/web/app/pages/housing/housing-detail.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<nwb-item-detail
-  [itemId]="itemId | async"
-  [enableDescription]="true"
-  [enableRecipe]="true"
-  [enablePerks]="true"
-  [enableInfo]="true"
-></nwb-item-detail>
diff --git a/apps/web/app/pages/housing/housing.component.html b/apps/web/app/pages/housing/housing.component.html
deleted file mode 100644
index a590b8e1..00000000
--- a/apps/web/app/pages/housing/housing.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="w-36 xl:w-40 flex flex-col gap-4">
-  <nwb-quicksearch-input #search></nwb-quicksearch-input>
-  <nwb-data-table-categories
-    categoryChildRoute
-    [childRouteIndex]="'table'"
-    class="bg-base-100 rounded-md overflow-y-auto"
-  ></nwb-data-table-categories>
-</div>
-<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/housing/housing.component.ts b/apps/web/app/pages/housing/housing.component.ts
deleted file mode 100644
index 5fc8a2f6..00000000
--- a/apps/web/app/pages/housing/housing.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { DataTableAdapter } from '~/ui/data-table'
-import { QuicksearchService } from '~/ui/quicksearch'
-import { HousingAdapterService } from './housing-table-adapter'
-
-@Component({
-  selector: 'nwb-housing',
-  templateUrl: './housing.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'layout-row gap-4',
-  },
-  providers: [DataTableAdapter.provideClass(HousingAdapterService), QuicksearchService],
-})
-export class HousingComponent {
-  //
-}
diff --git a/apps/web/app/pages/housing/housing.module.ts b/apps/web/app/pages/housing/housing.module.ts
deleted file mode 100644
index 68a585ce..00000000
--- a/apps/web/app/pages/housing/housing.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-
-import { HousingRoutingModule } from './housing-routing.module'
-import { HousingComponent } from './housing.component'
-import { HousingDetailComponent } from './housing-detail.component'
-import { PropertyGridModule } from '~/ui/property-grid'
-import { FormsModule } from '@angular/forms'
-import { ItemDetailModule } from '~/widgets/item-detail'
-import { DataTableModule } from '~/ui/data-table'
-import { QuicksearchModule } from '~/ui/quicksearch';
-import { HousingTableComponent } from './housing-table.component'
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    HousingRoutingModule,
-    DataTableModule,
-    PropertyGridModule,
-    ItemDetailModule,
-    QuicksearchModule
-  ],
-  declarations: [HousingComponent, HousingDetailComponent, HousingTableComponent],
-})
-export class HousingModule {}
diff --git a/apps/web/app/pages/items/index.ts b/apps/web/app/pages/items/index.ts
deleted file mode 100644
index 4f224087..00000000
--- a/apps/web/app/pages/items/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './items-routing.module'
-export * from './items.module'
diff --git a/apps/web/app/pages/items/item.component.html b/apps/web/app/pages/items/item.component.html
deleted file mode 100644
index 56780f58..00000000
--- a/apps/web/app/pages/items/item.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<nwb-item-detail
-  [itemId]="itemId | async"
-  [enableDescription]="true"
-  [enableRecipe]="true"
-  [enablePerks]="true"
-  [enableInfo]="true"
-></nwb-item-detail>
diff --git a/apps/web/app/pages/items/items-table.component.ts b/apps/web/app/pages/items/items-table.component.ts
deleted file mode 100644
index b5337113..00000000
--- a/apps/web/app/pages/items/items-table.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core'
-import { QuicksearchService } from '~/ui/quicksearch'
-
-@Component({
-  selector: 'nwb-items-table',
-  templateUrl: './items-table.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'layout-row gap-4',
-  },
-})
-export class ItemsTableComponent {
-  public constructor(public search: QuicksearchService) {
-    //
-  }
-}
diff --git a/apps/web/app/pages/items/items.component.html b/apps/web/app/pages/items/items.component.html
deleted file mode 100644
index a590b8e1..00000000
--- a/apps/web/app/pages/items/items.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="w-36 xl:w-40 flex flex-col gap-4">
-  <nwb-quicksearch-input #search></nwb-quicksearch-input>
-  <nwb-data-table-categories
-    categoryChildRoute
-    [childRouteIndex]="'table'"
-    class="bg-base-100 rounded-md overflow-y-auto"
-  ></nwb-data-table-categories>
-</div>
-<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/items/items.component.ts b/apps/web/app/pages/items/items.component.ts
deleted file mode 100644
index cddf2716..00000000
--- a/apps/web/app/pages/items/items.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { DataTableAdapter } from '~/ui/data-table'
-import { QuicksearchService } from '~/ui/quicksearch'
-import { ItemsTableAdapter } from './items-table-adapter'
-
-@Component({
-  selector: 'nwb-items',
-  templateUrl: './items.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'layout-row gap-4',
-  },
-  providers: [DataTableAdapter.provideClass(ItemsTableAdapter), QuicksearchService],
-})
-export class ItemsComponent {
-  //
-}
diff --git a/apps/web/app/pages/items/items.module.ts b/apps/web/app/pages/items/items.module.ts
deleted file mode 100644
index 0b81deb1..00000000
--- a/apps/web/app/pages/items/items.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-
-import { ItemsRoutingModule } from './items-routing.module'
-import { ItemsComponent } from './items.component'
-import { ItemDetailModule } from '~/widgets/item-detail'
-import { ItemComponent } from './item.component'
-import { FormsModule } from '@angular/forms'
-import { DataTableModule } from '~/ui/data-table'
-import { QuicksearchModule } from '~/ui/quicksearch'
-import { ItemsTableComponent } from './items-table.component'
-
-@NgModule({
-  imports: [CommonModule, FormsModule, ItemsRoutingModule, DataTableModule, ItemDetailModule, QuicksearchModule],
-  declarations: [ItemsComponent, ItemComponent, ItemsTableComponent],
-})
-export class ItemsModule {}
diff --git a/apps/web/app/pages/misc/about/about.component.html b/apps/web/app/pages/misc/about/about.component.html
new file mode 100644
index 00000000..de7214b1
--- /dev/null
+++ b/apps/web/app/pages/misc/about/about.component.html
@@ -0,0 +1,46 @@
+<footer class="footer footer-center p-10 text-neutral-content rounded-md">
+  <div>
+    <img src="assets/icons/favicon.png" class="w-20 mb-4" />
+
+    <p class="font-bold">
+      New World Buddy
+      <br />
+      Version {{version}}
+      <br />
+      Game Version {{gameVersion}}
+    </p>
+    <p>
+      For personal and fair use purposes
+      <br />
+      We are not affiliated by Amazon or Amazon Game Studios
+      <br />
+      Game content is used under the
+      <a
+        href="https://www.amazon.com/gp/help/customer/display.html?nodeId=GNX7GA7HXVL9V8XZ&pop-up=1"
+        target="_blank"
+        class="text-primary"
+      >
+        Content Usage Policy
+      </a>
+      from
+      <a href="https://www.newworld.com/en-us/legal" target="_blank" class="text-primary">newworld.com</a>
+      <br />
+      Item popovers used from
+      <a
+        href="https://nwdb.info/"
+        target="_blank"
+        class="text-primary"
+      >
+        New World Database
+      </a>
+    </p>
+  </div>
+  <div class="flex">
+    <a href="https://github.com/giniedp/nw-buddy" target="_blank" class="tooltip" data-tip="Github">
+      <svg class="w-8 h-8" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+    </a>
+    <a href=" https://discord.gg/PWxUwUagVX" target="_blank" class="tooltip" data-tip="Discord">
+      <svg class="w-8 h-8" viewBox="0 0 640 512"><path fill="currentColor" d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
+    </a>
+  </div>
+</footer>
diff --git a/apps/web/app/pages/about/about.component.ts b/apps/web/app/pages/misc/about/about.component.ts
similarity index 64%
rename from apps/web/app/pages/about/about.component.ts
rename to apps/web/app/pages/misc/about/about.component.ts
index 556058f2..882cdfad 100644
--- a/apps/web/app/pages/about/about.component.ts
+++ b/apps/web/app/pages/misc/about/about.component.ts
@@ -1,13 +1,17 @@
+import { CommonModule } from '@angular/common'
 import { Component, OnInit } from '@angular/core'
 import { APP_CONFIG } from 'apps/web/environments/environment'
 
 @Component({
-  selector: 'nwb-about',
+  standalone: true,
+  selector: 'nwb-about-page',
   templateUrl: './about.component.html',
-  styleUrls: ['./about.component.scss']
+  imports: [CommonModule],
+  host: {
+    class: 'layout-col'
+  }
 })
 export class AboutComponent implements OnInit {
-
   public get version() {
     return APP_CONFIG.version
   }
@@ -17,13 +21,10 @@ export class AboutComponent implements OnInit {
     if (APP_CONFIG.isPTR) {
       return `Public Test Realm ${version}`
     }
-    return '1.6.6'
-    // return APP_CONFIG.version.split('-')[0]
+    return APP_CONFIG.version.split('-')[0]
   }
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }
diff --git a/apps/web/app/pages/home/home.routing.ts b/apps/web/app/pages/misc/about/about.module.ts
similarity index 51%
rename from apps/web/app/pages/home/home.routing.ts
rename to apps/web/app/pages/misc/about/about.module.ts
index f808824d..20c9bbec 100644
--- a/apps/web/app/pages/home/home.routing.ts
+++ b/apps/web/app/pages/misc/about/about.module.ts
@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { HomeComponent } from './home.component'
 
-const routes: Routes = [{ path: '', component: HomeComponent }]
+import { AboutComponent } from './about.component'
+
+const routes: Routes = [{ path: '', component: AboutComponent }]
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
 })
-export class HomeRoutingModule {}
+export class AboutModule {}
diff --git a/apps/web/app/pages/misc/about/index.ts b/apps/web/app/pages/misc/about/index.ts
new file mode 100644
index 00000000..ee0587f0
--- /dev/null
+++ b/apps/web/app/pages/misc/about/index.ts
@@ -0,0 +1 @@
+export * from './about.module'
diff --git a/apps/web/app/pages/misc/links/index.ts b/apps/web/app/pages/misc/links/index.ts
new file mode 100644
index 00000000..cc30b7a1
--- /dev/null
+++ b/apps/web/app/pages/misc/links/index.ts
@@ -0,0 +1 @@
+export * from './links.module'
diff --git a/apps/web/app/pages/misc/links/links.component.html b/apps/web/app/pages/misc/links/links.component.html
new file mode 100644
index 00000000..23b1bc46
--- /dev/null
+++ b/apps/web/app/pages/misc/links/links.component.html
@@ -0,0 +1,11 @@
+<div class="flex flex-col bg-base-300 rounded-md p-4 gap-4 w-80">
+  <div *ngFor="let it of links">
+    <div class="text-lg">
+      <b>{{ it.name || it.url }}</b>
+    </div>
+    <div class="text-sm opacity-50">{{ it.description }}</div>
+    <a [href]="it.url" target="_blank" class="link link-primary">
+      <div class="text-sm opacity-50">{{ it.url }}</div>
+    </a>
+  </div>
+</div>
diff --git a/apps/web/app/pages/misc/links/links.component.ts b/apps/web/app/pages/misc/links/links.component.ts
new file mode 100644
index 00000000..3c40a137
--- /dev/null
+++ b/apps/web/app/pages/misc/links/links.component.ts
@@ -0,0 +1,71 @@
+import { CommonModule } from '@angular/common'
+import { Component } from '@angular/core'
+
+export const LINKS = [
+  {
+    name: 'New World Database',
+    description: 'New World Database contains all the information about items, quests, crafting recipes, perks, abilities, population numbers and much more',
+    url: 'https://nwdb.info',
+  },
+  {
+    name: 'New World Tools',
+    description: 'Damage calculator for New World. Try out item, stat, and mastery combinations and see how much you\'d be hitting for.',
+    url: 'https://www.nw-tools.info',
+  },
+  {
+    name: 'gaming.tools',
+    image: 'https://gaming.tools/newworld/images/trade-skills/armoring.png',
+    description: 'Find the best crafting options to level up your trade skills, and most optimized crafting calculators for all craftable items in New World.',
+    url: 'https://gaming.tools/newworld'
+  },
+  {
+    name: 'New World Exchange',
+    image: 'https://webstatic.ams3.digitaloceanspaces.com/logo512.png',
+    description: 'New World Exchange is a data analytics website for New World\'s trading data',
+    url: 'https://new-world.exchange'
+  },
+  {
+    name: 'New World Market Prices',
+    image: '',
+    description: 'Pricing data sourced from our community of Market Watchers.',
+    url: 'https://nwmarketprices.com',
+  },
+  {
+    name: 'NewWorldFans.com',
+    image: 'https://newworldfans.com/og-card-fallback.jpg',
+    description: 'Builds, Guides, Database & Tools for Amazon\'s New World MMO',
+    url: 'https://newworldfans.com'
+  },
+  {
+    name: '',
+    image: '',
+    description: '',
+    url: 'https://www.newworld-map.com'
+  },
+  {
+    name: 'New World Interactive Map | Map Genie',
+    image: 'https://cdn.mapgenie.io/images/games/new-world/preview.jpg',
+    description: 'New World MMO Map - All Resources, Chests, Lore Documents, Essences, Boss farming spots & more! Use the progress tracker to get 100%!',
+    url: 'https://mapgenie.io/new-world'
+  },
+  {
+    name: 'RaidPlan.io',
+    image: 'https://raidplan.io/android-chrome-192x192.png',
+    description: 'Create and share war plans for New World!',
+    url: 'https://raidplan.io/newworld'
+  },
+]
+
+
+@Component({
+  standalone: true,
+  selector: 'nwb-links-page',
+  templateUrl: './links.component.html',
+  imports: [CommonModule],
+  host: {
+    class: 'layout-content flex flex-col items-center'
+  }
+})
+export class LinksComponent {
+  protected links = LINKS
+}
diff --git a/apps/web/app/pages/misc/links/links.module.ts b/apps/web/app/pages/misc/links/links.module.ts
new file mode 100644
index 00000000..52683ef8
--- /dev/null
+++ b/apps/web/app/pages/misc/links/links.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+
+import { LinksComponent } from './links.component'
+
+const routes: Routes = [{ path: '', component: LinksComponent }]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+})
+export class LinksModule {}
diff --git a/apps/web/app/pages/not-found/index.ts b/apps/web/app/pages/misc/not-found/index.ts
similarity index 100%
rename from apps/web/app/pages/not-found/index.ts
rename to apps/web/app/pages/misc/not-found/index.ts
diff --git a/apps/web/app/pages/not-found/not-found-routing.module.ts b/apps/web/app/pages/misc/not-found/not-found-routing.module.ts
similarity index 100%
rename from apps/web/app/pages/not-found/not-found-routing.module.ts
rename to apps/web/app/pages/misc/not-found/not-found-routing.module.ts
diff --git a/apps/web/app/pages/not-found/not-found.component.html b/apps/web/app/pages/misc/not-found/not-found.component.html
similarity index 100%
rename from apps/web/app/pages/not-found/not-found.component.html
rename to apps/web/app/pages/misc/not-found/not-found.component.html
diff --git a/apps/web/app/pages/not-found/not-found.component.scss b/apps/web/app/pages/misc/not-found/not-found.component.scss
similarity index 100%
rename from apps/web/app/pages/not-found/not-found.component.scss
rename to apps/web/app/pages/misc/not-found/not-found.component.scss
diff --git a/apps/web/app/pages/not-found/not-found.component.ts b/apps/web/app/pages/misc/not-found/not-found.component.ts
similarity index 100%
rename from apps/web/app/pages/not-found/not-found.component.ts
rename to apps/web/app/pages/misc/not-found/not-found.component.ts
diff --git a/apps/web/app/pages/misc/not-found/not-found.module.ts b/apps/web/app/pages/misc/not-found/not-found.module.ts
new file mode 100644
index 00000000..c3af2b73
--- /dev/null
+++ b/apps/web/app/pages/misc/not-found/not-found.module.ts
@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+
+import { NotFoundRoutingModule } from './not-found-routing.module'
+import { NotFoundComponent } from './not-found.component'
+
+@NgModule({
+  declarations: [NotFoundComponent],
+  imports: [CommonModule, NotFoundRoutingModule],
+})
+export class NotFoundModule {}
diff --git a/apps/web/app/pages/preferences/index.ts b/apps/web/app/pages/misc/preferences/index.ts
similarity index 100%
rename from apps/web/app/pages/preferences/index.ts
rename to apps/web/app/pages/misc/preferences/index.ts
diff --git a/apps/web/app/pages/preferences/nw-marketprices-importer.component.html b/apps/web/app/pages/misc/preferences/nw-marketprices-importer.component.html
similarity index 100%
rename from apps/web/app/pages/preferences/nw-marketprices-importer.component.html
rename to apps/web/app/pages/misc/preferences/nw-marketprices-importer.component.html
diff --git a/apps/web/app/pages/preferences/nw-marketprices-importer.component.ts b/apps/web/app/pages/misc/preferences/nw-marketprices-importer.component.ts
similarity index 100%
rename from apps/web/app/pages/preferences/nw-marketprices-importer.component.ts
rename to apps/web/app/pages/misc/preferences/nw-marketprices-importer.component.ts
diff --git a/apps/web/app/pages/misc/preferences/preferences.component.html b/apps/web/app/pages/misc/preferences/preferences.component.html
new file mode 100644
index 00000000..0a39e326
--- /dev/null
+++ b/apps/web/app/pages/misc/preferences/preferences.component.html
@@ -0,0 +1,25 @@
+<div class="w-80 bg-base-100 rounded-md p-4">
+  <div class="form-control w-full">
+    <button class="btn w-full mt-4" (click)="exportPreferences()">Export Preferences</button>
+    <label class="label">
+      <span class="label-text-alt">Exports user data e.g. favourites, item prices etc.</span>
+    </label>
+  </div>
+
+  <div class="form-control w-full">
+    <button class="btn w-full mt-4" (click)="importPreferences()">Import Preferences</button>
+    <label class="label">
+      <span class="label-text-alt">Imports previously exported user data</span>
+    </label>
+  </div>
+
+  <div class="form-control w-full">
+    <button class="btn w-full mt-4" (click)="clearPrices()">Clear Prices</button>
+    <label class="label">
+      <span class="label-text-alt">Clears all item prices</span>
+    </label>
+  </div>
+
+  <nw-marketprices-importer class="w-full mt-4"></nw-marketprices-importer>
+</div>
+
diff --git a/apps/web/app/pages/preferences/preferences.component.scss b/apps/web/app/pages/misc/preferences/preferences.component.scss
similarity index 100%
rename from apps/web/app/pages/preferences/preferences.component.scss
rename to apps/web/app/pages/misc/preferences/preferences.component.scss
diff --git a/apps/web/app/pages/preferences/preferences.component.ts b/apps/web/app/pages/misc/preferences/preferences.component.ts
similarity index 92%
rename from apps/web/app/pages/preferences/preferences.component.ts
rename to apps/web/app/pages/misc/preferences/preferences.component.ts
index 33391b5a..541ee7b3 100644
--- a/apps/web/app/pages/preferences/preferences.component.ts
+++ b/apps/web/app/pages/misc/preferences/preferences.component.ts
@@ -7,11 +7,14 @@ import { NwPricesImporterComponent } from './nw-marketprices-importer.component'
 
 @Component({
   standalone: true,
-  selector: 'nwb-preferences',
+  selector: 'nwb-preferences-page',
   templateUrl: './preferences.component.html',
   styleUrls: ['./preferences.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, NwPricesImporterComponent]
+  imports: [CommonModule, NwPricesImporterComponent],
+  host: {
+    class: 'layout-content flex flex-col items-center'
+  }
 })
 export class PreferencesComponent implements OnInit {
   public constructor(
diff --git a/apps/web/app/pages/misc/preferences/preferences.module.ts b/apps/web/app/pages/misc/preferences/preferences.module.ts
new file mode 100644
index 00000000..f2cee98b
--- /dev/null
+++ b/apps/web/app/pages/misc/preferences/preferences.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core'
+
+import { RouterModule, Routes } from '@angular/router'
+import { PreferencesComponent } from './preferences.component'
+
+const routes: Routes = [{ path: '', component: PreferencesComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+})
+export class PreferencesModule {}
diff --git a/apps/web/app/pages/not-found/not-found.component.spec.ts b/apps/web/app/pages/not-found/not-found.component.spec.ts
deleted file mode 100644
index 9d41c99a..00000000
--- a/apps/web/app/pages/not-found/not-found.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NotFoundComponent } from './not-found.component';
-
-describe('NotFoundComponent', () => {
-  let component: NotFoundComponent;
-  let fixture: ComponentFixture<NotFoundComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ NotFoundComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(NotFoundComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/apps/web/app/pages/not-found/not-found.module.ts b/apps/web/app/pages/not-found/not-found.module.ts
deleted file mode 100644
index 3153e282..00000000
--- a/apps/web/app/pages/not-found/not-found.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { NotFoundRoutingModule } from './not-found-routing.module';
-import { NotFoundComponent } from './not-found.component';
-
-
-@NgModule({
-  declarations: [
-    NotFoundComponent
-  ],
-  imports: [
-    CommonModule,
-    NotFoundRoutingModule
-  ]
-})
-export class NotFoundModule { }
diff --git a/apps/web/app/pages/perks/index.ts b/apps/web/app/pages/perks/index.ts
deleted file mode 100644
index a4ce0c22..00000000
--- a/apps/web/app/pages/perks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './perks-routing.module'
-export * from './perks.module'
diff --git a/apps/web/app/pages/perks/perks-table.component.ts b/apps/web/app/pages/perks/perks-table.component.ts
deleted file mode 100644
index c3a95841..00000000
--- a/apps/web/app/pages/perks/perks-table.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core'
-import { QuicksearchService } from '~/ui/quicksearch'
-
-@Component({
-  templateUrl: './perks-table.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'layout-row gap-4',
-  },
-})
-export class PerksTableComponent {
-  public constructor(public search: QuicksearchService) {
-    //
-  }
-}
diff --git a/apps/web/app/pages/perks/perks.component.html b/apps/web/app/pages/perks/perks.component.html
deleted file mode 100644
index aafa012a..00000000
--- a/apps/web/app/pages/perks/perks.component.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<div class="w-36 xl:w-40 flex flex-col gap-4">
-  <nwb-quicksearch-input #search></nwb-quicksearch-input>
-  <div class="bg-base-100 rounded-md overflow-y-auto p-2">
-    <div class="form-control w-full">
-      <label class="label">
-        <span class="label-text">Char Level: {{ctx.level}}</span>
-      </label>
-      <input type="range"  min="0" max="60" [(ngModel)]="ctx.level" class="range range-xs" />
-    </div>
-    <div class="form-control w-full">
-      <label class="label">
-        <span class="label-text">Gear Score: {{ctx.gs}}</span>
-      </label>
-      <input type="range" min="0" max="625" [(ngModel)]="ctx.gs" class="range range-xs" />
-    </div>
-    <div class="form-control w-full">
-      <label class="label cursor-pointer">
-        <span class="label-text">GS Bonus</span>
-        <input type="checkbox" checked="checked"  [(ngModel)]="ctx.gsBonus" class="checkbox checkbox-xs" />
-      </label>
-    </div>
-
-  </div>
-  <nwb-data-table-categories
-    categoryChildRoute
-    [childRouteIndex]="'table'"
-    class="bg-base-100 rounded-md overflow-y-auto"
-  ></nwb-data-table-categories>
-  <ul class="menu menu-compact xl:menu-normal bg-base-100 rounded-md">
-    <li [routerLinkActive]="'bordered'">
-      <a [routerLink]="['attributes']"> Attribute Mods </a>
-    </li>
-  </ul>
-</div>
-<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/perks/perks.component.ts b/apps/web/app/pages/perks/perks.component.ts
deleted file mode 100644
index f734562d..00000000
--- a/apps/web/app/pages/perks/perks.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { DataTableAdapter } from '~/ui/data-table'
-import { ExprContextService } from './exp-context.service'
-import { PerksAdapterService } from './perks-table-adapter'
-
-@Component({
-  selector: 'nwb-perks',
-  templateUrl: './perks.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'layout-row gap-4',
-  },
-  providers: [
-    DataTableAdapter.provideClass(PerksAdapterService),
-    ExprContextService
-  ]
-})
-export class PerksComponent {
-
-  public constructor(public ctx: ExprContextService) {
-
-  }
-}
diff --git a/apps/web/app/pages/perks/perks.module.ts b/apps/web/app/pages/perks/perks.module.ts
deleted file mode 100644
index 98e99739..00000000
--- a/apps/web/app/pages/perks/perks.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-
-import { PerksRoutingModule } from './perks-routing.module'
-import { PerksComponent } from './perks.component'
-import { NwModule } from '~/nw'
-import { DataTableModule } from '~/ui/data-table'
-import { QuicksearchModule } from '~/ui/quicksearch';
-import { PerksTableComponent } from './perks-table.component';
-import { AttributesTableModule } from '~/widgets/attributes-table'
-import { FormsModule } from '@angular/forms'
-
-@NgModule({
-  imports: [CommonModule, NwModule, PerksRoutingModule, DataTableModule, QuicksearchModule, AttributesTableModule, FormsModule],
-  declarations: [PerksComponent, PerksTableComponent],
-})
-export class PerksModule {}
diff --git a/apps/web/app/pages/preferences/preferences-routing.module.ts b/apps/web/app/pages/preferences/preferences-routing.module.ts
deleted file mode 100644
index e8d7d16b..00000000
--- a/apps/web/app/pages/preferences/preferences-routing.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { PreferencesComponent } from './preferences.component';
-
-const routes: Routes = [{ path: '', component: PreferencesComponent }];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class PreferencesRoutingModule { }
diff --git a/apps/web/app/pages/preferences/preferences.component.html b/apps/web/app/pages/preferences/preferences.component.html
deleted file mode 100644
index 897d3726..00000000
--- a/apps/web/app/pages/preferences/preferences.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="main-content flex flex-col items-center">
-  <div class="w-80 bg-base-100 rounded-md p-4">
-    <div class="form-control w-full">
-      <button class="btn w-full mt-4" (click)="exportPreferences()">Export Preferences</button>
-      <label class="label">
-        <span class="label-text-alt">Exports user data e.g. favourites, item prices etc.</span>
-      </label>
-    </div>
-
-    <div class="form-control w-full">
-      <button class="btn w-full mt-4" (click)="importPreferences()">Import Preferences</button>
-      <label class="label">
-        <span class="label-text-alt">Imports previously exported user data</span>
-      </label>
-    </div>
-
-    <div class="form-control w-full">
-      <button class="btn w-full mt-4" (click)="clearPrices()">Clear Prices</button>
-      <label class="label">
-        <span class="label-text-alt">Clears all item prices</span>
-      </label>
-    </div>
-
-    <nw-marketprices-importer class="w-full mt-4"></nw-marketprices-importer>
-  </div>
-</div>
diff --git a/apps/web/app/pages/preferences/preferences.module.ts b/apps/web/app/pages/preferences/preferences.module.ts
deleted file mode 100644
index b686c9c2..00000000
--- a/apps/web/app/pages/preferences/preferences.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-
-import { PreferencesRoutingModule } from './preferences-routing.module'
-import { FormsModule } from '@angular/forms'
-import { NwModule } from '~/nw'
-
-@NgModule({
-  imports: [CommonModule, PreferencesRoutingModule, FormsModule, NwModule],
-  declarations: [],
-})
-export class PreferencesModule {}
diff --git a/apps/web/app/pages/progression/index.ts b/apps/web/app/pages/progression/index.ts
deleted file mode 100644
index c2bf3587..00000000
--- a/apps/web/app/pages/progression/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './progression.module'
diff --git a/apps/web/app/pages/progression/level.component.ts b/apps/web/app/pages/progression/level.component.ts
deleted file mode 100644
index b72359cb..00000000
--- a/apps/web/app/pages/progression/level.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-
-@Component({
-  selector: 'nwb-level',
-  templateUrl: './level.component.html',
-  styleUrls: ['./level.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class LevelComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/apps/web/app/pages/progression/progression-routing.module.ts b/apps/web/app/pages/progression/progression-routing.module.ts
deleted file mode 100644
index 4167a240..00000000
--- a/apps/web/app/pages/progression/progression-routing.module.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-import { LevelComponent } from './level.component'
-import { ProgressionComponent } from './progression.component'
-import { TradeComponent } from './trade.component'
-import { UmbralComponent } from './umbral.component'
-
-const routes: Routes = [
-  {
-    path: '',
-    component: ProgressionComponent,
-
-    children: [
-      {
-        path: '',
-        redirectTo: 'tradeskills',
-        pathMatch: 'full'
-      },
-      {
-        path: 'tradeskills',
-        component: TradeComponent,
-      },
-      {
-        path: 'level',
-        component: LevelComponent,
-      },
-      {
-        path: 'umbral',
-        component: UmbralComponent,
-      },
-    ],
-  },
-]
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class ProgressionRoutingModule {}
diff --git a/apps/web/app/pages/progression/progression.component.html b/apps/web/app/pages/progression/progression.component.html
deleted file mode 100644
index 0ece314b..00000000
--- a/apps/web/app/pages/progression/progression.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="w-36 xl:w-40">
-  <ul class="menu menu-compact xl:menu-normal bg-base-100 rounded-md">
-    <li [routerLinkActive]="'bordered'">
-      <a [routerLink]="'tradeskills'">Tradeskills</a>
-    </li>
-    <li [routerLinkActive]="'bordered'">
-      <a [routerLink]="'level'">Level</a>
-    </li>
-    <li [routerLinkActive]="'bordered'">
-      <a [routerLink]="'umbral'" >Umbral upgrades</a>
-    </li>
-  </ul>
-</div>
-<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/progression/progression.component.scss b/apps/web/app/pages/progression/progression.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/web/app/pages/progression/progression.component.ts b/apps/web/app/pages/progression/progression.component.ts
deleted file mode 100644
index 0ccd09a4..00000000
--- a/apps/web/app/pages/progression/progression.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'nwb-progression',
-  templateUrl: './progression.component.html',
-  styleUrls: ['./progression.component.scss'],
-  host: {
-    class: 'layout-row gap-4',
-  },
-})
-export class ProgressionComponent implements OnInit {
-
-  public constructor() {
-
-  }
-
-  public ngOnInit(): void {
-  }
-
-}
diff --git a/apps/web/app/pages/progression/progression.module.ts b/apps/web/app/pages/progression/progression.module.ts
deleted file mode 100644
index 05642cab..00000000
--- a/apps/web/app/pages/progression/progression.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-
-import { ProgressionRoutingModule } from './progression-routing.module'
-import { ProgressionComponent } from './progression.component'
-import { RouterModule } from '@angular/router'
-import { UmbralshardsModule } from '~/widgets/umbralshards'
-import { XpTableModule } from '~/widgets/xp-table'
-import { UmbralComponent } from './umbral.component'
-import { TradeComponent } from './trade.component'
-import { TradeskillsModule } from '~/widgets/tradeskills'
-import { LevelComponent } from './level.component'
-import { StandingTableModule } from '~/widgets/standing-table'
-
-@NgModule({
-  declarations: [ProgressionComponent, UmbralComponent, TradeComponent, LevelComponent],
-  imports: [CommonModule, ProgressionRoutingModule, RouterModule, UmbralshardsModule, XpTableModule, TradeskillsModule, StandingTableModule],
-})
-export class ProgressionModule {}
diff --git a/apps/web/app/pages/progression/trade.component.html b/apps/web/app/pages/progression/trade.component.html
deleted file mode 100644
index 147621a5..00000000
--- a/apps/web/app/pages/progression/trade.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="tabs">
-  <ng-container *ngFor="let category of categories | async; let i = index">
-    <a class="tab tab-lifted" [class.tab-active]="isActive(category, i)" (click)="selected = category">{{ category }}</a>
-  </ng-container>
-</div>
-<ng-container *ngFor="let category of categories | async; let i = index">
-  <div class="grid items-start grid-cols-1 2xl:grid-cols-12 bg-base-100 rounded-md rounded-tl-none" *ngIf="isActive(category, i)">
-    <div class="xl:col-span-4 grid grid-cols-5 2xl:grid-cols-3 gap-2 p-2">
-      <nwb-tradeskill-input *ngFor="let skill of skillsByCategory(category) | async" [tradeskill]="skill.ID"></nwb-tradeskill-input>
-    </div>
-    <div class="xl:col-span-8 overflow-hidden ">
-      <nwb-tradeskill-chart [category]="category"></nwb-tradeskill-chart>
-    </div>
-  </div>
-</ng-container>
diff --git a/apps/web/app/pages/progression/umbral.component.html b/apps/web/app/pages/progression/umbral.component.html
deleted file mode 100644
index d2fa9af7..00000000
--- a/apps/web/app/pages/progression/umbral.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div>
-  <div class="alert alert-warning mb-4">
-    <div>
-      <div>
-        Gearscore may not match the GS in game since real weighting values are not known.
-      </div>
-    </div>
-  </div>
-  <nwb-umbral-calculator></nwb-umbral-calculator>
-</div>
-<div>
-  <div class="tabs">
-    <a class="tab tab-lifted" [class.tab-active]="tab == 0" (click)="tab = 0">Upgrade path</a>
-    <a class="tab tab-lifted" [class.tab-active]="tab == 1" (click)="tab = 1">Table 590-600</a>
-    <a class="tab tab-lifted" [class.tab-active]="tab == 2" (click)="tab = 2">Table 600-625</a>
-  </div>
-  <ng-container *ngIf="tab == 0">
-    <div class="p-4 bg-base-100">
-      <nwb-umbral-calculator-steps></nwb-umbral-calculator-steps>
-    </div>
-  </ng-container>
-  <ng-container *ngIf="tab == 1">
-    <nwb-umbral-table [gsMax]="599"></nwb-umbral-table>
-  </ng-container>
-  <ng-container *ngIf="tab == 2">
-    <nwb-umbral-table [gsMin]="600"></nwb-umbral-table>
-  </ng-container>
-</div>
diff --git a/apps/web/app/pages/progression/umbral.component.ts b/apps/web/app/pages/progression/umbral.component.ts
deleted file mode 100644
index e9601661..00000000
--- a/apps/web/app/pages/progression/umbral.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-
-@Component({
-  selector: 'nwb-umbral',
-  templateUrl: './umbral.component.html',
-  styleUrls: ['./umbral.component.scss'],
-   // changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class UmbralComponent {
-
-  public tab = 0
-
-}
diff --git a/apps/web/app/pages/status-effects/status-effects.component.html b/apps/web/app/pages/status-effects/status-effects.component.html
deleted file mode 100644
index a590b8e1..00000000
--- a/apps/web/app/pages/status-effects/status-effects.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="w-36 xl:w-40 flex flex-col gap-4">
-  <nwb-quicksearch-input #search></nwb-quicksearch-input>
-  <nwb-data-table-categories
-    categoryChildRoute
-    [childRouteIndex]="'table'"
-    class="bg-base-100 rounded-md overflow-y-auto"
-  ></nwb-data-table-categories>
-</div>
-<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/status-effects/status-effects.component.ts b/apps/web/app/pages/status-effects/status-effects.component.ts
deleted file mode 100644
index abc0e002..00000000
--- a/apps/web/app/pages/status-effects/status-effects.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { DataTableAdapter } from '~/ui/data-table'
-import { QuicksearchService } from '~/ui/quicksearch'
-import { StatusEffectsAdapterService } from './status-effects-table-adapter'
-
-@Component({
-  selector: 'nwb-status-effects',
-  templateUrl: './status-effects.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'layout-row gap-4',
-  },
-  providers: [DataTableAdapter.provideClass(StatusEffectsAdapterService), QuicksearchService],
-})
-export class StatusEffectsComponent {
-  //
-}
diff --git a/apps/web/app/pages/status-effects/status-effects.module.ts b/apps/web/app/pages/status-effects/status-effects.module.ts
deleted file mode 100644
index 573f7357..00000000
--- a/apps/web/app/pages/status-effects/status-effects.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-
-import { StatusEffectsRoutingModule } from './status-effects-routing.module'
-import { StatusEffectsComponent } from './status-effects.component'
-import { PropertyGridModule } from '~/ui/property-grid'
-import { DataTableModule } from '~/ui/data-table'
-import { QuicksearchModule } from '~/ui/quicksearch'
-import { StatusEffectsTableComponent } from './status-effects-table.component'
-import { NwModule } from '~/nw'
-
-@NgModule({
-  imports: [CommonModule, NwModule, StatusEffectsRoutingModule, DataTableModule, QuicksearchModule],
-  declarations: [StatusEffectsComponent, StatusEffectsTableComponent],
-})
-export class StatusEffectsModule {}
diff --git a/apps/web/app/pages/territories/index.ts b/apps/web/app/pages/territories/index.ts
deleted file mode 100644
index 933dec44..00000000
--- a/apps/web/app/pages/territories/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './territories-routing.module'
-export * from './territories.module'
diff --git a/apps/web/app/pages/territories/territories-detail.component.html b/apps/web/app/pages/territories/territories-detail.component.html
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/web/app/pages/territories/territories-detail.component.scss b/apps/web/app/pages/territories/territories-detail.component.scss
deleted file mode 100644
index bb1d90a6..00000000
--- a/apps/web/app/pages/territories/territories-detail.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-  //
-}
diff --git a/apps/web/app/pages/territories/territories-detail.component.ts b/apps/web/app/pages/territories/territories-detail.component.ts
deleted file mode 100644
index c2376d81..00000000
--- a/apps/web/app/pages/territories/territories-detail.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { DestroyService } from '~/utils'
-
-@Component({
-  selector: 'nwb-territories-detail',
-  templateUrl: './territories-detail.component.html',
-  styleUrls: ['./territories-detail.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [DestroyService],
-})
-export class TerritoriesDetailComponent {
-  //
-}
diff --git a/apps/web/app/pages/territories/territories-governance.component.html b/apps/web/app/pages/territories/territories-governance.component.html
deleted file mode 100644
index e3bf7852..00000000
--- a/apps/web/app/pages/territories/territories-governance.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="flex-1 overflow-auto">
-  <nwb-territory-governance-table></nwb-territory-governance-table>
-</div>
diff --git a/apps/web/app/pages/territories/territories.component.html b/apps/web/app/pages/territories/territories.component.html
deleted file mode 100644
index 5e4f994b..00000000
--- a/apps/web/app/pages/territories/territories.component.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class="w-36 xl:w-40 flex flex-col gap-4">
-  <nwb-quicksearch-input #search></nwb-quicksearch-input>
-
-  <ul class="menu menu-compact xl:menu-normal bg-base-100 rounded-md">
-    <li [routerLinkActive]="'bordered'" >
-      <a [routerLink]="'list'">Territories</a>
-    </li>
-    <li [routerLinkActive]="'bordered'" >
-      <a [routerLink]="'standing'">Standing</a>
-    </li>
-    <li [routerLinkActive]="'bordered'" >
-      <a [routerLink]="'governance'">Governance</a>
-    </li>
-    <li [routerLinkActive]="'bordered'" >
-      <a [routerLink]="'poi'">POI</a>
-    </li>
-  </ul>
-</div>
-<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/territories/territories.module.ts b/apps/web/app/pages/territories/territories.module.ts
deleted file mode 100644
index 464916d9..00000000
--- a/apps/web/app/pages/territories/territories.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-
-import { NwModule } from '~/nw'
-import { TerritoriesRoutingModule } from './territories-routing.module'
-
-@NgModule({
-  imports: [CommonModule, NwModule, TerritoriesRoutingModule],
-  declarations: [],
-})
-export class TerritoriesModule {
-  //
-}
diff --git a/apps/web/app/pages/armorsets/armorsets-adapter.service.ts b/apps/web/app/pages/tools/armorsets/armorsets-adapter.service.ts
similarity index 100%
rename from apps/web/app/pages/armorsets/armorsets-adapter.service.ts
rename to apps/web/app/pages/tools/armorsets/armorsets-adapter.service.ts
diff --git a/apps/web/app/pages/tools/armorsets/armorsets-table.component.html b/apps/web/app/pages/tools/armorsets/armorsets-table.component.html
new file mode 100644
index 00000000..806fadaa
--- /dev/null
+++ b/apps/web/app/pages/tools/armorsets/armorsets-table.component.html
@@ -0,0 +1,19 @@
+<nwb-data-table
+  #table
+  [stateKey]="'armorsets-table'"
+  [categoryRouteParam]
+  [detailRoutParam]="'id'"
+  [quickFilter]="search.query | async"
+  class="flex-1"
+></nwb-data-table>
+
+<div class="flex-none layout-content xl:max-w-[350px] 4xl:max-w-[30%]" *ngIf="selectedItems | async; let items">
+  <div class="grid grid-cols-fill layout-gap p-3" nwbScreenshotFrame="Armor-Set">
+    <nwb-item-detail *ngFor="let item of items; trackBy: trackByIndex" [entityId]="item.ItemID">
+      <nwb-item-detail-header [enableTracker]="true"></nwb-item-detail-header>
+      <nwb-item-detail-stats></nwb-item-detail-stats>
+      <hr class="item-detail-divider" />
+      <nwb-item-detail-perks></nwb-item-detail-perks>
+    </nwb-item-detail>
+  </div>
+</div>
diff --git a/apps/web/app/pages/armorsets/armorsets-table.component.ts b/apps/web/app/pages/tools/armorsets/armorsets-table.component.ts
similarity index 57%
rename from apps/web/app/pages/armorsets/armorsets-table.component.ts
rename to apps/web/app/pages/tools/armorsets/armorsets-table.component.ts
index cac2ce25..97fafbbf 100644
--- a/apps/web/app/pages/armorsets/armorsets-table.component.ts
+++ b/apps/web/app/pages/tools/armorsets/armorsets-table.component.ts
@@ -1,17 +1,31 @@
 import { Component, OnInit, ChangeDetectionStrategy, TrackByFunction, ViewChild } from '@angular/core'
 import { defer, map } from 'rxjs'
 import { shareReplayRefCount } from '~/utils'
-import { DataTableComponent } from '~/ui/data-table'
-import { QuicksearchService } from '~/ui/quicksearch'
+import { DataTableComponent, DataTableModule } from '~/ui/data-table'
+import { QuicksearchModule, QuicksearchService } from '~/ui/quicksearch'
 import { Armorset } from './types'
+import { CommonModule } from '@angular/common'
+import { RouterModule } from '@angular/router'
+import { NwModule } from '~/nw'
+import { ItemDetailModule } from '~/widgets/item-detail'
+import { ScreenshotModule } from '~/widgets/screenshot'
 
 @Component({
+  standalone: true,
   selector: 'nwb-armorsets-table',
   templateUrl: './armorsets-table.component.html',
-  styleUrls: ['./armorsets-table.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    RouterModule,
+    NwModule,
+    DataTableModule,
+    QuicksearchModule,
+    ItemDetailModule,
+    ScreenshotModule,
+  ],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-col xl:flex-row',
   },
 })
 export class ArmorsetsTableComponent implements OnInit {
diff --git a/apps/web/app/pages/tools/armorsets/armorsets.component.html b/apps/web/app/pages/tools/armorsets/armorsets.component.html
new file mode 100644
index 00000000..e55e8b98
--- /dev/null
+++ b/apps/web/app/pages/tools/armorsets/armorsets.component.html
@@ -0,0 +1,17 @@
+<div class="flex-none flex flex-row bg-base-300 rounded-t-md">
+  <nwb-data-table-categories
+    categoryChildRoute
+    [childRouteIndex]="'table'"
+    class="flex-1"
+  ></nwb-data-table-categories>
+  <div class="flex-none p-2 max-w-[50%] flex flex-row">
+    <ul class="menu menu-horizontal p-0">
+      <li>
+        <nwb-screenshot-button class="tooltip-left"></nwb-screenshot-button>
+      </li>
+
+    </ul>
+    <nwb-quicksearch-input #search></nwb-quicksearch-input>
+  </div>
+</div>
+<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/armorsets/armorsets.component.ts b/apps/web/app/pages/tools/armorsets/armorsets.component.ts
similarity index 61%
rename from apps/web/app/pages/armorsets/armorsets.component.ts
rename to apps/web/app/pages/tools/armorsets/armorsets.component.ts
index d456b141..295c9549 100644
--- a/apps/web/app/pages/armorsets/armorsets.component.ts
+++ b/apps/web/app/pages/tools/armorsets/armorsets.component.ts
@@ -1,17 +1,22 @@
+import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, NgZone, TrackByFunction } from '@angular/core'
+import { RouterModule } from '@angular/router'
 import { ItemDefinitionMaster } from '@nw-data/types'
-import { DataTableAdapter, DataTableComponent } from '~/ui/data-table'
-import { QuicksearchService } from '~/ui/quicksearch'
+import { NwModule } from '~/nw'
+import { DataTableAdapter, DataTableModule } from '~/ui/data-table'
+import { QuicksearchModule, QuicksearchService } from '~/ui/quicksearch'
+import { ScreenshotModule } from '~/widgets/screenshot'
 import { ArmorsetsAdapterService } from './armorsets-adapter.service'
-import { Armorset, ArmorsetGroup } from './types'
+import { Armorset } from './types'
 
 @Component({
+  standalone: true,
   selector: 'nwb-armorsets',
   templateUrl: './armorsets.component.html',
-  styleUrls: ['./armorsets.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, DataTableModule, QuicksearchModule, ScreenshotModule],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-col bg-base-300 rounded-md overflow-clip',
   },
   providers: [DataTableAdapter.provideClass(ArmorsetsAdapterService), QuicksearchService],
 })
diff --git a/apps/web/app/pages/armorsets/armorsets-routing.module.ts b/apps/web/app/pages/tools/armorsets/armorsets.module.ts
similarity index 93%
rename from apps/web/app/pages/armorsets/armorsets-routing.module.ts
rename to apps/web/app/pages/tools/armorsets/armorsets.module.ts
index b0cafd0d..2de0a415 100644
--- a/apps/web/app/pages/armorsets/armorsets-routing.module.ts
+++ b/apps/web/app/pages/tools/armorsets/armorsets.module.ts
@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
+
 import { EmptyComponent } from '~/widgets/empty'
 import { ArmorsetsTableComponent } from './armorsets-table.component'
 import { ArmorsetsComponent } from './armorsets.component'
 
+
 const routes: Routes = [
   {
     path: '',
@@ -35,6 +37,5 @@ const routes: Routes = [
 ]
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
 })
-export class SetsRoutingModule {}
+export class ArmorsetsModule {}
diff --git a/apps/web/app/pages/tools/armorsets/index.ts b/apps/web/app/pages/tools/armorsets/index.ts
new file mode 100644
index 00000000..f502b820
--- /dev/null
+++ b/apps/web/app/pages/tools/armorsets/index.ts
@@ -0,0 +1 @@
+export * from './armorsets.module'
diff --git a/apps/web/app/pages/armorsets/types.ts b/apps/web/app/pages/tools/armorsets/types.ts
similarity index 100%
rename from apps/web/app/pages/armorsets/types.ts
rename to apps/web/app/pages/tools/armorsets/types.ts
diff --git a/apps/web/app/pages/armorsets/utils.ts b/apps/web/app/pages/tools/armorsets/utils.ts
similarity index 100%
rename from apps/web/app/pages/armorsets/utils.ts
rename to apps/web/app/pages/tools/armorsets/utils.ts
diff --git a/apps/web/app/pages/dungeons/dungeon-detail.component.html b/apps/web/app/pages/tools/dungeons/dungeon-detail.component.html
similarity index 75%
rename from apps/web/app/pages/dungeons/dungeon-detail.component.html
rename to apps/web/app/pages/tools/dungeons/dungeon-detail.component.html
index cdec6ed5..c83a451b 100644
--- a/apps/web/app/pages/dungeons/dungeon-detail.component.html
+++ b/apps/web/app/pages/tools/dungeons/dungeon-detail.component.html
@@ -1,5 +1,20 @@
-<ul class="menu bg-base-300 rounded-l-md flex-none w-56" *ngIf="isMutable">
-  <li class="menu-title mt-4">
+
+<ul
+  class="
+    menu
+    bg-base-300
+    flex-none
+    menu-horizontal menu-compact
+    overflow-auto
+    scrollbar-hide
+    w-full
+    flex-nowrap
+    xl:menu-vertical xl:menu-normal
+    xl:w-56
+  "
+  *ngIf="isMutable"
+>
+  <li class="menu-title mt-4 hidden xl:block">
     <span>Normal</span>
   </li>
   <li [class.bordered]="!difficultyLevel">
@@ -7,7 +22,7 @@
       <span>Regular</span>
     </a>
   </li>
-  <li class="menu-title mt-4">
+  <li class="menu-title mt-4 hidden xl:block">
     <span>Mutated</span>
   </li>
   <ng-container *ngIf="difficulties$ | async; let items">
@@ -23,7 +38,7 @@
   <picture class="absolute top-0 left-0 right-0 bottom-0 pointer-events-none">
     <img [nwImage]="backgroundImage" class="block w-full h-full object-cover blur-sm" />
   </picture>
-  <div class="absolute top-0 left-0 right-0 bottom-0 flex flex-col px-4">
+  <div class="absolute top-0 left-0 right-0 bottom-0 flex flex-col px-4 overflow-auto">
     <div class="prose-base mt-8 flex-none">
       <h1 class="mb-0 font-bold">
         <span [nwText]="title"></span>
@@ -51,7 +66,7 @@ <h1 class="mb-0 font-bold">
           <span [nwText]="requirementText"></span>
         </span>
       </p>
-      <div class="flex flex-row gap-4 mt-12">
+      <div class="flex flex-row flex-wrap layout-gap mt-12">
         <div>
           <h2 class="font-bold mt-0">Expedition Items</h2>
           <div class="flex flex-row gap-2">
@@ -88,7 +103,7 @@ <h2 class="font-bold mt-0">Expedition Items</h2>
       </ng-container>
     </div>
 
-    <div class="flex-1 overflow-y-auto masked-overflow">
+    <div class="flex-1 mt-4">
       <ng-container *ngFor="let item of tabs; trackBy: trackByTabId">
         <ng-container *ngIf="item.id === tab">
           <ng-container *ngTemplateOutlet="item.tpl"></ng-container>
@@ -99,50 +114,35 @@ <h2 class="font-bold mt-0">Expedition Items</h2>
 </div>
 
 <ng-template #tplDungeonLoot>
-  <div class="grid gap-4">
-    <div *ngFor="let item of dungeonLoot$ | async; trackBy: trackByIndex" [nwbItemDetail]="item">
-      <nwb-item-detail-header
-        [enableNwdbLink]="true"
-        [enableTracker]="true"
-        [enableMarker]="true"
-      ></nwb-item-detail-header>
-    </div>
+  <div class="grid layout-gap">
+    <nwb-item-detail *ngFor="let item of dungeonLoot$ | async; trackBy: trackByIndex" [entity]="item">
+      <nwb-item-detail-header [enableInfoLink]="true" [enableTracker]="true"></nwb-item-detail-header>
+    </nwb-item-detail>
   </div>
 </ng-template>
 
 <ng-template #tplDungeonMutatedLoot>
-  <div class="grid gap-4">
-    <div *ngFor="let item of dungeonMutatedLoot$ | async; trackBy: trackByIndex" [nwbItemDetail]="item">
-      <nwb-item-detail-header
-        [enableNwdbLink]="true"
-        [enableTracker]="true"
-        [enableMarker]="true"
-      ></nwb-item-detail-header>
-    </div>
+  <div class="grid layout-gap">
+    <nwb-item-detail *ngFor="let item of dungeonMutatedLoot$ | async; trackBy: trackByIndex" [entity]="item">
+      <nwb-item-detail-header [enableInfoLink]="true" [enableTracker]="true"></nwb-item-detail-header>
+    </nwb-item-detail>
   </div>
 </ng-template>
 
 <ng-template #tplDungeonDifficultyLoot>
-  <div class="grid gap-4">
-    <div *ngFor="let item of dungeonDifficultyLoot$ | async; trackBy: trackByIndex" [nwbItemDetail]="item">
-      <nwb-item-detail-header
-        [enableNwdbLink]="true"
-        [enableTracker]="true"
-        [enableMarker]="true"
-      ></nwb-item-detail-header>
-    </div>
+  <div class="grid layout-gap">
+    <nwb-item-detail *ngFor="let item of dungeonDifficultyLoot$ | async; trackBy: trackByIndex" [entity]="item">
+      <nwb-item-detail-header [enableInfoLink]="true" [enableTracker]="true"></nwb-item-detail-header>
+    </nwb-item-detail>
   </div>
 </ng-template>
 
 <ng-template #tplDungeonBosses>
-  <div class="grid gap-4">
+  <div class="grid layout-gap">
     <nwb-vital-detail *ngFor="let item of bosses$ | async; trackBy: trackByIndex" [vital]="item"></nwb-vital-detail>
   </div>
 </ng-template>
 
 <ng-template #tplDungeonMap>
-  <iframe [attr.src]="mapEmbed" class="w-full h-full">
-
-  </iframe>
+  <iframe [attr.src]="mapEmbed" class="w-full h-full"> </iframe>
 </ng-template>
-
diff --git a/apps/web/app/pages/dungeons/dungeon-detail.component.scss b/apps/web/app/pages/tools/dungeons/dungeon-detail.component.scss
similarity index 69%
rename from apps/web/app/pages/dungeons/dungeon-detail.component.scss
rename to apps/web/app/pages/tools/dungeons/dungeon-detail.component.scss
index 5cc094ab..d6be59b4 100644
--- a/apps/web/app/pages/dungeons/dungeon-detail.component.scss
+++ b/apps/web/app/pages/tools/dungeons/dungeon-detail.component.scss
@@ -1,10 +1,4 @@
 :host {
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-
-  overflow: auto;
-
   .grid {
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   }
@@ -13,5 +7,4 @@
     content-visibility: auto;
     min-height: 86px;
   }
-
 }
diff --git a/apps/web/app/pages/dungeons/dungeon-detail.component.ts b/apps/web/app/pages/tools/dungeons/dungeon-detail.component.ts
similarity index 89%
rename from apps/web/app/pages/dungeons/dungeon-detail.component.ts
rename to apps/web/app/pages/tools/dungeons/dungeon-detail.component.ts
index 37d25ae4..b84e1e60 100644
--- a/apps/web/app/pages/dungeons/dungeon-detail.component.ts
+++ b/apps/web/app/pages/tools/dungeons/dungeon-detail.component.ts
@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -8,13 +9,15 @@ import {
   ViewChild,
 } from '@angular/core'
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
-import { ActivatedRoute } from '@angular/router'
+import { ActivatedRoute, RouterModule } from '@angular/router'
 import { Gamemodes, Housingitems, ItemDefinitionMaster, Mutationdifficulty } from '@nw-data/types'
 import { combineLatest, defer, map, of, switchMap, takeUntil } from 'rxjs'
-import { NwService } from '~/nw'
+import { NwModule, NwService } from '~/nw'
 import { getItemIconPath, getItemId, getItemRarity } from '~/nw/utils'
 import { DifficultyRank } from '~/preferences'
 import { DestroyService, observeRouteParam, shareReplayRefCount } from '~/utils'
+import { ItemDetailModule } from '~/widgets/item-detail'
+import { VitalsFamiliesModule } from '~/widgets/vitals-families'
 import { DungeonsService } from './dungeons.service'
 
 const DIFFICULTY_TIER_NAME = {
@@ -30,11 +33,16 @@ export interface Tab {
   tpl: TemplateRef<unknown>
 }
 @Component({
+  standalone: true,
   selector: 'nwb-dungeon-detail',
   templateUrl: './dungeon-detail.component.html',
   styleUrls: ['./dungeon-detail.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, ItemDetailModule, VitalsFamiliesModule],
   providers: [DestroyService],
+  host: {
+    class: 'layout-col xl:flex-row'
+  }
 })
 export class DungeonDetailComponent implements OnInit {
   public trackById: TrackByFunction<ItemDefinitionMaster | Housingitems> = (i, item) => getItemId(item)
@@ -110,21 +118,28 @@ export class DungeonDetailComponent implements OnInit {
       difficulty: this.difficulty$,
       events: this.nw.db.gameEventsMap,
       items: this.nw.db.itemsMap,
+      loot: this.nw.db.lootTablesMap
     })
   ).pipe(
-    map(({ rank, difficulty, events, items }) => {
+    map(({ rank, difficulty, events, items, loot }) => {
+
       if (!difficulty) {
         return []
       }
 
       return [
-        { eventId: difficulty.CompletionEvent1, rankId: 'bronze' as DifficultyRank },
-        { eventId: difficulty.CompletionEvent2, rankId: 'silver' as DifficultyRank },
-        { eventId: difficulty.CompletionEvent3, rankId: 'gold' as DifficultyRank },
+        { eventId: difficulty.CompletionEvent1, rankPos: 1, rankId: 'bronze' as DifficultyRank },
+        { eventId: difficulty.CompletionEvent2, rankPos: 2, rankId: 'silver' as DifficultyRank },
+        { eventId: difficulty.CompletionEvent3, rankPos: 3, rankId: 'gold' as DifficultyRank },
       ]
-        .map(({ eventId, rankId }, i) => {
+        .map(({ eventId, rankPos, rankId }, i) => {
+          // TODO: cleanup
           const event = events.get(eventId)
-          const item = items.get(event.ItemReward as string)
+          const bucket = loot.get(`Loot_MutDiff${difficulty.MutationDifficulty}T${rankPos}`)
+          const bucketItem = bucket.Items?.[0]
+          const itemId = bucketItem?.ItemID
+          const item = items.get(itemId)
+
           if (!item) {
             return null
           }
@@ -133,7 +148,7 @@ export class DungeonDetailComponent implements OnInit {
             ItemID: item.ItemID,
             ItemName: item.Name,
             IconPath: getItemIconPath(item),
-            Quantity: event.ItemRewardQty,
+            Quantity: bucketItem?.Qty || '?',
             Completed: rankId == rank,
             toggle: () => {
               if (rankId == rank) {
diff --git a/apps/web/app/pages/tools/dungeons/dungeons.component.html b/apps/web/app/pages/tools/dungeons/dungeons.component.html
new file mode 100644
index 00000000..65bf2dfc
--- /dev/null
+++ b/apps/web/app/pages/tools/dungeons/dungeons.component.html
@@ -0,0 +1,10 @@
+<nwb-tab-menu class="bg-base-300 rounded-t-md">
+  <ng-template>
+    <li *ngFor="let item of dungeon$ | async" [routerLinkActive]="'bordered'">
+      <a [routerLink]="item.GameModeId">
+        <span [nwText]="item.DisplayName"></span>
+      </a>
+    </li>
+  </ng-template>
+</nwb-tab-menu>
+<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/dungeons/dungeons.component.scss b/apps/web/app/pages/tools/dungeons/dungeons.component.scss
similarity index 100%
rename from apps/web/app/pages/dungeons/dungeons.component.scss
rename to apps/web/app/pages/tools/dungeons/dungeons.component.scss
diff --git a/apps/web/app/pages/tools/dungeons/dungeons.component.ts b/apps/web/app/pages/tools/dungeons/dungeons.component.ts
new file mode 100644
index 00000000..780dfbaf
--- /dev/null
+++ b/apps/web/app/pages/tools/dungeons/dungeons.component.ts
@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { Gamemodes } from '@nw-data/types'
+import { NwModule } from '~/nw'
+import { TabMenuModule } from '~/ui/tab-menu'
+import { DungeonsService } from './dungeons.service'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-dungeons',
+  templateUrl: './dungeons.component.html',
+  styleUrls: ['./dungeons.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, NwModule, TabMenuModule],
+  host: {
+    class: 'layout-col bg-base-300 rounded-md overflow-clip',
+  },
+})
+export class DungeonsComponent {
+
+  public get dungeon$() {
+    return this.ds.dungeon$
+  }
+
+  protected activeItem: Gamemodes
+
+  public constructor(private ds: DungeonsService) {
+    //
+  }
+
+  protected activeChanged(active: boolean, item: Gamemodes) {
+    this.activeItem = active ? item : this.activeItem
+  }
+}
diff --git a/apps/web/app/pages/dungeons/dungeons-routing.module.ts b/apps/web/app/pages/tools/dungeons/dungeons.module.ts
similarity index 63%
rename from apps/web/app/pages/dungeons/dungeons-routing.module.ts
rename to apps/web/app/pages/tools/dungeons/dungeons.module.ts
index 292bf54e..0ca02327 100644
--- a/apps/web/app/pages/dungeons/dungeons-routing.module.ts
+++ b/apps/web/app/pages/tools/dungeons/dungeons.module.ts
@@ -1,7 +1,14 @@
 import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-import { DungeonDetailComponent } from './dungeon-detail.component'
+import { CommonModule } from '@angular/common'
+
 import { DungeonsComponent } from './dungeons.component'
+import { ItemDetailModule } from '~/widgets/item-detail'
+import { NwModule } from '~/nw'
+import { FormsModule } from '@angular/forms'
+import { DungeonDetailComponent } from './dungeon-detail.component'
+import { VitalsFamiliesModule } from '~/widgets/vitals-families'
+import { ScreenModule } from '~/ui/screen'
+import { RouterModule, Routes } from '@angular/router'
 
 const routes: Routes = [
   {
@@ -22,6 +29,5 @@ const routes: Routes = [
 ]
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
 })
-export class DungeonsRoutingModule {}
+export class DungeonsModule {}
diff --git a/apps/web/app/pages/dungeons/dungeons.service.ts b/apps/web/app/pages/tools/dungeons/dungeons.service.ts
similarity index 99%
rename from apps/web/app/pages/dungeons/dungeons.service.ts
rename to apps/web/app/pages/tools/dungeons/dungeons.service.ts
index 29df8ffe..54b25590 100644
--- a/apps/web/app/pages/dungeons/dungeons.service.ts
+++ b/apps/web/app/pages/tools/dungeons/dungeons.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
 import { GameEvent, Gamemodes, Housingitems, ItemDefinitionMaster, Mutationdifficulty } from '@nw-data/types'
 import { uniq } from 'lodash'
-import { combineLatest, defer, isObservable, map, Observable, of, switchMap } from 'rxjs'
+import { combineLatest, defer, isObservable, map, Observable, of, switchMap, tap } from 'rxjs'
 import { NwLootbucketService, NwService } from '~/nw'
 import { getVitalDungeon } from '~/nw/utils'
 import { DungeonPreferencesService } from '~/preferences'
diff --git a/apps/web/app/pages/tools/dungeons/index.ts b/apps/web/app/pages/tools/dungeons/index.ts
new file mode 100644
index 00000000..390c0f69
--- /dev/null
+++ b/apps/web/app/pages/tools/dungeons/index.ts
@@ -0,0 +1 @@
+export * from './dungeons.module'
diff --git a/apps/web/app/pages/tools/gearbuilder/gearbuidler-store.ts b/apps/web/app/pages/tools/gearbuilder/gearbuidler-store.ts
new file mode 100644
index 00000000..73ab5766
--- /dev/null
+++ b/apps/web/app/pages/tools/gearbuilder/gearbuidler-store.ts
@@ -0,0 +1,56 @@
+import { Injectable } from '@angular/core'
+import { customAlphabet } from 'nanoid/non-secure'
+import { map } from 'rxjs'
+import { EquipSlotId } from '~/nw/utils'
+import { PreferencesService, StorageScopeNode } from '~/preferences'
+
+const createId = customAlphabet('abcdefghijklmnopqestuvwxyz0123456789', 10)
+
+export type GearsetRecord = {
+  name?: string
+  items?: Record<string, GearsetItem>
+}
+
+export type GearsetItem = {
+  itemId?: string
+  gearScore?: number
+  perks?: Record<string, string>
+}
+
+@Injectable({ providedIn: 'root' })
+export class GearbuilderStore {
+  private storage: StorageScopeNode
+
+  public constructor(pref: PreferencesService) {
+    this.storage = pref.storage.storageScope('gearbuilder:')
+  }
+
+  public async getIds() {
+    return this.storage.keys()
+  }
+
+  public observe(id: string) {
+    return this.storage.observe<GearsetRecord>(id).pipe(map((it) => it.value))
+  }
+
+  public async create(value?: GearsetRecord) {
+    const id = createId()
+    this.update(id, (data) => {
+      data = value || data
+      data.name = 'Unnamed Gearset'
+      return data
+    })
+    return id
+  }
+
+  public update(id: string, fn: (old: GearsetRecord) => GearsetRecord) {
+    const data = this.storage.get<GearsetRecord>(id) || {}
+    data.items = data.items || {}
+    const update = fn(data)
+    this.storage.set(id, update)
+  }
+
+  public delete(id: string) {
+    this.storage.delete(id)
+  }
+}
diff --git a/apps/web/app/pages/tools/gearbuilder/gearbuilder-set.component.html b/apps/web/app/pages/tools/gearbuilder/gearbuilder-set.component.html
new file mode 100644
index 00000000..1276f067
--- /dev/null
+++ b/apps/web/app/pages/tools/gearbuilder/gearbuilder-set.component.html
@@ -0,0 +1,74 @@
+<div class="navbar bg-base-300 rounded-t-md">
+  <div class="flex-none">
+    <ul class="menu menu-horizontal p-0">
+      <li>
+        <a [routerLink]="'..'">
+          <svg viewBox="0 0 384 512" class="w-4 h-4">
+            <path
+              fill="currentColor"
+              d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
+            />
+          </svg>
+        </a>
+      </li>
+    </ul>
+  </div>
+  <div class="flex-1">
+    <input
+      type="text"
+      maxlength="100"
+      [ngModel]="name$ | async"
+      (ngModelChange)="updateName($event)"
+      [ngModelOptions]="{ updateOn: 'blur' }"
+      class="input input-md w-full"
+    />
+  </div>
+  <div class="flex-none">
+    <ul class="menu menu-horizontal p-0">
+      <li>
+        <nwb-screenshot-button class="tooltip-left"></nwb-screenshot-button>
+      </li>
+      <li class="tooltip tooltip-info tooltip-left" data-tip="Toggle compact mode">
+        <a (click)="onCompactClicked()" [class.text-primary]="compactMode">
+          <svg viewBox="0 0 448 512" class="w-4 h-4">
+            <path
+              fill="currentColor"
+              d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z"
+            />
+          </svg>
+        </a>
+      </li>
+      <li class="tooltip tooltip-info tooltip-left" data-tip="Create a copy">
+        <a (click)="onCloneClicked()">
+          <svg viewBox="0 0 512 512" class="w-4 h-4">
+            <path
+              fill="currentColor"
+              d="M64 464H288C296.8 464 304 456.8 304 448V384H352V448C352 483.3 323.3 512 288 512H64C28.65 512 0 483.3 0 448V224C0 188.7 28.65 160 64 160H128V208H64C55.16 208 48 215.2 48 224V448C48 456.8 55.16 464 64 464zM160 64C160 28.65 188.7 0 224 0H448C483.3 0 512 28.65 512 64V288C512 323.3 483.3 352 448 352H224C188.7 352 160 323.3 160 288V64zM224 304H448C456.8 304 464 296.8 464 288V64C464 55.16 456.8 48 448 48H224C215.2 48 208 55.16 208 64V288C208 296.8 215.2 304 224 304z"
+            />
+          </svg>
+        </a>
+      </li>
+      <li class="tooltip tooltip-error tooltip-left" data-tip="Delete">
+        <a (click)="onDeleteClicked()" >
+          <svg viewBox="0 0 448 512" class="w-4 h-4">
+            <path
+              fill="currentColor"
+              d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z"
+            />
+          </svg>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+<div class="bg-base-300 p-4 rounded-b-md flex flex-col xl:flex-row layout-gap" [nwbScreenshotFrame]="name$ | async">
+  <div class="flex-1 grid layout-gap">
+    <nwb-gearbuilder-stats
+      [entry]="data$ | async"
+      [class.text-xs]="compactMode"
+    ></nwb-gearbuilder-stats>
+    <ng-container *ngFor="let slot of slots">
+      <nwb-gearbuilder-slot [recordId]="id$ | async" [slot]="slot" [compact]="compactMode"></nwb-gearbuilder-slot>
+    </ng-container>
+  </div>
+</div>
diff --git a/apps/web/app/pages/tools/gearbuilder/gearbuilder-set.component.scss b/apps/web/app/pages/tools/gearbuilder/gearbuilder-set.component.scss
new file mode 100644
index 00000000..f25547f8
--- /dev/null
+++ b/apps/web/app/pages/tools/gearbuilder/gearbuilder-set.component.scss
@@ -0,0 +1,5 @@
+:host {
+  .grid {
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  }
+}
diff --git a/apps/web/app/pages/tools/gearbuilder/gearbuilder-set.component.ts b/apps/web/app/pages/tools/gearbuilder/gearbuilder-set.component.ts
new file mode 100644
index 00000000..0986be38
--- /dev/null
+++ b/apps/web/app/pages/tools/gearbuilder/gearbuilder-set.component.ts
@@ -0,0 +1,75 @@
+import { CommonModule } from '@angular/common'
+import { Component } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { ActivatedRoute, Router, RouterModule } from '@angular/router'
+import { asyncScheduler, firstValueFrom, map, subscribeOn, switchMap } from 'rxjs'
+import { observeRouteParam } from '~/utils'
+import { ScreenshotModule } from '~/widgets/screenshot'
+import { GearbuilderStatsComponent } from './gearbuilder-stats.component'
+import { GearbuilderStore } from './gearbuidler-store'
+import { GearSlotComponent } from './gearbuilder-slot.component'
+import { Dialog, DialogModule } from '@angular/cdk/dialog'
+import { EQUIP_SLOTS } from '~/nw/utils'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-gearbuilder-set',
+  templateUrl: './gearbuilder-set.component.html',
+  imports: [
+    CommonModule,
+    GearSlotComponent,
+    RouterModule,
+    FormsModule,
+    GearbuilderStatsComponent,
+    ScreenshotModule,
+    DialogModule,
+  ],
+  styleUrls: ['./gearbuilder-set.component.scss'],
+  host: {
+    class: 'layout-content flex-none overflow-x-hidden',
+  },
+})
+export class GearbuilderSetComponent {
+  protected id$ = observeRouteParam(this.route, 'id')
+  protected data$ = this.id$.pipe(switchMap((id) => this.store.observe(id)))
+  protected name$ = this.data$.pipe(map((it) => it?.name))
+
+  protected slots = EQUIP_SLOTS
+  protected compactMode = false
+
+  public constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private store: GearbuilderStore,
+    private dialog: Dialog
+  ) {
+    //
+  }
+
+  protected async updateName(value: string) {
+    const id = await firstValueFrom(this.id$)
+    this.store.update(id, (data) => {
+      data.name = value
+      return data
+    })
+  }
+
+  protected onCompactClicked() {
+    this.compactMode = !this.compactMode
+  }
+
+  protected async onCloneClicked() {
+    const data = await firstValueFrom(this.data$)
+    const id = await this.store.create({
+      name: data?.name ? `${data?.name} (copy)` : 'Unnamed Gearset',
+      items: JSON.parse(JSON.stringify(data?.items)),
+    })
+    this.router.navigate(['..', id], { relativeTo: this.route })
+  }
+
+  protected async onDeleteClicked() {
+    const id = await firstValueFrom(this.id$)
+    this.store.delete(id)
+    this.router.navigate(['..'], { relativeTo: this.route })
+  }
+}
diff --git a/apps/web/app/pages/tools/gearbuilder/gearbuilder-slot.component.html b/apps/web/app/pages/tools/gearbuilder/gearbuilder-slot.component.html
new file mode 100644
index 00000000..51325cb7
--- /dev/null
+++ b/apps/web/app/pages/tools/gearbuilder/gearbuilder-slot.component.html
@@ -0,0 +1,41 @@
+<ng-container *ngIf="vm$ | async; let vm">
+  <div *ngIf="!vm.itemId" class="flex-1 flex items-center justify-center cursor-pointer p-10" (click)="pickItem()">
+    <img [nwImage]="vm.icon" width="128" height="128" />
+  </div>
+  <nwb-item-detail
+    [entityId]="vm.itemId"
+    #detail="detail"
+    [gearScoreOverride]="vm.itemGs"
+    [perkOverride]="perksMapping"
+
+    *ngIf="vm.itemId"
+  >
+    <nwb-item-detail-header (click)="pickItem()" class="cursor-pointer"> </nwb-item-detail-header>
+    <nwb-item-detail-stats
+      [gearScoreEditable]="true"
+      (gearScoreEdit)="isGearScoreOpen = !isGearScoreOpen"
+      #stats="itemDetailStats"
+    ></nwb-item-detail-stats>
+    <hr class="item-detail-divider" />
+    <nwb-item-detail-perks (editPerk)="pickPerk($event)" [perkEditable]="true"></nwb-item-detail-perks>
+    <ng-container *ngIf="!compact">
+      <hr class="item-detail-divider" />
+      <nwb-item-detail-description></nwb-item-detail-description>
+      <hr class="item-detail-divider" />
+      <nwb-item-detail-info></nwb-item-detail-info>
+    </ng-container>
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="stats.gearScoreOverlayOrigin"
+      [cdkConnectedOverlayOpen]="isGearScoreOpen"
+      [cdkConnectedOverlayHasBackdrop]="true"
+      (backdropClick)="isGearScoreOpen = false"
+      (detach)="isGearScoreOpen = false"
+    >
+      <div class="w-80 p-2 flex flex-row rounded-3xl bg-base-300">
+        <input type="range" min="100" max="625" step="1" [ngModel]="vm.itemGs" (ngModelChange)="updateGearScore($event)" class="range range-sm range-primary" />
+      </div>
+    </ng-template>
+  </nwb-item-detail>
+</ng-container>
diff --git a/apps/web/app/pages/tools/gearbuilder/gearbuilder-slot.component.ts b/apps/web/app/pages/tools/gearbuilder/gearbuilder-slot.component.ts
new file mode 100644
index 00000000..6ef8f53d
--- /dev/null
+++ b/apps/web/app/pages/tools/gearbuilder/gearbuilder-slot.component.ts
@@ -0,0 +1,267 @@
+import { Dialog, DialogModule } from '@angular/cdk/dialog'
+import { OverlayModule } from '@angular/cdk/overlay'
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Injector, Input, QueryList, ViewChildren } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { ItemDefinitionMaster, Perkbuckets } from '@nw-data/types'
+import {
+  BehaviorSubject,
+  combineLatest,
+  defer,
+  distinctUntilChanged,
+  filter,
+  firstValueFrom,
+  map,
+  Observable,
+  of,
+  switchMap,
+  take,
+  tap,
+} from 'rxjs'
+
+import { NwDbService, NwModule } from '~/nw'
+import { DataTableModule, DataTablePickerDialog } from '~/ui/data-table'
+import { ItemsTableAdapter, PerksTableAdapter } from '~/widgets/adapter'
+import { ItemDetailModule, PerkDetail, PerkOverrideFn } from '~/widgets/item-detail'
+
+import { isEqual } from 'lodash'
+import { EquipSlot } from '~/nw/utils'
+import { deferStateFlat, shareReplayRefCount } from '~/utils'
+import { ItemDetailComponent } from '~/widgets/item-detail/item-detail.component'
+import { GearbuilderStore, GearsetRecord } from './gearbuidler-store'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-gearbuilder-slot',
+  templateUrl: './gearbuilder-slot.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule, DialogModule, FormsModule, OverlayModule, ItemDetailModule, DataTableModule],
+  host: {
+    class: 'block bg-base-100 rounded-md flex flex-col',
+  },
+})
+export class GearSlotComponent {
+  @Input()
+  public set recordId(value: string) {
+    this.recordId$.next(value)
+  }
+  public get recordId() {
+    return this.recordId$.value
+  }
+
+  @Input()
+  public set slot(value: EquipSlot) {
+    this.slot$.next(value)
+  }
+  public get slot() {
+    return this.slot$.value
+  }
+
+  @Input()
+  public compact: boolean
+
+  @ViewChildren(ItemDetailComponent)
+  protected itemDetail: QueryList<ItemDetailComponent>
+
+  protected vm$ = deferStateFlat(() =>
+    combineLatest({
+      slot: this.slot$,
+      recordId: this.recordId$,
+      record: this.record$,
+      icon: this.slot$.pipe(map((it) => it.icon)),
+      itemType: this.slot$.pipe(map((it) => it.itemType)),
+      itemId: this.slotItem$.pipe(map((it) => it?.itemId)),
+      itemGs: this.slotItem$.pipe(map((it) => it?.gearScore)),
+      itemPerks: this.slotItem$.pipe(map((it) => it?.perks)),
+    })
+  ).pipe(shareReplayRefCount(1))
+
+  private slot$ = new BehaviorSubject<EquipSlot>(null)
+  private recordId$ = new BehaviorSubject<string>(null)
+  private record$: Observable<GearsetRecord> = defer(() => this.recordId$)
+    .pipe(switchMap((it) => this.store.observe(it)))
+    .pipe(distinctUntilChanged(isEqual))
+    .pipe(shareReplayRefCount(1))
+
+  protected slotItem$ = defer(() =>
+    combineLatest({
+      slot: this.slot$,
+      record: this.record$,
+      items: this.db.itemsMap,
+    })
+  )
+    .pipe(
+      map(({ slot, record, items }) => {
+        const data = record?.items?.[slot.id] || {}
+        return {
+          ...data,
+          item: items.get(data?.itemId),
+        }
+      })
+    )
+    .pipe(shareReplayRefCount(1))
+
+  protected isGearScoreOpen: boolean
+
+  public constructor(
+    private db: NwDbService,
+    private dialog: Dialog,
+    private injector: Injector,
+    private store: GearbuilderStore
+  ) {
+    //
+  }
+
+  protected async updateGearScore(value: number) {
+    const slotId = this.slot.id
+    const recordId = this.recordId
+    this.store.update(recordId, (data) => {
+      data.items[slotId] = data.items[slotId] || {}
+      data.items[slotId].gearScore = value
+      return data
+    })
+  }
+
+  protected perksMapping: PerkOverrideFn = (item: ItemDefinitionMaster, key: string) => {
+    const perkId$ = this.slotItem$.pipe(map((it) => it.perks?.[key]))
+    return this.db.perk(perkId$)
+  }
+
+  protected async pickItem() {
+    const slotId = this.slot.id
+    const recordId = this.recordId
+    const itemId = (await firstValueFrom(this.slotItem$))?.itemId
+
+    this.dialog.closeAll()
+    this.openItemsPicker(itemId)
+      .closed.pipe(take(1))
+      .pipe(filter((it) => it !== undefined))
+      .pipe(filter((it) => it !== itemId))
+      .pipe(
+        switchMap((it: string) =>
+          combineLatest({
+            itemId: of(it),
+            items: this.db.itemsMap,
+          })
+        )
+      )
+      .subscribe(({ itemId, items }) => {
+        const item = itemId && items.get(itemId)
+        this.store.update(recordId, (data) => {
+          if (!item) {
+            delete data.items[slotId]
+            return data
+          }
+          data.items[slotId] = {
+            itemId: itemId,
+            perks: {},
+          }
+          return data
+        })
+      })
+  }
+
+  protected async pickPerk(detail: PerkDetail) {
+    const slotId = this.slot.id
+    const recordId = this.recordId
+    const perks = (await firstValueFrom(this.slotItem$))?.perks
+    const perkId = perks?.[detail.key]
+
+    this.dialog.closeAll()
+    this.openPerksPicker(perkId, detail)
+      .closed.pipe(take(1))
+      .pipe(filter((it) => it !== undefined))
+      .subscribe((value: string) => {
+        if (perkId === value) {
+          return
+        }
+        this.store.update(recordId, (data) => {
+          data.items[slotId] = data.items[slotId] || {}
+          data.items[slotId].perks = data.items[slotId].perks || {}
+          data.items[slotId].perks[detail.key] = value
+          return data
+        })
+      })
+  }
+
+  private openItemsPicker(value: string) {
+    const src$ = combineLatest({
+      items: this.db.items,
+      type: this.slot$.pipe(map((it) => it.itemType)),
+    }).pipe(
+      map(({ items, type }) => {
+        return items.filter((it) => it.ItemClass?.includes(type))
+      })
+    )
+    return this.dialog.open(DataTablePickerDialog, {
+      data: value,
+      injector: Injector.create({
+        providers: [
+          ItemsTableAdapter.provider({
+            hideUserData: true,
+            source: src$,
+          }),
+        ],
+        parent: this.injector,
+      }),
+      panelClass: ['w-full', 'h-full'],
+    })
+  }
+
+  private openPerksPicker(value: string, detail: PerkDetail) {
+    const src$ = combineLatest({
+      perks: this.db.perks,
+      buckets: this.db.perkBucketsMap,
+      type: this.slot$.pipe(map((it) => it.itemType)),
+      item: this.slotItem$?.pipe(map((it) => it.item)),
+    }).pipe(
+      map(({ perks, buckets, type, item }) => {
+        const bucketId = detail.bucket?.PerkBucketID
+        const ids = bucketId ? getPerkIds(bucketId, buckets) : new Set()
+        const isGem = detail.perk?.PerkType === 'Gem'
+        return perks
+          .filter((it) => {
+            if (ids.has(it.PerkID)) {
+              return true
+            }
+            if (isGem && item.CanReplaceGem) {
+              return it.PerkType === 'Gem'
+            }
+            return false
+          })
+          .filter((it) => item.ItemClass?.some((tag) => it.ItemClass?.includes(tag)))
+      })
+    )
+
+    return this.dialog.open(DataTablePickerDialog, {
+      data: value,
+      injector: Injector.create({
+        providers: [
+          PerksTableAdapter.provider({
+            source: src$,
+          }),
+        ],
+        parent: this.injector,
+      }),
+      panelClass: ['w-full', 'h-full'],
+    })
+  }
+}
+
+function getPerkIds(bucketId: string, buckets: Map<string, Perkbuckets>) {
+  const bucket = buckets.get(bucketId)
+  const result = new Set<string>()
+  const ids = Object.keys(bucket)
+    .filter((key: string) => /^Perk\d+$/.test(key))
+    .map((key) => bucket[key] as string)
+  for (const id of ids) {
+    if (id.startsWith('[PBID]')) {
+      getPerkIds(id.replace('[PBID]', ''), buckets).forEach((value) => {
+        result.add(value)
+      })
+    } else {
+      result.add(id)
+    }
+  }
+  return result
+}
diff --git a/apps/web/app/pages/tools/gearbuilder/gearbuilder-stats.component.html b/apps/web/app/pages/tools/gearbuilder/gearbuilder-stats.component.html
new file mode 100644
index 00000000..08e4d53e
--- /dev/null
+++ b/apps/web/app/pages/tools/gearbuilder/gearbuilder-stats.component.html
@@ -0,0 +1,81 @@
+<ng-container *ngIf="data$ | async; let data">
+  <div class="stats stats-vertical">
+    <div class="stat">
+      <div class="stat-value"> {{ data.gearScore | number:'0.0-0' }}</div>
+      <div class="stat-desc">Gear Score</div>
+    </div>
+  </div>
+
+  <div class="flex flex-col layout-pad layout-gap">
+    <nwb-property-grid
+      *ngIf="data.summary; let summary"
+      [humanizeNames]="true"
+      [numberFormat]="'0.0-4'"
+      class="gap-x-1"
+    >
+      <ng-container *ngFor="let row of summary">
+        <span class="text-right font-bold">
+          <ng-container *ngIf="row.percent">{{ row.percent | percent: '0.0-1' }}</ng-container>
+          <ng-container *ngIf="row.value">{{ row.value | number: '0.0-2' }}</ng-container>
+        </span>
+        <span class="opacity-50">{{ row.label | nwText }}</span>
+      </ng-container>
+    </nwb-property-grid>
+
+    <nwb-property-grid class="gap-2">
+      <ng-container *ngFor="let info of data.stackable">
+        <a [nwInfoLink]="info.perk.PerkID" [nwInfoResource]="'perk'">
+          <img [nwImage]="info.perk.IconPath" class="w-8 h-8" />
+        </a>
+        <div class="text-sky-600">
+
+          <b [nwText]="info.perk.DisplayName"></b>
+          <b class="text-primary"> &times; {{ info.count }} </b>
+          <span>
+            {{ info.perk.Description | nwText: { perkMultiplier: getPerkMultiplier(info) } }}
+          </span>
+        </div>
+      </ng-container>
+    </nwb-property-grid>
+  </div>
+
+  <!-- <div class="flex-1 layout-pad transition-opacity opacity-0 hover:opacity-100">
+    <button class="btn btn-block btn-sm btn-outline" (click)="showSummary()">More</button>
+  </div> -->
+
+  <ng-template #tplSummary>
+    <div class="bg-base-300 p-3 rounded-md w-full h-full overflow-auto">
+      <div class="grid grid-cols-fill layout-gap">
+        <div *ngFor="let info of data.perks" class="bg-base-200 rounded-md overflow-x-hidden">
+          <div class="flex flex-row items-center gap-1 bg-base-100 px-2 py-1 font-bold">
+            <a [nwInfoLink]="info.perk.PerkID" [nwInfoResource]="'perk'">
+              <img [nwImage]="info.perk.IconPath" class="w-8 h-8" />
+            </a>
+            <span class="flex-1 text-sky-600 overflow-hidden text-ellipsis" [nwText]="info.perk.DisplayName"></span>
+          </div>
+          <div class="layout-pad italic text-md">
+            {{ info.perk.Description | nwText: { perkMultiplier: getPerkMultiplier(info) } }}
+          </div>
+          <nwb-property-grid class="gap-x-1 rounded-b-md layout-pad-x layout-pad-b pt-2 text-xs">
+            <ng-container *ngIf="info.count > 1">
+              <span class="italic min-w-[160px]">Times Equipped</span>
+              <code class="italic text-primary">&times; {{ info.count }}</code>
+            </ng-container>
+            <ng-container *ngIf="info.scale > 1">
+              <span class="italic min-w-[160px]">Perk Scale</span>
+              <code class="italic text-primary">&times; {{ info.scale | number: '1.0-4' }}</code>
+            </ng-container>
+            <ng-container *ngFor="let row of info.abilities | nwbEntries">
+              <span class="min-w-[160px]">{{ row.key }}</span>
+              <code>{{ valueFormatter(row.value, row.key) }}</code>
+            </ng-container>
+            <ng-container *ngFor="let row of info.affix | nwbEntries">
+              <span class="min-w-[160px]">{{ row.key }}</span>
+              <code>{{ valueFormatter(row.value, row.key) }}</code>
+            </ng-container>
+          </nwb-property-grid>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+</ng-container>
diff --git a/apps/web/app/pages/tools/gearbuilder/gearbuilder-stats.component.ts b/apps/web/app/pages/tools/gearbuilder/gearbuilder-stats.component.ts
new file mode 100644
index 00000000..ff81598a
--- /dev/null
+++ b/apps/web/app/pages/tools/gearbuilder/gearbuilder-stats.component.ts
@@ -0,0 +1,190 @@
+import { Dialog, DialogModule } from '@angular/cdk/dialog'
+import { CommonModule, DecimalPipe, PercentPipe } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild } from '@angular/core'
+import { Ability, Affixstats, Perks } from '@nw-data/types'
+import { groupBy, sortBy } from 'lodash'
+import { combineLatest, defer, map, ReplaySubject } from 'rxjs'
+import { TranslateService } from '~/i18n'
+import { NwDbService, NwModule } from '~/nw'
+import {
+  EquipSlotId,
+  EQUIP_SLOTS,
+  getAffixABSs,
+  getAffixMODs,
+  getArmorRatingElemental,
+  getArmorRatingPhysical,
+  getItemMaxGearScore,
+  getItemPerkBucketKeys,
+  getItemPerkKeys,
+  getPerkMultiplier,
+  stripAbilityProperties,
+  stripAffixProperties,
+  totalGearScore,
+} from '~/nw/utils'
+import { PropertyGridModule } from '~/ui/property-grid'
+import { GearsetRecord } from './gearbuidler-store'
+
+interface PerkDetailInfo {
+  perk: Perks
+  count: number
+  scale: number
+  abilities: Array<Partial<Ability>>
+  affix: Partial<Affixstats>
+  maybeStackable?: boolean
+}
+
+@Component({
+  standalone: true,
+  selector: 'nwb-gearbuilder-stats',
+  templateUrl: './gearbuilder-stats.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule, PropertyGridModule, DialogModule],
+  providers: [PercentPipe, DecimalPipe],
+  host: {
+    class: 'block bg-base-100 rounded-md flex flex-col',
+  },
+})
+export class GearbuilderStatsComponent {
+  @Input()
+  public set entry(value: GearsetRecord) {
+    this.entry$.next(value)
+  }
+
+  protected data$ = defer(() => this.resolvePerks())
+
+  private entry$ = new ReplaySubject<GearsetRecord>()
+
+  @ViewChild('tplSummary')
+  protected tplSummary: TemplateRef<any>
+
+  protected valueFormatter = (value: any, key?: string) => {
+    if (typeof value !== 'number') {
+      return value
+    }
+    return this.decimal.transform(value, '0.0-4')
+  }
+
+  public constructor(
+    private db: NwDbService,
+    private decimal: DecimalPipe,
+    private dialog: Dialog,
+    private i18n: TranslateService
+  ) {
+    //
+  }
+
+  protected getPerkMultiplier(info: PerkDetailInfo) {
+    if (info.maybeStackable) {
+      return info.count * info.scale
+    }
+    return info.scale
+  }
+
+  protected showSummary() {
+    this.dialog.closeAll()
+    this.dialog.open(this.tplSummary, {
+      panelClass: ['w-full', 'h-full', 'p-6', 'max-w-[2000px]'],
+    })
+  }
+
+  private resolvePerks() {
+    return combineLatest({
+      entry: this.entry$,
+      itemsMap: this.db.itemsMap,
+      perksMap: this.db.perksMap,
+      affixMap: this.db.affixstatsMap,
+      abilityMap: this.db.abilitiesMap,
+      armorsMap: this.db.armorsMap,
+      weaponsMap: this.db.weaponsMap,
+    }).pipe(
+      map(({ entry, itemsMap, perksMap, affixMap, abilityMap, armorsMap, weaponsMap }) => {
+        let weight = 0
+        let ratingElemental = 0
+        let ratingPhysical = 0
+        const infos: Record<string, PerkDetailInfo> = {}
+        const gsSlots: Array<{ id: EquipSlotId; gearScore: number }> = []
+
+        const entries = Object.entries(entry.items || {}).filter(([slotId]) => {
+          return EQUIP_SLOTS.some((it) => it.id === slotId)
+        })
+        for (const [slotId, slot] of entries) {
+          const item = itemsMap.get(slot?.itemId)
+          if (!item) {
+            continue
+          }
+
+          const gearScore = slot.gearScore || getItemMaxGearScore(item)
+          gsSlots.push({
+            id: slotId as EquipSlotId,
+            gearScore: gearScore,
+          })
+
+          const stats = armorsMap.get(item.ItemStatsRef) || weaponsMap.get(item.ItemStatsRef)
+          weight += stats?.WeightOverride || item.Weight || 0
+          ratingElemental += getArmorRatingElemental(stats, gearScore) || 0
+          ratingPhysical += getArmorRatingPhysical(stats, gearScore) || 0
+
+          const fixedPerks = getItemPerkKeys(item)
+            .map((key) => perksMap.get(slot?.perks?.[key] || item[key]))
+            .filter((it) => !!it)
+          const addedPerks = (getItemPerkBucketKeys(item) || [])
+            .map((key) => perksMap.get(slot?.perks?.[key]))
+            .filter((it) => !!it)
+          for (const perk of [...fixedPerks, ...addedPerks]) {
+            if (infos[perk.PerkID]) {
+              infos[perk.PerkID].count += 1
+              continue
+            }
+            const affix = affixMap.get(perk.Affix)
+            const abilities = perk.EquipAbility?.map((id) => abilityMap.get(id))?.map(stripAbilityProperties)
+            infos[perk.PerkID] = {
+              count: 1,
+              perk: perk,
+              scale: getPerkMultiplier(perk, gearScore),
+              affix: affix ? stripAffixProperties(affix) : null,
+              abilities: abilities,
+              maybeStackable: abilities?.some((it) => it.IsStackableAbility),
+            }
+          }
+        }
+        const perks = Object.values(infos)
+        const summary = this.collectStats(perks)
+
+        summary.unshift({
+          key: 'armor-rating-physical',
+          label: 'Armor Rating - Physical',
+          value: ratingPhysical,
+          percent: 0,
+        })
+        summary.unshift({
+          key: 'armor-rating-elemetnal',
+          label: 'Armor Rating - Elemental',
+          value: ratingElemental,
+          percent: 0,
+        })
+        return {
+          perks: perks,
+          stackable: perks.filter((it) => it.maybeStackable),
+          summary: summary,
+          gearScore: totalGearScore(gsSlots),
+          weight,
+        }
+      })
+    )
+  }
+
+  private collectStats(data: PerkDetailInfo[]) {
+    const stats: Record<string, { key: string; label: string[] | string; value: number; percent: number }> = {}
+    for (const info of data) {
+      for (const mod of getAffixMODs(info.affix, info.scale)) {
+        stats[mod.key] = stats[mod.key] || { key: mod.key, label: [mod.label], value: 0, percent: 0 }
+        stats[mod.key].value += Number(mod.value) * info.count
+      }
+      for (const mod of getAffixABSs(info.affix, info.scale)) {
+        stats[mod.key] = stats[mod.key] || { key: mod.key, label: mod.label, value: 0, percent: 0 }
+        stats[mod.key].percent += Number(mod.value) * info.count
+      }
+    }
+    return sortBy(Object.values(stats), (it) => it.key)
+  }
+}
diff --git a/apps/web/app/pages/tools/gearbuilder/gearbuilder.component.html b/apps/web/app/pages/tools/gearbuilder/gearbuilder.component.html
new file mode 100644
index 00000000..3200d390
--- /dev/null
+++ b/apps/web/app/pages/tools/gearbuilder/gearbuilder.component.html
@@ -0,0 +1,9 @@
+<div class="rounded-md overflow-clip bg-base-100">
+  <ng-container *ngFor="let id of allIds | async; trackBy: trackByIndex">
+    <a [gearLink]="id" [routerLink]="[id]" class="flex flex-col p-4 transition-colors bg-base-100 hover:bg-base-300"></a>
+    <hr class="mx-4 opacity-25" />
+  </ng-container>
+  <div class="flex items-center justify-center p-10">
+    <button class="btn btn-primary" (click)="onCreateClicked()">Create New Gearset</button>
+  </div>
+</div>
diff --git a/apps/web/app/pages/tools/gearbuilder/gearbuilder.component.ts b/apps/web/app/pages/tools/gearbuilder/gearbuilder.component.ts
new file mode 100644
index 00000000..4eafd5ac
--- /dev/null
+++ b/apps/web/app/pages/tools/gearbuilder/gearbuilder.component.ts
@@ -0,0 +1,91 @@
+import { CommonModule } from '@angular/common'
+import { Component, Input, TrackByFunction } from '@angular/core'
+import { ActivatedRoute, Router, RouterModule } from '@angular/router'
+import { combineLatest, defer, map, ReplaySubject, switchMap } from 'rxjs'
+import { NwDbService } from '~/nw'
+import { EquipSlotId, getItemMaxGearScore, getWeightLabel, totalGearScore } from '~/nw/utils'
+import { GearbuilderStore } from './gearbuidler-store'
+import { GearSlotComponent } from './gearbuilder-slot.component'
+
+@Component({
+  standalone: true,
+  selector: 'a[gearLink]',
+  template: `
+    <ng-container *ngIf="infos$ | async; let info">
+      <span>{{ info.name }} </span>
+      <span class="opacity-50 text-sm capitalize">
+        {{ info.gs || 0 | number: '0.0-0' }} GS {{ info.weight }}
+      </span>
+    </ng-container>
+  `,
+  imports: [CommonModule, GearSlotComponent, RouterModule],
+  host: {
+    class: 'layout-content flex-none overflow-x-hidden',
+  },
+})
+export class GearbuilderRowComponent {
+  @Input()
+  public set gearLink(id: string) {
+    this.id$.next(id)
+  }
+
+  private id$ = new ReplaySubject<string>()
+  private record$ = this.id$.pipe(switchMap((id) => this.store.observe(id)))
+  protected infos$ = combineLatest({
+    items: this.db.itemsMap,
+    armors: this.db.armorsMap,
+    record: this.record$,
+  }).pipe(
+    map(({ items, armors, record }) => {
+      const gs: Array<{ id: EquipSlotId; gearScore: number }> = []
+      let weight = 0
+      Object.entries(record.items || {}).forEach(([slotId, entry]) => {
+        const item = items.get(entry?.itemId)
+        gs.push({
+          id: slotId as any,
+          gearScore: entry?.gearScore || item ? getItemMaxGearScore(item) : 0 || 0,
+        })
+        weight += (armors.get(item?.ItemStatsRef)?.WeightOverride || 0) / 10
+      })
+      return {
+        name: record.name,
+        gs: totalGearScore(gs),
+        weight: getWeightLabel(weight),
+      }
+    })
+  )
+
+  protected weight$ = this.record$.pipe()
+  public constructor(private store: GearbuilderStore, private db: NwDbService) {
+    //
+  }
+}
+
+@Component({
+  standalone: true,
+  selector: 'nwb-gearbuilder-page',
+  templateUrl: './gearbuilder.component.html',
+  imports: [CommonModule, GearSlotComponent, RouterModule, GearbuilderRowComponent],
+  host: {
+    class: 'layout-content flex-none overflow-x-hidden',
+  },
+})
+export class GearbuilderComponent {
+  protected allIds = defer(() => this.store.getIds())
+  protected trackByIndex: TrackByFunction<any> = (i) => i
+
+  public constructor(private store: GearbuilderStore, private router: Router, private route: ActivatedRoute) {
+    //
+  }
+
+  protected entry(id: string) {
+    return this.store.observe(id)
+  }
+
+  protected async onCreateClicked() {
+    const id = await this.store.create()
+    this.router.navigate([id], {
+      relativeTo: this.route,
+    })
+  }
+}
diff --git a/apps/web/app/pages/tools/gearbuilder/gearbuilder.module.ts b/apps/web/app/pages/tools/gearbuilder/gearbuilder.module.ts
new file mode 100644
index 00000000..21136211
--- /dev/null
+++ b/apps/web/app/pages/tools/gearbuilder/gearbuilder.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { GearbuilderSetComponent } from './gearbuilder-set.component'
+import { GearbuilderComponent } from './gearbuilder.component'
+
+export const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: GearbuilderComponent,
+  },
+  {
+    path: ':id',
+    component: GearbuilderSetComponent,
+  },
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [],
+})
+export class GearbuilderModule {
+  //
+}
diff --git a/apps/web/app/pages/tools/gearbuilder/index.ts b/apps/web/app/pages/tools/gearbuilder/index.ts
new file mode 100644
index 00000000..e773fe36
--- /dev/null
+++ b/apps/web/app/pages/tools/gearbuilder/index.ts
@@ -0,0 +1 @@
+export * from './gearbuilder.module'
diff --git a/apps/web/app/pages/tools/gearbuilder/slots.ts b/apps/web/app/pages/tools/gearbuilder/slots.ts
new file mode 100644
index 00000000..1836a85c
--- /dev/null
+++ b/apps/web/app/pages/tools/gearbuilder/slots.ts
@@ -0,0 +1,44 @@
+
+export const SLOTS = [
+  {
+    id: 'head',
+    icon: 'assets/icons/slots/lightheada.png',
+    name: 'ui_itemtypedescription_head_slot',
+    itemType: 'EquippableHead',
+  },
+  {
+    id: 'chest',
+    icon: 'assets/icons/slots/lightchesta.png',
+    name: 'ui_itemtypedescription_chest_slot',
+    itemType: 'EquippableChest',
+  },
+  {
+    id: 'hands',
+    icon: 'assets/icons/slots/lighthandsa.png',
+    name: 'ui_itemtypedescription_hands_slot',
+    itemType: 'EquippableHands',
+  },
+  {
+    id: 'legs',
+    icon: 'assets/icons/slots/lightlegsa.png',
+    name: 'ui_itemtypedescription_legs_slot',
+    itemType: 'EquippableLegs',
+  },
+  {
+    id: 'feet',
+    icon: 'assets/icons/slots/lightfeeta.png',
+    name: 'ui_itemtypedescription_feet_slot',
+    itemType: 'EquippableFeet',
+  },
+  { id: 'weapon1', icon: 'assets/icons/slots/weapon.png', name: 'ui_weapon1', itemType: 'Weapon' },
+  { id: 'weapon2', icon: 'assets/icons/slots/weapon.png', name: 'ui_weapon2', itemType: 'Weapon' },
+  { id: 'shield', icon: 'assets/icons/slots/weapon.png', name: 'ui_weapon3', itemType: 'Shield' },
+  {
+    id: 'amulet',
+    icon: 'assets/icons/slots/trinketp.png',
+    name: 'ui_amulet_slot_tooltip',
+    itemType: 'EquippableAmulet',
+  },
+  { id: 'ring', icon: 'assets/icons/slots/trinketa.png', name: 'ui_ring_slot_tooltip', itemType: 'EquippableRing' },
+  { id: 'earring', icon: 'assets/icons/slots/trinkete.png', name: 'ui_unlock_token_slot', itemType: 'EquippableToken' },
+]
diff --git a/apps/web/app/pages/tools/info-cards/gems-overview.component.html b/apps/web/app/pages/tools/info-cards/gems-overview.component.html
new file mode 100644
index 00000000..bf2fc462
--- /dev/null
+++ b/apps/web/app/pages/tools/info-cards/gems-overview.component.html
@@ -0,0 +1,18 @@
+<div class="layout-content p-3">
+  <div class="grid"  [nwbScreenshotFrame]="'Gemstones'">
+      <nwb-item-detail [entityId]="item.$itemId" *ngFor="let item of items | async">
+        <nwb-item-detail-header [enableInfoLink]="true"></nwb-item-detail-header>
+        <nwb-item-detail-perks></nwb-item-detail-perks>
+        <!-- <nwb-item-detail-description></nwb-item-detail-description>
+        <hr class="item-detail-divider" /> -->
+        <div class="p-3">
+          <div *ngFor="let ingr of item.$ingredients" class="flex flex-row gap-1 m-1 justify-start items-center">
+            <picture [nwIcon]="ingr.item" class="w-8 h-8 nw-icon flex-none"></picture>
+            <span>{{ ingr.quantity }}</span>
+            <span>&times;</span>
+            <span [nwText]="ingr.item?.Name"></span>
+          </div>
+        </div>
+      </nwb-item-detail>
+  </div>
+</div>
diff --git a/apps/web/app/pages/tools/info-cards/gems-overview.component.scss b/apps/web/app/pages/tools/info-cards/gems-overview.component.scss
new file mode 100644
index 00000000..f2705eaa
--- /dev/null
+++ b/apps/web/app/pages/tools/info-cards/gems-overview.component.scss
@@ -0,0 +1,9 @@
+:host {
+  .grid {
+
+    display:grid;
+    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
+    column-gap: 1rem;
+    row-gap: 1rem;
+  }
+}
diff --git a/apps/web/app/pages/tools/info-cards/gems-overview.component.ts b/apps/web/app/pages/tools/info-cards/gems-overview.component.ts
new file mode 100644
index 00000000..eb4435f2
--- /dev/null
+++ b/apps/web/app/pages/tools/info-cards/gems-overview.component.ts
@@ -0,0 +1,66 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { Crafting, Housingitems, ItemDefinitionMaster } from '@nw-data/types'
+import { combineLatest, defer, map } from 'rxjs'
+import { NwDbService, NwModule } from '~/nw'
+import { getIngretientsFromRecipe, getItemIdFromRecipe } from '~/nw/utils'
+import { ItemDetailModule } from '~/widgets/item-detail'
+import { ScreenshotModule } from '~/widgets/screenshot'
+
+function isGemItem(item: Crafting) {
+  return item.CraftingCategory === 'CutGems'
+}
+
+type RecipeWithItem = Crafting & {
+  $item: ItemDefinitionMaster | Housingitems
+  $itemId: string
+  $ingredients: Array<{
+    quantity: number
+    item: ItemDefinitionMaster | Housingitems
+  }>
+}
+
+@Component({
+  standalone: true,
+  selector: 'nwb-gems-overview',
+  templateUrl: './gems-overview.component.html',
+  styleUrls: ['./gems-overview.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule, ItemDetailModule, ScreenshotModule],
+  host: {
+    class: 'layout-row bg-base-300',
+  },
+})
+export class GemsOverviewComponent {
+  protected recipes = defer(() => this.db.recipes).pipe(map((it) => it.filter(isGemItem)))
+
+  protected items = defer(() =>
+    combineLatest({
+      recipes: this.recipes,
+      items: this.db.itemsMap,
+      housing: this.db.housingItemsMap,
+    })
+  ).pipe(
+    map(({ recipes, items, housing }) => {
+      return recipes.map((recipe): RecipeWithItem => {
+        const itemId = getItemIdFromRecipe(recipe)
+        return {
+          ...recipe,
+          $itemId: itemId,
+          $item: items.get(itemId) || housing.get(itemId),
+          $ingredients: getIngretientsFromRecipe(recipe).map((it) => {
+            const ingId = it.type === 'Category_Only' ?'SolventT5' : it.ingredient
+            return {
+              quantity: it.quantity,
+              item: items.get(ingId),
+            }
+          }),
+        }
+      }).filter((it) => it.$item?.Tier === 5)
+    })
+  )
+
+  public constructor(private db: NwDbService) {
+    //
+  }
+}
diff --git a/apps/web/app/pages/tools/info-cards/index.ts b/apps/web/app/pages/tools/info-cards/index.ts
new file mode 100644
index 00000000..e13fad40
--- /dev/null
+++ b/apps/web/app/pages/tools/info-cards/index.ts
@@ -0,0 +1 @@
+export * from './info-cards.module'
diff --git a/apps/web/app/pages/tools/info-cards/info-cards.component.html b/apps/web/app/pages/tools/info-cards/info-cards.component.html
new file mode 100644
index 00000000..1b18ef5a
--- /dev/null
+++ b/apps/web/app/pages/tools/info-cards/info-cards.component.html
@@ -0,0 +1,26 @@
+<div class="flex-none flex flex-row bg-base-300 rounded-t-md">
+  <nwb-tab-menu class="bg-base-300 rounded-t-md flex-1">
+    <ng-template>
+      <li [routerLinkActive]="'bordered'">
+        <a [routerLink]="'trophies'"> Trophies </a>
+      </li>
+      <li [routerLinkActive]="'bordered'">
+        <a [routerLink]="'runes'"> Runes </a>
+      </li>
+      <li [routerLinkActive]="'bordered'">
+        <a [routerLink]="'vitals'"> Vital Families </a>
+      </li>
+      <li [routerLinkActive]="'bordered'">
+        <a [routerLink]="'gems'"> Gems </a>
+      </li>
+    </ng-template>
+  </nwb-tab-menu>
+  <div class="flex-none">
+    <ul class="menu menu-horizontal p-0">
+      <li>
+        <nwb-screenshot-button class="tooltip-left"></nwb-screenshot-button>
+      </li>
+    </ul>
+  </div>
+</div>
+<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/tools/info-cards/info-cards.component.ts b/apps/web/app/pages/tools/info-cards/info-cards.component.ts
new file mode 100644
index 00000000..3c9bb49e
--- /dev/null
+++ b/apps/web/app/pages/tools/info-cards/info-cards.component.ts
@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { TabMenuModule } from '~/ui/tab-menu'
+import { ScreenshotModule } from '~/widgets/screenshot'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-info-cards-page',
+  templateUrl: './info-cards.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, ScreenshotModule, TabMenuModule],
+  host: {
+    class: 'layout-col bg-base-300 rounded-md overflow-clip',
+  }
+})
+export class InfoCardsComponent {
+
+}
diff --git a/apps/web/app/pages/tools/info-cards/info-cards.module.ts b/apps/web/app/pages/tools/info-cards/info-cards.module.ts
new file mode 100644
index 00000000..5ddebb97
--- /dev/null
+++ b/apps/web/app/pages/tools/info-cards/info-cards.module.ts
@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { GemsOverviewComponent } from './gems-overview.component'
+
+import { InfoCardsComponent } from './info-cards.component'
+import { RunesOverviewComponent } from './runes-overview.component'
+import { TrophiesOverviewComponent } from './trophies-overview.component'
+import { VitalsFamiliesComponent } from './vitals-families.component'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: InfoCardsComponent,
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'trophies',
+      },
+      {
+        path: 'trophies',
+        component: TrophiesOverviewComponent,
+      },
+      {
+        path: 'runes',
+        component: RunesOverviewComponent,
+      },
+      {
+        path: 'vitals',
+        component: VitalsFamiliesComponent,
+      },
+      {
+        path: 'gems',
+        component: GemsOverviewComponent,
+      },
+    ],
+  },
+]
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  declarations: [],
+})
+export class InfoCardsModule {
+  //
+}
diff --git a/apps/web/app/pages/tools/info-cards/runes-overview.component.html b/apps/web/app/pages/tools/info-cards/runes-overview.component.html
new file mode 100644
index 00000000..abfe8c7b
--- /dev/null
+++ b/apps/web/app/pages/tools/info-cards/runes-overview.component.html
@@ -0,0 +1,25 @@
+<div class="layout-content p-3">
+  <div class="grid grid-cols-5 layout-gap min-w-[1800px]" [nwbScreenshotFrame]="'Runes'">
+    <ng-container *ngFor="let row of rows | async">
+      <div *ngFor="let item of row" class="bg-base-100 rounded-md">
+        <nwb-item-detail [entityId]="item.$itemId">
+          <nwb-item-detail-header [enableInfoLink]="true" [enableTracker]="true"></nwb-item-detail-header>
+          <!-- <nwb-item-detail-stats></nwb-item-detail-stats>
+          <hr class="item-detail-divider" /> -->
+          <nwb-item-detail-perks></nwb-item-detail-perks>
+          <hr class="item-detail-divider" />
+          <nwb-item-detail-description></nwb-item-detail-description>
+          <hr class="item-detail-divider" />
+          <div class="p-3 flex flex-col gap-1">
+            <div *ngFor="let ingr of item.$ingredients" class="flex flex-row gap-1 justify-start items-center">
+              <picture [nwIcon]="ingr.item" class="w-8 h-8 nw-icon flex-none"></picture>
+              <span>{{ ingr.quantity }}</span>
+              <span>&times;</span>
+              <span [nwText]="ingr.item.Name"></span>
+            </div>
+          </div>
+        </nwb-item-detail>
+      </div>
+    </ng-container>
+  </div>
+</div>
diff --git a/apps/web/app/pages/crafting/crafting-runes.component.ts b/apps/web/app/pages/tools/info-cards/runes-overview.component.ts
similarity index 80%
rename from apps/web/app/pages/crafting/crafting-runes.component.ts
rename to apps/web/app/pages/tools/info-cards/runes-overview.component.ts
index 2d5fceaf..6561ecd9 100644
--- a/apps/web/app/pages/crafting/crafting-runes.component.ts
+++ b/apps/web/app/pages/tools/info-cards/runes-overview.component.ts
@@ -1,9 +1,12 @@
+import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { Crafting, Housingitems, ItemDefinitionMaster } from '@nw-data/types'
 import { groupBy } from 'lodash'
 import { combineLatest, defer, map } from 'rxjs'
-import { NwDbService } from '~/nw'
+import { NwDbService, NwModule } from '~/nw'
 import { getIngretientsFromRecipe, getItemId, getItemIdFromRecipe } from '~/nw/utils'
+import { ItemDetailModule } from '~/widgets/item-detail'
+import { ScreenshotModule } from '~/widgets/screenshot'
 
 type RecipeWithItem = Crafting & {
   $item: ItemDefinitionMaster | Housingitems
@@ -22,14 +25,16 @@ function isRunestone(it: Crafting) {
 }
 
 @Component({
-  selector: 'nwb-crafting-runes',
-  templateUrl: './crafting-runes.component.html',
+  standalone: true,
+  selector: 'nwb-runes-overview',
+  templateUrl: './runes-overview.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule, ItemDetailModule, ScreenshotModule],
   host: {
-    class: 'layout-content',
+    class: 'layout-row bg-base-300',
   },
 })
-export class CraftingRunesComponent {
+export class RunesOverviewComponent {
   protected recipes = defer(() => this.db.recipes).pipe(map((it) => it.filter(isRunestone)))
 
   protected runes = defer(() =>
diff --git a/apps/web/app/pages/tools/info-cards/trophies-overview.component.html b/apps/web/app/pages/tools/info-cards/trophies-overview.component.html
new file mode 100644
index 00000000..8aa9c602
--- /dev/null
+++ b/apps/web/app/pages/tools/info-cards/trophies-overview.component.html
@@ -0,0 +1,19 @@
+<div class="layout-content p-3">
+  <div class="grid grid-cols-3 layout-gap min-w-[1100px]" [nwbScreenshotFrame]="'Trophies'">
+    <ng-container *ngFor="let row of rows | async">
+      <nwb-item-detail [entityId]="item.$itemId"  *ngFor="let item of row">
+        <nwb-item-detail-header [enableTracker]="true" [enableInfoLink]="true"></nwb-item-detail-header>
+        <nwb-item-detail-description></nwb-item-detail-description>
+        <hr class="item-detail-divider" />
+        <div class="p-3">
+          <div *ngFor="let ingr of item.$ingredients" class="flex flex-row gap-1 m-1 justify-start items-center">
+            <picture [nwIcon]="ingr.item" class="w-8 h-8 nw-icon flex-none"></picture>
+            <span>{{ ingr.quantity }}</span>
+            <span>&times;</span>
+            <span [nwText]="ingr.item.Name"></span>
+          </div>
+        </div>
+      </nwb-item-detail>
+    </ng-container>
+  </div>
+</div>
diff --git a/apps/web/app/pages/crafting/crafting-trophies.component.ts b/apps/web/app/pages/tools/info-cards/trophies-overview.component.ts
similarity index 79%
rename from apps/web/app/pages/crafting/crafting-trophies.component.ts
rename to apps/web/app/pages/tools/info-cards/trophies-overview.component.ts
index 89eac11e..79386ead 100644
--- a/apps/web/app/pages/crafting/crafting-trophies.component.ts
+++ b/apps/web/app/pages/tools/info-cards/trophies-overview.component.ts
@@ -1,9 +1,12 @@
+import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { Crafting, Housingitems, ItemDefinitionMaster } from '@nw-data/types'
 import { groupBy } from 'lodash'
 import { combineLatest, defer, map } from 'rxjs'
-import { NwDbService } from '~/nw'
+import { NwDbService, NwModule } from '~/nw'
 import { getIngretientsFromRecipe, getItemId, getItemIdFromRecipe } from '~/nw/utils'
+import { ItemDetailModule } from '~/widgets/item-detail'
+import { ScreenshotModule } from '~/widgets/screenshot'
 
 function isTrophy(item: Crafting) {
   return item.CraftingGroup === 'Trophies'
@@ -19,14 +22,16 @@ type RecipeWithItem = Crafting & {
 }
 
 @Component({
-  selector: 'nwb-crafting-trophies',
-  templateUrl: './crafting-trophies.component.html',
+  standalone: true,
+  selector: 'nwb-trophies-overview',
+  templateUrl: './trophies-overview.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule, ItemDetailModule, ScreenshotModule],
   host: {
-    class: 'layout-content',
+    class: 'layout-row bg-base-300',
   },
 })
-export class CraftingTrophiesComponent {
+export class TrophiesOverviewComponent {
   protected recipes = defer(() => this.db.recipes).pipe(map((it) => it.filter(isTrophy)))
 
   protected trophies = defer(() =>
diff --git a/apps/web/app/pages/tools/info-cards/vitals-families.component.html b/apps/web/app/pages/tools/info-cards/vitals-families.component.html
new file mode 100644
index 00000000..426bd658
--- /dev/null
+++ b/apps/web/app/pages/tools/info-cards/vitals-families.component.html
@@ -0,0 +1,3 @@
+<div class="layout-content p-3">
+  <nwb-vitals-families-list  [nwbScreenshotFrame]="'Vitals-Families'"></nwb-vitals-families-list>
+</div>
diff --git a/apps/web/app/pages/tools/info-cards/vitals-families.component.ts b/apps/web/app/pages/tools/info-cards/vitals-families.component.ts
new file mode 100644
index 00000000..31f69966
--- /dev/null
+++ b/apps/web/app/pages/tools/info-cards/vitals-families.component.ts
@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common'
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'
+import { ScreenshotModule } from '~/widgets/screenshot'
+import { VitalsFamiliesModule } from '~/widgets/vitals-families'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-vitals-families',
+  templateUrl: './vitals-families.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, VitalsFamiliesModule, ScreenshotModule],
+  host: {
+    class: 'layout-row bg-base-300',
+  },
+})
+export class VitalsFamiliesComponent {}
diff --git a/apps/web/app/pages/tools/level-xp/index.ts b/apps/web/app/pages/tools/level-xp/index.ts
new file mode 100644
index 00000000..b966fbc2
--- /dev/null
+++ b/apps/web/app/pages/tools/level-xp/index.ts
@@ -0,0 +1 @@
+export * from './level-xp.module'
diff --git a/apps/web/app/pages/progression/level.component.html b/apps/web/app/pages/tools/level-xp/level-xp.component.html
similarity index 66%
rename from apps/web/app/pages/progression/level.component.html
rename to apps/web/app/pages/tools/level-xp/level-xp.component.html
index 8f739f09..99164d72 100644
--- a/apps/web/app/pages/progression/level.component.html
+++ b/apps/web/app/pages/tools/level-xp/level-xp.component.html
@@ -1,4 +1,4 @@
-<div class="grid grid-cols-1 2xl:grid-cols-12 gap-4">
+<div class="grid grid-cols-1 2xl:grid-cols-12 layout-gap">
   <nwb-xp-chart class="2xl:col-span-7"></nwb-xp-chart>
   <nwb-xp-table class="2xl:col-span-5"></nwb-xp-table>
 </div>
diff --git a/apps/web/app/pages/progression/level.component.scss b/apps/web/app/pages/tools/level-xp/level-xp.component.scss
similarity index 100%
rename from apps/web/app/pages/progression/level.component.scss
rename to apps/web/app/pages/tools/level-xp/level-xp.component.scss
diff --git a/apps/web/app/pages/tools/level-xp/level-xp.component.ts b/apps/web/app/pages/tools/level-xp/level-xp.component.ts
new file mode 100644
index 00000000..230b614d
--- /dev/null
+++ b/apps/web/app/pages/tools/level-xp/level-xp.component.ts
@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { XpTableModule } from '~/widgets/xp-table';
+
+@Component({
+  standalone: true,
+  selector: 'nwb-level-xp-page',
+  templateUrl: './level-xp.component.html',
+  styleUrls: ['./level-xp.component.scss'],
+  imports: [CommonModule, XpTableModule],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LevelXpComponent {
+  //
+}
diff --git a/apps/web/app/pages/tools/level-xp/level-xp.module.ts b/apps/web/app/pages/tools/level-xp/level-xp.module.ts
new file mode 100644
index 00000000..8eb2c2dc
--- /dev/null
+++ b/apps/web/app/pages/tools/level-xp/level-xp.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { LevelXpComponent } from './level-xp.component'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LevelXpComponent,
+  },
+]
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  declarations: [],
+})
+export class LevelXpModule {
+  //
+}
diff --git a/apps/web/app/pages/tools/leveling/index.ts b/apps/web/app/pages/tools/leveling/index.ts
new file mode 100644
index 00000000..1a1c6d1d
--- /dev/null
+++ b/apps/web/app/pages/tools/leveling/index.ts
@@ -0,0 +1 @@
+export * from './leveling.module'
diff --git a/apps/web/app/pages/tools/leveling/level-xp.component.html b/apps/web/app/pages/tools/leveling/level-xp.component.html
new file mode 100644
index 00000000..bccc601a
--- /dev/null
+++ b/apps/web/app/pages/tools/leveling/level-xp.component.html
@@ -0,0 +1,22 @@
+<div class="alert mb-3">
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    <div>
+      <div>Track your character level here.</div>
+      <div>The value is used to adjust perks throughout the application.</div>
+    </div>
+  </div>
+</div>
+
+<div class="flex-1  overflow-auto">
+  <div class="grid grid-cols-1 2xl:grid-cols-12 layout-gap">
+    <div class="2xl:col-span-7">
+      <div class="flex flex-row layout-gap mb-1">
+        <nwb-level-input [(ngModel)]="level" class="flex-none self-center"></nwb-level-input>
+        <nwb-xp-level-info></nwb-xp-level-info>
+      </div>
+      <nwb-xp-chart ></nwb-xp-chart>
+    </div>
+    <nwb-xp-table class="2xl:col-span-5"></nwb-xp-table>
+  </div>
+</div>
diff --git a/apps/web/app/pages/progression/trade.component.scss b/apps/web/app/pages/tools/leveling/level-xp.component.scss
similarity index 100%
rename from apps/web/app/pages/progression/trade.component.scss
rename to apps/web/app/pages/tools/leveling/level-xp.component.scss
diff --git a/apps/web/app/pages/tools/leveling/level-xp.component.ts b/apps/web/app/pages/tools/leveling/level-xp.component.ts
new file mode 100644
index 00000000..d7c52cb3
--- /dev/null
+++ b/apps/web/app/pages/tools/leveling/level-xp.component.ts
@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { CharacterPreferencesService } from '~/preferences'
+import { LevelInputModule } from '~/ui/level-input'
+import { XpTableModule } from '~/widgets/xp-table'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-level-xp-page',
+  templateUrl: './level-xp.component.html',
+  imports: [CommonModule, XpTableModule, LevelInputModule, FormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'layout-col layout-pad',
+  },
+})
+export class LevelXpComponent {
+
+  protected get level() {
+    return this.pref.level.value
+  }
+
+  protected set level(value: number) {
+    this.pref.level.value = Math.min(60, value)
+  }
+
+  public constructor(private pref: CharacterPreferencesService) {
+
+  }
+}
diff --git a/apps/web/app/pages/tools/leveling/leveling.component.html b/apps/web/app/pages/tools/leveling/leveling.component.html
new file mode 100644
index 00000000..55dd26e3
--- /dev/null
+++ b/apps/web/app/pages/tools/leveling/leveling.component.html
@@ -0,0 +1,16 @@
+<div class="flex-none flex flex-row layout-gap bg-base-300 rounded-t-md">
+  <ul class="menu menu-horizontal overflow-x-auto flex-nowrap">
+    <li [routerLinkActive]="'bordered'">
+      <a [routerLink]="'xp'"> Level XP </a>
+    </li>
+    <li [routerLinkActive]="'bordered'">
+      <a [routerLink]="'tradeskills'"> Tradeskills </a>
+    </li>
+
+  </ul>
+  <div class="flex-1"></div>
+  <div class="flex-none">
+    <!-- <nwb-screenshot-button class="btn btn-sm"></nwb-screenshot-button> -->
+  </div>
+</div>
+<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/tools/leveling/leveling.component.ts b/apps/web/app/pages/tools/leveling/leveling.component.ts
new file mode 100644
index 00000000..c7c15a65
--- /dev/null
+++ b/apps/web/app/pages/tools/leveling/leveling.component.ts
@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { QuicksearchModule } from '~/ui/quicksearch'
+import { ScreenshotModule } from '~/widgets/screenshot'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-leveling-page',
+  templateUrl: './leveling.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, QuicksearchModule, ScreenshotModule],
+  host: {
+    class: 'layout-col bg-base-300 rounded-md overflow-clip',
+  },
+})
+export class LevelingComponent {
+  //
+}
diff --git a/apps/web/app/pages/tools/leveling/leveling.module.ts b/apps/web/app/pages/tools/leveling/leveling.module.ts
new file mode 100644
index 00000000..7c14f15d
--- /dev/null
+++ b/apps/web/app/pages/tools/leveling/leveling.module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { LevelXpComponent } from './level-xp.component'
+import { LevelingComponent } from './leveling.component'
+import { TradeskillsComponent } from './tradeskills.component'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LevelingComponent,
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'xp'
+      },
+      {
+        path: 'xp',
+        component: LevelXpComponent,
+      },
+      {
+        path: 'tradeskills',
+        component: TradeskillsComponent,
+      }
+    ]
+  }
+]
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  declarations: [],
+})
+export class LevelingModule {
+  //
+}
diff --git a/apps/web/app/pages/tools/leveling/tradeskills.component.html b/apps/web/app/pages/tools/leveling/tradeskills.component.html
new file mode 100644
index 00000000..9b1fc96b
--- /dev/null
+++ b/apps/web/app/pages/tools/leveling/tradeskills.component.html
@@ -0,0 +1,32 @@
+<div class="alert mb-3">
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    <div>
+      <div>Track your tradeskill levels here.</div>
+      <div>These values are used in the crafting calculator.</div>
+    </div>
+  </div>
+</div>
+
+<div class="flex-none tabs flex-nowrap overflow-x-auto">
+  <ng-container *ngFor="let category of categories | async; let i = index">
+    <a class="tab tab-lifted" [class.tab-active]="isActive(category, i)" (click)="selected = category">{{
+      category
+    }}</a>
+  </ng-container>
+</div>
+<div class="flex-1 bg-base-100 rounded-md rounded-tl-none overflow-auto">
+  <ng-container *ngFor="let category of categories | async; let i = index">
+    <div class="grid items-start grid-cols-1 2xl:grid-cols-12 min-w-[600px]" *ngIf="isActive(category, i)">
+      <div class="xl:col-span-4 grid grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-3 gap-2 p-2">
+        <nwb-tradeskill-input
+          *ngFor="let skill of skillsByCategory(category) | async"
+          [tradeskill]="skill.ID"
+        ></nwb-tradeskill-input>
+      </div>
+      <div class="xl:col-span-8 overflow-hidden">
+        <nwb-tradeskill-chart [category]="category"></nwb-tradeskill-chart>
+      </div>
+    </div>
+  </ng-container>
+</div>
diff --git a/apps/web/app/pages/tools/leveling/tradeskills.component.ts b/apps/web/app/pages/tools/leveling/tradeskills.component.ts
new file mode 100644
index 00000000..0b6d2d8b
--- /dev/null
+++ b/apps/web/app/pages/tools/leveling/tradeskills.component.ts
@@ -0,0 +1,52 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { Subject } from 'rxjs'
+import { NwService } from '~/nw'
+import { TradeskillsModule } from '~/widgets/tradeskills'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-tradeskills-page',
+  templateUrl: './tradeskills.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, TradeskillsModule],
+  host: {
+    class: 'layout-col layout-pad'
+  }
+})
+export class TradeskillsComponent implements OnInit, OnDestroy {
+  public get skills() {
+    return this.nw.tradeskills.skills
+  }
+
+  public get categories() {
+    return this.nw.tradeskills.categories
+  }
+
+  public selected: string
+
+  private destroy$ = new Subject()
+
+  public constructor(private nw: NwService) {
+    //
+  }
+
+  public skillsByCategory(name: string) {
+    return this.nw.tradeskills.skillsByCategory(name)
+  }
+
+  public ngOnInit(): void {}
+
+  public ngOnDestroy(): void {
+    this.destroy$.next(null)
+    this.destroy$.complete()
+  }
+
+  public isActive(category: string, index: number) {
+    if (!this.selected) {
+      return index == 0
+    }
+    return this.selected === category
+  }
+}
diff --git a/apps/web/app/pages/tools/territories/index.ts b/apps/web/app/pages/tools/territories/index.ts
new file mode 100644
index 00000000..92d16cd5
--- /dev/null
+++ b/apps/web/app/pages/tools/territories/index.ts
@@ -0,0 +1 @@
+export * from './territories.module'
diff --git a/apps/web/app/pages/tools/territories/territories-governance.component.html b/apps/web/app/pages/tools/territories/territories-governance.component.html
new file mode 100644
index 00000000..ba0942d0
--- /dev/null
+++ b/apps/web/app/pages/tools/territories/territories-governance.component.html
@@ -0,0 +1,2 @@
+<nwb-territory-governance-table></nwb-territory-governance-table>
+
diff --git a/apps/web/app/pages/territories/territories-governance.component.ts b/apps/web/app/pages/tools/territories/territories-governance.component.ts
similarity index 94%
rename from apps/web/app/pages/territories/territories-governance.component.ts
rename to apps/web/app/pages/tools/territories/territories-governance.component.ts
index bd3a2ea0..dad61089 100644
--- a/apps/web/app/pages/territories/territories-governance.component.ts
+++ b/apps/web/app/pages/tools/territories/territories-governance.component.ts
@@ -11,7 +11,7 @@ import { TerritoryModule } from '~/widgets/territory'
   imports: [CommonModule, TerritoryModule],
   providers: [DestroyService],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-content',
   },
 })
 export class TerritoriesGovernanceComponent {
diff --git a/apps/web/app/pages/territories/territories-list.component.html b/apps/web/app/pages/tools/territories/territories-list.component.html
similarity index 74%
rename from apps/web/app/pages/territories/territories-list.component.html
rename to apps/web/app/pages/tools/territories/territories-list.component.html
index c931b3c3..0ce1a2f9 100644
--- a/apps/web/app/pages/territories/territories-list.component.html
+++ b/apps/web/app/pages/tools/territories/territories-list.component.html
@@ -1,5 +1,5 @@
 <div class="flex-1 overflow-auto">
-  <div class="grid grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
+  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 layout-gap">
     <nwb-territory-card
       *ngFor="let item of territories$ | async; trackBy: trackById"
       [territory]="item"
diff --git a/apps/web/app/pages/territories/territories-list.component.scss b/apps/web/app/pages/tools/territories/territories-list.component.scss
similarity index 100%
rename from apps/web/app/pages/territories/territories-list.component.scss
rename to apps/web/app/pages/tools/territories/territories-list.component.scss
diff --git a/apps/web/app/pages/territories/territories-list.component.ts b/apps/web/app/pages/tools/territories/territories-list.component.ts
similarity index 98%
rename from apps/web/app/pages/territories/territories-list.component.ts
rename to apps/web/app/pages/tools/territories/territories-list.component.ts
index 5ef4b756..7b29067e 100644
--- a/apps/web/app/pages/territories/territories-list.component.ts
+++ b/apps/web/app/pages/tools/territories/territories-list.component.ts
@@ -11,14 +11,14 @@ import { shareReplayRefCount } from '~/utils'
 import { TerritoryModule } from '~/widgets/territory'
 
 @Component({
-  selector: 'nwb-territories-list',
   standalone: true,
+  selector: 'nwb-territories-list',
   templateUrl: './territories-list.component.html',
   styleUrls: ['./territories-list.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CommonModule, RouterModule, TerritoryModule],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-row layout-gap layout-pad',
   },
 })
 export class TerritoriesListComponent {
diff --git a/apps/web/app/pages/territories/territories-standing.component.html b/apps/web/app/pages/tools/territories/territories-standing.component.html
similarity index 63%
rename from apps/web/app/pages/territories/territories-standing.component.html
rename to apps/web/app/pages/tools/territories/territories-standing.component.html
index e9891dd4..3d5d1b27 100644
--- a/apps/web/app/pages/territories/territories-standing.component.html
+++ b/apps/web/app/pages/tools/territories/territories-standing.component.html
@@ -1,6 +1,4 @@
-<div class="flex-1">
+<div class="grid grid-cols-1 2xl:grid-cols-2 layout-gap w-full min-w-[600px]">
   <nwb-territory-standing-chart></nwb-territory-standing-chart>
-</div>
-<div class="flex-1 overflow-auto">
   <nwb-territory-standing-table></nwb-territory-standing-table>
 </div>
diff --git a/apps/web/app/pages/territories/territories-standing.component.ts b/apps/web/app/pages/tools/territories/territories-standing.component.ts
similarity index 93%
rename from apps/web/app/pages/territories/territories-standing.component.ts
rename to apps/web/app/pages/tools/territories/territories-standing.component.ts
index 3aaa9dd7..8b374c84 100644
--- a/apps/web/app/pages/territories/territories-standing.component.ts
+++ b/apps/web/app/pages/tools/territories/territories-standing.component.ts
@@ -11,7 +11,7 @@ import { TerritoryModule } from '~/widgets/territory'
   imports: [CommonModule, TerritoryModule],
   providers: [DestroyService],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-content layout-pad',
   },
 })
 export class TerritoriesStandingComponent {
diff --git a/apps/web/app/pages/tools/territories/territories.component.html b/apps/web/app/pages/tools/territories/territories.component.html
new file mode 100644
index 00000000..7127c175
--- /dev/null
+++ b/apps/web/app/pages/tools/territories/territories.component.html
@@ -0,0 +1,19 @@
+<div class="flex-none flex flex-row bg-base-300 rounded-t-md">
+  <nwb-tab-menu class="bg-base-300 rounded-t-md flex-1">
+    <ng-template>
+      <li [routerLinkActive]="'bordered'" >
+        <a [routerLink]="'list'">Territories</a>
+      </li>
+      <li [routerLinkActive]="'bordered'" >
+        <a [routerLink]="'standing'">Standing</a>
+      </li>
+      <li [routerLinkActive]="'bordered'" >
+        <a [routerLink]="'governance'">Governance</a>
+      </li>
+    </ng-template>
+  </nwb-tab-menu>
+  <div class="flex-none p-2 max-w-[50%]">
+    <nwb-quicksearch-input #search></nwb-quicksearch-input>
+  </div>
+</div>
+<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/territories/territories.component.ts b/apps/web/app/pages/tools/territories/territories.component.ts
similarity index 76%
rename from apps/web/app/pages/territories/territories.component.ts
rename to apps/web/app/pages/tools/territories/territories.component.ts
index 78a7642b..e0fda4b0 100644
--- a/apps/web/app/pages/territories/territories.component.ts
+++ b/apps/web/app/pages/tools/territories/territories.component.ts
@@ -2,17 +2,19 @@ import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { QuicksearchModule, QuicksearchService } from '~/ui/quicksearch'
+import { ScreenModule } from '~/ui/screen'
+import { TabMenuModule } from '~/ui/tab-menu'
 import { TerritoryModule } from '~/widgets/territory'
 
 @Component({
-  selector: 'nwb-territories-page',
   standalone: true,
+  selector: 'nwb-territories-page',
   templateUrl: './territories.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, RouterModule, TerritoryModule, QuicksearchModule],
+  imports: [CommonModule, RouterModule, TerritoryModule, QuicksearchModule, ScreenModule, TabMenuModule],
   providers: [QuicksearchService],
   host: {
-    class: 'layout-row gap-4',
+    class: 'layout-col bg-base-300 rounded-md overflow-clip',
   },
 })
 export class TerritoriesComponent {
diff --git a/apps/web/app/pages/territories/territories-routing.module.ts b/apps/web/app/pages/tools/territories/territories.module.ts
similarity index 71%
rename from apps/web/app/pages/territories/territories-routing.module.ts
rename to apps/web/app/pages/tools/territories/territories.module.ts
index b2caa80b..343e7252 100644
--- a/apps/web/app/pages/territories/territories-routing.module.ts
+++ b/apps/web/app/pages/tools/territories/territories.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { PoiTableComponent } from './poi-table.component'
-import { TerritoriesDetailComponent } from './territories-detail.component'
+import { EmptyComponent } from '~/widgets/empty'
+
 import { TerritoriesGovernanceComponent } from './territories-governance.component'
 import { TerritoriesListComponent } from './territories-list.component'
 import { TerritoriesStandingComponent } from './territories-standing.component'
@@ -23,7 +23,7 @@ const routes: Routes = [
         children: [
           {
             path: ':id',
-            component: TerritoriesDetailComponent,
+            component: EmptyComponent,
           },
         ],
       },
@@ -33,17 +33,15 @@ const routes: Routes = [
       },
       {
         path: 'governance',
-        component: TerritoriesGovernanceComponent
-      },
-      {
-        path: 'poi',
-        component: PoiTableComponent,
+        component: TerritoriesGovernanceComponent,
       },
     ],
   },
 ]
 @NgModule({
   imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
+  declarations: [],
 })
-export class TerritoriesRoutingModule {}
+export class TerritoriesModule {
+  //
+}
diff --git a/apps/web/app/pages/tools/tradeskills/index.ts b/apps/web/app/pages/tools/tradeskills/index.ts
new file mode 100644
index 00000000..d234e52c
--- /dev/null
+++ b/apps/web/app/pages/tools/tradeskills/index.ts
@@ -0,0 +1 @@
+export * from './tradeskills.module'
diff --git a/apps/web/app/pages/tools/tradeskills/tradeskills.component.html b/apps/web/app/pages/tools/tradeskills/tradeskills.component.html
new file mode 100644
index 00000000..44e1321c
--- /dev/null
+++ b/apps/web/app/pages/tools/tradeskills/tradeskills.component.html
@@ -0,0 +1,17 @@
+<div class="flex-none tabs flex-nowrap overflow-x-auto">
+  <ng-container *ngFor="let category of categories | async; let i = index">
+    <a class="tab tab-lifted" [class.tab-active]="isActive(category, i)" (click)="selected = category">{{ category }}</a>
+  </ng-container>
+</div>
+<div class="flex-1 bg-base-100 rounded-md rounded-tl-none overflow-auto">
+  <ng-container *ngFor="let category of categories | async; let i = index">
+    <div class="grid items-start grid-cols-1 2xl:grid-cols-12 min-w-[600px]" *ngIf="isActive(category, i)">
+      <div class="xl:col-span-4 grid grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-3 gap-2 p-2">
+        <nwb-tradeskill-input *ngFor="let skill of skillsByCategory(category) | async" [tradeskill]="skill.ID"></nwb-tradeskill-input>
+      </div>
+      <div class="xl:col-span-8 overflow-hidden ">
+        <nwb-tradeskill-chart [category]="category"></nwb-tradeskill-chart>
+      </div>
+    </div>
+  </ng-container>
+</div>
diff --git a/apps/web/app/pages/progression/trade.component.ts b/apps/web/app/pages/tools/tradeskills/tradeskills.component.ts
similarity index 60%
rename from apps/web/app/pages/progression/trade.component.ts
rename to apps/web/app/pages/tools/tradeskills/tradeskills.component.ts
index 2ca95586..e7dc09f4 100644
--- a/apps/web/app/pages/progression/trade.component.ts
+++ b/apps/web/app/pages/tools/tradeskills/tradeskills.component.ts
@@ -1,14 +1,24 @@
+import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'
+import { RouterModule } from '@angular/router'
 import { Subject } from 'rxjs'
 import { NwService } from '~/nw'
+import { QuicksearchModule } from '~/ui/quicksearch'
+import { ScreenModule } from '~/ui/screen'
+import { TerritoryModule } from '~/widgets/territory'
+import { TradeskillsModule } from '~/widgets/tradeskills'
 
 @Component({
-  selector: 'nwb-trade',
-  templateUrl: './trade.component.html',
-  styleUrls: ['./trade.component.scss'],
+  standalone: true,
+  selector: 'nwb-tradeskills-page',
+  templateUrl: './tradeskills.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, TradeskillsModule],
+  host: {
+    class: 'layout-col layout-pad'
+  }
 })
-export class TradeComponent implements OnInit, OnDestroy {
+export class TradeskillsComponent implements OnInit, OnDestroy {
   public get skills() {
     return this.nw.tradeskills.skills
   }
diff --git a/apps/web/app/pages/tools/tradeskills/tradeskills.module.ts b/apps/web/app/pages/tools/tradeskills/tradeskills.module.ts
new file mode 100644
index 00000000..72f30ee5
--- /dev/null
+++ b/apps/web/app/pages/tools/tradeskills/tradeskills.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+
+import { TradeskillsComponent } from './tradeskills.component'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TradeskillsComponent
+  }
+]
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  declarations: [],
+})
+export class TradeskillsModule {
+  //
+}
diff --git a/apps/web/app/pages/tools/umbral-shards/index.ts b/apps/web/app/pages/tools/umbral-shards/index.ts
new file mode 100644
index 00000000..7843d834
--- /dev/null
+++ b/apps/web/app/pages/tools/umbral-shards/index.ts
@@ -0,0 +1 @@
+export * from './umbral-shards.module'
diff --git a/apps/web/app/pages/tools/umbral-shards/umbral-shards.component.html b/apps/web/app/pages/tools/umbral-shards/umbral-shards.component.html
new file mode 100644
index 00000000..37b0731d
--- /dev/null
+++ b/apps/web/app/pages/tools/umbral-shards/umbral-shards.component.html
@@ -0,0 +1,30 @@
+<div class="flex flex-col xl:flex-row layout-gap">
+  <div class="flex-1 min-w-[500px]">
+    <div class="alert alert-warning mb-4">
+      <div>
+        <div>
+          Gearscore may not match the GS in game since real weighting values are not known.
+        </div>
+      </div>
+    </div>
+    <nwb-umbral-calculator></nwb-umbral-calculator>
+  </div>
+  <div class="flex-1 min-w-[600px]">
+    <div class="tabs">
+      <a class="tab tab-lifted" [class.tab-active]="tab == 0" (click)="tab = 0">Upgrade path</a>
+      <a class="tab tab-lifted" [class.tab-active]="tab == 1" (click)="tab = 1">Table 590-600</a>
+      <a class="tab tab-lifted" [class.tab-active]="tab == 2" (click)="tab = 2">Table 600-625</a>
+    </div>
+    <ng-container *ngIf="tab == 0">
+      <div class="p-4 bg-base-100">
+        <nwb-umbral-calculator-steps></nwb-umbral-calculator-steps>
+      </div>
+    </ng-container>
+    <ng-container *ngIf="tab == 1">
+      <nwb-umbral-table [gsMax]="599"></nwb-umbral-table>
+    </ng-container>
+    <ng-container *ngIf="tab == 2">
+      <nwb-umbral-table [gsMin]="600"></nwb-umbral-table>
+    </ng-container>
+  </div>
+</div>
diff --git a/apps/web/app/pages/progression/umbral.component.scss b/apps/web/app/pages/tools/umbral-shards/umbral-shards.component.scss
similarity index 100%
rename from apps/web/app/pages/progression/umbral.component.scss
rename to apps/web/app/pages/tools/umbral-shards/umbral-shards.component.scss
diff --git a/apps/web/app/pages/tools/umbral-shards/umbral-shards.component.ts b/apps/web/app/pages/tools/umbral-shards/umbral-shards.component.ts
new file mode 100644
index 00000000..f3e0675d
--- /dev/null
+++ b/apps/web/app/pages/tools/umbral-shards/umbral-shards.component.ts
@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { NwModule } from '~/nw';
+import { UmbralshardsModule } from '~/widgets/umbralshards';
+
+@Component({
+  standalone: true,
+  selector: 'nwb-umbral-shards-page',
+  templateUrl: './umbral-shards.component.html',
+   changeDetection: ChangeDetectionStrategy.OnPush,
+   imports: [CommonModule, RouterModule, NwModule, UmbralshardsModule],
+   host: {
+    class: 'layout-content layout-pad'
+  }
+})
+export class UmbralShardsComponent {
+
+  public tab = 0
+
+}
diff --git a/apps/web/app/pages/tools/umbral-shards/umbral-shards.module.ts b/apps/web/app/pages/tools/umbral-shards/umbral-shards.module.ts
new file mode 100644
index 00000000..acc08e7d
--- /dev/null
+++ b/apps/web/app/pages/tools/umbral-shards/umbral-shards.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+
+import { UmbralShardsComponent } from './umbral-shards.component'
+
+export const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: UmbralShardsComponent,
+  },
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [],
+})
+export class UmbralShardsModule {
+  //
+}
diff --git a/apps/web/app/pages/vitals/vitals-families.component.html b/apps/web/app/pages/vitals/vitals-families.component.html
deleted file mode 100644
index d357d81a..00000000
--- a/apps/web/app/pages/vitals/vitals-families.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<nwb-vitals-families-list></nwb-vitals-families-list>
diff --git a/apps/web/app/pages/vitals/vitals-families.component.ts b/apps/web/app/pages/vitals/vitals-families.component.ts
deleted file mode 100644
index ef84204d..00000000
--- a/apps/web/app/pages/vitals/vitals-families.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-
-@Component({
-  selector: 'nwb-vitals-families',
-  templateUrl: './vitals-families.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'layout-content'
-  }
-})
-export class VitalsFamiliesComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/apps/web/app/pages/vitals/vitals.component.html b/apps/web/app/pages/vitals/vitals.component.html
deleted file mode 100644
index 29d89261..00000000
--- a/apps/web/app/pages/vitals/vitals.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="w-36 xl:w-40 flex flex-col gap-4">
-  <nwb-quicksearch-input #search></nwb-quicksearch-input>
-  <nwb-data-table-categories
-    categoryChildRoute
-    [childRouteIndex]="'table'"
-    class="bg-base-100 rounded-md overflow-y-auto"
-  ></nwb-data-table-categories>
-  <ul class="menu menu-compact xl:menu-normal bg-base-100 rounded-md">
-    <li [routerLinkActive]="'bordered'">
-      <a [routerLink]="'families'" > Families </a>
-    </li>
-  </ul>
-</div>
-<router-outlet></router-outlet>
diff --git a/apps/web/app/pages/vitals/vitals.component.ts b/apps/web/app/pages/vitals/vitals.component.ts
deleted file mode 100644
index b9f3968f..00000000
--- a/apps/web/app/pages/vitals/vitals.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { DataTableAdapter } from '~/ui/data-table'
-import { QuicksearchService } from '~/ui/quicksearch'
-import { VitalsAdapterService } from './vitals-table-adapter'
-
-@Component({
-  selector: 'nwb-vitals',
-  templateUrl: './vitals.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'layout-row gap-4',
-  },
-  providers: [DataTableAdapter.provideClass(VitalsAdapterService), QuicksearchService],
-})
-export class VitalsComponent {}
diff --git a/apps/web/app/pages/vitals/vitals.module.ts b/apps/web/app/pages/vitals/vitals.module.ts
deleted file mode 100644
index 6789d375..00000000
--- a/apps/web/app/pages/vitals/vitals.module.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-
-import { VitalsRoutingModule } from './vitals-routing.module'
-import { VitalsComponent } from './vitals.component'
-import { DataTableModule } from '~/ui/data-table'
-import { VitalComponent } from './vital.component'
-import { VitalsFamiliesModule } from '~/widgets/vitals-families'
-import { QuicksearchModule } from '~/ui/quicksearch'
-import { VitalsFamiliesComponent } from './vitals-families.component'
-import { RouterModule } from '@angular/router'
-import { VitalsTableComponent } from './vitals-table.component'
-import { LootModule } from '~/widgets/loot'
-
-@NgModule({
-  declarations: [VitalsComponent, VitalComponent, VitalsFamiliesComponent, VitalsTableComponent],
-  imports: [
-    CommonModule,
-    RouterModule,
-    VitalsRoutingModule,
-    DataTableModule,
-    VitalsFamiliesModule,
-    QuicksearchModule,
-    VitalsFamiliesModule,
-    LootModule
-  ],
-})
-export class VitalsModule {}
diff --git a/apps/web/app/preferences/character-preferences.service.ts b/apps/web/app/preferences/character-preferences.service.ts
new file mode 100644
index 00000000..1f0332f5
--- /dev/null
+++ b/apps/web/app/preferences/character-preferences.service.ts
@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core'
+import { defer, map } from 'rxjs'
+import { shareReplayRefCount } from '~/utils'
+
+import { PreferencesService } from './preferences.service'
+import { StorageProperty } from './storage'
+
+export interface TradeskillMeta {
+  level?: number
+}
+
+const MIN = 1
+const MAX = 60
+
+@Injectable({ providedIn: 'root' })
+export class CharacterPreferencesService {
+
+  public readonly level: StorageProperty<number>
+  public readonly level$ = defer(() => this.level.observe())
+    .pipe(map((value) => {
+      value = value || MAX
+      return value < MIN ? MIN : value > MAX ? MAX : value
+    }))
+    .pipe(shareReplayRefCount(1))
+
+  public constructor(preferences: PreferencesService) {
+    const storage = preferences.storage.storageObject('character')
+    this.level = storage.storageProperty<number>('language', 60)
+  }
+}
diff --git a/apps/web/app/preferences/index.ts b/apps/web/app/preferences/index.ts
index 34249658..84a4be33 100644
--- a/apps/web/app/preferences/index.ts
+++ b/apps/web/app/preferences/index.ts
@@ -4,3 +4,4 @@ export * from './item-preferences.service'
 export * from './preferences.service'
 export * from './recipe-preferences.service'
 export * from './storage'
+export * from './character-preferences.service'
diff --git a/apps/web/app/preferences/storage.ts b/apps/web/app/preferences/storage.ts
index 3d7a5774..212658d0 100644
--- a/apps/web/app/preferences/storage.ts
+++ b/apps/web/app/preferences/storage.ts
@@ -64,7 +64,7 @@ export class StorageApiNode implements StorageNode {
 
   public get<T = any>(key: string): T {
     if (this.cache.has(key)) {
-      return this.cache.get(key)
+      return JSON.parse(JSON.stringify(this.cache.get(key)))
     }
     return JSON.parse(this.storage.getItem(key))
   }
@@ -75,8 +75,9 @@ export class StorageApiNode implements StorageNode {
         this.cache.delete(key)
         this.storage.removeItem(key)
       } else {
-        this.cache.set(key, value)
-        this.storage.setItem(key, JSON.stringify(value))
+        const json = JSON.stringify(value)
+        this.cache.set(key, JSON.parse(json))
+        this.storage.setItem(key, json)
       }
     })
   }
diff --git a/apps/web/app/test/app-testing.module.ts b/apps/web/app/test/app-testing.module.ts
new file mode 100644
index 00000000..b46d763f
--- /dev/null
+++ b/apps/web/app/test/app-testing.module.ts
@@ -0,0 +1,20 @@
+import { HttpClientModule } from "@angular/common/http";
+import { NgModule } from "@angular/core"
+import { FormsModule } from "@angular/forms";
+import { TranslateModule, TranslateService } from "~/i18n";
+import { NwDataService, NwModule } from "~/nw";
+
+@NgModule({
+  imports: [
+    FormsModule,
+    HttpClientModule,
+    TranslateModule.forRoot({
+      loader: NwDataService,
+    })
+  ]
+})
+export class AppTestingModule {
+  public constructor(i18n: TranslateService) {
+    i18n.use(i18n.locale.value)
+  }
+}
diff --git a/apps/web/app/test/index.ts b/apps/web/app/test/index.ts
new file mode 100644
index 00000000..25e32e35
--- /dev/null
+++ b/apps/web/app/test/index.ts
@@ -0,0 +1 @@
+export * from './app-testing.module'
diff --git a/apps/web/app/ui/ag-grid/category-filter.ts b/apps/web/app/ui/ag-grid/category-filter.ts
index 5ec5dbbe..64d03d39 100644
--- a/apps/web/app/ui/ag-grid/category-filter.ts
+++ b/apps/web/app/ui/ag-grid/category-filter.ts
@@ -292,7 +292,7 @@ interface SelectControlAttrs {
 const SelectControls: m.Component<SelectControlAttrs, any> = {
   view: ({ attrs: { overflow, options } }) => [
     m(
-      `ul.menu.menu-compact.rounded-md.flex-1${overflow ? '.overflow-y-auto' : ''}`,
+      `ul.menu.menu-compact.rounded-md.flex-nowrap.flex-1${overflow ? '.overflow-y-auto' : ''}`,
       options?.map((option) => {
         return m('li', [
           m(
diff --git a/apps/web/app/ui/data-table/data-table-adapter.ts b/apps/web/app/ui/data-table/data-table-adapter.ts
index 2ec844ae..2414d592 100644
--- a/apps/web/app/ui/data-table/data-table-adapter.ts
+++ b/apps/web/app/ui/data-table/data-table-adapter.ts
@@ -1,5 +1,5 @@
-import { ClassProvider, Type } from "@angular/core"
-import { GridOptions, ValueGetterFunc, ValueGetterParams } from "ag-grid-community"
+import { ClassProvider, ExistingProvider, Type } from "@angular/core"
+import { GridOptions, ICellRendererFunc, ValueGetterFunc, ValueGetterParams } from "ag-grid-community"
 import { BehaviorSubject, Observable, Subject, takeUntil } from "rxjs"
 import { AgGridComponent, mithrilCell, MithrilCellAttrs } from "../ag-grid"
 import m from 'mithril'
@@ -16,6 +16,13 @@ export abstract class DataTableAdapter<T> {
     }
   }
 
+  public static provideExisting(useClass: Type<DataTableAdapter<any>>): ExistingProvider {
+    return {
+      provide: DataTableAdapter,
+      useExisting: useClass,
+    }
+  }
+
   public moneyFormatter = Intl.NumberFormat(navigator.language, {
     minimumFractionDigits: 2,
   })
@@ -41,6 +48,9 @@ export abstract class DataTableAdapter<T> {
   public valueGetter(fn: keyof T | ((params: TypedValueGetterParams<T>) => any)): string | ValueGetterFunc {
     return fn as any
   }
+  public cellRenderer(fn: ICellRendererFunc<T>) {
+    return fn
+  }
   public mithrilCell(comp: m.Component<MithrilCellAttrs<T>>) {
     return mithrilCell<T>(comp)
   }
@@ -71,7 +81,7 @@ export abstract class DataTableAdapter<T> {
       view: ({ attrs }) => {
         return m(
           'div.flex.flex-row.flex-wrap.gap-1.h-full.items-center',
-          attrs.value?.map?.((it: string) => m('span.badge.badge-secondary.badge-sm', format ? format(it) : it))
+          attrs.value?.map?.((it: string) => m('span.badge.badge-sm.badge-secondary.bg-secondary.bg-opacity-50', format ? format(it) : it))
         )
       },
     })
diff --git a/apps/web/app/ui/data-table/data-table-categories-router.directive.ts b/apps/web/app/ui/data-table/data-table-categories-router.directive.ts
index 39e61a5c..35d57a06 100644
--- a/apps/web/app/ui/data-table/data-table-categories-router.directive.ts
+++ b/apps/web/app/ui/data-table/data-table-categories-router.directive.ts
@@ -1,5 +1,5 @@
 import { Directive, forwardRef, Injectable, Input } from '@angular/core'
-import { ActivatedRoute} from '@angular/router'
+import { ActivatedRoute, Router} from '@angular/router'
 import { BehaviorSubject, combineLatest, distinctUntilChanged, map, Subject, takeUntil } from 'rxjs'
 import { DataTableAdapter } from './data-table-adapter'
 
@@ -9,6 +9,7 @@ export abstract class CategoryLinkService {
 }
 
 @Directive({
+  standalone: true,
   selector: 'nwb-data-table-categories[categoryChildRoute]',
   providers: [{
     provide: CategoryLinkService,
@@ -23,10 +24,12 @@ export class CategoryChildRouteParamDirective extends CategoryLinkService {
   public categoryLink(category: string | null) {
     return [category || this.childRouteIndex]
   }
+
 }
 
 
 @Directive({
+  standalone: true,
   selector: 'nwb-data-table[categoryRouteParam]',
 })
 export class CategoryRouteParamDirective {
diff --git a/apps/web/app/ui/data-table/data-table-categories.component.html b/apps/web/app/ui/data-table/data-table-categories.component.html
index aab89a31..6de84b58 100644
--- a/apps/web/app/ui/data-table/data-table-categories.component.html
+++ b/apps/web/app/ui/data-table/data-table-categories.component.html
@@ -1,7 +1,10 @@
-<ul class="menu menu-compact xl:menu-normal bg-base-100 rounded-md">
-  <ng-container *ngFor="let it of categories | async">
-    <li [routerLinkActive]="'bordered'">
-      <a [routerLink]="categoryLink(it.value)"> {{ it.label }}</a>
-    </li>
-  </ng-container>
-</ul>
+<nwb-tab-menu class="bg-base-300 flex-1">
+  <ng-template>
+    <ng-container *ngFor="let it of categories | async">
+      <li [routerLinkActive]="'bordered'">
+        <a [routerLink]="categoryLink(it.value)"> {{ it.label }}</a>
+      </li>
+    </ng-container>
+  </ng-template>
+</nwb-tab-menu>
+<ng-content></ng-content>
diff --git a/apps/web/app/ui/data-table/data-table-categories.component.ts b/apps/web/app/ui/data-table/data-table-categories.component.ts
index 45b0584a..669909ee 100644
--- a/apps/web/app/ui/data-table/data-table-categories.component.ts
+++ b/apps/web/app/ui/data-table/data-table-categories.component.ts
@@ -1,31 +1,40 @@
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, Optional } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Optional } from '@angular/core'
+import { RouterModule } from '@angular/router'
 import { defer, map, startWith } from 'rxjs'
+import { TabMenuModule } from '../tab-menu'
 import { DataTableAdapter } from './data-table-adapter'
 import { CategoryLinkService } from './data-table-categories-router.directive'
 
 @Component({
+  standalone: true,
   selector: 'nwb-data-table-categories',
   templateUrl: './data-table-categories.component.html',
   styleUrls: ['./data-table-categories.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, RouterModule, TabMenuModule],
+  host: {
+    class: 'flex flex-row overflow-hidden',
+  },
 })
 export class DataTableCategoriesComponent {
-
   public categories = defer(() => this.adapter.entities)
-  .pipe(startWith([]))
-  .pipe(map((items) => this.adapter.extractCategories(items)))
-  .pipe(map((items) => {
-    return [
-      {
-        label: 'ALL',
-        value: null
-      },
-      ...items.map((it) => ({
-        label: it,
-        value: it
-      }))
-    ]
-  }))
+    .pipe(startWith([]))
+    .pipe(map((items) => this.adapter.extractCategories(items)))
+    .pipe(
+      map((items) => {
+        return [
+          {
+            label: 'ALL',
+            value: null,
+          },
+          ...items.map((it) => ({
+            label: it,
+            value: it,
+          })),
+        ]
+      })
+    )
 
   public get category() {
     return this.adapter.category.value
@@ -67,4 +76,3 @@ export class DataTableCategoriesComponent {
     }
   }
 }
-
diff --git a/apps/web/app/ui/data-table/data-table-picker-dialog.component.html b/apps/web/app/ui/data-table/data-table-picker-dialog.component.html
new file mode 100644
index 00000000..97c0aecd
--- /dev/null
+++ b/apps/web/app/ui/data-table/data-table-picker-dialog.component.html
@@ -0,0 +1,23 @@
+<input
+  type="text"
+  placeholder="search..."
+  [(ngModel)]="search"
+  class="input input-bordered w-full mb-2"
+  [disabled]="disabled"
+/>
+
+<nwb-data-table
+  *ngIf="adapter"
+  #table
+  [adapter]="adapter"
+  [quickFilter]="search"
+  (selection)="onSelectionChange($event)"
+  (rowDoubleClick)="onRowDoubleClick($event)"
+  class="flex-1 rounded-md overflow-clip"
+></nwb-data-table>
+
+<div class="modal-action">
+  <label class="btn btn-sm btn-outline btn-error" (click)="close()">Cancel</label>
+  <label class="btn btn-sm btn-outline btn-success" (click)="clear()">Clear selection</label>
+  <label class="btn btn-sm btn-success" (click)="commit()">OK</label>
+</div>
diff --git a/apps/web/app/ui/data-table/data-table-picker-dialog.component.ts b/apps/web/app/ui/data-table/data-table-picker-dialog.component.ts
new file mode 100644
index 00000000..822d688c
--- /dev/null
+++ b/apps/web/app/ui/data-table/data-table-picker-dialog.component.ts
@@ -0,0 +1,75 @@
+import { DialogRef, DIALOG_DATA } from '@angular/cdk/dialog'
+import { CommonModule } from '@angular/common'
+import { AfterViewInit, ChangeDetectionStrategy, Component, Inject, Input, ViewChild } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { Optional } from 'ag-grid-community'
+import { NwModule } from '~/nw'
+import { DataTableAdapter } from './data-table-adapter'
+import { DataTableComponent } from './data-table.component'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-data-table-picker-dialog',
+  templateUrl: './data-table-picker-dialog.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule, FormsModule, DataTableComponent],
+  host: {
+    class: 'flex flex-col h-full bg-base-300 rounded-md p-3',
+  },
+})
+export class DataTablePickerDialog implements AfterViewInit {
+  @Input()
+  public adapter: DataTableAdapter<any>
+
+  @ViewChild('table', { static: false })
+  protected table: DataTableComponent<any>
+
+  protected search: string
+  protected itemId: string
+
+  protected touched = false
+  protected disabled = false
+
+  public constructor(
+    private dialogRef: DialogRef,
+    @Inject(DIALOG_DATA)
+    private dialogData: string,
+    @Optional()
+    adapter: DataTableAdapter<unknown>
+  ) {
+    this.adapter = adapter
+  }
+
+  public ngAfterViewInit(): void {
+    if (this.dialogRef) {
+      this.writeValue(this.dialogData)
+    }
+  }
+
+  public writeValue(value: string): void {
+    this.itemId = value
+    if (this.itemId && this.table) {
+      this.table.select([this.itemId])
+    }
+  }
+
+  protected onSelectionChange(ids: string[]) {
+    this.itemId = ids?.[0]
+  }
+
+  protected onRowDoubleClick(id: string) {
+    this.dialogRef.close(id)
+  }
+
+  protected clear() {
+    this.table.select([])
+  }
+
+  protected close() {
+    this.dialogRef.close()
+  }
+
+  protected commit() {
+    this.dialogRef.close(this.itemId || null)
+  }
+}
diff --git a/apps/web/app/ui/data-table/data-table-picker.component.html b/apps/web/app/ui/data-table/data-table-picker.component.html
new file mode 100644
index 00000000..6583a4fa
--- /dev/null
+++ b/apps/web/app/ui/data-table/data-table-picker.component.html
@@ -0,0 +1,15 @@
+<input
+  type="text"
+  placeholder="Type here"
+  [(ngModel)]="search"
+  class="flex-none input input-sm input-bordered w-full mb-2"
+  [disabled]="disabled"
+/>
+<nwb-data-table
+  *ngIf="adapter"
+  #table
+  [adapter]="adapter"
+  [quickFilter]="search"
+  (selection)="onSelectionChange($event)"
+  class="flex-1 rounded-md overflow-clip"
+></nwb-data-table>
diff --git a/apps/web/app/ui/data-table/data-table-picker.component.ts b/apps/web/app/ui/data-table/data-table-picker.component.ts
new file mode 100644
index 00000000..99fe5e95
--- /dev/null
+++ b/apps/web/app/ui/data-table/data-table-picker.component.ts
@@ -0,0 +1,71 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core'
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { Optional } from 'ag-grid-community'
+import { NwModule } from '~/nw'
+import { DataTableAdapter } from './data-table-adapter'
+import { DataTableComponent } from './data-table.component'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-data-table-picker',
+  templateUrl: './data-table-picker.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule, FormsModule, DataTableComponent],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: DataTablePicker,
+    },
+  ],
+  host: {
+    class: 'flex flex-col h-full bg-base-300 rounded-md p-3',
+  },
+})
+export class DataTablePicker implements ControlValueAccessor {
+  @Input()
+  public adapter: DataTableAdapter<any>
+
+  @ViewChild('table', { static: false })
+  protected table: DataTableComponent<any>
+
+  protected search: string
+  protected itemId: string
+  protected onChange = (value: string) => void 0
+  protected onTouched = () => void 0
+  protected touched = false
+  protected disabled = false
+
+  public constructor(
+    @Optional()
+    adapter: DataTableAdapter<unknown>
+  ) {
+    this.adapter = adapter
+  }
+
+  public writeValue(value: string): void {
+    this.itemId = value
+    if (this.itemId && this.table) {
+      this.table.select([this.itemId])
+    }
+  }
+  public registerOnChange(fn: any): void {
+    this.onChange = fn
+  }
+  public registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+  public setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled
+  }
+  private commitValue(value: string) {
+    if (this.itemId !== value) {
+      this.itemId = value
+      this.onChange(this.itemId)
+    }
+  }
+  protected onSelectionChange(ids: string[]) {
+    this.commitValue(ids?.[0])
+  }
+}
diff --git a/apps/web/app/ui/data-table/data-table-router.directive.ts b/apps/web/app/ui/data-table/data-table-router.directive.ts
index 38a74fe7..851dac41 100644
--- a/apps/web/app/ui/data-table/data-table-router.directive.ts
+++ b/apps/web/app/ui/data-table/data-table-router.directive.ts
@@ -5,6 +5,7 @@ import { distinctUntilChanged, Subject, takeUntil } from 'rxjs'
 import { DataTableComponent } from './data-table.component'
 
 @Directive({
+  standalone: true,
   selector: 'nwb-data-table[detailRoutParam]',
 })
 export class DataTableRouterDirective implements OnInit, OnDestroy {
diff --git a/apps/web/app/ui/data-table/data-table.component.html b/apps/web/app/ui/data-table/data-table.component.html
index 82ef9d6a..e15c6083 100644
--- a/apps/web/app/ui/data-table/data-table.component.html
+++ b/apps/web/app/ui/data-table/data-table.component.html
@@ -1,3 +1,3 @@
 <ng-content select=".table-header"></ng-content>
-<nwb-ag-grid [data]="gridData | async" [options]="gridOptions" [quickFilter]="quickFilter" (gridReady)="onGridReady()"></nwb-ag-grid>
+<nwb-ag-grid [data]="gridData | async" [options]="gridOptions | async" [quickFilter]="quickFilter" (gridReady)="onGridReady()"></nwb-ag-grid>
 <ng-content select=".table-footer"></ng-content>
diff --git a/apps/web/app/ui/data-table/data-table.component.scss b/apps/web/app/ui/data-table/data-table.component.scss
index 182e6ce6..ccd1d1de 100644
--- a/apps/web/app/ui/data-table/data-table.component.scss
+++ b/apps/web/app/ui/data-table/data-table.component.scss
@@ -1,5 +1,3 @@
 :host {
-  display: flex;
-  flex-direction: column;
   min-height: 10rem;
 }
diff --git a/apps/web/app/ui/data-table/data-table.component.ts b/apps/web/app/ui/data-table/data-table.component.ts
index cb99f4ec..9fd4196e 100644
--- a/apps/web/app/ui/data-table/data-table.component.ts
+++ b/apps/web/app/ui/data-table/data-table.component.ts
@@ -11,17 +11,22 @@ import {
   ChangeDetectorRef,
   SimpleChanges,
   NgZone,
+  Optional,
 } from '@angular/core'
-import { GridOptions } from 'ag-grid-community'
 import { isEqual } from 'lodash'
 import {
+  asyncScheduler,
+  BehaviorSubject,
   combineLatest,
   defer,
+  delay,
   distinctUntilChanged,
   map,
   Observable,
   ReplaySubject,
+  startWith,
   Subject,
+  subscribeOn,
   switchMap,
   switchMapTo,
   takeUntil,
@@ -30,15 +35,21 @@ import {
 import { LocaleService } from '~/i18n'
 import { PreferencesService, StorageNode } from '~/preferences'
 import { DestroyService } from '~/utils'
-import { AgGridComponent } from '~/ui/ag-grid'
+import { AgGridComponent, AgGridModule } from '~/ui/ag-grid'
 import { DataTableAdapter } from './data-table-adapter'
+import { CommonModule } from '@angular/common'
 
 @Component({
+  standalone: true,
   selector: 'nwb-data-table',
   templateUrl: './data-table.component.html',
   styleUrls: ['./data-table.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, AgGridModule],
   providers: [DestroyService],
+  host: {
+    class: 'layout-col overflow-clip'
+  }
 })
 export class DataTableComponent<T> implements OnInit, OnChanges, OnDestroy {
   @ViewChild(AgGridComponent, { static: true })
@@ -50,34 +61,45 @@ export class DataTableComponent<T> implements OnInit, OnChanges, OnDestroy {
   @Input()
   public stateKey: string
 
+  @Output()
+  public rowDoubleClick = new EventEmitter<any>()
+
   public get gridData() {
     return this.displayItems$
   }
 
-  public gridOptions: GridOptions = this.adapter.buildGridOptions({
-    rowHeight: 40,
-    rowMultiSelectWithClick: true,
-    suppressMenuHide: true,
-    defaultColDef: {
-      resizable: true,
-      sortable: true,
-      filter: true,
-    },
-    onSelectionChanged: ({ api }) => {
-      this.zone.run(() => {
-        this.gridSelectionChanged$.next(api.getSelectedRows() || [])
+  protected gridOptions = defer(() => this.adapter$).pipe(
+    map((adapter) =>
+      adapter.buildGridOptions({
+        rowHeight: 40,
+        rowMultiSelectWithClick: true,
+        suppressMenuHide: true,
+        defaultColDef: {
+          resizable: true,
+          sortable: true,
+          filter: true,
+        },
+        onSelectionChanged: ({ api }) => {
+          this.zone.run(() => {
+            this.gridSelectionChanged$.next(api.getSelectedRows() || [])
+          })
+        },
+        onRowDataChanged: () => {
+          this.gridRowDataChanged$.next(null)
+        },
+        onFirstDataRendered: () => {
+          this.gridRowDataChanged$.next(null)
+          // this.loadFilterState()
+        },
+        onFilterChanged: () => {
+          // this.saveFilterState()
+        },
+        onRowDoubleClicked: (e) => {
+          this.rowDoubleClick.emit(this.adapter.entityID(e.data))
+        }
       })
-    },
-    onRowDataChanged: () => {
-      this.gridRowDataChanged$.next(null)
-    },
-    onFirstDataRendered: () => {
-      // this.loadFilterState()
-    },
-    onFilterChanged: () => {
-      // this.saveFilterState()
-    },
-  })
+    )
+  )
 
   @Output()
   public get selection(): Observable<string[]> {
@@ -95,28 +117,44 @@ export class DataTableComponent<T> implements OnInit, OnChanges, OnDestroy {
   }
 
   @Output()
-  public categories = defer(() => this.items$).pipe(
-    map((items) => {
-      return Array.from(new Set(items.map((it) => this.adapter.entityCategory(it)).filter((it) => !!it)))
+  public categories = defer(() =>
+    combineLatest({
+      items: this.items$,
+      adapter: this.adapter$,
+    })
+  ).pipe(
+    map(({ items, adapter }) => {
+      return Array.from(new Set(items.map((it) => adapter.entityCategory(it)).filter((it) => !!it)))
     })
   )
 
+  @Input()
+  public set adapter(value: DataTableAdapter<T>) {
+    this.adapter$.next(value)
+  }
+  public get adapter() {
+    return this.adapter$.value
+  }
+
+  private adapter$ = new BehaviorSubject<DataTableAdapter<T>>(null)
   private gridReady$ = new ReplaySubject(1)
   private gridSelectionChanged$ = new ReplaySubject<T[]>(1)
   private gridRowDataChanged$ = new Subject()
   private selection$ = new ReplaySubject<string[]>(1)
-  private items$ = defer(() => this.adapter.entities)
+  private items$ = defer(() => this.adapter$).pipe(switchMap((adapter) => adapter.entities))
+  private category$ = defer(() => this.adapter$).pipe(switchMap((adapter) => adapter.category))
   private displayItems$ = defer(() =>
     combineLatest({
+      adapter: this.adapter$,
       items: this.items$,
-      category: this.adapter.category,
+      category: this.category$,
     })
   ).pipe(
-    map(({ items, category }) => {
+    map(({ adapter, items, category }) => {
       if (!category) {
         return items
       }
-      return items.filter((it) => this.adapter.entityCategory(it) === category)
+      return items.filter((it) => adapter.entityCategory(it) === category)
     })
   )
 
@@ -125,17 +163,19 @@ export class DataTableComponent<T> implements OnInit, OnChanges, OnDestroy {
   public constructor(
     private locale: LocaleService,
     private cdRef: ChangeDetectorRef,
-    private adapter: DataTableAdapter<T>,
     private zone: NgZone,
     private destroy: DestroyService,
-    preferences: PreferencesService
+    preferences: PreferencesService,
+    @Optional()
+    adapter: DataTableAdapter<T>
   ) {
     this.gridStorage = preferences.session.storageScope('grid:')
+    this.adapter$.next(adapter)
   }
 
   public async ngOnInit() {
     this.gridReady$
-      .pipe(switchMapTo(this.locale.value$))
+      .pipe(switchMap(() => this.locale.value$))
       .pipe(takeUntil(this.destroy.$))
       .subscribe(() => {
         this.grid.api.refreshCells({ force: true })
@@ -146,6 +186,7 @@ export class DataTableComponent<T> implements OnInit, OnChanges, OnDestroy {
       change: this.gridRowDataChanged$,
       ready: this.gridReady$,
     })
+      .pipe(subscribeOn(asyncScheduler))
       .pipe(takeUntil(this.destroy.$))
       .subscribe(({ selection }) => {
         this.syncSelection(selection, {
@@ -153,7 +194,8 @@ export class DataTableComponent<T> implements OnInit, OnChanges, OnDestroy {
         })
       })
 
-    this.gridSelectionChanged$
+    this.adapter$
+      .pipe(switchMap(() => this.gridSelectionChanged$))
       .pipe(map((list) => list.map((it) => this.adapter.entityID(it))))
       .pipe(distinctUntilChanged<string[]>(isEqual))
       .pipe(takeUntil(this.destroy.$))
diff --git a/apps/web/app/ui/data-table/data-table.module.ts b/apps/web/app/ui/data-table/data-table.module.ts
index cfd5ceca..63d40647 100644
--- a/apps/web/app/ui/data-table/data-table.module.ts
+++ b/apps/web/app/ui/data-table/data-table.module.ts
@@ -1,31 +1,26 @@
 import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { DataTableComponent } from './data-table.component'
-import { NwModule } from '~/nw'
-import { AgGridModule } from '../ag-grid'
-import { DataTableRouterDirective } from './data-table-router.directive'
-import { DataTableCategoriesComponent } from './data-table-categories.component'
 import {
   CategoryChildRouteParamDirective,
-  CategoryRouteParamDirective,
+  CategoryRouteParamDirective
 } from './data-table-categories-router.directive'
-import { RouterModule } from '@angular/router'
+import { DataTableCategoriesComponent } from './data-table-categories.component'
+import { DataTablePickerDialog } from './data-table-picker-dialog.component'
+import { DataTablePicker } from './data-table-picker.component'
+import { DataTableRouterDirective } from './data-table-router.directive'
+import { DataTableComponent } from './data-table.component'
+
+const COMPONENTS = [
+  DataTablePicker,
+  DataTablePickerDialog,
+  DataTableComponent,
+  DataTableRouterDirective,
+  DataTableCategoriesComponent,
+  CategoryChildRouteParamDirective,
+  CategoryRouteParamDirective,
+]
 
 @NgModule({
-  imports: [CommonModule, NwModule, AgGridModule, RouterModule],
-  declarations: [
-    DataTableComponent,
-    DataTableRouterDirective,
-    DataTableCategoriesComponent,
-    CategoryChildRouteParamDirective,
-    CategoryRouteParamDirective,
-  ],
-  exports: [
-    DataTableComponent,
-    DataTableRouterDirective,
-    DataTableCategoriesComponent,
-    CategoryChildRouteParamDirective,
-    CategoryRouteParamDirective,
-  ],
+  imports: [...COMPONENTS],
+  exports: [...COMPONENTS],
 })
 export class DataTableModule {}
diff --git a/apps/web/app/ui/data-table/index.ts b/apps/web/app/ui/data-table/index.ts
index ac93bfb5..a114e20e 100644
--- a/apps/web/app/ui/data-table/index.ts
+++ b/apps/web/app/ui/data-table/index.ts
@@ -1,3 +1,5 @@
 export * from './data-table-adapter'
 export * from './data-table.component'
 export * from './data-table.module'
+export * from './data-table-picker.component'
+export * from './data-table-picker-dialog.component'
diff --git a/apps/web/app/ui/level-input/index.ts b/apps/web/app/ui/level-input/index.ts
new file mode 100644
index 00000000..2bc4b661
--- /dev/null
+++ b/apps/web/app/ui/level-input/index.ts
@@ -0,0 +1 @@
+export * from './level-input.module'
diff --git a/apps/web/app/ui/level-input/level-input.component.html b/apps/web/app/ui/level-input/level-input.component.html
new file mode 100644
index 00000000..4a6298ba
--- /dev/null
+++ b/apps/web/app/ui/level-input/level-input.component.html
@@ -0,0 +1,14 @@
+<div class="glorycane">
+  <div class="inner"></div>
+  <div class="outer"></div>
+</div>
+<div class="glorydiamond"></div>
+
+<input
+  min="0"
+  type="number"
+  [attr.max]="60"
+  class="input focus:outline-none bg-transparent h-full w-full p-0 text-center font-bold text-3xl appearance-none"
+  placeholder="0"
+  [(ngModel)]="modelValue"
+/>
diff --git a/apps/web/app/ui/level-input/level-input.component.scss b/apps/web/app/ui/level-input/level-input.component.scss
new file mode 100644
index 00000000..1f88d42c
--- /dev/null
+++ b/apps/web/app/ui/level-input/level-input.component.scss
@@ -0,0 +1,29 @@
+:host {
+
+  display: inline-flex;
+  position: relative;
+
+  .glorycane {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .glorydiamond {
+    z-index: 2;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform: rotate(45deg);
+    background-image: url('^assets/icons/glorydiamonddetailed.png');
+    background-size: 100% 100%;
+  }
+  input {
+    z-index: 3;
+  }
+}
diff --git a/apps/web/app/ui/level-input/level-input.component.ts b/apps/web/app/ui/level-input/level-input.component.ts
new file mode 100644
index 00000000..d89d3857
--- /dev/null
+++ b/apps/web/app/ui/level-input/level-input.component.ts
@@ -0,0 +1,62 @@
+import { CommonModule } from '@angular/common'
+import { Component, ChangeDetectionStrategy, ViewChild, ElementRef } from '@angular/core'
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-level-input',
+  templateUrl: './level-input.component.html',
+  styleUrls: ['./level-input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, FormsModule],
+  host: {
+    class: 'aspect-square',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi:true,
+      useExisting: LevelInputComponent
+    }
+  ]
+})
+export class LevelInputComponent implements ControlValueAccessor {
+
+  @ViewChild('input')
+  protected input: ElementRef<HTMLInputElement>
+
+  protected get inputEl() {
+    return this.input.nativeElement
+  }
+
+  protected onChange = (value: unknown) => {}
+  protected onTouched = () => {}
+  protected touched = false
+  protected disabled = false
+  protected value: number
+  protected get modelValue() {
+    return this.value
+  }
+  protected set modelValue(value: number) {
+    this.value = value
+    this.commitValue()
+  }
+
+  public writeValue(value: any): void {
+    this.value = value
+  }
+
+  public registerOnChange(fn: any): void {
+    this.onChange = fn
+  }
+  public registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+  public setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled
+  }
+  protected commitValue() {
+    this.onChange(this.value)
+  }
+}
+
diff --git a/apps/web/app/ui/level-input/level-input.module.ts b/apps/web/app/ui/level-input/level-input.module.ts
new file mode 100644
index 00000000..1929ebcc
--- /dev/null
+++ b/apps/web/app/ui/level-input/level-input.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core'
+import { LevelInputComponent } from './level-input.component'
+
+@NgModule({
+  imports: [LevelInputComponent],
+  exports: [LevelInputComponent],
+})
+export class LevelInputModule {}
diff --git a/apps/web/app/ui/property-grid/entries.pipe.ts b/apps/web/app/ui/property-grid/entries.pipe.ts
new file mode 100644
index 00000000..5dde27dd
--- /dev/null
+++ b/apps/web/app/ui/property-grid/entries.pipe.ts
@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { sortBy } from 'lodash'
+
+@Pipe({
+  standalone: true,
+  name: 'nwbEntries',
+})
+export class EntriesPipe implements PipeTransform {
+  public transform(value: any, sort?: 'asc' | 'desc'): Array<{ key: string; value: any }> {
+    value = (Array.isArray(value) ? value : [value])
+      .filter((it) => !!it)
+      .map((it) => Object.entries(it))
+      .flat(1)
+      .map(([key, value]) => ({ key, value }))
+
+    if (sort) {
+      value = sortBy(value, (it) => it.key)
+    }
+    if (sort === 'desc') {
+      value.reverse()
+    }
+    return value
+  }
+}
diff --git a/apps/web/app/ui/property-grid/property-grid.component.html b/apps/web/app/ui/property-grid/property-grid.component.html
index d93a50d1..b0d0157a 100644
--- a/apps/web/app/ui/property-grid/property-grid.component.html
+++ b/apps/web/app/ui/property-grid/property-grid.component.html
@@ -1,5 +1,5 @@
-<ng-container *ngFor="let row of properties">
-  <label>{{ row.key }}</label>
-  <span>{{ row.value }}</span>
+<ng-container *ngFor="let row of rows">
+  <span>{{ formatKey(row.key) }}</span>
+  <span>{{ formatValue(row.value, row.key) }}</span>
 </ng-container>
-
+<ng-content></ng-content>
diff --git a/apps/web/app/ui/property-grid/property-grid.component.scss b/apps/web/app/ui/property-grid/property-grid.component.scss
index c2d87ddf..9c42d9cb 100644
--- a/apps/web/app/ui/property-grid/property-grid.component.scss
+++ b/apps/web/app/ui/property-grid/property-grid.component.scss
@@ -1,15 +1,4 @@
 :host {
-  display: block;
-  flex: 1;
   display: grid;
-  grid-template-columns: auto auto;
-  column-gap: 1rem;
-  row-gap: 0.25rem;
-
-  label {
-    font-weight: bold;
-  }
-  span {
-    font-family: monospace;
-  }
+  grid-template-columns: max-content auto;
 }
diff --git a/apps/web/app/ui/property-grid/property-grid.component.spec.ts b/apps/web/app/ui/property-grid/property-grid.component.spec.ts
deleted file mode 100644
index 70445db3..00000000
--- a/apps/web/app/ui/property-grid/property-grid.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PropertyGridComponent } from './property-grid.component';
-
-describe('PropertyGridComponent', () => {
-  let component: PropertyGridComponent;
-  let fixture: ComponentFixture<PropertyGridComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ PropertyGridComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(PropertyGridComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/apps/web/app/ui/property-grid/property-grid.component.ts b/apps/web/app/ui/property-grid/property-grid.component.ts
index ed910b67..1788ed3d 100644
--- a/apps/web/app/ui/property-grid/property-grid.component.ts
+++ b/apps/web/app/ui/property-grid/property-grid.component.ts
@@ -1,29 +1,72 @@
-import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core'
+import { CommonModule, DecimalPipe } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { humanize } from '~/utils'
 
 @Component({
+  standalone: true,
   selector: 'nwb-property-grid',
   templateUrl: './property-grid.component.html',
   styleUrls: ['./property-grid.component.scss'],
+  imports: [CommonModule],
+  providers: [DecimalPipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'select-text'
+  }
 })
-export class PropertyGridComponent implements OnInit {
+export class PropertyGridComponent {
   @Input()
   public set item(value: any) {
-    this.updateProperties(value)
+    this.rows = this.extractRows(value)
   }
 
-  public properties: Array<{ key: string; value: string }>
+  @Input()
+  public humanizeNames: boolean
+
+  @Input()
+  public valueFormatter: (value: any, key?: string) => string
+
+  @Input()
+  public keyFormatter: (key: string) => string
+
+  @Input()
+  public numberFormat: string
 
-  public constructor(private cdRef: ChangeDetectorRef) {
+  @Input()
+  public rows: Array<{ key: string; value: any }> = []
+
+  public constructor(private decimals: DecimalPipe) {
     //
   }
 
-  public ngOnInit(): void {}
+  protected formatValue(value: any, key: string) {
+    if (this.valueFormatter) {
+      value = this.valueFormatter(value, key)
+    }
+    if (this.numberFormat && typeof value === 'number') {
+      value = this.decimals.transform(value, this.numberFormat)
+    }
+    return value
+  }
 
-  public updateProperties(item: any) {
-    this.properties = Array.from(Object.entries(item || {})).map(([key, value]) => {
-      return { key, value: String(value) }
-    })
-    this.cdRef.markForCheck()
+  protected formatKey(key: string) {
+    if (this.keyFormatter) {
+      key = this.keyFormatter(key)
+    }
+    if (this.humanizeNames) {
+      key = humanize(key)
+    }
+    return key
   }
+
+  protected extractRows(value: any) {
+    const result = (Array.isArray(value) ? value : [value])
+      .filter((it) => !!it)
+      .map((it) => Object.entries(it))
+      .flat(1)
+      .map(([key, value]) => ({ key, value }))
+
+    return result
+  }
+
 }
diff --git a/apps/web/app/ui/property-grid/property-grid.module.ts b/apps/web/app/ui/property-grid/property-grid.module.ts
index 73a8e367..966097b2 100644
--- a/apps/web/app/ui/property-grid/property-grid.module.ts
+++ b/apps/web/app/ui/property-grid/property-grid.module.ts
@@ -1,11 +1,9 @@
 import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
+import { EntriesPipe } from './entries.pipe'
 import { PropertyGridComponent } from './property-grid.component'
 
 @NgModule({
-  imports: [CommonModule],
-  declarations: [PropertyGridComponent],
-
-  exports: [PropertyGridComponent],
+  imports: [PropertyGridComponent, EntriesPipe],
+  exports: [PropertyGridComponent, EntriesPipe],
 })
 export class PropertyGridModule {}
diff --git a/apps/web/app/ui/quicksearch/quicksearch-input.component.html b/apps/web/app/ui/quicksearch/quicksearch-input.component.html
index 53ab4c11..48869684 100644
--- a/apps/web/app/ui/quicksearch/quicksearch-input.component.html
+++ b/apps/web/app/ui/quicksearch/quicksearch-input.component.html
@@ -1,4 +1,12 @@
-<input class="input input-sm w-full focus:outline-none focus:border focus:border-primary-focus" #input type="text" placeholder="CTRL+F" [(ngModel)]="value" autofocus [disabled]="!(active | async)" />
+<input
+  class="input input-sm w-full focus:outline-none focus:border focus:border-primary-focus"
+  #input
+  type="text"
+  placeholder="Search"
+  [(ngModel)]="value"
+  autofocus
+  [disabled]="!(active | async)"
+/>
 <button class="btn btn-sm btn-square" (click)="value ? (value = '') : null" [disabled]="!(active | async)">
   <svg
     *ngIf="!value"
@@ -15,7 +23,7 @@
       d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
     />
   </svg>
-  <svg *ngIf="value" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 320 512" fill="currentColor">
+  <svg *ngIf="value" class="h-4 w-4" viewBox="0 0 320 512" fill="currentColor">
     <path
       d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"
     />
diff --git a/apps/web/app/ui/screen/index.ts b/apps/web/app/ui/screen/index.ts
new file mode 100644
index 00000000..14b5a0b0
--- /dev/null
+++ b/apps/web/app/ui/screen/index.ts
@@ -0,0 +1,3 @@
+export * from './screen.module'
+export * from './screen-drawer.component'
+export * from './screen-drawer.service'
diff --git a/apps/web/app/ui/screen/screen-drawer-content.component.ts b/apps/web/app/ui/screen/screen-drawer-content.component.ts
new file mode 100644
index 00000000..269e7c9f
--- /dev/null
+++ b/apps/web/app/ui/screen/screen-drawer-content.component.ts
@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common'
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-screen-drawer-content',
+  template: `
+    <ng-content></ng-content>
+  `,
+  imports: [CommonModule],
+  host: {
+    class: 'drawer-content',
+  },
+})
+export class ScreenDrawerContentComponent {
+
+}
diff --git a/apps/web/app/ui/screen/screen-drawer-side.component.ts b/apps/web/app/ui/screen/screen-drawer-side.component.ts
new file mode 100644
index 00000000..b490044f
--- /dev/null
+++ b/apps/web/app/ui/screen/screen-drawer-side.component.ts
@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common'
+import { Component } from '@angular/core'
+import { ScreenDrawerToggleDirective } from './screen-drawer.directive'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-screen-drawer-side',
+  template: `
+    <div class="drawer-overlay z-10" [nwbScreenDrawerToggle]="'toggle'"></div>
+    <div class="flex flex-col layout-gap">
+      <ng-content></ng-content>
+    </div>
+  `,
+  imports: [CommonModule, ScreenDrawerToggleDirective],
+  host: {
+    class: 'drawer-side',
+  },
+})
+export class ScreenDrawerSideComponent {}
diff --git a/apps/web/app/ui/screen/screen-drawer.component.ts b/apps/web/app/ui/screen/screen-drawer.component.ts
new file mode 100644
index 00000000..1054b784
--- /dev/null
+++ b/apps/web/app/ui/screen/screen-drawer.component.ts
@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common'
+import { Component } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { uniqueId } from 'lodash'
+import { ScreenDrawerService } from './screen-drawer.service'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-screen-drawer',
+  template: `
+    <input [ngModel]="drawer.isOpen$ | async" type="checkbox" class="drawer-toggle " />
+    <ng-content></ng-content>
+  `,
+  imports: [CommonModule, FormsModule],
+  host: {
+    class: 'drawer drawer-mobile flex-1 h-auto',
+  },
+})
+export class ScreenDrawerComponent {
+
+  public constructor(protected drawer: ScreenDrawerService) {
+
+  }
+}
diff --git a/apps/web/app/ui/screen/screen-drawer.directive.ts b/apps/web/app/ui/screen/screen-drawer.directive.ts
new file mode 100644
index 00000000..f7ed5906
--- /dev/null
+++ b/apps/web/app/ui/screen/screen-drawer.directive.ts
@@ -0,0 +1,29 @@
+import { Directive, HostListener, Input } from "@angular/core"
+import { ScreenDrawerService } from "./screen-drawer.service";
+
+@Directive({
+  standalone: true,
+  selector: '[nwbScreenDrawerToggle]'
+})
+export class ScreenDrawerToggleDirective {
+
+  @Input('nwbScreenDrawerToggle')
+  public action: 'toggle' | 'close' | 'open' = 'toggle'
+
+  public constructor(private service: ScreenDrawerService) {
+    //
+  }
+
+  @HostListener('click')
+  public onClick() {
+    if (this.action === 'toggle') {
+      this.service.toggle()
+    }
+    if (this.action === 'close') {
+      this.service.close()
+    }
+    if (this.action === 'open') {
+      this.service.open()
+    }
+  }
+}
diff --git a/apps/web/app/ui/screen/screen-drawer.service.ts b/apps/web/app/ui/screen/screen-drawer.service.ts
new file mode 100644
index 00000000..61edc12e
--- /dev/null
+++ b/apps/web/app/ui/screen/screen-drawer.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core'
+import { BehaviorSubject } from 'rxjs'
+
+@Injectable({ providedIn: 'root' })
+export class ScreenDrawerService {
+  public get isOpen() {
+    return this.isOpen$.value
+  }
+
+  public set isOpen(value: boolean) {
+    this.isOpen$.next(value)
+  }
+
+  public readonly isOpen$ = new BehaviorSubject(false)
+
+  public toggle() {
+    this.isOpen = !this.isOpen
+  }
+
+  public close() {
+    this.isOpen = false
+  }
+
+  public open() {
+    this.isOpen = true
+  }
+}
diff --git a/apps/web/app/ui/screen/screen.module.ts b/apps/web/app/ui/screen/screen.module.ts
new file mode 100644
index 00000000..babc4a6f
--- /dev/null
+++ b/apps/web/app/ui/screen/screen.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core'
+import { ScreenDrawerContentComponent } from './screen-drawer-content.component'
+import { ScreenDrawerSideComponent } from './screen-drawer-side.component'
+import { ScreenDrawerComponent } from './screen-drawer.component'
+import { ScreenDrawerToggleDirective } from './screen-drawer.directive'
+
+const COMPONENTS = [
+  ScreenDrawerComponent,
+  ScreenDrawerContentComponent,
+  ScreenDrawerSideComponent,
+  ScreenDrawerToggleDirective,
+]
+@NgModule({
+  imports: [...COMPONENTS],
+  exports: [...COMPONENTS],
+})
+export class ScreenModule {}
diff --git a/apps/web/app/ui/tab-menu/index.ts b/apps/web/app/ui/tab-menu/index.ts
new file mode 100644
index 00000000..7ff57f5e
--- /dev/null
+++ b/apps/web/app/ui/tab-menu/index.ts
@@ -0,0 +1 @@
+export * from './tab-menu.module'
diff --git a/apps/web/app/ui/tab-menu/tab-menu.component.html b/apps/web/app/ui/tab-menu/tab-menu.component.html
new file mode 100644
index 00000000..84a04cb4
--- /dev/null
+++ b/apps/web/app/ui/tab-menu/tab-menu.component.html
@@ -0,0 +1,35 @@
+<ul class="menu menu-horizontal flex-nowrap flex-1 overflow-x-auto scrollbar-hide">
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</ul>
+
+<ul class="menu menu-horizontal flex-nowrap flex-none">
+  <li cdkOverlayOrigin #overlay="cdkOverlayOrigin" (click)="isMenuOpen=true">
+    <label>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        class="inline-block w-5 h-5 stroke-current"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
+        ></path>
+      </svg>
+    </label>
+  </li>
+</ul>
+<ng-template
+  cdkConnectedOverlay
+  [cdkConnectedOverlayOrigin]="overlay"
+  [cdkConnectedOverlayOpen]="isMenuOpen"
+  [cdkConnectedOverlayHasBackdrop]="true"
+  (backdropClick)="isMenuOpen = false"
+  (detach)="isMenuOpen = false"
+>
+  <ul class="menu menu-compact bg-base-100 rounded-b-md z-10" (click)="isMenuOpen = false">
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </ul>
+</ng-template>
diff --git a/apps/web/app/ui/tab-menu/tab-menu.component.ts b/apps/web/app/ui/tab-menu/tab-menu.component.ts
new file mode 100644
index 00000000..9bd0105f
--- /dev/null
+++ b/apps/web/app/ui/tab-menu/tab-menu.component.ts
@@ -0,0 +1,32 @@
+import { OverlayModule } from '@angular/cdk/overlay'
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, ContentChild, TemplateRef } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[nwbTabMenu]',
+  template: '',
+
+})
+export class TabMenuContent {
+  public constructor(public template: TemplateRef<unknown>) {
+    //
+  }
+}
+
+@Component({
+  standalone: true,
+  selector: 'nwb-tab-menu',
+  templateUrl: './tab-menu.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, OverlayModule],
+  host: {
+    class: 'flex flex-row bg-base-300 overflow-hidden',
+  },
+})
+export class TabMenuComponent {
+
+  protected isMenuOpen = false
+  @ContentChild(TemplateRef)
+  protected content: TemplateRef<unknown>
+}
diff --git a/apps/web/app/ui/tab-menu/tab-menu.module.ts b/apps/web/app/ui/tab-menu/tab-menu.module.ts
new file mode 100644
index 00000000..5916ea87
--- /dev/null
+++ b/apps/web/app/ui/tab-menu/tab-menu.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core'
+import { TabMenuComponent, TabMenuContent } from './tab-menu.component'
+
+@NgModule({
+  imports: [TabMenuComponent, TabMenuContent],
+  exports: [TabMenuComponent, TabMenuContent],
+})
+export class TabMenuModule {
+  //
+}
diff --git a/apps/web/app/ui/tradeskill-level-input/index.ts b/apps/web/app/ui/tradeskill-level-input/index.ts
new file mode 100644
index 00000000..ff5f832b
--- /dev/null
+++ b/apps/web/app/ui/tradeskill-level-input/index.ts
@@ -0,0 +1 @@
+export * from './tradeskill-level-input.module'
diff --git a/apps/web/app/ui/tradeskill-level-input/tradeskill-level-input.component.html b/apps/web/app/ui/tradeskill-level-input/tradeskill-level-input.component.html
new file mode 100644
index 00000000..766e73b3
--- /dev/null
+++ b/apps/web/app/ui/tradeskill-level-input/tradeskill-level-input.component.html
@@ -0,0 +1,20 @@
+<div class="flex-1 relative">
+  <picture class="opacity-20 absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center">
+    <img [nwImage]="icon" class="w-3/5 h-3/5 object-contain" />
+  </picture>
+  <div class="absolute top-0 left-0 right-0 bottom-0 z-10 flex flex-col items-center justify-center">
+    <div class="aspect-square h-full">
+      <input
+        min="0"
+        type="number"
+        [attr.max]="maxLevel"
+        class="input focus:outline-none bg-transparent h-full w-full p-0 text-center font-bold text-3xl appearance-none"
+        placeholder="0"
+        [(ngModel)]="modelValue"
+      />
+    </div>
+  </div>
+</div>
+<h2 class="p-2 pt-0 text-center font-bold text-lg">
+  <span [nwText]="label"></span>
+</h2>
diff --git a/apps/web/app/widgets/tradeskills/tradeskill-input.component.scss b/apps/web/app/ui/tradeskill-level-input/tradeskill-level-input.component.scss
similarity index 100%
rename from apps/web/app/widgets/tradeskills/tradeskill-input.component.scss
rename to apps/web/app/ui/tradeskill-level-input/tradeskill-level-input.component.scss
diff --git a/apps/web/app/ui/tradeskill-level-input/tradeskill-level-input.component.ts b/apps/web/app/ui/tradeskill-level-input/tradeskill-level-input.component.ts
new file mode 100644
index 00000000..d1630109
--- /dev/null
+++ b/apps/web/app/ui/tradeskill-level-input/tradeskill-level-input.component.ts
@@ -0,0 +1,71 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core'
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'
+import { NwModule } from '~/nw'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-tradeskill-level-input',
+  templateUrl: './tradeskill-level-input.component.html',
+  styleUrls: ['./tradeskill-level-input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, FormsModule, NwModule],
+  host: {
+    class: 'bg-base-100 shadow-xl rounded-md aspect-square flex flex-col',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi:true,
+      useExisting: TradeskillLevelInputComponent
+    }
+  ]
+})
+export class TradeskillLevelInputComponent implements ControlValueAccessor {
+
+  @Input()
+  public icon: string
+
+  @Input()
+  public label: string
+
+  @Input()
+  public maxLevel: number
+
+  @ViewChild('input')
+  protected input: ElementRef<HTMLInputElement>
+
+  protected get inputEl() {
+    return this.input.nativeElement
+  }
+
+  protected onChange = (value: unknown) => {}
+  protected onTouched = () => {}
+  protected touched = false
+  protected disabled = false
+  protected value: number
+  protected get modelValue() {
+    return this.value
+  }
+  protected set modelValue(value: number) {
+    this.value = value
+    this.commitValue()
+  }
+
+  public writeValue(value: any): void {
+    this.value = value
+  }
+
+  public registerOnChange(fn: any): void {
+    this.onChange = fn
+  }
+  public registerOnTouched(fn: any): void {
+    this.onTouched = fn
+  }
+  public setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled
+  }
+  protected commitValue() {
+    this.onChange(this.value)
+  }
+}
diff --git a/apps/web/app/ui/tradeskill-level-input/tradeskill-level-input.module.ts b/apps/web/app/ui/tradeskill-level-input/tradeskill-level-input.module.ts
new file mode 100644
index 00000000..7403e98b
--- /dev/null
+++ b/apps/web/app/ui/tradeskill-level-input/tradeskill-level-input.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core'
+import { TradeskillLevelInputComponent } from './tradeskill-level-input.component'
+
+@NgModule({
+  imports: [TradeskillLevelInputComponent],
+  exports: [TradeskillLevelInputComponent],
+})
+export class TradeskillLevelInputModule {}
diff --git a/apps/web/app/utils/index.ts b/apps/web/app/utils/index.ts
index af285a09..f4e1fe99 100644
--- a/apps/web/app/utils/index.ts
+++ b/apps/web/app/utils/index.ts
@@ -7,4 +7,4 @@ export * from './humanize'
 export * from './intersection-observer.service'
 export * from './observe-route-param'
 export * from './share-replay-refcount'
-
+export * from './rx-state'
diff --git a/apps/web/app/utils/rx-state.ts b/apps/web/app/utils/rx-state.ts
new file mode 100644
index 00000000..6f43d79b
--- /dev/null
+++ b/apps/web/app/utils/rx-state.ts
@@ -0,0 +1,46 @@
+import { catchError, defer, map, Observable, of, startWith } from 'rxjs'
+
+export type RxState<T> = {
+  value?: T
+  loading: boolean
+  error?: Error
+}
+
+export type RxStateFlat<T extends Record<string, any>> = Partial<T> & {
+  loading: boolean
+  error?: Error
+}
+
+export function deferState<T>(fn: () => Observable<T>) {
+  return defer(() => rxState(fn()))
+}
+
+export function rxState<T>(source: Observable<T>): Observable<RxState<T>> {
+  return source
+    .pipe(map<T, RxState<T>>((value) => ({ value: value, loading: false })))
+    .pipe(startWith<RxState<T>>({ value: null as T, loading: true }))
+    .pipe(catchError((error: Error) => {
+      console.error(error)
+      return of<RxState<T>>({ value: null as T, loading: false, error: error })
+    }))
+}
+
+export function deferStateFlat<T extends Record<string, any>>(fn: () => Observable<T>) {
+  return defer(() => rxStateFlat(fn()))
+}
+
+export function rxStateFlat<T extends Record<string, any>>(source: Observable<T>): Observable<RxStateFlat<T>> {
+  return source
+    .pipe(map((value: T) => {
+      return {
+        ...(value || {}),
+        loading: false,
+        error: null
+      } as RxStateFlat<T>
+    }))
+    .pipe(startWith({ loading: true } as RxStateFlat<T>))
+    .pipe(catchError((error: Error) => {
+      console.error(error)
+      return of({ loading: false, error: error } as RxStateFlat<T>)
+    }))
+}
diff --git a/apps/web/app/widgets/ability-detail/abilities-detail.module.ts b/apps/web/app/widgets/ability-detail/abilities-detail.module.ts
new file mode 100644
index 00000000..06511b7e
--- /dev/null
+++ b/apps/web/app/widgets/ability-detail/abilities-detail.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core'
+import { AbilityDetailComponent } from './ability-detail.component'
+import { AbilityDetailDirective } from './ability-detail.directive'
+
+const components = [AbilityDetailComponent, AbilityDetailDirective]
+@NgModule({
+  imports: [...components],
+  exports: [...components],
+})
+export class AbilityDetailModule {
+  //
+}
diff --git a/apps/web/app/widgets/ability-detail/ability-detail.component.html b/apps/web/app/widgets/ability-detail/ability-detail.component.html
new file mode 100644
index 00000000..6dbc7430
--- /dev/null
+++ b/apps/web/app/widgets/ability-detail/ability-detail.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/apps/web/app/widgets/ability-detail/ability-detail.component.ts b/apps/web/app/widgets/ability-detail/ability-detail.component.ts
new file mode 100644
index 00000000..ec4b60f5
--- /dev/null
+++ b/apps/web/app/widgets/ability-detail/ability-detail.component.ts
@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, forwardRef, Input } from '@angular/core'
+import { NwDbService, NwModule } from '~/nw'
+import { AbilityDetailService } from './ability-detail.service'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-ability-detail',
+  templateUrl: './ability-detail.component.html',
+  exportAs: 'detail',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule],
+  providers: [
+    {
+      provide: AbilityDetailService,
+      useExisting: forwardRef(() => AbilityDetailComponent),
+    },
+  ],
+  host: {
+    class: 'block bg-base-100 rounded-md overflow-clip',
+  },
+})
+export class AbilityDetailComponent extends AbilityDetailService {
+  @Input()
+  public set abilityId(value: string) {
+    this.abilityId$.next(value)
+  }
+
+  public constructor(db: NwDbService) {
+    super(db)
+  }
+}
diff --git a/apps/web/app/widgets/ability-detail/ability-detail.directive.ts b/apps/web/app/widgets/ability-detail/ability-detail.directive.ts
new file mode 100644
index 00000000..25c24ae1
--- /dev/null
+++ b/apps/web/app/widgets/ability-detail/ability-detail.directive.ts
@@ -0,0 +1,25 @@
+import { Directive, forwardRef, Input } from '@angular/core'
+import { NwDbService } from '~/nw'
+import { AbilityDetailService } from './ability-detail.service'
+
+@Directive({
+  standalone: true,
+  selector: '[nwbAbilityDetail]',
+  exportAs: 'abilityDetail',
+  providers: [
+    {
+      provide: AbilityDetailService,
+      useExisting: forwardRef(() => AbilityDetailDirective),
+    },
+  ],
+})
+export class AbilityDetailDirective extends AbilityDetailService {
+  @Input('nwbAbilityDetail')
+  public set abilityId(value: string) {
+    this.abilityId$.next(value)
+  }
+
+  public constructor(db: NwDbService) {
+    super(db)
+  }
+}
diff --git a/apps/web/app/widgets/ability-detail/ability-detail.service.ts b/apps/web/app/widgets/ability-detail/ability-detail.service.ts
new file mode 100644
index 00000000..bb5e9004
--- /dev/null
+++ b/apps/web/app/widgets/ability-detail/ability-detail.service.ts
@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core'
+import { Ability } from '@nw-data/types'
+import { combineLatest, map, ReplaySubject } from 'rxjs'
+import { NwDbService } from '~/nw'
+import { shareReplayRefCount } from '~/utils'
+
+@Injectable()
+export class AbilityDetailService {
+  public readonly abilityId$ = new ReplaySubject<string>(1)
+  public readonly ability$ = combineLatest({
+    id: this.abilityId$,
+    abilitiesMap: this.db.abilitiesMap,
+  })
+    .pipe(map(({ id, abilitiesMap }) => abilitiesMap.get(id)))
+    .pipe(shareReplayRefCount(1))
+
+  public readonly icon$ = this.ability$.pipe(map((it) => it?.Icon))
+  public readonly name$ = this.ability$.pipe(map((it) => it?.DisplayName))
+  public readonly description$ = this.ability$.pipe(map((it) => it?.Description))
+  public readonly properties$ = this.ability$.pipe(map((it) => this.getProperties(it))).pipe(shareReplayRefCount(1))
+
+  public constructor(private db: NwDbService) {
+    //
+  }
+
+  public update(entityId: string) {
+    this.abilityId$.next(entityId)
+  }
+
+  public getProperties(ability: Ability, exclude?: Array<keyof Ability | '$source'>) {
+    if (!ability) {
+      return []
+    }
+    exclude = exclude || ['$source', 'AbilityID', 'Icon', 'DisplayName', 'Description', 'Sound']
+    return Object.entries(ability)
+      .filter(([key, value]) => !!value && !exclude.includes(key as any))
+      .map(([key, value]) => ({
+        key,
+        value,
+        valueType: typeof value,
+      }))
+  }
+}
diff --git a/apps/web/app/widgets/ability-detail/index.ts b/apps/web/app/widgets/ability-detail/index.ts
new file mode 100644
index 00000000..8ef1ad61
--- /dev/null
+++ b/apps/web/app/widgets/ability-detail/index.ts
@@ -0,0 +1 @@
+export * from './abilities-detail.module'
diff --git a/apps/web/app/pages/abilities/abilities-table-adapter.ts b/apps/web/app/widgets/adapter/abilities-table-adapter.ts
similarity index 94%
rename from apps/web/app/pages/abilities/abilities-table-adapter.ts
rename to apps/web/app/widgets/adapter/abilities-table-adapter.ts
index 429c06b6..fef83bd9 100644
--- a/apps/web/app/pages/abilities/abilities-table-adapter.ts
+++ b/apps/web/app/widgets/adapter/abilities-table-adapter.ts
@@ -11,7 +11,7 @@ import { TranslateService } from '~/i18n'
 import { NwExpressionService } from '~/nw'
 
 @Injectable()
-export class AbilitiesAdapterService extends DataTableAdapter<Ability> {
+export class AbilitiesTableAdapter extends DataTableAdapter<Ability> {
   public entityID(item: Ability): string {
     return item.AbilityID
   }
@@ -77,7 +77,10 @@ export class AbilitiesAdapterService extends DataTableAdapter<Ability> {
         {
           field: this.fieldName('AttackType'),
           filter: SelectboxFilter,
-
+        },
+        {
+          field: this.fieldName('UICategory'),
+          filter: SelectboxFilter,
         },
       ],
     }
diff --git a/apps/web/app/widgets/adapter/adapter.service.ts b/apps/web/app/widgets/adapter/adapter.service.ts
new file mode 100644
index 00000000..dbf3dce4
--- /dev/null
+++ b/apps/web/app/widgets/adapter/adapter.service.ts
@@ -0,0 +1,21 @@
+import { Injectable, Injector, Type } from '@angular/core'
+import { DataTableAdapter } from '~/ui/data-table'
+
+@Injectable({ providedIn: 'root' })
+export class TableAdapterService {
+  public constructor(private injector: Injector) {
+    //
+  }
+
+  public createInstance<T extends DataTableAdapter<unknown>>(type: Type<T>): T {
+    return Injector.create({
+      providers: [
+        {
+          provide: type,
+          useClass: type,
+        },
+      ],
+      parent: this.injector,
+    }).get<T>(type, null)
+  }
+}
diff --git a/apps/web/app/pages/crafting/crafting-table-adapter.ts b/apps/web/app/widgets/adapter/crafting-table-adapter.ts
similarity index 99%
rename from apps/web/app/pages/crafting/crafting-table-adapter.ts
rename to apps/web/app/widgets/adapter/crafting-table-adapter.ts
index 4687ad7c..aa62d938 100644
--- a/apps/web/app/pages/crafting/crafting-table-adapter.ts
+++ b/apps/web/app/widgets/adapter/crafting-table-adapter.ts
@@ -17,7 +17,7 @@ export type RecipeWithItem = Crafting & {
 }
 
 @Injectable()
-export class CraftingAdapterService extends DataTableAdapter<RecipeWithItem> {
+export class CraftingTableAdapter extends DataTableAdapter<RecipeWithItem> {
   public entityID(item: RecipeWithItem): string {
     return item.RecipeID
   }
diff --git a/apps/web/app/pages/perks/exp-context.service.ts b/apps/web/app/widgets/adapter/exp-context.service.ts
similarity index 100%
rename from apps/web/app/pages/perks/exp-context.service.ts
rename to apps/web/app/widgets/adapter/exp-context.service.ts
diff --git a/apps/web/app/widgets/adapter/housing-table-adapter.ts b/apps/web/app/widgets/adapter/housing-table-adapter.ts
new file mode 100644
index 00000000..6b8baf69
--- /dev/null
+++ b/apps/web/app/widgets/adapter/housing-table-adapter.ts
@@ -0,0 +1,168 @@
+import { Injectable } from '@angular/core'
+import { Housingitems } from '@nw-data/types'
+import { GridOptions } from 'ag-grid-community'
+import { defer, map, Observable, shareReplay, tap } from 'rxjs'
+import { IconComponent, nwdbLinkUrl, NwService } from '~/nw'
+import { SelectboxFilter, mithrilCell } from '~/ui/ag-grid'
+import { DataTableAdapter } from '~/ui/data-table'
+import m from 'mithril'
+import { ItemMarkerCell, ItemTrackerCell, ItemTrackerFilter } from '~/widgets/item-tracker'
+import { getItemIconPath, getItemRarity, getItemTierAsRoman } from '~/nw/utils'
+import { TranslateService } from '~/i18n'
+import { humanize } from '~/utils'
+
+@Injectable()
+export class HousingTableAdapter extends DataTableAdapter<Housingitems> {
+  public entityID(item: Housingitems): string {
+    return item.HouseItemID
+  }
+
+  public entityCategory(item: Housingitems): string {
+    return item.UIHousingCategory
+  }
+
+  public buildGridOptions(base: GridOptions): GridOptions {
+    return {
+      ...base,
+      rowSelection: 'single',
+      columnDefs: [
+        {
+          sortable: false,
+          filter: false,
+          width: 54,
+          pinned: true,
+          cellRenderer: this.mithrilCell({
+            view: ({ attrs: { data } }) =>
+              m('a', { target: '_blank', href: nwdbLinkUrl('item', data.HouseItemID) }, [
+                m(IconComponent, {
+                  src: getItemIconPath(data),
+                  class: `w-9 h-9 nw-icon bg-rarity-${getItemRarity(data)}`,
+                }),
+              ]),
+          }),
+        },
+        {
+          width: 300,
+          headerName: 'Name',
+          valueGetter: this.valueGetter(({ data }) => this.i18n.get(data.Name)),
+          getQuickFilterText: ({ value }) => value,
+        },
+        {
+          field: this.fieldName('HouseItemID'),
+          hide: true,
+        },
+        {
+          width: 100,
+          headerName: 'Rarity',
+          field: this.fieldName('ItemRarity'),
+          filter: SelectboxFilter,
+        },
+        {
+          width: 80,
+          field: this.fieldName('Tier'),
+          filter: SelectboxFilter,
+          valueGetter: ({ data }) => getItemTierAsRoman(data.Tier),
+        },
+        {
+          headerName: 'User Data',
+          children: [
+            {
+              width: 100,
+              headerName: 'Bookmark',
+              filter: ItemTrackerFilter,
+              valueGetter: this.valueGetter(({ data }) => this.nw.itemPref.get(data.HouseItemID)?.mark || 0),
+              cellRenderer: this.mithrilCell({
+                view: ({ attrs: { data } }) => {
+                  return m(ItemMarkerCell, {
+                    itemId: data.HouseItemID,
+                    meta: this.nw.itemPref,
+                  })
+                }
+              })
+            },
+            {
+              headerName: 'Owned',
+              headerTooltip: 'Number of items currently owned',
+              cellClass: 'text-right',
+              valueGetter: this.valueGetter(({ data }) => this.nw.itemPref.get(data.HouseItemID)?.stock),
+              cellRenderer: this.mithrilCell({
+                view: ({ attrs: { data } }) => {
+                  return m(ItemTrackerCell, {
+                    class: 'text-right',
+                    itemId: data.HouseItemID,
+                    meta: this.nw.itemPref,
+                    mode: 'stock',
+                  })
+                },
+              }),
+              width: 90,
+            },
+            {
+              headerName: 'Price',
+              headerTooltip: 'Current price in Trading post',
+              cellClass: 'text-right',
+              valueGetter: this.valueGetter(({ data }) => this.nw.itemPref.get(data.HouseItemID)?.price),
+              cellRenderer: this.mithrilCell({
+                view: ({ attrs: { data } }) => {
+                  return m(ItemTrackerCell, {
+                    class: 'text-right',
+                    itemId: data.HouseItemID,
+                    meta: this.nw.itemPref,
+                    mode: 'price',
+                    formatter: this.moneyFormatter,
+                  })
+                },
+              }),
+              width: 90,
+            },
+          ],
+        },
+        {
+          headerName: 'Placement',
+          field: this.fieldName('HousingTag1 Placed'),
+          valueFormatter: ({ value }) => humanize(value),
+          filter: SelectboxFilter,
+          width: 150,
+        },
+        {
+          field: this.fieldName('UIHousingCategory'),
+          filter: SelectboxFilter,
+          width: 150,
+        },
+        {
+          headerName: 'Obtain',
+          field: this.fieldName('HowToOptain (Primarily)'),
+          valueFormatter: ({ value }) => humanize(value),
+          filter: SelectboxFilter,
+          width: 150,
+        },
+        {
+          width: 250,
+          field: this.fieldName('HousingTags'),
+          valueGetter: ({ data, colDef }) => {
+            return (data[colDef.field] || '').trim().split('+')
+          },
+          cellRenderer: this.cellRendererTags(humanize),
+          filter: SelectboxFilter,
+          filterParams: SelectboxFilter.params({
+            showSearch: true,
+            showCondition: true
+          })
+        },
+      ],
+    }
+  }
+
+  public entities: Observable<Housingitems[]> = defer(() => {
+    return this.nw.db.housingItems.pipe(map((items) => items.filter((it) => !it.ExcludeFromGame)))
+  }).pipe(
+    shareReplay({
+      refCount: true,
+      bufferSize: 1,
+    })
+  )
+
+  public constructor(private nw: NwService, private i18n: TranslateService) {
+    super()
+  }
+}
diff --git a/apps/web/app/widgets/adapter/index.ts b/apps/web/app/widgets/adapter/index.ts
new file mode 100644
index 00000000..8759707d
--- /dev/null
+++ b/apps/web/app/widgets/adapter/index.ts
@@ -0,0 +1,8 @@
+export * from './abilities-table-adapter'
+export * from './adapter.service'
+export * from './crafting-table-adapter'
+export * from './housing-table-adapter'
+export * from './items-table-adapter'
+export * from './status-effects-table-adapter'
+export * from './vitals-table-adapter'
+export * from './perks-table-adapter'
diff --git a/apps/web/app/pages/items/items-table-adapter.ts b/apps/web/app/widgets/adapter/items-table-adapter.ts
similarity index 88%
rename from apps/web/app/pages/items/items-table-adapter.ts
rename to apps/web/app/widgets/adapter/items-table-adapter.ts
index 8c6e6e9e..4e4019be 100644
--- a/apps/web/app/pages/items/items-table-adapter.ts
+++ b/apps/web/app/widgets/adapter/items-table-adapter.ts
@@ -1,22 +1,40 @@
-import { Injectable } from '@angular/core'
+import { Injectable, Optional } from '@angular/core'
 import { ItemDefinitionMaster, Perks } from '@nw-data/types'
-import { GridOptions, ValueGetterParams } from 'ag-grid-community'
-import { combineLatest, defer, map, Observable, shareReplay, Subject, takeUntil, tap } from 'rxjs'
-import { IconComponent, nwdbLinkUrl, NwService } from '~/nw'
-import { SelectboxFilter, mithrilCell, AgGridComponent, RangeFilter } from '~/ui/ag-grid'
-import { DataTableAdapter } from '~/ui/data-table'
+import { GridOptions } from 'ag-grid-community'
 import m from 'mithril'
-import { ItemMarkerCell, ItemTrackerCell, ItemTrackerFilter } from '~/widgets/item-tracker'
-import { getItemIconPath, getItemPerkBucketIds, getItemPerks, getItemRarity, getItemRarityName, getItemTierAsRoman, getPerkAffixStat } from '~/nw/utils'
+import { combineLatest, defer, map, Observable, tap } from 'rxjs'
 import { TranslateService } from '~/i18n'
+import { IconComponent, nwdbLinkUrl, NwService } from '~/nw'
+import { getItemIconPath, getItemPerkBucketIds, getItemPerks, getItemRarity, getItemRarityName, getItemTierAsRoman } from '~/nw/utils'
+import { AgGridComponent, RangeFilter, SelectboxFilter } from '~/ui/ag-grid'
+import { DataTableAdapter } from '~/ui/data-table'
 import { humanize, shareReplayRefCount } from '~/utils'
+import { ItemMarkerCell, ItemTrackerCell, ItemTrackerFilter } from '~/widgets/item-tracker'
 
 type ItemDefinitionMasterWithPerks = ItemDefinitionMaster & {
   $perks: Perks[]
 }
 
+@Injectable()
+export class ItemsTableAdapterConfig {
+  hideUserData?: boolean
+  source?: Observable<ItemDefinitionMaster[]>
+}
+
 @Injectable()
 export class ItemsTableAdapter extends DataTableAdapter<ItemDefinitionMasterWithPerks> {
+  public static provider(config?: ItemsTableAdapterConfig) {
+    const provider = []
+    if (config) {
+      provider.push({
+        provide: ItemsTableAdapterConfig,
+        useValue: config
+      })
+    }
+    provider.push(DataTableAdapter.provideClass(ItemsTableAdapter))
+    return provider
+  }
+
   public entityID(item: ItemDefinitionMasterWithPerks): string {
     return item.ItemID
   }
@@ -128,6 +146,7 @@ export class ItemsTableAdapter extends DataTableAdapter<ItemDefinitionMasterWith
           headerName: 'User Data',
           children: [
             {
+              hide: this.config?.hideUserData,
               width: 100,
               headerName: 'Bookmark',
               cellClass: 'cursor-pointer',
@@ -143,6 +162,7 @@ export class ItemsTableAdapter extends DataTableAdapter<ItemDefinitionMasterWith
               })
             },
             {
+              hide: this.config?.hideUserData,
               headerName: 'Owned',
               headerTooltip: 'Number of items currently owned',
               valueGetter: this.valueGetter(({ data }) => this.nw.itemPref.get(data.ItemID)?.stock),
@@ -159,6 +179,7 @@ export class ItemsTableAdapter extends DataTableAdapter<ItemDefinitionMasterWith
               width: 90,
             },
             {
+              hide: this.config?.hideUserData,
               headerName: 'GS',
               headerTooltip: 'Item owned with this gear score',
               valueGetter: this.valueGetter(({ data }) => this.nw.itemPref.get(data.ItemID)?.gs),
@@ -175,6 +196,7 @@ export class ItemsTableAdapter extends DataTableAdapter<ItemDefinitionMasterWith
               width: 90,
             },
             {
+              hide: this.config?.hideUserData,
               headerName: 'Price',
               headerTooltip: 'Current price in Trading post',
               cellClass: 'text-right',
@@ -264,15 +286,14 @@ export class ItemsTableAdapter extends DataTableAdapter<ItemDefinitionMasterWith
 
   public entities: Observable<ItemDefinitionMasterWithPerks[]> = defer(() => {
     return combineLatest({
-      items: this.nw.db.items,
+      items: this.config?.source || this.nw.db.items,
       perks: this.nw.db.perksMap,
     })
-      .pipe(tap(({ perks }) => (this.perks = perks)))
-      .pipe(map(({ items }) => {
+      .pipe(map(({ items, perks }) => {
         return items.map((it): ItemDefinitionMasterWithPerks => {
           return {
             ...it,
-            $perks: getItemPerks(it, this.perks)
+            $perks: getItemPerks(it, perks)
           }
         })
       }))
@@ -284,9 +305,12 @@ export class ItemsTableAdapter extends DataTableAdapter<ItemDefinitionMasterWith
     //
   }
 
-  private perks: Map<string, Perks>
-
-  public constructor(private nw: NwService, private i18n: TranslateService) {
+  public constructor(
+    private nw: NwService,
+    private i18n: TranslateService,
+    @Optional()
+    private config: ItemsTableAdapterConfig,
+  ) {
     super()
   }
 }
diff --git a/apps/web/app/pages/perks/perks-table-adapter.ts b/apps/web/app/widgets/adapter/perks-table-adapter.ts
similarity index 60%
rename from apps/web/app/pages/perks/perks-table-adapter.ts
rename to apps/web/app/widgets/adapter/perks-table-adapter.ts
index 032fc7a3..8d351081 100644
--- a/apps/web/app/pages/perks/perks-table-adapter.ts
+++ b/apps/web/app/widgets/adapter/perks-table-adapter.ts
@@ -1,5 +1,5 @@
-import { Injectable } from '@angular/core'
-import { Perks } from '@nw-data/types'
+import { Injectable, Optional } from '@angular/core'
+import { Ability, Perks } from '@nw-data/types'
 import { GridOptions } from 'ag-grid-community'
 import { combineLatest, defer, map, Observable, switchMap } from 'rxjs'
 import { IconComponent, nwdbLinkUrl, NwService } from '~/nw'
@@ -8,11 +8,28 @@ import { DataTableAdapter } from '~/ui/data-table'
 import m from 'mithril'
 import { humanize, shareReplayRefCount } from '~/utils'
 import { TranslateService } from '~/i18n'
-import { getPerkAffixStat, hasPerkAffixStats } from '~/nw/utils'
+import { getPerksInherentMODs, hasPerkInherentAffix } from '~/nw/utils'
 import { ExprContextService } from './exp-context.service'
 
 @Injectable()
-export class PerksAdapterService extends DataTableAdapter<Perks> {
+export class PerksTableAdapterConfig {
+  source: Observable<Perks[]>
+}
+
+@Injectable()
+export class PerksTableAdapter extends DataTableAdapter<Perks> {
+  public static provider(config?: PerksTableAdapterConfig) {
+    const provider = []
+    if (config) {
+      provider.push({
+        provide: PerksTableAdapterConfig,
+        useValue: config,
+      })
+    }
+    provider.push(DataTableAdapter.provideClass(PerksTableAdapter))
+    return provider
+  }
+
   public entityID(item: Perks): string {
     return item.PerkID
   }
@@ -61,15 +78,14 @@ export class PerksAdapterService extends DataTableAdapter<Perks> {
             return [name || '', suffix || '', prefix || ''].join(' ')
           },
           cellRenderer: this.mithrilCell({
-            view: ({ attrs: { value }}) => {
+            view: ({ attrs: { value } }) => {
               return m('div.flex.flex-col.text-sm', [
                 value.name && m('span', value.name),
                 value.prefix && m('span.italic.text-accent', `${value.prefix} …`),
                 value.suffix && m('span.italic.text-accent', `… ${value.suffix}`),
               ])
-            }
+            },
           }),
-
         },
         {
           width: 500,
@@ -80,33 +96,42 @@ export class PerksAdapterService extends DataTableAdapter<Perks> {
           filterValueGetter: ({ data }) => {
             return this.i18n.get(data.Description)
           },
-          cellRenderer: this.asyncCell((data) => {
-            if (hasPerkAffixStats(data)) {
-              return this.nw.db.affixStatsMap.pipe(map((stats) => {
-                const affix = stats.get(data.Affix)
-                return getPerkAffixStat(data, affix, 600).map((it) => {
-                  return `<b>${this.i18n.get(it.label)}</b> ${it.value}`
-                }).join('<br>')
-              }))
-            }
-            return combineLatest({
-              ctx: this.ctx.value,
-              text: this.i18n.observe(data.Description)
-            }).pipe(switchMap(({ ctx, text }) => {
-              let gs = ctx.gs
-              if (data.ItemClassGSBonus && ctx.gsBonus) {
-                gs += (Number(data.ItemClassGSBonus.split(':')[1]) || 0)
+          cellRenderer: this.asyncCell(
+            (data) => {
+              if (hasPerkInherentAffix(data)) {
+                return this.nw.db.affixStatsMap.pipe(
+                  map((stats) => {
+                    const affix = stats.get(data.Affix)
+                    return getPerksInherentMODs(data, affix, 600)
+                      .map((it) => {
+                        return `<b>${this.i18n.get(it.label)}</b> ${it.value}`
+                      })
+                      .join('<br>')
+                  })
+                )
               }
-              return this.nw.expression.solve({
-                text: text,
-                charLevel: ctx.level,
-                gearScore: gs,
-                itemId: data.PerkID,
-              })
-            }))
-          }, {
-            trustHtml: true
-          })
+              return combineLatest({
+                ctx: this.ctx.value,
+                text: this.i18n.observe(data.Description),
+              }).pipe(
+                switchMap(({ ctx, text }) => {
+                  let gs = ctx.gs
+                  if (data.ItemClassGSBonus && ctx.gsBonus) {
+                    gs += Number(data.ItemClassGSBonus.split(':')[1]) || 0
+                  }
+                  return this.nw.expression.solve({
+                    text: text,
+                    charLevel: ctx.level,
+                    gearScore: gs,
+                    itemId: data.PerkID,
+                  })
+                })
+              )
+            },
+            {
+              trustHtml: true,
+            }
+          ),
         },
         {
           headerName: 'Type',
@@ -132,9 +157,9 @@ export class PerksAdapterService extends DataTableAdapter<Perks> {
                 return data.ItemClassGSBonus?.split(':')[1]
               }),
               width: 50,
-              filter: false
-            }
-          ]
+              filter: false,
+            },
+          ],
         },
         {
           width: 500,
@@ -147,8 +172,8 @@ export class PerksAdapterService extends DataTableAdapter<Perks> {
           filterParams: SelectboxFilter.params({
             showCondition: true,
             conditionAND: true,
-            showSearch: true
-          })
+            showSearch: true,
+          }),
         },
         {
           field: this.fieldName('ExclusiveLabels'),
@@ -160,8 +185,8 @@ export class PerksAdapterService extends DataTableAdapter<Perks> {
           filterParams: SelectboxFilter.params({
             showCondition: true,
             conditionAND: true,
-            showSearch: true
-          })
+            showSearch: true,
+          }),
         },
         {
           field: this.fieldName('ExcludeItemClass'),
@@ -173,20 +198,44 @@ export class PerksAdapterService extends DataTableAdapter<Perks> {
           filterParams: SelectboxFilter.params({
             showCondition: true,
             conditionAND: true,
-            showSearch: false
-          })
+            showSearch: false,
+          }),
+        },
+        {
+          headerName: 'IsStackableAbility',
+          filter: SelectboxFilter,
+          valueGetter: this.valueGetter(({ data }) => {
+            const ability = data['$ability'] as Ability
+            return ability?.IsStackableAbility
+          }),
         },
       ],
     }
   }
 
-  public entities: Observable<Perks[]> = defer(() => {
-    return this.nw.db.perks
-  }).pipe(
-    shareReplayRefCount(1)
-  )
+  public entities: Observable<Perks[]> = defer(() => combineLatest({
+    perks: this.config?.source || this.nw.db.perks,
+    abilities: this.nw.db.abilitiesMap,
+    affixstats: this.nw.db.affixstatsMap
+  }))
+  .pipe(map(({ perks, abilities, affixstats }) => {
+    return perks.map((it) => {
+      return {
+        ...it,
+        //$ability: abilities.get(it.EquipAbility),
+        $affix: affixstats.get(it.Affix)
+      }
+    })
+  }))
+  .pipe(shareReplayRefCount(1))
 
-  public constructor(private nw: NwService, private i18n: TranslateService, private ctx: ExprContextService) {
+  public constructor(
+    private nw: NwService,
+    private i18n: TranslateService,
+    @Optional()
+    private config: PerksTableAdapterConfig,
+    private ctx: ExprContextService
+  ) {
     super()
   }
 }
diff --git a/apps/web/app/pages/status-effects/status-effects-table-adapter.ts b/apps/web/app/widgets/adapter/status-effects-table-adapter.ts
similarity index 97%
rename from apps/web/app/pages/status-effects/status-effects-table-adapter.ts
rename to apps/web/app/widgets/adapter/status-effects-table-adapter.ts
index 33269f5b..06c41d6a 100644
--- a/apps/web/app/pages/status-effects/status-effects-table-adapter.ts
+++ b/apps/web/app/widgets/adapter/status-effects-table-adapter.ts
@@ -10,7 +10,7 @@ import { TranslateService } from '~/i18n'
 import { humanize, shareReplayRefCount } from '~/utils'
 
 @Injectable()
-export class StatusEffectsAdapterService extends DataTableAdapter<Statuseffect> {
+export class StatusEffectsTableAdapter extends DataTableAdapter<Statuseffect> {
   public entityID(item: Statuseffect): string {
     return item.StatusID
   }
diff --git a/apps/web/app/pages/vitals/vitals-table-adapter.ts b/apps/web/app/widgets/adapter/vitals-table-adapter.ts
similarity index 78%
rename from apps/web/app/pages/vitals/vitals-table-adapter.ts
rename to apps/web/app/widgets/adapter/vitals-table-adapter.ts
index 0e660c9a..be89b0ab 100644
--- a/apps/web/app/pages/vitals/vitals-table-adapter.ts
+++ b/apps/web/app/widgets/adapter/vitals-table-adapter.ts
@@ -1,21 +1,21 @@
 import { Injectable } from '@angular/core'
 import { Gamemodes, Vitals } from '@nw-data/types'
 import { GridOptions } from 'ag-grid-community'
+import m from 'mithril'
 import { combineLatest, defer, map, Observable } from 'rxjs'
+import { TranslateService } from '~/i18n'
 import { nwdbLinkUrl, NwDbService, NwVitalsService } from '~/nw'
+import { getVitalDungeon } from '~/nw/utils'
 import { RangeFilter, SelectboxFilter } from '~/ui/ag-grid'
 import { DataTableAdapter } from '~/ui/data-table'
 import { humanize, shareReplayRefCount } from '~/utils'
-import m from 'mithril'
-import { TranslateService } from '~/i18n'
-import { getVitalDungeon, getVitalDungeonId } from '~/nw/utils'
 
 export interface Entity extends Vitals {
   $dungeon: Gamemodes
 }
 
 @Injectable()
-export class VitalsAdapterService extends DataTableAdapter<Entity> {
+export class VitalsTableAdapter extends DataTableAdapter<Entity> {
   public entityID(item: Vitals): string {
     return item.VitalsID
   }
@@ -35,32 +35,19 @@ export class VitalsAdapterService extends DataTableAdapter<Entity> {
           pinned: true,
           valueGetter: this.valueGetter(({ data }) => this.i18n.get(data.DisplayName)),
           getQuickFilterText: ({ value }) => value,
-          cellRenderer: this.mithrilCell({
-            view: ({ attrs }) =>
-              m(
-                'a',
-                {
-                  href: nwdbLinkUrl('creature', attrs.data.VitalsID),
-                  target: '_blank',
-                },
-                [attrs.value]
-              ),
+          cellRenderer: this.cellRenderer(({ value, data }) => {
+            return `<a href="${nwdbLinkUrl('creature', data.VitalsID)}">${value}</a>`
           }),
         },
         {
-          width: 200,
+          width: 150,
           field: this.fieldName('Level'),
-          cellRenderer: this.mithrilCell({
-            view: ({ attrs }) => {
-              const icon = this.vitals.vitalMarkerIcon(attrs.data)
-              return m('div.relative.h-full.w-full', [
-                icon &&
-                  m('img.block.object-cover.absolute.left-0.top-0.h-full.w-full', {
-                    src: icon,
-                  }),
-                m('span.absolute.left-0.right-0.top-0.bottom-0.text-center.font-bold', attrs.value),
-              ])
-            },
+          cellClass: '',
+          cellRenderer: this.cellRenderer(({ data, value }) => {
+            const icon = this.vitals.vitalMarkerIcon(data)
+            const iconEl = icon && `<img src=${icon} class="block object-cover absolute left-0 top-0 h-full w-full" />`
+            const spanEl = `<span class="absolute left-0 right-0 top-0 bottom-0 font-bold flex items-center justify-center">${value}</span>`
+            return `${iconEl} ${spanEl}`
           }),
         },
         {
@@ -180,18 +167,18 @@ export class VitalsAdapterService extends DataTableAdapter<Entity> {
   }
 
   public cellRendererDamage() {
-    return this.mithrilCell({
-      view: ({ attrs }) => {
-        if (!attrs.value) {
-          return null
-        }
-        return m('div.flex.flex-row.items-center.justify-center.relative', [
-          m('img.w-8.h-8.mr-1', {
-            src: attrs.value < 0 ? this.vitals.iconWeakattack : this.vitals.iconStronattack,
-          }),
-          m('span.font-bold', `${attrs.value > 0 ? '+' : ''}${attrs.value}%`),
-        ])
-      },
+    return this.cellRenderer(({ value }) => {
+      if (!value) {
+        return null
+      }
+      const icon = value < 0 ? this.vitals.iconWeakattack : this.vitals.iconStronattack
+      const text = `${value > 0 ? '+' : ''}${value}%`
+      return `
+      <div class="flex flex-row items-center justify-center relative">
+        <img class="w-8 h-8 mr-1" src="${icon}"/>
+        <span class="font-bold">${text}</span>
+      </div>
+      `
     })
   }
 }
diff --git a/apps/web/app/widgets/attributes-table/attributes-table.component.html b/apps/web/app/widgets/attributes-table/attributes-table.component.html
index 48f9ae9a..30410851 100644
--- a/apps/web/app/widgets/attributes-table/attributes-table.component.html
+++ b/apps/web/app/widgets/attributes-table/attributes-table.component.html
@@ -9,7 +9,7 @@
     <tr *ngFor="let row of table | async; let i = index">
       <th >{{ attributes[i].name }}</th>
       <td *ngFor="let col of row">
-        <div [nwbItemDetail]="col.item" class="flex gap-2">
+        <div class="flex gap-2">
           <a [nwInfoLink]="col.item.ItemID" [nwInfoResource]="'item'" target="_blank" class="w-10 h-10">
             <picture [nwIcon]="col.item" class="nw-icon w-10 h-10"></picture>
           </a>
diff --git a/apps/web/app/widgets/attributes-table/attributes-table.component.ts b/apps/web/app/widgets/attributes-table/attributes-table.component.ts
index af0c94fd..c086ea3c 100644
--- a/apps/web/app/widgets/attributes-table/attributes-table.component.ts
+++ b/apps/web/app/widgets/attributes-table/attributes-table.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'
 import { combineLatest, defer, map, of } from 'rxjs'
 import { NwDbService } from '~/nw'
-import { getAffixStats, getPerkAffixStat, getPerkbucketPerks } from '~/nw/utils'
+import { getAffixMODs, getPerksInherentMODs, getPerkbucketPerks } from '~/nw/utils'
 
 const ATTRIBUTES = [
   { attribute: 'AttributeStr', name: 'Strength' },
diff --git a/apps/web/app/widgets/empty/empty.component.ts b/apps/web/app/widgets/empty/empty.component.ts
index c1963efc..f57ac050 100644
--- a/apps/web/app/widgets/empty/empty.component.ts
+++ b/apps/web/app/widgets/empty/empty.component.ts
@@ -2,7 +2,10 @@ import { Component } from "@angular/core"
 
 @Component({
   standalone: true,
-  template: ''
+  template: '',
+  host: {
+    class: 'hidden'
+  }
 })
 export class EmptyComponent {
 
diff --git a/apps/web/app/widgets/item-detail/affix-stat.component.ts b/apps/web/app/widgets/item-detail/affix-stat.component.ts
deleted file mode 100644
index ad51ec0b..00000000
--- a/apps/web/app/widgets/item-detail/affix-stat.component.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Component, Input } from '@angular/core'
-import { Perks } from '@nw-data/types'
-import { BehaviorSubject, combineLatest, defer, map, ReplaySubject } from 'rxjs'
-import { NwService } from '~/nw'
-import { getPerkAffixStat, hasPerkAffixStats } from '~/nw/utils'
-
-@Component({
-  selector: 'nwb-affixstat',
-  template: `
-    <div *ngFor="let mod of mods | async">
-      <b>{{ mod.value }} </b><span [nwText]="mod.label"></span>
-    </div>
-    <div *ngIf="showName && perk && perk.DisplayName">
-      (<span *ngIf="perk && perk.DisplayName" [nwText]="perk.DisplayName"></span>)
-    </div>
-  `,
-})
-export class AffixStatComponent {
-  @Input()
-  public set perk(value: Perks) {
-    this.perk$.next(value)
-  }
-  public get perk() {
-    return this.perk$.value
-  }
-
-  @Input()
-  public showName: boolean
-
-  @Input()
-  public set gearScore(value: number) {
-    this.gearScore$.next(value)
-  }
-
-  public affix = defer(() => combineLatest({
-    perk: this.perk$,
-    affixStats: this.nw.db.affixstatsMap,
-  })).pipe(map(({ perk, affixStats }) => affixStats.get(perk.Affix)))
-
-  public mods = defer(() => combineLatest({
-    perk: this.perk$,
-    affix: this.affix,
-    score: this.gearScore$
-  }) ).pipe(
-    map(({ perk, affix, score }) => {
-      if (hasPerkAffixStats(perk)) {
-        return getPerkAffixStat(perk, affix, score)
-      }
-      return []
-    })
-  )
-
-  private perk$ = new BehaviorSubject<Perks>(null)
-  private gearScore$ = new BehaviorSubject<number>(600)
-
-  public constructor(private nw: NwService) {}
-}
diff --git a/apps/web/app/widgets/item-detail/index.ts b/apps/web/app/widgets/item-detail/index.ts
index 5ff22649..cbfe7153 100644
--- a/apps/web/app/widgets/item-detail/index.ts
+++ b/apps/web/app/widgets/item-detail/index.ts
@@ -1 +1,8 @@
 export * from './item-detail.module'
+export * from './item-detail-perks.component'
+export * from './item-detail-description.component'
+export * from './item-detail-divider.component'
+export * from './item-detail-header.component'
+export * from './item-detail-info.component'
+export * from './item-detail-stats.component'
+export * from './item-detail.service'
diff --git a/apps/web/app/widgets/item-detail/item-card.component.html b/apps/web/app/widgets/item-detail/item-card.component.html
new file mode 100644
index 00000000..1f9a1692
--- /dev/null
+++ b/apps/web/app/widgets/item-detail/item-card.component.html
@@ -0,0 +1,17 @@
+<nwb-item-detail-header [enableTracker]="enableTracker" [enableInfoLink]="enableInfoLink"></nwb-item-detail-header>
+<ng-container *ngIf="vm$ | async; let vm">
+  <ng-container *ngIf="vm.hasStats">
+    <nwb-item-detail-stats></nwb-item-detail-stats>
+    <nwb-item-detail-divider></nwb-item-detail-divider>
+  </ng-container>
+  <ng-container *ngIf="vm.hasPerks">
+    <nwb-item-detail-perks></nwb-item-detail-perks>
+    <nwb-item-detail-divider></nwb-item-detail-divider>
+  </ng-container>
+  <ng-container *ngIf="vm.hasDescription">
+    <nwb-item-detail-description></nwb-item-detail-description>
+    <nwb-item-detail-divider></nwb-item-detail-divider>
+  </ng-container>
+  <nwb-item-detail-info></nwb-item-detail-info>
+</ng-container>
+<ng-content></ng-content>
diff --git a/apps/web/app/widgets/item-detail/item-card.component.ts b/apps/web/app/widgets/item-detail/item-card.component.ts
new file mode 100644
index 00000000..6da04375
--- /dev/null
+++ b/apps/web/app/widgets/item-detail/item-card.component.ts
@@ -0,0 +1,68 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnChanges } from '@angular/core'
+import { Housingitems, ItemDefinitionMaster } from '@nw-data/types'
+import { map } from 'rxjs'
+import { NwDbService } from '~/nw'
+import { getItemId } from '~/nw/utils'
+import { ItemDetailDescriptionComponent } from './item-detail-description.component'
+import { ItemDetailDivider } from './item-detail-divider.component'
+import { ItemDetailHeaderComponent } from './item-detail-header.component'
+import { ItemDetailInfoComponent } from './item-detail-info.component'
+import { ItemDetailPerksComponent } from './item-detail-perks.component'
+import { ItemDetailStatsComponent } from './item-detail-stats.component'
+import { ItemDetailService } from './item-detail.service'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-item-card',
+  templateUrl: './item-card.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    ItemDetailHeaderComponent,
+    ItemDetailDescriptionComponent,
+    ItemDetailDivider,
+    ItemDetailInfoComponent,
+    ItemDetailPerksComponent,
+    ItemDetailStatsComponent,
+  ],
+  exportAs: 'card',
+  host: {
+    class: 'block class bg-base-200 rounded-md overflow-clip',
+  },
+  providers: [
+    {
+      provide: ItemDetailService,
+      useExisting: forwardRef(() => ItemCardComponent),
+    },
+  ],
+})
+export class ItemCardComponent extends ItemDetailService implements OnChanges {
+  @Input()
+  public set entityId(value: string) {
+    this.entityId$.next(value)
+  }
+
+  @Input()
+  public set entity(value: ItemDefinitionMaster | Housingitems) {
+    this.entityId$.next(getItemId(value))
+  }
+
+  @Input()
+  public enableTracker: boolean
+
+  @Input()
+  public enableInfoLink: boolean
+
+  public get isLoading$() {
+    return this.vm$.pipe(map((it) => it.loading))
+  }
+
+  public constructor(db: NwDbService, cdRef: ChangeDetectorRef) {
+    super(db, cdRef)
+  }
+
+  public ngOnChanges() {
+    this.cdRef.markForCheck()
+  }
+}
diff --git a/apps/web/app/widgets/item-detail/item-detail-description.component.ts b/apps/web/app/widgets/item-detail/item-detail-description.component.ts
new file mode 100644
index 00000000..159e2c16
--- /dev/null
+++ b/apps/web/app/widgets/item-detail/item-detail-description.component.ts
@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { NwModule } from '~/nw'
+import { ItemDetailService } from './item-detail.service'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-item-detail-description',
+  template: ` {{ detail.description$ | async | nwText }} `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule],
+  host: {
+    class: 'block p-3 text-[#e1cb99] italic'
+  },
+})
+export class ItemDetailDescriptionComponent {
+  public constructor(protected detail: ItemDetailService) {
+    //
+  }
+}
diff --git a/apps/web/app/widgets/item-detail/item-detail-divider.component.ts b/apps/web/app/widgets/item-detail/item-detail-divider.component.ts
new file mode 100644
index 00000000..f8f2c201
--- /dev/null
+++ b/apps/web/app/widgets/item-detail/item-detail-divider.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-item-detail-divider,.item-detail-divider',
+  template: '',
+  host: {
+    class: 'block hr border-t-0 bg-gradient-to-r from-transparent via-zinc-600 to-transparent h-[1px]',
+  },
+})
+export class ItemDetailDivider {}
diff --git a/apps/web/app/widgets/item-detail/item-detail-header.component.html b/apps/web/app/widgets/item-detail/item-detail-header.component.html
index 9ec13a09..c7c1e335 100644
--- a/apps/web/app/widgets/item-detail/item-detail-header.component.html
+++ b/apps/web/app/widgets/item-detail/item-detail-header.component.html
@@ -1,17 +1,24 @@
-<div class="backdrop rarity-{{itemRarity}}"></div>
-<a [nwInfoLink]="enableNwdbLink ? entityId : null" [nwInfoResource]="'item'" target="_blank">
-  <picture [nwIcon]="entity" class="nw-icon bg-rarity-{{itemRarity}}"></picture>
-</a>
-<aside class="flex-1 flex flex-col justify-between">
-  <div class="flex flex-row justify-between">
-    <h3 class="font-bold text-rarity-{{itemRarity}}" [nwText]="itemName"></h3>
-    <div class="flex flex-col items-end" *ngIf="enableTracker || enableMarker">
-      <nwb-item-marker [itemId]="entityId" *ngIf="enableMarker" class="text-right"></nwb-item-marker>
-      <nwb-gs-tracker [itemId]="entityId" *ngIf="showGsTracker" class="text-right mt-1 tooltip-left" [emptyTip]="'Track Gear Score'"></nwb-gs-tracker>
+<ng-container *ngIf="vm$ | async; let vm">
+  <div class="backdrop rarity-{{vm.rarity}}"></div>
+  <a [nwInfoLink]="enableInfoLink ? vm.entityId : null" [nwInfoResource]="'item'" class="relative">
+    <span class="italic">{{ tier$ | async }}</span>
+    <picture [nwIcon]="vm.entity" [nwRarity]="vm.rarity"></picture>
+    <ng-content select=".icon-overlay"></ng-content>
+  </a>
+  <aside class="flex-1 flex flex-col justify-between">
+    <div class="flex flex-row justify-between">
+      <h3 class="font-bold text-rarity-{{vm.rarity}} leading-4 mt-1" [nwText]="vm.name"></h3>
+      <div class="flex flex-col items-end">
+        <nwb-item-marker [itemId]="vm.entityId" *ngIf="showMarker$ | async" class="text-right"></nwb-item-marker>
+        <nwb-gs-tracker [itemId]="vm.entityId" *ngIf="showGsMarker$ | async" class="text-right mt-1 tooltip-left" [emptyTip]="'Track Gear Score'"></nwb-gs-tracker>
+      </div>
     </div>
-  </div>
-  <div class="flex flex-row justify-between gap-2">
-    <span [nwText]="itemTypeName"></span>
-    <span class="font-bold text-rarity-{{itemRarity}}" [nwText]="itemRarityName"></span>
-  </div>
-</aside>
+    <div>
+      <div *ngIf="vm.sourceLabel" class="text-xs" [class.text-error]="vm.isDeprecated">{{ vm.sourceLabel }}</div>
+      <div class="flex flex-row justify-between gap-2">
+        <span [nwText]="vm.typeName"></span>
+        <span class="font-bold text-rarity-{{vm.rarity}}" [nwText]="vm.rarityName"></span>
+      </div>
+    </div>
+  </aside>
+</ng-container>
diff --git a/apps/web/app/widgets/item-detail/item-detail-header.component.scss b/apps/web/app/widgets/item-detail/item-detail-header.component.scss
index dd700aba..ad0c97cc 100644
--- a/apps/web/app/widgets/item-detail/item-detail-header.component.scss
+++ b/apps/web/app/widgets/item-detail/item-detail-header.component.scss
@@ -14,6 +14,13 @@
     z-index: 2;
   }
 
+  a span {
+    position: absolute;
+    z-index: 3;
+    top: -2px;
+    left: 4px;
+  }
+
   aside {
     z-index: 2;
   }
diff --git a/apps/web/app/widgets/item-detail/item-detail-header.component.ts b/apps/web/app/widgets/item-detail/item-detail-header.component.ts
index 976e3032..509af3b2 100644
--- a/apps/web/app/widgets/item-detail/item-detail-header.component.ts
+++ b/apps/web/app/widgets/item-detail/item-detail-header.component.ts
@@ -1,94 +1,51 @@
-import {
-  Component,
-  OnInit,
-  ChangeDetectionStrategy,
-  Input,
-  OnChanges,
-  ChangeDetectorRef,
-} from '@angular/core'
-import { Housingitems, ItemDefinitionMaster } from '@nw-data/types'
-import { takeUntil } from 'rxjs'
-import { getItemId, getItemRarity, getItemRarityName, isHousingItem, isMasterItem } from '~/nw/utils'
-import { DestroyService } from '~/utils'
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { BehaviorSubject, combineLatest, defer, map, tap } from 'rxjs'
+import { NwModule } from '~/nw'
+import { ItemTrackerModule } from '../item-tracker'
 import { ItemDetailService } from './item-detail.service'
 
 @Component({
+  standalone: true,
   selector: 'nwb-item-detail-header',
   templateUrl: './item-detail-header.component.html',
   styleUrls: ['./item-detail-header.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [DestroyService],
+  imports: [CommonModule, NwModule, ItemTrackerModule],
   host: {
-    '[class.v-lg]': 'size === "lg"',
-    '[class.v-sm]': 'size === "sm"'
-  }
+    class: 'block',
+  },
 })
-export class ItemDetailHeaderComponent implements OnInit, OnChanges {
-
-  public entity: ItemDefinitionMaster | Housingitems
-
-  @Input()
-  public enableNwdbLink: boolean
-
+export class ItemDetailHeaderComponent {
   @Input()
-  public enableTracker: boolean
+  public enableInfoLink: boolean
 
   @Input()
-  public enableMarker: boolean
-
-  @Input()
-  public size: 'sm' | 'lg' | 'md' = 'md'
-
-  public get entityId() {
-    return getItemId(this.entity)
+  public set enableTracker(value: boolean) {
+    this.enableTracker$.next(value)
   }
 
-  public get iconPath(): string {
-    return this.entity?.IconPath
-  }
-  public get itemName(): string {
-    return this.entity?.Name
-  }
-  public get itemRarity(): number {
-    return getItemRarity(this.entity)
-  }
-  public get itemRarityName(): string {
-    return getItemRarityName(this.entity)
-  }
-  public get itemTypeName(): string {
-    if (this.entity) {
-      if (isMasterItem(this.entity)) {
-        return this.entity.ItemTypeDisplayName
-      }
-      if (isHousingItem(this.entity)) {
-        return this.entity.ItemType
-      }
-    }
-    return ''
-  }
-  public get itemType(): string {
-    return this.entity?.ItemType || ''
-  }
-  public get showGsTracker() {
-    return this.enableTracker && (this.itemType === 'Weapon' || this.itemType === 'Armor')
-  }
+  protected name$ = this.detail.name$
+  protected source$ = this.detail.source$
+  protected rarity$ = this.detail.rarity$
+  protected rarityName$ = this.detail.rarityName$
+  protected tier$ = this.detail.tierLabel$
 
-  public constructor(
-    private cdRef: ChangeDetectorRef,
-    private destroy: DestroyService,
-    private service: ItemDetailService
-  ) {
-    //
+  protected get vm$() {
+    return this.detail.vm$
   }
 
-  public ngOnInit(): void {
-    this.service.entity$.pipe(takeUntil(this.destroy.$)).subscribe((it) => {
-      this.entity = it
-      this.cdRef.markForCheck()
+  protected showMarker$ = defer(() => this.enableTracker$)
+  protected showGsMarker$ = defer(() =>
+    combineLatest({
+      enabled: this.enableTracker$,
+      hasGs: this.detail.item$.pipe(map((it) => it?.ItemType === 'Weapon' || it?.ItemType === 'Armor')),
     })
-  }
+  ).pipe(map(({ enabled, hasGs }) => enabled && hasGs))
 
-  public ngOnChanges(): void {
-    this.cdRef.markForCheck()
+  private enableTracker$ = new BehaviorSubject(false)
+
+  public constructor(protected detail: ItemDetailService) {
+    //
   }
 }
diff --git a/apps/web/app/widgets/item-detail/item-detail-info.component.html b/apps/web/app/widgets/item-detail/item-detail-info.component.html
index 5ae6a7af..5de100a5 100644
--- a/apps/web/app/widgets/item-detail/item-detail-info.component.html
+++ b/apps/web/app/widgets/item-detail/item-detail-info.component.html
@@ -1,20 +1,30 @@
-<div *ngIf="bindOnEquip" class="text-emerald-500 font-bold">Bind On Equip</div>
-<div *ngIf="bindOnPickup" class="text-emerald-500 font-bold">Bind On Pickup</div>
-<div *ngIf="canReplaceGem" class="text-emerald-500 font-bold">Can Replace Gem</div>
-<div *ngIf="cantReplaceGem" class="text-red-600 font-bold">Can't Replace Gem</div>
-<div *ngIf="tier; let text" class="font-bold">
-  <span class="text-zinc-500">Tier</span> <span class="text-white"> {{text}}</span>
-</div>
-<div *ngIf="weight; let text" class="font-bold">
-  <span class="text-white">{{text | number:'1.1'}}</span> <span class="text-zinc-500"> Weight</span>
-</div>
-<div *ngIf="durability; let text" class="font-bold">
-  <span class="text-white">{{text}}</span> <span class="text-zinc-500"> Durability</span>
-</div>
-<div *ngIf="requiredLevel; let text" class="font-bold">
-  <span class="text-zinc-500">Requirement: Level</span> <span class="text-white"> {{text}}</span>
-</div>
-<div *ngIf="maxStackSize; let text" class="font-bold">
-  <span class="text-zinc-500">Max Stack:</span> <span class="text-white"> {{text}}</span>
-</div>
-
+<ng-container *ngIf="vm$ | async; let vm">
+  <div *ngIf="vm.bindOnEquip" class="text-emerald-500 font-bold">{{ 'ui_bindOnEquip' | nwText }}:</div>
+  <div *ngIf="vm.bindOnPickup" class="text-emerald-500 font-bold">{{ 'ui_bindOnPickup' | nwText }}:</div>
+  <div *ngIf="vm.canReplaceGem" class="text-emerald-500 font-bold">Can Replace Gem</div>
+  <div *ngIf="vm.cantReplaceGem" class="text-red-600 font-bold">Can't Replace Gem</div>
+  <div *ngIf="vm.tier; let text" class="font-bold">
+    <span class="text-zinc-500">Tier</span> <span class="text-white"> {{ text }}</span>
+  </div>
+  <div *ngIf="vm.weight; let text" class="font-bold">
+    <span class="text-white">{{ text | number: '1.1-1' }}</span> <span class="text-zinc-500"> Weight</span>
+  </div>
+  <div *ngIf="vm.durability; let text" class="font-bold">
+    <span class="text-white">{{ text }}</span> <span class="text-zinc-500"> Durability</span>
+  </div>
+  <div *ngIf="vm.requiredLevel; let text" class="font-bold">
+    <span class="text-zinc-500">{{ 'ui_level_requirement' | nwText }}:</span>
+    <span class="text-white"> {{ text }}</span>
+  </div>
+  <div *ngIf="vm.maxStackSize; let text" class="font-bold">
+    <span class="text-zinc-500">Max Stack:</span> <span class="text-white"> {{ text }}</span>
+  </div>
+  <div *ngIf="vm.ingredientTypes?.length" class="font-bold">
+    <span class="text-zinc-500"> {{ 'ui_tooltip_ingredient_types' | nwText }}: </span>
+    <span class="text-white">
+      <ng-container *ngFor="let it of vm.ingredientTypes; let last = last">
+        {{ it.DisplayText | nwText }}<ng-container *ngIf="!last">,</ng-container>
+      </ng-container>
+    </span>
+  </div>
+</ng-container>
diff --git a/apps/web/app/widgets/item-detail/item-detail-info.component.ts b/apps/web/app/widgets/item-detail/item-detail-info.component.ts
index 5a7f49a9..ca235d76 100644
--- a/apps/web/app/widgets/item-detail/item-detail-info.component.ts
+++ b/apps/web/app/widgets/item-detail/item-detail-info.component.ts
@@ -1,52 +1,45 @@
-import { Component, Input } from "@angular/core"
-import { Housingitems, ItemDefinitionMaster } from "@nw-data/types"
-import { getItemTierAsRoman, isMasterItem } from "~/nw/utils"
+import { CommonModule } from "@angular/common"
+import { ChangeDetectionStrategy, Component } from "@angular/core"
+import { combineLatest, map } from "rxjs"
+import { NwModule } from "~/nw"
+import { getItemTierAsRoman } from "~/nw/utils"
+import { ItemDetailService } from "./item-detail.service"
 
 @Component({
+  standalone: true,
   selector: 'nwb-item-detail-info',
   templateUrl: './item-detail-info.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule],
   host: {
-    class: 'block'
+    class: 'block p-3'
   }
 })
 export class ItemDetailInfoComponent {
 
-  @Input()
-  public item: ItemDefinitionMaster | Housingitems
+  protected vm$ = combineLatest({
+    entity: this.detail.entity$,
+    item: this.detail.item$,
+    housing: this.detail.housingItem$,
+    weapon: this.detail.weaponStats$,
+    armor: this.detail.armorStats$,
+    ingCats: this.detail.ingredientCategories$,
+  }).pipe(map(({ entity, item, weapon, armor, ingCats }) => {
+    return {
+      bindOnEquip: !!item?.BindOnEquip,
+      bindOnPickup: !!entity?.BindOnPickup,
+      tier: getItemTierAsRoman(entity?.Tier),
+      canReplaceGem: item && item.CanHavePerks && item.CanReplaceGem,
+      cantReplaceGem: item && item.CanHavePerks && !item.CanReplaceGem,
+      weight: (weapon?.WeightOverride || armor?.WeightOverride || item?.Weight) / 10,
+      durability: item?.Durability,
+      maxStackSize: entity?.MaxStackSize,
+      requiredLevel: item?.RequiredLevel,
+      ingredientTypes: ingCats
+    }
+  }))
+
+  public constructor(private detail: ItemDetailService) {
 
-  protected get bindOnPickup() {
-    return !!this.item?.BindOnPickup
-  }
-
-  protected get tier() {
-    return getItemTierAsRoman(this.item?.Tier)
-  }
-
-  protected get bindOnEquip() {
-    return isMasterItem(this.item) && this.item.BindOnEquip
-  }
-
-  protected get canReplaceGem() {
-    return isMasterItem(this.item) && this.item.CanHavePerks && this.item.CanReplaceGem
-  }
-
-  protected get cantReplaceGem() {
-    return isMasterItem(this.item) && this.item.CanHavePerks && !this.item.CanReplaceGem
-  }
-
-  protected get requiredLevel() {
-    return isMasterItem(this.item) && this.item.RequiredLevel
-  }
-
-  protected get weight() {
-    return this.item?.Weight / 10
-  }
-
-  protected get durability() {
-    return isMasterItem(this.item) ? this.item.Durability : null
-  }
-
-  protected get maxStackSize() {
-    return this.item.MaxStackSize
   }
 }
diff --git a/apps/web/app/widgets/item-detail/item-detail-perks.component.html b/apps/web/app/widgets/item-detail/item-detail-perks.component.html
index 081e1252..86c633e1 100644
--- a/apps/web/app/widgets/item-detail/item-detail-perks.component.html
+++ b/apps/web/app/widgets/item-detail/item-detail-perks.component.html
@@ -1,27 +1,29 @@
-<div class="flex flex-row text-sky-600" *ngFor="let perk of perks; let isLast = last">
-  <a class="flex-none">
-    <img [nwImage]="perk.IconPath" class="w-8" />
-  </a>
-  <div class="ml-2">
-    <ng-container *ngIf="perk.Affix && perk.PerkType === 'Inherent'">
-      <nwb-affixstat [perk]="perk" [gearScore]="gearScore"></nwb-affixstat>
-    </ng-container>
-    <ng-container *ngIf="!(perk.Affix && perk.PerkType === 'Inherent')">
-      <b class="mr-1" *ngIf="perk.AppliedPrefix" [nwText]="perk.AppliedPrefix"></b>
-      <b class="mr-1" *ngIf="perk.DisplayName" [nwText]="perk.DisplayName"></b>
-      <b class="mr-1" *ngIf="perk.AppliedSuffix" [nwText]="perk.AppliedSuffix"></b>
-      <span *ngIf="perk.Description" [nwText]="perk.Description" [itemId]="perk.PerkID" [gearScore]="gearScore"></span>
-    </ng-container>
-  </div>
-</div>
-<div class="flex flex-row text-sky-600" *ngFor="let bucket of buckets">
-  <picture class="w-8 h-8 relative flex items-center justify-center">
-    <img
-      [nwImage]="'assets/icons/crafting_perkbackground.png'"
-      class="absolute top-0 left-0 right-0 bottom-0 block object-cover scale-110"
-    />
-    <span class="relative text-2xs text-white">{{ bucket.PerkChance | percent }}</span>
-  </picture>
-  <span> </span>
-  <div class="ml-2">Random Perk</div>
+<div
+  class="flex flex-row gap-2 text-sky-600 relative rounded-md outline outline-1 outline-transparent"
+  [class.hover:outline-primary-focus]="perkEditable && item.editable"
+  [class.hover:cursor-pointer]="perkEditable && item.editable"
+  *ngFor="let item of perks$ | async; let isLast = last; trackBy: trackByIndex"
+  (click)="editPerkClicked(item)"
+>
+  <ng-container *ngIf="item.perk">
+    <a class="flex-none">
+      <img [nwImage]="item.icon" class="w-8" />
+    </a>
+    <div class="pt-1">
+      <div *ngFor="let row of item.text; trackBy: trackByIndex">
+        <b> {{ row.label | nwText }} </b>
+        <span> {{ row.description | nwText: { itemId: item.perk.PerkID, gearScore: gearScore$ | async } }} </span>
+      </div>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="!item.perk">
+    <picture class="flex-none w-8 h-8 relative flex items-center justify-center">
+      <img
+        [nwImage]="'assets/icons/crafting_perkbackground.png'"
+        class="absolute top-0 left-0 right-0 bottom-0 block object-cover scale-110"
+      />
+      <span class="relative text-2xs text-white">{{ item.bucket?.PerkChance | percent }}</span>
+    </picture>
+    <div class="pt-1">Random Perk</div>
+  </ng-container>
 </div>
diff --git a/apps/web/app/widgets/item-detail/item-detail-perks.component.ts b/apps/web/app/widgets/item-detail/item-detail-perks.component.ts
index cc9b4df6..becddf1e 100644
--- a/apps/web/app/widgets/item-detail/item-detail-perks.component.ts
+++ b/apps/web/app/widgets/item-detail/item-detail-perks.component.ts
@@ -1,22 +1,39 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
-import { Perkbuckets, Perks } from '@nw-data/types'
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TrackByFunction } from '@angular/core'
+import { defer } from 'rxjs'
+import { NwDbService, NwModule } from '~/nw'
+import { ItemDetailService, PerkDetail } from './item-detail.service'
 
 @Component({
+  standalone: true,
   selector: 'nwb-item-detail-perks',
   templateUrl: './item-detail-perks.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule],
   host: {
-    class: 'flex flex-col gap-2'
-  }
+    class: 'p-3 flex flex-col gap-1 ',
+  },
 })
 export class ItemDetailPerksComponent {
+  protected gearScore$ = defer(() => this.detail.itemGS$)
 
   @Input()
-  public perks: Perks[]
+  public perkEditable: boolean
 
-  @Input()
-  public buckets: Perkbuckets[]
+  @Output()
+  public editPerk = new EventEmitter<PerkDetail>()
 
-  @Input()
-  public gearScore: number = 600
+  protected perks$ = defer(() => this.detail.perksDetails$)
+
+  protected trackByIndex: TrackByFunction<any> = (i) => i
+
+  public constructor(private detail: ItemDetailService, private db: NwDbService) {
+    //
+  }
+
+  protected editPerkClicked(item: PerkDetail) {
+    if (this.perkEditable && item?.editable) {
+      this.editPerk.next(item)
+    }
+  }
 }
diff --git a/apps/web/app/widgets/item-detail/item-detail-salvage.component.html b/apps/web/app/widgets/item-detail/item-detail-salvage.component.html
deleted file mode 100644
index cf04a971..00000000
--- a/apps/web/app/widgets/item-detail/item-detail-salvage.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div *ngIf="azothReward; let text">
-  Azoth {{ text }}
-</div>
-<div *ngIf="azothSalt; let text">
-  Azoth salt {{ text }}
-</div>
-<div *ngIf="currencyReward; let text">
-  Coins {{ text }}
-</div>
diff --git a/apps/web/app/widgets/item-detail/item-detail-salvage.component.ts b/apps/web/app/widgets/item-detail/item-detail-salvage.component.ts
deleted file mode 100644
index 9e37045e..00000000
--- a/apps/web/app/widgets/item-detail/item-detail-salvage.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Component, Input } from "@angular/core"
-import { GameEvent } from "@nw-data/types"
-import { combineLatest } from "rxjs"
-import { NwDbService } from "~/nw"
-
-@Component({
-  selector: 'nwb-item-detail-salvage',
-  templateUrl: './item-detail-salvage.component.html',
-  host: {
-    class: 'block'
-  }
-})
-export class ItemDetailSalvageComponent {
-
-  @Input()
-  public event: GameEvent
-
-  public get azothReward() {
-    return this.event?.AzothReward
-  }
-
-  public get azothSalt() {
-    return this.event?.AzothSalt
-  }
-
-  public get currencyReward() {
-    if (this.event?.CurrencyReward) {
-      return this.event.CurrencyReward.split('-').map((it) => Number(it) / 100).join(' - ')
-    }
-    return null
-  }
-}
diff --git a/apps/web/app/widgets/item-detail/item-detail-stats.component.html b/apps/web/app/widgets/item-detail/item-detail-stats.component.html
index e69de29b..3383fc4d 100644
--- a/apps/web/app/widgets/item-detail/item-detail-stats.component.html
+++ b/apps/web/app/widgets/item-detail/item-detail-stats.component.html
@@ -0,0 +1,19 @@
+<div *ngIf="gsLabel$ | async; let gs" class="flex gap-2">
+  <span
+    cdkOverlayOrigin
+    class="text-5xl font-bold rounded-md border border-transparent "
+    [class.hover:border-primary]="gearScoreEditable"
+    [class.cursor-pointer]="gearScoreEditable"
+    [class.select-none]="gearScoreEditable"
+    style="min-width: 3rem"
+    (click)="onGearScoreEdit($event)"
+    >{{ gs }}</span
+  >
+  <div class="flex flex-col justify-center opacity-50 leading-4">
+    <span>Gear</span>
+    <span>Score</span>
+  </div>
+</div>
+<div *ngFor="let row of stats$ | async">
+  <b>{{ row.value }} </b> <span class="opacity-50">{{ row.label }}</span>
+</div>
diff --git a/apps/web/app/widgets/item-detail/item-detail-stats.component.ts b/apps/web/app/widgets/item-detail/item-detail-stats.component.ts
index d2e8bff1..272ec16c 100644
--- a/apps/web/app/widgets/item-detail/item-detail-stats.component.ts
+++ b/apps/web/app/widgets/item-detail/item-detail-stats.component.ts
@@ -1,17 +1,149 @@
-import { Component, Input } from "@angular/core"
-import { Housingitems, ItemDefinitionMaster } from "@nw-data/types"
-import { ItemDetailService } from "./item-detail.service"
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input, EventEmitter, Output, ViewChild } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { ItemDefinitionMaster, ItemdefinitionsArmor, ItemdefinitionsWeapons } from '@nw-data/types'
+import { combineLatest, map, of } from 'rxjs'
+import { NwModule } from '~/nw'
+import { getArmorRatingElemental, getArmorRatingPhysical } from '~/nw/utils'
+import { ItemDetailService } from './item-detail.service'
+import { CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay'
+
+export interface ItemStat {
+  item: ItemDefinitionMaster
+  label: string
+  value: string | number
+}
 
 @Component({
+  standalone: true,
   selector: 'nwb-item-detail-stats',
-  templateUrl: './item-detail-stats.component.html'
+  exportAs: 'itemDetailStats',
+  templateUrl: 'item-detail-stats.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule, FormsModule, OverlayModule],
+  host: {
+    class: 'block p-3',
+  },
 })
 export class ItemDetailStatsComponent {
+  @Input()
+  public gsEditable: boolean = false
+
+  @Output()
+  public gsChange = new EventEmitter<number>()
+
+  @Output()
+  public gearScoreEdit = new EventEmitter<MouseEvent>()
 
   @Input()
-  public item: ItemDefinitionMaster | Housingitems
+  public gearScoreEditable: boolean = false
+
+  @ViewChild(CdkOverlayOrigin)
+  public gearScoreOverlayOrigin: CdkOverlayOrigin
 
-  public constructor(private service: ItemDetailService) {
+  protected gsLabel$ = this.detail.itemGSLabel$
+
+  protected stats$ = combineLatest({
+    item: this.detail.item$,
+    weapon: this.detail.weaponStats$,
+    armor: this.detail.armorStats$,
+    gearScore: this.detail.itemGS$
+  }).pipe(
+    map(({ item, weapon, armor, gearScore }) => {
+      return [...this.getWeponStats(item, weapon, gearScore), ...this.getArmorStats(item, armor, gearScore)]
+    })
+  )
+  public constructor(protected detail: ItemDetailService) {
     //
   }
+
+  protected onGearScoreEdit(e: MouseEvent) {
+    if (this.gearScoreEditable) {
+      this.gearScoreEdit.emit(e)
+    }
+  }
+
+  protected getWeponStats(item: ItemDefinitionMaster, stats: ItemdefinitionsWeapons, score: number) {
+    const result: ItemStat[] = []
+    if (stats?.BaseDamage != null) {
+      result.push({
+        item,
+        label: 'Base Damage',
+        value: stats.BaseDamage,
+      })
+    }
+    if (stats?.CritChance != null) {
+      result.push({
+        item,
+        label: 'Critical Hit Chance',
+        value: toPercent(stats.CritChance),
+      })
+    }
+    if (stats?.CritDamageMultiplier != null) {
+      result.push({
+        item,
+        label: 'Critical Damage Multiplier',
+        value: stats.CritDamageMultiplier.toFixed(1),
+      })
+    }
+    if (stats?.BlockStaminaDamage != null) {
+      result.push({
+        item,
+        label: 'Block Stamina Damage',
+        value: stats.BlockStaminaDamage.toFixed(1),
+      })
+    }
+    if (stats?.BaseStaggerDamage != null) {
+      result.push({
+        item,
+        label: 'Base Stagger Damage',
+        value: stats.BaseStaggerDamage.toFixed(1),
+      })
+    }
+    if (stats?.ElementalArmorSetScaleFactor != null && !!stats?.ArmorRatingScaleFactor) {
+      result.push({
+        item,
+        label: 'Armor Rating - Elemental',
+        value: getArmorRatingElemental(stats, score).toFixed(1),
+      })
+    }
+    if (stats?.PhysicalArmorSetScaleFactor != null && !!stats?.ArmorRatingScaleFactor) {
+      result.push({
+        item,
+        label: 'Armor Rating - Physical',
+        value: getArmorRatingPhysical(stats, score).toFixed(1),
+      })
+    }
+    if (stats?.BlockStability != null) {
+      result.push({
+        item,
+        label: 'Blocking Stability',
+        value: `${stats.BlockStability}%`,
+      })
+    }
+    return result
+  }
+
+  protected getArmorStats(item: ItemDefinitionMaster, stats: ItemdefinitionsArmor, score: number) {
+    const result: ItemStat[] = []
+    if (stats?.ElementalArmorSetScaleFactor != null && !!stats?.ArmorRatingScaleFactor) {
+      result.push({
+        item,
+        label: 'Armor Rating - Elemental',
+        value: getArmorRatingElemental(stats, score).toFixed(1),
+      })
+    }
+    if (stats?.PhysicalArmorSetScaleFactor != null && !!stats?.ArmorRatingScaleFactor) {
+      result.push({
+        item,
+        label: 'Armor Rating - Physical',
+        value: getArmorRatingPhysical(stats, score).toFixed(1),
+      })
+    }
+    return result
+  }
+}
+
+function toPercent(value: number) {
+  return `${(value * 100).toFixed(1)}%`
 }
diff --git a/apps/web/app/widgets/item-detail/item-detail.component.html b/apps/web/app/widgets/item-detail/item-detail.component.html
index 4df282f8..6dbc7430 100644
--- a/apps/web/app/widgets/item-detail/item-detail.component.html
+++ b/apps/web/app/widgets/item-detail/item-detail.component.html
@@ -1,35 +1 @@
-<div *ngIf="entity | async; let entity" class="flex flex-col">
-  <nwb-item-detail-header
-    [enableNwdbLink]="enableNwdbLink"
-    [enableTracker]="enableTracker"
-    [enableMarker]="enableMarker"
-  ></nwb-item-detail-header>
-  <ng-container *ngIf="description | async; let text">
-    <ng-container *ngTemplateOutlet="hr"></ng-container>
-    <p class="px-4 py-4 text-primary italic" [nwText]="text" [itemId]="entityId | async"></p>
-  </ng-container>
-  <ng-container *ngIf="perks | async; let info">
-    <ng-container *ngTemplateOutlet="hr"></ng-container>
-    <nwb-item-detail-perks class="px-4 py-4" [perks]="info.perks" [buckets]="info.buckets"></nwb-item-detail-perks>
-  </ng-container>
-  <ng-container *ngIf="enableInfo">
-    <ng-container *ngTemplateOutlet="hr"></ng-container>
-    <nwb-item-detail-info  class="px-4 py-4" [item]="entity"></nwb-item-detail-info>
-  </ng-container>
-  <!-- <ng-container *ngIf="salvageEvent | async; let item">
-    <ng-container *ngTemplateOutlet="hr"></ng-container>
-    <nwb-item-detail-salvage  class="px-4 py-4" [event]="item"></nwb-item-detail-salvage>
-  </ng-container> -->
-  <ng-container *ngIf="recipe | async; let recipe">
-    <ng-container *ngTemplateOutlet="hr"></ng-container>
-    <nwb-crafting-calculator class="p-2" [recipe]="recipe"></nwb-crafting-calculator>
-  </ng-container>
-</div>
-
-<div class="flex flex-row items-center justify-center" *ngIf="!(entity | async)">
-  <button class="btn btn-ghost loading mx-auto"></button>
-</div>
-
-<ng-template #hr>
-  <div class="hr bg-gradient-to-r from-transparent via-zinc-600 to-transparent h-[1px]"></div>
-</ng-template>
+<ng-content></ng-content>
diff --git a/apps/web/app/widgets/item-detail/item-detail.component.scss b/apps/web/app/widgets/item-detail/item-detail.component.scss
deleted file mode 100644
index 9004d236..00000000
--- a/apps/web/app/widgets/item-detail/item-detail.component.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '.././../../styles/mixins/nw-icon.scss';
-
-:host {
-  display: block;
-
-  nwb-item-detail-header + .hr {
-    display: none
-  }
-}
diff --git a/apps/web/app/widgets/item-detail/item-detail.component.stories.ts b/apps/web/app/widgets/item-detail/item-detail.component.stories.ts
new file mode 100644
index 00000000..b9c56212
--- /dev/null
+++ b/apps/web/app/widgets/item-detail/item-detail.component.stories.ts
@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common'
+import { Component, Input } from '@angular/core'
+import { Meta, moduleMetadata, Story } from '@storybook/angular'
+import { AppTestingModule } from '~/test'
+import { ItemDetailModule } from './item-detail.module'
+
+@Component({
+  imports: [CommonModule, ItemDetailModule],
+  template: `
+    <nwb-item-detail [entityId]="'1htowershieldcastt5'" #detail="detail">
+      <nwb-item-detail-header></nwb-item-detail-header>
+      <ng-container *ngIf="!(detail.isLoading$ | async)">
+        <nwb-item-detail-stats></nwb-item-detail-stats>
+        <hr class="item-detail-divider" />
+        <nwb-item-detail-perks></nwb-item-detail-perks>
+        <hr class="item-detail-divider" />
+        <nwb-item-detail-description> </nwb-item-detail-description>
+        <hr class="item-detail-divider" />
+        <nwb-item-detail-info> </nwb-item-detail-info>
+      </ng-container>
+    </nwb-item-detail>
+  `,
+})
+class StoryComponent {
+  @Input()
+  itemId: string
+}
+
+const StoryMeta: Meta = {
+  title: 'Item Detail',
+  component: StoryComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [AppTestingModule, ItemDetailModule],
+    }),
+  ],
+}
+
+export default StoryMeta
+export const ItemDetail: Story = () => ({
+  props: {
+    itemId: '1hLongsword_PromiseofPowerT5',
+  },
+})
diff --git a/apps/web/app/widgets/item-detail/item-detail.component.ts b/apps/web/app/widgets/item-detail/item-detail.component.ts
index 8cd4e992..53266e43 100644
--- a/apps/web/app/widgets/item-detail/item-detail.component.ts
+++ b/apps/web/app/widgets/item-detail/item-detail.component.ts
@@ -1,94 +1,58 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges } from '@angular/core'
-import { combineLatest, defer, EMPTY, map } from 'rxjs'
-import { ItemDetailService } from './item-detail.service'
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnChanges } from '@angular/core'
+import { Housingitems, ItemDefinitionMaster } from '@nw-data/types'
+import { map } from 'rxjs'
+import { NwDbService } from '~/nw'
+import { getItemId } from '~/nw/utils'
+import { ItemDetailService, PerkOverrideFn } from './item-detail.service'
 
 @Component({
+  standalone: true,
   selector: 'nwb-item-detail',
   templateUrl: './item-detail.component.html',
-  styleUrls: ['./item-detail.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule],
+  exportAs: 'detail',
   host: {
-    class: 'bg-base-300 rounded-md',
+    class: 'block bg-base-100 rounded-md overflow-clip',
   },
-  providers: [ItemDetailService],
+  providers: [
+    {
+      provide: ItemDetailService,
+      useExisting: forwardRef(() => ItemDetailComponent),
+    },
+  ],
 })
-export class ItemDetailComponent implements OnChanges {
+export class ItemDetailComponent extends ItemDetailService implements OnChanges {
   @Input()
-  public set itemId(value: string) {
-    this.service.update(value)
-  }
-
-  public get entityId() {
-    return this.service.entityid$
-  }
-
-  public get entity() {
-    return this.service.entity$
+  public set entityId(value: string) {
+    this.entityId$.next(value)
   }
 
   @Input()
-  public set recipeId(value: string) {
-    this.service.updateFromRecipe(value)
-  }
-
-  public get recipe() {
-    return this.enableRecipe ? this.service.recipe$ : EMPTY
+  public set entity(value: ItemDefinitionMaster | Housingitems) {
+    this.entityId$.next(getItemId(value))
   }
 
   @Input()
-  public enableNwdbLink: boolean
-
-  @Input()
-  public enableMarker: boolean
-
-  @Input()
-  public enableTracker: boolean
-
-  @Input()
-  public enableRecipe: boolean
-
-  @Input()
-  public enableDescription: boolean
-
-  @Input()
-  public enablePerks: boolean
-
-  @Input()
-  public enableDroplist: boolean
-
-  @Input()
-  public enableInfo: boolean
-
-  protected get perks() {
-    if (!this.enablePerks) {
-      return EMPTY
-    }
-    return combineLatest({
-      perks: this.service.perks$,
-      buckets: this.service.perkBuckets$
-    }).pipe(map((it) => {
-      if (!it?.buckets?.length && !it?.perks?.length) {
-        return null
-      }
-      return it
-    }))
+  public set gearScoreOverride(value: number) {
+    this.gearScoreOverride$.next(value)
   }
 
-  protected get description() {
-    return this.enableDescription ? this.service.description$ : EMPTY
+  @Input()
+  public set perkOverride(value: PerkOverrideFn) {
+    this.perkOverride$.next(value)
   }
 
-  protected get salvageEvent() {
-    return this.enableInfo ? this.service.salvageEvent$ : EMPTY
+  public get isLoading$() {
+    return this.vm$.pipe(map((it) => it.loading))
   }
 
-  public droppedBy = defer(() => this.service.droppedByVitals$)
-
-  public constructor(private cdRef: ChangeDetectorRef, private service: ItemDetailService) {
-    //
+  public constructor(db: NwDbService, cdRef: ChangeDetectorRef) {
+    super(db, cdRef)
   }
 
-  public ngOnChanges(): void {
-    this.cdRef.detectChanges()
+  public ngOnChanges() {
+    this.cdRef.markForCheck()
   }
 }
diff --git a/apps/web/app/widgets/item-detail/item-detail.directive.ts b/apps/web/app/widgets/item-detail/item-detail.directive.ts
index 3390d3ec..e0928f17 100644
--- a/apps/web/app/widgets/item-detail/item-detail.directive.ts
+++ b/apps/web/app/widgets/item-detail/item-detail.directive.ts
@@ -1,19 +1,29 @@
-import { Directive, Input } from '@angular/core'
-import { Housingitems, ItemDefinitionMaster } from '@nw-data/types'
+import { ChangeDetectorRef, Directive, forwardRef, Input } from '@angular/core'
+import { NwDbService } from '~/nw'
 import { ItemDetailService } from './item-detail.service'
 
 @Directive({
+  standalone: true,
   selector: '[nwbItemDetail]',
-  providers: [ItemDetailService]
+  providers: [
+    {
+      provide: ItemDetailService,
+      useExisting: forwardRef(() => ItemDetailDirective),
+    },
+  ],
 })
-export class ItemDetailDirective {
+export class ItemDetailDirective extends ItemDetailService {
+  @Input()
+  public set nwbItemDetail(value: string) {
+    this.entityId$.next(value)
+  }
 
   @Input()
-  public set nwbItemDetail(value: string | ItemDefinitionMaster | Housingitems) {
-    this.service.update(value)
+  public set gearScoreOverride(value: number) {
+    this.gearScoreOverride$.next(value)
   }
 
-  public constructor(private service: ItemDetailService) {
-    //
+  public constructor(db: NwDbService, cdRef: ChangeDetectorRef) {
+    super(db, cdRef)
   }
 }
diff --git a/apps/web/app/widgets/item-detail/item-detail.module.ts b/apps/web/app/widgets/item-detail/item-detail.module.ts
index 0587eece..7bad5f17 100644
--- a/apps/web/app/widgets/item-detail/item-detail.module.ts
+++ b/apps/web/app/widgets/item-detail/item-detail.module.ts
@@ -1,32 +1,25 @@
-import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
-import { AgGridModule } from '~/ui/ag-grid'
-import { NwModule } from '~/nw'
-import { ItemDetailComponent } from './item-detail.component'
+import { ItemCardComponent } from './item-card.component'
+import { ItemDetailDescriptionComponent } from './item-detail-description.component'
+import { ItemDetailDivider } from './item-detail-divider.component'
 import { ItemDetailHeaderComponent } from './item-detail-header.component'
-import { CraftingCalculatorModule } from '../crafting-calculator'
-import { ItemDetailPerksComponent } from './item-detail-perks.component'
-import { ItemTrackerModule } from '../item-tracker'
-import { AffixStatComponent } from './affix-stat.component'
-import { ItemDetailDirective } from './item-detail.directive'
-import { ItemDetailSalvageComponent } from './item-detail-salvage.component'
-import { GameEventComponent } from '../game-event'
 import { ItemDetailInfoComponent } from './item-detail-info.component'
+import { ItemDetailPerksComponent } from './item-detail-perks.component'
+import { ItemDetailStatsComponent } from './item-detail-stats.component'
+import { ItemDetailComponent } from './item-detail.component'
 
 const COMPONENTS = [
+  ItemCardComponent,
   ItemDetailComponent,
+  ItemDetailDescriptionComponent,
   ItemDetailHeaderComponent,
   ItemDetailPerksComponent,
-  AffixStatComponent,
-  ItemDetailDirective,
-  ItemDetailSalvageComponent,
-  ItemDetailInfoComponent
+  ItemDetailStatsComponent,
+  ItemDetailInfoComponent,
+  ItemDetailDivider,
 ]
 @NgModule({
-  imports: [CommonModule, AgGridModule, NwModule, CraftingCalculatorModule, ItemTrackerModule, GameEventComponent],
-  declarations: [...COMPONENTS],
+  imports: [...COMPONENTS],
   exports: [...COMPONENTS],
 })
-export class ItemDetailModule {
-  //
-}
+export class ItemDetailModule {}
diff --git a/apps/web/app/widgets/item-detail/item-detail.service.ts b/apps/web/app/widgets/item-detail/item-detail.service.ts
index a8f8abb1..07166845 100644
--- a/apps/web/app/widgets/item-detail/item-detail.service.ts
+++ b/apps/web/app/widgets/item-detail/item-detail.service.ts
@@ -1,127 +1,236 @@
-import { Crafting, Housingitems, ItemDefinitionMaster } from '@nw-data/types'
-import { BehaviorSubject, combineLatest, defer, map, NEVER, of, switchMap, take } from 'rxjs'
-import { NwDbService, NwVitalsService } from '~/nw'
+import { ChangeDetectorRef, Injectable } from '@angular/core'
+import { Affixstats, ItemDefinitionMaster, Perkbuckets, Perks, Craftingcategories } from '@nw-data/types'
+import { BehaviorSubject, combineLatest, defer, map, Observable, of, ReplaySubject, switchMap } from 'rxjs'
+import { NwDbService } from '~/nw'
 import {
-  getItemId,
-  getItemIdFromRecipe,
-  getItemPerkBucket,
-  getItemPerks,
+  getItemGearScoreLabel,
+  getItemIconPath,
+  getItemMaxGearScore,
+  getItemMinGearScore,
+  getItemPerkBucketKeys,
+  getItemPerkKeys,
+  getItemRarity,
+  getItemRarityName,
+  getItemTypeName,
+  getPerksInherentMODs,
   getPerkbucketPerks,
-  getRecipeForItem,
-  isItemWeapon,
-  isMasterItem,
+  hasPerkInherentAffix,
+  getItemTierAsRoman,
 } from '~/nw/utils'
-import { shareReplayRefCount } from '~/utils'
+import { deferStateFlat, humanize, shareReplayRefCount } from '~/utils'
 
-import { Injectable } from '@angular/core'
+function isTruthy(value: any) {
+  return !!value
+}
+function isFalsy(value: any) {
+  return !value
+}
+export type PerkOverrideFn = (item: ItemDefinitionMaster, key: string) => Observable<Perks>
+
+export interface PerkDetail {
+  item: ItemDefinitionMaster
+  key: string
+  editable?: boolean
+  bucket?: Perkbuckets
+  perk?: Perks
+  override?: Perks
+  icon?: string
+  text?: Array<{ label: string; description: string }>
+}
 
 @Injectable()
 export class ItemDetailService {
-  public readonly entity$ = defer(() => this.idOrEntity$)
-    .pipe(
-      switchMap((it) => {
-        if (typeof it !== 'string') {
-          return of(it)
-        }
-        return combineLatest({
-          items: this.db.itemsMap,
-          housings: this.db.housingItemsMap,
-        }).pipe(
-          map(({ items, housings }) => {
-            return items.get(it) || housings.get(it)
-          })
-        )
-      })
-    )
+  public readonly item$ = defer(() => this.db.item(this.entityId$)).pipe(shareReplayRefCount(1))
+  public readonly itemGS$ = defer(() => combineLatest([this.item$, this.gearScoreOverride$]))
+    .pipe(map(([item, gs]) => gs || getItemMaxGearScore(item)))
     .pipe(shareReplayRefCount(1))
-
-  public readonly recipe$ = defer(() => this.idOrRecipe$).pipe(
-    switchMap((it) => {
-      if (typeof it !== 'string') {
-        return of(it)
-      }
-      return this.db.recipesMap.pipe(map((recipes) => recipes.get(it)))
-    })
-  )
-
-  public readonly entityid$ = defer(() => this.entity$)
-    .pipe(map((it) => getItemId(it)))
+  public readonly itemGSLabel$ = defer(() => combineLatest([this.item$, this.gearScoreOverride$]))
+    .pipe(map(([item, gs]) => gs || getItemGearScoreLabel(item)))
     .pipe(shareReplayRefCount(1))
-
-  public readonly item$ = defer(() => this.entity$)
-    .pipe(map((it) => (isMasterItem(it) ? it : null)))
+  public readonly itemGSMin$ = defer(() => combineLatest([this.item$, this.gearScoreOverride$]))
+    .pipe(map(([item, gs]) => gs || getItemMinGearScore(item)))
     .pipe(shareReplayRefCount(1))
 
-  public readonly housingItem$ = defer(() => this.entity$)
-    .pipe(map((it) => (!isMasterItem(it) ? it : null)))
+  public readonly housingItem$ = defer(() => this.db.housingItem(this.entityId$)).pipe(shareReplayRefCount(1))
+  public readonly entity$ = defer(() => combineLatest([this.item$, this.housingItem$]))
+    .pipe(map(([item, housing]) => item || housing))
     .pipe(shareReplayRefCount(1))
 
-  public readonly salvageEvent$ = defer(() => this.entity$)
-    .pipe(map((it) => it.SalvageGameEventID))
-    .pipe(switchMap((id) => this.db.gameEvent(id)))
-    .pipe(shareReplayRefCount(1))
-
-  public readonly weapon$ = defer(() => this.item$)
-    .pipe(switchMap((it) => (!isItemWeapon(it) ? NEVER : this.db.weaponsMap)))
-    .pipe(shareReplayRefCount(1))
-
-  public readonly perks$ = defer(() =>
+  public readonly itemStatsRef$ = this.item$.pipe(map((it) => it?.ItemStatsRef))
+  public readonly entityId$ = new ReplaySubject<string>(1)
+  public readonly name$ = this.entity$.pipe(map((it) => it?.Name))
+  public readonly source$ = this.entity$.pipe(map((it) => it?.['$source']))
+  public readonly description$ = this.entity$.pipe(map((it) => it?.Description))
+  public readonly icon$ = this.entity$.pipe(map((it) => getItemIconPath(it)))
+  public readonly rarity$ = this.entity$.pipe(map((it) => getItemRarity(it)))
+  public readonly rarityName$ = this.rarity$.pipe(map(getItemRarityName))
+  public readonly typeName$ = this.entity$.pipe(map(getItemTypeName))
+  public readonly tierLabel$ = this.entity$.pipe(map((it) => getItemTierAsRoman(it?.Tier, true)))
+
+  public readonly weaponStats$ = this.db.weapon(this.itemStatsRef$)
+  public readonly armorStats$ = this.db.armor(this.itemStatsRef$)
+  public readonly ingredientCategories$ = combineLatest({
+    categories: this.db.recipeCategoriesMap,
+    item: this.item$,
+  }).pipe(map(({ categories, item }) => item.IngredientCategories?.map((it) => categories.get(it))))
+
+  public readonly gearScoreOverride$ = new BehaviorSubject<number>(null)
+  public readonly perkOverride$ = new BehaviorSubject<PerkOverrideFn>(null)
+
+  public readonly perksDetails$ = defer(() => this.resolvePerkInfos()).pipe(shareReplayRefCount(1))
+  public readonly finalRarity$ = defer(() => this.resolveFinalRarity())
+  public readonly finalRarityName$ = this.finalRarity$.pipe(map(getItemRarityName))
+
+  public readonly vm$ = deferStateFlat(() =>
     combineLatest({
       item: this.item$,
-      perks: this.db.perksMap,
-      buckets: this.db.perkBucketsMap,
+      housingItem: this.housingItem$,
+      entity: this.entity$,
+      entityId: this.entityId$,
+      name: this.name$,
+      sourceLabel: this.source$.pipe(map((it) => humanize(it))),
+      isDeprecated: this.source$.pipe(map((it) => /depricated/i.test(it|| ''))),
+      description: this.description$,
+      icon: this.icon$,
+      rarity: this.finalRarity$,
+      rarityName: this.finalRarityName$,
+      typeName: this.typeName$,
+      hasDescription: this.description$.pipe(map(isTruthy)),
+      hasStats: this.itemStatsRef$.pipe(map(isTruthy)),
+      hasPerks: combineLatest({
+        item: this.item$,
+        buckets: this.db.perkBucketsMap,
+      }).pipe(map(({ item, buckets }) => item && (item.CanHavePerks || buckets.get(item.ItemID)))),
     })
-  )
-    .pipe(
-      map(({ item, perks, buckets }) => {
-        if (item?.IngredientCategories?.includes('PerkItem')) {
-          return getPerkbucketPerks(buckets.get(item.ItemID), perks)
+  ).pipe(shareReplayRefCount(1))
+
+  public constructor(protected db: NwDbService, protected cdRef: ChangeDetectorRef) {
+    //
+  }
+
+  public update(entityId: string) {
+    this.entityId$.next(entityId)
+  }
+
+  private resolveFinalRarity() {
+    return this.perkOverride$.pipe(
+      switchMap((it) => {
+        if (!it) {
+          return this.rarity$
         }
-        return item && getItemPerks(item, perks)
+        return combineLatest({
+          item: this.item$,
+          gs: this.itemGS$,
+          perks: this.perksDetails$,
+        }).pipe(
+          map(({ item, gs, perks }) => {
+            const perkIds = perks
+              .map((it) => it.perk)
+              .filter((it) => !!it)
+              .map((it) => it.PerkID)
+            return getItemRarity(item, perkIds)
+          })
+        )
       })
     )
-    .pipe(shareReplayRefCount(1))
-
-  public readonly perkBuckets$ = defer(() =>
-    combineLatest({
+  }
+  private resolvePerkInfos() {
+    const perks$ = combineLatest({
       item: this.item$,
-      perks: this.db.perkBucketsMap,
-    })
-  )
-    .pipe(map(({ item, perks }) => item && getItemPerkBucket(item, perks)))
-    .pipe(shareReplayRefCount(1))
-
-  public description$ = defer(() => this.entity$).pipe(map((it) => it?.Description))
-
-  public droppedByVitals$ = defer(() => this.entityid$).pipe(
-    switchMap((id) => {
-      return this.vitals.vitalsThatCanDrop(id ? [id] : [])
+      perks: this.db.perksMap,
+      buckets: this.db.perkBucketsMap,
     })
-  )
-
-  private idOrEntity$ = new BehaviorSubject<string | ItemDefinitionMaster | Housingitems>(null)
-  private idOrRecipe$ = new BehaviorSubject<string | Crafting>(null)
-
-  public constructor(private db: NwDbService, private vitals: NwVitalsService) {
-    //
-  }
-
-  public update(idOrEntity: string | ItemDefinitionMaster | Housingitems) {
-    this.idOrEntity$.next(idOrEntity)
-    combineLatest({
+      .pipe(
+        map(({ item, perks, buckets }): PerkDetail[] => {
+          const result = getItemPerkKeys(item).map((key) => {
+            const perkId = item[key]
+            const perk = perks.get(perkId)
+            return {
+              item: item,
+              key: key,
+              perk: perk,
+              editable: item.CanReplaceGem && perk?.PerkType === 'Gem',
+            }
+          })
+          const bucket = buckets.get(item?.ItemID)
+          if (bucket) {
+            getPerkbucketPerks(bucket, perks)?.forEach((perk, i) => {
+              result.push({
+                item: item,
+                editable: false,
+                perk: perk,
+                key: `${bucket.PerkBucketID}-${i}`,
+              })
+            })
+          }
+          return result
+        })
+      )
+      .pipe(switchMap((it) => this.remapPerks(it)))
+
+    const buckets$ = combineLatest({
       item: this.item$,
-      recipes: this.db.recipes,
+      buckets: this.db.perkBucketsMap,
     })
-      .pipe(take(1))
-      .subscribe(({ item, recipes }) => {
-        getRecipeForItem(item, recipes)
+      .pipe(
+        map(({ item, buckets }): PerkDetail[] => {
+          const result = getItemPerkBucketKeys(item).map((key) => ({
+            item: item,
+            key: key,
+            bucket: buckets.get(item[key]),
+            editable: true,
+          }))
+          return result
+        })
+      )
+      .pipe(switchMap((it) => this.remapPerks(it)))
+
+    return combineLatest({
+      infos: combineLatest([perks$, buckets$]).pipe(map(([a, b]) => [...a, ...b])),
+      affix: this.db.affixstatsMap,
+      gearScore: this.itemGS$,
+    }).pipe(
+      map(({ infos, affix, gearScore }) => {
+        for (const detail of infos) {
+          const perk = detail.perk
+          detail.text = []
+          detail.icon = perk?.IconPath
+          if (hasPerkInherentAffix(perk)) {
+            getPerksInherentMODs(perk, affix.get(perk.Affix), gearScore)?.forEach((mod) => {
+              detail.text.push({
+                label: String(mod.value),
+                description: mod.label,
+              })
+            })
+          } else if (perk) {
+            detail.text.push({
+              label: perk.AppliedPrefix || perk.DisplayName || perk.AppliedSuffix,
+              description: perk.Description,
+            })
+          }
+        }
+        return infos
       })
+    )
   }
 
-  public updateFromRecipe(idOrRecipe: string | Crafting) {
-    this.idOrRecipe$.next(idOrRecipe)
-    this.recipe$.pipe(take(1)).subscribe((it) => {
-      this.idOrEntity$.next(getItemIdFromRecipe(it))
-    })
+  private remapPerks(details: PerkDetail[]): Observable<PerkDetail[]> {
+    if (!details?.length) {
+      return of([])
+    }
+    return this.perkOverride$.pipe(
+      switchMap((fn) => combineLatest(details.map((detail) => this.remapPerk(detail, fn))))
+    )
+  }
+
+  private remapPerk(detail: PerkDetail, override: PerkOverrideFn) {
+    return !override
+      ? of(detail)
+      : override(detail.item, detail.key).pipe(
+          map((it) => ({
+            ...detail,
+            perk: it || detail.perk,
+          }))
+        )
   }
 }
diff --git a/apps/web/app/widgets/loot/loot-table.component.html b/apps/web/app/widgets/loot/loot-table.component.html
index ab9c16de..a40fb938 100644
--- a/apps/web/app/widgets/loot/loot-table.component.html
+++ b/apps/web/app/widgets/loot/loot-table.component.html
@@ -3,7 +3,7 @@
   class="flex-1 rounded-md overflow-clip"
   [quickFilter]="search.query | async"
 >
-<div class="table-header bg-base-300 px-4 py-2 flex flex-row items-center gap-4">
+<div class="table-header bg-base-300 px-4 py-2 flex flex-row items-center layout-gap">
   <span class="whitespace-nowrap">Loot ({{ (entities | async)?.length || 0 }})</span>
   <span class="flex-1"></span>
   <nwb-quicksearch-input class="max-w-xs"></nwb-quicksearch-input>
diff --git a/apps/web/app/widgets/perk-detail/index.ts b/apps/web/app/widgets/perk-detail/index.ts
new file mode 100644
index 00000000..66a7303d
--- /dev/null
+++ b/apps/web/app/widgets/perk-detail/index.ts
@@ -0,0 +1 @@
+export * from './perk-detail.module'
diff --git a/apps/web/app/widgets/perk-detail/perk-detail.component.html b/apps/web/app/widgets/perk-detail/perk-detail.component.html
new file mode 100644
index 00000000..6dbc7430
--- /dev/null
+++ b/apps/web/app/widgets/perk-detail/perk-detail.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/apps/web/app/widgets/perk-detail/perk-detail.component.ts b/apps/web/app/widgets/perk-detail/perk-detail.component.ts
new file mode 100644
index 00000000..e62f7abe
--- /dev/null
+++ b/apps/web/app/widgets/perk-detail/perk-detail.component.ts
@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, forwardRef, Input } from '@angular/core'
+import { NwDbService, NwModule } from '~/nw'
+import { PerkDetailService } from './perk-detail.service'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-perk-detail',
+  templateUrl: './perk-detail.component.html',
+  exportAs: 'perkDetail',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule],
+  providers: [
+    {
+      provide: PerkDetailService,
+      useExisting: forwardRef(() => PerkDetailComponent),
+    },
+  ],
+  host: {
+    class: 'block bg-base-100 rounded-md overflow-clip',
+  },
+})
+export class PerkDetailComponent extends PerkDetailService {
+  @Input()
+  public set perkId(value: string) {
+    this.perkId$.next(value)
+  }
+
+  public constructor(db: NwDbService) {
+    super(db)
+  }
+}
diff --git a/apps/web/app/widgets/perk-detail/perk-detail.directive.ts b/apps/web/app/widgets/perk-detail/perk-detail.directive.ts
new file mode 100644
index 00000000..046f7f91
--- /dev/null
+++ b/apps/web/app/widgets/perk-detail/perk-detail.directive.ts
@@ -0,0 +1,25 @@
+import { Directive, forwardRef, Input } from '@angular/core'
+import { NwDbService } from '~/nw'
+import { PerkDetailService } from './perk-detail.service'
+
+@Directive({
+  standalone: true,
+  selector: '[nwbPerkDetail]',
+  exportAs: 'perkDetail',
+  providers: [
+    {
+      provide: PerkDetailService,
+      useExisting: forwardRef(() => PerkDetailDirective),
+    },
+  ],
+})
+export class PerkDetailDirective extends PerkDetailService {
+  @Input('nwbPerkDetail')
+  public set perkId(value: string) {
+    this.perkId$.next(value)
+  }
+
+  public constructor(db: NwDbService) {
+    super(db)
+  }
+}
diff --git a/apps/web/app/widgets/perk-detail/perk-detail.module.ts b/apps/web/app/widgets/perk-detail/perk-detail.module.ts
new file mode 100644
index 00000000..0238f3a7
--- /dev/null
+++ b/apps/web/app/widgets/perk-detail/perk-detail.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core'
+import { PerkDetailComponent } from './perk-detail.component'
+import { PerkDetailDirective } from './perk-detail.directive'
+
+const components = [PerkDetailComponent, PerkDetailDirective]
+@NgModule({
+  imports: [...components],
+  exports: [...components],
+})
+export class PerkDetailModule {
+  //
+}
diff --git a/apps/web/app/widgets/perk-detail/perk-detail.service.ts b/apps/web/app/widgets/perk-detail/perk-detail.service.ts
new file mode 100644
index 00000000..602c1e21
--- /dev/null
+++ b/apps/web/app/widgets/perk-detail/perk-detail.service.ts
@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core'
+import { Perks } from '@nw-data/types'
+import { combineLatest, map, ReplaySubject, switchMap } from 'rxjs'
+import { NwDbService } from '~/nw'
+import { stripAbilityProperties, stripAffixProperties } from '~/nw/utils'
+import { shareReplayRefCount } from '~/utils'
+
+@Injectable()
+export class PerkDetailService {
+  public readonly perkId$ = new ReplaySubject<string>(1)
+  public readonly perk$ = this.db.perk(this.perkId$).pipe(shareReplayRefCount(1))
+
+  public readonly icon$ = this.perk$.pipe(map((it) => it?.IconPath))
+  public readonly name$ = this.perk$.pipe(map((it) => it?.DisplayName))
+  public readonly description$ = this.perk$.pipe(map((it) => it?.Description))
+  public readonly properties$ = this.perk$.pipe(map((it) => this.getProperties(it))).pipe(shareReplayRefCount(1))
+  public readonly affix$ = this.perk$
+    .pipe(switchMap((it) => this.db.affixstat(it.Affix)))
+    .pipe(map((it) => (it ? stripAffixProperties(it) : null)))
+  public readonly abilities$ = combineLatest({
+    perk: this.perk$,
+    abilities: this.db.abilitiesMap,
+  }).pipe(
+    map(({ perk, abilities }) => {
+      return perk.EquipAbility?.map((id) => abilities.get(id))
+        .map((it) => (it ? stripAbilityProperties(it) : null))
+        .filter((it) => !!it)
+    })
+  )
+
+  public constructor(private db: NwDbService) {
+    //
+  }
+
+  public update(entityId: string) {
+    this.perkId$.next(entityId)
+  }
+
+  public getProperties(ability: Perks, exclude?: Array<keyof Perks | '$source'>) {
+    if (!ability) {
+      return []
+    }
+    exclude = exclude || ['$source', 'PerkID', 'IconPath', 'DisplayName', 'Description']
+    return Object.entries(ability)
+      .filter(([key, value]) => !!value && !exclude.includes(key as any))
+      .map(([key, value]) => ({
+        key,
+        value,
+        valueType: typeof value,
+      }))
+  }
+}
diff --git a/apps/web/app/widgets/screenshot/index.ts b/apps/web/app/widgets/screenshot/index.ts
new file mode 100644
index 00000000..cc29bed4
--- /dev/null
+++ b/apps/web/app/widgets/screenshot/index.ts
@@ -0,0 +1,4 @@
+export * from './screenshot.module'
+export * from './screenshot.service'
+export * from './screenshot-button.component'
+export * from './screenshot-frame.directive'
diff --git a/apps/web/app/widgets/screenshot/screenshot-button.component.html b/apps/web/app/widgets/screenshot/screenshot-button.component.html
new file mode 100644
index 00000000..5ebf8b54
--- /dev/null
+++ b/apps/web/app/widgets/screenshot/screenshot-button.component.html
@@ -0,0 +1,37 @@
+<span class="swap swap-rotate" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+  <input type="checkbox" [ngModel]="isBusy" />
+  <svg viewBox="0 0 512 512" class="swap-off w-4 h-4" >
+    <path
+      fill="currentColor"
+      d="M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 384c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"
+    />
+  </svg>
+  <svg viewBox="0 0 512 512" class="swap-on w-4 h-4 text-primary" [class.animate-spin]="isBusy" >
+    <path
+      fill="currentColor"
+      d="M222.7 32.1c5 16.9-4.6 34.8-21.5 39.8C121.8 95.6 64 169.1 64 256c0 106 86 192 192 192s192-86 192-192c0-86.9-57.8-160.4-137.1-184.1c-16.9-5-26.6-22.9-21.5-39.8s22.9-26.6 39.8-21.5C434.9 42.1 512 140 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 140 77.1 42.1 182.9 10.6c16.9-5 34.8 4.6 39.8 21.5z"
+    />
+  </svg>
+</span>
+
+<ng-template
+  cdkConnectedOverlay
+  [cdkConnectedOverlayOrigin]="origin"
+  [cdkConnectedOverlayOpen]="isOverlayOpen"
+  [cdkConnectedOverlayHasBackdrop]="true"
+  (backdropClick)="isOverlayOpen = false"
+  (detach)="isOverlayOpen = false"
+>
+  <ul class="menu menu-compact bg-base-100 w-56 p-2 rounded-box">
+    <li *ngFor="let frame of frames">
+      <a (click)="makeScreenshot(frame)">{{ frame.description }}</a>
+    </li>
+  </ul>
+</ng-template>
+<ng-template #saveDialog>
+  <div class="rounded-lg bg-base-100 relative w-full p-5">
+    <h3 class="text-2xl font-bold mb-4">Screenshot ready</h3>
+    <button class="btn w-full mb-2" (click)="dialogRef.close('clipboard')">Save to clipboard</button>
+    <button class="btn w-full" (click)="dialogRef.close('download')">Download File</button>
+  </div>
+</ng-template>
diff --git a/apps/web/app/widgets/screenshot/screenshot-button.component.ts b/apps/web/app/widgets/screenshot/screenshot-button.component.ts
new file mode 100644
index 00000000..bf179009
--- /dev/null
+++ b/apps/web/app/widgets/screenshot/screenshot-button.component.ts
@@ -0,0 +1,86 @@
+import { Dialog, DialogModule, DialogRef } from '@angular/cdk/dialog'
+import { CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay'
+import { CommonModule } from '@angular/common'
+import { ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, TemplateRef, ViewChild } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { ScreenshotFrame, ScreenshotService } from './screenshot.service'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-screenshot-button,[nwbScreenshotBtn]',
+  templateUrl: './screenshot-button.component.html',
+  imports: [CommonModule, FormsModule, OverlayModule, DialogModule],
+  host: {
+    class: 'tooltip tooltip-info tooltip-left"',
+    '[attr.data-tip]': '"Grab Screenshot"',
+  }
+})
+export class ScreenshotButtonComponent {
+  @HostBinding('class.disabled')
+  @HostBinding('class.opacity-25')
+  @HostBinding('attr.disabled')
+  public get disabled() {
+    return (this.isBusy || !this.frames.length) ? true : null
+  }
+
+  protected get frames() {
+    return this.service.frames
+  }
+
+  protected isOverlayOpen = false
+  protected isBusy = false
+  protected dialogRef: DialogRef<'download' | 'clipboard'>
+  @ViewChild('saveDialog')
+  protected saveDialog: TemplateRef<any>
+
+  public constructor(
+    private service: ScreenshotService,
+    private dialog: Dialog,
+    private cdRef: ChangeDetectorRef
+  ) {
+    //
+  }
+
+  @HostListener('click', ['$event'])
+  protected async clicked(e: MouseEvent) {
+    if (this.disabled) {
+      return
+    }
+    if (this.frames.length > 1) {
+      this.isOverlayOpen = !this.isOverlayOpen
+      return
+    }
+    this.makeScreenshot(this.frames[0])
+  }
+
+  protected async makeScreenshot(frame: ScreenshotFrame) {
+    this.isBusy = true
+    await this.grabScreenshot(frame).catch(console.error)
+    this.isBusy = false
+    this.cdRef.markForCheck()
+  }
+
+
+  protected async grabScreenshot(frame: ScreenshotFrame) {
+    this.isOverlayOpen = false
+    if (!frame) {
+      return
+    }
+    const blob = await this.service.makeScreenshot(frame)
+    if (!blob) {
+      return
+    }
+    this.dialog.closeAll()
+    this.dialogRef = this.dialog.open(this.saveDialog, {
+      minWidth: '300px',
+    })
+    this.dialogRef.closed.subscribe((value) => {
+      if (value === 'download') {
+        this.service.saveBlobToFile(blob, frame.description)
+      }
+      if (value === 'clipboard') {
+        this.service.saveBlobToClipoard(blob)
+      }
+    })
+  }
+}
diff --git a/apps/web/app/widgets/screenshot/screenshot-frame.directive.ts b/apps/web/app/widgets/screenshot/screenshot-frame.directive.ts
new file mode 100644
index 00000000..0b7a3c62
--- /dev/null
+++ b/apps/web/app/widgets/screenshot/screenshot-frame.directive.ts
@@ -0,0 +1,27 @@
+import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core'
+import { ScreenshotFrame, ScreenshotService } from './screenshot.service'
+
+@Directive({
+  standalone: true,
+  selector: '[nwbScreenshotFrame]',
+})
+export class ScreenshotFrameDirective implements ScreenshotFrame, OnInit, OnDestroy {
+  @Input()
+  public nwbScreenshotFrame: string
+
+  public get description() {
+    return this.nwbScreenshotFrame
+  }
+
+  public constructor(private service: ScreenshotService, public readonly elementRef: ElementRef<HTMLElement>) {
+    //
+  }
+
+  public ngOnInit(): void {
+    this.service.register(this)
+  }
+
+  public ngOnDestroy(): void {
+    this.service.unregister(this)
+  }
+}
diff --git a/apps/web/app/widgets/screenshot/screenshot.module.ts b/apps/web/app/widgets/screenshot/screenshot.module.ts
new file mode 100644
index 00000000..1d3b4e6a
--- /dev/null
+++ b/apps/web/app/widgets/screenshot/screenshot.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core'
+import { ScreenshotButtonComponent } from './screenshot-button.component'
+import { ScreenshotFrameDirective } from './screenshot-frame.directive'
+
+@NgModule({
+  imports: [ScreenshotFrameDirective, ScreenshotButtonComponent],
+  exports: [ScreenshotFrameDirective, ScreenshotButtonComponent],
+})
+export class ScreenshotModule {
+  //
+}
diff --git a/apps/web/app/widgets/screenshot/screenshot.service.ts b/apps/web/app/widgets/screenshot/screenshot.service.ts
new file mode 100644
index 00000000..59c6fe38
--- /dev/null
+++ b/apps/web/app/widgets/screenshot/screenshot.service.ts
@@ -0,0 +1,67 @@
+import { ElementRef, Injectable } from '@angular/core'
+import { saveAs } from 'file-saver'
+import { toBlob } from 'html-to-image'
+import { BehaviorSubject, defer, map } from 'rxjs'
+
+export interface ScreenshotFrame {
+  elementRef: ElementRef<HTMLElement>
+  description: string
+}
+
+@Injectable({ providedIn: 'root' })
+export class ScreenshotService {
+
+  public get frames() {
+    return this.frames$.value || []
+  }
+  private set frames(value: ScreenshotFrame[]) {
+    this.frames$.next(value)
+  }
+
+  private frames$ = new BehaviorSubject<ScreenshotFrame[]>([])
+
+  public register(frame: ScreenshotFrame) {
+    if (this.frames.includes(frame)) {
+      return
+    }
+    this.frames = [...this.frames, frame]
+  }
+
+  public unregister(frame: ScreenshotFrame) {
+    const frames = this.frames || []
+    const index = frames.indexOf(frame)
+    if (index < 0) {
+      return
+    }
+    frames.splice(index, 1)
+    this.frames$.next([...frames])
+  }
+
+  public async makeScreenshot(frame: ScreenshotFrame): Promise<Blob> {
+    const el = frame.elementRef.nativeElement
+    const lazyElements = el.querySelectorAll('[loading=lazy]')
+    lazyElements.forEach((it) => {
+      it.setAttribute('loading', 'eager')
+      it.classList.add('show')
+    })
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    const result = await toBlob(frame.elementRef.nativeElement)
+    lazyElements.forEach((it) => {
+      it.setAttribute('loading', 'lazy')
+    })
+    await new Promise((resolve) => setTimeout(resolve))
+    return result
+  }
+
+  public saveBlobToClipoard(blob: Blob) {
+    navigator.clipboard.write([
+      new ClipboardItem({
+        'image/png': blob,
+      }),
+    ])
+  }
+
+  public saveBlobToFile(blob: Blob, filename: string = 'Screenshot') {
+    saveAs(blob, `${filename}.png`)
+  }
+}
diff --git a/apps/web/app/widgets/status-effect-detail/index.ts b/apps/web/app/widgets/status-effect-detail/index.ts
new file mode 100644
index 00000000..976fca6e
--- /dev/null
+++ b/apps/web/app/widgets/status-effect-detail/index.ts
@@ -0,0 +1 @@
+export * from './status-effect-detail.module'
diff --git a/apps/web/app/widgets/status-effect-detail/status-effect-detail.module.ts b/apps/web/app/widgets/status-effect-detail/status-effect-detail.module.ts
new file mode 100644
index 00000000..cf35d183
--- /dev/null
+++ b/apps/web/app/widgets/status-effect-detail/status-effect-detail.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core'
+import { StatusEffectDetailComponent } from './status-effect.component'
+import { StatusEffectDetailDirective } from './status-effect.directive'
+
+const components = [StatusEffectDetailComponent, StatusEffectDetailDirective]
+@NgModule({
+  imports: [...components],
+  exports: [...components],
+})
+export class StatusEffectDetailModule {
+  //
+}
diff --git a/apps/web/app/widgets/status-effect-detail/status-effect.component.html b/apps/web/app/widgets/status-effect-detail/status-effect.component.html
new file mode 100644
index 00000000..6dbc7430
--- /dev/null
+++ b/apps/web/app/widgets/status-effect-detail/status-effect.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/apps/web/app/widgets/status-effect-detail/status-effect.component.ts b/apps/web/app/widgets/status-effect-detail/status-effect.component.ts
new file mode 100644
index 00000000..40ad5efe
--- /dev/null
+++ b/apps/web/app/widgets/status-effect-detail/status-effect.component.ts
@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, forwardRef, Input } from '@angular/core'
+import { NwDbService, NwModule } from '~/nw'
+import { StatusEffectDetailService } from './status-effect.service'
+
+@Component({
+  standalone: true,
+  selector: 'nwb-status-effect-detail',
+  templateUrl: './status-effect.component.html',
+  exportAs: 'detail',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, NwModule],
+  providers: [
+    {
+      provide: StatusEffectDetailService,
+      useExisting: forwardRef(() => StatusEffectDetailComponent),
+    },
+  ],
+  host: {
+    class: 'block bg-base-100 rounded-md overflow-clip',
+  },
+})
+export class StatusEffectDetailComponent extends StatusEffectDetailService {
+  @Input()
+  public set abilityId(value: string) {
+    this.effectId$.next(value)
+  }
+
+  public constructor(db: NwDbService) {
+    super(db)
+  }
+}
diff --git a/apps/web/app/widgets/status-effect-detail/status-effect.directive.ts b/apps/web/app/widgets/status-effect-detail/status-effect.directive.ts
new file mode 100644
index 00000000..6b0a7a63
--- /dev/null
+++ b/apps/web/app/widgets/status-effect-detail/status-effect.directive.ts
@@ -0,0 +1,25 @@
+import { Directive, forwardRef, Input } from '@angular/core'
+import { NwDbService } from '~/nw'
+import { StatusEffectDetailService } from './status-effect.service'
+
+@Directive({
+  standalone: true,
+  selector: '[nwbStatusEffectDetail]',
+  exportAs: 'effectDetail',
+  providers: [
+    {
+      provide: StatusEffectDetailService,
+      useExisting: forwardRef(() => StatusEffectDetailDirective),
+    },
+  ],
+})
+export class StatusEffectDetailDirective extends StatusEffectDetailService {
+  @Input('nwbStatusEffectDetail')
+  public set abilityId(value: string) {
+    this.effectId$.next(value)
+  }
+
+  public constructor(db: NwDbService) {
+    super(db)
+  }
+}
diff --git a/apps/web/app/widgets/status-effect-detail/status-effect.service.ts b/apps/web/app/widgets/status-effect-detail/status-effect.service.ts
new file mode 100644
index 00000000..69d54f97
--- /dev/null
+++ b/apps/web/app/widgets/status-effect-detail/status-effect.service.ts
@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core'
+import { Statuseffect } from '@nw-data/types'
+import { combineLatest, map, ReplaySubject } from 'rxjs'
+import { NwDbService } from '~/nw'
+import { shareReplayRefCount } from '~/utils'
+
+@Injectable()
+export class StatusEffectDetailService {
+  public readonly effectId$ = new ReplaySubject<string>(1)
+  public readonly effect$ = combineLatest({
+    id: this.effectId$,
+    statusEffects: this.db.statusEffectsMap,
+  })
+    .pipe(map(({ id, statusEffects }) => statusEffects.get(id)))
+    .pipe(shareReplayRefCount(1))
+
+  public readonly icon$ = this.effect$.pipe(map((it) => it?.PlaceholderIcon))
+  public readonly name$ = this.effect$.pipe(map((it) => it?.DisplayName))
+  public readonly description$ = this.effect$.pipe(map((it) => it?.Description))
+  public readonly properties$ = this.effect$.pipe(map((it) => this.getProperties(it))).pipe(shareReplayRefCount(1))
+
+  public constructor(private db: NwDbService) {
+    //
+  }
+
+  public update(entityId: string) {
+    this.effectId$.next(entityId)
+  }
+
+  public getProperties(item: Statuseffect, exclude?: Array<keyof Statuseffect | '$source'>) {
+    if (!item) {
+      return []
+    }
+    exclude = exclude || ['$source', 'StatusID', 'PlaceholderIcon', 'DisplayName', 'Description']
+    return Object.entries(item)
+      .filter(([key, value]) => !!value && !exclude.includes(key as any))
+      .map(([key, value]) => ({
+        key,
+        value,
+        valueType: typeof value,
+      }))
+  }
+}
diff --git a/apps/web/app/widgets/territory/territory-card.component.html b/apps/web/app/widgets/territory/territory-card.component.html
index 37c84f6e..caaa9934 100644
--- a/apps/web/app/widgets/territory/territory-card.component.html
+++ b/apps/web/app/widgets/territory/territory-card.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngIf="vm$ | async; let vm">
   <figure class="mb-[-150px] relative">
     <img [nwImage]="vm.background" class="z-10 w-full" width="540" height="260" />
-    <div class="absolute top-0 left-0 right-0 bottom-0 from-transparent to-base-300 bg-gradient-to-b z-20"></div>
+    <div class="absolute top-0 left-0 right-0 bottom-0 from-transparent to-base-200 bg-gradient-to-b z-20"></div>
   </figure>
   <div class="px-4 z-30 relative">
     <div [nwText]="vm.name" class="font-bold text-lg"></div>
diff --git a/apps/web/app/widgets/territory/territory-card.component.ts b/apps/web/app/widgets/territory/territory-card.component.ts
index 9b3592eb..966e8c16 100644
--- a/apps/web/app/widgets/territory/territory-card.component.ts
+++ b/apps/web/app/widgets/territory/territory-card.component.ts
@@ -15,7 +15,7 @@ import { TerritoryStandingComponent } from './territory-standing.component'
   templateUrl: './territory-card.component.html',
   imports: [CommonModule, NwModule, TerritoryStandingComponent, FormsModule, ChipsInputModule],
   host: {
-    class: 'flex flex-col bg-base-300 rounded-md overflow-hidden',
+    class: 'flex flex-col bg-base-200 rounded-md overflow-hidden',
   },
 })
 export class TerritoryCardCoponent {
diff --git a/apps/web/app/widgets/territory/territory-governance-table.component.html b/apps/web/app/widgets/territory/territory-governance-table.component.html
index 8fca36b2..87059e38 100644
--- a/apps/web/app/widgets/territory/territory-governance-table.component.html
+++ b/apps/web/app/widgets/territory/territory-governance-table.component.html
@@ -13,13 +13,13 @@
   </thead>
   <tbody>
     <tr *ngFor="let row of data$ | async; let i = index">
-      <td class="text-right">{{ row.Level | number }}</td>
+      <th class="text-right">{{ row.Level | number }}</th>
       <td class="text-right">{{ row.UpkeepCost / 100 | currency }}</td>
       <td class="text-right">{{ row.TradingPostLevel | number }}</td>
       <td class="text-right">{{ row.NumberOfUpgradesRegressed | number }}</td>
       <td class="text-right">{{ (row.IntervalEarningsCap * row.CapModifier) / 100 | currency }}</td>
       <ng-container *ngFor="let t of territries$ | async">
-        <td class="text-right">{{ row['EarningsDistributionTID' + t.TerritoryID] | number }}</td>
+        <td class="text-right">{{ row['EarningsDistributionTID' + t.TerritoryID] | percent:'0.2' }}</td>
       </ng-container>
     </tr>
   </tbody>
diff --git a/apps/web/app/widgets/tradeskills/tradeskill-chart.component.ts b/apps/web/app/widgets/tradeskills/tradeskill-chart.component.ts
index b84840c7..f8dca811 100644
--- a/apps/web/app/widgets/tradeskills/tradeskill-chart.component.ts
+++ b/apps/web/app/widgets/tradeskills/tradeskill-chart.component.ts
@@ -1,18 +1,22 @@
+import { CommonModule } from '@angular/common'
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
 import { ChartConfiguration } from 'chart.js'
 import { isEqual } from 'lodash'
 import { BehaviorSubject, combineLatest, debounceTime, defer, distinctUntilChanged, map, shareReplay, startWith, Subject, switchMap } from 'rxjs'
 import { TranslateService } from '~/i18n'
-import { NwService } from '~/nw'
+import { NwModule, NwService } from '~/nw'
 import { NwTradeskillInfo } from '~/nw/nw-tradeskill.service'
+import { ChartModule } from '~/ui/chart'
 
 const COLORS = ['#003f5c', '#2f4b7c', '#665191', '#a05195', '#d45087', '#f95d6a', '#ff7c43', '#ffa600'].reverse()
 
 @Component({
+  standalone: true,
   selector: 'nwb-tradeskill-chart',
   templateUrl: './tradeskill-chart.component.html',
   styleUrls: ['./tradeskill-chart.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, ChartModule, NwModule]
 })
 export class TradeskillChartComponent {
   @Input()
diff --git a/apps/web/app/widgets/tradeskills/tradeskill-input.component.html b/apps/web/app/widgets/tradeskills/tradeskill-input.component.html
index 0cc83503..1e4ef7e6 100644
--- a/apps/web/app/widgets/tradeskills/tradeskill-input.component.html
+++ b/apps/web/app/widgets/tradeskills/tradeskill-input.component.html
@@ -1,22 +1,3 @@
-<ng-container *ngIf="tradeskill$ | async; let value">
-  <div class="flex-1 relative">
-    <picture class="opacity-20 absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center">
-      <img [nwImage]="value.Icon" class="w-3/5 h-3/5 object-contain" />
-    </picture>
-    <div class="absolute top-0 left-0 right-0 bottom-0 z-10 flex flex-col items-center justify-center">
-      <div class="aspect-square h-full">
-        <input
-          min="0"
-          type="number"
-          [attr.max]="value.MaxLevel"
-          class="input focus:outline-none bg-transparent h-full w-full p-0 text-center font-bold text-3xl appearance-none"
-          placeholder="0"
-          [(ngModel)]="level"
-        />
-      </div>
-    </div>
-  </div>
-  <h2 class="p-2 pt-0 text-center font-bold text-lg">
-    <span [nwText]="value.Name"></span>
-  </h2>
+<ng-container *ngIf="tradeskill$ | async; let item">
+  <nwb-tradeskill-level-input [(ngModel)]="level" [icon]="item.Icon" [label]="item.Name" [maxLevel]="item.MaxLevel" ></nwb-tradeskill-level-input>
 </ng-container>
diff --git a/apps/web/app/widgets/tradeskills/tradeskill-input.component.ts b/apps/web/app/widgets/tradeskills/tradeskill-input.component.ts
index a0fac6d3..aaae3206 100644
--- a/apps/web/app/widgets/tradeskills/tradeskill-input.component.ts
+++ b/apps/web/app/widgets/tradeskills/tradeskill-input.component.ts
@@ -1,15 +1,19 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { FormsModule } from '@angular/forms'
 import { BehaviorSubject, combineLatest, defer, map } from 'rxjs'
 import { NwService } from '~/nw'
+import { TradeskillLevelInputModule } from '~/ui/tradeskill-level-input'
 import { shareReplayRefCount } from '~/utils'
 
 @Component({
+  standalone: true,
   selector: 'nwb-tradeskill-input',
   templateUrl: './tradeskill-input.component.html',
-  styleUrls: ['./tradeskill-input.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, FormsModule, TradeskillLevelInputModule],
   host: {
-    class: 'bg-base-100 shadow-xl rounded-md aspect-square flex flex-col',
+    class: 'contents',
   },
 })
 export class TradeskillInputComponent {
@@ -27,7 +31,6 @@ export class TradeskillInputComponent {
     .pipe(map(({ skills, id }) => skills.get(id)))
     .pipe(shareReplayRefCount(1))
 
-
   public get level() {
     return this.nw.tradeskills.preferences.get(this.id$.value)?.level || 0
   }
@@ -42,5 +45,4 @@ export class TradeskillInputComponent {
   constructor(private nw: NwService) {
     //
   }
-
 }
diff --git a/apps/web/app/widgets/tradeskills/tradeskills.module.ts b/apps/web/app/widgets/tradeskills/tradeskills.module.ts
index 322e0bdc..0e14aab8 100644
--- a/apps/web/app/widgets/tradeskills/tradeskills.module.ts
+++ b/apps/web/app/widgets/tradeskills/tradeskills.module.ts
@@ -7,9 +7,13 @@ import { TradeskillInputComponent } from './tradeskill-input.component';
 import { TradeskillChartComponent } from './tradeskill-chart.component'
 import { NwTradeskillCircleComponent } from './tradeskill-progress.component'
 
+const COMPONENTS = [
+  TradeskillChartComponent,
+  TradeskillInputComponent
+]
 @NgModule({
-  imports: [CommonModule, NwModule, ChartModule, FormsModule],
-  declarations: [TradeskillInputComponent, TradeskillChartComponent, NwTradeskillCircleComponent],
-  exports: [TradeskillInputComponent, TradeskillChartComponent, NwTradeskillCircleComponent],
+  imports: [CommonModule, NwModule, ChartModule, FormsModule, ...COMPONENTS],
+  declarations: [NwTradeskillCircleComponent],
+  exports: [NwTradeskillCircleComponent, ...COMPONENTS],
 })
 export class TradeskillsModule {}
diff --git a/apps/web/app/widgets/umbralshards/umbral-calculator.component.html b/apps/web/app/widgets/umbralshards/umbral-calculator.component.html
index 7c9d5d7f..26805d32 100644
--- a/apps/web/app/widgets/umbralshards/umbral-calculator.component.html
+++ b/apps/web/app/widgets/umbralshards/umbral-calculator.component.html
@@ -1,6 +1,6 @@
 <div class="grid grid-cols-2">
   <div class="stats stats-vertical rounded-md rounded-r-none">
-    <div class="stat flex flex-row items-center gap-4 py-2" *ngFor="let row of data1; trackBy: trackById">
+    <div class="stat flex flex-row items-center layout-gap py-2" *ngFor="let row of data1; trackBy: trackById">
       <div class="text-secondary flex-none">
         <img [attr.src]="row.icon" class="w-16 h-16" />
       </div>
@@ -23,7 +23,7 @@
   </div>
 
   <div class="stats stats-vertical rounded-md rounded-l-none">
-    <div class="stat flex flex-row items-center gap-4 py-2" *ngFor="let row of data2; trackBy: trackById">
+    <div class="stat flex flex-row items-center layout-gap py-2" *ngFor="let row of data2; trackBy: trackById">
       <div class="flex-1 text-right">
         <div class="stat-value">
           <input
diff --git a/apps/web/app/widgets/vitals-families/vital-detail.component.html b/apps/web/app/widgets/vitals-families/vital-detail.component.html
index 40fd6f5e..3fbd6083 100644
--- a/apps/web/app/widgets/vitals-families/vital-detail.component.html
+++ b/apps/web/app/widgets/vitals-families/vital-detail.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="vital$ | async; let vital">
-  <div class="bg-base-300 px-4 py-2 flex flex-row items-center">
+  <div class="bg-base-200 px-4 py-2 flex flex-row items-center">
     <div class="avatar" *ngIf="showPortrait">
       <div class="w-10 mask mask-squircle">
         <img  [nwImage]="familyIcon | async" />
diff --git a/apps/web/app/widgets/vitals-families/vital-detail.component.ts b/apps/web/app/widgets/vitals-families/vital-detail.component.ts
index 256c5001..53991f01 100644
--- a/apps/web/app/widgets/vitals-families/vital-detail.component.ts
+++ b/apps/web/app/widgets/vitals-families/vital-detail.component.ts
@@ -25,6 +25,10 @@ const FAMILY_META = {
     Icon: 'assets/images/missionimage_undead1.png',
     Name: 'VC_Lost',
   },
+  fae: {
+    Icon: '',
+    Name: 'Fae',
+  },
 }
 
 @Component({
diff --git a/apps/web/app/widgets/xp-table/xp-chart.component.html b/apps/web/app/widgets/xp-table/xp-chart.component.html
index f4521edf..d2199dea 100644
--- a/apps/web/app/widgets/xp-table/xp-chart.component.html
+++ b/apps/web/app/widgets/xp-table/xp-chart.component.html
@@ -1 +1 @@
-<nwb-chart [config]="chartConfig" class="bg-base-100 rounded-md p-2"></nwb-chart>
+<nwb-chart [config]="config$ | async" class="bg-base-100 rounded-md p-2"></nwb-chart>
diff --git a/apps/web/app/widgets/xp-table/xp-chart.component.ts b/apps/web/app/widgets/xp-table/xp-chart.component.ts
index 7dbb757e..d5d52ae6 100644
--- a/apps/web/app/widgets/xp-table/xp-chart.component.ts
+++ b/apps/web/app/widgets/xp-table/xp-chart.component.ts
@@ -1,7 +1,8 @@
-import { Component, OnInit, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef } from '@angular/core'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { ChartConfiguration } from 'chart.js'
-import { map, Subject, takeUntil } from 'rxjs'
-import { NwService } from '~/nw'
+import { combineLatest, count, map } from 'rxjs'
+import { NwDbService } from '~/nw'
+import { CharacterPreferencesService } from '~/preferences'
 
 @Component({
   selector: 'nwb-xp-chart',
@@ -9,41 +10,43 @@ import { NwService } from '~/nw'
   styleUrls: ['./xp-chart.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class XpChartComponent implements OnInit, OnDestroy {
+export class XpChartComponent {
 
-  public chartConfig: ChartConfiguration
-  private destroy$ = new Subject()
-
-  public constructor(private nw: NwService, private cdRef: ChangeDetectorRef) {}
-
-  public async ngOnInit() {
-    this.nw.db.data
-      .xpamountsbylevel()
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((data) => {
-
-        this.chartConfig = {
-          type: 'line',
-          options: {
-            backgroundColor: '#FFF',
-          },
-          data: {
-            labels: data.map((it) => it['Level Number']),
-            datasets: [
-              {
-                label: 'XP per level',
-                data: data.map((it) => it.XPToLevel),
-                backgroundColor: '#ffa600'
-              }
-            ],
-          },
+  protected config$ = combineLatest({
+    level: this.char.level$,
+    data: this.db.xpAmounts
+  })
+  .pipe(map(({ level, data }): ChartConfiguration => {
+    return {
+      type: 'line',
+      options: {
+        animation: false,
+        backgroundColor: '#FFF',
+        elements: {
+          point: {
+            hoverRadius: (context) => {
+              return (level - 1) === context.dataIndex ? 10 : 5
+            },
+            radius: (context) => {
+              return (level - 1) === context.dataIndex ? 8 : 3
+            }
+          }
         }
-        this.cdRef.markForCheck()
-      })
-  }
+      },
+      data: {
+        labels: data.map((it) => it['Level Number'] + 1),
+        datasets: [
+          {
+            label: 'XP per level',
+            data: data.map((it) => it.XPToLevel),
+            backgroundColor: '#ffa600'
+          }
+        ],
+      },
+    }
+  }))
 
-  public ngOnDestroy(): void {
-    this.destroy$.next(null)
-    this.destroy$.complete()
+  public constructor(private db: NwDbService, private char: CharacterPreferencesService) {
+    //
   }
 }
diff --git a/apps/web/app/widgets/xp-table/xp-level-info.component.html b/apps/web/app/widgets/xp-table/xp-level-info.component.html
new file mode 100644
index 00000000..e611fbc6
--- /dev/null
+++ b/apps/web/app/widgets/xp-table/xp-level-info.component.html
@@ -0,0 +1,16 @@
+<dl *ngIf="data$ | async; let data" class="grid grid-cols-2 gap-x-1">
+  <ng-container *ngIf="data.xpToNext">
+    <dt>XP to next</dt>
+    <dd>{{ data.xpToNext | number }} </dd>
+  </ng-container>
+  <ng-container *ngIf="data.xpToLast">
+    <dt>XP to 60</dt>
+    <dd>{{ data.xpToLast | number }} ({{ data.xpToLastPercent | percent }}) </dd>
+  </ng-container>
+  <dt>Attribute points</dt>
+  <dd>{{ data.attributePoints }}</dd>
+  <dt>Respec costs</dt>
+  <dd>{{ data.respecCosts | currency }}</dd>
+  <dt>Max equippable GS</dt>
+  <dd>{{ data.maxEquipGs }}</dd>
+</dl>
diff --git a/apps/web/app/widgets/xp-table/xp-level-info.component.ts b/apps/web/app/widgets/xp-table/xp-level-info.component.ts
new file mode 100644
index 00000000..e9afad7d
--- /dev/null
+++ b/apps/web/app/widgets/xp-table/xp-level-info.component.ts
@@ -0,0 +1,54 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { combineLatest, map } from 'rxjs'
+import { NwDbService } from '~/nw'
+import { CharacterPreferencesService } from '~/preferences'
+
+function accumulate<T>(data: T[], startIndex: number, endIndex: number, key: keyof T) {
+  let result = 0
+  for (let i = startIndex; i <= endIndex; i++) {
+    result += (data[i] as any)[key] as number
+  }
+  return result
+}
+
+@Component({
+  standalone: true,
+  selector: 'nwb-xp-level-info',
+  templateUrl: './xp-level-info.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule],
+  host: {
+    class: 'block',
+  },
+})
+export class XpLevelInfoComponent {
+
+  protected data$ = combineLatest({
+    level: this.char.level$,
+    data: this.db.xpAmounts,
+  }).pipe(
+    map(({ level, data }) => {
+
+      const row = data[level - 1]
+      const next = data[level]
+      const xpTotal = accumulate(data, 0, data.length - 1, 'XPToLevel')
+      const xpAmount = accumulate(data, 0, level - 1, 'XPToLevel')
+      const xpToLast = xpTotal - xpAmount
+
+      return {
+        level: level,
+        xpToNext: next?.XPToLevel,
+        xpToNextPercent: (next?.XPToLevel / xpTotal) || null,
+        xpToLast: xpToLast,
+        xpToLastPercent: xpToLast / xpTotal,
+        xpAmount: xpAmount,
+        xpAmountPercent: xpAmount / xpTotal,
+        attributePoints: accumulate(data, 0, level - 1, 'AttributePoints'),
+        respecCosts: row.AttributeRespecCost / 100,
+        maxEquipGs: row.MaxEquippableGearScore
+      }
+    })
+  )
+  public constructor(private char: CharacterPreferencesService, private db: NwDbService) {}
+}
diff --git a/apps/web/app/widgets/xp-table/xp-table.component.ts b/apps/web/app/widgets/xp-table/xp-table.component.ts
index 0963660b..447993d3 100644
--- a/apps/web/app/widgets/xp-table/xp-table.component.ts
+++ b/apps/web/app/widgets/xp-table/xp-table.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy } from '@angular/core'
-import { BehaviorSubject, combineLatest, map, Subject, takeUntil } from 'rxjs'
-import { NwService } from '~/nw'
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'
+import { combineLatest, map, Subject, takeUntil } from 'rxjs'
+import { NwDbService } from '~/nw'
 
 function accumulate<T>(data: T[], startIndex: number, endIndex: number, key: keyof T) {
   let result = 0
@@ -32,21 +32,21 @@ export class XpTableComponent implements OnInit, OnDestroy {
   public index: number
   private destroy$ = new Subject()
 
-  public constructor(private nw: NwService, private cdRef: ChangeDetectorRef) {}
+  public constructor(private db: NwDbService, private cdRef: ChangeDetectorRef) {}
 
   public async ngOnInit() {
 
     combineLatest({
-      data: this.nw.db.data.xpamountsbylevel()
+      data: this.db.xpAmounts
     }).pipe(map(({ data }) => {
-      return data.map((node, i): LevelingRow => {
+      return data.map((row, i): LevelingRow => {
         return {
-          Level: node['Level Number'],
-          XPToLevel: node.XPToLevel,
+          Level: row['Level Number'] + 1,
+          XPToLevel: row.XPToLevel || 0,
           XPTotal: accumulate(data, 0, i, 'XPToLevel'),
-          AttributePoints: node.AttributePoints,
+          AttributePoints: row.AttributePoints,
           AttributePointsTotal: accumulate(data, 0, i, 'AttributePoints'),
-          AttributeRespecCost: node.AttributeRespecCost
+          AttributeRespecCost: row.AttributeRespecCost
         }
       })
     }))
diff --git a/apps/web/app/widgets/xp-table/xp-table.module.ts b/apps/web/app/widgets/xp-table/xp-table.module.ts
index dc9ec7aa..212bf1bf 100644
--- a/apps/web/app/widgets/xp-table/xp-table.module.ts
+++ b/apps/web/app/widgets/xp-table/xp-table.module.ts
@@ -1,13 +1,15 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 
-import { XpTableComponent } from './xp-table.component';
+import { ChartModule } from '~/ui/chart'
 import { XpChartComponent } from './xp-chart.component'
-import { ChartModule } from '~/ui/chart';
+import { XpLevelInfoComponent } from './xp-level-info.component'
+import { XpTableComponent } from './xp-table.component'
 
+const COMPONENTS = [XpLevelInfoComponent]
 @NgModule({
-  imports: [CommonModule, ChartModule],
+  imports: [CommonModule, ChartModule, ...COMPONENTS],
   declarations: [XpTableComponent, XpChartComponent],
-  exports: [XpTableComponent, XpChartComponent],
+  exports: [XpTableComponent, XpChartComponent, ...COMPONENTS],
 })
 export class XpTableModule {}
diff --git a/apps/web/assets/icons/gloryarcaneinner.png b/apps/web/assets/icons/gloryarcaneinner.png
new file mode 100644
index 00000000..d9fbd305
Binary files /dev/null and b/apps/web/assets/icons/gloryarcaneinner.png differ
diff --git a/apps/web/assets/icons/gloryarcaneouter.png b/apps/web/assets/icons/gloryarcaneouter.png
new file mode 100644
index 00000000..d1df885a
Binary files /dev/null and b/apps/web/assets/icons/gloryarcaneouter.png differ
diff --git a/apps/web/assets/icons/glorybarlevelcurrentbg.png b/apps/web/assets/icons/glorybarlevelcurrentbg.png
new file mode 100644
index 00000000..48c8fe66
Binary files /dev/null and b/apps/web/assets/icons/glorybarlevelcurrentbg.png differ
diff --git a/apps/web/assets/icons/glorydiamonddetailed.png b/apps/web/assets/icons/glorydiamonddetailed.png
new file mode 100644
index 00000000..121ce111
Binary files /dev/null and b/apps/web/assets/icons/glorydiamonddetailed.png differ
diff --git a/apps/web/environments/environment.web.ts b/apps/web/environments/environment.capacitor.ts
similarity index 74%
rename from apps/web/environments/environment.web.ts
rename to apps/web/environments/environment.capacitor.ts
index 49531de0..b5644d62 100644
--- a/apps/web/environments/environment.web.ts
+++ b/apps/web/environments/environment.capacitor.ts
@@ -1,8 +1,8 @@
 declare const __VERSION__: string
 declare const __NW_PTR__: boolean
 export const APP_CONFIG = {
-  production: false,
-  environment: 'WEB',
+  production: true,
+  environment: 'CAPACITOR',
   version: __VERSION__,
   isPTR: __NW_PTR__
 };
diff --git a/apps/web/environments/environment.prod.ts b/apps/web/environments/environment.electron.ts
similarity index 85%
rename from apps/web/environments/environment.prod.ts
rename to apps/web/environments/environment.electron.ts
index f4f42437..f99fbfe6 100644
--- a/apps/web/environments/environment.prod.ts
+++ b/apps/web/environments/environment.electron.ts
@@ -2,7 +2,7 @@ declare const __VERSION__: string
 declare const __NW_PTR__: boolean
 export const APP_CONFIG = {
   production: true,
-  environment: 'PROD',
+  environment: 'ELECTRON',
   version: __VERSION__,
   isPTR: __NW_PTR__
 };
diff --git a/apps/web/index.html b/apps/web/index.html
index 596b631b..a8d5f587 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -4,12 +4,12 @@
   <meta charset="utf-8">
   <title>New World Buddy</title>
   <base href="/">
-
+  <meta name="color-scheme" content="dark light" />
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">
   <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico">
   <script async src="https://nwdb.info/embed.js"></script>
 </head>
-<body class="overflow-x-hidden" data-theme="nwbuddy" >
+<body class="overflow-x-hidden dark" data-theme="nwbuddy" >
   <app-root>
     <div class="flex flex-row justify-center items-center h-screen w-screen">
       <button class="btn btn-square loading"></button>
diff --git a/apps/web/nw-data/datatables.ts b/apps/web/nw-data/datatables.ts
index 995fea52..d482fc9b 100644
--- a/apps/web/nw-data/datatables.ts
+++ b/apps/web/nw-data/datatables.ts
@@ -17,6 +17,7 @@ import type {
   ItemdefinitionsConsumables,
   ItemdefinitionsResources,
   ItemdefinitionsWeapons,
+  ItemdefinitionsArmor,
   Lootbuckets,
   Lootlimits,
   Loottable,
@@ -106,9 +107,15 @@ export abstract class NwDataloader {
   public itemdefinitionsMasterLoot() {
     return this.load<ItemDefinitionMaster[]>('javelindata_itemdefinitions_master_loot.json')
   }
+  public itemdefinitionsMasterMakegoods() {
+    return this.load<ItemDefinitionMaster[]>('javelindata_itemdefinitions_master_makegoods.json')
+  }
   public itemdefinitionsMasterNamed() {
     return this.load<ItemDefinitionMaster[]>('javelindata_itemdefinitions_master_named.json')
   }
+  public itemdefinitionsMasterNamedDepricated() {
+    return this.load<ItemDefinitionMaster[]>('javelindata_itemdefinitions_master_named_depricated.json')
+  }
   public itemdefinitionsMasterOmega() {
     return this.load<ItemDefinitionMaster[]>('javelindata_itemdefinitions_master_omega.json')
   }
@@ -178,6 +185,9 @@ export abstract class NwDataloader {
   public ftueDamagetableDamned() {
     return this.load<Damagetable[]>('javelindata_ftue_damagetable_damned.json')
   }
+  public ftueDamagetableUndeadGrenadier() {
+    return this.load<Damagetable[]>('javelindata_ftue_damagetable_undead_grenadier.json')
+  }
   public damagetable() {
     return this.load<Damagetable[]>('javelindata_damagetable.json')
   }
@@ -208,6 +218,9 @@ export abstract class NwDataloader {
   public itemdefinitionsWeapons() {
     return this.load<ItemdefinitionsWeapons[]>('javelindata_itemdefinitions_weapons.json')
   }
+  public itemdefinitionsArmor() {
+    return this.load<ItemdefinitionsArmor[]>('javelindata_itemdefinitions_armor.json')
+  }
   public lootbuckets() {
     return this.load<Lootbuckets[]>('javelindata_lootbuckets.json')
   }
@@ -286,6 +299,9 @@ export abstract class NwDataloader {
   public statuseffectsRapier() {
     return this.load<Statuseffect[]>('javelindata_statuseffects_rapier.json')
   }
+  public statuseffectsRunes() {
+    return this.load<Statuseffect[]>('javelindata_statuseffects_runes.json')
+  }
   public statuseffectsSpear() {
     return this.load<Statuseffect[]>('javelindata_statuseffects_spear.json')
   }
@@ -337,12 +353,18 @@ export abstract class NwDataloader {
   public spelltableRapier() {
     return this.load<Spelltable[]>('javelindata_spelltable_rapier.json')
   }
+  public spelltableRunes() {
+    return this.load<Spelltable[]>('javelindata_spelltable_runes.json')
+  }
   public spelltableSpear() {
     return this.load<Spelltable[]>('javelindata_spelltable_spear.json')
   }
   public spelltableSword() {
     return this.load<Spelltable[]>('javelindata_spelltable_sword.json')
   }
+  public spelltableThrowables() {
+    return this.load<Spelltable[]>('javelindata_spelltable_throwables.json')
+  }
   public spelltableVoidgauntlet() {
     return this.load<Spelltable[]>('javelindata_spelltable_voidgauntlet.json')
   }
@@ -553,12 +575,18 @@ export abstract class NwDataloader {
   public weaponabilitiesAbilityGreataxe() {
     return this.load<Ability[]>('weaponabilities/javelindata_ability_greataxe.json')
   }
+  public weaponabilitiesAbilityGreatsword() {
+    return this.load<Ability[]>('weaponabilities/javelindata_ability_greatsword.json')
+  }
   public weaponabilitiesAbilityHatchet() {
     return this.load<Ability[]>('weaponabilities/javelindata_ability_hatchet.json')
   }
   public weaponabilitiesAbilityIcemagic() {
     return this.load<Ability[]>('weaponabilities/javelindata_ability_icemagic.json')
   }
+  public weaponabilitiesAbilityItems() {
+    return this.load<Ability[]>('weaponabilities/javelindata_ability_items.json')
+  }
   public weaponabilitiesAbilityLifemagic() {
     return this.load<Ability[]>('weaponabilities/javelindata_ability_lifemagic.json')
   }
@@ -568,6 +596,9 @@ export abstract class NwDataloader {
   public weaponabilitiesAbilityRapier() {
     return this.load<Ability[]>('weaponabilities/javelindata_ability_rapier.json')
   }
+  public weaponabilitiesAbilityRune() {
+    return this.load<Ability[]>('weaponabilities/javelindata_ability_rune.json')
+  }
   public weaponabilitiesAbilitySpear() {
     return this.load<Ability[]>('weaponabilities/javelindata_ability_spear.json')
   }
diff --git a/apps/web/nw-data/types.ts b/apps/web/nw-data/types.ts
index e00adce8..2b9967dd 100644
--- a/apps/web/nw-data/types.ts
+++ b/apps/web/nw-data/types.ts
@@ -29,6 +29,7 @@ export interface Affixstats {
     ABSVitalsCategory?:         string;
     AFABlight:                  number;
     AFACurse:                   number;
+    AFAPoison:                  number;
     AdditionalDamage?:          string;
     AppendToTooltip?:           string;
     AttributeModifiers?:        string;
@@ -64,11 +65,11 @@ export interface Affixstats {
     FishingLineStrength:        number;
     GatheringEfficiency:        number;
     IsAdditiveDamage:           boolean;
-    MODConstitution?:           string;
-    MODDexterity?:              string;
-    MODFocus?:                  string;
-    MODIntelligence?:           string;
-    MODStrength?:               string;
+    MODConstitution:            number;
+    MODDexterity:               number;
+    MODFocus:                   number;
+    MODIntelligence:            number;
+    MODStrength:                number;
     MP_FinalNotePerfectXPBonus: number;
     MP_GroupXPBonus:            number;
     MP_IgnoreMissedNotes:       number;
@@ -83,6 +84,7 @@ export interface Affixstats {
     PreferHigherScaling:        boolean;
     RESBlight:                  number;
     RESCurse:                   number;
+    RESPoison:                  number;
     ScalingDexterity:           number;
     ScalingFocus:               number;
     ScalingIntelligence:        number;
@@ -116,22 +118,24 @@ export interface Afflictions {
     StatusEffects?:         string;
 }
 export interface Areadefinitions {
-    AIVariantLevelOverride: number;
-    AudioGroup:             string;
-    AudioState:             string;
-    CanPlaceCamp:           boolean;
-    ChartedAchievement:     string;
-    IsArea:                 boolean;
-    IsChartable:            boolean;
-    IsPOI:                  boolean;
-    NameLocalizationKey:    string;
-    POILevel:               number;
-    POITag:                 string;
-    PoiDiscoveryXpModifier: number;
-    TerritoryID:            number;
+    AIVariantLevelOverride:                  number;
+    AIVariantVitalsCategoryPostfixOverride?: string;
+    AudioGroup:                              string;
+    AudioState:                              string;
+    CanPlaceCamp:                            boolean;
+    ChartedAchievement:                      string;
+    IsArea:                                  boolean;
+    IsChartable:                             boolean;
+    IsPOI:                                   boolean;
+    NameLocalizationKey:                     string;
+    POILevel:                                number;
+    POITag:                                  string;
+    PoiDiscoveryXpModifier:                  number;
+    TerritoryID:                             number;
 }
 export interface Categoricalprogression {
     AchievementIdOnMaxRank?:  string;
+    AllowOverflow:            boolean;
     AutoRankUp:               boolean;
     CategoricalProgressionId: string;
     DisplayName?:             string;
@@ -165,6 +169,8 @@ export interface Crafting {
     CraftingGroup?:                      string;
     CraftingTime:                        number;
     DisplayIngredients?:                 string;
+    ExpertiseBumpChanceOverride:         number;
+    FirstCraftAchievementId?:            string;
     "Game Event Validation":             boolean;
     GameEventID?:                        string;
     GearScoreBonus?:                     string;
@@ -182,6 +188,7 @@ export interface Crafting {
     IsRefining:                          boolean;
     IsTemporary:                         boolean;
     ItemID?:                             string;
+    MaxPerkItemsAllowed:                 number;
     OutputQty:                           number;
     PerkCost:                            number;
     ProceduralTierID1?:                  string;
@@ -222,96 +229,98 @@ export interface Crafting {
     bListedByDefault:                    boolean;
 }
 export interface ItemDefinitionMaster {
-    ADyeSlotDisabled:              boolean;
-    AcquisitionNotificationId?:    number;
-    ArmorAppearanceF?:             string;
-    ArmorAppearanceM?:             string;
-    AttributionId?:                string;
-    AudioCreated?:                 string;
-    AudioDestroyed?:               string;
-    AudioPickup?:                  string;
-    AudioPlace?:                   string;
-    AudioUse?:                     string;
-    BDyeSlotDisabled:              boolean;
-    BindOnEquip?:                  boolean;
-    BindOnPickup:                  boolean;
-    CanHavePerks:                  boolean;
-    CanReplaceGem:                 boolean;
-    ConfirmBeforeUse:              boolean;
-    ConsumeOnUse:                  boolean;
-    ContainerGS?:                  number;
-    ContainerLevel?:               number;
-    CraftingRecipe?:               string;
-    DeathDropPercentage:           number;
-    Description?:                  string;
-    DestroyOnBreak:                boolean;
-    Durability:                    number;
-    DurabilityDmgOnDeath:          number;
-    ForceRarity:                   number;
-    GDyeSlotDisabled:              boolean;
-    GearScoreOverride:             number;
-    HiResIconPath?:                string;
-    HideFromRewardOpenPopup?:      boolean;
-    HideInLootTicker?:             boolean;
-    HousingTags?:                  string;
-    IconCaptureGroup?:             string;
-    IconPath?:                     string;
-    IgnoreHWMScaling?:             boolean;
-    IgnoreNameChanges?:            boolean;
-    IngredientBonusPrimary?:       number;
-    IngredientBonusSecondary?:     number;
-    IngredientCategories?:         string[];
-    IngredientGearScoreBaseBonus?: number;
-    IngredientGearScoreMaxBonus?:  number;
-    IsMissionItem?:                boolean;
-    IsRepairable:                  boolean;
-    IsRequiredItem?:               boolean;
-    IsSalvageable:                 boolean;
-    IsUniqueItem?:                 boolean;
-    ItemClass?:                    string[];
-    ItemID:                        string;
-    ItemStatsRef?:                 string;
-    ItemType?:                     string;
-    ItemTypeDisplayName?:          string;
-    MannequinTag?:                 string;
-    MaxGearScore:                  number;
-    MaxStackSize:                  number;
-    MinGearScore:                  number;
-    Name?:                         string;
-    Nonremovable?:                 boolean;
-    Notes?:                        string;
-    Perk1?:                        string;
-    Perk2?:                        string;
-    Perk3?:                        string;
-    Perk4?:                        string;
-    Perk5?:                        string;
-    PerkBucket1?:                  string;
-    PerkBucket2?:                  string;
-    PerkBucket3?:                  string;
-    PerkBucket4?:                  string;
-    PerkBucket5?:                  string;
-    PrefabPath?:                   string;
-    RDyeSlotDisabled?:             boolean | string;
-    RepairDustModifier:            number;
-    RepairRecipe?:                 string;
-    RequiredLevel?:                number;
-    SalvageAchievement?:           string;
-    SalvageGameEventID?:           string;
-    SalvageLootTags?:              string;
-    SalvageResources?:             boolean;
-    SoundTableID?:                 string;
-    Tier:                          number;
-    TradingCategory?:              string;
-    TradingFamily?:                string;
-    TradingGroup?:                 string;
-    UiItemClass?:                  string;
-    UseMagicAffix:                 boolean;
-    UseMaterialAffix:              boolean;
-    UseTypeAffix:                  boolean;
-    WarboardDepositStat?:          string;
-    WarboardGatherStat?:           string;
-    WeaponAppearanceOverride?:     string;
-    Weight:                        number;
+    AcquisitionNotificationId?:      number;
+    ArmorAppearanceF?:               string;
+    ArmorAppearanceM?:               string;
+    AttributionId?:                  string;
+    AudioCreated?:                   string;
+    AudioDestroyed?:                 string;
+    AudioPickup?:                    string;
+    AudioPlace?:                     string;
+    AudioUse?:                       string;
+    BindOnEquip?:                    number;
+    BindOnPickup:                    number;
+    CanHavePerks:                    number;
+    CanReplaceGem:                   number;
+    CanRollPerkOnUpgrade?:           number;
+    ConfirmBeforeUse:                number;
+    ConsumeOnUse:                    number;
+    ContainerGS?:                    number;
+    ContainerLevel?:                 number;
+    CraftingRecipe?:                 string;
+    DeathDropPercentage:             number;
+    Description?:                    string;
+    DestroyOnBreak:                  number;
+    Durability:                      number;
+    DurabilityDmgOnDeath:            number;
+    EventId?:                        string;
+    ForceRarity?:                    number;
+    GearScoreOverride:               number;
+    HeartgemRuneTooltipTitle?:       string;
+    HeartgemTooltipBackgroundImage?: string;
+    HiResIconPath?:                  string;
+    HideFromRewardOpenPopup?:        number;
+    HideInLootTicker?:               number;
+    HousingTags?:                    string;
+    IconCaptureGroup?:               string;
+    IconPath?:                       string;
+    IgnoreHWMScaling?:               number;
+    IgnoreNameChanges?:              number;
+    IgnoreParentColumns_DVT?:        string;
+    IngredientBonusPrimary?:         number;
+    IngredientBonusSecondary?:       number;
+    IngredientCategories?:           string[];
+    IngredientGearScoreBaseBonus?:   number;
+    IngredientGearScoreMaxBonus?:    number;
+    IsMissionItem?:                  number;
+    IsRepairable:                    number;
+    IsRequiredItem?:                 number;
+    IsSalvageable:                   number;
+    IsUniqueItem?:                   number;
+    ItemClass?:                      string[];
+    ItemID:                          string;
+    ItemStatsRef?:                   string;
+    ItemType?:                       string;
+    ItemTypeDisplayName?:            string;
+    MannequinTag?:                   string;
+    MaxGearScore:                    number;
+    MaxStackSize:                    number;
+    MinGearScore:                    number;
+    Name?:                           string;
+    Nonremovable?:                   number;
+    Notes?:                          string;
+    ParentItemId_DVT?:               string;
+    Perk1?:                          string;
+    Perk2?:                          string;
+    Perk3?:                          string;
+    Perk4?:                          string;
+    Perk5?:                          string;
+    PerkBucket1?:                    string;
+    PerkBucket2?:                    string;
+    PerkBucket3?:                    string;
+    PerkBucket4?:                    string;
+    PerkBucket5?:                    string;
+    PrefabPath?:                     string;
+    RepairDustModifier:              number;
+    RepairRecipe?:                   string;
+    RequiredLevel?:                  number;
+    SalvageAchievement?:             string;
+    SalvageGameEventID?:             string;
+    SalvageLootTags?:                string;
+    SalvageResources?:               number;
+    SoundTableID?:                   string;
+    Tier:                            number;
+    TradingCategory?:                string;
+    TradingFamily?:                  string;
+    TradingGroup?:                   string;
+    UiItemClass?:                    string;
+    UseMagicAffix:                   number;
+    UseMaterialAffix:                number;
+    UseTypeAffix:                    number;
+    WarboardDepositStat?:            string;
+    WarboardGatherStat?:             string;
+    WeaponAppearanceOverride?:       string;
+    Weight:                          number;
 }
 export interface Craftingcategories {
     CategoryID:   string;
@@ -326,6 +335,9 @@ export interface Damagetable {
     Affixes?:                     string;
     Affliction?:                  string;
     AfflictionPercent?:           number;
+    AttackBlockedRuneCharge?:     number;
+    AttackDealsNoDurability?:     boolean;
+    AttackRuneCharge?:            number;
     AttackType?:                  string;
     BlockAbsorptionModifier:      number;
     BlockCameraShakeID?:          string;
@@ -358,17 +370,19 @@ export interface Damagetable {
     DmgCoefHead:                  number;
     DurabilityCostOverride?:      number;
     EffectOnlyOnDamage?:          boolean | number | string;
+    HitBlockedRuneCharge?:        number;
     HitRateDmgModifier?:          number;
+    HitRuneCharge?:               number;
     HitStun:                      number;
     HungerDmg?:                   number;
-    IgnoreInvulnerable:           number;
+    IgnoreInvulnerable:           number | string;
     ImpactDecayRate:              number;
     ImpactDistanceX:              number;
     ImpactDistanceY:              number;
     ImpactDistanceZ:              number;
     ImpactRating:                 number;
     IsAbility?:                   boolean;
-    IsRanged?:                    boolean;
+    IsRanged?:                    boolean | string;
     IsSiege?:                     boolean;
     IsTaunt?:                     boolean;
     LOSCheckVerticalAngleOffset?: number;
@@ -409,7 +423,7 @@ export interface Damagetypes {
 }
 export interface GameEvent {
     AzothReward:                   number;
-    AzothRewardChance?:            string;
+    AzothRewardChance:             number;
     AzothSalt:                     number;
     AzothSaltChance:               number;
     CategoricalProgressionId?:     string;
@@ -428,7 +442,6 @@ export interface GameEvent {
     GearScoreRange:                number;
     ItemReward?:                   string;
     ItemRewardQty:                 number;
-    LeaderboardValue:              number;
     Level:                         number;
     LootLimitId?:                  string;
     LootLimitReachedGameEventId?:  string;
@@ -440,78 +453,92 @@ export interface GameEvent {
     UseRestedExp?:                 string;
 }
 export interface Gamemodes {
-    AIDespawnRadius?:                 string;
-    AILeashingOptOut:                 boolean;
-    AILevelAdjustedPerceptionEnabled: boolean;
-    AIPreventEnemyTraining:           boolean;
-    AISpawnRadius?:                   string;
-    AdvanceThroughStatesOnUpdate:     string;
-    AllowPvpValueAccumulation:        boolean;
-    AutoEquipQuickslot:               boolean;
-    BackfillDelaySec:                 number;
-    BackfillReadyThreshold:           number;
-    BackgroundImagePath?:             string;
-    CannotFastTravelTextId?:          string;
-    ClearBattleTokensOnExit:          string;
-    CoatlicueName?:                   string;
-    CombineTeamGroups:                boolean;
-    ContainerGS:                      number;
-    ContainerLevel:                   number;
-    Description?:                     string;
-    DifficultyProgressionId?:         string;
-    DisableDeathsDoor:                boolean;
-    DisplayName?:                     string;
-    FeatureFlag:                      string;
-    FreezeTime:                       number;
-    GameModeId:                       string;
-    IconPath?:                        string;
-    ImmediateLaunch:                  boolean;
-    IsDungeon:                        boolean;
-    IsMutable:                        boolean;
-    ItemClassesToRemoveOnExit?:       string;
-    LeaveDescTextId?:                 string;
-    LeaveTimeDescTextId?:             string;
-    LeaveTitleTextId?:                string;
-    LootTags:                         string[];
-    MapId?:                           string;
-    MaxAI?:                           string;
-    MinAcceptedInvites:               number;
-    MinGroupSize:                     number;
-    MutContainerGSOverride:           number;
-    MutLootTagsOverride?:             string[];
-    MutMinContLvllLootTagIdOverride:  number;
-    NumTeams:                         number;
-    PauseTimeOfDay:                   boolean;
-    PossibleItemDropIds?:             string[];
-    PreserveOldGroup:                 boolean;
-    Priority:                         number;
-    PriorityAddMax:                   number;
-    PriorityAddMin:                   number;
-    ProjectedCpuUsePercent:           number;
-    ProjectedDurationMinutes:         number;
-    ProjectedMemoryUseMb:             number;
-    QueueLevelBuckets?:               string;
-    QueueReadyThreshold:              number;
-    QuitButtonTextId?:                string;
-    RaidInviteDelaySec:               number;
-    RaidInviteDurationSec:            number;
-    RequiredLevel:                    number;
-    RequirementText?:                 string;
-    RequiresGameModeGDEException:     string;
-    RequiresTeamRaids:                string;
-    RestrictGathering:                boolean;
-    RestrictWaterGathering:           boolean;
-    ScriptName:                       string;
-    SimpleImagePath?:                 string;
-    SlicePath:                        string;
-    TeamCapacity:                     number;
-    TeamTeleportData?:                string;
-    UiInteractOption?:                string;
-    UsePendingListMatchmaking:        boolean;
-    UseTeamNamePlate:                 boolean;
-    VictoryDelaySec:                  number;
-    WarBoardStatDefinitions?:         string;
-    WorldBounds?:                     string;
+    AIDespawnRadius?:                     string;
+    AILeashingOptOut:                     boolean;
+    AILevelAdjustedPerceptionEnabled:     boolean;
+    AIPreventEnemyTraining:               boolean;
+    AISpawnRadius?:                       string;
+    AdvanceThroughStatesOnUpdate:         string;
+    AllowPvpValueAccumulation:            boolean;
+    AutoEquipQuickslot:                   boolean;
+    BackfillDelaySec:                     number;
+    BackfillReadyThreshold:               number;
+    BackgroundImagePath?:                 string;
+    CannotFastTravelTextId?:              string;
+    ClearBattleTokensOnExit:              string;
+    CoatlicueName?:                       string;
+    CombineTeamGroups:                    boolean;
+    ContainerGS:                          number;
+    ContainerLevel:                       number;
+    Description?:                         string;
+    DifficultyProgressionId?:             string;
+    DisableDeathsDoor:                    boolean;
+    DisplayName?:                         string;
+    FailGroupPenaltyTextId?:              string;
+    FeatureFlag:                          string;
+    FreezeTime:                           number;
+    GameModeId:                           string;
+    GearScoreOverrideValueMax:            number;
+    GearScoreOverrideValueMin:            number;
+    IconPath?:                            string;
+    ImmediateLaunch:                      boolean;
+    IsDungeon:                            boolean;
+    IsMutable:                            boolean;
+    ItemClassesToRemoveOnExit?:           string;
+    JoinButtonTextId?:                    string;
+    LeaveDescTextId?:                     string;
+    LeaveQueueDescriptionTextId?:         string;
+    LeaveQueueTitleTextId?:               string;
+    LeaveTimeDescTextId?:                 string;
+    LeaveTitleTextId?:                    string;
+    LootTags?:                            string[];
+    MapId?:                               string;
+    MaxAI?:                               string;
+    MaxPlayerLevelToUseGearScoreOverride: number;
+    MinAcceptedInvites:                   number;
+    MinGroupSize:                         number;
+    MinPlayerLevelToUseGearScoreOverride: number;
+    ModeNameLocStringId?:                 string;
+    MutContainerGSOverride:               number;
+    MutLootTagsOverride?:                 string[];
+    MutMinContLvllLootTagIdOverride:      number;
+    NumTeams:                             number;
+    PauseTimeOfDay:                       boolean;
+    PossibleItemDropIds?:                 string[];
+    PreserveOldGroup:                     boolean;
+    Priority:                             number;
+    PriorityAddMax:                       number;
+    PriorityAddMin:                       number;
+    ProjectedCpuUsePercent:               number;
+    ProjectedDurationMinutes:             number;
+    ProjectedMemoryUseMb:                 number;
+    QueueLevelBuckets?:                   string;
+    QueueReadyThreshold:                  number;
+    QuitButtonTextId?:                    string;
+    RaidInviteDelaySec:                   number;
+    RaidInviteDurationSec:                number;
+    RequiredLevel:                        number;
+    RequirementText?:                     string;
+    RequiresGameModeGDEException:         string;
+    RequiresTeamRaids:                    string;
+    ResetChargeOnEnter:                   boolean;
+    RestrictGathering:                    boolean;
+    RestrictWaterGathering:               boolean;
+    ScreenHeaderTextId?:                  string;
+    ScriptName:                           string;
+    ShouldShowAcceptedFlow:               boolean;
+    SignupTitleTextId?:                   string;
+    SimpleImagePath?:                     string;
+    SlicePath:                            string;
+    SpecialQueueGroupSizes:               number;
+    TeamCapacity:                         number;
+    TeamTeleportData?:                    string;
+    UiInteractOption?:                    string;
+    UsePendingListMatchmaking:            boolean;
+    UseTeamNamePlate:                     boolean;
+    VictoryDelaySec:                      number;
+    WarBoardStatDefinitions?:             string;
+    WorldBounds?:                         string;
 }
 export interface Gatherables {
     AddedStatusEffect?:              string;
@@ -519,11 +546,13 @@ export interface Gatherables {
     BaseGatherTime:                  number;
     ConsumedStatusEffect?:           string;
     DepletedGatherableID:            number;
+    DisplayDescription?:             string;
     DisplayName?:                    string;
     FinalLootTable?:                 string;
     GameEventID?:                    string;
     GatherableID:                    string;
     GatheringAction:                 string;
+    GatheringFragment?:              string;
     GatheringType:                   string;
     IconTypeUnlock?:                 string;
     IgnoreObstructions:              boolean;
@@ -532,22 +561,25 @@ export interface Gatherables {
     IsLootContainer:                 boolean;
     ItemRestrictionId?:              string;
     ItemRestrictionQuantity?:        string;
+    LandmarkIconPath?:               string;
     MaxRespawnRate:                  number;
     MinRespawnRate:                  number;
     NumRequiredToGather:             number;
     RequireControllingFaction:       boolean;
     RequiredStatusEffect?:           string;
     RequiredTradeskillLevel:         number;
+    RequiredWhisperId?:              string;
     ResetGatherTimeOnEndInteraction: boolean;
     Restriction:                     string;
+    TooltipImage?:                   string;
     Tradeskill:                      string;
     WaitForImpact:                   boolean;
 }
 export interface VariationsLockedInteractGatherables {
-    InteractGatherableSlice: string;
-    InteractTag?:            string;
-    RequiredAchievementId?:  string;
-    VariantID:               string;
+    InteractGatherableSlice:         string;
+    InteractTag?:                    string;
+    RequiredAchievementConditional?: string;
+    VariantID:                       string;
 }
 export interface Housingitems {
     AttributionId?:              string;
@@ -610,6 +642,7 @@ export interface ItemdefinitionsConsumables {
     CooldownDuration:              number;
     CooldownId?:                   string;
     DMGVitalsCategory?:            string;
+    DisableUseInCombat:            boolean;
     DisplayStatusEffect?:          string;
     DurationOverrides:             number;
     DurationScaleFactor:           number;
@@ -626,9 +659,10 @@ export interface ItemdefinitionsConsumables {
     UseCount:                      number;
 }
 export interface ItemdefinitionsResources {
-    IsGem:      boolean;
-    PerkBucket: string;
-    ResourceID: string;
+    IsGem:              boolean;
+    IsSocketableNonGem: boolean;
+    PerkBucket:         string;
+    ResourceID:         string;
 }
 export interface ItemdefinitionsWeapons {
     ABABleed:                     number;
@@ -714,6 +748,40 @@ export interface ItemdefinitionsWeapons {
     WeaponMasteryCategoryId?:     string;
     WeightOverride:               number;
 }
+export interface ItemdefinitionsArmor {
+    ABSCorruption:                number;
+    ABSFire:                      number;
+    ABSLightning:                 number;
+    ABSMagic:                     number;
+    ABSSiege:                     number;
+    ABSSlash:                     number;
+    ABSStandard:                  number;
+    ABSStrike:                    number;
+    ABSThrust:                    number;
+    ArmorRatingScaleFactor:       number;
+    DEFCorruption:                number;
+    DEFFire:                      number;
+    DEFLightning:                 number;
+    DEFMagic:                     number;
+    DEFSiege:                     number;
+    DEFSlash:                     number;
+    DEFStandard:                  number;
+    DEFStrike:                    number;
+    DEFThrust:                    number;
+    ElementalArmorSetScaleFactor: number;
+    Encumbrance:                  number;
+    EncumbrancePerGS:             number;
+    Grit:                         number;
+    PhysicalArmorSetScaleFactor:  number;
+    RESBleed:                     number;
+    RESCurse:                     number;
+    RESDisease:                   number;
+    RESFrostbite:                 number;
+    RESPoison:                    number;
+    WeaponID:                     string;
+    WeightClass?:                 string;
+    WeightOverride:               number;
+}
 export interface Lootbuckets {
     Item1?:          string;
     Item10?:         string;
@@ -772,7 +840,7 @@ export interface Lootbuckets {
     Item148?:        string;
     Item149?:        string;
     Item15?:         string;
-    Item150:         string;
+    Item150?:        string;
     Item151?:        string;
     Item152?:        string;
     Item153?:        string;
@@ -858,16 +926,42 @@ export interface Lootbuckets {
     Item228?:        string;
     Item229?:        string;
     Item23?:         string;
-    Item230?:        string;
     Item231?:        string;
     Item232?:        string;
     Item233?:        string;
     Item234?:        string;
     Item235?:        string;
     Item236?:        string;
+    Item237?:        string;
+    Item238?:        string;
+    Item239?:        string;
     Item24?:         string;
+    Item240?:        string;
+    Item241?:        string;
+    Item242?:        string;
+    Item243?:        string;
+    Item244?:        string;
+    Item245?:        string;
+    Item246:         string;
+    Item247?:        string;
+    Item249?:        string;
     Item25?:         string;
+    Item250?:        string;
+    Item251?:        string;
+    Item252?:        string;
+    Item253?:        string;
+    Item254?:        string;
+    Item255?:        string;
+    Item256?:        string;
+    Item257?:        string;
+    Item258?:        string;
+    Item259?:        string;
     Item26?:         string;
+    Item260?:        string;
+    Item261?:        string;
+    Item262?:        string;
+    Item263?:        string;
+    Item264?:        string;
     Item27?:         string;
     Item28?:         string;
     Item29?:         string;
@@ -1091,16 +1185,42 @@ export interface Lootbuckets {
     LootBucket228?:  string;
     LootBucket229?:  string;
     LootBucket23?:   string;
-    LootBucket230?:  string;
     LootBucket231?:  string;
     LootBucket232?:  string;
     LootBucket233?:  string;
     LootBucket234?:  string;
     LootBucket235?:  string;
     LootBucket236?:  string;
+    LootBucket237?:  string;
+    LootBucket238?:  string;
+    LootBucket239?:  string;
     LootBucket24?:   string;
+    LootBucket240?:  string;
+    LootBucket241?:  string;
+    LootBucket242?:  string;
+    LootBucket243?:  string;
+    LootBucket244?:  string;
+    LootBucket245?:  string;
+    LootBucket246?:  string;
+    LootBucket247?:  string;
+    LootBucket249?:  string;
     LootBucket25?:   string;
+    LootBucket250?:  string;
+    LootBucket251?:  string;
+    LootBucket252?:  string;
+    LootBucket253?:  string;
+    LootBucket254?:  string;
+    LootBucket255?:  string;
+    LootBucket256?:  string;
+    LootBucket257?:  string;
+    LootBucket258?:  string;
+    LootBucket259?:  string;
     LootBucket26?:   string;
+    LootBucket260?:  string;
+    LootBucket261?:  string;
+    LootBucket262?:  string;
+    LootBucket263?:  string;
+    LootBucket264?:  string;
     LootBucket27?:   string;
     LootBucket28?:   string;
     LootBucket29?:   string;
@@ -1238,7 +1358,7 @@ export interface Lootbuckets {
     MatchOne148?:    string;
     MatchOne149?:    string;
     MatchOne15?:     string;
-    MatchOne150:     string;
+    MatchOne150?:    string;
     MatchOne151?:    string;
     MatchOne152?:    string;
     MatchOne153?:    string;
@@ -1324,16 +1444,42 @@ export interface Lootbuckets {
     MatchOne228?:    string;
     MatchOne229?:    string;
     MatchOne23?:     string;
-    MatchOne230?:    string;
     MatchOne231?:    string;
     MatchOne232?:    string;
     MatchOne233?:    string;
     MatchOne234?:    string;
     MatchOne235?:    string;
     MatchOne236?:    string;
+    MatchOne237?:    string;
+    MatchOne238?:    string;
+    MatchOne239?:    string;
     MatchOne24?:     string;
+    MatchOne240?:    string;
+    MatchOne241?:    string;
+    MatchOne242?:    string;
+    MatchOne243?:    string;
+    MatchOne244?:    string;
+    MatchOne245?:    string;
+    MatchOne246:     string;
+    MatchOne247?:    string;
+    MatchOne249?:    string;
     MatchOne25?:     string;
+    MatchOne250?:    string;
+    MatchOne251?:    string;
+    MatchOne252?:    string;
+    MatchOne253?:    string;
+    MatchOne254?:    string;
+    MatchOne255?:    string;
+    MatchOne256?:    string;
+    MatchOne257?:    string;
+    MatchOne258?:    string;
+    MatchOne259?:    string;
     MatchOne26?:     string;
+    MatchOne260?:    string;
+    MatchOne261?:    string;
+    MatchOne262?:    string;
+    MatchOne263?:    string;
+    MatchOne264?:    string;
     MatchOne27?:     string;
     MatchOne28?:     string;
     MatchOne29?:     string;
@@ -1560,16 +1706,42 @@ export interface Lootbuckets {
     Quantity228:     number;
     Quantity229:     number;
     Quantity23:      number;
-    Quantity230:     number;
     Quantity231:     number;
     Quantity232:     number;
     Quantity233:     number;
     Quantity234:     number;
     Quantity235:     number;
     Quantity236:     number;
+    Quantity237:     number;
+    Quantity238:     number;
+    Quantity239:     number;
     Quantity24:      number;
+    Quantity240:     number;
+    Quantity241:     number;
+    Quantity242:     number;
+    Quantity243:     number;
+    Quantity244:     number;
+    Quantity245:     number;
+    Quantity246:     number;
+    Quantity247:     number;
+    Quantity249:     number;
     Quantity25:      number;
+    Quantity250:     number;
+    Quantity251:     number;
+    Quantity252:     number;
+    Quantity253:     number;
+    Quantity254:     number;
+    Quantity255:     number;
+    Quantity256:     number;
+    Quantity257:     number;
+    Quantity258:     number;
+    Quantity259:     number;
     Quantity26:      number;
+    Quantity260:     number;
+    Quantity261:     number;
+    Quantity262:     number;
+    Quantity263:     number;
+    Quantity264:     number;
     Quantity27:      number;
     Quantity28:      number;
     Quantity29:      number;
@@ -1706,7 +1878,7 @@ export interface Lootbuckets {
     Tags148?:        string[];
     Tags149?:        string[];
     Tags15?:         string[];
-    Tags150:         string[];
+    Tags150?:        string[];
     Tags151?:        string[];
     Tags152?:        string[];
     Tags153?:        string[];
@@ -1788,14 +1960,38 @@ export interface Lootbuckets {
     Tags228?:        string[];
     Tags229?:        string[];
     Tags23?:         string[];
-    Tags230?:        string[];
     Tags231?:        string[];
     Tags232?:        string[];
     Tags233?:        string[];
     Tags234?:        string[];
     Tags235?:        string[];
+    Tags237?:        string[];
+    Tags238?:        string[];
+    Tags239?:        string[];
+    Tags240?:        string[];
+    Tags242?:        string[];
+    Tags243?:        string[];
+    Tags244?:        string[];
+    Tags245?:        string[];
+    Tags247?:        string[];
+    Tags249?:        string[];
     Tags25?:         string[];
+    Tags250?:        string[];
+    Tags251?:        string[];
+    Tags252?:        string[];
+    Tags253?:        string[];
+    Tags254?:        string[];
+    Tags255?:        string[];
+    Tags256?:        string[];
+    Tags257?:        string[];
+    Tags258?:        string[];
+    Tags259?:        string[];
     Tags26?:         string[];
+    Tags260?:        string[];
+    Tags261?:        string[];
+    Tags262?:        string[];
+    Tags263?:        string[];
+    Tags264?:        string[];
     Tags27?:         string[];
     Tags28?:         string[];
     Tags29?:         string[];
@@ -1967,6 +2163,7 @@ export interface ManacostsPlayer {
 export interface Metaachievements {
     AchievePoints:                     number;
     AchievementCategory?:              string;
+    AchievementsID?:                   string;
     AttributeType?:                    string;
     "Categorical Progression"?:        string;
     Description:                       string;
@@ -2190,6 +2387,11 @@ export interface Perkbuckets {
     Perk259?:     string;
     Perk26?:      string;
     Perk260?:     string;
+    Perk261?:     string;
+    Perk262?:     string;
+    Perk263?:     string;
+    Perk264?:     string;
+    Perk265?:     string;
     Perk27?:      string;
     Perk28?:      string;
     Perk29?:      string;
@@ -2275,28 +2477,30 @@ export interface Perkbuckets {
     PerkType?:    string;
 }
 export interface Perks {
-    Affix?:                 string;
-    AppliedPrefix?:         string;
-    AppliedSuffix?:         string;
-    Category?:              string;
-    Channel:                number;
-    ConditionEvent:         string;
-    DayPhases?:             string;
-    Description?:           string;
-    DisplayName?:           string;
-    EquipAbility?:          string;
-    ExcludeFromTradingPost: boolean;
-    ExcludeItemClass?:      string[];
-    ExclusiveLabels?:       string[];
-    FishingWaterType?:      string;
-    GroupName?:             string;
-    IconPath:               string;
-    ItemClass:              string[];
-    ItemClassGSBonus?:      string;
-    PerkID:                 string;
-    PerkType:               string;
-    ScalingPerGearScore:    number;
-    Tier:                   number;
+    Affix?:                  string;
+    AppliedPrefix?:          string;
+    AppliedSuffix?:          string;
+    Category?:               string;
+    Channel:                 number;
+    ConditionEvent:          string;
+    DayPhases?:              string;
+    DeprecatedPerkId?:       string;
+    Description:             string;
+    DisplayName:             string;
+    EquipAbility?:           string[];
+    ExcludeFromTradingPost?: string;
+    ExcludeItemClass?:       string[];
+    ExclusiveLabels?:        string[];
+    FishingWaterType?:       string;
+    GroupName?:              string;
+    IconPath:                string;
+    ItemClass:               string[];
+    ItemClassGSBonus?:       string;
+    PerkID:                  string;
+    PerkType:                string;
+    ScalingPerGearScore:     number;
+    Tier:                    number;
+    WeaponTag?:              string;
 }
 export interface Statuseffect {
     ABABleed?:                           number;
@@ -2305,6 +2509,7 @@ export interface Statuseffect {
     ABADisease?:                         number;
     ABAFrostbite?:                       number;
     ABAPoison?:                          number;
+    ABSAcid?:                            number;
     ABSArcane:                           number;
     ABSCorruption:                       number;
     ABSFire:                             number;
@@ -2342,7 +2547,7 @@ export interface Statuseffect {
     BaseDuration:                        number;
     BlockMultipleEffectsFromSameSource?: boolean;
     CastSpell?:                          string;
-    CoreTempMod:                         number;
+    CoreTempMod?:                        number;
     CritChanceModifier?:                 number;
     DMGArcane?:                          number;
     DMGCorruption?:                      number;
@@ -2356,19 +2561,22 @@ export interface Statuseffect {
     DMGStrike?:                          number;
     DMGThrust?:                          number;
     DMGVitalsCategory?:                  number | string;
+    DMGVitalsCategory_Tooltip?:          number;
     DamageSkipsDeathsDoor?:              boolean;
     DamageType?:                         string;
-    DelayInitialTick?:                   boolean | number;
+    DelayInitialTick?:                   boolean | number | string;
     Description?:                        string;
     DisableAllPerks?:                    boolean;
     DisableAllPerksExceptionLabels?:     string;
+    DisableCastSpellDurability?:         boolean;
     DisableSupportContributionRewards?:  boolean;
     DisableTelemetry?:                   boolean | string;
     DisplayName?:                        string;
     DontApplyOnEndEffectOnRemove?:       boolean;
+    DontApplyOnEndEffectOnTimeOutDeath?: boolean;
     DontReplaceStack?:                   boolean;
-    Drink:                               number;
-    DrinkBurn:                           number;
+    Drink?:                              number;
+    DrinkBurn?:                          number;
     DurationMax?:                        number;
     DynamicModelScaleFactor?:            number;
     DynamicModelScaleRampTimeSecs?:      number;
@@ -2389,21 +2597,22 @@ export interface Statuseffect {
     EffectCategories?:                   string[];
     EffectDurationMods?:                 string;
     EffectPotencyMods?:                  string;
-    Encumbrance:                         number;
+    Encumbrance?:                        number;
     EquipAbility?:                       string;
     FactionReputationMod?:               number;
     FactionTokensMod?:                   number;
     FishSizeRollModifier?:               number;
     FishingLineStrength?:                number;
-    Food:                                number;
-    FoodBurn:                            number;
-    FromAlchemy:                         number;
-    FromSpell:                           number;
+    Food?:                               number;
+    FoodBurn?:                           number;
+    ForceReplicateToRemotes?:            boolean;
+    FromAlchemy?:                        number;
+    FromSpell?:                          number;
     FxScriptOff?:                        string;
     FxScriptOn?:                         string;
     GameEventId?:                        string;
     GlobalRollMod?:                      number;
-    GrantSanctuary:                      number;
+    GrantSanctuary?:                     number;
     HealMod:                             number;
     HealRewardGameEventId?:              string;
     HealRewardThreshold?:                number;
@@ -2413,14 +2622,15 @@ export interface Statuseffect {
     HealthMin?:                          number;
     HealthModifierBasePercent?:          number;
     HealthModifierDamageBased?:          number;
-    HealthModifierPercent:               number;
-    HealthRate:                          number;
+    HealthModifierPercent?:              number;
+    HealthRate?:                         number;
     HideHudDurationNumbers?:             boolean;
     HidesOtherStatusEffectIcons?:        boolean;
     HitCondition?:                       string;
     INSLogging?:                         number;
     INSMining?:                          number;
     IgnoreDiminishingReturns?:           boolean | string;
+    IgnoreFxScriptWhenPotencyIsZero?:    boolean;
     IgnoreInvulnerable?:                 boolean;
     InheritDuration?:                    boolean | number | string;
     InheritTotalDuration?:               boolean | string;
@@ -2446,18 +2656,18 @@ export interface Statuseffect {
     MULTLogging?:                        number;
     MULTMining?:                         number;
     MULTSkinning?:                       number;
-    Mana:                                number;
+    Mana?:                               number;
     ManaModifierDamageBased?:            number;
-    ManaRate:                            number;
+    ManaRate?:                           number;
     MaxGSArcana?:                        number;
     MaxGSArmoring?:                      number;
     MaxGSEngineering?:                   number;
     MaxGSJewelcrafting?:                 number;
     MaxGSWeaponsmithing?:                number;
-    MaxHealthMod:                        number;
+    MaxHealthMod?:                       number;
     MoveSpeedMod?:                       number;
     NoDodge:                             number;
-    NoHealthRegen:                       number;
+    NoHealthRegen:                       boolean | number;
     NoNav:                               number;
     NoRun:                               number;
     NoSprint:                            number;
@@ -2465,6 +2675,7 @@ export interface Statuseffect {
     "NotCombatAction "?:                 boolean;
     Notes?:                              string;
     Notification?:                       string;
+    OnDeathStatusEffect?:                string;
     OnEndStatusEffect?:                  string;
     OnHitAffixes?:                       string;
     OnStackStatusEffect?:                string;
@@ -2492,6 +2703,7 @@ export interface Statuseffect {
     ROLWeaving?:                         number;
     ROLWoodworking?:                     number;
     RankSorting?:                        number;
+    ReapplyAfterPersistenceReload?:      boolean;
     RefreshDuration?:                    boolean | string;
     RemoveOnDeath?:                      number | string;
     RemoveOnDeathsDoor?:                 number | string;
@@ -2512,17 +2724,21 @@ export interface Statuseffect {
     ShowTextInNameplates?:               boolean | string;
     ShowUiDamageNumbersOnHeal?:          boolean;
     Silenced:                            number;
+    SlotToFillWeaponDamageInfo?:         string;
+    SourceRuneChargeOnApply?:            number;
+    SourceRuneChargeOnHealthChangeOnly?: boolean;
+    SourceRuneChargeOnTick?:             number;
     SprintSpeedMod?:                     number;
-    StackDuration?:                      number | string;
+    StackDuration?:                      boolean | number | string;
     StackMax:                            number;
-    Stamina:                             number;
+    Stamina?:                            number;
     StaminaDamageModifier?:              number;
     StaminaRate:                         number;
     StatusID:                            string;
     StopOnHitCount?:                     number;
     Stunned:                             number;
     TargetOwnsSpell?:                    boolean;
-    TempMod:                             number;
+    TempMod?:                            number;
     TerritoryStandingMod?:               number;
     TickCondition?:                      string;
     TickRate:                            number;
@@ -2553,9 +2769,10 @@ export interface Spelltable {
     AbilityId?:                                      string;
     AmmoSlot?:                                       string;
     AttachToOwner?:                                  boolean;
+    BaseDamage?:                                     number;
     BeamEffect?:                                     string;
     CastDistance:                                    number;
-    CastHeight:                                      number;
+    CastHeight?:                                     number;
     CastRadius?:                                     number;
     CastingTypes?:                                   string;
     ChainDelayDuration?:                             number;
@@ -2567,8 +2784,8 @@ export interface Spelltable {
     CharRelRotOffsetY?:                              number;
     CharRelRotOffsetZ?:                              number;
     CheckObstructions?:                              boolean;
-    ClearOnEnd:                                      boolean;
-    ClearOnExit:                                     boolean;
+    ClearOnEnd?:                                     boolean;
+    ClearOnExit?:                                    boolean;
     ConeAngle?:                                      number;
     ConeWidth?:                                      number;
     DamageTable?:                                    string;
@@ -2617,14 +2834,15 @@ export interface Spelltable {
     ShapeTypes?:                                     string;
     Siphon?:                                         boolean;
     SpawnAngle?:                                     number;
-    SpawnRate?:                                      number;
+    SpawnBeamCasterJoint?:                           string;
+    SpawnRate?:                                      number | string;
     SpawnSecondaryOnCollision?:                      boolean;
     SpawnSecondaryOnElapsed?:                        boolean;
     SpawnSecondaryOnPassthrough?:                    boolean;
     SpellID:                                         string;
     SpellPrefabPath?:                                string;
     SpellTypes?:                                     string;
-    StatusEffectDurations?:                          string;
+    StatusEffectDurations?:                          number | string;
     StatusEffects?:                                  string;
     StickWhenAttached?:                              boolean;
     StoreOffsetWhenStuckToGDE?:                      boolean;
@@ -2635,6 +2853,7 @@ export interface Spelltable {
     UseCameraTargetLock?:                            boolean;
     UseChainCasterPaperdoll?:                        boolean;
     UseStatusEffectDuration:                         boolean;
+    WeaponSlotOverride?:                             string;
 }
 export interface StaminacostsPlayer {
     Category?:   string;
@@ -2670,6 +2889,8 @@ export interface Territorydefinitions {
     AudioState?:                      string;
     BaseStructureLimit:               number;
     CanPlaceCamp:                     boolean;
+    EntryAchievementId?:              string;
+    EntryStatusEffectId?:             string;
     FactionControlBuff?:              string;
     FactionControlTerritoryBuffs?:    string;
     IsPOI:                            boolean;
@@ -2677,6 +2898,8 @@ export interface Territorydefinitions {
     LootTags?:                        string[];
     MaxStructureLimit:                number;
     MaximumLevel:                     number;
+    MinCompanyAttackers:              number;
+    MinCompanyDefenders:              number;
     NameLocalizationKey?:             string;
     ObjectiveID?:                     string;
     PermanentOwnershipAchievementId?: string;
@@ -2685,14 +2908,28 @@ export interface Territorydefinitions {
     TerritoryID:                      number;
     TerritoryScore:                   number;
     TerritoryStandingXpModifier:      number;
+    UpkeepModifier:                   number;
 }
 export interface Territorygovernance {
     CapModifier:               number;
+    EarningsDistributionTID10: number;
+    EarningsDistributionTID11: number;
+    EarningsDistributionTID12: number;
+    EarningsDistributionTID13: number;
+    EarningsDistributionTID15: number;
+    EarningsDistributionTID16: number;
+    EarningsDistributionTID2:  number;
+    EarningsDistributionTID4:  number;
+    EarningsDistributionTID5:  number;
+    EarningsDistributionTID6:  number;
+    EarningsDistributionTID8:  number;
+    EarningsDistributionTID9:  number;
     IntervalEarningsCap:       number;
     IntervalStipend:           number;
     Level:                     number;
     LevelStipend:              number;
     NumberOfUpgradesRegressed: number;
+    TotalDistributionCheck:    number;
     TradingPostLevel:          number;
     UpkeepCost:                number;
     WardecCost:                number;
@@ -3041,6 +3278,7 @@ export interface Vitals {
     ABSStandard:                              number;
     ABSStrike:                                number;
     ABSThrust:                                number;
+    AFAFrostbite?:                            string;
     BaseDamageOverride?:                      string;
     BlockDamageMitigation:                    number;
     BlockStaminaCost:                         number;
@@ -3102,6 +3340,7 @@ export interface Vitals {
     HealthMin:                                number;
     HealthMod:                                number;
     HealthOverridePercentSpellOwnerMaxHealth: number;
+    HealthPercentForLootContributionOverride: number;
     HealthRegenCappedBy:                      number;
     HealthRegenThresholds?:                   string;
     HealthTickDelay:                          number;
@@ -3175,6 +3414,7 @@ export interface Vitalscategories {
     IsNamed:                    boolean;
     LocStringGenerationHelper?: string;
     LocationHint?:              string;
+    LootDropChanceOverride:     number;
     MtlOverride?:               string;
     VitalsCategoryID:           string;
 }
@@ -3352,9 +3592,10 @@ export interface Promotionmutations {
     TextColor:           string;
 }
 export interface PoiDefinition {
+    AudioBank?:                 string;
     AudioGroup?:                string;
     AudioState?:                string;
-    CanPlaceCamp:               boolean;
+    CanPlaceCamp:               boolean | string;
     ChartedAchievement?:        string;
     CompassIcon?:               string;
     Containers?:                number;
@@ -3365,7 +3606,7 @@ export interface PoiDefinition {
     DiscoveryRadius:            number;
     EventId?:                   string;
     GameMode?:                  string;
-    GroupSize?:                 number;
+    GroupSize?:                 number | string;
     IsChartable:                boolean;
     IsCollapsible?:             boolean;
     IsDiscoverable:             boolean;
@@ -3382,212 +3623,225 @@ export interface PoiDefinition {
     TerritoryID:                number;
     TooltipBackground?:         string;
     UnchartedIcon?:             string;
-    VitalsCategory?:            string;
+    VitalsCategory?:            string[];
 }
 export interface Ability {
-    AbilityCooldownComparisonType?:       string;
-    AbilityID:                            string;
-    AbilityIdToCheckForTrackedHits?:      string;
-    AbilityList?:                         string;
-    AbilityOnCooldownOptions?:            string;
-    AbilityTrigger?:                      string;
-    ActivationCooldown?:                  number;
-    AfterAction?:                         string;
-    AllowSelfDamageForHitEvents?:         boolean;
-    ArmorPenetration?:                    number;
-    AttachedTargetSpellIds?:              string;
-    AttackType?:                          string;
-    AttackerVitalsCategory?:              string;
-    Azoth?:                               number;
-    BaseDamage?:                          number;
-    BaseDamageReduction?:                 number;
-    BlockDamage?:                         number;
-    BlockDamageReduction?:                number;
-    CDRImmediatelyOptions?:               string;
-    CanBeUnapplied?:                      boolean;
-    CastSpell?:                           string;
-    CheckStatusEffectsOnTargetOwned?:     boolean;
-    ConsumableHealMod?:                   number;
-    ConsumeTargetStatusEffectMult?:       number;
-    CooldownId?:                          string;
-    CooldownTimer?:                       number;
-    CritChance?:                          number;
-    CritDamage?:                          number;
-    CritDamageReduction?:                 number;
-    DamageCategory?:                      string;
-    DamageIsMelee?:                       boolean;
-    DamageIsRanged?:                      boolean;
-    DamageTableRow?:                      string;
-    DamageTableRowOverride?:              string;
-    DamageTableStatusEffectOverride?:     string;
-    DamageTypes?:                         string;
-    Description?:                         string;
-    DisableApplyPerStatusEffectStack?:    boolean;
-    DisableCastSpellDurability?:          boolean;
-    DisableConsecutivePotency?:           boolean;
-    DisplayName?:                         string;
-    DistComparisonType?:                  string;
-    DistFromDefender?:                    number;
-    DmgPctToHealth?:                      number;
-    DoNotUnequipSelfAppliedSE?:           boolean;
-    DontHaveStatusEffect?:                string;
-    Duration?:                            number;
-    ElementalArmor?:                      number;
-    EnableTaunt?:                         boolean;
-    EquipLoadCategory?:                   string;
-    EquipWhenUnsheathed?:                 boolean | number;
-    ExcludeFromGameModes?:                string;
-    FastTravelAzothCostMod?:              number;
-    FastTravelInnCooldownMod?:            number;
-    ForceStatusEffectDamageTableRow?:     boolean;
-    GatheringTradeskill?:                 string;
-    GiveAzothPercentChance?:              number;
-    HasGritActive?:                       boolean;
-    HeadshotArmorPenetration?:            number;
-    HeadshotDamage?:                      number;
-    HealScalingValueMultiplier?:          number;
-    HitFromBehindArmorPenetration?:       number;
-    HitFromBehindDamage?:                 number;
-    Icon?:                                string;
-    IgnoreResetConsecutiveOnDeath?:       boolean;
-    InAction?:                            string;
-    InActionTime?:                        number;
-    IsActiveAbility?:                     boolean;
-    IsGlobalAbility?:                     boolean;
-    IsInCombatState?:                     boolean;
-    IsNonCombatAbility?:                  boolean;
-    IsNotConsumableIds?:                  string;
-    IsNotInCombatState?:                  boolean;
-    IsStackableAbility?:                  boolean;
-    Knockback?:                           number;
-    LinearlyScaleToDistance?:             number;
-    LoadedAmmoCount?:                     number;
-    LoadedAmmoCountComparisonType?:       string;
-    Mana?:                                number;
-    ManaCostList?:                        string;
-    ManaCostMult?:                        number;
-    MaxConsecutiveHits?:                  number;
-    MaxHealth?:                           number;
-    MaxHitCountMultiplier?:               number;
-    MaxMana?:                             number;
-    MaxTrackedHitCounts?:                 number;
-    ModifySelfApplyStatusEffectDuration?: number;
-    MyComparisonType?:                    string;
-    MyHealthPercent?:                     number;
-    MyManaComparisonType?:                string;
-    MyManaPercent?:                       number;
-    MyStaminaComparisonType?:             string;
-    MyStaminaPercent?:                    number;
-    NumAroundComparisonType?:             string;
-    NumAroundMe?:                         number;
-    NumConsecutiveHits?:                  number;
-    NumFreeCooldownsPerUse?:              number;
-    NumStatusEffectsToRemove?:            number;
-    NumStatusEffectsToTransfer?:          number;
-    NumSuccessfulHits?:                   number;
-    NumTargetStatusEffectsToRemove?:      number;
-    NumberOfHitsComparisonType?:          string;
-    NumberOfTrackedHits?:                 number;
-    OnAttachedSpellTargetDied?:           boolean;
-    OnBlockBreak:                         boolean;
-    OnBlockedHit:                         boolean;
-    OnBlockedHitTaken?:                   boolean;
-    OnContributedKill?:                   boolean;
-    OnCrit:                               boolean;
-    OnCritTaken?:                         boolean;
-    OnDeath:                              boolean;
-    OnDeathsDoor:                         boolean;
-    OnEquipStatusEffect?:                 string;
-    OnEventPassiveConditionsPass?:        boolean;
-    OnExecuted:                           boolean;
-    OnFatalDamageTaken?:                  boolean;
-    OnGatheringComplete?:                 boolean;
-    OnHasDied?:                           boolean;
-    OnHeadShot:                           boolean;
-    OnHealed?:                            boolean;
-    OnHealthChanged?:                     boolean;
-    OnHit:                                boolean;
-    OnHitBehind?:                         boolean;
-    OnHitTaken:                           boolean;
-    OnHitTakenWhileInvulnerable?:         boolean;
-    OnKill:                               boolean;
-    OnLegShot:                            boolean;
-    OnProjPassedThrough?:                 boolean;
-    OnSelfDamage?:                        boolean;
-    OnStatusEffectApplied?:               boolean;
-    OnTargetBlockBreak:                   boolean;
-    OnTargetSet?:                         boolean;
-    OnTargetStatusEffectRemoved?:         boolean;
-    OnUsedConsumable?:                    boolean;
-    OnWeaponSwap?:                        boolean;
-    OnlyChangeOwnedStatusEffects?:        boolean;
-    OtherApplyStatusEffect?:              string;
-    PerStatusEffectOnTarget?:             boolean;
-    PerStatusEffectOnTargetMax?:          number;
-    PhysicalArmor?:                       number;
-    PhysicalArmorMaxHealthMod?:           number;
-    PowerLevelOverride?:                  number;
-    RangedAttackName?:                    string;
-    RangedAttackNameOverride?:            string;
-    RefundAmmoPercentChance?:             number;
-    RefundConsumablePercentChance?:       number;
-    RemoteDamageTableRow?:                string;
-    RemoveStatusEffects?:                 string;
-    RemoveTargetStatusEffectCats?:        string;
-    RemoveTargetStatusEffectsList?:       string;
-    RepairDustYieldMod?:                  number;
-    RequireReaction?:                     boolean | string;
-    RequiredAbilityId?:                   string;
-    RequiredEquippedAbilityId?:           string;
-    ResetConsecutiveOnSuccess?:           boolean | string;
-    ResetConsumableCooldowns?:            string;
-    ResetCooldownTimers?:                 string;
-    SelfApplyStatusEffect?:               string;
-    SelfApplyStatusEffectDurations?:      number;
-    SetHealthOnFatalDamageTaken?:         number;
-    SetMannequinTag?:                     string;
-    SetMannequinTagStatus?:               boolean;
-    Sound?:                               string;
-    StaggerDamage?:                       number;
-    StaggerDamageReduction?:              number;
-    Stamina?:                             number;
-    StaminaCostFlatMod?:                  number;
-    StaminaCostList?:                     string;
-    StatusEffect?:                        string;
-    StatusEffectBeingApplied?:            string;
-    StatusEffectCategories?:              string;
-    StatusEffectCategoriesList?:          string;
-    StatusEffectCategoryToTransfer?:      string;
-    StatusEffectComparison?:              string;
-    StatusEffectDamageTableRowOverride?:  string;
-    StatusEffectDurationCats?:            string;
-    StatusEffectDurationMult?:            number;
-    StatusEffectDurationReduction?:       number;
-    StatusEffectStackSize?:               number;
-    StatusEffectsList?:                   string;
-    TargetCollisionFilters?:              string;
-    TargetComparisonType?:                string;
-    TargetHasGritActive?:                 boolean;
-    TargetHealthPercent?:                 number;
-    TargetMarker?:                        string;
-    TargetStatusEffect?:                  string;
-    TargetStatusEffectCategory?:          string;
-    TargetStatusEffectComparison?:        string;
-    TargetStatusEffectDurationCats?:      string;
-    TargetStatusEffectDurationList?:      string;
-    TargetStatusEffectDurationMod?:       number;
-    TargetStatusEffectDurationMult?:      number;
-    TargetStatusEffectStackSize?:         number;
-    TargetVitalsCategory?:                string;
-    ThreatDamage?:                        number;
-    ToolDurabilityLossMod?:               number;
-    TrackHitCount?:                       boolean;
-    TreeColumnPosition?:                  number;
-    TreeId?:                              number;
-    TreeRowPosition?:                     number;
-    UICategory?:                          string;
-    UISpellForManaCheck?:                 string;
-    UseMinAttackInfoForSelfAppliedSE?:    boolean;
-    WeaponAccuracy?:                      number;
-    WeaponTag?:                           string;
+    AbilityCooldownComparisonType?:           string;
+    AbilityID:                                string;
+    AbilityIdToCheckForTrackedHits?:          string;
+    AbilityList?:                             string;
+    AbilityOnCooldownOptions?:                string;
+    AbilityTrigger?:                          string;
+    ActivationCooldown?:                      number;
+    AfterAction?:                             string;
+    AllowSelfDamageForHitEvents?:             boolean;
+    ArmorPenetration?:                        number;
+    AttachedTargetSpellIds?:                  string;
+    AttackType?:                              string;
+    AttackerVitalsCategory?:                  string;
+    Azoth?:                                   number;
+    BaseDamage?:                              number;
+    BaseDamageReduction?:                     number;
+    BlockDamage?:                             number;
+    BlockDamageReduction?:                    number;
+    CDRImmediatelyOptions?:                   string;
+    CanBeUnapplied?:                          boolean;
+    CanBlockRangedOverride?:                  boolean;
+    CastSpell?:                               string;
+    CheckStatusEffectsOnTargetOwned?:         boolean;
+    ConsumableHealMod?:                       number;
+    ConsumeTargetStatusEffectMult?:           number;
+    CooldownId?:                              string;
+    CooldownTimer?:                           number;
+    CritChance?:                              number;
+    CritDamage?:                              number;
+    CritDamageReduction?:                     number;
+    DamageCategory?:                          string;
+    DamageIsMelee?:                           boolean;
+    DamageIsRanged?:                          boolean;
+    DamageTableRow?:                          string;
+    DamageTableRowOverride?:                  string;
+    DamageTableStatusEffectOverride?:         string;
+    DamageTypes?:                             string;
+    Description?:                             string;
+    DisableApplyPerStatusEffectStack?:        boolean;
+    DisableCastSpellDurability?:              boolean;
+    DisableConsecutivePotency?:               boolean;
+    DisplayName?:                             string;
+    DistComparisonType?:                      string;
+    DistFromDefender?:                        number;
+    DmgPctToHealth?:                          number;
+    DoNotUnequipSelfAppliedSE?:               boolean;
+    DontHaveStatusEffect?:                    string;
+    Duration?:                                number;
+    ElementalArmor?:                          number;
+    EnableTaunt?:                             boolean;
+    EquipLoadCategory?:                       string;
+    EquipWhenUnsheathed?:                     boolean | number;
+    ExcludeFromGameModes?:                    string;
+    FastTravelAzothCostMod?:                  number;
+    FastTravelInnCooldownMod?:                number;
+    ForceStatusEffectDamageTableRow?:         boolean;
+    GatheringTradeskill?:                     string;
+    GiveAzothPercentChance?:                  number;
+    HasGritActive?:                           boolean;
+    HeadshotArmorPenetration?:                number;
+    HeadshotDamage?:                          number;
+    HealScalingValueMultiplier?:              number;
+    HitFromBehindArmorPenetration?:           number;
+    HitFromBehindDamage?:                     number;
+    Icon?:                                    string;
+    IgnoreDisabledAttackTypes?:               string;
+    IgnoreResetConsecutiveOnDeath?:           boolean;
+    InAction?:                                string;
+    InActionTime?:                            number;
+    IsActiveAbility?:                         boolean;
+    IsGlobalAbility?:                         boolean;
+    IsInCombatState?:                         boolean;
+    IsNonCombatAbility?:                      boolean;
+    IsNotConsumableIds?:                      string;
+    IsNotInCombatState?:                      boolean;
+    IsStackableAbility?:                      boolean;
+    Knockback?:                               number;
+    LinearlyScaleToDistance?:                 number;
+    LoadedAmmoCount?:                         number;
+    LoadedAmmoCountComparisonType?:           string;
+    Mana?:                                    number;
+    ManaCostList?:                            string;
+    ManaCostMult?:                            number;
+    MaxConsecutiveHits?:                      number;
+    MaxHealth?:                               number;
+    MaxHitCountMultiplier?:                   number;
+    MaxMana?:                                 number;
+    MaxNumAroundMe?:                          number;
+    MaxTrackedHitCounts?:                     number;
+    ModifySelfApplyStatusEffectDuration?:     number;
+    MyComparisonType?:                        string;
+    MyHealthPercent?:                         number;
+    MyManaComparisonType?:                    string;
+    MyManaPercent?:                           number;
+    MyMarker?:                                string;
+    MyStaminaComparisonType?:                 string;
+    MyStaminaPercent?:                        number;
+    NumAroundComparisonType?:                 string;
+    NumAroundMe?:                             number;
+    NumConsecutiveHits?:                      number;
+    NumFreeCooldownsPerUse?:                  number;
+    NumStatusEffectStacksToRemove?:           number;
+    NumStatusEffectsToRemove?:                number;
+    NumStatusEffectsToTransfer?:              number;
+    NumSuccessfulHits?:                       number;
+    NumTargetStatusEffectsToRemove?:          number;
+    NumberOfHitsComparisonType?:              string;
+    NumberOfTrackedHits?:                     number;
+    OnAttachedSpellTargetDied?:               boolean;
+    OnBlockBreak:                             boolean;
+    OnBlockedHit:                             boolean;
+    OnBlockedHitTaken?:                       boolean;
+    OnContributedKill?:                       boolean;
+    OnCrit:                                   boolean;
+    OnCritTaken?:                             boolean;
+    OnDeath:                                  boolean;
+    OnDeathsDoor:                             boolean;
+    OnEquipStatusEffect?:                     string;
+    OnEventConditionalActivationChance?:      boolean;
+    OnEventPassiveConditionsPass?:            boolean;
+    OnExecuted:                               boolean;
+    OnFatalDamageTaken?:                      boolean;
+    OnGatheringComplete?:                     boolean;
+    OnHasDied?:                               boolean;
+    OnHeadShot:                               boolean;
+    OnHealed?:                                boolean;
+    OnHealthChanged?:                         boolean;
+    OnHit:                                    boolean;
+    OnHitBehind?:                             boolean;
+    OnHitTaken:                               boolean;
+    OnHitTakenWhileInvulnerable?:             boolean;
+    OnInActionLongEnough?:                    boolean;
+    OnKill:                                   boolean;
+    OnLegShot:                                boolean;
+    OnProjPassedThrough?:                     boolean;
+    OnSelfDamage?:                            boolean;
+    OnStatusEffectApplied?:                   boolean;
+    OnTargetBlockBreak:                       boolean;
+    OnTargetSet?:                             boolean;
+    OnTargetStatusEffectRemoved?:             boolean;
+    OnUsedConsumable?:                        boolean;
+    OnWeaponSwap?:                            boolean;
+    OnlyChangeOwnedStatusEffects?:            boolean;
+    OtherApplyStatusEffect?:                  string;
+    PerStatusEffectOnSelf?:                   boolean;
+    PerStatusEffectOnSelfMax?:                number;
+    PerStatusEffectOnTarget?:                 boolean;
+    PerStatusEffectOnTargetMax?:              number;
+    PhysicalArmor?:                           number;
+    PhysicalArmorMaxHealthMod?:               number;
+    PowerLevelOverride?:                      number;
+    RangedAttackName?:                        string;
+    RangedAttackNameOverride?:                string;
+    RefundAmmoPercentChance?:                 number;
+    RefundConsumablePercentChance?:           number;
+    RemoteDamageTableRow?:                    string;
+    RemoveStatusEffects?:                     string;
+    RemoveTargetStatusEffectCats?:            string;
+    RemoveTargetStatusEffectsList?:           string;
+    RepairDustYieldMod?:                      number;
+    RequireReaction?:                         boolean | string;
+    RequiredAbilityId?:                       string;
+    RequiredEquippedAbilityId?:               string;
+    ResetConsecutiveOnSuccess?:               boolean | number;
+    ResetConsumableCooldowns?:                string;
+    ResetCooldownTimers?:                     string;
+    ResetTrackedOnSuccess?:                   boolean;
+    SelfApplyStatusEffect?:                   string;
+    SelfApplyStatusEffectDurations?:          number;
+    SetHealthOnFatalDamageTaken?:             number;
+    SetMannequinTag?:                         string;
+    SetMannequinTagStatus?:                   boolean;
+    Sound?:                                   string;
+    StaggerDamage?:                           number;
+    StaggerDamageReduction?:                  number;
+    Stamina?:                                 number;
+    StaminaCostFlatMod?:                      number;
+    StaminaCostList?:                         string;
+    StatusEffect?:                            string;
+    StatusEffectBeingApplied?:                string;
+    StatusEffectCategories?:                  string;
+    StatusEffectCategoriesList?:              string;
+    StatusEffectCategoryToTransfer?:          string;
+    StatusEffectComparison?:                  string;
+    StatusEffectDamageTableIdForRowOverride?: string;
+    StatusEffectDamageTableRowOverride?:      string;
+    StatusEffectDurationCats?:                string;
+    StatusEffectDurationMod?:                 number;
+    StatusEffectDurationMult?:                number;
+    StatusEffectDurationReduction?:           number;
+    StatusEffectStackSize?:                   number;
+    StatusEffectsList?:                       string;
+    TargetCollisionFilters?:                  string;
+    TargetComparisonType?:                    string;
+    TargetHasGritActive?:                     boolean;
+    TargetHealthPercent?:                     number;
+    TargetMarker?:                            string;
+    TargetStatusEffect?:                      string;
+    TargetStatusEffectCategory?:              string;
+    TargetStatusEffectComparison?:            string;
+    TargetStatusEffectDurationCats?:          string;
+    TargetStatusEffectDurationList?:          string;
+    TargetStatusEffectDurationMod?:           number;
+    TargetStatusEffectDurationMult?:          number;
+    TargetStatusEffectStackSize?:             number;
+    TargetVitalsCategory?:                    string;
+    ThreatDamage?:                            number;
+    ToolDurabilityLossMod?:                   number;
+    TrackHitCount?:                           boolean;
+    TreeColumnPosition?:                      number;
+    TreeId?:                                  number;
+    TreeRowPosition?:                         number;
+    UICategory?:                              string;
+    UISpellForManaCheck?:                     string;
+    UnlockDefault?:                           boolean;
+    UseMinAttackInfoForSelfAppliedSE?:        boolean;
+    WeaponAccuracy?:                          number;
+    WeaponTag?:                               string;
 }
\ No newline at end of file
diff --git a/apps/web/styles/main.scss b/apps/web/styles/main.scss
index 9595080a..4544bc2d 100644
--- a/apps/web/styles/main.scss
+++ b/apps/web/styles/main.scss
@@ -1,8 +1,6 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-
+@import 'vendor/tailwind.scss';
 @import 'vendor/ag-grid.scss';
+@import 'vendor/cdk.scss';
 @import 'mixins/nw-icon.scss';
 @import 'mixins/layout.scss';
 
@@ -20,7 +18,7 @@
 
 html,
 body {
-  min-width: 1024px;
+  //min-width: 1024px;
   font-weight: 500;
 }
 body {
@@ -34,6 +32,9 @@ body {
   background-size: cover;
   background-attachment: fixed;
 }
+.cdk-global-scrollblock {
+  overflow: hidden;
+}
 
 router-outlet {
   display: none;
@@ -57,20 +58,23 @@ img.error {
   display: none;
 }
 
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: rgba(155, 155, 155, 0.5);
-  border-radius: 20px;
-  border: transparent;
+
+.is-electron, .is-web {
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(155, 155, 155, 0.5);
+    border-radius: 20px;
+    border: transparent;
+  }
 }
 
 .multiline-cell {
@@ -78,7 +82,16 @@ img.error {
   white-space: normal !important;
   word-break: initial !important;
 }
+/* For Webkit-based browsers (Chrome, Safari and Opera) */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
 
+/* For IE, Edge and Firefox */
+.scrollbar-hide {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
 picture.nw-icon {
   @include nwPictureIcon();
 }
diff --git a/apps/web/styles/mixins/layout.scss b/apps/web/styles/mixins/layout.scss
index bbf3ec13..6249eb5a 100644
--- a/apps/web/styles/mixins/layout.scss
+++ b/apps/web/styles/mixins/layout.scss
@@ -4,7 +4,40 @@
   overflow: hidden;
 }
 
-.layout-column {
+.layout-gap {
+  @apply gap-2 lg:gap-4;
+}
+
+.layout-pad {
+  @apply p-2 lg:p-4;
+}
+
+.layout-pad-x {
+  @apply px-2 lg:px-4;
+}
+
+.layout-pad-y {
+  @apply py-2 lg:py-4;
+}
+
+.layout-pad-t {
+  @apply pt-2 lg:pt-4;
+}
+
+.layout-pad-b {
+  @apply pb-2 lg:pb-4;
+}
+
+.layout-pad-l {
+  @apply pl-2 lg:pl-4;
+}
+
+.layout-pad-r {
+  @apply pr-2 lg:pr-4;
+}
+
+.layout-col,
+.layout-col {
   flex: 1;
   display: flex;
   flex-direction: column;
diff --git a/apps/web/styles/mixins/nw-icon.scss b/apps/web/styles/mixins/nw-icon.scss
index fb286b64..93cb35e8 100644
--- a/apps/web/styles/mixins/nw-icon.scss
+++ b/apps/web/styles/mixins/nw-icon.scss
@@ -1,120 +1,99 @@
 $nw-rarity-square-bg: (
-  "0": url('^assets/icons/itembgsquare0.png'),
-  "1": url('^assets/icons/itembgsquare1.png'),
-  "2": url('^assets/icons/itembgsquare2.png'),
-  "3": url('^assets/icons/itembgsquare3.png'),
-  "4": url('^assets/icons/itembgsquare4.png'),
+  '0': url('^assets/icons/itembgsquare0.png'),
+  '1': url('^assets/icons/itembgsquare1.png'),
+  '2': url('^assets/icons/itembgsquare2.png'),
+  '3': url('^assets/icons/itembgsquare3.png'),
+  '4': url('^assets/icons/itembgsquare4.png'),
 );
 $nw-rarity-square-fg: (
-  "0": url('^assets/icons/itemraritybgsquare0.png'),
-  "1": url('^assets/icons/itemraritybgsquare1.png'),
-  "2": url('^assets/icons/itemraritybgsquare2.png'),
-  "3": url('^assets/icons/itemraritybgsquare3.png'),
-  "4": url('^assets/icons/itemraritybgsquare4.png'),
+  '0': url('^assets/icons/itemraritybgsquare0.png'),
+  '1': url('^assets/icons/itemraritybgsquare1.png'),
+  '2': url('^assets/icons/itemraritybgsquare2.png'),
+  '3': url('^assets/icons/itemraritybgsquare3.png'),
+  '4': url('^assets/icons/itemraritybgsquare4.png'),
 );
 $nw-rarity-large-bg: (
-  "0": url('^assets/icons/itembglarge0.png'),
-  "1": url('^assets/icons/itembglarge1.png'),
-  "2": url('^assets/icons/itembglarge2.png'),
-  "3": url('^assets/icons/itembglarge3.png'),
-  "4": url('^assets/icons/itembglarge4.png'),
+  '0': url('^assets/icons/itembglarge0.png'),
+  '1': url('^assets/icons/itembglarge1.png'),
+  '2': url('^assets/icons/itembglarge2.png'),
+  '3': url('^assets/icons/itembglarge3.png'),
+  '4': url('^assets/icons/itembglarge4.png'),
 );
 $nw-rarity-large-fg: (
-  "0": url('^assets/icons/itemraritybglarge0.png'),
-  "1": url('^assets/icons/itemraritybglarge1.png'),
-  "2": url('^assets/icons/itemraritybglarge2.png'),
-  "3": url('^assets/icons/itemraritybglarge3.png'),
-  "4": url('^assets/icons/itemraritybglarge4.png'),
+  '0': url('^assets/icons/itemraritybglarge0.png'),
+  '1': url('^assets/icons/itemraritybglarge1.png'),
+  '2': url('^assets/icons/itemraritybglarge2.png'),
+  '3': url('^assets/icons/itemraritybglarge3.png'),
+  '4': url('^assets/icons/itemraritybglarge4.png'),
 );
 $nw-rarity-circle-bg: (
-  "0": url('^assets/icons/itembgcircle0.png'),
-  "1": url('^assets/icons/itembgcircle1.png'),
-  "2": url('^assets/icons/itembgcircle2.png'),
-  "3": url('^assets/icons/itembgcircle3.png'),
-  "4": url('^assets/icons/itembgcircle4.png'),
+  '0': url('^assets/icons/itembgcircle0.png'),
+  '1': url('^assets/icons/itembgcircle1.png'),
+  '2': url('^assets/icons/itembgcircle2.png'),
+  '3': url('^assets/icons/itembgcircle3.png'),
+  '4': url('^assets/icons/itembgcircle4.png'),
 );
 $nw-rarity-circle-fg: (
-  "0": url('^assets/icons/itemraritybgcircle0.png'),
-  "1": url('^assets/icons/itemraritybgcircle1.png'),
-  "2": url('^assets/icons/itemraritybgcircle2.png'),
-  "3": url('^assets/icons/itemraritybgcircle3.png'),
-  "4": url('^assets/icons/itemraritybgcircle4.png'),
+  '0': url('^assets/icons/itemraritybgcircle0.png'),
+  '1': url('^assets/icons/itemraritybgcircle1.png'),
+  '2': url('^assets/icons/itemraritybgcircle2.png'),
+  '3': url('^assets/icons/itemraritybgcircle3.png'),
+  '4': url('^assets/icons/itemraritybgcircle4.png'),
 );
 $nw-rarity-header-bg: (
-  "0": url('^assets/icons/tooltip_header_bg_0.png'),
-  "1": url('^assets/icons/tooltip_header_bg_1.png'),
-  "2": url('^assets/icons/tooltip_header_bg_2.png'),
-  "3": url('^assets/icons/tooltip_header_bg_3.png'),
-  "4": url('^assets/icons/tooltip_header_bg_4.png'),
+  '0': url('^assets/icons/tooltip_header_bg_0.png'),
+  '1': url('^assets/icons/tooltip_header_bg_1.png'),
+  '2': url('^assets/icons/tooltip_header_bg_2.png'),
+  '3': url('^assets/icons/tooltip_header_bg_3.png'),
+  '4': url('^assets/icons/tooltip_header_bg_4.png'),
 );
 $nw-rarity-header-fg: (
-  "0": url('^assets/icons/tooltip_itemframe_rarity_0.png'),
-  "1": url('^assets/icons/tooltip_itemframe_rarity_1.png'),
-  "2": url('^assets/icons/tooltip_itemframe_rarity_2.png'),
-  "3": url('^assets/icons/tooltip_itemframe_rarity_3.png'),
-  "4": url('^assets/icons/tooltip_itemframe_rarity_4.png'),
+  '0': url('^assets/icons/tooltip_itemframe_rarity_0.png'),
+  '1': url('^assets/icons/tooltip_itemframe_rarity_1.png'),
+  '2': url('^assets/icons/tooltip_itemframe_rarity_2.png'),
+  '3': url('^assets/icons/tooltip_itemframe_rarity_3.png'),
+  '4': url('^assets/icons/tooltip_itemframe_rarity_4.png'),
 );
 $nw-rarity-color: (
-  "0": rgb(200, 200, 200),
-  "1": rgb(7, 192, 47),
-  "2": rgb(0, 203, 233),
-  "3": rgb(255, 22, 247),
-  "4": rgb(247, 162, 45),
+  '0': rgb(200, 200, 200),
+  '1': rgb(7, 192, 47),
+  '2': rgb(0, 203, 233),
+  '3': rgb(255, 22, 247),
+  '4': rgb(247, 162, 45),
 );
 
 @mixin bgRarity($bg, $fg) {
   position: relative;
   background-size: contain;
-  &::before {
-    background-size: contain;
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    content: '';
-    z-index: 1;
-  }
+
+  border: 1px solid transparent;
+  border-image-width: 2px;
+  border-image-repeat: round;
+  border-image-slice: 2;
 
   &.bg-rarity-0 {
-    background-image: map-get($bg, "0");
-    &::before {
-      background-image: map-get($fg, "0");
-      display: block;
-    }
+    border-image-source: map-get($bg, '0');
+    background-image: map-get($fg, '0');
   }
 
   &.bg-rarity-1 {
-    background-image: map-get($bg, "1");
-    &::before {
-      background-image: map-get($fg, "1");
-      display: block;
-    }
+    border-image-source: map-get($bg, '1');
+    background-image: map-get($fg, '1');
   }
 
   &.bg-rarity-2 {
-    background-image: map-get($bg, "2");
-    &::before {
-      background-image: map-get($fg, "2");
-      display: block;
-    }
+    border-image-source: map-get($bg, '2');
+    background-image: map-get($fg, '2');
   }
 
   &.bg-rarity-3 {
-    background-image: map-get($bg, "3");
-    &::before {
-      background-image: map-get($fg, "3");
-      display: block;
-    }
+    border-image-source: map-get($bg, '3');
+    background-image: map-get($fg, '3');
   }
 
   &.bg-rarity-4 {
-    background-image: map-get($bg, "4");
-    &::before {
-      background-image: map-get($fg, "4");
-      display: block;
-    }
+    border-image-source: map-get($bg, '4');
+    background-image: map-get($fg, '4');
   }
 }
 
@@ -126,12 +105,10 @@ $nw-rarity-color: (
   @include bgRarity($nw-rarity-large-bg, $nw-rarity-large-fg);
 }
 
-
 @mixin bgRarityCircle() {
   @include bgRarity($nw-rarity-circle-bg, $nw-rarity-circle-fg);
 }
 
-
 @mixin nwPictureIcon() {
   @include bgRaritySquare();
 
@@ -141,9 +118,8 @@ $nw-rarity-color: (
   align-items: center;
   img {
     object-fit: contain;
-    width: 90%;
-    height: 90%;
+    width: calc(100% - 2px);
+    height: calc(100% - 2px);
     z-index: 2;
   }
-
 }
diff --git a/apps/web/styles/vendor/ag-grid.scss b/apps/web/styles/vendor/ag-grid.scss
index 0ad1e8eb..03d61b44 100644
--- a/apps/web/styles/vendor/ag-grid.scss
+++ b/apps/web/styles/vendor/ag-grid.scss
@@ -7,10 +7,10 @@
       // alpine-active-color: var(--p),
       borders: false,
       cell-horizontal-padding: 8px,
-      background-color: hsl(var(--b1) / var(--tw-bg-opacity)),
-      header-background-color: hsl(var(--b1) / var(--tw-bg-opacity)),
-      odd-row-background-color: hsl(var(--b2) / var(--tw-bg-opacity)),
-      control-panel-background-color: hsl(var(--b1) / var(--tw-bg-opacity)),
+      background-color: #1F1F1F,
+      header-background-color: #1F1F1F,
+      odd-row-background-color: #1A1A1A,
+      control-panel-background-color: #1F1F1F,
       input-focus-box-shadow: none,
       card-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5)
     )
diff --git a/apps/web/styles/vendor/cdk.scss b/apps/web/styles/vendor/cdk.scss
new file mode 100644
index 00000000..419a7465
--- /dev/null
+++ b/apps/web/styles/vendor/cdk.scss
@@ -0,0 +1 @@
+@import "~@angular/cdk/overlay-prebuilt.css";
diff --git a/apps/web/styles/vendor/tailwind.scss b/apps/web/styles/vendor/tailwind.scss
new file mode 100644
index 00000000..a31e4441
--- /dev/null
+++ b/apps/web/styles/vendor/tailwind.scss
@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
diff --git a/capacitor.config.ts b/capacitor.config.ts
index a8bed010..506db6c8 100644
--- a/capacitor.config.ts
+++ b/capacitor.config.ts
@@ -5,6 +5,15 @@ const config: CapacitorConfig = {
   appName: 'New World Buddy',
   webDir: 'dist/web',
   bundledWebRuntime: false,
+  android: {
+    path: 'apps/android',
+    appendUserAgent: 'nw-buddy-android'
+  },
+  ios: {
+    path: 'apps/ios',
+    appendUserAgent: 'nw-buddy-ios',
+    allowsLinkPreview: false
+  },
 }
 
 export default config
diff --git a/ionic.config.json b/ionic.config.json
new file mode 100644
index 00000000..4589f1fb
--- /dev/null
+++ b/ionic.config.json
@@ -0,0 +1,7 @@
+{
+  "name": "nw-buddy",
+  "integrations": {
+    "capacitor": {}
+  },
+  "type": "angular"
+}
diff --git a/package.json b/package.json
index 29cc2e3e..1b32fbfe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nw-buddy",
-  "version": "1.7.0-6",
+  "version": "1.7.0-7",
   "description": "New World Buddy",
   "keywords": [],
   "main": "dist/electron/main.js",
@@ -13,10 +13,12 @@
   },
   "scripts": {
     "dev": "npm-run-all -p dev:electron dev:web",
-    "dev:web": "ng serve -c web -o",
+    "dev:web": "ng serve --host 0.0.0.0 --disable-host-check -c dev -o",
     "dev:electron": "yarn electron:serve",
     "build": "yarn build:electron && yarn build:web && electron-builder build --publish=never --config=electron-config.js",
-    "build:web": "ng build --base-href ./ -c production",
+    "build:web": "ng build --base-href ./",
+    "build:web:electron": "yarn build:web -c electron",
+    "build:web:capacitor": "yarn build:web -c capacitor",
     "build:electron": "yarn electron:tsc",
     "storybook": "ng run nw-buddy:storybook",
     "storybook:build": "ng run nw-buddy:build-storybook",
@@ -26,87 +28,93 @@
     "test:watch": "ng test",
     "lint": "ng lint",
     "nw-import": "ts-node ./tools/nw-import.ts",
-    "nw-extract": "ts-node ./tools/nw-extract.ts"
+    "nw-extract": "ts-node ./tools/nw-extract.ts",
+    "cap:sync": "npx cap sync",
+    "cap:android:open": "npx cap open android",
+    "cap:android:run": "npx cap run android"
   },
   "dependencies": {
-
+    "@angular/cdk": "14.2.4",
+    "@types/file-saver": "2.0.5",
+    "@types/nanoid": "3.0.0",
+    "nanoid": "4.0.0"
   },
   "devDependencies": {
-    "@angular/common": "14.1.2",
-    "@angular/compiler": "14.1.2",
-    "@angular/core": "14.1.2",
-    "@angular/forms": "14.1.2",
-    "@angular/language-service": "14.1.2",
-    "@angular/platform-browser": "14.1.2",
-    "@angular/platform-browser-dynamic": "14.1.2",
-    "@angular/router": "14.1.2",
-    "ag-grid-community": "28.1.0",
-    "chart.js": "3.9.1",
-    "daisyui": "2.22.0",
-    "file-saver": "2.0.5",
-    "html-to-image": "1.10.8",
-    "loadsh": "0.0.4",
-    "mithril": "2.2.2",
-    "rxjs": "7.5.6",
-    "tslib": "^2.4.0",
-    "zone.js": "~0.11.7",
-    "@angular-builders/custom-webpack": "14.0.0",
-    "@angular-devkit/build-angular": "14.1.2",
-    "@angular-eslint/builder": "14.0.2",
-    "@angular-eslint/eslint-plugin": "14.0.2",
-    "@angular-eslint/eslint-plugin-template": "14.0.2",
-    "@angular-eslint/schematics": "14.0.2",
-    "@angular-eslint/template-parser": "14.0.2",
-    "@angular/cli": "14.1.2",
-    "@angular/compiler-cli": "14.1.2",
+    "@angular-builders/custom-webpack": "14.0.1",
+    "@angular-devkit/build-angular": "14.2.5",
+    "@angular-eslint/builder": "14.1.2",
+    "@angular-eslint/eslint-plugin": "14.1.2",
+    "@angular-eslint/eslint-plugin-template": "14.1.2",
+    "@angular-eslint/schematics": "14.1.2",
+    "@angular-eslint/template-parser": "14.1.2",
+    "@angular/cli": "14.2.5",
+    "@angular/common": "14.2.5",
+    "@angular/compiler": "14.2.5",
+    "@angular/compiler-cli": "14.2.5",
+    "@angular/core": "14.2.5",
+    "@angular/forms": "14.2.5",
+    "@angular/language-service": "14.2.5",
+    "@angular/platform-browser": "14.2.5",
+    "@angular/platform-browser-dynamic": "14.2.5",
+    "@angular/router": "14.2.5",
     "@capacitor/android": "4.3.0",
     "@capacitor/cli": "4.3.0",
     "@capacitor/core": "4.3.0",
     "@capacitor/ios": "4.3.0",
-    "@storybook/angular": "6.5.10",
-    "@storybook/builder-webpack5": "6.5.10",
-    "@storybook/manager-webpack5": "6.5.10",
-    "@tailwindcss/typography": "0.5.4",
+    "@storybook/angular": "6.5.12",
+    "@storybook/builder-webpack5": "6.5.12",
+    "@storybook/manager-webpack5": "6.5.12",
+    "@tailwindcss/typography": "0.5.7",
     "@types/cli-progress": "3.11.0",
-    "@types/jasmine": "4.0.3",
+    "@types/jasmine": "4.3.0",
     "@types/jasminewd2": "2.0.10",
-    "@types/lodash": "4.14.182",
+    "@types/lodash": "4.14.186",
     "@types/mithril": "2.0.11",
     "@types/node": "16.11.7",
     "@types/papaparse": "5.3.5",
-    "@typescript-eslint/eslint-plugin": "5.30.7",
-    "@typescript-eslint/parser": "5.30.7",
-    "autoprefixer": "10.4.8",
+    "@typescript-eslint/eslint-plugin": "5.39.0",
+    "@typescript-eslint/parser": "5.39.0",
+    "ag-grid-community": "28.2.0",
+    "autoprefixer": "10.4.12",
+    "chart.js": "3.9.1",
     "cli-progress": "3.11.2",
-    "commander": "9.4.0",
-    "dotenv": "16.0.1",
+    "commander": "9.4.1",
+    "daisyui": "2.31.0",
+    "dotenv": "16.0.3",
     "electron": "19.0.9",
     "electron-builder": "23.1.0",
     "electron-reload": "2.0.0-alpha.1",
-    "eslint": "8.20.0",
+    "eslint": "8.24.0",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsdoc": "39.3.3",
+    "eslint-plugin-jsdoc": "39.3.6",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "fast-glob": "3.2.11",
-    "jasmine-core": "4.3.0",
+    "fast-glob": "3.2.12",
+    "file-saver": "2.0.5",
+    "html-to-image": "1.10.8",
+    "jasmine-core": "4.4.0",
     "jasmine-spec-reporter": "7.0.0",
-    "karma": "6.4.0",
+    "karma": "6.4.1",
     "karma-coverage-istanbul-reporter": "3.0.3",
-    "karma-electron": "7.2.0",
+    "karma-electron": "7.3.0",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.0.0",
+    "loadsh": "0.0.4",
+    "mithril": "2.2.2",
     "node-polyfill-webpack-plugin": "2.0.1",
     "npm-run-all": "4.1.5",
     "nw-extract": "1.1.0",
     "papaparse": "5.3.2",
-    "postcss": "8.4.16",
-    "quicktype": "15.0.261",
-    "quicktype-core": "6.0.71",
+    "postcss": "8.4.17",
+    "quicktype": "15.1.0",
+    "quicktype-core": "6.1.0",
+    "rxjs": "7.5.7",
     "tailwindcss": "3.1.8",
     "ts-node": "10.9.1",
+    "tslib": "^2.4.0",
     "typescript": "~4.7.4",
     "wait-on": "6.0.1",
-    "webdriver-manager": "12.1.8"
+    "webdriver-manager": "12.1.8",
+    "zone.js": "~0.11.8"
   },
   "engines": {
     "node": ">=14.0.0"
diff --git a/tailwind.config.js b/tailwind.config.js
index 389edddd..fcf2c239 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,40 +1,25 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 module.exports = {
   content: ['./apps/web/**/*.{html,js,ts}'],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        '3xl': '1600px',
+        '4xl': '2000px',
+        '5xl': '2400px',
+        '6xl': '3000px',
+      },
+      gridTemplateColumns: {
+        'fill': 'repeat(auto-fill, minmax(20rem, 1fr))',
+        'dl': 'max-content auto'
+      }
+    },
     fontFamily: {
-      sans: [
-        // Safari for OS X and iOS (San Francisco)
-        '-apple-system',
-        // Windows
-        'Segoe UI',
-        // Android
-        'Roboto',
-        // Basic web fallback
-        '"Helvetica Neue"',
-        'Arial',
-        'sans-serif',
-        // Emoji fonts
-        '"Apple Color Emoji"',
-        '"Segoe UI Emoji"',
-        '"Segoe UI Symbol"',
-      ],
+      ...defaultTheme.fontFamily,
       serif: [
         '"New World"',
-        // Safari for OS X and iOS (San Francisco)
-        '-apple-system',
-        // Windows
-        'Segoe UI',
-        // Android
-        'Roboto',
-        // Basic web fallback
-        '"Helvetica Neue"',
-        'Arial',
-        'sans-serif',
-        // Emoji fonts
-        '"Apple Color Emoji"',
-        '"Segoe UI Emoji"',
-        '"Segoe UI Symbol"',
+        ...defaultTheme.fontFamily.serif,
       ],
     },
   },
@@ -44,11 +29,15 @@ module.exports = {
       {
         nwbuddy: {
           ...require('daisyui/src/colors/themes')['[data-theme=halloween]'],
+          '--nwb-description': '#e1cb99',
           '--nwb-rarity0': '#c8c8c8',
-          '--nwb-rarity1': '#07c02f',
+          //'--nwb-rarity1': '#07c02f',
+          '--nwb-rarity1': '#2ae553',
           '--nwb-rarity2': '#00cbe9',
-          '--nwb-rarity3': '#ff16f7',
-          '--nwb-rarity4': '#f7a22d',
+          //'--nwb-rarity3': '#ff16f7',
+          '--nwb-rarity3': '#f93af9',
+          //'--nwb-rarity4': '#f7a22d',
+          '--nwb-rarity4': '#ffad2e',
         },
       },
     ],
diff --git a/tools/nw-extract.ts b/tools/nw-extract.ts
index c3c1e0dd..b895deb2 100644
--- a/tools/nw-extract.ts
+++ b/tools/nw-extract.ts
@@ -6,10 +6,11 @@ import { NW_PTR, gameDir, dataDir } from '../env'
 program
   .option('-g, --game <path>', 'game directory')
   .option('-o, --output <path>', 'output directory')
+  .option('-u, --update', 'Force update, skip cache')
   .option('--ptr', 'PTR mode', NW_PTR)
   .action(async () => {
 
-    const options = program.opts<{ game: string, output: string, ptr: boolean }>()
+    const options = program.opts<{ game: string, output: string, ptr: boolean, update: boolean }>()
     const filter: any[] = [
       // '*',
       'datasheet:json',
@@ -32,6 +33,7 @@ program
     await extract({
       inputDir: options.game || gameDir(options.ptr)!,
       outputDir: options.output || dataDir(options.ptr)!,
+      update: options.update,
       filter: createFilter(filter),
       converterFactory: createConverter(filter),
       onProgress: (p) => {
diff --git a/tools/nw-import.ts b/tools/nw-import.ts
index fb1a3942..bfb45643 100644
--- a/tools/nw-import.ts
+++ b/tools/nw-import.ts
@@ -41,6 +41,7 @@ program
         '*_itemdefinitions_master_*',
         '*_itemdefinitions_resources',
         '*_itemdefinitions_weapons',
+        '*_itemdefinitions_armor',
         '*_lootbuckets',
         '*_lootlimits',
         '*_loottables*',
@@ -137,6 +138,10 @@ program
               properties: ['ItemClass', 'ExclusiveLabels', 'ExcludeItemClass'],
               separator: '+',
             }),
+            splitToArrayRule({
+              properties: ['EquipAbility'],
+              separator: ',',
+            }),
           ],
         },
         {
@@ -161,7 +166,7 @@ program
           file: /pointofinterestdefinitions/,
           rules: [
             splitToArrayRule({
-              properties: ['LootTags'],
+              properties: ['LootTags', 'VitalsCategory'],
               separator: ',',
             }),
           ],
@@ -198,7 +203,14 @@ program
         'ui_intelligence',
         'ui_constitution',
         'ui_focus',
-        /ui_poi_.*_description/,
+        'ui_resistance',
+        'ui_bindOnEquip',
+        'ui_bindOnPickup',
+        'ui_durability',
+        'ui_level_requirement',
+        /^[a-zA-Z]+_DamageName/,
+        /^ui_poi_.*_description/,
+        /^ui_tooltip_.*/,
       ],
     }).then((files) => {
       checkExpressions({
diff --git a/yarn.lock b/yarn.lock
index f3e30292..e34372e8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/7zip-bin/-/7zip-bin-5.1.1.tgz#9274ec7460652f9c632c59addf24efb1684ef876"
   integrity sha512-sAP4LldeWNz0lNzmTird3uWfFDWWTeg6V/MsmyyLR9X1idwKBWIgt/ZvinqQldJm3LecKEs1emkbquO6PCiLVQ==
 
+"@adobe/css-tools@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.0.1.tgz#b38b444ad3aa5fedbb15f2f746dcd934226a12dd"
+  integrity sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==
+
 "@ampproject/remapping@2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
@@ -22,10 +27,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "^0.3.0"
 
-"@angular-builders/custom-webpack@14.0.0":
-  version "14.0.0"
-  resolved "https://registry.yarnpkg.com/@angular-builders/custom-webpack/-/custom-webpack-14.0.0.tgz#46f11621fdb919df77c6e38f338906e0690145fa"
-  integrity sha512-6ky8rdW9k2FNcbUeGub2uxZq+wrF2OxIkQtFaPuQ8GKD94YYQHl+AdJT2pnvfoFs4OqsHh1APdwFD5gF4WKi5Q==
+"@angular-builders/custom-webpack@14.0.1":
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/@angular-builders/custom-webpack/-/custom-webpack-14.0.1.tgz#57a70b735fd36a1fa4d1a3ac7560db3e39c8fc22"
+  integrity sha512-QDsSFo80I8oLBzvr7qIxcdEfvDMEeJmwYRrJ/hG8O+XVdYsUkkj4nEvBI5fKKBOfcRgx1R/XrEDtJEeolEQeig==
   dependencies:
     "@angular-devkit/architect" ">=0.1400.0 < 0.1500.0"
     "@angular-devkit/build-angular" "^14.0.0"
@@ -43,43 +48,43 @@
     "@angular-devkit/core" "14.1.0"
     rxjs "6.6.7"
 
-"@angular-devkit/architect@0.1401.2":
-  version "0.1401.2"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.1401.2.tgz#2e9497db8d25848ab1d8757dd07ef049fa596b98"
-  integrity sha512-OR/P0kC1TUayerB+oNsczZ7tP7qK/y+rSg4P0hMv4bU+SSdBd3woG4ILzwWXb8tAb9b9zvWpzxpxG99h1bUGlA==
+"@angular-devkit/architect@0.1402.5":
+  version "0.1402.5"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/architect/-/architect-0.1402.5.tgz#5596965fce658e280c5aa48249849ff84b0c6f81"
+  integrity sha512-vtJEwB51UEY1Q7FCI7xGLdhdb2SRTtI1Qs0or95momn85NuxlaMQsXK1Wxu9/EwtWKZK8dXePXbB/hpiNt61JQ==
   dependencies:
-    "@angular-devkit/core" "14.1.2"
+    "@angular-devkit/core" "14.2.5"
     rxjs "6.6.7"
 
-"@angular-devkit/build-angular@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-14.1.2.tgz#a9eb08163f596bb626838c217d03069f1e208351"
-  integrity sha512-x0XS4rKefEWAr8G5vzA3FGCicLnrMGIZgv5gAkcoUbXWfowKxtjGWTWEtsj8GsG2+U4+HVQ4z/vd3TQOnVMoiA==
+"@angular-devkit/build-angular@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-angular/-/build-angular-14.2.5.tgz#025d9341e75ad3999b7c41ba3144d6fa92dd3bb8"
+  integrity sha512-jSgH11E+zs1C24lXj7R/PgXsTUpoYoMr1GtO6mpVROgXL5czVlL+b/B1p2HwbcAKuI9WXb48X6OZ6fOZhDQlSg==
   dependencies:
     "@ampproject/remapping" "2.2.0"
-    "@angular-devkit/architect" "0.1401.2"
-    "@angular-devkit/build-webpack" "0.1401.2"
-    "@angular-devkit/core" "14.1.2"
-    "@babel/core" "7.18.6"
-    "@babel/generator" "7.18.7"
+    "@angular-devkit/architect" "0.1402.5"
+    "@angular-devkit/build-webpack" "0.1402.5"
+    "@angular-devkit/core" "14.2.5"
+    "@babel/core" "7.18.10"
+    "@babel/generator" "7.18.12"
     "@babel/helper-annotate-as-pure" "7.18.6"
-    "@babel/plugin-proposal-async-generator-functions" "7.18.6"
+    "@babel/plugin-proposal-async-generator-functions" "7.18.10"
     "@babel/plugin-transform-async-to-generator" "7.18.6"
-    "@babel/plugin-transform-runtime" "7.18.6"
-    "@babel/preset-env" "7.18.6"
-    "@babel/runtime" "7.18.6"
-    "@babel/template" "7.18.6"
+    "@babel/plugin-transform-runtime" "7.18.10"
+    "@babel/preset-env" "7.18.10"
+    "@babel/runtime" "7.18.9"
+    "@babel/template" "7.18.10"
     "@discoveryjs/json-ext" "0.5.7"
-    "@ngtools/webpack" "14.1.2"
+    "@ngtools/webpack" "14.2.5"
     ansi-colors "4.1.3"
     babel-loader "8.2.5"
     babel-plugin-istanbul "6.1.1"
     browserslist "^4.9.1"
-    cacache "16.1.1"
+    cacache "16.1.2"
     copy-webpack-plugin "11.0.0"
     critters "0.0.16"
     css-loader "6.7.1"
-    esbuild-wasm "0.14.49"
+    esbuild-wasm "0.15.5"
     glob "8.0.3"
     https-proxy-agent "5.0.1"
     inquirer "8.2.4"
@@ -95,31 +100,31 @@
     ora "5.4.1"
     parse5-html-rewriting-stream "6.0.1"
     piscina "3.2.0"
-    postcss "8.4.14"
-    postcss-import "14.1.0"
+    postcss "8.4.16"
+    postcss-import "15.0.0"
     postcss-loader "7.0.1"
-    postcss-preset-env "7.7.2"
+    postcss-preset-env "7.8.0"
     regenerator-runtime "0.13.9"
     resolve-url-loader "5.0.0"
     rxjs "6.6.7"
-    sass "1.53.0"
+    sass "1.54.4"
     sass-loader "13.0.2"
     semver "7.3.7"
     source-map-loader "4.0.0"
     source-map-support "0.5.21"
-    stylus "0.58.1"
+    stylus "0.59.0"
     stylus-loader "7.0.0"
     terser "5.14.2"
     text-table "0.2.0"
     tree-kill "1.2.2"
     tslib "2.4.0"
-    webpack "5.73.0"
+    webpack "5.74.0"
     webpack-dev-middleware "5.3.3"
-    webpack-dev-server "4.9.3"
+    webpack-dev-server "4.11.0"
     webpack-merge "5.8.0"
     webpack-subresource-integrity "5.1.0"
   optionalDependencies:
-    esbuild "0.14.49"
+    esbuild "0.15.5"
 
 "@angular-devkit/build-angular@^14.0.0":
   version "14.1.0"
@@ -199,12 +204,12 @@
     "@angular-devkit/architect" "0.1401.0"
     rxjs "6.6.7"
 
-"@angular-devkit/build-webpack@0.1401.2":
-  version "0.1401.2"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.1401.2.tgz#71ff63f0d094398c3a0685b1d80e507eb1009e3d"
-  integrity sha512-vsudoMtno3XYbhQZi1jPsFw8Vi6JYkhEqwP4cs/E6gAEwHSQ94l3A9KqKvk+w4EFfiZSY6Wtp/vSNjwJavC+sQ==
+"@angular-devkit/build-webpack@0.1402.5":
+  version "0.1402.5"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-webpack/-/build-webpack-0.1402.5.tgz#4dcdfb27bf8be083523a69ce74348253cc5c5357"
+  integrity sha512-h+o0GZD9iATwWjaTiUR0lJ3QZ9twUOJ1sotRchXHzAXMuaDk8wqqPriL5S0qDMlA2QqpNt4OD9rodUCRwae7fw==
   dependencies:
-    "@angular-devkit/architect" "0.1401.2"
+    "@angular-devkit/architect" "0.1402.5"
     rxjs "6.6.7"
 
 "@angular-devkit/core@14.1.0", "@angular-devkit/core@^14.0.0":
@@ -218,10 +223,10 @@
     rxjs "6.6.7"
     source-map "0.7.4"
 
-"@angular-devkit/core@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-14.1.2.tgz#f4c287295065b3845e85a84e29f12629b4a52cf9"
-  integrity sha512-fIfymD1erjoj1eVh7pa/dvOtUhSd7sEOGuWEJ81HJqdzwZbPWweRu3Nh/9kj/ttUy8xawWfdJHLwyG2KnRu0DA==
+"@angular-devkit/core@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/core/-/core-14.2.5.tgz#79ea66ab62338003d46e553cd2e01cb4ad031fe9"
+  integrity sha512-lSje+HX0fx9Y2A4k63jVHrWdGT4wellhwcZpTCv9P6LvdfTkAlrfra3TaYhUPjavCsPwlRC/VVQN3Qkzk5m6gA==
   dependencies:
     ajv "8.11.0"
     ajv-formats "2.1.1"
@@ -229,84 +234,91 @@
     rxjs "6.6.7"
     source-map "0.7.4"
 
-"@angular-devkit/schematics@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-14.1.2.tgz#6fb81aaece4ad1a24f3dd7b213e2f7000b41adbf"
-  integrity sha512-vC9UA3heXbq9CAkwMXHJfIu0G7Ty2oTJ5PtrrFQpig1PrFnRfr4sg+qRS1CLsEAJYQNo14xV55OQkKEPTij/Gg==
+"@angular-devkit/schematics@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/schematics/-/schematics-14.2.5.tgz#469d98af643dcda1b24f9fc6fa6b8346effdf984"
+  integrity sha512-3a//d8f/yuR1F2QXAyX4pShWdkHBWbY1qpqqVnN9gRJ+ye6pY098gsCQKpKXPZGeV08ugu5v79f5JELMthBBSQ==
   dependencies:
-    "@angular-devkit/core" "14.1.2"
+    "@angular-devkit/core" "14.2.5"
     jsonc-parser "3.1.0"
     magic-string "0.26.2"
     ora "5.4.1"
     rxjs "6.6.7"
 
-"@angular-eslint/builder@14.0.2":
-  version "14.0.2"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/builder/-/builder-14.0.2.tgz#0bb6f05488546c58aa0017431307766c093868ab"
-  integrity sha512-RY/1fKNewm3Wt3ILe9Ue5jTiQRtPR8q+eAmV89EYl07jEQ4RA7oND+vYD0UT9IJDVVHZYs6nlEnb0JmwCQI8kA==
-  dependencies:
-    "@nrwl/devkit" "^14.2.4"
-    nx "^14.2.4"
+"@angular-eslint/builder@14.1.2":
+  version "14.1.2"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/builder/-/builder-14.1.2.tgz#ad74a0de3fa3be0cb9e6bb7cd7bb98273267183b"
+  integrity sha512-J+LRidjlJOGfRNXJwUyOhz5TnasEBK+kL3QkkCE4ZSt/dH40QqT+3q9qV5zc45wdaAeJM4/jp1IhI6kPwWI5Yw==
 
-"@angular-eslint/bundled-angular-compiler@14.0.2":
-  version "14.0.2"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-14.0.2.tgz#16aed25430b96fac50d069b2e44dae89fa4b12ad"
-  integrity sha512-Ev001tGwBfy6lFd1IDrAHfW87VUqDmMQY5KWY+LM3dn0PY2XZv1RsBM16tBFbi7EaDeaxeFZg/G8PN5x+anNbg==
+"@angular-eslint/bundled-angular-compiler@14.1.2":
+  version "14.1.2"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-14.1.2.tgz#9a4895326221cf0ccdc189a776c89bfb6ffc7522"
+  integrity sha512-d5/jTKXP+t9hNSucj3m8zZYBl62fZ2xFMVNbAOArYAkA7WwwX3D7Gae57BNW54cd2fl2/is7Dn6UgYhu1wqkSQ==
 
-"@angular-eslint/eslint-plugin-template@14.0.2":
-  version "14.0.2"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-14.0.2.tgz#ff888b51f6df73469b7237f430571746d05ce2c6"
-  integrity sha512-egan0a2GVkubST4H7x2mPMTz3Ee9QXeLEchJyWXdFBZ6Nrpfjaki5dOQYhLU7KyxqhrSW4XugMWPGj2KW2gMxQ==
+"@angular-eslint/eslint-plugin-template@14.1.2":
+  version "14.1.2"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-14.1.2.tgz#528dcfdd038bc4d186f879bb069a03b0ad8ad7a2"
+  integrity sha512-gMgYJ8ZwPvq2H/YEzPztVRAK2NYs2cJFUDZD4iGjSRtDgYq9OHjyTo+r6tkcyjcK2qvesy0RccHQKh+x3hYMTA==
   dependencies:
-    "@angular-eslint/bundled-angular-compiler" "14.0.2"
-    "@typescript-eslint/utils" "5.29.0"
-    aria-query "5.0.0"
+    "@angular-eslint/bundled-angular-compiler" "14.1.2"
+    "@typescript-eslint/type-utils" "5.37.0"
+    "@typescript-eslint/utils" "5.37.0"
+    aria-query "5.0.2"
     axobject-query "3.0.1"
 
-"@angular-eslint/eslint-plugin@14.0.2":
-  version "14.0.2"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/eslint-plugin/-/eslint-plugin-14.0.2.tgz#8bd852aa6d5f709e43972308dddbd1f604735f67"
-  integrity sha512-TfiXWqaWGysnPB6JstZouvA9tNwIsCLvSIGqniE1U90kX6p5nL8Z09JOiv/9jlYfgAIEgUD48BGMZzDi86voGA==
+"@angular-eslint/eslint-plugin@14.1.2":
+  version "14.1.2"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/eslint-plugin/-/eslint-plugin-14.1.2.tgz#4092c9234bccbf2231e423d522bcba1c53a75e7b"
+  integrity sha512-5pJaTcFfM7yDHNtMxw3uNTpBTLjNYH9mlOLX5FFQ9EahAuycwCtV8VJkIntK2ZiOTdRVJYA9/PEdD/xVxX02rw==
   dependencies:
-    "@angular-eslint/utils" "14.0.2"
-    "@typescript-eslint/utils" "5.29.0"
+    "@angular-eslint/utils" "14.1.2"
+    "@typescript-eslint/utils" "5.37.0"
 
-"@angular-eslint/schematics@14.0.2":
-  version "14.0.2"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/schematics/-/schematics-14.0.2.tgz#0fc0d1bc61f170bde8cef122ea31080f244556b7"
-  integrity sha512-aLS13eaJmQZe02J3oZywvGOKonEhnHRIoJcVYovT4YRQ/QWmDzd7Ye81ta7C2x8YhKUWgU/7YQagBDGEP8XORw==
+"@angular-eslint/schematics@14.1.2":
+  version "14.1.2"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/schematics/-/schematics-14.1.2.tgz#b381b879b67a5ef7df3298c5ca9e58c36570890b"
+  integrity sha512-jyaCDQf+MGjMCf+U6KXvvpPESKMUoSGXYhsh2XYtSSUhXook9f2cPI6bHBMyrDgV43zH42jMS+yMC1EO24ZP1w==
   dependencies:
-    "@angular-eslint/eslint-plugin" "14.0.2"
-    "@angular-eslint/eslint-plugin-template" "14.0.2"
+    "@angular-eslint/eslint-plugin" "14.1.2"
+    "@angular-eslint/eslint-plugin-template" "14.1.2"
     ignore "5.2.0"
     strip-json-comments "3.1.1"
     tmp "0.2.1"
 
-"@angular-eslint/template-parser@14.0.2":
-  version "14.0.2"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/template-parser/-/template-parser-14.0.2.tgz#00fbe0a30f06f3e40bbb414db26349152dd46e27"
-  integrity sha512-NTXSfL97WVs4GTKPtPcRZfWtvNbhgcIZUvKUTk5ieYiVLqsHF9Y+NlAKBh44AGldM5oCNO4HUfnvOedtqkQ+MA==
+"@angular-eslint/template-parser@14.1.2":
+  version "14.1.2"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/template-parser/-/template-parser-14.1.2.tgz#c224dd8e3ef8675cba4207df1368a7e010d75a43"
+  integrity sha512-bQI+poQDIyR3OU9EQzJeLYRtmsvjFGtV5dc+4XPJ6eIyRAc8baCG/0V/cOrpofIdSf7e/sCV8H7rXcFg6tSdUw==
   dependencies:
-    "@angular-eslint/bundled-angular-compiler" "14.0.2"
+    "@angular-eslint/bundled-angular-compiler" "14.1.2"
     eslint-scope "^5.1.0"
 
-"@angular-eslint/utils@14.0.2":
-  version "14.0.2"
-  resolved "https://registry.yarnpkg.com/@angular-eslint/utils/-/utils-14.0.2.tgz#15cbbf142eebab66fc887f0d85b0518a2989d832"
-  integrity sha512-8cHyQFG3jIHMHBjlqMU9ExAgOFGqbvxUa5EUvdc8wJUXtwhYx5NCQupdSpy/qG8gHiXjxvxinEtACZJQ9/SOwQ==
+"@angular-eslint/utils@14.1.2":
+  version "14.1.2"
+  resolved "https://registry.yarnpkg.com/@angular-eslint/utils/-/utils-14.1.2.tgz#eb7c71fcc2f0ba40995bf121bc559ac8db750072"
+  integrity sha512-EtblG9zO0+kWG9EHsoEshFKvsH5DMSK1DqwQsNOVGAF0Aa5DFOqrwouJUyBNJ0d4fSWI9QcuzVkZ1x9JyLIeXQ==
+  dependencies:
+    "@angular-eslint/bundled-angular-compiler" "14.1.2"
+    "@typescript-eslint/utils" "5.37.0"
+
+"@angular/cdk@14.2.4":
+  version "14.2.4"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-14.2.4.tgz#f858ff928206c24c1bbd38610444a5214990017d"
+  integrity sha512-5jngZcOyC2n9pRYec/D0iCw72QSnCkGYjtfgIlOK/FZYGhpOa34GMGObPuv4F0u7J2TEtbO6xIFsCFaK0FLIWQ==
   dependencies:
-    "@angular-eslint/bundled-angular-compiler" "14.0.2"
-    "@typescript-eslint/utils" "5.29.0"
+    tslib "^2.3.0"
+  optionalDependencies:
+    parse5 "^5.0.0"
 
-"@angular/cli@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-14.1.2.tgz#4dc1ccac2d98dfca51ef7ec78405925bda933021"
-  integrity sha512-HuoaciYXQD+50o1bpg4P80OtZlBCXInDFelHSTwQMl0n8uaWg2+Iy5sVx+0bzt8Wr6Dyaptdvzy2WpHIIRlHBg==
+"@angular/cli@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-14.2.5.tgz#23cbb0721cf7cda4f5fc35f164b9f7d593edc45b"
+  integrity sha512-jrvQ7nv/8k8i6D7LXrZi+DXQQkpmqoxC/NZL7hH1zyB9shlnG/ekMl+T4y7tvg3MWKxJuIfWVtz/EwOkMKmEaA==
   dependencies:
-    "@angular-devkit/architect" "0.1401.2"
-    "@angular-devkit/core" "14.1.2"
-    "@angular-devkit/schematics" "14.1.2"
-    "@schematics/angular" "14.1.2"
+    "@angular-devkit/architect" "0.1402.5"
+    "@angular-devkit/core" "14.2.5"
+    "@angular-devkit/schematics" "14.2.5"
+    "@schematics/angular" "14.2.5"
     "@yarnpkg/lockfile" "1.1.0"
     ansi-colors "4.1.3"
     debug "4.3.4"
@@ -317,24 +329,24 @@
     npm-pick-manifest "7.0.1"
     open "8.4.0"
     ora "5.4.1"
-    pacote "13.6.1"
+    pacote "13.6.2"
     resolve "1.22.1"
     semver "7.3.7"
     symbol-observable "4.0.0"
     uuid "8.3.2"
     yargs "17.5.1"
 
-"@angular/common@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@angular/common/-/common-14.1.2.tgz#8471e2eb1267e80cc55d518260c68c7dbf3612d1"
-  integrity sha512-ukj/BAF3cH8IDrrMt7MLjosKst005YGD0EpLNpdTNdHN8NrF3OrEYyR7YR7obrucjJ8fowsz9V7a8OrNrHaS4w==
+"@angular/common@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/common/-/common-14.2.5.tgz#f2168f55ed7fe64619df610e7ce0e63390ecd575"
+  integrity sha512-v2fIK6imfMkUvYNjZQO+drE39QO3eSS95Yy7UN+6inb47DkAfzx6hipA9zKrMENjsS3kDv1d7cgDHE7WuOCzIw==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/compiler-cli@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-14.1.2.tgz#98f507bf95f960c159af571cb25f7ceaf64edd9b"
-  integrity sha512-L1gB0ig2T0xz+4KaZCuf07tUitKT8gEqYQCd8evPeomMVgZAZcaCZa5O1FmNjGv7mDb0PrDJ1q0/VqTfet8onw==
+"@angular/compiler-cli@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-14.2.5.tgz#bbaaacc82d2f8444b1bb26a21cabecfb31ea8ed2"
+  integrity sha512-3GYzTPw96TfJjw7Aso+f+uN6VFBWedqRATUQ6v+BAEyZIboirdLI1JQFOcCfuKWUM2B48RW+pdIduZmG3ckotA==
   dependencies:
     "@babel/core" "^7.17.2"
     chokidar "^3.0.0"
@@ -347,50 +359,50 @@
     tslib "^2.3.0"
     yargs "^17.2.1"
 
-"@angular/compiler@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-14.1.2.tgz#3174fd78accee67358aa62e64492f5f7f3d6b512"
-  integrity sha512-H0W4kTM7gUizWe5oFgixbnnS6U4pBt7qcmVCe5mdfzuUwoDzp8u/cOUErxzM0gZiCFVT/KBPXgc7TeZ1oNtgHg==
+"@angular/compiler@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-14.2.5.tgz#a54729942c7d542e14499fa13a5b1c9aa52f1d53"
+  integrity sha512-L7d2/D6o9wlB2ugqRYpev6a8JntqS+7lF2o6z8y7RR2YAlAu71nq0BDsQez4/aSCK3HnDq0yhEnns7vcmOq/jA==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/core@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@angular/core/-/core-14.1.2.tgz#1defacaad7494a8dca9e9ba1d4c1fe46009d9e4a"
-  integrity sha512-7DkeMYxXaWiUN0SztsD/dUn8SYo7305sM9HtX9RCGG/pweOoIIdcRhTxyiatyVGzTuulwMs/Y/rD1Q+GsDCnow==
+"@angular/core@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/core/-/core-14.2.5.tgz#d2a4b5bb36fc9dda3318eeab197a051d170b8706"
+  integrity sha512-Ok78Abq0puMGlolvNVzKFvsX7ePDkyxpZzztDzXDdRA4x4o6bAuuDG9Y7Wab2+wsdY6NktO+dFQjq1UBWClgSg==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/forms@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-14.1.2.tgz#b141726d74fa41a08eba6e0787460cdbee41a9d2"
-  integrity sha512-9qXbYVo3mgz7SiSZzt5y/SonccASLKr8HSLlTGwnXKHlBAWA4tgdAR5Dqs+rKpoJI8VRF29Cu76fqytl60tCVA==
+"@angular/forms@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-14.2.5.tgz#8e2f5f6bc0952cd2c1ab5af417f118fe87a37afc"
+  integrity sha512-aMH5Vrftny0KF0XzWQIGfHoI0LVQ2aatpWzdUWiUqBeX/Q+ucmxeP5rZyKtUsi0flETWxdRZSBTjbXZ3dsIcTA==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/language-service@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-14.1.2.tgz#cb46fdd04f6d6aef46557088cb25370a772c95f0"
-  integrity sha512-IIBH3d4HbspXP1QqBdouGtuo9vALSczYfRJnMa8h/cEwf2T4UhVfK/I+w67RXL97PHbLUuiE78/jFBvlVBEzmw==
+"@angular/language-service@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-14.2.5.tgz#f5ccdbf83fb47c838867ad33a4b0da09598f6ca0"
+  integrity sha512-YqbsCbCq470ve6+MGjeEf2I6L5LcBYALvh+S5XsZkfEQEjSYYC1ZE1ftq7clICrMOOoM4XSghq8b/eNtZoTJkg==
 
-"@angular/platform-browser-dynamic@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-14.1.2.tgz#b3fa484fd8c562408e5725d76062d5f7f2d8c049"
-  integrity sha512-+xzFB1WwjMWaRafk41PEJcwLuzKyZ3SeMlEX2lsrRPySX446YGqdyEyvvpzmbSLwOlcERxTT6Q1j8QYgFKjDSg==
+"@angular/platform-browser-dynamic@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-14.2.5.tgz#748675b4b2dd5ba25b9b904d4145e60315045f27"
+  integrity sha512-7W8oLs8YEGRr8izgUlpHgBfg3vUb5H0yicTHJY4zIqHJJbG1rTl46CjULaMjYM/FWcS8o7y6XJJcHx0c7pKNsw==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/platform-browser@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-14.1.2.tgz#7667e8a9dbe514282e493b863fc6f85568077146"
-  integrity sha512-rxkAEeacnAkWKoyjteldy5/ECOo5wyq9qJwFSXyX8bZJWh9e4d/FzZfTl4Ctk5+Cqm+2GmhBwAYaaIxpo9EgbA==
+"@angular/platform-browser@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-14.2.5.tgz#345518f8d9dfad439a1159e046133b898323ed0d"
+  integrity sha512-FDZm23N9veSEouQX1YuZUjv7Nillroi+v0VbN1x5iPpFZEudaoZYT3A7bpJwdlxUx/4rGS0caaXNhN3CowtIeQ==
   dependencies:
     tslib "^2.3.0"
 
-"@angular/router@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@angular/router/-/router-14.1.2.tgz#606a37dfc6ad7669b2f7713a794953cc70eb38f6"
-  integrity sha512-YOHAteYHgM6qX0XaD+D+vMLClff2F7yqff8oVyXyPsvL686GV11ZNJFoBt/qDe8WJiSQ295z6RxFOYfNeFrfhQ==
+"@angular/router@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@angular/router/-/router-14.2.5.tgz#d5ddb67e4dbd383de8bef46f3efccca78797718d"
+  integrity sha512-AUHcr9Lln7emJ/aete08UoqWQFZOLH1MhuP78r2pixvnNiZ9C8hcevX1rGGax0Po/Gy4PSJ4wnFhZPgifqCguQ==
   dependencies:
     tslib "^2.3.0"
 
@@ -418,6 +430,11 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.0.tgz#86850b8597ea6962089770952075dcaabb8dba34"
   integrity sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==
 
+"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.19.3":
+  version "7.19.3"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.19.3.tgz#707b939793f867f5a73b2666e6d9a3396eb03151"
+  integrity sha512-prBHMK4JYYK+wDjJF1q99KK4JLL+egWS4nmNqdlMUgCExMZ+iZW0hGhyC3VEbsPjvaN0TBhW//VIFwBrk8sEiw==
+
 "@babel/compat-data@^7.18.6", "@babel/compat-data@^7.18.8":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d"
@@ -445,6 +462,27 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.10.tgz#39ad504991d77f1f3da91be0b8b949a5bc466fb8"
+  integrity sha512-JQM6k6ENcBFKVtWvLavlvi/mPcpYZ3+R+2EySDEMSMbp7Mn4FexlbbJVrx2R7Ijhr01T8gyqrOaABWIOgxeUyw==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.10"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-module-transforms" "^7.18.9"
+    "@babel/helpers" "^7.18.9"
+    "@babel/parser" "^7.18.10"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.18.10"
+    "@babel/types" "^7.18.10"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.1"
+    semver "^6.3.0"
+
 "@babel/core@7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.6.tgz#54a107a3c298aee3fe5e1947a6464b9b6faca03d"
@@ -508,6 +546,15 @@
     json5 "^2.1.2"
     semver "^6.3.0"
 
+"@babel/generator@7.18.12":
+  version "7.18.12"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.12.tgz#fa58daa303757bd6f5e4bbca91b342040463d9f4"
+  integrity sha512-dfQ8ebCN98SvyL7IxNMCUtZQSq5R7kxgN+r8qYTGDmmSion1hX2C0zq2yo1bsCDhXixokv1SAWTZUMYbO/V5zg==
+  dependencies:
+    "@babel/types" "^7.18.10"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
 "@babel/generator@7.18.7":
   version "7.18.7"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.7.tgz#2aa78da3c05aadfc82dbac16c99552fc802284bd"
@@ -526,6 +573,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.18.10", "@babel/generator@^7.19.3":
+  version "7.19.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.19.3.tgz#d7f4d1300485b4547cb6f94b27d10d237b42bf59"
+  integrity sha512-fqVZnmp1ncvZU757UzDheKZpfPgatqY59XtW2/j/18H7u76akb8xqvjw82f+i2UKd/ksYsSick/BCLQUUtJ/qQ==
+  dependencies:
+    "@babel/types" "^7.19.3"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
 "@babel/generator@^7.18.6", "@babel/generator@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.9.tgz#68337e9ea8044d6ddc690fb29acae39359cca0a5"
@@ -575,6 +631,16 @@
     browserslist "^4.17.5"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.19.0":
+  version "7.19.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.3.tgz#a10a04588125675d7c7ae299af86fa1b2ee038ca"
+  integrity sha512-65ESqLGyGmLvgR0mst5AdW1FkNlj9rQsCKduzEoEPhBCDFGXvz2jW6bXFG6i0/MrV2s7hhXjjb2yAzcPuQlLwg==
+  dependencies:
+    "@babel/compat-data" "^7.19.3"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.21.3"
+    semver "^6.3.0"
+
 "@babel/helper-compilation-targets@^7.18.6", "@babel/helper-compilation-targets@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz#69e64f57b524cde3e5ff6cc5a9f4a387ee5563bf"
@@ -668,6 +734,18 @@
     resolve "^1.14.2"
     semver "^6.1.2"
 
+"@babel/helper-define-polyfill-provider@^0.3.2", "@babel/helper-define-polyfill-provider@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.3.tgz#8612e55be5d51f0cd1f36b4a5a83924e89884b7a"
+  integrity sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.17.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    debug "^4.1.1"
+    lodash.debounce "^4.0.8"
+    resolve "^1.14.2"
+    semver "^6.1.2"
+
 "@babel/helper-environment-visitor@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
@@ -711,6 +789,14 @@
     "@babel/template" "^7.18.6"
     "@babel/types" "^7.18.9"
 
+"@babel/helper-function-name@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz#941574ed5390682e872e52d3f38ce9d1bef4648c"
+  integrity sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/types" "^7.19.0"
+
 "@babel/helper-get-function-arity@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
@@ -802,6 +888,20 @@
     "@babel/traverse" "^7.18.9"
     "@babel/types" "^7.18.9"
 
+"@babel/helper-module-transforms@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz#309b230f04e22c58c6a2c0c0c7e50b216d350c30"
+  integrity sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.0"
+    "@babel/types" "^7.19.0"
+
 "@babel/helper-optimise-call-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz#a34e3560605abbd31a18546bd2aad3e6d9a174f2"
@@ -831,6 +931,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f"
   integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==
 
+"@babel/helper-plugin-utils@^7.19.0":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.19.0.tgz#4796bb14961521f0f8715990bee2fb6e51ce21bf"
+  integrity sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==
+
 "@babel/helper-remap-async-to-generator@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3"
@@ -840,7 +945,7 @@
     "@babel/helper-wrap-function" "^7.16.8"
     "@babel/types" "^7.16.8"
 
-"@babel/helper-remap-async-to-generator@^7.18.6":
+"@babel/helper-remap-async-to-generator@^7.18.6", "@babel/helper-remap-async-to-generator@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
   integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
@@ -914,6 +1019,11 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-string-parser@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
+  integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
+
 "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
@@ -924,6 +1034,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
   integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
 
+"@babel/helper-validator-identifier@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
+  integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
+
 "@babel/helper-validator-option@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
@@ -972,6 +1087,15 @@
     "@babel/traverse" "^7.18.9"
     "@babel/types" "^7.18.9"
 
+"@babel/helpers@^7.18.9":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.19.0.tgz#f30534657faf246ae96551d88dd31e9d1fa1fc18"
+  integrity sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==
+  dependencies:
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.19.0"
+    "@babel/types" "^7.19.0"
+
 "@babel/highlight@^7.16.7":
   version "7.16.10"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
@@ -995,6 +1119,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.3.tgz#b07702b982990bf6fdc1da5049a23fece4c5c3d0"
   integrity sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==
 
+"@babel/parser@^7.18.10", "@babel/parser@^7.19.3":
+  version "7.19.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.3.tgz#8dd36d17c53ff347f9e55c328710321b49479a9a"
+  integrity sha512-pJ9xOlNWHiy9+FuFP09DEAFbAn4JskgRsVcc169w2xRBC3FRGuQEwjeIMMND9L2zc0iEhO/tGv4Zq+km+hxNpQ==
+
 "@babel/parser@^7.18.6", "@babel/parser@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.9.tgz#f2dde0c682ccc264a9a8595efd030a5cc8fd2539"
@@ -1023,7 +1152,7 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
     "@babel/plugin-proposal-optional-chaining" "^7.16.7"
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.6":
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.6", "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz#a11af19aa373d68d561f08e0a57242350ed0ec50"
   integrity sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==
@@ -1032,6 +1161,16 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
     "@babel/plugin-proposal-optional-chaining" "^7.18.9"
 
+"@babel/plugin-proposal-async-generator-functions@7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.18.10.tgz#85ea478c98b0095c3e4102bff3b67d306ed24952"
+  integrity sha512-1mFuY2TOsR1hxbjCo4QL+qlIjV07p4H4EUYw2J/WCqsvFV6V9X9z9YhXbWndc/4fw+hYGlDT7egYxliMp5O6Ew==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
 "@babel/plugin-proposal-async-generator-functions@7.18.6", "@babel/plugin-proposal-async-generator-functions@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.18.6.tgz#aedac81e6fc12bb643374656dd5f2605bf743d17"
@@ -1051,6 +1190,16 @@
     "@babel/helper-remap-async-to-generator" "^7.16.8"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
+"@babel/plugin-proposal-async-generator-functions@^7.18.10":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.19.1.tgz#34f6f5174b688529342288cd264f80c9ea9fb4a7"
+  integrity sha512-0yu8vNATgLy4ivqMNBIwb1HebCelqN7YX8SL3FDXORv/RqT0zEEWUCH4GH44JsSrvCu6GqnAdR5EBFAPeNBB4Q==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
 "@babel/plugin-proposal-class-properties@^7.12.1", "@babel/plugin-proposal-class-properties@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz#925cad7b3b1a2fcea7e59ecc8eb5954f961f91b0"
@@ -1128,7 +1277,7 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-proposal-export-namespace-from@^7.18.6":
+"@babel/plugin-proposal-export-namespace-from@^7.18.6", "@babel/plugin-proposal-export-namespace-from@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
   integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
@@ -1160,7 +1309,7 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.18.6":
+"@babel/plugin-proposal-logical-assignment-operators@^7.18.6", "@babel/plugin-proposal-logical-assignment-operators@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz#8148cbb350483bf6220af06fa6db3690e14b2e23"
   integrity sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==
@@ -1220,7 +1369,7 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
     "@babel/plugin-transform-parameters" "^7.16.7"
 
-"@babel/plugin-proposal-object-rest-spread@^7.18.6":
+"@babel/plugin-proposal-object-rest-spread@^7.18.6", "@babel/plugin-proposal-object-rest-spread@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.18.9.tgz#f9434f6beb2c8cae9dfcf97d2a5941bbbf9ad4e7"
   integrity sha512-kDDHQ5rflIeY5xl69CEqGEZ0KY369ehsCIEbTGb4siHG5BE9sga/T0r0OUwyZNLMmZE79E1kbsqAjwFCW4ds6Q==
@@ -1510,7 +1659,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-block-scoping@^7.18.6":
+"@babel/plugin-transform-block-scoping@^7.18.6", "@babel/plugin-transform-block-scoping@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.18.9.tgz#f9b7e018ac3f373c81452d6ada8bd5a18928926d"
   integrity sha512-5sDIJRV1KtQVEbt/EIBwGy4T01uYIo4KRB3VUqzkhrAIOGx7AoctL9+Ux88btY0zXdDyPJ9mW+bg+v+XEkGmtw==
@@ -1545,6 +1694,21 @@
     "@babel/helper-split-export-declaration" "^7.18.6"
     globals "^11.1.0"
 
+"@babel/plugin-transform-classes@^7.18.9":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.19.0.tgz#0e61ec257fba409c41372175e7c1e606dc79bb20"
+  integrity sha512-YfeEE9kCjqTS9IitkgfJuxjcEtLUHMqa8yUJ6zdz8vR7hKuo6mOy2C05P0F1tdMmDCeuyidKnlrw/iTppHcr2A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-compilation-targets" "^7.19.0"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-replace-supers" "^7.18.9"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    globals "^11.1.0"
+
 "@babel/plugin-transform-computed-properties@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz#66dee12e46f61d2aae7a73710f591eb3df616470"
@@ -1552,7 +1716,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-computed-properties@^7.18.6":
+"@babel/plugin-transform-computed-properties@^7.18.6", "@babel/plugin-transform-computed-properties@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz#2357a8224d402dad623caf6259b611e56aec746e"
   integrity sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==
@@ -1573,6 +1737,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.9"
 
+"@babel/plugin-transform-destructuring@^7.18.9":
+  version "7.18.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.13.tgz#9e03bc4a94475d62b7f4114938e6c5c33372cbf5"
+  integrity sha512-TodpQ29XekIsex2A+YJPj5ax2plkGa8YYY6mFjCohk/IG9IY42Rtuj1FuDeemfg2ipxIFLzPeA83SIBnlhSIow==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
 "@babel/plugin-transform-dotall-regex@^7.16.7", "@babel/plugin-transform-dotall-regex@^7.4.4":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz#6b2d67686fab15fb6a7fd4bd895d5982cfc81241"
@@ -1596,7 +1767,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-duplicate-keys@^7.18.6":
+"@babel/plugin-transform-duplicate-keys@^7.18.6", "@babel/plugin-transform-duplicate-keys@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz#687f15ee3cdad6d85191eb2a372c4528eaa0ae0e"
   integrity sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==
@@ -1626,7 +1797,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-for-of@^7.18.6":
+"@babel/plugin-transform-for-of@^7.18.6", "@babel/plugin-transform-for-of@^7.18.8":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz#6ef8a50b244eb6a0bdbad0c7c61877e4e30097c1"
   integrity sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==
@@ -1642,7 +1813,7 @@
     "@babel/helper-function-name" "^7.16.7"
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-function-name@^7.18.6":
+"@babel/plugin-transform-function-name@^7.18.6", "@babel/plugin-transform-function-name@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
   integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
@@ -1658,7 +1829,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-literals@^7.18.6":
+"@babel/plugin-transform-literals@^7.18.6", "@babel/plugin-transform-literals@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
   integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
@@ -1739,6 +1910,17 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-systemjs@^7.18.9":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.19.0.tgz#5f20b471284430f02d9c5059d9b9a16d4b085a1f"
+  integrity sha512-x9aiR0WXAWmOWsqcsnrzGR+ieaTMVyGyffPVA7F8cXAGt/UxefYv6uSHZLkAFChN5M5Iy1+wjE+xJuPt22H39A==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-module-transforms" "^7.19.0"
+    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
 "@babel/plugin-transform-modules-umd@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz#23dad479fa585283dbd22215bff12719171e7618"
@@ -1890,6 +2072,18 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
+"@babel/plugin-transform-runtime@7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.10.tgz#37d14d1fa810a368fd635d4d1476c0154144a96f"
+  integrity sha512-q5mMeYAdfEbpBAgzl7tBre/la3LeCxmDO1+wMXRdPWbcoMjR3GiXlCLk7JBZVVye0bqTGNMbt0yYVXX1B1jEWQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    babel-plugin-polyfill-corejs2 "^0.3.2"
+    babel-plugin-polyfill-corejs3 "^0.5.3"
+    babel-plugin-polyfill-regenerator "^0.4.0"
+    semver "^6.3.0"
+
 "@babel/plugin-transform-runtime@7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.6.tgz#77b14416015ea93367ca06979710f5000ff34ccb"
@@ -1932,6 +2126,14 @@
     "@babel/helper-plugin-utils" "^7.18.9"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
 
+"@babel/plugin-transform-spread@^7.18.9":
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.19.0.tgz#dd60b4620c2fec806d60cfaae364ec2188d593b6"
+  integrity sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.19.0"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
+
 "@babel/plugin-transform-sticky-regex@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz#c84741d4f4a38072b9a1e2e3fd56d359552e8660"
@@ -1953,7 +2155,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-template-literals@^7.18.6":
+"@babel/plugin-transform-template-literals@^7.18.6", "@babel/plugin-transform-template-literals@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
   integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
@@ -1967,7 +2169,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
-"@babel/plugin-transform-typeof-symbol@^7.18.6":
+"@babel/plugin-transform-typeof-symbol@^7.18.6", "@babel/plugin-transform-typeof-symbol@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz#c8cea68263e45addcd6afc9091429f80925762c0"
   integrity sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==
@@ -1990,6 +2192,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-transform-unicode-escapes@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz#1ecfb0eda83d09bbcb77c09970c2dd55832aa246"
+  integrity sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.9"
+
 "@babel/plugin-transform-unicode-escapes@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.6.tgz#0d01fb7fb2243ae1c033f65f6e3b4be78db75f27"
@@ -2013,6 +2222,87 @@
     "@babel/helper-create-regexp-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
+"@babel/preset-env@7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.18.10.tgz#83b8dfe70d7eea1aae5a10635ab0a5fe60dfc0f4"
+  integrity sha512-wVxs1yjFdW3Z/XkNfXKoblxoHgbtUF7/l3PvvP4m02Qz9TZ6uZGxRVYjSQeR87oQmHco9zWitW5J82DJ7sCjvA==
+  dependencies:
+    "@babel/compat-data" "^7.18.8"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-async-generator-functions" "^7.18.10"
+    "@babel/plugin-proposal-class-properties" "^7.18.6"
+    "@babel/plugin-proposal-class-static-block" "^7.18.6"
+    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
+    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
+    "@babel/plugin-proposal-json-strings" "^7.18.6"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
+    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
+    "@babel/plugin-proposal-object-rest-spread" "^7.18.9"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
+    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-private-methods" "^7.18.6"
+    "@babel/plugin-proposal-private-property-in-object" "^7.18.6"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-class-properties" "^7.12.13"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-import-assertions" "^7.18.6"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+    "@babel/plugin-transform-arrow-functions" "^7.18.6"
+    "@babel/plugin-transform-async-to-generator" "^7.18.6"
+    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
+    "@babel/plugin-transform-block-scoping" "^7.18.9"
+    "@babel/plugin-transform-classes" "^7.18.9"
+    "@babel/plugin-transform-computed-properties" "^7.18.9"
+    "@babel/plugin-transform-destructuring" "^7.18.9"
+    "@babel/plugin-transform-dotall-regex" "^7.18.6"
+    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
+    "@babel/plugin-transform-for-of" "^7.18.8"
+    "@babel/plugin-transform-function-name" "^7.18.9"
+    "@babel/plugin-transform-literals" "^7.18.9"
+    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
+    "@babel/plugin-transform-modules-amd" "^7.18.6"
+    "@babel/plugin-transform-modules-commonjs" "^7.18.6"
+    "@babel/plugin-transform-modules-systemjs" "^7.18.9"
+    "@babel/plugin-transform-modules-umd" "^7.18.6"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.18.6"
+    "@babel/plugin-transform-new-target" "^7.18.6"
+    "@babel/plugin-transform-object-super" "^7.18.6"
+    "@babel/plugin-transform-parameters" "^7.18.8"
+    "@babel/plugin-transform-property-literals" "^7.18.6"
+    "@babel/plugin-transform-regenerator" "^7.18.6"
+    "@babel/plugin-transform-reserved-words" "^7.18.6"
+    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
+    "@babel/plugin-transform-spread" "^7.18.9"
+    "@babel/plugin-transform-sticky-regex" "^7.18.6"
+    "@babel/plugin-transform-template-literals" "^7.18.9"
+    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
+    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
+    "@babel/plugin-transform-unicode-regex" "^7.18.6"
+    "@babel/preset-modules" "^0.1.5"
+    "@babel/types" "^7.18.10"
+    babel-plugin-polyfill-corejs2 "^0.3.2"
+    babel-plugin-polyfill-corejs3 "^0.5.3"
+    babel-plugin-polyfill-regenerator "^0.4.0"
+    core-js-compat "^3.22.1"
+    semver "^6.3.0"
+
 "@babel/preset-env@7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.18.6.tgz#953422e98a5f66bc56cd0b9074eaea127ec86ace"
@@ -2224,6 +2514,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
+  integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.8.4":
   version "7.17.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
@@ -2231,6 +2528,15 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/template@7.18.10", "@babel/template@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
+  integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.10"
+    "@babel/types" "^7.18.10"
+
 "@babel/template@7.18.6", "@babel/template@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.6.tgz#1283f4993e00b929d6e2d3c72fdc9168a2977a31"
@@ -2265,6 +2571,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.18.10", "@babel/traverse@^7.19.0":
+  version "7.19.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.19.3.tgz#3a3c5348d4988ba60884e8494b0592b2f15a04b4"
+  integrity sha512-qh5yf6149zhq2sgIXmwjnsvmnNQC2iw70UFjp4olxucKrWd/dvlUsBI88VSLUsnMNF7/vnOiA+nk1+yLoCqROQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.19.3"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.19.0"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.19.3"
+    "@babel/types" "^7.19.3"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/traverse@^7.18.6", "@babel/traverse@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.9.tgz#deeff3e8f1bad9786874cb2feda7a2d77a904f98"
@@ -2289,6 +2611,15 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.18.10", "@babel/types@^7.19.0", "@babel/types@^7.19.3":
+  version "7.19.3"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.19.3.tgz#fc420e6bbe54880bce6779ffaf315f5e43ec9624"
+  integrity sha512-hGCaQzIY22DJlDh9CH7NOxgKkFjBk0Cw9xDO1Xmh2151ti7wiGfQ3LauXzL4HP1fmFlTX6XjpRETTpUcv7wQLw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.18.10"
+    "@babel/helper-validator-identifier" "^7.19.1"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.18.6", "@babel/types@^7.18.7", "@babel/types@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.9.tgz#7148d64ba133d8d73a41b3172ac4b83a1452205f"
@@ -2369,7 +2700,15 @@
     "@csstools/selector-specificity" "^2.0.2"
     postcss-selector-parser "^6.0.10"
 
-"@csstools/postcss-color-function@^1.1.0":
+"@csstools/postcss-cascade-layers@^1.0.5":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.1.1.tgz#8a997edf97d34071dd2e37ea6022447dd9e795ad"
+  integrity sha512-+KdYrpKC5TgomQr2DlZF4lDEpHcoxnj5IGddYYfBWJAKfj1JtuHUIqMa+E1pJJ+z3kvDViWMqyqPlG4Ja7amQA==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.2"
+    postcss-selector-parser "^6.0.10"
+
+"@csstools/postcss-color-function@^1.1.0", "@csstools/postcss-color-function@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-color-function/-/postcss-color-function-1.1.1.tgz#2bd36ab34f82d0497cfacdc9b18d34b5e6f64b6b"
   integrity sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==
@@ -2377,21 +2716,21 @@
     "@csstools/postcss-progressive-custom-properties" "^1.1.0"
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-font-format-keywords@^1.0.0":
+"@csstools/postcss-font-format-keywords@^1.0.0", "@csstools/postcss-font-format-keywords@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.1.tgz#677b34e9e88ae997a67283311657973150e8b16a"
   integrity sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==
   dependencies:
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-hwb-function@^1.0.1":
+"@csstools/postcss-hwb-function@^1.0.1", "@csstools/postcss-hwb-function@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.2.tgz#ab54a9fce0ac102c754854769962f2422ae8aa8b"
   integrity sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==
   dependencies:
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-ic-unit@^1.0.0":
+"@csstools/postcss-ic-unit@^1.0.0", "@csstools/postcss-ic-unit@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.1.tgz#28237d812a124d1a16a5acc5c3832b040b303e58"
   integrity sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==
@@ -2399,7 +2738,7 @@
     "@csstools/postcss-progressive-custom-properties" "^1.1.0"
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-is-pseudo-class@^2.0.6":
+"@csstools/postcss-is-pseudo-class@^2.0.6", "@csstools/postcss-is-pseudo-class@^2.0.7":
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.7.tgz#846ae6c0d5a1eaa878fce352c544f9c295509cd1"
   integrity sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==
@@ -2407,14 +2746,21 @@
     "@csstools/selector-specificity" "^2.0.0"
     postcss-selector-parser "^6.0.10"
 
-"@csstools/postcss-normalize-display-values@^1.0.0":
+"@csstools/postcss-nested-calc@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz#d7e9d1d0d3d15cf5ac891b16028af2a1044d0c26"
+  integrity sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-normalize-display-values@^1.0.0", "@csstools/postcss-normalize-display-values@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.1.tgz#15da54a36e867b3ac5163ee12c1d7f82d4d612c3"
   integrity sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==
   dependencies:
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-oklab-function@^1.1.0":
+"@csstools/postcss-oklab-function@^1.1.0", "@csstools/postcss-oklab-function@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.1.tgz#88cee0fbc8d6df27079ebd2fa016ee261eecf844"
   integrity sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==
@@ -2436,21 +2782,28 @@
   dependencies:
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-stepped-value-functions@^1.0.0":
+"@csstools/postcss-stepped-value-functions@^1.0.0", "@csstools/postcss-stepped-value-functions@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-1.0.1.tgz#f8772c3681cc2befed695e2b0b1d68e22f08c4f4"
   integrity sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==
   dependencies:
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-trigonometric-functions@^1.0.1":
+"@csstools/postcss-text-decoration-shorthand@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz#ea96cfbc87d921eca914d3ad29340d9bcc4c953f"
+  integrity sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-trigonometric-functions@^1.0.1", "@csstools/postcss-trigonometric-functions@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-1.0.2.tgz#94d3e4774c36d35dcdc88ce091336cb770d32756"
   integrity sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==
   dependencies:
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-unset-value@^1.0.1":
+"@csstools/postcss-unset-value@^1.0.1", "@csstools/postcss-unset-value@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz#c99bb70e2cdc7312948d1eb41df2412330b81f77"
   integrity sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==
@@ -2511,14 +2864,19 @@
     esquery "^1.4.0"
     jsdoc-type-pratt-parser "~3.1.0"
 
-"@eslint/eslintrc@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f"
-  integrity sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==
+"@esbuild/linux-loong64@0.15.5":
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.5.tgz#91aef76d332cdc7c8942b600fa2307f3387e6f82"
+  integrity sha512-UHkDFCfSGTuXq08oQltXxSZmH1TXyWsL+4QhZDWvvLl6mEJQqk3u7/wq1LjhrrAXYIllaTtRSzUXl4Olkf2J8A==
+
+"@eslint/eslintrc@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.2.tgz#58b69582f3b7271d8fa67fe5251767a5b38ea356"
+  integrity sha512-AXYd23w1S/bv3fTs3Lz0vjiYemS08jWkI3hYyS9I1ry+0f+Yjs1wm+sU0BS8qDOPrBIkp4qHYC16I8uVtpLajQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
-    espree "^9.3.2"
+    espree "^9.4.0"
     globals "^13.15.0"
     ignore "^5.2.0"
     import-fresh "^3.2.1"
@@ -2543,15 +2901,25 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@humanwhocodes/config-array@^0.9.2":
-  version "0.9.5"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"
-  integrity sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==
+"@humanwhocodes/config-array@^0.10.5":
+  version "0.10.7"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.7.tgz#6d53769fd0c222767e6452e8ebda825c22e9f0dc"
+  integrity sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==
   dependencies:
     "@humanwhocodes/object-schema" "^1.2.1"
     debug "^4.1.1"
     minimatch "^3.0.4"
 
+"@humanwhocodes/gitignore-to-minimatch@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz#316b0a63b91c10e53f242efb4ace5c3b34e8728d"
+  integrity sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
 "@humanwhocodes/object-schema@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
@@ -2804,10 +3172,10 @@
   resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-14.1.0.tgz#2e79fffe93f35939ed3dc65ab5aa830afdb13d39"
   integrity sha512-d4U6ymDCXckVgfjYEv1Wjzd78ZSm0NKgq8mN6FdlrCupg02LPIODjeKyNr4c4zwMAOJeHkVNEZ+USoDEK3XSsw==
 
-"@ngtools/webpack@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-14.1.2.tgz#f98849fb530ced41d32e52cd7fa53bd5a46ccea6"
-  integrity sha512-ghKdIQFLFw9Nid4qCPk0YbZ8ed5tSfoupULDFFmKJNg/aIQAckY6iuLCxjK3oqCU9lg71ikuq8zQS/WjeRjqGw==
+"@ngtools/webpack@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-14.2.5.tgz#ccc4fd9a6eb8fe6fc940ff3ac4772ddfd4bad7e6"
+  integrity sha512-Thwq1WyOOq1PIWMcjAAqKI1hbvGC0ywxbNoDadOlWpEFm6k0dvXC6Zm9lnVkePjxlPfagvbnv55+Lv9Vmygc1g==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -2913,46 +3281,13 @@
     read-package-json-fast "^2.0.3"
     which "^2.0.2"
 
-"@nrwl/cli@14.4.3":
-  version "14.4.3"
-  resolved "https://registry.yarnpkg.com/@nrwl/cli/-/cli-14.4.3.tgz#3d949e0da32e3af9f285ec376ec4f06314339716"
-  integrity sha512-9WzOOXgdf9YJxqte5e8KNkM3NWOuBgM7hz9jEOyw53Ht1Y2H8xLDPVkqDTS9kROgcyMQxHIjIcw80wZNaZL8Mw==
+"@schematics/angular@14.2.5":
+  version "14.2.5"
+  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-14.2.5.tgz#e861c4c1c9e984b8962a130c298ca56d9bb77156"
+  integrity sha512-oYtQJi68EcDK940fny9t12JGE6z/ZbLeCZs+cPh4XT7ytRdO4anypBtKx18+E+b6jUnox4FxIGOf2WpkSAosYA==
   dependencies:
-    nx "14.4.3"
-
-"@nrwl/devkit@^14.2.4":
-  version "14.4.3"
-  resolved "https://registry.yarnpkg.com/@nrwl/devkit/-/devkit-14.4.3.tgz#4f8ed59bc1e0188e2fe6e4b59b03f783ddca33a0"
-  integrity sha512-CFGWQyzrqs4q7YUk37E5Ca+HDj9qbhfw6oI/Omf42MitEpoEnWxVKy/h1pua6ykHn8ZDVvS7sp6nrmg+r6OmDA==
-  dependencies:
-    ejs "^3.1.7"
-    ignore "^5.0.4"
-    rxjs "^6.5.4"
-    semver "7.3.4"
-    tslib "^2.3.0"
-
-"@nrwl/tao@14.4.3":
-  version "14.4.3"
-  resolved "https://registry.yarnpkg.com/@nrwl/tao/-/tao-14.4.3.tgz#08b86a81cb71574f491e9254104eaea1f7c6c5fd"
-  integrity sha512-sHlnqTlJ/XEc/lv0MIKYI1R643CWFvYL6QyZD7f38FvP1RblZ6eVqvOJcrkpwcvRWcZNEY+GrQpb1Io1ZvMEmQ==
-  dependencies:
-    nx "14.4.3"
-
-"@parcel/watcher@2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.0.4.tgz#f300fef4cc38008ff4b8c29d92588eced3ce014b"
-  integrity sha512-cTDi+FUDBIUOBKEtj+nhiJ71AZVlkAsQFuGQTun5tV9mwQBQgZvhCzG+URPQc8myeN32yRVZEfVAPCs1RW+Jvg==
-  dependencies:
-    node-addon-api "^3.2.1"
-    node-gyp-build "^4.3.0"
-
-"@schematics/angular@14.1.2":
-  version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-14.1.2.tgz#edc828c3bf3e5eb9c55d11e560d3fd680819021c"
-  integrity sha512-vttvYpffkG/cy9aUCXLW+Dc0msUNbyoFXTQRHN/MYX5uNVvXaRCEzWVE3tp87Dt5XlGo2r9e21gNAoY1TyXj3Q==
-  dependencies:
-    "@angular-devkit/core" "14.1.2"
-    "@angular-devkit/schematics" "14.1.2"
+    "@angular-devkit/core" "14.2.5"
+    "@angular-devkit/schematics" "14.2.5"
     jsonc-parser "3.1.0"
 
 "@sideway/address@^4.1.3":
@@ -2977,39 +3312,39 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
   integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==
 
-"@storybook/addons@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.10.tgz#bff2f8fb8453e9df04fa6dbc41341fd05f4cdeba"
-  integrity sha512-VD4tBCQ23PkSeDoxuHcKy0RfhIs3oMYjBacOZx7d0bvOzK9WjPyvE2ysDAh7r/ceqnwmWHAScIpE+I1RU7gl+g==
+"@storybook/addons@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.12.tgz#891767b5f88ea99b956cf19e9e2893594068adc7"
+  integrity sha512-y3cgxZq41YGnuIlBJEuJjSFdMsm8wnvlNOGUP9Q+Er2dgfx8rJz4Q22o4hPjpvpaj4XdBtxCJXI2NeFpN59+Cw==
   dependencies:
-    "@storybook/api" "6.5.10"
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/api" "6.5.12"
+    "@storybook/channels" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/core-events" "6.5.12"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/router" "6.5.10"
-    "@storybook/theming" "6.5.10"
+    "@storybook/router" "6.5.12"
+    "@storybook/theming" "6.5.12"
     "@types/webpack-env" "^1.16.0"
     core-js "^3.8.2"
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
 
-"@storybook/angular@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/angular/-/angular-6.5.10.tgz#81fdef3ef2fc47af038df4c47edfc1dd95657ddf"
-  integrity sha512-UxhZ8lHxGl/mCw/EOlW7+6ZnY61+i1aptV0rujPNoIVKmGDXkJWTyL8pxYrqde2WCTLoQoIGhEPwU0hz26Xawg==
-  dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+"@storybook/angular@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/angular/-/angular-6.5.12.tgz#f5b2f3c79b845edb3a38ee7ab37b52ebfa95da81"
+  integrity sha512-/zZLm72sUWQ/G7Vdkd/5Fxf2nNwjABU/d3uOPPWgTKSq8YIoJc1f2cc6ytRQTceQBvZCOUZWWsJRlkjMOyZJgQ==
+  dependencies:
+    "@storybook/addons" "6.5.12"
+    "@storybook/api" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/core" "6.5.12"
+    "@storybook/core-common" "6.5.12"
+    "@storybook/core-events" "6.5.12"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/docs-tools" "6.5.10"
-    "@storybook/node-logger" "6.5.10"
+    "@storybook/docs-tools" "6.5.12"
+    "@storybook/node-logger" "6.5.12"
     "@storybook/semver" "^7.3.2"
-    "@storybook/store" "6.5.10"
+    "@storybook/store" "6.5.12"
     "@types/node" "^14.14.20 || ^16.0.0"
     "@types/react" "^16.14.23"
     "@types/react-dom" "^16.9.14"
@@ -3036,18 +3371,18 @@
     util-deprecate "^1.0.2"
     webpack ">=4.0.0 <6.0.0"
 
-"@storybook/api@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.10.tgz#215623844648f0da2ac646fdcdd1345c2e1a8490"
-  integrity sha512-AkmgSPNEGdKp4oZA4KQ+RJsacw7GwfvjsVDnCkcXqS9zmSr/RNL0fhpcd60KKkmx/hGKPTDFpK3ZayxDrJ/h4A==
+"@storybook/api@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.12.tgz#7cc82087fc9298be03f15bf4ab9c4aab294b3bac"
+  integrity sha512-DuUZmMlQxkFNU9Vgkp9aNfCkAongU76VVmygvCuSpMVDI9HQ2lG0ydL+ppL4XKoSMCCoXTY6+rg4hJANnH+1AQ==
   dependencies:
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/channels" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/core-events" "6.5.12"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/router" "6.5.10"
+    "@storybook/router" "6.5.12"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.5.10"
+    "@storybook/theming" "6.5.12"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
     global "^4.4.0"
@@ -3059,28 +3394,28 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/builder-webpack4@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.5.10.tgz#79e95323577a37349ab3c81193fa249ac5c50173"
-  integrity sha512-AoKjsCNoQQoZXYwBDxO8s+yVEd5FjBJAaysEuUTHq2fb81jwLrGcEOo6hjw4jqfugZQIzYUEjPazlvubS78zpw==
+"@storybook/builder-webpack4@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.5.12.tgz#dcfd91d3e78505943864335bc2b84ccc4d00a54e"
+  integrity sha512-TsthT5jm9ZxQPNOZJbF5AV24me3i+jjYD7gbdKdSHrOVn1r3ydX4Z8aD6+BjLCtTn3T+e8NMvUkL4dInEo1x6g==
   dependencies:
     "@babel/core" "^7.12.10"
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/channel-postmessage" "6.5.10"
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/core-events" "6.5.10"
-    "@storybook/node-logger" "6.5.10"
-    "@storybook/preview-web" "6.5.10"
-    "@storybook/router" "6.5.10"
+    "@storybook/addons" "6.5.12"
+    "@storybook/api" "6.5.12"
+    "@storybook/channel-postmessage" "6.5.12"
+    "@storybook/channels" "6.5.12"
+    "@storybook/client-api" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/components" "6.5.12"
+    "@storybook/core-common" "6.5.12"
+    "@storybook/core-events" "6.5.12"
+    "@storybook/node-logger" "6.5.12"
+    "@storybook/preview-web" "6.5.12"
+    "@storybook/router" "6.5.12"
     "@storybook/semver" "^7.3.2"
-    "@storybook/store" "6.5.10"
-    "@storybook/theming" "6.5.10"
-    "@storybook/ui" "6.5.10"
+    "@storybook/store" "6.5.12"
+    "@storybook/theming" "6.5.12"
+    "@storybook/ui" "6.5.12"
     "@types/node" "^14.0.10 || ^16.0.0"
     "@types/webpack" "^4.41.26"
     autoprefixer "^9.8.6"
@@ -3112,27 +3447,27 @@
     webpack-hot-middleware "^2.25.1"
     webpack-virtual-modules "^0.2.2"
 
-"@storybook/builder-webpack5@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-6.5.10.tgz#de78a8a262410bbe65eecc62f2beaed1fe44dd5d"
-  integrity sha512-Hcsm/TzGRXHndgQCftt+pzI7GQJRqAv8A8ie5b3aFcodhJfK0qzZsQD4Y4ZWxXh1I/xe5t74Kl2qUJ40PX+geA==
+"@storybook/builder-webpack5@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-6.5.12.tgz#29fe22466b88d8f5c4b408f303f7fb189ad6eadb"
+  integrity sha512-jK5jWxhSbMAM/onPB6WN7xVqwZnAmzJljOG24InO/YIjW8pQof7MeAXCYBM4rYM+BbK61gkZ/RKxwlkqXBWv+Q==
   dependencies:
     "@babel/core" "^7.12.10"
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/channel-postmessage" "6.5.10"
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/core-events" "6.5.10"
-    "@storybook/node-logger" "6.5.10"
-    "@storybook/preview-web" "6.5.10"
-    "@storybook/router" "6.5.10"
+    "@storybook/addons" "6.5.12"
+    "@storybook/api" "6.5.12"
+    "@storybook/channel-postmessage" "6.5.12"
+    "@storybook/channels" "6.5.12"
+    "@storybook/client-api" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/components" "6.5.12"
+    "@storybook/core-common" "6.5.12"
+    "@storybook/core-events" "6.5.12"
+    "@storybook/node-logger" "6.5.12"
+    "@storybook/preview-web" "6.5.12"
+    "@storybook/router" "6.5.12"
     "@storybook/semver" "^7.3.2"
-    "@storybook/store" "6.5.10"
-    "@storybook/theming" "6.5.10"
+    "@storybook/store" "6.5.12"
+    "@storybook/theming" "6.5.12"
     "@types/node" "^14.0.10 || ^16.0.0"
     babel-loader "^8.0.0"
     babel-plugin-named-exports-order "^0.0.2"
@@ -3156,51 +3491,51 @@
     webpack-hot-middleware "^2.25.1"
     webpack-virtual-modules "^0.4.1"
 
-"@storybook/channel-postmessage@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.5.10.tgz#be8971b4b7f91b664bb2c6965fdfb073d541a03e"
-  integrity sha512-t9PTA0UzFvYa3IlOfpBOolfrRMPTjUMIeCQ6FNyM0aj5GqLKSvoQzP8NeoRpIrvyf6ljFKKdaMaZ3fiCvh45ag==
+"@storybook/channel-postmessage@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.5.12.tgz#045c5920eb6924b11411d1d5f6475a0d83c982e3"
+  integrity sha512-SL/tJBLOdDlbUAAxhiZWOEYd5HI4y8rN50r6jeed5nD8PlocZjxJ6mO0IxnePqIL9Yu3nSrQRHrtp8AJvPX0Yg==
   dependencies:
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/channels" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/core-events" "6.5.12"
     core-js "^3.8.2"
     global "^4.4.0"
     qs "^6.10.0"
     telejson "^6.0.8"
 
-"@storybook/channel-websocket@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-6.5.10.tgz#bd1316a9b555229b215e5054a76b57c503dd8adc"
-  integrity sha512-RTXMZbMWCS3xU+4GVIdfnUXsKcwg/WTozy88/5OxaKjGw6KgRedqLAQJKJ6Y5XlnwIcWelirkHj/COwTTXhbPg==
+"@storybook/channel-websocket@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-6.5.12.tgz#4796e2436900d73fb867591f7d7cf8f94898d51b"
+  integrity sha512-0t5dLselHVKTRYaphxx1dRh4pmOFCfR7h8oNJlOvJ29Qy5eNyVujDG9nhwWbqU6IKayuP4nZrAbe9Req9YZYlQ==
   dependencies:
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
+    "@storybook/channels" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
     core-js "^3.8.2"
     global "^4.4.0"
     telejson "^6.0.8"
 
-"@storybook/channels@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.10.tgz#fca5b0d1ea8d30b022e805301ed436407c867ac4"
-  integrity sha512-lo26YZ6kWpHXLhuHJF4P/bICY7jD/rXEZqReKtGOSk1Lv99/xvG6pqmcy3hWLf3v3Dy/8otjRPSR7izFVIIZgQ==
+"@storybook/channels@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.12.tgz#98baf01691d263e2ac341853361ec69c1a6621bc"
+  integrity sha512-X5XaKbe4b7LXJ4sUakBo00x6pXnW78JkOonHoaKoWsccHLlEzwfBZpVVekhVZnqtCoLT23dB8wjKgA71RYWoiw==
   dependencies:
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/client-api@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.5.10.tgz#0bc3f68ce014ce1ffd560472a893ba04be370f09"
-  integrity sha512-3wBWZl3NvMFgMovgEh+euiARAT2FXzpvTF4Q1gerGMNNDlrGxHnFvSuy4FHg/irtOGLa4yLz43ULFbYtpKw0Lg==
+"@storybook/client-api@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.5.12.tgz#9d02b2a8f5d4137918257742d72ae10c6a70a477"
+  integrity sha512-+JiRSgiU829KPc25nG/k0+Ao2nUelHUe8Y/9cRoKWbCAGzi4xd0JLhHAOr9Oi2szWx/OI1L08lxVv1+WTveAeA==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/channel-postmessage" "6.5.10"
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.12"
+    "@storybook/channel-postmessage" "6.5.12"
+    "@storybook/channels" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/core-events" "6.5.12"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/store" "6.5.10"
+    "@storybook/store" "6.5.12"
     "@types/qs" "^6.9.5"
     "@types/webpack-env" "^1.16.0"
     core-js "^3.8.2"
@@ -3215,43 +3550,43 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/client-logger@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.10.tgz#cfea823a5b8444409daa74f854c5d05367986b34"
-  integrity sha512-/xA0MHOevXev68hyLMQw8Qo8KczSIdXOxliAgrycMTkDmw5eKeA8TP7B8zP3wGuq/e3MrdD9/8MWhb/IQBNC3w==
+"@storybook/client-logger@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.12.tgz#d9809e13dc7939eb61452a5e94b1ccb61c4a022c"
+  integrity sha512-IrkMr5KZcudX935/C2balFbxLHhkvQnJ78rbVThHDVckQ7l3oIXTh66IMzldeOabVFDZEMiW8AWuGEYof+JtLw==
   dependencies:
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/components@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.10.tgz#268e1269bc3d262f7dcec13f96c3b844919687b8"
-  integrity sha512-9OhgB8YQfGwOKjo/N96N5mrtJ6qDVVoEM1zuhea32tJUd2eYf0aSWpryA9VnOM0V1q/8DAoCg5rPBMYWMBU5uw==
+"@storybook/components@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.12.tgz#e137f0683ea92e22de116bfa62cfd65ce4efe01d"
+  integrity sha512-NAAGl5PDXaHdVLd6hA+ttmLwH3zAVGXeUmEubzKZ9bJzb+duhFKxDa9blM4YEkI+palumvgAMm0UgS7ou680Ig==
   dependencies:
-    "@storybook/client-logger" "6.5.10"
+    "@storybook/client-logger" "6.5.12"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/theming" "6.5.10"
+    "@storybook/theming" "6.5.12"
     core-js "^3.8.2"
     memoizerific "^1.11.3"
     qs "^6.10.0"
     regenerator-runtime "^0.13.7"
     util-deprecate "^1.0.2"
 
-"@storybook/core-client@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.5.10.tgz#90c86923236c8efff33d454a0dc552f6df4346b1"
-  integrity sha512-THsIjNrOrampTl0Lgfjvfjk1JnktKb4CQLOM80KpQb4cjDqorBjJmErzUkUQ2y3fXvrDmQ/kUREkShET4XEdtA==
-  dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/channel-postmessage" "6.5.10"
-    "@storybook/channel-websocket" "6.5.10"
-    "@storybook/client-api" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+"@storybook/core-client@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.5.12.tgz#1a3889604b92292d210d956c46f86a64dd7a9483"
+  integrity sha512-jyAd0ud6zO+flpLv0lEHbbt1Bv9Ms225M6WTQLrfe7kN/7j1pVKZEoeVCLZwkJUtSKcNiWQxZbS15h31pcYwqg==
+  dependencies:
+    "@storybook/addons" "6.5.12"
+    "@storybook/channel-postmessage" "6.5.12"
+    "@storybook/channel-websocket" "6.5.12"
+    "@storybook/client-api" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/core-events" "6.5.12"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/preview-web" "6.5.10"
-    "@storybook/store" "6.5.10"
-    "@storybook/ui" "6.5.10"
+    "@storybook/preview-web" "6.5.12"
+    "@storybook/store" "6.5.12"
+    "@storybook/ui" "6.5.12"
     airbnb-js-shims "^2.2.1"
     ansi-to-html "^0.6.11"
     core-js "^3.8.2"
@@ -3263,10 +3598,10 @@
     unfetch "^4.2.0"
     util-deprecate "^1.0.2"
 
-"@storybook/core-common@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.10.tgz#6b93449548b0890f5c68d89f0ca78e092026182c"
-  integrity sha512-Bx+VKkfWdrAmD8T51Sjq/mMhRaiapBHcpG4cU5bc3DMbg+LF2/yrgqv/cjVu+m5gHAzYCac5D7gqzBgvG7Myww==
+"@storybook/core-common@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.12.tgz#9f8d5cb3812382c49c84dcfb4279a39e228a1b83"
+  integrity sha512-gG20+eYdIhwQNu6Xs805FLrOCWtkoc8Rt8gJiRt8yXzZh9EZkU4xgCRoCxrrJ03ys/gTiCFbBOfRi749uM3z4w==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-proposal-class-properties" "^7.12.1"
@@ -3290,7 +3625,7 @@
     "@babel/preset-react" "^7.12.10"
     "@babel/preset-typescript" "^7.12.7"
     "@babel/register" "^7.12.1"
-    "@storybook/node-logger" "6.5.10"
+    "@storybook/node-logger" "6.5.12"
     "@storybook/semver" "^7.3.2"
     "@types/node" "^14.0.10 || ^16.0.0"
     "@types/pretty-hrtime" "^1.0.0"
@@ -3319,30 +3654,30 @@
     util-deprecate "^1.0.2"
     webpack "4"
 
-"@storybook/core-events@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.10.tgz#66d87c8ea18db8e448018a16a3d0198ddbcbc683"
-  integrity sha512-EVb1gO1172klVIAABLOoigFMx0V88uctY0K/qVCO8n6v+wd2+0Ccn63kl+gTxsAC3WZ8XhXh9q2w5ImHklVECw==
+"@storybook/core-events@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.12.tgz#28bd727cc4216012409bfac412fcb708346c56bc"
+  integrity sha512-0AMyMM19R/lHsYRfWqM8zZTXthasTAK2ExkSRzYi2GkIaVMxRKtM33YRwxKIpJ6KmIKIs8Ru3QCXu1mfCmGzNg==
   dependencies:
     core-js "^3.8.2"
 
-"@storybook/core-server@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.5.10.tgz#ada3d647833c02cb8c742281c1f314ff866f96f8"
-  integrity sha512-jqwpA0ccA8X5ck4esWBid04+cEIVqirdAcqJeNb9IZAD+bRreO4Im8ilzr7jc5AmQ9fkqHs2NByFKh9TITp8NQ==
+"@storybook/core-server@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.5.12.tgz#bc47a2af4972f7c9cddb8b5961bd5f04a3f7f09f"
+  integrity sha512-q1b/XKwoLUcCoCQ+8ndPD5THkEwXZYJ9ROv16i2VGUjjjAuSqpEYBq5GMGQUgxlWp1bkxtdGL2Jz+6pZfvldzA==
   dependencies:
     "@discoveryjs/json-ext" "^0.5.3"
-    "@storybook/builder-webpack4" "6.5.10"
-    "@storybook/core-client" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/builder-webpack4" "6.5.12"
+    "@storybook/core-client" "6.5.12"
+    "@storybook/core-common" "6.5.12"
+    "@storybook/core-events" "6.5.12"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/csf-tools" "6.5.10"
-    "@storybook/manager-webpack4" "6.5.10"
-    "@storybook/node-logger" "6.5.10"
+    "@storybook/csf-tools" "6.5.12"
+    "@storybook/manager-webpack4" "6.5.12"
+    "@storybook/node-logger" "6.5.12"
     "@storybook/semver" "^7.3.2"
-    "@storybook/store" "6.5.10"
-    "@storybook/telemetry" "6.5.10"
+    "@storybook/store" "6.5.12"
+    "@storybook/telemetry" "6.5.12"
     "@types/node" "^14.0.10 || ^16.0.0"
     "@types/node-fetch" "^2.5.7"
     "@types/pretty-hrtime" "^1.0.0"
@@ -3377,18 +3712,18 @@
     ws "^8.2.3"
     x-default-browser "^0.4.0"
 
-"@storybook/core@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.5.10.tgz#15ec8be85943251e25c2c24e80e20dcacc4fed65"
-  integrity sha512-K86yYa0tYlMxADlwQTculYvPROokQau09SCVqpsLg3wJCTvYFL4+SIqcYoyBSbFmHOdnYbJgPydjN33MYLiOZQ==
+"@storybook/core@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.5.12.tgz#b12456a76de584ee3b0818b5f50c35338ac66f93"
+  integrity sha512-+o3psAVWL+5LSwyJmEbvhgxKO1Et5uOX8ujNVt/f1fgwJBIf6BypxyPKu9YGQDRzcRssESQQZWNrZCCAZlFeuQ==
   dependencies:
-    "@storybook/core-client" "6.5.10"
-    "@storybook/core-server" "6.5.10"
+    "@storybook/core-client" "6.5.12"
+    "@storybook/core-server" "6.5.12"
 
-"@storybook/csf-tools@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.5.10.tgz#ae6f1ebd4951e8978c8fe3e08ddd2bd269bf922b"
-  integrity sha512-H77kZQEisu7+skzeIbNZwmE09OqLjwJTeFhLN1pcjxKVa30LEI3pBHcNBxVKqgxl+Yg3KkB7W/ArLO2N+i2ohw==
+"@storybook/csf-tools@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.5.12.tgz#7740becd059686001d4c1b4db3f43e792362d918"
+  integrity sha512-BPhnB1xJtBVOzXuCURzQRdXcstE27ht4qoTgQkbwUTy4MEtUZ/f1AnHSYRdzrgukXdUFWseNIK4RkNdJpfOfNQ==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/generator" "^7.12.11"
@@ -3412,33 +3747,33 @@
   dependencies:
     lodash "^4.17.15"
 
-"@storybook/docs-tools@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-6.5.10.tgz#30baa62c1ca3a18b13625b6b305e23e39f404416"
-  integrity sha512-/bvYgOO+CxMEcHifkjJg0A60OTGOhcjGxnsB1h0gJuxMrqA/7Qwc108bFmPiX0eiD1BovFkZLJV4O6OY7zP5Vw==
+"@storybook/docs-tools@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-6.5.12.tgz#22138cc810e8790b21d518cd48a3e2716d43c751"
+  integrity sha512-8brf8W89KVk95flVqW0sYEqkL+FBwb5W9CnwI+Ggd6r2cqXe9jyg+0vDZFdYp6kYNQKrPr4fbXGrGVXQG18/QQ==
   dependencies:
     "@babel/core" "^7.12.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/store" "6.5.10"
+    "@storybook/store" "6.5.12"
     core-js "^3.8.2"
     doctrine "^3.0.0"
     lodash "^4.17.21"
     regenerator-runtime "^0.13.7"
 
-"@storybook/manager-webpack4@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.5.10.tgz#41bae252b863484f293954ef2d2dc80bf3e028f1"
-  integrity sha512-N/TlNDhuhARuFipR/ZJ/xEVESz23iIbCsZ4VNehLHm8PpiGlQUehk+jMjWmz5XV0bJItwjRclY+CU3GjZKblfQ==
+"@storybook/manager-webpack4@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.5.12.tgz#7e0ae21455e1c070d291942c18373ceaa58c0e05"
+  integrity sha512-LH3e6qfvq2znEdxe2kaWtmdDPTnvSkufzoC9iwOgNvo3YrTGrYNyUTDegvW293TOTVfUn7j6TBcsOxIgRnt28g==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-transform-template-literals" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
-    "@storybook/addons" "6.5.10"
-    "@storybook/core-client" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/node-logger" "6.5.10"
-    "@storybook/theming" "6.5.10"
-    "@storybook/ui" "6.5.10"
+    "@storybook/addons" "6.5.12"
+    "@storybook/core-client" "6.5.12"
+    "@storybook/core-common" "6.5.12"
+    "@storybook/node-logger" "6.5.12"
+    "@storybook/theming" "6.5.12"
+    "@storybook/ui" "6.5.12"
     "@types/node" "^14.0.10 || ^16.0.0"
     "@types/webpack" "^4.41.26"
     babel-loader "^8.0.0"
@@ -3466,20 +3801,20 @@
     webpack-dev-middleware "^3.7.3"
     webpack-virtual-modules "^0.2.2"
 
-"@storybook/manager-webpack5@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack5/-/manager-webpack5-6.5.10.tgz#dff8e53615906284b68df013935e8a6234ddaafe"
-  integrity sha512-uRo+6e5MiVOtyFVMYIKVqvpDveCjHyzXBfetSYR7rKEZoaDMEnLLiuF7DIH12lzxwmzCJ1gIc4lf5HFiTMNkgw==
+"@storybook/manager-webpack5@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack5/-/manager-webpack5-6.5.12.tgz#77c98a63ef6c8d2ae0b1e69eb432818d0c25e672"
+  integrity sha512-F+KgoINhfo1ArbirCc9L+EyADYD8Z4t0LyZYDVcBiZ8DlRIMIoUSye6tDsnyEm+OPloLVAcGwRMYgFhuHB70Lg==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-transform-template-literals" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
-    "@storybook/addons" "6.5.10"
-    "@storybook/core-client" "6.5.10"
-    "@storybook/core-common" "6.5.10"
-    "@storybook/node-logger" "6.5.10"
-    "@storybook/theming" "6.5.10"
-    "@storybook/ui" "6.5.10"
+    "@storybook/addons" "6.5.12"
+    "@storybook/core-client" "6.5.12"
+    "@storybook/core-common" "6.5.12"
+    "@storybook/node-logger" "6.5.12"
+    "@storybook/theming" "6.5.12"
+    "@storybook/ui" "6.5.12"
     "@types/node" "^14.0.10 || ^16.0.0"
     babel-loader "^8.0.0"
     case-sensitive-paths-webpack-plugin "^2.3.0"
@@ -3521,10 +3856,10 @@
     prettier ">=2.2.1 <=2.3.0"
     ts-dedent "^2.0.0"
 
-"@storybook/node-logger@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.10.tgz#bce4c04009c4b62d6d2fb617176d7ef0084e9e89"
-  integrity sha512-bYswXIKV7Stru8vYfkjUMNN8UhF7Qg7NRsUvG5Djt5lLIae1XmUIgnH40mU/nW4X4BSfcR9MKxsSsngvn2WmQg==
+"@storybook/node-logger@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.12.tgz#0f9efcd1a37c7aae493b22fe33cacca87c135b9b"
+  integrity sha512-jdLtT3mX5GQKa+0LuX0q0sprKxtCGf6HdXlKZGD5FEuz4MgJUGaaiN0Hgi+U7Z4tVNOtSoIbYBYXHqfUgJrVZw==
   dependencies:
     "@types/npmlog" "^4.1.2"
     chalk "^4.1.0"
@@ -3532,17 +3867,17 @@
     npmlog "^5.0.1"
     pretty-hrtime "^1.0.3"
 
-"@storybook/preview-web@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/preview-web/-/preview-web-6.5.10.tgz#81bf5d3f5fca9e26099c057206bd8e684225989b"
-  integrity sha512-sTC/o5gkvALOtcNgtApGKGN9EavvSxRHBeBh+5BQjV2qQ8ap+26RsfUizNBECAa2Jrn4osaDYn9HRhJLFL69WA==
+"@storybook/preview-web@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-web/-/preview-web-6.5.12.tgz#09f67908513b9e85254b0b3adea498c8a3e6f7e3"
+  integrity sha512-Q5mduCJsY9zhmlsrhHvtOBA3Jt2n45bhfVkiUEqtj8fDit45/GW+eLoffv8GaVTGjV96/Y1JFwDZUwU6mEfgGQ==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/channel-postmessage" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.12"
+    "@storybook/channel-postmessage" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/core-events" "6.5.12"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/store" "6.5.10"
+    "@storybook/store" "6.5.12"
     ansi-to-html "^0.6.11"
     core-js "^3.8.2"
     global "^4.4.0"
@@ -3554,12 +3889,12 @@
     unfetch "^4.2.0"
     util-deprecate "^1.0.2"
 
-"@storybook/router@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.10.tgz#b0c342e080c1d2b5344603bc43a6c75734a4a879"
-  integrity sha512-O+vNW/eEpYFF8eCg5jZjNQ6q2DKQVxqDRPCy9pJdEbvavMDZn6AFYgVK+VJe5F4211WW2yncOu922xObCxXJYg==
+"@storybook/router@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.12.tgz#58efbc1f2f301c8584802af1c710b2f6f03f948c"
+  integrity sha512-xHubde9YnBbpkDY5+zGO4Pr6VPxP8H9J2v4OTF3H82uaxCIKR0PKG0utS9pFKIsEiP3aM62Hb9qB8nU+v1nj3w==
   dependencies:
-    "@storybook/client-logger" "6.5.10"
+    "@storybook/client-logger" "6.5.12"
     core-js "^3.8.2"
     memoizerific "^1.11.3"
     qs "^6.10.0"
@@ -3573,14 +3908,14 @@
     core-js "^3.6.5"
     find-up "^4.1.0"
 
-"@storybook/store@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.5.10.tgz#85df17a8d57af0cba3934b3c6046537e2bca9abd"
-  integrity sha512-RswrSYh2IiKkytFPxP9AvP+hekjrvHK2ILvyDk2ZgduCN4n5ivsekOb+N3M2t+dq1eLuW9or5n2T4OWwAwjxxQ==
+"@storybook/store@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.5.12.tgz#f1624ba942162cb9627a2ddcac72bfc9062e17a2"
+  integrity sha512-SMQOr0XvV0mhTuqj3XOwGGc4kTPVjh3xqrG1fqkj9RGs+2jRdmO6mnwzda5gPwUmWNTorZ7FxZ1iEoyfYNtuiQ==
   dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-events" "6.5.10"
+    "@storybook/addons" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/core-events" "6.5.12"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -3594,13 +3929,13 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/telemetry@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-6.5.10.tgz#742b05a55dfe8470ce4cb371f3f3f2c02f96e816"
-  integrity sha512-+M5HILDFS8nDumLxeSeAwi1MTzIuV6UWzV4yB2wcsEXOBTdplcl9oYqFKtlst78oOIdGtpPYxYfivDlqxC2K4g==
+"@storybook/telemetry@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-6.5.12.tgz#12b0a2bcfe47d57ee6e6344ac789a905a5912747"
+  integrity sha512-mCHxx7NmQ3n7gx0nmblNlZE5ZgrjQm6B08mYeWg6Y7r4GZnqS6wZbvAwVhZZ3Gg/9fdqaBApHsdAXp0d5BrlxA==
   dependencies:
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/core-common" "6.5.10"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/core-common" "6.5.12"
     chalk "^4.1.0"
     core-js "^3.8.2"
     detect-package-manager "^2.0.1"
@@ -3612,30 +3947,30 @@
     read-pkg-up "^7.0.1"
     regenerator-runtime "^0.13.7"
 
-"@storybook/theming@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.10.tgz#052100979c1270fc8f60653c1a13a6f047318109"
-  integrity sha512-BvTQBBcSEwKKcsVmF+Ol6v0RIQUr+bxP7gb10wtfBd23mZTEFA0C1N5FnZr/dDeiBKG1pvf1UKvoYA731y0BsA==
+"@storybook/theming@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.12.tgz#7df1b52913d49c5e84fc1f2e837c02d9fa8cc639"
+  integrity sha512-uWOo84qMQ2R6c1C0faZ4Q0nY01uNaX7nXoJKieoiJ6ZqY9PSYxJl1kZLi3uPYnrxLZjzjVyXX8MgdxzbppYItA==
   dependencies:
-    "@storybook/client-logger" "6.5.10"
+    "@storybook/client-logger" "6.5.12"
     core-js "^3.8.2"
     memoizerific "^1.11.3"
     regenerator-runtime "^0.13.7"
 
-"@storybook/ui@6.5.10":
-  version "6.5.10"
-  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.5.10.tgz#f56095a1a39ae5a203f2ac7f3dba86341a5927d5"
-  integrity sha512-6iaoaRAiTqB1inTw35vao+5hjcDE0Qa0A3a9ZIeNa6yHvpB1k0lO/N/0PMrRdVvySYpXVD1iry4z4QYdo1rU+w==
-  dependencies:
-    "@storybook/addons" "6.5.10"
-    "@storybook/api" "6.5.10"
-    "@storybook/channels" "6.5.10"
-    "@storybook/client-logger" "6.5.10"
-    "@storybook/components" "6.5.10"
-    "@storybook/core-events" "6.5.10"
-    "@storybook/router" "6.5.10"
+"@storybook/ui@6.5.12":
+  version "6.5.12"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.5.12.tgz#25ccd6e6d5aae227ba6561c2b8e9cfda9b0ad4de"
+  integrity sha512-P7+ARI5NvaEYkrbIciT/UMgy3kxMt4WCtHMXss2T01UMCIWh1Ws4BJaDNqtQSpKuwjjS4eqZL3aQWhlUpYAUEg==
+  dependencies:
+    "@storybook/addons" "6.5.12"
+    "@storybook/api" "6.5.12"
+    "@storybook/channels" "6.5.12"
+    "@storybook/client-logger" "6.5.12"
+    "@storybook/components" "6.5.12"
+    "@storybook/core-events" "6.5.12"
+    "@storybook/router" "6.5.12"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.5.10"
+    "@storybook/theming" "6.5.12"
     core-js "^3.8.2"
     memoizerific "^1.11.3"
     qs "^6.10.0"
@@ -3649,14 +3984,15 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@tailwindcss/typography@0.5.4":
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.4.tgz#ad8c9e6808bae297bb7826742e4789f2a9f09a48"
-  integrity sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==
+"@tailwindcss/typography@0.5.7":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.7.tgz#e0b95bea787ee14c5a34a74fc824e6fe86ea8855"
+  integrity sha512-JTTSTrgZfp6Ki4svhPA4mkd9nmQ/j9EfE7SbHJ1cLtthKkpW2OxsFXzSmxbhYbEkfNIyAyhle5p4SYyKRbz/jg==
   dependencies:
     lodash.castarray "^4.4.0"
     lodash.isplainobject "^4.0.6"
     lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
 
 "@tootallnate/once@2":
   version "2.0.0"
@@ -3782,6 +4118,11 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/file-saver@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.5.tgz#9ee342a5d1314bb0928375424a2f162f97c310c7"
+  integrity sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==
+
 "@types/fs-extra@^8.0.0":
   version "8.1.2"
   resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-8.1.2.tgz#7125cc2e4bdd9bd2fc83005ffdb1d0ba00cca61f"
@@ -3838,10 +4179,10 @@
   resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-3.10.3.tgz#a89798b3d5a8bd23ca56e855a9aee3e5a93bdaaa"
   integrity sha512-SWyMrjgdAUHNQmutvDcKablrJhkDLy4wunTme8oYLjKp41GnHGxMRXr2MQMvy/qy8H3LdzwQk9gH4hZ6T++H8g==
 
-"@types/jasmine@4.0.3":
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-4.0.3.tgz#097ce710d70eb7f3662e96c1f75824dd22c27d5c"
-  integrity sha512-Opp1LvvEuZdk8fSSvchK2mZwhVrsNT0JgJE9Di6MjnaIpmEXM8TLCPPrVtNTYh8+5MPdY8j9bAHMu2SSfwpZJg==
+"@types/jasmine@4.3.0":
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-4.3.0.tgz#1dfdfb226820911addb1b5a9031422be72c53aac"
+  integrity sha512-u1jWakf8CWvLfSEZyxmzkgBzOEvXH/szpT0e6G8BTkx5Eu0BhDn7sbc5dz0JBN/6Wwm9rBe+JAsk9tJRyH9ZkA==
 
 "@types/jasminewd2@2.0.10":
   version "2.0.10"
@@ -3860,7 +4201,12 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@types/lodash@4.14.182", "@types/lodash@^4.14.167":
+"@types/lodash@4.14.186":
+  version "4.14.186"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.186.tgz#862e5514dd7bd66ada6c70ee5fce844b06c8ee97"
+  integrity sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==
+
+"@types/lodash@^4.14.167":
   version "4.14.182"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
   integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
@@ -3892,6 +4238,13 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
+"@types/nanoid@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/nanoid/-/nanoid-3.0.0.tgz#c757b20f343f3a1dd76e80a9a431b6290fc20f35"
+  integrity sha512-UXitWSmXCwhDmAKe7D3hNQtQaHeHt5L8LO1CB8GF8jlYVzOv5cBWDNqiJ+oPEWrWei3i3dkZtHY/bUtd0R/uOQ==
+  dependencies:
+    nanoid "*"
+
 "@types/node-fetch@^2.5.7":
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.1.tgz#8f127c50481db65886800ef496f20bbf15518975"
@@ -4095,130 +4448,140 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@5.30.7":
-  version "5.30.7"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.30.7.tgz#1621dabc1ae4084310e19e9efc80dfdbb97e7493"
-  integrity sha512-l4L6Do+tfeM2OK0GJsU7TUcM/1oN/N25xHm3Jb4z3OiDU4Lj8dIuxX9LpVMS9riSXQs42D1ieX7b85/r16H9Fw==
+"@typescript-eslint/eslint-plugin@5.39.0":
+  version "5.39.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.39.0.tgz#778b2d9e7f293502c7feeea6c74dca8eb3e67511"
+  integrity sha512-xVfKOkBm5iWMNGKQ2fwX5GVgBuHmZBO1tCRwXmY5oAIsPscfwm2UADDuNB8ZVYCtpQvJK4xpjrK7jEhcJ0zY9A==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.30.7"
-    "@typescript-eslint/type-utils" "5.30.7"
-    "@typescript-eslint/utils" "5.30.7"
+    "@typescript-eslint/scope-manager" "5.39.0"
+    "@typescript-eslint/type-utils" "5.39.0"
+    "@typescript-eslint/utils" "5.39.0"
     debug "^4.3.4"
-    functional-red-black-tree "^1.0.1"
     ignore "^5.2.0"
     regexpp "^3.2.0"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/parser@5.30.7":
-  version "5.30.7"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.30.7.tgz#99d09729392aec9e64b1de45cd63cb81a4ddd980"
-  integrity sha512-Rg5xwznHWWSy7v2o0cdho6n+xLhK2gntImp0rJroVVFkcYFYQ8C8UJTSuTw/3CnExBmPjycjmUJkxVmjXsld6A==
+"@typescript-eslint/parser@5.39.0":
+  version "5.39.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.39.0.tgz#93fa0bc980a3a501e081824f6097f7ca30aaa22b"
+  integrity sha512-PhxLjrZnHShe431sBAGHaNe6BDdxAASDySgsBCGxcBecVCi8NQWxQZMcizNA4g0pN51bBAn/FUfkWG3SDVcGlA==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.30.7"
-    "@typescript-eslint/types" "5.30.7"
-    "@typescript-eslint/typescript-estree" "5.30.7"
+    "@typescript-eslint/scope-manager" "5.39.0"
+    "@typescript-eslint/types" "5.39.0"
+    "@typescript-eslint/typescript-estree" "5.39.0"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.29.0":
-  version "5.29.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.29.0.tgz#2a6a32e3416cb133e9af8dcf54bf077a916aeed3"
-  integrity sha512-etbXUT0FygFi2ihcxDZjz21LtC+Eps9V2xVx09zFoN44RRHPrkMflidGMI+2dUs821zR1tDS6Oc9IXxIjOUZwA==
+"@typescript-eslint/scope-manager@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.37.0.tgz#044980e4f1516a774a418dafe701a483a6c9f9ca"
+  integrity sha512-F67MqrmSXGd/eZnujjtkPgBQzgespu/iCZ+54Ok9X5tALb9L2v3G+QBSoWkXG0p3lcTJsL+iXz5eLUEdSiJU9Q==
+  dependencies:
+    "@typescript-eslint/types" "5.37.0"
+    "@typescript-eslint/visitor-keys" "5.37.0"
+
+"@typescript-eslint/scope-manager@5.39.0":
+  version "5.39.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.39.0.tgz#873e1465afa3d6c78d8ed2da68aed266a08008d0"
+  integrity sha512-/I13vAqmG3dyqMVSZPjsbuNQlYS082Y7OMkwhCfLXYsmlI0ca4nkL7wJ/4gjX70LD4P8Hnw1JywUVVAwepURBw==
   dependencies:
-    "@typescript-eslint/types" "5.29.0"
-    "@typescript-eslint/visitor-keys" "5.29.0"
+    "@typescript-eslint/types" "5.39.0"
+    "@typescript-eslint/visitor-keys" "5.39.0"
 
-"@typescript-eslint/scope-manager@5.30.7":
-  version "5.30.7"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.30.7.tgz#8269a931ef1e5ae68b5eb80743cc515c4ffe3dd7"
-  integrity sha512-7BM1bwvdF1UUvt+b9smhqdc/eniOnCKxQT/kj3oXtj3LqnTWCAM0qHRHfyzCzhEfWX0zrW7KqXXeE4DlchZBKw==
+"@typescript-eslint/type-utils@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.37.0.tgz#43ed2f567ada49d7e33a6e4b6f9babd060445fe5"
+  integrity sha512-BSx/O0Z0SXOF5tY0bNTBcDEKz2Ec20GVYvq/H/XNKiUorUFilH7NPbFUuiiyzWaSdN3PA8JV0OvYx0gH/5aFAQ==
   dependencies:
-    "@typescript-eslint/types" "5.30.7"
-    "@typescript-eslint/visitor-keys" "5.30.7"
+    "@typescript-eslint/typescript-estree" "5.37.0"
+    "@typescript-eslint/utils" "5.37.0"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
 
-"@typescript-eslint/type-utils@5.30.7":
-  version "5.30.7"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.30.7.tgz#5693dc3db6f313f302764282d614cfdbc8a9fcfd"
-  integrity sha512-nD5qAE2aJX/YLyKMvOU5jvJyku4QN5XBVsoTynFrjQZaDgDV6i7QHFiYCx10wvn7hFvfuqIRNBtsgaLe0DbWhw==
+"@typescript-eslint/type-utils@5.39.0":
+  version "5.39.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.39.0.tgz#0a8c00f95dce4335832ad2dc6bc431c14e32a0a6"
+  integrity sha512-KJHJkOothljQWzR3t/GunL0TPKY+fGJtnpl+pX+sJ0YiKTz3q2Zr87SGTmFqsCMFrLt5E0+o+S6eQY0FAXj9uA==
   dependencies:
-    "@typescript-eslint/utils" "5.30.7"
+    "@typescript-eslint/typescript-estree" "5.39.0"
+    "@typescript-eslint/utils" "5.39.0"
     debug "^4.3.4"
     tsutils "^3.21.0"
 
-"@typescript-eslint/types@5.29.0":
-  version "5.29.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.29.0.tgz#7861d3d288c031703b2d97bc113696b4d8c19aab"
-  integrity sha512-X99VbqvAXOMdVyfFmksMy3u8p8yoRGITgU1joBJPzeYa0rhdf5ok9S56/itRoUSh99fiDoMtarSIJXo7H/SnOg==
+"@typescript-eslint/types@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.37.0.tgz#09e4870a5f3af7af3f84e08d792644a87d232261"
+  integrity sha512-3frIJiTa5+tCb2iqR/bf7XwU20lnU05r/sgPJnRpwvfZaqCJBrl8Q/mw9vr3NrNdB/XtVyMA0eppRMMBqdJ1bA==
 
-"@typescript-eslint/types@5.30.7":
-  version "5.30.7"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.30.7.tgz#18331487cc92d0f1fb1a6f580c8ec832528079d0"
-  integrity sha512-ocVkETUs82+U+HowkovV6uxf1AnVRKCmDRNUBUUo46/5SQv1owC/EBFkiu4MOHeZqhKz2ktZ3kvJJ1uFqQ8QPg==
+"@typescript-eslint/types@5.39.0":
+  version "5.39.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.39.0.tgz#f4e9f207ebb4579fd854b25c0bf64433bb5ed78d"
+  integrity sha512-gQMZrnfEBFXK38hYqt8Lkwt8f4U6yq+2H5VDSgP/qiTzC8Nw8JO3OuSUOQ2qW37S/dlwdkHDntkZM6SQhKyPhw==
 
-"@typescript-eslint/typescript-estree@5.29.0":
-  version "5.29.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.29.0.tgz#e83d19aa7fd2e74616aab2f25dfbe4de4f0b5577"
-  integrity sha512-mQvSUJ/JjGBdvo+1LwC+GY2XmSYjK1nAaVw2emp/E61wEVYEyibRHCqm1I1vEKbXCpUKuW4G7u9ZCaZhJbLoNQ==
+"@typescript-eslint/typescript-estree@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.37.0.tgz#956dcf5c98363bcb97bdd5463a0a86072ff79355"
+  integrity sha512-JkFoFIt/cx59iqEDSgIGnQpCTRv96MQnXCYvJi7QhBC24uyuzbD8wVbajMB1b9x4I0octYFJ3OwjAwNqk1AjDA==
   dependencies:
-    "@typescript-eslint/types" "5.29.0"
-    "@typescript-eslint/visitor-keys" "5.29.0"
+    "@typescript-eslint/types" "5.37.0"
+    "@typescript-eslint/visitor-keys" "5.37.0"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@5.30.7":
-  version "5.30.7"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.30.7.tgz#05da9f1b281985bfedcf62349847f8d168eecc07"
-  integrity sha512-tNslqXI1ZdmXXrHER83TJ8OTYl4epUzJC0aj2i4DMDT4iU+UqLT3EJeGQvJ17BMbm31x5scSwo3hPM0nqQ1AEA==
+"@typescript-eslint/typescript-estree@5.39.0":
+  version "5.39.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.39.0.tgz#c0316aa04a1a1f4f7f9498e3c13ef1d3dc4cf88b"
+  integrity sha512-qLFQP0f398sdnogJoLtd43pUgB18Q50QSA+BTE5h3sUxySzbWDpTSdgt4UyxNSozY/oDK2ta6HVAzvGgq8JYnA==
   dependencies:
-    "@typescript-eslint/types" "5.30.7"
-    "@typescript-eslint/visitor-keys" "5.30.7"
+    "@typescript-eslint/types" "5.39.0"
+    "@typescript-eslint/visitor-keys" "5.39.0"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.29.0":
-  version "5.29.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.29.0.tgz#775046effd5019667bd086bcf326acbe32cd0082"
-  integrity sha512-3Eos6uP1nyLOBayc/VUdKZikV90HahXE5Dx9L5YlSd/7ylQPXhLk1BYb29SDgnBnTp+jmSZUU0QxUiyHgW4p7A==
+"@typescript-eslint/utils@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.37.0.tgz#7784cb8e91390c4f90ccaffd24a0cf9874df81b2"
+  integrity sha512-jUEJoQrWbZhmikbcWSMDuUSxEE7ID2W/QCV/uz10WtQqfOuKZUqFGjqLJ+qhDd17rjgp+QJPqTdPIBWwoob2NQ==
   dependencies:
     "@types/json-schema" "^7.0.9"
-    "@typescript-eslint/scope-manager" "5.29.0"
-    "@typescript-eslint/types" "5.29.0"
-    "@typescript-eslint/typescript-estree" "5.29.0"
+    "@typescript-eslint/scope-manager" "5.37.0"
+    "@typescript-eslint/types" "5.37.0"
+    "@typescript-eslint/typescript-estree" "5.37.0"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/utils@5.30.7":
-  version "5.30.7"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.30.7.tgz#7135be070349e9f7caa262b0ca59dc96123351bb"
-  integrity sha512-Z3pHdbFw+ftZiGUnm1GZhkJgVqsDL5CYW2yj+TB2mfXDFOMqtbzQi2dNJIyPqPbx9mv2kUxS1gU+r2gKlKi1rQ==
+"@typescript-eslint/utils@5.39.0":
+  version "5.39.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.39.0.tgz#b7063cca1dcf08d1d21b0d91db491161ad0be110"
+  integrity sha512-+DnY5jkpOpgj+EBtYPyHRjXampJfC0yUZZzfzLuUWVZvCuKqSdJVC8UhdWipIw7VKNTfwfAPiOWzYkAwuIhiAg==
   dependencies:
     "@types/json-schema" "^7.0.9"
-    "@typescript-eslint/scope-manager" "5.30.7"
-    "@typescript-eslint/types" "5.30.7"
-    "@typescript-eslint/typescript-estree" "5.30.7"
+    "@typescript-eslint/scope-manager" "5.39.0"
+    "@typescript-eslint/types" "5.39.0"
+    "@typescript-eslint/typescript-estree" "5.39.0"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/visitor-keys@5.29.0":
-  version "5.29.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.29.0.tgz#7a4749fa7ef5160c44a451bf060ac1dc6dfb77ee"
-  integrity sha512-Hpb/mCWsjILvikMQoZIE3voc9wtQcS0A9FUw3h8bhr9UxBdtI/tw1ZDZUOXHXLOVMedKCH5NxyzATwnU78bWCQ==
+"@typescript-eslint/visitor-keys@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.37.0.tgz#7b72dd343295ea11e89b624995abc7103c554eee"
+  integrity sha512-Hp7rT4cENBPIzMwrlehLW/28EVCOcE9U1Z1BQTc8EA8v5qpr7GRGuG+U58V5tTY48zvUOA3KHvw3rA8tY9fbdA==
   dependencies:
-    "@typescript-eslint/types" "5.29.0"
+    "@typescript-eslint/types" "5.37.0"
     eslint-visitor-keys "^3.3.0"
 
-"@typescript-eslint/visitor-keys@5.30.7":
-  version "5.30.7"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.30.7.tgz#c093abae75b4fd822bfbad9fc337f38a7a14909a"
-  integrity sha512-KrRXf8nnjvcpxDFOKej4xkD7657+PClJs5cJVSG7NNoCNnjEdc46juNAQt7AyuWctuCgs6mVRc1xGctEqrjxWw==
+"@typescript-eslint/visitor-keys@5.39.0":
+  version "5.39.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.39.0.tgz#8f41f7d241b47257b081ddba5d3ce80deaae61e2"
+  integrity sha512-yyE3RPwOG+XJBLrhvsxAidUgybJVQ/hG8BhiJo0k8JSAYfk/CshVcxf0HwP4Jt7WZZ6vLmxdo1p6EyN3tzFTkg==
   dependencies:
-    "@typescript-eslint/types" "5.30.7"
+    "@typescript-eslint/types" "5.39.0"
     eslint-visitor-keys "^3.3.0"
 
 "@webassemblyjs/ast@1.11.1":
@@ -4579,7 +4942,7 @@ acorn@^8.4.1, acorn@^8.5.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
   integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
 
-acorn@^8.7.1:
+acorn@^8.7.1, acorn@^8.8.0:
   version "8.8.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
   integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
@@ -4602,10 +4965,10 @@ adm-zip@^0.4.9:
   resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.4.16.tgz#cf4c508fdffab02c269cbc7f471a875f05570365"
   integrity sha512-TFi4HBKSGfIKsK5YCkKaaFG2m4PEDyViZmEwof3MTIgzimHLto6muaHVpbrljdIvIrFZzEq/p4nafOeLcYegrg==
 
-ag-grid-community@28.1.0:
-  version "28.1.0"
-  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-28.1.0.tgz#a7b6f1c219d6fb7f777aaf39dd04639eb94f4bea"
-  integrity sha512-iCrdRWImvj6pOKaRQXdaPfZ0EI4fCQgTVv5PiCP9otbDPQBxyxjFVn+jEoV0umOqpqPAMoDIbG9poKyWuHl/EA==
+ag-grid-community@28.2.0:
+  version "28.2.0"
+  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-28.2.0.tgz#3ea2be65c4ca930f0be5998d998684dc65132b66"
+  integrity sha512-mL55V1H7c8zMWv3aumARCoU6ilDzN5lB69bFY9lhC2mzbvL/DyNWpX1v417IRidt2bHsVfQewPs6DOMkav7fqg==
 
 agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
@@ -4725,11 +5088,6 @@ ansi-colors@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
   integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
-ansi-colors@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
-
 ansi-escapes@^4.2.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
@@ -4889,10 +5247,10 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-query@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.0.0.tgz#210c21aaf469613ee8c9a62c7f86525e058db52c"
-  integrity sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==
+aria-query@5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.0.2.tgz#0b8a744295271861e1d933f8feca13f9b70cfdc1"
+  integrity sha512-eigU3vhqSO+Z8BKDnVLN/ompjhf3pYzecKXz8+whRy+9gZu8n1TCGfwzQUUPnqdHl9ax1Hr9031orZ+UOEYr7Q==
 
 arr-diff@^4.0.0:
   version "4.0.0"
@@ -5102,13 +5460,13 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@10.4.8:
-  version "10.4.8"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.8.tgz#92c7a0199e1cfb2ad5d9427bd585a3d75895b9e5"
-  integrity sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==
+autoprefixer@10.4.12, autoprefixer@^10.4.8:
+  version "10.4.12"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.12.tgz#183f30bf0b0722af54ee5ef257f7d4320bb33129"
+  integrity sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==
   dependencies:
-    browserslist "^4.21.3"
-    caniuse-lite "^1.0.30001373"
+    browserslist "^4.21.4"
+    caniuse-lite "^1.0.30001407"
     fraction.js "^4.2.0"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
@@ -5242,6 +5600,15 @@ babel-plugin-polyfill-corejs2@^0.3.0, babel-plugin-polyfill-corejs2@^0.3.1:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
     semver "^6.1.1"
 
+babel-plugin-polyfill-corejs2@^0.3.2:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz#5d1bd3836d0a19e1b84bbf2d9640ccb6f951c122"
+  integrity sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==
+  dependencies:
+    "@babel/compat-data" "^7.17.7"
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
+    semver "^6.1.1"
+
 babel-plugin-polyfill-corejs3@^0.1.0:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.1.7.tgz#80449d9d6f2274912e05d9e182b54816904befd0"
@@ -5258,6 +5625,14 @@ babel-plugin-polyfill-corejs3@^0.5.0, babel-plugin-polyfill-corejs3@^0.5.2:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
     core-js-compat "^3.21.0"
 
+babel-plugin-polyfill-corejs3@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.3.tgz#d7e09c9a899079d71a8b670c6181af56ec19c5c7"
+  integrity sha512-zKsXDh0XjnrUEW0mxIHLfjBfnXSMr5Q/goMe/fxpQnLm07mcOZiIZHBNWCMx60HmdvjxfXcalac0tfFg0wqxyw==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.2"
+    core-js-compat "^3.21.0"
+
 babel-plugin-polyfill-regenerator@^0.3.0, babel-plugin-polyfill-regenerator@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz#2c0678ea47c75c8cc2fbb1852278d8fb68233990"
@@ -5265,6 +5640,13 @@ babel-plugin-polyfill-regenerator@^0.3.0, babel-plugin-polyfill-regenerator@^0.3
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
 
+babel-plugin-polyfill-regenerator@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.1.tgz#390f91c38d90473592ed43351e801a9d3e0fd747"
+  integrity sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==
+  dependencies:
+    "@babel/helper-define-polyfill-provider" "^0.3.3"
+
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
@@ -5344,7 +5726,7 @@ bindings@^1.5.0:
   dependencies:
     file-uri-to-path "1.0.0"
 
-bl@^4.0.3, bl@^4.1.0:
+bl@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
   integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
@@ -5628,6 +6010,16 @@ browserslist@^4.21.3:
     node-releases "^2.0.6"
     update-browserslist-db "^1.0.5"
 
+browserslist@^4.21.4:
+  version "4.21.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.4.tgz#e7496bbc67b9e39dd0f98565feccdcb0d4ff6987"
+  integrity sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==
+  dependencies:
+    caniuse-lite "^1.0.30001400"
+    electron-to-chromium "^1.4.251"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.9"
+
 buffer-alloc-unsafe@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
@@ -5773,6 +6165,30 @@ cacache@16.1.1, cacache@^16.0.0, cacache@^16.1.0:
     tar "^6.1.11"
     unique-filename "^1.1.1"
 
+cacache@16.1.2:
+  version "16.1.2"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-16.1.2.tgz#a519519e9fc9e5e904575dcd3b77660cbf03f749"
+  integrity sha512-Xx+xPlfCZIUHagysjjOAje9nRo8pRDczQCcXb4J2O0BLtH+xeVue6ba4y1kfJfQMAnM2mkcoMIAyOctlaRGWYA==
+  dependencies:
+    "@npmcli/fs" "^2.1.0"
+    "@npmcli/move-file" "^2.0.0"
+    chownr "^2.0.0"
+    fs-minipass "^2.1.0"
+    glob "^8.0.1"
+    infer-owner "^1.0.4"
+    lru-cache "^7.7.1"
+    minipass "^3.1.6"
+    minipass-collect "^1.0.2"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.4"
+    mkdirp "^1.0.4"
+    p-map "^4.0.0"
+    promise-inflight "^1.0.1"
+    rimraf "^3.0.2"
+    ssri "^9.0.0"
+    tar "^6.1.11"
+    unique-filename "^1.1.1"
+
 cacache@^12.0.2:
   version "12.0.4"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
@@ -5915,11 +6331,16 @@ caniuse-lite@^1.0.30001335, caniuse-lite@^1.0.30001366:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001369.tgz#58ca6974acf839a72a02003258a005cbb0cb340d"
   integrity sha512-OY1SBHaodJc4wflDIKnlkdqWzJZd1Ls/2zbVJHBSv3AT7vgOJ58yAhd2CN4d57l2kPJrgMb7P9+N1Mhy4tNSQA==
 
-caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001373:
+caniuse-lite@^1.0.30001370:
   version "1.0.30001375"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001375.tgz#8e73bc3d1a4c800beb39f3163bf0190d7e5d7672"
   integrity sha512-kWIMkNzLYxSvnjy0hL8w1NOaWNr2rn39RTAVyIwcw8juu60bZDWiF1/loOYANzjtJmy6qPgNmn38ro5Pygagdw==
 
+caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001407:
+  version "1.0.30001416"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001416.tgz#29692af8a6a11412f2d3cf9a59d588fcdd21ce4c"
+  integrity sha512-06wzzdAkCPZO+Qm4e/eNghZBDfVNDsCgw33T27OwBH9unE9S478OYw//Q2L7Npf/zBzs7rjZOszIFQkwQKAEqA==
+
 case-sensitive-paths-webpack-plugin@^2.3.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
@@ -5935,14 +6356,6 @@ ccount@^1.0.0:
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.1.0.tgz#246687debb6014735131be8abab2d93898f8d043"
   integrity sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==
 
-chalk@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
-  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 chalk@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -6107,7 +6520,7 @@ cli-boxes@^2.2.1:
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
   integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
 
-cli-cursor@3.1.0, cli-cursor@^3.1.0:
+cli-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
   integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
@@ -6121,7 +6534,7 @@ cli-progress@3.11.2, cli-progress@^3.11.2:
   dependencies:
     string-width "^4.2.3"
 
-cli-spinners@2.6.1, cli-spinners@^2.5.0:
+cli-spinners@^2.5.0:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.6.1.tgz#adc954ebe281c37a6319bfa401e6dd2488ffb70d"
   integrity sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==
@@ -6330,10 +6743,10 @@ commander@2.9.0, commander@~2.9.0:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@9.4.0, commander@^9.3.0, commander@^9.4.0:
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-9.4.0.tgz#bc4a40918fefe52e22450c111ecd6b7acce6f11c"
-  integrity sha512-sRPT+umqkz90UA8M1yqYfnHlZA7fF6nSphDtxeywPZ49ysjxDQybzk13CL+mXekDRG92skbcqCLVovuCusNmFw==
+commander@9.4.1:
+  version "9.4.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.4.1.tgz#d1dd8f2ce6faf93147295c0df13c7c21141cfbdd"
+  integrity sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==
 
 commander@^2.20.0:
   version "2.20.3"
@@ -6360,6 +6773,11 @@ commander@^8.3.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
+commander@^9.3.0, commander@^9.4.0:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.4.0.tgz#bc4a40918fefe52e22450c111ecd6b7acce6f11c"
+  integrity sha512-sRPT+umqkz90UA8M1yqYfnHlZA7fF6nSphDtxeywPZ49ysjxDQybzk13CL+mXekDRG92skbcqCLVovuCusNmFw==
+
 comment-parser@1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/comment-parser/-/comment-parser-1.3.1.tgz#3d7ea3adaf9345594aedee6563f422348f165c1b"
@@ -6844,6 +7262,11 @@ cssdb@^6.6.3:
   resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-6.6.3.tgz#1f331a2fab30c18d9f087301e6122a878bb1e505"
   integrity sha512-7GDvDSmE+20+WcSMhP17Q1EVWUrLlbxxpMDqG731n8P99JhnQZHR9YvtjPvEHfjFUjvQJvdpKCjlKOX+xe4UVA==
 
+cssdb@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-7.0.1.tgz#3810a0c67ae06362982dfe965dbedf57a0f26617"
+  integrity sha512-pT3nzyGM78poCKLAEy2zWIVX2hikq6dIrjuZzLV98MumBg+xMTNYfHx7paUlfiRTgg91O/vR889CIf+qiv79Rw==
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -6888,10 +7311,10 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
-daisyui@2.22.0:
-  version "2.22.0"
-  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-2.22.0.tgz#00ea4948fb886ad5242bd6bd3d1a229a8f28d932"
-  integrity sha512-H08aQP+Mfl2fQOmyaxd1NP54gQbr2xRUj2MmFFvfJ5EDGbthVBICDMNFKyia/zBfR58G8eTJo3CmydglM81/7Q==
+daisyui@2.31.0:
+  version "2.31.0"
+  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-2.31.0.tgz#906bc447b59c24782320f33fbc990ea1d8c2200c"
+  integrity sha512-qepRXgQPLNcJ8ZPZy+dUvsC7mRWvMLRcVMe85/wZA60Tnhm/bkidhOzdllL8aAk2JX+W/xlIsTJ8NZFpPm+eyw==
   dependencies:
     color "^4.2"
     css-selector-tokenizer "^0.8.0"
@@ -7339,10 +7762,10 @@ dotenv-expand@^5.1.0:
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
   integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
 
-dotenv@16.0.1:
-  version "16.0.1"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.1.tgz#8f8f9d94876c35dac989876a5d3a82a267fdce1d"
-  integrity sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==
+dotenv@16.0.3:
+  version "16.0.3"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
+  integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==
 
 dotenv@^8.0.0:
   version "8.6.0"
@@ -7354,11 +7777,6 @@ dotenv@^9.0.2:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-9.0.2.tgz#dacc20160935a37dea6364aa1bef819fb9b6ab05"
   integrity sha512-I9OvvrHp4pIARv4+x9iuewrWycX6CcZtoAu1XrzPxc5UygMJXJZYmBsynku8IkrJwgypE5DGNjDPmPRhDCptUg==
 
-dotenv@~10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
-  integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
-
 duplexer2@~0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
@@ -7466,6 +7884,11 @@ electron-to-chromium@^1.4.202:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.217.tgz#f1f51b319435f4c1587a850806a0dfebe9774598"
   integrity sha512-iX8GbAMij7cOtJPZo02CClpaPMWjvN5meqXiJXkBgwvraNWTNH0Z7F9tkznI34JRPtWASoPM/xWamq3oNb49GA==
 
+electron-to-chromium@^1.4.251:
+  version "1.4.274"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.274.tgz#74369ac6f020c3cea7c77ec040ddf159fe226233"
+  integrity sha512-Fgn7JZQzq85I81FpKUNxVLAzoghy8JZJ4NIue+YfUYBbu1AkpgzFvNwzF/ZNZH9ElkmJD0TSWu1F2gTpw/zZlg==
+
 electron-to-chromium@^1.4.76:
   version "1.4.82"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.82.tgz#51e123ca434b1eba8c434ece2b54f095b304a651"
@@ -7522,7 +7945,7 @@ encoding@^0.1.11, encoding@^0.1.13:
   dependencies:
     iconv-lite "^0.6.2"
 
-end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
   integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
@@ -7556,18 +7979,10 @@ enhanced-resolve@^4.0.0, enhanced-resolve@^4.5.0:
   integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
   dependencies:
     graceful-fs "^4.1.2"
-    memory-fs "^0.5.0"
-    tapable "^1.0.0"
-
-enhanced-resolve@^5.7.0, enhanced-resolve@^5.9.2:
-  version "5.9.2"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz#0224dcd6a43389ebfb2d55efee517e5466772dd9"
-  integrity sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==
-  dependencies:
-    graceful-fs "^4.2.4"
-    tapable "^2.2.0"
+    memory-fs "^0.5.0"
+    tapable "^1.0.0"
 
-enhanced-resolve@^5.9.3:
+enhanced-resolve@^5.10.0, enhanced-resolve@^5.9.3:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
   integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==
@@ -7575,12 +7990,13 @@ enhanced-resolve@^5.9.3:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-enquirer@~2.3.6:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
-  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
+enhanced-resolve@^5.7.0, enhanced-resolve@^5.9.2:
+  version "5.9.2"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz#0224dcd6a43389ebfb2d55efee517e5466772dd9"
+  integrity sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==
   dependencies:
-    ansi-colors "^4.1.1"
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
 
 ent@~2.2.0:
   version "2.2.0"
@@ -7700,106 +8116,211 @@ esbuild-android-64@0.14.49:
   resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.49.tgz#9e4682c36dcf6e7b71b73d2a3723a96e0fdc5054"
   integrity sha512-vYsdOTD+yi+kquhBiFWl3tyxnj2qZJsl4tAqwhT90ktUdnyTizgle7TjNx6Ar1bN7wcwWqZ9QInfdk2WVagSww==
 
+esbuild-android-64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.15.5.tgz#3c7b2f2a59017dab3f2c0356188a8dd9cbdc91c8"
+  integrity sha512-dYPPkiGNskvZqmIK29OPxolyY3tp+c47+Fsc2WYSOVjEPWNCHNyqhtFqQadcXMJDQt8eN0NMDukbyQgFcHquXg==
+
 esbuild-android-arm64@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.49.tgz#9861b1f7e57d1dd1f23eeef6198561c5f34b51f6"
   integrity sha512-g2HGr/hjOXCgSsvQZ1nK4nW/ei8JUx04Li74qub9qWrStlysaVmadRyTVuW32FGIpLQyc5sUjjZopj49eGGM2g==
 
+esbuild-android-arm64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.15.5.tgz#e301db818c5a67b786bf3bb7320e414ac0fcf193"
+  integrity sha512-YyEkaQl08ze3cBzI/4Cm1S+rVh8HMOpCdq8B78JLbNFHhzi4NixVN93xDrHZLztlocEYqi45rHHCgA8kZFidFg==
+
 esbuild-darwin-64@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.49.tgz#fd30a5ebe28704a3a117126c60f98096c067c8d1"
   integrity sha512-3rvqnBCtX9ywso5fCHixt2GBCUsogNp9DjGmvbBohh31Ces34BVzFltMSxJpacNki96+WIcX5s/vum+ckXiLYg==
 
+esbuild-darwin-64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.15.5.tgz#11726de5d0bf5960b92421ef433e35871c091f8d"
+  integrity sha512-Cr0iIqnWKx3ZTvDUAzG0H/u9dWjLE4c2gTtRLz4pqOBGjfjqdcZSfAObFzKTInLLSmD0ZV1I/mshhPoYSBMMCQ==
+
 esbuild-darwin-arm64@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.49.tgz#c04a3a57dad94a972c66a697a68a25aa25947f41"
   integrity sha512-XMaqDxO846srnGlUSJnwbijV29MTKUATmOLyQSfswbK/2X5Uv28M9tTLUJcKKxzoo9lnkYPsx2o8EJcTYwCs/A==
 
+esbuild-darwin-arm64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.5.tgz#ad89dafebb3613fd374f5a245bb0ce4132413997"
+  integrity sha512-WIfQkocGtFrz7vCu44ypY5YmiFXpsxvz2xqwe688jFfSVCnUsCn2qkEVDo7gT8EpsLOz1J/OmqjExePL1dr1Kg==
+
 esbuild-freebsd-64@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.49.tgz#c404dbd66c98451395b1eef0fa38b73030a7be82"
   integrity sha512-NJ5Q6AjV879mOHFri+5lZLTp5XsO2hQ+KSJYLbfY9DgCu8s6/Zl2prWXVANYTeCDLlrIlNNYw8y34xqyLDKOmQ==
 
+esbuild-freebsd-64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.5.tgz#6bfb52b4a0d29c965aa833e04126e95173289c8a"
+  integrity sha512-M5/EfzV2RsMd/wqwR18CELcenZ8+fFxQAAEO7TJKDmP3knhWSbD72ILzrXFMMwshlPAS1ShCZ90jsxkm+8FlaA==
+
 esbuild-freebsd-arm64@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.49.tgz#b62cec96138ebc5937240ce3e1b97902963ea74a"
   integrity sha512-lFLtgXnAc3eXYqj5koPlBZvEbBSOSUbWO3gyY/0+4lBdRqELyz4bAuamHvmvHW5swJYL7kngzIZw6kdu25KGOA==
 
+esbuild-freebsd-arm64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.5.tgz#38a3fed8c6398072f9914856c7c3e3444f9ef4dd"
+  integrity sha512-2JQQ5Qs9J0440F/n/aUBNvY6lTo4XP/4lt1TwDfHuo0DY3w5++anw+jTjfouLzbJmFFiwmX7SmUhMnysocx96w==
+
 esbuild-linux-32@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.49.tgz#495b1cc011b8c64d8bbaf65509c1e7135eb9ddbf"
   integrity sha512-zTTH4gr2Kb8u4QcOpTDVn7Z8q7QEIvFl/+vHrI3cF6XOJS7iEI1FWslTo3uofB2+mn6sIJEQD9PrNZKoAAMDiA==
 
+esbuild-linux-32@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.15.5.tgz#942dc70127f0c0a7ea91111baf2806e61fc81b32"
+  integrity sha512-gO9vNnIN0FTUGjvTFucIXtBSr1Woymmx/aHQtuU+2OllGU6YFLs99960UD4Dib1kFovVgs59MTXwpFdVoSMZoQ==
+
 esbuild-linux-64@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.49.tgz#3f28dd8f986e6ff42f38888ee435a9b1fb916a56"
   integrity sha512-hYmzRIDzFfLrB5c1SknkxzM8LdEUOusp6M2TnuQZJLRtxTgyPnZZVtyMeCLki0wKgYPXkFsAVhi8vzo2mBNeTg==
 
+esbuild-linux-64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.15.5.tgz#6d748564492d5daaa7e62420862c31ac3a44aed9"
+  integrity sha512-ne0GFdNLsm4veXbTnYAWjbx3shpNKZJUd6XpNbKNUZaNllDZfYQt0/zRqOg0sc7O8GQ+PjSMv9IpIEULXVTVmg==
+
 esbuild-linux-arm64@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.49.tgz#a52e99ae30246566dc5f33e835aa6ca98ef70e33"
   integrity sha512-KLQ+WpeuY+7bxukxLz5VgkAAVQxUv67Ft4DmHIPIW+2w3ObBPQhqNoeQUHxopoW/aiOn3m99NSmSV+bs4BSsdA==
 
+esbuild-linux-arm64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.5.tgz#28cd899beb2d2b0a3870fd44f4526835089a318d"
+  integrity sha512-7EgFyP2zjO065XTfdCxiXVEk+f83RQ1JsryN1X/VSX2li9rnHAt2swRbpoz5Vlrl6qjHrCmq5b6yxD13z6RheA==
+
 esbuild-linux-arm@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.49.tgz#7c33d05a64ec540cf7474834adaa57b3167bbe97"
   integrity sha512-iE3e+ZVv1Qz1Sy0gifIsarJMQ89Rpm9mtLSRtG3AH0FPgAzQ5Z5oU6vYzhc/3gSPi2UxdCOfRhw2onXuFw/0lg==
 
+esbuild-linux-arm@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.15.5.tgz#6441c256225564d8794fdef5b0a69bc1a43051b5"
+  integrity sha512-wvAoHEN+gJ/22gnvhZnS/+2H14HyAxM07m59RSLn3iXrQsdS518jnEWRBnJz3fR6BJa+VUTo0NxYjGaNt7RA7Q==
+
 esbuild-linux-mips64le@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.49.tgz#ed062bd844b587be649443831eb84ba304685f25"
   integrity sha512-n+rGODfm8RSum5pFIqFQVQpYBw+AztL8s6o9kfx7tjfK0yIGF6tm5HlG6aRjodiiKkH2xAiIM+U4xtQVZYU4rA==
 
+esbuild-linux-mips64le@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.5.tgz#d4927f817290eaffc062446896b2a553f0e11981"
+  integrity sha512-KdnSkHxWrJ6Y40ABu+ipTZeRhFtc8dowGyFsZY5prsmMSr1ZTG9zQawguN4/tunJ0wy3+kD54GaGwdcpwWAvZQ==
+
 esbuild-linux-ppc64le@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.49.tgz#c0786fb5bddffd90c10a2078181513cbaf077958"
   integrity sha512-WP9zR4HX6iCBmMFH+XHHng2LmdoIeUmBpL4aL2TR8ruzXyT4dWrJ5BSbT8iNo6THN8lod6GOmYDLq/dgZLalGw==
 
+esbuild-linux-ppc64le@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.5.tgz#b6d660dc6d5295f89ac51c675f1a2f639e2fb474"
+  integrity sha512-QdRHGeZ2ykl5P0KRmfGBZIHmqcwIsUKWmmpZTOq573jRWwmpfRmS7xOhmDHBj9pxv+6qRMH8tLr2fe+ZKQvCYw==
+
 esbuild-linux-riscv64@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.49.tgz#579b0e7cc6fce4bfc698e991a52503bb616bec49"
   integrity sha512-h66ORBz+Dg+1KgLvzTVQEA1LX4XBd1SK0Fgbhhw4akpG/YkN8pS6OzYI/7SGENiN6ao5hETRDSkVcvU9NRtkMQ==
 
+esbuild-linux-riscv64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.5.tgz#2801bf18414dc3d3ad58d1ea83084f00d9d84896"
+  integrity sha512-p+WE6RX+jNILsf+exR29DwgV6B73khEQV0qWUbzxaycxawZ8NE0wA6HnnTxbiw5f4Gx9sJDUBemh9v49lKOORA==
+
 esbuild-linux-s390x@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.49.tgz#09eb15c753e249a500b4e28d07c5eef7524a9740"
   integrity sha512-DhrUoFVWD+XmKO1y7e4kNCqQHPs6twz6VV6Uezl/XHYGzM60rBewBF5jlZjG0nCk5W/Xy6y1xWeopkrhFFM0sQ==
 
+esbuild-linux-s390x@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.5.tgz#12a634ae6d3384cacc2b8f4201047deafe596eae"
+  integrity sha512-J2ngOB4cNzmqLHh6TYMM/ips8aoZIuzxJnDdWutBw5482jGXiOzsPoEF4j2WJ2mGnm7FBCO4StGcwzOgic70JQ==
+
 esbuild-netbsd-64@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.49.tgz#f7337cd2bddb7cc9d100d19156f36c9ca117b58d"
   integrity sha512-BXaUwFOfCy2T+hABtiPUIpWjAeWK9P8O41gR4Pg73hpzoygVGnj0nI3YK4SJhe52ELgtdgWP/ckIkbn2XaTxjQ==
 
+esbuild-netbsd-64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.5.tgz#951bbf87600512dfcfbe3b8d9d117d684d26c1b8"
+  integrity sha512-MmKUYGDizYjFia0Rwt8oOgmiFH7zaYlsoQ3tIOfPxOqLssAsEgG0MUdRDm5lliqjiuoog8LyDu9srQk5YwWF3w==
+
 esbuild-openbsd-64@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.49.tgz#1f8bdc49f8a44396e73950a3fb6b39828563631d"
   integrity sha512-lP06UQeLDGmVPw9Rg437Btu6J9/BmyhdoefnQ4gDEJTtJvKtQaUcOQrhjTq455ouZN4EHFH1h28WOJVANK41kA==
 
+esbuild-openbsd-64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.5.tgz#26705b61961d525d79a772232e8b8f211fdbb035"
+  integrity sha512-2mMFfkLk3oPWfopA9Plj4hyhqHNuGyp5KQyTT9Rc8hFd8wAn5ZrbJg+gNcLMo2yzf8Uiu0RT6G9B15YN9WQyMA==
+
 esbuild-sunos-64@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.49.tgz#47d042739365b61aa8ca642adb69534a8eef9f7a"
   integrity sha512-4c8Zowp+V3zIWje329BeLbGh6XI9c/rqARNaj5yPHdC61pHI9UNdDxT3rePPJeWcEZVKjkiAS6AP6kiITp7FSw==
 
+esbuild-sunos-64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.15.5.tgz#d794da1ae60e6e2f6194c44d7b3c66bf66c7a141"
+  integrity sha512-2sIzhMUfLNoD+rdmV6AacilCHSxZIoGAU2oT7XmJ0lXcZWnCvCtObvO6D4puxX9YRE97GodciRGDLBaiC6x1SA==
+
 esbuild-wasm@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-wasm/-/esbuild-wasm-0.14.49.tgz#5b0909b8172653f031163675341bdf4311a7a139"
   integrity sha512-5ddzZv8M3WI1fWZ5rEfK5cSA9swlWJcceKgqjKLLERC7FnlNW50kF7hxhpkyC0Z/4w7Xeyt3yUJ9QWNMDXLk2Q==
 
+esbuild-wasm@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-wasm/-/esbuild-wasm-0.15.5.tgz#d59878b097d2da024a532da94acce6384de9e314"
+  integrity sha512-lTJOEKekN/4JI/eOEq0wLcx53co2N6vaT/XjBz46D1tvIVoUEyM0o2K6txW6gEotf31szFD/J1PbxmnbkGlK9A==
+
 esbuild-windows-32@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.49.tgz#79198c88ec9bde163c18a6b430c34eab098ec21a"
   integrity sha512-q7Rb+J9yHTeKr9QTPDYkqfkEj8/kcKz9lOabDuvEXpXuIcosWCJgo5Z7h/L4r7rbtTH4a8U2FGKb6s1eeOHmJA==
 
+esbuild-windows-32@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.15.5.tgz#0670326903f421424be86bc03b7f7b3ff86a9db7"
+  integrity sha512-e+duNED9UBop7Vnlap6XKedA/53lIi12xv2ebeNS4gFmu7aKyTrok7DPIZyU5w/ftHD4MUDs5PJUkQPP9xJRzg==
+
 esbuild-windows-64@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.49.tgz#b36b230d18d1ee54008e08814c4799c7806e8c79"
   integrity sha512-+Cme7Ongv0UIUTniPqfTX6mJ8Deo7VXw9xN0yJEN1lQMHDppTNmKwAM3oGbD/Vqff+07K2gN0WfNkMohmG+dVw==
 
+esbuild-windows-64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.15.5.tgz#64f32acb7341f3f0a4d10e8ff1998c2d1ebfc0a9"
+  integrity sha512-v+PjvNtSASHOjPDMIai9Yi+aP+Vwox+3WVdg2JB8N9aivJ7lyhp4NVU+J0MV2OkWFPnVO8AE/7xH+72ibUUEnw==
+
 esbuild-windows-arm64@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.49.tgz#d83c03ff6436caf3262347cfa7e16b0a8049fae7"
   integrity sha512-v+HYNAXzuANrCbbLFJ5nmO3m5y2PGZWLe3uloAkLt87aXiO2mZr3BTmacZdjwNkNEHuH3bNtN8cak+mzVjVPfA==
 
+esbuild-windows-arm64@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.5.tgz#4fe7f333ce22a922906b10233c62171673a3854b"
+  integrity sha512-Yz8w/D8CUPYstvVQujByu6mlf48lKmXkq6bkeSZZxTA626efQOJb26aDGLzmFWx6eg/FwrXgt6SZs9V8Pwy/aA==
+
 esbuild@0.14.49:
   version "0.14.49"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.49.tgz#b82834760eba2ddc17b44f05cfcc0aaca2bae492"
@@ -7826,6 +8347,33 @@ esbuild@0.14.49:
     esbuild-windows-64 "0.14.49"
     esbuild-windows-arm64 "0.14.49"
 
+esbuild@0.15.5:
+  version "0.15.5"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.15.5.tgz#5effd05666f621d4ff2fe2c76a67c198292193ff"
+  integrity sha512-VSf6S1QVqvxfIsSKb3UKr3VhUCis7wgDbtF4Vd9z84UJr05/Sp2fRKmzC+CSPG/dNAPPJZ0BTBLTT1Fhd6N9Gg==
+  optionalDependencies:
+    "@esbuild/linux-loong64" "0.15.5"
+    esbuild-android-64 "0.15.5"
+    esbuild-android-arm64 "0.15.5"
+    esbuild-darwin-64 "0.15.5"
+    esbuild-darwin-arm64 "0.15.5"
+    esbuild-freebsd-64 "0.15.5"
+    esbuild-freebsd-arm64 "0.15.5"
+    esbuild-linux-32 "0.15.5"
+    esbuild-linux-64 "0.15.5"
+    esbuild-linux-arm "0.15.5"
+    esbuild-linux-arm64 "0.15.5"
+    esbuild-linux-mips64le "0.15.5"
+    esbuild-linux-ppc64le "0.15.5"
+    esbuild-linux-riscv64 "0.15.5"
+    esbuild-linux-s390x "0.15.5"
+    esbuild-netbsd-64 "0.15.5"
+    esbuild-openbsd-64 "0.15.5"
+    esbuild-sunos-64 "0.15.5"
+    esbuild-windows-32 "0.15.5"
+    esbuild-windows-64 "0.15.5"
+    esbuild-windows-arm64 "0.15.5"
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -7922,10 +8470,10 @@ eslint-plugin-import@2.26.0:
     resolve "^1.22.0"
     tsconfig-paths "^3.14.1"
 
-eslint-plugin-jsdoc@39.3.3:
-  version "39.3.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-39.3.3.tgz#75dd67ce581e7527a69f27800138cc0f9c388236"
-  integrity sha512-K/DAjKRUNaUTf0KQhI9PvsF+Y3mGDx/j0pofXsJCQe/tmRsRweBIXR353c8nAro0lytZYEf7l0PluBpzKDiHxw==
+eslint-plugin-jsdoc@39.3.6:
+  version "39.3.6"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-39.3.6.tgz#6ba29f32368d72a51335a3dc9ccd22ad0437665d"
+  integrity sha512-R6dZ4t83qPdMhIOGr7g2QII2pwCjYyKP+z0tPOfO1bbAbQyKC20Y2Rd6z1te86Lq3T7uM8bNo+VD9YFpE8HU/g==
   dependencies:
     "@es-joy/jsdoccomment" "~0.31.0"
     comment-parser "1.3.1"
@@ -7981,13 +8529,15 @@ eslint-visitor-keys@^3.3.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
   integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
 
-eslint@8.20.0:
-  version "8.20.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.20.0.tgz#048ac56aa18529967da8354a478be4ec0a2bc81b"
-  integrity sha512-d4ixhz5SKCa1D6SCPrivP7yYVi7nyD6A4vs6HIAul9ujBzcEmZVM3/0NN/yu5nKhmO1wjp5xQ46iRfmDGlOviA==
+eslint@8.24.0:
+  version "8.24.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.24.0.tgz#489516c927a5da11b3979dbfb2679394523383c8"
+  integrity sha512-dWFaPhGhTAiPcCgm3f6LI2MBWbogMnTJzFBbhXVRQDJPkr9pGZvVjlVfXd+vyDcWPA2Ic9L2AXPIQM0+vk/cSQ==
   dependencies:
-    "@eslint/eslintrc" "^1.3.0"
-    "@humanwhocodes/config-array" "^0.9.2"
+    "@eslint/eslintrc" "^1.3.2"
+    "@humanwhocodes/config-array" "^0.10.5"
+    "@humanwhocodes/gitignore-to-minimatch" "^1.0.2"
+    "@humanwhocodes/module-importer" "^1.0.1"
     ajv "^6.10.0"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
@@ -7997,18 +8547,21 @@ eslint@8.20.0:
     eslint-scope "^7.1.1"
     eslint-utils "^3.0.0"
     eslint-visitor-keys "^3.3.0"
-    espree "^9.3.2"
+    espree "^9.4.0"
     esquery "^1.4.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
-    functional-red-black-tree "^1.0.1"
+    find-up "^5.0.0"
     glob-parent "^6.0.1"
     globals "^13.15.0"
+    globby "^11.1.0"
+    grapheme-splitter "^1.0.4"
     ignore "^5.2.0"
     import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
+    js-sdsl "^4.1.4"
     js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
@@ -8020,14 +8573,13 @@ eslint@8.20.0:
     strip-ansi "^6.0.1"
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
 
-espree@^9.3.2:
-  version "9.3.2"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.2.tgz#f58f77bd334731182801ced3380a8cc859091596"
-  integrity sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==
+espree@^9.4.0:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.0.tgz#cd4bc3d6e9336c433265fc0aa016fc1aaf182f8a"
+  integrity sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==
   dependencies:
-    acorn "^8.7.1"
+    acorn "^8.8.0"
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.3.0"
 
@@ -8295,21 +8847,10 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@3.2.11, fast-glob@^3.2.11, fast-glob@^3.2.9:
-  version "3.2.11"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
-  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
-  dependencies:
-    "@nodelib/fs.stat" "^2.0.2"
-    "@nodelib/fs.walk" "^1.2.3"
-    glob-parent "^5.1.2"
-    merge2 "^1.3.0"
-    micromatch "^4.0.4"
-
-fast-glob@3.2.7:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
-  integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
+fast-glob@3.2.12, fast-glob@^3.2.12:
+  version "3.2.12"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
+  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -8329,10 +8870,10 @@ fast-glob@^2.2.6:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
-fast-glob@^3.2.12:
-  version "3.2.12"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
-  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+fast-glob@^3.2.11, fast-glob@^3.2.9:
+  version "3.2.11"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
+  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -8398,7 +8939,7 @@ figgy-pudding@^3.5.1:
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
   integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
 
-figures@3.2.0, figures@^3.0.0:
+figures@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
   integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
@@ -8566,11 +9107,6 @@ flat-cache@^3.0.4:
     flatted "^3.1.0"
     rimraf "^3.0.2"
 
-flat@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
-  integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
-
 flatted@^3.1.0, flatted@^3.2.5:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
@@ -8698,11 +9234,6 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-constants@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
-  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
-
 fs-extra@^0.30.0:
   version "0.30.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
@@ -8815,11 +9346,6 @@ function.prototype.name@^1.1.0:
     es-abstract "^1.19.0"
     functions-have-names "^1.2.2"
 
-functional-red-black-tree@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
-  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
-
 functions-have-names@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.2.tgz#98d93991c39da9361f8e50b337c4f6e41f120e21"
@@ -8979,18 +9505,6 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@7.1.4:
-  version "7.1.4"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
-  integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 glob@8.0.3, glob@^8.0.1:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-8.0.3.tgz#415c6eb2deed9e502c68fa44a272e6da6eeca42e"
@@ -9158,6 +9672,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
   integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=
 
+grapheme-splitter@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
+  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+
 graphql@^0.11.7:
   version "0.11.7"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.11.7.tgz#e5abaa9cb7b7cccb84e9f0836bf4370d268750c6"
@@ -9684,7 +10203,7 @@ ignore-walk@^5.0.1:
   dependencies:
     minimatch "^5.0.1"
 
-ignore@5.2.0, ignore@^5.0.4, ignore@^5.2.0:
+ignore@5.2.0, ignore@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
@@ -10460,10 +10979,10 @@ jake@^10.8.5:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
-jasmine-core@4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-4.3.0.tgz#aee841fbe7373c2586ed8d8d48f5cc4a88be8390"
-  integrity sha512-qybtBUesniQdW6n+QIHMng2vDOHscIC/dEXjW+JzO9+LoAZMb03RCUC5xFOv/btSKPm1xL42fn+RjlU4oB42Lg==
+jasmine-core@4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/jasmine-core/-/jasmine-core-4.4.0.tgz#848fe45c1839cacaf1f2429d400d1d4f85d2856a"
+  integrity sha512-+l482uImx5BVd6brJYlaHe2UwfKoZBqQfNp20ZmdNfsjGFTemGfqHLsXjKEW23w9R/m8WYeFc9JmIgjj6dUtAA==
 
 jasmine-core@^4.1.0:
   version "4.2.0"
@@ -10511,6 +11030,11 @@ js-base64@^2.4.3:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
   integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
 
+js-sdsl@^4.1.4:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.1.5.tgz#1ff1645e6b4d1b028cd3f862db88c9d887f26e2a"
+  integrity sha512-08bOAKweV2NUC1wqTtf3qZlnpOX/R2DU9ikpjOHs0H+ibQv3zpncVQg6um4uYtRtrwIX8M4Nh3ytK4HGlYAq7Q==
+
 js-string-escape@^1.0.1, js-string-escape@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
@@ -10521,13 +11045,6 @@ js-string-escape@^1.0.1, js-string-escape@~1.0.0:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@4.1.0, js-yaml@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
-  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
-  dependencies:
-    argparse "^2.0.1"
-
 js-yaml@^3.13.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
@@ -10536,6 +11053,13 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -10655,11 +11179,6 @@ json5@^2.2.1:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
-jsonc-parser@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.0.0.tgz#abdd785701c7e7eaca8a9ec8cf070ca51a745a22"
-  integrity sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==
-
 jsonc-parser@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.1.0.tgz#73b8f0e5c940b83d03476bc2e51a20ef0932615d"
@@ -10724,10 +11243,10 @@ karma-coverage-istanbul-reporter@3.0.3:
     istanbul-reports "^3.0.2"
     minimatch "^3.0.4"
 
-karma-electron@7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/karma-electron/-/karma-electron-7.2.0.tgz#2c2b2b821d75dfc4721b1e0a0e545733325c0aff"
-  integrity sha512-+6iYnL/rxPOhGh8Kg4W8nkajJRiaIMx4ivGqvEsoFzfGnXt0zJ+p55oM2OZm9mRvq6CcIGD9GHG91e3GIoNdYQ==
+karma-electron@7.3.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/karma-electron/-/karma-electron-7.3.0.tgz#269897d2566262e6ddc594a3d408b84275014a5c"
+  integrity sha512-JCwAZxtzLo+Qk6HD8MqlU+c6mB7A5jZYNb+ftbMNxutnmi1hzb8/wIqJzpw087R7jV5ZzNHujMq8mStI5n4Q6Q==
   dependencies:
     async "~3.2.2"
     combine-source-map "~0.8.0"
@@ -10756,10 +11275,10 @@ karma-source-map-support@1.4.0:
   dependencies:
     source-map-support "^0.5.5"
 
-karma@6.4.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/karma/-/karma-6.4.0.tgz#82652dfecdd853ec227b74ed718a997028a99508"
-  integrity sha512-s8m7z0IF5g/bS5ONT7wsOavhW4i4aFkzD4u4wgzAQWT4HGUeWI3i21cK2Yz6jndMAeHETp5XuNsRoyGJZXVd4w==
+karma@6.4.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/karma/-/karma-6.4.1.tgz#f2253716dd3a41aaa813fa9f54b6ee047e1127d9"
+  integrity sha512-Cj57NKOskK7wtFWSlMvZf459iX+kpYIPXmkNUzP2WAFcA7nhr/ALn5R7sw3w+1udFDcpMx/tuB8d5amgm3ijaA==
   dependencies:
     "@colors/colors" "1.5.0"
     body-parser "^1.19.0"
@@ -11503,13 +12022,6 @@ minimatch@3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@3.0.5:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.5.tgz#4da8f1290ee0f0f8e83d60ca69f8f134068604a3"
-  integrity sha512-tUpxzX0VAzJHjLu0xUfFv1gwVp9ba3IOuRAVH2EGuRW8a5emA2FlACLqiT/lDVtS1W+TGNwqz3sWaNyLgDJWuw==
-  dependencies:
-    brace-expansion "^1.1.7"
-
 minimatch@5.1.0, minimatch@^5.0.1:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.0.tgz#1717b464f4971b144f6aabe8f2d0b8e4511e09c7"
@@ -11701,6 +12213,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
+nanoid@*, nanoid@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-4.0.0.tgz#6e144dee117609232c3f415c34b0e550e64999a5"
+  integrity sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==
+
 nanoid@^3.1.23, nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
@@ -11800,7 +12317,7 @@ node-addon-api@^1.6.3:
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-1.7.2.tgz#3df30b95720b53c24e59948b49532b662444f54d"
   integrity sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==
 
-node-addon-api@^3.0.0, node-addon-api@^3.2.1:
+node-addon-api@^3.0.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.2.1.tgz#81325e0a2117789c0128dab65e7e38f07ceba161"
   integrity sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==
@@ -11825,7 +12342,7 @@ node-forge@^1:
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
   integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
 
-node-gyp-build@^4.2.1, node-gyp-build@^4.3.0:
+node-gyp-build@^4.2.1:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.5.0.tgz#7a64eefa0b21112f89f58379da128ac177f20e40"
   integrity sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==
@@ -12129,42 +12646,6 @@ nwsapi@^2.2.0:
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.2.tgz#e5418863e7905df67d51ec95938d67bf801f0bb0"
   integrity sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==
 
-nx@14.4.3, nx@^14.2.4:
-  version "14.4.3"
-  resolved "https://registry.yarnpkg.com/nx/-/nx-14.4.3.tgz#27a1aea9ffaf143800c20006ed20f9a26f4610a3"
-  integrity sha512-XPaoEAfJI9056qdwTvkutQSwwA3iihqNDwhvk3dmgpT35j8Uzm/y67goACaCUBCjP2dIQqXfNfJVWQIpcG3MTw==
-  dependencies:
-    "@nrwl/cli" "14.4.3"
-    "@nrwl/tao" "14.4.3"
-    "@parcel/watcher" "2.0.4"
-    chalk "4.1.0"
-    chokidar "^3.5.1"
-    cli-cursor "3.1.0"
-    cli-spinners "2.6.1"
-    cliui "^7.0.2"
-    dotenv "~10.0.0"
-    enquirer "~2.3.6"
-    fast-glob "3.2.7"
-    figures "3.2.0"
-    flat "^5.0.2"
-    fs-extra "^10.1.0"
-    glob "7.1.4"
-    ignore "^5.0.4"
-    js-yaml "4.1.0"
-    jsonc-parser "3.0.0"
-    minimatch "3.0.5"
-    npm-run-path "^4.0.1"
-    open "^8.4.0"
-    semver "7.3.4"
-    string-width "^4.2.3"
-    tar-stream "~2.2.0"
-    tmp "~0.2.1"
-    tsconfig-paths "^3.9.0"
-    tslib "^2.3.0"
-    v8-compile-cache "2.3.0"
-    yargs "^17.4.0"
-    yargs-parser "21.0.1"
-
 oauth-sign@~0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
@@ -12541,10 +13022,10 @@ package-json@^6.3.0:
     registry-url "^5.0.0"
     semver "^6.2.0"
 
-pacote@13.6.1:
-  version "13.6.1"
-  resolved "https://registry.yarnpkg.com/pacote/-/pacote-13.6.1.tgz#ac6cbd9032b4c16e5c1e0c60138dfe44e4cc589d"
-  integrity sha512-L+2BI1ougAPsFjXRyBhcKmfT016NscRFLv6Pz5EiNf1CCFJFU0pSKKQwsZTyAQB+sTuUL4TyFyp6J1Ork3dOqw==
+pacote@13.6.2:
+  version "13.6.2"
+  resolved "https://registry.yarnpkg.com/pacote/-/pacote-13.6.2.tgz#0d444ba3618ab3e5cd330b451c22967bbd0ca48a"
+  integrity sha512-Gu8fU3GsvOPkak2CkbojR7vjs3k3P9cA6uazKTHdsdV0gpCEQq2opelnEv30KRQWgVzP5Vd/5umjcedma3MKtg==
   dependencies:
     "@npmcli/git" "^3.0.0"
     "@npmcli/installed-package-contents" "^1.0.7"
@@ -12687,6 +13168,11 @@ parse5@6.0.1, parse5@^6.0.0, parse5@^6.0.1:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
+parse5@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
+  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
+
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -12926,7 +13412,7 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
-postcss-attribute-case-insensitive@^5.0.1:
+postcss-attribute-case-insensitive@^5.0.1, postcss-attribute-case-insensitive@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"
   integrity sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==
@@ -12940,7 +13426,7 @@ postcss-clamp@^4.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-color-functional-notation@^4.2.3:
+postcss-color-functional-notation@^4.2.3, postcss-color-functional-notation@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz#21a909e8d7454d3612d1659e471ce4696f28caec"
   integrity sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==
@@ -12954,7 +13440,7 @@ postcss-color-hex-alpha@^8.0.4:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-color-rebeccapurple@^7.1.0:
+postcss-color-rebeccapurple@^7.1.0, postcss-color-rebeccapurple@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.1.1.tgz#63fdab91d878ebc4dd4b7c02619a0c3d6a56ced0"
   integrity sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==
@@ -12982,14 +13468,14 @@ postcss-custom-selectors@^6.0.3:
   dependencies:
     postcss-selector-parser "^6.0.4"
 
-postcss-dir-pseudo-class@^6.0.4:
+postcss-dir-pseudo-class@^6.0.4, postcss-dir-pseudo-class@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.5.tgz#2bf31de5de76added44e0a25ecf60ae9f7c7c26c"
   integrity sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==
   dependencies:
     postcss-selector-parser "^6.0.10"
 
-postcss-double-position-gradients@^3.1.1:
+postcss-double-position-gradients@^3.1.1, postcss-double-position-gradients@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.2.tgz#b96318fdb477be95997e86edd29c6e3557a49b91"
   integrity sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==
@@ -13030,12 +13516,12 @@ postcss-font-variant@^5.0.0:
   resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz#efd59b4b7ea8bb06127f2d031bfbb7f24d32fa66"
   integrity sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==
 
-postcss-gap-properties@^3.0.3:
+postcss-gap-properties@^3.0.3, postcss-gap-properties@^3.0.5:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz#f7e3cddcf73ee19e94ccf7cb77773f9560aa2fff"
   integrity sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==
 
-postcss-image-set-function@^4.0.6:
+postcss-image-set-function@^4.0.6, postcss-image-set-function@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-4.0.7.tgz#08353bd756f1cbfb3b6e93182c7829879114481f"
   integrity sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==
@@ -13051,6 +13537,15 @@ postcss-import@14.1.0, postcss-import@^14.1.0:
     read-cache "^1.0.0"
     resolve "^1.1.7"
 
+postcss-import@15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.0.0.tgz#0b66c25fdd9c0d19576e63c803cf39e4bad08822"
+  integrity sha512-Y20shPQ07RitgBGv2zvkEAu9bqvrD77C9axhj/aA1BQj4czape2MdClCExvB27EwYEJdGgKZBpKanb0t1rK2Kg==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
 postcss-initial@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-4.0.1.tgz#529f735f72c5724a0fb30527df6fb7ac54d7de42"
@@ -13063,7 +13558,7 @@ postcss-js@^4.0.0:
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-lab-function@^4.2.0:
+postcss-lab-function@^4.2.0, postcss-lab-function@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz#6fe4c015102ff7cd27d1bd5385582f67ebdbdc98"
   integrity sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==
@@ -13177,6 +13672,14 @@ postcss-nested@5.0.6:
   dependencies:
     postcss-selector-parser "^6.0.6"
 
+postcss-nesting@^10.1.10:
+  version "10.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-10.2.0.tgz#0b12ce0db8edfd2d8ae0aaf86427370b898890be"
+  integrity sha512-EwMkYchxiDiKUhlJGzWsD9b2zvq/r2SSubcRrgP+jujMXFzqvANLt16lJANC+5uZ6hjI7lpRmI6O8JIl+8l1KA==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.0"
+    postcss-selector-parser "^6.0.10"
+
 postcss-nesting@^10.1.9:
   version "10.1.10"
   resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-10.1.10.tgz#9c396df3d8232cbedfa95baaac6b765b8fd2a817"
@@ -13190,7 +13693,7 @@ postcss-opacity-percentage@^1.1.2:
   resolved "https://registry.yarnpkg.com/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.2.tgz#bd698bb3670a0a27f6d657cc16744b3ebf3b1145"
   integrity sha512-lyUfF7miG+yewZ8EAk9XUBIlrHyUE6fijnesuz+Mj5zrIHIEw6KcIZSOk/elVMqzLvREmXB83Zi/5QpNRYd47w==
 
-postcss-overflow-shorthand@^3.0.3:
+postcss-overflow-shorthand@^3.0.3, postcss-overflow-shorthand@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.4.tgz#7ed6486fec44b76f0eab15aa4866cda5d55d893e"
   integrity sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==
@@ -13202,7 +13705,7 @@ postcss-page-break@^3.0.4:
   resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-3.0.4.tgz#7fbf741c233621622b68d435babfb70dd8c1ee5f"
   integrity sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==
 
-postcss-place@^7.0.4:
+postcss-place@^7.0.4, postcss-place@^7.0.5:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-7.0.5.tgz#95dbf85fd9656a3a6e60e832b5809914236986c4"
   integrity sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==
@@ -13262,7 +13765,62 @@ postcss-preset-env@7.7.2:
     postcss-selector-not "^6.0.0"
     postcss-value-parser "^4.2.0"
 
-postcss-pseudo-class-any-link@^7.1.5:
+postcss-preset-env@7.8.0:
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.8.0.tgz#5bd3ad53b2ef02edd41645d1ffee1ff8a49f24e5"
+  integrity sha512-leqiqLOellpLKfbHkD06E04P6d9ZQ24mat6hu4NSqun7WG0UhspHR5Myiv/510qouCjoo4+YJtNOqg5xHaFnCA==
+  dependencies:
+    "@csstools/postcss-cascade-layers" "^1.0.5"
+    "@csstools/postcss-color-function" "^1.1.1"
+    "@csstools/postcss-font-format-keywords" "^1.0.1"
+    "@csstools/postcss-hwb-function" "^1.0.2"
+    "@csstools/postcss-ic-unit" "^1.0.1"
+    "@csstools/postcss-is-pseudo-class" "^2.0.7"
+    "@csstools/postcss-nested-calc" "^1.0.0"
+    "@csstools/postcss-normalize-display-values" "^1.0.1"
+    "@csstools/postcss-oklab-function" "^1.1.1"
+    "@csstools/postcss-progressive-custom-properties" "^1.3.0"
+    "@csstools/postcss-stepped-value-functions" "^1.0.1"
+    "@csstools/postcss-text-decoration-shorthand" "^1.0.0"
+    "@csstools/postcss-trigonometric-functions" "^1.0.2"
+    "@csstools/postcss-unset-value" "^1.0.2"
+    autoprefixer "^10.4.8"
+    browserslist "^4.21.3"
+    css-blank-pseudo "^3.0.3"
+    css-has-pseudo "^3.0.4"
+    css-prefers-color-scheme "^6.0.3"
+    cssdb "^7.0.0"
+    postcss-attribute-case-insensitive "^5.0.2"
+    postcss-clamp "^4.1.0"
+    postcss-color-functional-notation "^4.2.4"
+    postcss-color-hex-alpha "^8.0.4"
+    postcss-color-rebeccapurple "^7.1.1"
+    postcss-custom-media "^8.0.2"
+    postcss-custom-properties "^12.1.8"
+    postcss-custom-selectors "^6.0.3"
+    postcss-dir-pseudo-class "^6.0.5"
+    postcss-double-position-gradients "^3.1.2"
+    postcss-env-function "^4.0.6"
+    postcss-focus-visible "^6.0.4"
+    postcss-focus-within "^5.0.4"
+    postcss-font-variant "^5.0.0"
+    postcss-gap-properties "^3.0.5"
+    postcss-image-set-function "^4.0.7"
+    postcss-initial "^4.0.1"
+    postcss-lab-function "^4.2.1"
+    postcss-logical "^5.0.4"
+    postcss-media-minmax "^5.0.0"
+    postcss-nesting "^10.1.10"
+    postcss-opacity-percentage "^1.1.2"
+    postcss-overflow-shorthand "^3.0.4"
+    postcss-page-break "^3.0.4"
+    postcss-place "^7.0.5"
+    postcss-pseudo-class-any-link "^7.1.6"
+    postcss-replace-overflow-wrap "^4.0.0"
+    postcss-selector-not "^6.0.1"
+    postcss-value-parser "^4.2.0"
+
+postcss-pseudo-class-any-link@^7.1.5, postcss-pseudo-class-any-link@^7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz#2693b221902da772c278def85a4d9a64b6e617ab"
   integrity sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==
@@ -13274,25 +13832,25 @@ postcss-replace-overflow-wrap@^4.0.0:
   resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz#d2df6bed10b477bf9c52fab28c568b4b29ca4319"
   integrity sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==
 
-postcss-selector-not@^6.0.0:
+postcss-selector-not@^6.0.0, postcss-selector-not@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz#8f0a709bf7d4b45222793fc34409be407537556d"
   integrity sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==
   dependencies:
     postcss-selector-parser "^6.0.10"
 
-postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
-  version "6.0.9"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
-  integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
+postcss-selector-parser@6.0.10, postcss-selector-parser@^6.0.10:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-selector-parser@^6.0.10:
-  version "6.0.10"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
-  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9:
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
+  integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
@@ -13320,6 +13878,15 @@ postcss@8.4.16:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@8.4.17:
+  version "8.4.17"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.17.tgz#f87863ec7cd353f81f7ab2dec5d67d861bbb1be5"
+  integrity sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.39"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
@@ -13610,10 +14177,10 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
-quicktype-core@6.0.71:
-  version "6.0.71"
-  resolved "https://registry.yarnpkg.com/quicktype-core/-/quicktype-core-6.0.71.tgz#01e9cf870a4d57112a4f0678835902bdd2f45934"
-  integrity sha512-NqyPyMhKFUzDKxk5+omV165x2HfxgAMuKaImjuUY3X0CSREBU7p3Bo2uXCMr16bdghpmc/dXOz4ZXvzayQritg==
+quicktype-core@6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/quicktype-core/-/quicktype-core-6.1.0.tgz#d190dbf79bf424ebcfca92b3437daf8cf096b7f3"
+  integrity sha512-r5+sRrUBX5RSdNNG2zpYD706Lxsq/0Tvh7te52csKrKKcAGGcSd1mx4sWWjhnBc54I0ZkrLHk/urIWwCDihgMg==
   dependencies:
     "@mark.probst/unicode-properties" "~1.1.0"
     browser-or-node "^1.2.1"
@@ -13628,10 +14195,10 @@ quicktype-core@6.0.71:
     wordwrap "^1.0.0"
     yaml "^1.5.0"
 
-quicktype@15.0.261:
-  version "15.0.261"
-  resolved "https://registry.yarnpkg.com/quicktype/-/quicktype-15.0.261.tgz#e8a0eb1a03105ff91b3361006bebd9187045f2c7"
-  integrity sha512-y2Se/GFGSeFNfON7X0MEJO8K+Lm23hWEZs5UMP9dVy3ShSYng6HTVw1YmqreUwGCLRGn4jD9TjNB1oqyaT3NBw==
+quicktype@15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/quicktype/-/quicktype-15.1.0.tgz#710c8512eb64a86a37d9ccd4bca549442f019f15"
+  integrity sha512-hhOXV+XxOlA8UPmjRLEEjkfOcGvKiIXE5dlxv6byz+zx7BHXsYXKZGjgkDweJYf7ta0cGixKlo1qJdZSQOljiA==
   dependencies:
     "@mark.probst/typescript-json-schema" "~0.32.0"
     "@mark.probst/unicode-properties" "~1.1.0"
@@ -13861,7 +14428,7 @@ readable-stream@2.3.0:
     string_decoder "~1.0.0"
     util-deprecate "~1.0.1"
 
-readable-stream@3, readable-stream@^3.0.2, readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.5.0, readable-stream@^3.6.0:
+readable-stream@3, readable-stream@^3.0.2, readable-stream@^3.0.6, readable-stream@^3.4.0, readable-stream@^3.5.0, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -14315,17 +14882,17 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-rxjs@6.6.7, rxjs@^6.5.4:
+rxjs@6.6.7:
   version "6.6.7"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
   integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
   dependencies:
     tslib "^1.9.0"
 
-rxjs@7.5.6, rxjs@^7.5.5:
-  version "7.5.6"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.6.tgz#0446577557862afd6903517ce7cae79ecb9662bc"
-  integrity sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==
+rxjs@7.5.7:
+  version "7.5.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.7.tgz#2ec0d57fdc89ece220d2e702730ae8f1e49def39"
+  integrity sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==
   dependencies:
     tslib "^2.1.0"
 
@@ -14336,6 +14903,13 @@ rxjs@^7.5.4:
   dependencies:
     tslib "^2.1.0"
 
+rxjs@^7.5.5:
+  version "7.5.6"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.6.tgz#0446577557862afd6903517ce7cae79ecb9662bc"
+  integrity sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==
+  dependencies:
+    tslib "^2.1.0"
+
 safe-buffer@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
@@ -14398,6 +14972,15 @@ sass@1.53.0:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+sass@1.54.4:
+  version "1.54.4"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.54.4.tgz#803ff2fef5525f1dd01670c3915b4b68b6cba72d"
+  integrity sha512-3tmF16yvnBwtlPrNBHw/H907j8MlOX8aTBnlNX1yrKx24RKcJGPyLhFUwkoKBKesR3unP93/2z14Ll8NicwQUA==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.1.4.tgz#74b6d33c9ae1e001510f179a91168588f1aedaa9"
@@ -14503,13 +15086,6 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@7.3.4:
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.4.tgz#27aaa7d2e4ca76452f98d3add093a72c943edc97"
-  integrity sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==
-  dependencies:
-    lru-cache "^6.0.0"
-
 semver@7.3.7, semver@^7.3.7:
   version "7.3.7"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
@@ -15394,6 +15970,17 @@ stylus@0.58.1:
     sax "~1.2.4"
     source-map "^0.7.3"
 
+stylus@0.59.0:
+  version "0.59.0"
+  resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.59.0.tgz#a344d5932787142a141946536d6e24e6a6be7aa6"
+  integrity sha512-lQ9w/XIOH5ZHVNuNbWW8D822r+/wBSO/d6XvtyHLF7LW4KaCIDeVbvn5DF8fGCJAUCwVhVi/h6J0NUcnylUEjg==
+  dependencies:
+    "@adobe/css-tools" "^4.0.1"
+    debug "^4.3.2"
+    glob "^7.1.6"
+    sax "~1.2.4"
+    source-map "^0.7.3"
+
 sumchecker@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"
@@ -15534,17 +16121,6 @@ tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-tar-stream@~2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
-  integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==
-  dependencies:
-    bl "^4.0.3"
-    end-of-stream "^1.4.1"
-    fs-constants "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^3.1.1"
-
 tar@^6.0.2, tar@^6.1.11, tar@^6.1.2:
   version "6.1.11"
   resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.11.tgz#6760a38f003afa1b2ffd0ffe9e9abbd0eab3d621"
@@ -15724,7 +16300,7 @@ tmp-promise@^3.0.2:
   dependencies:
     tmp "^0.2.0"
 
-tmp@0.2.1, tmp@^0.2.0, tmp@^0.2.1, tmp@~0.2.1:
+tmp@0.2.1, tmp@^0.2.0, tmp@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
   integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
@@ -16291,6 +16867,14 @@ update-browserslist-db@^1.0.4, update-browserslist-db@^1.0.5:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+update-browserslist-db@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
+  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 update-notifier@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-5.1.0.tgz#4ab0d7c7f36a231dd7316cf7729313f0214d9ad9"
@@ -16444,11 +17028,6 @@ v8-compile-cache-lib@^3.0.1:
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
-v8-compile-cache@2.3.0, v8-compile-cache@^2.0.3:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
-  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
-
 validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -16576,6 +17155,14 @@ watchpack@^2.2.0, watchpack@^2.3.1:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
+watchpack@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
+  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
+  dependencies:
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.1.2"
+
 wbuf@^1.1.0, wbuf@^1.7.3:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
@@ -16656,6 +17243,41 @@ webpack-dev-middleware@^4.1.0:
     range-parser "^1.2.1"
     schema-utils "^3.0.0"
 
+webpack-dev-server@4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.11.0.tgz#290ee594765cd8260adfe83b2d18115ea04484e7"
+  integrity sha512-L5S4Q2zT57SK7tazgzjMiSMBdsw+rGYIX27MgPgx7LDhWO0lViPrHKoLS7jo5In06PWYAhlYu3PbyoC6yAThbw==
+  dependencies:
+    "@types/bonjour" "^3.5.9"
+    "@types/connect-history-api-fallback" "^1.3.5"
+    "@types/express" "^4.17.13"
+    "@types/serve-index" "^1.9.1"
+    "@types/serve-static" "^1.13.10"
+    "@types/sockjs" "^0.3.33"
+    "@types/ws" "^8.5.1"
+    ansi-html-community "^0.0.8"
+    bonjour-service "^1.0.11"
+    chokidar "^3.5.3"
+    colorette "^2.0.10"
+    compression "^1.7.4"
+    connect-history-api-fallback "^2.0.0"
+    default-gateway "^6.0.3"
+    express "^4.17.3"
+    graceful-fs "^4.2.6"
+    html-entities "^2.3.2"
+    http-proxy-middleware "^2.0.3"
+    ipaddr.js "^2.0.1"
+    open "^8.0.9"
+    p-retry "^4.5.0"
+    rimraf "^3.0.2"
+    schema-utils "^4.0.0"
+    selfsigned "^2.0.1"
+    serve-index "^1.9.1"
+    sockjs "^0.3.24"
+    spdy "^4.0.2"
+    webpack-dev-middleware "^5.3.1"
+    ws "^8.4.2"
+
 webpack-dev-server@4.9.3:
   version "4.9.3"
   resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.9.3.tgz#2360a5d6d532acb5410a668417ad549ee3b8a3c9"
@@ -16813,6 +17435,36 @@ webpack@5.73.0, "webpack@>=4.0.0 <6.0.0":
     watchpack "^2.3.1"
     webpack-sources "^3.2.3"
 
+webpack@5.74.0:
+  version "5.74.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.74.0.tgz#02a5dac19a17e0bb47093f2be67c695102a55980"
+  integrity sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^0.0.51"
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/wasm-edit" "1.11.1"
+    "@webassemblyjs/wasm-parser" "1.11.1"
+    acorn "^8.7.1"
+    acorn-import-assertions "^1.7.6"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.10.0"
+    es-module-lexer "^0.9.0"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.9"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.1.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.1.3"
+    watchpack "^2.4.0"
+    webpack-sources "^3.2.3"
+
 webpack@^5.9.0:
   version "5.70.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.70.0.tgz#3461e6287a72b5e6e2f4872700bc8de0d7500e6d"
@@ -17118,11 +17770,6 @@ yaml@^1.10.0, yaml@^1.10.2, yaml@^1.5.0, yaml@^1.7.2:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yargs-parser@21.0.1:
-  version "21.0.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.0.1.tgz#0267f286c877a4f0f728fceb6f8a3e4cb95c6e35"
-  integrity sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==
-
 yargs-parser@^11.1.1:
   version "11.1.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-11.1.1.tgz#879a0865973bca9f6bab5cbdf3b1c67ec7d3bcf4"
@@ -17141,7 +17788,7 @@ yargs-parser@^21.0.0:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.0.0.tgz#a485d3966be4317426dd56bdb6a30131b281dc55"
   integrity sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA==
 
-yargs@17.5.1, yargs@^17.4.0:
+yargs@17.5.1:
   version "17.5.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.5.1.tgz#e109900cab6fcb7fd44b1d8249166feb0b36e58e"
   integrity sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==
@@ -17215,10 +17862,10 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-zone.js@~0.11.7:
-  version "0.11.7"
-  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.11.7.tgz#262194267c7b964e8da77ce16b9fba9bea23cfdc"
-  integrity sha512-e39K2EdK5JfA3FDuUTVRvPlYV4aBfnOOcGuILhQAT7nzeV12uSrLBzImUM9CDVoncDSX4brR/gwqu0heQ3BQ0g==
+zone.js@~0.11.8:
+  version "0.11.8"
+  resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.11.8.tgz#40dea9adc1ad007b5effb2bfed17f350f1f46a21"
+  integrity sha512-82bctBg2hKcEJ21humWIkXRlLBBmrc3nN7DFh5LGGhcyycO2S7FN8NmdvlcKaGFDNVL4/9kFLmwmInTavdJERA==
   dependencies:
     tslib "^2.3.0"