Merge branch 'main' into issue_5015

fix: add build cache path for local
2026-07-10 16:40:34 +01:00 · 2026-07-09 18:41:13 +05:30 · 2026-06-04 13:59:50 +05:30 · 2026-06-04 12:36:06 +05:30 · 2026-05-22 11:13:26 +05:30 · 2026-05-22 10:51:18 +05:30
116 changed files with 2218 additions and 2892 deletions
--- a/.github/workflows/e2eci.yaml
+++ b/.github/workflows/e2eci.yaml
@@ -45,9 +45,15 @@ jobs:
      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-e2e')
    runs-on: ubuntu-latest
    timeout-minutes: 30
+    env:
+      SIGNOZ_BUILDX_GHA_SCOPE: signoz-e2e
    steps:
      - name: checkout
        uses: actions/checkout@v4
+      - name: setup-buildx
+        uses: docker/setup-buildx-action@v3
+      - name: expose-gha-runtime
+        uses: crazy-max/ghaction-github-runtime@04d248b84655b509d8c44dc1d6f990c879747487
      - name: python
        uses: actions/setup-python@v5
        with:
--- a/.github/workflows/integrationci.yaml
+++ b/.github/workflows/integrationci.yaml
@@ -76,9 +76,15 @@ jobs:
      ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-integrate')
    runs-on: ubuntu-latest
+    env:
+      SIGNOZ_BUILDX_GHA_SCOPE: signoz-integration
    steps:
      - name: checkout
        uses: actions/checkout@v4
+      - name: setup-buildx
+        uses: docker/setup-buildx-action@v3
+      - name: expose-gha-runtime
+        uses: crazy-max/ghaction-github-runtime@04d248b84655b509d8c44dc1d6f990c879747487
      - name: python
        uses: actions/setup-python@v5
        with:
--- a/19
+++ b/19
@@ -34,6 +34,8 @@ DOCKER_BUILD_ARCHS_ENTERPRISE 	= $(addprefix docker-build-enterprise-,$(ARCHS))
 DOCKERFILE_ENTERPRISE 			= $(SRC)/cmd/enterprise/Dockerfile
 DOCKER_REGISTRY_ENTERPRISE 		?= docker.io/signoz/signoz
 JS_BUILD_CONTEXT 				= $(SRC)/frontend
+DOCKER_BUILDX_PRUNE_FLAGS 		?= --force
+SIGNOZ_INTEGRATION_BUILD_CACHE_DIR 	?= /tmp/signoz-integration-buildx-cache

 ##############################################################
 # directories
@@ -210,7 +212,7 @@ py-lint: ## Run ruff check across the shared tests project

 .PHONY: py-test-setup
 py-test-setup: ## Bring up the shared SigNoz backend used by integration and e2e tests
-	@cd tests && uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no integration/bootstrap/setup.py::test_setup
+	@cd tests && SIGNOZ_INTEGRATION_BUILD_CACHE_DIR=$(SIGNOZ_INTEGRATION_BUILD_CACHE_DIR) uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no integration/bootstrap/setup.py::test_setup

 .PHONY: py-test-teardown
 py-test-teardown: ## Tear down the shared SigNoz backend
@@ -229,6 +231,21 @@ py-clean: ## Clear all pycache and pytest cache from tests directory recursively
 	@find tests -type f -name "*.pyo" -delete 2>/dev/null || true
 	@echo ">> python cache cleaned"

+.PHONY: py-docker-clean
+py-docker-clean: ## Remove Docker image and build caches used by python integration tests
+	@echo ">> removing SigNoz integration test image"
+	@docker image rm -f signoz:integration 2>/dev/null || true
+	@echo ">> removing local integration buildx cache directories"
+	@rm -rf $(SIGNOZ_INTEGRATION_BUILD_CACHE_DIR) $(SIGNOZ_INTEGRATION_BUILD_CACHE_DIR)-next
+	@echo ">> pruning docker buildx cache with flags: $(DOCKER_BUILDX_PRUNE_FLAGS)"
+	@docker buildx prune $(DOCKER_BUILDX_PRUNE_FLAGS)
+
+.PHONY: py-test-clean
+py-test-clean: ## Tear down python test stack and remove python/Docker test caches
+	@$(MAKE) py-test-teardown || true
+	@$(MAKE) py-clean
+	@$(MAKE) py-docker-clean
+

 ##############################################################
 # generate commands
--- a/cmd/enterprise/Dockerfile.integration
+++ b/cmd/enterprise/Dockerfile.integration
@@ -1,3 +1,5 @@
+# syntax=docker/dockerfile:1.13
+
 FROM golang:1.25-bookworm

 ARG OS="linux"
@@ -21,7 +23,8 @@ RUN set -eux; \

 COPY go.mod go.sum ./

-RUN go mod download
+RUN --mount=type=cache,target=/go/pkg/mod \
+	go mod download

 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
@@ -29,7 +32,9 @@ COPY ./pkg/ ./pkg/
 COPY ./templates /root/templates

 COPY Makefile Makefile
-RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
+RUN --mount=type=cache,target=/go/pkg/mod \
+	--mount=type=cache,target=/root/.cache/go-build \
+	TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
 RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz

 RUN chmod 755 /root /root/signoz
--- a/cmd/enterprise/Dockerfile.with-web.integration
+++ b/cmd/enterprise/Dockerfile.with-web.integration
@@ -1,3 +1,5 @@
+# syntax=docker/dockerfile:1.13
+
 FROM node:22-bookworm AS build

 WORKDIR /opt/
@@ -30,7 +32,8 @@ RUN set -eux; \

 COPY go.mod go.sum ./

-RUN go mod download
+RUN --mount=type=cache,target=/go/pkg/mod \
+	go mod download

 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
@@ -38,7 +41,9 @@ COPY ./pkg/ ./pkg/
 COPY ./templates /root/templates

 COPY Makefile Makefile
-RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
+RUN --mount=type=cache,target=/go/pkg/mod \
+	--mount=type=cache,target=/root/.cache/go-build \
+	TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
 RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz

 COPY --from=build /opt/build ./web/
--- a/conf/example.yaml
+++ b/conf/example.yaml
@@ -129,7 +129,7 @@ sqlstore:
    # The timeout for the sqlite database to wait for a lock.
    busy_timeout: 10s
    # The default transaction locking behavior. Supported values: deferred, immediate, exclusive.
-    transaction_mode: immediate
+    transaction_mode: deferred

 ##################### APIServer #####################
 apiserver:
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -7394,11 +7394,9 @@ components:
        op:
          $ref: '#/components/schemas/RuletypesCompareOperator'
        recoveryTarget:
-          format: double
          nullable: true
          type: number
        target:
-          format: double
          nullable: true
          type: number
        targetUnit:
@@ -7682,7 +7680,6 @@ components:
        selectedQueryName:
          type: string
        target:
-          format: double
          nullable: true
          type: number
        targetUnit:
@@ -18171,16 +18168,6 @@ paths:
        public dashboard. The panel is addressed by its key in spec.panels.
      operationId: GetPublicDashboardPanelQueryRangeV2
      parameters:
-      - in: query
-        name: startTime
-        required: false
-        schema:
-          type: string
-      - in: query
-        name: endTime
-        required: false
-        schema:
-          type: string
      - in: path
        name: id
        required: true
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -75,7 +75,7 @@
    "crypto-js": "4.2.0",
    "d3-hierarchy": "3.1.2",
    "dayjs": "^1.10.7",
-    "dompurify": "3.4.11",
+    "dompurify": "3.4.0",
    "event-source-polyfill": "1.0.31",
    "eventemitter3": "5.0.1",
    "history": "4.10.1",
@@ -238,18 +238,10 @@
    "prismjs": "1.30.0",
    "got": "11.8.5",
    "form-data": "4.0.6",
-    "brace-expansion": "^2.0.3",
+    "brace-expansion": "^2.0.2",
    "on-headers": "^1.1.0",
    "js-cookie": "^3.0.7",
    "tmp": "0.2.7",
-    "vite": "npm:rolldown-vite@7.3.1",
-    "dompurify": "3.4.11",
-    "js-yaml@3": "3.15.0",
-    "js-yaml@4": "4.2.0",
-    "yaml@1": "1.10.3",
-    "react-router@6": "6.30.4",
-    "markdown-it": "14.2.0",
-    "mdast-util-to-hast@13": "13.2.1",
-    "protocol-buffers-schema": "3.6.1"
+    "vite": "npm:rolldown-vite@7.3.1"
  }
 }
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -19,19 +19,11 @@ overrides:
  prismjs: 1.30.0
  got: 11.8.5
  form-data: 4.0.6
-  brace-expansion: ^2.0.3
+  brace-expansion: ^2.0.2
  on-headers: ^1.1.0
  js-cookie: ^3.0.7
  tmp: 0.2.7
  vite: npm:rolldown-vite@7.3.1
-  dompurify: 3.4.11
-  js-yaml@3: 3.15.0
-  js-yaml@4: 4.2.0
-  yaml@1: 1.10.3
-  react-router@6: 6.30.4
-  markdown-it: 14.2.0
-  mdast-util-to-hast@13: 13.2.1
-  protocol-buffers-schema: 3.6.1

 importers:

@@ -87,7 +79,7 @@ importers:
        version: 0.0.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@signozhq/ui':
        specifier: 0.0.23
-        version: 0.0.23(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.4(react@18.2.0))(react@18.2.0)
+        version: 0.0.23(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
      '@tanstack/react-table':
        specifier: 8.21.3
        version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -161,8 +153,8 @@ importers:
        specifier: ^1.10.7
        version: 1.11.20
      dompurify:
-        specifier: 3.4.11
-        version: 3.4.11
+        specifier: 3.4.0
+        version: 3.4.0
      event-source-polyfill:
        specifier: 1.0.31
        version: 1.0.31
@@ -204,7 +196,7 @@ importers:
        version: 12.4.13(@emotion/is-prop-valid@1.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      nuqs:
        specifier: 2.8.8
-        version: 2.8.8(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.4(react@18.2.0))(react@18.2.0)
+        version: 2.8.8(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
      overlayscrollbars:
        specifier: ^2.8.1
        version: 2.9.2
@@ -3048,10 +3040,6 @@ packages:
    resolution: {integrity: sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==}
    engines: {node: '>=14.0.0'}

-  '@remix-run/router@1.23.3':
-    resolution: {integrity: sha512-4An71tdz9X8+3sI4Qqqd2LWd9vS39J7sqd9EU4Scw7TJE/qB10Flv/UuqbPVgfQV9XoK8Np6jNquZitnZq5i+Q==}
-    engines: {node: '>=14.0.0'}
-
  '@rolldown/binding-android-arm64@1.0.0-beta.53':
    resolution: {integrity: sha512-Ok9V8o7o6YfSdTTYA/uHH30r3YtOxLD6G3wih/U9DO0ucBBFq8WPt/DslU53OgfteLRHITZny9N/qCUxMf9kjQ==}
    engines: {node: ^20.19.0 || >=22.12.0}
@@ -4155,8 +4143,8 @@ packages:
  boolbase@1.0.0:
    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}

-  brace-expansion@2.1.1:
-    resolution: {integrity: sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==}
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}

  braces@3.0.3:
    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
@@ -4817,8 +4805,14 @@ packages:
    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
    engines: {node: '>= 4'}

-  dompurify@3.4.11:
-    resolution: {integrity: sha512-zhlUV12GsaRzMsf9q5M254YhA4+VuF0fG+QFqu6aYpoGlKtz+w8//jBcGVYBgQkR5GHjUomejY84AV+/uPbWdw==}
+  dompurify@3.2.4:
+    resolution: {integrity: sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==}
+
+  dompurify@3.2.7:
+    resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
+
+  dompurify@3.4.0:
+    resolution: {integrity: sha512-nolgK9JcaUXMSmW+j1yaSvaEaoXYHwWyGJlkoCTghc97KgGDDSnpoU/PlEnw63Ah+TGKFOyY+X5LnxaWbCSfXg==}

  domutils@2.8.0:
    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
@@ -6061,12 +6055,12 @@ packages:
  js-tokens@4.0.0:
    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}

-  js-yaml@3.15.0:
-    resolution: {integrity: sha512-ttBQIIQPDeLjpPOohtUdXuXUVoA2uIB6fEH9HyJ7234s5mBJ5wTx20njxplLZQgLaOfpmPQA7X2t5AX6tIPbog==}
+  js-yaml@3.14.1:
+    resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
    hasBin: true

-  js-yaml@4.2.0:
-    resolution: {integrity: sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw==}
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
    hasBin: true

  jsdom@20.0.3:
@@ -6250,8 +6244,8 @@ packages:
  lines-and-columns@1.2.4:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}

-  linkify-it@5.0.2:
-    resolution: {integrity: sha512-ONTm2jCMAVZjgQa/Fy1kScXsuOoF5NPTsoFBdE1KVIZ2vAh/r9+Bqo+0jINCBYnavTPQZz38QzFTme79ENoN3Q==}
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}

  lint-staged@17.0.4:
    resolution: {integrity: sha512-+rU9lSUyVOZ/hDUmRLVGzyS2v73cDdQjX+XQz1AaOdIE4RysLq0HoPW2HrrgeNCLklkhi904VBU1bmgWLHVnkA==}
@@ -6370,8 +6364,8 @@ packages:
  mapbox-to-css-font@2.4.5:
    resolution: {integrity: sha512-VJ6nB8emkO9VODI0Fk+TQ/0zKBTqmf/Pkt8Xv0kHstoc0iXRajA00DAid4Kc3K5xeFIOoiZrVxijEzj0GLVO2w==}

-  markdown-it@14.2.0:
-    resolution: {integrity: sha512-1TGiQiJVRQ3NPmZH6sx5Cfnmg6GQm9jvC1ch4TK511NjSJvjzKLzn5pPfZRNZkRPZP0HqCioSndqH8v2nRaWVQ==}
+  markdown-it@14.1.1:
+    resolution: {integrity: sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==}
    hasBin: true

  markdown-table@3.0.4:
@@ -6435,8 +6429,8 @@ packages:
  mdast-util-to-hast@12.3.0:
    resolution: {integrity: sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==}

-  mdast-util-to-hast@13.2.1:
-    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+  mdast-util-to-hast@13.1.0:
+    resolution: {integrity: sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==}

  mdast-util-to-markdown@1.5.0:
    resolution: {integrity: sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==}
@@ -6778,7 +6772,7 @@ packages:
      '@tanstack/react-router': ^1
      next: '>=14.2.0'
      react: '>=18.2.0 || ^19.0.0-0'
-      react-router: 6.30.4
+      react-router: ^5 || ^6 || ^7
      react-router-dom: ^5 || ^6 || ^7
    peerDependenciesMeta:
      '@remix-run/react':
@@ -6799,7 +6793,7 @@ packages:
      '@tanstack/react-router': ^1
      next: '>=14.2.0'
      react: '>=18.2.0 || ^19.0.0-0'
-      react-router: 6.30.4
+      react-router: ^5 || ^6 || ^7
      react-router-dom: ^5 || ^6 || ^7
    peerDependenciesMeta:
      '@remix-run/react':
@@ -7180,8 +7174,8 @@ packages:
  property-information@6.3.0:
    resolution: {integrity: sha512-gVNZ74nqhRMiIUYWGQdosYetaKc83x8oT41a0LlV3AAFCAZwCpg4vmGkq8t34+cUhp3cnM4XDiU/7xlgK7HGrg==}

-  protocol-buffers-schema@3.6.1:
-    resolution: {integrity: sha512-VG2K63Igkiv9p76tk1lilczEK1cT+kCjKtkdhw1dQZV3k3IXJbd3o6Ho8b9zJZaHSnT2hKe4I+ObmX9w6m5SmQ==}
+  protocol-buffers-schema@3.6.0:
+    resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}

  proxy-from-env@1.1.0:
    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
@@ -7696,8 +7690,8 @@ packages:
    peerDependencies:
      react: '>=15'

-  react-router@6.30.4:
-    resolution: {integrity: sha512-SVUsDe+DybHM/WmYKIVYhZh1o5Dcuf16yM6WjG02Q9XVFMZIJyHYhwrr6bFBXZkVP6z69kNkMyBCujt8FaFLJA==}
+  react-router@6.30.3:
+    resolution: {integrity: sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      react: '>=16.8'
@@ -8952,8 +8946,8 @@ packages:
  yallist@4.0.0:
    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}

-  yaml@1.10.3:
-    resolution: {integrity: sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==}
+  yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
    engines: {node: '>= 6'}

  yaml@2.8.2:
@@ -9074,7 +9068,7 @@ snapshots:
    dependencies:
      '@jsdevtools/ono': 7.1.3
      '@types/json-schema': 7.0.15
-      js-yaml: 4.2.0
+      js-yaml: 4.1.1

  '@babel/code-frame@7.29.0':
    dependencies:
@@ -10333,7 +10327,7 @@ snapshots:
      '@types/string-hash': 1.1.3
      d3-interpolate: 3.0.1
      date-fns: 4.1.0
-      dompurify: 3.4.11
+      dompurify: 3.2.4
      eventemitter3: 5.0.1
      fast_array_intersect: 1.1.0
      history: 4.10.1
@@ -10484,7 +10478,7 @@ snapshots:
      camelcase: 5.3.1
      find-up: 4.1.0
      get-package-type: 0.1.0
-      js-yaml: 3.15.0
+      js-yaml: 3.14.1
      resolve-from: 5.0.0

  '@istanbuljs/schema@0.1.3': {}
@@ -11811,8 +11805,6 @@ snapshots:

  '@remix-run/router@1.23.2': {}

-  '@remix-run/router@1.23.3': {}
-
  '@rolldown/binding-android-arm64@1.0.0-beta.53':
    optional: true

@@ -12050,7 +12042,7 @@ snapshots:
      - react-dom
      - tailwindcss

-  '@signozhq/ui@0.0.23(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.4(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.0.23(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
    dependencies:
      '@chenglou/pretext': 0.0.5
      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -12079,7 +12071,7 @@ snapshots:
      lodash-es: 4.18.1
      motion: 11.18.2(@emotion/is-prop-valid@1.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      next-themes: 0.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      nuqs: 2.8.9(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.4(react@18.2.0))(react@18.2.0)
+      nuqs: 2.8.9(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
      react: 18.2.0
      react-day-picker: 9.9.0(react@18.2.0)
      react-dom: 18.2.0(react@18.2.0)
@@ -13065,7 +13057,7 @@ snapshots:

  boolbase@1.0.0: {}

-  brace-expansion@2.1.1:
+  brace-expansion@2.0.2:
    dependencies:
      balanced-match: 1.0.2

@@ -13389,14 +13381,14 @@ snapshots:
      import-fresh: 3.3.1
      parse-json: 5.2.0
      path-type: 4.0.0
-      yaml: 1.10.3
+      yaml: 1.10.2
    optional: true

  cosmiconfig@9.0.1(typescript@5.9.3):
    dependencies:
      env-paths: 2.2.1
      import-fresh: 3.3.1
-      js-yaml: 4.2.0
+      js-yaml: 4.1.1
      parse-json: 5.2.0
    optionalDependencies:
      typescript: 5.9.3
@@ -13728,7 +13720,15 @@ snapshots:
    dependencies:
      domelementtype: 2.3.0

-  dompurify@3.4.11:
+  dompurify@3.2.4:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
+  dompurify@3.2.7:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
+  dompurify@3.4.0:
    optionalDependencies:
      '@types/trusted-types': 2.0.7

@@ -14416,7 +14416,7 @@ snapshots:
      hast-util-from-parse5: 8.0.1
      hast-util-to-parse5: 8.0.0
      html-void-elements: 3.0.0
-      mdast-util-to-hast: 13.2.1
+      mdast-util-to-hast: 13.1.0
      parse5: 7.3.0
      unist-util-position: 5.0.0
      unist-util-visit: 5.0.0
@@ -15342,12 +15342,12 @@ snapshots:

  js-tokens@4.0.0: {}

-  js-yaml@3.15.0:
+  js-yaml@3.14.1:
    dependencies:
      argparse: 1.0.10
      esprima: 4.0.1

-  js-yaml@4.2.0:
+  js-yaml@4.1.1:
    dependencies:
      argparse: 2.0.1

@@ -15396,7 +15396,7 @@ snapshots:
      '@types/json-schema': 7.0.15
      '@types/lodash': 4.17.24
      is-glob: 4.0.3
-      js-yaml: 4.2.0
+      js-yaml: 4.1.1
      lodash: 4.18.1
      minimist: 1.2.8
      prettier: 3.8.3
@@ -15533,7 +15533,7 @@ snapshots:

  lines-and-columns@1.2.4: {}

-  linkify-it@5.0.2:
+  linkify-it@5.0.0:
    dependencies:
      uc.micro: 2.1.0

@@ -15654,11 +15654,11 @@ snapshots:

  mapbox-to-css-font@2.4.5: {}

-  markdown-it@14.2.0:
+  markdown-it@14.1.1:
    dependencies:
      argparse: 2.0.1
      entities: 4.5.0
-      linkify-it: 5.0.2
+      linkify-it: 5.0.0
      mdurl: 2.0.0
      punycode.js: 2.3.1
      uc.micro: 2.1.0
@@ -15772,7 +15772,7 @@ snapshots:
      unist-util-position: 4.0.4
      unist-util-visit: 4.1.2

-  mdast-util-to-hast@13.2.1:
+  mdast-util-to-hast@13.1.0:
    dependencies:
      '@types/hast': 3.0.4
      '@types/mdast': 4.0.3
@@ -16049,19 +16049,19 @@ snapshots:

  minimatch@10.2.5:
    dependencies:
-      brace-expansion: 2.1.1
+      brace-expansion: 2.0.2

  minimatch@3.1.5:
    dependencies:
-      brace-expansion: 2.1.1
+      brace-expansion: 2.0.2

  minimatch@5.1.9:
    dependencies:
-      brace-expansion: 2.1.1
+      brace-expansion: 2.0.2

  minimatch@9.0.9:
    dependencies:
-      brace-expansion: 2.1.1
+      brace-expansion: 2.0.2

  minimist@1.2.8: {}

@@ -16075,7 +16075,7 @@ snapshots:

  monaco-editor@0.55.1:
    dependencies:
-      dompurify: 3.4.11
+      dompurify: 3.2.7
      marked: 14.0.0

  motion-dom@11.18.1:
@@ -16216,20 +16216,20 @@ snapshots:
    dependencies:
      boolbase: 1.0.0

-  nuqs@2.8.8(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.4(react@18.2.0))(react@18.2.0):
+  nuqs@2.8.8(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0):
    dependencies:
      '@standard-schema/spec': 1.0.0
      react: 18.2.0
    optionalDependencies:
-      react-router: 6.30.4(react@18.2.0)
+      react-router: 6.30.3(react@18.2.0)
      react-router-dom: 5.3.4(react@18.2.0)

-  nuqs@2.8.9(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.4(react@18.2.0))(react@18.2.0):
+  nuqs@2.8.9(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0):
    dependencies:
      '@standard-schema/spec': 1.0.0
      react: 18.2.0
    optionalDependencies:
-      react-router: 6.30.4(react@18.2.0)
+      react-router: 6.30.3(react@18.2.0)
      react-router-dom: 5.3.4(react@18.2.0)

  nwsapi@2.2.23: {}
@@ -16336,7 +16336,7 @@ snapshots:
      find-up: 8.0.0
      fs-extra: 11.3.3
      jiti: 2.6.1
-      js-yaml: 4.2.0
+      js-yaml: 4.1.1
      remeda: 2.34.0
      string-argv: 0.3.2
      tsconfck: 3.1.6(typescript@5.9.3)
@@ -16549,7 +16549,7 @@ snapshots:
  postcss-load-config@3.1.4(postcss@8.5.14)(ts-node@10.9.1(@types/node@16.18.25)(typescript@5.9.3)):
    dependencies:
      lilconfig: 2.1.0
-      yaml: 1.10.3
+      yaml: 1.10.2
    optionalDependencies:
      postcss: 8.5.14
      ts-node: 10.9.1(@types/node@16.18.25)(typescript@5.9.3)
@@ -16654,7 +16654,7 @@ snapshots:

  property-information@6.3.0: {}

-  protocol-buffers-schema@3.6.1: {}
+  protocol-buffers-schema@3.6.0: {}

  proxy-from-env@1.1.0: {}

@@ -17264,7 +17264,7 @@ snapshots:
      history: 5.3.0
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
-      react-router: 6.30.4(react@18.2.0)
+      react-router: 6.30.3(react@18.2.0)
      react-router-dom: 5.3.4(react@18.2.0)

  react-router-dom@5.3.4(react@18.2.0):
@@ -17291,9 +17291,9 @@ snapshots:
      tiny-invariant: 1.3.3
      tiny-warning: 1.0.3

-  react-router@6.30.4(react@18.2.0):
+  react-router@6.30.3(react@18.2.0):
    dependencies:
-      '@remix-run/router': 1.23.3
+      '@remix-run/router': 1.23.2
      react: 18.2.0

  react-style-singleton@2.2.3(@types/react@18.0.26)(react@18.2.0):
@@ -17517,7 +17517,7 @@ snapshots:

  resolve-protobuf-schema@2.1.0:
    dependencies:
-      protocol-buffers-schema: 3.6.1
+      protocol-buffers-schema: 3.6.0

  resolve@1.22.11:
    dependencies:
@@ -18209,7 +18209,7 @@ snapshots:
    dependencies:
      '@gerrit0/mini-shiki': 3.23.0
      lunr: 2.3.9
-      markdown-it: 14.2.0
+      markdown-it: 14.1.1
      minimatch: 10.2.5
      typescript: 5.9.3
      yaml: 2.8.4
@@ -18673,7 +18673,7 @@ snapshots:

  yallist@4.0.0: {}

-  yaml@1.10.3: {}
+  yaml@1.10.2: {}

  yaml@2.8.2: {}

--- a/frontend/src/api/generated/services/dashboard/index.ts
+++ b/frontend/src/api/generated/services/dashboard/index.ts
@@ -41,7 +41,6 @@ import type {
 	GetPublicDashboardDataV2200,
 	GetPublicDashboardDataV2PathParameters,
 	GetPublicDashboardPanelQueryRangeV2200,
-	GetPublicDashboardPanelQueryRangeV2Params,
 	GetPublicDashboardPanelQueryRangeV2PathParameters,
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
@@ -1913,25 +1912,20 @@ export const invalidateGetPublicDashboardDataV2 = async (
 */
 export const getPublicDashboardPanelQueryRangeV2 = (
 	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
-	params?: GetPublicDashboardPanelQueryRangeV2Params,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetPublicDashboardPanelQueryRangeV2200>({
 		url: `/api/v2/public/dashboards/${id}/panels/${key}/query_range`,
 		method: 'GET',
-		params,
 		signal,
 	});
 };

-export const getGetPublicDashboardPanelQueryRangeV2QueryKey = (
-	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
-	params?: GetPublicDashboardPanelQueryRangeV2Params,
-) => {
-	return [
-		`/api/v2/public/dashboards/${id}/panels/${key}/query_range`,
-		...(params ? [params] : []),
-	] as const;
+export const getGetPublicDashboardPanelQueryRangeV2QueryKey = ({
+	id,
+	key,
+}: GetPublicDashboardPanelQueryRangeV2PathParameters) => {
+	return [`/api/v2/public/dashboards/${id}/panels/${key}/query_range`] as const;
 };

 export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <
@@ -1939,7 +1933,6 @@ export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
-	params?: GetPublicDashboardPanelQueryRangeV2Params,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
@@ -1952,12 +1945,11 @@ export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <

 	const queryKey =
 		queryOptions?.queryKey ??
-		getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key }, params);
+		getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key });

 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>
-	> = ({ signal }) =>
-		getPublicDashboardPanelQueryRangeV2({ id, key }, params, signal);
+	> = ({ signal }) => getPublicDashboardPanelQueryRangeV2({ id, key }, signal);

 	return {
 		queryKey,
@@ -1986,7 +1978,6 @@ export function useGetPublicDashboardPanelQueryRangeV2<
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
-	params?: GetPublicDashboardPanelQueryRangeV2Params,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
@@ -1997,7 +1988,6 @@ export function useGetPublicDashboardPanelQueryRangeV2<
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
 	const queryOptions = getGetPublicDashboardPanelQueryRangeV2QueryOptions(
 		{ id, key },
-		params,
 		options,
 	);

@@ -2014,16 +2004,10 @@ export function useGetPublicDashboardPanelQueryRangeV2<
 export const invalidateGetPublicDashboardPanelQueryRangeV2 = async (
 	queryClient: QueryClient,
 	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
-	params?: GetPublicDashboardPanelQueryRangeV2Params,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{
-			queryKey: getGetPublicDashboardPanelQueryRangeV2QueryKey(
-				{ id, key },
-				params,
-			),
-		},
+		{ queryKey: getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key }) },
 		options,
 	);

--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -8480,12 +8480,10 @@ export interface RuletypesBasicRuleThresholdDTO {
 	op: RuletypesCompareOperatorDTO;
 	/**
 	 * @type number,null
-	 * @format double
 	 */
 	recoveryTarget?: number | null;
 	/**
 	 * @type number,null
-	 * @format double
 	 */
 	target: number | null;
 	/**
@@ -8679,7 +8677,6 @@ export interface RuletypesRuleConditionDTO {
 	selectedQueryName?: string;
 	/**
 	 * @type number,null
-	 * @format double
 	 */
 	target?: number | null;
 	/**
@@ -11573,19 +11570,6 @@ export type GetPublicDashboardPanelQueryRangeV2PathParameters = {
 	id: string;
 	key: string;
 };
-export type GetPublicDashboardPanelQueryRangeV2Params = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	startTime?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	endTime?: string;
-};
-
 export type GetPublicDashboardPanelQueryRangeV2200 = {
 	data: Querybuildertypesv5QueryRangeResponseDTO;
 	/**
--- a/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
+++ b/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
@@ -2,7 +2,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
@@ -134,17 +134,18 @@ function CreateServiceAccountModal(): JSX.Element {
 					Cancel
 				</Button>

-				<AuthZButton
-					checks={[SACreatePermission]}
-					type="submit"
-					form="create-sa-form"
-					variant="solid"
-					color="primary"
-					loading={isSubmitting}
-					disabled={!isValid}
-				>
-					Create Service Account
-				</AuthZButton>
+				<AuthZTooltip checks={[SACreatePermission]}>
+					<Button
+						type="submit"
+						form="create-sa-form"
+						variant="solid"
+						color="primary"
+						loading={isSubmitting}
+						disabled={!isValid}
+					>
+						Create Service Account
+					</Button>
+				</AuthZTooltip>
 			</DialogFooter>
 		</DialogWrapper>
 	);
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx
@@ -20,7 +20,6 @@ function OtherFiltersSkeleton(): JSX.Element {
 				<Skeleton.Input
 					active
 					size="small"
-					className="qf-other-filters-skeleton"
 					// eslint-disable-next-line react/no-array-index-key
 					key={index}
 				/>
--- a/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx
@@ -4,7 +4,7 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	APIKeyCreatePermission,
 	buildSAAttachPermission,
@@ -109,21 +109,24 @@ function KeyFormPhase({
 					<Button variant="solid" color="secondary" onClick={onClose}>
 						Cancel
 					</Button>
-					<AuthZButton
+					<AuthZTooltip
 						checks={[
 							APIKeyCreatePermission,
 							buildSAAttachPermission(accountId ?? ''),
 						]}
-						authZEnabled={!!accountId}
-						type="submit"
-						form={FORM_ID}
-						variant="solid"
-						color="primary"
-						loading={isSubmitting}
-						disabled={!isValid}
+						enabled={!!accountId}
 					>
-						Create Key
-					</AuthZButton>
+						<Button
+							type="submit"
+							form={FORM_ID}
+							variant="solid"
+							color="primary"
+							loading={isSubmitting}
+							disabled={!isValid}
+						>
+							Create Key
+						</Button>
+					</AuthZTooltip>
 				</div>
 			</div>
 		</>
--- a/frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx
@@ -1,7 +1,7 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { buildSADeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
@@ -84,17 +84,20 @@ function DeleteAccountModal(): JSX.Element {
 				<X size={12} />
 				Cancel
 			</Button>
-			<AuthZButton
+			<AuthZTooltip
 				checks={[buildSADeletePermission(accountId ?? '')]}
-				authZEnabled={!!accountId}
-				variant="solid"
-				color="destructive"
-				loading={isDeleting}
-				onClick={handleConfirm}
+				enabled={!!accountId}
 			>
-				<Trash2 size={12} />
-				Delete
-			</AuthZButton>
+				<Button
+					variant="solid"
+					color="destructive"
+					loading={isDeleting}
+					onClick={handleConfirm}
+				>
+					<Trash2 size={12} />
+					Delete
+				</Button>
+			</AuthZTooltip>
 		</div>
 	);

--- a/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx
@@ -7,7 +7,6 @@ import { Input } from '@signozhq/ui/input';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	buildAPIKeyDeletePermission,
@@ -159,36 +158,38 @@ function EditKeyForm({
 			</form>

 			<div className="edit-key-modal__footer">
-				<AuthZButton
+				<AuthZTooltip
 					checks={[
 						buildAPIKeyDeletePermission(keyItem?.id ?? ''),
 						buildSADetachPermission(accountId ?? ''),
 					]}
-					authZEnabled={!!accountId && !!keyItem?.id}
-					variant="link"
-					color="destructive"
-					onClick={onRevokeClick}
+					enabled={!!accountId && !!keyItem?.id}
 				>
-					<Trash2 size={12} />
-					Revoke Key
-				</AuthZButton>
+					<Button variant="link" color="destructive" onClick={onRevokeClick}>
+						<Trash2 size={12} />
+						Revoke Key
+					</Button>
+				</AuthZTooltip>
 				<div className="edit-key-modal__footer-right">
 					<Button variant="solid" color="secondary" onClick={onClose}>
 						<X size={12} />
 						Cancel
 					</Button>
-					<AuthZButton
+					<AuthZTooltip
 						checks={[buildAPIKeyUpdatePermission(keyItem?.id ?? '')]}
-						authZEnabled={!!accountId && !!keyItem?.id}
-						type="submit"
-						form={FORM_ID}
-						variant="solid"
-						color="primary"
-						loading={isSaving}
-						disabled={!isDirty}
+						enabled={!!accountId && !!keyItem?.id}
 					>
-						Save Changes
-					</AuthZButton>
+						<Button
+							type="submit"
+							form={FORM_ID}
+							variant="solid"
+							color="primary"
+							loading={isSaving}
+							disabled={!isDirty}
+						>
+							Save Changes
+						</Button>
+					</AuthZTooltip>
 				</div>
 			</div>
 		</>
--- a/frontend/src/components/ServiceAccountDrawer/KeysTab.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/KeysTab.tsx
@@ -1,13 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
 import { KeyRound, X } from '@signozhq/icons';
-import { Pagination, Skeleton, Table, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { Skeleton, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
-import { withAuthZContent } from 'lib/authz/components/withAuthZ/withAuthZContent';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	APIKeyCreatePermission,
-	APIKeyListPermission,
 	buildAPIKeyDeletePermission,
 	buildSAAttachPermission,
 	buildSADetachPermission,
@@ -25,10 +24,10 @@ interface KeysTabProps {
 	keys: ServiceaccounttypesGettableFactorAPIKeyDTO[];
 	isLoading: boolean;
 	isDisabled?: boolean;
+	canUpdate?: boolean;
 	accountId?: string;
 	currentPage: number;
 	pageSize: number;
-	onPageChange: (page: number) => void;
 }

 interface BuildColumnsParams {
@@ -114,26 +113,29 @@ function buildColumns({
 			render: (_, record): JSX.Element => {
 				const tooltipTitle = isDisabled ? 'Service account disabled' : 'Revoke Key';
 				return (
-					<Tooltip title={tooltipTitle}>
-						<AuthZButton
-							checks={[
-								buildAPIKeyDeletePermission(record.id),
-								buildSADetachPermission(accountId),
-							]}
-							authZEnabled={!isDisabled && !!accountId}
-							variant="ghost"
-							size="sm"
-							color="destructive"
-							disabled={isDisabled}
-							onClick={(e): void => {
-								e.stopPropagation();
-								onRevokeClick(record.id);
-							}}
-							className="keys-tab__revoke-btn"
-						>
-							<X size={12} />
-						</AuthZButton>
-					</Tooltip>
+					<AuthZTooltip
+						checks={[
+							buildAPIKeyDeletePermission(record.id),
+							buildSADetachPermission(accountId),
+						]}
+						enabled={!isDisabled && !!accountId}
+					>
+						<Tooltip title={tooltipTitle}>
+							<Button
+								variant="ghost"
+								size="sm"
+								color="destructive"
+								disabled={isDisabled}
+								onClick={(e): void => {
+									e.stopPropagation();
+									onRevokeClick(record.id);
+								}}
+								className="keys-tab__revoke-btn"
+							>
+								<X size={12} />
+							</Button>
+						</Tooltip>
+					</AuthZTooltip>
 				);
 			},
 		},
@@ -147,7 +149,6 @@ function KeysTab({
 	accountId = '',
 	currentPage,
 	pageSize,
-	onPageChange,
 }: KeysTabProps): JSX.Element {
 	const [, setIsAddKeyOpen] = useQueryState(
 		'add-key',
@@ -211,18 +212,21 @@ function KeysTab({
 						Learn more
 					</a>
 				</p>
-				<AuthZButton
+				<AuthZTooltip
 					checks={[APIKeyCreatePermission, buildSAAttachPermission(accountId)]}
-					authZEnabled={!isDisabled && !!accountId}
-					variant="link"
-					color="primary"
-					onClick={async (): Promise<void> => {
-						await setIsAddKeyOpen(true);
-					}}
-					disabled={isDisabled}
+					enabled={!isDisabled && !!accountId}
 				>
-					+ Add your first key
-				</AuthZButton>
+					<Button
+						variant="link"
+						color="primary"
+						onClick={async (): Promise<void> => {
+							await setIsAddKeyOpen(true);
+						}}
+						disabled={isDisabled}
+					>
+						+ Add your first key
+					</Button>
+				</AuthZTooltip>
 			</div>
 		);
 	}
@@ -274,24 +278,6 @@ function KeysTab({
 				})}
 			/>

-			<Pagination
-				current={currentPage}
-				pageSize={pageSize}
-				total={keys.length}
-				showTotal={(total: number, range: number[]): JSX.Element => (
-					<>
-						<span className="sa-drawer__pagination-range">
-							{range[0]} &#8212; {range[1]}
-						</span>
-						<span className="sa-drawer__pagination-total"> of {total}</span>
-					</>
-				)}
-				showSizeChanger={false}
-				hideOnSinglePage
-				onChange={onPageChange}
-				className="sa-drawer__keys-pagination"
-			/>
-
 			<EditKeyModal keyItem={editKey} />

 			<RevokeKeyModal />
@@ -299,7 +285,4 @@ function KeysTab({
 	);
 }

-export default withAuthZContent(KeysTab, {
-	checks: [APIKeyListPermission],
-	fallbackOnLoading: <Skeleton active paragraph={{ rows: 6 }} />,
-});
+export default KeysTab;
--- a/frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx
@@ -6,20 +6,15 @@ import { Input } from '@signozhq/ui/input';
 import { useCopyToClipboard } from 'react-use';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { withAuthZContent } from 'lib/authz/components/withAuthZ/withAuthZContent';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-import {
-	buildSAReadPermission,
-	buildSAUpdatePermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import { buildSAUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';

 import SaveErrorItem from './SaveErrorItem';
 import type { SaveError } from './utils';
-import { Skeleton } from 'antd';

 interface OverviewTabProps {
 	account: ServiceAccountRow;
@@ -28,6 +23,7 @@ interface OverviewTabProps {
 	localRoles: string[];
 	onRolesChange: (v: string[]) => void;
 	isDisabled: boolean;
+	canUpdate?: boolean;
 	availableRoles: AuthtypesRoleDTO[];
 	rolesLoading?: boolean;
 	rolesError?: boolean;
@@ -43,6 +39,7 @@ function OverviewTab({
 	localRoles,
 	onRolesChange,
 	isDisabled,
+	canUpdate = true,
 	availableRoles,
 	rolesLoading,
 	rolesError,
@@ -89,22 +86,23 @@ function OverviewTab({
 				<label className="sa-drawer__label" htmlFor="sa-name">
 					Name
 				</label>
-				{isDisabled ? (
-					<AuthZTooltip checks={[buildSAUpdatePermission(account.id)]}>
+				{isDisabled || !canUpdate ? (
+					<AuthZTooltip
+						checks={[buildSAUpdatePermission(account.id)]}
+						enabled={!isDisabled && !canUpdate}
+					>
 						<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
 							<span className="sa-drawer__input-text">{localName || '—'}</span>
 							<LockKeyhole size={14} className="sa-drawer__lock-icon" />
 						</div>
 					</AuthZTooltip>
 				) : (
-					<AuthZTooltip checks={[buildSAUpdatePermission(account.id)]}>
-						<Input
-							id="sa-name"
-							value={localName}
-							onChange={(e): void => onNameChange(e.target.value)}
-							placeholder="Enter name"
-						/>
-					</AuthZTooltip>
+					<Input
+						id="sa-name"
+						value={localName}
+						onChange={(e): void => onNameChange(e.target.value)}
+						placeholder="Enter name"
+					/>
 				)}
 			</div>

@@ -222,9 +220,4 @@ function OverviewTab({
 	);
 }

-export default withAuthZContent(OverviewTab, {
-	checks: (props): ReturnType<typeof buildSAReadPermission>[] => [
-		buildSAReadPermission(props.account.id),
-	],
-	fallbackOnLoading: <Skeleton active paragraph={{ rows: 6 }} />,
-});
+export default OverviewTab;
--- a/frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx
@@ -1,7 +1,7 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	buildAPIKeyDeletePermission,
 	buildSADetachPermission,
@@ -45,20 +45,23 @@ export function RevokeKeyFooter({
 				<X size={12} />
 				Cancel
 			</Button>
-			<AuthZButton
+			<AuthZTooltip
 				checks={[
 					buildAPIKeyDeletePermission(keyId ?? ''),
 					buildSADetachPermission(accountId ?? ''),
 				]}
-				authZEnabled={!!accountId && !!keyId}
-				variant="solid"
-				color="destructive"
-				loading={isRevoking}
-				onClick={onConfirm}
+				enabled={!!accountId && !!keyId}
 			>
-				<Trash2 size={12} />
-				Revoke Key
-			</AuthZButton>
+				<Button
+					variant="solid"
+					color="destructive"
+					loading={isRevoking}
+					onClick={onConfirm}
+				>
+					<Trash2 size={12} />
+					Revoke Key
+				</Button>
+			</AuthZTooltip>
 		</>
 	);
 }
@@ -108,7 +111,7 @@ function RevokeKeyModal(): JSX.Element {
 	}

 	function handleCancel(): void {
-		void setRevokeKeyId(null);
+		setRevokeKeyId(null);
 	}

 	return (
--- a/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx
@@ -1,17 +1,11 @@
-import React, {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { toast } from '@signozhq/ui/sonner';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { Skeleton } from 'antd';
+import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountsQueryKey,
@@ -22,6 +16,7 @@ import {
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import PermissionDeniedCallout from 'lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout';
 import { useRoles } from 'components/RolesSelect';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import {
@@ -33,13 +28,15 @@ import {
 	RoleUpdateFailure,
 	useServiceAccountRoleManager,
 } from 'hooks/serviceAccount/useServiceAccountRoleManager';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import {
 	APIKeyCreatePermission,
+	APIKeyListPermission,
 	buildSAAttachPermission,
 	buildSADeletePermission,
+	buildSAReadPermission,
 	buildSAUpdatePermission,
 } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -50,6 +47,7 @@ import {
 import APIError from 'types/api/error';
 import { toAPIError } from 'utils/errorUtils';

+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
 import KeysTab from './KeysTab';
@@ -72,12 +70,14 @@ function toSaveApiError(err: unknown): APIError {
 	);
 }

+// eslint-disable-next-line sonarjs/cognitive-complexity
 function ServiceAccountDrawer({
 	onSuccess,
 }: ServiceAccountDrawerProps): JSX.Element {
 	const [selectedAccountId, setSelectedAccountId] = useQueryState(
 		SA_QUERY_PARAMS.ACCOUNT,
 	);
+	const open = !!selectedAccountId;
 	const [activeTab, setActiveTab] = useQueryState(
 		SA_QUERY_PARAMS.TAB,
 		parseAsStringEnum<ServiceAccountDrawerTab>(
@@ -100,14 +100,28 @@ function ServiceAccountDrawer({
 		SA_QUERY_PARAMS.DELETE_SA,
 		parseAsBoolean.withDefault(false),
 	);
-
 	const [localName, setLocalName] = useState('');
 	const [localRoles, setLocalRoles] = useState<string[]>([]);
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);

 	const queryClient = useQueryClient();
-	const open = !!selectedAccountId;
+
+	const { permissions: drawerPermissions, isLoading: isAuthZLoading } = useAuthZ(
+		selectedAccountId
+			? [
+					buildSAReadPermission(selectedAccountId),
+					buildSAUpdatePermission(selectedAccountId),
+					buildSADeletePermission(selectedAccountId),
+					APIKeyListPermission,
+				]
+			: [],
+		{ enabled: !!selectedAccountId },
+	);
+
+	const canRead =
+		drawerPermissions?.[buildSAReadPermission(selectedAccountId ?? '')]
+			?.isGranted ?? false;

 	const {
 		data: accountData,
@@ -117,7 +131,7 @@ function ServiceAccountDrawer({
 		refetch: refetchAccount,
 	} = useGetServiceAccount(
 		{ id: selectedAccountId ?? '' },
-		{ query: { enabled: !!selectedAccountId } },
+		{ query: { enabled: canRead && !!selectedAccountId } },
 	);

 	const account = useMemo(
@@ -131,7 +145,7 @@ function ServiceAccountDrawer({
 		isLoading: isRolesLoading,
 		applyDiff,
 	} = useServiceAccountRoleManager(selectedAccountId ?? '', {
-		enabled: !!selectedAccountId,
+		enabled: canRead && !!selectedAccountId,
 	});

 	const roleSessionRef = useRef<string | null>(null);
@@ -180,9 +194,16 @@ function ServiceAccountDrawer({
 		refetch: refetchRoles,
 	} = useRoles();

+	const canListKeys =
+		drawerPermissions?.[APIKeyListPermission]?.isGranted ?? false;
+
+	const canUpdate =
+		drawerPermissions?.[buildSAUpdatePermission(selectedAccountId ?? '')]
+			?.isGranted ?? true;
+
 	const { data: keysData, isLoading: keysLoading } = useListServiceAccountKeys(
 		{ id: selectedAccountId ?? '' },
-		{ query: { enabled: !!selectedAccountId } },
+		{ query: { enabled: !!selectedAccountId && canListKeys } },
 	);
 	const keys = keysData?.data ?? [];

@@ -196,6 +217,7 @@ function ServiceAccountDrawer({
 		}
 	}, [keysLoading, keys.length, keysPage, setKeysPage]);

+	// the retry for this mutation is safe due to the api being idempotent on backend
 	const { mutateAsync: updateMutateAsync } = useUpdateServiceAccount();

 	const retryNameUpdate = useCallback(async (): Promise<void> => {
@@ -353,71 +375,23 @@ function ServiceAccountDrawer({
 	]);

 	const handleClose = useCallback((): void => {
-		setSaveErrors([]);
+		void setIsDeleteOpen(null);
+		void setIsAddKeyOpen(null);
+		void setSelectedAccountId(null);
 		void setActiveTab(null);
 		void setKeysPage(null);
 		void setEditKeyId(null);
-		void setIsAddKeyOpen(null);
-		void setIsDeleteOpen(null);
-		void setSelectedAccountId(null);
+		setSaveErrors([]);
 	}, [
+		setSelectedAccountId,
 		setActiveTab,
 		setKeysPage,
 		setEditKeyId,
 		setIsAddKeyOpen,
 		setIsDeleteOpen,
-		setSelectedAccountId,
 	]);

-	const footer = useMemo(
-		() =>
-			activeTab === ServiceAccountDrawerTab.Overview && !isDeleted && open ? (
-				<div className="sa-drawer__footer">
-					<AuthZButton
-						checks={[buildSADeletePermission(selectedAccountId ?? '')]}
-						authZEnabled={!!selectedAccountId}
-						variant="link"
-						color="destructive"
-						onClick={(): void => {
-							void setIsDeleteOpen(true);
-						}}
-					>
-						<Trash2 size={12} />
-						Delete Service Account
-					</AuthZButton>
-					<div className="sa-drawer__footer-right">
-						<Button variant="outlined" color="secondary" onClick={handleClose}>
-							<X size={14} />
-							Cancel
-						</Button>
-						<AuthZButton
-							checks={[buildSAUpdatePermission(selectedAccountId ?? '')]}
-							authZEnabled={!!selectedAccountId}
-							variant="solid"
-							color="primary"
-							loading={isSaving}
-							disabled={!isDirty}
-							onClick={handleSave}
-						>
-							Save Changes
-						</AuthZButton>
-					</div>
-				</div>
-			) : null,
-		[
-			activeTab,
-			isDeleted,
-			open,
-			selectedAccountId,
-			isSaving,
-			isDirty,
-			handleClose,
-			handleSave,
-			setIsDeleteOpen,
-		],
-	);
-
-	const body = (
+	const drawerContent = (
 		<div className="sa-drawer__layout">
 			<div className="sa-drawer__tabs">
 				<ToggleGroupSimple
@@ -459,23 +433,26 @@ function ServiceAccountDrawer({
 					]}
 				/>
 				{activeTab === ServiceAccountDrawerTab.Keys && (
-					<AuthZButton
+					<AuthZTooltip
 						checks={[
 							APIKeyCreatePermission,
 							buildSAAttachPermission(selectedAccountId ?? ''),
 						]}
-						authZEnabled={!isDeleted && !!selectedAccountId}
-						variant="outlined"
-						size="sm"
-						color="secondary"
-						disabled={isDeleted}
-						onClick={(): void => {
-							void setIsAddKeyOpen(true);
-						}}
+						enabled={!isDeleted && !!selectedAccountId}
 					>
-						<Plus size={12} />
-						Add Key
-					</AuthZButton>
+						<Button
+							variant="outlined"
+							size="sm"
+							color="secondary"
+							disabled={isDeleted}
+							onClick={(): void => {
+								void setIsAddKeyOpen(true);
+							}}
+						>
+							<Plus size={12} />
+							Add Key
+						</Button>
+					</AuthZTooltip>
 				)}
 			</div>

@@ -484,7 +461,9 @@ function ServiceAccountDrawer({
 					activeTab === ServiceAccountDrawerTab.Keys ? ' sa-drawer__body--keys' : ''
 				}`}
 			>
-				{isAccountLoading && <Skeleton active paragraph={{ rows: 6 }} />}
+				{(isAuthZLoading || isAccountLoading) && (
+					<Skeleton active paragraph={{ rows: 6 }} />
+				)}
 				{isAccountError && (
 					<ErrorInPlace
 						error={toAPIError(
@@ -493,73 +472,141 @@ function ServiceAccountDrawer({
 						)}
 					/>
 				)}
-				{!isAccountLoading && !isAccountError && (
-					<>
-						{activeTab === ServiceAccountDrawerTab.Overview &&
-							(account ? (
-								<OverviewTab
-									account={account}
-									localName={localName}
-									onNameChange={handleNameChange}
-									localRoles={localRoles}
-									onRolesChange={(roles): void => {
-										setLocalRoles(roles);
-										clearRoleErrors();
-									}}
-									isDisabled={isDeleted}
-									availableRoles={availableRoles}
-									rolesLoading={rolesLoading}
-									rolesError={rolesError}
-									rolesErrorObj={rolesErrorObj}
-									onRefetchRoles={refetchRoles}
-									saveErrors={saveErrors}
-								/>
-							) : (
-								<Skeleton active />
-							))}
-						{activeTab === ServiceAccountDrawerTab.Keys && (
-							<KeysTab
-								keys={keys}
-								isLoading={keysLoading}
-								isDisabled={isDeleted}
-								accountId={selectedAccountId ?? ''}
-								currentPage={keysPage}
-								pageSize={PAGE_SIZE}
-								onPageChange={(page): void => {
-									void setKeysPage(page);
-								}}
-							/>
-						)}
-					</>
-				)}
+				{!isAuthZLoading &&
+					!isAccountLoading &&
+					!isAccountError &&
+					selectedAccountId && (
+						<>
+							{activeTab === ServiceAccountDrawerTab.Overview &&
+								(canRead && account ? (
+									<OverviewTab
+										account={account}
+										localName={localName}
+										onNameChange={handleNameChange}
+										localRoles={localRoles}
+										onRolesChange={(roles): void => {
+											setLocalRoles(roles);
+											clearRoleErrors();
+										}}
+										isDisabled={isDeleted}
+										canUpdate={canUpdate}
+										availableRoles={availableRoles}
+										rolesLoading={rolesLoading}
+										rolesError={rolesError}
+										rolesErrorObj={rolesErrorObj}
+										onRefetchRoles={refetchRoles}
+										saveErrors={saveErrors}
+									/>
+								) : (
+									<PermissionDeniedCallout permissionName="serviceaccount:read" />
+								))}
+							{activeTab === ServiceAccountDrawerTab.Keys &&
+								(canListKeys ? (
+									<KeysTab
+										keys={keys}
+										isLoading={keysLoading}
+										isDisabled={isDeleted}
+										canUpdate={canUpdate}
+										accountId={selectedAccountId}
+										currentPage={keysPage}
+										pageSize={PAGE_SIZE}
+									/>
+								) : (
+									<PermissionDeniedCallout permissionName="factor-api-key:list" />
+								))}
+						</>
+					)}
 			</div>
 		</div>
 	);

-	return (
-		<DrawerWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					handleClose();
-				}
-			}}
-			direction="right"
-			showCloseButton
-			showOverlay={false}
-			title="Service Account Details"
-			className="sa-drawer"
-			width="wide"
-			footer={footer}
-		>
-			{open && (
+	const footer = (
+		<div className="sa-drawer__footer">
+			{activeTab === ServiceAccountDrawerTab.Keys ? (
+				<Pagination
+					current={keysPage}
+					pageSize={PAGE_SIZE}
+					total={keys.length}
+					showTotal={(total: number, range: number[]): JSX.Element => (
+						<>
+							<span className="sa-drawer__pagination-range">
+								{range[0]} &#8212; {range[1]}
+							</span>
+							<span className="sa-drawer__pagination-total"> of {total}</span>
+						</>
+					)}
+					showSizeChanger={false}
+					hideOnSinglePage
+					onChange={(page): void => {
+						void setKeysPage(page);
+					}}
+					className="sa-drawer__keys-pagination"
+				/>
+			) : (
 				<>
-					{body}
-					<DeleteAccountModal />
-					<AddKeyModal />
+					{!isDeleted && (
+						<AuthZTooltip
+							checks={[buildSADeletePermission(selectedAccountId ?? '')]}
+							enabled={!!selectedAccountId}
+						>
+							<Button
+								variant="link"
+								color="destructive"
+								onClick={(): void => {
+									void setIsDeleteOpen(true);
+								}}
+							>
+								<Trash2 size={12} />
+								Delete Service Account
+							</Button>
+						</AuthZTooltip>
+					)}
+					{!isDeleted && (
+						<div className="sa-drawer__footer-right">
+							<Button variant="outlined" color="secondary" onClick={handleClose}>
+								<X size={14} />
+								Cancel
+							</Button>
+							<Button
+								variant="solid"
+								color="primary"
+								loading={isSaving}
+								disabled={!isDirty}
+								onClick={handleSave}
+							>
+								Save Changes
+							</Button>
+						</div>
+					)}
 				</>
 			)}
-		</DrawerWrapper>
+		</div>
+	);
+
+	return (
+		<>
+			<DrawerWrapper
+				open={open}
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						handleClose();
+					}
+				}}
+				direction="right"
+				showCloseButton
+				showOverlay={false}
+				title="Service Account Details"
+				className="sa-drawer"
+				width="wide"
+				footer={footer}
+			>
+				{drawerContent}
+			</DrawerWrapper>
+
+			<DeleteAccountModal />
+
+			<AddKeyModal />
+		</>
 	);
 }

--- a/frontend/src/components/ServiceAccountDrawer/tests/AddKeyModal.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/AddKeyModal.test.tsx
@@ -1,5 +1,4 @@
 import { toast } from '@signozhq/ui/sonner';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import {
@@ -60,7 +59,6 @@ describe('AddKeyModal', () => {
 			rest.post(SA_KEYS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(201), ctx.json(createdKeyResponse)),
 			),
-			setupAuthzAdmin(),
 		);
 	});

--- a/frontend/src/components/ServiceAccountDrawer/tests/EditKeyModal.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/EditKeyModal.test.tsx
@@ -1,6 +1,5 @@
 import { toast } from '@signozhq/ui/sonner';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -62,7 +61,6 @@ describe('EditKeyModal (URL-controlled)', () => {
 			rest.delete(SA_KEY_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
-			setupAuthzAdmin(),
 		);
 	});

--- a/frontend/src/components/ServiceAccountDrawer/tests/KeysTab.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/KeysTab.test.tsx
@@ -1,6 +1,5 @@
 import { toast } from '@signozhq/ui/sonner';
 import { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -36,7 +35,7 @@ const keys: ServiceaccounttypesGettableFactorAPIKeyDTO[] = [
 	{
 		id: 'key-2',
 		name: 'Staging Key',
-		expiresAt: 1924948800, // 2030-12-31 12:00 UTC (noon to avoid timezone issues)
+		expiresAt: 1924905600, // 2030-12-31
 		lastObservedAt: '2026-03-10T10:00:00Z',
 		serviceAccountId: 'sa-1',
 	},
@@ -48,7 +47,6 @@ const defaultProps = {
 	isDisabled: false,
 	currentPage: 1,
 	pageSize: 10,
-	onPageChange: jest.fn(),
 };

 function renderKeysTab(
@@ -69,7 +67,6 @@ describe('KeysTab', () => {
 			rest.delete(SA_KEY_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
-			setupAuthzAdmin(),
 		);
 	});

@@ -77,12 +74,9 @@ describe('KeysTab', () => {
 		server.resetHandlers();
 	});

-	it('renders loading state', async () => {
+	it('renders loading state', () => {
 		renderKeysTab({ isLoading: true });
-		// Wait for authz to complete, then check for skeleton
-		await waitFor(() => {
-			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
-		});
+		expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
 	});

 	it('renders empty state when no keys and clicking add sets add-key param', async () => {
@@ -97,9 +91,9 @@ describe('KeysTab', () => {
 			</NuqsTestingAdapter>,
 		);

-		await expect(
-			screen.findByText(/No keys. Start by creating one./i),
-		).resolves.toBeInTheDocument();
+		expect(
+			screen.getByText(/No keys. Start by creating one./i),
+		).toBeInTheDocument();
 		const addBtn = screen.getByRole('button', { name: /\+ Add your first key/i });
 		await user.click(addBtn);
 		expect(onUrlUpdate).toHaveBeenCalledWith(
@@ -109,12 +103,10 @@ describe('KeysTab', () => {
 		);
 	});

-	it('renders table with keys', async () => {
+	it('renders table with keys', () => {
 		renderKeysTab();

-		await expect(
-			screen.findByText('Production Key'),
-		).resolves.toBeInTheDocument();
+		expect(screen.getByText('Production Key')).toBeInTheDocument();
 		expect(screen.getByText('Staging Key')).toBeInTheDocument();
 		expect(screen.getByText('Never')).toBeInTheDocument();
 		expect(screen.getByText('Dec 31, 2030')).toBeInTheDocument();
@@ -130,7 +122,7 @@ describe('KeysTab', () => {
 			</NuqsTestingAdapter>,
 		);

-		const row = (await screen.findByText('Production Key')).closest('tr');
+		const row = screen.getByText('Production Key').closest('tr');
 		if (!row) {
 			throw new Error('Row not found');
 		}
@@ -154,8 +146,6 @@ describe('KeysTab', () => {
 			</NuqsTestingAdapter>,
 		);

-		// Wait for authz to complete and table to render
-		await screen.findByText('Production Key');
 		const revokeBtns = screen
 			.getAllByRole('button')
 			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
@@ -173,8 +163,7 @@ describe('KeysTab', () => {

 		renderKeysTab();

-		// Wait for authz to complete and table to render
-		await screen.findByText('Production Key');
+		// Seed the keys cache so RevokeKeyModal can read the key name
 		const revokeBtns = screen
 			.getAllByRole('button')
 			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
@@ -188,11 +177,9 @@ describe('KeysTab', () => {
 		});
 	});

-	it('disables actions when isDisabled is true', async () => {
+	it('disables actions when isDisabled is true', () => {
 		renderKeysTab({ isDisabled: true });

-		// Wait for authz to complete and table to render
-		await screen.findByText('Production Key');
 		const revokeBtns = screen
 			.getAllByRole('button')
 			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
--- a/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.authz.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.authz.test.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -31,6 +32,30 @@ const activeAccountResponse = {
 	updatedAt: '2026-01-02T00:00:00Z',
 };

+jest.mock('@signozhq/ui/drawer', () => ({
+	...jest.requireActual('@signozhq/ui/drawer'),
+	DrawerWrapper: ({
+		children,
+		footer,
+		open,
+	}: {
+		children?: ReactNode;
+		footer?: ReactNode;
+		open: boolean;
+	}): JSX.Element | null =>
+		open ? (
+			<div>
+				{children}
+				{footer}
+			</div>
+		) : null,
+}));
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
 function renderDrawer(
 	searchParams: Record<string, string> = { account: 'sa-1' },
 ): ReturnType<typeof render> {
@@ -93,7 +118,7 @@ describe('ServiceAccountDrawer — permissions', () => {
 		renderDrawer();

 		await waitFor(() => {
-			expect(screen.getByText(/read:serviceaccount/)).toBeInTheDocument();
+			expect(screen.getByText(/serviceaccount:read/)).toBeInTheDocument();
 		});
 	});

@@ -115,7 +140,7 @@ describe('ServiceAccountDrawer — permissions', () => {
 		fireEvent.click(screen.getByRole('radio', { name: /keys/i }));

 		await waitFor(() => {
-			expect(screen.getByText(/list:factor-api-key/)).toBeInTheDocument();
+			expect(screen.getByText(/factor-api-key:list/)).toBeInTheDocument();
 		});
 	});

--- a/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.test.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -6,6 +7,30 @@ import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';

 import ServiceAccountDrawer from '../ServiceAccountDrawer';

+jest.mock('@signozhq/ui/drawer', () => ({
+	...jest.requireActual('@signozhq/ui/drawer'),
+	DrawerWrapper: ({
+		children,
+		footer,
+		open,
+	}: {
+		children?: ReactNode;
+		footer?: ReactNode;
+		open: boolean;
+	}): JSX.Element | null =>
+		open ? (
+			<div>
+				{children}
+				{footer}
+			</div>
+		) : null,
+}));
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
 const ROLES_ENDPOINT = '*/api/v1/roles';
 const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
 const SA_ENDPOINT = '*/api/v1/service_accounts/sa-1';
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -31,6 +31,12 @@ export enum LOCALSTORAGE {
 	METRICS_LIST_OPTIONS = 'METRICS_LIST_OPTIONS',
 	SHOW_EXCEPTIONS_QUICK_FILTERS = 'SHOW_EXCEPTIONS_QUICK_FILTERS',
 	QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT',
+	QUICK_FILTERS_WIDTH_LOGS = 'QUICK_FILTERS_WIDTH_LOGS',
+	QUICK_FILTERS_WIDTH_TRACES = 'QUICK_FILTERS_WIDTH_TRACES',
+	QUICK_FILTERS_WIDTH_METER = 'QUICK_FILTERS_WIDTH_METER',
+	QUICK_FILTERS_WIDTH_API_MONITORING = 'QUICK_FILTERS_WIDTH_API_MONITORING',
+	QUICK_FILTERS_WIDTH_EXCEPTIONS = 'QUICK_FILTERS_WIDTH_EXCEPTIONS',
+	QUICK_FILTERS_WIDTH_INFRA = 'QUICK_FILTERS_WIDTH_INFRA',
 	FUNNEL_STEPS = 'FUNNEL_STEPS',
 	SPAN_DETAILS_PINNED_ATTRIBUTES = 'SPAN_DETAILS_PINNED_ATTRIBUTES',
 	LAST_USED_CUSTOM_TIME_RANGES = 'LAST_USED_CUSTOM_TIME_RANGES',
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -7,7 +7,6 @@ export const REACT_QUERY_KEY = {
 	AUTO_REFRESH_QUERY: 'AUTO_REFRESH_QUERY',

 	GET_PUBLIC_DASHBOARD: 'GET_PUBLIC_DASHBOARD',
-	GET_PUBLIC_DASHBOARD_RESOLVED: 'GET_PUBLIC_DASHBOARD_RESOLVED',
 	GET_PUBLIC_DASHBOARD_META: 'GET_PUBLIC_DASHBOARD_META',
 	GET_PUBLIC_DASHBOARD_WIDGET_DATA: 'GET_PUBLIC_DASHBOARD_WIDGET_DATA',
 	GET_ALL_LICENCES: 'GET_ALL_LICENCES',
--- a/frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss
+++ b/frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss
@@ -163,12 +163,23 @@
 	}

 	&.filter-visible {
+		// Width is owned by ResizableBox (inline style); this section is the
+		// ResizableBox root, so it stays position: relative for the drag handle.
 		.api-quick-filter-left-section {
-			width: 260px;
+			.resizable-box__content {
+				display: flex;
+				flex-direction: column;
+			}
+
+			.quick-filters-container {
+				flex: 1;
+				min-height: 0;
+			}
 		}

 		.api-module-right-section {
-			width: calc(100% - 260px);
+			flex: 1;
+			min-width: 0;
 		}
 	}
 }
--- a/frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx
@@ -4,21 +4,49 @@ import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';

 import DomainList from './Domains/DomainList';

 import './Explorer.styles.scss';

+const QUICK_FILTERS_DEFAULT_WIDTH = 260;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function Explorer(): JSX.Element {
 	useEffect(() => {
 		logEvent('API Monitoring: Landing page visited', {});
 	}, []);

+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_API_MONITORING,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className={cx('api-monitoring-page', 'filter-visible')}>
-				<section className="api-quick-filter-left-section">
+				<ResizableBox
+					handle="right"
+					defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+					initialWidth={quickFiltersInitialWidth}
+					minWidth={QUICK_FILTERS_MIN_WIDTH}
+					maxWidth={QUICK_FILTERS_MAX_WIDTH}
+					onResize={persistQuickFiltersWidth}
+					resetToDefaultOnDoubleClick
+					withHandle
+					className="api-quick-filter-left-section"
+					handleTestId="quick-filters-resize-handle"
+				>
 					<QuickFilters
 						className="qf-api-monitoring"
 						source={QuickFiltersSource.API_MONITORING}
@@ -27,7 +55,7 @@ function Explorer(): JSX.Element {
 						showQueryName={false}
 						handleFilterVisibilityChange={(): void => {}}
 					/>
-				</section>
+				</ResizableBox>
 				<DomainList />
 			</div>
 		</Sentry.ErrorBoundary>
--- a/frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.styles.scss
+++ b/frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.styles.scss
@@ -43,7 +43,7 @@

 				&__title {
 					color: var(--l1-foreground);
-					font-size: var(--periscope-font-size-base);
+					font-size: 14px;
 					font-weight: 500;
 					line-height: 20px;
 					letter-spacing: -0.07px;
@@ -51,14 +51,14 @@

 				&__subtitle {
 					color: var(--l2-foreground);
-					font-size: var(--periscope-font-size-base);
+					font-size: 14px;
 					font-weight: 400;
 					line-height: 20px;
 					letter-spacing: -0.07px;
 				}

 				&__description {
-					font-size: var(--periscope-font-size-base);
+					font-size: 14px;
 					color: var(--l2-foreground);
 					line-height: 20px;
 				}
@@ -67,7 +67,7 @@
 					margin: 0;
 					margin-top: 8px;
 					color: var(--l2-foreground);
-					font-size: var(--periscope-font-size-base);
+					font-size: 14px;
 					font-weight: 400;
 					line-height: 20px;
 					letter-spacing: -0.07px;
@@ -106,7 +106,7 @@
 					border: 1px dashed var(--l1-border);
 					background: transparent;
 					color: var(--l2-foreground);
-					font-size: var(--periscope-font-size-base);
+					font-size: 14px;
 					font-weight: 400;
 					line-height: 18px;
 					letter-spacing: -0.07px;
@@ -120,15 +120,15 @@
 					gap: 6px;
 				}

-				// Stack the message and the resources card; card matches the content
-				// width above it and is capped so it doesn't sprawl in a wide panel.
 				&__row {
 					display: flex;
-					flex-direction: column;
-					align-items: stretch;
-					gap: 16px;
-					width: fit-content;
-					max-width: 600px;
+					flex-direction: row;
+					flex-wrap: wrap;
+					align-items: flex-end;
+					max-width: 825px;
+					gap: 25px;
+					justify-content: center;
+					margin-left: 21px;
 				}

 				&__content {
@@ -142,7 +142,7 @@
 					background: var(--l2-background);
 					border: 1px solid var(--l1-border);
 					border-radius: 4px;
-					width: 100%; // match the content width above
+					width: 332px;
 				}

 				&__resources-title {
@@ -155,6 +155,7 @@
 					text-transform: uppercase;
 					padding: 16px 16px 12px;
 					border-bottom: 1px solid var(--l1-border);
+					height: 46px;
 				}

 				&__resources-links {
--- a/frontend/src/container/InfraMonitoringHosts/Hosts.tsx
+++ b/frontend/src/container/InfraMonitoringHosts/Hosts.tsx
@@ -6,6 +6,7 @@ import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
 import { FeatureKeys } from 'constants/features';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import K8sBaseDetails from 'container/InfraMonitoringK8s/Base/K8sBaseDetails';
 import { K8sBaseList } from 'container/InfraMonitoringK8s/Base/K8sBaseList';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8s/Base/types';
@@ -16,6 +17,8 @@ import {
 } from 'container/InfraMonitoringK8s/hooks';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { useAppContext } from 'providers/App/App';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

@@ -40,8 +43,21 @@ import { getHostsQuickFiltersConfig } from './utils';
 import styles from './InfraMonitoringHosts.module.scss';
 import { ArrowUpToLine, Filter } from '@signozhq/icons';

+const QUICK_FILTERS_DEFAULT_WIDTH = 280;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_INFRA,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
 	const [, setCurrentPage] = useInfraMonitoringPageListing();
 	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();

@@ -139,7 +155,18 @@ function Hosts(): JSX.Element {
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
-						<div className={styles.quickFiltersContainer}>
+						<ResizableBox
+							handle="right"
+							defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+							initialWidth={quickFiltersInitialWidth}
+							minWidth={QUICK_FILTERS_MIN_WIDTH}
+							maxWidth={QUICK_FILTERS_MAX_WIDTH}
+							onResize={persistQuickFiltersWidth}
+							resetToDefaultOnDoubleClick
+							withHandle
+							className={styles.quickFiltersContainer}
+							handleTestId="quick-filters-resize-handle"
+						>
 							<div className={styles.quickFiltersContainerHeader}>
 								<Typography.Text>Filters</Typography.Text>
 								<Tooltip title="Collapse Filters">
@@ -156,7 +183,7 @@ function Hosts(): JSX.Element {
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
 								onFilterChange={handleQuickFiltersChange}
 							/>
-						</div>
+						</ResizableBox>
 					)}
 					<div
 						className={`${styles.listContainer}${
--- a/frontend/src/container/InfraMonitoringHosts/InfraMonitoringHosts.module.scss
+++ b/frontend/src/container/InfraMonitoringHosts/InfraMonitoringHosts.module.scss
@@ -44,26 +44,20 @@
 }

 .quickFiltersContainer {
-	width: 280px;
-	min-width: 280px;
+	// Width is owned by ResizableBox (inline style). No overflow here: the panel
+	// must not scroll (QuickFilters scrolls its own list internally) — an
+	// overflow on the root would also clip the edge-mounted resize grip.
+	flex-shrink: 0;
 	border-right: 1px solid var(--l1-border);
-	overflow-y: auto;

-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
+	:global(.resizable-box__content) {
+		display: flex;
+		flex-direction: column;
 	}

-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
+	:global(.quick-filters-container) {
+		flex: 1;
+		min-height: 0;
 	}

 	:global(.ant-collapse-header) {
@@ -142,7 +136,9 @@
 }

 .listContainerFiltersVisible {
-	max-width: calc(100% - 280px);
+	// Width is driven by flex now that the filters panel is resizable; the list
+	// fills whatever space the (variable-width) panel leaves.
+	max-width: 100%;
 }

 .quickFiltersToggleContainer {
--- a/frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx
+++ b/frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx
@@ -6,6 +6,7 @@ import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
 import { FeatureKeys } from 'constants/features';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import K8sBaseDetails from 'container/InfraMonitoringK8sV2/Base/K8sBaseDetails';
 import { K8sBaseList } from 'container/InfraMonitoringK8sV2/Base/K8sBaseList';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8sV2/Base/types';
@@ -16,6 +17,8 @@ import {
 } from 'container/InfraMonitoringK8sV2/hooks';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { useAppContext } from 'providers/App/App';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

@@ -40,8 +43,21 @@ import { getHostsQuickFiltersConfig } from './utils';
 import styles from './InfraMonitoringHosts.module.scss';
 import { ArrowUpToLine, Filter } from '@signozhq/icons';

+const QUICK_FILTERS_DEFAULT_WIDTH = 280;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_INFRA,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
 	const [, setCurrentPage] = useInfraMonitoringPageListing();
 	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();

@@ -139,7 +155,18 @@ function Hosts(): JSX.Element {
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
-						<div className={styles.quickFiltersContainer}>
+						<ResizableBox
+							handle="right"
+							defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+							initialWidth={quickFiltersInitialWidth}
+							minWidth={QUICK_FILTERS_MIN_WIDTH}
+							maxWidth={QUICK_FILTERS_MAX_WIDTH}
+							onResize={persistQuickFiltersWidth}
+							resetToDefaultOnDoubleClick
+							withHandle
+							className={styles.quickFiltersContainer}
+							handleTestId="quick-filters-resize-handle"
+						>
 							<div className={styles.quickFiltersContainerHeader}>
 								<Typography.Text>Filters</Typography.Text>
 								<Tooltip title="Collapse Filters">
@@ -156,7 +183,7 @@ function Hosts(): JSX.Element {
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
 								onFilterChange={handleQuickFiltersChange}
 							/>
-						</div>
+						</ResizableBox>
 					)}
 					<div
 						className={`${styles.listContainer}${
--- a/frontend/src/container/InfraMonitoringHostsV2/InfraMonitoringHosts.module.scss
+++ b/frontend/src/container/InfraMonitoringHostsV2/InfraMonitoringHosts.module.scss
@@ -44,26 +44,20 @@
 }

 .quickFiltersContainer {
-	width: 280px;
-	min-width: 280px;
+	// Width is owned by ResizableBox (inline style). No overflow here: the panel
+	// must not scroll (QuickFilters scrolls its own list internally) — an
+	// overflow on the root would also clip the edge-mounted resize grip.
+	flex-shrink: 0;
 	border-right: 1px solid var(--l1-border);
-	overflow-y: auto;

-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
+	:global(.resizable-box__content) {
+		display: flex;
+		flex-direction: column;
 	}

-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
+	:global(.quick-filters-container) {
+		flex: 1;
+		min-height: 0;
 	}

 	:global(.ant-collapse-header) {
@@ -142,7 +136,9 @@
 }

 .listContainerFiltersVisible {
-	max-width: calc(100% - 280px);
+	// Width is driven by flex now that the filters panel is resizable; the list
+	// fills whatever space the (variable-width) panel leaves.
+	max-width: 100%;
 }

 .quickFiltersToggleContainer {
--- a/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.module.scss
+++ b/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.module.scss
@@ -44,26 +44,15 @@
 }

 .quickFiltersContainer {
-	width: 280px;
-	min-width: 280px;
+	// Width is owned by ResizableBox (inline style). No overflow here: the panel
+	// must not scroll (QuickFilters scrolls its own list internally) — an
+	// overflow on the root would also clip the edge-mounted resize grip.
+	flex-shrink: 0;
 	border-right: 1px solid var(--l1-border);
-	overflow-y: auto;

-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
+	:global(.resizable-box__content) {
+		display: flex;
+		flex-direction: column;
 	}

 	:global(.quick-filters) {
@@ -128,7 +117,9 @@
 }

 .listContainerFiltersVisible {
-	max-width: calc(100% - 280px);
+	// Width is driven by flex now that the filters panel is resizable; the list
+	// fills whatever space the (variable-width) panel leaves.
+	max-width: 100%;
 }

 .categorySelectorSection {
@@ -219,8 +210,16 @@

 .quickFiltersSection {
 	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
 	overflow-y: auto;

+	:global(.quick-filters-container) {
+		flex: 1;
+		min-height: 0;
+	}
+
 	&::-webkit-scrollbar {
 		width: 0.1rem;
 	}
--- a/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx
+++ b/frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx
@@ -6,6 +6,7 @@ import logEvent from 'api/common/logEvent';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import {
@@ -22,6 +23,8 @@ import {
 	Workflow,
 } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

 import { FeatureKeys } from '../../constants/features';
@@ -56,9 +59,23 @@ import K8sVolumesList from './Volumes/K8sVolumesList';

 import styles from './InfraMonitoringK8s.module.scss';

+const QUICK_FILTERS_DEFAULT_WIDTH = 280;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 export default function InfraMonitoringK8s(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);

+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_INFRA,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	const [selectedCategory, setSelectedCategory] = useInfraMonitoringCategory();
 	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
@@ -212,7 +229,18 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
-						<div className={styles.quickFiltersContainer}>
+						<ResizableBox
+							handle="right"
+							defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+							initialWidth={quickFiltersInitialWidth}
+							minWidth={QUICK_FILTERS_MIN_WIDTH}
+							maxWidth={QUICK_FILTERS_MAX_WIDTH}
+							onResize={persistQuickFiltersWidth}
+							resetToDefaultOnDoubleClick
+							withHandle
+							className={styles.quickFiltersContainer}
+							handleTestId="quick-filters-resize-handle"
+						>
 							<div className={styles.categorySelectorSection}>
 								<div className={styles.sectionHeader} data-type="resource">
 									<Typography.Text className={styles.sectionLabel}>
@@ -265,7 +293,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 									/>
 								)}
 							</div>
-						</div>
+						</ResizableBox>
 					)}

 					<div
--- a/frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.module.scss
+++ b/frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.module.scss
@@ -44,26 +44,15 @@
 }

 .quickFiltersContainer {
-	width: 280px;
-	min-width: 280px;
+	// Width is owned by ResizableBox (inline style). No overflow here: the panel
+	// must not scroll (QuickFilters scrolls its own list internally) — an
+	// overflow on the root would also clip the edge-mounted resize grip.
+	flex-shrink: 0;
 	border-right: 1px solid var(--l1-border);
-	overflow-y: auto;

-	&::-webkit-scrollbar {
-		width: 0.1rem;
-		height: 0.1rem;
-	}
-
-	&::-webkit-scrollbar-track {
-		background: transparent;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--accent-primary);
-	}
-
-	&::-webkit-scrollbar-thumb:hover {
-		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
+	:global(.resizable-box__content) {
+		display: flex;
+		flex-direction: column;
 	}

 	:global(.quick-filters) {
@@ -128,7 +117,9 @@
 }

 .listContainerFiltersVisible {
-	max-width: calc(100% - 280px);
+	// Width is driven by flex now that the filters panel is resizable; the list
+	// fills whatever space the (variable-width) panel leaves.
+	max-width: 100%;
 }

 .categorySelectorSection {
@@ -219,8 +210,16 @@

 .quickFiltersSection {
 	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
 	overflow-y: auto;

+	:global(.quick-filters-container) {
+		flex: 1;
+		min-height: 0;
+	}
+
 	&::-webkit-scrollbar {
 		width: 0.1rem;
 	}
--- a/frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx
+++ b/frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx
@@ -6,6 +6,7 @@ import logEvent from 'api/common/logEvent';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import {
@@ -22,6 +23,8 @@ import {
 	Workflow,
 } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

 import { FeatureKeys } from '../../constants/features';
@@ -56,9 +59,23 @@ import K8sVolumesList from './Volumes/K8sVolumesList';

 import styles from './InfraMonitoringK8s.module.scss';

+const QUICK_FILTERS_DEFAULT_WIDTH = 280;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 export default function InfraMonitoringK8s(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);

+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_INFRA,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	const [selectedCategory, setSelectedCategory] = useInfraMonitoringCategory();
 	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
@@ -212,7 +229,18 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
-						<div className={styles.quickFiltersContainer}>
+						<ResizableBox
+							handle="right"
+							defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+							initialWidth={quickFiltersInitialWidth}
+							minWidth={QUICK_FILTERS_MIN_WIDTH}
+							maxWidth={QUICK_FILTERS_MAX_WIDTH}
+							onResize={persistQuickFiltersWidth}
+							resetToDefaultOnDoubleClick
+							withHandle
+							className={styles.quickFiltersContainer}
+							handleTestId="quick-filters-resize-handle"
+						>
 							<div className={styles.categorySelectorSection}>
 								<div className={styles.sectionHeader} data-type="resource">
 									<Typography.Text className={styles.sectionLabel}>
@@ -265,7 +293,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 									/>
 								)}
 							</div>
-						</div>
+						</ResizableBox>
 					)}

 					<div
--- a/frontend/src/container/MembersSettings/MembersSettings.styles.scss
+++ b/frontend/src/container/MembersSettings/MembersSettings.styles.scss
@@ -33,8 +33,7 @@
 		color: var(--foreground);
 		letter-spacing: -0.07px;
 		line-height: var(--paragraph-base-400-line-height);
-		margin-bottom: var(--spacing-8);
-		margin-top: 0;
+		margin: 0;
 	}

 	&__controls {
--- a/frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss
+++ b/frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss
@@ -3,12 +3,23 @@
 	flex-direction: row;

 	.meter-explorer-quick-filters-section {
-		width: 280px;
+		// Width is owned by ResizableBox (inline style).
+		flex-shrink: 0;
 		border-right: 1px solid var(--l1-border);

 		&.hidden {
 			display: none;
 		}
+
+		.resizable-box__content {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.quick-filters-container {
+			flex: 1;
+			min-height: 0;
+		}
 	}

 	.meter-explorer-content-section {
@@ -86,7 +97,9 @@

 	&.quick-filters-open {
 		.meter-explorer-content-section {
-			width: calc(100% - 280px);
+			flex: 1;
+			width: auto;
+			min-width: 0;
 		}
 	}

--- a/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
+++ b/frontend/src/container/MeterExplorer/Explorer/Explorer.tsx
@@ -7,6 +7,7 @@ import cx from 'classnames';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
@@ -18,6 +19,8 @@ import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { Filter } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -30,6 +33,10 @@ import { splitQueryIntoOneChartPerQuery } from './utils';

 import './Explorer.styles.scss';

+const QUICK_FILTERS_DEFAULT_WIDTH = 280;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function Explorer(): JSX.Element {
 	const {
 		handleRunQuery,
@@ -55,6 +62,16 @@ function Explorer(): JSX.Element {

 	const [showQuickFilters, setShowQuickFilters] = useState(true);

+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_METER,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	const defaultQuery = useMemo(
 		() =>
 			updateAllQueriesOperators(
@@ -127,10 +144,19 @@ function Explorer(): JSX.Element {
 					'quick-filters-open': showQuickFilters,
 				})}
 			>
-				<div
+				<ResizableBox
+					handle="right"
+					defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+					initialWidth={quickFiltersInitialWidth}
+					minWidth={QUICK_FILTERS_MIN_WIDTH}
+					maxWidth={QUICK_FILTERS_MAX_WIDTH}
+					onResize={persistQuickFiltersWidth}
+					resetToDefaultOnDoubleClick
+					withHandle
 					className={cx('meter-explorer-quick-filters-section', {
 						hidden: !showQuickFilters,
 					})}
+					handleTestId="quick-filters-resize-handle"
 				>
 					<QuickFilters
 						className="qf-meter-explorer"
@@ -142,7 +168,7 @@ function Explorer(): JSX.Element {
 							setShowQuickFilters(!showQuickFilters);
 						}}
 					/>
-				</div>
+				</ResizableBox>

 				<div className="meter-explorer-content-section">
 					<div className="meter-explorer-explore-content">
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/CreateEditRolePage.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/CreateEditRolePage.tsx
@@ -7,48 +7,19 @@ import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
 import { Skeleton } from 'antd';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import ROUTES from 'constants/routes';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useNavigationBlocker } from 'hooks/useNavigationBlocker';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
-import { withAuthZPage } from 'lib/authz/components/withAuthZ/withAuthZPage';
-import { RouterContext } from 'lib/authz/components/withAuthZ/withAuthZ';
-import {
-	buildRoleReadPermission,
-	buildRoleUpdatePermission,
-	RoleCreatePermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import APIError from 'types/api/error';

 import PermissionEditor from './components/PermissionEditor';
 import { useCreateEditRolePageActions } from './useCreateEditRolePageActions';
+import { useNavigationBlocker } from 'hooks/useNavigationBlocker';

 import styles from './CreateEditRolePage.module.scss';
-import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';

-function authzCheckFn(
-	_props: object,
-	router: RouterContext,
-): BrandedPermission[] {
-	const match = router.matchPath<{ roleId: string }>(ROUTES.ROLE_DETAILS);
-	const roleId = match?.roleId ?? 'new';
-	const roleName = router.searchParams.get('name') ?? '';
-	const isCreateMode = roleId === 'new';
-
-	if (isCreateMode) {
-		return [RoleCreatePermission];
-	}
-	if (roleName) {
-		return [
-			buildRoleReadPermission(roleName),
-			buildRoleUpdatePermission(roleName),
-		];
-	}
-	return [];
-}
-
-function CreateEditRolePageContent(): JSX.Element {
+function CreateEditRolePage(): JSX.Element {
 	const history = useHistory();
 	const { pathname } = useLocation();
 	const urlQuery = useUrlQuery();
@@ -76,6 +47,9 @@ function CreateEditRolePageContent(): JSX.Element {
 		saveError,
 		validationErrors,
 		isCreateMode,
+		hasRequiredPermission,
+		isAuthZLoading,
+		deniedPermission,
 		loadError,
 	} = useCreateEditRolePageActions(roleId, roleName);

@@ -107,6 +81,10 @@ function CreateEditRolePageContent(): JSX.Element {
 		roleName,
 	]);

+	if (!hasRequiredPermission && !isAuthZLoading) {
+		return <PermissionDeniedFullPage permissionName={deniedPermission} />;
+	}
+
 	if (!isRolesEnabled && !isFeatureGateLoading) {
 		return (
 			<div
@@ -149,7 +127,7 @@ function CreateEditRolePageContent(): JSX.Element {
 		);
 	}

-	if ((isLoading && !isCreateMode) || isFeatureGateLoading) {
+	if (isAuthZLoading || (isLoading && !isCreateMode) || isFeatureGateLoading) {
 		return (
 			<div className={styles.createEditRolePage}>
 				<Skeleton active paragraph={{ rows: 8 }} />
@@ -217,12 +195,7 @@ function CreateEditRolePageContent(): JSX.Element {
 							</Typography>
 						</div>
 					)}
-					<AuthZButton
-						checks={
-							isCreateMode
-								? [RoleCreatePermission]
-								: [buildRoleUpdatePermission(roleName)]
-						}
+					<Button
 						variant="solid"
 						color="primary"
 						onClick={handleSaveAndNavigate}
@@ -231,7 +204,7 @@ function CreateEditRolePageContent(): JSX.Element {
 						data-testid="save-button"
 					>
 						{isCreateMode ? 'Create role' : 'Save changes'}
-					</AuthZButton>
+					</Button>
 				</div>
 			</div>

@@ -317,11 +290,4 @@ function CreateEditRolePageContent(): JSX.Element {
 	);
 }

-export default withAuthZPage(CreateEditRolePageContent, {
-	checks: authzCheckFn,
-	fallbackOnLoading: (
-		<div className={styles.createEditRolePage}>
-			<Skeleton active paragraph={{ rows: 8 }} />
-		</div>
-	),
-});
+export default CreateEditRolePage;
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/CreateEditRolePage.featureGate.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/CreateEditRolePage.featureGate.test.tsx
@@ -1,21 +1,24 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import { FeatureKeys } from 'constants/features';
-import { server } from 'mocks-server/server';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
 import {
 	invalidLicense,
-	setupAuthzAdmin,
+	mockUseAuthZGrantAll,
 } from 'lib/authz/utils/authz-test-utils';

 import CreateEditRolePage from '../CreateEditRolePage';

+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 beforeEach(() => {
-	server.use(setupAuthzAdmin());
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 });

 afterEach(() => {
-	server.resetHandlers();
+	jest.clearAllMocks();
 });

 function renderCreatePage(
@@ -68,9 +71,7 @@ describe('CreateEditRolePage - Feature Gate', () => {
 				),
 			});

-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
@@ -79,9 +80,7 @@ describe('CreateEditRolePage - Feature Gate', () => {
 		it('shows error when license is invalid', async () => {
 			renderCreatePage({ activeLicense: invalidLicense });

-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
@@ -93,19 +92,16 @@ describe('CreateEditRolePage - Feature Gate', () => {
 			await expect(screen.findByText('Create Role')).resolves.toBeInTheDocument();
 		});

-		it('shows back button when feature disabled', async () => {
+		it('shows back button when feature disabled', () => {
 			renderCreatePage({ activeLicense: invalidLicense });

-			await expect(
-				screen.findByTestId('cancel-button'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
 		});

-		it('back button is enabled when feature disabled', async () => {
+		it('back button is enabled when feature disabled', () => {
 			renderCreatePage({ activeLicense: invalidLicense });

-			const cancelButton = await screen.findByTestId('cancel-button');
-			expect(cancelButton).not.toBeDisabled();
+			expect(screen.getByTestId('cancel-button')).not.toBeDisabled();
 		});
 	});

@@ -122,9 +118,7 @@ describe('CreateEditRolePage - Feature Gate', () => {
 				),
 			});

-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
@@ -133,9 +127,7 @@ describe('CreateEditRolePage - Feature Gate', () => {
 		it('shows error when license is invalid', async () => {
 			renderEditPage(ROLE_ID, ROLE_NAME, { activeLicense: invalidLicense });

-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/CreateRolePage.authz.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/CreateRolePage.authz.test.tsx
@@ -1,17 +1,16 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { render, screen } from 'tests/test-utils';
-import {
-	setupAuthzAdmin,
-	setupAuthzDenyAll,
-} from 'lib/authz/utils/authz-test-utils';
+import { mockUseAuthZDenyAll } from 'lib/authz/utils/authz-test-utils';

 import CreateEditRolePage from '../CreateEditRolePage';

+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 afterEach(() => {
-	server.resetHandlers();
+	jest.clearAllMocks();
 });

 function renderCreatePage(): ReturnType<typeof render> {
@@ -32,7 +31,7 @@ function renderCreatePage(): ReturnType<typeof render> {
 describe('CreateRolePage - AuthZ', () => {
 	describe('permission denied', () => {
 		it('shows PermissionDeniedFullPage when create permission denied', async () => {
-			server.use(setupAuthzDenyAll());
+			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);

 			renderCreatePage();

@@ -44,31 +43,19 @@ describe('CreateRolePage - AuthZ', () => {

 	describe('loading state', () => {
 		it('shows skeleton while checking permissions', () => {
-			server.use(
-				rest.post('*/api/v1/authz/check', (_req, res, ctx) =>
-					res(
-						ctx.delay(200),
-						ctx.status(200),
-						ctx.json({ data: [], status: 'success' }),
-					),
-				),
-			);
+			mockUseAuthZ.mockReturnValue({
+				isLoading: true,
+				isFetching: true,
+				error: null,
+				permissions: null,
+				allowed: false,
+				deniedPermissions: [],
+				refetchPermissions: jest.fn(),
+			});

 			renderCreatePage();

 			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
 		});
 	});
-
-	describe('permission granted', () => {
-		it('renders create page when create permission granted', async () => {
-			server.use(setupAuthzAdmin());
-
-			renderCreatePage();
-
-			await expect(
-				screen.findByTestId('role-name-input'),
-			).resolves.toBeInTheDocument();
-		});
-	});
 });
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/CreateRolePage.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/CreateRolePage.test.tsx
@@ -3,22 +3,27 @@ import ROUTES from 'constants/routes';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';

 import CreateEditRolePage from '../CreateEditRolePage';

+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 const rolesApiBase = '*/api/v1/roles';

 beforeEach(() => {
-	server.use(setupAuthzAdmin());
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 });

 afterEach(() => {
+	jest.clearAllMocks();
 	server.resetHandlers();
 });

-async function renderCreatePage(): Promise<ReturnType<typeof render>> {
-	const result = render(
+function renderCreatePage(): ReturnType<typeof render> {
+	return render(
 		<Switch>
 			<Route path={ROUTES.ROLES_SETTINGS} exact>
 				<div data-testid="roles-list-redirect" />
@@ -30,63 +35,61 @@ async function renderCreatePage(): Promise<ReturnType<typeof render>> {
 		undefined,
 		{ initialRoute: '/settings/roles/new' },
 	);
-	await screen.findByTestId('create-edit-role-page');
-	return result;
 }

 describe('CreateRolePage', () => {
 	describe('initial render', () => {
-		it('renders create role page with testId', async () => {
-			await renderCreatePage();
+		it('renders create role page with testId', () => {
+			renderCreatePage();

 			expect(screen.getByTestId('create-edit-role-page')).toBeInTheDocument();
 		});

-		it('shows breadcrumb with "Create role" as current page', async () => {
-			await renderCreatePage();
+		it('shows breadcrumb with "Create role" as current page', () => {
+			renderCreatePage();

 			const page = screen.getByTestId('create-edit-role-page');
 			const breadcrumbs = within(page).getAllByText('Create role');
 			expect(breadcrumbs.length).toBeGreaterThanOrEqual(1);
 		});

-		it('renders empty name input', async () => {
-			await renderCreatePage();
+		it('renders empty name input', () => {
+			renderCreatePage();

 			const nameInput = screen.getByTestId('role-name-input');
 			expect(nameInput).toHaveValue('');
 		});

-		it('renders empty description input', async () => {
-			await renderCreatePage();
+		it('renders empty description input', () => {
+			renderCreatePage();

 			const descInput = screen.getByTestId('role-description-input');
 			expect(descInput).toHaveValue('');
 		});

-		it('name input is enabled in create mode', async () => {
-			await renderCreatePage();
+		it('name input is enabled in create mode', () => {
+			renderCreatePage();

 			const nameInput = screen.getByTestId('role-name-input');
 			expect(nameInput).not.toBeDisabled();
 		});

-		it('save button shows "Create role" text', async () => {
-			await renderCreatePage();
+		it('save button shows "Create role" text', () => {
+			renderCreatePage();

 			const saveBtn = screen.getByTestId('save-button');
 			expect(saveBtn).toHaveTextContent('Create role');
 		});

-		it('save button is disabled when no changes', async () => {
-			await renderCreatePage();
+		it('save button is disabled when no changes', () => {
+			renderCreatePage();

 			const saveBtn = screen.getByTestId('save-button');
 			expect(saveBtn).toBeDisabled();
 		});

-		it('does not show unsaved indicator initially', async () => {
-			await renderCreatePage();
+		it('does not show unsaved indicator initially', () => {
+			renderCreatePage();

 			expect(screen.queryByText('Unsaved changes')).not.toBeInTheDocument();
 		});
@@ -95,7 +98,7 @@ describe('CreateRolePage', () => {
 	describe('form interactions', () => {
 		it('enables save button when name is entered', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();

 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'test-role');
@@ -106,7 +109,7 @@ describe('CreateRolePage', () => {

 		it('shows unsaved indicator when form modified', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();

 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'my-role');
@@ -118,7 +121,7 @@ describe('CreateRolePage', () => {

 		it('enables save button when description is entered', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();

 			const descInput = screen.getByTestId('role-description-input');
 			await user.type(descInput, 'Some description');
@@ -131,7 +134,7 @@ describe('CreateRolePage', () => {
 	describe('cancel action', () => {
 		it('navigates to roles list on cancel', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();

 			const cancelBtn = screen.getByTestId('cancel-button');
 			await user.click(cancelBtn);
@@ -160,7 +163,7 @@ describe('CreateRolePage', () => {
 			);

 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();

 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'my-custom-role');
@@ -197,7 +200,7 @@ describe('CreateRolePage', () => {
 			);

 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();

 			const descInput = screen.getByTestId('role-description-input');
 			await user.type(descInput, 'Description only');
@@ -215,7 +218,7 @@ describe('CreateRolePage', () => {

 		it('shows error banner with "Role name is required" when saving with empty name', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();

 			const descInput = screen.getByTestId('role-description-input');
 			await user.type(descInput, 'Description only');
@@ -234,7 +237,7 @@ describe('CreateRolePage', () => {

 		it('clears error banner when user starts typing in name field', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();

 			const descInput = screen.getByTestId('role-description-input');
 			await user.type(descInput, 'Description only');
@@ -267,7 +270,7 @@ describe('CreateRolePage', () => {
 			);

 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();

 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'duplicate-role');
@@ -288,7 +291,7 @@ describe('CreateRolePage', () => {
 	describe('validation errors', () => {
 		it('shows validation error when Only Selected has no items', async () => {
 			const user = userEvent.setup();
-			await renderCreatePage();
+			renderCreatePage();

 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/EditRolePage.authz.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/EditRolePage.authz.test.tsx
@@ -1,43 +1,22 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { render, screen } from 'tests/test-utils';
 import {
-	setupAuthzAdmin,
-	setupAuthzDenyAll,
-	setupAuthzDeny,
+	mockUseAuthZDenyAll,
+	mockUseAuthZGrantByPrefix,
 } from 'lib/authz/utils/authz-test-utils';
-import { buildRoleUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';

 import CreateEditRolePage from '../CreateEditRolePage';

+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 const EDIT_ROLE_ID = 'test-role-123';
 const EDIT_ROLE_NAME = 'test-role';
-const rolesApiBase = '*/api/v1/roles';
-
-beforeEach(() => {
-	server.use(
-		rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({
-					status: 'success',
-					data: {
-						id: EDIT_ROLE_ID,
-						name: EDIT_ROLE_NAME,
-						description: 'Test role description',
-						type: 'custom',
-						transactionGroups: [],
-					},
-				}),
-			),
-		),
-	);
-});

 afterEach(() => {
-	server.resetHandlers();
+	jest.clearAllMocks();
 });

 function renderEditPage(): ReturnType<typeof render> {
@@ -58,7 +37,7 @@ function renderEditPage(): ReturnType<typeof render> {
 describe('EditRolePage - AuthZ', () => {
 	describe('permission denied', () => {
 		it('shows PermissionDeniedFullPage when read permission denied', async () => {
-			server.use(setupAuthzDenyAll());
+			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);

 			renderEditPage();

@@ -68,7 +47,7 @@ describe('EditRolePage - AuthZ', () => {
 		});

 		it('shows PermissionDeniedFullPage when update permission denied but read granted', async () => {
-			server.use(setupAuthzDeny(buildRoleUpdatePermission(EDIT_ROLE_NAME)));
+			mockUseAuthZ.mockImplementation(mockUseAuthZGrantByPrefix('read'));

 			renderEditPage();

@@ -76,35 +55,36 @@ describe('EditRolePage - AuthZ', () => {
 				screen.findByText(/You are not authorized/i),
 			).resolves.toBeInTheDocument();
 		});
+
+		it('checks both read and update permissions for edit mode', () => {
+			mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
+
+			renderEditPage();
+
+			expect(mockUseAuthZ).toHaveBeenCalledWith(
+				expect.arrayContaining([
+					expect.stringContaining('read'),
+					expect.stringContaining('update'),
+				]),
+			);
+		});
 	});

 	describe('loading state', () => {
-		it('shows skeleton while checking permissions', async () => {
-			server.use(
-				rest.post('*/api/v1/authz/check', (_req, res, ctx) =>
-					res(
-						ctx.delay(200),
-						ctx.status(200),
-						ctx.json({ data: [], status: 'success' }),
-					),
-				),
-			);
+		it('shows skeleton while checking permissions', () => {
+			mockUseAuthZ.mockReturnValue({
+				isLoading: true,
+				isFetching: true,
+				error: null,
+				permissions: null,
+				allowed: false,
+				deniedPermissions: [],
+				refetchPermissions: jest.fn(),
+			});

 			renderEditPage();

 			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
 		});
 	});
-
-	describe('permission granted', () => {
-		it('renders edit page when both read and update permissions granted', async () => {
-			server.use(setupAuthzAdmin());
-
-			renderEditPage();
-
-			await expect(
-				screen.findByText(`Role - ${EDIT_ROLE_NAME}`),
-			).resolves.toBeInTheDocument();
-		});
-	});
 });
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/EditRolePage.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/EditRolePage.test.tsx
@@ -4,10 +4,14 @@ import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';

 import CreateEditRolePage from '../CreateEditRolePage';

+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 const CUSTOM_ROLE_ID = '019c24aa-3333-0001-aaaa-111111111111';
 const rolesApiBase = '*/api/v1/roles';

@@ -28,8 +32,8 @@ const roleWithTransactionGroups = {
 };

 beforeEach(() => {
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 	server.use(
-		setupAuthzAdmin(),
 		rest.get(`${rolesApiBase}/:id`, (_req, res, ctx) =>
 			res(ctx.status(200), ctx.json(roleWithTransactionGroups)),
 		),
@@ -37,6 +41,7 @@ beforeEach(() => {
 });

 afterEach(() => {
+	jest.clearAllMocks();
 	server.resetHandlers();
 });

@@ -111,9 +116,9 @@ describe('EditRolePage', () => {

 			renderEditPage();

-			await expect(
-				screen.findByTestId('cancel-button'),
-			).resolves.toBeInTheDocument();
+			await waitFor(() => {
+				expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
+			});
 		});

 		it('navigates to view page when cancel clicked in error state', async () => {
@@ -127,8 +132,10 @@ describe('EditRolePage', () => {

 			renderEditPage();

-			const cancelButton = await screen.findByTestId('cancel-button');
-			await user.click(cancelButton);
+			await waitFor(async () => {
+				const cancelButton = await screen.findByTestId('cancel-button');
+				await user.click(cancelButton);
+			});

 			await expect(
 				screen.findByTestId('role-details-redirect'),
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/JsonEditor.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/JsonEditor.test.tsx
@@ -1,18 +1,21 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { server } from 'mocks-server/server';
 import { render, screen, userEvent, within } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';

 import CreateEditRolePage from '../CreateEditRolePage';
 import { TooltipProvider } from '@signozhq/ui/tooltip';

+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 beforeEach(() => {
-	server.use(setupAuthzAdmin());
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 });

 afterEach(() => {
-	server.resetHandlers();
+	jest.clearAllMocks();
 });

 function renderPage(): ReturnType<typeof render> {
@@ -34,13 +37,13 @@ function renderPage(): ReturnType<typeof render> {

 async function switchToJsonMode(): Promise<void> {
 	const user = userEvent.setup();
-	const jsonRadio = await screen.findByTestId('permission-editor-mode-json');
+	const jsonRadio = screen.getByTestId('permission-editor-mode-json');
 	await user.click(jsonRadio);
 }

 async function switchToInteractiveMode(): Promise<void> {
 	const user = userEvent.setup();
-	const interactiveRadio = await screen.findByTestId(
+	const interactiveRadio = screen.getByTestId(
 		'permission-editor-mode-interactive',
 	);
 	await user.click(interactiveRadio);
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/tests/PermissionEditor.test.tsx
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/tests/PermissionEditor.test.tsx
@@ -1,28 +1,31 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { TooltipProvider } from '@signozhq/ui/tooltip';

 import CreateEditRolePage from '../CreateEditRolePage';

+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 async function expandAllCards(): Promise<void> {
 	const user = userEvent.setup();
-	const expandButton = await screen.findByTestId('expand-all-button');
+	const expandButton = screen.getByTestId('expand-all-button');
 	await user.click(expandButton);
 }

 beforeEach(() => {
-	server.use(setupAuthzAdmin());
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 });

 afterEach(() => {
-	server.resetHandlers();
+	jest.clearAllMocks();
 });

-async function renderPage(): Promise<ReturnType<typeof render>> {
-	const result = render(
+function renderPage(): ReturnType<typeof render> {
+	return render(
 		<TooltipProvider>
 			<Switch>
 				<Route path={ROUTES.ROLES_SETTINGS} exact>
@@ -36,20 +39,18 @@ async function renderPage(): Promise<ReturnType<typeof render>> {
 		undefined,
 		{ initialRoute: '/settings/roles/new' },
 	);
-	await screen.findByTestId('permission-editor');
-	return result;
 }

 describe('PermissionEditor', () => {
 	describe('mode toggle', () => {
-		it('renders permission editor with testId', async () => {
-			await renderPage();
+		it('renders permission editor with testId', () => {
+			renderPage();

 			expect(screen.getByTestId('permission-editor')).toBeInTheDocument();
 		});

-		it('defaults to interactive mode', async () => {
-			await renderPage();
+		it('defaults to interactive mode', () => {
+			renderPage();

 			const interactiveRadio = screen.getByTestId(
 				'permission-editor-mode-interactive',
@@ -59,7 +60,7 @@ describe('PermissionEditor', () => {

 		it('switches to JSON mode when clicked', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();

 			const jsonRadio = screen.getByTestId('permission-editor-mode-json');
 			await user.click(jsonRadio);
@@ -70,7 +71,7 @@ describe('PermissionEditor', () => {

 		it('switches back to interactive mode', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();

 			const jsonRadio = screen.getByTestId('permission-editor-mode-json');
 			await user.click(jsonRadio);
@@ -86,8 +87,8 @@ describe('PermissionEditor', () => {
 	});

 	describe('resource cards', () => {
-		it('renders all resource cards', async () => {
-			await renderPage();
+		it('renders all resource cards', () => {
+			renderPage();

 			expect(
 				screen.getByTestId('resource-card-factor-api-key'),
@@ -98,8 +99,8 @@ describe('PermissionEditor', () => {
 			).toBeInTheDocument();
 		});

-		it('resource cards are collapsed by default', async () => {
-			await renderPage();
+		it('resource cards are collapsed by default', () => {
+			renderPage();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const header = within(apiKeyCard).getByTestId(
@@ -111,7 +112,7 @@ describe('PermissionEditor', () => {

 		it('expands resource card when header clicked', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const header = within(apiKeyCard).getByTestId(
@@ -125,7 +126,7 @@ describe('PermissionEditor', () => {

 		it('collapses expanded resource card when header clicked again', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			const header = within(apiKeyCard).getByTestId(
@@ -139,7 +140,7 @@ describe('PermissionEditor', () => {
 		});

 		it('shows granted count in resource card header', async () => {
-			await renderPage();
+			renderPage();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
 			await expect(
@@ -150,7 +151,7 @@ describe('PermissionEditor', () => {

 	describe('action toggles', () => {
 		it('renders action toggles for each available action', async () => {
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -169,7 +170,7 @@ describe('PermissionEditor', () => {
 		});

 		it('defaults all actions to None scope', async () => {
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -187,7 +188,7 @@ describe('PermissionEditor', () => {

 		it('changes scope to All when clicked', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -208,7 +209,7 @@ describe('PermissionEditor', () => {

 		it('updates granted count when scope changed', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -227,7 +228,7 @@ describe('PermissionEditor', () => {
 	describe('Only Selected scope', () => {
 		it('shows item input selector when Only Selected is chosen', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -244,7 +245,7 @@ describe('PermissionEditor', () => {

 		it('adds item when typed and Enter pressed', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -262,7 +263,7 @@ describe('PermissionEditor', () => {

 		it('adds item when Add button clicked', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -283,7 +284,7 @@ describe('PermissionEditor', () => {

 		it('adds multiple items separated by comma', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -303,7 +304,7 @@ describe('PermissionEditor', () => {

 		it('adds multiple items separated by space', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -323,7 +324,7 @@ describe('PermissionEditor', () => {

 		it('does not add duplicate items', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -343,7 +344,7 @@ describe('PermissionEditor', () => {

 		it('removes item when X clicked', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -366,7 +367,7 @@ describe('PermissionEditor', () => {

 		it('shows Add button disabled when input is empty', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -384,7 +385,7 @@ describe('PermissionEditor', () => {
 	describe('scope change confirmation dialog', () => {
 		it('shows confirm dialog when leaving Only Selected with items', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -406,7 +407,7 @@ describe('PermissionEditor', () => {

 		it('clears items when confirmed', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -433,7 +434,7 @@ describe('PermissionEditor', () => {

 		it('keeps items when cancelled', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -460,7 +461,7 @@ describe('PermissionEditor', () => {

 		it('does not show dialog when leaving Only Selected with no items', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -479,7 +480,7 @@ describe('PermissionEditor', () => {

 	describe('verbs without Only Selected option', () => {
 		it('does not show Only Selected for list verb', async () => {
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -500,8 +501,8 @@ describe('PermissionEditor', () => {
 	});

 	describe('collapse/expand all resources', () => {
-		it('shows expand/collapse toggle group', async () => {
-			await renderPage();
+		it('shows expand/collapse toggle group', () => {
+			renderPage();

 			expect(screen.getByTestId('toggle-all-group')).toBeInTheDocument();
 			expect(screen.getByTestId('expand-all-button')).toBeInTheDocument();
@@ -509,7 +510,7 @@ describe('PermissionEditor', () => {
 		});

 		it('expands all cards when expand button clicked', async () => {
-			await renderPage();
+			renderPage();
 			await expandAllCards();

 			const apiKeyCard = screen.getByTestId('resource-card-factor-api-key');
@@ -523,7 +524,7 @@ describe('PermissionEditor', () => {
 	describe('resource card error states', () => {
 		it('shows error border on collapsed card with validation error', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();

 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');
@@ -553,7 +554,7 @@ describe('PermissionEditor', () => {

 		it('hides error border when card is expanded', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();

 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');
@@ -590,7 +591,7 @@ describe('PermissionEditor', () => {

 		it('clears validation error when permission is changed', async () => {
 			const user = userEvent.setup();
-			await renderPage();
+			renderPage();

 			const nameInput = screen.getByTestId('role-name-input');
 			await user.type(nameInput, 'valid-role');
--- a/frontend/src/container/RolesSettings/CreateEditRolePage/useCreateEditRolePageActions.ts
+++ b/frontend/src/container/RolesSettings/CreateEditRolePage/useCreateEditRolePageActions.ts
@@ -16,6 +16,7 @@ import {
 	useRolePermissions,
 	useUpdateRolePermissions,
 } from '../hooks/useRolePermissions';
+import { useRoleAuthZ } from '../hooks/useRoleAuthZ';
 import {
 	useRoleUnsavedChanges,
 	type RoleFormData,
@@ -42,6 +43,9 @@ interface UseCreateEditRolePageCallbacksResult {
 	saveError: APIError | null;
 	clearSaveError: () => void;
 	validationErrors: Set<string>;
+	hasRequiredPermission: boolean;
+	isAuthZLoading: boolean;
+	deniedPermission: string;
 }

 export function useCreateEditRolePageActions(
@@ -51,6 +55,23 @@ export function useCreateEditRolePageActions(
 	const history = useHistory();
 	const isCreateMode = roleId === 'new';

+	const {
+		hasCreatePermission,
+		hasReadPermission,
+		hasUpdatePermission,
+		isAuthZLoading,
+	} = useRoleAuthZ(roleName);
+
+	const deniedPermission = useMemo(() => {
+		if (isCreateMode) {
+			return 'role:create';
+		}
+		if (roleName) {
+			return `role:${roleName}:update`;
+		}
+		return `role:<missing-rule-name>:update`;
+	}, [isCreateMode, roleName]);
+
 	const [formData, setFormData] = useState<RoleFormData>({
 		name: '',
 		description: '',
@@ -240,5 +261,10 @@ export function useCreateEditRolePageActions(
 		saveError,
 		clearSaveError,
 		validationErrors,
+		hasRequiredPermission: isCreateMode
+			? hasCreatePermission
+			: hasReadPermission && hasUpdatePermission,
+		isAuthZLoading,
+		deniedPermission,
 	};
 }
--- a/frontend/src/container/RolesSettings/DeleteRoleModal/useDeleteRoleModal.ts
+++ b/frontend/src/container/RolesSettings/DeleteRoleModal/useDeleteRoleModal.ts
@@ -13,6 +13,7 @@ import APIError from 'types/api/error';
 interface UseDeleteRoleModalProps {
 	roleId?: string | null;
 	isManaged: boolean;
+	hasDeletePermission: boolean;
 	onDeleteSuccess?: () => void;
 }

@@ -30,7 +31,7 @@ interface UseDeleteRoleModalResult {
 export function useDeleteRoleModal(
 	props: UseDeleteRoleModalProps,
 ): UseDeleteRoleModalResult {
-	const { roleId, isManaged, onDeleteSuccess } = props;
+	const { roleId, isManaged, hasDeletePermission, onDeleteSuccess } = props;
 	const queryClient = useQueryClient();

 	const [deleteTargetRoleId, setDeleteTargetRoleId] = useState<string | null>(
@@ -78,8 +79,10 @@ export function useDeleteRoleModal(

 	const isDeleteModalOpen = deleteTargetRoleId !== null;

-	const isDeleteDisabled = isManaged;
-	const deleteDisabledReason = 'Managed roles cannot be deleted';
+	const isDeleteDisabled = isManaged || !hasDeletePermission;
+	const deleteDisabledReason = isManaged
+		? 'Managed roles cannot be deleted'
+		: 'You do not have permission to delete this role';

 	return {
 		isDeleteModalOpen,
--- a/frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx
+++ b/frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx
@@ -5,11 +5,12 @@ import { Pagination, Skeleton } from 'antd';
 import { useListRoles } from 'api/generated/services/role';
 import { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import ROUTES from 'constants/routes';
+import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { withAuthZPage } from 'lib/authz/components/withAuthZ/withAuthZPage';
-import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
 import { useTimezone } from 'providers/Timezone';
 import { RoleType } from 'types/roles';
@@ -23,14 +24,23 @@ type DisplayItem =
 	| { type: 'section'; label: string; count?: number }
 	| { type: 'role'; role: AuthtypesRoleDTO };

-interface RolesListContentProps {
+interface RolesListingTableProps {
 	searchQuery: string;
 }

-function RolesListContent({ searchQuery }: RolesListContentProps): JSX.Element {
+function RolesListingTable({
+	searchQuery,
+}: RolesListingTableProps): JSX.Element {
 	const { isRolesEnabled } = useRolesFeatureGate();

-	const { data, isLoading, isError, error } = useListRoles();
+	const { permissions: listPerms, isLoading: isAuthZLoading } = useAuthZ([
+		RoleListPermission,
+	]);
+	const hasListPermission = listPerms?.[RoleListPermission]?.isGranted ?? false;
+
+	const { data, isLoading, isError, error } = useListRoles({
+		query: { enabled: hasListPermission },
+	});
 	const { formatTimezoneAdjustedTimestampOptional } = useTimezone();
 	const history = useHistory();
 	const urlQuery = useUrlQuery();
@@ -145,7 +155,11 @@ function RolesListContent({ searchQuery }: RolesListContentProps): JSX.Element {
 		</>
 	);

-	if (isLoading) {
+	if (!hasListPermission && listPerms !== null) {
+		return <PermissionDeniedFullPage permissionName="role:list" />;
+	}
+
+	if (isAuthZLoading || isLoading) {
 		return (
 			<div className={styles.rolesListingTable}>
 				<Skeleton active paragraph={{ rows: 5 }} />
@@ -267,11 +281,4 @@ function RolesListContent({ searchQuery }: RolesListContentProps): JSX.Element {
 	);
 }

-export default withAuthZPage<RolesListContentProps>(RolesListContent, {
-	checks: [RoleListPermission],
-	fallbackOnLoading: (
-		<div className={styles.rolesListingTable}>
-			<Skeleton active paragraph={{ rows: 5 }} />
-		</div>
-	),
-});
+export default RolesListingTable;
--- a/frontend/src/container/RolesSettings/RolesSettings.tsx
+++ b/frontend/src/container/RolesSettings/RolesSettings.tsx
@@ -1,14 +1,11 @@
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Plus } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import ROUTES from 'constants/routes';
-import {
-	RoleCreatePermission,
-	RoleListPermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+import { RoleCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';

 import RolesListingTable from './RolesComponents/RolesListingTable';
@@ -40,25 +37,24 @@ function RolesSettings(): JSX.Element {
 			</div>
 			<div className={styles.rolesSettingsContent}>
 				<div className={styles.rolesSettingsToolbar}>
-					<AuthZTooltip checks={[RoleListPermission]}>
-						<Input
-							type="search"
-							placeholder="Search for roles..."
-							value={searchQuery}
-							onChange={(e): void => setSearchQuery(e.target.value)}
-						/>
-					</AuthZTooltip>
+					<Input
+						type="search"
+						placeholder="Search for roles..."
+						value={searchQuery}
+						onChange={(e): void => setSearchQuery(e.target.value)}
+					/>
 					{isRolesEnabled && (
-						<AuthZButton
-							checks={[RoleCreatePermission]}
-							variant="solid"
-							color="primary"
-							className={styles.roleSettingsToolbarButton}
-							onClick={(): void => history.push(ROUTES.ROLE_CREATE)}
-						>
-							<Plus size={14} />
-							Custom role
-						</AuthZButton>
+						<AuthZTooltip checks={[RoleCreatePermission]}>
+							<Button
+								variant="solid"
+								color="primary"
+								className={styles.roleSettingsToolbarButton}
+								onClick={(): void => history.push(ROUTES.ROLE_CREATE)}
+							>
+								<Plus size={14} />
+								Custom role
+							</Button>
+						</AuthZTooltip>
 					)}
 				</div>
 				<RolesListingTable searchQuery={searchQuery} />
--- a/frontend/src/container/RolesSettings/ViewRolePage/ViewRolePage.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/ViewRolePage.tsx
@@ -10,17 +10,11 @@ import { Typography } from '@signozhq/ui/typography';
 import { Skeleton } from 'antd';
 import { useGetRole } from 'api/generated/services/role';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import { useDeleteRoleModal } from 'container/RolesSettings/DeleteRoleModal/useDeleteRoleModal';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { useRoleAuthZ } from 'container/RolesSettings/hooks/useRoleAuthZ';
 import { transformApiToRolePermissions } from 'container/RolesSettings/hooks/useRolePermissions';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
-import { withAuthZPage } from 'lib/authz/components/withAuthZ/withAuthZPage';
-import { RouterContext } from 'lib/authz/components/withAuthZ/withAuthZ';
-import {
-	buildRoleDeletePermission,
-	buildRoleReadPermission,
-	buildRoleUpdatePermission,
-} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
 import { RoleType } from 'types/roles';
@@ -33,7 +27,7 @@ import { useViewRolePageActions } from './useViewRolePageActions';

 import styles from './ViewRolePage.module.scss';

-function ViewRolePageContent(): JSX.Element {
+function ViewRolePage(): JSX.Element {
 	const { formatTimezoneAdjustedTimestampOptional } = useTimezone();
 	const { isRolesEnabled, isLoading: isFeatureGateLoading } =
 		useRolesFeatureGate();
@@ -51,15 +45,26 @@ function ViewRolePageContent(): JSX.Element {
 		handleTabChange,
 	} = useViewRolePageActions();

+	const {
+		hasReadPermission,
+		readRolePermission,
+		hasUpdatePermission,
+		updateRolePermission,
+		hasDeletePermission,
+		isAuthZLoading,
+	} = useRoleAuthZ(roleName);
+
 	const { data, isLoading, error } = useGetRole(
 		{ id: roleId ?? '' },
-		{ query: { enabled: !!roleId } },
+		{ query: { enabled: !!roleId && hasReadPermission } },
 	);
 	const role = data?.data;
 	const isManaged = role?.type === RoleType.MANAGED;

 	const {
 		isDeleteModalOpen,
+		isDeleteDisabled,
+		deleteDisabledReason,
 		deleteError,
 		handleOpenDeleteModal,
 		handleCloseDeleteModal,
@@ -67,6 +72,7 @@ function ViewRolePageContent(): JSX.Element {
 	} = useDeleteRoleModal({
 		roleId,
 		isManaged: isManaged ?? false,
+		hasDeletePermission,
 		onDeleteSuccess: handleCancel,
 	});

@@ -138,6 +144,12 @@ function ViewRolePageContent(): JSX.Element {
 		],
 	);

+	if (!hasReadPermission && !isAuthZLoading) {
+		return (
+			<PermissionDeniedFullPage permissionName={readRolePermission.object} />
+		);
+	}
+
 	if (!isRolesEnabled && !isFeatureGateLoading) {
 		return (
 			<div className={styles.viewRolePage} data-testid="view-role-page">
@@ -175,7 +187,7 @@ function ViewRolePageContent(): JSX.Element {
 		);
 	}

-	if (isLoading || isFeatureGateLoading) {
+	if (isAuthZLoading || isLoading || isFeatureGateLoading) {
 		return (
 			<div className={styles.viewRolePage}>
 				<Skeleton active paragraph={{ rows: 8 }} />
@@ -232,55 +244,47 @@ function ViewRolePageContent(): JSX.Element {
 				</div>

 				<div className={styles.viewRolePageActions}>
-					{isManaged ? (
-						<TooltipSimple title="Managed roles cannot be deleted">
-							<Button
-								variant="link"
-								color="destructive"
-								disabled
-								data-testid="delete-button"
-								className={styles.deleteButton}
-							>
-								Delete
-							</Button>
-						</TooltipSimple>
-					) : (
-						<AuthZButton
-							checks={[buildRoleDeletePermission(roleName)]}
+					<TooltipSimple
+						title={isDeleteDisabled ? deleteDisabledReason : 'Open delete modal'}
+					>
+						<Button
 							variant="link"
 							color="destructive"
 							onClick={handleOpenDeleteModal}
+							disabled={isDeleteDisabled}
 							data-testid="delete-button"
 							className={styles.deleteButton}
 						>
 							Delete
-						</AuthZButton>
-					)}
+						</Button>
+					</TooltipSimple>

 					<Divider type="vertical" />

-					{isManaged ? (
-						<TooltipSimple title="Managed roles cannot be updated">
-							<Button
-								variant="solid"
-								color="primary"
-								disabled
-								data-testid="save-button"
-							>
-								Update
-							</Button>
-						</TooltipSimple>
-					) : (
-						<AuthZButton
-							checks={[buildRoleUpdatePermission(roleName)]}
+					<TooltipSimple
+						title={
+							isManaged
+								? 'Managed roles cannot be updated'
+								: hasUpdatePermission
+									? 'Open update page'
+									: `You are not authorized to perform ${updateRolePermission.object}`
+						}
+					>
+						<Button
 							variant="solid"
 							color="primary"
 							data-testid="save-button"
+							disabled={isManaged || !hasUpdatePermission}
 							onClick={handleRedirectToUpdate}
+							style={
+								isManaged || !hasUpdatePermission
+									? { pointerEvents: 'auto' }
+									: undefined
+							}
 						>
 							Update
-						</AuthZButton>
-					)}
+						</Button>
+					</TooltipSimple>
 				</div>
 			</div>

@@ -332,14 +336,4 @@ function ViewRolePageContent(): JSX.Element {
 	);
 }

-export default withAuthZPage(ViewRolePageContent, {
-	checks: (_props: object, router: RouterContext) => {
-		const roleName = router.searchParams.get('name') ?? '';
-		return roleName ? [buildRoleReadPermission(roleName)] : [];
-	},
-	fallbackOnLoading: (
-		<div className={styles.viewRolePage}>
-			<Skeleton active paragraph={{ rows: 8 }} />
-		</div>
-	),
-});
+export default ViewRolePage;
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.actions.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.actions.test.tsx
@@ -37,7 +37,7 @@ describe('ViewRolePage - Actions', () => {
 			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
 		);

-		const cancelBtn = await screen.findByTestId('cancel-button');
+		const cancelBtn = screen.getByTestId('cancel-button');
 		await user.click(cancelBtn);

 		await expect(
@@ -61,10 +61,7 @@ describe('ViewRolePage - Actions', () => {
 			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
 		);

-		const updateBtn = await screen.findByTestId('save-button');
-		await waitFor(() => {
-			expect(updateBtn).not.toBeDisabled();
-		});
+		const updateBtn = screen.getByTestId('save-button');
 		await user.click(updateBtn);

 		await expect(
@@ -79,10 +76,7 @@ describe('ViewRolePage - Actions', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		const deleteBtn = await screen.findByTestId('delete-button');
-		await waitFor(() => {
-			expect(deleteBtn).not.toBeDisabled();
-		});
+		const deleteBtn = screen.getByTestId('delete-button');
 		await user.click(deleteBtn);

 		await expect(
@@ -111,11 +105,7 @@ describe('ViewRolePage - Actions', () => {
 			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
 		);

-		const deleteBtn = await screen.findByTestId('delete-button');
-		await waitFor(() => {
-			expect(deleteBtn).not.toBeDisabled();
-		});
-		await user.click(deleteBtn);
+		await user.click(screen.getByTestId('delete-button'));

 		await expect(
 			screen.findByText(/Are you sure you want to delete the role/),
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.authz.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.authz.test.tsx
@@ -1,17 +1,15 @@
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 import userEvent from '@testing-library/user-event';
 import * as roleApi from 'api/generated/services/role';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	customRoleResponse,
 	managedRoleResponse,
 } from 'mocks-server/__mockdata__/roles';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
 import {
-	AUTHZ_CHECK_URL,
-	setupAuthzAdmin,
-	setupAuthzDenyAll,
-	setupAuthzGrantByPrefix,
+	mockUseAuthZDenyAll,
+	mockUseAuthZGrantAll,
+	mockUseAuthZGrantByPrefix,
 } from 'lib/authz/utils/authz-test-utils';
 import { render, screen, waitFor } from 'tests/test-utils';

@@ -27,15 +25,25 @@ import {
 	mockPermissionsData,
 } from './testUtils';

+const mockUseAuthZGrantReadDeleteDenied = mockUseAuthZGrantByPrefix(
+	'read',
+	'update',
+);
+const mockUseAuthZGrantReadUpdateDenied = mockUseAuthZGrantByPrefix(
+	'read',
+	'delete',
+);
+
 describe('ViewRolePage - AuthZ', () => {
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

 	describe('permission denied', () => {
 		it('shows permission denied page when read permission denied', async () => {
-			server.use(setupAuthzDenyAll());
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZDenyAll);

 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: undefined,
@@ -55,8 +63,10 @@ describe('ViewRolePage - AuthZ', () => {
 	});

 	describe('update button visibility', () => {
-		it('enables Update button when update permission granted', async () => {
-			server.use(setupAuthzAdmin());
+		it('enables Update button when update permission granted', () => {
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantAll);

 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -82,13 +92,13 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);

-			await expect(
-				screen.findByTestId('save-button'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('save-button')).toBeInTheDocument();
 		});

-		it('disables Update button when update permission denied', async () => {
-			server.use(setupAuthzGrantByPrefix('read', 'delete'));
+		it('disables Update button when update permission denied', () => {
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantReadUpdateDenied);

 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -114,13 +124,13 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);

-			await waitFor(() => {
-				expect(screen.getByTestId('save-button')).toBeDisabled();
-			});
+			expect(screen.getByTestId('save-button')).toBeDisabled();
 		});

-		it('disables Update button when role is managed', async () => {
-			server.use(setupAuthzAdmin());
+		it('disables Update button when role is managed', () => {
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantAll);

 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: managedRoleResponse,
@@ -150,15 +160,15 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);

-			await waitFor(() => {
-				expect(screen.getByTestId('save-button')).toBeDisabled();
-			});
+			expect(screen.getByTestId('save-button')).toBeDisabled();
 		});

 		it('shows managed role tooltip when update button hovered on managed role', async () => {
 			const user = userEvent.setup();

-			server.use(setupAuthzAdmin());
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantAll);

 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: managedRoleResponse,
@@ -188,7 +198,7 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);

-			const updateButton = await screen.findByTestId('save-button');
+			const updateButton = screen.getByTestId('save-button');
 			await user.hover(updateButton);

 			await waitFor(() => {
@@ -198,8 +208,12 @@ describe('ViewRolePage - AuthZ', () => {
 			});
 		});

-		it('disables and shows denial attribute when update permission denied', async () => {
-			server.use(setupAuthzGrantByPrefix('read', 'delete'));
+		it('shows authorization tooltip when update permission denied', async () => {
+			const user = userEvent.setup();
+
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantReadUpdateDenied);

 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -225,17 +239,22 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);

+			const updateButton = screen.getByTestId('save-button');
+			await user.hover(updateButton);
+
 			await waitFor(() => {
-				const updateButton = screen.getByTestId('save-button');
-				expect(updateButton).toBeDisabled();
-				expect(updateButton).toHaveAttribute('data-denied-permissions');
+				expect(screen.getByRole('tooltip')).toHaveTextContent(
+					/You are not authorized to perform/,
+				);
 			});
 		});
 	});

 	describe('delete button visibility', () => {
-		it('disables Delete button when delete permission denied', async () => {
-			server.use(setupAuthzGrantByPrefix('read', 'update'));
+		it('disables Delete button when delete permission denied', () => {
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantReadDeleteDenied);

 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -261,13 +280,13 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);

-			await waitFor(() => {
-				expect(screen.getByTestId('delete-button')).toBeDisabled();
-			});
+			expect(screen.getByTestId('delete-button')).toBeDisabled();
 		});

-		it('enables Delete button when delete permission granted', async () => {
-			server.use(setupAuthzAdmin());
+		it('enables Delete button when delete permission granted', () => {
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantAll);

 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -293,13 +312,15 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);

-			await waitFor(() => {
-				expect(screen.getByTestId('delete-button')).not.toBeDisabled();
-			});
+			expect(screen.getByTestId('delete-button')).not.toBeDisabled();
 		});

-		it('disables and shows denial attribute when delete permission denied', async () => {
-			server.use(setupAuthzGrantByPrefix('read', 'update'));
+		it('shows permission denied tooltip when delete permission denied', async () => {
+			const user = userEvent.setup();
+
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantReadDeleteDenied);

 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: customRoleResponse,
@@ -325,17 +346,22 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);

+			const deleteButton = screen.getByTestId('delete-button');
+			await user.hover(deleteButton);
+
 			await waitFor(() => {
-				const deleteButton = screen.getByTestId('delete-button');
-				expect(deleteButton).toBeDisabled();
-				expect(deleteButton).toHaveAttribute('data-denied-permissions');
+				expect(screen.getByRole('tooltip')).toHaveTextContent(
+					'You do not have permission to delete this role',
+				);
 			});
 		});

 		it('shows managed role tooltip when role is managed', async () => {
 			const user = userEvent.setup();

-			server.use(setupAuthzAdmin());
+			jest
+				.spyOn(useAuthZModule, 'useAuthZ')
+				.mockImplementation(mockUseAuthZGrantAll);

 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: managedRoleResponse,
@@ -365,7 +391,7 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);

-			const deleteButton = await screen.findByTestId('delete-button');
+			const deleteButton = screen.getByTestId('delete-button');
 			await user.hover(deleteButton);

 			await waitFor(() => {
@@ -378,9 +404,15 @@ describe('ViewRolePage - AuthZ', () => {

 	describe('loading state', () => {
 		it('shows skeleton while checking permissions', () => {
-			server.use(
-				rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => res(ctx.delay('infinite'))),
-			);
+			jest.spyOn(useAuthZModule, 'useAuthZ').mockReturnValue({
+				isLoading: true,
+				isFetching: true,
+				error: null,
+				permissions: null,
+				allowed: false,
+				deniedPermissions: [],
+				refetchPermissions: jest.fn(),
+			});

 			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 				data: undefined,
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.customRole.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.customRole.test.tsx
@@ -38,32 +38,28 @@ describe('ViewRolePage - Custom Role', () => {
 		).resolves.toBeInTheDocument();
 	});

-	it('shows Update button for custom roles', async () => {
+	it('shows Update button for custom roles', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await expect(screen.findByTestId('save-button')).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('save-button')).toBeInTheDocument();
 	});

-	it('shows Cancel button', async () => {
+	it('shows Cancel button', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await expect(
-			screen.findByTestId('cancel-button'),
-		).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
 	});

-	it('shows Delete button', async () => {
+	it('shows Delete button', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await expect(
-			screen.findByTestId('delete-button'),
-		).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('delete-button')).toBeInTheDocument();
 	});

 	it('renders created/updated timestamps labels', async () => {
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.edgeCases.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.edgeCases.test.tsx
@@ -1,7 +1,7 @@
 import * as roleApi from 'api/generated/services/role';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { server } from 'mocks-server/server';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { render, screen } from 'tests/test-utils';

 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
@@ -16,12 +16,13 @@ import {

 describe('ViewRolePage - Edge Cases', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);
 	});

 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

 	it('shows fallback for missing description', async () => {
@@ -52,7 +53,7 @@ describe('ViewRolePage - Edge Cases', () => {
 		await expect(screen.findByText('Description')).resolves.toBeInTheDocument();
 	});

-	it('shows fallback for invalid timestamps', async () => {
+	it('shows fallback for invalid timestamps', () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: {
 				status: 'success',
@@ -78,14 +79,11 @@ describe('ViewRolePage - Edge Cases', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await expect(
-			screen.findByTestId('view-role-page'),
-		).resolves.toBeInTheDocument();
 		const dashes = screen.getAllByText('—');
 		expect(dashes.length).toBeGreaterThanOrEqual(2);
 	});

-	it('shows fallback for undefined timestamps', async () => {
+	it('shows fallback for undefined timestamps', () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: {
 				status: 'success',
@@ -111,9 +109,6 @@ describe('ViewRolePage - Edge Cases', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await expect(
-			screen.findByTestId('view-role-page'),
-		).resolves.toBeInTheDocument();
 		const dashes = screen.getAllByText('—');
 		expect(dashes.length).toBeGreaterThanOrEqual(2);
 	});
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.error.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.error.test.tsx
@@ -1,10 +1,10 @@
 import { Route, Switch } from 'react-router-dom';
 import userEvent from '@testing-library/user-event';
 import * as roleApi from 'api/generated/services/role';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { server } from 'mocks-server/server';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
-import { render, screen, waitFor } from 'tests/test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
+import { render, screen } from 'tests/test-utils';

 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
 import ViewRolePage from '../ViewRolePage';
@@ -18,15 +18,16 @@ import {

 describe('ViewRolePage - Error State', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);
 	});

 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

-	it('displays error component when API has error but role data exists', async () => {
+	it('displays error component when API has error but role data exists', () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: customRoleResponse,
 			isLoading: false,
@@ -45,9 +46,7 @@ describe('ViewRolePage - Error State', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitFor(() => {
-			expect(document.querySelector('.error-in-place')).toBeInTheDocument();
-		});
+		expect(document.querySelector('.error-in-place')).toBeInTheDocument();
 	});

 	it('displays error state with title when API fails without role data', async () => {
@@ -65,12 +64,10 @@ describe('ViewRolePage - Error State', () => {
 		await expect(
 			screen.findByText('Failed to load role'),
 		).resolves.toBeInTheDocument();
-		await waitFor(() => {
-			expect(document.querySelector('.error-in-place')).toBeInTheDocument();
-		});
+		expect(document.querySelector('.error-in-place')).toBeInTheDocument();
 	});

-	it('shows back button on error state', async () => {
+	it('shows back button on error state', () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: undefined,
 			isLoading: false,
@@ -82,9 +79,7 @@ describe('ViewRolePage - Error State', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await expect(
-			screen.findByTestId('cancel-button'),
-		).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
 	});

 	it('navigates to roles list when back button clicked on error state', async () => {
@@ -110,7 +105,7 @@ describe('ViewRolePage - Error State', () => {
 			{ initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME) },
 		);

-		const cancelButton = await screen.findByTestId('cancel-button');
+		const cancelButton = screen.getByTestId('cancel-button');
 		await user.click(cancelButton);

 		await expect(
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.featureGate.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.featureGate.test.tsx
@@ -1,10 +1,10 @@
 import * as roleApi from 'api/generated/services/role';
 import { FeatureKeys } from 'constants/features';
-import { server } from 'mocks-server/server';
-import { defaultFeatureFlags, render, screen, waitFor } from 'tests/test-utils';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
 import {
 	invalidLicense,
-	setupAuthzAdmin,
+	mockUseAuthZGrantAll,
 } from 'lib/authz/utils/authz-test-utils';

 import ViewRolePage from '../ViewRolePage';
@@ -17,7 +17,9 @@ import {

 describe('ViewRolePage - Feature Gate', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);

 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: undefined,
@@ -29,7 +31,6 @@ describe('ViewRolePage - Feature Gate', () => {

 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

 	describe('feature disabled', () => {
@@ -45,9 +46,7 @@ describe('ViewRolePage - Feature Gate', () => {
 				},
 			});

-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
@@ -59,34 +58,28 @@ describe('ViewRolePage - Feature Gate', () => {
 				appContextOverrides: { activeLicense: invalidLicense },
 			});

-			await expect(
-				screen.findByTestId('feature-gate-error-banner'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('feature-gate-error-banner')).toBeInTheDocument();
 			await expect(
 				screen.findByText(/Custom roles feature is not available/i),
 			).resolves.toBeInTheDocument();
 		});

-		it('shows back button when feature disabled', async () => {
+		it('shows back button when feature disabled', () => {
 			render(<ViewRolePage />, undefined, {
 				initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 				appContextOverrides: { activeLicense: invalidLicense },
 			});

-			await expect(
-				screen.findByTestId('cancel-button'),
-			).resolves.toBeInTheDocument();
+			expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
 		});

-		it('back button is enabled when feature disabled', async () => {
+		it('back button is enabled when feature disabled', () => {
 			render(<ViewRolePage />, undefined, {
 				initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 				appContextOverrides: { activeLicense: invalidLicense },
 			});

-			await waitFor(() => {
-				expect(screen.getByTestId('cancel-button')).not.toBeDisabled();
-			});
+			expect(screen.getByTestId('cancel-button')).not.toBeDisabled();
 		});
 	});
 });
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.loading.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.loading.test.tsx
@@ -1,6 +1,6 @@
 import * as roleApi from 'api/generated/services/role';
-import { server } from 'mocks-server/server';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { render } from 'tests/test-utils';

 import ViewRolePage from '../ViewRolePage';
@@ -13,12 +13,13 @@ import {

 describe('ViewRolePage - Loading State', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);
 	});

 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

 	it('shows skeleton while fetching role', () => {
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.managedRole.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.managedRole.test.tsx
@@ -1,5 +1,5 @@
 import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { render, screen, waitFor } from 'tests/test-utils';
+import { render, screen } from 'tests/test-utils';

 import ViewRolePage from '../ViewRolePage';

@@ -19,7 +19,7 @@ describe('ViewRolePage - Managed Role', () => {
 		jest.restoreAllMocks();
 	});

-	it('disables Delete button for managed roles', async () => {
+	it('disables Delete button for managed roles', () => {
 		render(
 			<TooltipProvider>
 				<ViewRolePage />
@@ -30,12 +30,10 @@ describe('ViewRolePage - Managed Role', () => {
 			},
 		);

-		await waitFor(() => {
-			expect(screen.getByTestId('delete-button')).toBeDisabled();
-		});
+		expect(screen.getByTestId('delete-button')).toBeDisabled();
 	});

-	it('disables Update button for managed roles', async () => {
+	it('disables Update button for managed roles', () => {
 		render(
 			<TooltipProvider>
 				<ViewRolePage />
@@ -46,12 +44,10 @@ describe('ViewRolePage - Managed Role', () => {
 			},
 		);

-		await waitFor(() => {
-			expect(screen.getByTestId('save-button')).toBeDisabled();
-		});
+		expect(screen.getByTestId('save-button')).toBeDisabled();
 	});

-	it('still shows Cancel button for managed roles', async () => {
+	it('still shows Cancel button for managed roles', () => {
 		render(
 			<TooltipProvider>
 				<ViewRolePage />
@@ -62,8 +58,6 @@ describe('ViewRolePage - Managed Role', () => {
 			},
 		);

-		await expect(
-			screen.findByTestId('cancel-button'),
-		).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('cancel-button')).toBeInTheDocument();
 	});
 });
--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.permissionOverview.test.tsx
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/ViewRolePage.permissionOverview.test.tsx
@@ -1,7 +1,7 @@
 import * as roleApi from 'api/generated/services/role';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { server } from 'mocks-server/server';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import userEvent from '@testing-library/user-event';
 import { render, screen, within } from 'tests/test-utils';

@@ -17,15 +17,8 @@ import {
 	mockPermissionsData,
 } from './testUtils';

-async function waitForPageReady(): Promise<void> {
-	await expect(
-		screen.findByTestId('view-role-page'),
-	).resolves.toBeInTheDocument();
-}
-
 async function expandAllCards(): Promise<void> {
 	const user = userEvent.setup();
-	await waitForPageReady();
 	const expandButton = screen.getByTestId('expand-all-button');
 	await user.click(expandButton);
 }
@@ -37,7 +30,6 @@ describe('ViewRolePage - Permission Overview', () => {

 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

 	it('renders Transaction Groups section label', async () => {
@@ -50,21 +42,19 @@ describe('ViewRolePage - Permission Overview', () => {
 		).resolves.toBeInTheDocument();
 	});

-	it('renders permission overview container', async () => {
+	it('renders permission overview container', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		expect(screen.getByTestId('permission-overview')).toBeInTheDocument();
 	});

-	it('shows resource permission cards', async () => {
+	it('shows resource permission cards', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		expect(
 			screen.getByTestId('resource-section-factor-api-key'),
 		).toBeInTheDocument();
@@ -74,12 +64,11 @@ describe('ViewRolePage - Permission Overview', () => {
 		).toBeInTheDocument();
 	});

-	it('displays granted count for each resource', async () => {
+	it('displays granted count for each resource', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		expect(
 			screen.getByTestId('granted-count-factor-api-key'),
 		).toBeInTheDocument();
@@ -88,15 +77,16 @@ describe('ViewRolePage - Permission Overview', () => {

 describe('ViewRolePage - Permission Overview Loading State', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);
 	});

 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

-	it('shows skeleton when permissions are loading', async () => {
+	it('shows skeleton when permissions are loading', () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: customRoleResponse,
 			isLoading: false,
@@ -115,22 +105,22 @@ describe('ViewRolePage - Permission Overview Loading State', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		expect(screen.getByTestId('permission-overview-loading')).toBeInTheDocument();
 	});
 });

 describe('ViewRolePage - Permission Overview Error State', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);
 	});

 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

-	it('shows error when permissions fail to load', async () => {
+	it('shows error when permissions fail to load', () => {
 		jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 			data: customRoleResponse,
 			isLoading: false,
@@ -149,19 +139,19 @@ describe('ViewRolePage - Permission Overview Error State', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		expect(screen.getByTestId('permission-overview-error')).toBeInTheDocument();
 	});
 });

 describe('ViewRolePage - Scope: ALL permissions', () => {
 	beforeEach(() => {
-		server.use(setupAuthzAdmin());
+		jest
+			.spyOn(useAuthZModule, 'useAuthZ')
+			.mockImplementation(mockUseAuthZGrantAll);
 	});

 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

 	it('shows "All" badge for actions with ALL scope', async () => {
@@ -192,7 +182,7 @@ describe('ViewRolePage - Scope: ALL permissions', () => {
 		expect(screen.getByTestId('scope-badge-create')).toHaveTextContent('All');
 	});

-	it('shows full granted count when all actions are ALL', async () => {
+	it('shows full granted count when all actions are ALL', () => {
 		mockHooksWithPermissions({
 			...mockPermissionsData,
 			resources: [
@@ -215,7 +205,6 @@ describe('ViewRolePage - Scope: ALL permissions', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		expect(screen.getByTestId('granted-count-role')).toHaveTextContent(
 			'3 / 3 granted',
 		);
@@ -223,13 +212,8 @@ describe('ViewRolePage - Scope: ALL permissions', () => {
 });

 describe('ViewRolePage - Scope: NONE permissions', () => {
-	beforeEach(() => {
-		server.use(setupAuthzAdmin());
-	});
-
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

 	it('shows "None" badge for actions with NONE scope', async () => {
@@ -260,7 +244,7 @@ describe('ViewRolePage - Scope: NONE permissions', () => {
 		expect(screen.getByTestId('scope-badge-delete')).toHaveTextContent('None');
 	});

-	it('shows zero granted count when all actions are NONE', async () => {
+	it('shows zero granted count when all actions are NONE', () => {
 		mockHooksWithPermissions({
 			...mockPermissionsData,
 			resources: [
@@ -284,7 +268,6 @@ describe('ViewRolePage - Scope: NONE permissions', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		expect(screen.getByTestId('granted-count-factor-api-key')).toHaveTextContent(
 			'0 / 4 granted',
 		);
@@ -292,13 +275,8 @@ describe('ViewRolePage - Scope: NONE permissions', () => {
 });

 describe('ViewRolePage - Scope: ONLY_SELECTED permissions', () => {
-	beforeEach(() => {
-		server.use(setupAuthzAdmin());
-	});
-
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

 	it('shows "Only selected" badge with count', async () => {
@@ -362,7 +340,7 @@ describe('ViewRolePage - Scope: ONLY_SELECTED permissions', () => {
 		await expect(screen.findByText('key-def-456')).resolves.toBeInTheDocument();
 	});

-	it('counts ONLY_SELECTED as granted in count', async () => {
+	it('counts ONLY_SELECTED as granted in count', () => {
 		mockHooksWithPermissions({
 			...mockPermissionsData,
 			resources: [
@@ -384,7 +362,6 @@ describe('ViewRolePage - Scope: ONLY_SELECTED permissions', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		expect(screen.getByTestId('granted-count-serviceaccount')).toHaveTextContent(
 			'1 / 2 granted',
 		);
@@ -431,13 +408,8 @@ describe('ViewRolePage - Scope: ONLY_SELECTED permissions', () => {
 });

 describe('ViewRolePage - Mixed permission scopes', () => {
-	beforeEach(() => {
-		server.use(setupAuthzAdmin());
-	});
-
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

 	it('renders all three scope types in single resource card', async () => {
@@ -486,7 +458,7 @@ describe('ViewRolePage - Mixed permission scopes', () => {
 		);
 	});

-	it('renders multiple resources with different scope combinations', async () => {
+	it('renders multiple resources with different scope combinations', () => {
 		mockHooksWithPermissions({
 			...mockPermissionsData,
 			resources: [
@@ -530,7 +502,6 @@ describe('ViewRolePage - Mixed permission scopes', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		expect(screen.getByTestId('granted-count-factor-api-key')).toHaveTextContent(
 			'2 / 2 granted',
 		);
@@ -544,13 +515,8 @@ describe('ViewRolePage - Mixed permission scopes', () => {
 });

 describe('ViewRolePage - Unknown resources', () => {
-	beforeEach(() => {
-		server.use(setupAuthzAdmin());
-	});
-
 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

 	it('renders unknown resource with fallback label', async () => {
@@ -574,7 +540,6 @@ describe('ViewRolePage - Unknown resources', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		expect(
 			screen.getByTestId('resource-section-future-resource'),
 		).toBeInTheDocument();
@@ -611,7 +576,7 @@ describe('ViewRolePage - Unknown resources', () => {
 		).resolves.toBeInTheDocument();
 	});

-	it('handles resource with empty actions', async () => {
+	it('handles resource with empty actions', () => {
 		mockHooksWithPermissions({
 			...mockPermissionsData,
 			resources: [
@@ -630,7 +595,6 @@ describe('ViewRolePage - Unknown resources', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		expect(
 			screen.getByTestId('resource-section-empty-resource'),
 		).toBeInTheDocument();
@@ -647,15 +611,13 @@ describe('ViewRolePage - View mode toggle', () => {

 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

-	it('renders Interactive/JSON toggle', async () => {
+	it('renders Interactive/JSON toggle', () => {
 		render(<ViewRolePage />, undefined, {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		expect(screen.getByTestId('permission-view-mode-list')).toBeInTheDocument();
 		expect(screen.getByTestId('permission-view-mode-json')).toBeInTheDocument();
 	});
@@ -667,7 +629,6 @@ describe('ViewRolePage - View mode toggle', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		expect(screen.getByTestId('permission-overview')).toBeInTheDocument();

 		const jsonToggle = screen.getByTestId('permission-view-mode-json');
@@ -684,7 +645,6 @@ describe('ViewRolePage - JSON Viewer Copy Button', () => {

 	afterEach(() => {
 		jest.restoreAllMocks();
-		server.resetHandlers();
 	});

 	it('renders copy button in JSON view', async () => {
@@ -694,7 +654,6 @@ describe('ViewRolePage - JSON Viewer Copy Button', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		const jsonToggle = screen.getByTestId('permission-view-mode-json');
 		await user.click(jsonToggle);

@@ -710,7 +669,6 @@ describe('ViewRolePage - JSON Viewer Copy Button', () => {
 			initialRoute: buildViewRoleRoute(CUSTOM_ROLE_ID, CUSTOM_ROLE_NAME),
 		});

-		await waitForPageReady();
 		const jsonToggle = screen.getByTestId('permission-view-mode-json');
 		await user.click(jsonToggle);

--- a/frontend/src/container/RolesSettings/ViewRolePage/tests/testUtils.ts
+++ b/frontend/src/container/RolesSettings/ViewRolePage/tests/testUtils.ts
@@ -3,12 +3,12 @@ import {
 	CoretypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import * as roleApi from 'api/generated/services/role';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	customRoleResponse,
 	managedRoleResponse,
 } from 'mocks-server/__mockdata__/roles';
-import { server } from 'mocks-server/server';
-import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';

 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';

@@ -79,7 +79,9 @@ export const mockPermissionsData = {
 };

 export function mockHooksForCustomRole(): void {
-	server.use(setupAuthzAdmin());
+	jest
+		.spyOn(useAuthZModule, 'useAuthZ')
+		.mockImplementation(mockUseAuthZGrantAll);

 	jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 		data: customRoleResponse,
@@ -97,7 +99,9 @@ export function mockHooksForCustomRole(): void {
 }

 export function mockHooksWithPermissions(permissions: unknown): void {
-	server.use(setupAuthzAdmin());
+	jest
+		.spyOn(useAuthZModule, 'useAuthZ')
+		.mockImplementation(mockUseAuthZGrantAll);

 	jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 		data: customRoleResponse,
@@ -115,7 +119,9 @@ export function mockHooksWithPermissions(permissions: unknown): void {
 }

 export function mockHooksForManagedRole(): void {
-	server.use(setupAuthzAdmin());
+	jest
+		.spyOn(useAuthZModule, 'useAuthZ')
+		.mockImplementation(mockUseAuthZGrantAll);

 	jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
 		data: managedRoleResponse,
--- a/frontend/src/container/RolesSettings/tests/RolesSettings.authz.test.tsx
+++ b/frontend/src/container/RolesSettings/tests/RolesSettings.authz.test.tsx
@@ -11,21 +11,23 @@ import {
 	userEvent,
 } from 'tests/test-utils';
 import { FeatureKeys } from 'constants/features';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	invalidLicense,
-	setupAuthzAdmin,
-	setupAuthzDeny,
+	mockUseAuthZGrantAll,
 } from 'lib/authz/utils/authz-test-utils';
-import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';

 import RolesSettings from '../RolesSettings';

+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 const rolesApiURL = 'http://localhost/api/v1/roles';

 describe('RolesSettings', () => {
 	beforeEach(() => {
+		mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
 		server.use(
-			setupAuthzAdmin(),
 			rest.get(rolesApiURL, (_req, res, ctx) =>
 				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
 			),
@@ -33,6 +35,7 @@ describe('RolesSettings', () => {
 	});

 	afterEach(() => {
+		jest.clearAllMocks();
 		server.resetHandlers();
 	});

@@ -270,18 +273,4 @@ describe('RolesSettings', () => {
 		// Total dashes expected: 2 (for both dates)
 		expect(dashFallback.length).toBeGreaterThanOrEqual(2);
 	});
-
-	it('disables search input when user lacks list permission', async () => {
-		server.use(
-			setupAuthzDeny(RoleListPermission),
-			rest.get(rolesApiURL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-
-		render(<RolesSettings />);
-
-		const searchInput = await screen.findByPlaceholderText('Search for roles...');
-		expect(searchInput).toBeDisabled();
-	});
 });
--- a/frontend/src/container/RolesSettings/hooks/useRoleAuthZ.ts
+++ b/frontend/src/container/RolesSettings/hooks/useRoleAuthZ.ts
@@ -0,0 +1,88 @@
+import { useMemo } from 'react';
+import {
+	buildRoleDeletePermission,
+	buildRoleReadPermission,
+	buildRoleUpdatePermission,
+	RoleCreatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import {
+	ParsedPermissionObject,
+	parsePermission,
+} from 'lib/authz/hooks/useAuthZ/utils';
+
+interface UseRoleAuthZResult {
+	readRolePermission: ParsedPermissionObject;
+	updateRolePermission: ParsedPermissionObject;
+	deleteRolePermission: ParsedPermissionObject;
+	hasCreatePermission: boolean;
+	hasReadPermission: boolean;
+	hasUpdatePermission: boolean;
+	hasDeletePermission: boolean;
+	isAuthZLoading: boolean;
+}
+
+export function useRoleAuthZ(roleName: string): UseRoleAuthZResult {
+	const readRolePermissionName = buildRoleReadPermission(roleName);
+	const updateRolePermissionName = buildRoleUpdatePermission(roleName);
+	const deleteRolePermissionName = buildRoleDeletePermission(roleName);
+
+	const permissionsToCheck = useMemo(() => {
+		const perms = [RoleCreatePermission];
+		if (roleName) {
+			perms.push(
+				readRolePermissionName,
+				updateRolePermissionName,
+				deleteRolePermissionName,
+			);
+		}
+		return perms;
+	}, [
+		roleName,
+		readRolePermissionName,
+		updateRolePermissionName,
+		deleteRolePermissionName,
+	]);
+
+	const { permissions, isLoading: isAuthZLoading } =
+		useAuthZ(permissionsToCheck);
+
+	const hasCreatePermission = useMemo(() => {
+		if (permissions === null) {
+			return false;
+		}
+		return permissions[RoleCreatePermission]?.isGranted ?? false;
+	}, [permissions]);
+
+	const hasReadPermission = useMemo(() => {
+		if (!roleName || permissions === null) {
+			return true;
+		}
+		return permissions[buildRoleReadPermission(roleName)]?.isGranted ?? true;
+	}, [permissions, roleName]);
+
+	const hasUpdatePermission = useMemo(() => {
+		if (!roleName || permissions === null) {
+			return true;
+		}
+		return permissions[buildRoleUpdatePermission(roleName)]?.isGranted ?? true;
+	}, [permissions, roleName]);
+
+	const hasDeletePermission = useMemo(() => {
+		if (!roleName || permissions === null) {
+			return true;
+		}
+		return permissions[buildRoleDeletePermission(roleName)]?.isGranted ?? true;
+	}, [permissions, roleName]);
+
+	return {
+		readRolePermission: parsePermission(readRolePermissionName),
+		updateRolePermission: parsePermission(updateRolePermissionName),
+		deleteRolePermission: parsePermission(deleteRolePermissionName),
+		hasCreatePermission,
+		hasReadPermission,
+		hasUpdatePermission,
+		hasDeletePermission,
+		isAuthZLoading,
+	};
+}
--- a/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.authz.test.tsx
+++ b/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.authz.test.tsx
@@ -28,7 +28,7 @@ describe('ServiceAccountsSettings — FGA', () => {
 		);
 	});

-	it('shows denied callout when list permission is denied', async () => {
+	it('shows PermissionDeniedFullPage when list permission is denied', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
 				const payload = await req.json();
@@ -47,40 +47,14 @@ describe('ServiceAccountsSettings — FGA', () => {
 		renderPage();

 		await waitFor(() => {
-			expect(screen.getByText(/is not authorized to perform/)).toBeInTheDocument();
+			expect(
+				screen.getByText('Uh-oh! You are not authorized'),
+			).toBeInTheDocument();
 		});

 		expect(screen.queryByRole('table')).not.toBeInTheDocument();
 	});

-	it('shows page header and disables search when list permission is denied', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(
-						authzMockResponse(
-							payload,
-							payload.map(() => false),
-						),
-					),
-				);
-			}),
-		);
-
-		renderPage();
-
-		await waitFor(() => {
-			expect(screen.getByText(/is not authorized to perform/)).toBeInTheDocument();
-		});
-
-		expect(screen.getByText('Service Accounts')).toBeInTheDocument();
-		expect(
-			screen.getByPlaceholderText('Search by name or email...'),
-		).toBeDisabled();
-	});
-
 	it('shows table when list permission is granted', async () => {
 		server.use(
 			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
@@ -104,7 +78,7 @@ describe('ServiceAccountsSettings — FGA', () => {
 		});

 		expect(
-			screen.queryByText(/is not authorized to perform/),
+			screen.queryByText('Uh-oh! You are not authorized'),
 		).not.toBeInTheDocument();
 	});

--- a/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.styles.scss
+++ b/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.styles.scss
@@ -44,7 +44,6 @@
 		display: flex;
 		align-items: center;
 		gap: var(--spacing-4);
-		padding-bottom: var(--spacing-6);
 	}

 	&__search {
--- a/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx
+++ b/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx
@@ -1,17 +1,14 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { useQueryClient } from 'react-query';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
 import { useListServiceAccounts } from 'api/generated/services/serviceaccount';
-import { invalidateListServiceAccounts } from 'api/generated/services/serviceaccount';
-import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
-import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import CreateServiceAccountModal from 'components/CreateServiceAccountModal/CreateServiceAccountModal';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import Spinner from 'components/Spinner';
 import ServiceAccountDrawer from 'components/ServiceAccountDrawer/ServiceAccountDrawer';
 import ServiceAccountsTable, {
 	PAGE_SIZE,
@@ -20,6 +17,7 @@ import {
 	SACreatePermission,
 	SAListPermission,
 } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -40,13 +38,6 @@ import {
 import './ServiceAccountsSettings.styles.scss';

 function ServiceAccountsSettings(): JSX.Element {
-	const queryClient = useQueryClient();
-	const { permissions: authzPermissions, isLoading: isAuthZLoading } = useAuthZ([
-		SAListPermission,
-	]);
-	const canListServiceAccounts =
-		authzPermissions?.[SAListPermission]?.isGranted ?? false;
-	const [, setSelectedAccountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [currentPage, setPage] = useQueryState(
 		SA_QUERY_PARAMS.PAGE,
 		parseAsInteger.withDefault(1),
@@ -61,19 +52,25 @@ function ServiceAccountsSettings(): JSX.Element {
 			FilterMode.All,
 		),
 	);
+	const [, setSelectedAccountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [, setIsCreateModalOpen] = useQueryState(
 		SA_QUERY_PARAMS.CREATE_SA,
 		parseAsBoolean.withDefault(false),
 	);

+	const { permissions: listPerms, isLoading: isAuthZLoading } = useAuthZ([
+		SAListPermission,
+	]);
+
+	const hasListPermission = listPerms?.[SAListPermission]?.isGranted ?? false;
+
 	const {
 		data: serviceAccountsData,
 		isLoading,
 		isError,
 		error,
-	} = useListServiceAccounts({ query: { enabled: canListServiceAccounts } });
-
-	const controlsDisabled = isAuthZLoading || !canListServiceAccounts;
+		refetch: handleCreateSuccess,
+	} = useListServiceAccounts({ query: { enabled: hasListPermission } });

 	const allAccounts = useMemo(
 		(): ServiceAccountRow[] =>
@@ -202,9 +199,9 @@ function ServiceAccountsSettings(): JSX.Element {
 			if (options?.closeDrawer) {
 				void setSelectedAccountId(null);
 			}
-			void invalidateListServiceAccounts(queryClient);
+			void handleCreateSuccess();
 		},
-		[queryClient, setSelectedAccountId],
+		[handleCreateSuccess, setSelectedAccountId],
 	);

 	return (
@@ -226,32 +223,31 @@ function ServiceAccountsSettings(): JSX.Element {
 				</div>
 			</div>

-			<div className="sa-settings__list-section">
-				<div className="sa-settings__controls">
-					<AuthZTooltip checks={[SAListPermission]}>
-						<span>
-							<DropdownMenuSimple
-								menu={{ items: filterMenuItems }}
-								className="sa-settings-filter-dropdown"
+			{isAuthZLoading || isLoading ? (
+				<Spinner height="50vh" />
+			) : !hasListPermission ? (
+				<PermissionDeniedFullPage permissionName="serviceaccount:list" />
+			) : (
+				<div className="sa-settings__list-section">
+					<div className="sa-settings__controls">
+						<DropdownMenuSimple
+							menu={{ items: filterMenuItems }}
+							className="sa-settings-filter-dropdown"
+						>
+							<Button
+								variant="solid"
+								color="secondary"
+								className="sa-settings-filter-trigger"
 							>
-								<Button
-									variant="solid"
-									color="secondary"
-									className="sa-settings-filter-trigger"
-									disabled={controlsDisabled}
-								>
-									<span>{filterLabel}</span>
-									<ChevronDown
-										size={12}
-										className="sa-settings-filter-trigger__chevron"
-									/>
-								</Button>
-							</DropdownMenuSimple>
-						</span>
-					</AuthZTooltip>
+								<span>{filterLabel}</span>
+								<ChevronDown
+									size={12}
+									className="sa-settings-filter-trigger__chevron"
+								/>
+							</Button>
+						</DropdownMenuSimple>

-					<div className="sa-settings__search">
-						<AuthZTooltip checks={[SAListPermission]}>
+						<div className="sa-settings__search">
 							<Input
 								type="search"
 								name="service-accounts-search"
@@ -262,25 +258,23 @@ function ServiceAccountsSettings(): JSX.Element {
 									void setPage(1);
 								}}
 								className="sa-settings-search-input"
-								disabled={controlsDisabled}
 							/>
+						</div>
+
+						<AuthZTooltip checks={[SACreatePermission]}>
+							<Button
+								variant="solid"
+								color="primary"
+								onClick={async (): Promise<void> => {
+									await setIsCreateModalOpen(true);
+								}}
+							>
+								<Plus size={12} />
+								New Service Account
+							</Button>
 						</AuthZTooltip>
 					</div>

-					<AuthZButton
-						checks={[SACreatePermission]}
-						variant="solid"
-						color="primary"
-						onClick={async (): Promise<void> => {
-							await setIsCreateModalOpen(true);
-						}}
-					>
-						<Plus size={12} />
-						New Service Account
-					</AuthZButton>
-				</div>
-
-				<AuthZGuardContent checks={[SAListPermission]}>
 					{isError ? (
 						<ErrorInPlace
 							error={toAPIError(
@@ -295,8 +289,8 @@ function ServiceAccountsSettings(): JSX.Element {
 							onRowClick={handleRowClick}
 						/>
 					)}
-				</AuthZGuardContent>
-			</div>
+				</div>
+			)}

 			<CreateServiceAccountModal />

--- a/frontend/src/container/ServiceAccountsSettings/tests/ServiceAccountsSettings.authz.integration.test.tsx
+++ b/frontend/src/container/ServiceAccountsSettings/tests/ServiceAccountsSettings.authz.integration.test.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import userEvent from '@testing-library/user-event';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
@@ -13,6 +14,46 @@ const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
 const SA_ROLES_ENDPOINT = '*/api/v1/service_accounts/:id/roles';
 const ROLES_ENDPOINT = '*/api/v1/roles';

+jest.mock('@signozhq/ui/drawer', () => ({
+	...jest.requireActual('@signozhq/ui/drawer'),
+	DrawerWrapper: ({
+		children,
+		footer,
+		open,
+	}: {
+		children?: ReactNode;
+		footer?: ReactNode;
+		open: boolean;
+	}): JSX.Element | null =>
+		open ? (
+			<div>
+				{children}
+				{footer}
+			</div>
+		) : null,
+}));
+
+jest.mock('@signozhq/ui/dialog', () => ({
+	...jest.requireActual('@signozhq/ui/dialog'),
+	DialogWrapper: ({
+		children,
+		open,
+		title,
+	}: {
+		children?: ReactNode;
+		open: boolean;
+		title?: string;
+	}): JSX.Element | null =>
+		open ? (
+			<div role="dialog" aria-label={title}>
+				{children}
+			</div>
+		) : null,
+	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
+		<div>{children}</div>
+	),
+}));
+
 const mockServiceAccountsAPI = [
 	{
 		id: 'sa-1',
@@ -132,11 +173,11 @@ describe('ServiceAccountsSettings (integration)', () => {
 			</NuqsTestingAdapter>,
 		);

-		const viewButton = await screen.findByRole('button', {
-			name: /View service account CI Bot/i,
-		});
-
-		fireEvent.click(viewButton);
+		fireEvent.click(
+			await screen.findByRole('button', {
+				name: /View service account CI Bot/i,
+			}),
+		);

 		await expect(
 			screen.findByRole('button', { name: /Delete Service Account/i }),
--- a/frontend/src/hooks/dashboard/test/useGetResolvedPublicDashboard.test.tsx
+++ b/frontend/src/hooks/dashboard/test/useGetResolvedPublicDashboard.test.tsx
@@ -1,94 +0,0 @@
-import { renderHook, waitFor } from '@testing-library/react';
-import { getPublicDashboardDataV2 } from 'api/generated/services/dashboard';
-import getPublicDashboardDataAPI from 'api/dashboard/public/getPublicDashboardData';
-import { ReactNode } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-
-import {
-	PublicDashboardSchema,
-	useGetResolvedPublicDashboard,
-} from '../useGetResolvedPublicDashboard';
-
-jest.mock('api/generated/services/dashboard', () => ({
-	getPublicDashboardDataV2: jest.fn(),
-}));
-jest.mock('api/dashboard/public/getPublicDashboardData', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-const mockV2 = getPublicDashboardDataV2 as jest.Mock;
-const mockV1 = getPublicDashboardDataAPI as jest.Mock;
-
-const wrapper = ({ children }: { children: ReactNode }): JSX.Element => {
-	const client = new QueryClient({
-		defaultOptions: { queries: { retry: false } },
-	});
-	return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
-};
-
-// A schema mismatch on the v2 endpoint surfaces as an AxiosError with HTTP 501 and this
-// error code; anything else must NOT trigger the v1 fallback.
-const schemaMismatchError = {
-	isAxiosError: true,
-	response: {
-		status: 501,
-		data: { error: { code: 'dashboard_invalid_data', message: 'not in v6' } },
-	},
-};
-
-describe('useGetResolvedPublicDashboard', () => {
-	beforeEach(() => {
-		mockV2.mockReset();
-		mockV1.mockReset();
-	});
-
-	it('returns the v2 model when the v2 endpoint succeeds and never calls v1', async () => {
-		mockV2.mockResolvedValue({ status: 'success', data: { dashboard: {} } });
-
-		const { result } = renderHook(() => useGetResolvedPublicDashboard('id-1'), {
-			wrapper,
-		});
-
-		await waitFor(() => expect(result.current.isSuccess).toBe(true));
-		expect(result.current.data?.schema).toBe(PublicDashboardSchema.V2);
-		expect(mockV2).toHaveBeenCalledWith({ id: 'id-1' });
-		expect(mockV1).not.toHaveBeenCalled();
-	});
-
-	it('falls back to v1 when the v2 endpoint reports a schema mismatch', async () => {
-		mockV2.mockRejectedValue(schemaMismatchError);
-		mockV1.mockResolvedValue({
-			httpStatusCode: 200,
-			data: { dashboard: { data: { title: 'v1' } } },
-		});
-
-		const { result } = renderHook(() => useGetResolvedPublicDashboard('id-2'), {
-			wrapper,
-		});
-
-		await waitFor(() => expect(result.current.isSuccess).toBe(true));
-		expect(result.current.data?.schema).toBe(PublicDashboardSchema.V1);
-		expect(mockV1).toHaveBeenCalledWith({ id: 'id-2' });
-	});
-
-	it('surfaces a non-schema-mismatch v2 error without falling back to v1', async () => {
-		mockV2.mockRejectedValue({
-			isAxiosError: true,
-			response: { status: 500, data: { error: { code: 'internal' } } },
-		});
-
-		const { result } = renderHook(() => useGetResolvedPublicDashboard('id-3'), {
-			wrapper,
-		});
-
-		await waitFor(() => expect(result.current.isError).toBe(true));
-		expect(mockV1).not.toHaveBeenCalled();
-	});
-
-	it('does not fetch without an id', () => {
-		renderHook(() => useGetResolvedPublicDashboard(''), { wrapper });
-		expect(mockV2).not.toHaveBeenCalled();
-		expect(mockV1).not.toHaveBeenCalled();
-	});
-});
--- a/frontend/src/hooks/dashboard/useGetResolvedPublicDashboard.ts
+++ b/frontend/src/hooks/dashboard/useGetResolvedPublicDashboard.ts
@@ -1,57 +0,0 @@
-import { getPublicDashboardDataV2 } from 'api/generated/services/dashboard';
-import { DashboardtypesGettablePublicDashboardDataV2DTO } from 'api/generated/services/sigNoz.schemas';
-import getPublicDashboardDataAPI from 'api/dashboard/public/getPublicDashboardData';
-import { AxiosError, isAxiosError } from 'axios';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useQuery, UseQueryResult } from 'react-query';
-import { ErrorV2Resp } from 'types/api';
-import { PublicDashboardDataProps } from 'types/api/dashboard/public/get';
-
-export enum PublicDashboardSchema {
-	V1 = 'v1',
-	V2 = 'v2',
-}
-
-export type ResolvedPublicDashboard =
-	| {
-			schema: PublicDashboardSchema.V2;
-			data: DashboardtypesGettablePublicDashboardDataV2DTO;
-	  }
-	| { schema: PublicDashboardSchema.V1; data: PublicDashboardDataProps };
-
-// The v2 endpoint rejects non-v6 rows with this code — our signal that it's a v1 dashboard.
-const V2_SCHEMA_MISMATCH_CODE = 'dashboard_invalid_data';
-
-function isV2SchemaMismatch(error: unknown): boolean {
-	if (!isAxiosError(error)) {
-		return false;
-	}
-	const { response } = error as AxiosError<ErrorV2Resp>;
-	return response?.data?.error?.code === V2_SCHEMA_MISMATCH_CODE;
-}
-
-// Probe v2 first, fall back to v1 only on a schema mismatch. v1-first is unsafe: it 200s for a
-// v2 dashboard with queries un-redacted. Other v2 errors re-throw rather than mis-render as v1.
-async function resolvePublicDashboard(
-	id: string,
-): Promise<ResolvedPublicDashboard> {
-	try {
-		const v2 = await getPublicDashboardDataV2({ id });
-		return { schema: PublicDashboardSchema.V2, data: v2.data };
-	} catch (error) {
-		if (!isV2SchemaMismatch(error)) {
-			throw error;
-		}
-		const v1 = await getPublicDashboardDataAPI({ id });
-		return { schema: PublicDashboardSchema.V1, data: v1.data };
-	}
-}
-
-export const useGetResolvedPublicDashboard = (
-	id: string,
-): UseQueryResult<ResolvedPublicDashboard, Error> =>
-	useQuery<ResolvedPublicDashboard, Error>({
-		queryFn: () => resolvePublicDashboard(id),
-		queryKey: [REACT_QUERY_KEY.GET_PUBLIC_DASHBOARD_RESOLVED, id],
-		enabled: !!id,
-	});
--- a/frontend/src/pages/AllErrors/AllErrors.styles.scss
+++ b/frontend/src/pages/AllErrors/AllErrors.styles.scss
@@ -20,12 +20,23 @@
 	}

 	&.filter-visible {
+		// Width is owned by ResizableBox (inline style); this section is the
+		// ResizableBox root, so it stays position: relative for the drag handle.
 		.all-errors-quick-filter-section {
-			width: 260px;
+			.resizable-box__content {
+				display: flex;
+				flex-direction: column;
+			}
+
+			.quick-filters-container {
+				flex: 1;
+				min-height: 0;
+			}
 		}

 		.all-errors-right-section {
-			width: calc(100% - 260px);
+			flex: 1;
+			min-width: 0;
 		}
 	}
 }
--- a/frontend/src/pages/AllErrors/index.tsx
+++ b/frontend/src/pages/AllErrors/index.tsx
@@ -18,12 +18,18 @@ import Toolbar from 'container/Toolbar/Toolbar';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';

 import { routes } from './config';
 import { useAllErrorsQueryState } from './QueryStateContext';

 import './AllErrors.styles.scss';

+const QUICK_FILTERS_DEFAULT_WIDTH = 260;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function AllErrors(): JSX.Element {
 	const { pathname } = useLocation();
 	const { handleRunQuery } = useQueryBuilder();
@@ -55,17 +61,38 @@ function AllErrors(): JSX.Element {
 		setShowFilters((prev) => !prev);
 	};

+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_EXCEPTIONS,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	return (
 		<div className={cx('all-errors-page', showFilters ? 'filter-visible' : '')}>
 			{showFilters && (
-				<section className={cx('all-errors-quick-filter-section')}>
+				<ResizableBox
+					handle="right"
+					defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+					initialWidth={quickFiltersInitialWidth}
+					minWidth={QUICK_FILTERS_MIN_WIDTH}
+					maxWidth={QUICK_FILTERS_MAX_WIDTH}
+					onResize={persistQuickFiltersWidth}
+					resetToDefaultOnDoubleClick
+					withHandle
+					className="all-errors-quick-filter-section"
+					handleTestId="quick-filters-resize-handle"
+				>
 					<QuickFilters
 						className="qf-exceptions"
 						source={QuickFiltersSource.EXCEPTIONS}
 						signal={SignalType.EXCEPTIONS}
 						handleFilterVisibilityChange={handleFilterVisibilityChange}
 					/>
-				</section>
+				</ResizableBox>
 			)}
 			<section
 				className={cx(
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useGetQueryRangeV5.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useGetQueryRangeV5.ts
@@ -20,10 +20,7 @@ export interface UseGetQueryRangeV5Args {
 * The retry callback gets the raw AxiosError this path rejects with (not yet normalized to
 * APIError — that happens later at the display boundary), so inspect it at the axios level.
 */
-export function retryUnlessClientError(
-	failureCount: number,
-	error: Error,
-): boolean {
+function retryUnlessClientError(failureCount: number, error: Error): boolean {
 	if (isAxiosError(error)) {
 		if (error.code === 'ERR_CANCELED') {
 			return false;
--- a/frontend/src/pages/LogsExplorer/LogsExplorer.styles.scss
+++ b/frontend/src/pages/LogsExplorer/LogsExplorer.styles.scss
@@ -41,15 +41,18 @@
 	}

 	&.filter-visible {
+		// Width is owned by ResizableBox (inline style); this section is the
+		// ResizableBox root, so it stays position: relative for the drag handle.
 		.log-quick-filter-left-section {
-			width: 260px;
 			height: 100%;
 			overflow: visible;
 			min-height: 0;
-			position: relative;
 			z-index: 2;
-			display: flex;
-			flex-direction: column;
+
+			.resizable-box__content {
+				display: flex;
+				flex-direction: column;
+			}

 			.quick-filters-container {
 				flex: 1;
@@ -58,7 +61,9 @@
 		}

 		.log-module-right-section {
-			width: calc(100% - 260px);
+			flex: 1;
+			width: auto;
+			min-width: 0;
 		}
 	}
 }
--- a/frontend/src/pages/LogsExplorer/index.tsx
+++ b/frontend/src/pages/LogsExplorer/index.tsx
@@ -26,6 +26,8 @@ import {
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { defaultTo, isEmpty, isNull } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { EventSourceProvider } from 'providers/EventSource';
 import { Warning } from 'types/api';
 import { DataSource } from 'types/common/queryBuilder';
@@ -44,9 +46,23 @@ import { ExplorerViews } from './utils';

 import './LogsExplorer.styles.scss';

+const QUICK_FILTERS_DEFAULT_WIDTH = 260;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function LogsExplorer(): JSX.Element {
 	const [showLiveLogs, setShowLiveLogs] = useState<boolean>(false);

+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_LOGS,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	// Get panel type from URL
 	const panelTypesFromUrl = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);

@@ -226,14 +242,25 @@ function LogsExplorer(): JSX.Element {
 					className={cx('logs-module-page', showFilters ? 'filter-visible' : '')}
 				>
 					{showFilters && (
-						<section className={cx('log-quick-filter-left-section')}>
+						<ResizableBox
+							handle="right"
+							defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+							initialWidth={quickFiltersInitialWidth}
+							minWidth={QUICK_FILTERS_MIN_WIDTH}
+							maxWidth={QUICK_FILTERS_MAX_WIDTH}
+							onResize={persistQuickFiltersWidth}
+							resetToDefaultOnDoubleClick
+							withHandle
+							className="log-quick-filter-left-section"
+							handleTestId="quick-filters-resize-handle"
+						>
 							<QuickFilters
 								className="qf-logs-explorer"
 								signal={SignalType.LOGS}
 								source={QuickFiltersSource.LOGS_EXPLORER}
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
 							/>
-						</section>
+						</ResizableBox>
 					)}
 					<section className={cx('log-module-right-section')}>
 						<Toolbar
--- a/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicAutoRefresh/PublicAutoRefresh.module.scss
+++ b/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicAutoRefresh/PublicAutoRefresh.module.scss
@@ -1,23 +0,0 @@
-// Mirrors `.refresh-actions` from DateTimeSelectionV2: one bordered, rounded container
-// holding borderless buttons split by a divider.
-.refreshActions {
-	display: flex;
-	flex-direction: row;
-	border-radius: 2px;
-	border: 1px solid var(--l2-border);
-	background: var(--l2-background);
-
-	.refreshButton {
-		display: flex;
-		border-right: 1px solid var(--l2-border);
-	}
-
-	:global(.ant-btn) {
-		display: flex;
-		padding: 4px 8px;
-		align-items: center;
-		box-shadow: none;
-		border: none;
-		background: transparent;
-	}
-}
--- a/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicAutoRefresh/PublicAutoRefresh.tsx
+++ b/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicAutoRefresh/PublicAutoRefresh.tsx
@@ -1,88 +0,0 @@
-import { Check, ChevronDown, RefreshCw } from '@signozhq/icons';
-import { Checkbox } from '@signozhq/ui/checkbox';
-import { Typography } from '@signozhq/ui/typography';
-import { Button, Popover } from 'antd';
-import { refreshIntervalOptions } from 'container/TopNav/AutoRefreshV2/constants';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import styles from './PublicAutoRefresh.module.scss';
-
-// Reuse the app-wide auto-refresh popover styling.
-import 'container/TopNav/AutoRefreshV2/AutoRefreshV2.styles.scss';
-
-interface PublicAutoRefreshProps {
-	enabled: boolean;
-	/** Selected interval key, e.g. `30s`. */
-	interval: string;
-	disabled?: boolean;
-	onToggle: (enabled: boolean) => void;
-	onIntervalChange: (key: string) => void;
-	onRefresh: () => void;
-}
-
-// Prop-driven mirror of the app's refresh + auto-refresh cluster (the public viewer owns its
-// own time window, not Redux global time).
-function PublicAutoRefresh({
-	enabled,
-	interval,
-	disabled = false,
-	onToggle,
-	onIntervalChange,
-	onRefresh,
-}: PublicAutoRefreshProps): JSX.Element {
-	return (
-		<div className={styles.refreshActions}>
-			<div className={styles.refreshButton}>
-				<Button
-					icon={<RefreshCw size={16} />}
-					onClick={onRefresh}
-					title="Refresh"
-					data-testid="public-dashboard-refresh"
-				/>
-			</div>
-			<Popover
-				getPopupContainer={popupContainer}
-				placement="bottomRight"
-				rootClassName="auto-refresh-root"
-				trigger={['click']}
-				content={
-					<div className="auto-refresh-menu">
-						<Checkbox
-							onChange={(value): void => onToggle(value === true)}
-							value={enabled}
-							disabled={disabled}
-							className="auto-refresh-checkbox"
-						>
-							Auto Refresh
-						</Checkbox>
-						<Typography.Text disabled={disabled} className="refresh-interval-text">
-							Refresh Interval
-						</Typography.Text>
-						{refreshIntervalOptions
-							.filter((option) => option.label !== 'off')
-							.map((option) => (
-								<Button
-									type="text"
-									className="refresh-interval-btns"
-									key={option.label + option.value}
-									onClick={(): void => onIntervalChange(option.key)}
-								>
-									{option.label}
-									{option.key === interval && enabled && <Check size={14} />}
-								</Button>
-							))}
-					</div>
-				}
-			>
-				<Button
-					title="Set auto refresh"
-					data-testid="public-dashboard-auto-refresh"
-				>
-					<ChevronDown size={14} />
-				</Button>
-			</Popover>
-		</div>
-	);
-}
-
-export default PublicAutoRefresh;
--- a/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicAutoRefresh/tests/PublicAutoRefresh.test.tsx
+++ b/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicAutoRefresh/tests/PublicAutoRefresh.test.tsx
@@ -1,44 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import PublicAutoRefresh from '../PublicAutoRefresh';
-
-const props = {
-	enabled: false,
-	interval: '30s',
-	onToggle: jest.fn(),
-	onIntervalChange: jest.fn(),
-	onRefresh: jest.fn(),
-};
-
-describe('PublicAutoRefresh', () => {
-	beforeEach(() => jest.clearAllMocks());
-
-	it('renders the refresh and auto-refresh controls', () => {
-		render(<PublicAutoRefresh {...props} />);
-		expect(screen.getByTestId('public-dashboard-refresh')).toBeInTheDocument();
-		expect(
-			screen.getByTestId('public-dashboard-auto-refresh'),
-		).toBeInTheDocument();
-	});
-
-	it('calls onRefresh when the refresh button is clicked', async () => {
-		render(<PublicAutoRefresh {...props} />);
-		await userEvent.click(screen.getByTestId('public-dashboard-refresh'));
-		expect(props.onRefresh).toHaveBeenCalledTimes(1);
-	});
-
-	it('changes the interval from the menu', async () => {
-		render(<PublicAutoRefresh {...props} />);
-		await userEvent.click(screen.getByTestId('public-dashboard-auto-refresh'));
-		await userEvent.click(await screen.findByText('5 seconds'));
-		expect(props.onIntervalChange).toHaveBeenCalledWith('5s');
-	});
-
-	it('toggles auto-refresh from the menu', async () => {
-		render(<PublicAutoRefresh {...props} />);
-		await userEvent.click(screen.getByTestId('public-dashboard-auto-refresh'));
-		await userEvent.click(await screen.findByRole('checkbox'));
-		expect(props.onToggle).toHaveBeenCalledWith(true);
-	});
-});
--- a/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicDashboardV2.module.scss
+++ b/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicDashboardV2.module.scss
@@ -1,70 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
-	background: var(--l0-background);
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 16px;
-	padding: 12px 16px;
-	border-bottom: 1px solid var(--l2-border);
-}
-
-.headerLeft {
-	display: flex;
-	align-items: center;
-	gap: 16px;
-	min-width: 0;
-}
-
-.brand {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.brandLogo {
-	height: 24px;
-	width: 24px;
-}
-
-.brandName {
-	font-weight: 600;
-}
-
-.title {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	color: var(--text-vanilla-400);
-}
-
-.headerRight {
-	display: flex;
-	align-items: center;
-	gap: 12px;
-}
-
-.content {
-	flex: 1;
-	overflow-y: auto;
-	padding: 8px;
-}
-
-.section {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-	margin-bottom: 8px;
-}
-
-.sectionTitle {
-	padding: 8px 4px 0;
-	font-weight: 600;
-	color: var(--text-vanilla-400);
-}
--- a/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicDashboardV2.tsx
+++ b/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicDashboardV2.tsx
@@ -1,159 +0,0 @@
-import type { DashboardtypesGettablePublicDashboardDataV2DTO } from 'api/generated/services/sigNoz.schemas';
-import { Typography } from '@signozhq/ui/typography';
-import { refreshIntervalOptions } from 'container/TopNav/AutoRefreshV2/constants';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-import type {
-	CustomTimeType,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import GetMinMax from 'lib/getMinMax';
-import { layoutsToSections } from 'pages/DashboardPageV2/DashboardContainer/utils';
-import { useMemo, useState } from 'react';
-import { useInterval } from 'react-use';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
-
-import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
-
-import PublicAutoRefresh from './PublicAutoRefresh/PublicAutoRefresh';
-import PublicSectionGrid from './PublicSectionGrid/PublicSectionGrid';
-import { getStartTimeAndEndTimeFromTimeRange } from './utils';
-import styles from './PublicDashboardV2.module.scss';
-
-interface PublicDashboardV2Props {
-	publicDashboardId: string;
-	data: DashboardtypesGettablePublicDashboardDataV2DTO;
-}
-
-// Read-only viewer for a v2 (Perses-spec) public dashboard; reuses the V2 panel renderers.
-// Variables aren't rendered — the public endpoint doesn't substitute them.
-function PublicDashboardV2({
-	publicDashboardId,
-	data,
-}: PublicDashboardV2Props): JSX.Element {
-	const { dashboard, publicDashboard } = data;
-
-	const sections = useMemo(
-		() => layoutsToSections(dashboard?.spec?.layouts, dashboard?.spec?.panels),
-		[dashboard?.spec?.layouts, dashboard?.spec?.panels],
-	);
-
-	const [selectedTimeRangeLabel, setSelectedTimeRangeLabel] = useState<string>(
-		publicDashboard?.defaultTimeRange || DEFAULT_TIME_RANGE,
-	);
-	const [selectedTimeRange, setSelectedTimeRange] = useState(() =>
-		getStartTimeAndEndTimeFromTimeRange(
-			publicDashboard?.defaultTimeRange || DEFAULT_TIME_RANGE,
-		),
-	);
-
-	const isTimeRangeEnabled = publicDashboard?.timeRangeEnabled || false;
-
-	const handleTimeChange = (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	): void => {
-		if (dateTimeRange) {
-			setSelectedTimeRange({
-				startTime: Math.floor(dateTimeRange[0] / 1000),
-				endTime: Math.floor(dateTimeRange[1] / 1000),
-			});
-		} else if (interval !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(interval);
-			setSelectedTimeRange({
-				startTime: Math.floor(minTime / NANO_SECOND_MULTIPLIER / 1000),
-				endTime: Math.floor(maxTime / NANO_SECOND_MULTIPLIER / 1000),
-			});
-		}
-		setSelectedTimeRangeLabel(interval as string);
-	};
-
-	const [autoRefreshEnabled, setAutoRefreshEnabled] = useState<boolean>(false);
-	const [autoRefreshInterval, setAutoRefreshInterval] = useState<string>('30s');
-
-	// Auto-refresh applies only to a rolling relative range, not a fixed custom window.
-	const isAutoRefreshPaused = selectedTimeRangeLabel === 'custom';
-	const refreshIntervalMs = useMemo(
-		() =>
-			autoRefreshEnabled
-				? refreshIntervalOptions.find(
-						(option) => option.key === autoRefreshInterval,
-					)?.value || 0
-				: 0,
-		[autoRefreshEnabled, autoRefreshInterval],
-	);
-
-	useInterval(
-		() => handleTimeChange(selectedTimeRangeLabel as Time),
-		isAutoRefreshPaused || refreshIntervalMs === 0 ? null : refreshIntervalMs,
-	);
-
-	const handleRefresh = (): void =>
-		handleTimeChange(selectedTimeRangeLabel as Time);
-
-	const startMs = selectedTimeRange.startTime * 1000;
-	const endMs = selectedTimeRange.endTime * 1000;
-
-	return (
-		<div className={styles.container}>
-			<div className={styles.header}>
-				<div className={styles.headerLeft}>
-					<div className={styles.brand}>
-						<img src={signozBrandLogoUrl} alt="SigNoz" className={styles.brandLogo} />
-						<Typography className={styles.brandName}>SigNoz</Typography>
-					</div>
-					<Typography.Text className={styles.title}>
-						{dashboard?.spec?.display?.name}
-					</Typography.Text>
-				</div>
-
-				{isTimeRangeEnabled && (
-					<div className={styles.headerRight}>
-						<PublicAutoRefresh
-							enabled={autoRefreshEnabled}
-							interval={autoRefreshInterval}
-							disabled={isAutoRefreshPaused}
-							onToggle={setAutoRefreshEnabled}
-							onIntervalChange={setAutoRefreshInterval}
-							onRefresh={handleRefresh}
-						/>
-						<DateTimeSelectionV2
-							showAutoRefresh={false}
-							showRefreshText={false}
-							hideShareModal
-							onTimeChange={handleTimeChange}
-							defaultRelativeTime={publicDashboard?.defaultTimeRange as Time}
-							isModalTimeSelection
-							modalSelectedInterval={selectedTimeRangeLabel as Time}
-							disableUrlSync
-							showRecentlyUsed={false}
-							modalInitialStartTime={startMs}
-							modalInitialEndTime={endMs}
-						/>
-					</div>
-				)}
-			</div>
-
-			<div className={styles.content}>
-				{sections.map((section) => (
-					<section key={section.id} className={styles.section}>
-						{section.title && (
-							<Typography.Text className={styles.sectionTitle}>
-								{section.title}
-							</Typography.Text>
-						)}
-						<PublicSectionGrid
-							items={section.items}
-							publicDashboardId={publicDashboardId}
-							startMs={startMs}
-							endMs={endMs}
-							isVisible
-						/>
-					</section>
-				))}
-			</div>
-		</div>
-	);
-}
-
-export default PublicDashboardV2;
--- a/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicPanel/PublicPanel.module.scss
+++ b/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicPanel/PublicPanel.module.scss
@@ -1,10 +0,0 @@
-.panel {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	overflow: hidden;
-}
--- a/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicPanel/PublicPanel.tsx
+++ b/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicPanel/PublicPanel.tsx
@@ -1,78 +0,0 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { noop } from 'lodash-es';
-import PanelBody from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody';
-import PanelHeader from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
-import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
-
-import { usePublicPanelQuery } from '../hooks/usePublicPanelQuery';
-import styles from './PublicPanel.module.scss';
-
-interface PublicPanelProps {
-	panel: DashboardtypesPanelDTO;
-	/** Panel key in `spec.panels` — addresses the panel on the public endpoint. */
-	panelKey: string;
-	publicDashboardId: string;
-	/** Epoch milliseconds. */
-	startMs: number;
-	/** Epoch milliseconds. */
-	endMs: number;
-	/** True once the panel is on screen — gates the fetch. */
-	isVisible?: boolean;
-}
-
-const PUBLIC_DASHBOARD_PREFERENCE: DashboardPreference = {
-	syncMode: DashboardCursorSync.None,
-};
-
-// Read-only v2 public panel: reuses the V2 header/body renderers with interactions disabled.
-function PublicPanel({
-	panel,
-	panelKey,
-	publicDashboardId,
-	startMs,
-	endMs,
-	isVisible,
-}: PublicPanelProps): JSX.Element {
-	const panelDefinition = getPanelDefinition(panel.spec.plugin.kind);
-
-	const { data, isFetching, isPreviousData, error, refetch } =
-		usePublicPanelQuery({
-			panel,
-			panelKey,
-			publicDashboardId,
-			startMs,
-			endMs,
-			enabled: isVisible !== false,
-		});
-
-	return (
-		<div className={styles.panel} data-panel-root={panelKey}>
-			<PanelHeader
-				panelId={panelKey}
-				panel={panel}
-				data={data}
-				isFetching={isFetching}
-				error={error}
-				warning={data.response?.data?.warning}
-				hideActions
-			/>
-			<PanelBody
-				panelDefinition={panelDefinition}
-				panel={panel}
-				panelId={panelKey}
-				data={data}
-				isFetching={isFetching}
-				isPreviousData={isPreviousData}
-				error={error}
-				refetch={refetch}
-				onDragSelect={noop}
-				dashboardPreference={PUBLIC_DASHBOARD_PREFERENCE}
-				enableDrillDown={false}
-			/>
-		</div>
-	);
-}
-
-export default PublicPanel;
--- a/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicPanel/tests/PublicPanel.test.tsx
+++ b/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicPanel/tests/PublicPanel.test.tsx
@@ -1,108 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { usePublicPanelQuery } from '../../hooks/usePublicPanelQuery';
-import PublicPanel from '../PublicPanel';
-
-jest.mock('../../hooks/usePublicPanelQuery', () => ({
-	usePublicPanelQuery: jest.fn(),
-}));
-
-// Stub the reused V2 renderers so the test targets PublicPanel's own wiring, not uPlot/timezone.
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader',
-	() => ({
-		__esModule: true,
-		default: ({ hideActions }: { hideActions?: boolean }): JSX.Element => (
-			<div data-testid="panel-header" data-hide-actions={String(!!hideActions)} />
-		),
-	}),
-);
-jest.mock(
-	'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody',
-	() => ({
-		__esModule: true,
-		default: ({
-			enableDrillDown,
-			panelId,
-		}: {
-			enableDrillDown?: boolean;
-			panelId: string;
-		}): JSX.Element => (
-			<div
-				data-testid="panel-body"
-				data-drilldown={String(!!enableDrillDown)}
-				data-panel-id={panelId}
-			/>
-		),
-	}),
-);
-
-const mockQuery = usePublicPanelQuery as jest.Mock;
-
-const queryResult = {
-	data: { response: undefined, requestPayload: undefined, legendMap: {} },
-	isLoading: false,
-	isFetching: false,
-	isPreviousData: false,
-	error: null,
-	refetch: jest.fn(),
-	cancelQuery: jest.fn(),
-	pagination: undefined,
-};
-
-const timeseriesPanel = {
-	kind: 'Panel',
-	spec: {
-		display: { name: 'panel-1' },
-		plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
-		queries: [],
-	},
-} as unknown as DashboardtypesPanelDTO;
-
-const commonProps = {
-	panelKey: 'p1',
-	publicDashboardId: 'pub-1',
-	startMs: 1000,
-	endMs: 2000,
-};
-
-describe('PublicPanel', () => {
-	beforeEach(() => {
-		mockQuery.mockReset();
-		mockQuery.mockReturnValue(queryResult);
-	});
-
-	it('renders the reused header/body read-only (hideActions, no drill-down)', () => {
-		render(<PublicPanel panel={timeseriesPanel} {...commonProps} />);
-
-		expect(screen.getByTestId('panel-header')).toHaveAttribute(
-			'data-hide-actions',
-			'true',
-		);
-		const body = screen.getByTestId('panel-body');
-		expect(body).toHaveAttribute('data-drilldown', 'false');
-		expect(body).toHaveAttribute('data-panel-id', 'p1');
-	});
-
-	it('fetches by panel key and time', () => {
-		render(<PublicPanel panel={timeseriesPanel} {...commonProps} />);
-		expect(mockQuery).toHaveBeenCalledWith(
-			expect.objectContaining({
-				panelKey: 'p1',
-				publicDashboardId: 'pub-1',
-				startMs: 1000,
-				endMs: 2000,
-			}),
-		);
-	});
-
-	it('gates the fetch when off screen', () => {
-		render(
-			<PublicPanel panel={timeseriesPanel} {...commonProps} isVisible={false} />,
-		);
-		expect(mockQuery).toHaveBeenCalledWith(
-			expect.objectContaining({ enabled: false }),
-		);
-	});
-});
--- a/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicSectionGrid/PublicSectionGrid.tsx
+++ b/frontend/src/pages/PublicDashboard/PublicDashboardV2/PublicSectionGrid/PublicSectionGrid.tsx
@@ -1,66 +0,0 @@
-import type { GridItem } from 'pages/DashboardPageV2/DashboardContainer/utils';
-import GridLayout, { type Layout, WidthProvider } from 'react-grid-layout';
-
-import PublicPanel from '../PublicPanel/PublicPanel';
-
-const ResponsiveGridLayout = WidthProvider(GridLayout);
-
-interface PublicSectionGridProps {
-	items: GridItem[];
-	publicDashboardId: string;
-	/** Epoch milliseconds. */
-	startMs: number;
-	/** Epoch milliseconds. */
-	endMs: number;
-	/** True once the section is on screen — forwarded to gate panel fetches. */
-	isVisible?: boolean;
-}
-
-// Fixed (non-editable) grid for one section of a v2 public dashboard.
-function PublicSectionGrid({
-	items,
-	publicDashboardId,
-	startMs,
-	endMs,
-	isVisible,
-}: PublicSectionGridProps): JSX.Element {
-	const layout: Layout[] = items.map((item) => ({
-		i: item.id,
-		x: item.x,
-		y: item.y,
-		w: item.width,
-		h: item.height,
-		static: true,
-	}));
-
-	return (
-		<ResponsiveGridLayout
-			cols={12}
-			rowHeight={45}
-			autoSize
-			useCSSTransforms
-			layout={layout}
-			isDraggable={false}
-			isResizable={false}
-			margin={[8, 8]}
-		>
-			{items.map((item) => (
-				// Empty cell for an orphan layout item (panel id missing from the map).
-				<div key={item.id}>
-					{item.panel && (
-						<PublicPanel
-							panel={item.panel}
-							panelKey={item.id}
-							publicDashboardId={publicDashboardId}
-							startMs={startMs}
-							endMs={endMs}
-							isVisible={isVisible}
-						/>
-					)}
-				</div>
-			))}
-		</ResponsiveGridLayout>
-	);
-}
-
-export default PublicSectionGrid;
--- a/frontend/src/pages/PublicDashboard/PublicDashboardV2/tests/PublicDashboardV2.test.tsx
+++ b/frontend/src/pages/PublicDashboard/PublicDashboardV2/tests/PublicDashboardV2.test.tsx
@@ -1,101 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import type { DashboardtypesGettablePublicDashboardDataV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import PublicDashboardV2 from '../PublicDashboardV2';
-
-const mockGrid = jest.fn();
-
-jest.mock('../PublicSectionGrid/PublicSectionGrid', () => ({
-	__esModule: true,
-	default: (props: unknown): JSX.Element => {
-		mockGrid(props);
-		return <div data-testid="public-section-grid" />;
-	},
-}));
-jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="datetime-selection" />,
-}));
-jest.mock('../PublicAutoRefresh/PublicAutoRefresh', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="auto-refresh" />,
-}));
-
-function buildData(
-	timeRangeEnabled: boolean,
-): DashboardtypesGettablePublicDashboardDataV2DTO {
-	return {
-		dashboard: {
-			schemaVersion: 'v6',
-			spec: {
-				display: { name: 'My V2 Dashboard' },
-				layouts: [
-					{
-						kind: 'Grid',
-						spec: {
-							display: { title: 'Section A' },
-							items: [
-								{
-									x: 0,
-									y: 0,
-									width: 6,
-									height: 6,
-									content: { $ref: '#/spec/panels/p1' },
-								},
-							],
-						},
-					},
-				],
-				panels: {
-					p1: {
-						kind: 'Panel',
-						spec: {
-							display: { name: 'p1' },
-							plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
-							queries: [],
-						},
-					},
-				},
-				variables: [],
-			},
-		},
-		publicDashboard: { timeRangeEnabled, defaultTimeRange: '30m' },
-	} as unknown as DashboardtypesGettablePublicDashboardDataV2DTO;
-}
-
-describe('PublicDashboardV2', () => {
-	beforeEach(() => mockGrid.mockReset());
-
-	it('renders the dashboard title, section title, and a grid per section', () => {
-		render(
-			<PublicDashboardV2 publicDashboardId="pub-1" data={buildData(true)} />,
-		);
-
-		expect(screen.getByText('My V2 Dashboard')).toBeInTheDocument();
-		expect(screen.getByText('Section A')).toBeInTheDocument();
-		expect(screen.getByTestId('public-section-grid')).toBeInTheDocument();
-
-		const gridProps = mockGrid.mock.calls[0][0];
-		expect(gridProps.publicDashboardId).toBe('pub-1');
-		expect(gridProps.items).toHaveLength(1);
-		expect(gridProps.items[0].id).toBe('p1');
-		expect(typeof gridProps.startMs).toBe('number');
-		expect(typeof gridProps.endMs).toBe('number');
-		// Times are handed to the endpoint in milliseconds.
-		expect(gridProps.endMs).toBeGreaterThan(gridProps.startMs);
-	});
-
-	it('shows the time controls only when the publisher enabled the time range', () => {
-		const { rerender } = render(
-			<PublicDashboardV2 publicDashboardId="pub-1" data={buildData(true)} />,
-		);
-		expect(screen.getByTestId('datetime-selection')).toBeInTheDocument();
-		expect(screen.getByTestId('auto-refresh')).toBeInTheDocument();
-
-		rerender(
-			<PublicDashboardV2 publicDashboardId="pub-1" data={buildData(false)} />,
-		);
-		expect(screen.queryByTestId('datetime-selection')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('auto-refresh')).not.toBeInTheDocument();
-	});
-});
--- a/frontend/src/pages/PublicDashboard/PublicDashboardV2/hooks/tests/usePublicPanelQuery.test.tsx
+++ b/frontend/src/pages/PublicDashboard/PublicDashboardV2/hooks/tests/usePublicPanelQuery.test.tsx
@@ -1,106 +0,0 @@
-import { renderHook, waitFor } from '@testing-library/react';
-import { getPublicDashboardPanelQueryRangeV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { ReactNode } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-
-import { usePublicPanelQuery } from '../usePublicPanelQuery';
-
-jest.mock('api/generated/services/dashboard', () => ({
-	getPublicDashboardPanelQueryRangeV2: jest.fn(),
-}));
-
-const mockFetch = getPublicDashboardPanelQueryRangeV2 as jest.Mock;
-
-const wrapper = ({ children }: { children: ReactNode }): JSX.Element => {
-	const client = new QueryClient({
-		defaultOptions: { queries: { retry: false } },
-	});
-	return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
-};
-
-// A timeseries panel with a single runnable builder query (non-metrics signal → runnable).
-const panel = {
-	kind: 'Panel',
-	spec: {
-		display: { name: 'panel-1' },
-		plugin: { kind: 'signoz/TimeSeriesPanel', spec: { visualization: {} } },
-		queries: [
-			{
-				kind: 'time_series',
-				spec: {
-					name: 'A',
-					plugin: {
-						kind: 'signoz/BuilderQuery',
-						spec: { name: 'A', signal: 'logs', legend: 'My legend' },
-					},
-				},
-			},
-		],
-	},
-} as unknown as DashboardtypesPanelDTO;
-
-const args = {
-	panel,
-	panelKey: 'panel-1',
-	publicDashboardId: 'pub-1',
-	startMs: 1000,
-	endMs: 2000,
-};
-
-describe('usePublicPanelQuery', () => {
-	beforeEach(() => mockFetch.mockReset());
-
-	it('fetches by panel key + time and exposes the response as PanelQueryData', async () => {
-		mockFetch.mockResolvedValue({
-			status: 'success',
-			data: { type: 'time_series', data: { results: [] } },
-		});
-
-		const { result } = renderHook(() => usePublicPanelQuery(args), { wrapper });
-
-		await waitFor(() => expect(result.current.isFetching).toBe(false));
-
-		expect(mockFetch).toHaveBeenCalledWith(
-			{ id: 'pub-1', key: 'panel-1' },
-			{ startTime: '1000', endTime: '2000' },
-			expect.anything(),
-		);
-		expect(result.current.data.response?.status).toBe('success');
-		expect(result.current.data.legendMap).toStrictEqual({ A: 'My legend' });
-		expect(result.current.data.requestPayload?.start).toBe(1000);
-		expect(result.current.data.requestPayload?.end).toBe(2000);
-		// The public endpoint has no paging support.
-		expect(result.current.pagination).toBeUndefined();
-	});
-
-	it('does not fetch without a public dashboard id', () => {
-		renderHook(() => usePublicPanelQuery({ ...args, publicDashboardId: '' }), {
-			wrapper,
-		});
-		expect(mockFetch).not.toHaveBeenCalled();
-	});
-
-	it('does not fetch when the panel has no runnable queries', () => {
-		const emptyPanel = {
-			kind: 'Panel',
-			spec: {
-				display: { name: 'empty' },
-				plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
-				queries: [],
-			},
-		} as unknown as DashboardtypesPanelDTO;
-
-		renderHook(() => usePublicPanelQuery({ ...args, panel: emptyPanel }), {
-			wrapper,
-		});
-		expect(mockFetch).not.toHaveBeenCalled();
-	});
-
-	it('does not fetch when disabled', () => {
-		renderHook(() => usePublicPanelQuery({ ...args, enabled: false }), {
-			wrapper,
-		});
-		expect(mockFetch).not.toHaveBeenCalled();
-	});
-});
--- a/frontend/src/pages/PublicDashboard/PublicDashboardV2/hooks/usePublicPanelQuery.ts
+++ b/frontend/src/pages/PublicDashboard/PublicDashboardV2/hooks/usePublicPanelQuery.ts
@@ -1,136 +0,0 @@
-import { getPublicDashboardPanelQueryRangeV2 } from 'api/generated/services/dashboard';
-import type {
-	DashboardtypesPanelDTO,
-	GetPublicDashboardPanelQueryRangeV2200,
-} from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { retryUnlessClientError } from 'pages/DashboardPageV2/DashboardContainer/hooks/useGetQueryRangeV5';
-import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
-import {
-	buildQueryRangeRequest,
-	extractLegendMap,
-	hasRunnableQueries,
-} from 'pages/DashboardPageV2/DashboardContainer/queryV5/buildQueryRangeRequest';
-import type {
-	PanelQueryData,
-	PanelPagination,
-} from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-import { useCallback, useMemo } from 'react';
-import { useQuery, useQueryClient } from 'react-query';
-
-export interface UsePublicPanelQueryArgs {
-	panel: DashboardtypesPanelDTO;
-	/** Panel key in `spec.panels` — addresses the panel on the public endpoint. */
-	panelKey: string;
-	publicDashboardId: string;
-	/** Epoch milliseconds. */
-	startMs: number;
-	/** Epoch milliseconds. */
-	endMs: number;
-	/** Gate the fetch (default true). */
-	enabled?: boolean;
-}
-
-// Same shape as `usePanelQuery` so the V2 renderers consume it unchanged.
-export interface UsePublicPanelQueryResult {
-	data: PanelQueryData;
-	isLoading: boolean;
-	isFetching: boolean;
-	isPreviousData: boolean;
-	error: Error | null;
-	refetch: () => void;
-	cancelQuery: () => void;
-	/** Always undefined — the public endpoint has no paging (#5557). */
-	pagination?: PanelPagination;
-}
-
-/**
- * Fetches one v2 public panel by key + time. The public endpoint holds the query server-side
- * (no body, variables, or paging); we still build the request DTO locally so the renderers get
- * the `requestPayload`/`legendMap` they need — it is not sent.
- */
-export function usePublicPanelQuery({
-	panel,
-	panelKey,
-	publicDashboardId,
-	startMs,
-	endMs,
-	enabled = true,
-}: UsePublicPanelQueryArgs): UsePublicPanelQueryResult {
-	const fullKind = panel.spec.plugin.kind;
-	const panelType =
-		(fullKind && PANEL_KIND_TO_PANEL_TYPE[fullKind]) ?? PANEL_TYPES.TIME_SERIES;
-	const { queries } = panel.spec;
-
-	const pluginSpec = panel.spec.plugin.spec;
-	const visualization =
-		pluginSpec && 'visualization' in pluginSpec
-			? pluginSpec.visualization
-			: undefined;
-	const fillGaps = Boolean(
-		visualization && 'fillSpans' in visualization && visualization.fillSpans,
-	);
-
-	// For the renderers only — not sent to the server.
-	const requestPayload = useMemo(
-		() =>
-			buildQueryRangeRequest({
-				queries,
-				panelType,
-				startMs,
-				endMs,
-				fillGaps,
-				variables: {},
-			}),
-		[queries, panelType, startMs, endMs, fillGaps],
-	);
-
-	const legendMap = useMemo(() => extractLegendMap(queries), [queries]);
-	const runnable = useMemo(() => hasRunnableQueries(queries), [queries]);
-
-	// Redacted payloads are identical across panels — key on panel + time to avoid cache collisions.
-	const queryKey = useMemo(
-		() => [
-			REACT_QUERY_KEY.GET_PUBLIC_DASHBOARD_WIDGET_DATA,
-			publicDashboardId,
-			panelKey,
-			startMs,
-			endMs,
-		],
-		[publicDashboardId, panelKey, startMs, endMs],
-	);
-
-	const response = useQuery<GetPublicDashboardPanelQueryRangeV2200, Error>({
-		queryKey,
-		queryFn: ({ signal }) =>
-			getPublicDashboardPanelQueryRangeV2(
-				{ id: publicDashboardId, key: panelKey },
-				{ startTime: String(startMs), endTime: String(endMs) },
-				signal,
-			),
-		enabled: enabled && runnable && !!publicDashboardId && !!panelKey,
-		retry: retryUnlessClientError,
-	});
-
-	const data = useMemo<PanelQueryData>(
-		() => ({ response: response.data, requestPayload, legendMap }),
-		[response.data, requestPayload, legendMap],
-	);
-
-	const queryClient = useQueryClient();
-	const cancelQuery = useCallback((): void => {
-		void queryClient.cancelQueries(queryKey);
-	}, [queryClient, queryKey]);
-
-	return {
-		data,
-		isLoading: response.isLoading,
-		isFetching: response.isFetching,
-		isPreviousData: response.isPreviousData,
-		error: response.error ?? null,
-		refetch: response.refetch,
-		cancelQuery,
-		pagination: undefined,
-	};
-}
--- a/frontend/src/pages/PublicDashboard/PublicDashboardV2/utils.ts
+++ b/frontend/src/pages/PublicDashboard/PublicDashboardV2/utils.ts
@@ -1,31 +0,0 @@
-import dayjs from 'dayjs';
-
-const CUSTOM_TIME_REGEX = /^(\d+)([mhdw])$/;
-
-const UNIT_TO_DAYJS = {
-	m: 'minutes',
-	h: 'hours',
-	d: 'days',
-	w: 'weeks',
-} as const;
-
-// Relative range (`30m`/`6h`/`7d`/`1w`) → `{ startTime, endTime }` in unix seconds; default 30m.
-export function getStartTimeAndEndTimeFromTimeRange(timeRange: string): {
-	startTime: number;
-	endTime: number;
-} {
-	const match = timeRange.match(CUSTOM_TIME_REGEX);
-	if (match) {
-		const timeValue = parseInt(match[1] as string, 10);
-		const unit = UNIT_TO_DAYJS[match[2] as keyof typeof UNIT_TO_DAYJS];
-		return {
-			startTime: dayjs().subtract(timeValue, unit).unix(),
-			endTime: dayjs().unix(),
-		};
-	}
-
-	return {
-		startTime: dayjs().subtract(30, 'minutes').unix(),
-		endTime: dayjs().unix(),
-	};
-}
--- a/frontend/src/pages/PublicDashboard/index.tsx
+++ b/frontend/src/pages/PublicDashboard/index.tsx
@@ -1,15 +1,11 @@
 import { useParams } from 'react-router-dom';
 import { Typography } from '@signozhq/ui/typography';
-import {
-	PublicDashboardSchema,
-	useGetResolvedPublicDashboard,
-} from 'hooks/dashboard/useGetResolvedPublicDashboard';
+import { useGetPublicDashboardData } from 'hooks/dashboard/useGetPublicDashboardData';
 import { Frown } from '@signozhq/icons';

 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';

 import PublicDashboardContainer from '../../container/PublicDashboardContainer';
-import PublicDashboardV2 from './PublicDashboardV2/PublicDashboardV2';

 import './PublicDashboard.styles.scss';

@@ -18,28 +14,27 @@ function PublicDashboardPage(): JSX.Element {
 	const { dashboardId } = useParams<{ dashboardId: string }>();

 	const {
-		data: resolved,
-		isLoading,
-		isFetching,
-		isError,
-	} = useGetResolvedPublicDashboard(dashboardId || '');
+		data: publicDashboardData,
+		isLoading: isLoadingPublicDashboardData,
+		isFetching: isFetchingPublicDashboardData,
+		isError: isErrorPublicDashboardData,
+	} = useGetPublicDashboardData(dashboardId || '');

-	const isBusy = isLoading || isFetching;
+	const isLoading =
+		isLoadingPublicDashboardData || isFetchingPublicDashboardData;
+
+	const isError = isErrorPublicDashboardData;

 	return (
 		<div className="public-dashboard-page">
-			{resolved?.schema === PublicDashboardSchema.V2 && (
-				<PublicDashboardV2 publicDashboardId={dashboardId} data={resolved.data} />
-			)}
-
-			{resolved?.schema === PublicDashboardSchema.V1 && (
+			{publicDashboardData && (
 				<PublicDashboardContainer
 					publicDashboardId={dashboardId}
-					publicDashboardData={{ httpStatusCode: 200, data: resolved.data }}
+					publicDashboardData={publicDashboardData}
 				/>
 			)}

-			{isError && !isBusy && (
+			{isError && !isLoading && (
 				<div className="public-dashboard-error-container">
 					<div className="perilin-bg" />

--- a/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.module.scss
+++ b/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.module.scss
@@ -34,22 +34,6 @@
 	min-width: 0;
 }

-// Logs-tab footer. Sibling of the scrolling .panelBody inside .panel, so it's
-// a true fixed footer flush with the panel's bottom edge — always visible
-// regardless of how the body is scrolled.
-.logsFooter {
-	flex-shrink: 0;
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	// Inset to match panelBody's 12px padding so the border-top aligns with
-	// the content edges instead of bleeding to the panel border.
-	margin: 0 12px;
-	padding: 8px 0 12px;
-	border-top: 1px solid var(--l2-border);
-	background: var(--l1-background);
-}
-
 // Single scroll: when the summary sits above (non-docked modes) it scrolls away
 // and the tab section pins to the top; tab content scrolls inside `.tabsScroll`.
 .tabsSection {
--- a/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx
+++ b/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Badge } from '@signozhq/ui/badge';
 import {
 	TabsContent,
@@ -49,7 +49,6 @@ import DockModeSwitcher from './DockModeSwitcher';
 import { useSpanAttributeActions } from './hooks/useSpanAttributeActions';
 import { useTracePinnedFields } from './hooks/useTracePinnedFields';
 import Events from './Events/Events';
-import OpenInLogsExplorer from './SpanLogs/OpenInLogsExplorer';
 import SpanLogs from './SpanLogs/SpanLogs';
 import { useSpanContextLogs } from './SpanLogs/useSpanContextLogs';
 import SpanSummary from './SpanSummary';
@@ -69,9 +68,6 @@ interface SpanDetailsPanelProps {
 // dock, or a floating/right panel widened to match). ~right-dock max width.
 const WIDE_PANEL_BREAKPOINT = 720;

-// Context-log window padding around the span's trace time range.
-const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
-
 function SpanDetailsContent({
 	selectedSpan,
 	traceStartTime,
@@ -81,15 +77,12 @@ function SpanDetailsContent({
 	traceStartTime?: number;
 	traceEndTime?: number;
 }): JSX.Element {
+	const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
 	const [bodyRef, { width: bodyWidth }] = useMeasure<HTMLDivElement>();
 	const spanAttributeActions = useSpanAttributeActions();
 	const logTraceEvent = useTraceDetailLogEvent('v3', selectedSpan.trace_id);
-	// Tracked so the panel can render tab-specific chrome (the Logs footer)
-	// outside the scrolling tab content.
-	const [activeTab, setActiveTab] = useState('overview');
 	const handleTabChange = useCallback(
 		(tab: string): void => {
-			setActiveTab(tab);
 			logTraceEvent(TraceDetailEvents.SpanPanelTabChanged, {
 				[TraceDetailEventKeys.Tab]: tab,
 				[TraceDetailEventKeys.SpanId]: selectedSpan.span_id,
@@ -288,99 +281,89 @@ function SpanDetailsContent({
 	const eventsCount = selectedSpan.events?.length || 0;

 	return (
-		<>
-			<div className={styles.panelBody} ref={bodyRef}>
-				{!isWide && <div className={styles.detailsSection}>{summary}</div>}
+		<div className={styles.panelBody} ref={bodyRef}>
+			{!isWide && <div className={styles.detailsSection}>{summary}</div>}

-				<div className={styles.tabsSection}>
-					{/* Step 9: ContentTabs */}
-					<TabsRoot defaultValue="overview" onValueChange={handleTabChange}>
-						<TabsList variant="secondary">
-							<TabsTrigger value="overview" variant="secondary">
-								<Bookmark size={14} /> Overview
-							</TabsTrigger>
-							<TabsTrigger value="events" variant="secondary">
-								<ScrollText size={14} /> Events
-								{eventsCount > 0 && (
-									<Badge color="secondary" className={styles.eventsBadge}>
-										{eventsCount}
-									</Badge>
-								)}
-							</TabsTrigger>
-							<TabsTrigger value="logs" variant="secondary">
-								<List size={14} /> Logs
-							</TabsTrigger>
-							{infraMetadata && (
-								<TabsTrigger value="metrics" variant="secondary">
-									<ChartColumnBig size={14} /> Metrics
-								</TabsTrigger>
+			<div className={styles.tabsSection}>
+				{/* Step 9: ContentTabs */}
+				<TabsRoot defaultValue="overview" onValueChange={handleTabChange}>
+					<TabsList variant="secondary">
+						<TabsTrigger value="overview" variant="secondary">
+							<Bookmark size={14} /> Overview
+						</TabsTrigger>
+						<TabsTrigger value="events" variant="secondary">
+							<ScrollText size={14} /> Events
+							{eventsCount > 0 && (
+								<Badge color="secondary" className={styles.eventsBadge}>
+									{eventsCount}
+								</Badge>
 							)}
-						</TabsList>
+						</TabsTrigger>
+						<TabsTrigger value="logs" variant="secondary">
+							<List size={14} /> Logs
+						</TabsTrigger>
+						{infraMetadata && (
+							<TabsTrigger value="metrics" variant="secondary">
+								<ChartColumnBig size={14} /> Metrics
+							</TabsTrigger>
+						)}
+					</TabsList>

-						<div className={styles.tabsScroll}>
-							<TabsContent value="overview">
-								{isWide && summary}
-								<DataViewer
-									data={spanDisplayData}
-									drawerKey="trace-details"
-									prettyViewProps={{
-										showPinned: true,
-										actions: prettyViewCustomActions,
-										visibleActions: VISIBLE_ACTIONS,
-										pinnedFieldsValue,
-										onPinnedFieldsChange,
-									}}
+					<div className={styles.tabsScroll}>
+						<TabsContent value="overview">
+							{isWide && summary}
+							<DataViewer
+								data={spanDisplayData}
+								drawerKey="trace-details"
+								prettyViewProps={{
+									showPinned: true,
+									actions: prettyViewCustomActions,
+									visibleActions: VISIBLE_ACTIONS,
+									pinnedFieldsValue,
+									onPinnedFieldsChange,
+								}}
+							/>
+						</TabsContent>
+						<TabsContent value="events">
+							<Events
+								span={selectedSpan}
+								startTime={traceStartTime || 0}
+								isSearchVisible
+							/>
+						</TabsContent>
+						<TabsContent value="logs">
+							<SpanLogs
+								traceId={selectedSpan.trace_id}
+								spanId={selectedSpan.span_id}
+								timeRange={{
+									startTime: (traceStartTime || 0) - FIVE_MINUTES_IN_MS,
+									endTime: (traceEndTime || 0) + FIVE_MINUTES_IN_MS,
+								}}
+								logs={logs}
+								isLoading={isLogsLoading}
+								isError={isLogsError}
+								isFetching={isLogsFetching}
+								isLogSpanRelated={isLogSpanRelated}
+								handleExplorerPageRedirect={handleExplorerPageRedirect}
+								emptyStateConfig={!hasTraceIdLogs ? emptyLogsStateConfig : undefined}
+							/>
+						</TabsContent>
+						{infraMetadata && (
+							<TabsContent value="metrics">
+								<InfraMetrics
+									clusterName={infraMetadata.clusterName}
+									podName={infraMetadata.podName}
+									nodeName={infraMetadata.nodeName}
+									hostName={infraMetadata.hostName}
+									timestamp={infraMetadata.spanTimestamp}
+									dataSource={DataSource.TRACES}
 								/>
 							</TabsContent>
-							<TabsContent value="events">
-								<Events
-									span={selectedSpan}
-									startTime={traceStartTime || 0}
-									isSearchVisible
-								/>
-							</TabsContent>
-							<TabsContent value="logs">
-								<SpanLogs
-									traceId={selectedSpan.trace_id}
-									spanId={selectedSpan.span_id}
-									timeRange={{
-										startTime: (traceStartTime || 0) - FIVE_MINUTES_IN_MS,
-										endTime: (traceEndTime || 0) + FIVE_MINUTES_IN_MS,
-									}}
-									logs={logs}
-									isLoading={isLogsLoading}
-									isError={isLogsError}
-									isFetching={isLogsFetching}
-									isLogSpanRelated={isLogSpanRelated}
-									handleExplorerPageRedirect={handleExplorerPageRedirect}
-									emptyStateConfig={!hasTraceIdLogs ? emptyLogsStateConfig : undefined}
-								/>
-							</TabsContent>
-							{infraMetadata && (
-								<TabsContent value="metrics">
-									<InfraMetrics
-										clusterName={infraMetadata.clusterName}
-										podName={infraMetadata.podName}
-										nodeName={infraMetadata.nodeName}
-										hostName={infraMetadata.hostName}
-										timestamp={infraMetadata.spanTimestamp}
-										dataSource={DataSource.TRACES}
-									/>
-								</TabsContent>
-							)}
-						</div>
-					</TabsRoot>
-				</div>
+						)}
+					</div>
+				</TabsRoot>
 			</div>
-
-			{/* Sibling of the scrolling panelBody, so it's a true fixed footer flush
-			    with the panel's bottom edge — always visible, never scrolls. */}
-			{activeTab === 'logs' && (
-				<div className={styles.logsFooter}>
-					<OpenInLogsExplorer onClick={handleExplorerPageRedirect} />
-				</div>
-			)}
-		</>
+		</div>
 	);
 }

--- a/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanLogs/OpenInLogsExplorer.tsx
+++ b/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanLogs/OpenInLogsExplorer.tsx
@@ -1,25 +0,0 @@
-import { Button } from '@signozhq/ui/button';
-import { Compass } from '@signozhq/icons';
-
-interface OpenInLogsExplorerProps {
-	onClick: () => void;
-}
-
-// Opens the full Logs Explorer (new tab) filtered to this span's trace.
-// Placement/alignment is the caller's responsibility.
-function OpenInLogsExplorer({ onClick }: OpenInLogsExplorerProps): JSX.Element {
-	return (
-		<Button
-			variant="solid"
-			color="secondary"
-			size="md"
-			onClick={onClick}
-			prefix={<Compass size={16} />}
-			data-testid="open-in-explorer-button"
-		>
-			Open in Logs Explorer
-		</Button>
-	);
-}
-
-export default OpenInLogsExplorer;
--- a/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanLogs/SpanLogs.module.scss
+++ b/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanLogs/SpanLogs.module.scss
@@ -1,4 +1,5 @@
 .spanLogs {
+	margin-inline: var(--spacing-8);
 	height: 100%;
 	display: flex;
 	flex-direction: column;
--- a/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanLogs/tests/SpanLogs.test.tsx
+++ b/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanLogs/tests/SpanLogs.test.tsx
@@ -1,8 +1,6 @@
-import ROUTES from 'constants/routes';
 import { getEmptyLogsListConfig } from 'container/LogsExplorerList/utils';
 import { server } from 'mocks-server/server';
 import { render, screen, userEvent } from 'tests/test-utils';
-import { ILog } from 'types/api/logs/log';

 import SpanLogs from '../SpanLogs';

@@ -84,10 +82,8 @@ jest.mock('providers/preferences/context/PreferenceContextProvider', () => ({
 	),
 }));

-// Mock OverlayScrollbar (default export — needs __esModule for the interop
-// unwrap, otherwise the default import resolves to the module object).
+// Mock OverlayScrollbar
 jest.mock('components/OverlayScrollbar/OverlayScrollbar', () => ({
-	__esModule: true,
 	default: ({ children }: any): JSX.Element => (
 		<div data-testid="overlay-scrollbar">{children}</div>
 	),
@@ -114,13 +110,6 @@ jest.mock(
 const TEST_TRACE_ID = 'test-trace-id';
 const TEST_SPAN_ID = 'test-span-id';

-const sampleLog = {
-	id: 'log-1',
-	body: 'sample log body',
-	timestamp: '1640995200000',
-	spanID: TEST_SPAN_ID,
-} as unknown as ILog;
-
 const defaultProps = {
 	traceId: TEST_TRACE_ID,
 	spanId: TEST_SPAN_ID,
@@ -218,22 +207,4 @@ describe('SpanLogs', () => {

 		expect(mockHandleExplorerPageRedirect).toHaveBeenCalledTimes(1);
 	});
-
-	it('opens a new tab to Logs Explorer with the trace_id + span_id query when a log row is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<SpanLogs {...defaultProps} logs={[sampleLog]} />);
-
-		await user.click(screen.getByTestId(`raw-log-${sampleLog.id}`));
-
-		expect(mockWindowOpen).toHaveBeenCalledTimes(1);
-		const [url, target] = mockWindowOpen.mock.calls[0];
-		// Opens Logs Explorer in a new tab, filtered to this trace/span, and
-		// deep-links to the clicked log.
-		expect(url).toContain(ROUTES.LOGS_EXPLORER);
-		expect(url).toContain(TEST_TRACE_ID);
-		expect(url).toContain(TEST_SPAN_ID);
-		expect(url).toContain(sampleLog.id); // activeLogId
-		expect(target).toBe('_blank');
-	});
 });
--- a/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/tests/SpanDetailsPanel.test.tsx
+++ b/frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/tests/SpanDetailsPanel.test.tsx
@@ -1,19 +1,11 @@
 import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import ROUTES from 'constants/routes';
 import { render } from 'tests/test-utils';
 import { SpanV3 } from 'types/api/trace/getTraceV3';

 import { SpanDetailVariant } from '../constants';
 import SpanDetailsPanel from '../SpanDetailsPanel';

-// Mock window.open for the Open in Logs Explorer footer redirect.
-const mockWindowOpen = jest.fn();
-Object.defineProperty(window, 'open', {
-	value: mockWindowOpen,
-	writable: true,
-});
-
 // Placement is width-driven via useMeasure (jsdom reports 0), so we control the
 // reported width per test. `mock` prefix lets the jest.mock factory reference it.
 let mockWidth = 0;
@@ -165,42 +157,3 @@ describe('SpanDetailsPanel – tabs', () => {
 		expect(screen.getByTestId('logs-tab')).toBeInTheDocument();
 	});
 });
-
-// The footer lives on the panel body (not inside the tab content) so it stays
-// pinned to the panel's visible bottom edge; it should track the active tab.
-describe('SpanDetailsPanel – Open in Logs Explorer footer', () => {
-	beforeEach(() => {
-		mockWindowOpen.mockClear();
-	});
-
-	it('appears only while the Logs tab is active', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderPanel(400);
-
-		expect(
-			screen.queryByTestId('open-in-explorer-button'),
-		).not.toBeInTheDocument();
-
-		await user.click(screen.getByRole('tab', { name: /logs/i }));
-		expect(screen.getByTestId('open-in-explorer-button')).toBeInTheDocument();
-
-		await user.click(screen.getByRole('tab', { name: /overview/i }));
-		expect(
-			screen.queryByTestId('open-in-explorer-button'),
-		).not.toBeInTheDocument();
-	});
-
-	it('opens Logs Explorer in a new tab filtered to the span trace when clicked', async () => {
-		const user = userEvent.setup({ delay: null });
-		renderPanel(400);
-
-		await user.click(screen.getByRole('tab', { name: /logs/i }));
-		await user.click(screen.getByTestId('open-in-explorer-button'));
-
-		expect(mockWindowOpen).toHaveBeenCalledTimes(1);
-		const [url, target] = mockWindowOpen.mock.calls[0];
-		expect(url).toContain(ROUTES.LOGS_EXPLORER);
-		expect(url).toContain('trace-1');
-		expect(target).toBe('_blank');
-	});
-});
--- a/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss
+++ b/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss
@@ -76,7 +76,8 @@
 	--input-focus-border-color: var(--internal-ant-border-color-hover);

 	.filter {
-		width: 260px;
+		// Width is owned by ResizableBox (inline style).
+		flex-shrink: 0;
 		height: 100%;
 		min-height: 100vh;

@@ -84,9 +85,14 @@
 		border: 1px solid var(--l1-border);
 		background-color: var(--l1-background);

-		> .ant-card-body {
-			padding: 0;
-			width: 258px;
+		.resizable-box__content {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.quick-filters-container {
+			flex: 1;
+			min-height: 0;
 		}
 	}

@@ -101,6 +107,8 @@
 		border-color: var(--l1-border);
 	}
 	.trace-explorer.filters-expanded {
-		width: calc(100% - 260px);
+		flex: 1;
+		width: auto;
+		min-width: 0;
 	}
 }
--- a/frontend/src/pages/TracesExplorer/index.tsx
+++ b/frontend/src/pages/TracesExplorer/index.tsx
@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
-import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
@@ -41,6 +40,8 @@ import { isEmpty } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { ExplorerViews } from 'pages/LogsExplorer/utils';
 import { TOOLBAR_VIEWS } from 'pages/TracesExplorer/constants';
+import { ResizableBox } from 'periscope/components/ResizableBox';
+import usePanelWidth from 'periscope/components/ResizableBox/usePanelWidth';
 import { Warning } from 'types/api';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -62,6 +63,10 @@ import TimeSeriesView from './TimeSeriesView';

 import './TracesExplorer.styles.scss';

+const QUICK_FILTERS_DEFAULT_WIDTH = 260;
+const QUICK_FILTERS_MIN_WIDTH = 240;
+const QUICK_FILTERS_MAX_WIDTH = 500;
+
 function TracesExplorer(): JSX.Element {
 	const {
 		panelType,
@@ -117,6 +122,16 @@ function TracesExplorer(): JSX.Element {
 	const [warning, setWarning] = useState<Warning | undefined>();
 	const [isOpen, setOpen] = useState<boolean>(true);

+	const {
+		initialWidth: quickFiltersInitialWidth,
+		persistWidth: persistQuickFiltersWidth,
+	} = usePanelWidth({
+		storageKey: LOCALSTORAGE.QUICK_FILTERS_WIDTH_TRACES,
+		defaultWidth: QUICK_FILTERS_DEFAULT_WIDTH,
+		minWidth: QUICK_FILTERS_MIN_WIDTH,
+		maxWidth: QUICK_FILTERS_MAX_WIDTH,
+	});
+
 	const defaultQuery = useMemo(
 		(): Query =>
 			updateAllQueriesOperators(
@@ -250,16 +265,29 @@ function TracesExplorer(): JSX.Element {
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="trace-explorer-page">
-				<Card className="filter" hidden={!isOpen}>
-					<QuickFilters
-						className="qf-traces-explorer"
-						source={QuickFiltersSource.TRACES_EXPLORER}
-						signal={SignalType.TRACES}
-						handleFilterVisibilityChange={(): void => {
-							setOpen(!isOpen);
-						}}
-					/>
-				</Card>
+				{isOpen && (
+					<ResizableBox
+						handle="right"
+						defaultWidth={QUICK_FILTERS_DEFAULT_WIDTH}
+						initialWidth={quickFiltersInitialWidth}
+						minWidth={QUICK_FILTERS_MIN_WIDTH}
+						maxWidth={QUICK_FILTERS_MAX_WIDTH}
+						onResize={persistQuickFiltersWidth}
+						resetToDefaultOnDoubleClick
+						withHandle
+						className="filter"
+						handleTestId="quick-filters-resize-handle"
+					>
+						<QuickFilters
+							className="qf-traces-explorer"
+							source={QuickFiltersSource.TRACES_EXPLORER}
+							signal={SignalType.TRACES}
+							handleFilterVisibilityChange={(): void => {
+								setOpen(!isOpen);
+							}}
+						/>
+					</ResizableBox>
+				)}
 				<div
 					className={cx('trace-explorer', {
 						'filters-expanded': isOpen,
--- a/frontend/src/periscope/components/ResizableBox/ResizableBox.styles.scss
+++ b/frontend/src/periscope/components/ResizableBox/ResizableBox.styles.scss
@@ -1,6 +1,5 @@
 .resizable-box {
 	position: relative;
-	overflow: hidden;

 	&--disabled {
 		flex: 1;
@@ -18,6 +17,17 @@
 		z-index: 10;
 		background: var(--l2-border);

+		// Extend the interactive area beyond the 1px visual line so the handle
+		// is easy to grab and double-click, without changing its appearance.
+		&::before {
+			content: '';
+			position: absolute;
+			top: -4px;
+			right: -4px;
+			bottom: -4px;
+			left: -4px;
+		}
+
 		&:hover,
 		&:active {
 			background: var(--primary);
@@ -55,4 +65,29 @@
 			right: 0;
 		}
 	}
+
+	// Visible grip indicator (opt-in via the `withHandle` prop). Purely visual —
+	// pointer events fall through to the handle so it still owns drag + reset.
+	&__grip {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 14px;
+		height: 26px;
+		border: 1px solid var(--l2-border);
+		border-radius: 4px;
+		background: var(--l1-background);
+		color: var(--l2-foreground);
+		pointer-events: none;
+	}
+
+	&__handle:hover &__grip,
+	&__handle:active &__grip {
+		border-color: var(--primary);
+		color: var(--primary);
+	}
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Nityananda Gohain	7cdd2c4e5d	Merge branch 'main' into issue_5015	2026-07-09 18:41:13 +05:30
nityanandagohain	602874b75e	fix: add build cache path for local	2026-06-04 13:59:50 +05:30
Nityananda Gohain	98ea39aa60	Merge branch 'main' into issue_5015	2026-06-04 12:36:06 +05:30
nityanandagohain	8f4b4b0fc2	fix: revert back to using specific commit	2026-05-22 11:13:26 +05:30
nityanandagohain	2cf61813ae	fix: use github script instead	2026-05-22 10:51:18 +05:30
nityanandagohain	887dc9de16	fix: expose gha runtime	2026-05-20 16:07:56 +05:30
nityanandagohain	d0ab1b6301	fix: integration ci	2026-05-20 15:50:56 +05:30
nityanandagohain	1bfe614b92	fix: more fixes	2026-05-20 15:49:49 +05:30
nityanandagohain	592cc02df4	Merge remote-tracking branch 'origin/issue_5015' into issue_5015	2026-05-20 15:34:39 +05:30
nityanandagohain	bf07f74185	fix: print build logs	2026-05-20 15:34:23 +05:30
Nityananda Gohain	a9bb25e085	Merge branch 'main' into issue_5015	2026-05-20 15:16:00 +05:30
nityanandagohain	99267e5e91	fix: use stable name for zeus	2026-05-20 15:07:12 +05:30
nityanandagohain	08320f5173	fix: formatting	2026-05-20 14:46:42 +05:30
nityanandagohain	8562049bfe	chore: comment update	2026-05-20 14:44:26 +05:30
nityanandagohain	e3a22cd7cf	chore: speed up python integration test setup builds	2026-05-20 13:07:52 +05:30