Merge pull request #2672 from Start9Labs/taiga-4

feat: update Taiga UI to 4 release candidate
2026-03-26 10:21:52 +00:00 · 2024-07-15 11:40:16 -06:00
parent a2b1968d6e c7a2e7ada1
commit fffc7f4098
219 changed files with 1977 additions and 2176 deletions
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -23,17 +23,19 @@
        "@start9labs/argon2": "^0.1.0",
        "@start9labs/emver": "^0.1.5",
        "@start9labs/start-sdk": "file:../sdk/dist",
-        "@taiga-ui/addon-charts": "3.77.1",
-        "@taiga-ui/addon-commerce": "3.77.1",
-        "@taiga-ui/addon-mobile": "3.77.1",
-        "@taiga-ui/cdk": "3.77.1",
-        "@taiga-ui/core": "3.77.1",
-        "@taiga-ui/experimental": "3.77.1",
-        "@taiga-ui/icons": "3.77.1",
-        "@taiga-ui/kit": "3.77.1",
-        "@taiga-ui/styles": "3.77.1",
+        "@taiga-ui/addon-charts": "4.0.0-rc.5",
+        "@taiga-ui/addon-commerce": "4.0.0-rc.5",
+        "@taiga-ui/addon-mobile": "4.0.0-rc.5",
+        "@taiga-ui/cdk": "4.0.0-rc.5",
+        "@taiga-ui/core": "4.0.0-rc.5",
+        "@taiga-ui/event-plugins": "^4.0.1",
+        "@taiga-ui/experimental": "4.0.0-rc.5",
+        "@taiga-ui/icons": "4.0.0-rc.5",
+        "@taiga-ui/kit": "4.0.0-rc.5",
+        "@taiga-ui/layout": "4.0.0-rc.5",
+        "@taiga-ui/legacy": "4.0.0-rc.5",
+        "@taiga-ui/styles": "4.0.0-rc.5",
        "@tinkoff/ng-dompurify": "4.0.0",
-        "@tinkoff/ng-event-plugins": "3.2.0",
        "ansi-to-html": "^0.7.2",
        "base64-js": "^1.5.1",
        "cbor": "npm:@jprochazk/cbor@^0.4.9",
@@ -56,7 +58,7 @@
        "rxjs": "^7.5.6",
        "swiper": "^8.2.4",
        "ts-matches": "^5.2.1",
-        "tslib": "^2.3.0",
+        "tslib": "^2.6.3",
        "uuid": "^8.3.2",
        "zone.js": "^0.14.2"
      },
@@ -372,11 +374,12 @@
      }
    },
    "../patch-db/client/node_modules/braces": {
-      "version": "3.0.2",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
      },
      "engines": {
        "node": ">=8"
@@ -609,9 +612,10 @@
      }
    },
    "../patch-db/client/node_modules/fill-range": {
-      "version": "7.0.1",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
@@ -810,8 +814,9 @@
    },
    "../patch-db/client/node_modules/is-number": {
      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
      "dev": true,
-      "license": "MIT",
      "engines": {
        "node": ">=0.12.0"
      }
@@ -1491,9 +1496,10 @@
      }
    },
    "../patch-db/client/node_modules/semver": {
-      "version": "5.7.1",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
      "dev": true,
-      "license": "ISC",
      "bin": {
        "semver": "bin/semver"
      }
@@ -1659,8 +1665,9 @@
    },
    "../patch-db/client/node_modules/to-regex-range": {
      "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,
-      "license": "MIT",
      "dependencies": {
        "is-number": "^7.0.0"
      },
@@ -2268,6 +2275,12 @@
        "url": "https://opencollective.com/webpack"
      }
    },
+    "node_modules/@angular-devkit/build-angular/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
+    },
    "node_modules/@angular-devkit/build-angular/node_modules/webpack": {
      "version": "5.90.3",
      "dev": true,
@@ -4545,28 +4558,43 @@
      }
    },
    "node_modules/@maskito/angular": {
-      "version": "1.9.0",
-      "license": "Apache-2.0",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@maskito/angular/-/angular-2.5.0.tgz",
+      "integrity": "sha512-xcQ8/N1wbZNnCIeioS8aZ7WXs5f0MRDeg8eOc512s82Q7LPdQ1zLqVMn3zPbED6D9UdmVnbTHTwiaZydP4zXdw==",
+      "peer": true,
      "dependencies": {
-        "tslib": "2.6.2"
+        "tslib": "2.6.3"
      },
      "peerDependencies": {
-        "@angular/common": ">=12.0.0",
-        "@angular/core": ">=12.0.0",
-        "@angular/forms": ">=12.0.0",
-        "@maskito/core": "^1.9.0",
-        "rxjs": ">=6.0.0"
+        "@angular/core": ">=15.0.0",
+        "@angular/forms": ">=15.0.0",
+        "@maskito/core": "^2.5.0"
      }
    },
    "node_modules/@maskito/core": {
-      "version": "1.9.0",
-      "license": "Apache-2.0"
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@maskito/core/-/core-2.5.0.tgz",
+      "integrity": "sha512-EeTeNOKIENFd8J0b1diQ5m8Rkz7WclFWtFPMpEtoE0yyH5JM4PKgrnpa4EbO7st9pY27vMo1tJiclWakLG4B8g==",
+      "peer": true
    },
    "node_modules/@maskito/kit": {
-      "version": "1.9.0",
-      "license": "Apache-2.0",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@maskito/kit/-/kit-2.5.0.tgz",
+      "integrity": "sha512-4PQXc/pJ1W+NW6cjVWFHhQlnjLs/4AHiZdisNsUsA6rN1+tMaOthm3Ppqmo9nNOH1F1Q2zQGvIdgaqRm2dq/tQ==",
+      "peer": true,
      "peerDependencies": {
-        "@maskito/core": "^1.9.0"
+        "@maskito/core": "^2.5.0"
+      }
+    },
+    "node_modules/@maskito/phone": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@maskito/phone/-/phone-2.5.0.tgz",
+      "integrity": "sha512-sP/myNz5FlEesmwy3tVDw/ELG/os8IdC0QeGGu+jCa7BFyTUjn7hIeUM6g+oUPkArkjft6tK7JPo+j3zvBbTkQ==",
+      "peer": true,
+      "peerDependencies": {
+        "@maskito/core": "^2.5.0",
+        "@maskito/kit": "^2.5.0",
+        "libphonenumber-js": ">=1.0.0"
      }
    },
    "node_modules/@materia-ui/ngx-monaco-editor": {
@@ -4581,48 +4609,56 @@
      }
    },
    "node_modules/@ng-web-apis/common": {
-      "version": "3.0.6",
-      "license": "Apache-2.0",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@ng-web-apis/common/-/common-4.1.2.tgz",
+      "integrity": "sha512-8SO4JrQK8MZAzveafOEjI3M5zKC2VkM3Q9Movh0KiGQHOqZuT/jdZO4PqT6ydwJHcALiWT2pQRTwjp6oEimaog==",
+      "peer": true,
      "dependencies": {
-        "tslib": "^2.2.0"
+        "tslib": "^2.3.0"
      },
      "peerDependencies": {
-        "@angular/common": ">=12.0.0",
-        "@angular/core": ">=12.0.0",
-        "rxjs": ">=6.4.0"
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "rxjs": ">=7.0.0"
      }
    },
    "node_modules/@ng-web-apis/intersection-observer": {
-      "version": "3.2.0",
-      "license": "Apache-2.0",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@ng-web-apis/intersection-observer/-/intersection-observer-4.1.3.tgz",
+      "integrity": "sha512-/VPw63EmFhY9Gro47IuwjCv9tYNR0ZxCP6jJykZOn4t/fS230JY9U79xvYWY9cMjMbk7LIv0H1A6qYT8hQzhVw==",
+      "peer": true,
      "dependencies": {
-        "tslib": "^2.2.0"
+        "tslib": "^2.3.0"
      },
      "peerDependencies": {
-        "@angular/core": ">=12.0.0",
-        "@ng-web-apis/common": ">=2.0.0"
+        "@angular/core": ">=16.0.0",
+        "@ng-web-apis/common": ">=4.1.2"
      }
    },
    "node_modules/@ng-web-apis/mutation-observer": {
-      "version": "3.1.0",
-      "license": "Apache-2.0",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@ng-web-apis/mutation-observer/-/mutation-observer-4.1.2.tgz",
+      "integrity": "sha512-psvxEE7WN/2KGUOwS7NNXOV8EG70h4FM77B8NmLuKwkh0z5d+sxmgJ9BjbKJB4F144DpQtXFAuJAaVkT882g/w==",
+      "peer": true,
      "dependencies": {
-        "tslib": "^2.2.0"
+        "tslib": "^2.3.0"
      },
      "peerDependencies": {
-        "@angular/core": ">=12.0.0",
-        "@ng-web-apis/common": ">=2.0.0"
+        "@angular/core": ">=16.0.0",
+        "@ng-web-apis/common": ">=4.0.0"
      }
    },
    "node_modules/@ng-web-apis/resize-observer": {
-      "version": "3.0.6",
-      "license": "Apache-2.0",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@ng-web-apis/resize-observer/-/resize-observer-4.1.2.tgz",
+      "integrity": "sha512-T8Vsr/AlnVzrDCko+BpzPWGIq0mFvE1zExY5zxbjTyraIL2VO0Le2wkU/v6UH64nRfp+xY5VDnOADNpTQCS8Zg==",
+      "peer": true,
      "dependencies": {
-        "tslib": "^2.2.0"
+        "tslib": "^2.3.0"
      },
      "peerDependencies": {
-        "@angular/core": ">=12.0.0",
-        "@ng-web-apis/common": ">=2.0.0"
+        "@angular/core": ">=16.0.0",
+        "@ng-web-apis/common": ">=4.0.0"
      }
    },
    "node_modules/@ngtools/webpack": {
@@ -5085,192 +5121,241 @@
      "link": true
    },
    "node_modules/@taiga-ui/addon-charts": {
-      "version": "3.77.1",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-3.77.1.tgz",
-      "integrity": "sha512-yk9cvMewoRRVxTv1sIorVgO9GBkleQyRzkT774RPQACQHizGS2Sq5dQMtetwD3usPmLR2GblDR6NM+iOyHhMIA==",
+      "version": "4.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-4.0.0-rc.5.tgz",
+      "integrity": "sha512-xAlSOndt7peL3SOPJcGvntEseY09QyZcRoMGsd7XZsaCHf0vQnKtwfoTd3nHqYYgcuIS9/aBlznual3RWyl+SA==",
      "dependencies": {
-        "tslib": "^2.6.2"
+        "tslib": "^2.6.3"
      },
      "peerDependencies": {
-        "@angular/common": ">=12.0.0",
-        "@angular/core": ">=12.0.0",
-        "@ng-web-apis/common": "^3.0.6",
-        "@taiga-ui/cdk": "^3.77.1",
-        "@taiga-ui/core": "^3.77.1",
-        "@tinkoff/ng-polymorpheus": "^4.3.0"
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "@ng-web-apis/common": "^4.1.2",
+        "@taiga-ui/cdk": "^4.0.0-rc.5",
+        "@taiga-ui/core": "^4.0.0-rc.5",
+        "@taiga-ui/polymorpheus": "^4.6.4"
      }
    },
    "node_modules/@taiga-ui/addon-commerce": {
-      "version": "3.77.1",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-commerce/-/addon-commerce-3.77.1.tgz",
-      "integrity": "sha512-4qNgDZfxyzTHQdKaerw28xP8d2PCuumLM9xjlRbNE5XcnhUI+rccgZOV9MtZtQoNBl++OBPmbaT2/9+zbSqbxg==",
+      "version": "4.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-commerce/-/addon-commerce-4.0.0-rc.5.tgz",
+      "integrity": "sha512-XkJ4SKzmPi4EFqAo5YQfU7l7FRWclzW0SrcJTdukTOvfTgPuzvNb7/nQEy9cCqmXvddQCgEmFzISHBI0lCnrUg==",
      "dependencies": {
-        "tslib": "^2.6.2"
+        "tslib": "^2.6.3"
      },
      "peerDependencies": {
-        "@angular/common": ">=12.0.0",
-        "@angular/core": ">=12.0.0",
-        "@angular/forms": ">=12.0.0",
-        "@maskito/angular": "^1.9.0",
-        "@maskito/core": "^1.9.0",
-        "@maskito/kit": "^1.9.0",
-        "@ng-web-apis/common": "^3.0.6",
-        "@taiga-ui/cdk": "^3.77.1",
-        "@taiga-ui/core": "^3.77.1",
-        "@taiga-ui/i18n": "^3.77.1",
-        "@taiga-ui/kit": "^3.77.1",
-        "@tinkoff/ng-polymorpheus": "^4.3.0",
-        "rxjs": ">=6.0.0"
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "@angular/forms": ">=16.0.0",
+        "@maskito/angular": "^2.5.0",
+        "@maskito/core": "^2.5.0",
+        "@maskito/kit": "^2.5.0",
+        "@ng-web-apis/common": "^4.1.2",
+        "@taiga-ui/cdk": "^4.0.0-rc.5",
+        "@taiga-ui/core": "^4.0.0-rc.5",
+        "@taiga-ui/i18n": "^4.0.0-rc.5",
+        "@taiga-ui/kit": "^4.0.0-rc.5",
+        "@taiga-ui/polymorpheus": "^4.6.4",
+        "rxjs": ">=7.0.0"
      }
    },
    "node_modules/@taiga-ui/addon-mobile": {
-      "version": "3.77.1",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-mobile/-/addon-mobile-3.77.1.tgz",
-      "integrity": "sha512-kRa9uNdnY9Tyz8FdGXqgbL7cKZ1Z43K3Kjey9tX3uf4BEkODPNVuQFTNzuZvOt6/ql+XtPxi/hU19ii5rvKz3A==",
+      "version": "4.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/addon-mobile/-/addon-mobile-4.0.0-rc.5.tgz",
+      "integrity": "sha512-P6QvsaAUfhBwhyo+Z80J0mwq9RExwDT2mK3MKgZAIerXAsojGHz1e43/TAZrucJfsNEh0fyUpOplgiFy9MLnyw==",
      "dependencies": {
-        "tslib": "^2.6.2"
+        "tslib": "^2.6.3"
      },
      "peerDependencies": {
-        "@angular/cdk": ">=12.0.0",
-        "@angular/common": ">=12.0.0",
-        "@angular/core": ">=12.0.0",
-        "@ng-web-apis/common": "^3.0.6",
-        "@taiga-ui/cdk": "^3.77.1",
-        "@taiga-ui/core": "^3.77.1",
-        "@taiga-ui/kit": "^3.77.1",
-        "@tinkoff/ng-polymorpheus": "^4.3.0",
-        "rxjs": ">=6.0.0"
+        "@angular/cdk": ">=16.0.0",
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "@ng-web-apis/common": "^4.1.2",
+        "@taiga-ui/cdk": "^4.0.0-rc.5",
+        "@taiga-ui/core": "^4.0.0-rc.5",
+        "@taiga-ui/kit": "^4.0.0-rc.5",
+        "@taiga-ui/polymorpheus": "^4.6.4",
+        "rxjs": ">=7.0.0"
      }
    },
    "node_modules/@taiga-ui/cdk": {
-      "version": "3.77.1",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-3.77.1.tgz",
-      "integrity": "sha512-mqT1Rz/JWqah4aNVRD3iEND4XdkfsOxV100D0gbdFD5/aaiMTyL6oMEP2GGE0lSsuk1mRCixkDW0qPCbhG21yQ==",
+      "version": "4.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-4.0.0-rc.5.tgz",
+      "integrity": "sha512-WSNNNd/b+Dil/kIpN7cEnnHjp0/IKRrylbDzyMkJlyaMAwoVR0mChrJ7neYy3iRN5LndAFa/kRR8CCIOIBzf4g==",
      "dependencies": {
-        "@ng-web-apis/common": "3.0.6",
-        "@ng-web-apis/mutation-observer": "3.1.0",
-        "@ng-web-apis/resize-observer": "3.0.6",
-        "@tinkoff/ng-event-plugins": "3.2.0",
-        "@tinkoff/ng-polymorpheus": "4.3.0",
-        "tslib": "2.6.2"
+        "tslib": "2.6.3"
      },
      "optionalDependencies": {
-        "ng-morph": "4.0.5",
-        "parse5": "6.0.1"
+        "@angular-devkit/core": ">=16.0.0",
+        "@angular-devkit/schematics": ">=16.0.0",
+        "@schematics/angular": ">=16.0.0",
+        "ng-morph": "^4.5.2",
+        "parse5": "^7.1.2"
      },
      "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"
+        "@angular/animations": ">=16.0.0",
+        "@angular/cdk": ">=16.0.0",
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "@angular/forms": ">=16.0.0",
+        "@ng-web-apis/common": "^4.1.2",
+        "@ng-web-apis/mutation-observer": "^4.1.2",
+        "@ng-web-apis/resize-observer": "^4.1.2",
+        "@taiga-ui/event-plugins": "^4.0.1",
+        "@taiga-ui/polymorpheus": "^4.6.4",
+        "rxjs": ">=7.0.0"
      }
    },
-    "node_modules/@taiga-ui/cdk/node_modules/parse5": {
-      "version": "6.0.1",
-      "license": "MIT",
-      "optional": true
-    },
    "node_modules/@taiga-ui/core": {
-      "version": "3.77.1",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-3.77.1.tgz",
-      "integrity": "sha512-RjrOZtkQbb+Hw+7wMTt8j76OkGiLrCDb2Ol1rmngFQfzPX5OlaRkBtNhCNoyBtI9rl4CCX2/ViCGnGmrIkHu6g==",
+      "version": "4.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-4.0.0-rc.5.tgz",
+      "integrity": "sha512-kpmwHfa1KHkDb2DpmKBO4h1YFnxE9Bz5Gu6ryWtKLSFG7zID/w10qjmPdEVaE3kUNMg4imbjna0F7C0d3mPwUw==",
      "dependencies": {
-        "@taiga-ui/i18n": "^3.77.1",
-        "tslib": "^2.6.2"
+        "@taiga-ui/i18n": "^4.0.0-rc.5",
+        "tslib": "^2.6.3"
      },
      "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": "^3.0.6",
-        "@ng-web-apis/mutation-observer": "^3.1.0",
-        "@taiga-ui/cdk": "^3.77.1",
-        "@taiga-ui/i18n": "^3.77.1",
-        "@tinkoff/ng-event-plugins": "^3.2.0",
-        "@tinkoff/ng-polymorpheus": "^4.3.0",
+        "@angular/animations": ">=16.0.0",
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "@angular/forms": ">=16.0.0",
+        "@angular/platform-browser": ">=16.0.0",
+        "@angular/router": ">=16.0.0",
+        "@ng-web-apis/common": "^4.1.2",
+        "@ng-web-apis/mutation-observer": "^4.1.2",
+        "@taiga-ui/cdk": "^4.0.0-rc.5",
+        "@taiga-ui/event-plugins": "^4.0.1",
+        "@taiga-ui/i18n": "^4.0.0-rc.5",
+        "@taiga-ui/polymorpheus": "^4.6.4",
+        "rxjs": ">=7.0.0"
+      }
+    },
+    "node_modules/@taiga-ui/event-plugins": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/event-plugins/-/event-plugins-4.0.1.tgz",
+      "integrity": "sha512-qy9AMUVakgZ1e2H7G6dSHtBccveHCi/SG5EhNNjMjhMGkSywIDn+HLJ9kCtDmrJDRtFAPgZ3J0C/UwrsEzCvdQ==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=15.0.0",
+        "@angular/platform-browser": ">=15.0.0",
        "rxjs": ">=6.0.0"
      }
    },
    "node_modules/@taiga-ui/experimental": {
-      "version": "3.77.1",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/experimental/-/experimental-3.77.1.tgz",
-      "integrity": "sha512-UVmP0y1w9VvOoQoTH4VByZ3m45OcC0Lw//rsrNMicPCX9b5IJxgEjUAmJ+PZ/ecsgnDVKO0HD18cZt5uCVdy7w==",
+      "version": "4.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/experimental/-/experimental-4.0.0-rc.5.tgz",
+      "integrity": "sha512-tJ/tngKnGWfm29lIectuN4sYJAxyWd7QqZLEYIwKEwIc7hghlfoYIK9tNkuGTJ+jAHuTxhm77Cn02Ks7dEfJgA==",
      "dependencies": {
-        "tslib": "^2.6.2"
+        "tslib": "^2.6.3"
      },
      "peerDependencies": {
-        "@angular/common": ">=12.0.0",
-        "@angular/core": ">=12.0.0",
-        "@taiga-ui/addon-commerce": "^3.77.1",
-        "@taiga-ui/cdk": "^3.77.1",
-        "@taiga-ui/core": "^3.77.1",
-        "@taiga-ui/kit": "^3.77.1",
-        "@tinkoff/ng-polymorpheus": "^4.3.0",
-        "rxjs": ">=6.0.0"
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "@taiga-ui/addon-commerce": "^4.0.0-rc.5",
+        "@taiga-ui/cdk": "^4.0.0-rc.5",
+        "@taiga-ui/core": "^4.0.0-rc.5",
+        "@taiga-ui/kit": "^4.0.0-rc.5",
+        "@taiga-ui/polymorpheus": "^4.6.4",
+        "rxjs": ">=7.0.0"
      }
    },
    "node_modules/@taiga-ui/i18n": {
-      "version": "3.77.1",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-3.77.1.tgz",
-      "integrity": "sha512-rC2RYMFyaRHKcoU5WUKMe2DU0urRNh0daKvRIhp8t5AnTQE1MDZHRJYVCpysr8sfXvtJdr5oHoZccavzvqjqOQ==",
+      "version": "4.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-4.0.0-rc.5.tgz",
+      "integrity": "sha512-pq1rZaGYYBKuk1pd6F+EzcHJQy0DGbmTq3k9OwI+J9f5ls0oWJU21clh7oybMd2AklLMAd2BQdNzpFS1bvqCKQ==",
      "dependencies": {
-        "tslib": "^2.6.2"
+        "tslib": "^2.6.3"
      },
      "peerDependencies": {
-        "@angular/core": ">=12.0.0",
-        "@ng-web-apis/common": "^3.0.6",
-        "rxjs": ">=6.0.0"
+        "@angular/core": ">=16.0.0",
+        "@ng-web-apis/common": "^4.1.2",
+        "rxjs": ">=7.0.0"
      }
    },
    "node_modules/@taiga-ui/icons": {
-      "version": "3.77.1",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-3.77.1.tgz",
-      "integrity": "sha512-e9NXwxOktKM9TVDVePVkTFAuAs9jlhZCKzpAOfrme1bHVQJ1MEhD2hdj74Yn7IGKOCFjrUDQnxJ9w9POh6H9Vg==",
+      "version": "4.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-4.0.0-rc.5.tgz",
+      "integrity": "sha512-rO8g39hRcNqWkrcZc31k9tam7fbpbpypfyLqcfwvtsJ6I4YxQXCMlhpSh2mCTGBVfOpUi+89lqLUJPY0dVaigg==",
      "dependencies": {
-        "tslib": "^2.6.2"
-      },
-      "peerDependencies": {
-        "@taiga-ui/cdk": "^3.77.1"
+        "tslib": "^2.3.0"
      }
    },
    "node_modules/@taiga-ui/kit": {
-      "version": "3.77.1",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-3.77.1.tgz",
-      "integrity": "sha512-Pyk44wDF61VZiMQHehQ3KEEBj5AsO3et8QccKwmqr13jaQzmH6ljwbbYJOwPpEVsdZbqfiI56OVxp86mi6F8mw==",
+      "version": "4.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-4.0.0-rc.5.tgz",
+      "integrity": "sha512-LvbOheE6J7pprmjlLIyA0CWiBPi/5Fmj87oqm8Ucj18+hGoc9QS8uaZnblpWZ61WyFzoDUtg5c/4dYMfZ0GNdg==",
      "dependencies": {
-        "@maskito/angular": "1.9.0",
-        "@maskito/core": "1.9.0",
-        "@maskito/kit": "1.9.0",
-        "@ng-web-apis/intersection-observer": "3.2.0",
-        "text-mask-core": "5.1.2",
-        "tslib": "^2.6.2"
+        "tslib": "^2.6.3"
      },
      "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": "3.0.6",
-        "@ng-web-apis/mutation-observer": "^3.1.0",
-        "@ng-web-apis/resize-observer": "^3.0.6",
-        "@taiga-ui/cdk": "^3.77.1",
-        "@taiga-ui/core": "^3.77.1",
-        "@taiga-ui/i18n": "^3.77.1",
-        "@tinkoff/ng-polymorpheus": "^4.3.0",
-        "rxjs": ">=6.0.0"
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "@angular/forms": ">=16.0.0",
+        "@angular/router": ">=16.0.0",
+        "@maskito/angular": "^2.5.0",
+        "@maskito/core": "^2.5.0",
+        "@maskito/kit": "^2.5.0",
+        "@maskito/phone": "^2.5.0",
+        "@ng-web-apis/common": "^4.1.2",
+        "@ng-web-apis/intersection-observer": "^4.1.2",
+        "@ng-web-apis/mutation-observer": "^4.1.2",
+        "@ng-web-apis/resize-observer": "^4.1.2",
+        "@taiga-ui/cdk": "^4.0.0-rc.5",
+        "@taiga-ui/core": "^4.0.0-rc.5",
+        "@taiga-ui/i18n": "^4.0.0-rc.5",
+        "@taiga-ui/polymorpheus": "^4.6.4",
+        "rxjs": ">=7.0.0"
+      }
+    },
+    "node_modules/@taiga-ui/layout": {
+      "version": "4.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/layout/-/layout-4.0.0-rc.5.tgz",
+      "integrity": "sha512-iebBX/G1bXLHhNYDR7fjmDpvF4FJXubtDkRedWvnUnOOmI46yKpKohwQuEReRIRxVASK9DvG6VLtz3Ho2JjyrQ==",
+      "dependencies": {
+        "tslib": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "@taiga-ui/cdk": "^4.0.0-rc.5",
+        "@taiga-ui/core": "^4.0.0-rc.5",
+        "@taiga-ui/polymorpheus": "^4.6.4",
+        "rxjs": ">=7.0.0"
+      }
+    },
+    "node_modules/@taiga-ui/legacy": {
+      "version": "4.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/legacy/-/legacy-4.0.0-rc.5.tgz",
+      "integrity": "sha512-zS6h+ivYxHeiSScVc5hTj612f5tv7xY+4eJyJbEtjNsHErf1FWL72IJbl1QK3bkodefznFxwhfEsNkka70Sf3w==",
+      "dependencies": {
+        "tslib": "2.6.3"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=16.0.0"
+      }
+    },
+    "node_modules/@taiga-ui/polymorpheus": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/polymorpheus/-/polymorpheus-4.6.4.tgz",
+      "integrity": "sha512-rlMNWfhImLaMEDWXU1TG7a+YYkVA528poq7lNQ8d+61HyXvbjgs/WAeJQwdabjeLxTUyDozSBJVwSwU69tYprg==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=16.0.0",
+        "@angular/platform-browser": ">=16.0.0"
      }
    },
    "node_modules/@taiga-ui/styles": {
-      "version": "3.77.1",
-      "resolved": "https://registry.npmjs.org/@taiga-ui/styles/-/styles-3.77.1.tgz",
-      "integrity": "sha512-YoPXqY1pz+13vYhHnE6hskjRtnDDGgjnZIPtx05ChN8/TDIJ6NiaWKI5Es/G4fq3vKJnq2yIZ9D2Ghm/aPItGw==",
+      "version": "4.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@taiga-ui/styles/-/styles-4.0.0-rc.5.tgz",
+      "integrity": "sha512-+1o+lcKyQAnoIWQrqJGJB2oBKOOI6yNKfm2IPohgCsIxEWi7ljgejjy2ym1w8e4z1hWrqRFmnck5nhT3ERA2FA==",
      "peerDependencies": {
-        "@taiga-ui/cdk": "^3.77.1",
-        "tslib": "^2.6.2"
+        "@taiga-ui/cdk": "^4.0.0-rc.5",
+        "tslib": "^2.6.3"
      }
    },
    "node_modules/@tinkoff/ng-dompurify": {
@@ -5286,44 +5371,22 @@
        "dompurify": ">= 2.3.0"
      }
    },
-    "node_modules/@tinkoff/ng-event-plugins": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@tinkoff/ng-event-plugins/-/ng-event-plugins-3.2.0.tgz",
-      "integrity": "sha512-n56R5xNfiytabh2WmWdQXfNU6m7dfOo3LLxlARE+DX7f5yciW2xBdDkuEHX74q8dlCuAVlW9aslSfz8c//ymwA==",
-      "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.3.0",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "2.6.2"
-      },
-      "peerDependencies": {
-        "@angular/core": ">=12.0.0",
-        "@angular/platform-browser": ">=12.0.0"
-      }
-    },
    "node_modules/@ts-morph/common": {
-      "version": "0.22.0",
-      "license": "MIT",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.24.0.tgz",
+      "integrity": "sha512-c1xMmNHWpNselmpIqursHeOHHBTIsJLbB+NuovbTTRCNiTLEr/U9dbJ8qy0jd/O2x5pc3seWuOUN5R2IoOTp8A==",
      "optional": true,
      "dependencies": {
        "fast-glob": "^3.3.2",
-        "minimatch": "^9.0.3",
+        "minimatch": "^9.0.4",
        "mkdirp": "^3.0.1",
        "path-browserify": "^1.0.1"
      }
    },
    "node_modules/@ts-morph/common/node_modules/mkdirp": {
      "version": "3.0.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
      "optional": true,
      "bin": {
        "mkdirp": "dist/cjs/src/bin.js"
@@ -5500,7 +5563,8 @@
    },
    "node_modules/@types/minimatch": {
      "version": "3.0.5",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
      "optional": true
    },
    "node_modules/@types/mustache": {
@@ -6007,7 +6071,8 @@
    },
    "node_modules/array-differ": {
      "version": "3.0.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
+      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
      "optional": true,
      "engines": {
        "node": ">=8"
@@ -6020,7 +6085,8 @@
    },
    "node_modules/array-union": {
      "version": "2.1.0",
-      "license": "MIT",
+      "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"
@@ -6028,7 +6094,8 @@
    },
    "node_modules/arrify": {
      "version": "2.0.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
      "optional": true,
      "engines": {
        "node": ">=8"
@@ -6333,11 +6400,12 @@
      }
    },
    "node_modules/braces": {
-      "version": "3.0.2",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
      "devOptional": true,
-      "license": "MIT",
      "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
      },
      "engines": {
        "node": ">=8"
@@ -6771,8 +6839,9 @@
      }
    },
    "node_modules/code-block-writer": {
-      "version": "12.0.0",
-      "license": "MIT",
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.1.tgz",
+      "integrity": "sha512-c5or4P6erEA69TxaxTNcHUNcIn+oyxSRTOWV+pSYF+z4epXqNvwvJ70XPGjPNgue83oAFAPBRQYwpAJ/Hpe/Sg==",
      "optional": true
    },
    "node_modules/color-convert": {
@@ -7839,9 +7908,10 @@
      "license": "Apache-2.0"
    },
    "node_modules/express": {
-      "version": "4.19.1",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "accepts": "~1.3.8",
        "array-flatten": "1.1.1",
@@ -7981,9 +8051,10 @@
      }
    },
    "node_modules/fill-range": {
-      "version": "7.0.1",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
      "devOptional": true,
-      "license": "MIT",
      "dependencies": {
        "to-regex-range": "^5.0.1"
      },
@@ -9128,8 +9199,9 @@
    },
    "node_modules/is-number": {
      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
      "devOptional": true,
-      "license": "MIT",
      "engines": {
        "node": ">=0.12.0"
      }
@@ -9458,6 +9530,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/libphonenumber-js": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.11.4.tgz",
+      "integrity": "sha512-F/R50HQuWWYcmU/esP5jrH5LiWYaN7DpN0a/99U8+mnGGtnx8kmRE+649dQh3v+CowXXZc8vpkf5AmYkO0AQ7Q==",
+      "peer": true
+    },
    "node_modules/license-webpack-plugin": {
      "version": "4.0.2",
      "dev": true,
@@ -10164,9 +10242,10 @@
      "license": "ISC"
    },
    "node_modules/minimatch": {
-      "version": "9.0.3",
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
      "devOptional": true,
-      "license": "ISC",
      "dependencies": {
        "brace-expansion": "^2.0.1"
      },
@@ -10396,7 +10475,8 @@
    },
    "node_modules/multimatch": {
      "version": "5.0.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
+      "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
      "optional": true,
      "dependencies": {
        "@types/minimatch": "^3.0.3",
@@ -10414,7 +10494,8 @@
    },
    "node_modules/multimatch/node_modules/brace-expansion": {
      "version": "1.1.11",
-      "license": "MIT",
+      "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",
@@ -10423,7 +10504,8 @@
    },
    "node_modules/multimatch/node_modules/minimatch": {
      "version": "3.1.2",
-      "license": "ISC",
+      "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"
@@ -10512,26 +10594,43 @@
      "license": "MIT"
    },
    "node_modules/ng-morph": {
-      "version": "4.0.5",
-      "license": "Apache-2.0",
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/ng-morph/-/ng-morph-4.5.4.tgz",
+      "integrity": "sha512-g7asHMUZR05bOw/kX5nIVEFs8SDcuH0t5WjdMuVBlJEvl0mY1gDlz1LoIhGlzcbRleMg9n1J0PdrrmYJchWJ9g==",
      "optional": true,
      "dependencies": {
-        "jsonc-parser": "3.2.0",
-        "minimatch": "9.0.3",
+        "jsonc-parser": "3.3.1",
+        "minimatch": "10.0.1",
        "multimatch": "5.0.0",
-        "ts-morph": "21.0.1",
-        "tslib": "2.6.2"
+        "ts-morph": "23.0.0"
      },
      "peerDependencies": {
-        "@angular-devkit/core": ">=11.0.0",
-        "@angular-devkit/schematics": ">=11.0.0"
+        "@angular-devkit/core": ">=16.0.0",
+        "@angular-devkit/schematics": ">=16.0.0",
+        "tslib": "^2.6.3"
      }
    },
    "node_modules/ng-morph/node_modules/jsonc-parser": {
-      "version": "3.2.0",
-      "license": "MIT",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz",
+      "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
      "optional": true
    },
+    "node_modules/ng-morph/node_modules/minimatch": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.1.tgz",
+      "integrity": "sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==",
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
    "node_modules/ng-packagr": {
      "version": "17.3.0",
      "dev": true,
@@ -11379,7 +11478,8 @@
    },
    "node_modules/path-browserify": {
      "version": "1.0.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
      "optional": true
    },
    "node_modules/path-exists": {
@@ -13232,9 +13332,10 @@
      }
    },
    "node_modules/tar": {
-      "version": "6.2.0",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
      "devOptional": true,
-      "license": "ISC",
      "dependencies": {
        "chownr": "^2.0.0",
        "fs-minipass": "^2.0.0",
@@ -13434,10 +13535,6 @@
        "node": "*"
      }
    },
-    "node_modules/text-mask-core": {
-      "version": "5.1.2",
-      "license": "Unlicense"
-    },
    "node_modules/thunky": {
      "version": "1.1.0",
      "dev": true,
@@ -13464,8 +13561,9 @@
    },
    "node_modules/to-regex-range": {
      "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==",
      "devOptional": true,
-      "license": "MIT",
      "dependencies": {
        "is-number": "^7.0.0"
      },
@@ -13502,12 +13600,13 @@
      "license": "MIT"
    },
    "node_modules/ts-morph": {
-      "version": "21.0.1",
-      "license": "MIT",
+      "version": "23.0.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-23.0.0.tgz",
+      "integrity": "sha512-FcvFx7a9E8TUe6T3ShihXJLiJOiqyafzFKUO4aqIHDUCIvADdGNShcbc2W5PMr3LerXRv7mafvFZ9lRENxJmug==",
      "optional": true,
      "dependencies": {
-        "@ts-morph/common": "~0.22.0",
-        "code-block-writer": "^12.0.0"
+        "@ts-morph/common": "~0.24.0",
+        "code-block-writer": "^13.0.1"
      }
    },
    "node_modules/ts-node": {
@@ -13553,8 +13652,9 @@
      }
    },
    "node_modules/tslib": {
-      "version": "2.6.2",
-      "license": "0BSD"
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
    },
    "node_modules/tslint": {
      "version": "6.1.3",
@@ -14255,9 +14355,10 @@
      }
    },
    "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.16.0",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
      "dev": true,
-      "license": "MIT",
      "engines": {
        "node": ">=10.0.0"
      },
@@ -14540,9 +14641,10 @@
      "license": "ISC"
    },
    "node_modules/ws": {
-      "version": "7.5.9",
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
      "dev": true,
-      "license": "MIT",
      "engines": {
        "node": ">=8.3.0"
      },
--- a/web/package.json
+++ b/web/package.json
@@ -45,17 +45,19 @@
    "@start9labs/argon2": "^0.1.0",
    "@start9labs/emver": "^0.1.5",
    "@start9labs/start-sdk": "file:../sdk/dist",
-    "@taiga-ui/addon-charts": "3.77.1",
-    "@taiga-ui/addon-commerce": "3.77.1",
-    "@taiga-ui/addon-mobile": "3.77.1",
-    "@taiga-ui/cdk": "3.77.1",
-    "@taiga-ui/core": "3.77.1",
-    "@taiga-ui/experimental": "3.77.1",
-    "@taiga-ui/icons": "3.77.1",
-    "@taiga-ui/kit": "3.77.1",
-    "@taiga-ui/styles": "3.77.1",
+    "@taiga-ui/addon-charts": "4.0.0-rc.5",
+    "@taiga-ui/addon-commerce": "4.0.0-rc.5",
+    "@taiga-ui/addon-mobile": "4.0.0-rc.5",
+    "@taiga-ui/cdk": "4.0.0-rc.5",
+    "@taiga-ui/core": "4.0.0-rc.5",
+    "@taiga-ui/event-plugins": "^4.0.1",
+    "@taiga-ui/experimental": "4.0.0-rc.5",
+    "@taiga-ui/icons": "4.0.0-rc.5",
+    "@taiga-ui/kit": "4.0.0-rc.5",
+    "@taiga-ui/layout": "4.0.0-rc.5",
+    "@taiga-ui/legacy": "4.0.0-rc.5",
+    "@taiga-ui/styles": "4.0.0-rc.5",
    "@tinkoff/ng-dompurify": "4.0.0",
-    "@tinkoff/ng-event-plugins": "3.2.0",
    "ansi-to-html": "^0.7.2",
    "base64-js": "^1.5.1",
    "cbor": "npm:@jprochazk/cbor@^0.4.9",
@@ -78,7 +80,7 @@
    "rxjs": "^7.5.6",
    "swiper": "^8.2.4",
    "ts-matches": "^5.2.1",
-    "tslib": "^2.3.0",
+    "tslib": "^2.6.3",
    "uuid": "^8.3.2",
    "zone.js": "^0.14.2"
  },
--- a/web/projects/install-wizard/src/app/app.component.html
+++ b/web/projects/install-wizard/src/app/app.component.html
@@ -9,7 +9,7 @@
            appearance="flat"
            size="m"
            class="back"
-            iconLeft="tuiIconChevronLeft"
+            iconStart="@tui.chevron-left"
            [style.border-radius.rem]="10"
            (click)="selected = null"
          >
@@ -17,7 +17,7 @@
          </button>
        }
        <h1>{{ selected ? 'Install Type' : 'Select Disk' }}</h1>
-        <div [style.color]="'var(--tui-negative)'">{{ error }}</div>
+        <div [style.color]="'var(--tui-text-negative)'">{{ error }}</div>
      </header>
      <div class="pages">
        <div class="options" [class.options_selected]="selected">
@@ -28,9 +28,9 @@
        <div class="options">
          @if (guid) {
            <button tuiCell (click)="install()">
-              <tui-icon icon="tuiIconLifeBuoyLarge" />
+              <tui-icon icon="@tui.life-buoy" />
              <span tuiTitle>
-                <strong [style.color]="'var(--tui-positive)'">
+                <strong [style.color]="'var(--tui-text-positive)'">
                  Re-Install StartOS
                </strong>
                <span tuiSubtitle>Will preserve existing StartOS data</span>
@@ -39,12 +39,14 @@
          }

          <button tuiCell [disabled]="!selected" (click)="warn()">
-            <tui-icon icon="tuiIconDownload" />
+            <tui-icon icon="@tui.download" />
            <span tuiTitle>
              @if (guid) {
-                <span [style.color]="'var(--tui-negative)'">Factory Reset</span>
+                <span [style.color]="'var(--tui-text-negative)'">
+                  Factory Reset
+                </span>
              } @else {
-                <span [style.color]="'var(--tui-positive)'">
+                <span [style.color]="'var(--tui-text-positive)'">
                  Install StartOS
                </span>
              }
--- a/web/projects/install-wizard/src/app/app.component.scss
+++ b/web/projects/install-wizard/src/app/app.component.scss
@@ -5,7 +5,7 @@
 tui-root {
  height: 100%;
  margin: 0;
-  color: var(--tui-text-01);
+  color: var(--tui-text-primary);
 }

 main {
@@ -14,7 +14,7 @@ main {
  flex-direction: column;
  justify-content: center;
  align-items: center;
-  background: var(--tui-base-08);
+  background: var(--tui-background-accent-opposite-hover);
 }

 .logo {
--- a/web/projects/install-wizard/src/app/app.component.ts
+++ b/web/projects/install-wizard/src/app/app.component.ts
@@ -1,7 +1,7 @@
+import { TUI_CONFIRM } from '@taiga-ui/kit'
 import { Component, inject } from '@angular/core'
 import { DiskInfo, LoadingService, toGuid } from '@start9labs/shared'
 import { TuiDialogService } from '@taiga-ui/core'
-import { TUI_PROMPT } from '@taiga-ui/kit'
 import { filter, from } from 'rxjs'
 import { SUCCESS, toWarning } from 'src/app/app.utils'
 import { ApiService } from 'src/app/services/api.service'
@@ -40,7 +40,7 @@ export class AppComponent {

  warn() {
    this.dialogs
-      .open(TUI_PROMPT, toWarning(this.selected))
+      .open(TUI_CONFIRM, toWarning(this.selected))
      .pipe(filter(Boolean))
      .subscribe(() => {
        this.install(true)
--- a/web/projects/install-wizard/src/app/app.module.ts
+++ b/web/projects/install-wizard/src/app/app.module.ts
@@ -3,19 +3,18 @@ import { NgModule } from '@angular/core'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import {
  DriveComponent,
-  LoadingModule,
  RELATIVE_URL,
  WorkspaceConfig,
 } from '@start9labs/shared'
-import { TuiDialogModule, TuiRootModule } from '@taiga-ui/core'
 import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiCellModule,
-  TuiIconModule,
-  TuiSurfaceModule,
-  TuiTitleModule,
-} from '@taiga-ui/experimental'
+  TuiButton,
+  TuiIcon,
+  TuiRoot,
+  TuiSurface,
+  TuiTitle,
+} from '@taiga-ui/core'
+import { NG_EVENT_PLUGINS } from '@taiga-ui/event-plugins'
+import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
 import { ApiService } from 'src/app/services/api.service'
 import { LiveApiService } from 'src/app/services/live-api.service'
 import { MockApiService } from 'src/app/services/mock-api.service'
@@ -31,18 +30,17 @@ const {
  imports: [
    HttpClientModule,
    BrowserAnimationsModule,
-    TuiRootModule,
-    TuiDialogModule,
-    LoadingModule,
+    TuiRoot,
    DriveComponent,
-    TuiButtonModule,
-    TuiCardModule,
-    TuiCellModule,
-    TuiIconModule,
-    TuiSurfaceModule,
-    TuiTitleModule,
+    TuiButton,
+    TuiCardLarge,
+    TuiCell,
+    TuiIcon,
+    TuiSurface,
+    TuiTitle,
  ],
  providers: [
+    NG_EVENT_PLUGINS,
    {
      provide: ApiService,
      useClass: useMocks ? MockApiService : LiveApiService,
--- a/web/projects/install-wizard/src/app/app.utils.ts
+++ b/web/projects/install-wizard/src/app/app.utils.ts
@@ -1,6 +1,6 @@
 import { DiskInfo } from '@start9labs/shared'
 import { TuiDialogOptions } from '@taiga-ui/core'
-import { TuiPromptData } from '@taiga-ui/kit'
+import { TuiConfirmData } from '@taiga-ui/kit'

 export const SUCCESS: Partial<TuiDialogOptions<any>> = {
  label: 'Install Success',
@@ -12,7 +12,7 @@ export const SUCCESS: Partial<TuiDialogOptions<any>> = {

 export function toWarning(
  disk: DiskInfo | null,
-): Partial<TuiDialogOptions<TuiPromptData>> {
+): Partial<TuiDialogOptions<TuiConfirmData>> {
  return {
    label: 'Warning',
    size: 's',
--- a/web/projects/marketplace/package.json
+++ b/web/projects/marketplace/package.json
@@ -5,7 +5,7 @@
    "@angular/common": ">=13.2.0",
    "@angular/core": ">=13.2.0",
    "@start9labs/shared": ">=0.3.2",
-    "@taiga-ui/cdk": ">=3.0.0",
+    "@taiga-ui/cdk": "4.0.0-rc.5",
    "@tinkoff/ng-dompurify": ">=4.0.0",
    "fuse.js": "^6.4.6"
  },
--- a/web/projects/marketplace/src/components/menu/menu.component.html
+++ b/web/projects/marketplace/src/components/menu/menu.component.html
@@ -7,7 +7,7 @@
        size="60px"
        [url]="store?.url || ''"
        [marketplace]="iconConfig"
-      ></store-icon>
+      />
      <h1 [class.tui-skeleton]="!store">
        {{ store?.info?.name || 'Loading store' }}
      </h1>
@@ -21,13 +21,11 @@
        <marketplace-search
          [(query)]="query"
          (queryChange)="onQueryChange($event)"
-        ></marketplace-search>
+        />
        <button
          tuiButton
          type="button"
-          appearance="flat"
-          [pseudoActive]="false"
-          [pseudoHover]="false"
+          appearance="link"
          (click)="toggleMenu(true)"
          (tuiActiveZoneChange)="toggleMenu($event)"
          [style.--tui-padding]="'1.2rem'"
@@ -40,7 +38,7 @@
            [marketplace]="iconConfig"
            [class.tui-skeleton]="!store"
            [class.tui-skeleton_rounded]="!store"
-          ></store-icon>
+          />
          <nav
            *tuiSidebar="open; direction: 'right'; autoWidth: true"
            class="nav-mobile-sidebar divide-bar"
@@ -54,7 +52,7 @@
                tuiButton
                type="button"
                appearance="icon"
-                icon="tuiIconClose"
+                iconStart="@tui.x"
                (tuiActiveZoneChange)="toggleMenu($event)"
                (click)="toggleMenu(false)"
              ></button>
@@ -66,20 +64,17 @@
                [categories]="store?.info?.categories"
                [category]="query ? '' : category"
                (categoryChange)="onCategoryChange($event); toggleMenu(false)"
-              ></marketplace-categories>
+              />
              <div>
                <!-- link to store for brochure -->
-                <ng-content select="[slot=store-mobile]"></ng-content>
+                <ng-content select="[slot=store-mobile]" />
                <a
                  target="_blank"
                  rel="noreferrer"
                  href="https://docs.start9.com/0.3.5.x/developer-docs/"
                >
                  <span>Package a service</span>
-                  <tui-icon
-                    tuiAppearance="icon"
-                    icon="tuiIconExternalLinkLarge"
-                  ></tui-icon>
+                  <tui-icon tuiAppearance="icon" icon="@tui.external-link" />
                </a>
              </div>
            </div>
@@ -93,26 +88,23 @@
      <marketplace-search
        [query]="query"
        (queryChange)="onQueryChange($event)"
-      ></marketplace-search>
+      />
      <div class="nav-desktop-container">
        <marketplace-categories
          [categories]="store?.info?.categories"
          [category]="query ? '' : category"
          (categoryChange)="onCategoryChange($event)"
-        ></marketplace-categories>
+        />
        <div>
          <!-- link to store for brochure -->
-          <ng-content select="[slot=store]"></ng-content>
+          <ng-content select="[slot=store]" />
          <a
            target="_blank"
            rel="noreferrer"
            href="https://docs.start9.com/0.3.5.x/developer-docs/"
          >
            <span>Package a service</span>
-            <tui-icon
-              tuiAppearance="icon"
-              icon="tuiIconExternalLinkLarge"
-            ></tui-icon>
+            <tui-icon tuiAppearance="icon" icon="@tui.external-link" />
          </a>
        </div>
      </div>
--- a/web/projects/marketplace/src/components/menu/menu.component.module.ts
+++ b/web/projects/marketplace/src/components/menu/menu.component.module.ts
@@ -3,13 +3,12 @@ import { NgModule } from '@angular/core'
 import { SharedPipesModule } from '@start9labs/shared'

 import { MenuComponent } from './menu.component'
-import { TuiButtonModule, TuiLoaderModule } from '@taiga-ui/core'
-import { TuiActiveZoneModule, TuiLetModule } from '@taiga-ui/cdk'
-import { TuiSidebarModule } from '@taiga-ui/addon-mobile'
+import { TuiLoader, TuiIcon, TuiButton, TuiAppearance } from '@taiga-ui/core'
+import { TuiActiveZone, TuiLet } from '@taiga-ui/cdk'
+import { TuiSidebar } from '@taiga-ui/addon-mobile'
 import { SearchModule } from '../../pages/list/search/search.module'
 import { CategoriesModule } from '../../pages/list/categories/categories.module'
 import { StoreIconComponentModule } from '../store-icon/store-icon.component.module'
-import { TuiAppearanceModule, TuiIconModule } from '@taiga-ui/experimental'

@NgModule({
  imports: [
@@ -17,15 +16,15 @@ import { TuiAppearanceModule, TuiIconModule } from '@taiga-ui/experimental'
    SharedPipesModule,
    SearchModule,
    CategoriesModule,
-    TuiActiveZoneModule,
-    TuiSidebarModule,
-    TuiLoaderModule,
-    TuiButtonModule,
+    TuiActiveZone,
+    ...TuiSidebar,
+    TuiLoader,
+    TuiButton,
    CategoriesModule,
    StoreIconComponentModule,
-    TuiLetModule,
-    TuiAppearanceModule,
-    TuiIconModule,
+    TuiLet,
+    TuiAppearance,
+    TuiIcon,
  ],
  declarations: [MenuComponent],
  exports: [MenuComponent],
--- a/web/projects/marketplace/src/pages/list/categories/categories.component.ts
+++ b/web/projects/marketplace/src/pages/list/categories/categories.component.ts
@@ -30,30 +30,30 @@ export class CategoriesComponent {
  determineIcon(category: string): string {
    switch (category.toLowerCase()) {
      case 'all':
-        return 'tuiIconGridLarge'
+        return '@tui.layout-grid'
      case 'bitcoin':
-        return 'assets/img/icons/logo-bitcoin.svg'
+        return '@tui.bitcoin'
      case 'messaging':
      case 'communications':
-        return 'tuiIconMessageCircleLarge'
+        return '@tui.message-circle'
      case 'data':
-        return 'tuiIconFileTextLarge'
+        return '@tui.file-text'
      case 'developer tools':
-        return 'tuiIconTableSplitLarge'
+        return '@tui.table-split'
      case 'featured':
-        return 'tuiIconStarLarge'
+        return '@tui.star'
      case 'lightning':
-        return 'tuiIconZapLarge'
+        return '@tui.zap'
      case 'media':
-        return 'tuiIconPlayCircleLarge'
+        return '@tui.circle-play'
      case 'networking':
-        return 'tuiIconGlobeLarge'
+        return '@tui.globe'
      case 'social':
-        return 'tuiIconUsersLarge'
+        return '@tui.users'
      case 'ai':
-        return 'tuiIconCpuLarge'
+        return '@tui.cpu'
      default:
-        return 'tuiIconBoxLarge'
+        return '@tui.box'
    }
  }
 }
--- a/web/projects/marketplace/src/pages/list/categories/categories.module.ts
+++ b/web/projects/marketplace/src/pages/list/categories/categories.module.ts
@@ -1,12 +1,12 @@
+import { TuiIcon, TuiAppearance } from '@taiga-ui/core'
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'

 import { CategoriesComponent } from './categories.component'
-import { TuiAppearanceModule, TuiIconModule } from '@taiga-ui/experimental'
 import { RouterModule } from '@angular/router'

@NgModule({
-  imports: [RouterModule, CommonModule, TuiAppearanceModule, TuiIconModule],
+  imports: [RouterModule, CommonModule, TuiAppearance, TuiIcon],
  declarations: [CategoriesComponent],
  exports: [CategoriesComponent],
 })
--- a/web/projects/marketplace/src/pages/list/item/item.module.ts
+++ b/web/projects/marketplace/src/pages/list/item/item.module.ts
@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { SharedPipesModule, TickerModule } from '@start9labs/shared'
+import { TuiLet } from '@taiga-ui/cdk'
 import { ItemComponent } from './item.component'
-import { TuiLetModule } from '@taiga-ui/cdk'

@NgModule({
  declarations: [ItemComponent],
@@ -13,7 +13,7 @@ import { TuiLetModule } from '@taiga-ui/cdk'
    RouterModule,
    SharedPipesModule,
    TickerModule,
-    TuiLetModule,
+    TuiLet,
  ],
 })
 export class ItemModule {}
--- a/web/projects/marketplace/src/pages/list/search/search.component.html
+++ b/web/projects/marketplace/src/pages/list/search/search.component.html
@@ -1,5 +1,5 @@
 <div class="search-box">
-  <tui-svg src="tuiIconSearchLarge"></tui-svg>
+  <tui-icon icon="@tui.search" />
  <input
    type="text"
    name="search"
--- a/web/projects/marketplace/src/pages/list/search/search.module.ts
+++ b/web/projects/marketplace/src/pages/list/search/search.module.ts
@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
+import { TuiIcon } from '@taiga-ui/core'
 import { SearchComponent } from './search.component'
-import { TuiSvgModule } from '@taiga-ui/core'

@NgModule({
-  imports: [FormsModule, CommonModule, TuiSvgModule],
+  imports: [FormsModule, CommonModule, TuiIcon],
  declarations: [SearchComponent],
  exports: [SearchComponent],
 })
--- a/web/projects/marketplace/src/pages/release-notes/release-notes.component.ts
+++ b/web/projects/marketplace/src/pages/release-notes/release-notes.component.ts
@@ -7,7 +7,7 @@ import {
  PipeTransform,
 } from '@angular/core'
 import { AbstractMarketplaceService } from '../../services/marketplace.service'
-import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus'
+import { PolymorpheusContent } from '@taiga-ui/polymorpheus'
 import { TuiDialogContext, TuiDialogService } from '@taiga-ui/core'
 import { MarketplacePkg } from '../../types'
 import { Observable } from 'rxjs'
--- a/web/projects/marketplace/src/pages/release-notes/release-notes.module.ts
+++ b/web/projects/marketplace/src/pages/release-notes/release-notes.module.ts
@@ -1,3 +1,4 @@
+import { TuiAccordion } from '@taiga-ui/kit'
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import {
@@ -5,8 +6,7 @@ import {
  MarkdownPipeModule,
  SafeLinksDirective,
 } from '@start9labs/shared'
-import { TuiAccordionModule } from '@taiga-ui/kit'
-import { TuiButtonModule, TuiLoaderModule } from '@taiga-ui/core'
+import { TuiLoader, TuiButton } from '@taiga-ui/core'
 import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
 import {
  FilterVersionsPipe,
@@ -20,9 +20,9 @@ import {
    MarkdownPipeModule,
    NgDompurifyModule,
    SafeLinksDirective,
-    TuiButtonModule,
-    TuiAccordionModule,
-    TuiLoaderModule,
+    TuiButton,
+    ...TuiAccordion,
+    TuiLoader,
    FilterVersionsPipe,
  ],
  declarations: [ReleaseNotesComponent],
--- a/web/projects/marketplace/src/pages/show/about/about.module.ts
+++ b/web/projects/marketplace/src/pages/show/about/about.module.ts
@@ -1,10 +1,10 @@
-import { CommonModule } from "@angular/common";
-import { NgModule } from "@angular/core";
-import { RouterModule } from "@angular/router";
-import { AboutComponent } from "./about.component";
-import { TuiTagModule } from "@taiga-ui/kit";
-import { NgDompurifyModule } from "@tinkoff/ng-dompurify";
-import { SafeLinksDirective } from "@start9labs/shared";
+import { TuiTagModule } from '@taiga-ui/legacy'
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { AboutComponent } from './about.component'
+import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
+import { SafeLinksDirective } from '@start9labs/shared'

@NgModule({
  imports: [
--- a/web/projects/marketplace/src/pages/show/additional/additional-item.component.ts
+++ b/web/projects/marketplace/src/pages/show/additional/additional-item.component.ts
@@ -1,16 +1,17 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { TuiLabelModule, TuiSvgModule } from '@taiga-ui/core'
-import { TuiLineClampModule } from '@taiga-ui/kit'
+import { TuiIcon, TuiLabel, TuiTitle } from '@taiga-ui/core'
+import { TuiLineClamp } from '@taiga-ui/kit'

@Component({
  selector: 'marketplace-additional-item',
  template: `
    <div class="item-container">
-      <label [tuiLabel]="label">
-        <tui-line-clamp [content]="data" [linesLimit]="1"></tui-line-clamp>
+      <label tuiTitle>
+        <span tuiSubtitle>{{ label }}</span>
+        <tui-line-clamp [content]="data" [linesLimit]="1" />
      </label>
-      <tui-svg [src]="icon"></tui-svg>
+      <tui-icon [icon]="icon" />
    </div>
  `,
  styles: [
@@ -25,7 +26,11 @@ import { TuiLineClampModule } from '@taiga-ui/kit'
          background-color: rgb(113 113 122 / 0.1);
        }

-        tui-svg {
+        [tuiSubtitle] {
+          color: var(--tui-text-secondary);
+        }
+
+        tui-icon {
          opacity: 0.7;
        }
      }
@@ -38,7 +43,7 @@ import { TuiLineClampModule } from '@taiga-ui/kit'
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
-  imports: [CommonModule, TuiSvgModule, TuiLineClampModule, TuiLabelModule],
+  imports: [CommonModule, TuiLineClamp, TuiLabel, TuiIcon, TuiTitle],
 })
 export class MarketplaceAdditionalItemComponent {
  @Input({ required: true })
--- a/web/projects/marketplace/src/pages/show/additional/additional.component.html
+++ b/web/projects/marketplace/src/pages/show/additional/additional.component.html
@@ -15,14 +15,15 @@
        (click)="copyService.copy(gitHash)"
        [data]="gitHash"
        label="Git Hash"
-        icon="tuiIconCopyLarge"
+        icon="@tui.copy"
        class="item-copy"
-        button
-        detail="false"
      ></marketplace-additional-item>
      <ng-template #noHash>
        <div class="item-padding">
-          <label tuiLabel="Git Hash">Unknown</label>
+          <label tuiTitle>
+            <span tuiSubtitle>Git Hash</span>
+            Unknown
+          </label>
        </div>
      </ng-template>
      <!-- license -->
@@ -30,7 +31,7 @@
        (click)="presentModalMd('License')"
        [data]="pkg.manifest.license"
        label="License"
-        icon="tuiIconChevronRightLarge"
+        icon="@tui.chevron-right"
        class="item-pointer"
      ></marketplace-additional-item>
      <!-- instructions -->
@@ -38,38 +39,38 @@
        (click)="presentModalMd('Instructions')"
        data="Click to view instructions"
        label="Instructions"
-        icon="tuiIconChevronRightLarge"
+        icon="@tui.chevron-right"
        class="item-pointer"
      ></marketplace-additional-item>
      <!-- versions -->
-      <ng-content></ng-content>
+      <ng-content />
      <!-- links -->
      <marketplace-additional-link
        *ngIf="pkg.manifest.marketingSite"
        [url]="pkg.manifest.marketingSite"
        label="Marketing Site"
-        icon="tuiIconExternalLinkLarge"
+        icon="@tui.external-link"
        class="item-pointer"
      ></marketplace-additional-link>
      <marketplace-additional-link
        *ngIf="pkg.manifest.upstreamRepo"
        [url]="pkg.manifest.upstreamRepo"
        label="Source Repository"
-        icon="tuiIconExternalLinkLarge"
+        icon="@tui.external-link"
        class="item-pointer"
      ></marketplace-additional-link>
      <marketplace-additional-link
        *ngIf="pkg.manifest.wrapperRepo"
        [url]="pkg.manifest.wrapperRepo"
        label="Wrapper Repository"
-        icon="tuiIconExternalLinkLarge"
+        icon="@tui.external-link"
        class="item-pointer"
      ></marketplace-additional-link>
      <marketplace-additional-link
        *ngIf="pkg.manifest.supportSite"
        [url]="pkg.manifest.supportSite"
        label="Support Site"
-        icon="tuiIconExternalLinkLarge"
+        icon="@tui.external-link"
        class="item-pointer"
      ></marketplace-additional-link>
    </div>
--- a/web/projects/marketplace/src/pages/show/additional/additional.component.ts
+++ b/web/projects/marketplace/src/pages/show/additional/additional.component.ts
@@ -6,7 +6,7 @@ import {
 } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { TuiDialogService } from '@taiga-ui/core'
-import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
+import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { CopyService, MarkdownComponent } from '@start9labs/shared'
 import { MarketplacePkg } from '../../../types'
 import { AbstractMarketplaceService } from '../../../services/marketplace.service'
--- a/web/projects/marketplace/src/pages/show/additional/additional.module.ts
+++ b/web/projects/marketplace/src/pages/show/additional/additional.module.ts
@@ -1,17 +1,18 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { AdditionalComponent } from './additional.component'
-import { TuiButtonModule, TuiLabelModule } from '@taiga-ui/core'
+import { TuiButton, TuiLabel, TuiTitle } from '@taiga-ui/core'
 import { MarketplaceAdditionalItemComponent } from './additional-item.component'
 import { MarketplaceAdditionalLinkComponent } from './additional-link.component'

@NgModule({
  imports: [
    CommonModule,
-    TuiButtonModule,
-    TuiLabelModule,
+    TuiButton,
+    TuiLabel,
    MarketplaceAdditionalItemComponent,
    MarketplaceAdditionalLinkComponent,
+    TuiTitle,
  ],
  declarations: [AdditionalComponent],
  exports: [AdditionalComponent],
--- a/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts
+++ b/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts
@@ -5,11 +5,11 @@ import {
  Input,
  inject,
 } from '@angular/core'
-import { EmverPipesModule } from '@start9labs/shared'
-import { Dependency, MarketplacePkg, StoreIdentity } from '../../../types'
 import { RouterModule } from '@angular/router'
-import { TuiAvatarModule, TuiLineClampModule } from '@taiga-ui/kit'
-import { TuiLetModule } from '@taiga-ui/cdk'
+import { EmverPipesModule } from '@start9labs/shared'
+import { TuiLet } from '@taiga-ui/cdk'
+import { TuiAvatar, TuiLineClamp } from '@taiga-ui/kit'
+import { Dependency, MarketplacePkg, StoreIdentity } from '../../../types'
 import { AbstractMarketplaceService } from '../../../services/marketplace.service'

@Component({
@@ -18,15 +18,11 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
    <div class="outer-container" *tuiLet="marketplace$ | async as marketplace">
      <tui-avatar
        class="dep-img"
-        [rounded]="true"
-        [size]="'l'"
-        [avatarUrl]="getImage(dep.key, marketplace)"
-      ></tui-avatar>
+        size="l"
+        [src]="getImage(dep.key, marketplace)"
+      />
      <div>
-        <tui-line-clamp
-          [linesLimit]="2"
-          [content]="titleContent"
-        ></tui-line-clamp>
+        <tui-line-clamp [linesLimit]="2" [content]="titleContent" />
        <ng-template #titleContent>
          <div class="title">
            <span>
@@ -44,7 +40,7 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
          [linesLimit]="2"
          [content]="descContent"
          class="description"
-        ></tui-line-clamp>
+        />
        <ng-template #descContent>
          {{ dep.value.description }}
        </ng-template>
@@ -107,10 +103,10 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
  imports: [
    CommonModule,
    RouterModule,
-    TuiAvatarModule,
+    TuiAvatar,
    EmverPipesModule,
-    TuiLineClampModule,
-    TuiLetModule,
+    TuiLineClamp,
+    TuiLet,
  ],
 })
 export class MarketplaceDepItemComponent {
--- a/web/projects/marketplace/src/pages/show/hero/hero.component.ts
+++ b/web/projects/marketplace/src/pages/show/hero/hero.component.ts
@@ -2,13 +2,13 @@ import { CommonModule } from '@angular/common'
 import {
  ChangeDetectionStrategy,
  Component,
-  Input,
  inject,
+  Input,
 } from '@angular/core'
 import { SharedPipesModule, TickerModule } from '@start9labs/shared'
-import { MarketplacePkg, StoreIdentity } from '../../../types'
-import { TuiLetModule } from '@taiga-ui/cdk'
+import { TuiLet } from '@taiga-ui/cdk'
 import { AbstractMarketplaceService } from '../../../services/marketplace.service'
+import { MarketplacePkg, StoreIdentity } from '../../../types'

@Component({
  selector: 'marketplace-package-hero',
@@ -41,7 +41,7 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
          </p>
        </div>
        <!-- control buttons -->
-        <ng-content></ng-content>
+        <ng-content />
      </div>
    </div>
  `,
@@ -53,7 +53,7 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
        margin-top: 2.5rem;

        @media (min-width: 768px) {
-          margin-top: 0px;
+          margin-top: 0;
        }
      }

@@ -129,8 +129,8 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
          position: absolute;
          width: 100%;
          height: 100%;
-          top: 0px;
-          left: 0px;
+          top: 0;
+          left: 0;
          z-index: -50;
          border-radius: 1.5rem;

@@ -161,7 +161,7 @@ import { AbstractMarketplaceService } from '../../../services/marketplace.servic
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
-  imports: [CommonModule, SharedPipesModule, TickerModule, TuiLetModule],
+  imports: [CommonModule, SharedPipesModule, TickerModule, TuiLet],
 })
 export class MarketplacePackageHeroComponent {
  @Input({ required: true })
--- a/web/projects/marketplace/src/pages/show/screenshots/screenshots.component.ts
+++ b/web/projects/marketplace/src/pages/show/screenshots/screenshots.component.ts
@@ -1,3 +1,4 @@
+import { TuiCarousel } from '@taiga-ui/kit'
 import { CommonModule } from '@angular/common'
 import {
  ChangeDetectionStrategy,
@@ -6,14 +7,9 @@ import {
  Input,
 } from '@angular/core'
 import { TUI_IS_MOBILE } from '@taiga-ui/cdk'
-import {
-  TuiButtonModule,
-  TuiDialogContext,
-  TuiDialogService,
-} from '@taiga-ui/core'
-import { TuiCarouselModule } from '@taiga-ui/kit'
+import { TuiDialogContext, TuiDialogService, TuiButton } from '@taiga-ui/core'
 import { MarketplacePkg } from '../../../types'
-import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus'
+import { PolymorpheusContent } from '@taiga-ui/polymorpheus'

@Component({
  selector: 'marketplace-package-screenshots',
@@ -22,7 +18,7 @@ import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus'
      <button
        tuiIconButton
        appearance="flat"
-        icon="tuiIconChevronLeftLarge"
+        icon="@tui.chevron-left"
        title="Previous"
        type="button"
        (click)="carousel.prev()"
@@ -61,7 +57,7 @@ import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus'
        tuiIconButton
        appearance="flat"
        type="button"
-        icon="tuiIconChevronRightLarge"
+        icon="@tui.chevron-right"
        title="Next"
        (click)="carousel.next()"
      ></button>
@@ -125,7 +121,7 @@ import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus'
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
-  imports: [CommonModule, TuiCarouselModule, TuiButtonModule],
+  imports: [CommonModule, TuiCarousel, TuiButton],
 })
 export class MarketplacePackageScreenshotComponent {
  private readonly dialogs = inject(TuiDialogService)
--- a/web/projects/setup-wizard/src/app/app.component.ts
+++ b/web/projects/setup-wizard/src/app/app.component.ts
@@ -5,10 +5,7 @@ import { ApiService } from 'src/app/services/api.service'

@Component({
  selector: 'app-root',
-  template: `
-    <tui-theme-night></tui-theme-night>
-    <tui-root tuiMode="onDark"><router-outlet /></tui-root>
-  `,
+  template: '<tui-root tuiTheme="dark"><router-outlet /></tui-root>',
 })
 export class AppComponent {
  private readonly api = inject(ApiService)
--- a/web/projects/setup-wizard/src/app/app.module.ts
+++ b/web/projects/setup-wizard/src/app/app.module.ts
@@ -3,20 +3,13 @@ import { NgModule } from '@angular/core'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { PreloadAllModules, RouterModule } from '@angular/router'
 import {
-  LoadingModule,
  provideSetupLogsService,
  provideSetupService,
  RELATIVE_URL,
  WorkspaceConfig,
 } from '@start9labs/shared'
-import {
-  TuiAlertModule,
-  TuiDialogModule,
-  TuiModeModule,
-  TuiRootModule,
-  TuiThemeNightModule,
-} from '@taiga-ui/core'
-import { tuiButtonOptionsProvider } from '@taiga-ui/experimental'
+import { tuiButtonOptionsProvider, TuiRoot } from '@taiga-ui/core'
+import { NG_EVENT_PLUGINS } from '@taiga-ui/event-plugins'
 import { ApiService } from 'src/app/services/api.service'
 import { LiveApiService } from 'src/app/services/live-api.service'
 import { MockApiService } from 'src/app/services/mock-api.service'
@@ -37,14 +30,10 @@ const {
      preloadingStrategy: PreloadAllModules,
      initialNavigation: 'disabled',
    }),
-    LoadingModule,
-    TuiRootModule,
-    TuiDialogModule,
-    TuiAlertModule,
-    TuiModeModule,
-    TuiThemeNightModule,
+    TuiRoot,
  ],
  providers: [
+    NG_EVENT_PLUGINS,
    provideSetupService(ApiService),
    provideSetupLogsService(ApiService),
    tuiButtonOptionsProvider({ size: 'm' }),
--- a/web/projects/setup-wizard/src/app/components/cifs.component.ts
+++ b/web/projects/setup-wizard/src/app/components/cifs.component.ts
@@ -1,3 +1,4 @@
+import { TuiInputModule, TuiInputPasswordModule } from '@taiga-ui/legacy'
 import { CommonModule } from '@angular/common'
 import { Component, inject, Inject } from '@angular/core'
 import {
@@ -9,18 +10,13 @@ import {
 } from '@angular/forms'
 import { LoadingService, StartOSDiskInfo } from '@start9labs/shared'
 import {
-  TuiButtonModule,
  TuiDialogContext,
  TuiDialogService,
-  TuiErrorModule,
+  TuiError,
+  TuiButton,
 } from '@taiga-ui/core'
-import {
-  TUI_VALIDATION_ERRORS,
-  TuiFieldErrorPipeModule,
-  TuiInputModule,
-  TuiInputPasswordModule,
-} from '@taiga-ui/kit'
-import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { TUI_VALIDATION_ERRORS, TuiFieldErrorPipe } from '@taiga-ui/kit'
+import { POLYMORPHEUS_CONTEXT } from '@taiga-ui/polymorpheus'
 import { PASSWORD } from 'src/app/components/password.component'
 import {
  ApiService,
@@ -40,7 +36,7 @@ interface Context {
      <tui-input formControlName="hostname">
        Hostname
        <input
-          tuiTextfield
+          tuiTextfieldLegacy
          placeholder="'My Computer' OR 'my-computer.local'"
        />
      </tui-input>
@@ -51,7 +47,7 @@ interface Context {

      <tui-input formControlName="path" class="input">
        Path
-        <input tuiTextfield placeholder="/Desktop/my-folder'" />
+        <input tuiTextfieldLegacy placeholder="/Desktop/my-folder'" />
      </tui-input>
      <tui-error
        formControlName="path"
@@ -60,7 +56,7 @@ interface Context {

      <tui-input formControlName="username" class="input">
        Username
-        <input tuiTextfield placeholder="Enter username" />
+        <input tuiTextfieldLegacy placeholder="Enter username" />
      </tui-input>
      <tui-error
        formControlName="username"
@@ -92,11 +88,11 @@ interface Context {
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
-    TuiButtonModule,
+    TuiButton,
    TuiInputModule,
    TuiInputPasswordModule,
-    TuiErrorModule,
-    TuiFieldErrorPipeModule,
+    TuiError,
+    TuiFieldErrorPipe,
  ],
  providers: [
    {
--- a/web/projects/setup-wizard/src/app/components/password.component.ts
+++ b/web/projects/setup-wizard/src/app/components/password.component.ts
@@ -1,17 +1,13 @@
+import { TuiInputPasswordModule } from '@taiga-ui/legacy'
 import { Component, inject } from '@angular/core'
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'
 import * as argon2 from '@start9labs/argon2'
 import { ErrorService } from '@start9labs/shared'
-import {
-  TuiButtonModule,
-  TuiDialogContext,
-  TuiErrorModule,
-} from '@taiga-ui/core'
-import { TuiInputPasswordModule } from '@taiga-ui/kit'
+import { TuiDialogContext, TuiError, TuiButton } from '@taiga-ui/core'
 import {
  POLYMORPHEUS_CONTEXT,
  PolymorpheusComponent,
-} from '@tinkoff/ng-polymorpheus'
+} from '@taiga-ui/polymorpheus'
 import {
  CifsBackupTarget,
  DiskBackupTarget,
@@ -35,13 +31,13 @@ interface DialogData {
    <form [style.margin-top.rem]="1" (ngSubmit)="submit()">
      <tui-input-password [formControl]="password">
        Enter Password
-        <input tuiTextfield maxlength="64" />
+        <input tuiTextfieldLegacy maxlength="64" />
      </tui-input-password>
      <tui-error [error]="passwordError"></tui-error>
      @if (storageDrive) {
        <tui-input-password [style.margin-top.rem]="1" [formControl]="confirm">
          Retype Password
-          <input tuiTextfield maxlength="64" />
+          <input tuiTextfieldLegacy maxlength="64" />
        </tui-input-password>
        <tui-error [error]="confirmError"></tui-error>
      }
@@ -67,9 +63,9 @@ interface DialogData {
  imports: [
    FormsModule,
    ReactiveFormsModule,
-    TuiButtonModule,
+    TuiButton,
    TuiInputPasswordModule,
-    TuiErrorModule,
+    TuiError,
  ],
 })
 export class PasswordComponent {
--- a/web/projects/setup-wizard/src/app/components/recover.component.ts
+++ b/web/projects/setup-wizard/src/app/components/recover.component.ts
@@ -1,17 +1,14 @@
+import { TuiCell } from '@taiga-ui/layout'
+import { TuiIcon, TuiTitle } from '@taiga-ui/core'
 import { Component, Input } from '@angular/core'
 import { RouterModule } from '@angular/router'
-import {
-  TuiCellModule,
-  TuiIconModule,
-  TuiTitleModule,
-} from '@taiga-ui/experimental'

@Component({
  standalone: true,
  selector: 'app-recover',
  template: `
    <a tuiCell [routerLink]="disabled ? null : '/attach'">
-      <tui-icon icon="tuiIconBoxLarge" />
+      <tui-icon icon="@tui.box" />
      <span tuiTitle>
        <span class="g-success">Use Existing Drive</span>
        <span tuiSubtitle>
@@ -20,7 +17,7 @@ import {
      </span>
    </a>
    <a tuiCell [routerLink]="disabled ? null : '/transfer'">
-      <tui-icon icon="tuiIconShareLarge" />
+      <tui-icon icon="@tui.share" />
      <span tuiTitle>
        <span class="g-info">Transfer</span>
        <span tuiSubtitle>
@@ -30,14 +27,14 @@ import {
      </span>
    </a>
    <a tuiCell [routerLink]="disabled ? null : '/recover'">
-      <tui-icon icon="tuiIconSave" />
+      <tui-icon icon="@tui.save" />
      <span tuiTitle>
        <span class="g-warning">Restore From Backup (Disaster Recovery)</span>
        <span tuiSubtitle>Restore StartOS data from an encrypted backup</span>
      </span>
    </a>
  `,
-  imports: [RouterModule, TuiIconModule, TuiCellModule, TuiTitleModule],
+  imports: [RouterModule, TuiIcon, TuiCell, TuiTitle],
 })
 export class RecoverComponent {
  @Input() disabled = false
--- a/web/projects/setup-wizard/src/app/pages/attach.page.ts
+++ b/web/projects/setup-wizard/src/app/pages/attach.page.ts
@@ -7,12 +7,8 @@ import {
  LoadingService,
  toGuid,
 } from '@start9labs/shared'
-import { TuiDialogService, TuiLoaderModule } from '@taiga-ui/core'
-import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiCellModule,
-} from '@taiga-ui/experimental'
+import { TuiButton, TuiDialogService, TuiLoader } from '@taiga-ui/core'
+import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
 import { PASSWORD } from 'src/app/components/password.component'
 import { ApiService } from 'src/app/services/api.service'
 import { StateService } from 'src/app/services/state.service'
@@ -34,19 +30,13 @@ import { StateService } from 'src/app/services/state.service'
          valid StartOS data drive (not a backup) and is firmly connected, then
          refresh the page.
        }
-        <button tuiButton iconLeft="tuiIconRotateCwLarge" (click)="refresh()">
+        <button tuiButton iconStart="@tui.rotate-cw" (click)="refresh()">
          Refresh
        </button>
      }
    </section>
  `,
-  imports: [
-    TuiButtonModule,
-    TuiCardModule,
-    TuiCellModule,
-    TuiLoaderModule,
-    DriveComponent,
-  ],
+  imports: [TuiButton, TuiCardLarge, TuiCell, TuiLoader, DriveComponent],
 })
 export default class AttachPage {
  private readonly apiService = inject(ApiService)
--- a/web/projects/setup-wizard/src/app/pages/home.page.ts
+++ b/web/projects/setup-wizard/src/app/pages/home.page.ts
@@ -2,14 +2,8 @@ import { CommonModule } from '@angular/common'
 import { Component, inject, OnInit } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { ErrorService } from '@start9labs/shared'
-import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiCellModule,
-  TuiIconModule,
-  TuiIconsModule,
-  TuiTitleModule,
-} from '@taiga-ui/experimental'
+import { TuiButton, TuiIcon, TuiTitle } from '@taiga-ui/core'
+import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
 import { RecoverComponent } from 'src/app/components/recover.component'
 import { ApiService } from 'src/app/services/api.service'
 import { StateService } from 'src/app/services/state.service'
@@ -26,7 +20,7 @@ import { StateService } from 'src/app/services/state.service'
              tuiIconButton
              appearance="flat"
              class="back"
-              iconLeft="tuiIconChevronLeft"
+              iconStart="@tui.chevron-left"
              (click)="recover = false"
            >
              Back
@@ -37,7 +31,7 @@ import { StateService } from 'src/app/services/state.service'
        <div class="pages">
          <div class="options" [class.options_recover]="recover">
            <a tuiCell [routerLink]="error || recover ? null : '/storage'">
-              <tui-icon icon="tuiIconPlus" />
+              <tui-icon icon="@tui.plus" />
              <span tuiTitle>
                <span class="g-success">Start Fresh</span>
                <span tuiSubtitle>
@@ -50,7 +44,7 @@ import { StateService } from 'src/app/services/state.service'
              [disabled]="error || recover"
              (click)="recover = true"
            >
-              <tui-icon icon="tuiIconRotateCw" />
+              <tui-icon icon="@tui.rotate-cw" />
              <span tuiTitle>
                <span class="g-warning">Recover</span>
                <span tuiSubtitle>
@@ -111,12 +105,11 @@ import { StateService } from 'src/app/services/state.service'
  imports: [
    CommonModule,
    RouterModule,
-    TuiCardModule,
-    TuiButtonModule,
-    TuiIconsModule,
-    TuiCellModule,
-    TuiIconModule,
-    TuiTitleModule,
+    TuiCardLarge,
+    TuiButton,
+    TuiCell,
+    TuiIcon,
+    TuiTitle,
    RecoverComponent,
  ],
 })
--- a/web/projects/setup-wizard/src/app/pages/recover.page.ts
+++ b/web/projects/setup-wizard/src/app/pages/recover.page.ts
@@ -1,15 +1,15 @@
 import { Component, inject } from '@angular/core'
 import { Router } from '@angular/router'
 import { DriveComponent, ErrorService } from '@start9labs/shared'
-import { TuiDialogService, TuiLoaderModule } from '@taiga-ui/core'
 import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiCellModule,
-  TuiIconModule,
-  TuiTitleModule,
-} from '@taiga-ui/experimental'
-import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
+  TuiButton,
+  TuiDialogService,
+  TuiIcon,
+  TuiLoader,
+  TuiTitle,
+} from '@taiga-ui/core'
+import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
+import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { filter } from 'rxjs'
 import { CifsComponent } from 'src/app/components/cifs.component'
 import { PASSWORD } from 'src/app/components/password.component'
@@ -33,7 +33,7 @@ import { StateService } from 'src/app/services/state.service'
        to the same network as your server.

        <button tuiCell (click)="onCifs()">
-          <tui-icon icon="tuiIconFolder" />
+          <tui-icon icon="@tui.folder" />
          <span tuiTitle>Open</span>
        </button>

@@ -51,29 +51,29 @@ import { StateService } from 'src/app/services/state.service'
          <button tuiCell [drive]="d" [disabled]="empty(d)" (click)="select(d)">
            <span tuiSubtitle>
              @if (empty(d)) {
-                <tui-icon icon="tuiIconCloudOff" class="g-error" />
+                <tui-icon icon="@tui.cloud-off" class="g-error" />
                <strong>No StartOS backup</strong>
              } @else {
-                <tui-icon icon="tuiIconCloud" class="g-success" />
+                <tui-icon icon="@tui.cloud" class="g-success" />
                <strong>StartOS backup detected</strong>
              }
            </span>
          </button>
        }

-        <button tuiButton iconLeft="tuiIconRotateCwLarge" (click)="refresh()">
+        <button tuiButton iconStart="@tui.rotate-cw" (click)="refresh()">
          Refresh
        </button>
      }
    </section>
  `,
  imports: [
-    TuiCardModule,
-    TuiLoaderModule,
-    TuiButtonModule,
-    TuiCellModule,
-    TuiIconModule,
-    TuiTitleModule,
+    TuiCardLarge,
+    TuiLoader,
+    TuiButton,
+    TuiCell,
+    TuiIcon,
+    TuiTitle,
    DriveComponent,
  ],
 })
--- a/web/projects/setup-wizard/src/app/pages/storage.page.ts
+++ b/web/projects/setup-wizard/src/app/pages/storage.page.ts
@@ -7,13 +7,9 @@ import {
  LoadingService,
  toGuid,
 } from '@start9labs/shared'
-import { TuiDialogService, TuiLoaderModule } from '@taiga-ui/core'
-import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiCellModule,
-} from '@taiga-ui/experimental'
-import { TUI_PROMPT } from '@taiga-ui/kit'
+import { TuiButton, TuiDialogService, TuiLoader } from '@taiga-ui/core'
+import { TUI_CONFIRM } from '@taiga-ui/kit'
+import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
 import { filter, of, switchMap } from 'rxjs'
 import { PASSWORD } from 'src/app/components/password.component'
 import {
@@ -48,18 +44,12 @@ import { StateService } from 'src/app/services/state.service'
        </button>
      }

-      <button tuiButton iconLeft="tuiIconRotateCwLarge" (click)="getDrives()">
+      <button tuiButton iconStart="@tui.rotate-cw" (click)="getDrives()">
        Refresh
      </button>
    </section>
  `,
-  imports: [
-    TuiCardModule,
-    TuiLoaderModule,
-    TuiCellModule,
-    TuiButtonModule,
-    DriveComponent,
-  ],
+  imports: [TuiCardLarge, TuiLoader, TuiCell, TuiButton, DriveComponent],
 })
 export default class StoragePage {
  private readonly api = inject(ApiService)
@@ -125,7 +115,7 @@ export default class StoragePage {
        switchMap(unused =>
          unused
            ? of(true)
-            : this.dialogs.open(TUI_PROMPT, {
+            : this.dialogs.open(TUI_CONFIRM, {
                label: 'Warning',
                size: 's',
                data: {
--- a/web/projects/setup-wizard/src/app/pages/success.page.ts
+++ b/web/projects/setup-wizard/src/app/pages/success.page.ts
@@ -7,12 +7,8 @@ import {
  ViewChild,
 } from '@angular/core'
 import { DownloadHTMLService, ErrorService } from '@start9labs/shared'
-import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiIconModule,
-  TuiSurfaceModule,
-} from '@taiga-ui/experimental'
+import { TuiButton, TuiIcon, TuiSurface } from '@taiga-ui/core'
+import { TuiCardLarge } from '@taiga-ui/layout'
 import { DocumentationComponent } from 'src/app/components/documentation.component'
 import { MatrixComponent } from 'src/app/components/matrix.component'
 import { ApiService } from 'src/app/services/api.service'
@@ -25,17 +21,17 @@ import { StateService } from 'src/app/services/state.service'
    @if (isKiosk) {
      <section tuiCardLarge>
        <h1 class="heading">
-          <tui-icon icon="tuiIconCheckSquare" class="g-success" />
+          <tui-icon icon="@tui.check-square" class="g-success" />
          Setup Complete!
        </h1>
-        <button tuiButton (click)="exitKiosk()" iconRight="tuiIconLogInLarge">
+        <button tuiButton (click)="exitKiosk()" iconEnd="@tui.log-in">
          Continue to Login
        </button>
      </section>
    } @else if (lanAddress) {
      <section tuiCardLarge>
        <h1 class="heading">
-          <tui-icon icon="tuiIconCheckSquare" class="g-success" />
+          <tui-icon icon="@tui.check-square" class="g-success" />
          Setup Complete!
        </h1>
        @if (stateService.setupType === 'restore') {
@@ -51,7 +47,7 @@ import { StateService } from 'src/app/services/state.service'
          </span>
          <strong class="caps">
            Download
-            <tui-icon icon="tuiIconDownload" />
+            <tui-icon icon="@tui.download" />
          </strong>
        </button>

@@ -68,7 +64,7 @@ import { StateService } from 'src/app/services/state.service'
          </span>
          <strong class="caps">
            Open
-            <tui-icon icon="tuiIconExternalLink" />
+            <tui-icon icon="@tui.external-link" />
          </strong>
        </a>
        <app-documentation hidden [lanAddress]="lanAddress" />
@@ -93,7 +89,7 @@ import { StateService } from 'src/app/services/state.service'
    }

    [tuiCardLarge] {
-      color: var(--tui-text-01);
+      color: var(--tui-text-primary);
      text-decoration: none;
      text-align: center;
    }
@@ -104,10 +100,10 @@ import { StateService } from 'src/app/services/state.service'
    }
  `,
  imports: [
-    TuiCardModule,
-    TuiIconModule,
-    TuiButtonModule,
-    TuiSurfaceModule,
+    TuiCardLarge,
+    TuiIcon,
+    TuiButton,
+    TuiSurface,
    MatrixComponent,
    DocumentationComponent,
  ],
--- a/web/projects/setup-wizard/src/app/pages/transfer.page.ts
+++ b/web/projects/setup-wizard/src/app/pages/transfer.page.ts
@@ -7,16 +7,13 @@ import {
  toGuid,
 } from '@start9labs/shared'
 import {
+  TuiButton,
  TuiDialogOptions,
  TuiDialogService,
-  TuiLoaderModule,
+  TuiLoader,
 } from '@taiga-ui/core'
-import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiCellModule,
-} from '@taiga-ui/experimental'
-import { TUI_PROMPT, TuiPromptData } from '@taiga-ui/kit'
+import { TUI_CONFIRM, TuiConfirmData } from '@taiga-ui/kit'
+import { TuiCardLarge, TuiCell } from '@taiga-ui/layout'
 import { filter } from 'rxjs'
 import { ApiService } from 'src/app/services/api.service'
 import { StateService } from 'src/app/services/state.service'
@@ -33,18 +30,12 @@ import { StateService } from 'src/app/services/state.service'
      @for (drive of drives; track drive) {
        <button tuiCell [drive]="drive" (click)="select(drive)"></button>
      }
-      <button tuiButton iconLeft="tuiIconRotateCwLarge" (click)="refresh()">
+      <button tuiButton iconStart="@tui.rotate-cw" (click)="refresh()">
        Refresh
      </button>
    </section>
  `,
-  imports: [
-    TuiCardModule,
-    TuiCellModule,
-    TuiButtonModule,
-    TuiLoaderModule,
-    DriveComponent,
-  ],
+  imports: [TuiCardLarge, TuiCell, TuiButton, TuiLoader, DriveComponent],
 })
 export default class TransferPage {
  private readonly apiService = inject(ApiService)
@@ -81,7 +72,7 @@ export default class TransferPage {

  select(drive: DiskInfo) {
    this.dialogs
-      .open(TUI_PROMPT, OPTIONS)
+      .open(TUI_CONFIRM, OPTIONS)
      .pipe(filter(Boolean))
      .subscribe(() => {
        this.stateService.recoverySource = {
@@ -93,7 +84,7 @@ export default class TransferPage {
  }
 }

-const OPTIONS: Partial<TuiDialogOptions<TuiPromptData>> = {
+const OPTIONS: Partial<TuiDialogOptions<TuiConfirmData>> = {
  label: 'Warning',
  size: 's',
  data: {
--- a/web/projects/setup-wizard/src/styles.scss
+++ b/web/projects/setup-wizard/src/styles.scss
@@ -24,7 +24,7 @@ router-outlet + * {

  [tuiCardLarge] {
    width: 100%;
-    background: var(--tui-base-02);
+    background: var(--tui-background-base-alt);
    margin: auto;
  }
 }
@@ -43,7 +43,7 @@ header {

  p {
    font: var(--tui-font-text-m);
-    color: var(--tui-text-02);
+    color: var(--tui-text-secondary);
  }
 }

@@ -53,17 +53,17 @@ h2 {
 }

 .g-success {
-  color: var(--tui-success-fill);
+  color: var(--tui-status-positive);
 }

 .g-warning {
-  color: var(--tui-warning-fill);
+  color: var(--tui-status-warning);
 }

 .g-error {
-  color: var(--tui-error-fill);
+  color: var(--tui-status-negative);
 }

 .g-info {
-  color: var(--tui-info-fill);
+  color: var(--tui-status-info);
 }
--- a/web/projects/shared/assets/taiga-ui/icons/tuiIconBitcoinOutline.svg
+++ b/web/projects/shared/assets/taiga-ui/icons/tuiIconBitcoinOutline.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M410.47 279.2c-5-11.5-12.7-21.6-28.1-30.1a98.15 98.15 0 00-25.4-10 62.22 62.22 0 0016.3-11 56.37 56.37 0 0015.6-23.3 77.11 77.11 0 003.5-28.2c-1.1-16.8-4.4-33.1-13.2-44.8s-21.2-20.7-37.6-27c-12.6-4.8-25.5-7.8-45.5-8.9V32h-40v64h-32V32h-41v64H96v48h27.87c8.7 0 14.6.8 17.6 2.3a13.22 13.22 0 016.5 6c1.3 2.5 1.9 8.4 1.9 17.5V343c0 9-.6 14.8-1.9 17.4s-2 4.9-5.1 6.3-3.2 1.3-11.8 1.3h-26.4L96 416h87v64h41v-64h32v64h40v-64.4c26-1.3 44.5-4.7 59.4-10.3 19.3-7.2 34.1-17.7 44.7-31.5s14-34.9 14.93-51.2c.67-14.5-.03-33.2-4.56-43.4zM224 150h32v74h-32zm0 212v-90h32v90zm72-208.1c6 2.5 9.9 7.5 13.8 12.7 4.3 5.7 6.5 13.3 6.5 21.4 0 7.8-2.9 14.5-7.5 20.5-3.8 4.9-6.8 8.3-12.8 11.1zm28.8 186.7c-7.8 6.9-12.3 10.1-22.1 13.8a56.06 56.06 0 01-6.7 1.9v-82.8a40.74 40.74 0 0111.3 3.4c7.8 3.3 15.2 6.9 19.8 13.2a43.82 43.82 0 018 24.7c-.03 10.9-2.83 19.2-10.33 25.8z"/></svg>
--- a/web/projects/shared/assets/taiga-ui/icons/tuiIconCheckCircleOutline.svg
+++ b/web/projects/shared/assets/taiga-ui/icons/tuiIconCheckCircleOutline.svg
@@ -1,25 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" focusable="false" height="1em" width="1em">
-    <g id="tuiIconCheckCircle" xmlns="http://www.w3.org/2000/svg">
-        <svg x="50%" y="50%" fill="none" height="1em" overflow="visible" viewBox="0 0 16 16" width="1em">
-            <svg
-                x="-8"
-                y="-8"
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-            >
-                <path
-                    vector-effect="non-scaling-stroke"
-                    d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
-                />
-                <path vector-effect="non-scaling-stroke" d="M15.5 9.5l-4.5 5-2.5-2.273" />
-            </svg>
-        </svg>
-    </g>
-</svg>
--- a/web/projects/shared/assets/taiga-ui/icons/tuiIconRocketOutline.svg
+++ b/web/projects/shared/assets/taiga-ui/icons/tuiIconRocketOutline.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M461.81 53.81a4.4 4.4 0 00-3.3-3.39c-54.38-13.3-180 34.09-248.13 102.17a294.9 294.9 0 00-33.09 39.08c-21-1.9-42-.3-59.88 7.5-50.49 22.2-65.18 80.18-69.28 105.07a9 9 0 009.8 10.4l81.07-8.9a180.29 180.29 0 001.1 18.3 18.15 18.15 0 005.3 11.09l31.39 31.39a18.15 18.15 0 0011.1 5.3 179.91 179.91 0 0018.19 1.1l-8.89 81a9 9 0 0010.39 9.79c24.9-4 83-18.69 105.07-69.17 7.8-17.9 9.4-38.79 7.6-59.69a293.91 293.91 0 0039.19-33.09c68.38-68 115.47-190.86 102.37-247.95zM298.66 213.67a42.7 42.7 0 1160.38 0 42.65 42.65 0 01-60.38 0z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M109.64 352a45.06 45.06 0 00-26.35 12.84C65.67 382.52 64 448 64 448s65.52-1.67 83.15-19.31A44.73 44.73 0 00160 402.32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
--- a/web/projects/shared/package.json
+++ b/web/projects/shared/package.json
@@ -5,12 +5,12 @@
    "@angular/common": "^17.0.6",
    "@angular/core": "^17.0.6",
    "@angular/router": "^17.0.6",
-    "@ng-web-apis/mutation-observer": ">=2.0.0",
-    "@ng-web-apis/resize-observer": ">=2.0.0",
+    "@ng-web-apis/mutation-observer": ">=4.0.0",
+    "@ng-web-apis/resize-observer": ">=4.0.0",
    "@start9labs/emver": "^0.1.5",
-    "@taiga-ui/cdk": ">=3.0.0",
-    "@taiga-ui/core": ">=3.0.0",
-    "@taiga-ui/experimental": ">=3.0.0",
+    "@taiga-ui/cdk": "4.0.0-rc.5",
+    "@taiga-ui/core": "4.0.0-rc.5",
+    "@taiga-ui/experimental": "4.0.0-rc.5",
    "@tinkoff/ng-dompurify": ">=4.0.0",
    "ansi-to-html": "^0.7.2"
  },
--- a/web/projects/shared/src/components/drive.component.ts
+++ b/web/projects/shared/src/components/drive.component.ts
@@ -1,12 +1,12 @@
+import { TuiIcon, TuiTitle } from '@taiga-ui/core'
 import { Component, Input } from '@angular/core'
-import { TuiIconModule, TuiTitleModule } from '@taiga-ui/experimental'
 import { UnitConversionPipesModule } from '../pipes/unit-conversion/unit-conversion.module'

@Component({
  standalone: true,
  selector: 'button[drive]',
  template: `
-    <tui-icon icon="tuiIconSave" />
+    <tui-icon icon="@tui.save" />
    <span tuiTitle>
      <strong>{{ drive.logicalname }}</strong>
      <span tuiSubtitle>
@@ -17,7 +17,7 @@ import { UnitConversionPipesModule } from '../pipes/unit-conversion/unit-convers
      <ng-content />
    </span>
  `,
-  imports: [TuiIconModule, TuiTitleModule, UnitConversionPipesModule],
+  imports: [TuiIcon, TuiTitle, UnitConversionPipesModule],
 })
 export class DriveComponent {
  @Input() drive!: {
--- a/web/projects/shared/src/components/initializing/initializing.component.ts
+++ b/web/projects/shared/src/components/initializing/initializing.component.ts
@@ -1,3 +1,4 @@
+import { TuiLet } from '@taiga-ui/cdk'
 import { CommonModule } from '@angular/common'
 import {
  ChangeDetectionStrategy,
@@ -6,8 +7,7 @@ import {
  Input,
  Output,
 } from '@angular/core'
-import { TuiLetModule } from '@taiga-ui/cdk'
-import { TuiProgressModule } from '@taiga-ui/kit'
+import { TuiProgress } from '@taiga-ui/kit'
 import { delay, filter } from 'rxjs'
 import { LogsWindowComponent } from './logs-window.component'
 import { SetupService } from '../../services/setup.service'
@@ -44,7 +44,7 @@ import { SetupService } from '../../services/setup.service'
      /* TODO: Theme */
      background: #e0e0e0;
      color: #333;
-      --tui-clear-inverse: rgba(0, 0, 0, 0.1);
+      --tui-background-neutral-1: rgba(0, 0, 0, 0.1);
    }

    logs-window {
@@ -60,7 +60,7 @@ import { SetupService } from '../../services/setup.service'
      background: #181818;
    }
  `,
-  imports: [CommonModule, LogsWindowComponent, TuiLetModule, TuiProgressModule],
+  imports: [CommonModule, LogsWindowComponent, TuiLet, TuiProgress],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InitializingComponent {
--- a/web/projects/shared/src/components/initializing/logs-window.component.ts
+++ b/web/projects/shared/src/components/initializing/logs-window.component.ts
@@ -1,11 +1,11 @@
+import { TuiScrollbar } from '@taiga-ui/core'
 import { AsyncPipe } from '@angular/common'
 import { Component, ElementRef, inject } from '@angular/core'
 import {
-  IntersectionObserverModule,
+  WaIntersectionObserver,
  INTERSECTION_ROOT,
 } from '@ng-web-apis/intersection-observer'
-import { MutationObserverModule } from '@ng-web-apis/mutation-observer'
-import { TuiScrollbarModule } from '@taiga-ui/core'
+import { WaMutationObserver } from '@ng-web-apis/mutation-observer'
 import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
 import { SetupLogsService } from '../../services/setup-logs.service'

@@ -27,10 +27,10 @@ import { SetupLogsService } from '../../services/setup-logs.service'
  `,
  imports: [
    AsyncPipe,
-    MutationObserverModule,
-    IntersectionObserverModule,
+    WaMutationObserver,
+    WaIntersectionObserver,
    NgDompurifyModule,
-    TuiScrollbarModule,
+    TuiScrollbar,
  ],
  providers: [
    {
--- a/web/projects/shared/src/components/loading/loading.component.scss
+++ b/web/projects/shared/src/components/loading/loading.component.scss
@@ -1,17 +1,16 @@
@import '@taiga-ui/core/styles/taiga-ui-local';

 :host {
-  @include shadow(3);
-
  display: flex;
  align-items: center;
  max-width: 80%;
  margin: auto;
  padding: 1.5rem;
-  background: var(--tui-elevation-01);
+  background: var(--tui-background-elevation-1);
  border-radius: var(--tui-radius-m);
+  box-shadow: var(--tui-shadow-popup);

-  --tui-primary: var(--tui-warning-fill);
+  --tui-background-accent-1: var(--tui-status-warning);
 }

 tui-loader {
--- a/web/projects/shared/src/components/loading/loading.component.ts
+++ b/web/projects/shared/src/components/loading/loading.component.ts
@@ -1,15 +1,16 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { TuiLoader } from '@taiga-ui/core'
 import {
  POLYMORPHEUS_CONTEXT,
  PolymorpheusContent,
-} from '@tinkoff/ng-polymorpheus'
+} from '@taiga-ui/polymorpheus'

@Component({
-  template: `
-    <tui-loader [textContent]="content"></tui-loader>
-  `,
+  standalone: true,
+  template: '<tui-loader [textContent]="content" />',
  styleUrls: ['./loading.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TuiLoader],
 })
 export class LoadingComponent {
  readonly content: PolymorpheusContent =
--- a/web/projects/shared/src/components/loading/loading.module.ts
+++ b/web/projects/shared/src/components/loading/loading.module.ts
@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core'
-import { TuiLoaderModule } from '@taiga-ui/core'
-import { tuiAsDialog } from '@taiga-ui/cdk'
-import { LoadingComponent } from './loading.component'
-import { LoadingService } from './loading.service'
-
-@NgModule({
-  imports: [TuiLoaderModule],
-  declarations: [LoadingComponent],
-  exports: [LoadingComponent],
-  providers: [tuiAsDialog(LoadingService)],
-})
-export class LoadingModule {}
--- a/web/projects/shared/src/components/loading/loading.service.ts
+++ b/web/projects/shared/src/components/loading/loading.service.ts
@@ -1,10 +1,11 @@
+import { TuiPopoverService } from '@taiga-ui/cdk'
 import { Injectable } from '@angular/core'
-import { AbstractTuiDialogService } from '@taiga-ui/cdk'
-import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
+import { TUI_DIALOGS } from '@taiga-ui/core'
+
 import { LoadingComponent } from './loading.component'

-@Injectable({ providedIn: `root` })
-export class LoadingService extends AbstractTuiDialogService<unknown> {
-  protected readonly component = new PolymorpheusComponent(LoadingComponent)
-  protected readonly defaultOptions = {}
-}
+@Injectable({
+  providedIn: `root`,
+  useFactory: () => new LoadingService(TUI_DIALOGS, LoadingComponent),
+})
+export class LoadingService extends TuiPopoverService<unknown> {}
--- a/web/projects/shared/src/components/markdown/markdown.component.module.ts
+++ b/web/projects/shared/src/components/markdown/markdown.component.module.ts
@@ -1,10 +1,10 @@
-import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { TuiLoaderModule, TuiNotificationModule } from '@taiga-ui/core'
+import { NgModule } from '@angular/core'
+import { TuiLoader, TuiNotification } from '@taiga-ui/core'
 import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
+import { SafeLinksDirective } from '../../directives/safe-links.directive'

 import { MarkdownPipeModule } from '../../pipes/markdown/markdown.module'
-import { SafeLinksDirective } from '../../directives/safe-links.directive'
 import { MarkdownComponent } from './markdown.component'

@NgModule({
@@ -14,8 +14,8 @@ import { MarkdownComponent } from './markdown.component'
    MarkdownPipeModule,
    SafeLinksDirective,
    NgDompurifyModule,
-    TuiLoaderModule,
-    TuiNotificationModule,
+    TuiLoader,
+    TuiNotification,
  ],
  exports: [MarkdownComponent],
 })
--- a/web/projects/shared/src/components/markdown/markdown.component.ts
+++ b/web/projects/shared/src/components/markdown/markdown.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject } from '@angular/core'
 import { TuiDialogContext } from '@taiga-ui/core'
-import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { POLYMORPHEUS_CONTEXT } from '@taiga-ui/polymorpheus'
 import {
  catchError,
  ignoreElements,
--- a/web/projects/shared/src/components/ticker/ticker.component.ts
+++ b/web/projects/shared/src/components/ticker/ticker.component.ts
@@ -8,7 +8,7 @@ import {

@Component({
  selector: '[ticker]',
-  template: '<ng-content></ng-content>',
+  template: '<ng-content />',
  styleUrls: ['./ticker.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
--- a/web/projects/shared/src/public-api.ts
+++ b/web/projects/shared/src/public-api.ts
@@ -8,7 +8,6 @@ export * from './classes/rpc-error'
 export * from './components/initializing/logs-window.component'
 export * from './components/initializing/initializing.component'
 export * from './components/loading/loading.component'
-export * from './components/loading/loading.module'
 export * from './components/loading/loading.service'
 export * from './components/markdown/markdown.component'
 export * from './components/markdown/markdown.component.module'
--- a/web/projects/shared/src/services/error.service.ts
+++ b/web/projects/shared/src/services/error.service.ts
@@ -1,5 +1,5 @@
 import { ErrorHandler, inject, Injectable } from '@angular/core'
-import { TuiAlertService, TuiNotification } from '@taiga-ui/core'
+import { TuiAlertService } from '@taiga-ui/core'
 import { HttpError } from '../classes/http-error'

 // TODO: Enable this as ErrorHandler
@@ -15,8 +15,7 @@ export class ErrorService extends ErrorHandler {
    this.alerts
      .open(getErrorMessage(error, link), {
        label: 'Error',
-        autoClose: false,
-        status: TuiNotification.Error,
+        status: 'error',
      })
      .subscribe()
  }
--- a/web/projects/shared/styles/taiga.scss
+++ b/web/projects/shared/styles/taiga.scss
@@ -1,40 +1,40 @@
@import '@taiga-ui/core/styles/taiga-ui-local';

 :root {
-  --tui-primary: #3880ff;
-  --tui-primary-hover: #4c8dff;
-  --tui-primary-active: #3171e0;
+  --tui-background-accent-1: #3880ff;
+  --tui-background-accent-1-hover: #4c8dff;
+  --tui-background-accent-1-pressed: #3171e0;
 }

 /* stylelint-disable order/order */
 [tuiAppearance][data-appearance='secondary-warning'] {
-  background: var(--tui-warning-bg);
-  color: var(--tui-text-01);
+  background: var(--tui-status-warning-pale);
+  color: var(--tui-text-primary);

  @include appearance-hover {
-    background: var(--tui-warning-bg-hover);
+    background: var(--tui-status-warning-pale-hover);
  }

  @include appearance-active {
-    background: var(--tui-warning-bg-hover);
+    background: var(--tui-status-warning-pale-hover);
  }
 }

 [tuiAppearance][data-appearance='icon-success'] {
-  color: var(--tui-success-fill);
+  color: var(--tui-status-positive);
 }

 [tuiAppearance][data-appearance='icon-warning'] {
-  color: var(--tui-warning-fill);
+  color: var(--tui-status-warning);
 }

 [tuiAppearance][data-appearance='icon-error'] {
-  color: var(--tui-error-fill);
+  color: var(--tui-status-negative);
 }

 [tuiAppearance][data-appearance='flat'],
 [tuiAppearance][data-appearance='outline'] {
-  color: var(--tui-text-01);
+  color: var(--tui-text-primary);
 }

 [tuiAppearance][data-appearance='primary'] {
@@ -134,7 +134,7 @@
  }
 }

-[tuiWrapper][data-appearance='input-file'] {
+[tuiAppearance][data-appearance='input-file'] {
  &:hover,
  &:active {
    background: transparent !important;
@@ -150,7 +150,7 @@ tui-dialog {
 }

 tui-opt-group[data-label^='⚠️']::before {
-  color: var(--tui-warning-fill);
+  color: var(--tui-status-warning);
 }

 tui-hint[data-appearance='onDark'] {
@@ -159,10 +159,10 @@ tui-hint[data-appearance='onDark'] {
 }

 [tuiLink] {
-  color: var(--tui-link) !important;
+  color: var(--tui-text-action) !important;

  &:hover {
-    color: var(--tui-link-hover) !important;
+    color: var(--tui-text-action-hover) !important;
  }
 }

@@ -172,7 +172,7 @@ tui-hint[data-appearance='onDark'] {
  border-radius: 10rem;

  &._focused::after {
-    color: var(--tui-primary);
+    color: var(--tui-background-accent-1);
  }
 }

@@ -182,12 +182,12 @@ tui-dropdown[data-appearance='start-os'][data-appearance='start-os'] {
  backdrop-filter: blur(0.25rem);
  box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%);
  border-radius: 0.325rem;
-  // TODO: Replace --tui-elevation-02 when Taiga UI is updated
+  // TODO: Replace --tui-background-elevation-2 when Taiga UI is updated
  background: rgb(63 63 63 / 80%);

  tui-opt-group {
    &::before {
-      background: var(--tui-clear);
+      background: var(--tui-background-neutral-1);
      height: 1px;
    }

--- a/web/projects/ui/src/app/app.component.html
+++ b/web/projects/ui/src/app/app.component.html
@@ -1,18 +1,6 @@
 <svg-definitions />
-<!--TODO: Theme-->
-<tui-root tuiTheme="night" tuiMode="onDark" [class.offline]="offline$ | async">
+<tui-root tuiTheme="dark" [class.offline]="offline$ | async">
  <router-outlet />
  <toast-container />
  <sidebar-host ngProjectAs="tuiOverContent" />
 </tui-root>
-
-<!--TODO: Theme-->
-@if (auth.isVerified$ | async) {
-  @switch (theme$ | async) {
-    @case ('Dark') {
-      <tui-theme-night />
-    }
-  }
-} @else {
-  <tui-theme-night />
-}
--- a/web/projects/ui/src/app/app.module.ts
+++ b/web/projects/ui/src/app/app.module.ts
@@ -2,15 +2,7 @@ import { HttpClientModule } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { ServiceWorkerModule } from '@angular/service-worker'
-import { LoadingModule } from '@start9labs/shared'
-import { TuiSheetDialogModule } from '@taiga-ui/addon-mobile'
-import {
-  TuiAlertModule,
-  TuiDialogModule,
-  TuiModeModule,
-  TuiRootModule,
-  TuiThemeNightModule,
-} from '@taiga-ui/core'
+import { TuiRoot } from '@taiga-ui/core'
 import { SidebarHostComponent } from 'src/app/components/sidebar-host.component'
 import { SvgDefinitionsComponent } from 'src/app/components/svg-definitions.component'
 import { ToastContainerComponent } from 'src/app/components/toast-container.component'
@@ -26,19 +18,13 @@ import { RoutingModule } from './routing.module'
    BrowserAnimationsModule,
    RoutingModule,
    ToastContainerComponent,
-    TuiRootModule,
-    TuiDialogModule,
-    TuiSheetDialogModule,
-    TuiAlertModule,
-    TuiModeModule,
-    TuiThemeNightModule,
+    TuiRoot,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.useServiceWorker,
      // Register the ServiceWorker as soon as the application is stable
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000',
    }),
-    LoadingModule,
    SidebarHostComponent,
    SvgDefinitionsComponent,
  ],
--- a/web/projects/ui/src/app/app.providers.ts
+++ b/web/projects/ui/src/app/app.providers.ts
@@ -7,17 +7,18 @@ import {
  FilterPackagesPipe,
 } from '@start9labs/marketplace'
 import { RELATIVE_URL, THEME, WorkspaceConfig } from '@start9labs/shared'
-import { TUI_DATE_FORMAT, TUI_DATE_SEPARATOR } from '@taiga-ui/cdk'
 import {
+  TUI_DATE_FORMAT,
+  tuiButtonOptionsProvider,
  tuiDropdownOptionsProvider,
  tuiNumberFormatProvider,
-  tuiTextfieldOptionsProvider,
 } from '@taiga-ui/core'
-import { tuiButtonOptionsProvider } from '@taiga-ui/experimental'
+import { NG_EVENT_PLUGINS } from '@taiga-ui/event-plugins'
 import {
  TUI_DATE_TIME_VALUE_TRANSFORMER,
  TUI_DATE_VALUE_TRANSFORMER,
 } from '@taiga-ui/kit'
+import { tuiTextfieldOptionsProvider } from '@taiga-ui/legacy'
 import { PATCH_DB_PROVIDERS } from 'src/app/services/patch-db/patch-db.providers'
 import { ApiService } from './services/api/embassy-api.service'
 import { LiveApiService } from './services/api/embassy-live-api.service'
@@ -37,6 +38,7 @@ const {

 export const APP_PROVIDERS: Provider[] = [
  PATCH_DB_PROVIDERS,
+  NG_EVENT_PLUGINS,
  FilterPackagesPipe,
  UntypedFormBuilder,
  tuiNumberFormatProvider({ decimalSeparator: '.', thousandSeparator: '' }),
@@ -45,11 +47,10 @@ export const APP_PROVIDERS: Provider[] = [
  tuiDropdownOptionsProvider({ appearance: 'start-os' }),
  {
    provide: TUI_DATE_FORMAT,
-    useValue: 'MDY',
-  },
-  {
-    provide: TUI_DATE_SEPARATOR,
-    useValue: '/',
+    useValue: {
+      mode: 'MDY',
+      separator: '/',
+    },
  },
  {
    provide: TUI_DATE_VALUE_TRANSFORMER,
--- a/web/projects/ui/src/app/components/notifications-toast.component.ts
+++ b/web/projects/ui/src/app/components/notifications-toast.component.ts
@@ -1,9 +1,9 @@
 import { AsyncPipe } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { RouterLink } from '@angular/router'
-import { TuiAlertModule } from '@taiga-ui/core'
+import { TuiAlert } from '@taiga-ui/core'
 import { PatchDB } from 'patch-db-client'
-import { Observable, Subject, merge, pairwise, map, endWith } from 'rxjs'
+import { endWith, map, merge, Observable, pairwise, Subject } from 'rxjs'
 import { DataModel } from 'src/app/services/patch-db/data-model'

@Component({
@@ -20,7 +20,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
    </ng-template>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiAlertModule, RouterLink, AsyncPipe],
+  imports: [TuiAlert, RouterLink, AsyncPipe],
 })
 export class NotificationsToastComponent {
  private readonly dismiss$ = new Subject<boolean>()
--- a/web/projects/ui/src/app/components/refresh-alert.component.ts
+++ b/web/projects/ui/src/app/components/refresh-alert.component.ts
@@ -2,9 +2,8 @@ import { AsyncPipe } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { SwUpdate } from '@angular/service-worker'
 import { Emver, LoadingService } from '@start9labs/shared'
-import { TuiAutoFocusModule } from '@taiga-ui/cdk'
-import { TuiDialogModule } from '@taiga-ui/core'
-import { TuiButtonModule } from '@taiga-ui/experimental'
+import { TuiAutoFocus } from '@taiga-ui/cdk'
+import { TuiButton, TuiDialog } from '@taiga-ui/core'
 import { PatchDB } from 'patch-db-client'
 import { debounceTime, endWith, map, merge, Subject } from 'rxjs'
 import { ConfigService } from 'src/app/services/config.service'
@@ -43,7 +42,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
    <!--    </ng-template>-->
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiDialogModule, AsyncPipe, TuiButtonModule, TuiAutoFocusModule],
+  imports: [TuiDialog, AsyncPipe, TuiButton, TuiAutoFocus],
 })
 export class RefreshAlertComponent {
  private readonly updates = inject(SwUpdate)
--- a/web/projects/ui/src/app/components/report.component.ts
+++ b/web/projects/ui/src/app/components/report.component.ts
@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { TuiDialogContext, TuiSvgModule } from '@taiga-ui/core'
+import { TuiDialogContext, TuiIcon } from '@taiga-ui/core'
 import {
  POLYMORPHEUS_CONTEXT,
  PolymorpheusComponent,
-} from '@tinkoff/ng-polymorpheus'
+} from '@taiga-ui/polymorpheus'
 import { BackupReport } from 'src/app/services/api/api.types'

@Component({
@@ -15,7 +15,7 @@ import { BackupReport } from 'src/app/services/api/api.types'
        <strong>System data</strong>
        <div [style.color]="system.color">{{ system.result }}</div>
      </div>
-      <tui-svg [src]="system.icon" [style.color]="system.color"></tui-svg>
+      <tui-icon [icon]="system.icon" [style.color]="system.color" />
    </div>
    <div *ngFor="let pkg of report?.packages | keyvalue" class="g-action">
      <div [style.flex]="1">
@@ -24,15 +24,15 @@ import { BackupReport } from 'src/app/services/api/api.types'
          {{ pkg.value.error ? 'Failed: ' + pkg.value.error : 'Succeeded' }}
        </div>
      </div>
-      <tui-svg
-        [src]="getIcon(pkg.value.error)"
+      <tui-icon
+        [icon]="getIcon(pkg.value.error)"
        [style.color]="getColor(pkg.value.error)"
-      ></tui-svg>
+      />
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
-  imports: [CommonModule, TuiSvgModule],
+  imports: [CommonModule, TuiIcon],
 })
 export class BackupsReportModal {
  private readonly context =
@@ -51,34 +51,34 @@ export class BackupsReportModal {
  }

  getColor(error: unknown) {
-    return error ? 'var(--tui-negative)' : 'var(--tui-positive)'
+    return error ? 'var(--tui-text-negative)' : 'var(--tui-text-positive)'
  }

  getIcon(error: unknown) {
-    return error ? 'tuiIconMinusCircleLarge' : 'tuiIconCheckLarge'
+    return error ? '@tui.circle-minus' : '@tui.check'
  }

  private getSystem() {
    if (!this.report.server.attempted) {
      return {
        result: 'Not Attempted',
-        icon: 'tuiIconMinusLarge',
-        color: 'var(--tui-text-02)',
+        icon: '@tui.minus',
+        color: 'var(--tui-text-secondary)',
      }
    }

    if (this.report.server.error) {
      return {
        result: `Failed: ${this.report.server.error}`,
-        icon: 'tuiIconMinusCircleLarge',
-        color: 'var(--tui-negative)',
+        icon: '@tui.circle-minus',
+        color: 'var(--tui-text-negative)',
      }
    }

    return {
      result: 'Succeeded',
-      icon: 'tuiIconCheckLarge',
-      color: 'var(--tui-positive)',
+      icon: '@tui.check',
+      color: 'var(--tui-text-positive)',
    }
  }
 }
--- a/web/projects/ui/src/app/components/sidebar-host.component.ts
+++ b/web/projects/ui/src/app/components/sidebar-host.component.ts
@@ -1,24 +1,19 @@
+import { TuiDropdownService } from '@taiga-ui/core'
 import {
  ChangeDetectionStrategy,
  Component,
  Directive,
  Injectable,
 } from '@angular/core'
-import {
-  AbstractTuiPortalHostComponent,
-  AbstractTuiPortalService,
-  TuiDropdownPortalService,
-} from '@taiga-ui/cdk'
+import { TuiPortals, TuiPortalService } from '@taiga-ui/cdk'

@Injectable({ providedIn: `root` })
-export class SidebarService extends AbstractTuiPortalService {}
+export class SidebarService extends TuiPortalService {}

@Directive({
  selector: '[tuiSidebar]',
  standalone: true,
-  providers: [
-    { provide: TuiDropdownPortalService, useExisting: SidebarService },
-  ],
+  providers: [{ provide: TuiDropdownService, useExisting: SidebarService }],
 })
 export class SidebarDirective {}

@@ -28,8 +23,6 @@ export class SidebarDirective {}
  styles: [':host { position: fixed; top: 0; }'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
-  providers: [
-    { provide: AbstractTuiPortalService, useExisting: SidebarService },
-  ],
+  providers: [{ provide: TuiPortalService, useExisting: SidebarService }],
 })
-export class SidebarHostComponent extends AbstractTuiPortalHostComponent {}
+export class SidebarHostComponent extends TuiPortals {}
--- a/web/projects/ui/src/app/components/update-toast.component.ts
+++ b/web/projects/ui/src/app/components/update-toast.component.ts
@@ -1,8 +1,7 @@
 import { AsyncPipe } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { ErrorService, LoadingService } from '@start9labs/shared'
-import { TuiAlertModule } from '@taiga-ui/core'
-import { TuiButtonModule } from '@taiga-ui/experimental'
+import { TuiAlert, TuiButton } from '@taiga-ui/core'
 import { PatchDB } from 'patch-db-client'
 import {
  distinctUntilChanged,
@@ -24,7 +23,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
      [tuiAlertOptions]="{
        label: 'StartOS download complete!',
        status: 'success',
-        autoClose: false
+        autoClose: 0
      }"
      (tuiAlertChange)="onDismiss()"
    >
@@ -44,7 +43,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
    </ng-template>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiButtonModule, TuiAlertModule, AsyncPipe],
+  imports: [TuiButton, TuiAlert, AsyncPipe],
 })
 export class UpdateToastComponent {
  private readonly api = inject(ApiService)
--- a/web/projects/ui/src/app/components/welcome.component.ts
+++ b/web/projects/ui/src/app/components/welcome.component.ts
@@ -1,7 +1,6 @@
 import { Component, inject, Inject } from '@angular/core'
-import { TuiDialogContext } from '@taiga-ui/core'
-import { TuiButtonModule } from '@taiga-ui/experimental'
-import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { TuiDialogContext, TuiButton } from '@taiga-ui/core'
+import { POLYMORPHEUS_CONTEXT } from '@taiga-ui/polymorpheus'

@Component({
  standalone: true,
@@ -42,7 +41,7 @@ import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
    </p>
  `,
  styles: 'li { margin-bottom: 0.5rem }',
-  imports: [TuiButtonModule],
+  imports: [TuiButton],
 })
 export class WelcomeComponent {
  readonly context = inject<TuiDialogContext>(POLYMORPHEUS_CONTEXT)
--- a/web/projects/ui/src/app/routes/diagnostic/home/home.module.ts
+++ b/web/projects/ui/src/app/routes/diagnostic/home/home.module.ts
@@ -1,7 +1,7 @@
+import { TuiButton } from '@taiga-ui/core'
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { RouterModule, Routes } from '@angular/router'
-import { TuiButtonModule } from '@taiga-ui/experimental'
 import { HomePage } from './home.page'

 const ROUTES: Routes = [
@@ -12,7 +12,7 @@ const ROUTES: Routes = [
 ]

@NgModule({
-  imports: [CommonModule, TuiButtonModule, RouterModule.forChild(ROUTES)],
+  imports: [CommonModule, TuiButton, RouterModule.forChild(ROUTES)],
  declarations: [HomePage],
 })
 export class HomePageModule {}
--- a/web/projects/ui/src/app/routes/diagnostic/home/home.page.scss
+++ b/web/projects/ui/src/app/routes/diagnostic/home/home.page.scss
@@ -2,7 +2,7 @@
  display: block;
  padding: 2rem;
  overflow: auto;
-  background: var(--tui-base-01);
+  background: var(--tui-background-base);
 }

 .title {
@@ -20,14 +20,14 @@

 .code {
  display: block;
-  color: var(--tui-success-fill);
+  color: var(--tui-status-positive);
  background: rgb(69, 69, 69);
  padding: 1px 1rem;
  margin-bottom: 2rem;
 }

 .warning {
-  color: var(--tui-warning-fill);
+  color: var(--tui-status-warning);
 }

 .buttons {
--- a/web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
+++ b/web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
@@ -1,8 +1,8 @@
+import { TUI_CONFIRM } from '@taiga-ui/kit'
 import { Component, Inject } from '@angular/core'
 import { WINDOW } from '@ng-web-apis/common'
 import { LoadingService } from '@start9labs/shared'
 import { TuiDialogService } from '@taiga-ui/core'
-import { TUI_PROMPT } from '@taiga-ui/kit'
 import { filter } from 'rxjs'
 import { DiagnosticService } from '../services/diagnostic.service'

@@ -118,7 +118,7 @@ export class HomePage {

  async presentAlertSystemRebuild() {
    this.dialogs
-      .open(TUI_PROMPT, {
+      .open(TUI_CONFIRM, {
        label: 'Warning',
        size: 's',
        data: {
@@ -140,7 +140,7 @@ export class HomePage {

  async presentAlertRepairDisk() {
    this.dialogs
-      .open(TUI_PROMPT, {
+      .open(TUI_CONFIRM, {
        label: 'Warning',
        size: 's',
        data: {
--- a/web/projects/ui/src/app/routes/diagnostic/logs/logs.module.ts
+++ b/web/projects/ui/src/app/routes/diagnostic/logs/logs.module.ts
@@ -1,10 +1,10 @@
-import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { Routes, RouterModule } from '@angular/router'
-import { IntersectionObserverModule } from '@ng-web-apis/intersection-observer'
-import { MutationObserverModule } from '@ng-web-apis/mutation-observer'
-import { TuiLoaderModule, TuiScrollbarModule } from '@taiga-ui/core'
-import { TuiBadgeModule, TuiButtonModule } from '@taiga-ui/experimental'
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { WaIntersectionObserver } from '@ng-web-apis/intersection-observer'
+import { WaMutationObserver } from '@ng-web-apis/mutation-observer'
+import { TuiButton, TuiLoader, TuiScrollbar } from '@taiga-ui/core'
+import { TuiBadge } from '@taiga-ui/kit'
 import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
 import { LogsPage } from './logs.page'

@@ -19,13 +19,13 @@ const ROUTES: Routes = [
  imports: [
    CommonModule,
    RouterModule.forChild(ROUTES),
-    IntersectionObserverModule,
-    MutationObserverModule,
+    ...WaIntersectionObserver,
+    WaMutationObserver,
    NgDompurifyModule,
-    TuiBadgeModule,
-    TuiButtonModule,
-    TuiLoaderModule,
-    TuiScrollbarModule,
+    TuiBadge,
+    TuiButton,
+    TuiLoader,
+    TuiScrollbar,
  ],
  declarations: [LogsPage],
 })
--- a/web/projects/ui/src/app/routes/diagnostic/logs/logs.page.html
+++ b/web/projects/ui/src/app/routes/diagnostic/logs/logs.page.html
@@ -1,7 +1,7 @@
 <a
  routerLink="../"
  tuiButton
-  iconLeft="tuiIconChevronLeft"
+  iconStart="@tui.chevron-left"
  appearance="icon"
  [style.align-self]="'flex-start'"
 >
--- a/web/projects/ui/src/app/routes/diagnostic/logs/logs.page.ts
+++ b/web/projects/ui/src/app/routes/diagnostic/logs/logs.page.ts
@@ -1,7 +1,7 @@
 import { Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core'
 import { INTERSECTION_ROOT } from '@ng-web-apis/intersection-observer'
 import { convertAnsi, ErrorService } from '@start9labs/shared'
-import { TuiScrollbarComponent } from '@taiga-ui/core'
+import { TuiScrollbar } from '@taiga-ui/core'
 import { DiagnosticService } from 'src/app/routes/diagnostic/services/diagnostic.service'

@Component({
@@ -15,7 +15,7 @@ import { DiagnosticService } from 'src/app/routes/diagnostic/services/diagnostic
      justify-content: flex-start;
      padding: 1rem;
      gap: 1rem;
-      background: var(--tui-base-01);
+      background: var(--tui-background-base);
    }
  `,
  providers: [
@@ -26,7 +26,7 @@ import { DiagnosticService } from 'src/app/routes/diagnostic/services/diagnostic
  ],
 })
 export class LogsPage implements OnInit {
-  @ViewChild(TuiScrollbarComponent, { read: ElementRef })
+  @ViewChild(TuiScrollbar, { read: ElementRef })
  private readonly scrollbar?: ElementRef<HTMLElement>
  private readonly api = inject(DiagnosticService)
  private readonly errorService = inject(ErrorService)
--- a/web/projects/ui/src/app/routes/login/ca-wizard/ca-wizard.component.html
+++ b/web/projects/ui/src/app/routes/login/ca-wizard/ca-wizard.component.html
@@ -4,7 +4,7 @@
  tuiSurface="elevated"
  class="card"
 >
-  <tui-icon icon="tuiIconLock" [style.font-size.rem]="4" />
+  <tui-icon icon="@tui.lock" [style.font-size.rem]="4" />
  <h1>Trust Your Root CA</h1>
  <p>
    Download and trust your server's Root Certificate Authority to establish a
@@ -29,7 +29,7 @@
        tuiButton
        size="s"
        appearance="tertiary-solid"
-        iconRight="tuiIconDownload"
+        iconEnd="@tui.download"
        href="/eos/local.crt"
      >
        Download
@@ -47,7 +47,7 @@
        href="https://docs.start9.com/0.3.5.x/user-manual/trust-ca"
        target="_blank"
        rel="noreferrer"
-        iconRight="tuiIconExternalLink"
+        iconEnd="@tui.external-link"
      >
        View Instructions
      </a>
@@ -62,7 +62,7 @@
        size="s"
        class="refresh"
        appearance="success-solid"
-        iconRight="tuiIconRefreshCw"
+        iconEnd="@tui.refresh-cw"
        (click)="refresh()"
      >
        Refresh
@@ -73,7 +73,7 @@
    tuiButton
    size="s"
    appearance="flat"
-    iconRight="tuiIconExternalLink"
+    iconEnd="@tui.external-link"
    (click)="launchHttps()"
    [disabled]="caTrusted"
  >
@@ -85,7 +85,7 @@
 <ng-template #trusted>
  <div tuiCardLarge tuiSurface="elevated" class="card">
    <tui-icon
-      icon="tuiIconShield"
+      icon="@tui.shield"
      tuiAppearance="icon-success"
      [style.font-size.rem]="4"
    />
@@ -97,7 +97,7 @@
    <button
      tuiButton
      appearance="tertiary-solid"
-      iconRight="tuiIconExternalLink"
+      iconEnd="@tui.external-link"
      (click)="launchHttps()"
    >
      Go to login
--- a/web/projects/ui/src/app/routes/login/ca-wizard/ca-wizard.component.ts
+++ b/web/projects/ui/src/app/routes/login/ca-wizard/ca-wizard.component.ts
@@ -1,13 +1,8 @@
 import { CommonModule, DOCUMENT } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { RELATIVE_URL } from '@start9labs/shared'
-import {
-  TuiAppearanceModule,
-  TuiButtonModule,
-  TuiCardModule,
-  TuiIconModule,
-  TuiSurfaceModule,
-} from '@taiga-ui/experimental'
+import { TuiAppearance, TuiButton, TuiIcon, TuiSurface } from '@taiga-ui/core'
+import { TuiCardLarge } from '@taiga-ui/layout'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ConfigService } from 'src/app/services/config.service'

@@ -18,11 +13,11 @@ import { ConfigService } from 'src/app/services/config.service'
  styleUrls: ['./ca-wizard.component.scss'],
  imports: [
    CommonModule,
-    TuiIconModule,
-    TuiButtonModule,
-    TuiAppearanceModule,
-    TuiCardModule,
-    TuiSurfaceModule,
+    TuiIcon,
+    TuiButton,
+    TuiAppearance,
+    TuiCardLarge,
+    TuiSurface,
  ],
 })
 export class CAWizardComponent {
--- a/web/projects/ui/src/app/routes/login/login.module.ts
+++ b/web/projects/ui/src/app/routes/login/login.module.ts
@@ -2,13 +2,12 @@ import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { RouterModule, Routes } from '@angular/router'
-import { TuiErrorModule, TuiTextfieldControllerModule } from '@taiga-ui/core'
+import { TuiButton, TuiError } from '@taiga-ui/core'
+import { TuiCardLarge } from '@taiga-ui/layout'
 import {
-  TuiButtonModule,
-  TuiCardModule,
-  TuiSurfaceModule,
-} from '@taiga-ui/experimental'
-import { TuiInputPasswordModule } from '@taiga-ui/kit'
+  TuiInputPasswordModule,
+  TuiTextfieldControllerModule,
+} from '@taiga-ui/legacy'
 import { CAWizardComponent } from './ca-wizard/ca-wizard.component'
 import { LoginPage } from './login.page'

@@ -24,12 +23,11 @@ const routes: Routes = [
    CommonModule,
    FormsModule,
    CAWizardComponent,
-    TuiButtonModule,
-    TuiCardModule,
-    TuiSurfaceModule,
+    TuiButton,
+    TuiCardLarge,
    TuiInputPasswordModule,
    TuiTextfieldControllerModule,
-    TuiErrorModule,
+    TuiError,
    RouterModule.forChild(routes),
  ],
  declarations: [LoginPage],
--- a/web/projects/ui/src/app/routes/login/login.page.html
+++ b/web/projects/ui/src/app/routes/login/login.page.html
@@ -3,12 +3,12 @@

 <!-- not Local HTTP -->
 <ng-template #notLanHttp>
-  <div tuiCardLarge tuiSurface="elevated" class="card">
+  <div tuiCardLarge class="card">
    <img alt="StartOS Icon" class="logo" src="assets/img/icon.png" />
    <h1 class="header">Login to StartOS</h1>
    <form (submit)="submit()">
      <tui-input-password
-        tuiTextfieldIconLeft="tuiIconKeyLarge"
+        tuiTextfieldIconLeft="@tui.key"
        [ngModelOptions]="{ standalone: true }"
        [(ngModel)]="password"
        (ngModelChange)="error = ''"
--- a/web/projects/ui/src/app/routes/login/login.page.scss
+++ b/web/projects/ui/src/app/routes/login/login.page.scss
@@ -1,15 +1,13 @@
@import '@taiga-ui/core/styles/taiga-ui-local';

-:host {
-  background: var(--tui-base-02);
-}
-
 .card {
  @include center-all();
  overflow: visible;
  align-items: center;
  text-align: center;
  width: max(33%, 20rem);
+  background: var(--tui-background-base-alt);
+  box-shadow: var(--tui-shadow-small);
 }

 .logo {
--- a/web/projects/ui/src/app/routes/login/login.page.ts
+++ b/web/projects/ui/src/app/routes/login/login.page.ts
@@ -1,10 +1,10 @@
-import { Component, Inject } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { Component, Inject, DestroyRef, inject } from '@angular/core'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { AuthService } from 'src/app/services/auth.service'
 import { Router } from '@angular/router'
 import { ConfigService } from 'src/app/services/config.service'
 import { LoadingService } from '@start9labs/shared'
-import { TuiDestroyService } from '@taiga-ui/cdk'
 import { takeUntil } from 'rxjs'
 import { DOCUMENT } from '@angular/common'

@@ -12,14 +12,13 @@ import { DOCUMENT } from '@angular/common'
  selector: 'login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
-  providers: [TuiDestroyService],
+  providers: [],
 })
 export class LoginPage {
  password = ''
  error = ''

  constructor(
-    private readonly destroy$: TuiDestroyService,
    private readonly router: Router,
    private readonly authService: AuthService,
    private readonly loader: LoadingService,
@@ -33,7 +32,7 @@ export class LoginPage {

    const loader = this.loader
      .open('Logging in...')
-      .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe()

    try {
@@ -58,4 +57,6 @@ export class LoginPage {
      loader.unsubscribe()
    }
  }
+
+  readonly destroyRef = inject(DestroyRef)
 }
--- a/web/projects/ui/src/app/routes/portal/components/actions.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/actions.component.ts
@@ -1,7 +1,6 @@
+import { TuiDataList, TuiIcon } from '@taiga-ui/core'
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { TuiDataListModule } from '@taiga-ui/core'
-import { TuiIconModule } from '@taiga-ui/experimental'

 export interface Action {
  icon: string
@@ -52,7 +51,7 @@ export interface Action {
  ],
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiDataListModule, CommonModule, TuiIconModule],
+  imports: [TuiDataList, CommonModule, TuiIcon],
 })
 export class ActionsComponent {
  @Input()
--- a/web/projects/ui/src/app/routes/portal/components/form.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/form.component.ts
@@ -1,3 +1,4 @@
+import { TuiConfirmService } from '@taiga-ui/kit'
 import { CommonModule } from '@angular/common'
 import {
  ChangeDetectionStrategy,
@@ -12,12 +13,10 @@ import { CT } from '@start9labs/start-sdk'

 import {
  tuiMarkControlAsTouchedAndValidate,
-  TuiValueChangesModule,
+  TuiValueChanges,
 } from '@taiga-ui/cdk'
-import { TuiDialogContext, TuiModeModule } from '@taiga-ui/core'
-import { TuiButtonModule } from '@taiga-ui/experimental'
-import { TuiDialogFormService } from '@taiga-ui/kit'
-import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { TuiDialogContext, TuiButton } from '@taiga-ui/core'
+import { POLYMORPHEUS_CONTEXT } from '@taiga-ui/polymorpheus'
 import { compare, Operation } from 'fast-json-patch'
 import { FormModule } from 'src/app/routes/portal/components/form/form.module'
 import { InvalidService } from 'src/app/routes/portal/components/form/invalid.service'
@@ -47,7 +46,7 @@ export interface FormContext<T> {
      (tuiValueChanges)="markAsDirty()"
    >
      <form-group [spec]="spec" />
-      <footer tuiMode="onDark">
+      <footer>
        <ng-content />
        <ng-container *ngFor="let button of buttons; let last = last">
          <button
@@ -84,8 +83,8 @@ export interface FormContext<T> {
        padding: 1rem 0;
        margin: 1rem 0 -1rem;
        gap: 1rem;
-        background: var(--tui-elevation-01);
-        border-top: 1px solid var(--tui-base-02);
+        background: var(--tui-background-elevation-1);
+        border-top: 1px solid var(--tui-background-base-alt);
      }
    `,
  ],
@@ -93,16 +92,15 @@ export interface FormContext<T> {
    CommonModule,
    ReactiveFormsModule,
    RouterModule,
-    TuiValueChangesModule,
-    TuiButtonModule,
-    TuiModeModule,
+    TuiValueChanges,
+    TuiButton,
    FormModule,
  ],
  providers: [InvalidService],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FormComponent<T extends Record<string, any>> implements OnInit {
-  private readonly dialogFormService = inject(TuiDialogFormService)
+  private readonly dialogFormService = inject(TuiConfirmService)
  private readonly formService = inject(FormService)
  private readonly invalidService = inject(InvalidService)
  private readonly context = inject<TuiDialogContext<void, FormContext<T>>>(
--- a/web/projects/ui/src/app/routes/portal/components/form/form-array/form-array.component.html
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-array/form-array.component.html
@@ -1,9 +1,9 @@
 <div class="label">
  {{ spec.name }}
-  <tui-tooltip
+  <tui-icon
    *ngIf="spec.description || spec.disabled"
-    [content]="spec | hint"
-  ></tui-tooltip>
+    [tuiTooltip]="spec | hint"
+  />
  <button
    tuiLink
    type="button"
@@ -48,7 +48,7 @@
      tuiIconButton
      type="button"
      class="remove"
-      iconLeft="tuiIconTrash"
+      iconStart="@tui.trash"
      appearance="icon"
      size="m"
      title="Remove"
--- a/web/projects/ui/src/app/routes/portal/components/form/form-array/form-array.component.scss
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-array/form-array.component.scss
@@ -35,7 +35,7 @@
    height: 1px;
    left: 3rem;
    right: 1rem;
-    background: var(--tui-clear);
+    background: var(--tui-background-neutral-1);
  }
 }

--- a/web/projects/ui/src/app/routes/portal/components/form/form-array/form-array.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-array/form-array.component.ts
@@ -1,15 +1,23 @@
-import { Component, HostBinding, inject, Input } from '@angular/core'
-import { AbstractControl, FormArrayName } from '@angular/forms'
-import { TUI_PARENT_STOP, TuiDestroyService } from '@taiga-ui/cdk'
 import {
-  TUI_ANIMATION_OPTIONS,
+  Component,
+  DestroyRef,
+  HostBinding,
+  inject,
+  Input,
+} from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { AbstractControl, FormArrayName } from '@angular/forms'
+import { CT } from '@start9labs/start-sdk'
+import {
+  TUI_ANIMATIONS_SPEED,
  TuiDialogService,
  tuiFadeIn,
  tuiHeightCollapse,
+  tuiParentStop,
+  tuiToAnimationOptions,
 } from '@taiga-ui/core'
-import { TUI_PROMPT } from '@taiga-ui/kit'
-import { CT } from '@start9labs/start-sdk'
-import { filter, takeUntil } from 'rxjs'
+import { TUI_CONFIRM } from '@taiga-ui/kit'
+import { filter } from 'rxjs'
 import { FormService } from 'src/app/services/form.service'
 import { ERRORS } from '../form-group/form-group.component'

@@ -17,15 +25,15 @@ import { ERRORS } from '../form-group/form-group.component'
  selector: 'form-array',
  templateUrl: './form-array.component.html',
  styleUrls: ['./form-array.component.scss'],
-  animations: [tuiFadeIn, tuiHeightCollapse, TUI_PARENT_STOP],
-  providers: [TuiDestroyService],
+  animations: [tuiFadeIn, tuiHeightCollapse, tuiParentStop],
+  providers: [],
 })
 export class FormArrayComponent {
  @Input({ required: true })
  spec!: CT.ValueSpecList

  @HostBinding('@tuiParentStop')
-  readonly animation = { value: '', ...inject(TUI_ANIMATION_OPTIONS) }
+  readonly animation = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED))
  readonly order = ERRORS
  readonly array = inject(FormArrayName)
  readonly open = new Map<AbstractControl, boolean>()
@@ -33,7 +41,6 @@ export class FormArrayComponent {
  private warned = false
  private readonly formService = inject(FormService)
  private readonly dialogs = inject(TuiDialogService)
-  private readonly destroy$ = inject(TuiDestroyService)

  get canAdd(): boolean {
    return (
@@ -46,12 +53,12 @@ export class FormArrayComponent {
  add() {
    if (!this.warned && this.spec.warning) {
      this.dialogs
-        .open<boolean>(TUI_PROMPT, {
+        .open<boolean>(TUI_CONFIRM, {
          label: 'Warning',
          size: 's',
          data: { content: this.spec.warning, yes: 'Ok', no: 'Cancel' },
        })
-        .pipe(filter(Boolean), takeUntil(this.destroy$))
+        .pipe(filter(Boolean), takeUntilDestroyed(this.destroyRef))
        .subscribe(() => {
          this.addItem()
        })
@@ -64,7 +71,7 @@ export class FormArrayComponent {

  removeAt(index: number) {
    this.dialogs
-      .open<boolean>(TUI_PROMPT, {
+      .open<boolean>(TUI_CONFIRM, {
        label: 'Confirm',
        size: 's',
        data: {
@@ -73,7 +80,7 @@ export class FormArrayComponent {
          no: 'Cancel',
        },
      })
-      .pipe(filter(Boolean), takeUntil(this.destroy$))
+      .pipe(filter(Boolean), takeUntilDestroyed(this.destroyRef))
      .subscribe(() => {
        this.removeItem(index)
      })
@@ -88,4 +95,6 @@ export class FormArrayComponent {
    this.array.control.insert(0, this.formService.getListItem(this.spec))
    this.open.set(this.array.control.at(0), true)
  }
+
+  readonly destroyRef = inject(DestroyRef)
 }
--- a/web/projects/ui/src/app/routes/portal/components/form/form-color/form-color.component.html
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-color/form-color.component.html
@@ -22,11 +22,6 @@
      [(ngModel)]="value"
      (click.stop)="(0)"
    />
-    <tui-svg
-      src="tuiIconPaintLarge"
-      tuiWrapper
-      appearance="icon"
-      class="icon"
-    ></tui-svg>
+    <tui-icon icon="@tui.paint" tuiAppearance="icon" class="icon" />
  </div>
 </ng-template>
--- a/web/projects/ui/src/app/routes/portal/components/form/form-control/form-control.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-control/form-control.component.ts
@@ -6,14 +6,11 @@ import {
  TemplateRef,
  ViewChild,
 } from '@angular/core'
-import { AbstractTuiNullableControl } from '@taiga-ui/cdk'
-import {
-  TuiAlertService,
-  TuiDialogContext,
-  TuiNotification,
-} from '@taiga-ui/core'
-import { filter, takeUntil } from 'rxjs'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { CT } from '@start9labs/start-sdk'
+import { TuiAlertService, TuiDialogContext } from '@taiga-ui/core'
+import { AbstractTuiNullableControl } from '@taiga-ui/legacy'
+import { filter } from 'rxjs'
 import { ERRORS } from '../form-group/form-group.component'
 import { FORM_CONTROL_PROVIDERS } from './form-control.providers'

@@ -55,11 +52,11 @@ export class FormControlComponent<
      this.alerts
        .open<boolean>(this.warning, {
          label: 'Warning',
-          status: TuiNotification.Warning,
-          hasCloseButton: false,
-          autoClose: false,
+          status: 'warning',
+          closeable: false,
+          autoClose: 0,
        })
-        .pipe(filter(Boolean), takeUntil(this.destroy$))
+        .pipe(filter(Boolean), takeUntilDestroyed(this.destroyRef))
        .subscribe(() => {
          this.value = previous
        })
--- a/web/projects/ui/src/app/routes/portal/components/form/form-file/form-file.component.html
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-file/form-file.component.html
@@ -1,31 +1,33 @@
-<tui-input-files
-  [pseudoInvalid]="invalid"
-  [(ngModel)]="value"
-  (focusedChange)="onFocus($event)"
->
-  <input tuiInputFiles [accept]="spec.extensions.join(',')" />
+<label tuiInputFiles [(ngModel)]="value">
+  <input
+    tuiInputFiles
+    [invalid]="invalid"
+    [accept]="spec.extensions.join(',')"
+    (blur)="onFocus(false)"
+  />
  <ng-template let-drop>
    <div class="template" [class.template_hidden]="drop">
      <div class="label">
        {{ spec.name }}
-        <span *ngIf="spec.required">*</span>
-        <tui-tooltip
-          *ngIf="spec.description"
-          [content]="spec.description"
-        ></tui-tooltip>
+        @if (spec.required) {
+          <span>*</span>
+        }
+        @if (spec.description) {
+          <tui-icon [tuiTooltip]="spec.description" />
+        }
      </div>
-      <tui-tag
-        *ngIf="value; else label"
-        class="file"
-        size="l"
-        [value]="value.name"
-        [removable]="true"
-        (edited)="value = null"
-      ></tui-tag>
-      <ng-template #label>
+      @if (value) {
+        <tui-tag
+          class="file"
+          size="l"
+          [value]="value.name"
+          [removable]="true"
+          (edited)="value = null"
+        />
+      } @else {
        <small>Click or drop file here</small>
-      </ng-template>
+      }
    </div>
    <div class="drop" [class.drop_hidden]="!drop">Drop file here</div>
  </ng-template>
-</tui-input-files>
+</label>
--- a/web/projects/ui/src/app/routes/portal/components/form/form-file/form-file.component.scss
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-file/form-file.component.scss
@@ -36,7 +36,7 @@
 small {
  max-width: 50%;
  font-weight: normal;
-  color: var(--tui-text-02);
+  color: var(--tui-text-secondary);
  margin-left: auto;
 }

--- a/web/projects/ui/src/app/routes/portal/components/form/form-group/form-group.component.html
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-group/form-group.component.html
@@ -1,6 +1,5 @@
 <ng-container
  *ngFor="let entry of spec | keyvalue: asIsOrder"
-  tuiMode="onDark"
  [ngSwitch]="entry.value.type"
  [tuiTextfieldCleaner]="true"
 >
--- a/web/projects/ui/src/app/routes/portal/components/form/form-group/form-group.component.scss
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-group/form-group.component.scss
@@ -10,7 +10,7 @@ form-group .g-form-group {
  &::after {
    content: '';
    position: absolute;
-    background: var(--tui-clear);
+    background: var(--tui-background-neutral-1);
  }

  &::before {
--- a/web/projects/ui/src/app/routes/portal/components/form/form-group/form-group.providers.ts
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-group/form-group.providers.ts
@@ -1,11 +1,8 @@
 import { Provider, SkipSelf } from '@angular/core'
-import {
-  TUI_ARROW_MODE,
-  tuiInputDateOptionsProvider,
-  tuiInputTimeOptionsProvider,
-} from '@taiga-ui/kit'
-import { TUI_DEFAULT_ERROR_MESSAGE } from '@taiga-ui/core'
 import { ControlContainer } from '@angular/forms'
+import { TUI_DEFAULT_ERROR_MESSAGE } from '@taiga-ui/core'
+import { tuiInputDateOptionsProvider } from '@taiga-ui/kit'
+import { TUI_ARROW_MODE, tuiInputTimeOptionsProvider } from '@taiga-ui/legacy'
 import { identity, of } from 'rxjs'

 export const FORM_GROUP_PROVIDERS: Provider[] = [
--- a/web/projects/ui/src/app/routes/portal/components/form/form-number/form-number.component.html
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-number/form-number.component.html
@@ -4,8 +4,10 @@
  [readOnly]="readOnly"
  [tuiTextfieldPostfix]="spec.units || ''"
  [pseudoInvalid]="invalid"
-  [precision]="Infinity"
-  [decimal]="spec.integer ? 'never' : 'not-zero'"
+  [tuiNumberFormat]="{
+    precision: spec.integer ? 0 : Infinity,
+    decimalMode: 'not-zero'
+  }"
  [min]="spec.min ?? -Infinity"
  [max]="spec.max ?? Infinity"
  [step]="spec.step || 0"
@@ -14,5 +16,5 @@
 >
  {{ spec.name }}
  <span *ngIf="spec.required">*</span>
-  <input tuiTextfield [placeholder]="spec.placeholder || ''" />
+  <input tuiTextfieldLegacy [placeholder]="spec.placeholder || ''" />
 </tui-input-number>
--- a/web/projects/ui/src/app/routes/portal/components/form/form-object/form-object.component.html
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-object/form-object.component.html
@@ -2,24 +2,22 @@
  <button
    tuiIconButton
    size="s"
-    iconLeft="tuiIconChevronDown"
+    iconStart="@tui.chevron-down"
    type="button"
    class="button"
    [class.button_open]="open"
    [style.border-radius.%]="100"
    [appearance]="invalid ? 'danger-solid' : 'secondary'"
  ></button>
-  <ng-content></ng-content>
+  <ng-content />
  {{ spec.name }}
-  <tui-tooltip
-    *ngIf="spec.description"
-    [content]="spec.description"
-    (click.stop)="(0)"
-  ></tui-tooltip>
+  @if (spec.description) {
+    <tui-icon [tuiTooltip]="spec.description" (click.stop)="(0)" />
+  }
 </h3>

 <tui-expand class="expand" [expanded]="open">
  <div class="g-form-group" [class.g-form-group_invalid]="invalid">
-    <form-group [spec]="spec.spec"></form-group>
+    <form-group [spec]="spec.spec" />
  </div>
 </tui-expand>
--- a/web/projects/ui/src/app/routes/portal/components/form/form-object/form-object.component.scss
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-object/form-object.component.scss
@@ -36,6 +36,6 @@

  &_invalid::before,
  &_invalid::after {
-    background: var(--tui-error-bg);
+    background: var(--tui-status-negative-pale);
  }
 }
--- a/web/projects/ui/src/app/routes/portal/components/form/form-text/form-text.component.html
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-text/form-text.component.html
@@ -10,7 +10,7 @@
  {{ spec.name }}
  <span *ngIf="spec.required">*</span>
  <input
-    tuiTextfield
+    tuiTextfieldLegacy
    [class.masked]="spec.masked && masked"
    [placeholder]="spec.placeholder || ''"
    [attr.minLength]="spec.minLength"
@@ -27,7 +27,7 @@
    title="Generate"
    size="xs"
    class="button"
-    iconLeft="tuiIconRefreshCcw"
+    iconStart="@tui.refresh-ccw"
    (click)="generate()"
  ></button>
  <button
@@ -38,7 +38,7 @@
    title="Toggle masking"
    size="xs"
    class="button"
-    [iconLeft]="masked ? 'tuiIconEye' : 'tuiIconEyeOff'"
+    [iconStart]="masked ? '@tui.eye' : '@tui.eye-off'"
    (click)="masked = !masked"
  ></button>
 </ng-template>
--- a/web/projects/ui/src/app/routes/portal/components/form/form-textarea/form-textarea.component.html
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-textarea/form-textarea.component.html
@@ -1,4 +1,4 @@
-<tui-text-area
+<tui-textarea
  [tuiHintContent]="spec | hint"
  [disabled]="!!spec.disabled"
  [readOnly]="readOnly"
@@ -11,5 +11,8 @@
 >
  {{ spec.name }}
  <span *ngIf="spec.required">*</span>
-  <textarea tuiTextfield [placeholder]="spec.placeholder || ''"></textarea>
-</tui-text-area>
+  <textarea
+    tuiTextfieldLegacy
+    [placeholder]="spec.placeholder || ''"
+  ></textarea>
+</tui-textarea>
--- a/web/projects/ui/src/app/routes/portal/components/form/form-toggle/form-toggle.component.html
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-toggle/form-toggle.component.html
@@ -1,11 +1,12 @@
 {{ spec.name }}
-<tui-tooltip
-  *ngIf="spec.description || spec.disabled"
-  [tuiHintContent]="spec | hint"
-></tui-tooltip>
-<tui-toggle
-  size="l"
+@if (spec.description || spec.disabled) {
+  <tui-icon [tuiTooltip]="spec | hint" />
+}
+<input
+  tuiSwitch
+  type="checkbox"
+  size="m"
  [disabled]="!!spec.disabled || readOnly"
  [(ngModel)]="value"
-  (focusedChange)="onFocus($event)"
-></tui-toggle>
+  (blur)="onFocus(false)"
+/>
--- a/web/projects/ui/src/app/routes/portal/components/form/form.module.ts
+++ b/web/projects/ui/src/app/routes/portal/components/form/form.module.ts
@@ -1,54 +1,55 @@
-import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MaskitoModule } from '@maskito/angular'
-import { TuiMapperPipeModule, TuiValueChangesModule } from '@taiga-ui/cdk'
+import { TuiMapperPipe, TuiValueChanges } from '@taiga-ui/cdk'
 import {
-  TuiErrorModule,
-  TuiExpandModule,
-  TuiHintModule,
-  TuiLinkModule,
-  TuiModeModule,
-  TuiSvgModule,
-  TuiTextfieldControllerModule,
-  TuiTooltipModule,
-  TuiWrapperModule,
+  TuiAppearance,
+  TuiButton,
+  TuiError,
+  TuiExpand,
+  TuiHint,
+  TuiIcon,
+  TuiLink,
+  TuiNumberFormat,
 } from '@taiga-ui/core'
-import { TuiButtonModule } from '@taiga-ui/experimental'
 import {
-  TuiElasticContainerModule,
-  TuiFieldErrorPipeModule,
+  TuiElasticContainer,
+  TuiFieldErrorPipe,
+  TuiFiles,
+  TuiSwitch,
+  TuiTooltip,
+} from '@taiga-ui/kit'
+import {
  TuiInputDateModule,
  TuiInputDateTimeModule,
-  TuiInputFilesModule,
  TuiInputModule,
  TuiInputNumberModule,
  TuiInputTimeModule,
  TuiMultiSelectModule,
-  TuiPromptModule,
  TuiSelectModule,
  TuiTagModule,
-  TuiTextAreaModule,
-  TuiToggleModule,
-} from '@taiga-ui/kit'
+  TuiTextareaModule,
+  TuiTextfieldControllerModule,
+} from '@taiga-ui/legacy'
+import { ControlDirective } from './control.directive'
+import { FormArrayComponent } from './form-array/form-array.component'
+import { FormColorComponent } from './form-color/form-color.component'
+import { FormControlComponent } from './form-control/form-control.component'
+import { FormDatetimeComponent } from './form-datetime/form-datetime.component'
+import { FormFileComponent } from './form-file/form-file.component'

 import { FormGroupComponent } from './form-group/form-group.component'
-import { FormTextComponent } from './form-text/form-text.component'
-import { FormToggleComponent } from './form-toggle/form-toggle.component'
-import { FormTextareaComponent } from './form-textarea/form-textarea.component'
-import { FormNumberComponent } from './form-number/form-number.component'
-import { FormSelectComponent } from './form-select/form-select.component'
-import { FormFileComponent } from './form-file/form-file.component'
 import { FormMultiselectComponent } from './form-multiselect/form-multiselect.component'
-import { FormUnionComponent } from './form-union/form-union.component'
+import { FormNumberComponent } from './form-number/form-number.component'
 import { FormObjectComponent } from './form-object/form-object.component'
-import { FormArrayComponent } from './form-array/form-array.component'
-import { FormControlComponent } from './form-control/form-control.component'
-import { MustachePipe } from './mustache.pipe'
-import { ControlDirective } from './control.directive'
-import { FormColorComponent } from './form-color/form-color.component'
-import { FormDatetimeComponent } from './form-datetime/form-datetime.component'
+import { FormSelectComponent } from './form-select/form-select.component'
+import { FormTextComponent } from './form-text/form-text.component'
+import { FormTextareaComponent } from './form-textarea/form-textarea.component'
+import { FormToggleComponent } from './form-toggle/form-toggle.component'
+import { FormUnionComponent } from './form-union/form-union.component'
 import { HintPipe } from './hint.pipe'
+import { MustachePipe } from './mustache.pipe'

@NgModule({
  imports: [
@@ -57,31 +58,30 @@ import { HintPipe } from './hint.pipe'
    ReactiveFormsModule,
    TuiInputModule,
    TuiInputNumberModule,
-    TuiInputFilesModule,
-    TuiTextAreaModule,
+    ...TuiFiles,
+    TuiTextareaModule,
    TuiSelectModule,
    TuiMultiSelectModule,
-    TuiToggleModule,
-    TuiTooltipModule,
-    TuiHintModule,
-    TuiModeModule,
+    TuiSwitch,
+    TuiTooltip,
+    ...TuiHint,
    TuiTagModule,
-    TuiButtonModule,
-    TuiExpandModule,
+    TuiButton,
+    ...TuiExpand,
    TuiTextfieldControllerModule,
-    TuiLinkModule,
-    TuiPromptModule,
-    TuiErrorModule,
-    TuiFieldErrorPipeModule,
-    TuiValueChangesModule,
-    TuiElasticContainerModule,
+    TuiLink,
+    TuiError,
+    TuiFieldErrorPipe,
+    TuiValueChanges,
+    TuiElasticContainer,
    MaskitoModule,
-    TuiSvgModule,
-    TuiWrapperModule,
    TuiInputDateModule,
    TuiInputTimeModule,
    TuiInputDateTimeModule,
-    TuiMapperPipeModule,
+    TuiMapperPipe,
+    TuiAppearance,
+    TuiIcon,
+    TuiNumberFormat,
  ],
  declarations: [
    FormGroupComponent,
--- a/web/projects/ui/src/app/routes/portal/components/header/about.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/header/about.component.ts
@@ -1,12 +1,9 @@
+import { TuiCell } from '@taiga-ui/layout'
+import { TuiTitle, TuiButton } from '@taiga-ui/core'
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { CopyService, EmverPipesModule } from '@start9labs/shared'
-import {
-  TuiButtonModule,
-  TuiCellModule,
-  TuiTitleModule,
-} from '@taiga-ui/experimental'
-import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
+import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { PatchDB } from 'patch-db-client'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 import { ConfigService } from 'src/app/services/config.service'
@@ -28,7 +25,7 @@ import { ConfigService } from 'src/app/services/config.service'
        <button
          tuiIconButton
          appearance="icon"
-          iconLeft="tuiIconCopy"
+          iconStart="@tui.copy"
          (click)="copyService.copy(gitHash)"
        >
          Copy
@@ -42,7 +39,7 @@ import { ConfigService } from 'src/app/services/config.service'
        <button
          tuiIconButton
          appearance="icon"
-          iconLeft="tuiIconCopy"
+          iconStart="@tui.copy"
          (click)="copyService.copy(server.caFingerprint)"
        >
          Copy
@@ -53,13 +50,7 @@ import { ConfigService } from 'src/app/services/config.service'
  styles: ['[tuiCell] { padding-inline: 0 }'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
-  imports: [
-    CommonModule,
-    EmverPipesModule,
-    TuiTitleModule,
-    TuiButtonModule,
-    TuiCellModule,
-  ],
+  imports: [CommonModule, EmverPipesModule, TuiTitle, TuiButton, TuiCell],
 })
 export class AboutComponent {
  readonly server$ = inject(PatchDB<DataModel>).watch$('serverInfo')
--- a/web/projects/ui/src/app/routes/portal/components/header/breadcrumb.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/header/breadcrumb.component.ts
@@ -5,19 +5,21 @@ import {
  inject,
  Input,
 } from '@angular/core'
-import { Breadcrumb } from 'src/app/services/breadcrumbs.service'
-import { TuiIconModule, TuiTitleModule } from '@taiga-ui/experimental'
 import {
-  TUI_ANIMATION_OPTIONS,
+  TUI_ANIMATIONS_SPEED,
  tuiFadeIn,
+  TuiIcon,
+  TuiTitle,
+  tuiToAnimationOptions,
  tuiWidthCollapse,
 } from '@taiga-ui/core'
+import { Breadcrumb } from 'src/app/services/breadcrumbs.service'

@Component({
  standalone: true,
  selector: 'a[headerBreadcrumb]',
  template: `
-    @if (item.icon?.startsWith('tuiIcon')) {
+    @if (item.icon?.startsWith('@tui.')) {
      <tui-icon [icon]="item.icon || ''" />
    } @else if (item.icon) {
      <img [style.width.rem]="2" [src]="item.icon" [alt]="item.title" />
@@ -78,7 +80,7 @@ import {
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiIconModule, TuiTitleModule],
+  imports: [TuiIcon, TuiTitle],
  animations: [tuiWidthCollapse, tuiFadeIn],
 })
 export class HeaderBreadcrumbComponent {
@@ -87,5 +89,5 @@ export class HeaderBreadcrumbComponent {

  @HostBinding('@tuiFadeIn')
  @HostBinding('@tuiWidthCollapse')
-  readonly animation = inject(TUI_ANIMATION_OPTIONS)
+  readonly animation = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED))
 }
--- a/web/projects/ui/src/app/routes/portal/components/header/connection.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/header/connection.component.ts
@@ -1,6 +1,6 @@
+import { TuiIcon } from '@taiga-ui/core'
 import { AsyncPipe } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { TuiIconModule } from '@taiga-ui/experimental'
 import { PatchDB } from 'patch-db-client'
 import { combineLatest, map, Observable, startWith } from 'rxjs'
 import { ConnectionService } from 'src/app/services/connection.service'
@@ -38,7 +38,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiIconModule, AsyncPipe],
+  imports: [TuiIcon, AsyncPipe],
 })
 export class HeaderConnectionComponent {
  readonly connection$: Observable<{
@@ -57,36 +57,36 @@ export class HeaderConnectionComponent {
      if (!network)
        return {
          message: 'No Internet',
-          color: 'var(--tui-error-fill)',
-          icon: 'tuiIconCloudOff',
+          color: 'var(--tui-status-negative)',
+          icon: '@tui.cloud-off',
          status: 'error',
        }
      if (!websocket)
        return {
          message: 'Connecting',
-          color: 'var(--tui-warning-fill)',
-          icon: 'tuiIconCloudOff',
+          color: 'var(--tui-status-warning)',
+          icon: '@tui.cloud-off',
          status: 'warning',
        }
      if (status.shuttingDown)
        return {
          message: 'Shutting Down',
-          color: 'var(--tui-neutral-fill)',
-          icon: 'tuiIconPower',
+          color: 'var(--tui-status-neutral)',
+          icon: '@tui.power',
          status: 'neutral',
        }
      if (status.restarting)
        return {
          message: 'Restarting',
-          color: 'var(--tui-neutral-fill)',
-          icon: 'tuiIconPower',
+          color: 'var(--tui-status-neutral)',
+          icon: '@tui.power',
          status: 'neutral',
        }

      return {
        message: 'Connected',
-        color: 'var(--tui-success-fill)',
-        icon: 'tuiIconCloud',
+        color: 'var(--tui-status-positive)',
+        icon: '@tui.cloud',
        status: 'success',
      }
    }),
--- a/web/projects/ui/src/app/routes/portal/components/header/corner.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/header/corner.component.ts
@@ -1,18 +1,16 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { RouterLink } from '@angular/router'
-import { TuiSidebarModule } from '@taiga-ui/addon-mobile'
-import { TuiLetModule } from '@taiga-ui/cdk'
+import { TuiSidebar } from '@taiga-ui/addon-mobile'
+import { TuiLet } from '@taiga-ui/cdk'
 import {
-  TUI_ANIMATION_OPTIONS,
+  TUI_ANIMATIONS_SPEED,
+  TuiButton,
  tuiFadeIn,
  tuiScaleIn,
+  tuiToAnimationOptions,
  tuiWidthCollapse,
 } from '@taiga-ui/core'
-import {
-  TuiBadgedContentModule,
-  TuiBadgeNotificationModule,
-  TuiButtonModule,
-} from '@taiga-ui/experimental'
+import { TuiBadgedContent, TuiBadgeNotification } from '@taiga-ui/kit'
 import { SidebarDirective } from 'src/app/components/sidebar-host.component'
 import { getMenu } from 'src/app/utils/system-utilities'
 import { HeaderMenuComponent } from './menu.component'
@@ -37,9 +35,9 @@ import { HeaderMenuComponent } from './menu.component'
            tuiIconButton
            appearance="icon"
            size="s"
-            [iconLeft]="item.icon"
+            [iconStart]="item.icon"
            [routerLink]="item.routerLink"
-            [style.color]="'var(--tui-text-01)'"
+            [style.color]="'var(--tui-text-primary)'"
          >
            {{ item.name }}
          </a>
@@ -68,15 +66,15 @@ import { HeaderMenuComponent } from './menu.component'
  imports: [
    HeaderMenuComponent,
    SidebarDirective,
-    TuiBadgeNotificationModule,
-    TuiBadgedContentModule,
-    TuiButtonModule,
-    TuiLetModule,
-    TuiSidebarModule,
+    TuiBadgeNotification,
+    TuiBadgedContent,
+    TuiButton,
+    TuiLet,
+    TuiSidebar,
    RouterLink,
  ],
 })
 export class HeaderCornerComponent {
-  readonly animation = inject(TUI_ANIMATION_OPTIONS)
+  readonly animation = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED))
  readonly utils = getMenu()
 }
--- a/web/projects/ui/src/app/routes/portal/components/header/header.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/header/header.component.ts
@@ -72,26 +72,26 @@ import { BreadcrumbsService } from 'src/app/services/breadcrumbs.service'
        }

        &:has([data-connection='error']) {
-          --status: var(--tui-error-fill);
+          --status: var(--tui-status-negative);
        }

        &:has([data-connection='warning']) {
-          --status: var(--tui-warning-fill);
+          --status: var(--tui-status-warning);
        }

        &:has([data-connection='neutral']) {
-          --status: var(--tui-neutral-fill);
+          --status: var(--tui-status-neutral);
        }

        &:has([data-connection='success']) {
-          --status: var(--tui-success-fill);
+          --status: var(--tui-status-positive);
        }
      }

      header-connection .plaque::before {
        box-shadow:
          inset 0 1px rgba(255, 255, 255, 0.25),
-          inset 0 -0.25rem var(--tui-success-fill);
+          inset 0 -0.25rem var(--tui-status-positive);
      }

      :host-context(tui-root._mobile) {
--- a/web/projects/ui/src/app/routes/portal/components/header/home.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/header/home.component.ts
@@ -1,5 +1,5 @@
+import { TuiIcon } from '@taiga-ui/core'
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { TuiIconModule } from '@taiga-ui/experimental'

@Component({
  standalone: true,
@@ -41,6 +41,6 @@ import { TuiIconModule } from '@taiga-ui/experimental'
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiIconModule],
+  imports: [TuiIcon],
 })
 export class HeaderHomeComponent {}
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M410.47 279.2c-5-11.5-12.7-21.6-28.1-30.1a98.15 98.15 0 00-25.4-10 62.22 62.22 0 0016.3-11 56.37 56.37 0 0015.6-23.3 77.11 77.11 0 003.5-28.2c-1.1-16.8-4.4-33.1-13.2-44.8s-21.2-20.7-37.6-27c-12.6-4.8-25.5-7.8-45.5-8.9V32h-40v64h-32V32h-41v64H96v48h27.87c8.7 0 14.6.8 17.6 2.3a13.22 13.22 0 016.5 6c1.3 2.5 1.9 8.4 1.9 17.5V343c0 9-.6 14.8-1.9 17.4s-2 4.9-5.1 6.3-3.2 1.3-11.8 1.3h-26.4L96 416h87v64h41v-64h32v64h40v-64.4c26-1.3 44.5-4.7 59.4-10.3 19.3-7.2 34.1-17.7 44.7-31.5s14-34.9 14.93-51.2c.67-14.5-.03-33.2-4.56-43.4zM224 150h32v74h-32zm0 212v-90h32v90zm72-208.1c6 2.5 9.9 7.5 13.8 12.7 4.3 5.7 6.5 13.3 6.5 21.4 0 7.8-2.9 14.5-7.5 20.5-3.8 4.9-6.8 8.3-12.8 11.1zm28.8 186.7c-7.8 6.9-12.3 10.1-22.1 13.8a56.06 56.06 0 01-6.7 1.9v-82.8a40.74 40.74 0 0111.3 3.4c7.8 3.3 15.2 6.9 19.8 13.2a43.82 43.82 0 018 24.7c-.03 10.9-2.83 19.2-10.33 25.8z"/></svg>