feat: get dashboard api handler with todo

Merge branch 'nv/4172' into nv/4310
chore: go mod tidy
2026-04-07 12:40:26 +01:00 · 2026-04-07 16:59:13 +05:30 · 2026-04-07 15:54:46 +05:30 · 2026-04-07 15:54:35 +05:30 · 2026-04-07 15:53:22 +05:30 · 2026-04-07 15:52:53 +05:30
527 changed files with 20747 additions and 6935 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/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/frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.styles.scss
+++ b/frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.styles.scss
@@ -47,15 +47,11 @@
 		}

 		> tr.sa-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;
 		}
 	}

@@ -155,7 +151,7 @@

 		strong {
 			font-weight: var(--font-weight-medium);
-			color: var(--l1-foreground);
+			color: var(--bg-base-white);
 		}
 	}
 }
@@ -184,7 +180,7 @@

 .sa-tooltip {
 	.ant-tooltip-inner {
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-500);
 		color: var(--foreground);
 		font-size: var(--font-size-xs);
 		line-height: normal;
@@ -194,7 +190,7 @@
 	}

 	.ant-tooltip-arrow-content {
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-500);
 	}
 }

@@ -210,4 +206,12 @@
 			}
 		}
 	}
+
+	.sa-empty-state {
+		&__text {
+			strong {
+				color: var(--bg-base-black);
+			}
+		}
+	}
 }
--- a/frontend/src/components/ServiceAccountsTable/utils.tsx
+++ b/frontend/src/components/ServiceAccountsTable/utils.tsx
@@ -1,5 +1,5 @@
+import { Badge } from '@signozhq/badge';
 import { ScanSearch } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui';
 import { Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Naman Verma	19418d6d36	feat: get dashboard api handler with todo	2026-04-07 16:59:13 +05:30
Naman Verma	fc9ba6aac0	Merge branch 'nv/4172' into nv/4310	2026-04-07 15:54:46 +05:30
Naman Verma	8ffe675ce7	chore: go mod tidy	2026-04-07 15:54:35 +05:30
Naman Verma	c88c59c83b	feat: patch APIs to update name, desc, tags	2026-04-07 15:53:22 +05:30
Naman Verma	312b2fa38d	Merge branch 'nv/4172' into nv/4310	2026-04-07 15:52:53 +05:30
Naman Verma	d1fcaeb924	feat: update metadata methods	2026-04-07 15:52:41 +05:30
Naman Verma	a7a4b2f2a1	feat: lock/unlock api in v2	2026-04-07 13:42:17 +05:30
Naman Verma	10ca8c38e1	Merge branch 'nv/4172' into nv/4310	2026-04-07 11:36:59 +05:30
Naman Verma	dc2b29142e	chore: add required true tag to required fields	2026-04-07 11:35:04 +05:30
Naman Verma	cf4f73dda0	feat: delete api for dashboard v2	2026-04-07 10:02:12 +05:30
Naman Verma	a6e4294665	Merge branch 'nv/4172' into nv/4310	2026-04-06 22:18:48 +05:30
Naman Verma	55a4471427	chore: diff check in update method	2026-04-06 22:18:34 +05:30
Naman Verma	66582e528f	feat: update v2 dashboard handler	2026-04-06 22:17:18 +05:30
Naman Verma	9c3e8ce15d	fix: remove err catch from call to NewDashboardV2 method	2026-04-06 21:25:37 +05:30
Naman Verma	50e96fc450	Merge branch 'nv/4172' into nv/4310	2026-04-06 21:19:41 +05:30
Naman Verma	10f60c011f	chore: more info in StorableDashboardDataV2	2026-04-06 21:18:53 +05:30
Naman Verma	a7f0df61d1	feat: create v2 dashboard handler	2026-04-06 18:21:43 +05:30
Naman Verma	5ad56658bf	chore: changes for create v2 api	2026-04-06 18:20:06 +05:30
Naman Verma	bfb2f5719c	Merge branch 'main' into nv/4172	2026-04-06 17:35:50 +05:30
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
Naman Verma	bb725ea4d9	Merge branch 'main' into nv/4172	2026-04-06 09:31:17 +05:30
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
Naman Verma	65bedcca3f	Merge branch 'main' into nv/4172	2026-04-02 13:07:58 +05:30
Naman Verma	1e7ddb0dbe	chore: go lint fixes	2026-04-02 13:07:32 +05:30
Naman Verma	f39e2183a3	chore: go lint fixes	2026-04-02 12:41:19 +05:30
Naman Verma	43c9367ab5	fix: add missing dashboard metadata fields	2026-04-02 12:27:29 +05:30
Naman Verma	596cb8adbb	test: unit test for dashboard with sections	2026-04-02 12:20:12 +05:30
Naman Verma	58a2737717	test: unit test for dashboard with sections	2026-04-02 12:19:39 +05:30
Naman Verma	8263aed441	test: unit tests improvement fourth pass	2026-04-02 12:08:01 +05:30
Naman Verma	d3eb56f3da	test: unit tests improvement third pass	2026-04-02 11:33:43 +05:30
Naman Verma	6e0c905977	test: unit tests improvement second pass	2026-04-02 11:32:18 +05:30
Naman Verma	8ee5b5f08e	test: unit tests improvement first pass	2026-04-02 11:18:44 +05:30
Naman Verma	1325b0a1b3	feat: query type and panel type matching	2026-04-02 10:26:46 +05:30
Naman Verma	76dc3b743b	chore: refer to common struct	2026-04-02 09:44:08 +05:30
Naman Verma	dfe0a9d147	test: fix unit tests	2026-04-02 09:43:12 +05:30
Naman Verma	f24c3d8e24	chore: remove format from threshold with label, rearrange structs	2026-04-02 09:41:37 +05:30
Naman Verma	7dba4d7b64	chore: context link not needed in plugins	2026-04-02 01:50:35 +05:30
Naman Verma	2299cedeab	chore: span gaps in schema	2026-04-02 01:34:54 +05:30
Naman Verma	6812d68d4d	chore: no omit empty	2026-04-02 01:31:31 +05:30
Naman Verma	667a1e6d5d	feat: add TimeSeriesChartAppearance	2026-04-02 01:22:22 +05:30
Naman Verma	31306a57d8	chore: slight rearrange for builder spec readability	2026-04-02 01:14:25 +05:30
Naman Verma	839b3e29ee	chore: nil factory case not needed	2026-04-02 01:10:34 +05:30
Naman Verma	20ab7d4908	chore: nil factory case not needed	2026-04-02 01:06:41 +05:30
Naman Verma	d5b72f9f0c	chore: define constants for enum values	2026-04-02 00:48:13 +05:30
Naman Verma	9a3efa7704	chore: go lint fixes	2026-04-02 00:42:40 +05:30
Naman Verma	fd45b4fad1	fix: builder query validation (might need to revisit, 3 types seems bad)	2026-04-01 16:43:01 +05:30
Naman Verma	cea88bf51e	chore: use perses updated/createdat	2026-04-01 16:26:35 +05:30
Naman Verma	6ead1cd52a	chore: perses folder not needed anymore	2026-04-01 16:16:30 +05:30
Naman Verma	7cb700428c	fix: go mod fix	2026-04-01 16:15:49 +05:30
Naman Verma	a2dc410be6	Merge branch 'main' into nv/4172	2026-04-01 16:14:02 +05:30
Naman Verma	66ce48434d	feat: go struct based schema for dashboardv2 with validations and some tests	2026-04-01 16:13:26 +05:30
Naman Verma	7d3612c10a	feat: textbox variable	2026-03-25 13:21:46 +05:30
Naman Verma	c82cd32f61	Merge branch 'main' into nv/4172	2026-03-25 13:11:49 +05:30
Naman Verma	a3980e084c	Merge branch 'main' into nv/4172	2026-03-24 16:44:50 +05:30
Naman Verma	4319dd9cef	chore: doc for how to add a panel spec	2026-03-24 16:44:34 +05:30
Naman Verma	92a5e9b9c9	chore: common threshold type	2026-03-24 16:23:11 +05:30
Naman Verma	408a914129	chore: change attr name to name	2026-03-24 16:13:09 +05:30
Naman Verma	0e304b1d40	fix: normalise enum defs	2026-03-24 16:12:09 +05:30
Naman Verma	58a9be24d3	chore: single version for all schemas	2026-03-24 14:07:24 +05:30
Naman Verma	adf439fcf1	fix: proper type for selectFields	2026-03-24 13:56:14 +05:30
Naman Verma	a1a54c4bb2	fix: promql step duration schema	2026-03-24 13:53:19 +05:30
Naman Verma	3c1961d3fc	fix: datasource in perses.json	2026-03-24 13:44:58 +05:30
Naman Verma	c3efa0660b	fix: only allow one of metric or expr aggregation in builder query	2026-03-24 13:40:42 +05:30
Naman Verma	183dd09082	fix: functions in formula	2026-03-24 13:34:59 +05:30
Naman Verma	a351373c49	chore: common package for variables' repeated definitions	2026-03-24 13:23:53 +05:30
Naman Verma	8e7653b90d	chore: common package for queries' repeated definitions	2026-03-24 13:22:49 +05:30
Naman Verma	5c40d6b68b	chore: common package for panels' repeated definitions	2026-03-24 13:19:12 +05:30
Naman Verma	31115df41c	chore: actually name every panel as a panel	2026-03-24 13:05:55 +05:30
Naman Verma	869c3dccb2	fix: less verbose field names in dynamic var	2026-03-24 12:57:34 +05:30
Naman Verma	c5d7a7ef8c	fix: no nesting in context links	2026-03-24 12:55:40 +05:30
Naman Verma	544b87b254	chore: remove unimplemented join query schema	2026-03-24 12:48:36 +05:30
Naman Verma	e885fb98e5	chore: no need for threshold prefix inside threshold obj	2026-03-24 12:44:50 +05:30
Naman Verma	be227eec43	chore: replace yAxisUnit by unit	2026-03-24 12:41:16 +05:30
Naman Verma	13263c1f25	Merge branch 'main' into nv/4172	2026-03-23 20:01:04 +05:30
Naman Verma	ccbf410d15	fix: no more online validation	2026-03-23 16:23:51 +05:30
Naman Verma	03b98ff824	chore: remaining fields file	2026-03-23 16:10:01 +05:30
Naman Verma	2cdba0d11c	chore: examples for panel types	2026-03-23 16:06:29 +05:30
Naman Verma	84d2885530	chore: a more complex example	2026-03-23 16:03:18 +05:30
Naman Verma	b82dcc6138	docs: list panel schema without upstream ref	2026-03-23 15:31:53 +05:30
Naman Verma	a14d5847b9	docs: histogram chart panel schema without upstream ref	2026-03-23 15:21:27 +05:30
Naman Verma	d184746142	docs: table chart panel schema without upstream ref	2026-03-23 15:17:21 +05:30
Naman Verma	c335e17e1d	docs: pie chart panel schema without upstream ref	2026-03-23 14:33:05 +05:30
Naman Verma	433dd0b2d0	docs: number panel schema without upstream ref	2026-03-23 14:27:46 +05:30
Naman Verma	05e97e246a	docs: number panel schema without upstream ref	2026-03-23 14:27:37 +05:30
Naman Verma	bddfe30f6c	docs: bar chart panel schema without upstream ref	2026-03-23 14:22:00 +05:30
Naman Verma	7a01a5250d	chore: object for visualization section	2026-03-23 14:16:07 +05:30
Naman Verma	09c98c830d	docs: time series panel schema without upstream ref	2026-03-23 14:11:02 +05:30
Naman Verma	0fbb90cc91	fix: promql fix	2026-03-23 14:09:48 +05:30
Naman Verma	15f0787610	chore: remove upstream import	2026-03-23 13:07:48 +05:30
Naman Verma	22ebc7732c	feat: promql example	2026-03-22 19:39:57 +05:30
Naman Verma	cff18edf6e	chore: comment explaining when to use composite query and when not	2026-03-22 19:22:45 +05:30
Naman Verma	cb49c0bf3b	feat: custom time series schema	2026-03-22 19:18:15 +05:30
Naman Verma	1cb6f94d21	fix: proper composite query schema	2026-03-19 16:18:31 +05:30
Naman Verma	68155f374b	chore: folders in schemas for arranging	2026-03-19 15:15:06 +05:30
Naman Verma	696524509f	chore: folders in schemas for arranging	2026-03-19 15:14:43 +05:30
Naman Verma	705cdab38c	chore: rename	2026-03-19 14:24:10 +05:30
Naman Verma	ae9b881413	chore: py script not needed	2026-03-19 01:39:17 +05:30
Naman Verma	05f4e15d07	chore: rearrange specs in package.json	2026-03-19 01:39:08 +05:30
Naman Verma	1653c6d725	chore: checkpoint for half correct setup	2026-03-19 01:34:22 +05:30
Naman Verma	070b4b7061	chore: test file with way more examples	2026-03-18 22:01:16 +05:30
Naman Verma	7f4c06edd6	chore: test file with way more examples	2026-03-18 22:01:10 +05:30
Naman Verma	6bed20b5b9	fix: remove fields from variable specs that are there in ListVariable	2026-03-18 19:19:00 +05:30
Naman Verma	033bd3c9b8	feat: validation script	2026-03-18 15:52:05 +05:30
Naman Verma	d4c9a923fd	chore: no commons (for now)	2026-03-18 15:28:35 +05:30
Naman Verma	387dcb529f	chore: no config folder	2026-03-18 15:04:16 +05:30
Naman Verma	7a4da7bcc5	chore: no config folder	2026-03-18 15:04:02 +05:30
Naman Verma	b152fae3fa	chore: remove validate file	2026-03-18 15:03:19 +05:30
Naman Verma	2ed766726c	chore: remove manually written manifest and package	2026-03-18 15:02:23 +05:30
Naman Verma	8767f6a57d	chore: remove stub for time series chart	2026-03-18 15:01:58 +05:30
Naman Verma	22d8c7599b	chore: rm comment	2026-03-18 13:10:19 +05:30
Naman Verma	1019264272	chore: no need for PageSize type in commons, only used once	2026-03-18 13:07:31 +05:30
Naman Verma	c950d7e784	chore: no need for Signal type in commons, only used once	2026-03-18 13:05:32 +05:30
Naman Verma	1e279e6193	Merge branch 'main' into nv/4172	2026-03-18 13:03:09 +05:30
Naman Verma	d3a278c43e	docs: perses schema for dashboards	2026-03-17 14:56:07 +05:30
				`@@ -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>