chore: antd button -> signozui button migration

Orval v8's pre-generation validator (@scalar/openapi-parser) treats every
`$ref` key as a JSON Reference. Our spec embeds Perses' `common.JSONRef`
struct, which has a property literally named `$ref`, so validation aborts
with `INVALID_REFERENCE`. Set `input.unsafeDisableValidation: true` to
bypass — codegen itself handles the spec correctly, and the spec is
backend-generated and CI-gated.

Closes SigNoz/engineering-pod#4963

frontend/orval.config.ts

@@ -10,6 +10,13 @@ export default defineConfig({
 	signoz: {
 		input: {
 			target: '../docs/api/openapi.yml',
+			// Perses' `common.JSONRef` (used by `DashboardGridItem.content`) has a
+			// field tagged `json:"$ref"`, so our spec contains a property literally
+			// named `$ref`.
+			// Orval v8's validator (`@scalar/openapi-parser`) treats every `$ref` key
+			// as a JSON Reference and aborts with `INVALID_REFERENCE` when the value isn't a URI string.
+			// Safe to disable: yes, the spec is generated by `cmd/openapi.go` and gated by backend CI, not hand-edited.
+			unsafeDisableValidation: true,
 		},
 		output: {
 			target: './src/api/generated/services',

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,

frontend/src/api/generated/services/alerts/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/authdomains/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/authz/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation } from 'react-query';
 import type {

frontend/src/api/generated/services/channels/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/cloudintegration/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/dashboard/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/downtimeschedules/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/features/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/fields/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/gateway/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/global/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/health/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/inframonitoring/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation } from 'react-query';
 import type {

frontend/src/api/generated/services/llmpricingrules/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/logs/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/metrics/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/orgs/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/preferences/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/querier/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation } from 'react-query';
 import type {

frontend/src/api/generated/services/role/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/routepolicies/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/rules/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/serviceaccount/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/sessions/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 export interface AlertmanagertypesChannelDTO {
 	/**

frontend/src/api/generated/services/spanmapper/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/tracedetail/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation } from 'react-query';
 import type {

frontend/src/api/generated/services/users/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

frontend/src/api/generated/services/zeus/index.ts

@@ -3,7 +3,6 @@
  * * The file has been auto-generated using Orval for SigNoz
  * * regenerate with 'pnpm generate:api'
  * SigNoz
- * OpenAPI spec version: 0.0.1
  */
 import { useMutation, useQuery } from 'react-query';
 import type {

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;
+}

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,
+		);
+	});
+});

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;

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -5,7 +5,6 @@ import { useSelector } from 'react-redux';
 import { Loader, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
-	Button,
 	Flex,
 	Input,
 	InputRef,
@@ -17,6 +16,7 @@ import {
 	Tooltip,
 } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Button } from '@signozhq/ui/button';
 import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import {
@@ -105,9 +105,8 @@ const getColumnSearchProps = (
 			/>
 			<Space>
 				<Button
-					type="primary"
-					size="small"
 					onClick={(): void => handleSearch(selectedKeys as string[], confirm)}
+					size="sm"
 				>
 					<Flex align="center" gap={4}>
 						<Search size="md" />
@@ -116,17 +115,19 @@ const getColumnSearchProps = (
 				</Button>
 				<Button
 					onClick={(): void => clearFilters && handleReset(clearFilters, confirm)}
-					size="small"
 					style={{ width: 90 }}
+					size="sm"
+					variant="outlined"
+					color="secondary"
 				>
 					Reset
 				</Button>
 				<Button
-					type="link"
-					size="small"
 					onClick={(): void => {
 						close();
 					}}
+					size="sm"
+					variant="link"
 				>
 					close
 				</Button>

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
 import { Check, ChevronsDown, ScrollText, X } from '@signozhq/icons';
-import { Button, Flex, Modal } from 'antd';
+import { Flex, Modal } from 'antd';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
 import cx from 'classnames';
 import { USER_PREFERENCES } from 'constants/userPreferences';
@@ -14,6 +14,7 @@ import { UserPreference } from 'types/api/preferences/preference';
 import ChangelogRenderer from './components/ChangelogRenderer';
 
 import './ChangelogModal.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 interface Props {
 	changelog: ChangelogSchema;
@@ -115,13 +116,13 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 				>
 					{!isCloudUser && (
 						<div className="changelog-modal-footer-ctas">
-							<Button type="default" onClick={onClose}>
+							<Button onClick={onClose} variant="outlined" color="secondary">
 								<Flex align="center" gap="4px">
 									<X size="md" />
 									Skip for now
 								</Flex>
 							</Button>
-							<Button type="primary" onClick={onClickUpdateWorkspace}>
+							<Button onClick={onClickUpdateWorkspace}>
 								<Flex align="center" gap="4px">
 									<Check size="md" />
 									Update my workspace

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal } from 'antd';
+import { Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';
@@ -72,6 +73,8 @@ export default function ChatSupportGateway(): JSX.Element {
 
 						setIsAddCreditCardModalOpen(true);
 					}}
+					variant="outlined"
+					color="secondary"
 				>
 					<MessageSquareText size={24} />
 				</Button>
@@ -90,19 +93,19 @@ export default function ChatSupportGateway(): JSX.Element {
 						key="cancel"
 						onClick={(): void => setIsAddCreditCardModalOpen(false)}
 						className="cancel-btn"
-						icon={<X size={16} />}
+						variant="outlined"
+						color="secondary"
+						prefix={<X size={16} />}
 					>
 						Cancel
 					</Button>,
 					<Button
 						key="submit"
-						type="primary"
-						icon={<CreditCard size={16} />}
-						size="middle"
 						loading={isLoadingBilling}
 						disabled={isLoadingBilling}
 						onClick={handleAddCreditCard}
 						className="add-credit-card-btn"
+						prefix={<CreditCard size={16} />}
 					>
 						Add Credit Card
 					</Button>,

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>
 	);

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();
 	});
 });

frontend/src/components/CustomTimePicker/CalendarContainer.tsx

@@ -1,5 +1,5 @@
 import { Calendar } from '@signozhq/ui/calendar';
-import { Button } from 'antd';
+import { Button } from '@signozhq/ui/button';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { Calendar as CalendarIcon, Check, X } from '@signozhq/icons';
@@ -78,18 +78,20 @@ function CalendarContainer({
 
 				<div className="calendar-actions">
 					<Button
-						type="primary"
-						className="periscope-btn secondary cancel-btn"
+						className="cancel-btn"
 						onClick={onCancel}
-						icon={<X size={12} />}
+						prefix={<X size={12} />}
+						variant="outlined"
+						color="secondary"
 					>
 						Cancel
 					</Button>
 					<Button
-						type="primary"
-						className="periscope-btn primary apply-btn"
+						className="apply-btn"
 						onClick={onApply}
-						icon={<Check size={12} />}
+						prefix={<Check size={12} />}
+						variant="solid"
+						color="primary"
 					>
 						Apply
 					</Button>

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -108,7 +108,7 @@
 }
 
 .info-text:hover {
-	&.ant-btn-text {
+	& {
 		background-color: unset !important;
 	}
 }

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -32,6 +31,7 @@ import TimezonePicker from './TimezonePicker';
 import { Timezone } from './timezoneUtils';
 
 import './CustomTimePicker.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 const TO_MILLISECONDS_FACTOR = 1000_000;
 
@@ -177,13 +177,13 @@ function CustomTimePickerPopoverContent({
 			<div className="relative-date-time-section">
 				{options.map((option) => (
 					<Button
-						type="text"
 						className="time-btns"
 						key={option.label + option.value}
 						onClick={(): void => {
 							handleExitLiveLogs();
 							onSelectHandler(option.label, option.value);
 						}}
+						variant="ghost"
 					>
 						{option.label}
 					</Button>
@@ -249,15 +249,14 @@ function CustomTimePickerPopoverContent({
 					{isLogsExplorerPage && isLogsListView && (
 						<Button
 							className={cx('data-time-live', isLiveLogsEnabled ? 'active' : '')}
-							type="text"
 							onClick={handleGoLive}
+							variant="ghost"
 						>
 							Live
 						</Button>
 					)}
 					{options.map((option) => (
 						<Button
-							type="text"
 							key={option.label + option.value}
 							onClick={(e: React.MouseEvent<HTMLButtonElement>): void => {
 								e.stopPropagation();
@@ -271,6 +270,7 @@ function CustomTimePickerPopoverContent({
 									? option.value === 'custom' && !isLiveLogsEnabled && 'active'
 									: selectedTime === option.value && !isLiveLogsEnabled && 'active',
 							)}
+							variant="ghost"
 						>
 							<span className="time-label">{option.label}</span>
 
@@ -370,11 +370,12 @@ function CustomTimePickerPopoverContent({
 
 					<div className="timezone-container__right">
 						<Button
-							type="text"
-							size="small"
-							className="periscope-btn text timezone-change-button"
+							className="timezone-change-button"
 							onClick={handleTimezoneHintClick}
-							icon={<PenLine size={10} />}
+							size="sm"
+							variant="ghost"
+							prefix={<PenLine size={10} />}
+							color="none"
 						>
 							Change Timezone
 						</Button>

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Radio, Tooltip } from 'antd';
+import { Popover, Radio, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Button } from '@signozhq/ui/button';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
 import { Download, LoaderCircle } from '@signozhq/icons';
@@ -104,12 +105,11 @@ export default function DownloadOptionsMenu({
 				)}
 
 				<Button
-					type="primary"
-					icon={<Download size={16} />}
 					onClick={handleExport}
 					className="export-button"
 					disabled={isDownloading}
 					loading={isDownloading}
+					prefix={<Download size={16} />}
 				>
 					Export
 				</Button>
@@ -137,16 +137,18 @@ export default function DownloadOptionsMenu({
 		>
 			<Tooltip title="Download" placement="top">
 				<Button
-					className="periscope-btn ghost"
-					icon={
+					data-testid={`periscope-btn-download-${dataSource}`}
+					disabled={isDownloading}
+					variant="outlined"
+					color="secondary"
+					size="icon"
+					prefix={
 						isDownloading ? (
 							<LoaderCircle size={14} className="animate-spin" />
 						) : (
 							<Download size={14} />
 						)
 					}
-					data-testid={`periscope-btn-download-${dataSource}`}
-					disabled={isDownloading}
 				/>
 			</Tooltip>
 		</Popover>

frontend/src/components/DropDown/DropDown.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { Ellipsis } from '@signozhq/icons';
-import { Button, Dropdown, MenuProps } from 'antd';
+import { Dropdown, MenuProps } from 'antd';
 
 import './DropDown.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 function DropDown({
 	element,
@@ -31,12 +32,12 @@ function DropDown({
 			open={isDdOpen}
 		>
 			<Button
-				type="link"
 				className={`dropdown-button`}
 				onClick={(e): void => {
 					e.preventDefault();
 					setDdOpen(true);
 				}}
+				variant="link"
 			>
 				<Ellipsis className="dropdown-icon" size={16} />
 			</Button>

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Modal, Tag } from 'antd';
+import { Modal, Tag } from 'antd';
 import { CircleAlert, X } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { useAppContext } from 'providers/App/App';
@@ -9,6 +9,7 @@ import APIError from 'types/api/error';
 import ErrorContent from './components/ErrorContent';
 
 import './ErrorModal.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 type Props = {
 	error: APIError;
@@ -73,10 +74,11 @@ function ErrorModal({
 							<div className="error-modal__version-placeholder" />
 						)}
 						<Button
-							type="default"
 							className="close-button"
 							onClick={handleClose}
 							data-testid="close-button"
+							variant="outlined"
+							color="secondary"
 						>
 							<X size={16} color={Color.BG_VANILLA_400} />
 						</Button>

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,16 +1,8 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import {
-	Button,
-	Col,
-	Dropdown,
-	MenuProps,
-	Popover,
-	Row,
-	Select,
-	Space,
-} from 'antd';
+import { Col, Dropdown, MenuProps, Popover, Row, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Button } from '@signozhq/ui/button';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -159,7 +151,6 @@ function ExplorerCard({
 		],
 	};
 
-	const saveButtonType = isQueryUpdated ? 'default' : 'primary';
 	const saveButtonIcon = isQueryUpdated ? null : <Save size="md" />;
 
 	const showSaveView = false;
@@ -210,7 +201,7 @@ function ExplorerCard({
 									</Space>
 								)}
 								{isQueryUpdated && (
-									<Button type="primary" icon={<Save />} onClick={onUpdateQueryHandler}>
+									<Button onClick={onUpdateQueryHandler} prefix={<Save />}>
 										Save changes
 									</Button>
 								)}
@@ -230,9 +221,10 @@ function ExplorerCard({
 									onOpenChange={handleOpenChange}
 								>
 									<Button
-										type={saveButtonType}
-										icon={saveButtonIcon}
 										data-testid="traces-save-view-action"
+										variant="outlined"
+										color="secondary"
+										prefix={saveButtonIcon ?? undefined}
 									>
 										{isQueryUpdated
 											? SaveButtonText.SAVE_AS_NEW_VIEW

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>;

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
-import { Button, Input, Radio, RadioChangeEvent } from 'antd';
+import { Input, Radio, RadioChangeEvent } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -125,11 +126,11 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 
 			<div className="feedback-modal-content-footer">
 				<Button
-					className="periscope-btn primary"
-					type="primary"
 					onClick={handleSubmit}
 					loading={isLoading}
 					disabled={feedback.length === 0}
+					variant="solid"
+					color="primary"
 				>
 					Submit
 				</Button>

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -156,12 +156,12 @@ function HeaderRightSection({
 						variant="ghost"
 						size="icon"
 						aria-label="Announcements"
-						prefix={<Inbox size={14} />}
 						onClick={(): void => {
 							logEvent('Announcements: Clicked', {
 								page: location.pathname,
 							});
 						}}
+						prefix={<Inbox size={14} />}
 					/>
 				</Popover>
 			)}

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -4,8 +4,9 @@ import { useSelector } from 'react-redux';
 import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Switch } from 'antd';
+import { Switch } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -155,9 +156,10 @@ function ShareURLModal(): JSX.Element {
 					</div>
 
 					<Button
-						className="periscope-btn secondary"
 						onClick={handleCopyURL}
-						icon={isURLCopied ? <Check size={14} /> : <Link2 size={14} />}
+						variant="outlined"
+						color="secondary"
+						prefix={isURLCopied ? <Check size={14} /> : <Link2 size={14} />}
 					>
 						Copy page link
 					</Button>

frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
 import { CircleCheckBig, HandPlatter } from '@signozhq/icons';
@@ -57,17 +57,18 @@ export default function WaitlistFragment({
 			</Typography.Text>
 
 			<Button
-				className="periscope-btn join-waitlist-btn"
-				type="default"
+				className="join-waitlist-btn"
 				loading={isSubmitting}
-				icon={
+				onClick={handleJoinWaitlist}
+				variant="outlined"
+				color="secondary"
+				prefix={
 					isSuccess ? (
 						<CircleCheckBig size={16} color={Color.BG_FOREST_500} />
 					) : (
 						<HandPlatter size={16} />
 					)
 				}
-				onClick={handleJoinWaitlist}
 			>
 				Get early access
 			</Button>

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Button } from '@signozhq/ui/button';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';
 
@@ -55,9 +56,12 @@ function InputWithLabel({
 			{labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			{onClose && (
 				<Button
-					className="periscope-btn ghost close-btn"
-					icon={closeIcon || <X size={16} />}
+					className="close-btn"
 					onClick={onClose}
+					variant="outlined"
+					color="secondary"
+					size="icon"
+					prefix={(closeIcon as JSX.Element) || <X size={16} />}
 				/>
 			)}
 		</div>

frontend/src/components/LaunchChatSupport/LaunchChatSupport.styles.scss

@@ -2,7 +2,7 @@
 	color: var(--bg-amber-500);
 	border-color: var(--bg-amber-500);
 
-	> .ant-btn:hover {
+	> button:hover {
 		color: var(--bg-amber-400) !important;
 		border-color: var(--bg-amber-300) !important;
 	}

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,8 +1,9 @@
 import { useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal, Tooltip } from 'antd';
+import { Modal, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import cx from 'classnames';
@@ -170,7 +171,9 @@ function LaunchChatSupport({
 				<Button
 					className={cx('periscope-btn', 'facing-issue-button', className)}
 					onClick={handleFacingIssuesClick}
-					icon={<CircleHelp size={14} />}
+					variant="outlined"
+					color="secondary"
+					prefix={<CircleHelp size={14} />}
 				>
 					{buttonText || 'Facing issues?'}
 				</Button>
@@ -189,19 +192,19 @@ function LaunchChatSupport({
 						key="cancel"
 						onClick={(): void => setIsAddCreditCardModalOpen(false)}
 						className="cancel-btn"
-						icon={<X size={16} />}
+						variant="outlined"
+						color="secondary"
+						prefix={<X size={16} />}
 					>
 						Cancel
 					</Button>,
 					<Button
 						key="submit"
-						type="primary"
-						icon={<CreditCard size={16} />}
-						size="middle"
 						loading={isLoadingBilling}
 						disabled={isLoadingBilling}
 						onClick={handleAddCreditCard}
 						className="add-credit-card-btn"
+						prefix={<CreditCard size={16} />}
 					>
 						Add Credit Card
 					</Button>,

frontend/src/components/LearnMore/LearnMore.tsx

@@ -1,9 +1,9 @@
 import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
 import { ArrowUpRight } from '@signozhq/icons';
 import { openInNewTab } from 'utils/navigation';
 
 import './LearnMore.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 type LearnMoreProps = {
 	text?: string;
@@ -19,7 +19,7 @@ function LearnMore({ text, url, onClick }: LearnMoreProps): JSX.Element {
 		}
 	};
 	return (
-		<Button type="link" className="learn-more" onClick={handleClick}>
+		<Button className="learn-more" onClick={handleClick} variant="link">
 			<div className="learn-more__text">{text}</div>
 			<ArrowUpRight size={16} color={Color.BG_ROBIN_400} />
 		</Button>

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -17,7 +17,7 @@
 		.log-detail-drawer__title-right {
 			display: flex;
 			align-items: center;
-			.ant-btn {
+			button {
 				display: flex;
 				align-items: center;
 			}

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -166,7 +166,7 @@
 		border-left: 1px solid var(--l1-border) !important;
 	}
 
-	.ant-btn-default {
+	button {
 		border: none;
 		box-shadow: none;
 	}

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss

@@ -9,7 +9,7 @@
 	border: 1px solid var(--l1-border);
 	background: var(--l2-background);
 
-	.ant-btn-default {
+	button {
 		border: none;
 		box-shadow: none;
 		padding: 9px;

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.tsx

@@ -1,8 +1,9 @@
 import { memo, MouseEventHandler } from 'react';
 import { Link, TextSelect } from '@signozhq/icons';
-import { Button, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
 
 import './LogLinesActionButtons.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 export interface LogLinesActionButtonsProps {
 	handleShowContext: MouseEventHandler<HTMLElement>;
@@ -19,18 +20,22 @@ function LogLinesActionButtons({
 		<div className={`log-line-action-buttons ${customClassName}`}>
 			<Tooltip title="Show in Context">
 				<Button
-					size="small"
-					icon={<TextSelect size={14} />}
 					className="show-context-btn"
 					onClick={handleShowContext}
+					size="sm"
+					variant="outlined"
+					color="secondary"
+					prefix={<TextSelect size={14} />}
 				/>
 			</Tooltip>
 			<Tooltip title="Copy Link">
 				<Button
-					size="small"
-					icon={<Link size={14} />}
 					onClick={onLogCopy}
 					className="copy-log-btn"
+					size="sm"
+					variant="outlined"
+					color="secondary"
+					prefix={<Link size={14} />}
 				/>
 			</Tooltip>
 		</div>

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
+import { Input, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Button } from '@signozhq/ui/button';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
@@ -223,7 +224,7 @@ function OptionsMenu({
 					<Button
 						onClick={(): void => setIsFontSizeOptionsOpen(false)}
 						className="back-btn"
-						type="text"
+						variant="ghost"
 					>
 						<ChevronLeft size={14} className="icon" />
 						<Typography.Text className="text">Select font size</Typography.Text>
@@ -235,7 +236,7 @@ function OptionsMenu({
 								setFontSizeValue(FontSize.SMALL);
 							}}
 							className="option-btn"
-							type="text"
+							variant="ghost"
 						>
 							<Typography.Text className="text">{FontSize.SMALL}</Typography.Text>
 							{fontSizeValue === FontSize.SMALL && (
@@ -247,7 +248,7 @@ function OptionsMenu({
 								setFontSizeValue(FontSize.MEDIUM);
 							}}
 							className="option-btn"
-							type="text"
+							variant="ghost"
 						>
 							<Typography.Text className="text">{FontSize.MEDIUM}</Typography.Text>
 							{fontSizeValue === FontSize.MEDIUM && (
@@ -259,7 +260,7 @@ function OptionsMenu({
 								setFontSizeValue(FontSize.LARGE);
 							}}
 							className="option-btn"
-							type="text"
+							variant="ghost"
 						>
 							<Typography.Text className="text">{FontSize.LARGE}</Typography.Text>
 							{fontSizeValue === FontSize.LARGE && (
@@ -338,10 +339,10 @@ function OptionsMenu({
 						<div className="title">Font Size</div>
 						<Button
 							className="value"
-							type="text"
 							onClick={(): void => {
 								setIsFontSizeOptionsOpen(true);
 							}}
+							variant="ghost"
 						>
 							<Typography.Text className="font-value">{fontSizeValue}</Typography.Text>
 							<ChevronRight size={14} className="icon" />
@@ -472,9 +473,11 @@ function LogsFormatOptionsMenu({
 		>
 			<Tooltip title="Options">
 				<Button
-					className="periscope-btn ghost"
-					icon={<SlidersVertical size="md" />}
 					data-testid="periscope-btn-format-options"
+					variant="outlined"
+					color="secondary"
+					size="icon"
+					prefix={<SlidersVertical size={14} />}
 				/>
 			</Tooltip>
 		</Popover>

frontend/src/components/MessagingQueueHealthCheck/MessagingQueueHealthCheck.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button } from 'antd';
 import cx from 'classnames';
 import { useOnboardingStatus } from 'hooks/messagingQueue/useOnboardingStatus';
 import { Bolt, FolderTree } from '@signozhq/icons';
@@ -8,6 +7,7 @@ import { MessagingQueueHealthCheckService } from 'pages/MessagingQueues/Messagin
 import AttributeCheckList from './AttributeCheckList';
 
 import './MessagingQueueHealthCheck.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 interface MessagingQueueHealthCheckProps {
 	serviceToInclude: string[];
@@ -94,7 +94,9 @@ function MessagingQueueHealthCheck({
 					'config-btn',
 					missingConfiguration ? 'missing-config-btn' : '',
 				)}
-				icon={<Bolt size={12} />}
+				variant="outlined"
+				color="secondary"
+				prefix={<Bolt size={12} />}
 			>
 				<div className="config-btn-content">
 					{missingConfiguration

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -18,8 +18,9 @@ import {
 	RefreshCw,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Checkbox, Select } from 'antd';
+import { Checkbox, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Button } from '@signozhq/ui/button';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -767,11 +768,11 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 								<div className="option-badge">{capitalize(option.type)}</div>
 							)}
 							{option.value && ensureValidOption(option.value) && (
-								<Button type="text" className="only-btn">
+								<Button className="only-btn" variant="ghost">
 									{currentToggleTagValue({ option: option.value })}
 								</Button>
 							)}
-							<Button type="text" className="toggle-btn">
+							<Button className="toggle-btn" variant="ghost">
 								Toggle
 							</Button>
 						</div>

frontend/src/components/PermissionDeniedCallout/PermissionDeniedCallout.module.scss

@@ -0,0 +1,4 @@
+.callout {
+	box-sizing: border-box;
+	width: 100%;
+}

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');
+	});
+});

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;

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);
+}

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();
+	});
+});

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;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx

@@ -13,12 +13,12 @@ import { javascript } from '@codemirror/lang-javascript';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap } from '@uiw/react-codemirror';
-import { Button } from 'antd';
 import { Having } from 'api/v5/v5';
 import { useQueryBuilderV2Context } from 'components/QueryBuilderV2/QueryBuilderV2Context';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronUp } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { Button } from '@signozhq/ui/button';
 
 const havingOperators = [
 	{
@@ -368,9 +368,12 @@ function HavingFilter({
 					}}
 				/>
 				<Button
-					className="close-btn periscope-btn ghost"
-					icon={<ChevronUp size={16} />}
+					className="close-btn"
 					onClick={onClose}
+					variant="outlined"
+					color="secondary"
+					size="icon"
+					prefix={<ChevronUp size={16} />}
 				/>
 			</div>
 		</div>

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Radio, RadioChangeEvent, Tooltip } from 'antd';
+import { Radio, RadioChangeEvent, Tooltip } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
@@ -17,6 +17,7 @@ import HavingFilter from './HavingFilter/HavingFilter';
 import { buildDefaultLegendFromGroupBy } from './utils';
 
 import './QueryAddOns.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 interface AddOn {
 	icon: React.ReactNode;
@@ -370,9 +371,12 @@ function QueryAddOns({
 									/>
 								</div>
 								<Button
-									className="close-btn periscope-btn ghost"
-									icon={<ChevronUp size={16} />}
+									className="close-btn"
 									onClick={(): void => handleRemoveView('group_by')}
+									variant="outlined"
+									color="secondary"
+									size="icon"
+									prefix={<ChevronUp size={16} />}
 								/>
 							</div>
 						</div>
@@ -455,9 +459,12 @@ function QueryAddOns({
 								</div>
 								{!isListViewPanel && (
 									<Button
-										className="close-btn periscope-btn ghost"
-										icon={<ChevronUp size={16} />}
+										className="close-btn"
 										onClick={(): void => handleRemoveView('order_by')}
+										variant="outlined"
+										color="secondary"
+										size="icon"
+										prefix={<ChevronUp size={16} />}
 									/>
 								)}
 							</div>
@@ -488,9 +495,12 @@ function QueryAddOns({
 									</div>
 
 									<Button
-										className="close-btn periscope-btn ghost"
-										icon={<ChevronUp size={16} />}
+										className="close-btn"
 										onClick={(): void => handleRemoveView('reduce_to')}
+										variant="outlined"
+										color="secondary"
+										size="icon"
+										prefix={<ChevronUp size={16} />}
 									/>
 								</div>
 							</div>

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -23,7 +23,7 @@ import CodeMirror, {
 	ViewPlugin,
 	ViewUpdate,
 } from '@uiw/react-codemirror';
-import { Button, Popover, Tooltip } from 'antd';
+import { Popover, Tooltip } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
 import { QueryBuilderKeys } from 'constants/queryBuilder';
@@ -36,6 +36,7 @@ import { TracesAggregatorOperator } from 'types/common/queryBuilder';
 import { useQueryBuilderV2Context } from '../../QueryBuilderV2Context';
 
 import './QueryAggregation.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 const chipDecoration = Decoration.mark({
 	class: 'chip-decorator',
@@ -720,9 +721,10 @@ function QueryAggregationSelect({
 						overlayClassName="query-aggregation-error-popover"
 					>
 						<Button
-							type="text"
-							icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
-							className="periscope-btn ghost query-aggregation-error-btn"
+							className="query-aggregation-error-btn"
+							variant="ghost"
+							size="icon"
+							prefix={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
 						/>
 					</Popover>
 				</div>

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
-import { Button, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { Button } from '@signozhq/ui/button';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -56,9 +57,11 @@ function TraceOperatorSection({
 				}
 			>
 				<Button
-					className="add-trace-operator-button periscope-btn"
-					icon={<DraftingCompass size={16} />}
+					className="add-trace-operator-button"
 					onClick={(): void => addTraceOperator?.()}
+					variant="outlined"
+					color="secondary"
+					prefix={<DraftingCompass size={16} />}
 				>
 					<div className="qb-trace-operator-button-container-text">
 						Add Trace Matching
@@ -92,9 +95,12 @@ export default function QueryFooter({
 				<div className="qb-add-new-query">
 					<Tooltip title={<div style={{ textAlign: 'center' }}>Add New Query</div>}>
 						<Button
-							className="add-new-query-button periscope-btn "
-							icon={<Plus size={16} />}
+							className="add-new-query-button"
 							onClick={addNewBuilderQuery}
+							variant="outlined"
+							color="secondary"
+							size="icon"
+							prefix={<Plus size={16} />}
 						/>
 					</Tooltip>
 				</div>
@@ -118,9 +124,11 @@ export default function QueryFooter({
 							}
 						>
 							<Button
-								className="add-formula-button periscope-btn "
-								icon={<Sigma size={16} />}
+								className="add-formula-button"
 								onClick={addNewFormula}
+								variant="outlined"
+								color="secondary"
+								prefix={<Sigma size={16} />}
 							>
 								Add Formula
 							</Button>

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -14,7 +14,7 @@ import { Color } from '@signozhq/design-tokens';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
-import { Button, Card, Collapse, Popover, Tag, Tooltip } from 'antd';
+import { Card, Collapse, Popover, Tag, Tooltip } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import cx from 'classnames';
@@ -49,6 +49,7 @@ import { queryExamples } from './constants';
 import { combineInitialAndUserExpression } from './utils';
 
 import './QuerySearch.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 const { Panel } = Collapse;
 
@@ -1484,15 +1485,16 @@ function QuerySearch({
 						>
 							{validation.isValid ? (
 								<Button
-									type="text"
-									icon={<CircleCheck size="md" />}
+									variant="ghost"
+									size="icon"
 									className="periscope-btn ghost"
+									prefix={<CircleCheck size={14} />}
 								/>
 							) : (
 								<Button
-									type="text"
-									icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
-									className="periscope-btn ghost"
+									variant="ghost"
+									size="icon"
+									prefix={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
 								/>
 							)}
 						</Popover>

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
-import { Button, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -108,7 +109,7 @@ export default function TraceOperator({
 				)}
 			</div>
 			<Tooltip title="Remove Trace Operator" placement="topLeft">
-				<Button className="periscope-btn ghost" onClick={removeTraceOperator}>
+				<Button onClick={removeTraceOperator} variant="outlined" color="secondary">
 					<Trash2 size={14} />
 				</Button>
 			</Tooltip>

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperatorEditor.tsx

@@ -15,7 +15,7 @@ import { Color } from '@signozhq/design-tokens';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
-import { Button, Popover } from 'antd';
+import { Popover } from 'antd';
 import cx from 'classnames';
 import {
 	TRACE_OPERATOR_OPERATORS,
@@ -34,6 +34,7 @@ import { getInvolvedQueriesInTraceOperator } from './utils/utils';
 
 import '../QuerySearch/QuerySearch.styles.scss';
 import { CircleCheck, TriangleAlert } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 
 // Custom extension to stop events
 const stopEventsExtension = EditorView.domEventHandlers({
@@ -465,15 +466,15 @@ function TraceOperatorEditor({
 						>
 							{validation.isValid ? (
 								<Button
-									type="text"
-									icon={<CircleCheck size="md" />}
-									className="periscope-btn ghost"
+									variant="ghost"
+									size="icon"
+									prefix={<CircleCheck size={14} />}
 								/>
 							) : (
 								<Button
-									type="text"
-									icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
-									className="periscope-btn ghost"
+									variant="ghost"
+									size="icon"
+									prefix={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
 								/>
 							)}
 						</Popover>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Button, Checkbox, Input, Skeleton } from 'antd';
+import { Checkbox, Input, Skeleton } from 'antd';
+import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
@@ -660,14 +661,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 													{String(value)}
 												</Typography.Text>
 											)}
-											<Button type="text" className="only-btn">
+											<Button className="only-btn" variant="ghost">
 												{isSomeFilterPresentForCurrentAttribute
 													? currentFilterState[value] && !isMultipleValuesTrueForTheKey
 														? 'All'
 														: 'Only'
 													: 'Only'}
 											</Button>
-											<Button type="text" className="toggle-btn">
+											<Button className="toggle-btn" variant="ghost">
 												Toggle
 											</Button>
 										</div>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/LogsQuickFilterEmptyState.tsx

@@ -1,7 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
 import EmptyQuickFilterIcon from 'assets/CustomIcons/EmptyQuickFilterIcon';
 import { ArrowUpRight } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
 
 const QUICK_FILTER_DOC_PATHS: Record<string, string> = {
 	severity_text: 'severity-text',
@@ -39,9 +39,9 @@ function LogsQuickFilterEmptyState({
 				</div>
 			</div>
 			<Button
-				type="link"
 				className="go-to-docs__button"
 				onClick={handleLearnMoreClick}
+				variant="link"
 			>
 				<div className="go-to-docs__button-text">Learn more</div>
 				<ArrowUpRight size={14} color={Color.BG_ROBIN_400} />

frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Collapse } from 'antd';
+import { Collapse } from 'antd';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
@@ -21,6 +21,7 @@ import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
 import './Duration.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 export type FilterType = Record<
 	AllTraceFilterKeys,
@@ -299,9 +300,9 @@ function Duration({
 			/>
 			{activeKeys.includes('durationNano') && (
 				<Button
-					type="link"
 					onClick={onClearHandler}
 					data-testid="collapse-duration-clearBtn"
+					variant="link"
 				>
 					Clear All
 				</Button>

frontend/src/components/QuickFilters/QuickFiltersSettings/AddedFilters.tsx

@@ -14,10 +14,10 @@ import {
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Button } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+import { Button } from '@signozhq/ui/button';
 
 function SortableFilter({
 	filter,
@@ -50,11 +50,13 @@ function SortableFilter({
 			</div>
 			{allowRemove && (
 				<Button
-					className="remove-filter-btn periscope-btn"
-					size="small"
+					className="remove-filter-btn"
 					onClick={(): void => {
 						onRemove(filter as FilterType);
 					}}
+					size="sm"
+					variant="outlined"
+					color="secondary"
 				>
 					Remove
 				</Button>

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Button, Skeleton } from 'antd';
+import { Skeleton } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
@@ -12,6 +12,7 @@ import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 import { DataSource } from 'types/common/queryBuilder';
+import { Button } from '@signozhq/ui/button';
 
 function OtherFiltersSkeleton(): JSX.Element {
 	return (
@@ -146,9 +147,11 @@ function OtherFilters({
 			<div key={filter.key} className="qf-filter-item other-filters-item">
 				<div className="qf-filter-key">{filter.key}</div>
 				<Button
-					className="add-filter-btn periscope-btn"
-					size="small"
+					className="add-filter-btn"
 					onClick={(): void => handleAddFilter(filter as FilterType)}
+					size="sm"
+					variant="outlined"
+					color="secondary"
 				>
 					Add
 				</Button>

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
@@ -9,6 +9,7 @@ import useQuickFilterSettings from './hooks/useQuickFilterSettings';
 import OtherFilters from './OtherFilters';
 
 import './QuickFiltersSettings.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 function QuickFiltersSettings({
 	signal,
@@ -86,17 +87,17 @@ function QuickFiltersSettings({
 			{hasUnsavedChanges && (
 				<div className="qf-footer">
 					<Button
-						type="default"
 						onClick={handleDiscardChanges}
-						icon={<X size={16} />}
+						variant="outlined"
+						color="secondary"
+						prefix={<X size={16} />}
 					>
 						Discard
 					</Button>
 					<Button
-						type="primary"
 						onClick={handleSaveChanges}
-						icon={<Check size={16} />}
 						loading={isUpdatingCustomFilters}
+						prefix={<Check size={16} />}
 					>
 						Save changes
 					</Button>

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -1,16 +1,15 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
 import refreshPaymentStatus from 'api/v3/licenses/put';
 import cx from 'classnames';
 import { RefreshCcw } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
+import { Button } from '@signozhq/ui/button';
 
 function RefreshPaymentStatus({
-	btnShape,
 	type,
 }: {
-	btnShape?: 'default' | 'round' | 'circle';
 	type?: 'button' | 'text' | 'tooltip';
 }): JSX.Element {
 	const { t } = useTranslation(['failedPayment']);
@@ -35,12 +34,12 @@ function RefreshPaymentStatus({
 		<span className="refresh-payment-status-btn-wrapper">
 			<Tooltip title={type === 'tooltip' ? t('refreshPaymentStatus') : ''}>
 				<Button
-					type={type === 'text' ? 'text' : 'default'}
-					shape={btnShape}
 					className={cx('periscope-btn', { text: type === 'text' })}
 					onClick={handleRefreshPaymentStatus}
-					icon={<RefreshCcw size={14} />}
 					loading={isLoading}
+					variant="outlined"
+					color="secondary"
+					prefix={<RefreshCcw size={14} />}
 				>
 					{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
 				</Button>
@@ -49,7 +48,6 @@ function RefreshPaymentStatus({
 	);
 }
 RefreshPaymentStatus.defaultProps = {
-	btnShape: 'default',
 	type: 'button',
 };
 

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -4,7 +4,7 @@ import type {
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 } from 'antd';
-import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
+import { Dropdown, Flex, MenuProps, Switch } from 'antd';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -21,6 +21,7 @@ import {
 } from './utils';
 
 import './DynamicColumnTable.syles.scss';
+import { Button } from '@signozhq/ui/button';
 
 function DynamicColumnTable({
 	tablesource,
@@ -133,9 +134,11 @@ function DynamicColumnTable({
 					>
 						<Button
 							className="dynamicColumnTable-button filter-btn"
-							size="middle"
-							icon={<SlidersHorizontal size={14} />}
 							data-testid="additional-filters-button"
+							variant="outlined"
+							color="secondary"
+							size="icon"
+							prefix={<SlidersHorizontal size={14} />}
 						/>
 					</Dropdown>
 				)}

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}
 		/>
 	);
 }

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>
 		</>

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}
 				/>
 			)}
 

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>
 	);
 

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>
 		</>

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;

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>

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>
 		);
 	}

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

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}
 				/>
 			}
 		>

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">

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',
 };
 

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',
 	},
 	{

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());
+	});
+});

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(),
 		);
 	});
 

frontend/src/components/SignozModal/SignozModal.style.scss

@@ -74,7 +74,7 @@
 	}
 
 	.ant-modal-footer {
-		.ant-btn {
+		button {
 			display: flex;
 			align-items: center;
 			gap: 4px;

frontend/src/components/Tags/Tags.tsx

@@ -1,9 +1,10 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { Check, Plus, X } from '@signozhq/icons';
-import { Button, Flex, Tag } from 'antd';
+import { Flex, Tag } from 'antd';
 import Input from 'components/Input';
 
 import './Tags.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>('');
@@ -71,19 +72,19 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 
 					<div className="confirm-cancel-actions">
 						<Button
-							type="primary"
-							className="periscope-btn"
-							size="small"
-							icon={<Check size={14} />}
 							onClick={handleInputConfirm}
+							size="sm"
+							prefix={<Check size={14} />}
+							variant="outlined"
+							color="secondary"
 						/>
 
 						<Button
-							type="primary"
-							className="periscope-btn"
-							size="small"
-							icon={<X size={14} />}
 							onClick={hideInput}
+							size="sm"
+							prefix={<X size={14} />}
+							variant="outlined"
+							color="secondary"
 						/>
 					</div>
 				</div>
@@ -91,15 +92,14 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 
 			{!inputVisible && (
 				<Button
-					type="primary"
-					size="small"
 					style={{
 						fontSize: '11px',
 					}}
 					onClick={showInput}
+					size="sm"
+					prefix={<Plus size={14} />}
 				>
 					<Flex justify="center" align="center" gap={4}>
-						<Plus size="md" />
 						New Tag
 					</Flex>
 				</Button>