diff --git a/pkgs/by-name/zi/zitadel/console.nix b/pkgs/by-name/zi/zitadel/console.nix
index d73d34b8d717..1346de248b85 100644
--- a/pkgs/by-name/zi/zitadel/console.nix
+++ b/pkgs/by-name/zi/zitadel/console.nix
@@ -1,13 +1,20 @@
-{ generateProtobufCode
-, version
-, zitadelRepo
+{
+  generateProtobufCode,
+  version,
+  zitadelRepo,
 }:
 
-{ mkYarnPackage
-, fetchYarnDeps
-, grpc-gateway
-, protoc-gen-grpc-web
-, protoc-gen-js
+{
+  lib,
+  stdenv,
+  fetchYarnDeps,
+  yarnConfigHook,
+  yarnBuildHook,
+  nodejs,
+
+  grpc-gateway,
+  protoc-gen-grpc-web,
+  protoc-gen-js,
 }:
 
 let
@@ -24,36 +31,32 @@ let
     hash = "sha256-n6BJ1gSSm66yOGdHcSea/nQbjiHZX2YX2zbFT4o75/4=";
   };
 in
-mkYarnPackage rec {
-  name = "zitadel-console";
+stdenv.mkDerivation {
+  pname = "zitadel-console";
   inherit version;
 
-  src = "${zitadelRepo}/console";
+  src = zitadelRepo;
+
+  sourceRoot = "${zitadelRepo.name}/console";
 
-  packageJSON = ./package.json;
   offlineCache = fetchYarnDeps {
-    yarnLock = "${src}/yarn.lock";
+    yarnLock = "${zitadelRepo}/console/yarn.lock";
     hash = "sha256-MWATjfhIbo3cqpzOdXP52f/0Td60n99OTU1Qk6oWmXU=";
   };
 
-  postPatch = ''
-    substituteInPlace src/styles.scss \
-      --replace-fail "/node_modules/flag-icons" "flag-icons"
+  nativeBuildInputs = [
+    yarnConfigHook
+    yarnBuildHook
+    nodejs
+  ];
 
-    substituteInPlace angular.json \
-      --replace-fail "./node_modules/tinycolor2" "../../node_modules/tinycolor2"
-  '';
-
-  buildPhase = ''
-    ln -s "${zitadelRepo}/docs" deps/docs
-    mkdir deps/console/src/app/proto
-    cp -r ${protobufGenerated}/* deps/console/src/app/proto/
-    yarn --offline build
+  preBuild = ''
+    cp -r ${protobufGenerated} src/app/proto
   '';
 
   installPhase = ''
-    cp -r deps/console/dist/console $out
+    runHook preInstall
+    cp -r dist/console "$out"
+    runHook postInstall
   '';
-
-  doDist = false;
 }
diff --git a/pkgs/by-name/zi/zitadel/package.json b/pkgs/by-name/zi/zitadel/package.json
deleted file mode 100644
index 70390d87e1d7..000000000000
--- a/pkgs/by-name/zi/zitadel/package.json
+++ /dev/null
@@ -1,92 +0,0 @@
-{
-  "name": "console",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "node prebuild.development.js && ng serve",
-    "build": "ng build --configuration production --base-href=/ui/console/",
-    "prelint": "npm run generate",
-    "lint": "ng lint && prettier --check src",
-    "lint:fix": "prettier --write src",
-    "generate": "buf generate ../proto --include-imports --include-wkt"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^16.2.5",
-    "@angular/cdk": "^16.2.4",
-    "@angular/common": "^16.2.5",
-    "@angular/compiler": "^16.2.5",
-    "@angular/core": "^16.2.5",
-    "@angular/forms": "^16.2.5",
-    "@angular/material": "^16.2.4",
-    "@angular/material-moment-adapter": "^16.2.4",
-    "@angular/platform-browser": "^16.2.5",
-    "@angular/platform-browser-dynamic": "^16.2.5",
-    "@angular/router": "^16.2.5",
-    "@angular/service-worker": "^16.2.5",
-    "@ctrl/ngx-codemirror": "^6.1.0",
-    "@fortawesome/angular-fontawesome": "^0.13.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@grpc/grpc-js": "^1.9.3",
-    "@netlify/framework-info": "^9.8.10",
-    "@ngx-translate/core": "^15.0.0",
-    "angular-oauth2-oidc": "^15.0.1",
-    "angularx-qrcode": "^16.0.0",
-    "buffer": "^6.0.3",
-    "codemirror": "^5.65.8",
-    "cors": "^2.8.5",
-    "file-saver": "^2.0.5",
-    "flag-icons": "^7.1.0",
-    "google-proto-files": "^4.0.0",
-    "google-protobuf": "^3.21.2",
-    "grpc-web": "^1.4.1",
-    "i18n-iso-countries": "^7.7.0",
-    "libphonenumber-js": "^1.10.49",
-    "material-design-icons-iconfont": "^6.1.1",
-    "moment": "^2.29.4",
-    "ngx-color": "^9.0.0",
-    "opentype.js": "^1.3.4",
-    "rxjs": "~7.8.0",
-    "tinycolor2": "^1.6.0",
-    "tslib": "^2.6.2",
-    "uuid": "^9.0.1",
-    "zone.js": "~0.13.3"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.2",
-    "@angular-eslint/builder": "16.2.0",
-    "@angular-eslint/eslint-plugin": "16.2.0",
-    "@angular-eslint/eslint-plugin-template": "16.2.0",
-    "@angular-eslint/schematics": "16.2.0",
-    "@angular-eslint/template-parser": "16.2.0",
-    "@angular/cli": "^16.2.2",
-    "@angular/compiler-cli": "^16.2.5",
-    "@angular/language-service": "^16.2.5",
-    "@bufbuild/buf": "^1.23.1",
-    "@types/file-saver": "^2.0.7",
-    "@types/google-protobuf": "^3.15.3",
-    "@types/jasmine": "~5.1.4",
-    "@types/jasminewd2": "~2.0.13",
-    "@types/jsonwebtoken": "^9.0.5",
-    "@types/node": "^20.7.0",
-    "@types/opentype.js": "^1.3.8",
-    "@types/qrcode": "^1.5.2",
-    "@types/uuid": "^9.0.7",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.60.1",
-    "codelyzer": "^6.0.2",
-    "eslint": "^8.50.0",
-    "jasmine-core": "~4.6.0",
-    "jasmine-spec-reporter": "~7.0.0",
-    "karma": "^6.4.2",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-coverage-istanbul-reporter": "^3.0.3",
-    "karma-jasmine": "^5.1.0",
-    "karma-jasmine-html-reporter": "^2.1.0",
-    "prettier": "^3.1.1",
-    "prettier-plugin-organize-imports": "^3.2.4",
-    "protractor": "~7.0.0",
-    "typescript": "^5.1.6"
-  }
-}