feat(base-path): migrated more cases

frontend/.eslintrc.cjs

@@ -66,6 +66,8 @@ module.exports = {
 	rules: {
 		// Asset migration — base-path safety
 		'rulesdir/no-unsupported-asset-pattern': 'error',
+		// Base-path safety — window.open and origin-concat patterns
+		'rulesdir/no-raw-absolute-path': 'error',
 
 		// Code quality rules
 		'prefer-const': 'error', // Enforces const for variables never reassigned
@@ -213,6 +215,31 @@ module.exports = {
 				message:
 					'Avoid calling .getState() directly. Export a standalone action from the store instead.',
 			},
+			{
+				selector:
+					"MemberExpression[object.name='window'][property.name='localStorage']",
+				message:
+					'Use getLocalStorageKey/setLocalStorageKey/removeLocalStorageKey from api/browser/localstorage instead.',
+			},
+			{
+				selector:
+					"MemberExpression[object.name='window'][property.name='sessionStorage']",
+				message:
+					'Use getSessionStorageApi/setSessionStorageApi/removeSessionStorageApi from api/browser/sessionstorage instead.',
+			},
+		],
+		'no-restricted-globals': [
+			'error',
+			{
+				name: 'localStorage',
+				message:
+					'Use getLocalStorageKey/setLocalStorageKey/removeLocalStorageKey from api/browser/localstorage instead.',
+			},
+			{
+				name: 'sessionStorage',
+				message:
+					'Use getSessionStorageApi/setSessionStorageApi/removeSessionStorageApi from api/browser/sessionstorage instead.',
+			},
 		],
 	},
 	overrides: [
@@ -246,6 +273,11 @@ module.exports = {
 				'sonarjs/cognitive-complexity': 'off', // Tests can be complex
 				'sonarjs/no-identical-functions': 'off', // Similar test patterns are OK
 				'sonarjs/no-small-switch': 'off', // Small switches are OK in tests
+				// Test assertions intentionally reference window.location.origin for expected-value checks
+				'rulesdir/no-raw-absolute-path': 'off',
+				// Tests may access storage directly for setup/assertion/spy purposes
+				'no-restricted-globals': 'off',
+				'no-restricted-syntax': 'off',
 			},
 		},
 		{

frontend/eslint-rules/no-raw-absolute-path.js

@@ -0,0 +1,153 @@
+'use strict';
+
+/**
+ * ESLint rule: no-raw-absolute-path
+ *
+ * Catches patterns that break at runtime when the app is served from a
+ * sub-path (e.g. /signoz/):
+ *
+ *   1. window.open(path, '_blank')
+ *      → use openInNewTab(path) which calls withBasePath internally
+ *
+ *   2. window.location.origin + path  /  `${window.location.origin}${path}`
+ *      → use getAbsoluteUrl(path)
+ *
+ *   3. frontendBaseUrl: window.location.origin  (bare origin usage)
+ *      → use getBaseUrl() to include the base path
+ *
+ *   4. window.location.href = path
+ *      → use withBasePath(path) or navigate() for internal navigation
+ *
+ * External URLs (first arg starts with "http") are explicitly allowed.
+ */
+
+function isOriginAccess(node) {
+	return (
+		node.type === 'MemberExpression' &&
+		!node.computed &&
+		node.property.name === 'origin' &&
+		node.object.type === 'MemberExpression' &&
+		!node.object.computed &&
+		node.object.property.name === 'location' &&
+		node.object.object.type === 'Identifier' &&
+		node.object.object.name === 'window'
+	);
+}
+
+function isHrefAccess(node) {
+	return (
+		node.type === 'MemberExpression' &&
+		!node.computed &&
+		node.property.name === 'href' &&
+		node.object.type === 'MemberExpression' &&
+		!node.object.computed &&
+		node.object.property.name === 'location' &&
+		node.object.object.type === 'Identifier' &&
+		node.object.object.name === 'window'
+	);
+}
+
+function isExternalUrl(node) {
+	if (node.type === 'Literal' && typeof node.value === 'string') {
+		return node.value.startsWith('http://') || node.value.startsWith('https://');
+	}
+	if (node.type === 'TemplateLiteral' && node.quasis.length > 0) {
+		const raw = node.quasis[0].value.raw;
+		return raw.startsWith('http://') || raw.startsWith('https://');
+	}
+	return false;
+}
+
+// window.open(withBasePath(x)) and window.open(getAbsoluteUrl(x)) are already safe.
+function isSafeHelperCall(node) {
+	return (
+		node.type === 'CallExpression' &&
+		node.callee.type === 'Identifier' &&
+		(node.callee.name === 'withBasePath' || node.callee.name === 'getAbsoluteUrl')
+	);
+}
+
+module.exports = {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Disallow raw window.open and origin-concatenation patterns that miss the runtime base path',
+			category: 'Base Path Safety',
+		},
+		schema: [],
+		messages: {
+			windowOpen:
+				'Use openInNewTab(path) instead of window.open(path, "_blank") — openInNewTab prepends the base path automatically.',
+			originConcat:
+				'Use getAbsoluteUrl(path) instead of window.location.origin + path — getAbsoluteUrl prepends the base path automatically.',
+			originDirect:
+				'Use getBaseUrl() instead of window.location.origin — getBaseUrl includes the base path.',
+			hrefAssign:
+				'Use withBasePath(path) or navigate() instead of window.location.href = path — ensures the base path is included.',
+		},
+	},
+
+	create(context) {
+		return {
+			// window.open(path, ...) — allow only external first-arg URLs
+			CallExpression(node) {
+				const { callee, arguments: args } = node;
+				if (
+					callee.type !== 'MemberExpression' ||
+					callee.object.type !== 'Identifier' ||
+					callee.object.name !== 'window' ||
+					callee.property.name !== 'open'
+				)
+					return;
+				if (args.length < 1) return;
+				if (isExternalUrl(args[0])) return;
+				if (isSafeHelperCall(args[0])) return;
+
+				context.report({ node, messageId: 'windowOpen' });
+			},
+
+			// window.location.origin + path
+			BinaryExpression(node) {
+				if (node.operator !== '+') return;
+				if (isOriginAccess(node.left) || isOriginAccess(node.right)) {
+					context.report({ node, messageId: 'originConcat' });
+				}
+			},
+
+			// `${window.location.origin}${path}`
+			TemplateLiteral(node) {
+				if (node.expressions.some(isOriginAccess)) {
+					context.report({ node, messageId: 'originConcat' });
+				}
+			},
+
+			// window.location.origin used directly (not in concatenation)
+			// Catches: frontendBaseUrl: window.location.origin
+			MemberExpression(node) {
+				if (!isOriginAccess(node)) return;
+
+				const parent = node.parent;
+				// Skip if parent is BinaryExpression with + (handled by BinaryExpression visitor)
+				if (parent.type === 'BinaryExpression' && parent.operator === '+') return;
+				// Skip if inside TemplateLiteral (handled by TemplateLiteral visitor)
+				if (parent.type === 'TemplateLiteral') return;
+
+				context.report({ node, messageId: 'originDirect' });
+			},
+
+			// window.location.href = path
+			AssignmentExpression(node) {
+				if (node.operator !== '=') return;
+				if (!isHrefAccess(node.left)) return;
+
+				// Allow external URLs
+				if (isExternalUrl(node.right)) return;
+				// Allow safe helper calls
+				if (isSafeHelperCall(node.right)) return;
+
+				context.report({ node, messageId: 'hrefAssign' });
+			},
+		};
+	},
+};

frontend/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
+		<base href="[[.BaseHref]]" />
 		<meta
 			http-equiv="Cache-Control"
 			content="no-cache, no-store, must-revalidate, max-age: 0"
@@ -39,12 +40,12 @@
 		<meta
 			data-react-helmet="true"
 			property="og:image"
-			content="/images/signoz-hero-image.webp"
+			content="[[.BaseHref]]images/signoz-hero-image.webp"
 		/>
 		<meta
 			data-react-helmet="true"
 			name="twitter:image"
-			content="/images/signoz-hero-image.webp"
+			content="[[.BaseHref]]images/signoz-hero-image.webp"
 		/>
 		<meta
 			data-react-helmet="true"
@@ -59,7 +60,7 @@
 		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
 		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
 		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
+		<link data-react-helmet="true" rel="shortcut icon" href="favicon.ico" />
 	</head>
 	<body data-theme="default">
 		<script>
@@ -136,7 +137,7 @@
 				})(document, 'script');
 			}
 		</script>
-		<link rel="stylesheet" href="/css/uPlot.min.css" />
+		<link rel="stylesheet" href="css/uPlot.min.css" />
 		<script type="module" src="./src/index.tsx"></script>
 	</body>
 </html>

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",
@@ -112,7 +126,6 @@
     "react": "18.2.0",
     "react-addons-update": "15.6.3",
     "react-beautiful-dnd": "13.1.1",
-    "react-chartjs-2": "4",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.2.0",
@@ -136,7 +149,6 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "rehype-raw": "7.0.0",
-    "remark-gfm": "^3.0.1",
     "rollup-plugin-visualizer": "7.0.0",
     "rrule": "2.8.1",
     "stream": "^0.0.2",

frontend/req.md

@@ -1,9 +0,0 @@
-# SigNoz AI Assistant
-
-1. Chat interface (Side Drawer View)
-    1. Should be able to expand the view to full screen (open in a new route - with converstation ID)
-    2. Conversation would be stream (for in process message), the older messages would be listed (Virtualized) - older - newest
-2. Input Section
-    1.  Users should be able to upload images / files to the chat
-
-

frontend/src/AppRoutes/Private.tsx

@@ -99,13 +99,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return <>{children}</>;
 	}
 
-	const isAIAssistantEnabled =
-		featureFlags?.find((f) => f.name === FeatureKeys.AI_ASSISTANT_ENABLED)
-			?.active ?? false;
-	if (pathname.startsWith('/ai-assistant/') && !isAIAssistantEnabled) {
-		return <Redirect to={ROUTES.HOME} />;
-	}
-
 	// Check for workspace access restriction (cloud only)
 	const isCloudPlatform = activeLicense?.platform === LicensePlatform.CLOUD;
 

frontend/src/AppRoutes/index.tsx

@@ -212,30 +212,6 @@ function App(): JSX.Element {
 		activeLicenseFetchError,
 	]);
 
-	useEffect(() => {
-		if (!isLoggedInState || isFetchingFeatureFlags) {
-			return;
-		}
-		const isAIAssistantEnabled =
-			featureFlags?.find((f) => f.name === FeatureKeys.AI_ASSISTANT_ENABLED)
-				?.active ?? false;
-
-		setRoutes((prev) => {
-			const hasAi = prev.some((r) => r.path === ROUTES.AI_ASSISTANT);
-			if (isAIAssistantEnabled === hasAi) {
-				return prev;
-			}
-			if (isAIAssistantEnabled) {
-				const aiRoute = defaultRoutes.find((r) => r.path === ROUTES.AI_ASSISTANT);
-				if (!aiRoute) {
-					return prev;
-				}
-				return [...prev.filter((r) => r.path !== ROUTES.AI_ASSISTANT), aiRoute];
-			}
-			return prev.filter((r) => r.path !== ROUTES.AI_ASSISTANT);
-		});
-	}, [isLoggedInState, isFetchingFeatureFlags, featureFlags]);
-
 	const isDarkMode = useIsDarkMode();
 
 	useEffect(() => {
@@ -245,8 +221,7 @@ function App(): JSX.Element {
 	useEffect(() => {
 		if (
 			pathname === ROUTES.ONBOARDING ||
-			pathname.startsWith('/public/dashboard/') ||
-			pathname.startsWith('/ai-assistant/')
+			pathname.startsWith('/public/dashboard/')
 		) {
 			window.Pylon?.('hideChatBubble');
 		} else {

frontend/src/AppRoutes/pageComponents.ts

@@ -317,10 +317,3 @@ export const MeterExplorerPage = Loadable(
 	() =>
 		import(/* webpackChunkName: "Meter Explorer Page" */ 'pages/MeterExplorer'),
 );
-
-export const AIAssistantPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "AI Assistant Page" */ 'pages/AIAssistantPage/AIAssistantPage'
-		),
-);

frontend/src/AppRoutes/routes.ts

@@ -2,7 +2,6 @@ import { RouteProps } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 
 import {
-	AIAssistantPage,
 	AlertHistory,
 	AlertOverview,
 	AlertTypeSelectionPage,
@@ -497,13 +496,6 @@ const routes: AppRoutes[] = [
 		key: 'API_MONITORING',
 		isPrivate: true,
 	},
-	{
-		path: ROUTES.AI_ASSISTANT,
-		exact: true,
-		component: AIAssistantPage,
-		key: 'AI_ASSISTANT',
-		isPrivate: true,
-	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

frontend/src/ReactI18/index.tsx

@@ -2,6 +2,7 @@ import { initReactI18next } from 'react-i18next';
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
+import { getBasePath } from 'utils/basePath';
 
 import cacheBursting from '../../i18n-translations-hash.json';
 
@@ -24,7 +25,7 @@ i18n
 				const ns = namespace[0];
 				const pathkey = `/${language}/${ns}`;
 				const hash = cacheBursting[pathkey as keyof typeof cacheBursting] || '';
-				return `/locales/${language}/${namespace}.json?h=${hash}`;
+				return `${getBasePath()}locales/${language}/${namespace}.json?h=${hash}`;
 			},
 		},
 		react: {

frontend/src/api/ai/chat.ts

@@ -1,466 +0,0 @@
-/**
- * AI Assistant API client.
- *
- * Flow:
- *   1. POST /api/v1/assistant/threads                                           → { threadId }
- *   2. POST /api/v1/assistant/threads/{threadId}/messages                       → { executionId }
- *   3. GET  /api/v1/assistant/executions/{executionId}/events                    → SSE stream (closes on 'done')
- *
- * For subsequent messages in the same thread, repeat steps 2–3.
- * Approval/clarification events pause the stream; use approveExecution/clarifyExecution
- * to resume, which each return a new executionId to open a fresh SSE stream.
- */
-
-import getLocalStorageApi from 'api/browser/localstorage/get';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-// Direct URL to the AI backend — set VITE_AI_BACKEND_URL in .env (see vite.config `define`).
-const AI_BACKEND = process.env.VITE_AI_BACKEND_URL || 'http://localhost:8001';
-const BASE = `${AI_BACKEND}/api/v1/assistant`;
-
-function authHeaders(): Record<string, string> {
-	const token = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN) || '';
-	return token ? { Authorization: `Bearer ${token}` } : {};
-}
-
-// ---------------------------------------------------------------------------
-// SSE event types
-// ---------------------------------------------------------------------------
-
-export type SSEEvent =
-	| { type: 'status'; executionId: string; state: string; eventId: number }
-	| {
-			type: 'message';
-			executionId: string;
-			messageId: string;
-			delta: string;
-			done: boolean;
-			actions: unknown[] | null;
-			eventId: number;
-	  }
-	| {
-			type: 'thinking';
-			executionId: string;
-			content: string;
-			eventId: number;
-	  }
-	| {
-			type: 'tool_call';
-			executionId: string;
-			toolName: string;
-			toolInput: unknown;
-			eventId: number;
-	  }
-	| {
-			type: 'tool_result';
-			executionId: string;
-			toolName: string;
-			result: unknown;
-			eventId: number;
-	  }
-	| {
-			type: 'approval';
-			executionId: string;
-			approvalId: string;
-			actionType: string;
-			resourceType: string;
-			summary: string;
-			diff: { before: unknown; after: unknown } | null;
-			eventId: number;
-	  }
-	| {
-			type: 'clarification';
-			executionId: string;
-			clarificationId: string;
-			message: string;
-			discoveredContext: Record<string, unknown> | null;
-			fields: ClarificationFieldRaw[];
-			eventId: number;
-	  }
-	| {
-			type: 'error';
-			executionId: string;
-			error: { type: string; code: string; message: string; details: unknown };
-			retryAction: 'auto' | 'manual' | 'none';
-			eventId: number;
-	  }
-	| { type: 'conversation'; threadId: string; title: string; eventId: number }
-	| {
-			type: 'done';
-			executionId: string;
-			tokenInput: number;
-			tokenOutput: number;
-			latencyMs: number;
-			toolCallCount?: number;
-			retryCount?: number;
-			eventId: number;
-	  };
-
-export interface ClarificationFieldRaw {
-	id: string;
-	type: string;
-	label: string;
-	required?: boolean;
-	options?: string[] | null;
-	default?: string | string[] | null;
-}
-
-// ---------------------------------------------------------------------------
-// Step 1 — Create thread
-// POST /api/v1/assistant/threads → { threadId }
-// ---------------------------------------------------------------------------
-
-// ---------------------------------------------------------------------------
-// Thread listing & detail
-// ---------------------------------------------------------------------------
-
-export interface ThreadSummary {
-	threadId: string;
-	title: string | null;
-	state: string | null;
-	activeExecutionId: string | null;
-	archived: boolean;
-	createdAt: string;
-	updatedAt: string;
-}
-
-export interface ThreadListResponse {
-	threads: ThreadSummary[];
-	nextCursor: string | null;
-	hasMore: boolean;
-}
-
-export interface MessageSummaryBlock {
-	type: string;
-	content?: string;
-	toolCallId?: string;
-	toolName?: string;
-	toolInput?: unknown;
-	result?: unknown;
-	success?: boolean;
-}
-
-export interface MessageSummary {
-	messageId: string;
-	role: string;
-	contentType: string;
-	content: string | null;
-	complete: boolean;
-	toolCalls: Record<string, unknown>[] | null;
-	blocks: MessageSummaryBlock[] | null;
-	actions: unknown[] | null;
-	feedbackRating: 'positive' | 'negative' | null;
-	feedbackComment: string | null;
-	executionId: string | null;
-	createdAt: string;
-	updatedAt: string;
-}
-
-export interface ThreadDetailResponse {
-	threadId: string;
-	title: string | null;
-	state: string | null;
-	activeExecutionId: string | null;
-	archived: boolean;
-	createdAt: string;
-	updatedAt: string;
-	messages: MessageSummary[];
-	pendingApproval: unknown | null;
-	pendingClarification: unknown | null;
-}
-
-export async function listThreads(
-	cursor?: string | null,
-	limit = 20,
-): Promise<ThreadListResponse> {
-	const params = new URLSearchParams({ limit: String(limit) });
-	if (cursor) {
-		params.set('cursor', cursor);
-	}
-	const res = await fetch(`${BASE}/threads?${params.toString()}`, {
-		headers: { ...authHeaders() },
-	});
-	if (!res.ok) {
-		const body = await res.text().catch(() => '');
-		throw new Error(
-			`Failed to list threads: ${res.status} ${res.statusText} — ${body}`,
-		);
-	}
-	return res.json();
-}
-
-export async function updateThread(
-	threadId: string,
-	update: { title?: string | null; archived?: boolean | null },
-): Promise<ThreadSummary> {
-	const res = await fetch(`${BASE}/threads/${threadId}`, {
-		method: 'PATCH',
-		headers: { 'Content-Type': 'application/json', ...authHeaders() },
-		body: JSON.stringify(update),
-	});
-	if (!res.ok) {
-		const body = await res.text().catch(() => '');
-		throw new Error(
-			`Failed to update thread: ${res.status} ${res.statusText} — ${body}`,
-		);
-	}
-	return res.json();
-}
-
-export async function getThreadDetail(
-	threadId: string,
-): Promise<ThreadDetailResponse> {
-	const res = await fetch(`${BASE}/threads/${threadId}`, {
-		headers: { ...authHeaders() },
-	});
-	if (!res.ok) {
-		const body = await res.text().catch(() => '');
-		throw new Error(
-			`Failed to get thread: ${res.status} ${res.statusText} — ${body}`,
-		);
-	}
-	return res.json();
-}
-
-// ---------------------------------------------------------------------------
-// Thread creation
-// ---------------------------------------------------------------------------
-
-export async function createThread(signal?: AbortSignal): Promise<string> {
-	const res = await fetch(`${BASE}/threads`, {
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json', ...authHeaders() },
-		body: JSON.stringify({}),
-		signal,
-	});
-	if (!res.ok) {
-		const body = await res.text().catch(() => '');
-		throw new Error(
-			`Failed to create thread: ${res.status} ${res.statusText} — ${body}`,
-		);
-	}
-	const data: { threadId: string } = await res.json();
-	return data.threadId;
-}
-
-// ---------------------------------------------------------------------------
-// Step 2 — Send message
-// POST /api/v1/assistant/threads/{threadId}/messages → { executionId }
-// ---------------------------------------------------------------------------
-
-/** Fetches the thread's active executionId for reconnect on thread_busy (409). */
-async function getActiveExecutionId(threadId: string): Promise<string | null> {
-	const res = await fetch(`${BASE}/threads/${threadId}`, {
-		headers: { ...authHeaders() },
-	});
-	if (!res.ok) {
-		return null;
-	}
-	const data: { activeExecutionId?: string | null } = await res.json();
-	return data.activeExecutionId ?? null;
-}
-
-export async function sendMessage(
-	threadId: string,
-	content: string,
-	signal?: AbortSignal,
-): Promise<string> {
-	const res = await fetch(`${BASE}/threads/${threadId}/messages`, {
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json', ...authHeaders() },
-		body: JSON.stringify({ content }),
-		signal,
-	});
-
-	if (res.status === 409) {
-		// Thread has an active execution — reconnect to it instead of failing.
-		const executionId = await getActiveExecutionId(threadId);
-		if (executionId) {
-			return executionId;
-		}
-	}
-
-	if (!res.ok) {
-		const body = await res.text().catch(() => '');
-		throw new Error(
-			`Failed to send message: ${res.status} ${res.statusText} — ${body}`,
-		);
-	}
-	const data: { executionId: string } = await res.json();
-	return data.executionId;
-}
-
-// ---------------------------------------------------------------------------
-// Step 3 — Stream execution events
-// GET /api/v1/assistant/executions/{executionId}/events → SSE
-// ---------------------------------------------------------------------------
-
-function parseSSELine(line: string): SSEEvent | null {
-	if (!line.startsWith('data: ')) {
-		return null;
-	}
-	const json = line.slice('data: '.length).trim();
-	if (!json || json === '[DONE]') {
-		return null;
-	}
-	try {
-		return JSON.parse(json) as SSEEvent;
-	} catch {
-		return null;
-	}
-}
-
-function parseSSEChunk(chunk: string): SSEEvent[] {
-	return chunk
-		.split('\n\n')
-		.map((part) => part.split('\n').find((l) => l.startsWith('data: ')) ?? '')
-		.map(parseSSELine)
-		.filter((e): e is SSEEvent => e !== null);
-}
-
-async function* readSSEReader(
-	reader: ReadableStreamDefaultReader<Uint8Array>,
-): AsyncGenerator<SSEEvent> {
-	const decoder = new TextDecoder();
-	let lineBuffer = '';
-	try {
-		// eslint-disable-next-line no-constant-condition
-		while (true) {
-			// eslint-disable-next-line no-await-in-loop
-			const { done, value } = await reader.read();
-			if (done) {
-				break;
-			}
-			lineBuffer += decoder.decode(value, { stream: true });
-			const parts = lineBuffer.split('\n\n');
-			lineBuffer = parts.pop() ?? '';
-			yield* parts.flatMap(parseSSEChunk);
-		}
-		yield* parseSSEChunk(lineBuffer);
-	} finally {
-		reader.releaseLock();
-	}
-}
-
-export async function* streamEvents(
-	executionId: string,
-	signal?: AbortSignal,
-): AsyncGenerator<SSEEvent> {
-	const res = await fetch(`${BASE}/executions/${executionId}/events`, {
-		headers: { ...authHeaders() },
-		signal,
-	});
-	if (!res.ok || !res.body) {
-		throw new Error(`SSE stream failed: ${res.status} ${res.statusText}`);
-	}
-	yield* readSSEReader(res.body.getReader());
-}
-
-// ---------------------------------------------------------------------------
-// Approval / Clarification / Cancel actions
-// ---------------------------------------------------------------------------
-
-/** Approve a pending action. Returns a new executionId — open a fresh SSE stream for it. */
-export async function approveExecution(
-	approvalId: string,
-	signal?: AbortSignal,
-): Promise<string> {
-	const res = await fetch(`${BASE}/approve`, {
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json', ...authHeaders() },
-		body: JSON.stringify({ approvalId }),
-		signal,
-	});
-	if (!res.ok) {
-		const body = await res.text().catch(() => '');
-		throw new Error(
-			`Failed to approve: ${res.status} ${res.statusText} — ${body}`,
-		);
-	}
-	const data: { executionId: string } = await res.json();
-	return data.executionId;
-}
-
-/** Reject a pending action. */
-export async function rejectExecution(
-	approvalId: string,
-	signal?: AbortSignal,
-): Promise<void> {
-	const res = await fetch(`${BASE}/reject`, {
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json', ...authHeaders() },
-		body: JSON.stringify({ approvalId }),
-		signal,
-	});
-	if (!res.ok) {
-		const body = await res.text().catch(() => '');
-		throw new Error(
-			`Failed to reject: ${res.status} ${res.statusText} — ${body}`,
-		);
-	}
-}
-
-/** Submit clarification answers. Returns a new executionId — open a fresh SSE stream for it. */
-export async function clarifyExecution(
-	clarificationId: string,
-	answers: Record<string, unknown>,
-	signal?: AbortSignal,
-): Promise<string> {
-	const res = await fetch(`${BASE}/clarify`, {
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json', ...authHeaders() },
-		body: JSON.stringify({ clarificationId, answers }),
-		signal,
-	});
-	if (!res.ok) {
-		const body = await res.text().catch(() => '');
-		throw new Error(
-			`Failed to clarify: ${res.status} ${res.statusText} — ${body}`,
-		);
-	}
-	const data: { executionId: string } = await res.json();
-	return data.executionId;
-}
-
-/** Cancel the active execution on a thread. */
-export async function cancelExecution(
-	threadId: string,
-	signal?: AbortSignal,
-): Promise<void> {
-	const res = await fetch(`${BASE}/cancel`, {
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json', ...authHeaders() },
-		body: JSON.stringify({ threadId }),
-		signal,
-	});
-	if (!res.ok) {
-		const body = await res.text().catch(() => '');
-		throw new Error(
-			`Failed to cancel: ${res.status} ${res.statusText} — ${body}`,
-		);
-	}
-}
-
-// ---------------------------------------------------------------------------
-// Feedback
-// ---------------------------------------------------------------------------
-
-export type FeedbackRating = 'positive' | 'negative';
-
-export async function submitFeedback(
-	messageId: string,
-	rating: FeedbackRating,
-	comment?: string,
-): Promise<void> {
-	const res = await fetch(`${BASE}/messages/${messageId}/feedback`, {
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json', ...authHeaders() },
-		body: JSON.stringify({ rating, comment: comment ?? null }),
-	});
-	if (!res.ok) {
-		const body = await res.text().catch(() => '');
-		throw new Error(
-			`Failed to submit feedback: ${res.status} ${res.statusText} — ${body}`,
-		);
-	}
-}

frontend/src/api/browser/localstorage/get.ts

@@ -1,6 +1,9 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
 const get = (key: string): string | null => {
 	try {
-		return localStorage.getItem(key);
+		return localStorage.getItem(getScopedKey(key));
 	} catch (e) {
 		return '';
 	}

frontend/src/api/browser/localstorage/remove.ts

@@ -1,6 +1,9 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
 const remove = (key: string): boolean => {
 	try {
-		window.localStorage.removeItem(key);
+		localStorage.removeItem(getScopedKey(key));
 		return true;
 	} catch (e) {
 		return false;

frontend/src/api/browser/localstorage/set.ts

@@ -1,6 +1,9 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
 const set = (key: string, value: string): boolean => {
 	try {
-		localStorage.setItem(key, value);
+		localStorage.setItem(getScopedKey(key), value);
 		return true;
 	} catch (e) {
 		return false;

frontend/src/api/browser/sessionstorage/get.ts

@@ -0,0 +1,12 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
+const get = (key: string): string | null => {
+	try {
+		return sessionStorage.getItem(getScopedKey(key));
+	} catch (e) {
+		return '';
+	}
+};
+
+export default get;

frontend/src/api/browser/sessionstorage/remove.ts

@@ -0,0 +1,13 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
+const remove = (key: string): boolean => {
+	try {
+		sessionStorage.removeItem(getScopedKey(key));
+		return true;
+	} catch (e) {
+		return false;
+	}
+};
+
+export default remove;

frontend/src/api/browser/sessionstorage/set.ts

@@ -0,0 +1,13 @@
+/* eslint-disable no-restricted-globals */
+import { getScopedKey } from 'utils/storage';
+
+const set = (key: string, value: string): boolean => {
+	try {
+		sessionStorage.setItem(getScopedKey(key), value);
+		return true;
+	} catch (e) {
+		return false;
+	}
+};
+
+export default set;

frontend/src/api/generatedAPIInstance.ts

@@ -1,5 +1,6 @@
 import {
 	interceptorRejected,
+	interceptorsRequestBasePath,
 	interceptorsRequestResponse,
 	interceptorsResponse,
 } from 'api';
@@ -17,6 +18,7 @@ export const GeneratedAPIInstance = <T>(
 	return generatedAPIAxiosInstance({ ...config }).then(({ data }) => data);
 };
 
+generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
 generatedAPIAxiosInstance.interceptors.response.use(
 	interceptorsResponse,

frontend/src/api/index.ts

@@ -11,6 +11,7 @@ import axios, {
 import { ENVIRONMENT } from 'constants/env';
 import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';
 
 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
@@ -67,6 +68,39 @@ export const interceptorsRequestResponse = (
 	return value;
 };
 
+// Strips the leading '/' from path and joins with base — idempotent if already prefixed.
+// e.g. prependBase('/signoz/', '/api/v1/') → '/signoz/api/v1/'
+function prependBase(base: string, path: string): string {
+	return path.startsWith(base) ? path : base + path.slice(1);
+}
+
+// Prepends the runtime base path to outgoing requests so API calls work under
+// a URL prefix (e.g. /signoz/api/v1/…). No-op for root deployments and dev
+// (dev baseURL is a full http:// URL, not an absolute path).
+export const interceptorsRequestBasePath = (
+	value: InternalAxiosRequestConfig,
+): InternalAxiosRequestConfig => {
+	const basePath = getBasePath();
+	if (basePath === '/') {
+		return value;
+	}
+
+	if (value.baseURL?.startsWith('/')) {
+		// Production relative baseURL: '/api/v1/' → '/signoz/api/v1/'
+		value.baseURL = prependBase(basePath, value.baseURL);
+	} else if (value.baseURL?.startsWith('http')) {
+		// Dev absolute baseURL (VITE_FRONTEND_API_ENDPOINT): 'https://host/api/v1/' → 'https://host/signoz/api/v1/'
+		const url = new URL(value.baseURL);
+		url.pathname = prependBase(basePath, url.pathname);
+		value.baseURL = url.toString();
+	} else if (!value.baseURL && value.url?.startsWith('/')) {
+		// Orval-generated client (empty baseURL, path in url): '/api/signoz/v1/rules' → '/signoz/api/signoz/v1/rules'
+		value.url = prependBase(basePath, value.url);
+	}
+
+	return value;
+};
+
 export const interceptorRejected = async (
 	value: AxiosResponse<any>,
 ): Promise<AxiosResponse<any>> => {
@@ -133,6 +167,7 @@ const instance = axios.create({
 });
 
 instance.interceptors.request.use(interceptorsRequestResponse);
+instance.interceptors.request.use(interceptorsRequestBasePath);
 instance.interceptors.response.use(interceptorsResponse, interceptorRejected);
 
 export const AxiosAlertManagerInstance = axios.create({
@@ -147,6 +182,7 @@ ApiV2Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV2Instance.interceptors.request.use(interceptorsRequestBasePath);
 
 // axios V3
 export const ApiV3Instance = axios.create({
@@ -158,6 +194,7 @@ ApiV3Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV3Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V4
@@ -170,6 +207,7 @@ ApiV4Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV4Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V5
@@ -182,6 +220,7 @@ ApiV5Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV5Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios Base
@@ -194,6 +233,7 @@ LogEventAxiosInstance.interceptors.response.use(
 	interceptorRejectedBase,
 );
 LogEventAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
+LogEventAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 AxiosAlertManagerInstance.interceptors.response.use(
@@ -201,6 +241,7 @@ AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorRejected,
 );
 AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestResponse);
+AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestBasePath);
 
 export { apiV1 };
 export default instance;

frontend/src/api/logs/livetail.ts

@@ -3,13 +3,16 @@ import getLocalStorageKey from 'api/browser/localstorage/get';
 import { ENVIRONMENT } from 'constants/env';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { EventSourcePolyfill } from 'event-source-polyfill';
+import { withBasePath } from 'utils/basePath';
 
 // 10 min in ms
 const TIMEOUT_IN_MS = 10 * 60 * 1000;
 
 export const LiveTail = (queryParams: string): EventSourcePolyfill =>
 	new EventSourcePolyfill(
-		`${ENVIRONMENT.baseURL}${apiV1}logs/tail?${queryParams}`,
+		ENVIRONMENT.baseURL
+			? `${ENVIRONMENT.baseURL}${apiV1}logs/tail?${queryParams}`
+			: withBasePath(`${apiV1}logs/tail?${queryParams}`),
 		{
 			headers: {
 				Authorization: `Bearer ${getLocalStorageKey(LOCALSTORAGE.AUTH_TOKEN)}`,

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/CeleryTask/useNavigateToExplorer.ts

@@ -12,6 +12,7 @@ import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { withBasePath } from 'utils/basePath';
 
 export interface NavigateToExplorerProps {
 	filters: TagFilterItem[];
@@ -133,7 +134,7 @@ export function useNavigateToExplorer(): (
 				QueryParams.compositeQuery
 			}=${JSONCompositeQuery}`;
 
-			window.open(newExplorerPath, sameTab ? '_self' : '_blank');
+			window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
 		},
 		[
 			prepareQuery,

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

@@ -9,6 +9,7 @@ import { CreditCard, MessageSquareText, X } from 'lucide-react';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 export default function ChatSupportGateway(): JSX.Element {
 	const { notifications } = useNotifications();
@@ -54,7 +55,7 @@ export default function ChatSupportGateway(): JSX.Element {
 		});
 
 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};
 

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/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss

@@ -1,8 +1,14 @@
 .download-popover {
 	.ant-popover-inner {
 		border-radius: 4px;
-		background-color: var(--l2-background);
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			var(--l2-background) 0%,
+			var(--l3-background) 98.68%
+		);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
 		padding: 0 8px 12px 8px;
 		margin: 6px 0;
 	}
@@ -13,7 +19,7 @@
 
 		.title {
 			display: flex;
-			color: var(--l1-foreground);
+			color: var(--l3-foreground);
 			font-family: Inter;
 			font-size: 11px;
 			font-style: normal;
@@ -32,7 +38,7 @@
 			flex-direction: column;
 
 			:global(.ant-radio-wrapper) {
-				color: var(--l1-foreground);
+				color: var(--foreground);
 				font-family: Inter;
 				font-size: 13px;
 			}

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';
@@ -28,6 +31,7 @@ import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
+import { getAbsoluteUrl } from 'utils/basePath';
 import { toAPIError } from 'utils/errorUtils';
 
 import DeleteMemberDialog from './DeleteMemberDialog';
@@ -204,7 +208,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 +343,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();
 			}
 
@@ -381,7 +388,7 @@ function EditMemberDrawer({
 				pathParams: { id: member.id },
 			});
 			if (response?.data?.token) {
-				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
+				const link = getAbsoluteUrl(`/password-reset?token=${response.data.token}`);
 				setResetLink(link);
 				setResetLinkExpiresAt(
 					response.data.expiresAt
@@ -397,6 +404,7 @@ function EditMemberDrawer({
 				onClose();
 			} else {
 				toast.error('Failed to generate password reset link', {
+					richColors: true,
 					position: 'top-right',
 				});
 			}
@@ -420,12 +428,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 +597,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 +618,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 +639,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 +647,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 +669,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/HeaderRightSection/HeaderRightSection.tsx

@@ -1,15 +1,8 @@
 import { useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button, Tooltip } from '@signozhq/ui';
-import { Popover } from 'antd';
+import { Button, Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
-import AIAssistantIcon from 'container/AIAssistant/components/AIAssistantIcon';
-import {
-	openAIAssistant,
-	useAIAssistantStore,
-} from 'container/AIAssistant/store/useAIAssistantStore';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { Globe, Inbox, SquarePen } from 'lucide-react';
 
 import AnnouncementsModal from './AnnouncementsModal';
@@ -36,7 +29,6 @@ function HeaderRightSection({
 	const [openAnnouncementsModal, setOpenAnnouncementsModal] = useState(false);
 
 	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
-	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 
 	const handleOpenFeedbackModal = useCallback((): void => {
 		logEvent('Feedback: Clicked', {
@@ -75,22 +67,9 @@ function HeaderRightSection({
 	};
 
 	const isLicenseEnabled = isEnterpriseSelfHostedUser || isCloudUser;
-	const isDrawerOpen = useAIAssistantStore((s) => s.isDrawerOpen);
 
 	return (
 		<div className="header-right-section-container">
-			{isAIAssistantEnabled && !isDrawerOpen && (
-				<Tooltip title="AI Assistant">
-					<Button
-						variant="ghost"
-						size="icon"
-						onClick={openAIAssistant}
-						aria-label="Open AI Assistant"
-						prefix={<AIAssistantIcon />}
-					/>
-				</Tooltip>
-			)}
-
 			{enableFeedback && isLicenseEnabled && (
 				<Popover
 					rootClassName="header-section-popover-root"
@@ -104,11 +83,12 @@ function HeaderRightSection({
 					onOpenChange={handleOpenFeedbackModalChange}
 				>
 					<Button
-						variant="ghost"
-						size="icon"
-						prefix={<SquarePen size={14} />}
+						className="share-feedback-btn periscope-btn ghost"
+						icon={<SquarePen size={14} />}
 						onClick={handleOpenFeedbackModal}
-					/>
+					>
+						Feedback
+					</Button>
 				</Popover>
 			)}
 
@@ -125,9 +105,8 @@ function HeaderRightSection({
 					onOpenChange={handleOpenAnnouncementsModalChange}
 				>
 					<Button
-						variant="ghost"
-						size="icon"
-						prefix={<Inbox size={14} />}
+						icon={<Inbox size={14} />}
+						className="periscope-btn ghost announcements-btn"
 						onClick={(): void => {
 							logEvent('Announcements: Clicked', {
 								page: location.pathname,
@@ -150,11 +129,12 @@ function HeaderRightSection({
 					onOpenChange={handleOpenShareURLModalChange}
 				>
 					<Button
-						variant="ghost"
-						size="icon"
-						prefix={<Globe size={14} />}
+						className="share-link-btn periscope-btn ghost"
+						icon={<Globe size={14} />}
 						onClick={handleOpenShareURLModal}
-					/>
+					>
+						Share
+					</Button>
 				</Popover>
 			)}
 		</div>

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -13,6 +13,7 @@ import GetMinMax from 'lib/getMinMax';
 import { Check, Info, Link2 } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { getAbsoluteUrl } from 'utils/basePath';
 
 const routesToBeSharedWithTime = [
 	ROUTES.LOGS_EXPLORER,
@@ -80,17 +81,13 @@ function ShareURLModal(): JSX.Element {
 
 				urlQuery.delete(QueryParams.relativeTime);
 
-				currentUrl = `${window.location.origin}${
-					location.pathname
-				}?${urlQuery.toString()}`;
+				currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
 			} else {
 				urlQuery.delete(QueryParams.startTime);
 				urlQuery.delete(QueryParams.endTime);
 
 				urlQuery.set(QueryParams.relativeTime, selectedTime);
-				currentUrl = `${window.location.origin}${
-					location.pathname
-				}?${urlQuery.toString()}`;
+				currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
 			}
 		}
 

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

@@ -46,10 +46,6 @@ jest.mock('hooks/useGetTenantLicense', () => ({
 	useGetTenantLicense: jest.fn(),
 }));
 
-jest.mock('hooks/useIsAIAssistantEnabled', () => ({
-	useIsAIAssistantEnabled: (): boolean => false,
-}));
-
 const mockLogEvent = logEvent as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 const mockUseGetTenantLicense = useGetTenantLicense as jest.Mock;

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';
@@ -17,6 +14,7 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
+import { getBaseUrl } from 'utils/basePath';
 import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
@@ -191,7 +189,7 @@ function InviteMembersModal({
 					email: row.email.trim(),
 					name: '',
 					role: row.role as ROLES,
-					frontendBaseUrl: window.location.origin,
+					frontendBaseUrl: getBaseUrl(),
 				});
 			} else {
 				await inviteUsers({
@@ -199,11 +197,14 @@ function InviteMembersModal({
 						email: row.email.trim(),
 						name: '',
 						role: row.role,
-						frontendBaseUrl: window.location.origin,
+						frontendBaseUrl: getBaseUrl(),
 					})),
 				});
 			}
-			toast.success('Invites sent successfully', { position: 'top-right' });
+			toast.success('Invites sent successfully', {
+				richColors: true,
+				position: 'top-right',
+			});
 			resetAndClose();
 			onComplete?.();
 		} catch (err) {
@@ -274,6 +275,7 @@ function InviteMembersModal({
 											<Button
 												variant="ghost"
 												color="destructive"
+												className="remove-team-member-button"
 												onClick={(): void => removeRow(row.id)}
 												aria-label="Remove row"
 											>
@@ -288,16 +290,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 +305,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 +318,7 @@ function InviteMembersModal({
 						type="button"
 						variant="solid"
 						color="secondary"
+						size="sm"
 						onClick={resetAndClose}
 					>
 						<X size={12} />
@@ -326,6 +328,7 @@ function InviteMembersModal({
 					<Button
 						variant="solid"
 						color="primary"
+						size="sm"
 						onClick={handleSubmit}
 						disabled={isSubmitDisabled}
 						loading={isSubmitting}

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -14,6 +14,7 @@ import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -154,7 +155,7 @@ function LaunchChatSupport({
 		});
 
 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};
 

frontend/src/components/LearnMore/LearnMore.tsx

@@ -1,6 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { ArrowUpRight } from 'lucide-react';
+import { openInNewTab } from 'utils/navigation';
 
 import './LearnMore.styles.scss';
 
@@ -14,7 +15,7 @@ function LearnMore({ text, url, onClick }: LearnMoreProps): JSX.Element {
 	const handleClick = (): void => {
 		onClick?.();
 		if (url) {
-			window.open(url, '_blank');
+			openInNewTab(url);
 		}
 	};
 	return (

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

@@ -3,8 +3,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
-import { Button } from '@signozhq/ui';
-import { Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
+import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
 import type { RadioChangeEvent } from 'antd/lib';
 import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
@@ -364,9 +363,7 @@ function LogDetailInner({
 								mouseLeaveDelay={0}
 							>
 								<Button
-									variant="outlined"
-									color="secondary"
-									prefix={<ChevronUp size={14} />}
+									icon={<ChevronUp size={14} />}
 									className="log-arrow-btn log-arrow-btn-up"
 									disabled={isPrevDisabled}
 									onClick={(): void => handleNavigateLog({ direction: 'previous' })}
@@ -378,9 +375,7 @@ function LogDetailInner({
 								mouseLeaveDelay={0}
 							>
 								<Button
-									variant="outlined"
-									color="secondary"
-									prefix={<ChevronDown size={14} />}
+									icon={<ChevronDown size={14} />}
 									className="log-arrow-btn log-arrow-btn-down"
 									disabled={isNextDisabled}
 									onClick={(): void => handleNavigateLog({ direction: 'next' })}
@@ -390,10 +385,8 @@ function LogDetailInner({
 						{showOpenInExplorerBtn && (
 							<div>
 								<Button
-									variant="outlined"
-									color="secondary"
-									prefix={<Compass size={16} />}
 									className="open-in-explorer-btn"
+									icon={<Compass size={16} />}
 									onClick={handleOpenInExplorer}
 								>
 									Open in Explorer
@@ -489,10 +482,8 @@ function LogDetailInner({
 								mouseLeaveDelay={0}
 							>
 								<Button
-									variant="link"
-									color="secondary"
-									size="sm"
-									prefix={<Filter size={12} />}
+									className="action-btn"
+									icon={<Filter size={16} />}
 									onClick={handleFilterVisible}
 								/>
 							</Tooltip>
@@ -507,10 +498,8 @@ function LogDetailInner({
 							mouseLeaveDelay={0}
 						>
 							<Button
-								variant="link"
-								color="secondary"
-								size="sm"
-								prefix={<Copy size={12} />}
+								className="action-btn"
+								icon={<Copy size={16} />}
 								onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
 							/>
 						</Tooltip>

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/Logs/TableView/config.ts

@@ -1,5 +1,4 @@
 import { CSSProperties } from 'react';
-import { Color } from '@signozhq/design-tokens';
 import { TableProps } from 'antd';
 
 export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
@@ -8,7 +7,7 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 		paddingBottom: 6,
 		paddingRight: 8,
 		paddingLeft: 8,
-		color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_400,
+		color: isDarkMode ? 'var(--bg-vanilla-400)' : 'var(--bg-slate-400)',
 		fontSize: '14px',
 		fontStyle: 'normal',
 		fontWeight: 400,

frontend/src/components/Logs/TableView/styles.ts

@@ -1,4 +1,3 @@
-import { Color } from '@signozhq/design-tokens';
 import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
 
@@ -11,7 +10,7 @@ interface TableBodyContentProps {
 export const TableBodyContent = styled.div<TableBodyContentProps>`
 	margin-bottom: 0;
 	color: ${(props): string =>
-		props.isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_400};
+		props.isDarkMode ? 'var(--bg-vanilla-400, #c0c1c3)' : 'var(--bg-slate-400)'};
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;

frontend/src/components/Logs/TableView/useTableView.styles.scss

@@ -33,9 +33,8 @@
 	display: flex;
 	align-items: center;
 
-	.timestamp-text {
-		color: var(--l1-foreground);
-		margin: 0 !important;
+	p {
+		margin-bottom: 0;
 	}
 }
 

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

@@ -123,7 +123,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								return {
 									children: (
 										<div className="table-timestamp">
-											<p className={cx('timestamp-text text', fontSize)}>{date}</p>
+											<p className={cx('text', fontSize)}>{date}</p>
 										</div>
 									),
 								};

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -35,7 +35,7 @@
 					}
 
 					.text {
-						color: var(--l1-foreground);
+						color: var(--muted-foreground);
 						font-family: Inter;
 						font-size: 11px;
 						font-style: normal;
@@ -93,7 +93,7 @@
 				gap: 12px;
 
 				.title {
-					color: var(--l1-foreground);
+					color: var(--muted-foreground);
 					font-family: Inter;
 					font-size: 11px;
 					font-style: normal;
@@ -139,8 +139,7 @@
 					line-height: 18px;
 					letter-spacing: 0.08em;
 					text-align: left;
-
-					color: var(--l1-foreground);
+					color: var(--muted-foreground);
 				}
 
 				.menu-items {
@@ -178,7 +177,7 @@
 				padding: 12px;
 
 				.title {
-					color: var(--l1-foreground);
+					color: var(--muted-foreground);
 					font-family: Inter;
 					font-size: 11px;
 					font-style: normal;
@@ -331,7 +330,7 @@
 				}
 
 				.title {
-					color: var(--l1-foreground);
+					color: var(--muted-foreground);
 					font-family: Inter;
 					font-size: 11px;
 					font-style: normal;
@@ -487,3 +486,169 @@
 		}
 	}
 }
+
+.lightMode {
+	.format-options-popover {
+		.ant-popover-inner {
+			border: 1px solid var(--l1-border);
+			background: linear-gradient(
+				139deg,
+				rgba(255, 255, 255, 0.8) 0%,
+				rgba(255, 255, 255, 0.9) 98.68%
+			);
+			box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
+
+			.nested-menu-container {
+				.font-size-dropdown {
+					.back-btn {
+						.text {
+							color: var(--l2-background);
+						}
+					}
+
+					.content {
+						.option-btn {
+							.text {
+								color: var(--l2-background);
+							}
+
+							.text:hover {
+								color: var(--l3-background);
+							}
+						}
+					}
+				}
+
+				.add-new-column-container {
+					.add-new-column-header {
+						.title {
+							color: var(--l2-foreground);
+						}
+					}
+
+					.add-new-column-content {
+						.column-format-new-options {
+							.column-name {
+								color: var(--l2-background);
+
+								&.selected {
+									background-color: var(--l3-background);
+								}
+							}
+						}
+
+						.loading-container {
+							color: var(--l2-background);
+						}
+					}
+				}
+
+				.font-size-container {
+					.title {
+						color: var(--l2-foreground);
+					}
+
+					.value {
+						.font-value {
+							color: var(--l2-background);
+						}
+					}
+				}
+
+				.horizontal-line {
+					background: var(--l3-background);
+				}
+
+				.item-content {
+					.column-divider {
+						border-top: 2px solid var(--l1-border);
+					}
+				}
+
+				.max-lines-per-row {
+					.title {
+						color: var(--l2-foreground);
+
+						.lucide {
+							color: var(--l1-foreground);
+						}
+					}
+
+					.max-lines-per-row-input {
+						border: 1px solid var(--l1-border);
+
+						.periscope-btn {
+							background: var(--l3-background);
+						}
+					}
+				}
+
+				.menu-container {
+					.title {
+						color: var(--l2-foreground);
+					}
+
+					.item {
+						.item-label {
+							color: var(--l2-background);
+						}
+					}
+				}
+
+				.selected-item-content-container {
+					.title {
+						color: var(--l2-foreground);
+
+						.lucide {
+							color: var(--l1-foreground);
+						}
+					}
+
+					.horizontal-line {
+						background: var(--l3-background);
+					}
+
+					.item-content {
+						.max-lines-per-row-input {
+							border: 1px solid var(--l1-border);
+
+							.periscope-btn {
+								background: var(--l3-background);
+							}
+						}
+
+						.column-format,
+						.column-format-new-options {
+							.column-name {
+								color: var(--l1-foreground);
+							}
+						}
+					}
+				}
+
+				&.active {
+					.nested-menu-container {
+						backdrop-filter: blur(18px);
+
+						.item {
+							.item-label {
+								color: var(--l1-foreground);
+							}
+						}
+					}
+
+					.selected-item-content-container {
+						border: 1px solid var(--l1-border);
+						background: linear-gradient(
+							139deg,
+							rgba(255, 255, 255, 0.8) 0%,
+							rgba(255, 255, 255, 0.9) 98.68%
+						);
+
+						box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
+					}
+				}
+			}
+		}
+	}
+}

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/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -20,6 +20,7 @@ import {
 	KAFKA_SETUP_DOC_LINK,
 	MessagingQueueHealthCheckService,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuid } from 'uuid';
 
 import './MessagingQueueHealthCheck.styles.scss';
@@ -76,7 +77,7 @@ function ErrorTitleAndKey({
 		if (isCloudUserVal && !!link) {
 			history.push(link);
 		} else {
-			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
+			openInNewTab(KAFKA_SETUP_DOC_LINK);
 		}
 	};
 	return {

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/QueryBuilderV2/QueryV2/previousQuery.utils.ts

@@ -1,10 +1,13 @@
+import getSessionStorageApi from 'api/browser/sessionstorage/get';
+import removeSessionStorageApi from 'api/browser/sessionstorage/remove';
+import setSessionStorageApi from 'api/browser/sessionstorage/set';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 export const PREVIOUS_QUERY_KEY = 'previousQuery';
 
 function getPreviousQueryFromStore(): Record<string, IBuilderQuery> {
 	try {
-		const raw = sessionStorage.getItem(PREVIOUS_QUERY_KEY);
+		const raw = getSessionStorageApi(PREVIOUS_QUERY_KEY);
 		if (!raw) {
 			return {};
 		}
@@ -17,7 +20,7 @@ function getPreviousQueryFromStore(): Record<string, IBuilderQuery> {
 
 function writePreviousQueryToStore(store: Record<string, IBuilderQuery>): void {
 	try {
-		sessionStorage.setItem(PREVIOUS_QUERY_KEY, JSON.stringify(store));
+		setSessionStorageApi(PREVIOUS_QUERY_KEY, JSON.stringify(store));
 	} catch {
 		// ignore quota or serialization errors
 	}
@@ -63,7 +66,7 @@ export const removeKeyFromPreviousQuery = (key: string): void => {
 
 export const clearPreviousQuery = (): void => {
 	try {
-		sessionStorage.removeItem(PREVIOUS_QUERY_KEY);
+		removeSessionStorageApi(PREVIOUS_QUERY_KEY);
 	} catch {
 		// no-op
 	}

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/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/AnnouncementTooltip.styles.scss

@@ -11,8 +11,6 @@
 	&__title {
 		font-weight: 500;
 		font-size: 15px;
-		padding: 0;
-		margin: 0;
 	}
 
 	&__container {
@@ -21,7 +19,7 @@
 		background-color: var(--primary-background);
 		color: var(--primary-foreground);
 		border-radius: 8px;
-		padding: 12px;
+		padding: 16px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 		z-index: 1000;
 	}
@@ -45,23 +43,14 @@
 	&__footer {
 		display: flex;
 		justify-content: flex-end;
+	}
 
-		// TODO: Need to override the button styles for this component due to container styles.
-		// Fix - @aks07
-
-		&__button {
-			margin-top: 12px;
-			color: var(--base-black);
-			background-color: var(--base-white);
-			border: none;
-			padding: 6px 12px;
-			border-radius: 4px;
-			cursor: pointer;
-
-			&:hover {
-				background-color: var(--base-white);
-				color: var(--bg-robin-500);
-			}
-		}
+	&__button {
+		background: var(--secondary-background);
+		color: var(--secondary-foreground);
+		border: none;
+		padding: 6px 12px;
+		border-radius: 4px;
+		cursor: pointer;
 	}
 }

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { Button } from '@signozhq/ui';
+import { Button, Typography } from 'antd';
 import classNames from 'classnames';
-import { Check, X } from 'lucide-react';
+import { X } from 'lucide-react';
 
 import './AnnouncementTooltip.styles.scss';
 
@@ -46,12 +46,13 @@ function AnnouncementTooltip({
 				className={classNames('announcement-tooltip__container', className)}
 				style={{
 					top: position.top,
-					left: position.left + 20,
+					left: position.left + 30,
 				}}
 			>
 				<div className="announcement-tooltip__header">
-					<p className="announcement-tooltip__title">{title}</p>
-
+					<Typography.Text className="announcement-tooltip__title">
+						{title}
+					</Typography.Text>
 					<X
 						size={18}
 						onClick={closeTooltip}
@@ -60,13 +61,7 @@ function AnnouncementTooltip({
 				</div>
 				<p className="announcement-tooltip__message">{message}</p>
 				<div className="announcement-tooltip__footer">
-					<Button
-						variant="solid"
-						color="primary"
-						onClick={closeTooltip}
-						prefix={<Check size={16} />}
-						className="announcement-tooltip__footer__button"
-					>
+					<Button onClick={closeTooltip} className="announcement-tooltip__button">
 						Okay
 					</Button>
 				</div>

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -108,8 +108,7 @@ function DynamicColumnTable({
 		// Update URL with new page number while preserving other params
 		urlQuery.set('page', page.toString());
 
-		const newUrl = `${window.location.pathname}?${urlQuery.toString()}`;
-		safeNavigate(newUrl);
+		safeNavigate({ search: `?${urlQuery.toString()}` });
 
 		// Call original pagination handler if provided
 		if (pagination?.onChange && !!pageSize) {

frontend/src/components/ResizeTable/utils.ts

@@ -1,3 +1,6 @@
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
+
 import { DynamicColumnsKey } from './contants';
 import {
 	GetNewColumnDataFunction,
@@ -12,7 +15,7 @@ export const getVisibleColumns: GetVisibleColumnsFunction = ({
 }) => {
 	let columnVisibilityData: { [key: string]: boolean };
 	try {
-		const storedData = localStorage.getItem(tablesource);
+		const storedData = getLocalStorageKey(tablesource);
 		if (typeof storedData === 'string' && dynamicColumns) {
 			columnVisibilityData = JSON.parse(storedData);
 			return dynamicColumns.filter((column) => {
@@ -28,7 +31,7 @@ export const getVisibleColumns: GetVisibleColumnsFunction = ({
 			initialColumnVisibility[key] = false;
 		});
 
-		localStorage.setItem(tablesource, JSON.stringify(initialColumnVisibility));
+		setLocalStorageKey(tablesource, JSON.stringify(initialColumnVisibility));
 	} catch (error) {
 		console.error(error);
 	}
@@ -42,14 +45,14 @@ export const setVisibleColumns = ({
 	dynamicColumns,
 }: SetVisibleColumnsProps): void => {
 	try {
-		const storedData = localStorage.getItem(tablesource);
+		const storedData = getLocalStorageKey(tablesource);
 		if (typeof storedData === 'string' && dynamicColumns) {
 			const columnVisibilityData = JSON.parse(storedData);
 			const { key } = dynamicColumns[index];
 			if (key) {
 				columnVisibilityData[key] = checked;
 			}
-			localStorage.setItem(tablesource, JSON.stringify(columnVisibilityData));
+			setLocalStorageKey(tablesource, JSON.stringify(columnVisibilityData));
 		}
 	} catch (error) {
 		console.error(error);

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

@@ -7,9 +7,7 @@ import { SpinerStyle } from './styles';
 function Spinner({ size, tip, height, style }: SpinnerProps): JSX.Element {
 	return (
 		<SpinerStyle height={height} style={style}>
-			<Spin spinning size={size} tip={tip} indicator={<LoadingOutlined spin />}>
-				<div />
-			</Spin>
+			<Spin spinning size={size} tip={tip} indicator={<LoadingOutlined spin />} />
 		</SpinerStyle>
 	);
 }

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 {