Merge branch 'main' of https://github.com/SigNoz/signoz into chore/button-migration

Co-authored-by: primus-bot[bot] <171087277+primus-bot[bot]@users.noreply.github.com>

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.125.0
+    image: signoz/signoz:v0.125.1
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.125.0
+    image: signoz/signoz:v0.125.1
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.125.0}
+    image: signoz/signoz:${VERSION:-v0.125.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.125.0}
+    image: signoz/signoz:${VERSION:-v0.125.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -2342,6 +2342,8 @@ components:
           type: boolean
         org_id:
           type: string
+        source:
+          $ref: '#/components/schemas/DashboardtypesSource'
         updatedAt:
           format: date-time
           type: string
@@ -2371,6 +2373,12 @@ components:
         timeRangeEnabled:
           type: boolean
       type: object
+    DashboardtypesSource:
+      enum:
+      - user
+      - system
+      - integration
+      type: object
     DashboardtypesStorableDashboardData:
       additionalProperties: {}
       type: object

ee/modules/dashboard/impldashboard/module.go

@@ -49,6 +49,14 @@ func (module *module) CreatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
+	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
+	if err != nil {
+		return err
+	}
+	if err := dashboard.ErrIfNotPublishable(); err != nil {
+		return err
+	}
+
 	storablePublicDashboard, err := module.store.GetPublic(ctx, publicDashboard.DashboardID.StringValue())
 	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
 		return err
@@ -129,6 +137,14 @@ func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
+	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
+	if err != nil {
+		return err
+	}
+	if err := dashboard.ErrIfNotPublishable(); err != nil {
+		return err
+	}
+
 	return module.store.UpdatePublic(ctx, dashboardtypes.NewStorablePublicDashboardFromPublicDashboard(publicDashboard))
 }
 
@@ -138,6 +154,10 @@ func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.U
 		return err
 	}
 
+	if err := dashboard.ErrIfNotDeletable(); err != nil {
+		return err
+	}
+
 	if dashboard.Locked {
 		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "dashboard is locked, please unlock the dashboard to be delete it")
 	}
@@ -168,6 +188,14 @@ func (module *module) DeletePublic(ctx context.Context, orgID valuer.UUID, dashb
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
+	dashboard, err := module.Get(ctx, orgID, dashboardID)
+	if err != nil {
+		return err
+	}
+	if err := dashboard.ErrIfNotPublishable(); err != nil {
+		return err
+	}
+
 	err = module.store.DeletePublic(ctx, dashboardID.StringValue())
 	if err != nil {
 		return err

frontend/package.json

@@ -49,7 +49,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.19",
+    "@signozhq/ui": "0.0.20",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -241,4 +241,4 @@
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
   }
-}
+}

frontend/plugins/rules/no-antd-components.mjs

@@ -15,6 +15,7 @@
 
 const BANNED_COMPONENTS = {
 	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
+	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
 };
 
 export default {

frontend/pnpm-lock.yaml

@@ -77,8 +77,8 @@ importers:
         specifier: 0.0.2
         version: 0.0.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@signozhq/ui':
-        specifier: 0.0.19
-        version: 0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
+        specifier: 0.0.20
+        version: 0.0.20(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
       '@tanstack/react-table':
         specifier: 8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -3269,8 +3269,8 @@ packages:
     peerDependencies:
       react: ^18.2.0
 
-  '@signozhq/ui@0.0.19':
-    resolution: {integrity: sha512-2q6aRxN/PR4PlR2xJZAREEuvLPiDFggfFKzCW2Z5vHVVbrgnvZHWD1jPUuwszfEg0ceH3UvkwqceO7wN4uRJAA==}
+  '@signozhq/ui@0.0.20':
+    resolution: {integrity: sha512-rVC8OMfM1AsjsrWJWNzU8KlSw3hbWP5OF/jxuX3zQ5Fljo9PhtLksUF3jISfwLqbmWOBCopByr9UlKH46iAfYA==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -3851,27 +3851,6 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
 
-  '@webassemblyjs/ast@1.14.1':
-    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
-
-  '@webassemblyjs/floating-point-hex-parser@1.13.2':
-    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
-
-  '@webassemblyjs/helper-api-error@1.13.2':
-    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
-
-  '@webassemblyjs/helper-buffer@1.14.1':
-    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
-
-  '@webassemblyjs/helper-numbers@1.13.2':
-    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
-
-  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
-    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
-
-  '@webassemblyjs/helper-wasm-section@1.14.1':
-    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
-
   '@xmldom/xmldom@0.8.13':
     resolution: {integrity: sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw==}
     engines: {node: '>=10.0.0'}
@@ -12034,7 +12013,7 @@ snapshots:
       - react-dom
       - tailwindcss
 
-  '@signozhq/ui@0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.0.20(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@chenglou/pretext': 0.0.5
       '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -166,8 +166,6 @@ function createMockAppContext(
 		userPreferences: [],
 		hostsData: null,
 		isLoggedIn: true,
-		isNoAuthMode: false,
-		isPreflightLoading: false,
 		org: [{ createdAt: 0, id: 'org-id', displayName: 'Test Org' }],
 		isFetchingUser: false,
 		isFetchingActiveLicense: false,

frontend/src/AppRoutes/index.tsx

@@ -59,7 +59,6 @@ function App(): JSX.Element {
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
-		isPreflightLoading,
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
@@ -387,10 +386,6 @@ function App(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isCloudUser, isEnterpriseSelfHostedUser]);
 
-	if (isPreflightLoading) {
-		return <Spinner tip="Loading..." />;
-	}
-
 	// if the user is in logged in state
 	if (isLoggedInState) {
 		// if the setup calls are loading then return a spinner

frontend/src/AppRoutes/pageComponents.ts

@@ -47,7 +47,6 @@ export const TracesFunnels = Loadable(
 		import(/* webpackChunkName: "Traces Funnels" */ 'pages/TracesModulePage'),
 );
 export const TracesFunnelDetails = Loadable(
-	// eslint-disable-next-line sonarjs/no-identical-functions
 	() =>
 		import(
 			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesModulePage'
@@ -313,13 +312,6 @@ export const PublicDashboardPage = Loadable(
 		),
 );
 
-export const AlertTypeSelectionPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "Alert Type Selection Page" */ 'pages/AlertTypeSelection'
-		),
-);
-
 export const MeterExplorerPage = Loadable(
 	() =>
 		import(/* webpackChunkName: "Meter Explorer Page" */ 'pages/MeterExplorer'),

frontend/src/AppRoutes/routes.ts

@@ -5,7 +5,6 @@ import {
 	AIAssistantPage,
 	AlertHistory,
 	AlertOverview,
-	AlertTypeSelectionPage,
 	AllAlertChannels,
 	AllErrors,
 	ApiMonitoring,
@@ -213,13 +212,6 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'LIST_ALL_ALERT',
 	},
-	{
-		path: ROUTES.ALERT_TYPE_SELECTION,
-		exact: true,
-		component: AlertTypeSelectionPage,
-		isPrivate: true,
-		key: 'ALERT_TYPE_SELECTION',
-	},
 	{
 		path: ROUTES.ALERTS_NEW,
 		exact: true,
@@ -533,18 +525,6 @@ export const LIST_LICENSES: AppRoutes = {
 	key: 'LIST_LICENSES',
 };
 
-export const oldRoutes = [
-	'/pipelines',
-	'/logs-explorer',
-	'/logs-explorer/live',
-	'/logs-save-views',
-	'/traces-save-views',
-	'/settings/access-tokens',
-	'/settings/api-keys',
-	'/messaging-queues',
-	'/alerts/edit',
-];
-
 export const oldNewRoutesMapping: Record<string, string> = {
 	'/pipelines': '/logs/pipelines',
 	'/logs-explorer': '/logs/logs-explorer',
@@ -555,7 +535,9 @@ export const oldNewRoutesMapping: Record<string, string> = {
 	'/settings/api-keys': '/settings/service-accounts',
 	'/messaging-queues': '/messaging-queues/overview',
 	'/alerts/edit': '/alerts/overview',
+	'/alerts/type-selection': '/alerts/new',
 };
+export const oldRoutes = Object.keys(oldNewRoutesMapping);
 
 export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
 	ROUTES.WORKSPACE_LOCKED,

frontend/src/api/__tests__/interceptorRejected.no-auth.test.ts

@@ -1,72 +0,0 @@
-import axios from 'axios';
-import { getIsNoAuthMode } from 'utils/noAuthMode';
-
-import { interceptorRejected } from '../index';
-
-jest.mock('utils/noAuthMode', () => ({
-	getIsNoAuthMode: jest.fn(),
-}));
-
-jest.mock('api/v2/sessions/rotate/post', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('AppRoutes/utils', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('../utils', () => ({
-	Logout: jest.fn(),
-}));
-
-// oxlint-disable-next-line typescript/no-require-imports typescript/no-var-requires
-const post = require('api/v2/sessions/rotate/post').default;
-// oxlint-disable-next-line typescript/no-require-imports typescript/no-var-requires
-const { Logout } = require('../utils');
-
-describe('interceptorRejected — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		jest.spyOn(axios, 'isAxiosError').mockReturnValue(true);
-	});
-
-	it('does NOT call rotate or Logout when no-auth mode is enabled on 401', async () => {
-		(getIsNoAuthMode as jest.Mock).mockReturnValue(true);
-
-		const error = {
-			isAxiosError: true,
-			response: {
-				status: 401,
-				config: { url: '/dashboards', method: 'get' },
-			},
-			config: { url: '/dashboards', headers: {} },
-		};
-
-		await interceptorRejected(error as any).catch(() => {});
-
-		expect(post).not.toHaveBeenCalled();
-		expect(Logout).not.toHaveBeenCalled();
-	});
-
-	it('DOES attempt rotate when no-auth mode is disabled on 401', async () => {
-		(getIsNoAuthMode as jest.Mock).mockReturnValue(false);
-		(post as jest.Mock).mockResolvedValue({
-			data: { accessToken: 'a', refreshToken: 'b' },
-		});
-
-		const error = {
-			isAxiosError: true,
-			response: {
-				status: 401,
-				config: { url: '/dashboards', method: 'get' },
-			},
-			config: { url: '/dashboards', headers: {} },
-		};
-
-		await interceptorRejected(error as any).catch(() => {});
-
-		expect(post).toHaveBeenCalled();
-	});
-});

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

@@ -2999,6 +2999,11 @@ export interface CoretypesPatchableObjectsDTO {
 	deletions: CoretypesObjectGroupDTO[] | null;
 }
 
+export enum DashboardtypesSourceDTO {
+	user = 'user',
+	system = 'system',
+	integration = 'integration',
+}
 export interface DashboardtypesDashboardDTO {
 	/**
 	 * @type string
@@ -3022,6 +3027,7 @@ export interface DashboardtypesDashboardDTO {
 	 * @type string
 	 */
 	org_id?: string;
+	source?: DashboardtypesSourceDTO;
 	/**
 	 * @type string
 	 * @format date-time

frontend/src/api/index.ts

@@ -13,7 +13,6 @@ import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';
-import { getIsNoAuthMode } from 'utils/noAuthMode';
 
 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
 import { Logout } from './utils';
@@ -109,10 +108,7 @@ export const interceptorRejected = async (
 		if (axios.isAxiosError(value) && value.response) {
 			const { response } = value;
 
-			const isNoAuthMode = getIsNoAuthMode();
-
 			if (
-				!isNoAuthMode &&
 				response.status === 401 &&
 				// if the session rotate call or the create session errors out with 401 or the delete sessions call returns 401 then we do not retry!
 				response.config.url !== '/sessions/rotate' &&
@@ -144,20 +140,16 @@ export const interceptorRejected = async (
 						return await Promise.resolve(reResponse);
 					} catch (error) {
 						if ((error as AxiosError)?.response?.status === 401) {
-							void Logout();
+							Logout();
 						}
 					}
 				} catch (error) {
-					void Logout();
+					Logout();
 				}
 			}
 
-			if (
-				!isNoAuthMode &&
-				response.status === 401 &&
-				response.config.url === '/sessions/rotate'
-			) {
-				void Logout();
+			if (response.status === 401 && response.config.url === '/sessions/rotate') {
+				Logout();
 			}
 		}
 		return await Promise.reject(value);

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss

@@ -0,0 +1,17 @@
+.breadcrumb {
+	padding-left: 16px;
+
+	ol {
+		align-items: center;
+	}
+
+	:global(.ant-breadcrumb-separator) {
+		color: var(--muted-foreground);
+	}
+}
+
+.divider {
+	border-color: var(--l1-border);
+	margin: 16px 0;
+	margin-top: 10px;
+}

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx

@@ -0,0 +1,32 @@
+import { Breadcrumb, Divider } from 'antd';
+
+import styles from './AlertBreadcrumb.module.scss';
+import BreadcrumbItem, { BreadcrumbItemConfig } from './BreadcrumbItem';
+
+export interface AlertBreadcrumbProps {
+	items: BreadcrumbItemConfig[];
+	className?: string;
+	showDivider?: boolean;
+}
+
+function AlertBreadcrumb({
+	items,
+	className,
+	showDivider = true,
+}: AlertBreadcrumbProps): JSX.Element {
+	const breadcrumbItems = items.map((item) => ({
+		title: <BreadcrumbItem {...item} />,
+	}));
+
+	return (
+		<>
+			<Breadcrumb
+				className={`${styles.breadcrumb} ${className || ''}`}
+				items={breadcrumbItems}
+			/>
+			{showDivider && <Divider className={styles.divider} />}
+		</>
+	);
+}
+
+export default AlertBreadcrumb;

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.module.scss

@@ -0,0 +1,9 @@
+.item {
+	--button-padding: 0;
+	--button-font-size: var(--periscope-font-size-base);
+}
+
+.itemLast {
+	color: var(--muted-foreground);
+	font-size: var(--periscope-font-size-base);
+}

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx

@@ -0,0 +1,45 @@
+import { Button } from '@signozhq/ui/button';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { isModifierKeyPressed } from 'utils/app';
+
+import styles from './BreadcrumbItem.module.scss';
+
+export type BreadcrumbItemConfig =
+	| {
+			title: string | null;
+			route?: string;
+	  }
+	| {
+			title: string | null;
+			isLast?: true;
+	  };
+
+function BreadcrumbItem({
+	title,
+	...props
+}: BreadcrumbItemConfig): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+
+	if ('isLast' in props) {
+		return <div className={styles.itemLast}>{title}</div>;
+	}
+
+	return (
+		<Button
+			variant="ghost"
+			color="secondary"
+			className={styles.item}
+			onClick={(e: React.MouseEvent): void => {
+				if (!('route' in props) || !props.route) {
+					return;
+				}
+
+				safeNavigate(props.route, { newTab: isModifierKeyPressed(e) });
+			}}
+		>
+			{title}
+		</Button>
+	);
+}
+
+export default BreadcrumbItem;

frontend/src/components/AlertBreadcrumb/index.tsx

@@ -0,0 +1,6 @@
+export { default } from './AlertBreadcrumb';
+export {
+	default as BreadcrumbItem,
+	type BreadcrumbItemConfig,
+} from './BreadcrumbItem';
+export type { AlertBreadcrumbProps } from './AlertBreadcrumb';

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

@@ -137,7 +137,6 @@ function CreateServiceAccountModal(): JSX.Element {
 				<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"

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,14 @@ 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"
+						color="secondary"
 					>
 						{option.label}
 					</Button>
@@ -249,15 +250,15 @@ function CustomTimePickerPopoverContent({
 					{isLogsExplorerPage && isLogsListView && (
 						<Button
 							className={cx('data-time-live', isLiveLogsEnabled ? 'active' : '')}
-							type="text"
 							onClick={handleGoLive}
+							variant="ghost"
+							color="secondary"
 						>
 							Live
 						</Button>
 					)}
 					{options.map((option) => (
 						<Button
-							type="text"
 							key={option.label + option.value}
 							onClick={(e: React.MouseEvent<HTMLButtonElement>): void => {
 								e.stopPropagation();
@@ -271,6 +272,8 @@ function CustomTimePickerPopoverContent({
 									? option.value === 'custom' && !isLiveLogsEnabled && 'active'
 									: selectedTime === option.value && !isLiveLogsEnabled && 'active',
 							)}
+							variant="ghost"
+							color="secondary"
 						>
 							<span className="time-label">{option.label}</span>
 
@@ -370,11 +373,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.test.tsx

@@ -106,7 +106,7 @@ describe.each([
 		renderWithStore(dataSource);
 		const button = screen.getByTestId(testId);
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveClass('periscope-btn', 'ghost');
+		expect(button).not.toBeDisabled();
 	});
 
 	it('shows popover with export options when download button is clicked', () => {

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/EditMemberDrawer/EditMemberDrawer.tsx

@@ -19,7 +19,6 @@ import {
 } from 'api/generated/services/users';
 import { AxiosError } from 'axios';
 import { MemberRow } from 'components/MembersTable/MembersTable';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import RolesSelect, { useRoles } from 'components/RolesSelect';
 import SaveErrorItem from 'components/ServiceAccountDrawer/SaveErrorItem';
 import type { SaveError } from 'components/ServiceAccountDrawer/utils';
@@ -614,43 +613,39 @@ function EditMemberDrawer({
 					<div className="edit-member-drawer__footer-left">
 						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
 							<span className="edit-member-drawer__tooltip-wrapper">
-								<NoAuthGuard testId="no-auth-delete-member">
-									<Button
-										onClick={(): void => setShowDeleteConfirm(true)}
-										disabled={isRootUser || isSelf}
-										variant="link"
-										color="destructive"
-									>
-										<Trash2 size={12} />
-										{isInvited ? 'Revoke Invite' : 'Delete Member'}
-									</Button>
-								</NoAuthGuard>
+								<Button
+									onClick={(): void => setShowDeleteConfirm(true)}
+									disabled={isRootUser || isSelf}
+									variant="link"
+									color="destructive"
+								>
+									<Trash2 size={12} />
+									{isInvited ? 'Revoke Invite' : 'Delete Member'}
+								</Button>
 							</span>
 						</Tooltip>
 
 						<div className="edit-member-drawer__footer-divider" />
 						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
 							<span className="edit-member-drawer__tooltip-wrapper">
-								<NoAuthGuard testId="no-auth-generate-reset-link">
-									<Button
-										onClick={handleGenerateResetLink}
-										disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
-										variant="link"
-										color="warning"
-									>
-										<RefreshCw size={12} />
-										{isGeneratingLink
-											? 'Generating...'
-											: isInvited
-												? getInviteButtonLabel(
-														isLoadingTokenStatus,
-														existingToken,
-														isTokenExpired,
-														tokenNotFound,
-													)
-												: 'Generate Password Reset Link'}
-									</Button>
-								</NoAuthGuard>
+								<Button
+									onClick={handleGenerateResetLink}
+									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
+									variant="link"
+									color="warning"
+								>
+									<RefreshCw size={12} />
+									{isGeneratingLink
+										? 'Generating...'
+										: isInvited
+											? getInviteButtonLabel(
+													isLoadingTokenStatus,
+													existingToken,
+													isTokenExpired,
+													tokenNotFound,
+												)
+											: 'Generate Password Reset Link'}
+								</Button>
 							</span>
 						</Tooltip>
 					</div>
@@ -661,17 +656,15 @@ function EditMemberDrawer({
 							Cancel
 						</Button>
 
-						<NoAuthGuard testId="no-auth-save-member">
-							<Button
-								variant="solid"
-								color="primary"
-								disabled={!isDirty || isSaving || isRootUser}
-								onClick={handleSave}
-								loading={isSaving}
-							>
-								{isSaving ? 'Saving...' : 'Save Member Details'}
-							</Button>
-						</NoAuthGuard>
+						<Button
+							variant="solid"
+							color="primary"
+							disabled={!isDirty || isSaving || isRootUser}
+							onClick={handleSave}
+							loading={isSaving}
+						>
+							{isSaving ? 'Saving...' : 'Save Member Details'}
+						</Button>
 					</div>
 				</>
 			)}

frontend/src/components/EditMemberDrawer/__tests__/EditMemberDrawer.no-auth.test.tsx

@@ -1,113 +0,0 @@
-import {
-	useCreateResetPasswordToken,
-	useDeleteUser,
-	useGetResetPasswordToken,
-	useGetRolesByUserID,
-	useGetUser,
-	useRemoveUserRoleByUserIDAndRoleID,
-	useSetRoleByUserID,
-	useUpdateMyUserV2,
-	useUpdateUser,
-} from 'api/generated/services/users';
-import { MemberStatus } from 'container/MembersSettings/utils';
-import { managedRoles } from 'mocks-server/__mockdata__/roles';
-import { screen } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import EditMemberDrawer from '../EditMemberDrawer';
-
-jest.mock('api/generated/services/users', () => ({
-	useDeleteUser: jest.fn(),
-	useGetUser: jest.fn(),
-	useGetRolesByUserID: jest.fn(),
-	useRemoveUserRoleByUserIDAndRoleID: jest.fn(),
-	useUpdateUser: jest.fn(),
-	useUpdateMyUserV2: jest.fn(),
-	useSetRoleByUserID: jest.fn(),
-	useGetResetPasswordToken: jest.fn(),
-	useCreateResetPasswordToken: jest.fn(),
-	getGetRolesByUserIDQueryKey: ({ id }: { id: string }): string[] => [
-		`/api/v2/users/${id}/roles`,
-	],
-}));
-
-const activeMember = {
-	id: 'user-1',
-	name: 'Alice Smith',
-	email: 'alice@signoz.io',
-	status: MemberStatus.Active,
-	joinedOn: '1700000000000',
-	updatedAt: '1710000000000',
-};
-
-function setupMocks(): void {
-	(useGetUser as jest.Mock).mockReturnValue({
-		data: {
-			data: {
-				id: 'user-1',
-				displayName: 'Alice Smith',
-				email: 'alice@signoz.io',
-				status: 'active',
-				userRoles: [
-					{ id: 'ur-1', roleId: managedRoles[0].id, role: managedRoles[0] },
-				],
-			},
-		},
-		isLoading: false,
-		refetch: jest.fn(),
-	});
-	(useGetRolesByUserID as jest.Mock).mockReturnValue({
-		data: { data: [managedRoles[0]] },
-		isLoading: false,
-	});
-	(useRemoveUserRoleByUserIDAndRoleID as jest.Mock).mockReturnValue({
-		mutateAsync: jest.fn().mockResolvedValue({}),
-		isLoading: false,
-	});
-	(useUpdateUser as jest.Mock).mockReturnValue({
-		mutateAsync: jest.fn().mockResolvedValue({}),
-		isLoading: false,
-	});
-	(useUpdateMyUserV2 as jest.Mock).mockReturnValue({
-		mutateAsync: jest.fn().mockResolvedValue({}),
-		isLoading: false,
-	});
-	(useSetRoleByUserID as jest.Mock).mockReturnValue({
-		mutateAsync: jest.fn().mockResolvedValue({}),
-		isLoading: false,
-	});
-	(useDeleteUser as jest.Mock).mockReturnValue({
-		mutate: jest.fn(),
-		isLoading: false,
-	});
-	(useGetResetPasswordToken as jest.Mock).mockReturnValue({
-		data: undefined,
-		isLoading: false,
-		isError: false,
-	});
-	(useCreateResetPasswordToken as jest.Mock).mockReturnValue({
-		mutateAsync: jest.fn().mockResolvedValue({}),
-		isLoading: false,
-	});
-}
-
-describe('EditMemberDrawer — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		setupMocks();
-	});
-
-	it('renders no-auth guard wrappers for all member mutation buttons', () => {
-		renderWithNoAuth(
-			<EditMemberDrawer
-				member={activeMember}
-				open
-				onClose={jest.fn()}
-				onComplete={jest.fn()}
-			/>,
-		);
-		expect(screen.getByTestId('no-auth-delete-member')).toBeInTheDocument();
-		expect(screen.getByTestId('no-auth-generate-reset-link')).toBeInTheDocument();
-		expect(screen.getByTestId('no-auth-save-member')).toBeInTheDocument();
-	});
-});

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/FieldsSelector/AddedFields.tsx

@@ -54,7 +54,7 @@ function SortableField({
 				<span className={styles.fieldKey}>{field.name}</span>
 			</div>
 			<Button
-				className={cx(styles.removeBtn, 'periscope-btn')}
+				className={styles.removeBtn}
 				variant="outlined"
 				color="destructive"
 				size="sm"

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -89,7 +89,7 @@ function OtherFields({
 									<span className={styles.fieldKey}>{attr.name}</span>
 									{!isAtLimit && (
 										<Button
-											className={cx(styles.addBtn, 'periscope-btn')}
+											className={styles.addBtn}
 											variant="outlined"
 											color="secondary"
 											size="sm"

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

@@ -141,6 +141,7 @@ function HeaderRightSection({
 				>
 					<Button
 						variant="ghost"
+						color="secondary"
 						size="icon"
 						className="share-feedback-btn"
 						aria-label="Feedback"
@@ -164,14 +165,15 @@ function HeaderRightSection({
 				>
 					<Button
 						variant="ghost"
+						color="secondary"
 						size="icon"
 						aria-label="Announcements"
-						prefix={<Inbox size={14} />}
 						onClick={(): void => {
 							logEvent('Announcements: Clicked', {
 								page: location.pathname,
 							});
 						}}
+						prefix={<Inbox size={14} />}
 					/>
 				</Popover>
 			)}
@@ -190,6 +192,7 @@ function HeaderRightSection({
 				>
 					<Button
 						variant="ghost"
+						color="secondary"
 						size="icon"
 						aria-label="Share"
 						prefix={<Globe size={14} />}

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';
@@ -168,9 +169,11 @@ function LaunchChatSupport({
 				overlayClassName="tooltip-overlay"
 			>
 				<Button
-					className={cx('periscope-btn', 'facing-issue-button', className)}
+					className={cx('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/LogDetail/index.tsx

@@ -50,6 +50,7 @@ import {
 import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
 import { AppState } from 'store/reducers';
+import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -217,20 +218,17 @@ function LogDetailInner({
 
 	const logBody = useMemo(() => {
 		if (!isBodyJsonQueryEnabled) {
-			return log?.body || '';
+			return (log?.body as string) ?? '';
 		}
-
-		try {
-			const json = JSON.parse(log?.body || '');
-
-			if (typeof json?.message === 'string' && json.message !== '') {
-				return json.message;
-			}
-
-			return log?.body || '';
-		} catch {
-			return log?.body || '';
+		// Feature enabled: body is always a map; message is always a string
+		const bodyObj = log?.body as ILogBody;
+		if (!bodyObj) {
+			return '';
 		}
+		if (bodyObj.message) {
+			return bodyObj.message;
+		}
+		return JSON.stringify(bodyObj);
 	}, [isBodyJsonQueryEnabled, log?.body]);
 
 	const htmlBody = useMemo(

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/Logs/RawLogView/index.tsx

@@ -9,7 +9,10 @@ import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import {
+	getBodyDisplayString,
+	getSanitizedLogBody,
+} from 'container/LogDetailedView/utils';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -99,7 +102,7 @@ function RawLogView({
 		// Check if body is selected
 		const showBody = selectedFields.some((field) => field.name === 'body');
 		if (showBody) {
-			parts.push(`${attributesText} ${data.body}`);
+			parts.push(`${attributesText} ${getBodyDisplayString(data.body)}`);
 		} else {
 			parts.push(attributesText);
 		}

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -2,7 +2,10 @@ import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import {
+	getBodyDisplayString,
+	getSanitizedLogBody,
+} from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
@@ -87,7 +90,7 @@ export function useLogsTableColumns({
 			? {
 					id: 'body',
 					header: 'Body',
-					accessorFn: (log): string => log.body,
+					accessorFn: (log): string => getBodyDisplayString(log.body),
 					canBeHidden: false,
 					width: { default: '100%', min: 300 },
 					cell: ({ value, isActive }): ReactElement => (

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,8 @@ function OptionsMenu({
 					<Button
 						onClick={(): void => setIsFontSizeOptionsOpen(false)}
 						className="back-btn"
-						type="text"
+						variant="ghost"
+						color="secondary"
 					>
 						<ChevronLeft size={14} className="icon" />
 						<Typography.Text className="text">Select font size</Typography.Text>
@@ -235,7 +237,8 @@ function OptionsMenu({
 								setFontSizeValue(FontSize.SMALL);
 							}}
 							className="option-btn"
-							type="text"
+							variant="ghost"
+							color="secondary"
 						>
 							<Typography.Text className="text">{FontSize.SMALL}</Typography.Text>
 							{fontSizeValue === FontSize.SMALL && (
@@ -247,7 +250,8 @@ function OptionsMenu({
 								setFontSizeValue(FontSize.MEDIUM);
 							}}
 							className="option-btn"
-							type="text"
+							variant="ghost"
+							color="secondary"
 						>
 							<Typography.Text className="text">{FontSize.MEDIUM}</Typography.Text>
 							{fontSizeValue === FontSize.MEDIUM && (
@@ -259,7 +263,8 @@ function OptionsMenu({
 								setFontSizeValue(FontSize.LARGE);
 							}}
 							className="option-btn"
-							type="text"
+							variant="ghost"
+							color="secondary"
 						>
 							<Typography.Text className="text">{FontSize.LARGE}</Typography.Text>
 							{fontSizeValue === FontSize.LARGE && (
@@ -338,10 +343,11 @@ function OptionsMenu({
 						<div className="title">Font Size</div>
 						<Button
 							className="value"
-							type="text"
 							onClick={(): void => {
 								setIsFontSizeOptionsOpen(true);
 							}}
+							variant="ghost"
+							color="secondary"
 						>
 							<Typography.Text className="font-value">{fontSizeValue}</Typography.Text>
 							<ChevronRight size={14} className="icon" />
@@ -472,9 +478,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" color="secondary">
 									{currentToggleTagValue({ option: option.value })}
 								</Button>
 							)}
-							<Button type="text" className="toggle-btn">
+							<Button className="toggle-btn" variant="ghost" color="secondary">
 								Toggle
 							</Button>
 						</div>

frontend/src/components/NoAuthBanner/NoAuthBanner.module.scss

@@ -1,13 +0,0 @@
-.banner {
-	height: var(--spacing-20);
-
-	a {
-		color: var(--callout-warning-title);
-		text-decoration: underline;
-
-		&:hover {
-			color: var(--callout-warning-title);
-			opacity: 0.8;
-		}
-	}
-}

frontend/src/components/NoAuthBanner/NoAuthBanner.tsx

@@ -1,26 +0,0 @@
-import { PersistedAnnouncementBanner } from '@signozhq/ui/announcement-banner';
-
-import styles from './NoAuthBanner.module.scss';
-
-export function NoAuthBanner(): JSX.Element {
-	return (
-		<PersistedAnnouncementBanner
-			type="warning"
-			storageKey="no-auth-banner-v1"
-			testId="no-auth-banner"
-			className={styles.banner}
-		>
-			Impersonation mode: authentication is disabled. Anyone with access to this
-			instance has admin privileges.{' '}
-			<a
-				href="https://signoz.io/docs/manage/administrator-guide/configuration/no-auth-mode/"
-				target="_blank"
-				rel="noreferrer"
-			>
-				Learn more
-			</a>
-		</PersistedAnnouncementBanner>
-	);
-}
-
-export default NoAuthBanner;

frontend/src/components/NoAuthBanner/__tests__/NoAuthBanner.test.tsx

@@ -1,24 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import { NoAuthBanner } from '../NoAuthBanner';
-
-describe('NoAuthBanner', () => {
-	it('renders the no-auth message', () => {
-		render(<NoAuthBanner />);
-		expect(
-			screen.getByText(/Impersonation mode: authentication is disabled/i),
-		).toBeInTheDocument();
-	});
-
-	it('renders with the warning test id', () => {
-		render(<NoAuthBanner />);
-		expect(screen.getByTestId('no-auth-banner')).toBeInTheDocument();
-	});
-
-	it('renders a docs link that opens in a new tab', () => {
-		render(<NoAuthBanner />);
-		const link = screen.getByRole('link', { name: /learn more/i });
-		expect(link).toHaveAttribute('target', '_blank');
-		expect(link).toHaveAttribute('rel', 'noreferrer');
-	});
-});

frontend/src/components/NoAuthGuard/NoAuthGuard.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import {
-	TooltipRoot,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
-import { useAppContext } from 'providers/App/App';
-
-export const DEFAULT_NO_AUTH_MESSAGE = 'Not available in no-auth mode';
-
-interface NoAuthGuardProps {
-	children: React.ReactElement;
-	message?: string;
-	disabled?: boolean;
-	testId?: string;
-}
-
-export function NoAuthGuard({
-	children,
-	message = DEFAULT_NO_AUTH_MESSAGE,
-	disabled,
-	testId,
-}: NoAuthGuardProps): JSX.Element {
-	const { isNoAuthMode } = useAppContext();
-
-	if (!isNoAuthMode) {
-		return disabled ? React.cloneElement(children, { disabled: true }) : children;
-	}
-
-	const disabledChild = React.cloneElement(children, {
-		disabled: true,
-		style: { ...(children.props.style ?? {}), pointerEvents: 'none' },
-	});
-
-	return (
-		<TooltipProvider>
-			<TooltipRoot>
-				<TooltipTrigger asChild>
-					<span
-						data-no-auth-trigger
-						data-testid={testId}
-						style={{ display: 'inline-flex', cursor: 'not-allowed' }}
-					>
-						{disabledChild}
-					</span>
-				</TooltipTrigger>
-				<TooltipContent>{message}</TooltipContent>
-			</TooltipRoot>
-		</TooltipProvider>
-	);
-}

frontend/src/components/NoAuthGuard/__tests__/NoAuthGuard.test.tsx

@@ -1,99 +0,0 @@
-import React from 'react';
-import { render } from 'tests/test-utils';
-
-import { NoAuthGuard } from '..';
-
-describe('NoAuthGuard', () => {
-	it('renders children unchanged when isNoAuthMode is false', () => {
-		const { getByRole } = render(
-			<NoAuthGuard>
-				<button type="button">Action</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: false } },
-		);
-		expect(getByRole('button', { name: 'Action' })).not.toBeDisabled();
-	});
-
-	it('does not intercept onClick when isNoAuthMode is false', () => {
-		const handleClick = jest.fn();
-		const { getByRole } = render(
-			<NoAuthGuard>
-				<button type="button" onClick={handleClick}>
-					Action
-				</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: false } },
-		);
-		getByRole('button', { name: 'Action' }).click();
-		expect(handleClick).toHaveBeenCalledTimes(1);
-	});
-
-	it('disables children when isNoAuthMode is true', () => {
-		const { getByRole } = render(
-			<NoAuthGuard>
-				<button type="button">Action</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: true } },
-		);
-		expect(getByRole('button', { name: 'Action' })).toBeDisabled();
-	});
-
-	it('renders a tooltip trigger wrapper when isNoAuthMode is true', () => {
-		const { container } = render(
-			<NoAuthGuard>
-				<button type="button">Action</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: true } },
-		);
-		expect(
-			container.querySelector('span[data-no-auth-trigger]'),
-		).toBeInTheDocument();
-	});
-
-	it('blocks onClick when isNoAuthMode is true', () => {
-		const handleClick = jest.fn();
-		const { container } = render(
-			<NoAuthGuard>
-				<button type="button" onClick={handleClick}>
-					Action
-				</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: true } },
-		);
-		container
-			.querySelector('span[data-no-auth-trigger]')
-			?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-		expect(handleClick).not.toHaveBeenCalled();
-	});
-
-	it('overrides existing disabled prop — no-auth always wins', () => {
-		const { getByRole } = render(
-			<NoAuthGuard>
-				<button type="button" disabled={false}>
-					Action
-				</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: true } },
-		);
-		expect(getByRole('button', { name: 'Action' })).toBeDisabled();
-	});
-
-	it('sets pointerEvents none on child when isNoAuthMode is true', () => {
-		const { getByRole } = render(
-			<NoAuthGuard>
-				<button type="button">Action</button>
-			</NoAuthGuard>,
-			undefined,
-			{ appContextOverrides: { isNoAuthMode: true } },
-		);
-		expect(getByRole('button', { name: 'Action' })).toHaveStyle({
-			pointerEvents: 'none',
-		});
-	});
-});

frontend/src/components/NoAuthGuard/index.ts

@@ -1 +0,0 @@
-export { DEFAULT_NO_AUTH_MESSAGE, NoAuthGuard } from './NoAuthGuard';

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,17 @@ function QuerySearch({
 						>
 							{validation.isValid ? (
 								<Button
-									type="text"
-									icon={<CircleCheck size="md" />}
-									className="periscope-btn ghost"
+									variant="ghost"
+									color="secondary"
+									size="icon"
+									prefix={<CircleCheck size={14} />}
 								/>
 							) : (
 								<Button
-									type="text"
-									icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
-									className="periscope-btn ghost"
+									color="destructive"
+									variant="ghost"
+									size="icon"
+									prefix={<TriangleAlert size={14} />}
 								/>
 							)}
 						</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,16 @@ function TraceOperatorEditor({
 						>
 							{validation.isValid ? (
 								<Button
-									type="text"
-									icon={<CircleCheck size="md" />}
-									className="periscope-btn ghost"
+									variant="ghost"
+									color="secondary"
+									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" color="secondary">
 												{isSomeFilterPresentForCurrentAttribute
 													? currentFilterState[value] && !isMultipleValuesTrueForTheKey
 														? 'All'
 														: 'Only'
 													: 'Only'}
 											</Button>
-											<Button type="text" className="toggle-btn">
+											<Button className="toggle-btn" variant="ghost" color="secondary">
 												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,14 @@
 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 +33,11 @@ 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 +46,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/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -5,7 +5,6 @@ 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 { NoAuthGuard } from 'components/NoAuthGuard';
 import {
 	APIKeyCreatePermission,
 	buildSAAttachPermission,
@@ -126,19 +125,16 @@ function KeyFormPhase({
 						]}
 						enabled={!!accountId}
 					>
-						<NoAuthGuard testId="no-auth-create-key">
-							<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>
-						</NoAuthGuard>
+						<Button
+							type="submit"
+							form={FORM_ID}
+							variant="solid"
+							color="primary"
+							loading={isSubmitting}
+							disabled={!isValid}
+						>
+							Create Key
+						</Button>
 					</AuthZTooltip>
 				</div>
 			</div>

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -2,7 +2,6 @@ import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import { buildSADeletePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
@@ -89,17 +88,15 @@ function DeleteAccountModal(): JSX.Element {
 				checks={[buildSADeletePermission(accountId ?? '')]}
 				enabled={!!accountId}
 			>
-				<NoAuthGuard testId="no-auth-delete-account">
-					<Button
-						variant="solid"
-						color="destructive"
-						loading={isDeleting}
-						onClick={handleConfirm}
-					>
-						<Trash2 size={12} />
-						Delete
-					</Button>
-				</NoAuthGuard>
+				<Button
+					variant="solid"
+					color="destructive"
+					loading={isDeleting}
+					onClick={handleConfirm}
+				>
+					<Trash2 size={12} />
+					Delete
+				</Button>
 			</AuthZTooltip>
 		</div>
 	);

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -8,7 +8,6 @@ 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 { NoAuthGuard } from 'components/NoAuthGuard';
 import {
 	buildAPIKeyDeletePermission,
 	buildAPIKeyUpdatePermission,
@@ -175,12 +174,10 @@ function EditKeyForm({
 					]}
 					enabled={!!accountId && !!keyItem?.id}
 				>
-					<NoAuthGuard testId="no-auth-revoke-key">
-						<Button variant="link" color="destructive" onClick={onRevokeClick}>
-							<Trash2 size={12} />
-							Revoke Key
-						</Button>
-					</NoAuthGuard>
+					<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}>
@@ -191,19 +188,16 @@ function EditKeyForm({
 						checks={[buildAPIKeyUpdatePermission(keyItem?.id ?? '')]}
 						enabled={!!accountId && !!keyItem?.id}
 					>
-						<NoAuthGuard testId="no-auth-save-key">
-							<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>
-						</NoAuthGuard>
+						<Button
+							type="submit"
+							form={FORM_ID}
+							variant="solid"
+							color="primary"
+							loading={isSaving}
+							disabled={!isDirty}
+						>
+							Save Changes
+						</Button>
 					</AuthZTooltip>
 				</div>
 			</div>

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,9 +1,7 @@
 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 { DEFAULT_NO_AUTH_MESSAGE, NoAuthGuard } from 'components/NoAuthGuard';
-import { useAppContext } from 'providers/App/App';
+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';
@@ -35,7 +33,6 @@ interface KeysTabProps {
 interface BuildColumnsParams {
 	isDisabled: boolean;
 	accountId: string;
-	isNoAuthMode: boolean;
 	onRevokeClick: (keyId: string) => void;
 	handleformatLastObservedAt: (
 		lastObservedAt: Date | null | undefined,
@@ -56,7 +53,6 @@ function formatExpiry(expiresAt: number): JSX.Element {
 function buildColumns({
 	isDisabled,
 	accountId,
-	isNoAuthMode,
 	onRevokeClick,
 	handleformatLastObservedAt,
 }: BuildColumnsParams): ColumnsType<ServiceaccounttypesGettableFactorAPIKeyDTO> {
@@ -114,38 +110,28 @@ function buildColumns({
 				onClick: (e): void => e.stopPropagation(),
 				style: { cursor: 'default' },
 			}),
-			render: (_, record): JSX.Element => {
-				const tooltipTitle = isDisabled
-					? 'Service account disabled'
-					: isNoAuthMode
-						? DEFAULT_NO_AUTH_MESSAGE
-						: 'Revoke Key';
-				return (
-					<AuthZTooltip
-						checks={[
-							buildAPIKeyDeletePermission(record.id),
-							buildSADetachPermission(accountId),
-						]}
-						enabled={!isDisabled && !!accountId}
+			render: (_, record): JSX.Element => (
+				<AuthZTooltip
+					checks={[
+						buildAPIKeyDeletePermission(record.id),
+						buildSADetachPermission(accountId),
+					]}
+					enabled={!isDisabled && !!accountId}
+				>
+					<Button
+						variant="ghost"
+						size="sm"
+						color="destructive"
+						disabled={isDisabled}
+						onClick={(): void => {
+							onRevokeClick(record.id);
+						}}
+						className="keys-tab__revoke-btn"
 					>
-						<Tooltip title={tooltipTitle}>
-							<Button
-								variant="ghost"
-								size="sm"
-								color="destructive"
-								disabled={isDisabled || isNoAuthMode}
-								onClick={(e): void => {
-									e.stopPropagation();
-									onRevokeClick(record.id);
-								}}
-								className="keys-tab__revoke-btn"
-							>
-								<X size={12} />
-							</Button>
-						</Tooltip>
-					</AuthZTooltip>
-				);
-			},
+						<X size={12} />
+					</Button>
+				</AuthZTooltip>
+			),
 		},
 	];
 }
@@ -172,7 +158,6 @@ function KeysTab({
 		parseAsString.withDefault(''),
 	);
 	const editKey = keys.find((k) => k.id === editKeyId) ?? null;
-	const { isNoAuthMode } = useAppContext();
 
 	const handleformatLastObservedAt = useCallback(
 		(lastObservedAt: Date | null | undefined): string =>
@@ -192,17 +177,10 @@ function KeysTab({
 			buildColumns({
 				isDisabled,
 				accountId,
-				isNoAuthMode,
 				onRevokeClick,
 				handleformatLastObservedAt,
 			}),
-		[
-			isDisabled,
-			accountId,
-			isNoAuthMode,
-			onRevokeClick,
-			handleformatLastObservedAt,
-		],
+		[isDisabled, accountId, onRevokeClick, handleformatLastObservedAt],
 	);
 
 	if (isLoading) {
@@ -232,18 +210,16 @@ function KeysTab({
 					checks={[APIKeyCreatePermission, buildSAAttachPermission(accountId)]}
 					enabled={!isDisabled && !!accountId}
 				>
-					<NoAuthGuard testId="no-auth-add-first-key">
-						<Button
-							variant="link"
-							color="primary"
-							onClick={async (): Promise<void> => {
-								await setIsAddKeyOpen(true);
-							}}
-							disabled={isDisabled}
-						>
-							+ Add your first key
-						</Button>
-					</NoAuthGuard>
+					<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/RevokeKeyModal.tsx

@@ -2,7 +2,6 @@ import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import {
 	buildAPIKeyDeletePermission,
 	buildSADetachPermission,
@@ -53,17 +52,15 @@ export function RevokeKeyFooter({
 				]}
 				enabled={!!accountId && !!keyId}
 			>
-				<NoAuthGuard testId="no-auth-confirm-revoke">
-					<Button
-						variant="solid"
-						color="destructive"
-						loading={isRevoking}
-						onClick={onConfirm}
-					>
-						<Trash2 size={12} />
-						Revoke Key
-					</Button>
-				</NoAuthGuard>
+				<Button
+					variant="solid"
+					color="destructive"
+					loading={isRevoking}
+					onClick={onConfirm}
+				>
+					<Trash2 size={12} />
+					Revoke Key
+				</Button>
 			</AuthZTooltip>
 		</>
 	);

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -49,7 +49,6 @@ import APIError from 'types/api/error';
 import { toAPIError } from 'utils/errorUtils';
 
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
-import { NoAuthGuard } from 'components/NoAuthGuard';
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
 import KeysTab from './KeysTab';
@@ -437,20 +436,18 @@ function ServiceAccountDrawer({
 						]}
 						enabled={!isDeleted && !!selectedAccountId}
 					>
-						<NoAuthGuard testId="no-auth-add-key">
-							<Button
-								variant="outlined"
-								size="sm"
-								color="secondary"
-								disabled={isDeleted}
-								onClick={(): void => {
-									void setIsAddKeyOpen(true);
-								}}
-							>
-								<Plus size={12} />
-								Add Key
-							</Button>
-						</NoAuthGuard>
+						<Button
+							variant="outlined"
+							size="sm"
+							color="secondary"
+							disabled={isDeleted}
+							onClick={(): void => {
+								void setIsAddKeyOpen(true);
+							}}
+						>
+							<Plus size={12} />
+							Add Key
+						</Button>
 					</AuthZTooltip>
 				)}
 			</div>
@@ -553,18 +550,16 @@ function ServiceAccountDrawer({
 							checks={[buildSADeletePermission(selectedAccountId ?? '')]}
 							enabled={!!selectedAccountId}
 						>
-							<NoAuthGuard testId="no-auth-delete-service-account">
-								<Button
-									variant="link"
-									color="destructive"
-									onClick={(): void => {
-										void setIsDeleteOpen(true);
-									}}
-								>
-									<Trash2 size={12} />
-									Delete Service Account
-								</Button>
-							</NoAuthGuard>
+							<Button
+								variant="link"
+								color="destructive"
+								onClick={(): void => {
+									void setIsDeleteOpen(true);
+								}}
+							>
+								<Trash2 size={12} />
+								Delete Service Account
+							</Button>
 						</AuthZTooltip>
 					)}
 					{!isDeleted && (
@@ -573,17 +568,15 @@ function ServiceAccountDrawer({
 								<X size={14} />
 								Cancel
 							</Button>
-							<NoAuthGuard testId="no-auth-save-service-account">
-								<Button
-									variant="solid"
-									color="primary"
-									loading={isSaving}
-									disabled={!isDirty}
-									onClick={handleSave}
-								>
-									Save Changes
-								</Button>
-							</NoAuthGuard>
+							<Button
+								variant="solid"
+								color="primary"
+								loading={isSaving}
+								disabled={!isDirty}
+								onClick={handleSave}
+							>
+								Save Changes
+							</Button>
 						</div>
 					)}
 				</>

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.no-auth.test.tsx

@@ -1,50 +0,0 @@
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { screen, waitFor } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import AddKeyModal from '../AddKeyModal';
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
-jest.mock('react-use', () => ({
-	useCopyToClipboard: (): [
-		{ value: undefined; error: undefined },
-		jest.Mock,
-	] => [{ value: undefined, error: undefined }, jest.fn()],
-}));
-
-function renderModal(
-	searchParams: Record<string, string> = {
-		account: 'sa-1',
-		'add-key': 'true',
-	},
-): ReturnType<typeof renderWithNoAuth> {
-	return renderWithNoAuth(
-		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
-			<AddKeyModal />
-		</NuqsTestingAdapter>,
-	);
-}
-
-describe('AddKeyModal — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders no-auth guard on Create Key button when modal is open', async () => {
-		renderModal();
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-auth-create-key')).toBeInTheDocument();
-		});
-	});
-
-	it('does not render no-auth guard when modal is closed', () => {
-		renderModal({ account: 'sa-1' });
-
-		expect(screen.queryByTestId('no-auth-create-key')).not.toBeInTheDocument();
-	});
-});

frontend/src/components/ServiceAccountDrawer/__tests__/DeleteAccountModal.no-auth.test.tsx

@@ -1,54 +0,0 @@
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { screen, waitFor } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import DeleteAccountModal from '../DeleteAccountModal';
-
-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() },
-}));
-
-function renderModal(
-	searchParams: Record<string, string> = {
-		account: 'sa-1',
-		'delete-sa': 'true',
-	},
-): ReturnType<typeof renderWithNoAuth> {
-	return renderWithNoAuth(
-		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
-			<DeleteAccountModal />
-		</NuqsTestingAdapter>,
-	);
-}
-
-describe('DeleteAccountModal — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders no-auth guard on Delete button when modal is open', async () => {
-		renderModal();
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-auth-delete-account')).toBeInTheDocument();
-		});
-	});
-
-	it('does not render no-auth guard when modal is closed', () => {
-		renderModal({ account: 'sa-1' });
-
-		expect(
-			screen.queryByTestId('no-auth-delete-account'),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/components/ServiceAccountDrawer/__tests__/EditKeyModal.no-auth.test.tsx

@@ -1,64 +0,0 @@
-import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { screen, waitFor } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-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() },
-}));
-
-const mockKey: ServiceaccounttypesGettableFactorAPIKeyDTO = {
-	id: 'key-1',
-	name: 'Test Key',
-	expiresAt: 0,
-	lastObservedAt: null as unknown as string,
-	serviceAccountId: 'sa-1',
-};
-
-function renderModal(
-	keyItem: ServiceaccounttypesGettableFactorAPIKeyDTO | null = mockKey,
-	searchParams: Record<string, string> = {
-		account: 'sa-1',
-		'edit-key': 'key-1',
-	},
-): ReturnType<typeof renderWithNoAuth> {
-	return renderWithNoAuth(
-		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
-			<EditKeyModal keyItem={keyItem} />
-		</NuqsTestingAdapter>,
-	);
-}
-
-describe('EditKeyModal — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders no-auth guards on Revoke Key and Save Changes buttons', async () => {
-		renderModal();
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-auth-revoke-key')).toBeInTheDocument();
-			expect(screen.getByTestId('no-auth-save-key')).toBeInTheDocument();
-		});
-	});
-
-	it('does not render no-auth guards when modal is closed', () => {
-		renderModal(null, { account: 'sa-1' });
-
-		expect(screen.queryByTestId('no-auth-revoke-key')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('no-auth-save-key')).not.toBeInTheDocument();
-	});
-});

frontend/src/components/ServiceAccountDrawer/__tests__/RevokeKeyModal.no-auth.test.tsx

@@ -1,54 +0,0 @@
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { screen, waitFor } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-import RevokeKeyModal from '../RevokeKeyModal';
-
-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() },
-}));
-
-function renderModal(
-	searchParams: Record<string, string> = {
-		account: 'sa-1',
-		'revoke-key': 'key-1',
-	},
-): ReturnType<typeof renderWithNoAuth> {
-	return renderWithNoAuth(
-		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
-			<RevokeKeyModal />
-		</NuqsTestingAdapter>,
-	);
-}
-
-describe('RevokeKeyModal — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders no-auth guard on confirm Revoke Key button when modal is open', async () => {
-		renderModal();
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-auth-confirm-revoke')).toBeInTheDocument();
-		});
-	});
-
-	it('does not render no-auth guard when modal is closed', () => {
-		renderModal({ account: 'sa-1' });
-
-		expect(
-			screen.queryByTestId('no-auth-confirm-revoke'),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/components/ServiceAccountDrawer/__tests__/ServiceAccountDrawer.no-auth.test.tsx

@@ -1,137 +0,0 @@
-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 { screen, waitFor } from 'tests/test-utils';
-import { renderWithNoAuth } from 'tests/no-auth-test-utils';
-
-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_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 renderWithNoAuth> {
-	return renderWithNoAuth(
-		<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_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 — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		setupBaseHandlers();
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	it('renders no-auth guards in the Overview tab footer', async () => {
-		renderDrawer();
-
-		await waitFor(() => {
-			expect(
-				screen.getByTestId('no-auth-delete-service-account'),
-			).toBeInTheDocument();
-			expect(
-				screen.getByTestId('no-auth-save-service-account'),
-			).toBeInTheDocument();
-		});
-	});
-
-	it('renders no-auth guard on Add Key button in Keys tab header', async () => {
-		renderDrawer({ account: 'sa-1', tab: 'keys' });
-
-		await waitFor(() => {
-			expect(screen.getByTestId('no-auth-add-key')).toBeInTheDocument();
-		});
-	});
-
-	it('does not render no-auth guards when drawer is closed', () => {
-		renderDrawer({});
-
-		expect(
-			screen.queryByTestId('no-auth-delete-service-account'),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByTestId('no-auth-save-service-account'),
-		).not.toBeInTheDocument();
-	});
-});

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>

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -626,6 +626,10 @@ function TanStackTableInner<TData>(
 										onChange={(value): void => {
 											setLimit(+value);
 											pagination.onLimitChange?.(+value);
+											if (page !== 1) {
+												setPage(1);
+												pagination.onPageChange?.(1);
+											}
 										}}
 										items={paginationPageSizeItems}
 									/>

frontend/src/components/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -401,6 +401,62 @@ describe('TanStackTableView Integration', () => {
 				expect(onLimitChange).toHaveBeenCalledWith(20);
 			});
 		});
+
+		it('resets page to 1 when limit changes', async () => {
+			const user = userEvent.setup();
+			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+			const onPageChange = jest.fn();
+
+			renderTanStackTable({
+				props: {
+					pagination: { total: 100, defaultPage: 1, defaultLimit: 10, onPageChange },
+					enableQueryParams: true,
+				},
+				onUrlUpdate,
+			});
+
+			await waitFor(() => {
+				expect(screen.getByRole('navigation')).toBeInTheDocument();
+			});
+
+			// Navigate to page 2
+			const nav = screen.getByRole('navigation');
+			const page2 = Array.from(nav.querySelectorAll('button')).find(
+				(btn) => btn.textContent?.trim() === '2',
+			);
+			if (!page2) {
+				throw new Error('Page 2 button not found in pagination');
+			}
+			await user.click(page2);
+
+			await waitFor(() => {
+				const lastPage = onUrlUpdate.mock.calls
+					.map((call) => call[0].searchParams.get('page'))
+					.filter(Boolean)
+					.pop();
+				expect(lastPage).toBe('2');
+			});
+
+			// Change page size
+			const comboboxTrigger = document.querySelector(
+				'button[aria-haspopup="dialog"]',
+			) as HTMLElement;
+			await user.click(comboboxTrigger);
+
+			const option20 = await screen.findByRole('option', { name: '20' });
+			await user.click(option20);
+
+			// Verify page reset to 1 (nuqs removes default values from URL)
+			await waitFor(() => {
+				const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1];
+				const lastPage = lastCall[0].searchParams.get('page');
+				expect(lastPage === '1' || lastPage === null).toBe(true);
+				expect(lastCall[0].searchParams.get('limit')).toBe('20');
+			});
+
+			// Verify onPageChange callback was called with 1
+			expect(onPageChange).toHaveBeenCalledWith(1);
+		});
 	});
 
 	describe('sorting', () => {

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { ChevronDown, Globe } from '@signozhq/icons';
-import { Button, Dropdown } from 'antd';
+import { Dropdown } from 'antd';
+import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {
 	timePreferance,
@@ -40,7 +41,7 @@ function TimePreference({
 			className="time-selection-target"
 			trigger={['click']}
 		>
-			<Button>
+			<Button variant="outlined" color="secondary">
 				<div className="button-selected-text">
 					<Globe size={14} />
 					<Typography.Text className="selected-value">

frontend/src/constants/routes.ts

@@ -29,7 +29,6 @@ const ROUTES = {
 	ALERTS_NEW: '/alerts/new',
 	ALERT_HISTORY: '/alerts/history',
 	ALERT_OVERVIEW: '/alerts/overview',
-	ALERT_TYPE_SELECTION: '/alerts/type-selection',
 	ALL_CHANNELS: '/settings/channels',
 	CHANNELS_NEW: '/settings/channels/new',
 	CHANNELS_EDIT: '/settings/channels/edit/:channelId',

frontend/src/container/AIAssistant/AIAssistantModal/AIAssistantModal.tsx

@@ -161,6 +161,7 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title={showHistory ? 'Back to chat' : 'Conversations'}>
 								<Button
 									variant="ghost"
+									color="secondary"
 									size="icon"
 									onClick={(): void => setShowHistory((v) => !v)}
 									aria-label="Toggle conversations"
@@ -173,6 +174,7 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title="New conversation">
 								<Button
 									variant="ghost"
+									color="secondary"
 									size="icon"
 									onClick={handleNew}
 									aria-label="New conversation"
@@ -184,6 +186,7 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title="Open full screen">
 								<Button
 									variant="ghost"
+									color="secondary"
 									size="icon"
 									onClick={handleExpand}
 									disabled={!activeConversationId}
@@ -196,6 +199,7 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title="Minimize to side panel">
 								<Button
 									variant="ghost"
+									color="secondary"
 									size="icon"
 									onClick={handleMinimize}
 									aria-label="Minimize to side panel"
@@ -207,6 +211,7 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title="Close">
 								<Button
 									variant="ghost"
+									color="secondary"
 									size="icon"
 									onClick={closeModal}
 									aria-label="Close"

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx

@@ -738,6 +738,7 @@ export default function ChatInput({
 							<span className={styles.attachmentName}>{f.name}</span>
 							<Button
 								variant="ghost"
+								color="secondary"
 								size="icon"
 								className={styles.attachmentRemove}
 								onClick={(): void => removeFile(f.uid)}
@@ -1007,6 +1008,7 @@ export default function ChatInput({
 							<TooltipSimple title="Voice input">
 								<Button
 									variant="ghost"
+									color="secondary"
 									size="icon"
 									onClick={(): void => startVoiceInput('button')}
 									disabled={disabled}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -1,7 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import history from 'lib/history';
 import { ArrowRight } from '@signozhq/icons';
@@ -11,6 +10,7 @@ import { TopContributorsCardProps } from './types';
 import ViewAllDrawer from './ViewAllDrawer';
 
 import './TopContributorsCard.styles.scss';
+import { Button } from '@signozhq/ui/button';
 
 function TopContributorsCard({
 	topContributorsData,
@@ -52,7 +52,12 @@ function TopContributorsCard({
 				<div className="top-contributors-card__header">
 					<div className="title">top contributors</div>
 					{topContributorsData.length > 3 && (
-						<Button type="text" className="view-all" onClick={toggleViewAllDrawer}>
+						<Button
+							className="view-all"
+							onClick={toggleViewAllDrawer}
+							variant="ghost"
+							color="secondary"
+						>
 							<div className="label">View all</div>
 							<div className="icon">
 								<ArrowRight

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
-import { Button } from 'antd';
 import type { ColumnsType } from 'antd/lib/table';
 import { ResizeTable } from 'components/ResizeTable';
 import ROUTES from 'constants/routes';
@@ -12,6 +11,7 @@ import { useAppContext } from 'providers/App/App';
 import { Channels } from 'types/api/channels/getAll';
 
 import Delete from './Delete';
+import { Button } from '@signozhq/ui/button';
 
 function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
@@ -51,7 +51,7 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 			width: 80,
 			render: (id: string): JSX.Element => (
 				<>
-					<Button onClick={(): void => onClickEditHandler(id)} type="link">
+					<Button onClick={(): void => onClickEditHandler(id)} variant="link">
 						{t('column_channel_edit')}
 					</Button>
 					<Delete id={id} notifications={notifications} />

frontend/src/container/AllAlertChannels/Delete.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
-import { Button } from 'antd';
 import type { NotificationInstance } from 'antd/es/notification/interface';
 import deleteChannel from 'api/channels/delete';
 import APIError from 'types/api/error';
+import { Button } from '@signozhq/ui/button';
 
 function Delete({ notifications, id }: DeleteProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
@@ -38,8 +38,8 @@ function Delete({ notifications, id }: DeleteProps): JSX.Element {
 		<Button
 			loading={loading}
 			disabled={loading}
-			type="link"
 			onClick={onClickHandler}
+			variant="link"
 		>
 			Delete
 		</Button>

frontend/src/container/AllError/index.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -5,7 +6,7 @@ import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
-import { Button, Card, Input, Space, TableProps, Tooltip, Flex } from 'antd';
+import { Card, Input, Space, TableProps, Tooltip, Flex } from 'antd';
 import { Search } from '@signozhq/icons';
 import type { ColumnType, TablePaginationConfig } from 'antd/es/table';
 import type { FilterValue, SorterResult } from 'antd/es/table/interface';
@@ -266,9 +267,8 @@ function AllErrors(): JSX.Element {
 						onPressEnter={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
 					/>
 					<Button
-						type="primary"
 						onClick={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
-						size="small"
+						size="sm"
 					>
 						<Flex align="center" justify="center" gap={4}>
 							<Search size="md" />

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.styles.scss

@@ -706,7 +706,7 @@
 	.views-tabs {
 		color: var(--l2-foreground);
 
-		.ant-btn {
+		button {
 			box-shadow: none;
 			position: relative;
 		}