diff --git a/frontend/angular.json b/frontend/angular.json
index f519b148c..4f716e2df 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -35,9 +35,17 @@
                 "glob": "**/*",
                 "input": "node_modules/monaco-editor",
                 "output": "assets/monaco-editor/"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
               }
             ],
             "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
+              "node_modules/@taiga-ui/styles/taiga-ui-global.less",
               "projects/shared/styles/variables.scss",
               "projects/shared/styles/global.scss",
               "projects/shared/styles/shared.scss",
@@ -155,9 +163,16 @@
                 "glob": "**/*.svg",
                 "input": "node_modules/ionicons/dist/ionicons/svg",
                 "output": "./svg"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
               }
             ],
             "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
               "projects/shared/styles/variables.scss",
               "projects/shared/styles/global.scss",
               "projects/shared/styles/shared.scss",
@@ -285,9 +300,16 @@
                 "glob": "**/*.svg",
                 "input": "node_modules/ionicons/dist/ionicons/svg",
                 "output": "./svg"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
               }
             ],
             "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
               "projects/shared/styles/variables.scss",
               "projects/shared/styles/global.scss",
               "projects/shared/styles/shared.scss",
@@ -405,9 +427,16 @@
                 "glob": "**/*.svg",
                 "input": "node_modules/ionicons/dist/ionicons/svg",
                 "output": "./svg"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
               }
             ],
             "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+              "node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less",
               "projects/shared/styles/variables.scss",
               "projects/shared/styles/global.scss",
               "projects/shared/styles/shared.scss",
diff --git a/frontend/config-sample.json b/frontend/config-sample.json
index 3ffb17d2a..fc8593f18 100644
--- a/frontend/config-sample.json
+++ b/frontend/config-sample.json
@@ -1,5 +1,6 @@
 {
   "useMocks": true,
+  "enableWidgets": false,
   "packageArch": "aarch64",
   "osArch": "raspberrypi",
   "ui": {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e7b2ea606..3c90f02c7 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -23,6 +23,12 @@
         "@ng-web-apis/resize-observer": "^2.0.0",
         "@start9labs/argon2": "^0.1.0",
         "@start9labs/emver": "^0.1.5",
+        "@taiga-ui/addon-charts": "^3.14.0",
+        "@taiga-ui/cdk": "^3.14.0",
+        "@taiga-ui/core": "^3.14.0",
+        "@taiga-ui/icons": "^3.14.0",
+        "@taiga-ui/kit": "^3.14.0",
+        "@taiga-ui/styles": "^3.14.0",
         "angular-svg-round-progressbar": "^9.0.0",
         "ansi-to-html": "^0.7.2",
         "base64-js": "^1.5.1",
@@ -71,7 +77,8 @@
         "raw-loader": "^4.0.2",
         "ts-node": "^10.7.0",
         "tslint": "^6.1.3",
-        "typescript": "^4.6.3"
+        "typescript": "^4.6.3",
+        "webpack-bundle-analyzer": "^4.8.0"
       }
     },
     "../patch-db/client": {
@@ -315,7 +322,7 @@
       "version": "14.2.3",
       "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-14.2.3.tgz",
       "integrity": "sha512-E8bnC6F0xNni4IIKAnIDBDkbi6cOePm4Q/Y9IrTk3wquGTfsiMlQpdnRA0nr+FTN/LT3N08O5dEw2Gd4ff4tGA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ajv": "8.11.0",
         "ajv-formats": "2.1.1",
@@ -341,7 +348,7 @@
       "version": "6.6.7",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
       "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "tslib": "^1.9.0"
       },
@@ -353,13 +360,13 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@angular-devkit/schematics": {
       "version": "14.2.3",
       "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-14.2.3.tgz",
       "integrity": "sha512-98ldx+To7xW1BH/DqIToQwHVscPZhXnZP01SeoiUnFlJE5FnXx8Lv7qHAQtE96M+cfE5NR1NKBgfCH3S3rnmFA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@angular-devkit/core": "14.2.3",
         "jsonc-parser": "3.1.0",
@@ -377,7 +384,7 @@
       "version": "6.6.7",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
       "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "tslib": "^1.9.0"
       },
@@ -389,7 +396,7 @@
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@angular/animations": {
       "version": "14.2.2",
@@ -3270,15 +3277,28 @@
       }
     },
     "node_modules/@ng-web-apis/common": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@ng-web-apis/common/-/common-2.0.0.tgz",
-      "integrity": "sha512-2Vnp4WTEqKZArhbKLgD1JIKjsDa3hWCa67OWaRWRH5sgX5xneVVaIAvC8gVpiCfl2p1Roen2kxfyYngx7G64SQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@ng-web-apis/common/-/common-2.0.1.tgz",
+      "integrity": "sha512-DqnH+zZFFKeINpbFIzCrBTYksP+7FqrHxWo2+jIXfMLjSngwZ6WYz3F4N9s+tFc8mKe8I1/P7pZtxD7fqSPtlA==",
       "dependencies": {
         "tslib": "^2.2.0"
       },
       "peerDependencies": {
         "@angular/common": ">=12.0.0",
-        "@angular/core": ">=12.0.0"
+        "@angular/core": ">=12.0.0",
+        "rxjs": ">=6.4.0"
+      }
+    },
+    "node_modules/@ng-web-apis/intersection-observer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-web-apis/intersection-observer/-/intersection-observer-3.0.0.tgz",
+      "integrity": "sha512-Y3ts9WgXG/A6atyMlFOoP8ZNczUNxUGHSV4ii4xCepwcKW2gN/kkimsP4oPtb7UsTWzN1tF1n0bgD2civraZiA==",
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=12.0.0",
+        "@ng-web-apis/common": ">=2.0.0"
       }
     },
     "node_modules/@ng-web-apis/mutation-observer": {
@@ -3325,7 +3345,7 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -3338,7 +3358,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">= 8"
       }
@@ -3347,7 +3367,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -3455,6 +3475,12 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.21",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
+      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
+      "dev": true
+    },
     "node_modules/@rollup/plugin-json": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
@@ -3548,6 +3574,142 @@
         "npm": ">=6.0.0"
       }
     },
+    "node_modules/@taiga-ui/addon-charts": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-3.14.0.tgz",
+      "integrity": "sha512-KnQ4ioYWjV+xyEj7eTnGScAWLBMFtkEzdnSZdg47HFFKaqg7gW08A0Wx8qNTKeHJK7wwjeVSbcPjZBNfKv4zKQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=12.0.0",
+        "@angular/core": ">=12.0.0",
+        "@ng-web-apis/common": ">=2.0.0",
+        "@taiga-ui/cdk": ">=3.14.0",
+        "@taiga-ui/core": ">=3.14.0",
+        "@tinkoff/ng-polymorpheus": ">=4.0.0"
+      }
+    },
+    "node_modules/@taiga-ui/cdk": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-3.14.0.tgz",
+      "integrity": "sha512-Yhk0+IQOWfXmx8UWz61dBexA2hxDOEC0YHmpoQyIVQ6K5GXXpSywkf24WbxWGqQaoKYhECRmL8UxruAYZ8sI9A==",
+      "dependencies": {
+        "@ng-web-apis/common": "2.0.1",
+        "@ng-web-apis/mutation-observer": "2.0.0",
+        "@ng-web-apis/resize-observer": "2.0.0",
+        "@tinkoff/ng-event-plugins": "3.0.0",
+        "@tinkoff/ng-polymorpheus": "4.0.10",
+        "tslib": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "ng-morph": "^2.1.0",
+        "parse5": "^6.0.1"
+      },
+      "peerDependencies": {
+        "@angular/animations": ">=12.0.0",
+        "@angular/common": ">=12.0.0",
+        "@angular/core": ">=12.0.0",
+        "@angular/forms": ">=12.0.0",
+        "rxjs": ">=6.0.0"
+      }
+    },
+    "node_modules/@taiga-ui/core": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-3.14.0.tgz",
+      "integrity": "sha512-qiURNOAPUmsFPkDm1v8a+4SX+aGJVry9f3+XpCgfNM6boPnZ+ggdFG2KyVow6sCAr+kDuw8aUACYtO/ngxdeuw==",
+      "dependencies": {
+        "@taiga-ui/i18n": "^3.14.0",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": ">=12.0.0",
+        "@angular/common": ">=12.0.0",
+        "@angular/core": ">=12.0.0",
+        "@angular/forms": ">=12.0.0",
+        "@angular/platform-browser": ">=12.0.0",
+        "@angular/router": ">=12.0.0",
+        "@ng-web-apis/common": ">=2.0.0",
+        "@ng-web-apis/mutation-observer": ">=2.0.0",
+        "@taiga-ui/cdk": ">=3.14.0",
+        "@taiga-ui/i18n": ">=3.14.0",
+        "@tinkoff/ng-event-plugins": ">=3.0.0",
+        "@tinkoff/ng-polymorpheus": ">=4.0.0",
+        "rxjs": ">=6.0.0"
+      }
+    },
+    "node_modules/@taiga-ui/i18n": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-3.14.0.tgz",
+      "integrity": "sha512-GK4DP+UfBy4AGNsTebfN8TvUKi3QAi2I8+5nMULAjE1qzQd5WEkeXhV+dzLcSkxPbbzPGzSB+23Nnfn/A5IDlQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=12.0.0",
+        "rxjs": ">=6.0.0"
+      }
+    },
+    "node_modules/@taiga-ui/icons": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-3.14.0.tgz",
+      "integrity": "sha512-+I2DYwFsRaYxbX92FCYWcRijvMKZWOZDlmzBkZc+CihF5wm46KTQichZ3iMZ3xACY9czDzcy123iUJqKT+fVRw==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "node_modules/@taiga-ui/kit": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-3.14.0.tgz",
+      "integrity": "sha512-YjSjpuqQYsMsMOLCn7edTGL+VEL3D0wpD7hY1GK4r+TPGTLQi1jby0PxsYbrjGZQ2EavwFuRI59/gqsDis6HIQ==",
+      "dependencies": {
+        "@ng-web-apis/intersection-observer": "^3.0.0",
+        "text-mask-core": "^5.0.0",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=12.0.0",
+        "@angular/core": ">=12.0.0",
+        "@angular/forms": ">=12.0.0",
+        "@angular/router": ">=12.0.0",
+        "@ng-web-apis/common": ">=2.0.0",
+        "@ng-web-apis/mutation-observer": ">=2.0.0",
+        "@taiga-ui/cdk": ">=3.14.0",
+        "@taiga-ui/core": ">=3.14.0",
+        "@taiga-ui/i18n": ">=3.14.0",
+        "@tinkoff/ng-polymorpheus": ">=4.0.0",
+        "rxjs": ">=6.0.0"
+      }
+    },
+    "node_modules/@taiga-ui/styles": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/styles/-/styles-3.14.0.tgz",
+      "integrity": "sha512-xo/aPqexXPUNesmnPMNhwpz4gj5PVHp+aKDcvv4+MCSBaiPTd6nE4wTXMaOW/EdkXrPHqWnxwnTec8SUwX5D9g=="
+    },
+    "node_modules/@tinkoff/ng-event-plugins": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@tinkoff/ng-event-plugins/-/ng-event-plugins-3.0.0.tgz",
+      "integrity": "sha512-3+5R86ozam9uevQ5N7+B/lPMWYCfQGxUOxuSp6qccpPTWqCjTBGjlhRVdt11r6S+3Gx2r9y4rgZ1Q1/P58MOFA==",
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=12.0.0",
+        "@angular/platform-browser": ">=12.0.0",
+        "rxjs": ">=6.0.0"
+      }
+    },
+    "node_modules/@tinkoff/ng-polymorpheus": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/@tinkoff/ng-polymorpheus/-/ng-polymorpheus-4.0.10.tgz",
+      "integrity": "sha512-BxHSwj9CertJ3qiamZ52NTpsKn81EZHjDwiph8mXiEeKXpuPaDn6e5wmTWdW8mYexLPtBsxmCRvZ9vapw4F1kA==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=12.0.0"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -3557,6 +3719,40 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@ts-morph/common": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.9.2.tgz",
+      "integrity": "sha512-IPyg+c3Am0EBoa63W0f/AKeLrJhvzMzQ4BIvD1baxLopmiHOj1HFTXYxC6e8iTZ+UYtN+/WFM9UyGRnoA20b8g==",
+      "optional": true,
+      "dependencies": {
+        "fast-glob": "^3.2.5",
+        "minimatch": "^3.0.4",
+        "mkdirp": "^1.0.4",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "optional": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -3719,6 +3915,12 @@
       "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==",
       "dev": true
     },
+    "node_modules/@types/minimatch": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
+      "optional": true
+    },
     "node_modules/@types/mustache": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@types/mustache/-/mustache-4.2.1.tgz",
@@ -4126,7 +4328,7 @@
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -4142,7 +4344,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ajv": "^8.0.0"
       },
@@ -4292,12 +4494,39 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
+    "node_modules/array-differ": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
+      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
       "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
       "dev": true
     },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/arrify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ast-types": {
       "version": "0.13.4",
       "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
@@ -4489,7 +4718,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/base64-js": {
       "version": "1.5.1",
@@ -4546,7 +4775,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
       "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
@@ -4557,7 +4786,7 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
       "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -4671,7 +4900,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -4948,7 +5177,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
       "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "restore-cursor": "^3.1.0"
       },
@@ -4960,7 +5189,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.7.0.tgz",
       "integrity": "sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       },
@@ -5098,7 +5327,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
       "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.8"
       }
@@ -5117,6 +5346,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/code-block-writer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-10.1.1.tgz",
+      "integrity": "sha512-67ueh2IRGst/51p0n6FvPrnRjAGHY5F8xdjkgrYE7DDzpJe6qA07RYQ9VcoUeo5ATOjSOiWpSL3SWBRRbempMw==",
+      "optional": true
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -5244,7 +5479,7 @@
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/connect-history-api-fallback": {
       "version": "2.0.0",
@@ -5780,7 +6015,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
       "integrity": "sha512-s82itHOnYrN0Ib8r+z7laQz3sdE+4FP3d9Q7VLO7U+KRT+CR0GsWuyHxzdAY82I7cXv0G/twrqomTJLOssO5HA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "clone": "^1.0.2"
       }
@@ -5986,6 +6221,12 @@
         "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
+    },
     "node_modules/duplexer2": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
@@ -6852,13 +7093,13 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
       "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -6897,7 +7138,7 @@
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
       "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -6942,7 +7183,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -7358,7 +7599,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -7406,6 +7647,21 @@
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
       "dev": true
     },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -8249,7 +8505,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8266,7 +8522,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -8278,7 +8534,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
       "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -8299,7 +8555,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -8350,7 +8606,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
       "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=10"
       },
@@ -8516,7 +8772,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/json5": {
       "version": "2.2.1",
@@ -9006,7 +9262,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
       "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "chalk": "^4.1.0",
         "is-unicode-supported": "^0.1.0"
@@ -9022,7 +9278,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -9037,7 +9293,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -9053,7 +9309,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -9065,13 +9321,13 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/log-symbols/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -9080,7 +9336,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -9183,7 +9439,7 @@
       "version": "0.26.2",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.2.tgz",
       "integrity": "sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "sourcemap-codec": "^1.4.8"
       },
@@ -9306,7 +9562,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">= 8"
       }
@@ -9324,7 +9580,7 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -9370,7 +9626,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -9541,7 +9797,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "mkdirp": "bin/cmd.js"
       },
@@ -9554,6 +9810,15 @@
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
       "integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
     },
+    "node_modules/mrmime": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
+      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -9573,6 +9838,47 @@
         "multicast-dns": "cli.js"
       }
     },
+    "node_modules/multimatch": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
+      "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
+      "optional": true,
+      "dependencies": {
+        "@types/minimatch": "^3.0.3",
+        "array-differ": "^3.0.0",
+        "array-union": "^2.1.0",
+        "arrify": "^2.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/multimatch/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "optional": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/multimatch/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mustache": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
@@ -9671,6 +9977,50 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/ng-morph": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ng-morph/-/ng-morph-2.1.1.tgz",
+      "integrity": "sha512-mUziQxQm0YnP9WOCy2WRZVq6xNf+WgAvosdPU+hwmGUinoZ6vBrP3GECoRmM7Aor0PDG1KNIarJsDNS7BlxTLQ==",
+      "optional": true,
+      "dependencies": {
+        "jsonc-parser": "3.0.0",
+        "minimatch": "3.0.4",
+        "multimatch": "5.0.0",
+        "ts-morph": "10.0.2"
+      },
+      "peerDependencies": {
+        "@angular-devkit/core": ">=11.0.0",
+        "@angular-devkit/schematics": ">=11.0.0"
+      }
+    },
+    "node_modules/ng-morph/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "optional": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/ng-morph/node_modules/jsonc-parser": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
+      "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==",
+      "optional": true
+    },
+    "node_modules/ng-morph/node_modules/minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ng-packagr": {
       "version": "14.2.1",
       "resolved": "https://registry.npmjs.org/ng-packagr/-/ng-packagr-14.2.1.tgz",
@@ -10147,7 +10497,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
       "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "mimic-fn": "^2.1.0"
       },
@@ -10184,6 +10534,15 @@
         "opencollective-postinstall": "index.js"
       }
     },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -10205,7 +10564,7 @@
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
       "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "bl": "^4.1.0",
         "chalk": "^4.1.0",
@@ -10228,7 +10587,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -10243,7 +10602,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -10259,7 +10618,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -10271,13 +10630,13 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/ora/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -10286,7 +10645,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -10549,7 +10908,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
       "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/parse5-html-rewriting-stream": {
       "version": "6.0.1",
@@ -10592,6 +10951,12 @@
       "resolved": "../patch-db/client",
       "link": true
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "optional": true
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -10664,7 +11029,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -11656,7 +12021,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -11788,7 +12153,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -12092,7 +12457,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12177,7 +12542,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
       "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "onetime": "^5.1.0",
         "signal-exit": "^3.0.2"
@@ -12199,7 +12564,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -12336,7 +12701,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
+      "devOptional": true,
       "funding": [
         {
           "type": "github",
@@ -12768,7 +13133,21 @@
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "dev": true
+      "devOptional": true
+    },
+    "node_modules/sirv": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
+      "integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
+      "dev": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.20",
+        "mrmime": "^1.0.0",
+        "totalist": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
     },
     "node_modules/slash": {
       "version": "4.0.0",
@@ -12885,7 +13264,7 @@
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
       "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">= 8"
       }
@@ -12966,7 +13345,7 @@
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/spdx-correct": {
       "version": "3.1.1",
@@ -13568,6 +13947,11 @@
         "node": "*"
       }
     },
+    "node_modules/text-mask-core": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/text-mask-core/-/text-mask-core-5.1.2.tgz",
+      "integrity": "sha512-VfkCMdmRRZqXgQZFlDMiavm3hzsMzBM23CxHZsaeAYg66ZhXCNJWrFmnJwNy8KF9f74YvAUAuQenxsMCfuvhUw=="
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -13611,7 +13995,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -13628,6 +14012,15 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/totalist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
+      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tree-kill": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -13642,6 +14035,16 @@
       "resolved": "https://registry.npmjs.org/ts-matches/-/ts-matches-5.2.1.tgz",
       "integrity": "sha512-QSG3V7b3NKIBwBzR8wJcx2VRn0maj5s1Gkj8pdivYtD9us8we7kforlNsREmXobzvPYHE+8poT5gjmDgwQtJ9g=="
     },
+    "node_modules/ts-morph": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-10.0.2.tgz",
+      "integrity": "sha512-TVuIfEqtr9dW25K3Jajqpqx7t/zLRFxKu2rXQZSDjTm4MO4lfmuj1hn8WEryjeDDBFcNOCi+yOmYUYR4HucrAg==",
+      "optional": true,
+      "dependencies": {
+        "@ts-morph/common": "~0.9.0",
+        "code-block-writer": "^10.1.1"
+      }
+    },
     "node_modules/ts-node": {
       "version": "10.9.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
@@ -14025,7 +14428,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -14131,7 +14534,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
       "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "defaults": "^1.0.3"
       }
@@ -14183,6 +14586,130 @@
         }
       }
     },
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.8.0.tgz",
+      "integrity": "sha512-ZzoSBePshOKhr+hd8u6oCkZVwpVaXgpw23ScGLFpR6SjYI7+7iIWYarjN6OEYOfRt8o7ZyZZQk0DuMizJ+LEIg==",
+      "dev": true,
+      "dependencies": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "chalk": "^4.1.0",
+        "commander": "^7.2.0",
+        "gzip-size": "^6.0.0",
+        "lodash": "^4.17.20",
+        "opener": "^1.5.2",
+        "sirv": "^1.0.7",
+        "ws": "^7.3.1"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/webpack-dev-middleware": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
@@ -14882,7 +15409,7 @@
       "version": "14.2.3",
       "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-14.2.3.tgz",
       "integrity": "sha512-E8bnC6F0xNni4IIKAnIDBDkbi6cOePm4Q/Y9IrTk3wquGTfsiMlQpdnRA0nr+FTN/LT3N08O5dEw2Gd4ff4tGA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "ajv": "8.11.0",
         "ajv-formats": "2.1.1",
@@ -14895,7 +15422,7 @@
           "version": "6.6.7",
           "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
           "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "tslib": "^1.9.0"
           }
@@ -14904,7 +15431,7 @@
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
           "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
+          "devOptional": true
         }
       }
     },
@@ -14912,7 +15439,7 @@
       "version": "14.2.3",
       "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-14.2.3.tgz",
       "integrity": "sha512-98ldx+To7xW1BH/DqIToQwHVscPZhXnZP01SeoiUnFlJE5FnXx8Lv7qHAQtE96M+cfE5NR1NKBgfCH3S3rnmFA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@angular-devkit/core": "14.2.3",
         "jsonc-parser": "3.1.0",
@@ -14925,7 +15452,7 @@
           "version": "6.6.7",
           "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
           "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "tslib": "^1.9.0"
           }
@@ -14934,7 +15461,7 @@
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
           "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
+          "devOptional": true
         }
       }
     },
@@ -16931,9 +17458,17 @@
       }
     },
     "@ng-web-apis/common": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@ng-web-apis/common/-/common-2.0.0.tgz",
-      "integrity": "sha512-2Vnp4WTEqKZArhbKLgD1JIKjsDa3hWCa67OWaRWRH5sgX5xneVVaIAvC8gVpiCfl2p1Roen2kxfyYngx7G64SQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@ng-web-apis/common/-/common-2.0.1.tgz",
+      "integrity": "sha512-DqnH+zZFFKeINpbFIzCrBTYksP+7FqrHxWo2+jIXfMLjSngwZ6WYz3F4N9s+tFc8mKe8I1/P7pZtxD7fqSPtlA==",
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
+    "@ng-web-apis/intersection-observer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-web-apis/intersection-observer/-/intersection-observer-3.0.0.tgz",
+      "integrity": "sha512-Y3ts9WgXG/A6atyMlFOoP8ZNczUNxUGHSV4ii4xCepwcKW2gN/kkimsP4oPtb7UsTWzN1tF1n0bgD2civraZiA==",
       "requires": {
         "tslib": "^2.2.0"
       }
@@ -16965,7 +17500,7 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -16975,13 +17510,13 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true
+      "devOptional": true
     },
     "@nodelib/fs.walk": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -17062,6 +17597,12 @@
         "which": "^2.0.2"
       }
     },
+    "@polka/url": {
+      "version": "1.0.0-next.21",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
+      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
+      "dev": true
+    },
     "@rollup/plugin-json": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
@@ -17130,12 +17671,124 @@
       "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.18.0.tgz",
       "integrity": "sha512-NLEY8Jq59smyiivBAxHKipsp9YkkW/K/Vm90zAyXQqukb12i2SFucWHJ1Ik7ropVlhmMVvigyxXgRfQ9quIqtg=="
     },
+    "@taiga-ui/addon-charts": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-3.14.0.tgz",
+      "integrity": "sha512-KnQ4ioYWjV+xyEj7eTnGScAWLBMFtkEzdnSZdg47HFFKaqg7gW08A0Wx8qNTKeHJK7wwjeVSbcPjZBNfKv4zKQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@taiga-ui/cdk": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-3.14.0.tgz",
+      "integrity": "sha512-Yhk0+IQOWfXmx8UWz61dBexA2hxDOEC0YHmpoQyIVQ6K5GXXpSywkf24WbxWGqQaoKYhECRmL8UxruAYZ8sI9A==",
+      "requires": {
+        "@ng-web-apis/common": "2.0.1",
+        "@ng-web-apis/mutation-observer": "2.0.0",
+        "@ng-web-apis/resize-observer": "2.0.0",
+        "@tinkoff/ng-event-plugins": "3.0.0",
+        "@tinkoff/ng-polymorpheus": "4.0.10",
+        "ng-morph": "^2.1.0",
+        "parse5": "^6.0.1",
+        "tslib": "^2.0.0"
+      }
+    },
+    "@taiga-ui/core": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-3.14.0.tgz",
+      "integrity": "sha512-qiURNOAPUmsFPkDm1v8a+4SX+aGJVry9f3+XpCgfNM6boPnZ+ggdFG2KyVow6sCAr+kDuw8aUACYtO/ngxdeuw==",
+      "requires": {
+        "@taiga-ui/i18n": "^3.14.0",
+        "tslib": "^2.0.0"
+      }
+    },
+    "@taiga-ui/i18n": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-3.14.0.tgz",
+      "integrity": "sha512-GK4DP+UfBy4AGNsTebfN8TvUKi3QAi2I8+5nMULAjE1qzQd5WEkeXhV+dzLcSkxPbbzPGzSB+23Nnfn/A5IDlQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@taiga-ui/icons": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-3.14.0.tgz",
+      "integrity": "sha512-+I2DYwFsRaYxbX92FCYWcRijvMKZWOZDlmzBkZc+CihF5wm46KTQichZ3iMZ3xACY9czDzcy123iUJqKT+fVRw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@taiga-ui/kit": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-3.14.0.tgz",
+      "integrity": "sha512-YjSjpuqQYsMsMOLCn7edTGL+VEL3D0wpD7hY1GK4r+TPGTLQi1jby0PxsYbrjGZQ2EavwFuRI59/gqsDis6HIQ==",
+      "requires": {
+        "@ng-web-apis/intersection-observer": "^3.0.0",
+        "text-mask-core": "^5.0.0",
+        "tslib": "^2.0.0"
+      }
+    },
+    "@taiga-ui/styles": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/styles/-/styles-3.14.0.tgz",
+      "integrity": "sha512-xo/aPqexXPUNesmnPMNhwpz4gj5PVHp+aKDcvv4+MCSBaiPTd6nE4wTXMaOW/EdkXrPHqWnxwnTec8SUwX5D9g=="
+    },
+    "@tinkoff/ng-event-plugins": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@tinkoff/ng-event-plugins/-/ng-event-plugins-3.0.0.tgz",
+      "integrity": "sha512-3+5R86ozam9uevQ5N7+B/lPMWYCfQGxUOxuSp6qccpPTWqCjTBGjlhRVdt11r6S+3Gx2r9y4rgZ1Q1/P58MOFA==",
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
+    "@tinkoff/ng-polymorpheus": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/@tinkoff/ng-polymorpheus/-/ng-polymorpheus-4.0.10.tgz",
+      "integrity": "sha512-BxHSwj9CertJ3qiamZ52NTpsKn81EZHjDwiph8mXiEeKXpuPaDn6e5wmTWdW8mYexLPtBsxmCRvZ9vapw4F1kA==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
       "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
       "dev": true
     },
+    "@ts-morph/common": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.9.2.tgz",
+      "integrity": "sha512-IPyg+c3Am0EBoa63W0f/AKeLrJhvzMzQ4BIvD1baxLopmiHOj1HFTXYxC6e8iTZ+UYtN+/WFM9UyGRnoA20b8g==",
+      "optional": true,
+      "requires": {
+        "fast-glob": "^3.2.5",
+        "minimatch": "^3.0.4",
+        "mkdirp": "^1.0.4",
+        "path-browserify": "^1.0.1"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "1.1.11",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+          "optional": true,
+          "requires": {
+            "balanced-match": "^1.0.0",
+            "concat-map": "0.0.1"
+          }
+        },
+        "minimatch": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+          "optional": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        }
+      }
+    },
     "@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -17298,6 +17951,12 @@
       "integrity": "sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==",
       "dev": true
     },
+    "@types/minimatch": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
+      "optional": true
+    },
     "@types/mustache": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@types/mustache/-/mustache-4.2.1.tgz",
@@ -17678,7 +18337,7 @@
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -17690,7 +18349,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "ajv": "^8.0.0"
       }
@@ -17792,12 +18451,30 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
+    "array-differ": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
+      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
+      "optional": true
+    },
     "array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
       "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
       "dev": true
     },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "optional": true
+    },
+    "arrify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
+      "optional": true
+    },
     "ast-types": {
       "version": "0.13.4",
       "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
@@ -17934,7 +18611,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "devOptional": true
     },
     "base64-js": {
       "version": "1.5.1",
@@ -17968,7 +18645,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
       "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "buffer": "^5.5.0",
         "inherits": "^2.0.4",
@@ -17979,7 +18656,7 @@
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
           "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "base64-js": "^1.3.1",
             "ieee754": "^1.1.13"
@@ -18070,7 +18747,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -18256,7 +18933,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
       "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "restore-cursor": "^3.1.0"
       }
@@ -18265,7 +18942,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.7.0.tgz",
       "integrity": "sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw==",
-      "dev": true
+      "devOptional": true
     },
     "cli-truncate": {
       "version": "3.1.0",
@@ -18354,7 +19031,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
       "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
-      "dev": true
+      "devOptional": true
     },
     "clone-deep": {
       "version": "4.0.1",
@@ -18367,6 +19044,12 @@
         "shallow-clone": "^3.0.0"
       }
     },
+    "code-block-writer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-10.1.1.tgz",
+      "integrity": "sha512-67ueh2IRGst/51p0n6FvPrnRjAGHY5F8xdjkgrYE7DDzpJe6qA07RYQ9VcoUeo5ATOjSOiWpSL3SWBRRbempMw==",
+      "optional": true
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -18478,7 +19161,7 @@
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "devOptional": true
     },
     "connect-history-api-fallback": {
       "version": "2.0.0",
@@ -18857,7 +19540,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
       "integrity": "sha512-s82itHOnYrN0Ib8r+z7laQz3sdE+4FP3d9Q7VLO7U+KRT+CR0GsWuyHxzdAY82I7cXv0G/twrqomTJLOssO5HA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "clone": "^1.0.2"
       }
@@ -19011,6 +19694,12 @@
         "domhandler": "^4.2.0"
       }
     },
+    "duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
+    },
     "duplexer2": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
@@ -19589,13 +20278,13 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "devOptional": true
     },
     "fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
       "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -19631,7 +20320,7 @@
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
       "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "reusify": "^1.0.4"
       }
@@ -19664,7 +20353,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -19973,7 +20662,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -20009,6 +20698,15 @@
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
       "dev": true
     },
+    "gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "requires": {
+        "duplexer": "^0.1.2"
+      }
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -20631,7 +21329,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true
+      "devOptional": true
     },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
@@ -20642,7 +21340,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -20651,7 +21349,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
       "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
-      "dev": true
+      "devOptional": true
     },
     "is-lambda": {
       "version": "1.0.1",
@@ -20669,7 +21367,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true
+      "devOptional": true
     },
     "is-plain-obj": {
       "version": "3.0.0",
@@ -20702,7 +21400,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
       "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
-      "dev": true
+      "devOptional": true
     },
     "is-what": {
       "version": "3.14.1",
@@ -20827,7 +21525,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
+      "devOptional": true
     },
     "json5": {
       "version": "2.2.1",
@@ -21210,7 +21908,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
       "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "chalk": "^4.1.0",
         "is-unicode-supported": "^0.1.0"
@@ -21220,7 +21918,7 @@
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
@@ -21229,7 +21927,7 @@
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -21239,7 +21937,7 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "color-name": "~1.1.4"
           }
@@ -21248,19 +21946,19 @@
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
+          "devOptional": true
         },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
+          "devOptional": true
         },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -21337,7 +22035,7 @@
       "version": "0.26.2",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.2.tgz",
       "integrity": "sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "sourcemap-codec": "^1.4.8"
       }
@@ -21435,7 +22133,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true
+      "devOptional": true
     },
     "methods": {
       "version": "1.1.2",
@@ -21447,7 +22145,7 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -21478,7 +22176,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true
+      "devOptional": true
     },
     "mini-css-extract-plugin": {
       "version": "2.6.1",
@@ -21605,13 +22303,19 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "dev": true
+      "devOptional": true
     },
     "monaco-editor": {
       "version": "0.33.0",
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.33.0.tgz",
       "integrity": "sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw=="
     },
+    "mrmime": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
+      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
+      "dev": true
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -21628,6 +22332,40 @@
         "thunky": "^1.0.2"
       }
     },
+    "multimatch": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
+      "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
+      "optional": true,
+      "requires": {
+        "@types/minimatch": "^3.0.3",
+        "array-differ": "^3.0.0",
+        "array-union": "^2.1.0",
+        "arrify": "^2.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "1.1.11",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+          "optional": true,
+          "requires": {
+            "balanced-match": "^1.0.0",
+            "concat-map": "0.0.1"
+          }
+        },
+        "minimatch": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+          "optional": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        }
+      }
+    },
     "mustache": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
@@ -21704,6 +22442,45 @@
       "integrity": "sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==",
       "dev": true
     },
+    "ng-morph": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ng-morph/-/ng-morph-2.1.1.tgz",
+      "integrity": "sha512-mUziQxQm0YnP9WOCy2WRZVq6xNf+WgAvosdPU+hwmGUinoZ6vBrP3GECoRmM7Aor0PDG1KNIarJsDNS7BlxTLQ==",
+      "optional": true,
+      "requires": {
+        "jsonc-parser": "3.0.0",
+        "minimatch": "3.0.4",
+        "multimatch": "5.0.0",
+        "ts-morph": "10.0.2"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "1.1.11",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+          "optional": true,
+          "requires": {
+            "balanced-match": "^1.0.0",
+            "concat-map": "0.0.1"
+          }
+        },
+        "jsonc-parser": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
+          "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==",
+          "optional": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "optional": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        }
+      }
+    },
     "ng-packagr": {
       "version": "14.2.1",
       "resolved": "https://registry.npmjs.org/ng-packagr/-/ng-packagr-14.2.1.tgz",
@@ -22074,7 +22851,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
       "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "mimic-fn": "^2.1.0"
       }
@@ -22096,6 +22873,12 @@
       "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
       "dev": true
     },
+    "opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true
+    },
     "optionator": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -22114,7 +22897,7 @@
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
       "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "bl": "^4.1.0",
         "chalk": "^4.1.0",
@@ -22131,7 +22914,7 @@
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
@@ -22140,7 +22923,7 @@
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -22150,7 +22933,7 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "color-name": "~1.1.4"
           }
@@ -22159,19 +22942,19 @@
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
+          "devOptional": true
         },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
+          "devOptional": true
         },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -22373,7 +23156,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
       "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
-      "dev": true
+      "devOptional": true
     },
     "parse5-html-rewriting-stream": {
       "version": "6.0.1",
@@ -22424,6 +23207,12 @@
         "uuid": "8.3.2"
       }
     },
+    "path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "optional": true
+    },
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -22481,7 +23270,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true
+      "devOptional": true
     },
     "pidtree": {
       "version": "0.5.0",
@@ -23106,7 +23895,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true
+      "devOptional": true
     },
     "qrcode": {
       "version": "1.5.1",
@@ -23207,7 +23996,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true
+      "devOptional": true
     },
     "randombytes": {
       "version": "2.1.0",
@@ -23441,7 +24230,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "dev": true
+      "devOptional": true
     },
     "require-main-filename": {
       "version": "2.0.0",
@@ -23507,7 +24296,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
       "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "onetime": "^5.1.0",
         "signal-exit": "^3.0.2"
@@ -23523,7 +24312,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true
+      "devOptional": true
     },
     "rfdc": {
       "version": "1.3.0",
@@ -23619,7 +24408,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "queue-microtask": "^1.2.2"
       }
@@ -23949,7 +24738,18 @@
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "dev": true
+      "devOptional": true
+    },
+    "sirv": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
+      "integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
+      "dev": true,
+      "requires": {
+        "@polka/url": "^1.0.0-next.20",
+        "mrmime": "^1.0.0",
+        "totalist": "^1.0.0"
+      }
     },
     "slash": {
       "version": "4.0.0",
@@ -24036,7 +24836,7 @@
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
       "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-      "dev": true
+      "devOptional": true
     },
     "source-map-js": {
       "version": "1.0.2",
@@ -24098,7 +24898,7 @@
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "dev": true
+      "devOptional": true
     },
     "spdx-correct": {
       "version": "3.1.1",
@@ -24550,6 +25350,11 @@
         }
       }
     },
+    "text-mask-core": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/text-mask-core/-/text-mask-core-5.1.2.tgz",
+      "integrity": "sha512-VfkCMdmRRZqXgQZFlDMiavm3hzsMzBM23CxHZsaeAYg66ZhXCNJWrFmnJwNy8KF9f74YvAUAuQenxsMCfuvhUw=="
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -24587,7 +25392,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "is-number": "^7.0.0"
       }
@@ -24598,6 +25403,12 @@
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "dev": true
     },
+    "totalist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
+      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
+      "dev": true
+    },
     "tree-kill": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
@@ -24609,6 +25420,16 @@
       "resolved": "https://registry.npmjs.org/ts-matches/-/ts-matches-5.2.1.tgz",
       "integrity": "sha512-QSG3V7b3NKIBwBzR8wJcx2VRn0maj5s1Gkj8pdivYtD9us8we7kforlNsREmXobzvPYHE+8poT5gjmDgwQtJ9g=="
     },
+    "ts-morph": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-10.0.2.tgz",
+      "integrity": "sha512-TVuIfEqtr9dW25K3Jajqpqx7t/zLRFxKu2rXQZSDjTm4MO4lfmuj1hn8WEryjeDDBFcNOCi+yOmYUYR4HucrAg==",
+      "optional": true,
+      "requires": {
+        "@ts-morph/common": "~0.9.0",
+        "code-block-writer": "^10.1.1"
+      }
+    },
     "ts-node": {
       "version": "10.9.1",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
@@ -24884,7 +25705,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -24969,7 +25790,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
       "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "defaults": "^1.0.3"
       }
@@ -25044,6 +25865,88 @@
         }
       }
     },
+    "webpack-bundle-analyzer": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.8.0.tgz",
+      "integrity": "sha512-ZzoSBePshOKhr+hd8u6oCkZVwpVaXgpw23ScGLFpR6SjYI7+7iIWYarjN6OEYOfRt8o7ZyZZQk0DuMizJ+LEIg==",
+      "dev": true,
+      "requires": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "chalk": "^4.1.0",
+        "commander": "^7.2.0",
+        "gzip-size": "^6.0.0",
+        "lodash": "^4.17.20",
+        "opener": "^1.5.2",
+        "sirv": "^1.0.7",
+        "ws": "^7.3.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "ws": {
+          "version": "7.5.9",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "dev": true,
+          "requires": {}
+        }
+      }
+    },
     "webpack-dev-middleware": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9d13d7ac6..93abdd37f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,9 +17,11 @@
     "build:install-wiz": "ng run install-wizard:build",
     "build:setup": "ng run setup-wizard:build",
     "build:ui": "ng run ui:build",
+    "build:ui:stats": "ng run ui:build --stats-json",
     "build:all": "npm run build:deps && npm run build:dui && npm run build:setup && npm run build:ui && npm run build:install-wiz",
     "build:shared": "ng build shared",
     "build:marketplace": "npm run build:shared && ng build marketplace",
+    "analyze:ui": "webpack-bundle-analyzer dist/ui/stats.json",
     "publish:shared": "npm run build:shared && npm publish ./dist/shared --access public",
     "publish:marketplace": "npm run build:marketplace && npm publish ./dist/marketplace --access public",
     "start:dui": "npm run-script build-config && ionic serve --project diagnostic-ui --host 0.0.0.0",
@@ -39,12 +41,18 @@
     "@angular/platform-browser-dynamic": "^14.1.0",
     "@angular/router": "^14.1.0",
     "@ionic/angular": "^6.1.15",
+    "@materia-ui/ngx-monaco-editor": "^6.0.0",
     "@ng-web-apis/common": "^2.0.0",
     "@ng-web-apis/mutation-observer": "^2.0.0",
     "@ng-web-apis/resize-observer": "^2.0.0",
-    "@materia-ui/ngx-monaco-editor": "^6.0.0",
     "@start9labs/argon2": "^0.1.0",
     "@start9labs/emver": "^0.1.5",
+    "@taiga-ui/addon-charts": "^3.14.0",
+    "@taiga-ui/cdk": "^3.14.0",
+    "@taiga-ui/core": "^3.14.0",
+    "@taiga-ui/icons": "^3.14.0",
+    "@taiga-ui/kit": "^3.14.0",
+    "@taiga-ui/styles": "^3.14.0",
     "angular-svg-round-progressbar": "^9.0.0",
     "ansi-to-html": "^0.7.2",
     "base64-js": "^1.5.1",
@@ -93,7 +101,8 @@
     "raw-loader": "^4.0.2",
     "ts-node": "^10.7.0",
     "tslint": "^6.1.3",
-    "typescript": "^4.6.3"
+    "typescript": "^4.6.3",
+    "webpack-bundle-analyzer": "^4.8.0"
   },
   "husky": {
     "hooks": {
diff --git a/frontend/projects/diagnostic-ui/src/app/app.component.html b/frontend/projects/diagnostic-ui/src/app/app.component.html
index 13b96776e..cd28a7e80 100644
--- a/frontend/projects/diagnostic-ui/src/app/app.component.html
+++ b/frontend/projects/diagnostic-ui/src/app/app.component.html
@@ -1,3 +1,5 @@
-<ion-app>
-  <ion-router-outlet></ion-router-outlet>
-</ion-app>
+<tui-root>
+  <ion-app>
+    <ion-router-outlet></ion-router-outlet>
+  </ion-app>
+</tui-root>
diff --git a/frontend/projects/diagnostic-ui/src/app/app.component.scss b/frontend/projects/diagnostic-ui/src/app/app.component.scss
index e69de29bb..b528fd9bd 100644
--- a/frontend/projects/diagnostic-ui/src/app/app.component.scss
+++ b/frontend/projects/diagnostic-ui/src/app/app.component.scss
@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+tui-root {
+  height: 100%;
+}
diff --git a/frontend/projects/diagnostic-ui/src/app/app.module.ts b/frontend/projects/diagnostic-ui/src/app/app.module.ts
index 78ebf4090..1abde53a3 100644
--- a/frontend/projects/diagnostic-ui/src/app/app.module.ts
+++ b/frontend/projects/diagnostic-ui/src/app/app.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { RouteReuseStrategy } from '@angular/router'
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular'
+import { TuiRootModule } from '@taiga-ui/core'
 import { AppComponent } from './app.component'
 import { AppRoutingModule } from './app-routing.module'
 import { HttpClientModule } from '@angular/common/http'
@@ -19,11 +20,12 @@ const {
   declarations: [AppComponent],
   imports: [
     HttpClientModule,
-    BrowserModule,
+    BrowserAnimationsModule,
     IonicModule.forRoot({
       mode: 'md',
     }),
     AppRoutingModule,
+    TuiRootModule,
   ],
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
diff --git a/frontend/projects/install-wizard/src/app/app.component.html b/frontend/projects/install-wizard/src/app/app.component.html
index 13b96776e..cd28a7e80 100644
--- a/frontend/projects/install-wizard/src/app/app.component.html
+++ b/frontend/projects/install-wizard/src/app/app.component.html
@@ -1,3 +1,5 @@
-<ion-app>
-  <ion-router-outlet></ion-router-outlet>
-</ion-app>
+<tui-root>
+  <ion-app>
+    <ion-router-outlet></ion-router-outlet>
+  </ion-app>
+</tui-root>
diff --git a/frontend/projects/install-wizard/src/app/app.component.scss b/frontend/projects/install-wizard/src/app/app.component.scss
index e69de29bb..b528fd9bd 100644
--- a/frontend/projects/install-wizard/src/app/app.component.scss
+++ b/frontend/projects/install-wizard/src/app/app.component.scss
@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+tui-root {
+  height: 100%;
+}
diff --git a/frontend/projects/install-wizard/src/app/app.module.ts b/frontend/projects/install-wizard/src/app/app.module.ts
index 78ebf4090..1abde53a3 100644
--- a/frontend/projects/install-wizard/src/app/app.module.ts
+++ b/frontend/projects/install-wizard/src/app/app.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { RouteReuseStrategy } from '@angular/router'
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular'
+import { TuiRootModule } from '@taiga-ui/core'
 import { AppComponent } from './app.component'
 import { AppRoutingModule } from './app-routing.module'
 import { HttpClientModule } from '@angular/common/http'
@@ -19,11 +20,12 @@ const {
   declarations: [AppComponent],
   imports: [
     HttpClientModule,
-    BrowserModule,
+    BrowserAnimationsModule,
     IonicModule.forRoot({
       mode: 'md',
     }),
     AppRoutingModule,
+    TuiRootModule,
   ],
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
diff --git a/frontend/projects/marketplace/package.json b/frontend/projects/marketplace/package.json
index 15bbb2372..7ccca60fc 100644
--- a/frontend/projects/marketplace/package.json
+++ b/frontend/projects/marketplace/package.json
@@ -6,6 +6,7 @@
     "@angular/core": ">=13.2.0",
     "@ionic/angular": ">=6.0.0",
     "@start9labs/shared": ">=0.3.0",
+    "@taiga-ui/cdk": ">=3.0.0",
     "fuse.js": "^6.4.6"
   },
   "dependencies": {
diff --git a/frontend/projects/marketplace/src/pages/list/search/search.component.html b/frontend/projects/marketplace/src/pages/list/search/search.component.html
index 8471d11b0..198ff6e95 100644
--- a/frontend/projects/marketplace/src/pages/list/search/search.component.html
+++ b/frontend/projects/marketplace/src/pages/list/search/search.component.html
@@ -1,6 +1,6 @@
 <ion-grid>
   <ion-row>
-    <ion-col sizeSm="8" offset-sm="2" sizeLg="6" offset-lg="3">
+    <ion-col responsiveCol class="column" sizeSm="8" sizeLg="6">
       <ion-toolbar color="transparent" class="ion-text-left">
         <ion-searchbar
           color="dark"
diff --git a/frontend/projects/marketplace/src/pages/list/search/search.component.scss b/frontend/projects/marketplace/src/pages/list/search/search.component.scss
index 4b1475f5b..b81945ce0 100644
--- a/frontend/projects/marketplace/src/pages/list/search/search.component.scss
+++ b/frontend/projects/marketplace/src/pages/list/search/search.component.scss
@@ -2,3 +2,7 @@
   display: block;
   padding-bottom: 32px;
 }
+
+.column {
+  margin: 0 auto;
+}
diff --git a/frontend/projects/marketplace/src/pages/list/search/search.module.ts b/frontend/projects/marketplace/src/pages/list/search/search.module.ts
index 9c346a709..79c7b03ad 100644
--- a/frontend/projects/marketplace/src/pages/list/search/search.module.ts
+++ b/frontend/projects/marketplace/src/pages/list/search/search.module.ts
@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { IonicModule } from '@ionic/angular'
+import { ResponsiveColModule } from '@start9labs/shared'
 
 import { SearchComponent } from './search.component'
 
 @NgModule({
-  imports: [IonicModule, FormsModule],
+  imports: [IonicModule, FormsModule, ResponsiveColModule],
   declarations: [SearchComponent],
   exports: [SearchComponent],
 })
diff --git a/frontend/projects/marketplace/src/pages/list/skeleton/skeleton.component.html b/frontend/projects/marketplace/src/pages/list/skeleton/skeleton.component.html
index 664f18626..8cdce3d16 100644
--- a/frontend/projects/marketplace/src/pages/list/skeleton/skeleton.component.html
+++ b/frontend/projects/marketplace/src/pages/list/skeleton/skeleton.component.html
@@ -13,6 +13,7 @@
   <ion-row>
     <ion-col
       *ngFor="let pkg of ['', '', '', '']"
+      responsiveCol
       sizeXs="12"
       sizeSm="12"
       sizeMd="6"
diff --git a/frontend/projects/marketplace/src/pages/list/skeleton/skeleton.module.ts b/frontend/projects/marketplace/src/pages/list/skeleton/skeleton.module.ts
index a1405f009..434b17f1e 100644
--- a/frontend/projects/marketplace/src/pages/list/skeleton/skeleton.module.ts
+++ b/frontend/projects/marketplace/src/pages/list/skeleton/skeleton.module.ts
@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { IonicModule } from '@ionic/angular'
+import { ResponsiveColModule } from '@start9labs/shared'
 
 import { SkeletonComponent } from './skeleton.component'
 
 @NgModule({
-  imports: [CommonModule, IonicModule],
+  imports: [CommonModule, IonicModule, ResponsiveColModule],
   declarations: [SkeletonComponent],
   exports: [SkeletonComponent],
 })
diff --git a/frontend/projects/marketplace/src/pages/release-notes/release-notes.component.html b/frontend/projects/marketplace/src/pages/release-notes/release-notes.component.html
index 6fef89363..74e34c88f 100644
--- a/frontend/projects/marketplace/src/pages/release-notes/release-notes.component.html
+++ b/frontend/projects/marketplace/src/pages/release-notes/release-notes.component.html
@@ -1,4 +1,4 @@
-<ion-content>
+<ion-content class="with-widgets">
   <ng-container *ngIf="notes$ | async as notes; else loading">
     <div *ngFor="let note of notes | keyvalue: asIsOrder">
       <ion-button
@@ -11,7 +11,7 @@
         <p class="version">{{ note.key | displayEmver }}</p>
       </ion-button>
       <ion-card
-        elementRef
+        tuiElement
         #element="elementRef"
         class="panel"
         color="light"
diff --git a/frontend/projects/marketplace/src/pages/release-notes/release-notes.module.ts b/frontend/projects/marketplace/src/pages/release-notes/release-notes.module.ts
index 65602c1ea..583631dc4 100644
--- a/frontend/projects/marketplace/src/pages/release-notes/release-notes.module.ts
+++ b/frontend/projects/marketplace/src/pages/release-notes/release-notes.module.ts
@@ -5,8 +5,8 @@ import {
   EmverPipesModule,
   MarkdownPipeModule,
   TextSpinnerComponentModule,
-  ElementModule,
 } from '@start9labs/shared'
+import { TuiElementModule } from '@taiga-ui/cdk'
 
 import { ReleaseNotesComponent } from './release-notes.component'
 
@@ -17,7 +17,7 @@ import { ReleaseNotesComponent } from './release-notes.component'
     TextSpinnerComponentModule,
     EmverPipesModule,
     MarkdownPipeModule,
-    ElementModule,
+    TuiElementModule,
   ],
   declarations: [ReleaseNotesComponent],
   exports: [ReleaseNotesComponent],
diff --git a/frontend/projects/marketplace/src/pages/show/additional/additional.component.html b/frontend/projects/marketplace/src/pages/show/additional/additional.component.html
index 3dc5c41e8..fc06782b4 100644
--- a/frontend/projects/marketplace/src/pages/show/additional/additional.component.html
+++ b/frontend/projects/marketplace/src/pages/show/additional/additional.component.html
@@ -22,7 +22,7 @@
 <ion-item-divider>Additional Info</ion-item-divider>
 <ion-grid *ngIf="pkg.manifest as manifest">
   <ion-row>
-    <ion-col sizeXs="12" sizeMd="6">
+    <ion-col responsiveCol sizeXs="12" sizeMd="6">
       <ion-item-group>
         <ion-item
           *ngIf="manifest['git-hash'] as gitHash; else noHash"
@@ -71,7 +71,7 @@
         </ion-item>
       </ion-item-group>
     </ion-col>
-    <ion-col sizeXs="12" sizeMd="6">
+    <ion-col responsiveCol sizeXs="12" sizeMd="6">
       <ion-item-group>
         <ion-item
           [href]="manifest['upstream-repo']"
diff --git a/frontend/projects/marketplace/src/pages/show/additional/additional.module.ts b/frontend/projects/marketplace/src/pages/show/additional/additional.module.ts
index dd1814f2d..8d85c7b70 100644
--- a/frontend/projects/marketplace/src/pages/show/additional/additional.module.ts
+++ b/frontend/projects/marketplace/src/pages/show/additional/additional.module.ts
@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { IonicModule } from '@ionic/angular'
-import { MarkdownModule } from '@start9labs/shared'
+import { MarkdownModule, ResponsiveColModule } from '@start9labs/shared'
 
 import { AdditionalComponent } from './additional.component'
 
 @NgModule({
-  imports: [CommonModule, IonicModule, MarkdownModule],
+  imports: [CommonModule, IonicModule, MarkdownModule, ResponsiveColModule],
   declarations: [AdditionalComponent],
   exports: [AdditionalComponent],
 })
diff --git a/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.component.html b/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.component.html
index a3d2270e5..87b902603 100644
--- a/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.component.html
+++ b/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.component.html
@@ -3,6 +3,7 @@
   <ion-row>
     <ion-col
       *ngFor="let dep of pkg.manifest.dependencies | keyvalue"
+      responsiveCol
       sizeSm="12"
       sizeMd="6"
     >
diff --git a/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.module.ts b/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.module.ts
index 16321d03c..abb3032e9 100644
--- a/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.module.ts
+++ b/frontend/projects/marketplace/src/pages/show/dependencies/dependencies.module.ts
@@ -2,7 +2,11 @@ import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
-import { EmverPipesModule, SharedPipesModule } from '@start9labs/shared'
+import {
+  EmverPipesModule,
+  ResponsiveColModule,
+  SharedPipesModule,
+} from '@start9labs/shared'
 
 import { DependenciesComponent } from './dependencies.component'
 
@@ -13,6 +17,7 @@ import { DependenciesComponent } from './dependencies.component'
     IonicModule,
     SharedPipesModule,
     EmverPipesModule,
+    ResponsiveColModule,
   ],
   declarations: [DependenciesComponent],
   exports: [DependenciesComponent],
diff --git a/frontend/projects/setup-wizard/src/app/app.component.html b/frontend/projects/setup-wizard/src/app/app.component.html
index 13b96776e..cd28a7e80 100644
--- a/frontend/projects/setup-wizard/src/app/app.component.html
+++ b/frontend/projects/setup-wizard/src/app/app.component.html
@@ -1,3 +1,5 @@
-<ion-app>
-  <ion-router-outlet></ion-router-outlet>
-</ion-app>
+<tui-root>
+  <ion-app>
+    <ion-router-outlet></ion-router-outlet>
+  </ion-app>
+</tui-root>
diff --git a/frontend/projects/setup-wizard/src/app/app.component.scss b/frontend/projects/setup-wizard/src/app/app.component.scss
index e69de29bb..b528fd9bd 100644
--- a/frontend/projects/setup-wizard/src/app/app.component.scss
+++ b/frontend/projects/setup-wizard/src/app/app.component.scss
@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+tui-root {
+  height: 100%;
+}
diff --git a/frontend/projects/setup-wizard/src/app/app.module.ts b/frontend/projects/setup-wizard/src/app/app.module.ts
index 00ae42d96..f2ba59012 100644
--- a/frontend/projects/setup-wizard/src/app/app.module.ts
+++ b/frontend/projects/setup-wizard/src/app/app.module.ts
@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { RouteReuseStrategy } from '@angular/router'
 import { HttpClientModule } from '@angular/common/http'
+import { TuiRootModule } from '@taiga-ui/core'
 import { ApiService } from './services/api/api.service'
 import { MockApiService } from './services/api/mock-api.service'
 import { LiveApiService } from './services/api/live-api.service'
@@ -27,7 +28,7 @@ const {
 @NgModule({
   declarations: [AppComponent],
   imports: [
-    BrowserModule,
+    BrowserAnimationsModule,
     IonicModule.forRoot({
       mode: 'md',
       navAnimation: iosTransitionAnimation,
@@ -39,6 +40,7 @@ const {
     LoadingPageModule,
     RecoverPageModule,
     TransferPageModule,
+    TuiRootModule,
   ],
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
diff --git a/frontend/projects/setup-wizard/src/app/pages/success/success.module.ts b/frontend/projects/setup-wizard/src/app/pages/success/success.module.ts
index 199896da0..c0a7a0ec2 100644
--- a/frontend/projects/setup-wizard/src/app/pages/success/success.module.ts
+++ b/frontend/projects/setup-wizard/src/app/pages/success/success.module.ts
@@ -2,6 +2,8 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { FormsModule } from '@angular/forms'
+import { ResponsiveColModule } from '@start9labs/shared'
+
 import { SuccessPage } from './success.page'
 import { PasswordPageModule } from '../../modals/password/password.module'
 import { SuccessPageRoutingModule } from './success-routing.module'
@@ -14,6 +16,7 @@ import { DownloadDocComponent } from './download-doc/download-doc.component'
     IonicModule,
     PasswordPageModule,
     SuccessPageRoutingModule,
+    ResponsiveColModule,
   ],
   declarations: [SuccessPage, DownloadDocComponent],
   exports: [SuccessPage],
diff --git a/frontend/projects/setup-wizard/src/app/pages/success/success.page.html b/frontend/projects/setup-wizard/src/app/pages/success/success.page.html
index eabb22656..144bdc270 100644
--- a/frontend/projects/setup-wizard/src/app/pages/success/success.page.html
+++ b/frontend/projects/setup-wizard/src/app/pages/success/success.page.html
@@ -7,7 +7,7 @@
         <ng-container *ngIf="isKiosk; else notKiosk">
           <ion-card>
             <ion-row class="ion-align-items-center">
-              <ion-col size-xs="12" class="ion-text-center">
+              <ion-col responsiveCol sizeXs="12" class="ion-text-center">
                 <div class="inline" style="margin-bottom: 3rem">
                   <ion-icon
                     name="checkmark-circle-outline"
@@ -33,7 +33,7 @@
         <ng-template #notKiosk>
           <ion-card>
             <ion-row class="ion-align-items-center">
-              <ion-col size-xs="12" class="ion-text-center">
+              <ion-col responsiveCol sizeXs="12" class="ion-text-center">
                 <div style="margin-bottom: 4rem">
                   <div class="inline">
                     <ion-icon
diff --git a/frontend/projects/shared/package.json b/frontend/projects/shared/package.json
index 22ded4fb3..5c2901efc 100644
--- a/frontend/projects/shared/package.json
+++ b/frontend/projects/shared/package.json
@@ -8,7 +8,8 @@
     "@ionic/angular": ">=6.0.0",
     "@ng-web-apis/mutation-observer": ">=2.0.0",
     "@ng-web-apis/resize-observer": ">=2.0.0",
-    "@start9labs/emver": "^0.1.5"
+    "@start9labs/emver": "^0.1.5",
+    "@taiga-ui/cdk": ">=3.0.0"
   },
   "exports": {
     "./assets/": "./assets/"
diff --git a/frontend/projects/shared/src/components/elastic-container/elastic-container.component.html b/frontend/projects/shared/src/components/elastic-container/elastic-container.component.html
index c587915cf..61d22c645 100644
--- a/frontend/projects/shared/src/components/elastic-container/elastic-container.component.html
+++ b/frontend/projects/shared/src/components/elastic-container/elastic-container.component.html
@@ -1,3 +1,3 @@
-<div (elasticContainer)="height = $event">
+<div class="wrapper" (elasticContainer)="height = $event">
   <ng-content></ng-content>
 </div>
diff --git a/frontend/projects/shared/src/components/elastic-container/elastic-container.component.scss b/frontend/projects/shared/src/components/elastic-container/elastic-container.component.scss
index d60e43bb0..175b74be7 100644
--- a/frontend/projects/shared/src/components/elastic-container/elastic-container.component.scss
+++ b/frontend/projects/shared/src/components/elastic-container/elastic-container.component.scss
@@ -3,3 +3,8 @@
   overflow: hidden;
   transition: height 0.25s;
 }
+
+.wrapper {
+  padding-top: 1px;
+  margin-top: -1px;
+}
diff --git a/frontend/projects/shared/src/components/elastic-container/elastic-container.directive.ts b/frontend/projects/shared/src/components/elastic-container/elastic-container.directive.ts
index e12770493..a30cd4337 100644
--- a/frontend/projects/shared/src/components/elastic-container/elastic-container.directive.ts
+++ b/frontend/projects/shared/src/components/elastic-container/elastic-container.directive.ts
@@ -29,7 +29,7 @@ export class ElasticContainerDirective {
     inject(ResizeObserverService),
     inject(MutationObserverService),
   ).pipe(
-    map(() => this.elementRef.nativeElement.clientHeight),
+    map(() => this.elementRef.nativeElement.clientHeight - 1), // Compensate for padding
     distinctUntilChanged(),
   )
 }
diff --git a/frontend/projects/shared/src/directives/element/element.directive.ts b/frontend/projects/shared/src/directives/element/element.directive.ts
deleted file mode 100644
index 599d1ab16..000000000
--- a/frontend/projects/shared/src/directives/element/element.directive.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Directive, ElementRef, Inject } from '@angular/core'
-
-@Directive({
-  selector: '[elementRef]',
-  exportAs: 'elementRef',
-})
-export class ElementDirective<T extends Element> extends ElementRef<T> {
-  constructor(@Inject(ElementRef) { nativeElement }: ElementRef<T>) {
-    super(nativeElement)
-  }
-}
diff --git a/frontend/projects/shared/src/directives/element/element.module.ts b/frontend/projects/shared/src/directives/element/element.module.ts
deleted file mode 100644
index 85601d56a..000000000
--- a/frontend/projects/shared/src/directives/element/element.module.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core'
-
-import { ElementDirective } from './element.directive'
-
-@NgModule({
-  declarations: [ElementDirective],
-  exports: [ElementDirective],
-})
-export class ElementModule {}
diff --git a/frontend/projects/shared/src/directives/responsive-col/responsive-col-viewport.directive.ts b/frontend/projects/shared/src/directives/responsive-col/responsive-col-viewport.directive.ts
new file mode 100644
index 000000000..f85e19517
--- /dev/null
+++ b/frontend/projects/shared/src/directives/responsive-col/responsive-col-viewport.directive.ts
@@ -0,0 +1,68 @@
+import {
+  Directive,
+  ElementRef,
+  Inject,
+  InjectionToken,
+  Input,
+  NgZone,
+} from '@angular/core'
+import { ResizeObserverService } from '@ng-web-apis/resize-observer'
+import { distinctUntilChanged, Observable } from 'rxjs'
+import { map } from 'rxjs/operators'
+import { tuiZonefree } from '@taiga-ui/cdk'
+
+export type Step = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+/**
+ * Not exported:
+ * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/media.ts
+ *
+ * export const SIZE_TO_MEDIA: any = {
+ *   xs: '(min-width: 0px)',
+ *   sm: '(min-width: 576px)',
+ *   md: '(min-width: 768px)',
+ *   lg: '(min-width: 992px)',
+ *   xl: '(min-width: 1200px)',
+ * };
+ */
+export const BREAKPOINTS = new InjectionToken<readonly [number, Step][]>(
+  'BREAKPOINTS',
+  {
+    factory: () => [
+      [1200, 'xl'],
+      [992, 'lg'],
+      [768, 'md'],
+      [576, 'sm'],
+      [0, 'xs'],
+    ],
+  },
+)
+
+@Directive({
+  selector: '[responsiveColViewport]',
+  exportAs: 'viewport',
+  providers: [ResizeObserverService],
+})
+export class ResponsiveColViewportDirective extends Observable<Step> {
+  @Input()
+  responsiveColViewport: Observable<Step> | '' = ''
+
+  private readonly stream$ = this.resize$.pipe(
+    map(() => this.elementRef.nativeElement.clientWidth),
+    map(width => this.breakpoints.find(([step]) => width >= step)?.[1] || 'xs'),
+    distinctUntilChanged(),
+    tuiZonefree(this.zone),
+  )
+
+  constructor(
+    @Inject(BREAKPOINTS)
+    private readonly breakpoints: readonly [number, Step][],
+    private readonly resize$: ResizeObserverService,
+    private readonly elementRef: ElementRef<HTMLElement>,
+    private readonly zone: NgZone,
+  ) {
+    super(subscriber =>
+      (this.responsiveColViewport || this.stream$).subscribe(subscriber),
+    )
+  }
+}
diff --git a/frontend/projects/shared/src/directives/responsive-col/responsive-col.directive.ts b/frontend/projects/shared/src/directives/responsive-col/responsive-col.directive.ts
new file mode 100644
index 000000000..fbe7dc896
--- /dev/null
+++ b/frontend/projects/shared/src/directives/responsive-col/responsive-col.directive.ts
@@ -0,0 +1,56 @@
+import { Directive, OnInit, Optional } from '@angular/core'
+import { TuiDestroyService } from '@taiga-ui/cdk'
+import {
+  ResponsiveColViewportDirective,
+  Step,
+} from './responsive-col-viewport.directive'
+import { IonCol } from '@ionic/angular'
+import { takeUntil } from 'rxjs'
+
+const SIZE: readonly Step[] = ['xl', 'lg', 'md', 'sm', 'xs']
+
+@Directive({
+  selector: 'ion-col[responsiveCol]',
+  providers: [TuiDestroyService],
+})
+export class ResponsiveColDirective implements OnInit {
+  readonly size: Record<Step, string | undefined> = {
+    xs: '12',
+    sm: '6',
+    md: '4',
+    lg: '3',
+    xl: '2',
+  }
+
+  constructor(
+    @Optional()
+    viewport$: ResponsiveColViewportDirective | null,
+    destroy$: TuiDestroyService,
+    private readonly col: IonCol,
+  ) {
+    viewport$?.pipe(takeUntil(destroy$)).subscribe(size => {
+      const max = this.size[size] || this.findMax(size)
+
+      this.col.sizeLg = max
+      this.col.sizeMd = max
+      this.col.sizeSm = max
+      this.col.sizeXl = max
+      this.col.sizeXs = max
+    })
+  }
+
+  ngOnInit() {
+    this.size.lg = this.col.sizeLg
+    this.size.md = this.col.sizeMd
+    this.size.sm = this.col.sizeSm
+    this.size.xl = this.col.sizeXl
+    this.size.xs = this.col.sizeXs
+  }
+
+  private findMax(current: Step): string | undefined {
+    const start = SIZE.indexOf(current) - 1
+    const max = SIZE.find((size, i) => i > start && this.size[size]) || current
+
+    return this.size[max]
+  }
+}
diff --git a/frontend/projects/shared/src/directives/responsive-col/responsive-col.module.ts b/frontend/projects/shared/src/directives/responsive-col/responsive-col.module.ts
new file mode 100644
index 000000000..9b87b16dc
--- /dev/null
+++ b/frontend/projects/shared/src/directives/responsive-col/responsive-col.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core'
+
+import { ResponsiveColViewportDirective } from './responsive-col-viewport.directive'
+import { ResponsiveColDirective } from './responsive-col.directive'
+
+@NgModule({
+  declarations: [ResponsiveColDirective, ResponsiveColViewportDirective],
+  exports: [ResponsiveColDirective, ResponsiveColViewportDirective],
+})
+export class ResponsiveColModule {}
diff --git a/frontend/projects/shared/src/public-api.ts b/frontend/projects/shared/src/public-api.ts
index 4f1ccc7bc..1e16f11bb 100644
--- a/frontend/projects/shared/src/public-api.ts
+++ b/frontend/projects/shared/src/public-api.ts
@@ -22,8 +22,9 @@ export * from './components/toast/toast.component'
 export * from './components/toast/toast.module'
 export * from './components/toast/toast-button.directive'
 
-export * from './directives/element/element.directive'
-export * from './directives/element/element.module'
+export * from './directives/responsive-col/responsive-col.directive'
+export * from './directives/responsive-col/responsive-col.module'
+export * from './directives/responsive-col/responsive-col-viewport.directive'
 export * from './directives/safe-links/safe-links.directive'
 export * from './directives/safe-links/safe-links.module'
 
@@ -40,7 +41,6 @@ export * from './pipes/shared/trust.pipe'
 export * from './pipes/unit-conversion/unit-conversion.module'
 export * from './pipes/unit-conversion/unit-conversion.pipe'
 
-export * from './services/destroy.service'
 export * from './services/download-html.service'
 export * from './services/emver.service'
 export * from './services/error-toast.service'
diff --git a/frontend/projects/shared/src/services/destroy.service.ts b/frontend/projects/shared/src/services/destroy.service.ts
deleted file mode 100644
index d27120f43..000000000
--- a/frontend/projects/shared/src/services/destroy.service.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Injectable, OnDestroy } from '@angular/core'
-import { ReplaySubject } from 'rxjs'
-
-/**
- * Observable abstraction over ngOnDestroy to use with takeUntil
- */
-@Injectable()
-export class DestroyService extends ReplaySubject<void> implements OnDestroy {
-  ngOnDestroy() {
-    this.next()
-    this.complete()
-  }
-}
diff --git a/frontend/projects/shared/src/types/workspace-config.ts b/frontend/projects/shared/src/types/workspace-config.ts
index 3af8fc06a..997ded733 100644
--- a/frontend/projects/shared/src/types/workspace-config.ts
+++ b/frontend/projects/shared/src/types/workspace-config.ts
@@ -3,6 +3,7 @@ export type WorkspaceConfig = {
   osArch: 'aarch64' | 'x86_64' | 'raspberrypi'
   gitHash: string
   useMocks: boolean
+  enableWidgets: boolean
   // each key corresponds to a project and values adjust settings for that project, eg: ui, install-wizard, setup-wizard, diagnostic-ui
   ui: {
     api: {
diff --git a/frontend/projects/ui/src/app/app-routing.module.ts b/frontend/projects/ui/src/app/app-routing.module.ts
index bc81a63e7..b1b79c05d 100644
--- a/frontend/projects/ui/src/app/app-routing.module.ts
+++ b/frontend/projects/ui/src/app/app-routing.module.ts
@@ -80,7 +80,6 @@ const routes: Routes = [
       scrollPositionRestoration: 'enabled',
       preloadingStrategy: PreloadAllModules,
       initialNavigation: 'disabled',
-      useHash: true,
     }),
   ],
   exports: [RouterModule],
diff --git a/frontend/projects/ui/src/app/app.component.html b/frontend/projects/ui/src/app/app.component.html
index f4d32e3d9..c20b99c73 100644
--- a/frontend/projects/ui/src/app/app.component.html
+++ b/frontend/projects/ui/src/app/app.component.html
@@ -1,33 +1,77 @@
-<ion-app appEnter>
-  <ion-content>
-    <ion-split-pane
-      contentId="main-content"
-      [disabled]="!(authService.isVerified$ | async)"
-      (ionSplitPaneVisible)="splitPaneVisible($event)"
-    >
-      <ion-menu contentId="main-content" type="overlay">
-        <ion-content color="light" scrollY="false">
-          <app-menu *ngIf="authService.isVerified$ | async"></app-menu>
-        </ion-content>
-      </ion-menu>
-      <ion-router-outlet
-        id="main-content"
-        class="container"
-        [class.container_offline]="
-          (authService.isVerified$ | async) && !(connection.connected$ | async)
-        "
-      ></ion-router-outlet>
-    </ion-split-pane>
+<tui-root
+  *ngIf="widgetDrawer$ | async as drawer"
+  tuiMode="onDark"
+  [style.--widgets-width.px]="drawer.open ? drawer.width : 0"
+>
+  <ion-app appEnter>
+    <ion-content>
+      <ion-split-pane
+        contentId="main-content"
+        [disabled]="!(authService.isVerified$ | async)"
+        (ionSplitPaneVisible)="splitPaneVisible($event)"
+      >
+        <ion-menu
+          contentId="main-content"
+          type="overlay"
+          side="start"
+          class="left-menu"
+        >
+          <ion-content color="light" scrollY="false">
+            <app-menu *ngIf="authService.isVerified$ | async"></app-menu>
+          </ion-content>
+        </ion-menu>
 
-    <section appPreloader></section>
-  </ion-content>
-  <ion-footer>
-    <footer appFooter></footer>
-  </ion-footer>
-  <ion-footer
-    *ngIf="(authService.isVerified$ | async) && !(sidebarOpen$ | async)"
-  >
-    <connection-bar></connection-bar>
-  </ion-footer>
-  <toast-container></toast-container>
-</ion-app>
+        <ion-menu
+          contentId="main-content"
+          type="overlay"
+          side="end"
+          class="right-menu container"
+          [class.container_offline]="
+            (authService.isVerified$ | async) &&
+            !(connection.connected$ | async)
+          "
+          [class.right-menu_hidden]="!drawer.open"
+          [style.--side-width.px]="drawer.width"
+        >
+          <div class="divider">
+            <button
+              class="widgets-button"
+              [class.widgets-button_collapse]="drawer.width === 600"
+              (click)="onResize(drawer)"
+            ></button>
+          </div>
+          <widgets *ngIf="drawer.open" [wide]="drawer.width === 600"></widgets>
+        </ion-menu>
+
+        <ion-router-outlet
+          [responsiveColViewport]="viewport"
+          id="main-content"
+          class="container"
+          [class.container_offline]="
+            (authService.isVerified$ | async) &&
+            !(connection.connected$ | async)
+          "
+        >
+          <ion-content
+            #viewport="viewport"
+            responsiveColViewport
+            class="ion-padding with-widgets"
+            style="pointer-events: none; opacity: 0"
+          ></ion-content>
+        </ion-router-outlet>
+      </ion-split-pane>
+
+      <section appPreloader></section>
+    </ion-content>
+    <ion-footer>
+      <footer appFooter></footer>
+    </ion-footer>
+    <ion-footer
+      *ngIf="(authService.isVerified$ | async) && !(sidebarOpen$ | async)"
+    >
+      <connection-bar></connection-bar>
+    </ion-footer>
+    <toast-container></toast-container>
+  </ion-app>
+</tui-root>
+<tui-theme-night></tui-theme-night>
diff --git a/frontend/projects/ui/src/app/app.component.scss b/frontend/projects/ui/src/app/app.component.scss
index a40f38a8c..b0e9367b1 100644
--- a/frontend/projects/ui/src/app/app.component.scss
+++ b/frontend/projects/ui/src/app/app.component.scss
@@ -1,8 +1,13 @@
 :host {
   display: block;
+  height: 100%;
 }
 
-ion-split-pane {
+tui-root {
+  height: 100%;
+}
+
+.left-menu {
   --side-max-width: 280px;
 }
 
@@ -12,4 +17,103 @@ ion-split-pane {
   &_offline {
     filter: saturate(0.75) contrast(0.85);
   }
-}
\ No newline at end of file
+
+  @media screen and (max-width: 991.499px) {
+    --widgets-width: 0px;
+  }
+}
+
+.right-menu {
+  --side-max-width: 600px;
+
+  position: fixed;
+  z-index: 1000;
+  right: 0;
+  left: auto;
+  top: 74px;
+
+  // For some reason *ngIf is broken upon first login
+  &_hidden {
+    display: none;
+  }
+}
+
+.divider {
+  height: 100%;
+  width: 10px;
+  pointer-events: none;
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+
+  background: #e2e2e2;
+
+  z-index: 10;
+  opacity: 0.2;
+  transition: opacity 0.3s;
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    margin-top: -78px;
+    left: 10px;
+    width: 60px;
+    height: 50px;
+    border-bottom-left-radius: 14px;
+    box-shadow: -14px 0 0 -1px #e2e2e2;
+  }
+
+  &:after {
+    margin-top: 28px;
+    border-radius: 0;
+    border-top-left-radius: 14px;
+  }
+
+  &:hover {
+    opacity: 0.4;
+  }
+}
+
+.widgets-button {
+  position: absolute;
+  top: 50%;
+  font-size: 0;
+  left: 100%;
+  width: 16px;
+  height: 60px;
+  margin-top: -30px;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  background: inherit;
+  pointer-events: auto;
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 3px;
+    width: 2px;
+    height: 8px;
+    background: black;
+    transform: rotate(-45deg);
+    border-radius: 2px;
+  }
+
+  &:before {
+    margin-top: -5px;
+    transform: rotate(45deg);
+  }
+
+  &_collapse:before {
+    transform: rotate(-45deg);
+  }
+
+  &_collapse:after {
+    transform: rotate(45deg);
+  }
+}
diff --git a/frontend/projects/ui/src/app/app.component.ts b/frontend/projects/ui/src/app/app.component.ts
index 5eb870fef..d3e731e74 100644
--- a/frontend/projects/ui/src/app/app.component.ts
+++ b/frontend/projects/ui/src/app/app.component.ts
@@ -7,6 +7,10 @@ import { PatchMonitorService } from './services/patch-monitor.service'
 import { ConnectionService } from './services/connection.service'
 import { Title } from '@angular/platform-browser'
 import { ServerNameService } from './services/server-name.service'
+import {
+  ClientStorageService,
+  WidgetDrawer,
+} from './services/client-storage.service'
 
 @Component({
   selector: 'app-root',
@@ -16,6 +20,7 @@ import { ServerNameService } from './services/server-name.service'
 export class AppComponent implements OnDestroy {
   readonly subscription = merge(this.patchData, this.patchMonitor).subscribe()
   readonly sidebarOpen$ = this.splitPane.sidebarOpen$
+  readonly widgetDrawer$ = this.clientStorageService.widgetDrawer$
 
   constructor(
     private readonly titleService: Title,
@@ -25,6 +30,7 @@ export class AppComponent implements OnDestroy {
     private readonly serverNameService: ServerNameService,
     readonly authService: AuthService,
     readonly connection: ConnectionService,
+    readonly clientStorageService: ClientStorageService,
   ) {}
 
   ngOnInit() {
@@ -37,6 +43,13 @@ export class AppComponent implements OnDestroy {
     this.splitPane.sidebarOpen$.next(detail.visible)
   }
 
+  onResize(drawer: WidgetDrawer) {
+    this.clientStorageService.updateWidgetDrawer({
+      ...drawer,
+      width: drawer.width === 400 ? 600 : 400,
+    })
+  }
+
   ngOnDestroy() {
     this.subscription.unsubscribe()
   }
diff --git a/frontend/projects/ui/src/app/app.module.ts b/frontend/projects/ui/src/app/app.module.ts
index 490ce5f83..23a0bd26a 100644
--- a/frontend/projects/ui/src/app/app.module.ts
+++ b/frontend/projects/ui/src/app/app.module.ts
@@ -1,9 +1,19 @@
+import {
+  TuiDialogModule,
+  TuiModeModule,
+  TuiRootModule,
+  TuiThemeNightModule,
+} from '@taiga-ui/core'
 import { HttpClientModule } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { IonicModule } from '@ionic/angular'
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor'
-import { MarkdownModule, SharedPipesModule } from '@start9labs/shared'
+import {
+  MarkdownModule,
+  ResponsiveColModule,
+  SharedPipesModule,
+} from '@start9labs/shared'
 
 import { AppComponent } from './app.component'
 import { AppRoutingModule } from './app-routing.module'
@@ -18,6 +28,7 @@ import { APP_PROVIDERS } from './app.providers'
 import { PatchDbModule } from './services/patch-db/patch-db.module'
 import { ToastContainerModule } from './components/toast-container/toast-container.module'
 import { ConnectionBarComponentModule } from './components/connection-bar/connection-bar.component.module'
+import { WidgetsPageModule } from './pages/widgets/widgets.module'
 
 @NgModule({
   declarations: [AppComponent],
@@ -41,6 +52,12 @@ import { ConnectionBarComponentModule } from './components/connection-bar/connec
     PatchDbModule,
     ToastContainerModule,
     ConnectionBarComponentModule,
+    TuiRootModule,
+    TuiDialogModule,
+    TuiModeModule,
+    TuiThemeNightModule,
+    WidgetsPageModule,
+    ResponsiveColModule,
   ],
   providers: APP_PROVIDERS,
   bootstrap: [AppComponent],
diff --git a/frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.html b/frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.html
index d9c485c0c..0f4a01105 100644
--- a/frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.html
+++ b/frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.html
@@ -1,6 +1,6 @@
 <backup-drives-header [type]="type"></backup-drives-header>
 
-<ion-content class="ion-padding">
+<ion-content class="ion-padding with-widgets">
   <!-- loading -->
   <text-spinner
     *ngIf="loading; else loaded"
diff --git a/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.html b/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.html
index 612472dfd..46da84a76 100644
--- a/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.html
+++ b/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.html
@@ -1,3 +1,16 @@
+<ng-container *ngIf="enableWidgets">
+  <ion-button class="widgets" color="dark" (click)="onWidgets()">
+    <ion-icon name="grid-outline"></ion-icon>
+  </ion-button>
+  <ion-button
+    *ngIf="widgetDrawer$ | async as drawer"
+    class="sidebar"
+    color="dark"
+    (click)="onSidebar(drawer)"
+  >
+    <ion-icon name="grid-outline"></ion-icon>
+  </ion-button>
+</ng-container>
 <div class="wrapper">
   <ion-badge
     *ngIf="!(sidebarOpen$ | async) && (unreadCount$ | async) as unreadCount"
diff --git a/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.module.ts b/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.module.ts
index b09ad93f7..04cc6b8c6 100644
--- a/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.module.ts
+++ b/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.module.ts
@@ -2,10 +2,11 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { BadgeMenuComponent } from './badge-menu.component'
+import { TuiLetModule } from '@taiga-ui/cdk'
 
 @NgModule({
+  imports: [CommonModule, IonicModule, TuiLetModule],
   declarations: [BadgeMenuComponent],
-  imports: [CommonModule, IonicModule],
   exports: [BadgeMenuComponent],
 })
 export class BadgeMenuComponentModule {}
diff --git a/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.scss b/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.scss
index 80d397db1..1e9265e5a 100644
--- a/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.scss
+++ b/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.scss
@@ -1,6 +1,25 @@
+:host {
+  display: flex;
+  align-items: center;
+  padding-right: 8px;
+}
+
+.sidebar {
+  display: none;
+}
+
+@media screen and (min-width: 992px) {
+  .widgets {
+    display: none;
+  }
+
+  .sidebar {
+    display: inline-block;
+  }
+}
+
 .wrapper {
   position: relative;
-  margin-right: 1vh;
 }
 
 .md-badge {
diff --git a/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.ts b/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.ts
index 352049335..3f91da5c4 100644
--- a/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.ts
+++ b/frontend/projects/ui/src/app/components/badge-menu-button/badge-menu.component.ts
@@ -2,6 +2,16 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { SplitPaneTracker } from 'src/app/services/split-pane.service'
 import { PatchDB } from 'patch-db-client'
 import { DataModel } from 'src/app/services/patch-db/data-model'
+import { TuiDialogService } from '@taiga-ui/core'
+import { WIDGETS_COMPONENT } from '../../pages/widgets/widgets.page'
+import { WorkspaceConfig } from '@start9labs/shared'
+import {
+  ClientStorageService,
+  WidgetDrawer,
+} from 'src/app/services/client-storage.service'
+
+const { enableWidgets } =
+  require('../../../../../../config.json') as WorkspaceConfig
 
 @Component({
   selector: 'badge-menu-button',
@@ -10,11 +20,30 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BadgeMenuComponent {
-  unreadCount$ = this.patch.watch$('server-info', 'unread-notification-count')
-  sidebarOpen$ = this.splitPane.sidebarOpen$
+  readonly unreadCount$ = this.patch.watch$(
+    'server-info',
+    'unread-notification-count',
+  )
+  readonly sidebarOpen$ = this.splitPane.sidebarOpen$
+  readonly widgetDrawer$ = this.clientStorageService.widgetDrawer$
+
+  readonly enableWidgets = enableWidgets
 
   constructor(
     private readonly splitPane: SplitPaneTracker,
     private readonly patch: PatchDB<DataModel>,
+    private readonly dialog: TuiDialogService,
+    private readonly clientStorageService: ClientStorageService,
   ) {}
+
+  onSidebar(drawer: WidgetDrawer) {
+    this.clientStorageService.updateWidgetDrawer({
+      ...drawer,
+      open: !drawer.open,
+    })
+  }
+
+  onWidgets() {
+    this.dialog.open(WIDGETS_COMPONENT, { label: 'Widgets' }).subscribe()
+  }
 }
diff --git a/frontend/projects/ui/src/app/components/logs/logs.component.html b/frontend/projects/ui/src/app/components/logs/logs.component.html
index 231f0347a..f786ef79e 100644
--- a/frontend/projects/ui/src/app/components/logs/logs.component.html
+++ b/frontend/projects/ui/src/app/components/logs/logs.component.html
@@ -11,7 +11,7 @@
   [scrollEvents]="true"
   (ionScroll)="handleScroll($event)"
   (ionScrollEnd)="handleScrollEnd()"
-  class="ion-padding"
+  class="ion-padding with-widgets"
 >
   <ion-infinite-scroll
     id="scroller"
@@ -73,7 +73,7 @@
   </ng-container>
 </ion-content>
 
-<ion-footer>
+<ion-footer class="with-widgets">
   <ion-toolbar>
     <div class="inline ion-padding-start">
       <ion-checkbox [(ngModel)]="autoScroll" color="dark"></ion-checkbox>
diff --git a/frontend/projects/ui/src/app/components/logs/logs.component.ts b/frontend/projects/ui/src/app/components/logs/logs.component.ts
index 26acb5182..5f0688757 100644
--- a/frontend/projects/ui/src/app/components/logs/logs.component.ts
+++ b/frontend/projects/ui/src/app/components/logs/logs.component.ts
@@ -15,12 +15,12 @@ import { WebSocketSubjectConfig } from 'rxjs/webSocket'
 import {
   LogsRes,
   ServerLogsReq,
-  DestroyService,
   ErrorToastService,
   toLocalIsoString,
   Log,
   DownloadHTMLService,
 } from '@start9labs/shared'
+import { TuiDestroyService } from '@taiga-ui/cdk'
 import { RR } from 'src/app/services/api/api.types'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ConnectionService } from 'src/app/services/connection.service'
@@ -39,7 +39,7 @@ var convert = new Convert({
   selector: 'logs',
   templateUrl: './logs.component.html',
   styleUrls: ['./logs.component.scss'],
-  providers: [DestroyService, DownloadHTMLService],
+  providers: [TuiDestroyService, DownloadHTMLService],
 })
 export class LogsComponent {
   @ViewChild(IonContent)
@@ -68,7 +68,7 @@ export class LogsComponent {
 
   constructor(
     private readonly errToast: ErrorToastService,
-    private readonly destroy$: DestroyService,
+    private readonly destroy$: TuiDestroyService,
     private readonly api: ApiService,
     private readonly loadingCtrl: LoadingController,
     private readonly downloadHtml: DownloadHTMLService,
diff --git a/frontend/projects/ui/src/app/components/widget-list/widget-list.component.html b/frontend/projects/ui/src/app/components/widget-list/widget-list.component.html
index 85c3687f9..09de70b81 100644
--- a/frontend/projects/ui/src/app/components/widget-list/widget-list.component.html
+++ b/frontend/projects/ui/src/app/components/widget-list/widget-list.component.html
@@ -3,6 +3,7 @@
     <ion-row class="ion-justify-content-center ion-align-items-center">
       <ion-col
         *ngFor="let card of cards"
+        responsiveCol
         sizeLg="4"
         sizeSm="6"
         sizeXs="12"
diff --git a/frontend/projects/ui/src/app/components/widget-list/widget-list.component.module.ts b/frontend/projects/ui/src/app/components/widget-list/widget-list.component.module.ts
index 8fb0c5f37..d4fbd1bed 100644
--- a/frontend/projects/ui/src/app/components/widget-list/widget-list.component.module.ts
+++ b/frontend/projects/ui/src/app/components/widget-list/widget-list.component.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { RouterModule } from '@angular/router'
+import { ResponsiveColModule } from '@start9labs/shared'
 import { WidgetListComponent } from './widget-list.component'
 import { AnyLinkModule } from 'src/app/components/any-link/any-link.component.module'
 import { WidgetCardComponentModule } from '../widget-card/widget-card.component.module'
@@ -14,6 +15,7 @@ import { WidgetCardComponentModule } from '../widget-card/widget-card.component.
     RouterModule.forChild([]),
     AnyLinkModule,
     WidgetCardComponentModule,
+    ResponsiveColModule,
   ],
   exports: [WidgetListComponent],
 })
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.html b/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.html
index 0c28437f1..d8c845fe7 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.html
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding-top">
+<ion-content class="ion-padding-top with-widgets">
   <ion-item-group *ngIf="pkg$ | async as pkg">
     <!-- ** standard actions ** -->
     <ion-item-divider>Standard Actions</ion-item-divider>
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html b/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html
index dc461b205..16c6a5bd6 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding-top">
+<ion-content class="ion-padding-top with-widgets">
   <ion-item-group>
     <!-- iff ui -->
     <ng-container *ngIf="ui">
@@ -18,9 +18,9 @@
     <!-- other interface -->
     <ng-container *ngIf="other.length">
       <ion-item-divider>Machine Interfaces</ion-item-divider>
-      <div *ngFor="let interface of other" style="margin-bottom: 30px;">
+      <div *ngFor="let interface of other" style="margin-bottom: 30px">
         <app-interfaces-item [interface]="interface"></app-interfaces-item>
       </div>
     </ng-container>
   </ion-item-group>
-</ion-content>
\ No newline at end of file
+</ion-content>
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.module.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.module.ts
index d1e80dc85..19795b1f3 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.module.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.module.ts
@@ -5,6 +5,7 @@ import { IonicModule } from '@ionic/angular'
 import { AppListPage } from './app-list.page'
 import {
   EmverPipesModule,
+  ResponsiveColModule,
   TextSpinnerComponentModule,
 } from '@start9labs/shared'
 import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
@@ -35,6 +36,7 @@ const routes: Routes = [
     RouterModule.forChild(routes),
     BadgeMenuComponentModule,
     WidgetListComponentModule,
+    ResponsiveColModule,
   ],
   declarations: [
     AppListPage,
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.html b/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.html
index 969de303d..b1558ba88 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.html
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
+<ion-content class="ion-padding with-widgets">
   <!-- loaded -->
   <ng-container *ngIf="pkgs$ | async as pkgs; else loading">
     <ng-container *ngIf="!pkgs.length; else list">
@@ -20,7 +20,12 @@
     <ng-template #list>
       <ion-grid>
         <ion-row>
-          <ion-col *ngFor="let pkg of pkgs" sizeSm="12" sizeLg="6">
+          <ion-col
+            *ngFor="let pkg of pkgs"
+            responsiveCol
+            sizeSm="12"
+            sizeMd="6"
+          >
             <app-list-pkg
               *ngIf="pkg | packageInfo | async as info"
               [pkg]="info"
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.html b/frontend/projects/ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.html
index d3b647673..18650321c 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.html
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.html
@@ -10,7 +10,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
+<ion-content class="ion-padding with-widgets">
   <skeleton-list *ngIf="loading"></skeleton-list>
   <ion-item-group *ngIf="!loading">
     <ion-item *ngFor="let metric of metrics | keyvalue : asIsOrder">
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html b/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
index 94862c315..11599777b 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html
@@ -13,7 +13,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding-top">
+<ion-content class="ion-padding-top with-widgets">
   <text-spinner
     *ngIf="loading; else loaded"
     text="Loading Properties"
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
index 65f0e54a9..8a49bad52 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
@@ -16,11 +16,11 @@ import {
   PackageMainStatus,
 } from 'src/app/services/patch-db/data-model'
 import {
-  DestroyService,
   ErrorToastService,
   getPkgId,
   copyToClipboard,
 } from '@start9labs/shared'
+import { TuiDestroyService } from '@taiga-ui/cdk'
 import { getValueByPointer } from 'fast-json-patch'
 import { map, takeUntil } from 'rxjs/operators'
 
@@ -28,7 +28,7 @@ import { map, takeUntil } from 'rxjs/operators'
   selector: 'app-properties',
   templateUrl: './app-properties.page.html',
   styleUrls: ['./app-properties.page.scss'],
-  providers: [DestroyService],
+  providers: [TuiDestroyService],
 })
 export class AppPropertiesPage {
   loading = true
@@ -56,7 +56,7 @@ export class AppPropertiesPage {
     private readonly modalCtrl: ModalController,
     private readonly navCtrl: NavController,
     private readonly patch: PatchDB<DataModel>,
-    private readonly destroy$: DestroyService,
+    private readonly destroy$: TuiDestroyService,
   ) {}
 
   ionViewDidEnter() {
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts
index d338e9a81..f9288494c 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common'
 import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
 import { AppShowPage } from './app-show.page'
-import { EmverPipesModule } from '@start9labs/shared'
+import { EmverPipesModule, ResponsiveColModule } from '@start9labs/shared'
 import { StatusComponentModule } from 'src/app/components/status/status.component.module'
 import { AppConfigPageModule } from 'src/app/modals/app-config/app-config.module'
 import { LaunchablePipeModule } from 'src/app/pipes/launchable/launchable.module'
@@ -55,6 +55,7 @@ const routes: Routes = [
     EmverPipesModule,
     LaunchablePipeModule,
     UiPipeModule,
+    ResponsiveColModule,
   ],
 })
 export class AppShowPageModule {}
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.html b/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.html
index 0953653cb..a2b8f7664 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.html
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.html
@@ -3,7 +3,7 @@
   <app-show-header [pkg]="pkg"></app-show-header>
 
   <!-- content -->
-  <ion-content class="ion-padding">
+  <ion-content class="ion-padding with-widgets">
     <!-- ** installing, updating, restoring ** -->
     <ng-container *ngIf="showProgress(pkg); else installed">
       <app-show-progress
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-additional/app-show-additional.component.html b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-additional/app-show-additional.component.html
index 9a055faa7..81fe8fb84 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-additional/app-show-additional.component.html
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-additional/app-show-additional.component.html
@@ -1,7 +1,7 @@
 <ion-item-divider>Additional Info</ion-item-divider>
 <ion-grid *ngIf="pkg.manifest as manifest">
   <ion-row>
-    <ion-col sizeXs="12" sizeMd="6">
+    <ion-col responsiveCol sizeXs="12" sizeMd="6">
       <ion-item-group>
         <ion-item>
           <ion-label>
@@ -51,7 +51,7 @@
         </ion-item>
       </ion-item-group>
     </ion-col>
-    <ion-col sizeXs="12" sizeMd="6">
+    <ion-col responsiveCol sizeXs="12" sizeMd="6">
       <ion-item-group>
         <ion-item
           [href]="manifest['upstream-repo']"
diff --git a/frontend/projects/ui/src/app/pages/developer-routes/developer-list/developer-list.page.ts b/frontend/projects/ui/src/app/pages/developer-routes/developer-list/developer-list.page.ts
index eb2fb3849..96aa6126a 100644
--- a/frontend/projects/ui/src/app/pages/developer-routes/developer-list/developer-list.page.ts
+++ b/frontend/projects/ui/src/app/pages/developer-routes/developer-list/developer-list.page.ts
@@ -16,14 +16,15 @@ import { ConfigSpec } from 'src/app/pkg-config/config-types'
 import * as yaml from 'js-yaml'
 import { v4 } from 'uuid'
 import { DataModel, DevData } from 'src/app/services/patch-db/data-model'
-import { DestroyService, ErrorToastService } from '@start9labs/shared'
+import { ErrorToastService } from '@start9labs/shared'
+import { TuiDestroyService } from '@taiga-ui/cdk'
 import { takeUntil } from 'rxjs/operators'
 
 @Component({
   selector: 'developer-list',
   templateUrl: 'developer-list.page.html',
   styleUrls: ['developer-list.page.scss'],
-  providers: [DestroyService],
+  providers: [TuiDestroyService],
 })
 export class DeveloperListPage {
   devData: DevData = {}
@@ -34,7 +35,7 @@ export class DeveloperListPage {
     private readonly loadingCtrl: LoadingController,
     private readonly errToast: ErrorToastService,
     private readonly alertCtrl: AlertController,
-    private readonly destroy$: DestroyService,
+    private readonly destroy$: TuiDestroyService,
     private readonly patch: PatchDB<DataModel>,
     private readonly actionCtrl: ActionSheetController,
   ) {}
diff --git a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.module.ts b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.module.ts
index 8156f2810..ea1952578 100644
--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.module.ts
+++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.module.ts
@@ -3,7 +3,11 @@ import { CommonModule } from '@angular/common'
 import { FormsModule } from '@angular/forms'
 import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
-import { SharedPipesModule, EmverPipesModule } from '@start9labs/shared'
+import {
+  SharedPipesModule,
+  EmverPipesModule,
+  ResponsiveColModule,
+} from '@start9labs/shared'
 import {
   FilterPackagesPipeModule,
   CategoriesModule,
@@ -41,6 +45,7 @@ const routes: Routes = [
     SkeletonModule,
     MarketplaceSettingsPageModule,
     StoreIconComponentModule,
+    ResponsiveColModule,
   ],
   declarations: [MarketplaceListPage],
   exports: [MarketplaceListPage],
diff --git a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
index 41b4adced..734cb8910 100644
--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
+++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
@@ -10,7 +10,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
+<ion-content class="ion-padding with-widgets">
   <ng-container *ngIf="details$ | async as details">
     <ion-item [color]="details.color">
       <ion-icon slot="start" name="information-circle-outline"></ion-icon>
@@ -21,7 +21,7 @@
 
     <ion-grid>
       <ion-row>
-        <ion-col size="12">
+        <ion-col>
           <div class="heading">
             <store-icon
               class="icon"
@@ -38,7 +38,7 @@
         </ion-col>
       </ion-row>
       <ion-row class="ion-align-items-center">
-        <ion-col size="12">
+        <ion-col>
           <ng-container *ngIf="store$ | async as store; else loading">
             <marketplace-categories
               [categories]="store.categories"
@@ -55,6 +55,7 @@
                 <ion-row *ngIf="localPkgs$ | async as localPkgs">
                   <ion-col
                     *ngFor="let pkg of filtered"
+                    responsiveCol
                     sizeXs="12"
                     sizeSm="12"
                     sizeMd="6"
diff --git a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
index abac908d0..f563e88d6 100644
--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
+++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
@@ -1,6 +1,6 @@
 <marketplace-show-header></marketplace-show-header>
 
-<ion-content class="ion-padding">
+<ion-content class="ion-padding with-widgets">
   <ng-container *ngIf="pkg$ | async as pkg else loading">
     <ng-container *ngIf="pkg | empty; else show">
       <div
diff --git a/frontend/projects/ui/src/app/pages/notifications/notifications.page.html b/frontend/projects/ui/src/app/pages/notifications/notifications.page.html
index 144cf1a55..253b7e3bd 100644
--- a/frontend/projects/ui/src/app/pages/notifications/notifications.page.html
+++ b/frontend/projects/ui/src/app/pages/notifications/notifications.page.html
@@ -10,7 +10,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<ion-content class="with-widgets">
   <!-- loading -->
   <ion-item-group *ngIf="loading; else loaded">
     <ion-item-divider>
diff --git a/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.html b/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.html
index 23f70c0e9..5357584a0 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.html
+++ b/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding-top">
+<ion-content class="ion-padding-top with-widgets">
   <ion-item-group>
     <!-- about -->
     <ion-item class="ion-padding-bottom">
diff --git a/frontend/projects/ui/src/app/pages/server-routes/server-backup/backing-up/backing-up.component.html b/frontend/projects/ui/src/app/pages/server-routes/server-backup/backing-up/backing-up.component.html
index a15be170c..922baf8f2 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/server-backup/backing-up/backing-up.component.html
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-backup/backing-up/backing-up.component.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
+<ion-content class="ion-padding with-widgets">
   <ion-grid *ngIf="pkgs$ | async as pkgs">
     <ion-row *ngIf="backupProgress$ | async as backupProgress">
       <ion-col>
diff --git a/frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts b/frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
index 807c39b05..92e302d66 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
@@ -13,13 +13,13 @@ import { PatchDB } from 'patch-db-client'
 import { skip, takeUntil } from 'rxjs/operators'
 import { MappedBackupTarget } from 'src/app/types/mapped-backup-target'
 import * as argon2 from '@start9labs/argon2'
+import { TuiDestroyService } from '@taiga-ui/cdk'
 import {
   CifsBackupTarget,
   DiskBackupTarget,
 } from 'src/app/services/api/api.types'
 import { BackupSelectPage } from 'src/app/modals/backup-select/backup-select.page'
 import { EOSService } from 'src/app/services/eos.service'
-import { DestroyService } from '@start9labs/shared'
 import { getServerInfo } from 'src/app/util/get-server-info'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 
@@ -27,7 +27,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
   selector: 'server-backup',
   templateUrl: './server-backup.page.html',
   styleUrls: ['./server-backup.page.scss'],
-  providers: [DestroyService],
+  providers: [TuiDestroyService],
 })
 export class ServerBackupPage {
   serviceIds: string[] = []
@@ -39,7 +39,7 @@ export class ServerBackupPage {
     private readonly modalCtrl: ModalController,
     private readonly embassyApi: ApiService,
     private readonly navCtrl: NavController,
-    private readonly destroy$: DestroyService,
+    private readonly destroy$: TuiDestroyService,
     private readonly eosService: EOSService,
     private readonly patch: PatchDB<DataModel>,
   ) {}
diff --git a/frontend/projects/ui/src/app/pages/server-routes/server-metrics/server-metrics.page.html b/frontend/projects/ui/src/app/pages/server-routes/server-metrics/server-metrics.page.html
index 87dd66a30..c93d633c0 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/server-metrics/server-metrics.page.html
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-metrics/server-metrics.page.html
@@ -10,7 +10,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
+<ion-content class="ion-padding with-widgets">
   <skeleton-list *ngIf="loading" [groups]="2"></skeleton-list>
 
   <div id="metricSection">
diff --git a/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html b/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html
index 468f1f5ff..eebfd2c17 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
+<ion-content class="ion-padding with-widgets">
   <!-- loading -->
   <ng-template #loading>
     <text-spinner text="Connecting to Embassy"></text-spinner>
diff --git a/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.html b/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.html
index bca18804d..8cd19742d 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.html
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<ion-content class="with-widgets">
   <ion-item-group *ngIf="server$ | async as server">
     <ion-item-divider>embassyOS Info</ion-item-divider>
     <ion-item>
diff --git a/frontend/projects/ui/src/app/pages/server-routes/sessions/sessions.page.html b/frontend/projects/ui/src/app/pages/server-routes/sessions/sessions.page.html
index 387358473..4e291b5fc 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/sessions/sessions.page.html
+++ b/frontend/projects/ui/src/app/pages/server-routes/sessions/sessions.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding-top">
+<ion-content class="ion-padding-top with-widgets">
   <!-- loading -->
   <ion-item-group *ngIf="loading; else notLoading">
     <div *ngFor="let entry of ['This Session', 'Other Sessions']">
diff --git a/frontend/projects/ui/src/app/pages/server-routes/sideload/sideload.page.html b/frontend/projects/ui/src/app/pages/server-routes/sideload/sideload.page.html
index 79900b78b..b12ab3e5b 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/sideload/sideload.page.html
+++ b/frontend/projects/ui/src/app/pages/server-routes/sideload/sideload.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-text-center">
+<ion-content class="ion-text-center with-widgets">
   <!-- file upload -->
   <div
     *ngIf="!toUpload.file; else fileUploaded"
diff --git a/frontend/projects/ui/src/app/pages/server-routes/ssh-keys/ssh-keys.page.html b/frontend/projects/ui/src/app/pages/server-routes/ssh-keys/ssh-keys.page.html
index 2ba83a167..6975a9993 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/ssh-keys/ssh-keys.page.html
+++ b/frontend/projects/ui/src/app/pages/server-routes/ssh-keys/ssh-keys.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding-top">
+<ion-content class="ion-padding-top with-widgets">
   <ion-item-group>
     <!-- always -->
     <ion-item>
diff --git a/frontend/projects/ui/src/app/pages/server-routes/wifi/wifi.page.html b/frontend/projects/ui/src/app/pages/server-routes/wifi/wifi.page.html
index fdf1b0b1a..f6d0136d7 100644
--- a/frontend/projects/ui/src/app/pages/server-routes/wifi/wifi.page.html
+++ b/frontend/projects/ui/src/app/pages/server-routes/wifi/wifi.page.html
@@ -13,7 +13,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding-top">
+<ion-content class="ion-padding-top with-widgets">
   <ion-item-group>
     <!-- always -->
     <ion-item>
diff --git a/frontend/projects/ui/src/app/pages/updates/updates.page.html b/frontend/projects/ui/src/app/pages/updates/updates.page.html
index fea4028fe..67f33cb22 100644
--- a/frontend/projects/ui/src/app/pages/updates/updates.page.html
+++ b/frontend/projects/ui/src/app/pages/updates/updates.page.html
@@ -7,7 +7,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
+<ion-content class="ion-padding with-widgets">
   <ion-item-group *ngIf="data$ | async as data">
     <ng-container *ngFor="let host of data.hosts">
       <ion-item-divider class="header">
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.html b/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.html
new file mode 100644
index 000000000..aa6b82cee
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.html
@@ -0,0 +1,10 @@
+<div *ngIf="installed$ | async as installed" class="wrapper">
+  <button
+    *ngFor="let widget of widgets | tuiFilter: filter:installed; empty: empty"
+    class="tui-island tui-island_size_l"
+    (click)="context.completeWith(widget)"
+  >
+    <span class="tui-island__title">{{ widget.meta.name }}</span>
+  </button>
+  <ng-template #empty>No additional widgets found</ng-template>
+</div>
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.scss b/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.scss
new file mode 100644
index 000000000..b80f68a6c
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.scss
@@ -0,0 +1,9 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.tui-island {
+  text-align: left;
+}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.ts b/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.ts
new file mode 100644
index 000000000..68942709c
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.component.ts
@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { PatchDB } from 'patch-db-client'
+import { Widget } from '../../../../services/patch-db/data-model'
+import {
+  POLYMORPHEUS_CONTEXT,
+  PolymorpheusComponent,
+} from '@tinkoff/ng-polymorpheus'
+import { TuiDialogContext } from '@taiga-ui/core'
+import { BUILT_IN_WIDGETS } from '../widgets'
+
+@Component({
+  selector: 'add-widget',
+  templateUrl: './add.component.html',
+  styleUrls: ['./add.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddWidgetComponent {
+  readonly context = inject<TuiDialogContext<Widget>>(POLYMORPHEUS_CONTEXT)
+
+  readonly installed$ = inject(PatchDB).watch$('ui', 'widgets')
+
+  readonly widgets = BUILT_IN_WIDGETS
+
+  readonly filter = (widget: Widget, installed: readonly Widget[]) =>
+    !installed.find(({ id }) => id === widget.id)
+}
+
+export const ADD_WIDGET = new PolymorpheusComponent<
+  AddWidgetComponent,
+  TuiDialogContext<Widget>
+>(AddWidgetComponent)
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.module.ts b/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.module.ts
new file mode 100644
index 000000000..94db46596
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/add/add.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TuiFilterPipeModule, TuiForModule } from '@taiga-ui/cdk'
+
+import { AddWidgetComponent } from './add.component'
+
+@NgModule({
+  imports: [CommonModule, TuiFilterPipeModule, TuiForModule],
+  declarations: [AddWidgetComponent],
+  exports: [AddWidgetComponent],
+})
+export class AddWidgetModule {}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/favorites/favorites.component.html b/frontend/projects/ui/src/app/pages/widgets/built-in/favorites/favorites.component.html
new file mode 100644
index 000000000..e45790dc8
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/favorites/favorites.component.html
@@ -0,0 +1 @@
+<ion-button class="add">Add to quick launch</ion-button>
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/favorites/favorites.component.scss b/frontend/projects/ui/src/app/pages/widgets/built-in/favorites/favorites.component.scss
new file mode 100644
index 000000000..d5ef561a9
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/favorites/favorites.component.scss
@@ -0,0 +1,3 @@
+.add {
+  font-size: 13px;
+}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/favorites/favorites.component.ts b/frontend/projects/ui/src/app/pages/widgets/built-in/favorites/favorites.component.ts
new file mode 100644
index 000000000..40a238158
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/favorites/favorites.component.ts
@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'widget-favorites',
+  templateUrl: './favorites.component.html',
+  styleUrls: ['./favorites.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FavoritesComponent {}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/favorites/favorites.module.ts b/frontend/projects/ui/src/app/pages/widgets/built-in/favorites/favorites.module.ts
new file mode 100644
index 000000000..2f60117c3
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/favorites/favorites.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core'
+import { FavoritesComponent } from './favorites.component'
+import { IonicModule } from '@ionic/angular'
+
+@NgModule({
+  imports: [IonicModule],
+  declarations: [FavoritesComponent],
+  exports: [FavoritesComponent],
+})
+export class FavoritesModule {}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/health/health.component.html b/frontend/projects/ui/src/app/pages/widgets/built-in/health/health.component.html
new file mode 100644
index 000000000..b10313ac3
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/health/health.component.html
@@ -0,0 +1,11 @@
+<h2 class="widget-title">Service health overview</h2>
+<tui-ring-chart
+  *ngIf="data$ | async as data"
+  class="ring-chart"
+  [tuiHintContent]="hint"
+  [value]="data"
+>
+  <ng-template #hint let-index>
+    {{ labels[index] }}: {{ data[index] }}
+  </ng-template>
+</tui-ring-chart>
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/health/health.component.scss b/frontend/projects/ui/src/app/pages/widgets/built-in/health/health.component.scss
new file mode 100644
index 000000000..8ba371967
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/health/health.component.scss
@@ -0,0 +1,19 @@
+:host {
+  /* index order must match labels array */
+  --tui-chart-0: var(--ion-color-danger-tint); // error
+  --tui-chart-1: var(--ion-color-success-tint); // healthy
+  --tui-chart-2: var(--ion-color-warning-tint); // needs attention
+  --tui-chart-3: var(--ion-color-step-600); // stopped
+  --tui-chart-4: var(--ion-color-primary-tint); // transitioning
+}
+
+.widget-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.ring-chart {
+  transform: scale(0.85);
+  margin: 0.6rem auto;
+}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/health/health.component.ts b/frontend/projects/ui/src/app/pages/widgets/built-in/health/health.component.ts
new file mode 100644
index 000000000..0da0b17af
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/health/health.component.ts
@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { PatchDB } from 'patch-db-client'
+import { map } from 'rxjs/operators'
+import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { PrimaryStatus } from 'src/app/services/pkg-status-rendering.service'
+import { getPackageInfo, PkgInfo } from '../../../../util/get-package-info'
+
+@Component({
+  selector: 'widget-health',
+  templateUrl: './health.component.html',
+  styleUrls: ['./health.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HealthComponent {
+  readonly labels = [
+    'Error',
+    'Healthy',
+    'Needs Attention',
+    'Stopped',
+    'Transitioning',
+  ] as const
+
+  readonly data$ = inject(PatchDB)
+    .watch$('package-data')
+    .pipe(
+      map(data => {
+        const pkgs = Object.values<PackageDataEntry>(data).map(getPackageInfo)
+        const result = this.labels.reduce<Record<string, number>>(
+          (acc, label) => ({
+            ...acc,
+            [label]: this.getCount(label, pkgs),
+          }),
+          {},
+        )
+
+        result['Healthy'] =
+          pkgs.length -
+          result['Error'] -
+          result['Needs Attention'] -
+          result['Stopped'] -
+          result['Transitioning']
+
+        return this.labels.map(label => result[label])
+      }),
+    )
+
+  private getCount(label: string, pkgs: PkgInfo[]): number {
+    switch (label) {
+      case 'Error':
+        return pkgs.filter(
+          a => a.primaryStatus !== PrimaryStatus.Stopped && a.error,
+        ).length
+      case 'Needs Attention':
+        return pkgs.filter(a => a.warning).length
+      case 'Stopped':
+        return pkgs.filter(a => a.primaryStatus === PrimaryStatus.Stopped)
+          .length
+      case 'Transitioning':
+        return pkgs.filter(a => a.transitioning).length
+      default:
+        return 0
+    }
+  }
+}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/health/health.module.ts b/frontend/projects/ui/src/app/pages/widgets/built-in/health/health.module.ts
new file mode 100644
index 000000000..31f5f0107
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/health/health.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core'
+import { HealthComponent } from './health.component'
+import { TuiRingChartModule } from '@taiga-ui/addon-charts'
+import { TuiHintModule } from '@taiga-ui/core'
+import { CommonModule } from '@angular/common'
+
+@NgModule({
+  imports: [CommonModule, TuiRingChartModule, TuiHintModule],
+  declarations: [HealthComponent],
+  exports: [HealthComponent],
+})
+export class HealthModule {}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/metrics/metrics.component.html b/frontend/projects/ui/src/app/pages/widgets/built-in/metrics/metrics.component.html
new file mode 100644
index 000000000..1d80ce23d
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/metrics/metrics.component.html
@@ -0,0 +1,30 @@
+<div class="stats">
+  <div class="stat">
+    <ion-icon class="stat-icon" name="server-outline"></ion-icon>
+    <div>
+      30%
+      <div class="description">Storage</div>
+    </div>
+  </div>
+  <div class="stat">
+    <ion-icon class="stat-icon" name="hardware-chip-outline"></ion-icon>
+    <div>
+      10%
+      <div class="description">CPU</div>
+    </div>
+  </div>
+  <div class="stat">
+    <ion-icon class="stat-icon" name="stats-chart-outline"></ion-icon>
+    <div>
+      10%
+      <div class="description">Memory</div>
+    </div>
+  </div>
+  <div class="stat">
+    <ion-icon class="stat-icon" name="thermometer-outline"></ion-icon>
+    <div>
+      50.6⁰C
+      <div class="description">Temp</div>
+    </div>
+  </div>
+</div>
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/metrics/metrics.component.scss b/frontend/projects/ui/src/app/pages/widgets/built-in/metrics/metrics.component.scss
new file mode 100644
index 000000000..3af62e77e
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/metrics/metrics.component.scss
@@ -0,0 +1,34 @@
+.stats {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  height: 100%;
+  text-align: center;
+
+  &_mobile .stat {
+    width: 50%;
+  }
+}
+
+.stat {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :host-context(.wrapper_mobile) & {
+    width: 50%;
+  }
+}
+
+.stat-icon {
+  font-size: 32px;
+  margin: 12px;
+}
+
+.description {
+  color: #3a7be0;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/metrics/metrics.component.ts b/frontend/projects/ui/src/app/pages/widgets/built-in/metrics/metrics.component.ts
new file mode 100644
index 000000000..813fff9f2
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/metrics/metrics.component.ts
@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'widget-metrics',
+  templateUrl: './metrics.component.html',
+  styleUrls: ['./metrics.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetricsComponent {}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/metrics/metrics.module.ts b/frontend/projects/ui/src/app/pages/widgets/built-in/metrics/metrics.module.ts
new file mode 100644
index 000000000..b55748b4c
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/metrics/metrics.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core'
+import { IonicModule } from '@ionic/angular'
+import { MetricsComponent } from './metrics.component'
+
+@NgModule({
+  imports: [IonicModule],
+  declarations: [MetricsComponent],
+  exports: [MetricsComponent],
+})
+export class MetricsModule {}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/network/network.component.html b/frontend/projects/ui/src/app/pages/widgets/built-in/network/network.component.html
new file mode 100644
index 000000000..9bd377f68
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/network/network.component.html
@@ -0,0 +1,7 @@
+<iframe
+  class="iframe"
+  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
+  title="YouTube video player"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+></iframe>
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/network/network.component.scss b/frontend/projects/ui/src/app/pages/widgets/built-in/network/network.component.scss
new file mode 100644
index 000000000..2fd308dc3
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/network/network.component.scss
@@ -0,0 +1,13 @@
+:host {
+  border-radius: inherit;
+}
+
+.iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: inherit;
+}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/network/network.component.ts b/frontend/projects/ui/src/app/pages/widgets/built-in/network/network.component.ts
new file mode 100644
index 000000000..a7711fd93
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/network/network.component.ts
@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'widget-network',
+  templateUrl: './network.component.html',
+  styleUrls: ['./network.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NetworkComponent {}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/network/network.module.ts b/frontend/projects/ui/src/app/pages/widgets/built-in/network/network.module.ts
new file mode 100644
index 000000000..7ffb7a1ef
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/network/network.module.ts
@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core'
+import { NetworkComponent } from './network.component'
+
+@NgModule({
+  imports: [],
+  declarations: [NetworkComponent],
+  exports: [NetworkComponent],
+})
+export class NetworkModule {}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/uptime/uptime.component.html b/frontend/projects/ui/src/app/pages/widgets/built-in/uptime/uptime.component.html
new file mode 100644
index 000000000..3a1e58c95
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/uptime/uptime.component.html
@@ -0,0 +1 @@
+System time and uptime
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/uptime/uptime.component.scss b/frontend/projects/ui/src/app/pages/widgets/built-in/uptime/uptime.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/uptime/uptime.component.ts b/frontend/projects/ui/src/app/pages/widgets/built-in/uptime/uptime.component.ts
new file mode 100644
index 000000000..f669a7363
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/uptime/uptime.component.ts
@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'widget-uptime',
+  templateUrl: './uptime.component.html',
+  styleUrls: ['./uptime.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UptimeComponent {}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/uptime/uptime.module.ts b/frontend/projects/ui/src/app/pages/widgets/built-in/uptime/uptime.module.ts
new file mode 100644
index 000000000..497e1b0cc
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/uptime/uptime.module.ts
@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core'
+import { UptimeComponent } from './uptime.component'
+
+@NgModule({
+  imports: [],
+  declarations: [UptimeComponent],
+  exports: [UptimeComponent],
+})
+export class UptimeModule {}
diff --git a/frontend/projects/ui/src/app/pages/widgets/built-in/widgets.ts b/frontend/projects/ui/src/app/pages/widgets/built-in/widgets.ts
new file mode 100644
index 000000000..ec6e46db6
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/built-in/widgets.ts
@@ -0,0 +1,54 @@
+import { Widget } from '../../../services/patch-db/data-model'
+
+export const BUILT_IN_WIDGETS: readonly Widget[] = [
+  {
+    id: 'favorites',
+    meta: {
+      name: 'Favorites',
+      width: 2,
+      height: 2,
+      mobileWidth: 2,
+      mobileHeight: 2,
+    },
+  },
+  {
+    id: 'health',
+    meta: {
+      name: 'Service health overview',
+      width: 2,
+      height: 2,
+      mobileWidth: 2,
+      mobileHeight: 2,
+    },
+  },
+  {
+    id: 'metrics',
+    meta: {
+      name: 'Server metrics',
+      width: 4,
+      height: 1,
+      mobileWidth: 2,
+      mobileHeight: 2,
+    },
+  },
+  {
+    id: 'network',
+    meta: {
+      name: 'Network',
+      width: 4,
+      height: 2,
+      mobileWidth: 2,
+      mobileHeight: 3,
+    },
+  },
+  {
+    id: 'uptime',
+    meta: {
+      name: 'System time and uptime',
+      width: 2,
+      height: 2,
+      mobileWidth: 2,
+      mobileHeight: 2,
+    },
+  },
+]
diff --git a/frontend/projects/ui/src/app/pages/widgets/widgets.module.ts b/frontend/projects/ui/src/app/pages/widgets/widgets.module.ts
new file mode 100644
index 000000000..53291587a
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/widgets.module.ts
@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { RouterModule, Routes } from '@angular/router'
+import { TuiLetModule } from '@taiga-ui/cdk'
+import { TuiLoaderModule } from '@taiga-ui/core'
+import { TuiTilesModule } from '@taiga-ui/kit'
+
+import { WidgetsPage } from './widgets.page'
+import { AddWidgetModule } from './built-in/add/add.module'
+import { FavoritesModule } from './built-in/favorites/favorites.module'
+import { HealthModule } from './built-in/health/health.module'
+import { MetricsModule } from './built-in/metrics/metrics.module'
+import { NetworkModule } from './built-in/network/network.module'
+import { UptimeModule } from './built-in/uptime/uptime.module'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: WidgetsPage,
+  },
+]
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    TuiTilesModule,
+    TuiLetModule,
+    AddWidgetModule,
+    FavoritesModule,
+    HealthModule,
+    MetricsModule,
+    NetworkModule,
+    UptimeModule,
+    RouterModule.forChild(routes),
+    TuiLoaderModule,
+  ],
+  declarations: [WidgetsPage],
+  exports: [WidgetsPage],
+})
+export class WidgetsPageModule {}
diff --git a/frontend/projects/ui/src/app/pages/widgets/widgets.page.html b/frontend/projects/ui/src/app/pages/widgets/widgets.page.html
new file mode 100644
index 000000000..4ae2d9430
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/widgets.page.html
@@ -0,0 +1,55 @@
+<h1 class="heading">
+  <tui-loader
+    *ngIf="pending else buttons"
+    [inheritColor]="true"
+    size="s"
+    class="loader"
+  ></tui-loader>
+  <ng-template #buttons>
+    <ion-button fill="clear" color="primary" class="button" (click)="toggle()">
+      <ion-icon
+        [name]="edit ? 'checkmark-outline' : 'pencil-outline'"
+      ></ion-icon>
+      {{ edit ? 'Save' : 'Edit'}}
+    </ion-button>
+    <ion-button fill="clear" color="primary" class="button" (click)="add()">
+      <ion-icon name="duplicate-outline"></ion-icon>
+      Add
+    </ion-button>
+  </ng-template>
+</h1>
+<!-- TODO: Fix resize lag in Taiga UI -->
+<tui-tiles
+  class="wrapper"
+  [class.wrapper_wide]="wide"
+  [debounce]="500"
+  [(order)]="order"
+>
+  <tui-tile
+    *ngFor="let item of items; let index = index; trackBy: trackBy"
+    class="item"
+    [class.item_edit]="edit"
+    [width]="wide ? item.meta.width : item.meta.mobileWidth"
+    [height]="wide ? item.meta.height : item.meta.mobileHeight"
+    [style.order]="order.get(index)"
+  >
+    <div class="content">
+      <ng-container *ngComponentOutlet="components[item.id]"></ng-container>
+    </div>
+    <div tuiTileHandle class="handle"></div>
+    <ion-icon
+      *ngIf="item.id === 'favorites'"
+      name="settings-outline"
+      class="settings"
+    ></ion-icon>
+    <ion-icon
+      *ngIf="!pending else loader"
+      name="trash-outline"
+      class="remove"
+      (click)="remove(index)"
+    ></ion-icon>
+    <ng-template #loader>
+      <tui-loader [inheritColor]="true" class="pending"></tui-loader>
+    </ng-template>
+  </tui-tile>
+</tui-tiles>
diff --git a/frontend/projects/ui/src/app/pages/widgets/widgets.page.scss b/frontend/projects/ui/src/app/pages/widgets/widgets.page.scss
new file mode 100644
index 000000000..e2f672237
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/widgets.page.scss
@@ -0,0 +1,112 @@
+:host {
+  overflow: auto;
+}
+
+.title {
+  margin-right: auto;
+}
+
+.loader {
+  width: 24px;
+  color: var(--ion-color-tertiary);
+}
+
+.heading {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  font-size: 20px;
+  margin: 14px 0 -20px;
+  padding: 0 40px;
+
+  :host.dialog & {
+    margin: 0 0 -24px;
+    padding: 0;
+    font-size: 24px;
+  }
+}
+
+.button {
+  width: 50%;
+
+  ion-icon {
+    margin-right: 8px;
+  }
+}
+
+.wrapper {
+  gap: 24px;
+  grid-auto-rows: 100px;
+  grid-auto-columns: 1fr;
+  margin: 40px;
+
+  &_wide {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  :host.dialog & {
+    margin: 40px 0;
+  }
+}
+
+.item {
+  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.1);
+  border-radius: 24px;
+}
+
+.content {
+  height: 100%;
+  text-align: center;
+  background: #333;
+  border-radius: 24px;
+  padding: 24px;
+  box-sizing: border-box;
+  overflow: hidden;
+  box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.5);
+  transition: opacity 0.3s;
+
+  .item_edit & {
+    opacity: var(--tui-disabled-opacity);
+    pointer-events: none;
+  }
+}
+
+.handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  cursor: move;
+
+  .item:not(.item_edit) & {
+    pointer-events: none;
+  }
+}
+
+.remove,
+.settings,
+.pending {
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  width: 24px;
+  height: 24px;
+  transform: translateY(-50%);
+  padding: 10px;
+  box-sizing: content-box;
+  border-radius: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s;
+
+  .item_edit & {
+    pointer-events: auto;
+    opacity: 1;
+  }
+}
+
+.settings {
+  left: 24px;
+}
diff --git a/frontend/projects/ui/src/app/pages/widgets/widgets.page.ts b/frontend/projects/ui/src/app/pages/widgets/widgets.page.ts
new file mode 100644
index 000000000..0e0edb6c4
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/widgets/widgets.page.ts
@@ -0,0 +1,136 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  Input,
+  Optional,
+  Type,
+} from '@angular/core'
+import { TuiDialogContext, TuiDialogService } from '@taiga-ui/core'
+import {
+  PolymorpheusComponent,
+  POLYMORPHEUS_CONTEXT,
+} from '@tinkoff/ng-polymorpheus'
+import { PatchDB } from 'patch-db-client'
+import { DataModel, Widget } from '../../services/patch-db/data-model'
+import { ApiService } from '../../services/api/embassy-api.service'
+import { ADD_WIDGET } from './built-in/add/add.component'
+import { FavoritesComponent } from './built-in/favorites/favorites.component'
+import { HealthComponent } from './built-in/health/health.component'
+import { NetworkComponent } from './built-in/network/network.component'
+import { MetricsComponent } from './built-in/metrics/metrics.component'
+import { UptimeComponent } from './built-in/uptime/uptime.component'
+import { take } from 'rxjs/operators'
+
+@Component({
+  selector: 'widgets',
+  templateUrl: 'widgets.page.html',
+  styleUrls: ['widgets.page.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class.dialog]': 'context',
+  },
+})
+export class WidgetsPage {
+  @Input()
+  wide = false
+
+  edit = false
+
+  order = new Map<number, number>()
+
+  items: readonly Widget[] = []
+
+  pending = true
+
+  readonly components: Record<string, Type<any>> = {
+    health: HealthComponent,
+    favorites: FavoritesComponent,
+    metrics: MetricsComponent,
+    network: NetworkComponent,
+    uptime: UptimeComponent,
+  }
+
+  constructor(
+    @Optional()
+    @Inject(POLYMORPHEUS_CONTEXT)
+    readonly context: TuiDialogContext | null,
+    private readonly dialog: TuiDialogService,
+    private readonly patch: PatchDB<DataModel>,
+    private readonly cdr: ChangeDetectorRef,
+    private readonly api: ApiService,
+  ) {
+    this.patch
+      .watch$('ui', 'widgets')
+      .pipe(take(1))
+      .subscribe(items => {
+        this.updateItems(items)
+        this.pending = false
+      })
+  }
+
+  trackBy(_: number, { id }: Widget) {
+    return id
+  }
+
+  toggle() {
+    if (this.edit) {
+      this.updateItems(this.getReordered())
+    }
+
+    this.edit = !this.edit
+  }
+
+  add() {
+    this.dialog.open(ADD_WIDGET, { label: 'Add widget' }).subscribe(widget => {
+      this.addWidget(widget)
+    })
+  }
+
+  remove(index: number) {
+    this.removeWidget(index)
+  }
+
+  private removeWidget(index: number) {
+    this.updateItems(
+      this.getReordered().filter((_, i) => i !== this.order.get(index)),
+    )
+  }
+
+  private addWidget(widget: Widget) {
+    this.updateItems(this.getReordered().concat(widget))
+  }
+
+  private getReordered(): Widget[] {
+    const items: Widget[] = []
+
+    Array.from(this.order.entries()).forEach(([index, order]) => {
+      items[order] = this.items[index]
+    })
+
+    return items
+  }
+
+  private updateItems(items: readonly Widget[]) {
+    const previous = this.items
+
+    if (!this.pending) {
+      this.pending = true
+      this.api
+        .setDbValue(['widgets'], items)
+        .catch(() => {
+          this.updateItems(previous)
+        })
+        .finally(() => {
+          this.pending = false
+          this.cdr.markForCheck()
+        })
+    }
+
+    this.items = items
+    this.order = new Map(items.map((_, index) => [index, index]))
+  }
+}
+
+export const WIDGETS_COMPONENT = new PolymorpheusComponent(WidgetsPage)
diff --git a/frontend/projects/ui/src/app/services/api/mock-patch.ts b/frontend/projects/ui/src/app/services/api/mock-patch.ts
index 18286ee32..f70dc2008 100644
--- a/frontend/projects/ui/src/app/services/api/mock-patch.ts
+++ b/frontend/projects/ui/src/app/services/api/mock-patch.ts
@@ -8,11 +8,19 @@ import {
   PackageState,
 } from 'src/app/services/patch-db/data-model'
 import { Mock } from './api.fixures'
+import { BUILT_IN_WIDGETS } from '../../pages/widgets/built-in/widgets'
 
 export const mockPatchData: DataModel = {
   ui: {
     name: `Matt's Embassy`,
     'ack-welcome': '1.0.0',
+    widgets: BUILT_IN_WIDGETS.filter(
+      ({ id }) =>
+        id === 'favorites' ||
+        id === 'health' ||
+        id === 'network' ||
+        id === 'metrics',
+    ),
     marketplace: {
       'selected-url': 'https://registry.start9.com/',
       'known-hosts': {
diff --git a/frontend/projects/ui/src/app/services/client-storage.service.ts b/frontend/projects/ui/src/app/services/client-storage.service.ts
index e49de6aba..6ee1f6236 100644
--- a/frontend/projects/ui/src/app/services/client-storage.service.ts
+++ b/frontend/projects/ui/src/app/services/client-storage.service.ts
@@ -1,21 +1,44 @@
 import { Injectable } from '@angular/core'
-import { BehaviorSubject } from 'rxjs'
+import { ReplaySubject, Subject } from 'rxjs'
+import { WorkspaceConfig } from '../../../../shared/src/types/workspace-config'
 import { StorageService } from './storage.service'
 const SHOW_DEV_TOOLS = 'SHOW_DEV_TOOLS'
 const SHOW_DISK_REPAIR = 'SHOW_DISK_REPAIR'
+const WIDGET_DRAWER = 'WIDGET_DRAWER'
+
+const { enableWidgets } =
+  require('../../../../../config.json') as WorkspaceConfig
+
+export type WidgetDrawer = {
+  open: boolean
+  width: 400 | 600
+}
 
 @Injectable({
   providedIn: 'root',
 })
 export class ClientStorageService {
-  readonly showDevTools$ = new BehaviorSubject<boolean>(false)
-  readonly showDiskRepair$ = new BehaviorSubject<boolean>(false)
+  readonly showDevTools$ = new ReplaySubject<boolean>(1)
+  readonly showDiskRepair$ = new ReplaySubject<boolean>(1)
+  readonly widgetDrawer$ = new ReplaySubject<WidgetDrawer>(1)
 
   constructor(private readonly storage: StorageService) {}
 
   init() {
+    console.log('EMBAWD', enableWidgets)
     this.showDevTools$.next(!!this.storage.get(SHOW_DEV_TOOLS))
     this.showDiskRepair$.next(!!this.storage.get(SHOW_DISK_REPAIR))
+    this.widgetDrawer$.next(
+      enableWidgets
+        ? this.storage.get(WIDGET_DRAWER) || {
+            open: true,
+            width: 600,
+          }
+        : {
+            open: false,
+            width: 600,
+          },
+    )
   }
 
   toggleShowDevTools(): boolean {
@@ -31,4 +54,9 @@ export class ClientStorageService {
     this.showDiskRepair$.next(newVal)
     return newVal
   }
+
+  updateWidgetDrawer(drawer: WidgetDrawer) {
+    this.widgetDrawer$.next(drawer)
+    this.storage.set(WIDGET_DRAWER, drawer)
+  }
 }
diff --git a/frontend/projects/ui/src/app/services/patch-db/data-model.ts b/frontend/projects/ui/src/app/services/patch-db/data-model.ts
index b2349dac3..25e1677ba 100644
--- a/frontend/projects/ui/src/app/services/patch-db/data-model.ts
+++ b/frontend/projects/ui/src/app/services/patch-db/data-model.ts
@@ -20,6 +20,20 @@ export interface UIData {
     }
   }
   'ack-instructions': Record<string, boolean>
+  widgets: readonly Widget[]
+}
+
+export interface Widget {
+  id: string
+  meta: {
+    name: string
+    width: number
+    height: number
+    mobileWidth: number
+    mobileHeight: number
+  }
+  url?: string
+  settings?: string
 }
 
 export interface UIMarketplaceData {
diff --git a/frontend/projects/ui/src/app/util/get-package-info.ts b/frontend/projects/ui/src/app/util/get-package-info.ts
index 39e0339d6..1dde896ae 100644
--- a/frontend/projects/ui/src/app/util/get-package-info.ts
+++ b/frontend/projects/ui/src/app/util/get-package-info.ts
@@ -3,6 +3,7 @@ import {
   DependencyStatus,
   HealthStatus,
   PrimaryRendering,
+  PrimaryStatus,
   renderPkgStatus,
   StatusRendering,
 } from '../services/pkg-status-rendering.service'
@@ -17,10 +18,12 @@ export function getPackageInfo(entry: PackageDataEntry): PkgInfo {
   return {
     entry,
     primaryRendering,
+    primaryStatus: statuses.primary,
     installProgress: packageLoadingProgress(entry['install-progress']),
     error:
       statuses.health === HealthStatus.Failure ||
       statuses.dependency === DependencyStatus.Warning,
+    warning: statuses.primary === PrimaryStatus.NeedsConfig,
     transitioning:
       primaryRendering.showDots ||
       statuses.health === HealthStatus.Waiting ||
@@ -32,8 +35,10 @@ export function getPackageInfo(entry: PackageDataEntry): PkgInfo {
 export interface PkgInfo {
   entry: PackageDataEntry
   primaryRendering: StatusRendering
+  primaryStatus: PrimaryStatus
   installProgress: ProgressData | null
   error: boolean
+  warning: boolean
   transitioning: boolean
   sub?: Subscription | null
 }
diff --git a/frontend/projects/ui/src/styles.scss b/frontend/projects/ui/src/styles.scss
index 0f0313c5c..fe4beccf7 100644
--- a/frontend/projects/ui/src/styles.scss
+++ b/frontend/projects/ui/src/styles.scss
@@ -70,7 +70,7 @@ $subheader-height: 48px;
 }
 
 .subheader-padding {
-  --padding-top: #{$subheader-height}+10px;
+  --padding-top: #{$subheader-height}+ 10px;
 }
 
 .subheader {
@@ -188,6 +188,7 @@ ion-icon {
 }
 
 ion-toolbar {
+  line-height: 1.1;
   --min-height: 72px;
   --background: var(--ion-color-light);
 }
@@ -297,4 +298,15 @@ h2 {
 
 .fader {
   animation: flickerAnimation 4s infinite;
+}
+
+// TODO: Refactor so header is outside router-outlet
+ion-content.with-widgets,
+ion-footer.with-widgets {
+  width: calc(100% - var(--widgets-width));
+}
+
+ul {
+  padding-left: 40px;
+  list-style-type: disc;
 }
\ No newline at end of file