diff --git a/pkgs/servers/http/pomerium/common.nix b/pkgs/servers/http/pomerium/common.nix
new file mode 100644
index 000000000000..87b9b98a72e8
--- /dev/null
+++ b/pkgs/servers/http/pomerium/common.nix
@@ -0,0 +1,27 @@
+{ fetchFromGitHub
+, lib
+}:
+let
+  version = "0.17.1";
+  srcHash = "sha256:0b9mdzyfn7c6gwgslqk787yyrrcmdjf3282vx2zvhcr3psz0xqwx";
+  vendorSha256 = "sha256:1cq4m5a7z64yg3v1c68d15ilw78il6p53vaqzxgn338zjggr3kig";
+  yarnSha256 = "sha256-dLkn9xvQ3gixU63g1xvzbY+YI+9YnaGa3D0uGrrpGvI=";
+in
+{
+  inherit version vendorSha256 yarnSha256;
+
+  src = fetchFromGitHub {
+    owner = "pomerium";
+    repo = "pomerium";
+    rev = "v${version}";
+    hash = srcHash;
+  };
+
+  meta = with lib; {
+    homepage = "https://pomerium.io";
+    description = "Authenticating reverse proxy";
+    license = licenses.asl20;
+    maintainers = with maintainers; [ lukegb ];
+    platforms = [ "x86_64-linux" "aarch64-linux" ];
+  };
+}
diff --git a/pkgs/servers/http/pomerium/default.nix b/pkgs/servers/http/pomerium/default.nix
index b6de805a619b..7b115d6d694a 100644
--- a/pkgs/servers/http/pomerium/default.nix
+++ b/pkgs/servers/http/pomerium/default.nix
@@ -1,26 +1,21 @@
 { buildGoModule
 , fetchFromGitHub
+, callPackage
 , lib
 , envoy
-, zip
 , nixosTests
+, pomerium-ui
 , pomerium-cli
 }:
 
 let
   inherit (lib) concatStringsSep concatMap id mapAttrsToList;
+  common = callPackage ./common.nix { };
 in
 buildGoModule rec {
+  inherit (common) version src vendorSha256 meta;
   pname = "pomerium";
-  version = "0.17.1";
-  src = fetchFromGitHub {
-    owner = "pomerium";
-    repo = "pomerium";
-    rev = "v${version}";
-    hash = "sha256:0b9mdzyfn7c6gwgslqk787yyrrcmdjf3282vx2zvhcr3psz0xqwx";
-  };
 
-  vendorSha256 = "sha256:1cq4m5a7z64yg3v1c68d15ilw78il6p53vaqzxgn338zjggr3kig";
   subPackages = [
     "cmd/pomerium"
   ];
@@ -70,6 +65,9 @@ buildGoModule rec {
     EOF
     sha256sum '${envoy}/bin/envoy' > internal/envoy/files/envoy.sha256
     echo '${envoy.version}' > internal/envoy/files/envoy.version
+
+    # put the built UI files where they will be picked up as part of binary build
+    cp -r ${pomerium-ui} ui
   '';
 
   installPhase = ''
@@ -80,12 +78,4 @@ buildGoModule rec {
     inherit (nixosTests) pomerium;
     inherit pomerium-cli;
   };
-
-  meta = with lib; {
-    homepage = "https://pomerium.io";
-    description = "Authenticating reverse proxy";
-    license = licenses.asl20;
-    maintainers = with maintainers; [ lukegb ];
-    platforms = [ "x86_64-linux" "aarch64-linux" ];
-  };
 }
diff --git a/pkgs/servers/http/pomerium/pomerium-ui-package.json b/pkgs/servers/http/pomerium/pomerium-ui-package.json
new file mode 100644
index 000000000000..12f39ead62a9
--- /dev/null
+++ b/pkgs/servers/http/pomerium/pomerium-ui-package.json
@@ -0,0 +1,60 @@
+{
+  "name": "pomerium",
+  "version": "1.0.0",
+  "main": "src/index.tsx",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "ts-node ./scripts/esbuild.ts",
+    "format": "prettier --write .",
+    "lint": "eslint .",
+    "watch": "ts-node ./scripts/esbuild.ts --watch"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@babel/core": "^7.0.0",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@fontsource/dm-mono": "^4.5.2",
+    "@fontsource/dm-sans": "^4.5.1",
+    "@mui/icons-material": "^5.3.1",
+    "@mui/material": "^5.4.0",
+    "luxon": "^2.3.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-feather": "^2.0.9"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "2.0.4",
+    "@types/luxon": "^2.0.9",
+    "@types/node": "^17.0.14",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^17.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
+    "esbuild": "^0.13.12",
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-react": "^7.28.0",
+    "prettier": "^2.4.1",
+    "ts-node": "^10.4.0",
+    "typescript": "^4.4.4"
+  },
+  "prettier": {
+    "importOrder": [
+      "^[./]"
+    ],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true
+  }
+}
diff --git a/pkgs/servers/http/pomerium/ui.nix b/pkgs/servers/http/pomerium/ui.nix
new file mode 100644
index 000000000000..f2a94814ca21
--- /dev/null
+++ b/pkgs/servers/http/pomerium/ui.nix
@@ -0,0 +1,38 @@
+{ lib
+, callPackage
+, fetchFromGitHub
+, fetchYarnDeps
+, mkYarnPackage }:
+let
+  common = callPackage ./common.nix { };
+in
+mkYarnPackage {
+  inherit (common) version;
+  pname = "pomerium-ui";
+  src = "${common.src}/ui";
+
+  # update pomerium-ui-package.json when updating package, sourced from ui/package.json
+  packageJSON = ./pomerium-ui-package.json;
+  offlineCache = fetchYarnDeps {
+    yarnLock = "${common.src}/ui/yarn.lock";
+    sha256 = common.yarnSha256;
+  };
+
+  buildPhase = ''
+    runHook preBuild
+    yarn --offline build
+    runHook postbuild
+  '';
+
+  installPhase = ''
+    runHook preInstall
+    cp -R deps/pomerium/dist $out
+    runHook postInstall
+  '';
+
+  doDist = false;
+
+  meta = common.meta // {
+    description = "Pomerium authenticating reverse proxy UI";
+  };
+}
diff --git a/pkgs/top-level/all-packages.nix b/pkgs/top-level/all-packages.nix
index 6f8786a40cf4..e18c5dc1e98e 100644
--- a/pkgs/top-level/all-packages.nix
+++ b/pkgs/top-level/all-packages.nix
@@ -22892,7 +22892,9 @@ with pkgs;
   };
   pflogsumm = callPackage ../servers/mail/postfix/pflogsumm.nix { };
 
-  pomerium = callPackage ../servers/http/pomerium { };
+  pomerium = callPackage ../servers/http/pomerium {
+    pomerium-ui = callPackage ../servers/http/pomerium/ui.nix { };
+  };
   pomerium-cli = callPackage ../tools/security/pomerium-cli { };
 
   postgrey = callPackage ../servers/mail/postgrey { };