feat(calendar): select the calendar through data-slot

feat(dropdown): adopt Dropdown in place of DropdownMenu
feat(tabs): adopt the items API
2026-09-24 04:10:40 +01:00 · 2026-09-23 21:57:22 +05:30 · 2026-09-23 21:56:48 +05:30 · 2026-09-23 21:56:30 +05:30 · 2026-09-23 21:56:09 +05:30 · 2026-09-23 21:55:50 +05:30
480 changed files with 5433 additions and 3356 deletions
--- a/.claude/skills/storybook-visual-diff/SKILL.md
+++ b/.claude/skills/storybook-visual-diff/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: storybook-visual-diff
-description: Screenshot a set of SigNoz Storybook stories, then pixel-diff two runs to see what a CSS or component change did, with the changes tinted over the new shot. Also surveys where a component is used across the UI, ringing each instance in red and collecting every one into a single contact sheet. Use when asked to take story screenshots, capture a visual baseline, compare before/after of a style change, find which pages a change affects, or show every place a component appears.
+description: Screenshot a set of SigNoz Storybook stories, then pixel-diff two runs to see what a CSS or component change did, with the changes tinted over the new shot. Use when asked to take story screenshots, capture a visual baseline, compare before/after of a style change, or find which pages a change affects.
 ---

 # Storybook visual diff
@@ -22,7 +22,7 @@ says, take it and do not ask again; ask only for what is genuinely missing, in

 | To settle | Ask | Options |
 | --- | --- | --- |
-| Job | "What should this run produce?" | shoot only · survey where a component is used (§4) · baseline for a change you are about to make · compare against a change already in the working tree · compare this branch against another (`main` by default, or one the user names) · compare two configurations of the same story (`--args`, clock, width) · noise floor (same tree twice) |
+| Job | "What should this run produce?" | shoot only · baseline for a change you are about to make · compare against a change already in the working tree · compare this branch against another (`main` by default, or one the user names) · compare two configurations of the same story (`--args`, clock, width) · noise floor (same tree twice) |
 | Scope | "Which stories?" | offer 2-3 concrete selections read off `index.json` (a page, a `--title` prefix, everything), never open-ended |
 | Themes | "Which themes?" | dark · dark + light |
 | Read-out | "How should the diff read?" | `green` (changed pixels over the after shot) · `green-parallel` (before \| after \| diff, side by side) · `red` · `red-parallel` · `none` (keep both runs, do not diff) |
@@ -39,7 +39,6 @@ The job decides which loop below to run:
 | Job | Loop |
 | --- | --- |
 | **shoot only** | §1, §2, stop. Report the paths. No diff, no second run. |
-| **usage survey** | §1, §4, stop. One run, no diff: the question is where a component appears, not what moved. |
 | **baseline first** | the full loop, stopping after step 2 to hand the change back. The user makes it, then continue at step 4. |
 | **change already in the tree** | the tree *is* the after state. `git stash` (or check out the base commit) to shoot the before, restore, shoot the after. Confirm the working tree is clean enough to stash before touching it, and restore it even if a capture fails. |
 | **branch vs branch** | shoot the current branch, then `git switch <base>` in place (stash first if the tree is dirty), restart the dev server, shoot again, switch back and unstash. Restart matters: HMR does not survive a whole-branch swap cleanly. Get the tree back to where it started even if a capture fails. |
@@ -123,8 +122,6 @@ node scripts/story-shots.mjs .story-shots/baseline \
 | `--clock <iso\|live>` | wall clock the page reads, passed to the preview as `?storyClock`; `live` unfreezes it |
 | `--motion` | keep animations and transitions running (sets the `motion` global to `live`) |
 | `--ignore <selector>` | hide matching elements, on top of `[data-shot-ignore]` and `[data-chromatic="ignore"]` |
-| `--highlight <selector>` | also write `<id>--highlight.png`, every match ringed in red with 6px of padding |
-| `--crop <selector>` | also write one `crops/<id>--<n>.png` per match, and montage the theme's crops into `crops.png` |
 | `--flat` | write `<out>/<id>.png`, no theme directory |
 | `--no-caption` | leave the caption band off the shots |
 | `--list` | print the matched stories and exit |
@@ -132,9 +129,8 @@ node scripts/story-shots.mjs .story-shots/baseline \
 Files land at `<out>/<theme>/<story-id>.png`, next to a `shots.json` recording
 what each shot is (id, title, name, theme, `ok`/`busy`, the caption's height in
 rows) and how the run was configured (args, clock, width, height, grow, motion,
-settle, ignore, highlight, crop). Keep the flags identical between the two runs
-or the diff pairs nothing. `--highlight` and `--crop` write extra files beside
-the shots; §4 is what they are for.
+settle, ignore). Keep the flags identical between the two runs or the diff pairs
+nothing.

 Every shot carries the caption band described below, so a single screenshot says
 what it is on its own. `--no-caption` leaves it off, and so does a machine
@@ -212,75 +208,10 @@ pixelmatch's `includeAA: false`. So the script implements that comparison:
 A pair whose shots are different sizes is compared over the overlap, and every
 row and column that exists in only one of them counts as changed.

-Pairing is by `<theme>/<story-id>.png`. A file that exists on one side only (a
-story added on the feature branch, renamed, retitled, or one whose capture
-failed) has nothing to compare against. It is not skipped: the side that has the
-shot is written out, captioned `missing previous` or `missing current`, and every
-one of its pixels counts as changed, so it sorts to the top of the report and is
-printed with that note. In the parallel modes the run that does not have it gets
-a placeholder tile saying so, in the theme's own colours, so the montage keeps
-its three tiles. Without this a whole component going missing reads as a clean
-run.
-
-## 4. Surveying where a component is used
-
-A different question from a diff: not *what moved*, but *where does this
-component appear and what does each instance look like*. One run answers it.
-
-```bash
-node scripts/story-shots.mjs .story-shots/button-group --port 6007 --theme dark,light \
-  --highlight '.ant-btn-group, div[role="group"][class*="button-group"]' \
-  --crop '.ant-btn-group, div[role="group"][class*="button-group"]' \
-  --stories pages-home--default,pages-alerts-history--default,...
-```
-
-Four things come out, per theme:
-
- `<theme>/<id>.png` — the page as it is.
- `<theme>/<id>--highlight.png` — the same page with every instance ringed in
-  red. This is what says *where on the page*, which a crop cannot.
- `<theme>/crops/<id>--<n>.png` — each instance on its own.
- `<theme>/crops.png` — every crop of that theme in one labelled contact sheet.
-
-The sheet is the useful artifact. Twelve instances across nine pages is one
-image to read, not twelve files to open in turn, and the label under each says
-which story it came from.
-
-### Finding the selector and the stories
-
-1. **Grep the source for the import, not the tag.** `Button.Group` and
-   `ButtonGroup` are two different components in this repo: antd's, and
-   `@signozhq/ui/button`'s. A survey that greps one misses the other.
-2. **Read the rendered markup, not the JSX.** `--crop` takes a CSS selector
-   against the DOM. antd's group is `.ant-btn-group`; the design-system one is a
-   `div[role="group"]` whose class is a hashed CSS module, hence
-   `[class*="button-group"]`. Open the built component under
-   `node_modules/@signozhq/ui/dist/` when the class is not obvious.
-3. **Map each source file to the story that renders it.** Follow the consumers:
-   a container renders inside a page, and the page's story is the one to shoot.
-   A component behind a drawer or a tab needs the story whose `args` open it
-   (`--args drawer:endpoint-stats`), not the page default.
-4. **Let the run itself confirm the mapping.** Each story logs `N cropped`. A
-   `0 cropped` line means that story never reaches the state, so swap the story
-   rather than the selector.
-
-### What a zero means
-
- **`0 cropped` on a story** — the component is not on that page in that state.
-  Wrong story, or the state is behind an interaction the story has no `play`
-  for. A modal nobody opens cannot be surveyed; say so instead of shooting the
-  page it sits behind.
- **An instance in the source with no crop** — a container whose children are
-  all conditional renders as a 0x0 box. Both `--crop` and `--highlight` skip
-  anything under 1px, since there is nothing on screen to ring. That is a
-  finding about the component, not a failure of the run: it is in the tree and
-  invisible.
-
-A story logged `viewport-sized content, stopped chasing Npx` is shot back at
-`--height` with its own scrollbar, and what is below the fold there is laid out
-but never painted. The crops of such a story are taken at the chased height
-instead, so they are not the black rectangles the page shot would give; the
-`--highlight` shot still shows only what fits the viewport.
+Pairing is by `<theme>/<story-id>.png`, so a story that exists on only one side
+(new on the feature branch, renamed, retitled) has nothing to pair with and is
+skipped silently. On a branch-vs-branch run, compare the two runs' file lists
+before reading the numbers.

 ## What makes a shot reproducible

@@ -361,6 +292,3 @@ for `--ignore` when a region cannot be settled.
 - **Stories behind a hover, drawer or modal** only render what their `play`
  reaches. If a state is missing from the shot, the story needs the `play`, not
  the script.
- **The caption's temporary file is written beside the shot**, not in the system
-  temp directory. `/tmp` is often a different filesystem, and the rename back
-  over the shot then fails with `EXDEV: cross-device link not permitted`.
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -280,3 +280,9 @@ go.mod @therealpandey
 /frontend/src/components/MessagingQueues/ @SigNoz/events-frontend
 /frontend/src/components/MessagingQueueHealthCheck/ @SigNoz/events-frontend
 /frontend/src/hooks/messagingQueue/ @SigNoz/events-frontend
+
+## Storybook
+/frontend/.storybook/ @H4ad
+/frontend/src/storybook/ @H4ad
+/.claude/skills/signoz-page-story/ @H4ad
+/.claude/skills/storybook-visual-diff/ @H4ad
--- a/ee/query-service/app/api/featureFlags.go
+++ b/ee/query-service/app/api/featureFlags.go
@@ -80,15 +80,6 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})

-	aiObservability := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableAIObservability, evalCtx)
-	featureSet = append(featureSet, &licensetypes.Feature{
-		Name:       valuer.NewString(flagger.FeatureEnableAIObservability.String()),
-		Active:     aiObservability,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	})
-
 	metricsReduction := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableMetricsReduction, evalCtx)
 	featureSet = append(featureSet, &licensetypes.Feature{
 		Name:       valuer.NewString(flagger.FeatureEnableMetricsReduction.String()),
--- a/frontend/.storybook/preview.tsx
+++ b/frontend/.storybook/preview.tsx
@@ -1,6 +1,7 @@
 import type { Preview } from '@storybook/react-vite';
 import type { SetupWorker } from 'msw';
 import { setupWorker } from 'msw';
+import { configure } from 'storybook/test';

 import { settleForCapture } from '../src/storybook/visual/settleForCapture';
 import PageDocs from '../src/storybook/docs/PageDocs';
@@ -83,6 +84,10 @@ const translationsReady = i18n.loadNamespaces(
 	),
 );

+// testing-library's 1s default for `findBy*` and `waitFor` is shorter than a
+// popup or a query takes to land on a loaded CI runner.
+configure({ asyncUtilTimeout: 10_000 });
+
 const preview: Preview = {
 	parameters: {
 		layout: 'fullscreen',
--- a/frontend/.storybook/test-runner.ts
+++ b/frontend/.storybook/test-runner.ts
@@ -30,6 +30,8 @@ interface CapturedMessage {
 	text: string;
 }

+const PREPARE_TIMEOUT_MS = 180_000;
+
 const messagesByPage = new WeakMap<Page, CapturedMessage[]>();

 /**
@@ -52,6 +54,15 @@ const config: TestRunnerConfig = {
 	// msw logs every mocked request at `log`; keep it out of the failure dump
 	// unless the job is re-run with debug logging (GitHub sets RUNNER_DEBUG=1).
 	logLevel: process.env.RUNNER_DEBUG === '1' ? 'info' : 'warn',
+	// The runner's default prepare, minus Playwright's 30s navigation timeout: on
+	// a cold dev server the first load compiles the whole preview, which outlasts
+	// it on a shared CI runner.
+	async prepare({ page }): Promise<void> {
+		await page.goto(new URL('iframe.html', process.env.TARGET_URL).toString(), {
+			waitUntil: 'load',
+			timeout: PREPARE_TIMEOUT_MS,
+		});
+	},
 	async preVisit(page): Promise<void> {
 		const existing = messagesByPage.get(page);
 		if (existing) {
--- a/frontend/scripts/story-shots-caption.mjs
+++ b/frontend/scripts/story-shots-caption.mjs
@@ -15,8 +15,6 @@ export const CONFIG_KEYS = [
 	'motion',
 	'settle',
 	'ignore',
-	'highlight',
-	'crop',
 ];

 let tools;
--- a/frontend/scripts/story-shots-diff.mjs
+++ b/frontend/scripts/story-shots-diff.mjs
@@ -1,7 +1,8 @@
 #!/usr/bin/env node
-import { mkdir, readdir, readFile, rm, writeFile } from 'node:fs/promises';
+import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
 import { parseArgs } from 'node:util';
 import path from 'node:path';
+import os from 'node:os';

 import {
 	bodyFont,
@@ -17,8 +18,7 @@ import {

 /**
 * Pairs the PNGs of two story-shots.mjs runs by relative path and reports what
- * moved, per pair, largest first. A shot only one run has is reported too,
- * labelled with the side it is missing from and counted as changed in full.
+ * moved, per pair, largest first.
 *
 * The comparison is Chromatic's: a pixel counts as changed when its YIQ
 * distance from the baseline pixel is over `threshold` of the largest distance
@@ -55,8 +55,7 @@ if (opts.help || !baseDir || !afterDir || !MODES.has(opts.mode)) {
  --tint <#rrggbb>       override the mode's highlight colour
  --no-caption           do not stamp the story and the run settings on top

-Prints "<changed pixels>  <relative path>", largest first; a shot only one run
-has is printed as "(missing previous)" or "(missing current)". Needs ImageMagick.`);
+Prints "<changed pixels>  <relative path>", largest first. Needs ImageMagick.`);
 	process.exit(opts.help ? 0 : 1);
 }

@@ -326,11 +325,6 @@ const shotOf = (run, rel) =>

 const captionOf = (run, rel) => shotOf(run, rel)?.caption ?? 0;

-/** What the shot was shot in, falling back to the directory it sits in. */
-const themeOf = (rel) =>
-	(shotOf(afterRun, rel) ?? shotOf(baseRun, rel))?.theme ??
-	rel.split(path.sep)[0];
-
 /** ImageMagick's inline crop, so a tile shows the shot without its caption. */
 const withoutCaption = (file, { width, height }, top) =>
 	top > 0 ? `${file}[${width}x${height}+0+${top}]` : file;
@@ -375,156 +369,20 @@ const pngs = async (dir, prefix = '') => {
 const results = [];
 await mkdir(outDir, { recursive: true });

-/** The half-built tiles, under the output directory so nothing is left elsewhere. */
-const scratch = Object.fromEntries(
-	['body', 'diff', 'shot', 'missing'].map((name) => [
-		name,
-		path.join(outDir, `.story-shots-${process.pid}-${name}.png`),
-	]),
-);
-
-/** One labelled tile of a parallel montage. */
-const tile = (label, file, background) => [
-	'(',
-	`label:${literal(label)}`,
-	file,
-	'-gravity',
-	'center',
-	'-append',
-	'-bordercolor',
-	background,
-	'-border',
-	'12',
-	')',
-];
-
-/** The tiles side by side under one caption. */
-const montage = ({
-	tiles,
-	width,
-	background,
-	foreground,
-	caption,
-	target,
-	theme,
-}) => {
-	magick([
-		'-background',
-		background,
-		'-fill',
-		foreground,
-		...bodyFont(),
-		'-pointsize',
-		// The tiles end up side by side, so they are read at the montage's width.
-		String(Math.round(pointsize(width * 3) * 0.62)),
-		...tiles.flat(),
-		'-gravity',
-		'north',
-		'+append',
-		caption.length ? scratch.body : target,
-	]);
-	if (caption.length) {
-		stamp({ lines: caption, from: scratch.body, to: target, theme });
-	}
-};
-
-/**
- * A tile standing in for a shot the run does not have, sized like the one it
- * does. The gutter's colours are the theme's own inverted, so they go back the
- * other way here and the tile reads as a shot rather than as a hole.
- */
-const placeholder = (
-	file,
-	{ width, height },
-	text,
-	{ background, foreground },
-) =>
-	magick([
-		'-size',
-		`${width}x${height}`,
-		'-background',
-		foreground,
-		'-fill',
-		background,
-		'-gravity',
-		'center',
-		...bodyFont(),
-		'-pointsize',
-		String(pointsize(width * 3)),
-		`label:${literal(text)}`,
-		file,
-	]);
-
-const [baseFiles, afterFiles] = await Promise.all([
-	pngs(baseDir),
-	pngs(afterDir),
-]);
-const inBase = new Set(baseFiles);
-const inAfter = new Set(afterFiles);
-
-for (const rel of [...new Set([...baseFiles, ...afterFiles])].sort((a, b) =>
-	a.localeCompare(b),
-)) {
+for (const rel of (await pngs(baseDir)).sort()) {
 	const afterFile = path.join(afterDir, rel);
-	const target = path.join(outDir, rel);
-	await mkdir(path.join(outDir, path.dirname(rel)), { recursive: true });
-
-	// A story added, removed or renamed since the baseline has nothing to
-	// compare against, so the side that does have it is written out under the
-	// label of the side that does not, and every one of its pixels counts.
-	if (!inBase.has(rel) || !inAfter.has(rel)) {
-		const gone = inAfter.has(rel) ? 'previous' : 'current';
-		const held = gone === 'previous' ? 'current' : 'previous';
-		const run = gone === 'previous' ? afterRun : baseRun;
-		const image = readRgba(
-			gone === 'previous' ? afterFile : path.join(baseDir, rel),
-			captionOf(run, rel),
-		);
-		const theme = themeOf(rel);
-		const colors = palette(theme);
-		const caption = captionLines(rel, [`missing ${gone}`]);
-
-		if (opts.mode.endsWith('-parallel')) {
-			// The montage keeps its three tiles: the run that has the shot shows it,
-			// and the run that does not, like the diff, says so in its place. There
-			// is nothing to compare, so nothing is tinted.
-			await writeRgba(image, scratch.shot);
-			placeholder(scratch.missing, image, `missing ${gone}`, colors);
-
-			const sides = {
-				[held]: tile(sideLabel(held, run), scratch.shot, colors.background),
-				[gone]: tile(
-					sideLabel(gone, gone === 'previous' ? baseRun : afterRun),
-					scratch.missing,
-					colors.background,
-				),
-			};
-			montage({
-				tiles: [
-					sides.previous,
-					sides.current,
-					tile('diff', scratch.missing, colors.background),
-				],
-				width: image.width,
-				...colors,
-				caption,
-				target,
-				theme,
-			});
-		} else {
-			await writeRgba(image, caption.length ? scratch.body : target);
-			if (caption.length) {
-				stamp({ lines: caption, from: scratch.body, to: target, theme });
-			}
-		}
-
-		results.push([image.width * image.height, rel, `missing ${gone}`]);
+	const base = readRgba(path.join(baseDir, rel), captionOf(baseRun, rel));
+	let after;
+	try {
+		after = readRgba(afterFile, captionOf(afterRun, rel));
+	} catch {
+		console.error(`missing in after: ${rel}`);
 		continue;
 	}

-	const base = readRgba(path.join(baseDir, rel), captionOf(baseRun, rel));
-	const after = readRgba(afterFile, captionOf(afterRun, rel));
+	await mkdir(path.join(outDir, path.dirname(rel)), { recursive: true });
 	const diff = diffPair(base, after, opts.mode);
+	const target = path.join(outDir, rel);
 	const parallel = opts.mode.endsWith('-parallel');
 	// With no tiles to label, a run's own settings go in the caption instead.
 	const caption = captionLines(
@@ -533,54 +391,70 @@ for (const rel of [...new Set([...baseFiles, ...afterFiles])].sort((a, b) =>
 			? []
 			: [sideLabel('previous', baseRun), sideLabel('current', afterRun)],
 	);
+	const diffFile = path.join(os.tmpdir(), `story-shots-${process.pid}.png`);
+	const body = path.join(os.tmpdir(), `story-shots-${process.pid}-body.png`);

 	// The gutter is the opposite of the theme's own background, so the tiles and
 	// the caption keep an edge instead of bleeding into it.
-	const theme = themeOf(rel);
+	const shot = shotOf(afterRun, rel) ?? shotOf(baseRun, rel);
+	const theme = shot?.theme ?? rel.split(path.sep)[0];
 	const { background, foreground } = palette(theme);

 	if (parallel) {
-		await writeRgba(diff, scratch.diff);
-		montage({
-			tiles: [
-				tile(
-					sideLabel('previous', baseRun),
-					withoutCaption(path.join(baseDir, rel), base, captionOf(baseRun, rel)),
-					background,
-				),
-				tile(
-					sideLabel('current', afterRun),
-					withoutCaption(afterFile, after, captionOf(afterRun, rel)),
-					background,
-				),
-				tile('diff', scratch.diff, background),
-			],
-			width: after.width,
+		await writeRgba(diff, diffFile);
+		const tile = (label, file) => [
+			'(',
+			`label:${literal(label)}`,
+			file,
+			'-gravity',
+			'center',
+			'-append',
+			'-bordercolor',
 			background,
+			'-border',
+			'12',
+			')',
+		];
+		magick([
+			'-background',
+			background,
+			'-fill',
 			foreground,
-			caption,
-			target,
-			theme,
-		});
-	} else {
-		await writeRgba(diff, caption.length ? scratch.body : target);
+			...bodyFont(),
+			'-pointsize',
+			// The tiles end up side by side, so they are read at the montage's width.
+			String(Math.round(pointsize(after.width * 3) * 0.62)),
+			...tile(
+				sideLabel('previous', baseRun),
+				withoutCaption(path.join(baseDir, rel), base, captionOf(baseRun, rel)),
+			),
+			...tile(
+				sideLabel('current', afterRun),
+				withoutCaption(afterFile, after, captionOf(afterRun, rel)),
+			),
+			...tile('diff', diffFile),
+			'-gravity',
+			'north',
+			'+append',
+			caption.length ? body : target,
+		]);
 		if (caption.length) {
-			stamp({ lines: caption, from: scratch.body, to: target, theme });
+			stamp({ lines: caption, from: body, to: target, theme });
+		}
+	} else {
+		await writeRgba(diff, caption.length ? body : target);
+		if (caption.length) {
+			stamp({ lines: caption, from: body, to: target, theme });
 		}
 	}

 	results.push([diff.changed, rel]);
 }

-await Promise.all(
-	Object.values(scratch).map((file) => rm(file, { force: true })),
-);
-
 results
 	.sort((a, b) => b[0] - a[0])
-	.forEach(([changed, rel, note]) => {
-		const suffix = note ? `  (${note})` : '';
-		console.log(`${String(changed).padStart(10)}  ${rel}${suffix}`);
-	});
+	.forEach(([changed, rel]) =>
+		console.log(`${String(changed).padStart(10)}  ${rel}`),
+	);

 console.error(`diffs in ${outDir}`);
--- a/frontend/scripts/story-shots.mjs
+++ b/frontend/scripts/story-shots.mjs
@@ -1,19 +1,15 @@
 #!/usr/bin/env node
 import { spawnSync } from 'node:child_process';
-import { renameSync, rmSync } from 'node:fs';
-import { mkdir, writeFile } from 'node:fs/promises';
+import { mkdir, rename, writeFile } from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import { parseArgs } from 'node:util';
 import { pathToFileURL } from 'node:url';
 import path from 'node:path';
+import os from 'node:os';

 import {
-	bodyFont,
 	CONFIG_KEYS,
 	hasMagick,
-	literal,
-	magick,
-	palette,
 	settingsLine,
 	stamp,
 } from './story-shots-caption.mjs';
@@ -43,8 +39,6 @@ const { values: opts, positionals } = parseArgs({
 		clock: { type: 'string', default: FROZEN_CLOCK },
 		motion: { type: 'boolean', default: false },
 		ignore: { type: 'string', multiple: true, default: [] },
-		highlight: { type: 'string', multiple: true, default: [] },
-		crop: { type: 'string', multiple: true, default: [] },
 		flat: { type: 'boolean', default: false },
 		'no-caption': { type: 'boolean', default: false },
 		list: { type: 'boolean', default: false },
@@ -78,10 +72,6 @@ if (opts.help || (!outDir && !opts.list)) {
  --clock <iso|live>  wall clock the page reads (default ${FROZEN_CLOCK})
  --motion            keep animations and transitions running
  --ignore <selector> hide matching elements, on top of [data-shot-ignore]
-  --highlight <selector>
-                      also shoot <id>--highlight.png, every match ringed in red
-  --crop <selector>   also write one <id>--<n>.png per match under <theme>/crops,
-                      and montage them into <theme>/crops.png
  --flat              write <out>/<id>.png instead of <out>/<theme>/<id>.png
  --no-caption        do not stamp the story and the run settings on the shot
  --list              print the matched stories and exit
@@ -145,17 +135,10 @@ if (!stories.length) {
 	process.exit(1);
 }

-/** A repeatable, comma-separated flag read as one CSS selector list. */
-const selectorList = (values) =>
-	values
-		.flatMap((value) => value.split(','))
-		.map((value) => value.trim())
-		.filter(Boolean)
-		.join(', ');
-
-const ignoreSelectors = selectorList(opts.ignore);
-const highlightSelector = selectorList(opts.highlight);
-const cropSelector = selectorList(opts.crop);
+const ignoreSelectors = opts.ignore
+	.flatMap((value) => value.split(','))
+	.map((value) => value.trim())
+	.filter(Boolean);

 if (opts.clock !== 'live' && Number.isNaN(Date.parse(opts.clock))) {
 	console.error(`--clock: not a date: ${opts.clock}`);
@@ -169,12 +152,13 @@ if (opts.clock !== 'live' && Number.isNaN(Date.parse(opts.clock))) {
 * their bottom - is done by the preview itself, so a Chromatic build and a shot
 * from here see the same page.
 */
-const ignoreCss = (ignore) => {
-	const extra = ignore ? `, ${ignore}` : '';
-	return `[data-shot-ignore], [data-chromatic='ignore']${extra} {
+const ignoreCss = (
+	ignore,
+) => `[data-shot-ignore], [data-chromatic='ignore']${ignore
+	.map((selector) => `, ${selector}`)
+	.join('')} {
 	visibility: hidden !important;
 }`;
-};

 /**
 * Playwright is not a frontend dependency: it lives in `tests/e2e`, or globally,
@@ -264,9 +248,7 @@ const runConfig = {
 	grow: opts.grow,
 	motion: opts.motion ? 'live' : 'still',
 	settle: opts.settle,
-	ignore: ignoreSelectors,
-	highlight: highlightSelector,
-	crop: cropSelector,
+	ignore: ignoreSelectors.join(', '),
 };

 const captioning = !opts['no-caption'] && hasMagick();
@@ -279,8 +261,6 @@ const configLine = settingsLine(runConfig, CONFIG_KEYS);

 for (const theme of themes.length ? themes : [null]) {
 	const dir = opts.flat ? outDir : path.join(outDir, theme ?? 'default');
-	const cropDir = path.join(dir, 'crops');
-	const crops = [];
 	await mkdir(dir, { recursive: true });
 	if (theme) {
 		console.log(`\n[${theme}]`);
@@ -315,9 +295,6 @@ for (const theme of themes.length ? themes : [null]) {
 		// the viewport, kept only to flag the story in the log.
 		let chasing = 0;

-		// What the story's line in the log says beyond ok/busy.
-		const notes = [];
-
 		const url = new URL(`${base}/iframe.html`);
 		url.searchParams.set('viewMode', 'story');
 		url.searchParams.set('id', story.id);
@@ -470,160 +447,47 @@ for (const theme of themes.length ? themes : [null]) {
 				shot = next;
 			}

-			/**
-			 * The band goes on the shot itself so a single screenshot says what it
-			 * is, and its height is returned so a diff can take it back off. The
-			 * temporary is written beside the shot rather than in the system temp
-			 * directory: those are often separate filesystems, and a rename across
-			 * one fails with EXDEV.
-			 */
-			const caption = (target, lines) => {
-				if (!captioning) {
-					return 0;
-				}
+			const file = path.join(dir, `${story.id}.png`);
+			await writeFile(file, shot);

+			// The band goes on the shot itself so a single screenshot says what it
+			// is, and its height is recorded so a diff can take it back off.
+			let caption = 0;
+			if (captioning) {
 				const temporary = path.join(
-					path.dirname(target),
-					`.caption-${process.pid}.png`,
+					os.tmpdir(),
+					`story-shots-caption-${process.pid}.png`,
 				);
-				const rows = stamp({
+				caption = stamp({
 					lines: [
 						`${story.title}/${story.name}`,
 						[story.id, theme ?? 'default', stable ? '' : '(busy)']
 							.filter(Boolean)
 							.join('  '),
-						...lines,
+						configLine,
 					].filter(Boolean),
-					from: target,
+					from: file,
 					to: temporary,
 					theme: theme ?? 'dark',
 				});
-				renameSync(temporary, target);
-				return rows;
-			};
-
-			const file = path.join(dir, `${story.id}.png`);
-			await writeFile(file, shot);
-
-			const record = (relative, caption) =>
-				shots.push({
-					file: path.posix.join(opts.flat ? '' : (theme ?? 'default'), relative),
-					id: story.id,
-					title: story.title,
-					name: story.name,
-					theme: theme ?? 'default',
-					status: stable ? 'ok' : 'busy',
-					caption,
-				});
-
-			record(`${story.id}.png`, caption(file, [configLine]));
-
-			// The crops are taken before anything is drawn over the page, so a
-			// component's own shot carries no ring and no label: the montage at the
-			// end of the theme is what names them.
-			if (cropSelector) {
-				await mkdir(cropDir, { recursive: true });
-
-				// A page that sizes itself in `vh` was shot back at `--height` with
-				// its own scrollbar, and what is below the fold there is laid out but
-				// never painted: cropping it gives a black rectangle. The crops alone
-				// are taken at the height the rounds had reached, which is where the
-				// page does paint.
-				if (chasing) {
-					await page.setViewportSize({
-						width: Number(opts.width),
-						height: chasing,
-					});
-					await page.waitForTimeout(Number(opts.settle));
-				}
-
-				const matches = page.locator(cropSelector);
-				let kept = 0;
-				for (let index = 0; index < (await matches.count()); index += 1) {
-					const element = matches.nth(index);
-					// A group whose children are all conditional renders as a 0x0 box.
-					// It has no counterpart on screen, so there is nothing to crop.
-					const box = await element.boundingBox();
-					if (!box || box.width < 1 || box.height < 1) {
-						continue;
-					}
-
-					kept += 1;
-					const relative = `${story.id}--${kept}.png`;
-					// The scroll that brings an element into view needs a frame before
-					// the crop, or the region comes back unpainted.
-					await element.scrollIntoViewIfNeeded({ timeout: 15_000 });
-					await page.waitForTimeout(250);
-					await element.screenshot({
-						path: path.join(cropDir, relative),
-						timeout: 15_000,
-					});
-					crops.push({
-						file: path.join(cropDir, relative),
-						label: `${story.title}/${story.name}  #${kept}`,
-					});
-					record(path.posix.join('crops', relative), 0);
-				}
-				notes.push(`${kept} cropped`);
-
-				if (chasing) {
-					await page.setViewportSize({
-						width: Number(opts.width),
-						height: Number(opts.height),
-					});
-					await page.waitForTimeout(Number(opts.settle));
-				}
+				await rename(temporary, file);
 			}

-			if (highlightSelector) {
-				const ringed = await page.evaluate(
-					([selector, padding]) => {
-						const layer = document.createElement('div');
-						// The shot is viewport-sized, so the rings are placed in viewport
-						// coordinates and survive a page that stayed scrollable.
-						layer.style.cssText =
-							'position:fixed;inset:0;pointer-events:none;z-index:2147483647';
-						let drawn = 0;
-						for (const element of document.querySelectorAll(selector)) {
-							const box = element.getBoundingClientRect();
-							if (box.width < 1 || box.height < 1) {
-								continue;
-							}
-
-							drawn += 1;
-							const ring = document.createElement('div');
-							ring.style.cssText = `position:fixed;box-sizing:border-box;border:3px solid #ff003a;border-radius:4px;left:${
-								box.left - padding
-							}px;top:${box.top - padding}px;width:${
-								box.width + padding * 2
-							}px;height:${box.height + padding * 2}px`;
-							layer.append(ring);
-						}
-						document.documentElement.append(layer);
-						window.__storyShotsHighlight = layer;
-						return drawn;
-					},
-					[highlightSelector, 6],
-				);
-
-				const highlighted = path.join(dir, `${story.id}--highlight.png`);
-				await writeFile(highlighted, await page.screenshot());
-				record(
-					`${story.id}--highlight.png`,
-					caption(highlighted, [`${ringed} highlighted`, configLine]),
-				);
-				notes.push(`${ringed} highlighted`);
-				await page.evaluate(() => {
-					window.__storyShotsHighlight?.remove();
-					delete window.__storyShotsHighlight;
-				});
-			}
-			if (chasing) {
-				notes.push(`viewport-sized content, stopped chasing ${chasing}px`);
-			}
+			shots.push({
+				file: path.posix.join(
+					opts.flat ? '' : (theme ?? 'default'),
+					`${story.id}.png`,
+				),
+				id: story.id,
+				title: story.title,
+				name: story.name,
+				theme: theme ?? 'default',
+				status: stable ? 'ok' : 'busy',
+				caption,
+			});
 			console.log(
 				`  ${stable ? 'ok  ' : 'busy'} ${story.id}${
-					notes.length ? ` (${notes.join(', ')})` : ''
+					chasing ? ` (viewport-sized content, stopped chasing ${chasing}px)` : ''
 				}`,
 			);
 		} catch (error) {
@@ -633,52 +497,6 @@ for (const theme of themes.length ? themes : [null]) {
 			await context.close();
 		}
 	}
-
-	// One image of every crop the theme produced, labelled with the story it came
-	// from. A component that appears on eight pages is a survey rather than eight
-	// screenshots to open one after another.
-	if (crops.length && captioning) {
-		const sheet = path.join(dir, 'crops.png');
-		const { background, foreground } = palette(theme ?? 'dark');
-
-		// `montage -label` sizes every tile to the widest *image*, so a label
-		// longer than its crop runs under the next one. Each crop is composed with
-		// its own label first, which sizes the tile to whichever of the two is
-		// wider, and the sheet is then a montage of finished tiles.
-		const tiles = crops.map(({ file, label }, index) => {
-			const tile = path.join(cropDir, `.tile-${index}.png`);
-			magick([
-				'-background',
-				background,
-				'-fill',
-				foreground,
-				...bodyFont(),
-				'-pointsize',
-				'16',
-				file,
-				`label:${literal(label)}`,
-				'-gravity',
-				'center',
-				'-append',
-				tile,
-			]);
-			return tile;
-		});
-
-		magick([
-			'montage',
-			'-background',
-			background,
-			'-tile',
-			'2x',
-			'-geometry',
-			'+16+16',
-			...tiles,
-			sheet,
-		]);
-		tiles.forEach((tile) => rmSync(tile, { force: true }));
-		console.log(`  ${crops.length} crops -> ${sheet}`);
-	}
 }

 await browser.close();
--- a/frontend/src/AppRoutes/Private.tsx
+++ b/frontend/src/AppRoutes/Private.tsx
@@ -8,7 +8,6 @@ import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useIsAIObservabilityEnabled } from 'hooks/useIsAIObservabilityEnabled';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
@@ -44,7 +43,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {

 	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
-	const isAIObservabilityEnabled = useIsAIObservabilityEnabled();
 	const mapRoutes = useMemo(
 		() =>
 			new Map(
@@ -135,14 +133,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		return <Redirect to={ROUTES.HOME} />;
 	}

-	if (
-		(pathname.startsWith(`${ROUTES.AI_OBSERVABILITY_BASE}/`) ||
-			pathname === ROUTES.AI_OBSERVABILITY_BASE) &&
-		!isAIObservabilityEnabled
-	) {
-		return <Redirect to={ROUTES.HOME} />;
-	}
-
 	// Check for workspace access restriction (cloud only)
 	const isCloudPlatform = activeLicense?.platform === LicensePlatform.CLOUD;

--- a/frontend/src/assets/Logos/anthropic-api-monitoring.svg
+++ b/frontend/src/assets/Logos/anthropic-api-monitoring.svg
@@ -1,6 +1,6 @@
 <svg version="1.1" id="Layer_1" xmlns:x="ns_extend;" xmlns:i="ns_ai;" xmlns:graph="ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92.2 65" style="enable-background:new 0 0 92.2 65;" xml:space="preserve">
 <style type="text/css">
-  .st0{fill:#FFFFFF;}
+  .st0{fill:#7A8291;}
 </style>
 <metadata>
  <sfw xmlns="ns_sfw;">
--- a/frontend/src/assets/Logos/antigravity.svg
+++ b/frontend/src/assets/Logos/antigravity.svg
@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 16 15" xmlns="http://www.w3.org/2000/svg">
+	<path d="M14.0777 13.984C14.945 14.6345 16.2458 14.2008 15.0533 13.0084C11.476 9.53949 12.2349 0 7.79033 0C3.34579 0 4.10461 9.53949 0.527295 13.0084C-0.773543 14.3092 0.635692 14.6345 1.50293 13.984C4.86344 11.7076 4.64663 7.69664 7.79033 7.69664C10.934 7.69664 10.7172 11.7076 14.0777 13.984Z" fill="#4285F4" />
+</svg>
--- a/frontend/src/assets/Logos/aurora.svg
+++ b/frontend/src/assets/Logos/aurora.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="none" fill-rule="evenodd"><path fill="#c925d1" d="M0 0h64v64H0z"/><path fill="#fff" d="M36.213 16.011h-2.016v-2.005h2.016V12h2.017v2.006h2.016v2.005H38.23v2.006h-2.017zm9.074 8.023h-2.016v-2.006h2.016v-2.005h2.016v2.005h2.017v2.006h-2.017v2.006h-2.016v-2.006m-3.434 22.64c-1.495-3.292-4.482-6.263-7.792-7.75 3.31-1.487 6.297-4.459 7.792-7.75 1.494 3.291 4.482 6.263 7.791 7.75-3.31 1.487-6.297 4.458-7.79 7.75m12.139-8.753c-5.202 0-11.13-5.898-11.13-11.071 0-.555-.452-1.003-1.009-1.003s-1.008.448-1.008 1.003c0 5.173-5.93 11.071-11.13 11.071-.558 0-1.009.448-1.009 1.003s.45 1.003 1.008 1.003c5.202 0 11.13 5.898 11.13 11.07 0 .554.452 1.003 1.01 1.003.556 0 1.007-.45 1.007-1.003 0-5.172 5.93-11.07 11.13-11.07.558 0 1.009-.45 1.009-1.003 0-.555-.45-1.003-1.008-1.003m-31.39-19.904c6.85 0 10.587 1.988 10.587 3.008s-3.737 3.009-10.586 3.009-10.587-1.988-10.587-3.009 3.737-3.008 10.587-3.008m-.35 15.15c-5.012 0-8.62-1.063-10.236-2.19v-7.113c2.367 1.433 6.487 2.176 10.587 2.176s8.22-.743 10.586-2.176v6.484c-1.016 1.406-5.247 2.819-10.936 2.819M33.19 45.975c0 1.435-4.126 3.52-10.59 3.52-6.46 0-10.583-2.085-10.583-3.52v-4.407c2.258 1.354 6.014 2.192 10.276 2.192 2.942 0 5.786-.413 8.01-1.166l-.651-1.898c-2.019.682-4.633 1.058-7.359 1.058-5.39 0-9.252-1.402-10.276-2.76v-5.707c2.411 1.176 6.113 1.885 10.237 1.885 3.92 0 8.34-.725 10.936-2.269v2.162h2.016v-14.04c0-3.292-6.34-5.014-12.602-5.014S10 17.733 10 21.025v24.95c0 3.59 6.49 5.526 12.598 5.526 6.112 0 12.607-1.937 12.607-5.526v-2.887h-2.016z"/></g></svg>
--- a/frontend/src/assets/Logos/clickhouse.svg
+++ b/frontend/src/assets/Logos/clickhouse.svg
@@ -1,6 +1,6 @@
 <svg version="1.1" id="Layer_1" xmlns:x="ns_extend;" xmlns:i="ns_ai;" xmlns:graph="ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50.6 50.6" style="enable-background:new 0 0 50.6 50.6;" xml:space="preserve">
 <style type="text/css">
-  .st0{fill:#FFFFFF;}
+  .st0{fill:#7A8291;}
 </style>
 <metadata>
  <sfw xmlns="ns_sfw;">
--- a/frontend/src/assets/Logos/cline.svg
+++ b/frontend/src/assets/Logos/cline.svg
@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<path d="m23.365 13.556-1.442-2.895V8.994c0-2.764-2.218-5.002-4.954-5.002h-2.464c.178-.367.276-.779.276-1.213A2.77 2.77 0 0 0 12.018 0a2.77 2.77 0 0 0-2.763 2.779c0 .434.098.846.276 1.213H7.067c-2.736 0-4.954 2.238-4.954 5.002v1.667L.64 13.549c-.149.29-.149.636 0 .927l1.472 2.855v1.667C2.113 21.762 4.33 24 7.067 24h9.902c2.736 0 4.954-2.238 4.954-5.002V17.33l1.44-2.865c.143-.286.143-.622.002-.91m-12.854 2.36a2.27 2.27 0 0 1-2.261 2.273 2.27 2.27 0 0 1-2.261-2.273v-4.042A2.27 2.27 0 0 1 8.249 9.6a2.267 2.267 0 0 1 2.262 2.274zm7.285 0a2.27 2.27 0 0 1-2.26 2.273 2.27 2.27 0 0 1-2.262-2.273v-4.042A2.267 2.267 0 0 1 15.535 9.6a2.267 2.267 0 0 1 2.261 2.274z" fill="#7A8291" />
+</svg>
--- a/frontend/src/assets/Logos/confluent-kafka.svg
+++ b/frontend/src/assets/Logos/confluent-kafka.svg
@@ -1,6 +1,6 @@
 <svg version="1.1" id="Layer_1" xmlns:x="ns_extend;" xmlns:i="ns_ai;" xmlns:graph="ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 43 43" style="enable-background:new 0 0 43 43;" xml:space="preserve">
 <style type="text/css">
-  .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+  .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#0074A2;}
 </style>
 <metadata>
  <sfw xmlns="ns_sfw;">
--- a/frontend/src/assets/Logos/cursor.svg
+++ b/frontend/src/assets/Logos/cursor.svg
@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<path d="M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23" fill="#7A8291" />
+</svg>
--- a/frontend/src/assets/Logos/datadog.svg
+++ b/frontend/src/assets/Logos/datadog.svg
@@ -3,7 +3,7 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 800.5 907.77" style="enable-background:new 0 0 800.5 907.77;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#FFFFFF;}
+	.st0{fill:#8B5CC7;}
 </style>
 <path class="st0" d="M303.36,238.61c31.36-21.37,71.76-12.97,65-6.53c-12.89,12.28,4.26,8.65,6.11,31.31
 	c1.36,16.69-4.09,25.88-8.78,31.11c-9.79,1.28-21.69,3.67-36.02,8.33c-8.48,2.76-15.85,5.82-22.31,8.9
--- a/frontend/src/assets/Logos/daytona.svg
+++ b/frontend/src/assets/Logos/daytona.svg
@@ -0,0 +1,10 @@
+<svg role="img" viewBox="0 0 275 287" xmlns="http://www.w3.org/2000/svg">
+	<path d="M14.5584 193.736H114.275V227.925H14.5584V193.736Z" fill="#7A8291" />
+	<path d="M148.464 74.076H262.426V108.265H148.464V74.076Z" fill="#7A8291" />
+	<path d="M88.6338 84.6127L173.246 0L197.422 24.175L112.809 108.788L88.6338 84.6127Z" fill="#7A8291" />
+	<path d="M89.157 170.084L24.175 105.102L0 129.277L64.9819 194.259L89.157 170.084Z" fill="#7A8291" />
+	<path d="M174.629 217.911L106.133 286.407L81.9577 262.232L150.454 193.736L174.629 217.911Z" fill="#7A8291" />
+	<path d="M174.106 132.44L250.66 208.994L274.835 184.819L198.281 108.265L174.106 132.44Z" fill="#7A8291" />
+	<path d="M88.6338 48.434V131.057H54.4451L54.4451 48.434H88.6338Z" fill="#7A8291" />
+	<path d="M208.294 168.094V270.66H174.106V168.094H208.294Z" fill="#7A8291" />
+</svg>
--- a/frontend/src/assets/Logos/deno.svg
+++ b/frontend/src/assets/Logos/deno.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Deno</title><path d="M1.105 18.02A11.9 11.9 0 0 1 0 12.985q0-.698.078-1.376a12 12 0 0 1 .231-1.34A12 12 0 0 1 4.025 4.02a12 12 0 0 1 5.46-2.771 12 12 0 0 1 3.428-.23c1.452.112 2.825.477 4.077 1.05a12 12 0 0 1 2.78 1.774 12.02 12.02 0 0 1 4.053 7.078A12 12 0 0 1 24 12.985q0 .454-.036.914a12 12 0 0 1-.728 3.305 12 12 0 0 1-2.38 3.875c-1.33 1.357-3.02 1.962-4.43 1.936a4.4 4.4 0 0 1-2.724-1.024c-.99-.853-1.391-1.83-1.53-2.919a5 5 0 0 1 .128-1.518c.105-.38.37-1.116.76-1.437-.455-.197-1.04-.624-1.226-.829-.045-.05-.04-.13 0-.183a.155.155 0 0 1 .177-.053c.392.134.869.267 1.372.35.66.111 1.484.25 2.317.292 2.03.1 4.153-.813 4.812-2.627s.403-3.609-1.96-4.685-3.454-2.356-5.363-3.128c-1.247-.505-2.636-.205-4.06.582-3.838 2.121-7.277 8.822-5.69 15.032a.191.191 0 0 1-.315.19 12 12 0 0 1-1.25-1.634 12 12 0 0 1-.769-1.404M11.57 6.087c.649-.051 1.214.501 1.31 1.236.13.979-.228 1.99-1.41 2.013-1.01.02-1.315-.997-1.248-1.614.066-.616.574-1.575 1.35-1.635"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="#7A8291" viewBox="0 0 24 24"><title>Deno</title><path d="M1.105 18.02A11.9 11.9 0 0 1 0 12.985q0-.698.078-1.376a12 12 0 0 1 .231-1.34A12 12 0 0 1 4.025 4.02a12 12 0 0 1 5.46-2.771 12 12 0 0 1 3.428-.23c1.452.112 2.825.477 4.077 1.05a12 12 0 0 1 2.78 1.774 12.02 12.02 0 0 1 4.053 7.078A12 12 0 0 1 24 12.985q0 .454-.036.914a12 12 0 0 1-.728 3.305 12 12 0 0 1-2.38 3.875c-1.33 1.357-3.02 1.962-4.43 1.936a4.4 4.4 0 0 1-2.724-1.024c-.99-.853-1.391-1.83-1.53-2.919a5 5 0 0 1 .128-1.518c.105-.38.37-1.116.76-1.437-.455-.197-1.04-.624-1.226-.829-.045-.05-.04-.13 0-.183a.155.155 0 0 1 .177-.053c.392.134.869.267 1.372.35.66.111 1.484.25 2.317.292 2.03.1 4.153-.813 4.812-2.627s.403-3.609-1.96-4.685-3.454-2.356-5.363-3.128c-1.247-.505-2.636-.205-4.06.582-3.838 2.121-7.277 8.822-5.69 15.032a.191.191 0 0 1-.315.19 12 12 0 0 1-1.25-1.634 12 12 0 0 1-.769-1.404M11.57 6.087c.649-.051 1.214.501 1.31 1.236.13.979-.228 1.99-1.41 2.013-1.01.02-1.315-.997-1.248-1.614.066-.616.574-1.575 1.35-1.635"/></svg>
--- a/frontend/src/assets/Logos/document-load.svg
+++ b/frontend/src/assets/Logos/document-load.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="#FFF" viewBox="0 0 50 50"><path d="M7 2v46h36V14.594l-.281-.313-12-12L30.406 2Zm2 2h20v12h12v30H9Zm22 1.438L39.563 14H31ZM15 22v2h20v-2Zm0 6v2h16v-2Zm0 6v2h20v-2Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="#7A8291" viewBox="0 0 50 50"><path d="M7 2v46h36V14.594l-.281-.313-12-12L30.406 2Zm2 2h20v12h12v30H9Zm22 1.438L39.563 14H31ZM15 22v2h20v-2Zm0 6v2h16v-2Zm0 6v2h20v-2Z"/></svg>
--- a/frontend/src/assets/Logos/e2b.svg
+++ b/frontend/src/assets/Logos/e2b.svg
@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<path d="M9 6h10v12H9a4 4 0 0 1-4-4v-4a4 4 0 0 1 4-4zm1.2 4.6h8.8v.9h-8.8zm0 3.6h8.8v.9h-8.8z" fill="#7A8291" fill-rule="evenodd" />
+</svg>
--- a/frontend/src/assets/Logos/emqx.svg
+++ b/frontend/src/assets/Logos/emqx.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<path d="M6.5 5.5h13a1.5 1.5 0 0 1 0 3h-13a1.5 1.5 0 0 1 0-3z" fill="#00B173" />
+	<path d="M4 10.5h10a1.5 1.5 0 0 1 0 3H4a1.5 1.5 0 0 1 0-3z" fill="#00B173" />
+	<path d="M6.5 15.5h13a1.5 1.5 0 0 1 0 3h-13a1.5 1.5 0 0 1 0-3z" fill="#00B173" />
+</svg>
--- a/frontend/src/assets/Logos/from-log-file.svg
+++ b/frontend/src/assets/Logos/from-log-file.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 115.28 122.88"><path d="M25.38 57h64.88V37.34H69.59c-2.17 0-5.19-1.17-6.62-2.6s-2.3-4.01-2.3-6.17V7.64H8.15c-.18 0-.32.09-.41.18-.15.1-.19.23-.19.42v106.45c0 .14.09.32.18.41.09.14.28.18.41.18h81.51c.18 0 .17-.09.27-.18.14-.09.33-.28.33-.41v-11.16H25.38c-4.14 0-7.56-3.4-7.56-7.56V64.55c0-4.15 3.4-7.55 7.56-7.55m4.11 11.38h7.43v18.15h11.63v5.92H29.49zm20.4 12.05c0-3.93 1.09-6.99 3.28-9.17 2.19-2.19 5.24-3.28 9.15-3.28 4.01 0 7.09 1.08 9.26 3.22 2.17 2.15 3.25 5.16 3.25 9.04 0 2.81-.47 5.11-1.42 6.91q-1.425 2.7-4.11 4.2t-6.69 1.5c-2.71 0-4.96-.43-6.74-1.29-1.78-.87-3.22-2.23-4.32-4.11-1.11-1.87-1.66-4.21-1.66-7.02m7.42.01c0 2.43.45 4.17 1.36 5.23s2.14 1.59 3.7 1.59c1.6 0 2.84-.52 3.71-1.56.88-1.04 1.32-2.9 1.32-5.6 0-2.26-.46-3.92-1.37-4.96-.92-1.05-2.16-1.57-3.73-1.57-1.5 0-2.71.53-3.62 1.59-.91 1.08-1.37 2.83-1.37 5.28m33.11 3.3v-5.01h11.49v10.23c-2.2 1.5-4.15 2.53-5.83 3.07-1.69.54-3.7.81-6.02.81-2.86 0-5.19-.49-6.99-1.46s-3.19-2.42-4.18-4.35c-.99-1.92-1.48-4.13-1.48-6.63 0-2.63.54-4.91 1.62-6.85s2.67-3.41 4.76-4.42c1.63-.78 3.83-1.17 6.58-1.17 2.66 0 4.64.24 5.96.72s2.41 1.23 3.28 2.24 1.52 2.3 1.96 3.85l-7.16 1.29c-.3-.91-.8-1.61-1.5-2.09-.71-.49-1.6-.73-2.7-.73-1.62 0-2.92.57-3.89 1.7s-1.45 2.92-1.45 5.37c0 2.6.49 4.46 1.47 5.57.97 1.11 2.34 1.68 4.09 1.68q1.245 0 2.37-.36c.75-.24 1.61-.65 2.59-1.22v-2.25h-4.97zM97.79 57h9.93c4.16 0 7.56 3.41 7.56 7.56v31.42c0 4.15-3.41 7.56-7.56 7.56h-9.93v13.55c0 1.61-.65 3.04-1.7 4.1a5.74 5.74 0 0 1-4.1 1.7H5.81a5.74 5.74 0 0 1-4.1-1.7 5.74 5.74 0 0 1-1.7-4.1V5.85c0-1.61.65-3.04 1.7-4.1a5.8 5.8 0 0 1 4.1-1.7h58.72c.13-.05.27-.05.41-.05.64 0 1.29.28 1.75.69h.09c.09.05.14.09.23.18L97 31.23c.51.51.88 1.2.88 1.98 0 .23-.05.41-.09.65zM67.52 27.97V8.94l21.43 21.7H70.19c-.74 0-1.38-.32-1.89-.78-.46-.46-.78-1.15-.78-1.89" style="fill:#D1D5DB;fill-rule:evenodd;clip-rule:evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 115.28 122.88"><path d="M25.38 57h64.88V37.34H69.59c-2.17 0-5.19-1.17-6.62-2.6s-2.3-4.01-2.3-6.17V7.64H8.15c-.18 0-.32.09-.41.18-.15.1-.19.23-.19.42v106.45c0 .14.09.32.18.41.09.14.28.18.41.18h81.51c.18 0 .17-.09.27-.18.14-.09.33-.28.33-.41v-11.16H25.38c-4.14 0-7.56-3.4-7.56-7.56V64.55c0-4.15 3.4-7.55 7.56-7.55m4.11 11.38h7.43v18.15h11.63v5.92H29.49zm20.4 12.05c0-3.93 1.09-6.99 3.28-9.17 2.19-2.19 5.24-3.28 9.15-3.28 4.01 0 7.09 1.08 9.26 3.22 2.17 2.15 3.25 5.16 3.25 9.04 0 2.81-.47 5.11-1.42 6.91q-1.425 2.7-4.11 4.2t-6.69 1.5c-2.71 0-4.96-.43-6.74-1.29-1.78-.87-3.22-2.23-4.32-4.11-1.11-1.87-1.66-4.21-1.66-7.02m7.42.01c0 2.43.45 4.17 1.36 5.23s2.14 1.59 3.7 1.59c1.6 0 2.84-.52 3.71-1.56.88-1.04 1.32-2.9 1.32-5.6 0-2.26-.46-3.92-1.37-4.96-.92-1.05-2.16-1.57-3.73-1.57-1.5 0-2.71.53-3.62 1.59-.91 1.08-1.37 2.83-1.37 5.28m33.11 3.3v-5.01h11.49v10.23c-2.2 1.5-4.15 2.53-5.83 3.07-1.69.54-3.7.81-6.02.81-2.86 0-5.19-.49-6.99-1.46s-3.19-2.42-4.18-4.35c-.99-1.92-1.48-4.13-1.48-6.63 0-2.63.54-4.91 1.62-6.85s2.67-3.41 4.76-4.42c1.63-.78 3.83-1.17 6.58-1.17 2.66 0 4.64.24 5.96.72s2.41 1.23 3.28 2.24 1.52 2.3 1.96 3.85l-7.16 1.29c-.3-.91-.8-1.61-1.5-2.09-.71-.49-1.6-.73-2.7-.73-1.62 0-2.92.57-3.89 1.7s-1.45 2.92-1.45 5.37c0 2.6.49 4.46 1.47 5.57.97 1.11 2.34 1.68 4.09 1.68q1.245 0 2.37-.36c.75-.24 1.61-.65 2.59-1.22v-2.25h-4.97zM97.79 57h9.93c4.16 0 7.56 3.41 7.56 7.56v31.42c0 4.15-3.41 7.56-7.56 7.56h-9.93v13.55c0 1.61-.65 3.04-1.7 4.1a5.74 5.74 0 0 1-4.1 1.7H5.81a5.74 5.74 0 0 1-4.1-1.7 5.74 5.74 0 0 1-1.7-4.1V5.85c0-1.61.65-3.04 1.7-4.1a5.8 5.8 0 0 1 4.1-1.7h58.72c.13-.05.27-.05.41-.05.64 0 1.29.28 1.75.69h.09c.09.05.14.09.23.18L97 31.23c.51.51.88 1.2.88 1.98 0 .23-.05.41-.09.65zM67.52 27.97V8.94l21.43 21.7H70.19c-.74 0-1.38-.32-1.89-.78-.46-.46-.78-1.15-.78-1.89" style="fill:#7A8291;fill-rule:evenodd;clip-rule:evenodd"/></svg>
--- a/frontend/src/assets/Logos/haystack.svg
+++ b/frontend/src/assets/Logos/haystack.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Haystack</title><path d="M2.008 0C.9 0 0 .9 0 2.008v19.984C0 23.1.9 24 2.008 24h19.984C23.1 24 24 23.1 24 21.992V2.008C24 .9 23.1 0 21.992 0Zm9.963 3.84c3.43 0 6.21 2.763 6.21 6.17v6.488a.27.27 0 0 1-.27.268 2.423 2.423 0 0 1-2.43-2.414V10.01c0-1.927-1.572-3.488-3.51-3.488S8.547 8.085 8.547 10.01v1.608a.263.263 0 0 0 .259.268h1.54a.27.27 0 0 0 .275-.263V9.945c0-.74.604-1.341 1.35-1.341s1.35.6 1.35 1.341V20.03a.275.275 0 0 1-.28.268 2.41 2.41 0 0 1-2.42-2.404v-3.23a.275.275 0 0 0-.276-.269H8.811a.264.264 0 0 0-.264.263v1.08c0 1.333-1.175 2.414-2.517 2.414a.27.27 0 0 1-.27-.268v-7.872c0-3.408 2.78-6.171 6.21-6.171"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="#0E9A89" viewBox="0 0 24 24"><title>Haystack</title><path d="M2.008 0C.9 0 0 .9 0 2.008v19.984C0 23.1.9 24 2.008 24h19.984C23.1 24 24 23.1 24 21.992V2.008C24 .9 23.1 0 21.992 0Zm9.963 3.84c3.43 0 6.21 2.763 6.21 6.17v6.488a.27.27 0 0 1-.27.268 2.423 2.423 0 0 1-2.43-2.414V10.01c0-1.927-1.572-3.488-3.51-3.488S8.547 8.085 8.547 10.01v1.608a.263.263 0 0 0 .259.268h1.54a.27.27 0 0 0 .275-.263V9.945c0-.74.604-1.341 1.35-1.341s1.35.6 1.35 1.341V20.03a.275.275 0 0 1-.28.268 2.41 2.41 0 0 1-2.42-2.404v-3.23a.275.275 0 0 0-.276-.269H8.811a.264.264 0 0 0-.264.263v1.08c0 1.333-1.175 2.414-2.517 2.414a.27.27 0 0 1-.27-.268v-7.872c0-3.408 2.78-6.171 6.21-6.171"/></svg>
--- a/frontend/src/assets/Logos/kafka.svg
+++ b/frontend/src/assets/Logos/kafka.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="154" height="250" preserveAspectRatio="xMidYMid" viewBox="0 0 256 416"><path d="M201.816 230.216c-16.186 0-30.697 7.171-40.634 18.461l-25.463-18.026c2.703-7.442 4.255-15.433 4.255-23.797 0-8.219-1.498-16.076-4.112-23.408l25.406-17.835c9.936 11.233 24.409 18.365 40.548 18.365 29.875 0 54.184-24.305 54.184-54.184s-24.309-54.184-54.184-54.184-54.184 24.305-54.184 54.184c0 5.348.808 10.505 2.258 15.389l-25.423 17.844c-10.62-13.175-25.911-22.374-43.333-25.182v-30.64c24.544-5.155 43.037-26.962 43.037-53.019C124.171 24.305 99.862 0 69.987 0S15.803 24.305 15.803 54.184c0 25.708 18.014 47.246 42.067 52.769v31.038C25.044 143.753 0 172.401 0 206.854c0 34.621 25.292 63.374 58.355 68.94v32.774c-24.299 5.341-42.552 27.011-42.552 52.894 0 29.879 24.309 54.184 54.184 54.184s54.184-24.305 54.184-54.184c0-25.883-18.253-47.553-42.552-52.894v-32.775a69.97 69.97 0 0 0 42.6-24.776l25.633 18.143c-1.423 4.84-2.22 9.946-2.22 15.24 0 29.879 24.309 54.184 54.184 54.184S256 314.279 256 284.4s-24.309-54.184-54.184-54.184m0-126.695c14.487 0 26.27 11.788 26.27 26.271s-11.783 26.27-26.27 26.27-26.27-11.787-26.27-26.27 11.783-26.271 26.27-26.271m-158.1-49.337c0-14.483 11.784-26.27 26.271-26.27s26.27 11.787 26.27 26.27-11.783 26.27-26.27 26.27-26.271-11.787-26.271-26.27m52.541 307.278c0 14.483-11.783 26.27-26.27 26.27s-26.271-11.787-26.271-26.27 11.784-26.27 26.271-26.27 26.27 11.787 26.27 26.27m-26.272-117.97c-20.205 0-36.642-16.434-36.642-36.638 0-20.205 16.437-36.642 36.642-36.642 20.204 0 36.641 16.437 36.641 36.642 0 20.204-16.437 36.638-36.641 36.638m131.831 67.179c-14.487 0-26.27-11.788-26.27-26.271s11.783-26.27 26.27-26.27 26.27 11.787 26.27 26.27-11.783 26.271-26.27 26.271" style="fill:#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="154" height="250" preserveAspectRatio="xMidYMid" viewBox="0 0 256 416"><path d="M201.816 230.216c-16.186 0-30.697 7.171-40.634 18.461l-25.463-18.026c2.703-7.442 4.255-15.433 4.255-23.797 0-8.219-1.498-16.076-4.112-23.408l25.406-17.835c9.936 11.233 24.409 18.365 40.548 18.365 29.875 0 54.184-24.305 54.184-54.184s-24.309-54.184-54.184-54.184-54.184 24.305-54.184 54.184c0 5.348.808 10.505 2.258 15.389l-25.423 17.844c-10.62-13.175-25.911-22.374-43.333-25.182v-30.64c24.544-5.155 43.037-26.962 43.037-53.019C124.171 24.305 99.862 0 69.987 0S15.803 24.305 15.803 54.184c0 25.708 18.014 47.246 42.067 52.769v31.038C25.044 143.753 0 172.401 0 206.854c0 34.621 25.292 63.374 58.355 68.94v32.774c-24.299 5.341-42.552 27.011-42.552 52.894 0 29.879 24.309 54.184 54.184 54.184s54.184-24.305 54.184-54.184c0-25.883-18.253-47.553-42.552-52.894v-32.775a69.97 69.97 0 0 0 42.6-24.776l25.633 18.143c-1.423 4.84-2.22 9.946-2.22 15.24 0 29.879 24.309 54.184 54.184 54.184S256 314.279 256 284.4s-24.309-54.184-54.184-54.184m0-126.695c14.487 0 26.27 11.788 26.27 26.271s-11.783 26.27-26.27 26.27-26.27-11.787-26.27-26.27 11.783-26.271 26.27-26.271m-158.1-49.337c0-14.483 11.784-26.27 26.271-26.27s26.27 11.787 26.27 26.27-11.783 26.27-26.27 26.27-26.271-11.787-26.271-26.27m52.541 307.278c0 14.483-11.783 26.27-26.27 26.27s-26.271-11.787-26.271-26.27 11.784-26.27 26.271-26.27 26.27 11.787 26.27 26.27m-26.272-117.97c-20.205 0-36.642-16.434-36.642-36.638 0-20.205 16.437-36.642 36.642-36.642 20.204 0 36.641 16.437 36.641 36.642 0 20.204-16.437 36.638-36.641 36.638m131.831 67.179c-14.487 0-26.27-11.788-26.27-26.271s11.783-26.27 26.27-26.27 26.27 11.787 26.27 26.27-11.783 26.271-26.27 26.271" style="fill:#7A8291"/></svg>
--- a/frontend/src/assets/Logos/karpenter.svg
+++ b/frontend/src/assets/Logos/karpenter.svg
@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
+	<g transform="translate(2.1186441,37.661017)">
+		<path d="m 237.70492,0 c 76.95771,0 139.34426,62.386551 139.34426,139.34426 v 0 l -1.8e-4,197.00774 65.57395,-1.5e-4 c 31.68847,0 57.37705,25.68858 57.37705,57.37705 v 0 V 443 h -7.54607 c -18.22527,0 -33.09496,-14.59276 -33.43754,-32.81482 v 0 -8.22465 l -0.003,-0.40664 c -0.21715,-13.39321 -11.14191,-24.18352 -24.58687,-24.18352 v 0 H 106.55738 C 47.707363,377.37037 0,329.66301 0,270.81299 v 0 -131.46873 C 0,62.386551 62.386551,0 139.34426,0 v 0 z m -8.19672,41.018518 h -81.96722 l -1.76212,0.01428 C 87.741593,41.97378 40.983607,89.314381 40.983607,147.5759 v 0 123.20218 l 0.0088,1.08438 c 0.579068,35.71525 29.711746,64.48939 65.564993,64.48939 v 0 h 163.9344 c 36.2154,0 65.57377,-29.35838 65.57377,-65.57377 v 0 -123.20218 l -0.0143,-1.76213 C 335.11031,87.776505 287.76971,41.018518 229.5082,41.018518 Z m -81.63935,65.629632 c 9.34426,0 16.72131,7.62944 16.72131,17.22778 v 0 49.96055 l 56.80328,-58.57444 c 7.37705,-6.89111 17.45902,-7.38334 24.59017,-0.73834 v 0 0.24611 c 6.88524,6.39889 6.39344,16.98167 -1.22951,23.87278 v 0 l -42.04918,43.31556 48.93442,69.89555 c 5.90164,8.61389 4.18033,19.44278 -3.68852,24.61111 -8.60656,4.92223 -18.44262,2.21501 -24.34426,-6.39888 v 0 l -44.0164,-64.48112 -15,15.75112 v 40.36222 c 0,9.84444 -7.37705,17.22778 -16.72131,17.22778 -9.34426,0 -16.72131,-7.38334 -16.72131,-17.22778 v 0 -137.82222 c 0,-9.59834 7.37705,-17.22778 16.72131,-17.22778 z" fill="#5C62B0" fill-rule="evenodd" />
+	</g>
+</svg>
--- a/frontend/src/assets/Logos/langchain.svg
+++ b/frontend/src/assets/Logos/langchain.svg
@@ -1 +1 @@
-<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>LangChain</title><path d="M8.373 14.502c.013-.06.024-.118.038-.17l.061.145c.115.28.229.557.506.714-.012.254-.334.357-.552.326-.048-.114-.115-.228-.255-.164-.143.056-.3-.01-.266-.185.333-.012.407-.371.468-.666zM18.385 9.245c-.318 0-.616.122-.839.342l-.902.887c-.243.24-.368.572-.343.913l.006.056c.032.262.149.498.337.682.13.128.273.21.447.266a.866.866 0 01-.247.777l-.056.055a2.022 2.022 0 01-1.355-1.555l-.01-.057-.046.037c-.03.024-.06.05-.088.078l-.902.887a1.156 1.156 0 000 1.65c.231.228.535.342.84.342.304 0 .607-.114.838-.341l.902-.888a1.156 1.156 0 00-.436-1.921.953.953 0 01.276-.842 2.062 2.062 0 011.371 1.57l.01.057.047-.037c.03-.024.06-.05.088-.078l.902-.888a1.155 1.155 0 000-1.65 1.188 1.188 0 00-.84-.342z" fill="#1C3C3C"></path><path clip-rule="evenodd" d="M17.901 6H6.1C2.736 6 0 8.692 0 12s2.736 6 6.099 6H17.9C21.264 18 24 15.308 24 12s-2.736-6-6.099-6zm-5.821 9.407c-.195.04-.414.047-.562-.106-.045.1-.136.077-.221.056a.797.797 0 00-.061-.014c-.01.025-.017.048-.026.073-.329.021-.575-.309-.732-.558a4.991 4.991 0 00-.473-.21c-.172-.07-.345-.14-.509-.23a2.218 2.218 0 00-.004.173c-.002.244-.004.503-.227.651-.007.295.236.292.476.29.207-.003.41-.005.447.184a.485.485 0 01-.05.003c-.046 0-.092 0-.127.034-.117.111-.242.063-.372.013-.12-.046-.243-.094-.367-.02a2.318 2.318 0 00-.262.154.97.97 0 01-.548.194c-.024-.036-.014-.059.006-.08a.562.562 0 00.043-.056c.019-.028.035-.057.051-.084.054-.095.103-.18.242-.22-.185-.029-.344.055-.5.137l-.004.002a4.21 4.21 0 01-.065.034c-.097.04-.154.009-.212-.023-.082-.045-.168-.092-.376.04-.04-.032-.02-.061.002-.086.091-.109.21-.125.345-.119-.351-.193-.604-.056-.81.055-.182.098-.327.176-.471-.012-.065.017-.102.063-.138.108-.015.02-.03.038-.047.055-.035-.039-.027-.083-.018-.128l.005-.026a.242.242 0 00.003-.03l-.027-.01c-.053-.022-.105-.044-.09-.124-.117-.04-.2.03-.286.094-.054-.041-.01-.095.032-.145a.279.279 0 00.045-.065c.038-.065.103-.067.166-.069.054-.001.108-.003.145-.042.133-.075.297-.036.462.003.121.028.242.057.354.042.203.025.454-.18.352-.385-.186-.233-.184-.528-.183-.813v-.143c-.016-.108-.172-.233-.328-.358-.12-.095-.24-.191-.298-.28-.16-.177-.285-.382-.409-.585l-.015-.024c-.212-.404-.297-.86-.382-1.315-.103-.546-.205-1.09-.526-1.54-.266.144-.612.075-.841-.118-.12.107-.13.247-.138.396l-.001.014c-.297-.292-.26-.844-.023-1.17.097-.128.213-.233.342-.326.03-.021.04-.042.039-.074.235-1.04 1.836-.839 2.342-.103.167.206.281.442.395.678.137.283.273.566.5.795.22.237.452.463.684.689.359.35.718.699 1.032 1.089.49.587.839 1.276 1.144 1.97.05.092.08.193.11.293.044.15.089.299.2.417.026.035.084.088.149.148.156.143.357.328.289.409.009.019.027.04.05.06.032.028.074.058.116.088.122.087.25.178.16.25zm7.778-3.545l-.902.887c-.24.237-.537.413-.859.51l-.017.005-.006.015A2.021 2.021 0 0117.6 14l-.902.888c-.393.387-.916.6-1.474.6-.557 0-1.08-.213-1.474-.6a2.03 2.03 0 010-2.9l.902-.888c.242-.238.531-.409.859-.508l.016-.004.006-.016c.105-.272.265-.516.475-.724l.902-.887c.393-.387.917-.6 1.474-.6.558 0 1.08.213 1.474.6.394.387.61.902.61 1.45 0 .549-.216 1.064-.61 1.45v.001z" fill="#1C3C3C" fill-rule="evenodd"></path></svg>
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>LangChain</title><path d="M8.373 14.502c.013-.06.024-.118.038-.17l.061.145c.115.28.229.557.506.714-.012.254-.334.357-.552.326-.048-.114-.115-.228-.255-.164-.143.056-.3-.01-.266-.185.333-.012.407-.371.468-.666zM18.385 9.245c-.318 0-.616.122-.839.342l-.902.887c-.243.24-.368.572-.343.913l.006.056c.032.262.149.498.337.682.13.128.273.21.447.266a.866.866 0 01-.247.777l-.056.055a2.022 2.022 0 01-1.355-1.555l-.01-.057-.046.037c-.03.024-.06.05-.088.078l-.902.887a1.156 1.156 0 000 1.65c.231.228.535.342.84.342.304 0 .607-.114.838-.341l.902-.888a1.156 1.156 0 00-.436-1.921.953.953 0 01.276-.842 2.062 2.062 0 011.371 1.57l.01.057.047-.037c.03-.024.06-.05.088-.078l.902-.888a1.155 1.155 0 000-1.65 1.188 1.188 0 00-.84-.342z" fill="#3B8686"></path><path clip-rule="evenodd" d="M17.901 6H6.1C2.736 6 0 8.692 0 12s2.736 6 6.099 6H17.9C21.264 18 24 15.308 24 12s-2.736-6-6.099-6zm-5.821 9.407c-.195.04-.414.047-.562-.106-.045.1-.136.077-.221.056a.797.797 0 00-.061-.014c-.01.025-.017.048-.026.073-.329.021-.575-.309-.732-.558a4.991 4.991 0 00-.473-.21c-.172-.07-.345-.14-.509-.23a2.218 2.218 0 00-.004.173c-.002.244-.004.503-.227.651-.007.295.236.292.476.29.207-.003.41-.005.447.184a.485.485 0 01-.05.003c-.046 0-.092 0-.127.034-.117.111-.242.063-.372.013-.12-.046-.243-.094-.367-.02a2.318 2.318 0 00-.262.154.97.97 0 01-.548.194c-.024-.036-.014-.059.006-.08a.562.562 0 00.043-.056c.019-.028.035-.057.051-.084.054-.095.103-.18.242-.22-.185-.029-.344.055-.5.137l-.004.002a4.21 4.21 0 01-.065.034c-.097.04-.154.009-.212-.023-.082-.045-.168-.092-.376.04-.04-.032-.02-.061.002-.086.091-.109.21-.125.345-.119-.351-.193-.604-.056-.81.055-.182.098-.327.176-.471-.012-.065.017-.102.063-.138.108-.015.02-.03.038-.047.055-.035-.039-.027-.083-.018-.128l.005-.026a.242.242 0 00.003-.03l-.027-.01c-.053-.022-.105-.044-.09-.124-.117-.04-.2.03-.286.094-.054-.041-.01-.095.032-.145a.279.279 0 00.045-.065c.038-.065.103-.067.166-.069.054-.001.108-.003.145-.042.133-.075.297-.036.462.003.121.028.242.057.354.042.203.025.454-.18.352-.385-.186-.233-.184-.528-.183-.813v-.143c-.016-.108-.172-.233-.328-.358-.12-.095-.24-.191-.298-.28-.16-.177-.285-.382-.409-.585l-.015-.024c-.212-.404-.297-.86-.382-1.315-.103-.546-.205-1.09-.526-1.54-.266.144-.612.075-.841-.118-.12.107-.13.247-.138.396l-.001.014c-.297-.292-.26-.844-.023-1.17.097-.128.213-.233.342-.326.03-.021.04-.042.039-.074.235-1.04 1.836-.839 2.342-.103.167.206.281.442.395.678.137.283.273.566.5.795.22.237.452.463.684.689.359.35.718.699 1.032 1.089.49.587.839 1.276 1.144 1.97.05.092.08.193.11.293.044.15.089.299.2.417.026.035.084.088.149.148.156.143.357.328.289.409.009.019.027.04.05.06.032.028.074.058.116.088.122.087.25.178.16.25zm7.778-3.545l-.902.887c-.24.237-.537.413-.859.51l-.017.005-.006.015A2.021 2.021 0 0117.6 14l-.902.888c-.393.387-.916.6-1.474.6-.557 0-1.08-.213-1.474-.6a2.03 2.03 0 010-2.9l.902-.888c.242-.238.531-.409.859-.508l.016-.004.006-.016c.105-.272.265-.516.475-.724l.902-.887c.393-.387.917-.6 1.474-.6.558 0 1.08.213 1.474.6.394.387.61.902.61 1.45 0 .549-.216 1.064-.61 1.45v.001z" fill="#3B8686" fill-rule="evenodd"></path></svg>
--- a/frontend/src/assets/Logos/meta.svg
+++ b/frontend/src/assets/Logos/meta.svg
@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<path d="M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z" fill="#0467DF" />
+</svg>
--- a/frontend/src/assets/Logos/modal.svg
+++ b/frontend/src/assets/Logos/modal.svg
@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<path d="M4.89 5.57 0 14.002l2.521 4.4h5.05l4.396-7.718 4.512 7.709 4.996.037L24 14.057l-4.857-8.452-5.073-.015-2.076 3.598L9.94 5.57Zm.837.729h3.787l1.845 3.252H7.572Zm9.189.021 3.803.012 4.228 7.355-3.736-.027zm-9.82.346L6.94 9.914l-4.209 7.389-1.892-3.3Zm9.187.014 4.297 7.343-1.892 3.282-4.3-7.344zm-6.713 3.6h3.79l-4.212 7.394H3.361Zm11.64 4.109 3.74.027-1.893 3.281-3.74-.027z" fill="#3E9C2A" />
+</svg>
--- a/frontend/src/assets/Logos/ollama.svg
+++ b/frontend/src/assets/Logos/ollama.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>Ollama</title><path d="M16.361 10.26a.9.9 0 0 0-.558.47l-.072.148.001.207c0 .193.004.217.059.353.076.193.152.312.291.448.24.238.51.3.872.205a.86.86 0 0 0 .517-.436.75.75 0 0 0 .08-.498c-.064-.453-.33-.782-.724-.897a1.1 1.1 0 0 0-.466 0m-9.203.005c-.305.096-.533.32-.65.639a1.2 1.2 0 0 0-.06.52c.057.309.31.59.598.667.362.095.632.033.872-.205.14-.136.215-.255.291-.448.055-.136.059-.16.059-.353l.001-.207-.072-.148a.9.9 0 0 0-.565-.472 1 1 0 0 0-.474.007m4.184 2c-.131.071-.223.25-.195.383.031.143.157.288.353.407.105.063.112.072.117.136.004.038-.01.146-.029.243-.02.094-.036.194-.036.222.002.074.07.195.143.253.064.052.076.054.255.059.164.005.198.001.264-.03.169-.082.212-.234.15-.525-.052-.243-.042-.28.087-.355.137-.08.281-.219.324-.314a.365.365 0 0 0-.175-.48.4.4 0 0 0-.181-.033c-.126 0-.207.03-.355.124l-.085.053-.053-.032c-.219-.13-.259-.145-.391-.143a.4.4 0 0 0-.193.032m.39-2.195c-.373.036-.475.05-.654.086a4.5 4.5 0 0 0-.951.328c-.94.46-1.589 1.226-1.787 2.114-.04.176-.045.234-.045.53 0 .294.005.357.043.524.264 1.16 1.332 2.017 2.714 2.173.3.033 1.596.033 1.896 0 1.11-.125 2.064-.727 2.493-1.571.114-.226.169-.372.22-.602.039-.167.044-.23.044-.523 0-.297-.005-.355-.045-.531-.288-1.29-1.539-2.304-3.072-2.497a7 7 0 0 0-.855-.031zm.645.937a3.3 3.3 0 0 1 1.44.514c.223.148.537.458.671.662.166.251.26.508.303.82.02.143.01.251-.043.482-.08.345-.332.705-.672.957a3 3 0 0 1-.689.348c-.382.122-.632.144-1.525.138-.582-.006-.686-.01-.853-.042q-.856-.16-1.35-.68c-.264-.28-.385-.535-.45-.946-.03-.192.025-.509.137-.776.136-.326.488-.73.836-.963.403-.269.934-.46 1.422-.512.187-.02.586-.02.773-.002m-5.503-11a1.65 1.65 0 0 0-.683.298C5.617.74 5.173 1.666 4.985 2.819c-.07.436-.119 1.04-.119 1.503 0 .544.064 1.24.155 1.721.02.107.031.202.023.208l-.187.152a5.3 5.3 0 0 0-.949 1.02 5.5 5.5 0 0 0-.94 2.339 6.6 6.6 0 0 0-.023 1.357c.091.78.325 1.438.727 2.04l.13.195-.037.064c-.269.452-.498 1.105-.605 1.732-.084.496-.095.629-.095 1.294 0 .67.009.803.088 1.266.095.555.288 1.143.503 1.534.071.128.243.393.264.407.007.003-.014.067-.046.141a7.4 7.4 0 0 0-.548 1.873 5 5 0 0 0-.071.991c0 .56.031.832.148 1.279L3.42 24h1.478l-.05-.091c-.297-.552-.325-1.575-.068-2.597.117-.472.25-.819.498-1.296l.148-.29v-.177c0-.165-.003-.184-.057-.293a.9.9 0 0 0-.194-.25 1.7 1.7 0 0 1-.385-.543c-.424-.92-.506-2.286-.208-3.451.124-.486.329-.918.544-1.154a.8.8 0 0 0 .223-.531c0-.195-.07-.355-.224-.522a3.14 3.14 0 0 1-.817-1.729c-.14-.96.114-2.005.69-2.834.563-.814 1.353-1.336 2.237-1.475.199-.033.57-.028.776.01.226.04.367.028.512-.041.179-.085.268-.19.374-.431.093-.215.165-.333.36-.576.234-.29.46-.489.822-.729.413-.27.884-.467 1.352-.561.17-.035.25-.04.569-.04s.398.005.569.04a4.07 4.07 0 0 1 1.914.997c.117.109.398.457.488.602.034.057.095.177.132.267.105.241.195.346.374.43.14.068.286.082.503.045.343-.058.607-.053.943.016 1.144.23 2.14 1.173 2.581 2.437.385 1.108.276 2.267-.296 3.153-.097.15-.193.27-.333.419-.301.322-.301.722-.001 1.053.493.539.801 1.866.708 3.036-.062.772-.26 1.463-.533 1.854a2 2 0 0 1-.224.258.9.9 0 0 0-.194.25c-.054.109-.057.128-.057.293v.178l.148.29c.248.476.38.823.498 1.295.253 1.008.231 2.01-.059 2.581a1 1 0 0 0-.044.098c0 .006.329.009.732.009h.73l.02-.074.036-.134c.019-.076.057-.3.088-.516a9 9 0 0 0 0-1.258c-.11-.875-.295-1.57-.597-2.226-.032-.074-.053-.138-.046-.141a1.4 1.4 0 0 0 .108-.152c.376-.569.607-1.284.724-2.228.031-.26.031-1.378 0-1.628-.083-.645-.182-1.082-.348-1.525a6 6 0 0 0-.329-.7l-.038-.064.131-.194c.402-.604.636-1.262.727-2.04a6.6 6.6 0 0 0-.024-1.358 5.5 5.5 0 0 0-.939-2.339 5.3 5.3 0 0 0-.95-1.02l-.186-.152a.7.7 0 0 1 .023-.208c.208-1.087.201-2.443-.017-3.503-.19-.924-.535-1.658-.98-2.082-.354-.338-.716-.482-1.15-.455-.996.059-1.8 1.205-2.116 3.01a7 7 0 0 0-.097.726c0 .036-.007.066-.015.066a1 1 0 0 1-.149-.078A4.86 4.86 0 0 0 12 3.03c-.832 0-1.687.243-2.456.698a1 1 0 0 1-.148.078c-.008 0-.015-.03-.015-.066a7 7 0 0 0-.097-.725C8.997 1.392 8.337.319 7.46.048a2 2 0 0 0-.585-.041Zm.293 1.402c.248.197.523.759.682 1.388.03.113.06.244.069.292.007.047.026.152.041.233.067.365.098.76.102 1.24l.002.475-.12.175-.118.178h-.278c-.324 0-.646.041-.954.124l-.238.06c-.033.007-.038-.003-.057-.144a8.4 8.4 0 0 1 .016-2.323c.124-.788.413-1.501.696-1.711.067-.05.079-.049.157.013m9.825-.012c.17.126.358.46.498.888.28.854.36 2.028.212 3.145-.019.14-.024.151-.057.144l-.238-.06a3.7 3.7 0 0 0-.954-.124h-.278l-.119-.178-.119-.175.002-.474c.004-.669.066-1.19.214-1.772.157-.623.434-1.185.68-1.382.078-.062.09-.063.159-.012"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="#7A8291" viewBox="0 0 24 24"><title>Ollama</title><path d="M16.361 10.26a.9.9 0 0 0-.558.47l-.072.148.001.207c0 .193.004.217.059.353.076.193.152.312.291.448.24.238.51.3.872.205a.86.86 0 0 0 .517-.436.75.75 0 0 0 .08-.498c-.064-.453-.33-.782-.724-.897a1.1 1.1 0 0 0-.466 0m-9.203.005c-.305.096-.533.32-.65.639a1.2 1.2 0 0 0-.06.52c.057.309.31.59.598.667.362.095.632.033.872-.205.14-.136.215-.255.291-.448.055-.136.059-.16.059-.353l.001-.207-.072-.148a.9.9 0 0 0-.565-.472 1 1 0 0 0-.474.007m4.184 2c-.131.071-.223.25-.195.383.031.143.157.288.353.407.105.063.112.072.117.136.004.038-.01.146-.029.243-.02.094-.036.194-.036.222.002.074.07.195.143.253.064.052.076.054.255.059.164.005.198.001.264-.03.169-.082.212-.234.15-.525-.052-.243-.042-.28.087-.355.137-.08.281-.219.324-.314a.365.365 0 0 0-.175-.48.4.4 0 0 0-.181-.033c-.126 0-.207.03-.355.124l-.085.053-.053-.032c-.219-.13-.259-.145-.391-.143a.4.4 0 0 0-.193.032m.39-2.195c-.373.036-.475.05-.654.086a4.5 4.5 0 0 0-.951.328c-.94.46-1.589 1.226-1.787 2.114-.04.176-.045.234-.045.53 0 .294.005.357.043.524.264 1.16 1.332 2.017 2.714 2.173.3.033 1.596.033 1.896 0 1.11-.125 2.064-.727 2.493-1.571.114-.226.169-.372.22-.602.039-.167.044-.23.044-.523 0-.297-.005-.355-.045-.531-.288-1.29-1.539-2.304-3.072-2.497a7 7 0 0 0-.855-.031zm.645.937a3.3 3.3 0 0 1 1.44.514c.223.148.537.458.671.662.166.251.26.508.303.82.02.143.01.251-.043.482-.08.345-.332.705-.672.957a3 3 0 0 1-.689.348c-.382.122-.632.144-1.525.138-.582-.006-.686-.01-.853-.042q-.856-.16-1.35-.68c-.264-.28-.385-.535-.45-.946-.03-.192.025-.509.137-.776.136-.326.488-.73.836-.963.403-.269.934-.46 1.422-.512.187-.02.586-.02.773-.002m-5.503-11a1.65 1.65 0 0 0-.683.298C5.617.74 5.173 1.666 4.985 2.819c-.07.436-.119 1.04-.119 1.503 0 .544.064 1.24.155 1.721.02.107.031.202.023.208l-.187.152a5.3 5.3 0 0 0-.949 1.02 5.5 5.5 0 0 0-.94 2.339 6.6 6.6 0 0 0-.023 1.357c.091.78.325 1.438.727 2.04l.13.195-.037.064c-.269.452-.498 1.105-.605 1.732-.084.496-.095.629-.095 1.294 0 .67.009.803.088 1.266.095.555.288 1.143.503 1.534.071.128.243.393.264.407.007.003-.014.067-.046.141a7.4 7.4 0 0 0-.548 1.873 5 5 0 0 0-.071.991c0 .56.031.832.148 1.279L3.42 24h1.478l-.05-.091c-.297-.552-.325-1.575-.068-2.597.117-.472.25-.819.498-1.296l.148-.29v-.177c0-.165-.003-.184-.057-.293a.9.9 0 0 0-.194-.25 1.7 1.7 0 0 1-.385-.543c-.424-.92-.506-2.286-.208-3.451.124-.486.329-.918.544-1.154a.8.8 0 0 0 .223-.531c0-.195-.07-.355-.224-.522a3.14 3.14 0 0 1-.817-1.729c-.14-.96.114-2.005.69-2.834.563-.814 1.353-1.336 2.237-1.475.199-.033.57-.028.776.01.226.04.367.028.512-.041.179-.085.268-.19.374-.431.093-.215.165-.333.36-.576.234-.29.46-.489.822-.729.413-.27.884-.467 1.352-.561.17-.035.25-.04.569-.04s.398.005.569.04a4.07 4.07 0 0 1 1.914.997c.117.109.398.457.488.602.034.057.095.177.132.267.105.241.195.346.374.43.14.068.286.082.503.045.343-.058.607-.053.943.016 1.144.23 2.14 1.173 2.581 2.437.385 1.108.276 2.267-.296 3.153-.097.15-.193.27-.333.419-.301.322-.301.722-.001 1.053.493.539.801 1.866.708 3.036-.062.772-.26 1.463-.533 1.854a2 2 0 0 1-.224.258.9.9 0 0 0-.194.25c-.054.109-.057.128-.057.293v.178l.148.29c.248.476.38.823.498 1.295.253 1.008.231 2.01-.059 2.581a1 1 0 0 0-.044.098c0 .006.329.009.732.009h.73l.02-.074.036-.134c.019-.076.057-.3.088-.516a9 9 0 0 0 0-1.258c-.11-.875-.295-1.57-.597-2.226-.032-.074-.053-.138-.046-.141a1.4 1.4 0 0 0 .108-.152c.376-.569.607-1.284.724-2.228.031-.26.031-1.378 0-1.628-.083-.645-.182-1.082-.348-1.525a6 6 0 0 0-.329-.7l-.038-.064.131-.194c.402-.604.636-1.262.727-2.04a6.6 6.6 0 0 0-.024-1.358 5.5 5.5 0 0 0-.939-2.339 5.3 5.3 0 0 0-.95-1.02l-.186-.152a.7.7 0 0 1 .023-.208c.208-1.087.201-2.443-.017-3.503-.19-.924-.535-1.658-.98-2.082-.354-.338-.716-.482-1.15-.455-.996.059-1.8 1.205-2.116 3.01a7 7 0 0 0-.097.726c0 .036-.007.066-.015.066a1 1 0 0 1-.149-.078A4.86 4.86 0 0 0 12 3.03c-.832 0-1.687.243-2.456.698a1 1 0 0 1-.148.078c-.008 0-.015-.03-.015-.066a7 7 0 0 0-.097-.725C8.997 1.392 8.337.319 7.46.048a2 2 0 0 0-.585-.041Zm.293 1.402c.248.197.523.759.682 1.388.03.113.06.244.069.292.007.047.026.152.041.233.067.365.098.76.102 1.24l.002.475-.12.175-.118.178h-.278c-.324 0-.646.041-.954.124l-.238.06c-.033.007-.038-.003-.057-.144a8.4 8.4 0 0 1 .016-2.323c.124-.788.413-1.501.696-1.711.067-.05.079-.049.157.013m9.825-.012c.17.126.358.46.498.888.28.854.36 2.028.212 3.145-.019.14-.024.151-.057.144l-.238-.06a3.7 3.7 0 0 0-.954-.124h-.278l-.119-.178-.119-.175.002-.474c.004-.669.066-1.19.214-1.772.157-.623.434-1.185.68-1.382.078-.062.09-.063.159-.012"/></svg>
--- a/frontend/src/assets/Logos/openai.svg
+++ b/frontend/src/assets/Logos/openai.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#fff" d="M44.559 19.646a11.957 11.957 0 0 0-1.028-9.822 12.094 12.094 0 0 0-13.026-5.802A11.962 11.962 0 0 0 21.485 0 12.097 12.097 0 0 0 9.95 8.373a11.964 11.964 0 0 0-7.997 5.8A12.097 12.097 0 0 0 3.44 28.356a11.957 11.957 0 0 0 1.028 9.822 12.094 12.094 0 0 0 13.026 5.802 11.953 11.953 0 0 0 9.02 4.02 12.096 12.096 0 0 0 11.54-8.379 11.964 11.964 0 0 0 7.997-5.8 12.099 12.099 0 0 0-1.491-14.177zM26.517 44.863a8.966 8.966 0 0 1-5.759-2.082 6.85 6.85 0 0 0 .284-.16L30.6 37.1c.49-.278.79-.799.786-1.361V22.265l4.04 2.332a.141.141 0 0 1 .078.111v11.16a9.006 9.006 0 0 1-8.987 8.995zM7.191 36.608a8.957 8.957 0 0 1-1.073-6.027c.071.042.195.119.284.17l9.558 5.52a1.556 1.556 0 0 0 1.57 0l11.67-6.738v4.665a.15.15 0 0 1-.057.124l-9.662 5.579a9.006 9.006 0 0 1-12.288-3.293zM4.675 15.744a8.966 8.966 0 0 1 4.682-3.943c0 .082-.005.228-.005.33v11.042a1.555 1.555 0 0 0 .785 1.359l11.669 6.736-4.04 2.333a.143.143 0 0 1-.136.012L7.967 28.03a9.006 9.006 0 0 1-3.293-12.284zm33.19 7.724L26.196 16.73l4.04-2.331a.143.143 0 0 1 .136-.012l9.664 5.579c4.302 2.485 5.776 7.989 3.29 12.29a8.991 8.991 0 0 1-4.68 3.943V24.827a1.553 1.553 0 0 0-.78-1.36zm4.02-6.051c-.07-.044-.195-.119-.283-.17l-9.558-5.52a1.556 1.556 0 0 0-1.57 0l-11.67 6.738V13.8a.15.15 0 0 1 .057-.124l9.662-5.574a8.995 8.995 0 0 1 13.36 9.315zm-25.277 8.315-4.04-2.333a.141.141 0 0 1-.079-.11v-11.16a8.997 8.997 0 0 1 14.753-6.91c-.073.04-.2.11-.283.161L17.4 10.9a1.552 1.552 0 0 0-.786 1.36l-.006 13.469zM18.803 21l5.198-3.002 5.197 3V27l-5.197 3-5.198-3z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#7A8291" d="M44.559 19.646a11.957 11.957 0 0 0-1.028-9.822 12.094 12.094 0 0 0-13.026-5.802A11.962 11.962 0 0 0 21.485 0 12.097 12.097 0 0 0 9.95 8.373a11.964 11.964 0 0 0-7.997 5.8A12.097 12.097 0 0 0 3.44 28.356a11.957 11.957 0 0 0 1.028 9.822 12.094 12.094 0 0 0 13.026 5.802 11.953 11.953 0 0 0 9.02 4.02 12.096 12.096 0 0 0 11.54-8.379 11.964 11.964 0 0 0 7.997-5.8 12.099 12.099 0 0 0-1.491-14.177zM26.517 44.863a8.966 8.966 0 0 1-5.759-2.082 6.85 6.85 0 0 0 .284-.16L30.6 37.1c.49-.278.79-.799.786-1.361V22.265l4.04 2.332a.141.141 0 0 1 .078.111v11.16a9.006 9.006 0 0 1-8.987 8.995zM7.191 36.608a8.957 8.957 0 0 1-1.073-6.027c.071.042.195.119.284.17l9.558 5.52a1.556 1.556 0 0 0 1.57 0l11.67-6.738v4.665a.15.15 0 0 1-.057.124l-9.662 5.579a9.006 9.006 0 0 1-12.288-3.293zM4.675 15.744a8.966 8.966 0 0 1 4.682-3.943c0 .082-.005.228-.005.33v11.042a1.555 1.555 0 0 0 .785 1.359l11.669 6.736-4.04 2.333a.143.143 0 0 1-.136.012L7.967 28.03a9.006 9.006 0 0 1-3.293-12.284zm33.19 7.724L26.196 16.73l4.04-2.331a.143.143 0 0 1 .136-.012l9.664 5.579c4.302 2.485 5.776 7.989 3.29 12.29a8.991 8.991 0 0 1-4.68 3.943V24.827a1.553 1.553 0 0 0-.78-1.36zm4.02-6.051c-.07-.044-.195-.119-.283-.17l-9.558-5.52a1.556 1.556 0 0 0-1.57 0l-11.67 6.738V13.8a.15.15 0 0 1 .057-.124l9.662-5.574a8.995 8.995 0 0 1 13.36 9.315zm-25.277 8.315-4.04-2.333a.141.141 0 0 1-.079-.11v-11.16a8.997 8.997 0 0 1 14.753-6.91c-.073.04-.2.11-.283.161L17.4 10.9a1.552 1.552 0 0 0-.786 1.36l-.006 13.469zM18.803 21l5.198-3.002 5.197 3V27l-5.197 3-5.198-3z"/></svg>
--- a/frontend/src/assets/Logos/openrouter.svg
+++ b/frontend/src/assets/Logos/openrouter.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><title>OpenRouter</title><path d="M16.778 1.844v1.919q-.569-.026-1.138-.032-.708-.008-1.415.037c-1.93.126-4.023.728-6.149 2.237-2.911 2.066-2.731 1.95-4.14 2.75-.396.223-1.342.574-2.185.798-.841.225-1.753.333-1.751.333v4.229s.768.108 1.61.333c.842.224 1.789.575 2.185.799 1.41.798 1.228.683 4.14 2.75 2.126 1.509 4.22 2.11 6.148 2.236.88.058 1.716.041 2.555.005v1.918l7.222-4.168-7.222-4.17v2.176c-.86.038-1.611.065-2.278.021-1.364-.09-2.417-.357-3.979-1.465-2.244-1.593-2.866-2.027-3.68-2.508.889-.518 1.449-.906 3.822-2.59 1.56-1.109 2.614-1.377 3.978-1.466.667-.044 1.418-.017 2.278.02v2.176L24 6.014Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="#7A8291" viewBox="0 0 24 24"><title>OpenRouter</title><path d="M16.778 1.844v1.919q-.569-.026-1.138-.032-.708-.008-1.415.037c-1.93.126-4.023.728-6.149 2.237-2.911 2.066-2.731 1.95-4.14 2.75-.396.223-1.342.574-2.185.798-.841.225-1.753.333-1.751.333v4.229s.768.108 1.61.333c.842.224 1.789.575 2.185.799 1.41.798 1.228.683 4.14 2.75 2.126 1.509 4.22 2.11 6.148 2.236.88.058 1.716.041 2.555.005v1.918l7.222-4.168-7.222-4.17v2.176c-.86.038-1.611.065-2.278.021-1.364-.09-2.417-.357-3.979-1.465-2.244-1.593-2.866-2.027-3.68-2.508.889-.518 1.449-.906 3.822-2.59 1.56-1.109 2.614-1.377 3.978-1.466.667-.044 1.418-.017 2.278.02v2.176L24 6.014Z"/></svg>
--- a/frontend/src/assets/Logos/podman.svg
+++ b/frontend/src/assets/Logos/podman.svg
--- a/frontend/src/assets/Logos/sglang.svg
+++ b/frontend/src/assets/Logos/sglang.svg
@@ -0,0 +1,10 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<g fill="none" stroke="#A5300F" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
+		<path d="M17.4 7.7c0 4.6-4.7 4.9-4.7 8.6" />
+		<path d="M8 10.7c3.3 0 4.2 2.4 4.2 5.6" />
+		<circle cx="17.4" cy="4.6" r="3.1" fill="#FADDCD" />
+		<circle cx="4.9" cy="10.7" r="3.1" fill="#FADDCD" />
+		<rect x="7.9" y="16.3" width="9.6" height="6.6" rx="1.6" fill="#FADDCD" />
+		<path d="M11.3 18.6 9.9 19.9l1.4 1.3M14.1 18.6l1.4 1.3-1.4 1.3M13.1 18.3l-1.2 3.3" stroke-width="1.1" />
+	</g>
+</svg>
--- a/frontend/src/assets/Logos/vercel.svg
+++ b/frontend/src/assets/Logos/vercel.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1155 1000"><path fill="#fff" d="m577.3 0 577.4 1000H0z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1155 1000"><path fill="#7A8291" d="m577.3 0 577.4 1000H0z"/></svg>
--- a/frontend/src/assets/Logos/vllm.svg
+++ b/frontend/src/assets/Logos/vllm.svg
@@ -0,0 +1,4 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<path d="m23.6 0-8.721 4.59L9.829 24h7.41z" fill="#30A2FF" />
+	<path d="M9.83 24V5.142H.4z" fill="#FDB515" />
+</svg>
--- a/frontend/src/assets/Logos/zap.svg
+++ b/frontend/src/assets/Logos/zap.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="#fff" stroke="#fff" viewBox="0 0 24 24"><path d="M20.98 11.802a1 1 0 0 0-.738-.771l-6.86-1.716 2.537-5.921a1 1 0 0 0-.317-1.192.996.996 0 0 0-1.234.024l-11 9a1 1 0 0 0 .39 1.744l6.719 1.681-3.345 5.854A1 1 0 0 0 8 22a1 1 0 0 0 .6-.2l12-9a1 1 0 0 0 .38-.998z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="#7A8291" stroke="#7A8291" viewBox="0 0 24 24"><path d="M20.98 11.802a1 1 0 0 0-.738-.771l-6.86-1.716 2.537-5.921a1 1 0 0 0-.317-1.192.996.996 0 0 0-1.234.024l-11 9a1 1 0 0 0 .39 1.744l6.719 1.681-3.345 5.854A1 1 0 0 0 8 22a1 1 0 0 0 .6-.2l12-9a1 1 0 0 0 .38-.998z"/></svg>
--- a/frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx
+++ b/frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx
@@ -26,6 +26,7 @@ function BreadcrumbItem({

 	return (
 		<Button
+			size="md"
 			variant="ghost"
 			color="secondary"
 			className={styles.item}
--- a/frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.tsx
+++ b/frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.tsx
@@ -34,21 +34,23 @@ function ErrorEmptyState({
 			</div>
 			<div className={styles.actions}>
 				<Button
+					size="md"
 					variant="solid"
 					color="secondary"
 					prefix={<LifeBuoy size={14} />}
 					onClick={onContactSupport}
-					data-testid="error-contact-support-button"
+					testId="error-contact-support-button"
 				>
 					Contact Support
 				</Button>
 				{onRefresh && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						data-testid="error-refresh-button"
+						testId="error-refresh-button"
 					>
 						Refresh
 					</Button>
--- a/frontend/src/components/Alerts/LabelColumn/LabelColumn.tsx
+++ b/frontend/src/components/Alerts/LabelColumn/LabelColumn.tsx
@@ -1,11 +1,7 @@
 import { Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import {
-	TooltipContent,
-	TooltipRoot,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';

@@ -16,20 +12,7 @@ import { BADGE_GAP, estimateBadgeWidth, OVERFLOW_BADGE_WIDTH } from './utils';

 export interface LabelColumnProps {
 	labels: string[];
-	color?:
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'error'
-		| 'warning'
-		| 'robin'
-		| 'forest'
-		| 'amber'
-		| 'sienna'
-		| 'cherry'
-		| 'sakura'
-		| 'aqua'
-		| 'vanilla';
+	color?: BadgeColorType;
 	value?: { [key: string]: string };
 }

@@ -104,20 +87,10 @@ function LabelColumn({
 				<LabelTag key={label} label={label} color={color} value={value?.[label]} />
 			))}
 			{remainingLabels.length > 0 && (
-				<TooltipRoot>
-					<TooltipTrigger asChild>
-						<span>
-							<Badge
-								color={color}
-								className={styles.overflowBadge}
-								variant="outline"
-								data-testid="label-overflow-badge"
-							>
-								+{remainingLabels.length}
-							</Badge>
-						</span>
-					</TooltipTrigger>
-					<TooltipContent side="bottom" align="end">
+				<Tooltip
+					side="bottom"
+					align="end"
+					title={
 						<div className={styles.tooltipContent}>
 							<span>
 								{remainingLabels
@@ -140,8 +113,19 @@ function LabelColumn({
 								<Copy size={12} />
 							</button>
 						</div>
-					</TooltipContent>
-				</TooltipRoot>
+					}
+				>
+					<span>
+						<Badge
+							color={color}
+							className={styles.overflowBadge}
+							variant="outlined"
+							testId="label-overflow-badge"
+						>
+							+{remainingLabels.length}
+						</Badge>
+					</span>
+				</Tooltip>
 			)}
 		</div>
 	);
--- a/frontend/src/components/Alerts/LabelColumn/LabelTag.tsx
+++ b/frontend/src/components/Alerts/LabelColumn/LabelTag.tsx
@@ -1,31 +1,14 @@
 import { Copy } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import {
-	TooltipContent,
-	TooltipRoot,
-	TooltipTrigger,
-} from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { useCopyToClipboard } from 'react-use';

 import styles from './LabelTag.module.scss';

 export interface LabelTagProps {
 	label: string;
-	color?:
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'error'
-		| 'warning'
-		| 'robin'
-		| 'forest'
-		| 'amber'
-		| 'sienna'
-		| 'cherry'
-		| 'sakura'
-		| 'aqua'
-		| 'vanilla';
+	color?: BadgeColorType;
 	value?: string;
 }

@@ -41,20 +24,8 @@ function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
 	};

 	return (
-		<TooltipRoot>
-			<TooltipTrigger asChild>
-				<span>
-					<Badge
-						color={color}
-						className={styles.labelBadge}
-						variant="outline"
-						data-testid={`label-tag-${label}`}
-					>
-						<span className={styles.labelValue}>{displayText}</span>
-					</Badge>
-				</span>
-			</TooltipTrigger>
-			<TooltipContent>
+		<Tooltip
+			title={
 				<div className={styles.tooltipContent}>
 					<span>{displayText}</span>
 					<button
@@ -66,8 +37,19 @@ function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
 						<Copy size={12} />
 					</button>
 				</div>
-			</TooltipContent>
-		</TooltipRoot>
+			}
+		>
+			<span>
+				<Badge
+					color={color ?? 'secondary'}
+					className={styles.labelBadge}
+					variant="outlined"
+					testId={`label-tag-${label}`}
+				>
+					<span className={styles.labelValue}>{displayText}</span>
+				</Badge>
+			</span>
+		</Tooltip>
 	);
 }

--- a/frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.tsx
+++ b/frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.tsx
@@ -30,21 +30,23 @@ function NoResultsEmptyState({
 			<div className={styles.actions}>
 				{onClear && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						onClick={onClear}
-						data-testid="no-results-clear-button"
+						testId="no-results-clear-button"
 					>
 						{clearButtonText}
 					</Button>
 				)}
 				{onRefresh && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						data-testid="no-results-refresh-button"
+						testId="no-results-refresh-button"
 					>
 						Refresh
 					</Button>
--- a/frontend/src/components/Alerts/constants.ts
+++ b/frontend/src/components/Alerts/constants.ts
@@ -1,4 +1,4 @@
-import type { BadgeColor } from '@signozhq/ui/badge';
+import type { BadgeColorType } from '@signozhq/ui/badge';

 export const STATE_ORDER = ['firing', 'pending', 'inactive', 'disabled'];
 export const SEVERITY_ORDER = ['critical', 'error', 'warning', 'info'];
@@ -24,9 +24,9 @@ export const SEVERITY_COLORS: Record<string, string> = {
 	info: 'var(--bg-robin-500)',
 };

-export const SEVERITY_BADGE_COLORS: Record<string, BadgeColor> = {
-	critical: 'error',
-	error: 'error',
+export const SEVERITY_BADGE_COLORS: Record<string, BadgeColorType> = {
+	critical: 'danger',
+	error: 'danger',
 	warning: 'warning',
 	info: 'primary',
 };
--- a/frontend/src/components/AuthPageContainer/AuthHeader.tsx
+++ b/frontend/src/components/AuthPageContainer/AuthHeader.tsx
@@ -22,11 +22,12 @@ function AuthHeader(): JSX.Element {
 				<span className="auth-header-logo-text">SigNoz</span>
 			</div>
 			<Button
+				size="md"
 				className="auth-header-help-button"
 				prefix={<LifeBuoy size={12} />}
 				onClick={handleGetHelp}
 				variant="solid"
-				color="none"
+				color="secondary"
 			>
 				Get Help
 			</Button>
--- a/frontend/src/components/Badges/Badges.tsx
+++ b/frontend/src/components/Badges/Badges.tsx
@@ -48,14 +48,22 @@ function Badges({ tags, setTags }: AddTagsProps): JSX.Element {
 		<div className="tags-container">
 			{tags.map<React.ReactNode>((tag) => (
 				<Badge
+					variant="solid"
 					key={tag}
-					color="vanilla"
+					color="secondary"
 					style={{ userSelect: 'none' }}
-					closable
-					onClose={(e): void => {
-						e.preventDefault();
-						handleClose(tag);
-					}}
+					suffix={
+						<button
+							type="button"
+							aria-label={`Remove ${tag}`}
+							onClick={(e): void => {
+								e.preventDefault();
+								handleClose(tag);
+							}}
+						>
+							<X size={12} />
+						</button>
+					}
 				>
 					{tag}
 				</Badge>
--- a/frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx
+++ b/frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx
@@ -4,7 +4,7 @@ import {
 	CloudintegrationtypesCollectedMetricDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { BarChart, Info, ScrollText } from '@signozhq/icons';
-import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
+import { TooltipProvider, Tooltip } from '@signozhq/ui/tooltip';

 import './CloudServiceDataCollected.styles.scss';

@@ -89,12 +89,10 @@ function CloudServiceDataCollected({
 						Metrics
 						{metricsInfoTooltip && (
 							<TooltipProvider>
-								<TooltipSimple
+								<Tooltip
+									className={'cloud-service-data-collected-table-tooltip'}
 									title={metricsInfoTooltip}
 									side="top"
-									tooltipContentProps={{
-										className: 'cloud-service-data-collected-table-tooltip',
-									}}
 								>
 									<span
 										className="cloud-service-data-collected-table-heading-info"
@@ -103,7 +101,7 @@ function CloudServiceDataCollected({
 									>
 										<Info size={12} />
 									</span>
-								</TooltipSimple>
+								</Tooltip>
 							</TooltipProvider>
 						)}
 					</div>
--- a/frontend/src/components/CodeBlock/CodeBlock.tsx
+++ b/frontend/src/components/CodeBlock/CodeBlock.tsx
@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Check, Copy } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import SyntaxHighlighter, {
 	a11yDark,
 } from 'components/MarkdownRenderer/syntaxHighlighter';
@@ -52,16 +53,19 @@ function CodeBlock({
 			data-testid="code-block-container"
 		>
 			{showCopyButton ? (
-				<Button
-					variant="ghost"
-					color="secondary"
-					size="sm"
-					onClick={handleCopy}
-					prefix={isCopied ? <Check size={14} /> : <Copy size={14} />}
-					aria-label="Copy code"
-					title={isCopied ? 'Copied' : 'Copy'}
-					style={{ position: 'absolute', right: 8, top: 8, zIndex: 1 }}
-				/>
+				<Tooltip title={isCopied ? 'Copied' : 'Copy'}>
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="sm"
+						icon
+						onClick={handleCopy}
+						aria-label="Copy code"
+						style={{ position: 'absolute', right: 8, top: 8, zIndex: 1 }}
+					>
+						{isCopied ? <Check size={14} /> : <Copy size={14} />}
+					</Button>
+				</Tooltip>
 			) : null}
 			<SyntaxHighlighter
 				style={a11yDark}
--- a/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
+++ b/frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx
@@ -134,26 +134,33 @@ function CreateServiceAccountModal(): JSX.Element {

 			<DialogFooter className="create-sa-modal__footer">
 				<Button
+					size="md"
 					type="button"
 					variant="solid"
 					color="secondary"
 					onClick={handleClose}
-					data-testid="create-sa-cancel-btn"
+					testId="create-sa-cancel-btn"
 				>
 					<X size={12} />
 					Cancel
 				</Button>

 				<AuthZButton
+					size="md"
 					checks={[SACreatePermission]}
 					withPortal={false}
-					type="submit"
-					form="create-sa-form"
+					type="button"
 					variant="solid"
 					color="primary"
 					loading={isSubmitting}
 					disabled={!isValid}
-					data-testid="create-sa-submit-btn"
+					testId="create-sa-submit-btn"
+					onClick={(): void => {
+						const form = document.getElementById('create-sa-form');
+						if (form instanceof HTMLFormElement) {
+							form.requestSubmit();
+						}
+					}}
 				>
 					Create Service Account
 				</AuthZButton>
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
+++ b/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
@@ -656,14 +656,19 @@ function CustomTimePicker({
 					}
 				>
 					<Button
+						disabledTooltip={undefined}
+						size="md"
 						className="zoom-out-btn"
 						onClick={handleZoomOut}
 						disabled={zoomOutDisabled}
-						data-testid="zoom-out-btn"
-						prefix={<ZoomOut size={14} />}
+						testId="zoom-out-btn"
+						icon
+						aria-label="Zoom out"
 						variant="solid"
-						color="none"
-					/>
+						color="secondary"
+					>
+						<ZoomOut size={14} />
+					</Button>
 				</Tooltip>
 			)}
 		</div>
--- a/frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx
+++ b/frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx
@@ -27,12 +27,14 @@ function DetailsHeader({
 	const closeButton = (
 		<Button
 			variant="ghost"
-			size="icon"
+			size="sm"
+			icon
 			color="secondary"
 			onClick={onClose}
 			aria-label="Close"
-			prefix={<X size={14} />}
-		></Button>
+		>
+			<X size={14} />
+		</Button>
 	);

 	return (
--- a/frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx
+++ b/frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Button, Popover, Tooltip } from 'antd';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { RadioGroup } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -68,10 +68,15 @@ export default function DownloadOptionsMenu({
 			>
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup value={exportFormat} onChange={setExportFormat}>
-						<RadioGroupItem value={DownloadFormats.CSV}>csv</RadioGroupItem>
-						<RadioGroupItem value={DownloadFormats.JSONL}>jsonl</RadioGroupItem>
-					</RadioGroup>
+					<RadioGroup
+						color="primary"
+						value={exportFormat}
+						onChange={setExportFormat}
+						items={[
+							{ value: DownloadFormats.CSV, label: 'csv' },
+							{ value: DownloadFormats.JSONL, label: 'jsonl' },
+						]}
+					/>
 				</div>

 				<div className="horizontal-line" />
@@ -79,19 +84,15 @@ export default function DownloadOptionsMenu({
 				<div className="row-limit">
 					<Typography.Text className="title">Number of Rows</Typography.Text>
 					<RadioGroup
+						color="primary"
 						value={String(rowLimit)}
 						onChange={(value): void => setRowLimit(Number(value))}
-					>
-						<RadioGroupItem value={String(DownloadRowCounts.TEN_K)}>
-							10k
-						</RadioGroupItem>
-						<RadioGroupItem value={String(DownloadRowCounts.THIRTY_K)}>
-							30k
-						</RadioGroupItem>
-						<RadioGroupItem value={String(DownloadRowCounts.FIFTY_K)}>
-							50k
-						</RadioGroupItem>
-					</RadioGroup>
+						items={[
+							{ value: String(DownloadRowCounts.TEN_K), label: '10k' },
+							{ value: String(DownloadRowCounts.THIRTY_K), label: '30k' },
+							{ value: String(DownloadRowCounts.FIFTY_K), label: '50k' },
+						]}
+					/>
 				</div>

 				{dataSource !== DataSource.TRACES && (
@@ -100,12 +101,15 @@ export default function DownloadOptionsMenu({

 						<div className="columns-scope">
 							<Typography.Text className="title">Columns</Typography.Text>
-							<RadioGroup value={columnsScope} onChange={setColumnsScope}>
-								<RadioGroupItem value={DownloadColumnsScopes.ALL}>All</RadioGroupItem>
-								<RadioGroupItem value={DownloadColumnsScopes.SELECTED}>
-									Selected
-								</RadioGroupItem>
-							</RadioGroup>
+							<RadioGroup
+								color="primary"
+								value={columnsScope}
+								onChange={setColumnsScope}
+								items={[
+									{ value: DownloadColumnsScopes.ALL, label: 'All' },
+									{ value: DownloadColumnsScopes.SELECTED, label: 'Selected' },
+								]}
+							/>
 						</div>
 					</>
 				)}
--- a/frontend/src/components/DropdownMenu/DropdownMenuSimple.tsx
+++ b/frontend/src/components/DropdownMenu/DropdownMenuSimple.tsx
@@ -0,0 +1,221 @@
+import { isValidElement, type ReactElement, type ReactNode } from 'react';
+import {
+	Dropdown,
+	type DropdownItemType,
+	type DropdownProps,
+} from '@signozhq/ui/dropdown';
+
+/**
+ * The menu-item shape SigNoz built against `@signozhq/ui/dropdown-menu`.
+ * `Dropdown` only accepts its own `items` array, so this module maps the old
+ * rows onto that array and renders them.
+ */
+export type BaseMenuItem = {
+	key?: string;
+	label?: ReactNode;
+	disabled?: boolean;
+	disabledTooltip?: ReactNode;
+	icon?: ReactNode;
+	rightIcon?: ReactNode;
+	shortcut?: ReactNode;
+	onClick?: (info: { key: string; keyPath: string[] }) => void;
+	danger?: boolean;
+	className?: string;
+};
+
+export type MenuGroup = BaseMenuItem & {
+	type: 'group';
+	label: string;
+	children: MenuItem[];
+};
+
+export type MenuDivider = {
+	type: 'divider';
+	key?: string;
+};
+
+export type SubMenuItem = BaseMenuItem & {
+	children: MenuItem[];
+};
+
+export type CheckboxMenuItem = BaseMenuItem & {
+	type: 'checkbox';
+	key: string;
+	label: ReactNode;
+	checked?: boolean;
+	onCheckedChange?: (checked: boolean) => void;
+};
+
+export type RadioMenuItem = {
+	type: 'radio';
+	key: string;
+	label: ReactNode;
+	value: string;
+	disabled?: boolean;
+	className?: string;
+};
+
+export type RadioGroupMenuItem = {
+	type: 'radio-group';
+	key?: string;
+	value?: string;
+	onChange?: (value: string) => void;
+	children: RadioMenuItem[];
+};
+
+export type MenuItem =
+	| MenuGroup
+	| MenuDivider
+	| CheckboxMenuItem
+	| RadioGroupMenuItem
+	| (SubMenuItem & { type?: never })
+	| (BaseMenuItem & { type?: never; children?: never });
+
+export type MenuProps = {
+	items: MenuItem[];
+	search?: {
+		placeholder?: string;
+		onSearchChange?: (value: string) => void;
+	};
+	loading?: boolean | { text?: string };
+};
+
+type Align = DropdownProps['align'];
+type Side = DropdownProps['side'];
+
+function elementOf(node: ReactNode): ReactElement | undefined {
+	return isValidElement(node) ? node : undefined;
+}
+
+function disabledFields(item: {
+	disabled?: boolean;
+	disabledTooltip?: ReactNode;
+}): { disabled: boolean; disabledTooltip: ReactNode } | Record<string, never> {
+	if (item.disabled === undefined && item.disabledTooltip === undefined) {
+		return {};
+	}
+	return {
+		disabled: Boolean(item.disabled),
+		disabledTooltip: item.disabledTooltip,
+	};
+}
+
+function mapItem(item: MenuItem, index: number): DropdownItemType {
+	if ('type' in item && item.type === 'divider') {
+		return { type: 'separator', value: item.key ?? `separator-${index}` };
+	}
+
+	if ('type' in item && item.type === 'group') {
+		return {
+			type: 'group',
+			value: item.key ?? `group-${index}`,
+			label: item.label,
+			items: item.children.map((child, childIndex) => mapItem(child, childIndex)),
+		} as DropdownItemType;
+	}
+
+	if ('type' in item && item.type === 'checkbox') {
+		return {
+			type: 'checkbox',
+			name: item.key,
+			label: item.label,
+			value: item.checked,
+			onChange: item.onCheckedChange,
+			prefix: elementOf(item.icon),
+			...disabledFields(item),
+		};
+	}
+
+	if ('type' in item && item.type === 'radio-group') {
+		return {
+			type: 'radio-group',
+			name: item.key ?? `radio-${index}`,
+			value: item.value,
+			onChange: item.onChange,
+			items: item.children.map((child) => ({
+				value: child.value,
+				label: child.label,
+				...disabledFields(child),
+			})),
+		};
+	}
+
+	if ('children' in item && item.children) {
+		const key = item.key ?? `submenu-${index}`;
+		return {
+			type: 'submenu',
+			value: key,
+			label: item.label ?? '',
+			prefix: elementOf(item.icon),
+			items: item.children.map((child, childIndex) => mapItem(child, childIndex)),
+			...disabledFields(item),
+		} as DropdownItemType;
+	}
+
+	const key = item.key ?? `item-${index}`;
+	const shortcut = 'shortcut' in item ? item.shortcut : undefined;
+	const suffix = elementOf('rightIcon' in item ? item.rightIcon : undefined);
+	return {
+		type: 'item',
+		value: key,
+		label: item.label ?? '',
+		danger: 'danger' in item ? item.danger : undefined,
+		prefix: elementOf('icon' in item ? item.icon : undefined),
+		...(shortcut != null ? { shortcut } : { suffix }),
+		onClick:
+			'onClick' in item && item.onClick
+				? (): void => {
+						item.onClick?.({ key, keyPath: [key] });
+					}
+				: undefined,
+		...disabledFields(item),
+	};
+}
+
+interface DropdownMenuSimpleProps {
+	menu: MenuProps;
+	children: ReactNode;
+	className?: string;
+	align?: Align;
+	side?: Side;
+	testId?: string;
+	nativeButton?: boolean;
+}
+
+export function DropdownMenuSimple({
+	menu,
+	children,
+	className,
+	align = 'end',
+	side = 'bottom',
+	testId,
+	nativeButton = true,
+}: DropdownMenuSimpleProps): JSX.Element {
+	const loading = menu.loading;
+	const loadingText = typeof loading === 'object' ? loading.text : undefined;
+
+	return (
+		<Dropdown
+			items={menu.items.map(mapItem) as DropdownItemType[]}
+			nativeButton={nativeButton}
+			align={align}
+			side={side}
+			className={className}
+			testId={testId}
+			loading={Boolean(loading)}
+			loadingContent={loadingText}
+			searchInputProps={
+				menu.search
+					? {
+							placeholder: menu.search.placeholder,
+							onChange: menu.search.onSearchChange,
+						}
+					: undefined
+			}
+		>
+			{children}
+		</Dropdown>
+	);
+}
+
+export default DropdownMenuSimple;
--- a/frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx
+++ b/frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx
@@ -38,13 +38,15 @@ function DeleteMemberDialog({

 	const footer = (
 		<>
-			<Button variant="solid" color="secondary" onClick={onClose}>
+			<Button size="md" variant="solid" color="secondary" onClick={onClose}>
 				<X size={12} />
 				Cancel
 			</Button>
 			<Button
+				disabledTooltip={undefined}
+				size="md"
 				variant="solid"
-				color="destructive"
+				color="danger"
 				disabled={isDeleting}
 				onClick={onConfirm}
 				loading={isDeleting}
--- a/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
+++ b/frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx
@@ -519,7 +519,7 @@ function EditMemberDrawer({
 									localRoles.map((roleId) => {
 										const role = availableRoles.find((r) => r.id === roleId);
 										return (
-											<Badge key={roleId} color="vanilla">
+											<Badge variant="solid" key={roleId} color="secondary">
 												{role?.name ?? roleId}
 											</Badge>
 										);
@@ -559,15 +559,15 @@ function EditMemberDrawer({
 				<div className="edit-member-drawer__meta-item">
 					<span className="edit-member-drawer__meta-label">Status</span>
 					{member?.status === MemberStatus.Active ? (
-						<Badge color="forest" variant="outline">
+						<Badge color="success" variant="outlined">
 							ACTIVE
 						</Badge>
 					) : member?.status === MemberStatus.Deleted ? (
-						<Badge color="cherry" variant="outline">
+						<Badge color="danger" variant="outlined">
 							DELETED
 						</Badge>
 					) : (
-						<Badge color="amber" variant="outline">
+						<Badge color="warning" variant="outlined">
 							INVITED
 						</Badge>
 					)}
@@ -575,12 +575,16 @@ function EditMemberDrawer({

 				<div className="edit-member-drawer__meta-item">
 					<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
-					<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
+					<Badge variant="solid" color="secondary">
+						{formatTimestamp(member?.joinedOn)}
+					</Badge>
 				</div>
 				{!isInvited && (
 					<div className="edit-member-drawer__meta-item">
 						<span className="edit-member-drawer__meta-label">Last Modified</span>
-						<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
+						<Badge variant="solid" color="secondary">
+							{formatTimestamp(member?.updatedAt)}
+						</Badge>
 					</div>
 				)}
 			</div>
@@ -614,10 +618,12 @@ function EditMemberDrawer({
 						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
 							<span className="edit-member-drawer__tooltip-wrapper">
 								<Button
+									disabledTooltip={undefined}
+									size="md"
 									onClick={(): void => setShowDeleteConfirm(true)}
 									disabled={isRootUser || isSelf}
 									variant="link"
-									color="destructive"
+									color="danger"
 								>
 									<Trash2 size={12} />
 									{isInvited ? 'Revoke Invite' : 'Delete Member'}
@@ -629,6 +635,8 @@ function EditMemberDrawer({
 						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
 							<span className="edit-member-drawer__tooltip-wrapper">
 								<Button
+									disabledTooltip={undefined}
+									size="md"
 									onClick={handleGenerateResetLink}
 									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
 									variant="link"
@@ -651,12 +659,19 @@ function EditMemberDrawer({
 					</div>

 					<div className="edit-member-drawer__footer-right">
-						<Button variant="outlined" color="secondary" onClick={handleClose}>
+						<Button
+							size="md"
+							variant="outlined"
+							color="secondary"
+							onClick={handleClose}
+						>
 							<X size={14} />
 							Cancel
 						</Button>

 						<Button
+							disabledTooltip={undefined}
+							size="md"
 							variant="solid"
 							color="primary"
 							disabled={!isDirty || isSaving || isRootUser}
--- a/frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx
+++ b/frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx
@@ -45,6 +45,7 @@ function ResetLinkDialog({
 						<span className="reset-link-dialog__link-text">{resetLink}</span>
 					</div>
 					<Button
+						size="md"
 						variant="link"
 						color="secondary"
 						onClick={onCopy}
--- a/frontend/src/components/ErrorModal/ErrorModal.tsx
+++ b/frontend/src/components/ErrorModal/ErrorModal.tsx
@@ -53,7 +53,7 @@ function ErrorModal({
 					onClick={(): void => setVisible(true)}
 					onKeyDown={undefined}
 				>
-					<Badge color="error">
+					<Badge variant="solid" color="danger">
 						<CircleAlert size={14} color={Color.BG_CHERRY_500} /> error
 					</Badge>
 				</span>
--- a/frontend/src/components/ExplorerCard/ExplorerCard.tsx
+++ b/frontend/src/components/ExplorerCard/ExplorerCard.tsx
@@ -1,7 +1,10 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button, Col, Popover, Row, Select, Space } from 'antd';
-import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
+import {
+	DropdownMenuSimple,
+	type MenuProps,
+} from 'components/DropdownMenu/DropdownMenuSimple';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
--- a/frontend/src/components/ExportMenu/ExportMenu.tsx
+++ b/frontend/src/components/ExportMenu/ExportMenu.tsx
@@ -1,8 +1,8 @@
 import { Download } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { RadioGroup } from '@signozhq/ui/radio-group';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	ClientExportData,
@@ -51,31 +51,40 @@ export default function ExportMenu({

 	return (
 		<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-			<TooltipSimple title="Download">
+			<Tooltip title="Download">
 				<PopoverTrigger asChild>
 					<Button
+						disabledTooltip={undefined}
 						variant="ghost"
 						color="secondary"
-						size="icon"
+						size="sm"
+						icon
 						aria-label="Download"
-						data-testid={`export-menu-${dataSource}`}
+						testId={`export-menu-${dataSource}`}
 						disabled={isExporting}
 						loading={isExporting}
 					>
 						<Download size={14} />
 					</Button>
 				</PopoverTrigger>
-			</TooltipSimple>
+			</Tooltip>
 			<PopoverContent align="end" className="export-menu-popover">
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup value={exportFormat} onChange={setExportFormat}>
-						<RadioGroupItem value={ExportFormat.Csv}>csv</RadioGroupItem>
-						<RadioGroupItem value={ExportFormat.Jsonl}>jsonl</RadioGroupItem>
-					</RadioGroup>
+					<RadioGroup
+						color="primary"
+						value={exportFormat}
+						onChange={setExportFormat}
+						items={[
+							{ value: ExportFormat.Csv, label: 'csv' },
+							{ value: ExportFormat.Jsonl, label: 'jsonl' },
+						]}
+					/>
 				</div>

 				<Button
+					disabledTooltip={undefined}
+					size="md"
 					variant="solid"
 					color="primary"
 					className="export-button"
--- a/frontend/src/components/FieldsSelector/AddedFields.tsx
+++ b/frontend/src/components/FieldsSelector/AddedFields.tsx
@@ -58,8 +58,8 @@ function SortableField({
 			{!isRequired && (
 				<Button
 					className={cx(styles.removeBtn, 'periscope-btn')}
-					variant="outlined"
-					color="destructive"
+					variant="solid"
+					color="danger"
 					size="sm"
 					onClick={(): void => onRemove(field)}
 				>
--- a/frontend/src/components/FieldsSelector/FieldsSelector.tsx
+++ b/frontend/src/components/FieldsSelector/FieldsSelector.tsx
@@ -173,6 +173,7 @@ function FieldsSelectorContent({
 				{hasUnsavedChanges && (
 					<div className={styles.footer}>
 						<Button
+							size="md"
 							variant="outlined"
 							color="secondary"
 							onClick={handleDiscard}
@@ -181,6 +182,7 @@ function FieldsSelectorContent({
 							Discard
 						</Button>
 						<Button
+							size="md"
 							variant="solid"
 							color="primary"
 							onClick={handleSave}
--- a/frontend/src/components/HeaderRightSection/FeedbackModal.tsx
+++ b/frontend/src/components/HeaderRightSection/FeedbackModal.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
 import { Button, Input } from 'antd';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
@@ -102,7 +102,10 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	return (
 		<div className="feedback-modal-container">
 			<div className="feedback-modal-header">
-				<ToggleGroupSimple
+				<ToggleGroup
+					variant="outlined"
+					color="secondary"
+					size="sm"
 					type="single"
 					value={activeTab}
 					className="feedback-modal-tabs"
--- a/frontend/src/components/HeaderRightSection/HeaderRightSection.tsx
+++ b/frontend/src/components/HeaderRightSection/HeaderRightSection.tsx
@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Dot } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import Noz from 'components/Noz/Noz';
 import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 import { Popover } from 'antd';
@@ -113,8 +113,9 @@ function HeaderRightSection({
 						</span>
 					) : null}

-					<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
+					<Tooltip title={NOZ_TOOLTIP_TITLE}>
 						<Button
+							size="md"
 							variant="solid"
 							color="secondary"
 							className="noz-wave"
@@ -130,7 +131,7 @@ function HeaderRightSection({
 						>
 							<Typography.Text>Noz</Typography.Text>
 						</Button>
-					</TooltipSimple>
+					</Tooltip>
 				</div>
 			)}

@@ -147,13 +148,16 @@ function HeaderRightSection({
 					onOpenChange={handleOpenFeedbackModalChange}
 				>
 					<Button
+						color="secondary"
 						variant="ghost"
-						size="icon"
+						size="sm"
+						icon
 						className="share-feedback-btn"
 						aria-label="Feedback"
-						prefix={<SquarePen size={14} />}
 						onClick={handleOpenFeedbackModal}
-					/>
+					>
+						<SquarePen size={14} />
+					</Button>
 				</Popover>
 			)}

@@ -170,16 +174,19 @@ function HeaderRightSection({
 					onOpenChange={handleOpenAnnouncementsModalChange}
 				>
 					<Button
+						color="secondary"
 						variant="ghost"
-						size="icon"
+						size="sm"
+						icon
 						aria-label="Announcements"
-						prefix={<Inbox size={14} />}
 						onClick={(): void => {
 							logEvent('Announcements: Clicked', {
 								page: location.pathname,
 							});
 						}}
-					/>
+					>
+						<Inbox size={14} />
+					</Button>
 				</Popover>
 			)}

@@ -196,12 +203,15 @@ function HeaderRightSection({
 					onOpenChange={handleOpenShareURLModalChange}
 				>
 					<Button
+						color="secondary"
 						variant="ghost"
-						size="icon"
+						size="sm"
+						icon
 						aria-label="Share"
-						prefix={<Globe size={14} />}
 						onClick={handleOpenShareURLModal}
-					/>
+					>
+						<Globe size={14} />
+					</Button>
 				</Popover>
 			)}
 		</div>
--- a/frontend/src/components/HeaderRightSection/ShareURLModal.tsx
+++ b/frontend/src/components/HeaderRightSection/ShareURLModal.tsx
@@ -149,6 +149,9 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 								<Info size={14} color={Color.BG_AMBER_600} />
 							)}
 							<Switch
+								color="primary"
+								textPlacement="right"
+								disabledTooltip={undefined}
 								value={enableAbsoluteTime}
 								disabled={!isValidateRelativeTime}
 								onChange={(): void => {
@@ -173,6 +176,8 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 					</Typography.Text>
 					<div className="absolute-relative-time-toggler">
 						<Switch
+							color="primary"
+							textPlacement="right"
 							value={enableExtraOption}
 							onChange={(): void => setEnableExtraOption((prev) => !prev)}
 						/>
--- a/frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx
+++ b/frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx
@@ -1,14 +1,23 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Badge, type BadgeColorType } from '@signozhq/ui/badge';

-type BadgeColor =
-	| 'vanilla'
-	| 'robin'
-	| 'forest'
-	| 'amber'
-	| 'sienna'
-	| 'cherry'
-	| 'sakura'
-	| 'aqua';
+function getStatusCodeColor(statusCode: number): BadgeColorType {
+	if (statusCode >= 200 && statusCode < 300) {
+		return 'success';
+	}
+	if (statusCode >= 300 && statusCode < 400) {
+		return 'primary';
+	}
+	if (statusCode >= 400 && statusCode < 500) {
+		return 'warning';
+	}
+	if (statusCode >= 500) {
+		return 'danger';
+	}
+	if (statusCode >= 100 && statusCode < 200) {
+		return 'secondary';
+	}
+	return 'primary';
+}

 interface HttpStatusBadgeProps {
 	statusCode: string | number;
@@ -16,25 +25,6 @@ interface HttpStatusBadgeProps {
 	className?: string;
 }

-function getStatusCodeColor(statusCode: number): BadgeColor {
-	if (statusCode >= 200 && statusCode < 300) {
-		return 'forest'; // Success - green
-	}
-	if (statusCode >= 300 && statusCode < 400) {
-		return 'robin'; // Redirect - blue
-	}
-	if (statusCode >= 400 && statusCode < 500) {
-		return 'amber'; // Client error - amber
-	}
-	if (statusCode >= 500) {
-		return 'cherry'; // Server error - red
-	}
-	if (statusCode >= 100 && statusCode < 200) {
-		return 'vanilla'; // Informational - neutral
-	}
-	return 'robin'; // Default fallback
-}
-
 function HttpStatusBadge({
 	statusCode,
 	testId,
@@ -49,12 +39,7 @@ function HttpStatusBadge({
 	const color = getStatusCodeColor(numericStatusCode);

 	return (
-		<Badge
-			color={color}
-			variant="outline"
-			data-testid={testId}
-			className={className}
-		>
+		<Badge color={color} variant="outlined" testId={testId} className={className}>
 			{statusCode}
 		</Badge>
 	);
--- a/frontend/src/components/InviteMembers/InviteMembers.tsx
+++ b/frontend/src/components/InviteMembers/InviteMembers.tsx
@@ -119,11 +119,12 @@ function InviteMembers({
 							<div className={styles.cellAction}>
 								{canRemoveRow && (
 									<Button
-										variant="ghost"
-										color="destructive"
+										size="md"
+										variant="solid"
+										color="danger"
 										onClick={(): void => removeRow(row.id)}
 										aria-label="Remove row"
-										data-testid={`invite-remove-${row.id}`}
+										testId={`invite-remove-${row.id}`}
 									>
 										<Trash2 size={12} />
 									</Button>
@@ -136,11 +137,12 @@ function InviteMembers({
 				{showAddButton && (
 					<div className={styles.addRow}>
 						<Button
+							size="md"
 							variant="dashed"
 							color="secondary"
 							prefix={<Plus size={12} />}
 							onClick={addRow}
-							data-testid="invite-add-row"
+							testId="invite-add-row"
 						>
 							Add another
 						</Button>
--- a/frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.tsx
+++ b/frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.tsx
@@ -1,8 +1,8 @@
 import { Button } from '@signozhq/ui/button';
 import { Divider } from '@signozhq/ui/divider';
-import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
+import { DropdownMenuSimple as Dropdown } from 'components/DropdownMenu/DropdownMenuSimple';
 import { Typography } from '@signozhq/ui/typography';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { aggregateAttributesResourcesToString } from 'container/LogDetailedView/utils';
 import { toast } from '@signozhq/ui/sonner';
@@ -23,8 +23,6 @@ import { useCopyToClipboard } from 'react-use';

 import styles from './LogDetailsHeader.module.scss';

-const TOOLTIP_CONTENT_PROPS = { className: styles.tooltipContent };
-
 interface LogDetailsHeaderProps {
 	log: ILog;
 	onNavigatePrev: () => void;
@@ -91,6 +89,7 @@ function LogDetailsHeader({
 			<div className={styles.actions}>
 				{showOpenInExplorer && (
 					<Button
+						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<Compass size={16} />}
@@ -104,47 +103,59 @@ function LogDetailsHeader({
 					menu={{ items: menuItems }}
 					align="end"
 					className={styles.dropdownContent}
-					onClick={(e: MouseEvent): void => e.stopPropagation()}
 				>
 					<Button
+						size="md"
 						variant="link"
 						color="secondary"
-						prefix={<Ellipsis size={16} />}
-						data-testid="log-details-header-menu"
-					/>
+						icon
+						aria-label="Log actions"
+						testId="log-details-header-menu"
+						onClick={(e: MouseEvent): void => e.stopPropagation()}
+					>
+						<Ellipsis size={16} />
+					</Button>
 				</Dropdown>

 				<div className={styles.arrows}>
-					<TooltipSimple
+					<Tooltip
 						title="Move to previous log"
 						side="top"
 						open={isPrevDisabled ? false : undefined}
-						tooltipContentProps={TOOLTIP_CONTENT_PROPS}
 					>
 						<Button
+							disabledTooltip={undefined}
+							size="md"
 							variant="outlined"
 							color="secondary"
-							prefix={<ChevronUp size={14} />}
+							icon
+							aria-label="Move to previous log"
 							disabled={isPrevDisabled}
 							onClick={onNavigatePrev}
-							data-testid="log-details-header-prev"
-						/>
-					</TooltipSimple>
-					<TooltipSimple
+							testId="log-details-header-prev"
+						>
+							<ChevronUp size={14} />
+						</Button>
+					</Tooltip>
+					<Tooltip
 						title="Move to next log"
 						side="top"
 						open={isNextDisabled ? false : undefined}
-						tooltipContentProps={TOOLTIP_CONTENT_PROPS}
 					>
 						<Button
+							disabledTooltip={undefined}
+							size="md"
 							variant="outlined"
 							color="secondary"
-							prefix={<ChevronDown size={14} />}
+							icon
+							aria-label="Move to next log"
 							disabled={isNextDisabled}
 							onClick={onNavigateNext}
-							data-testid="log-details-header-next"
-						/>
-					</TooltipSimple>
+							testId="log-details-header-next"
+						>
+							<ChevronDown size={14} />
+						</Button>
+					</Tooltip>
 				</div>
 			</div>
 		</div>
--- a/frontend/src/components/LogDetail/LogHighlights/config.tsx
+++ b/frontend/src/components/LogDetail/LogHighlights/config.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Badge, BadgeColor } from '@signozhq/ui/badge';
+import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import { ILog } from 'types/api/logs/log';
@@ -8,13 +8,13 @@ import styles from './LogHighlights.module.scss';
 import TraceIdField from './TraceIdField';

 // Severity badge color mirrors the LogStateIndicator bar
-const SEVERITY_COLOR: Record<string, BadgeColor> = {
-	[LogType.TRACE]: 'forest',
-	[LogType.DEBUG]: 'aqua',
-	[LogType.INFO]: 'robin',
-	[LogType.WARN]: 'amber',
-	[LogType.ERROR]: 'cherry',
-	[LogType.FATAL]: 'sakura',
+const SEVERITY_COLOR: Record<string, BadgeColorType> = {
+	[LogType.TRACE]: 'success',
+	[LogType.DEBUG]: 'info',
+	[LogType.INFO]: 'primary',
+	[LogType.WARN]: 'warning',
+	[LogType.ERROR]: 'danger',
+	[LogType.FATAL]: 'highlight-danger',
 };

 export interface LogHighlightConfig {
@@ -32,9 +32,13 @@ const getAttr = (log: ILog, key: string): string =>

 const valueBadge = (
 	value: string,
-	options?: { prefix?: ReactNode; color?: BadgeColor },
+	options?: { prefix?: ReactNode; color?: BadgeColorType },
 ): ReactNode => (
-	<Badge color={options?.color ?? 'vanilla'} className={styles.valueBadge}>
+	<Badge
+		variant="solid"
+		color={options?.color ?? 'secondary'}
+		className={styles.valueBadge}
+	>
 		{options?.prefix}
 		<span className={styles.badgeText} title={value}>
 			{value}
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -4,7 +4,7 @@ import { useCopyToClipboard } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { Drawer, Tooltip } from 'antd';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
@@ -328,13 +328,18 @@ function LogDetailInner({
 									mouseLeaveDelay={0}
 								>
 									<Button
+										disabledTooltip={undefined}
+										size="md"
 										variant="outlined"
 										color="secondary"
-										prefix={<ChevronUp size={14} />}
+										icon
+										aria-label="Move to previous log"
 										className="log-arrow-btn log-arrow-btn-up"
 										disabled={isPrevDisabled}
 										onClick={goToPrev}
-									/>
+									>
+										<ChevronUp size={14} />
+									</Button>
 								</Tooltip>
 								<Tooltip
 									title={isNextDisabled ? '' : 'Move to next log'}
@@ -342,18 +347,24 @@ function LogDetailInner({
 									mouseLeaveDelay={0}
 								>
 									<Button
+										disabledTooltip={undefined}
+										size="md"
 										variant="outlined"
 										color="secondary"
-										prefix={<ChevronDown size={14} />}
+										icon
+										aria-label="Move to next log"
 										className="log-arrow-btn log-arrow-btn-down"
 										disabled={isNextDisabled}
 										onClick={goToNext}
-									/>
+									>
+										<ChevronDown size={14} />
+									</Button>
 								</Tooltip>
 							</div>
 							{handleOpenInExplorer && (
 								<div>
 									<Button
+										size="md"
 										variant="outlined"
 										color="secondary"
 										prefix={<Compass size={16} />}
@@ -410,7 +421,10 @@ function LogDetailInner({
 				{isLogDetailsV2 && <div className="log-detail-drawer__section-divider" />}

 				<div className="tabs-and-search">
-					<ToggleGroupSimple
+					<ToggleGroup
+						variant="outlined"
+						color="secondary"
+						size="sm"
 						type="single"
 						className="views-tabs"
 						onChange={handleModeChange}
@@ -473,9 +487,12 @@ function LogDetailInner({
 									variant="link"
 									color="secondary"
 									size="sm"
-									prefix={<Filter size="lg" />}
+									icon
+									aria-label="Show Filters"
 									onClick={handleFilterVisible}
-								/>
+								>
+									<Filter size="lg" />
+								</Button>
 							</Tooltip>
 						)}

@@ -493,9 +510,14 @@ function LogDetailInner({
 									variant="link"
 									color="secondary"
 									size="sm"
-									prefix={<Copy size={12} />}
+									icon
+									aria-label={
+										selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
+									}
 									onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
-								/>
+								>
+									<Copy size={12} />
+								</Button>
 							</Tooltip>
 						)}
 					</div>
--- a/frontend/src/components/MarkdownEditor/EditorToolbar.tsx
+++ b/frontend/src/components/MarkdownEditor/EditorToolbar.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import {
 	Bold,
 	CodeXml,
@@ -11,7 +11,7 @@ import {
 	Type,
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';

 import InsertVariableMenu from './InsertVariableMenu';
@@ -20,7 +20,7 @@ import type { EditorCommand, EditorVariable } from './types';

 import styles from './MarkdownEditor.module.scss';

-const COMMAND_ICONS: Record<string, ReactNode> = {
+const COMMAND_ICONS: Record<string, ReactElement> = {
 	heading: <Heading size={14} />,
 	bold: <Bold size={14} />,
 	italic: <Italic size={14} />,
@@ -61,20 +61,22 @@ function EditorToolbar({
 			<span className={styles.toolbarDivider} />
 			<div className={styles.commands}>
 				{commands.map((command) => (
-					<TooltipSimple key={command.id} title={command.label}>
+					<Tooltip key={command.id} title={command.label}>
 						<Button
+							disabledTooltip={undefined}
 							type="button"
 							variant="ghost"
 							color="secondary"
-							size="icon"
+							size="sm"
+							icon
 							disabled={disabled}
 							aria-label={command.label}
-							data-testid={`markdown-command-${command.id}`}
+							testId={`markdown-command-${command.id}`}
 							onClick={(): void => onRunCommand(command)}
 						>
 							{COMMAND_ICONS[command.id]}
 						</Button>
-					</TooltipSimple>
+					</Tooltip>
 				))}
 			</div>
 			<div className={styles.toolbarEnd}>
--- a/frontend/src/components/MarkdownEditor/InsertVariableMenu.tsx
+++ b/frontend/src/components/MarkdownEditor/InsertVariableMenu.tsx
@@ -1,7 +1,10 @@
 import { useMemo, useState } from 'react';
-import { ChevronDown, DollarSign, Search } from '@signozhq/icons';
+import { ChevronDown, DollarSign } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import {
+	DropdownMenuSimple,
+	type MenuItem,
+} from 'components/DropdownMenu/DropdownMenuSimple';

 import type { EditorVariable } from './types';

@@ -66,12 +69,12 @@ function InsertVariableMenu({
 				items,
 				search: {
 					placeholder: 'Search variables',
-					searchIcon: <Search size={14} />,
 					onSearchChange: setSearch,
 				},
 			}}
 		>
 			<Button
+				disabledTooltip={undefined}
 				type="button"
 				variant="outlined"
 				color="secondary"
@@ -80,7 +83,7 @@ function InsertVariableMenu({
 				prefix={<DollarSign size={14} className={styles.insertVariableIcon} />}
 				suffix={<ChevronDown size={14} />}
 				className={styles.insertVariable}
-				data-testid="markdown-insert-variable"
+				testId="markdown-insert-variable"
 			>
 				Insert variable
 			</Button>
--- a/frontend/src/components/MarkdownEditor/MarkdownHelp.tsx
+++ b/frontend/src/components/MarkdownEditor/MarkdownHelp.tsx
@@ -15,9 +15,10 @@ function MarkdownHelp(): JSX.Element {
 					type="button"
 					variant="ghost"
 					color="secondary"
-					size="icon"
+					size="sm"
+					icon
 					aria-label="Markdown syntax help"
-					data-testid="markdown-help-trigger"
+					testId="markdown-help-trigger"
 				>
 					<CircleHelp size={14} />
 				</Button>
--- a/frontend/src/components/MembersTable/MembersTable.tsx
+++ b/frontend/src/components/MembersTable/MembersTable.tsx
@@ -55,14 +55,14 @@ function NameEmailCell({
 function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {
 	if (status === MemberStatus.Active) {
 		return (
-			<Badge color="forest" variant="outline">
+			<Badge color="success" variant="outlined">
 				ACTIVE
 			</Badge>
 		);
 	}
 	if (status === MemberStatus.Deleted) {
 		return (
-			<Badge color="cherry" variant="outline">
+			<Badge color="danger" variant="outlined">
 				DELETED
 			</Badge>
 		);
@@ -70,13 +70,17 @@ function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {

 	if (status === MemberStatus.Invited) {
 		return (
-			<Badge color="amber" variant="outline">
+			<Badge color="warning" variant="outlined">
 				INVITED
 			</Badge>
 		);
 	}

-	return <Badge color="vanilla">⎯</Badge>;
+	return (
+		<Badge variant="solid" color="secondary">
+			⎯
+		</Badge>
+	);
 }

 function MembersEmptyState({
--- a/frontend/src/components/NewSelect/CustomMultiSelect.tsx
+++ b/frontend/src/components/NewSelect/CustomMultiSelect.tsx
@@ -20,7 +20,7 @@ import {
 import { Color } from '@signozhq/design-tokens';
 import { Button, Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
-import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
+import { TooltipProvider, Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
@@ -758,9 +758,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					tabIndex={isActive ? 0 : -1}
 				>
 					<Checkbox
+						color="primary"
 						value={isSelected}
 						className="option-checkbox"
-						onClick={(e): void => selectFromButton(e, 'checkbox')}
+						onChange={(): void => {
+							handleItemSelection('checkbox');
+							setActiveChipIndex(-1);
+							setActiveIndex(-1);
+						}}
 					>
 						<div className="option-content">
 							<Typography.Text truncate={1} className="option-label-text">
@@ -1595,7 +1600,11 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							}}
 						>
 							<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-								<Checkbox value={allOptionsSelected} className="option-checkbox">
+								<Checkbox
+									color="primary"
+									value={allOptionsSelected}
+									className="option-checkbox"
+								>
 									<div className="option-content">
 										<div className="all-option-text">ALL</div>
 									</div>
@@ -1973,13 +1982,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				// `label` arrives already cut to maxTagTextLength, so the reveal reads the
 				// option's own text (falling back to the raw value for freeform tags).
 				return (
-					<TooltipSimple
-						side="top"
-						delayDuration={300}
-						title={findOptionLabelText(options, value)}
-					>
+					<Tooltip side="top" title={findOptionLabelText(options, value)}>
 						{tag}
-					</TooltipSimple>
+					</Tooltip>
 				);
 			}

--- a/frontend/src/components/NewSelect/test/CustomSelect.test.tsx
+++ b/frontend/src/components/NewSelect/test/CustomSelect.test.tsx
@@ -1,4 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';

 import CustomSelect from '../CustomSelect';

@@ -203,4 +204,21 @@ describe('CustomSelect Component', () => {
 		// Check onChange was called
 		expect(handleChange).toHaveBeenCalled();
 	});
+	it('tells the consumer its search was cleared when the dropdown closes', async () => {
+		// The component clears its own search text on close. A consumer running a
+		// server-side search needs to hear that, or its results outlive the dropdown.
+		const onSearch = jest.fn();
+		const user = userEvent.setup();
+		render(<CustomSelect options={mockOptions} onSearch={onSearch} />);
+
+		const selectElement = screen.getByRole('combobox');
+		await user.click(selectElement);
+		await user.type(selectElement, 'opt');
+
+		expect(onSearch).toHaveBeenLastCalledWith('opt');
+
+		await user.keyboard('{Escape}');
+
+		expect(onSearch).toHaveBeenLastCalledWith('');
+	});
 });
--- a/frontend/src/components/NewSelect/styles.scss
+++ b/frontend/src/components/NewSelect/styles.scss
@@ -258,6 +258,10 @@ $custom-border-color: #2c3044;
 		overflow: hidden;

 		.group-label {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+
 			font-weight: 500;
 			padding: 4px 12px;
 			font-size: 13px;
@@ -442,7 +446,7 @@ $custom-border-color: #2c3044;
 		.group-label {
 			display: flex;
 			align-items: center;
-			justify-content: space-between;
+			gap: 4px;

 			font-weight: 500;
 			padding: 4px 12px;
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import cx from 'classnames';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
@@ -562,7 +562,10 @@ function QueryAddOns({
 				</div>
 			)}

-			<ToggleGroupSimple
+			<ToggleGroup
+				variant="outlined"
+				color="secondary"
+				size="sm"
 				type="multiple"
 				className="add-ons-tabs"
 				value={selectedViews.map((view) => view.key)}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
@@ -724,26 +724,62 @@ function QuerySearch({
 	// Helper function to render a badge for the current context mode
 	const renderContextBadge = (): JSX.Element => {
 		if (!editingMode) {
-			return <Badge color="vanilla">Unknown</Badge>;
+			return (
+				<Badge variant="solid" color="secondary">
+					Unknown
+				</Badge>
+			);
 		}

 		switch (editingMode) {
 			case 'key':
-				return <Badge color="robin">Key</Badge>;
+				return (
+					<Badge variant="solid" color="primary">
+						Key
+					</Badge>
+				);
 			case 'operator':
-				return <Badge color="sakura">Operator</Badge>;
+				return (
+					<Badge variant="solid" color="highlight-danger">
+						Operator
+					</Badge>
+				);
 			case 'value':
-				return <Badge color="forest">Value</Badge>;
+				return (
+					<Badge variant="solid" color="success">
+						Value
+					</Badge>
+				);
 			case 'conjunction':
-				return <Badge color="amber">Conjunction</Badge>;
+				return (
+					<Badge variant="solid" color="warning">
+						Conjunction
+					</Badge>
+				);
 			case 'function':
-				return <Badge color="aqua">Function</Badge>;
+				return (
+					<Badge variant="solid" color="info">
+						Function
+					</Badge>
+				);
 			case 'parenthesis':
-				return <Badge color="sakura">Parenthesis</Badge>;
+				return (
+					<Badge variant="solid" color="highlight-danger">
+						Parenthesis
+					</Badge>
+				);
 			case 'bracketList':
-				return <Badge color="cherry">Bracket List</Badge>;
+				return (
+					<Badge variant="solid" color="danger">
+						Bracket List
+					</Badge>
+				);
 			default:
-				return <Badge color="vanilla">Unknown</Badge>;
+				return (
+					<Badge variant="solid" color="secondary">
+						Unknown
+					</Badge>
+				);
 		}
 	};

@@ -1465,27 +1501,44 @@ function QuerySearch({
 					Currently editing: {renderContextBadge()}
 					{queryContext?.keyToken && (
 						<span className="triplet-info">
-							Key: <Badge color="vanilla">{queryContext.keyToken}</Badge>
+							Key:{' '}
+							<Badge variant="solid" color="secondary">
+								{queryContext.keyToken}
+							</Badge>
 						</span>
 					)}
 					{queryContext?.operatorToken && (
 						<span className="triplet-info">
-							Operator: <Badge color="vanilla">{queryContext.operatorToken}</Badge>
+							Operator:{' '}
+							<Badge variant="solid" color="secondary">
+								{queryContext.operatorToken}
+							</Badge>
 						</span>
 					)}
 					{queryContext?.valueToken && (
 						<span className="triplet-info">
-							Value: <Badge color="vanilla">{queryContext.valueToken}</Badge>
+							Value:{' '}
+							<Badge variant="solid" color="secondary">
+								{queryContext.valueToken}
+							</Badge>
 						</span>
 					)}
 					{queryContext?.currentPair && (
 						<span className="triplet-info query-pair-info">
-							Current pair: <Badge color="robin">{queryContext.currentPair.key}</Badge>
-							<Badge color="sakura">{queryContext.currentPair.operator}</Badge>
+							Current pair:{' '}
+							<Badge variant="solid" color="primary">
+								{queryContext.currentPair.key}
+							</Badge>
+							<Badge variant="solid" color="highlight-danger">
+								{queryContext.currentPair.operator}
+							</Badge>
 							{queryContext.currentPair.value && (
-								<Badge color="forest">{queryContext.currentPair.value}</Badge>
+								<Badge variant="solid" color="success">
+									{queryContext.currentPair.value}
+								</Badge>
 							)}
 							<Badge
+								variant="solid"
 								color={queryContext.currentPair.isComplete ? 'success' : 'warning'}
 							>
 								{queryContext.currentPair.isComplete ? 'Complete' : 'Incomplete'}
@@ -1495,7 +1548,9 @@ function QuerySearch({
 					{queryContext?.queryPairs && queryContext.queryPairs.length > 0 && (
 						<span className="triplet-info">
 							Total pairs:{' '}
-							<Badge color="robin">{queryContext.queryPairs.length}</Badge>
+							<Badge variant="solid" color="primary">
+								{queryContext.queryPairs.length}
+							</Badge>
 						</span>
 					)}
 				</div>
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { DropdownMenuSimple } from 'components/DropdownMenu/DropdownMenuSimple';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxValueRow.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxValueRow.tsx
@@ -2,7 +2,7 @@ import { Button } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';

 interface CheckboxValueRowProps {
 	value: string;
@@ -28,6 +28,8 @@ function CheckboxValueRow({
 	return (
 		<div className="value">
 			<Checkbox
+				color="primary"
+				disabledTooltip={undefined}
 				onChange={(isChecked): void => onCheckboxChange(isChecked === true)}
 				value={checked}
 				disabled={disabled}
@@ -47,11 +49,11 @@ function CheckboxValueRow({
 				{customRendererForValue ? (
 					customRendererForValue(value)
 				) : (
-					<TooltipSimple title={String(value)} side="top" align="start">
+					<Tooltip title={String(value)} side="top" align="start">
 						<Typography.Text className="value-string" truncate={1}>
 							{String(value)}
 						</Typography.Text>
-					</TooltipSimple>
+					</Tooltip>
 				)}
 				<div className="value-actions">
 					<Button type="text" className="only-btn">
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { ChevronDown, ChevronRight, Search, Undo2 } from '@signozhq/icons';

@@ -63,9 +63,7 @@ export function CheckboxFilterV2Header({
 					<ChevronRight size={13} cursor="pointer" />
 				)}
 				{isTitleTruncated ? (
-					<TooltipSimple title={title} delayDuration={400}>
-						{titleText}
-					</TooltipSimple>
+					<Tooltip title={title}>{titleText}</Tooltip>
 				) : (
 					titleText
 				)}
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.tsx
@@ -54,6 +54,7 @@ export function CheckboxFilterV2ValueRow({
 		>
 			<div className={styles.checkbox}>
 				<Checkbox
+					disabledTooltip={undefined}
 					onChange={(isChecked): void =>
 						onCheckboxChange(isChecked === true, checkedState)
 					}
@@ -97,7 +98,7 @@ export function CheckboxFilterV2ValueRow({
 				<div className={styles.actions}>
 					{badge && (
 						<Badge
-							variant="outline"
+							variant="outlined"
 							color={badge.color}
 							className={styles.badge}
 							testId={`badge-${badge.key}`}
@@ -105,10 +106,20 @@ export function CheckboxFilterV2ValueRow({
 							{badge.label}
 						</Badge>
 					)}
-					<Button variant="ghost" color="secondary" className={styles.onlyButton}>
+					<Button
+						size="md"
+						variant="ghost"
+						color="secondary"
+						className={styles.onlyButton}
+					>
 						{onlyButtonLabel}
 					</Button>
-					<Button variant="ghost" color="secondary" className={styles.toggleButton}>
+					<Button
+						size="md"
+						variant="ghost"
+						color="secondary"
+						className={styles.toggleButton}
+					>
 						Toggle
 					</Button>
 				</div>
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/tests/CheckboxFilterV2ValueRow.test.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/tests/CheckboxFilterV2ValueRow.test.tsx
@@ -64,7 +64,7 @@ describe('CheckboxFilterV2ValueRow', () => {
 			render(
 				<CheckboxFilterV2ValueRow
 					{...defaultProps}
-					badge={{ key: 'related', label: 'Related', color: 'robin' }}
+					badge={{ key: 'related', label: 'Related', color: 'primary' }}
 				/>,
 			);

--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/itemRules.ts
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/itemRules.ts
@@ -9,7 +9,7 @@ export enum SectionType {
 export interface BadgeConfig {
 	key: string;
 	label: string;
-	color: 'robin' | 'warning' | 'secondary';
+	color: 'primary' | 'warning' | 'secondary';
 }

 export interface ItemConfig {
--- a/frontend/src/components/QuickFilters/FilterRenderers/shared/SectionActionButton/SectionActionButton.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/shared/SectionActionButton/SectionActionButton.tsx
@@ -23,21 +23,22 @@ export function SectionActionButton({
 }: SectionActionButtonProps): JSX.Element {
 	return (
 		<Tooltip title={tooltip}>
-			<Button
-				variant="link"
-				color="secondary"
-				size="sm"
-				className={classNames(styles.iconBtn, className)}
-				onMouseDown={(e): void => e.preventDefault()}
-				onClick={(e): void => {
-					e.stopPropagation();
-					e.preventDefault();
-					onClick();
-				}}
-				data-testid={testId}
-			>
-				{icon}
-			</Button>
+			<span onMouseDown={(e): void => e.preventDefault()}>
+				<Button
+					variant="link"
+					color="secondary"
+					size="sm"
+					className={classNames(styles.iconBtn, className)}
+					onClick={(e): void => {
+						e.stopPropagation();
+						e.preventDefault();
+						onClick();
+					}}
+					testId={testId}
+				>
+					{icon}
+				</Button>
+			</span>
 		</Tooltip>
 	);
 }
--- a/frontend/src/components/QuickFilters/QuickFilters.tsx
+++ b/frontend/src/components/QuickFilters/QuickFilters.tsx
@@ -232,48 +232,55 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		<section className="right-actions">
 			<Tooltip title="Reset All">
 				<Button
+					size="md"
 					variant="link"
 					color="secondary"
+					icon
 					aria-label="Reset All"
 					className="right-action-icon-container"
 					onClick={handleReset}
-					prefix={<RefreshCw className="sync-icon" size="md" />}
-				/>
+				>
+					<RefreshCw className="sync-icon" size="md" />
+				</Button>
 			</Tooltip>
 			{showFilterCollapse && (
 				<Tooltip title="Collapse Filters">
 					<Button
+						size="md"
 						variant="link"
 						color="secondary"
+						icon
 						aria-label="Collapse Filters"
 						className="right-action-icon-container"
 						onClick={handleFilterVisibilityChange}
-						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />}
-					/>
+					>
+						<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />
+					</Button>
 				</Tooltip>
 			)}
 			{isDynamicFilters && (
 				<AuthZButton
+					size="md"
 					checks={QuickFilterManagePermissions}
 					variant="link"
 					color="secondary"
+					icon
 					aria-label="Settings"
 					className={classNames('right-action-icon-container', {
 						active: isSettingsOpen,
 					})}
 					onClick={(): void => setIsSettingsOpen(true)}
 					testId="settings-icon-container"
-					prefix={
-						<Tooltip title="Settings" open={isSettingsDisabled ? false : undefined}>
-							<SettingsIcon
-								className="settings-icon"
-								data-testid="settings-icon"
-								width={14}
-								height={14}
-							/>
-						</Tooltip>
-					}
-				/>
+				>
+					<Tooltip title="Settings" open={isSettingsDisabled ? false : undefined}>
+						<SettingsIcon
+							className="settings-icon"
+							data-testid="settings-icon"
+							width={14}
+							height={14}
+						/>
+					</Tooltip>
+				</AuthZButton>
 			)}
 		</section>
 	);
@@ -284,6 +291,8 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				<div className="api-quick-filters-header">
 					<Typography.Text>Show IP addresses</Typography.Text>
 					<Switch
+						color="primary"
+						textPlacement="right"
 						style={{ marginLeft: 'auto' }}
 						value={showIP ?? true}
 						onChange={(checked): void => {
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/index.tsx
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/index.tsx
@@ -61,6 +61,7 @@ function AnnouncementTooltip({
 				<p className="announcement-tooltip__message">{message}</p>
 				<div className="announcement-tooltip__footer">
 					<Button
+						size="md"
 						variant="solid"
 						color="primary"
 						onClick={closeTooltip}
--- a/frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx
+++ b/frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { refreshLicense } from 'api/generated/services/licenses';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { RefreshCcw } from '@signozhq/icons';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { buildLicenseUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/license.permissions';
@@ -49,7 +49,7 @@ function RefreshPaymentStatus({
 		>
 			<Button
 				variant="link"
-				color={type === 'text' ? 'none' : 'secondary'}
+				color="secondary"
 				size="md"
 				className={className}
 				onClick={handleRefreshPaymentStatus}
@@ -64,7 +64,7 @@ function RefreshPaymentStatus({
 	return (
 		<span className="refresh-payment-status-btn-wrapper">
 			{type === 'tooltip' ? (
-				<TooltipSimple title={t('refreshPaymentStatus')}>{button}</TooltipSimple>
+				<Tooltip title={t('refreshPaymentStatus')}>{button}</Tooltip>
 			) : (
 				button
 			)}
--- a/frontend/src/components/ResizeTable/DynamicColumnTable.tsx
+++ b/frontend/src/components/ResizeTable/DynamicColumnTable.tsx
@@ -5,7 +5,10 @@ import type {
 	TableColumnType as ColumnType,
 } from 'antd';
 import { Button, Flex } from 'antd';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import {
+	DropdownMenuSimple,
+	type MenuItem,
+} from 'components/DropdownMenu/DropdownMenuSimple';
 import { Switch } from '@signozhq/ui/switch';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
@@ -95,6 +98,8 @@ function DynamicColumnTable({
 				>
 					<div>{column.title?.toString()}</div>
 					<Switch
+						color="primary"
+						textPlacement="right"
 						value={columnsData?.findIndex((c) => c.key === column.key) !== -1}
 						onChange={onToggleHandler(index, column)}
 					/>
--- a/frontend/src/components/RolesSelect/RolesSelect.tsx
+++ b/frontend/src/components/RolesSelect/RolesSelect.tsx
@@ -152,7 +152,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 				optionFilterProp="label"
 				optionRender={(option): JSX.Element => (
 					<div style={{ pointerEvents: 'none' }}>
-						<Checkbox value={value.includes(option.value as string)}>
+						<Checkbox color="primary" value={value.includes(option.value as string)}>
 							{option.label}
 						</Checkbox>
 					</div>
--- a/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx
@@ -24,6 +24,7 @@ function KeyCreatedPhase({
 				<div className="add-key-modal__key-display">
 					<span className="add-key-modal__key-text">{createdKey.key}</span>
 					<Button
+						size="md"
 						variant="link"
 						color="secondary"
 						onClick={onCopy}
@@ -36,7 +37,9 @@ function KeyCreatedPhase({

 			<div className="add-key-modal__expiry-meta">
 				<span className="add-key-modal__expiry-label">Expiration</span>
-				<Badge color="vanilla">{expiryLabel}</Badge>
+				<Badge variant="solid" color="secondary">
+					{expiryLabel}
+				</Badge>
 			</div>

 			<div className="add-key-modal__callout-wrapper">
--- a/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx
@@ -2,7 +2,7 @@ import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
@@ -68,7 +68,9 @@ function KeyFormPhase({
 								name="expiryMode"
 								control={control}
 								render={({ field }): JSX.Element => (
-									<ToggleGroupSimple
+									<ToggleGroup
+										variant="outlined"
+										color="secondary"
 										type="single"
 										value={field.value}
 										onChange={(val: string): void => {
@@ -117,6 +119,7 @@ function KeyFormPhase({
 			<div className="add-key-modal__footer">
 				<div className="add-key-modal__footer-right">
 					<Button
+						size="md"
 						variant="solid"
 						color="secondary"
 						onClick={onClose}
@@ -125,16 +128,22 @@ function KeyFormPhase({
 						Cancel
 					</Button>
 					<AuthZButton
+						size="md"
 						checks={checks}
 						authZEnabled={!!accountId}
 						withPortal={false}
-						type="submit"
-						form={FORM_ID}
+						type="button"
 						variant="solid"
 						color="primary"
 						loading={isSubmitting}
 						disabled={!isValid}
 						testId="add-key-submit-btn"
+						onClick={(): void => {
+							const form = document.getElementById(FORM_ID);
+							if (form instanceof HTMLFormElement) {
+								form.requestSubmit();
+							}
+						}}
 					>
 						Create Key
 					</AuthZButton>
--- a/frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx
@@ -80,15 +80,16 @@ function DeleteAccountModal(): JSX.Element {

 	const footer = (
 		<div className="sa-delete-dialog__footer">
-			<Button variant="solid" color="secondary" onClick={handleCancel}>
+			<Button size="md" variant="solid" color="secondary" onClick={handleCancel}>
 				<X size={12} />
 				Cancel
 			</Button>
 			<AuthZButton
+				size="md"
 				checks={[buildSADeletePermission(accountId ?? '')]}
 				authZEnabled={!!accountId}
 				variant="solid"
-				color="destructive"
+				color="danger"
 				loading={isDeleting}
 				onClick={handleConfirm}
 				data-testid="confirm-delete-btn"
--- a/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx
@@ -4,7 +4,7 @@ import { LockKeyhole, Trash2, X } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
@@ -103,7 +103,9 @@ function EditKeyForm({
 						name="expiryMode"
 						control={control}
 						render={({ field }): JSX.Element => (
-							<ToggleGroupSimple
+							<ToggleGroup
+								variant="outlined"
+								color="secondary"
 								type="single"
 								value={field.value}
 								onChange={(val: string): void => {
@@ -113,6 +115,9 @@ function EditKeyForm({
 								}}
 								size="sm"
 								disabled={!canUpdate}
+								disabledTooltip={
+									canUpdate ? undefined : 'You do not have permission to update this key'
+								}
 								className="edit-key-modal__expiry-toggle"
 								items={[
 									{ value: ExpiryMode.NONE, label: 'No Expiration' },
@@ -150,7 +155,7 @@ function EditKeyForm({

 				<div className="edit-key-modal__meta">
 					<span className="edit-key-modal__meta-label">Last Observed At</span>
-					<Badge color="vanilla">
+					<Badge variant="solid" color="secondary">
 						{formatLastObservedAt(
 							keyItem?.lastObservedAt ?? null,
 							formatTimezoneAdjustedTimestamp,
@@ -161,13 +166,14 @@ function EditKeyForm({

 			<div className="edit-key-modal__footer">
 				<AuthZButton
+					size="md"
 					checks={[
 						buildAPIKeyDeletePermission(keyItem?.id ?? ''),
 						buildSADetachPermission(accountId ?? ''),
 					]}
 					authZEnabled={!!accountId && !!keyItem?.id}
 					variant="link"
-					color="destructive"
+					color="danger"
 					onClick={onRevokeClick}
 					withPortal={false}
 				>
@@ -175,20 +181,26 @@ function EditKeyForm({
 					Revoke Key
 				</AuthZButton>
 				<div className="edit-key-modal__footer-right">
-					<Button variant="solid" color="secondary" onClick={onClose}>
+					<Button size="md" variant="solid" color="secondary" onClick={onClose}>
 						<X size={12} />
 						Cancel
 					</Button>
 					<AuthZButton
+						size="md"
 						checks={[buildAPIKeyUpdatePermission(keyItem?.id ?? '')]}
 						authZEnabled={!!accountId && !!keyItem?.id}
-						type="submit"
-						form={FORM_ID}
+						type="button"
 						variant="solid"
 						color="primary"
 						loading={isSaving}
 						disabled={!isDirty}
 						withPortal={false}
+						onClick={(): void => {
+							const form = document.getElementById(FORM_ID);
+							if (form instanceof HTMLFormElement) {
+								form.requestSubmit();
+							}
+						}}
 					>
 						Save Changes
 					</AuthZButton>
--- a/frontend/src/components/ServiceAccountDrawer/KeysTab.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/KeysTab.tsx
@@ -122,9 +122,11 @@ function buildColumns({
 							]}
 							authZEnabled={!isDisabled && !!accountId}
 							withPortal={false}
-							variant="ghost"
+							variant="solid"
 							size="sm"
-							color="destructive"
+							color="danger"
+							icon
+							aria-label="Revoke Key"
 							disabled={isDisabled}
 							onClick={(e): void => {
 								e.stopPropagation();
@@ -213,6 +215,7 @@ function KeysTab({
 					</a>
 				</p>
 				<AuthZButton
+					size="md"
 					checks={[APIKeyCreatePermission, buildSAAttachPermission(accountId)]}
 					authZEnabled={!isDisabled && !!accountId}
 					withPortal={false}
--- a/frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx
@@ -122,11 +122,12 @@ function OverviewTab({
 					<span className="sa-drawer__input-text">{account.id || '—'}</span>
 					{account.id && (
 						<Button
+							size="md"
 							variant="link"
 							color="secondary"
 							onClick={handleCopyId}
 							className="sa-drawer__copy-btn"
-							data-testid="copy-id-btn"
+							testId="copy-id-btn"
 						>
 							{hasCopiedId ? <Check size={14} /> : <Copy size={14} />}
 						</Button>
@@ -156,7 +157,7 @@ function OverviewTab({
 								localRoles.map((roleId) => {
 									const role = availableRoles.find((r) => r.id === roleId);
 									return (
-										<Badge key={roleId} color="vanilla">
+										<Badge variant="solid" key={roleId} color="secondary">
 											{role?.name ?? roleId}
 										</Badge>
 									);
@@ -187,15 +188,15 @@ function OverviewTab({
 				<div className="sa-drawer__meta-item">
 					<span className="sa-drawer__meta-label">Status</span>
 					{account.status?.toUpperCase() === 'ACTIVE' ? (
-						<Badge color="forest" variant="outline">
+						<Badge color="success" variant="outlined">
 							ACTIVE
 						</Badge>
 					) : account.status?.toUpperCase() === 'DELETED' ? (
-						<Badge color="cherry" variant="outline">
+						<Badge color="danger" variant="outlined">
 							DELETED
 						</Badge>
 					) : (
-						<Badge color="vanilla" variant="outline" className="sa-status-badge">
+						<Badge color="secondary" variant="outlined" className="sa-status-badge">
 							{account.status ? account.status.toUpperCase() : 'UNKNOWN'}
 						</Badge>
 					)}
@@ -203,12 +204,16 @@ function OverviewTab({

 				<div className="sa-drawer__meta-item">
 					<span className="sa-drawer__meta-label">Created At</span>
-					<Badge color="vanilla">{formatTimestamp(account.createdAt)}</Badge>
+					<Badge variant="solid" color="secondary">
+						{formatTimestamp(account.createdAt)}
+					</Badge>
 				</div>

 				<div className="sa-drawer__meta-item">
 					<span className="sa-drawer__meta-label">Updated At</span>
-					<Badge color="vanilla">{formatTimestamp(account.updatedAt)}</Badge>
+					<Badge variant="solid" color="secondary">
+						{formatTimestamp(account.updatedAt)}
+					</Badge>
 				</div>
 			</div>

--- a/frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx
@@ -41,18 +41,19 @@ export function RevokeKeyFooter({
 }: RevokeKeyFooterProps): JSX.Element {
 	return (
 		<>
-			<Button variant="solid" color="secondary" onClick={onCancel}>
+			<Button size="md" variant="solid" color="secondary" onClick={onCancel}>
 				<X size={12} />
 				Cancel
 			</Button>
 			<AuthZButton
+				size="md"
 				checks={[
 					buildAPIKeyDeletePermission(keyId ?? ''),
 					buildSADetachPermission(accountId ?? ''),
 				]}
 				authZEnabled={!!accountId && !!keyId}
 				variant="solid"
-				color="destructive"
+				color="danger"
 				loading={isRevoking}
 				onClick={onConfirm}
 				withPortal={false}
--- a/frontend/src/components/ServiceAccountDrawer/SaveErrorItem.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/SaveErrorItem.tsx
@@ -40,8 +40,9 @@ function SaveErrorItem({
 				</span>
 				{onRetry && !isRetrying && (
 					<Button
+						size="md"
 						variant="link"
-						color="none"
+						color="secondary"
 						aria-label="Retry"
 						onClick={async (e): Promise<void> => {
 							e.stopPropagation();
--- a/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx
@@ -10,7 +10,7 @@ import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { toast } from '@signozhq/ui/sonner';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup } from '@signozhq/ui/toggle-group';
 import { Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -375,11 +375,12 @@ function ServiceAccountDrawer({
 			activeTab === ServiceAccountDrawerTab.Overview && !isDeleted && open ? (
 				<div className="sa-drawer__footer">
 					<AuthZButton
+						size="md"
 						checks={[buildSADeletePermission(selectedAccountId ?? '')]}
 						authZEnabled={!!selectedAccountId}
 						withPortal={false}
 						variant="link"
-						color="destructive"
+						color="danger"
 						onClick={(): void => {
 							void setIsDeleteOpen(true);
 						}}
@@ -388,11 +389,17 @@ function ServiceAccountDrawer({
 						Delete Service Account
 					</AuthZButton>
 					<div className="sa-drawer__footer-right">
-						<Button variant="outlined" color="secondary" onClick={handleClose}>
+						<Button
+							size="md"
+							variant="outlined"
+							color="secondary"
+							onClick={handleClose}
+						>
 							<X size={14} />
 							Cancel
 						</Button>
 						<AuthZButton
+							size="md"
 							checks={[
 								buildSAReadPermission(selectedAccountId ?? ''),
 								buildSAUpdatePermission(selectedAccountId ?? ''),
@@ -426,7 +433,9 @@ function ServiceAccountDrawer({
 	const body = (
 		<div className="sa-drawer__layout">
 			<div className="sa-drawer__tabs">
-				<ToggleGroupSimple
+				<ToggleGroup
+					variant="outlined"
+					color="secondary"
 					type="single"
 					value={activeTab}
 					size="sm"
--- a/frontend/src/components/ServiceAccountsTable/utils.tsx
+++ b/frontend/src/components/ServiceAccountsTable/utils.tsx
@@ -28,20 +28,20 @@ export function NameEmailCell({
 export function StatusBadge({ status }: { status: string }): JSX.Element {
 	if (status?.toUpperCase() === 'ACTIVE') {
 		return (
-			<Badge color="forest" variant="outline">
+			<Badge color="success" variant="outlined">
 				ACTIVE
 			</Badge>
 		);
 	}
 	if (status?.toUpperCase() === 'DELETED') {
 		return (
-			<Badge color="cherry" variant="outline">
+			<Badge color="danger" variant="outlined">
 				DELETED
 			</Badge>
 		);
 	}
 	return (
-		<Badge color="vanilla" variant="outline" className="sa-status-badge">
+		<Badge color="secondary" variant="outlined" className="sa-status-badge">
 			{status ? status.toUpperCase() : 'UNKNOWN'}
 		</Badge>
 	);
--- a/frontend/src/components/SignozModal/stories/SignozModal.stories.tsx
+++ b/frontend/src/components/SignozModal/stories/SignozModal.stories.tsx
@@ -13,7 +13,13 @@ function ModalFixture(): JSX.Element {

 	return (
 		<>
-			<Button data-testid="open-signoz-modal" onClick={(): void => setOpen(true)}>
+			<Button
+				size="md"
+				variant="solid"
+				color="primary"
+				testId="open-signoz-modal"
+				onClick={(): void => setOpen(true)}
+			>
 				Open modal
 			</Button>
 			<SignozModal
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Manika Malhotra	911ee2912d	feat(calendar): select the calendar through data-slot	2026-09-23 21:57:22 +05:30
Manika Malhotra	d4a4217865	feat(dropdown): adopt Dropdown in place of DropdownMenu	2026-09-23 21:56:48 +05:30
Manika Malhotra	925cbafde6	feat(tabs): adopt the items API	2026-09-23 21:56:30 +05:30
Manika Malhotra	1f57634472	feat(radio-group): adopt the items API	2026-09-23 21:56:09 +05:30
Manika Malhotra	662c91884a	feat(toggle-group): adopt the items API	2026-09-23 21:55:50 +05:30
Manika Malhotra	95bbd1b501	feat(tooltip): adopt the single Tooltip API	2026-09-23 21:55:23 +05:30
Manika Malhotra	f0037ae4bd	feat(checkbox): adopt the reworked Checkbox API	2026-09-23 21:55:00 +05:30
Manika Malhotra	8c3688131e	feat(switch): adopt the reworked Switch API	2026-09-23 21:54:38 +05:30
Manika Malhotra	db286c4f92	feat(badge): adopt the reworked Badge palette	2026-09-23 21:54:16 +05:30
Manika Malhotra	e14a6add4e	feat(button-group): import ButtonGroup from its own entry	2026-09-23 21:53:56 +05:30
Manika Malhotra	3e2caa8110	feat(button): adopt the reworked Button API	2026-09-23 21:53:31 +05:30
Jugal Kishore	ff80758e1c	feat(onboarding): add Cursor, Cline, vLLM, SGLang, Karpenter datasources (#12944 ) #### Description - Adds 20 data sources to the onboarding picker: Cursor, Antigravity CLI, Qwen Code, DeepSeek Harness, Meta Muse Code, Meta Muse Spark, OpenAI Agents SDK, Cline, E2B Sandbox, Daytona Sandbox, Vercel Sandbox, Modal, vLLM, SGLang, Karpenter, Podman, EMQX, AWS RDS Aurora, GCP Cloud Storage, and AWS Lambda MicroVMs. - Go now asks for an instrumentation method (SDK / compile-time `otelc` / eBPF) before the environment question, so the new zero-code guides are reachable. The card links to the new comparison overview. - The Lambda → Traces question now asks how the function is packaged instead of which runtime it uses, and gains a Container Image option. Layers do not attach to container images, so runtime alone did not pick the right guide. - GCP Cloud Storage points at `/integrations/gcp?service=cloudstorage` rather than a doc, matching the Cloud SQL and Memorystore cards. `cloudstorage` is a first-class cloud integration with its own dashboard, so the in-app flow is the one users want. - New logos: `antigravity`, `aurora`, `cline`, `cursor`, `daytona`, `e2b`, `emqx`, `karpenter`, `meta`, `modal`, `podman`, `sglang`, `vllm`. Qwen Code, OpenAI Agents SDK and Lambda MicroVMs reuse existing marks. - Recolours 15 pre-existing logos that were pure white or near-black and disappeared against one of the two card backgrounds (`--l2-background` is `#121317` dark, `#F9F9FB` light): `anthropic-api-monitoring`, `clickhouse`, `confluent-kafka`, `datadog`, `deno`, `document-load`, `from-log-file`, `haystack`, `kafka`, `langchain`, `ollama`, `openai`, `openrouter`, `vercel`, `zap`. Brand hue kept where the brand has one, adjusted to clear 3:1 against both; black-or-white marks use a neutral grey. #### Issues closed by this PR Closes SigNoz/signoz.io#4205 Closes SigNoz/signoz.io#4197 Closes SigNoz/signoz.io#4178 Closes SigNoz/signoz.io#4171 Closes SigNoz/signoz.io#4167 Closes SigNoz/signoz.io#4153 Closes SigNoz/signoz.io#4144 Closes SigNoz/signoz.io#4133 Closes SigNoz/signoz.io#4131 Closes SigNoz/signoz.io#4129 Closes SigNoz/signoz.io#4125 Closes SigNoz/signoz.io#4108 Closes SigNoz/signoz.io#4092 Closes SigNoz/signoz.io#4088 Closes SigNoz/signoz.io#4082 Closes SigNoz/signoz.io#4074 Closes SigNoz/signoz.io#4063 Closes SigNoz/signoz.io#4032 Closes SigNoz/signoz.io#4024	2026-09-23 07:54:02 +00:00
Vinicius Lourenço	f9d425bf5c	fix(storybook): remove timing races from story tests (#12954 ) #### Description A few tweaks to improve the resiliency of the storybook tests under CI stress.	2026-09-23 07:46:27 +00:00
Abhi kumar	7ce73f3470	fix(dashboard): don't re-run an errored panel query on scroll back into view (#12958 ) #### Description - Lazy-loaded panels toggle `enabled` on viewport visibility. react-query treats a key with no data as stale regardless of `staleTime`, so an errored panel refetched (with retries on 5xx) every time it scrolled back into view. - `useGetQueryRangeV5` now keeps an errored key enabled, so only a key change (time, variables, query) or the Retry button re-runs it. A new key still stays gated while off-screen. - Adds a `useGetQueryRangeV5` test suite covering the gating paths.	2026-09-23 07:04:51 +00:00
Nityananda Gohain	5aca8b0d3c	chore: remove ai-o11y ff (#12947 ) <!--A few plain bullets saying what changed and why, for a reviewer skimming it - not a wall of text, not a restatement of the diff, not generated boilerplate.--> #### Description Remove ai-o11y FF and enable it by default <!--Reference issues using `Closes #issue-number` to enable automatic closure on merge. --> #### Issues closed by this PR Part of https://github.com/SigNoz/engineering-pod/issues/6107	2026-09-23 06:39:16 +00:00
Gaurav Tewari	f1c9e0f1d0	feat(llm-observability): add ai o11y analytics events (#12952 ) #### Description - Renames AI Observability explorer events from `Traces Explorer: ` to `AI Observability Explorer: `, so they no longer mix with the regular Traces Explorer events. - Adds page-visit events for Overview, Attribute Mapping and Model Pricing. - Adds action events: attribute mapping saved and test run; model cost saved and deleted; unpriced model mapped. --------- Co-authored-by: Gaurav Tewari <tewarig@users.noreply.github.com>	2026-09-23 05:05:06 +00:00
Gaurav Tewari	10c0af327b	fix: failing e2e for llm (#12953 ) <!--A few plain bullets saying what changed and why, for a reviewer skimming it - not a wall of text, not a restatement of the diff, not generated boilerplate.--> #### Description - Attribute-mapping e2e now adds a condition key when creating its group. - Since #12809 the backend rejects groups without conditions (`400 condition must list at least one attribute or resource substring`), so the spec failed on save. <!--Reference issues using `Closes #issue-number` to enable automatic closure on merge. --> #### Issues closed by this PR <!--If applicable, include screenshots or screen recordings that clearly show the behavior before the change and the result after the change. --> #### Screenshots / Screen Recordings <!--Anything reviewers should keep in mind while reviewing --> #### Additional Information - Follow-up: we should add check on frontend as well for #12809 ( we have already decided to add this later ) Co-authored-by: Gaurav Tewari <tewarig@users.noreply.github.com>	2026-09-23 04:43:36 +00:00
Abhi kumar	370b278f28	fix(dashboard): reserve legend rows the grid actually lays out (#12951 ) 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 cacheci / tests (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details #### Description - Bottom legends could silently drop series. The legend box reserved fewer rows than the grid actually laid out, and the surplus row was clipped away by the wrapper's `overflow: hidden` — nothing indicated the series were still there apart from a scrollbar. - The cause is two different formulas for the same quantity: how many legend items fit on one row. The height reservation in `calculateChartDimensions` used `floor((containerWidth - padding) / itemWidth)`. The grid resolves `auto-fill` over `--legend-item-width`, which is `itemWidth + LEGEND_ITEM_EXTRA_WIDTH`, separated by a column gap, inside a scroller with its own gutter. Ignoring the extra width, the gap and the gutter, the reservation over-counts and reserves one row where the grid needs two. - The two formulas only diverge over a narrow band of widths, so the failure is width-dependent and its boundary is a single pixel. A panel sitting near that boundary flips between states as the layout reflows, which is seen as flickering rather than as a fixed layout bug. - Fix: `legendItemsPerRow` now mirrors the `auto-fill` track count. The two CSS values it depends on are pinned as constants beside the existing `LEGEND_ROW_HEIGHT` / `LEGEND_ROW_GAP`, which already carry the same "must match the stylesheet" caveat. #### Additional Information - Adds a regression test at a width where the two formulas diverge; it fails on `main`. - Two pre-existing gaps left out of scope and unchanged by this PR: - `MAX_SHORT_PANEL_LEGEND_RATIO` deliberately reserves a single row on very short panels while the grid still lays out two, so the clip remains there. Closing it needs somewhere for the dropped row's series to go — an overflow affordance, which is a design decision.	2026-09-23 02:22:18 +00:00
Pandey	f2229a1064	fix(analytics): format segment logger messages before passing to slog (#12950 ) #### Description - segment's `Logger` interface is printf-style, but the adapter passed `format` as the slog message and `args` as key-value pairs. - slog never substituted the `%d` placeholders and rendered each positional arg as a `!BADKEY` attr. - `Logf` and `Errorf` now `fmt.Sprintf` the message first, matching the opamp logger adapter.	2026-09-22 19:18:36 +00:00
Vinicius Lourenço	099832b26b	chore(codeowners): change ownership of storybook (#12949 ) 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 cacheci / tests (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details ## Description Add myself as owner of storybook structural files, the stories still belongs to each pod.	2026-09-22 18:04:23 +00:00
Ashwin Bhatkal	057571cf6d	fix(dashboard): restore related values and API search in dynamic variable dropdowns (#12935 ) #### Description The V1 to V2 dashboard rewrite carried over the request for a dynamic variable's values but not the response handling — `relatedValues` and `complete` were fetched and then thrown away. Both issues below are that single regression. - Related values. The dropdown now splits a dynamic variable's values into "Related Values" (scoped by the sibling dynamic variables' selections) and "All Values", as V1 did. The `existingQuery` that scopes them was already being sent; only the response was ignored. Worth knowing while reviewing: the backend never narrows the main list by `existingQuery` — `GetAllValues` doesn't see it, and `GetRelatedValues` returns nothing when it is empty — so the scoping is only ever visible as the second section. - Value search. A variable whose list the backend truncated (`complete: false`) could only be filtered against the values already fetched, so typing anything outside that first batch found nothing. Search now goes to the API. It runs on its own react-query, deliberately not the fetch engine's, so a keystroke cannot settle the variable's fetch cycle and re-cascade its dependent variables and panels. - Retry action. Restores V1's gating: the shared select defaults `showRetryButton` to `true`, so a 4xx offered a retry that could only fail again. Commits are split by concern in that order. #### Screen Recording https://github.com/user-attachments/assets/ef51f481-de66-4334-9a59-dc98a7c7e50f #### Issues closed by this PR Closes https://github.com/SigNoz/pulse-pod/issues/352 Closes https://github.com/SigNoz/pulse-pod/issues/249	2026-09-22 17:31:51 +00:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="none" fill-rule="evenodd"><path fill="#c925d1" d="M0 0h64v64H0z"/><path fill="#fff" d="M36.213 16.011h-2.016v-2.005h2.016V12h2.017v2.006h2.016v2.005H38.23v2.006h-2.017zm9.074 8.023h-2.016v-2.006h2.016v-2.005h2.016v2.005h2.017v2.006h-2.017v2.006h-2.016v-2.006m-3.434 22.64c-1.495-3.292-4.482-6.263-7.792-7.75 3.31-1.487 6.297-4.459 7.792-7.75 1.494 3.291 4.482 6.263 7.791 7.75-3.31 1.487-6.297 4.458-7.79 7.75m12.139-8.753c-5.202 0-11.13-5.898-11.13-11.071 0-.555-.452-1.003-1.009-1.003s-1.008.448-1.008 1.003c0 5.173-5.93 11.071-11.13 11.071-.558 0-1.009.448-1.009 1.003s.45 1.003 1.008 1.003c5.202 0 11.13 5.898 11.13 11.07 0 .554.452 1.003 1.01 1.003.556 0 1.007-.45 1.007-1.003 0-5.172 5.93-11.07 11.13-11.07.558 0 1.009-.45 1.009-1.003 0-.555-.45-1.003-1.008-1.003m-31.39-19.904c6.85 0 10.587 1.988 10.587 3.008s-3.737 3.009-10.586 3.009-10.587-1.988-10.587-3.009 3.737-3.008 10.587-3.008m-.35 15.15c-5.012 0-8.62-1.063-10.236-2.19v-7.113c2.367 1.433 6.487 2.176 10.587 2.176s8.22-.743 10.586-2.176v6.484c-1.016 1.406-5.247 2.819-10.936 2.819M33.19 45.975c0 1.435-4.126 3.52-10.59 3.52-6.46 0-10.583-2.085-10.583-3.52v-4.407c2.258 1.354 6.014 2.192 10.276 2.192 2.942 0 5.786-.413 8.01-1.166l-.651-1.898c-2.019.682-4.633 1.058-7.359 1.058-5.39 0-9.252-1.402-10.276-2.76v-5.707c2.411 1.176 6.113 1.885 10.237 1.885 3.92 0 8.34-.725 10.936-2.269v2.162h2.016v-14.04c0-3.292-6.34-5.014-12.602-5.014S10 17.733 10 21.025v24.95c0 3.59 6.49 5.526 12.598 5.526 6.112 0 12.607-1.937 12.607-5.526v-2.887h-2.016z"/></g></svg>