Merge branch 'main' into feat/add-clear-filter

chore: added changes for sorting tooltip content (#11320 )
Enable new trace details page (#11296 )
2026-05-18 16:00:32 +01:00 · 2026-05-18 19:42:55 +05:30 · 2026-05-18 13:53:19 +00:00 · 2026-05-18 13:51:33 +00:00 · 2026-05-18 12:21:38 +00:00 · 2026-05-18 12:12:48 +00:00
78 changed files with 2987 additions and 835 deletions
--- a/frontend/src/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -144,18 +144,18 @@ const routes: AppRoutes[] = [
 	// /trace-old serves V3 (URL-only access). Flip the two `component`
 	// values back to release V3.
 	{
-		path: ROUTES.TRACE_DETAIL,
+		path: ROUTES.TRACE_DETAIL_OLD,
 		exact: true,
 		component: TraceDetail,
 		isPrivate: true,
-		key: 'TRACE_DETAIL',
+		key: 'TRACE_DETAIL_OLD',
 	},
 	{
-		path: ROUTES.TRACE_DETAIL_OLD,
+		path: ROUTES.TRACE_DETAIL,
 		exact: true,
 		component: TraceDetailV3,
 		isPrivate: true,
-		key: 'TRACE_DETAIL_OLD',
+		key: 'TRACE_DETAIL',
 	},
 	{
 		path: ROUTES.SETTINGS,
--- a/frontend/src/components/AuthZTooltip/AuthZTooltip.module.scss
+++ b/frontend/src/components/AuthZTooltip/AuthZTooltip.module.scss
@@ -0,0 +1,14 @@
+.wrapper {
+	cursor: not-allowed;
+}
+
+.errorContent {
+	background: var(--callout-error-background) !important;
+	border-color: var(--callout-error-border) !important;
+	backdrop-filter: blur(15px);
+	border-radius: 4px !important;
+	color: var(--foreground) !important;
+	font-style: normal;
+	font-weight: 400;
+	white-space: nowrap;
+}
--- a/frontend/src/components/AuthZTooltip/AuthZTooltip.test.tsx
+++ b/frontend/src/components/AuthZTooltip/AuthZTooltip.test.tsx
@@ -0,0 +1,145 @@
+import { ReactElement } from 'react';
+import { render, screen } from 'tests/test-utils';
+import { buildPermission } from 'hooks/useAuthZ/utils';
+import type { AuthZObject, BrandedPermission } from 'hooks/useAuthZ/types';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import AuthZTooltip from './AuthZTooltip';
+
+jest.mock('hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
+const noPermissions = {
+	isLoading: false,
+	isFetching: false,
+	error: null,
+	permissions: null,
+	refetchPermissions: jest.fn(),
+};
+
+const TestButton = (
+	props: React.ButtonHTMLAttributes<HTMLButtonElement>,
+): ReactElement => (
+	<button type="button" {...props}>
+		Action
+	</button>
+);
+
+const createPerm = buildPermission(
+	'create',
+	'serviceaccount:*' as AuthZObject<'create'>,
+);
+const attachSAPerm = (id: string): BrandedPermission =>
+	buildPermission('attach', `serviceaccount:${id}` as AuthZObject<'attach'>);
+const attachRolePerm = buildPermission(
+	'attach',
+	'role:*' as AuthZObject<'attach'>,
+);
+
+describe('AuthZTooltip — single check', () => {
+	it('renders child unchanged when permission is granted', () => {
+		mockUseAuthZ.mockReturnValue({
+			...noPermissions,
+			permissions: { [createPerm]: { isGranted: true } },
+		});
+
+		render(
+			<AuthZTooltip checks={[createPerm]}>
+				<TestButton />
+			</AuthZTooltip>,
+		);
+
+		expect(screen.getByRole('button', { name: 'Action' })).not.toBeDisabled();
+	});
+
+	it('disables child when permission is denied', () => {
+		mockUseAuthZ.mockReturnValue({
+			...noPermissions,
+			permissions: { [createPerm]: { isGranted: false } },
+		});
+
+		render(
+			<AuthZTooltip checks={[createPerm]}>
+				<TestButton />
+			</AuthZTooltip>,
+		);
+
+		expect(screen.getByRole('button', { name: 'Action' })).toBeDisabled();
+	});
+
+	it('disables child while loading', () => {
+		mockUseAuthZ.mockReturnValue({ ...noPermissions, isLoading: true });
+
+		render(
+			<AuthZTooltip checks={[createPerm]}>
+				<TestButton />
+			</AuthZTooltip>,
+		);
+
+		expect(screen.getByRole('button', { name: 'Action' })).toBeDisabled();
+	});
+});
+
+describe('AuthZTooltip — multi-check (checks array)', () => {
+	it('renders child enabled when all checks are granted', () => {
+		const sa = attachSAPerm('sa-1');
+		mockUseAuthZ.mockReturnValue({
+			...noPermissions,
+			permissions: {
+				[sa]: { isGranted: true },
+				[attachRolePerm]: { isGranted: true },
+			},
+		});
+
+		render(
+			<AuthZTooltip checks={[sa, attachRolePerm]}>
+				<TestButton />
+			</AuthZTooltip>,
+		);
+
+		expect(screen.getByRole('button', { name: 'Action' })).not.toBeDisabled();
+	});
+
+	it('disables child when first check is denied, second granted', () => {
+		const sa = attachSAPerm('sa-1');
+		mockUseAuthZ.mockReturnValue({
+			...noPermissions,
+			permissions: {
+				[sa]: { isGranted: false },
+				[attachRolePerm]: { isGranted: true },
+			},
+		});
+
+		render(
+			<AuthZTooltip checks={[sa, attachRolePerm]}>
+				<TestButton />
+			</AuthZTooltip>,
+		);
+
+		expect(screen.getByRole('button', { name: 'Action' })).toBeDisabled();
+	});
+
+	it('disables child when both checks are denied and lists denied permissions in data attr', () => {
+		const sa = attachSAPerm('sa-1');
+		mockUseAuthZ.mockReturnValue({
+			...noPermissions,
+			permissions: {
+				[sa]: { isGranted: false },
+				[attachRolePerm]: { isGranted: false },
+			},
+		});
+
+		render(
+			<AuthZTooltip checks={[sa, attachRolePerm]}>
+				<TestButton />
+			</AuthZTooltip>,
+		);
+
+		expect(screen.getByRole('button', { name: 'Action' })).toBeDisabled();
+
+		const wrapper = screen.getByRole('button', { name: 'Action' }).parentElement;
+		expect(wrapper?.getAttribute('data-denied-permissions')).toContain(sa);
+		expect(wrapper?.getAttribute('data-denied-permissions')).toContain(
+			attachRolePerm,
+		);
+	});
+});
--- a/frontend/src/components/AuthZTooltip/AuthZTooltip.tsx
+++ b/frontend/src/components/AuthZTooltip/AuthZTooltip.tsx
@@ -0,0 +1,85 @@
+import { ReactElement, cloneElement, useMemo } from 'react';
+import {
+	TooltipRoot,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
+import type { BrandedPermission } from 'hooks/useAuthZ/types';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { parsePermission } from 'hooks/useAuthZ/utils';
+import styles from './AuthZTooltip.module.scss';
+
+interface AuthZTooltipProps {
+	checks: BrandedPermission[];
+	children: ReactElement;
+	enabled?: boolean;
+	tooltipMessage?: string;
+}
+
+function formatDeniedMessage(
+	denied: BrandedPermission[],
+	override?: string,
+): string {
+	if (override) {
+		return override;
+	}
+	const labels = denied.map((p) => {
+		const { relation, object } = parsePermission(p);
+		const resource = object.split(':')[0];
+		return `${relation} ${resource}`;
+	});
+	return labels.length === 1
+		? `You don't have ${labels[0]} permission`
+		: `You don't have ${labels.join(', ')} permissions`;
+}
+
+function AuthZTooltip({
+	checks,
+	children,
+	enabled = true,
+	tooltipMessage,
+}: AuthZTooltipProps): JSX.Element {
+	const shouldCheck = enabled && checks.length > 0;
+
+	const { permissions, isLoading } = useAuthZ(checks, { enabled: shouldCheck });
+
+	const deniedPermissions = useMemo(() => {
+		if (!permissions) {
+			return [];
+		}
+		return checks.filter((p) => permissions[p]?.isGranted === false);
+	}, [checks, permissions]);
+
+	if (shouldCheck && isLoading) {
+		return (
+			<span className={styles.wrapper}>
+				{cloneElement(children, { disabled: true })}
+			</span>
+		);
+	}
+
+	if (!shouldCheck || deniedPermissions.length === 0) {
+		return children;
+	}
+
+	return (
+		<TooltipProvider>
+			<TooltipRoot>
+				<TooltipTrigger asChild>
+					<span
+						className={styles.wrapper}
+						data-denied-permissions={deniedPermissions.join(',')}
+					>
+						{cloneElement(children, { disabled: true })}
+					</span>
+				</TooltipTrigger>
+				<TooltipContent className={styles.errorContent}>
+					{formatDeniedMessage(deniedPermissions, tooltipMessage)}
+				</TooltipContent>
+			</TooltipRoot>
+		</TooltipProvider>
+	);
+}
+
+export default AuthZTooltip;
--- a/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
+++ b/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
@@ -2,6 +2,8 @@ import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import { SACreatePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
 import { toast } from '@signozhq/ui/sonner';
@@ -132,17 +134,19 @@ function CreateServiceAccountModal(): JSX.Element {
 					Cancel
 				</Button>

-				<Button
-					type="submit"
-					// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
-					form="create-sa-form"
-					variant="solid"
-					color="primary"
-					loading={isSubmitting}
-					disabled={!isValid}
-				>
-					Create Service Account
-				</Button>
+				<AuthZTooltip checks={[SACreatePermission]}>
+					<Button
+						type="submit"
+						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
+						form="create-sa-form"
+						variant="solid"
+						color="primary"
+						loading={isSubmitting}
+						disabled={!isValid}
+					>
+						Create Service Account
+					</Button>
+				</AuthZTooltip>
 			</DialogFooter>
 		</DialogWrapper>
 	);
--- a/frontend/src/components/CreateServiceAccountModal/tests/CreateServiceAccountModal.test.tsx
+++ b/frontend/src/components/CreateServiceAccountModal/tests/CreateServiceAccountModal.test.tsx
@@ -11,6 +11,15 @@ import {

 import CreateServiceAccountModal from '../CreateServiceAccountModal';

+jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
+	__esModule: true,
+	default: ({
+		children,
+	}: {
+		children: React.ReactElement;
+	}): React.ReactElement => children,
+}));
+
 jest.mock('@signozhq/ui/sonner', () => ({
 	...jest.requireActual('@signozhq/ui/sonner'),
 	toast: { success: jest.fn(), error: jest.fn() },
@@ -113,7 +122,9 @@ describe('CreateServiceAccountModal', () => {
 					getErrorMessage: expect.any(Function),
 				}),
 			);
-			const passedError = showErrorModal.mock.calls[0][0] as any;
+			const passedError = showErrorModal.mock.calls[0][0] as {
+				getErrorMessage: () => string;
+			};
 			expect(passedError.getErrorMessage()).toBe('Internal Server Error');
 		});

@@ -132,6 +143,9 @@ describe('CreateServiceAccountModal', () => {
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));

 		await waitForElementToBeRemoved(dialog);
+		expect(
+			screen.queryByRole('dialog', { name: /New Service Account/i }),
+		).not.toBeInTheDocument();
 	});

 	it('shows "Name is required" after clearing the name field', async () => {
@@ -142,6 +156,8 @@ describe('CreateServiceAccountModal', () => {
 		await user.type(nameInput, 'Bot');
 		await user.clear(nameInput);

-		await screen.findByText('Name is required');
+		await expect(
+			screen.findByText('Name is required'),
+		).resolves.toBeInTheDocument();
 	});
 });
--- a/frontend/src/components/GuardAuthZ/GuardAuthZ.test.tsx
+++ b/frontend/src/components/GuardAuthZ/GuardAuthZ.test.tsx
@@ -1,34 +1,13 @@
 import { ReactElement } from 'react';
-import {
-	AuthtypesGettableTransactionDTO,
-	AuthtypesTransactionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { ENVIRONMENT } from 'constants/env';
 import { BrandedPermission } from 'hooks/useAuthZ/types';
 import { buildPermission } from '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 'tests/authz-test-utils';

 import { GuardAuthZ } from './GuardAuthZ';

-const BASE_URL = ENVIRONMENT.baseURL || '';
-const AUTHZ_CHECK_URL = `${BASE_URL}/api/v1/authz/check`;
-
-function authzMockResponse(
-	payload: AuthtypesTransactionDTO[],
-	authorizedByIndex: boolean[],
-): { data: AuthtypesGettableTransactionDTO[]; status: string } {
-	return {
-		data: payload.map((txn, i) => ({
-			relation: txn.relation,
-			object: txn.object,
-			authorized: authorizedByIndex[i] ?? false,
-		})),
-		status: 'success',
-	};
-}
-
 describe('GuardAuthZ', () => {
 	const TestChild = (): ReactElement => <div>Protected Content</div>;
 	const LoadingFallback = (): ReactElement => <div>Loading...</div>;
--- a/frontend/src/components/PermissionDeniedCallout/PermissionDeniedCallout.module.scss
+++ b/frontend/src/components/PermissionDeniedCallout/PermissionDeniedCallout.module.scss
@@ -0,0 +1,4 @@
+.callout {
+	box-sizing: border-box;
+	width: 100%;
+}
--- a/frontend/src/components/PermissionDeniedCallout/PermissionDeniedCallout.test.tsx
+++ b/frontend/src/components/PermissionDeniedCallout/PermissionDeniedCallout.test.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from 'tests/test-utils';
+import PermissionDeniedCallout from './PermissionDeniedCallout';
+
+describe('PermissionDeniedCallout', () => {
+	it('renders the permission name in the callout message', () => {
+		render(<PermissionDeniedCallout permissionName="serviceaccount:attach" />);
+
+		expect(screen.getByText(/You don't have/)).toBeInTheDocument();
+		expect(screen.getByText(/serviceaccount:attach/)).toBeInTheDocument();
+		expect(screen.getByText(/permission/)).toBeInTheDocument();
+	});
+
+	it('accepts an optional className', () => {
+		const { container } = render(
+			<PermissionDeniedCallout
+				permissionName="serviceaccount:read"
+				className="custom-class"
+			/>,
+		);
+		expect(container.firstChild).toHaveClass('custom-class');
+	});
+});
--- a/frontend/src/components/PermissionDeniedCallout/PermissionDeniedCallout.tsx
+++ b/frontend/src/components/PermissionDeniedCallout/PermissionDeniedCallout.tsx
@@ -0,0 +1,26 @@
+import { Callout } from '@signozhq/ui/callout';
+import cx from 'classnames';
+import styles from './PermissionDeniedCallout.module.scss';
+
+interface PermissionDeniedCalloutProps {
+	permissionName: string;
+	className?: string;
+}
+
+function PermissionDeniedCallout({
+	permissionName,
+	className,
+}: PermissionDeniedCalloutProps): JSX.Element {
+	return (
+		<Callout
+			type="error"
+			showIcon
+			size="small"
+			className={cx(styles.callout, className)}
+		>
+			{`You don't have ${permissionName} permission`}
+		</Callout>
+	);
+}
+
+export default PermissionDeniedCallout;
--- a/frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.module.scss
+++ b/frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.module.scss
@@ -0,0 +1,44 @@
+.container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	min-height: 50vh;
+	padding: var(--spacing-10);
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--spacing-2);
+	max-width: 512px;
+}
+
+.icon {
+	margin-bottom: var(--spacing-1);
+}
+
+.title {
+	margin: 0;
+	font-size: var(--label-base-500-font-size);
+	font-weight: var(--label-base-500-font-weight);
+	line-height: var(--line-height-18);
+	letter-spacing: -0.07px;
+	color: var(--l1-foreground);
+}
+
+.subtitle {
+	margin: 0;
+	font-size: var(--label-base-400-font-size);
+	font-weight: var(--label-base-400-font-weight);
+	line-height: var(--line-height-18);
+	letter-spacing: -0.07px;
+	color: var(--l2-foreground);
+}
+
+.permission {
+	font-family: monospace;
+	color: var(--l2-foreground);
+}
--- a/frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.test.tsx
+++ b/frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.test.tsx
@@ -0,0 +1,21 @@
+import { render, screen } from 'tests/test-utils';
+import PermissionDeniedFullPage from './PermissionDeniedFullPage';
+
+describe('PermissionDeniedFullPage', () => {
+	it('renders the title and subtitle with the permissionName interpolated', () => {
+		render(<PermissionDeniedFullPage permissionName="serviceaccount:list" />);
+
+		expect(
+			screen.getByText("Uh-oh! You don't have permission to view this page."),
+		).toBeInTheDocument();
+		expect(screen.getByText(/serviceaccount:list/)).toBeInTheDocument();
+		expect(
+			screen.getByText(/Please ask your SigNoz administrator to grant access/),
+		).toBeInTheDocument();
+	});
+
+	it('renders with a different permissionName', () => {
+		render(<PermissionDeniedFullPage permissionName="role:read" />);
+		expect(screen.getByText(/role:read/)).toBeInTheDocument();
+	});
+});
--- a/frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.tsx
+++ b/frontend/src/components/PermissionDeniedFullPage/PermissionDeniedFullPage.tsx
@@ -0,0 +1,31 @@
+import { CircleSlash2 } from '@signozhq/icons';
+
+import styles from './PermissionDeniedFullPage.module.scss';
+import { Style } from '@signozhq/design-tokens';
+
+interface PermissionDeniedFullPageProps {
+	permissionName: string;
+}
+
+function PermissionDeniedFullPage({
+	permissionName,
+}: PermissionDeniedFullPageProps): JSX.Element {
+	return (
+		<div className={styles.container}>
+			<div className={styles.content}>
+				<span className={styles.icon}>
+					<CircleSlash2 color={Style.CALLOUT_WARNING_TITLE} size={14} />
+				</span>
+				<p className={styles.title}>
+					Uh-oh! You don&apos;t have permission to view this page.
+				</p>
+				<p className={styles.subtitle}>
+					You need <code className={styles.permission}>{permissionName}</code> to
+					view this page. Please ask your SigNoz administrator to grant access.
+				</p>
+			</div>
+		</div>
+	);
+}
+
+export default PermissionDeniedFullPage;
--- a/frontend/src/components/RolesSelect/RolesSelect.tsx
+++ b/frontend/src/components/RolesSelect/RolesSelect.tsx
@@ -80,6 +80,7 @@ interface BaseProps {
 	isError?: boolean;
 	error?: APIError;
 	onRefetch?: () => void;
+	disabled?: boolean;
 }

 interface SingleProps extends BaseProps {
@@ -123,6 +124,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 		isError = internalError,
 		error = convertToApiError(internalErrorObj),
 		onRefetch = externalRoles === undefined ? internalRefetch : undefined,
+		disabled,
 	} = props;

 	const notFoundContent = isError ? (
@@ -151,6 +153,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 					</Checkbox>
 				)}
 				getPopupContainer={getPopupContainer}
+				disabled={disabled}
 			/>
 		);
 	}
@@ -168,6 +171,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 			notFoundContent={notFoundContent}
 			options={options}
 			getPopupContainer={getPopupContainer}
+			disabled={disabled}
 		/>
 	);
 }
--- a/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx
@@ -4,6 +4,11 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import {
+	APIKeyCreatePermission,
+	buildSAAttachPermission,
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { popupContainer } from 'utils/selectPopupContainer';

 import { disabledDate } from '../utils';
@@ -18,6 +23,7 @@ export interface KeyFormPhaseProps {
 	isValid: boolean;
 	onSubmit: () => void;
 	onClose: () => void;
+	accountId?: string;
 }

 function KeyFormPhase({
@@ -28,6 +34,7 @@ function KeyFormPhase({
 	isValid,
 	onSubmit,
 	onClose,
+	accountId,
 }: KeyFormPhaseProps): JSX.Element {
 	return (
 		<>
@@ -111,17 +118,25 @@ function KeyFormPhase({
 					<Button variant="solid" color="secondary" onClick={onClose}>
 						Cancel
 					</Button>
-					<Button
-						type="submit"
-						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
-						form={FORM_ID}
-						variant="solid"
-						color="primary"
-						loading={isSubmitting}
-						disabled={!isValid}
+					<AuthZTooltip
+						checks={[
+							APIKeyCreatePermission,
+							buildSAAttachPermission(accountId ?? ''),
+						]}
+						enabled={!!accountId}
 					>
-						Create Key
-					</Button>
+						<Button
+							type="submit"
+							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
+							form={FORM_ID}
+							variant="solid"
+							color="primary"
+							loading={isSubmitting}
+							disabled={!isValid}
+						>
+							Create Key
+						</Button>
+					</AuthZTooltip>
 				</div>
 			</div>
 		</>
--- a/frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx
@@ -161,6 +161,7 @@ function AddKeyModal(): JSX.Element {
 					isValid={isValid}
 					onSubmit={handleSubmit(handleCreate)}
 					onClose={handleClose}
+					accountId={accountId ?? undefined}
 				/>
 			)}

--- a/frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx
@@ -1,6 +1,8 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import { buildSADeletePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -65,7 +67,7 @@ function DeleteAccountModal(): JSX.Element {
 	}

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

 	const content = (
@@ -82,15 +84,20 @@ function DeleteAccountModal(): JSX.Element {
 				<X size={12} />
 				Cancel
 			</Button>
-			<Button
-				variant="solid"
-				color="destructive"
-				loading={isDeleting}
-				onClick={handleConfirm}
+			<AuthZTooltip
+				checks={[buildSADeletePermission(accountId ?? '')]}
+				enabled={!!accountId}
 			>
-				<Trash2 size={12} />
-				Delete
-			</Button>
+				<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,6 +7,12 @@ import { Input } from '@signozhq/ui/input';
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import {
+	buildAPIKeyDeletePermission,
+	buildAPIKeyUpdatePermission,
+	buildSADetachPermission,
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { popupContainer } from 'utils/selectPopupContainer';

 import { disabledDate, formatLastObservedAt } from '../utils';
@@ -24,6 +30,8 @@ export interface EditKeyFormProps {
 	onClose: () => void;
 	onRevokeClick: () => void;
 	formatTimezoneAdjustedTimestamp: (ts: string, format: string) => string;
+	canUpdate?: boolean;
+	accountId?: string;
 }

 function EditKeyForm({
@@ -37,6 +45,8 @@ function EditKeyForm({
 	onClose,
 	onRevokeClick,
 	formatTimezoneAdjustedTimestamp,
+	canUpdate = true,
+	accountId = '',
 }: EditKeyFormProps): JSX.Element {
 	return (
 		<>
@@ -45,12 +55,34 @@ function EditKeyForm({
 					<label className="edit-key-modal__label" htmlFor="edit-key-name">
 						Name
 					</label>
-					<Input
-						id="edit-key-name"
-						className="edit-key-modal__input"
-						placeholder="Enter key name"
-						{...register('name')}
-					/>
+					{!canUpdate ? (
+						<AuthZTooltip
+							checks={[buildAPIKeyUpdatePermission(keyItem?.id ?? '')]}
+							enabled={!!keyItem?.id}
+						>
+							<div className="edit-key-modal__key-display">
+								<span className="edit-key-modal__id-text">{keyItem?.name || '—'}</span>
+								<LockKeyhole size={12} className="edit-key-modal__lock-icon" />
+							</div>
+						</AuthZTooltip>
+					) : (
+						<Input
+							id="edit-key-name"
+							className="edit-key-modal__input"
+							placeholder="Enter key name"
+							{...register('name')}
+						/>
+					)}
+				</div>
+
+				<div className="edit-key-modal__field">
+					<label className="edit-key-modal__label" htmlFor="edit-key-id">
+						ID
+					</label>
+					<div id="edit-key-id" className="edit-key-modal__key-display">
+						<span className="edit-key-modal__id-text">{keyItem?.id || '—'}</span>
+						<LockKeyhole size={12} className="edit-key-modal__lock-icon" />
+					</div>
 				</div>

 				<div className="edit-key-modal__field">
@@ -73,21 +105,22 @@ function EditKeyForm({
 								type="single"
 								value={field.value}
 								onChange={(val): void => {
-									if (val) {
+									if (val && canUpdate) {
 										field.onChange(val);
 									}
 								}}
-								size="sm"
 								className="edit-key-modal__expiry-toggle"
 							>
 								<ToggleGroupItem
 									value={ExpiryMode.NONE}
+									disabled={!canUpdate}
 									className="edit-key-modal__expiry-toggle-btn"
 								>
 									No Expiration
 								</ToggleGroupItem>
 								<ToggleGroupItem
 									value={ExpiryMode.DATE}
+									disabled={!canUpdate}
 									className="edit-key-modal__expiry-toggle-btn"
 								>
 									Set Expiration Date
@@ -114,6 +147,7 @@ function EditKeyForm({
 										popupClassName="edit-key-modal-datepicker-popup"
 										getPopupContainer={popupContainer}
 										disabledDate={disabledDate}
+										disabled={!canUpdate}
 									/>
 								)}
 							/>
@@ -133,26 +167,39 @@ function EditKeyForm({
 			</form>

 			<div className="edit-key-modal__footer">
-				<Button variant="link" color="destructive" onClick={onRevokeClick}>
-					<Trash2 size={12} />
-					Revoke Key
-				</Button>
+				<AuthZTooltip
+					checks={[
+						buildAPIKeyDeletePermission(keyItem?.id ?? ''),
+						buildSADetachPermission(accountId ?? ''),
+					]}
+					enabled={!!accountId && !!keyItem?.id}
+				>
+					<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>
-					<Button
-						type="submit"
-						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
-						form={FORM_ID}
-						variant="solid"
-						color="primary"
-						loading={isSaving}
-						disabled={!isDirty}
+					<AuthZTooltip
+						checks={[buildAPIKeyUpdatePermission(keyItem?.id ?? '')]}
+						enabled={!!accountId && !!keyItem?.id}
 					>
-						Save Changes
-					</Button>
+						<Button
+							type="submit"
+							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
+							form={FORM_ID}
+							variant="solid"
+							color="primary"
+							loading={isSaving}
+							disabled={!isDirty}
+						>
+							Save Changes
+						</Button>
+					</AuthZTooltip>
 				</div>
 			</div>
 		</>
--- a/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyModal.styles.scss
+++ b/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyModal.styles.scss
@@ -60,6 +60,16 @@
 		letter-spacing: 2px;
 	}

+	&__id-text {
+		font-size: 13px;
+		font-family: monospace;
+		color: var(--foreground);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex: 1;
+	}
+
 	&__lock-icon {
 		color: var(--foreground);
 		flex-shrink: 0;
--- a/frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx
@@ -16,6 +16,8 @@ import type {
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import dayjs from 'dayjs';
+import { buildAPIKeyUpdatePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import { parseAsString, useQueryState } from 'nuqs';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
@@ -69,6 +71,16 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {

 	const expiryMode = watch('expiryMode');

+	const { permissions: editPermissions, isLoading: isAuthZLoading } = useAuthZ(
+		editKeyId ? [buildAPIKeyUpdatePermission(editKeyId)] : [],
+		{ enabled: !!editKeyId },
+	);
+
+	const canUpdate = isAuthZLoading
+		? false
+		: (editPermissions?.[buildAPIKeyUpdatePermission(editKeyId ?? '')]
+				?.isGranted ?? true);
+
 	const { mutate: updateKey, isLoading: isSaving } = useUpdateServiceAccountKey({
 		mutation: {
 			onSuccess: async () => {
@@ -115,7 +127,7 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 		});

 	function handleClose(): void {
-		setEditKeyId(null);
+		void setEditKeyId(null);
 		setIsRevokeConfirmOpen(false);
 	}

@@ -169,6 +181,8 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 						isRevoking={isRevoking}
 						onCancel={(): void => setIsRevokeConfirmOpen(false)}
 						onConfirm={handleRevoke}
+						accountId={selectedAccountId ?? undefined}
+						keyId={keyItem?.id ?? undefined}
 					/>
 				) : undefined
 			}
@@ -190,6 +204,8 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 					onClose={handleClose}
 					onRevokeClick={(): void => setIsRevokeConfirmOpen(true)}
 					formatTimezoneAdjustedTimestamp={formatTimezoneAdjustedTimestamp}
+					canUpdate={canUpdate}
+					accountId={selectedAccountId ?? ''}
 				/>
 			)}
 		</DialogWrapper>
--- a/frontend/src/components/ServiceAccountDrawer/KeysTab.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/KeysTab.tsx
@@ -1,9 +1,16 @@
-import { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { KeyRound, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Skeleton, Table, Tooltip } from 'antd';
+import { Skeleton, Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import {
+	APIKeyCreatePermission,
+	buildAPIKeyDeletePermission,
+	buildSAAttachPermission,
+	buildSADetachPermission,
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs';
@@ -17,12 +24,15 @@ interface KeysTabProps {
 	keys: ServiceaccounttypesGettableFactorAPIKeyDTO[];
 	isLoading: boolean;
 	isDisabled?: boolean;
+	canUpdate?: boolean;
+	accountId?: string;
 	currentPage: number;
 	pageSize: number;
 }

 interface BuildColumnsParams {
 	isDisabled: boolean;
+	accountId: string;
 	onRevokeClick: (keyId: string) => void;
 	handleformatLastObservedAt: (
 		lastObservedAt: Date | null | undefined,
@@ -42,6 +52,7 @@ function formatExpiry(expiresAt: number): JSX.Element {

 function buildColumns({
 	isDisabled,
+	accountId,
 	onRevokeClick,
 	handleformatLastObservedAt,
 }: BuildColumnsParams): ColumnsType<ServiceaccounttypesGettableFactorAPIKeyDTO> {
@@ -92,22 +103,34 @@ function buildColumns({
 			key: 'action',
 			width: 48,
 			align: 'right' as const,
+			onCell: (): {
+				onClick: (e: React.MouseEvent) => void;
+				style: React.CSSProperties;
+			} => ({
+				onClick: (e): void => e.stopPropagation(),
+				style: { cursor: 'default' },
+			}),
 			render: (_, record): JSX.Element => (
-				<Tooltip title={isDisabled ? 'Service account disabled' : 'Revoke Key'}>
+				<AuthZTooltip
+					checks={[
+						buildAPIKeyDeletePermission(record.id),
+						buildSADetachPermission(accountId),
+					]}
+					enabled={!isDisabled && !!accountId}
+				>
 					<Button
 						variant="ghost"
 						size="sm"
 						color="destructive"
 						disabled={isDisabled}
-						onClick={(e): void => {
-							e.stopPropagation();
+						onClick={(): void => {
 							onRevokeClick(record.id);
 						}}
 						className="keys-tab__revoke-btn"
 					>
 						<X size={12} />
 					</Button>
-				</Tooltip>
+				</AuthZTooltip>
 			),
 		},
 	];
@@ -117,6 +140,7 @@ function KeysTab({
 	keys,
 	isLoading,
 	isDisabled = false,
+	accountId = '',
 	currentPage,
 	pageSize,
 }: KeysTabProps): JSX.Element {
@@ -143,14 +167,20 @@ function KeysTab({

 	const onRevokeClick = useCallback(
 		(keyId: string): void => {
-			setRevokeKeyId(keyId);
+			void setRevokeKeyId(keyId);
 		},
 		[setRevokeKeyId],
 	);

 	const columns = useMemo(
-		() => buildColumns({ isDisabled, onRevokeClick, handleformatLastObservedAt }),
-		[isDisabled, onRevokeClick, handleformatLastObservedAt],
+		() =>
+			buildColumns({
+				isDisabled,
+				accountId,
+				onRevokeClick,
+				handleformatLastObservedAt,
+			}),
+		[isDisabled, accountId, onRevokeClick, handleformatLastObservedAt],
 	);

 	if (isLoading) {
@@ -176,16 +206,21 @@ function KeysTab({
 						Learn more
 					</a>
 				</p>
-				<Button
-					variant="link"
-					color="primary"
-					onClick={async (): Promise<void> => {
-						await setIsAddKeyOpen(true);
-					}}
-					disabled={isDisabled}
+				<AuthZTooltip
+					checks={[APIKeyCreatePermission, buildSAAttachPermission(accountId)]}
+					enabled={!isDisabled && !!accountId}
 				>
-					+ Add your first key
-				</Button>
+					<Button
+						variant="link"
+						color="primary"
+						onClick={async (): Promise<void> => {
+							await setIsAddKeyOpen(true);
+						}}
+						disabled={isDisabled}
+					>
+						+ Add your first key
+					</Button>
+				</AuthZTooltip>
 			</div>
 		);
 	}
--- a/frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx
@@ -3,9 +3,11 @@ import { LockKeyhole } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import { Input } from '@signozhq/ui/input';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
+import { buildSAUpdatePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';

@@ -19,6 +21,7 @@ interface OverviewTabProps {
 	localRoles: string[];
 	onRolesChange: (v: string[]) => void;
 	isDisabled: boolean;
+	canUpdate?: boolean;
 	availableRoles: AuthtypesRoleDTO[];
 	rolesLoading?: boolean;
 	rolesError?: boolean;
@@ -34,6 +37,7 @@ function OverviewTab({
 	localRoles,
 	onRolesChange,
 	isDisabled,
+	canUpdate = true,
 	availableRoles,
 	rolesLoading,
 	rolesError,
@@ -63,11 +67,16 @@ function OverviewTab({
 				<label className="sa-drawer__label" htmlFor="sa-name">
 					Name
 				</label>
-				{isDisabled ? (
-					<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>
+				{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>
 				) : (
 					<Input
 						id="sa-name"
@@ -78,6 +87,16 @@ function OverviewTab({
 				)}
 			</div>

+			<div className="sa-drawer__field">
+				<label className="sa-drawer__label" htmlFor="sa-id">
+					ID
+				</label>
+				<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
+					<span className="sa-drawer__input-text">{account.id || '—'}</span>
+					<LockKeyhole size={14} className="sa-drawer__lock-icon" />
+				</div>
+			</div>
+
 			<div className="sa-drawer__field">
 				<label className="sa-drawer__label" htmlFor="sa-email">
 					Email Address
--- a/frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx
@@ -1,6 +1,11 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import {
+	buildAPIKeyDeletePermission,
+	buildSADetachPermission,
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -23,12 +28,16 @@ export interface RevokeKeyFooterProps {
 	isRevoking: boolean;
 	onCancel: () => void;
 	onConfirm: () => void;
+	accountId?: string;
+	keyId?: string;
 }

 export function RevokeKeyFooter({
 	isRevoking,
 	onCancel,
 	onConfirm,
+	accountId,
+	keyId,
 }: RevokeKeyFooterProps): JSX.Element {
 	return (
 		<>
@@ -36,15 +45,23 @@ export function RevokeKeyFooter({
 				<X size={12} />
 				Cancel
 			</Button>
-			<Button
-				variant="solid"
-				color="destructive"
-				loading={isRevoking}
-				onClick={onConfirm}
+			<AuthZTooltip
+				checks={[
+					buildAPIKeyDeletePermission(keyId ?? ''),
+					buildSADetachPermission(accountId ?? ''),
+				]}
+				enabled={!!accountId && !!keyId}
 			>
-				<Trash2 size={12} />
-				Revoke Key
-			</Button>
+				<Button
+					variant="solid"
+					color="destructive"
+					loading={isRevoking}
+					onClick={onConfirm}
+				>
+					<Trash2 size={12} />
+					Revoke Key
+				</Button>
+			</AuthZTooltip>
 		</>
 	);
 }
@@ -115,6 +132,8 @@ function RevokeKeyModal(): JSX.Element {
 					isRevoking={isRevoking}
 					onCancel={handleCancel}
 					onConfirm={handleConfirm}
+					accountId={accountId ?? undefined}
+					keyId={revokeKeyId || undefined}
 				/>
 			}
 		>
--- a/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx
@@ -16,6 +16,8 @@ import {
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import { GuardAuthZ } from 'components/GuardAuthZ/GuardAuthZ';
+import PermissionDeniedCallout from 'components/PermissionDeniedCallout/PermissionDeniedCallout';
 import { useRoles } from 'components/RolesSelect';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import {
@@ -27,6 +29,15 @@ import {
 	RoleUpdateFailure,
 	useServiceAccountRoleManager,
 } from 'hooks/serviceAccount/useServiceAccountRoleManager';
+import {
+	APIKeyCreatePermission,
+	APIKeyListPermission,
+	buildSAAttachPermission,
+	buildSADeletePermission,
+	buildSAReadPermission,
+	buildSAUpdatePermission,
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -37,6 +48,7 @@ import {
 import APIError from 'types/api/error';
 import { toAPIError } from 'utils/errorUtils';

+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
 import KeysTab from './KeysTab';
@@ -96,6 +108,22 @@ function ServiceAccountDrawer({

 	const queryClient = useQueryClient();

+	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,
 		isLoading: isAccountLoading,
@@ -104,7 +132,7 @@ function ServiceAccountDrawer({
 		refetch: refetchAccount,
 	} = useGetServiceAccount(
 		{ id: selectedAccountId ?? '' },
-		{ query: { enabled: !!selectedAccountId } },
+		{ query: { enabled: canRead && !!selectedAccountId } },
 	);

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

 	const roleSessionRef = useRef<string | null>(null);

@@ -165,9 +195,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 ?? [];

@@ -392,18 +429,26 @@ function ServiceAccountDrawer({
 					</ToggleGroupItem>
 				</ToggleGroup>
 				{activeTab === ServiceAccountDrawerTab.Keys && (
-					<Button
-						variant="outlined"
-						size="sm"
-						color="secondary"
-						disabled={isDeleted}
-						onClick={(): void => {
-							void setIsAddKeyOpen(true);
-						}}
+					<AuthZTooltip
+						checks={[
+							APIKeyCreatePermission,
+							buildSAAttachPermission(selectedAccountId ?? ''),
+						]}
+						enabled={!isDeleted && !!selectedAccountId}
 					>
-						<Plus size={12} />
-						Add Key
-					</Button>
+						<Button
+							variant="outlined"
+							size="sm"
+							color="secondary"
+							disabled={isDeleted}
+							onClick={(): void => {
+								void setIsAddKeyOpen(true);
+							}}
+						>
+							<Plus size={12} />
+							Add Key
+						</Button>
+					</AuthZTooltip>
 				)}
 			</div>

@@ -412,7 +457,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(
@@ -421,38 +468,55 @@ 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}
-							/>
-						)}
-						{activeTab === ServiceAccountDrawerTab.Keys && (
-							<KeysTab
-								keys={keys}
-								isLoading={keysLoading}
-								isDisabled={isDeleted}
-								currentPage={keysPage}
-								pageSize={PAGE_SIZE}
-							/>
-						)}
-					</>
-				)}
+				{!isAuthZLoading &&
+					!isAccountLoading &&
+					!isAccountError &&
+					selectedAccountId && (
+						<GuardAuthZ
+							relation="read"
+							object={`serviceaccount:${selectedAccountId}`}
+							fallbackOnNoPermissions={(): JSX.Element => (
+								<PermissionDeniedCallout permissionName="serviceaccount:read" />
+							)}
+						>
+							<>
+								{activeTab === ServiceAccountDrawerTab.Overview && 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}
+									/>
+								)}
+								{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" />
+									))}
+							</>
+						</GuardAuthZ>
+					)}
 			</div>
 		</div>
 	);
@@ -482,16 +546,21 @@ function ServiceAccountDrawer({
 			) : (
 				<>
 					{!isDeleted && (
-						<Button
-							variant="link"
-							color="destructive"
-							onClick={(): void => {
-								void setIsDeleteOpen(true);
-							}}
+						<AuthZTooltip
+							checks={[buildSADeletePermission(selectedAccountId ?? '')]}
+							enabled={!!selectedAccountId}
 						>
-							<Trash2 size={12} />
-							Delete Service Account
-						</Button>
+							<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">
--- a/frontend/src/components/ServiceAccountDrawer/tests/EditKeyModal.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/EditKeyModal.test.tsx
@@ -6,6 +6,15 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';

 import EditKeyModal from '../EditKeyModal';

+jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
+	__esModule: true,
+	default: ({
+		children,
+	}: {
+		children: React.ReactElement;
+	}): React.ReactElement => children,
+}));
+
 jest.mock('@signozhq/ui/sonner', () => ({
 	...jest.requireActual('@signozhq/ui/sonner'),
 	toast: { success: jest.fn(), error: jest.fn() },
@@ -19,7 +28,7 @@ const mockKey: ServiceaccounttypesGettableFactorAPIKeyDTO = {
 	id: 'key-1',
 	name: 'Original Key Name',
 	expiresAt: 0,
-	lastObservedAt: null as any,
+	lastObservedAt: null as unknown as Date,
 	serviceAccountId: 'sa-1',
 };

--- a/frontend/src/components/ServiceAccountDrawer/tests/KeysTab.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/KeysTab.test.tsx
@@ -6,6 +6,15 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';

 import KeysTab from '../KeysTab';

+jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
+	__esModule: true,
+	default: ({
+		children,
+	}: {
+		children: React.ReactElement;
+	}): React.ReactElement => children,
+}));
+
 jest.mock('@signozhq/ui/sonner', () => ({
 	...jest.requireActual('@signozhq/ui/sonner'),
 	toast: { success: jest.fn(), error: jest.fn() },
@@ -20,7 +29,7 @@ const keys: ServiceaccounttypesGettableFactorAPIKeyDTO[] = [
 		id: 'key-1',
 		name: 'Production Key',
 		expiresAt: 0,
-		lastObservedAt: null as any,
+		lastObservedAt: null as unknown as Date,
 		serviceAccountId: 'sa-1',
 	},
 	{
--- a/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.authz.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.authz.test.tsx
@@ -0,0 +1,158 @@
+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';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
+import {
+	setupAuthzAdmin,
+	setupAuthzDeny,
+	setupAuthzDenyAll,
+} from 'tests/authz-test-utils';
+import {
+	APIKeyListPermission,
+	buildSADeletePermission,
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
+
+import ServiceAccountDrawer from '../ServiceAccountDrawer';
+
+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';
+const SA_DELETE_ENDPOINT = '*/api/v1/service_accounts/sa-1';
+const SA_ROLES_ENDPOINT = '*/api/v1/service_accounts/:id/roles';
+const SA_ROLE_DELETE_ENDPOINT = '*/api/v1/service_accounts/:id/roles/:rid';
+
+const activeAccountResponse = {
+	id: 'sa-1',
+	name: 'CI Bot',
+	email: 'ci-bot@signoz.io',
+	roles: ['signoz-admin'],
+	status: 'ACTIVE',
+	createdAt: '2026-01-01T00:00:00Z',
+	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> {
+	return render(
+		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
+			<ServiceAccountDrawer onSuccess={jest.fn()} />
+		</NuqsTestingAdapter>,
+	);
+}
+
+function setupBaseHandlers(): void {
+	server.use(
+		rest.get(ROLES_ENDPOINT, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+		),
+		rest.get(SA_KEYS_ENDPOINT, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json({ data: [] })),
+		),
+		rest.get(SA_ENDPOINT, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json({ data: activeAccountResponse })),
+		),
+		rest.put(SA_ENDPOINT, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+		),
+		rest.delete(SA_DELETE_ENDPOINT, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+		),
+		rest.get(SA_ROLES_ENDPOINT, (_, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({
+					data: listRolesSuccessResponse.data.filter(
+						(r) => r.name === 'signoz-admin',
+					),
+				}),
+			),
+		),
+		rest.post(SA_ROLES_ENDPOINT, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+		),
+		rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
+		),
+	);
+}
+
+describe('ServiceAccountDrawer — permissions', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		setupBaseHandlers();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('shows PermissionDeniedCallout inside drawer when read permission is denied', async () => {
+		server.use(setupAuthzDenyAll());
+
+		renderDrawer();
+
+		await waitFor(() => {
+			expect(screen.getByText(/serviceaccount:read/)).toBeInTheDocument();
+		});
+	});
+
+	it('shows drawer content when read permission is granted', async () => {
+		server.use(setupAuthzAdmin());
+
+		renderDrawer();
+
+		await screen.findByDisplayValue('CI Bot');
+		expect(screen.queryByText(/serviceaccount:read/)).not.toBeInTheDocument();
+	});
+
+	it('shows PermissionDeniedCallout in Keys tab when list-keys permission is denied', async () => {
+		server.use(setupAuthzDeny(APIKeyListPermission));
+
+		renderDrawer();
+		await screen.findByDisplayValue('CI Bot');
+
+		fireEvent.click(screen.getByRole('radio', { name: /keys/i }));
+
+		await waitFor(() => {
+			expect(screen.getByText(/factor-api-key:list/)).toBeInTheDocument();
+		});
+	});
+
+	it('disables Delete button when delete permission is denied', async () => {
+		server.use(setupAuthzDeny(buildSADeletePermission('sa-1')));
+
+		renderDrawer();
+		await screen.findByDisplayValue('CI Bot');
+
+		const deleteBtn = screen.getByRole('button', {
+			name: /Delete Service Account/i,
+		});
+		await waitFor(() => expect(deleteBtn).toBeDisabled());
+	});
+});
--- a/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.test.tsx
@@ -3,6 +3,7 @@ import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { setupAuthzAdmin } from 'tests/authz-test-utils';

 import ServiceAccountDrawer from '../ServiceAccountDrawer';

@@ -98,6 +99,7 @@ describe('ServiceAccountDrawer', () => {
 			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
+			setupAuthzAdmin(),
 		);
 	});

@@ -300,13 +302,6 @@ describe('ServiceAccountDrawer', () => {
 		await screen.findByText(/No keys/i);
 	});

-	it('shows skeleton while loading account data', () => {
-		renderDrawer();
-
-		// Skeleton renders while the fetch is in-flight
-		expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
-	});
-
 	it('shows error state when account fetch fails', async () => {
 		server.use(
 			rest.get(SA_ENDPOINT, (_, res, ctx) =>
@@ -359,6 +354,7 @@ describe('ServiceAccountDrawer – save-error UX', () => {
 			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
+			setupAuthzAdmin(),
 		);
 	});

--- a/frontend/src/components/createGuardedRoute/createGuardedRoute.test.tsx
+++ b/frontend/src/components/createGuardedRoute/createGuardedRoute.test.tsx
@@ -1,33 +1,16 @@
 import { ReactElement } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
-import {
+import type {
 	AuthtypesGettableTransactionDTO,
 	AuthtypesTransactionDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { ENVIRONMENT } from 'constants/env';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render, screen, waitFor } from 'tests/test-utils';
+import { AUTHZ_CHECK_URL, authzMockResponse } from 'tests/authz-test-utils';

 import { createGuardedRoute } from './createGuardedRoute';

-const BASE_URL = ENVIRONMENT.baseURL || '';
-const AUTHZ_CHECK_URL = `${BASE_URL}/api/v1/authz/check`;
-
-function authzMockResponse(
-	payload: AuthtypesTransactionDTO[],
-	authorizedByIndex: boolean[],
-): { data: AuthtypesGettableTransactionDTO[]; status: string } {
-	return {
-		data: payload.map((txn, i) => ({
-			relation: txn.relation,
-			object: txn.object,
-			authorized: authorizedByIndex[i] ?? false,
-		})),
-		status: 'success',
-	};
-}
-
 describe('createGuardedRoute', () => {
 	const TestComponent = ({ testProp }: { testProp: string }): ReactElement => (
 		<div>Test Component: {testProp}</div>
--- a/frontend/src/components/createGuardedRoute/createGuardedRoute.tsx
+++ b/frontend/src/components/createGuardedRoute/createGuardedRoute.tsx
@@ -34,7 +34,7 @@ function OnNoPermissionsFallback(response: {
 					<br />
 					Object: <span>{object}</span>
 					<br />
-					Ask your SigNoz administrator to grant access.
+					Please ask your SigNoz administrator to grant access.
 				</p>
 			</div>
 		</div>
--- a/frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Button } from '@signozhq/ui/button';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Input } from '@signozhq/ui/input';
 import { Input as AntdInput } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ArrowRight } from '@signozhq/icons';
+import { useAppContext } from 'providers/App/App';

 import { OnboardingQuestionHeader } from '../OnboardingQuestionHeader';

@@ -32,11 +33,31 @@ const interestedInOptions: Record<string, string> = {
 	openSourceTooling: 'Prefer open-source tooling',
 };

+function seededShuffle<T>(array: T[], seed: string): T[] {
+	const result = [...array];
+
+	let num = 0;
+	for (let i = 0; i < seed.length; i++) {
+		num = Math.imul(num + seed.charCodeAt(i), 2654435761);
+		num = Math.abs(num);
+	}
+
+	for (let i = result.length - 1; i > 0; i--) {
+		num = Math.abs(Math.imul(num, 1664525) + 1013904223);
+		const j = num % (i + 1);
+		[result[i], result[j]] = [result[j], result[i]];
+	}
+
+	return result;
+}
+
 export function AboutSigNozQuestions({
 	signozDetails,
 	setSignozDetails,
 	onNext,
 }: AboutSigNozQuestionsProps): JSX.Element {
+	const { versionData } = useAppContext();
+
 	const [interestInSignoz, setInterestInSignoz] = useState<string[]>(
 		signozDetails?.interestInSignoz || [],
 	);
@@ -48,6 +69,12 @@ export function AboutSigNozQuestions({
 	);
 	const [isNextDisabled, setIsNextDisabled] = useState<boolean>(true);

+	const shuffledOptionKeys = useMemo(
+		() =>
+			seededShuffle(Object.keys(interestedInOptions), versionData?.version ?? ''),
+		[versionData?.version],
+	);
+
 	useEffect((): void => {
 		if (
 			discoverSignoz !== '' &&
@@ -115,7 +142,7 @@ export function AboutSigNozQuestions({
 					<div className="form-group">
 						<div className="question">What got you interested in SigNoz?</div>
 						<div className="checkbox-grid">
-							{Object.keys(interestedInOptions).map((option: string) => (
+							{shuffledOptionKeys.map((option: string) => (
 								<div key={option} className="checkbox-item">
 									<Checkbox
 										id={`checkbox-${option}`}
--- a/frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.styles.scss
+++ b/frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.styles.scss
@@ -29,18 +29,6 @@
 		border-bottom: 1px solid var(--l1-border);
 	}

-	&__close {
-		width: 16px;
-		height: 16px;
-		padding: 0;
-		color: var(--foreground);
-		flex-shrink: 0;
-
-		&:hover {
-			color: var(--l1-foreground);
-		}
-	}
-
 	&__header-divider {
 		display: block;
 		width: 1px;
@@ -167,7 +155,6 @@
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		color: var(--l1-foreground);
-		text-transform: capitalize;
 	}

 	&__body {
--- a/frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.tsx
+++ b/frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.tsx
@@ -25,10 +25,13 @@ import { PermissionScope } from './PermissionSidePanel.types';

 import './PermissionSidePanel.styles.scss';

+const RELATIONS_ALL_ONLY = new Set(['list', 'create']);
+
 interface ResourceRowProps {
 	resource: ResourceDefinition;
 	config: ResourceConfig;
 	isExpanded: boolean;
+	relation: string;
 	onToggleExpand: (id: string) => void;
 	onScopeChange: (id: string, scope: ScopeType) => void;
 	onSelectedIdsChange: (id: string, ids: string[]) => void;
@@ -38,10 +41,12 @@ function ResourceRow({
 	resource,
 	config,
 	isExpanded,
+	relation,
 	onToggleExpand,
 	onScopeChange,
 	onSelectedIdsChange,
 }: ResourceRowProps): JSX.Element {
+	const showOnlySelected = !RELATIONS_ALL_ONLY.has(relation);
 	return (
 		<div className="psp-resource">
 			<div
@@ -78,36 +83,40 @@ function ResourceRow({
 							<RadioGroupLabel htmlFor={`${resource.id}-all`}>All</RadioGroupLabel>
 						</div>

+						{showOnlySelected && (
+							<div className="psp-resource__radio-item">
+								<RadioGroupItem
+									value={PermissionScope.ONLY_SELECTED}
+									id={`${resource.id}-only-selected`}
+								/>
+								<RadioGroupLabel htmlFor={`${resource.id}-only-selected`}>
+									Only selected
+								</RadioGroupLabel>
+							</div>
+						)}
+
 						<div className="psp-resource__radio-item">
 							<RadioGroupItem
-								value={PermissionScope.ONLY_SELECTED}
-								id={`${resource.id}-only-selected`}
+								value={PermissionScope.NONE}
+								id={`${resource.id}-none`}
 							/>
-							<RadioGroupLabel htmlFor={`${resource.id}-only-selected`}>
-								Only selected
-							</RadioGroupLabel>
+							<RadioGroupLabel htmlFor={`${resource.id}-none`}>None</RadioGroupLabel>
 						</div>
 					</RadioGroup>

-					{config.scope === PermissionScope.ONLY_SELECTED && (
+					{config.scope === PermissionScope.ONLY_SELECTED && showOnlySelected && (
 						<div className="psp-resource__select-wrapper">
-							{/* TODO: right now made to only accept user input, we need to give it proper resource based value fetching from APIs */}
 							<Select
 								mode="tags"
+								open={false}
+								allowClear
+								suffixIcon={null}
 								value={config.selectedIds}
 								onChange={(vals: string[]): void =>
 									onSelectedIdsChange(resource.id, vals)
 								}
-								options={resource.options ?? []}
-								placeholder="Select resources..."
+								placeholder="Type and press Enter to add..."
 								className="psp-resource__select"
-								popupClassName="psp-resource__select-popup"
-								showSearch
-								filterOption={(input, option): boolean =>
-									String(option?.label ?? '')
-										.toLowerCase()
-										.includes(input.toLowerCase())
-								}
 							/>
 						</div>
 					)}
@@ -121,10 +130,12 @@ function PermissionSidePanel({
 	open,
 	onClose,
 	permissionLabel,
+	relation,
 	resources,
 	initialConfig,
 	isLoading = false,
 	isSaving = false,
+	canEdit = true,
 	onSave,
 }: PermissionSidePanelProps): JSX.Element | null {
 	const [config, setConfig] = useState<PermissionConfig>(() =>
@@ -213,13 +224,13 @@ function PermissionSidePanel({
 			<div className="permission-side-panel">
 				<div className="permission-side-panel__header">
 					<Button
-						variant="ghost"
+						variant="link"
+						color="secondary"
 						size="icon"
-						className="permission-side-panel__close"
 						onClick={onClose}
 						aria-label="Close panel"
 					>
-						<X size={16} />
+						<X size={14} />
 					</Button>
 					<span className="permission-side-panel__header-divider" />
 					<span className="permission-side-panel__title">
@@ -238,6 +249,7 @@ function PermissionSidePanel({
 									resource={resource}
 									config={config[resource.id] ?? DEFAULT_RESOURCE_CONFIG}
 									isExpanded={expandedIds.has(resource.id)}
+									relation={relation}
 									onToggleExpand={handleToggleExpand}
 									onScopeChange={handleScopeChange}
 									onSelectedIdsChange={handleSelectedIdsChange}
@@ -274,7 +286,7 @@ function PermissionSidePanel({
 							size="sm"
 							onClick={handleSave}
 							loading={isSaving}
-							disabled={isLoading || unsavedCount === 0}
+							disabled={isLoading || unsavedCount === 0 || !canEdit}
 						>
 							Save Changes
 						</Button>
--- a/frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.types.ts
+++ b/frontend/src/container/RolesSettings/PermissionSidePanel/PermissionSidePanel.types.ts
@@ -5,6 +5,8 @@ export interface ResourceOption {

 export interface ResourceDefinition {
 	id: string;
+	kind: string;
+	type: string;
 	label: string;
 	options?: ResourceOption[];
 }
@@ -12,6 +14,7 @@ export interface ResourceDefinition {
 export enum PermissionScope {
 	ALL = 'all',
 	ONLY_SELECTED = 'only_selected',
+	NONE = 'none',
 }

 export type ScopeType = PermissionScope;
@@ -27,9 +30,11 @@ export interface PermissionSidePanelProps {
 	open: boolean;
 	onClose: () => void;
 	permissionLabel: string;
+	relation: string;
 	resources: ResourceDefinition[];
 	initialConfig?: PermissionConfig;
 	isLoading?: boolean;
 	isSaving?: boolean;
+	canEdit?: boolean;
 	onSave: (config: PermissionConfig) => void;
 }
--- a/frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.styles.scss
+++ b/frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.styles.scss
@@ -9,8 +9,9 @@

 	.role-details-header {
 		display: flex;
-		flex-direction: column;
-		gap: 0;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
 	}

 	.role-details-title {
@@ -28,44 +29,6 @@
 		opacity: 0.55;
 	}

-	.role-details-nav {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.role-details-tab {
-		gap: 4px;
-		padding: 0 16px;
-		height: 32px;
-		border-radius: 0;
-		font-size: 12px;
-		overflow: hidden;
-		font-weight: 400;
-		line-height: 18px;
-		letter-spacing: -0.06px;
-
-		&[data-state='on'] {
-			border-radius: 2px 0 0 2px;
-		}
-	}
-
-	.role-details-tab-count {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		min-width: 20px;
-		padding: 0 6px;
-		border-radius: 50px;
-		background: var(--secondary);
-		font-size: 12px;
-		font-weight: 400;
-		line-height: 20px;
-		color: var(--foreground);
-		letter-spacing: -0.06px;
-		text-transform: uppercase;
-	}
-
 	.role-details-actions {
 		display: flex;
 		align-items: center;
@@ -155,6 +118,17 @@
 		margin: 0;
 	}

+	.role-details-permissions-learn-more {
+		color: var(--primary);
+		font-size: var(--font-size-xs);
+		text-decoration: none;
+		white-space: nowrap;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
 	.role-details-permission-list {
 		display: flex;
 		flex-direction: column;
@@ -282,30 +256,6 @@
 	}
 }

-.role-details-delete-action-btn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 32px;
-	height: 32px;
-	min-width: 32px;
-	border: none;
-	border-radius: 2px;
-	background: transparent;
-	color: var(--destructive);
-	opacity: 0.6;
-	padding: 0;
-	transition:
-		background-color 0.2s,
-		opacity 0.2s;
-	box-shadow: none;
-
-	&:hover {
-		background: color-mix(in srgb, var(--danger-background) 10%, transparent);
-		opacity: 0.9;
-	}
-}
-
 .role-details-delete-modal {
 	width: calc(100% - 30px) !important;
 	max-width: 384px;
--- a/frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.tsx
+++ b/frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.tsx
@@ -1,10 +1,9 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { useHistory, useLocation } from 'react-router-dom';
-import { Table2, Trash2, Users } from '@signozhq/icons';
+import { Redirect, useHistory, useLocation } from 'react-router-dom';
+import { Trash2 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { toast } from '@signozhq/ui/sonner';
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { Skeleton } from 'antd';
 import {
 	getGetObjectsQueryKey,
@@ -13,17 +12,26 @@ import {
 	useGetRole,
 	usePatchObjects,
 } from 'api/generated/services/role';
+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import permissionsType from 'hooks/useAuthZ/permissions.type';
+import {
+	buildRoleDeletePermission,
+	buildRoleReadPermission,
+	buildRoleUpdatePermission,
+} from 'hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';

 import type { AuthzResources } from '../utils';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import ROUTES from 'constants/routes';
 import { capitalize } from 'lodash-es';
+import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
+import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { RoleType } from 'types/roles';
 import { handleApiError, toAPIError } from 'utils/errorUtils';

-import { IS_ROLE_DETAILS_AND_CRUD_ENABLED } from '../config';
 import type { PermissionConfig } from '../PermissionSidePanel';
 import PermissionSidePanel from '../PermissionSidePanel';
 import CreateRoleModal from '../RolesComponents/CreateRoleModal';
@@ -34,35 +42,34 @@ import {
 	deriveResourcesForRelation,
 	objectsToPermissionConfig,
 } from '../utils';
-import MembersTab from './components/MembersTab';
 import OverviewTab from './components/OverviewTab';
 import { ROLE_ID_REGEX } from './constants';

 import './RoleDetailsPage.styles.scss';

-type TabKey = 'overview' | 'members';
-
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function RoleDetailsPage(): JSX.Element {
-	const { pathname } = useLocation();
+	const { pathname, search } = useLocation();
 	const history = useHistory();

-	useEffect(() => {
-		if (!IS_ROLE_DETAILS_AND_CRUD_ENABLED) {
-			history.push(ROUTES.ROLES_SETTINGS);
-		}
-	}, [history]);
-
 	const queryClient = useQueryClient();
 	const { showErrorModal } = useErrorModal();
+	const { activeLicense, isFetchingActiveLicense } = useAppContext();

-	const authzResources = permissionsType.data as unknown as AuthzResources;
+	const authzResources: AuthzResources = permissionsType.data;

-	// Extract channelId from URL pathname since useParams doesn't work in nested routing
+	// Extract roleId from URL pathname since useParams doesn't work in nested routing
 	const roleIdMatch = pathname.match(ROLE_ID_REGEX);
 	const roleId = roleIdMatch ? roleIdMatch[1] : '';

-	const [activeTab, setActiveTab] = useState<TabKey>('overview');
+	// Role name passed as query param by the listing page — used to check read permission
+	// before the role details API resolves. Absent when navigating directly (e.g. deep link),
+	// in which case we skip the FGA check and fall back to the BE guard.
+	const nameFromQuery = useMemo(
+		() => new URLSearchParams(search).get('name') ?? '',
+		[search],
+	);
+
 	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 	const [activePermission, setActivePermission] = useState<string | null>(null);
@@ -75,6 +82,27 @@ function RoleDetailsPage(): JSX.Element {
 	const isTransitioning = isFetching && role?.id !== roleId;
 	const isManaged = role?.type === RoleType.MANAGED;

+	const roleName = role?.name ?? '';
+
+	// Read check — fires immediately using the name query param so we can gate the page
+	// before the role details API resolves. Skipped when name is absent.
+	const { permissions: readPerms, isLoading: isReadAuthZLoading } = useAuthZ(
+		nameFromQuery ? [buildRoleReadPermission(nameFromQuery)] : [],
+		{ enabled: !!nameFromQuery },
+	);
+	const hasReadPermission = nameFromQuery
+		? (readPerms?.[buildRoleReadPermission(nameFromQuery)]?.isGranted ?? true)
+		: true;
+
+	// Update check uses role name once loaded
+	const { permissions: updatePerms, isLoading: isAuthZLoading } = useAuthZ(
+		roleName && !isManaged ? [buildRoleUpdatePermission(roleName)] : [],
+		{ enabled: !!roleName && !isManaged },
+	);
+	const hasUpdatePermission = isAuthZLoading
+		? false
+		: (updatePerms?.[buildRoleUpdatePermission(roleName)]?.isGranted ?? false);
+
 	const permissionTypes = useMemo(
 		() => derivePermissionTypes(authzResources?.relations ?? null),
 		[authzResources],
@@ -90,7 +118,11 @@ function RoleDetailsPage(): JSX.Element {

 	const { data: objectsData, isLoading: isLoadingObjects } = useGetObjects(
 		{ id: roleId, relation: activePermission ?? '' },
-		{ query: { enabled: !!activePermission && !!roleId && !isManaged } },
+		{
+			query: {
+				enabled: !!activePermission && !!roleId && !isManaged,
+			},
+		},
 	);

 	const initialConfig = useMemo(() => {
@@ -110,7 +142,6 @@ function RoleDetailsPage(): JSX.Element {
 				getGetObjectsQueryKey({ id: roleId, relation: activePermission }),
 			);
 		}
-		setActivePermission(null);
 	};

 	const { mutate: patchObjects, isLoading: isSaving } = usePatchObjects({
@@ -130,7 +161,27 @@ function RoleDetailsPage(): JSX.Element {
 		},
 	});

-	if (!IS_ROLE_DETAILS_AND_CRUD_ENABLED || isLoading || isTransitioning) {
+	if (isFetchingActiveLicense) {
+		return (
+			<div className="role-details-page">
+				<Skeleton
+					active
+					paragraph={{ rows: 8 }}
+					className="role-details-skeleton"
+				/>
+			</div>
+		);
+	}
+
+	if (activeLicense?.status !== LicenseStatus.VALID) {
+		return <Redirect to={ROUTES.ROLES_SETTINGS} />;
+	}
+
+	if (!hasReadPermission && readPerms !== null) {
+		return <PermissionDeniedFullPage permissionName="role:read" />;
+	}
+
+	if (isLoading || isTransitioning || (!!nameFromQuery && isReadAuthZLoading)) {
 		return (
 			<div className="role-details-page">
 				<Skeleton
@@ -186,73 +237,49 @@ function RoleDetailsPage(): JSX.Element {
 		<div className="role-details-page">
 			<div className="role-details-header">
 				<h2 className="role-details-title">Role — {role.name}</h2>
-			</div>
-
-			<div className="role-details-nav">
-				<ToggleGroup
-					type="single"
-					value={activeTab}
-					onChange={(val): void => {
-						if (val) {
-							setActiveTab(val as TabKey);
-						}
-					}}
-					className="role-details-tabs"
-				>
-					<ToggleGroupItem value="overview" className="role-details-tab">
-						<Table2 size={14} />
-						Overview
-					</ToggleGroupItem>
-					<ToggleGroupItem value="members" className="role-details-tab">
-						<Users size={14} />
-						Members
-						<span className="role-details-tab-count">0</span>
-					</ToggleGroupItem>
-				</ToggleGroup>
-
 				{!isManaged && (
 					<div className="role-details-actions">
-						<Button
-							variant="ghost"
-							color="destructive"
-							className="role-details-delete-action-btn"
-							onClick={(): void => setIsDeleteModalOpen(true)}
-							aria-label="Delete role"
-						>
-							<Trash2 size={14} />
-						</Button>
-						<Button
-							variant="solid"
-							color="secondary"
-							size="sm"
-							onClick={(): void => setIsEditModalOpen(true)}
-						>
-							Edit Role Details
-						</Button>
+						<AuthZTooltip checks={[buildRoleDeletePermission(role.name)]}>
+							<Button
+								variant="link"
+								color="destructive"
+								onClick={(): void => setIsDeleteModalOpen(true)}
+								aria-label="Delete role"
+							>
+								<Trash2 size={12} />
+							</Button>
+						</AuthZTooltip>
+						<AuthZTooltip checks={[buildRoleUpdatePermission(role.name)]}>
+							<Button
+								variant="solid"
+								color="secondary"
+								onClick={(): void => setIsEditModalOpen(true)}
+							>
+								Edit Role Details
+							</Button>
+						</AuthZTooltip>
 					</div>
 				)}
 			</div>

-			{activeTab === 'overview' && (
-				<OverviewTab
-					role={role || null}
-					isManaged={isManaged}
-					permissionTypes={permissionTypes}
-					onPermissionClick={(key): void => setActivePermission(key)}
-				/>
-			)}
-			{activeTab === 'members' && <MembersTab />}
-
+			<OverviewTab
+				role={role || null}
+				isManaged={isManaged}
+				permissionTypes={permissionTypes}
+				onPermissionClick={(key): void => setActivePermission(key)}
+			/>
 			{!isManaged && (
 				<>
 					<PermissionSidePanel
 						open={activePermission !== null}
 						onClose={(): void => setActivePermission(null)}
 						permissionLabel={activePermission ? capitalize(activePermission) : ''}
+						relation={activePermission ?? ''}
 						resources={resourcesForActivePermission}
 						initialConfig={initialConfig}
 						isLoading={isLoadingObjects}
 						isSaving={isSaving}
+						canEdit={hasUpdatePermission}
 						onSave={handleSave}
 					/>

--- a/frontend/src/container/RolesSettings/RoleDetails/tests/RoleDetailsPage.test.tsx
+++ b/frontend/src/container/RolesSettings/RoleDetails/tests/RoleDetailsPage.test.tsx
@@ -1,5 +1,3 @@
-jest.mock('../../config', () => ({ IS_ROLE_DETAILS_AND_CRUD_ENABLED: true }));
-
 import * as roleApi from 'api/generated/services/role';
 import {
 	customRoleResponse,
@@ -7,6 +5,7 @@ import {
 } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
+import { Route, Switch } from 'react-router-dom';
 import {
 	fireEvent,
 	render,
@@ -15,9 +14,17 @@ import {
 	waitFor,
 	within,
 } from 'tests/test-utils';
-
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import {
+	invalidLicense,
+	mockUseAuthZDenyAll,
+	mockUseAuthZGrantAll,
+} from 'tests/authz-test-utils';
 import RoleDetailsPage from '../RoleDetailsPage';

+jest.mock('hooks/useAuthZ/useAuthZ');
+const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
+
 const CUSTOM_ROLE_ID = '019c24aa-3333-0001-aaaa-111111111111';
 const MANAGED_ROLE_ID = '019c24aa-2248-756f-9833-984f1ab63819';

@@ -29,7 +36,7 @@ const allScopeObjectsResponse = {
 	status: 'success',
 	data: [
 		{
-			resource: { kind: 'role', type: 'metaresources' },
+			resource: { kind: 'role', type: 'role' },
 			selectors: ['*'],
 		},
 	],
@@ -46,6 +53,10 @@ function setupDefaultHandlers(roleId = CUSTOM_ROLE_ID): void {
 	);
 }

+beforeEach(() => {
+	mockUseAuthZ.mockImplementation(mockUseAuthZGrantAll);
+});
+
 afterEach(() => {
 	jest.clearAllMocks();
 	server.resetHandlers();
@@ -63,9 +74,6 @@ describe('RoleDetailsPage', () => {
 			screen.findByText('Role — billing-manager'),
 		).resolves.toBeInTheDocument();

-		expect(screen.getByText('Overview')).toBeInTheDocument();
-		expect(screen.getByText('Members')).toBeInTheDocument();
-
 		expect(
 			screen.getByText('Custom role for managing billing and invoices.'),
 		).toBeInTheDocument();
@@ -212,6 +220,40 @@ describe('RoleDetailsPage', () => {
 		);
 	});

+	it('shows PermissionDeniedFullPage when read permission is denied via query param', async () => {
+		mockUseAuthZ.mockImplementation(mockUseAuthZDenyAll);
+
+		render(<RoleDetailsPage />, undefined, {
+			initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}?name=billing-manager`,
+		});
+
+		await expect(
+			screen.findByText(/you don't have permission to view this page/i),
+		).resolves.toBeInTheDocument();
+	});
+
+	it('redirects to the roles list when license is not valid', async () => {
+		render(
+			<Switch>
+				<Route path="/settings/roles/:roleId">
+					<RoleDetailsPage />
+				</Route>
+				<Route path="/settings/roles" exact>
+					<div data-testid="roles-list-redirect-target" />
+				</Route>
+			</Switch>,
+			undefined,
+			{
+				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+				appContextOverrides: { activeLicense: invalidLicense },
+			},
+		);
+
+		await expect(
+			screen.findByTestId('roles-list-redirect-target'),
+		).resolves.toBeInTheDocument();
+	});
+
 	describe('permission side panel', () => {
 		beforeEach(() => {
 			// Both hooks mocked so data renders synchronously — no React Query scheduler or MSW round-trip.
@@ -238,7 +280,18 @@ describe('RoleDetailsPage', () => {
 			const panel = document.querySelector(
 				'.permission-side-panel',
 			) as HTMLElement;
-			await within(panel).findByRole('button', { name: 'Role' });
+			await within(panel).findByRole('button', { name: 'role' });
+			return panel;
+		}
+
+		async function openReadPanel(): Promise<HTMLElement> {
+			await screen.findByText('Role — billing-manager');
+			fireEvent.click(screen.getByText('Read'));
+			await screen.findByText('Edit Read Permissions');
+			const panel = document.querySelector(
+				'.permission-side-panel',
+			) as HTMLElement;
+			await within(panel).findByRole('button', { name: 'role' });
 			return panel;
 		}

@@ -253,7 +306,7 @@ describe('RoleDetailsPage', () => {
 				within(panel).getByRole('button', { name: /save changes/i }),
 			).toBeDisabled();

-			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
+			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
 			fireEvent.click(screen.getByText('All'));

 			expect(
@@ -281,7 +334,7 @@ describe('RoleDetailsPage', () => {

 			const panel = await openCreatePanel();

-			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
+			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
 			fireEvent.click(screen.getByText('All'));
 			fireEvent.click(
 				within(panel).getByRole('button', { name: /save changes/i }),
@@ -317,9 +370,11 @@ describe('RoleDetailsPage', () => {
 				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
 			});

-			const panel = await openCreatePanel();
+			const panel = await openReadPanel();

-			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
+			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
+			// Default is NONE, so switch to Only selected first to reveal the combobox
+			fireEvent.click(screen.getByText('Only selected'));

 			const combobox = within(panel).getByRole('combobox');
 			fireEvent.change(combobox, { target: { value: 'role-001' } });
@@ -342,6 +397,48 @@ describe('RoleDetailsPage', () => {
 			);
 		});

+		it('set scope to None on create panel (existing All) → patchObjects deletions: ["*"], additions: null', async () => {
+			const patchSpy = jest.fn();
+
+			jest.spyOn(roleApi, 'useGetObjects').mockReturnValue({
+				data: allScopeObjectsResponse,
+				isLoading: false,
+			} as any);
+			server.use(
+				rest.patch(
+					`${rolesApiBase}/:id/relations/:relation/objects`,
+					async (req, res, ctx) => {
+						patchSpy(await req.json());
+						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
+					},
+				),
+			);
+
+			render(<RoleDetailsPage />, undefined, {
+				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
+			});
+
+			const panel = await openCreatePanel();
+
+			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
+			fireEvent.click(screen.getByText('None'));
+			fireEvent.click(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			);
+
+			await waitFor(() =>
+				expect(patchSpy).toHaveBeenCalledWith({
+					additions: null,
+					deletions: [
+						{
+							resource: { kind: 'role', type: 'role' },
+							selectors: ['*'],
+						},
+					],
+				}),
+			);
+		});
+
 		it('existing All scope changed to Only selected (empty) → patchObjects deletions: ["*"], additions: null', async () => {
 			const patchSpy = jest.fn();

@@ -363,9 +460,9 @@ describe('RoleDetailsPage', () => {
 				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
 			});

-			const panel = await openCreatePanel();
+			const panel = await openReadPanel();

-			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
+			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
 			fireEvent.click(screen.getByText('Only selected'));
 			fireEvent.click(
 				within(panel).getByRole('button', { name: /save changes/i }),
@@ -393,7 +490,7 @@ describe('RoleDetailsPage', () => {

 			expect(screen.queryByText(/unsaved change/)).not.toBeInTheDocument();

-			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
+			fireEvent.click(within(panel).getByRole('button', { name: 'role' }));
 			fireEvent.click(screen.getByText('All'));

 			expect(screen.getByText('1 unsaved change')).toBeInTheDocument();
--- a/frontend/src/container/RolesSettings/RoleDetails/components/OverviewTab.tsx
+++ b/frontend/src/container/RolesSettings/RoleDetails/components/OverviewTab.tsx
@@ -2,6 +2,7 @@ import { Callout } from '@signozhq/ui/callout';

 import { PermissionType, TimestampBadge } from '../../utils';
 import PermissionItem from './PermissionItem';
+import { AuthtypesRelationDTO } from 'api/generated/services/sigNoz.schemas';

 interface OverviewTabProps {
 	role: {
@@ -55,18 +56,28 @@ function OverviewTab({
 			<div className="role-details-permissions">
 				<div className="role-details-permissions-header">
 					<span className="role-details-section-label">Permissions</span>
+					<a
+						href="https://signoz.io/docs/manage/administrator-guide/iam/permissions/"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="role-details-permissions-learn-more"
+					>
+						Learn more
+					</a>
 					<hr className="role-details-permissions-divider" />
 				</div>

 				<div className="role-details-permission-list">
-					{permissionTypes.map((permissionType) => (
-						<PermissionItem
-							key={permissionType.key}
-							permissionType={permissionType}
-							isManaged={isManaged}
-							onPermissionClick={onPermissionClick}
-						/>
-					))}
+					{permissionTypes
+						.filter((p) => p.key !== AuthtypesRelationDTO.assignee)
+						.map((permissionType) => (
+							<PermissionItem
+								key={permissionType.key}
+								permissionType={permissionType}
+								isManaged={isManaged}
+								onPermissionClick={onPermissionClick}
+							/>
+						))}
 				</div>
 			</div>
 		</div>
--- a/frontend/src/container/RolesSettings/RolesComponents/DeleteRoleModal.tsx
+++ b/frontend/src/container/RolesSettings/RolesComponents/DeleteRoleModal.tsx
@@ -27,9 +27,8 @@ function DeleteRoleModal({
 				<Button
 					key="cancel"
 					className="cancel-btn"
-					prefix={<X size={16} />}
+					prefix={<X size={14} />}
 					onClick={onCancel}
-					size="sm"
 					variant="solid"
 					color="secondary"
 				>
@@ -38,10 +37,9 @@ function DeleteRoleModal({
 				<Button
 					key="delete"
 					className="delete-btn"
-					prefix={<Trash2 size={16} />}
+					prefix={<Trash2 size={14} />}
 					onClick={onConfirm}
 					loading={isDeleting}
-					size="sm"
 					variant="solid"
 					color="destructive"
 				>
--- a/frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx
+++ b/frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx
@@ -4,16 +4,19 @@ 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 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
+import { RoleListPermission } from 'hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import useUrlQuery from 'hooks/useUrlQuery';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
+import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
+import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { RoleType } from 'types/roles';
 import { toAPIError } from 'utils/errorUtils';

-import { IS_ROLE_DETAILS_AND_CRUD_ENABLED } from '../config';
-
 import '../RolesSettings.styles.scss';

 const PAGE_SIZE = 20;
@@ -29,7 +32,17 @@ interface RolesListingTableProps {
 function RolesListingTable({
 	searchQuery,
 }: RolesListingTableProps): JSX.Element {
-	const { data, isLoading, isError, error } = useListRoles();
+	const { activeLicense } = useAppContext();
+	const isValidLicense = activeLicense?.status === LicenseStatus.VALID;
+
+	const { permissions: listPerms, isLoading: isAuthZLoading } = useAuthZ([
+		RoleListPermission,
+	]);
+	const hasListPermission = listPerms?.[RoleListPermission]?.isGranted ?? false;
+
+	const { data, isLoading, isError, error } = useListRoles({
+		query: { enabled: hasListPermission },
+	});
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 	const history = useHistory();
 	const urlQuery = useUrlQuery();
@@ -151,7 +164,11 @@ function RolesListingTable({
 		</>
 	);

-	if (isLoading) {
+	if (!hasListPermission && listPerms !== null) {
+		return <PermissionDeniedFullPage permissionName="role:list" />;
+	}
+
+	if (isAuthZLoading || isLoading) {
 		return (
 			<div className="roles-listing-table">
 				<Skeleton active paragraph={{ rows: 5 }} />
@@ -182,33 +199,36 @@ function RolesListingTable({
 		);
 	}

-	const navigateToRole = (roleId: string): void => {
-		history.push(ROUTES.ROLE_DETAILS.replace(':roleId', roleId));
+	const navigateToRole = (roleId: string, roleName?: string): void => {
+		const search = roleName ? `?name=${encodeURIComponent(roleName)}` : '';
+		history.push(`${ROUTES.ROLE_DETAILS.replace(':roleId', roleId)}${search}`);
 	};

 	// todo: use table from periscope when its available for consumption
 	const renderRow = (role: AuthtypesRoleDTO): JSX.Element => (
 		<div
 			key={role.id}
-			className={`roles-table-row ${
-				IS_ROLE_DETAILS_AND_CRUD_ENABLED ? 'roles-table-row--clickable' : ''
-			}`}
-			role="button"
-			tabIndex={IS_ROLE_DETAILS_AND_CRUD_ENABLED ? 0 : -1}
-			onClick={(): void => {
-				if (IS_ROLE_DETAILS_AND_CRUD_ENABLED && role.id) {
-					navigateToRole(role.id);
-				}
-			}}
-			onKeyDown={(e): void => {
-				if (
-					IS_ROLE_DETAILS_AND_CRUD_ENABLED &&
-					(e.key === 'Enter' || e.key === ' ') &&
-					role.id
-				) {
-					navigateToRole(role.id);
-				}
-			}}
+			className={`roles-table-row${isValidLicense ? ' roles-table-row--clickable' : ''}`}
+			role={isValidLicense ? 'button' : undefined}
+			tabIndex={isValidLicense ? 0 : undefined}
+			onClick={
+				isValidLicense
+					? (): void => {
+							if (role.id) {
+								navigateToRole(role.id, role.name);
+							}
+						}
+					: undefined
+			}
+			onKeyDown={
+				isValidLicense
+					? (e): void => {
+							if ((e.key === 'Enter' || e.key === ' ') && role.id) {
+								navigateToRole(role.id, role.name);
+							}
+						}
+					: undefined
+			}
 		>
 			<div className="roles-table-cell roles-table-cell--name">
 				{role.name ?? '—'}
--- a/frontend/src/container/RolesSettings/RolesSettings.styles.scss
+++ b/frontend/src/container/RolesSettings/RolesSettings.styles.scss
@@ -22,12 +22,21 @@
 			color: var(--foreground);
 			font-family: Inter;
 			font-style: normal;
-			font-size: 14px;
-			font-weight: 400;
+			font-size: var(--paragraph-base-400-font-size);
+			font-weight: var(--paragraph-base-400-font-weight);
 			line-height: 20px;
 			letter-spacing: -0.07px;
 			margin: 0;
 		}
+
+		.roles-settings-header-learn-more {
+			color: var(--primary);
+			text-decoration: none;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
 	}

 	.roles-settings-content {
@@ -285,16 +294,23 @@
 			}
 		}

-		// todo: https://github.com/SigNoz/components/issues/116
-		input,
+		input {
+			&::placeholder {
+				opacity: 0.4;
+			}
+		}
+
 		textarea {
 			width: 100%;
-			background: var(--l3-background);
-			border: 1px solid var(--l1-border);
+			box-sizing: border-box;
+			min-height: 100px;
+			resize: vertical;
+			background: var(--input-background, transparent);
+			border: 1px solid var(--border);
 			border-radius: 2px;
 			padding: 6px 8px;
 			font-family: Inter;
-			font-size: 14px;
+			font-size: var(--font-size-xs);
 			font-weight: 400;
 			line-height: 18px;
 			letter-spacing: -0.07px;
@@ -303,7 +319,7 @@
 			box-shadow: none;

 			&::placeholder {
-				color: var(--l3-foreground);
+				color: var(--muted-foreground);
 				opacity: 0.4;
 			}

@@ -313,25 +329,6 @@
 				box-shadow: none;
 			}
 		}
-
-		input {
-			height: 32px;
-		}
-
-		input:disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-
-			&:hover {
-				border-color: var(--l1-border);
-				box-shadow: none;
-			}
-		}
-
-		textarea {
-			min-height: 100px;
-			resize: vertical;
-		}
 	}

 	.ant-modal-footer {
--- a/frontend/src/container/RolesSettings/RolesSettings.tsx
+++ b/frontend/src/container/RolesSettings/RolesSettings.tsx
@@ -2,8 +2,11 @@ import { useState } from 'react';
 import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import { RoleCreatePermission } from 'hooks/useAuthZ/permissions/role.permissions';
+import { useAppContext } from 'providers/App/App';
+import { LicenseStatus } from 'types/api/licensesV3/getActive';

-import { IS_ROLE_DETAILS_AND_CRUD_ENABLED } from './config';
 import CreateRoleModal from './RolesComponents/CreateRoleModal';
 import RolesListingTable from './RolesComponents/RolesListingTable';

@@ -12,13 +15,23 @@ import './RolesSettings.styles.scss';
 function RolesSettings(): JSX.Element {
 	const [searchQuery, setSearchQuery] = useState('');
 	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+	const { activeLicense } = useAppContext();
+	const isValidLicense = activeLicense?.status === LicenseStatus.VALID;

 	return (
 		<div className="roles-settings" data-testid="roles-settings">
 			<div className="roles-settings-header">
 				<h3 className="roles-settings-header-title">Roles</h3>
 				<p className="roles-settings-header-description">
-					Create and manage custom roles for your team.
+					Create and manage custom roles for your team.{' '}
+					<a
+						href="https://signoz.io/docs/manage/administrator-guide/iam/roles/"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="roles-settings-header-learn-more"
+					>
+						Learn more
+					</a>
 				</p>
 			</div>
 			<div className="roles-settings-content">
@@ -29,16 +42,18 @@ function RolesSettings(): JSX.Element {
 						value={searchQuery}
 						onChange={(e): void => setSearchQuery(e.target.value)}
 					/>
-					{IS_ROLE_DETAILS_AND_CRUD_ENABLED && (
-						<Button
-							variant="solid"
-							color="primary"
-							className="role-settings-toolbar-button"
-							onClick={(): void => setIsCreateModalOpen(true)}
-						>
-							<Plus size={14} />
-							Custom role
-						</Button>
+					{isValidLicense && (
+						<AuthZTooltip checks={[RoleCreatePermission]}>
+							<Button
+								variant="solid"
+								color="primary"
+								className="role-settings-toolbar-button"
+								onClick={(): void => setIsCreateModalOpen(true)}
+							>
+								<Plus size={14} />
+								Custom role
+							</Button>
+						</AuthZTooltip>
 					)}
 				</div>
 				<RolesListingTable searchQuery={searchQuery} />
--- a/frontend/src/container/RolesSettings/tests/RolesSettings.test.tsx
+++ b/frontend/src/container/RolesSettings/tests/RolesSettings.test.tsx
@@ -5,13 +5,19 @@ import {
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { fireEvent, render, screen } from 'tests/test-utils';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';

 import RolesSettings from '../RolesSettings';

+jest.mock('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(
 			rest.get(rolesApiURL, (_req, res, ctx) =>
 				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
@@ -170,6 +176,26 @@ describe('RolesSettings', () => {
 		}
 	});

+	it('hides the create button and disables row clicks when license is not valid', async () => {
+		render(<RolesSettings />, undefined, {
+			appContextOverrides: { activeLicense: invalidLicense },
+		});
+
+		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();
+
+		// Create button must be absent
+		expect(
+			screen.queryByRole('button', { name: /custom role/i }),
+		).not.toBeInTheDocument();
+
+		// Rows must not carry the clickable class or button role
+		const rows = document.querySelectorAll('.roles-table-row');
+		rows.forEach((row) => {
+			expect(row).not.toHaveClass('roles-table-row--clickable');
+			expect(row.getAttribute('role')).not.toBe('button');
+		});
+	});
+
 	it('handles invalid dates gracefully by showing fallback', async () => {
 		const invalidRole = {
 			id: 'edge-0009',
--- a/frontend/src/container/RolesSettings/tests/utils.test.ts
+++ b/frontend/src/container/RolesSettings/tests/utils.test.ts
@@ -1,5 +1,4 @@
 import type {
-	CoretypesResourceRefDTO,
 	CoretypesObjectGroupDTO,
 	CoretypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
@@ -8,11 +7,7 @@ import type {
 	PermissionConfig,
 	ResourceDefinition,
 } from '../PermissionSidePanel/PermissionSidePanel.types';
-
-type AuthzResources = {
-	resources: CoretypesResourceRefDTO[];
-	relations: Record<string, string[]>;
-};
+import type { AuthzResources } from '../utils';
 import { PermissionScope } from '../PermissionSidePanel/PermissionSidePanel.types';
 import {
 	buildConfig,
@@ -41,12 +36,14 @@ jest.mock('../RoleDetails/constants', () => {

 const dashboardResource: AuthzResources['resources'][number] = {
 	kind: 'dashboard',
-	type: 'metaresource' as CoretypesTypeDTO,
+	type: 'metaresource',
+	allowedVerbs: ['create', 'read', 'update', 'delete', 'list'],
 };

 const alertResource: AuthzResources['resources'][number] = {
 	kind: 'alert',
-	type: 'metaresource' as CoretypesTypeDTO,
+	type: 'metaresource',
+	allowedVerbs: ['create', 'read', 'update', 'delete', 'list'],
 };

 const baseAuthzResources: AuthzResources = {
@@ -57,9 +54,29 @@ const baseAuthzResources: AuthzResources = {
 	},
 };

+// API payload resource refs — only kind+type, no allowedVerbs (matches CoretypesResourceRefDTO shape)
+const dashboardResourceRef = {
+	kind: 'dashboard',
+	type: 'metaresource' as CoretypesTypeDTO,
+};
+const alertResourceRef = {
+	kind: 'alert',
+	type: 'metaresource' as CoretypesTypeDTO,
+};
+
 const resourceDefs: ResourceDefinition[] = [
-	{ id: 'dashboard', label: 'Dashboard' },
-	{ id: 'alert', label: 'Alert' },
+	{
+		id: 'metaresource:dashboard',
+		kind: 'dashboard',
+		type: 'metaresource',
+		label: 'Dashboard',
+	},
+	{
+		id: 'metaresource:alert',
+		kind: 'alert',
+		type: 'metaresource',
+		label: 'Alert',
+	},
 ];

 const ID_A = 'aaaaaaaa-0000-0000-0000-000000000001';
@@ -69,15 +86,24 @@ const ID_C = 'cccccccc-0000-0000-0000-000000000003';
 describe('buildPatchPayload', () => {
 	it('sends only the added selector as an addition', () => {
 		const initial: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [ID_A] },
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
+			'metaresource:dashboard': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [ID_A],
+			},
+			'metaresource:alert': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [],
+			},
 		};
 		const newConfig: PermissionConfig = {
-			dashboard: {
+			'metaresource:dashboard': {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_B],
 			},
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
+			'metaresource:alert': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [],
+			},
 		};

 		const result = buildPatchPayload({
@@ -88,25 +114,31 @@ describe('buildPatchPayload', () => {
 		});

 		expect(result.additions).toStrictEqual([
-			{ resource: dashboardResource, selectors: [ID_B] },
+			{ resource: dashboardResourceRef, selectors: [ID_B] },
 		]);
 		expect(result.deletions).toBeNull();
 	});

 	it('sends only the removed selector as a deletion', () => {
 		const initial: PermissionConfig = {
-			dashboard: {
+			'metaresource:dashboard': {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_B, ID_C],
 			},
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
+			'metaresource:alert': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [],
+			},
 		};
 		const newConfig: PermissionConfig = {
-			dashboard: {
+			'metaresource:dashboard': {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_C],
 			},
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
+			'metaresource:alert': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [],
+			},
 		};

 		const result = buildPatchPayload({
@@ -117,25 +149,31 @@ describe('buildPatchPayload', () => {
 		});

 		expect(result.deletions).toStrictEqual([
-			{ resource: dashboardResource, selectors: [ID_B] },
+			{ resource: dashboardResourceRef, selectors: [ID_B] },
 		]);
 		expect(result.additions).toBeNull();
 	});

 	it('treats selector order as irrelevant — produces no payload when IDs are identical', () => {
 		const initial: PermissionConfig = {
-			dashboard: {
+			'metaresource:dashboard': {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_B],
 			},
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
+			'metaresource:alert': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [],
+			},
 		};
 		const newConfig: PermissionConfig = {
-			dashboard: {
+			'metaresource:dashboard': {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_B, ID_A],
 			},
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
+			'metaresource:alert': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [],
+			},
 		};

 		const result = buildPatchPayload({
@@ -151,15 +189,21 @@ describe('buildPatchPayload', () => {

 	it('replaces wildcard with specific IDs when switching all → only_selected', () => {
 		const initial: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
+			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
+			'metaresource:alert': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [],
+			},
 		};
 		const newConfig: PermissionConfig = {
-			dashboard: {
+			'metaresource:dashboard': {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_B],
 			},
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
+			'metaresource:alert': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [],
+			},
 		};

 		const result = buildPatchPayload({
@@ -170,21 +214,30 @@ describe('buildPatchPayload', () => {
 		});

 		expect(result.deletions).toStrictEqual([
-			{ resource: dashboardResource, selectors: ['*'] },
+			{ resource: dashboardResourceRef, selectors: ['*'] },
 		]);
 		expect(result.additions).toStrictEqual([
-			{ resource: dashboardResource, selectors: [ID_A, ID_B] },
+			{ resource: dashboardResourceRef, selectors: [ID_A, ID_B] },
 		]);
 	});

 	it('only deletes wildcard when switching all → only_selected with empty selector list', () => {
 		const initial: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
+			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
+			'metaresource:alert': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [],
+			},
 		};
 		const newConfig: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
+			'metaresource:dashboard': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [],
+			},
+			'metaresource:alert': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [],
+			},
 		};

 		const result = buildPatchPayload({
@@ -195,19 +248,42 @@ describe('buildPatchPayload', () => {
 		});

 		expect(result.deletions).toStrictEqual([
-			{ resource: dashboardResource, selectors: ['*'] },
+			{ resource: dashboardResourceRef, selectors: ['*'] },
 		]);
 		expect(result.additions).toBeNull();
 	});

-	it('only includes resources that actually changed', () => {
+	it('ALL → NONE: deletes wildcard, no additions', () => {
 		const initial: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [ID_A] },
+			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
+			'metaresource:alert': { scope: PermissionScope.NONE, selectedIds: [] },
 		};
 		const newConfig: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] }, // unchanged
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [ID_A, ID_B] }, // added ID_B
+			'metaresource:dashboard': { scope: PermissionScope.NONE, selectedIds: [] },
+			'metaresource:alert': { scope: PermissionScope.NONE, selectedIds: [] },
+		};
+
+		const result = buildPatchPayload({
+			newConfig,
+			initialConfig: initial,
+			resources: resourceDefs,
+			authzRes: baseAuthzResources,
+		});
+
+		expect(result.deletions).toStrictEqual([
+			{ resource: dashboardResourceRef, selectors: ['*'] },
+		]);
+		expect(result.additions).toBeNull();
+	});
+
+	it('NONE → ALL: adds wildcard, no deletions', () => {
+		const initial: PermissionConfig = {
+			'metaresource:dashboard': { scope: PermissionScope.NONE, selectedIds: [] },
+			'metaresource:alert': { scope: PermissionScope.NONE, selectedIds: [] },
+		};
+		const newConfig: PermissionConfig = {
+			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
+			'metaresource:alert': { scope: PermissionScope.NONE, selectedIds: [] },
 		};

 		const result = buildPatchPayload({
@@ -218,7 +294,105 @@ describe('buildPatchPayload', () => {
 		});

 		expect(result.additions).toStrictEqual([
-			{ resource: alertResource, selectors: [ID_B] },
+			{ resource: dashboardResourceRef, selectors: ['*'] },
+		]);
+		expect(result.deletions).toBeNull();
+	});
+
+	it('ONLY_SELECTED → NONE: deletes selected IDs, no additions', () => {
+		const initial: PermissionConfig = {
+			'metaresource:dashboard': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [ID_A, ID_B],
+			},
+			'metaresource:alert': { scope: PermissionScope.NONE, selectedIds: [] },
+		};
+		const newConfig: PermissionConfig = {
+			'metaresource:dashboard': { scope: PermissionScope.NONE, selectedIds: [] },
+			'metaresource:alert': { scope: PermissionScope.NONE, selectedIds: [] },
+		};
+
+		const result = buildPatchPayload({
+			newConfig,
+			initialConfig: initial,
+			resources: resourceDefs,
+			authzRes: baseAuthzResources,
+		});
+
+		expect(result.deletions).toStrictEqual([
+			{ resource: dashboardResourceRef, selectors: [ID_A, ID_B] },
+		]);
+		expect(result.additions).toBeNull();
+	});
+
+	it('NONE → ONLY_SELECTED with IDs: adds those IDs, no deletions', () => {
+		const initial: PermissionConfig = {
+			'metaresource:dashboard': { scope: PermissionScope.NONE, selectedIds: [] },
+			'metaresource:alert': { scope: PermissionScope.NONE, selectedIds: [] },
+		};
+		const newConfig: PermissionConfig = {
+			'metaresource:dashboard': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [ID_A],
+			},
+			'metaresource:alert': { scope: PermissionScope.NONE, selectedIds: [] },
+		};
+
+		const result = buildPatchPayload({
+			newConfig,
+			initialConfig: initial,
+			resources: resourceDefs,
+			authzRes: baseAuthzResources,
+		});
+
+		expect(result.additions).toStrictEqual([
+			{ resource: dashboardResourceRef, selectors: [ID_A] },
+		]);
+		expect(result.deletions).toBeNull();
+	});
+
+	it('NONE → NONE: no change, produces empty payload', () => {
+		const initial: PermissionConfig = {
+			'metaresource:dashboard': { scope: PermissionScope.NONE, selectedIds: [] },
+			'metaresource:alert': { scope: PermissionScope.NONE, selectedIds: [] },
+		};
+
+		const result = buildPatchPayload({
+			newConfig: { ...initial },
+			initialConfig: initial,
+			resources: resourceDefs,
+			authzRes: baseAuthzResources,
+		});
+
+		expect(result.additions).toBeNull();
+		expect(result.deletions).toBeNull();
+	});
+
+	it('only includes resources that actually changed', () => {
+		const initial: PermissionConfig = {
+			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
+			'metaresource:alert': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [ID_A],
+			},
+		};
+		const newConfig: PermissionConfig = {
+			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] }, // unchanged
+			'metaresource:alert': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [ID_A, ID_B],
+			}, // added ID_B
+		};
+
+		const result = buildPatchPayload({
+			newConfig,
+			initialConfig: initial,
+			resources: resourceDefs,
+			authzRes: baseAuthzResources,
+		});
+
+		expect(result.additions).toStrictEqual([
+			{ resource: alertResourceRef, selectors: [ID_B] },
 		]);
 		expect(result.deletions).toBeNull();
 	});
@@ -227,12 +401,12 @@ describe('buildPatchPayload', () => {
 describe('objectsToPermissionConfig', () => {
 	it('maps a wildcard selector to ALL scope', () => {
 		const objects: CoretypesObjectGroupDTO[] = [
-			{ resource: dashboardResource, selectors: ['*'] },
+			{ resource: dashboardResourceRef, selectors: ['*'] },
 		];

 		const result = objectsToPermissionConfig(objects, resourceDefs);

-		expect(result.dashboard).toStrictEqual({
+		expect(result['metaresource:dashboard']).toStrictEqual({
 			scope: PermissionScope.ALL,
 			selectedIds: [],
 		});
@@ -240,26 +414,26 @@ describe('objectsToPermissionConfig', () => {

 	it('maps specific selectors to ONLY_SELECTED scope with the IDs', () => {
 		const objects: CoretypesObjectGroupDTO[] = [
-			{ resource: dashboardResource, selectors: [ID_A, ID_B] },
+			{ resource: dashboardResourceRef, selectors: [ID_A, ID_B] },
 		];

 		const result = objectsToPermissionConfig(objects, resourceDefs);

-		expect(result.dashboard).toStrictEqual({
+		expect(result['metaresource:dashboard']).toStrictEqual({
 			scope: PermissionScope.ONLY_SELECTED,
 			selectedIds: [ID_A, ID_B],
 		});
 	});

-	it('defaults to ONLY_SELECTED with empty selectedIds when resource is absent from API response', () => {
+	it('defaults to NONE scope when resource is absent from API response', () => {
 		const result = objectsToPermissionConfig([], resourceDefs);

-		expect(result.dashboard).toStrictEqual({
-			scope: PermissionScope.ONLY_SELECTED,
+		expect(result['metaresource:dashboard']).toStrictEqual({
+			scope: PermissionScope.NONE,
 			selectedIds: [],
 		});
-		expect(result.alert).toStrictEqual({
-			scope: PermissionScope.ONLY_SELECTED,
+		expect(result['metaresource:alert']).toStrictEqual({
+			scope: PermissionScope.NONE,
 			selectedIds: [],
 		});
 	});
@@ -268,8 +442,11 @@ describe('objectsToPermissionConfig', () => {
 describe('configsEqual', () => {
 	it('returns true for identical configs', () => {
 		const config: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
-			alert: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [ID_A] },
+			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
+			'metaresource:alert': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [ID_A],
+			},
 		};

 		expect(configsEqual(config, { ...config })).toBe(true);
@@ -277,22 +454,25 @@ describe('configsEqual', () => {

 	it('returns false when configs differ', () => {
 		const a: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
+			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
 		};
 		const b: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ONLY_SELECTED, selectedIds: [] },
+			'metaresource:dashboard': {
+				scope: PermissionScope.ONLY_SELECTED,
+				selectedIds: [],
+			},
 		};

 		expect(configsEqual(a, b)).toBe(false);

 		const c: PermissionConfig = {
-			dashboard: {
+			'metaresource:dashboard': {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_C, ID_B],
 			},
 		};
 		const d: PermissionConfig = {
-			dashboard: {
+			'metaresource:dashboard': {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_B],
 			},
@@ -303,13 +483,13 @@ describe('configsEqual', () => {

 	it('returns true when selectedIds are the same but in different order', () => {
 		const a: PermissionConfig = {
-			dashboard: {
+			'metaresource:dashboard': {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_A, ID_B],
 			},
 		};
 		const b: PermissionConfig = {
-			dashboard: {
+			'metaresource:dashboard': {
 				scope: PermissionScope.ONLY_SELECTED,
 				selectedIds: [ID_B, ID_A],
 			},
@@ -322,23 +502,26 @@ describe('configsEqual', () => {
 describe('buildConfig', () => {
 	it('uses initial values when provided and defaults for resources not in initial', () => {
 		const initial: PermissionConfig = {
-			dashboard: { scope: PermissionScope.ALL, selectedIds: [] },
+			'metaresource:dashboard': { scope: PermissionScope.ALL, selectedIds: [] },
 		};

 		const result = buildConfig(resourceDefs, initial);

-		expect(result.dashboard).toStrictEqual({
+		expect(result['metaresource:dashboard']).toStrictEqual({
 			scope: PermissionScope.ALL,
 			selectedIds: [],
 		});
-		expect(result.alert).toStrictEqual(DEFAULT_RESOURCE_CONFIG);
+		expect(result['metaresource:alert']).toStrictEqual(DEFAULT_RESOURCE_CONFIG);
 	});

-	it('applies DEFAULT_RESOURCE_CONFIG to all resources when no initial is provided', () => {
+	it('applies DEFAULT_RESOURCE_CONFIG (NONE scope) to all resources when no initial is provided', () => {
 		const result = buildConfig(resourceDefs);

-		expect(result.dashboard).toStrictEqual(DEFAULT_RESOURCE_CONFIG);
-		expect(result.alert).toStrictEqual(DEFAULT_RESOURCE_CONFIG);
+		expect(result['metaresource:dashboard']).toStrictEqual(
+			DEFAULT_RESOURCE_CONFIG,
+		);
+		expect(result['metaresource:alert']).toStrictEqual(DEFAULT_RESOURCE_CONFIG);
+		expect(DEFAULT_RESOURCE_CONFIG.scope).toBe(PermissionScope.NONE);
 	});
 });

@@ -375,7 +558,10 @@ describe('deriveResourcesForRelation', () => {
 		const result = deriveResourcesForRelation(baseAuthzResources, 'create');

 		expect(result).toHaveLength(2);
-		expect(result.map((r) => r.id)).toStrictEqual(['dashboard', 'alert']);
+		expect(result.map((r) => r.id)).toStrictEqual([
+			'metaresource:dashboard',
+			'metaresource:alert',
+		]);
 	});

 	it('returns an empty array when authzResources is null', () => {
@@ -387,4 +573,41 @@ describe('deriveResourcesForRelation', () => {
 			deriveResourcesForRelation(baseAuthzResources, 'nonexistent'),
 		).toHaveLength(0);
 	});
+
+	describe('allowedVerbs filtering', () => {
+		it('excludes resources whose allowedVerbs does not include the relation', () => {
+			const authz: AuthzResources = {
+				resources: [
+					{
+						kind: 'dashboard',
+						type: 'metaresource',
+						allowedVerbs: ['create', 'read', 'update', 'delete', 'list'],
+					},
+					{
+						kind: 'alert',
+						type: 'metaresource',
+						allowedVerbs: ['create', 'read', 'update', 'delete', 'list', 'attach'],
+					},
+				],
+				relations: { attach: ['metaresource'] },
+			};
+
+			const result = deriveResourcesForRelation(authz, 'attach');
+
+			expect(result).toHaveLength(1);
+			expect(result[0].id).toBe('metaresource:alert');
+		});
+
+		it('requires both type-relation match and allowedVerbs — neither condition alone is sufficient', () => {
+			const authz: AuthzResources = {
+				resources: [
+					{ kind: 'dashboard', type: 'metaresource', allowedVerbs: ['read'] },
+					{ kind: 'role', type: 'role', allowedVerbs: ['create'] },
+				],
+				relations: { create: ['metaresource'] },
+			};
+
+			expect(deriveResourcesForRelation(authz, 'create')).toHaveLength(0);
+		});
+	});
 });
--- a/frontend/src/container/RolesSettings/config.ts
+++ b/frontend/src/container/RolesSettings/config.ts
@@ -1 +0,0 @@
-export const IS_ROLE_DETAILS_AND_CRUD_ENABLED = false;
--- a/frontend/src/container/RolesSettings/utils.tsx
+++ b/frontend/src/container/RolesSettings/utils.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Badge } from '@signozhq/ui/badge';
 import type {
-	CoretypesResourceRefDTO,
 	CoretypesObjectGroupDTO,
+	CoretypesResourceRefDTO,
+	CoretypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { capitalize } from 'lodash-es';
@@ -12,6 +13,7 @@ import type {
 	PermissionConfig,
 	ResourceConfig,
 	ResourceDefinition,
+	ScopeType,
 } from './PermissionSidePanel/PermissionSidePanel.types';
 import { PermissionScope } from './PermissionSidePanel/PermissionSidePanel.types';
 import {
@@ -20,7 +22,11 @@ import {
 } from './RoleDetails/constants';

 export type AuthzResources = {
-	resources: ReadonlyArray<CoretypesResourceRefDTO>;
+	resources: ReadonlyArray<{
+		kind: string;
+		type: string;
+		allowedVerbs: readonly string[];
+	}>;
 	relations: Readonly<Record<string, ReadonlyArray<string>>>;
 };

@@ -68,10 +74,14 @@ export function deriveResourcesForRelation(
 	}
 	const supportedTypes = authzResources.relations[relation] ?? [];
 	return authzResources.resources
-		.filter((r) => supportedTypes.includes(r.type))
+		.filter(
+			(r) => supportedTypes.includes(r.type) && r.allowedVerbs.includes(relation),
+		)
 		.map((r) => ({
-			id: r.kind,
-			label: capitalize(r.kind).replaceAll('_', ' '),
+			id: `${r.type}:${r.kind}`,
+			kind: r.kind,
+			type: r.type,
+			label: r.kind,
 			options: [],
 		}));
 }
@@ -82,10 +92,12 @@ export function objectsToPermissionConfig(
 ): PermissionConfig {
 	const config: PermissionConfig = {};
 	for (const res of resources) {
-		const obj = objects.find((o) => o.resource.kind === res.id);
+		const obj = objects.find(
+			(o) => o.resource.kind === res.kind && o.resource.type === res.type,
+		);
 		if (!obj) {
 			config[res.id] = {
-				scope: PermissionScope.ONLY_SELECTED,
+				scope: PermissionScope.NONE,
 				selectedIds: [],
 			};
 		} else {
@@ -99,6 +111,16 @@ export function objectsToPermissionConfig(
 	return config;
 }

+function selectorsForScope(scope: ScopeType, selectedIds: string[]): string[] {
+	if (scope === PermissionScope.ALL) {
+		return ['*'];
+	}
+	if (scope === PermissionScope.ONLY_SELECTED) {
+		return selectedIds;
+	}
+	return []; // NONE
+}
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function buildPatchPayload({
 	newConfig,
@@ -118,17 +140,19 @@ export function buildPatchPayload({
 	for (const res of resources) {
 		const initial = initialConfig[res.id];
 		const current = newConfig[res.id];
-		const found = authzRes.resources.find((r) => r.kind === res.id);
+		const found = authzRes.resources.find(
+			(r) => r.kind === res.kind && r.type === res.type,
+		);
 		if (!found) {
 			continue;
 		}
 		const resourceDef: CoretypesResourceRefDTO = {
 			kind: found.kind,
-			type: found.type,
+			type: found.type as CoretypesTypeDTO,
 		};

-		const initialScope = initial?.scope ?? PermissionScope.ONLY_SELECTED;
-		const currentScope = current?.scope ?? PermissionScope.ONLY_SELECTED;
+		const initialScope = initial?.scope ?? PermissionScope.NONE;
+		const currentScope = current?.scope ?? PermissionScope.NONE;

 		if (initialScope === currentScope) {
 			// Same scope — only diff individual selectors when both are ONLY_SELECTED
@@ -144,16 +168,20 @@ export function buildPatchPayload({
 					additions.push({ resource: resourceDef, selectors: added });
 				}
 			}
-			// Both ALL → no change, skip
+			// Both ALL or both NONE → no change, skip
 		} else {
-			// Scope changed (ALL ↔ ONLY_SELECTED) — replace old with new
-			const initialSelectors =
-				initialScope === PermissionScope.ALL ? ['*'] : (initial?.selectedIds ?? []);
+			// Scope changed — replace old selectors with new ones
+			const initialSelectors = selectorsForScope(
+				initialScope,
+				initial?.selectedIds ?? [],
+			);
 			if (initialSelectors.length > 0) {
 				deletions.push({ resource: resourceDef, selectors: initialSelectors });
 			}
-			const currentSelectors =
-				currentScope === PermissionScope.ALL ? ['*'] : (current?.selectedIds ?? []);
+			const currentSelectors = selectorsForScope(
+				currentScope,
+				current?.selectedIds ?? [],
+			);
 			if (currentSelectors.length > 0) {
 				additions.push({ resource: resourceDef, selectors: currentSelectors });
 			}
@@ -191,7 +219,7 @@ export function TimestampBadge({ date }: TimestampBadgeProps): JSX.Element {
 }

 export const DEFAULT_RESOURCE_CONFIG: ResourceConfig = {
-	scope: PermissionScope.ONLY_SELECTED,
+	scope: PermissionScope.NONE,
 	selectedIds: [],
 };

--- a/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.test.tsx
+++ b/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.test.tsx
@@ -0,0 +1,132 @@
+import type { AuthtypesTransactionDTO } from 'api/generated/services/sigNoz.schemas';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
+import { render, screen, waitFor } from 'tests/test-utils';
+import { AUTHZ_CHECK_URL, authzMockResponse } from 'tests/authz-test-utils';
+import ServiceAccountsSettings from './ServiceAccountsSettings';
+
+const SA_LIST_URL = 'http://localhost/api/v1/service_accounts';
+
+function renderPage(): ReturnType<typeof render> {
+	return render(
+		<NuqsTestingAdapter searchParams={{}} hasMemory>
+			<ServiceAccountsSettings />
+		</NuqsTestingAdapter>,
+	);
+}
+
+describe('ServiceAccountsSettings — FGA', () => {
+	beforeEach(() => {
+		server.use(
+			rest.get(SA_LIST_URL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json({ data: [] })),
+			),
+		);
+	});
+
+	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();
+				return res(
+					ctx.status(200),
+					ctx.json(
+						authzMockResponse(
+							payload,
+							payload.map(() => false),
+						),
+					),
+				);
+			}),
+		);
+
+		renderPage();
+
+		await waitFor(() => {
+			expect(
+				screen.getByText(/You don't have permission to view this page/),
+			).toBeInTheDocument();
+		});
+
+		expect(screen.queryByRole('table')).not.toBeInTheDocument();
+	});
+
+	it('shows table when list 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,
+							payload.map(() => true),
+						),
+					),
+				);
+			}),
+		);
+
+		renderPage();
+
+		await waitFor(() => {
+			expect(screen.getByRole('table')).toBeInTheDocument();
+		});
+
+		expect(
+			screen.queryByText(/You don't have permission to view this page/),
+		).not.toBeInTheDocument();
+	});
+
+	it('disables New Service Account button when create permission is denied', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				// grant list, deny create — matched by relation name
+				return res(
+					ctx.status(200),
+					ctx.json(
+						authzMockResponse(
+							payload,
+							payload.map((txn: AuthtypesTransactionDTO) => txn.relation === 'list'),
+						),
+					),
+				);
+			}),
+		);
+
+		renderPage();
+
+		await waitFor(() => {
+			expect(
+				screen.getByRole('button', { name: /New Service Account/i }),
+			).toBeDisabled();
+		});
+	});
+
+	it('enables New Service Account button when create 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,
+							payload.map(() => true),
+						),
+					),
+				);
+			}),
+		);
+
+		renderPage();
+
+		await waitFor(() => {
+			expect(
+				screen.getByRole('button', { name: /New Service Account/i }),
+			).not.toBeDisabled();
+		});
+	});
+});
--- a/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx
+++ b/frontend/src/container/ServiceAccountsSettings/ServiceAccountsSettings.tsx
@@ -5,12 +5,20 @@ import { Input } from '@signozhq/ui/input';
 import type { MenuProps } from 'antd';
 import { Dropdown } from 'antd';
 import { useListServiceAccounts } from 'api/generated/services/serviceaccount';
+import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import CreateServiceAccountModal from 'components/CreateServiceAccountModal/CreateServiceAccountModal';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import Spinner from 'components/Spinner';
 import ServiceAccountDrawer from 'components/ServiceAccountDrawer/ServiceAccountDrawer';
 import ServiceAccountsTable, {
 	PAGE_SIZE,
 } from 'components/ServiceAccountsTable/ServiceAccountsTable';
+import {
+	SACreatePermission,
+	SAListPermission,
+} from 'hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -51,13 +59,19 @@ function ServiceAccountsSettings(): JSX.Element {
 		parseAsBoolean.withDefault(false),
 	);

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

 	const allAccounts = useMemo(
 		(): ServiceAccountRow[] =>
@@ -112,9 +126,9 @@ function ServiceAccountsSettings(): JSX.Element {

 		const maxPage = Math.max(1, Math.ceil(filteredAccounts.length / PAGE_SIZE));
 		if (currentPage > maxPage) {
-			setPage(maxPage);
+			void setPage(maxPage);
 		} else if (currentPage < 1) {
-			setPage(1);
+			void setPage(1);
 		}
 	}, [filteredAccounts.length, currentPage, setPage]);

@@ -130,8 +144,8 @@ function ServiceAccountsSettings(): JSX.Element {
 				</div>
 			),
 			onClick: (): void => {
-				setFilterMode(FilterMode.All);
-				setPage(1);
+				void setFilterMode(FilterMode.All);
+				void setPage(1);
 			},
 		},
 		{
@@ -143,8 +157,8 @@ function ServiceAccountsSettings(): JSX.Element {
 				</div>
 			),
 			onClick: (): void => {
-				setFilterMode(FilterMode.Active);
-				setPage(1);
+				void setFilterMode(FilterMode.Active);
+				void setPage(1);
 			},
 		},
 		{
@@ -156,8 +170,8 @@ function ServiceAccountsSettings(): JSX.Element {
 				</div>
 			),
 			onClick: (): void => {
-				setFilterMode(FilterMode.Deleted);
-				setPage(1);
+				void setFilterMode(FilterMode.Deleted);
+				void setPage(1);
 			},
 		},
 	];
@@ -176,7 +190,7 @@ function ServiceAccountsSettings(): JSX.Element {

 	const handleRowClick = useCallback(
 		(row: ServiceAccountRow): void => {
-			setSelectedAccountId(row.id);
+			void setSelectedAccountId(row.id);
 		},
 		[setSelectedAccountId],
 	);
@@ -184,9 +198,9 @@ function ServiceAccountsSettings(): JSX.Element {
 	const handleDrawerSuccess = useCallback(
 		(options?: { closeDrawer?: boolean }): void => {
 			if (options?.closeDrawer) {
-				setSelectedAccountId(null);
+				void setSelectedAccountId(null);
 			}
-			handleCreateSuccess();
+			void handleCreateSuccess();
 		},
 		[handleCreateSuccess, setSelectedAccountId],
 	);
@@ -208,63 +222,76 @@ function ServiceAccountsSettings(): JSX.Element {
 						</a>
 					</p>
 				</div>
-
-				<div className="sa-settings__controls">
-					<Dropdown
-						menu={{ items: filterMenuItems }}
-						trigger={['click']}
-						overlayClassName="sa-settings-filter-dropdown"
-					>
-						<Button
-							variant="solid"
-							color="secondary"
-							className="sa-settings-filter-trigger"
-						>
-							<span>{filterLabel}</span>
-							<ChevronDown size={12} className="sa-settings-filter-trigger__chevron" />
-						</Button>
-					</Dropdown>
-
-					<div className="sa-settings__search">
-						<Input
-							type="search"
-							name="service-accounts-search"
-							placeholder="Search by name or email..."
-							value={searchQuery}
-							onChange={(e): void => {
-								setSearchQuery(e.target.value);
-								setPage(1);
-							}}
-							className="sa-settings-search-input"
-						/>
-					</div>
-
-					<Button
-						variant="solid"
-						color="primary"
-						onClick={async (): Promise<void> => {
-							await setIsCreateModalOpen(true);
-						}}
-					>
-						<Plus size={12} />
-						New Service Account
-					</Button>
-				</div>
 			</div>

-			{isError ? (
-				<ErrorInPlace
-					error={toAPIError(
-						error,
-						'An unexpected error occurred while fetching service accounts.',
-					)}
-				/>
+			{isAuthZLoading || isLoading ? (
+				<Spinner height="50vh" />
+			) : !hasListPermission ? (
+				<PermissionDeniedFullPage permissionName="serviceaccount:list" />
 			) : (
-				<ServiceAccountsTable
-					data={filteredAccounts}
-					loading={isLoading}
-					onRowClick={handleRowClick}
-				/>
+				<div className="sa-settings__list-section">
+					<div className="sa-settings__controls">
+						<Dropdown
+							menu={{ items: filterMenuItems }}
+							trigger={['click']}
+							overlayClassName="sa-settings-filter-dropdown"
+						>
+							<Button
+								variant="solid"
+								color="secondary"
+								className="sa-settings-filter-trigger"
+							>
+								<span>{filterLabel}</span>
+								<ChevronDown
+									size={12}
+									className="sa-settings-filter-trigger__chevron"
+								/>
+							</Button>
+						</Dropdown>
+
+						<div className="sa-settings__search">
+							<Input
+								type="search"
+								name="service-accounts-search"
+								placeholder="Search by name or email..."
+								value={searchQuery}
+								onChange={(e): void => {
+									void setSearchQuery(e.target.value);
+									void setPage(1);
+								}}
+								className="sa-settings-search-input"
+							/>
+						</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>
+
+					{isError ? (
+						<ErrorInPlace
+							error={toAPIError(
+								error,
+								'An unexpected error occurred while fetching service accounts.',
+							)}
+						/>
+					) : (
+						<ServiceAccountsTable
+							data={filteredAccounts}
+							loading={isLoading}
+							onRowClick={handleRowClick}
+						/>
+					)}
+				</div>
 			)}

 			<CreateServiceAccountModal />
--- a/frontend/src/container/ServiceAccountsSettings/tests/ServiceAccountsSettings.integration.test.tsx
+++ b/frontend/src/container/ServiceAccountsSettings/tests/ServiceAccountsSettings.integration.test.tsx
@@ -3,12 +3,14 @@ import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
+import { setupAuthzAdmin } from 'tests/authz-test-utils';

 import ServiceAccountsSettings from '../ServiceAccountsSettings';

 const SA_LIST_ENDPOINT = '*/api/v1/service_accounts';
 const SA_ENDPOINT = '*/api/v1/service_accounts/:id';
 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', () => ({
@@ -85,6 +87,7 @@ describe('ServiceAccountsSettings (integration)', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		server.use(
+			setupAuthzAdmin(),
 			rest.get(SA_LIST_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ data: mockServiceAccountsAPI })),
 			),
@@ -98,6 +101,9 @@ describe('ServiceAccountsSettings (integration)', () => {
 			rest.get(SA_KEYS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ data: [] })),
 			),
+			rest.get(SA_ROLES_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ data: [] })),
+			),
 			rest.get(ROLES_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
 			),
@@ -178,15 +184,17 @@ describe('ServiceAccountsSettings (integration)', () => {

 	it('saving changes in the drawer refetches the list', async () => {
 		const listRefetchSpy = jest.fn();
+		const putSpy = jest.fn();

 		server.use(
 			rest.get(SA_LIST_ENDPOINT, (_, res, ctx) => {
 				listRefetchSpy();
 				return res(ctx.status(200), ctx.json({ data: mockServiceAccountsAPI }));
 			}),
-			rest.put(SA_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
-			),
+			rest.put(SA_ENDPOINT, async (req, res, ctx) => {
+				putSpy(await req.json());
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+			}),
 		);

 		render(
@@ -205,9 +213,17 @@ describe('ServiceAccountsSettings (integration)', () => {
 		const nameInput = await screen.findByDisplayValue('CI Bot');
 		fireEvent.change(nameInput, { target: { value: 'CI Bot Updated' } });

+		await screen.findByDisplayValue('CI Bot Updated');
+
 		fireEvent.click(screen.getByRole('button', { name: /Save Changes/i }));

-		await screen.findByDisplayValue('CI Bot Updated');
+		// Wait for the PUT to complete with the right payload — confirms save fired
+		await waitFor(() =>
+			expect(putSpy).toHaveBeenCalledWith(
+				expect.objectContaining({ name: 'CI Bot Updated' }),
+			),
+		);
+
 		await waitFor(() => {
 			expect(listRefetchSpy).toHaveBeenCalled();
 		});
@@ -222,6 +238,13 @@ describe('ServiceAccountsSettings (integration)', () => {

 		await screen.findByText('CI Bot');

+		// Wait for authz check to resolve before clicking
+		await waitFor(() =>
+			expect(
+				screen.getByRole('button', { name: /New Service Account/i }),
+			).not.toBeDisabled(),
+		);
+
 		fireEvent.click(screen.getByRole('button', { name: /New Service Account/i }));

 		await screen.findByRole('dialog', { name: /New Service Account/i });
--- a/frontend/src/container/SideNav/menuItems.tsx
+++ b/frontend/src/container/SideNav/menuItems.tsx
@@ -374,6 +374,7 @@ export const settingsNavSections: SettingsNavSection[] = [
 				icon: <Shield size={16} />,
 				isEnabled: false,
 				itemKey: 'roles',
+				isBeta: true,
 			},
 			{
 				key: ROUTES.MEMBERS_SETTINGS,
--- a/frontend/src/hooks/serviceAccount/useServiceAccountRoleManager.ts
+++ b/frontend/src/hooks/serviceAccount/useServiceAccountRoleManager.ts
@@ -31,10 +31,14 @@ interface UseServiceAccountRoleManagerResult {

 export function useServiceAccountRoleManager(
 	accountId: string,
+	options?: { enabled?: boolean },
 ): UseServiceAccountRoleManagerResult {
 	const queryClient = useQueryClient();

-	const { data, isLoading } = useGetServiceAccountRoles({ id: accountId });
+	const { data, isLoading } = useGetServiceAccountRoles(
+		{ id: accountId },
+		{ query: { enabled: options?.enabled ?? true } },
+	);

 	const currentRoles = useMemo<AuthtypesRoleDTO[]>(
 		() => data?.data ?? [],
--- a/frontend/src/hooks/useAuthZ/permissions/role.permissions.ts
+++ b/frontend/src/hooks/useAuthZ/permissions/role.permissions.ts
@@ -0,0 +1,14 @@
+import { buildPermission } from '../utils';
+import type { BrandedPermission } from '../types';
+
+// Collection-level — no specific role id needed
+export const RoleCreatePermission = buildPermission('create', 'role:*');
+export const RoleListPermission = buildPermission('list', 'role:*');
+
+// Resource-level — require a specific role id
+export const buildRoleReadPermission = (id: string): BrandedPermission =>
+	buildPermission('read', `role:${id}`);
+export const buildRoleUpdatePermission = (id: string): BrandedPermission =>
+	buildPermission('update', `role:${id}`);
+export const buildRoleDeletePermission = (id: string): BrandedPermission =>
+	buildPermission('delete', `role:${id}`);
--- a/frontend/src/hooks/useAuthZ/permissions/service-account.permissions.ts
+++ b/frontend/src/hooks/useAuthZ/permissions/service-account.permissions.ts
@@ -0,0 +1,38 @@
+import { buildPermission } from '../utils';
+import type { BrandedPermission } from '../types';
+
+// Collection-level — wildcard selector required for correct response key matching
+export const SAListPermission = buildPermission('list', 'serviceaccount:*');
+export const SACreatePermission = buildPermission('create', 'serviceaccount:*');
+
+// Resource-level — require a specific SA id
+export const buildSAReadPermission = (id: string): BrandedPermission =>
+	buildPermission('read', `serviceaccount:${id}`);
+export const buildSAUpdatePermission = (id: string): BrandedPermission =>
+	buildPermission('update', `serviceaccount:${id}`);
+export const buildSADeletePermission = (id: string): BrandedPermission =>
+	buildPermission('delete', `serviceaccount:${id}`);
+export const buildSAAttachPermission = (id: string): BrandedPermission =>
+	buildPermission('attach', `serviceaccount:${id}`);
+export const buildSADetachPermission = (id: string): BrandedPermission =>
+	buildPermission('detach', `serviceaccount:${id}`);
+
+// Wildcard role permissions — used alongside SA-level checks for role assign/revoke guards.
+// Backend requires both serviceaccount:attach AND role:attach to assign a role to a SA,
+// and serviceaccount:detach AND role:detach to remove a role from a SA.
+export const RoleAttachWildcardPermission = buildPermission('attach', 'role:*');
+export const RoleDetachWildcardPermission = buildPermission('detach', 'role:*');
+
+// API key (factor-api-key) permissions.
+// Listing keys: factor-api-key:list.
+// Creating a key: factor-api-key:create (wildcard) + serviceaccount:attach.
+// Revoking a key: factor-api-key:delete (specific key) + serviceaccount:detach.
+export const APIKeyListPermission = buildPermission('list', 'factor-api-key:*');
+export const APIKeyCreatePermission = buildPermission(
+	'create',
+	'factor-api-key:*',
+);
+export const buildAPIKeyUpdatePermission = (keyId: string): BrandedPermission =>
+	buildPermission('update', `factor-api-key:${keyId}`);
+export const buildAPIKeyDeletePermission = (keyId: string): BrandedPermission =>
+	buildPermission('delete', `factor-api-key:${keyId}`);
--- a/frontend/src/hooks/useAuthZ/useAuthZ.test.tsx
+++ b/frontend/src/hooks/useAuthZ/useAuthZ.test.tsx
@@ -1,35 +1,14 @@
 import { ReactElement } from 'react';
 import { renderHook, waitFor } from '@testing-library/react';
-import {
-	AuthtypesGettableTransactionDTO,
-	AuthtypesTransactionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { ENVIRONMENT } from 'constants/env';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { AllTheProviders } from 'tests/test-utils';
+import { AUTHZ_CHECK_URL, authzMockResponse } from 'tests/authz-test-utils';

 import { BrandedPermission } from './types';
 import { useAuthZ } from './useAuthZ';
 import { buildPermission } from './utils';

-const BASE_URL = ENVIRONMENT.baseURL || '';
-const AUTHZ_CHECK_URL = `${BASE_URL}/api/v1/authz/check`;
-
-function authzMockResponse(
-	payload: AuthtypesTransactionDTO[],
-	authorizedByIndex: boolean[],
-): { data: AuthtypesGettableTransactionDTO[]; status: string } {
-	return {
-		data: payload.map((txn, i) => ({
-			relation: txn.relation,
-			object: txn.object,
-			authorized: authorizedByIndex[i] ?? false,
-		})),
-		status: 'success',
-	};
-}
-
 const wrapper = ({ children }: { children: ReactElement }): ReactElement => (
 	<AllTheProviders>{children}</AllTheProviders>
 );
--- a/frontend/src/lib/uPlotV2/components/Tooltip/tests/utils.test.ts
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/tests/utils.test.ts
@@ -189,7 +189,7 @@ describe('Tooltip utils', () => {
 			];
 		}

-		it('builds tooltip content in series-index order with isActive flag set correctly', () => {
+		it('builds tooltip content sorted by value descending with isActive flag set correctly', () => {
 			const data: AlignedData = [[0], [10], [20], [30]];
 			const series = createSeriesConfig();
 			const dataIndexes = [null, 0, 0, 0];
@@ -206,21 +206,21 @@ describe('Tooltip utils', () => {
 			});

 			expect(result).toHaveLength(2);
-			// Series are returned in series-index order (A=index 1 before B=index 2)
+			// Sorted by value descending: B (20) before A (10)
 			expect(result[0]).toMatchObject<Partial<TooltipContentItem>>({
-				label: 'A',
-				value: 10,
-				tooltipValue: 'formatted-10',
-				color: '#ff0000',
-				isActive: false,
-			});
-			expect(result[1]).toMatchObject<Partial<TooltipContentItem>>({
 				label: 'B',
 				value: 20,
 				tooltipValue: 'formatted-20',
 				color: 'color-2',
 				isActive: true,
 			});
+			expect(result[1]).toMatchObject<Partial<TooltipContentItem>>({
+				label: 'A',
+				value: 10,
+				tooltipValue: 'formatted-10',
+				color: '#ff0000',
+				isActive: false,
+			});
 		});

 		it('skips series with null data index or non-finite values', () => {
@@ -274,7 +274,7 @@ describe('Tooltip utils', () => {
 			expect(result[1].value).toBe(30);
 		});

-		it('returns items in series-index order', () => {
+		it('returns items sorted by value descending', () => {
 			// Series values in non-sorted order: 3, 1, 4, 2
 			const data: AlignedData = [[0], [3], [1], [4], [2]];
 			const series: Series[] = [
@@ -297,7 +297,7 @@ describe('Tooltip utils', () => {
 				decimalPrecision,
 			});

-			expect(result.map((item) => item.value)).toStrictEqual([3, 1, 4, 2]);
+			expect(result.map((item) => item.value)).toStrictEqual([4, 3, 2, 1]);
 		});
 	});
 });
--- a/frontend/src/lib/uPlotV2/components/Tooltip/utils.ts
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/utils.ts
@@ -142,5 +142,7 @@ export function buildTooltipContent({
 		}
 	}

+	items.sort((a, b) => b.value - a.value);
+
 	return items;
 }
--- a/frontend/src/pages/Settings/Settings.tsx
+++ b/frontend/src/pages/Settings/Settings.tsx
@@ -72,18 +72,26 @@ function SettingsPage(): JSX.Element {
 			}

 			if (isCloudUser) {
+				// Visible to all authenticated users
+				updatedItems = updatedItems.map((item) => ({
+					...item,
+					isEnabled:
+						item.key === ROUTES.ROLES_SETTINGS ||
+						item.key === ROUTES.ROLE_DETAILS ||
+						item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS
+							? true
+							: item.isEnabled,
+				}));
+
 				if (isAdmin) {
 					updatedItems = updatedItems.map((item) => ({
 						...item,
 						isEnabled:
 							item.key === ROUTES.BILLING ||
-							item.key === ROUTES.ROLES_SETTINGS ||
-							item.key === ROUTES.ROLE_DETAILS ||
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.INGESTION_SETTINGS ||
 							item.key === ROUTES.ORG_SETTINGS ||
 							item.key === ROUTES.MEMBERS_SETTINGS ||
-							item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS ||
 							item.key === ROUTES.SHORTCUTS ||
 							item.key === ROUTES.MCP_SERVER
 								? true
@@ -113,17 +121,25 @@ function SettingsPage(): JSX.Element {
 			}

 			if (isEnterpriseSelfHostedUser) {
+				// Visible to all authenticated users
+				updatedItems = updatedItems.map((item) => ({
+					...item,
+					isEnabled:
+						item.key === ROUTES.ROLES_SETTINGS ||
+						item.key === ROUTES.ROLE_DETAILS ||
+						item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS
+							? true
+							: item.isEnabled,
+				}));
+
 				if (isAdmin) {
 					updatedItems = updatedItems.map((item) => ({
 						...item,
 						isEnabled:
 							item.key === ROUTES.BILLING ||
-							item.key === ROUTES.ROLES_SETTINGS ||
-							item.key === ROUTES.ROLE_DETAILS ||
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.ORG_SETTINGS ||
 							item.key === ROUTES.MEMBERS_SETTINGS ||
-							item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS ||
 							item.key === ROUTES.INGESTION_SETTINGS ||
 							item.key === ROUTES.MCP_SERVER
 								? true
@@ -152,15 +168,22 @@ function SettingsPage(): JSX.Element {
 			}

 			if (!isCloudUser && !isEnterpriseSelfHostedUser) {
+				// Visible to all authenticated users
+				updatedItems = updatedItems.map((item) => ({
+					...item,
+					isEnabled:
+						item.key === ROUTES.ROLES_SETTINGS ||
+						item.key === ROUTES.ROLE_DETAILS ||
+						item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS
+							? true
+							: item.isEnabled,
+				}));
+
 				if (isAdmin) {
 					updatedItems = updatedItems.map((item) => ({
 						...item,
 						isEnabled:
-							item.key === ROUTES.ORG_SETTINGS ||
-							item.key === ROUTES.MEMBERS_SETTINGS ||
-							item.key === ROUTES.SERVICE_ACCOUNTS_SETTINGS ||
-							item.key === ROUTES.ROLES_SETTINGS ||
-							item.key === ROUTES.ROLE_DETAILS
+							item.key === ROUTES.ORG_SETTINGS || item.key === ROUTES.MEMBERS_SETTINGS
 								? true
 								: item.isEnabled,
 					}));
--- a/frontend/src/pages/Settings/tests/Settings.test.tsx
+++ b/frontend/src/pages/Settings/tests/Settings.test.tsx
@@ -78,11 +78,14 @@ describe('SettingsPage nav sections', () => {
 			});
 		});

-		it.each(['workspace', 'account'])('renders "%s" element', (id) => {
-			expect(screen.getByTestId(id)).toBeInTheDocument();
-		});
+		it.each(['workspace', 'account', 'roles', 'service-accounts'])(
+			'renders "%s" element',
+			(id) => {
+				expect(screen.getByTestId(id)).toBeInTheDocument();
+			},
+		);

-		it.each(['billing', 'roles'])('does not render "%s" element', (id) => {
+		it.each(['billing'])('does not render "%s" element', (id) => {
 			expect(screen.queryByTestId(id)).not.toBeInTheDocument();
 		});

--- a/frontend/src/pages/Settings/utils.ts
+++ b/frontend/src/pages/Settings/utils.ts
@@ -62,13 +62,16 @@ export const getRoutes = (

 	settings.push(...alertChannels(t));

+	// Visible to all authenticated users
+	settings.push(
+		...serviceAccountsSettings(t),
+		...rolesSettings(t),
+		...roleDetails(t),
+	);
+
+	// Admin-only: members management
 	if (isAdmin) {
-		settings.push(
-			...membersSettings(t),
-			...serviceAccountsSettings(t),
-			...rolesSettings(t),
-			...roleDetails(t),
-		);
+		settings.push(...membersSettings(t));
 	}

 	if ((isCloudUser || isEnterpriseSelfHostedUser) && isAdmin) {
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.module.scss
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.module.scss
@@ -101,21 +101,45 @@
 	white-space: nowrap;
 }

-.preNextToggle {
-	display: flex;
+// Fixed-width slot for the result-nav cluster. Always present (even when no
+// expression is active) so the filter input width stays stable — no lateral
+// layout shift when the count/arrows/clear pop in.
+.resultNavSlot {
+	width: 220px;
 	flex-shrink: 0;
-	gap: 12px;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
 }

-.preNextCount {
+// Result-nav cluster: count + ↑↓ + clear (X), sits between the filter input
+// and the right-side status/highlight controls. Visible whenever there's an
+// active expression; count + ↑↓ collapse out when no results, clear stays.
+.resultNav {
 	display: flex;
 	align-items: center;
-	margin: auto;
+	flex-shrink: 0;
+	gap: 2px;
 	color: var(--l2-foreground);
 	font-family: 'Geist Mono';
 	font-size: 12px;
-	font-weight: 400;
-	line-height: 18px;
+}
+
+.resultNavCount {
+	padding: 0 6px;
+	white-space: nowrap;
+	color: var(--l1-foreground);
+	font-family: 'Geist Mono';
+	font-size: 12px;
+	font-variant-numeric: tabular-nums;
+}
+
+.resultNavDivider {
+	width: 1px;
+	height: 14px;
+	background: var(--l3-border);
+	margin: 0 4px;
+	flex-shrink: 0;
 }

 .filterStatus {
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters.tsx
@@ -3,6 +3,7 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import {
 	ChevronDown,
+	ChevronsRight,
 	ChevronUp,
 	Copy,
 	Info,
@@ -106,6 +107,12 @@ function Filters({
 	const [currentSearchedIndex, setCurrentSearchedIndex] = useState<number>(0);
 	const expressionRef = useRef<string>('');
 	const containerRef = useRef<HTMLDivElement>(null);
+	// Ref to the Clear (×) button so we can suppress the search-container
+	// onBlur → runQuery path when focus moves to it. Otherwise the editor
+	// loses focus before our click handler runs, runQuery commits the (still
+	// bad) expression, and React Query re-fires the failing request on the
+	// way to being cleared.
+	const clearBtnRef = useRef<HTMLButtonElement>(null);

 	const runQuery = useCallback(
 		(value: string): void => {
@@ -152,6 +159,18 @@ function Filters({
 		runQuery(expressionRef.current);
 	}, [runQuery]);

+	// Clear filter — reset expression + filters + results in one shot.
+	// Wired to the X button in the result-nav cluster.
+	const handleClear = useCallback((): void => {
+		setExpression('');
+		expressionRef.current = '';
+		setFilters({ items: [], op: 'AND' });
+		setFilteredSpanIds([]);
+		onFilteredSpansChange?.([], false);
+		setCurrentSearchedIndex(0);
+		setNoData(false);
+	}, [onFilteredSpansChange]);
+
 	// Expression-based filter hooks
 	const filterProps = {
 		expression,
@@ -266,10 +285,71 @@ function Filters({
 		</div>
 	);

-	const statusIndicators = (
-		<>
-			{isFetching && <Loader className="animate-spin" />}
-			{error && (
+	const hasExpression = expression.trim().length > 0;
+	const hasResults = filteredSpanIds.length > 0;
+
+	// Result-nav cluster: count + ↑↓ + clear (X), all OUTSIDE the input.
+	// - The cluster appears whenever there's an active expression.
+	// - Count + ↑↓ are hidden when there are no results to navigate (no-data or
+	//   API error); clear (X) stays so the user can always reset.
+	const resultNav = hasExpression ? (
+		<div className={styles.resultNav}>
+			{hasResults && (
+				<>
+					<Typography.Text className={styles.resultNavCount}>
+						{currentSearchedIndex + 1} / {filteredSpanIds.length}
+					</Typography.Text>
+					<Button
+						variant="ghost"
+						size="icon"
+						color="secondary"
+						disabled={currentSearchedIndex === 0}
+						onClick={(): void => {
+							handlePrevNext(currentSearchedIndex - 1);
+							setCurrentSearchedIndex((prev) => prev - 1);
+						}}
+					>
+						<ChevronUp size={14} />
+					</Button>
+					<Button
+						variant="ghost"
+						size="icon"
+						color="secondary"
+						disabled={currentSearchedIndex === filteredSpanIds.length - 1}
+						onClick={(): void => {
+							handlePrevNext(currentSearchedIndex + 1);
+							setCurrentSearchedIndex((prev) => prev + 1);
+						}}
+					>
+						<ChevronDown size={14} />
+					</Button>
+					<span className={styles.resultNavDivider} />
+				</>
+			)}
+			<TooltipRoot>
+				<TooltipTrigger asChild>
+					<Button
+						ref={clearBtnRef}
+						variant="ghost"
+						size="icon"
+						color="secondary"
+						onClick={handleClear}
+					>
+						<X size={14} />
+					</Button>
+				</TooltipTrigger>
+				<TooltipContent>Clear filter</TooltipContent>
+			</TooltipRoot>
+		</div>
+	) : null;
+
+	// Status indicator (right side): "No results found" (muted) or "API error"
+	// (red ring + tooltip). Shown only when there's an active expression and
+	// either no matches came back or the API itself failed.
+	let statusIndicator: JSX.Element | null = null;
+	if (hasExpression && !isFetching) {
+		if (error) {
+			statusIndicator = (
 				<TooltipRoot>
 					<TooltipTrigger asChild>
 						<span className={cx(styles.filterStatus, styles.hasError)}>
@@ -281,14 +361,19 @@ function Filters({
 						{(error as AxiosError)?.message || 'Something went wrong'}
 					</TooltipContent>
 				</TooltipRoot>
-			)}
-			{!error && noData && (
+			);
+		} else if (noData) {
+			statusIndicator = (
 				<Typography.Text className={styles.filterStatus}>
 					No results found
 				</Typography.Text>
-			)}
-		</>
-	);
+			);
+		}
+	}
+
+	const fetchingIndicator = isFetching ? (
+		<Loader className="animate-spin" />
+	) : null;

 	// --- COLLAPSED VIEW ---
 	if (!isExpanded) {
@@ -334,7 +419,8 @@ function Filters({
 						pill
 					)}
 					{highlightErrorsToggle}
-					{statusIndicators}
+					{statusIndicator}
+					{fetchingIndicator}
 				</div>
 			</TooltipProvider>
 		);
@@ -365,7 +451,10 @@ function Filters({
 					className={styles.searchContainer}
 					ref={containerRef}
 					onBlur={(e): void => {
-						if (!containerRef.current?.contains(e.relatedTarget as Node)) {
+						const relatedTarget = e.relatedTarget as Node | null;
+						const blurredIntoSelf = !!containerRef.current?.contains(relatedTarget);
+						const blurredIntoClear = !!clearBtnRef.current?.contains(relatedTarget);
+						if (!blurredIntoSelf && !blurredIntoClear) {
 							handleBlur();
 						}
 					}}
@@ -382,48 +471,24 @@ function Filters({
 						placeholder="Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')"
 					/>
 				</div>
-				{filteredSpanIds.length > 0 && (
-					<div className={styles.preNextToggle}>
-						<Typography.Text className={styles.preNextCount}>
-							{currentSearchedIndex + 1} / {filteredSpanIds.length}
-						</Typography.Text>
-						<Button
-							variant="ghost"
-							size="icon"
-							color="secondary"
-							disabled={currentSearchedIndex === 0}
-							onClick={(): void => {
-								handlePrevNext(currentSearchedIndex - 1);
-								setCurrentSearchedIndex((prev) => prev - 1);
-							}}
-						>
-							<ChevronUp size={14} />
-						</Button>
-						<Button
-							variant="ghost"
-							size="icon"
-							color="secondary"
-							disabled={currentSearchedIndex === filteredSpanIds.length - 1}
-							onClick={(): void => {
-								handlePrevNext(currentSearchedIndex + 1);
-								setCurrentSearchedIndex((prev) => prev + 1);
-							}}
-						>
-							<ChevronDown size={14} />
-						</Button>
-					</div>
-				)}
-				<Button
-					variant="ghost"
-					size="icon"
-					color="secondary"
-					className={styles.collapseBtn}
-					onClick={onCollapse}
-				>
-					<X size={14} />
-				</Button>
+				<div className={styles.resultNavSlot}>{resultNav}</div>
 				{highlightErrorsToggle}
-				{statusIndicators}
+				{statusIndicator}
+				{fetchingIndicator}
+				<TooltipRoot>
+					<TooltipTrigger asChild>
+						<Button
+							variant="ghost"
+							size="icon"
+							color="secondary"
+							className={styles.collapseBtn}
+							onClick={onCollapse}
+						>
+							<ChevronsRight size={14} />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent>Collapse filters</TooltipContent>
+				</TooltipRoot>
 			</div>
 		</TooltipProvider>
 	);
--- a/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx
+++ b/frontend/src/pages/TraceDetailsV3/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx
@@ -473,6 +473,7 @@ export const SpanDuration = memo(function SpanDuration({
 const columnDefHelper = createColumnHelper<SpanV3>();

 const ROW_HEIGHT = 28;
+const WATERFALL_BOTTOM_PADDING = 24;
 const DEFAULT_SIDEBAR_WIDTH = 450;
 const MIN_SIDEBAR_WIDTH = 240;
 const MAX_SIDEBAR_WIDTH = 900;
@@ -740,53 +741,69 @@ function Success(props: ISuccessProps): JSX.Element {
 		);
 	}, [spans, sidebarWidth]);

-	// Scroll to the interested span only when it isn't already on screen.
-	// Covers every entry point uniformly: deep-link, flamegraph click,
-	// filter prev/next, browser back/forward all scroll only if needed;
-	// waterfall row clicks and chevron expand/collapse don't yank the viewport
-	// because the affected row is by definition already visible.
+	// Scroll a span to viewport center if it isn't already visible. Shared by
+	// the two effects below — one keyed on interestedSpanId (chevron, boundary
+	// pagination, deep-link to unloaded), the other on selectedSpan (in-window
+	// URL navigation that doesn't mutate interestedSpanId).
+	const scrollSpanIntoView = useCallback(
+		(span: SpanV3, spansList: SpanV3[]): void => {
+			if (!virtualizerRef.current) {
+				return;
+			}
+			const idx = spansList.findIndex((s) => s.span_id === span.span_id);
+			if (idx === -1) {
+				return;
+			}
+			const scrollEl = scrollContainerRef.current;
+			const scrollTop = scrollEl?.scrollTop ?? 0;
+			const viewportHeight = scrollEl?.clientHeight ?? 0;
+			const viewportStartIdx = Math.floor(scrollTop / ROW_HEIGHT);
+			const viewportEndIdx =
+				Math.ceil((scrollTop + viewportHeight) / ROW_HEIGHT) - 1;
+			const isOnScreen =
+				viewportHeight > 0 && idx >= viewportStartIdx && idx <= viewportEndIdx;
+			if (isOnScreen) {
+				return;
+			}
+			setTimeout(() => {
+				virtualizerRef.current?.scrollToIndex(idx, {
+					align: 'center',
+					behavior: 'auto',
+				});
+				const sidebarScrollEl = scrollContainerRef.current?.querySelector(
+					'.resizable-box__content',
+				);
+				if (sidebarScrollEl) {
+					const targetScrollLeft = Math.max(0, span.level * CONNECTOR_WIDTH - 40);
+					(sidebarScrollEl as HTMLElement).scrollLeft = targetScrollLeft;
+				}
+			}, 100);
+		},
+		[],
+	);
+
 	useEffect(() => {
-		if (interestedSpanId.spanId !== '' && virtualizerRef.current) {
+		if (interestedSpanId.spanId !== '') {
 			const idx = spans.findIndex(
 				(span) => span.span_id === interestedSpanId.spanId,
 			);
 			if (idx !== -1) {
-				const visible = virtualizerRef.current.getVirtualItems();
-				const isOnScreen =
-					visible.length > 0 &&
-					idx >= visible[0].index &&
-					idx <= visible[visible.length - 1].index;
-
-				if (!isOnScreen) {
-					setTimeout(() => {
-						virtualizerRef.current?.scrollToIndex(idx, {
-							align: 'center',
-							behavior: 'auto',
-						});
-
-						// Auto-scroll sidebar horizontally to show the span name
-						const span = spans[idx];
-						const sidebarScrollEl = scrollContainerRef.current?.querySelector(
-							'.resizable-box__content',
-						);
-						if (sidebarScrollEl) {
-							const targetScrollLeft = Math.max(0, span.level * CONNECTOR_WIDTH - 40);
-							sidebarScrollEl.scrollLeft = targetScrollLeft;
-						}
-					}, 400);
-				}
-
+				scrollSpanIntoView(spans[idx], spans);
 				setSelectedSpan(spans[idx]);
 			}
 		} else {
-			setSelectedSpan((prev) => {
-				if (!prev) {
-					return spans[0];
-				}
-				return prev;
-			});
+			setSelectedSpan((prev) => prev ?? spans[0]);
 		}
-	}, [interestedSpanId, setSelectedSpan, spans]);
+	}, [interestedSpanId, setSelectedSpan, spans, scrollSpanIntoView]);
+
+	// Covers URL-driven navigation to an already-loaded span (flamegraph /
+	// filter / browser back) that the interestedSpanId-keyed effect doesn't see.
+	useEffect(() => {
+		if (selectedSpan) {
+			scrollSpanIntoView(selectedSpan, spans);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [selectedSpan, scrollSpanIntoView]);

 	const virtualItems = virtualizer.getVirtualItems();
 	const leftRows = leftTable.getRowModel().rows;
@@ -846,7 +863,7 @@ function Success(props: ISuccessProps): JSX.Element {
 				<div
 					className={styles.splitBody}
 					style={{
-						minHeight: virtualizer.getTotalSize(),
+						minHeight: virtualizer.getTotalSize() + WATERFALL_BOTTOM_PADDING,
 						height: '100%',
 					}}
 				>
--- a/frontend/src/pages/TraceDetailsV3/index.tsx
+++ b/frontend/src/pages/TraceDetailsV3/index.tsx
@@ -74,17 +74,21 @@ function TraceDetailsV3(): JSX.Element {
 		onClose: handleSpanDetailsClose,
 	});

+	const allSpansRef = useRef<SpanV3[]>([]);
+
+	// Refetch only when the URL target isn't already loaded. Keeps row clicks
+	// and other in-window URL navigation from triggering a backend window slide.
 	useEffect(() => {
 		const spanId = urlQuery.get('spanId') || '';
-		// Only update interestedSpanId when a new span is selected,
-		// not when it's cleared (panel close) — avoids unnecessary API refetch
 		if (!spanId) {
 			return;
 		}
-		setInterestedSpanId({
-			spanId,
-			isUncollapsed: true,
-		});
+		const idx = allSpansRef.current.findIndex((s) => s.span_id === spanId);
+		if (idx !== -1) {
+			setSelectedSpan(allSpansRef.current[idx]);
+			return;
+		}
+		setInterestedSpanId({ spanId, isUncollapsed: true });
 	}, [urlQuery]);

 	// Hardcoded for now — fetch aggregations for all 3 candidate color-by fields
@@ -145,6 +149,10 @@ function TraceDetailsV3(): JSX.Element {
 		};
 	}

+	useEffect(() => {
+		allSpansRef.current = allSpans;
+	}, [allSpans]);
+
 	// Frontend mode: expand all parents by default when full data arrives
 	useEffect(() => {
 		if (isFullDataLoaded && allSpans.length > 0) {
--- a/frontend/src/providers/App/tests/App.test.tsx
+++ b/frontend/src/providers/App/tests/App.test.tsx
@@ -2,19 +2,15 @@ import { ReactElement } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { renderHook, waitFor } from '@testing-library/react';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import type {
-	AuthtypesGettableTransactionDTO,
-	AuthtypesTransactionDTO,
-} from 'api/generated/services/sigNoz.schemas';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { SINGLE_FLIGHT_WAIT_TIME_MS } from 'hooks/useAuthZ/constants';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { USER_ROLES } from 'types/roles';
+import { AUTHZ_CHECK_URL, authzMockResponse } from 'tests/authz-test-utils';

 import { AppProvider, useAppContext } from '../App';

-const AUTHZ_CHECK_URL = 'http://localhost/api/v1/authz/check';
 const MY_USER_URL = 'http://localhost/api/v2/users/me';
 const MY_ORG_URL = 'http://localhost/api/v2/orgs/me';

@@ -22,26 +18,9 @@ jest.mock('constants/env', () => ({
 	ENVIRONMENT: { baseURL: 'http://localhost', wsURL: '' },
 }));

-/**
- * Since we are mocking the check permissions, this is needed
- */
 const waitForSinglePreflightToFinish = async (): Promise<void> =>
 	await new Promise((r) => setTimeout(r, SINGLE_FLIGHT_WAIT_TIME_MS));

-function authzMockResponse(
-	payload: AuthtypesTransactionDTO[],
-	authorizedByIndex: boolean[],
-): { data: AuthtypesGettableTransactionDTO[]; status: string } {
-	return {
-		data: payload.map((txn, i) => ({
-			relation: txn.relation,
-			object: txn.object,
-			authorized: authorizedByIndex[i] ?? false,
-		})),
-		status: 'success',
-	};
-}
-
 const queryClient = new QueryClient({
 	defaultOptions: {
 		queries: {
--- a/frontend/src/tests/authz-test-utils.ts
+++ b/frontend/src/tests/authz-test-utils.ts
@@ -0,0 +1,169 @@
+import type {
+	AuthtypesGettableTransactionDTO,
+	AuthtypesTransactionDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { ENVIRONMENT } from 'constants/env';
+import { gettableTransactionToPermission } from 'hooks/useAuthZ/utils';
+import type {
+	BrandedPermission,
+	UseAuthZOptions,
+	UseAuthZResult,
+} from 'hooks/useAuthZ/types';
+import { rest } from 'msw';
+import type { RestHandler } from 'msw';
+import {
+	LicenseEvent,
+	LicensePlatform,
+	type LicenseResModel,
+	LicenseState,
+	LicenseStatus,
+} from 'types/api/licensesV3/getActive';
+
+export const AUTHZ_CHECK_URL = `${ENVIRONMENT.baseURL || ''}/api/v1/authz/check`;
+
+export function authzMockResponse(
+	payload: AuthtypesTransactionDTO[],
+	authorizedByIndex: boolean[],
+): { data: AuthtypesGettableTransactionDTO[]; status: string } {
+	return {
+		data: payload.map((txn, i) => ({
+			relation: txn.relation,
+			object: txn.object,
+			authorized: authorizedByIndex[i] ?? false,
+		})),
+		status: 'success',
+	};
+}
+
+export function setupAuthzAdmin(): RestHandler {
+	return rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+		const payload = (await req.json()) as AuthtypesTransactionDTO[];
+		return res(
+			ctx.status(200),
+			ctx.json(
+				authzMockResponse(
+					payload,
+					payload.map(() => true),
+				),
+			),
+		);
+	});
+}
+
+/** Denies all permission checks. */
+export function setupAuthzDenyAll(): RestHandler {
+	return rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+		const payload = (await req.json()) as AuthtypesTransactionDTO[];
+		return res(
+			ctx.status(200),
+			ctx.json(
+				authzMockResponse(
+					payload,
+					payload.map(() => false),
+				),
+			),
+		);
+	});
+}
+
+/** Grants all permissions except the ones listed — matched precisely by relation + object. */
+export function setupAuthzDeny(
+	...permissions: BrandedPermission[]
+): RestHandler {
+	const denied = new Set<BrandedPermission>(permissions);
+	return rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+		const payload = (await req.json()) as AuthtypesTransactionDTO[];
+		return res(
+			ctx.status(200),
+			ctx.json(
+				authzMockResponse(
+					payload,
+					payload.map((txn) => !denied.has(gettableTransactionToPermission(txn))),
+				),
+			),
+		);
+	});
+}
+
+/** Denies all permissions except the ones listed — matched precisely by relation + object. */
+export function setupAuthzAllow(
+	...permissions: BrandedPermission[]
+): RestHandler {
+	const allowed = new Set<BrandedPermission>(permissions);
+	return rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+		const payload = (await req.json()) as AuthtypesTransactionDTO[];
+		return res(
+			ctx.status(200),
+			ctx.json(
+				authzMockResponse(
+					payload,
+					payload.map((txn) => allowed.has(gettableTransactionToPermission(txn))),
+				),
+			),
+		);
+	});
+}
+
+export function buildLicense(
+	overrides?: Partial<LicenseResModel>,
+): LicenseResModel {
+	return {
+		key: 'test-key',
+		status: LicenseStatus.VALID,
+		state: LicenseState.ACTIVATED,
+		platform: LicensePlatform.CLOUD,
+		event_queue: {
+			created_at: '0',
+			event: LicenseEvent.NO_EVENT,
+			scheduled_at: '0',
+			status: '',
+			updated_at: '0',
+		},
+		plan: {
+			created_at: '0',
+			description: '',
+			is_active: true,
+			name: '',
+			updated_at: '0',
+		},
+		plan_id: '0',
+		free_until: '0',
+		updated_at: '0',
+		valid_from: 0,
+		valid_until: 0,
+		created_at: '0',
+		...overrides,
+	};
+}
+
+export const invalidLicense = buildLicense({ status: LicenseStatus.INVALID });
+
+export function mockUseAuthZGrantAll(
+	permissions: BrandedPermission[],
+	_options?: UseAuthZOptions,
+): UseAuthZResult {
+	return {
+		isLoading: false,
+		isFetching: false,
+		error: null,
+		permissions: Object.fromEntries(
+			permissions.map((p) => [p, { isGranted: true }]),
+		) as UseAuthZResult['permissions'],
+		refetchPermissions: jest.fn(),
+	};
+}
+
+export function mockUseAuthZDenyAll(
+	permissions: BrandedPermission[],
+	_options?: UseAuthZOptions,
+): UseAuthZResult {
+	return {
+		isLoading: false,
+		isFetching: false,
+		error: null,
+		permissions: Object.fromEntries(
+			permissions.map((p) => [p, { isGranted: false }]),
+		) as UseAuthZResult['permissions'],
+		refetchPermissions: jest.fn(),
+	};
+}
--- a/frontend/src/utils/permission/index.ts
+++ b/frontend/src/utils/permission/index.ts
@@ -48,7 +48,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	HOME: ['ADMIN', 'EDITOR', 'VIEWER'],
 	ALERTS_NEW: ['ADMIN', 'EDITOR'],
 	ORG_SETTINGS: ['ADMIN'],
-	MY_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
+	MY_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
 	SERVICE_MAP: ['ADMIN', 'EDITOR', 'VIEWER'],
 	ALL_CHANNELS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	INGESTION_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
@@ -72,7 +72,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	NOT_FOUND: ['ADMIN', 'VIEWER', 'EDITOR', 'ANONYMOUS'],
 	PASSWORD_RESET: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SERVICE_METRICS: ['ADMIN', 'EDITOR', 'VIEWER'],
-	SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
+	SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
 	SIGN_UP: ['ADMIN', 'EDITOR', 'VIEWER'],
 	TRACES_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
 	TRACE: ['ADMIN', 'EDITOR', 'VIEWER'],
@@ -98,10 +98,10 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	GET_STARTED_AZURE_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'],
 	WORKSPACE_LOCKED: ['ADMIN', 'EDITOR', 'VIEWER'],
 	WORKSPACE_SUSPENDED: ['ADMIN', 'EDITOR', 'VIEWER'],
-	ROLES_SETTINGS: ['ADMIN'],
-	ROLE_DETAILS: ['ADMIN'],
+	ROLES_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
+	ROLE_DETAILS: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
 	MEMBERS_SETTINGS: ['ADMIN'],
-	SERVICE_ACCOUNTS_SETTINGS: ['ADMIN'],
+	SERVICE_ACCOUNTS_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
 	BILLING: ['ADMIN'],
 	SUPPORT: ['ADMIN', 'EDITOR', 'VIEWER', 'ANONYMOUS'],
 	SOMETHING_WENT_WRONG: ['ADMIN', 'EDITOR', 'VIEWER'],
--- a/pkg/cache/memorycache/provider.go
+++ b/pkg/cache/memorycache/provider.go
@@ -64,7 +64,8 @@ func New(ctx context.Context, settings factory.ProviderSettings, config cache.Co
 		o.ObserveInt64(telemetry.setsRejected, int64(metrics.SetsRejected()), metric.WithAttributes(attributes...))
 		o.ObserveInt64(telemetry.getsDropped, int64(metrics.GetsDropped()), metric.WithAttributes(attributes...))
 		o.ObserveInt64(telemetry.getsKept, int64(metrics.GetsKept()), metric.WithAttributes(attributes...))
-		o.ObserveInt64(telemetry.totalCost, int64(cc.MaxCost()), metric.WithAttributes(attributes...))
+		o.ObserveInt64(telemetry.costUsed, int64(metrics.CostAdded())-int64(metrics.CostEvicted()), metric.WithAttributes(attributes...))
+		o.ObserveInt64(telemetry.totalCost, cc.MaxCost(), metric.WithAttributes(attributes...))
 		return nil
 	},
 		telemetry.cacheRatio,
@@ -79,6 +80,7 @@ func New(ctx context.Context, settings factory.ProviderSettings, config cache.Co
 		telemetry.setsRejected,
 		telemetry.getsDropped,
 		telemetry.getsKept,
+		telemetry.costUsed,
 		telemetry.totalCost,
 	)
 	if err != nil {
@@ -112,11 +114,13 @@ func (provider *provider) Set(ctx context.Context, orgID valuer.UUID, cacheKey s
 	}

 	if cloneable, ok := data.(cachetypes.Cloneable); ok {
+		cost := max(cloneable.Cost(), 1)
+		// Clamp to a minimum of 1: ristretto treats cost 0 specially and we
+		// never want zero-size entries to bypass admission accounting.
 		span.SetAttributes(attribute.Bool("memory.cloneable", true))
-		span.SetAttributes(attribute.Int64("memory.cost", 1))
+		span.SetAttributes(attribute.Int64("memory.cost", cost))
 		toCache := cloneable.Clone()
-		// In case of contention we are choosing to evict the cloneable entries first hence cost is set to 1
-		if ok := provider.cc.SetWithTTL(strings.Join([]string{orgID.StringValue(), cacheKey}, "::"), toCache, 1, ttl); !ok {
+		if ok := provider.cc.SetWithTTL(strings.Join([]string{orgID.StringValue(), cacheKey}, "::"), toCache, cost, ttl); !ok {
 			return errors.New(errors.TypeInternal, errors.CodeInternal, "error writing to cache")
 		}

@@ -125,15 +129,15 @@ func (provider *provider) Set(ctx context.Context, orgID valuer.UUID, cacheKey s
 	}

 	toCache, err := provider.marshalBinary(ctx, data)
-	cost := int64(len(toCache))
 	if err != nil {
 		return err
 	}
+	cost := max(int64(len(toCache)), 1)

 	span.SetAttributes(attribute.Bool("memory.cloneable", false))
 	span.SetAttributes(attribute.Int64("memory.cost", cost))

-	if ok := provider.cc.SetWithTTL(strings.Join([]string{orgID.StringValue(), cacheKey}, "::"), toCache, 1, ttl); !ok {
+	if ok := provider.cc.SetWithTTL(strings.Join([]string{orgID.StringValue(), cacheKey}, "::"), toCache, cost, ttl); !ok {
 		return errors.New(errors.TypeInternal, errors.CodeInternal, "error writing to cache")
 	}

--- a/pkg/cache/memorycache/provider_test.go
+++ b/pkg/cache/memorycache/provider_test.go
@@ -31,6 +31,10 @@ func (cloneable *CloneableA) Clone() cachetypes.Cacheable {
 	}
 }

+func (cloneable *CloneableA) Cost() int64 {
+	return int64(len(cloneable.Key)) + 16
+}
+
 func (cloneable *CloneableA) MarshalBinary() ([]byte, error) {
 	return json.Marshal(cloneable)
 }
@@ -165,6 +169,45 @@ func TestSetGetWithDifferentTypes(t *testing.T) {
 	assert.Error(t, err)
 }

+// LargeCloneable reports a large byte cost so we can test ristretto eviction
+// without allocating the full payload in memory.
+type LargeCloneable struct {
+	Key      string
+	CostHint int64
+}
+
+func (c *LargeCloneable) Clone() cachetypes.Cacheable {
+	return &LargeCloneable{Key: c.Key, CostHint: c.CostHint}
+}
+
+func (c *LargeCloneable) Cost() int64 { return c.CostHint }
+
+func (c *LargeCloneable) MarshalBinary() ([]byte, error) { return json.Marshal(c) }
+
+func (c *LargeCloneable) UnmarshalBinary(data []byte) error { return json.Unmarshal(data, c) }
+
+func TestCloneableExceedingMaxCostIsRejected(t *testing.T) {
+	const maxCost int64 = 1 << 20  // 1 MiB
+	const oversize int64 = 2 << 20 // 2 MiB, larger than the entire cache
+
+	c, err := New(context.Background(), factorytest.NewSettings(), cache.Config{Provider: "memory", Memory: cache.Memory{
+		NumCounters: 10 * 1000,
+		MaxCost:     maxCost,
+	}})
+	require.NoError(t, err)
+
+	orgID := valuer.GenerateUUID()
+	const key = "oversize-key"
+	assert.NoError(t, c.Set(context.Background(), orgID, key,
+		&LargeCloneable{Key: key, CostHint: oversize}, time.Minute))
+
+	// Ristretto rejects any entry with cost > MaxCost (policy.go:100). Probe
+	// ristretto directly to confirm no admission, instead of relying on metrics.
+	cc := c.(*provider).cc
+	_, ok := cc.Get(strings.Join([]string{orgID.StringValue(), key}, "::"))
+	assert.False(t, ok, "entry with Cost() > MaxCost must be rejected")
+}
+
 func TestCloneableConcurrentSetGet(t *testing.T) {
 	cache, err := New(context.Background(), factorytest.NewSettings(), cache.Config{Provider: "memory", Memory: cache.Memory{
 		NumCounters: 10 * 1000,
--- a/pkg/cache/memorycache/telemetry.go
+++ b/pkg/cache/memorycache/telemetry.go
@@ -7,17 +7,18 @@ import (

 type telemetry struct {
 	cacheRatio   metric.Float64ObservableGauge
-	cacheHits    metric.Int64ObservableGauge
-	cacheMisses  metric.Int64ObservableGauge
-	costAdded    metric.Int64ObservableGauge
-	costEvicted  metric.Int64ObservableGauge
-	keysAdded    metric.Int64ObservableGauge
-	keysEvicted  metric.Int64ObservableGauge
-	keysUpdated  metric.Int64ObservableGauge
-	setsDropped  metric.Int64ObservableGauge
-	setsRejected metric.Int64ObservableGauge
-	getsDropped  metric.Int64ObservableGauge
-	getsKept     metric.Int64ObservableGauge
+	cacheHits    metric.Int64ObservableCounter
+	cacheMisses  metric.Int64ObservableCounter
+	costAdded    metric.Int64ObservableCounter
+	costEvicted  metric.Int64ObservableCounter
+	keysAdded    metric.Int64ObservableCounter
+	keysEvicted  metric.Int64ObservableCounter
+	keysUpdated  metric.Int64ObservableCounter
+	setsDropped  metric.Int64ObservableCounter
+	setsRejected metric.Int64ObservableCounter
+	getsDropped  metric.Int64ObservableCounter
+	getsKept     metric.Int64ObservableCounter
+	costUsed     metric.Int64ObservableGauge
 	totalCost    metric.Int64ObservableGauge
 }

@@ -28,62 +29,67 @@ func newMetrics(meter metric.Meter) (*telemetry, error) {
 		errs = errors.Join(errs, err)
 	}

-	cacheHits, err := meter.Int64ObservableGauge("signoz.cache.hits", metric.WithDescription("Hits is the number of Get calls where a value was found for the corresponding key."))
+	cacheHits, err := meter.Int64ObservableCounter("signoz.cache.hits", metric.WithDescription("Hits is the number of Get calls where a value was found for the corresponding key."))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}

-	cacheMisses, err := meter.Int64ObservableGauge("signoz.cache.misses", metric.WithDescription("Misses is the number of Get calls where a value was not found for the corresponding key"))
+	cacheMisses, err := meter.Int64ObservableCounter("signoz.cache.misses", metric.WithDescription("Misses is the number of Get calls where a value was not found for the corresponding key"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}

-	costAdded, err := meter.Int64ObservableGauge("signoz.cache.cost.added", metric.WithDescription("CostAdded is the sum of costs that have been added (successful Set calls)"))
+	costAdded, err := meter.Int64ObservableCounter("signoz.cache.cost.added", metric.WithDescription("CostAdded is the sum of costs that have been added (successful Set calls)"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}

-	costEvicted, err := meter.Int64ObservableGauge("signoz.cache.cost.evicted", metric.WithDescription("CostEvicted is the sum of all costs that have been evicted"))
+	costEvicted, err := meter.Int64ObservableCounter("signoz.cache.cost.evicted", metric.WithDescription("CostEvicted is the sum of all costs that have been evicted"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}

-	keysAdded, err := meter.Int64ObservableGauge("signoz.cache.keys.added", metric.WithDescription("KeysAdded is the total number of Set calls where a new key-value item was added"))
+	keysAdded, err := meter.Int64ObservableCounter("signoz.cache.keys.added", metric.WithDescription("KeysAdded is the total number of Set calls where a new key-value item was added"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}

-	keysEvicted, err := meter.Int64ObservableGauge("signoz.cache.keys.evicted", metric.WithDescription("KeysEvicted is the total number of keys evicted"))
+	keysEvicted, err := meter.Int64ObservableCounter("signoz.cache.keys.evicted", metric.WithDescription("KeysEvicted is the total number of keys evicted"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}

-	keysUpdated, err := meter.Int64ObservableGauge("signoz.cache.keys.updated", metric.WithDescription("KeysUpdated is the total number of Set calls where the value was updated"))
+	keysUpdated, err := meter.Int64ObservableCounter("signoz.cache.keys.updated", metric.WithDescription("KeysUpdated is the total number of Set calls where the value was updated"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}

-	setsDropped, err := meter.Int64ObservableGauge("signoz.cache.sets.dropped", metric.WithDescription("SetsDropped is the number of Set calls that don't make it into internal buffers (due to contention or some other reason)"))
+	setsDropped, err := meter.Int64ObservableCounter("signoz.cache.sets.dropped", metric.WithDescription("SetsDropped is the number of Set calls that don't make it into internal buffers (due to contention or some other reason)"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}

-	setsRejected, err := meter.Int64ObservableGauge("signoz.cache.sets.rejected", metric.WithDescription("SetsRejected is the number of Set calls rejected by the policy (TinyLFU)"))
+	setsRejected, err := meter.Int64ObservableCounter("signoz.cache.sets.rejected", metric.WithDescription("SetsRejected is the number of Set calls rejected by the policy (TinyLFU)"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}

-	getsDropped, err := meter.Int64ObservableGauge("signoz.cache.gets.dropped", metric.WithDescription("GetsDropped is the number of Get calls that don't make it into internal buffers (due to contention or some other reason)"))
+	getsDropped, err := meter.Int64ObservableCounter("signoz.cache.gets.dropped", metric.WithDescription("GetsDropped is the number of Get calls that don't make it into internal buffers (due to contention or some other reason)"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}

-	getsKept, err := meter.Int64ObservableGauge("signoz.cache.gets.kept", metric.WithDescription("GetsKept is the number of Get calls that make it into internal buffers"))
+	getsKept, err := meter.Int64ObservableCounter("signoz.cache.gets.kept", metric.WithDescription("GetsKept is the number of Get calls that make it into internal buffers"))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}

-	totalCost, err := meter.Int64ObservableGauge("signoz.cache.total.cost", metric.WithDescription("TotalCost is the available cost configured for the cache"))
+	costUsed, err := meter.Int64ObservableGauge("signoz.cache.cost.used", metric.WithDescription("CostUsed is the current retained cost in the cache (CostAdded - CostEvicted)."))
+	if err != nil {
+		errs = errors.Join(errs, err)
+	}
+
+	totalCost, err := meter.Int64ObservableGauge("signoz.cache.total.cost", metric.WithDescription("TotalCost is the configured MaxCost ceiling for the cache."))
 	if err != nil {
 		errs = errors.Join(errs, err)
 	}
@@ -105,6 +111,7 @@ func newMetrics(meter metric.Meter) (*telemetry, error) {
 		setsRejected: setsRejected,
 		getsDropped:  getsDropped,
 		getsKept:     getsKept,
+		costUsed:     costUsed,
 		totalCost:    totalCost,
 	}, nil
 }
--- a/pkg/cache/rediscache/provider_test.go
+++ b/pkg/cache/rediscache/provider_test.go
@@ -29,6 +29,10 @@ func (cacheable *CacheableA) Clone() cachetypes.Cacheable {
 	}
 }

+func (cacheable *CacheableA) Cost() int64 {
+	return int64(len(cacheable.Key)) + 16
+}
+
 func (cacheable *CacheableA) MarshalBinary() ([]byte, error) {
 	return json.Marshal(cacheable)
 }
--- a/pkg/querier/postprocess.go
+++ b/pkg/querier/postprocess.go
@@ -335,10 +335,8 @@ func (q *querier) applyFormulas(ctx context.Context, results map[string]*qbtypes
 			}
 		case qbtypes.RequestTypeScalar:
 			result := q.processScalarFormula(ctx, results, formula, req)
-			if result != nil {
-				result = q.applySeriesLimit(result, formula.Limit, formula.Order)
-				results[name] = result
-			}
+			// For scalar results, apply limit by processScalarFormula itself since it needs to be applied before converting back to scalar format
+			results[name] = result
 		}
 	}

@@ -526,6 +524,9 @@ func (q *querier) processScalarFormula(
 		return nil
 	}

+	// Apply ordering (and limit) before converting to scalar format.
+	formulaSeries = qbtypes.ApplySeriesLimit(formulaSeries, formula.Order, formula.Limit)
+
 	// Convert back to scalar format
 	scalarResult := &qbtypes.ScalarData{
 		QueryName: formula.Name,
--- a/pkg/querier/postprocess_test.go
+++ b/pkg/querier/postprocess_test.go
@@ -1,15 +1,155 @@
 package querier

 import (
+	"context"
 	"testing"

-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-
+	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
 )

+// scalarInputResult builds a ScalarData result with one group column ("service")
+// and one aggregation column ("__result"), holding the provided (service, value) rows.
+func scalarInputResult(queryName string, rows []struct {
+	service string
+	value   float64
+}) *qbtypes.Result {
+	serviceKey := telemetrytypes.TelemetryFieldKey{
+		Name:          "service",
+		FieldDataType: telemetrytypes.FieldDataTypeString,
+	}
+	resultKey := telemetrytypes.TelemetryFieldKey{
+		Name:          "__result",
+		FieldDataType: telemetrytypes.FieldDataTypeFloat64,
+	}
+
+	data := make([][]any, 0, len(rows))
+	for _, r := range rows {
+		data = append(data, []any{r.service, r.value})
+	}
+
+	return &qbtypes.Result{
+		Value: &qbtypes.ScalarData{
+			QueryName: queryName,
+			Columns: []*qbtypes.ColumnDescriptor{
+				{
+					TelemetryFieldKey: serviceKey,
+					QueryName:         queryName,
+					Type:              qbtypes.ColumnTypeGroup,
+				},
+				{
+					TelemetryFieldKey: resultKey,
+					QueryName:         queryName,
+					AggregationIndex:  0,
+					Type:              qbtypes.ColumnTypeAggregation,
+				},
+			},
+			Data: data,
+		},
+	}
+}
+
+func TestProcessScalarFormula_AppliesOrderAndLimit(t *testing.T) {
+	q := &querier{
+		logger: instrumentationtest.New().Logger(),
+	}
+
+	// Mimic what a dashboard emits: orderBy keyed by the formula name ("F1"),
+	// which applyFormulas rewrites to __result before sorting.
+	orderByFormula := func(name string, dir qbtypes.OrderDirection) []qbtypes.OrderBy {
+		return []qbtypes.OrderBy{
+			{
+				Key: qbtypes.OrderByKey{
+					TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{
+						Name: name,
+					},
+				},
+				Direction: dir,
+			},
+		}
+	}
+
+	// A+B per service: a=101, b=11, c=2
+	makeInputs := func() map[string]*qbtypes.Result {
+		return map[string]*qbtypes.Result{
+			"A": scalarInputResult("A", []struct {
+				service string
+				value   float64
+			}{
+				{"a", 100},
+				{"b", 10},
+				{"c", 1},
+			}),
+			"B": scalarInputResult("B", []struct {
+				service string
+				value   float64
+			}{
+				{"a", 1},
+				{"b", 0},
+				{"c", 1},
+			}),
+		}
+	}
+
+	makeReq := func(formula qbtypes.QueryBuilderFormula) *qbtypes.QueryRangeRequest {
+		return &qbtypes.QueryRangeRequest{
+			RequestType: qbtypes.RequestTypeScalar,
+			CompositeQuery: qbtypes.CompositeQuery{
+				Queries: []qbtypes.QueryEnvelope{
+					{Type: qbtypes.QueryTypeBuilder, Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{Name: "A"}},
+					{Type: qbtypes.QueryTypeBuilder, Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{Name: "B"}},
+					{Type: qbtypes.QueryTypeFormula, Spec: formula},
+				},
+			},
+		}
+	}
+
+	t.Run("F1 desc with limit truncates and sorts", func(t *testing.T) {
+		formula := qbtypes.QueryBuilderFormula{
+			Name:       "F1",
+			Expression: "A + B",
+			Order:      orderByFormula("F1", qbtypes.OrderDirectionDesc),
+			Limit:      2,
+		}
+
+		out := q.applyFormulas(context.Background(), makeInputs(), makeReq(formula))
+		got, ok := out["F1"]
+		require.True(t, ok, "formula result missing")
+		scalar, ok := got.Value.(*qbtypes.ScalarData)
+		require.True(t, ok, "expected *ScalarData, got %T", got.Value)
+
+		// Limit=2 + F1 desc: the two largest __result rows in descending order.
+		require.Len(t, scalar.Data, 2, "limit=2 was ignored before the fix")
+		require.Equal(t, "a", scalar.Data[0][0])
+		require.InDelta(t, 101.0, scalar.Data[0][1].(float64), 1e-9)
+		require.Equal(t, "b", scalar.Data[1][0])
+		require.InDelta(t, 10.0, scalar.Data[1][1].(float64), 1e-9)
+	})
+
+	t.Run("F1 desc without limit sorts all rows", func(t *testing.T) {
+		formula := qbtypes.QueryBuilderFormula{
+			Name:       "F1",
+			Expression: "A / B",
+			Order:      orderByFormula("F1", qbtypes.OrderDirectionAsc),
+		}
+
+		out := q.applyFormulas(context.Background(), makeInputs(), makeReq(formula))
+		got, ok := out["F1"]
+		require.True(t, ok)
+		scalar, ok := got.Value.(*qbtypes.ScalarData)
+		require.True(t, ok)
+
+		require.Len(t, scalar.Data, 2)
+		require.Equal(t, "c", scalar.Data[0][0])
+		require.InDelta(t, 1.0, scalar.Data[0][1].(float64), 1e-9)
+		require.Equal(t, "a", scalar.Data[1][0])
+		require.InDelta(t, 100.0, scalar.Data[1][1].(float64), 1e-9)
+	})
+}
+
 // Multiple series with different number of labels, shouldn't panic and should align labels correctly.
 func TestConvertTimeSeriesDataToScalar_RaggedLabels(t *testing.T) {
 	label := func(name string, value any) *qbtypes.Label {
--- a/pkg/query-service/app/parser.go
+++ b/pkg/query-service/app/parser.go
@@ -769,6 +769,13 @@ func ParseQueryRangeParams(r *http.Request) (*v3.QueryRangeParamsV3, *model.ApiE
 		return nil, &model.ApiError{Typ: model.ErrorBadData, Err: err}
 	}

+	// Clamp the top-level Step for PromQL
+	if queryRangeParams.CompositeQuery.QueryType == v3.QueryTypePromQL {
+		if minStep := common.MinAllowedStepInterval(queryRangeParams.Start, queryRangeParams.End); queryRangeParams.Step < minStep {
+			queryRangeParams.Step = minStep
+		}
+	}
+
 	// prepare the variables for the corresponding query type
 	formattedVars := make(map[string]interface{})
 	for name, value := range queryRangeParams.Variables {
--- a/pkg/query-service/model/cacheable.go
+++ b/pkg/query-service/model/cacheable.go
@@ -41,6 +41,11 @@ func (c *GetWaterfallSpansForTraceWithMetadataCache) Clone() cachetypes.Cacheabl
 	}
 }

+func (c *GetWaterfallSpansForTraceWithMetadataCache) Cost() int64 {
+	const perSpanBytes = 256
+	return int64(c.TotalSpans) * perSpanBytes
+}
+
 func (c *GetWaterfallSpansForTraceWithMetadataCache) MarshalBinary() (data []byte, err error) {
 	return json.Marshal(c)
 }
@@ -66,6 +71,16 @@ func (c *GetFlamegraphSpansForTraceCache) Clone() cachetypes.Cacheable {
 	}
 }

+func (c *GetFlamegraphSpansForTraceCache) Cost() int64 {
+	const perSpanBytes = 128
+	var spans int64
+	for _, row := range c.SelectedSpans {
+		spans += int64(len(row))
+	}
+	spans += int64(len(c.TraceRoots))
+	return spans * perSpanBytes
+}
+
 func (c *GetFlamegraphSpansForTraceCache) MarshalBinary() (data []byte, err error) {
 	return json.Marshal(c)
 }
--- a/pkg/types/cachetypes/cacheable.go
+++ b/pkg/types/cachetypes/cacheable.go
@@ -18,6 +18,10 @@ type Cloneable interface {
 	// Creates a deep copy of the Cacheable. This method is useful for memory caches to avoid the need for serialization/deserialization. It also prevents
 	// race conditions in the memory cache.
 	Clone() Cacheable
+	// Cost returns the weight of this entry for cost-based cache accounting
+	// and eviction. Typically derived from the approximate retained byte size,
+	// but the value represents cache cost, not literal bytes.
+	Cost() int64
 }

 func NewSha1CacheKey(val string) string {
--- a/pkg/types/querybuildertypes/querybuildertypesv5/cached.go
+++ b/pkg/types/querybuildertypes/querybuildertypesv5/cached.go
@@ -59,3 +59,21 @@ func (c *CachedData) Clone() cachetypes.Cacheable {

 	return clonedCachedData
 }
+
+// Cost approximates the retained bytes of this CachedData for use as the
+// ristretto cache cost. The dominant contributor is the serialized bucket
+// values (json.RawMessage); other fields are fixed-size or small strings.
+func (c *CachedData) Cost() int64 {
+	var size int64
+	for _, b := range c.Buckets {
+		if b == nil {
+			continue
+		}
+		// Value is the bulk of the payload
+		size += int64(len(b.Value))
+	}
+	for _, w := range c.Warnings {
+		size += int64(len(w))
+	}
+	return size
+}
--- a/tests/fixtures/querier.py
+++ b/tests/fixtures/querier.py
@@ -200,6 +200,8 @@ def build_formula_query(
    *,
    functions: list[dict] | None = None,
    disabled: bool = False,
+    order: list[dict] | None = None,
+    limit: int | None = None,
 ) -> dict:
    spec: dict[str, Any] = {
        "name": name,
@@ -208,6 +210,10 @@ def build_formula_query(
    }
    if functions:
        spec["functions"] = functions
+    if order:
+        spec["order"] = order
+    if limit is not None:
+        spec["limit"] = limit
    return {"type": "builder_formula", "spec": spec}


--- a/tests/integration/tests/querier/01_logs.py
+++ b/tests/integration/tests/querier/01_logs.py
@@ -11,6 +11,11 @@ from fixtures.logs import Logs
 from fixtures.querier import (
    assert_identical_query_response,
    assert_minutely_bucket_values,
+    build_formula_query,
+    build_group_by_field,
+    build_logs_aggregation,
+    build_order_by,
+    build_scalar_query,
    find_named_result,
    index_series_by_label,
    make_query_request,
@@ -2111,3 +2116,180 @@ def test_logs_fill_zero_formula_with_group_by(
            expected_by_ts=expectations[service_name],
            context=f"logs/fillZero/F1/{service_name}",
        )
+
+
+def test_logs_formula_orderby_and_limit(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_logs: Callable[[list[Logs]], None],
+) -> None:
+    """
+    Test that formula results are correctly ordered and limited when
+    order and limit are applied on the formula.
+    """
+    now = datetime.now(tz=UTC).replace(second=0, microsecond=0)
+    logs: list[Logs] = []
+    # For service-i (i in 0..9): insert (10 - i) ERROR logs and 2 INFO logs.
+    # A counts ERROR, B counts INFO, so A/B = (10 - i) / 2.
+    # service-0 ratio = 5.0 (highest), service-9 ratio = 0.5 (lowest).
+    for i in range(10):
+        for j in range(10 - i):
+            logs.append(
+                Logs(
+                    timestamp=now - timedelta(minutes=j + 1),
+                    resources={"service.name": f"service-{i}"},
+                    attributes={"code.file": "test.py"},
+                    body=f"Error log {i}-{j}",
+                    severity_text="ERROR",
+                )
+            )
+        for k in range(2):
+            logs.append(
+                Logs(
+                    timestamp=now - timedelta(minutes=k + 1),
+                    resources={"service.name": f"service-{i}"},
+                    attributes={"code.file": "test.py"},
+                    body=f"Info log {i}-{k}",
+                    severity_text="INFO",
+                )
+            )
+    # Extra INFO-only services that appear in B but not in A. The formula
+    for name in ("service-info-only-1", "service-info-only-2"):
+        for k in range(2):
+            logs.append(
+                Logs(
+                    timestamp=now - timedelta(minutes=k + 1),
+                    resources={"service.name": name},
+                    attributes={"code.file": "test.py"},
+                    body=f"Info log {name}-{k}",
+                    severity_text="INFO",
+                )
+            )
+
+    # Logs look like this (columns = minutes before `now`; query range is
+    # (now - 15m, now], so the `now` column is the exclusive upper bound and
+    # no log lands there). E = ERROR, I = INFO, X = both at that minute.
+    #
+    #              t-10 t-9 t-8 t-7 t-6 t-5 t-4 t-3 t-2 t-1 |now |  A  B  A/B
+    # service-0:    E   E   E   E   E   E   E   E   X   X  |    | 10  2  5.0
+    # service-1:    .   E   E   E   E   E   E   E   X   X  |    |  9  2  4.5
+    # service-2:    .   .   E   E   E   E   E   E   X   X  |    |  8  2  4.0
+    # service-3:    .   .   .   E   E   E   E   E   X   X  |    |  7  2  3.5
+    # service-4:    .   .   .   .   E   E   E   E   X   X  |    |  6  2  3.0
+    # service-5:    .   .   .   .   .   E   E   E   X   X  |    |  5  2  2.5
+    # service-6:    .   .   .   .   .   .   E   E   X   X  |    |  4  2  2.0
+    # service-7:    .   .   .   .   .   .   .   E   X   X  |    |  3  2  1.5
+    # service-8:    .   .   .   .   .   .   .   .   X   X  |    |  2  2  1.0
+    # service-9:    .   .   .   .   .   .   .   .   I   X  |    |  1  2  0.5
+    # info-only-1:  .   .   .   .   .   .   .   .   I   I  |    |  0* 2  0.0
+    # info-only-2:  .   .   .   .   .   .   .   .   I   I  |    |  0* 2  0.0
+    #
+    # * A is missing for the info-only services; because A is count(), the
+    #   formula evaluator defaults missing A to 0, yielding A/B = 0.
+    insert_logs(logs)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    result = make_query_request(
+        signoz,
+        token,
+        start_ms=int((now - timedelta(minutes=15)).timestamp() * 1000),
+        end_ms=int(now.timestamp() * 1000),
+        request_type="scalar",
+        queries=[
+            build_scalar_query(
+                name="A",
+                signal="logs",
+                aggregations=[build_logs_aggregation("count()")],
+                group_by=[build_group_by_field("service.name")],
+                filter_expression="severity_text = 'ERROR'",
+                disabled=True,
+            ),
+            build_scalar_query(
+                name="B",
+                signal="logs",
+                aggregations=[build_logs_aggregation("count()")],
+                group_by=[build_group_by_field("service.name")],
+                filter_expression="severity_text = 'INFO'",
+                disabled=True,
+            ),
+            build_formula_query(
+                "F1",
+                "A / B",
+                order=[build_order_by("__result", "desc")],
+                limit=3,
+            ),
+            build_formula_query(
+                "F2",
+                "A / B",
+                order=[build_order_by("__result", "desc")],
+            ),
+            build_formula_query(
+                "F3",
+                "A / B",
+                order=[build_order_by("__result", "asc")],
+                limit=3,
+            ),
+            build_formula_query(
+                "F4",
+                "A / B",
+                order=[build_order_by("__result", "asc")],
+            ),
+        ],
+    )
+    assert result.status_code == HTTPStatus.OK
+    assert result.json()["status"] == "success"
+
+    results = result.json()["data"]["data"]["results"]
+
+    def extract_services_and_values(query_name: str) -> tuple[list, list]:
+        res = find_named_result(results, query_name)
+        assert res is not None, f"Expected formula result named {query_name}"
+        cols = res["columns"]
+        s_col = next(i for i, c in enumerate(cols) if c["name"] == "service.name")
+        v_col = next(i for i, c in enumerate(cols) if c["name"] == "__result")
+        rows = res["data"]
+        return [row[s_col] for row in rows], [row[v_col] for row in rows]
+
+    # Because A is count(), canDefaultZero["A"] is true; the formula evaluator
+    # defaults A to 0 for services that exist only in B. So the two INFO-only
+    # services appear in the formula result with value 0.0 (extreme bottom in
+    # desc order, extreme top in asc order). Their relative ordering is not
+    # deterministic across separate formula evaluations (tied values).
+    info_only_services = {"service-info-only-1", "service-info-only-2"}
+
+    # F2: desc, no limit -> 12 rows in descending order by value.
+    f2_services, f2_values = extract_services_and_values("F2")
+    assert len(f2_services) == 12, f"F2: expected 12 rows with no limit, got {len(f2_services)}"
+    assert f2_values == [5.0, 4.5, 4.0, 3.5, 3.0, 2.5, 2.0, 1.5, 1.0, 0.5, 0.0, 0.0], f2_values
+    # Top 10 have distinct positive values -> deterministic service ordering.
+    assert f2_services[:10] == [f"service-{i}" for i in range(10)], f2_services[:10]
+    # Tail 2 are the INFO-only services tied at 0.0 (order between them not guaranteed).
+    assert set(f2_services[10:]) == info_only_services, f2_services[10:]
+
+    # F1: desc + limit 3 -> must be exactly the first 3 rows of F2.
+    # Top 3 are not in the tie region, so prefix equality is safe.
+    f1_services, f1_values = extract_services_and_values("F1")
+    assert len(f1_services) == 3, f"F1: expected 3 rows after limit, got {len(f1_services)}"
+    assert f1_services == f2_services[:3], f"F1 services {f1_services} are not the prefix of F2 services {f2_services}"
+    assert f1_values == f2_values[:3], f"F1 values {f1_values} are not the prefix of F2 values {f2_values}"
+
+    # F4: asc, no limit -> 12 rows in ascending order by value.
+    f4_services, f4_values = extract_services_and_values("F4")
+    assert len(f4_services) == 12, f"F4: expected 12 rows with no limit, got {len(f4_services)}"
+    assert f4_values == sorted(f4_values), f"F4 not ascending: {f4_values}"
+    # First 2 are the INFO-only services tied at 0.0 (order between them not guaranteed).
+    assert set(f4_services[:2]) == info_only_services, f4_services[:2]
+    assert f4_values[:2] == [0.0, 0.0], f4_values[:2]
+    # Tail 10 are service-9 down to service-0 by value.
+    assert f4_services[2:] == [f"service-{i}" for i in reversed(range(10))], f4_services[2:]
+    assert f4_values[2:] == [(10 - i) / 2 for i in reversed(range(10))], f4_values[2:]
+
+    # F3: asc + limit 3 -> values must match F4[:3] exactly; service set must
+    # match too. Direct prefix equality on services would be flaky because the
+    # two tied INFO-only entries can swap order between formula evaluations.
+    f3_services, f3_values = extract_services_and_values("F3")
+    assert len(f3_services) == 3, f"F3: expected 3 rows after limit, got {len(f3_services)}"
+    assert f3_values == f4_values[:3], f"F3 values {f3_values} do not match F4[:3] values {f4_values[:3]}"
+    assert set(f3_services) == set(f4_services[:3]), f"F3 services {f3_services} do not match F4[:3] services {f4_services[:3]}"
				`@@ -1 +0,0 @@`
				`export const IS_ROLE_DETAILS_AND_CRUD_ENABLED = false;`