diff --git a/.github/instructions/frontend.instructions.md b/.github/instructions/frontend.instructions.md
index 228f6aeb2f..e6c4f79ba1 100644
--- a/.github/instructions/frontend.instructions.md
+++ b/.github/instructions/frontend.instructions.md
@@ -14,6 +14,7 @@ Located in the `src/Exceptionless.Web/ClientApp` directory.
 - When there is a linting error, always try to run `npm run format` first.
 - Limit use of $effect as there is usually a better way to solve the problem like using $derived.
 - **Do NOT** use any server-side Svelte features.
+- Always use the chrome mcp to verify visual and functional correctness, default to using the new site /next path.
 
 ## Architecture & Components
 
diff --git a/.github/instructions/general.instructions.md b/.github/instructions/general.instructions.md
index 96e4f5e3af..5adacdb675 100644
--- a/.github/instructions/general.instructions.md
+++ b/.github/instructions/general.instructions.md
@@ -8,7 +8,7 @@ applyTo: "**"
 You are a distinguished engineer and are expected to deliver high-quality code that adheres to the guidelines below.
 All contributions must respect existing formatting and conventions specified in the `.editorconfig` file.
 
-use context7 for documentation
+Use context7 when I need code generation, setup or configuration steps, or library/api documentation.
 
 ## Code Style & Minimal Diffs
 
diff --git a/src/Exceptionless.Core/Repositories/OrganizationRepository.cs b/src/Exceptionless.Core/Repositories/OrganizationRepository.cs
index c13d077e69..a1e9cb4e3a 100644
--- a/src/Exceptionless.Core/Repositories/OrganizationRepository.cs
+++ b/src/Exceptionless.Core/Repositories/OrganizationRepository.cs
@@ -51,7 +51,7 @@ public Task<FindResults<Organization>> GetByCriteriaAsync(string? criteria, Comm
     {
         var filter = Query<Organization>.MatchAll();
         if (!String.IsNullOrWhiteSpace(criteria))
-            filter &= Query<Organization>.Term(o => o.Name, criteria);
+            filter &= (Query<Organization>.Term(o => o.Id, criteria) || Query<Organization>.Term(o => o.Name, criteria));
 
         if (paid.HasValue)
         {
diff --git a/src/Exceptionless.Web/ClientApp/eslint.config.js b/src/Exceptionless.Web/ClientApp/eslint.config.js
index d2c6359fab..2198a11515 100644
--- a/src/Exceptionless.Web/ClientApp/eslint.config.js
+++ b/src/Exceptionless.Web/ClientApp/eslint.config.js
@@ -1,5 +1,6 @@
 import { includeIgnoreFile } from '@eslint/compat';
 import js from '@eslint/js';
+import pluginQuery from '@tanstack/eslint-plugin-query';
 import prettier from 'eslint-config-prettier';
 import perfectionist from 'eslint-plugin-perfectionist';
 // For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
@@ -17,6 +18,7 @@ export default ts.config(
     ...svelte.configs['flat/recommended'],
     perfectionist.configs['recommended-natural'],
     prettier,
+    ...pluginQuery.configs['flat/recommended'],
     ...svelte.configs['flat/prettier'],
     {
         languageOptions: {
@@ -37,6 +39,11 @@ export default ts.config(
     {
         ignores: ['build/', '.svelte-kit/', 'dist/', 'src/lib/generated/api.ts', 'src/lib/features/shared/components/ui/']
     },
+    {
+        rules: {
+            '@tanstack/query/exhaustive-deps': 'off'
+        }
+    },
     {
         rules: {
             'svelte/no-navigation-without-resolve': 'off'
diff --git a/src/Exceptionless.Web/ClientApp/package-lock.json b/src/Exceptionless.Web/ClientApp/package-lock.json
index 941d72aafc..7ae48c11b6 100644
--- a/src/Exceptionless.Web/ClientApp/package-lock.json
+++ b/src/Exceptionless.Web/ClientApp/package-lock.json
@@ -11,73 +11,76 @@
                 "@exceptionless/browser": "^3.1.0",
                 "@exceptionless/fetchclient": "^0.44.0",
                 "@internationalized/date": "^3.10.0",
-                "@lucide/svelte": "^0.548.0",
-                "@tanstack/svelte-query": "^6.0.3",
-                "@tanstack/svelte-query-devtools": "^6.0.0",
+                "@lucide/svelte": "^0.556.0",
+                "@tanstack/svelte-query": "^6.0.10",
+                "@tanstack/svelte-query-devtools": "^6.0.2",
                 "@tanstack/svelte-table": "^9.0.0-alpha.10",
                 "@types/d3-scale": "^4.0.9",
                 "@types/d3-shape": "^3.1.7",
                 "@typeschema/class-validator": "^0.3.0",
-                "bits-ui": "^2.14.1",
-                "class-validator": "^0.14.2",
+                "bits-ui": "^2.14.4",
+                "class-validator": "^0.14.3",
                 "clsx": "^2.1.1",
                 "d3-scale": "^4.0.2",
                 "dompurify": "^3.3.0",
                 "formsnap": "^2.0.1",
                 "kit-query-params": "^0.0.26",
-                "layerchart": "^2.0.0-next.40",
+                "layerchart": "^2.0.0-next.43",
                 "mode-watcher": "^1.1.0",
-                "oidc-client-ts": "^3.3.0",
+                "oidc-client-ts": "^3.4.1",
                 "pretty-ms": "^9.3.0",
-                "runed": "^0.35.1",
-                "shiki": "^3.14.0",
-                "svelte-sonner": "^1.0.5",
+                "runed": "^0.37.0",
+                "shiki": "^3.19.0",
+                "svelte-sonner": "^1.0.7",
                 "svelte-time": "^2.0.2",
-                "sveltekit-superforms": "^2.28.0",
-                "tailwind-merge": "^3.3.1",
-                "tailwind-variants": "^3.1.1",
-                "tailwindcss": "^4.1.16",
+                "sveltekit-superforms": "^2.28.1",
+                "tailwind-merge": "^3.4.0",
+                "tailwind-variants": "^3.2.2",
+                "tailwindcss": "^4.1.17",
                 "throttle-debounce": "^5.0.2",
                 "tw-animate-css": "^1.4.0"
             },
             "devDependencies": {
-                "@chromatic-com/storybook": "^4.1.1",
-                "@eslint/compat": "^1.4.0",
-                "@eslint/js": "^9.38.0",
-                "@iconify-json/lucide": "^1.2.71",
-                "@playwright/test": "^1.56.1",
-                "@storybook/addon-a11y": "^10.0.0",
-                "@storybook/addon-docs": "^10.0.0",
+                "@chromatic-com/storybook": "^4.1.3",
+                "@eslint/compat": "^2.0.0",
+                "@eslint/js": "^9.39.1",
+                "@iconify-json/lucide": "^1.2.79",
+                "@playwright/test": "^1.57.0",
+                "@storybook/addon-a11y": "^10.1.4",
+                "@storybook/addon-docs": "^10.1.4",
                 "@storybook/addon-svelte-csf": "^5.0.10",
-                "@storybook/sveltekit": "^10.0.0",
+                "@storybook/sveltekit": "^10.1.4",
                 "@sveltejs/adapter-static": "^3.0.10",
-                "@sveltejs/kit": "^2.48.2",
+                "@sveltejs/kit": "^2.49.1",
                 "@sveltejs/vite-plugin-svelte": "^6.2.1",
-                "@tailwindcss/vite": "^4.1.16",
+                "@tailwindcss/vite": "^4.1.17",
+                "@tanstack/eslint-plugin-query": "^5.91.2",
                 "@testing-library/jest-dom": "^6.9.1",
-                "@testing-library/svelte": "^5.2.8",
+                "@testing-library/svelte": "^5.2.9",
                 "@types/eslint": "^9.6.1",
-                "@types/node": "^24.9.2",
+                "@types/node": "^24.10.1",
                 "@types/throttle-debounce": "^5.0.2",
                 "cross-env": "^10.1.0",
-                "eslint": "^9.38.0",
+                "eslint": "^9.39.1",
                 "eslint-config-prettier": "^10.1.8",
                 "eslint-plugin-perfectionist": "^4.15.1",
-                "eslint-plugin-storybook": "^10.0.0",
-                "eslint-plugin-svelte": "^3.12.5",
-                "jsdom": "^27.0.1",
-                "prettier": "^3.6.2",
+                "eslint-plugin-storybook": "^10.1.4",
+                "eslint-plugin-svelte": "^3.13.1",
+                "jsdom": "^27.2.0",
+                "prettier": "^3.7.4",
                 "prettier-plugin-svelte": "^3.4.0",
-                "prettier-plugin-tailwindcss": "^0.7.1",
-                "storybook": "^10.0.0",
-                "svelte": "^5.43.0",
-                "svelte-check": "^4.3.3",
+                "prettier-plugin-tailwindcss": "^0.7.2",
+                "storybook": "^10.1.4",
+                "svelte": "^5.45.6",
+                "svelte-check": "^4.3.4",
                 "swagger-typescript-api": "^13.2.16",
                 "tslib": "^2.8.1",
                 "typescript": "^5.9.3",
-                "typescript-eslint": "^8.46.2",
-                "vite": "^7.1.12",
-                "vitest": "4.0.4"
+                "typescript-eslint": "^8.48.1",
+                "vite": "^7.2.6",
+                "vitest": "4.0.15",
+                "vitest-websocket-mock": "^0.5.0",
+                "zod": "^4.1.13"
             }
         },
         "node_modules/@acemir/cssom": {
@@ -851,16 +854,16 @@
             }
         },
         "node_modules/@eslint/compat": {
-            "version": "1.4.1",
-            "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.4.1.tgz",
-            "integrity": "sha512-cfO82V9zxxGBxcQDr1lfaYB7wykTa0b00mGa36FrJl7iTFd0Z2cHfEYuxcBRP/iNijCsWsEkA+jzT8hGYmv33w==",
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-2.0.0.tgz",
+            "integrity": "sha512-T9AfE1G1uv4wwq94ozgTGio5EUQBqAVe1X9qsQtSNVEYW6j3hvtZVm8Smr4qL1qDPFg+lOB2cL5RxTRMzq4CTA==",
             "dev": true,
             "license": "Apache-2.0",
             "dependencies": {
-                "@eslint/core": "^0.17.0"
+                "@eslint/core": "^1.0.0"
             },
             "engines": {
-                "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+                "node": "^20.19.0 || ^22.13.0 || >=24"
             },
             "peerDependencies": {
                 "eslint": "^8.40 || 9"
@@ -871,6 +874,19 @@
                 }
             }
         },
+        "node_modules/@eslint/compat/node_modules/@eslint/core": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/@eslint/core/-/core-1.0.0.tgz",
+            "integrity": "sha512-PRfWP+8FOldvbApr6xL7mNCw4cJcSTq4GA7tYbgq15mRb0kWKO/wEB2jr+uwjFH3sZvEZneZyCUGTxsv4Sahyw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@types/json-schema": "^7.0.15"
+            },
+            "engines": {
+                "node": "^20.19.0 || ^22.13.0 || >=24"
+            }
+        },
         "node_modules/@eslint/config-array": {
             "version": "0.21.1",
             "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
@@ -1139,9 +1155,9 @@
             }
         },
         "node_modules/@iconify-json/lucide": {
-            "version": "1.2.78",
-            "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.78.tgz",
-            "integrity": "sha512-TqIzEzBCjs1IOUre/NBKhg29DkL6+Vqh93SD9V189TwIEl5Kl2dBSL7OZ0pjjF1ru8HQ1bllBo/oS0YYVUTPgA==",
+            "version": "1.2.79",
+            "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.2.79.tgz",
+            "integrity": "sha512-CcwoXfC2Y7UVW0PXopmXtB4Do/eUJkhAqQqOnVENEiw3FwU707TK4uyIUqdo9tlvBaFBl95wnJf3smqsTnSyKA==",
             "dev": true,
             "license": "ISC",
             "dependencies": {
@@ -1255,9 +1271,9 @@
             }
         },
         "node_modules/@lucide/svelte": {
-            "version": "0.548.0",
-            "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.548.0.tgz",
-            "integrity": "sha512-Iwh5GXK8+tE1lBjYoBPfOhBiWv6/K/XinZ/Bjx/2Qys86ufZ/CbjHKacYyZeGnyWQSsjcr7P3xavkmCMhv/1RA==",
+            "version": "0.556.0",
+            "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.556.0.tgz",
+            "integrity": "sha512-jsJhyyd2xrJ4WtflO5TrTtyCBacF4OLBNCzotvwh4zfbbuE6aqdblx+OB0zg6zOno06ib1GJGdDcfR/2TUcb7g==",
             "license": "ISC",
             "peerDependencies": {
                 "svelte": "^5"
@@ -2302,6 +2318,23 @@
                 "vite": "^5.2.0 || ^6 || ^7"
             }
         },
+        "node_modules/@tanstack/eslint-plugin-query": {
+            "version": "5.91.2",
+            "resolved": "https://registry.npmjs.org/@tanstack/eslint-plugin-query/-/eslint-plugin-query-5.91.2.tgz",
+            "integrity": "sha512-UPeWKl/Acu1IuuHJlsN+eITUHqAaa9/04geHHPedY8siVarSaWprY0SVMKrkpKfk5ehRT7+/MZ5QwWuEtkWrFw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/utils": "^8.44.1"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            },
+            "peerDependencies": {
+                "eslint": "^8.57.0 || ^9.0.0"
+            }
+        },
         "node_modules/@tanstack/query-core": {
             "version": "5.90.12",
             "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.12.tgz",
@@ -3038,13 +3071,13 @@
             }
         },
         "node_modules/@vitest/runner": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.4.tgz",
-            "integrity": "sha512-99EDqiCkncCmvIZj3qJXBZbyoQ35ghOwVWNnQ5nj0Hnsv4Qm40HmrMJrceewjLVvsxV/JSU4qyx2CGcfMBmXJw==",
+            "version": "4.0.15",
+            "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.15.tgz",
+            "integrity": "sha512-+A+yMY8dGixUhHmNdPUxOh0la6uVzun86vAbuMT3hIDxMrAOmn5ILBHm8ajrqHE0t8R9T1dGnde1A5DTnmi3qw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@vitest/utils": "4.0.4",
+                "@vitest/utils": "4.0.15",
                 "pathe": "^2.0.3"
             },
             "funding": {
@@ -3052,9 +3085,9 @@
             }
         },
         "node_modules/@vitest/runner/node_modules/@vitest/pretty-format": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.4.tgz",
-            "integrity": "sha512-lHI2rbyrLVSd1TiHGJYyEtbOBo2SDndIsN3qY4o4xe2pBxoJLD6IICghNCvD7P+BFin6jeyHXiUICXqgl6vEaQ==",
+            "version": "4.0.15",
+            "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.15.tgz",
+            "integrity": "sha512-SWdqR8vEv83WtZcrfLNqlqeQXlQLh2iilO1Wk1gv4eiHKjEzvgHb2OVc3mIPyhZE6F+CtfYjNlDJwP5MN6Km7A==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -3065,13 +3098,13 @@
             }
         },
         "node_modules/@vitest/runner/node_modules/@vitest/utils": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.4.tgz",
-            "integrity": "sha512-4bJLmSvZLyVbNsYFRpPYdJViG9jZyRvMZ35IF4ymXbRZoS+ycYghmwTGiscTXduUg2lgKK7POWIyXJNute1hjw==",
+            "version": "4.0.15",
+            "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.15.tgz",
+            "integrity": "sha512-HXjPW2w5dxhTD0dLwtYHDnelK3j8sR8cWIaLxr22evTyY6q8pRCjZSmhRWVjBaOVXChQd6AwMzi9pucorXCPZA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@vitest/pretty-format": "4.0.4",
+                "@vitest/pretty-format": "4.0.15",
                 "tinyrainbow": "^3.0.3"
             },
             "funding": {
@@ -3089,14 +3122,14 @@
             }
         },
         "node_modules/@vitest/snapshot": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.4.tgz",
-            "integrity": "sha512-XICqf5Gi4648FGoBIeRgnHWSNDp+7R5tpclGosFaUUFzY6SfcpsfHNMnC7oDu/iOLBxYfxVzaQpylEvpgii3zw==",
+            "version": "4.0.15",
+            "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.15.tgz",
+            "integrity": "sha512-A7Ob8EdFZJIBjLjeO0DZF4lqR6U7Ydi5/5LIZ0xcI+23lYlsYJAfGn8PrIWTYdZQRNnSRlzhg0zyGu37mVdy5g==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@vitest/pretty-format": "4.0.4",
-                "magic-string": "^0.30.19",
+                "@vitest/pretty-format": "4.0.15",
+                "magic-string": "^0.30.21",
                 "pathe": "^2.0.3"
             },
             "funding": {
@@ -3104,9 +3137,9 @@
             }
         },
         "node_modules/@vitest/snapshot/node_modules/@vitest/pretty-format": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.4.tgz",
-            "integrity": "sha512-lHI2rbyrLVSd1TiHGJYyEtbOBo2SDndIsN3qY4o4xe2pBxoJLD6IICghNCvD7P+BFin6jeyHXiUICXqgl6vEaQ==",
+            "version": "4.0.15",
+            "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.15.tgz",
+            "integrity": "sha512-SWdqR8vEv83WtZcrfLNqlqeQXlQLh2iilO1Wk1gv4eiHKjEzvgHb2OVc3mIPyhZE6F+CtfYjNlDJwP5MN6Km7A==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -3350,6 +3383,30 @@
                 "svelte": "^5.33.0"
             }
         },
+        "node_modules/bits-ui/node_modules/runed": {
+            "version": "0.35.1",
+            "resolved": "https://registry.npmjs.org/runed/-/runed-0.35.1.tgz",
+            "integrity": "sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==",
+            "funding": [
+                "https://github.com/sponsors/huntabyte",
+                "https://github.com/sponsors/tglide"
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "dequal": "^2.0.3",
+                "esm-env": "^1.0.0",
+                "lz-string": "^1.5.0"
+            },
+            "peerDependencies": {
+                "@sveltejs/kit": "^2.21.0",
+                "svelte": "^5.7.0"
+            },
+            "peerDependenciesMeta": {
+                "@sveltejs/kit": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/brace-expansion": {
             "version": "1.1.12",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -5984,6 +6041,16 @@
                 "node": "*"
             }
         },
+        "node_modules/mock-socket": {
+            "version": "9.3.1",
+            "resolved": "https://registry.npmjs.org/mock-socket/-/mock-socket-9.3.1.tgz",
+            "integrity": "sha512-qxBgB7Qa2sEQgHFjj0dSigq7fX4k6Saisd5Nelwp2q8mlbAFh5dHV9JTTlF8viYJLSSWgMCZFUom8PJcMNBoJw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 8"
+            }
+        },
         "node_modules/mode-watcher": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-1.1.0.tgz",
@@ -6320,6 +6387,17 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/obug": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+            "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+            "dev": true,
+            "funding": [
+                "https://github.com/sponsors/sxzz",
+                "https://opencollective.com/debug"
+            ],
+            "license": "MIT"
+        },
         "node_modules/ohash": {
             "version": "2.0.11",
             "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
@@ -7104,9 +7182,9 @@
             }
         },
         "node_modules/runed": {
-            "version": "0.35.1",
-            "resolved": "https://registry.npmjs.org/runed/-/runed-0.35.1.tgz",
-            "integrity": "sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==",
+            "version": "0.37.0",
+            "resolved": "https://registry.npmjs.org/runed/-/runed-0.37.0.tgz",
+            "integrity": "sha512-zphHjvLZEpcJiV3jezT96SnNwePaUIEd1HEMuPGZ6DwOMao9S2ZAUCYJPKquRM5J22AwAOpGj0KmxOkQdkBfwQ==",
             "funding": [
                 "https://github.com/sponsors/huntabyte",
                 "https://github.com/sponsors/tglide"
@@ -7119,11 +7197,15 @@
             },
             "peerDependencies": {
                 "@sveltejs/kit": "^2.21.0",
-                "svelte": "^5.7.0"
+                "svelte": "^5.7.0",
+                "zod": "^4.1.0"
             },
             "peerDependenciesMeta": {
                 "@sveltejs/kit": {
                     "optional": true
+                },
+                "zod": {
+                    "optional": true
                 }
             }
         },
@@ -7581,9 +7663,9 @@
             }
         },
         "node_modules/svelte": {
-            "version": "5.45.5",
-            "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.45.5.tgz",
-            "integrity": "sha512-2074U+vObO5Zs8/qhxtBwdi6ZXNIhEBTzNmUFjiZexLxTdt9vq96D/0pnQELl6YcpLMD7pZ2dhXKByfGS8SAdg==",
+            "version": "5.45.6",
+            "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.45.6.tgz",
+            "integrity": "sha512-V3aVXthzPyPt1UB1wLEoXnEXpwPsvs7NHrR0xkCor8c11v71VqBj477MClqPZYyrcXrAH21sNGhOj9FJvSwXfQ==",
             "license": "MIT",
             "dependencies": {
                 "@jridgewell/remapping": "^2.3.4",
@@ -7762,6 +7844,30 @@
                 "svelte": "^5.30.2"
             }
         },
+        "node_modules/svelte-toolbelt/node_modules/runed": {
+            "version": "0.35.1",
+            "resolved": "https://registry.npmjs.org/runed/-/runed-0.35.1.tgz",
+            "integrity": "sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==",
+            "funding": [
+                "https://github.com/sponsors/huntabyte",
+                "https://github.com/sponsors/tglide"
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "dequal": "^2.0.3",
+                "esm-env": "^1.0.0",
+                "lz-string": "^1.5.0"
+            },
+            "peerDependencies": {
+                "@sveltejs/kit": "^2.21.0",
+                "svelte": "^5.7.0"
+            },
+            "peerDependenciesMeta": {
+                "@sveltejs/kit": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/svelte/node_modules/esrap": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.1.tgz",
@@ -9057,28 +9163,28 @@
             }
         },
         "node_modules/vitest": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.4.tgz",
-            "integrity": "sha512-hV31h0/bGbtmDQc0KqaxsTO1v4ZQeF8ojDFuy4sZhFadwAqqvJA0LDw68QUocctI5EDpFMql/jVWKuPYHIf2Ew==",
+            "version": "4.0.15",
+            "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.15.tgz",
+            "integrity": "sha512-n1RxDp8UJm6N0IbJLQo+yzLZ2sQCDyl1o0LeugbPWf8+8Fttp29GghsQBjYJVmWq3gBFfe9Hs1spR44vovn2wA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@vitest/expect": "4.0.4",
-                "@vitest/mocker": "4.0.4",
-                "@vitest/pretty-format": "4.0.4",
-                "@vitest/runner": "4.0.4",
-                "@vitest/snapshot": "4.0.4",
-                "@vitest/spy": "4.0.4",
-                "@vitest/utils": "4.0.4",
-                "debug": "^4.4.3",
+                "@vitest/expect": "4.0.15",
+                "@vitest/mocker": "4.0.15",
+                "@vitest/pretty-format": "4.0.15",
+                "@vitest/runner": "4.0.15",
+                "@vitest/snapshot": "4.0.15",
+                "@vitest/spy": "4.0.15",
+                "@vitest/utils": "4.0.15",
                 "es-module-lexer": "^1.7.0",
                 "expect-type": "^1.2.2",
-                "magic-string": "^0.30.19",
+                "magic-string": "^0.30.21",
+                "obug": "^2.1.1",
                 "pathe": "^2.0.3",
                 "picomatch": "^4.0.3",
-                "std-env": "^3.9.0",
+                "std-env": "^3.10.0",
                 "tinybench": "^2.9.0",
-                "tinyexec": "^0.3.2",
+                "tinyexec": "^1.0.2",
                 "tinyglobby": "^0.2.15",
                 "tinyrainbow": "^3.0.3",
                 "vite": "^6.0.0 || ^7.0.0",
@@ -9095,12 +9201,12 @@
             },
             "peerDependencies": {
                 "@edge-runtime/vm": "*",
-                "@types/debug": "^4.1.12",
+                "@opentelemetry/api": "^1.9.0",
                 "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
-                "@vitest/browser-playwright": "4.0.4",
-                "@vitest/browser-preview": "4.0.4",
-                "@vitest/browser-webdriverio": "4.0.4",
-                "@vitest/ui": "4.0.4",
+                "@vitest/browser-playwright": "4.0.15",
+                "@vitest/browser-preview": "4.0.15",
+                "@vitest/browser-webdriverio": "4.0.15",
+                "@vitest/ui": "4.0.15",
                 "happy-dom": "*",
                 "jsdom": "*"
             },
@@ -9108,7 +9214,7 @@
                 "@edge-runtime/vm": {
                     "optional": true
                 },
-                "@types/debug": {
+                "@opentelemetry/api": {
                     "optional": true
                 },
                 "@types/node": {
@@ -9134,18 +9240,32 @@
                 }
             }
         },
+        "node_modules/vitest-websocket-mock": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/vitest-websocket-mock/-/vitest-websocket-mock-0.5.0.tgz",
+            "integrity": "sha512-vzBWeuF/kD/OCOFzB7WAclb7PxfI105qPkZtdOkPMwZdilBskQjJL4l319JtPtmeovDU7ZVhO3hTfGPjM4txQQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@vitest/utils": "^3.0.0",
+                "mock-socket": "^9.2.1"
+            },
+            "peerDependencies": {
+                "vitest": ">=3"
+            }
+        },
         "node_modules/vitest/node_modules/@vitest/expect": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.4.tgz",
-            "integrity": "sha512-0ioMscWJtfpyH7+P82sGpAi3Si30OVV73jD+tEqXm5+rIx9LgnfdaOn45uaFkKOncABi/PHL00Yn0oW/wK4cXw==",
+            "version": "4.0.15",
+            "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.15.tgz",
+            "integrity": "sha512-Gfyva9/GxPAWXIWjyGDli9O+waHDC0Q0jaLdFP1qPAUUfo1FEXPXUfUkp3eZA0sSq340vPycSyOlYUeM15Ft1w==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@standard-schema/spec": "^1.0.0",
                 "@types/chai": "^5.2.2",
-                "@vitest/spy": "4.0.4",
-                "@vitest/utils": "4.0.4",
-                "chai": "^6.0.1",
+                "@vitest/spy": "4.0.15",
+                "@vitest/utils": "4.0.15",
+                "chai": "^6.2.1",
                 "tinyrainbow": "^3.0.3"
             },
             "funding": {
@@ -9153,15 +9273,15 @@
             }
         },
         "node_modules/vitest/node_modules/@vitest/mocker": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.4.tgz",
-            "integrity": "sha512-UTtKgpjWj+pvn3lUM55nSg34098obGhSHH+KlJcXesky8b5wCUgg7s60epxrS6yAG8slZ9W8T9jGWg4PisMf5Q==",
+            "version": "4.0.15",
+            "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.15.tgz",
+            "integrity": "sha512-CZ28GLfOEIFkvCFngN8Sfx5h+Se0zN+h4B7yOsPVCcgtiO7t5jt9xQh2E1UkFep+eb9fjyMfuC5gBypwb07fvQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@vitest/spy": "4.0.4",
+                "@vitest/spy": "4.0.15",
                 "estree-walker": "^3.0.3",
-                "magic-string": "^0.30.19"
+                "magic-string": "^0.30.21"
             },
             "funding": {
                 "url": "https://opencollective.com/vitest"
@@ -9180,9 +9300,9 @@
             }
         },
         "node_modules/vitest/node_modules/@vitest/pretty-format": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.4.tgz",
-            "integrity": "sha512-lHI2rbyrLVSd1TiHGJYyEtbOBo2SDndIsN3qY4o4xe2pBxoJLD6IICghNCvD7P+BFin6jeyHXiUICXqgl6vEaQ==",
+            "version": "4.0.15",
+            "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.15.tgz",
+            "integrity": "sha512-SWdqR8vEv83WtZcrfLNqlqeQXlQLh2iilO1Wk1gv4eiHKjEzvgHb2OVc3mIPyhZE6F+CtfYjNlDJwP5MN6Km7A==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -9193,9 +9313,9 @@
             }
         },
         "node_modules/vitest/node_modules/@vitest/spy": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.4.tgz",
-            "integrity": "sha512-G9L13AFyYECo40QG7E07EdYnZZYCKMTSp83p9W8Vwed0IyCG1GnpDLxObkx8uOGPXfDpdeVf24P1Yka8/q1s9g==",
+            "version": "4.0.15",
+            "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.15.tgz",
+            "integrity": "sha512-+EIjOJmnY6mIfdXtE/bnozKEvTC4Uczg19yeZ2vtCz5Yyb0QQ31QWVQ8hswJ3Ysx/K2EqaNsVanjr//2+P3FHw==",
             "dev": true,
             "license": "MIT",
             "funding": {
@@ -9203,13 +9323,13 @@
             }
         },
         "node_modules/vitest/node_modules/@vitest/utils": {
-            "version": "4.0.4",
-            "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.4.tgz",
-            "integrity": "sha512-4bJLmSvZLyVbNsYFRpPYdJViG9jZyRvMZ35IF4ymXbRZoS+ycYghmwTGiscTXduUg2lgKK7POWIyXJNute1hjw==",
+            "version": "4.0.15",
+            "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.15.tgz",
+            "integrity": "sha512-HXjPW2w5dxhTD0dLwtYHDnelK3j8sR8cWIaLxr22evTyY6q8pRCjZSmhRWVjBaOVXChQd6AwMzi9pucorXCPZA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@vitest/pretty-format": "4.0.4",
+                "@vitest/pretty-format": "4.0.15",
                 "tinyrainbow": "^3.0.3"
             },
             "funding": {
@@ -9226,13 +9346,6 @@
                 "node": ">=18"
             }
         },
-        "node_modules/vitest/node_modules/tinyexec": {
-            "version": "0.3.2",
-            "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
-            "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/vitest/node_modules/tinyrainbow": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.0.3.tgz",
@@ -9514,8 +9627,8 @@
             "version": "4.1.13",
             "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.13.tgz",
             "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
+            "devOptional": true,
             "license": "MIT",
-            "optional": true,
             "funding": {
                 "url": "https://github.com/sponsors/colinhacks"
             }
diff --git a/src/Exceptionless.Web/ClientApp/package.json b/src/Exceptionless.Web/ClientApp/package.json
index cf2a6dafe7..18f31b05b7 100644
--- a/src/Exceptionless.Web/ClientApp/package.json
+++ b/src/Exceptionless.Web/ClientApp/package.json
@@ -25,74 +25,77 @@
         "upgrade": "ncu -i"
     },
     "devDependencies": {
-        "@chromatic-com/storybook": "^4.1.1",
-        "@eslint/compat": "^1.4.0",
-        "@eslint/js": "^9.38.0",
-        "@iconify-json/lucide": "^1.2.71",
-        "@playwright/test": "^1.56.1",
-        "@storybook/addon-a11y": "^10.0.0",
-        "@storybook/addon-docs": "^10.0.0",
+        "@chromatic-com/storybook": "^4.1.3",
+        "@eslint/compat": "^2.0.0",
+        "@eslint/js": "^9.39.1",
+        "@iconify-json/lucide": "^1.2.79",
+        "@playwright/test": "^1.57.0",
+        "@storybook/addon-a11y": "^10.1.4",
+        "@storybook/addon-docs": "^10.1.4",
         "@storybook/addon-svelte-csf": "^5.0.10",
-        "@storybook/sveltekit": "^10.0.0",
+        "@storybook/sveltekit": "^10.1.4",
         "@sveltejs/adapter-static": "^3.0.10",
-        "@sveltejs/kit": "^2.48.2",
+        "@sveltejs/kit": "^2.49.1",
         "@sveltejs/vite-plugin-svelte": "^6.2.1",
-        "@tailwindcss/vite": "^4.1.16",
+        "@tailwindcss/vite": "^4.1.17",
+        "@tanstack/eslint-plugin-query": "^5.91.2",
         "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/svelte": "^5.2.8",
+        "@testing-library/svelte": "^5.2.9",
         "@types/eslint": "^9.6.1",
-        "@types/node": "^24.9.2",
+        "@types/node": "^24.10.1",
         "@types/throttle-debounce": "^5.0.2",
         "cross-env": "^10.1.0",
-        "eslint": "^9.38.0",
+        "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-perfectionist": "^4.15.1",
-        "eslint-plugin-storybook": "^10.0.0",
-        "eslint-plugin-svelte": "^3.12.5",
-        "jsdom": "^27.0.1",
-        "prettier": "^3.6.2",
+        "eslint-plugin-storybook": "^10.1.4",
+        "eslint-plugin-svelte": "^3.13.1",
+        "jsdom": "^27.2.0",
+        "prettier": "^3.7.4",
         "prettier-plugin-svelte": "^3.4.0",
-        "prettier-plugin-tailwindcss": "^0.7.1",
-        "storybook": "^10.0.0",
-        "svelte": "^5.43.0",
-        "svelte-check": "^4.3.3",
+        "prettier-plugin-tailwindcss": "^0.7.2",
+        "storybook": "^10.1.4",
+        "svelte": "^5.45.6",
+        "svelte-check": "^4.3.4",
         "swagger-typescript-api": "^13.2.16",
         "tslib": "^2.8.1",
         "typescript": "^5.9.3",
-        "typescript-eslint": "^8.46.2",
-        "vite": "^7.1.12",
-        "vitest": "4.0.4"
+        "typescript-eslint": "^8.48.1",
+        "vite": "^7.2.6",
+        "vitest": "4.0.15",
+        "vitest-websocket-mock": "^0.5.0",
+        "zod": "^4.1.13"
     },
     "dependencies": {
         "@exceptionless/browser": "^3.1.0",
         "@exceptionless/fetchclient": "^0.44.0",
         "@internationalized/date": "^3.10.0",
-        "@lucide/svelte": "^0.548.0",
-        "@tanstack/svelte-query": "^6.0.3",
-        "@tanstack/svelte-query-devtools": "^6.0.0",
+        "@lucide/svelte": "^0.556.0",
+        "@tanstack/svelte-query": "^6.0.10",
+        "@tanstack/svelte-query-devtools": "^6.0.2",
         "@tanstack/svelte-table": "^9.0.0-alpha.10",
         "@types/d3-scale": "^4.0.9",
         "@types/d3-shape": "^3.1.7",
         "@typeschema/class-validator": "^0.3.0",
-        "bits-ui": "^2.14.1",
-        "class-validator": "^0.14.2",
+        "bits-ui": "^2.14.4",
+        "class-validator": "^0.14.3",
         "clsx": "^2.1.1",
         "d3-scale": "^4.0.2",
         "dompurify": "^3.3.0",
         "formsnap": "^2.0.1",
         "kit-query-params": "^0.0.26",
-        "layerchart": "^2.0.0-next.40",
+        "layerchart": "^2.0.0-next.43",
         "mode-watcher": "^1.1.0",
-        "oidc-client-ts": "^3.3.0",
+        "oidc-client-ts": "^3.4.1",
         "pretty-ms": "^9.3.0",
-        "runed": "^0.35.1",
-        "shiki": "^3.14.0",
-        "svelte-sonner": "^1.0.5",
+        "runed": "^0.37.0",
+        "shiki": "^3.19.0",
+        "svelte-sonner": "^1.0.7",
         "svelte-time": "^2.0.2",
-        "sveltekit-superforms": "^2.28.0",
-        "tailwind-merge": "^3.3.1",
-        "tailwind-variants": "^3.1.1",
-        "tailwindcss": "^4.1.16",
+        "sveltekit-superforms": "^2.28.1",
+        "tailwind-merge": "^3.4.0",
+        "tailwind-variants": "^3.2.2",
+        "tailwindcss": "^4.1.17",
         "throttle-debounce": "^5.0.2",
         "tw-animate-css": "^1.4.0"
     },
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/auth/index.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/auth/index.svelte.ts
index 9196d6f58e..bb4496b1c1 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/auth/index.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/auth/index.svelte.ts
@@ -2,8 +2,8 @@ import { goto } from '$app/navigation';
 import { resolve } from '$app/paths';
 import { page } from '$app/state';
 import { env } from '$env/dynamic/public';
+import { CachedPersistedState } from '$features/shared/utils/cached-persisted-state.svelte';
 import { useFetchClient } from '@exceptionless/fetchclient';
-import { PersistedState } from 'runed';
 
 import type { Login, TokenResult } from './models';
 
@@ -29,22 +29,14 @@ export type SupportedOAuthProviders = 'facebook' | 'github' | 'google' | 'live'
 
 const authSerializer = {
     deserialize: (value: null | string): null | string => {
-        if (value === '') {
-            return null;
-        }
-
-        return value;
+        return value === '' ? null : value;
     },
     serialize: (value: null | string): string => {
-        if (value === null) {
-            return '';
-        }
-
-        return value;
+        return value === null ? '' : value;
     }
 };
 
-export const accessToken = new PersistedState<null | string>('satellizer_token', null, { serializer: authSerializer });
+export const accessToken = new CachedPersistedState<null | string>('satellizer_token', null, { serializer: authSerializer });
 
 export const enableAccountCreation = env.PUBLIC_ENABLE_ACCOUNT_CREATION === 'true';
 export const facebookClientId = env.PUBLIC_FACEBOOK_APPID;
@@ -147,7 +139,8 @@ export async function login(email: string, password: string) {
 export async function logout() {
     const client = useFetchClient();
     await client.get('auth/logout', { expectedStatusCodes: [200, 401] });
-    accessToken.current = null;
+
+    accessToken.current = '';
 }
 
 export async function slackOAuthLogin(): Promise<string> {
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts
index ac888cea32..1c145039b0 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/api.svelte.ts
@@ -74,6 +74,7 @@ export interface GetEventsParams {
 }
 
 export interface GetOrganizationCountRequest {
+    enabled?: () => boolean;
     params?: {
         aggregations?: string;
         filter?: string;
@@ -171,7 +172,7 @@ export function getOrganizationCountQuery(request: GetOrganizationCountRequest)
     const queryClient = useQueryClient();
 
     return createQuery<CountResult, ProblemDetails>(() => ({
-        enabled: () => !!accessToken.current && !!request.route.organizationId,
+        enabled: () => !!accessToken.current && !!request.route.organizationId && (request.enabled?.() ?? true),
         queryClient,
         queryFn: async ({ signal }: { signal: AbortSignal }) => {
             const client = useFetchClient();
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte
index ac46cbff72..dd820cb20c 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte
@@ -161,7 +161,7 @@
                 {:else if showXmlCodeEditor}
                     <CodeBlock {code} language="xml" />
                 {:else}
-                    <pre class="bg-muted rounded p-2 break-words whitespace-pre-wrap"><Code class="px-0"><div class="bg-inherit">{clipboardData}</div></Code
+                    <pre class="bg-muted rounded p-2 wrap-break-word whitespace-pre-wrap"><Code class="px-0"><div class="bg-inherit">{clipboardData}</div></Code
                         ></pre>
                 {/if}
             {:else}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/boolean-faceted-filter-trigger.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/boolean-faceted-filter-trigger.stories.svelte
new file mode 100644
index 0000000000..6ca11b62aa
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/boolean-faceted-filter-trigger.stories.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" module>
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import BooleanTrigger from './boolean-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/Boolean Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <BooleanTrigger changed={() => {}} term="fixed" value={true}>
+            <Filter class="size-3" />
+            Fixed: true
+        </BooleanTrigger>
+        <BooleanTrigger changed={() => {}} term="hidden" value={false}>
+            <Filter class="size-3" />
+            Hidden: false
+        </BooleanTrigger>
+        <BooleanTrigger changed={() => {}} term="critical" value={true}>
+            <Filter class="size-3" />
+            Critical: true
+        </BooleanTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <BooleanTrigger changed={() => {}} term="fixed" value={true} />
+        <BooleanTrigger changed={() => {}} term="hidden" value={false} />
+        <BooleanTrigger changed={() => {}} term="critical" value={true} />
+    </div>
+</Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/boolean-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/boolean-faceted-filter-trigger.svelte
index 76b4b46826..ae290b03d2 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/boolean-faceted-filter-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/boolean-faceted-filter-trigger.svelte
@@ -4,22 +4,20 @@
 
     import { BooleanFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: BooleanFilter) => void;
         term: string;
         value?: boolean;
     };
     let { changed, children, class: className, term, value, ...props }: Props = $props();
-
-    const title = `Search ${term}:${value}`;
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
     onclick={() => changed(new BooleanFilter(term, value))}
-    {title}
-    class={[children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    title={`Search ${term}:${value}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/date-faceted-filter-trigger.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/date-faceted-filter-trigger.stories.svelte
new file mode 100644
index 0000000000..67be55c4da
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/date-faceted-filter-trigger.stories.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" module>
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import DateTrigger from './date-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/Date Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <DateTrigger changed={() => {}} term="date" value="2024-01-15">
+            <Filter class="size-3" />
+            date:2024-01-15
+        </DateTrigger>
+        <DateTrigger changed={() => {}} term="created" value="2024-10-29">
+            <Filter class="size-3" />
+            created:2024-10-29
+        </DateTrigger>
+        <DateTrigger changed={() => {}} term="updated" value="2024-11-01">
+            <Filter class="size-3" />
+            updated:2024-11-01
+        </DateTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <DateTrigger changed={() => {}} term="date" value="2024-01-15" />
+        <DateTrigger changed={() => {}} term="created" value="2024-10-29" />
+        <DateTrigger changed={() => {}} term="updated" value="2024-11-01" />
+    </div>
+</Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/date-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/date-faceted-filter-trigger.svelte
index d7162fff0d..a13222d88a 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/date-faceted-filter-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/date-faceted-filter-trigger.svelte
@@ -4,22 +4,20 @@
 
     import { DateFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: DateFilter) => void;
         term: string;
         value?: string;
     };
     let { changed, children, class: className, term, value, ...props }: Props = $props();
-
-    const title = `Search ${term}:${value}`;
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
-    onclick={() => changed(new DateFilter(term, value))}
-    {title}
-    class={[children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    onclick={() => changed(new DateFilter(term, value ?? undefined))}
+    title={`Search ${term}:${value}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/level-faceted-filter-trigger.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/level-faceted-filter-trigger.stories.svelte
new file mode 100644
index 0000000000..0bdfc0dd9e
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/level-faceted-filter-trigger.stories.svelte
@@ -0,0 +1,41 @@
+<script lang="ts" module>
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import LevelTrigger from './level-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/Level Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <LevelTrigger changed={() => {}} value={['error']}>
+            <Filter class="size-3" />
+            Error
+        </LevelTrigger>
+        <LevelTrigger changed={() => {}} value={['warn']}>
+            <Filter class="size-3" />
+            Warning
+        </LevelTrigger>
+        <LevelTrigger changed={() => {}} value={['info']}>
+            <Filter class="size-3" />
+            Info
+        </LevelTrigger>
+        <LevelTrigger changed={() => {}} value={['debug']}>
+            <Filter class="size-3" />
+            Debug
+        </LevelTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <LevelTrigger changed={() => {}} value={['error']} />
+        <LevelTrigger changed={() => {}} value={['warn']} />
+        <LevelTrigger changed={() => {}} value={['info']} />
+        <LevelTrigger changed={() => {}} value={['debug']} />
+    </div>
+</Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/level-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/level-faceted-filter-trigger.svelte
index 357ce8a7c1..e75f47f6bb 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/level-faceted-filter-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/level-faceted-filter-trigger.svelte
@@ -4,21 +4,19 @@
 
     import { LevelFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: LevelFilter) => void;
         value: string[];
     };
     let { changed, children, class: className, value, ...props }: Props = $props();
-
-    const title = `Search level:${value}`;
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
     onclick={() => changed(new LevelFilter(value))}
-    {title}
-    class={[children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    title={`Search level:${value}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/number-faceted-filter-trigger.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/number-faceted-filter-trigger.stories.svelte
new file mode 100644
index 0000000000..ef1962a195
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/number-faceted-filter-trigger.stories.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" module>
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import NumberTrigger from './number-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/Number Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <NumberTrigger changed={() => {}} term="count" value={100}>
+            <Filter class="size-3" />
+            count:100
+        </NumberTrigger>
+        <NumberTrigger changed={() => {}} term="size" value={1024}>
+            <Filter class="size-3" />
+            size:1024
+        </NumberTrigger>
+        <NumberTrigger changed={() => {}} term="duration" value={500}>
+            <Filter class="size-3" />
+            duration:500
+        </NumberTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <NumberTrigger changed={() => {}} term="count" value={100} />
+        <NumberTrigger changed={() => {}} term="size" value={1024} />
+        <NumberTrigger changed={() => {}} term="duration" value={500} />
+    </div>
+</Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/number-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/number-faceted-filter-trigger.svelte
index 8aa7d56963..15cfc8be30 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/number-faceted-filter-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/number-faceted-filter-trigger.svelte
@@ -4,22 +4,20 @@
 
     import { NumberFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: NumberFilter) => void;
         term: string;
         value?: number;
     };
     let { changed, children, class: className, term, value, ...props }: Props = $props();
-
-    const title = `Search ${term}:${value}`;
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
     onclick={() => changed(new NumberFilter(term, value))}
-    {title}
-    class={[children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    title={`Search ${term}:${value}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter-trigger.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter-trigger.stories.svelte
new file mode 100644
index 0000000000..1a0608dcf3
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter-trigger.stories.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" module>
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import ProjectTrigger from './project-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/Project Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <ProjectTrigger changed={() => {}} value={['proj123']}>
+            <Filter class="size-3" />
+            Web Application
+        </ProjectTrigger>
+        <ProjectTrigger changed={() => {}} value={['proj456']}>
+            <Filter class="size-3" />
+            Mobile App
+        </ProjectTrigger>
+        <ProjectTrigger changed={() => {}} value={['proj789']}>
+            <Filter class="size-3" />
+            API Service
+        </ProjectTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <ProjectTrigger changed={() => {}} value={['proj123']} />
+        <ProjectTrigger changed={() => {}} value={['proj456']} />
+        <ProjectTrigger changed={() => {}} value={['proj789']} />
+    </div>
+</Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter-trigger.svelte
index 24a8d0d844..5e7a262e86 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter-trigger.svelte
@@ -4,21 +4,19 @@
 
     import { ProjectFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: ProjectFilter) => void;
         value: string[];
     };
     let { changed, children, class: className, value, ...props }: Props = $props();
-
-    const title = `Search project:${value}`;
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
     onclick={() => changed(new ProjectFilter(value))}
-    {title}
-    class={[children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    title={`Search project:${value}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter.svelte
index 1662d6ae13..e73b05fee4 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/project-faceted-filter.svelte
@@ -7,11 +7,14 @@
 
     import { ProjectFilter } from './models.svelte';
 
-    let { filter, filterChanged, filterRemoved, title = 'Project', ...props }: FacetedFilterProps<ProjectFilter> = $props();
+    let { filter, filterChanged, filterRemoved, open = $bindable(false), title = 'Project', ...props }: FacetedFilterProps<ProjectFilter> = $props();
 
     // Store the organizationId to prevent loading when switching organizations.
     const organizationId = organization.current;
+
+    // Create query with conditional enabled - only fetch when dropdown is open
     const projectsQuery = getOrganizationProjectsQuery({
+        enabled: () => open,
         route: {
             get organizationId() {
                 return organizationId;
@@ -41,6 +44,7 @@
 </script>
 
 <FacetedFilter.MultiSelect
+    bind:open
     changed={(values) => {
         filter.value = values;
         filterChanged(filter);
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/reference-faceted-filter-trigger.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/reference-faceted-filter-trigger.stories.svelte
new file mode 100644
index 0000000000..abb74bc7c9
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/reference-faceted-filter-trigger.stories.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" module>
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import ReferenceTrigger from './reference-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/Reference Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <ReferenceTrigger changed={() => {}} value="user-123">
+            <Filter class="size-3" />
+            reference:user-123
+        </ReferenceTrigger>
+        <ReferenceTrigger changed={() => {}} value="order-456">
+            <Filter class="size-3" />
+            reference:order-456
+        </ReferenceTrigger>
+        <ReferenceTrigger changed={() => {}} value="payment-789">
+            <Filter class="size-3" />
+            reference:payment-789
+        </ReferenceTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <ReferenceTrigger changed={() => {}} value="user-123" />
+        <ReferenceTrigger changed={() => {}} value="order-456" />
+        <ReferenceTrigger changed={() => {}} value="payment-789" />
+    </div>
+</Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/reference-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/reference-faceted-filter-trigger.svelte
index 3886501fcf..08a02fbcf1 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/reference-faceted-filter-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/reference-faceted-filter-trigger.svelte
@@ -4,21 +4,19 @@
 
     import { ReferenceFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: ReferenceFilter) => void;
         value?: string;
     };
     let { changed, children, class: className, value, ...props }: Props = $props();
-
-    const title = `Search reference:${value}`;
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
-    onclick={() => changed(new ReferenceFilter(value))}
-    {title}
-    class={[children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    onclick={() => changed(new ReferenceFilter(value ?? undefined))}
+    title={`Search reference:${value}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/session-faceted-filter-trigger.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/session-faceted-filter-trigger.stories.svelte
new file mode 100644
index 0000000000..49d30557cd
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/session-faceted-filter-trigger.stories.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" module>
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import SessionTrigger from './session-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/Session Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <SessionTrigger changed={() => {}} value="session-abc123">
+            <Filter class="size-3" />
+            session:session-abc123
+        </SessionTrigger>
+        <SessionTrigger changed={() => {}} value="session-def456">
+            <Filter class="size-3" />
+            session:session-def456
+        </SessionTrigger>
+        <SessionTrigger changed={() => {}} value="session-ghi789">
+            <Filter class="size-3" />
+            session:session-ghi789
+        </SessionTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <SessionTrigger changed={() => {}} value="session-abc123" />
+        <SessionTrigger changed={() => {}} value="session-def456" />
+        <SessionTrigger changed={() => {}} value="session-ghi789" />
+    </div>
+</Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/session-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/session-faceted-filter-trigger.svelte
index 4226b633ef..bce0a0264d 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/session-faceted-filter-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/session-faceted-filter-trigger.svelte
@@ -4,21 +4,19 @@
 
     import { SessionFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: SessionFilter) => void;
         value?: string;
     };
     let { changed, children, class: className, value, ...props }: Props = $props();
-
-    const title = `Search session:${value}`;
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
-    onclick={() => changed(new SessionFilter(value))}
-    {title}
-    class={[children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    onclick={() => changed(new SessionFilter(value ?? undefined))}
+    title={`Search session:${value}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/status-faceted-filter-trigger.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/status-faceted-filter-trigger.stories.svelte
new file mode 100644
index 0000000000..ebff44c2ca
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/status-faceted-filter-trigger.stories.svelte
@@ -0,0 +1,42 @@
+<script lang="ts" module>
+    import { StackStatus } from '$features/stacks/models';
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import StatusTrigger from './status-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/Status Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <StatusTrigger changed={() => {}} value={[StackStatus.Open]}>
+            <Filter class="size-3" />
+            Open
+        </StatusTrigger>
+        <StatusTrigger changed={() => {}} value={[StackStatus.Fixed]}>
+            <Filter class="size-3" />
+            Fixed
+        </StatusTrigger>
+        <StatusTrigger changed={() => {}} value={[StackStatus.Regressed]}>
+            <Filter class="size-3" />
+            Regressed
+        </StatusTrigger>
+        <StatusTrigger changed={() => {}} value={[StackStatus.Ignored]}>
+            <Filter class="size-3" />
+            Ignored
+        </StatusTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <StatusTrigger changed={() => {}} value={[StackStatus.Open]} />
+        <StatusTrigger changed={() => {}} value={[StackStatus.Fixed]} />
+        <StatusTrigger changed={() => {}} value={[StackStatus.Regressed]} />
+        <StatusTrigger changed={() => {}} value={[StackStatus.Ignored]} />
+    </div>
+</Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/status-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/status-faceted-filter-trigger.svelte
index 0b2a46d750..02ccac83f6 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/status-faceted-filter-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/status-faceted-filter-trigger.svelte
@@ -6,21 +6,19 @@
 
     import { StatusFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: StatusFilter) => void;
         value: StackStatus[];
     };
     let { changed, children, class: className, value, ...props }: Props = $props();
-
-    const title = `Search status:${value}`;
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
     onclick={() => changed(new StatusFilter(value))}
-    {title}
-    class={[children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    title={`Search status:${value}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/string-faceted-filter-trigger.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/string-faceted-filter-trigger.stories.svelte
new file mode 100644
index 0000000000..ed3881ec5f
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/string-faceted-filter-trigger.stories.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" module>
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import StringTrigger from './string-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/String Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <StringTrigger changed={() => {}} term="stack" value="abc123def">
+            <Filter class="size-3" />
+            stack:abc123def
+        </StringTrigger>
+        <StringTrigger changed={() => {}} term="reference" value="user-456">
+            <Filter class="size-3" />
+            reference:user-456
+        </StringTrigger>
+        <StringTrigger changed={() => {}} term="session" value="session-789">
+            <Filter class="size-3" />
+            session:session-789
+        </StringTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <StringTrigger changed={() => {}} term="stack" value="abc123" />
+        <StringTrigger changed={() => {}} term="reference" value="user-456" />
+        <StringTrigger changed={() => {}} term="session" value="session-789" />
+    </div>
+</Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/string-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/string-faceted-filter-trigger.svelte
index 4e07581df7..869bb47689 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/string-faceted-filter-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/string-faceted-filter-trigger.svelte
@@ -4,22 +4,20 @@
 
     import { StringFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: StringFilter) => void;
         term: string;
         value?: null | string;
     };
-    let { changed, children, class: className, term, value, ...props }: Props = $props();
-
-    const title = `Search ${term}:${value}`;
+    let { changed, children, class: className, term = '', value = null, ...props }: Props = $props();
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
     onclick={() => changed(new StringFilter(term, value ?? undefined))}
-    {title}
-    class={[children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    title={`Search ${term}:${value}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter-trigger.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter-trigger.stories.svelte
new file mode 100644
index 0000000000..db551704b4
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter-trigger.stories.svelte
@@ -0,0 +1,40 @@
+<script lang="ts" module>
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import TagTrigger from './tag-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/Tag Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <TagTrigger changed={() => {}} value={['production']}>
+            <Filter class="size-3" />
+            production
+        </TagTrigger>
+        <TagTrigger changed={() => {}} value={['critical']}>
+            <Filter class="size-3" />
+            critical
+        </TagTrigger>
+        <TagTrigger changed={() => {}} value={['api']}>
+            <Filter class="size-3" />
+            api
+        </TagTrigger>
+        <TagTrigger changed={() => {}} value={['backend']}>
+            <Filter class="size-3" />
+            backend
+        </TagTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <TagTrigger changed={() => {}} value={['production']} />
+        <TagTrigger changed={() => {}} value={['critical']} />
+        <TagTrigger changed={() => {}} value={['api']} />
+    </div>
+</Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter-trigger.svelte
index a51307484b..84764d224c 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter-trigger.svelte
@@ -4,21 +4,19 @@
 
     import { TagFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: TagFilter) => void;
         value: string[];
     };
-    let { changed, children, class: className, value, ...props }: Props = $props();
-
-    const title = `Filter by tag: ${value.join(', ')}`;
+    let { changed, children, class: className, value = [], ...props }: Props = $props();
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
     onclick={() => changed(new TagFilter(value))}
-    {title}
-    class={[children ? 'bg-primary text-primary-foreground opacity-100' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    title={`Filter by tag: ${value.join(', ')}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter.svelte
index cf3878f0d4..4392dd4602 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/tag-faceted-filter.svelte
@@ -8,11 +8,14 @@
 
     import { TagFilter } from './models.svelte';
 
-    let { filter, filterChanged, filterRemoved, title = 'Tag', ...props }: FacetedFilterProps<TagFilter> = $props();
+    let { filter, filterChanged, filterRemoved, open = $bindable(false), title = 'Tag', ...props }: FacetedFilterProps<TagFilter> = $props();
 
     // Store the organizationId to prevent loading when switching organizations.
     const organizationId = organization.current;
+
+    // Create query with conditional enabled - only fetch when dropdown is open
     const countQuery = getOrganizationCountQuery({
+        enabled: () => open,
         params: {
             aggregations: 'terms:tags'
         },
@@ -45,10 +48,12 @@
 </script>
 
 <FacetedFilter.MultiSelect
+    bind:open
     changed={(values: string[]) => {
         filter.value = values;
         filterChanged(filter);
     }}
+    loading={countQuery.isLoading}
     {options}
     remove={() => {
         filter.value = [];
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/type-faceted-filter-trigger.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/type-faceted-filter-trigger.stories.svelte
new file mode 100644
index 0000000000..41ba48e668
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/type-faceted-filter-trigger.stories.svelte
@@ -0,0 +1,41 @@
+<script lang="ts" module>
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import TypeTrigger from './type-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/Type Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <TypeTrigger changed={() => {}} value={['error']}>
+            <Filter class="size-3" />
+            Error
+        </TypeTrigger>
+        <TypeTrigger changed={() => {}} value={['log']}>
+            <Filter class="size-3" />
+            Log
+        </TypeTrigger>
+        <TypeTrigger changed={() => {}} value={['usage']}>
+            <Filter class="size-3" />
+            Usage
+        </TypeTrigger>
+        <TypeTrigger changed={() => {}} value={['404']}>
+            <Filter class="size-3" />
+            404
+        </TypeTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <TypeTrigger changed={() => {}} value={['error']} />
+        <TypeTrigger changed={() => {}} value={['log']} />
+        <TypeTrigger changed={() => {}} value={['usage']} />
+        <TypeTrigger changed={() => {}} value={['404']} />
+    </div>
+</Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/type-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/type-faceted-filter-trigger.svelte
index f23c93ba63..cd765ccd5c 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/type-faceted-filter-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/type-faceted-filter-trigger.svelte
@@ -4,21 +4,19 @@
 
     import { TypeFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: TypeFilter) => void;
         value: string[];
     };
     let { changed, children, class: className, value, ...props }: Props = $props();
-
-    const title = `Search type:${value}`;
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
     onclick={() => changed(new TypeFilter(value))}
-    {title}
-    class={[children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    title={`Search type:${value}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/version-faceted-filter-trigger.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/version-faceted-filter-trigger.stories.svelte
new file mode 100644
index 0000000000..f4e6ac6e31
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/version-faceted-filter-trigger.stories.svelte
@@ -0,0 +1,36 @@
+<script lang="ts" module>
+    import Filter from '@lucide/svelte/icons/filter';
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import VersionTrigger from './version-faceted-filter-trigger.svelte';
+
+    const { Story } = defineMeta({
+        tags: ['autodocs'],
+        title: 'Components/Events/Filters/Version Filter Trigger'
+    });
+</script>
+
+<Story name="With Text">
+    <div class="flex flex-wrap gap-2 p-4">
+        <VersionTrigger changed={() => {}} term="version" value="1.2.3">
+            <Filter class="size-3" />
+            version:1.2.3
+        </VersionTrigger>
+        <VersionTrigger changed={() => {}} term="version" value="2.0.0">
+            <Filter class="size-3" />
+            version:2.0.0
+        </VersionTrigger>
+        <VersionTrigger changed={() => {}} term="version" value="3.1.4">
+            <Filter class="size-3" />
+            version:3.1.4
+        </VersionTrigger>
+    </div>
+</Story>
+
+<Story name="Icon Only">
+    <div class="flex gap-2 p-4">
+        <VersionTrigger changed={() => {}} term="version" value="1.2.3" />
+        <VersionTrigger changed={() => {}} term="version" value="2.0.0" />
+        <VersionTrigger changed={() => {}} term="version" value="3.1.4" />
+    </div>
+</Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/version-faceted-filter-trigger.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/version-faceted-filter-trigger.svelte
index e6c4cc2ee9..ecb95424e5 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/version-faceted-filter-trigger.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/filters/version-faceted-filter-trigger.svelte
@@ -4,22 +4,20 @@
 
     import { VersionFilter } from './models.svelte';
 
-    type Props = ButtonProps & {
+    type Props = Omit<ButtonProps, 'value'> & {
         changed: (filter: VersionFilter) => void;
         term: string;
         value: string;
     };
     let { changed, children, class: className, term, value, ...props }: Props = $props();
-
-    const title = `Search ${term}:${value}`;
 </script>
 
 <Button
     variant="ghost"
     size={children ? 'xs' : 'icon-xs'}
-    onclick={() => changed(new VersionFilter(term, value))}
-    {title}
-    class={[children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
+    onclick={() => changed(new VersionFilter(term, value ?? undefined))}
+    title={`Search ${term}:${value}`}
+    class={['cursor-pointer', children ? '' : 'opacity-50 hover:opacity-100 focus-visible:opacity-100', className]}
     {...props}
 >
     {#if children}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte
index 438483f818..eb93c277e0 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte
@@ -13,10 +13,10 @@
 
     let { error }: Props = $props();
 
-    const errors = getErrors(error);
+    const errors = $derived(getErrors(error));
 </script>
 
-<pre class="bg-muted rounded p-2 break-words whitespace-pre-wrap"><Code class="px-0"
+<pre class="bg-muted rounded p-2 wrap-break-word whitespace-pre-wrap"><Code class="px-0"
         >{#each errors.reverse() as error, index (index)}<SimpleStackTraceHeader {error} /><SimpleStackTraceFrames {error} />{#if index < errors.length - 1}<br
                 />{/if}{/each}</Code
     ></pre>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte
index 4659bd62a1..87cdf795c8 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte
@@ -13,10 +13,10 @@
 
     let { error }: Props = $props();
 
-    const errors = getErrors(error);
+    const errors = $derived(getErrors(error));
 </script>
 
-<pre class="bg-muted rounded p-2 break-words whitespace-pre-wrap"><Code class="px-0"
+<pre class="bg-muted rounded p-2 wrap-break-word whitespace-pre-wrap"><Code class="px-0"
         >{#each errors.reverse() as error, index (index)}<StackTraceHeader {error} /><StackTraceFrames {error} />{#if index < errors.length - 1}<br
                 />{/if}{/each}</Code
     ></pre>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-error-summary.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-error-summary.svelte
index d7b6382547..d89813b081 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-error-summary.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-error-summary.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
+    import { resolve } from '$app/paths';
     import { A, Muted } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
     import ChevronRight from '@lucide/svelte/icons/chevron-right';
@@ -36,7 +37,7 @@
         </strong>
     {/if}
 
-    <A class="inline" href={`/next?filter=stack:${source.id}`}>
+    <A class="inline" href={`${resolve('/(app)')}?filter=stack:${source.id}`}>
         {source.title}
     </A>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-feature-summary.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-feature-summary.svelte
index 57fcbfe14d..bf03b6d71b 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-feature-summary.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-feature-summary.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
+    import { resolve } from '$app/paths';
     import { A } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
@@ -26,7 +27,7 @@
         <strong>Feature</strong>:&nbsp;
     {/if}
 
-    <A class="inline" href={`/next?filter=stack:${source.id}`}>
+    <A class="inline" href={`${resolve('/(app)')}?filter=stack:${source.id}`}>
         {source.title}
     </A>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-log-summary.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-log-summary.svelte
index df8d8c4348..f22420e07c 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-log-summary.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-log-summary.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
+    import { resolve } from '$app/paths';
     import { A } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
@@ -26,7 +27,7 @@
         <strong>Log source:</strong>&nbsp;
     {/if}
 
-    <A class="inline" href={`/next?filter=stack:${source.id}`}>
+    <A class="inline" href={`${resolve('/(app)')}?filter=stack:${source.id}`}>
         {#if source.data?.Source}
             <abbr title={source.data.Source}>{source.data.SourceShortName}</abbr>
         {:else}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-not-found-summary.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-not-found-summary.svelte
index e8c0c4df89..0723a40857 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-not-found-summary.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-not-found-summary.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
+    import { resolve } from '$app/paths';
     import { A } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
@@ -25,7 +26,7 @@
     {#if showType}
         <strong>404</strong>:&nbsp;
     {/if}
-    <A class="inline" href={`/next?filter=stack:${source.id}`}>
+    <A class="inline" href={`${resolve('/(app)')}?filter=stack:${source.id}`}>
         {source.title}
     </A>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-session-summary.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-session-summary.svelte
index 406eaf9afb..5d683637a4 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-session-summary.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-session-summary.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
+    import { resolve } from '$app/paths';
     import { A } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
@@ -26,7 +27,7 @@
         <strong>Session</strong>:&nbsp;
     {/if}
 
-    <A class="inline" href={`/next?filter=stack:${source.id}`}>
+    <A class="inline" href={`${resolve('/(app)')}?filter=stack:${source.id}`}>
         {source.title}
     </A>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-simple-summary.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-simple-summary.svelte
index 6fd8f8c765..d3f864c342 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-simple-summary.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-simple-summary.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
+    import { resolve } from '$app/paths';
     import { A, Muted } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
     import ChevronRight from '@lucide/svelte/icons/chevron-right';
@@ -26,7 +27,7 @@
         <abbr title={source.data.TypeFullName}>{source.data.Type}</abbr>:
     </strong>
 
-    <A class="inline" href={`/next?filter=stack:${source.id}`}>{source.title}</A>
+    <A class="inline" href={`${resolve('/(app)')}?filter=stack:${source.id}`}>{source.title}</A>
 </div>
 
 {#if source.data.Path}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-summary.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-summary.svelte
index 1fa5d688a2..3cad4a44a0 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-summary.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-summary.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { StackStatus } from '$features/stacks/models';
 
+    import { resolve } from '$app/paths';
     import { A } from '$comp/typography';
     import StackStatusBadge from '$features/stacks/components/stack-status-badge.svelte';
 
@@ -38,7 +39,7 @@
         :&nbsp;
     {/if}
 
-    <A class="inline" href={`/next?filter=stack:${source.id}`}>
+    <A class="inline" href={`${resolve('/(app)')}?filter=stack:${source.id}`}>
         {source.title}
     </A>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/api.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/api.svelte.ts
index 34ac8a01ae..63c984bda6 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/api.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/api.svelte.ts
@@ -21,6 +21,7 @@ export async function invalidateOrganizationQueries(queryClient: QueryClient, me
 }
 
 export const queryKeys = {
+    adminSearch: (params: GetAdminSearchOrganizationsParams) => [...queryKeys.list(params.mode), 'admin', { ...params }] as const,
     deleteOrganization: (ids: string[] | undefined) => [...queryKeys.ids(ids), 'delete'] as const,
     id: (id: string | undefined, mode: 'stats' | undefined) => (mode ? ([...queryKeys.type, id, { mode }] as const) : ([...queryKeys.type, id] as const)),
     ids: (ids: string[] | undefined) => [...queryKeys.type, ...(ids ?? [])] as const,
@@ -73,6 +74,19 @@ export interface DeleteSuspendOrganizationRequest {
     };
 }
 
+export interface GetAdminSearchOrganizationsParams {
+    criteria?: string;
+    limit?: number;
+    mode?: 'stats' | undefined;
+    page?: number;
+    paid?: boolean;
+    suspended?: boolean;
+}
+
+export interface GetAdminSearchOrganizationsRequest {
+    params?: GetAdminSearchOrganizationsParams;
+}
+
 export interface GetInvoiceRequest {
     route: {
         id: string;
@@ -211,6 +225,29 @@ export function deleteSuspendOrganization(request: DeleteSuspendOrganizationRequ
     }));
 }
 
+export function getAdminOrganizationsQuery(request: GetAdminSearchOrganizationsRequest) {
+    return createQuery<FetchClientResponse<ViewOrganization[]>, ProblemDetails>(() => ({
+        enabled: () => !!accessToken.current,
+        queryFn: async ({ signal }: { signal: AbortSignal }) => {
+            const client = useFetchClient();
+            const response = await client.getJSON<ViewOrganization[]>('admin/organizations', {
+                params: {
+                    criteria: request.params?.criteria,
+                    limit: request.params?.limit ?? 10,
+                    mode: request.params?.mode,
+                    page: request.params?.page ?? 1,
+                    paid: request.params?.paid,
+                    suspended: request.params?.suspended
+                },
+                signal
+            });
+
+            return response;
+        },
+        queryKey: queryKeys.adminSearch(request.params ?? {})
+    }));
+}
+
 export function getInvoiceQuery(request: GetInvoiceRequest) {
     const queryClient = useQueryClient();
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/dialogs/impersonate-organization-dialog.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/dialogs/impersonate-organization-dialog.svelte
new file mode 100644
index 0000000000..a7b3f2e589
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/dialogs/impersonate-organization-dialog.svelte
@@ -0,0 +1,482 @@
+<script lang="ts">
+    import type { ViewOrganization } from '$features/organizations/models';
+
+    import PageNumber from '$comp/page-number.svelte';
+    import { Muted, P } from '$comp/typography';
+    import * as Avatar from '$comp/ui/avatar';
+    import { Badge } from '$comp/ui/badge';
+    import { Button } from '$comp/ui/button';
+    import * as Dialog from '$comp/ui/dialog';
+    import { Pagination, PaginationContent, PaginationFirstButton, PaginationItem, PaginationNextButton, PaginationPrevButton } from '$comp/ui/pagination';
+    import * as Select from '$comp/ui/select';
+    import { Skeleton } from '$comp/ui/skeleton';
+    import { getAdminOrganizationsQuery } from '$features/organizations/api.svelte';
+    import SuspensionIndicator from '$features/organizations/components/suspension-indicator.svelte';
+    import { getSuspensionLabel } from '$features/organizations/suspension-utils';
+    import Number from '$features/shared/components/formatters/number.svelte';
+    import TimeAgo from '$features/shared/components/formatters/time-ago.svelte';
+    import Notification from '$features/shared/components/notification/notification.svelte';
+    import SearchInput from '$features/shared/components/search-input.svelte';
+    import { BillingStatus } from '$generated/api';
+    import { getInitials } from '$shared/strings';
+    import Activity from '@lucide/svelte/icons/activity';
+    import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
+    import Ban from '@lucide/svelte/icons/ban';
+    import Bug from '@lucide/svelte/icons/bug';
+    import Calendar from '@lucide/svelte/icons/calendar';
+    import CalendarCheck from '@lucide/svelte/icons/calendar-check';
+    import CalendarDays from '@lucide/svelte/icons/calendar-days';
+    import Clock from '@lucide/svelte/icons/clock';
+    import CreditCard from '@lucide/svelte/icons/credit-card';
+    import Folder from '@lucide/svelte/icons/folder';
+    import Gauge from '@lucide/svelte/icons/gauge';
+    import Gift from '@lucide/svelte/icons/gift';
+    import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+    import UserRoundSearch from '@lucide/svelte/icons/user-round-search';
+
+    interface Props {
+        impersonateOrganization: (organization: ViewOrganization) => Promise<void>;
+        open: boolean;
+        userOrganizationIds?: string[];
+    }
+
+    let { impersonateOrganization, open = $bindable(), userOrganizationIds = [] }: Props = $props();
+
+    let searchQuery = $state('');
+    let paidFilter = $state<boolean | undefined>(undefined);
+    let suspendedFilter = $state<boolean | undefined>(undefined);
+    let selectedOrganization = $state<null | ViewOrganization>(null);
+    let currentPage = $state(1);
+    const pageSize = 5;
+
+    const searchResults = getAdminOrganizationsQuery({
+        params: {
+            get criteria() {
+                return searchQuery || undefined;
+            },
+            limit: pageSize,
+            get page() {
+                return currentPage;
+            },
+            get paid() {
+                return paidFilter;
+            },
+            get suspended() {
+                return suspendedFilter;
+            }
+        }
+    });
+
+    const organizations = $derived(searchResults.data?.data ?? []);
+    const totalCount = $derived((searchResults.data?.meta?.total as number) ?? organizations.length);
+    const totalPages = $derived(Math.max(1, Math.ceil(totalCount / pageSize)));
+    const hasFilters = $derived(searchQuery !== '' || paidFilter !== undefined || suspendedFilter !== undefined);
+
+    function resetFilters() {
+        searchQuery = '';
+        paidFilter = undefined;
+        suspendedFilter = undefined;
+        currentPage = 1;
+        selectedOrganization = null;
+    }
+
+    function isUserMember(orgId: string | undefined): boolean {
+        return orgId ? userOrganizationIds.includes(orgId) : false;
+    }
+
+    const actionButtonText = $derived(selectedOrganization && isUserMember(selectedOrganization.id) ? 'View Organization' : 'Impersonate');
+    function handleSelect(organization: ViewOrganization) {
+        selectedOrganization = organization;
+    }
+
+    async function handleImpersonate() {
+        if (selectedOrganization) {
+            await impersonateOrganization(selectedOrganization);
+            open = false;
+            searchQuery = '';
+            selectedOrganization = null;
+            currentPage = 1;
+        }
+    }
+
+    function handleCancel() {
+        open = false;
+        searchQuery = '';
+        selectedOrganization = null;
+        currentPage = 1;
+    }
+
+    function handleOpenChange(isOpen: boolean) {
+        open = isOpen;
+        if (!isOpen) {
+            searchQuery = '';
+            paidFilter = undefined;
+            suspendedFilter = undefined;
+            selectedOrganization = null;
+            currentPage = 1;
+        }
+    }
+
+    function handlePageChange(page: number) {
+        currentPage = page;
+        selectedOrganization = null;
+    }
+
+    $effect(() => {
+        void searchQuery;
+        void paidFilter;
+        void suspendedFilter;
+        currentPage = 1;
+        selectedOrganization = null;
+    });
+
+    function getBillingStatusLabel(status: BillingStatus | null | undefined): string {
+        switch (status) {
+            case BillingStatus.Active:
+                return 'Active';
+            case BillingStatus.Canceled:
+                return 'Canceled';
+            case BillingStatus.PastDue:
+                return 'Past Due';
+            case BillingStatus.Trialing:
+                return 'Trialing';
+            case BillingStatus.Unpaid:
+                return 'Unpaid';
+            default:
+                return 'Unknown';
+        }
+    }
+
+    function getBillingStatusColor(status: BillingStatus | null | undefined): string {
+        switch (status) {
+            case BillingStatus.Active:
+                return 'text-green-600 dark:text-green-400';
+            case BillingStatus.Canceled:
+                return 'text-gray-500 dark:text-gray-400';
+            case BillingStatus.PastDue:
+                return 'text-orange-600 dark:text-orange-400';
+            case BillingStatus.Trialing:
+                return 'text-blue-600 dark:text-blue-400';
+            case BillingStatus.Unpaid:
+                return 'text-red-600 dark:text-red-400';
+            default:
+                return 'text-muted-foreground';
+        }
+    }
+
+    function getLastEventDate(org: ViewOrganization): null | string {
+        // Find the most recent hour with events from usage_hours
+        if (org.usage_hours && org.usage_hours.length > 0) {
+            const hoursWithEvents = org.usage_hours.filter((h) => h.total > 0).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+            if (hoursWithEvents.length > 0) {
+                return hoursWithEvents[0]!.date;
+            }
+        }
+        // Fall back to monthly usage if no hourly data
+        if (org.usage && org.usage.length > 0) {
+            const monthsWithEvents = org.usage.filter((u) => u.total > 0).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+            if (monthsWithEvents.length > 0) {
+                return monthsWithEvents[0]!.date;
+            }
+        }
+        return null;
+    }
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+    <Dialog.Content class="max-h-[90vh] sm:max-w-lg">
+        <Dialog.Header>
+            <Dialog.Title>Impersonate Organization</Dialog.Title>
+            <Dialog.Description>Select an organization to view as an admin.</Dialog.Description>
+        </Dialog.Header>
+
+        <div class="space-y-3 py-2">
+            <SearchInput bind:value={searchQuery} placeholder="Search by name or Id..." />
+
+            <div class="flex flex-wrap items-center gap-2">
+                <Select.Root
+                    type="single"
+                    value={paidFilter === undefined ? 'all' : paidFilter ? 'paid' : 'free'}
+                    onValueChange={(value) => {
+                        if (value === 'all') {
+                            paidFilter = undefined;
+                        } else {
+                            paidFilter = value === 'paid';
+                        }
+                    }}
+                >
+                    <Select.Trigger class="h-8 w-[120px]">
+                        {#if paidFilter === undefined}
+                            All Plans
+                        {:else if paidFilter}
+                            Paid
+                        {:else}
+                            Free
+                        {/if}
+                    </Select.Trigger>
+                    <Select.Content>
+                        <Select.Item value="all">All Plans</Select.Item>
+                        <Select.Item value="paid">Paid</Select.Item>
+                        <Select.Item value="free">Free</Select.Item>
+                    </Select.Content>
+                </Select.Root>
+
+                <Select.Root
+                    type="single"
+                    value={suspendedFilter === undefined ? 'all' : suspendedFilter ? 'suspended' : 'active'}
+                    onValueChange={(value) => {
+                        if (value === 'all') {
+                            suspendedFilter = undefined;
+                        } else {
+                            suspendedFilter = value === 'suspended';
+                        }
+                    }}
+                >
+                    <Select.Trigger class="h-8 w-[120px]">
+                        {#if suspendedFilter === undefined}
+                            All Status
+                        {:else if suspendedFilter}
+                            Suspended
+                        {:else}
+                            Active
+                        {/if}
+                    </Select.Trigger>
+                    <Select.Content>
+                        <Select.Item value="all">All Status</Select.Item>
+                        <Select.Item value="active">Active</Select.Item>
+                        <Select.Item value="suspended">Suspended</Select.Item>
+                    </Select.Content>
+                </Select.Root>
+
+                {#if hasFilters}
+                    <Button variant="ghost" size="sm" onclick={resetFilters} class="h-8 text-xs">Reset filters</Button>
+                {/if}
+            </div>
+
+            <div class="h-[45vh] min-h-[250px] overflow-y-auto rounded-md border">
+                <div class="p-1.5">
+                    {#if searchResults.isFetching}
+                        <div class="space-y-1">
+                            {#each [1, 2, 3, 4, 5] as i (i)}
+                                <div class="flex items-center gap-2.5 rounded-md p-2">
+                                    <Skeleton class="size-9 rounded-lg" />
+                                    <div class="flex-1 space-y-1">
+                                        <Skeleton class="h-4 w-36" />
+                                        <Skeleton class="h-3 w-28" />
+                                    </div>
+                                </div>
+                            {/each}
+                        </div>
+                    {:else if organizations.length > 0}
+                        <div class="space-y-0.5">
+                            {#each organizations as organization (organization.id)}
+                                {@const isSelected = selectedOrganization?.id === organization.id}
+                                {@const isMember = isUserMember(organization.id)}
+                                <div class="rounded-md {isSelected ? 'ring-primary bg-accent ring-1' : ''}">
+                                    <button
+                                        type="button"
+                                        onclick={() => handleSelect(organization)}
+                                        class="hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2.5 rounded-md p-2 text-left transition-colors"
+                                    >
+                                        <Avatar.Root class="size-9 shrink-0 rounded-lg border">
+                                            <Avatar.Fallback class="rounded-lg text-xs">
+                                                {getInitials(organization.name)}
+                                            </Avatar.Fallback>
+                                        </Avatar.Root>
+                                        <div class="min-w-0 flex-1">
+                                            <div class="flex items-center gap-1.5">
+                                                <P class="truncate text-sm font-medium">{organization.name}</P>
+                                                {#if organization.is_suspended}
+                                                    <SuspensionIndicator code={organization.suspension_code} notes={organization.suspension_notes} />
+                                                {:else}
+                                                    <Badge class="shrink-0 bg-green-100 text-[10px] text-green-700 dark:bg-green-900/30 dark:text-green-300"
+                                                        >Active</Badge
+                                                    >
+                                                {/if}
+                                                {#if isMember}
+                                                    <Badge class="shrink-0 bg-blue-100 text-[10px] text-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
+                                                        >Member</Badge
+                                                    >
+                                                {/if}
+                                            </div>
+                                            <Muted class="flex items-center gap-1 font-mono text-[11px]">
+                                                <span class="truncate">{organization.id}</span>
+                                                <span class="text-muted-foreground/50">•</span>
+                                                <span>{organization.plan_name}</span>
+                                            </Muted>
+                                        </div>
+                                    </button>
+
+                                    {#if isSelected}
+                                        <div class="space-y-2 border-t px-2.5 py-2 text-xs">
+                                            {#if organization.is_suspended}
+                                                <Notification variant="destructive" class="px-2 py-1.5 text-xs">
+                                                    {#snippet icon()}<Ban class="size-3.5" />{/snippet}
+                                                    <span>
+                                                        <span class="font-medium">Suspended</span>
+                                                        {#if organization.suspension_date}<TimeAgo value={organization.suspension_date} />{/if}
+                                                        for
+                                                        <span class="font-medium">{getSuspensionLabel(organization.suspension_code)}</span
+                                                        >{#if organization.suspension_notes}: {organization.suspension_notes}{/if}
+                                                    </span>
+                                                </Notification>
+                                            {/if}
+
+                                            {#if organization.is_over_monthly_limit || organization.is_over_request_limit}
+                                                <Notification variant="warning" class="px-2 py-1.5 text-xs">
+                                                    {#snippet icon()}<AlertTriangle class="size-3.5" />{/snippet}
+                                                    <span>
+                                                        <span class="font-medium">Over Limit:</span>
+                                                        {#if organization.is_over_monthly_limit}Monthly{/if}
+                                                        {#if organization.is_over_request_limit}{organization.is_over_monthly_limit ? ', ' : ''}Request{/if}
+                                                    </span>
+                                                </Notification>
+                                            {/if}
+
+                                            <div class="bg-muted/50 space-y-2.5 rounded-md px-2 py-2.5">
+                                                <div class="flex items-center justify-between">
+                                                    <div class="flex items-center gap-1.5">
+                                                        <Muted class="flex items-center gap-1.5"><CreditCard class="size-3.5" />Plan:</Muted>
+                                                        <span class="font-medium">{organization.plan_name}</span>
+                                                        <span class={getBillingStatusColor(organization.billing_status)}>
+                                                            {getBillingStatusLabel(organization.billing_status)}
+                                                        </span>
+                                                    </div>
+                                                    {#if organization.billing_change_date}
+                                                        <Muted>Changed <TimeAgo value={organization.billing_change_date} /></Muted>
+                                                    {/if}
+                                                </div>
+                                                {#if organization.subscribe_date}
+                                                    <div class="flex items-center justify-between">
+                                                        <div class="flex items-center gap-1.5">
+                                                            <Muted class="flex items-center gap-1.5"><CalendarCheck class="size-3.5" />Subscribed:</Muted>
+                                                            <span class="font-medium"><TimeAgo value={organization.subscribe_date} /></span>
+                                                        </div>
+                                                    </div>
+                                                {/if}
+                                                <div class="flex items-center justify-between">
+                                                    <div class="flex items-center gap-1.5">
+                                                        <Muted class="flex items-center gap-1.5"><Gauge class="size-3.5" />Limit:</Muted>
+                                                        <span class="font-medium"><Number value={organization.max_events_per_month} /> events/mo</span>
+                                                    </div>
+                                                </div>
+                                                <div class="flex items-center justify-between">
+                                                    <div class="flex items-center gap-1.5">
+                                                        <Muted class="flex items-center gap-1.5"><Clock class="size-3.5" />Retention:</Muted>
+                                                        <span class="font-medium"><Number value={organization.retention_days} /> days</span>
+                                                    </div>
+                                                </div>
+                                                {#if organization.bonus_events_per_month && organization.bonus_events_per_month > 0}
+                                                    <div class="flex items-center justify-between">
+                                                        <div class="flex items-center gap-1.5">
+                                                            <Muted class="flex items-center gap-1.5"><Gift class="size-3.5" />Bonus:</Muted>
+                                                            <span class="font-medium"><Number value={organization.bonus_events_per_month} /> events/mo</span>
+                                                        </div>
+                                                        {#if organization.bonus_expiration}
+                                                            <Muted>Expires <TimeAgo value={organization.bonus_expiration} /></Muted>
+                                                        {/if}
+                                                    </div>
+                                                {/if}
+                                            </div>
+
+                                            <div class="space-y-2 px-2">
+                                                <div class="flex gap-3">
+                                                    <Muted class="flex items-center gap-1.5">
+                                                        <Folder class="size-3.5" />
+                                                        <span class="text-foreground font-medium"><Number value={organization.project_count ?? 0} /></span>
+                                                        projects
+                                                    </Muted>
+                                                    <Muted class="flex items-center gap-1.5">
+                                                        <Bug class="size-3.5" />
+                                                        <span class="text-foreground font-medium"><Number value={organization.stack_count ?? 0} /></span>
+                                                        stacks
+                                                    </Muted>
+                                                    <Muted class="flex items-center gap-1.5">
+                                                        <CalendarDays class="size-3.5" />
+                                                        <span class="text-foreground font-medium"><Number value={organization.event_count ?? 0} /></span>
+                                                        events
+                                                    </Muted>
+                                                </div>
+                                                {#if organization.created_utc}
+                                                    <Muted class="flex items-center gap-1.5">
+                                                        <Calendar class="size-3.5" />
+                                                        Created
+                                                        <span class="text-foreground font-medium"><TimeAgo value={organization.created_utc} /></span>
+                                                    </Muted>
+                                                {/if}
+                                                {#if organization.updated_utc && organization.created_utc !== organization.updated_utc}
+                                                    <Muted class="flex items-center gap-1.5">
+                                                        <RefreshCw class="size-3.5" />
+                                                        Updated
+                                                        <span class="text-foreground font-medium"><TimeAgo value={organization.updated_utc} /></span>
+                                                    </Muted>
+                                                {/if}
+                                                {#if getLastEventDate(organization)}
+                                                    <Muted class="flex items-center gap-1.5">
+                                                        <Activity class="size-3.5" />
+                                                        Last Event
+                                                        <span class="text-foreground font-medium"><TimeAgo value={getLastEventDate(organization)!} /></span>
+                                                    </Muted>
+                                                {/if}
+                                            </div>
+                                        </div>
+                                    {/if}
+                                </div>
+                            {/each}
+                        </div>
+                    {:else}
+                        <div class="flex flex-col items-center justify-center py-8 text-center">
+                            <UserRoundSearch class="text-muted-foreground mb-2 size-8" />
+                            <P class="text-muted-foreground text-sm font-medium">No organizations found</P>
+                            <Muted class="text-xs">
+                                {#if hasFilters}
+                                    Try adjusting your search or <button type="button" class="text-primary hover:underline" onclick={resetFilters}
+                                        >reset filters</button
+                                    >
+                                {:else}
+                                    Try a different search query
+                                {/if}
+                            </Muted>
+                        </div>
+                    {/if}
+                </div>
+            </div>
+
+            <div class="flex items-center justify-between gap-3 text-xs sm:flex-nowrap">
+                <div class="flex items-center gap-2">
+                    <PageNumber {currentPage} size="xs" {totalPages} />
+                    {#if totalCount > 0}
+                        <Muted class="text-[11px]">{totalCount} organizations</Muted>
+                    {/if}
+                </div>
+                {#if totalPages > 1}
+                    <Pagination
+                        count={totalCount}
+                        bind:page={currentPage}
+                        class="mx-0 w-auto justify-start"
+                        onPageChange={handlePageChange}
+                        perPage={pageSize}
+                        siblingCount={0}
+                    >
+                        <PaginationContent class="gap-1">
+                            <PaginationItem>
+                                <PaginationFirstButton {currentPage} />
+                            </PaginationItem>
+                            <PaginationItem>
+                                <PaginationPrevButton />
+                            </PaginationItem>
+                            <PaginationItem>
+                                <PaginationNextButton />
+                            </PaginationItem>
+                        </PaginationContent>
+                    </Pagination>
+                {/if}
+            </div>
+        </div>
+
+        <Dialog.Footer>
+            <Button variant="outline" onclick={handleCancel}>Cancel</Button>
+            <Button onclick={handleImpersonate} disabled={!selectedOrganization}>{actionButtonText}</Button>
+        </Dialog.Footer>
+    </Dialog.Content>
+</Dialog.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/free-plan-notification.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/free-plan-notification.svelte
index e4f57a52e8..d6b75dd0e8 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/free-plan-notification.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/free-plan-notification.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { NotificationProps } from '$comp/notification';
 
+    import { resolve } from '$app/paths';
     import { Notification, NotificationDescription, NotificationTitle } from '$comp/notification';
     import { A } from '$comp/typography';
 
@@ -15,7 +16,7 @@
 <Notification variant="success" {...restProps}>
     <NotificationTitle>{name} is currently on a free plan.</NotificationTitle>
     <NotificationDescription>
-        <A href={`/next/organization/${organizationId}/billing?changePlan=true`}>Upgrade now</A>
+        <A href={`${resolve('/(app)/organization/[organizationId]/billing', { organizationId })}?changePlan=true`}>Upgrade now</A>
         to enable premium features and extra storage!
     </NotificationDescription>
 </Notification>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/hourly-overage-notification.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/hourly-overage-notification.svelte
index 0d06885ca9..cea6147ef2 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/hourly-overage-notification.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/hourly-overage-notification.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { NotificationProps } from '$comp/notification';
 
+    import { resolve } from '$app/paths';
     import { Notification, NotificationDescription, NotificationTitle } from '$comp/notification';
     import { A } from '$comp/typography';
 
@@ -16,6 +17,6 @@
     <NotificationTitle>Events are currently being throttled for {name}</NotificationTitle>
     <NotificationDescription>
         Events are currently being throttled to prevent using up your plan limit in a small window of time.
-        <A href={`/next/organization/${organizationId}/billing?changePlan=true`}>Upgrade now</A> to increase your limits.
+        <A href={`${resolve('/(app)/organization/[organizationId]/billing', { organizationId })}?changePlan=true`}>Upgrade now</A> to increase your limits.
     </NotificationDescription>
 </Notification>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/impersonation-notification.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/impersonation-notification.svelte
new file mode 100644
index 0000000000..777f521c61
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/impersonation-notification.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import type { NotificationProps } from '$comp/notification';
+    import type { ViewOrganization } from '$features/organizations/models';
+
+    import { goto } from '$app/navigation';
+    import { resolve } from '$app/paths';
+    import { Notification, NotificationDescription, NotificationTitle } from '$comp/notification';
+    import { Button } from '$comp/ui/button';
+    import { organization } from '$features/organizations/context.svelte';
+    import EyeIcon from '@lucide/svelte/icons/eye';
+
+    interface Props extends NotificationProps {
+        name: string;
+        userOrganizations: ViewOrganization[];
+    }
+
+    let { name, userOrganizations, ...restProps }: Props = $props();
+
+    async function stopImpersonating(): Promise<void> {
+        await goto(resolve('/(app)'));
+        organization.current = userOrganizations[0]?.id;
+    }
+</script>
+
+<Notification variant="impersonation" {...restProps}>
+    {#snippet icon()}<EyeIcon />{/snippet}
+    {#snippet action()}
+        {#if userOrganizations.length > 0}
+            <Button variant="outline" size="sm" onclick={stopImpersonating}>Stop Impersonating</Button>
+        {/if}
+    {/snippet}
+    <NotificationTitle>Impersonating {name}</NotificationTitle>
+    <NotificationDescription>You are viewing this organization as a global admin.</NotificationDescription>
+</Notification>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/monthly-overage-notification.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/monthly-overage-notification.svelte
index b9cf42c20c..e1e0f5f8d5 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/monthly-overage-notification.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/monthly-overage-notification.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { NotificationProps } from '$comp/notification';
 
+    import { resolve } from '$app/paths';
     import { Notification, NotificationDescription, NotificationTitle } from '$comp/notification';
     import { A } from '$comp/typography';
 
@@ -15,7 +16,7 @@
 <Notification variant="destructive" {...restProps}>
     <NotificationTitle>{name} has reached its monthly plan limit.</NotificationTitle>
     <NotificationDescription>
-        <A href={`/next/organization/${organizationId}/billing?changePlan=true`}>Upgrade now</A>
+        <A href={`${resolve('/(app)/organization/[organizationId]/billing', { organizationId })}?changePlan=true`}>Upgrade now</A>
         to continue receiving events.
     </NotificationDescription>
 </Notification>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/organization-notifications.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/organization-notifications.stories.svelte
index 7c4638d21f..eae4237066 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/organization-notifications.stories.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/organization-notifications.stories.svelte
@@ -1,4 +1,5 @@
 <script module lang="ts">
+    import type { ViewOrganization } from '$features/organizations/models';
     import type { ViewProject } from '$features/projects/models';
 
     import { SuspensionCode } from '$features/organizations/models';
@@ -6,6 +7,7 @@
 
     import FreePlanNotification from './free-plan-notification.svelte';
     import HourlyOverageNotification from './hourly-overage-notification.svelte';
+    import ImpersonationNotification from './impersonation-notification.svelte';
     import MonthlyOverageNotification from './monthly-overage-notification.svelte';
     import PremiumUpgradeNotification from './premium-upgrade-notification.svelte';
     import ProjectConfigurationNotification from './project-configuration-notification.svelte';
@@ -33,6 +35,13 @@
         }
     ];
 
+    const mockOrganizations: ViewOrganization[] = [
+        {
+            id: 'org1',
+            name: 'Test Organization'
+        } as ViewOrganization
+    ];
+
     const { Story } = defineMeta({
         tags: ['autodocs'],
         title: 'Components/Organizations/Notifications'
@@ -103,6 +112,10 @@
     />
 </Story>
 
+<Story name="Impersonation">
+    <ImpersonationNotification name="Admin User" userOrganizations={mockOrganizations} />
+</Story>
+
 <Story name="Premium Upgrade">
     <PremiumUpgradeNotification name="Feature Seeker Corp" organizationId="org1" />
 </Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/premium-upgrade-notification.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/premium-upgrade-notification.svelte
index 262f8c00bf..b6afa92546 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/premium-upgrade-notification.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/premium-upgrade-notification.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { NotificationProps } from '$comp/notification';
 
+    import { resolve } from '$app/paths';
     import { Notification, NotificationDescription, NotificationTitle } from '$comp/notification';
     import { A } from '$comp/typography';
 
@@ -15,7 +16,7 @@
 <Notification variant="information" {...restProps}>
     <NotificationTitle>{name} is attempting to use a premium feature.</NotificationTitle>
     <NotificationDescription>
-        <A href={`/next/organization/${organizationId}/billing?changePlan=true`}>Upgrade now</A>
+        <A href={`${resolve('/(app)/organization/[organizationId]/billing', { organizationId })}?changePlan=true`}>Upgrade now</A>
         to enable search and other premium features!
     </NotificationDescription>
 </Notification>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/project-configuration-notification.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/project-configuration-notification.svelte
index e04fa1f87b..b64d2f7d00 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/project-configuration-notification.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/project-configuration-notification.svelte
@@ -2,6 +2,7 @@
     import type { NotificationProps } from '$comp/notification';
     import type { ViewProject } from '$features/projects/models';
 
+    import { resolve } from '$app/paths';
     import { Notification, NotificationDescription, NotificationTitle } from '$comp/notification';
     import { A } from '$comp/typography';
 
@@ -18,7 +19,7 @@
         Please configure your clients for
         {#each projects as project, index (project.id)}
             {#if index > 0},
-            {/if}<A href="/next/project/{project.id}/configure">{project.name}</A>
+            {/if}<A href={resolve('/(app)/project/[projectId]/configure', { projectId: project.id })}>{project.name}</A>
         {/each}
         {#if projects.length === 1}
             project
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/setup-first-project-notification.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/setup-first-project-notification.svelte
index 381e2bea92..919dd1e5ea 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/setup-first-project-notification.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/setup-first-project-notification.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { NotificationProps } from '$comp/notification';
 
+    import { resolve } from '$app/paths';
     import { Notification, NotificationDescription, NotificationTitle } from '$comp/notification';
     import { A } from '$comp/typography';
 
@@ -11,7 +12,7 @@
     <NotificationTitle>Setup your first project</NotificationTitle>
     <NotificationDescription>
         Please
-        <A href="/next/project/add">add a new project</A>
+        <A href={resolve('/(app)/project/add')}>add a new project</A>
         and start becoming exceptionless in less than 60 seconds!
     </NotificationDescription>
 </Notification>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/suspended-organization-notification.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/suspended-organization-notification.svelte
index 9edd72ea3c..a5afad6824 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/suspended-organization-notification.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/notifications/suspended-organization-notification.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { NotificationProps } from '$comp/notification';
 
+    import { resolve } from '$app/paths';
     import { Notification, NotificationDescription, NotificationTitle } from '$comp/notification';
     import { A } from '$comp/typography';
     import { SuspensionCode } from '$features/organizations/models';
@@ -15,7 +16,7 @@
 
     let { isChatEnabled, name, openChat, organizationId, suspensionCode, ...restProps }: Props = $props();
 
-    const changePlanHref = `/next/organization/${organizationId}/billing?changePlan=true`;
+    const changePlanHref = $derived(`${resolve('/(app)/organization/[organizationId]/billing', { organizationId })}?changePlan=true`);
 </script>
 
 <Notification variant="destructive" {...restProps}>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/organization-notifications.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/organization-notifications.svelte
index 264f4dac74..36a2208b26 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/organization-notifications.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/organization-notifications.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
     import type { NotificationProps } from '$comp/notification';
 
-    import { getOrganizationQuery } from '$features/organizations/api.svelte';
+    import { getOrganizationQuery, getOrganizationsQuery } from '$features/organizations/api.svelte';
     import { organization as currentOrganizationId } from '$features/organizations/context.svelte';
     import { SuspensionCode } from '$features/organizations/models';
     import { getOrganizationProjectsQuery } from '$features/projects/api.svelte';
+    import { getMeQuery } from '$features/users/api.svelte';
 
     import FreePlanNotification from './notifications/free-plan-notification.svelte';
     import HourlyOverageNotification from './notifications/hourly-overage-notification.svelte';
+    import ImpersonationNotification from './notifications/impersonation-notification.svelte';
     import MonthlyOverageNotification from './notifications/monthly-overage-notification.svelte';
     import PremiumUpgradeNotification from './notifications/premium-upgrade-notification.svelte';
     import ProjectConfigurationNotification from './notifications/project-configuration-notification.svelte';
@@ -25,13 +27,21 @@
 
     let { ignoreConfigureProjects = false, ignoreFree = false, isChatEnabled, openChat, requiresPremium = false, ...restProps }: Props = $props();
 
-    // Store the organizationId to prevent loading when switching organizations.
-    const organizationId = currentOrganizationId.current;
+    const meQuery = getMeQuery();
+    const isGlobalAdmin = $derived(!!meQuery.data?.roles?.includes('global'));
 
-    const organizationsQuery = getOrganizationQuery({
+    const userOrganizationIds = $derived(meQuery.data?.organization_ids ?? []);
+    const isImpersonating = $derived(
+        isGlobalAdmin && currentOrganizationId.current !== undefined && !userOrganizationIds.includes(currentOrganizationId.current)
+    );
+
+    const organizationsQuery = getOrganizationsQuery({});
+    const userOrganizations = $derived((organizationsQuery.data?.data ?? []).filter((org) => userOrganizationIds.includes(org.id!)));
+
+    const organizationQuery = getOrganizationQuery({
         route: {
             get id() {
-                return organizationId;
+                return currentOrganizationId.current;
             }
         }
     });
@@ -39,13 +49,13 @@
     const projectsQuery = getOrganizationProjectsQuery({
         route: {
             get organizationId() {
-                return organizationId;
+                return currentOrganizationId.current;
             }
         }
     });
 
-    const organization = $derived(organizationsQuery.data);
-    const projects = $derived((projectsQuery.data?.data ?? []).filter((p) => p.organization_id === organizationId));
+    const organization = $derived(organizationQuery.data);
+    const projects = $derived((projectsQuery.data?.data ?? []).filter((p) => p.organization_id === currentOrganizationId.current));
     const projectsNeedingConfig = $derived(projects.filter((p) => p.is_configured === false));
 
     const suspensionCode: SuspensionCode | undefined = $derived(
@@ -65,11 +75,17 @@
     const isHourlyOverage = $derived(!!organization?.is_throttled);
     const isExceededRequestLimit = $derived(!!organization?.is_over_request_limit);
     const isFreePlan = $derived(!ignoreFree && /free/i.test(organization?.plan_name ?? ''));
-    const hasNoProjects = $derived((projects?.length ?? 0) === 0);
-    const needsProjectConfiguration = $derived(!ignoreConfigureProjects && projects?.length > 0 && projectsNeedingConfig.length === projects.length);
+    const hasNoProjects = $derived(projectsQuery.isSuccess && projects.length === 0);
+    const needsProjectConfiguration = $derived(
+        projectsQuery.isSuccess && !ignoreConfigureProjects && projects.length > 0 && projectsNeedingConfig.length === projects.length
+    );
     const requiresPremiumUpgrade = $derived(requiresPremium && !organization?.has_premium_features && !needsProjectConfiguration);
 </script>
 
+{#if isImpersonating && organization}
+    <ImpersonationNotification name={organization.name} {userOrganizations} {...restProps} />
+{/if}
+
 {#if organization}
     {#if isSuspended}
         <SuspendedOrganizationNotification
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/over-limit-indicator.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/over-limit-indicator.stories.svelte
new file mode 100644
index 0000000000..1c0759785a
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/over-limit-indicator.stories.svelte
@@ -0,0 +1,20 @@
+<script module lang="ts">
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import OverLimitIndicator from './over-limit-indicator.svelte';
+
+    const { Story } = defineMeta({
+        argTypes: {
+            isOverLimit: {
+                control: { type: 'boolean' },
+                defaultValue: true
+            }
+        },
+        component: OverLimitIndicator,
+        tags: ['autodocs'],
+        title: 'Components/Organizations/OverLimitIndicator'
+    });
+</script>
+
+<Story name="Over Limit" args={{ isOverLimit: true }} />
+<Story name="Not Over Limit" args={{ isOverLimit: false }} />
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/over-limit-indicator.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/over-limit-indicator.svelte
new file mode 100644
index 0000000000..be61e15f5b
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/over-limit-indicator.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import Badge from '$comp/ui/badge/badge.svelte';
+    import * as Tooltip from '$comp/ui/tooltip';
+
+    interface Props {
+        isOverLimit?: boolean;
+    }
+
+    let { isOverLimit = false }: Props = $props();
+</script>
+
+{#if isOverLimit}
+    <Tooltip.Root>
+        <Tooltip.Trigger>
+            {#snippet child({ props })}
+                <Badge {...props} variant="orange" class="cursor-help">Over Limit</Badge>
+            {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>This organization has exceeded its monthly event limit.</Tooltip.Content>
+    </Tooltip.Root>
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/suspension-indicator.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/suspension-indicator.stories.svelte
new file mode 100644
index 0000000000..abdc9d2f40
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/suspension-indicator.stories.svelte
@@ -0,0 +1,27 @@
+<script module lang="ts">
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+
+    import SuspensionIndicator from './suspension-indicator.svelte';
+
+    const { Story } = defineMeta({
+        argTypes: {
+            code: {
+                control: { type: 'select' },
+                options: ['Billing', 'Overage', 'Abuse', 'Other', undefined]
+            },
+            notes: {
+                control: { type: 'text' }
+            }
+        },
+        component: SuspensionIndicator,
+        tags: ['autodocs'],
+        title: 'Components/Organizations/SuspensionIndicator'
+    });
+</script>
+
+<Story name="Billing" args={{ code: 'Billing' }} />
+<Story name="Overage" args={{ code: 'Overage' }} />
+<Story name="Abuse" args={{ code: 'Abuse' }} />
+<Story name="Other" args={{ code: 'Other' }} />
+<Story name="Unknown" args={{ code: undefined }} />
+<Story name="With Notes" args={{ code: 'Billing', notes: 'Account payment failed on 2024-01-15. Customer contacted.' }} />
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/suspension-indicator.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/suspension-indicator.svelte
new file mode 100644
index 0000000000..f10ff24978
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/suspension-indicator.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import Badge from '$comp/ui/badge/badge.svelte';
+    import * as Tooltip from '$comp/ui/tooltip';
+    import { getSuspensionDescription } from '$features/organizations/suspension-utils';
+
+    interface Props {
+        code?: null | string;
+        notes?: null | string;
+    }
+
+    let { code, notes }: Props = $props();
+
+    function getLabel(code: null | string | undefined): string {
+        switch (code) {
+            case 'Abuse':
+                return 'Abuse';
+            case 'Billing':
+                return 'Billing';
+            case 'Other':
+                return 'Other';
+            case 'Overage':
+                return 'Overage';
+            default:
+                return 'Suspended';
+        }
+    }
+
+    function getVariant(code: null | string | undefined): 'amber' | 'orange' | 'red' {
+        switch (code) {
+            case 'Billing':
+                return 'amber';
+            case 'Overage':
+                return 'orange';
+            default:
+                return 'red';
+        }
+    }
+
+    const variant = $derived(getVariant(code));
+</script>
+
+<Tooltip.Root>
+    <Tooltip.Trigger>
+        {#snippet child({ props })}
+            <Badge {...props} {variant} class="cursor-help">
+                {getLabel(code)}
+            </Badge>
+        {/snippet}
+    </Tooltip.Trigger>
+    <Tooltip.Content>
+        {getSuspensionDescription(code, notes)}
+    </Tooltip.Content>
+</Tooltip.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/options.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/options.svelte.ts
index c4a77cb43f..1a9f7337e6 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/options.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/options.svelte.ts
@@ -2,13 +2,17 @@ import type { FetchClientResponse, ProblemDetails } from '@exceptionless/fetchcl
 import type { CreateQueryResult } from '@tanstack/svelte-query';
 
 import NumberFormatter from '$comp/formatters/number.svelte';
-import OrganizationsActionsCell from '$features/organizations/components/table/organization-actions-cell.svelte';
 import { ViewOrganization } from '$features/organizations/models';
 import { getSharedTableOptions, type TableMemoryPagingParameters } from '$features/shared/table.svelte';
 import { type ColumnDef, renderComponent } from '@tanstack/svelte-table';
 
 import type { GetOrganizationsMode, GetOrganizationsParams } from '../../api.svelte';
 
+import OrganizationsActionsCell from './organization-actions-cell.svelte';
+import OrganizationOverLimitCell from './organization-over-limit-cell.svelte';
+import OrganizationRetentionDaysCell from './organization-retention-days-cell.svelte';
+import OrganizationSuspensionCell from './organization-suspension-cell.svelte';
+
 export function getColumns<TOrganizations extends ViewOrganization>(mode: GetOrganizationsMode = 'stats'): ColumnDef<TOrganizations>[] {
     const columns: ColumnDef<TOrganizations>[] = [
         {
@@ -29,6 +33,44 @@ export function getColumns<TOrganizations extends ViewOrganization>(mode: GetOrg
             meta: {
                 class: 'w-[200px]'
             }
+        },
+        {
+            accessorFn: (row) => row.is_over_monthly_limit,
+            cell: (info) => renderComponent(OrganizationOverLimitCell, { isOverLimit: info.getValue<boolean>() }),
+            enableSorting: false,
+            header: 'Over Limit',
+            id: 'is_over_monthly_limit',
+            meta: {
+                class: 'w-24',
+                defaultHidden: true
+            }
+        },
+        {
+            accessorKey: 'retention_days',
+            cell: (info) => renderComponent(OrganizationRetentionDaysCell, { value: info.getValue<number>() }),
+            enableSorting: false,
+            header: 'Retention',
+            meta: {
+                class: 'w-24',
+                defaultHidden: true
+            }
+        },
+        {
+            accessorFn: (row) => row.is_suspended,
+            cell: (info) => {
+                const org = info.row.original;
+                return renderComponent(OrganizationSuspensionCell, {
+                    code: org.suspension_code,
+                    notes: org.suspension_notes
+                });
+            },
+            enableSorting: false,
+            header: 'Suspended',
+            id: 'is_suspended',
+            meta: {
+                class: 'w-28',
+                defaultHidden: true
+            }
         }
     ];
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-actions-cell.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-actions-cell.svelte
index 2aeb29960e..75d11ae0c2 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-actions-cell.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-actions-cell.svelte
@@ -83,15 +83,15 @@
         {/snippet}
     </DropdownMenu.Trigger>
     <DropdownMenu.Content align="end">
-        <DropdownMenu.Item onclick={() => goto(resolve(`/(app)/organization/[organizationId]/manage`, { organizationId: org.id }))}>
+        <DropdownMenu.Item onclick={() => goto(resolve('/(app)/organization/[organizationId]/manage', { organizationId: org.id }))}>
             <Edit />
             Edit
         </DropdownMenu.Item>
-        <DropdownMenu.Item onclick={() => goto(resolve(`/(app)/organization/[organizationId]/billing`, { organizationId: org.id }))}>
+        <DropdownMenu.Item onclick={() => goto(resolve('/(app)/organization/[organizationId]/billing', { organizationId: org.id }))}>
             <ChangePlan />
             Change Plan
         </DropdownMenu.Item>
-        <DropdownMenu.Item onclick={() => goto(resolve(`/(app)/organization/[organizationId]/billing`, { organizationId: org.id }))}>
+        <DropdownMenu.Item onclick={() => goto(resolve('/(app)/organization/[organizationId]/billing', { organizationId: org.id }))}>
             <ViewInvoices />
             View Invoices
         </DropdownMenu.Item>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-over-limit-cell.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-over-limit-cell.svelte
new file mode 100644
index 0000000000..d460a61a1f
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-over-limit-cell.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    import OverLimitIndicator from '../over-limit-indicator.svelte';
+
+    interface Props {
+        isOverLimit?: boolean;
+    }
+
+    let { isOverLimit = false }: Props = $props();
+</script>
+
+{#if isOverLimit}
+    <OverLimitIndicator {isOverLimit} />
+{:else}
+    -
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-retention-days-cell.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-retention-days-cell.svelte
new file mode 100644
index 0000000000..e1c7aac565
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-retention-days-cell.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    import NumberFormatter from '$comp/formatters/number.svelte';
+
+    interface Props {
+        value: number;
+    }
+
+    let { value }: Props = $props();
+</script>
+
+{#if value}
+    <NumberFormatter {value} /> days
+{:else}
+    -
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-suspension-cell.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-suspension-cell.svelte
new file mode 100644
index 0000000000..a004279ea7
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/components/table/organization-suspension-cell.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+    import SuspensionIndicator from '../suspension-indicator.svelte';
+
+    interface Props {
+        code?: null | string;
+        notes?: null | string;
+    }
+
+    let { code, notes }: Props = $props();
+</script>
+
+{#if code}
+    <SuspensionIndicator {code} {notes} />
+{:else}x -
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/suspension-utils.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/suspension-utils.ts
new file mode 100644
index 0000000000..dcb7db8641
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/organizations/suspension-utils.ts
@@ -0,0 +1,32 @@
+export function getSuspensionDescription(code: null | string | undefined, notes?: null | string): string {
+    if (notes?.trim()) {
+        return notes;
+    }
+
+    switch (code) {
+        case 'Abuse':
+            return 'This organization has been suspended due to abuse.';
+        case 'Billing':
+            return 'This organization has been suspended due to billing issues.';
+        case 'Overage':
+            return 'This organization has been suspended due to exceeding usage limits.';
+        case 'Other':
+        default:
+            return 'This organization has been suspended.';
+    }
+}
+
+export function getSuspensionLabel(code: null | string | undefined): string {
+    switch (code) {
+        case 'Abuse':
+            return 'Abuse Detected';
+        case 'Billing':
+            return 'Billing Issue';
+        case 'Other':
+            return 'Other';
+        case 'Overage':
+            return 'Over Limit';
+        default:
+            return 'Suspended';
+    }
+}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts
index 9a892854bc..c8bc428bb5 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts
@@ -87,6 +87,7 @@ export interface GetOrganizationProjectsParams {
 }
 
 export interface GetOrganizationProjectsRequest {
+    enabled?: () => boolean;
     params?: GetOrganizationProjectsParams;
     route: {
         organizationId: string | undefined;
@@ -279,7 +280,7 @@ export function getOrganizationProjectsQuery(request: GetOrganizationProjectsReq
     const queryClient = useQueryClient();
 
     return createQuery<FetchClientResponse<ViewProject[]>, ProblemDetails>(() => ({
-        enabled: () => !!accessToken.current && !!request.route.organizationId,
+        enabled: () => !!accessToken.current && !!request.route.organizationId && (request.enabled?.() ?? true),
         onSuccess: (data: FetchClientResponse<ViewProject[]>) => {
             data.data?.forEach((project) => {
                 queryClient.setQueryData(queryKeys.id(project.id!), project);
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-page-count.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-page-count.svelte
index 92b4831467..bbfaf332b9 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-page-count.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-page-count.svelte
@@ -5,25 +5,16 @@
 <script generics="TData" lang="ts">
     import type { Table } from '@tanstack/svelte-table';
 
-    import Number from '$comp/formatters/number.svelte';
+    import PageNumber from '$comp/page-number.svelte';
 
     interface Props {
         table: Table<TData>;
     }
 
     let { table }: Props = $props();
-</script>
-
-<div class="min-w-0 text-sm font-medium">
-    <div class="hidden items-center justify-center sm:flex">
-        <span class="truncate">Page <Number value={table.getState().pagination.pageIndex + 1} /> of <Number value={Math.max(1, table.getPageCount())} /></span>
-    </div>
 
-    <div class="flex items-center justify-center sm:hidden">
-        <span aria-hidden="true" class="truncate"
-            ><Number value={table.getState().pagination.pageIndex + 1} /> / <Number value={Math.max(1, table.getPageCount())} /></span
-        >
-    </div>
+    const currentPage = $derived(table.getState().pagination.pageIndex + 1);
+    const totalPages = $derived(Math.max(1, table.getPageCount()));
+</script>
 
-    <span class="sr-only">Page <Number value={table.getState().pagination.pageIndex + 1} /> of <Number value={Math.max(1, table.getPageCount())} /></span>
-</div>
+<PageNumber {currentPage} {totalPages} />
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte
index 4f2078a10e..8392bcc63f 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte
@@ -5,31 +5,33 @@
 <script generics="TData" lang="ts">
     import type { Table } from '@tanstack/svelte-table';
 
-    import { Button } from '$comp/ui/button';
-    import ChevronLeft from '@lucide/svelte/icons/chevron-left';
-    import ChevronRight from '@lucide/svelte/icons/chevron-right';
-    import ChevronDoubleLeft from '@lucide/svelte/icons/chevrons-left';
+    import { Pagination, PaginationContent, PaginationFirstButton, PaginationItem, PaginationNextButton, PaginationPrevButton } from '$comp/ui/pagination';
 
     interface Props {
         table: Table<TData>;
     }
 
     let { table }: Props = $props();
+    let page = $state(1);
+
+    const pageCount = $derived(Math.max(1, table.getPageCount() || 1));
+
+    function handlePageChange(nextPage: number) {
+        page = nextPage;
+        table.setPageIndex(nextPage - 1);
+    }
 </script>
 
-<div class="flex items-center space-x-2">
-    {#if table.getState().pagination.pageIndex > 1}
-        <Button class="hidden size-8 p-0 lg:flex" onclick={() => table.resetPageIndex(true)} variant="outline">
-            <span class="sr-only">Go to first page</span>
-            <ChevronDoubleLeft class="size-4" />
-        </Button>
-    {/if}
-    <Button class="size-8 p-0" disabled={!table.getCanPreviousPage()} onclick={() => table.previousPage()} variant="outline">
-        <span class="sr-only">Go to previous page</span>
-        <ChevronLeft class="size-4" />
-    </Button>
-    <Button class="size-8 p-0" disabled={!table.getCanNextPage()} onclick={() => table.nextPage()} variant="outline">
-        <span class="sr-only">Go to next page</span>
-        <ChevronRight class="size-4" />
-    </Button>
-</div>
+<Pagination count={pageCount} onPageChange={handlePageChange} {page} perPage={1} siblingCount={0} class="mx-0 w-auto justify-start">
+    <PaginationContent class="gap-1">
+        <PaginationItem>
+            <PaginationFirstButton currentPage={page} />
+        </PaginationItem>
+        <PaginationItem>
+            <PaginationPrevButton />
+        </PaginationItem>
+        <PaginationItem>
+            <PaginationNextButton />
+        </PaginationItem>
+    </PaginationContent>
+</Pagination>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/formatters/bytes.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/formatters/bytes.svelte
index ae57fe6ba4..80894099f1 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/formatters/bytes.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/formatters/bytes.svelte
@@ -5,7 +5,7 @@
 
     let { value }: Props = $props();
 
-    const parsedValue = typeof value === 'number' ? value : parseFloat(value ?? '');
+    const parsedValue = $derived(typeof value === 'number' ? value : parseFloat(value ?? ''));
     const byteValueNumberFormatter = new Intl.NumberFormat(navigator.language, {
         notation: 'compact',
         style: 'unit',
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/notification/notification.stories.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/notification/notification.stories.svelte
index d315a0313a..e57a3edf3c 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/notification/notification.stories.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/notification/notification.stories.svelte
@@ -1,5 +1,9 @@
 <script module lang="ts">
     import { A } from '$comp/typography';
+    import { Button } from '$comp/ui/button';
+    import Ban from '@lucide/svelte/icons/ban';
+    import CheckCircle from '@lucide/svelte/icons/check-circle';
+    import Eye from '@lucide/svelte/icons/eye';
     import { defineMeta } from '@storybook/addon-svelte-csf';
 
     import NotificationDescription from './notification-description.svelte';
@@ -15,6 +19,7 @@
 
 <Story name="Success">
     <Notification variant="success">
+        {#snippet icon()}<CheckCircle />{/snippet}
         <NotificationTitle>Operation completed successfully!</NotificationTitle>
         <NotificationDescription>Your changes have been saved and are now active. All affected users will see the updates immediately.</NotificationDescription>
     </Notification>
@@ -22,6 +27,7 @@
 
 <Story name="Destructive">
     <Notification variant="destructive">
+        {#snippet icon()}<Ban />{/snippet}
         <NotificationTitle>Something went wrong</NotificationTitle>
         <NotificationDescription>
             An error occurred while processing your request. Please try again or <A onclick={() => {}}>contact support</A> if the issue persists.
@@ -45,6 +51,31 @@
     </Notification>
 </Story>
 
+<Story name="Impersonation">
+    <Notification variant="impersonation">
+        {#snippet icon()}<Eye />{/snippet}
+        {#snippet action()}
+            <Button variant="outline" size="sm">Stop Impersonating</Button>
+        {/snippet}
+        <NotificationTitle>Impersonating Acme Corp</NotificationTitle>
+        <NotificationDescription>
+            You are viewing this organization as a global admin. Any changes you make will affect this organization directly.
+        </NotificationDescription>
+    </Notification>
+</Story>
+
+<Story name="With Action Only">
+    <Notification variant="information">
+        {#snippet action()}
+            <Button variant="outline" size="sm">Learn More</Button>
+        {/snippet}
+        <NotificationTitle>Upgrade available</NotificationTitle>
+        <NotificationDescription>
+            A new version is available with improved performance and features. Click to learn more about the changes.
+        </NotificationDescription>
+    </Notification>
+</Story>
+
 <Story name="Default">
     <Notification>
         <NotificationTitle>System notification</NotificationTitle>
@@ -53,3 +84,19 @@
         </NotificationDescription>
     </Notification>
 </Story>
+
+<Story name="Single Line With Icon">
+    <Notification variant="destructive">
+        {#snippet icon()}<Ban />{/snippet}
+        <NotificationTitle>This organization has been suspended due to non-payment.</NotificationTitle>
+    </Notification>
+</Story>
+
+<Story name="Single Line With Action">
+    <Notification variant="information">
+        {#snippet action()}
+            <Button variant="outline" size="sm">Dismiss</Button>
+        {/snippet}
+        <NotificationTitle>Your session will expire in 5 minutes.</NotificationTitle>
+    </Notification>
+</Story>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/notification/notification.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/notification/notification.svelte
index a4bedabb95..dc15aa08d7 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/notification/notification.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/notification/notification.svelte
@@ -1,11 +1,12 @@
 <script lang="ts" module>
+    import type { Snippet } from 'svelte';
     import type { HTMLAttributes } from 'svelte/elements';
 
     import { type WithElementRef } from '$lib/utils';
     import { tv, type VariantProps } from 'tailwind-variants';
 
     export const notificationVariants = tv({
-        base: 'relative w-full items-start gap-y-0.5 rounded-lg border border-l-4 px-4 py-3 text-sm has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+        base: 'relative flex w-full items-start gap-3 rounded-lg border border-l-4 px-4 py-3 text-sm',
         defaultVariants: {
             variant: 'default'
         },
@@ -13,6 +14,7 @@
             variant: {
                 default: 'border-l-border bg-background text-foreground',
                 destructive: 'border-l-red-500 bg-red-50 text-red-900 dark:bg-red-900/30 dark:text-red-200',
+                impersonation: 'border-l-violet-500 bg-violet-50 text-violet-900 dark:bg-violet-900/30 dark:text-violet-200',
                 information: 'border-l-blue-500 bg-blue-50 text-blue-900 dark:bg-blue-900/30 dark:text-blue-200',
                 success: 'border-l-green-500 bg-green-50 text-green-900 dark:bg-green-900/30 dark:text-green-200',
                 warning: 'border-l-yellow-500 bg-yellow-50 text-yellow-900 dark:bg-yellow-900/30 dark:text-yellow-200'
@@ -23,14 +25,38 @@
     export type NotificationVariant = VariantProps<typeof notificationVariants>['variant'];
 
     export type NotificationProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+        action?: Snippet;
+        icon?: Snippet;
         variant?: NotificationVariant;
     };
 </script>
 
 <script lang="ts">
-    let { children, class: className, ref = $bindable(null), variant = 'default', ...restProps }: NotificationProps = $props();
+    let { action, children, class: className, icon, ref = $bindable(null), variant = 'default', ...restProps }: NotificationProps = $props();
 </script>
 
 <div bind:this={ref} data-slot="notification" class={[notificationVariants({ variant }), className]} {...restProps} role="alert">
-    {@render children?.()}
+    {#if icon || action}
+        <div class="flex w-full flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+            <div class="flex items-start gap-3">
+                {#if icon}
+                    <span class="mt-0.5 shrink-0 [&>svg]:size-4">
+                        {@render icon()}
+                    </span>
+                {/if}
+                <div class="min-w-0 flex-1">
+                    {@render children?.()}
+                </div>
+            </div>
+            {#if action}
+                <div class="shrink-0 self-start sm:self-center">
+                    {@render action()}
+                </div>
+            {/if}
+        </div>
+    {:else}
+        <div class="min-w-0 flex-1">
+            {@render children?.()}
+        </div>
+    {/if}
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/object-dump.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/object-dump.svelte
index f17894f3fd..7bdf920933 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/object-dump.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/object-dump.svelte
@@ -13,11 +13,11 @@
 
     let { value }: Props = $props();
 
-    let type = typeof value;
-    let isBoolean = type === 'boolean' || value instanceof Boolean;
-    let isObject = (type === 'object' || value instanceof Object) && value !== null;
-    let isNull = value === null;
-    let isEmptyValue = isEmpty(value);
+    const type = $derived(typeof value);
+    const isBoolean = $derived(type === 'boolean' || value instanceof Boolean);
+    const isObject = $derived((type === 'object' || value instanceof Object) && value !== null);
+    const isNull = $derived(value === null);
+    const isEmptyValue = $derived(isEmpty(value));
 
     function isEmpty(value: unknown) {
         if (value === undefined) {
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/page-number.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/page-number.svelte
new file mode 100644
index 0000000000..2cf257d856
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/page-number.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import Number from '$comp/formatters/number.svelte';
+
+    interface Props {
+        class?: string;
+        currentPage: number;
+        size?: 'base' | 'sm' | 'xs';
+        totalPages: number;
+    }
+
+    let { class: className = '', currentPage, size = 'sm', totalPages }: Props = $props();
+
+    const displayPage = $derived(Math.max(1, currentPage));
+    const displayTotal = $derived(Math.max(1, totalPages));
+
+    function getSizeClass(size: 'base' | 'sm' | 'xs'): string {
+        switch (size) {
+            case 'base':
+                return 'text-base';
+            case 'xs':
+                return 'text-xs';
+            default:
+                return 'text-sm';
+        }
+    }
+</script>
+
+<div class={['min-w-0 font-medium', getSizeClass(size), className]}>
+    <div class="hidden items-center justify-center sm:flex">
+        <span class="truncate">Page <Number value={displayPage} /> of <Number value={displayTotal} /></span>
+    </div>
+
+    <div class="flex items-center justify-center sm:hidden">
+        <span aria-hidden="true" class="truncate"><Number value={displayPage} /> / <Number value={displayTotal} /></span>
+    </div>
+
+    <span class="sr-only">Page <Number value={displayPage} /> of <Number value={displayTotal} /></span>
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/badge/badge.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/badge/badge.svelte
index bfaa9c527b..34d37cfbc9 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/badge/badge.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/badge/badge.svelte
@@ -3,17 +3,23 @@
 
 	export const badgeVariants = tv({
 		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
-		variants: {
-			variant: {
-				default:
-					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
-				secondary:
-					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
-				destructive:
-					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
-				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-			},
-		},
+		   variants: {
+			   variant: {
+				   default:
+					   "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				   secondary:
+					   "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+				   destructive:
+					   "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				   outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+				   red:
+					   "bg-red-100 text-red-700 [a&]:hover:bg-red-200 border-transparent focus-visible:ring-red-400 dark:bg-red-900/30 dark:text-red-300 dark:[a&]:hover:bg-red-900/50",
+				   amber:
+					   "bg-amber-100 text-amber-700 [a&]:hover:bg-amber-200 border-transparent focus-visible:ring-amber-400 dark:bg-amber-900/30 dark:text-amber-300 dark:[a&]:hover:bg-amber-900/50",
+				   orange:
+					   "bg-orange-100 text-orange-700 [a&]:hover:bg-orange-200 border-transparent focus-visible:ring-orange-400 dark:bg-orange-900/30 dark:text-orange-300 dark:[a&]:hover:bg-orange-900/50",
+			   },
+		   },
 		defaultVariants: {
 			variant: "default",
 		},
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/breadcrumb/breadcrumb-list.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/breadcrumb/breadcrumb-list.svelte
index b5458fabf5..7431eee357 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/breadcrumb/breadcrumb-list.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/breadcrumb/breadcrumb-list.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="breadcrumb-list"
 	class={cn(
-		"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
+		"text-muted-foreground flex flex-wrap items-center gap-1.5 wrap-break-word text-sm sm:gap-2.5",
 		className
 	)}
 	{...restProps}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/index.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/index.ts
new file mode 100644
index 0000000000..c867c237c0
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/index.ts
@@ -0,0 +1,28 @@
+import Root from "./pagination.svelte";
+import Content from "./pagination-content.svelte";
+import Item from "./pagination-item.svelte";
+import Link from "./pagination-link.svelte";
+import FirstButton from "./pagination-first-button.svelte";
+import PrevButton from "./pagination-prev-button.svelte";
+import NextButton from "./pagination-next-button.svelte";
+import Ellipsis from "./pagination-ellipsis.svelte";
+
+export {
+    Root,
+    Content,
+    Item,
+    Link,
+    FirstButton,
+    PrevButton,
+    NextButton,
+    Ellipsis,
+    //
+    Root as Pagination,
+    Content as PaginationContent,
+    FirstButton as PaginationFirstButton,
+    Item as PaginationItem,
+	Link as PaginationLink,
+	PrevButton as PaginationPrevButton,
+	NextButton as PaginationNextButton,
+	Ellipsis as PaginationEllipsis,
+};
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-content.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-content.svelte
new file mode 100644
index 0000000000..e1124fce19
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
+</script>
+
+<ul
+	bind:this={ref}
+	data-slot="pagination-content"
+	class={cn("flex flex-row items-center gap-1", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</ul>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-ellipsis.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-ellipsis.svelte
new file mode 100644
index 0000000000..3be94c9ca4
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-ellipsis.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	aria-hidden="true"
+	data-slot="pagination-ellipsis"
+	class={cn("flex size-9 items-center justify-center", className)}
+	{...restProps}
+>
+	<EllipsisIcon class="size-4" />
+	<span class="sr-only">More pages</span>
+</span>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-first-button.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-first-button.svelte
new file mode 100644
index 0000000000..6a42fae6ef
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-first-button.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import ChevronsLeftIcon from "@lucide/svelte/icons/chevrons-left";
+
+	import { buttonVariants } from "$comp/ui/button/index.js";
+
+	type Props = Omit<PaginationPrimitive.PageProps, "page"> &
+		Partial<Pick<PaginationPrimitive.PageProps, "page">> & {
+			currentPage?: number;
+			showFromPage?: number;
+		};
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+			page = { type: "page", value: 1 },
+			currentPage = 1,
+			showFromPage = 3,
+			...restProps
+		}: Props = $props();
+
+		const show = $derived(currentPage >= showFromPage);
+		const computedClass = $derived([
+				buttonVariants({
+					size: "default",
+					variant: "ghost",
+					class: "gap-1 px-2.5 sm:ps-2.5",
+				}),
+				!show && "invisible pointer-events-none",
+				className
+            ]
+		);
+		const ariaHidden = $derived(show ? undefined : true);
+	</script>
+
+{#snippet Fallback()}
+	<ChevronsLeftIcon class="size-4" />
+	<span class="sr-only">Go to first page</span>
+{/snippet}
+
+<PaginationPrimitive.Page
+	bind:ref
+	aria-label="Go to first page"
+	aria-hidden={ariaHidden}
+	class={computedClass}
+	disabled={!show}
+	children={children || Fallback}
+	{page}
+	{...restProps}
+/>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-item.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-item.svelte
new file mode 100644
index 0000000000..fd7ffc3a7c
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-item.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import type { WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li bind:this={ref} data-slot="pagination-item" {...restProps}>
+	{@render children?.()}
+</li>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-link.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-link.svelte
new file mode 100644
index 0000000000..2cdd031959
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-link.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import { type Props, buttonVariants } from "$comp/ui/button/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "icon",
+		isActive,
+		page,
+		children,
+		...restProps
+	}: PaginationPrimitive.PageProps &
+		Props & {
+			isActive: boolean;
+		} = $props();
+</script>
+
+{#snippet Fallback()}
+	{page.value}
+{/snippet}
+
+<PaginationPrimitive.Page
+	bind:ref
+	{page}
+	aria-current={isActive ? "page" : undefined}
+	data-slot="pagination-link"
+	data-active={isActive}
+	class={cn(
+		buttonVariants({
+			variant: isActive ? "outline" : "ghost",
+			size,
+		}),
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-next-button.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-next-button.svelte
new file mode 100644
index 0000000000..d19b7c78a2
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-next-button.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { buttonVariants } from "$comp/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronRightIcon class="size-4" />
+{/snippet}
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	aria-label="Go to next page"
+	class={cn(
+		buttonVariants({
+			size: "default",
+			variant: "ghost",
+			class: "gap-1 px-2.5 sm:pe-2.5",
+		}),
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-prev-button.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-prev-button.svelte
new file mode 100644
index 0000000000..fbde95b66d
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination-prev-button.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import { buttonVariants } from "$comp/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeftIcon class="size-4" />
+{/snippet}
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	aria-label="Go to previous page"
+	class={cn(
+		buttonVariants({
+			size: "default",
+			variant: "ghost",
+			class: "gap-1 px-2.5 sm:ps-2.5",
+		}),
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination.svelte
new file mode 100644
index 0000000000..60e3471b0c
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/pagination/pagination.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		count = 0,
+		perPage = 10,
+		page = $bindable(1),
+		siblingCount = 1,
+		...restProps
+	}: PaginationPrimitive.RootProps = $props();
+</script>
+
+<PaginationPrimitive.Root
+	bind:ref
+	bind:page
+	role="navigation"
+	aria-label="pagination"
+	data-slot="pagination"
+	class={cn("mx-auto flex w-full justify-center", className)}
+	{count}
+	{perPage}
+	{siblingCount}
+	{...restProps}
+/>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/utils/cached-persisted-state.svelte.test.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/utils/cached-persisted-state.svelte.test.ts
new file mode 100644
index 0000000000..5517d20ae5
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/utils/cached-persisted-state.svelte.test.ts
@@ -0,0 +1,253 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { CachedPersistedState } from './cached-persisted-state.svelte';
+
+describe('CachedPersistedState', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe('initialization', () => {
+        it('should initialize with default value when storage is empty', () => {
+            const state = new CachedPersistedState('test-key', 'default');
+            expect(state.current).toBe('default');
+        });
+
+        it('should initialize with stored value when available', () => {
+            localStorage.setItem('test-key', JSON.stringify('stored-value'));
+            const state = new CachedPersistedState('test-key', 'default');
+            expect(state.current).toBe('stored-value');
+        });
+
+        it('should support custom serializer', () => {
+            const serializer = {
+                deserialize: (value: string) => Number(value) / 2,
+                serialize: (value: number) => String(value * 2)
+            };
+
+            localStorage.setItem('test-key', '20');
+            const state = new CachedPersistedState('test-key', 0, { serializer });
+            expect(state.current).toBe(10);
+        });
+    });
+
+    describe('reading values', () => {
+        it('should return cached value without reading storage repeatedly', () => {
+            const getItemSpy = vi.spyOn(Storage.prototype, 'getItem');
+            const serializer = {
+                deserialize: (value: string) => {
+                    return value;
+                },
+                serialize: (value: string) => value
+            };
+
+            localStorage.setItem('test-key', 'value1');
+            const state = new CachedPersistedState('test-key', 'default', { serializer });
+
+            // Reset spy after initial read
+            getItemSpy.mockClear();
+
+            // Multiple reads should only use the cache, not read storage
+            const val1 = state.current;
+            const val2 = state.current;
+            const val3 = state.current;
+
+            expect(val1).toBe('value1');
+            expect(val2).toBe('value1');
+            expect(val3).toBe('value1');
+
+            // Storage should not be read again (only initial read in constructor)
+            expect(getItemSpy).not.toHaveBeenCalled();
+        });
+
+        it('should deserialize value only once at initialization', () => {
+            const deserializeSpy = vi.fn((value: string) => JSON.parse(value));
+
+            localStorage.setItem('test-key', '{"name":"John"}');
+
+            const state = new CachedPersistedState(
+                'test-key',
+                { name: 'default' },
+                {
+                    serializer: {
+                        deserialize: deserializeSpy,
+                        serialize: (value: object) => JSON.stringify(value)
+                    }
+                }
+            );
+
+            // Assert deserialize was called exactly twice during construction:
+            // once in PersistedState constructor, once when CachedPersistedState reads .current
+            expect(deserializeSpy).toHaveBeenCalledTimes(2);
+
+            const callCountAfterConstruction = deserializeSpy.mock.calls.length;
+
+            // Multiple accesses after initialization should not call deserialize again (cached)
+            const val1 = state.current;
+            const val2 = state.current;
+            const val3 = state.current;
+
+            // Assert call count hasn't changed - deserialize was not called during reads
+            expect(deserializeSpy).toHaveBeenCalledTimes(callCountAfterConstruction);
+            expect(val1).toEqual({ name: 'John' });
+            expect(val2).toEqual({ name: 'John' });
+            expect(val3).toEqual({ name: 'John' });
+        });
+    });
+
+    describe('setting values', () => {
+        it('should update cache and persist to storage', () => {
+            const state = new CachedPersistedState('test-key', 'initial');
+            state.current = 'updated';
+
+            expect(state.current).toBe('updated');
+            expect(JSON.parse(localStorage.getItem('test-key')!)).toBe('updated');
+        });
+
+        it('should call serialize when setting value', () => {
+            const serializeSpy = vi.fn((value: string) => `[${value}]`);
+
+            const state = new CachedPersistedState('test-key', 'initial', {
+                serializer: {
+                    deserialize: (value: string) => value.slice(1, -1),
+                    serialize: serializeSpy
+                }
+            });
+
+            state.current = 'new-value';
+
+            expect(serializeSpy).toHaveBeenCalledWith('new-value');
+            expect(localStorage.getItem('test-key')).toBe('[new-value]');
+        });
+
+        it('should support object values', () => {
+            interface User {
+                id: number;
+                name: string;
+            }
+
+            const state = new CachedPersistedState<User>('user-key', { id: 0, name: 'default' });
+            const newUser = { id: 1, name: 'Alice' };
+
+            state.current = newUser;
+
+            expect(state.current).toEqual(newUser);
+            expect(JSON.parse(localStorage.getItem('user-key')!)).toEqual(newUser);
+        });
+    });
+
+    describe('cross-tab synchronization', () => {
+        it('should sync when PersistedState detects storage change', async () => {
+            const state = new CachedPersistedState('test-key', 'initial');
+
+            expect(state.current).toBe('initial');
+
+            // Simulate another tab updating storage
+            localStorage.setItem('test-key', JSON.stringify('from-other-tab'));
+
+            // Manually trigger the effect to sync (in real Svelte, storage events do this)
+            // Wait for reactivity to settle
+            await new Promise((resolve) => setTimeout(resolve, 0));
+
+            // The cache should eventually sync with the persisted value
+            // Note: This test verifies the mechanism is in place; full cross-tab requires storage events
+        });
+    });
+
+    describe('edge cases', () => {
+        it('should handle null values', () => {
+            const state = new CachedPersistedState<null | string>('test-key', null);
+            expect(state.current).toBeNull();
+
+            state.current = 'not-null';
+            expect(state.current).toBe('not-null');
+
+            state.current = null;
+            expect(state.current).toBeNull();
+        });
+
+        it('should handle undefined in stored data', () => {
+            // JSON.stringify(undefined) returns undefined (not a string), which localStorage
+            // converts to "undefined". JSON.parse("undefined") throws an error, and PersistedState's
+            // deserialize returns undefined. So the cached value will be undefined.
+            localStorage.setItem('test-key', String(JSON.stringify(undefined)));
+            const state = new CachedPersistedState<string | undefined>('test-key', 'default');
+            expect(state.current).toBeUndefined();
+        });
+
+        it('should handle complex nested objects', () => {
+            interface ComplexData {
+                metadata: {
+                    created: string;
+                    modified: string;
+                };
+                user: {
+                    name: string;
+                    tags: string[];
+                };
+            }
+
+            const complexData: ComplexData = {
+                metadata: { created: '2024-01-01', modified: '2024-01-02' },
+                user: { name: 'Bob', tags: ['admin', 'user'] }
+            };
+
+            const state = new CachedPersistedState<ComplexData>('complex-key', complexData);
+            const updated: ComplexData = {
+                metadata: { created: '2024-01-01', modified: '2024-01-03' },
+                user: { name: 'Alice', tags: ['user'] }
+            };
+
+            state.current = updated;
+
+            expect(state.current).toEqual(updated);
+            expect(state.current.user.name).toBe('Alice');
+            expect(state.current.metadata.modified).toBe('2024-01-03');
+        });
+    });
+
+    describe('performance', () => {
+        it('should minimize storage reads on repeated access', () => {
+            const getItemSpy = vi.spyOn(Storage.prototype, 'getItem');
+
+            const state = new CachedPersistedState('perf-key', 'value');
+
+            // Initial read happens during construction
+            const initialCallCount = getItemSpy.mock.calls.length;
+
+            // Perform 1000 reads
+            for (let i = 0; i < 1000; i++) {
+                void state.current;
+            }
+
+            // Should still be only the initial read (no additional storage reads)
+            expect(getItemSpy.mock.calls.length).toBe(initialCallCount);
+        });
+
+        it('should cache effectively during query enabled checks', () => {
+            const deserializeSpy = vi.fn((value: string) => JSON.parse(value));
+
+            localStorage.setItem('token-key', JSON.stringify('auth-token-123'));
+
+            const state = new CachedPersistedState('token-key', null, {
+                serializer: {
+                    deserialize: deserializeSpy,
+                    serialize: (value: null | string) => JSON.stringify(value)
+                }
+            });
+
+            // Reset spy after initialization
+            deserializeSpy.mockClear();
+
+            // Simulate 100 queries checking: enabled: () => !!state.current
+            for (let i = 0; i < 100; i++) {
+                if (state.current) {
+                    // Simulate enabled check
+                }
+            }
+
+            // Deserialize should NOT be called again (it's cached)
+            expect(deserializeSpy).not.toHaveBeenCalled();
+        });
+    });
+});
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/utils/cached-persisted-state.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/utils/cached-persisted-state.svelte.ts
new file mode 100644
index 0000000000..a989bed297
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/utils/cached-persisted-state.svelte.ts
@@ -0,0 +1,40 @@
+import { PersistedState } from 'runed';
+import { untrack } from 'svelte';
+
+/**
+ * Wraps PersistedState to cache reads and prevent excessive reactive signal triggers.
+ *
+ * Problem: PersistedState reads from localStorage and calls deserialize on every `.current` access,
+ * which triggers reactive subscriptions. When dozens of queries check `enabled: () => !!state.current`,
+ * this causes a cascading reactivity loop.
+ *
+ * Solution: Cache the value in a local $state. Reads come from the cache (instant, no deserialize).
+ * Writes update both the cache and PersistedState. PersistedState handles cross-tab sync internally.
+ */
+export class CachedPersistedState<T> {
+    /**
+     * Get the cached value without triggering PersistedState's deserialize
+     */
+    get current(): T {
+        return this.#cached;
+    }
+    /**
+     * Set the value, updating both the cache and PersistedState
+     */
+    set current(newValue: T) {
+        this.#cached = newValue;
+        this.#persisted.current = newValue;
+    }
+
+    #cached = $state<T>(null!);
+
+    #persisted: PersistedState<T>;
+
+    constructor(key: string, initialValue: T, options?: object) {
+        // Initialize PersistedState from storage
+        this.#persisted = new PersistedState(key, initialValue, options);
+
+        // Cache the initial value (untrack to avoid creating dependencies during construction)
+        this.#cached = untrack(() => this.#persisted.current);
+    }
+}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-card.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-card.svelte
index 5fa2b39e54..84f770d87e 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-card.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-card.svelte
@@ -24,6 +24,7 @@
     import Filter from '@lucide/svelte/icons/filter';
     import Users from '@lucide/svelte/icons/users';
 
+    import StackLogLevel from './stack-log-level.svelte';
     import StackOptionsDropdownMenu from './stack-options-dropdown-menu.svelte';
     import StackReferences from './stack-references.svelte';
     import StackStatusDropdownMenu from './stack-status-dropdown-menu.svelte';
@@ -121,7 +122,8 @@
                         <span class="block max-w-full min-w-0 truncate" title={stack.title}>{stack.title}</span>
                     </div>
                 </div>
-                <div class="ml-2 flex shrink-0">
+                <div class="ml-2 flex shrink-0 items-center gap-2">
+                    <StackLogLevel {stack} />
                     <ButtonGroup.Root>
                         <StackStatusDropdownMenu {stack} />
                         <StackOptionsDropdownMenu {stack} />
@@ -133,8 +135,11 @@
             <div class="grid auto-rows-min grid-cols-2 gap-2 lg:grid-cols-4">
                 <Tooltip.Root>
                     <Tooltip.Trigger
-                        class="bg-muted flex flex-col items-center rounded-lg p-2"
+                        class="bg-muted hover:bg-muted/80 flex cursor-pointer flex-col items-center rounded-lg p-2 transition-colors"
                         onclick={() => filterChanged(new StringFilter('stack', stack.id))}
+                        aria-label="Filter by this stack"
+                        role="button"
+                        tabindex={0}
                     >
                         <Calendar class="text-primary mb-1 size-6" />
                         <span class="text-lg font-bold"><Number value={totalOccurrences} /></span>
@@ -238,6 +243,12 @@
                     </div>
                 {/each}
             </div>
+
+            <div class="flex justify-end">
+                <Muted class="text-xs uppercase">Last 7 days</Muted>
+            </div>
+
+            <Skeleton class="h-12 w-full rounded-md" />
         </Card.Content>
     </Card.Root>
 {/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-log-level.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-log-level.svelte
new file mode 100644
index 0000000000..f81ba54421
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-log-level.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import type { Stack } from '$lib/generated/api';
+
+    import ProjectLogLevel from '$features/projects/components/project-log-level.svelte';
+
+    interface Props {
+        stack: Stack;
+    }
+
+    let { stack }: Props = $props();
+
+    const source = $derived(stack.signature_info?.['Source'] ?? '');
+</script>
+
+{#if stack.type === 'log' && source}
+    <ProjectLogLevel projectId={stack.project_id} {source} />
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/websockets/web-socket-client.svelte.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/websockets/web-socket-client.svelte.ts
index 08fa17d549..1596a81630 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/websockets/web-socket-client.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/websockets/web-socket-client.svelte.ts
@@ -2,39 +2,90 @@ import { DocumentVisibility } from '$shared/document-visibility.svelte';
 
 import { accessToken } from '../auth/index.svelte';
 
+export interface WebSocketClientOptions {
+    /**
+     * Base URL for WebSocket connection (e.g., 'ws://localhost:1234')
+     * If not provided, constructs from window.location
+     */
+    baseUrl?: string;
+    /**
+     * Connection timeout in milliseconds
+     * Default: 10000ms (10 seconds)
+     */
+    connectionTimeout?: number;
+    /**
+     * Custom reconnection delay calculator
+     * Default uses exponential backoff: 1s, 2s, 4s, 8s, 16s, max 30s
+     * For testing, can return 0 to reconnect immediately
+     */
+    reconnectDelay?: (attempt: number) => number;
+}
+
 export class WebSocketClient {
-    public readyState: number = WebSocket.CLOSED;
+    public readyState = $state<number>(WebSocket.CLOSED);
+
+    /**
+     * Lazy getter for WebSocket URL.
+     * Constructed on first access. Uses baseUrl from options if provided, otherwise constructs from window.location.
+     */
+    public get url(): string {
+        if (this._url === null) {
+            if (this._options.baseUrl) {
+                this._url = `${this._options.baseUrl}${this._path}`;
+            } else {
+                const { host, protocol } = window.location;
+                const wsProtocol = protocol === 'https:' ? 'wss://' : 'ws://';
+                this._url = `${wsProtocol}${host}${this._path}`;
+            }
+        }
+        return this._url;
+    }
 
-    public reconnectInterval: number = 1000;
-    public timeoutInterval: number = 2000;
-    public url: string;
+    private _options: WebSocketClientOptions;
+    private _path: string;
+    private _url: null | string = null;
     private accessToken: null | string = null;
-
+    private connectionTimeoutId: null | ReturnType<typeof setTimeout> = null;
     private forcedClose: boolean = false;
-    private timedOut: boolean = false;
+    private hasConnectedBefore: boolean = false;
+    private reconnectAttempts: number = 0;
+    private reconnectTimeoutId: null | ReturnType<typeof setTimeout> = null;
+
     private ws: null | WebSocket = null;
 
-    constructor(path: string = '/api/v2/push') {
-        const { host, protocol } = window.location;
-        const wsProtocol = protocol === 'https:' ? 'wss://' : 'ws://';
-        this.url = `${wsProtocol}${host}${path}`;
+    /**
+     * @param path - WebSocket path (default: '/api/v2/push')
+     * @param options - Optional configuration
+     */
+    constructor(path: string = '/api/v2/push', options: WebSocketClientOptions = {}) {
+        this._path = path;
+        this._options = options;
 
         const visibility = new DocumentVisibility();
 
         $effect(() => {
             if (this.accessToken !== accessToken.current) {
                 this.accessToken = accessToken.current;
+                this.reconnectAttempts = 0; // Reset backoff on token change
                 this.close();
             } else if (!visibility.visible) {
                 this.close();
             }
 
-            if (this.accessToken && visibility.visible && (this.readyState === WebSocket.CLOSING || this.readyState === WebSocket.CLOSED)) {
+            // Only auto-connect if we're fully closed and don't have a pending reconnect attempt
+            // Don't try to connect if we're CONNECTING, OPEN, or CLOSING
+            if (this.accessToken && visibility.visible && this.readyState === WebSocket.CLOSED && this.reconnectTimeoutId === null) {
                 this.connect();
             }
         });
     }
+
     public close(): boolean {
+        clearTimeout(this.reconnectTimeoutId!);
+        this.reconnectTimeoutId = null;
+        clearTimeout(this.connectionTimeoutId!);
+        this.connectionTimeoutId = null;
+
         if (this.ws) {
             this.forcedClose = true;
             this.ws.close();
@@ -43,61 +94,102 @@ export class WebSocketClient {
 
         return false;
     }
-    public connect(reconnectAttempt: boolean = true) {
-        const isReconnect: boolean = this.forcedClose;
+
+    public connect() {
+        // isReconnect means: have we successfully connected before?
+        const isReconnect: boolean = this.hasConnectedBefore;
 
         // Reset state
         this.readyState = WebSocket.CONNECTING;
         this.forcedClose = false;
 
-        this.ws = new WebSocket(`${this.url}?access_token=${this.accessToken}`);
-        this.onConnecting(isReconnect);
+        try {
+            this.ws = new WebSocket(`${this.url}?access_token=${this.accessToken}`);
+            this.onConnecting(isReconnect);
+        } catch (error) {
+            console.error('[WebSocketClient] Failed to create WebSocket', error);
+            throw error;
+        }
 
-        const localWs = this.ws;
-        const timeout = setTimeout(() => {
-            this.timedOut = true;
-            localWs.close();
-            this.timedOut = false;
-        }, this.timeoutInterval);
+        // Connection timeout: if we don't connect within configured timeout, force close
+        clearTimeout(this.connectionTimeoutId!);
+        const timeout = this._options.connectionTimeout ?? 10000;
+        this.connectionTimeoutId = setTimeout(() => {
+            this.connectionTimeoutId = null;
+            if (this.ws && this.readyState === WebSocket.CONNECTING) {
+                console.warn(`[WebSocketClient] Connection timeout after ${timeout}ms`);
+                this.ws.close();
+            }
+        }, timeout);
 
         this.ws.onopen = (event: Event) => {
-            clearTimeout(timeout);
-
+            clearTimeout(this.connectionTimeoutId!);
+            this.connectionTimeoutId = null;
             this.readyState = WebSocket.OPEN;
-            reconnectAttempt = false;
+            this.reconnectAttempts = 0; // Reset backoff on successful connection
+            this.hasConnectedBefore = true; // Mark that we've connected successfully
             this.onOpen(event, isReconnect);
         };
 
         this.ws.onclose = (event: CloseEvent) => {
-            clearTimeout(timeout);
+            clearTimeout(this.connectionTimeoutId!);
+            this.connectionTimeoutId = null;
             this.ws = null;
 
             if (this.forcedClose) {
                 this.readyState = WebSocket.CLOSED;
                 this.onClose(event);
-            } else {
-                this.readyState = WebSocket.CONNECTING;
-                this.onConnecting(isReconnect);
-                if (!reconnectAttempt && !this.timedOut) {
-                    this.onClose(event);
-                }
-                setTimeout(() => {
-                    this.connect(true);
-                }, this.reconnectInterval);
+                return;
+            }
+
+            // Don't retry on authentication/authorization failures
+            // Code 1008 (Policy Violation) is explicit auth failure
+            // Code 1006 (Abnormal Closure) during handshake could be 401/403
+            // Codes 4xxx are custom application codes (e.g., 4401=401, 4403=403)
+            const isAuthFailure = event.code === 1008 || (event.code === 1006 && event.wasClean === false) || (event.code >= 4400 && event.code < 4500);
+            if (isAuthFailure) {
+                console.warn('[WebSocketClient] Auth failure detected, not reconnecting', {
+                    code: event.code,
+                    reason: event.reason
+                });
+                this.readyState = WebSocket.CLOSED;
+                this.onClose(event);
+                return; // Let the auth system handle redirect to login
             }
+
+            // Calculate reconnection delay with exponential backoff
+            this.reconnectAttempts++;
+            const delay = this.getReconnectDelay(this.reconnectAttempts);
+
+            this.onConnecting(true); // Always true when reconnecting after close
+            this.onClose(event);
+
+            // Schedule reconnect - clear any existing timeout first
+            clearTimeout(this.reconnectTimeoutId!);
+            this.reconnectTimeoutId = setTimeout(() => {
+                this.reconnectTimeoutId = null;
+                this.connect();
+            }, delay);
         };
+
         this.ws.onmessage = (event) => {
             this.onMessage(event);
         };
+
         this.ws.onerror = (event) => {
+            console.error('[WebSocketClient] onerror triggered', {
+                event,
+                readyState: this.readyState,
+                reconnectAttempts: this.reconnectAttempts
+            });
             this.onError(event);
         };
     }
+
     public onClose: (ev: CloseEvent) => void = () => {};
-    public onConnecting: (isReconnect: boolean) => void = () => {};
 
+    public onConnecting: (isReconnect: boolean) => void = () => {};
     public onError: (ev: Event) => void = () => {};
-
     public onMessage: (ev: MessageEvent) => void = () => {};
 
     public onOpen: (ev: Event, isReconnect: boolean) => void = () => {};
@@ -109,4 +201,16 @@ export class WebSocketClient {
             throw new Error('INVALID_STATE_ERR : Pausing to reconnect websocket');
         }
     }
+
+    /**
+     * Calculate reconnection delay using exponential backoff
+     * Can be overridden via options for testing
+     */
+    private getReconnectDelay(attempt: number): number {
+        if (this._options.reconnectDelay) {
+            return this._options.reconnectDelay(attempt);
+        }
+        // Default: exponential backoff 1s, 2s, 4s, 8s, 16s, max 30s
+        return Math.min(1000 * Math.pow(2, attempt - 1), 30000);
+    }
 }
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/websockets/web-socket-client.test.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/websockets/web-socket-client.test.ts
new file mode 100644
index 0000000000..c7138d1206
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/websockets/web-socket-client.test.ts
@@ -0,0 +1,494 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import WS from 'vitest-websocket-mock';
+
+import { WebSocketClient, type WebSocketClientOptions } from './web-socket-client.svelte';
+
+// Mock the auth module
+vi.mock('../auth/index.svelte', () => ({
+    accessToken: {
+        current: 'test-token-123'
+    }
+}));
+
+// Mock DocumentVisibility to always return visible
+vi.mock('$shared/document-visibility.svelte', () => {
+    return {
+        DocumentVisibility: class {
+            visible = true;
+        }
+    };
+});
+
+let server: WS;
+
+beforeEach(() => {
+    server = new WS('ws://localhost:1234/api/v2/push');
+});
+
+afterEach(() => {
+    WS.clean();
+});
+
+function createClient(path?: string, options?: WebSocketClientOptions): WebSocketClient {
+    return new WebSocketClient(path, {
+        baseUrl: 'ws://localhost:1234',
+        reconnectDelay: () => 0,
+        ...options
+    });
+}
+
+describe('WebSocketClient', () => {
+    describe('Connection Lifecycle', () => {
+        it('should connect successfully', async () => {
+            const client = createClient();
+            client.connect();
+            await server.connected;
+
+            expect(client.readyState).toBe(WebSocket.OPEN);
+            client.close();
+        });
+
+        it('should set readyState to CONNECTING then OPEN', async () => {
+            const client = createClient();
+            client.connect();
+
+            expect(client.readyState).toBe(WebSocket.CONNECTING);
+            await server.connected;
+            expect(client.readyState).toBe(WebSocket.OPEN);
+
+            client.close();
+        });
+
+        it('should call onConnecting with isReconnect=false on first connection', async () => {
+            const onConnecting = vi.fn();
+            const client = createClient();
+            client.onConnecting = onConnecting;
+
+            client.connect();
+            expect(onConnecting).toHaveBeenCalledWith(false);
+            await server.connected;
+
+            client.close();
+        });
+
+        it('should call onOpen with isReconnect=false on first connection', async () => {
+            const onOpen = vi.fn();
+            const client = createClient();
+            client.onOpen = onOpen;
+
+            client.connect();
+            await server.connected;
+
+            expect(onOpen).toHaveBeenCalledWith(expect.anything(), false);
+            client.close();
+        });
+
+        it('should handle multiple connect calls gracefully', async () => {
+            const client = createClient();
+
+            client.connect();
+            client.connect();
+            client.connect();
+
+            await server.connected;
+            expect(client.readyState).toBe(WebSocket.OPEN);
+
+            client.close();
+        });
+
+        it('should use custom connectionTimeout option', async () => {
+            const onConnecting = vi.fn();
+            const client = new WebSocketClient('/api/v2/push', {
+                baseUrl: 'ws://localhost:9999',
+                connectionTimeout: 75, // Very short timeout
+                reconnectDelay: () => 1000 // Prevent immediate reconnect
+            });
+            client.onConnecting = onConnecting;
+
+            client.connect();
+            expect(client.readyState).toBe(WebSocket.CONNECTING);
+
+            // Wait for custom timeout to expire and close to be triggered
+            await new Promise((resolve) => setTimeout(resolve, 150));
+
+            // onConnecting was called with isReconnect=false for initial connect
+            expect(onConnecting).toHaveBeenCalledWith(false);
+        });
+    });
+
+    describe('Disconnection', () => {
+        it('should close WebSocket when close() is called', async () => {
+            const client = createClient();
+            client.connect();
+            await server.connected;
+
+            const result = client.close();
+            await new Promise((resolve) => setTimeout(resolve, 10));
+
+            expect(result).toBe(true);
+            expect(client.readyState).toBe(WebSocket.CLOSED);
+        });
+
+        it('should return false when closing already closed connection', () => {
+            const client = createClient();
+            client.close();
+            const result = client.close();
+
+            expect(result).toBe(false);
+        });
+
+        it('should call onClose callback', async () => {
+            const onClose = vi.fn();
+            const client = createClient();
+            client.onClose = onClose;
+
+            client.connect();
+            await server.connected;
+
+            server.close({ code: 1000, reason: 'Test', wasClean: true });
+            await new Promise((resolve) => setTimeout(resolve, 10));
+
+            expect(onClose).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    code: 1000,
+                    reason: 'Test',
+                    wasClean: true
+                })
+            );
+        });
+
+        it('should NOT reconnect after manual close', async () => {
+            const client = createClient();
+            client.connect();
+            await server.connected;
+
+            client.close();
+            await new Promise((resolve) => setTimeout(resolve, 50));
+
+            expect(client.readyState).toBe(WebSocket.CLOSED);
+        });
+    });
+
+    describe('Reconnection Logic', () => {
+        it('should NOT reconnect on policy violation (code 1008) - auth failure', async () => {
+            const client = createClient();
+            const onClose = vi.fn();
+            client.onClose = onClose;
+
+            client.connect();
+            await server.connected;
+
+            server.close({ code: 1008, reason: 'Policy Violation', wasClean: false });
+            await new Promise((resolve) => setTimeout(resolve, 50));
+
+            expect(onClose).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    code: 1008,
+                    reason: 'Policy Violation',
+                    wasClean: false
+                })
+            );
+            expect(client.readyState).toBe(WebSocket.CLOSED);
+        });
+
+        it('should NOT reconnect on abnormal closure (code 1006, wasClean=false) - connection lost unexpectedly', async () => {
+            const client = createClient();
+            const onClose = vi.fn();
+            client.onClose = onClose;
+
+            client.connect();
+            await server.connected;
+
+            server.close({ code: 1006, reason: 'Abnormal Closure', wasClean: false });
+            await new Promise((resolve) => setTimeout(resolve, 50));
+
+            expect(onClose).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    code: 1006,
+                    reason: 'Abnormal Closure',
+                    wasClean: false
+                })
+            );
+            expect(client.readyState).toBe(WebSocket.CLOSED);
+        });
+
+        it('should NOT reconnect on unauthorized (code 4401) - 401 HTTP equivalent', async () => {
+            const client = createClient();
+            const onClose = vi.fn();
+            client.onClose = onClose;
+
+            client.connect();
+            await server.connected;
+
+            server.close({ code: 4401, reason: 'Unauthorized', wasClean: false });
+            await new Promise((resolve) => setTimeout(resolve, 50));
+
+            expect(onClose).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    code: 4401,
+                    reason: 'Unauthorized',
+                    wasClean: false
+                })
+            );
+            expect(client.readyState).toBe(WebSocket.CLOSED);
+        });
+
+        it('should NOT reconnect on forbidden (code 4403) - 403 HTTP equivalent', async () => {
+            const client = createClient();
+            const onClose = vi.fn();
+            client.onClose = onClose;
+
+            client.connect();
+            await server.connected;
+
+            server.close({ code: 4403, reason: 'Forbidden', wasClean: false });
+            await new Promise((resolve) => setTimeout(resolve, 50));
+
+            expect(onClose).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    code: 4403,
+                    reason: 'Forbidden',
+                    wasClean: false
+                })
+            );
+            expect(client.readyState).toBe(WebSocket.CLOSED);
+        });
+
+        it('should reconnect on normal closure (code 1000) - server initiated graceful close', async () => {
+            const onConnecting = vi.fn();
+            const client = createClient();
+            client.onConnecting = onConnecting;
+
+            client.connect();
+            await server.connected;
+            onConnecting.mockClear();
+
+            server.close({ code: 1000, reason: 'Normal Closure', wasClean: true });
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            await server.connected;
+
+            expect(onConnecting).toHaveBeenCalledWith(true);
+            client.close();
+        });
+
+        it('should reconnect on going away (code 1001) - server restart', async () => {
+            const onConnecting = vi.fn();
+            const client = createClient();
+            client.onConnecting = onConnecting;
+
+            client.connect();
+            await server.connected;
+            onConnecting.mockClear();
+
+            server.close({ code: 1001, reason: 'Going Away', wasClean: true });
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            await server.connected;
+
+            expect(onConnecting).toHaveBeenCalledWith(true);
+            client.close();
+        });
+
+        it('should call onConnecting with isReconnect=true on reconnection', async () => {
+            const onConnecting = vi.fn();
+            const client = createClient();
+            client.onConnecting = onConnecting;
+
+            client.connect();
+            await server.connected;
+            expect(onConnecting).toHaveBeenCalledWith(false);
+            onConnecting.mockClear();
+
+            server.close({ code: 1000, reason: 'Test', wasClean: true });
+            await new Promise((resolve) => setTimeout(resolve, 10));
+
+            expect(onConnecting).toHaveBeenCalledWith(true);
+            await server.connected;
+            client.close();
+        });
+    });
+
+    describe('Message Handling', () => {
+        it('should send messages when connected', async () => {
+            const client = createClient();
+            client.connect();
+            await server.connected;
+
+            client.send('test message');
+            await expect(server).toReceiveMessage('test message');
+
+            client.close();
+        });
+
+        it('should throw error when sending while disconnected', () => {
+            const client = createClient();
+
+            expect(() => client.send('test')).toThrow('INVALID_STATE_ERR');
+        });
+
+        it('should call onMessage callback when receiving messages', async () => {
+            const onMessage = vi.fn();
+            const client = createClient();
+            client.onMessage = onMessage;
+
+            client.connect();
+            await server.connected;
+
+            server.send('test data');
+            await new Promise((resolve) => setTimeout(resolve, 10));
+
+            expect(onMessage).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    data: 'test data'
+                })
+            );
+
+            client.close();
+        });
+
+        it('should receive JSON messages', async () => {
+            const onMessage = vi.fn();
+            const client = createClient();
+            client.onMessage = onMessage;
+
+            client.connect();
+            await server.connected;
+
+            const message = JSON.stringify({ data: 'hello', type: 'test' });
+            server.send(message);
+            await new Promise((resolve) => setTimeout(resolve, 10));
+
+            expect(onMessage).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    data: message
+                })
+            );
+
+            client.close();
+        });
+    });
+
+    describe('Error Handling', () => {
+        it('should call onError callback', async () => {
+            const onError = vi.fn();
+            const client = createClient();
+            client.onError = onError;
+
+            client.connect();
+            await server.connected;
+
+            server.error();
+            await new Promise((resolve) => setTimeout(resolve, 10));
+
+            expect(onError).toHaveBeenCalled();
+            client.close();
+        });
+    });
+
+    describe('URL Construction', () => {
+        it('should construct correct WebSocket URL', () => {
+            const client = createClient('/api/v2/push');
+
+            expect(client.url).toBe('ws://localhost:1234/api/v2/push');
+        });
+
+        it('should use custom base URL', async () => {
+            const customClient = new WebSocketClient('/api/v2/push', {
+                baseUrl: 'ws://custom-host:5000',
+                reconnectDelay: () => 0
+            });
+
+            const customServer = new WS('ws://custom-host:5000/api/v2/push');
+            customClient.connect();
+            await customServer.connected;
+
+            expect(customClient.readyState).toBe(WebSocket.OPEN);
+
+            customClient.close();
+            customServer.close();
+        });
+
+        it('should handle custom path', async () => {
+            const client = createClient('/custom/path');
+            const customServer = new WS('ws://localhost:1234/custom/path');
+
+            client.connect();
+            await customServer.connected;
+
+            expect(client.readyState).toBe(WebSocket.OPEN);
+
+            client.close();
+            customServer.close();
+        });
+    });
+
+    describe('Options - getReconnectDelay', () => {
+        it('should use custom getReconnectDelay from options', async () => {
+            const getReconnectDelay = vi.fn(() => 100);
+            const client = new WebSocketClient('/api/v2/push', {
+                baseUrl: 'ws://localhost:1234',
+                reconnectDelay: getReconnectDelay
+            });
+
+            client.connect();
+            await server.connected;
+
+            server.close({ code: 1000, reason: 'Test', wasClean: true });
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            await server.connected;
+
+            expect(getReconnectDelay).toHaveBeenCalled();
+            client.close();
+        });
+
+        it('should use immediate reconnection with getReconnectDelay: () => 0', async () => {
+            const onConnecting = vi.fn();
+            const client = createClient();
+            client.onConnecting = onConnecting;
+
+            client.connect();
+            await server.connected;
+            onConnecting.mockClear();
+
+            const start = Date.now();
+            server.close({ code: 1000, reason: 'Test', wasClean: true });
+
+            // Wait for reconnection attempt
+            await new Promise((resolve) => setTimeout(resolve, 50));
+
+            // Verify reconnection happened quickly (within 50ms)
+            const elapsed = Date.now() - start;
+            expect(onConnecting).toHaveBeenCalledWith(true);
+            expect(elapsed).toBeLessThan(100);
+
+            client.close();
+        });
+    });
+
+    describe('Edge Cases', () => {
+        it('should handle rapid connect/disconnect cycles', async () => {
+            const client = createClient();
+
+            client.connect();
+            client.close();
+            client.connect();
+            await server.connected;
+
+            expect(client.readyState).toBe(WebSocket.OPEN);
+            client.close();
+        });
+
+        it('should maintain connection state correctly', async () => {
+            const client = createClient();
+
+            expect(client.readyState).toBe(WebSocket.CLOSED);
+
+            client.connect();
+            await server.connected;
+            expect(client.readyState).toBe(WebSocket.OPEN);
+
+            client.close();
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(client.readyState).toBe(WebSocket.CLOSED);
+        });
+    });
+});
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/generated/api.ts b/src/Exceptionless.Web/ClientApp/src/lib/generated/api.ts
index f8d5b249fe..e295ab5af1 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/generated/api.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/generated/api.ts
@@ -1,5 +1,6 @@
 /* eslint-disable */
 /* tslint:disable */
+// @ts-nocheck
 /*
  * ---------------------------------------------------------------
  * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
@@ -13,6 +14,24 @@
 
 import { IsDate, IsDefined, IsEmail, IsInt, IsMongoId, IsNumber, IsOptional, IsUrl, MaxLength, MinLength, ValidateNested } from 'class-validator';
 
+export enum StackStatus {
+    Open = 'open',
+    Fixed = 'fixed',
+    Regressed = 'regressed',
+    Snoozed = 'snoozed',
+    Ignored = 'ignored',
+    Discarded = 'discarded'
+}
+
+/** @format int32 */
+export enum BillingStatus {
+    Trialing = 0,
+    Active = 1,
+    PastDue = 2,
+    Canceled = 3,
+    Unpaid = 4
+}
+
 export class BillingPlan {
     @IsMongoId({ message: 'id must be a valid ObjectId.' }) id!: string;
     @IsDefined({ message: 'name is required.' }) name!: string;
@@ -20,42 +39,28 @@ export class BillingPlan {
     /** @format double */
     @IsNumber({}, { message: 'price must be a numeric value.' }) price!: number;
     /** @format int32 */
-    @IsInt({ message: 'max_projects must be a whole number.' }) max_projects!: number;
+    @IsInt({ message: 'max_projects must be a whole number.' })
+    max_projects!: number;
     /** @format int32 */
     @IsInt({ message: 'max_users must be a whole number.' }) max_users!: number;
     /** @format int32 */
-    @IsInt({ message: 'retention_days must be a whole number.' }) retention_days!: number;
+    @IsInt({ message: 'retention_days must be a whole number.' })
+    retention_days!: number;
     /** @format int32 */
-    @IsInt({ message: 'max_events_per_month must be a whole number.' }) max_events_per_month!: number;
-    @IsDefined({ message: 'has_premium_features is required.' }) has_premium_features!: boolean;
+    @IsInt({ message: 'max_events_per_month must be a whole number.' })
+    max_events_per_month!: number;
+    @IsDefined({ message: 'has_premium_features is required.' })
+    has_premium_features!: boolean;
     @IsDefined({ message: 'is_hidden is required.' }) is_hidden!: boolean;
 }
 
-/**
- *
- *
- * 0 = Trialing
- *
- * 1 = Active
- *
- * 2 = PastDue
- *
- * 3 = Canceled
- *
- * 4 = Unpaid
- * @format int32
- */
-export enum BillingStatus {
-    Trialing = 0,
-    Active = 1,
-    PastDue = 2,
-    Canceled = 3,
-    Unpaid = 4
-}
-
 export class ChangePasswordModel {
-    @MinLength(6, { message: 'current_password must be at least 6 characters long.' })
-    @MaxLength(100, { message: 'current_password must be at most 100 characters long.' })
+    @MinLength(6, {
+        message: 'current_password must be at least 6 characters long.'
+    })
+    @MaxLength(100, {
+        message: 'current_password must be at most 100 characters long.'
+    })
     current_password!: string;
     @MinLength(6, { message: 'password must be at least 6 characters long.' })
     @MaxLength(100, { message: 'password must be at most 100 characters long.' })
@@ -70,20 +75,28 @@ export class ChangePlanResult {
 export class ClientConfiguration {
     /** @format int32 */
     @IsInt({ message: 'version must be a whole number.' }) version!: number;
-    @ValidateNested({ message: 'settings must be a valid nested object.' }) settings!: Record<string, string>;
+    @ValidateNested({ message: 'settings must be a valid nested object.' })
+    settings!: Record<string, string>;
 }
 
 export class CountResult {
     /** @format int64 */
     @IsInt({ message: 'total must be a whole number.' }) total!: number;
-    @IsOptional() @ValidateNested({ message: 'aggregations must be a valid nested object.' }) aggregations?: Record<string, IAggregate>;
-    @IsOptional() @ValidateNested({ message: 'data must be a valid nested object.' }) data?: Record<string, unknown>;
+    @IsOptional()
+    @ValidateNested({ message: 'aggregations must be a valid nested object.' })
+    aggregations?: Record<string, IAggregate>;
+    @IsOptional()
+    @ValidateNested({ message: 'data must be a valid nested object.' })
+    data?: Record<string, unknown>;
 }
 
 export class ExternalAuthInfo {
-    @MinLength(1, { message: 'clientId must be at least 1 characters long.' }) clientId!: string;
-    @MinLength(1, { message: 'code must be at least 1 characters long.' }) code!: string;
-    @MinLength(1, { message: 'redirectUri must be at least 1 characters long.' }) redirectUri!: string;
+    @MinLength(1, { message: 'clientId must be at least 1 characters long.' })
+    clientId!: string;
+    @MinLength(1, { message: 'code must be at least 1 characters long.' })
+    code!: string;
+    @MinLength(1, { message: 'redirectUri must be at least 1 characters long.' })
+    redirectUri!: string;
     @IsOptional() inviteToken?: string | null;
 }
 
@@ -95,19 +108,23 @@ export class Invite {
     @IsDefined({ message: 'token is required.' }) token!: string;
     @IsDefined({ message: 'email_address is required.' }) email_address!: string;
     /** @format date-time */
-    @IsDate({ message: 'date_added must be a valid date and time.' }) date_added!: string;
+    @IsDate({ message: 'date_added must be a valid date and time.' })
+    date_added!: string;
 }
 
 export class Invoice {
     @IsMongoId({ message: 'id must be a valid ObjectId.' }) id!: string;
-    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' }) organization_id!: string;
-    @IsDefined({ message: 'organization_name is required.' }) organization_name!: string;
+    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' })
+    organization_id!: string;
+    @IsDefined({ message: 'organization_name is required.' })
+    organization_name!: string;
     /** @format date-time */
     @IsDate({ message: 'date must be a valid date and time.' }) date!: string;
     @IsDefined({ message: 'paid is required.' }) paid!: boolean;
     /** @format double */
     @IsNumber({}, { message: 'total must be a numeric value.' }) total!: number;
-    @ValidateNested({ message: 'items must be a valid nested object.' }) items!: InvoiceLineItem[];
+    @ValidateNested({ message: 'items must be a valid nested object.' })
+    items!: InvoiceLineItem[];
 }
 
 export class InvoiceGridModel {
@@ -126,13 +143,18 @@ export class InvoiceLineItem {
 
 export class Login {
     /** The email address or domain username */
-    @MinLength(1, { message: 'email must be at least 1 characters long.' }) email!: string;
+    @MinLength(1, { message: 'email must be at least 1 characters long.' })
+    email!: string;
     @MinLength(6, { message: 'password must be at least 6 characters long.' })
     @MaxLength(100, { message: 'password must be at most 100 characters long.' })
     password!: string;
     @IsOptional()
-    @MinLength(40, { message: 'invite_token must be at least 40 characters long.' })
-    @MaxLength(40, { message: 'invite_token must be at most 40 characters long.' })
+    @MinLength(40, {
+        message: 'invite_token must be at least 40 characters long.'
+    })
+    @MaxLength(40, {
+        message: 'invite_token must be at most 40 characters long.'
+    })
     invite_token?: string | null;
 }
 
@@ -141,24 +163,34 @@ export class NewOrganization {
 }
 
 export class NewProject {
-    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' }) organization_id!: string;
+    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' })
+    organization_id!: string;
     @IsDefined({ message: 'name is required.' }) name!: string;
-    @IsDefined({ message: 'delete_bot_data_enabled is required.' }) delete_bot_data_enabled!: boolean;
+    @IsDefined({ message: 'delete_bot_data_enabled is required.' })
+    delete_bot_data_enabled!: boolean;
 }
 
 export class NewToken {
-    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' }) organization_id!: string;
-    @IsMongoId({ message: 'project_id must be a valid ObjectId.' }) project_id!: string;
-    @IsOptional() @IsMongoId({ message: 'default_project_id must be a valid ObjectId.' }) default_project_id?: string | null;
+    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' })
+    organization_id!: string;
+    @IsMongoId({ message: 'project_id must be a valid ObjectId.' })
+    project_id!: string;
+    @IsOptional()
+    @IsMongoId({ message: 'default_project_id must be a valid ObjectId.' })
+    default_project_id?: string | null;
     @IsDefined({ message: 'scopes is required.' }) scopes!: string[];
     /** @format date-time */
-    @IsOptional() @IsDate({ message: 'expires_utc must be a valid date and time.' }) expires_utc?: string | null;
+    @IsOptional()
+    @IsDate({ message: 'expires_utc must be a valid date and time.' })
+    expires_utc?: string | null;
     @IsOptional() notes?: string | null;
 }
 
 export class NewWebHook {
-    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' }) organization_id!: string;
-    @IsMongoId({ message: 'project_id must be a valid ObjectId.' }) project_id!: string;
+    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' })
+    organization_id!: string;
+    @IsMongoId({ message: 'project_id must be a valid ObjectId.' })
+    project_id!: string;
     @IsUrl({}, { message: 'url must be a valid URL.' }) url!: string;
     @IsDefined({ message: 'event_types is required.' }) event_types!: string[];
     /** The schema version that should be used. */
@@ -166,30 +198,44 @@ export class NewWebHook {
 }
 
 export class NotificationSettings {
-    @IsDefined({ message: 'send_daily_summary is required.' }) send_daily_summary!: boolean;
-    @IsDefined({ message: 'report_new_errors is required.' }) report_new_errors!: boolean;
-    @IsDefined({ message: 'report_critical_errors is required.' }) report_critical_errors!: boolean;
-    @IsDefined({ message: 'report_event_regressions is required.' }) report_event_regressions!: boolean;
-    @IsDefined({ message: 'report_new_events is required.' }) report_new_events!: boolean;
-    @IsDefined({ message: 'report_critical_events is required.' }) report_critical_events!: boolean;
+    @IsDefined({ message: 'send_daily_summary is required.' })
+    send_daily_summary!: boolean;
+    @IsDefined({ message: 'report_new_errors is required.' })
+    report_new_errors!: boolean;
+    @IsDefined({ message: 'report_critical_errors is required.' })
+    report_critical_errors!: boolean;
+    @IsDefined({ message: 'report_event_regressions is required.' })
+    report_event_regressions!: boolean;
+    @IsDefined({ message: 'report_new_events is required.' })
+    report_new_events!: boolean;
+    @IsDefined({ message: 'report_critical_events is required.' })
+    report_critical_events!: boolean;
 }
 
 export class OAuthAccount {
     @IsDefined({ message: 'provider is required.' }) provider!: string;
-    @IsMongoId({ message: 'provider_user_id must be a valid ObjectId.' }) provider_user_id!: string;
+    @IsMongoId({ message: 'provider_user_id must be a valid ObjectId.' })
+    provider_user_id!: string;
     @IsDefined({ message: 'username is required.' }) username!: string;
-    @ValidateNested({ message: 'extra_data must be a valid nested object.' }) extra_data!: Record<string, string>;
+    @ValidateNested({ message: 'extra_data must be a valid nested object.' })
+    extra_data!: Record<string, string>;
 }
 
 export class PersistentEvent {
     @IsMongoId({ message: 'id must be a valid ObjectId.' }) id!: string;
-    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' }) organization_id!: string;
-    @IsMongoId({ message: 'project_id must be a valid ObjectId.' }) project_id!: string;
-    @IsMongoId({ message: 'stack_id must be a valid ObjectId.' }) stack_id!: string;
-    @IsDefined({ message: 'is_first_occurrence is required.' }) is_first_occurrence!: boolean;
+    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' })
+    organization_id!: string;
+    @IsMongoId({ message: 'project_id must be a valid ObjectId.' })
+    project_id!: string;
+    @IsMongoId({ message: 'stack_id must be a valid ObjectId.' })
+    stack_id!: string;
+    @IsDefined({ message: 'is_first_occurrence is required.' })
+    is_first_occurrence!: boolean;
     /** @format date-time */
-    @IsDate({ message: 'created_utc must be a valid date and time.' }) created_utc!: string;
-    @ValidateNested({ message: 'idx must be a valid nested object.' }) idx!: Record<string, unknown>;
+    @IsDate({ message: 'created_utc must be a valid date and time.' })
+    created_utc!: string;
+    @ValidateNested({ message: 'idx must be a valid nested object.' })
+    idx!: Record<string, unknown>;
     @IsOptional() type?: string | null;
     @IsOptional() source?: string | null;
     /** @format date-time */
@@ -198,16 +244,26 @@ export class PersistentEvent {
     @IsOptional() message?: string | null;
     @IsOptional() geo?: string | null;
     /** @format double */
-    @IsOptional() @IsNumber({}, { message: 'value must be a numeric value.' }) value?: number | null;
+    @IsOptional()
+    @IsNumber({}, { message: 'value must be a numeric value.' })
+    value?: number | null;
     /** @format int32 */
     @IsOptional() @IsInt({ message: 'count must be a whole number.' }) count?: number | null;
-    @IsOptional() @ValidateNested({ message: 'data must be a valid nested object.' }) data?: Record<string, unknown>;
-    @IsOptional() @IsMongoId({ message: 'reference_id must be a valid ObjectId.' }) reference_id?: string | null;
+    @IsOptional()
+    @ValidateNested({ message: 'data must be a valid nested object.' })
+    data?: Record<string, unknown>;
+    @IsOptional()
+    @IsMongoId({ message: 'reference_id must be a valid ObjectId.' })
+    reference_id?: string | null;
 }
 
 export class ResetPasswordModel {
-    @MinLength(40, { message: 'password_reset_token must be at least 40 characters long.' })
-    @MaxLength(40, { message: 'password_reset_token must be at most 40 characters long.' })
+    @MinLength(40, {
+        message: 'password_reset_token must be at least 40 characters long.'
+    })
+    @MaxLength(40, {
+        message: 'password_reset_token must be at most 40 characters long.'
+    })
     password_reset_token!: string;
     @MinLength(6, { message: 'password must be at least 6 characters long.' })
     @MaxLength(100, { message: 'password must be at most 100 characters long.' })
@@ -215,82 +271,71 @@ export class ResetPasswordModel {
 }
 
 export class Signup {
-    @MinLength(1, { message: 'name must be at least 1 characters long.' }) name!: string;
+    @MinLength(1, { message: 'name must be at least 1 characters long.' })
+    name!: string;
     /** The email address or domain username */
-    @MinLength(1, { message: 'email must be at least 1 characters long.' }) email!: string;
+    @MinLength(1, { message: 'email must be at least 1 characters long.' })
+    email!: string;
     @MinLength(6, { message: 'password must be at least 6 characters long.' })
     @MaxLength(100, { message: 'password must be at most 100 characters long.' })
     password!: string;
     @IsOptional()
-    @MinLength(40, { message: 'invite_token must be at least 40 characters long.' })
-    @MaxLength(40, { message: 'invite_token must be at most 40 characters long.' })
+    @MinLength(40, {
+        message: 'invite_token must be at least 40 characters long.'
+    })
+    @MaxLength(40, {
+        message: 'invite_token must be at most 40 characters long.'
+    })
     invite_token?: string | null;
 }
 
 export class Stack {
     @IsMongoId({ message: 'id must be a valid ObjectId.' }) id!: string;
-    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' }) organization_id!: string;
-    @IsMongoId({ message: 'project_id must be a valid ObjectId.' }) project_id!: string;
+    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' })
+    organization_id!: string;
+    @IsMongoId({ message: 'project_id must be a valid ObjectId.' })
+    project_id!: string;
     @IsDefined({ message: 'type is required.' }) type!: string;
-    /**
-     *
-     * open
-     * fixed
-     * regressed
-     * snoozed
-     * ignored
-     * discarded
-     */
     @IsDefined({ message: 'status is required.' }) status!: StackStatus;
     /** @format date-time */
-    @IsOptional() @IsDate({ message: 'snooze_until_utc must be a valid date and time.' }) snooze_until_utc?: string | null;
-    @IsDefined({ message: 'signature_hash is required.' }) signature_hash!: string;
-    @ValidateNested({ message: 'signature_info must be a valid nested object.' }) signature_info!: Record<string, string>;
+    @IsOptional()
+    @IsDate({ message: 'snooze_until_utc must be a valid date and time.' })
+    snooze_until_utc?: string | null;
+    @IsDefined({ message: 'signature_hash is required.' })
+    signature_hash!: string;
+    @ValidateNested({ message: 'signature_info must be a valid nested object.' })
+    signature_info!: Record<string, string>;
     @IsOptional() fixed_in_version?: string | null;
     /** @format date-time */
-    @IsOptional() @IsDate({ message: 'date_fixed must be a valid date and time.' }) date_fixed?: string | null;
+    @IsOptional()
+    @IsDate({ message: 'date_fixed must be a valid date and time.' })
+    date_fixed?: string | null;
     @IsDefined({ message: 'title is required.' }) title!: string;
     /** @format int32 */
-    @IsInt({ message: 'total_occurrences must be a whole number.' }) total_occurrences!: number;
+    @IsInt({ message: 'total_occurrences must be a whole number.' })
+    total_occurrences!: number;
     /** @format date-time */
-    @IsDate({ message: 'first_occurrence must be a valid date and time.' }) first_occurrence!: string;
+    @IsDate({ message: 'first_occurrence must be a valid date and time.' })
+    first_occurrence!: string;
     /** @format date-time */
-    @IsDate({ message: 'last_occurrence must be a valid date and time.' }) last_occurrence!: string;
+    @IsDate({ message: 'last_occurrence must be a valid date and time.' })
+    last_occurrence!: string;
     @IsOptional() description?: string | null;
-    @IsDefined({ message: 'occurrences_are_critical is required.' }) occurrences_are_critical!: boolean;
+    @IsDefined({ message: 'occurrences_are_critical is required.' })
+    occurrences_are_critical!: boolean;
     @IsDefined({ message: 'references is required.' }) references!: string[];
     @IsDefined({ message: 'tags is required.' }) tags!: string[];
-    @IsDefined({ message: 'duplicate_signature is required.' }) duplicate_signature!: string;
+    @IsDefined({ message: 'duplicate_signature is required.' })
+    duplicate_signature!: string;
     /** @format date-time */
-    @IsDate({ message: 'created_utc must be a valid date and time.' }) created_utc!: string;
+    @IsDate({ message: 'created_utc must be a valid date and time.' })
+    created_utc!: string;
     /** @format date-time */
-    @IsDate({ message: 'updated_utc must be a valid date and time.' }) updated_utc!: string;
+    @IsDate({ message: 'updated_utc must be a valid date and time.' })
+    updated_utc!: string;
     @IsDefined({ message: 'is_deleted is required.' }) is_deleted!: boolean;
-    @IsDefined({ message: 'allow_notifications is required.' }) allow_notifications!: boolean;
-}
-
-/**
- *
- *
- * open
- *
- * fixed
- *
- * regressed
- *
- * snoozed
- *
- * ignored
- *
- * discarded
- */
-export enum StackStatus {
-    Open = 'open',
-    Fixed = 'fixed',
-    Regressed = 'regressed',
-    Snoozed = 'snoozed',
-    Ignored = 'ignored',
-    Discarded = 'discarded'
+    @IsDefined({ message: 'allow_notifications is required.' })
+    allow_notifications!: boolean;
 }
 
 export class StringStringValuesKeyValuePair {
@@ -303,7 +348,8 @@ export class StringValueFromBody {
 }
 
 export class TokenResult {
-    @MinLength(1, { message: 'token must be at least 1 characters long.' }) token!: string;
+    @MinLength(1, { message: 'token must be at least 1 characters long.' })
+    token!: string;
 }
 
 export class UpdateEmailAddressResult {
@@ -340,47 +386,69 @@ export class UsageInfo {
 
 export class User {
     @IsMongoId({ message: 'id must be a valid ObjectId.' }) id!: string;
-    @IsDefined({ message: 'organization_ids is required.' }) organization_ids!: string[];
+    @IsDefined({ message: 'organization_ids is required.' })
+    organization_ids!: string[];
     @IsOptional() password?: string | null;
     @IsOptional() salt?: string | null;
     @IsOptional() password_reset_token?: string | null;
     /** @format date-time */
-    @IsDate({ message: 'password_reset_token_expiration must be a valid date and time.' }) password_reset_token_expiration!: string;
-    @ValidateNested({ message: 'o_auth_accounts must be a valid nested object.' }) o_auth_accounts!: OAuthAccount[];
-    @MinLength(1, { message: 'full_name must be at least 1 characters long.' }) full_name!: string;
+    @IsDate({
+        message: 'password_reset_token_expiration must be a valid date and time.'
+    })
+    password_reset_token_expiration!: string;
+    @ValidateNested({ message: 'o_auth_accounts must be a valid nested object.' })
+    o_auth_accounts!: OAuthAccount[];
+    @MinLength(1, { message: 'full_name must be at least 1 characters long.' })
+    full_name!: string;
     /** @format email */
     @IsEmail({ require_tld: false }, { message: 'email_address must be a valid email address.' })
-    @MinLength(1, { message: 'email_address must be at least 1 characters long.' })
+    @MinLength(1, {
+        message: 'email_address must be at least 1 characters long.'
+    })
     email_address!: string;
-    @IsDefined({ message: 'email_notifications_enabled is required.' }) email_notifications_enabled!: boolean;
-    @IsDefined({ message: 'is_email_address_verified is required.' }) is_email_address_verified!: boolean;
+    @IsDefined({ message: 'email_notifications_enabled is required.' })
+    email_notifications_enabled!: boolean;
+    @IsDefined({ message: 'is_email_address_verified is required.' })
+    is_email_address_verified!: boolean;
     @IsOptional() verify_email_address_token?: string | null;
     /** @format date-time */
-    @IsDate({ message: 'verify_email_address_token_expiration must be a valid date and time.' }) verify_email_address_token_expiration!: string;
+    @IsDate({
+        message: 'verify_email_address_token_expiration must be a valid date and time.'
+    })
+    verify_email_address_token_expiration!: string;
     @IsDefined({ message: 'is_active is required.' }) is_active!: boolean;
     @IsDefined({ message: 'roles is required.' }) roles!: string[];
     /** @format date-time */
-    @IsDate({ message: 'created_utc must be a valid date and time.' }) created_utc!: string;
+    @IsDate({ message: 'created_utc must be a valid date and time.' })
+    created_utc!: string;
     /** @format date-time */
-    @IsDate({ message: 'updated_utc must be a valid date and time.' }) updated_utc!: string;
+    @IsDate({ message: 'updated_utc must be a valid date and time.' })
+    updated_utc!: string;
 }
 
 export class UserDescription {
     @IsOptional() email_address?: string | null;
     @IsOptional() description?: string | null;
-    @IsOptional() @ValidateNested({ message: 'data must be a valid nested object.' }) data?: Record<string, unknown>;
+    @IsOptional()
+    @ValidateNested({ message: 'data must be a valid nested object.' })
+    data?: Record<string, unknown>;
 }
 
 export class ViewCurrentUser {
     @IsOptional() hash?: string | null;
-    @IsDefined({ message: 'has_local_account is required.' }) has_local_account!: boolean;
-    @ValidateNested({ message: 'o_auth_accounts must be a valid nested object.' }) o_auth_accounts!: OAuthAccount[];
+    @IsDefined({ message: 'has_local_account is required.' })
+    has_local_account!: boolean;
+    @ValidateNested({ message: 'o_auth_accounts must be a valid nested object.' })
+    o_auth_accounts!: OAuthAccount[];
     @IsMongoId({ message: 'id must be a valid ObjectId.' }) id!: string;
-    @IsDefined({ message: 'organization_ids is required.' }) organization_ids!: string[];
+    @IsDefined({ message: 'organization_ids is required.' })
+    organization_ids!: string[];
     @IsDefined({ message: 'full_name is required.' }) full_name!: string;
     @IsDefined({ message: 'email_address is required.' }) email_address!: string;
-    @IsDefined({ message: 'email_notifications_enabled is required.' }) email_notifications_enabled!: boolean;
-    @IsDefined({ message: 'is_email_address_verified is required.' }) is_email_address_verified!: boolean;
+    @IsDefined({ message: 'email_notifications_enabled is required.' })
+    email_notifications_enabled!: boolean;
+    @IsDefined({ message: 'is_email_address_verified is required.' })
+    is_email_address_verified!: boolean;
     @IsDefined({ message: 'is_active is required.' }) is_active!: boolean;
     @IsDefined({ message: 'is_invite is required.' }) is_invite!: boolean;
     @IsDefined({ message: 'roles is required.' }) roles!: string[];
@@ -389,107 +457,159 @@ export class ViewCurrentUser {
 export class ViewOrganization {
     @IsMongoId({ message: 'id must be a valid ObjectId.' }) id!: string;
     /** @format date-time */
-    @IsDate({ message: 'created_utc must be a valid date and time.' }) created_utc!: string;
+    @IsDate({ message: 'created_utc must be a valid date and time.' })
+    created_utc!: string;
+    /** @format date-time */
+    @IsDate({ message: 'updated_utc must be a valid date and time.' })
+    updated_utc!: string;
     @IsDefined({ message: 'name is required.' }) name!: string;
     @IsMongoId({ message: 'plan_id must be a valid ObjectId.' }) plan_id!: string;
     @IsDefined({ message: 'plan_name is required.' }) plan_name!: string;
-    @IsDefined({ message: 'plan_description is required.' }) plan_description!: string;
-    @IsOptional() 'card_last4'?: string | null;
+    @IsDefined({ message: 'plan_description is required.' })
+    plan_description!: string;
+    @IsOptional() card_last4?: string | null;
     /** @format date-time */
-    @IsOptional() @IsDate({ message: 'subscribe_date must be a valid date and time.' }) subscribe_date?: string | null;
+    @IsOptional()
+    @IsDate({ message: 'subscribe_date must be a valid date and time.' })
+    subscribe_date?: string | null;
     /** @format date-time */
-    @IsOptional() @IsDate({ message: 'billing_change_date must be a valid date and time.' }) billing_change_date?: string | null;
-    @IsOptional() @IsMongoId({ message: 'billing_changed_by_user_id must be a valid ObjectId.' }) billing_changed_by_user_id?: string | null;
-    /**
-     *
-     * 0 = Trialing
-     * 1 = Active
-     * 2 = PastDue
-     * 3 = Canceled
-     * 4 = Unpaid
-     */
-    @IsDefined({ message: 'billing_status is required.' }) billing_status!: BillingStatus;
+    @IsOptional()
+    @IsDate({ message: 'billing_change_date must be a valid date and time.' })
+    billing_change_date?: string | null;
+    @IsOptional()
+    @IsMongoId({
+        message: 'billing_changed_by_user_id must be a valid ObjectId.'
+    })
+    billing_changed_by_user_id?: string | null;
+    @IsDefined({ message: 'billing_status is required.' })
+    billing_status!: BillingStatus;
     /** @format double */
-    @IsNumber({}, { message: 'billing_price must be a numeric value.' }) billing_price!: number;
+    @IsNumber({}, { message: 'billing_price must be a numeric value.' })
+    billing_price!: number;
     /** @format int32 */
-    @IsInt({ message: 'max_events_per_month must be a whole number.' }) max_events_per_month!: number;
+    @IsInt({ message: 'max_events_per_month must be a whole number.' })
+    max_events_per_month!: number;
     /** @format int32 */
-    @IsInt({ message: 'bonus_events_per_month must be a whole number.' }) bonus_events_per_month!: number;
+    @IsInt({ message: 'bonus_events_per_month must be a whole number.' })
+    bonus_events_per_month!: number;
     /** @format date-time */
-    @IsOptional() @IsDate({ message: 'bonus_expiration must be a valid date and time.' }) bonus_expiration?: string | null;
+    @IsOptional()
+    @IsDate({ message: 'bonus_expiration must be a valid date and time.' })
+    bonus_expiration?: string | null;
     /** @format int32 */
-    @IsInt({ message: 'retention_days must be a whole number.' }) retention_days!: number;
+    @IsInt({ message: 'retention_days must be a whole number.' })
+    retention_days!: number;
     @IsDefined({ message: 'is_suspended is required.' }) is_suspended!: boolean;
     @IsOptional() suspension_code?: string | null;
     @IsOptional() suspension_notes?: string | null;
     /** @format date-time */
-    @IsOptional() @IsDate({ message: 'suspension_date must be a valid date and time.' }) suspension_date?: string | null;
-    @IsDefined({ message: 'has_premium_features is required.' }) has_premium_features!: boolean;
+    @IsOptional()
+    @IsDate({ message: 'suspension_date must be a valid date and time.' })
+    suspension_date?: string | null;
+    @IsDefined({ message: 'has_premium_features is required.' })
+    has_premium_features!: boolean;
     /** @format int32 */
     @IsInt({ message: 'max_users must be a whole number.' }) max_users!: number;
     /** @format int32 */
-    @IsInt({ message: 'max_projects must be a whole number.' }) max_projects!: number;
+    @IsInt({ message: 'max_projects must be a whole number.' })
+    max_projects!: number;
     /** @format int64 */
-    @IsInt({ message: 'project_count must be a whole number.' }) project_count!: number;
+    @IsInt({ message: 'project_count must be a whole number.' })
+    project_count!: number;
     /** @format int64 */
-    @IsInt({ message: 'stack_count must be a whole number.' }) stack_count!: number;
+    @IsInt({ message: 'stack_count must be a whole number.' })
+    stack_count!: number;
     /** @format int64 */
-    @IsInt({ message: 'event_count must be a whole number.' }) event_count!: number;
-    @ValidateNested({ message: 'invites must be a valid nested object.' }) invites!: Invite[];
-    @ValidateNested({ message: 'usage_hours must be a valid nested object.' }) usage_hours!: UsageHourInfo[];
-    @ValidateNested({ message: 'usage must be a valid nested object.' }) usage!: UsageInfo[];
-    @IsOptional() @ValidateNested({ message: 'data must be a valid nested object.' }) data?: Record<string, unknown>;
+    @IsInt({ message: 'event_count must be a whole number.' })
+    event_count!: number;
+    @ValidateNested({ message: 'invites must be a valid nested object.' })
+    invites!: Invite[];
+    @ValidateNested({ message: 'usage_hours must be a valid nested object.' })
+    usage_hours!: UsageHourInfo[];
+    @ValidateNested({ message: 'usage must be a valid nested object.' })
+    usage!: UsageInfo[];
+    @IsOptional()
+    @ValidateNested({ message: 'data must be a valid nested object.' })
+    data?: Record<string, unknown>;
     @IsDefined({ message: 'is_throttled is required.' }) is_throttled!: boolean;
-    @IsDefined({ message: 'is_over_monthly_limit is required.' }) is_over_monthly_limit!: boolean;
-    @IsDefined({ message: 'is_over_request_limit is required.' }) is_over_request_limit!: boolean;
+    @IsDefined({ message: 'is_over_monthly_limit is required.' })
+    is_over_monthly_limit!: boolean;
+    @IsDefined({ message: 'is_over_request_limit is required.' })
+    is_over_request_limit!: boolean;
 }
 
 export class ViewProject {
     @IsMongoId({ message: 'id must be a valid ObjectId.' }) id!: string;
     /** @format date-time */
-    @IsDate({ message: 'created_utc must be a valid date and time.' }) created_utc!: string;
-    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' }) organization_id!: string;
-    @IsDefined({ message: 'organization_name is required.' }) organization_name!: string;
+    @IsDate({ message: 'created_utc must be a valid date and time.' })
+    created_utc!: string;
+    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' })
+    organization_id!: string;
+    @IsDefined({ message: 'organization_name is required.' })
+    organization_name!: string;
     @IsDefined({ message: 'name is required.' }) name!: string;
-    @IsDefined({ message: 'delete_bot_data_enabled is required.' }) delete_bot_data_enabled!: boolean;
-    @IsOptional() @ValidateNested({ message: 'data must be a valid nested object.' }) data?: Record<string, unknown>;
-    @IsDefined({ message: 'promoted_tabs is required.' }) promoted_tabs!: string[];
+    @IsDefined({ message: 'delete_bot_data_enabled is required.' })
+    delete_bot_data_enabled!: boolean;
+    @IsOptional()
+    @ValidateNested({ message: 'data must be a valid nested object.' })
+    data?: Record<string, unknown>;
+    @IsDefined({ message: 'promoted_tabs is required.' })
+    promoted_tabs!: string[];
     @IsOptional() is_configured?: boolean | null;
     /** @format int64 */
-    @IsInt({ message: 'stack_count must be a whole number.' }) stack_count!: number;
+    @IsInt({ message: 'stack_count must be a whole number.' })
+    stack_count!: number;
     /** @format int64 */
-    @IsInt({ message: 'event_count must be a whole number.' }) event_count!: number;
-    @IsDefined({ message: 'has_premium_features is required.' }) has_premium_features!: boolean;
-    @IsDefined({ message: 'has_slack_integration is required.' }) has_slack_integration!: boolean;
-    @ValidateNested({ message: 'usage_hours must be a valid nested object.' }) usage_hours!: UsageHourInfo[];
-    @ValidateNested({ message: 'usage must be a valid nested object.' }) usage!: UsageInfo[];
+    @IsInt({ message: 'event_count must be a whole number.' })
+    event_count!: number;
+    @IsDefined({ message: 'has_premium_features is required.' })
+    has_premium_features!: boolean;
+    @IsDefined({ message: 'has_slack_integration is required.' })
+    has_slack_integration!: boolean;
+    @ValidateNested({ message: 'usage_hours must be a valid nested object.' })
+    usage_hours!: UsageHourInfo[];
+    @ValidateNested({ message: 'usage must be a valid nested object.' })
+    usage!: UsageInfo[];
 }
 
 export class ViewToken {
     @IsMongoId({ message: 'id must be a valid ObjectId.' }) id!: string;
-    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' }) organization_id!: string;
-    @IsMongoId({ message: 'project_id must be a valid ObjectId.' }) project_id!: string;
-    @IsOptional() @IsMongoId({ message: 'user_id must be a valid ObjectId.' }) user_id?: string | null;
-    @IsOptional() @IsMongoId({ message: 'default_project_id must be a valid ObjectId.' }) default_project_id?: string | null;
+    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' })
+    organization_id!: string;
+    @IsMongoId({ message: 'project_id must be a valid ObjectId.' })
+    project_id!: string;
+    @IsOptional()
+    @IsMongoId({ message: 'user_id must be a valid ObjectId.' })
+    user_id?: string | null;
+    @IsOptional()
+    @IsMongoId({ message: 'default_project_id must be a valid ObjectId.' })
+    default_project_id?: string | null;
     @IsDefined({ message: 'scopes is required.' }) scopes!: string[];
     /** @format date-time */
-    @IsOptional() @IsDate({ message: 'expires_utc must be a valid date and time.' }) expires_utc?: string | null;
+    @IsOptional()
+    @IsDate({ message: 'expires_utc must be a valid date and time.' })
+    expires_utc?: string | null;
     @IsOptional() notes?: string | null;
     @IsDefined({ message: 'is_disabled is required.' }) is_disabled!: boolean;
     @IsDefined({ message: 'is_suspended is required.' }) is_suspended!: boolean;
     /** @format date-time */
-    @IsDate({ message: 'created_utc must be a valid date and time.' }) created_utc!: string;
+    @IsDate({ message: 'created_utc must be a valid date and time.' })
+    created_utc!: string;
     /** @format date-time */
-    @IsDate({ message: 'updated_utc must be a valid date and time.' }) updated_utc!: string;
+    @IsDate({ message: 'updated_utc must be a valid date and time.' })
+    updated_utc!: string;
 }
 
 export class ViewUser {
     @IsMongoId({ message: 'id must be a valid ObjectId.' }) id!: string;
-    @IsDefined({ message: 'organization_ids is required.' }) organization_ids!: string[];
+    @IsDefined({ message: 'organization_ids is required.' })
+    organization_ids!: string[];
     @IsDefined({ message: 'full_name is required.' }) full_name!: string;
     @IsDefined({ message: 'email_address is required.' }) email_address!: string;
-    @IsDefined({ message: 'email_notifications_enabled is required.' }) email_notifications_enabled!: boolean;
-    @IsDefined({ message: 'is_email_address_verified is required.' }) is_email_address_verified!: boolean;
+    @IsDefined({ message: 'email_notifications_enabled is required.' })
+    email_notifications_enabled!: boolean;
+    @IsDefined({ message: 'is_email_address_verified is required.' })
+    is_email_address_verified!: boolean;
     @IsDefined({ message: 'is_active is required.' }) is_active!: boolean;
     @IsDefined({ message: 'is_invite is required.' }) is_invite!: boolean;
     @IsDefined({ message: 'roles is required.' }) roles!: string[];
@@ -497,14 +617,17 @@ export class ViewUser {
 
 export class WebHook {
     @IsMongoId({ message: 'id must be a valid ObjectId.' }) id!: string;
-    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' }) organization_id!: string;
-    @IsMongoId({ message: 'project_id must be a valid ObjectId.' }) project_id!: string;
+    @IsMongoId({ message: 'organization_id must be a valid ObjectId.' })
+    organization_id!: string;
+    @IsMongoId({ message: 'project_id must be a valid ObjectId.' })
+    project_id!: string;
     @IsUrl({}, { message: 'url must be a valid URL.' }) url!: string;
     @IsDefined({ message: 'event_types is required.' }) event_types!: string[];
     @IsDefined({ message: 'is_enabled is required.' }) is_enabled!: boolean;
     @IsDefined({ message: 'version is required.' }) version!: string;
     /** @format date-time */
-    @IsDate({ message: 'created_utc must be a valid date and time.' }) created_utc!: string;
+    @IsDate({ message: 'created_utc must be a valid date and time.' })
+    created_utc!: string;
 }
 
 export class WorkInProgressResult {
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar-organization-switcher.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar-organization-switcher.svelte
index 01daebb6bc..f34a303b10 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar-organization-switcher.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar-organization-switcher.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import type { HTMLAttributes } from 'svelte/elements';
 
+    import { goto } from '$app/navigation';
+    import { resolve } from '$app/paths';
     import DelayedRender from '$comp/delayed-render.svelte';
     import { A } from '$comp/typography';
     import * as Avatar from '$comp/ui/avatar/index';
@@ -8,51 +10,86 @@
     import * as Sidebar from '$comp/ui/sidebar/index';
     import { useSidebar } from '$comp/ui/sidebar/index';
     import { Skeleton } from '$comp/ui/skeleton';
+    import ImpersonateOrganizationDialog from '$features/organizations/components/dialogs/impersonate-organization-dialog.svelte';
     import { ViewOrganization } from '$features/organizations/models';
+    import GlobalUser from '$features/users/components/global-user.svelte';
     import { getInitials } from '$shared/strings';
     import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
+    import Eye from '@lucide/svelte/icons/eye';
+    import EyeOff from '@lucide/svelte/icons/eye-off';
     import Plus from '@lucide/svelte/icons/plus';
     import Settings from '@lucide/svelte/icons/settings';
+    import UserRoundSearch from '@lucide/svelte/icons/user-round-search';
 
     type Props = HTMLAttributes<HTMLUListElement> & {
+        currentOrganizationId: string | undefined;
+        impersonatedOrganization: undefined | ViewOrganization;
         isLoading: boolean;
         organizations: undefined | ViewOrganization[];
-        selected: string | undefined;
     };
 
-    let { class: className, isLoading, organizations, selected = $bindable() }: Props = $props();
+    let { class: className, currentOrganizationId = $bindable(), impersonatedOrganization, isLoading, organizations = [] }: Props = $props();
 
     const sidebar = useSidebar();
-    let activeOrganization = $derived(organizations?.find((organization) => organization.id === selected));
+    const activeOrganization = $derived(impersonatedOrganization ?? organizations.find((organization) => organization.id === currentOrganizationId));
+    const isImpersonating = $derived(!!impersonatedOrganization);
+    let openImpersonateDialog = $state(false);
 
     function onOrganizationSelected(organization: ViewOrganization): void {
         if (sidebar.isMobile) {
             sidebar.toggle();
         }
 
-        if (organization.id === selected) {
+        if (organization.id === currentOrganizationId) {
             return;
         }
 
-        selected = organization.id;
+        currentOrganizationId = organization.id;
+    }
+
+    async function handleImpersonate(organization: ViewOrganization): Promise<void> {
+        await goto(resolve('/(app)'));
+        currentOrganizationId = organization.id;
+    }
+
+    async function stopImpersonating(): Promise<void> {
+        await goto(resolve('/(app)'));
+        currentOrganizationId = organizations[0]?.id;
     }
 </script>
 
-{#if organizations && organizations.length > 1}
+{#if organizations.length > 0 || isImpersonating}
     <Sidebar.Menu class={className}>
         <Sidebar.MenuItem>
             <DropdownMenu.Root>
                 <DropdownMenu.Trigger>
                     {#snippet child({ props })}
-                        <Sidebar.MenuButton {...props} size="lg" class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
-                            <Avatar.Root class="size-8 rounded-lg border" title="Organization Avatar">
-                                <Avatar.Fallback class="rounded-lg">{getInitials(activeOrganization?.name)}</Avatar.Fallback>
+                        <Sidebar.MenuButton
+                            {...props}
+                            size="lg"
+                            class={[
+                                'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground',
+                                isImpersonating && 'bg-violet-100 dark:bg-violet-900/30'
+                            ]}
+                        >
+                            <Avatar.Root class={['size-8 rounded-lg border', isImpersonating && 'border-violet-500']} title="Organization Avatar">
+                                <Avatar.Fallback
+                                    class={['rounded-lg', isImpersonating && 'bg-violet-200 text-violet-900 dark:bg-violet-800 dark:text-violet-100']}
+                                >
+                                    {getInitials(activeOrganization?.name ?? '?')}
+                                </Avatar.Fallback>
                             </Avatar.Root>
                             <div class="grid flex-1 text-left text-sm leading-tight">
                                 <span class="truncate font-semibold">
-                                    {activeOrganization?.name}
+                                    {activeOrganization?.name ?? 'Select an organization'}
+                                </span>
+                                <span class={['truncate text-xs', isImpersonating && 'text-violet-600 dark:text-violet-400']}>
+                                    {#if isImpersonating}
+                                        Impersonating
+                                    {:else}
+                                        <span class="truncate text-xs">{activeOrganization?.plan_name ?? 'No organization selected'}</span>
+                                    {/if}
                                 </span>
-                                <span class="truncate text-xs">{activeOrganization?.plan_name}</span>
                             </div>
                             <ChevronsUpDown class="ml-auto" />
                         </Sidebar.MenuButton>
@@ -65,11 +102,11 @@
                     sideOffset={4}
                 >
                     <DropdownMenu.Label class="text-muted-foreground text-xs">Organizations</DropdownMenu.Label>
-                    {#if organizations}
+                    {#if organizations.length > 0}
                         {#each organizations as organization, index (organization.name)}
                             <DropdownMenu.Item
                                 onSelect={() => onOrganizationSelected(organization)}
-                                data-active={organization.id === selected}
+                                data-active={organization.id === currentOrganizationId && !isImpersonating}
                                 class="data-[active=true]:bg-accent data-[active=true]:text-accent-foreground gap-2 p-2"
                             >
                                 <Avatar.Root class="size-6 rounded-lg border" title={organization.name}>
@@ -79,11 +116,22 @@
                                 <DropdownMenu.Shortcut>⌘{index + 1}</DropdownMenu.Shortcut>
                             </DropdownMenu.Item>
                         {/each}
+                    {:else}
+                        <DropdownMenu.Item class="text-muted-foreground gap-2 p-2" disabled>
+                            <div class="bg-background flex size-6 items-center justify-center rounded-md border">
+                                <UserRoundSearch class="size-4" aria-hidden="true" />
+                            </div>
+                            No organizations available
+                        </DropdownMenu.Item>
                     {/if}
                     <DropdownMenu.Separator />
                     {#if activeOrganization?.id}
                         <DropdownMenu.Item>
-                            <A variant="ghost" href={`/next/organization/${activeOrganization.id}/manage`} class="flex w-full items-center gap-2">
+                            <A
+                                variant="ghost"
+                                href={resolve('/(app)/organization/[organizationId]/manage', { organizationId: activeOrganization.id })}
+                                class="flex w-full items-center gap-2"
+                            >
                                 <div class="bg-background flex size-6 items-center justify-center rounded-md border">
                                     <Settings class="size-4" aria-hidden="true" />
                                 </div>
@@ -91,10 +139,9 @@
                                 <DropdownMenu.Shortcut>⇧⌘go</DropdownMenu.Shortcut>
                             </A>
                         </DropdownMenu.Item>
-                        <DropdownMenu.Separator />
                     {/if}
                     <DropdownMenu.Item>
-                        <A variant="ghost" href="/next/organization/add" class="flex w-full items-center gap-2">
+                        <A variant="ghost" href={resolve('/(app)/organization/add')} class="flex w-full items-center gap-2">
                             <div class="bg-background flex size-6 items-center justify-center rounded-md border">
                                 <Plus class="size-4" aria-hidden="true" />
                             </div>
@@ -102,6 +149,27 @@
                             <DropdownMenu.Shortcut>⇧⌘gn</DropdownMenu.Shortcut>
                         </A>
                     </DropdownMenu.Item>
+                    <GlobalUser>
+                        <DropdownMenu.Separator />
+                        <DropdownMenu.Label class="text-muted-foreground text-xs">Admin</DropdownMenu.Label>
+                        {#if isImpersonating}
+                            <DropdownMenu.Item onSelect={stopImpersonating} class="gap-2 p-2 text-violet-600 dark:text-violet-400">
+                                <div
+                                    class="flex size-6 items-center justify-center rounded-md border border-violet-300 bg-violet-100 dark:border-violet-700 dark:bg-violet-900/50"
+                                >
+                                    <EyeOff class="size-4" aria-hidden="true" />
+                                </div>
+                                <span class="font-medium">Stop Impersonating</span>
+                            </DropdownMenu.Item>
+                        {:else}
+                            <DropdownMenu.Item onSelect={() => (openImpersonateDialog = true)} class="gap-2 p-2">
+                                <div class="bg-background flex size-6 items-center justify-center rounded-md border">
+                                    <Eye class="size-4" aria-hidden="true" />
+                                </div>
+                                <span class="text-muted-foreground font-medium">Impersonate Organization</span>
+                            </DropdownMenu.Item>
+                        {/if}
+                    </GlobalUser>
                 </DropdownMenu.Content>
             </DropdownMenu.Root>
         </Sidebar.MenuItem>
@@ -121,3 +189,11 @@
         </Sidebar.Menu>
     </DelayedRender>
 {/if}
+
+{#if openImpersonateDialog}
+    <ImpersonateOrganizationDialog
+        bind:open={openImpersonateDialog}
+        impersonateOrganization={handleImpersonate}
+        userOrganizationIds={organizations.map((o) => o.id)}
+    />
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar-user.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar-user.svelte
index 69de4db86c..4294ef2eb3 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar-user.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar-user.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
+    import type { ViewOrganization } from '$features/organizations/models';
     import type { Gravatar } from '$features/users/gravatar.svelte';
 
+    import { goto } from '$app/navigation';
+    import { resolve } from '$app/paths';
     import { A } from '$comp/typography';
     import * as Avatar from '$comp/ui/avatar/index';
     import * as DropdownMenu from '$comp/ui/dropdown-menu/index';
     import * as Sidebar from '$comp/ui/sidebar/index';
     import { useSidebar } from '$comp/ui/sidebar/index';
     import { Skeleton } from '$comp/ui/skeleton';
+    import ImpersonateOrganizationDialog from '$features/organizations/components/dialogs/impersonate-organization-dialog.svelte';
     import { organization } from '$features/organizations/context.svelte';
+    import GlobalUser from '$features/users/components/global-user.svelte';
     import { User } from '$features/users/models';
     import BadgeCheck from '@lucide/svelte/icons/badge-check';
     import Bell from '@lucide/svelte/icons/bell';
@@ -16,6 +21,8 @@
     import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
     import Help from '@lucide/svelte/icons/circle-help';
     import CreditCard from '@lucide/svelte/icons/credit-card';
+    import Eye from '@lucide/svelte/icons/eye';
+    import EyeOff from '@lucide/svelte/icons/eye-off';
     import GitHub from '@lucide/svelte/icons/github';
     import LogOut from '@lucide/svelte/icons/log-out';
     import Plus from '@lucide/svelte/icons/plus';
@@ -23,18 +30,31 @@
 
     interface Props {
         gravatar: Gravatar;
+        isImpersonating?: boolean;
         isLoading: boolean;
+        organizations?: ViewOrganization[];
         user: undefined | User;
     }
 
-    let { gravatar, isLoading, user }: Props = $props();
+    let { gravatar, isImpersonating = false, isLoading, organizations = [], user }: Props = $props();
     const sidebar = useSidebar();
+    let openImpersonateDialog = $state(false);
 
     function onMenuClick() {
         if (sidebar.isMobile) {
             sidebar.toggle();
         }
     }
+
+    async function impersonateOrganization(vo: ViewOrganization): Promise<void> {
+        await goto(resolve('/(app)'));
+        organization.current = vo.id;
+    }
+
+    async function stopImpersonating(): Promise<void> {
+        await goto(resolve('/(app)'));
+        organization.current = organizations[0]?.id;
+    }
 </script>
 
 {#if isLoading}
@@ -99,12 +119,12 @@
                     <DropdownMenu.Group>
                         <DropdownMenu.Item>
                             <BadgeCheck />
-                            <A variant="ghost" href="/next/account/manage" class="w-full" onclick={onMenuClick}>Account</A>
+                            <A variant="ghost" href={resolve('/(app)/account/manage')} class="w-full" onclick={onMenuClick}>Account</A>
                             <DropdownMenu.Shortcut>⇧⌘ga</DropdownMenu.Shortcut>
                         </DropdownMenu.Item>
                         <DropdownMenu.Item>
                             <Bell />
-                            <A variant="ghost" href="/next/account/notifications" class="w-full" onclick={onMenuClick}>Notifications</A>
+                            <A variant="ghost" href={resolve('/(app)/account/notifications')} class="w-full" onclick={onMenuClick}>Notifications</A>
                             <DropdownMenu.Shortcut>⇧⌘gn</DropdownMenu.Shortcut>
                         </DropdownMenu.Item>
                         {#if organization.current}
@@ -112,7 +132,7 @@
                                 <Settings />
                                 <A
                                     variant="ghost"
-                                    href={`/next/organization/${organization.current}/manage`}
+                                    href={resolve('/(app)/organization/[organizationId]/manage', { organizationId: organization.current })}
                                     class="flex w-full items-center gap-2"
                                     onclick={onMenuClick}
                                 >
@@ -124,7 +144,7 @@
                                 <CreditCard />
                                 <A
                                     variant="ghost"
-                                    href={`/next/organization/${organization.current}/billing`}
+                                    href={resolve('/(app)/organization/[organizationId]/billing', { organizationId: organization.current })}
                                     class="flex w-full items-center gap-2"
                                     onclick={onMenuClick}
                                 >
@@ -135,7 +155,7 @@
                         {:else}
                             <DropdownMenu.Item>
                                 <Plus />
-                                <A variant="ghost" href="/next/organization/add" class="flex w-full items-center gap-2" onclick={onMenuClick}>
+                                <A variant="ghost" href={resolve('/(app)/organization/add')} class="flex w-full items-center gap-2" onclick={onMenuClick}>
                                     Add organization
                                     <DropdownMenu.Shortcut>⇧⌘gn</DropdownMenu.Shortcut>
                                 </A>
@@ -174,10 +194,27 @@
                             </DropdownMenu.Item>
                         </DropdownMenu.SubContent>
                     </DropdownMenu.Sub>
+                    <GlobalUser>
+                        <DropdownMenu.Separator />
+                        {#if isImpersonating}
+                            <DropdownMenu.Item
+                                onSelect={stopImpersonating}
+                                class="bg-violet-100 text-violet-900 hover:bg-violet-200 dark:bg-violet-900/30 dark:text-violet-100 dark:hover:bg-violet-900/50"
+                            >
+                                <EyeOff />
+                                Stop Impersonating
+                            </DropdownMenu.Item>
+                        {:else}
+                            <DropdownMenu.Item onSelect={() => (openImpersonateDialog = true)}>
+                                <Eye />
+                                Impersonate Organization
+                            </DropdownMenu.Item>
+                        {/if}
+                    </GlobalUser>
                     <DropdownMenu.Separator />
                     <DropdownMenu.Item>
                         <LogOut />
-                        <A variant="ghost" href="/next/logout" class="w-full">Log out</A>
+                        <A variant="ghost" href={resolve('/(auth)/logout')} class="w-full">Log out</A>
                         <DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
                     </DropdownMenu.Item>
                 </DropdownMenu.Content>
@@ -185,3 +222,7 @@
         </Sidebar.MenuItem>
     </Sidebar.Menu>
 {/if}
+
+{#if openImpersonateDialog}
+    <ImpersonateOrganizationDialog bind:open={openImpersonateDialog} {impersonateOrganization} userOrganizationIds={organizations.map((o) => o.id)} />
+{/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar.svelte
index e9c7d65445..850e52fed0 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/sidebar.svelte
@@ -8,17 +8,23 @@
     import ChevronRight from '@lucide/svelte/icons/chevron-right';
     import Settings from '@lucide/svelte/icons/settings-2';
 
-    import type { NavigationItem } from '../../../routes.svelte';
+    import type { NavigationItem, NavigationItemContext } from '../../../routes.svelte';
 
     type Props = ComponentProps<typeof Sidebar.Root> & {
         footer?: Snippet;
         header?: Snippet;
+        impersonating?: boolean;
         routes: NavigationItem[];
     };
 
-    let { footer, header, routes, ...props }: Props = $props();
+    let { footer, header, impersonating = false, routes, ...props }: Props = $props();
     const dashboardRoutes = $derived(routes.filter((route) => route.group === 'Dashboards'));
-    const settingsRoutes = $derived(routes.filter((route) => route.group === 'Settings'));
+
+    // Settings routes need additional filtering based on navigation context
+    const navigationContext: NavigationItemContext = $derived({ authenticated: true, impersonating });
+    const settingsRoutes = $derived(
+        routes.filter((route) => route.group === 'Settings').filter((route) => (route.show ? route.show(navigationContext) : true))
+    );
     const settingsIsActive = $derived(settingsRoutes.some((route) => route.href === page.url.pathname));
 
     const sidebar = useSidebar();
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/navigation-command.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/navigation-command.svelte
index a71b22cc8d..c18d465817 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/navigation-command.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/navigation-command.svelte
@@ -6,12 +6,14 @@
 
     let { open = $bindable(), routes }: { open: boolean; routes: NavigationItem[] } = $props();
 
-    const groupedRoutes: Record<string, NavigationItem[]> = Object.entries(Object.groupBy(routes, (item: NavigationItem) => item.group)).reduce(
-        (acc, [key, value]) => {
-            if (value) acc[key] = value;
-            return acc;
-        },
-        {} as Record<string, NavigationItem[]>
+    const groupedRoutes = $derived(
+        Object.entries(Object.groupBy(routes, (item: NavigationItem) => item.group)).reduce(
+            (acc, [key, value]) => {
+                if (value) acc[key] = value;
+                return acc;
+            },
+            {} as Record<string, NavigationItem[]>
+        )
     );
 
     function closeCommandWindow() {
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte
index 82545f8284..075a128cb6 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+layout.svelte
@@ -8,7 +8,7 @@
     import { env } from '$env/dynamic/public';
     import { accessToken, gotoLogin } from '$features/auth/index.svelte';
     import { invalidatePersistentEventQueries } from '$features/events/api.svelte';
-    import { getOrganizationsQuery, invalidateOrganizationQueries } from '$features/organizations/api.svelte';
+    import { getOrganizationQuery, getOrganizationsQuery, invalidateOrganizationQueries } from '$features/organizations/api.svelte';
     import OrganizationNotifications from '$features/organizations/components/organization-notifications.svelte';
     import { organization, showOrganizationNotifications } from '$features/organizations/context.svelte';
     import { invalidateProjectQueries } from '$features/projects/api.svelte';
@@ -121,6 +121,11 @@
     });
 
     $effect(() => {
+        // Direct read of accessToken.current establishes reactive dependency, working around PersistedState reactivity bug
+        const currentToken = accessToken.current;
+        // Track page.url to ensure effect re-runs on navigation
+        void page.url.pathname;
+
         function handleKeydown(e: KeyboardEvent) {
             if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
                 e.preventDefault();
@@ -128,7 +133,8 @@
             }
         }
 
-        if (!isAuthenticated) {
+        // Check token directly instead of using derived isAuthenticated
+        if (!currentToken) {
             queryClient.cancelQueries();
             queryClient.invalidateQueries();
 
@@ -160,26 +166,53 @@
 
     const meQuery = getMeQuery();
     const gravatar = getGravatarFromCurrentUser(meQuery);
+    const isGlobalAdmin = $derived(!!meQuery.data?.roles?.includes('global'));
 
     const organizationsQuery = getOrganizationsQuery({});
+    const organizations = $derived(organizationsQuery.data?.data ?? []);
+
+    const impersonatingOrganizationId = $derived.by(() => {
+        const isUserOrganization = meQuery.data?.organization_ids.includes(organization.current ?? '');
+        return isUserOrganization ? undefined : organization.current;
+    });
+
+    const impersonatedOrganizationQuery = getOrganizationQuery({
+        route: {
+            get id() {
+                return impersonatingOrganizationId;
+            }
+        }
+    });
+    const impersonatedOrganization = $derived(impersonatingOrganizationId ? impersonatedOrganizationQuery.data : undefined);
+
+    // Simple organization selection - pick first available if none selected
     $effect(() => {
         if (!organizationsQuery.isSuccess) {
             return;
         }
 
-        if (!organizationsQuery.data.data || organizationsQuery.data.data.length === 0) {
+        const hasOrganizations = organizations.length > 0;
+        if (!hasOrganizations) {
             organization.current = undefined;
-            goto(resolve(`/(app)/organization/add`));
+
+            // Redirect non-admins to add organization page
+            if (!isGlobalAdmin && !organizationsQuery.isLoading) {
+                goto(resolve(`/(app)/organization/add`));
+            }
+
             return;
         }
 
-        if (!organizationsQuery.data.data.find((org) => org.id === organization.current)) {
-            organization.current = organizationsQuery.data.data[0]!.id;
+        // Select first organization if none selected
+        if (!organization.current) {
+            organization.current = organizations[0]!.id;
         }
     });
 
+    const isImpersonating = $derived(!!impersonatedOrganization);
+
     const filteredRoutes = $derived.by(() => {
-        const context: NavigationItemContext = { authenticated: isAuthenticated, user: meQuery.data };
+        const context: NavigationItemContext = { authenticated: isAuthenticated, impersonating: isImpersonating, user: meQuery.data };
         return routes().filter((route) => (route.show ? route.show(context) : true));
     });
 
@@ -191,18 +224,19 @@
 
 {#if isAuthenticated}
     <Navbar bind:isCommandOpen></Navbar>
-    <Sidebar routes={filteredRoutes}>
+    <Sidebar routes={filteredRoutes} impersonating={!!impersonatedOrganization}>
         {#snippet header()}
             <SidebarOrganizationSwitcher
                 class="pt-2"
                 isLoading={organizationsQuery.isLoading}
-                organizations={organizationsQuery.data?.data ?? []}
-                bind:selected={organization.current}
+                {organizations}
+                {impersonatedOrganization}
+                bind:currentOrganizationId={organization.current}
             />
         {/snippet}
 
         {#snippet footer()}
-            <SidebarUser isLoading={meQuery.isLoading} user={meQuery.data} {gravatar} />
+            <SidebarUser isLoading={meQuery.isLoading} user={meQuery.data} {gravatar} isImpersonating={!!impersonatedOrganization} {organizations} />
         {/snippet}
     </Sidebar>
     <div class="flex w-full pt-16">
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
index 13eef9e694..403c2a72d6 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
@@ -77,6 +77,7 @@
         }
     });
 
+    // NOTE: This might be applying query string parameters when redirecting away.
     watch(
         () => organization.current,
         () => {
@@ -302,7 +303,11 @@
     <Sheet.Content class="w-full overflow-y-auto sm:max-w-full md:w-5/6">
         <Sheet.Header>
             <Sheet.Title
-                >Event Details <Button href="/next/event/{selectedEventId}" size="sm" title="Open in new window" variant="ghost"><ExternalLink /></Button
+                >Event Details <Button
+                    href={selectedEventId ? resolve('/(app)/event/[eventId]', { eventId: selectedEventId }) : '#'}
+                    size="sm"
+                    title="Open in new window"
+                    variant="ghost"><ExternalLink /></Button
                 ></Sheet.Title
             >
         </Sheet.Header>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/appearance/(components)/theme-preview.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/appearance/(components)/theme-preview.svelte
index b116860e46..30a65c3125 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/appearance/(components)/theme-preview.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/appearance/(components)/theme-preview.svelte
@@ -7,7 +7,7 @@
 
     let { mode }: Props = $props();
 
-    let resolvedMode = $state(mode !== 'system' ? mode : (systemPrefersMode.current ?? 'dark'));
+    const resolvedMode = $derived(mode !== 'system' ? mode : (systemPrefersMode.current ?? 'dark'));
 </script>
 
 {#if resolvedMode === 'light'}
@@ -16,7 +16,7 @@
             <!-- secondary-->
             <div class="space-y-2 rounded-md bg-[hsl(0,0%,100%)] p-2 shadow-xs">
                 <!--card -->
-                <div class="h-2 w-[80px] rounded-lg bg-[hsl(240,3.8%,46.1%)]"></div>
+                <div class="h-2 w-20 rounded-lg bg-[hsl(240,3.8%,46.1%)]"></div>
                 <!--muted-foreground -->
                 <div class="h-2 w-[100px] rounded-lg bg-[hsl(240,3.8%,46.1%)]"></div>
             </div>
@@ -36,7 +36,7 @@
             <!-- secondary-->
             <div class="space-y-2 rounded-md bg-[hsl(222,17%,11%)] p-2 shadow-xs">
                 <!--card -->
-                <div class="h-2 w-[80px] rounded-lg bg-[hsl(240,5%,64.9%)]"></div>
+                <div class="h-2 w-20 rounded-lg bg-[hsl(240,5%,64.9%)]"></div>
                 <!--muted-foreground -->
                 <div class="h-2 w-[100px] rounded-lg bg-[hsl(240,5%,64.9%)]"></div>
             </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/security/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/security/+page.svelte
index 50734e1ccb..4e7e749b43 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/security/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/security/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import ErrorMessage from '$comp/error-message.svelte';
     import PasswordInput from '$comp/form/password-input.svelte';
     import GoogleIcon from '$comp/icons/GoogleIcon.svelte';
@@ -119,11 +120,15 @@
                         <div class="min-w-0 flex-1 font-semibold">Microsoft account</div>
                         <div class="inline-flex items-center">
                             {#if true}
-                                <Button aria-label="Disconnect Microsoft account" onclick={() => liveLogin('/next/account/security')} variant="outline">
+                                <Button
+                                    aria-label="Disconnect Microsoft account"
+                                    onclick={() => liveLogin(resolve('/(app)/account/security'))}
+                                    variant="outline"
+                                >
                                     Disconnect
                                 </Button>
                             {:else}
-                                <Button aria-label="Connect Microsoft account" onclick={() => liveLogin('/next/account/security')}>Connect</Button>
+                                <Button aria-label="Connect Microsoft account" onclick={() => liveLogin(resolve('/(app)/account/security'))}>Connect</Button>
                             {/if}
                         </div>
                     </div>
@@ -136,11 +141,15 @@
                         <div class="min-w-0 flex-1 font-semibold">Google account</div>
                         <div class="inline-flex items-center">
                             {#if false}
-                                <Button aria-label="Disconnect Google account" onclick={() => googleLogin('/next/account/security')} variant="outline">
+                                <Button
+                                    aria-label="Disconnect Google account"
+                                    onclick={() => googleLogin(resolve('/(app)/account/security'))}
+                                    variant="outline"
+                                >
                                     Disconnect
                                 </Button>
                             {:else}
-                                <Button aria-label="Connect Google account" onclick={() => googleLogin('/next/account/security')}>Connect</Button>
+                                <Button aria-label="Connect Google account" onclick={() => googleLogin(resolve('/(app)/account/security'))}>Connect</Button>
                             {/if}
                         </div>
                     </div>
@@ -153,11 +162,15 @@
                         <div class="min-w-0 flex-1 font-semibold">Facebook account</div>
                         <div class="inline-flex items-center">
                             {#if false}
-                                <Button aria-label="Disconnect Facebook account" onclick={() => facebookLogin('/next/account/security')} variant="outline">
+                                <Button
+                                    aria-label="Disconnect Facebook account"
+                                    onclick={() => facebookLogin(resolve('/(app)/account/security'))}
+                                    variant="outline"
+                                >
                                     Disconnect
                                 </Button>
                             {:else}
-                                <Button aria-label="Connect Facebook account" onclick={() => facebookLogin('/next/account/security')}>Connect</Button>
+                                <Button aria-label="Connect Facebook account" onclick={() => facebookLogin(resolve('/(app)/account/security'))}>Connect</Button>
                             {/if}
                         </div>
                     </div>
@@ -170,11 +183,15 @@
                         <div class="min-w-0 flex-1 font-semibold">GitHub account</div>
                         <div class="inline-flex items-center">
                             {#if true}
-                                <Button aria-label="Disconnect GitHub account" onclick={() => githubLogin('/next/account/security')} variant="outline">
+                                <Button
+                                    aria-label="Disconnect GitHub account"
+                                    onclick={() => githubLogin(resolve('/(app)/account/security'))}
+                                    variant="outline"
+                                >
                                     Disconnect
                                 </Button>
                             {:else}
-                                <Button aria-label="Connect GitHub account" onclick={() => githubLogin('/next/account/security')}>Connect</Button>
+                                <Button aria-label="Connect GitHub account" onclick={() => githubLogin(resolve('/(app)/account/security'))}>Connect</Button>
                             {/if}
                         </div>
                     </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte
index dc5690a73e..c80f9439dd 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte
@@ -66,7 +66,7 @@
 
     function rowHref(row: EventSummaryModel<SummaryTemplateKeys>): string {
         const stackFilter = `stack:${row.id}`;
-        return resolve('/(app)') + `?filter=${encodeURIComponent(stackFilter)}`;
+        return `${resolve('/(app)')}?filter=${encodeURIComponent(stackFilter)}`;
     }
 
     const DEFAULT_TIME_RANGE = '[now-7d TO now]';
@@ -330,7 +330,12 @@
     <Sheet.Content class="w-full overflow-y-auto sm:max-w-full md:w-5/6">
         <Sheet.Header>
             <Sheet.Title
-                >Event Details <Button href="/next/event/{eventId}" size="sm" title="Open in new window" variant="ghost"><ExternalLink /></Button></Sheet.Title
+                >Event Details <Button
+                    href={eventId ? resolve('/(app)/event/[eventId]', { eventId }) : '#'}
+                    size="sm"
+                    title="Open in new window"
+                    variant="ghost"><ExternalLink /></Button
+                ></Sheet.Title
             >
         </Sheet.Header>
         <div class="px-4">
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/billing/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/billing/+page.svelte
index d2b616bf2c..d08fb3a2f1 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/billing/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/billing/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { resolve } from '$app/paths';
     import ErrorMessage from '$comp/error-message.svelte';
     import DateTime from '$comp/formatters/date-time.svelte';
     import { A, H4 } from '$comp/typography';
@@ -46,7 +47,7 @@
     }
 
     function handleOpenInvoice(invoiceId: string) {
-        window.open(`/next/payment/${invoiceId}`, '_blank');
+        window.open(resolve('/(app)/payment/[id]', { id: invoiceId }), '_blank');
     }
 
     function handleViewStripeInvoice(invoiceId: string) {
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/manage/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/manage/+page.svelte
index 1e914cc046..8c76b014c3 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/manage/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/manage/+page.svelte
@@ -133,7 +133,7 @@
     </form>
 
     <div class="flex w-full items-center justify-between">
-        <Button variant="secondary" href="/next/issues">
+        <Button variant="secondary" href={resolve('/(app)/issues')}>
             <Issues class="mr-2 size-4" /> Go To Issues
         </Button>
 
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/projects/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/projects/+page.svelte
index 8dffd0451e..ca3b257d8a 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/projects/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/projects/+page.svelte
@@ -7,6 +7,7 @@
     import { H3, Muted } from '$comp/typography';
     import { Button } from '$comp/ui/button';
     import { Input } from '$comp/ui/input';
+    import { Separator } from '$comp/ui/separator';
     import { organization } from '$features/organizations/context.svelte';
     import { type GetOrganizationProjectsParams, getOrganizationProjectsQuery } from '$features/projects/api.svelte';
     import { getTableOptions } from '$features/projects/components/table/options.svelte';
@@ -92,6 +93,7 @@
             </Button>
         </div>
     </div>
+    <Separator />
     <ProjectsDataTable bind:limit={projectsQueryParameters.limit!} isLoading={projectsQuery.isLoading} {rowClick} {rowHref} {table}>
         {#snippet toolbarChildren()}
             <Input type="search" placeholder="Filter projects..." class="flex-1" bind:value={projectsQueryParameters.filter} />
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/routes.svelte.ts b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/routes.svelte.ts
index 608ad63961..8b170727d6 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/routes.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/routes.svelte.ts
@@ -50,8 +50,14 @@ export function routes(): NavigationItem[] {
         {
             group: 'Settings',
             href: resolve('/(app)/organization/[organizationId]/projects', { organizationId }),
-            icon: Settings,
+            icon: Folder,
             title: 'Projects'
+        },
+        {
+            group: 'Settings',
+            href: resolve('/(app)/organization/[organizationId]/users', { organizationId }),
+            icon: Users,
+            title: 'Users'
         }
     ];
 }
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/routes.svelte.ts b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/routes.svelte.ts
index 94df31958f..03fa8bc5df 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/routes.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/routes.svelte.ts
@@ -11,6 +11,7 @@ export function routes(): NavigationItem[] {
             group: 'Settings',
             href: resolve('/(app)/organization/list'),
             icon: Settings,
+            show: (context) => !context.impersonating,
             title: 'Organizations'
         },
         ...organizationSettingsRoutes()
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/+layout.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/+layout.svelte
index c8d5fefadc..bddcfd5add 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/+layout.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/+layout.svelte
@@ -76,7 +76,7 @@
                     <OrganizationAdminActionsDropdownMenu organization={organizationQuery.data} />
                 </GlobalUser>
             {/if}
-            <Button variant="secondary" size="icon" href="/account/manage?tab=notifications&projectId={projectId}" title="Notification Settings">
+            <Button variant="secondary" size="icon" href={`${resolve('/(app)/account/notifications')}?project=${projectId}`} title="Notification Settings">
                 <NotificationSettings class="size-4" />
             </Button>
         </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/manage/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/manage/+page.svelte
index 43d2939b1a..3b6af8dde9 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/manage/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/manage/+page.svelte
@@ -153,7 +153,7 @@
 
     <div class="flex w-full items-center justify-between">
         <div class="flex gap-2">
-            <Button variant="secondary" href="/next/issues?filter=project:{projectId}">
+            <Button variant="secondary" href={`${resolve('/(app)/issues')}?filter=project:${projectId}`}>
                 <Issues class="mr-2 size-4" /> Go To Issues
             </Button>
         </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/redirect-to-events.svelte.ts b/src/Exceptionless.Web/ClientApp/src/routes/(app)/redirect-to-events.svelte.ts
index 3aace7da9a..d594c20961 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/redirect-to-events.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/redirect-to-events.svelte.ts
@@ -10,7 +10,7 @@ import { buildFilterCacheKey, toFilter, updateFilterCache } from '$features/even
  */
 export async function redirectToEventsWithFilter(organizationId: string | undefined, addedOrUpdated: IFilter): Promise<void> {
     const filter = toFilter([addedOrUpdated]);
-    const filterCacheKey = buildFilterCacheKey(organizationId, '/next/', filter);
+    const filterCacheKey = buildFilterCacheKey(organizationId, resolve('/(app)'), filter);
     updateFilterCache(filterCacheKey, [addedOrUpdated]);
 
     await goto(`${resolve('/(app)')}?filter=${encodeURIComponent(filter)}`);
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
index e3189c38b5..5b81d822c7 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
@@ -280,7 +280,11 @@
     <Sheet.Content class="w-full overflow-y-auto sm:max-w-full md:w-5/6">
         <Sheet.Header>
             <Sheet.Title
-                >Event Details <Button href="/next/event/{selectedEventId}" size="sm" title="Open in new window" variant="ghost"><ExternalLink /></Button
+                >Event Details <Button
+                    href={selectedEventId ? resolve('/(app)/event/[eventId]', { eventId: selectedEventId }) : '#'}
+                    size="sm"
+                    title="Open in new window"
+                    variant="ghost"><ExternalLink /></Button
                 ></Sheet.Title
             >
         </Sheet.Header>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/+layout.svelte b/src/Exceptionless.Web/ClientApp/src/routes/+layout.svelte
index b9310b8538..c3b226e07a 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/+layout.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/+layout.svelte
@@ -42,15 +42,12 @@
         }
 
         if (status === 401 && !ctx.options.expectedStatusCodes?.includes(401)) {
-            accessToken.current = null;
-            return;
-        }
-
-        if (status === 404 && !ctx.options.expectedStatusCodes?.includes(404)) {
+            if (accessToken.current) {
+                accessToken.current = '';
+            }
+        } else if (status === 404 && !ctx.options.expectedStatusCodes?.includes(404)) {
             throw error(404, 'Not found');
-        }
-
-        if ([0, 408, 503].includes(status) && !ctx.options.expectedStatusCodes?.includes(status)) {
+        } else if ([0, 408, 503].includes(status) && !ctx.options.expectedStatusCodes?.includes(status)) {
             const url = page.url;
             if (url.pathname.startsWith('/next/status')) {
                 return;
@@ -78,11 +75,24 @@
                     }
 
                     if (error instanceof ProblemDetails) {
-                        if (error.status === 401) {
+                        const status = error.status;
+
+                        // Never retry auth / obvious client bugs
+                        if (!status) {
+                            return true;
+                        }
+
+                        if ([400, 401, 403, 404, 410, 422].includes(status)) {
                             return false;
                         }
 
-                        return !!error.status && error.status < 500;
+                        // Retry "likely transient" errors
+                        if (status === 408 || status === 429 || (status >= 500 && status < 600)) {
+                            return true;
+                        }
+
+                        // Default: no retry
+                        return false;
                     }
 
                     return true;
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/routes.svelte.ts b/src/Exceptionless.Web/ClientApp/src/routes/routes.svelte.ts
index 1986c2a14a..951c12e4fd 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/routes.svelte.ts
+++ b/src/Exceptionless.Web/ClientApp/src/routes/routes.svelte.ts
@@ -17,6 +17,7 @@ export type NavigationItem = {
 
 export type NavigationItemContext = {
     authenticated: boolean;
+    impersonating?: boolean;
     user?: User;
 };
 
diff --git a/src/Exceptionless.Web/ClientApp/vite.config.ts b/src/Exceptionless.Web/ClientApp/vite.config.ts
index 8f838afefe..521b51c653 100644
--- a/src/Exceptionless.Web/ClientApp/vite.config.ts
+++ b/src/Exceptionless.Web/ClientApp/vite.config.ts
@@ -84,7 +84,8 @@ export default defineConfig({
                     environment: 'node',
                     exclude: ['src/**/*.svelte.{test,spec}.{js,ts}'],
                     include: ['src/**/*.{test,spec}.{js,ts}'],
-                    name: 'server'
+                    name: 'server',
+                    setupFiles: ['./vitest-setup-server.ts']
                 }
             }
         ]
diff --git a/src/Exceptionless.Web/ClientApp/vitest-setup-client.ts b/src/Exceptionless.Web/ClientApp/vitest-setup-client.ts
index 44ac757bf0..df755f330c 100644
--- a/src/Exceptionless.Web/ClientApp/vitest-setup-client.ts
+++ b/src/Exceptionless.Web/ClientApp/vitest-setup-client.ts
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom/vitest';
-import { vi } from 'vitest';
+import { beforeEach, vi } from 'vitest';
 
 // required for svelte5 + jsdom as jsdom does not support matchMedia
 Object.defineProperty(window, 'matchMedia', {
@@ -15,4 +15,33 @@ Object.defineProperty(window, 'matchMedia', {
     writable: true
 });
 
+// Mock localStorage for all client tests
+let storage: Record<string, string> = {};
+
+beforeEach(() => {
+    storage = {};
+});
+
+const mockStorage = {
+    clear: () => {
+        storage = {};
+    },
+    getItem: (key: string) => storage[key] ?? null,
+    key: (index: number) => Object.keys(storage)[index] ?? null,
+    get length() {
+        return Object.keys(storage).length;
+    },
+    removeItem: (key: string) => {
+        delete storage[key];
+    },
+    setItem: (key: string, value: string) => {
+        storage[key] = value;
+    }
+};
+
+Object.defineProperty(window, 'localStorage', {
+    configurable: true,
+    value: mockStorage
+});
+
 // add more mocks here if you need them
diff --git a/src/Exceptionless.Web/ClientApp/vitest-setup-server.ts b/src/Exceptionless.Web/ClientApp/vitest-setup-server.ts
new file mode 100644
index 0000000000..cd96ad84e4
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/vitest-setup-server.ts
@@ -0,0 +1,5 @@
+// Polyfill WebSocket for Node.js environment using mock-socket
+// This is required for vitest-websocket-mock to work properly in server tests
+import { WebSocket } from 'mock-socket';
+
+globalThis.WebSocket = WebSocket as typeof globalThis.WebSocket;
diff --git a/src/Exceptionless.Web/Models/Organization/ViewOrganization.cs b/src/Exceptionless.Web/Models/Organization/ViewOrganization.cs
index e0e936978f..a9cd8a75cb 100644
--- a/src/Exceptionless.Web/Models/Organization/ViewOrganization.cs
+++ b/src/Exceptionless.Web/Models/Organization/ViewOrganization.cs
@@ -4,10 +4,11 @@
 
 namespace Exceptionless.Web.Models;
 
-public record ViewOrganization : IIdentity, IData, IHaveCreatedDate
+public record ViewOrganization : IIdentity, IData, IHaveDates
 {
     public string Id { get; set; } = null!;
     public DateTime CreatedUtc { get; set; }
+    public DateTime UpdatedUtc { get; set; }
     public string Name { get; set; } = null!;
     public string PlanId { get; set; } = null!;
     public string PlanName { get; set; } = null!;