fix(app-routes): use redirect component to avoid flash old routes due to useEffect

fix(date-time-selection): reset to the correct value under modal (#10813 )
fix: show alert type in classic experience edit (#10847 )
2026-04-06 20:20:28 +01:00 · 2026-04-06 10:41:12 -03:00 · 2026-04-06 13:07:23 +00:00 · 2026-04-06 11:00:41 +00:00 · 2026-04-06 10:45:41 +00:00 · 2026-04-06 10:41:56 +00:00
519 changed files with 17461 additions and 7176 deletions
--- a/.github/workflows/integrationci.yaml
+++ b/.github/workflows/integrationci.yaml
@@ -56,7 +56,6 @@ jobs:
          - postgres
          - sqlite
        sqlite-mode:
-          - delete
          - wal
        clickhouse-version:
          - 25.5.6
@@ -65,9 +64,6 @@ jobs:
          - v0.142.0
        postgres-version:
          - 15
-        exclude:
-          - sqlstore-provider: postgres
-            sqlite-mode: wal
    if: |
      ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-integrate')
--- a/ee/query-service/rules/anomaly.go
+++ b/ee/query-service/rules/anomaly.go
@@ -5,7 +5,6 @@ import (
 	"encoding/json"
 	"fmt"
 	"log/slog"
-	"strings"
 	"sync"
 	"time"

@@ -64,12 +63,12 @@ func NewAnomalyRule(
 		BaseRule: baseRule,
 	}

-	switch strings.ToLower(p.RuleCondition.Seasonality) {
-	case "hourly":
+	switch p.RuleCondition.Seasonality {
+	case ruletypes.SeasonalityHourly:
 		t.seasonality = anomaly.SeasonalityHourly
-	case "daily":
+	case ruletypes.SeasonalityDaily:
 		t.seasonality = anomaly.SeasonalityDaily
-	case "weekly":
+	case ruletypes.SeasonalityWeekly:
 		t.seasonality = anomaly.SeasonalityWeekly
 	default:
 		t.seasonality = anomaly.SeasonalityDaily
--- a/ee/query-service/rules/anomaly_test.go
+++ b/ee/query-service/rules/anomaly_test.go
@@ -67,7 +67,7 @@ func TestAnomalyRule_NoData_AlertOnAbsent(t *testing.T) {
 				}},
 			},
 			SelectedQuery: "A",
-			Seasonality:   "daily",
+			Seasonality:   ruletypes.SeasonalityDaily,
 			Thresholds: &ruletypes.RuleThresholdData{
 				Kind: ruletypes.BasicThresholdKind,
 				Spec: ruletypes.BasicRuleThresholds{{
@@ -170,7 +170,7 @@ func TestAnomalyRule_NoData_AbsentFor(t *testing.T) {
 				}},
 			},
 			SelectedQuery: "A",
-			Seasonality:   "daily",
+			Seasonality:   ruletypes.SeasonalityDaily,
 			Thresholds: &ruletypes.RuleThresholdData{
 				Kind: ruletypes.BasicThresholdKind,
 				Spec: ruletypes.BasicRuleThresholds{{
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -62,29 +62,6 @@
 		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
 	</head>
 	<body data-theme="default">
-		<script>
-			// Apply theme class synchronously before React renders to prevent flash.
-			// Mirrors the logic in ThemeProvider (hooks/useDarkMode/index.tsx).
-			(function () {
-				try {
-					var theme = localStorage.getItem('THEME');
-					var autoSwitch = localStorage.getItem('THEME_AUTO_SWITCH') === 'true';
-					if (autoSwitch) {
-						theme = window.matchMedia('(prefers-color-scheme: dark)').matches
-							? 'dark'
-							: 'light';
-					}
-					if (theme === 'light') {
-						document.body.classList.add('lightMode');
-					} else {
-						// Default to dark when no preference is stored
-						document.body.classList.add('dark', 'darkMode');
-					}
-				} catch (e) {
-					document.body.classList.add('dark', 'darkMode');
-				}
-			})();
-		</script>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>

--- a/frontend/jest.config.ts
+++ b/frontend/jest.config.ts
@@ -41,7 +41,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'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)/)',
+		'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/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -47,13 +47,14 @@
    "@radix-ui/react-tooltip": "1.0.7",
    "@sentry/react": "8.41.0",
    "@sentry/vite-plugin": "2.22.6",
+    "@signozhq/badge": "0.0.2",
    "@signozhq/button": "0.0.2",
    "@signozhq/calendar": "0.0.0",
    "@signozhq/callout": "0.0.2",
    "@signozhq/checkbox": "0.0.2",
    "@signozhq/combobox": "0.0.2",
    "@signozhq/command": "0.0.0",
-    "@signozhq/design-tokens": "2.1.4",
+    "@signozhq/design-tokens": "2.1.1",
    "@signozhq/dialog": "^0.0.2",
    "@signozhq/drawer": "0.0.4",
    "@signozhq/icons": "0.1.0",
@@ -61,8 +62,11 @@
    "@signozhq/popover": "0.0.0",
    "@signozhq/radio-group": "0.0.2",
    "@signozhq/resizable": "0.0.0",
+    "@signozhq/sonner": "0.1.0",
+    "@signozhq/switch": "0.0.2",
    "@signozhq/table": "0.3.7",
    "@signozhq/toggle-group": "0.0.1",
+    "@signozhq/tooltip": "0.0.2",
    "@signozhq/ui": "0.0.5",
    "@tanstack/react-table": "8.21.3",
    "@tanstack/react-virtual": "3.13.22",
--- a/frontend/public/Logos/hasura.svg
+++ b/frontend/public/Logos/hasura.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#1eb4d4" viewBox="0 0 24 24"><title>Hasura</title><path d="M23.558 8.172c.707-2.152.282-6.447-1.09-8.032a.42.42 0 0 0-.664.051l-1.69 2.59a1.32 1.32 0 0 1-1.737.276C16.544 1.885 14.354 1.204 12 1.204s-4.544.68-6.378 1.853a1.326 1.326 0 0 1-1.736-.276L2.196.191A.42.42 0 0 0 1.532.14C.16 1.728-.265 6.023.442 8.172c.236.716.3 1.472.16 2.207-.137.73-.276 1.61-.276 2.223C.326 18.898 5.553 24 11.997 24c6.447 0 11.671-5.105 11.671-11.398 0-.613-.138-1.494-.276-2.223a4.47 4.47 0 0 1 .166-2.207m-11.56 13.284c-4.984 0-9.036-3.96-9.036-8.827q0-.239.014-.473c.18-3.316 2.243-6.15 5.16-7.5 1.17-.546 2.481-.848 3.864-.848s2.69.302 3.864.85c2.917 1.351 4.98 4.187 5.16 7.501q.013.236.014.473c-.003 4.864-4.057 8.824-9.04 8.824m3.915-5.43-2.31-3.91-1.98-3.26a.26.26 0 0 0-.223-.125H9.508a.26.26 0 0 0-.227.13.25.25 0 0 0 .003.254l1.895 3.109-2.542 3.787a.25.25 0 0 0-.011.259.26.26 0 0 0 .23.132h1.905a.26.26 0 0 0 .218-.116l1.375-2.096 1.233 2.088a.26.26 0 0 0 .224.127h1.878c.094 0 .18-.049.224-.127a.24.24 0 0 0 0-.251z"/></svg>
--- a/frontend/public/Logos/n8n.svg
+++ b/frontend/public/Logos/n8n.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#ea4b71" viewBox="0 0 24 24"><title>n8n</title><path d="M21.474 5.684a2.53 2.53 0 0 0-2.447 1.895H16.13a2.526 2.526 0 0 0-2.492 2.11l-.103.624a1.26 1.26 0 0 1-1.246 1.055h-1.001a2.527 2.527 0 0 0-4.893 0H4.973a2.527 2.527 0 1 0 0 1.264h1.422a2.527 2.527 0 0 0 4.894 0h1a1.26 1.26 0 0 1 1.247 1.055l.103.623a2.526 2.526 0 0 0 2.492 2.111h.37a2.527 2.527 0 1 0 0-1.263h-.37a1.26 1.26 0 0 1-1.246-1.056l-.103-.623A2.52 2.52 0 0 0 13.96 12a2.52 2.52 0 0 0 .82-1.48l.104-.622a1.26 1.26 0 0 1 1.246-1.056h2.896a2.527 2.527 0 1 0 2.447-3.158m0 1.263a1.263 1.263 0 0 1 1.263 1.263 1.263 1.263 0 0 1-1.263 1.264A1.263 1.263 0 0 1 20.21 8.21a1.263 1.263 0 0 1 1.264-1.263m-18.948 3.79A1.263 1.263 0 0 1 3.79 12a1.263 1.263 0 0 1-1.264 1.263A1.263 1.263 0 0 1 1.263 12a1.263 1.263 0 0 1 1.263-1.263m6.316 0A1.263 1.263 0 0 1 10.105 12a1.263 1.263 0 0 1-1.263 1.263A1.263 1.263 0 0 1 7.58 12a1.263 1.263 0 0 1 1.263-1.263m10.106 3.79a1.263 1.263 0 0 1 1.263 1.263 1.263 1.263 0 0 1-1.263 1.263 1.263 1.263 0 0 1-1.264-1.263 1.263 1.263 0 0 1 1.263-1.264"/></svg>
--- a/frontend/public/Logos/qwen.svg
+++ b/frontend/public/Logos/qwen.svg
--- a/frontend/src/AppRoutes/Private.tsx
+++ b/frontend/src/AppRoutes/Private.tsx
@@ -1,4 +1,4 @@
-import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
+import { ReactChild, useCallback, useMemo } from 'react';
 import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
@@ -8,12 +8,10 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import history from 'lib/history';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
-import { Organization } from 'types/api/user/getOrganization';
 import { USER_ROLES } from 'types/roles';
 import { routePermission } from 'utils/permission';

@@ -25,6 +23,7 @@ import routes, {
 	SUPPORT_ROUTE,
 } from './routes';

+// eslint-disable-next-line sonarjs/cognitive-complexity
 function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const location = useLocation();
 	const { pathname } = location;
@@ -57,7 +56,12 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const currentRoute = mapRoutes.get('current');
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();

-	const [orgData, setOrgData] = useState<Organization | undefined>(undefined);
+	const orgData = useMemo(() => {
+		if (org && org.length > 0 && org[0].id !== undefined) {
+			return org[0];
+		}
+		return undefined;
+	}, [org]);

 	const { data: usersData, isFetching: isFetchingUsers } = useListUsers({
 		query: {
@@ -75,214 +79,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return remainingUsers.length === 1;
 	}, [usersData?.data]);

-	useEffect(() => {
-		if (
-			isCloudUserVal &&
-			!isFetchingOrgPreferences &&
-			orgPreferences &&
-			!isFetchingUsers &&
-			usersData &&
-			usersData.data
-		) {
-			const isOnboardingComplete = orgPreferences?.find(
-				(preference: OrgPreference) =>
-					preference.name === ORG_PREFERENCES.ORG_ONBOARDING,
-			)?.value;
-
-			// Don't redirect to onboarding if workspace has issues (blocked, suspended, or restricted)
-			// User needs access to settings/billing to fix payment issues
-			const isWorkspaceBlocked = trialInfo?.workSpaceBlock;
-			const isWorkspaceSuspended = activeLicense?.state === LicenseState.DEFAULTED;
-			const isWorkspaceAccessRestricted =
-				activeLicense?.state === LicenseState.TERMINATED ||
-				activeLicense?.state === LicenseState.EXPIRED ||
-				activeLicense?.state === LicenseState.CANCELLED;
-
-			const hasWorkspaceIssue =
-				isWorkspaceBlocked || isWorkspaceSuspended || isWorkspaceAccessRestricted;
-
-			if (hasWorkspaceIssue) {
-				return;
-			}
-
-			const isFirstUser = checkFirstTimeUser();
-			if (
-				isFirstUser &&
-				!isOnboardingComplete &&
-				// if the current route is allowed to be overriden by org onboarding then only do the same
-				!ROUTES_NOT_TO_BE_OVERRIDEN.includes(pathname)
-			) {
-				history.push(ROUTES.ONBOARDING);
-			}
-		}
-	}, [
-		checkFirstTimeUser,
-		isCloudUserVal,
-		isFetchingOrgPreferences,
-		isFetchingUsers,
-		orgPreferences,
-		usersData,
-		pathname,
-		trialInfo?.workSpaceBlock,
-		activeLicense?.state,
-	]);
-
-	const navigateToWorkSpaceBlocked = useCallback((): void => {
-		const isRouteEnabledForWorkspaceBlockedState =
-			isAdmin &&
-			(pathname === ROUTES.SETTINGS ||
-				pathname === ROUTES.ORG_SETTINGS ||
-				pathname === ROUTES.MEMBERS_SETTINGS ||
-				pathname === ROUTES.BILLING ||
-				pathname === ROUTES.MY_SETTINGS);
-
-		if (
-			pathname &&
-			pathname !== ROUTES.WORKSPACE_LOCKED &&
-			!isRouteEnabledForWorkspaceBlockedState
-		) {
-			history.push(ROUTES.WORKSPACE_LOCKED);
-		}
-	}, [isAdmin, pathname]);
-
-	const navigateToWorkSpaceAccessRestricted = useCallback((): void => {
-		if (pathname && pathname !== ROUTES.WORKSPACE_ACCESS_RESTRICTED) {
-			history.push(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
-		}
-	}, [pathname]);
-
-	useEffect(() => {
-		if (!isFetchingActiveLicense && activeLicense) {
-			const isTerminated = activeLicense.state === LicenseState.TERMINATED;
-			const isExpired = activeLicense.state === LicenseState.EXPIRED;
-			const isCancelled = activeLicense.state === LicenseState.CANCELLED;
-
-			const isWorkspaceAccessRestricted = isTerminated || isExpired || isCancelled;
-
-			const { platform } = activeLicense;
-
-			if (isWorkspaceAccessRestricted && platform === LicensePlatform.CLOUD) {
-				navigateToWorkSpaceAccessRestricted();
-			}
-		}
-	}, [
-		isFetchingActiveLicense,
-		activeLicense,
-		navigateToWorkSpaceAccessRestricted,
-	]);
-
-	useEffect(() => {
-		if (!isFetchingActiveLicense) {
-			const shouldBlockWorkspace = trialInfo?.workSpaceBlock;
-
-			if (
-				shouldBlockWorkspace &&
-				activeLicense?.platform === LicensePlatform.CLOUD
-			) {
-				navigateToWorkSpaceBlocked();
-			}
-		}
-	}, [
-		isFetchingActiveLicense,
-		trialInfo?.workSpaceBlock,
-		activeLicense?.platform,
-		navigateToWorkSpaceBlocked,
-	]);
-
-	const navigateToWorkSpaceSuspended = useCallback((): void => {
-		if (pathname && pathname !== ROUTES.WORKSPACE_SUSPENDED) {
-			history.push(ROUTES.WORKSPACE_SUSPENDED);
-		}
-	}, [pathname]);
-
-	useEffect(() => {
-		if (!isFetchingActiveLicense && activeLicense) {
-			const shouldSuspendWorkspace =
-				activeLicense.state === LicenseState.DEFAULTED;
-
-			if (
-				shouldSuspendWorkspace &&
-				activeLicense.platform === LicensePlatform.CLOUD
-			) {
-				navigateToWorkSpaceSuspended();
-			}
-		}
-	}, [isFetchingActiveLicense, activeLicense, navigateToWorkSpaceSuspended]);
-
-	useEffect(() => {
-		if (org && org.length > 0 && org[0].id !== undefined) {
-			setOrgData(org[0]);
-		}
-	}, [org]);
-
-	// if the feature flag is enabled and the current route is /get-started then redirect to /get-started-with-signoz-cloud
-	useEffect(() => {
-		if (
-			currentRoute?.path === ROUTES.GET_STARTED &&
-			featureFlags?.find((e) => e.name === FeatureKeys.ONBOARDING_V3)?.active
-		) {
-			history.push(ROUTES.GET_STARTED_WITH_CLOUD);
-		}
-	}, [currentRoute, featureFlags]);
-
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	useEffect(() => {
-		// if it is an old route navigate to the new route
-		if (isOldRoute) {
-			// this will be handled by the redirect component below
-			return;
-		}
-
-		// if the current route is public dashboard then don't redirect to login
-		const isPublicDashboard = currentRoute?.path === ROUTES.PUBLIC_DASHBOARD;
-
-		if (isPublicDashboard) {
-			return;
-		}
-
-		// if the current route
-		if (currentRoute) {
-			const { isPrivate, key } = currentRoute;
-			if (isPrivate) {
-				if (isLoggedInState) {
-					const route = routePermission[key];
-					if (route && route.find((e) => e === user.role) === undefined) {
-						history.push(ROUTES.UN_AUTHORIZED);
-					}
-				} else {
-					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
-					history.push(ROUTES.LOGIN);
-				}
-			} else if (isLoggedInState) {
-				const fromPathname = getLocalStorageApi(
-					LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
-				);
-				if (fromPathname) {
-					history.push(fromPathname);
-					setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-				} else if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
-					history.push(ROUTES.HOME);
-				}
-			} else {
-				// do nothing as the unauthenticated routes are LOGIN and SIGNUP and the LOGIN container takes care of routing to signup if
-				// setup is not completed
-			}
-		} else if (isLoggedInState) {
-			const fromPathname = getLocalStorageApi(
-				LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
-			);
-			if (fromPathname) {
-				history.push(fromPathname);
-				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-			} else {
-				history.push(ROUTES.HOME);
-			}
-		} else {
-			setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
-			history.push(ROUTES.LOGIN);
-		}
-	}, [isLoggedInState, pathname, user, isOldRoute, currentRoute, location]);
-
+	// Handle old routes - redirect to new routes
 	if (isOldRoute) {
 		const redirectUrl = oldNewRoutesMapping[pathname];
 		return (
@@ -296,7 +93,143 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		);
 	}

-	// NOTE: disabling this rule as there is no need to have div
+	// Public dashboard - no redirect needed
+	const isPublicDashboard = currentRoute?.path === ROUTES.PUBLIC_DASHBOARD;
+	if (isPublicDashboard) {
+		return <>{children}</>;
+	}
+
+	// Check for workspace access restriction (cloud only)
+	const isCloudPlatform = activeLicense?.platform === LicensePlatform.CLOUD;
+
+	if (!isFetchingActiveLicense && activeLicense && isCloudPlatform) {
+		const isTerminated = activeLicense.state === LicenseState.TERMINATED;
+		const isExpired = activeLicense.state === LicenseState.EXPIRED;
+		const isCancelled = activeLicense.state === LicenseState.CANCELLED;
+		const isWorkspaceAccessRestricted = isTerminated || isExpired || isCancelled;
+
+		if (
+			isWorkspaceAccessRestricted &&
+			pathname !== ROUTES.WORKSPACE_ACCESS_RESTRICTED
+		) {
+			return <Redirect to={ROUTES.WORKSPACE_ACCESS_RESTRICTED} />;
+		}
+
+		// Check for workspace suspended (DEFAULTED)
+		const shouldSuspendWorkspace = activeLicense.state === LicenseState.DEFAULTED;
+		if (shouldSuspendWorkspace && pathname !== ROUTES.WORKSPACE_SUSPENDED) {
+			return <Redirect to={ROUTES.WORKSPACE_SUSPENDED} />;
+		}
+	}
+
+	// Check for workspace blocked (trial expired)
+	if (!isFetchingActiveLicense && isCloudPlatform && trialInfo?.workSpaceBlock) {
+		const isRouteEnabledForWorkspaceBlockedState =
+			isAdmin &&
+			(pathname === ROUTES.SETTINGS ||
+				pathname === ROUTES.ORG_SETTINGS ||
+				pathname === ROUTES.MEMBERS_SETTINGS ||
+				pathname === ROUTES.BILLING ||
+				pathname === ROUTES.MY_SETTINGS);
+
+		if (
+			pathname !== ROUTES.WORKSPACE_LOCKED &&
+			!isRouteEnabledForWorkspaceBlockedState
+		) {
+			return <Redirect to={ROUTES.WORKSPACE_LOCKED} />;
+		}
+	}
+
+	// Check for onboarding redirect (cloud users, first user, onboarding not complete)
+	if (
+		isCloudUserVal &&
+		!isFetchingOrgPreferences &&
+		orgPreferences &&
+		!isFetchingUsers &&
+		usersData &&
+		usersData.data
+	) {
+		const isOnboardingComplete = orgPreferences?.find(
+			(preference: OrgPreference) =>
+				preference.name === ORG_PREFERENCES.ORG_ONBOARDING,
+		)?.value;
+
+		// Don't redirect to onboarding if workspace has issues
+		const isWorkspaceBlocked = trialInfo?.workSpaceBlock;
+		const isWorkspaceSuspended = activeLicense?.state === LicenseState.DEFAULTED;
+		const isWorkspaceAccessRestricted =
+			activeLicense?.state === LicenseState.TERMINATED ||
+			activeLicense?.state === LicenseState.EXPIRED ||
+			activeLicense?.state === LicenseState.CANCELLED;
+
+		const hasWorkspaceIssue =
+			isWorkspaceBlocked || isWorkspaceSuspended || isWorkspaceAccessRestricted;
+
+		if (!hasWorkspaceIssue) {
+			const isFirstUser = checkFirstTimeUser();
+			if (
+				isFirstUser &&
+				!isOnboardingComplete &&
+				!ROUTES_NOT_TO_BE_OVERRIDEN.includes(pathname) &&
+				pathname !== ROUTES.ONBOARDING
+			) {
+				return <Redirect to={ROUTES.ONBOARDING} />;
+			}
+		}
+	}
+
+	// Check for GET_STARTED → GET_STARTED_WITH_CLOUD redirect (feature flag)
+	if (
+		currentRoute?.path === ROUTES.GET_STARTED &&
+		featureFlags?.find((e) => e.name === FeatureKeys.ONBOARDING_V3)?.active
+	) {
+		return <Redirect to={ROUTES.GET_STARTED_WITH_CLOUD} />;
+	}
+
+	// Main routing logic
+	if (currentRoute) {
+		const { isPrivate, key } = currentRoute;
+		if (isPrivate) {
+			if (isLoggedInState) {
+				const route = routePermission[key];
+				if (route && route.find((e) => e === user.role) === undefined) {
+					return <Redirect to={ROUTES.UN_AUTHORIZED} />;
+				}
+			} else {
+				// Save current path and redirect to login
+				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
+				return <Redirect to={ROUTES.LOGIN} />;
+			}
+		} else if (isLoggedInState) {
+			// Non-private route, but user is logged in
+			const fromPathname = getLocalStorageApi(
+				LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
+			);
+			if (fromPathname) {
+				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
+				return <Redirect to={fromPathname} />;
+			}
+			if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
+				return <Redirect to={ROUTES.HOME} />;
+			}
+		}
+		// Non-private route, user not logged in - let login/signup pages handle it
+	} else if (isLoggedInState) {
+		// Unknown route, logged in
+		const fromPathname = getLocalStorageApi(
+			LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT,
+		);
+		if (fromPathname) {
+			setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
+			return <Redirect to={fromPathname} />;
+		}
+		return <Redirect to={ROUTES.HOME} />;
+	} else {
+		// Unknown route, not logged in
+		setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, pathname);
+		return <Redirect to={ROUTES.LOGIN} />;
+	}
+
 	return <>{children}</>;
 }

--- a/frontend/src/AppRoutes/tests/Private.test.tsx
+++ b/frontend/src/AppRoutes/tests/Private.test.tsx
@@ -6,7 +6,6 @@ import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
-import history from 'lib/history';
 import { AppContext } from 'providers/App/App';
 import { IAppContext, IUser } from 'providers/App/types';
 import {
@@ -22,19 +21,6 @@ import { ROLES, USER_ROLES } from 'types/roles';

 import PrivateRoute from '../Private';

-// Mock history module
-jest.mock('lib/history', () => ({
-	__esModule: true,
-	default: {
-		push: jest.fn(),
-		location: { pathname: '/', search: '', hash: '' },
-		listen: jest.fn(),
-		createHref: jest.fn(),
-	},
-}));
-
-const mockHistoryPush = history.push as jest.Mock;
-
 // Mock localStorage APIs
 const mockLocalStorage: Record<string, string> = {};
 jest.mock('api/browser/localstorage/get', () => ({
@@ -239,20 +225,18 @@ function renderPrivateRoute(options: RenderPrivateRouteOptions = {}): void {
 }

 // Generic assertion helpers for navigation behavior
-// Using these allows easier refactoring when switching from history.push to Redirect component
+// Using location-based assertions since Private.tsx now uses Redirect component

 async function assertRedirectsTo(targetRoute: string): Promise<void> {
 	await waitFor(() => {
-		expect(mockHistoryPush).toHaveBeenCalledWith(targetRoute);
+		expect(screen.getByTestId('location-display')).toHaveTextContent(targetRoute);
 	});
 }

-function assertNoRedirect(): void {
-	expect(mockHistoryPush).not.toHaveBeenCalled();
-}
-
-function assertDoesNotRedirectTo(targetRoute: string): void {
-	expect(mockHistoryPush).not.toHaveBeenCalledWith(targetRoute);
+function assertStaysOnRoute(expectedRoute: string): void {
+	expect(screen.getByTestId('location-display')).toHaveTextContent(
+		expectedRoute,
+	);
 }

 function assertRendersChildren(): void {
@@ -350,7 +334,7 @@ describe('PrivateRoute', () => {
 			});

 			assertRendersChildren();
-			assertNoRedirect();
+			assertStaysOnRoute('/public/dashboard/abc123');
 		});

 		it('should render children for public dashboard route when logged in without redirecting', () => {
@@ -362,7 +346,7 @@ describe('PrivateRoute', () => {
 			assertRendersChildren();
 			// Critical: without the isPublicDashboard early return, logged-in users
 			// would be redirected to HOME due to the non-private route handling
-			assertNoRedirect();
+			assertStaysOnRoute('/public/dashboard/abc123');
 		});
 	});

@@ -420,7 +404,7 @@ describe('PrivateRoute', () => {
 			});

 			assertRendersChildren();
-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.HOME);
 		});

 		it('should redirect to unauthorized when VIEWER tries to access admin-only route /alerts/new', async () => {
@@ -529,7 +513,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: true },
 			});

-			assertDoesNotRedirectTo(ROUTES.HOME);
+			assertStaysOnRoute(ROUTES.SOMETHING_WENT_WRONG);
 		});
 	});

@@ -541,7 +525,7 @@ describe('PrivateRoute', () => {
 			});

 			// Should not redirect - login page handles its own routing
-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.LOGIN);
 		});

 		it('should not redirect when not logged in user visits signup page', () => {
@@ -550,7 +534,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});

-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.SIGN_UP);
 		});

 		it('should not redirect when not logged in user visits password reset page', () => {
@@ -559,7 +543,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});

-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.PASSWORD_RESET);
 		});

 		it('should not redirect when not logged in user visits forgot password page', () => {
@@ -568,7 +552,7 @@ describe('PrivateRoute', () => {
 				appContext: { isLoggedIn: false },
 			});

-			assertNoRedirect();
+			assertStaysOnRoute(ROUTES.FORGOT_PASSWORD);
 		});
 	});

@@ -657,7 +641,7 @@ describe('PrivateRoute', () => {
 			});

 			// Admin should be able to access settings even when workspace is blocked
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.SETTINGS);
 		});

 		it('should allow ADMIN to access /settings/billing when workspace is blocked', () => {
@@ -673,7 +657,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.BILLING);
 		});

 		it('should allow ADMIN to access /settings/org-settings when workspace is blocked', () => {
@@ -689,7 +673,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.ORG_SETTINGS);
 		});

 		it('should allow ADMIN to access /settings/members when workspace is blocked', () => {
@@ -705,7 +689,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.MEMBERS_SETTINGS);
 		});

 		it('should allow ADMIN to access /settings/my-settings when workspace is blocked', () => {
@@ -721,7 +705,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.MY_SETTINGS);
 		});

 		it('should redirect VIEWER to workspace locked even when trying to access settings', async () => {
@@ -832,7 +816,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
 		});

 		it('should not redirect self-hosted users to workspace locked even when workSpaceBlock is true', () => {
@@ -849,7 +833,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});

@@ -919,7 +903,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});

 		it('should not redirect self-hosted users to workspace access restricted when license is terminated', () => {
@@ -936,7 +920,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});

 		it('should not redirect when license is ACTIVE', () => {
@@ -953,7 +937,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});

 		it('should not redirect when license is EVALUATING', () => {
@@ -970,7 +954,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});

@@ -1006,7 +990,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
+			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
 		});

 		it('should not redirect self-hosted users to workspace suspended when license is defaulted', () => {
@@ -1023,7 +1007,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});

@@ -1043,6 +1027,11 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});

+			// Wait for the users query to complete and trigger re-render
+			await act(async () => {
+				await Promise.resolve();
+			});
+
 			await assertRedirectsTo(ROUTES.ONBOARDING);
 		});

@@ -1058,7 +1047,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});

-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.HOME);
 		});

 		it('should not redirect to onboarding when onboarding is already complete', async () => {
@@ -1084,7 +1073,7 @@ describe('PrivateRoute', () => {

 			// Critical: if isOnboardingComplete check is broken (always false),
 			// this test would fail because all other conditions for redirect ARE met
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.HOME);
 		});

 		it('should not redirect to onboarding for non-cloud users', () => {
@@ -1099,7 +1088,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: false,
 			});

-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.HOME);
 		});

 		it('should not redirect to onboarding when on /workspace-locked route', () => {
@@ -1114,7 +1103,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});

-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.WORKSPACE_LOCKED);
 		});

 		it('should not redirect to onboarding when on /workspace-suspended route', () => {
@@ -1129,7 +1118,7 @@ describe('PrivateRoute', () => {
 				isCloudUser: true,
 			});

-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.WORKSPACE_SUSPENDED);
 		});

 		it('should not redirect to onboarding when workspace is blocked and accessing billing', async () => {
@@ -1156,7 +1145,7 @@ describe('PrivateRoute', () => {
 			});

 			// Should NOT redirect to onboarding - user needs to access billing to fix payment
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.BILLING);
 		});

 		it('should not redirect to onboarding when workspace is blocked and accessing settings', async () => {
@@ -1180,7 +1169,7 @@ describe('PrivateRoute', () => {
 				await Promise.resolve();
 			});

-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			assertStaysOnRoute(ROUTES.SETTINGS);
 		});

 		it('should not redirect to onboarding when workspace is suspended (DEFAULTED)', async () => {
@@ -1207,7 +1196,7 @@ describe('PrivateRoute', () => {
 			});

 			// Should redirect to WORKSPACE_SUSPENDED, not ONBOARDING
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			await assertRedirectsTo(ROUTES.WORKSPACE_SUSPENDED);
 		});

 		it('should not redirect to onboarding when workspace is access restricted (TERMINATED)', async () => {
@@ -1234,7 +1223,7 @@ describe('PrivateRoute', () => {
 			});

 			// Should redirect to WORKSPACE_ACCESS_RESTRICTED, not ONBOARDING
-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			await assertRedirectsTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});

 		it('should not redirect to onboarding when workspace is access restricted (EXPIRED)', async () => {
@@ -1260,7 +1249,7 @@ describe('PrivateRoute', () => {
 				await Promise.resolve();
 			});

-			assertDoesNotRedirectTo(ROUTES.ONBOARDING);
+			await assertRedirectsTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
 		});
 	});

@@ -1302,7 +1291,7 @@ describe('PrivateRoute', () => {
 				},
 			});

-			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
+			assertStaysOnRoute(ROUTES.GET_STARTED);
 		});

 		it('should not redirect when on GET_STARTED and ONBOARDING_V3 feature flag is not present', () => {
@@ -1314,7 +1303,7 @@ describe('PrivateRoute', () => {
 				},
 			});

-			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
+			assertStaysOnRoute(ROUTES.GET_STARTED);
 		});

 		it('should not redirect when on different route even if ONBOARDING_V3 is active', () => {
@@ -1334,7 +1323,7 @@ describe('PrivateRoute', () => {
 				},
 			});

-			assertDoesNotRedirectTo(ROUTES.GET_STARTED_WITH_CLOUD);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});

@@ -1350,7 +1339,7 @@ describe('PrivateRoute', () => {
 				},
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});

 		it('should not fetch users when org data is not available', () => {
@@ -1393,9 +1382,7 @@ describe('PrivateRoute', () => {
 				},
 			});

-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_LOCKED);
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_SUSPENDED);
-			assertDoesNotRedirectTo(ROUTES.WORKSPACE_ACCESS_RESTRICTED);
+			assertStaysOnRoute(ROUTES.HOME);
 		});
 	});

@@ -1436,22 +1423,40 @@ describe('PrivateRoute', () => {
 			await assertRedirectsTo(ROUTES.UN_AUTHORIZED);
 		});

-		it('should allow all roles to access /services route', () => {
-			const roles = [USER_ROLES.ADMIN, USER_ROLES.EDITOR, USER_ROLES.VIEWER];
-
-			roles.forEach((role) => {
-				jest.clearAllMocks();
-
-				renderPrivateRoute({
-					initialRoute: ROUTES.APPLICATION,
-					appContext: {
-						isLoggedIn: true,
-						user: createMockUser({ role: role as ROLES }),
-					},
-				});
-
-				assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
+		it('should allow ADMIN to access /services route', () => {
+			renderPrivateRoute({
+				initialRoute: ROUTES.APPLICATION,
+				appContext: {
+					isLoggedIn: true,
+					user: createMockUser({ role: USER_ROLES.ADMIN as ROLES }),
+				},
 			});
+
+			assertStaysOnRoute(ROUTES.APPLICATION);
+		});
+
+		it('should allow EDITOR to access /services route', () => {
+			renderPrivateRoute({
+				initialRoute: ROUTES.APPLICATION,
+				appContext: {
+					isLoggedIn: true,
+					user: createMockUser({ role: USER_ROLES.EDITOR as ROLES }),
+				},
+			});
+
+			assertStaysOnRoute(ROUTES.APPLICATION);
+		});
+
+		it('should allow VIEWER to access /services route', () => {
+			renderPrivateRoute({
+				initialRoute: ROUTES.APPLICATION,
+				appContext: {
+					isLoggedIn: true,
+					user: createMockUser({ role: USER_ROLES.VIEWER as ROLES }),
+				},
+			});
+
+			assertStaysOnRoute(ROUTES.APPLICATION);
 		});

 		it('should redirect VIEWER from /onboarding route (admin only)', async () => {
@@ -1481,7 +1486,7 @@ describe('PrivateRoute', () => {
 			});

 			assertRendersChildren();
-			assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
+			assertStaysOnRoute(ROUTES.CHANNELS_NEW);
 		});

 		it('should allow EDITOR to access /get-started route', () => {
@@ -1493,7 +1498,7 @@ describe('PrivateRoute', () => {
 				},
 			});

-			assertDoesNotRedirectTo(ROUTES.UN_AUTHORIZED);
+			assertStaysOnRoute(ROUTES.GET_STARTED);
 		});
 	});

--- a/frontend/src/AppRoutes/index.tsx
+++ b/frontend/src/AppRoutes/index.tsx
@@ -18,7 +18,7 @@ import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { KeyboardHotkeysProvider } from 'hooks/hotkeys/useKeyboardHotkeys';
-import { useThemeConfig } from 'hooks/useDarkMode';
+import { useIsDarkMode, useThemeConfig } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { NotificationProvider } from 'hooks/useNotifications';
 import { ResourceProvider } from 'hooks/useResourceAttribute';
@@ -212,6 +212,12 @@ function App(): JSX.Element {
 		activeLicenseFetchError,
 	]);

+	const isDarkMode = useIsDarkMode();
+
+	useEffect(() => {
+		window.Pylon?.('setTheme', isDarkMode ? 'dark' : 'light');
+	}, [isDarkMode]);
+
 	useEffect(() => {
 		if (
 			pathname === ROUTES.ONBOARDING ||
--- a/frontend/src/auto-import-registry.d.ts
+++ b/frontend/src/auto-import-registry.d.ts
@@ -10,6 +10,7 @@
 // PR for reference: https://github.com/SigNoz/signoz/pull/9694
 // -------------------------------------------------------------------------

+import '@signozhq/badge';
 import '@signozhq/button';
 import '@signozhq/calendar';
 import '@signozhq/callout';
@@ -24,6 +25,9 @@ import '@signozhq/input';
 import '@signozhq/popover';
 import '@signozhq/radio-group';
 import '@signozhq/resizable';
+import '@signozhq/sonner';
+import '@signozhq/switch';
 import '@signozhq/table';
 import '@signozhq/toggle-group';
+import '@signozhq/tooltip';
 import '@signozhq/ui';
--- a/frontend/src/components/AlertDetailsFilters/Filters.styles.scss
+++ b/frontend/src/components/AlertDetailsFilters/Filters.styles.scss
@@ -2,6 +2,13 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	background: var(--l3-background);
-	border: 1px solid var(--l1-border);
+	background: var(--bg-ink-300);
+	border: 1px solid var(--bg-slate-400);
+}
+
+.lightMode {
+	.reset-button {
+		background: var(--bg-vanilla-100);
+		border-color: var(--bg-vanilla-300);
+	}
 }
--- a/frontend/src/components/AppLoading/AppLoading.styles.scss
+++ b/frontend/src/components/AppLoading/AppLoading.styles.scss
@@ -3,7 +3,7 @@
 	justify-content: center;
 	align-items: center;
 	height: 100vh;
-	background-color: var(--l2-background); // Background
+	background-color: var(--bg-ink-400, #121317); // Dark theme background

 	.app-loading-content {
 		display: flex;
@@ -28,7 +28,7 @@
 			.brand-title {
 				font-size: 20px;
 				font-weight: 600;
-				color: var(--l1-foreground); // Primary text
+				color: var(--bg-vanilla-100, #ffffff); // White text for dark theme
 				margin: 0;
 			}
 		}
@@ -37,7 +37,7 @@
 			margin-bottom: 24px;

 			.ant-typography {
-				color: var(--l2-foreground); // Secondary text
+				color: var(--bg-vanilla-400, #c0c1c3); // Light gray text for dark theme
 			}
 		}

@@ -46,7 +46,7 @@
 			width: 150px;
 			height: 12px;
 			border-radius: 2px;
-			color: var(--primary-background); // Primary blue color
+			color: var(--bg-robin-500, #4e74f8); // Primary blue color
 			border: 2px solid;
 			position: relative;
 		}
@@ -67,6 +67,38 @@
 	}
 }

+// Light theme styles - more specific selector
+.app-loading-container.lightMode {
+	background-color: var(
+		--bg-vanilla-100,
+		#ffffff
+	) !important; // White background for light theme
+
+	.app-loading-content {
+		.brand {
+			.brand-title {
+				color: var(--bg-ink-400, #121317) !important; // Dark text for light theme
+			}
+		}
+
+		.brand-tagline {
+			.ant-typography {
+				color: var(
+					--bg-ink-300,
+					#6b7280
+				) !important; // Dark gray text for light theme
+			}
+		}
+
+		.loader {
+			color: var(
+				--bg-robin-500,
+				#4e74f8
+			) !important; // Keep primary blue color for consistency
+		}
+	}
+}
+
 .perilin-bg {
 	position: absolute;
 	top: 0;
@@ -80,12 +112,41 @@

 	mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
-		transparent 100%
+		rgba(11, 12, 14, 0.1) 0,
+		rgba(11, 12, 14, 0) 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
-		transparent 100%
+		rgba(11, 12, 14, 0.1) 0,
+		rgba(11, 12, 14, 0) 100%
 	);
 }
+
+// Dark theme styles - ensure dark theme is properly applied
+.app-loading-container.dark {
+	background-color: var(--bg-ink-400, #121317) !important; // Dark background
+
+	.app-loading-content {
+		.brand {
+			.brand-title {
+				color: var(
+					--bg-vanilla-100,
+					#ffffff
+				) !important; // White text for dark theme
+			}
+		}
+
+		.brand-tagline {
+			.ant-typography {
+				color: var(
+					--bg-vanilla-400,
+					#c0c1c3
+				) !important; // Light gray text for dark theme
+			}
+		}
+
+		.loader {
+			color: var(--bg-robin-500, #4e74f8) !important; // Primary blue color
+		}
+	}
+}
--- a/frontend/src/components/AuthError/AuthError.styles.scss
+++ b/frontend/src/components/AuthError/AuthError.styles.scss
@@ -4,13 +4,12 @@
 	animation: horizontal-shaking 300ms ease-out;

 	.error-content {
-		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
-		border: 1px solid color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+		background: rgba(229, 72, 77, 0.1);
+		border: 1px solid rgba(229, 72, 77, 0.2);
 		border-radius: 4px;

 		&__summary-section {
-			border-bottom: 1px solid
-				color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+			border-bottom: 1px solid rgba(229, 72, 77, 0.2);
 		}

 		&__summary {
@@ -32,7 +31,7 @@
 		}

 		&__error-code {
-			color: var(--bg-cherry-100);
+			color: #fadadb;
 			font-size: 13px;
 			font-weight: 500;
 			line-height: 1;
@@ -40,7 +39,7 @@
 		}

 		&__error-message {
-			color: var(--bg-cherry-300);
+			color: #f5b6b8;
 			font-size: 13px;
 			font-weight: 400;
 			line-height: 20px;
@@ -52,13 +51,13 @@
 		}

 		&__message-badge-label-text {
-			color: var(--bg-cherry-100);
+			color: #fadadb;
 		}

 		&__message-badge-line {
 			background-image: radial-gradient(
 				circle,
-				color-mix(in srgb, var(--bg-cherry-500) 30%, transparent) 1px,
+				rgba(229, 72, 77, 0.3) 1px,
 				transparent 2px
 			);
 		}
@@ -72,23 +71,23 @@
 		}

 		&__message-item {
-			color: var(--bg-cherry-300);
+			color: #f5b6b8;
 			font-size: 13px;
 			font-weight: 400;
 			line-height: 20px;
 			letter-spacing: -0.065px;

 			&::before {
-				background: var(--bg-cherry-300);
+				background: #f5b6b8;
 			}
 		}

 		&__scroll-hint {
-			background: color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+			background: rgba(229, 72, 77, 0.2);
 		}

 		&__scroll-hint-text {
-			color: var(--bg-cherry-100);
+			color: #fadadb;
 		}
 	}

@@ -101,28 +100,27 @@
 .lightMode {
 	.auth-error-container {
 		.error-content {
+			background: rgba(229, 72, 77, 0.1);
+			border-color: rgba(229, 72, 77, 0.2);
+
 			&__error-code {
-				color: var(--l2-foreground);
+				color: var(--bg-ink-100);
 			}

 			&__error-message {
-				color: var(--l1-foreground);
-			}
-
-			&__message-badge-label-text {
-				color: var(--l2-foreground);
+				color: var(--bg-ink-400);
 			}

 			&__message-item {
-				color: var(--l1-foreground);
+				color: var(--bg-ink-400);

 				&::before {
-					background: var(--l3-background);
+					background: var(--bg-ink-400);
 				}
 			}

 			&__scroll-hint-text {
-				color: var(--l2-foreground);
+				color: var(--bg-ink-100);
 			}
 		}
 	}
--- a/frontend/src/components/AuthPageContainer/AuthFooter.styles.scss
+++ b/frontend/src/components/AuthPageContainer/AuthFooter.styles.scss
@@ -16,8 +16,8 @@
 	justify-content: center;
 	gap: 16px;
 	padding: 12px;
-	background: var(--l2-background);
-	border: 1px solid var(--l1-border);
+	background: var(--bg-ink-400);
+	border: 1px solid var(--bg-ink-200);
 	border-radius: 4px;
 }

@@ -32,7 +32,7 @@
 	width: 6px;
 	height: 6px;
 	border-radius: 9999px;
-	background: var(--bg-forest-500);
+	background: #25e192;
 	flex-shrink: 0;
 }

@@ -49,7 +49,7 @@
 	font-size: 11px;
 	font-weight: 400;
 	line-height: 1;
-	color: var(--l2-foreground);
+	color: var(--text-neutral-dark-100);
 	text-align: center;
 }

@@ -67,16 +67,16 @@

 .auth-footer-link-icon {
 	flex-shrink: 0;
-	color: var(--l1-foreground);
+	color: var(--text-neutral-dark-50);
 }

 .auth-footer-link-status {
 	.auth-footer-text {
-		color: var(--bg-forest-500);
+		color: #25e192;
 	}

 	.auth-footer-link-icon {
-		color: var(--bg-forest-500);
+		color: #25e192;
 	}
 }

@@ -84,12 +84,14 @@
 	width: 4px;
 	height: 4px;
 	border-radius: 50%;
-	background: var(--l3-background);
+	background: var(--bg-ink-200);
 	flex-shrink: 0;
 }

 .lightMode {
 	.auth-footer-content {
+		background: var(--bg-base-white);
+		border-color: var(--bg-vanilla-300);
 		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
 	}

@@ -106,4 +108,8 @@
 	.auth-footer-link-icon {
 		color: var(--text-neutral-light-100);
 	}
+
+	.auth-footer-separator {
+		background: var(--bg-vanilla-300);
+	}
 }
--- a/frontend/src/components/AuthPageContainer/AuthHeader.styles.scss
+++ b/frontend/src/components/AuthPageContainer/AuthHeader.styles.scss
@@ -30,7 +30,7 @@
 	font-size: 15.4px;
 	font-weight: 500;
 	line-height: 17.5px;
-	color: var(--l1-foreground);
+	color: var(--text-neutral-dark-50);
 	white-space: nowrap;
 }

@@ -41,7 +41,7 @@
 	gap: 8px;
 	height: 32px;
 	padding: 10px 16px;
-	background: var(--l2-background);
+	background: var(--bg-ink-400);
 	border: none;
 	border-radius: 2px;
 	cursor: pointer;
@@ -52,13 +52,13 @@
 		font-size: 11px;
 		font-weight: 500;
 		line-height: 1;
-		color: var(--l2-foreground);
+		color: var(--text-neutral-dark-100);
 		text-align: center;
 	}

 	svg {
 		flex-shrink: 0;
-		color: var(--l2-foreground);
+		color: var(--text-neutral-dark-100);
 	}

 	&:hover {
@@ -67,8 +67,16 @@
 }

 .lightMode {
+	.auth-header-logo-text {
+		color: var(--text-neutral-light-100);
+	}
+
 	.auth-header-help-button {
-		background: var(--l2-background);
-		border: 1px solid var(--l1-border);
+		background: var(--bg-vanilla-200);
+
+		span,
+		svg {
+			color: var(--text-neutral-light-200);
+		}
 	}
 }
--- a/frontend/src/components/AuthPageContainer/AuthPageContainer.styles.scss
+++ b/frontend/src/components/AuthPageContainer/AuthPageContainer.styles.scss
@@ -4,7 +4,7 @@
 	position: relative;
 	min-height: 100vh;
 	width: 100%;
-	background: var(--l1-background);
+	background: var(--bg-neutral-dark-1000);
 	display: flex;
 	flex-direction: column;
 }
@@ -43,13 +43,13 @@
 .masked-dots {
 	mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--background) 10%, transparent) 0%,
-		transparent 56.77%
+		rgba(11, 12, 14, 0.1) 0%,
+		rgba(11, 12, 14, 0) 56.77%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--background) 10%, transparent) 0%,
-		transparent 56.77%
+		rgba(11, 12, 14, 0.1) 0%,
+		rgba(11, 12, 14, 0) 56.77%
 	);
 }

@@ -65,7 +65,7 @@
 	border-radius: 956px;
 	background: radial-gradient(
 		ellipse at center -500px,
-		color-mix(in srgb, var(--primary-background) 30%, transparent) 0%,
+		rgba(78, 116, 248, 0.3) 0%,
 		transparent 70%
 	);
 	opacity: 0.3;
@@ -85,8 +85,8 @@
 	height: 100%;
 	background-image: repeating-linear-gradient(
 		to bottom,
-		var(--l1-border) 0px,
-		var(--l1-border) 4px,
+		var(--bg-ink-200) 0px,
+		var(--bg-ink-200) 4px,
 		transparent 4px,
 		transparent 8px
 	);
@@ -145,19 +145,19 @@
 }

 .lightMode {
+	.auth-page-wrapper {
+		background: var(--bg-base-white);
+	}
+
 	.bg-dot-pattern {
-		background: radial-gradient(
-			circle,
-			var(--l3-background) 1px,
-			transparent 1px
-		);
+		background: radial-gradient(circle, rgba(35, 38, 46, 1) 1px, transparent 1px);
 		background-size: 12px 12px;
 	}

 	.auth-page-gradient {
 		background: radial-gradient(
 			ellipse at center top,
-			color-mix(in srgb, var(--primary-background) 12%, transparent) 0%,
+			rgba(78, 116, 248, 0.12) 0%,
 			transparent 60%
 		);
 		opacity: 0.8;
@@ -167,4 +167,15 @@
 			filter: blur(300px);
 		}
 	}
+
+	.auth-page-line-left,
+	.auth-page-line-right {
+		background-image: repeating-linear-gradient(
+			to bottom,
+			var(--bg-vanilla-300) 0px,
+			var(--bg-vanilla-300) 4px,
+			transparent 4px,
+			transparent 8px
+		);
+	}
 }
--- a/frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.styles.scss
+++ b/frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.styles.scss
@@ -21,8 +21,8 @@
 				min-width: 164px;

 				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
 			}
 		}
 	}
@@ -31,3 +31,16 @@
 		flex-shrink: 0;
 	}
 }
+
+.lightMode {
+	.celery-overview-filters {
+		.celery-filters {
+			.config-select-option {
+				.ant-select-selector {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-100);
+				}
+			}
+		}
+	}
+}
--- a/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss
+++ b/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss
@@ -27,10 +27,10 @@
 				font-size: 12px;
 				line-height: 18px;

-				background: var(--l1-background);
+				background: var(--bg-ink-500);
 				border-bottom: none;

-				color: var(--l2-foreground);
+				color: var(--Vanilla-400, #c0c1c3);
 				font-family: Inter;
 				font-size: 11px;
 				font-style: normal;
@@ -47,8 +47,8 @@
 				padding: 12px;
 				font-size: 13px;
 				line-height: 20px;
-				color: var(--l1-foreground);
-				background: var(--l1-background);
+				color: var(--bg-vanilla-100);
+				background: var(--bg-ink-500);
 			}

 			.progress-container {
@@ -59,7 +59,7 @@
 			}

 			.ant-table-tbody > tr:hover > td {
-				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
+				background: rgba(255, 255, 255, 0.04);
 			}

 			.ant-table-cell:first-child {
@@ -89,7 +89,7 @@
 			position: relative;
 			bottom: 0;
 			width: 100%;
-			background: var(--l1-background);
+			background: var(--bg-ink-500);
 			padding: 4px;
 			margin: 0;

@@ -100,11 +100,48 @@
 				border-radius: 4px;

 				&-active {
-					background: var(--primary-background);
-					border-color: var(--primary-background);
+					background: var(--bg-robin-500);
+					border-color: var(--bg-robin-500);

 					a {
-						color: var(--primary-foreground) !important;
+						color: var(--bg-ink-500) !important;
+					}
+				}
+			}
+		}
+	}
+}
+
+.lightMode {
+	.celery-overview-table-container {
+		.celery-overview-table {
+			.ant-table {
+				.ant-table-thead > tr > th {
+					background: var(--bg-vanilla-100);
+					color: var(--text-ink-300);
+				}
+
+				.ant-table-cell {
+					background: var(--bg-vanilla-100);
+					color: var(--bg-ink-500);
+				}
+
+				.ant-table-tbody > tr:hover > td {
+					background: rgba(0, 0, 0, 0.04);
+				}
+			}
+
+			.ant-pagination {
+				background: var(--bg-vanilla-100);
+
+				.ant-pagination-item {
+					&-active {
+						background: var(--bg-robin-500);
+						border-color: var(--bg-robin-500);
+
+						a {
+							color: var(--bg-vanilla-100) !important;
+						}
 					}
 				}
 			}
--- a/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.styles.scss
+++ b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.styles.scss
@@ -18,8 +18,21 @@
 				min-width: 164px;

 				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
+			}
+		}
+	}
+}
+
+.lightMode {
+	.celery-task-filters {
+		.celery-filters {
+			.config-select-option {
+				.ant-select-selector {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-100);
+				}
 			}
 		}
 	}
--- a/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss
+++ b/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss
@@ -1,7 +1,7 @@
 .celery-task-detail-drawer {
 	.ant-drawer-wrapper-body {
-		background: var(--l1-background);
-		border: 1px solid var(--l1-border);
+		background: var(--bg-ink-500);
+		border: 1px solid var(--bg-ink-300);
 	}

 	.ant-drawer-body {
@@ -11,17 +11,17 @@
 			border: none;
 			.ant-card-body {
 				height: 100%;
-				background: var(--l1-background);
+				background: var(--bg-ink-500);

 				.ant-table {
-					background: var(--l1-background);
+					background: var(--bg-ink-500);
 				}
 			}
 		}
 	}

 	.ant-drawer-header {
-		border-bottom: 1px solid var(--l1-border);
+		border-bottom: 1px solid var(--bg-ink-300);
 		.ant-drawer-header-title {
 			.ant-drawer-close {
 				position: absolute;
@@ -29,7 +29,7 @@
 			}

 			button > svg {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 			}

 			.ant-drawer-title {
@@ -38,7 +38,7 @@
 				align-items: flex-start;

 				.title {
-					color: var(--l1-foreground);
+					color: var(--bg-vanilla-100);
 					font-family: Inter;
 					font-size: 18px;
 					font-style: normal;
@@ -48,7 +48,7 @@
 				}

 				.subtitle {
-					color: var(--l2-foreground);
+					color: var(--bg-vanilla-400);
 					font-family: Inter;
 					font-size: 12px;
 					font-style: normal;
@@ -60,10 +60,10 @@
 	}

 	.ant-drawer-footer {
-		border-top: 1px solid var(--l1-border);
+		border-top: 1px solid var(--bg-ink-300);

 		.footer-text {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 			font-family: Inter;
 			font-size: 14px;
 			font-style: normal;
@@ -72,3 +72,51 @@
 		}
 	}
 }
+
+.lightMode {
+	.celery-task-detail-drawer {
+		.ant-drawer-wrapper-body {
+			background: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300);
+		}
+
+		.ant-drawer-body {
+			.ant-card {
+				.ant-card-body {
+					background: var(--bg-vanilla-100);
+
+					.ant-table {
+						background: var(--bg-vanilla-100);
+					}
+				}
+			}
+		}
+
+		.ant-drawer-header {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+			.ant-drawer-header-title {
+				button > svg {
+					color: var(--bg-ink-500);
+				}
+
+				.ant-drawer-title {
+					.title {
+						color: var(--bg-ink-400);
+					}
+
+					.subtitle {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+
+		.ant-drawer-footer {
+			border-top: 1px solid var(--bg-vanilla-300);
+
+			.footer-text {
+				color: var(--bg-ink-400);
+			}
+		}
+	}
+}
--- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss
@@ -40,8 +40,13 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		border: 1px solid var(--l1-border);
-		background: linear-gradient(0deg, transparent 0%, transparent 100%), #0b0c0e;
+		border: 1px solid var(--bg-slate-500);
+		background: linear-gradient(
+				0deg,
+				rgba(171, 189, 255, 0) 0%,
+				rgba(171, 189, 255, 0) 100%
+			),
+			#0b0c0e;

 		.ant-card-body {
 			height: 100%;
@@ -142,13 +147,13 @@
 		gap: 16px;
 		align-items: center;

-		border: 1px dashed var(--l1-border);
+		border: 1px dashed var(--bg-slate-50);
 		border-radius: 4px;
 		padding: 6px 24px 6px 12px;
 		width: max-content;

 		.configure-option-Info-text {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 			font-size: 12px;
 			font-weight: 400;
 		}
@@ -156,7 +161,7 @@

 	.row-panel {
 		border-radius: 4px;
-		background: color-mix(in srgb, var(--card) 40%, transparent);
+		background: rgba(18, 19, 23, 0.4);
 		padding: 8px;
 		display: flex;
 		gap: 6px;
@@ -175,12 +180,12 @@
 			align-items: center;

 			.row-icon {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				cursor: pointer;
 			}

 			.section-title {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-family: Inter;
 				font-size: 14px;
 				font-style: normal;
@@ -193,7 +198,7 @@
 }

 .celery-task-states {
-	border-bottom: 1px solid var(--l1-border);
+	border-bottom: 1px solid var(--bg-ink-200);

 	&__tab {
 		min-width: 140px;
@@ -202,11 +207,11 @@
 		position: relative;

 		&:not([data-last-tab='true']) {
-			border-right: 1px solid var(--l1-border);
+			border-right: 1px solid var(--bg-ink-200);
 		}

 		&--selected {
-			background-color: var(--l3-background);
+			background-color: rgba(38, 38, 38, 0.5);
 		}
 	}

@@ -220,7 +225,7 @@
 	&__label {
 		font-family: 'Inter';
 		font-size: 14px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		line-height: 20px;
 		font-weight: 500;
 	}
@@ -228,7 +233,7 @@
 	&__value {
 		font-family: 'Geist Mono';
 		font-size: 24px;
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 		line-height: 32px;
 	}

@@ -238,15 +243,46 @@
 		height: 2px;
 		bottom: 0;
 		left: 0;
-		background-color: var(--l1-foreground);
+		background-color: var(--bg-vanilla-100);
 	}
 }

 .lightMode {
 	.celery-task-graph-grid-container {
 		.celery-task-graph-worker-count {
+			border: 1px solid var(--bg-vanilla-300);
 			background: unset;
 		}
+
+		.row-panel .row-panel-section .section-title {
+			color: var(--bg-ink-400);
+		}
+	}
+
+	.celery-task-states {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+
+		&__tab {
+			&:not([data-last-tab='true']) {
+				border-right: 1px solid var(--bg-vanilla-300);
+			}
+
+			&--selected {
+				background-color: var(--bg-vanilla-200);
+			}
+		}
+
+		&__label {
+			color: var(--bg-ink-500);
+		}
+
+		&__value {
+			color: var(--bg-slate-100);
+		}
+
+		&__indicator {
+			background-color: var(--bg-ink-400);
+		}
 	}

 	.configure-option-Info {
--- a/frontend/src/components/ChangePercentagePill/ChangePercentagePill.styles.scss
+++ b/frontend/src/components/ChangePercentagePill/ChangePercentagePill.styles.scss
@@ -26,7 +26,7 @@
 		}
 	}
 	&--negative {
-		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
+		background: rgba(229, 72, 77, 0.1);

 		.change-percentage-pill {
 			&__icon {
--- a/frontend/src/components/ChangelogModal/ChangelogModal.styles.scss
+++ b/frontend/src/components/ChangelogModal/ChangelogModal.styles.scss
@@ -1,7 +1,7 @@
 .changelog-modal {
 	.ant-modal-content {
 		padding: unset;
-		background-color: var(--l2-background);
+		background-color: var(--bg-ink-400, #121317);

 		.ant-modal-header {
 			margin-bottom: unset;
@@ -16,12 +16,12 @@
 		display: flex;
 		align-items: center;
 		gap: 8px;
-		background-color: var(--l2-background);
+		background-color: var(--bg-ink-400, #121317);
 		padding: 16px;
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--l1-foreground);
-		border-bottom: 1px solid var(--l1-border);
+		color: var(--text-vanilla-100, #fff);
+		border-bottom: 1px solid var(--bg-slate-500, #161922);
 	}

 	&-footer.scroll-available {
@@ -32,14 +32,14 @@

 	&-footer {
 		position: relative;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-500, #161922);
 		padding: 12px;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;

 		&-label {
-			color: var(--text-robin-400);
+			color: var(--text-robin-400, #7190f9);
 			font-size: 14px;
 			line-height: 24px;
 			position: relative;
@@ -54,7 +54,7 @@
 				width: 6px;
 				height: 6px;
 				border-radius: 100%;
-				background-color: var(--primary-background);
+				background-color: var(--bg-robin-500, #7190f9);
 			}
 		}

@@ -77,7 +77,7 @@
 			.scroll-btn {
 				all: unset;
 				padding: 4px 12px 4px 10px;
-				background-color: var(--l1-border);
+				background-color: var(--bg-slate-400, #1d212d);
 				border-radius: 20px;
 				cursor: pointer;
 				display: flex;
@@ -87,17 +87,17 @@
 				transition: background-color 0.1s;

 				&:hover {
-					background-color: var(--l1-border);
+					background-color: var(--bg-slate-200, #2c3140);
 				}

 				&:active {
-					background-color: var(--l1-border);
+					background-color: var(--bg-slate-600, #1c1f2a);
 				}

 				span {
 					font-size: 12px;
 					line-height: 18px;
-					color: var(--l2-foreground);
+					color: var(--text-vanilla-400, #c0c1c3);
 				}

 				// add animation to the chevrons down icon
@@ -112,7 +112,7 @@
 		max-height: calc(100vh - 300px);
 		overflow-y: auto;
 		padding: 16px 16px 18px 16px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-500, #161922);
 		border-top-width: 0;
 		border-bottom-width: 0;
 	}
@@ -127,3 +127,36 @@
 		opacity: 0.5;
 	}
 }
+
+.lightMode {
+	.changelog-modal {
+		.ant-modal-content {
+			background-color: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&-title {
+			background: var(--bg-vanilla-100);
+			color: var(--bg-ink-500);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&-content {
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&-footer {
+			border-color: var(--bg-vanilla-300);
+
+			.scroll-btn-container {
+				.scroll-btn {
+					background-color: var(--bg-vanilla-300);
+
+					span {
+						color: var(--text-ink-500);
+					}
+				}
+			}
+		}
+	}
+}
--- a/frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss
+++ b/frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss
@@ -15,13 +15,13 @@
 	&-section-title {
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--l1-foreground);
+		color: var(--text-vanilla-400, #c0c1c3);
 	}

 	.changelog-release-date {
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--l1-foreground);
+		color: var(--text-vanilla-400, #c0c1c3);
 		display: block;
 		margin-bottom: 12px;
 	}
@@ -38,7 +38,7 @@
 		top: 6px;
 		bottom: -30px;
 		width: 1px;
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-400, #1d212d);

 		.inner-ball {
 			position: absolute;
@@ -47,7 +47,7 @@
 			height: 6px;
 			border-radius: 100%;
 			transform: translateX(-50%);
-			background-color: var(--primary-background);
+			background-color: var(--bg-robin-500, #7190f9);
 		}
 	}

@@ -69,7 +69,7 @@
 				top: 10px;
 				width: 20px;
 				height: 2px;
-				background-color: var(--primary-background);
+				background-color: var(--bg-robin-500, #7190f9);
 				transform: translate(-100%, -50%);
 			}
 		}
@@ -79,20 +79,19 @@
 	p {
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--l1-foreground);
+		color: var(--text-vanilla-400, #c0c1c3);
 	}

 	code {
 		padding: 2px 4px;
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-500, #161922);
 		border-radius: 6px;
 		font-size: 95%;
 		vertical-align: middle;
-		border: 1px solid var(--l1-border);
-		color: var(--l1-foreground);
+		border: 1px solid var(--bg-slate-600, #1c1f2a);
 	}
 	a {
-		color: var(--text-robin-500);
+		color: var(--text-robin-500, #7190f9);
 		font-weight: 600;
 		text-decoration: underline;

@@ -103,7 +102,7 @@

 	& :is(h1, h2, h3, h4, h5, h6, &-section-title) {
 		font-weight: 600;
-		color: var(--l1-foreground);
+		color: var(--text-vanilla-100, #fff);
 	}

 	h1 {
@@ -123,7 +122,7 @@
 		width: 100%;
 		overflow: hidden;
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-400, #1d212d);
 		margin-bottom: 28px;
 	}

@@ -131,3 +130,25 @@
 		margin: 12px 0;
 	}
 }
+
+.lightMode {
+	.changelog-renderer {
+		.changelog-release-date {
+			color: var(--text-ink-500);
+		}
+
+		&-line {
+			background-color: var(--bg-vanilla-300);
+		}
+
+		& :is(h1, h2, h3, h4, h5, h6, p, li, &-section-title) {
+			color: var(--text-ink-500);
+		}
+
+		code {
+			background-color: var(--bg-vanilla-300);
+			border: 1px solid var(--bg-vanilla-300);
+			color: var(--text-ink-500);
+		}
+	}
+}
--- a/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.styles.scss
+++ b/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.styles.scss
@@ -18,7 +18,7 @@
 		font-weight: var(--label-base-400-font-weight);
 		line-height: var(--label-base-400-line-height);
 		letter-spacing: -0.065px;
-		color: var(--l1-foreground);
+		color: var(--bg-base-white);
 		margin: 0;
 	}

@@ -54,7 +54,7 @@
 		height: 32px;
 		color: var(--l1-foreground);
 		background-color: var(--l2-background);
-		border-color: var(--l1-border);
+		border-color: var(--border);
 		font-size: var(--paragraph-base-400-font-size);
 		border-radius: 2px;
 		width: 100%;
@@ -96,3 +96,11 @@
 	gap: var(--spacing-4);
 	flex-shrink: 0;
 }
+
+.lightMode {
+	.create-sa-modal {
+		[data-slot='dialog-title'] {
+			color: var(--bg-base-black);
+		}
+	}
+}
--- a/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
+++ b/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
@@ -4,7 +4,7 @@ import { Button } from '@signozhq/button';
 import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { X } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccounts,
--- a/frontend/src/components/CreateServiceAccountModal/tests/CreateServiceAccountModal.test.tsx
+++ b/frontend/src/components/CreateServiceAccountModal/tests/CreateServiceAccountModal.test.tsx
@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss
+++ b/frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss
@@ -9,17 +9,16 @@
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		color: var(--secondary-foreground);
-		background-color: var(--secondary-background);
-		border: 1px solid var(--secondary-border);
+		color: var(--foreground);
+		border: 1px solid var(--border);
 		border-radius: 2px;
 		box-shadow: none;
 		padding: 10px;
 		height: 33px;

 		&:hover:not(:disabled) {
-			color: var(--primary-foreground);
-			background: var(--primary-background);
+			color: var(--bg-vanilla-100);
+			background: var(--primary);
 		}

 		&:disabled {
@@ -30,7 +29,7 @@

 	.timeSelection-input {
 		&:hover {
-			border-color: var(--l1-border) !important;
+			border-color: #1d212d !important;
 		}
 	}

@@ -99,7 +98,7 @@
 	justify-content: center;
 	padding: 4px;
 	cursor: default;
-	color: var(--l2-foreground) !important;
+	color: var(--bg-vanilla-400, #c0c1c3) !important;
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -147,10 +146,14 @@
 			color: rgba($color: #000000, $alpha: 0.4);
 		}
 	}
+
+	.info-text {
+		color: var(--bg-slate-400) !important;
+	}
 }

 .date-time-popover__footer {
-	border-top: 1px solid var(--l1-border);
+	border-top: 1px solid var(--bg-ink-200);
 	padding: 8px 14px;
 	.timezone-container {
 		display: flex;
@@ -202,7 +205,7 @@

 		display: flex;
 		align-items: center;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		gap: 6px;

 		.timezone {
@@ -210,10 +213,10 @@
 			align-items: center;
 			gap: 4px;
 			border-radius: 2px;
-			background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+			background: rgba(171, 189, 255, 0.04);
 			cursor: pointer;
 			padding: 0px 4px;
-			color: var(--l1-foreground);
+			color: var(--bg-vanilla-100);
 			border: none;
 		}
 	}
@@ -225,8 +228,8 @@
 	justify-content: center;
 	padding: 0 4px;
 	border-radius: 2px;
-	color: var(--l2-foreground);
-	background-color: var(--l3-background);
+	color: var(--bg-vanilla-400);
+	background-color: var(--bg-ink-200);
 	font-size: 9px;
 	font-weight: 400;
 	line-height: 12px;
@@ -246,8 +249,8 @@
 	width: 36px;

 	font-size: 11px;
-	color: var(--l2-foreground);
-	background-color: var(--l3-background);
+	color: var(--bg-vanilla-400);
+	background-color: var(--bg-ink-200);
 	cursor: pointer;

 	&.is-live {
@@ -269,14 +272,13 @@

@keyframes ripple {
 	0% {
-		box-shadow: 0 0 0 0
-			color-mix(in srgb, var(--warning-background) 40%, transparent);
+		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
 	}
 	60% {
-		box-shadow: 0 0 0 6px transparent;
+		box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
 	}
 	100% {
-		box-shadow: 0 0 0 0 transparent;
+		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
 	}
 }

@@ -286,8 +288,8 @@
 	justify-content: center;
 	padding: 0 4px;
 	border-radius: 2px;
-	background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
-	color: var(--l1-foreground);
+	background: rgba(171, 189, 255, 0.04);
+	color: var(--bg-vanilla-100);
 	font-size: 12px;
 	font-weight: 400;
 	line-height: 16px;
@@ -297,16 +299,23 @@
 	width: 20px;

 	&:hover {
-		background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
+		background: rgba(171, 189, 255, 0.08);
 	}
 }

 .lightMode {
+	.date-time-popover__footer {
+		border-color: var(--bg-vanilla-400);
+	}
+
 	.timezone-container {
+		color: var(--bg-ink-400);
+
 		.timezone {
+			color: var(--bg-ink-100);
 			background: rgb(179 179 179 / 15%);
 			&__icon {
-				stroke: var(--l1-foreground);
+				stroke: var(--bg-ink-100);
 			}
 		}
 	}
@@ -314,16 +323,23 @@
 	.custom-time-picker {
 		.timeSelection-input {
 			&:hover {
-				border-color: var(--l1-border) !important;
+				border-color: var(--bg-vanilla-300) !important;
 			}
 		}
 	}

 	.timezone-badge {
+		color: var(--bg-ink-100);
 		background: rgb(179 179 179 / 15%);
 	}

+	.time-input-prefix {
+		background-color: var(--bg-vanilla-300);
+		color: var(--bg-ink-400);
+	}
+
 	.time-input-suffix-icon-badge {
+		color: var(--bg-ink-100);
 		background: rgb(179 179 179 / 15%);

 		&:hover {
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
+++ b/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
@@ -656,13 +656,15 @@ function CustomTimePicker({
 						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
 					}
 				>
-					<Button
-						className="zoom-out-btn"
-						onClick={handleZoomOut}
-						disabled={zoomOutDisabled}
-						data-testid="zoom-out-btn"
-						prefixIcon={<ZoomOut size={14} />}
-					/>
+					<span>
+						<Button
+							className="zoom-out-btn"
+							onClick={handleZoomOut}
+							disabled={zoomOutDisabled}
+							data-testid="zoom-out-btn"
+							prefixIcon={<ZoomOut size={14} />}
+						/>
+					</span>
 				</Tooltip>
 			)}
 		</div>
--- a/frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss
+++ b/frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss
@@ -3,7 +3,11 @@ $font-family: 'Inter';
 $item-spacing: 8px;

 :root {
-	--border-color: var(--l1-border);
+	--border-color: var(--bg-slate-400);
+}
+
+.lightMode {
+	--border-color: var(--bg-vanilla-400);
 }

 // Mixins
@@ -20,7 +24,7 @@ $item-spacing: 8px;

 .timezone-picker {
 	width: 532px;
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400);
 	font-family: $font-family;

 	&__search {
@@ -42,7 +46,7 @@ $item-spacing: 8px;
 		background: transparent;
 		border: none;
 		outline: none;
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 		font-size: 14px;
 		line-height: 20px;
 		letter-spacing: -0.07px;
@@ -52,19 +56,19 @@ $item-spacing: 8px;
 		}

 		&::placeholder {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 		}
 	}

 	&__esc-key {
 		@include text-style-base;
 		font-size: 8px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		letter-spacing: -0.04px;
 		border-radius: 2.286px;
-		border: 1.143px solid var(--l1-border);
+		border: 1.143px solid var(--bg-ink-200);
 		border-bottom-width: 2.286px;
-		background: var(--l2-background);
+		background: var(--bg-ink-400);
 		padding: 0 1px;
 	}

@@ -82,14 +86,14 @@ $item-spacing: 8px;
 		background: transparent;
 		border: none;
 		width: -webkit-fill-available;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-family: $font-family;

 		&:hover,
 		&.selected {
 			border-radius: 2px;
-			background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
-			color: var(--l1-foreground);
+			background: rgba(171, 189, 255, 0.04);
+			color: var(--bg-vanilla-100);
 		}

 		&.has-divider {
@@ -113,7 +117,7 @@ $item-spacing: 8px;
 	}

 	&__offset {
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 		font-size: 12px;
 		line-height: 16px;
 		letter-spacing: -0.06px;
@@ -134,14 +138,28 @@ $item-spacing: 8px;
 	.timezone-picker {
 		&__search {
 			.search-icon {
-				stroke: var(--l1-foreground);
+				stroke: var(--bg-ink-400);
 			}
 		}
+		&__input {
+			color: var(--bg-ink-100);
+		}
+		&__esc-key {
+			background-color: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-400);
+			color: var(--bg-ink-400);
+		}
+		&__item {
+			color: var(--bg-ink-400);
+		}
+		&__offset {
+			color: var(--bg-ink-100);
+		}
 	}
 	.timezone-name-wrapper {
 		&__selected-icon {
 			.check-icon {
-				stroke: var(--l1-foreground);
+				stroke: var(--bg-ink-100);
 			}
 		}
 	}
--- a/frontend/src/components/DetailsDrawer/DetailsDrawer.styles.scss
+++ b/frontend/src/components/DetailsDrawer/DetailsDrawer.styles.scss
@@ -1,10 +1,10 @@
 .details-drawer {
 	.ant-drawer-wrapper-body {
-		border-left: 1px solid var(--l1-border);
+		border-left: 1px solid var(--bg-slate-500);
 	}
 	.ant-drawer-header {
-		background: var(--l2-background);
-		border-bottom: 1px solid var(--l1-border);
+		background: var(--bg-ink-400);
+		border-bottom: 1px solid var(--bg-slate-500);

 		.ant-drawer-header-title {
 			display: flex;
@@ -14,12 +14,12 @@
 				margin-inline-end: 0px;
 				padding: 0px;
 				padding-right: 16px;
-				border-right: 1px solid var(--l1-border);
+				border-right: 1px solid var(--bg-slate-500);
 			}

 			.ant-drawer-title {
 				padding-left: 16px;
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-family: Inter;
 				font-size: 14px;
 				font-style: normal;
@@ -31,7 +31,7 @@
 	}
 	.ant-drawer-body {
 		padding: 16px;
-		background: var(--l2-background);
+		background: var(--bg-ink-400);

 		&::-webkit-scrollbar {
 			width: 0.1rem;
@@ -50,11 +50,11 @@
 			flex-shrink: 0;
 			padding: 7px 20px;
 			border-radius: 2px 0px 0px 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-400);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

-			color: var(--l1-foreground);
+			color: #fff;
 			font-family: Inter;
 			font-size: 12px;
 			font-style: normal;
@@ -75,7 +75,7 @@
 		}

 		.ant-tabs-tab-active {
-			background: var(--l3-background);
+			background: var(--bg-slate-400);
 		}

 		.ant-tabs-tab + .ant-tabs-tab {
@@ -91,3 +91,44 @@
 		}
 	}
 }
+
+.lightMode {
+	.details-drawer {
+		.ant-drawer-wrapper-body {
+			border-left: 1px solid var(--bg-vanilla-300);
+		}
+		.ant-drawer-header {
+			background: var(--bg-vanilla-200);
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.ant-drawer-header-title {
+				.ant-drawer-close {
+					border-right: 1px solid var(--bg-vanilla-300);
+				}
+
+				.ant-drawer-title {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+		.ant-drawer-body {
+			background: var(--bg-vanilla-200);
+		}
+
+		.details-drawer-tabs {
+			.ant-tabs-tab {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-300);
+				color: var(--bg-ink-400);
+			}
+
+			.ant-tabs-tab-active {
+				background: var(--bg-vanilla-200);
+			}
+
+			.ant-tabs-tab + .ant-tabs-tab {
+				border-left: none;
+			}
+		}
+	}
+}
--- a/frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss
+++ b/frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss
@@ -1,7 +1,7 @@
 .download-popover {
 	.ant-popover-inner {
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--l3-border);
 		background: linear-gradient(
 			139deg,
 			var(--l2-background) 0%,
@@ -46,7 +46,7 @@

 		.horizontal-line {
 			height: 1px;
-			background: var(--l1-border);
+			background: var(--l3-border);
 		}

 		.export-button {
@@ -57,3 +57,30 @@
 		}
 	}
 }
+
+.lightMode {
+	.download-popover {
+		.ant-popover-inner {
+			border: 1px solid var(--l2-border);
+			background: linear-gradient(
+				139deg,
+				var(--background) 0%,
+				var(--l1-background) 98.68%
+			);
+			box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
+		}
+		.export-options-container {
+			.title {
+				color: var(--l2-foreground);
+			}
+
+			:global(.ant-radio-wrapper) {
+				color: var(--foreground);
+			}
+
+			.horizontal-line {
+				background: var(--l2-border);
+			}
+		}
+	}
+}
--- a/frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss
+++ b/frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss
@@ -32,7 +32,7 @@
 	&__input {
 		height: 32px;
 		background: var(--l2-background);
-		border-color: var(--l1-border);
+		border-color: var(--border);
 		color: var(--l1-foreground);
 		box-shadow: none;

@@ -49,7 +49,7 @@
 		padding: var(--padding-1) var(--padding-2);
 		border-radius: 2px;
 		background: var(--l2-background);
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--border);

 		&--disabled {
 			cursor: not-allowed;
@@ -83,37 +83,6 @@
 		opacity: 0.6;
 	}

-	&__role-select {
-		width: 100%;
-
-		.ant-select-selector {
-			background-color: var(--l2-background) !important;
-			border-color: var(--border) !important;
-			border-radius: 2px;
-			padding: var(--padding-1) var(--padding-2) !important;
-			display: flex;
-			align-items: center;
-			flex-wrap: wrap;
-			min-height: 32px;
-			height: auto !important;
-		}
-
-		.ant-select-selection-item {
-			font-size: var(--font-size-sm);
-			color: var(--l1-foreground);
-			line-height: 22px;
-			letter-spacing: -0.07px;
-		}
-
-		.ant-select-arrow {
-			color: var(--foreground);
-		}
-
-		&:not(.ant-select-disabled):hover .ant-select-selector {
-			border-color: var(--foreground);
-		}
-	}
-
 	&__meta {
 		display: flex;
 		flex-direction: column;
@@ -153,7 +122,7 @@
 		width: 100%;
 		height: 56px;
 		padding: 0 var(--padding-4);
-		border-top: 1px solid var(--l1-border);
+		border-top: 1px solid var(--border);
 		flex-shrink: 0;
 		background: var(--card);
 	}
@@ -173,7 +142,7 @@
 	&__footer-divider {
 		width: 1px;
 		height: 21px;
-		background: var(--l1-border);
+		background: var(--border);
 		flex-shrink: 0;
 	}

@@ -206,7 +175,7 @@
 		}

 		&--danger {
-			color: var(--accent-cherry);
+			color: var(--destructive);
 		}

 		&--warning {
@@ -217,7 +186,7 @@

 .delete-dialog {
 	background: var(--l2-background);
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--l2-border);

 	[data-slot='dialog-title'] {
 		color: var(--l1-foreground);
@@ -247,10 +216,10 @@

 .reset-link-dialog {
 	background: var(--l2-background);
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--l2-border);

 	[data-slot='dialog-header'] {
-		border-color: var(--l1-border);
+		border-color: var(--l2-border);
 		color: var(--l1-foreground);
 	}

@@ -281,7 +250,7 @@
 		height: 32px;
 		overflow: hidden;
 		background: var(--l2-background);
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--border);
 		border-radius: 2px;
 	}

@@ -311,7 +280,7 @@
 		border-top: none;
 		border-right: none;
 		border-bottom: none;
-		border-left: 1px solid var(--l1-border);
+		border-left: 1px solid var(--border);
 		min-width: 64px;
 	}
 }
--- a/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
+++ b/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { Badge } from '@signozhq/badge';
 import { Button } from '@signozhq/button';
 import { DrawerWrapper } from '@signozhq/drawer';
 import { LockKeyhole, RefreshCw, Trash2, X } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/ui';
-import { Badge } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
@@ -61,10 +61,6 @@ function toSaveApiError(err: unknown): APIError {
 	);
 }

-function areSortedArraysEqual(a: string[], b: string[]): boolean {
-	return JSON.stringify([...a].sort()) === JSON.stringify([...b].sort());
-}
-
 export interface EditMemberDrawerProps {
 	member: MemberRow | null;
 	open: boolean;
@@ -83,7 +79,7 @@ function EditMemberDrawer({
 	const { user: currentUser } = useAppContext();

 	const [localDisplayName, setLocalDisplayName] = useState('');
-	const [localRoles, setLocalRoles] = useState<string[]>([]);
+	const [localRole, setLocalRole] = useState('');
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
 	const [isGeneratingLink, setIsGeneratingLink] = useState(false);
@@ -133,14 +129,14 @@ function EditMemberDrawer({
 	}, [fetchedUserId, fetchedUserDisplayName, member?.name]);

 	useEffect(() => {
-		setLocalRoles(fetchedRoleIds);
+		setLocalRole(fetchedRoleIds[0] ?? '');
 	}, [fetchedRoleIds]);

 	const isDirty =
 		member !== null &&
 		fetchedUser != null &&
 		(localDisplayName !== fetchedDisplayName ||
-			!areSortedArraysEqual(localRoles, fetchedRoleIds));
+			localRole !== (fetchedRoleIds[0] ?? ''));

 	const { mutateAsync: updateMyUser } = useUpdateMyUserV2();
 	const { mutateAsync: updateUser } = useUpdateUser();
@@ -224,7 +220,7 @@ function EditMemberDrawer({
 		setIsSaving(true);
 		try {
 			const nameChanged = localDisplayName !== fetchedDisplayName;
-			const rolesChanged = !areSortedArraysEqual(localRoles, fetchedRoleIds);
+			const rolesChanged = localRole !== (fetchedRoleIds[0] ?? '');

 			const namePromise = nameChanged
 				? isSelf
@@ -237,7 +233,9 @@ function EditMemberDrawer({

 			const [nameResult, rolesResult] = await Promise.allSettled([
 				namePromise,
-				rolesChanged ? applyDiff(localRoles, availableRoles) : Promise.resolve([]),
+				rolesChanged
+					? applyDiff([localRole].filter(Boolean), availableRoles)
+					: Promise.resolve([]),
 			]);

 			const errors: SaveError[] = [];
@@ -255,7 +253,10 @@ function EditMemberDrawer({
 					context: 'Roles update',
 					apiError: toSaveApiError(rolesResult.reason),
 					onRetry: async (): Promise<void> => {
-						const failures = await applyDiff(localRoles, availableRoles);
+						const failures = await applyDiff(
+							[localRole].filter(Boolean),
+							availableRoles,
+						);
 						setSaveErrors((prev) => {
 							const rest = prev.filter((e) => e.context !== 'Roles update');
 							return [
@@ -303,7 +304,7 @@ function EditMemberDrawer({
 		isDirty,
 		isSelf,
 		localDisplayName,
-		localRoles,
+		localRole,
 		fetchedDisplayName,
 		fetchedRoleIds,
 		updateMyUser,
@@ -445,15 +446,10 @@ function EditMemberDrawer({
 					>
 						<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
 							<div className="edit-member-drawer__disabled-roles">
-								{localRoles.length > 0 ? (
-									localRoles.map((roleId) => {
-										const role = availableRoles.find((r) => r.id === roleId);
-										return (
-											<Badge key={roleId} color="vanilla">
-												{role?.name ?? roleId}
-											</Badge>
-										);
-									})
+								{localRole ? (
+									<Badge color="vanilla">
+										{availableRoles.find((r) => r.id === localRole)?.name ?? localRole}
+									</Badge>
 								) : (
 									<span className="edit-member-drawer__email-text">—</span>
 								)}
@@ -464,15 +460,14 @@ function EditMemberDrawer({
 				) : (
 					<RolesSelect
 						id="member-role"
-						mode="multiple"
 						roles={availableRoles}
 						loading={rolesLoading}
 						isError={rolesError}
 						error={rolesErrorObj}
 						onRefetch={refetchRoles}
-						value={localRoles}
-						onChange={(roles): void => {
-							setLocalRoles(roles);
+						value={localRole}
+						onChange={(role): void => {
+							setLocalRole(role);
 							setSaveErrors((prev) =>
 								prev.filter(
 									(err) =>
@@ -480,8 +475,7 @@ function EditMemberDrawer({
 								),
 							);
 						}}
-						className="edit-member-drawer__role-select"
-						placeholder="Select roles"
+						placeholder="Select role"
 					/>
 				)}
 			</div>
--- a/frontend/src/components/EditMemberDrawer/tests/EditMemberDrawer.test.tsx
+++ b/frontend/src/components/EditMemberDrawer/tests/EditMemberDrawer.test.tsx
@@ -1,11 +1,10 @@
 import type { ReactNode } from 'react';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getResetPasswordToken,
 	useDeleteUser,
 	useGetUser,
-	useRemoveUserRoleByUserIDAndRoleID,
 	useSetRoleByUserID,
 	useUpdateMyUserV2,
 	useUpdateUser,
@@ -56,7 +55,6 @@ jest.mock('api/generated/services/users', () => ({
 	useUpdateUser: jest.fn(),
 	useUpdateMyUserV2: jest.fn(),
 	useSetRoleByUserID: jest.fn(),
-	useRemoveUserRoleByUserIDAndRoleID: jest.fn(),
 	getResetPasswordToken: jest.fn(),
 }));

@@ -171,10 +169,6 @@ describe('EditMemberDrawer', () => {
 			mutateAsync: jest.fn().mockResolvedValue({}),
 			isLoading: false,
 		});
-		(useRemoveUserRoleByUserIDAndRoleID as jest.Mock).mockReturnValue({
-			mutateAsync: jest.fn().mockResolvedValue({}),
-			isLoading: false,
-		});
 		(useDeleteUser as jest.Mock).mockReturnValue({
 			mutate: mockDeleteMutate,
 			isLoading: false,
@@ -248,7 +242,7 @@ describe('EditMemberDrawer', () => {
 		expect(onClose).not.toHaveBeenCalled();
 	});

-	it('calls setRole when a new role is added', async () => {
+	it('selecting a different role calls setRole with the new role name', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const mockSet = jest.fn().mockResolvedValue({});
@@ -277,32 +271,30 @@ describe('EditMemberDrawer', () => {
 		});
 	});

-	it('calls removeRole when an existing role is removed', async () => {
+	it('does not call removeRole when the role is changed', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const mockRemove = jest.fn().mockResolvedValue({});
+		const mockSet = jest.fn().mockResolvedValue({});

-		(useRemoveUserRoleByUserIDAndRoleID as jest.Mock).mockReturnValue({
-			mutateAsync: mockRemove,
+		(useSetRoleByUserID as jest.Mock).mockReturnValue({
+			mutateAsync: mockSet,
 			isLoading: false,
 		});

 		renderDrawer({ onComplete });

-		// Wait for the signoz-admin tag to appear, then click its remove button
-		const adminTag = await screen.findByTitle('signoz-admin');
-		const removeBtn = adminTag.querySelector(
-			'.ant-select-selection-item-remove',
-		) as Element;
-		await user.click(removeBtn);
+		// Switch from signoz-admin to signoz-viewer using single-select
+		await user.click(screen.getByLabelText('Roles'));
+		await user.click(await screen.findByTitle('signoz-viewer'));

 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
 		await waitFor(() => expect(saveBtn).not.toBeDisabled());
 		await user.click(saveBtn);

 		await waitFor(() => {
-			expect(mockRemove).toHaveBeenCalledWith({
-				pathParams: { id: 'user-1', roleId: managedRoles[0].id },
+			expect(mockSet).toHaveBeenCalledWith({
+				pathParams: { id: 'user-1' },
+				data: { name: 'signoz-viewer' },
 			});
 			expect(onComplete).toHaveBeenCalled();
 		});
--- a/frontend/src/components/ErrorModal/ErrorModal.styles.scss
+++ b/frontend/src/components/ErrorModal/ErrorModal.styles.scss
@@ -5,7 +5,7 @@
 		align-items: center;
 		gap: 4px;
 		border-radius: 20px;
-		background: color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+		background: rgba(229, 72, 77, 0.2);
 		padding-left: 3px;
 		padding-right: 8px;
 		cursor: pointer;
@@ -21,11 +21,11 @@
 	&__wrap {
 		background: linear-gradient(
 			180deg,
-			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%,
-			color-mix(in srgb, var(--bg-sakura-500) 60%, transparent) 100%
+			rgba(11, 12, 14, 0.12) 0.07%,
+			rgba(39, 8, 14, 0.24) 50.04%,
+			rgba(106, 29, 44, 0.36) 75.02%,
+			rgba(197, 57, 85, 0.48) 87.51%,
+			rgba(242, 71, 105, 0.6) 100%
 		);
 		-webkit-backdrop-filter: blur(10px);
 		backdrop-filter: blur(10px);
@@ -42,7 +42,7 @@
 	}
 	&__body {
 		padding: 0;
-		background: var(--l2-background);
+		background: var(--bg-ink-400);
 		overflow: hidden;
 		border-top-left-radius: 4px;
 		border-top-right-radius: 4px;
@@ -72,21 +72,21 @@
 				text-transform: uppercase;
 				&,
 				&:hover {
-					color: var(--l1-foreground);
+					color: var(--bg-vanilla-100);
 				}
 			}
 			&__value {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				pointer-events: none;
 			}
 		}
 		.close-button {
 			padding: 3px 7px;
-			background: var(--l2-background);
+			background: var(--bg-ink-400);
 			display: inline-flex;
 			align-items: center;
 			border-radius: 4px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-500);
 			box-shadow: none;
 		}
 	}
@@ -102,3 +102,17 @@
 		background: none !important;
 	}
 }
+
+.lightMode {
+	.error-modal {
+		&__body,
+		&__header .close-button {
+			background: var(--bg-vanilla-100);
+		}
+		&__header .close-button {
+			svg {
+				fill: var(--bg-vanilla-100);
+			}
+		}
+	}
+}
--- a/frontend/src/components/ErrorModal/components/ErrorContent.styles.scss
+++ b/frontend/src/components/ErrorModal/components/ErrorContent.styles.scss
@@ -5,7 +5,7 @@
 	&__summary-section {
 		display: flex;
 		flex-direction: column;
-		border-bottom: 1px solid var(--l1-border);
+		border-bottom: 1px solid var(--bg-slate-400);
 	}

 	&__summary {
@@ -27,7 +27,7 @@
 	}

 	&__error-code {
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 		margin: 0;
 		font-size: 16px;
 		font-weight: 500;
@@ -37,7 +37,7 @@

 	&__error-message {
 		margin: 0;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 20px; /* 142.857% */
@@ -49,14 +49,14 @@
 		align-items: center;
 		gap: 6px;
 		padding: 9px 12.5px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-size: 12px;
 		font-weight: 400;
 		line-height: 18px; /* 150% */
 		letter-spacing: 0.12px;
 		border-radius: 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 		box-shadow: none;
 	}

@@ -68,7 +68,7 @@

 		.key-value-label {
 			width: fit-content;
-			border-color: var(--l1-border);
+			border-color: var(--bg-slate-400);
 			border-radius: 20px;
 			overflow: hidden;
 			&__key {
@@ -77,7 +77,7 @@
 			}
 			&__value {
 				padding-right: 10px;
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-size: 12px;
 				font-weight: 500;
 				line-height: 18px; /* 150% */
@@ -96,7 +96,7 @@
 				border-radius: 50%;
 			}
 			&-text {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 				font-size: 10px;
 				font-weight: 500;
 				line-height: 18px; /* 180% */
@@ -106,11 +106,7 @@
 		&-line {
 			flex: 1;
 			height: 8px;
-			background-image: radial-gradient(
-				circle,
-				var(--l3-background) 1px,
-				transparent 2px
-			);
+			background-image: radial-gradient(circle, #444c63 1px, transparent 2px);
 			background-size: 8px 11px;
 			background-position: top left;
 			padding: 6px;
@@ -133,11 +129,12 @@
 	&__message-item {
 		position: relative;
 		margin-bottom: 4px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-family: Geist Mono;
 		font-size: 12px;
 		font-weight: 400;
 		line-height: 18px;
+		color: var(--bg-vanilla-400);
 		padding: 3px 12px;
 		padding-left: 26px;
 	}
@@ -152,7 +149,7 @@
 		width: 2px;
 		height: 4px;
 		border-radius: 50px;
-		background: var(--l1-border);
+		background: var(--bg-slate-400);
 	}

 	&__scroll-hint {
@@ -167,7 +164,7 @@
 		justify-content: center;
 		align-items: center;
 		gap: 3px;
-		background: var(--l1-border);
+		background: var(--bg-slate-200);
 		border-radius: 20px;
 		box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
 			0px 66px 18px 0px rgba(0, 0, 0, 0.01), 0px 37px 22px 0px rgba(0, 0, 0, 0.03),
@@ -175,7 +172,7 @@
 	}

 	&__scroll-hint-text {
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);

 		font-size: 12px;
 		font-weight: 400;
@@ -183,3 +180,29 @@
 		letter-spacing: -0.06px;
 	}
 }
+
+.lightMode {
+	.error-content {
+		&__error-code {
+			color: var(--bg-ink-100);
+		}
+		&__error-message {
+			color: var(--bg-ink-400);
+		}
+		&__message-item {
+			color: var(--bg-ink-400);
+		}
+		&__message-badge {
+			&-label-text {
+				color: var(--bg-ink-400);
+			}
+			.key-value-label__value {
+				color: var(--bg-ink-400);
+			}
+		}
+		&__docs-button {
+			background: var(--bg-vanilla-100);
+			color: var(--bg-ink-100);
+		}
+	}
+}
--- a/frontend/src/components/Header/Header.styles.scss
+++ b/frontend/src/components/Header/Header.styles.scss
@@ -5,8 +5,9 @@
 	padding: 8px 16px;
 	height: 48px;
 	box-sizing: border-box;
-	background: var(--l1-background);
+	background: rgba(11, 12, 14, 0.9);
 	backdrop-filter: blur(20px);
+	border-bottom: 1px solid var(--Slate-500, #161922);
 }

 .header-left {
@@ -18,3 +19,11 @@
 	display: flex;
 	align-items: center;
 }
+
+.lightMode {
+	.header-container {
+		background: var(--bg-vanilla-100);
+		backdrop-filter: blur(20px);
+		border-bottom: 1px solid var(--bg-vanilla-300);
+	}
+}
--- a/frontend/src/components/HeaderRightSection/FeedbackModal.tsx
+++ b/frontend/src/components/HeaderRightSection/FeedbackModal.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { Button, Input, Radio, RadioChangeEvent, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
--- a/frontend/src/components/HeaderRightSection/HeaderRightSection.styles.scss
+++ b/frontend/src/components/HeaderRightSection/HeaderRightSection.styles.scss
@@ -23,7 +23,7 @@
 		justify-content: space-between;

 		.absolute-relative-time-toggler-label {
-			color: var(--l1-foreground);
+			color: var(--bg-vanilla-100);
 			font-size: 13px;
 			font-style: normal;
 			font-weight: 500;
@@ -40,7 +40,7 @@

 	.absolute-relative-time-error {
 		font-size: 12px;
-		color: var(--accent-amber);
+		color: var(--bg-amber-600);
 	}

 	.share-link {
@@ -57,7 +57,7 @@

 				.url-share-title,
 				.url-share-sub-title {
-					color: var(--l1-foreground);
+					color: var(--bg-vanilla-100);
 					font-size: 13px;
 					font-style: normal;
 					font-weight: 500;
@@ -67,7 +67,7 @@

 				.url-share-sub-title {
 					font-size: 12px;
-					color: var(--l3-foreground);
+					color: var(--bg-vanilla-300);
 					font-weight: 400;
 					line-height: 18px;
 					letter-spacing: -0.06px;
@@ -86,14 +86,14 @@
 			flex: 1;
 			margin: 0px !important;

-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-400);

 			&:before {
 				display: none;
 			}

 			.ant-radio-button-checked {
-				background-color: var(--l3-background);
+				background-color: var(--bg-slate-400);
 			}
 		}

@@ -108,15 +108,15 @@
 			}

 			.feedback-tab {
-				background-color: var(--danger-background);
+				background-color: var(--bg-sakura-500);
 			}

 			.bug-tab {
-				background-color: var(--warning-background);
+				background-color: var(--bg-amber-500);
 			}

 			.feature-tab {
-				background-color: var(--primary-background);
+				background-color: var(--bg-robin-500);
 			}
 		}

@@ -125,9 +125,9 @@
 				padding: 6px 16px;

 				border-radius: 2px;
-				background: var(--l2-background);
+				background: var(--bg-ink-400);
 				box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
-				border: 1px solid var(--l1-border);
+				border: 1px solid var(--bg-slate-400);

 				margin: 0 !important;

@@ -140,13 +140,13 @@
 				}

 				&-active {
-					background: var(--l3-background);
-					color: var(--l1-foreground);
+					background: var(--bg-slate-400);
+					color: var(--bg-vanilla-100);

 					border-bottom: none !important;

 					.ant-tabs-tab-btn {
-						color: var(--l1-foreground);
+						color: var(--bg-vanilla-100);
 					}
 				}
 			}
@@ -181,7 +181,7 @@

 		.feedback-modal-content-footer-info-text {
 			font-size: 12px;
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400, #c0c1c3);
 			text-align: center;

 			/* button/ small  */
@@ -200,3 +200,54 @@
 		}
 	}
 }
+
+.lightMode {
+	.share-modal-content,
+	.feedback-modal-container {
+		.absolute-relative-time-toggler-container {
+			.absolute-relative-time-toggler-label {
+				color: var(--bg-ink-400);
+			}
+		}
+
+		.share-link {
+			.url-share-container {
+				.url-share-container-header {
+					.url-share-title,
+					.url-share-sub-title {
+						color: var(--bg-ink-400);
+					}
+
+					.url-share-sub-title {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+	}
+
+	.feedback-modal-container {
+		.feedback-modal-tabs {
+			.ant-radio-button-wrapper {
+				flex: 1;
+				margin: 0px !important;
+
+				border: 1px solid var(--bg-vanilla-300);
+
+				&:before {
+					display: none;
+				}
+
+				.ant-radio-button-checked {
+					background-color: var(--bg-vanilla-300);
+				}
+			}
+		}
+
+		.feedback-modal-content-footer {
+			.feedback-modal-content-footer-info-text {
+				color: var(--bg-slate-400);
+			}
+		}
+	}
+}
--- a/frontend/src/components/HeaderRightSection/tests/FeedbackModal.test.tsx
+++ b/frontend/src/components/HeaderRightSection/tests/FeedbackModal.test.tsx
@@ -1,6 +1,6 @@
 // Mock dependencies before imports
 import { useLocation } from 'react-router-dom';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
--- a/frontend/src/components/HostMetricsDetail/Containers/Containers.styles.scss
+++ b/frontend/src/components/HostMetricsDetail/Containers/Containers.styles.scss
@@ -28,7 +28,7 @@

 	.infra-container-card-text {
 		font-size: var(--font-size-sm);
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		width: 400px;
@@ -44,7 +44,7 @@
 		align-items: flex-start;
 		gap: 12px;
 		border-radius: 4px;
-		background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+		background: rgba(171, 189, 255, 0.04);

 		.ant-space {
 			align-items: flex-start;
@@ -58,3 +58,9 @@
 		margin: auto;
 	}
 }
+
+.lightMode {
+	.infra-container-card-text {
+		color: var(--text-ink-200);
+	}
+}
--- a/frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.styles.scss
+++ b/frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.styles.scss
@@ -9,15 +9,15 @@
 		gap: 8px;
 		padding: 12px;
 		border-radius: 3px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-500);

 		.filter-section {
 			flex: 1;

 			.ant-select-selector {
 				border-radius: 2px;
-				border: 1px solid var(--l1-border) !important;
-				background-color: var(--l3-background) !important;
+				border: 1px solid var(--bg-slate-400) !important;
+				background-color: var(--bg-ink-300) !important;

 				input {
 					font-size: 12px;
@@ -37,7 +37,7 @@

 		.ant-table {
 			border-radius: 3px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-500);

 			.ant-table-thead > tr > th {
 				padding: 12px;
@@ -45,10 +45,10 @@
 				font-size: 12px;
 				line-height: 18px;

-				background: color-mix(in srgb, var(--bg-robin-200) 1%, transparent);
+				background: rgba(171, 189, 255, 0.01);
 				border-bottom: none;

-				color: var(--l2-foreground);
+				color: var(--Vanilla-400, #c0c1c3);
 				font-family: Inter;
 				font-size: 11px;
 				font-style: normal;
@@ -63,23 +63,23 @@
 			}

 			.ant-table-thead > tr > th:has(.hostname-column-header) {
-				background: var(--l2-background);
+				background: var(--bg-ink-400);
 			}

 			.ant-table-cell {
 				padding: 12px;
 				font-size: 13px;
 				line-height: 20px;
-				color: var(--l1-foreground);
-				background: color-mix(in srgb, var(--bg-robin-200) 1%, transparent);
+				color: var(--bg-vanilla-100);
+				background: rgba(171, 189, 255, 0.01);
 			}

 			.ant-table-cell:has(.hostname-column-value) {
-				background: var(--l2-background);
+				background: var(--bg-ink-400);
 			}

 			.hostname-column-value {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 				font-family: 'Geist Mono';
 				font-style: normal;
 				font-weight: 600;
@@ -105,7 +105,7 @@
 			}

 			.ant-table-tbody > tr:hover > td {
-				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
+				background: rgba(255, 255, 255, 0.04);
 			}

 			.ant-table-cell:first-child {
@@ -143,3 +143,51 @@
 		}
 	}
 }
+
+.lightMode {
+	.host-metric-traces-header {
+		.filter-section {
+			border-top: 1px solid var(--bg-vanilla-300);
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.ant-select-selector {
+				border-color: var(--bg-vanilla-300) !important;
+				background-color: var(--bg-vanilla-100) !important;
+				color: var(--bg-ink-200);
+			}
+		}
+	}
+
+	.host-metric-traces-table {
+		.ant-table {
+			border-radius: 3px;
+			border: 1px solid var(--bg-vanilla-300);
+
+			.ant-table-thead > tr > th {
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
+			}
+
+			.ant-table-thead > tr > th:has(.hostname-column-header) {
+				background: var(--bg-vanilla-100);
+			}
+
+			.ant-table-cell {
+				background: var(--bg-vanilla-100);
+				color: var(--bg-ink-500);
+			}
+
+			.ant-table-cell:has(.hostname-column-value) {
+				background: var(--bg-vanilla-100);
+			}
+
+			.hostname-column-value {
+				color: var(--bg-ink-300);
+			}
+
+			.ant-table-tbody > tr:hover > td {
+				background: rgba(0, 0, 0, 0.04);
+			}
+		}
+	}
+}
--- a/frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss
+++ b/frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss
@@ -1,6 +1,6 @@
 .host-detail-drawer {
-	border-left: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border-left: 1px solid var(--bg-slate-500);
+	background: var(--bg-ink-400);
 	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);

 	.ant-drawer-header {
@@ -9,8 +9,8 @@

 		align-items: stretch;

-		border-bottom: 1px solid var(--l1-border);
-		background: var(--l2-background);
+		border-bottom: 1px solid var(--bg-slate-500);
+		background: var(--bg-ink-400);
 	}

 	.ant-drawer-close {
@@ -24,7 +24,7 @@
 	}

 	.title {
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);
 		font-family: 'Geist Mono';
 		font-size: 14px;
 		font-style: normal;
@@ -38,8 +38,8 @@
 		align-items: center;
 		justify-content: center;
 		padding-top: var(--padding-1);
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}

@@ -58,7 +58,7 @@
 			}

 			.host-details-metadata-label {
-				color: var(--l2-foreground);
+				color: var(--text-vanilla-400);
 				font-family: Inter;
 				font-size: 11px;
 				font-style: normal;
@@ -97,7 +97,7 @@

 			.ant-card {
 				&.ant-card-bordered {
-					border: 1px solid var(--l1-border) !important;
+					border: 1px solid var(--bg-slate-500) !important;
 				}
 			}
 		}
@@ -111,8 +111,8 @@

 		.action-btn {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			display: flex;
 			align-items: center;
@@ -127,7 +127,7 @@
 		align-items: center;

 		.views-tabs {
-			color: var(--l2-foreground);
+			color: var(--text-vanilla-400);

 			.view-title {
 				display: flex;
@@ -140,22 +140,22 @@
 			}

 			.tab {
-				border: 1px solid var(--l1-border);
+				border: 1px solid var(--bg-slate-400);
 				width: 114px;
 			}

 			.tab::before {
-				background: var(--l1-border);
+				background: var(--bg-slate-400);
 			}

 			.selected_view {
-				background: var(--l3-background);
-				color: var(--l1-foreground);
-				border: 1px solid var(--l1-border);
+				background: var(--bg-slate-300);
+				color: var(--text-vanilla-100);
+				border: 1px solid var(--bg-slate-400);
 			}

 			.selected_view::before {
-				background: var(--l1-border);
+				background: var(--bg-slate-400);
 			}
 		}

@@ -164,8 +164,8 @@
 			height: 30px;

 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 		}
 	}
@@ -174,3 +174,60 @@
 		padding: 0px;
 	}
 }
+
+.lightMode {
+	.ant-drawer-header {
+		border-bottom: 1px solid var(--bg-vanilla-400);
+		background: var(--bg-vanilla-100);
+	}
+
+	.host-detail-drawer {
+		.title {
+			color: var(--text-ink-300);
+		}
+
+		.host-detail-drawer__host {
+			.ant-typography {
+				color: var(--text-ink-300);
+				background: transparent;
+			}
+		}
+
+		.radio-button {
+			border: 1px solid var(--bg-vanilla-400);
+			background: var(--bg-vanilla-100);
+			color: var(--text-ink-300);
+		}
+
+		.views-tabs {
+			.tab {
+				background: var(--bg-vanilla-100);
+			}
+
+			.selected_view {
+				background: var(--bg-vanilla-300);
+				border: 1px solid var(--bg-slate-300);
+				color: var(--text-ink-400);
+			}
+
+			.selected_view::before {
+				background: var(--bg-vanilla-300);
+				border-left: 1px solid var(--bg-slate-300);
+			}
+		}
+
+		.compass-button {
+			border: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-100);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		}
+
+		.tabs-and-search {
+			.action-btn {
+				border: 1px solid var(--bg-vanilla-400);
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
+			}
+		}
+	}
+}
--- a/frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogs.styles.scss
+++ b/frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogs.styles.scss
@@ -6,7 +6,8 @@

 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border) !important;
+			border: 1px solid var(--bg-slate-400) !important;
+			background-color: var(--bg-ink-300) !important;

 			input {
 				font-size: 12px;
@@ -25,7 +26,7 @@

 		padding: 12px;
 		border-radius: 3px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-500);
 	}

 	.host-metrics-logs {
@@ -44,11 +45,11 @@
 			}

 			&::-webkit-scrollbar-thumb {
-				background: var(--l1-border);
+				background: var(--bg-slate-300);
 			}

 			&::-webkit-scrollbar-thumb:hover {
-				background: var(--l1-border);
+				background: var(--bg-slate-200);
 			}

 			.ant-row {
@@ -117,3 +118,16 @@
 		gap: 16px;
 	}
 }
+
+.lightMode {
+	.filter-section {
+		border-top: 1px solid var(--bg-vanilla-300);
+		border-bottom: 1px solid var(--bg-vanilla-300);
+
+		.ant-select-selector {
+			border-color: var(--bg-vanilla-300) !important;
+			background-color: var(--bg-vanilla-100) !important;
+			color: var(--bg-ink-200);
+		}
+	}
+}
--- a/frontend/src/components/HostMetricsDetail/Metrics/Metrics.styles.scss
+++ b/frontend/src/components/HostMetricsDetail/Metrics/Metrics.styles.scss
@@ -17,7 +17,7 @@
 	gap: 8px;
 	padding: 12px;
 	border-radius: 3px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-500);
 }

 .host-metrics-card {
@@ -25,7 +25,7 @@
 	height: 300px;
 	padding: 10px;

-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-500);

 	.ant-card-body {
 		padding: 0;
--- a/frontend/src/components/HostMetricsDetail/Processes/Processes.styles.scss
+++ b/frontend/src/components/HostMetricsDetail/Processes/Processes.styles.scss
@@ -28,7 +28,7 @@

 	.infra-container-card-text {
 		font-size: var(--font-size-sm);
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		width: 400px;
@@ -44,7 +44,7 @@
 		align-items: flex-start;
 		gap: 12px;
 		border-radius: 4px;
-		background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+		background: rgba(171, 189, 255, 0.04);

 		.ant-space {
 			align-items: flex-start;
@@ -58,3 +58,9 @@
 		margin: auto;
 	}
 }
+
+.lightMode {
+	.infra-container-card-text {
+		color: var(--text-ink-200);
+	}
+}
--- a/frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx
+++ b/frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx
@@ -1,4 +1,4 @@
-import { Badge } from '@signozhq/ui';
+import { Badge } from '@signozhq/badge';

 type BadgeColor =
 	| 'vanilla'
--- a/frontend/src/components/InputWithLabel/InputWithLabel.styles.scss
+++ b/frontend/src/components/InputWithLabel/InputWithLabel.styles.scss
@@ -5,7 +5,7 @@
 	border-radius: 2px 0px 0px 2px;

 	.label {
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 500;
@@ -21,8 +21,8 @@
 		padding: 0px 8px;

 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);

 		display: flex;
 		justify-content: flex-start;
@@ -36,7 +36,7 @@
 		font-family: 'Space Mono', monospace !important;

 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-400);

 		border-right: none;
 		border-left: none;
@@ -47,7 +47,7 @@
 		font-size: 12px !important;
 		line-height: 27px;
 		&::placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--bg-vanilla-400) !important;
 			font-size: 12px !important;
 		}
 		&[type='number']::-webkit-inner-spin-button,
@@ -61,8 +61,8 @@

 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 		height: 38px;
 		width: 38px;
 	}
@@ -70,8 +70,8 @@
 	&.labelAfter {
 		.input {
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
 		}
@@ -83,3 +83,31 @@
 		}
 	}
 }
+
+.lightMode {
+	.input-with-label {
+		.label {
+			color: var(--bg-ink-500) !important;
+
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		.input {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		.close-btn {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		&.labelAfter {
+			.input {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+}
--- a/frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss
+++ b/frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss
@@ -19,7 +19,7 @@
 		font-weight: var(--label-base-400-font-weight);
 		line-height: var(--label-base-400-line-height);
 		letter-spacing: -0.065px;
-		color: var(--l1-foreground);
+		color: var(--bg-base-white);
 		margin: 0;
 	}

@@ -116,7 +116,7 @@
 	height: 32px;
 	color: var(--l1-foreground);
 	background-color: var(--l2-background);
-	border-color: var(--l1-border);
+	border-color: var(--border);
 	font-size: var(--paragraph-base-400-font-size);

 	&::placeholder {
@@ -149,7 +149,7 @@
 		.ant-select-selection-item {
 			font-size: var(--paragraph-base-400-font-size);
 			letter-spacing: -0.07px;
-			color: var(--l1-foreground);
+			color: var(--bg-base-white);
 			line-height: 32px;
 		}
 	}
@@ -181,7 +181,7 @@
 	box-shadow: none;

 	&:hover {
-		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
+		background: rgba(229, 72, 77, 0.1);
 		opacity: 0.9;
 	}
 }
@@ -196,8 +196,8 @@
 }

 .invite-team-members-error-callout {
-	background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
-	border: 1px solid color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+	background: rgba(229, 72, 77, 0.1);
+	border: 1px solid rgba(229, 72, 77, 0.2);
 	border-radius: 4px;
 	animation: horizontal-shaking 300ms ease-out;
 }
@@ -246,3 +246,19 @@
 		color: var(--l1-foreground);
 	}
 }
+
+.lightMode {
+	.invite-members-modal {
+		[data-slot='dialog-title'] {
+			color: var(--bg-base-black);
+		}
+	}
+
+	.team-member-role-select {
+		.ant-select-selector {
+			.ant-select-selection-item {
+				color: var(--bg-base-black);
+			}
+		}
+	}
+}
--- a/frontend/src/components/InviteMembersModal/InviteMembersModal.tsx
+++ b/frontend/src/components/InviteMembersModal/InviteMembersModal.tsx
@@ -5,7 +5,7 @@ import { Style } from '@signozhq/design-tokens';
 import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { ChevronDown, CircleAlert, Plus, Trash2, X } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
--- a/frontend/src/components/InviteMembersModal/tests/InviteMembersModal.test.tsx
+++ b/frontend/src/components/InviteMembersModal/tests/InviteMembersModal.test.tsx
@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';
 import { StatusCodes } from 'http-status-codes';
--- a/frontend/src/components/LaunchChatSupport/LaunchChatSupport.styles.scss
+++ b/frontend/src/components/LaunchChatSupport/LaunchChatSupport.styles.scss
@@ -8,6 +8,18 @@
 	}
 }

+.lightMode {
+	.facing-issue-button {
+		color: var(--bg-vanilla-500);
+		border-color: var(--bg-vanilla-300);
+
+		> .ant-btn:hover {
+			color: var(--bg-vanilla-500) !important;
+			border-color: var(--bg-vanilla-300) !important;
+		}
+	}
+}
+
 .tooltip-overlay {
 	text-wrap: nowrap;
 	.ant-tooltip-inner {
--- a/frontend/src/components/LogDetail/LogDetails.styles.scss
+++ b/frontend/src/components/LogDetail/LogDetails.styles.scss
@@ -1,6 +1,6 @@
 .log-detail-drawer {
-	border-left: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border-left: 1px solid var(--bg-slate-500);
+	background: var(--bg-ink-400);
 	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);

 	.log-detail-drawer__title {
@@ -30,8 +30,8 @@

 		align-items: stretch;

-		border-bottom: 1px solid var(--l1-border);
-		background: var(--l2-background);
+		border-bottom: 1px solid var(--bg-slate-500);
+		background: var(--bg-ink-400);
 	}

 	.ant-drawer-close {
@@ -46,7 +46,7 @@
 	}

 	.title {
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);
 		font-family: Inter;
 		font-size: var(--font-size-sm);
 		font-style: normal;
@@ -60,8 +60,8 @@
 		align-items: center;
 		justify-content: center;
 		padding-top: var(--padding-1);
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}

@@ -91,31 +91,31 @@
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
-			color: var(--l2-foreground);
+			color: var(--text-vanilla-400);
 			opacity: 0.6;
 		}

 		.log-type-indicator {
 			height: 24px;
-			border: 2px solid var(--l1-border);
+			border: 2px solid var(--bg-slate-400);
 			border-radius: 5px;
 			margin-left: 0;

 			&.INFO {
-				border-color: var(--l1-border);
+				border-color: #1d212d;
 			}

 			&.WARNING {
-				border-color: var(--bg-amber-400);
+				border-color: #ffcd56;
 			}

 			&.ERROR {
-				border-color: var(--bg-cherry-500);
+				border-color: #e5484d;
 			}
 		}

 		.log-overflow-shadow {
-			background: linear-gradient(270deg, var(--card) 10.4%, transparent 100%);
+			background: linear-gradient(270deg, #121317 10.4%, rgba(18, 19, 23, 0) 100%);

 			width: 196px;
 			position: absolute;
@@ -131,8 +131,8 @@

 		.action-btn {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			display: flex;
 			align-items: center;
@@ -146,7 +146,7 @@
 	}

 	.views-tabs {
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);

 		.view-title {
 			display: flex;
@@ -159,28 +159,28 @@
 		}

 		.tab {
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-400);
 			width: 114px;
 		}

 		.tab::before {
-			background: var(--l1-border);
+			background: var(--bg-slate-400);
 		}

 		.selected_view {
-			background: var(--l3-background);
-			color: var(--l1-foreground);
-			border: 1px solid var(--l1-border);
+			background: var(--bg-slate-300);
+			color: var(--text-vanilla-100);
+			border: 1px solid var(--bg-slate-400);
 		}

 		.selected_view::before {
-			background: var(--l1-border);
+			background: var(--bg-slate-400);
 		}
 	}

 	.search-input {
 		margin-top: var(--margin-2);
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-400);
 		height: 46px;
 		padding: var(--padding-1) var(--padding-2);
 		box-shadow: none;
@@ -197,8 +197,8 @@
 		right: 0;
 		padding: 8px 16px;
 		text-align: left;
-		color: var(--l3-foreground);
-		background: var(--l2-background);
+		color: var(--text-vanilla-200);
+		background: var(--bg-ink-400);
 		z-index: 10;

 		.log-detail-drawer__footer-hint-content {
@@ -210,7 +210,7 @@
 		.log-detail-drawer__footer-hint-icon {
 			display: inline;
 			vertical-align: middle;
-			color: var(--l3-foreground);
+			color: var(--text-vanilla-200);
 		}

 		.log-detail-drawer__footer-hint-text {
@@ -232,9 +232,9 @@
 		min-width: 28px;
 		height: 28px;
 		border-radius: 4px;
-		background: var(--l2-background);
-		color: var(--l2-foreground);
-		border: 1px solid var(--l1-border);
+		background: var(--bg-ink-400);
+		color: var(--text-vanilla-400);
+		border: 1px solid var(--bg-ink-300);
 		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
 		display: flex;
 		align-items: center;
@@ -244,24 +244,154 @@

 	.log-arrow-btn-up,
 	.log-arrow-btn-down {
-		background: var(--l2-background);
+		background: var(--bg-ink-400);
 	}

 	.log-arrow-btn:active,
 	.log-arrow-btn:focus {
-		background: var(--l3-background);
-		color: var(--l1-foreground);
+		background: var(--bg-ink-300);
+		color: var(--text-vanilla-100);
 	}

 	.log-arrow-btn[disabled] {
 		opacity: 0.5;
 		cursor: not-allowed;
-		background: var(--l1-background);
-		color: var(--l3-foreground);
+		background: var(--bg-ink-500);
+		color: var(--text-vanilla-200);

 		.log-arrow-btn:hover:not([disabled]) {
-			background: var(--l3-background);
-			color: var(--l1-foreground);
+			background: var(--bg-ink-300);
+			color: var(--text-vanilla-100);
+		}
+	}
+}
+
+.lightMode {
+	.log-arrows {
+		background: var(--bg-vanilla-100);
+		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
+	}
+
+	.log-arrow-btn {
+		background: var(--bg-vanilla-100);
+		color: var(--text-ink-400);
+		border: 1px solid var(--bg-vanilla-300);
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+	}
+
+	.log-arrow-btn-up,
+	.log-arrow-btn-down {
+		background: var(--bg-vanilla-100);
+	}
+
+	.log-arrow-btn:active,
+	.log-arrow-btn:focus {
+		background: var(--bg-vanilla-200);
+		color: var(--text-ink-500);
+	}
+
+	.log-arrow-btn:hover:not([disabled]) {
+		background: var(--bg-vanilla-200);
+		color: var(--text-ink-500);
+	}
+
+	.log-arrow-btn[disabled] {
+		background: var(--bg-vanilla-100);
+		color: var(--text-ink-200);
+	}
+	.ant-drawer-header {
+		border-bottom: 1px solid var(--bg-vanilla-400);
+		background: var(--bg-vanilla-100);
+	}
+
+	.log-detail-drawer {
+		.title {
+			color: var(--text-ink-300);
+		}
+
+		.log-detail-drawer__log {
+			.log-overflow-shadow {
+				background: linear-gradient(
+					270deg,
+					var(--bg-vanilla-100) 10.4%,
+					rgba(255, 255, 255, 0) 100%
+				);
+			}
+
+			.log-type-indicator {
+				border: 2px solid var(--bg-vanilla-400);
+			}
+
+			.ant-typography {
+				color: var(--text-ink-300);
+				background: transparent;
+			}
+		}
+
+		.radio-button {
+			border: 1px solid var(--bg-vanilla-400);
+			background: var(--bg-vanilla-100);
+			color: var(--text-ink-300);
+		}
+
+		.views-tabs {
+			.tab {
+				background: var(--bg-vanilla-100);
+			}
+
+			.selected_view {
+				background: var(--bg-vanilla-300);
+				border: 1px solid var(--bg-slate-300);
+				color: var(--text-ink-400);
+			}
+
+			.selected_view::before {
+				background: var(--bg-vanilla-300);
+				border-left: 1px solid var(--bg-slate-300);
+			}
+		}
+
+		.tabs-and-search {
+			.action-btn {
+				border: 1px solid var(--bg-vanilla-400);
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
+			}
+		}
+
+		.search-input {
+			border: 1px solid var(--bg-vanilla-200);
+			background: var(--bg-vanilla-100);
+			color: var(--text-ink-300);
+		}
+	}
+
+	.log-detail-drawer__footer-hint {
+		position: sticky;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 8px 16px;
+		text-align: left;
+		color: var(--text-vanilla-700);
+		background: var(--bg-vanilla-100);
+		z-index: 10;
+
+		.log-detail-drawer__footer-hint-content {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
+
+		.log-detail-drawer__footer-hint-icon {
+			display: inline;
+			vertical-align: middle;
+			color: var(--text-vanilla-700);
+		}
+
+		.log-detail-drawer__footer-hint-text {
+			font-size: 13px;
+			margin: 0;
 		}
 	}
 }
--- a/frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss
+++ b/frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss
@@ -1,6 +1,6 @@
 .query-builder-search-wrapper {
 	margin-top: 10px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-400);
 	border-bottom: none;

 	.ant-select-selector {
--- a/frontend/src/components/Logs/ListLogView/ListLogView.styles.scss
+++ b/frontend/src/components/Logs/ListLogView/ListLogView.styles.scss
@@ -6,7 +6,7 @@
 }
 .log-field-key,
 .log-field-key-colon {
-	color: var(--l2-foreground);
+	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -41,7 +41,7 @@
 	flex-shrink: 0;
 }
 .log-value {
-	color: var(--l2-foreground);
+	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -104,7 +104,7 @@
 	.selected-log-value {
 		color: var(--bg-sienna-500);
 		border-radius: 2px;
-		background: color-mix(in srgb, var(--bg-sienna-500) 8%, transparent);
+		background: rgba(173, 127, 88, 0.08);
 		padding: 0px 2px;
 		margin-left: 7px;
 		font-weight: 400;
@@ -154,8 +154,8 @@
 	height: 32px;
 	width: 68px;
 	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border: 1px solid var(--bg-slate-400, #1d212d);
+	background: var(--bg-ink-400, #121317);
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

 	.context-btn {
@@ -163,7 +163,7 @@
 	}
 	.copy-link-btn {
 		width: 50% !important;
-		border-left: 1px solid var(--l1-border) !important;
+		border-left: 1px solid var(--bg-slate-400, #1d212d) !important;
 	}

 	.ant-btn-default {
@@ -172,6 +172,16 @@
 	}
 }

+.lightMode {
+	.log-field-key,
+	.log-field-key-colon {
+		color: var(--text-slate-400);
+	}
+	.log-value {
+		color: var(--text-slate-400);
+	}
+}
+
 .dark {
 	.log-field-key,
 	.log-field-key-colon {
--- a/frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss
+++ b/frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss
@@ -6,8 +6,8 @@
 	right: 0;
 	cursor: pointer;
 	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border: 1px solid var(--bg-slate-400);
+	background: var(--bg-ink-400);

 	.ant-btn-default {
 		border: none;
@@ -18,13 +18,13 @@
 		display: flex;

 		&.active-tab {
-			background-color: var(--l1-border);
+			background-color: var(--bg-slate-400);
 		}
 	}

 	.copy-log-btn {
-		border-left: 1px solid var(--l1-border);
-		border-color: var(--l1-border) !important;
+		border-left: 1px solid var(--bg-slate-400);
+		border-color: var(--bg-slate-400) !important;
 	}
 }

@@ -38,3 +38,15 @@
 	margin: 0;
 	z-index: 5;
 }
+
+.lightMode {
+	.log-line-action-buttons {
+		border: 1px solid var(--bg-vanilla-400);
+		background: var(--bg-vanilla-400);
+
+		.copy-log-btn {
+			border-left: 1px solid var(--bg-vanilla-400);
+			border-color: var(--bg-vanilla-400) !important;
+		}
+	}
+}
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
@@ -60,7 +60,7 @@
 			background-color: var(--bg-robin-600);
 		}
 		&.severity-info-1 {
-			background-color: var(--primary-background);
+			background-color: var(--bg-robin-500);
 		}
 		&.severity-info-2 {
 			background-color: var(--bg-robin-400);
--- a/frontend/src/components/Logs/TableView/useTableView.styles.scss
+++ b/frontend/src/components/Logs/TableView/useTableView.styles.scss
@@ -1,5 +1,5 @@
 .text {
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -38,6 +38,12 @@
 	}
 }

+.lightMode {
+	.text {
+		color: var(--bg-slate-400);
+	}
+}
+
 .paragraph {
 	margin: 0;
 	padding: 0px !important;
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss
@@ -1,11 +1,11 @@
 .format-options-popover {
 	.ant-popover-inner {
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-400);
 		background: linear-gradient(
 			139deg,
-			var(--l2-background) 0%,
-			var(--l1-background) 98.68%
+			var(--bg-ink-400) 0%,
+			var(--bg-ink-500) 98.68%
 		);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
@@ -35,7 +35,7 @@
 					}

 					.text {
-						color: var(--muted-foreground);
+						color: var(--bg-slate-50);
 						font-family: Inter;
 						font-size: 11px;
 						font-style: normal;
@@ -65,7 +65,7 @@
 							flex-shrink: 0;
 						}
 						.text {
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-400);
 							font-family: Inter;
 							font-size: 13px;
 							font-style: normal;
@@ -76,7 +76,7 @@
 						}

 						.text:hover {
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-300);
 						}
 					}

@@ -93,7 +93,7 @@
 				gap: 12px;

 				.title {
-					color: var(--muted-foreground);
+					color: var(--bg-slate-50);
 					font-family: Inter;
 					font-size: 11px;
 					font-style: normal;
@@ -111,7 +111,7 @@
 					align-items: center;
 					border: none !important;
 					.font-value {
-						color: var(--l2-foreground);
+						color: var(--bg-vanilla-400);
 						font-family: Inter;
 						font-size: 13px;
 						font-style: normal;
@@ -139,7 +139,7 @@
 					line-height: 18px;
 					letter-spacing: 0.08em;
 					text-align: left;
-					color: var(--muted-foreground);
+					color: var(--bg-slate-50);
 				}

 				.menu-items {
@@ -159,7 +159,7 @@

 					.item-label {
 						display: flex;
-						color: var(--l2-foreground);
+						color: var(--bg-vanilla-400, #c0c1c3);
 						justify-content: space-between;
 						align-items: center;
 					}
@@ -170,14 +170,14 @@

 			.horizontal-line {
 				height: 1px;
-				background: var(--l3-background);
+				background: #1d212d;
 			}

 			.max-lines-per-row {
 				padding: 12px;

 				.title {
-					color: var(--muted-foreground);
+					color: var(--bg-slate-50);
 					font-family: Inter;
 					font-size: 11px;
 					font-style: normal;
@@ -193,7 +193,7 @@
 					align-items: center;

 					.lucide {
-						color: var(--l2-foreground);
+						color: var(--bg-vanilla-400, #c0c1c3);
 						cursor: pointer;
 					}
 				}
@@ -210,8 +210,8 @@
 						width: auto;
 						border-right: none;
 						border-left: none;
-						border-top: 1px solid var(--l1-border);
-						border-bottom: 1px solid var(--l1-border);
+						border-top: 1px solid var(--bg-slate-400);
+						border-bottom: 1px solid var(--bg-slate-400);
 						text-align: center;
 						height: 26px;
 						border-radius: 0;
@@ -250,7 +250,7 @@
 						height: 26px;

 						border-radius: 0px 1px 1px 0px;
-						background: var(--l3-background);
+						background: var(--bg-ink-300, #16181d);
 					}
 				}
 			}
@@ -273,7 +273,7 @@
 						display: flex;
 						gap: 4px;
 						align-items: center;
-						color: var(--muted-foreground);
+						color: var(--bg-slate-50);
 						text-transform: uppercase;
 						font-size: 11px;
 						font-weight: 500;
@@ -302,7 +302,7 @@
 						.column-name {
 							padding: 4px 8px;
 							border-radius: 1px;
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-400, #c0c1c3);
 							font-family: Inter;
 							font-size: 13px;
 							font-style: normal;
@@ -311,7 +311,7 @@
 							letter-spacing: -0.07px;

 							&.selected {
-								background-color: var(--l3-background);
+								background-color: var(--bg-ink-200);
 								cursor: pointer;
 							}
 						}
@@ -330,7 +330,7 @@
 				}

 				.title {
-					color: var(--muted-foreground);
+					color: var(--bg-slate-50);
 					font-family: Inter;
 					font-size: 11px;
 					font-style: normal;
@@ -346,14 +346,14 @@
 					align-items: center;

 					.lucide {
-						color: var(--l2-foreground);
+						color: var(--bg-vanilla-400, #c0c1c3);
 						cursor: pointer;
 					}
 				}

 				.horizontal-line {
 					height: 1px;
-					background: var(--l3-background);
+					background: #1d212d;
 				}

 				.loading-container {
@@ -371,7 +371,7 @@
 						margin-top: 12px;

 						.column-name {
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-400, #c0c1c3);
 							font-family: Inter;
 							font-size: 13px;
 							font-style: normal;
@@ -387,18 +387,18 @@
 							cursor: pointer;

 							&.default-column {
-								color: var(--l2-foreground);
+								color: var(--bg-vanilla-400, #c0c1c3);
 								cursor: not-allowed;
 							}

 							&.no-columns-selected {
-								color: var(--l3-foreground);
+								color: var(--bg-slate-100);
 								font-size: 12px;
 								cursor: not-allowed;
 							}

 							&.add-new-column-btn {
-								color: var(--l2-foreground);
+								color: var(--bg-vanilla-400, #c0c1c3);
 								cursor: pointer;
 							}

@@ -447,7 +447,7 @@

 					.column-divider {
 						margin: 12px 0;
-						border-top: 2px solid var(--l1-border);
+						border-top: 2px solid var(--bg-slate-400);
 					}
 				}
 			}
@@ -458,7 +458,7 @@

 					.item {
 						.item-label {
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-400);
 						}
 					}
 				}
@@ -468,11 +468,11 @@
 					margin-left: -5%;

 					border-radius: 4px;
-					border: 1px solid var(--l1-border);
+					border: 1px solid var(--bg-slate-400);
 					background: linear-gradient(
 						139deg,
-						color-mix(in srgb, var(--card) 80%, transparent) 0%,
-						color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+						rgba(18, 19, 23, 0.8) 0%,
+						rgba(18, 19, 23, 0.9) 98.68%
 					);

 					box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
@@ -490,7 +490,7 @@
 .lightMode {
 	.format-options-popover {
 		.ant-popover-inner {
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-vanilla-300);
 			background: linear-gradient(
 				139deg,
 				rgba(255, 255, 255, 0.8) 0%,
@@ -502,18 +502,18 @@
 				.font-size-dropdown {
 					.back-btn {
 						.text {
-							color: var(--l2-background);
+							color: var(--bg-ink-400);
 						}
 					}

 					.content {
 						.option-btn {
 							.text {
-								color: var(--l2-background);
+								color: var(--bg-ink-400);
 							}

 							.text:hover {
-								color: var(--l3-background);
+								color: var(--bg-ink-300);
 							}
 						}
 					}
@@ -522,105 +522,105 @@
 				.add-new-column-container {
 					.add-new-column-header {
 						.title {
-							color: var(--l2-foreground);
+							color: var(--bg-ink-100);
 						}
 					}

 					.add-new-column-content {
 						.column-format-new-options {
 							.column-name {
-								color: var(--l2-background);
+								color: var(--bg-ink-400);

 								&.selected {
-									background-color: var(--l3-background);
+									background-color: var(--bg-vanilla-400);
 								}
 							}
 						}

 						.loading-container {
-							color: var(--l2-background);
+							color: var(--bg-ink-400);
 						}
 					}
 				}

 				.font-size-container {
 					.title {
-						color: var(--l2-foreground);
+						color: var(--bg-ink-100);
 					}

 					.value {
 						.font-value {
-							color: var(--l2-background);
+							color: var(--bg-ink-400);
 						}
 					}
 				}

 				.horizontal-line {
-					background: var(--l3-background);
+					background: var(--bg-vanilla-300);
 				}

 				.item-content {
 					.column-divider {
-						border-top: 2px solid var(--l1-border);
+						border-top: 2px solid var(--bg-vanilla-300);
 					}
 				}

 				.max-lines-per-row {
 					.title {
-						color: var(--l2-foreground);
+						color: var(--bg-ink-200);

 						.lucide {
-							color: var(--l1-foreground);
+							color: var(--bg-ink-300);
 						}
 					}

 					.max-lines-per-row-input {
-						border: 1px solid var(--l1-border);
+						border: 1px solid var(--bg-vanilla-300);

 						.periscope-btn {
-							background: var(--l3-background);
+							background: var(--bg-vanilla-300);
 						}
 					}
 				}

 				.menu-container {
 					.title {
-						color: var(--l2-foreground);
+						color: var(--bg-ink-200);
 					}

 					.item {
 						.item-label {
-							color: var(--l2-background);
+							color: var(--bg-ink-400);
 						}
 					}
 				}

 				.selected-item-content-container {
 					.title {
-						color: var(--l2-foreground);
+						color: var(--bg-ink-200);

 						.lucide {
-							color: var(--l1-foreground);
+							color: var(--bg-ink-300);
 						}
 					}

 					.horizontal-line {
-						background: var(--l3-background);
+						background: var(--bg-vanilla-300);
 					}

 					.item-content {
 						.max-lines-per-row-input {
-							border: 1px solid var(--l1-border);
+							border: 1px solid var(--bg-vanilla-300);

 							.periscope-btn {
-								background: var(--l3-background);
+								background: var(--bg-vanilla-300);
 							}
 						}

 						.column-format,
 						.column-format-new-options {
 							.column-name {
-								color: var(--l1-foreground);
+								color: var(--bg-ink-300);
 							}
 						}
 					}
@@ -632,13 +632,13 @@

 						.item {
 							.item-label {
-								color: var(--l1-foreground);
+								color: var(--bg-ink-300);
 							}
 						}
 					}

 					.selected-item-content-container {
-						border: 1px solid var(--l1-border);
+						border: 1px solid var(--bg-vanilla-300);
 						background: linear-gradient(
 							139deg,
 							rgba(255, 255, 255, 0.8) 0%,
--- a/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss
+++ b/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss
@@ -1,8 +1,8 @@
 .code-snippet-container {
 	position: relative;
 	// background-color: rgb(43, 43, 43);
-	background-color: var(--bg-ink-400);
-	border-color: var(--bg-ink-400);
+	background-color: #111a2c;
+	border-color: #111a2c;
 }

 .code-copy-btn {
@@ -16,21 +16,21 @@
 	button {
 		cursor: pointer;

-		background-color: color-mix(in srgb, var(--bg-ink-300) 70%, transparent);
-		color: var(--l1-foreground);
+		background-color: rgba($color: #1d1d1d, $alpha: 0.7);
+		color: white;
 		border: none;
 		padding: 8px;
 		border-radius: 3px;
 		transition: all 0.1s;

 		&:hover {
-			background-color: var(--bg-ink-300);
+			background-color: rgba($color: #1d1d1d, $alpha: 1);
 		}
 	}

 	&.copied {
 		button {
-			background-color: var(--bg-forest-500);
+			background-color: rgba($color: #52c41a, $alpha: 1);
 		}
 	}
 }
--- a/frontend/src/components/MembersTable/MembersTable.styles.scss
+++ b/frontend/src/components/MembersTable/MembersTable.styles.scss
@@ -54,7 +54,7 @@

 			.ant-table-column-sorter-up.active,
 			.ant-table-column-sorter-down.active {
-				color: var(--l1-foreground);
+				color: var(--bg-base-white);
 				opacity: 1;
 			}
 		}
@@ -69,14 +69,10 @@
 		}

 		> tr.members-table-row--tinted > td {
-			background: color-mix(in srgb, var(--bg-robin-200) 2%, transparent);
+			background: rgba(171, 189, 255, 0.02);
 		}
 		> tr:hover > td {
-			background: color-mix(
-				in srgb,
-				var(--bg-robin-200) 4%,
-				transparent
-			) !important;
+			background: rgba(171, 189, 255, 0.04) !important;
 		}
 	}

@@ -170,7 +166,7 @@

 		strong {
 			font-weight: var(--font-weight-medium);
-			color: var(--l1-foreground);
+			color: var(--bg-base-white);
 		}
 	}
 }
@@ -209,4 +205,12 @@
 			}
 		}
 	}
+
+	.members-empty-state {
+		&__text {
+			strong {
+				color: var(--bg-base-black);
+			}
+		}
+	}
 }
--- a/frontend/src/components/MembersTable/MembersTable.tsx
+++ b/frontend/src/components/MembersTable/MembersTable.tsx
@@ -1,5 +1,5 @@
 import type React from 'react';
-import { Badge } from '@signozhq/ui';
+import { Badge } from '@signozhq/badge';
 import { Table, Tooltip } from 'antd';
 import type { ColumnsType, SorterResult } from 'antd/es/table/interface';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
--- a/frontend/src/components/MessagingQueueHealthCheck/MessagingQueueHealthCheck.styles.scss
+++ b/frontend/src/components/MessagingQueueHealthCheck/MessagingQueueHealthCheck.styles.scss
@@ -1,8 +1,8 @@
 .mq-health-check-modal {
 	.ant-modal-content {
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
+		border: 1px solid var(--bg-slate-500);
+		background: var(--bg-ink-400);
 		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);

 		.ant-modal-close {
@@ -10,13 +10,13 @@
 		}

 		.ant-modal-header {
-			border-bottom: 1px solid var(--l1-border);
-			background: var(--l2-background);
+			border-bottom: 1px solid var(--bg-slate-500);
+			background: var(--bg-ink-400);
 			margin-bottom: 16px;
 			padding-bottom: 4px;

 			.ant-modal-title {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 				font-family: Inter;
 				font-size: 13px;
 				font-style: normal;
@@ -31,7 +31,7 @@
 			flex-direction: column;
 			gap: 8px;
 			padding: 8px;
-			background: var(--l3-background);
+			background: var(--bg-ink-300);

 			.attribute-select {
 				align-items: center;
@@ -47,8 +47,8 @@
 					gap: 4px;

 					border-radius: 2px;
-					border: 1px solid var(--l1-border);
-					background: var(--l3-background);
+					border: 1px solid var(--bg-slate-400);
+					background: var(--bg-ink-300);
 				}
 			}

@@ -57,7 +57,7 @@
 			}

 			.tree-text {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-family: 'Geist Mono';
 				font-size: 12px;
 				font-style: normal;
@@ -101,7 +101,7 @@

 						.success-attribute-icon {
 							width: 44px;
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-400);
 							display: flex;

 							> svg {
@@ -128,7 +128,7 @@
 			align-items: center;
 			height: 100%;
 			padding: 8px;
-			background: var(--l3-background);
+			background: var(--bg-ink-300);
 			height: 156px;
 		}
 	}
@@ -147,10 +147,10 @@
 	border-radius: 2px;
 	border: none;
 	box-shadow: none;
-	background: var(--l3-background);
+	background: var(--bg-slate-500);

 	&.missing-config-btn {
-		background: color-mix(in srgb, var(--bg-amber-500) 10%, transparent);
+		background: rgba(255, 205, 86, 0.1);
 		color: var(--bg-amber-400);

 		&:hover {
@@ -162,14 +162,68 @@
 		display: flex;
 		align-items: center;
 		margin-right: 8px;
-		border-right: 1px solid
-			color-mix(in srgb, var(--bg-amber-400) 10%, transparent);
+		border-right: 1px solid rgba(255, 215, 120, 0.1);
 		padding-right: 8px;
 	}
 }

 .lightMode {
+	.mq-health-check-modal {
+		.ant-modal-content {
+			border: 1px solid var(--bg-vanilla-400);
+			background: var(--bg-vanilla-200);
+
+			.ant-modal-header {
+				border-bottom: 1px solid var(--bg-vanilla-400);
+				background: var(--bg-vanilla-200);
+
+				.ant-modal-title {
+					color: var(--bg-ink-300);
+				}
+			}
+
+			.modal-content {
+				background: var(--bg-vanilla-100);
+
+				.attribute-select {
+					.ant-select-selector {
+						border: 1px solid var(--bg-vanilla-300);
+						background: var(--bg-vanilla-200);
+					}
+				}
+
+				.tree-text {
+					color: var(--bg-ink-300);
+				}
+
+				.ant-tree {
+					.ant-tree-title {
+						.attribute-error-title {
+							color: var(--bg-amber-500);
+
+							.tree-text {
+								color: var(--bg-amber-500);
+							}
+						}
+
+						.attribute-success-title {
+							.success-attribute-icon {
+								color: var(--bg-ink-300);
+							}
+						}
+					}
+				}
+			}
+
+			.loader-container {
+				background: var(--bg-ink-300);
+			}
+		}
+	}
+
 	.config-btn {
+		background: var(--bg-vanilla-300);
+
 		&.missing-config-btn {
 			background: var(--bg-amber-100);
 			color: var(--bg-amber-500);
--- a/frontend/src/components/MessagingQueues/MQCommon/MQCommon.styles.scss
+++ b/frontend/src/components/MessagingQueues/MQCommon/MQCommon.styles.scss
@@ -2,8 +2,8 @@
 	display: inline-flex;
 	padding: 4px 8px;
 	border-radius: 20px;
-	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+	border: 1px solid rgba(173, 127, 88, 0.2);
+	background: rgba(173, 127, 88, 0.1);
 	justify-content: center;
 	align-items: center;
 	gap: 5px;
--- a/frontend/src/components/NewSelect/styles.scss
+++ b/frontend/src/components/NewSelect/styles.scss
@@ -9,25 +9,24 @@ $custom-border-color: #2c3044;

 	&.ant-select-focused {
 		.ant-select-selector {
-			border-color: var(--primary-background);
-			box-shadow: 0 0 0 2px
-				color-mix(in srgb, var(--primary-background) 20%, transparent);
+			border-color: var(--bg-robin-500);
+			box-shadow: 0 0 0 2px rgba(78, 116, 248, 0.2);
 		}
 	}

 	.ant-select-selection-placeholder {
-		color: color-mix(in srgb, var(--border) 45%, transparent);
+		color: rgba(192, 193, 195, 0.45);
 	}

 	// Base styles are for dark mode
 	.ant-select-selector {
-		background-color: var(--l2-background);
-		border-color: var(--l1-border);
+		background-color: var(--bg-ink-400);
+		border-color: var(--bg-slate-400);
 	}

 	.ant-select-clear {
-		background-color: var(--l2-background);
-		color: color-mix(in srgb, var(--border) 70%, transparent);
+		background-color: var(--bg-ink-400);
+		color: rgba(192, 193, 195, 0.7);
 	}
 }

@@ -43,7 +42,7 @@ $custom-border-color: #2c3044;

 		.ant-select-selection-placeholder {
 			opacity: 1 !important;
-			color: var(--l2-foreground) !important;
+			color: var(--bg-vanilla-400) !important;
 			font-weight: 500;
 			visibility: visible !important;
 			pointer-events: none;
@@ -64,7 +63,7 @@ $custom-border-color: #2c3044;
 		left: 12px;
 		top: 50%;
 		transform: translateY(-50%);
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		z-index: 1;
 		pointer-events: none;

@@ -77,8 +76,8 @@ $custom-border-color: #2c3044;
 		max-height: 200px;
 		overflow: auto;
 		scrollbar-width: thin;
-		background-color: var(--l2-background);
-		border-color: var(--l1-border);
+		background-color: var(--bg-ink-400);
+		border-color: var(--bg-slate-400);
 		cursor: text;

 		&::-webkit-scrollbar {
@@ -91,7 +90,7 @@ $custom-border-color: #2c3044;
 		}

 		&::-webkit-scrollbar-track {
-			background-color: var(--l1-border);
+			background-color: var(--bg-slate-400);
 		}
 	}

@@ -107,57 +106,46 @@ $custom-border-color: #2c3044;

 	&.ant-select-focused {
 		.ant-select-selector {
-			border-color: var(--primary-background);
-			box-shadow: 0 0 0 2px
-				color-mix(in srgb, var(--primary-background) 20%, transparent);
+			border-color: var(--bg-robin-500);
+			box-shadow: 0 0 0 2px rgba(78, 116, 248, 0.2);
 		}
 	}

 	.ant-select-selection-placeholder {
-		color: color-mix(in srgb, var(--border) 45%, transparent);
+		color: rgba(192, 193, 195, 0.45);
 	}

 	// Customize tags in multiselect (dark mode by default)
 	.ant-select-selection-item {
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-400);
 		border-radius: 4px;
 		border: 1px solid $custom-border-color;
 		margin-right: 4px;
 		transition: all 0.2s;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);

 		// Style for active tag (keyboard navigation)
 		&-active {
-			border-color: var(--primary-background) !important;
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			) !important;
-			outline: 2px solid
-				color-mix(in srgb, var(--primary-background) 20%, transparent);
+			border-color: var(--bg-robin-500) !important;
+			background-color: rgba(78, 116, 248, 0.15) !important;
+			outline: 2px solid rgba(78, 116, 248, 0.2);
 		}

 		// Style for selected tags (via keyboard or mouse selection)
 		&-selected {
-			border-color: var(--primary-background) !important;
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			) !important;
-			box-shadow: 0 0 0 2px
-				color-mix(in srgb, var(--primary-background) 20%, transparent);
+			border-color: var(--bg-robin-500) !important;
+			background-color: rgba(78, 116, 248, 0.15) !important;
+			box-shadow: 0 0 0 2px rgba(78, 116, 248, 0.2);
 		}

 		.ant-select-selection-item-content {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 		}

 		.ant-select-selection-item-remove {
-			color: color-mix(in srgb, var(--border) 70%, transparent);
+			color: rgba(192, 193, 195, 0.7);
 			&:hover {
-				color: var(--l1-border);
+				color: rgba(192, 193, 195, 1);
 			}
 		}
 	}
@@ -182,24 +170,20 @@ $custom-border-color: #2c3044;
 	padding: 0;
 	box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.5), 0 6px 16px 0 rgba(0, 0, 0, 0.4),
 		0 9px 28px 8px rgba(0, 0, 0, 0.3);
-	background-color: var(--l2-background);
-	border: 1px solid var(--l1-border);
+	background-color: var(--bg-ink-400);
+	border: 1px solid var(--bg-slate-400);

 	.ant-select-item {
 		padding: 8px 12px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);

 		// Make keyboard navigation visible
 		&-option-active {
-			background-color: var(--l1-border) !important;
+			background-color: var(--bg-slate-400) !important;
 		}

 		&-option-selected {
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			) !important;
+			background-color: rgba(78, 116, 248, 0.15) !important;
 		}
 	}
 }
@@ -215,7 +199,7 @@ $custom-border-color: #2c3044;
 	.empty-message {
 		padding: 12px;
 		text-align: center;
-		color: color-mix(in srgb, var(--border) 45%, transparent);
+		color: rgba(192, 193, 195, 0.45);
 	}
 }

@@ -227,9 +211,9 @@ $custom-border-color: #2c3044;
 	overflow-x: hidden;
 	scrollbar-width: thin;
 	border-radius: 4px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-400);
 	width: 100%;
-	background-color: var(--l2-background);
+	background-color: var(--bg-ink-400);

 	&::-webkit-scrollbar {
 		width: 6px;
@@ -241,7 +225,7 @@ $custom-border-color: #2c3044;
 	}

 	&::-webkit-scrollbar-track {
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-400);
 	}

 	.no-section-options {
@@ -257,8 +241,8 @@ $custom-border-color: #2c3044;
 			font-weight: 500;
 			padding: 4px 12px;
 			font-size: 13px;
-			color: var(--l2-foreground);
-			background-color: var(--l1-border);
+			color: var(--bg-vanilla-400);
+			background-color: var(--bg-slate-400);
 			border-bottom: 1px solid $custom-border-color;
 			border-top: 1px solid $custom-border-color;
 			position: relative;
@@ -275,28 +259,20 @@ $custom-border-color: #2c3044;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);

 		&:hover {
-			background-color: var(--l1-border);
+			background-color: var(--bg-slate-400);
 		}

 		&.selected {
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			);
+			background-color: rgba(78, 116, 248, 0.15);
 			font-weight: 500;
 		}

 		&.active {
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			);
-			border-color: var(--primary-background);
+			background-color: rgba(78, 116, 248, 0.15);
+			border-color: var(--bg-robin-500);
 		}

 		.option-content {
@@ -314,7 +290,7 @@ $custom-border-color: #2c3044;
 				padding: 2px 6px;
 				border-radius: 4px;
 				background-color: $custom-border-color;
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				margin-left: 8px;
 			}
 		}
@@ -331,20 +307,20 @@ $custom-border-color: #2c3044;
 	display: flex;
 	align-items: center;
 	padding: 8px 12px;
-	border-top: 1px solid var(--l1-border);
+	border-top: 1px solid var(--bg-slate-400);
 	position: sticky;
 	bottom: 0;
-	background-color: var(--l2-background);
+	background-color: var(--bg-ink-400);
 	z-index: 1;

 	.navigation-icons {
 		display: flex;
 		margin-right: 8px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 	}

 	.navigation-text {
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-size: 12px;
 	}

@@ -386,11 +362,11 @@ $custom-border-color: #2c3044;
 			height: 14px;
 			flex-shrink: 0;
 			border-radius: 2.286px;
-			border-top: 1.143px solid var(--l1-border);
-			border-right: 1.143px solid var(--l1-border);
-			border-bottom: 2.286px solid var(--l1-border);
-			border-left: 1.143px solid var(--l1-border);
-			background: var(--l2-background);
+			border-top: 1.143px solid var(--bg-ink-200);
+			border-right: 1.143px solid var(--bg-ink-200);
+			border-bottom: 2.286px solid var(--bg-ink-200);
+			border-left: 1.143px solid var(--bg-ink-200);
+			background: var(--Ink-400, var(--bg-ink-400));
 		}
 	}
 }
@@ -403,16 +379,16 @@ $custom-border-color: #2c3044;
 	overflow-x: hidden;
 	scrollbar-width: thin;
 	border-radius: 4px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-400);
 	width: 100%;
-	background-color: var(--l2-background);
+	background-color: var(--bg-ink-400);

 	.select-all-option,
 	.custom-value-option {
 		padding: 8px 12px;
 		border-bottom: 1px solid $custom-border-color;
 		margin-bottom: 8px;
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-400);
 		position: sticky;
 		top: 0;
 		z-index: 1;
@@ -441,8 +417,8 @@ $custom-border-color: #2c3044;
 			font-weight: 500;
 			padding: 4px 12px;
 			font-size: 13px;
-			color: var(--l2-foreground);
-			background-color: var(--l1-border);
+			color: var(--bg-vanilla-400);
+			background-color: var(--bg-slate-400);
 			border-bottom: 1px solid $custom-border-color;
 			border-top: 1px solid $custom-border-color;
 			position: relative;
@@ -456,27 +432,19 @@ $custom-border-color: #2c3044;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);

 		&.active {
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			);
-			border-color: var(--primary-background);
+			background-color: rgba(78, 116, 248, 0.15);
+			border-color: var(--bg-robin-500);
 		}

 		&:hover {
-			background-color: var(--l1-border);
+			background-color: var(--bg-slate-400);
 		}

 		&.selected {
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			);
+			background-color: rgba(78, 116, 248, 0.15);
 			font-weight: 500;
 		}

@@ -515,7 +483,7 @@ $custom-border-color: #2c3044;
 					padding: 2px 6px;
 					border-radius: 4px;
 					background-color: $custom-border-color;
-					color: var(--l2-foreground);
+					color: var(--bg-vanilla-400);
 					margin-left: 8px;
 				}
 			}
@@ -573,25 +541,21 @@ $custom-border-color: #2c3044;
 	.empty-message {
 		padding: 12px;
 		text-align: center;
-		color: color-mix(in srgb, var(--border) 45%, transparent);
+		color: rgba(192, 193, 195, 0.45);
 	}

 	.status-message {
 		padding: 8px 12px;
 		text-align: center;
 		font-style: italic;
-		color: color-mix(in srgb, var(--border) 65%, transparent);
+		color: rgba(192, 193, 195, 0.65);
 		border-top: 1px dashed $custom-border-color;
 	}
 }

 // Custom styles for highlight text
 .highlight-text {
-	background-color: color-mix(
-		in srgb,
-		var(--primary-background) 20%,
-		transparent
-	);
+	background-color: rgba(78, 116, 248, 0.2);
 	padding: 0 1px;
 	border-radius: 2px;
 	font-weight: 500;
@@ -601,7 +565,7 @@ $custom-border-color: #2c3044;
 .custom-option {
 	&.focused,
 	&.ant-select-item-option-active {
-		background-color: var(--l1-border) !important;
+		background-color: var(--bg-slate-400) !important;
 	}
 }

@@ -612,7 +576,7 @@ $custom-border-color: #2c3044;
 		position: sticky;
 		top: 0;
 		z-index: 2;
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-400);
 		border-bottom: 1px solid $custom-border-color;
 		padding: 4px 12px;
 		margin: 0;
@@ -630,8 +594,7 @@ $custom-border-color: #2c3044;
 // Custom scrollbar styling (shared between components)
@mixin custom-scrollbar {
 	scrollbar-width: thin;
-	scrollbar-color: color-mix(in srgb, var(--border) 30%, transparent)
-		color-mix(in srgb, var(--border) 60%, transparent);
+	scrollbar-color: rgba(192, 193, 195, 0.3) rgba(29, 33, 45, 0.6);

 	&::-webkit-scrollbar {
 		width: 6px;
@@ -639,17 +602,17 @@ $custom-border-color: #2c3044;
 	}

 	&::-webkit-scrollbar-track {
-		background-color: color-mix(in srgb, var(--border) 60%, transparent);
+		background-color: rgba(29, 33, 45, 0.6);
 		border-radius: 10px;
 	}

 	&::-webkit-scrollbar-thumb {
-		background-color: color-mix(in srgb, var(--border) 30%, transparent);
+		background-color: rgba(192, 193, 195, 0.3);
 		border-radius: 10px;
 		transition: background-color 0.2s ease;

 		&:hover {
-			background-color: color-mix(in srgb, var(--border) 50%, transparent);
+			background-color: rgba(192, 193, 195, 0.5);
 		}
 	}
 }
@@ -657,8 +620,7 @@ $custom-border-color: #2c3044;
 // Subtle nested scrollbar styling
@mixin nested-scrollbar {
 	scrollbar-width: thin;
-	scrollbar-color: color-mix(in srgb, var(--border) 20%, transparent)
-		color-mix(in srgb, var(--border) 60%, transparent);
+	scrollbar-color: rgba(192, 193, 195, 0.2) rgba(29, 33, 45, 0.6);

 	&::-webkit-scrollbar {
 		width: 4px;
@@ -666,16 +628,16 @@ $custom-border-color: #2c3044;
 	}

 	&::-webkit-scrollbar-track {
-		background-color: color-mix(in srgb, var(--border) 60%, transparent);
+		background-color: rgba(29, 33, 45, 0.6);
 		border-radius: 10px;
 	}

 	&::-webkit-scrollbar-thumb {
-		background-color: color-mix(in srgb, var(--border) 20%, transparent);
+		background-color: rgba(192, 193, 195, 0.2);
 		border-radius: 10px;

 		&:hover {
-			background-color: color-mix(in srgb, var(--border) 30%, transparent);
+			background-color: rgba(192, 193, 195, 0.3);
 		}
 	}
 }
@@ -714,7 +676,7 @@ $custom-border-color: #2c3044;
 .lightMode {
 	.custom-select {
 		.ant-select-selector {
-			background-color: var(--l1-background);
+			background-color: var(--bg-vanilla-100);
 			border-color: #e9e9e9;
 		}

@@ -723,7 +685,7 @@ $custom-border-color: #2c3044;
 		}

 		.ant-select-clear {
-			background-color: var(--l1-background);
+			background-color: var(--bg-vanilla-100);
 			color: rgba(0, 0, 0, 0.45);
 		}

@@ -737,7 +699,7 @@ $custom-border-color: #2c3044;

 	.custom-multiselect {
 		.ant-select-selector {
-			background-color: var(--l1-background);
+			background-color: var(--bg-vanilla-100);
 			border-color: #e9e9e9;
 			cursor: text; // Make entire selector clickable for input focus

@@ -789,37 +751,37 @@ $custom-border-color: #2c3044;
 			}

 			&-active {
-				border-color: var(--primary-background) !important;
-				background-color: var(--l3-background) !important;
+				border-color: var(--bg-robin-500) !important;
+				background-color: var(--bg-vanilla-300) !important;
 			}

 			&-selected {
-				border-color: var(--primary-background) !important;
-				background-color: var(--l3-background) !important;
+				border-color: #1890ff !important;
+				background-color: var(--bg-vanilla-300) !important;
 			}
 		}
 	}

 	.custom-select-dropdown-container,
 	.custom-multiselect-dropdown-container {
-		background-color: var(--l1-background);
-		border: 1px solid var(--l1-border);
+		background-color: var(--bg-vanilla-100);
+		border: 1px solid #f0f0f0;
 		box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
 			0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);

 		.empty-message {
-			color: var(--l2-foreground);
+			color: rgba(0, 0, 0, 0.45);
 		}

 		.ant-select-item {
-			color: var(--l1-foreground);
+			color: rgba(0, 0, 0, 0.85);

 			&-option-active {
-				background-color: var(--l3-background) !important;
+				background-color: #f5f5f5 !important;
 			}

 			&-option-selected {
-				background-color: var(--l2-background) !important;
+				background-color: var(--bg-vanilla-300) !important;
 			}
 		}
 	}
@@ -827,7 +789,7 @@ $custom-border-color: #2c3044;
 	.custom-select-dropdown,
 	.custom-multiselect-dropdown {
 		border: 1px solid #f0f0f0;
-		background-color: var(--l1-background);
+		background-color: var(--bg-vanilla-100);

 		&::-webkit-scrollbar-thumb {
 			background-color: #ccc;
@@ -858,11 +820,11 @@ $custom-border-color: #2c3044;
 			}

 			&.selected {
-				background-color: var(--l3-background);
+				background-color: var(--bg-vanilla-300);
 			}

 			&.active {
-				background-color: var(--l3-background);
+				background-color: var(--bg-vanilla-300);
 				border-color: #91d5ff;
 			}

@@ -877,7 +839,7 @@ $custom-border-color: #2c3044;

 	.navigation-footer {
 		border-top: 1px solid #f0f0f0;
-		background-color: var(--l1-background);
+		background-color: var(--bg-vanilla-100);

 		.navigation-icons {
 			color: rgba(0, 0, 0, 0.45);
@@ -889,11 +851,11 @@ $custom-border-color: #2c3044;

 		.navigate {
 			.icons {
-				border-top: 1.143px solid var(--l2-foreground);
-				border-right: 1.143px solid var(--l2-foreground);
-				border-bottom: 2.286px solid var(--l2-foreground);
-				border-left: 1.143px solid var(--l2-foreground);
-				background: var(--l3-background);
+				border-top: 1.143px solid var(--bg-ink-200);
+				border-right: 1.143px solid var(--bg-ink-200);
+				border-bottom: 2.286px solid var(--bg-ink-200);
+				border-left: 1.143px solid var(--bg-ink-200);
+				background: var(--bg-vanilla-300);
 			}
 		}
 	}
@@ -972,7 +934,7 @@ $custom-border-color: #2c3044;
 			left: 12px;
 			top: 50%;
 			transform: translateY(-50%);
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 			font-weight: 500;
 			z-index: 2;
 			pointer-events: none;
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
@@ -5,8 +5,8 @@

 	width: 100%;

-	border-bottom: 1px solid var(--l1-border);
-	border-top: 1px solid var(--l1-border);
+	border-bottom: 1px solid var(--bg-slate-400);
+	border-top: 1px solid var(--bg-slate-400);

 	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 		'Helvetica Neue', sans-serif;
@@ -72,8 +72,8 @@
 				width: 1px;
 				background: repeating-linear-gradient(
 					to bottom,
-					var(--l1-border),
-					var(--l1-border) 4px,
+					#1d212d,
+					#1d212d 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -93,7 +93,7 @@
 					top: 12px;
 					width: 6px;
 					height: 6px;
-					border-left: 6px dotted var(--l1-border);
+					border-left: 6px dotted #1d212d;
 				}

 				/* Horizontal line pointing from vertical to the item */
@@ -106,8 +106,8 @@
 					height: 1px;
 					background: repeating-linear-gradient(
 						to right,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						#1d212d,
+						#1d212d 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -149,7 +149,7 @@
 		width: 44px;
 		padding: 8px;

-		border-left: 1px solid var(--l1-border);
+		border-left: 1px solid var(--bg-slate-400);

 		.query-name {
 			display: flex;
@@ -163,10 +163,10 @@
 			border-radius: 0px 2px 2px 0px;

 			border-radius: 2px;
-			border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
-			background: color-mix(in srgb, var(--bg-sakura-500) 10%, transparent);
+			border: 1px solid rgba(242, 71, 105, 0.2);
+			background: rgba(242, 71, 105, 0.1);

-			color: var(--bg-sakura-400);
+			color: var(--Sakura-400, #f56c87);
 			font-family: 'Space Mono';
 			font-size: 12px;
 			font-style: normal;
@@ -188,10 +188,10 @@
 			border-radius: 0px 2px 2px 0px;

 			border-radius: 2px;
-			border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-			background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+			border: 1px solid rgba(173, 127, 88, 0.2);
+			background: rgba(173, 127, 88, 0.1);

-			color: var(--bg-sienna-500);
+			color: var(--Sienna-500, #ad7f58);
 			font-family: 'Space Mono';
 			font-size: 12px;
 			font-style: normal;
@@ -233,7 +233,7 @@
 						top: 12px;
 						width: 6px;
 						height: 6px;
-						border-left: 6px dotted var(--l1-border);
+						border-left: 6px dotted #1d212d;
 					}

 					/* Horizontal line pointing from vertical to the item */
@@ -246,8 +246,8 @@
 						height: 1px;
 						background: repeating-linear-gradient(
 							to right,
-							var(--l1-border),
-							var(--l1-border) 4px,
+							#1d212d,
+							#1d212d 4px,
 							transparent 4px,
 							transparent 8px
 						);
@@ -274,8 +274,8 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(--l3-background);
-						color: var(--l2-foreground);
+						background: var(--bg-ink-300);
+						color: var(--bg-vanilla-400);
 						font-size: 12px;
 						font-weight: 300;
 					}
@@ -315,8 +315,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						#1d212d,
+						#1d212d 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -344,14 +344,10 @@
 		.options {
 			.query-name {
 				border-radius: 0px 2px 2px 0px !important;
-				border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent) !important;
-				background: color-mix(
-					in srgb,
-					var(--bg-sakura-500) 10%,
-					transparent
-				) !important;
+				border: 1px solid rgba(242, 71, 105, 0.2) !important;
+				background: rgba(242, 71, 105, 0.1) !important;

-				color: var(--bg-sakura-400) !important;
+				color: var(--Sakura-400, #f56c87) !important;
 				font-family: 'Space Mono';
 				font-size: 14px;
 				font-style: normal;
@@ -366,8 +362,8 @@

 			.formula-name {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-				background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+				border: 1px solid rgba(173, 127, 88, 0.2);
+				background: rgba(173, 127, 88, 0.1);

 				font-family: 'Space Mono';
 				font-size: 14px;
@@ -387,8 +383,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						#1d212d,
+						#1d212d 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -404,13 +400,9 @@
 				min-width: 120px;

 				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-background);
+				border: 1px solid var(--Slate-400, #1d212d);
+				background: var(--Ink-300, #16181d);
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-
-				.ant-select-selection-item {
-					color: var(--l1-foreground);
-				}
 			}
 		}
 	}
@@ -449,18 +441,14 @@

 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border) !important;
-			background: var(--l1-background) !important;
+			border: 1px solid var(--Slate-400, #1d212d) !important;
+			background: var(--Ink-300, #16181d) !important;
 			height: 34px !important;
 			box-sizing: border-box !important;
-
-			.ant-select-selection-item {
-				color: var(--l1-foreground);
-			}
 		}

 		.ant-select-arrow {
-			color: var(--l2-foreground) !important;
+			color: var(--bg-vanilla-400) !important;
 		}
 	}

@@ -468,3 +456,133 @@
 		cursor: pointer;
 	}
 }
+
+.lightMode {
+	.query-builder-v2 {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+		border-top: 1px solid var(--bg-vanilla-300);
+
+		.qb-content-section {
+			.qb-elements-container {
+				&::after {
+					background: repeating-linear-gradient(
+						to bottom,
+						var(--bg-vanilla-300),
+						var(--bg-vanilla-300) 4px,
+						transparent 4px,
+						transparent 8px
+					);
+				}
+
+				.code-mirror-where-clause,
+				.query-aggregation-container,
+				.query-add-ons,
+				.metrics-aggregation-section-content,
+				.metrics-container {
+					&::before {
+						border-left: 6px dotted var(--bg-vanilla-300);
+					}
+
+					/* Horizontal line pointing from vertical to the item */
+					&::after {
+						background: repeating-linear-gradient(
+							to right,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+					}
+				}
+			}
+		}
+
+		.query-names-section {
+			border-left: 1px solid var(--bg-vanilla-300);
+		}
+
+		.qb-formulas-container {
+			.qb-formula {
+				.formula-container {
+					.ant-col {
+						&::before {
+							border-left: 6px dotted var(--bg-vanilla-300);
+						}
+
+						/* Horizontal line pointing from vertical to the item */
+						&::after {
+							background: repeating-linear-gradient(
+								to right,
+								var(--bg-vanilla-300),
+								var(--bg-vanilla-300) 4px,
+								transparent 4px,
+								transparent 8px
+							);
+						}
+					}
+				}
+			}
+		}
+
+		.qb-footer {
+			.qb-footer-container {
+				.qb-add-new-query {
+					&::before {
+						background: repeating-linear-gradient(
+							to bottom,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+					}
+				}
+			}
+		}
+
+		.qb-entity-options {
+			.options {
+				.formula-name {
+					&::before {
+						background: repeating-linear-gradient(
+							to bottom,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+						left: 15px;
+					}
+				}
+			}
+
+			.query-data-source {
+				.ant-select-selector {
+					border: 1px solid var(--bg-vanilla-300) !important;
+					background: var(--bg-vanilla-100) !important;
+					box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+
+					.ant-select-selection-item {
+						color: var(--text-ink-400);
+					}
+				}
+			}
+		}
+
+		.qb-search-filter-container {
+			.ant-select-selector {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+
+				.ant-select-selection-item {
+					color: var(--text-ink-400);
+				}
+			}
+
+			.ant-select-arrow {
+				color: var(--bg-vanilla-400) !important;
+			}
+		}
+	}
+}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss
@@ -39,7 +39,7 @@
 			align-items: center;
 			gap: 6px;

-			color: var(--l3-foreground);
+			color: var(--Slate-50, #62687c);
 			font-family: 'Geist Mono';
 			font-size: 12px;
 			font-style: normal;
@@ -65,7 +65,7 @@
 			gap: 10px;

 			.metrics-aggregation-section-content-item-label {
-				color: var(--l2-foreground);
+				color: var(--Vanilla-400, #c0c1c3);
 				font-family: 'Geist Mono';
 				font-size: 13px;
 				font-style: normal;
@@ -74,7 +74,7 @@
 				letter-spacing: -0.07px;

 				&.main-label {
-					color: var(--l3-foreground);
+					color: var(--Slate-50, #62687c);
 					font-family: 'Geist Mono';
 					font-size: 12px;
 					font-style: normal;
@@ -100,19 +100,15 @@

 				.ant-select-selector {
 					border-radius: 2px;
-					border: 1.005px solid var(--l1-border);
-					background: var(--l1-background);
-					color: var(--l1-foreground);
+					border: 1.005px solid var(--Slate-400, #1d212d);
+					background: var(--Ink-300, #16181d);
+					color: var(--bg-vanilla-400);
 					font-family: 'Geist Mono';
 					font-size: 13px;
 					font-style: normal;
 					font-weight: 400;
 					line-height: 20px;
 					letter-spacing: -0.07px;
-
-					.ant-select-selection-item {
-						color: var(--l1-foreground);
-					}
 				}

 				.input-with-label {
@@ -149,10 +145,10 @@

 .metrics-operators-select {
 	border-radius: 2px;
-	border: 1.005px solid var(--l1-border);
-	background: var(--l1-background);
+	border: 1.005px solid var(--Slate-400, #1d212d);
+	background: var(--Ink-300, #16181d);

-	color: var(--l1-foreground);
+	color: var(--Vanilla-400, #c0c1c3);
 	font-family: 'Geist Mono';
 	font-size: 13px;
 	font-style: normal;
@@ -160,3 +156,35 @@
 	line-height: 20px; /* 142.857% */
 	letter-spacing: -0.07px;
 }
+
+.lightMode {
+	.metrics-aggregate-section {
+		.metrics-aggregation-section-content {
+			.metrics-aggregation-section-content-item {
+				.metrics-aggregation-section-content-item-label {
+					color: var(--text-ink-200);
+
+					&.main-label {
+						color: var(--text-slate-100);
+					}
+				}
+
+				.metrics-aggregation-section-content-item-value {
+					.ant-select-selector {
+						border: 1px solid var(--bg-vanilla-300) !important;
+						background: var(--bg-vanilla-100) !important;
+
+						.ant-select-selection-item {
+							color: var(--text-ink-400);
+						}
+					}
+				}
+			}
+		}
+	}
+	.metrics-operators-select {
+		border: 1px solid var(--bg-vanilla-300) !important;
+		background: var(--bg-vanilla-100) !important;
+		color: var(--text-ink-100);
+	}
+}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss
@@ -10,7 +10,7 @@
 		font-size: 12px !important;
 		line-height: 27px;
 		&::placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--bg-vanilla-400) !important;
 			font-size: 12px !important;
 		}
 	}
@@ -22,9 +22,9 @@
 	.ant-select-selector {
 		width: 100%;
 		border-radius: 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l1-background);
-		color: var(--l1-foreground);
+		border: 1px solid #1d212d !important;
+		background: #16181d;
+		color: #fff;
 		font-family: 'Geist Mono';
 		font-size: 13px;
 		font-style: normal;
@@ -33,35 +33,65 @@
 		min-height: 36px;

 		.ant-select-selection-placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--bg-vanilla-400) !important;
 			font-size: 12px !important;
 		}
 	}

 	.ant-select-dropdown {
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
+		border: 1px solid var(--bg-slate-400);
+		background: linear-gradient(
+			139deg,
+			rgba(18, 19, 23, 0.8) 0%,
+			rgba(18, 19, 23, 0.9) 98.68%
+		);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);

 		.ant-select-item {
-			color: var(--l1-foreground);
+			color: #fff;
 			font-family: 'Geist Mono';
 			font-size: 13px;
 			font-style: normal;
 			font-weight: 400;
 			line-height: 20px; /* 142.857% */

-			&:hover,
-			&.ant-select-item-option-active {
-				background: var(--l3-background) !important;
-			}
-
-			&.ant-select-item-option-selected {
-				background: var(--l3-background) !important;
-				border: 1px solid var(--l1-border);
-				font-weight: 600;
+			&:hover {
+				background: rgba(171, 189, 255, 0.04) !important;
+			}
+		}
+	}
+}
+
+.lightMode {
+	.metrics-source-select-container {
+		.ant-select-selector {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100);
+			color: var(--text-ink-100);
+		}
+
+		.ant-select-dropdown {
+			background: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300) !important;
+			box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+				0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+			backdrop-filter: none;
+
+			.ant-select-item {
+				color: var(--text-ink-100);
+
+				&:hover,
+				&.ant-select-item-option-active {
+					background: var(--bg-vanilla-300) !important;
+				}
+
+				&.ant-select-item-option-selected {
+					background: var(--bg-vanilla-300) !important;
+					border: 1px solid var(--bg-slate-400);
+					font-weight: 600;
+				}
 			}
 		}
 	}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
@@ -20,34 +20,34 @@
 			font-style: normal;
 			font-weight: var(--font-weight-normal);

-			color: var(--l2-foreground);
+			color: var(--Vanilla-400, #c0c1c3);
 		}

 		.tab {
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-400);
 			border-left: none;
 			min-width: 120px;
 			height: 36px;
 			line-height: 36px;

 			&:first-child {
-				border-left: 1px solid var(--l1-border);
+				border-left: 1px solid var(--bg-slate-400);
 			}
 		}

 		.tab::before {
-			background: var(--l1-border);
+			background: var(--bg-slate-400);
 		}

 		.selected-view {
 			color: var(--text-robin-500);
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-400);

 			display: none;
 		}

 		.selected-view::before {
-			background: var(--l1-border);
+			background: var(--bg-slate-400);
 		}
 	}

@@ -56,8 +56,8 @@
 		height: 30px;

 		border-radius: 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
 }
@@ -89,7 +89,7 @@
 				position: relative !important;

 				&:focus-within {
-					border-color: var(--primary-background);
+					border-color: var(--bg-robin-500);
 				}

 				&.cm-focused {
@@ -98,20 +98,20 @@

 				.cm-content {
 					border-radius: 2px;
-					border: 1px solid var(--l1-border);
+					border: 1px solid var(--Slate-400, #1d212d);
 					border-top-right-radius: 0px;
 					border-bottom-right-radius: 0px;
 					padding: 0px !important;
-					background-color: var(--card) !important;
+					background-color: #121317 !important;

 					&:focus-within {
-						border-color: var(--l1-border);
+						border-color: var(--bg-ink-200);
 					}
 				}

 				.cm-tooltip-autocomplete {
-					background: var(--l3-background) !important;
-					color: var(--l1-background) !important;
+					background: var(--bg-ink-300) !important;
+					color: var(--bg-ink-500) !important;
 					border-radius: 2px !important;
 					font-size: 12px !important;
 					font-weight: 500 !important;
@@ -121,17 +121,17 @@
 					right: 0px !important;

 					border-radius: 4px;
-					border: 1px solid var(--l1-border);
+					border: 1px solid var(--bg-slate-200, #1d212d);
 					background: linear-gradient(
 						139deg,
-						color-mix(in srgb, var(--card) 80%, transparent) 0%,
-						color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+						rgba(18, 19, 23, 0.8) 0%,
+						rgba(18, 19, 23, 0.9) 98.68%
 					) !important;
 					backdrop-filter: blur(20px);
 					box-sizing: border-box;
 					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
 					font-family: 'Space Mono', monospace !important;
-					color: var(--l1-foreground) !important;
+					color: var(--bg-vanilla-100) !important;

 					ul {
 						width: 100% !important;
@@ -174,11 +174,7 @@

 							&[aria-selected='true'] {
 								// background-color: rgba(78, 116, 248, 0.7) !important;
-								background: color-mix(
-									in srgb,
-									var(--bg-robin-200) 4%,
-									transparent
-								) !important;
+								background: rgba(171, 189, 255, 0.04) !important;
 							}
 						}
 					}
@@ -211,25 +207,25 @@
 				.cm-line {
 					line-height: 36px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(--card) !important;
+					background-color: #121317 !important;

 					::-moz-selection {
-						background: var(--l3-background) !important;
+						background: var(--bg-ink-100) !important;
 						opacity: 0.5 !important;
 					}

 					::selection {
-						background: var(--l3-background) !important;
+						background: var(--bg-ink-100) !important;
 						opacity: 0.5 !important;
 					}

 					.cm-function {
-						color: var(--primary-background) !important;
+						color: var(--bg-robin-500) !important;
 					}

 					.chip-decorator {
-						background: var(--l3-background) !important;
-						color: var(--l1-foreground) !important;
+						background: rgba(36, 40, 52, 1) !important;
+						color: var(--bg-vanilla-100) !important;
 						border-radius: 4px;
 						padding: 2px 4px;
 						margin-right: 4px;
@@ -237,7 +233,7 @@
 				}

 				.cm-selectionBackground {
-					background: var(--l3-background) !important;
+					background: var(--bg-ink-100) !important;
 					opacity: 0.5 !important;
 				}

@@ -249,8 +245,8 @@

 		.close-btn {
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
 			height: 38px;
 			width: 38px;

@@ -289,35 +285,35 @@
 	.add-ons-list {
 		.add-ons-tabs {
 			.add-on-tab-title {
-				color: var(--l1-foreground) !important;
+				color: var(--bg-ink-500) !important;
 			}

 			.tab {
-				border: 1px solid var(--l1-border) !important;
-				background: var(--l1-background) !important;
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;

 				&:first-child {
-					border-left: 1px solid var(--l1-border) !important;
+					border-left: 1px solid var(--bg-vanilla-300) !important;
 				}
 			}

 			.tab::before {
-				background: var(--l3-background) !important;
+				background: var(--bg-vanilla-300) !important;
 			}

 			.selected-view {
-				color: var(--primary-background) !important;
-				border: 1px solid var(--l1-border) !important;
+				color: var(--bg-robin-500) !important;
+				border: 1px solid var(--bg-vanilla-300) !important;
 			}

 			.selected-view::before {
-				background: var(--l3-background) !important;
+				background: var(--bg-vanilla-300) !important;
 			}
 		}

 		.compass-button {
-			border: 1px solid var(--l1-border) !important;
-			background: var(--l1-background) !important;
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
 		}
 	}

@@ -326,33 +322,33 @@
 			.having-filter-select-editor {
 				.cm-editor {
 					&:focus-within {
-						border-color: var(--l1-border) !important;
+						border-color: var(--bg-vanilla-300) !important;
 					}

 					.cm-content {
-						border: 1px solid var(--l1-border) !important;
-						background: var(--l1-background) !important;
+						border: 1px solid var(--bg-vanilla-300) !important;
+						background: var(--bg-vanilla-100) !important;

 						&:focus-within {
-							border-color: var(--l1-border) !important;
+							border-color: var(--bg-vanilla-300) !important;
 						}
 					}

 					.cm-tooltip-autocomplete {
-						background: var(--l1-background) !important;
-						border: 1px solid var(--l1-border) !important;
-						color: var(--l1-foreground) !important;
+						background: var(--bg-vanilla-100) !important;
+						border: 1px solid var(--bg-vanilla-300) !important;
+						color: var(--bg-ink-500) !important;
 						box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;

 						ul {
 							li {
-								color: var(--l1-foreground) !important;
+								color: var(--bg-ink-300) !important;
 								&:hover {
-									background: var(--l3-background) !important;
+									background: var(--bg-vanilla-300) !important;
 								}

 								&[aria-selected='true'] {
-									background: var(--l3-background) !important;
+									background: var(--bg-vanilla-300) !important;
 									font-weight: 600 !important;
 								}
 							}
@@ -360,31 +356,31 @@
 					}

 					.cm-line {
-						background-color: var(--l1-background) !important;
+						background-color: var(--bg-vanilla-100) !important;

 						::-moz-selection {
-							background: var(--l1-background) !important;
+							background: var(--bg-vanilla-100) !important;
 						}

 						::selection {
-							background: var(--l3-background) !important;
+							background: var(--bg-ink-100) !important;
 						}

 						.chip-decorator {
-							background: var(--l3-background) !important;
-							color: var(--l1-foreground) !important;
+							background: var(--bg-vanilla-300) !important;
+							color: var(--bg-ink-400) !important;
 						}
 					}

 					.cm-selectionBackground {
-						background: var(--l1-background) !important;
+						background: var(--bg-vanilla-100) !important;
 					}
 				}
 			}

 			.close-btn {
-				border: 1px solid var(--l1-border) !important;
-				background: var(--l1-background) !important;
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
 			}
 		}
 	}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss
@@ -21,7 +21,7 @@
 				flex: 1;
 				min-width: 0;
 				font-size: 12px;
-				color: var(--l2-foreground) !important;
+				color: var(--bg-vanilla-400) !important;

 				&.error {
 					.cm-editor {
@@ -44,24 +44,24 @@
 					}

 					&:focus-within {
-						border-color: var(--primary-background);
+						border-color: var(--bg-robin-500);
 					}

 					.cm-content {
 						border-radius: 2px;
-						border: 1px solid var(--l1-border);
+						border: 1px solid var(--Slate-400, #1d212d);
 						border-top-right-radius: 0px;
 						border-bottom-right-radius: 0px;
 						padding: 0px !important;
-						background-color: var(--l1-background) !important;
+						background-color: #121317 !important;

 						&:focus-within {
-							border-color: var(--l1-border);
+							border-color: var(--bg-ink-200);
 						}
 					}

 					.cm-tooltip-autocomplete {
-						background: var(--l3-background) !important;
+						background: var(--bg-ink-300) !important;
 						border-radius: 2px !important;
 						font-size: 12px !important;
 						font-weight: 500 !important;
@@ -72,11 +72,11 @@
 						right: 0px !important;

 						border-radius: 4px;
-						border: 1px solid var(--l1-border);
+						border: 1px solid var(--bg-slate-200, #1d212d);
 						background: linear-gradient(
 							139deg,
-							color-mix(in srgb, var(--card) 80%, transparent) 0%,
-							color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+							rgba(18, 19, 23, 0.8) 0%,
+							rgba(18, 19, 23, 0.9) 98.68%
 						) !important;
 						backdrop-filter: blur(20px);
 						box-sizing: border-box;
@@ -116,18 +116,15 @@
 								box-sizing: border-box;
 								overflow: hidden;

-								color: var(--l2-foreground) !important;
 								font-family: 'Space Mono', monospace !important;

 								.cm-completionIcon {
 									display: none !important;
 								}

-								&:hover,
 								&[aria-selected='true'] {
-									background: var(--l3-background) !important;
-									color: var(--l1-foreground) !important;
-									font-weight: 600 !important;
+									// background-color: rgba(78, 116, 248, 0.7) !important;
+									background: rgba(171, 189, 255, 0.04) !important;
 								}
 							}
 						}
@@ -140,25 +137,25 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(--l1-background) !important;
+						background-color: #121317 !important;

 						::-moz-selection {
-							background: var(--l3-background) !important;
+							background: var(--bg-ink-100) !important;
 							opacity: 0.5 !important;
 						}

 						::selection {
-							background: var(--l3-background) !important;
+							background: var(--bg-ink-100) !important;
 							opacity: 0.5 !important;
 						}

 						.cm-function {
-							color: var(--primary-background) !important;
+							color: var(--bg-robin-500) !important;
 						}

 						.chip-decorator {
-							background: var(--l3-background) !important;
-							color: var(--l1-foreground) !important;
+							background: rgba(36, 40, 52, 1) !important;
+							color: var(--bg-vanilla-100) !important;
 							border-radius: 4px;
 							padding: 2px 4px;
 							margin-right: 4px;
@@ -166,7 +163,7 @@
 					}

 					.cm-selectionBackground {
-						background: var(--l3-background) !important;
+						background: var(--bg-ink-100) !important;
 						opacity: 0.5 !important;
 					}
 				}
@@ -198,8 +195,8 @@
 			}
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-background);
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
 				height: 38px;
 				width: 38px;

@@ -214,13 +211,13 @@
 			height: 36px;
 			line-height: 36px;
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-400);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);

 			font-family: 'Space Mono', monospace !important;

 			&::placeholder {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 				opacity: 0.5;
 			}
 		}
@@ -237,7 +234,7 @@
 					input {
 						max-width: 120px;
 						&::placeholder {
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-400);
 						}
 					}
 				}
@@ -249,48 +246,88 @@
 .lightMode {
 	.query-aggregation-container {
 		.aggregation-container {
+			.query-aggregation-options-input {
+				border-color: var(--bg-vanilla-300) !important;
+
+				&::placeholder {
+					color: var(--bg-ink-400) !important;
+					opacity: 0.5 !important;
+				}
+			}
+
 			.query-aggregation-select-container {
 				.query-aggregation-select-editor {
 					.cm-editor {
+						.cm-content {
+							border: 1px solid var(--bg-vanilla-300) !important;
+							background: var(--bg-vanilla-100) !important;
+							box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+
+							&:focus-within {
+								border-color: var(--bg-vanilla-300) !important;
+							}
+						}
+
 						.cm-tooltip-autocomplete {
-							background: var(--l1-background) !important;
-							border: 1px solid var(--l1-border) !important;
+							background: var(--bg-vanilla-100) !important;
+							border: 1px solid var(--bg-vanilla-300) !important;
+							color: var(--bg-ink-500) !important;
 							box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
-							backdrop-filter: none;

 							ul {
 								li {
+									color: var(--bg-ink-300) !important;
+
 									&:hover,
 									&[aria-selected='true'] {
-										background: var(--l3-background) !important;
+										background: var(--bg-vanilla-300) !important;
+										color: var(--bg-ink-500) !important;
+										font-weight: 600 !important;
 									}
 								}
 							}
 						}

 						.cm-line {
+							background-color: var(--bg-vanilla-100) !important;
+
 							::-moz-selection {
-								background: var(--l1-background) !important;
+								background: var(--bg-vanilla-100) !important;
 								opacity: 0.5 !important;
 							}

 							::selection {
-								background: var(--l1-background) !important;
+								background: var(--bg-vanilla-100) !important;
 								opacity: 0.5 !important;
 							}

 							.cm-function {
-								color: var(--primary-background) !important;
+								color: var(--bg-robin-500) !important;
+							}
+
+							.chip-decorator {
+								background: var(--bg-vanilla-300) !important;
+								color: var(--bg-ink-400) !important;
 							}
 						}
+
+						// .cm-selectionBackground {
+						// 	background: var(--bg-vanilla-100) !important;
+						// 	opacity: 0.5 !important;
+						// }
 					}
 				}
+
+				.close-btn {
+					border-color: var(--bg-vanilla-300) !important;
+					background: var(--bg-vanilla-100) !important;
+				}
 			}
 		}
 	}
 	.query-aggregation-error-popover {
 		.ant-popover-inner {
-			background-color: var(--l1-background);
+			background-color: var(--bg-vanilla-100);
 			border: none;
 			box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 		}
@@ -299,8 +336,8 @@

 .query-aggregation-error-popover {
 	.ant-popover-inner {
-		background-color: var(--l1-border);
-		border: 1px solid var(--l1-border);
+		background-color: var(--bg-slate-500);
+		border: 1px solid var(--bg-slate-400);
 		border-radius: 4px;
 		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 	}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.styles.scss
@@ -1,7 +1,7 @@
 .add-trace-operator-button,
 .add-new-query-button,
 .add-formula-button {
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border: 1px solid var(--bg-slate-400);
+	background: var(--bg-ink-300);
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 }
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss
@@ -19,11 +19,11 @@
 		.query-status-container {
 			width: 32px;

-			background-color: var(--l1-background) !important;
+			background-color: #121317 !important;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-200);
 			border-radius: 2px;
 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;
@@ -53,26 +53,26 @@
 		background-color: transparent !important;

 		&:focus-within {
-			border-color: var(--primary-background);
+			border-color: var(--bg-robin-500);
 		}

 		.cm-content {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--Slate-400, #1d212d);
 			padding: 0px !important;
-			background-color: var(--l1-background) !important;
+			background-color: #121317 !important;

 			&:focus-within {
-				border-color: var(--l1-border);
+				border-color: var(--bg-ink-200);
 			}
 		}

 		&.cm-focused {
-			outline: 1px solid var(--l1-border);
+			outline: 1px solid var(--bg-slate-200);
 		}

 		.cm-tooltip-autocomplete {
-			background: var(--l3-background) !important;
+			background: var(--bg-ink-300) !important;
 			border-radius: 2px !important;
 			font-size: 12px !important;
 			font-weight: 500 !important;
@@ -86,13 +86,13 @@
 			border: 0px;
 			background: linear-gradient(
 				139deg,
-				color-mix(in srgb, var(--card) 80%, transparent) 0%,
-				color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+				rgba(18, 19, 23, 0.8) 0%,
+				rgba(18, 19, 23, 0.9) 98.68%
 			) !important;
 			backdrop-filter: blur(20px);
 			box-sizing: border-box;
 			font-family: 'Space Mono', monospace !important;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-200);
 			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);

 			ul {
@@ -130,11 +130,8 @@

 					font-family: 'Space Mono', monospace !important;

-					background-color: var(--l1-background) !important;
-					color: var(--l2-foreground) !important;
-
 					&:hover {
-						background: var(--l3-background) !important;
+						background: var(--bg-ink-100) !important;
 					}

 					.cm-completionIcon {
@@ -142,8 +139,8 @@
 					}

 					&[aria-selected='true'] {
-						background: var(--l3-background) !important;
-						font-weight: 600 !important;
+						// background-color: rgba(78, 116, 248, 0.7) !important;
+						background: rgba(171, 189, 255, 0.04) !important;
 					}
 				}
 			}
@@ -156,30 +153,30 @@
 		.cm-line {
 			line-height: 34px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(--l1-background) !important;
+			background-color: #121317 !important;

 			::-moz-selection {
-				background: var(--l3-background) !important;
+				background: var(--bg-ink-100) !important;
 				opacity: 0.5 !important;
 			}

 			::selection {
-				background: var(--l3-background) !important;
+				background: var(--bg-ink-100) !important;
 				opacity: 0.5 !important;
 			}
 		}

 		.cm-selectionBackground {
-			background: var(--l3-background) !important;
+			background: var(--bg-ink-100) !important;
 			opacity: 0.5 !important;
 		}
 	}

 	.cursor-position {
 		font-size: 12px;
-		color: var(--l2-foreground);
+		color: var(--bg-ink-200);
 		padding: 6px;
-		background-color: var(--l1-background);
+		background-color: var(--bg-vanilla-200);
 		border-radius: 4px;
 		display: inline-flex;
 		align-items: center;
@@ -205,13 +202,13 @@
 		}

 		.valid {
-			background-color: color-mix(in srgb, var(--bg-forest-400) 10%, transparent);
-			color: var(--bg-forest-600);
+			background-color: rgba(39, 174, 96, 0.1);
+			color: #27ae60;
 		}

 		.invalid {
-			background-color: color-mix(in srgb, var(--bg-cherry-400) 10%, transparent);
-			color: var(--bg-cherry-500);
+			background-color: rgba(235, 87, 87, 0.1);
+			color: #eb5757;
 		}

 		.query-validation-status {
@@ -240,13 +237,13 @@

 	.query-context {
 		padding: 12px;
-		background-color: var(--l1-background);
+		background-color: var(--bg-ink-400);
 		border-radius: 4px;
-		border-left: 3px solid var(--l1-border);
-		color: var(--l2-foreground) !important;
+		border-left: 3px solid var(--bg-robin-500);
+		color: var(--bg-ink-300) !important;

 		.ant-card-head {
-			color: var(--l2-foreground) !important;
+			color: var(--bg-vanilla-300) !important;
 		}

 		.context-details {
@@ -259,7 +256,7 @@
 				font-size: 13px;

 				strong {
-					color: var(--l2-foreground);
+					color: var(--bg-vanilla-300);
 					margin-right: 4px;
 				}
 			}
@@ -274,8 +271,8 @@

 	.query-text-preview-title {
 		font-size: 13px;
-		color: var(--primary-foreground);
-		background-color: var(--primary-background);
+		color: var(--bg-vanilla-100);
+		background-color: var(--bg-robin-500);
 		padding: 2px 6px;
 		border-radius: 2px;
 		margin-right: 4px;
@@ -284,14 +281,14 @@
 	.query-text-preview {
 		font-family: 'Space Mono', monospace;
 		font-size: 13px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-200);
 		padding: 2px 6px;
 		font-style: italic;
 	}

 	.query-examples-card {
-		background-color: var(--l1-background);
-		border: 1px solid var(--l1-border);
+		background-color: var(--bg-ink-400);
+		border: 1px solid var(--bg-slate-200);

 		.ant-card-body {
 			padding: 0;
@@ -300,7 +297,7 @@
 		.query-examples {
 			.ant-collapse-header {
 				padding: 8px 16px !important;
-				color: var(--l2-foreground) !important;
+				color: var(--bg-vanilla-300) !important;
 				font-weight: 500;
 			}

@@ -320,20 +317,20 @@
 				flex-direction: column;
 				gap: 4px;
 				padding: 8px 12px;
-				background-color: var(--l1-background);
-				border: 1px solid var(--l1-border);
+				background-color: var(--bg-ink-400);
+				border: 1px solid var(--bg-slate-200);
 				border-radius: 4px;
 				cursor: pointer;
 				transition: all 0.2s ease;
 				outline: none;

 				&:hover {
-					background-color: var(--l3-background);
-					border-color: var(--primary-background);
+					background-color: var(--bg-ink-300);
+					border-color: var(--bg-robin-500);
 				}

 				&:focus-visible {
-					outline: 2px solid var(--primary-background);
+					outline: 2px solid var(--bg-robin-500);
 					outline-offset: 2px;
 				}

@@ -345,22 +342,22 @@

 				.query-example-label {
 					font-weight: 500;
-					color: var(--l2-foreground);
+					color: var(--bg-vanilla-300);
 					font-size: 13px;
 				}

 				.query-example-query {
 					font-family: 'Space Mono', monospace;
 					font-size: 12px;
-					color: var(--l2-foreground);
-					background-color: var(--l3-background);
+					color: var(--bg-vanilla-200);
+					background-color: var(--bg-ink-300);
 					padding: 2px 6px;
 					border-radius: 2px;
 				}

 				.query-example-description {
 					font-size: 12px;
-					color: var(--l2-foreground);
+					color: var(--bg-vanilla-200);
 					opacity: 0.8;
 				}
 			}
@@ -407,37 +404,33 @@

 		// Color variations based on context
 		&.context-indicator-key {
-			border-left-color: var(--primary-background);
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 10%,
-				transparent
-			);
+			border-left-color: #1890ff; // blue
+			background-color: rgba(24, 144, 255, 0.1);
 		}

 		&.context-indicator-operator {
-			border-left-color: var(--bg-robin-600); // purple
-			background-color: color-mix(in srgb, var(--bg-robin-600) 10%, transparent);
+			border-left-color: #722ed1; // purple
+			background-color: rgba(114, 46, 209, 0.1);
 		}

 		&.context-indicator-value {
-			border-left-color: var(--bg-forest-500); // green
-			background-color: color-mix(in srgb, var(--bg-forest-400) 10%, transparent);
+			border-left-color: #52c41a; // green
+			background-color: rgba(82, 196, 26, 0.1);
 		}

 		&.context-indicator-conjunction {
-			border-left-color: var(--bg-amber-500); // orange
-			background-color: color-mix(in srgb, var(--bg-amber-400) 10%, transparent);
+			border-left-color: #fa8c16; // orange
+			background-color: rgba(250, 140, 22, 0.1);
 		}

 		&.context-indicator-function {
-			border-left-color: var(--bg-aqua-500); // cyan
-			background-color: color-mix(in srgb, var(--bg-aqua-500) 10%, transparent);
+			border-left-color: #13c2c2; // cyan
+			background-color: rgba(19, 194, 194, 0.1);
 		}

 		&.context-indicator-parenthesis {
-			border-left-color: var(--bg-sakura-500); // magenta
-			background-color: color-mix(in srgb, var(--bg-sakura-500) 10%, transparent);
+			border-left-color: #eb2f96; // magenta
+			background-color: rgba(235, 47, 150, 0.1);
 		}
 	}
 }
@@ -448,36 +441,279 @@
 	}

 	.ant-popover-content {
-		background: var(--l1-background);
-		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		background: linear-gradient(
+			139deg,
+			rgba(18, 19, 23, 0.8) 0%,
+			rgba(18, 19, 23, 0.9) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);

 		margin-top: -6px !important;
 	}
 }

+// /* Dark mode support */
+// :global(.darkMode) {
+// 	.code-mirror-where-clause {
+// 		.cm-editor {
+// 			border-color: var(--bg-slate-500);
+// 			background-color: var(--bg-ink-400);
+// 		}
+
+// 		.cursor-position {
+// 			background-color: var(--bg-ink-400);
+// 			color: var(--bg-vanilla-100);
+// 		}
+
+// 		.query-context {
+// 			background-color: var(--bg-ink-400);
+// 			color: var(--bg-vanilla-100);
+
+// 			h3 {
+// 				color: var(--bg-vanilla-100);
+// 			}
+
+// 			.context-details {
+// 				p {
+// 					strong {
+// 						color: var(--bg-vanilla-200);
+// 					}
+// 				}
+// 			}
+// 		}
+
+// 		.query-examples-card {
+// 			background-color: var(--bg-ink-400);
+// 			border-color: var(--bg-slate-500);
+
+// 			.ant-collapse-header {
+// 				color: var(--bg-vanilla-100) !important;
+// 			}
+
+// 			.query-example-tag {
+// 				background-color: var(--bg-ink-400);
+// 				border-color: var(--bg-slate-500);
+
+// 				&:hover {
+// 					background-color: var(--bg-ink-300);
+// 					border-color: var(--bg-robin-500);
+// 				}
+
+// 				.query-example-label {
+// 					color: var(--bg-vanilla-100);
+// 				}
+
+// 				.query-example-query {
+// 					color: var(--bg-vanilla-100);
+// 					background-color: var(--bg-ink-300);
+// 				}
+
+// 				.query-example-description {
+// 					color: var(--bg-vanilla-100);
+// 				}
+// 			}
+// 		}
+
+// 		.context-indicator {
+// 			background-color: var(--bg-ink-300);
+// 			color: var(--bg-vanilla-100);
+
+// 			.query-pair-info {
+// 				border-left: 1px solid rgba(255, 255, 255, 0.1);
+// 				background-color: rgba(255, 255, 255, 0.05);
+// 			}
+// 		}
+// 	}
+// }
+
 .lightMode {
 	.code-mirror-where-clause {
+		.query-where-clause-editor-container {
+			.query-status-container {
+				background-color: var(--bg-vanilla-100) !important;
+				border: 1px solid var(--bg-vanilla-300);
+
+				&.hasErrors {
+					border-color: var(--bg-cherry-500);
+				}
+			}
+		}
+
+		.query-where-clause-editor {
+			&.hasErrors {
+				.cm-editor {
+					.cm-content {
+						border-color: var(--bg-cherry-500);
+						border-top-right-radius: 0px !important;
+						border-bottom-right-radius: 0px !important;
+					}
+				}
+			}
+		}
+
 		.cm-editor {
+			&:focus-within {
+				border-color: var(--bg-robin-500);
+			}
+
+			&.cm-focused {
+				outline: 1px solid var(--bg-vanilla-300);
+			}
+
+			.cm-content {
+				border-radius: 2px;
+				border: 1px solid var(--bg-vanilla-300);
+				padding: 0px !important;
+				background-color: var(--bg-vanilla-100) !important;
+
+				&:focus-within {
+					border-color: var(--bg-vanilla-200);
+				}
+			}
+
 			.cm-tooltip-autocomplete {
-				background: var(--l1-background) !important;
-				border: 1px solid var(--l1-border);
+				background: var(--bg-vanilla-100) !important;
+				border: 1px solid var(--bg-vanilla-300);
 				backdrop-filter: blur(20px);
 				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+
+				ul {
+					li {
+						background-color: var(--bg-vanilla-100) !important;
+						color: var(--bg-ink-300) !important;
+
+						&:hover,
+						&[aria-selected='true'] {
+							background-color: var(--bg-vanilla-300) !important;
+							font-weight: 600 !important;
+						}
+					}
+				}
 			}

 			.cm-line {
+				background-color: var(--bg-vanilla-100) !important;
+
 				::-moz-selection {
-					background: var(--bg-robin-200) !important;
+					background: #b3d4fc !important;
 				}

 				::selection {
-					background: var(--bg-robin-200) !important;
+					background: #b3d4fc !important;
 				}
 			}

 			.cm-selectionBackground {
-				background: var(--bg-robin-200) !important;
+				background: #b3d4fc !important;
+			}
+		}
+
+		.cursor-position {
+			color: var(--bg-vanilla-200);
+			background-color: var(--bg-vanilla-100);
+		}
+
+		.query-context {
+			background-color: var(--bg-vanilla-100);
+			border-left: 3px solid var(--bg-vanilla-300);
+			color: var(--bg-vanilla-300) !important;
+
+			.ant-card-head {
+				color: var(--bg-ink-300) !important;
+			}
+
+			.context-details {
+				p {
+					strong {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+
+		.query-examples-card {
+			background-color: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300);
+
+			.query-examples {
+				.ant-collapse-header {
+					color: var(--bg-ink-300) !important;
+				}
+
+				.query-example-tag {
+					background-color: var(--bg-vanilla-100);
+					border: 1px solid var(--bg-vanilla-300);
+
+					&:hover {
+						background-color: var(--bg-vanilla-200);
+						border-color: var(--bg-vanilla-300);
+					}
+
+					.query-example-label {
+						color: var(--bg-ink-300);
+					}
+
+					.query-example-query {
+						color: var(--bg-ink-300);
+						background-color: var(--bg-vanilla-100);
+					}
+
+					.query-example-description {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+
+		.context-indicator {
+			background-color: var(--bg-vanilla-100);
+			border-left: 4px solid var(--bg-vanilla-300);
+
+			display: none;
+
+			.query-pair-info {
+				border-left: 1px solid rgba(255, 255, 255, 0.1);
+				background-color: rgba(255, 255, 255, 0.03);
+			}
+
+			// Color variations based on context
+			&.context-indicator-key {
+				border-left-color: #1890ff; // blue
+				background-color: rgba(24, 144, 255, 0.1);
+			}
+
+			&.context-indicator-operator {
+				border-left-color: #722ed1; // purple
+				background-color: rgba(114, 46, 209, 0.1);
+			}
+
+			&.context-indicator-value {
+				border-left-color: #52c41a; // green
+				background-color: rgba(82, 196, 26, 0.1);
+			}
+
+			&.context-indicator-conjunction {
+				border-left-color: #fa8c16; // orange
+				background-color: rgba(250, 140, 22, 0.1);
+			}
+
+			&.context-indicator-function {
+				border-left-color: #13c2c2; // cyan
+				background-color: rgba(19, 194, 194, 0.1);
+			}
+
+			&.context-indicator-parenthesis {
+				border-left-color: #eb2f96; // magenta
+				background-color: rgba(235, 47, 150, 0.1);
 			}
 		}
 	}
+
+	.query-status-popover {
+		.ant-popover-content {
+			background: var(--bg-vanilla-100);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		}
+	}
 }
--- a/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss
@@ -16,8 +16,8 @@
 			width: 1px;
 			background: repeating-linear-gradient(
 				to bottom,
-				var(--l1-border),
-				var(--l1-border) 4px,
+				var(--bg-slate-400),
+				var(--bg-slate-400) 4px,
 				transparent 4px,
 				transparent 8px
 			);
@@ -36,8 +36,8 @@
 			width: 20px;
 			background: repeating-linear-gradient(
 				to right,
-				var(--l1-border),
-				var(--l1-border) 4px,
+				var(--bg-slate-400),
+				var(--bg-slate-400) 4px,
 				transparent 4px,
 				transparent 8px
 			);
@@ -52,7 +52,7 @@
 			height: 4px;
 			width: 4px;
 			border-radius: 50%;
-			background-color: var(--l1-border);
+			background-color: var(--bg-slate-400);
 		}
 	}

@@ -87,8 +87,8 @@
 		flex-direction: row;

 		border-radius: 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);

 		.qb-trace-operator-editor-container {
 			flex: 1;
@@ -105,17 +105,17 @@
 				top: 50%;
 				height: 1px;
 				width: 16px;
-				background-color: var(--l1-border);
+				background-color: var(--bg-slate-400);
 			}
 		}

 		.label {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			padding: 0px 8px;
-			border-right: 1px solid var(--l1-border);
+			border-right: 1px solid var(--bg-slate-400);
 			font-size: 12px;
 			font-weight: 300;
 		}
@@ -128,22 +128,22 @@
 			&::before {
 				background: repeating-linear-gradient(
 					to right,
-					var(--l3-background),
-					var(--l3-background) 4px,
+					var(--bg-vanilla-300),
+					var(--bg-vanilla-300) 4px,
 					transparent 4px,
 					transparent 8px
 				);
 			}
 			&::after {
-				background-color: var(--l3-background);
+				background-color: var(--bg-vanilla-300);
 			}
 		}
 		&.non-list-view {
 			&::before {
 				background: repeating-linear-gradient(
 					to bottom,
-					var(--l3-background),
-					var(--l3-background) 4px,
+					var(--bg-vanilla-300),
+					var(--bg-vanilla-300) 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -151,13 +151,13 @@
 		}

 		&-label-with-input {
-			border: 1px solid var(--l1-border) !important;
-			background: var(--l1-background) !important;
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;

 			.label {
-				color: var(--l1-foreground) !important;
-				border-right: 1px solid var(--l1-border) !important;
-				background: var(--l1-background) !important;
+				color: var(--bg-ink-500) !important;
+				border-right: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
 			}
 		}
 	}
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
@@ -3,7 +3,7 @@
 	flex-direction: column;
 	padding: 12px;
 	gap: 12px;
-	border-bottom: 1px solid var(--l1-border);
+	border-bottom: 1px solid var(--bg-slate-400);
 	.filter-header-checkbox {
 		display: flex;
 		align-items: center;
@@ -16,7 +16,7 @@
 			gap: 6px;

 			.title {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-family: Inter;
 				font-size: 14px;
 				font-style: normal;
@@ -34,7 +34,7 @@

 			.clear-all {
 				font-size: 12px;
-				color: var(--accent-primary);
+				color: var(--bg-robin-500);
 				cursor: pointer;
 			}
 		}
@@ -47,7 +47,7 @@

 		.filter-separator {
 			height: 1px;
-			background-color: var(--l1-border);
+			background-color: var(--bg-slate-400);
 			margin: 4px 0;
 		}

@@ -71,17 +71,17 @@
 					cursor: not-allowed;

 					.value-string {
-						color: var(--l3-foreground);
+						color: var(--bg-slate-200);
 					}

 					.only-btn {
 						cursor: not-allowed;
-						color: var(--l3-foreground);
+						color: var(--bg-slate-200);
 					}

 					.toggle-btn {
 						cursor: not-allowed;
-						color: var(--l3-foreground);
+						color: var(--bg-slate-200);
 					}
 				}

@@ -134,7 +134,7 @@
 		justify-content: center;

 		.show-more-text {
-			color: var(--accent-primary);
+			color: var(--bg-robin-500);
 			cursor: pointer;
 		}
 	}
@@ -149,7 +149,7 @@
 			margin-top: 4px;

 			&-message {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-size: 14px;
 				line-height: 20px; /* 142.857% */
 				letter-spacing: -0.07px;
@@ -173,6 +173,25 @@
 	}
 }

+.lightMode {
+	.checkbox-filter {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+		.filter-header-checkbox {
+			.left-action {
+				.title {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+
+		.values {
+			.filter-separator {
+				background-color: var(--bg-vanilla-300);
+			}
+		}
+	}
+}
+
 .label-false {
 	width: 2px;
 	height: 11px;
--- a/frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.styles.scss
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.styles.scss
@@ -1,6 +1,6 @@
 .collapseContainer {
-	background-color: var(--l1-background);
-	border-bottom: 1px solid var(--l1-border);
+	background-color: var(--bg-ink-500);
+	border-bottom: 1px solid var(--bg-slate-400);

 	.ant-collapse-header {
 		padding: 12px !important;
@@ -12,7 +12,7 @@
 	}

 	.ant-collapse-header-text {
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-family: Inter;
 		font-size: 14px;
 		font-style: normal;
@@ -28,7 +28,7 @@

 		.min-max-input {
 			.ant-input-group-addon {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-family: 'Space Mono', monospace;
 				font-size: 12px;
 				font-style: normal;
@@ -41,7 +41,7 @@
 			.ant-input {
 				padding: 4px 6px;

-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-family: 'Space Mono', monospace;
 				font-size: 12px;
 				font-style: normal;
@@ -54,9 +54,9 @@
 }

 .divider {
-	background-color: var(--l1-border);
+	background-color: var(--bg-slate-400);
 	margin: 0;
-	border-color: var(--l1-border);
+	border-color: var(--bg-slate-400);
 }

 .filter-header {
@@ -66,7 +66,7 @@
 		gap: 6px;

 		.ant-typography {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 			font-family: Inter;
 			font-size: 14px;
 			font-style: normal;
@@ -77,14 +77,14 @@
 	}

 	.sync-icon {
-		background-color: var(--l1-background);
+		background-color: var(--bg-ink-500);
 		border: 0;
 		box-shadow: none;
 		padding: 8px;
 	}

 	.arrow-icon {
-		background-color: var(--l1-background);
+		background-color: var(--bg-ink-500);
 		border: 0;
 		box-shadow: none;
 		padding-top: 8px;
@@ -112,7 +112,7 @@
 }

 .section-card {
-	background-color: var(--l1-background);
+	background-color: var(--bg-ink-500);
 	.ant-card-body {
 		padding: 0;
 		display: flex;
@@ -124,3 +124,51 @@
 	}
 	width: 240px;
 }
+.lightMode {
+	.collapseContainer {
+		background-color: var(--bg-vanilla-100);
+		border-bottom: 1px solid var(--bg-vanilla-300);
+
+		.ant-collapse-header-text {
+			color: var(--bg-slate-100);
+		}
+
+		.duration-inputs {
+			.min-max-input {
+				.ant-input-group-addon {
+					color: var(--bg-slate-100);
+				}
+
+				.ant-input {
+					color: var(--bg-slate-100);
+				}
+			}
+		}
+	}
+
+	.divider {
+		background-color: var(--bg-vanilla-100);
+		border-color: var(--bg-vanilla-200);
+	}
+
+	.filter-header {
+		.filter-title {
+			.ant-typography {
+				color: var(--bg-slate-100);
+			}
+		}
+
+		.arrow-icon {
+			background-color: var(--bg-vanilla-100);
+		}
+
+		.sync-icon {
+			background-color: var(--bg-vanilla-100);
+		}
+	}
+
+	.section-card {
+		background-color: var(--bg-vanilla-100);
+		box-shadow: none;
+	}
+}
--- a/frontend/src/components/QuickFilters/QuickFilters.styles.scss
+++ b/frontend/src/components/QuickFilters/QuickFilters.styles.scss
@@ -22,8 +22,8 @@
 	min-width: 0;
 	height: 100%;
 	min-height: 0;
-	border-right: 1px solid var(--l1-border);
-	color: var(--l1-foreground);
+	border-right: 1px solid var(--bg-slate-400);
+	color: var(--bg-vanilla-100);

 	.overlay-scrollbar {
 		flex: 1;
@@ -35,7 +35,7 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 10.5px;
-		border-bottom: 1px solid var(--l1-border);
+		border-bottom: 1px solid var(--bg-slate-400);

 		.left-actions {
 			display: flex;
@@ -45,7 +45,7 @@
 			justify-content: flex-start;

 			.text {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-400);
 				font-family: Inter;
 				font-size: 14px;
 				font-style: normal;
@@ -64,10 +64,9 @@
 				align-items: center;
 				gap: 10px;
 				border-radius: 2px;
-				border: 1px solid
-					color-mix(in srgb, var(--primary-background) 20%, transparent);
-				background: var(--primary-background);
-				color: var(--primary-foreground);
+				border: 1px solid rgba(78, 116, 248, 0.2);
+				background: rgba(78, 116, 248, 0.1);
+				color: var(--bg-robin-500);
 				font-family: 'Geist Mono';
 				font-size: 14px;
 				font-style: normal;
@@ -75,7 +74,6 @@
 				line-height: 18px;
 				text-transform: uppercase;
 			}
-
 			.select-box {
 				display: flex;
 				padding: 2px 5px;
@@ -101,7 +99,7 @@
 			.divider-filter {
 				width: 1px;
 				height: 14px;
-				background: var(--l1-background);
+				background: #161922;
 			}

 			.sync-icon {
@@ -113,7 +111,7 @@
 				position: relative;
 				display: flex;
 				padding: 2px;
-				background-color: var(--l1-background);
+				background-color: var(--bg-ink-500);

 				.settings-icon {
 					height: 14px;
@@ -123,7 +121,7 @@

 				&.active,
 				&:hover {
-					background: var(--l2-background);
+					background: var(--bg-slate-500);
 				}
 			}
 		}
@@ -158,12 +156,43 @@

 	mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
-		transparent 100%
+		rgba(11, 12, 14, 0.1) 0,
+		rgba(11, 12, 14, 0) 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
-		transparent 100%
+		rgba(11, 12, 14, 0.1) 0,
+		rgba(11, 12, 14, 0) 100%
 	);
 }
+
+.lightMode {
+	.quick-filters {
+		background-color: var(--bg-vanilla-100);
+		border-right: 1px solid var(--bg-vanilla-300);
+		color: var(--bg-ink-200);
+
+		.header {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.left-actions {
+				.text {
+					color: var(--bg-ink-400);
+				}
+
+				.sync-icon {
+					background-color: var(--bg-vanilla-100);
+				}
+			}
+			.right-actions {
+				.right-action-icon-container {
+					background-color: var(--bg-vanilla-100);
+					&.active,
+					&:hover {
+						background-color: var(--bg-vanilla-200);
+					}
+				}
+			}
+		}
+	}
+}
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/AnnouncementTooltip.styles.scss
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/AnnouncementTooltip.styles.scss
@@ -4,7 +4,7 @@
 		width: 8px;
 		height: 8px;
 		border-radius: 50%;
-		background-color: var(--primary-background);
+		background-color: var(--bg-robin-500);
 		z-index: 1000;
 	}

@@ -16,8 +16,8 @@
 	&__container {
 		position: absolute;
 		width: 320px;
-		background-color: var(--primary-background);
-		color: var(--primary-foreground);
+		background-color: var(--bg-robin-500);
+		color: var(--text-white);
 		border-radius: 8px;
 		padding: 16px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -32,7 +32,7 @@

 	&__close-icon {
 		cursor: pointer;
-		color: var(--primary-foreground);
+		color: var(--text-white);
 	}

 	&__message {
@@ -46,8 +46,8 @@
 	}

 	&__button {
-		background: var(--card);
-		color: var(--accent-primary);
+		background: var(--bg-vanilla-100);
+		color: var(--bg-robin-500);
 		border: none;
 		padding: 6px 12px;
 		border-radius: 4px;
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss
@@ -6,10 +6,10 @@
 	left: 0;
 	z-index: 999;
 	width: 342px;
-	background: var(--l1-background);
+	background: var(--bg-slate-500);
 	transition: width 0.05s ease-in-out;
 	overflow: hidden;
-	color: var(--l1-foreground);
+	color: var(--bg-vanilla-100);

 	&.qf-logs-explorer {
 		height: calc(100vh - 45px);
@@ -63,7 +63,7 @@

 	.search {
 		.ant-input {
-			background-color: var(--l1-background);
+			background-color: var(--bg-slate-500);
 			height: 46px;
 			border-radius: 0;
 		}
@@ -80,7 +80,7 @@
 		display: flex;
 		gap: 12px;
 		padding: 12px;
-		border-top: 1px solid var(--l1-border);
+		border-top: 1px solid var(--bg-slate-400);
 		button {
 			display: flex;
 			align-items: center;
@@ -99,7 +99,7 @@
 	display: flex;
 	flex-direction: column;
 	.qf-filters-header {
-		color: var(--muted-foreground);
+		color: var(--bg-slate-50);
 		font-family: Inter;
 		font-size: 11px;
 		font-style: normal;
@@ -172,10 +172,31 @@
 	}

 	&:hover {
-		background-color: var(--l2-background);
+		background-color: var(--bg-slate-400);
 		.remove-filter-btn,
 		.add-filter-btn {
 			opacity: 1;
 		}
 	}
 }
+
+.lightMode {
+	.quick-filters-settings {
+		background: var(--bg-vanilla-100);
+		color: var(--bg-slate-500);
+		.search {
+			.ant-input {
+				background-color: var(--bg-vanilla-100);
+			}
+		}
+		.qf-footer {
+			border-top: 1px solid var(--bg-vanilla-300);
+		}
+	}
+
+	.qf-filter-item {
+		&:hover {
+			background-color: var(--bg-vanilla-200);
+		}
+	}
+}
--- a/frontend/src/components/ResizeTable/ResizeTable.styles.scss
+++ b/frontend/src/components/ResizeTable/ResizeTable.styles.scss
@@ -45,7 +45,7 @@
 				transform: translate(-50%, -50%);
 				width: 1px;
 				height: 1.6em;
-				background-color: var(--l3-background);
+				background-color: var(--bg-slate-200);
 				transition: background-color 0.2s;
 			}
 		}
--- a/frontend/src/components/RolesSelect/RolesSelect.styles.scss
+++ b/frontend/src/components/RolesSelect/RolesSelect.styles.scss
@@ -33,7 +33,7 @@
 		font-size: var(--font-size-sm);
 		color: var(--l1-foreground);
 		background: var(--l3-background);
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--border);
 		border-radius: 2px;
 		padding: 0 var(--padding-1) 0 6px;
 		line-height: var(--line-height-20);
@@ -88,3 +88,13 @@
 		color: var(--destructive);
 	}
 }
+
+.roles-single-select {
+	.ant-select-selector {
+		min-height: 32px;
+		background-color: var(--l2-background) !important;
+		border: 1px solid var(--border) !important;
+		border-radius: 2px;
+		padding: 2px var(--padding-2) !important;
+	}
+}
--- a/frontend/src/components/RolesSelect/RolesSelect.tsx
+++ b/frontend/src/components/RolesSelect/RolesSelect.tsx
@@ -158,10 +158,10 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 	return (
 		<Select
 			id={id}
-			value={value}
+			value={value || undefined}
 			onChange={onChange}
 			placeholder={placeholder}
-			className={cx('roles-select', className)}
+			className={cx('roles-single-select', className)}
 			loading={loading}
 			notFoundContent={notFoundContent}
 			options={options}
--- a/frontend/src/components/ServiceAccountDrawer/AddKeyModal/AddKeyModal.styles.scss
+++ b/frontend/src/components/ServiceAccountDrawer/AddKeyModal/AddKeyModal.styles.scss
@@ -27,7 +27,7 @@
 	&__input {
 		height: 32px;
 		background: var(--l2-background);
-		border-color: var(--l1-border);
+		border-color: var(--border);
 		color: var(--l1-foreground);
 		box-shadow: none;

@@ -39,7 +39,7 @@
 	&__expiry-toggle {
 		width: 60%;
 		display: flex;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--border);
 		border-radius: 2px;
 		overflow: hidden;
 		padding: 0;
@@ -60,7 +60,7 @@
 			justify-content: center;
 			background: transparent;
 			border: none;
-			border-right: 1px solid var(--l1-border);
+			border-right: 1px solid var(--border);
 			color: var(--foreground);

 			&:last-child {
@@ -80,7 +80,7 @@

 		.ant-picker {
 			background: var(--l2-background);
-			border-color: var(--l1-border);
+			border-color: var(--border);
 			border-radius: 2px;
 			width: 100%;
 			height: 32px;
@@ -108,7 +108,7 @@
 		align-items: center;
 		height: 32px;
 		background: var(--l2-background);
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--border);
 		border-radius: 2px;
 		overflow: hidden;
 	}
@@ -132,7 +132,7 @@
 		border-top: none;
 		border-right: none;
 		border-bottom: none;
-		border-left: 1px solid var(--l1-border);
+		border-left: 1px solid var(--border);
 		min-width: 40px;
 	}

--- a/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx
@@ -1,7 +1,7 @@
+import { Badge } from '@signozhq/badge';
 import { Button } from '@signozhq/button';
 import { Callout } from '@signozhq/callout';
 import { Check, Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui';
 import type { ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO } from 'api/generated/services/sigNoz.schemas';

 export interface KeyCreatedPhaseProps {
--- a/frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx
@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
 import { DialogWrapper } from '@signozhq/dialog';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,
--- a/frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx
@@ -2,7 +2,7 @@ import { useQueryClient } from 'react-query';
 import { Button } from '@signozhq/button';
 import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getGetServiceAccountQueryKey,
--- a/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx
@@ -1,10 +1,10 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
+import { Badge } from '@signozhq/badge';
 import { Button } from '@signozhq/button';
 import { LockKeyhole, Trash2, X } from '@signozhq/icons';
 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';
--- a/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyModal.styles.scss
+++ b/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyModal.styles.scss
@@ -27,7 +27,7 @@
 	&__input {
 		height: 32px;
 		background: var(--l2-background);
-		border-color: var(--l1-border);
+		border-color: var(--border);
 		color: var(--l1-foreground);
 		box-shadow: none;

@@ -44,7 +44,7 @@
 		padding: 0 var(--padding-2);
 		border-radius: 2px;
 		background: var(--l2-background);
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--border);
 		cursor: not-allowed;
 		opacity: 0.8;
 	}
@@ -70,7 +70,7 @@
 	&__expiry-toggle {
 		width: 60%;
 		display: flex;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--border);
 		border-radius: 2px;
 		overflow: hidden;
 		padding: 0;
@@ -91,7 +91,7 @@
 			justify-content: center;
 			background: transparent;
 			border: none;
-			border-right: 1px solid var(--l1-border);
+			border-right: 1px solid var(--border);
 			color: var(--foreground);
 			white-space: nowrap;

@@ -112,7 +112,7 @@

 		.ant-picker {
 			background: var(--l2-background);
-			border-color: var(--l1-border);
+			border-color: var(--border);
 			border-radius: 2px;
 			width: 100%;
 			height: 32px;
--- a/frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { DialogWrapper } from '@signozhq/dialog';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,
--- a/frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
+import { Badge } from '@signozhq/badge';
 import { LockKeyhole } from '@signozhq/icons';
 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';
@@ -16,8 +16,8 @@ interface OverviewTabProps {
 	account: ServiceAccountRow;
 	localName: string;
 	onNameChange: (v: string) => void;
-	localRoles: string[];
-	onRolesChange: (v: string[]) => void;
+	localRole: string;
+	onRoleChange: (v: string) => void;
 	isDisabled: boolean;
 	availableRoles: AuthtypesRoleDTO[];
 	rolesLoading?: boolean;
@@ -31,8 +31,8 @@ function OverviewTab({
 	account,
 	localName,
 	onNameChange,
-	localRoles,
-	onRolesChange,
+	localRole,
+	onRoleChange,
 	isDisabled,
 	availableRoles,
 	rolesLoading,
@@ -96,15 +96,10 @@ function OverviewTab({
 				{isDisabled ? (
 					<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
 						<div className="sa-drawer__disabled-roles">
-							{localRoles.length > 0 ? (
-								localRoles.map((roleId) => {
-									const role = availableRoles.find((r) => r.id === roleId);
-									return (
-										<Badge key={roleId} color="vanilla">
-											{role?.name ?? roleId}
-										</Badge>
-									);
-								})
+							{localRole ? (
+								<Badge color="vanilla">
+									{availableRoles.find((r) => r.id === localRole)?.name ?? localRole}
+								</Badge>
 							) : (
 								<span className="sa-drawer__input-text">—</span>
 							)}
@@ -114,15 +109,14 @@ function OverviewTab({
 				) : (
 					<RolesSelect
 						id="sa-roles"
-						mode="multiple"
 						roles={availableRoles}
 						loading={rolesLoading}
 						isError={rolesError}
 						error={rolesErrorObj}
 						onRefetch={onRefetchRoles}
-						value={localRoles}
-						onChange={onRolesChange}
-						placeholder="Select roles"
+						value={localRole}
+						onChange={onRoleChange}
+						placeholder="Select role"
 					/>
 				)}
 			</div>
--- a/frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx
@@ -2,7 +2,7 @@ import { useQueryClient } from 'react-query';
 import { Button } from '@signozhq/button';
 import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountKeysQueryKey,
--- a/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.styles.scss
+++ b/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.styles.scss
@@ -51,7 +51,7 @@
 			}

 			&:hover {
-				background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+				background: rgba(171, 189, 255, 0.04);
 				color: var(--l1-foreground);
 			}

@@ -175,7 +175,7 @@
 	&__input {
 		height: 32px;
 		background: var(--l2-background);
-		border-color: var(--l1-border);
+		border-color: var(--border);
 		color: var(--l1-foreground);
 		box-shadow: none;

@@ -192,7 +192,7 @@
 		padding: 0 var(--padding-2);
 		border-radius: 2px;
 		background: var(--l2-background);
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--border);

 		&--disabled {
 			cursor: not-allowed;
@@ -485,22 +485,14 @@
 			background: transparent;

 			&:hover > td {
-				background: color-mix(
-					in srgb,
-					var(--bg-robin-200) 6%,
-					transparent
-				) !important;
+				background: rgba(171, 189, 255, 0.06) !important;
 			}

 			&.keys-tab__table-row--alt > td {
-				background: color-mix(in srgb, var(--bg-robin-200) 2%, transparent);
+				background: rgba(171, 189, 255, 0.02);

 				&:hover {
-					background: color-mix(
-						in srgb,
-						var(--bg-robin-200) 6%,
-						transparent
-					) !important;
+					background: rgba(171, 189, 255, 0.06) !important;
 				}
 			}
 		}
@@ -563,7 +555,7 @@

 .sa-delete-dialog {
 	background: var(--l2-background);
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--l2-border);

 	[data-slot='dialog-title'] {
 		color: var(--l1-foreground);
--- a/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx
@@ -3,8 +3,8 @@ 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 { toast } from '@signozhq/sonner';
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { toast } from '@signozhq/ui';
 import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -80,7 +80,7 @@ function ServiceAccountDrawer({
 		parseAsBoolean.withDefault(false),
 	);
 	const [localName, setLocalName] = useState('');
-	const [localRoles, setLocalRoles] = useState<string[]>([]);
+	const [localRole, setLocalRole] = useState('');
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);

@@ -116,7 +116,7 @@ function ServiceAccountDrawer({
 	}, [account?.id, account?.name, setKeysPage]);

 	useEffect(() => {
-		setLocalRoles(currentRoles.map((r) => r.id).filter(Boolean) as string[]);
+		setLocalRole(currentRoles[0]?.id ?? '');
 	}, [currentRoles]);

 	const isDeleted =
@@ -125,8 +125,7 @@ function ServiceAccountDrawer({
 	const isDirty =
 		account !== null &&
 		(localName !== (account.name ?? '') ||
-			JSON.stringify([...localRoles].sort()) !==
-				JSON.stringify([...currentRoles.map((r) => r.id).filter(Boolean)].sort()));
+			localRole !== (currentRoles[0]?.id ?? ''));

 	const {
 		roles: availableRoles,
@@ -216,7 +215,10 @@ function ServiceAccountDrawer({

 	const retryRolesUpdate = useCallback(async (): Promise<void> => {
 		try {
-			const failures = await applyDiff(localRoles, availableRoles);
+			const failures = await applyDiff(
+				[localRole].filter(Boolean),
+				availableRoles,
+			);
 			if (failures.length === 0) {
 				setSaveErrors((prev) => prev.filter((e) => e.context !== 'Roles update'));
 			} else {
@@ -240,7 +242,7 @@ function ServiceAccountDrawer({
 				),
 			);
 		}
-	}, [localRoles, availableRoles, applyDiff, toSaveApiError, makeRoleRetry]);
+	}, [localRole, availableRoles, applyDiff, toSaveApiError, makeRoleRetry]);

 	const handleSave = useCallback(async (): Promise<void> => {
 		if (!account || !isDirty) {
@@ -259,7 +261,7 @@ function ServiceAccountDrawer({

 			const [nameResult, rolesResult] = await Promise.allSettled([
 				namePromise,
-				applyDiff(localRoles, availableRoles),
+				applyDiff([localRole].filter(Boolean), availableRoles),
 			]);

 			const errors: SaveError[] = [];
@@ -308,7 +310,7 @@ function ServiceAccountDrawer({
 		account,
 		isDirty,
 		localName,
-		localRoles,
+		localRole,
 		availableRoles,
 		updateMutateAsync,
 		applyDiff,
@@ -410,8 +412,8 @@ function ServiceAccountDrawer({
 								account={account}
 								localName={localName}
 								onNameChange={handleNameChange}
-								localRoles={localRoles}
-								onRolesChange={setLocalRoles}
+								localRole={localRole}
+								onRoleChange={setLocalRole}
 								isDisabled={isDeleted}
 								availableRoles={availableRoles}
 								rolesLoading={rolesLoading}
--- a/frontend/src/components/ServiceAccountDrawer/tests/AddKeyModal.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/AddKeyModal.test.tsx
@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
--- a/frontend/src/components/ServiceAccountDrawer/tests/EditKeyModal.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/EditKeyModal.test.tsx
@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
--- a/frontend/src/components/ServiceAccountDrawer/tests/KeysTab.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/KeysTab.test.tsx
@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
--- a/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.test.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/tests/ServiceAccountDrawer.test.tsx
@@ -139,20 +139,20 @@ describe('ServiceAccountDrawer', () => {
 		});
 	});

-	it('changing roles enables Save; clicking Save sends updated roles in payload', async () => {
-		const updateSpy = jest.fn();
+	it('changing roles enables Save; clicking Save sends role add request without delete', async () => {
 		const roleSpy = jest.fn();
+		const deleteSpy = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });

 		server.use(
-			rest.put(SA_ENDPOINT, async (req, res, ctx) => {
-				updateSpy(await req.json());
-				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
-			}),
 			rest.post(SA_ROLES_ENDPOINT, async (req, res, ctx) => {
 				roleSpy(await req.json());
 				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
 			}),
+			rest.delete(SA_ROLE_DELETE_ENDPOINT, (_, res, ctx) => {
+				deleteSpy();
+				return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+			}),
 		);

 		renderDrawer();
@@ -167,12 +167,12 @@ describe('ServiceAccountDrawer', () => {
 		await user.click(saveBtn);

 		await waitFor(() => {
-			expect(updateSpy).not.toHaveBeenCalled();
 			expect(roleSpy).toHaveBeenCalledWith(
 				expect.objectContaining({
 					id: '019c24aa-2248-7585-a129-4188b3473c27',
 				}),
 			);
+			expect(deleteSpy).not.toHaveBeenCalled();
 		});
 	});

@@ -350,7 +350,7 @@ describe('ServiceAccountDrawer – save-error UX', () => {
 		).toBeInTheDocument();
 	});

-	it('role update failure shows SaveErrorItem with the role name context', async () => {
+	it('role add failure shows SaveErrorItem with the role name context', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });

 		server.use(
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Vinícius Lourenço	5ad3c7b191	fix(app-routes): use redirect component to avoid flash old routes due to useEffect	2026-04-06 10:41:12 -03:00
Vinicius Lourenço	43f7363e84	fix(date-time-selection): reset to the correct value under modal (#10813 )	2026-04-06 13:07:23 +00:00
Ashwin Bhatkal	6fe69b94c9	fix: show alert type in classic experience edit (#10847 )	2026-04-06 11:00:41 +00:00
Srikanth Chekuri	1eb27d0bc4	chore: add schema version specific validations (#10808 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * chore: add schema version specific validations * chore: address reivew comments * chore: additional checks * chore: adrress lint * chore: more lint	2026-04-06 10:45:41 +00:00
Vikrant Gupta	55cce3c708	feat(authz): accept singular roles for user and service accounts (#10827 ) * feat(authz): accept singular roles for user and service accounts * feat(authz): update integration tests * feat(authz): update integration tests * feat: move role management to a single select flow on members and service account pages(temporarily) * feat(authz): enable stats reporter for service accounts * feat(authz): identity call for activating/deleting user --------- Co-authored-by: SagarRajput-7 <sagar@signoz.io>	2026-04-06 10:41:56 +00:00
Vikrant Gupta	d677973d56	test(integration): add test cases for new user APIs (#10837 ) Some checks failed build-staging / prepare (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details * test(integration): add user_v2 tests * test(integration): fix fmt * test(integration): disable delete mode from tests * test(integration): add response.text when the assertion fails * test(integration): some renaming	2026-04-04 14:43:55 +00:00
Srikanth Chekuri	b5b89bb678	fix: several panic errors (#10817 ) * fix: several panic errors * fix: add recover for dashboard sql	2026-04-04 10:38:42 +00:00
Pandey	b5eab118dd	refactor: move and internalize resource filter statement builder (#10824 ) * refactor: move resourcefilter to pkg/telemetryresourcefilter Move pkg/querybuilder/resourcefilter to pkg/telemetryresourcefilter to align with the existing telemetry package naming convention (telemetrylogs, telemetrytraces, telemetrymetrics, telemetrymeter). The resource filter is a statement builder, not a query builder utility. * refactor: internalize resource filter construction in statement builders Each telemetry statement builder (logs, traces) now creates its own resource filter internally instead of receiving it as an injected dependency. This makes it impossible to wire the wrong resource table and simplifies the provider. Delete telemetryresourcefilter/tables.go — each telemetry package now owns its resource table constant (LogsResourceV2TableName in telemetrylogs, TracesResourceV3TableName in telemetrytraces). * refactor: create field mapper and condition builder inside resource filter New Remove fieldMapper and conditionBuilder params from telemetryresourcefilter.New — they are always the same (NewFieldMapper + NewConditionBuilder) so create them internally.	2026-04-04 10:27:46 +00:00
Vishal Sharma	98d0bdfe49	chore(frontend): sync pylon chat widget theme with app theme (#10830 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details	2026-04-04 09:29:08 +00:00
Vikrant Gupta	a71006b662	chore(user): add partial index for email,org_id (#10828 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * chore(user): add partial index for email,org_id * chore(user): fix integration test fmt * chore(user): fix integration test lint	2026-04-03 20:27:04 +00:00
Vishal Sharma	769e36ec84	feat(frontend): add new onboarding datasource entries (#10829 )	2026-04-03 20:13:08 +00:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="#1eb4d4" viewBox="0 0 24 24"><title>Hasura</title><path d="M23.558 8.172c.707-2.152.282-6.447-1.09-8.032a.42.42 0 0 0-.664.051l-1.69 2.59a1.32 1.32 0 0 1-1.737.276C16.544 1.885 14.354 1.204 12 1.204s-4.544.68-6.378 1.853a1.326 1.326 0 0 1-1.736-.276L2.196.191A.42.42 0 0 0 1.532.14C.16 1.728-.265 6.023.442 8.172c.236.716.3 1.472.16 2.207-.137.73-.276 1.61-.276 2.223C.326 18.898 5.553 24 11.997 24c6.447 0 11.671-5.105 11.671-11.398 0-.613-.138-1.494-.276-2.223a4.47 4.47 0 0 1 .166-2.207m-11.56 13.284c-4.984 0-9.036-3.96-9.036-8.827q0-.239.014-.473c.18-3.316 2.243-6.15 5.16-7.5 1.17-.546 2.481-.848 3.864-.848s2.69.302 3.864.85c2.917 1.351 4.98 4.187 5.16 7.501q.013.236.014.473c-.003 4.864-4.057 8.824-9.04 8.824m3.915-5.43-2.31-3.91-1.98-3.26a.26.26 0 0 0-.223-.125H9.508a.26.26 0 0 0-.227.13.25.25 0 0 0 .003.254l1.895 3.109-2.542 3.787a.25.25 0 0 0-.011.259.26.26 0 0 0 .23.132h1.905a.26.26 0 0 0 .218-.116l1.375-2.096 1.233 2.088a.26.26 0 0 0 .224.127h1.878c.094 0 .18-.049.224-.127a.24.24 0 0 0 0-.251z"/></svg>