test(api-monitoring): mock /fields/keys for quick filters settings stories (#12980)

<!--A few plain bullets saying what changed and why, for a reviewer
skimming it - not a wall of text, not a restatement of the diff, not
generated boilerplate.-->
#### Description

Add missing mocks for stories on api monitoring after
https://github.com/SigNoz/signoz/pull/12968

.github/CODEOWNERS

@@ -200,6 +200,15 @@ go.mod @therealpandey
 /frontend/src/container/ListAlertRules/ @SigNoz/pulse-frontend
 /frontend/src/container/TriggeredAlerts/ @SigNoz/pulse-frontend
 /frontend/src/container/AnomalyAlertEvaluationView/ @SigNoz/pulse-frontend
+/frontend/src/container/RoutingPolicies/ @SigNoz/pulse-frontend
+/frontend/src/components/AlertBreadcrumb/ @SigNoz/pulse-frontend
+/frontend/src/container/EditRules/ @SigNoz/pulse-frontend
+/frontend/src/components/AlertDetailsFilters/ @SigNoz/pulse-frontend
+/frontend/src/components/Alerts/ @SigNoz/pulse-frontend
+/frontend/src/hooks/routingPolicies/ @SigNoz/pulse-frontend
+/frontend/src/types/api/alerts/ @SigNoz/pulse-frontend
+/frontend/src/providers/Alert.tsx @SigNoz/pulse-frontend
+/frontend/src/constants/alerts.ts @SigNoz/pulse-frontend
 
 ## Notification Channels
 /frontend/src/pages/ChannelsEdit/ @SigNoz/pulse-frontend
@@ -207,6 +216,8 @@ go.mod @therealpandey
 /frontend/src/container/AllAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/CreateAlertChannels/ @SigNoz/pulse-frontend
 /frontend/src/container/EditAlertChannels/ @SigNoz/pulse-frontend
+/frontend/src/container/FormAlertChannels/ @SigNoz/pulse-frontend
+/frontend/src/hooks/notificationChannels/ @SigNoz/pulse-frontend
 
 ## OpenAPI Schema - Generated
 /frontend/src/api/generated/services/ @therealpandey @vikrantgupta25 @srikanthccv

docs/contributing/go/handler.md

@@ -179,6 +179,7 @@ The `handler.New` function ties the HTTP handler to OpenAPI metadata via `OpenAP
 - **SuccessStatusCode**: The HTTP status for successful responses (for example, `http.StatusOK`, `http.StatusCreated`, `http.StatusNoContent`).
 - **ErrorStatusCodes**: Additional error status codes beyond the standard ones automatically added by `handler.New`.
 - **SecuritySchemes**: Auth mechanisms and scopes required by the operation.
+- **Stability**: Maturity marker (`handler.StabilityDevelopment`, `handler.StabilityAlpha`, `handler.StabilityBeta`, `handler.StabilityStable`, the OpenTelemetry Collector levels) emitted as the `x-signoz-stability` extension on every operation. Unset is emitted as `alpha`.
 
 The generic handler:
 

ee/sqlstore/postgressqlstore/formatter.go

@@ -23,6 +23,15 @@ func (f *formatter) JSONExtractString(column, path string) []byte {
 	return append(f.TextToJsonColumn(column), ops...)
 }
 
+func (f *formatter) JSONExtractMapValue(column, mapField, key string) []byte {
+	sql := f.TextToJsonColumn(column)
+	sql = append(sql, "->"...)
+	sql = schema.Append(f.bunf, sql, mapField)
+	sql = append(sql, "->>"...)
+	sql = schema.Append(f.bunf, sql, key)
+	return sql
+}
+
 func (f *formatter) JSONType(column, path string) []byte {
 	var sql []byte
 	sql = append(sql, "jsonb_typeof("...)

ee/sqlstore/postgressqlstore/formatter_test.go

@@ -55,6 +55,67 @@ func TestJSONExtractString(t *testing.T) {
 	}
 }
 
+func TestJSONExtractMapValue(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		mapField string
+		key      string
+		expected string
+	}{
+		{
+			name:     "PlainKey",
+			column:   "data",
+			mapField: "labels",
+			key:      "team",
+			expected: `"data"::jsonb->'labels'->>'team'`,
+		},
+		{
+			name:     "DottedKey_OneMapEntry",
+			column:   "data",
+			mapField: "labels",
+			key:      "k8s.cluster",
+			expected: `"data"::jsonb->'labels'->>'k8s.cluster'`,
+		},
+		{
+			name:     "SingleQuoteInKey_Doubled",
+			column:   "data",
+			mapField: "labels",
+			key:      "o'brien",
+			expected: `"data"::jsonb->'labels'->>'o''brien'`,
+		},
+		{
+			name:     "BackslashInKey_Literal",
+			column:   "data",
+			mapField: "labels",
+			key:      `a\b`,
+			expected: `"data"::jsonb->'labels'->>'a\b'`,
+		},
+		{
+			name:     "DoubleQuoteInKey_Literal",
+			column:   "data",
+			mapField: "labels",
+			key:      `a"b`,
+			expected: `"data"::jsonb->'labels'->>'a"b'`,
+		},
+		{
+			name:     "QualifiedColumn",
+			column:   "rule.data",
+			mapField: "labels",
+			key:      "severity",
+			expected: `"rule"."data"::jsonb->'labels'->>'severity'`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got := string(f.JSONExtractMapValue(tt.column, tt.mapField, tt.key))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
 func TestJSONType(t *testing.T) {
 	tests := []struct {
 		name     string

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

@@ -41,6 +41,8 @@ import type {
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
 	ListRules200,
+	ListRulesV3200,
+	ListRulesV3Params,
 	PatchRuleByID200,
 	PatchRuleByIDPathParameters,
 	RenderErrorResponseDTO,
@@ -73,7 +75,8 @@ const withQueryKey = <T extends object, K>(
 };
 
 /**
- * This endpoint lists all alert rules with their current evaluation state
+ * This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.
+ * @deprecated
  * @summary List alert rules
  */
 export const listRules = (signal?: AbortSignal) => {
@@ -115,6 +118,7 @@ export type ListRulesQueryResult = NonNullable<
 export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary List alert rules
  */
 
@@ -134,6 +138,7 @@ export function useListRules<
 }
 
 /**
+ * @deprecated
  * @summary List alert rules
  */
 export const invalidateListRules = async (
@@ -1388,3 +1393,97 @@ export const useTestRule = <
 > => {
 	return useMutation(getTestRuleMutationOptions(options));
 };
+/**
+ * Returns a page of alert rules with their current evaluation state, trimmed to the fields the list page renders. Supports a filter DSL (`query`), a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). In the filter DSL, a non-reserved key is matched as a rule label directly (`team = infra`); a key that collides with a reserved keyword matches either interpretation (negative operators exclude both), and `labels.<key>` targets only the label. The response also carries the org's label pairs and the reserved filter keys for building filter suggestions.
+ * @summary List alert rules (v3)
+ */
+export const listRulesV3 = (
+	params?: ListRulesV3Params,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListRulesV3200>({
+		url: `/api/v3/rules`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getListRulesV3QueryKey = (params?: ListRulesV3Params) => {
+	return [`/api/v3/rules`, ...(params ? [params] : [])] as const;
+};
+
+export const getListRulesV3QueryOptions = <
+	TData = Awaited<ReturnType<typeof listRulesV3>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListRulesV3Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listRulesV3>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListRulesV3QueryKey(params);
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRulesV3>>> = ({
+		signal,
+	}) => listRulesV3(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listRulesV3>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListRulesV3QueryResult = NonNullable<
+	Awaited<ReturnType<typeof listRulesV3>>
+>;
+export type ListRulesV3QueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List alert rules (v3)
+ */
+
+export function useListRulesV3<
+	TData = Awaited<ReturnType<typeof listRulesV3>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListRulesV3Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listRulesV3>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListRulesV3QueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary List alert rules (v3)
+ */
+export const invalidateListRulesV3 = async (
+	queryClient: QueryClient,
+	params?: ListRulesV3Params,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListRulesV3QueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};

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

@@ -10188,6 +10188,99 @@ export interface RuletypesGettableTestRuleDTO {
 	message?: string;
 }
 
+export interface RuletypesLabelPairDTO {
+	/**
+	 * @type string
+	 */
+	key: string;
+	/**
+	 * @type string
+	 */
+	value: string;
+}
+
+export enum RuletypesListOrderDTO {
+	asc = 'asc',
+	desc = 'desc',
+}
+export enum RuletypesListSortDTO {
+	updated_at = 'updated_at',
+	created_at = 'created_at',
+	name = 'name',
+	state = 'state',
+	severity = 'severity',
+}
+export type RuletypesListableRuleDTOLabels = { [key: string]: string };
+
+export enum RuletypesRuleTypeDTO {
+	threshold_rule = 'threshold_rule',
+	promql_rule = 'promql_rule',
+	anomaly_rule = 'anomaly_rule',
+}
+export interface RuletypesListableRuleDTO {
+	/**
+	 * @type string
+	 */
+	alert: string;
+	alertType: RuletypesAlertTypeDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type boolean
+	 */
+	disabled?: boolean;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type object
+	 */
+	labels?: RuletypesListableRuleDTOLabels;
+	ruleType: RuletypesRuleTypeDTO;
+	state: RuletypesAlertStateDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
+export interface RuletypesListableRulesDTO {
+	/**
+	 * @type array
+	 */
+	labels: RuletypesLabelPairDTO[];
+	/**
+	 * @type array
+	 */
+	reservedKeywords: string[];
+	/**
+	 * @type array
+	 */
+	rules: RuletypesListableRuleDTO[];
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	total: number;
+}
+
 export interface RuletypesRenotifyDTO {
 	/**
 	 * @type array,null
@@ -10284,11 +10377,6 @@ export interface RuletypesRuleConditionDTO {
 	thresholds?: RuletypesRuleThresholdDataDTO;
 }
 
-export enum RuletypesRuleTypeDTO {
-	threshold_rule = 'threshold_rule',
-	promql_rule = 'promql_rule',
-	anomaly_rule = 'anomaly_rule',
-}
 export interface RuletypesPostableRuleDTO {
 	/**
 	 * @type string
@@ -14189,6 +14277,45 @@ export type GetMetricDashboardsV2200 = {
 	status: string;
 };
 
+export type ListRulesV3Params = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	query?: string;
+	/**
+	 * @type array
+	 * @description undefined
+	 */
+	states?: string[];
+	/**
+	 * @description undefined
+	 */
+	sort?: RuletypesListSortDTO;
+	/**
+	 * @description undefined
+	 */
+	order?: RuletypesListOrderDTO;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	limit?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	offset?: number;
+};
+
+export type ListRulesV3200 = {
+	data: RuletypesListableRulesDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetFlamegraphPathParameters = {
 	traceID: string;
 };

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx

@@ -26,7 +26,6 @@ function BreadcrumbItem({
 
 	return (
 		<Button
-			size="md"
 			variant="ghost"
 			color="secondary"
 			className={styles.item}

frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.tsx

@@ -34,23 +34,21 @@ function ErrorEmptyState({
 			</div>
 			<div className={styles.actions}>
 				<Button
-					size="md"
 					variant="solid"
 					color="secondary"
 					prefix={<LifeBuoy size={14} />}
 					onClick={onContactSupport}
-					testId="error-contact-support-button"
+					data-testid="error-contact-support-button"
 				>
 					Contact Support
 				</Button>
 				{onRefresh && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						testId="error-refresh-button"
+						data-testid="error-refresh-button"
 					>
 						Refresh
 					</Button>

frontend/src/components/Alerts/LabelColumn/LabelColumn.tsx

@@ -1,7 +1,11 @@
 import { Copy } from '@signozhq/icons';
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import {
+	TooltipContent,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 
@@ -12,7 +16,20 @@ import { BADGE_GAP, estimateBadgeWidth, OVERFLOW_BADGE_WIDTH } from './utils';
 
 export interface LabelColumnProps {
 	labels: string[];
-	color?: BadgeColorType;
+	color?:
+		| 'primary'
+		| 'secondary'
+		| 'success'
+		| 'error'
+		| 'warning'
+		| 'robin'
+		| 'forest'
+		| 'amber'
+		| 'sienna'
+		| 'cherry'
+		| 'sakura'
+		| 'aqua'
+		| 'vanilla';
 	value?: { [key: string]: string };
 }
 
@@ -87,10 +104,20 @@ function LabelColumn({
 				<LabelTag key={label} label={label} color={color} value={value?.[label]} />
 			))}
 			{remainingLabels.length > 0 && (
-				<Tooltip
-					side="bottom"
-					align="end"
-					title={
+				<TooltipRoot>
+					<TooltipTrigger asChild>
+						<span>
+							<Badge
+								color={color}
+								className={styles.overflowBadge}
+								variant="outline"
+								data-testid="label-overflow-badge"
+							>
+								+{remainingLabels.length}
+							</Badge>
+						</span>
+					</TooltipTrigger>
+					<TooltipContent side="bottom" align="end">
 						<div className={styles.tooltipContent}>
 							<span>
 								{remainingLabels
@@ -113,19 +140,8 @@ function LabelColumn({
 								<Copy size={12} />
 							</button>
 						</div>
-					}
-				>
-					<span>
-						<Badge
-							color={color}
-							className={styles.overflowBadge}
-							variant="outlined"
-							testId="label-overflow-badge"
-						>
-							+{remainingLabels.length}
-						</Badge>
-					</span>
-				</Tooltip>
+					</TooltipContent>
+				</TooltipRoot>
 			)}
 		</div>
 	);

frontend/src/components/Alerts/LabelColumn/LabelTag.tsx

@@ -1,14 +1,31 @@
 import { Copy } from '@signozhq/icons';
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import {
+	TooltipContent,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
 import { useCopyToClipboard } from 'react-use';
 
 import styles from './LabelTag.module.scss';
 
 export interface LabelTagProps {
 	label: string;
-	color?: BadgeColorType;
+	color?:
+		| 'primary'
+		| 'secondary'
+		| 'success'
+		| 'error'
+		| 'warning'
+		| 'robin'
+		| 'forest'
+		| 'amber'
+		| 'sienna'
+		| 'cherry'
+		| 'sakura'
+		| 'aqua'
+		| 'vanilla';
 	value?: string;
 }
 
@@ -24,8 +41,20 @@ function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
 	};
 
 	return (
-		<Tooltip
-			title={
+		<TooltipRoot>
+			<TooltipTrigger asChild>
+				<span>
+					<Badge
+						color={color}
+						className={styles.labelBadge}
+						variant="outline"
+						data-testid={`label-tag-${label}`}
+					>
+						<span className={styles.labelValue}>{displayText}</span>
+					</Badge>
+				</span>
+			</TooltipTrigger>
+			<TooltipContent>
 				<div className={styles.tooltipContent}>
 					<span>{displayText}</span>
 					<button
@@ -37,19 +66,8 @@ function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
 						<Copy size={12} />
 					</button>
 				</div>
-			}
-		>
-			<span>
-				<Badge
-					color={color ?? 'secondary'}
-					className={styles.labelBadge}
-					variant="outlined"
-					testId={`label-tag-${label}`}
-				>
-					<span className={styles.labelValue}>{displayText}</span>
-				</Badge>
-			</span>
-		</Tooltip>
+			</TooltipContent>
+		</TooltipRoot>
 	);
 }
 

frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.tsx

@@ -30,23 +30,21 @@ function NoResultsEmptyState({
 			<div className={styles.actions}>
 				{onClear && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						onClick={onClear}
-						testId="no-results-clear-button"
+						data-testid="no-results-clear-button"
 					>
 						{clearButtonText}
 					</Button>
 				)}
 				{onRefresh && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						testId="no-results-refresh-button"
+						data-testid="no-results-refresh-button"
 					>
 						Refresh
 					</Button>

frontend/src/components/Alerts/constants.ts

@@ -1,4 +1,4 @@
-import type { BadgeColorType } from '@signozhq/ui/badge';
+import type { BadgeColor } from '@signozhq/ui/badge';
 
 export const STATE_ORDER = ['firing', 'pending', 'inactive', 'disabled'];
 export const SEVERITY_ORDER = ['critical', 'error', 'warning', 'info'];
@@ -24,9 +24,9 @@ export const SEVERITY_COLORS: Record<string, string> = {
 	info: 'var(--bg-robin-500)',
 };
 
-export const SEVERITY_BADGE_COLORS: Record<string, BadgeColorType> = {
-	critical: 'danger',
-	error: 'danger',
+export const SEVERITY_BADGE_COLORS: Record<string, BadgeColor> = {
+	critical: 'error',
+	error: 'error',
 	warning: 'warning',
 	info: 'primary',
 };

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -22,12 +22,11 @@ function AuthHeader(): JSX.Element {
 				<span className="auth-header-logo-text">SigNoz</span>
 			</div>
 			<Button
-				size="md"
 				className="auth-header-help-button"
 				prefix={<LifeBuoy size={12} />}
 				onClick={handleGetHelp}
 				variant="solid"
-				color="secondary"
+				color="none"
 			>
 				Get Help
 			</Button>

frontend/src/components/Badges/Badges.tsx

@@ -48,22 +48,14 @@ function Badges({ tags, setTags }: AddTagsProps): JSX.Element {
 		<div className="tags-container">
 			{tags.map<React.ReactNode>((tag) => (
 				<Badge
-					variant="solid"
 					key={tag}
-					color="secondary"
+					color="vanilla"
 					style={{ userSelect: 'none' }}
-					suffix={
-						<button
-							type="button"
-							aria-label={`Remove ${tag}`}
-							onClick={(e): void => {
-								e.preventDefault();
-								handleClose(tag);
-							}}
-						>
-							<X size={12} />
-						</button>
-					}
+					closable
+					onClose={(e): void => {
+						e.preventDefault();
+						handleClose(tag);
+					}}
 				>
 					{tag}
 				</Badge>

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx

@@ -4,7 +4,7 @@ import {
 	CloudintegrationtypesCollectedMetricDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { BarChart, Info, ScrollText } from '@signozhq/icons';
-import { TooltipProvider, Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
 
 import './CloudServiceDataCollected.styles.scss';
 
@@ -89,10 +89,12 @@ function CloudServiceDataCollected({
 						Metrics
 						{metricsInfoTooltip && (
 							<TooltipProvider>
-								<Tooltip
-									className={'cloud-service-data-collected-table-tooltip'}
+								<TooltipSimple
 									title={metricsInfoTooltip}
 									side="top"
+									tooltipContentProps={{
+										className: 'cloud-service-data-collected-table-tooltip',
+									}}
 								>
 									<span
 										className="cloud-service-data-collected-table-heading-info"
@@ -101,7 +103,7 @@ function CloudServiceDataCollected({
 									>
 										<Info size={12} />
 									</span>
-								</Tooltip>
+								</TooltipSimple>
 							</TooltipProvider>
 						)}
 					</div>

frontend/src/components/CodeBlock/CodeBlock.tsx

@@ -2,7 +2,6 @@ import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Check, Copy } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
 import SyntaxHighlighter, {
 	a11yDark,
 } from 'components/MarkdownRenderer/syntaxHighlighter';
@@ -53,19 +52,16 @@ function CodeBlock({
 			data-testid="code-block-container"
 		>
 			{showCopyButton ? (
-				<Tooltip title={isCopied ? 'Copied' : 'Copy'}>
-					<Button
-						variant="ghost"
-						color="secondary"
-						size="sm"
-						icon
-						onClick={handleCopy}
-						aria-label="Copy code"
-						style={{ position: 'absolute', right: 8, top: 8, zIndex: 1 }}
-					>
-						{isCopied ? <Check size={14} /> : <Copy size={14} />}
-					</Button>
-				</Tooltip>
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="sm"
+					onClick={handleCopy}
+					prefix={isCopied ? <Check size={14} /> : <Copy size={14} />}
+					aria-label="Copy code"
+					title={isCopied ? 'Copied' : 'Copy'}
+					style={{ position: 'absolute', right: 8, top: 8, zIndex: 1 }}
+				/>
 			) : null}
 			<SyntaxHighlighter
 				style={a11yDark}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -134,33 +134,26 @@ function CreateServiceAccountModal(): JSX.Element {
 
 			<DialogFooter className="create-sa-modal__footer">
 				<Button
-					size="md"
 					type="button"
 					variant="solid"
 					color="secondary"
 					onClick={handleClose}
-					testId="create-sa-cancel-btn"
+					data-testid="create-sa-cancel-btn"
 				>
 					<X size={12} />
 					Cancel
 				</Button>
 
 				<AuthZButton
-					size="md"
 					checks={[SACreatePermission]}
 					withPortal={false}
-					type="button"
+					type="submit"
+					form="create-sa-form"
 					variant="solid"
 					color="primary"
 					loading={isSubmitting}
 					disabled={!isValid}
-					testId="create-sa-submit-btn"
-					onClick={(): void => {
-						const form = document.getElementById('create-sa-form');
-						if (form instanceof HTMLFormElement) {
-							form.requestSubmit();
-						}
-					}}
+					data-testid="create-sa-submit-btn"
 				>
 					Create Service Account
 				</AuthZButton>

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -656,19 +656,14 @@ function CustomTimePicker({
 					}
 				>
 					<Button
-						disabledTooltip={undefined}
-						size="md"
 						className="zoom-out-btn"
 						onClick={handleZoomOut}
 						disabled={zoomOutDisabled}
-						testId="zoom-out-btn"
-						icon
-						aria-label="Zoom out"
+						data-testid="zoom-out-btn"
+						prefix={<ZoomOut size={14} />}
 						variant="solid"
-						color="secondary"
-					>
-						<ZoomOut size={14} />
-					</Button>
+						color="none"
+					/>
 				</Tooltip>
 			)}
 		</div>

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx

@@ -27,14 +27,12 @@ function DetailsHeader({
 	const closeButton = (
 		<Button
 			variant="ghost"
-			size="sm"
-			icon
+			size="icon"
 			color="secondary"
 			onClick={onClose}
 			aria-label="Close"
-		>
-			<X size={14} />
-		</Button>
+			prefix={<X size={14} />}
+		></Button>
 	);
 
 	return (

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Button, Popover, Tooltip } from 'antd';
-import { RadioGroup } from '@signozhq/ui/radio-group';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -68,15 +68,10 @@ export default function DownloadOptionsMenu({
 			>
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup
-						color="primary"
-						value={exportFormat}
-						onChange={setExportFormat}
-						items={[
-							{ value: DownloadFormats.CSV, label: 'csv' },
-							{ value: DownloadFormats.JSONL, label: 'jsonl' },
-						]}
-					/>
+					<RadioGroup value={exportFormat} onChange={setExportFormat}>
+						<RadioGroupItem value={DownloadFormats.CSV}>csv</RadioGroupItem>
+						<RadioGroupItem value={DownloadFormats.JSONL}>jsonl</RadioGroupItem>
+					</RadioGroup>
 				</div>
 
 				<div className="horizontal-line" />
@@ -84,15 +79,19 @@ export default function DownloadOptionsMenu({
 				<div className="row-limit">
 					<Typography.Text className="title">Number of Rows</Typography.Text>
 					<RadioGroup
-						color="primary"
 						value={String(rowLimit)}
 						onChange={(value): void => setRowLimit(Number(value))}
-						items={[
-							{ value: String(DownloadRowCounts.TEN_K), label: '10k' },
-							{ value: String(DownloadRowCounts.THIRTY_K), label: '30k' },
-							{ value: String(DownloadRowCounts.FIFTY_K), label: '50k' },
-						]}
-					/>
+					>
+						<RadioGroupItem value={String(DownloadRowCounts.TEN_K)}>
+							10k
+						</RadioGroupItem>
+						<RadioGroupItem value={String(DownloadRowCounts.THIRTY_K)}>
+							30k
+						</RadioGroupItem>
+						<RadioGroupItem value={String(DownloadRowCounts.FIFTY_K)}>
+							50k
+						</RadioGroupItem>
+					</RadioGroup>
 				</div>
 
 				{dataSource !== DataSource.TRACES && (
@@ -101,15 +100,12 @@ export default function DownloadOptionsMenu({
 
 						<div className="columns-scope">
 							<Typography.Text className="title">Columns</Typography.Text>
-							<RadioGroup
-								color="primary"
-								value={columnsScope}
-								onChange={setColumnsScope}
-								items={[
-									{ value: DownloadColumnsScopes.ALL, label: 'All' },
-									{ value: DownloadColumnsScopes.SELECTED, label: 'Selected' },
-								]}
-							/>
+							<RadioGroup value={columnsScope} onChange={setColumnsScope}>
+								<RadioGroupItem value={DownloadColumnsScopes.ALL}>All</RadioGroupItem>
+								<RadioGroupItem value={DownloadColumnsScopes.SELECTED}>
+									Selected
+								</RadioGroupItem>
+							</RadioGroup>
 						</div>
 					</>
 				)}

frontend/src/components/DropdownMenu/DropdownMenuSimple.tsx

@@ -1,221 +0,0 @@
-import { isValidElement, type ReactElement, type ReactNode } from 'react';
-import {
-	Dropdown,
-	type DropdownItemType,
-	type DropdownProps,
-} from '@signozhq/ui/dropdown';
-
-/**
- * The menu-item shape SigNoz built against `@signozhq/ui/dropdown-menu`.
- * `Dropdown` only accepts its own `items` array, so this module maps the old
- * rows onto that array and renders them.
- */
-export type BaseMenuItem = {
-	key?: string;
-	label?: ReactNode;
-	disabled?: boolean;
-	disabledTooltip?: ReactNode;
-	icon?: ReactNode;
-	rightIcon?: ReactNode;
-	shortcut?: ReactNode;
-	onClick?: (info: { key: string; keyPath: string[] }) => void;
-	danger?: boolean;
-	className?: string;
-};
-
-export type MenuGroup = BaseMenuItem & {
-	type: 'group';
-	label: string;
-	children: MenuItem[];
-};
-
-export type MenuDivider = {
-	type: 'divider';
-	key?: string;
-};
-
-export type SubMenuItem = BaseMenuItem & {
-	children: MenuItem[];
-};
-
-export type CheckboxMenuItem = BaseMenuItem & {
-	type: 'checkbox';
-	key: string;
-	label: ReactNode;
-	checked?: boolean;
-	onCheckedChange?: (checked: boolean) => void;
-};
-
-export type RadioMenuItem = {
-	type: 'radio';
-	key: string;
-	label: ReactNode;
-	value: string;
-	disabled?: boolean;
-	className?: string;
-};
-
-export type RadioGroupMenuItem = {
-	type: 'radio-group';
-	key?: string;
-	value?: string;
-	onChange?: (value: string) => void;
-	children: RadioMenuItem[];
-};
-
-export type MenuItem =
-	| MenuGroup
-	| MenuDivider
-	| CheckboxMenuItem
-	| RadioGroupMenuItem
-	| (SubMenuItem & { type?: never })
-	| (BaseMenuItem & { type?: never; children?: never });
-
-export type MenuProps = {
-	items: MenuItem[];
-	search?: {
-		placeholder?: string;
-		onSearchChange?: (value: string) => void;
-	};
-	loading?: boolean | { text?: string };
-};
-
-type Align = DropdownProps['align'];
-type Side = DropdownProps['side'];
-
-function elementOf(node: ReactNode): ReactElement | undefined {
-	return isValidElement(node) ? node : undefined;
-}
-
-function disabledFields(item: {
-	disabled?: boolean;
-	disabledTooltip?: ReactNode;
-}): { disabled: boolean; disabledTooltip: ReactNode } | Record<string, never> {
-	if (item.disabled === undefined && item.disabledTooltip === undefined) {
-		return {};
-	}
-	return {
-		disabled: Boolean(item.disabled),
-		disabledTooltip: item.disabledTooltip,
-	};
-}
-
-function mapItem(item: MenuItem, index: number): DropdownItemType {
-	if ('type' in item && item.type === 'divider') {
-		return { type: 'separator', value: item.key ?? `separator-${index}` };
-	}
-
-	if ('type' in item && item.type === 'group') {
-		return {
-			type: 'group',
-			value: item.key ?? `group-${index}`,
-			label: item.label,
-			items: item.children.map((child, childIndex) => mapItem(child, childIndex)),
-		} as DropdownItemType;
-	}
-
-	if ('type' in item && item.type === 'checkbox') {
-		return {
-			type: 'checkbox',
-			name: item.key,
-			label: item.label,
-			value: item.checked,
-			onChange: item.onCheckedChange,
-			prefix: elementOf(item.icon),
-			...disabledFields(item),
-		};
-	}
-
-	if ('type' in item && item.type === 'radio-group') {
-		return {
-			type: 'radio-group',
-			name: item.key ?? `radio-${index}`,
-			value: item.value,
-			onChange: item.onChange,
-			items: item.children.map((child) => ({
-				value: child.value,
-				label: child.label,
-				...disabledFields(child),
-			})),
-		};
-	}
-
-	if ('children' in item && item.children) {
-		const key = item.key ?? `submenu-${index}`;
-		return {
-			type: 'submenu',
-			value: key,
-			label: item.label ?? '',
-			prefix: elementOf(item.icon),
-			items: item.children.map((child, childIndex) => mapItem(child, childIndex)),
-			...disabledFields(item),
-		} as DropdownItemType;
-	}
-
-	const key = item.key ?? `item-${index}`;
-	const shortcut = 'shortcut' in item ? item.shortcut : undefined;
-	const suffix = elementOf('rightIcon' in item ? item.rightIcon : undefined);
-	return {
-		type: 'item',
-		value: key,
-		label: item.label ?? '',
-		danger: 'danger' in item ? item.danger : undefined,
-		prefix: elementOf('icon' in item ? item.icon : undefined),
-		...(shortcut != null ? { shortcut } : { suffix }),
-		onClick:
-			'onClick' in item && item.onClick
-				? (): void => {
-						item.onClick?.({ key, keyPath: [key] });
-					}
-				: undefined,
-		...disabledFields(item),
-	};
-}
-
-interface DropdownMenuSimpleProps {
-	menu: MenuProps;
-	children: ReactNode;
-	className?: string;
-	align?: Align;
-	side?: Side;
-	testId?: string;
-	nativeButton?: boolean;
-}
-
-export function DropdownMenuSimple({
-	menu,
-	children,
-	className,
-	align = 'end',
-	side = 'bottom',
-	testId,
-	nativeButton = true,
-}: DropdownMenuSimpleProps): JSX.Element {
-	const loading = menu.loading;
-	const loadingText = typeof loading === 'object' ? loading.text : undefined;
-
-	return (
-		<Dropdown
-			items={menu.items.map(mapItem) as DropdownItemType[]}
-			nativeButton={nativeButton}
-			align={align}
-			side={side}
-			className={className}
-			testId={testId}
-			loading={Boolean(loading)}
-			loadingContent={loadingText}
-			searchInputProps={
-				menu.search
-					? {
-							placeholder: menu.search.placeholder,
-							onChange: menu.search.onSearchChange,
-						}
-					: undefined
-			}
-		>
-			{children}
-		</Dropdown>
-	);
-}
-
-export default DropdownMenuSimple;

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -38,15 +38,13 @@ function DeleteMemberDialog({
 
 	const footer = (
 		<>
-			<Button size="md" variant="solid" color="secondary" onClick={onClose}>
+			<Button variant="solid" color="secondary" onClick={onClose}>
 				<X size={12} />
 				Cancel
 			</Button>
 			<Button
-				disabledTooltip={undefined}
-				size="md"
 				variant="solid"
-				color="danger"
+				color="destructive"
 				disabled={isDeleting}
 				onClick={onConfirm}
 				loading={isDeleting}

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -519,7 +519,7 @@ function EditMemberDrawer({
 									localRoles.map((roleId) => {
 										const role = availableRoles.find((r) => r.id === roleId);
 										return (
-											<Badge variant="solid" key={roleId} color="secondary">
+											<Badge key={roleId} color="vanilla">
 												{role?.name ?? roleId}
 											</Badge>
 										);
@@ -559,15 +559,15 @@ function EditMemberDrawer({
 				<div className="edit-member-drawer__meta-item">
 					<span className="edit-member-drawer__meta-label">Status</span>
 					{member?.status === MemberStatus.Active ? (
-						<Badge color="success" variant="outlined">
+						<Badge color="forest" variant="outline">
 							ACTIVE
 						</Badge>
 					) : member?.status === MemberStatus.Deleted ? (
-						<Badge color="danger" variant="outlined">
+						<Badge color="cherry" variant="outline">
 							DELETED
 						</Badge>
 					) : (
-						<Badge color="warning" variant="outlined">
+						<Badge color="amber" variant="outline">
 							INVITED
 						</Badge>
 					)}
@@ -575,16 +575,12 @@ function EditMemberDrawer({
 
 				<div className="edit-member-drawer__meta-item">
 					<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
-					<Badge variant="solid" color="secondary">
-						{formatTimestamp(member?.joinedOn)}
-					</Badge>
+					<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
 				</div>
 				{!isInvited && (
 					<div className="edit-member-drawer__meta-item">
 						<span className="edit-member-drawer__meta-label">Last Modified</span>
-						<Badge variant="solid" color="secondary">
-							{formatTimestamp(member?.updatedAt)}
-						</Badge>
+						<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
 					</div>
 				)}
 			</div>
@@ -618,12 +614,10 @@ function EditMemberDrawer({
 						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
 							<span className="edit-member-drawer__tooltip-wrapper">
 								<Button
-									disabledTooltip={undefined}
-									size="md"
 									onClick={(): void => setShowDeleteConfirm(true)}
 									disabled={isRootUser || isSelf}
 									variant="link"
-									color="danger"
+									color="destructive"
 								>
 									<Trash2 size={12} />
 									{isInvited ? 'Revoke Invite' : 'Delete Member'}
@@ -635,8 +629,6 @@ function EditMemberDrawer({
 						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
 							<span className="edit-member-drawer__tooltip-wrapper">
 								<Button
-									disabledTooltip={undefined}
-									size="md"
 									onClick={handleGenerateResetLink}
 									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
 									variant="link"
@@ -659,19 +651,12 @@ function EditMemberDrawer({
 					</div>
 
 					<div className="edit-member-drawer__footer-right">
-						<Button
-							size="md"
-							variant="outlined"
-							color="secondary"
-							onClick={handleClose}
-						>
+						<Button variant="outlined" color="secondary" onClick={handleClose}>
 							<X size={14} />
 							Cancel
 						</Button>
 
 						<Button
-							disabledTooltip={undefined}
-							size="md"
 							variant="solid"
 							color="primary"
 							disabled={!isDirty || isSaving || isRootUser}

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -45,7 +45,6 @@ function ResetLinkDialog({
 						<span className="reset-link-dialog__link-text">{resetLink}</span>
 					</div>
 					<Button
-						size="md"
 						variant="link"
 						color="secondary"
 						onClick={onCopy}

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -53,7 +53,7 @@ function ErrorModal({
 					onClick={(): void => setVisible(true)}
 					onKeyDown={undefined}
 				>
-					<Badge variant="solid" color="danger">
+					<Badge color="error">
 						<CircleAlert size={14} color={Color.BG_CHERRY_500} /> error
 					</Badge>
 				</span>

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,10 +1,7 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button, Col, Popover, Row, Select, Space } from 'antd';
-import {
-	DropdownMenuSimple,
-	type MenuProps,
-} from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';

frontend/src/components/ExportMenu/ExportMenu.tsx

@@ -1,8 +1,8 @@
 import { Download } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
-import { RadioGroup } from '@signozhq/ui/radio-group';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	ClientExportData,
@@ -51,40 +51,31 @@ export default function ExportMenu({
 
 	return (
 		<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-			<Tooltip title="Download">
+			<TooltipSimple title="Download">
 				<PopoverTrigger asChild>
 					<Button
-						disabledTooltip={undefined}
 						variant="ghost"
 						color="secondary"
-						size="sm"
-						icon
+						size="icon"
 						aria-label="Download"
-						testId={`export-menu-${dataSource}`}
+						data-testid={`export-menu-${dataSource}`}
 						disabled={isExporting}
 						loading={isExporting}
 					>
 						<Download size={14} />
 					</Button>
 				</PopoverTrigger>
-			</Tooltip>
+			</TooltipSimple>
 			<PopoverContent align="end" className="export-menu-popover">
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup
-						color="primary"
-						value={exportFormat}
-						onChange={setExportFormat}
-						items={[
-							{ value: ExportFormat.Csv, label: 'csv' },
-							{ value: ExportFormat.Jsonl, label: 'jsonl' },
-						]}
-					/>
+					<RadioGroup value={exportFormat} onChange={setExportFormat}>
+						<RadioGroupItem value={ExportFormat.Csv}>csv</RadioGroupItem>
+						<RadioGroupItem value={ExportFormat.Jsonl}>jsonl</RadioGroupItem>
+					</RadioGroup>
 				</div>
 
 				<Button
-					disabledTooltip={undefined}
-					size="md"
 					variant="solid"
 					color="primary"
 					className="export-button"

frontend/src/components/FieldsSelector/AddedFields.tsx

@@ -58,8 +58,8 @@ function SortableField({
 			{!isRequired && (
 				<Button
 					className={cx(styles.removeBtn, 'periscope-btn')}
-					variant="solid"
-					color="danger"
+					variant="outlined"
+					color="destructive"
 					size="sm"
 					onClick={(): void => onRemove(field)}
 				>

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -173,7 +173,6 @@ function FieldsSelectorContent({
 				{hasUnsavedChanges && (
 					<div className={styles.footer}>
 						<Button
-							size="md"
 							variant="outlined"
 							color="secondary"
 							onClick={handleDiscard}
@@ -182,7 +181,6 @@ function FieldsSelectorContent({
 							Discard
 						</Button>
 						<Button
-							size="md"
 							variant="solid"
 							color="primary"
 							onClick={handleSave}

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { Button, Input } from 'antd';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
@@ -102,10 +102,7 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	return (
 		<div className="feedback-modal-container">
 			<div className="feedback-modal-header">
-				<ToggleGroup
-					variant="outlined"
-					color="secondary"
-					size="sm"
+				<ToggleGroupSimple
 					type="single"
 					value={activeTab}
 					className="feedback-modal-tabs"

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Dot } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import Noz from 'components/Noz/Noz';
 import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 import { Popover } from 'antd';
@@ -113,9 +113,8 @@ function HeaderRightSection({
 						</span>
 					) : null}
 
-					<Tooltip title={NOZ_TOOLTIP_TITLE}>
+					<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
 						<Button
-							size="md"
 							variant="solid"
 							color="secondary"
 							className="noz-wave"
@@ -131,7 +130,7 @@ function HeaderRightSection({
 						>
 							<Typography.Text>Noz</Typography.Text>
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 				</div>
 			)}
 
@@ -148,16 +147,13 @@ function HeaderRightSection({
 					onOpenChange={handleOpenFeedbackModalChange}
 				>
 					<Button
-						color="secondary"
 						variant="ghost"
-						size="sm"
-						icon
+						size="icon"
 						className="share-feedback-btn"
 						aria-label="Feedback"
+						prefix={<SquarePen size={14} />}
 						onClick={handleOpenFeedbackModal}
-					>
-						<SquarePen size={14} />
-					</Button>
+					/>
 				</Popover>
 			)}
 
@@ -174,19 +170,16 @@ function HeaderRightSection({
 					onOpenChange={handleOpenAnnouncementsModalChange}
 				>
 					<Button
-						color="secondary"
 						variant="ghost"
-						size="sm"
-						icon
+						size="icon"
 						aria-label="Announcements"
+						prefix={<Inbox size={14} />}
 						onClick={(): void => {
 							logEvent('Announcements: Clicked', {
 								page: location.pathname,
 							});
 						}}
-					>
-						<Inbox size={14} />
-					</Button>
+					/>
 				</Popover>
 			)}
 
@@ -203,15 +196,12 @@ function HeaderRightSection({
 					onOpenChange={handleOpenShareURLModalChange}
 				>
 					<Button
-						color="secondary"
 						variant="ghost"
-						size="sm"
-						icon
+						size="icon"
 						aria-label="Share"
+						prefix={<Globe size={14} />}
 						onClick={handleOpenShareURLModal}
-					>
-						<Globe size={14} />
-					</Button>
+					/>
 				</Popover>
 			)}
 		</div>

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -149,9 +149,6 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 								<Info size={14} color={Color.BG_AMBER_600} />
 							)}
 							<Switch
-								color="primary"
-								textPlacement="right"
-								disabledTooltip={undefined}
 								value={enableAbsoluteTime}
 								disabled={!isValidateRelativeTime}
 								onChange={(): void => {
@@ -176,8 +173,6 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 					</Typography.Text>
 					<div className="absolute-relative-time-toggler">
 						<Switch
-							color="primary"
-							textPlacement="right"
 							value={enableExtraOption}
 							onChange={(): void => setEnableExtraOption((prev) => !prev)}
 						/>

frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx

@@ -1,23 +1,14 @@
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui/badge';
 
-function getStatusCodeColor(statusCode: number): BadgeColorType {
-	if (statusCode >= 200 && statusCode < 300) {
-		return 'success';
-	}
-	if (statusCode >= 300 && statusCode < 400) {
-		return 'primary';
-	}
-	if (statusCode >= 400 && statusCode < 500) {
-		return 'warning';
-	}
-	if (statusCode >= 500) {
-		return 'danger';
-	}
-	if (statusCode >= 100 && statusCode < 200) {
-		return 'secondary';
-	}
-	return 'primary';
-}
+type BadgeColor =
+	| 'vanilla'
+	| 'robin'
+	| 'forest'
+	| 'amber'
+	| 'sienna'
+	| 'cherry'
+	| 'sakura'
+	| 'aqua';
 
 interface HttpStatusBadgeProps {
 	statusCode: string | number;
@@ -25,6 +16,25 @@ interface HttpStatusBadgeProps {
 	className?: string;
 }
 
+function getStatusCodeColor(statusCode: number): BadgeColor {
+	if (statusCode >= 200 && statusCode < 300) {
+		return 'forest'; // Success - green
+	}
+	if (statusCode >= 300 && statusCode < 400) {
+		return 'robin'; // Redirect - blue
+	}
+	if (statusCode >= 400 && statusCode < 500) {
+		return 'amber'; // Client error - amber
+	}
+	if (statusCode >= 500) {
+		return 'cherry'; // Server error - red
+	}
+	if (statusCode >= 100 && statusCode < 200) {
+		return 'vanilla'; // Informational - neutral
+	}
+	return 'robin'; // Default fallback
+}
+
 function HttpStatusBadge({
 	statusCode,
 	testId,
@@ -39,7 +49,12 @@ function HttpStatusBadge({
 	const color = getStatusCodeColor(numericStatusCode);
 
 	return (
-		<Badge color={color} variant="outlined" testId={testId} className={className}>
+		<Badge
+			color={color}
+			variant="outline"
+			data-testid={testId}
+			className={className}
+		>
 			{statusCode}
 		</Badge>
 	);

frontend/src/components/InviteMembers/InviteMembers.tsx

@@ -119,12 +119,11 @@ function InviteMembers({
 							<div className={styles.cellAction}>
 								{canRemoveRow && (
 									<Button
-										size="md"
-										variant="solid"
-										color="danger"
+										variant="ghost"
+										color="destructive"
 										onClick={(): void => removeRow(row.id)}
 										aria-label="Remove row"
-										testId={`invite-remove-${row.id}`}
+										data-testid={`invite-remove-${row.id}`}
 									>
 										<Trash2 size={12} />
 									</Button>
@@ -137,12 +136,11 @@ function InviteMembers({
 				{showAddButton && (
 					<div className={styles.addRow}>
 						<Button
-							size="md"
 							variant="dashed"
 							color="secondary"
 							prefix={<Plus size={12} />}
 							onClick={addRow}
-							testId="invite-add-row"
+							data-testid="invite-add-row"
 						>
 							Add another
 						</Button>

frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.tsx

@@ -1,8 +1,8 @@
 import { Button } from '@signozhq/ui/button';
 import { Divider } from '@signozhq/ui/divider';
-import { DropdownMenuSimple as Dropdown } from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { aggregateAttributesResourcesToString } from 'container/LogDetailedView/utils';
 import { toast } from '@signozhq/ui/sonner';
@@ -23,6 +23,8 @@ import { useCopyToClipboard } from 'react-use';
 
 import styles from './LogDetailsHeader.module.scss';
 
+const TOOLTIP_CONTENT_PROPS = { className: styles.tooltipContent };
+
 interface LogDetailsHeaderProps {
 	log: ILog;
 	onNavigatePrev: () => void;
@@ -89,7 +91,6 @@ function LogDetailsHeader({
 			<div className={styles.actions}>
 				{showOpenInExplorer && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<Compass size={16} />}
@@ -103,59 +104,47 @@ function LogDetailsHeader({
 					menu={{ items: menuItems }}
 					align="end"
 					className={styles.dropdownContent}
+					onClick={(e: MouseEvent): void => e.stopPropagation()}
 				>
 					<Button
-						size="md"
 						variant="link"
 						color="secondary"
-						icon
-						aria-label="Log actions"
-						testId="log-details-header-menu"
-						onClick={(e: MouseEvent): void => e.stopPropagation()}
-					>
-						<Ellipsis size={16} />
-					</Button>
+						prefix={<Ellipsis size={16} />}
+						data-testid="log-details-header-menu"
+					/>
 				</Dropdown>
 
 				<div className={styles.arrows}>
-					<Tooltip
+					<TooltipSimple
 						title="Move to previous log"
 						side="top"
 						open={isPrevDisabled ? false : undefined}
+						tooltipContentProps={TOOLTIP_CONTENT_PROPS}
 					>
 						<Button
-							disabledTooltip={undefined}
-							size="md"
 							variant="outlined"
 							color="secondary"
-							icon
-							aria-label="Move to previous log"
+							prefix={<ChevronUp size={14} />}
 							disabled={isPrevDisabled}
 							onClick={onNavigatePrev}
-							testId="log-details-header-prev"
-						>
-							<ChevronUp size={14} />
-						</Button>
-					</Tooltip>
-					<Tooltip
+							data-testid="log-details-header-prev"
+						/>
+					</TooltipSimple>
+					<TooltipSimple
 						title="Move to next log"
 						side="top"
 						open={isNextDisabled ? false : undefined}
+						tooltipContentProps={TOOLTIP_CONTENT_PROPS}
 					>
 						<Button
-							disabledTooltip={undefined}
-							size="md"
 							variant="outlined"
 							color="secondary"
-							icon
-							aria-label="Move to next log"
+							prefix={<ChevronDown size={14} />}
 							disabled={isNextDisabled}
 							onClick={onNavigateNext}
-							testId="log-details-header-next"
-						>
-							<ChevronDown size={14} />
-						</Button>
-					</Tooltip>
+							data-testid="log-details-header-next"
+						/>
+					</TooltipSimple>
 				</div>
 			</div>
 		</div>

frontend/src/components/LogDetail/LogHighlights/config.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge, BadgeColor } from '@signozhq/ui/badge';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import { ILog } from 'types/api/logs/log';
@@ -8,13 +8,13 @@ import styles from './LogHighlights.module.scss';
 import TraceIdField from './TraceIdField';
 
 // Severity badge color mirrors the LogStateIndicator bar
-const SEVERITY_COLOR: Record<string, BadgeColorType> = {
-	[LogType.TRACE]: 'success',
-	[LogType.DEBUG]: 'info',
-	[LogType.INFO]: 'primary',
-	[LogType.WARN]: 'warning',
-	[LogType.ERROR]: 'danger',
-	[LogType.FATAL]: 'highlight-danger',
+const SEVERITY_COLOR: Record<string, BadgeColor> = {
+	[LogType.TRACE]: 'forest',
+	[LogType.DEBUG]: 'aqua',
+	[LogType.INFO]: 'robin',
+	[LogType.WARN]: 'amber',
+	[LogType.ERROR]: 'cherry',
+	[LogType.FATAL]: 'sakura',
 };
 
 export interface LogHighlightConfig {
@@ -32,13 +32,9 @@ const getAttr = (log: ILog, key: string): string =>
 
 const valueBadge = (
 	value: string,
-	options?: { prefix?: ReactNode; color?: BadgeColorType },
+	options?: { prefix?: ReactNode; color?: BadgeColor },
 ): ReactNode => (
-	<Badge
-		variant="solid"
-		color={options?.color ?? 'secondary'}
-		className={styles.valueBadge}
-	>
+	<Badge color={options?.color ?? 'vanilla'} className={styles.valueBadge}>
 		{options?.prefix}
 		<span className={styles.badgeText} title={value}>
 			{value}

frontend/src/components/LogDetail/index.tsx

@@ -4,7 +4,7 @@ import { useCopyToClipboard } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { Drawer, Tooltip } from 'antd';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
@@ -328,18 +328,13 @@ function LogDetailInner({
 									mouseLeaveDelay={0}
 								>
 									<Button
-										disabledTooltip={undefined}
-										size="md"
 										variant="outlined"
 										color="secondary"
-										icon
-										aria-label="Move to previous log"
+										prefix={<ChevronUp size={14} />}
 										className="log-arrow-btn log-arrow-btn-up"
 										disabled={isPrevDisabled}
 										onClick={goToPrev}
-									>
-										<ChevronUp size={14} />
-									</Button>
+									/>
 								</Tooltip>
 								<Tooltip
 									title={isNextDisabled ? '' : 'Move to next log'}
@@ -347,24 +342,18 @@ function LogDetailInner({
 									mouseLeaveDelay={0}
 								>
 									<Button
-										disabledTooltip={undefined}
-										size="md"
 										variant="outlined"
 										color="secondary"
-										icon
-										aria-label="Move to next log"
+										prefix={<ChevronDown size={14} />}
 										className="log-arrow-btn log-arrow-btn-down"
 										disabled={isNextDisabled}
 										onClick={goToNext}
-									>
-										<ChevronDown size={14} />
-									</Button>
+									/>
 								</Tooltip>
 							</div>
 							{handleOpenInExplorer && (
 								<div>
 									<Button
-										size="md"
 										variant="outlined"
 										color="secondary"
 										prefix={<Compass size={16} />}
@@ -421,10 +410,7 @@ function LogDetailInner({
 				{isLogDetailsV2 && <div className="log-detail-drawer__section-divider" />}
 
 				<div className="tabs-and-search">
-					<ToggleGroup
-						variant="outlined"
-						color="secondary"
-						size="sm"
+					<ToggleGroupSimple
 						type="single"
 						className="views-tabs"
 						onChange={handleModeChange}
@@ -487,12 +473,9 @@ function LogDetailInner({
 									variant="link"
 									color="secondary"
 									size="sm"
-									icon
-									aria-label="Show Filters"
+									prefix={<Filter size="lg" />}
 									onClick={handleFilterVisible}
-								>
-									<Filter size="lg" />
-								</Button>
+								/>
 							</Tooltip>
 						)}
 
@@ -510,14 +493,9 @@ function LogDetailInner({
 									variant="link"
 									color="secondary"
 									size="sm"
-									icon
-									aria-label={
-										selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
-									}
+									prefix={<Copy size={12} />}
 									onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
-								>
-									<Copy size={12} />
-								</Button>
+								/>
 							</Tooltip>
 						)}
 					</div>

frontend/src/components/MarkdownEditor/EditorToolbar.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import {
 	Bold,
 	CodeXml,
@@ -11,7 +11,7 @@ import {
 	Type,
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 
 import InsertVariableMenu from './InsertVariableMenu';
@@ -20,7 +20,7 @@ import type { EditorCommand, EditorVariable } from './types';
 
 import styles from './MarkdownEditor.module.scss';
 
-const COMMAND_ICONS: Record<string, ReactElement> = {
+const COMMAND_ICONS: Record<string, ReactNode> = {
 	heading: <Heading size={14} />,
 	bold: <Bold size={14} />,
 	italic: <Italic size={14} />,
@@ -61,22 +61,20 @@ function EditorToolbar({
 			<span className={styles.toolbarDivider} />
 			<div className={styles.commands}>
 				{commands.map((command) => (
-					<Tooltip key={command.id} title={command.label}>
+					<TooltipSimple key={command.id} title={command.label}>
 						<Button
-							disabledTooltip={undefined}
 							type="button"
 							variant="ghost"
 							color="secondary"
-							size="sm"
-							icon
+							size="icon"
 							disabled={disabled}
 							aria-label={command.label}
-							testId={`markdown-command-${command.id}`}
+							data-testid={`markdown-command-${command.id}`}
 							onClick={(): void => onRunCommand(command)}
 						>
 							{COMMAND_ICONS[command.id]}
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 				))}
 			</div>
 			<div className={styles.toolbarEnd}>

frontend/src/components/MarkdownEditor/InsertVariableMenu.tsx

@@ -1,10 +1,7 @@
 import { useMemo, useState } from 'react';
-import { ChevronDown, DollarSign } from '@signozhq/icons';
+import { ChevronDown, DollarSign, Search } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import {
-	DropdownMenuSimple,
-	type MenuItem,
-} from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 
 import type { EditorVariable } from './types';
 
@@ -69,12 +66,12 @@ function InsertVariableMenu({
 				items,
 				search: {
 					placeholder: 'Search variables',
+					searchIcon: <Search size={14} />,
 					onSearchChange: setSearch,
 				},
 			}}
 		>
 			<Button
-				disabledTooltip={undefined}
 				type="button"
 				variant="outlined"
 				color="secondary"
@@ -83,7 +80,7 @@ function InsertVariableMenu({
 				prefix={<DollarSign size={14} className={styles.insertVariableIcon} />}
 				suffix={<ChevronDown size={14} />}
 				className={styles.insertVariable}
-				testId="markdown-insert-variable"
+				data-testid="markdown-insert-variable"
 			>
 				Insert variable
 			</Button>

frontend/src/components/MarkdownEditor/MarkdownHelp.tsx

@@ -15,10 +15,9 @@ function MarkdownHelp(): JSX.Element {
 					type="button"
 					variant="ghost"
 					color="secondary"
-					size="sm"
-					icon
+					size="icon"
 					aria-label="Markdown syntax help"
-					testId="markdown-help-trigger"
+					data-testid="markdown-help-trigger"
 				>
 					<CircleHelp size={14} />
 				</Button>

frontend/src/components/MembersTable/MembersTable.tsx

@@ -55,14 +55,14 @@ function NameEmailCell({
 function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {
 	if (status === MemberStatus.Active) {
 		return (
-			<Badge color="success" variant="outlined">
+			<Badge color="forest" variant="outline">
 				ACTIVE
 			</Badge>
 		);
 	}
 	if (status === MemberStatus.Deleted) {
 		return (
-			<Badge color="danger" variant="outlined">
+			<Badge color="cherry" variant="outline">
 				DELETED
 			</Badge>
 		);
@@ -70,17 +70,13 @@ function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {
 
 	if (status === MemberStatus.Invited) {
 		return (
-			<Badge color="warning" variant="outlined">
+			<Badge color="amber" variant="outline">
 				INVITED
 			</Badge>
 		);
 	}
 
-	return (
-		<Badge variant="solid" color="secondary">
-			⎯
-		</Badge>
-	);
+	return <Badge color="vanilla">⎯</Badge>;
 }
 
 function MembersEmptyState({

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -20,7 +20,7 @@ import {
 import { Color } from '@signozhq/design-tokens';
 import { Button, Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
-import { TooltipProvider, Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
@@ -758,14 +758,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					tabIndex={isActive ? 0 : -1}
 				>
 					<Checkbox
-						color="primary"
 						value={isSelected}
 						className="option-checkbox"
-						onChange={(): void => {
-							handleItemSelection('checkbox');
-							setActiveChipIndex(-1);
-							setActiveIndex(-1);
-						}}
+						onClick={(e): void => selectFromButton(e, 'checkbox')}
 					>
 						<div className="option-content">
 							<Typography.Text truncate={1} className="option-label-text">
@@ -1600,11 +1595,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							}}
 						>
 							<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-								<Checkbox
-									color="primary"
-									value={allOptionsSelected}
-									className="option-checkbox"
-								>
+								<Checkbox value={allOptionsSelected} className="option-checkbox">
 									<div className="option-content">
 										<div className="all-option-text">ALL</div>
 									</div>
@@ -1982,9 +1973,13 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				// `label` arrives already cut to maxTagTextLength, so the reveal reads the
 				// option's own text (falling back to the raw value for freeform tags).
 				return (
-					<Tooltip side="top" title={findOptionLabelText(options, value)}>
+					<TooltipSimple
+						side="top"
+						delayDuration={300}
+						title={findOptionLabelText(options, value)}
+					>
 						{tag}
-					</Tooltip>
+					</TooltipSimple>
 				);
 			}
 

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

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import cx from 'classnames';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
@@ -562,10 +562,7 @@ function QueryAddOns({
 				</div>
 			)}
 
-			<ToggleGroup
-				variant="outlined"
-				color="secondary"
-				size="sm"
+			<ToggleGroupSimple
 				type="multiple"
 				className="add-ons-tabs"
 				value={selectedViews.map((view) => view.key)}

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

@@ -724,62 +724,26 @@ function QuerySearch({
 	// Helper function to render a badge for the current context mode
 	const renderContextBadge = (): JSX.Element => {
 		if (!editingMode) {
-			return (
-				<Badge variant="solid" color="secondary">
-					Unknown
-				</Badge>
-			);
+			return <Badge color="vanilla">Unknown</Badge>;
 		}
 
 		switch (editingMode) {
 			case 'key':
-				return (
-					<Badge variant="solid" color="primary">
-						Key
-					</Badge>
-				);
+				return <Badge color="robin">Key</Badge>;
 			case 'operator':
-				return (
-					<Badge variant="solid" color="highlight-danger">
-						Operator
-					</Badge>
-				);
+				return <Badge color="sakura">Operator</Badge>;
 			case 'value':
-				return (
-					<Badge variant="solid" color="success">
-						Value
-					</Badge>
-				);
+				return <Badge color="forest">Value</Badge>;
 			case 'conjunction':
-				return (
-					<Badge variant="solid" color="warning">
-						Conjunction
-					</Badge>
-				);
+				return <Badge color="amber">Conjunction</Badge>;
 			case 'function':
-				return (
-					<Badge variant="solid" color="info">
-						Function
-					</Badge>
-				);
+				return <Badge color="aqua">Function</Badge>;
 			case 'parenthesis':
-				return (
-					<Badge variant="solid" color="highlight-danger">
-						Parenthesis
-					</Badge>
-				);
+				return <Badge color="sakura">Parenthesis</Badge>;
 			case 'bracketList':
-				return (
-					<Badge variant="solid" color="danger">
-						Bracket List
-					</Badge>
-				);
+				return <Badge color="cherry">Bracket List</Badge>;
 			default:
-				return (
-					<Badge variant="solid" color="secondary">
-						Unknown
-					</Badge>
-				);
+				return <Badge color="vanilla">Unknown</Badge>;
 		}
 	};
 
@@ -1501,44 +1465,27 @@ function QuerySearch({
 					Currently editing: {renderContextBadge()}
 					{queryContext?.keyToken && (
 						<span className="triplet-info">
-							Key:{' '}
-							<Badge variant="solid" color="secondary">
-								{queryContext.keyToken}
-							</Badge>
+							Key: <Badge color="vanilla">{queryContext.keyToken}</Badge>
 						</span>
 					)}
 					{queryContext?.operatorToken && (
 						<span className="triplet-info">
-							Operator:{' '}
-							<Badge variant="solid" color="secondary">
-								{queryContext.operatorToken}
-							</Badge>
+							Operator: <Badge color="vanilla">{queryContext.operatorToken}</Badge>
 						</span>
 					)}
 					{queryContext?.valueToken && (
 						<span className="triplet-info">
-							Value:{' '}
-							<Badge variant="solid" color="secondary">
-								{queryContext.valueToken}
-							</Badge>
+							Value: <Badge color="vanilla">{queryContext.valueToken}</Badge>
 						</span>
 					)}
 					{queryContext?.currentPair && (
 						<span className="triplet-info query-pair-info">
-							Current pair:{' '}
-							<Badge variant="solid" color="primary">
-								{queryContext.currentPair.key}
-							</Badge>
-							<Badge variant="solid" color="highlight-danger">
-								{queryContext.currentPair.operator}
-							</Badge>
+							Current pair: <Badge color="robin">{queryContext.currentPair.key}</Badge>
+							<Badge color="sakura">{queryContext.currentPair.operator}</Badge>
 							{queryContext.currentPair.value && (
-								<Badge variant="solid" color="success">
-									{queryContext.currentPair.value}
-								</Badge>
+								<Badge color="forest">{queryContext.currentPair.value}</Badge>
 							)}
 							<Badge
-								variant="solid"
 								color={queryContext.currentPair.isComplete ? 'success' : 'warning'}
 							>
 								{queryContext.currentPair.isComplete ? 'Complete' : 'Incomplete'}
@@ -1548,9 +1495,7 @@ function QuerySearch({
 					{queryContext?.queryPairs && queryContext.queryPairs.length > 0 && (
 						<span className="triplet-info">
 							Total pairs:{' '}
-							<Badge variant="solid" color="primary">
-								{queryContext.queryPairs.length}
-							</Badge>
+							<Badge color="robin">{queryContext.queryPairs.length}</Badge>
 						</span>
 					)}
 				</div>

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

@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { DropdownMenuSimple } from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';

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

@@ -2,7 +2,7 @@ import { Button } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 
 interface CheckboxValueRowProps {
 	value: string;
@@ -28,8 +28,6 @@ function CheckboxValueRow({
 	return (
 		<div className="value">
 			<Checkbox
-				color="primary"
-				disabledTooltip={undefined}
 				onChange={(isChecked): void => onCheckboxChange(isChecked === true)}
 				value={checked}
 				disabled={disabled}
@@ -49,11 +47,11 @@ function CheckboxValueRow({
 				{customRendererForValue ? (
 					customRendererForValue(value)
 				) : (
-					<Tooltip title={String(value)} side="top" align="start">
+					<TooltipSimple title={String(value)} side="top" align="start">
 						<Typography.Text className="value-string" truncate={1}>
 							{String(value)}
 						</Typography.Text>
-					</Tooltip>
+					</TooltipSimple>
 				)}
 				<div className="value-actions">
 					<Button type="text" className="only-btn">

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

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { ChevronDown, ChevronRight, Search, Undo2 } from '@signozhq/icons';
 
@@ -63,7 +63,9 @@ export function CheckboxFilterV2Header({
 					<ChevronRight size={13} cursor="pointer" />
 				)}
 				{isTitleTruncated ? (
-					<Tooltip title={title}>{titleText}</Tooltip>
+					<TooltipSimple title={title} delayDuration={400}>
+						{titleText}
+					</TooltipSimple>
 				) : (
 					titleText
 				)}

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

@@ -54,7 +54,6 @@ export function CheckboxFilterV2ValueRow({
 		>
 			<div className={styles.checkbox}>
 				<Checkbox
-					disabledTooltip={undefined}
 					onChange={(isChecked): void =>
 						onCheckboxChange(isChecked === true, checkedState)
 					}
@@ -98,7 +97,7 @@ export function CheckboxFilterV2ValueRow({
 				<div className={styles.actions}>
 					{badge && (
 						<Badge
-							variant="outlined"
+							variant="outline"
 							color={badge.color}
 							className={styles.badge}
 							testId={`badge-${badge.key}`}
@@ -106,20 +105,10 @@ export function CheckboxFilterV2ValueRow({
 							{badge.label}
 						</Badge>
 					)}
-					<Button
-						size="md"
-						variant="ghost"
-						color="secondary"
-						className={styles.onlyButton}
-					>
+					<Button variant="ghost" color="secondary" className={styles.onlyButton}>
 						{onlyButtonLabel}
 					</Button>
-					<Button
-						size="md"
-						variant="ghost"
-						color="secondary"
-						className={styles.toggleButton}
-					>
+					<Button variant="ghost" color="secondary" className={styles.toggleButton}>
 						Toggle
 					</Button>
 				</div>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2ValueRow.test.tsx

@@ -64,7 +64,7 @@ describe('CheckboxFilterV2ValueRow', () => {
 			render(
 				<CheckboxFilterV2ValueRow
 					{...defaultProps}
-					badge={{ key: 'related', label: 'Related', color: 'primary' }}
+					badge={{ key: 'related', label: 'Related', color: 'robin' }}
 				/>,
 			);
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/itemRules.ts

@@ -9,7 +9,7 @@ export enum SectionType {
 export interface BadgeConfig {
 	key: string;
 	label: string;
-	color: 'primary' | 'warning' | 'secondary';
+	color: 'robin' | 'warning' | 'secondary';
 }
 
 export interface ItemConfig {

frontend/src/components/QuickFilters/FilterRenderers/shared/SectionActionButton/SectionActionButton.tsx

@@ -23,22 +23,21 @@ export function SectionActionButton({
 }: SectionActionButtonProps): JSX.Element {
 	return (
 		<Tooltip title={tooltip}>
-			<span onMouseDown={(e): void => e.preventDefault()}>
-				<Button
-					variant="link"
-					color="secondary"
-					size="sm"
-					className={classNames(styles.iconBtn, className)}
-					onClick={(e): void => {
-						e.stopPropagation();
-						e.preventDefault();
-						onClick();
-					}}
-					testId={testId}
-				>
-					{icon}
-				</Button>
-			</span>
+			<Button
+				variant="link"
+				color="secondary"
+				size="sm"
+				className={classNames(styles.iconBtn, className)}
+				onMouseDown={(e): void => e.preventDefault()}
+				onClick={(e): void => {
+					e.stopPropagation();
+					e.preventDefault();
+					onClick();
+				}}
+				data-testid={testId}
+			>
+				{icon}
+			</Button>
 		</Tooltip>
 	);
 }

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -2,6 +2,8 @@
 	display: flex;
 	flex-direction: row;
 	position: relative;
+	flex: 1;
+	min-height: 0;
 
 	.quick-filters-settings-container {
 		flex: 0 0 0;

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -232,55 +232,48 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		<section className="right-actions">
 			<Tooltip title="Reset All">
 				<Button
-					size="md"
 					variant="link"
 					color="secondary"
-					icon
 					aria-label="Reset All"
 					className="right-action-icon-container"
 					onClick={handleReset}
-				>
-					<RefreshCw className="sync-icon" size="md" />
-				</Button>
+					prefix={<RefreshCw className="sync-icon" size="md" />}
+				/>
 			</Tooltip>
 			{showFilterCollapse && (
 				<Tooltip title="Collapse Filters">
 					<Button
-						size="md"
 						variant="link"
 						color="secondary"
-						icon
 						aria-label="Collapse Filters"
 						className="right-action-icon-container"
 						onClick={handleFilterVisibilityChange}
-					>
-						<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />
-					</Button>
+						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />}
+					/>
 				</Tooltip>
 			)}
 			{isDynamicFilters && (
 				<AuthZButton
-					size="md"
 					checks={QuickFilterManagePermissions}
 					variant="link"
 					color="secondary"
-					icon
 					aria-label="Settings"
 					className={classNames('right-action-icon-container', {
 						active: isSettingsOpen,
 					})}
 					onClick={(): void => setIsSettingsOpen(true)}
 					testId="settings-icon-container"
-				>
-					<Tooltip title="Settings" open={isSettingsDisabled ? false : undefined}>
-						<SettingsIcon
-							className="settings-icon"
-							data-testid="settings-icon"
-							width={14}
-							height={14}
-						/>
-					</Tooltip>
-				</AuthZButton>
+					prefix={
+						<Tooltip title="Settings" open={isSettingsDisabled ? false : undefined}>
+							<SettingsIcon
+								className="settings-icon"
+								data-testid="settings-icon"
+								width={14}
+								height={14}
+							/>
+						</Tooltip>
+					}
+				/>
 			)}
 		</section>
 	);
@@ -291,8 +284,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				<div className="api-quick-filters-header">
 					<Typography.Text>Show IP addresses</Typography.Text>
 					<Switch
-						color="primary"
-						textPlacement="right"
 						style={{ marginLeft: 'auto' }}
 						value={showIP ?? true}
 						onChange={(checked): void => {

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss

@@ -0,0 +1,33 @@
+// The one `overflow: hidden` in the chain. Ancestors (RouteTab, AppLayout)
+// only hand height down; each pane below owns its own scroll.
+.layout {
+	display: flex;
+	flex: 1;
+	height: 100%;
+	min-height: 0;
+	overflow: hidden;
+}
+
+// Positioned so overlays (settings drawer) paint above the content pane
+// without changing this pane's layout width.
+.filters {
+	width: 280px;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	position: relative;
+	overflow: visible;
+	z-index: 2;
+}
+
+// Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
+// `height: 100%`), which owns the scrolling.
+.content {
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -0,0 +1,54 @@
+import { ComponentProps, ReactNode } from 'react';
+import cx from 'classnames';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+
+import QuickFilters from '../QuickFilters';
+
+import styles from './QuickFiltersLayout.module.scss';
+
+// Same optionality as `<QuickFilters />` in JSX (honours its defaultProps).
+type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
+	typeof QuickFilters,
+	ComponentProps<typeof QuickFilters>
+>;
+
+export interface QuickFiltersLayoutProps {
+	quickFilterProps: QuickFiltersElementProps;
+	showFilters: boolean;
+	className?: string;
+	contentClassName?: string;
+	testId?: string;
+	children: ReactNode;
+}
+
+function QuickFiltersLayout({
+	quickFilterProps,
+	showFilters,
+	className,
+	contentClassName,
+	testId,
+	children,
+}: QuickFiltersLayoutProps): JSX.Element {
+	return (
+		<div className={cx(styles.layout, className)} data-testid={testId}>
+			{showFilters && (
+				<aside
+					className={styles.filters}
+					data-testid="quick-filters-layout-filters"
+				>
+					<QuickFilters {...quickFilterProps} />
+				</aside>
+			)}
+			<section
+				className={cx(styles.content, contentClassName)}
+				data-testid="quick-filters-layout-content"
+			>
+				<OverlayScrollbar>
+					<div>{children}</div>
+				</OverlayScrollbar>
+			</section>
+		</div>
+	);
+}
+
+export default QuickFiltersLayout;

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../types';
+import QuickFiltersLayout from '../QuickFiltersLayout';
+
+jest.mock('../QuickFiltersLayout.module.scss', () => ({
+	__esModule: true,
+	default: {
+		layout: 'layout',
+		filters: 'filters',
+		content: 'content',
+	},
+}));
+
+jest.mock('../../QuickFilters', () => ({
+	__esModule: true,
+	default: ({ source }: { source: string }): JSX.Element => (
+		<div data-testid="quick-filters">{source}</div>
+	),
+}));
+
+const quickFilterProps = {
+	source: QuickFiltersSource.TRACES_EXPLORER,
+	handleFilterVisibilityChange: jest.fn(),
+};
+
+describe('QuickFiltersLayout', () => {
+	it('renders QuickFilters with the given props inside the filters pane', () => {
+		render(
+			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		const filtersPane = screen.getByTestId('quick-filters-layout-filters');
+		expect(filtersPane).toContainElement(screen.getByTestId('quick-filters'));
+		expect(screen.getByTestId('quick-filters')).toHaveTextContent(
+			QuickFiltersSource.TRACES_EXPLORER,
+		);
+		expect(screen.getByTestId('quick-filters-layout-content')).toHaveTextContent(
+			'content',
+		);
+	});
+
+	it('does not render the filters pane when showFilters is false', () => {
+		render(
+			<QuickFiltersLayout showFilters={false} quickFilterProps={quickFilterProps}>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		expect(
+			screen.queryByTestId('quick-filters-layout-filters'),
+		).not.toBeInTheDocument();
+		expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
+		expect(screen.getByText('content')).toBeInTheDocument();
+	});
+
+	it('merges classNames onto the root and content panes', () => {
+		render(
+			<QuickFiltersLayout
+				showFilters
+				quickFilterProps={quickFilterProps}
+				className="page-root"
+				contentClassName="page-content"
+				testId="page"
+			>
+				<div>content</div>
+			</QuickFiltersLayout>,
+		);
+
+		const root = screen.getByTestId('page');
+		expect(root).toHaveClass('layout', 'page-root');
+		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
+			'content',
+			'page-content',
+		);
+	});
+});

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

@@ -61,7 +61,6 @@ function AnnouncementTooltip({
 				<p className="announcement-tooltip__message">{message}</p>
 				<div className="announcement-tooltip__footer">
 					<Button
-						size="md"
 						variant="solid"
 						color="primary"
 						onClick={closeTooltip}

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -6,27 +6,12 @@
 	left: 0;
 	z-index: 999;
 	width: 342px;
+	height: 100%;
 	background: var(--l1-background);
 	transition: width 0.05s ease-in-out;
 	overflow: hidden;
 	color: var(--l1-foreground);
 
-	&.qf-logs-explorer {
-		height: calc(100vh - 45px);
-	}
-
-	&.qf-exceptions {
-		height: 100vh;
-	}
-
-	&.qf-api-monitoring {
-		height: calc(100vh - 45px);
-	}
-
-	&.qf-traces-explorer {
-		height: calc(100vh - 45px);
-	}
-
 	&.hidden {
 		width: 0;
 	}

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { refreshLicense } from 'api/generated/services/licenses';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { RefreshCcw } from '@signozhq/icons';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { buildLicenseUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/license.permissions';
@@ -49,7 +49,7 @@ function RefreshPaymentStatus({
 		>
 			<Button
 				variant="link"
-				color="secondary"
+				color={type === 'text' ? 'none' : 'secondary'}
 				size="md"
 				className={className}
 				onClick={handleRefreshPaymentStatus}
@@ -64,7 +64,7 @@ function RefreshPaymentStatus({
 	return (
 		<span className="refresh-payment-status-btn-wrapper">
 			{type === 'tooltip' ? (
-				<Tooltip title={t('refreshPaymentStatus')}>{button}</Tooltip>
+				<TooltipSimple title={t('refreshPaymentStatus')}>{button}</TooltipSimple>
 			) : (
 				button
 			)}

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -5,10 +5,7 @@ import type {
 	TableColumnType as ColumnType,
 } from 'antd';
 import { Button, Flex } from 'antd';
-import {
-	DropdownMenuSimple,
-	type MenuItem,
-} from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Switch } from '@signozhq/ui/switch';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
@@ -98,8 +95,6 @@ function DynamicColumnTable({
 				>
 					<div>{column.title?.toString()}</div>
 					<Switch
-						color="primary"
-						textPlacement="right"
 						value={columnsData?.findIndex((c) => c.key === column.key) !== -1}
 						onChange={onToggleHandler(index, column)}
 					/>

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -152,7 +152,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 				optionFilterProp="label"
 				optionRender={(option): JSX.Element => (
 					<div style={{ pointerEvents: 'none' }}>
-						<Checkbox color="primary" value={value.includes(option.value as string)}>
+						<Checkbox value={value.includes(option.value as string)}>
 							{option.label}
 						</Checkbox>
 					</div>

frontend/src/components/RouteTab/RouteTab.module.scss

@@ -0,0 +1,38 @@
+// Hands the parent's height down to the active pane and lets the pane scroll
+// its own content, so TopNav and the tab bar stay put. Child combinators only
+// (nested Tabs must not be caught).
+.routeTab {
+	flex: 1;
+	min-height: 0;
+}
+
+.routeTab > :global(.ant-tabs-content-holder) {
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab > :global(.ant-tabs-content-holder) > :global(.ant-tabs-content) {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab
+	> :global(.ant-tabs-content-holder)
+	> :global(.ant-tabs-content)
+	> :global(.ant-tabs-tabpane-active) {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.routeTab
+	> :global(.ant-tabs-content-holder)
+	> :global(.ant-tabs-content)
+	> :global(.ant-tabs-tabpane-active)
+	> :global(.overlay-scrollbar) {
+	flex: 1;
+	min-height: 0;
+}

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -5,6 +5,11 @@ import { fireEvent, render, screen } from 'tests/test-utils';
 import RouteTab from './index';
 import { RouteTabProps } from './types';
 
+jest.mock('./RouteTab.module.scss', () => ({
+	__esModule: true,
+	default: { routeTab: 'routeTab' },
+}));
+
 function DummyComponent1(): JSX.Element {
 	return <div>Dummy Component 1</div>;
 }
@@ -74,6 +79,36 @@ describe('RouteTab component', () => {
 		expect(history.location.pathname).toBe('/tab2');
 	});
 
+	it('applies the layout class alongside a custom className', () => {
+		const history = createMemoryHistory();
+		const { container } = render(
+			<Router history={history}>
+				<RouteTab
+					history={history}
+					routes={testRoutes}
+					activeKey="Tab1"
+					className="custom-tabs"
+				/>
+			</Router>,
+		);
+		expect(container.querySelector('.ant-tabs')).toHaveClass(
+			'routeTab',
+			'custom-tabs',
+		);
+	});
+
+	it('renders the active tab content inside an overlay scrollbar', () => {
+		const history = createMemoryHistory();
+		const { container } = render(
+			<Router history={history}>
+				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
+			</Router>,
+		);
+		expect(
+			container.querySelector('.ant-tabs-tabpane-active > .overlay-scrollbar'),
+		).toHaveTextContent('Dummy Component 1');
+	});
+
 	it('calls onChangeHandler on tab change', () => {
 		const onChangeHandler = jest.fn();
 		const history = createMemoryHistory();

frontend/src/components/RouteTab/index.tsx

@@ -5,20 +5,32 @@ import {
 	useParams,
 } from 'react-router-dom';
 import { Tabs, TabsProps } from 'antd';
+import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 
 import { RouteTabProps } from './types';
 
+import styles from './RouteTab.module.scss';
+
 interface Params {
 	[key: string]: string;
 }
 
+/**
+ * Each pane scrolls its own content inside an OverlayScrollbar, so the tab bar
+ * stays put. Mounted as the page root the pane is bounded to the viewport; inside
+ * a plain block wrapper the scroller is inert and the page scrolls as usual.
+ * Pane content that needs a bounded box must size itself with `height: 100%`
+ * (the scroller's viewport is block flow, so `flex: 1` has no effect there).
+ */
 function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
 	history,
 	showRightSection,
+	className,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
 	const params = useParams<Params>();
@@ -50,11 +62,16 @@ function RouteTab({
 		label: name,
 		key,
 		tabKey: route,
-		children: <Component />,
+		children: (
+			<OverlayScrollbar>
+				<Component />
+			</OverlayScrollbar>
+		),
 	}));
 
 	return (
 		<Tabs
+			className={cx(styles.routeTab, className)}
 			onChange={onChange}
 			destroyInactiveTabPane
 			activeKey={currentRoute?.key || activeKey}

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx

@@ -24,7 +24,6 @@ function KeyCreatedPhase({
 				<div className="add-key-modal__key-display">
 					<span className="add-key-modal__key-text">{createdKey.key}</span>
 					<Button
-						size="md"
 						variant="link"
 						color="secondary"
 						onClick={onCopy}
@@ -37,9 +36,7 @@ function KeyCreatedPhase({
 
 			<div className="add-key-modal__expiry-meta">
 				<span className="add-key-modal__expiry-label">Expiration</span>
-				<Badge variant="solid" color="secondary">
-					{expiryLabel}
-				</Badge>
+				<Badge color="vanilla">{expiryLabel}</Badge>
 			</div>
 
 			<div className="add-key-modal__callout-wrapper">

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -2,7 +2,7 @@ import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
@@ -68,9 +68,7 @@ function KeyFormPhase({
 								name="expiryMode"
 								control={control}
 								render={({ field }): JSX.Element => (
-									<ToggleGroup
-										variant="outlined"
-										color="secondary"
+									<ToggleGroupSimple
 										type="single"
 										value={field.value}
 										onChange={(val: string): void => {
@@ -119,7 +117,6 @@ function KeyFormPhase({
 			<div className="add-key-modal__footer">
 				<div className="add-key-modal__footer-right">
 					<Button
-						size="md"
 						variant="solid"
 						color="secondary"
 						onClick={onClose}
@@ -128,22 +125,16 @@ function KeyFormPhase({
 						Cancel
 					</Button>
 					<AuthZButton
-						size="md"
 						checks={checks}
 						authZEnabled={!!accountId}
 						withPortal={false}
-						type="button"
+						type="submit"
+						form={FORM_ID}
 						variant="solid"
 						color="primary"
 						loading={isSubmitting}
 						disabled={!isValid}
 						testId="add-key-submit-btn"
-						onClick={(): void => {
-							const form = document.getElementById(FORM_ID);
-							if (form instanceof HTMLFormElement) {
-								form.requestSubmit();
-							}
-						}}
 					>
 						Create Key
 					</AuthZButton>

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -80,16 +80,15 @@ function DeleteAccountModal(): JSX.Element {
 
 	const footer = (
 		<div className="sa-delete-dialog__footer">
-			<Button size="md" variant="solid" color="secondary" onClick={handleCancel}>
+			<Button variant="solid" color="secondary" onClick={handleCancel}>
 				<X size={12} />
 				Cancel
 			</Button>
 			<AuthZButton
-				size="md"
 				checks={[buildSADeletePermission(accountId ?? '')]}
 				authZEnabled={!!accountId}
 				variant="solid"
-				color="danger"
+				color="destructive"
 				loading={isDeleting}
 				onClick={handleConfirm}
 				data-testid="confirm-delete-btn"

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

@@ -4,7 +4,7 @@ import { LockKeyhole, Trash2, X } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
@@ -103,9 +103,7 @@ function EditKeyForm({
 						name="expiryMode"
 						control={control}
 						render={({ field }): JSX.Element => (
-							<ToggleGroup
-								variant="outlined"
-								color="secondary"
+							<ToggleGroupSimple
 								type="single"
 								value={field.value}
 								onChange={(val: string): void => {
@@ -115,9 +113,6 @@ function EditKeyForm({
 								}}
 								size="sm"
 								disabled={!canUpdate}
-								disabledTooltip={
-									canUpdate ? undefined : 'You do not have permission to update this key'
-								}
 								className="edit-key-modal__expiry-toggle"
 								items={[
 									{ value: ExpiryMode.NONE, label: 'No Expiration' },
@@ -155,7 +150,7 @@ function EditKeyForm({
 
 				<div className="edit-key-modal__meta">
 					<span className="edit-key-modal__meta-label">Last Observed At</span>
-					<Badge variant="solid" color="secondary">
+					<Badge color="vanilla">
 						{formatLastObservedAt(
 							keyItem?.lastObservedAt ?? null,
 							formatTimezoneAdjustedTimestamp,
@@ -166,14 +161,13 @@ function EditKeyForm({
 
 			<div className="edit-key-modal__footer">
 				<AuthZButton
-					size="md"
 					checks={[
 						buildAPIKeyDeletePermission(keyItem?.id ?? ''),
 						buildSADetachPermission(accountId ?? ''),
 					]}
 					authZEnabled={!!accountId && !!keyItem?.id}
 					variant="link"
-					color="danger"
+					color="destructive"
 					onClick={onRevokeClick}
 					withPortal={false}
 				>
@@ -181,26 +175,20 @@ function EditKeyForm({
 					Revoke Key
 				</AuthZButton>
 				<div className="edit-key-modal__footer-right">
-					<Button size="md" variant="solid" color="secondary" onClick={onClose}>
+					<Button variant="solid" color="secondary" onClick={onClose}>
 						<X size={12} />
 						Cancel
 					</Button>
 					<AuthZButton
-						size="md"
 						checks={[buildAPIKeyUpdatePermission(keyItem?.id ?? '')]}
 						authZEnabled={!!accountId && !!keyItem?.id}
-						type="button"
+						type="submit"
+						form={FORM_ID}
 						variant="solid"
 						color="primary"
 						loading={isSaving}
 						disabled={!isDirty}
 						withPortal={false}
-						onClick={(): void => {
-							const form = document.getElementById(FORM_ID);
-							if (form instanceof HTMLFormElement) {
-								form.requestSubmit();
-							}
-						}}
 					>
 						Save Changes
 					</AuthZButton>

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -122,11 +122,9 @@ function buildColumns({
 							]}
 							authZEnabled={!isDisabled && !!accountId}
 							withPortal={false}
-							variant="solid"
+							variant="ghost"
 							size="sm"
-							color="danger"
-							icon
-							aria-label="Revoke Key"
+							color="destructive"
 							disabled={isDisabled}
 							onClick={(e): void => {
 								e.stopPropagation();
@@ -215,7 +213,6 @@ function KeysTab({
 					</a>
 				</p>
 				<AuthZButton
-					size="md"
 					checks={[APIKeyCreatePermission, buildSAAttachPermission(accountId)]}
 					authZEnabled={!isDisabled && !!accountId}
 					withPortal={false}

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -122,12 +122,11 @@ function OverviewTab({
 					<span className="sa-drawer__input-text">{account.id || '—'}</span>
 					{account.id && (
 						<Button
-							size="md"
 							variant="link"
 							color="secondary"
 							onClick={handleCopyId}
 							className="sa-drawer__copy-btn"
-							testId="copy-id-btn"
+							data-testid="copy-id-btn"
 						>
 							{hasCopiedId ? <Check size={14} /> : <Copy size={14} />}
 						</Button>
@@ -157,7 +156,7 @@ function OverviewTab({
 								localRoles.map((roleId) => {
 									const role = availableRoles.find((r) => r.id === roleId);
 									return (
-										<Badge variant="solid" key={roleId} color="secondary">
+										<Badge key={roleId} color="vanilla">
 											{role?.name ?? roleId}
 										</Badge>
 									);
@@ -188,15 +187,15 @@ function OverviewTab({
 				<div className="sa-drawer__meta-item">
 					<span className="sa-drawer__meta-label">Status</span>
 					{account.status?.toUpperCase() === 'ACTIVE' ? (
-						<Badge color="success" variant="outlined">
+						<Badge color="forest" variant="outline">
 							ACTIVE
 						</Badge>
 					) : account.status?.toUpperCase() === 'DELETED' ? (
-						<Badge color="danger" variant="outlined">
+						<Badge color="cherry" variant="outline">
 							DELETED
 						</Badge>
 					) : (
-						<Badge color="secondary" variant="outlined" className="sa-status-badge">
+						<Badge color="vanilla" variant="outline" className="sa-status-badge">
 							{account.status ? account.status.toUpperCase() : 'UNKNOWN'}
 						</Badge>
 					)}
@@ -204,16 +203,12 @@ function OverviewTab({
 
 				<div className="sa-drawer__meta-item">
 					<span className="sa-drawer__meta-label">Created At</span>
-					<Badge variant="solid" color="secondary">
-						{formatTimestamp(account.createdAt)}
-					</Badge>
+					<Badge color="vanilla">{formatTimestamp(account.createdAt)}</Badge>
 				</div>
 
 				<div className="sa-drawer__meta-item">
 					<span className="sa-drawer__meta-label">Updated At</span>
-					<Badge variant="solid" color="secondary">
-						{formatTimestamp(account.updatedAt)}
-					</Badge>
+					<Badge color="vanilla">{formatTimestamp(account.updatedAt)}</Badge>
 				</div>
 			</div>
 

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -41,19 +41,18 @@ export function RevokeKeyFooter({
 }: RevokeKeyFooterProps): JSX.Element {
 	return (
 		<>
-			<Button size="md" variant="solid" color="secondary" onClick={onCancel}>
+			<Button variant="solid" color="secondary" onClick={onCancel}>
 				<X size={12} />
 				Cancel
 			</Button>
 			<AuthZButton
-				size="md"
 				checks={[
 					buildAPIKeyDeletePermission(keyId ?? ''),
 					buildSADetachPermission(accountId ?? ''),
 				]}
 				authZEnabled={!!accountId && !!keyId}
 				variant="solid"
-				color="danger"
+				color="destructive"
 				loading={isRevoking}
 				onClick={onConfirm}
 				withPortal={false}

frontend/src/components/ServiceAccountDrawer/SaveErrorItem.tsx

@@ -40,9 +40,8 @@ function SaveErrorItem({
 				</span>
 				{onRetry && !isRetrying && (
 					<Button
-						size="md"
 						variant="link"
-						color="secondary"
+						color="none"
 						aria-label="Retry"
 						onClick={async (e): Promise<void> => {
 							e.stopPropagation();

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -10,7 +10,7 @@ import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { toast } from '@signozhq/ui/sonner';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -375,12 +375,11 @@ function ServiceAccountDrawer({
 			activeTab === ServiceAccountDrawerTab.Overview && !isDeleted && open ? (
 				<div className="sa-drawer__footer">
 					<AuthZButton
-						size="md"
 						checks={[buildSADeletePermission(selectedAccountId ?? '')]}
 						authZEnabled={!!selectedAccountId}
 						withPortal={false}
 						variant="link"
-						color="danger"
+						color="destructive"
 						onClick={(): void => {
 							void setIsDeleteOpen(true);
 						}}
@@ -389,17 +388,11 @@ function ServiceAccountDrawer({
 						Delete Service Account
 					</AuthZButton>
 					<div className="sa-drawer__footer-right">
-						<Button
-							size="md"
-							variant="outlined"
-							color="secondary"
-							onClick={handleClose}
-						>
+						<Button variant="outlined" color="secondary" onClick={handleClose}>
 							<X size={14} />
 							Cancel
 						</Button>
 						<AuthZButton
-							size="md"
 							checks={[
 								buildSAReadPermission(selectedAccountId ?? ''),
 								buildSAUpdatePermission(selectedAccountId ?? ''),
@@ -433,9 +426,7 @@ function ServiceAccountDrawer({
 	const body = (
 		<div className="sa-drawer__layout">
 			<div className="sa-drawer__tabs">
-				<ToggleGroup
-					variant="outlined"
-					color="secondary"
+				<ToggleGroupSimple
 					type="single"
 					value={activeTab}
 					size="sm"

frontend/src/components/ServiceAccountsTable/utils.tsx

@@ -28,20 +28,20 @@ export function NameEmailCell({
 export function StatusBadge({ status }: { status: string }): JSX.Element {
 	if (status?.toUpperCase() === 'ACTIVE') {
 		return (
-			<Badge color="success" variant="outlined">
+			<Badge color="forest" variant="outline">
 				ACTIVE
 			</Badge>
 		);
 	}
 	if (status?.toUpperCase() === 'DELETED') {
 		return (
-			<Badge color="danger" variant="outlined">
+			<Badge color="cherry" variant="outline">
 				DELETED
 			</Badge>
 		);
 	}
 	return (
-		<Badge color="secondary" variant="outlined" className="sa-status-badge">
+		<Badge color="vanilla" variant="outline" className="sa-status-badge">
 			{status ? status.toUpperCase() : 'UNKNOWN'}
 		</Badge>
 	);

frontend/src/components/SignozModal/stories/SignozModal.stories.tsx

@@ -13,13 +13,7 @@ function ModalFixture(): JSX.Element {
 
 	return (
 		<>
-			<Button
-				size="md"
-				variant="solid"
-				color="primary"
-				testId="open-signoz-modal"
-				onClick={(): void => setOpen(true)}
-			>
+			<Button data-testid="open-signoz-modal" onClick={(): void => setOpen(true)}>
 				Open modal
 			</Button>
 			<SignozModal

frontend/src/components/SignozRadioGroup/SignozRadioGroup.tsx

@@ -1,4 +1,4 @@
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 
 import './SignozRadioGroup.styles.scss';
 
@@ -24,16 +24,12 @@ function SignozRadioGroup({
 	disabled = false,
 }: SignozRadioGroupProps): JSX.Element {
 	return (
-		<ToggleGroup
-			variant="outlined"
-			color="secondary"
-			size="sm"
+		<ToggleGroupSimple
 			type="single"
 			value={value}
 			className={`signoz-radio-group ${className}`}
 			onChange={onChange}
 			disabled={disabled}
-			disabledTooltip={undefined}
 			items={options.map((option) => ({
 				value: option.value,
 				label: (

frontend/src/components/TableRenderer/BadgeWithTooltip.tsx

@@ -12,7 +12,7 @@ function BadgeWithTooltip({
 	return (
 		<div key={label}>
 			<Tooltip title={tooltipTitle}>
-				<Badge variant="solid" className="label-column--tag" color="secondary">
+				<Badge className="label-column--tag" color="vanilla">
 					{getLabelRenderingValue(label, value && value[label])}
 				</Badge>
 			</Tooltip>

frontend/src/components/TableRenderer/LabelColumn.tsx

@@ -27,11 +27,7 @@ function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
 							{labels.map(
 								(label: string): JSX.Element => (
 									<div key={label}>
-										<Badge
-											variant="solid"
-											className="label-column--tag"
-											color="secondary"
-										>
+										<Badge className="label-column--tag" color="vanilla">
 											{getLabelAndValueContent(label, value && value[label])}
 										</Badge>
 									</div>
@@ -41,7 +37,7 @@ function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
 					}
 					trigger="hover"
 				>
-					<Badge variant="solid" className="label-column--tag" color="secondary">
+					<Badge className="label-column--tag" color="vanilla">
 						+{remainingLabels.length}
 					</Badge>
 				</Popover>

frontend/src/components/TagBadge/TagBadge.tsx

@@ -1,5 +1,4 @@
 import { type MouseEvent, type ReactNode } from 'react';
-import { X } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import cx from 'classnames';
 
@@ -24,22 +23,11 @@ function TagBadge({
 }: TagBadgeProps): JSX.Element {
 	return (
 		<Badge
-			color="archive"
-			variant="outlined"
+			color="sienna"
+			variant="outline"
 			className={cx(styles.static, className)}
-			suffix={
-				closable ? (
-					<button
-						type="button"
-						aria-label="Remove"
-						onClick={(event): void => {
-							onClose?.(event);
-						}}
-					>
-						<X size={12} />
-					</button>
-				) : undefined
-			}
+			closable={closable}
+			onClose={onClose}
 		>
 			{children}
 		</Badge>

frontend/src/components/TagKeyValueInput/TagKeyValueInput.tsx

@@ -1,6 +1,5 @@
 import { type ChangeEvent, type KeyboardEvent, useState } from 'react';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
 import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
@@ -139,18 +138,16 @@ function TagKeyValueInput({
 							closable
 							onClose={(): void => removeTag(tag)}
 						>
-							<Tooltip title="Double-click to edit">
-								<Button
-									size="md"
-									variant="ghost"
-									color="secondary"
-									className={styles.tagLabel}
-									testId={`${testId}-chip`}
-									onDoubleClick={(): void => startEdit(index)}
-								>
-									{tag}
-								</Button>
-							</Tooltip>
+							<Button
+								variant="ghost"
+								color="secondary"
+								className={styles.tagLabel}
+								title="Double-click to edit"
+								testId={`${testId}-chip`}
+								onDoubleClick={(): void => startEdit(index)}
+							>
+								{tag}
+							</Button>
 						</TagBadge>
 					),
 				)}

frontend/src/components/TanStackTableView/TanStackHoverTooltip.tsx

@@ -1,10 +1,14 @@
-import { type ReactNode, useLayoutEffect } from 'react';
+import { type ReactNode, useLayoutEffect, useMemo } from 'react';
 
 import { chromePerformanceTanstackTableEndHover } from './perfDevtools';
 import { useIsRowHovered } from './TanStackTableStateContext';
-import { Tooltip, TooltipProps, TooltipProvider } from '@signozhq/ui/tooltip';
+import {
+	TooltipContentProps,
+	TooltipSimple,
+	TooltipSimpleProps,
+} from '@signozhq/ui/tooltip';
 
-export type HoverTooltipProps = Omit<TooltipProps, 'open'> & {
+export type HoverTooltipProps = Omit<TooltipSimpleProps, 'open'> & {
 	rowId: string;
 	children: ReactNode;
 };
@@ -22,13 +26,28 @@ export function TanStackHoverTooltip({
 		}
 	}, [isHovered, rowId]);
 
+	const tooltipContentProps = useMemo(
+		() =>
+			({
+				onPointerDownOutside: (e): void => {
+					e.preventDefault();
+					e.stopPropagation();
+				},
+			}) satisfies TooltipContentProps,
+		[],
+	);
+
 	if (!isHovered) {
 		return <>{children}</>;
 	}
 
 	return (
-		<TooltipProvider delay={700}>
-			<Tooltip {...tooltipProps}>{children}</Tooltip>
-		</TooltipProvider>
+		<TooltipSimple
+			delayDuration={700}
+			tooltipContentProps={tooltipContentProps}
+			{...tooltipProps}
+		>
+			{children}
+		</TooltipSimple>
 	);
 }

frontend/src/components/TanStackTableView/stories/TanStackTableView.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Color } from '@signozhq/design-tokens';
 import { Ellipsis } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple } from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import { GroupedStatusCounts } from 'container/InfraMonitoringK8sV2/components/GroupedStatusCounts';
 import type { StatusCountItem } from 'container/InfraMonitoringK8sV2/components/GroupedStatusCounts';
 import { ValidateColumnValueWrapper } from 'container/InfraMonitoringK8sV2/components/ValidateColumnValueWrapper';
@@ -104,8 +104,7 @@ const rowActions = (): JSX.Element => (
 		<Button
 			aria-label="Service actions"
 			color="secondary"
-			size="sm"
-			icon
+			size="icon"
 			variant="outlined"
 		>
 			<Ellipsis size={16} />

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { ChevronDown, Globe } from '@signozhq/icons';
-import { DropdownMenuSimple } from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {

frontend/src/constants/theme.ts

@@ -129,6 +129,10 @@ const themeColors = {
 		salmon2: '#FFAB91',
 		salmon3: '#E0876A',
 	},
+	/* Series palette (dark). Hues in the red band are deliberately absent: red is
+	   reserved for thresholds and error states, so an arbitrary series must never
+	   claim it. generateColor indexes by `hash % Object.keys(...).length`, so
+	   adding or removing an entry recolors every existing chart. */
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',
@@ -152,13 +156,13 @@ const themeColors = {
 
 		// Oranges (3)
 		festivalOrange: '#F2994A',
-		coralOrange: '#E17055',
+		amber1: '#E1A155',
 		pumpkin: '#FF7F50',
 
-		// Reds (3)
-		radicalRed: '#FF1A66',
-		crimsonRed: '#EB5757',
-		fireRed: '#E10600',
+		// Olives / Greens (3)
+		olive1: '#DFC33A',
+		olive2: '#D5E55D',
+		green7: '#81C220',
 
 		// Pinks (3)
 		hotPink: '#E84393',
@@ -191,9 +195,9 @@ const themeColors = {
 		orange1: '#D35400',
 		orange2: '#E67E22',
 		orange3: '#F5B041',
-		red1: '#C0392B',
-		red2: '#E74C3C',
-		red3: '#EC7063',
+		green8: '#5AC02B',
+		green9: '#48E043',
+		green10: '#68E788',
 		pink1: '#D81B60',
 		pink2: '#E91E63',
 		pink3: '#F06292',
@@ -212,9 +216,9 @@ const themeColors = {
 		coral1: '#E67E22',
 		coral2: '#F39C12',
 		coral3: '#F5B041',
-		crimson1: '#C0392B',
-		crimson2: '#E74C3C',
-		crimson3: '#EC7063',
+		teal7: '#2BC07B',
+		teal8: '#43E0C5',
+		teal9: '#68D9E7',
 		violet1: '#8E44AD',
 		violet2: '#9B59B6',
 		violet3: '#BB8FCE',
@@ -224,18 +228,18 @@ const themeColors = {
 		forest1: '#27AE60',
 		forest2: '#2ECC71',
 		forest3: '#58D68D',
-		blush1: '#FF6F91',
+		cyan4: '#83C2EB',
 		blush2: '#FF85A2',
 		blush3: '#FFA0B3',
 		lavender1: '#9B59B6',
 		lavender2: '#AF7AC5',
 		lavender3: '#C39BD3',
-		tomato1: '#E74C3C',
-		tomato2: '#EC7063',
-		tomato3: '#F1948A',
-		salmon1: '#FF6B6B',
-		salmon2: '#FF8787',
-		salmon3: '#FFA1A1',
+		blue7: '#4375E0',
+		blue8: '#686DE7',
+		indigo1: '#A68EED',
+		indigo2: '#B980EA',
+		purple6: '#EE98D9',
+		olive3: '#F2F0AE',
 		mustard1: '#F1C40F',
 		mustard2: '#F7DC6F',
 		mustard3: '#F9E79F',
@@ -254,9 +258,9 @@ const themeColors = {
 		blue4: '#2874A6',
 		blue5: '#2E86C1',
 		blue6: '#3498DB',
-		red4: '#C0392B',
-		red5: '#E74C3C',
-		red6: '#EC7063',
+		purple4: '#A52BC0',
+		purple5: '#E043D0',
+		magenta4: '#E768B5',
 		orange4: '#D35400',
 		orange5: '#E67E22',
 		orange6: '#EB984E',
@@ -267,18 +271,19 @@ const themeColors = {
 		gold5: '#F1C40F',
 		gold6: '#F4D03F',
 	},
+	/* Series palette (light). Same red-free constraint as chartcolors above. */
 	lightModeColor: {
-		radicalRed: '#D81B60',
+		magenta1: '#D81B60',
 
 		dodgerBlueDark: '#1E5BD9',
 		steelgrey: '#344B6B',
 		steelpurple: '#5E548E',
 		steelindigo: '#8E4A7C',
 		steelpink: '#B63A6F',
-		steelcoral: '#E14B5A',
+		amber1: '#E1A14B',
 		steelorange: '#E76F2F',
 		steelgold: '#E09B00',
-		steelrust: '#C93A50',
+		olive1: '#C9BD3A',
 		steelgreen: '#2F7D69',
 
 		mediumOrchidDark: '#8E24AA',
@@ -286,17 +291,17 @@ const themeColors = {
 		seaGreen: '#1E7F5A',
 		turquoiseBlueDark: '#007EA7',
 		silverDark: '#5F5F5F',
-		outrageousOrangeDark: '#E64A19',
-		roseBudDark: '#D84315',
+		green1: '#ACDB24',
+		green2: '#66CC21',
 		deepSkyBlueDark: '#0277BD',
 		royalBlue: '#2A4FDB',
 
 		avocadoDark: '#6B6B1E',
 		mintGreenDark: '#2E9E55',
-		chestnut: '#8B3A3A',
+		green3: '#3F8B3A',
 		limaDark: '#5C7F00',
 		olive: '#6E7F00',
-		beautyBushDark: '#C93C3C',
+		green4: '#3CC964',
 
 		danube: '#4F6FB3',
 		oliveDrab: '#4F7F1A',
@@ -304,13 +309,13 @@ const themeColors = {
 		electricLimeDark: '#6B8F00',
 		robin: '#2F4FCC',
 
-		harleyOrange: '#CC2E12',
+		teal1: '#1FBF83',
 		gladeGreen: '#4F7F46',
 		hemlock: '#5C5C45',
 		vidaLoca: '#3D6B00',
 		rust: '#993300',
 
-		red: '#C62828',
+		teal2: '#28C6C1',
 		blue: '#1A237E',
 		green: '#1B7F3A',
 		purple: '#6A1B9A',
@@ -320,7 +325,7 @@ const themeColors = {
 		brown: '#7A3A1E',
 		teal: '#006D6F',
 		limeDark: '#4C8C2B',
-		maroon: '#6D1B1B',
+		cyan1: '#1B546D',
 		navy: '#0D1B5E',
 		gray: '#616161',
 
@@ -328,25 +333,25 @@ const themeColors = {
 		indigo: '#303F9F',
 		slateGray: '#556B7C',
 		chocolate: '#9C4A1A',
-		tomato: '#E53935',
+		blue1: '#3B74DF',
 		steelBlue: '#3A6EA5',
 
 		peruDark: '#B35E00',
 		darkOliveGreen: '#445B1F',
-		indianRed: '#B04040',
+		blue2: '#4041B0',
 		mediumSlateBlue: '#5C6BC0',
-		rosyBrownDark: '#A94444',
+		indigo1: '#6644A9',
 		darkSlateGray: '#2E4A4A',
 
 		fuchsia: '#C511C5',
-		salmonDark: '#E64A3C',
-		darkSalmonDark: '#C85A3A',
+		indigo2: '#AD42E0',
+		purple1: '#C83AC5',
 		paleVioletRedDark: '#C2186A',
 
 		mediumPurple: '#7E57C2',
 		darkOrchid: '#7B1FA2',
 		mediumSeaGreenDark: '#2E8B57',
-		lightCoralDark: '#E57373',
+		purple2: '#E573BC',
 
 		gold: '#D4AF37',
 		sandyBrownDark: '#C76A15',

frontend/src/container/AIAssistant/AIAssistantDrawer/AIAssistantDrawer.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Drawer } from 'antd';
 import ROUTES from 'constants/routes';
 import { Maximize2, Plus, X } from '@signozhq/icons';
@@ -53,25 +53,22 @@ export default function AIAssistantDrawer(): JSX.Element {
 					</div>
 
 					<div>
-						<Tooltip title="New conversation">
+						<TooltipSimple title="New conversation">
 							<Button
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={handleNewConversation}
 								aria-label="New conversation"
 							>
 								<Plus size={16} />
 							</Button>
-						</Tooltip>
+						</TooltipSimple>
 
-						<Tooltip title="Open full screen">
+						<TooltipSimple title="Open full screen">
 							<Button
-								disabledTooltip={undefined}
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={handleExpand}
 								disabled={!activeConversationId}
@@ -79,20 +76,19 @@ export default function AIAssistantDrawer(): JSX.Element {
 							>
 								<Maximize2 size={16} />
 							</Button>
-						</Tooltip>
+						</TooltipSimple>
 
-						<Tooltip title="Close">
+						<TooltipSimple title="Close">
 							<Button
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={closeDrawer}
 								aria-label="Close drawer"
 							>
 								<X size={16} />
 							</Button>
-						</Tooltip>
+						</TooltipSimple>
 					</div>
 				</div>
 			}

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

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useHistory, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
 import { History, Maximize2, Minus, Plus, X } from '@signozhq/icons';
 import Noz from 'components/Noz/Noz';
@@ -159,73 +159,62 @@ export default function AIAssistantModal(): JSX.Element | null {
 						</div>
 
 						<div className={styles.actions}>
-							<Tooltip title={showHistory ? 'Back to chat' : 'Conversations'}>
+							<TooltipSimple title={showHistory ? 'Back to chat' : 'Conversations'}>
 								<Button
 									variant="ghost"
-									size="sm"
-									icon
+									size="icon"
 									color="secondary"
 									onClick={(): void => setShowHistory((v) => !v)}
 									aria-label="Toggle conversations"
 									className={showHistory ? styles.toggleBtnActive : ''}
-								>
-									<History size={14} />
-								</Button>
-							</Tooltip>
+									prefix={<History size={14} />}
+								/>
+							</TooltipSimple>
 
-							<Tooltip title="New conversation">
+							<TooltipSimple title="New conversation">
 								<Button
 									variant="ghost"
-									size="sm"
-									icon
+									size="icon"
 									color="secondary"
 									onClick={handleNew}
 									aria-label="New conversation"
-								>
-									<Plus size={14} />
-								</Button>
-							</Tooltip>
+									prefix={<Plus size={14} />}
+								/>
+							</TooltipSimple>
 
-							<Tooltip title="Open full screen">
+							<TooltipSimple title="Open full screen">
 								<Button
-									disabledTooltip={undefined}
 									variant="ghost"
-									size="sm"
-									icon
+									size="icon"
 									color="secondary"
 									onClick={handleExpand}
 									disabled={!activeConversationId}
 									aria-label="Open full screen"
-								>
-									<Maximize2 size={14} />
-								</Button>
-							</Tooltip>
+									prefix={<Maximize2 size={14} />}
+								/>
+							</TooltipSimple>
 
-							<Tooltip title="Minimize to side panel">
+							<TooltipSimple title="Minimize to side panel">
 								<Button
 									variant="ghost"
-									size="sm"
-									icon
+									size="icon"
 									color="secondary"
 									onClick={handleMinimize}
 									aria-label="Minimize to side panel"
-								>
-									<Minus size={14} />
-								</Button>
-							</Tooltip>
+									prefix={<Minus size={14} />}
+								/>
+							</TooltipSimple>
 
-							<Tooltip title="Close">
+							<TooltipSimple title="Close">
 								<Button
 									variant="ghost"
-									size="sm"
-									icon
+									size="icon"
 									color="secondary"
 									onClick={closeModal}
 									aria-label="Close"
-								>
-									<X size={14} />
-								</Button>
-							</Tooltip>
+									prefix={<X size={14} />}
+								/>
+							</TooltipSimple>
 						</div>
 					</div>
 

frontend/src/container/AIAssistant/AIAssistantPanel/AIAssistantPanel.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { matchPath, useHistory, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
 import { History, Maximize2, Plus, X } from '@signozhq/icons';
 import Noz from 'components/Noz/Noz';
@@ -144,59 +144,50 @@ export default function AIAssistantPanel(): JSX.Element | null {
 					</div>
 
 					<div className={styles.actions}>
-						<Tooltip title={showHistory ? 'Back to chat' : 'Conversations'}>
+						<TooltipSimple title={showHistory ? 'Back to chat' : 'Conversations'}>
 							<Button
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={(): void => setShowHistory((v) => !v)}
 								aria-label="Toggle conversations"
-							>
-								<History size={14} />
-							</Button>
-						</Tooltip>
+								prefix={<History size={14} />}
+							/>
+						</TooltipSimple>
 
-						<Tooltip title="New conversation">
+						<TooltipSimple title="New conversation">
 							<Button
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={handleNew}
 								aria-label="New conversation"
-							>
-								<Plus size={14} />
-							</Button>
-						</Tooltip>
+								prefix={<Plus size={14} />}
+							/>
+						</TooltipSimple>
 
-						<Tooltip title="Open full screen">
+						<TooltipSimple title="Open full screen">
 							<Button
-								disabledTooltip={undefined}
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={handleExpand}
 								disabled={!activeConversationId}
 								aria-label="Open full screen"
-							>
-								<Maximize2 size={14} />
-							</Button>
-						</Tooltip>
+								prefix={<Maximize2 size={14} />}
+							/>
+						</TooltipSimple>
 
-						<Tooltip title="Close">
+						<TooltipSimple title="Close">
 							<Button
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								onClick={closeDrawer}
 								aria-label="Close panel"
-							>
-								<X size={14} />
-							</Button>
-						</Tooltip>
+								prefix={<X size={14} />}
+							/>
+						</TooltipSimple>
 					</div>
 				</div>
 

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { matchPath, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import Noz from 'components/Noz/Noz';
@@ -43,18 +43,15 @@ export default function AIAssistantTrigger(): JSX.Element | null {
 	}
 
 	return (
-		<Tooltip title={NOZ_TOOLTIP_TITLE}>
+		<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
 			<Button
-				size="md"
 				variant="solid"
 				color="primary"
-				icon
 				className={`${styles.trigger} noz-wave`}
 				onClick={handleOpen}
 				aria-label="Open Noz"
-			>
-				<Noz size={24} />
-			</Button>
-		</Tooltip>
+				prefix={<Noz size={24} />}
+			/>
+		</TooltipSimple>
 	);
 }

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

@@ -12,7 +12,7 @@ import {
 import cx from 'classnames';
 import { v4 as uuidv4 } from 'uuid';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type { MessageActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 import {
 	ApplyFilterSignalDTO,
@@ -631,7 +631,6 @@ export default function ActionsSection({
 
 					const chip = (
 						<Button
-							disabledTooltip={undefined}
 							variant="outlined"
 							color="secondary"
 							size="sm"
@@ -646,9 +645,9 @@ export default function ActionsSection({
 					);
 
 					return tooltip ? (
-						<Tooltip key={key} title={tooltip}>
+						<TooltipSimple key={key} title={tooltip}>
 							{chip}
-						</Tooltip>
+						</TooltipSimple>
 					) : (
 						<span key={key}>{chip}</span>
 					);

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

@@ -10,8 +10,8 @@ import {
 	DialogSubtitle,
 	DialogTitle,
 } from '@signozhq/ui/dialog';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type {
 	ApprovalEventDTO,
 	ApprovalEventDTODiff,
@@ -101,18 +101,16 @@ export default function ApprovalCard({
 				<div className={styles.diffSection}>
 					<div className={styles.diffHeader}>
 						<span className={styles.diffHeaderLabel}>Diff</span>
-						<Tooltip title="Expand diff">
+						<TooltipSimple title="Expand diff">
 							<Button
 								variant="link"
 								size="sm"
 								color="secondary"
-								icon
 								onClick={(): void => setDiffExpanded(true)}
 								aria-label="Expand diff"
-							>
-								<Maximize2 size={12} />
-							</Button>
-						</Tooltip>
+								prefix={<Maximize2 size={12} />}
+							/>
+						</TooltipSimple>
 					</div>
 					<DiffView diff={approval.diff} />
 				</div>
@@ -134,9 +132,7 @@ export default function ApprovalCard({
 					<div className={styles.diffModalBody}>
 						<p className={styles.diffModalSummary}>{approval.summary}</p>
 						<div className={styles.diffToolbarRow}>
-							<ToggleGroup
-								variant="outlined"
-								color="secondary"
+							<ToggleGroupSimple
 								type="single"
 								size="sm"
 								value={viewMode}
@@ -160,9 +156,7 @@ export default function ApprovalCard({
 									},
 								]}
 							/>
-							<ToggleGroup
-								variant="outlined"
-								color="secondary"
+							<ToggleGroupSimple
 								type="multiple"
 								size="sm"
 								value={wrapText ? ['wrap'] : []}
@@ -191,8 +185,6 @@ export default function ApprovalCard({
 
 			<div className={styles.actions}>
 				<Button
-					disabledTooltip={undefined}
-					color="primary"
 					variant="solid"
 					size="sm"
 					onClick={handleApprove}
@@ -202,7 +194,6 @@ export default function ApprovalCard({
 					Approve
 				</Button>
 				<Button
-					disabledTooltip={undefined}
 					variant="outlined"
 					size="sm"
 					color="secondary"
@@ -474,7 +465,7 @@ function CopyButton({ text, label }: CopyButtonProps): JSX.Element {
 	};
 
 	return (
-		<Tooltip title={copied ? `Copied ${label}` : `Copy ${label}`}>
+		<TooltipSimple title={copied ? `Copied ${label}` : `Copy ${label}`}>
 			<Button
 				variant="ghost"
 				size="sm"
@@ -484,6 +475,6 @@ function CopyButton({ text, label }: CopyButtonProps): JSX.Element {
 			>
 				{copied ? <Check size={12} /> : <Copy size={12} />}
 			</Button>
-		</Tooltip>
+		</TooltipSimple>
 	);
 }

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

@@ -12,7 +12,7 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
 import { toast } from '@signozhq/ui/sonner';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type { UploadFile } from 'antd';
 import getSessionStorage from 'api/browser/sessionstorage/get';
 import setSessionStorage from 'api/browser/sessionstorage/set';
@@ -900,10 +900,8 @@ export default function ChatInput({
 						<div key={f.uid} className={styles.attachmentChip}>
 							<span className={styles.attachmentName}>{f.name}</span>
 							<Button
-								color="secondary"
 								variant="ghost"
-								size="sm"
-								icon
+								size="icon"
 								className={styles.attachmentRemove}
 								onClick={(): void => removeFile(f.uid)}
 								aria-label={`Remove ${f.name}`}
@@ -927,7 +925,7 @@ export default function ChatInput({
 								<div className={styles.contextTagContent}>
 									<Badge
 										color="secondary"
-										variant="outlined"
+										variant="outline"
 										className={styles.contextTagCategory}
 									>
 										{category}
@@ -937,15 +935,13 @@ export default function ChatInput({
 								{onDismissAutoContext && (
 									<Button
 										variant="link"
-										size="sm"
-										icon
+										size="icon"
 										color="secondary"
 										className={styles.contextTagRemove}
 										onClick={(): void => onDismissAutoContext(key)}
 										aria-label={`Remove ${category}: ${label} context`}
-									>
-										<X size={10} />
-									</Button>
+										prefix={<X size={10} />}
+									></Button>
 								)}
 							</div>
 						);
@@ -958,7 +954,7 @@ export default function ChatInput({
 							<div className={styles.contextTagContent}>
 								<Badge
 									color="primary"
-									variant="outlined"
+									variant="outline"
 									className={styles.contextTagCategory}
 								>
 									{contextItem.category}
@@ -967,17 +963,15 @@ export default function ChatInput({
 							</div>
 							<Button
 								variant="link"
-								size="sm"
-								icon
+								size="icon"
 								color="secondary"
 								className={styles.contextTagRemove}
 								onClick={(): void =>
 									removeContext(contextItem.category, contextItem.entityId)
 								}
 								aria-label={`Remove ${contextItem.category}: ${contextItem.value} context`}
-							>
-								<X size={10} />
-							</Button>
+								prefix={<X size={10} />}
+							></Button>
 						</div>
 					))}
 				</div>
@@ -1026,7 +1020,6 @@ export default function ChatInput({
 					>
 						<PopoverTrigger asChild>
 							<Button
-								disabledTooltip={undefined}
 								variant="solid"
 								color="secondary"
 								size="sm"
@@ -1066,6 +1059,7 @@ export default function ChatInput({
 												variant="ghost"
 												color="secondary"
 												size="sm"
+												role="tab"
 												id={`ai-context-tab-${category}`}
 												// Single stable panel id shared by every tab: only the
 												// active category's tabpanel is rendered, so per-category
@@ -1184,20 +1178,18 @@ export default function ChatInput({
 								aria-live="polite"
 								aria-label="Recording voice input"
 							>
-								<Tooltip title="Discard recording">
+								<TooltipSimple title="Discard recording">
 									<Button
 										type="button"
 										variant="ghost"
-										size="sm"
-										icon
+										size="icon"
 										color="secondary"
 										className={cx(styles.micDiscard, styles.secondary)}
 										onClick={handleDiscard}
 										aria-label="Discard recording"
-									>
-										<X size={12} />
-									</Button>
-								</Tooltip>
+										prefix={<X size={12} />}
+									/>
+								</TooltipSimple>
 								<span className={styles.micWaves} aria-hidden="true">
 									<span />
 									<span />
@@ -1208,67 +1200,56 @@ export default function ChatInput({
 									<span />
 									<span />
 								</span>
-								<Tooltip title="Stop and send">
+								<TooltipSimple title="Stop and send">
 									<Button
 										type="button"
-										variant="solid"
-										size="sm"
-										icon
-										color="danger"
+										variant="ghost"
+										size="icon"
+										color="destructive"
 										className={cx(styles.micStop, styles.destructive)}
 										onClick={handleStopAndSend}
 										aria-label="Stop and send"
-									>
-										<Square size={9} fill="currentColor" strokeWidth={0} />
-									</Button>
-								</Tooltip>
+										prefix={<Square size={9} fill="currentColor" strokeWidth={0} />}
+									/>
+								</TooltipSimple>
 							</div>
 						) : (
-							<Tooltip title="Voice input">
+							<TooltipSimple title="Voice input">
 								<Button
-									disabledTooltip={undefined}
-									color="secondary"
 									variant="ghost"
-									size="sm"
-									icon
+									size="icon"
 									onClick={(): void => startVoiceInput(VoiceInputSource.Button)}
 									disabled={disabled}
 									aria-label="Start voice input"
 									className={styles.micBtn}
-								>
-									<Mic size={14} />
-								</Button>
-							</Tooltip>
+									prefix={<Mic size={14} />}
+								/>
+							</TooltipSimple>
 						))}
 
 					{isStreaming && onCancel ? (
-						<Tooltip title="Stop generating">
+						<TooltipSimple title="Stop generating">
 							<Button
 								variant="solid"
-								size="sm"
-								icon
-								color="danger"
+								size="icon"
+								color="destructive"
 								onClick={onCancel}
 								aria-label="Stop generating"
-							>
-								<Square size={10} fill="currentColor" strokeWidth={0} />
-							</Button>
-						</Tooltip>
+								prefix={<Square size={10} fill="currentColor" strokeWidth={0} />}
+							/>
+						</TooltipSimple>
 					) : (
-						<Tooltip title="Send message">
+						<TooltipSimple title="Send message">
 							<Button
-								disabledTooltip={undefined}
 								variant="solid"
-								size="sm"
-								icon
+								size="icon"
 								color="primary"
 								onClick={isListening ? handleStopAndSend : handleSend}
 								disabled={disabled || (!text.trim() && pendingFiles.length === 0)}
 								aria-label="Send message"
-							>
-								<Send size={14} />
-							</Button>
-						</Tooltip>
+								prefix={<Send size={14} />}
+							/>
+						</TooltipSimple>
 					)}
 				</div>
 			</div>

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

@@ -58,7 +58,7 @@ export default function ContextPickerEmptyState({
 				color="primary"
 				className={styles.contextPopoverEmptyCta}
 				onClick={(): void => onPrefill(prefill)}
-				testId={`ai-context-empty-cta-${category}`}
+				data-testid={`ai-context-empty-cta-${category}`}
 				prefix={<Sparkles size={14} />}
 			>
 				<span className={styles.contextPopoverEmptyCtaLabel}>{ctaLabel}</span>

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

@@ -140,8 +140,6 @@ export default function ClarificationForm({
 
 			<div className={styles.actions}>
 				<Button
-					disabledTooltip={undefined}
-					size="md"
 					variant="solid"
 					color="primary"
 					onClick={handleSubmit}
@@ -151,8 +149,6 @@ export default function ClarificationForm({
 					Submit
 				</Button>
 				<Button
-					disabledTooltip={undefined}
-					size="md"
 					variant="outlined"
 					color="secondary"
 					onClick={handleCancel}
@@ -314,7 +310,6 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 		return (
 			<div className={styles.field}>
 				<Checkbox
-					color="primary"
 					className={styles.checkboxLabel}
 					value={checked}
 					onChange={(): void => onChange(!checked)}
@@ -387,7 +382,6 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 				<div className={styles.checkboxGroup}>
 					{options?.map((opt) => (
 						<Checkbox
-							color="primary"
 							key={opt}
 							className={styles.checkboxLabel}
 							value={regularSelected.includes(opt)}
@@ -398,7 +392,6 @@ function FieldInput({ field, value, onChange }: FieldInputProps): JSX.Element {
 					))}
 					{allowCustom && (
 						<Checkbox
-							color="primary"
 							className={styles.checkboxLabel}
 							value={isCustom}
 							onChange={toggleCustom}

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

@@ -6,7 +6,7 @@ import { getAbsoluteUrl } from 'utils/basePath';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { toast } from '@signozhq/ui/sonner';
-import { DropdownMenuSimple } from 'components/DropdownMenu/DropdownMenuSimple';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 
 import {
 	Archive,
@@ -207,18 +207,17 @@ export default function ConversationItem({
 					<DropdownMenuSimple
 						menu={{ items: menuItems }}
 						align="end"
+						sideOffset={4}
 						className={styles.menu}
 					>
 						<Button
 							variant="link"
-							size="sm"
-							icon
-							color="secondary"
+							size="icon"
+							color="none"
 							className={styles.btn}
 							aria-label="Conversation actions"
-						>
-							<EllipsisVertical size={12} />
-						</Button>
+							prefix={<EllipsisVertical size={12} />}
+						/>
 					</DropdownMenuSimple>
 				</div>
 			)}

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

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import cx from 'classnames';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Plus, Search } from '@signozhq/icons';
 
 import logEvent from 'api/common/logEvent';
@@ -171,7 +171,7 @@ export default function ConversationsList({
 				{isLoadingThreads && <HeaderLoadingDots />}
 
 				{!isLoadingThreads && showAddNewConversation && (
-					<Tooltip title="New conversation">
+					<TooltipSimple title="New conversation">
 						<Button
 							variant="solid"
 							size="sm"
@@ -181,7 +181,7 @@ export default function ConversationsList({
 						>
 							<Plus size={12} />
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 				)}
 			</div>
 

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

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { useCopyToClipboard } from 'react-use';
 import { Button } from '@signozhq/ui/button';
 import { DialogWrapper } from '@signozhq/ui/dialog';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { Check, Copy, RefreshCw, ThumbsDown, ThumbsUp } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
@@ -174,11 +174,10 @@ export default function MessageFeedback({
 		<>
 			<div className={cx(styles.feedback, { [styles.visible]: isLastAssistant })}>
 				<div className={styles.actions}>
-					<Tooltip title={copied ? 'Copied!' : 'Copy'}>
+					<TooltipSimple title={copied ? 'Copied!' : 'Copy'}>
 						<Button
 							className={styles.btn}
-							size="sm"
-							icon
+							size="icon"
 							variant="ghost"
 							onClick={handleCopy}
 							color="secondary"
@@ -186,15 +185,14 @@ export default function MessageFeedback({
 						>
 							{copied ? <Check size={12} /> : <Copy size={12} />}
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 
-					<Tooltip title={VOTE_LABEL[FeedbackRatingDTO.positive].tooltip}>
+					<TooltipSimple title={VOTE_LABEL[FeedbackRatingDTO.positive].tooltip}>
 						<Button
 							className={cx(styles.btn, {
 								[styles.votedUp]: vote === FeedbackRatingDTO.positive,
 							})}
-							size="sm"
-							icon
+							size="icon"
 							variant="ghost"
 							color="secondary"
 							onClick={(): void => handleVote(FeedbackRatingDTO.positive)}
@@ -203,15 +201,14 @@ export default function MessageFeedback({
 						>
 							<ThumbsUp size={12} />
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 
-					<Tooltip title={VOTE_LABEL[FeedbackRatingDTO.negative].tooltip}>
+					<TooltipSimple title={VOTE_LABEL[FeedbackRatingDTO.negative].tooltip}>
 						<Button
 							className={cx(styles.btn, {
 								[styles.votedDown]: vote === FeedbackRatingDTO.negative,
 							})}
-							size="sm"
-							icon
+							size="icon"
 							variant="ghost"
 							color="secondary"
 							onClick={(): void => handleVote(FeedbackRatingDTO.negative)}
@@ -220,14 +217,13 @@ export default function MessageFeedback({
 						>
 							<ThumbsDown size={12} />
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 
 					{onRegenerate && (
-						<Tooltip title="Regenerate">
+						<TooltipSimple title="Regenerate">
 							<Button
 								className={styles.btn}
-								size="sm"
-								icon
+								size="icon"
 								variant="ghost"
 								color="secondary"
 								onClick={onRegenerate}
@@ -235,7 +231,7 @@ export default function MessageFeedback({
 							>
 								<RefreshCw size={12} />
 							</Button>
-						</Tooltip>
+						</TooltipSimple>
 					)}
 				</div>
 
@@ -253,19 +249,13 @@ export default function MessageFeedback({
 				footer={
 					<div className={styles.feedbackDialogFooter}>
 						<Button
-							size="md"
 							variant="solid"
 							color="secondary"
 							onClick={(): void => setIsNegativeDialogOpen(false)}
 						>
 							Cancel
 						</Button>
-						<Button
-							size="md"
-							variant="solid"
-							color="primary"
-							onClick={handleSubmitNegative}
-						>
+						<Button variant="solid" color="primary" onClick={handleSubmitNegative}>
 							Send feedback
 						</Button>
 					</div>

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

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Check, Copy } from '@signozhq/icons';
 
 import logEvent from 'api/common/logEvent';
@@ -40,11 +40,10 @@ export default function UserMessageActions({
 
 	return (
 		<div className={styles.actions}>
-			<Tooltip title={copied ? 'Copied!' : 'Copy'}>
+			<TooltipSimple title={copied ? 'Copied!' : 'Copy'}>
 				<Button
 					className={styles.btn}
-					size="sm"
-					icon
+					size="icon"
 					variant="ghost"
 					color="secondary"
 					onClick={handleCopy}
@@ -52,7 +51,7 @@ export default function UserMessageActions({
 				>
 					{copied ? <Check size={12} /> : <Copy size={12} />}
 				</Button>
-			</Tooltip>
+			</TooltipSimple>
 		</div>
 	);
 }

frontend/src/container/AIAssistant/components/blocks/ActionBlock/ActionBlock.tsx

@@ -189,16 +189,11 @@ export default function ActionBlock({
 			)}
 
 			<div className={styles.actions}>
-				<Button color="primary" variant="solid" size="sm" onClick={execute}>
+				<Button variant="solid" size="sm" onClick={execute}>
 					<Check size={12} />
 					Apply
 				</Button>
-				<Button
-					color="secondary"
-					variant="outlined"
-					size="sm"
-					onClick={handleDismiss}
-				>
+				<Button variant="outlined" size="sm" onClick={handleDismiss}>
 					<X size={12} />
 					Dismiss
 				</Button>

frontend/src/container/AIAssistant/components/blocks/ConfirmBlock/ConfirmBlock.tsx

@@ -83,17 +83,11 @@ export default function ConfirmBlock({
 		<div className={blockStyles.block}>
 			{message && <p className={styles.message}>{message}</p>}
 			<div className={styles.actions}>
-				<Button
-					color="primary"
-					variant="solid"
-					size="sm"
-					onClick={(): void => handle('accepted')}
-				>
+				<Button variant="solid" size="sm" onClick={(): void => handle('accepted')}>
 					<Check size={12} />
 					{acceptLabel}
 				</Button>
 				<Button
-					color="secondary"
 					variant="outlined"
 					size="sm"
 					onClick={(): void => handle('rejected')}