refactor(fixtures/seeder): align status codes with HTTP semantics

- POST /telemetry/{traces,logs,metrics}: return 201 Created (kept the
  {inserted: N} body so callers can verify the count landed).
- DELETE /telemetry/{traces,logs,metrics}: return 204 No Content with
  an empty body.

.github/workflows/integrationci.yaml

@@ -25,11 +25,11 @@ jobs:
         uses: astral-sh/setup-uv@v4
       - name: install
         run: |
-          cd tests/integration && uv sync
+          cd tests && uv sync
       - name: fmt
         run: |
           make py-fmt
-          git diff --exit-code -- tests/integration/
+          git diff --exit-code -- tests/
       - name: lint
         run: |
           make py-lint
@@ -79,7 +79,7 @@ jobs:
         uses: astral-sh/setup-uv@v4
       - name: install
         run: |
-          cd tests/integration && uv sync
+          cd tests && uv sync
       - name: webdriver
         run: |
           wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
@@ -99,10 +99,10 @@ jobs:
           google-chrome-stable --version
       - name: run
         run: |
-          cd tests/integration && \
+          cd tests && \
             uv run pytest \
             --basetemp=./tmp/ \
-            src/${{matrix.src}} \
+            integration/src/${{matrix.src}} \
             --sqlstore-provider ${{matrix.sqlstore-provider}} \
             --sqlite-mode ${{matrix.sqlite-mode}} \
             --postgres-version ${{matrix.postgres-version}} \

Makefile

@@ -201,26 +201,26 @@ docker-buildx-enterprise: go-build-enterprise js-build
 # python commands
 ##############################################################
 .PHONY: py-fmt
-py-fmt: ## Run black for integration tests
-	@cd tests/integration && uv run black .
+py-fmt: ## Run black across the shared tests project
+	@cd tests && uv run black .
 
 .PHONY: py-lint
-py-lint: ## Run lint for integration tests
-	@cd tests/integration && uv run isort .
-	@cd tests/integration && uv run autoflake .
-	@cd tests/integration && uv run pylint .
+py-lint: ## Run lint across the shared tests project
+	@cd tests && uv run isort .
+	@cd tests && uv run autoflake .
+	@cd tests && uv run pylint .
 
 .PHONY: py-test-setup
-py-test-setup: ## Runs integration tests
-	@cd tests/integration && uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no src/bootstrap/setup.py::test_setup
+py-test-setup: ## Bring up the shared SigNoz backend used by integration and e2e tests
+	@cd tests && uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no integration/src/bootstrap/setup.py::test_setup
 
 .PHONY: py-test-teardown
-py-test-teardown: ## Runs integration tests with teardown
-	@cd tests/integration && uv run pytest --basetemp=./tmp/ -vv --teardown --capture=no  src/bootstrap/setup.py::test_teardown
+py-test-teardown: ## Tear down the shared SigNoz backend
+	@cd tests && uv run pytest --basetemp=./tmp/ -vv --teardown --capture=no  integration/src/bootstrap/setup.py::test_teardown
 
 .PHONY: py-test
 py-test: ## Runs integration tests
-	@cd tests/integration && uv run pytest --basetemp=./tmp/ -vv --capture=no src/
+	@cd tests && uv run pytest --basetemp=./tmp/ -vv --capture=no integration/src/
 
 .PHONY: py-clean
 py-clean: ## Clear all pycache and pytest cache from tests directory recursively

frontend/jest.config.ts

@@ -45,8 +45,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		// @chenglou/pretext is ESM-only; @signozhq/ui pulls it in via text-ellipsis.
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@chenglou/pretext|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/jest.setup.ts

@@ -24,10 +24,6 @@ window.matchMedia =
 		};
 	};
 
-if (!HTMLElement.prototype.scrollIntoView) {
-	HTMLElement.prototype.scrollIntoView = function (): void {};
-}
-
 // Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
 // These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
 // jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),

frontend/package.json

@@ -48,10 +48,24 @@
     "@radix-ui/react-tooltip": "1.0.7",
     "@sentry/react": "8.41.0",
     "@sentry/vite-plugin": "2.22.6",
+    "@signozhq/button": "0.0.5",
+    "@signozhq/calendar": "0.1.1",
+    "@signozhq/callout": "0.0.4",
+    "@signozhq/checkbox": "0.0.4",
+    "@signozhq/combobox": "0.0.4",
+    "@signozhq/command": "0.0.2",
     "@signozhq/design-tokens": "2.1.4",
+    "@signozhq/dialog": "0.0.4",
+    "@signozhq/drawer": "0.0.6",
     "@signozhq/icons": "0.1.0",
+    "@signozhq/input": "0.0.4",
+    "@signozhq/popover": "0.1.2",
+    "@signozhq/radio-group": "0.0.4",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.9",
+    "@signozhq/tabs": "0.0.11",
+    "@signozhq/table": "0.3.8",
+    "@signozhq/toggle-group": "0.0.3",
+    "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/src/api/infra/getHostAttributeKeys.ts

@@ -2,7 +2,7 @@ import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError, AxiosResponse } from 'axios';
 import { baseAutoCompleteIdKeysOrder } from 'constants/queryBuilder';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
+import { K8sCategory } from 'container/InfraMonitoringK8s/constants';
 import { createIdFromObjectFields } from 'lib/createIdFromObjectFields';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
@@ -12,7 +12,7 @@ import {
 
 export const getHostAttributeKeys = async (
 	searchText = '',
-	entity: InfraMonitoringEntity,
+	entity: K8sCategory,
 ): Promise<SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse> => {
 	try {
 		const response: AxiosResponse<{

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -33,8 +33,6 @@ export interface HostData {
 	hostName: string;
 	active: boolean;
 	os: string;
-	/** Present when the list API returns grouped rows or extra resource attributes. */
-	meta?: Record<string, string>;
 	cpu: number;
 	cpuTimeSeries: TimeSeries;
 	memory: number;

frontend/src/api/infraMonitoring/getK8sClustersList.ts

@@ -1,14 +1,13 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
 
-export interface K8sNodesListPayload {
+export interface K8sClustersListPayload {
 	filters: TagFilter;
 	groupBy?: BaseAutocompleteData[];
 	offset?: number;
@@ -19,24 +18,23 @@ export interface K8sNodesListPayload {
 	};
 }
 
-export interface K8sNodeData {
-	nodeUID: string;
-	nodeCPUUsage: number;
-	nodeCPUAllocatable: number;
-	nodeMemoryUsage: number;
-	nodeMemoryAllocatable: number;
+export interface K8sClustersData {
+	clusterUID: string;
+	cpuUsage: number;
+	cpuAllocatable: number;
+	memoryUsage: number;
+	memoryAllocatable: number;
 	meta: {
-		k8s_node_name: string;
-		k8s_node_uid: string;
 		k8s_cluster_name: string;
+		k8s_cluster_uid: string;
 	};
 }
 
-export interface K8sNodesListResponse {
+export interface K8sClustersListResponse {
 	status: string;
 	data: {
 		type: string;
-		records: K8sNodeData[];
+		records: K8sClustersData[];
 		groups: null;
 		total: number;
 		sentAnyHostMetricsData: boolean;
@@ -44,32 +42,30 @@ export interface K8sNodesListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
-export const nodesMetaMap = [
-	{ dot: 'k8s.node.name', under: 'k8s_node_name' },
-	{ dot: 'k8s.node.uid', under: 'k8s_node_uid' },
+export const clustersMetaMap = [
 	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
+	{ dot: 'k8s.cluster.uid', under: 'k8s_cluster_uid' },
 ] as const;
 
-export function mapNodesMeta(
+export function mapClustersMeta(
 	raw: Record<string, unknown>,
-): K8sNodeData['meta'] {
+): K8sClustersData['meta'] {
 	const out: Record<string, unknown> = { ...raw };
-	nodesMetaMap.forEach(({ dot, under }) => {
+	clustersMetaMap.forEach(({ dot, under }) => {
 		if (dot in raw) {
 			const v = raw[dot];
 			out[under] = typeof v === 'string' ? v : raw[under];
 		}
 	});
-	return out as K8sNodeData['meta'];
+	return out as K8sClustersData['meta'];
 }
 
-export const getK8sNodesList = async (
-	props: K8sBaseFilters,
+export const getK8sClustersList = async (
+	props: K8sClustersListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
-): Promise<SuccessResponse<K8sNodesListResponse> | ErrorResponse> => {
+): Promise<SuccessResponse<K8sClustersListResponse> | ErrorResponse> => {
 	try {
 		const requestProps =
 			dotMetricsEnabled && Array.isArray(props.filters?.items)
@@ -104,16 +100,16 @@ export const getK8sNodesList = async (
 				  }
 				: props;
 
-		const response = await axios.post('/nodes/list', requestProps, {
+		const response = await axios.post('/clusters/list', requestProps, {
 			signal,
 			headers,
 		});
-		const payload: K8sNodesListResponse = response.data;
+		const payload: K8sClustersListResponse = response.data;
 
-		// one-liner to map dot→underscore
+		// one-liner meta mapping
 		payload.data.records = payload.data.records.map((record) => ({
 			...record,
-			meta: mapNodesMeta(record.meta as Record<string, unknown>),
+			meta: mapClustersMeta(record.meta as Record<string, unknown>),
 		}));
 
 		return {

frontend/src/api/infraMonitoring/getK8sDaemonSetsList.ts

@@ -1,10 +1,22 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
+
+export interface K8sDaemonSetsListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
+}
 
 export interface K8sDaemonSetsData {
 	daemonSetName: string;
@@ -36,7 +48,6 @@ export interface K8sDaemonSetsListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
 export const daemonSetsMetaMap = [
 	{ dot: 'k8s.namespace.name', under: 'k8s_namespace_name' },
 	{ dot: 'k8s.daemonset.name', under: 'k8s_daemonset_name' },
@@ -57,43 +68,45 @@ export function mapDaemonSetsMeta(
 }
 
 export const getK8sDaemonSetsList = async (
-	props: K8sBaseFilters,
+	props: K8sDaemonSetsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sDaemonSetsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = dotMetricsEnabled
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		// filter prep (unchanged)…
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/daemonsets/list', requestProps, {
 			signal,
@@ -101,6 +114,7 @@ export const getK8sDaemonSetsList = async (
 		});
 		const payload: K8sDaemonSetsListResponse = response.data;
 
+		// single-line meta mapping
 		payload.data.records = payload.data.records.map((record) => ({
 			...record,
 			meta: mapDaemonSetsMeta(record.meta as Record<string, unknown>),

frontend/src/api/infraMonitoring/getK8sDeploymentsList.ts

@@ -1,12 +1,11 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sDeploymentsListPayload {
 	filters: TagFilter;
@@ -49,7 +48,6 @@ export interface K8sDeploymentsListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
 export const deploymentsMetaMap = [
 	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
 	{ dot: 'k8s.deployment.name', under: 'k8s_deployment_name' },
@@ -70,43 +68,44 @@ export function mapDeploymentsMeta(
 }
 
 export const getK8sDeploymentsList = async (
-	props: K8sBaseFilters,
+	props: K8sDeploymentsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sDeploymentsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = dotMetricsEnabled
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/deployments/list', requestProps, {
 			signal,
@@ -114,6 +113,7 @@ export const getK8sDeploymentsList = async (
 		});
 		const payload: K8sDeploymentsListResponse = response.data;
 
+		// single-line mapping
 		payload.data.records = payload.data.records.map((record) => ({
 			...record,
 			meta: mapDeploymentsMeta(record.meta as Record<string, unknown>),

frontend/src/api/infraMonitoring/getK8sJobsList.ts

@@ -1,10 +1,22 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
+
+export interface K8sJobsListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
+}
 
 export interface K8sJobsData {
 	jobName: string;
@@ -38,7 +50,6 @@ export interface K8sJobsListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
 export const jobsMetaMap = [
 	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
 	{ dot: 'k8s.job.name', under: 'k8s_job_name' },
@@ -57,43 +68,44 @@ export function mapJobsMeta(raw: Record<string, unknown>): K8sJobsData['meta'] {
 }
 
 export const getK8sJobsList = async (
-	props: K8sBaseFilters,
+	props: K8sJobsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sJobsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = dotMetricsEnabled
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters?.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/jobs/list', requestProps, {
 			signal,
@@ -101,6 +113,7 @@ export const getK8sJobsList = async (
 		});
 		const payload: K8sJobsListResponse = response.data;
 
+		// one-liner meta mapping
 		payload.data.records = payload.data.records.map((record) => ({
 			...record,
 			meta: mapJobsMeta(record.meta as Record<string, unknown>),

frontend/src/api/infraMonitoring/getK8sNamespacesList.ts

@@ -1,12 +1,11 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sNamespacesListPayload {
 	filters: TagFilter;
@@ -41,7 +40,6 @@ export interface K8sNamespacesListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
 export const namespacesMetaMap = [
 	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
 	{ dot: 'k8s.namespace.name', under: 'k8s_namespace_name' },
@@ -61,43 +59,44 @@ export function mapNamespacesMeta(
 }
 
 export const getK8sNamespacesList = async (
-	props: K8sBaseFilters,
+	props: K8sNamespacesListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sNamespacesListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = dotMetricsEnabled
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters?.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/namespaces/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sNodesList.ts

@@ -0,0 +1,127 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+import { UnderscoreToDotMap } from '../utils';
+
+export interface K8sNodesListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
+}
+
+export interface K8sNodesData {
+	nodeUID: string;
+	nodeCPUUsage: number;
+	nodeCPUAllocatable: number;
+	nodeMemoryUsage: number;
+	nodeMemoryAllocatable: number;
+	meta: {
+		k8s_node_name: string;
+		k8s_node_uid: string;
+		k8s_cluster_name: string;
+	};
+}
+
+export interface K8sNodesListResponse {
+	status: string;
+	data: {
+		type: string;
+		records: K8sNodesData[];
+		groups: null;
+		total: number;
+		sentAnyHostMetricsData: boolean;
+		isSendingK8SAgentMetrics: boolean;
+	};
+}
+
+export const nodesMetaMap = [
+	{ dot: 'k8s.node.name', under: 'k8s_node_name' },
+	{ dot: 'k8s.node.uid', under: 'k8s_node_uid' },
+	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
+] as const;
+
+export function mapNodesMeta(
+	raw: Record<string, unknown>,
+): K8sNodesData['meta'] {
+	const out: Record<string, unknown> = { ...raw };
+	nodesMetaMap.forEach(({ dot, under }) => {
+		if (dot in raw) {
+			const v = raw[dot];
+			out[under] = typeof v === 'string' ? v : raw[under];
+		}
+	});
+	return out as K8sNodesData['meta'];
+}
+
+export const getK8sNodesList = async (
+	props: K8sNodesListPayload,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+	dotMetricsEnabled = false,
+): Promise<SuccessResponse<K8sNodesListResponse> | ErrorResponse> => {
+	try {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
+									return acc;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
+
+		const response = await axios.post('/nodes/list', requestProps, {
+			signal,
+			headers,
+		});
+		const payload: K8sNodesListResponse = response.data;
+
+		// one-liner to map dot→underscore
+		payload.data.records = payload.data.records.map((record) => ({
+			...record,
+			meta: mapNodesMeta(record.meta as Record<string, unknown>),
+		}));
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload,
+			params: requestProps,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};

frontend/src/api/infraMonitoring/getK8sPodsList.ts

@@ -1,36 +1,21 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
-export const podsMetaMap = [
-	{ dot: 'k8s.cronjob.name', under: 'k8s_cronjob_name' },
-	{ dot: 'k8s.daemonset.name', under: 'k8s_daemonset_name' },
-	{ dot: 'k8s.deployment.name', under: 'k8s_deployment_name' },
-	{ dot: 'k8s.job.name', under: 'k8s_job_name' },
-	{ dot: 'k8s.namespace.name', under: 'k8s_namespace_name' },
-	{ dot: 'k8s.node.name', under: 'k8s_node_name' },
-	{ dot: 'k8s.pod.name', under: 'k8s_pod_name' },
-	{ dot: 'k8s.pod.uid', under: 'k8s_pod_uid' },
-	{ dot: 'k8s.statefulset.name', under: 'k8s_statefulset_name' },
-	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
-] as const;
-
-export function mapPodsMeta(raw: Record<string, unknown>): K8sPodsData['meta'] {
-	// clone everything
-	const out: Record<string, unknown> = { ...raw };
-	// overlay only the dot→under mappings
-	podsMetaMap.forEach(({ dot, under }) => {
-		if (dot in raw) {
-			const v = raw[dot];
-			out[under] = typeof v === 'string' ? v : raw[under];
-		}
-	});
-	return out as K8sPodsData['meta'];
+export interface K8sPodsListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
 }
 
 export interface TimeSeriesValue {
@@ -86,44 +71,72 @@ export interface K8sPodsListResponse {
 	};
 }
 
+export const podsMetaMap = [
+	{ dot: 'k8s.cronjob.name', under: 'k8s_cronjob_name' },
+	{ dot: 'k8s.daemonset.name', under: 'k8s_daemonset_name' },
+	{ dot: 'k8s.deployment.name', under: 'k8s_deployment_name' },
+	{ dot: 'k8s.job.name', under: 'k8s_job_name' },
+	{ dot: 'k8s.namespace.name', under: 'k8s_namespace_name' },
+	{ dot: 'k8s.node.name', under: 'k8s_node_name' },
+	{ dot: 'k8s.pod.name', under: 'k8s_pod_name' },
+	{ dot: 'k8s.pod.uid', under: 'k8s_pod_uid' },
+	{ dot: 'k8s.statefulset.name', under: 'k8s_statefulset_name' },
+	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
+] as const;
+
+export function mapPodsMeta(raw: Record<string, unknown>): K8sPodsData['meta'] {
+	// clone everything
+	const out: Record<string, unknown> = { ...raw };
+	// overlay only the dot→under mappings
+	podsMetaMap.forEach(({ dot, under }) => {
+		if (dot in raw) {
+			const v = raw[dot];
+			out[under] = typeof v === 'string' ? v : raw[under];
+		}
+	});
+	return out as K8sPodsData['meta'];
+}
+
+// getK8sPodsList
 export const getK8sPodsList = async (
-	props: K8sBaseFilters,
+	props: K8sPodsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sPodsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = dotMetricsEnabled
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters?.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/pods/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sVolumesList.ts

@@ -1,10 +1,22 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
+
+export interface K8sVolumesListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
+}
 
 export interface K8sVolumesData {
 	persistentVolumeClaimName: string;
@@ -37,7 +49,6 @@ export interface K8sVolumesListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
 export const volumesMetaMap: Array<{
 	dot: keyof Record<string, unknown>;
 	under: keyof K8sVolumesData['meta'];
@@ -57,8 +68,10 @@ export const volumesMetaMap: Array<{
 export function mapVolumesMeta(
 	rawMeta: Record<string, unknown>,
 ): K8sVolumesData['meta'] {
+	// start with everything that was already there
 	const out: Record<string, unknown> = { ...rawMeta };
 
+	// for each dot→under rule, if the raw has the dot, overwrite the underscore
 	volumesMetaMap.forEach(({ dot, under }) => {
 		if (dot in rawMeta) {
 			const val = rawMeta[dot];
@@ -70,47 +83,42 @@ export function mapVolumesMeta(
 }
 
 export const getK8sVolumesList = async (
-	props: K8sBaseFilters,
+	props: K8sVolumesListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sVolumesListResponse> | ErrorResponse> => {
 	try {
-		const { orderBy, ...rest } = props;
-		const basePayload = {
-			...rest,
-			filters: props.filters ?? { items: [], op: 'and' },
-			...(orderBy != null ? { orderBy } : {}),
-		};
-
-		const requestProps = dotMetricsEnabled
-			? {
-					...basePayload,
-					filters: {
-						...basePayload.filters,
-						items: basePayload.filters.items.reduce<typeof basePayload.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		// Prepare filters
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({ ...item, key: { ...item.key, key: mappedKey } });
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-									acc.push({ ...item, key: { ...item.key, key: mappedKey } });
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof basePayload.filters.items,
-						),
-					},
-			  }
-			: basePayload;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/pvcs/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getsK8sStatefulSetsList.ts

@@ -1,12 +1,11 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sStatefulSetsListPayload {
 	filters: TagFilter;
@@ -48,7 +47,6 @@ export interface K8sStatefulSetsListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
 export const statefulSetsMetaMap = [
 	{ dot: 'k8s.statefulset.name', under: 'k8s_statefulset_name' },
 	{ dot: 'k8s.namespace.name', under: 'k8s_namespace_name' },
@@ -68,37 +66,42 @@ export function mapStatefulSetsMeta(
 }
 
 export const getK8sStatefulSetsList = async (
-	props: K8sBaseFilters,
+	props: K8sStatefulSetsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sStatefulSetsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = dotMetricsEnabled
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<TagFilter['items']>((acc, item) => {
-							if (item.value === undefined) {
-								return acc;
-							}
-							if (
-								item.key &&
-								typeof item.key === 'object' &&
-								'key' in item.key &&
-								typeof item.key.key === 'string'
-							) {
-								const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-								acc.push({ ...item, key: { ...item.key, key: mappedKey } });
-							} else {
-								acc.push(item);
-							}
-							return acc;
-						}, [] as TagFilter['items']),
-					},
-			  }
-			: props;
+		// Prepare filters
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({ ...item, key: { ...item.key, key: mappedKey } });
+									} else {
+										acc.push(item);
+									}
+									return acc;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/statefulsets/list', requestProps, {
 			signal,
@@ -106,6 +109,7 @@ export const getK8sStatefulSetsList = async (
 		});
 		const payload: K8sStatefulSetsListResponse = response.data;
 
+		// apply our helper
 		payload.data.records = payload.data.records.map((record) => ({
 			...record,
 			meta: mapStatefulSetsMeta(record.meta as Record<string, unknown>),

frontend/src/auto-import-registry.d.ts

@@ -10,7 +10,21 @@
 // PR for reference: https://github.com/SigNoz/signoz/pull/9694
 // -------------------------------------------------------------------------
 
+import '@signozhq/button';
+import '@signozhq/calendar';
+import '@signozhq/callout';
+import '@signozhq/checkbox';
+import '@signozhq/combobox';
+import '@signozhq/command';
 import '@signozhq/design-tokens';
+import '@signozhq/dialog';
+import '@signozhq/drawer';
 import '@signozhq/icons';
+import '@signozhq/input';
+import '@signozhq/popover';
+import '@signozhq/radio-group';
 import '@signozhq/resizable';
+import '@signozhq/tabs';
+import '@signozhq/table';
+import '@signozhq/toggle-group';
 import '@signozhq/ui';

frontend/src/components/AppLoading/AppLoading.styles.scss

@@ -80,12 +80,12 @@
 
 	mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
+		color-mix(in srgb, var(--background) 10%, transparent) 0,
 		transparent 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
+		color-mix(in srgb, var(--background) 10%, transparent) 0,
 		transparent 100%
 	);
 }

frontend/src/components/AuthError/AuthError.styles.scss

@@ -4,14 +4,13 @@
 	animation: horizontal-shaking 300ms ease-out;
 
 	.error-content {
-		background: color-mix(in srgb, var(--danger-background) 10%, transparent);
-		border: 1px solid
-			color-mix(in srgb, var(--danger-background) 20%, transparent);
+		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
 		border-radius: 4px;
 
 		&__summary-section {
 			border-bottom: 1px solid
-				color-mix(in srgb, var(--danger-background) 20%, transparent);
+				color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
 		}
 
 		&__summary {
@@ -59,7 +58,7 @@
 		&__message-badge-line {
 			background-image: radial-gradient(
 				circle,
-				color-mix(in srgb, var(--danger-background) 30%, transparent) 1px,
+				color-mix(in srgb, var(--bg-cherry-500) 30%, transparent) 1px,
 				transparent 2px
 			);
 		}
@@ -85,7 +84,7 @@
 		}
 
 		&__scroll-hint {
-			background: color-mix(in srgb, var(--danger-background) 20%, transparent);
+			background: color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
 		}
 
 		&__scroll-hint-text {

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { LifeBuoy } from 'lucide-react';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
@@ -23,10 +23,8 @@ function AuthHeader(): JSX.Element {
 			</div>
 			<Button
 				className="auth-header-help-button"
-				prefix={<LifeBuoy size={12} />}
+				prefixIcon={<LifeBuoy size={12} />}
 				onClick={handleGetHelp}
-				variant="solid"
-				color="none"
 			>
 				Get Help
 			</Button>

frontend/src/components/AuthPageContainer/AuthPageContainer.styles.scss

@@ -43,12 +43,12 @@
 .masked-dots {
 	mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--l1-background) 10%, transparent) 0%,
+		color-mix(in srgb, var(--background) 10%, transparent) 0%,
 		transparent 56.77%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--l1-background) 10%, transparent) 0%,
+		color-mix(in srgb, var(--background) 10%, transparent) 0%,
 		transparent 56.77%
 	);
 }

frontend/src/components/ChangePercentagePill/ChangePercentagePill.styles.scss

@@ -26,14 +26,14 @@
 		}
 	}
 	&--negative {
-		background: color-mix(in srgb, var(--danger-background) 10%, transparent);
+		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
 
 		.change-percentage-pill {
 			&__icon {
-				color: var(--danger-background);
+				color: var(--bg-cherry-500);
 			}
 			&__label {
-				color: var(--danger-background);
+				color: var(--bg-cherry-500);
 			}
 		}
 	}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -1,13 +1,10 @@
 import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { X } from '@signozhq/icons';
-import {
-	Button,
-	DialogFooter,
-	DialogWrapper,
-	Input,
-	toast,
-} from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccounts,
@@ -53,7 +50,9 @@ function CreateServiceAccountModal(): JSX.Element {
 	} = useCreateServiceAccount({
 		mutation: {
 			onSuccess: async () => {
-				toast.success('Service account created successfully');
+				toast.success('Service account created successfully', {
+					richColors: true,
+				});
 				reset();
 				await setIsOpen(null);
 				await invalidateListServiceAccounts(queryClient);
@@ -129,6 +128,7 @@ function CreateServiceAccountModal(): JSX.Element {
 					type="button"
 					variant="solid"
 					color="secondary"
+					size="sm"
 					onClick={handleClose}
 				>
 					<X size={12} />
@@ -137,10 +137,10 @@ function CreateServiceAccountModal(): JSX.Element {
 
 				<Button
 					type="submit"
-					// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 					form="create-sa-form"
 					variant="solid"
 					color="primary"
+					size="sm"
 					loading={isSubmitting}
 					disabled={!isValid}
 				>

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

@@ -1,13 +1,7 @@
 import { toast } from '@signozhq/ui';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	render,
-	screen,
-	userEvent,
-	waitFor,
-	waitForElementToBeRemoved,
-} from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
@@ -75,6 +69,7 @@ describe('CreateServiceAccountModal', () => {
 		await waitFor(() => {
 			expect(mockToast.success).toHaveBeenCalledWith(
 				'Service account created successfully',
+				expect.anything(),
 			);
 		});
 
@@ -126,12 +121,12 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const dialog = await screen.findByRole('dialog', {
-			name: /New Service Account/i,
-		});
+		await screen.findByRole('dialog', { name: /New Service Account/i });
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		await waitForElementToBeRemoved(dialog);
+		expect(
+			screen.queryByRole('dialog', { name: /New Service Account/i }),
+		).not.toBeInTheDocument();
 	});
 
 	it('shows "Name is required" after clearing the name field', async () => {

frontend/src/components/CustomTimePicker/CalendarContainer.tsx

@@ -1,4 +1,4 @@
-import { Calendar } from '@signozhq/ui';
+import { Calendar } from '@signozhq/calendar';
 import { Button } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,7 +7,7 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -661,9 +661,7 @@ function CustomTimePicker({
 						onClick={handleZoomOut}
 						disabled={zoomOutDisabled}
 						data-testid="zoom-out-btn"
-						prefix={<ZoomOut size={14} />}
-						variant="solid"
-						color="none"
+						prefixIcon={<ZoomOut size={14} />}
 					/>
 				</Tooltip>
 			)}

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -1,5 +1,6 @@
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { Button, DialogWrapper } from '@signozhq/ui';
 import { MemberRow } from 'components/MembersTable/MembersTable';
 
 interface DeleteMemberDialogProps {
@@ -35,24 +36,6 @@ function DeleteMemberDialog({
 		</>
 	);
 
-	const footer = (
-		<>
-			<Button variant="solid" color="secondary" onClick={onClose}>
-				<X size={12} />
-				Cancel
-			</Button>
-			<Button
-				variant="solid"
-				color="destructive"
-				disabled={isDeleting}
-				onClick={onConfirm}
-			>
-				<Trash2 size={12} />
-				{isDeleting ? 'Processing...' : title}
-			</Button>
-		</>
-	);
-
 	return (
 		<DialogWrapper
 			open={open}
@@ -66,9 +49,25 @@ function DeleteMemberDialog({
 			className="alert-dialog delete-dialog"
 			showCloseButton={false}
 			disableOutsideClick={false}
-			footer={footer}
 		>
-			{body}
+			<p className="delete-dialog__body">{body}</p>
+
+			<DialogFooter className="delete-dialog__footer">
+				<Button variant="solid" color="secondary" size="sm" onClick={onClose}>
+					<X size={12} />
+					Cancel
+				</Button>
+				<Button
+					variant="solid"
+					color="destructive"
+					size="sm"
+					disabled={isDeleting}
+					onClick={onConfirm}
+				>
+					<Trash2 size={12} />
+					{isDeleting ? 'Processing...' : title}
+				</Button>
+			</DialogFooter>
 		</DialogWrapper>
 	);
 }

frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss

@@ -2,7 +2,7 @@
 	&__layout {
 		display: flex;
 		flex-direction: column;
-		height: 100%;
+		height: calc(100vh - 48px);
 	}
 
 	&__body {
@@ -11,6 +11,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--spacing-8);
+		padding: var(--padding-5) var(--padding-4);
 	}
 
 	&__field {
@@ -49,7 +50,6 @@
 		border-radius: 2px;
 		background: var(--l2-background);
 		border: 1px solid var(--l1-border);
-		box-sizing: border-box;
 
 		&--disabled {
 			cursor: not-allowed;
@@ -120,11 +120,17 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
+		height: 56px;
+		padding: 0 var(--padding-4);
+		border-top: 1px solid var(--l1-border);
+		flex-shrink: 0;
+		background: var(--card);
 	}
 
 	&__footer-left {
 		display: flex;
 		align-items: center;
+		gap: var(--spacing-8);
 	}
 
 	&__footer-right {
@@ -217,6 +223,10 @@
 		color: var(--l1-foreground);
 	}
 
+	[data-slot='dialog-description'] {
+		width: 510px;
+	}
+
 	&__content {
 		display: flex;
 		flex-direction: column;

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { Button } from '@signozhq/button';
+import { DrawerWrapper } from '@signozhq/drawer';
 import { LockKeyhole, RefreshCw, Trash2, X } from '@signozhq/icons';
-import { Badge, Button, DrawerWrapper, Input, toast } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { Badge, toast } from '@signozhq/ui';
 import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
@@ -204,7 +207,7 @@ function EditMemberDrawer({
 			onSuccess: (): void => {
 				toast.success(
 					isInvited ? 'Invite revoked successfully' : 'Member deleted successfully',
-					{ position: 'top-right' },
+					{ richColors: true, position: 'top-right' },
 				);
 				setShowDeleteConfirm(false);
 				onComplete();
@@ -339,7 +342,10 @@ function EditMemberDrawer({
 			if (errors.length > 0) {
 				setSaveErrors(errors);
 			} else {
-				toast.success('Member details updated successfully');
+				toast.success('Member details updated successfully', {
+					richColors: true,
+					position: 'top-right',
+				});
 				onComplete();
 			}
 
@@ -397,6 +403,7 @@ function EditMemberDrawer({
 				onClose();
 			} else {
 				toast.error('Failed to generate password reset link', {
+					richColors: true,
 					position: 'top-right',
 				});
 			}
@@ -420,12 +427,15 @@ function EditMemberDrawer({
 			linkType === 'invite'
 				? 'Invite link copied to clipboard'
 				: 'Reset link copied to clipboard';
-		toast.success(message);
+		toast.success(message, { richColors: true, position: 'top-right' });
 	}, [resetLink, copyToClipboard, linkType]);
 
 	useEffect(() => {
 		if (copyState.error) {
-			toast.error('Failed to copy link');
+			toast.error('Failed to copy link', {
+				richColors: true,
+				position: 'top-right',
+			});
 		}
 	}, [copyState.error]);
 
@@ -586,21 +596,16 @@ function EditMemberDrawer({
 	const drawerContent = (
 		<div className="edit-member-drawer__layout">
 			<div className="edit-member-drawer__body">{drawerBody}</div>
-		</div>
-	);
 
-	const footer = (
-		<div className="edit-member-drawer__footer">
 			{!isDeleted && (
-				<>
+				<div className="edit-member-drawer__footer">
 					<div className="edit-member-drawer__footer-left">
 						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
 							<span className="edit-member-drawer__tooltip-wrapper">
 								<Button
+									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
 									onClick={(): void => setShowDeleteConfirm(true)}
 									disabled={isRootUser || isSelf}
-									variant="link"
-									color="destructive"
 								>
 									<Trash2 size={12} />
 									{isInvited ? 'Revoke Invite' : 'Delete Member'}
@@ -612,10 +617,9 @@ function EditMemberDrawer({
 						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
 							<span className="edit-member-drawer__tooltip-wrapper">
 								<Button
+									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
 									onClick={handleGenerateResetLink}
 									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
-									variant="link"
-									color="warning"
 								>
 									<RefreshCw size={12} />
 									{isGeneratingLink
@@ -634,7 +638,7 @@ function EditMemberDrawer({
 					</div>
 
 					<div className="edit-member-drawer__footer-right">
-						<Button variant="solid" color="secondary" onClick={handleClose}>
+						<Button variant="solid" color="secondary" size="sm" onClick={handleClose}>
 							<X size={14} />
 							Cancel
 						</Button>
@@ -642,13 +646,14 @@ function EditMemberDrawer({
 						<Button
 							variant="solid"
 							color="primary"
+							size="sm"
 							disabled={!isDirty || isSaving || isRootUser}
 							onClick={handleSave}
 						>
 							{isSaving ? 'Saving...' : 'Save Member Details'}
 						</Button>
 					</div>
-				</>
+				</div>
 			)}
 		</div>
 	);
@@ -663,14 +668,14 @@ function EditMemberDrawer({
 					}
 				}}
 				direction="right"
+				type="panel"
 				showCloseButton
 				showOverlay={false}
-				title="Member Details"
-				footer={footer}
-				width="wide"
-			>
-				{drawerContent}
-			</DrawerWrapper>
+				allowOutsideClick
+				header={{ title: 'Member Details' }}
+				content={drawerContent}
+				className="edit-member-drawer"
+			/>
 
 			<ResetLinkDialog
 				open={showResetLinkDialog}

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -1,5 +1,6 @@
+import { Button } from '@signozhq/button';
+import { DialogWrapper } from '@signozhq/dialog';
 import { Check, Copy } from '@signozhq/icons';
-import { Button, DialogWrapper } from '@signozhq/ui';
 
 interface ResetLinkDialogProps {
 	open: boolean;
@@ -48,7 +49,7 @@ function ResetLinkDialog({
 						color="secondary"
 						size="sm"
 						onClick={onCopy}
-						prefix={hasCopied ? <Check size={12} /> : <Copy size={12} />}
+						prefixIcon={hasCopied ? <Check size={12} /> : <Copy size={12} />}
 						className="reset-link-dialog__copy-btn"
 					>
 						{hasCopied ? 'Copied!' : 'Copy'}

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

@@ -20,6 +20,36 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import EditMemberDrawer, { EditMemberDrawerProps } from '../EditMemberDrawer';
 
+jest.mock('@signozhq/drawer', () => ({
+	DrawerWrapper: ({
+		content,
+		open,
+	}: {
+		content?: ReactNode;
+		open: boolean;
+	}): JSX.Element | null => (open ? <div>{content}</div> : null),
+}));
+
+jest.mock('@signozhq/dialog', () => ({
+	DialogWrapper: ({
+		children,
+		open,
+		title,
+	}: {
+		children?: ReactNode;
+		open: boolean;
+		title?: string;
+	}): JSX.Element | null =>
+		open ? (
+			<div role="dialog" aria-label={title}>
+				{children}
+			</div>
+		) : null,
+	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
+		<div>{children}</div>
+	),
+}));
+
 jest.mock('api/generated/services/users', () => ({
 	useDeleteUser: jest.fn(),
 	useGetUser: jest.fn(),
@@ -36,41 +66,6 @@ jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
 
 jest.mock('@signozhq/ui', () => ({
 	...jest.requireActual('@signozhq/ui'),
-	DrawerWrapper: ({
-		children,
-		footer,
-		open,
-	}: {
-		children?: ReactNode;
-		footer?: ReactNode;
-		open: boolean;
-	}): JSX.Element | null =>
-		open ? (
-			<div>
-				{children}
-				{footer}
-			</div>
-		) : null,
-	DialogWrapper: ({
-		children,
-		footer,
-		open,
-		title,
-	}: {
-		children?: ReactNode;
-		footer?: ReactNode;
-		open: boolean;
-		title?: string;
-	}): JSX.Element | null =>
-		open ? (
-			<div role="dialog" aria-label={title}>
-				{children}
-				{footer}
-			</div>
-		) : null,
-	DialogFooter: ({ children }: { children?: ReactNode }): JSX.Element => (
-		<div>{children}</div>
-	),
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),
@@ -165,8 +160,6 @@ function renderDrawer(
 describe('EditMemberDrawer', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		mockCopyState.value = undefined;
-		mockCopyState.error = undefined;
 		showErrorModal.mockClear();
 		server.use(
 			rest.get(ROLES_ENDPOINT, (_, res, ctx) =>
@@ -733,16 +726,16 @@ describe('EditMemberDrawer', () => {
 			await user.click(screen.getByRole('button', { name: /^copy$/i }));
 
 			await waitFor(() => {
-				expect(mockCopyToClipboard).toHaveBeenCalledWith(
-					expect.stringContaining('reset-tok-abc'),
-				);
-				expect(
-					screen.getByRole('button', { name: /copied!/i }),
-				).toBeInTheDocument();
 				expect(mockToast.success).toHaveBeenCalledWith(
 					'Reset link copied to clipboard',
+					expect.anything(),
 				);
 			});
+
+			expect(mockCopyToClipboard).toHaveBeenCalledWith(
+				expect.stringContaining('reset-tok-abc'),
+			);
+			expect(screen.getByRole('button', { name: /copied!/i })).toBeInTheDocument();
 		});
 	});
 });

frontend/src/components/ErrorModal/ErrorModal.styles.scss

@@ -5,12 +5,12 @@
 		align-items: center;
 		gap: 4px;
 		border-radius: 20px;
-		background: color-mix(in srgb, var(--danger-background) 20%, transparent);
+		background: color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
 		padding-left: 3px;
 		padding-right: 8px;
 		cursor: pointer;
 		span {
-			color: var(--danger-background);
+			color: var(--bg-cherry-500);
 			font-size: 10px;
 			font-weight: 500;
 			line-height: 20px; /* 200% */
@@ -21,7 +21,7 @@
 	&__wrap {
 		background: linear-gradient(
 			180deg,
-			color-mix(in srgb, var(--l1-background) 12%, transparent) 0.07%,
+			color-mix(in srgb, var(--background) 12%, transparent) 0.07%,
 			color-mix(in srgb, var(--bg-sakura-950) 24%, transparent) 50.04%,
 			color-mix(in srgb, var(--bg-sakura-800) 36%, transparent) 75.02%,
 			color-mix(in srgb, var(--bg-sakura-600) 48%, transparent) 87.51%,
@@ -40,17 +40,15 @@
 			margin: auto;
 		}
 	}
-
 	&__body {
 		padding: 0;
+		background: var(--l2-background);
 		overflow: hidden;
 		border-top-left-radius: 4px;
 		border-top-right-radius: 4px;
 	}
-
 	&__header {
 		background: none !important;
-
 		.ant-modal-title {
 			display: flex;
 			justify-content: space-between;
@@ -82,7 +80,6 @@
 				pointer-events: none;
 			}
 		}
-
 		.close-button {
 			padding: 3px 7px;
 			background: var(--l2-background);
@@ -93,15 +90,15 @@
 			box-shadow: none;
 		}
 	}
-
 	&__footer {
 		margin: 0 !important;
 		height: 6px;
+		background: var(--bg-sakura-500);
 	}
-
 	&__content {
 		padding: 0 !important;
 		border-radius: 4px;
 		overflow: hidden;
+		background: none !important;
 	}
 }

frontend/src/components/ErrorModal/components/ErrorContent.styles.scss

@@ -5,6 +5,7 @@
 	&__summary-section {
 		display: flex;
 		flex-direction: column;
+		border-bottom: 1px solid var(--l1-border);
 	}
 
 	&__summary {

frontend/src/components/HostMetricsDetail/Containers/Containers.tsx

@@ -1,15 +1,16 @@
 import { useTranslation } from 'react-i18next';
 import { Space, Typography } from 'antd';
-import WaitlistFragment from 'components/HostMetricsDetail/WaitlistFragment/WaitlistFragment';
 
 import broomUrl from '@/assets/Icons/broom.svg';
 import infraContainersUrl from '@/assets/Icons/infraContainers.svg';
 
-import 'components/HostMetricsDetail/Containers/Containers.styles.scss';
+import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';
+
+import './Containers.styles.scss';
 
 const { Text } = Typography;
 
-function EntityContainers(): JSX.Element {
+function Containers(): JSX.Element {
 	const { t } = useTranslation(['infraMonitoring']);
 
 	return (
@@ -43,4 +44,4 @@ function EntityContainers(): JSX.Element {
 	);
 }
 
-export default EntityContainers;
+export default Containers;

frontend/src/components/HostMetricsDetail/HostMetricDetail.interfaces.ts

@@ -0,0 +1,7 @@
+import { HostData } from 'api/infraMonitoring/getHostLists';
+
+export type HostDetailProps = {
+	host: HostData | null;
+	isModalTimeSelection: boolean;
+	onClose: () => void;
+};

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.styles.scss

@@ -0,0 +1,145 @@
+.host-metric-traces {
+	margin-top: 1rem;
+
+	.host-metric-traces-header {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 1rem;
+
+		gap: 8px;
+		padding: 12px;
+		border-radius: 3px;
+		border: 1px solid var(--l1-border);
+
+		.filter-section {
+			flex: 1;
+
+			.ant-select-selector {
+				border-radius: 2px;
+				border: 1px solid var(--l1-border) !important;
+				background-color: var(--l3-background) !important;
+
+				input {
+					font-size: 12px;
+				}
+
+				.ant-tag .ant-typography {
+					font-size: 12px;
+				}
+			}
+		}
+	}
+
+	.host-metric-traces-table {
+		.ant-table-content {
+			overflow: hidden !important;
+		}
+
+		.ant-table {
+			border-radius: 3px;
+			border: 1px solid var(--l1-border);
+
+			.ant-table-thead > tr > th {
+				padding: 12px;
+				font-weight: 500;
+				font-size: 12px;
+				line-height: 18px;
+
+				background: color-mix(in srgb, var(--bg-robin-200) 1%, transparent);
+				border-bottom: none;
+
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 11px;
+				font-style: normal;
+				font-weight: 600;
+				line-height: 18px; /* 163.636% */
+				letter-spacing: 0.44px;
+				text-transform: uppercase;
+
+				&::before {
+					background-color: transparent;
+				}
+			}
+
+			.ant-table-thead > tr > th:has(.hostname-column-header) {
+				background: var(--l2-background);
+			}
+
+			.ant-table-cell {
+				padding: 12px;
+				font-size: 13px;
+				line-height: 20px;
+				color: var(--l1-foreground);
+				background: color-mix(in srgb, var(--bg-robin-200) 1%, transparent);
+			}
+
+			.ant-table-cell:has(.hostname-column-value) {
+				background: var(--l2-background);
+			}
+
+			.hostname-column-value {
+				color: var(--l1-foreground);
+				font-family: 'Geist Mono';
+				font-style: normal;
+				font-weight: 600;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+
+			.status-cell {
+				.active-tag {
+					color: var(--bg-forest-500);
+					padding: 4px 8px;
+					border-radius: 4px;
+					font-size: 12px;
+					font-weight: 500;
+				}
+			}
+
+			.progress-container {
+				.ant-progress-bg {
+					height: 8px !important;
+					border-radius: 4px;
+				}
+			}
+
+			.ant-table-tbody > tr:hover > td {
+				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
+			}
+
+			.ant-table-cell:first-child {
+				text-align: justify;
+			}
+
+			.ant-table-cell:nth-child(2) {
+				padding-left: 16px;
+				padding-right: 16px;
+			}
+
+			.ant-table-cell:nth-child(n + 3) {
+				padding-right: 24px;
+			}
+			.column-header-right {
+				text-align: right;
+			}
+			.ant-table-tbody > tr > td {
+				border-bottom: none;
+			}
+
+			.ant-table-thead
+				> tr
+				> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
+				background-color: transparent;
+			}
+
+			.ant-empty-normal {
+				visibility: hidden;
+			}
+		}
+
+		.ant-table-container::after {
+			content: none;
+		}
+	}
+}

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx

@@ -0,0 +1,222 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import logEvent from 'api/common/logEvent';
+import { ResizeTable } from 'components/ResizeTable';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { InfraMonitoringEvents } from 'constants/events';
+import { QueryParams } from 'constants/query';
+import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
+import NoLogs from 'container/NoLogs/NoLogs';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import { ErrorText } from 'container/TimeSeriesView/styles';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import TraceExplorerControls from 'container/TracesExplorer/Controls';
+import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
+import { TracesLoading } from 'container/TracesExplorer/TraceLoading/TraceLoading';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { Pagination } from 'hooks/queryPagination';
+import useUrlQueryData from 'hooks/useUrlQueryData';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { VIEWS } from '../constants';
+import { getHostTracesQueryPayload, selectedColumns } from './constants';
+import { getListColumns } from './utils';
+
+import './HostMetricTraces.styles.scss';
+
+interface Props {
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	isModalTimeSelection: boolean;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+	handleChangeTracesFilters: (
+		value: IBuilderQuery['filters'],
+		view: VIEWS,
+	) => void;
+	tracesFilters: IBuilderQuery['filters'];
+	selectedInterval: Time;
+}
+
+function HostMetricTraces({
+	timeRange,
+	isModalTimeSelection,
+	handleTimeChange,
+	handleChangeTracesFilters,
+	tracesFilters,
+	selectedInterval,
+}: Props): JSX.Element {
+	const [traces, setTraces] = useState<any[]>([]);
+	const [offset] = useState<number>(0);
+
+	const { currentQuery } = useQueryBuilder();
+	const updatedCurrentQuery = useMemo(
+		() => ({
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: [
+					{
+						...currentQuery.builder.queryData[0],
+						dataSource: DataSource.TRACES,
+						aggregateOperator: 'noop',
+						aggregateAttribute: {
+							...currentQuery.builder.queryData[0].aggregateAttribute,
+						},
+						filters: {
+							items:
+								tracesFilters?.items?.filter((item) => item.key?.key !== 'host.name') ||
+								[],
+							op: 'AND',
+						},
+					},
+				],
+			},
+		}),
+		[currentQuery, tracesFilters?.items],
+	);
+
+	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
+
+	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
+		QueryParams.pagination,
+	);
+
+	const queryPayload = useMemo(
+		() =>
+			getHostTracesQueryPayload(
+				timeRange.startTime,
+				timeRange.endTime,
+				paginationQueryData?.offset || offset,
+				tracesFilters,
+			),
+		[
+			timeRange.startTime,
+			timeRange.endTime,
+			offset,
+			tracesFilters,
+			paginationQueryData,
+		],
+	);
+
+	const { data, isLoading, isFetching, isError } = useQuery({
+		queryKey: [
+			'hostMetricTraces',
+			timeRange.startTime,
+			timeRange.endTime,
+			offset,
+			tracesFilters,
+			DEFAULT_ENTITY_VERSION,
+			paginationQueryData,
+		],
+		queryFn: () => GetMetricQueryRange(queryPayload, DEFAULT_ENTITY_VERSION),
+		enabled: !!queryPayload,
+	});
+
+	const traceListColumns = getListColumns(selectedColumns);
+
+	useEffect(() => {
+		if (data?.payload?.data?.newResult?.data?.result) {
+			const currentData = data.payload.data.newResult.data.result;
+			if (currentData.length > 0 && currentData[0].list) {
+				if (offset === 0) {
+					setTraces(currentData[0].list ?? []);
+				} else {
+					setTraces((prev) => [...prev, ...(currentData[0].list ?? [])]);
+				}
+			}
+		}
+	}, [data, offset]);
+
+	const isDataEmpty =
+		!isLoading && !isFetching && !isError && traces.length === 0;
+	const hasAdditionalFilters =
+		tracesFilters?.items && tracesFilters?.items?.length > 1;
+
+	const totalCount =
+		data?.payload?.data?.newResult?.data?.result?.[0]?.list?.length || 0;
+
+	const handleRowClick = useCallback(() => {
+		logEvent(InfraMonitoringEvents.ItemClicked, {
+			entity: InfraMonitoringEvents.HostEntity,
+			view: InfraMonitoringEvents.TracesView,
+		});
+	}, []);
+
+	return (
+		<div className="host-metric-traces">
+			<div className="host-metric-traces-header">
+				<div className="filter-section">
+					{query && (
+						<QueryBuilderSearch
+							query={query as IBuilderQuery}
+							onChange={(value): void =>
+								handleChangeTracesFilters(value, VIEWS.TRACES)
+							}
+							disableNavigationShortcuts
+						/>
+					)}
+				</div>
+				<div className="datetime-section">
+					<DateTimeSelectionV2
+						showAutoRefresh
+						showRefreshText={false}
+						hideShareModal
+						isModalTimeSelection={isModalTimeSelection}
+						onTimeChange={handleTimeChange}
+						defaultRelativeTime="5m"
+						modalSelectedInterval={selectedInterval}
+						modalInitialStartTime={timeRange.startTime * 1000}
+						modalInitialEndTime={timeRange.endTime * 1000}
+					/>
+				</div>
+			</div>
+
+			{isError && <ErrorText>{data?.error || 'Something went wrong'}</ErrorText>}
+
+			{isLoading && traces.length === 0 && <TracesLoading />}
+
+			{isDataEmpty && !hasAdditionalFilters && (
+				<NoLogs dataSource={DataSource.TRACES} />
+			)}
+
+			{isDataEmpty && hasAdditionalFilters && (
+				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="LIST" />
+			)}
+
+			{!isError && traces.length > 0 && (
+				<div className="host-metric-traces-table">
+					<TraceExplorerControls
+						isLoading={isFetching && traces.length === 0}
+						totalCount={totalCount}
+						perPageOptions={PER_PAGE_OPTIONS}
+						showSizeChanger={false}
+					/>
+					<ResizeTable
+						tableLayout="fixed"
+						pagination={false}
+						scroll={{ x: true }}
+						loading={isFetching && traces.length === 0}
+						dataSource={traces}
+						columns={traceListColumns}
+						onRow={(): Record<string, unknown> => ({
+							onClick: (): void => handleRowClick(),
+						})}
+					/>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default HostMetricTraces;

frontend/src/components/HostMetricsDetail/HostMetricTraces/constants.ts

@@ -0,0 +1,183 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
+import { nanoToMilli } from 'utils/timeUtils';
+
+export const columns = [
+	{
+		dataIndex: 'timestamp',
+		key: 'timestamp',
+		title: 'Timestamp',
+		width: 200,
+		render: (timestamp: string): string => new Date(timestamp).toLocaleString(),
+	},
+	{
+		title: 'Service Name',
+		dataIndex: ['data', 'serviceName'],
+		key: 'serviceName-string-tag',
+		width: 150,
+	},
+	{
+		title: 'Name',
+		dataIndex: ['data', 'name'],
+		key: 'name-string-tag',
+		width: 145,
+	},
+	{
+		title: 'Duration',
+		dataIndex: ['data', 'durationNano'],
+		key: 'durationNano-float64-tag',
+		width: 145,
+		render: (duration: number): string => `${nanoToMilli(duration)}ms`,
+	},
+	{
+		title: 'HTTP Method',
+		dataIndex: ['data', 'httpMethod'],
+		key: 'httpMethod-string-tag',
+		width: 145,
+	},
+	{
+		title: 'Status Code',
+		dataIndex: ['data', 'responseStatusCode'],
+		key: 'responseStatusCode-string-tag',
+		width: 145,
+	},
+];
+
+export const selectedColumns: BaseAutocompleteData[] = [
+	{
+		key: 'timestamp',
+		dataType: DataTypes.String,
+		type: 'tag',
+	},
+	{
+		key: 'serviceName',
+		dataType: DataTypes.String,
+		type: 'tag',
+	},
+	{
+		key: 'name',
+		dataType: DataTypes.String,
+		type: 'tag',
+	},
+	{
+		key: 'durationNano',
+		dataType: DataTypes.Float64,
+		type: 'tag',
+	},
+	{
+		key: 'httpMethod',
+		dataType: DataTypes.String,
+		type: 'tag',
+	},
+	{
+		key: 'responseStatusCode',
+		dataType: DataTypes.String,
+		type: 'tag',
+	},
+];
+
+export const getHostTracesQueryPayload = (
+	start: number,
+	end: number,
+	offset = 0,
+	filters: IBuilderQuery['filters'],
+): GetQueryResultsProps => ({
+	query: {
+		promql: [],
+		clickhouse_sql: [],
+		builder: {
+			queryData: [
+				{
+					dataSource: DataSource.TRACES,
+					queryName: 'A',
+					aggregateOperator: 'noop',
+					aggregateAttribute: {
+						id: '------false',
+						dataType: DataTypes.EMPTY,
+						key: '',
+						type: '',
+					},
+					timeAggregation: 'rate',
+					spaceAggregation: 'sum',
+					functions: [],
+					filters,
+					expression: 'A',
+					disabled: false,
+					stepInterval: 60,
+					having: [],
+					limit: null,
+					orderBy: [
+						{
+							columnName: 'timestamp',
+							order: 'desc',
+						},
+					],
+					groupBy: [],
+					legend: '',
+					reduceTo: ReduceOperators.AVG,
+				},
+			],
+			queryFormulas: [],
+			queryTraceOperator: [],
+		},
+		id: '572f1d91-6ac0-46c0-b726-c21488b34434',
+		queryType: EQueryType.QUERY_BUILDER,
+	},
+	graphType: PANEL_TYPES.LIST,
+	selectedTime: 'GLOBAL_TIME',
+	start,
+	end,
+	params: {
+		dataSource: DataSource.TRACES,
+	},
+	tableParams: {
+		pagination: {
+			limit: 10,
+			offset,
+		},
+		selectColumns: [
+			{
+				key: 'serviceName',
+				dataType: 'string',
+				type: 'tag',
+				id: 'serviceName--string--tag--true',
+				isIndexed: false,
+			},
+			{
+				key: 'name',
+				dataType: 'string',
+				type: 'tag',
+				id: 'name--string--tag--true',
+				isIndexed: false,
+			},
+			{
+				key: 'durationNano',
+				dataType: 'float64',
+				type: 'tag',
+				id: 'durationNano--float64--tag--true',
+				isIndexed: false,
+			},
+			{
+				key: 'httpMethod',
+				dataType: 'string',
+				type: 'tag',
+				id: 'httpMethod--string--tag--true',
+				isIndexed: false,
+			},
+			{
+				key: 'responseStatusCode',
+				dataType: 'string',
+				type: 'tag',
+				id: 'responseStatusCode--string--tag--true',
+				isIndexed: false,
+			},
+		],
+	},
+});

frontend/src/components/HostMetricsDetail/HostMetricTraces/utils.tsx

@@ -18,7 +18,7 @@ const keyToLabelMap: Record<string, string> = {
 	responseStatusCode: 'Status Code',
 };
 
-export const getTraceListColumns = (
+export const getListColumns = (
 	selectedColumns: BaseAutocompleteData[],
 ): ColumnsType<RowData> => {
 	const columns: ColumnsType<RowData> =

frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss

@@ -0,0 +1,176 @@
+.host-detail-drawer {
+	border-left: 1px solid var(--l1-border);
+	background: var(--l2-background);
+	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+
+	.ant-drawer-header {
+		padding: 8px 16px;
+		border-bottom: none;
+
+		align-items: stretch;
+
+		border-bottom: 1px solid var(--l1-border);
+		background: var(--l2-background);
+	}
+
+	.ant-drawer-close {
+		margin-inline-end: 0px;
+	}
+
+	.ant-drawer-body {
+		display: flex;
+		flex-direction: column;
+		padding: 16px;
+	}
+
+	.title {
+		color: var(--l2-foreground);
+		font-family: 'Geist Mono';
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+	}
+
+	.radio-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-top: var(--padding-1);
+		border: 1px solid var(--l1-border);
+		background: var(--l3-background);
+		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+	}
+
+	.host-detail-drawer__host {
+		.host-details-grid {
+			.labels-row,
+			.values-row {
+				display: grid;
+				grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;
+				gap: 30px;
+				align-items: center;
+			}
+
+			.labels-row {
+				margin-bottom: 8px;
+			}
+
+			.host-details-metadata-label {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 11px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 18px; /* 163.636% */
+				letter-spacing: 0.44px;
+				text-transform: uppercase;
+			}
+
+			.status-tag {
+				margin: 0;
+
+				&.active {
+					color: var(--success-500);
+					background: var(--success-100);
+					border-color: var(--success-500);
+				}
+
+				&.inactive {
+					color: var(--error-500);
+					background: var(--error-100);
+					border-color: var(--error-500);
+				}
+			}
+
+			.progress-container {
+				width: 158px;
+				.ant-progress {
+					margin: 0;
+
+					.ant-progress-text {
+						font-weight: 600;
+					}
+				}
+			}
+
+			.ant-card {
+				&.ant-card-bordered {
+					border: 1px solid var(--l1-border) !important;
+				}
+			}
+		}
+	}
+
+	.tabs-and-search {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin: 16px 0;
+
+		.action-btn {
+			border-radius: 2px;
+			border: 1px solid var(--l1-border);
+			background: var(--l3-background);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+
+	.views-tabs-container {
+		margin-top: 1.5rem;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.views-tabs {
+			color: var(--l2-foreground);
+
+			.view-title {
+				display: flex;
+				gap: var(--margin-2);
+				align-items: center;
+				justify-content: center;
+				font-size: var(--font-size-xs);
+				font-style: normal;
+				font-weight: var(--font-weight-normal);
+			}
+
+			.tab {
+				border: 1px solid var(--l1-border);
+				width: 114px;
+			}
+
+			.tab::before {
+				background: var(--l1-border);
+			}
+
+			.selected_view {
+				background: var(--l3-background);
+				color: var(--l1-foreground);
+				border: 1px solid var(--l1-border);
+			}
+
+			.selected_view::before {
+				background: var(--l1-border);
+			}
+		}
+
+		.compass-button {
+			width: 30px;
+			height: 30px;
+
+			border-radius: 2px;
+			border: 1px solid var(--l1-border);
+			background: var(--l3-background);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		}
+	}
+
+	.ant-drawer-close {
+		padding: 0px;
+	}
+}

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -0,0 +1,595 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import { useSearchParams } from 'react-router-dom-v5-compat';
+import { Color, Spacing } from '@signozhq/design-tokens';
+import {
+	Button,
+	Divider,
+	Drawer,
+	Progress,
+	Radio,
+	Tag,
+	Typography,
+} from 'antd';
+import type { RadioChangeEvent } from 'antd/lib';
+import logEvent from 'api/common/logEvent';
+import { InfraMonitoringEvents } from 'constants/events';
+import { QueryParams } from 'constants/query';
+import {
+	initialQueryBuilderFormValuesMap,
+	initialQueryState,
+} from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { getFiltersFromParams } from 'container/InfraMonitoringK8s/commonUtils';
+import { INFRA_MONITORING_K8S_PARAMS_KEYS } from 'container/InfraMonitoringK8s/constants';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import useUrlQuery from 'hooks/useUrlQuery';
+import GetMinMax from 'lib/getMinMax';
+import {
+	BarChart2,
+	ChevronsLeftRight,
+	Compass,
+	DraftingCompass,
+	Package2,
+	ScrollText,
+	X,
+} from 'lucide-react';
+import { AppState } from 'store/reducers';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	IBuilderQuery,
+	TagFilterItem,
+} from 'types/api/queryBuilder/queryBuilderData';
+import {
+	LogsAggregatorOperator,
+	TracesAggregatorOperator,
+} from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { v4 as uuidv4 } from 'uuid';
+
+import { VIEW_TYPES, VIEWS } from './constants';
+import Containers from './Containers/Containers';
+import { HostDetailProps } from './HostMetricDetail.interfaces';
+import HostMetricLogsDetailedView from './HostMetricsLogs/HostMetricLogsDetailedView';
+import HostMetricTraces from './HostMetricTraces/HostMetricTraces';
+import Metrics from './Metrics/Metrics';
+import Processes from './Processes/Processes';
+
+import './HostMetricsDetail.styles.scss';
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function HostMetricsDetails({
+	host,
+	onClose,
+	isModalTimeSelection,
+}: HostDetailProps): JSX.Element {
+	const { maxTime, minTime, selectedTime } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+	const [searchParams, setSearchParams] = useSearchParams();
+
+	const startMs = useMemo(() => Math.floor(Number(minTime) / 1000000000), [
+		minTime,
+	]);
+	const endMs = useMemo(() => Math.floor(Number(maxTime) / 1000000000), [
+		maxTime,
+	]);
+
+	const urlQuery = useUrlQuery();
+
+	const [modalTimeRange, setModalTimeRange] = useState(() => ({
+		startTime: startMs,
+		endTime: endMs,
+	}));
+
+	const lastSelectedInterval = useRef<Time | null>(null);
+
+	const [selectedInterval, setSelectedInterval] = useState<Time>(
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: (selectedTime as Time),
+	);
+
+	const [selectedView, setSelectedView] = useState<VIEWS>(
+		(searchParams.get('view') as VIEWS) || VIEWS.METRICS,
+	);
+	const isDarkMode = useIsDarkMode();
+
+	const initialFilters = useMemo(() => {
+		const urlView = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW);
+		const queryKey =
+			urlView === VIEW_TYPES.LOGS
+				? INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS
+				: INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS;
+		const filters = getFiltersFromParams(searchParams, queryKey);
+		if (filters) {
+			return filters;
+		}
+
+		return {
+			op: 'AND',
+			items: [
+				{
+					id: uuidv4(),
+					key: {
+						key: 'host.name',
+						dataType: DataTypes.String,
+						type: 'resource',
+						id: 'host.name--string--resource--false',
+					},
+					op: '=',
+					value: host?.hostName || '',
+				},
+			],
+		};
+	}, [host?.hostName, searchParams]);
+
+	const [logFilters, setLogFilters] = useState<IBuilderQuery['filters']>(
+		initialFilters,
+	);
+
+	const [tracesFilters, setTracesFilters] = useState<IBuilderQuery['filters']>(
+		initialFilters,
+	);
+
+	useEffect(() => {
+		if (host) {
+			logEvent(InfraMonitoringEvents.PageVisited, {
+				entity: InfraMonitoringEvents.HostEntity,
+				page: InfraMonitoringEvents.DetailedPage,
+			});
+		}
+	}, [host]);
+
+	useEffect(() => {
+		setLogFilters(initialFilters);
+		setTracesFilters(initialFilters);
+	}, [initialFilters]);
+
+	useEffect(() => {
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		setSelectedInterval(currentSelectedInterval as Time);
+
+		if (currentSelectedInterval !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
+
+			setModalTimeRange({
+				startTime: Math.floor(minTime / 1000000000),
+				endTime: Math.floor(maxTime / 1000000000),
+			});
+		}
+	}, [selectedTime, minTime, maxTime]);
+
+	const handleTabChange = (e: RadioChangeEvent): void => {
+		setSelectedView(e.target.value);
+		if (host?.hostName) {
+			setSelectedView(e.target.value);
+			setSearchParams({
+				...Object.fromEntries(searchParams.entries()),
+				[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: e.target.value,
+				[INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS]: JSON.stringify(null),
+				[INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS]: JSON.stringify(null),
+			});
+		}
+		logEvent(InfraMonitoringEvents.TabChanged, {
+			entity: InfraMonitoringEvents.HostEntity,
+			view: e.target.value,
+		});
+	};
+
+	const handleTimeChange = useCallback(
+		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
+			setSelectedInterval(interval as Time);
+
+			if (interval === 'custom' && dateTimeRange) {
+				setModalTimeRange({
+					startTime: Math.floor(dateTimeRange[0] / 1000),
+					endTime: Math.floor(dateTimeRange[1] / 1000),
+				});
+			} else {
+				const { maxTime, minTime } = GetMinMax(interval);
+
+				setModalTimeRange({
+					startTime: Math.floor(minTime / 1000000000),
+					endTime: Math.floor(maxTime / 1000000000),
+				});
+			}
+
+			logEvent(InfraMonitoringEvents.TimeUpdated, {
+				entity: InfraMonitoringEvents.HostEntity,
+				interval,
+				page: InfraMonitoringEvents.DetailedPage,
+			});
+		},
+		[],
+	);
+
+	const handleChangeLogFilters = useCallback(
+		(value: IBuilderQuery['filters'], view: VIEWS) => {
+			setLogFilters((prevFilters) => {
+				const hostNameFilter = prevFilters?.items?.find(
+					(item) => item.key?.key === 'host.name',
+				);
+				const paginationFilter = value?.items?.find(
+					(item) => item.key?.key === 'id',
+				);
+				const newFilters = value?.items?.filter(
+					(item) => item.key?.key !== 'id' && item.key?.key !== 'host.name',
+				);
+
+				if (newFilters && newFilters?.length > 0) {
+					logEvent(InfraMonitoringEvents.FilterApplied, {
+						entity: InfraMonitoringEvents.HostEntity,
+						view: InfraMonitoringEvents.LogsView,
+						page: InfraMonitoringEvents.DetailedPage,
+					});
+				}
+
+				const updatedFilters = {
+					op: 'AND',
+					items: [
+						hostNameFilter,
+						...(newFilters || []),
+						...(paginationFilter ? [paginationFilter] : []),
+					].filter((item): item is TagFilterItem => item !== undefined),
+				};
+
+				setSearchParams({
+					...Object.fromEntries(searchParams.entries()),
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS]: JSON.stringify(
+						updatedFilters,
+					),
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: view,
+				});
+				return updatedFilters;
+			});
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
+	);
+
+	const handleChangeTracesFilters = useCallback(
+		(value: IBuilderQuery['filters'], view: VIEWS) => {
+			setTracesFilters((prevFilters) => {
+				const hostNameFilter = prevFilters?.items?.find(
+					(item) => item.key?.key === 'host.name',
+				);
+
+				if (value?.items && value?.items?.length > 0) {
+					logEvent(InfraMonitoringEvents.FilterApplied, {
+						entity: InfraMonitoringEvents.HostEntity,
+						view: InfraMonitoringEvents.TracesView,
+						page: InfraMonitoringEvents.DetailedPage,
+					});
+				}
+
+				const updatedFilters = {
+					op: 'AND',
+					items: [
+						hostNameFilter,
+						...(value?.items?.filter((item) => item.key?.key !== 'host.name') || []),
+					].filter((item): item is TagFilterItem => item !== undefined),
+				};
+
+				setSearchParams({
+					...Object.fromEntries(searchParams.entries()),
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS]: JSON.stringify(
+						updatedFilters,
+					),
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: view,
+				});
+
+				return updatedFilters;
+			});
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
+	);
+
+	const handleExplorePagesRedirect = (): void => {
+		if (selectedInterval !== 'custom') {
+			urlQuery.set(QueryParams.relativeTime, selectedInterval);
+		} else {
+			urlQuery.delete(QueryParams.relativeTime);
+			urlQuery.set(QueryParams.startTime, modalTimeRange.startTime.toString());
+			urlQuery.set(QueryParams.endTime, modalTimeRange.endTime.toString());
+		}
+
+		logEvent(InfraMonitoringEvents.ExploreClicked, {
+			view: selectedView,
+			entity: InfraMonitoringEvents.HostEntity,
+			page: InfraMonitoringEvents.DetailedPage,
+		});
+
+		if (selectedView === VIEW_TYPES.LOGS) {
+			const filtersWithoutPagination = {
+				...logFilters,
+				items: logFilters?.items?.filter((item) => item.key?.key !== 'id') || [],
+			};
+
+			const compositeQuery = {
+				...initialQueryState,
+				queryType: 'builder',
+				builder: {
+					...initialQueryState.builder,
+					queryData: [
+						{
+							...initialQueryBuilderFormValuesMap.logs,
+							aggregateOperator: LogsAggregatorOperator.NOOP,
+							filters: filtersWithoutPagination,
+						},
+					],
+				},
+			};
+
+			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
+
+			window.open(
+				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
+		} else if (selectedView === VIEW_TYPES.TRACES) {
+			const compositeQuery = {
+				...initialQueryState,
+				queryType: 'builder',
+				builder: {
+					...initialQueryState.builder,
+					queryData: [
+						{
+							...initialQueryBuilderFormValuesMap.traces,
+							aggregateOperator: TracesAggregatorOperator.NOOP,
+							filters: tracesFilters,
+						},
+					],
+				},
+			};
+
+			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
+
+			window.open(
+				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
+		}
+	};
+
+	const handleClose = (): void => {
+		setSelectedInterval(selectedTime as Time);
+		lastSelectedInterval.current = null;
+		setSearchParams({});
+
+		if (selectedTime !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(selectedTime);
+
+			setModalTimeRange({
+				startTime: Math.floor(minTime / 1000000000),
+				endTime: Math.floor(maxTime / 1000000000),
+			});
+		}
+		setSelectedView(VIEW_TYPES.METRICS);
+		onClose();
+	};
+
+	return (
+		<Drawer
+			width="70%"
+			title={
+				<>
+					<Divider type="vertical" />
+					<Typography.Text className="title">{host?.hostName}</Typography.Text>
+				</>
+			}
+			placement="right"
+			onClose={handleClose}
+			open={!!host}
+			style={{
+				overscrollBehavior: 'contain',
+				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
+			}}
+			className="host-detail-drawer"
+			destroyOnClose
+			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
+		>
+			{host && (
+				<>
+					<div className="host-detail-drawer__host">
+						<div className="host-details-grid">
+							<div className="labels-row">
+								<Typography.Text
+									type="secondary"
+									className="host-details-metadata-label"
+								>
+									STATUS
+								</Typography.Text>
+								<Typography.Text
+									type="secondary"
+									className="host-details-metadata-label"
+								>
+									OPERATING SYSTEM
+								</Typography.Text>
+								<Typography.Text
+									type="secondary"
+									className="host-details-metadata-label"
+								>
+									CPU USAGE
+								</Typography.Text>
+								<Typography.Text
+									type="secondary"
+									className="host-details-metadata-label"
+								>
+									MEMORY USAGE
+								</Typography.Text>
+							</div>
+
+							<div className="values-row">
+								<Tag
+									bordered
+									className={`infra-monitoring-tags ${
+										host.active ? 'active' : 'inactive'
+									}`}
+								>
+									{host.active ? 'ACTIVE' : 'INACTIVE'}
+								</Tag>
+								{host.os ? (
+									<Tag className="infra-monitoring-tags" bordered>
+										{host.os}
+									</Tag>
+								) : (
+									<Typography.Text>-</Typography.Text>
+								)}
+								<div className="progress-container">
+									<Progress
+										percent={Number((host.cpu * 100).toFixed(1))}
+										size="small"
+										strokeColor={((): string => {
+											const cpuPercent = Number((host.cpu * 100).toFixed(1));
+											if (cpuPercent >= 90) {
+												return Color.BG_SAKURA_500;
+											}
+											if (cpuPercent >= 60) {
+												return Color.BG_AMBER_500;
+											}
+											return Color.BG_FOREST_500;
+										})()}
+										className="progress-bar"
+									/>
+								</div>
+								<div className="progress-container">
+									<Progress
+										percent={Number((host.memory * 100).toFixed(1))}
+										size="small"
+										strokeColor={((): string => {
+											const memoryPercent = Number((host.memory * 100).toFixed(1));
+											if (memoryPercent >= 90) {
+												return Color.BG_CHERRY_500;
+											}
+											if (memoryPercent >= 60) {
+												return Color.BG_AMBER_500;
+											}
+											return Color.BG_FOREST_500;
+										})()}
+										className="progress-bar"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div className="views-tabs-container">
+						<Radio.Group
+							className="views-tabs"
+							onChange={handleTabChange}
+							value={selectedView}
+						>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.METRICS ? 'selected_view tab' : 'tab'
+								}
+								value={VIEW_TYPES.METRICS}
+							>
+								<div className="view-title">
+									<BarChart2 size={14} />
+									Metrics
+								</div>
+							</Radio.Button>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.LOGS ? 'selected_view tab' : 'tab'
+								}
+								value={VIEW_TYPES.LOGS}
+							>
+								<div className="view-title">
+									<ScrollText size={14} />
+									Logs
+								</div>
+							</Radio.Button>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.TRACES ? 'selected_view tab' : 'tab'
+								}
+								value={VIEW_TYPES.TRACES}
+							>
+								<div className="view-title">
+									<DraftingCompass size={14} />
+									Traces
+								</div>
+							</Radio.Button>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.CONTAINERS ? 'selected_view tab' : 'tab'
+								}
+								value={VIEW_TYPES.CONTAINERS}
+							>
+								<div className="view-title">
+									<Package2 size={14} />
+									Containers
+								</div>
+							</Radio.Button>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.PROCESSES ? 'selected_view tab' : 'tab'
+								}
+								value={VIEW_TYPES.PROCESSES}
+							>
+								<div className="view-title">
+									<ChevronsLeftRight size={14} />
+									Processes
+								</div>
+							</Radio.Button>
+						</Radio.Group>
+
+						{(selectedView === VIEW_TYPES.LOGS ||
+							selectedView === VIEW_TYPES.TRACES) && (
+							<Button
+								icon={<Compass size={18} />}
+								className="compass-button"
+								onClick={handleExplorePagesRedirect}
+							/>
+						)}
+					</div>
+
+					{selectedView === VIEW_TYPES.METRICS && (
+						<Metrics
+							selectedInterval={selectedInterval}
+							hostName={host.hostName}
+							timeRange={modalTimeRange}
+							handleTimeChange={handleTimeChange}
+							isModalTimeSelection={isModalTimeSelection}
+						/>
+					)}
+					{selectedView === VIEW_TYPES.LOGS && (
+						<HostMetricLogsDetailedView
+							timeRange={modalTimeRange}
+							isModalTimeSelection={isModalTimeSelection}
+							handleTimeChange={handleTimeChange}
+							handleChangeLogFilters={handleChangeLogFilters}
+							logFilters={logFilters}
+							selectedInterval={selectedInterval}
+						/>
+					)}
+					{selectedView === VIEW_TYPES.TRACES && (
+						<HostMetricTraces
+							timeRange={modalTimeRange}
+							isModalTimeSelection={isModalTimeSelection}
+							handleTimeChange={handleTimeChange}
+							handleChangeTracesFilters={handleChangeTracesFilters}
+							tracesFilters={tracesFilters}
+							selectedInterval={selectedInterval}
+						/>
+					)}
+
+					{selectedView === VIEW_TYPES.CONTAINERS && <Containers />}
+					{selectedView === VIEW_TYPES.PROCESSES && <Processes />}
+				</>
+			)}
+		</Drawer>
+	);
+}
+
+export default HostMetricsDetails;

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogs.styles.scss

@@ -0,0 +1,119 @@
+.host-metrics-logs-container {
+	margin-top: 1rem;
+
+	.filter-section {
+		flex: 1;
+
+		.ant-select-selector {
+			border-radius: 2px;
+			border: 1px solid var(--l1-border) !important;
+
+			input {
+				font-size: 12px;
+			}
+
+			.ant-tag .ant-typography {
+				font-size: 12px;
+			}
+		}
+	}
+
+	.host-metrics-logs-header {
+		display: flex;
+		justify-content: space-between;
+		gap: 8px;
+
+		padding: 12px;
+		border-radius: 3px;
+		border: 1px solid var(--l1-border);
+	}
+
+	.host-metrics-logs {
+		margin-top: 1rem;
+
+		.virtuoso-list {
+			overflow-y: hidden !important;
+
+			&::-webkit-scrollbar {
+				width: 0.3rem;
+				height: 0.3rem;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: transparent;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background: var(--l1-border);
+			}
+
+			&::-webkit-scrollbar-thumb:hover {
+				background: var(--l1-border);
+			}
+
+			.ant-row {
+				width: fit-content;
+			}
+		}
+
+		.skeleton-container {
+			height: 100%;
+			padding: 16px;
+		}
+	}
+}
+
+.host-metrics-logs-list-container {
+	flex: 1;
+	height: calc(100vh - 272px) !important;
+	display: flex;
+	height: 100%;
+
+	.raw-log-content {
+		width: 100%;
+		text-wrap: inherit;
+		word-wrap: break-word;
+	}
+}
+
+.host-metrics-logs-list-card {
+	width: 100%;
+	margin-top: 12px;
+
+	.ant-card-body {
+		padding: 0;
+
+		height: 100%;
+		width: 100%;
+	}
+}
+
+.logs-loading-skeleton {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	padding: 8px 0;
+
+	.ant-skeleton-input-sm {
+		height: 18px;
+	}
+}
+
+.no-logs-found {
+	height: 50vh;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	padding: 24px;
+	box-sizing: border-box;
+
+	.ant-typography {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+	}
+}

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogsDetailedView.tsx

@@ -0,0 +1,100 @@
+import { useMemo } from 'react';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { VIEWS } from '../constants';
+import HostMetricsLogs from './HostMetricsLogs';
+
+import './HostMetricLogs.styles.scss';
+
+interface Props {
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	isModalTimeSelection: boolean;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+	handleChangeLogFilters: (value: IBuilderQuery['filters'], view: VIEWS) => void;
+	logFilters: IBuilderQuery['filters'];
+	selectedInterval: Time;
+}
+
+function HostMetricLogsDetailedView({
+	timeRange,
+	isModalTimeSelection,
+	handleTimeChange,
+	handleChangeLogFilters,
+	logFilters,
+	selectedInterval,
+}: Props): JSX.Element {
+	const { currentQuery } = useQueryBuilder();
+	const updatedCurrentQuery = useMemo(
+		() => ({
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: [
+					{
+						...currentQuery.builder.queryData[0],
+						dataSource: DataSource.LOGS,
+						aggregateOperator: 'noop',
+						aggregateAttribute: {
+							...currentQuery.builder.queryData[0].aggregateAttribute,
+						},
+						filters: {
+							items:
+								logFilters?.items?.filter((item) => item.key?.key !== 'host.name') ||
+								[],
+							op: 'AND',
+						},
+					},
+				],
+			},
+		}),
+		[currentQuery, logFilters?.items],
+	);
+
+	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
+
+	return (
+		<div className="host-metrics-logs-container">
+			<div className="host-metrics-logs-header">
+				<div className="filter-section">
+					{query && (
+						<QueryBuilderSearch
+							query={query as IBuilderQuery}
+							onChange={(value): void => handleChangeLogFilters(value, VIEWS.LOGS)}
+							disableNavigationShortcuts
+						/>
+					)}
+				</div>
+				<div className="datetime-section">
+					<DateTimeSelectionV2
+						showAutoRefresh
+						showRefreshText={false}
+						hideShareModal
+						isModalTimeSelection={isModalTimeSelection}
+						onTimeChange={handleTimeChange}
+						defaultRelativeTime="5m"
+						modalSelectedInterval={selectedInterval}
+						modalInitialStartTime={timeRange.startTime * 1000}
+						modalInitialEndTime={timeRange.endTime * 1000}
+					/>
+				</div>
+			</div>
+			<HostMetricsLogs timeRange={timeRange} filters={logFilters} />
+		</div>
+	);
+}
+
+export default HostMetricLogsDetailedView;

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useQuery } from 'react-query';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { Card } from 'antd';
+import LogDetail from 'components/LogDetail';
+import RawLogView from 'components/Logs/RawLogView';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import LogsError from 'container/LogsError/LogsError';
+import { LogsLoading } from 'container/LogsLoading/LogsLoading';
+import { FontSize } from 'container/OptionsMenu/types';
+import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { ILog } from 'types/api/logs/log';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getHostLogsQueryPayload } from './constants';
+import NoLogsContainer from './NoLogsContainer';
+
+import './HostMetricLogs.styles.scss';
+
+interface Props {
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	filters: IBuilderQuery['filters'];
+}
+
+function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
+	const virtuosoRef = useRef<VirtuosoHandle>(null);
+	const {
+		activeLog,
+		onAddToQuery,
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
+
+	const basePayload = getHostLogsQueryPayload(
+		timeRange.startTime,
+		timeRange.endTime,
+		filters,
+	);
+	const {
+		logs,
+		hasReachedEndOfLogs,
+		isPaginating,
+		currentPage,
+		setIsPaginating,
+		handleNewData,
+		loadMoreLogs,
+		queryPayload,
+	} = useHandleLogsPagination({
+		timeRange,
+		filters,
+		excludeFilterKeys: ['host.name'],
+		basePayload,
+	});
+
+	const { data, isLoading, isFetching, isError } = useQuery({
+		queryKey: [
+			'hostMetricsLogs',
+			timeRange.startTime,
+			timeRange.endTime,
+			filters,
+			currentPage,
+		],
+		queryFn: () => GetMetricQueryRange(queryPayload, DEFAULT_ENTITY_VERSION),
+		enabled: !!queryPayload,
+		keepPreviousData: isPaginating,
+	});
+
+	useEffect(() => {
+		if (data?.payload?.data?.newResult?.data?.result) {
+			handleNewData(data.payload.data.newResult.data.result);
+		}
+	}, [data, handleNewData]);
+
+	useEffect(() => {
+		setIsPaginating(false);
+	}, [data, setIsPaginating]);
+
+	const handleScrollToLog = useScrollToLog({
+		logs,
+		virtuosoRef,
+	});
+
+	const getItemContent = useCallback(
+		(_: number, logToRender: ILog): JSX.Element => {
+			return (
+				<div key={logToRender.id}>
+					<RawLogView
+						isTextOverflowEllipsisDisabled
+						data={logToRender}
+						linesPerRow={5}
+						fontSize={FontSize.MEDIUM}
+						selectedFields={[
+							{
+								dataType: 'string',
+								type: '',
+								name: 'body',
+							},
+							{
+								dataType: 'string',
+								type: '',
+								name: 'timestamp',
+							},
+						]}
+						onSetActiveLog={handleSetActiveLog}
+						onClearActiveLog={handleCloseLogDetail}
+						isActiveLog={activeLog?.id === logToRender.id}
+					/>
+				</div>
+			);
+		},
+		[activeLog, handleSetActiveLog, handleCloseLogDetail],
+	);
+
+	const renderFooter = useCallback(
+		(): JSX.Element | null => (
+			<>
+				{isFetching ? (
+					<div className="logs-loading-skeleton"> Loading more logs ... </div>
+				) : hasReachedEndOfLogs ? (
+					<div className="logs-loading-skeleton"> *** End *** </div>
+				) : null}
+			</>
+		),
+		[isFetching, hasReachedEndOfLogs],
+	);
+
+	const renderContent = useMemo(
+		() => (
+			<Card bordered={false} className="host-metrics-logs-list-card">
+				<OverlayScrollbar isVirtuoso>
+					<Virtuoso
+						className="host-metrics-logs-virtuoso"
+						key="host-metrics-logs-virtuoso"
+						ref={virtuosoRef}
+						data={logs}
+						endReached={loadMoreLogs}
+						totalCount={logs.length}
+						itemContent={getItemContent}
+						overscan={200}
+						components={{
+							Footer: renderFooter,
+						}}
+					/>
+				</OverlayScrollbar>
+			</Card>
+		),
+		[logs, loadMoreLogs, getItemContent, renderFooter],
+	);
+
+	return (
+		<div className="host-metrics-logs">
+			{isLoading && <LogsLoading />}
+			{!isLoading && !isError && logs.length === 0 && <NoLogsContainer />}
+			{isError && !isLoading && <LogsError />}
+			{!isLoading && !isError && logs.length > 0 && (
+				<div
+					className="host-metrics-logs-list-container"
+					data-log-detail-ignore="true"
+				>
+					{renderContent}
+				</div>
+			)}
+			{selectedTab && activeLog && (
+				<LogDetail
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					logs={logs}
+					onNavigateLog={handleSetActiveLog}
+					selectedTab={selectedTab}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					onScrollToLog={handleScrollToLog}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default HostMetricsLogs;

frontend/src/components/HostMetricsDetail/HostMetricsLogs/NoLogsContainer.tsx

@@ -0,0 +1,16 @@
+import { Color } from '@signozhq/design-tokens';
+import { Typography } from 'antd';
+import { Ghost } from 'lucide-react';
+
+const { Text } = Typography;
+
+export default function NoLogsContainer(): React.ReactElement {
+	return (
+		<div className="no-logs-found">
+			<Text type="secondary">
+				<Ghost size={24} color={Color.BG_AMBER_500} /> No logs found for this host
+				in the selected time range.
+			</Text>
+		</div>
+	);
+}

frontend/src/components/HostMetricsDetail/HostMetricsLogs/constants.ts

@@ -0,0 +1,61 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
+import { v4 as uuidv4 } from 'uuid';
+
+export const getHostLogsQueryPayload = (
+	start: number,
+	end: number,
+	filters: IBuilderQuery['filters'],
+): GetQueryResultsProps => ({
+	graphType: PANEL_TYPES.LIST,
+	selectedTime: 'GLOBAL_TIME',
+	query: {
+		clickhouse_sql: [],
+		promql: [],
+		builder: {
+			queryData: [
+				{
+					dataSource: DataSource.LOGS,
+					queryName: 'A',
+					aggregateOperator: 'noop',
+					aggregateAttribute: {
+						id: '------false',
+						dataType: DataTypes.String,
+						key: '',
+						type: '',
+					},
+					timeAggregation: 'rate',
+					spaceAggregation: 'sum',
+					functions: [],
+					filters,
+					expression: 'A',
+					disabled: false,
+					stepInterval: 60,
+					having: [],
+					limit: null,
+					orderBy: [
+						{
+							columnName: 'timestamp',
+							order: 'desc',
+						},
+					],
+					groupBy: [],
+					legend: '',
+					reduceTo: ReduceOperators.AVG,
+					offset: 0,
+					pageSize: 100,
+				},
+			],
+			queryFormulas: [],
+			queryTraceOperator: [],
+		},
+		id: uuidv4(),
+		queryType: EQueryType.QUERY_BUILDER,
+	},
+	start,
+	end,
+});

frontend/src/components/HostMetricsDetail/Metrics/Metrics.styles.scss

@@ -0,0 +1,45 @@
+.empty-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+}
+
+.host-metrics-container {
+	margin-top: 1rem;
+}
+
+.metrics-header {
+	display: flex;
+	justify-content: flex-end;
+	margin-top: 1rem;
+
+	gap: 8px;
+	padding: 12px;
+	border-radius: 3px;
+	border: 1px solid var(--l1-border);
+}
+
+.host-metrics-card {
+	margin: 8px 0 1rem 0;
+	height: 300px;
+	padding: 10px;
+
+	border: 1px solid var(--l1-border);
+
+	.ant-card-body {
+		padding: 0;
+	}
+
+	.chart-container {
+		width: 100%;
+		height: 100%;
+	}
+
+	.no-data-container {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+}

frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx

@@ -0,0 +1,233 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { QueryFunctionContext, useQueries, UseQueryResult } from 'react-query';
+import { Card, Col, Row, Skeleton, Typography } from 'antd';
+import cx from 'classnames';
+import Uplot from 'components/Uplot';
+import { ENTITY_VERSION_V4 } from 'constants/app';
+import {
+	getHostQueryPayload,
+	hostWidgetInfo,
+} from 'container/LogDetailedView/InfraMetrics/constants';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { useMultiIntersectionObserver } from 'hooks/useMultiIntersectionObserver';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
+
+import './Metrics.styles.scss';
+
+interface MetricsTabProps {
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	isModalTimeSelection: boolean;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+	selectedInterval: Time;
+
+	hostName: string;
+}
+
+function Metrics({
+	selectedInterval,
+	hostName,
+	timeRange,
+	handleTimeChange,
+	isModalTimeSelection,
+}: MetricsTabProps): JSX.Element {
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
+	const {
+		visibilities,
+		setElement,
+	} = useMultiIntersectionObserver(hostWidgetInfo.length, { threshold: 0.1 });
+
+	const legendScrollPositionRef = useRef<{
+		scrollTop: number;
+		scrollLeft: number;
+	}>({
+		scrollTop: 0,
+		scrollLeft: 0,
+	});
+
+	const queryPayloads = useMemo(
+		() =>
+			getHostQueryPayload(
+				hostName,
+				timeRange.startTime,
+				timeRange.endTime,
+				dotMetricsEnabled,
+			),
+		[hostName, timeRange.startTime, timeRange.endTime, dotMetricsEnabled],
+	);
+
+	const queries = useQueries(
+		queryPayloads.map((payload, index) => ({
+			queryKey: ['host-metrics', payload, ENTITY_VERSION_V4, 'HOST'],
+			queryFn: ({
+				signal,
+			}: QueryFunctionContext): Promise<
+				SuccessResponse<MetricRangePayloadProps>
+			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, undefined, signal),
+			enabled: !!payload && visibilities[index],
+			keepPreviousData: true,
+		})),
+	);
+
+	const isDarkMode = useIsDarkMode();
+	const graphRef = useRef<HTMLDivElement>(null);
+	const dimensions = useResizeObserver(graphRef);
+	const { currentQuery } = useQueryBuilder();
+
+	const chartData = useMemo(
+		() => queries.map(({ data }) => getUPlotChartData(data?.payload)),
+		[queries],
+	);
+
+	const [graphTimeIntervals, setGraphTimeIntervals] = useState<
+		{
+			start: number;
+			end: number;
+		}[]
+	>(
+		new Array(queries.length).fill({
+			start: timeRange.startTime,
+			end: timeRange.endTime,
+		}),
+	);
+
+	useEffect(() => {
+		setGraphTimeIntervals(
+			new Array(queries.length).fill({
+				start: timeRange.startTime,
+				end: timeRange.endTime,
+			}),
+		);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [timeRange]);
+
+	const onDragSelect = useCallback(
+		(start: number, end: number, graphIndex: number) => {
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			setGraphTimeIntervals((prev) => {
+				const newIntervals = [...prev];
+				newIntervals[graphIndex] = {
+					start: Math.floor(startTimestamp / 1000),
+					end: Math.floor(endTimestamp / 1000),
+				};
+				return newIntervals;
+			});
+		},
+		[],
+	);
+
+	const options = useMemo(
+		() =>
+			queries.map(({ data }, idx) =>
+				getUPlotChartOptions({
+					apiResponse: data?.payload,
+					isDarkMode,
+					dimensions,
+					yAxisUnit: hostWidgetInfo[idx].yAxisUnit,
+					softMax: null,
+					softMin: null,
+					minTimeScale: graphTimeIntervals[idx].start,
+					maxTimeScale: graphTimeIntervals[idx].end,
+					onDragSelect: (start, end) => onDragSelect(start, end, idx),
+					query: currentQuery,
+					legendScrollPosition: legendScrollPositionRef.current,
+					setLegendScrollPosition: (position: {
+						scrollTop: number;
+						scrollLeft: number;
+					}) => {
+						legendScrollPositionRef.current = position;
+					},
+				}),
+			),
+		[
+			queries,
+			isDarkMode,
+			dimensions,
+			graphTimeIntervals,
+			onDragSelect,
+			currentQuery,
+		],
+	);
+
+	const renderCardContent = (
+		query: UseQueryResult<SuccessResponse<MetricRangePayloadProps>, unknown>,
+		idx: number,
+	): JSX.Element => {
+		if ((!query.data && query.isLoading) || !visibilities[idx]) {
+			return <Skeleton />;
+		}
+
+		if (query.error) {
+			const errorMessage =
+				(query.error as Error)?.message || 'Something went wrong';
+			return <div>{errorMessage}</div>;
+		}
+		return (
+			<div
+				className={cx('chart-container', {
+					'no-data-container':
+						!query.isLoading && !query?.data?.payload?.data?.result?.length,
+				})}
+			>
+				<Uplot options={options[idx]} data={chartData[idx]} />
+			</div>
+		);
+	};
+
+	return (
+		<>
+			<div className="metrics-header">
+				<div className="metrics-datetime-section">
+					<DateTimeSelectionV2
+						showAutoRefresh
+						showRefreshText={false}
+						hideShareModal
+						onTimeChange={handleTimeChange}
+						defaultRelativeTime="5m"
+						isModalTimeSelection={isModalTimeSelection}
+						modalSelectedInterval={selectedInterval}
+						modalInitialStartTime={timeRange.startTime * 1000}
+						modalInitialEndTime={timeRange.endTime * 1000}
+					/>
+				</div>
+			</div>
+			<Row gutter={24} className="host-metrics-container">
+				{queries.map((query, idx) => (
+					<Col ref={setElement(idx)} span={12} key={hostWidgetInfo[idx].title}>
+						<Typography.Text>{hostWidgetInfo[idx].title}</Typography.Text>
+						<Card bordered className="host-metrics-card" ref={graphRef}>
+							{renderCardContent(query, idx)}
+						</Card>
+					</Col>
+				))}
+			</Row>
+		</>
+	);
+}
+
+export default Metrics;

frontend/src/components/HostMetricsDetail/Processes/Processes.tsx

@@ -1,15 +1,16 @@
 import { useTranslation } from 'react-i18next';
 import { Space, Typography } from 'antd';
-import WaitlistFragment from 'components/HostMetricsDetail/WaitlistFragment/WaitlistFragment';
 
 import broomUrl from '@/assets/Icons/broom.svg';
 import infraContainersUrl from '@/assets/Icons/infraContainers.svg';
 
-import 'components/HostMetricsDetail/Processes/Processes.styles.scss';
+import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';
+
+import './Processes.styles.scss';
 
 const { Text } = Typography;
 
-function EntityProcesses(): JSX.Element {
+function Processes(): JSX.Element {
 	const { t } = useTranslation(['infraMonitoring']);
 
 	return (
@@ -42,4 +43,4 @@ function EntityProcesses(): JSX.Element {
 	);
 }
 
-export default EntityProcesses;
+export default Processes;

frontend/src/components/HostMetricsDetail/constants.ts

@@ -0,0 +1,17 @@
+export enum VIEWS {
+	METRICS = 'metrics',
+	LOGS = 'logs',
+	TRACES = 'traces',
+	CONTAINERS = 'containers',
+	PROCESSES = 'processes',
+	EVENTS = 'events',
+}
+
+export const VIEW_TYPES = {
+	METRICS: VIEWS.METRICS,
+	LOGS: VIEWS.LOGS,
+	TRACES: VIEWS.TRACES,
+	CONTAINERS: VIEWS.CONTAINERS,
+	PROCESSES: VIEWS.PROCESSES,
+	EVENTS: VIEWS.EVENTS,
+};

frontend/src/components/HostMetricsDetail/index.tsx

@@ -0,0 +1,3 @@
+import HostMetricsDetails from './HostMetricsDetails';
+
+export default HostMetricsDetails;

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

@@ -5,6 +5,7 @@
 	border-radius: 2px 0px 0px 2px;
 
 	.label {
+		color: var(--l2-foreground);
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 500;
@@ -20,9 +21,8 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
-		color: var(--l2-foreground);
+		border: 1px solid var(--l1-border);
+		background: var(--l3-background);
 
 		display: flex;
 		justify-content: flex-start;
@@ -37,7 +37,6 @@
 
 		border-radius: 2px 0px 0px 2px;
 		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
 
 		border-right: none;
 		border-left: none;
@@ -47,7 +46,6 @@
 		border-bottom-left-radius: 0px;
 		font-size: 12px !important;
 		line-height: 27px;
-
 		&::placeholder {
 			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
@@ -63,8 +61,8 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--l2-border);
-		background: var(--l2-background);
+		border: 1px solid var(--l1-border);
+		background: var(--l3-background);
 		height: 38px;
 		width: 38px;
 	}
@@ -73,7 +71,7 @@
 		.input {
 			border-radius: 0px 2px 2px 0px;
 			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
+			background: var(--l3-background);
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
 		}

frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss

@@ -181,7 +181,7 @@
 	box-shadow: none;
 
 	&:hover {
-		background: color-mix(in srgb, var(--danger-background) 10%, transparent);
+		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
 		opacity: 0.9;
 	}
 }
@@ -196,16 +196,12 @@
 }
 
 .invite-team-members-error-callout {
-	background: color-mix(in srgb, var(--danger-background) 10%, transparent);
-	border: 1px solid color-mix(in srgb, var(--danger-background) 20%, transparent);
+	background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
+	border: 1px solid color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
 	border-radius: 4px;
 	animation: horizontal-shaking 300ms ease-out;
 }
 
-.invite-members-modal__error-callout {
-	display: flex;
-}
-
 @keyframes horizontal-shaking {
 	0% {
 		transform: translateX(0);

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -1,14 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
 import { Style } from '@signozhq/design-tokens';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { ChevronDown, CircleAlert, Plus, Trash2, X } from '@signozhq/icons';
-import {
-	Button,
-	Callout,
-	DialogFooter,
-	DialogWrapper,
-	Input,
-	toast,
-} from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { toast } from '@signozhq/ui';
 import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
@@ -203,7 +200,10 @@ function InviteMembersModal({
 					})),
 				});
 			}
-			toast.success('Invites sent successfully', { position: 'top-right' });
+			toast.success('Invites sent successfully', {
+				richColors: true,
+				position: 'top-right',
+			});
 			resetAndClose();
 			onComplete?.();
 		} catch (err) {
@@ -274,6 +274,7 @@ function InviteMembersModal({
 											<Button
 												variant="ghost"
 												color="destructive"
+												className="remove-team-member-button"
 												onClick={(): void => removeRow(row.id)}
 												aria-label="Remove row"
 											>
@@ -288,16 +289,14 @@ function InviteMembersModal({
 				</div>
 
 				{(hasInvalidEmails || hasInvalidRoles) && (
-					<div className="invite-members-modal__error-callout">
-						<Callout
-							type="error"
-							size="small"
-							showIcon
-							icon={<CircleAlert size={12} />}
-						>
-							{getValidationErrorMessage()}
-						</Callout>
-					</div>
+					<Callout
+						type="error"
+						size="small"
+						showIcon
+						icon={<CircleAlert size={12} />}
+						className="invite-team-members-error-callout"
+						description={getValidationErrorMessage()}
+					/>
 				)}
 			</div>
 
@@ -305,8 +304,9 @@ function InviteMembersModal({
 				<Button
 					variant="dashed"
 					color="secondary"
+					size="sm"
 					className="add-another-member-button"
-					prefix={<Plus size={12} color={Style.L1_FOREGROUND} />}
+					prefixIcon={<Plus size={12} color={Style.L1_FOREGROUND} />}
 					onClick={addRow}
 				>
 					Add another
@@ -317,6 +317,7 @@ function InviteMembersModal({
 						type="button"
 						variant="solid"
 						color="secondary"
+						size="sm"
 						onClick={resetAndClose}
 					>
 						<X size={12} />
@@ -326,6 +327,7 @@ function InviteMembersModal({
 					<Button
 						variant="solid"
 						color="primary"
+						size="sm"
 						onClick={handleSubmit}
 						disabled={isSubmitDisabled}
 						loading={isSubmitting}

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

@@ -110,7 +110,7 @@
 			}
 
 			&.ERROR {
-				border-color: var(--danger-background);
+				border-color: var(--bg-cherry-500);
 			}
 		}
 

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

@@ -94,7 +94,7 @@
 			background-color: var(--bg-cherry-600);
 		}
 		&.severity-error-1 {
-			background-color: var(--danger-background);
+			background-color: var(--bg-cherry-500);
 		}
 		&.severity-error-2 {
 			background-color: var(--bg-cherry-400);

frontend/src/components/MembersTable/MembersTable.styles.scss

@@ -21,7 +21,7 @@
 	.ant-table-thead {
 		> tr > th,
 		> tr > td {
-			background: var(--l1-background);
+			background: var(--background);
 			font-size: var(--paragraph-small-600-font-size);
 			font-weight: var(--paragraph-small-600-font-weight);
 			line-height: var(--paragraph-small-600-line-height);

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -1445,22 +1445,11 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 	// Custom dropdown render with sections support
 	const customDropdownRender = useCallback((): React.ReactElement => {
-		// When ALL is selected and the options contain sections (groups),
-		// skip prioritization so section headers (e.g. "Related values" /
-		// "All values") remain visible instead of being collapsed away by
-		// every option getting hoisted to the top. For flat option lists we
-		// still prioritize so selected/synthesized values stay rendered.
-		const hasSections = filteredOptions.some(
-			(opt) => 'options' in opt && Array.isArray(opt.options),
-		);
-		const shouldPrioritize =
-			selectedValues.length > 0 &&
-			isEmpty(searchText) &&
-			!(hasSections && (allOptionShown || isAllSelected));
-
-		const processedOptions = shouldPrioritize
-			? prioritizeOrAddOptionForMultiSelect(filteredOptions, selectedValues)
-			: filteredOptions;
+		// Process options based on current search
+		const processedOptions =
+			selectedValues.length > 0 && isEmpty(searchText)
+				? prioritizeOrAddOptionForMultiSelect(filteredOptions, selectedValues)
+				: filteredOptions;
 
 		const { sectionOptions, nonSectionOptions } = splitOptions(processedOptions);
 
@@ -1758,8 +1747,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	}, [
 		selectedValues,
 		searchText,
-		allOptionShown,
-		isAllSelected,
 		filteredOptions,
 		splitOptions,
 		isLabelPresent,

frontend/src/components/NewSelect/__test__/CustomMultiSelect.test.tsx

@@ -6,7 +6,6 @@ import {
 	screen,
 	waitFor,
 } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 import CustomMultiSelect from '../CustomMultiSelect';
 
@@ -284,68 +283,4 @@ describe('CustomMultiSelect Component', () => {
 		// When all options are selected, component shows ALL tag instead
 		expect(screen.getByText('ALL')).toBeInTheDocument();
 	});
-
-	describe('section visibility when ALL is selected', () => {
-		it('keeps group headers visible when every grouped value is selected', async () => {
-			const user = userEvent.setup();
-			renderWithVirtuoso(
-				<CustomMultiSelect
-					options={mockGroupedOptions}
-					value={['g1-option1', 'g1-option2', 'g2-option1', 'g2-option2']}
-				/>,
-			);
-
-			await user.click(screen.getByRole('combobox'));
-
-			await waitFor(() => {
-				expect(screen.getByText('Group 1')).toBeInTheDocument();
-				expect(screen.getByText('Group 2')).toBeInTheDocument();
-			});
-		});
-
-		it('keeps every grouped option visible within its section when all are selected', async () => {
-			const user = userEvent.setup();
-			renderWithVirtuoso(
-				<CustomMultiSelect
-					options={mockGroupedOptions}
-					value={['g1-option1', 'g1-option2', 'g2-option1', 'g2-option2']}
-				/>,
-			);
-
-			await user.click(screen.getByRole('combobox'));
-
-			await waitFor(() => {
-				const group1Region = screen.getByRole('group', {
-					name: 'Group 1 options',
-				});
-				const group2Region = screen.getByRole('group', {
-					name: 'Group 2 options',
-				});
-
-				// Each option stays inside its original section rather than being
-				// hoisted into a flat selected-first list.
-				expect(group1Region).toHaveTextContent('Group 1 - Option 1');
-				expect(group1Region).toHaveTextContent('Group 1 - Option 2');
-				expect(group2Region).toHaveTextContent('Group 2 - Option 1');
-				expect(group2Region).toHaveTextContent('Group 2 - Option 2');
-			});
-		});
-
-		it('keeps group headers visible when value is the ALL sentinel', async () => {
-			const user = userEvent.setup();
-			renderWithVirtuoso(
-				<CustomMultiSelect
-					options={mockGroupedOptions}
-					value={('__ALL__' as unknown) as string[]}
-				/>,
-			);
-
-			await user.click(screen.getByRole('combobox'));
-
-			await waitFor(() => {
-				expect(screen.getByText('Group 1')).toBeInTheDocument();
-				expect(screen.getByText('Group 2')).toBeInTheDocument();
-			});
-		});
-	});
 });

frontend/src/components/NewSelect/styles.scss

@@ -355,7 +355,7 @@ $custom-border-color: #2c3044;
 	.navigation-error {
 		.navigation-text,
 		.navigation-icons {
-			color: var(--danger-background) !important;
+			color: var(--bg-cherry-500) !important;
 		}
 		display: flex;
 		align-items: center;

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

@@ -1,5 +1,3 @@
-// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
-
 .query-builder-v2 {
 	display: flex;
 	flex-direction: row;
@@ -276,7 +274,7 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(--l2-background);
+						background: var(--l3-background);
 						color: var(--l2-foreground);
 						font-size: 12px;
 						font-weight: 300;

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

@@ -50,8 +50,8 @@ const havingOperators = [
 		value: 'IN',
 	},
 	{
-		label: 'NOT IN',
-		value: 'NOT IN',
+		label: 'NOT_IN',
+		value: 'NOT_IN',
 	},
 ];
 
@@ -129,7 +129,7 @@ function HavingFilter({
 				const operator = havingOperators[j];
 				newOptions.push({
 					label: `${opt.func}(${opt.arg}) ${operator.label}`,
-					value: `${opt.func}(${opt.arg}) ${operator.value} `,
+					value: `${opt.func}(${opt.arg}) ${operator.label} `,
 					apply: (
 						view: EditorView,
 						completion: { label: string; value: string },

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

@@ -1,5 +1,3 @@
-// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
-
 .query-add-ons {
 	width: 100%;
 }
@@ -104,7 +102,7 @@
 					border-top-right-radius: 0px;
 					border-bottom-right-radius: 0px;
 					padding: 0px !important;
-					background-color: var(--l2-background) !important;
+					background-color: var(--card) !important;
 
 					&:focus-within {
 						border-color: var(--l1-border);
@@ -213,7 +211,7 @@
 				.cm-line {
 					line-height: 36px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(--l2-background) !important;
+					background-color: var(--card) !important;
 
 					::-moz-selection {
 						background: var(--l3-background) !important;
@@ -251,8 +249,8 @@
 
 		.close-btn {
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l2-border);
-			background: var(--l2-background);
+			border: 1px solid var(--l1-border);
+			background: var(--l3-background);
 			height: 38px;
 			width: 38px;
 
@@ -286,3 +284,108 @@
 		}
 	}
 }
+
+.lightMode {
+	.add-ons-list {
+		.add-ons-tabs {
+			.add-on-tab-title {
+				color: var(--l1-foreground) !important;
+			}
+
+			.tab {
+				border: 1px solid var(--l1-border) !important;
+				background: var(--l1-background) !important;
+
+				&:first-child {
+					border-left: 1px solid var(--l1-border) !important;
+				}
+			}
+
+			.tab::before {
+				background: var(--l3-background) !important;
+			}
+
+			.selected-view {
+				color: var(--primary-background) !important;
+				border: 1px solid var(--l1-border) !important;
+			}
+
+			.selected-view::before {
+				background: var(--l3-background) !important;
+			}
+		}
+
+		.compass-button {
+			border: 1px solid var(--l1-border) !important;
+			background: var(--l1-background) !important;
+		}
+	}
+
+	.having-filter-container {
+		.having-filter-select-container {
+			.having-filter-select-editor {
+				.cm-editor {
+					&:focus-within {
+						border-color: var(--l1-border) !important;
+					}
+
+					.cm-content {
+						border: 1px solid var(--l1-border) !important;
+						background: var(--l1-background) !important;
+
+						&:focus-within {
+							border-color: var(--l1-border) !important;
+						}
+					}
+
+					.cm-tooltip-autocomplete {
+						background: var(--l1-background) !important;
+						border: 1px solid var(--l1-border) !important;
+						color: var(--l1-foreground) !important;
+						box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+
+						ul {
+							li {
+								color: var(--l1-foreground) !important;
+								&:hover {
+									background: var(--l3-background) !important;
+								}
+
+								&[aria-selected='true'] {
+									background: var(--l3-background) !important;
+									font-weight: 600 !important;
+								}
+							}
+						}
+					}
+
+					.cm-line {
+						background-color: var(--l1-background) !important;
+
+						::-moz-selection {
+							background: var(--l1-background) !important;
+						}
+
+						::selection {
+							background: var(--l3-background) !important;
+						}
+
+						.chip-decorator {
+							background: var(--l3-background) !important;
+							color: var(--l1-foreground) !important;
+						}
+					}
+
+					.cm-selectionBackground {
+						background: var(--l1-background) !important;
+					}
+				}
+			}
+
+			.close-btn {
+				border: 1px solid var(--l1-border) !important;
+				background: var(--l1-background) !important;
+			}
+		}
+	}
+}

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

@@ -1,5 +1,3 @@
-// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
-
 .query-aggregation-container {
 	display: block;
 
@@ -28,7 +26,7 @@
 				&.error {
 					.cm-editor {
 						.cm-content {
-							border-color: var(--danger-background) !important;
+							border-color: var(--bg-cherry-500) !important;
 						}
 					}
 				}
@@ -142,7 +140,7 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(--l2-background) !important;
+						background-color: var(--l1-background) !important;
 
 						::-moz-selection {
 							background: var(--l3-background) !important;
@@ -186,7 +184,7 @@
 					max-width: 300px;
 
 					.query-aggregation-error-message {
-						color: var(--danger-background);
+						color: var(--bg-cherry-500);
 						font-size: 12px;
 						line-height: 16px;
 					}
@@ -198,7 +196,6 @@
 					min-width: auto;
 				}
 			}
-
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
 				border: 1px solid var(--l1-border);
@@ -273,7 +270,7 @@
 
 						.cm-line {
 							::-moz-selection {
-								background: var(--l2-background) !important;
+								background: var(--l1-background) !important;
 								opacity: 0.5 !important;
 							}
 

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

@@ -1,5 +1,3 @@
-// TODO: Improve the styling of the query aggregation container and its components. - @YounixM , @H4ad
-
 .code-mirror-where-clause {
 	width: 100%;
 	display: flex;
@@ -32,7 +30,7 @@
 			border-left: none !important;
 
 			&.hasErrors {
-				border-color: var(--danger-background);
+				border-color: var(--bg-cherry-500);
 			}
 		}
 	}
@@ -41,7 +39,7 @@
 		&.hasErrors {
 			.cm-editor {
 				.cm-content {
-					border-color: var(--danger-background);
+					border-color: var(--bg-cherry-500);
 					border-top-right-radius: 0px !important;
 					border-bottom-right-radius: 0px !important;
 				}
@@ -158,7 +156,7 @@
 		.cm-line {
 			line-height: 34px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(--l2-background) !important;
+			background-color: var(--l1-background) !important;
 
 			::-moz-selection {
 				background: var(--l3-background) !important;
@@ -213,7 +211,7 @@
 
 		.invalid {
 			background-color: color-mix(in srgb, var(--bg-cherry-400) 10%, transparent);
-			color: var(--danger-background);
+			color: var(--bg-cherry-500);
 		}
 
 		.query-validation-status {
@@ -234,7 +232,7 @@
 
 				font-size: 12px;
 				font-family: 'Space Mono', monospace !important;
-				color: var(--danger-background);
+				color: var(--bg-cherry-500);
 				padding: 8px;
 			}
 		}
@@ -456,3 +454,30 @@
 		margin-top: -6px !important;
 	}
 }
+
+.lightMode {
+	.code-mirror-where-clause {
+		.cm-editor {
+			.cm-tooltip-autocomplete {
+				background: var(--l1-background) !important;
+				border: 1px solid var(--l1-border);
+				backdrop-filter: blur(20px);
+				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+			}
+
+			.cm-line {
+				::-moz-selection {
+					background: var(--bg-robin-200) !important;
+				}
+
+				::selection {
+					background: var(--bg-robin-200) !important;
+				}
+			}
+
+			.cm-selectionBackground {
+				background: var(--bg-robin-200) !important;
+			}
+		}
+	}
+}

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

@@ -177,7 +177,7 @@
 	width: 2px;
 	height: 11px;
 	border-radius: 2px;
-	background: var(--danger-background);
+	background: var(--bg-cherry-500);
 }
 
 .label-true {

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

@@ -158,12 +158,12 @@
 
 	mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
+		color-mix(in srgb, var(--background) 10%, transparent) 0,
 		transparent 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--l1-background) 10%, transparent) 0,
+		color-mix(in srgb, var(--background) 10%, transparent) 0,
 		transparent 100%
 	);
 }

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -11,7 +11,7 @@ import {
 	ComboboxItem,
 	ComboboxList,
 	ComboboxTrigger,
-} from '@signozhq/ui';
+} from '@signozhq/combobox';
 import { Skeleton, Switch, Tooltip, Typography } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
@@ -200,6 +200,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 												setOpen(false);
 											}}
 											isSelected={validQueryIndex === option.value}
+											showCheck={false}
 										>
 											{option.label}
 										</ComboboxItem>

frontend/src/components/ServiceAccountDrawer/AddKeyModal/AddKeyModal.styles.scss

@@ -17,7 +17,7 @@
 	}
 
 	&__label {
-		font-size: var(--font-size-xs);
+		font-size: var(--font-size-sm);
 		font-weight: var(--font-weight-normal);
 		color: var(--foreground);
 		line-height: var(--line-height-20);
@@ -142,10 +142,6 @@
 		gap: var(--spacing-2);
 	}
 
-	&__callout-wrapper {
-		display: flex;
-	}
-
 	&__expiry-label {
 		font-size: var(--font-size-xs);
 		font-weight: var(--font-weight-medium);

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

@@ -1,5 +1,7 @@
+import { Button } from '@signozhq/button';
+import { Callout } from '@signozhq/callout';
 import { Check, Copy } from '@signozhq/icons';
-import { Badge, Button, Callout } from '@signozhq/ui';
+import { Badge } from '@signozhq/ui';
 import type { ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO } from 'api/generated/services/sigNoz.schemas';
 
 export interface KeyCreatedPhaseProps {
@@ -38,13 +40,11 @@ function KeyCreatedPhase({
 				<Badge color="vanilla">{expiryLabel}</Badge>
 			</div>
 
-			<div className="add-key-modal__callout-wrapper">
-				<Callout
-					type="info"
-					showIcon
-					title="Store the key securely. This is the only time it will be displayed."
-				/>
-			</div>
+			<Callout
+				type="info"
+				showIcon
+				message="Store the key securely. This is the only time it will be displayed."
+			/>
 		</div>
 	);
 }

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

@@ -1,6 +1,8 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
-import { Button, Input, ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
+import { Button } from '@signozhq/button';
+import { Input } from '@signozhq/input';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
 import { DatePicker } from 'antd';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -54,12 +56,11 @@ function KeyFormPhase({
 							<ToggleGroup
 								type="single"
 								value={field.value}
-								onChange={(val): void => {
+								onValueChange={(val): void => {
 									if (val) {
 										field.onChange(val);
 									}
 								}}
-								size="sm"
 								className="add-key-modal__expiry-toggle"
 							>
 								<ToggleGroupItem
@@ -111,7 +112,6 @@ function KeyFormPhase({
 					</Button>
 					<Button
 						type="submit"
-						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 						form={FORM_ID}
 						variant="solid"
 						color="primary"

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

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
-import { DialogWrapper, toast } from '@signozhq/ui';
+import { DialogWrapper } from '@signozhq/dialog';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,
@@ -117,12 +118,12 @@ function AddKeyModal(): JSX.Element {
 		copyToClipboard(createdKey.key);
 		setHasCopied(true);
 		setTimeout(() => setHasCopied(false), 2000);
-		toast.success('Key copied to clipboard');
+		toast.success('Key copied to clipboard', { richColors: true });
 	}, [copyToClipboard, createdKey?.key]);
 
 	useEffect(() => {
 		if (copyState.error) {
-			toast.error('Failed to copy key');
+			toast.error('Failed to copy key', { richColors: true });
 		}
 	}, [copyState.error]);
 

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -1,6 +1,8 @@
 import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { Button, DialogWrapper, toast } from '@signozhq/ui';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getGetServiceAccountQueryKey,
@@ -40,7 +42,7 @@ function DeleteAccountModal(): JSX.Element {
 	} = useDeleteServiceAccount({
 		mutation: {
 			onSuccess: async () => {
-				toast.success('Service account deleted');
+				toast.success('Service account deleted', { richColors: true });
 				await setIsDeleteOpen(null);
 				await setAccountId(null);
 				await invalidateListServiceAccounts(queryClient);
@@ -68,32 +70,6 @@ function DeleteAccountModal(): JSX.Element {
 		setIsDeleteOpen(null);
 	}
 
-	const content = (
-		<p className="sa-delete-dialog__body">
-			Are you sure you want to delete <strong>{accountName}</strong>? This action
-			cannot be undone. All keys associated with this service account will be
-			permanently removed.
-		</p>
-	);
-
-	const footer = (
-		<div className="sa-delete-dialog__footer">
-			<Button variant="solid" color="secondary" onClick={handleCancel}>
-				<X size={12} />
-				Cancel
-			</Button>
-			<Button
-				variant="solid"
-				color="destructive"
-				loading={isDeleting}
-				onClick={handleConfirm}
-			>
-				<Trash2 size={12} />
-				Delete
-			</Button>
-		</div>
-	);
-
 	return (
 		<DialogWrapper
 			open={open}
@@ -107,9 +83,28 @@ function DeleteAccountModal(): JSX.Element {
 			className="alert-dialog sa-delete-dialog"
 			showCloseButton={false}
 			disableOutsideClick={isErrorModalVisible}
-			footer={footer}
 		>
-			{content}
+			<p className="sa-delete-dialog__body">
+				Are you sure you want to delete <strong>{accountName}</strong>? This action
+				cannot be undone. All keys associated with this service account will be
+				permanently removed.
+			</p>
+			<DialogFooter className="sa-delete-dialog__footer">
+				<Button variant="solid" color="secondary" size="sm" onClick={handleCancel}>
+					<X size={12} />
+					Cancel
+				</Button>
+				<Button
+					variant="solid"
+					color="destructive"
+					size="sm"
+					loading={isDeleting}
+					onClick={handleConfirm}
+				>
+					<Trash2 size={12} />
+					Delete
+				</Button>
+			</DialogFooter>
 		</DialogWrapper>
 	);
 }

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

@@ -1,13 +1,10 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
+import { Button } from '@signozhq/button';
 import { LockKeyhole, Trash2, X } from '@signozhq/icons';
-import {
-	Badge,
-	Button,
-	Input,
-	ToggleGroup,
-	ToggleGroupItem,
-} from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Badge } from '@signozhq/ui';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -75,12 +72,11 @@ function EditKeyForm({
 							<ToggleGroup
 								type="single"
 								value={field.value}
-								onChange={(val): void => {
+								onValueChange={(val): void => {
 									if (val) {
 										field.onChange(val);
 									}
 								}}
-								size="sm"
 								className="edit-key-modal__expiry-toggle"
 							>
 								<ToggleGroupItem
@@ -136,21 +132,25 @@ function EditKeyForm({
 			</form>
 
 			<div className="edit-key-modal__footer">
-				<Button variant="ghost" color="destructive" onClick={onRevokeClick}>
+				<Button
+					type="button"
+					className="edit-key-modal__footer-danger"
+					onClick={onRevokeClick}
+				>
 					<Trash2 size={12} />
 					Revoke Key
 				</Button>
 				<div className="edit-key-modal__footer-right">
-					<Button variant="solid" color="secondary" onClick={onClose}>
+					<Button variant="solid" color="secondary" size="sm" onClick={onClose}>
 						<X size={12} />
 						Cancel
 					</Button>
 					<Button
 						type="submit"
-						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 						form={FORM_ID}
 						variant="solid"
 						color="primary"
+						size="sm"
 						loading={isSaving}
 						disabled={!isDirty}
 					>

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyModal.styles.scss

@@ -138,7 +138,7 @@
 	&__meta {
 		display: flex;
 		flex-direction: column;
-		gap: var(--spacing-4);
+		gap: var(--spacing-2);
 	}
 
 	&__meta-label {

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

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
-import { DialogWrapper, toast } from '@signozhq/ui';
+import { DialogWrapper } from '@signozhq/dialog';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,
@@ -71,7 +72,7 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 	const { mutate: updateKey, isLoading: isSaving } = useUpdateServiceAccountKey({
 		mutation: {
 			onSuccess: async () => {
-				toast.success('Key updated successfully');
+				toast.success('Key updated successfully', { richColors: true });
 				await setEditKeyId(null);
 				if (selectedAccountId) {
 					await invalidateListServiceAccountKeys(queryClient, {
@@ -95,7 +96,7 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 	} = useRevokeServiceAccountKey({
 		mutation: {
 			onSuccess: async () => {
-				toast.success('Key revoked successfully');
+				toast.success('Key revoked successfully', { richColors: true });
 				setIsRevokeConfirmOpen(false);
 				await setEditKeyId(null);
 				if (selectedAccountId) {

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
+import { Button } from '@signozhq/button';
 import { KeyRound, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui';
 import { Skeleton, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
@@ -96,7 +96,7 @@ function buildColumns({
 				<Tooltip title={isDisabled ? 'Service account disabled' : 'Revoke Key'}>
 					<Button
 						variant="ghost"
-						size="sm"
+						size="xs"
 						color="destructive"
 						disabled={isDisabled}
 						onClick={(e): void => {
@@ -177,8 +177,8 @@ function KeysTab({
 					</a>
 				</p>
 				<Button
-					variant="link"
-					color="primary"
+					type="button"
+					className="keys-tab__learn-more"
 					onClick={async (): Promise<void> => {
 						await setIsAddKeyOpen(true);
 					}}

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { LockKeyhole } from '@signozhq/icons';
-import { Badge, Input } from '@signozhq/ui';
+import { Input } from '@signozhq/input';
+import { Badge } from '@signozhq/ui';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -1,6 +1,8 @@
 import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { Button, DialogWrapper, toast } from '@signozhq/ui';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountKeysQueryKey,
@@ -34,7 +36,7 @@ export function RevokeKeyContent({
 				Revoking this key will permanently invalidate it. Any systems using this key
 				will lose access immediately.
 			</p>
-			<div className="delete-dialog__footer">
+			<DialogFooter className="delete-dialog__footer">
 				<Button variant="solid" color="secondary" size="sm" onClick={onCancel}>
 					<X size={12} />
 					Cancel
@@ -49,7 +51,7 @@ export function RevokeKeyContent({
 					<Trash2 size={12} />
 					Revoke Key
 				</Button>
-			</div>
+			</DialogFooter>
 		</>
 	);
 }
@@ -77,7 +79,7 @@ function RevokeKeyModal(): JSX.Element {
 	} = useRevokeServiceAccountKey({
 		mutation: {
 			onSuccess: async () => {
-				toast.success('Key revoked successfully');
+				toast.success('Key revoked successfully', { richColors: true });
 				await setRevokeKeyId(null);
 				if (accountId) {
 					await invalidateListServiceAccountKeys(queryClient, { id: accountId });

frontend/src/components/ServiceAccountDrawer/SaveErrorItem.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
+import { Button } from '@signozhq/button';
 import { Color } from '@signozhq/design-tokens';
 import { ChevronDown, ChevronUp, CircleAlert, RotateCw } from '@signozhq/icons';
-import { Button } from '@signozhq/ui';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import APIError from 'types/api/error';
 
@@ -40,9 +40,9 @@ function SaveErrorItem({
 				</span>
 				{onRetry && !isRetrying && (
 					<Button
-						variant="link"
-						color="none"
+						type="button"
 						aria-label="Retry"
+						size="xs"
 						onClick={async (e): Promise<void> => {
 							e.stopPropagation();
 							setIsRetrying(true);

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.styles.scss

@@ -5,21 +5,31 @@
 		margin-left: var(--margin-2);
 	}
 
+	&__layout {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - 48px);
+	}
+
 	&__tabs {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+		padding: var(--padding-3) var(--padding-4) var(--padding-2) var(--padding-4);
 		flex-shrink: 0;
 	}
 
 	&__tab-group {
 		[data-slot='toggle-group'] {
+			height: 32px;
 			border-radius: 2px;
+			border: 1px solid var(--l1-border);
 			background: var(--l2-background);
 			gap: 0;
 		}
 
 		[data-slot='toggle-group-item'] {
+			height: 32px;
 			border-radius: 0;
 			border-left: 1px solid var(--l1-border);
 			background: transparent;
@@ -30,7 +40,6 @@
 			padding: 0 var(--padding-7);
 			gap: var(--spacing-3);
 			box-shadow: none;
-			border: none;
 
 			&:first-child {
 				border-left: none;
@@ -79,7 +88,7 @@
 	&__body {
 		flex: 1;
 		overflow-y: auto;
-		padding-top: var(--padding-5);
+		padding: var(--padding-5) var(--padding-4);
 		display: flex;
 		flex-direction: column;
 		gap: var(--spacing-8);
@@ -103,11 +112,14 @@
 	}
 
 	&__footer {
+		height: 56px;
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		width: 100%;
+		padding: 0 var(--padding-4);
+		border-top: 1px solid var(--secondary);
+		background: var(--card);
 	}
 
 	&__keys-pagination {
@@ -290,7 +302,7 @@
 
 	&__icon {
 		flex-shrink: 0;
-		color: var(--danger-background);
+		color: var(--bg-cherry-500);
 	}
 
 	&__title {
@@ -298,7 +310,7 @@
 		min-width: 0;
 		font-size: var(--font-size-xs);
 		font-weight: var(--font-weight-medium);
-		color: var(--danger-background);
+		color: var(--bg-cherry-500);
 		line-height: var(--line-height-18);
 		letter-spacing: -0.06px;
 		text-align: left;
@@ -575,5 +587,6 @@
 		display: flex;
 		justify-content: flex-end;
 		gap: var(--spacing-4);
+		margin-top: var(--margin-6);
 	}
 }

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,13 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
+import { Button } from '@signozhq/button';
+import { DrawerWrapper } from '@signozhq/drawer';
 import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
-import {
-	Button,
-	DrawerWrapper,
-	toast,
-	ToggleGroup,
-	ToggleGroupItem,
-} from '@signozhq/ui';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { toast } from '@signozhq/ui';
 import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -334,6 +331,7 @@ function ServiceAccountDrawer({
 				setSaveErrors(errors);
 			} else {
 				toast.success('Service account updated successfully', {
+					richColors: true,
 					position: 'top-right',
 				});
 				onSuccess({ closeDrawer: false });
@@ -381,7 +379,7 @@ function ServiceAccountDrawer({
 				<ToggleGroup
 					type="single"
 					value={activeTab}
-					onChange={(val): void => {
+					onValueChange={(val): void => {
 						if (val) {
 							setActiveTab(val as ServiceAccountDrawerTab);
 							if (val !== ServiceAccountDrawerTab.Keys) {
@@ -473,64 +471,69 @@ function ServiceAccountDrawer({
 					</>
 				)}
 			</div>
-		</div>
-	);
 
-	const footer = (
-		<div className="sa-drawer__footer">
-			{activeTab === ServiceAccountDrawerTab.Keys ? (
-				<Pagination
-					current={keysPage}
-					pageSize={PAGE_SIZE}
-					total={keys.length}
-					showTotal={(total: number, range: number[]): JSX.Element => (
-						<>
-							<span className="sa-drawer__pagination-range">
-								{range[0]} &#8212; {range[1]}
-							</span>
-							<span className="sa-drawer__pagination-total"> of {total}</span>
-						</>
-					)}
-					showSizeChanger={false}
-					hideOnSinglePage
-					onChange={(page): void => {
-						void setKeysPage(page);
-					}}
-					className="sa-drawer__keys-pagination"
-				/>
-			) : (
-				<>
-					{!isDeleted && (
-						<Button
-							variant="link"
-							color="destructive"
-							onClick={(): void => {
-								setIsDeleteOpen(true);
-							}}
-						>
-							<Trash2 size={12} />
-							Delete Service Account
-						</Button>
-					)}
-					{!isDeleted && (
-						<div className="sa-drawer__footer-right">
-							<Button variant="solid" color="secondary" onClick={handleClose}>
-								<X size={14} />
-								Cancel
-							</Button>
+			<div className="sa-drawer__footer">
+				{activeTab === ServiceAccountDrawerTab.Keys ? (
+					<Pagination
+						current={keysPage}
+						pageSize={PAGE_SIZE}
+						total={keys.length}
+						showTotal={(total: number, range: number[]): JSX.Element => (
+							<>
+								<span className="sa-drawer__pagination-range">
+									{range[0]} &#8212; {range[1]}
+								</span>
+								<span className="sa-drawer__pagination-total"> of {total}</span>
+							</>
+						)}
+						showSizeChanger={false}
+						hideOnSinglePage
+						onChange={(page): void => {
+							void setKeysPage(page);
+						}}
+						className="sa-drawer__keys-pagination"
+					/>
+				) : (
+					<>
+						{!isDeleted && (
 							<Button
-								variant="solid"
-								color="primary"
-								loading={isSaving}
-								disabled={!isDirty}
-								onClick={handleSave}
+								variant="ghost"
+								color="destructive"
+								className="sa-drawer__footer-btn"
+								onClick={(): void => {
+									setIsDeleteOpen(true);
+								}}
 							>
-								Save Changes
+								<Trash2 size={12} />
+								Delete Service Account
 							</Button>
-						</div>
-					)}
-				</>
-			)}
+						)}
+						{!isDeleted && (
+							<div className="sa-drawer__footer-right">
+								<Button
+									variant="solid"
+									color="secondary"
+									size="sm"
+									onClick={handleClose}
+								>
+									<X size={14} />
+									Cancel
+								</Button>
+								<Button
+									variant="solid"
+									color="primary"
+									size="sm"
+									loading={isSaving}
+									disabled={!isDirty}
+									onClick={handleSave}
+								>
+									Save Changes
+								</Button>
+							</div>
+						)}
+					</>
+				)}
+			</div>
 		</div>
 	);
 
@@ -544,15 +547,14 @@ function ServiceAccountDrawer({
 					}
 				}}
 				direction="right"
+				type="panel"
 				showCloseButton
 				showOverlay={false}
-				title="Service Account Details"
+				allowOutsideClick
+				header={{ title: 'Service Account Details' }}
+				content={drawerContent}
 				className="sa-drawer"
-				width="wide"
-				footer={footer}
-			>
-				{drawerContent}
-			</DrawerWrapper>
+			/>
 
 			<DeleteAccountModal />
 

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.test.tsx

@@ -1,13 +1,7 @@
 import { toast } from '@signozhq/ui';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	render,
-	screen,
-	userEvent,
-	waitFor,
-	waitForElementToBeRemoved,
-} from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import AddKeyModal from '../AddKeyModal';
 
@@ -123,7 +117,10 @@ describe('AddKeyModal', () => {
 
 		await waitFor(() => {
 			expect(mockCopyToClipboard).toHaveBeenCalledWith('snz_abc123xyz456secret');
-			expect(mockToast.success).toHaveBeenCalledWith('Key copied to clipboard');
+			expect(mockToast.success).toHaveBeenCalledWith(
+				'Key copied to clipboard',
+				expect.anything(),
+			);
 		});
 	});
 
@@ -131,9 +128,11 @@ describe('AddKeyModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const dialog = await screen.findByRole('dialog', { name: /Add a New Key/i });
+		await screen.findByRole('dialog', { name: /Add a New Key/i });
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		await waitForElementToBeRemoved(dialog);
+		expect(
+			screen.queryByRole('dialog', { name: /Add a New Key/i }),
+		).not.toBeInTheDocument();
 	});
 });

frontend/src/components/ServiceAccountDrawer/__tests__/EditKeyModal.test.tsx

@@ -29,14 +29,9 @@ function renderModal(
 		account: 'sa-1',
 		'edit-key': 'key-1',
 	},
-	onUrlUpdate?: jest.Mock,
 ): ReturnType<typeof render> {
 	return render(
-		<NuqsTestingAdapter
-			searchParams={searchParams}
-			hasMemory
-			onUrlUpdate={onUrlUpdate}
-		>
+		<NuqsTestingAdapter searchParams={searchParams} hasMemory>
 			<EditKeyModal keyItem={keyItem} />
 		</NuqsTestingAdapter>,
 	);
@@ -87,7 +82,10 @@ describe('EditKeyModal (URL-controlled)', () => {
 		await user.click(screen.getByRole('button', { name: /Save Changes/i }));
 
 		await waitFor(() => {
-			expect(mockToast.success).toHaveBeenCalledWith('Key updated successfully');
+			expect(mockToast.success).toHaveBeenCalledWith(
+				'Key updated successfully',
+				expect.anything(),
+			);
 		});
 
 		await waitFor(() => {
@@ -99,31 +97,14 @@ describe('EditKeyModal (URL-controlled)', () => {
 
 	it('cancel clears edit-key param and closes modal', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onUrlUpdate = jest.fn();
-		renderModal(mockKey, undefined, onUrlUpdate);
+		renderModal();
 
 		await screen.findByDisplayValue('Original Key Name');
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		await waitFor(() => {
-			expect(onUrlUpdate).toHaveBeenCalled();
-		});
-
-		const latestUrlUpdate =
-			onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1]?.[0];
-		expect(latestUrlUpdate).toEqual(
-			expect.objectContaining({
-				queryString: expect.any(String),
-			}),
-		);
-		expect(latestUrlUpdate.queryString).toContain('account=sa-1');
-		expect(latestUrlUpdate.queryString).not.toContain('edit-key=');
-
-		await waitFor(() => {
-			expect(
-				screen.queryByRole('dialog', { name: /Edit Key Details/i }),
-			).not.toBeInTheDocument();
-		});
+		expect(
+			screen.queryByRole('dialog', { name: /Edit Key Details/i }),
+		).not.toBeInTheDocument();
 	});
 
 	it('revoke flow: clicking Revoke Key shows confirmation inside same dialog', async () => {
@@ -155,7 +136,10 @@ describe('EditKeyModal (URL-controlled)', () => {
 		await user.click(confirmBtn);
 
 		await waitFor(() => {
-			expect(mockToast.success).toHaveBeenCalledWith('Key revoked successfully');
+			expect(mockToast.success).toHaveBeenCalledWith(
+				'Key revoked successfully',
+				expect.anything(),
+			);
 		});
 
 		await waitFor(() => {

frontend/src/components/ServiceAccountDrawer/__tests__/KeysTab.test.tsx

@@ -164,7 +164,10 @@ describe('KeysTab', () => {
 		await user.click(confirmBtn);
 
 		await waitFor(() => {
-			expect(mockToast.success).toHaveBeenCalledWith('Key revoked successfully');
+			expect(mockToast.success).toHaveBeenCalledWith(
+				'Key revoked successfully',
+				expect.anything(),
+			);
 		});
 	});
 

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

@@ -6,23 +6,18 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import ServiceAccountDrawer from '../ServiceAccountDrawer';
 
-jest.mock('@signozhq/ui', () => ({
-	...jest.requireActual('@signozhq/ui'),
+jest.mock('@signozhq/drawer', () => ({
 	DrawerWrapper: ({
-		children,
-		footer,
+		content,
 		open,
 	}: {
-		children?: ReactNode;
-		footer?: ReactNode;
+		content?: ReactNode;
 		open: boolean;
-	}): JSX.Element | null =>
-		open ? (
-			<div>
-				{children}
-				{footer}
-			</div>
-		) : null,
+	}): JSX.Element | null => (open ? <div>{content}</div> : null),
+}));
+
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.styles.scss

@@ -21,7 +21,7 @@
 	.ant-table-thead {
 		> tr > th,
 		> tr > td {
-			background: var(--l1-background);
+			background: var(--background);
 			font-size: var(--paragraph-small-600-font-size);
 			font-weight: var(--paragraph-small-600-font-weight);
 			line-height: var(--paragraph-small-600-line-height);

frontend/src/components/ShiftOverlay/shiftOverlay.scss

@@ -11,7 +11,7 @@
 		gap: 20px;
 		padding: 8px 12px;
 
-		background: var(--l1-background);
+		background: var(--background);
 		color: var(--l2-foreground);
 
 		border-radius: 8px;

frontend/src/components/SpanHoverCard/SpanHoverCard.styles.scss

@@ -50,7 +50,7 @@
 
 	&__error {
 		font-size: 0.75rem;
-		color: var(--danger-background);
+		color: var(--bg-cherry-500);
 		font-weight: 500;
 	}
 
@@ -94,7 +94,7 @@
 			height: 20px;
 			flex-shrink: 0;
 			border-radius: 2px;
-			background: var(--danger-background);
+			background: var(--bg-cherry-500);
 		}
 	}
 

frontend/src/components/WarningPopover/WarningPopover.styles.scss

@@ -1,11 +1,11 @@
 .warning-content {
 	display: flex;
 	flex-direction: column;
-
 	// === SECTION: Summary (Top)
 	&__summary-section {
 		display: flex;
 		flex-direction: column;
+		border-bottom: 1px solid var(--l1-border);
 	}
 
 	&__summary {

frontend/src/components/cmdKPalette/__test__/cmdkPalette.test.tsx

@@ -161,11 +161,10 @@ describe('CmdKPalette', () => {
 	});
 
 	test('clicking a navigation item calls history.push with correct route', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CmdKPalette userRole="ADMIN" />);
 
 		const homeItem = screen.getByText(HOME_LABEL);
-		await user.click(homeItem);
+		await userEvent.click(homeItem);
 
 		expect(history.push).toHaveBeenCalledWith(ROUTES.HOME);
 	});
@@ -195,11 +194,10 @@ describe('CmdKPalette', () => {
 	});
 
 	test('closing the palette via handleInvoke sets open to false', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CmdKPalette userRole="ADMIN" />);
 
 		const dashItem = screen.getByText('Go to Dashboards');
-		await user.click(dashItem);
+		await userEvent.click(dashItem);
 
 		// last call from handleInvoke should set open to false
 		expect(mockSetOpen).toHaveBeenCalledWith(false);

frontend/src/components/cmdKPalette/cmdKPalette.scss

@@ -41,7 +41,7 @@
 
 .cmdk-item-light:hover {
 	cursor: pointer;
-	background-color: var(--l1-background) !important;
+	background-color: var(--background) !important;
 }
 
 .cmdk-item-light[data-selected='true'] {

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -7,7 +7,7 @@ import {
 	CommandItem,
 	CommandList,
 	CommandShortcut,
-} from '@signozhq/ui';
+} from '@signozhq/command';
 import logEvent from 'api/common/logEvent';
 import { useThemeMode } from 'hooks/useDarkMode';
 import history from 'lib/history';

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -50,7 +50,6 @@
 	.app-content {
 		width: calc(100% - 54px); // width of the sidebar
 		z-index: 0;
-		background: var(--l1-background);
 
 		margin: 0 auto;
 
@@ -140,6 +139,22 @@
 	}
 }
 
+.isDarkMode {
+	.app-layout {
+		.app-content {
+			background: var(--background);
+		}
+	}
+}
+
+.isLightMode {
+	.app-layout {
+		.app-content {
+			background: var(--card);
+		}
+	}
+}
+
 .trial-expiry-banner,
 .slow-api-warning-banner,
 .workspace-restricted-banner {

frontend/src/container/CreateAlertV2/AlertCondition/styles.scss

@@ -82,7 +82,7 @@
 
 			.sentence-text {
 				color: var(--l2-foreground);
-				font-size: 13px;
+				font-size: 14px;
 				line-height: 1.5;
 				display: flex;
 				align-items: center;

frontend/src/container/CreateAlertV2/CreateAlertHeader/CreateAlertHeader.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { Button, Input } from '@signozhq/ui';
+import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import classNames from 'classnames';
 import { QueryParams } from 'constants/query';
@@ -59,18 +59,15 @@ function CreateAlertHeader(): JSX.Element {
 				<div className="alert-header__tab-bar">
 					<div className="alert-header__tab">New Alert Rule</div>
 					<Button
-						prefix={<RotateCcw size={12} />}
+						icon={<RotateCcw size={16} />}
 						onClick={handleSwitchToClassicExperience}
-						variant="solid"
-						color="secondary"
-						size="sm"
 					>
 						Switch to Classic Experience
 					</Button>
 				</div>
 			)}
 			<div className="alert-header__content">
-				<Input
+				<input
 					type="text"
 					value={alertState.name}
 					onChange={(e): void =>

frontend/src/container/CreateAlertV2/CreateAlertHeader/styles.scss

@@ -2,7 +2,6 @@
 	background-color: var(--l1-background);
 	font-family: inherit;
 	color: var(--l1-foreground);
-	padding: 12px 16px;
 
 	&__tab-bar {
 		display: flex;
@@ -15,20 +14,23 @@
 		display: flex;
 		align-items: center;
 		background-color: var(--l1-background);
+		padding: 0 12px;
 		height: 32px;
 		font-size: 13px;
 		color: var(--l1-foreground);
+		margin-left: 12px;
+		margin-top: 12px;
 	}
 
 	&__tab::before {
 		content: '•';
 		margin-right: 6px;
-		font-size: 13px;
+		font-size: 14px;
 		color: var(--l3-foreground);
 	}
 
 	&__content {
-		padding: 8px 0;
+		padding: 16px;
 		background: var(--l1-background);
 		display: flex;
 		flex-direction: column;
@@ -38,14 +40,22 @@
 	}
 
 	&__input.title {
+		font-size: 18px;
+		font-weight: 500;
 		background-color: transparent;
 		color: var(--l1-foreground);
 		width: 100%;
 		min-width: 300px;
 	}
 
+	&__input:focus,
+	&__input:active {
+		border: none;
+		outline: none;
+	}
+
 	&__input.description {
-		font-size: 13px;
+		font-size: 14px;
 		background-color: transparent;
 		color: var(--l2-foreground);
 	}

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/styles.scss

@@ -13,7 +13,7 @@
 		.advanced-option-item-title {
 			color: var(--l2-foreground);
 			font-family: Inter;
-			font-size: 13px;
+			font-size: 14px;
 			font-weight: 500;
 			display: flex;
 			align-items: center;
@@ -23,7 +23,7 @@
 		.advanced-option-item-description {
 			color: var(--muted-foreground);
 			font-family: Inter;
-			font-size: 13px;
+			font-size: 14px;
 			font-weight: 400;
 		}
 

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/styles.scss

@@ -22,7 +22,7 @@
 				color: var(--l2-foreground);
 				font-weight: 500;
 				margin: 0 4px;
-				font-size: 13px;
+				font-size: 14px;
 			}
 		}
 
@@ -30,7 +30,7 @@
 			.ant-btn {
 				border: 1px solid var(--l1-border);
 				color: var(--l2-foreground);
-				font-size: 13px;
+				font-size: 14px;
 				display: flex;
 				align-items: center;
 				gap: 8px;
@@ -48,7 +48,7 @@
 
 	.evaluation-cadence-details-title {
 		color: var(--l1-foreground);
-		font-size: 13px;
+		font-size: 14px;
 		font-weight: 500;
 		padding-left: 16px;
 		padding-top: 16px;
@@ -138,7 +138,7 @@
 					border-radius: 4px;
 					color: var(--l2-foreground) !important;
 					font-family: 'Space Mono';
-					font-size: 13px;
+					font-size: 14px;
 
 					&::placeholder {
 						font-family: 'Space Mono';
@@ -202,7 +202,7 @@
 				gap: 8px;
 				height: 100%;
 				color: var(--l1-foreground);
-				font-size: 13px;
+				font-size: 14px;
 			}
 
 			.schedule-preview {
@@ -225,7 +225,7 @@
 
 					.schedule-preview-title {
 						color: var(--l2-foreground);
-						font-size: 13px;
+						font-size: 14px;
 						font-weight: 500;
 					}
 				}
@@ -281,7 +281,7 @@
 
 							.schedule-preview-date {
 								color: var(--l2-foreground);
-								font-size: 13px;
+								font-size: 14px;
 								font-weight: 400;
 								white-space: nowrap;
 							}
@@ -396,7 +396,7 @@
 
 						.schedule-preview-title {
 							color: var(--l1-foreground);
-							font-size: 13px;
+							font-size: 14px;
 							font-weight: 500;
 						}
 					}
@@ -422,7 +422,7 @@
 							.schedule-preview-content {
 								.schedule-preview-date {
 									color: var(--l1-foreground);
-									font-size: 13px;
+									font-size: 14px;
 									font-weight: 500;
 								}
 

frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.scss

@@ -10,7 +10,7 @@
 		border: 1px solid var(--l1-border);
 		color: var(--l1-foreground);
 		font-family: 'Space Mono', monospace;
-		font-size: 13px;
+		font-size: 14px;
 		font-weight: 600;
 		text-align: center;
 		border-radius: 4px;
@@ -43,7 +43,7 @@
 
 	.time-input-separator {
 		color: var(--l2-foreground);
-		font-size: 13px;
+		font-size: 14px;
 		font-weight: 600;
 		margin: 0 4px;
 		user-select: none;