fix: tag container styles in qb

Co-authored-by: Gaurav Tewari <tewarig@users.noreply.github.com>

conf/example.yaml

@@ -68,6 +68,12 @@ web:
     appcues:
       # Whether to enable Appcues in web.
       enabled: true
+    sentry:
+      # Whether to enable Sentry in web.
+      enabled: true
+    pylon:
+      # Whether to enable Pylon in web.
+      enabled: true
 
 ##################### Cache #####################
 cache:

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

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

deploy/docker-swarm/docker-compose.yaml

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

deploy/docker/docker-compose.ha.yaml

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

deploy/docker/docker-compose.yaml

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

docs/api/openapi.yml

@@ -3237,8 +3237,20 @@ components:
           items:
             $ref: '#/components/schemas/ErrorsResponseerroradditional'
           type: array
+        invalidReferences:
+          items:
+            type: string
+          type: array
         message:
           type: string
+        retry:
+          $ref: '#/components/schemas/ErrorsResponseretryjson'
+        suggestions:
+          items:
+            type: string
+          type: array
+        type:
+          type: string
         url:
           type: string
       required:
@@ -3250,6 +3262,11 @@ components:
         message:
           type: string
       type: object
+    ErrorsResponseretryjson:
+      properties:
+        delay:
+          $ref: '#/components/schemas/TimeDuration'
+      type: object
     FactoryResponse:
       properties:
         healthy:
@@ -7068,6 +7085,13 @@ components:
       required:
       - name
       type: object
+    TypesPostableVerifyResetPasswordToken:
+      properties:
+        token:
+          type: string
+      required:
+      - token
+      type: object
     TypesResetPasswordToken:
       properties:
         expiresAt:
@@ -14849,6 +14873,41 @@ paths:
       summary: Readiness check
       tags:
       - health
+  /api/v2/reset_password_tokens/verify:
+    post:
+      deprecated: false
+      description: This endpoint verifies whether a reset password token exists and
+        is not expired
+      operationId: VerifyResetPasswordToken
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/TypesPostableVerifyResetPasswordToken'
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      summary: Verify a reset password token
+      tags:
+      - users
   /api/v2/roles/{id}/users:
     get:
       deprecated: false

docs/config/web-settings.json

@@ -1,7 +1,9 @@
 {
   "required": [
     "posthog",
-    "appcues"
+    "appcues",
+    "sentry",
+    "pylon"
   ],
   "additionalProperties": false,
   "definitions": {
@@ -28,6 +30,30 @@
         }
       },
       "type": "object"
+    },
+    "Pylon": {
+      "required": [
+        "enabled"
+      ],
+      "additionalProperties": false,
+      "properties": {
+        "enabled": {
+          "type": "boolean"
+        }
+      },
+      "type": "object"
+    },
+    "Sentry": {
+      "required": [
+        "enabled"
+      ],
+      "additionalProperties": false,
+      "properties": {
+        "enabled": {
+          "type": "boolean"
+        }
+      },
+      "type": "object"
     }
   },
   "properties": {
@@ -36,6 +62,12 @@
     },
     "posthog": {
       "$ref": "#/definitions/Posthog"
+    },
+    "pylon": {
+      "$ref": "#/definitions/Pylon"
+    },
+    "sentry": {
+      "$ref": "#/definitions/Sentry"
     }
   },
   "type": "object"

frontend/.oxlintrc.json

@@ -123,6 +123,7 @@
     "react/require-render-return": "error",
     "react/no-unsafe": "off",
     "no-array-constructor": "error",
+    "jsdoc/check-tag-names": "off",
     "@typescript-eslint/no-duplicate-enum-values": "warn",
     // TODO: Change to error after migration to oxlint
     "@typescript-eslint/no-empty-object-type": "error",
@@ -197,10 +198,7 @@
         ]
       }
     ],
-    "max-params": [
-      "warn",
-      3
-    ],
+    "max-params": "off",
     // Warns when functions have more than 3 parameters
     "@typescript-eslint/explicit-function-return-type": "error",
     // Requires explicit return types on functions
@@ -538,7 +536,10 @@
         "signoz/no-raw-absolute-path":"off",
         "no-restricted-globals": "off",
         // Tests need raw localStorage/sessionStorage to seed DOM state for isolation
-        "signoz/no-zustand-getstate-in-hooks": "off"
+        "signoz/no-zustand-getstate-in-hooks": "off",
+        "@typescript-eslint/no-explicit-any": "off", // Tests often need any for mocks/stubs
+        "@typescript-eslint/explicit-module-boundary-types": "off", // Return types not required in tests
+        "@typescript-eslint/explicit-function-return-type": "off" // Same as above rule, don't need to care about return type
       }
     },
     {

frontend/index.html

@@ -112,7 +112,10 @@
 
 		<script>
 			var PYLON_APP_ID = '<%- PYLON_APP_ID %>';
-			if (PYLON_APP_ID) {
+			var pylonSettings =
+				((window.signozBootData || {}).settings || {}).pylon || {};
+			var pylonEnabled = pylonSettings.enabled !== false;
+			if (PYLON_APP_ID && pylonEnabled) {
 				(function () {
 					var e = window;
 					var t = document;

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

@@ -25,8 +25,7 @@ const BANNED_COMPONENTS = {
 	Progress: 'Use @signozhq/ui/progress instead of antd Progress.',
 	Avatar: 'Use @signozhq/ui/avatar instead of antd Avatar.',
 	Divider: 'Use @signozhq/ui/divider Divider instead of antd Divider.',
-	Select:
-		'Use SelectSimple / ComboboxSimple from @signozhq/ui/select or @signozhq/ui/combobox instead of antd Select.',
+	Tag: 'Use @signozhq/ui/badge Bagde instead of antd Tag.',
 };
 
 export default {

frontend/public/locales/en-GB/alerts.json

@@ -4,7 +4,7 @@
 	"no_alerts_found": "No alerts found during the evaluation. This happens when rule condition is unsatisfied. You may adjust the rule threshold and retry.",
 	"button_testrule": "Test Notification",
 	"label_channel_select": "Notification Channels",
-	"placeholder_channel_select": "Select one or more channels",
+	"placeholder_channel_select": "select one or more channels",
 	"channel_select_tooltip": "Leave empty to send this alert on all the configured channels",
 	"preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
 	"preview_chart_threshold_label": "Threshold",

frontend/public/locales/en/alerts.json

@@ -4,7 +4,7 @@
 	"no_alerts_found": "No alerts found during the evaluation. This happens when rule condition is unsatisfied. You may adjust the rule threshold and retry.",
 	"button_testrule": "Test Notification",
 	"label_channel_select": "Notification Channels",
-	"placeholder_channel_select": "Select one or more channels",
+	"placeholder_channel_select": "select one or more channels",
 	"channel_select_tooltip": "Leave empty to send this alert on all the configured channels",
 	"preview_chart_unexpected_error": "An unexpeced error occurred updating the chart, please check your query.",
 	"preview_chart_threshold_label": "Threshold",

frontend/src/AppRoutes/index.tsx

@@ -35,7 +35,6 @@ import { PreferenceContextProvider } from 'providers/preferences/context/Prefere
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { extractDomain } from 'utils/app';
-import { bootSettings } from 'utils/bootData';
 
 import { Home } from './pageComponents';
 import PrivateRoute from './Private';
@@ -292,7 +291,8 @@ function App(): JSX.Element {
 				isLoggedInState &&
 				isChatSupportEnabled &&
 				!showAddCreditCardModal &&
-				(isCloudUser || isEnterpriseSelfHostedUser)
+				(isCloudUser || isEnterpriseSelfHostedUser) &&
+				(window.signozBootData?.settings?.pylon.enabled ?? true)
 			) {
 				const email = user.email || '';
 				const secret = process.env.PYLON_IDENTITY_SECRET || '';
@@ -334,14 +334,20 @@ function App(): JSX.Element {
 
 	useEffect(() => {
 		if (isCloudUser || isEnterpriseSelfHostedUser) {
-			if (bootSettings.posthog.enabled && process.env.POSTHOG_KEY) {
+			if (
+				(window.signozBootData?.settings?.posthog.enabled ?? true) &&
+				process.env.POSTHOG_KEY
+			) {
 				posthog.init(process.env.POSTHOG_KEY, {
 					api_host: 'https://us.i.posthog.com',
 					person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
 				});
 			}
 
-			if (!isSentryInitialized) {
+			if (
+				!isSentryInitialized &&
+				(window.signozBootData?.settings?.sentry.enabled ?? true)
+			) {
 				Sentry.init({
 					dsn: process.env.SENTRY_DSN,
 					tunnel: process.env.TUNNEL_URL,

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

@@ -2051,6 +2051,10 @@ export interface ErrorsResponseerroradditionalDTO {
 	message?: string;
 }
 
+export interface ErrorsResponseretryjsonDTO {
+	delay?: TimeDurationDTO;
+}
+
 export interface ErrorsJSONDTO {
 	/**
 	 * @type string
@@ -2060,10 +2064,23 @@ export interface ErrorsJSONDTO {
 	 * @type array
 	 */
 	errors?: ErrorsResponseerroradditionalDTO[];
+	/**
+	 * @type array
+	 */
+	invalidReferences?: string[];
 	/**
 	 * @type string
 	 */
 	message: string;
+	retry?: ErrorsResponseretryjsonDTO;
+	/**
+	 * @type array
+	 */
+	suggestions?: string[];
+	/**
+	 * @type string
+	 */
+	type?: string;
 	/**
 	 * @type string
 	 */
@@ -8308,6 +8325,13 @@ export interface TypesPostableRoleDTO {
 	name: string;
 }
 
+export interface TypesPostableVerifyResetPasswordTokenDTO {
+	/**
+	 * @type string
+	 */
+	token: string;
+}
+
 export interface TypesResetPasswordTokenDTO {
 	/**
 	 * @type string

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

@@ -48,6 +48,7 @@ import type {
 	TypesPostableInviteDTO,
 	TypesPostableResetPasswordDTO,
 	TypesPostableRoleDTO,
+	TypesPostableVerifyResetPasswordTokenDTO,
 	TypesUpdatableUserDTO,
 	UpdateUserDeprecated200,
 	UpdateUserDeprecatedPathParameters,
@@ -947,6 +948,90 @@ export const useForgotPassword = <
 > => {
 	return useMutation(getForgotPasswordMutationOptions(options));
 };
+/**
+ * This endpoint verifies whether a reset password token exists and is not expired
+ * @summary Verify a reset password token
+ */
+export const verifyResetPasswordToken = (
+	typesPostableVerifyResetPasswordTokenDTO?: BodyType<TypesPostableVerifyResetPasswordTokenDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/reset_password_tokens/verify`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: typesPostableVerifyResetPasswordTokenDTO,
+		signal,
+	});
+};
+
+export const getVerifyResetPasswordTokenMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof verifyResetPasswordToken>>,
+		TError,
+		{ data?: BodyType<TypesPostableVerifyResetPasswordTokenDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof verifyResetPasswordToken>>,
+	TError,
+	{ data?: BodyType<TypesPostableVerifyResetPasswordTokenDTO> },
+	TContext
+> => {
+	const mutationKey = ['verifyResetPasswordToken'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof verifyResetPasswordToken>>,
+		{ data?: BodyType<TypesPostableVerifyResetPasswordTokenDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return verifyResetPasswordToken(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type VerifyResetPasswordTokenMutationResult = NonNullable<
+	Awaited<ReturnType<typeof verifyResetPasswordToken>>
+>;
+export type VerifyResetPasswordTokenMutationBody =
+	| BodyType<TypesPostableVerifyResetPasswordTokenDTO>
+	| undefined;
+export type VerifyResetPasswordTokenMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Verify a reset password token
+ */
+export const useVerifyResetPasswordToken = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof verifyResetPasswordToken>>,
+		TError,
+		{ data?: BodyType<TypesPostableVerifyResetPasswordTokenDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof verifyResetPasswordToken>>,
+	TError,
+	{ data?: BodyType<TypesPostableVerifyResetPasswordTokenDTO> },
+	TContext
+> => {
+	return useMutation(getVerifyResetPasswordTokenMutationOptions(options));
+};
 /**
  * This endpoint returns the users having the role by role id
  * @summary Get users by role id

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

@@ -11,7 +11,6 @@
 }
 
 .divider {
-	border-color: var(--l1-border);
-	margin: 16px 0;
-	margin-top: 10px;
+	--divider-color: var(--l1-border);
+	--divider-margin: 10px 0 16px 0;
 }

frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.module.scss

@@ -0,0 +1,31 @@
+.emptyState {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 12px;
+	padding: 48px 24px;
+	text-align: center;
+}
+
+.icon {
+	color: var(--danger-background);
+}
+
+.title {
+	font-size: 16px;
+	font-weight: 500;
+	color: var(--text-vanilla-100);
+}
+
+.subtitle {
+	font-size: 14px;
+	color: var(--text-vanilla-400);
+	max-width: 400px;
+}
+
+.actions {
+	display: flex;
+	gap: 8px;
+	margin-top: 4px;
+}

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

@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+import { LifeBuoy, RefreshCw, TriangleAlert } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { handleContactSupport } from 'container/Integrations/utils';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+
+import styles from './ErrorEmptyState.module.scss';
+
+interface ErrorEmptyStateProps {
+	title?: string;
+	subtitle?: string;
+	onRefresh?: () => void;
+}
+
+function ErrorEmptyState({
+	title = 'Something went wrong',
+	subtitle = 'Our team is getting on top to resolve this. Please reach out to support if the issue persists.',
+	onRefresh,
+}: ErrorEmptyStateProps): JSX.Element {
+	const { isCloudUser } = useGetTenantLicense();
+
+	const onContactSupport = useCallback((): void => {
+		handleContactSupport(isCloudUser);
+	}, [isCloudUser]);
+
+	return (
+		<div className={styles.emptyState} data-testid="error-empty-state">
+			<TriangleAlert className={styles.icon} size={32} />
+			<div className={styles.title} data-testid="error-title">
+				{title}
+			</div>
+			<div className={styles.subtitle} data-testid="error-subtitle">
+				{subtitle}
+			</div>
+			<div className={styles.actions}>
+				<Button
+					variant="solid"
+					color="secondary"
+					prefix={<LifeBuoy size={14} />}
+					onClick={onContactSupport}
+					data-testid="error-contact-support-button"
+				>
+					Contact Support
+				</Button>
+				{onRefresh && (
+					<Button
+						variant="outlined"
+						color="secondary"
+						prefix={<RefreshCw size={14} />}
+						onClick={onRefresh}
+						data-testid="error-refresh-button"
+					>
+						Refresh
+					</Button>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default ErrorEmptyState;

frontend/src/components/Alerts/ErrorEmptyState/index.ts

@@ -0,0 +1 @@
+export { default } from './ErrorEmptyState';

frontend/src/components/Alerts/LabelColumn/LabelColumn.module.scss

@@ -0,0 +1,68 @@
+.labelColumn {
+	display: flex;
+	gap: 4px;
+	align-items: center;
+	overflow: hidden;
+	max-width: 100%;
+	width: 100%;
+}
+
+.labelBadge {
+	cursor: default;
+	font-size: 12px;
+
+	--badge-display: inline;
+
+	max-width: 180px;
+	text-overflow: ellipsis;
+}
+
+.overflowTrigger {
+	all: unset;
+	cursor: pointer;
+}
+
+.overflowBadge {
+	cursor: pointer;
+	font-size: 12px;
+}
+
+.labelPopover {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	padding: 8px;
+	max-height: 300px;
+	overflow-y: auto;
+}
+
+.labelTooltip {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	max-height: 300px;
+	overflow-y: auto;
+}
+
+.labelValue {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.tooltipContent {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.copyButton {
+	all: unset;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	opacity: 0.7;
+
+	&:hover {
+		opacity: 1;
+	}
+}

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

@@ -0,0 +1,142 @@
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { act, render, screen } from '@testing-library/react';
+
+import LabelColumn from './LabelColumn';
+
+let resizeCallback: ResizeObserverCallback | null = null;
+
+class MockResizeObserver {
+	constructor(callback: ResizeObserverCallback) {
+		resizeCallback = callback;
+	}
+
+	observe = jest.fn();
+	unobserve = jest.fn();
+	disconnect = jest.fn();
+}
+
+function triggerResize(width: number): void {
+	if (resizeCallback) {
+		act(() => {
+			resizeCallback?.(
+				[{ contentRect: { width } } as ResizeObserverEntry],
+				{} as ResizeObserver,
+			);
+		});
+	}
+}
+
+beforeAll(() => {
+	global.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+});
+
+afterEach(() => {
+	resizeCallback = null;
+});
+
+function renderWithProviders(
+	ui: React.ReactElement,
+): ReturnType<typeof render> {
+	return render(<TooltipProvider>{ui}</TooltipProvider>);
+}
+
+describe('LabelColumn', () => {
+	it('should render all labels when 5 or fewer', () => {
+		const labels = ['env', 'service', 'region'];
+
+		renderWithProviders(<LabelColumn labels={labels} />);
+
+		expect(screen.getByTestId('label-tag-env')).toBeInTheDocument();
+		expect(screen.getByTestId('label-tag-service')).toBeInTheDocument();
+		expect(screen.getByTestId('label-tag-region')).toBeInTheDocument();
+	});
+
+	it('should truncate labels and show +N badge when container is narrow', () => {
+		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
+
+		renderWithProviders(<LabelColumn labels={labels} />);
+
+		// Simulate narrow container that fits ~3 badges
+		// Badge widths: env=37, service=65, region=58, team=44, owner=51, version=65
+		// 220px available = 3 badges (160px) + gaps (8px) + overflow (44px)
+		triggerResize(220);
+
+		// First 3 visible
+		expect(screen.getByTestId('label-tag-env')).toBeInTheDocument();
+		expect(screen.getByTestId('label-tag-service')).toBeInTheDocument();
+		expect(screen.getByTestId('label-tag-region')).toBeInTheDocument();
+
+		// Remaining in overflow badge
+		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+3');
+	});
+
+	it('should render label with value when value prop provided', () => {
+		const labels = ['env'];
+		const value = { env: 'production' };
+
+		renderWithProviders(<LabelColumn labels={labels} value={value} />);
+
+		expect(screen.getByTestId('label-tag-env')).toHaveTextContent(
+			'env: production',
+		);
+	});
+
+	it('should render labels without value when value is not provided for that label', () => {
+		const labels = ['env', 'service'];
+		const value = { env: 'production' };
+
+		renderWithProviders(<LabelColumn labels={labels} value={value} />);
+
+		expect(screen.getByTestId('label-tag-env')).toHaveTextContent(
+			'env: production',
+		);
+		expect(screen.getByTestId('label-tag-service')).toHaveTextContent('service');
+	});
+
+	it('should show overflow badge with remaining count when container is narrow', () => {
+		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
+
+		renderWithProviders(<LabelColumn labels={labels} />);
+
+		// Simulate narrow container to trigger overflow (shows 3 labels)
+		// 220px fits first 3 badges before overflow
+		triggerResize(220);
+
+		// Overflow badge shows +3 (remaining labels)
+		const overflowBadge = screen.getByTestId('label-overflow-badge');
+		expect(overflowBadge).toBeInTheDocument();
+		expect(overflowBadge).toHaveTextContent('+3');
+	});
+
+	it('should render empty when no labels provided', () => {
+		renderWithProviders(<LabelColumn labels={[]} />);
+
+		const column = screen.getByTestId('label-column');
+		expect(column.children).toHaveLength(0);
+	});
+
+	it('should use primary color by default', () => {
+		const labels = ['env'];
+
+		renderWithProviders(<LabelColumn labels={labels} />);
+
+		expect(screen.getByTestId('label-tag-env')).toBeInTheDocument();
+	});
+
+	it('should show all labels when container is wide enough', () => {
+		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
+
+		renderWithProviders(<LabelColumn labels={labels} />);
+
+		// Simulate wide container
+		triggerResize(1000);
+
+		// All labels visible
+		labels.forEach((label) => {
+			expect(screen.getByTestId(`label-tag-${label}`)).toBeInTheDocument();
+		});
+
+		// No overflow badge
+		expect(screen.queryByTestId('label-overflow-badge')).not.toBeInTheDocument();
+	});
+});

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

@@ -0,0 +1,150 @@
+import { Copy } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { toast } from '@signozhq/ui/sonner';
+import {
+	TooltipContent,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
+
+import LabelTag from './LabelTag';
+
+import styles from './LabelColumn.module.scss';
+import { BADGE_GAP, estimateBadgeWidth, OVERFLOW_BADGE_WIDTH } from './utils';
+
+export interface LabelColumnProps {
+	labels: string[];
+	color?:
+		| 'primary'
+		| 'secondary'
+		| 'success'
+		| 'error'
+		| 'warning'
+		| 'robin'
+		| 'forest'
+		| 'amber'
+		| 'sienna'
+		| 'cherry'
+		| 'sakura'
+		| 'aqua'
+		| 'vanilla';
+	value?: { [key: string]: string };
+}
+
+function LabelColumn({
+	labels,
+	value,
+	color = 'primary',
+}: LabelColumnProps): JSX.Element {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [maxVisibleCount, setMaxVisibleCount] = useState(labels.length);
+	const [, copyToClipboard] = useCopyToClipboard();
+
+	const calculateMaxVisible = useCallback(
+		(width: number): number => {
+			if (width <= 0) {
+				return 1;
+			}
+
+			const availableWidth = width - OVERFLOW_BADGE_WIDTH - BADGE_GAP;
+			let usedWidth = 0;
+			let count = 0;
+
+			for (const label of labels) {
+				const badgeWidth = estimateBadgeWidth(label, value?.[label]) + BADGE_GAP;
+				if (usedWidth + badgeWidth > availableWidth && count > 0) {
+					break;
+				}
+				usedWidth += badgeWidth;
+				count++;
+			}
+
+			return Math.max(1, count);
+		},
+		[labels, value],
+	);
+
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) {
+			return;
+		}
+
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry && entry.contentRect.width > 0) {
+				setMaxVisibleCount(calculateMaxVisible(entry.contentRect.width));
+			}
+		});
+
+		observer.observe(container);
+
+		if (container.clientWidth > 0) {
+			setMaxVisibleCount(calculateMaxVisible(container.clientWidth));
+		}
+
+		return (): void => observer.disconnect();
+	}, [calculateMaxVisible]);
+
+	const needsOverflow = labels.length > maxVisibleCount;
+	const visibleLabels = needsOverflow
+		? labels.slice(0, maxVisibleCount)
+		: labels;
+	const remainingLabels = needsOverflow ? labels.slice(maxVisibleCount) : [];
+
+	return (
+		<div
+			ref={containerRef}
+			className={styles.labelColumn}
+			data-testid="label-column"
+		>
+			{visibleLabels.map((label) => (
+				<LabelTag key={label} label={label} color={color} value={value?.[label]} />
+			))}
+			{remainingLabels.length > 0 && (
+				<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
+									.map((label) => (value?.[label] ? `${label}: ${value[label]}` : label))
+									.join(', ')}
+							</span>
+							<button
+								type="button"
+								className={styles.copyButton}
+								onClick={(e): void => {
+									e.stopPropagation();
+									const searchFormat = remainingLabels
+										.map((label) => (value?.[label] ? `${label} ${value[label]}` : label))
+										.join(' ');
+									copyToClipboard(searchFormat);
+									toast.success('Copied! Use in search to filter alerts.');
+								}}
+								aria-label="Copy to clipboard"
+							>
+								<Copy size={12} />
+							</button>
+						</div>
+					</TooltipContent>
+				</TooltipRoot>
+			)}
+		</div>
+	);
+}
+
+export default LabelColumn;

frontend/src/components/Alerts/LabelColumn/LabelTag.module.scss

@@ -0,0 +1,30 @@
+.labelBadge {
+	cursor: default;
+	font-size: 12px;
+
+	max-width: 180px;
+	text-overflow: ellipsis;
+}
+
+.labelValue {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+.tooltipContent {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.copyButton {
+	all: unset;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	opacity: 0.7;
+
+	&:hover {
+		opacity: 1;
+	}
+}

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

@@ -0,0 +1,74 @@
+import { Copy } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui/badge';
+import { toast } from '@signozhq/ui/sonner';
+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?:
+		| 'primary'
+		| 'secondary'
+		| 'success'
+		| 'error'
+		| 'warning'
+		| 'robin'
+		| 'forest'
+		| 'amber'
+		| 'sienna'
+		| 'cherry'
+		| 'sakura'
+		| 'aqua'
+		| 'vanilla';
+	value?: string;
+}
+
+function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
+	const [, copyToClipboard] = useCopyToClipboard();
+	const displayText = value ? `${label}: ${value}` : label;
+	const searchFormat = value ? `${label} ${value}` : label;
+
+	const handleCopy = (e: React.MouseEvent): void => {
+		e.stopPropagation();
+		copyToClipboard(searchFormat);
+		toast.success('Copied! Use in search to filter alerts.');
+	};
+
+	return (
+		<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
+						type="button"
+						className={styles.copyButton}
+						onClick={handleCopy}
+						aria-label="Copy to clipboard"
+					>
+						<Copy size={12} />
+					</button>
+				</div>
+			</TooltipContent>
+		</TooltipRoot>
+	);
+}
+
+export default LabelTag;

frontend/src/components/Alerts/LabelColumn/index.ts

@@ -0,0 +1,2 @@
+export { default } from './LabelColumn';
+export type { LabelColumnProps } from './LabelColumn';

frontend/src/components/Alerts/LabelColumn/utils.ts

@@ -0,0 +1,14 @@
+export const BADGE_GAP = 4;
+export const OVERFLOW_BADGE_WIDTH = 40;
+
+export const BADGE_MAX_WIDTH = 180;
+export const BADGE_PADDING = 16;
+export const CHAR_WIDTH = 7;
+
+export function estimateBadgeWidth(label: string, value?: string): number {
+	const displayText = value ? `${label}: ${value}` : label;
+	return Math.min(
+		displayText.length * CHAR_WIDTH + BADGE_PADDING,
+		BADGE_MAX_WIDTH,
+	);
+}

frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.module.scss

@@ -0,0 +1,30 @@
+.emptyState {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 12px;
+	padding: 48px 24px;
+	text-align: center;
+}
+
+.icon {
+	color: var(--text-vanilla-400);
+}
+
+.title {
+	font-size: 16px;
+	font-weight: 500;
+	color: var(--text-vanilla-100);
+}
+
+.subtitle {
+	font-size: 14px;
+	color: var(--text-vanilla-400);
+	max-width: 400px;
+}
+
+.actions {
+	display: flex;
+	gap: 8px;
+}

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

@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import NoResultsEmptyState from './NoResultsEmptyState';
+
+describe('NoResultsEmptyState', () => {
+	it('should render with default props', () => {
+		render(<NoResultsEmptyState />);
+
+		expect(screen.getByTestId('no-results-empty-state')).toBeInTheDocument();
+		expect(screen.getByTestId('no-results-title')).toHaveTextContent(
+			'No matching results',
+		);
+		expect(screen.getByTestId('no-results-subtitle')).toHaveTextContent(
+			'No items match your current filters. Try adjusting your search criteria.',
+		);
+	});
+
+	it('should render with custom title and subtitle', () => {
+		render(
+			<NoResultsEmptyState title="Custom Title" subtitle="Custom Subtitle" />,
+		);
+
+		expect(screen.getByTestId('no-results-title')).toHaveTextContent(
+			'Custom Title',
+		);
+		expect(screen.getByTestId('no-results-subtitle')).toHaveTextContent(
+			'Custom Subtitle',
+		);
+	});
+
+	it('should not render clear button when onClear is not provided', () => {
+		render(<NoResultsEmptyState />);
+
+		expect(
+			screen.queryByTestId('no-results-clear-button'),
+		).not.toBeInTheDocument();
+	});
+
+	it('should render clear button when onClear is provided', () => {
+		const onClear = jest.fn();
+
+		render(<NoResultsEmptyState onClear={onClear} />);
+
+		expect(screen.getByTestId('no-results-clear-button')).toBeInTheDocument();
+		expect(screen.getByTestId('no-results-clear-button')).toHaveTextContent(
+			'Clear Filters',
+		);
+	});
+
+	it('should render custom clear button text', () => {
+		render(
+			<NoResultsEmptyState onClear={jest.fn()} clearButtonText="Reset All" />,
+		);
+
+		expect(screen.getByTestId('no-results-clear-button')).toHaveTextContent(
+			'Reset All',
+		);
+	});
+
+	it('should call onClear when clear button is clicked', async () => {
+		const user = userEvent.setup();
+		const onClear = jest.fn();
+
+		render(<NoResultsEmptyState onClear={onClear} />);
+
+		await user.click(screen.getByTestId('no-results-clear-button'));
+
+		expect(onClear).toHaveBeenCalledTimes(1);
+	});
+});

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

@@ -0,0 +1,57 @@
+import { RefreshCw, Search } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+
+import styles from './NoResultsEmptyState.module.scss';
+
+interface NoResultsEmptyStateProps {
+	title?: string;
+	subtitle?: string;
+	onClear?: () => void;
+	clearButtonText?: string;
+	onRefresh?: () => void;
+}
+
+function NoResultsEmptyState({
+	title = 'No matching results',
+	subtitle = 'No items match your current filters. Try adjusting your search criteria.',
+	onClear,
+	clearButtonText = 'Clear Filters',
+	onRefresh,
+}: NoResultsEmptyStateProps): JSX.Element {
+	return (
+		<div className={styles.emptyState} data-testid="no-results-empty-state">
+			<Search className={styles.icon} size={16} />
+			<div className={styles.title} data-testid="no-results-title">
+				{title}
+			</div>
+			<div className={styles.subtitle} data-testid="no-results-subtitle">
+				{subtitle}
+			</div>
+			<div className={styles.actions}>
+				{onClear && (
+					<Button
+						variant="outlined"
+						color="secondary"
+						onClick={onClear}
+						data-testid="no-results-clear-button"
+					>
+						{clearButtonText}
+					</Button>
+				)}
+				{onRefresh && (
+					<Button
+						variant="outlined"
+						color="secondary"
+						prefix={<RefreshCw size={14} />}
+						onClick={onRefresh}
+						data-testid="no-results-refresh-button"
+					>
+						Refresh
+					</Button>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default NoResultsEmptyState;

frontend/src/components/Alerts/NoResultsEmptyState/index.ts

@@ -0,0 +1 @@
+export { default } from './NoResultsEmptyState';

frontend/src/components/Alerts/constants.ts

@@ -0,0 +1,32 @@
+import type { BadgeColor } from '@signozhq/ui/badge';
+
+export const STATE_ORDER = ['firing', 'pending', 'inactive', 'disabled'];
+export const SEVERITY_ORDER = ['critical', 'error', 'warning', 'info'];
+
+export const STATE_LABELS: Record<string, string> = {
+	firing: 'Firing',
+	pending: 'Pending',
+	inactive: 'OK',
+	disabled: 'Disabled',
+};
+
+export const STATE_COLORS: Record<string, string> = {
+	firing: 'var(--bg-cherry-500)',
+	pending: 'var(--bg-amber-500)',
+	inactive: 'var(--bg-forest-500)',
+	disabled: 'var(--l2-foreground)',
+};
+
+export const SEVERITY_COLORS: Record<string, string> = {
+	critical: 'var(--bg-cherry-500)',
+	error: 'var(--bg-cherry-400)',
+	warning: 'var(--bg-amber-500)',
+	info: 'var(--bg-robin-500)',
+};
+
+export const SEVERITY_BADGE_COLORS: Record<string, BadgeColor> = {
+	critical: 'error',
+	error: 'error',
+	warning: 'warning',
+	info: 'primary',
+};

frontend/src/components/Alerts/types.ts

@@ -0,0 +1,7 @@
+export interface FilterValue {
+	value: string;
+}
+
+export interface AlertWithLabels {
+	labels?: Record<string, string>;
+}

frontend/src/components/Alerts/utils.test.ts

@@ -0,0 +1,287 @@
+import type { SortState } from 'components/TanStackTableView/types';
+
+import type { AlertWithLabels, FilterValue } from './types';
+import { filterByLabels, searchByLabels, sortByColumn } from './utils';
+
+interface TestAlert extends AlertWithLabels {
+	name: string;
+	value: number;
+}
+
+const createAlert = (
+	name: string,
+	value: number,
+	labels?: Record<string, string>,
+): TestAlert => ({
+	name,
+	value,
+	labels,
+});
+
+describe('sortByColumn', () => {
+	const alerts: TestAlert[] = [
+		createAlert('Alert C', 3),
+		createAlert('Alert A', 1),
+		createAlert('Alert B', 2),
+	];
+
+	const getSortValue = (
+		item: TestAlert,
+		columnName: string,
+	): string | number => {
+		if (columnName === 'name') {
+			return item.name;
+		}
+		if (columnName === 'value') {
+			return item.value;
+		}
+		return '';
+	};
+
+	it('should return items unchanged when no orderBy provided', () => {
+		const result = sortByColumn(alerts, null, getSortValue);
+		expect(result).toStrictEqual(alerts);
+	});
+
+	it('should sort by string column ascending', () => {
+		const orderBy: SortState = { columnName: 'name', order: 'asc' };
+		const result = sortByColumn(alerts, orderBy, getSortValue);
+		expect(result.map((a) => a.name)).toStrictEqual([
+			'Alert A',
+			'Alert B',
+			'Alert C',
+		]);
+	});
+
+	it('should sort by string column descending', () => {
+		const orderBy: SortState = { columnName: 'name', order: 'desc' };
+		const result = sortByColumn(alerts, orderBy, getSortValue);
+		expect(result.map((a) => a.name)).toStrictEqual([
+			'Alert C',
+			'Alert B',
+			'Alert A',
+		]);
+	});
+
+	it('should sort by number column ascending', () => {
+		const orderBy: SortState = { columnName: 'value', order: 'asc' };
+		const result = sortByColumn(alerts, orderBy, getSortValue);
+		expect(result.map((a) => a.value)).toStrictEqual([1, 2, 3]);
+	});
+
+	it('should sort by number column descending', () => {
+		const orderBy: SortState = { columnName: 'value', order: 'desc' };
+		const result = sortByColumn(alerts, orderBy, getSortValue);
+		expect(result.map((a) => a.value)).toStrictEqual([3, 2, 1]);
+	});
+
+	it('should use defaultSort when orderBy is null', () => {
+		const defaultSort: SortState = { columnName: 'value', order: 'asc' };
+		const result = sortByColumn(alerts, null, getSortValue, defaultSort);
+		expect(result.map((a) => a.value)).toStrictEqual([1, 2, 3]);
+	});
+
+	it('should not mutate original array', () => {
+		const original = [...alerts];
+		const orderBy: SortState = { columnName: 'name', order: 'asc' };
+		sortByColumn(alerts, orderBy, getSortValue);
+		expect(alerts).toStrictEqual(original);
+	});
+
+	it('should handle empty array', () => {
+		const result = sortByColumn(
+			[],
+			{ columnName: 'name', order: 'asc' },
+			getSortValue,
+		);
+		expect(result).toStrictEqual([]);
+	});
+
+	it('should handle equal values', () => {
+		const duplicates = [
+			createAlert('Same', 1),
+			createAlert('Same', 1),
+			createAlert('Same', 1),
+		];
+		const orderBy: SortState = { columnName: 'name', order: 'asc' };
+		const result = sortByColumn(duplicates, orderBy, getSortValue);
+		expect(result).toHaveLength(3);
+	});
+});
+
+describe('searchByLabels', () => {
+	const alerts: TestAlert[] = [
+		createAlert('CPU High', 1, { severity: 'critical', team: 'infra' }),
+		createAlert('Memory Warning', 2, { severity: 'warning', team: 'backend' }),
+		createAlert('Disk Full', 3, { severity: 'error', region: 'us-east' }),
+		createAlert('Network Slow', 4, {}),
+		createAlert('No Labels', 5),
+	];
+
+	const getAlertName = (alert: TestAlert): string => alert.name;
+
+	it('should return all items when search is empty', () => {
+		const result = searchByLabels(alerts, '', getAlertName);
+		expect(result).toStrictEqual(alerts);
+	});
+
+	it('should return all items when search is whitespace', () => {
+		const result = searchByLabels(alerts, '   ', getAlertName);
+		expect(result).toStrictEqual(alerts);
+	});
+
+	it('should search by alert name', () => {
+		const result = searchByLabels(alerts, 'CPU', getAlertName);
+		expect(result).toHaveLength(1);
+		expect(result[0].name).toBe('CPU High');
+	});
+
+	it('should search by alert name case-insensitive', () => {
+		const result = searchByLabels(alerts, 'cpu', getAlertName);
+		expect(result).toHaveLength(1);
+		expect(result[0].name).toBe('CPU High');
+	});
+
+	it('should search by severity label', () => {
+		const result = searchByLabels(alerts, 'critical', getAlertName);
+		expect(result).toHaveLength(1);
+		expect(result[0].name).toBe('CPU High');
+	});
+
+	it('should search by any label key', () => {
+		const result = searchByLabels(alerts, 'team', getAlertName);
+		expect(result).toHaveLength(2);
+	});
+
+	it('should search by any label value', () => {
+		const result = searchByLabels(alerts, 'infra', getAlertName);
+		expect(result).toHaveLength(1);
+		expect(result[0].name).toBe('CPU High');
+	});
+
+	it('should handle alerts with no labels', () => {
+		const result = searchByLabels(alerts, 'No Labels', getAlertName);
+		expect(result).toHaveLength(1);
+		expect(result[0].name).toBe('No Labels');
+	});
+
+	it('should handle partial matches', () => {
+		const result = searchByLabels(alerts, 'warn', getAlertName);
+		expect(result).toHaveLength(1);
+		expect(result[0].name).toBe('Memory Warning');
+	});
+
+	it('should return empty for no matches', () => {
+		const result = searchByLabels(alerts, 'nonexistent', getAlertName);
+		expect(result).toStrictEqual([]);
+	});
+
+	it('should trim search text', () => {
+		const result = searchByLabels(alerts, '  CPU  ', getAlertName);
+		expect(result).toHaveLength(1);
+		expect(result[0].name).toBe('CPU High');
+	});
+});
+
+describe('filterByLabels', () => {
+	const alerts: TestAlert[] = [
+		createAlert('A1', 1, { severity: 'critical', team: 'infra', env: 'prod' }),
+		createAlert('A2', 2, { severity: 'critical', team: 'backend', env: 'prod' }),
+		createAlert('A3', 3, { severity: 'warning', team: 'infra', env: 'staging' }),
+		createAlert('A4', 4, { severity: 'info', team: 'frontend', env: 'dev' }),
+		createAlert('A5', 5, {}),
+		createAlert('A6', 6),
+	];
+
+	const createFilter = (value: string): FilterValue => ({ value });
+
+	it('should return all items when filters are empty', () => {
+		const result = filterByLabels(alerts, []);
+		expect(result).toStrictEqual(alerts);
+	});
+
+	it('should return all items when filters is null-ish', () => {
+		const result = filterByLabels(alerts, null as unknown as FilterValue[]);
+		expect(result).toStrictEqual(alerts);
+	});
+
+	it('should filter by single label', () => {
+		const filters = [createFilter('severity:critical')];
+		const result = filterByLabels(alerts, filters);
+		expect(result).toHaveLength(2);
+		expect(result.map((a) => a.name)).toStrictEqual(['A1', 'A2']);
+	});
+
+	it('should use OR logic for same key', () => {
+		const filters = [
+			createFilter('severity:critical'),
+			createFilter('severity:warning'),
+		];
+		const result = filterByLabels(alerts, filters);
+		expect(result).toHaveLength(3);
+		expect(result.map((a) => a.name)).toStrictEqual(['A1', 'A2', 'A3']);
+	});
+
+	it('should use AND logic for different keys', () => {
+		const filters = [
+			createFilter('severity:critical'),
+			createFilter('team:infra'),
+		];
+		const result = filterByLabels(alerts, filters);
+		expect(result).toHaveLength(1);
+		expect(result[0].name).toBe('A1');
+	});
+
+	it('should handle case-insensitive keys', () => {
+		const filters = [createFilter('SEVERITY:critical')];
+		const result = filterByLabels(alerts, filters);
+		expect(result).toHaveLength(2);
+	});
+
+	it('should handle case-insensitive values', () => {
+		const filters = [createFilter('severity:CRITICAL')];
+		const result = filterByLabels(alerts, filters);
+		expect(result).toHaveLength(2);
+	});
+
+	it('should trim whitespace', () => {
+		const filters = [createFilter(' severity : critical ')];
+		const result = filterByLabels(alerts, filters);
+		expect(result).toHaveLength(2);
+	});
+
+	it('should return empty for invalid filter format', () => {
+		const filters = [createFilter('invalid')];
+		const result = filterByLabels(alerts, filters);
+		expect(result).toStrictEqual([]);
+	});
+
+	it('should ignore invalid filters mixed with valid', () => {
+		const filters = [createFilter('invalid'), createFilter('severity:critical')];
+		const result = filterByLabels(alerts, filters);
+		expect(result).toHaveLength(2);
+	});
+
+	it('should exclude alerts without matching label key', () => {
+		const filters = [createFilter('nonexistent:value')];
+		const result = filterByLabels(alerts, filters);
+		expect(result).toStrictEqual([]);
+	});
+
+	it('should exclude alerts with no labels', () => {
+		const filters = [createFilter('severity:critical')];
+		const result = filterByLabels(alerts, filters);
+		expect(result.every((a) => a.labels !== undefined)).toBe(true);
+	});
+
+	it('should handle complex AND/OR combinations', () => {
+		const filters = [
+			createFilter('env:prod'),
+			createFilter('env:staging'),
+			createFilter('team:infra'),
+		];
+		const result = filterByLabels(alerts, filters);
+		expect(result).toHaveLength(2);
+		expect(result.map((a) => a.name)).toStrictEqual(['A1', 'A3']);
+	});
+});

frontend/src/components/Alerts/utils.ts

@@ -0,0 +1,116 @@
+import type { SortState } from 'components/TanStackTableView/types';
+
+import type { AlertWithLabels, FilterValue } from './types';
+
+/**
+ * Generic sort function for alert-like data
+ */
+export function sortByColumn<T>(
+	items: T[],
+	orderBy: SortState | null,
+	getSortValue: (item: T, columnName: string) => string | number,
+	defaultSort?: SortState,
+): T[] {
+	const sortState = orderBy ?? defaultSort;
+	if (!sortState) {
+		return items;
+	}
+
+	const { columnName, order } = sortState;
+	const multiplier = order === 'asc' ? 1 : -1;
+
+	return [...items].sort((a, b) => {
+		const aVal = getSortValue(a, columnName);
+		const bVal = getSortValue(b, columnName);
+
+		if (aVal < bVal) {
+			return -1 * multiplier;
+		}
+		if (aVal > bVal) {
+			return 1 * multiplier;
+		}
+		return 0;
+	});
+}
+
+/**
+ * Search alerts/rules by name, severity, and all labels
+ */
+export function searchByLabels<T extends AlertWithLabels>(
+	items: T[],
+	searchText: string,
+	getAlertName: (item: T) => string,
+): T[] {
+	if (!searchText.trim()) {
+		return items;
+	}
+
+	const value = searchText.toLowerCase().trim();
+
+	return items.filter((item) => {
+		const alertName = getAlertName(item).toLowerCase();
+		const severity = item.labels?.severity?.toLowerCase() ?? '';
+
+		const labelSearchString = Object.entries(item.labels ?? {})
+			.map(([key, val]) => `${key} ${val}`)
+			.join(' ')
+			.toLowerCase();
+
+		return (
+			alertName.includes(value) ||
+			severity.includes(value) ||
+			labelSearchString.includes(value)
+		);
+	});
+}
+
+/**
+ * Filter alerts by label key:value pairs
+ * Same key uses OR logic, different keys use AND logic
+ */
+export function filterByLabels<T extends AlertWithLabels>(
+	items: T[],
+	selectedFilters: FilterValue[],
+): T[] {
+	if (!selectedFilters?.length) {
+		return items;
+	}
+
+	const validFilters = selectedFilters
+		.map((e) => e.value)
+		.filter((v) => v.split(':').length === 2);
+
+	if (!validFilters.length) {
+		return [];
+	}
+
+	// Group values by key - same key uses OR, different keys use AND
+	const filtersByKey = new Map<string, string[]>();
+	validFilters.forEach((f) => {
+		const [key, value] = f.split(':');
+		const trimmedKey = key.trim().toLowerCase();
+		const trimmedValue = value.trim().toLowerCase();
+		const existing = filtersByKey.get(trimmedKey) ?? [];
+		existing.push(trimmedValue);
+		filtersByKey.set(trimmedKey, existing);
+	});
+
+	return items.filter((item) => {
+		if (!item.labels) {
+			return false;
+		}
+
+		// All keys must match (AND), any value per key can match (OR)
+		return Array.from(filtersByKey.entries()).every(([filterKey, values]) => {
+			// Case-insensitive key lookup
+			const matchingKey = Object.keys(item.labels ?? {}).find(
+				(k) => k.toLowerCase() === filterKey,
+			);
+			if (!matchingKey) {
+				return false;
+			}
+			const labelValue = item.labels?.[matchingKey]?.toLowerCase();
+			return values.some((v) => labelValue === v);
+		});
+	});
+}

frontend/src/components/Badges/Badges.styles.scss

@@ -14,11 +14,6 @@
 	.ant-form-item {
 		margin-bottom: 0;
 	}
-
-	.ant-tag {
-		margin-right: 0;
-		background: var(--card);
-	}
 }
 
 .add-tag-container {

frontend/src/components/Badges/Badges.tsx

@@ -1,11 +1,12 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { Check, Plus, X } from '@signozhq/icons';
-import { Button, Flex, Tag } from 'antd';
+import { Button, Flex } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import Input from 'components/Input';
 
-import './Tags.styles.scss';
+import './Badges.styles.scss';
 
-function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
+function Badges({ tags, setTags }: AddTagsProps): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>('');
 	const [inputVisible, setInputVisible] = useState<boolean>(false);
 
@@ -46,14 +47,18 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 	return (
 		<div className="tags-container">
 			{tags.map<React.ReactNode>((tag) => (
-				<Tag
+				<Badge
 					key={tag}
-					closable
+					color="vanilla"
 					style={{ userSelect: 'none' }}
-					onClose={(): void => handleClose(tag)}
+					closable
+					onClose={(e): void => {
+						e.preventDefault();
+						handleClose(tag);
+					}}
 				>
-					<span>{tag}</span>
-				</Tag>
+					{tag}
+				</Badge>
 			))}
 
 			{inputVisible && (
@@ -113,4 +118,4 @@ interface AddTagsProps {
 	setTags: Dispatch<SetStateAction<string[]>>;
 }
 
-export default Tags;
+export default Badges;

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { Row } from 'antd';
-import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import { Row, Select, Spin } from 'antd';
 import {
 	getValuesFromQueryParams,
 	setQueryParamsFromOptions,
 } from 'components/CeleryTask/CeleryUtils';
 import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOptions';
+import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
 
@@ -48,7 +48,7 @@ export function FilterSelect({
 			: getValuesFromQueryParams(queryParam, urlQuery) || [];
 
 	// Memoize options to include the typed value if not present
-	const mergedOptions = useMemo<ComboboxSimpleItem[]>(() => {
+	const mergedOptions = useMemo(() => {
 		if (
 			!!searchValue.trim().length &&
 			!options.some((opt) => opt.value === searchValue)
@@ -84,16 +84,35 @@ export function FilterSelect({
 		],
 	);
 
+	// Update searchValue on user input
+	const handleSearchInput = (input: string): void => {
+		setSearchValue(input);
+		handleSearch(input);
+	};
+
 	return (
-		<ComboboxSimple
+		<Select
 			key={filterType.toString()}
 			placeholder={placeholder}
-			multiple={isMultiple}
-			items={mergedOptions}
+			showSearch
+			{...(isMultiple ? { mode: 'multiple' } : {})}
+			options={mergedOptions}
 			loading={isFetching}
 			className="config-select-option"
+			onSearch={handleSearchInput}
+			maxTagCount={4}
+			allowClear
+			maxTagPlaceholder={SelectMaxTagPlaceholder}
 			value={selectValue}
-			emptyPlaceholder={`No ${placeholder} found`}
+			notFoundContent={
+				isFetching ? (
+					<span>
+						<Spin size="small" /> Loading...
+					</span>
+				) : (
+					<span>No {placeholder} found</span>
+				)
+			}
 			onChange={handleSelectChange}
 		/>
 	);

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,6 +1,7 @@
 import { useHistory, useLocation } from 'react-router-dom';
-import { ComboboxSimple } from '@signozhq/ui/combobox';
+import { Select, Spin } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
 
@@ -26,18 +27,30 @@ function CeleryTaskConfigOptions(): JSX.Element {
 				<Typography.Text style={{ whiteSpace: 'nowrap' }}>
 					Task Name
 				</Typography.Text>
-				<ComboboxSimple
+				<Select
 					placeholder="Task Name"
-					multiple
-					items={options}
+					showSearch
+					mode="multiple"
+					options={options}
 					loading={isFetching}
 					className="config-select-option"
+					onSearch={handleSearch}
+					maxTagCount={4}
+					maxTagPlaceholder={SelectMaxTagPlaceholder}
 					value={getValuesFromQueryParams(QueryParams.taskName, urlQuery) || []}
-					emptyPlaceholder="No Task Name found"
+					notFoundContent={
+						isFetching ? (
+							<span>
+								<Spin size="small" /> Loading...
+							</span>
+						) : (
+							<span>No Task Name found</span>
+						)
+					}
 					onChange={(value): void => {
 						handleSearch('');
 						setQueryParamsFromOptions(
-							value as string[],
+							value,
 							urlQuery,
 							history,
 							location,

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts

@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import type { DefaultOptionType } from 'antd/es/select';
 import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
 import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -21,7 +21,7 @@ export interface Filters {
 }
 
 export interface GetAllFiltersResponse {
-	options: ComboboxSimpleItem[];
+	options: DefaultOptionType[];
 	isFetching: boolean;
 }
 

frontend/src/components/CeleryTask/useCeleryFilterOptions.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import type { DefaultOptionType } from 'antd/es/select';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
@@ -17,7 +17,7 @@ export const useCeleryFilterOptions = (
 	searchText: string;
 	handleSearch: (value: string) => void;
 	isFetching: boolean;
-	options: ComboboxSimpleItem[];
+	options: DefaultOptionType[];
 } => {
 	const [searchText, setSearchText] = useState<string>('');
 	const { isFetching, options } = useGetAllFilters({

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -9,8 +9,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-// oxlint-disable-next-line signoz/no-antd-components This component for now is too complex to be migrated in one PR
-import { Select, Tag, Tooltip } from 'antd';
+import { Select, Tooltip } from 'antd';
 import {
 	OPERATORS,
 	QUERY_BUILDER_OPERATORS_BY_TYPES,
@@ -52,6 +51,7 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import './ClientSideQBSearch.styles.scss';
+import { Badge } from '@signozhq/ui/badge';
 
 export interface AttributeKey {
 	key: string;
@@ -548,10 +548,14 @@ function ClientSideQBSearch(
 
 		return (
 			<span className="qb-search-bar-tokenised-tags">
-				<Tag
-					closable={!searchValue && closable}
-					onClose={onCloseHandler}
+				<Badge
+					color="vanilla"
 					className={tagDetails?.key?.type || ''}
+					closable={!searchValue && closable}
+					onClose={(e): void => {
+						e.preventDefault();
+						onCloseHandler();
+					}}
 				>
 					<Tooltip title={chipValue}>
 						<TypographyText
@@ -567,7 +571,7 @@ function ClientSideQBSearch(
 							{chipValue}
 						</TypographyText>
 					</Tooltip>
-				</Tag>
+				</Badge>
 			</span>
 		);
 	};

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

@@ -41,14 +41,22 @@ $item-spacing: 8px;
 		width: 100%;
 		background: transparent;
 		border: none;
+		border-radius: 0;
+		box-shadow: none;
 		outline: none;
+		height: auto;
 		color: var(--l1-foreground);
 		font-size: 14px;
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		padding: 0;
-		&.ant-input:focus {
+
+		&:focus,
+		&:focus-visible,
+		&:hover {
+			border: none;
 			box-shadow: none;
+			outline: none;
 		}
 
 		&::placeholder {

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -6,7 +6,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Modal, Tag } from 'antd';
+import { Button, Modal } from 'antd';
 import { CircleAlert, X } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { useAppContext } from 'providers/App/App';
@@ -9,6 +9,7 @@ import APIError from 'types/api/error';
 import ErrorContent from './components/ErrorContent';
 
 import './ErrorModal.styles.scss';
+import { Badge } from '@signozhq/ui/badge';
 
 type Props = {
 	error: APIError;
@@ -45,14 +46,17 @@ function ErrorModal({
 	return (
 		<>
 			{!triggerComponent ? (
-				<Tag
+				<span
 					className="error-modal__trigger"
-					icon={<CircleAlert size={14} color={Color.BG_CHERRY_500} />}
-					color="error"
+					role="button"
+					tabIndex={0}
 					onClick={(): void => setVisible(true)}
+					onKeyDown={undefined}
 				>
-					error
-				</Tag>
+					<Badge color="error">
+						<CircleAlert size={14} color={Color.BG_CHERRY_500} /> error
+					</Badge>
+				</span>
 			) : (
 				React.cloneElement(triggerComponent, {
 					onClick: () => setVisible(true),

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,8 +1,7 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Button, Col, Popover, Row, Space } from 'antd';
+import { Button, Col, Popover, Row, Select, Space } from 'antd';
 import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
-import { ComboboxSimple } from '@signozhq/ui/combobox';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -24,7 +23,11 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { ExploreHeaderToolTip, SaveButtonText } from './constants';
 import MenuItemGenerator from './MenuItemGenerator';
 import SaveViewWithName from './SaveViewWithName';
-import { ExplorerCardHeadContainer, OffSetCol } from './styles';
+import {
+	DropDownOverlay,
+	ExplorerCardHeadContainer,
+	OffSetCol,
+} from './styles';
 import { ExplorerCardProps } from './types';
 import { deleteViewHandler } from './utils';
 import { Ellipsis, Save, Share2, Trash2 } from '@signozhq/icons';
@@ -153,26 +156,6 @@ function ExplorerCard({
 
 	const showSaveView = false;
 
-	const viewItems = useMemo(
-		() =>
-			(viewsData?.data.data ?? []).map((view) => ({
-				value: view.name,
-				label: (
-					<MenuItemGenerator
-						viewName={view.name}
-						viewKey={viewKey}
-						createdBy={view.createdBy}
-						uuid={view.id}
-						refetchAllView={refetchAllView}
-						viewData={viewsData?.data.data ?? []}
-						sourcePage={sourcepage}
-					/>
-				),
-				displayValue: view.name,
-			})),
-		[refetchAllView, sourcepage, viewKey, viewsData?.data.data],
-	);
-
 	return (
 		<>
 			{showSaveView && (
@@ -192,12 +175,30 @@ function ExplorerCard({
 							<Space size="large">
 								{viewsData?.data.data && viewsData?.data.data.length && (
 									<Space>
-										<ComboboxSimple
+										<Select
+											getPopupContainer={popupContainer}
 											loading={isLoading || isRefetching}
+											showSearch
 											placeholder="Select a view"
-											items={viewItems}
+											dropdownStyle={DropDownOverlay}
+											dropdownMatchSelectWidth={false}
+											optionLabelProp="value"
 											value={viewName || undefined}
-										/>
+										>
+											{viewsData?.data.data.map((view) => (
+												<Select.Option key={view.id} value={view.name}>
+													<MenuItemGenerator
+														viewName={view.name}
+														viewKey={viewKey}
+														createdBy={view.createdBy}
+														uuid={view.id}
+														refetchAllView={refetchAllView}
+														viewData={viewsData.data.data}
+														sourcePage={sourcepage}
+													/>
+												</Select.Option>
+											))}
+										</Select>
 									</Space>
 								)}
 								{isQueryUpdated && (

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Card, Form, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Card, Form } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -20,9 +20,9 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
-		color: var(--input-with-label-color, var(--l2-foreground));
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+		color: var(--l2-foreground);
 
 		display: flex;
 		justify-content: flex-start;
@@ -35,28 +35,21 @@
 		min-width: 150px;
 		font-family: 'Space Mono', monospace !important;
 
-		border-radius: 2px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
-		color: var(--input-with-label-color, var(--l2-foreground));
+		border-radius: 2px 0px 0px 2px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
 
+		border-right: none;
+		border-left: none;
+		border-top-right-radius: 0px;
+		border-bottom-right-radius: 0px;
+		border-top-left-radius: 0px;
+		border-bottom-left-radius: 0px;
 		font-size: 12px !important;
-		line-height: 25px;
-
-		&.input__has-label-after {
-			border-left: none;
-			border-top-left-radius: 0px;
-			border-bottom-left-radius: 0px;
-		}
-
-		&.input__has-close-button {
-			border-right: none;
-			border-top-right-radius: 0px;
-			border-bottom-right-radius: 0px;
-		}
+		line-height: 27px;
 
 		&::placeholder {
-			color: var(--input-with-label-color, var(--l3-foreground)) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 		&[type='number']::-webkit-inner-spin-button,
@@ -70,24 +63,25 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-		background: var(--input-with-label-background-color, var(--l2-background));
-		height: 100%;
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+		height: 38px;
 		width: 38px;
 	}
 
 	&.labelAfter {
 		.input {
-			border-radius: 2px;
-			border: 1px solid var(--input-with-label-border-color, var(--l2-border));
-			background: var(--input-with-label-background-color, var(--l2-background));
+			border-radius: 0px 2px 2px 0px;
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
 		}
 
 		.label {
 			border-left: none;
-			border-radius: 0px 2px 2px 0px;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
 		}
 	}
 }

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';
@@ -44,10 +45,7 @@ function InputWithLabel({
 		>
 			{!labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			<Input
-				className={cx('input', {
-					'input__has-label-after': !labelAfter,
-					'input__has-close-button': !!onClose,
-				})}
+				className="input"
 				placeholder={placeholder}
 				type={type}
 				value={inputValue}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Style } from '@signozhq/design-tokens';
-import { Plus, Trash2, X } from '@signozhq/icons';
+import { ChevronDown, Plus, Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
-import { SelectSimple } from '@signozhq/ui/select';
 import { toast } from '@signozhq/ui/sonner';
+import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
 import { cloneDeep, debounce } from 'lodash-es';
@@ -15,6 +15,7 @@ import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
 import { getBaseUrl } from 'utils/basePath';
+import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import './InviteMembersModal.styles.scss';
@@ -253,17 +254,18 @@ function InviteMembersModal({
 										)}
 									</div>
 									<div className="team-member-cell role-cell">
-										<SelectSimple
+										<Select
 											value={row.role || undefined}
 											onChange={(role): void => updateRole(row.id, role as ROLES)}
 											className="team-member-role-select"
 											placeholder="Select roles"
-											items={[
-												{ value: 'VIEWER', label: 'Viewer' },
-												{ value: 'EDITOR', label: 'Editor' },
-												{ value: 'ADMIN', label: 'Admin' },
-											]}
-										/>
+											suffixIcon={<ChevronDown size={14} />}
+											getPopupContainer={popupContainer}
+										>
+											<Select.Option value="VIEWER">Viewer</Select.Option>
+											<Select.Option value="EDITOR">Editor</Select.Option>
+											<Select.Option value="ADMIN">Admin</Select.Option>
+										</Select>
 									</div>
 									<div className="team-member-cell action-cell">
 										{rows.length > 1 && (

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
@@ -113,11 +114,15 @@ function OptionsMenu({
 
 	function handleColumnSelection(
 		currentIndex: number,
-		optionsData: ComboboxSimpleItem[],
+		optionsData: DefaultOptionType[],
 	): void {
+		const currentItem = optionsData[currentIndex];
 		const itemLength = optionsData.length;
-		if (addColumn && addColumn?.onSelect && selectedValue) {
-			addColumn?.onSelect(selectedValue);
+		if (addColumn && addColumn?.onSelect) {
+			addColumn?.onSelect(selectedValue, {
+				label: currentItem.label,
+				disabled: false,
+			});
 
 			// if the last element is selected then select the previous one
 			if (currentIndex === itemLength - 1) {
@@ -171,7 +176,7 @@ function OptionsMenu({
 			}
 			case 'Enter':
 				e.preventDefault();
-				handleColumnSelection(currentIndex, optionsData as ComboboxSimpleItem[]);
+				handleColumnSelection(currentIndex, optionsData);
 				break;
 			default:
 				break;
@@ -313,10 +318,7 @@ function OptionsMenu({
 									}}
 									onClick={(eve): void => {
 										eve.stopPropagation();
-										handleColumnSelection(
-											index,
-											(addColumn?.options || []) as ComboboxSimpleItem[],
-										);
+										handleColumnSelection(index, addColumn?.options || []);
 									}}
 								>
 									<div className="name">

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -10,8 +10,7 @@ import {
 	Loader,
 	X,
 } from '@signozhq/icons';
-import { Modal, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
-import { SelectSimple } from '@signozhq/ui/select';
+import { Modal, Select, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -182,8 +181,8 @@ function AttributeCheckList({
 	const [filter, setFilter] = useState<AttributesFilters>(AttributesFilters.ALL);
 	const [treeData, setTreeData] = useState<TreeDataNode[]>([]);
 
-	const handleFilterChange = (value: string | string[]): void => {
-		setFilter(value as AttributesFilters);
+	const handleFilterChange = (value: AttributesFilters): void => {
+		setFilter(value);
 	};
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 	const history = useHistory();
@@ -238,11 +237,11 @@ function AttributeCheckList({
 				</div>
 			) : (
 				<div className="modal-content">
-					<SelectSimple
+					<Select
 						defaultValue={AttributesFilters.ALL}
 						className="attribute-select"
 						onChange={handleFilterChange}
-						items={[
+						options={[
 							{
 								value: AttributesFilters.ALL,
 								label: AttributeLabels({ title: 'Attributes: All' }),

frontend/src/components/MessagingQueues/MQCommon/MQCommon.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
-import type { ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import type { DefaultOptionType } from 'antd/es/select';
 import { Info } from '@signozhq/icons';
 
 import './MQCommon.styles.scss';
@@ -35,7 +35,7 @@ export function ComingSoon(): JSX.Element {
 }
 
 export function SelectMaxTagPlaceholder(
-	omittedValues: Partial<ComboboxSimpleItem>[],
+	omittedValues: Partial<DefaultOptionType>[],
 ): JSX.Element {
 	return (
 		<Tooltip title={omittedValues.map(({ value }) => value).join(', ')}>

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -18,9 +18,8 @@ import {
 	RefreshCw,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Checkbox } from '@signozhq/ui/checkbox';
-// oxlint-disable-next-line signoz/no-antd-components This component for now is too complex to be migrated in one PR
 import { Button, Select } from 'antd';
+import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -16,7 +16,6 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-// oxlint-disable-next-line signoz/no-antd-components This component for now is too complex to be migrated in one PR
 import { Select } from 'antd';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip';

frontend/src/components/OrderBy/ListViewOrderBy.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useQuery } from 'react-query';
-import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import { Select, Spin } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { DataSource } from 'types/common/queryBuilder';
@@ -13,25 +13,48 @@ interface ListViewOrderByProps {
 	dataSource: DataSource;
 }
 
+// Loader component for the dropdown when loading or no results
+function Loader({ isLoading }: { isLoading: boolean }): JSX.Element {
+	return (
+		<div className="order-by-loading-container">
+			{isLoading ? <Spin size="default" /> : 'No results found'}
+		</div>
+	);
+}
+
 function ListViewOrderBy({
 	value,
 	onChange,
 	dataSource,
 }: ListViewOrderByProps): JSX.Element {
-	const [selectOptions, setSelectOptions] = useState<ComboboxSimpleItem[]>([]);
+	const [searchInput, setSearchInput] = useState('');
+	const [debouncedInput, setDebouncedInput] = useState('');
+	const [selectOptions, setSelectOptions] = useState<
+		{ label: string; value: string }[]
+	>([]);
+	const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-	// Fetch key suggestions once; ComboboxSimple handles local filtering.
+	// Fetch key suggestions based on debounced input
 	const { data, isLoading } = useQuery({
-		queryKey: ['orderByKeySuggestions', dataSource],
+		queryKey: ['orderByKeySuggestions', dataSource, debouncedInput],
 		queryFn: async () => {
 			const response = await getKeySuggestions({
 				signal: dataSource,
-				searchText: '',
+				searchText: debouncedInput,
 			});
 			return response.data;
 		},
 	});
 
+	useEffect(
+		() => (): void => {
+			if (debounceTimer.current) {
+				clearTimeout(debounceTimer.current);
+			}
+		},
+		[],
+	);
+
 	// Update options when API data changes
 	useEffect(() => {
 		const rawKeys: QueryKeyDataSuggestionsProps[] = data?.data?.keys
@@ -39,33 +62,52 @@ function ListViewOrderBy({
 			: [];
 
 		const keyNames = rawKeys.map((key) => key.name);
-		const uniqueKeys = [...new Set(['timestamp', ...keyNames])];
+		const uniqueKeys = [
+			...new Set(searchInput ? keyNames : ['timestamp', ...keyNames]),
+		];
 
-		const updatedOptions: ComboboxSimpleItem[] = uniqueKeys.flatMap((key) => [
+		const updatedOptions = uniqueKeys.flatMap((key) => [
 			{ label: `${key} (desc)`, value: `${key}:desc` },
 			{ label: `${key} (asc)`, value: `${key}:asc` },
 		]);
 
 		setSelectOptions(updatedOptions);
-	}, [data]);
+	}, [data, searchInput]);
 
-	const handleChange = useMemo(
-		() =>
-			(val: string | string[]): void => {
-				onChange(val as string);
-			},
-		[onChange],
-	);
+	// Handle search input with debounce
+	const handleSearch = (input: string): void => {
+		setSearchInput(input);
+
+		// Filter current options for instant client-side match
+		const filteredOptions = selectOptions.filter((option) =>
+			option.value.toLowerCase().includes(input.trim().toLowerCase()),
+		);
+
+		// If no match found or input is empty, trigger debounced fetch
+		if (filteredOptions.length === 0 || input === '') {
+			if (debounceTimer.current) {
+				clearTimeout(debounceTimer.current);
+			}
+
+			debounceTimer.current = setTimeout(() => {
+				setDebouncedInput(input);
+			}, 100);
+		}
+	};
 
 	return (
-		<ComboboxSimple
+		<Select
+			showSearch
 			value={value}
-			onChange={handleChange}
-			loading={isLoading}
+			onChange={onChange}
+			onSearch={handleSearch}
+			notFoundContent={<Loader isLoading={isLoading} />}
 			placeholder="Select a field"
 			style={{ width: 200 }}
-			items={selectOptions}
-			emptyPlaceholder="No results found"
+			options={selectOptions}
+			filterOption={(input, option): boolean =>
+				(option?.value ?? '').toLowerCase().includes(input.trim().toLowerCase())
+			}
 		/>
 	);
 }

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -22,37 +22,6 @@
 	border-right: none;
 	border-left: none;
 
-	--select-trigger-height: 2.25rem;
-	--select-trigger-background-color: var(
-		--query-builder-v2-background-color,
-		var(--l2-background)
-	);
-	--select-trigger-border-color: var(
-		--query-builder-v2-border-color,
-		var(--l2-border)
-	);
-
-	--combobox-trigger-height: 2.25rem;
-	--combobox-trigger-padding: 7px var(--spacing-6);
-	--combobox-trigger-background-color: var(
-		--query-builder-v2-background-color,
-		var(--l2-background)
-	);
-	--combobox-trigger-border-color: var(
-		--query-builder-v2-border-color,
-		var(--l2-border)
-	);
-
-	[data-slot='combobox-trigger'],
-	[data-slot='select-trigger'] {
-		color: var(--query-builder-v2-color, var(--l2-foreground));
-	}
-
-	[data-slot='combobox-placeholder'],
-	[data-slot='select-placeholder'] {
-		color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
-	}
-
 	.qb-content-container {
 		display: flex;
 		flex-direction: column;
@@ -111,8 +80,8 @@
 				width: 1px;
 				background: repeating-linear-gradient(
 					to bottom,
-					var(--query-builder-v2-border-color, var(--l2-border)),
-					var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+					var(--l1-border),
+					var(--l1-border) 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -132,8 +101,7 @@
 					top: 12px;
 					width: 6px;
 					height: 6px;
-					border-left: 6px dotted
-						var(--query-builder-v2-border-color, var(--l2-border));
+					border-left: 6px dotted var(--l1-border);
 				}
 
 				/* Horizontal line pointing from vertical to the item */
@@ -146,8 +114,8 @@
 					height: 1px;
 					background: repeating-linear-gradient(
 						to right,
-						var(--query-builder-v2-border-color, var(--l2-border)),
-						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -273,8 +241,7 @@
 						top: 12px;
 						width: 6px;
 						height: 6px;
-						border-left: 6px dotted
-							var(--query-builder-v2-border-color, var(--l2-border));
+						border-left: 6px dotted var(--l1-border);
 					}
 
 					/* Horizontal line pointing from vertical to the item */
@@ -287,8 +254,8 @@
 						height: 1px;
 						background: repeating-linear-gradient(
 							to right,
-							var(--query-builder-v2-border-color, var(--l2-border)),
-							var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+							var(--l1-border),
+							var(--l1-border) 4px,
 							transparent 4px,
 							transparent 8px
 						);
@@ -306,16 +273,6 @@
 					line-height: 16px; /* 128.571% */
 
 					resize: none;
-
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					);
-					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-
-					&:placeholder {
-						color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
-					}
 				}
 
 				.formula-legend {
@@ -325,30 +282,15 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						);
-						color: var(--query-builder-v2-color, var(--l2-foreground));
+						background: var(--l2-background);
+						color: var(--l2-foreground);
 						font-size: 12px;
 						font-weight: 300;
-
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
 					}
 
 					.ant-input {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-
-						background-color: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						);
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-
-						&:placeholder {
-							color: var(--query-builder-v2-placeholder-color, var(--l3-foreground));
-						}
 					}
 				}
 			}
@@ -381,8 +323,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--query-builder-v2-border-color, var(--l2-border)),
-						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -453,8 +395,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--query-builder-v2-border-color, var(--l2-border)),
-						var(--query-builder-v2-border-color, var(--l2-border)) 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -470,7 +412,7 @@
 				min-width: 120px;
 
 				border-radius: 2px;
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+				border: 1px solid var(--l1-border);
 				background: var(--l1-background);
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
@@ -515,7 +457,7 @@
 
 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
+			border: 1px solid var(--l1-border) !important;
 			background: var(--l1-background) !important;
 			height: 34px !important;
 			box-sizing: border-box !important;

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss

@@ -57,7 +57,6 @@
 
 		.group-by-filter-container {
 			min-width: 340px !important;
-			--combobox-trigger-height: auto;
 		}
 
 		.metrics-aggregation-section-content-item {
@@ -147,3 +146,17 @@
 		}
 	}
 }
+
+.metrics-operators-select {
+	border-radius: 2px;
+	border: 1.005px solid var(--l1-border);
+	background: var(--l1-background);
+
+	color: var(--l1-foreground);
+	font-family: 'Geist Mono';
+	font-size: 13px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px; /* 142.857% */
+	letter-spacing: -0.07px;
+}

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

@@ -118,6 +118,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 										value={queryAggregation.timeAggregation || ''}
 										onChange={handleChangeOperator}
 										operators={operators}
+										className="metrics-operators-select"
 									/>
 								</div>
 							</div>

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss

@@ -6,13 +6,11 @@
 	gap: 8px;
 	width: 100%;
 
-	--select-trigger-width: auto;
-
 	.ant-select-selection-search-input {
 		font-size: 12px !important;
-		line-height: 25px;
+		line-height: 27px;
 		&::placeholder {
-			color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 	}
@@ -24,9 +22,9 @@
 	.ant-select-selector {
 		width: 100%;
 		border-radius: 2px;
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border)) !important;
-		background: var(--query-builder-v2-background-color, var(--l2-background));
-		color: var(--query-builder-v2-color, var(--l2-foreground));
+		border: 1px solid var(--l1-border) !important;
+		background: var(--l1-background);
+		color: var(--l1-foreground);
 		font-family: 'Geist Mono';
 		font-size: 13px;
 		font-style: normal;
@@ -35,23 +33,20 @@
 		min-height: 36px;
 
 		.ant-select-selection-placeholder {
-			color: var(
-				--query-builder-v2-placeholder-color,
-				var(--l3-foreground)
-			) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 	}
 
 	.ant-select-dropdown {
 		border-radius: 4px;
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-		background: var(--query-builder-v2-background-color, var(--l2-background));
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
 
 		.ant-select-item {
-			color: var(--query-builder-v2-color, var(--l2-foreground));
+			color: var(--l1-foreground);
 			font-family: 'Geist Mono';
 			font-size: 13px;
 			font-style: normal;
@@ -60,18 +55,12 @@
 
 			&:hover,
 			&.ant-select-item-option-active {
-				background: var(
-					--query-builder-v2-selected-background-color,
-					var(--l3-background)
-				) !important;
+				background: var(--l3-background) !important;
 			}
 
 			&.ant-select-item-option-selected {
-				background: var(
-					--query-builder-v2-selected-background-color,
-					var(--l3-background)
-				) !important;
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+				background: var(--l3-background) !important;
+				border: 1px solid var(--l1-border);
 				font-weight: 600;
 			}
 		}

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

@@ -1,5 +1,5 @@
 import { memo, useCallback, useMemo } from 'react';
-import { SelectSimple, type SelectSimpleItem } from '@signozhq/ui/select';
+import { Select } from 'antd';
 import {
 	initialQueriesMap,
 	initialQueryMeterWithType,
@@ -10,6 +10,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
+import { SelectOption } from 'types/common/select';
 
 import {
 	getPreviousQueryFromKey,
@@ -20,7 +21,7 @@ import {
 
 import './MetricsSelect.styles.scss';
 
-export const SOURCE_OPTIONS: SelectSimpleItem[] = [
+export const SOURCE_OPTIONS: SelectOption<string, string>[] = [
 	{ value: 'metrics', label: 'Metrics' },
 	{ value: 'meter', label: 'Meter' },
 ];
@@ -139,14 +140,14 @@ export const MetricsSelect = memo(function MetricsSelect({
 	return (
 		<div className="metrics-source-select-container">
 			{signalSourceChangeEnabled && (
-				<SelectSimple
+				<Select
 					className="source-selector"
 					placeholder="Source"
-					items={SOURCE_OPTIONS}
+					options={SOURCE_OPTIONS}
 					value={source}
 					defaultValue="metrics"
-					testId={`metrics-source-selector-${index}`}
-					onChange={(value): void => handleSignalSourceChange(value as string)}
+					data-testid={`metrics-source-selector-${index}`}
+					onChange={handleSignalSourceChange}
 				/>
 			)}
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -29,33 +29,32 @@
 			font-style: normal;
 			font-weight: var(--font-weight-normal);
 
-			color: var(--query-builder-v2-color, var(--l2-foreground));
+			color: var(--l2-foreground);
 		}
 
 		> button {
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			border-left: none;
 			min-width: 120px;
 			height: 36px;
 			line-height: 36px;
 
 			&:first-child {
-				border-left: 1px solid
-					var(--query-builder-v2-border-color, var(--l2-border));
+				border-left: 1px solid var(--l1-border);
 			}
 
 			&::before {
-				background: var(--query-builder-v2-border-color, var(--l2-border));
+				background: var(--l1-border);
 			}
 
 			&[data-state='on'] {
 				color: var(--text-robin-500);
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+				border: 1px solid var(--l1-border);
 
 				display: none;
 
 				&::before {
-					background: var(--query-builder-v2-border-color, var(--l2-border));
+					background: var(--l1-border);
 				}
 			}
 		}
@@ -66,7 +65,7 @@
 		height: 30px;
 
 		border-radius: 2px;
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+		border: 1px solid var(--l1-border);
 		background: var(--l3-background);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
@@ -79,13 +78,10 @@
 	align-items: center;
 
 	.having-filter-select-container {
-		position: relative;
 		width: 100%;
 		display: flex;
 		flex-direction: row;
-		align-items: flex-start;
-		background: var(--query-builder-v2-background-color, var(--l2-background));
-		padding-right: 38px;
+		align-items: center;
 
 		.having-filter-select-editor {
 			border-radius: 2px;
@@ -110,17 +106,15 @@
 				}
 
 				.cm-content {
-					border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-					border-left-width: 0px;
-					border-right-width: 0px;
+					border-radius: 2px;
+					border: 1px solid var(--l1-border);
+					border-top-right-radius: 0px;
+					border-bottom-right-radius: 0px;
 					padding: 0px !important;
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
+					background-color: var(--l2-background) !important;
 
 					&:focus-within {
-						border-color: var(--query-builder-v2-border-color, var(--l2-border));
+						border-color: var(--l1-border);
 					}
 				}
 
@@ -224,32 +218,17 @@
 				}
 
 				.cm-line {
-					min-height: 34px;
-					line-height: 32px !important;
+					line-height: 36px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
-
-					&,
-					.ͼ1a {
-						color: var(--query-builder-v2-color, var(--l2-foreground));
-					}
+					background-color: var(--l2-background) !important;
 
 					::-moz-selection {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 
 					::selection {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 
@@ -258,11 +237,8 @@
 					}
 
 					.chip-decorator {
-						background: var(
-							--query-builder-v2-chip-decorator-background-color,
-							var(--l3-background)
-						) !important;
-						color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+						background: var(--l3-background) !important;
+						color: var(--l1-foreground) !important;
 						border-radius: 4px;
 						padding: 2px 4px;
 						margin-right: 4px;
@@ -270,38 +246,34 @@
 				}
 
 				.cm-selectionBackground {
-					background: var(
-						--query-builder-v2-selection-background-color,
-						var(--l3-background)
-					) !important;
+					background: var(--l3-background) !important;
 					opacity: 0.5 !important;
 				}
 
 				.cm-activeLine > span {
 					font-size: 12px !important;
 				}
-
-				.cm-placeholder {
-					color: var(
-						--query-builder-v2-placeholder-color,
-						var(--l3-foreground)
-					) !important;
-				}
 			}
 		}
 
 		.close-btn {
-			position: absolute;
-			top: 0;
-			right: 0;
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-			background: var(--query-builder-v2-background-color, var(--l2-background));
-			height: 100%;
+			border: 1px solid var(--l2-border);
+			background: var(--l2-background);
+			height: 38px;
 			width: 38px;
 
+			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
+
+			&:focus:not(:focus-visible),
+			&.ant-btn:focus:not(:focus-visible) {
+				border-color: var(--l2-border);
+				border-left-color: transparent;
+				outline: none;
+				box-shadow: none;
+			}
 		}
 	}
 }
@@ -327,5 +299,21 @@
 		.cm-placeholder {
 			font-size: 12px !important;
 		}
+
+		$add-on-row-height: 38px;
+
+		.periscope-input-with-label {
+			.input {
+				.ant-select {
+					height: $add-on-row-height;
+				}
+			}
+		}
+
+		.input-with-label {
+			.input {
+				height: $add-on-row-height;
+			}
+		}
 	}
 }

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss

@@ -23,7 +23,7 @@
 				flex: 1;
 				min-width: 0;
 				font-size: 12px;
-				color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+				color: var(--l2-foreground) !important;
 
 				&.error {
 					.cm-editor {
@@ -51,15 +51,14 @@
 
 					.cm-content {
 						border-radius: 2px;
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+						border: 1px solid var(--l1-border);
+						border-top-right-radius: 0px;
+						border-bottom-right-radius: 0px;
 						padding: 0px !important;
-						background-color: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						) !important;
+						background-color: var(--l1-background) !important;
 
 						&:focus-within {
-							border-color: var(--query-builder-v2-border-color, var(--l2-border));
+							border-color: var(--l1-border);
 						}
 					}
 
@@ -75,7 +74,7 @@
 						right: 0px !important;
 
 						border-radius: 4px;
-						border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+						border: 1px solid var(--l1-border);
 						background: linear-gradient(
 							139deg,
 							color-mix(in srgb, var(--card) 80%, transparent) 0%,
@@ -119,7 +118,7 @@
 								box-sizing: border-box;
 								overflow: hidden;
 
-								color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+								color: var(--l2-foreground) !important;
 								font-family: 'Space Mono', monospace !important;
 
 								.cm-completionIcon {
@@ -128,10 +127,7 @@
 
 								&:hover,
 								&[aria-selected='true'] {
-									background: var(
-										--query-builder-v2-selection-background-color,
-										var(--l3-background)
-									) !important;
+									background: var(--l3-background) !important;
 									color: var(--l1-foreground) !important;
 									font-weight: 600 !important;
 								}
@@ -146,24 +142,15 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(
-							--query-builder-v2-background-color,
-							var(--l2-background)
-						) !important;
+						background-color: var(--l2-background) !important;
 
 						::-moz-selection {
-							background: var(
-								--query-builder-v2-selection-background-color,
-								var(--l3-background)
-							) !important;
+							background: var(--l3-background) !important;
 							opacity: 0.5 !important;
 						}
 
 						::selection {
-							background: var(
-								--query-builder-v2-selection-background-color,
-								var(--l3-background)
-							) !important;
+							background: var(--l3-background) !important;
 							opacity: 0.5 !important;
 						}
 
@@ -172,11 +159,8 @@
 						}
 
 						.chip-decorator {
-							background: var(
-								--query-builder-v2-chip-decorator-background-color,
-								var(--l3-background)
-							) !important;
-							color: var(--query-builder-v2-color, var(--l1-foreground)) !important;
+							background: var(--l3-background) !important;
+							color: var(--l1-foreground) !important;
 							border-radius: 4px;
 							padding: 2px 4px;
 							margin-right: 4px;
@@ -184,10 +168,7 @@
 					}
 
 					.cm-selectionBackground {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 				}
@@ -220,11 +201,12 @@
 
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-				background: var(--query-builder-v2-background-color, var(--l2-background));
-				height: 100%;
+				border: 1px solid var(--l1-border);
+				background: var(--l1-background);
+				height: 38px;
 				width: 38px;
 
+				border-left: transparent;
 				border-top-left-radius: 0px;
 				border-bottom-left-radius: 0px;
 			}
@@ -235,13 +217,13 @@
 			height: 36px;
 			line-height: 36px;
 			border-radius: 2px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 			font-family: 'Space Mono', monospace !important;
 
 			&::placeholder {
-				color: var(--query-builder-v2-color, var(--l2-foreground));
+				color: var(--l1-foreground);
 				opacity: 0.5;
 			}
 		}
@@ -258,7 +240,7 @@
 					input {
 						max-width: 120px;
 						&::placeholder {
-							color: var(--query-builder-v2-color, var(--l2-foreground));
+							color: var(--l2-foreground);
 						}
 					}
 				}
@@ -269,8 +251,8 @@
 
 .query-aggregation-error-popover {
 	.ant-popover-inner {
-		background-color: var(--query-builder-v2-border-color, var(--l2-border));
-		border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+		background-color: var(--l1-border);
+		border: 1px solid var(--l1-border);
 		border-radius: 4px;
 		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 	}

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.styles.scss

@@ -1,7 +1,7 @@
 .add-trace-operator-button,
 .add-new-query-button,
 .add-formula-button {
-	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-	background: var(--query-builder-v2-background-color, var(--l2-background));
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 }

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -34,14 +34,11 @@
 		.query-status-container {
 			width: 32px;
 
-			background-color: var(
-				--query-builder-v2-background-color,
-				var(--l2-background)
-			) !important;
+			background-color: var(--l1-background) !important;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			border-radius: 2px;
 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;
@@ -80,16 +77,16 @@
 
 		.cm-content {
 			border-radius: 2px;
-			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border: 1px solid var(--l1-border);
 			padding: 0px !important;
 
 			&:focus-within {
-				border-color: var(--query-builder-v2-border-color, var(--l2-border));
+				border-color: var(--l1-border);
 			}
 		}
 
 		&.cm-focused {
-			outline: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			outline: 1px solid var(--l1-border);
 		}
 
 		.cm-tooltip-autocomplete {
@@ -151,17 +148,11 @@
 
 					font-family: 'Space Mono', monospace !important;
 
-					background-color: var(
-						--query-builder-v2-background-color,
-						var(--l2-background)
-					) !important;
-					color: var(--query-builder-v2-color, var(--l2-foreground)) !important;
+					background-color: var(--l1-background) !important;
+					color: var(--l2-foreground) !important;
 
 					&:hover {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 					}
 
 					.cm-completionIcon {
@@ -169,10 +160,7 @@
 					}
 
 					&[aria-selected='true'] {
-						background: var(
-							--query-builder-v2-selection-background-color,
-							var(--l3-background)
-						) !important;
+						background: var(--l3-background) !important;
 						font-weight: 600 !important;
 					}
 				}
@@ -184,49 +172,25 @@
 		}
 
 		.cm-line {
-			line-height: 36px !important;
+			line-height: 34px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(
-				--query-builder-v2-background-color,
-				var(--l2-background)
-			) !important;
-
-			&,
-			.ͼ1a {
-				color: var(--query-builder-v2-color, var(--l2-foreground));
-			}
+			background-color: var(--l2-background) !important;
 
 			::-moz-selection {
-				background: var(
-					--query-builder-v2-selection-background-color,
-					var(--l3-background)
-				) !important;
+				background: var(--l3-background) !important;
 				opacity: 0.5 !important;
 			}
 
 			::selection {
-				background: var(
-					--query-builder-v2-selection-background-color,
-					var(--l3-background)
-				) !important;
+				background: var(--l3-background) !important;
 				opacity: 0.5 !important;
 			}
 		}
 
 		.cm-selectionBackground {
-			background: var(
-				--query-builder-v2-selection-background-color,
-				var(--l3-background)
-			) !important;
+			background: var(--l3-background) !important;
 			opacity: 0.5 !important;
 		}
-
-		.cm-placeholder {
-			color: var(
-				--query-builder-v2-placeholder-color,
-				var(--l3-foreground)
-			) !important;
-		}
 	}
 
 	.cursor-position {

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

@@ -14,7 +14,8 @@ import { Color } from '@signozhq/design-tokens';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
-import { Button, Card, Collapse, Popover, Tag, Tooltip } from 'antd';
+import { Button, Card, Collapse, Popover, Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import cx from 'classnames';
@@ -664,26 +665,26 @@ function QuerySearch({
 	// Helper function to render a badge for the current context mode
 	const renderContextBadge = (): JSX.Element => {
 		if (!editingMode) {
-			return <Tag>Unknown</Tag>;
+			return <Badge color="vanilla">Unknown</Badge>;
 		}
 
 		switch (editingMode) {
 			case 'key':
-				return <Tag color="blue">Key</Tag>;
+				return <Badge color="robin">Key</Badge>;
 			case 'operator':
-				return <Tag color="purple">Operator</Tag>;
+				return <Badge color="sakura">Operator</Badge>;
 			case 'value':
-				return <Tag color="green">Value</Tag>;
+				return <Badge color="forest">Value</Badge>;
 			case 'conjunction':
-				return <Tag color="orange">Conjunction</Tag>;
+				return <Badge color="amber">Conjunction</Badge>;
 			case 'function':
-				return <Tag color="cyan">Function</Tag>;
+				return <Badge color="aqua">Function</Badge>;
 			case 'parenthesis':
-				return <Tag color="magenta">Parenthesis</Tag>;
+				return <Badge color="sakura">Parenthesis</Badge>;
 			case 'bracketList':
-				return <Tag color="red">Bracket List</Tag>;
+				return <Badge color="cherry">Bracket List</Badge>;
 			default:
-				return <Tag>Unknown</Tag>;
+				return <Badge color="vanilla">Unknown</Badge>;
 		}
 	};
 
@@ -1304,34 +1305,37 @@ function QuerySearch({
 					Currently editing: {renderContextBadge()}
 					{queryContext?.keyToken && (
 						<span className="triplet-info">
-							Key: <Tag>{queryContext.keyToken}</Tag>
+							Key: <Badge color="vanilla">{queryContext.keyToken}</Badge>
 						</span>
 					)}
 					{queryContext?.operatorToken && (
 						<span className="triplet-info">
-							Operator: <Tag>{queryContext.operatorToken}</Tag>
+							Operator: <Badge color="vanilla">{queryContext.operatorToken}</Badge>
 						</span>
 					)}
 					{queryContext?.valueToken && (
 						<span className="triplet-info">
-							Value: <Tag>{queryContext.valueToken}</Tag>
+							Value: <Badge color="vanilla">{queryContext.valueToken}</Badge>
 						</span>
 					)}
 					{queryContext?.currentPair && (
 						<span className="triplet-info query-pair-info">
-							Current pair: <Tag color="blue">{queryContext.currentPair.key}</Tag>
-							<Tag color="purple">{queryContext.currentPair.operator}</Tag>
+							Current pair: <Badge color="robin">{queryContext.currentPair.key}</Badge>
+							<Badge color="sakura">{queryContext.currentPair.operator}</Badge>
 							{queryContext.currentPair.value && (
-								<Tag color="green">{queryContext.currentPair.value}</Tag>
+								<Badge color="forest">{queryContext.currentPair.value}</Badge>
 							)}
-							<Tag color={queryContext.currentPair.isComplete ? 'success' : 'warning'}>
+							<Badge
+								color={queryContext.currentPair.isComplete ? 'success' : 'warning'}
+							>
 								{queryContext.currentPair.isComplete ? 'Complete' : 'Incomplete'}
-							</Tag>
+							</Badge>
 						</span>
 					)}
 					{queryContext?.queryPairs && queryContext.queryPairs.length > 0 && (
 						<span className="triplet-info">
-							Total pairs: <Tag color="blue">{queryContext.queryPairs.length}</Tag>
+							Total pairs:{' '}
+							<Badge color="robin">{queryContext.queryPairs.length}</Badge>
 						</span>
 					)}
 				</div>

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

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import QBEntityOptions from 'container/QueryBuilder/components/QBEntityOptions/QBEntityOptions';
-import { QueryProps } from 'container/QueryBuilder/components/Query/Query.interfaces';
+import { QueryProps } from 'container/QueryBuilder/type';
 import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';

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

@@ -4,6 +4,23 @@
 	padding: 12px;
 	gap: 12px;
 	border-bottom: 1px solid var(--l1-border);
+
+	.search {
+		input {
+			--input-background: var(--l2-background);
+			--input-hover-background: var(--l2-background);
+			--input-focus-background: var(--l2-background);
+			&::placeholder {
+				color: var(--l3-foreground);
+			}
+			--input-font-size: 14px;
+			--input-border-color: var(--l1-border);
+			--input-focus-border-color: var(--primary-background);
+			--input-focus-outline-width: 0;
+			--input-focus-outline-offset: 0;
+		}
+	}
+
 	.filter-header-checkbox {
 		display: flex;
 		align-items: center;

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

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Button, Input, Skeleton } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button, Skeleton } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';

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

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { Button, Input } from 'antd';
+import { Input } from '@signozhq/ui/input';
+import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -1,10 +1,12 @@
 import { CircleAlert, RefreshCw } from '@signozhq/icons';
-import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import { Select } from 'antd';
+import { Checkbox } from '@signozhq/ui/checkbox';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { useListRoles } from 'api/generated/services/role';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import APIError from 'types/api/error';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import './RolesSelect.styles.scss';
 
@@ -73,6 +75,7 @@ interface BaseProps {
 	id?: string;
 	placeholder?: string;
 	className?: string;
+	getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
 	roles?: AuthtypesRoleDTO[];
 	loading?: boolean;
 	isError?: boolean;
@@ -110,13 +113,14 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 	});
 
 	const roles = externalRoles ?? data?.data ?? [];
-	const items: ComboboxSimpleItem[] = getRoleOptions(roles);
+	const options = getRoleOptions(roles);
 
 	const {
 		mode,
 		id,
 		placeholder = 'Select role',
 		className,
+		getPopupContainer = popupContainer,
 		loading = internalLoading,
 		isError = internalError,
 		error = convertToApiError(internalErrorObj),
@@ -124,47 +128,54 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 		disabled,
 	} = props;
 
-	const emptyPlaceholder = isError
-		? error?.message || 'Failed to load roles'
-		: 'No roles available';
+	const notFoundContent = isError ? (
+		<ErrorContent error={error} onRefetch={onRefetch} />
+	) : undefined;
 
 	if (mode === 'multiple') {
 		const { value = [], onChange } = props as MultipleProps;
 		return (
-			<>
-				<ComboboxSimple
-					id={id}
-					multiple
-					value={value}
-					onChange={(v): void => onChange?.(v as string[])}
-					placeholder={placeholder}
-					className={cx('roles-select', className)}
-					loading={loading}
-					emptyPlaceholder={emptyPlaceholder}
-					items={items}
-					style={disabled ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
-				/>
-				{isError && <ErrorContent error={error} onRefetch={onRefetch} />}
-			</>
+			<Select
+				id={id}
+				mode="multiple"
+				value={value}
+				onChange={onChange}
+				placeholder={placeholder}
+				className={cx('roles-select', className)}
+				loading={loading}
+				notFoundContent={notFoundContent}
+				options={options}
+				optionFilterProp="label"
+				optionRender={(option): JSX.Element => (
+					<div style={{ pointerEvents: 'none' }}>
+						<Checkbox value={value.includes(option.value as string)}>
+							{option.label}
+						</Checkbox>
+					</div>
+				)}
+				getPopupContainer={getPopupContainer}
+				disabled={disabled}
+			/>
 		);
 	}
 
-	const { value, onChange } = props as SingleProps;
+	const { value, onChange, allowClear = true } = props as SingleProps;
 	return (
-		<>
-			<ComboboxSimple
-				id={id}
-				value={value || undefined}
-				onChange={(v): void => onChange?.((v as string) || undefined)}
-				placeholder={placeholder}
-				className={cx('roles-single-select', className)}
-				loading={loading}
-				emptyPlaceholder={emptyPlaceholder}
-				items={items}
-				style={disabled ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
-			/>
-			{isError && <ErrorContent error={error} onRefetch={onRefetch} />}
-		</>
+		<Select
+			id={id}
+			showSearch
+			value={value || undefined}
+			onChange={onChange}
+			placeholder={placeholder}
+			allowClear={allowClear}
+			className={cx('roles-single-select', className)}
+			loading={loading}
+			notFoundContent={notFoundContent}
+			options={options}
+			optionFilterProp="label"
+			getPopupContainer={getPopupContainer}
+			disabled={disabled}
+		/>
 	);
 }
 

frontend/src/components/RouteTab/RouteTab.styles.scss

@@ -0,0 +1,12 @@
+.route-tab-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	padding: 4px;
+}
+
+.route-tab-extra {
+	display: flex;
+	align-items: center;
+}

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

@@ -70,7 +70,7 @@ describe('RouteTab component', () => {
 			</Router>,
 		);
 		expect(history.location.pathname).toBe('/');
-		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
+		fireEvent.mouseDown(screen.getByRole('tab', { name: 'Tab2' }));
 		expect(history.location.pathname).toBe('/tab2');
 	});
 
@@ -87,7 +87,7 @@ describe('RouteTab component', () => {
 				/>
 			</Router>,
 		);
-		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
+		fireEvent.mouseDown(screen.getByRole('tab', { name: 'Tab2' }));
 		expect(onChangeHandler).toHaveBeenCalled();
 	});
 });

frontend/src/components/RouteTab/index.tsx

@@ -1,10 +1,17 @@
+import './RouteTab.styles.scss';
+
 import {
 	generatePath,
 	matchPath,
 	useLocation,
 	useParams,
 } from 'react-router-dom';
-import { Tabs, TabsProps } from 'antd';
+import {
+	TabsContent,
+	TabsList,
+	TabsRoot,
+	TabsTrigger,
+} from '@signozhq/ui/tabs';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 
 import { RouteTabProps } from './types';
@@ -16,11 +23,13 @@ interface Params {
 function RouteTab({
 	routes,
 	activeKey,
+	defaultActiveKey,
 	onChangeHandler,
 	history,
-	showRightSection,
-	...rest
-}: RouteTabProps & TabsProps): JSX.Element {
+	showRightSection = true,
+	tabBarExtraContent,
+	hideTabBar = false,
+}: RouteTabProps): JSX.Element {
 	const params = useParams<Params>();
 	const location = useLocation();
 
@@ -46,38 +55,38 @@ function RouteTab({
 		}
 	};
 
-	const items = routes.map(({ Component, name, route, key }) => ({
-		label: name,
-		key,
-		tabKey: route,
-		children: <Component />,
-	}));
+	const resolvedActiveKey = currentRoute?.key || activeKey;
+	const extraContent =
+		tabBarExtraContent ??
+		(showRightSection && (
+			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
+		));
 
 	return (
-		<Tabs
-			onChange={onChange}
-			destroyInactiveTabPane
-			activeKey={currentRoute?.key || activeKey}
-			defaultActiveKey={currentRoute?.key || activeKey}
-			animated
-			items={items}
-			tabBarExtraContent={
-				showRightSection && (
-					<HeaderRightSection
-						enableAnnouncements={false}
-						enableShare
-						enableFeedback
-					/>
-				)
-			}
-			{...rest}
-		/>
+		<TabsRoot
+			value={resolvedActiveKey}
+			defaultValue={defaultActiveKey ?? resolvedActiveKey}
+			onValueChange={onChange}
+		>
+			{!hideTabBar && (
+				<div className="route-tab-header">
+					<TabsList>
+						{routes.map(({ name, key }) => (
+							<TabsTrigger key={key} value={key}>
+								{name}
+							</TabsTrigger>
+						))}
+					</TabsList>
+					{extraContent && <div className="route-tab-extra">{extraContent}</div>}
+				</div>
+			)}
+			{routes.map(({ key, Component }) => (
+				<TabsContent key={key} value={key}>
+					<Component />
+				</TabsContent>
+			))}
+		</TabsRoot>
 	);
 }
 
-RouteTab.defaultProps = {
-	onChangeHandler: undefined,
-	showRightSection: true,
-};
-
 export default RouteTab;

frontend/src/components/RouteTab/types.ts

@@ -1,5 +1,5 @@
-import { TabsProps } from 'antd';
 import { History } from 'history';
+import { ReactNode } from 'react';
 
 export type TabRoutes = {
 	name: React.ReactNode;
@@ -10,8 +10,11 @@ export type TabRoutes = {
 
 export interface RouteTabProps {
 	routes: TabRoutes[];
-	activeKey: TabsProps['activeKey'];
+	activeKey: string | undefined;
+	defaultActiveKey?: string;
 	onChangeHandler?: (key: string) => void;
 	history: History<unknown>;
-	showRightSection: boolean;
+	showRightSection?: boolean;
+	tabBarExtraContent?: ReactNode;
+	hideTabBar?: boolean;
 }

frontend/src/components/TableRenderer/BadgeWithTooltip.tsx

@@ -1,36 +1,34 @@
-import { Tag, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 
 import { getLabelRenderingValue } from './utils';
 
-function TagWithToolTip({
+function BadgeWithTooltip({
 	label,
 	value,
-	color,
-}: TagWithToolTipProps): JSX.Element {
+}: BadgeWithTooltipProps): JSX.Element {
 	const tooltipTitle =
 		value && value[label] ? `${label}: ${value[label]}` : label;
 	return (
 		<div key={label}>
 			<Tooltip title={tooltipTitle}>
-				<Tag className="label-column--tag" color={color}>
+				<Badge className="label-column--tag" color="vanilla">
 					{getLabelRenderingValue(label, value && value[label])}
-				</Tag>
+				</Badge>
 			</Tooltip>
 		</div>
 	);
 }
 
-type TagWithToolTipProps = {
+type BadgeWithTooltipProps = {
 	label: string;
-	color?: string;
 	value?: {
 		[key: string]: string;
 	};
 };
 
-TagWithToolTip.defaultProps = {
+BadgeWithTooltip.defaultProps = {
 	value: undefined,
-	color: undefined,
 };
 
-export default TagWithToolTip;
+export default BadgeWithTooltip;

frontend/src/components/TableRenderer/LabelColumn.tsx

@@ -1,12 +1,13 @@
-import { Popover, Tag } from 'antd';
+import { Popover } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 
 import { LabelColumnProps } from './TableRenderer.types';
-import TagWithToolTip from './TagWithToolTip';
+import BadgeWithTooltip from './BadgeWithTooltip';
 import { getLabelAndValueContent } from './utils';
 
 import './LabelColumn.styles.scss';
 
-function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
+function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
 	const newLabels = labels.length > 3 ? labels.slice(0, 3) : labels;
 	const remainingLabels = labels.length > 3 ? labels.slice(3) : [];
 
@@ -14,7 +15,7 @@ function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 		<div className="label-column">
 			{newLabels.map(
 				(label: string): JSX.Element => (
-					<TagWithToolTip key={label} label={label} color={color} value={value} />
+					<BadgeWithTooltip key={label} label={label} value={value} />
 				),
 			)}
 			{remainingLabels.length > 0 && (
@@ -26,9 +27,9 @@ function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 							{labels.map(
 								(label: string): JSX.Element => (
 									<div key={label}>
-										<Tag className="label-column--tag" color={color}>
+										<Badge className="label-column--tag" color="vanilla">
 											{getLabelAndValueContent(label, value && value[label])}
-										</Tag>
+										</Badge>
 									</div>
 								),
 							)}
@@ -36,9 +37,9 @@ function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 					}
 					trigger="hover"
 				>
-					<Tag className="label-column--tag" color={color}>
+					<Badge className="label-column--tag" color="vanilla">
 						+{remainingLabels.length}
-					</Tag>
+					</Badge>
 				</Popover>
 			)}
 		</div>

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -16,7 +16,7 @@ import {
 	horizontalListSortingStrategy,
 	SortableContext,
 } from '@dnd-kit/sortable';
-import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import { ComboboxSimple } from '@signozhq/ui/combobox';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { Pagination } from '@signozhq/ui/pagination';
 import type { Row } from '@tanstack/react-table';
@@ -51,7 +51,7 @@ import { useEffectiveData } from './useEffectiveData';
 import { useFlatItems } from './useFlatItems';
 import { useRowKeyData } from './useRowKeyData';
 import { useTableParams } from './useTableParams';
-import { buildTanstackColumnDef } from './utils';
+import { buildPageSizeItems, buildTanstackColumnDef } from './utils';
 import { VirtuosoTableColGroup } from './VirtuosoTableColGroup';
 
 import tableStyles from './TanStackTable.module.scss';
@@ -66,14 +66,6 @@ const INCREASE_VIEWPORT_BY = { top: 500, bottom: 500 };
 
 const noopColumnVisibility = (): void => {};
 
-const paginationPageSizeItems: ComboboxSimpleItem[] = [10, 20, 30, 50, 100].map(
-	(value) => ({
-		value: value.toString(),
-		label: value.toString(),
-		displayValue: value.toString(),
-	}),
-);
-
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function TanStackTableInner<TData>(
 	{
@@ -89,7 +81,6 @@ function TanStackTableInner<TData>(
 		enableQueryParams,
 		pagination,
 		paginationClassname,
-		onSort,
 		onEndReached,
 		getRowKey,
 		getItemKey,
@@ -102,6 +93,7 @@ function TanStackTableInner<TData>(
 		onRowClick,
 		onRowClickNewTab,
 		onRowDeactivate,
+		onSort,
 		activeRowIndex,
 		renderExpandedRow,
 		getRowCanExpand,
@@ -129,17 +121,22 @@ function TanStackTableInner<TData>(
 	const {
 		page,
 		limit,
-		setPage,
-		setLimit,
+		setPage: internalSetPage,
+		setLimit: internalSetLimit,
 		orderBy,
 		setOrderBy: internalSetOrderBy,
 		expanded,
 		setExpanded,
 	} = useTableParams(enableQueryParams, {
 		page: pagination?.defaultPage,
-		limit: pagination?.defaultLimit,
+		limit: pagination?.defaultLimit ?? pagination?.calculatedPageSize ?? 10,
 	});
 
+	const pageSizeItems = useMemo(
+		() => buildPageSizeItems(pagination?.calculatedPageSize),
+		[pagination?.calculatedPageSize],
+	);
+
 	const setOrderBy = useCallback(
 		(sort: SortState | null) => {
 			internalSetOrderBy(sort);
@@ -148,6 +145,23 @@ function TanStackTableInner<TData>(
 		[internalSetOrderBy, onSort],
 	);
 
+	const setPage = useCallback(
+		(p: number) => {
+			internalSetPage(p);
+			pagination?.onPageChange?.(p);
+		},
+		[internalSetPage, pagination],
+	);
+
+	const setLimit = useCallback(
+		(l: number) => {
+			internalSetLimit(l);
+			internalSetPage(1);
+			pagination?.onLimitChange?.(l);
+		},
+		[internalSetLimit, internalSetPage, pagination],
+	);
+
 	const isGrouped = (groupBy?.length ?? 0) > 0;
 
 	const {
@@ -621,6 +635,7 @@ function TanStackTableInner<TData>(
 							{pagination.showPageSize !== false && (
 								<div className={viewStyles.paginationPageSize}>
 									<ComboboxSimple
+										testId="pagination-page-size"
 										value={limit?.toString()}
 										defaultValue="10"
 										onChange={(value): void => {
@@ -631,7 +646,7 @@ function TanStackTableInner<TData>(
 												pagination.onPageChange?.(1);
 											}
 										}}
-										items={paginationPageSizeItems}
+										items={pageSizeItems}
 									/>
 								</div>
 							)}

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

@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { fireEvent, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { UrlUpdateEvent } from 'nuqs/adapters/testing';
 
@@ -23,12 +23,13 @@ jest.mock('../TanStackTable.module.scss', () => ({
 	},
 }));
 
-// Mock ResizeObserver for combobox tests
-global.ResizeObserver = class ResizeObserver {
-	observe(): void {}
-	unobserve(): void {}
-	disconnect(): void {}
-};
+beforeAll(() => {
+	window.ResizeObserver = jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+});
 
 describe('TanStackTableView Integration', () => {
 	describe('rendering', () => {
@@ -402,6 +403,22 @@ describe('TanStackTableView Integration', () => {
 			});
 		});
 
+		it('preserves page from URL on initial mount', async () => {
+			renderTanStackTable({
+				props: {
+					pagination: { total: 100, defaultPage: 1, defaultLimit: 10 },
+					enableQueryParams: true,
+				},
+				queryParams: { page: '3' },
+			});
+
+			const nav = await screen.findByRole('navigation');
+			const page3Button = within(nav).getByRole('button', { name: '3' });
+
+			// Page 3 should be active (from URL), not reset to defaultPage 1
+			expect(page3Button).toHaveAttribute('aria-current', 'page');
+		});
+
 		it('resets page to 1 when limit changes', async () => {
 			const user = userEvent.setup();
 			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();

frontend/src/components/TanStackTableView/__tests__/useCalculatedPageSize.test.ts

@@ -0,0 +1,25 @@
+import { renderHook } from '@testing-library/react';
+
+import { useCalculatedPageSize } from '../useCalculatedPageSize';
+
+describe('useCalculatedPageSize', () => {
+	it('returns containerRef and null calculatedPageSize initially', () => {
+		const { result } = renderHook(() => useCalculatedPageSize());
+		expect(result.current.containerRef).toBeDefined();
+		expect(result.current.containerRef.current).toBeNull();
+		expect(result.current.calculatedPageSize).toBeNull();
+	});
+
+	it('accepts custom config', () => {
+		const { result } = renderHook(() =>
+			useCalculatedPageSize({
+				rowHeight: 50,
+				headerHeight: 40,
+				paginationHeight: 50,
+				minPageSize: 3,
+				maxPageSize: 20,
+			}),
+		);
+		expect(result.current.containerRef).toBeDefined();
+	});
+});

frontend/src/components/TanStackTableView/__tests__/usePreferredPageSize.test.ts

@@ -0,0 +1,89 @@
+/* eslint-disable no-restricted-syntax */
+import { act, renderHook } from '@testing-library/react';
+
+import {
+	getPreferredPageSize,
+	usePreferredPageSize,
+	usePreferredPageSizeStore,
+} from '../usePreferredPageSize.store';
+
+const STORAGE_KEY = 'test-table';
+const FULL_STORAGE_KEY = '@signoz/table-columns/test-table-preferred-page-size';
+
+describe('usePreferredPageSize', () => {
+	beforeEach(() => {
+		localStorage.clear();
+		usePreferredPageSizeStore.setState({ tables: {} });
+	});
+
+	it('returns null when no stored value exists', () => {
+		const { result } = renderHook(() => usePreferredPageSize(STORAGE_KEY));
+		expect(result.current[0]).toBeNull();
+	});
+
+	it('returns null when storageKey is undefined', () => {
+		const { result } = renderHook(() => usePreferredPageSize(undefined));
+		expect(result.current[0]).toBeNull();
+	});
+
+	it('loads stored page size from localStorage', () => {
+		localStorage.setItem(FULL_STORAGE_KEY, '25');
+		const { result } = renderHook(() => usePreferredPageSize(STORAGE_KEY));
+		expect(result.current[0]).toBe(25);
+	});
+
+	it('ignores invalid stored values', () => {
+		localStorage.setItem(FULL_STORAGE_KEY, 'invalid');
+		const { result } = renderHook(() => usePreferredPageSize(STORAGE_KEY));
+		expect(result.current[0]).toBeNull();
+	});
+
+	it('persists page size to localStorage when set', () => {
+		const { result } = renderHook(() => usePreferredPageSize(STORAGE_KEY));
+
+		act(() => {
+			result.current[1](30);
+		});
+
+		expect(result.current[0]).toBe(30);
+		expect(localStorage.getItem(FULL_STORAGE_KEY)).toBe('30');
+	});
+
+	it('removes from localStorage when set to null', () => {
+		localStorage.setItem(FULL_STORAGE_KEY, '25');
+		const { result } = renderHook(() => usePreferredPageSize(STORAGE_KEY));
+
+		act(() => {
+			result.current[1](null);
+		});
+
+		expect(result.current[0]).toBeNull();
+		expect(localStorage.getItem(FULL_STORAGE_KEY)).toBeNull();
+	});
+
+	it('does nothing when storageKey is undefined and set is called', () => {
+		const { result } = renderHook(() => usePreferredPageSize(undefined));
+
+		act(() => {
+			result.current[1](30);
+		});
+
+		expect(result.current[0]).toBeNull();
+	});
+});
+
+describe('getPreferredPageSize', () => {
+	beforeEach(() => {
+		localStorage.clear();
+		usePreferredPageSizeStore.setState({ tables: {} });
+	});
+
+	it('returns null when no stored value exists', () => {
+		expect(getPreferredPageSize(STORAGE_KEY)).toBeNull();
+	});
+
+	it('returns stored value from localStorage', () => {
+		localStorage.setItem(FULL_STORAGE_KEY, '42');
+		expect(getPreferredPageSize(STORAGE_KEY)).toBe(42);
+	});
+});

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

@@ -7,6 +7,7 @@ import {
 } from 'nuqs/adapters/testing';
 
 import { useTableParams } from '../useTableParams';
+import { usePreferredPageSizeStore } from '../usePreferredPageSize.store';
 
 function createNuqsWrapper(
 	queryParams?: Record<string, string>,
@@ -543,3 +544,406 @@ describe('useTableParams (selective URL mode — partial config object)', () =>
 		});
 	});
 });
+
+describe('useTableParams (cleanupOnUnmount option)', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+		localStorage.clear();
+		usePreferredPageSizeStore.setState({ tables: {} });
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('clears URL params on unmount when cleanupOnUnmount is true', async () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+
+		const { result, unmount } = renderHook(
+			() =>
+				useTableParams(
+					{ page: 'page', limit: 'limit', orderBy: 'orderBy' },
+					{
+						page: 1,
+						limit: 10,
+						cleanupOnUnmount: true,
+					},
+				),
+			{ wrapper },
+		);
+
+		// Set some values
+		await act(async () => {
+			result.current.setLimit(50);
+			result.current.setPage(3);
+			jest.runAllTimers();
+			await Promise.resolve();
+		});
+
+		// Verify values set
+		expect(result.current.limit).toBe(50);
+		expect(result.current.page).toBe(3);
+
+		// Unmount triggers cleanup
+		unmount();
+
+		await act(async () => {
+			jest.runAllTimers();
+			await Promise.resolve();
+		});
+
+		// Last URL update should have cleared params
+		const lastUpdate = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1];
+		expect(lastUpdate[0].searchParams.get('limit')).toBeNull();
+		expect(lastUpdate[0].searchParams.get('page')).toBeNull();
+	});
+
+	it('does not clear URL params on unmount when cleanupOnUnmount is false', async () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+
+		const { result, unmount } = renderHook(
+			() =>
+				useTableParams(
+					{ page: 'page', limit: 'limit' },
+					{
+						page: 1,
+						limit: 10,
+						cleanupOnUnmount: false,
+					},
+				),
+			{ wrapper },
+		);
+
+		await act(async () => {
+			result.current.setLimit(50);
+			jest.runAllTimers();
+			await Promise.resolve();
+		});
+
+		expect(result.current.limit).toBe(50);
+
+		unmount();
+
+		await act(async () => {
+			jest.runAllTimers();
+			await Promise.resolve();
+		});
+
+		// No new URL updates after unmount (or same count)
+		const lastUpdate = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1];
+		expect(lastUpdate[0].searchParams.get('limit')).toBe('50');
+	});
+
+	it('defaults cleanupOnUnmount to false', async () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+
+		const { result, unmount } = renderHook(
+			() =>
+				useTableParams({ page: 'page', limit: 'limit' }, { page: 1, limit: 10 }),
+			{ wrapper },
+		);
+
+		await act(async () => {
+			result.current.setLimit(50);
+			jest.runAllTimers();
+			await Promise.resolve();
+		});
+
+		unmount();
+
+		await act(async () => {
+			jest.runAllTimers();
+			await Promise.resolve();
+		});
+
+		// URL should still have limit=50 (cleanup not triggered)
+		const lastUpdate = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1];
+		expect(lastUpdate[0].searchParams.get('limit')).toBe('50');
+	});
+});
+
+describe('useTableParams (auto page size with storageKey)', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+		localStorage.clear();
+		usePreferredPageSizeStore.setState({ tables: {} });
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('uses explicit default when no URL, no calculated, no preferred', () => {
+		const wrapper = createNuqsWrapper();
+		const { result } = renderHook(
+			() =>
+				useTableParams(
+					{ page: 'page', limit: 'limit' },
+					{
+						page: 1,
+						limit: 10,
+						storageKey: 'test-table',
+						calculatedPageSize: null,
+					},
+				),
+			{ wrapper },
+		);
+
+		// Should use explicit default (10), NOT the internal DEFAULT_LIMIT (50)
+		expect(result.current.limit).toBe(10);
+	});
+
+	it('uses calculatedPageSize when available and no preferred', () => {
+		const wrapper = createNuqsWrapper();
+		const { result } = renderHook(
+			() =>
+				useTableParams(
+					{ page: 'page', limit: 'limit' },
+					{
+						page: 1,
+						limit: 10,
+						storageKey: 'test-table',
+						calculatedPageSize: 42,
+					},
+				),
+			{ wrapper },
+		);
+
+		expect(result.current.limit).toBe(42);
+	});
+
+	it('prefers stored value over calculatedPageSize', () => {
+		// Pre-populate the store
+		localStorage.setItem(
+			'@signoz/table-columns/test-table-preferred-page-size',
+			'25',
+		);
+
+		const wrapper = createNuqsWrapper();
+		const { result } = renderHook(
+			() =>
+				useTableParams(
+					{ page: 'page', limit: 'limit' },
+					{
+						page: 1,
+						limit: 10,
+						storageKey: 'test-table',
+						calculatedPageSize: 42,
+					},
+				),
+			{ wrapper },
+		);
+
+		// Should use preferred (25), not calculated (42)
+		expect(result.current.limit).toBe(25);
+	});
+
+	it('preserves URL limit over calculated and preferred', () => {
+		localStorage.setItem(
+			'@signoz/table-columns/test-table-preferred-page-size',
+			'25',
+		);
+
+		const wrapper = createNuqsWrapper({ limit: '30' });
+		const { result } = renderHook(
+			() =>
+				useTableParams(
+					{ page: 'page', limit: 'limit' },
+					{
+						page: 1,
+						limit: 10,
+						storageKey: 'test-table',
+						calculatedPageSize: 42,
+					},
+				),
+			{ wrapper },
+		);
+
+		// Should use URL (30), not preferred (25) or calculated (42)
+		expect(result.current.limit).toBe(30);
+	});
+
+	it('persists user selection when different from calculated', () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+		const { result } = renderHook(
+			() =>
+				useTableParams(
+					{ page: 'page', limit: 'limit' },
+					{
+						page: 1,
+						limit: 10,
+						storageKey: 'test-table',
+						calculatedPageSize: 42,
+					},
+				),
+			{ wrapper },
+		);
+
+		// User selects 30 (different from calculated 42)
+		act(() => {
+			result.current.setLimit(30);
+			jest.runAllTimers();
+		});
+
+		expect(result.current.limit).toBe(30);
+		expect(
+			localStorage.getItem('@signoz/table-columns/test-table-preferred-page-size'),
+		).toBe('30');
+	});
+
+	it('clears preference when user selects calculated value', () => {
+		// Pre-set a preference
+		localStorage.setItem(
+			'@signoz/table-columns/test-table-preferred-page-size',
+			'30',
+		);
+		usePreferredPageSizeStore.setState({ tables: { 'test-table': 30 } });
+
+		const wrapper = createNuqsWrapper();
+		const { result } = renderHook(
+			() =>
+				useTableParams(
+					{ page: 'page', limit: 'limit' },
+					{
+						page: 1,
+						limit: 10,
+						storageKey: 'test-table',
+						calculatedPageSize: 42,
+					},
+				),
+			{ wrapper },
+		);
+
+		// User selects 42 (same as calculated)
+		act(() => {
+			result.current.setLimit(42);
+			jest.runAllTimers();
+		});
+
+		expect(result.current.limit).toBe(42);
+		// Preference should be cleared (null removes from storage)
+		expect(
+			localStorage.getItem('@signoz/table-columns/test-table-preferred-page-size'),
+		).toBeNull();
+	});
+
+	it('returns calculated value even before URL is synced', () => {
+		const wrapper = createNuqsWrapper();
+
+		const { result } = renderHook(
+			() =>
+				useTableParams(
+					{ page: 'page', limit: 'limit' },
+					{
+						page: 1,
+						limit: 10,
+						storageKey: 'test-table',
+						calculatedPageSize: 42,
+					},
+				),
+			{ wrapper },
+		);
+
+		// Limit should be 42 (calculated) even if URL sync is async
+		expect(result.current.limit).toBe(42);
+	});
+
+	it('does not override URL when it already has a value', () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({ limit: '30' }, onUrlUpdate);
+
+		const { result } = renderHook(
+			() =>
+				useTableParams(
+					{ page: 'page', limit: 'limit' },
+					{
+						page: 1,
+						limit: 10,
+						storageKey: 'test-table',
+						calculatedPageSize: 42,
+					},
+				),
+			{ wrapper },
+		);
+
+		act(() => {
+			jest.runAllTimers();
+		});
+
+		// Limit should stay at 30 (from URL), not change to 42
+		expect(result.current.limit).toBe(30);
+	});
+
+	it('handles calculatedPageSize changing from null to number', () => {
+		const wrapper = createNuqsWrapper();
+
+		const { result, rerender } = renderHook(
+			({ calculated }) =>
+				useTableParams(
+					{ page: 'page', limit: 'limit' },
+					{
+						page: 1,
+						limit: 10,
+						storageKey: 'test-table-2',
+						calculatedPageSize: calculated,
+					},
+				),
+			{ wrapper, initialProps: { calculated: null as number | null } },
+		);
+
+		// Initially should use explicit default (10)
+		expect(result.current.limit).toBe(10);
+
+		// When calculated becomes available, should update
+		rerender({ calculated: 42 });
+
+		act(() => {
+			jest.runAllTimers();
+		});
+
+		// Limit should now be 42
+		expect(result.current.limit).toBe(42);
+	});
+
+	it('keeps user selection when calculatedPageSize changes', () => {
+		const wrapper = createNuqsWrapper();
+
+		const { result, rerender } = renderHook(
+			({ calculated }) =>
+				useTableParams(
+					{ page: 'page', limit: 'limit' },
+					{
+						page: 1,
+						limit: 10,
+						storageKey: 'test-table-3',
+						calculatedPageSize: calculated,
+					},
+				),
+			{ wrapper, initialProps: { calculated: 42 as number | null } },
+		);
+
+		expect(result.current.limit).toBe(42);
+
+		// User selects 30
+		act(() => {
+			result.current.setLimit(30);
+			jest.runAllTimers();
+		});
+
+		expect(result.current.limit).toBe(30);
+
+		// calculatedPageSize changes (e.g., window resize)
+		rerender({ calculated: 50 });
+
+		act(() => {
+			jest.runAllTimers();
+		});
+
+		// Should keep user's selection (30), not change to new calculated (50)
+		expect(result.current.limit).toBe(30);
+	});
+});

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

@@ -0,0 +1,199 @@
+import { ReactNode } from 'react';
+import { act, renderHook } from '@testing-library/react';
+import { useQueryStates, parseAsInteger } from 'nuqs';
+import {
+	NuqsTestingAdapter,
+	OnUrlUpdateFunction,
+	UrlUpdateEvent,
+} from 'nuqs/adapters/testing';
+import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
+
+import { useTableParams } from '../useTableParams';
+import { usePreferredPageSizeStore } from '../usePreferredPageSize.store';
+
+function createNuqsWrapper(
+	queryParams?: Record<string, string>,
+	onUrlUpdate?: OnUrlUpdateFunction,
+): ({ children }: { children: ReactNode }) => JSX.Element {
+	return function NuqsWrapper({
+		children,
+	}: {
+		children: ReactNode;
+	}): JSX.Element {
+		return (
+			<NuqsTestingAdapter
+				searchParams={queryParams}
+				onUrlUpdate={onUrlUpdate}
+				hasMemory
+			>
+				{children}
+			</NuqsTestingAdapter>
+		);
+	};
+}
+
+const QUERY_PARAMS_CONFIG = {
+	orderBy: 'orderBy',
+	page: 'page',
+	limit: 'limit',
+} as const;
+
+type TableParamsWithCleanup = ReturnType<typeof useTableParams> & {
+	clearParams: ReturnType<typeof useQueryStates>[1];
+};
+
+/**
+ * Simulates the cleanup pattern used in ListAlertRules:
+ * - Uses useQueryStates to clear URL params on unmount
+ */
+function useTableParamsWithCleanup(
+	storageKey: string,
+	calculatedPageSize: number | null,
+): TableParamsWithCleanup {
+	const result = useTableParams(QUERY_PARAMS_CONFIG, {
+		page: 1,
+		limit: 10,
+		storageKey,
+		calculatedPageSize,
+	});
+
+	// This mirrors the cleanup effect in ListAlertRules
+	const [, setTableQueryParams] = useQueryStates({
+		[QUERY_PARAMS_CONFIG.orderBy]: parseAsJsonNoValidate(),
+		[QUERY_PARAMS_CONFIG.page]: parseAsInteger,
+		[QUERY_PARAMS_CONFIG.limit]: parseAsInteger,
+	});
+
+	// Note: We can't use useEffect cleanup in tests easily, but we can verify
+	// that calling setTableQueryParams with nulls does clear the URL
+
+	return { ...result, clearParams: setTableQueryParams };
+}
+
+describe('URL cleanup pattern (simulating ListAlertRules behavior)', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+		localStorage.clear();
+		usePreferredPageSizeStore.setState({ tables: {} });
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('setTableQueryParams with null values should clear URL params', async () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+
+		const { result } = renderHook(
+			() => useTableParamsWithCleanup('alert-rules', 42),
+			{ wrapper },
+		);
+
+		// Set limit to 100
+		await act(async () => {
+			result.current.setLimit(100);
+			jest.runAllTimers();
+			await Promise.resolve();
+		});
+
+		expect(result.current.limit).toBe(100);
+
+		// Verify limit=100 is in URL
+		const limitAfterSet = onUrlUpdate.mock.calls
+			.map((call) => call[0].searchParams.get('limit'))
+			.filter(Boolean)
+			.pop();
+		expect(limitAfterSet).toBe('100');
+
+		// Simulate cleanup: clear all params
+		await act(async () => {
+			void result.current.clearParams({
+				orderBy: null,
+				page: null,
+				limit: null,
+			});
+			jest.runAllTimers();
+			await Promise.resolve();
+		});
+
+		// Verify limit was cleared (last update should have limit=null or removed)
+		const lastUpdate = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1];
+		const finalLimit = lastUpdate[0].searchParams.get('limit');
+		expect(finalLimit).toBeNull();
+	});
+
+	it('cleanup should work even when limit was set from localStorage preference', async () => {
+		// Pre-set preference
+		localStorage.setItem(
+			'@signoz/table-columns/alert-rules-preferred-page-size',
+			'100',
+		);
+
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+
+		const { result } = renderHook(
+			() => useTableParamsWithCleanup('alert-rules', 42),
+			{ wrapper },
+		);
+
+		await act(async () => {
+			jest.runAllTimers();
+			await Promise.resolve();
+		});
+
+		// Should use preferred value
+		expect(result.current.limit).toBe(100);
+
+		// Simulate cleanup
+		await act(async () => {
+			void result.current.clearParams({
+				orderBy: null,
+				page: null,
+				limit: null,
+			});
+			jest.runAllTimers();
+			await Promise.resolve();
+		});
+
+		// URL should be cleared
+		const lastUpdate = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1];
+		const finalLimit = lastUpdate[0].searchParams.get('limit');
+		expect(finalLimit).toBeNull();
+	});
+
+	it('demonstrates the bug: component without cleanup leaves limit in URL', async () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+
+		// Mount TriggeredAlerts-like component (no cleanup)
+		const { result, unmount } = renderHook(
+			() =>
+				useTableParams(QUERY_PARAMS_CONFIG, {
+					page: 1,
+					limit: 10,
+					storageKey: 'triggered-alerts',
+					calculatedPageSize: 42,
+				}),
+			{ wrapper },
+		);
+
+		// Set limit to 100
+		await act(async () => {
+			result.current.setLimit(100);
+			jest.runAllTimers();
+			await Promise.resolve();
+		});
+
+		expect(result.current.limit).toBe(100);
+
+		// Unmount WITHOUT cleanup
+		unmount();
+
+		// Verify limit=100 is STILL in URL (this is the bug!)
+		const lastUpdate = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1];
+		const finalLimit = lastUpdate[0].searchParams.get('limit');
+		expect(finalLimit).toBe('100'); // BUG: limit persists after unmount
+	});
+});

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

@@ -0,0 +1,385 @@
+import { ReactNode } from 'react';
+import { act, renderHook } from '@testing-library/react';
+import {
+	NuqsTestingAdapter,
+	OnUrlUpdateFunction,
+	UrlUpdateEvent,
+} from 'nuqs/adapters/testing';
+
+import { useTableParams } from '../useTableParams';
+import { usePreferredPageSizeStore } from '../usePreferredPageSize.store';
+
+function createNuqsWrapper(
+	queryParams?: Record<string, string>,
+	onUrlUpdate?: OnUrlUpdateFunction,
+): ({ children }: { children: ReactNode }) => JSX.Element {
+	return function NuqsWrapper({
+		children,
+	}: {
+		children: ReactNode;
+	}): JSX.Element {
+		return (
+			<NuqsTestingAdapter
+				searchParams={queryParams}
+				onUrlUpdate={onUrlUpdate}
+				hasMemory
+			>
+				{children}
+			</NuqsTestingAdapter>
+		);
+	};
+}
+
+describe('useTableParams navigation scenarios', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+		localStorage.clear();
+		usePreferredPageSizeStore.setState({ tables: {} });
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	describe('Tab navigation: Alert Rules -> Configuration -> Routing Policies', () => {
+		it('preferred value from one table should NOT leak to URL when navigating away', () => {
+			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+			const wrapper = createNuqsWrapper({}, onUrlUpdate);
+
+			// Simulate Alert Rules: user sets limit=100
+			const alertRules = renderHook(
+				() =>
+					useTableParams(
+						{ page: 'page', limit: 'limit', orderBy: 'orderBy' },
+						{
+							page: 1,
+							limit: 10,
+							storageKey: 'alert-rules',
+							calculatedPageSize: 42,
+						},
+					),
+				{ wrapper },
+			);
+
+			// User selects limit=100
+			act(() => {
+				alertRules.result.current.setLimit(100);
+				jest.runAllTimers();
+			});
+
+			expect(alertRules.result.current.limit).toBe(100);
+
+			// Verify it's persisted in localStorage
+			expect(
+				localStorage.getItem(
+					'@signoz/table-columns/alert-rules-preferred-page-size',
+				),
+			).toBe('100');
+
+			// Simulate unmount (user navigates away)
+			alertRules.unmount();
+
+			// At this point, the URL should NOT have limit=100 from alert-rules
+			// when another component mounts with a different storageKey
+		});
+
+		it('different tables with different storageKeys maintain separate preferences', () => {
+			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+			const wrapper = createNuqsWrapper({}, onUrlUpdate);
+
+			// Alert Rules sets limit=100
+			localStorage.setItem(
+				'@signoz/table-columns/alert-rules-preferred-page-size',
+				'100',
+			);
+			// Triggered Alerts sets limit=25
+			localStorage.setItem(
+				'@signoz/table-columns/triggered-alerts-preferred-page-size',
+				'25',
+			);
+
+			// Mount Triggered Alerts (simulating tab switch from Alert Rules)
+			const triggeredAlerts = renderHook(
+				() =>
+					useTableParams(
+						{ page: 'page', limit: 'limit', orderBy: 'orderBy' },
+						{
+							page: 1,
+							limit: 10,
+							storageKey: 'triggered-alerts',
+							calculatedPageSize: 42,
+						},
+					),
+				{ wrapper },
+			);
+
+			act(() => {
+				jest.runAllTimers();
+			});
+
+			// Should use triggered-alerts preference (25), NOT alert-rules (100)
+			expect(triggeredAlerts.result.current.limit).toBe(25);
+		});
+
+		it('table without storageKey should NOT write preference to URL from another table', () => {
+			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+
+			// Pre-set alert-rules preference
+			localStorage.setItem(
+				'@signoz/table-columns/alert-rules-preferred-page-size',
+				'100',
+			);
+
+			// Start fresh with NO URL params
+			const wrapper = createNuqsWrapper({}, onUrlUpdate);
+
+			// Mount a table WITHOUT storageKey (simulating a simple table)
+			const simpleTable = renderHook(
+				() =>
+					useTableParams(
+						{ page: 'page', limit: 'limit' },
+						{
+							page: 1,
+							limit: 10,
+							// NO storageKey
+							calculatedPageSize: 42,
+						},
+					),
+				{ wrapper },
+			);
+
+			act(() => {
+				jest.runAllTimers();
+			});
+
+			// Should use calculated (42), not alert-rules preference (100)
+			expect(simpleTable.result.current.limit).toBe(42);
+		});
+	});
+
+	describe('URL cleanup on unmount', () => {
+		it('URL params should be cleanable by consumer on unmount', () => {
+			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+			const wrapper = createNuqsWrapper({}, onUrlUpdate);
+
+			const { result, unmount } = renderHook(
+				() =>
+					useTableParams(
+						{ page: 'page', limit: 'limit', orderBy: 'orderBy' },
+						{
+							page: 1,
+							limit: 10,
+							storageKey: 'test-cleanup',
+							calculatedPageSize: 42,
+						},
+					),
+				{ wrapper },
+			);
+
+			// Set some values
+			act(() => {
+				result.current.setLimit(50);
+				result.current.setPage(3);
+				jest.runAllTimers();
+			});
+
+			// Verify URL was updated
+			const limitUpdates = onUrlUpdate.mock.calls
+				.map((call) => call[0].searchParams.get('limit'))
+				.filter(Boolean);
+			expect(limitUpdates).toContain('50');
+
+			// Unmount (note: useTableParams itself doesn't cleanup URL - consumer should)
+			unmount();
+
+			// Verify the component unmounted (no errors)
+			expect(true).toBe(true);
+		});
+	});
+
+	describe('Parallel tables sharing URL params', () => {
+		it('two tables using same URL params should see same values when URL pre-set', () => {
+			const wrapper = createNuqsWrapper({ limit: '30' });
+
+			const table1 = renderHook(
+				() =>
+					useTableParams(
+						{ page: 'page', limit: 'limit' },
+						{
+							page: 1,
+							limit: 10,
+							storageKey: 'table-1',
+							calculatedPageSize: 42,
+						},
+					),
+				{ wrapper },
+			);
+
+			const table2 = renderHook(
+				() =>
+					useTableParams(
+						{ page: 'page', limit: 'limit' },
+						{
+							page: 1,
+							limit: 20,
+							storageKey: 'table-2',
+							calculatedPageSize: 50,
+						},
+					),
+				{ wrapper },
+			);
+
+			// Both should see URL value (30), not their defaults
+			expect(table1.result.current.limit).toBe(30);
+			expect(table2.result.current.limit).toBe(30);
+		});
+
+		it('table mounted after setLimit should see updated URL value', () => {
+			const wrapper = createNuqsWrapper();
+
+			// Table1 mounts first
+			const table1 = renderHook(
+				() =>
+					useTableParams(
+						{ page: 'page', limit: 'limit' },
+						{
+							page: 1,
+							limit: 10,
+							storageKey: 'table-1',
+							calculatedPageSize: 42,
+						},
+					),
+				{ wrapper },
+			);
+
+			act(() => {
+				jest.runAllTimers();
+			});
+
+			expect(table1.result.current.limit).toBe(42);
+
+			// Table1 sets limit to 100
+			act(() => {
+				table1.result.current.setLimit(100);
+				jest.runAllTimers();
+			});
+
+			expect(table1.result.current.limit).toBe(100);
+
+			// Table2 mounts AFTER table1 set limit=100 in URL
+			// In test environment, URL state doesn't persist between renderHook calls
+			// This test documents current behavior - each hook instance is independent
+		});
+	});
+
+	describe('URL state initialization race conditions', () => {
+		it('should not write preferred value to URL if URL already has value', () => {
+			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+
+			// Pre-set preference
+			localStorage.setItem(
+				'@signoz/table-columns/test-table-preferred-page-size',
+				'100',
+			);
+
+			// URL already has limit=30
+			const wrapper = createNuqsWrapper({ limit: '30' }, onUrlUpdate);
+
+			const { result } = renderHook(
+				() =>
+					useTableParams(
+						{ page: 'page', limit: 'limit' },
+						{
+							page: 1,
+							limit: 10,
+							storageKey: 'test-table',
+							calculatedPageSize: 42,
+						},
+					),
+				{ wrapper },
+			);
+
+			act(() => {
+				jest.runAllTimers();
+			});
+
+			// Should use URL (30), not preferred (100)
+			expect(result.current.limit).toBe(30);
+
+			// URL should NOT have been overwritten with 100
+			const limitUpdates = onUrlUpdate.mock.calls
+				.map((call) => call[0].searchParams.get('limit'))
+				.filter((v) => v === '100');
+			expect(limitUpdates).toHaveLength(0);
+		});
+
+		it('URL init effect should write calculated value when URL empty', async () => {
+			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+			const wrapper = createNuqsWrapper({}, onUrlUpdate);
+
+			// Mount with no URL params
+			const { result } = renderHook(
+				() =>
+					useTableParams(
+						{ page: 'page', limit: 'limit' },
+						{
+							page: 1,
+							limit: 10,
+							storageKey: 'table-1',
+							calculatedPageSize: 42,
+						},
+					),
+				{ wrapper },
+			);
+
+			// Effects run after render, need to flush
+			await act(async () => {
+				jest.runAllTimers();
+				await Promise.resolve();
+			});
+
+			// Should use calculated value
+			expect(result.current.limit).toBe(42);
+
+			// The URL init effect writes to URL asynchronously
+			// Check that limit is 42 (which it is from the limitDefault calculation)
+		});
+
+		it('consumer cleanup effect is responsible for clearing URL params', () => {
+			// This test documents that useTableParams does NOT auto-cleanup URL
+			// Consumer components (like ListAlertRules) must use useEffect cleanup
+			// to clear URL params when unmounting
+			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+			const wrapper = createNuqsWrapper({}, onUrlUpdate);
+
+			const { result, unmount } = renderHook(
+				() =>
+					useTableParams(
+						{ page: 'page', limit: 'limit' },
+						{
+							page: 1,
+							limit: 10,
+							storageKey: 'table-1',
+							calculatedPageSize: 42,
+						},
+					),
+				{ wrapper },
+			);
+
+			act(() => {
+				result.current.setLimit(100);
+				jest.runAllTimers();
+			});
+
+			expect(result.current.limit).toBe(100);
+
+			// Unmount - useTableParams does NOT clear URL
+			unmount();
+
+			// Verify unmount happened without clearing URL
+			// The last URL update should still have limit=100, not null
+			const lastUpdate = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1];
+			expect(lastUpdate[0].searchParams.get('limit')).toBe('100');
+		});
+	});
+});

frontend/src/components/TanStackTableView/index.tsx

@@ -3,8 +3,10 @@ import TanStackTableText from './TanStackTableText';
 
 export * from './TanStackTableStateContext';
 export * from './types';
+export * from './useCalculatedPageSize';
 export * from './useColumnState';
 export * from './useColumnStore';
+export * from './usePreferredPageSize.store';
 export * from './useTableParams';
 
 /**
@@ -192,6 +194,67 @@ export * from './useTableParams';
  *   )}
  * />
  * ```
+ *
+ * @example useTableParams — manages pagination state with URL sync and persistence
+ *
+ * The `useTableParams` hook handles page, limit, orderBy, and expanded state. It can sync
+ * to URL params, persist user's page size preference, and auto-calculate page size from
+ * container height.
+ *
+ * **Priority chain for limit**: URL > preferred (localStorage) > calculated > explicit default > 50
+ *
+ * ```tsx
+ * import { useCalculatedPageSize, useTableParams } from 'components/TanStackTableView';
+ *
+ * const QUERY_PARAMS = { page: 'page', limit: 'limit', orderBy: 'orderBy' } as const;
+ *
+ * function MyTable({ data, columns }) {
+ *   // Auto-calculate page size based on container height
+ *   const { containerRef, calculatedPageSize } = useCalculatedPageSize({ rowHeight: 42 });
+ *
+ *   // useTableParams options:
+ *   // - storageKey: persists user's page size selection to localStorage
+ *   // - calculatedPageSize: uses this when no URL/preferred value exists
+ *   // - cleanupOnUnmount: clears URL params when component unmounts
+ *   const { page, limit, setLimit, orderBy } = useTableParams(QUERY_PARAMS, {
+ *     page: 1,
+ *     limit: 10,
+ *     storageKey: 'my-table',
+ *     calculatedPageSize,
+ *     cleanupOnUnmount: true,
+ *   });
+ *
+ *   const paginatedData = useMemo(() => {
+ *     const start = (page - 1) * limit;
+ *     return data.slice(start, start + limit);
+ *   }, [data, page, limit]);
+ *
+ *   return (
+ *     <div ref={containerRef} style={{ height: '100%' }}>
+ *       <TanStackTable
+ *         data={paginatedData}
+ *         columns={columns}
+ *         enableQueryParams={QUERY_PARAMS}
+ *         pagination={{
+ *           total: data.length,
+ *           calculatedPageSize,
+ *           onLimitChange: setLimit,
+ *         }}
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * **useTableParams options:**
+ * - `storageKey`: Persists user's page size to localStorage. When user selects a size
+ *   different from calculated, it's saved. Selecting calculated size clears preference.
+ * - `calculatedPageSize`: From `useCalculatedPageSize`. Used as default when no URL/preferred.
+ * - `cleanupOnUnmount`: Clears URL params (page, limit, orderBy, expanded) on unmount.
+ *   Use when navigating away should reset table state.
+ *
+ * **Pagination shows "Auto" option** when `calculatedPageSize` is passed, allowing users
+ * to reset to auto-calculated size.
  */
 const TanStackTable = Object.assign(TanStackTableBase, {
 	Text: TanStackTableText,

frontend/src/components/TanStackTableView/types.ts

@@ -74,6 +74,7 @@ export type TableColumnDef<
 		min?: number | string;
 		default?: number | string;
 		max?: number | string;
+		ignoreLastColumnFill?: boolean;
 	};
 };
 
@@ -111,6 +112,14 @@ export type TableRowContext<TData> = {
 	enableAlternatingRowColors?: boolean;
 };
 
+export type AutoPageSizeConfig = {
+	rowHeight?: number;
+	headerHeight?: number;
+	paginationHeight?: number;
+	minPageSize?: number;
+	maxPageSize?: number;
+};
+
 export type PaginationProps = {
 	total: number;
 	defaultPage?: number;
@@ -123,6 +132,12 @@ export type PaginationProps = {
 	onLimitChange?: (limit: number) => void;
 	showTotalCount?: boolean;
 	totalCountLabel?: string;
+	/**
+	 * Auto-calculated page size for the current container.
+	 * When set, shows as "Auto (N)" option in the page size dropdown.
+	 * Consumer is responsible for calculating this via useCalculatedPageSize.
+	 */
+	calculatedPageSize?: number | null;
 };
 
 export type TanstackTableQueryParamsConfig = {

frontend/src/components/TanStackTableView/useCalculatedPageSize.ts

@@ -0,0 +1,76 @@
+import type { RefObject } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { AutoPageSizeConfig } from './types';
+
+const DEFAULT_ROW_HEIGHT = 36;
+const DEFAULT_HEADER_HEIGHT = 36;
+const DEFAULT_PAGINATION_HEIGHT = 62;
+const MIN_PAGE_SIZE = 5;
+const MAX_PAGE_SIZE = 100;
+
+export type UseCalculatedPageSizeResult = {
+	containerRef: RefObject<HTMLDivElement>;
+	calculatedPageSize: number | null;
+};
+
+export function useCalculatedPageSize(
+	config?: AutoPageSizeConfig,
+): UseCalculatedPageSizeResult {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [calculatedPageSize, setCalculatedPageSize] = useState<number | null>(
+		null,
+	);
+
+	const rowHeight = config?.rowHeight ?? DEFAULT_ROW_HEIGHT;
+	const headerHeight = config?.headerHeight ?? DEFAULT_HEADER_HEIGHT;
+	const paginationHeight = config?.paginationHeight ?? DEFAULT_PAGINATION_HEIGHT;
+	const minPageSize = config?.minPageSize ?? MIN_PAGE_SIZE;
+	const maxPageSize = config?.maxPageSize ?? MAX_PAGE_SIZE;
+
+	const calculatePageSize = useCallback(
+		(containerHeight: number): number => {
+			const availableHeight = containerHeight - headerHeight - paginationHeight;
+			const rawPageSize = Math.floor(availableHeight / rowHeight);
+			return Math.min(maxPageSize, Math.max(minPageSize, rawPageSize));
+		},
+		[rowHeight, headerHeight, paginationHeight, minPageSize, maxPageSize],
+	);
+
+	useEffect(() => {
+		if (!containerRef.current) {
+			return;
+		}
+
+		const container = containerRef.current;
+
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+
+			if (!entry) {
+				return;
+			}
+
+			const { height } = entry.contentRect;
+			if (height > 0) {
+				const newPageSize = calculatePageSize(height);
+				setCalculatedPageSize((prev) =>
+					prev !== newPageSize ? newPageSize : prev,
+				);
+			}
+		});
+
+		observer.observe(container);
+
+		const { height } = container.getBoundingClientRect();
+		if (height > 0) {
+			setCalculatedPageSize(calculatePageSize(height));
+		}
+
+		return (): void => {
+			observer.disconnect();
+		};
+	}, [calculatePageSize]);
+
+	return { containerRef, calculatedPageSize };
+}

frontend/src/components/TanStackTableView/usePreferredPageSize.store.ts

@@ -0,0 +1,91 @@
+import get from 'api/browser/localstorage/get';
+import set from 'api/browser/localstorage/set';
+import remove from 'api/browser/localstorage/remove';
+import { create } from 'zustand';
+
+const STORAGE_PREFIX = '@signoz/table-columns/';
+const STORAGE_SUFFIX = '-preferred-page-size';
+
+type PreferredPageSizeState = {
+	tables: Record<string, number | null>;
+	setPreferredPageSize: (storageKey: string, pageSize: number | null) => void;
+};
+
+const getStorageKey = (tableKey: string): string =>
+	`${STORAGE_PREFIX}${tableKey}${STORAGE_SUFFIX}`;
+
+const loadFromStorage = (tableKey: string): number | null => {
+	try {
+		const raw = get(getStorageKey(tableKey));
+		if (!raw) {
+			return null;
+		}
+		const parsed = parseInt(raw, 10);
+		return Number.isNaN(parsed) ? null : parsed;
+	} catch {
+		return null;
+	}
+};
+
+const saveToStorage = (tableKey: string, pageSize: number | null): void => {
+	try {
+		const key = getStorageKey(tableKey);
+		if (pageSize === null) {
+			remove(key);
+		} else {
+			set(key, String(pageSize));
+		}
+	} catch {
+		// Ignore storage errors
+	}
+};
+
+export const usePreferredPageSizeStore = create<PreferredPageSizeState>()(
+	(set, get) => ({
+		tables: {},
+		setPreferredPageSize: (storageKey, pageSize): void => {
+			set({ tables: { ...get().tables, [storageKey]: pageSize } });
+			saveToStorage(storageKey, pageSize);
+		},
+	}),
+);
+
+export function usePreferredPageSize(
+	storageKey: string | undefined,
+): [number | null, (pageSize: number | null) => void] {
+	const pageSize = usePreferredPageSizeStore((s) => {
+		if (!storageKey) {
+			return null;
+		}
+		const cached = s.tables[storageKey];
+		if (cached !== undefined) {
+			return cached;
+		}
+		return loadFromStorage(storageKey);
+	});
+
+	const setPageSize = usePreferredPageSizeStore((s) => s.setPreferredPageSize);
+
+	const setPreferred = (size: number | null): void => {
+		if (storageKey) {
+			setPageSize(storageKey, size);
+		}
+	};
+
+	return [pageSize, setPreferred];
+}
+
+export function getPreferredPageSize(storageKey: string): number | null {
+	// oxlint-disable-next-line signoz/no-zustand-getstate-in-hooks
+	const state = usePreferredPageSizeStore.getState();
+	const cached = state.tables[storageKey];
+	if (cached !== undefined) {
+		return cached;
+	}
+
+	const stored = loadFromStorage(storageKey);
+	if (stored !== null) {
+		state.setPreferredPageSize(storageKey, stored);
+	}
+	return stored;
+}

frontend/src/components/TanStackTableView/useTableParams.ts

@@ -4,6 +4,7 @@ import { parseAsInteger, useQueryState } from 'nuqs';
 import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
 
 import { SortState, TanstackTableQueryParamsConfig } from './types';
+import { usePreferredPageSize } from './usePreferredPageSize.store';
 
 const NUQS_OPTIONS = { history: 'push' as const };
 const DEFAULT_PAGE = 1;
@@ -20,9 +21,15 @@ type Defaults = {
 	limit?: number;
 	orderBy?: SortState | null;
 	expanded?: ExpandedState;
+	/** Storage key for persisting user's page size preference */
+	storageKey?: string;
+	/** Auto-calculated page size from container. URL initializes with this when available. */
+	calculatedPageSize?: number | null;
+	/** Clear URL params on unmount. Useful when navigating away from table views. */
+	cleanupOnUnmount?: boolean;
 };
 
-type TableParamsResult = {
+export type TableParamsResult = {
 	page: number;
 	limit: number;
 	orderBy: SortState | null;
@@ -99,15 +106,23 @@ export function useTableParams(
 				? (enableQueryParams.expanded ?? URL_KEYS_DEFAULT.expanded)
 				: URL_KEYS_DEFAULT.expanded;
 	const pageDefault = defaults?.page ?? DEFAULT_PAGE;
-	const limitDefault = defaults?.limit ?? DEFAULT_LIMIT;
 	const orderByDefault = defaults?.orderBy ?? null;
 	const expandedDefault = defaults?.expanded ?? {};
+	const storageKey = defaults?.storageKey;
+	const calculatedPageSize = defaults?.calculatedPageSize;
+	const cleanupOnUnmount = defaults?.cleanupOnUnmount ?? false;
 	const expandedDefaultArray = useMemo(
 		() => expandedStateToArray(expandedDefault),
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[],
 	);
 
+	const [preferredPageSize, setPreferredPageSize] =
+		usePreferredPageSize(storageKey);
+
+	const limitDefault =
+		preferredPageSize ?? calculatedPageSize ?? defaults?.limit ?? DEFAULT_LIMIT;
+
 	const [localPage, setLocalPage] = useState(pageDefault);
 	const [localLimit, setLocalLimit] = useState(limitDefault);
 	const [localOrderBy, setLocalOrderBy] = useState<SortState | null>(
@@ -120,9 +135,71 @@ export function useTableParams(
 		pageQueryParam,
 		parseAsInteger.withDefault(pageDefault).withOptions(NUQS_OPTIONS),
 	);
-	const [urlLimit, setUrlLimit] = useQueryState(
+	const [urlLimitRaw, setUrlLimitRaw] = useQueryState(
 		limitQueryParam,
-		parseAsInteger.withDefault(limitDefault).withOptions(NUQS_OPTIONS),
+		parseAsInteger.withOptions(NUQS_OPTIONS),
+	);
+
+	// Track if URL had limit on initial mount
+	const hadUrlLimitOnMountRef = useRef<boolean | null>(null);
+	if (hadUrlLimitOnMountRef.current === null) {
+		hadUrlLimitOnMountRef.current = urlLimitRaw !== null;
+	}
+	const hadUrlLimit = hadUrlLimitOnMountRef.current ?? false;
+
+	const urlLimit = urlLimitRaw ?? limitDefault;
+
+	// Initialize URL with preferred/calculated when available (only if URL was empty)
+	const hasInitializedUrlRef = useRef(false);
+	useEffect(() => {
+		if (!useUrlForLimit || hasInitializedUrlRef.current || hadUrlLimit) {
+			return;
+		}
+
+		if (preferredPageSize !== null) {
+			hasInitializedUrlRef.current = true;
+			void setUrlLimitRaw(preferredPageSize);
+			return;
+		}
+		if (calculatedPageSize != null) {
+			hasInitializedUrlRef.current = true;
+			void setUrlLimitRaw(calculatedPageSize);
+		}
+	}, [
+		useUrlForLimit,
+		calculatedPageSize,
+		preferredPageSize,
+		hadUrlLimit,
+		setUrlLimitRaw,
+	]);
+
+	// Wrapped setLimit that persists preference when different from calculated
+	const setUrlLimit = useCallback(
+		(newLimit: number): void => {
+			if (storageKey) {
+				if (newLimit !== calculatedPageSize) {
+					setPreferredPageSize(newLimit);
+				} else {
+					setPreferredPageSize(null);
+				}
+			}
+			void setUrlLimitRaw(newLimit);
+		},
+		[storageKey, calculatedPageSize, setPreferredPageSize, setUrlLimitRaw],
+	);
+
+	const setLocalLimitWithPersist = useCallback(
+		(newLimit: number): void => {
+			if (storageKey) {
+				if (newLimit !== calculatedPageSize) {
+					setPreferredPageSize(newLimit);
+				} else {
+					setPreferredPageSize(null);
+				}
+			}
+			setLocalLimit(newLimit);
+		},
+		[storageKey, calculatedPageSize, setPreferredPageSize],
 	);
 	const [urlOrderBy, setUrlOrderBy] = useQueryState(
 		orderByQueryParam,
@@ -155,7 +232,7 @@ export function useTableParams(
 				typeof updaterOrValue === 'function'
 					? updaterOrValue(urlExpandedRef.current)
 					: updaterOrValue;
-			setUrlExpandedArray(expandedStateToArray(newState));
+			void setUrlExpandedArray(expandedStateToArray(newState));
 		},
 		[setUrlExpandedArray],
 	);
@@ -172,21 +249,53 @@ export function useTableParams(
 		[],
 	);
 
-	const orderByDefaultMemoKey = `${orderByDefault?.columnName}${orderByDefault?.order}`;
 	const orderByUrlMemoKey = `${urlOrderBy?.columnName}${urlOrderBy?.order}`;
+	const prevOrderByRef = useRef<string | null>(null);
 
 	useEffect(() => {
-		if (useUrlForPage) {
-			setUrlPage(pageDefault);
-		} else {
-			setLocalPage(pageDefault);
+		// Only reset page when orderBy actually changes, not on initial mount
+		if (
+			prevOrderByRef.current !== null &&
+			prevOrderByRef.current !== orderByUrlMemoKey
+		) {
+			if (useUrlForPage) {
+				void setUrlPage(pageDefault);
+			} else {
+				setLocalPage(pageDefault);
+			}
 		}
+		prevOrderByRef.current = orderByUrlMemoKey;
+	}, [useUrlForPage, orderByUrlMemoKey, pageDefault, setUrlPage]);
+
+	useEffect(() => {
+		if (!cleanupOnUnmount) {
+			return;
+		}
+
+		return (): void => {
+			if (useUrlForPage) {
+				void setUrlPage(null);
+			}
+			if (useUrlForLimit) {
+				void setUrlLimitRaw(null);
+			}
+			if (useUrlForOrderBy) {
+				void setUrlOrderBy(null);
+			}
+			if (useUrlForExpanded) {
+				void setUrlExpandedArray(null);
+			}
+		};
 	}, [
+		cleanupOnUnmount,
 		useUrlForPage,
-		orderByDefaultMemoKey,
-		orderByUrlMemoKey,
-		pageDefault,
+		useUrlForLimit,
+		useUrlForOrderBy,
+		useUrlForExpanded,
 		setUrlPage,
+		setUrlLimitRaw,
+		setUrlOrderBy,
+		setUrlExpandedArray,
 	]);
 
 	return {
@@ -195,7 +304,7 @@ export function useTableParams(
 		orderBy: (useUrlForOrderBy ? urlOrderBy : localOrderBy) as SortState | null,
 		expanded: useUrlForExpanded ? urlExpanded : localExpanded,
 		setPage: useUrlForPage ? setUrlPage : setLocalPage,
-		setLimit: useUrlForLimit ? setUrlLimit : setLocalLimit,
+		setLimit: useUrlForLimit ? setUrlLimit : setLocalLimitWithPersist,
 		setOrderBy: useUrlForOrderBy ? setUrlOrderBy : setLocalOrderBy,
 		setExpanded: useUrlForExpanded ? setUrlExpanded : handleSetLocalExpanded,
 	};

frontend/src/components/TanStackTableView/utils.ts

@@ -2,6 +2,7 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { ColumnDef } from '@tanstack/react-table';
 
 import { RowKeyData, TableColumnDef } from './types';
+import { ComboboxSimpleItem } from '@signozhq/ui/combobox';
 
 export const getColumnId = <TData>(column: TableColumnDef<TData>): string =>
 	column.id;
@@ -34,7 +35,7 @@ export const getColumnWidthStyle = <TData>(
 	isLastColumn?: boolean,
 ): CSSProperties => {
 	// Last column always fills remaining space
-	if (isLastColumn) {
+	if (isLastColumn && column?.width?.ignoreLastColumnFill !== true) {
 		return {
 			width: '100%',
 			minWidth: persistedWidth ?? column?.width?.min,
@@ -145,3 +146,31 @@ export function buildTanstackColumnDef<TData>(
 		},
 	};
 }
+
+const DEFAULT_PAGE_SIZES = [10, 20, 30, 50, 100];
+
+export function buildPageSizeItems(
+	calculatedSize?: number | null,
+): ComboboxSimpleItem[] {
+	const items: ComboboxSimpleItem[] = [];
+
+	if (calculatedSize) {
+		items.push({
+			value: calculatedSize.toString(),
+			label: `Auto (${calculatedSize})`,
+			displayValue: calculatedSize.toString(),
+		});
+	}
+
+	for (const size of DEFAULT_PAGE_SIZES) {
+		if (size !== calculatedSize) {
+			items.push({
+				value: size.toString(),
+				label: size.toString(),
+				displayValue: size.toString(),
+			});
+		}
+	}
+
+	return items;
+}

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -1,11 +1,7 @@
 import { useMemo } from 'react';
 import { SolidAlertTriangle } from '@signozhq/icons';
-import {
-	ComboboxSimple,
-	ComboboxSimpleGroup,
-	ComboboxSimpleItem,
-} from '@signozhq/ui/combobox';
-import { Tooltip } from 'antd';
+import { Select, Tooltip } from 'antd';
+import type { DefaultOptionType } from 'antd/es/select';
 import classNames from 'classnames';
 
 import { UniversalYAxisUnitMappings } from './constants';
@@ -46,53 +42,69 @@ function YAxisUnitSelector({
 		return '';
 	}, [initialValue, value, loading]);
 
-	const categoriesToRender = useMemo(
-		() => categoriesOverride || getYAxisCategories(source),
-		[categoriesOverride, source],
-	);
+	const handleSearch = (
+		searchTerm: string,
+		currentOption: DefaultOptionType | undefined,
+	): boolean => {
+		if (!currentOption?.value) {
+			return false;
+		}
 
-	const groups: ComboboxSimpleGroup[] = useMemo(
-		() =>
-			categoriesToRender.map((category) => ({
-				heading: category.name,
-				items: category.units.map((unit): ComboboxSimpleItem => {
-					const aliases = Array.from(
-						UniversalYAxisUnitMappings[unit.id as UniversalYAxisUnit] ?? [],
-					);
-					return {
-						value: unit.id,
-						label: unit.name,
-						keywords: aliases,
-					};
-				}),
-			})),
-		[categoriesToRender],
-	);
+		const search = searchTerm.toLowerCase();
+		const unitId = currentOption.value.toString().toLowerCase();
+		const unitLabel = currentOption.children?.toString().toLowerCase() || '';
 
-	const handleChange = (val: string | string[]): void => {
-		onChange(val as UniversalYAxisUnit);
+		// Check label and id
+		if (unitId.includes(search) || unitLabel.includes(search)) {
+			return true;
+		}
+
+		// Check aliases (from the mapping) using array iteration
+		const aliases = Array.from(
+			UniversalYAxisUnitMappings[currentOption.value as UniversalYAxisUnit] ?? [],
+		);
+
+		return aliases.some((alias) => alias.toLowerCase().includes(search));
 	};
 
+	const categoriesToRender = useMemo(() => {
+		return categoriesOverride || getYAxisCategories(source);
+	}, [categoriesOverride, source]);
+
 	return (
 		<div
 			className={classNames('y-axis-unit-selector-component', containerClassName)}
 		>
-			<ComboboxSimple
-				value={universalUnit ?? undefined}
-				onChange={handleChange}
+			<Select
+				showSearch
+				value={universalUnit}
+				onChange={onChange}
 				placeholder={placeholder}
+				filterOption={(input, option): boolean => handleSearch(input, option)}
 				loading={loading}
+				suffixIcon={
+					incompatibleUnitMessage ? (
+						<Tooltip title={incompatibleUnitMessage}>
+							<SolidAlertTriangle role="img" aria-label="warning" size="md" />
+						</Tooltip>
+					) : undefined
+				}
 				className={classNames({
-					'warning-state': !!incompatibleUnitMessage,
+					'warning-state': incompatibleUnitMessage,
 				})}
-				testId={dataTestId}
-				groups={groups}
-			/>
-			{incompatibleUnitMessage && (
-				<Tooltip title={incompatibleUnitMessage}>
-					<SolidAlertTriangle role="img" aria-label="warning" size="md" />
-				</Tooltip>
-			)}
+				data-testid={dataTestId}
+				allowClear
+			>
+				{categoriesToRender.map((category) => (
+					<Select.OptGroup key={category.name} label={category.name}>
+						{category.units.map((unit) => (
+							<Select.Option key={unit.id} value={unit.id}>
+								{unit.name}
+							</Select.Option>
+						))}
+					</Select.OptGroup>
+				))}
+			</Select>
 		</div>
 	);
 }

frontend/src/components/YAxisUnitSelector/styles.scss

@@ -1,8 +1,5 @@
 .y-axis-unit-selector-component {
-	--combobox-trigger-background-color: var(--l2-background);
-	--combobox-trigger-border-color: var(--l2-border);
-
-	[data-slot='combobox-trigger'] {
+	.ant-select {
 		width: 220px;
 	}
 }

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { ComboboxSimple } from '@signozhq/ui/combobox';
+import { Select } from 'antd';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import {
@@ -115,11 +115,11 @@ function AllEndPoints({
 
 	// --- GROUP BY STATE SYNC (existing) ---
 	const handleGroupByChange = useCallback(
-		(value: string[]) => {
+		(value: IBuilderQuery['groupBy']) => {
 			const newGroupBy = [];
 
 			for (let index = 0; index < value.length; index++) {
-				const element = value[index];
+				const element = value[index] as unknown as string;
 
 				// Check if the key exists in our cached options first
 				if (allAvailableGroupByOptions[element]) {
@@ -242,14 +242,17 @@ function AllEndPoints({
 			</div>
 			<div className="group-by-container">
 				<div className="group-by-label"> Group by </div>
-				<ComboboxSimple
+				<Select
 					className="group-by-select"
 					loading={isLoadingGroupByFilters}
-					multiple
-					value={groupBy.map((g) => g.key)}
+					mode="multiple"
+					value={groupBy}
+					allowClear
+					maxTagCount="responsive"
 					placeholder="Search for attribute"
-					items={groupByOptions}
-					onChange={(value): void => handleGroupByChange(value as string[])}
+					options={groupByOptions}
+					onChange={handleGroupByChange}
+					onSearch={(value: string): void => setGroupBySearchValue(value)}
 				/>{' '}
 			</div>
 			<div className="endpoints-table-container">

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

@@ -176,14 +176,14 @@
 
 		.group-by-label {
 			display: flex;
-			padding: 4px 15px;
+			padding: 6px 15px;
 			justify-content: center;
 			align-items: center;
 			gap: 4px;
 			flex-shrink: 0;
 
 			border-radius: 2px 0px 0px 2px;
-			border: 1px solid var(--l2-border);
+			border: 1px solid var(--l1-border);
 			border-right: none;
 			background: var(--l3-background);
 
@@ -192,15 +192,18 @@
 			font-size: 14px;
 			font-style: normal;
 			font-weight: 400;
-			line-height: 22px;
+			line-height: 18px;
 			letter-spacing: -0.07px;
 		}
 
 		.group-by-select {
 			width: 100%;
-			box-sizing: border-box;
-
-			--combobox-trigger-border-radius: 0px;
+			.ant-select-selector {
+				font-size: 14px;
+				border-radius: 2px 0px 0px 2px;
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+			}
 		}
 	}
 	// Add border-bottom to table cells when pagination is not present
@@ -423,13 +426,14 @@
 		}
 
 		.endpoint-details-filters-container-dropdown {
-			width: 150px;
+			width: 120px;
 			border-right: 1px solid var(--l1-border);
 			height: 36px;
 			display: flex;
 			align-items: center;
-
-			--combobox-trigger-border-color: transparent;
+			.ant-select-single {
+				height: 32px;
+			}
 		}
 
 		.endpoint-details-filters-container-search {

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

@@ -263,6 +263,7 @@ function EndPointDetails({
 						setSelectedEndPointName={setSelectedEndPointName}
 						endPointDropDownDataQuery={endPointDropDownDataQuery}
 						parentContainerDiv=".endpoint-details-filters-container"
+						dropdownStyle={{ width: 'calc(100% - 36px)' }}
 					/>
 				</div>
 				<div className="endpoint-details-filters-container-search">

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
-import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
+import { Select } from 'antd';
 import { getFormattedEndPointDropDownData } from 'container/ApiMonitoring/utils';
 import { SuccessResponse } from 'types/api';
 
@@ -22,33 +22,40 @@ function EndPointsDropDown({
 	selectedEndPointName,
 	setSelectedEndPointName,
 	endPointDropDownDataQuery,
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	parentContainerDiv: _parentContainerDiv,
+	parentContainerDiv,
 	dropdownStyle,
 }: EndPointsDropDownProps): JSX.Element {
 	const { data, isLoading, isFetching } = endPointDropDownDataQuery;
 
-	const handleChange = (value: string | string[]): void => {
-		setSelectedEndPointName(value as string);
+	const handleChange = (value: string): void => {
+		setSelectedEndPointName(value);
 	};
 
 	const formattedData = useMemo(
 		() =>
-			getFormattedEndPointDropDownData(
-				data?.payload.data.result[0].table.rows,
-			) as ComboboxSimpleItem[],
+			getFormattedEndPointDropDownData(data?.payload.data.result[0].table.rows),
 		[data?.payload.data.result],
 	);
 
 	return (
-		<ComboboxSimple
+		<Select
 			value={selectedEndPointName || undefined}
 			placeholder="Select endpoint"
 			loading={isLoading || isFetching}
-			style={{ width: '100%', ...dropdownStyle }}
+			style={{ width: '100%' }}
 			onChange={handleChange}
-			items={formattedData}
-			virtualized
+			options={formattedData}
+			getPopupContainer={
+				parentContainerDiv
+					? (): HTMLElement =>
+							document.querySelector(parentContainerDiv) as HTMLElement
+					: (triggerNode): HTMLElement => triggerNode.parentNode as HTMLElement
+			}
+			dropdownStyle={dropdownStyle}
+			allowClear
+			onClear={(): void => {
+				setSelectedEndPointName('');
+			}}
 		/>
 	);
 }

frontend/src/container/ApiMonitoring/utils.tsx

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
+import { TableColumnType as ColumnType, Tooltip } from 'antd';
 import { Progress } from '@signozhq/ui/progress';
+import { Badge } from '@signozhq/ui/badge';
 import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
 import {
 	FiltersType,
@@ -972,13 +973,9 @@ export const getEndPointsColumnsConfig = (
 					})()}
 					{isGroupedByAttribute
 						? text.split(',').map((value) => (
-								<Tag
-									key={value}
-									color={Color.BG_SLATE_100}
-									className="endpoint-group-tag-item"
-								>
+								<Badge key={value} color="vanilla" className="endpoint-group-tag-item">
 									{value === '' ? '<no-value>' : value}
-								</Tag>
+								</Badge>
 							))
 						: endPointName}
 				</div>

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -14,8 +14,8 @@ import {
 	Skeleton,
 	Table,
 	TableColumnsType as ColumnsType,
-	Tag,
 } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
@@ -434,7 +434,7 @@ export default function BillingContainer(): JSX.Element {
 					<Flex vertical>
 						<Typography.Title level={5} style={{ marginTop: 2, fontWeight: 500 }}>
 							{isCloudUserVal ? t('teams_cloud') : t('teams')}{' '}
-							{isFreeTrial ? <Tag color="success"> Free Trial </Tag> : ''}
+							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
 						</Typography.Title>
 
 						{!isLoading && !isFetchingBillingData && !showGracePeriodMessage ? (

frontend/src/container/Controls/index.tsx

@@ -1,8 +1,8 @@
 import { memo, useMemo } from 'react';
 import { ChevronLeft, ChevronRight } from '@signozhq/icons';
-import { SelectSimple } from '@signozhq/ui/select';
-import { Button, Flex } from 'antd';
+import { Button, Flex, Select } from 'antd';
 import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { defaultSelectStyle } from './config';
 import { Container } from './styles';
@@ -59,18 +59,20 @@ function Controls({
 			</Button>
 
 			{showSizeChanger && (
-				<SelectSimple
+				<Select<Pagination['limit']>
 					style={defaultSelectStyle}
-					disabled={isLoading}
-					value={String(countPerPage)}
-					onChange={(value): void =>
-						handleCountItemsPerPageChange(Number(value) as Pagination['limit'])
-					}
-					items={perPageOptions.map((count) => ({
-						value: String(count),
-						label: `${count} / page`,
-					}))}
-				/>
+					loading={isLoading}
+					value={countPerPage}
+					onChange={handleCountItemsPerPageChange}
+					getPopupContainer={popupContainer}
+				>
+					{perPageOptions.map((count) => (
+						<Select.Option
+							key={count}
+							value={count}
+						>{`${count} / page`}</Select.Option>
+					))}
+				</Select>
 			)}
 		</Container>
 	);

frontend/src/container/CreateAlertRule/CreateAlertRule.styles.scss

@@ -61,6 +61,10 @@
 				margin-left: 16px;
 			}
 
+			&:not(:first-of-type) {
+				margin-left: 24px !important;
+			}
+
 			[aria-selected='false'] {
 				.periscope-tab {
 					color: var(--l2-foreground);

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Row, Tag } from 'antd';
+import { Row } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
@@ -66,13 +67,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 					<AlertTypeCard
 						key={option.selection}
 						title={option.title}
-						extra={
-							option.isBeta ? (
-								<Tag bordered={false} color="geekblue">
-									Beta
-								</Tag>
-							) : undefined
-						}
+						extra={option.isBeta ? <Badge color="robin">Beta</Badge> : undefined}
 						onClick={(e): void => {
 							onSelect(option.selection, isModifierKeyPressed(e));
 						}}