Merge branch 'main' into issue-5535

chore: add to ci
chore: add integration tests for metrics under reduction - query part
2026-07-06 14:40:38 +01:00 · 2026-07-06 11:51:09 +05:30 · 2026-07-06 11:50:46 +05:30 · 2026-07-06 11:19:45 +05:30 · 2026-07-06 05:42:31 +00:00 · 2026-07-06 04:47:31 +00:00
199 changed files with 5833 additions and 5838 deletions
--- a/.github/workflows/integrationci.yaml
+++ b/.github/workflows/integrationci.yaml
@@ -56,6 +56,8 @@ jobs:
          - querier_json_body
          - querier_skip_resource_fingerprint
          - ttl
+          - clickhousecluster
+          - metricreduction
        sqlstore-provider:
          - postgres
          - sqlite
--- a/frontend/AGENTS.md
+++ b/frontend/AGENTS.md
@@ -25,7 +25,6 @@ You are operating within a constrained context window and strict system prompts.
 - Never create barrel files.
 - When writing new css, prefer CSS Modules
  - Use ./docs/css-modules-guide.md as reference on how to write good CSS Modules.
- When writing code that could need authorization checks, read ./src/lib/authz/README.md

 3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:
 - Run `pnpm tsgo --noEmit`
--- a/frontend/mocks/lib/env.ts
+++ b/frontend/mocks/lib/env.ts
@@ -1,3 +0,0 @@
-export const IS_DEV = false;
-export const IS_PROD = true;
-export const MODE = 'test';
--- a/frontend/jest.config.ts
+++ b/frontend/jest.config.ts
@@ -29,7 +29,6 @@ const config: Config.InitialOptions = {
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',
-		'^lib/env$': '<rootDir>/__mocks__/lib/env.ts',
 		'^test-mocks/(.*)$': '<rootDir>/__mocks__/$1',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
--- 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/ExplorerCard/constants.ts
+++ b/frontend/src/components/ExplorerCard/constants.ts
@@ -1,7 +1,7 @@
 import { QueryParams } from 'constants/query';

 export const ExploreHeaderToolTip = {
-	url: 'https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder',
+	url: 'https://signoz.io/docs/querying/overview/?utm_source=product&utm_medium=new-query-builder',
 	text: 'More details on how to use query builder',
 };

--- a/frontend/src/components/Graph/utils.ts
+++ b/frontend/src/components/Graph/utils.ts
@@ -1,5 +1,14 @@
 import { MutableRefObject } from 'react';
-import { Chart, ChartConfiguration, ChartData, Color } from 'chart.js';
+import {
+	ActiveElement,
+	Chart,
+	ChartConfiguration,
+	ChartData,
+	ChartEvent,
+	ChartType,
+	Color,
+	TooltipItem,
+} from 'chart.js';
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -60,184 +69,189 @@ export const getGraphOptions = (
 	minTime?: number,
 	maxTime?: number,
 	// eslint-disable-next-line sonarjs/cognitive-complexity
-): CustomChartOptions => ({
-	animation: {
-		duration: animate ? 200 : 0,
-	},
-	responsive: true,
-	maintainAspectRatio: false,
-	interaction: {
-		mode: 'index',
-		intersect: true,
-	},
-	plugins: {
-		...(staticLine
-			? {
-					annotation: {
-						annotations: [
-							{
-								type: 'line',
-								yMin: staticLine.yMin,
-								yMax: staticLine.yMax,
-								borderColor: staticLine.borderColor,
-								borderWidth: staticLine.borderWidth,
-								label: {
-									content: staticLine.lineText,
-									enabled: true,
-									font: {
-										size: 10,
+): CustomChartOptions =>
+	({
+		animation: {
+			duration: animate ? 200 : 0,
+		},
+		responsive: true,
+		maintainAspectRatio: false,
+		interaction: {
+			mode: 'index',
+			intersect: true,
+		},
+		plugins: {
+			...(staticLine
+				? {
+						annotation: {
+							annotations: [
+								{
+									type: 'line',
+									yMin: staticLine.yMin,
+									yMax: staticLine.yMax,
+									borderColor: staticLine.borderColor,
+									borderWidth: staticLine.borderWidth,
+									label: {
+										content: staticLine.lineText,
+										enabled: true,
+										font: {
+											size: 10,
+										},
+										borderWidth: 0,
+										position: 'start',
+										backgroundColor: 'transparent',
+										color: staticLine.textColor,
 									},
-									borderWidth: 0,
-									position: 'start',
-									backgroundColor: 'transparent',
-									color: staticLine.textColor,
 								},
-							},
-						],
+							],
+						},
+					}
+				: {}),
+			title: {
+				display: title !== undefined,
+				text: title,
+			},
+			legend: {
+				display: false,
+			},
+			tooltip: {
+				callbacks: {
+					title(context: TooltipItem<'line'>[]): string | string[] {
+						const date = dayjs(context[0].parsed.x);
+						return date
+							.tz(timezone.value)
+							.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
+					},
+					label(context: TooltipItem<'line'>): string | string[] {
+						let label = context.dataset.label || '';
+
+						if (label) {
+							label += ': ';
+						}
+						if (context.parsed.y !== null) {
+							label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
+						}
+
+						return label;
+					},
+					labelTextColor(labelData: TooltipItem<'line'>): Color {
+						if (labelData.datasetIndex === nearestDatasetIndex.current) {
+							return 'rgba(255, 255, 255, 1)';
+						}
+
+						return 'rgba(255, 255, 255, 0.75)';
 					},
-				}
-			: {}),
-		title: {
-			display: title !== undefined,
-			text: title,
-		},
-		legend: {
-			display: false,
-		},
-		tooltip: {
-			callbacks: {
-				title(context): string | string[] {
-					const date = dayjs(context[0].parsed.x);
-					return date
-						.tz(timezone.value)
-						.format(DATE_TIME_FORMATS.MONTH_DATETIME_FULL_SECONDS);
 				},
-				label(context): string | string[] {
-					let label = context.dataset.label || '';
-
-					if (label) {
-						label += ': ';
-					}
-					if (context.parsed.y !== null) {
-						label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
-					}
-
-					return label;
-				},
-				labelTextColor(labelData): Color {
-					if (labelData.datasetIndex === nearestDatasetIndex.current) {
-						return 'rgba(255, 255, 255, 1)';
-					}
-
-					return 'rgba(255, 255, 255, 0.75)';
+				position: 'custom',
+				itemSort(item1: TooltipItem<'line'>, item2: TooltipItem<'line'>): number {
+					return item2.parsed.y - item1.parsed.y;
 				},
 			},
-			position: 'custom',
-			itemSort(item1, item2): number {
-				return item2.parsed.y - item1.parsed.y;
-			},
+			[dragSelectPluginId]: createDragSelectPluginOptions(
+				!!onDragSelect,
+				onDragSelect,
+				dragSelectColor,
+			),
+			[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
+				!!onDragSelect,
+				currentTheme === 'dark' ? 'white' : 'black',
+			),
 		},
-		[dragSelectPluginId]: createDragSelectPluginOptions(
-			!!onDragSelect,
-			onDragSelect,
-			dragSelectColor,
-		),
-		[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
-			!!onDragSelect,
-			currentTheme === 'dark' ? 'white' : 'black',
-		),
-	},
-	layout: {
-		padding: 0,
-	},
-	scales: {
-		x: {
-			stacked: isStacked,
-			offset: false,
-			grid: {
+		layout: {
+			padding: 0,
+		},
+		scales: {
+			x: {
+				stacked: isStacked,
+				offset: false,
+				grid: {
+					display: true,
+					color: getGridColor(),
+					drawTicks: true,
+				},
+				adapters: {
+					date: chartjsAdapter,
+				},
+				time: {
+					unit: xAxisTimeUnit?.unitName || 'minute',
+					stepSize: xAxisTimeUnit?.stepSize || 1,
+					displayFormats: {
+						millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
+						second: DATE_TIME_FORMATS.TIME_SECONDS,
+						minute: DATE_TIME_FORMATS.TIME,
+						hour: DATE_TIME_FORMATS.SLASH_SHORT,
+						day: DATE_TIME_FORMATS.DATE_SHORT,
+						week: DATE_TIME_FORMATS.DATE_SHORT,
+						month: DATE_TIME_FORMATS.YEAR_MONTH,
+						year: DATE_TIME_FORMATS.YEAR_SHORT,
+					},
+				},
+				type: 'time',
+				ticks: { color: getAxisLabelColor(currentTheme) },
+				...(minTime && {
+					min: dayjs(minTime).tz(timezone.value).format(),
+				}),
+				...(maxTime && {
+					max: dayjs(maxTime).tz(timezone.value).format(),
+				}),
+			},
+			y: {
+				stacked: isStacked,
 				display: true,
-				color: getGridColor(),
-				drawTicks: true,
-			},
-			adapters: {
-				date: chartjsAdapter,
-			},
-			time: {
-				unit: xAxisTimeUnit?.unitName || 'minute',
-				stepSize: xAxisTimeUnit?.stepSize || 1,
-				displayFormats: {
-					millisecond: DATE_TIME_FORMATS.TIME_SECONDS,
-					second: DATE_TIME_FORMATS.TIME_SECONDS,
-					minute: DATE_TIME_FORMATS.TIME,
-					hour: DATE_TIME_FORMATS.SLASH_SHORT,
-					day: DATE_TIME_FORMATS.DATE_SHORT,
-					week: DATE_TIME_FORMATS.DATE_SHORT,
-					month: DATE_TIME_FORMATS.YEAR_MONTH,
-					year: DATE_TIME_FORMATS.YEAR_SHORT,
+				grid: {
+					display: true,
+					color: getGridColor(),
 				},
-			},
-			type: 'time',
-			ticks: { color: getAxisLabelColor(currentTheme) },
-			...(minTime && {
-				min: dayjs(minTime).tz(timezone.value).format(),
-			}),
-			...(maxTime && {
-				max: dayjs(maxTime).tz(timezone.value).format(),
-			}),
-		},
-		y: {
-			stacked: isStacked,
-			display: true,
-			grid: {
-				display: true,
-				color: getGridColor(),
-			},
-			ticks: {
-				color: getAxisLabelColor(currentTheme),
-				// Include a dollar sign in the ticks
-				callback(value): string {
-					return getYAxisFormattedValue(value.toString(), yAxisUnit);
+				ticks: {
+					color: getAxisLabelColor(currentTheme),
+					// Include a dollar sign in the ticks
+					callback(value: number | string): string {
+						return getYAxisFormattedValue(value.toString(), yAxisUnit);
+					},
 				},
 			},
 		},
-	},
-	elements: {
-		line: {
-			tension: 0,
-			cubicInterpolationMode: 'monotone',
-		},
-		point: {
-			hoverBackgroundColor: (ctx: any): string => {
-				if (ctx?.element?.options?.borderColor) {
-					return ctx.element.options.borderColor;
-				}
-				return 'rgba(0,0,0,0.1)';
+		elements: {
+			line: {
+				tension: 0,
+				cubicInterpolationMode: 'monotone',
 			},
-			hoverRadius: 5,
-		},
-	},
-	onClick: (event, element, chart): void => {
-		if (onClickHandler) {
-			onClickHandler(event, element, chart, data);
-		}
-	},
-	onHover: (event, _, chart): void => {
-		if (event.native) {
-			const interactions = chart.getElementsAtEventForMode(
-				event.native,
-				'nearest',
-				{
-					intersect: false,
+			point: {
+				hoverBackgroundColor: (ctx: any): string => {
+					if (ctx?.element?.options?.borderColor) {
+						return ctx.element.options.borderColor;
+					}
+					return 'rgba(0,0,0,0.1)';
 				},
-				true,
-			);
-
-			if (interactions[0]) {
-				nearestDatasetIndex.current = interactions[0].datasetIndex;
+				hoverRadius: 5,
+			},
+		},
+		onClick: (
+			event: ChartEvent,
+			element: ActiveElement[],
+			chart: Chart,
+		): void => {
+			if (onClickHandler) {
+				onClickHandler(event, element, chart, data);
 			}
-		}
-	},
-});
+		},
+		onHover: (event: ChartEvent, _: ActiveElement[], chart: Chart): void => {
+			if (event.native) {
+				const interactions = chart.getElementsAtEventForMode(
+					event.native,
+					'nearest',
+					{
+						intersect: false,
+					},
+					true,
+				);
+
+				if (interactions[0]) {
+					nearestDatasetIndex.current = interactions[0].datasetIndex;
+				}
+			}
+		},
+	}) as CustomChartOptions;

 declare module 'chart.js' {
 	interface TooltipPositionerMap {
--- a/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx
@@ -131,7 +131,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 												Set the time interval for aggregation
 												<br />
 												<a
-													href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
+													href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
 													target="_blank"
 													rel="noopener noreferrer"
 													style={{ color: '#1890ff', textDecoration: 'underline' }}
@@ -254,7 +254,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										Set the time interval for aggregation
 										<br />
 										<a
-											href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
+											href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
 											target="_blank"
 											rel="noopener noreferrer"
 											style={{ color: '#1890ff', textDecoration: 'underline' }}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
@@ -52,7 +52,7 @@ const ADD_ONS = [
 		key: ADD_ONS_KEYS.GROUP_BY,
 		description:
 			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
-		docLink: 'https://signoz.io/docs/userguide/query-builder-v5/#grouping',
+		docLink: 'https://signoz.io/docs/querying/aggregation-grouping/#grouping',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -61,7 +61,7 @@ const ADD_ONS = [
 		description:
 			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
 		docLink:
-			'https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having',
+			'https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -70,7 +70,7 @@ const ADD_ONS = [
 		description:
 			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
 		docLink:
-			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
+			'https://signoz.io/docs/querying/result-manipulation/#sorting--limiting',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -79,7 +79,7 @@ const ADD_ONS = [
 		description:
 			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
 		docLink:
-			'https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting',
+			'https://signoz.io/docs/querying/result-manipulation/#how-limit-works-for-time-series',
 	},
 	{
 		icon: <ScrollText size={14} />,
@@ -88,7 +88,7 @@ const ADD_ONS = [
 		description:
 			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
 		docLink:
-			'https://signoz.io/docs/userguide/query-builder-v5/#legend-formatting',
+			'https://signoz.io/docs/querying/aggregation-grouping/#legend-formatting',
 	},
 ];

@@ -99,7 +99,7 @@ const REDUCE_TO = {
 	description:
 		'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
 	docLink:
-		'https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations',
+		'https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation',
 };

 const hasValue = (value: unknown): boolean =>
@@ -349,7 +349,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Group By"
 											description="Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments."
-											docLink="https://signoz.io/docs/userguide/query-builder-v5/#grouping"
+											docLink="https://signoz.io/docs/querying/aggregation-grouping/#grouping"
 										/>
 									}
 									placement="top"
@@ -385,7 +385,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Having"
 											description="Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500"
-											docLink="https://signoz.io/docs/userguide/query-builder-v5/#conditional-filtering-with-having"
+											docLink="https://signoz.io/docs/querying/result-manipulation/#conditional-filtering-with-having"
 										/>
 									}
 									placement="top"
@@ -434,7 +434,7 @@ function QueryAddOns({
 										<TooltipContent
 											label="Order By"
 											description="Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers."
-											docLink="https://signoz.io/docs/userguide/query-builder-v5/#sorting--limiting"
+											docLink="https://signoz.io/docs/querying/result-manipulation/#sorting--limiting"
 										/>
 									}
 									placement="top"
@@ -473,7 +473,7 @@ function QueryAddOns({
 											<TooltipContent
 												label="Reduce to"
 												description="Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value."
-												docLink="https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations"
+												docLink="https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation"
 											/>
 										}
 										placement="top"
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx
@@ -65,7 +65,7 @@ function QueryAggregationOptions({
 									Set the time interval for aggregation
 									<br />
 									<a
-										href="https://signoz.io/docs/userguide/query-builder-v5/#time-aggregation-windows"
+										href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
 										target="_blank"
 										rel="noopener noreferrer"
 										style={{ color: '#1890ff', textDecoration: 'underline' }}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx
@@ -676,7 +676,7 @@ function QueryAggregationSelect({
 						</span>
 						<br />
 						<a
-							href="https://signoz.io/docs/userguide/query-builder-v5/#core-aggregation-functions"
+							href="https://signoz.io/docs/querying/aggregation-grouping/#core-aggregation-functions-logs--traces"
 							target="_blank"
 							rel="noopener noreferrer"
 							style={{ color: '#1890ff', textDecoration: 'underline' }}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx
@@ -44,7 +44,7 @@ function TraceOperatorSection({
 					<div style={{ textAlign: 'center' }}>
 						Add Trace Matching
 						<Typography.Link
-							href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-trace-operators"
+							href="https://signoz.io/docs/querying/multi-query-analysis/#trace-matching"
 							target="_blank"
 							style={{ textDecoration: 'underline' }}
 						>
@@ -106,7 +106,7 @@ export default function QueryFooter({
 								<div style={{ textAlign: 'center' }}>
 									Add New Formula
 									<Typography.Link
-										href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
+										href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
 										target="_blank"
 										style={{ textDecoration: 'underline' }}
 									>
--- a/frontend/src/components/RouteTab/types.ts
+++ b/frontend/src/components/RouteTab/types.ts
@@ -1,11 +1,10 @@
-import { ComponentType } from 'react';
 import { TabsProps } from 'antd';
 import { History } from 'history';

 export type TabRoutes = {
 	name: React.ReactNode;
 	route: string;
-	Component: ComponentType;
+	Component: () => JSX.Element;
 	key: string;
 };

--- 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,70 +375,23 @@ function ServiceAccountDrawer({
 	]);

 	const handleClose = useCallback((): void => {
+		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
@@ -458,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>

@@ -483,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(
@@ -492,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/components/cmdKPalette/cmdKPalette.tsx
+++ b/frontend/src/components/cmdKPalette/cmdKPalette.tsx
@@ -22,7 +22,6 @@ import {
 } from 'container/AIAssistant/store/useAIAssistantStore';
 import { useThemeMode } from 'hooks/useDarkMode';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { IS_DEV } from 'lib/env';
 import history from 'lib/history';
 import { ROLES as UserRole } from 'types/roles';

@@ -31,33 +30,6 @@ import { useCmdK } from '../../providers/cmdKProvider';

 import './cmdKPalette.scss';

-const AuthZDevModal = IS_DEV
-	? React.lazy(() =>
-			import('lib/authz/devtools/AuthZDevModal/AuthZDevModal').then((m) => ({
-				default: m.AuthZDevModal,
-			})),
-		)
-	: null;
-
-const AuthZDevFloatingIndicator = IS_DEV
-	? React.lazy(() =>
-			import('lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator').then(
-				(m) => ({
-					default: m.AuthZDevFloatingIndicator,
-				}),
-			),
-		)
-	: null;
-
-const openAuthZDevModal = IS_DEV
-	? (): void => {
-			void import('lib/authz/devtools/useAuthZDevStore').then((m) => {
-				m.openAuthZDevModal();
-				return m;
-			});
-		}
-	: undefined;
-
 type CmdAction = {
 	id: string;
 	name: string;
@@ -138,7 +110,6 @@ export function CmdKPalette({
 		aiAssistant: isAIAssistantEnabled
 			? { open: handleOpenAIAssistant }
 			: undefined,
-		authzDevTools: openAuthZDevModal ? { open: openAuthZDevModal } : undefined,
 	});

 	// RBAC filter: show action if no roles set OR current user role is included
@@ -175,57 +146,37 @@ export function CmdKPalette({
 	};

 	return (
-		<>
-			<CommandDialog
-				open={open}
-				onOpenChange={setOpen}
-				position="top"
-				offset={110}
-			>
-				<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
-				<CommandList className="cmdk-list-scroll">
-					<CommandEmpty>No results</CommandEmpty>
-					{grouped.map(([section, items]) => (
-						<CommandGroup
-							key={section}
-							heading={section}
-							className="cmdk-section-heading"
-						>
-							{items.map((it) => (
-								<CommandItem
-									key={it.id}
-									onSelect={(): void => handleInvoke(it)}
-									value={it.name}
-									className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
+		<CommandDialog open={open} onOpenChange={setOpen} position="top" offset={110}>
+			<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
+			<CommandList className="cmdk-list-scroll">
+				<CommandEmpty>No results</CommandEmpty>
+				{grouped.map(([section, items]) => (
+					<CommandGroup
+						key={section}
+						heading={section}
+						className="cmdk-section-heading"
+					>
+						{items.map((it) => (
+							<CommandItem
+								key={it.id}
+								onSelect={(): void => handleInvoke(it)}
+								value={it.name}
+								className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
+							>
+								<span
+									className={cx('cmd-item-icon', it.id === 'ai-assistant' && 'noz-icon')}
 								>
-									<span
-										className={cx(
-											'cmd-item-icon',
-											it.id === 'ai-assistant' && 'noz-icon',
-										)}
-									>
-										{it.icon}
-									</span>
-									{it.name}
-									{it.shortcut && it.shortcut.length > 0 && (
-										<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
-									)}
-								</CommandItem>
-							))}
-						</CommandGroup>
-					))}
-				</CommandList>
-			</CommandDialog>
-			{IS_DEV && AuthZDevModal && (
-				<React.Suspense fallback={null}>
-					<AuthZDevModal />
-				</React.Suspense>
-			)}
-			{IS_DEV && AuthZDevFloatingIndicator && (
-				<React.Suspense fallback={null}>
-					<AuthZDevFloatingIndicator />
-				</React.Suspense>
-			)}
-		</>
+									{it.icon}
+								</span>
+								{it.name}
+								{it.shortcut && it.shortcut.length > 0 && (
+									<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
+								)}
+							</CommandItem>
+						))}
+					</CommandGroup>
+				))}
+			</CommandList>
+		</CommandDialog>
 	);
 }
--- a/frontend/src/constants/apDex.ts
+++ b/frontend/src/constants/apDex.ts
@@ -1,5 +1,5 @@
 export const apDexToolTipText =
 	"Apdex is a way to measure your users' satisfaction with the response time of your web service. It's represented as a score from 0-1.";
 export const apDexToolTipUrl =
-	'https://signoz.io/docs/userguide/metrics/#apdex?utm_source=product&utm_medium=frontend&utm_campaign=apdex';
+	'https://signoz.io/docs/alerts-management/apdex-alerts/?utm_source=product&utm_medium=frontend&utm_campaign=apdex';
 export const apDexToolTipUrlText = 'Learn more about Apdex.';
--- a/frontend/src/constants/shortcutActions.tsx
+++ b/frontend/src/constants/shortcutActions.tsx
@@ -43,17 +43,10 @@ type ActionDeps = {
 	aiAssistant?: {
 		open: () => void;
 	};
-	/**
-	 * Provided only in development mode. Opens the AuthZ DevTools modal
-	 * for testing permission overrides.
-	 */
-	authzDevTools?: {
-		open: () => void;
-	};
 };

 export function createShortcutActions(deps: ActionDeps): CmdAction[] {
-	const { navigate, handleThemeChange, aiAssistant, authzDevTools } = deps;
+	const { navigate, handleThemeChange, aiAssistant } = deps;

 	const actions: CmdAction[] = [
 		{
@@ -309,17 +302,5 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 		});
 	}

-	if (authzDevTools) {
-		actions.push({
-			id: 'authz-devtools',
-			name: 'AuthZ DevTools',
-			keywords: 'authz permissions rbac debug devtools override testing',
-			section: 'Dev',
-			icon: <Settings size={14} />,
-			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
-			perform: authzDevTools.open,
-		});
-	}
-
 	return actions;
 }
--- a/frontend/src/container/AllAlertChannels/index.tsx
+++ b/frontend/src/container/AllAlertChannels/index.tsx
@@ -68,7 +68,7 @@ function AlertChannels(): JSX.Element {
 				<RightActionContainer>
 					<TextToolTip
 						text={t('tooltip_notification_channels')}
-						url="https://signoz.io/docs/userguide/alerts-management/#setting-notification-channel"
+						url="https://signoz.io/docs/setup-alerts-notification/"
 					/>

 					<Tooltip
--- a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
+++ b/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
@@ -29,8 +29,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 		let url = '';
 		switch (option) {
 			case AlertTypes.ANOMALY_BASED_ALERT:
-				url =
-					'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
+				url = 'https://signoz.io/docs/alerts-management/anomaly-based-alerts/';
 				break;
 			case AlertTypes.METRICS_BASED_ALERT:
 				url =
--- a/frontend/src/container/CreateAlertRule/constants.ts
+++ b/frontend/src/container/CreateAlertRule/constants.ts
@@ -31,8 +31,7 @@ export const ALERT_TYPE_URL_MAP: Record<
 			'https://signoz.io/docs/alerts-management/exceptions-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 	},
 	[AlertTypes.ANOMALY_BASED_ALERT]: {
-		selection:
-			'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples',
+		selection: 'https://signoz.io/docs/alerts-management/anomaly-based-alerts/',
 		creation:
 			'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 	},
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@@ -717,13 +717,13 @@ function ExplorerOptions({

 	const infoIconLink = useMemo(() => {
 		if (isLogsExplorer) {
-			return 'https://signoz.io/docs/product-features/logs-explorer/?utm_source=product&utm_medium=logs-explorer-toolbar';
+			return 'https://signoz.io/docs/userguide/logs_query_builder/?utm_source=product&utm_medium=logs-explorer-toolbar';
 		}
 		// TODO: Add metrics explorer info icon link
 		if (isMetricsExplorer) {
 			return '';
 		}
-		return 'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=trace-explorer-toolbar';
+		return 'https://signoz.io/docs/userguide/traces/?utm_source=product&utm_medium=trace-explorer-toolbar';
 	}, [isLogsExplorer, isMetricsExplorer]);

 	const getQueryName = (query: Query): string => {
--- a/frontend/src/container/Home/SavedViews/SavedViews.tsx
+++ b/frontend/src/container/Home/SavedViews/SavedViews.tsx
@@ -201,7 +201,7 @@ export default function SavedViews({
 								});

 								window.open(
-									'https://signoz.io/docs/product-features/saved-view/',
+									'https://signoz.io/docs/metrics-management/metrics-explorer/#saved-views-in-metrics-explorer',
 									'_blank',
 									'noopener noreferrer',
 								);
--- a/frontend/src/container/Home/constants.ts
+++ b/frontend/src/container/Home/constants.ts
@@ -29,12 +29,12 @@ export const checkListStepToPreferenceKeyMap = {

 export const DOCS_LINKS = {
 	ADD_DATA_SOURCE: 'https://signoz.io/docs/instrumentation/overview/',
-	SEND_LOGS: 'https://signoz.io/docs/userguide/logs/',
+	SEND_LOGS: 'https://signoz.io/docs/userguide/logs_query_builder/',
 	SEND_TRACES: 'https://signoz.io/docs/userguide/traces/',
 	SEND_METRICS: 'https://signoz.io/docs/metrics-management/metrics-explorer/',
-	SETUP_ALERTS: 'https://signoz.io/docs/userguide/alerts-management/',
+	SETUP_ALERTS: 'https://signoz.io/docs/alerts/',
 	SETUP_SAVED_VIEWS:
-		'https://signoz.io/docs/product-features/saved-view/#step-2-save-your-view',
+		'https://signoz.io/docs/metrics-management/metrics-explorer/#saved-views-in-metrics-explorer',
 	SETUP_DASHBOARDS: 'https://signoz.io/docs/userguide/manage-dashboards/',
 };

--- a/frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.tsx
+++ b/frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.tsx
@@ -82,7 +82,7 @@ export function K8sEmptyState({
 						<span className={styles.message}>
 							Please refer to{' '}
 							<a
-								href="https://signoz.io/docs/userguide/hostmetrics/"
+								href="https://signoz.io/docs/infrastructure-monitoring/hostmetrics/"
 								target="_blank"
 								rel="noreferrer"
 							>
--- a/frontend/src/container/InfraMonitoringK8s/Base/tests/K8sBaseList.test.tsx
+++ b/frontend/src/container/InfraMonitoringK8s/Base/tests/K8sBaseList.test.tsx
@@ -611,7 +611,7 @@ describe('K8sBaseList', () => {
 				expect(link).toBeInTheDocument();
 				expect(link).toHaveAttribute(
 					'href',
-					'https://signoz.io/docs/userguide/hostmetrics/',
+					'https://signoz.io/docs/infrastructure-monitoring/hostmetrics/',
 				);
 			});
 		});
--- a/frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesContent.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesContent.tsx
@@ -0,0 +1,228 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { ChangeEvent, useState } from 'react';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
+import DockerIcon from 'assets/CustomIcons/DockerIcon';
+import ElasticSearchIcon from 'assets/CustomIcons/ElasticSearchIcon';
+import HerokuIcon from 'assets/CustomIcons/HerokuIcon';
+import KubernetesIcon from 'assets/CustomIcons/KubernetesIcon';
+import MongoDBIcon from 'assets/CustomIcons/MongoDBIcon';
+import MySQLIcon from 'assets/CustomIcons/MySQLIcon';
+import NginxIcon from 'assets/CustomIcons/NginxIcon';
+import PostgreSQLIcon from 'assets/CustomIcons/PostgreSQLIcon';
+import RedisIcon from 'assets/CustomIcons/RedisIcon';
+import cx from 'classnames';
+import {
+	ConciergeBell,
+	DraftingCompass,
+	Drill,
+	Plus,
+	X,
+} from '@signozhq/icons';
+import { DashboardTemplate } from 'types/api/dashboard/getAll';
+
+import blankDashboardTemplatePreviewUrl from '@/assets/Images/blankDashboardTemplatePreview.svg';
+import redisTemplatePreviewUrl from '@/assets/Images/redisTemplatePreview.svg';
+
+import { filterTemplates } from '../utils';
+
+import './DashboardTemplatesModal.styles.scss';
+
+const templatesList: DashboardTemplate[] = [
+	{
+		name: 'Blank dashboard',
+		icon: <Drill />,
+		id: 'blank',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Alert Manager',
+		icon: <ConciergeBell />,
+		id: 'alertManager',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Apache',
+		icon: <ApacheIcon />,
+		id: 'apache',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Docker',
+		icon: <DockerIcon />,
+		id: 'docker',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Elasticsearch',
+		icon: <ElasticSearchIcon />,
+		id: 'elasticSearch',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'MongoDB',
+		icon: <MongoDBIcon />,
+		id: 'mongoDB',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Heroku',
+		icon: <HerokuIcon />,
+		id: 'heroku',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Nginx',
+		icon: <NginxIcon />,
+		id: 'nginx',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Kubernetes',
+		icon: <KubernetesIcon />,
+		id: 'kubernetes',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'MySQL',
+		icon: <MySQLIcon />,
+		id: 'mySQL',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'PostgreSQL',
+		icon: <PostgreSQLIcon />,
+		id: 'postgreSQL',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+	{
+		name: 'Redis',
+		icon: <RedisIcon />,
+		id: 'redis',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: redisTemplatePreviewUrl,
+	},
+	{
+		name: 'AWS',
+		icon: <DraftingCompass size={14} />,
+		id: 'aws',
+		description: 'Create a custom dashboard from scratch.',
+		previewImage: blankDashboardTemplatePreviewUrl,
+	},
+];
+
+interface DashboardTemplatesContentProps {
+	onCreateNewDashboard: () => void;
+	/** When provided, renders the modal-style header with a close affordance. Omitted for inline use. */
+	onCancel?: () => void;
+}
+
+// The template gallery (search + list + preview + create), extracted from the
+// modal so it can be embedded inline (e.g. the V2 new-dashboard modal's template
+// tab) as well as inside DashboardTemplatesModal. Styles live under the global
+// `.new-dashboard-templates-modal` scope, so inline callers wrap it in that class.
+export default function DashboardTemplatesContent({
+	onCreateNewDashboard,
+	onCancel,
+}: DashboardTemplatesContentProps): JSX.Element {
+	const [selectedDashboardTemplate, setSelectedDashboardTemplate] = useState(
+		templatesList[0],
+	);
+
+	const [dashboardTemplates, setDashboardTemplates] = useState(templatesList);
+
+	const handleDashboardTemplateSearch = (
+		event: ChangeEvent<HTMLInputElement>,
+	) => {
+		const searchText = event.target.value;
+		const filteredTemplates = filterTemplates(searchText, templatesList);
+		setDashboardTemplates(filteredTemplates);
+	};
+
+	return (
+		<div className="new-dashboard-templates-content-container">
+			{onCancel && (
+				<div className="new-dashboard-templates-content-header">
+					<Typography.Text>New Dashboard</Typography.Text>
+
+					<X size={14} className="periscope-btn ghost" onClick={onCancel} />
+				</div>
+			)}
+
+			<div className="new-dashboard-templates-content">
+				<div className="new-dashboard-templates-list">
+					<Input
+						className="new-dashboard-templates-search"
+						placeholder="🔍 Search..."
+						onChange={handleDashboardTemplateSearch}
+					/>
+
+					<div className="templates-list">
+						{dashboardTemplates.map((template) => (
+							<div
+								className={cx(
+									'template-list-item',
+									selectedDashboardTemplate.id === template.id ? 'active' : '',
+								)}
+								key={template.name}
+								onClick={() => setSelectedDashboardTemplate(template)}
+							>
+								<div className="template-icon">{template.icon}</div>
+								<div className="template-name">{template.name}</div>
+							</div>
+						))}
+					</div>
+				</div>
+
+				<div className="new-dashboard-template-preview">
+					<div className="template-preview-header">
+						<div className="template-preview-title">
+							<div className="template-preview-icon">
+								{selectedDashboardTemplate.icon}
+							</div>
+
+							<div className="template-info">
+								<div className="template-name">{selectedDashboardTemplate.name}</div>
+
+								<div className="template-description">
+									{selectedDashboardTemplate.description}
+								</div>
+							</div>
+						</div>
+
+						<div className="create-dashboard-btn">
+							<Button
+								type="primary"
+								className="periscope-btn primary"
+								icon={<Plus size={14} />}
+								onClick={onCreateNewDashboard}
+							>
+								New dashboard
+							</Button>
+						</div>
+					</div>
+
+					<div className="template-preview-image">
+						<img
+							src={selectedDashboardTemplate.previewImage}
+							alt={`${selectedDashboardTemplate.name}-preview`}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx
@@ -1,129 +1,9 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { ChangeEvent, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
-import DockerIcon from 'assets/CustomIcons/DockerIcon';
-import ElasticSearchIcon from 'assets/CustomIcons/ElasticSearchIcon';
-import HerokuIcon from 'assets/CustomIcons/HerokuIcon';
-import KubernetesIcon from 'assets/CustomIcons/KubernetesIcon';
-import MongoDBIcon from 'assets/CustomIcons/MongoDBIcon';
-import MySQLIcon from 'assets/CustomIcons/MySQLIcon';
-import NginxIcon from 'assets/CustomIcons/NginxIcon';
-import PostgreSQLIcon from 'assets/CustomIcons/PostgreSQLIcon';
-import RedisIcon from 'assets/CustomIcons/RedisIcon';
-import cx from 'classnames';
-import {
-	ConciergeBell,
-	DraftingCompass,
-	Drill,
-	Plus,
-	X,
-} from '@signozhq/icons';
-import { DashboardTemplate } from 'types/api/dashboard/getAll';
+import { Modal } from 'antd';

-import blankDashboardTemplatePreviewUrl from '@/assets/Images/blankDashboardTemplatePreview.svg';
-import redisTemplatePreviewUrl from '@/assets/Images/redisTemplatePreview.svg';
-
-import { filterTemplates } from '../utils';
+import DashboardTemplatesContent from './DashboardTemplatesContent';

 import './DashboardTemplatesModal.styles.scss';

-const templatesList: DashboardTemplate[] = [
-	{
-		name: 'Blank dashboard',
-		icon: <Drill />,
-		id: 'blank',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Alert Manager',
-		icon: <ConciergeBell />,
-		id: 'alertManager',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Apache',
-		icon: <ApacheIcon />,
-		id: 'apache',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Docker',
-		icon: <DockerIcon />,
-		id: 'docker',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Elasticsearch',
-		icon: <ElasticSearchIcon />,
-		id: 'elasticSearch',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'MongoDB',
-		icon: <MongoDBIcon />,
-		id: 'mongoDB',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Heroku',
-		icon: <HerokuIcon />,
-		id: 'heroku',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Nginx',
-		icon: <NginxIcon />,
-		id: 'nginx',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Kubernetes',
-		icon: <KubernetesIcon />,
-		id: 'kubernetes',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'MySQL',
-		icon: <MySQLIcon />,
-		id: 'mySQL',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'PostgreSQL',
-		icon: <PostgreSQLIcon />,
-		id: 'postgreSQL',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-	{
-		name: 'Redis',
-		icon: <RedisIcon />,
-		id: 'redis',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: redisTemplatePreviewUrl,
-	},
-	{
-		name: 'AWS',
-		icon: <DraftingCompass size={14} />,
-		id: 'aws',
-		description: 'Create a custom dashboard from scratch.',
-		previewImage: blankDashboardTemplatePreviewUrl,
-	},
-];
-
 interface DashboardTemplatesModalProps {
 	showNewDashboardTemplatesModal: boolean;
 	onCreateNewDashboard: () => void;
@@ -135,20 +15,6 @@ export default function DashboardTemplatesModal({
 	onCreateNewDashboard,
 	onCancel,
 }: DashboardTemplatesModalProps): JSX.Element {
-	const [selectedDashboardTemplate, setSelectedDashboardTemplate] = useState(
-		templatesList[0],
-	);
-
-	const [dashboardTemplates, setDashboardTemplates] = useState(templatesList);
-
-	const handleDashboardTemplateSearch = (
-		event: ChangeEvent<HTMLInputElement>,
-	) => {
-		const searchText = event.target.value;
-		const filteredTemplates = filterTemplates(searchText, templatesList);
-		setDashboardTemplates(filteredTemplates);
-	};
-
 	return (
 		<Modal
 			wrapClassName="new-dashboard-templates-modal"
@@ -159,75 +25,10 @@ export default function DashboardTemplatesModal({
 			destroyOnClose
 			width="60vw"
 		>
-			<div className="new-dashboard-templates-content-container">
-				<div className="new-dashboard-templates-content-header">
-					<Typography.Text>New Dashboard</Typography.Text>
-
-					<X size={14} className="periscope-btn ghost" onClick={onCancel} />
-				</div>
-
-				<div className="new-dashboard-templates-content">
-					<div className="new-dashboard-templates-list">
-						<Input
-							className="new-dashboard-templates-search"
-							placeholder="🔍 Search..."
-							onChange={handleDashboardTemplateSearch}
-						/>
-
-						<div className="templates-list">
-							{dashboardTemplates.map((template) => (
-								<div
-									className={cx(
-										'template-list-item',
-										selectedDashboardTemplate.id === template.id ? 'active' : '',
-									)}
-									key={template.name}
-									onClick={() => setSelectedDashboardTemplate(template)}
-								>
-									<div className="template-icon">{template.icon}</div>
-									<div className="template-name">{template.name}</div>
-								</div>
-							))}
-						</div>
-					</div>
-
-					<div className="new-dashboard-template-preview">
-						<div className="template-preview-header">
-							<div className="template-preview-title">
-								<div className="template-preview-icon">
-									{selectedDashboardTemplate.icon}
-								</div>
-
-								<div className="template-info">
-									<div className="template-name">{selectedDashboardTemplate.name}</div>
-
-									<div className="template-description">
-										{selectedDashboardTemplate.description}
-									</div>
-								</div>
-							</div>
-
-							<div className="create-dashboard-btn">
-								<Button
-									type="primary"
-									className="periscope-btn primary"
-									icon={<Plus size={14} />}
-									onClick={onCreateNewDashboard}
-								>
-									New dashboard
-								</Button>
-							</div>
-						</div>
-
-						<div className="template-preview-image">
-							<img
-								src={selectedDashboardTemplate.previewImage}
-								alt={`${selectedDashboardTemplate.name}-preview`}
-							/>
-						</div>
-					</div>
-				</div>
-			</div>
+			<DashboardTemplatesContent
+				onCreateNewDashboard={onCreateNewDashboard}
+				onCancel={onCancel}
+			/>
 		</Modal>
 	);
 }
--- a/frontend/src/container/MembersSettings/MembersSettings.styles.scss
+++ b/frontend/src/container/MembersSettings/MembersSettings.styles.scss
@@ -16,7 +16,6 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--spacing-2);
-		padding-bottom: var(--spacing-8);
 	}

 	&__title {
--- a/frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx
+++ b/frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx
@@ -164,7 +164,7 @@ function BreakDown(): JSX.Element {
 								Meter metrics data is aggregated over 1 hour period. Please select time
 								range accordingly.&nbsp;
 								<a
-									href="https://signoz.io/docs/cost-meter/overview/#accessing-cost-meter"
+									href="https://signoz.io/docs/cost-meter/overview/#get-started"
 									rel="noopener noreferrer"
 									target="_blank"
 									style={{ textDecoration: 'underline' }}
--- a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
+++ b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
@@ -197,7 +197,7 @@ function TopOperationsTable({

 	const entryPointSpanInfo = {
 		text: 'Shows the spans where requests enter new services for the first time',
-		url: 'https://signoz.io/docs/traces-management/guides/entry-point-spans-service-overview/',
+		url: 'https://signoz.io/docs/apm-and-distributed-tracing/application-details/',
 		urlText: 'Learn more about Entrypoint Spans.',
 	};

--- a/frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnGoogleAuth.tsx
+++ b/frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnGoogleAuth.tsx
@@ -64,7 +64,7 @@ function ConfigureGoogleAuthAuthnProvider({
 					Enter OAuth 2.0 credentials obtained from the Google API Console below.
 					Read the{' '}
 					<a
-						href="https://signoz.io/docs/userguide/sso-authentication"
+						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
 						target="_blank"
 						rel="noreferrer"
 					>
--- a/frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnOIDC.tsx
+++ b/frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnOIDC.tsx
@@ -38,7 +38,7 @@ function ConfigureOIDCAuthnProvider({
 					Configure OpenID Connect Single Sign-On with your Identity Provider. Read
 					the{' '}
 					<a
-						href="https://signoz.io/docs/userguide/sso-authentication"
+						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
 						target="_blank"
 						rel="noreferrer"
 					>
--- a/frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnSAML.tsx
+++ b/frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnSAML.tsx
@@ -37,7 +37,7 @@ function ConfigureSAMLAuthnProvider({
 				<p className="authn-provider__description">
 					Configure SAML 2.0 Single Sign-On with your Identity Provider. Read the{' '}
 					<a
-						href="https://signoz.io/docs/userguide/sso-authentication"
+						href="https://signoz.io/docs/manage/administrator-guide/sso/overview/"
 						target="_blank"
 						rel="noreferrer"
 					>
--- a/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx
+++ b/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx
@@ -216,7 +216,7 @@ export default function QueryFunctions({
 							Add new function
 							<Typography.Link
 								style={{ textDecoration: 'underline' }}
-								href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#functions-for-extended-data-analysis"
+								href="https://signoz.io/docs/querying/functions-extended-analysis/?utm_source=product&utm_medium=query-builder"
 								target="_blank"
 							>
 								{' '}
--- 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,17 @@ 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,
+				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,34 @@ 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,
+				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();
 });

--- 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/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,7 +72,7 @@ function ViewRolePageContent(): JSX.Element {
 	} = useDeleteRoleModal({
 		roleId,
 		isManaged: isManaged ?? false,
-		hasDeletePermission: true,
+		hasDeletePermission,
 		onDeleteSuccess: handleCancel,
 	});

@@ -139,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">
@@ -176,7 +187,7 @@ function ViewRolePageContent(): JSX.Element {
 		);
 	}

-	if (isLoading || isFeatureGateLoading) {
+	if (isAuthZLoading || isLoading || isFeatureGateLoading) {
 		return (
 			<div className={styles.viewRolePage}>
 				<Skeleton active paragraph={{ rows: 8 }} />
@@ -233,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>

@@ -333,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 waitFor(() => {
-				expect(screen.getByTestId('save-button')).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,10 +198,6 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);

-			await waitFor(() => {
-				expect(screen.getByTestId('save-button')).toBeInTheDocument();
-			});
-
 			const updateButton = screen.getByTestId('save-button');
 			await user.hover(updateButton);

@@ -202,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,
@@ -229,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,
@@ -265,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,
@@ -297,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,
@@ -329,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,
@@ -369,10 +391,6 @@ describe('ViewRolePage - AuthZ', () => {
 				},
 			);

-			await waitFor(() => {
-				expect(screen.getByTestId('delete-button')).toBeInTheDocument();
-			});
-
 			const deleteButton = screen.getByTestId('delete-button');
 			await user.hover(deleteButton);

@@ -386,9 +404,13 @@ 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,
+				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
@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from 'tests/test-utils';
+import { render, screen } from 'tests/test-utils';

 import ViewRolePage from '../ViewRolePage';

@@ -38,34 +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 waitFor(() => {
-			expect(screen.getByTestId('save-button')).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 waitFor(() => {
-			expect(screen.getByTestId('cancel-button')).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 waitFor(() => {
-			expect(screen.getByTestId('delete-button')).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,8 +1,8 @@
 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';
@@ -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 waitFor(() => {
-			expect(screen.getByTestId('view-role-page')).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 waitFor(() => {
-			expect(screen.getByTestId('view-role-page')).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 waitFor(() => {
-			expect(screen.getByTestId('cancel-button')).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 waitFor(() => {
-				expect(screen.getByTestId('feature-gate-error-banner')).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 waitFor(() => {
-				expect(screen.getByTestId('feature-gate-error-banner')).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 waitFor(() => {
-				expect(screen.getByTestId('cancel-button')).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 waitFor(() => {
-			expect(screen.getByTestId('cancel-button')).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,9 +1,9 @@
 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, waitFor, within } from 'tests/test-utils';
+import { render, screen, within } from 'tests/test-utils';

 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
 import ViewRolePage from '../ViewRolePage';
@@ -17,15 +17,8 @@ import {
 	mockPermissionsData,
 } from './testUtils';

-async function waitForPageReady(): Promise<void> {
-	await waitFor(() => {
-		expect(screen.getByTestId('view-role-page')).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/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,10 +38,6 @@ import {
 import './ServiceAccountsSettings.styles.scss';

 function ServiceAccountsSettings(): JSX.Element {
-	const queryClient = useQueryClient();
-	const { allowed: canListServiceAccounts, isLoading: isAuthZLoading } =
-		useAuthZ([SAListPermission]);
-	const [, setSelectedAccountId] = useQueryState(SA_QUERY_PARAMS.ACCOUNT);
 	const [currentPage, setPage] = useQueryState(
 		SA_QUERY_PARAMS.PAGE,
 		parseAsInteger.withDefault(1),
@@ -58,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[] =>
@@ -199,9 +199,9 @@ function ServiceAccountsSettings(): JSX.Element {
 			if (options?.closeDrawer) {
 				void setSelectedAccountId(null);
 			}
-			void invalidateListServiceAccounts(queryClient);
+			void handleCreateSuccess();
 		},
-		[queryClient, setSelectedAccountId],
+		[handleCreateSuccess, setSelectedAccountId],
 	);

 	return (
@@ -223,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"
@@ -259,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(
@@ -292,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/container/Version/index.tsx
+++ b/frontend/src/container/Version/index.tsx
@@ -100,7 +100,7 @@ function Version(): JSX.Element {
 					{!isError && !isLatestVersion && (
 						<div className="version-page-upgrade-container">
 							<Button
-								href="https://signoz.io/docs/operate/docker-standalone/#upgrade"
+								href="https://signoz.io/docs/opentelemetry-collection-agents/docker/overview/"
 								target="_blank"
 								type="primary"
 								className="periscope-btn primary"
--- a/frontend/src/lib/authz/README.md
+++ b/frontend/src/lib/authz/README.md
@@ -1,21 +0,0 @@
-# AuthZ
-
-Permission-based authorization system for SigNoz frontend.
-
-## Supported Resources
-
-See [hooks/useAuthZ/permissions.type.ts](./hooks/useAuthZ/permissions.type.ts) for available resources and verbs.
-
-If your page/content represents a resource not listed there, skip authz implementation — the backend doesn't enforce it yet.
-
-## UI Gating
-
-Need to gate UI based on permissions? See [components/README.md](./components/README.md).
-
-Covers: AuthZButton, AuthZTooltip, withAuthZ*, AuthZGuard*, when to use each.
-
-## Testing
-
-Need to test authz behavior? See [utils/README.md](./utils/README.md).
-
-Covers: MSW handlers, mock hooks, test patterns.
--- a/frontend/src/lib/authz/components/AuthZButton/AuthZButton.authz.test.tsx
+++ b/frontend/src/lib/authz/components/AuthZButton/AuthZButton.authz.test.tsx
@@ -1,81 +0,0 @@
-import { ReactElement } from 'react';
-import { render, screen } from 'tests/test-utils';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import type { AuthZObject } from 'lib/authz/hooks/useAuthZ/types';
-import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
-
-import AuthZButton from './AuthZButton';
-
-// AuthZButton is a thin composition over AuthZTooltip + Button. The denial
-// tooltip / disabled-on-deny UX is owned and tested by AuthZTooltip; here we
-// assert AuthZButton forwards the right props and renders a Button child.
-jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip');
-const mockTooltip = AuthZTooltip as unknown as jest.Mock;
-
-const createPerm = buildPermission(
-	'create',
-	'serviceaccount:*' as AuthZObject<'create'>,
-);
-
-describe('AuthZButton', () => {
-	beforeEach(() => {
-		mockTooltip.mockImplementation(
-			({ children }: { children: ReactElement }) => children,
-		);
-	});
-
-	afterEach(() => {
-		mockTooltip.mockReset();
-	});
-
-	it('renders a Button child with forwarded props', () => {
-		render(
-			<AuthZButton checks={[createPerm]} testId="create-btn">
-				Create
-			</AuthZButton>,
-		);
-
-		expect(screen.getByTestId('create-btn')).toBeInTheDocument();
-		expect(screen.getByTestId('create-btn').tagName).toBe('BUTTON');
-	});
-
-	it('forwards checks and enables the check by default', () => {
-		render(
-			<AuthZButton checks={[createPerm]} testId="create-btn">
-				Create
-			</AuthZButton>,
-		);
-
-		expect(mockTooltip).toHaveBeenCalledTimes(1);
-		expect(mockTooltip.mock.calls[0][0]).toMatchObject({
-			checks: [createPerm],
-			enabled: true,
-		});
-	});
-
-	it('forwards a custom tooltipMessage', () => {
-		render(
-			<AuthZButton
-				checks={[createPerm]}
-				tooltipMessage="Ask an admin"
-				testId="create-btn"
-			>
-				Create
-			</AuthZButton>,
-		);
-
-		expect(mockTooltip.mock.calls[0][0]).toMatchObject({
-			tooltipMessage: 'Ask an admin',
-		});
-	});
-
-	it('passes authZEnabled through as the tooltip enabled flag', () => {
-		render(
-			<AuthZButton checks={[createPerm]} authZEnabled={false} testId="create-btn">
-				Create
-			</AuthZButton>,
-		);
-
-		expect(mockTooltip.mock.calls[0][0]).toMatchObject({ enabled: false });
-	});
-});
--- a/frontend/src/lib/authz/components/AuthZButton/AuthZButton.tsx
+++ b/frontend/src/lib/authz/components/AuthZButton/AuthZButton.tsx
@@ -1,37 +0,0 @@
-import { Button, ButtonProps } from '@signozhq/ui/button';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-
-export type AuthZButtonProps = ButtonProps & {
-	/**
-	 * Permissions required to enable the button (AND semantics).
-	 */
-	checks: BrandedPermission[];
-	/**
-	 * Override the default denial tooltip message.
-	 */
-	tooltipMessage?: string;
-	/**
-	 * Gate the permission check itself. When false, renders a plain button.
-	 */
-	authZEnabled?: boolean;
-};
-
-function AuthZButton({
-	checks,
-	tooltipMessage,
-	authZEnabled = true,
-	...buttonProps
-}: AuthZButtonProps): JSX.Element {
-	return (
-		<AuthZTooltip
-			checks={checks}
-			enabled={authZEnabled}
-			tooltipMessage={tooltipMessage}
-		>
-			<Button {...buttonProps} />
-		</AuthZTooltip>
-	);
-}
-
-export default AuthZButton;
--- a/frontend/src/lib/authz/components/AuthZGuard/AuthZGuard.authz.test.tsx
+++ b/frontend/src/lib/authz/components/AuthZGuard/AuthZGuard.authz.test.tsx
@@ -1,202 +0,0 @@
-import { render, screen, waitFor } from 'tests/test-utils';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import {
-	AUTHZ_CHECK_URL,
-	setupAuthzAllow,
-	setupAuthzDeny,
-} from 'lib/authz/utils/authz-test-utils';
-import type { AuthZObject } from 'lib/authz/hooks/useAuthZ/types';
-import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
-
-import { AuthZGuard } from './AuthZGuard';
-import { AuthZGuardContent } from './AuthZGuardContent';
-import { AuthZGuardPage } from './AuthZGuardPage';
-
-const readPerm = buildPermission('read', 'role:*' as AuthZObject<'read'>);
-
-const Protected = (): JSX.Element => <div>Protected content</div>;
-
-describe('AuthZGuard', () => {
-	it('renders children when allowed', async () => {
-		server.use(setupAuthzAllow(readPerm));
-
-		render(
-			<AuthZGuard checks={[readPerm]}>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected content')).toBeInTheDocument();
-		});
-	});
-
-	it('renders the fallback when denied', async () => {
-		server.use(setupAuthzDeny(readPerm));
-
-		render(
-			<AuthZGuard checks={[readPerm]} fallback={<div>No access</div>}>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('No access')).toBeInTheDocument();
-		});
-		expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
-	});
-
-	it('passes denied permissions to a function fallback', async () => {
-		server.use(setupAuthzDeny(readPerm));
-
-		render(
-			<AuthZGuard
-				checks={[readPerm]}
-				fallback={({ deniedPermissions }): JSX.Element => (
-					<div>denied: {deniedPermissions.length}</div>
-				)}
-			>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('denied: 1')).toBeInTheDocument();
-		});
-	});
-
-	it('renders nothing for a denied check with no fallback', async () => {
-		server.use(setupAuthzDeny(readPerm));
-
-		const { container } = render(
-			<AuthZGuard checks={[readPerm]}>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		await waitFor(() => {
-			expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
-		});
-		expect(container).toBeEmptyDOMElement();
-	});
-
-	it('renders the loading fallback while checking', () => {
-		server.use(setupAuthzAllow(readPerm));
-
-		render(
-			<AuthZGuard checks={[readPerm]} fallbackOnLoading={<div>Loading…</div>}>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		expect(screen.getByText('Loading…')).toBeInTheDocument();
-	});
-
-	it('fails open on error by default (renders children)', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) =>
-				res(ctx.status(500), ctx.json({ error: 'boom' })),
-			),
-		);
-
-		render(
-			<AuthZGuard checks={[readPerm]} fallback={<div>No access</div>}>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected content')).toBeInTheDocument();
-		});
-	});
-
-	it('renders the fallback on error when failOpenOnError is false', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) =>
-				res(ctx.status(500), ctx.json({ error: 'boom' })),
-			),
-		);
-
-		render(
-			<AuthZGuard
-				checks={[readPerm]}
-				onFailRenderContent={false}
-				fallback={<div>No access</div>}
-			>
-				<Protected />
-			</AuthZGuard>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('No access')).toBeInTheDocument();
-		});
-		expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
-	});
-});
-
-describe('AuthZGuardPage', () => {
-	it('renders the full-page denied screen when denied', async () => {
-		server.use(setupAuthzDeny(readPerm));
-
-		render(
-			<AuthZGuardPage checks={[readPerm]}>
-				<Protected />
-			</AuthZGuardPage>,
-		);
-
-		await waitFor(() => {
-			expect(
-				screen.getByText('Uh-oh! You are not authorized'),
-			).toBeInTheDocument();
-		});
-		expect(screen.getByText('read:role:*')).toBeInTheDocument();
-	});
-
-	it('renders the app loader while checking', () => {
-		server.use(setupAuthzDeny(readPerm));
-
-		render(
-			<AuthZGuardPage checks={[readPerm]}>
-				<Protected />
-			</AuthZGuardPage>,
-		);
-
-		expect(
-			screen.getByText(
-				'OpenTelemetry-Native Logs, Metrics and Traces in a single pane',
-			),
-		).toBeInTheDocument();
-	});
-});
-
-describe('AuthZGuardContent', () => {
-	it('renders the denied callout when denied', async () => {
-		server.use(setupAuthzDeny(readPerm));
-
-		render(
-			<AuthZGuardContent checks={[readPerm]}>
-				<Protected />
-			</AuthZGuardContent>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('read:role:*')).toBeInTheDocument();
-		});
-		expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
-	});
-
-	it('renders children when allowed', async () => {
-		server.use(setupAuthzAllow(readPerm));
-
-		render(
-			<AuthZGuardContent checks={[readPerm]}>
-				<Protected />
-			</AuthZGuardContent>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected content')).toBeInTheDocument();
-		});
-	});
-});
--- a/frontend/src/lib/authz/components/AuthZGuard/AuthZGuard.tsx
+++ b/frontend/src/lib/authz/components/AuthZGuard/AuthZGuard.tsx
@@ -1,66 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-
-export type AuthZGuardFallback =
-	| ReactNode
-	| ((info: { deniedPermissions: BrandedPermission[] }) => ReactNode);
-
-export type AuthZGuardProps = {
-	/**
-	 * Permissions required to render `children` (AND semantics).
-	 */
-	checks: BrandedPermission[];
-	children: ReactElement;
-	/**
-	 * Rendered when denied. A function receives the denied permissions.
-	 */
-	fallback?: AuthZGuardFallback;
-	fallbackOnLoading?: ReactNode;
-	/**
-	 * By default, we don't expect the check API request to fail, in those cases, we prefer to show the content and then let the API fail (during list/create).
-	 *
-	 * In case you want to have a different behavior when request fail, set to false.
-	 *
-	 * @default true
-	 */
-	onFailRenderContent?: boolean;
-};
-
-function resolveFallback(
-	fallback: AuthZGuardFallback | undefined,
-	deniedPermissions: BrandedPermission[],
-): ReactNode {
-	if (typeof fallback === 'function') {
-		return fallback({ deniedPermissions });
-	}
-	return fallback ?? null;
-}
-
-export function AuthZGuard({
-	checks,
-	children,
-	fallback,
-	fallbackOnLoading,
-	onFailRenderContent = true,
-}: AuthZGuardProps): JSX.Element | null {
-	const { allowed, isLoading, error, deniedPermissions } = useAuthZ(checks);
-
-	if (isLoading) {
-		return <>{fallbackOnLoading ?? null}</>;
-	}
-
-	if (error) {
-		return onFailRenderContent ? (
-			children
-		) : (
-			<>{resolveFallback(fallback, deniedPermissions)}</>
-		);
-	}
-
-	if (!allowed) {
-		return <>{resolveFallback(fallback, deniedPermissions)}</>;
-	}
-
-	return children;
-}
--- a/frontend/src/lib/authz/components/AuthZGuard/AuthZGuardContent.tsx
+++ b/frontend/src/lib/authz/components/AuthZGuard/AuthZGuardContent.tsx
@@ -1,21 +0,0 @@
-import { ReactElement } from 'react';
-import PermissionDeniedCallout from 'lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout';
-
-import { AuthZGuard, AuthZGuardProps } from './AuthZGuard';
-
-export function AuthZGuardContent({
-	fallback,
-	...rest
-}: AuthZGuardProps): JSX.Element | null {
-	return (
-		<AuthZGuard
-			{...rest}
-			fallback={
-				fallback ??
-				(({ deniedPermissions }): ReactElement => (
-					<PermissionDeniedCallout deniedPermissions={deniedPermissions} />
-				))
-			}
-		/>
-	);
-}
--- a/frontend/src/lib/authz/components/AuthZGuard/AuthZGuardPage.tsx
+++ b/frontend/src/lib/authz/components/AuthZGuard/AuthZGuardPage.tsx
@@ -1,24 +0,0 @@
-import { ReactElement } from 'react';
-import AppLoading from 'components/AppLoading/AppLoading';
-import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
-
-import { AuthZGuard, AuthZGuardProps } from './AuthZGuard';
-
-export function AuthZGuardPage({
-	fallback,
-	fallbackOnLoading,
-	...rest
-}: AuthZGuardProps): JSX.Element | null {
-	return (
-		<AuthZGuard
-			{...rest}
-			fallbackOnLoading={fallbackOnLoading ?? <AppLoading />}
-			fallback={
-				fallback ??
-				(({ deniedPermissions }): ReactElement => (
-					<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />
-				))
-			}
-		/>
-	);
-}
--- a/frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.authz.test.tsx
+++ b/frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.authz.test.tsx
@@ -16,8 +16,6 @@ const noPermissions = {
 	isFetching: false,
 	error: null,
 	permissions: null,
-	allowed: false,
-	deniedPermissions: [] as BrandedPermission[],
 	refetchPermissions: jest.fn(),
 };

--- a/frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.module.scss
+++ b/frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.module.scss
@@ -1,3 +1,7 @@
+.wrapper {
+	cursor: not-allowed;
+}
+
 .errorContent {
 	background: var(--callout-error-background) !important;
 	border-color: var(--callout-error-border) !important;
--- a/frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.tsx
+++ b/frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, ReactElement, cloneElement, useMemo } from 'react';
+import { ReactElement, cloneElement, useMemo } from 'react';
 import {
 	TooltipRoot,
 	TooltipContent,
@@ -11,13 +11,6 @@ import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
 import { useAppContext } from 'providers/App/App';
 import styles from './AuthZTooltip.module.scss';

-const DISABLED_STYLE: CSSProperties = {
-	pointerEvents: 'all',
-	cursor: 'not-allowed',
-};
-
-const noOp = (): void => {};
-
 interface AuthZTooltipProps {
 	checks: BrandedPermission[];
 	children: ReactElement;
@@ -56,13 +49,11 @@ function AuthZTooltip({
 	}, [checks, permissions]);

 	if (shouldCheck && isLoading) {
-		return cloneElement(children, {
-			disabled: true,
-			style: DISABLED_STYLE,
-			onClick: noOp,
-			onMouseDown: noOp,
-			onPointerDown: noOp,
-		});
+		return (
+			<span className={styles.wrapper}>
+				{cloneElement(children, { disabled: true })}
+			</span>
+		);
 	}

 	if (!shouldCheck || deniedPermissions.length === 0) {
@@ -73,14 +64,12 @@ function AuthZTooltip({
 		<TooltipProvider>
 			<TooltipRoot>
 				<TooltipTrigger asChild>
-					{cloneElement(children, {
-						disabled: true,
-						style: DISABLED_STYLE,
-						onClick: noOp,
-						onMouseDown: noOp,
-						onPointerDown: noOp,
-						'data-denied-permissions': deniedPermissions.join(','),
-					})}
+					<span
+						className={styles.wrapper}
+						data-denied-permissions={deniedPermissions.join(',')}
+					>
+						{cloneElement(children, { disabled: true })}
+					</span>
 				</TooltipTrigger>
 				<TooltipContent className={styles.errorContent}>
 					{formatDeniedMessage(deniedPermissions, user.id, tooltipMessage)}
--- a/frontend/src/lib/authz/components/GuardAuthZ/GuardAuthZ.authz.test.tsx
+++ b/frontend/src/lib/authz/components/GuardAuthZ/GuardAuthZ.authz.test.tsx
@@ -0,0 +1,263 @@
+import { ReactElement } from 'react';
+import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
+import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, waitFor } from 'tests/test-utils';
+import {
+	AUTHZ_CHECK_URL,
+	authzMockResponse,
+} from 'lib/authz/utils/authz-test-utils';
+
+import { GuardAuthZ } from './GuardAuthZ';
+
+describe('GuardAuthZ', () => {
+	const TestChild = (): ReactElement => <div>Protected Content</div>;
+	const LoadingFallback = (): ReactElement => <div>Loading...</div>;
+	const NoPermissionFallback = (_response: {
+		requiredPermissionName: BrandedPermission;
+	}): ReactElement => <div>Access denied</div>;
+	const NoPermissionFallbackWithSuggestions = (response: {
+		requiredPermissionName: BrandedPermission;
+	}): ReactElement => (
+		<div>
+			Access denied. Required permission: {response.requiredPermissionName}
+		</div>
+	);
+
+	it('should render children when permission is granted', 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, [true])));
+			}),
+		);
+
+		render(
+			<GuardAuthZ relation="read" object="role:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
+		});
+	});
+
+	it('should render fallbackOnLoading when loading', () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
+				return res(
+					ctx.delay('infinite'),
+					ctx.status(200),
+					ctx.json({ data: [], status: 'success' }),
+				);
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="read"
+				object="role:*"
+				fallbackOnLoading={<LoadingFallback />}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		expect(screen.getByText('Loading...')).toBeInTheDocument();
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render null when loading and no fallbackOnLoading provided', () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
+				return res(
+					ctx.delay('infinite'),
+					ctx.status(200),
+					ctx.json({ data: [], status: 'success' }),
+				);
+			}),
+		);
+
+		const { container } = render(
+			<GuardAuthZ relation="read" object="role:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		expect(container.firstChild).toBeNull();
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render children when API error occurs and no fallbackOnError provided (fail open)', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
+			}),
+		);
+
+		render(
+			<GuardAuthZ relation="read" object="role:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
+		});
+	});
+
+	it('should render fallbackOnError when API error occurs and fallbackOnError is provided', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="read"
+				object="role:*"
+				fallbackOnError={<div>Custom error fallback</div>}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Custom error fallback')).toBeInTheDocument();
+		});
+
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render fallbackOnNoPermissions when 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, [false])));
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="update"
+				object="role:123"
+				fallbackOnNoPermissions={NoPermissionFallback}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Access denied')).toBeInTheDocument();
+		});
+
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render null when permission is denied and no fallbackOnNoPermissions provided', 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, [false])));
+			}),
+		);
+
+		const { container } = render(
+			<GuardAuthZ relation="update" object="role:123">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(container.firstChild).toBeNull();
+		});
+
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should render null when permissions object is null', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(200), ctx.json({ data: [], status: 'success' }));
+			}),
+		);
+
+		const { container } = render(
+			<GuardAuthZ relation="read" object="role:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(container.firstChild).toBeNull();
+		});
+
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should pass requiredPermissionName to fallbackOnNoPermissions', async () => {
+		const permission = buildPermission('update', 'role:123');
+
+		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, [false])));
+			}),
+		);
+
+		render(
+			<GuardAuthZ
+				relation="update"
+				object="role:123"
+				fallbackOnNoPermissions={NoPermissionFallbackWithSuggestions}
+			>
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.getByText(/Access denied. Required permission:/),
+			).toBeInTheDocument();
+		});
+
+		expect(
+			screen.getAllByText(
+				new RegExp(permission.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')),
+			).length,
+		).toBeGreaterThan(0);
+		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
+	});
+
+	it('should handle different relation and object combinations', 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, [true])));
+			}),
+		);
+
+		const { rerender } = render(
+			<GuardAuthZ relation="read" object="role:*">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
+		});
+
+		rerender(
+			<GuardAuthZ relation="delete" object="role:456">
+				<TestChild />
+			</GuardAuthZ>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected Content')).toBeInTheDocument();
+		});
+	});
+});
--- a/frontend/src/lib/authz/components/GuardAuthZ/GuardAuthZ.tsx
+++ b/frontend/src/lib/authz/components/GuardAuthZ/GuardAuthZ.tsx
@@ -0,0 +1,50 @@
+import { ReactElement } from 'react';
+import {
+	AuthZObject,
+	AuthZRelation,
+	BrandedPermission,
+} from 'lib/authz/hooks/useAuthZ/types';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
+
+export type GuardAuthZProps<R extends AuthZRelation> = {
+	children: ReactElement;
+	relation: R;
+	object: AuthZObject<R>;
+	fallbackOnLoading?: JSX.Element;
+	fallbackOnError?: JSX.Element;
+	fallbackOnNoPermissions?: (response: {
+		requiredPermissionName: BrandedPermission;
+	}) => JSX.Element;
+};
+
+export function GuardAuthZ<R extends AuthZRelation>({
+	children,
+	relation,
+	object,
+	fallbackOnLoading,
+	fallbackOnError,
+	fallbackOnNoPermissions,
+}: GuardAuthZProps<R>): JSX.Element | null {
+	const permission = buildPermission<R>(relation, object);
+
+	const { permissions, isLoading, error } = useAuthZ([permission]);
+
+	if (isLoading) {
+		return fallbackOnLoading ?? null;
+	}
+
+	if (error) {
+		return fallbackOnError ?? children;
+	}
+
+	if (!permissions?.[permission]?.isGranted) {
+		return (
+			fallbackOnNoPermissions?.({
+				requiredPermissionName: permission,
+			}) ?? null
+		);
+	}
+
+	return children;
+}
--- a/frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.test.tsx
+++ b/frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.test.tsx
@@ -1,39 +1,18 @@
 import { render, screen } from 'tests/test-utils';
 import PermissionDeniedCallout from './PermissionDeniedCallout';
-import {
-	buildPermission,
-	buildObjectString,
-} from 'lib/authz/hooks/useAuthZ/utils';

 describe('PermissionDeniedCallout', () => {
 	it('renders the permission name in the callout message', () => {
-		const deniedPermissions = [
-			buildPermission('read', buildObjectString('serviceaccount', '*')),
-		];
-		render(<PermissionDeniedCallout deniedPermissions={deniedPermissions} />);
+		render(<PermissionDeniedCallout permissionName="serviceaccount:attach" />);

 		expect(screen.getByText(/is not authorized/)).toBeInTheDocument();
-		expect(screen.getByText(/read:serviceaccount:\*/)).toBeInTheDocument();
-	});
-
-	it('renders multiple denied permissions', () => {
-		const deniedPermissions = [
-			buildPermission('read', buildObjectString('serviceaccount', '*')),
-			buildPermission('update', buildObjectString('role', 'admin')),
-		];
-		render(<PermissionDeniedCallout deniedPermissions={deniedPermissions} />);
-
-		expect(screen.getByText(/read:serviceaccount:\*/)).toBeInTheDocument();
-		expect(screen.getByText(/update:role:admin/)).toBeInTheDocument();
+		expect(screen.getByText(/serviceaccount:attach/)).toBeInTheDocument();
 	});

 	it('accepts an optional className', () => {
-		const deniedPermissions = [
-			buildPermission('read', buildObjectString('serviceaccount', '*')),
-		];
 		const { container } = render(
 			<PermissionDeniedCallout
-				deniedPermissions={deniedPermissions}
+				permissionName="serviceaccount:read"
 				className="custom-class"
 			/>,
 		);
--- a/frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.tsx
+++ b/frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.tsx
@@ -3,20 +3,17 @@ import cx from 'classnames';
 import styles from './PermissionDeniedCallout.module.scss';
 import { useAppContext } from 'providers/App/App';
 import { Typography } from '@signozhq/ui/typography';
-import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';

 interface PermissionDeniedCalloutProps {
-	deniedPermissions: BrandedPermission[];
+	permissionName: string;
 	className?: string;
 }

 function PermissionDeniedCallout({
-	deniedPermissions,
+	permissionName,
 	className,
 }: PermissionDeniedCalloutProps): JSX.Element {
 	const { user } = useAppContext();
-	const formattedPermissions = deniedPermissions.map(formatPermission);

 	return (
 		<Callout
@@ -28,12 +25,7 @@ function PermissionDeniedCallout({
 			<Typography.Text className={styles.permission}>
 				<code className={styles.permissionCode}>user/{user.id}</code> is not
 				authorized to perform{' '}
-				{formattedPermissions.map((perm, idx) => (
-					<span key={perm}>
-						<code className={styles.permissionCode}>{perm}</code>
-						{idx < formattedPermissions.length - 1 && ', '}
-					</span>
-				))}
+				<code className={styles.permissionCode}>{permissionName}</code>
 			</Typography.Text>
 		</Callout>
 	);
--- a/frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.test.tsx
+++ b/frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.test.tsx
@@ -1,29 +1,17 @@
 import { render, screen } from 'tests/test-utils';
 import PermissionDeniedFullPage from './PermissionDeniedFullPage';
-import {
-	buildPermission,
-	buildObjectString,
-} from 'lib/authz/hooks/useAuthZ/utils';

 describe('PermissionDeniedFullPage', () => {
 	it('renders the title and subtitle with the permissionName interpolated', () => {
-		const deniedPermissions = [
-			buildPermission('read', buildObjectString('serviceaccount', '*')),
-		];
-		render(<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />);
+		render(<PermissionDeniedFullPage permissionName="serviceaccount:list" />);

 		expect(screen.getByText('Uh-oh! You are not authorized')).toBeInTheDocument();
-		expect(screen.getByText(/read:serviceaccount:\*/)).toBeInTheDocument();
+		expect(screen.getByText(/serviceaccount:list/)).toBeInTheDocument();
 		expect(screen.getByText(/is not authorized to perform/)).toBeInTheDocument();
 	});

-	it('renders with multiple denied permissions', () => {
-		const deniedPermissions = [
-			buildPermission('read', buildObjectString('role', 'admin')),
-			buildPermission('update', buildObjectString('role', 'admin')),
-		];
-		render(<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />);
-		expect(screen.getByText(/read:role:admin/)).toBeInTheDocument();
-		expect(screen.getByText(/update:role:admin/)).toBeInTheDocument();
+	it('renders with a different permissionName', () => {
+		render(<PermissionDeniedFullPage permissionName="role:read" />);
+		expect(screen.getByText(/role:read/)).toBeInTheDocument();
 	});
 });
--- a/frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.tsx
+++ b/frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.tsx
@@ -3,18 +3,15 @@ import { CircleSlash2 } from '@signozhq/icons';
 import styles from './PermissionDeniedFullPage.module.scss';
 import { Style } from '@signozhq/design-tokens';
 import { useAppContext } from 'providers/App/App';
-import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';

 interface PermissionDeniedFullPageProps {
-	deniedPermissions: BrandedPermission[];
+	permissionName: string;
 }

 function PermissionDeniedFullPage({
-	deniedPermissions,
+	permissionName,
 }: PermissionDeniedFullPageProps): JSX.Element {
 	const { user } = useAppContext();
-	const formattedPermissions = deniedPermissions.map(formatPermission);

 	return (
 		<div className={styles.container}>
@@ -25,13 +22,7 @@ function PermissionDeniedFullPage({
 				<p className={styles.title}>Uh-oh! You are not authorized</p>
 				<p className={styles.subtitle}>
 					<code className={styles.permission}>user/{user.id}</code> is not authorized
-					to perform{' '}
-					{formattedPermissions.map((perm, idx) => (
-						<span key={perm}>
-							<code className={styles.permission}>{perm}</code>
-							{idx < formattedPermissions.length - 1 && ', '}
-						</span>
-					))}
+					to perform <code className={styles.permission}>{permissionName}</code>
 				</p>
 			</div>
 		</div>
--- a/frontend/src/lib/authz/components/README.md
+++ b/frontend/src/lib/authz/components/README.md
@@ -1,185 +0,0 @@
-# AuthZ Components
-
-Quick reference for permission-gating UI. All components use AND semantics: user needs ALL permissions in `checks` array.
-
-## Decision Tree
-
-```
-Need to gate...
-├── A button? → AuthZButton
-├── Any element with tooltip on deny? → AuthZTooltip
-├── A section inside a page? → withAuthZContent (preferred)
-│   └── Need JSX wrapper? → AuthZGuardContent
-├── An entire page/route? → withAuthZPage (preferred)
-│   └── Need JSX wrapper? → AuthZGuardPage
-├── Need full control over fallback? → withAuthZ / AuthZGuard
-└── None of above fit?
-    ├── Can create wrapper component? → Create it (like AuthZButton)
-    └── Last resort → useAuthZ hook directly
-```
-
-## Building Permissions
-
-Use `buildPermission`, `buildObjectString` or pre-built constants. Never cast with `as BrandedPermission`.
-
-```tsx
-import { buildPermission, buildObjectString } from 'lib/authz/hooks/useAuthZ/utils';
-import { 
-  RoleCreatePermission,
-  buildRoleReadPermission 
-} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
-
-// Static permission (pre-built)
-const checks = [RoleCreatePermission];
-
-// Dynamic permission (builder fn)
-const checks = [buildRoleReadPermission(roleId)];
-
-// Custom permission (buildPermission + buildObjectString)
-const checks = [buildPermission('read', buildObjectString('dashboard', dashboardId))];
-```
-
-## Creating Permission Helpers
-
-When adding authz to a new resource, create a permissions file under `lib/authz/hooks/useAuthZ/permissions/`.
-
-```tsx
-// lib/authz/hooks/useAuthZ/permissions/dashboard.permissions.ts
-import { buildPermission } from '../utils';
-import type { BrandedPermission } from '../types';
-
-// Collection-level — wildcard, no specific id needed
-export const DashboardCreatePermission = buildPermission('create', 'dashboard:*');
-export const DashboardListPermission = buildPermission('list', 'dashboard:*');
-
-// Resource-level — require specific id
-export const buildDashboardReadPermission = (id: string): BrandedPermission =>
-  buildPermission('read', `dashboard:${id}`);
-export const buildDashboardUpdatePermission = (id: string): BrandedPermission =>
-  buildPermission('update', `dashboard:${id}`);
-export const buildDashboardDeletePermission = (id: string): BrandedPermission =>
-  buildPermission('delete', `dashboard:${id}`);
-```
-
-Pattern:
- `<Resource><Action>Permission` → collection-level const (wildcard `*`)
- `build<Resource><Action>Permission(id)` → resource-level fn (specific id)
-
-## Components
-
-### AuthZButton
-
-Button that disables + shows tooltip when denied.
-
-```tsx
-import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
-
-<AuthZButton checks={[SACreatePermission]} onClick={handleCreate}>
-  Create
-</AuthZButton>
-```
-
-### AuthZTooltip
-
-Wraps any element. Disables child + shows denial tooltip.
-
-```tsx
-import { buildSADeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
-
-<AuthZTooltip checks={[buildSADeletePermission(accountId)]}>
-  <IconButton icon={<Trash />} onClick={handleDelete} />
-</AuthZTooltip>
-```
-
-### withAuthZPage (preferred for pages)
-
-HOC for route-level gating. Wrap at export. Shows `PermissionDeniedFullPage` + `AppLoading`.
-
-```tsx
-import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
-
-function RolesPage(): JSX.Element {
-  return <div>...</div>;
-}
-
-export default withAuthZPage(RolesPage, {
-  checks: [RoleListPermission],
-});
-```
-
-### withAuthZContent (preferred for sections)
-
-HOC for inline sections. Shows `PermissionDeniedCallout` on deny.
-
-```tsx
-import { buildRoleReadPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
-
-function RoleEditor(): JSX.Element {
-  return <div>...</div>;
-}
-
-// Dynamic checks from route params
-export default withAuthZContent(RoleEditor, {
-  checks: (_props, ctx) => [buildRoleReadPermission(ctx.params.roleId)],
-});
-```
-
-### withAuthZ
-
-HOC base. No default fallback. Use when you need custom fallback.
-
-```tsx
-import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
-
-export default withAuthZ(SecretPanel, {
-  checks: [buildPermission('write', 'settings:org')],
-  fallback: <p>No access</p>,
-});
-```
-
-### AuthZGuardPage
-
-JSX variant of `withAuthZPage`. Use when HOC not possible (conditional rendering).
-
-```tsx
-import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
-
-<AuthZGuardPage checks={[RoleListPermission]}>
-  <RolesPage />
-</AuthZGuardPage>
-```
-
-### AuthZGuardContent
-
-JSX variant of `withAuthZContent`. Use when HOC not possible.
-
-```tsx
-import { RoleCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
-
-<AuthZGuardContent checks={[RoleCreatePermission]}>
-  <RoleEditor />
-</AuthZGuardContent>
-```
-
-### AuthZGuard
-
-JSX base guard. No default fallback. Use when you need custom fallback in JSX.
-
-```tsx
-import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
-
-<AuthZGuard
-  checks={[buildPermission('write', 'settings:org')]}
-  fallback={<p>No access</p>}
-  fallbackOnLoading={<Spinner />}
->
-  <SecretContent />
-</AuthZGuard>
-```
-
-## Fallback Components
-
-Don't use these components directly, always prefer using via `withAuthZ` and their variants.
-
- PermissionDeniedCallout: inline error callout. Shows `user/{id} is not authorized to perform {permissions}`.
- PermissionDeniedFullPage: full-page centered error. Same message, bigger presentation.
--- a/frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.authz.test.tsx
+++ b/frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.authz.test.tsx
@@ -0,0 +1,440 @@
+import { ReactElement } from 'react';
+import type { RouteComponentProps } from 'react-router-dom';
+import type {
+	AuthtypesGettableTransactionDTO,
+	AuthtypesTransactionDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, waitFor } from 'tests/test-utils';
+import {
+	AUTHZ_CHECK_URL,
+	authzMockResponse,
+} from 'lib/authz/utils/authz-test-utils';
+
+import { createGuardedRoute } from './createGuardedRoute';
+
+describe('createGuardedRoute', () => {
+	const TestComponent = ({ testProp }: { testProp: string }): ReactElement => (
+		<div>Test Component: {testProp}</div>
+	);
+
+	it('should render component when permission is granted', 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, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should substitute route parameters in object string', 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, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'role:{id}',
+		);
+
+		const mockMatch = {
+			params: { id: '123' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/123',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should handle multiple route parameters', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = (await req.json()) as AuthtypesTransactionDTO[];
+				const txn = payload[0];
+				const responseData: AuthtypesGettableTransactionDTO[] = [
+					{
+						relation: txn.relation,
+						object: {
+							resource: {
+								kind: txn.object.resource.kind,
+								type: txn.object.resource.type,
+							},
+							selector: '123:456',
+						},
+						authorized: true,
+					},
+				];
+				return res(
+					ctx.status(200),
+					ctx.json({ data: responseData, status: 'success' }),
+				);
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'update',
+			'role:{id}:{version}',
+		);
+
+		const mockMatch = {
+			params: { id: '123', version: '456' },
+			isExact: true,
+			path: '/dashboard/:id/:version',
+			url: '/dashboard/123/456',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should keep placeholder when route parameter is missing', 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, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'role:{id}',
+		);
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should render loading fallback when loading', () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
+				return res(
+					ctx.delay('infinite'),
+					ctx.status(200),
+					ctx.json({ data: [], status: 'success' }),
+				);
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		expect(screen.getByText('SigNoz')).toBeInTheDocument();
+		expect(
+			screen.queryByText('Test Component: test-value'),
+		).not.toBeInTheDocument();
+	});
+
+	it('should render the component when API error occurs (fail open)', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
+				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+
+	it('should render no permissions fallback when 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, [false])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'update',
+			'role:{id}',
+		);
+
+		const mockMatch = {
+			params: { id: '123' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/123',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			const heading = document.querySelector('h3');
+			expect(heading).toBeInTheDocument();
+			expect(heading?.textContent).toMatch(/not authorized/i);
+		});
+
+		expect(screen.getByText(/update:role:123/)).toBeInTheDocument();
+		expect(
+			screen.queryByText('Test Component: test-value'),
+		).not.toBeInTheDocument();
+	});
+
+	it('should pass all props to wrapped component', 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, [true])));
+			}),
+		);
+
+		const ComponentWithMultipleProps = ({
+			prop1,
+			prop2,
+			prop3,
+		}: {
+			prop1: string;
+			prop2: number;
+			prop3: boolean;
+		}): ReactElement => (
+			<div>
+				{prop1} - {prop2} - {prop3.toString()}
+			</div>
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			ComponentWithMultipleProps,
+			'read',
+			'role:*',
+		);
+
+		const mockMatch = {
+			params: {},
+			isExact: true,
+			path: '/dashboard',
+			url: '/dashboard',
+		};
+
+		const props = {
+			prop1: 'value1',
+			prop2: 42,
+			prop3: true,
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('value1 - 42 - true')).toBeInTheDocument();
+		});
+	});
+
+	it('should memoize resolved object based on route params', async () => {
+		let requestCount = 0;
+		const requestedObjects: string[] = [];
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				requestCount++;
+				const payload = (await req.json()) as AuthtypesTransactionDTO[];
+				const obj = payload[0]?.object;
+				const kind = obj?.resource?.kind;
+				const selector = obj?.selector ?? '*';
+				const objectStr = `${kind}:${selector}`;
+				requestedObjects.push(objectStr ?? '');
+
+				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'read',
+			'role:{id}',
+		);
+
+		const mockMatch1 = {
+			params: { id: '123' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/123',
+		};
+
+		const props1 = {
+			testProp: 'test-value-1',
+			match: mockMatch1,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		const { unmount } = render(<GuardedComponent {...props1} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value-1')).toBeInTheDocument();
+		});
+
+		expect(requestCount).toBe(1);
+		expect(requestedObjects).toContain('role:123');
+
+		unmount();
+
+		const mockMatch2 = {
+			params: { id: '456' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/456',
+		};
+
+		const props2 = {
+			testProp: 'test-value-2',
+			match: mockMatch2,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props2} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value-2')).toBeInTheDocument();
+		});
+
+		expect(requestCount).toBe(2);
+		expect(requestedObjects).toContain('role:456');
+	});
+
+	it('should handle different relation types', 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, [true])));
+			}),
+		);
+
+		const GuardedComponent = createGuardedRoute(
+			TestComponent,
+			'delete',
+			'role:{id}',
+		);
+
+		const mockMatch = {
+			params: { id: '789' },
+			isExact: true,
+			path: '/dashboard/:id',
+			url: '/dashboard/789',
+		};
+
+		const props = {
+			testProp: 'test-value',
+			match: mockMatch,
+			location: {} as unknown as RouteComponentProps['location'],
+			history: {} as unknown as RouteComponentProps['history'],
+		};
+
+		render(<GuardedComponent {...props} />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
+		});
+	});
+});
--- a/frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.styles.scss
+++ b/frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.styles.scss
@@ -0,0 +1,41 @@
+.guard-authz-error-no-authz {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: 100%;
+	height: 100%;
+
+	padding: 24px;
+
+	.guard-authz-error-no-authz-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		gap: 8px;
+		max-width: 500px;
+	}
+
+	img {
+		width: 32px;
+		height: 32px;
+	}
+
+	h3 {
+		font-size: 18px;
+		color: var(--l1-foreground);
+		line-height: 18px;
+	}
+
+	p {
+		font-size: 14px;
+		color: var(--l3-foreground);
+		line-height: 18px;
+
+		span {
+			background-color: var(--l3-background);
+			white-space: nowrap;
+			padding: 0 2px;
+		}
+	}
+}
--- a/frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.tsx
+++ b/frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.tsx
@@ -0,0 +1,67 @@
+import { ComponentType, ReactElement, useMemo } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import {
+	AuthZObject,
+	AuthZRelation,
+	BrandedPermission,
+} from 'lib/authz/hooks/useAuthZ/types';
+import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
+import { useAppContext } from 'providers/App/App';
+
+import noDataUrl from 'assets/Icons/no-data.svg';
+
+import AppLoading from '../../../../components/AppLoading/AppLoading';
+import { GuardAuthZ } from '../GuardAuthZ/GuardAuthZ';
+
+import './createGuardedRoute.styles.scss';
+
+function OnNoPermissionsFallback(response: {
+	requiredPermissionName: BrandedPermission;
+}): ReactElement {
+	const { user } = useAppContext();
+
+	return (
+		<div className="guard-authz-error-no-authz">
+			<div className="guard-authz-error-no-authz-content">
+				<img src={noDataUrl} alt="No permission" />
+				<h3>Uh-oh! You are not authorized</h3>
+				<p>
+					<code>user/{user.id}</code> is not authorized to perform{' '}
+					<code>{formatPermission(response.requiredPermissionName)}</code>
+				</p>
+			</div>
+		</div>
+	);
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function createGuardedRoute<P extends object, R extends AuthZRelation>(
+	Component: ComponentType<P>,
+	relation: R,
+	object: AuthZObject<R>,
+): ComponentType<P & RouteComponentProps<Record<string, string>>> {
+	return function GuardedRouteComponent(
+		props: P & RouteComponentProps<Record<string, string>>,
+	): ReactElement {
+		const resolvedObject = useMemo(() => {
+			const paramPattern = /\{([^}]+)\}/g;
+			return object.replace(paramPattern, (match, paramName) => {
+				const paramValue = props.match?.params?.[paramName];
+				return paramValue !== undefined ? paramValue : match;
+			}) as AuthZObject<R>;
+		}, [props.match?.params]);
+
+		return (
+			<GuardAuthZ
+				relation={relation}
+				object={resolvedObject}
+				fallbackOnLoading={<AppLoading />}
+				fallbackOnNoPermissions={(response): ReactElement => (
+					<OnNoPermissionsFallback {...response} />
+				)}
+			>
+				<Component {...props} />
+			</GuardAuthZ>
+		);
+	};
+}
--- a/frontend/src/lib/authz/components/withAuthZ/withAuthZ.authz.test.tsx
+++ b/frontend/src/lib/authz/components/withAuthZ/withAuthZ.authz.test.tsx
@@ -1,578 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor, act } from 'tests/test-utils';
-import { useQueryClient } from 'react-query';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import {
-	AUTHZ_CHECK_URL,
-	authzMockResponse,
-	setupAuthzAllow,
-	setupAuthzDeny,
-	setupAuthzGrantByPrefix,
-} from 'lib/authz/utils/authz-test-utils';
-import type { AuthZObject } from 'lib/authz/hooks/useAuthZ/types';
-import {
-	buildObjectString,
-	buildPermission,
-} from 'lib/authz/hooks/useAuthZ/utils';
-
-import { withAuthZ, RouterContext } from './withAuthZ';
-import { withAuthZContent } from './withAuthZContent';
-import { withAuthZPage } from './withAuthZPage';
-
-const mockUseParams = jest.fn();
-const mockUseLocation = jest.fn();
-
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useParams: (): Record<string, string> => mockUseParams(),
-	useLocation: (): { pathname: string; search: string } => mockUseLocation(),
-}));
-
-const readPerm = buildPermission('read', 'role:*' as AuthZObject<'read'>);
-
-function Base(): JSX.Element {
-	return <div>Base component</div>;
-}
-
-beforeEach(() => {
-	mockUseParams.mockReturnValue({});
-	mockUseLocation.mockReturnValue({ pathname: '/', search: '' });
-});
-
-describe('withAuthZ', () => {
-	it('renders the wrapped component when allowed', async () => {
-		server.use(setupAuthzAllow(readPerm));
-		const Guarded = withAuthZ(Base, { checks: [readPerm] });
-
-		render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Base component')).toBeInTheDocument();
-		});
-	});
-
-	it('renders nothing when denied without a fallback', async () => {
-		server.use(setupAuthzDeny(readPerm));
-		const Guarded = withAuthZ(Base, { checks: [readPerm] });
-
-		render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.queryByText('Base component')).not.toBeInTheDocument();
-		});
-	});
-
-	it('renders the provided fallback when denied', async () => {
-		server.use(setupAuthzDeny(readPerm));
-		const Guarded = withAuthZ(Base, {
-			checks: [readPerm],
-			fallback: <div>No access</div>,
-		});
-
-		render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.getByText('No access')).toBeInTheDocument();
-		});
-	});
-
-	it('resolves checks from props via the selector form', async () => {
-		type Props = { roleId: string };
-		const RoleView = ({ roleId }: Props): JSX.Element => <div>role {roleId}</div>;
-		const deniedPerm = buildPermission(
-			'read',
-			buildObjectString<'read'>('role', 'r-1'),
-		);
-		server.use(setupAuthzDeny(deniedPerm));
-
-		const Guarded = withAuthZ<Props>(RoleView, {
-			checks: ({ roleId }) => [
-				buildPermission('read', buildObjectString<'read'>('role', roleId)),
-			],
-			fallback: <div>denied selector</div>,
-		});
-
-		render(<Guarded roleId="r-1" />);
-
-		await waitFor(() => {
-			expect(screen.getByText('denied selector')).toBeInTheDocument();
-		});
-		expect(screen.queryByText('role r-1')).not.toBeInTheDocument();
-	});
-
-	it('sets a descriptive displayName', () => {
-		const Guarded = withAuthZ(Base, { checks: [readPerm] });
-		expect(Guarded.displayName).toBe('withAuthZ(Base)');
-	});
-});
-
-describe('withAuthZPage', () => {
-	it('renders the full-page denied screen when denied', async () => {
-		server.use(setupAuthzDeny(readPerm));
-		const Guarded = withAuthZPage(Base, { checks: [readPerm] });
-
-		render(<Guarded />);
-
-		await waitFor(() => {
-			expect(
-				screen.getByText('Uh-oh! You are not authorized'),
-			).toBeInTheDocument();
-		});
-	});
-});
-
-describe('withAuthZContent', () => {
-	it('renders the denied callout when denied', async () => {
-		server.use(setupAuthzDeny(readPerm));
-		const Guarded = withAuthZContent(Base, { checks: [readPerm] });
-
-		render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.getByText('read:role:*')).toBeInTheDocument();
-		});
-		expect(screen.queryByText('Base component')).not.toBeInTheDocument();
-	});
-});
-
-describe('withAuthZ router context', () => {
-	it('extracts checks from route params via router.params', async () => {
-		mockUseParams.mockReturnValue({ roleId: 'r-123' });
-
-		const rolePerm = buildPermission(
-			'read',
-			buildObjectString<'read'>('role', 'r-123'),
-		);
-		server.use(setupAuthzAllow(rolePerm));
-
-		const RoleView = (): JSX.Element => <div>role view</div>;
-		const Guarded = withAuthZ(RoleView, {
-			checks: (_props, router: RouterContext) => [
-				buildPermission(
-					'read',
-					buildObjectString<'read'>('role', router.params.roleId ?? ''),
-				),
-			],
-		});
-
-		render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.getByText('role view')).toBeInTheDocument();
-		});
-	});
-
-	it('extracts checks from query params via router.searchParams', async () => {
-		mockUseLocation.mockReturnValue({
-			pathname: '/roles',
-			search: '?roleId=r-456',
-		});
-
-		const rolePerm = buildPermission(
-			'read',
-			buildObjectString<'read'>('role', 'r-456'),
-		);
-		server.use(setupAuthzAllow(rolePerm));
-
-		const RoleListView = (): JSX.Element => <div>role list view</div>;
-		const Guarded = withAuthZ(RoleListView, {
-			checks: (_props, router: RouterContext) => [
-				buildPermission(
-					'read',
-					buildObjectString<'read'>('role', router.searchParams.get('roleId') ?? ''),
-				),
-			],
-		});
-
-		render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.getByText('role list view')).toBeInTheDocument();
-		});
-	});
-
-	it('extracts checks from pathname via router.matchPath', async () => {
-		mockUseLocation.mockReturnValue({
-			pathname: '/settings/roles/r-789/edit',
-			search: '',
-		});
-
-		const rolePerm = buildPermission(
-			'update',
-			buildObjectString<'update'>('role', 'r-789'),
-		);
-		server.use(setupAuthzAllow(rolePerm));
-
-		const EditRoleView = (): JSX.Element => <div>edit role</div>;
-		const Guarded = withAuthZ(EditRoleView, {
-			checks: (_props, router: RouterContext) => {
-				const match = router.matchPath<{ roleId: string }>(
-					'/settings/roles/:roleId/edit',
-				);
-				return match
-					? [
-							buildPermission(
-								'update',
-								buildObjectString<'update'>('role', match.roleId),
-							),
-						]
-					: [];
-			},
-		});
-
-		render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.getByText('edit role')).toBeInTheDocument();
-		});
-	});
-
-	it('denies when router-derived permission is not allowed', async () => {
-		mockUseParams.mockReturnValue({ roleId: 'r-denied' });
-
-		const deniedPerm = buildPermission(
-			'read',
-			buildObjectString<'read'>('role', 'r-denied'),
-		);
-		server.use(setupAuthzDeny(deniedPerm));
-
-		const RoleView = (): JSX.Element => <div>role view</div>;
-		const Guarded = withAuthZ(RoleView, {
-			checks: (_props, router: RouterContext) => [
-				buildPermission(
-					'read',
-					buildObjectString<'read'>('role', router.params.roleId ?? ''),
-				),
-			],
-			fallback: <div>access denied</div>,
-		});
-
-		render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.getByText('access denied')).toBeInTheDocument();
-		});
-		expect(screen.queryByText('role view')).not.toBeInTheDocument();
-	});
-});
-
-describe('withAuthZ router context stability', () => {
-	let renderCount = 0;
-
-	function RenderCounter(): JSX.Element {
-		renderCount += 1;
-		return <div data-testid="render-count">{renderCount}</div>;
-	}
-
-	beforeEach(() => {
-		renderCount = 0;
-		server.use(setupAuthzGrantByPrefix('read||__||role'));
-	});
-
-	it('does not re-render when useParams returns new object with same values', async () => {
-		mockUseParams.mockReturnValue({ roleId: 'r-1' });
-		mockUseLocation.mockReturnValue({ pathname: '/', search: '' });
-
-		const Guarded = withAuthZ(RenderCounter, {
-			checks: (_props, router: RouterContext) => [
-				buildPermission(
-					'read',
-					buildObjectString<'read'>('role', router.params.roleId ?? '*'),
-				),
-			],
-		});
-
-		const { rerender } = render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('render-count')).toBeInTheDocument();
-		});
-
-		const initialCount = renderCount;
-
-		// Return NEW object with SAME values — should not cause re-render
-		mockUseParams.mockReturnValue({ roleId: 'r-1' });
-		rerender(<Guarded />);
-
-		// Allow any pending effects to flush
-		await waitFor(() => {
-			expect(renderCount).toBe(initialCount);
-		});
-	});
-
-	it('does not re-render when useLocation returns new object with same pathname', async () => {
-		mockUseParams.mockReturnValue({});
-		mockUseLocation.mockReturnValue({ pathname: '/roles', search: '' });
-
-		const Guarded = withAuthZ(RenderCounter, {
-			checks: (_props, router: RouterContext) => {
-				const match = router.matchPath<{ id: string }>('/roles/:id');
-				return match
-					? [buildPermission('read', buildObjectString<'read'>('role', match.id))]
-					: [readPerm];
-			},
-		});
-
-		const { rerender } = render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('render-count')).toBeInTheDocument();
-		});
-
-		const initialCount = renderCount;
-
-		// Return NEW object with SAME pathname — should not cause re-render
-		mockUseLocation.mockReturnValue({ pathname: '/roles', search: '' });
-		rerender(<Guarded />);
-
-		await waitFor(() => {
-			expect(renderCount).toBe(initialCount);
-		});
-	});
-
-	it('does not re-render when useLocation returns new object with same search params', async () => {
-		mockUseParams.mockReturnValue({});
-		mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=keys' });
-
-		const Guarded = withAuthZ(RenderCounter, {
-			checks: (_props, router: RouterContext) => {
-				// Access searchParams to ensure it's part of the dependency chain
-				void router.searchParams.get('tab');
-				return [readPerm];
-			},
-		});
-
-		const { rerender } = render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('render-count')).toBeInTheDocument();
-		});
-
-		const initialCount = renderCount;
-
-		// Return NEW object with SAME search — should not cause re-render
-		mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=keys' });
-		rerender(<Guarded />);
-
-		await waitFor(() => {
-			expect(renderCount).toBe(initialCount);
-		});
-	});
-
-	it('re-renders when params values actually change', async () => {
-		mockUseParams.mockReturnValue({ roleId: 'r-1' });
-		mockUseLocation.mockReturnValue({ pathname: '/', search: '' });
-
-		const Guarded = withAuthZ(RenderCounter, {
-			checks: (_props, router: RouterContext) => [
-				buildPermission(
-					'read',
-					buildObjectString<'read'>('role', router.params.roleId ?? '*'),
-				),
-			],
-		});
-
-		const { unmount } = render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('render-count')).toBeInTheDocument();
-		});
-
-		const initialCount = renderCount;
-		unmount();
-
-		// Return DIFFERENT values — re-mount with new mock values
-		mockUseParams.mockReturnValue({ roleId: 'r-2' });
-		render(<Guarded />);
-
-		await waitFor(() => {
-			expect(renderCount).toBeGreaterThan(initialCount);
-		});
-	});
-
-	it('re-renders when pathname actually changes', async () => {
-		mockUseParams.mockReturnValue({});
-		mockUseLocation.mockReturnValue({ pathname: '/roles', search: '' });
-
-		const Guarded = withAuthZ(RenderCounter, {
-			checks: [readPerm],
-		});
-
-		const { unmount } = render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('render-count')).toBeInTheDocument();
-		});
-
-		const initialCount = renderCount;
-		unmount();
-
-		// DIFFERENT pathname — re-mount with new mock values
-		mockUseLocation.mockReturnValue({ pathname: '/users', search: '' });
-		render(<Guarded />);
-
-		await waitFor(() => {
-			expect(renderCount).toBeGreaterThan(initialCount);
-		});
-	});
-
-	it('re-renders when search params actually change', async () => {
-		mockUseParams.mockReturnValue({});
-		mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=keys' });
-
-		const Guarded = withAuthZ(RenderCounter, {
-			checks: [readPerm],
-		});
-
-		const { unmount } = render(<Guarded />);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('render-count')).toBeInTheDocument();
-		});
-
-		const initialCount = renderCount;
-		unmount();
-
-		// DIFFERENT search — re-mount with new mock values
-		mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=details' });
-		render(<Guarded />);
-
-		await waitFor(() => {
-			expect(renderCount).toBeGreaterThan(initialCount);
-		});
-	});
-});
-
-describe('withAuthZContent cache invalidation', () => {
-	const testPerm = buildPermission(
-		'read',
-		'role:test-invalidation' as AuthZObject<'read'>,
-	);
-	// Callout displays permission as "relation:object" format
-	const displayedPerm = 'read:role:test-invalidation';
-
-	function ContentComponent(): JSX.Element {
-		return <div data-testid="protected-content">Protected Content</div>;
-	}
-
-	function InvalidationTrigger({
-		permission,
-		onReady,
-	}: {
-		permission: string;
-		onReady: (invalidate: () => Promise<void>) => void;
-	}): null {
-		const queryClient = useQueryClient();
-
-		React.useEffect(() => {
-			onReady(async () => {
-				// Reset query to initial state and trigger refetch (matches devtools behavior)
-				await queryClient.resetQueries(['authz', permission]);
-			});
-		}, [queryClient, permission, onReady]);
-
-		return null;
-	}
-
-	it('re-renders from allowed to denied when cache is invalidated', async () => {
-		let shouldGrant = true;
-		let invalidateFn: (() => Promise<void>) | null = null;
-
-		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, [shouldGrant])),
-				);
-			}),
-		);
-
-		const Guarded = withAuthZContent(ContentComponent, { checks: [testPerm] });
-
-		render(
-			<>
-				<Guarded />
-				<InvalidationTrigger
-					permission={testPerm}
-					onReady={(fn): void => {
-						invalidateFn = fn;
-					}}
-				/>
-			</>,
-		);
-
-		// Initially allowed - should show content
-		await waitFor(() => {
-			expect(screen.getByTestId('protected-content')).toBeInTheDocument();
-		});
-
-		// Change server response to deny
-		shouldGrant = false;
-
-		// Invalidate cache
-		await act(async () => {
-			await invalidateFn?.();
-		});
-
-		// Should now show denied callout
-		await waitFor(() => {
-			expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
-		});
-
-		// Callout should show the denied permission
-		expect(screen.getByRole('alert')).toBeInTheDocument();
-		expect(screen.getByText(displayedPerm)).toBeInTheDocument();
-	});
-
-	it('re-renders from denied to allowed when cache is invalidated', async () => {
-		let shouldGrant = false;
-		let invalidateFn: (() => Promise<void>) | null = null;
-
-		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, [shouldGrant])),
-				);
-			}),
-		);
-
-		const Guarded = withAuthZContent(ContentComponent, { checks: [testPerm] });
-
-		render(
-			<>
-				<Guarded />
-				<InvalidationTrigger
-					permission={testPerm}
-					onReady={(fn): void => {
-						invalidateFn = fn;
-					}}
-				/>
-			</>,
-		);
-
-		// Initially denied - should show callout
-		await waitFor(() => {
-			expect(screen.getByRole('alert')).toBeInTheDocument();
-		});
-		expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
-
-		// Change server response to allow
-		shouldGrant = true;
-
-		// Invalidate cache
-		await act(async () => {
-			await invalidateFn?.();
-		});
-
-		// Should now show protected content
-		await waitFor(() => {
-			expect(screen.getByTestId('protected-content')).toBeInTheDocument();
-		});
-
-		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-	});
-});
--- a/frontend/src/lib/authz/components/withAuthZ/withAuthZ.tsx
+++ b/frontend/src/lib/authz/components/withAuthZ/withAuthZ.tsx
@@ -1,13 +0,0 @@
-import { ComponentType } from 'react';
-import { AuthZGuard } from 'lib/authz/components/AuthZGuard/AuthZGuard';
-
-import { createAuthZHOC, WithAuthZOptions } from './withAuthZ.utils';
-
-export type { RouterContext, WithAuthZOptions } from './withAuthZ.utils';
-
-export function withAuthZ<P extends object>(
-	Component: ComponentType<P>,
-	opts: WithAuthZOptions<P>,
-): ComponentType<P> {
-	return createAuthZHOC(AuthZGuard, 'withAuthZ', Component, opts);
-}
--- a/frontend/src/lib/authz/components/withAuthZ/withAuthZ.utils.tsx
+++ b/frontend/src/lib/authz/components/withAuthZ/withAuthZ.utils.tsx
@@ -1,108 +0,0 @@
-import { ComponentType, ReactElement, createElement, useMemo } from 'react';
-import {
-	matchPath as reactRouterMatchPath,
-	useLocation,
-	useParams,
-} from 'react-router-dom';
-import type { AuthZGuardProps } from 'lib/authz/components/AuthZGuard/AuthZGuard';
-import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-
-export type RouterContext = {
-	/**
-	 * Route params from useParams (e.g. `/roles/:roleId` → `{ roleId: "r-1" }`)
-	 */
-	params: Record<string, string | undefined>;
-	pathname: string;
-	/**
-	 * Query params as URLSearchParams (use `.get('key')` to read)
-	 */
-	searchParams: URLSearchParams;
-	/**
-	 * Extract params from pathname using a route pattern.
-	 * Returns null if pattern doesn't match.
-	 * @example router.matchPath<{ id: string }>('/edit/:id')?.id
-	 */
-	matchPath: <Params extends Record<string, string>>(
-		pattern: string,
-	) => Params | null;
-};
-
-export type WithAuthZOptions<P> = {
-	/**
-	 * Static checks, or a selector deriving them from props and router context.
-	 * Use router context to extract dynamic values from route params, pathname, or query params.
-	 * @example
-	 * // From route params
-	 * checks: (props, router) => [buildPermission('read', `role:${router.params.roleId}`)]
-	 * // From query params
-	 * checks: (props, router) => [buildPermission('read', `dashboard:${router.searchParams.get('id')}`)]
-	 * // From pathname matching
-	 * checks: (props, router) => {
-	 *   const match = router.matchPath<{ id: string }>('/edit/:id');
-	 *   return match ? [buildPermission('update', `role:${match.id}`)] : [];
-	 * }
-	 */
-	checks:
-		| BrandedPermission[]
-		| ((props: P, router: RouterContext) => BrandedPermission[]);
-	fallback?: AuthZGuardProps['fallback'];
-	fallbackOnLoading?: AuthZGuardProps['fallbackOnLoading'];
-	failOpenOnError?: AuthZGuardProps['onFailRenderContent'];
-};
-
-function useStableParams(): Record<string, string | undefined> {
-	const params = useParams();
-	const paramsJson = JSON.stringify(params);
-	return useMemo(() => JSON.parse(paramsJson), [paramsJson]);
-}
-
-function useRouterContext(): RouterContext {
-	const params = useStableParams();
-	const { pathname, search } = useLocation();
-	const searchParams = useMemo(() => new URLSearchParams(search), [search]);
-
-	return useMemo(
-		(): RouterContext => ({
-			params,
-			pathname,
-			searchParams,
-			matchPath: <Params extends Record<string, string>>(
-				pattern: string,
-			): Params | null => {
-				const match = reactRouterMatchPath<Params>(pathname, {
-					path: pattern,
-					exact: false,
-				});
-				return match?.params ?? null;
-			},
-		}),
-		[params, pathname, searchParams],
-	);
-}
-
-export function createAuthZHOC<P extends object>(
-	Guard: ComponentType<AuthZGuardProps>,
-	hocName: string,
-	Component: ComponentType<P>,
-	opts: WithAuthZOptions<P>,
-): ComponentType<P> {
-	const { checks, ...guardProps } = opts;
-
-	function Wrapped(props: P): ReactElement | null {
-		const router = useRouterContext();
-		const resolvedChecks =
-			typeof checks === 'function' ? checks(props, router) : checks;
-
-		return (
-			<Guard checks={resolvedChecks} {...guardProps}>
-				{createElement(Component, props)}
-			</Guard>
-		);
-	}
-
-	Wrapped.displayName = `${hocName}(${
-		Component.displayName || Component.name || 'Component'
-	})`;
-
-	return Wrapped;
-}
--- a/frontend/src/lib/authz/components/withAuthZ/withAuthZContent.tsx
+++ b/frontend/src/lib/authz/components/withAuthZ/withAuthZContent.tsx
@@ -1,11 +0,0 @@
-import { ComponentType } from 'react';
-import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
-
-import { createAuthZHOC, WithAuthZOptions } from './withAuthZ.utils';
-
-export function withAuthZContent<P extends object>(
-	Component: ComponentType<P>,
-	opts: WithAuthZOptions<P>,
-): ComponentType<P> {
-	return createAuthZHOC(AuthZGuardContent, 'withAuthZContent', Component, opts);
-}
--- a/frontend/src/lib/authz/components/withAuthZ/withAuthZPage.tsx
+++ b/frontend/src/lib/authz/components/withAuthZ/withAuthZPage.tsx
@@ -1,11 +0,0 @@
-import { ComponentType } from 'react';
-import { AuthZGuardPage } from 'lib/authz/components/AuthZGuard/AuthZGuardPage';
-
-import { createAuthZHOC, WithAuthZOptions } from './withAuthZ.utils';
-
-export function withAuthZPage<P extends object>(
-	Component: ComponentType<P>,
-	opts: WithAuthZOptions<P>,
-): ComponentType<P> {
-	return createAuthZHOC(AuthZGuardPage, 'withAuthZPage', Component, opts);
-}
--- a/frontend/src/lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator.module.css
+++ b/frontend/src/lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator.module.css
@@ -1,38 +0,0 @@
-.container {
-	position: fixed;
-	top: 12px;
-	left: 50%;
-	transform: translateX(-50%);
-	z-index: 9998;
-	pointer-events: auto;
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.button {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	box-shadow:
-		0 4px 12px rgb(0 0 0 / 15%),
-		0 0 0 1px rgb(0 0 0 / 5%);
-}
-
-.badge {
-	margin-left: 4px;
-}
-
-.closeButton {
-	padding: 4px;
-	min-width: auto;
-	background: var(--bg-vanilla-300);
-	border-radius: 4px;
-	box-shadow:
-		0 4px 12px rgb(0 0 0 / 15%),
-		0 0 0 1px rgb(0 0 0 / 5%);
-}
-
-.closeButton:hover {
-	background: var(--bg-vanilla-400);
-}
--- a/frontend/src/lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator.tsx
+++ b/frontend/src/lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator.tsx
@@ -1,62 +0,0 @@
-import { X } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { useState } from 'react';
-import { createPortal } from 'react-dom';
-
-import { useAuthZDevStore } from '../useAuthZDevStore';
-
-import styles from './AuthZDevFloatingIndicator.module.css';
-
-export function AuthZDevFloatingIndicator(): JSX.Element | null {
-	const overrides = useAuthZDevStore((s) => s.overrides);
-	const isModalOpen = useAuthZDevStore((s) => s.isModalOpen);
-	const openModal = useAuthZDevStore((s) => s.openModal);
-	const [isDismissed, setIsDismissed] = useState(false);
-
-	const overrideCount = Object.keys(overrides).length;
-
-	if (overrideCount === 0 || isModalOpen || isDismissed) {
-		return null;
-	}
-
-	const handleOpen = (): void => {
-		setIsDismissed(false);
-		openModal();
-	};
-
-	const handleDismiss = (e: React.MouseEvent): void => {
-		e.stopPropagation();
-		setIsDismissed(true);
-	};
-
-	return createPortal(
-		<div className={styles.container}>
-			<Button
-				variant="solid"
-				color="warning"
-				size="sm"
-				onClick={handleOpen}
-				className={styles.button}
-				data-testid="authz-dev-floating-indicator"
-			>
-				AuthZ Overrides
-				<Badge color="warning" className={styles.badge}>
-					{overrideCount}
-				</Badge>
-			</Button>
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="sm"
-				onClick={handleDismiss}
-				className={styles.closeButton}
-				aria-label="Dismiss indicator"
-				data-testid="authz-dev-floating-dismiss"
-			>
-				<X size={14} />
-			</Button>
-		</div>,
-		document.body,
-	);
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Srikanth Chekuri	c6bb7569af	Merge branch 'main' into issue-5535	2026-07-06 11:51:09 +05:30
srikanthccv	5d431f9f6f	chore: add to ci	2026-07-06 11:50:46 +05:30
srikanthccv	1f0113645e	chore: add integration tests for metrics under reduction - query part	2026-07-06 11:19:45 +05:30
Ashwin Bhatkal	d490126162	fix(dashboard-v2): list-page bug bash fixes (#11939 ) * fix(dashboard-v2): refresh the list after deleting a dashboard Delete invalidated invalidateListDashboardsV2, but the list renders from useListDashboardsForUserV2 (as does pin/unpin), so the deleted row lingered until a manual reload. Invalidate the for-user list instead. * feat(dashboard-v2): show a lock icon on locked dashboards in the list The list rows already carry `locked`; surface it with a LockKeyhole icon (with a tooltip) next to the row actions, mirroring the detail-page header. * fix(dashboard-v2): show pinned icon (not unpin) until the pin is hovered A pinned row rendered the PinOff ("unpin") icon at rest, so it read as an action rather than a state. Show the filled Pin by default and reveal PinOff only on hover of the pin button. * fix(dashboard-v2): break long unbroken dashboard names in the list The list title clamps to 3 lines but a long unbroken string could still overflow the row horizontally; add overflow-wrap so it wraps within the clamp. (The detail header already single-line truncates with a tooltip.) * fix(dashboard-v2): use sienna tags in the dashboard header The create modal and settings tag inputs already render sienna chips (matching the list rows); the detail-page header still showed amber/warning badges. Switch them to sienna for consistency across create, configure and display. * fix(dashboard-v2): use a columns icon for the list columns control The columns/metadata popover trigger used the HdmiPort icon, which doesn't read as 'columns'. Swap it for the Columns3 icon. * fix(dashboard-v2): close the new-dashboard modal after creating Blank/Import/Template create flows navigated to the new dashboard but left the modal mounted, so it lingered over the detail page. Call onClose() on success (Import/Template now take the onClose prop the modal already passes to Blank). * feat(dashboard-v2): open the public dashboard from the header globe The header globe now reflects the real public state (via usePublicDashboardMeta, a deduped read) and is clickable — it opens the public dashboard page in a new tab, with the tooltip updated to say so alongside the existing text. * fix(dashboard-v2): embed the V1 template gallery in the new-dashboard modal The V2 templates tab rendered a mock gallery. Until the templates BE API lands, show the existing V1 gallery instead: extract it into DashboardTemplatesContent (shared by the V1 modal and the V2 tab, no modal-in-modal) and embed it inline in the V2 'From a template' tab. The V1 templates are placeholders, so the action creates a blank dashboard and closes the modal. Drops the now-unused mock templatesData. * feat(dashboard-v2): click-to-unlock header lock icon + keep header icons on long names The header lock icon is now a click-to-unlock control for author/admin (routes to the existing lock toggle; static for others). Give it flex-shrink:0 (like the public globe and description icons) so the description/public/lock icons and the tag overflow stay visible when the title is long and truncates. * feat(dashboard-v2): add Rename and Lock/Unlock to the list row actions Rename opens a small dialog that patches /spec/display/name and refreshes the list (shown for unlocked dashboards). Lock/Unlock toggles via lock/unlockDashboardV2 and refreshes the list, gated to author/admin on non-integration dashboards (mirroring the detail-page gate). * fix(dashboard-v2): list row menu — lock casing, disabled Rename tooltip, stop nav on menu click - Capitalize 'Lock/Unlock Dashboard'. - Show Rename disabled (not hidden) on locked dashboards with a tooltip explaining why (matches Delete). - Stop clicks inside the actions menu from bubbling to the row's navigate handler (disabled items were opening the dashboard). * fix(dashboard-v2): single-line row title + bottom-anchored tooltip Truncate the list row title to a single line with an ellipsis (was a 3-line clamp), and show the full name in a tooltip anchored to the bottom (auto-flips to top, with an arrow) instead of the left. * feat(dashboard-v2): session-local lock toggle in the header The header lock control now reflects a session-local state: it appears once the dashboard is locked (on load or during the session) and stays as a lock/unlock toggle for the rest of the page. A dashboard that loads unlocked shows no icon until it's locked. Clicking flips state optimistically so it no longer depends on the refetch to update. * fix(dashboard-v2): add top margin above the public-dashboard variables hint * feat(dashboard-v2): run search with a Run query button + Cmd/Ctrl+Enter Show a 'Run query' affordance with the OS-aware ⌘/Ctrl ⏎ hint in the search bar (matching the query builder) and run the search on Cmd/Ctrl+Enter. * fix(dashboard-v2): make the filter Clear button prominent Use the primary (outlined) style for the Clear-filters button so it stands out once a filter is applied. * revert(dashboard-v2): restore multi-line clamp for list row title Single-line truncation broke the row's responsiveness; revert to the 3-line clamp. Keeps the bottom-anchored tooltip for long names. * fix(dashboard-v2): show the lock tooltip on disabled Rename/Delete items antd tooltips don't fire on disabled buttons; wrap them in a span the tooltip can attach to so the 'dashboard is locked' reason shows on hover. * fix(dashboard-v2): header tooltips update when moving between icons Set disableHoverableContent on the title/description/public/lock tooltips so leaving a trigger closes its tooltip immediately, letting the next icon's tooltip open in both directions (was sticking when moving public → lock). * fix(dashboard-v2): tooltip on the pin button showing the click action Replace the native title with an antd tooltip that reads 'Pin dashboard' / 'Unpin dashboard' based on the current state. * fix(dashboard-v2): delete dashboards via the v2 endpoint from the list The list-page delete action was calling the v1 delete endpoint; route it through deleteDashboardV2 so v2-shape dashboards (incl. pinned) delete correctly. * refactor(dashboard-v2): use signoz Button/Tooltip in list row & dashboard header Address review feedback on #11939: - DashboardRow: swap the antd Tooltip for @signozhq TooltipSimple and the native pin <button> for the @signozhq Button. Only wrap long titles in a tooltip so a short name no longer renders an empty hanging tooltip. Rename pinBtn -> pinButton. - DashboardInfo: swap the native public-link and lock <button>s for @signozhq Button. - Drop the now-orphaned .titleTooltipOverlay antd override. * fix(dashboard-v2): show a loader and block double-click when deleting a dashboard The list-row delete confirm fired the mutation on click and closed on settle, so a quick second click could fire delete twice. Use a promise-based onOk so the Delete button shows a loading spinner and rejects further clicks until the request settles, then closes.	2026-07-06 05:42:31 +00:00
Shivam Gupta	526a7d1c46	fix: update stale docs links in frontend (#11319 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * fix: update 47 stale docs links in frontend to current URLs Update documentation links across 19 frontend files to match current signoz.io docs structure after product module restructures. Key changes: - Instrumentation links updated to new OpenTelemetry-prefixed paths - product-features/* links replaced with current locations - Query builder links point to new querying module pages - Alert notification channel links point to setup-alerts-notification - SSO, infra monitoring, and version upgrade links corrected Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: update 278 more stale docs links and broken anchors in frontend - Onboarding md-docs: update instrumentation URLs to canonical paths (django/flask/fastapi/falcon → opentelemetry-python, express/nestjs → javascript/opentelemetry-nodejs, springboot → java/opentelemetry-java, tomcat → java/opentelemetry-tomcat, jboss → java/opentelemetry-jboss, golang → opentelemetry-golang, elixir → opentelemetry-elixir, reactjs → frontend-monitoring/sending-traces-with-opentelemetry) - Onboarding md-docs: update tutorial/* → opentelemetry-collection-agents/, userguide/hostmetrics → infrastructure-monitoring/hostmetrics, userguide/logs# → userguide/logs_query_builder# - Query builder UI: fix broken anchors after query-builder-v5 page restructure (Having → result-manipulation, Order By → result-manipulation, Limit → result-manipulation, Legend → aggregation-grouping, Group By → aggregation-grouping, Formula → multi-query-analysis, Trace Matching → multi-query-analysis, Reduce → result-manipulation, Aggregation functions → aggregation-grouping, Time aggregation → temporal-aggregation) - Fix Apdex link → alerts-management/apdex-alerts - Fix missing spans link → traces-management/troubleshooting/faqs - Fix cost meter, ClickHouse traces, k8s pod logs anchors - Drop broken anchors where sections were removed from docs Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> fix: format CreateAlertRule files after anchor removal Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: revert OnboardingContainer changes (deprecated module) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Vishal Sharma <makeavish786@gmail.com> Co-authored-by: Ubuntu <ubuntu@ip-172-31-24-8.eu-central-1.compute.internal>	2026-07-06 04:47:31 +00:00
Abhi kumar	9f72338c87	fix(dashboards-v2): list panel pagination, spanGaps clamp, discard dialog & create-alert fixes (#11974 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * fix(dashboards-v2): show the list panel pager A new/edited List panel never showed its server pager. The V1→V5 mapper folds a list query's internal `pageSize` into the V5 `limit` (`createBaseSpec`), so a seeded panel (pageSize 100) always looked like it had a user limit — and `usePanelQuery` suppresses the pager when a limit is present. Strip the V1 explorer's `pageSize`/`offset` in `toPerses` before conversion so `limit` reflects only a real user limit; List panels then page by default while an explicit user limit still renders as a static, unpaged list. * fix(dashboards-v2): give logs list requests a deterministic order Offset paging over a non-total order can duplicate or drop rows sharing a value (e.g. same-millisecond logs) across page boundaries. Enforce a total order on every logs-list request (`withListOrderTiebreaker`): default the primary to `timestamp desc` and always append `id` (logs-explorer parity). Request-only, so it never lands in the saved panel spec; traces keep theirs. * fix(dashboards-v2): list pagination runtime behaviour - Drive `canNext` from the backend's `nextCursor` (set iff the page filled) instead of a client-side row-count guess. - Keep the table + pager mounted on a page change (`keepPreviousData`); show the full-panel loader only on the first fetch, not on every refetch. - Ignore a stale cross-type response kept across a panel-kind switch (match the response type to the request) so the list doesn't flash "No data". - While the next page loads, swap the stale rows for horizontal skeleton rows (dashboard grid and editor preview). * fix(dashboards-v2): seed timestamp order when switching to a list panel V1's shared `handleQueryChange` clears orderBy when switching to a list, so the builder's Order By opened empty after e.g. Time series → List. Re-seed the fresh-list default (timestamp desc) in `usePanelTypeSwitch` so the query matches a newly created list panel. * fix(dashboards-v2): clamp time-series spanGaps to the step interval A numeric spanGaps is a max-gap threshold (seconds). Floor it at the smallest step interval so a sub-step value doesn't break the line at every normal point. Boolean "span all" passes through unchanged. * fix(dashboards-v2): flip discard-dialog buttons "Keep editing" now sits on the right and is outlined; "Discard" stays left (destructive). The ConfirmDialog preset can't reorder/restyle its footer, so swap to DialogWrapper with a custom footer (same chrome, async confirm state preserved via the button's loading flag). * fix(dashboards-v2): floor the create-alert time window to integer ms buildQueryRangeRequest's start/end are int64 ms, so passing a float from the nanosecond division could break the call. Floor the ns→ms conversion and use the named NANO_SECOND_MULTIPLIER constant instead of a magic 1e6. * fix(dashboards-v2): clone patched values so optimistic apply can't corrupt outgoing ops Creating the first panel on an empty dashboard failed with "spec.layouts[0].spec.items[0] and items[1] overlap". createPanelOps emits three ops (add empty section, add panel, add item into that section), but useOptimisticPatch.onMutate runs applyJsonPatch before the request is sent, and applyJsonPatch inserted each op.value by reference. The cache's layouts[0].spec.items then aliased the empty items array held inside the section-add op, so applying the item op mutated that op's value too. react-query sent the mutated ops (section already holding the item, plus the separate item add) → two overlapping items. Clone the inserted value on add/replace so the applied document never shares references with the input ops, restoring the purity the docstring already promises. New-dashboard-only because that is the only batch that adds a layout and an item into that same layout together.	2026-07-05 06:00:51 +00:00
Abhi kumar	e7ef4c6bdb	fix(dashboard-v2): correct formatting carry on panel-kind switch + unify spec seeding (#11956 ) * refactor(dashboard-v2): make ThresholdVariant a string enum Replace the ThresholdVariant string-union with a string enum so panel section configs reference named members (ThresholdVariant.LABEL/COMPARISON/ TABLE) instead of bare string literals, and update every call site. * fix(dashboard-v2): correct formatting carry on panel-kind switch Switching a panel's visualization kind carried formatting fields the target kind's schema does not accept (e.g. `unit` into a Table, which only supports `columnUnits` + `decimalPrecision`), so the save API rejected the spec. Unify new-panel and kind-switch spec seeding into one per-section registry (`buildPluginSpec`, SECTION_SEEDS): each section derives its plugin-spec slice from the target kind's declared `controls` and optional context, so a carried field is emitted only when the target kind actually supports it. Adding a section now means one registry entry rather than editing two seeders. Delete the redundant `buildDefaultPluginSpec` wrapper (it only forwarded to `buildPluginSpec`); `getSwitchedPluginSpec` becomes a thin delegating wrapper.	2026-07-05 05:51:44 +00:00
Vinicius Lourenço	ef9b8eec8a	perf(tsconfig): improve type check time (#11927 ) Some checks failed build-staging / prepare (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details * chore(tsconfig): explicit path mappings and cleaned includes * perf(tsconfig): enable incremental & fix large type resolution	2026-07-03 14:29:16 +00:00