feat(bottom-strip): add the layout shell behind a feature flag

Mounts a 24px strip at the bottom of the app under the same gate as the side
nav, behind the SAVED_VIEW_ENABLED localStorage flag shared with saved views.
Shows the build version on the left for now; the per-page left slot and the
right side actions come in later tickets.

To give the strip a stable box, `.app-content` becomes a column flex and
`LayoutContent` takes the height left over instead of `height: 100%`. Fixed
bottom elements read `--bottom-strip-height`, which only exists while the strip
is mounted, so with the flag off every offset falls back to where it is today.

Hides nothing. Each later ticket hides the piece it replaces.

.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

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/localStorage.ts

@@ -47,4 +47,5 @@ export enum LOCALSTORAGE {
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
 	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
+	SAVED_VIEW_ENABLED = 'SAVED_VIEW_ENABLED',
 }

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

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

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import { Checkbox } from '@signozhq/ui/checkbox';
-import { RadioGroup } from '@signozhq/ui/radio-group';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 
 import { AIAssistantEvents } from '../../../events';
 import { useAIAssistantAnalyticsContext } from '../../../hooks/useAIAssistantAnalyticsContext';
@@ -83,24 +83,27 @@ export default function InteractiveQuestion({
 
 			{type === 'radio' ? (
 				<RadioGroup
-					color="primary"
-					textOverflow="wrap"
 					className={styles.options}
 					onChange={(value): void => {
 						setSelected([value]);
 						handleSubmit([value]);
 					}}
-					items={normalized.map((opt) => ({
-						value: opt.value,
-						label: <span className={styles.option}>{opt.label}</span>,
-					}))}
-				/>
+				>
+					{normalized.map((opt) => (
+						<RadioGroupItem
+							key={opt.value}
+							value={opt.value}
+							className={styles.option}
+						>
+							{opt.label}
+						</RadioGroupItem>
+					))}
+				</RadioGroup>
 			) : (
 				<>
 					<div className={cx(styles.options, styles.checkbox)}>
 						{normalized.map((opt) => (
 							<Checkbox
-								color="primary"
 								key={opt.value}
 								value={selected.includes(opt.value)}
 								onChange={(checked): void => {
@@ -117,8 +120,6 @@ export default function InteractiveQuestion({
 						))}
 					</div>
 					<Button
-						disabledTooltip={undefined}
-						color="primary"
 						variant="solid"
 						size="sm"
 						className={styles.submit}

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, 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 SyntaxHighlighter, {
 	a11yDark,
@@ -127,7 +127,7 @@ function CopyButton({ text }: { text: string }): JSX.Element {
 	};
 
 	return (
-		<Tooltip title={copied ? 'Copied' : 'Copy code'}>
+		<TooltipSimple title={copied ? 'Copied' : 'Copy code'}>
 			<Button
 				variant="ghost"
 				size="sm"
@@ -138,6 +138,6 @@ function CopyButton({ text }: { text: string }): JSX.Element {
 			>
 				{copied ? <Check size={12} /> : <Copy size={12} />}
 			</Button>
-		</Tooltip>
+		</TooltipSimple>
 	);
 }

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx

@@ -320,7 +320,6 @@ function AnomalyAlertEvaluationView({
 							<div className="anomaly-alert-evaluation-view-series-list-items">
 								{filteredSeriesKeys.length > 0 && (
 									<Checkbox
-										color="primary"
 										className="anomaly-alert-evaluation-view-series-list-item"
 										name="series"
 										value={selectedSeries === null}
@@ -333,7 +332,6 @@ function AnomalyAlertEvaluationView({
 								{filteredSeriesKeys.map((seriesKey) => (
 									<div key={seriesKey}>
 										<Checkbox
-											color="primary"
 											className="anomaly-alert-evaluation-view-series-list-item"
 											key={seriesKey}
 											name="series"

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Spacing } from '@signozhq/design-tokens';
 import { Button, Drawer } 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 DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
@@ -225,13 +225,11 @@ function DomainDetails({
 						timeRange={modalTimeRange}
 					/>
 					<div className="views-tabs-container">
-						<ToggleGroup
-							variant="outlined"
-							color="secondary"
+						<ToggleGroupSimple
 							type="single"
 							onChange={handleTabChange}
 							value={selectedView}
-							size="md"
+							size="lg"
 							items={[
 								{ value: VIEW_TYPES.ALL_ENDPOINTS, label: 'All Endpoints' },
 								{ value: VIEW_TYPES.ENDPOINT_STATS, label: 'Endpoint(s) Stats' },

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -171,12 +171,7 @@ function TopErrors({
 					/>
 				</div>
 				<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-					<Switch
-						color="primary"
-						textPlacement="right"
-						value={showStatusCodeErrors}
-						onChange={setShowStatusCodeErrors}
-					/>
+					<Switch value={showStatusCodeErrors} onChange={setShowStatusCodeErrors} />
 					<span style={{ color: 'white', fontSize: '14px' }}>
 						Status Message Exists
 					</span>