feat(logparsingpipeline): order user pipelines around signozlogsnormalizer

User pipelines anchor on the first normalizer per its opamp.position; the prepended normalize operator is dropped when the processor already runs first.

frontend/AGENTS.md

@@ -25,7 +25,6 @@ You are operating within a constrained context window and strict system prompts.
 - Never create barrel files.
 - When writing new css, prefer CSS Modules
   - Use ./docs/css-modules-guide.md as reference on how to write good CSS Modules.
-- Before styling a `@signozhq/ui` component, check its props in `node_modules/@signozhq/ui/dist/<component>/*.d.ts` for `className`/`style` support; some omit them. Avoid overriding the component's CSS vars unless explicitly needed.
 - When writing code that could need authorization checks, read ./src/lib/authz/README.md
 
 3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:

frontend/jest.setup.ts

@@ -41,20 +41,6 @@ if (!HTMLElement.prototype.releasePointerCapture) {
 	HTMLElement.prototype.releasePointerCapture = function (): void {};
 }
 
-// jsdom has no PointerEvent; Base UI Switch constructs one on click.
-if (typeof window.PointerEvent === 'undefined') {
-	class PointerEventMock extends MouseEvent {
-		pointerId: number;
-		pointerType: string;
-		constructor(type: string, init: PointerEventInit = {}) {
-			super(type, init);
-			this.pointerId = init.pointerId ?? 0;
-			this.pointerType = init.pointerType ?? '';
-		}
-	}
-	(window as any).PointerEvent = PointerEventMock;
-}
-
 if (typeof window.IntersectionObserver === 'undefined') {
 	class IntersectionObserverMock {
 		observe(): void {}

frontend/package.json

@@ -52,9 +52,9 @@
     "@monaco-editor/react": "^4.7.0",
     "@sentry/react": "10.57.0",
     "@sentry/vite-plugin": "5.3.0",
-    "@signozhq/design-tokens": "2.2.1",
+    "@signozhq/design-tokens": "2.1.6",
     "@signozhq/icons": "0.4.0",
-    "@signozhq/ui": "0.2.0",
+    "@signozhq/ui": "0.1.0",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/pnpm-lock.yaml

@@ -72,14 +72,14 @@ importers:
         specifier: 5.3.0
         version: 5.3.0
       '@signozhq/design-tokens':
-        specifier: 2.2.1
-        version: 2.2.1
+        specifier: 2.1.6
+        version: 2.1.6
       '@signozhq/icons':
         specifier: 0.4.0
         version: 0.4.0
       '@signozhq/ui':
-        specifier: 0.2.0
-        version: 0.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
+        specifier: 0.1.0
+        version: 0.1.0(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
       '@tanstack/react-table':
         specifier: 8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -1284,33 +1284,6 @@ packages:
     resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
     engines: {node: '>=6.9.0'}
 
-  '@base-ui/react@1.7.0':
-    resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      '@date-fns/tz': ^1.2.0
-      '@types/react': ^17 || ^18 || ^19
-      date-fns: ^4.0.0
-      react: ^17 || ^18 || ^19
-      react-dom: ^17 || ^18 || ^19
-    peerDependenciesMeta:
-      '@date-fns/tz':
-        optional: true
-      '@types/react':
-        optional: true
-      date-fns:
-        optional: true
-
-  '@base-ui/utils@0.3.2':
-    resolution: {integrity: sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==}
-    peerDependencies:
-      '@types/react': ^17 || ^18 || ^19
-      react: ^17 || ^18 || ^19
-      react-dom: ^17 || ^18 || ^19
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
@@ -1753,20 +1726,20 @@ packages:
     resolution: {integrity: sha512-rZAP3aVgB9ds9KOeUSL+zZ21hPmo8dh6fnIFwRQj5EAZl9gzR7wxYbYXYysAM8CTqGmUGyp2S4kUdV17MnGuWQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
-  '@floating-ui/core@1.8.0':
-    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+  '@floating-ui/core@1.5.2':
+    resolution: {integrity: sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==}
 
-  '@floating-ui/dom@1.8.0':
-    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
+  '@floating-ui/dom@1.5.3':
+    resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
 
-  '@floating-ui/react-dom@2.1.9':
-    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
+  '@floating-ui/react-dom@2.0.4':
+    resolution: {integrity: sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  '@floating-ui/utils@0.2.12':
-    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+  '@floating-ui/utils@0.1.6':
+    resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
 
   '@gerrit0/mini-shiki@3.23.0':
     resolution: {integrity: sha512-bEMORlG0cqdjVyCEuU0cDQbORWX+kYCeo0kV1lbxF5bt4r7SID2l9bqsxJEM0zndaxpOUT7riCyIVEuqq/Ynxg==}
@@ -2947,6 +2920,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-checkbox@1.3.11':
+    resolution: {integrity: sha512-Gnptr9pDDQxD3hgq2dtPbtrp/c2qH1mBwIzw3X/ivrMb2e1t0jMTi606fVEqFPaQR1ggXIVQWKj3P2WW9v7zGQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.15':
     resolution: {integrity: sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==}
     peerDependencies:
@@ -2960,6 +2946,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.5':
     resolution: {integrity: sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==}
     peerDependencies:
@@ -3013,6 +3008,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dropdown-menu@2.1.24':
+    resolution: {integrity: sha512-geq8l2rJkxvkXsT9RMgtUE3P8pITFpTsvYpbySi1IH4fZEABD/Gp85myayFgxk0ktljGMJnCbeFkyTusvSvv7g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-guards@1.1.6':
     resolution: {integrity: sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==}
     peerDependencies:
@@ -3040,6 +3048,15 @@ packages:
     peerDependencies:
       react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
 
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-id@1.1.4':
     resolution: {integrity: sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==}
     peerDependencies:
@@ -3049,6 +3066,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-menu@2.1.24':
+    resolution: {integrity: sha512-uW7RVuU6Lp/ZtfeY4b3kL32zccgEWvPv1+cf17ubYzHa9cL8AHokmk36cG/XEiH/smbQvumnieXX9j/e9RqJWA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popover@1.1.23':
     resolution: {integrity: sha512-mw58MrBlyHWFisTOYignD0vf/3gdcgAR+9of1s9G/38CbFiUwH1nCDkc0AUM9IrXFgN5Ue8n45j9WCgyM1sbiQ==}
     peerDependencies:
@@ -3114,6 +3144,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-progress@1.1.16':
     resolution: {integrity: sha512-5XnomAsoZZCY+KNTxbIghpGqPruZvKFNlvcAljVAOdDRDsH4/OZQxhtwo5wdtoDM5R6MhJBb2sPnDuRFep3lzg==}
     peerDependencies:
@@ -3179,6 +3222,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-slot@1.2.4':
+    resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-slot@1.3.3':
     resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
     peerDependencies:
@@ -3188,6 +3240,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-switch@1.3.7':
+    resolution: {integrity: sha512-48tB/4dn2UVLBCYhTu9AuR63IHl73l/qLbLgxd86noTUor4/K4LFDAcYjK+isP5313qxaFpjPVogE7+Y0/V3Kw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-tabs@1.1.21':
     resolution: {integrity: sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==}
     peerDependencies:
@@ -3201,6 +3266,45 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-toggle-group@1.1.19':
+    resolution: {integrity: sha512-OtnwuSVjd1Ofi+AdnvhsjQdyuhCDwYs1w9RyB5BN/OavXOVQo42SYqQjwUnbPnaiPFBpQ9aX70dWeee+v2oBLA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.18':
+    resolution: {integrity: sha512-7lonPlKfSacd20GlOBx2ltuVKz9oqWYZz+oMQyOltw6t1y2nyftj2ZmwwUHYn49kqfDWcp8dNZm5NgV+5Z+mug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.16':
+    resolution: {integrity: sha512-6EamKFRRnlpdadndbZ6LMwycfwkwPte1B42hs6QA0gYhjaOKqW4PZ4pjaW9UrlDX5eVt/OjncE7BFTPL5nmZhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-use-callback-ref@1.1.4':
     resolution: {integrity: sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==}
     peerDependencies:
@@ -3237,6 +3341,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-layout-effect@1.1.4':
     resolution: {integrity: sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==}
     peerDependencies:
@@ -3608,14 +3721,14 @@ packages:
   '@sideway/pinpoint@2.0.0':
     resolution: {integrity: sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==}
 
-  '@signozhq/design-tokens@2.2.1':
-    resolution: {integrity: sha512-ulf6lhWUP6qxqsyemQySUMfOIKRvefvZ5rBRv+wlhOpPfYPk3uatPmPkKEhAjISpX8f9g1Gg8wgRZxUCysf20Q==}
+  '@signozhq/design-tokens@2.1.6':
+    resolution: {integrity: sha512-n0cH4TRS1Xj7BR38HGiwIBDekIOAnDgl2JyYmAyUvws0L1nlE0txSHO5NiOBJ22Dm8uMva0v5/rOHxpKsGQbsw==}
 
   '@signozhq/icons@0.4.0':
     resolution: {integrity: sha512-QctNvNPlQlsefFdIVmSy/P/7a1IcQ3IryKP0KPMqtoqew3q89FGUmFa5IfEJ7Z3CHhtG1zaXwBKqP72QkLyA3g==}
 
-  '@signozhq/ui@0.2.0':
-    resolution: {integrity: sha512-j20ldiOkR150ON0BCDhlq6fXGoPN++7w6e4t2HtM2XMM4buJO7aHzPzNKvDRZ2UUf/LGPULPAW8w6sg6gUVHyw==}
+  '@signozhq/ui@0.1.0':
+    resolution: {integrity: sha512-FjqmQhz+WtpGl29gPGZey5YwNe4p++TCyX4jaGUhAgvlBGRmxmAKW0lFRrSOYTPbgFL5UaDCW0wR62aiGHZ+FA==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -8407,11 +8520,6 @@ packages:
       react: ^16.8.5 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0
 
-  react-compiler-runtime@1.0.0:
-    resolution: {integrity: sha512-rRfjYv66HlG8896yPUDONgKzG5BxZD1nV9U6rkm+7VCuvQc903C4MjcoZR4zPw53IKSOX9wMQVpA1IAbRtzQ7w==}
-    peerDependencies:
-      react: ^17.0.0 || ^18.0.0 || ^19.0.0 || ^0.0.0-experimental
-
   react-day-picker@9.9.0:
     resolution: {integrity: sha512-NtkJbuX6cl/VaGNb3sVVhmMA6LSMnL5G3xNL+61IyoZj0mUZFWTg4hmj7PHjIQ8MXN9dHWhUHFoJWG6y60DKSg==}
     engines: {node: '>=18'}
@@ -8799,9 +8907,6 @@ packages:
   requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
-  reselect@5.3.0:
-    resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==}
-
   reserved-words@0.1.2:
     resolution: {integrity: sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==}
 
@@ -11049,31 +11154,6 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
-  '@base-ui/react@1.7.0(@date-fns/tz@1.4.1)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.29.2
-      '@base-ui/utils': 0.3.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@floating-ui/react-dom': 2.1.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@floating-ui/utils': 0.2.12
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      use-sync-external-store: 1.6.0(react@18.2.0)
-    optionalDependencies:
-      '@date-fns/tz': 1.4.1
-      '@types/react': 18.0.26
-      date-fns: 4.1.0
-
-  '@base-ui/utils@0.3.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.29.2
-      '@floating-ui/utils': 0.2.12
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      reselect: 5.3.0
-      use-sync-external-store: 1.6.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.0.26
-
   '@bcoe/v8-coverage@0.2.3': {}
 
   '@braintree/sanitize-url@7.0.1': {}
@@ -11518,22 +11598,22 @@ snapshots:
       '@eslint/core': 1.2.1
       levn: 0.4.1
 
-  '@floating-ui/core@1.8.0':
+  '@floating-ui/core@1.5.2':
     dependencies:
-      '@floating-ui/utils': 0.2.12
+      '@floating-ui/utils': 0.1.6
 
-  '@floating-ui/dom@1.8.0':
+  '@floating-ui/dom@1.5.3':
     dependencies:
-      '@floating-ui/core': 1.8.0
-      '@floating-ui/utils': 0.2.12
+      '@floating-ui/core': 1.5.2
+      '@floating-ui/utils': 0.1.6
 
-  '@floating-ui/react-dom@2.1.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@floating-ui/react-dom@2.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@floating-ui/dom': 1.8.0
+      '@floating-ui/dom': 1.5.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@floating-ui/utils@0.2.12': {}
+  '@floating-ui/utils@0.1.6': {}
 
   '@gerrit0/mini-shiki@3.23.0':
     dependencies:
@@ -12683,6 +12763,21 @@ snapshots:
       '@types/react': 18.0.26
       '@types/react-dom': 18.0.10
 
+  '@radix-ui/react-checkbox@1.3.11(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@18.0.26)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.0.26
+      '@types/react-dom': 18.0.10
+
   '@radix-ui/react-collection@1.1.15(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
@@ -12695,6 +12790,12 @@ snapshots:
       '@types/react': 18.0.26
       '@types/react-dom': 18.0.10
 
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.0.26)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.0.26
+
   '@radix-ui/react-compose-refs@1.1.5(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       react: 18.2.0
@@ -12749,6 +12850,21 @@ snapshots:
       '@types/react': 18.0.26
       '@types/react-dom': 18.0.10
 
+  '@radix-ui/react-dropdown-menu@2.1.24(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-id': 1.1.4(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-menu': 2.1.24(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.0.26
+      '@types/react-dom': 18.0.10
+
   '@radix-ui/react-focus-guards@1.1.6(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       react: 18.2.0
@@ -12770,6 +12886,13 @@ snapshots:
     dependencies:
       react: 18.2.0
 
+  '@radix-ui/react-id@1.1.1(@types/react@18.0.26)(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.26)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.0.26
+
   '@radix-ui/react-id@1.1.4(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@18.0.26)(react@18.2.0)
@@ -12777,6 +12900,32 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.26
 
+  '@radix-ui/react-menu@2.1.24(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-collection': 1.1.15(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.4(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-id': 1.1.4(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot': 1.3.3(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@18.0.26)(react@18.2.0)
+      aria-hidden: 1.2.6
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.7.2(@types/react@18.0.26)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.0.26
+      '@types/react-dom': 18.0.10
+
   '@radix-ui/react-popover@1.1.23(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -12802,7 +12951,7 @@ snapshots:
 
   '@radix-ui/react-popper@1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@floating-ui/react-dom': 2.0.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-arrow': 1.1.15(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
       '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
@@ -12846,6 +12995,15 @@ snapshots:
       '@types/react': 18.0.26
       '@types/react-dom': 18.0.10
 
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@18.0.26)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.0.26
+      '@types/react-dom': 18.0.10
+
   '@radix-ui/react-progress@1.1.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
@@ -12941,6 +13099,13 @@ snapshots:
       '@types/react': 18.0.26
       '@types/react-dom': 18.0.10
 
+  '@radix-ui/react-slot@1.2.4(@types/react@18.0.26)(react@18.2.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.26)(react@18.2.0)
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.0.26
+
   '@radix-ui/react-slot@1.3.3(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
@@ -12948,6 +13113,20 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.26
 
+  '@radix-ui/react-switch@1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.1.4(@types/react@18.0.26)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.0.26
+      '@types/react-dom': 18.0.10
+
   '@radix-ui/react-tabs@1.1.21(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
@@ -12964,6 +13143,53 @@ snapshots:
       '@types/react': 18.0.26
       '@types/react-dom': 18.0.10
 
+  '@radix-ui/react-toggle-group@1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.4(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.0.26
+      '@types/react-dom': 18.0.10
+
+  '@radix-ui/react-toggle@1.1.18(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.0.26
+      '@types/react-dom': 18.0.10
+
+  '@radix-ui/react-tooltip@1.2.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-context': 1.2.2(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-id': 1.1.4(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-popper': 1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-slot': 1.3.3(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.0.26
+      '@types/react-dom': 18.0.10
+
   '@radix-ui/react-use-callback-ref@1.1.4(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       react: 18.2.0
@@ -12992,6 +13218,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.0.26
 
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.0.26)(react@18.2.0)':
+    dependencies:
+      react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.0.26
+
   '@radix-ui/react-use-layout-effect@1.1.4(@types/react@18.0.26)(react@18.2.0)':
     dependencies:
       react: 18.2.0
@@ -13040,14 +13272,14 @@ snapshots:
 
   '@rc-component/context@1.4.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.28.2
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
   '@rc-component/mini-decimal@1.0.1':
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.28.2
 
   '@rc-component/mutate-observer@1.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
@@ -13059,7 +13291,7 @@ snapshots:
 
   '@rc-component/portal@1.1.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.28.2
       classnames: 2.3.2
       rc-util: 5.38.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
@@ -13327,15 +13559,16 @@ snapshots:
 
   '@sideway/pinpoint@2.0.0': {}
 
-  '@signozhq/design-tokens@2.2.1': {}
+  '@signozhq/design-tokens@2.1.6': {}
 
   '@signozhq/icons@0.4.0': {}
 
-  '@signozhq/ui@0.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.1.0(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@base-ui/react': 1.7.0(@date-fns/tz@1.4.1)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@chenglou/pretext': 0.0.8
+      '@radix-ui/react-checkbox': 1.3.11(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-dialog': 1.1.23(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-dropdown-menu': 2.1.24(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-icons': 1.3.2(react@18.2.0)
       '@radix-ui/react-popover': 1.1.23(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-progress': 1.1.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -13343,7 +13576,11 @@ snapshots:
       '@radix-ui/react-select': 2.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-slider': 1.4.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-slot': 1.3.3(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-switch': 1.3.7(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-tabs': 1.1.21(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toggle': 1.1.18(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toggle-group': 1.1.19(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-tooltip': 1.2.16(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@signozhq/icons': 0.4.0
       '@tanstack/react-table': 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@tanstack/react-virtual': 3.14.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -13357,19 +13594,16 @@ snapshots:
       next-themes: 0.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       nuqs: 2.9.6(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
       react: 18.2.0
-      react-compiler-runtime: 1.0.0(react@18.2.0)
       react-day-picker: 9.9.0(react@18.2.0)
       react-dom: 18.2.0(react@18.2.0)
       react-resizable-panels: 4.12.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       sonner: 2.0.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     transitivePeerDependencies:
-      - '@date-fns/tz'
       - '@emotion/is-prop-valid'
       - '@remix-run/react'
       - '@tanstack/react-router'
       - '@types/react'
       - '@types/react-dom'
-      - date-fns
       - next
       - react-router
       - react-router-dom
@@ -14895,10 +15129,10 @@ snapshots:
 
   cmdk@1.1.1(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.26)(react@18.2.0)
       '@radix-ui/react-dialog': 1.1.23(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@18.0.26)(react@18.2.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.26)(react@18.2.0)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
@@ -19043,10 +19277,6 @@ snapshots:
     transitivePeerDependencies:
       - react-native
 
-  react-compiler-runtime@1.0.0(react@18.2.0):
-    dependencies:
-      react: 18.2.0
-
   react-day-picker@9.9.0(react@18.2.0):
     dependencies:
       '@date-fns/tz': 1.4.1
@@ -19532,8 +19762,6 @@ snapshots:
 
   requires-port@1.0.0: {}
 
-  reselect@5.3.0: {}
-
   reserved-words@0.1.2: {}
 
   resize-observer-polyfill@1.5.1: {}
@@ -19639,7 +19867,7 @@ snapshots:
 
   rtl-css-js@1.16.1:
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.28.2
 
   run-applescript@7.1.0: {}
 
@@ -20451,7 +20679,7 @@ snapshots:
 
   unload@2.2.0:
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.28.2
       detect-node: 2.1.0
 
   unplugin@2.3.11:

frontend/src/api/ErrorResponseHandler.ts

@@ -41,16 +41,17 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 			message: data?.error,
 		};
 	}
-	// Avoid logging error when the request was just cancelled for whatever reason
-	if (isCancel(error)) {
-		return {
-			statusCode: 500,
-			payload: null,
-			error: 'Something went wrong',
-			message: null,
-		};
-	}
 	if (request) {
+		// Avoid logging error when the request was just cancelled for whatever reason
+		if (isCancel(error)) {
+			return {
+				statusCode: 500,
+				payload: null,
+				error: 'Something went wrong',
+				message: null,
+			};
+		}
+
 		// client never received a response, or request never left
 		console.error('client never received a response, or request never left');
 

frontend/src/api/__tests__/ErrorResponseHandler.test.ts

@@ -1,22 +0,0 @@
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError, CanceledError } from 'axios';
-
-describe('ErrorResponseHandler', () => {
-	// axios aborts a request whose signal fired before it was sent without ever
-	// creating one, so the error carries neither `response` nor `request`.
-	it('treats a request cancelled before it was sent as a cancellation', () => {
-		const consoleError = jest
-			.spyOn(console, 'error')
-			.mockImplementation(() => undefined);
-
-		expect(ErrorResponseHandler(new CanceledError() as AxiosError)).toEqual({
-			statusCode: 500,
-			payload: null,
-			error: 'Something went wrong',
-			message: null,
-		});
-		expect(consoleError).not.toHaveBeenCalled();
-
-		consoleError.mockRestore();
-	});
-});

frontend/src/components/AddCreditCardModal/stories/AddCreditCardModal.stories.tsx

@@ -17,10 +17,7 @@ function ModalFixture(): JSX.Element {
 	return (
 		<>
 			<Button
-				variant="solid"
-				color="primary"
-				size="md"
-				testId="open-add-credit-card"
+				data-testid="open-add-credit-card"
 				onClick={(): void => setOpen(true)}
 			>
 				Contact support

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss

@@ -8,10 +8,6 @@
 	:global(.ant-breadcrumb-separator) {
 		color: var(--muted-foreground);
 	}
-
-	[data-slot='button'] {
-		padding: 0px;
-	}
 }
 
 .divider {

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.module.scss

@@ -1,5 +1,9 @@
-.itemLast {
-	color: var(--button-secondary-label);
-	font-size: var(--button-font-size, var(--periscope-font-size-base));
-	line-height: var(--button-size-line-height, 16px);
+.item {
+	--button-padding: 0;
+	--button-font-size: var(--periscope-font-size-base);
+}
+
+.itemLast {
+	color: var(--muted-foreground);
+	font-size: var(--periscope-font-size-base);
 }

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx

@@ -26,9 +26,9 @@ function BreadcrumbItem({
 
 	return (
 		<Button
-			size="md"
-			variant="link"
+			variant="ghost"
 			color="secondary"
+			className={styles.item}
 			onClick={(e: React.MouseEvent): void => {
 				if (!('route' in props) || !props.route) {
 					return;

frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.tsx

@@ -34,23 +34,21 @@ function ErrorEmptyState({
 			</div>
 			<div className={styles.actions}>
 				<Button
-					size="md"
 					variant="solid"
 					color="secondary"
 					prefix={<LifeBuoy size={14} />}
 					onClick={onContactSupport}
-					testId="error-contact-support-button"
+					data-testid="error-contact-support-button"
 				>
 					Contact Support
 				</Button>
 				{onRefresh && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						testId="error-refresh-button"
+						data-testid="error-refresh-button"
 					>
 						Refresh
 					</Button>

frontend/src/components/Alerts/LabelColumn/LabelColumn.module.scss

@@ -1,32 +1,20 @@
 .labelColumn {
-	// Badges fill their wrapper; the wrapper, as the flex item, owns the cap.
-	--badge-max-width: 100%;
-
-	position: relative;
 	display: flex;
 	gap: 4px;
 	align-items: center;
 	overflow: hidden;
 	max-width: 100%;
 	width: 100%;
-
-	> * {
-		flex-shrink: 0;
-		max-width: 180px;
-	}
 }
 
-// Kept mounted so its width can still be measured.
-.overflowed {
-	position: absolute;
-	visibility: hidden;
-	pointer-events: none;
-}
+.labelBadge {
+	cursor: default;
+	font-size: 12px;
 
-// The only visible label truncates instead of pushing `+N` out of view.
-.labelColumn > .shrinkable {
-	flex-shrink: 1;
-	min-width: 0;
+	--badge-display: inline;
+
+	max-width: 180px;
+	text-overflow: ellipsis;
 }
 
 .overflowTrigger {
@@ -34,6 +22,11 @@
 	cursor: pointer;
 }
 
+.overflowBadge {
+	cursor: pointer;
+	font-size: 12px;
+}
+
 .labelPopover {
 	display: flex;
 	flex-direction: column;

frontend/src/components/Alerts/LabelColumn/LabelColumn.test.tsx

@@ -1,14 +1,13 @@
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { act, render, screen } from '@testing-library/react';
 
 import LabelColumn from './LabelColumn';
 
-const BADGE_WIDTH = 60;
-
-let resizeCallbacks: ResizeObserverCallback[] = [];
+let resizeCallback: ResizeObserverCallback | null = null;
 
 class MockResizeObserver {
 	constructor(callback: ResizeObserverCallback) {
-		resizeCallbacks.push(callback);
+		resizeCallback = callback;
 	}
 
 	observe = jest.fn();
@@ -16,23 +15,15 @@ class MockResizeObserver {
 	disconnect = jest.fn();
 }
 
-// jsdom has no layout: every badge measures BADGE_WIDTH, the column `containerWidth`.
-function mockLayout(containerWidth: number): void {
-	jest
-		.spyOn(HTMLElement.prototype, 'clientWidth', 'get')
-		.mockImplementation(function getClientWidth(this: HTMLElement) {
-			return this.dataset.testid === 'label-column' ? containerWidth : 0;
+function triggerResize(width: number): void {
+	if (resizeCallback) {
+		act(() => {
+			resizeCallback?.(
+				[{ contentRect: { width } } as ResizeObserverEntry],
+				{} as ResizeObserver,
+			);
 		});
-	jest
-		.spyOn(HTMLElement.prototype, 'getBoundingClientRect')
-		.mockReturnValue({ width: BADGE_WIDTH } as DOMRect);
-}
-
-function triggerResize(containerWidth: number): void {
-	mockLayout(containerWidth);
-	act(() => {
-		resizeCallbacks.forEach((callback) => callback([], {} as ResizeObserver));
-	});
+	}
 }
 
 beforeAll(() => {
@@ -40,14 +31,13 @@ beforeAll(() => {
 });
 
 afterEach(() => {
-	resizeCallbacks = [];
-	jest.restoreAllMocks();
+	resizeCallback = null;
 });
 
 function renderWithProviders(
 	ui: React.ReactElement,
 ): ReturnType<typeof render> {
-	return render(ui);
+	return render(<TooltipProvider>{ui}</TooltipProvider>);
 }
 
 describe('LabelColumn', () => {
@@ -64,10 +54,13 @@ describe('LabelColumn', () => {
 	it('should truncate labels and show +N badge when container is narrow', () => {
 		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
 
-		// 3 badges (180px) + overflow reserve (40px)
-		mockLayout(220);
 		renderWithProviders(<LabelColumn labels={labels} />);
 
+		// Simulate narrow container that fits ~3 badges
+		// Badge widths: env=37, service=65, region=58, team=44, owner=51, version=65
+		// 220px available = 3 badges (160px) + gaps (8px) + overflow (44px)
+		triggerResize(220);
+
 		// First 3 visible
 		expect(screen.getByTestId('label-tag-env')).toBeInTheDocument();
 		expect(screen.getByTestId('label-tag-service')).toBeInTheDocument();
@@ -100,37 +93,19 @@ describe('LabelColumn', () => {
 		expect(screen.getByTestId('label-tag-service')).toHaveTextContent('service');
 	});
 
-	it('should update the overflow count when the container resizes', () => {
+	it('should show overflow badge with remaining count when container is narrow', () => {
 		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
 
-		mockLayout(220);
-		renderWithProviders(<LabelColumn labels={labels} />);
-		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+3');
-
-		// 2 badges (120px) + overflow reserve (40px)
-		triggerResize(160);
-		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+4');
-
-		triggerResize(1000);
-		expect(screen.queryByTestId('label-overflow-badge')).not.toBeInTheDocument();
-	});
-
-	it('should skip the overflow reserve when every label fits', () => {
-		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
-
-		mockLayout(labels.length * BADGE_WIDTH);
 		renderWithProviders(<LabelColumn labels={labels} />);
 
-		expect(screen.queryByTestId('label-overflow-badge')).not.toBeInTheDocument();
-	});
+		// Simulate narrow container to trigger overflow (shows 3 labels)
+		// 220px fits first 3 badges before overflow
+		triggerResize(220);
 
-	it('should keep one label visible when even that one does not fit', () => {
-		const labels = ['env', 'service'];
-
-		mockLayout(50);
-		renderWithProviders(<LabelColumn labels={labels} />);
-
-		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+1');
+		// Overflow badge shows +3 (remaining labels)
+		const overflowBadge = screen.getByTestId('label-overflow-badge');
+		expect(overflowBadge).toBeInTheDocument();
+		expect(overflowBadge).toHaveTextContent('+3');
 	});
 
 	it('should render empty when no labels provided', () => {
@@ -151,9 +126,11 @@ describe('LabelColumn', () => {
 	it('should show all labels when container is wide enough', () => {
 		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
 
-		mockLayout(1000);
 		renderWithProviders(<LabelColumn labels={labels} />);
 
+		// Simulate wide container
+		triggerResize(1000);
+
 		// All labels visible
 		labels.forEach((label) => {
 			expect(screen.getByTestId(`label-tag-${label}`)).toBeInTheDocument();

frontend/src/components/Alerts/LabelColumn/LabelColumn.tsx

@@ -1,19 +1,35 @@
 import { Copy } from '@signozhq/icons';
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import { Tooltip } from '@signozhq/ui/tooltip';
-import cx from 'classnames';
-import { useLayoutEffect, useRef, useState } from 'react';
+import {
+	TooltipContent,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 
 import LabelTag from './LabelTag';
 
 import styles from './LabelColumn.module.scss';
-import { getVisibleCount } from './utils';
+import { BADGE_GAP, estimateBadgeWidth, OVERFLOW_BADGE_WIDTH } from './utils';
 
 export interface LabelColumnProps {
 	labels: string[];
-	color?: BadgeColorType;
+	color?:
+		| 'primary'
+		| 'secondary'
+		| 'success'
+		| 'error'
+		| 'warning'
+		| 'robin'
+		| 'forest'
+		| 'amber'
+		| 'sienna'
+		| 'cherry'
+		| 'sakura'
+		| 'aqua'
+		| 'vanilla';
 	value?: { [key: string]: string };
 }
 
@@ -23,37 +39,60 @@ function LabelColumn({
 	color = 'primary',
 }: LabelColumnProps): JSX.Element {
 	const containerRef = useRef<HTMLDivElement>(null);
-	const [visibleCount, setVisibleCount] = useState(labels.length);
+	const [maxVisibleCount, setMaxVisibleCount] = useState(labels.length);
 	const [, copyToClipboard] = useCopyToClipboard();
 
-	useLayoutEffect(() => {
+	const calculateMaxVisible = useCallback(
+		(width: number): number => {
+			if (width <= 0) {
+				return 1;
+			}
+
+			const availableWidth = width - OVERFLOW_BADGE_WIDTH - BADGE_GAP;
+			let usedWidth = 0;
+			let count = 0;
+
+			for (const label of labels) {
+				const badgeWidth = estimateBadgeWidth(label, value?.[label]) + BADGE_GAP;
+				if (usedWidth + badgeWidth > availableWidth && count > 0) {
+					break;
+				}
+				usedWidth += badgeWidth;
+				count++;
+			}
+
+			return Math.max(1, count);
+		},
+		[labels, value],
+	);
+
+	useEffect(() => {
 		const container = containerRef.current;
 		if (!container) {
 			return;
 		}
 
-		const measure = (): void => {
-			const available = container.clientWidth;
-			if (available <= 0) {
-				return;
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry && entry.contentRect.width > 0) {
+				setMaxVisibleCount(calculateMaxVisible(entry.contentRect.width));
 			}
+		});
 
-			const widths = Array.from(container.children)
-				.slice(0, labels.length)
-				.map((item) => item.getBoundingClientRect().width);
-			const gap = parseFloat(getComputedStyle(container).columnGap) || 0;
-
-			setVisibleCount(getVisibleCount(widths, available, gap));
-		};
-
-		const observer = new ResizeObserver(measure);
 		observer.observe(container);
-		measure();
+
+		if (container.clientWidth > 0) {
+			setMaxVisibleCount(calculateMaxVisible(container.clientWidth));
+		}
 
 		return (): void => observer.disconnect();
-	}, [labels, value]);
+	}, [calculateMaxVisible]);
 
-	const remainingLabels = labels.slice(visibleCount);
+	const needsOverflow = labels.length > maxVisibleCount;
+	const visibleLabels = needsOverflow
+		? labels.slice(0, maxVisibleCount)
+		: labels;
+	const remainingLabels = needsOverflow ? labels.slice(maxVisibleCount) : [];
 
 	return (
 		<div
@@ -61,23 +100,24 @@ function LabelColumn({
 			className={styles.labelColumn}
 			data-testid="label-column"
 		>
-			{labels.map((label, index) => (
-				<LabelTag
-					key={label}
-					label={label}
-					color={color}
-					value={value?.[label]}
-					className={cx({
-						[styles.overflowed]: index >= visibleCount,
-						[styles.shrinkable]: index === 0 && visibleCount === 1,
-					})}
-				/>
+			{visibleLabels.map((label) => (
+				<LabelTag key={label} label={label} color={color} value={value?.[label]} />
 			))}
 			{remainingLabels.length > 0 && (
-				<Tooltip
-					side="bottom"
-					align="end"
-					title={
+				<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">
 						<div className={styles.tooltipContent}>
 							<span>
 								{remainingLabels
@@ -100,14 +140,8 @@ function LabelColumn({
 								<Copy size={12} />
 							</button>
 						</div>
-					}
-				>
-					<span>
-						<Badge color={color} variant="outlined" testId="label-overflow-badge">
-							+{remainingLabels.length}
-						</Badge>
-					</span>
-				</Tooltip>
+					</TooltipContent>
+				</TooltipRoot>
 			)}
 		</div>
 	);

frontend/src/components/Alerts/LabelColumn/LabelTag.module.scss

@@ -1,3 +1,11 @@
+.labelBadge {
+	cursor: default;
+	font-size: 12px;
+
+	max-width: 180px;
+	text-overflow: ellipsis;
+}
+
 .labelValue {
 	text-overflow: ellipsis;
 	overflow: hidden;

frontend/src/components/Alerts/LabelColumn/LabelTag.tsx

@@ -1,24 +1,35 @@
 import { Copy } from '@signozhq/icons';
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui/badge';
 import { toast } from '@signozhq/ui/sonner';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import {
+	TooltipContent,
+	TooltipRoot,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
 import { useCopyToClipboard } from 'react-use';
 
 import styles from './LabelTag.module.scss';
 
 export interface LabelTagProps {
 	label: string;
-	color?: BadgeColorType;
+	color?:
+		| 'primary'
+		| 'secondary'
+		| 'success'
+		| 'error'
+		| 'warning'
+		| 'robin'
+		| 'forest'
+		| 'amber'
+		| 'sienna'
+		| 'cherry'
+		| 'sakura'
+		| 'aqua'
+		| 'vanilla';
 	value?: string;
-	className?: string;
 }
 
-function LabelTag({
-	label,
-	value,
-	color,
-	className,
-}: LabelTagProps): JSX.Element {
+function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
 	const [, copyToClipboard] = useCopyToClipboard();
 	const displayText = value ? `${label}: ${value}` : label;
 	const searchFormat = value ? `${label} ${value}` : label;
@@ -30,8 +41,20 @@ function LabelTag({
 	};
 
 	return (
-		<Tooltip
-			title={
+		<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>
 				<div className={styles.tooltipContent}>
 					<span>{displayText}</span>
 					<button
@@ -43,19 +66,8 @@ function LabelTag({
 						<Copy size={12} />
 					</button>
 				</div>
-			}
-		>
-			<span className={className}>
-				<Badge
-					textTransform="none"
-					color={color ?? 'secondary'}
-					variant="outlined"
-					testId={`label-tag-${label}`}
-				>
-					<span className={styles.labelValue}>{displayText}</span>
-				</Badge>
-			</span>
-		</Tooltip>
+			</TooltipContent>
+		</TooltipRoot>
 	);
 }
 

frontend/src/components/Alerts/LabelColumn/utils.ts

@@ -1,33 +1,14 @@
+export const BADGE_GAP = 4;
 export const OVERFLOW_BADGE_WIDTH = 40;
 
-/**
- * How many leading labels fit in `available` px, reserving room for the `+N` badge
- * whenever some are left out. At least one label is always shown.
- */
-export function getVisibleCount(
-	widths: number[],
-	available: number,
-	gap: number,
-): number {
-	const total = widths.reduce(
-		(sum, width, index) => sum + width + (index > 0 ? gap : 0),
-		0,
+export const BADGE_MAX_WIDTH = 180;
+export const BADGE_PADDING = 16;
+export const CHAR_WIDTH = 7;
+
+export function estimateBadgeWidth(label: string, value?: string): number {
+	const displayText = value ? `${label}: ${value}` : label;
+	return Math.min(
+		displayText.length * CHAR_WIDTH + BADGE_PADDING,
+		BADGE_MAX_WIDTH,
 	);
-	if (total <= available) {
-		return widths.length;
-	}
-
-	const limit = available - OVERFLOW_BADGE_WIDTH - gap;
-	let used = 0;
-	let count = 0;
-
-	for (const width of widths) {
-		used += width + (count > 0 ? gap : 0);
-		if (used > limit) {
-			break;
-		}
-		count++;
-	}
-
-	return Math.max(1, count);
 }

frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.tsx

@@ -30,23 +30,21 @@ function NoResultsEmptyState({
 			<div className={styles.actions}>
 				{onClear && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						onClick={onClear}
-						testId="no-results-clear-button"
+						data-testid="no-results-clear-button"
 					>
 						{clearButtonText}
 					</Button>
 				)}
 				{onRefresh && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<RefreshCw size={14} />}
 						onClick={onRefresh}
-						testId="no-results-refresh-button"
+						data-testid="no-results-refresh-button"
 					>
 						Refresh
 					</Button>

frontend/src/components/Alerts/constants.ts

@@ -1,4 +1,4 @@
-import type { BadgeColorType } from '@signozhq/ui/badge';
+import type { BadgeColor } 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, BadgeColorType> = {
-	critical: 'danger',
-	error: 'danger',
+export const SEVERITY_BADGE_COLORS: Record<string, BadgeColor> = {
+	critical: 'error',
+	error: 'error',
 	warning: 'warning',
 	info: 'primary',
 };

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

@@ -33,3 +33,36 @@
 	color: var(--l1-foreground);
 	white-space: nowrap;
 }
+
+.auth-header-help-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	height: 32px;
+	padding: 10px 16px;
+	background: var(--l2-background);
+	color: var(--l2-foreground);
+	border: none;
+	border-radius: 2px;
+	cursor: pointer;
+	transition: opacity 0.2s ease;
+
+	span {
+		font-family: var(--font-family-inter, Inter, sans-serif);
+		font-size: 11px;
+		font-weight: 500;
+		line-height: 1;
+		color: var(--l2-foreground);
+		text-align: center;
+	}
+
+	svg {
+		flex-shrink: 0;
+		color: var(--l2-foreground);
+	}
+
+	&:hover {
+		opacity: 0.8;
+	}
+}

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -22,11 +22,11 @@ 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="secondary"
+				color="none"
 			>
 				Get Help
 			</Button>

frontend/src/components/Badges/Badges.tsx

@@ -1,7 +1,7 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { Check, Plus, X } from '@signozhq/icons';
 import { Button, Flex } from 'antd';
-import { Pill } from '@signozhq/ui/pill';
+import { Badge } from '@signozhq/ui/badge';
 import Input from 'components/Input';
 
 import './Badges.styles.scss';
@@ -47,13 +47,18 @@ function Badges({ tags, setTags }: AddTagsProps): JSX.Element {
 	return (
 		<div className="tags-container">
 			{tags.map<React.ReactNode>((tag) => (
-				<Pill.Closeable
-					textTransform="none"
+				<Badge
 					key={tag}
-					onClose={() => handleClose(tag)}
+					color="vanilla"
+					style={{ userSelect: 'none' }}
+					closable
+					onClose={(e): void => {
+						e.preventDefault();
+						handleClose(tag);
+					}}
 				>
 					{tag}
-				</Pill.Closeable>
+				</Badge>
 			))}
 
 			{inputVisible && (

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.styles.scss

@@ -39,3 +39,9 @@
 		}
 	}
 }
+
+.cloud-service-data-collected-table-tooltip {
+	max-width: 280px;
+	white-space: normal;
+	word-break: break-word;
+}

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 { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
 
 import './CloudServiceDataCollected.styles.scss';
 
@@ -88,15 +88,23 @@ function CloudServiceDataCollected({
 						<BarChart size={14} />
 						Metrics
 						{metricsInfoTooltip && (
-							<Tooltip title={metricsInfoTooltip} side="top">
-								<span
-									className="cloud-service-data-collected-table-heading-info"
-									aria-label="About the metrics listed below"
-									data-testid="data-collected-metrics-info"
+							<TooltipProvider>
+								<TooltipSimple
+									title={metricsInfoTooltip}
+									side="top"
+									tooltipContentProps={{
+										className: 'cloud-service-data-collected-table-tooltip',
+									}}
 								>
-									<Info size={12} />
-								</span>
-							</Tooltip>
+									<span
+										className="cloud-service-data-collected-table-heading-info"
+										aria-label="About the metrics listed below"
+										data-testid="data-collected-metrics-info"
+									>
+										<Info size={12} />
+									</span>
+								</TooltipSimple>
+							</TooltipProvider>
 						)}
 					</div>
 					<Table

frontend/src/components/CodeBlock/CodeBlock.module.scss

@@ -2,13 +2,6 @@
 	position: relative;
 }
 
-.copyButton {
-	position: absolute;
-	right: 8px;
-	top: 8px;
-	z-index: 1;
-}
-
 .codeBlockSyntaxHighlighter {
 	background-color: var(--l2-background) !important;
 	border-radius: 4px !important;

frontend/src/components/CodeBlock/CodeBlock.tsx

@@ -2,7 +2,6 @@ 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';
@@ -53,20 +52,16 @@ function CodeBlock({
 			data-testid="code-block-container"
 		>
 			{showCopyButton ? (
-				<div className={styles.copyButton}>
-					<Tooltip title={isCopied ? 'Copied' : 'Copy'}>
-						<Button
-							variant="ghost"
-							color="secondary"
-							size="sm"
-							icon
-							onClick={handleCopy}
-							aria-label="Copy code"
-						>
-							{isCopied ? <Check size={14} /> : <Copy size={14} />}
-						</Button>
-					</Tooltip>
-				</div>
+				<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 }}
+				/>
 			) : null}
 			<SyntaxHighlighter
 				style={a11yDark}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -134,27 +134,26 @@ function CreateServiceAccountModal(): JSX.Element {
 
 			<DialogFooter className="create-sa-modal__footer">
 				<Button
-					size="md"
 					type="button"
 					variant="solid"
 					color="secondary"
 					onClick={handleClose}
-					testId="create-sa-cancel-btn"
-					prefix={<X size={12} />}
+					data-testid="create-sa-cancel-btn"
 				>
+					<X size={12} />
 					Cancel
 				</Button>
 
 				<AuthZButton
-					size="md"
 					checks={[SACreatePermission]}
+					withPortal={false}
 					type="submit"
 					form="create-sa-form"
 					variant="solid"
 					color="primary"
 					loading={isSubmitting}
 					disabled={!isValid}
-					testId="create-sa-submit-btn"
+					data-testid="create-sa-submit-btn"
 				>
 					Create Service Account
 				</AuthZButton>

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

@@ -5,7 +5,6 @@ import {
 } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { submitImplicitly } from 'tests/submitImplicitly';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
@@ -61,10 +60,7 @@ describe('CreateServiceAccountModal', () => {
 		await screen.findByTestId('create-sa-name-input');
 
 		await waitFor(() =>
-			expect(screen.getByTestId('create-sa-submit-btn')).toHaveAttribute(
-				'aria-disabled',
-				'true',
-			),
+			expect(screen.getByTestId('create-sa-submit-btn')).toBeDisabled(),
 		);
 	});
 
@@ -76,14 +72,10 @@ describe('CreateServiceAccountModal', () => {
 		const submitBtn = await screen.findByTestId('create-sa-submit-btn');
 
 		await user.type(nameInput, 'test');
-		await waitFor(() =>
-			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
-		);
+		await waitFor(() => expect(submitBtn).not.toBeDisabled());
 
 		await user.clear(nameInput);
-		await waitFor(() =>
-			expect(submitBtn).toHaveAttribute('aria-disabled', 'true'),
-		);
+		await waitFor(() => expect(submitBtn).toBeDisabled());
 	});
 
 	it('successful submit shows toast.success and closes modal', async () => {
@@ -94,9 +86,7 @@ describe('CreateServiceAccountModal', () => {
 		await user.type(nameInput, 'Deploy Bot');
 
 		const submitBtn = screen.getByTestId('create-sa-submit-btn');
-		await waitFor(() =>
-			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
-		);
+		await waitFor(() => expect(submitBtn).not.toBeDisabled());
 		await user.click(submitBtn);
 
 		await waitFor(() => {
@@ -112,40 +102,6 @@ describe('CreateServiceAccountModal', () => {
 		});
 	});
 
-	it('pressing Enter again while creating sends one request', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		let requests = 0;
-		server.use(
-			rest.post(SERVICE_ACCOUNTS_ENDPOINT, (_, res, ctx) => {
-				requests += 1;
-				return res(
-					ctx.delay(100),
-					ctx.status(201),
-					ctx.json({ status: 'success', data: {} }),
-				);
-			}),
-		);
-		renderModal();
-
-		const nameInput = await screen.findByTestId<HTMLInputElement>(
-			'create-sa-name-input',
-		);
-		await user.type(nameInput, 'Deploy Bot');
-		const submitBtn = screen.getByTestId('create-sa-submit-btn');
-		await waitFor(() =>
-			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
-		);
-
-		submitImplicitly(nameInput);
-		await waitFor(() => expect(submitBtn).toHaveAttribute('aria-busy', 'true'));
-		submitImplicitly(nameInput);
-
-		await waitFor(() => {
-			expect(mockToast.success).toHaveBeenCalled();
-		});
-		expect(requests).toBe(1);
-	});
-
 	it('shows toast.error on API error and keeps modal open', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
@@ -164,9 +120,7 @@ describe('CreateServiceAccountModal', () => {
 		await user.type(nameInput, 'Dupe Bot');
 
 		const submitBtn = screen.getByTestId('create-sa-submit-btn');
-		await waitFor(() =>
-			expect(submitBtn).not.toHaveAttribute('aria-disabled', 'true'),
-		);
+		await waitFor(() => expect(submitBtn).not.toBeDisabled());
 		await user.click(submitBtn);
 
 		await waitFor(() => {
@@ -226,10 +180,7 @@ describe('CreateServiceAccountModal', () => {
 		).resolves.toBeInTheDocument();
 
 		// The footer lives outside the guard: submit is gated, Cancel still works.
-		expect(screen.getByTestId('create-sa-submit-btn')).toHaveAttribute(
-			'aria-disabled',
-			'true',
-		);
+		expect(screen.getByTestId('create-sa-submit-btn')).toBeDisabled();
 
 		await user.click(screen.getByTestId('create-sa-cancel-btn'));
 

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -4,6 +4,30 @@
 	align-items: center;
 	gap: 4px;
 
+	.zoom-out-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		color: var(--secondary-foreground);
+		background-color: var(--secondary-background);
+		border: 1px solid var(--secondary-border);
+		border-radius: 2px;
+		box-shadow: none;
+		padding: 10px;
+		height: 33px;
+
+		&:hover:not(:disabled) {
+			color: var(--primary-foreground);
+			background: var(--primary-background);
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
+
 	.timeSelection-input {
 		&:hover {
 			border-color: var(--l1-border) !important;

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -650,20 +650,20 @@ function CustomTimePicker({
 				</Popover>
 			</Tooltip>
 			{!showLiveLogs && !isModalTimeSelection && (
-				<Tooltip title={zoomOutDisabled ? undefined : 'Zoom out'}>
+				<Tooltip
+					title={
+						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
+					}
+				>
 					<Button
-						disabledTooltip="Zoom out time range is limited to 1 month"
-						size="md"
+						className="zoom-out-btn"
 						onClick={handleZoomOut}
 						disabled={zoomOutDisabled}
-						testId="zoom-out-btn"
-						icon
-						aria-label="Zoom out"
+						data-testid="zoom-out-btn"
+						prefix={<ZoomOut size={14} />}
 						variant="solid"
-						color="secondary"
-					>
-						<ZoomOut size={14} />
-					</Button>
+						color="none"
+					/>
 				</Tooltip>
 			)}
 		</div>

frontend/src/components/CustomTimePicker/__tests__/customTimePickerZoomOut.test.tsx

@@ -164,6 +164,6 @@ describe('CustomTimePicker - zoom out button', () => {
 		);
 
 		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
-		expect(zoomOutBtn).toHaveAttribute('aria-disabled', 'true');
+		expect(zoomOutBtn).toBeDisabled();
 	});
 });

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx

@@ -27,14 +27,12 @@ function DetailsHeader({
 	const closeButton = (
 		<Button
 			variant="ghost"
-			size="sm"
-			icon
+			size="icon"
 			color="secondary"
 			onClick={onClose}
 			aria-label="Close"
-		>
-			<X size={14} />
-		</Button>
+			prefix={<X size={14} />}
+		></Button>
 	);
 
 	return (

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss

@@ -42,5 +42,12 @@
 			height: 1px;
 			background: var(--l1-border);
 		}
+
+		.export-button {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
 	}
 }

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -308,16 +308,13 @@ describe.each([
 
 		fireEvent.click(screen.getByText('Export'));
 
-		expect(screen.getByTestId(testId)).toHaveAttribute('aria-disabled', 'true');
+		expect(screen.getByTestId(testId)).toBeDisabled();
 		expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
 		resolveDownload!();
 
 		await waitFor(() => {
-			expect(screen.getByTestId(testId)).not.toHaveAttribute(
-				'aria-disabled',
-				'true',
-			);
+			expect(screen.getByTestId(testId)).not.toBeDisabled();
 		});
 	});
 });

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Popover, Tooltip } from 'antd';
 import { Button } from '@signozhq/ui/button';
-import { RadioGroup } from '@signozhq/ui/radio-group';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -69,15 +69,10 @@ export default function DownloadOptionsMenu({
 			>
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup
-						color="primary"
-						value={exportFormat}
-						onChange={setExportFormat}
-						items={[
-							{ value: DownloadFormats.CSV, label: 'csv' },
-							{ value: DownloadFormats.JSONL, label: 'jsonl' },
-						]}
-					/>
+					<RadioGroup value={exportFormat} onChange={setExportFormat}>
+						<RadioGroupItem value={DownloadFormats.CSV}>csv</RadioGroupItem>
+						<RadioGroupItem value={DownloadFormats.JSONL}>jsonl</RadioGroupItem>
+					</RadioGroup>
 				</div>
 
 				<div className="horizontal-line" />
@@ -85,15 +80,19 @@ 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))}
-						items={[
-							{ value: String(DownloadRowCounts.TEN_K), label: '10k' },
-							{ value: String(DownloadRowCounts.THIRTY_K), label: '30k' },
-							{ value: String(DownloadRowCounts.FIFTY_K), label: '50k' },
-						]}
-					/>
+					>
+						<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>
 				</div>
 
 				{dataSource !== DataSource.TRACES && (
@@ -102,15 +101,12 @@ export default function DownloadOptionsMenu({
 
 						<div className="columns-scope">
 							<Typography.Text className="title">Columns</Typography.Text>
-							<RadioGroup
-								color="primary"
-								value={columnsScope}
-								onChange={setColumnsScope}
-								items={[
-									{ value: DownloadColumnsScopes.ALL, label: 'All' },
-									{ value: DownloadColumnsScopes.SELECTED, label: 'Selected' },
-								]}
-							/>
+							<RadioGroup value={columnsScope} onChange={setColumnsScope}>
+								<RadioGroupItem value={DownloadColumnsScopes.ALL}>All</RadioGroupItem>
+								<RadioGroupItem value={DownloadColumnsScopes.SELECTED}>
+									Selected
+								</RadioGroupItem>
+							</RadioGroup>
 						</div>
 					</>
 				)}
@@ -119,9 +115,9 @@ export default function DownloadOptionsMenu({
 					variant="solid"
 					color="primary"
 					prefix={<Download size={16} />}
-					size="md"
-					width="100%"
 					onClick={handleExport}
+					className="export-button"
+					disabled={isDownloading}
 					loading={isDownloading}
 				>
 					Export
@@ -152,14 +148,13 @@ export default function DownloadOptionsMenu({
 				<Button
 					variant="ghost"
 					color="secondary"
-					size="sm"
-					icon
+					size="icon"
+					prefix={<Download size={14} />}
 					aria-label="Download"
-					testId={`periscope-btn-download-${dataSource}`}
+					data-testid={`periscope-btn-download-${dataSource}`}
+					disabled={isDownloading}
 					loading={isDownloading}
-				>
-					<Download size={14} />
-				</Button>
+				/>
 			</Tooltip>
 		</Popover>
 	);

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -38,23 +38,18 @@ function DeleteMemberDialog({
 
 	const footer = (
 		<>
-			<Button
-				size="md"
-				variant="solid"
-				color="secondary"
-				onClick={onClose}
-				prefix={<X size={12} />}
-			>
+			<Button variant="solid" color="secondary" onClick={onClose}>
+				<X size={12} />
 				Cancel
 			</Button>
 			<Button
-				size="md"
 				variant="solid"
-				color="danger"
+				color="destructive"
+				disabled={isDeleting}
 				onClick={onConfirm}
 				loading={isDeleting}
-				prefix={<Trash2 size={12} />}
 			>
+				<Trash2 size={12} />
 				{isDeleting ? 'Processing...' : title}
 			</Button>
 		</>

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

@@ -90,6 +90,7 @@
 			font-weight: var(--uppercase-small-500-font-weight);
 			line-height: 100%;
 			letter-spacing: 0.44px;
+			text-transform: uppercase;
 		}
 	}
 
@@ -112,7 +113,6 @@
 	&__footer-left {
 		display: flex;
 		align-items: center;
-		gap: var(--spacing-4);
 	}
 
 	&__footer-right {
@@ -128,6 +128,10 @@
 		flex-shrink: 0;
 	}
 
+	&__tooltip-wrapper {
+		display: inline-flex;
+	}
+
 	&__footer-btn {
 		display: inline-flex;
 		align-items: center;
@@ -196,7 +200,6 @@
 		background: var(--l2-background);
 		border: 1px solid var(--l1-border);
 		border-radius: 2px;
-		padding-right: var(--spacing-4);
 	}
 
 	&__link-text-wrap {
@@ -217,4 +220,8 @@
 		line-height: var(--line-height-18);
 		letter-spacing: -0.07px;
 	}
+
+	&__copy-btn {
+		border-left: 1px solid var(--l1-border);
+	}
 }

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -519,12 +519,7 @@ function EditMemberDrawer({
 									localRoles.map((roleId) => {
 										const role = availableRoles.find((r) => r.id === roleId);
 										return (
-											<Badge
-												textTransform="none"
-												variant="solid"
-												key={roleId}
-												color="secondary"
-											>
+											<Badge key={roleId} color="vanilla">
 												{role?.name ?? roleId}
 											</Badge>
 										);
@@ -564,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="success" variant="outlined">
+						<Badge color="forest" variant="outline">
 							ACTIVE
 						</Badge>
 					) : member?.status === MemberStatus.Deleted ? (
-						<Badge color="danger" variant="outlined">
+						<Badge color="cherry" variant="outline">
 							DELETED
 						</Badge>
 					) : (
-						<Badge color="warning" variant="outlined">
+						<Badge color="amber" variant="outline">
 							INVITED
 						</Badge>
 					)}
@@ -580,16 +575,12 @@ function EditMemberDrawer({
 
 				<div className="edit-member-drawer__meta-item">
 					<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
-					<Badge textTransform="none" variant="solid" color="secondary">
-						{formatTimestamp(member?.joinedOn)}
-					</Badge>
+					<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
 				</div>
 				{!isInvited && (
 					<div className="edit-member-drawer__meta-item">
 						<span className="edit-member-drawer__meta-label">Last Modified</span>
-						<Badge textTransform="none" variant="solid" color="secondary">
-							{formatTimestamp(member?.updatedAt)}
-						</Badge>
+						<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
 					</div>
 				)}
 			</div>
@@ -620,59 +611,55 @@ function EditMemberDrawer({
 			{!isDeleted && (
 				<>
 					<div className="edit-member-drawer__footer-left">
-						<Button
-							disabledTooltip={getDeleteTooltip(isRootUser, isSelf)}
-							size="md"
-							onClick={(): void => setShowDeleteConfirm(true)}
-							disabled={isRootUser || isSelf}
-							variant="link"
-							color="danger"
-							prefix={<Trash2 size={12} />}
-						>
-							{isInvited ? 'Revoke Invite' : 'Delete Member'}
-						</Button>
+						<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
+							<span className="edit-member-drawer__tooltip-wrapper">
+								<Button
+									onClick={(): void => setShowDeleteConfirm(true)}
+									disabled={isRootUser || isSelf}
+									variant="link"
+									color="destructive"
+								>
+									<Trash2 size={12} />
+									{isInvited ? 'Revoke Invite' : 'Delete Member'}
+								</Button>
+							</span>
+						</Tooltip>
 
 						<div className="edit-member-drawer__footer-divider" />
-						<Button
-							disabledTooltip={ROOT_USER_TOOLTIP}
-							size="md"
-							onClick={handleGenerateResetLink}
-							disabled={isRootUser}
-							loading={isGeneratingLink || isLoadingTokenStatus}
-							variant="link"
-							color="warning"
-							prefix={<RefreshCw size={12} />}
-						>
-							{isGeneratingLink
-								? 'Generating...'
-								: isInvited
-									? getInviteButtonLabel(
-											isLoadingTokenStatus,
-											existingToken,
-											isTokenExpired,
-											tokenNotFound,
-										)
-									: 'Generate Password Reset Link'}
-						</Button>
+						<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
+							<span className="edit-member-drawer__tooltip-wrapper">
+								<Button
+									onClick={handleGenerateResetLink}
+									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
+									variant="link"
+									color="warning"
+								>
+									<RefreshCw size={12} />
+									{isGeneratingLink
+										? 'Generating...'
+										: isInvited
+											? getInviteButtonLabel(
+													isLoadingTokenStatus,
+													existingToken,
+													isTokenExpired,
+													tokenNotFound,
+												)
+											: 'Generate Password Reset Link'}
+								</Button>
+							</span>
+						</Tooltip>
 					</div>
 
 					<div className="edit-member-drawer__footer-right">
-						<Button
-							size="md"
-							variant="outlined"
-							color="secondary"
-							onClick={handleClose}
-							prefix={<X size={14} />}
-						>
+						<Button variant="outlined" color="secondary" onClick={handleClose}>
+							<X size={14} />
 							Cancel
 						</Button>
 
 						<Button
-							disabledTooltip={isRootUser ? ROOT_USER_TOOLTIP : 'No changes to save'}
-							size="md"
 							variant="solid"
 							color="primary"
-							disabled={!isDirty || isRootUser}
+							disabled={!isDirty || isSaving || isRootUser}
 							onClick={handleSave}
 							loading={isSaving}
 						>

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -45,11 +45,11 @@ function ResetLinkDialog({
 						<span className="reset-link-dialog__link-text">{resetLink}</span>
 					</div>
 					<Button
-						size="md"
 						variant="link"
 						color="secondary"
 						onClick={onCopy}
 						prefix={hasCopied ? <Check size={12} /> : <Copy size={12} />}
+						className="reset-link-dialog__copy-btn"
 					>
 						{hasCopied ? 'Copied!' : 'Copy'}
 					</Button>

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

@@ -251,7 +251,7 @@ describe('EditMemberDrawer', () => {
 		expect(screen.getByText('ACTIVE')).toBeInTheDocument();
 		expect(
 			screen.getByRole('button', { name: /save member details/i }),
-		).toHaveAttribute('aria-disabled', 'true');
+		).toBeDisabled();
 	});
 
 	it('enables Save after editing name and calls updateUser on confirm', async () => {
@@ -271,9 +271,7 @@ describe('EditMemberDrawer', () => {
 		await user.type(nameInput, 'Alice Updated');
 
 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() =>
-			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
-		);
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
 
 		await user.click(saveBtn);
 
@@ -297,9 +295,7 @@ describe('EditMemberDrawer', () => {
 		await user.type(nameInput, 'Alice Updated');
 
 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() =>
-			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
-		);
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
 		await user.click(saveBtn);
 
 		await waitFor(() => {
@@ -327,9 +323,7 @@ describe('EditMemberDrawer', () => {
 		await user.click(await screen.findByTitle('signoz-editor'));
 
 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() =>
-			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
-		);
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
 		await user.click(saveBtn);
 
 		await waitFor(() => {
@@ -355,9 +349,7 @@ describe('EditMemberDrawer', () => {
 		await user.click(removeBtn);
 
 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() =>
-			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
-		);
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
 		await user.click(saveBtn);
 
 		await waitFor(() => {
@@ -513,9 +505,7 @@ describe('EditMemberDrawer', () => {
 		await user.type(nameInput, 'Bob Updated');
 
 		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() =>
-			expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
-		);
+		await waitFor(() => expect(saveBtn).not.toBeDisabled());
 		await user.click(saveBtn);
 
 		await waitFor(() => {
@@ -551,9 +541,7 @@ describe('EditMemberDrawer', () => {
 			await user.type(nameInput, 'Alice Updated');
 
 			const saveBtn = screen.getByRole('button', { name: /save member details/i });
-			await waitFor(() =>
-				expect(saveBtn).not.toHaveAttribute('aria-disabled', 'true'),
-			);
+			await waitFor(() => expect(saveBtn).not.toBeDisabled());
 			await user.click(saveBtn);
 
 			await waitFor(() => {
@@ -631,7 +619,7 @@ describe('EditMemberDrawer', () => {
 			renderDrawer({ member: selfMember });
 			expect(
 				screen.getByRole('button', { name: /delete member/i }),
-			).toHaveAttribute('aria-disabled', 'true');
+			).toBeDisabled();
 		});
 
 		it('does not open delete confirm dialog when Delete is clicked while disabled (isSelf)', async () => {
@@ -654,7 +642,7 @@ describe('EditMemberDrawer', () => {
 			renderDrawer({ member: selfMember });
 			expect(
 				screen.getByRole('button', { name: /generate password reset link/i }),
-			).not.toHaveAttribute('aria-disabled', 'true');
+			).not.toBeDisabled();
 		});
 	});
 
@@ -676,21 +664,21 @@ describe('EditMemberDrawer', () => {
 			renderDrawer();
 			expect(
 				screen.getByRole('button', { name: /delete member/i }),
-			).toHaveAttribute('aria-disabled', 'true');
+			).toBeDisabled();
 		});
 
 		it('disables Reset Link button for root user', () => {
 			renderDrawer();
 			expect(
 				screen.getByRole('button', { name: /generate password reset link/i }),
-			).toHaveAttribute('aria-disabled', 'true');
+			).toBeDisabled();
 		});
 
 		it('disables Save button for root user', () => {
 			renderDrawer();
 			expect(
 				screen.getByRole('button', { name: /save member details/i }),
-			).toHaveAttribute('aria-disabled', 'true');
+			).toBeDisabled();
 		});
 
 		it('does not open delete confirm dialog when Delete is clicked while disabled (root)', async () => {

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -53,7 +53,7 @@ function ErrorModal({
 					onClick={(): void => setVisible(true)}
 					onKeyDown={undefined}
 				>
-					<Badge variant="solid" color="danger">
+					<Badge color="error">
 						<CircleAlert size={14} color={Color.BG_CHERRY_500} /> error
 					</Badge>
 				</span>

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button, Col, Popover, Row, Select, Space } from 'antd';
-import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
+import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -137,15 +137,16 @@ function ExplorerCard({
 		);
 	};
 
-	const moreOptionItems: DropdownItemType[] = [
-		{
-			type: 'item',
-			value: 'delete',
-			label: <Typography.Text strong>Delete</Typography.Text>,
-			onClick: onDeleteHandler,
-			prefix: <Trash2 size="md" />,
-		},
-	];
+	const moreOptionMenu: MenuProps = {
+		items: [
+			{
+				key: 'delete',
+				label: <Typography.Text strong>Delete</Typography.Text>,
+				onClick: onDeleteHandler,
+				icon: <Trash2 size="md" />,
+			},
+		],
+	};
 
 	const saveButtonType = isQueryUpdated ? 'default' : 'primary';
 	const saveButtonIcon = isQueryUpdated ? null : <Save size="md" />;
@@ -229,14 +230,9 @@ function ExplorerCard({
 								</Popover>
 								<Share2 onClick={onCopyUrlHandler} size="md" />
 								{viewKey && (
-									<Dropdown
-										items={moreOptionItems}
-										nativeButton
-										align="end"
-										side="bottom"
-									>
+									<DropdownMenuSimple menu={moreOptionMenu}>
 										<Button type="text" size="small" icon={<Ellipsis size="md" />} />
-									</Dropdown>
+									</DropdownMenuSimple>
 								)}
 							</Space>
 						</OffSetCol>

frontend/src/components/ExportMenu/ExportMenu.styles.scss

@@ -26,4 +26,8 @@
 			font-size: var(--periscope-font-size-base);
 		}
 	}
+
+	.export-button {
+		width: 100%;
+	}
 }

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 } from '@signozhq/ui/radio-group';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	ClientExportData,
@@ -51,41 +51,36 @@ export default function ExportMenu({
 
 	return (
 		<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-			<Tooltip title="Download">
+			<TooltipSimple title="Download">
 				<PopoverTrigger asChild>
 					<Button
 						variant="ghost"
 						color="secondary"
-						size="sm"
-						icon
+						size="icon"
 						aria-label="Download"
-						testId={`export-menu-${dataSource}`}
+						data-testid={`export-menu-${dataSource}`}
+						disabled={isExporting}
 						loading={isExporting}
 					>
 						<Download size={14} />
 					</Button>
 				</PopoverTrigger>
-			</Tooltip>
+			</TooltipSimple>
 			<PopoverContent align="end" className="export-menu-popover">
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup
-						color="primary"
-						value={exportFormat}
-						onChange={setExportFormat}
-						items={[
-							{ value: ExportFormat.Csv, label: 'csv' },
-							{ value: ExportFormat.Jsonl, label: 'jsonl' },
-						]}
-					/>
+					<RadioGroup value={exportFormat} onChange={setExportFormat}>
+						<RadioGroupItem value={ExportFormat.Csv}>csv</RadioGroupItem>
+						<RadioGroupItem value={ExportFormat.Jsonl}>jsonl</RadioGroupItem>
+					</RadioGroup>
 				</div>
 
 				<Button
-					size="md"
 					variant="solid"
 					color="primary"
-					width="100%"
+					className="export-button"
 					onClick={handleExport}
+					disabled={isExporting}
 					loading={isExporting}
 					prefix={<Download size={16} />}
 				>

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

@@ -80,6 +80,6 @@ describe('ExportMenu', () => {
 		mockIsExporting = true;
 		renderMenu();
 
-		expect(screen.getByTestId(TEST_ID)).toHaveAttribute('aria-disabled', 'true');
+		expect(screen.getByTestId(TEST_ID)).toBeDisabled();
 	});
 });

frontend/src/components/FieldsSelector/AddedFields.tsx

@@ -57,8 +57,9 @@ function SortableField({
 			</div>
 			{!isRequired && (
 				<Button
-					variant="solid"
-					color="danger"
+					className={cx(styles.removeBtn, 'periscope-btn')}
+					variant="outlined"
+					color="destructive"
 					size="sm"
 					onClick={(): void => onRemove(field)}
 				>

frontend/src/components/FieldsSelector/FieldsSelector.module.scss

@@ -98,15 +98,11 @@
 	user-select: none;
 	font-size: 13px;
 
-	> [data-slot='button'] {
-		opacity: 0;
-		transition: opacity 0.15s ease-in-out;
-	}
-
 	&:hover {
 		background-color: var(--l2-background);
 
-		> [data-slot='button'] {
+		.removeBtn,
+		.addBtn {
 			opacity: 1;
 		}
 	}
@@ -141,6 +137,14 @@
 	height: 32px;
 }
 
+.removeBtn,
+.addBtn {
+	padding: 4px 10px;
+	opacity: 0;
+	transition: opacity 0.15s ease-in-out;
+	flex-shrink: 0;
+}
+
 .footer {
 	display: flex;
 	gap: 12px;

frontend/src/components/FieldsSelector/FieldsSelector.tsx

@@ -173,7 +173,6 @@ function FieldsSelectorContent({
 				{hasUnsavedChanges && (
 					<div className={styles.footer}>
 						<Button
-							size="md"
 							variant="outlined"
 							color="secondary"
 							onClick={handleDiscard}
@@ -182,7 +181,6 @@ function FieldsSelectorContent({
 							Discard
 						</Button>
 						<Button
-							size="md"
 							variant="solid"
 							color="primary"
 							onClick={handleSave}

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -138,6 +138,7 @@ function OtherFields({
 									<span className={styles.fieldKey}>{attr.name}</span>
 									{!isAtLimit && (
 										<Button
+											className={cx(styles.addBtn, 'periscope-btn')}
 											variant="outlined"
 											color="secondary"
 											size="sm"

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 { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
@@ -102,12 +102,10 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	return (
 		<div className="feedback-modal-container">
 			<div className="feedback-modal-header">
-				<ToggleGroup
-					variant="outlined"
-					color="secondary"
-					size="sm"
+				<ToggleGroupSimple
 					type="single"
 					value={activeTab}
+					className="feedback-modal-tabs"
 					onChange={setActiveTab}
 					items={items}
 				/>

frontend/src/components/HeaderRightSection/HeaderRightSection.styles.scss

@@ -1,8 +1,7 @@
 .header-right-section-container {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-8);
-	padding-right: var(--spacing-8);
+	gap: 8px;
 }
 
 .header-ai-assistant-btn-container {
@@ -122,26 +121,78 @@
 }
 
 .feedback-modal-container {
-	.feedback-modal-tab-label {
+	.feedback-modal-tabs {
+		width: 100%;
 		display: flex;
-		align-items: center;
-		gap: 8px;
 
-		.tab-icon {
-			width: 6px;
-			height: 6px;
+		.ant-radio-button-wrapper {
+			flex: 1;
+			margin: 0px !important;
+
+			border: 1px solid var(--l1-border);
+
+			&:before {
+				display: none;
+			}
+
+			.ant-radio-button-checked {
+				background-color: var(--l3-background);
+			}
 		}
 
-		.feedback-tab {
-			background-color: var(--danger-background);
+		.feedback-modal-tab-label {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+
+			.tab-icon {
+				width: 6px;
+				height: 6px;
+			}
+
+			.feedback-tab {
+				background-color: var(--danger-background);
+			}
+
+			.bug-tab {
+				background-color: var(--warning-background);
+			}
+
+			.feature-tab {
+				background-color: var(--primary-background);
+			}
 		}
 
-		.bug-tab {
-			background-color: var(--warning-background);
-		}
+		.ant-tabs-nav-list {
+			.ant-tabs-tab {
+				padding: 6px 16px;
 
-		.feature-tab {
-			background-color: var(--primary-background);
+				border-radius: 2px;
+				background: var(--l2-background);
+				box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
+				border: 1px solid var(--l1-border);
+
+				margin: 0 !important;
+
+				.ant-tabs-tab-btn {
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 166.667% */
+					letter-spacing: -0.06px;
+				}
+
+				&-active {
+					background: var(--l3-background);
+					color: var(--l1-foreground);
+
+					border-bottom: none !important;
+
+					.ant-tabs-tab-btn {
+						color: var(--l1-foreground);
+					}
+				}
+			}
 		}
 	}
 

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 { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import Noz from 'components/Noz/Noz';
 import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
 import { Popover } from 'antd';
@@ -113,26 +113,24 @@ function HeaderRightSection({
 						</span>
 					) : null}
 
-					<span className="noz-wave">
-						<Tooltip title={NOZ_TOOLTIP_TITLE}>
-							<Button
-								size="md"
-								variant="ghost"
-								color="secondary"
-								onClick={handleOpenAIAssistant}
-								aria-label={
-									showHeaderPendingBadge
-										? pendingUserInputCount === 1
-											? 'Open Noz, 1 action needs your response'
-											: `Open Noz, ${pendingUserInputCount} actions need your response`
-										: 'Open Noz'
-								}
-								prefix={<Noz size={20} />}
-							>
-								<Typography.Text>Noz</Typography.Text>
-							</Button>
-						</Tooltip>
-					</span>
+					<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
+						<Button
+							variant="solid"
+							color="secondary"
+							className="noz-wave"
+							onClick={handleOpenAIAssistant}
+							aria-label={
+								showHeaderPendingBadge
+									? pendingUserInputCount === 1
+										? 'Open Noz, 1 action needs your response'
+										: `Open Noz, ${pendingUserInputCount} actions need your response`
+									: 'Open Noz'
+							}
+							prefix={<Noz size={20} />}
+						>
+							<Typography.Text>Noz</Typography.Text>
+						</Button>
+					</TooltipSimple>
 				</div>
 			)}
 
@@ -149,15 +147,13 @@ function HeaderRightSection({
 					onOpenChange={handleOpenFeedbackModalChange}
 				>
 					<Button
-						color="primary"
-						variant="link"
-						size="md"
-						icon
+						variant="ghost"
+						size="icon"
+						className="share-feedback-btn"
 						aria-label="Feedback"
+						prefix={<SquarePen size={14} />}
 						onClick={handleOpenFeedbackModal}
-					>
-						<SquarePen size={14} />
-					</Button>
+					/>
 				</Popover>
 			)}
 
@@ -174,19 +170,16 @@ function HeaderRightSection({
 					onOpenChange={handleOpenAnnouncementsModalChange}
 				>
 					<Button
-						color="primary"
-						variant="link"
-						size="md"
-						icon
+						variant="ghost"
+						size="icon"
 						aria-label="Announcements"
+						prefix={<Inbox size={14} />}
 						onClick={(): void => {
 							logEvent('Announcements: Clicked', {
 								page: location.pathname,
 							});
 						}}
-					>
-						<Inbox size={14} />
-					</Button>
+					/>
 				</Popover>
 			)}
 
@@ -203,15 +196,12 @@ function HeaderRightSection({
 					onOpenChange={handleOpenShareURLModalChange}
 				>
 					<Button
-						color="primary"
-						variant="link"
-						size="md"
-						icon
+						variant="ghost"
+						size="icon"
 						aria-label="Share"
+						prefix={<Globe size={14} />}
 						onClick={handleOpenShareURLModal}
-					>
-						<Globe size={14} />
-					</Button>
+					/>
 				</Popover>
 			)}
 		</div>

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -149,9 +149,6 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 								<Info size={14} color={Color.BG_AMBER_600} />
 							)}
 							<Switch
-								color="primary"
-								textPlacement="right"
-								disabledTooltip="Please select / enter valid relative time to toggle."
 								value={enableAbsoluteTime}
 								disabled={!isValidateRelativeTime}
 								onChange={(): void => {
@@ -176,8 +173,6 @@ 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)}
 						/>

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

@@ -69,23 +69,23 @@ describe('FeedbackModal', () => {
 		const user = userEvent.setup();
 		render(<FeedbackModal onClose={mockOnClose} />);
 
-		// Initially, feedback button should be active
-		const feedbackButton = screen.getByRole('button', { name: 'Feedback' });
-		expect(feedbackButton).toHaveAttribute('aria-pressed', 'true');
+		// Initially, feedback radio should be active
+		const feedbackRadio = screen.getByRole('radio', { name: 'Feedback' });
+		expect(feedbackRadio).toBeChecked();
 
 		const bugTab = screen.getByText('Report a bug');
 		await user.click(bugTab);
 
-		// Bug button should now be active
-		const bugButton = screen.getByRole('button', { name: 'Report a bug' });
-		expect(bugButton).toHaveAttribute('aria-pressed', 'true');
+		// Bug radio should now be active
+		const bugRadio = screen.getByRole('radio', { name: 'Report a bug' });
+		expect(bugRadio).toBeChecked();
 
 		const featureTab = screen.getByText('Feature request');
 		await user.click(featureTab);
 
-		// Feature button should now be active
-		const featureButton = screen.getByRole('button', { name: 'Feature request' });
-		expect(featureButton).toHaveAttribute('aria-pressed', 'true');
+		// Feature radio should now be active
+		const featureRadio = screen.getByRole('radio', { name: 'Feature request' });
+		expect(featureRadio).toBeChecked();
 	});
 
 	it('should update feedback text when typing in textarea', async () => {
@@ -133,9 +133,9 @@ describe('FeedbackModal', () => {
 		const bugTab = screen.getByText('Report a bug');
 		await user.click(bugTab);
 
-		// Verify bug report button is now active
-		const bugButton = screen.getByRole('button', { name: 'Report a bug' });
-		expect(bugButton).toHaveAttribute('aria-pressed', 'true');
+		// Verify bug report radio is now active
+		const bugRadio = screen.getByRole('radio', { name: 'Report a bug' });
+		expect(bugRadio).toBeChecked();
 
 		const textarea = screen.getByPlaceholderText('Write your feedback here...');
 		const submitButton = screen.getByRole('button', { name: /submit/i });
@@ -166,9 +166,9 @@ describe('FeedbackModal', () => {
 		const featureTab = screen.getByText('Feature request');
 		await user.click(featureTab);
 
-		// Verify feature request button is now active
-		const featureButton = screen.getByRole('button', { name: 'Feature request' });
-		expect(featureButton).toHaveAttribute('aria-pressed', 'true');
+		// Verify feature request radio is now active
+		const featureRadio = screen.getByRole('radio', { name: 'Feature request' });
+		expect(featureRadio).toBeChecked();
 
 		const textarea = screen.getByPlaceholderText('Write your feedback here...');
 		const submitButton = screen.getByRole('button', { name: /submit/i });
@@ -262,8 +262,8 @@ describe('FeedbackModal', () => {
 		);
 		expect(newTextArea).toHaveValue(''); // Should be empty
 
-		// Verify active button is reset to default (Feedback button)
-		const feedbackButton = screen.getByRole('button', { name: 'Feedback' });
-		expect(feedbackButton).toHaveAttribute('aria-pressed', 'true');
+		// Verify active radio is reset to default (Feedback radio)
+		const feedbackRadio = screen.getByRole('radio', { name: 'Feedback' });
+		expect(feedbackRadio).toBeChecked();
 	});
 });

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

@@ -176,7 +176,7 @@ describe('ShareURLModal', () => {
 		expect(
 			screen.getByText('Please select / enter valid relative time to toggle.'),
 		).toBeInTheDocument();
-		expect(screen.getByRole('switch')).toHaveAttribute('aria-disabled', 'true');
+		expect(screen.getByRole('switch')).toBeDisabled();
 	});
 
 	it('should process URL with absolute time for non-custom time', async () => {

frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx

@@ -1,32 +1,44 @@
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge } from '@signozhq/ui/badge';
 
-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';
-}
+type BadgeColor =
+	| 'vanilla'
+	| 'robin'
+	| 'forest'
+	| 'amber'
+	| 'sienna'
+	| 'cherry'
+	| 'sakura'
+	| 'aqua';
 
 interface HttpStatusBadgeProps {
 	statusCode: string | number;
 	testId?: string;
+	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,
+	className,
 }: HttpStatusBadgeProps): JSX.Element | null {
 	const numericStatusCode = Number(statusCode);
 
@@ -37,7 +49,12 @@ function HttpStatusBadge({
 	const color = getStatusCodeColor(numericStatusCode);
 
 	return (
-		<Badge color={color} variant="outlined" testId={testId}>
+		<Badge
+			color={color}
+			variant="outline"
+			data-testid={testId}
+			className={className}
+		>
 			{statusCode}
 		</Badge>
 	);

frontend/src/components/InviteMembers/InviteMembers.tsx

@@ -119,13 +119,11 @@ function InviteMembers({
 							<div className={styles.cellAction}>
 								{canRemoveRow && (
 									<Button
-										size="md"
-										variant="solid"
-										color="danger"
+										variant="ghost"
+										color="destructive"
 										onClick={(): void => removeRow(row.id)}
 										aria-label="Remove row"
-										testId={`invite-remove-${row.id}`}
-										icon
+										data-testid={`invite-remove-${row.id}`}
 									>
 										<Trash2 size={12} />
 									</Button>
@@ -138,12 +136,11 @@ function InviteMembers({
 				{showAddButton && (
 					<div className={styles.addRow}>
 						<Button
-							size="md"
 							variant="dashed"
 							color="secondary"
 							prefix={<Plus size={12} />}
 							onClick={addRow}
-							testId="invite-add-row"
+							data-testid="invite-add-row"
 						>
 							Add another
 						</Button>

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

@@ -161,14 +161,37 @@
 		}
 	}
 
-	.view-title {
-		display: flex;
-		gap: var(--margin-2);
-		align-items: center;
-		justify-content: center;
-		font-size: var(--font-size-xs);
-		font-style: normal;
-		font-weight: var(--font-weight-normal);
+	.views-tabs {
+		color: var(--l2-foreground);
+
+		.view-title {
+			display: flex;
+			gap: var(--margin-2);
+			align-items: center;
+			justify-content: center;
+			font-size: var(--font-size-xs);
+			font-style: normal;
+			font-weight: var(--font-weight-normal);
+		}
+
+		> button {
+			border: 1px solid var(--l1-border);
+			width: 114px;
+
+			&::before {
+				background: var(--l1-border);
+			}
+
+			&[data-state='on'] {
+				background: var(--l3-background);
+				color: var(--l1-foreground);
+				border: 1px solid var(--l1-border);
+
+				&::before {
+					background: var(--l1-border);
+				}
+			}
+		}
 	}
 
 	.search-input {
@@ -219,4 +242,42 @@
 		align-items: center;
 		margin-left: 8px;
 	}
+
+	.log-arrow-btn {
+		padding: 0;
+		min-width: 28px;
+		height: 28px;
+		border-radius: 4px;
+		background: var(--l2-background);
+		color: var(--l2-foreground);
+		border: 1px solid var(--l1-border);
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: background-color 0.2s ease-in-out;
+	}
+
+	.log-arrow-btn-up,
+	.log-arrow-btn-down {
+		background: var(--l2-background);
+	}
+
+	.log-arrow-btn:active,
+	.log-arrow-btn:focus {
+		background: var(--l3-background);
+		color: var(--l1-foreground);
+	}
+
+	.log-arrow-btn[disabled] {
+		opacity: 0.5;
+		cursor: not-allowed;
+		background: var(--l1-background);
+		color: var(--l3-foreground);
+
+		.log-arrow-btn:hover:not([disabled]) {
+			background: var(--l3-background);
+			color: var(--l1-foreground);
+		}
+	}
 }

frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.module.scss

@@ -6,6 +6,14 @@
 	gap: 8px;
 }
 
+.tooltipContent {
+	--tooltip-z-index: 2100;
+}
+
+.dropdownContent {
+	--dropdown-menu-content-z-index: 2100;
+}
+
 .leftSection {
 	display: flex;
 	align-items: center;

frontend/src/components/LogDetail/LogDetailsHeader/LogDetailsHeader.tsx

@@ -1,8 +1,8 @@
 import { Button } from '@signozhq/ui/button';
 import { Divider } from '@signozhq/ui/divider';
-import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
+import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { aggregateAttributesResourcesToString } from 'container/LogDetailedView/utils';
 import { toast } from '@signozhq/ui/sonner';
@@ -23,6 +23,8 @@ import { useCopyToClipboard } from 'react-use';
 
 import styles from './LogDetailsHeader.module.scss';
 
+const TOOLTIP_CONTENT_PROPS = { className: styles.tooltipContent };
+
 interface LogDetailsHeaderProps {
 	log: ILog;
 	onNavigatePrev: () => void;
@@ -51,19 +53,17 @@ function LogDetailsHeader({
 		toast.success('Copied to clipboard', { position: 'bottom-right' });
 	};
 
-	const menuItems: DropdownItemType[] = [
+	const menuItems = [
 		{
-			type: 'item',
-			value: 'copy-log',
+			key: 'copy-log',
 			label: 'Copy log',
-			prefix: <Copy size={14} />,
+			icon: <Copy size={14} />,
 			onClick: handleCopyLog,
 		},
 		{
-			type: 'item',
-			value: 'copy-link',
+			key: 'copy-link',
 			label: 'Copy link to log',
-			prefix: <Link size={14} />,
+			icon: <Link size={14} />,
 			onClick: (): void => onLogCopy(),
 		},
 	];
@@ -91,7 +91,6 @@ function LogDetailsHeader({
 			<div className={styles.actions}>
 				{showOpenInExplorer && (
 					<Button
-						size="md"
 						variant="outlined"
 						color="secondary"
 						prefix={<Compass size={16} />}
@@ -101,57 +100,51 @@ function LogDetailsHeader({
 					</Button>
 				)}
 
-				<Dropdown items={menuItems} nativeButton align="end" side="bottom">
+				<Dropdown
+					menu={{ items: menuItems }}
+					align="end"
+					className={styles.dropdownContent}
+					onClick={(e: MouseEvent): void => e.stopPropagation()}
+				>
 					<Button
-						size="md"
 						variant="link"
 						color="secondary"
-						icon
-						aria-label="Log actions"
-						testId="log-details-header-menu"
-						onClick={(e: MouseEvent): void => e.stopPropagation()}
-					>
-						<Ellipsis size={16} />
-					</Button>
+						prefix={<Ellipsis size={16} />}
+						data-testid="log-details-header-menu"
+					/>
 				</Dropdown>
 
 				<div className={styles.arrows}>
-					<Tooltip
-						title={isPrevDisabled ? undefined : 'Move to previous log'}
+					<TooltipSimple
+						title="Move to previous log"
 						side="top"
+						open={isPrevDisabled ? false : undefined}
+						tooltipContentProps={TOOLTIP_CONTENT_PROPS}
 					>
 						<Button
-							disabledTooltip="No previous log"
-							size="md"
 							variant="outlined"
 							color="secondary"
-							icon
-							aria-label="Move to previous log"
+							prefix={<ChevronUp size={14} />}
 							disabled={isPrevDisabled}
 							onClick={onNavigatePrev}
-							testId="log-details-header-prev"
-						>
-							<ChevronUp size={14} />
-						</Button>
-					</Tooltip>
-					<Tooltip
-						title={isNextDisabled ? undefined : 'Move to next log'}
+							data-testid="log-details-header-prev"
+						/>
+					</TooltipSimple>
+					<TooltipSimple
+						title="Move to next log"
 						side="top"
+						open={isNextDisabled ? false : undefined}
+						tooltipContentProps={TOOLTIP_CONTENT_PROPS}
 					>
 						<Button
-							disabledTooltip="No next log"
-							size="md"
 							variant="outlined"
 							color="secondary"
-							icon
-							aria-label="Move to next log"
+							prefix={<ChevronDown size={14} />}
 							disabled={isNextDisabled}
 							onClick={onNavigateNext}
-							testId="log-details-header-next"
-						>
-							<ChevronDown size={14} />
-						</Button>
-					</Tooltip>
+							data-testid="log-details-header-next"
+						/>
+					</TooltipSimple>
 				</div>
 			</div>
 		</div>

frontend/src/components/LogDetail/LogHighlights/LogHighlights.module.scss

@@ -12,6 +12,13 @@
 	}
 }
 
+.valueBadge {
+	--badge-font-size: 13px;
+	box-sizing: border-box;
+	max-width: 100%;
+	min-width: 0;
+}
+
 // Truncating text inside a badge
 .badgeText {
 	min-width: 0;
@@ -22,14 +29,11 @@
 
 .serviceDot {
 	width: 6px;
-	min-width: 6px;
 	height: 6px;
-	min-height: 6px;
 	border-radius: 50%;
 	background: var(--accent-forest);
 	flex-shrink: 0;
 	margin-right: 4px;
-	display: inline-block;
 }
 
 .traceLink {

frontend/src/components/LogDetail/LogHighlights/config.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Badge, type BadgeColorType } from '@signozhq/ui/badge';
+import { Badge, BadgeColor } 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, BadgeColorType> = {
-	[LogType.TRACE]: 'success',
-	[LogType.DEBUG]: 'info',
-	[LogType.INFO]: 'primary',
-	[LogType.WARN]: 'warning',
-	[LogType.ERROR]: 'danger',
-	[LogType.FATAL]: 'highlight-danger',
+const SEVERITY_COLOR: Record<string, BadgeColor> = {
+	[LogType.TRACE]: 'forest',
+	[LogType.DEBUG]: 'aqua',
+	[LogType.INFO]: 'robin',
+	[LogType.WARN]: 'amber',
+	[LogType.ERROR]: 'cherry',
+	[LogType.FATAL]: 'sakura',
 };
 
 export interface LogHighlightConfig {
@@ -32,13 +32,9 @@ const getAttr = (log: ILog, key: string): string =>
 
 const valueBadge = (
 	value: string,
-	options?: { prefix?: ReactNode; color?: BadgeColorType },
+	options?: { prefix?: ReactNode; color?: BadgeColor },
 ): ReactNode => (
-	<Badge
-		variant="solid"
-		color={options?.color ?? 'secondary'}
-		textTransform="none"
-	>
+	<Badge color={options?.color ?? 'vanilla'} className={styles.valueBadge}>
 		{options?.prefix}
 		<span className={styles.badgeText} title={value}>
 			{value}

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

@@ -129,18 +129,6 @@ describe('LogDetail drawer — header', () => {
 		});
 	});
 
-	it('keeps the drawer open when a ⋯ menu item is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onClose = jest.fn();
-
-		renderDrawer({ onClose });
-
-		await user.click(screen.getByTestId('log-details-header-menu'));
-		await user.click(await screen.findByText('Copy log'));
-
-		expect(onClose).not.toHaveBeenCalled();
-	});
-
 	it('shows "Open in Explorer" when a handleOpenInExplorer handler is provided', () => {
 		renderDrawer({ handleOpenInExplorer: jest.fn() });
 
@@ -229,14 +217,8 @@ describe('LogDetail drawer — header', () => {
 		// Active log is the first one.
 		renderDrawer({ log: logs[0], logs, onNavigateLog });
 
-		expect(screen.getByTestId('log-details-header-prev')).toHaveAttribute(
-			'aria-disabled',
-			'true',
-		);
-		expect(screen.getByTestId('log-details-header-next')).not.toHaveAttribute(
-			'aria-disabled',
-			'true',
-		);
+		expect(screen.getByTestId('log-details-header-prev')).toBeDisabled();
+		expect(screen.getByTestId('log-details-header-next')).toBeEnabled();
 
 		await user.click(screen.getByTestId('log-details-header-next'));
 		expect(onNavigateLog).toHaveBeenLastCalledWith(logs[1]);

frontend/src/components/LogDetail/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { Drawer, Tooltip } from 'antd';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import LogStateIndicator from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
@@ -87,8 +87,7 @@ function LogDetailInner({
 				target.closest('.cm-tooltip-autocomplete') ||
 				target.closest('.drawer-popover') ||
 				target.closest('.query-status-popover') ||
-				target.closest('[data-radix-popper-content-wrapper]') ||
-				target.closest('[data-base-ui-portal]')
+				target.closest('[data-radix-popper-content-wrapper]')
 			) {
 				return;
 			}
@@ -318,12 +317,9 @@ function LogDetailInner({
 					<div className="log-detail-drawer__section-divider" />
 
 					<div className="tabs-and-search">
-						<ToggleGroup
-							variant="outlined"
-							color="secondary"
-							size="sm"
+						<ToggleGroupSimple
 							type="single"
-							testId="log-detail-views-tabs"
+							className="views-tabs"
 							onChange={handleModeChange}
 							value={selectedView}
 							items={[
@@ -369,12 +365,9 @@ function LogDetailInner({
 										variant="link"
 										color="secondary"
 										size="sm"
-										icon
-										aria-label="Show Filters"
+										prefix={<Filter size="lg" />}
 										onClick={handleFilterVisible}
-									>
-										<Filter size="lg" />
-									</Button>
+									/>
 								</Tooltip>
 							)}
 						</div>

frontend/src/components/MarkdownEditor/EditorToolbar.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import {
 	Bold,
 	CodeXml,
@@ -11,17 +11,16 @@ import {
 	Type,
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 
-import { READ_ONLY_TOOLTIP } from './constants';
 import InsertVariableMenu from './InsertVariableMenu';
 import MarkdownHelp from './MarkdownHelp';
 import type { EditorCommand, EditorVariable } from './types';
 
 import styles from './MarkdownEditor.module.scss';
 
-const COMMAND_ICONS: Record<string, ReactElement> = {
+const COMMAND_ICONS: Record<string, ReactNode> = {
 	heading: <Heading size={14} />,
 	bold: <Bold size={14} />,
 	italic: <Italic size={14} />,
@@ -62,22 +61,20 @@ function EditorToolbar({
 			<span className={styles.toolbarDivider} />
 			<div className={styles.commands}>
 				{commands.map((command) => (
-					<Tooltip key={command.id} title={disabled ? undefined : command.label}>
+					<TooltipSimple key={command.id} title={command.label}>
 						<Button
-							disabledTooltip={READ_ONLY_TOOLTIP}
 							type="button"
 							variant="ghost"
 							color="secondary"
-							size="sm"
-							icon
+							size="icon"
 							disabled={disabled}
 							aria-label={command.label}
-							testId={`markdown-command-${command.id}`}
+							data-testid={`markdown-command-${command.id}`}
 							onClick={(): void => onRunCommand(command)}
 						>
 							{COMMAND_ICONS[command.id]}
 						</Button>
-					</Tooltip>
+					</TooltipSimple>
 				))}
 			</div>
 			<div className={styles.toolbarEnd}>

frontend/src/components/MarkdownEditor/InsertVariableMenu.tsx

@@ -1,9 +1,8 @@
 import { useMemo, useState } from 'react';
-import { ChevronDown, DollarSign } from '@signozhq/icons';
+import { ChevronDown, DollarSign, Search } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Dropdown, type DropdownActionItemType } from '@signozhq/ui/dropdown';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 
-import { READ_ONLY_TOOLTIP } from './constants';
 import type { EditorVariable } from './types';
 
 import styles from './MarkdownEditor.module.scss';
@@ -18,10 +17,9 @@ interface InsertVariableMenuProps {
 function toMenuItems(
 	variables: EditorVariable[],
 	onSelect: (name: string) => void,
-): DropdownActionItemType[] {
+): MenuItem[] {
 	return variables.map((variable) => ({
-		type: 'item',
-		value: variable.name,
+		key: variable.name,
 		label: (
 			<span
 				className={styles.variableRow}
@@ -62,17 +60,15 @@ function InsertVariableMenu({
 	}
 
 	return (
-		<Dropdown
-			items={items}
-			nativeButton
-			align="end"
-			side="bottom"
-			contentMaxWidth={320}
-			disabled={disabled}
-			disabledTooltip={READ_ONLY_TOOLTIP}
-			searchInputProps={{
-				placeholder: 'Search variables',
-				onChange: setSearch,
+		<DropdownMenuSimple
+			className={styles.variableMenu}
+			menu={{
+				items,
+				search: {
+					placeholder: 'Search variables',
+					searchIcon: <Search size={14} />,
+					onSearchChange: setSearch,
+				},
 			}}
 		>
 			<Button
@@ -80,13 +76,15 @@ function InsertVariableMenu({
 				variant="outlined"
 				color="secondary"
 				size="sm"
+				disabled={disabled}
 				prefix={<DollarSign size={14} className={styles.insertVariableIcon} />}
 				suffix={<ChevronDown size={14} />}
-				testId="markdown-insert-variable"
+				className={styles.insertVariable}
+				data-testid="markdown-insert-variable"
 			>
 				Insert variable
 			</Button>
-		</Dropdown>
+		</DropdownMenuSimple>
 	);
 }
 

frontend/src/components/MarkdownEditor/MarkdownEditor.module.scss

@@ -74,10 +74,27 @@
 	margin-left: auto;
 }
 
+.insertVariable {
+	white-space: nowrap;
+}
+
 .insertVariableIcon {
 	color: var(--text-amber-400);
 }
 
+// The ui library's dropdown assumes a global border-box reset this app doesn't
+// have (`box-sizing` is set on `body` only and doesn't inherit): its items are
+// `width: 100%` + padding, so in the portal they lay out content-box and
+// overflow the popup by the padding — clipping the flush-right badge.
+.variableMenu,
+.variableMenu * {
+	box-sizing: border-box;
+}
+
+.variableMenu {
+	width: 320px;
+}
+
 // Shrinkable, so a clamped popup truncates the name instead of clipping the
 // badge at the content's `overflow: hidden` edge.
 .variableRow {

frontend/src/components/MarkdownEditor/MarkdownHelp.tsx

@@ -15,10 +15,9 @@ function MarkdownHelp(): JSX.Element {
 					type="button"
 					variant="ghost"
 					color="secondary"
-					size="sm"
-					icon
+					size="icon"
 					aria-label="Markdown syntax help"
-					testId="markdown-help-trigger"
+					data-testid="markdown-help-trigger"
 				>
 					<CircleHelp size={14} />
 				</Button>

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

@@ -256,14 +256,8 @@ describe('MarkdownEditor', () => {
 			/>,
 		);
 
-		expect(screen.getByTestId('markdown-command-bold')).toHaveAttribute(
-			'aria-disabled',
-			'true',
-		);
-		expect(screen.getByTestId('markdown-insert-variable')).toHaveAttribute(
-			'aria-disabled',
-			'true',
-		);
+		expect(screen.getByTestId('markdown-command-bold')).toBeDisabled();
+		expect(screen.getByTestId('markdown-insert-variable')).toBeDisabled();
 	});
 
 	it('hides the insert-variable control when none are available', () => {

frontend/src/components/MarkdownEditor/constants.ts

@@ -1,8 +1,6 @@
 // The body is persisted inline in the dashboard JSON, so its length is capped.
 export const MARKDOWN_MAX_LENGTH = 16000;
 
-export const READ_ONLY_TOOLTIP = 'The editor is read-only';
-
 /** The canonical syntax; the renderer resolves the other three too. */
 export const formatVariableToken = (name: string): string => `$${name}`;
 

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

@@ -95,6 +95,7 @@
 			font-weight: var(--uppercase-small-500-font-weight);
 			line-height: 100%;
 			letter-spacing: 0.44px;
+			text-transform: uppercase;
 		}
 	}
 }

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="success" variant="outlined">
+			<Badge color="forest" variant="outline">
 				ACTIVE
 			</Badge>
 		);
 	}
 	if (status === MemberStatus.Deleted) {
 		return (
-			<Badge color="danger" variant="outlined">
+			<Badge color="cherry" variant="outline">
 				DELETED
 			</Badge>
 		);
@@ -70,17 +70,13 @@ function StatusBadge({ status }: { status: MemberRow['status'] }): JSX.Element {
 
 	if (status === MemberStatus.Invited) {
 		return (
-			<Badge color="warning" variant="outlined">
+			<Badge color="amber" variant="outline">
 				INVITED
 			</Badge>
 		);
 	}
 
-	return (
-		<Badge variant="solid" color="secondary">
-			⎯
-		</Badge>
-	);
+	return <Badge color="vanilla">⎯</Badge>;
 }
 
 function MembersEmptyState({

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 { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipProvider, TooltipSimple } from '@signozhq/ui/tooltip';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -764,14 +764,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							tabIndex={isActive ? 0 : -1}
 						>
 							<Checkbox
-								color="primary"
 								value={isSelected}
-								width="100%"
-								onChange={(): void => {
-									handleItemSelection('checkbox');
-									setActiveChipIndex(-1);
-									setActiveIndex(-1);
-								}}
+								className="option-checkbox"
+								onClick={(e): void => selectFromButton(e, 'checkbox')}
 							>
 								<div className="option-content">
 									<span ref={textRef} className="option-label-text">
@@ -1609,7 +1604,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							}}
 						>
 							<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-								<Checkbox color="primary" value={allOptionsSelected} width="100%">
+								<Checkbox value={allOptionsSelected} className="option-checkbox">
 									<div className="option-content">
 										<div className="all-option-text">ALL</div>
 									</div>
@@ -1988,9 +1983,13 @@ 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 (
-					<Tooltip side="top" title={findOptionLabelText(options, value)}>
+					<TooltipSimple
+						side="top"
+						delayDuration={300}
+						title={findOptionLabelText(options, value)}
+					>
 						{tag}
-					</Tooltip>
+					</TooltipSimple>
 				);
 			}
 
@@ -2026,51 +2025,56 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	return (
 		// Self-provided so the per-tag tooltips work wherever this select is rendered,
 		// without every consumer having to sit under an app-level provider.
-		<div
-			className={cx('custom-multiselect-wrapper', {
-				'all-selected': allOptionShown || isAllSelected,
-			})}
-		>
-			{(allOptionShown || isAllSelected) && !searchText && (
-				<div className="all-text">ALL</div>
-			)}
-			<Select
-				ref={selectRef}
-				className={cx('custom-multiselect', className, {
-					'has-selection': selectedChips.length > 0 && !isAllSelected,
-					'is-all-selected': isAllSelected,
+		<TooltipProvider>
+			<div
+				className={cx('custom-multiselect-wrapper', {
+					'all-selected': allOptionShown || isAllSelected,
 				})}
-				placeholder={placeholder}
-				mode="multiple"
-				showSearch
-				filterOption={false}
-				onSearch={handleSearch}
-				value={displayValue}
-				onChange={(newValue): void => {
-					handleInternalChange(newValue, false);
-				}}
-				onClear={onClearHandler}
-				onDropdownVisibleChange={handleDropdownVisibleChange}
-				open={isOpen}
-				defaultActiveFirstOption={defaultActiveFirstOption}
-				popupMatchSelectWidth={dropdownMatchSelectWidth}
-				allowClear={allowClear}
-				getPopupContainer={getPopupContainer ?? popupContainer}
-				suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
-				dropdownRender={customDropdownRender}
-				menuItemSelectedIcon={null}
-				popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
-				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-				onKeyDown={handleKeyDown}
-				tagRender={tagRender as any}
-				placement={placement}
-				listHeight={300}
-				searchValue={searchText}
-				maxTagTextLength={maxTagTextLength}
-				maxTagCount={isAllSelected ? undefined : maxTagCount}
-				{...rest}
-			/>
-		</div>
+			>
+				{(allOptionShown || isAllSelected) && !searchText && (
+					<div className="all-text">ALL</div>
+				)}
+				<Select
+					ref={selectRef}
+					className={cx('custom-multiselect', className, {
+						'has-selection': selectedChips.length > 0 && !isAllSelected,
+						'is-all-selected': isAllSelected,
+					})}
+					placeholder={placeholder}
+					mode="multiple"
+					showSearch
+					filterOption={false}
+					onSearch={handleSearch}
+					value={displayValue}
+					onChange={(newValue): void => {
+						handleInternalChange(newValue, false);
+					}}
+					onClear={onClearHandler}
+					onDropdownVisibleChange={handleDropdownVisibleChange}
+					open={isOpen}
+					defaultActiveFirstOption={defaultActiveFirstOption}
+					popupMatchSelectWidth={dropdownMatchSelectWidth}
+					allowClear={allowClear}
+					getPopupContainer={getPopupContainer ?? popupContainer}
+					suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
+					dropdownRender={customDropdownRender}
+					menuItemSelectedIcon={null}
+					popupClassName={cx(
+						'custom-multiselect-dropdown-container',
+						popupClassName,
+					)}
+					notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+					onKeyDown={handleKeyDown}
+					tagRender={tagRender as any}
+					placement={placement}
+					listHeight={300}
+					searchValue={searchText}
+					maxTagTextLength={maxTagTextLength}
+					maxTagCount={isAllSelected ? undefined : maxTagCount}
+					{...rest}
+				/>
+			</div>
+		</TooltipProvider>
 	);
 };
 

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -16,6 +16,7 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { Select } from 'antd';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip';
@@ -739,33 +740,36 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 	// ===== Component Rendering =====
 	return (
-		<Select
-			ref={selectRef}
-			className={cx('custom-select', className)}
-			placeholder={placeholder}
-			showSearch
-			filterOption={false}
-			onSearch={handleSearch}
-			value={value}
-			onChange={onChange}
-			onDropdownVisibleChange={handleDropdownVisibleChange}
-			open={isOpen}
-			options={optionsWithHighlight}
-			defaultActiveFirstOption={defaultActiveFirstOption}
-			popupMatchSelectWidth={popupMatchSelectWidth}
-			allowClear={allowClear ? { clearIcon } : false}
-			getPopupContainer={getPopupContainer ?? popupContainer}
-			suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
-			dropdownRender={customDropdownRender}
-			menuItemSelectedIcon={null}
-			popupClassName={cx('custom-select-dropdown-container', popupClassName)}
-			listHeight={300}
-			placement={placement}
-			optionFilterProp="label"
-			notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-			onKeyDown={handleKeyDown}
-			{...rest}
-		/>
+		// Self-provided so label tooltips work wherever this select is rendered.
+		<TooltipProvider>
+			<Select
+				ref={selectRef}
+				className={cx('custom-select', className)}
+				placeholder={placeholder}
+				showSearch
+				filterOption={false}
+				onSearch={handleSearch}
+				value={value}
+				onChange={onChange}
+				onDropdownVisibleChange={handleDropdownVisibleChange}
+				open={isOpen}
+				options={optionsWithHighlight}
+				defaultActiveFirstOption={defaultActiveFirstOption}
+				popupMatchSelectWidth={popupMatchSelectWidth}
+				allowClear={allowClear ? { clearIcon } : false}
+				getPopupContainer={getPopupContainer ?? popupContainer}
+				suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
+				dropdownRender={customDropdownRender}
+				menuItemSelectedIcon={null}
+				popupClassName={cx('custom-select-dropdown-container', popupClassName)}
+				listHeight={300}
+				placement={placement}
+				optionFilterProp="label"
+				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+				onKeyDown={handleKeyDown}
+				{...rest}
+			/>
+		</TooltipProvider>
 	);
 };
 

frontend/src/components/NewSelect/TruncatedTooltip.module.scss

@@ -0,0 +1,4 @@
+// Above the antd select popup it is shown from.
+.tooltipContent {
+	--tooltip-z-index: 2100;
+}

frontend/src/components/NewSelect/TruncatedTooltip.tsx

@@ -1,17 +1,11 @@
-import {
-	cloneElement,
-	FocusEvent,
-	PointerEvent,
-	ReactElement,
-	RefObject,
-	useRef,
-	useState,
-} from 'react';
-import { Tooltip, TooltipProps } from '@signozhq/ui/tooltip';
+import { ReactElement, RefObject, useRef, useState } from 'react';
+import { TooltipSimple, TooltipSimpleProps } from '@signozhq/ui/tooltip';
+
+import styles from './TruncatedTooltip.module.scss';
 
 interface TruncatedTooltipProps {
 	title: string;
-	side?: TooltipProps['side'];
+	side?: TooltipSimpleProps['side'];
 	/** Renders the trigger; attach the ref to the element that may truncate. */
 	children: (textRef: RefObject<HTMLSpanElement>) => ReactElement;
 }
@@ -22,28 +16,25 @@ function TruncatedTooltip({
 	children,
 }: TruncatedTooltipProps): JSX.Element {
 	const textRef = useRef<HTMLSpanElement>(null);
-	const [truncated, setTruncated] = useState(false);
+	const [open, setOpen] = useState(false);
 
-	const measure = (): void => {
+	const handleOpenChange = (next: boolean): void => {
 		const el = textRef.current;
-		setTruncated(!!el && el.scrollWidth > el.clientWidth);
+		setOpen(next && !!el && el.scrollWidth > el.clientWidth);
 	};
 
-	const trigger = children(textRef);
-
 	return (
-		<Tooltip title={truncated ? title : undefined} side={side}>
-			{cloneElement(trigger, {
-				onPointerEnter: (event: PointerEvent<HTMLElement>): void => {
-					measure();
-					trigger.props.onPointerEnter?.(event);
-				},
-				onFocus: (event: FocusEvent<HTMLElement>): void => {
-					measure();
-					trigger.props.onFocus?.(event);
-				},
-			})}
-		</Tooltip>
+		<TooltipSimple
+			title={title}
+			side={side}
+			arrow
+			delayDuration={300}
+			open={open}
+			onOpenChange={handleOpenChange}
+			tooltipContentProps={{ className: styles.tooltipContent }}
+		>
+			{children(textRef)}
+		</TooltipSimple>
 	);
 }
 

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

@@ -1,5 +1,6 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 
 import CustomMultiSelect from '../CustomMultiSelect';
 
@@ -13,13 +14,15 @@ const SELECTED = ['checkout-service-prod', 'payments-service-prod'];
 
 function renderSelect(): void {
 	render(
-		<CustomMultiSelect
-			options={OPTIONS}
-			value={SELECTED}
-			maxTagCount={1}
-			maxTagTextLength={10}
-			maxTagPlaceholder={(omitted): string => `+${omitted.length}`}
-		/>,
+		<TooltipProvider>
+			<CustomMultiSelect
+				options={OPTIONS}
+				value={SELECTED}
+				maxTagCount={1}
+				maxTagTextLength={10}
+				maxTagPlaceholder={(omitted): string => `+${omitted.length}`}
+			/>
+		</TooltipProvider>,
 	);
 }
 

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

@@ -1,5 +1,6 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 
 import TruncatedTooltip from '../TruncatedTooltip';
 
@@ -14,13 +15,15 @@ function renderRow(scrollWidth: number, clientWidth: number): void {
 		.mockReturnValue(clientWidth);
 
 	render(
-		<TruncatedTooltip title={LABEL}>
-			{(textRef): JSX.Element => (
-				<div data-testid="row">
-					<span ref={textRef}>{LABEL}</span>
-				</div>
-			)}
-		</TruncatedTooltip>,
+		<TooltipProvider>
+			<TruncatedTooltip title={LABEL}>
+				{(textRef): JSX.Element => (
+					<div data-testid="row">
+						<span ref={textRef}>{LABEL}</span>
+					</div>
+				)}
+			</TruncatedTooltip>
+		</TooltipProvider>,
 	);
 }
 

frontend/src/components/NewSelect/styles.scss

@@ -532,95 +532,114 @@ $custom-border-color: #2c3044;
 			margin-bottom: 8px;
 		}
 
-		.all-option-text {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
+		.option-checkbox {
 			width: 100%;
-		}
+			cursor: default;
 
-		.option-content {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			width: 100%;
+			// The checkbox button is the only pointer target on the left; the label
+			// still toggles on click but keeps a default cursor.
+			> button {
+				cursor: pointer;
+			}
 
-			.option-label-text {
+			// @signozhq/ui Checkbox renders children inside a <label> that is
+			// content-sized by default. Make it fill the row (min-width: 0 lets it
+			// shrink) so the option text below can truncate instead of overflowing.
+			> label {
 				flex: 1 1 auto;
 				min-width: 0;
-				margin-bottom: 0;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
 			}
 
-			.option-badge {
+			.all-option-text {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				width: 100%;
+			}
+
+			.option-content {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				width: 100%;
+
+				.option-label-text {
+					flex: 1 1 auto;
+					min-width: 0;
+					margin-bottom: 0;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+				}
+
+				.option-badge {
+					font-size: 12px;
+					padding: 2px 6px;
+					border-radius: 4px;
+					background-color: $custom-border-color;
+					color: var(--l2-foreground);
+					margin-left: 8px;
+				}
+			}
+
+			// "Only"/"All" is the primary action — a filled pill that reads as a
+			// button; "Toggle" is a secondary hint in plain text. Sized to the row's
+			// resting height so revealing them on hover never shifts it.
+			.only-btn,
+			.toggle-btn {
+				display: none;
+				align-items: center;
+				justify-content: center;
+				height: 18px;
+				min-height: 0;
 				font-size: 12px;
-				padding: 2px 6px;
-				border-radius: 4px;
-				background-color: $custom-border-color;
-				color: var(--l2-foreground);
-				margin-left: 8px;
-			}
-		}
-
-		// "Only"/"All" is the primary action — a filled pill that reads as a
-		// button; "Toggle" is a secondary hint in plain text. Sized to the row's
-		// resting height so revealing them on hover never shifts it.
-		.only-btn,
-		.toggle-btn {
-			display: none;
-			align-items: center;
-			justify-content: center;
-			height: 18px;
-			min-height: 0;
-			font-size: 12px;
-			line-height: 1;
-			box-shadow: none;
-		}
-
-		.only-btn {
-			padding: 4px 8px;
-			// Black interior + a visible border so the pill stands out clearly
-			// against the near-black row when revealed on hover.
-			border: 1px solid var(--l3-border);
-			border-radius: 3px;
-			background-color: var(--bg-ink-500, #0b0c0e);
-			color: var(--l1-foreground);
-			cursor: pointer;
-		}
-
-		.toggle-btn {
-			padding: 0 6px;
-			border: none;
-			background-color: transparent;
-			color: var(--l2-foreground);
-			cursor: pointer;
-		}
-
-		// Toggle appears over the checkbox area; "Only/All" takes over the row
-		// content and hides Toggle there (higher specificity wins).
-		&:hover {
-			.toggle-btn {
-				display: flex;
+				line-height: 1;
+				box-shadow: none;
 			}
 
-			.option-badge {
-				display: none;
-			}
-		}
-
-		.option-content:hover {
 			.only-btn {
-				display: flex;
+				padding: 4px 8px;
+				// Black interior + a visible border so the pill stands out clearly
+				// against the near-black row when revealed on hover.
+				border: 1px solid var(--l3-border);
+				border-radius: 3px;
+				background-color: var(--bg-ink-500, #0b0c0e);
+				color: var(--l1-foreground);
+				cursor: pointer;
 			}
 
 			.toggle-btn {
-				display: none;
+				padding: 0 6px;
+				border: none;
+				background-color: transparent;
+				color: var(--l2-foreground);
+				cursor: pointer;
 			}
 
-			.option-badge {
-				display: none;
+			// Toggle appears over the checkbox area; "Only/All" takes over the row
+			// content and hides Toggle there (higher specificity wins).
+			&:hover {
+				.toggle-btn {
+					display: flex;
+				}
+
+				.option-badge {
+					display: none;
+				}
+			}
+
+			.option-content:hover {
+				.only-btn {
+					display: flex;
+				}
+
+				.toggle-btn {
+					display: none;
+				}
+
+				.option-badge {
+					display: none;
+				}
 			}
 		}
 	}

frontend/src/components/OverflowValuesTooltip/OverflowValuesTooltip.tsx

@@ -1,5 +1,7 @@
-import { Tooltip } from '@signozhq/ui/tooltip';
-import TooltipScrollArea from 'components/TooltipScrollArea/TooltipScrollArea';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import TooltipScrollArea, {
+	TOOLTIP_SCROLL_CONTENT_CLASS,
+} from 'components/TooltipScrollArea/TooltipScrollArea';
 
 import styles from './OverflowValuesTooltip.module.scss';
 
@@ -17,8 +19,10 @@ function OverflowValuesTooltip({
 	values,
 }: OverflowValuesTooltipProps): JSX.Element {
 	return (
-		<Tooltip
+		<TooltipSimple
 			side="top"
+			delayDuration={300}
+			tooltipContentProps={{ className: TOOLTIP_SCROLL_CONTENT_CLASS }}
 			title={
 				<TooltipScrollArea>
 					<ul className={styles.overflowValues}>
@@ -32,7 +36,7 @@ function OverflowValuesTooltip({
 			{/* rc-select copies this node into the overflow wrapper's `title`; an empty
 			    one keeps the browser's own "[object Object]" tooltip out of the way. */}
 			<span title="">+{values.length}</span>
-		</Tooltip>
+		</TooltipSimple>
 	);
 }
 

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

@@ -513,4 +513,8 @@
 			color: var(--l2-foreground) !important;
 		}
 	}
+
+	.query-actions-dropdown {
+		cursor: pointer;
+	}
 }

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions.module.scss

@@ -4,28 +4,27 @@
  * `--query-builder-v2-*` surface the selects above this row already paint on.
  */
 .bucketOptions {
-	--toggle-group-border-radius: var(--radius-1);
-	--toggle-group-button-block-size: calc(
-		36px - 2 * var(--toggle-group-border-width, 1px)
-	);
-	--toggle-group-button-font-size: 13px;
-	--toggle-group-button-padding-inline: var(--spacing-6);
+	--toggle-group-radius: var(--radius-1);
+	--toggle-group-item-size: 36px;
+	--toggle-group-item-font-size: 13px;
+	--toggle-group-item-padding-left: var(--spacing-6);
+	--toggle-group-item-padding-right: var(--spacing-6);
 
 	// Repeated from `.query-add-ons` rather than inherited: the section also renders on a
 	// formula, which has no add-ons ancestor to pick the toggle palette up from.
-	--toggle-group-secondary-outlined-background: var(
+	--toggle-group-secondary-bg: var(
 		--query-builder-v2-toggle-group-background-color,
 		var(--l1-background-hover)
 	);
-	--toggle-group-border: var(
+	--toggle-group-secondary-border: var(
 		--query-builder-v2-toggle-group-border-color,
 		var(--l2-border)
 	);
-	--toggle-group-secondary-outlined-background-active: var(
+	--toggle-group-secondary-active-bg: var(
 		--query-builder-v2-toggle-group-active-background-color,
 		var(--l1-background)
 	);
-	--toggle-group-secondary-outlined-background-hover: var(
+	--toggle-group-secondary-bg-hover: var(
 		--query-builder-v2-toggle-group-background-color-hover,
 		var(--l2-background)
 	);
@@ -56,10 +55,6 @@
 	flex-wrap: wrap;
 	align-items: center;
 	gap: var(--spacing-8);
-
-	> [data-slot='button'] {
-		margin-left: auto;
-	}
 }
 
 /** One label paired with its control, at the same 10px rhythm as the aggregate rows. */
@@ -139,3 +134,9 @@
 	cursor: help;
 	color: var(--l3-foreground);
 }
+
+.closeButton {
+	margin-left: auto;
+	width: 24px;
+	height: 24px;
+}

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

@@ -3,7 +3,7 @@ import { Tooltip } from 'antd';
 import cx from 'classnames';
 import { Button } from '@signozhq/ui/button';
 import { InputNumber } from '@signozhq/ui/input-number';
-import { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { ChevronUp, Info } from '@signozhq/icons';
 import {
 	Querybuildertypesv5BucketOptionsDTO,
@@ -177,10 +177,7 @@ function BucketOptions({
 			<div className={styles.controls}>
 				<div className={styles.field}>
 					<span className={styles.label}>Bucket by</span>
-					<ToggleGroup
-						variant="outlined"
-						color="secondary"
-						size="sm"
+					<ToggleGroupSimple
 						type="single"
 						value={kind}
 						items={kindItems}
@@ -192,10 +189,7 @@ function BucketOptions({
 				{kind === Querybuildertypesv5BucketsKindDTO.log && (
 					<div className={styles.field}>
 						<span className={styles.label}>Scale</span>
-						<ToggleGroup
-							variant="outlined"
-							color="secondary"
-							size="sm"
+						<ToggleGroupSimple
 							type="single"
 							value={String(logScale)}
 							items={scaleItems}
@@ -239,14 +233,13 @@ function BucketOptions({
 					<Button
 						color="secondary"
 						variant="ghost"
-						size="sm"
-						icon
+						size="icon"
 						aria-label="Close bucket options"
+						className={styles.closeButton}
+						prefix={<ChevronUp size={16} />}
 						onClick={onClose}
-						testId="bucket-options-close"
-					>
-						<ChevronUp size={16} />
-					</Button>
+						data-testid="bucket-options-close"
+					/>
 				)}
 			</div>
 

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

@@ -1,19 +1,19 @@
 .query-add-ons {
 	width: 100%;
 
-	--toggle-group-secondary-outlined-background: var(
+	--toggle-group-secondary-bg: var(
 		--query-builder-v2-toggle-group-background-color,
 		var(--l1-background-hover)
 	);
-	--toggle-group-border: var(
+	--toggle-group-secondary-border: var(
 		--query-builder-v2-toggle-group-border-color,
 		var(--l2-border)
 	);
-	--toggle-group-secondary-outlined-background-active: var(
+	--toggle-group-secondary-active-bg: var(
 		--query-builder-v2-toggle-group-active-background-color,
 		var(--l1-background)
 	);
-	--toggle-group-secondary-outlined-background-hover: var(
+	--toggle-group-secondary-bg-hover: var(
 		--query-builder-v2-toggle-group-background-color-hover,
 		var(--l2-background)
 	);
@@ -36,6 +36,51 @@
 	align-items: center;
 	gap: 16px;
 
+	.add-ons-tabs {
+		display: flex;
+		flex-wrap: wrap;
+
+		.add-on-tab-title {
+			display: flex;
+			gap: var(--margin-2);
+			align-items: center;
+			justify-content: center;
+			font-size: var(--font-size-xs);
+			font-style: normal;
+			font-weight: var(--font-weight-normal);
+
+			color: var(--query-builder-v2-color, var(--l2-foreground));
+		}
+
+		> button {
+			border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+			border-left: none;
+			min-width: 120px;
+			height: 36px;
+			line-height: 36px;
+
+			&:first-child {
+				border-left: 1px solid
+					var(--query-builder-v2-border-color, var(--l2-border));
+			}
+
+			&::before {
+				background: var(--query-builder-v2-border-color, var(--l2-border));
+			}
+
+			&[data-state='on'] {
+				color: var(--text-robin-500);
+				border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
+
+				display: none;
+
+				&::before {
+					background: var(--query-builder-v2-border-color, var(--l2-border));
+				}
+			}
+		}
+	}
+
 	.compass-button {
 		width: 30px;
 		height: 30px;

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 { ToggleGroup } from '@signozhq/ui/toggle-group';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
@@ -624,12 +624,9 @@ function QueryAddOns({
 				</div>
 			)}
 
-			<ToggleGroup
-				variant="outlined"
-				color="secondary"
-				size="sm"
+			<ToggleGroupSimple
 				type="multiple"
-				allowClear
+				className="add-ons-tabs"
 				value={selectedViews.map((view) => view.key)}
 				onChange={(newKeys: string[]): void => {
 					const oldKeys: string[] = selectedViews.map((view) => view.key);

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -724,62 +724,26 @@ function QuerySearch({
 	// Helper function to render a badge for the current context mode
 	const renderContextBadge = (): JSX.Element => {
 		if (!editingMode) {
-			return (
-				<Badge textTransform="none" variant="solid" color="secondary">
-					Unknown
-				</Badge>
-			);
+			return <Badge color="vanilla">Unknown</Badge>;
 		}
 
 		switch (editingMode) {
 			case 'key':
-				return (
-					<Badge textTransform="none" variant="solid" color="primary">
-						Key
-					</Badge>
-				);
+				return <Badge color="robin">Key</Badge>;
 			case 'operator':
-				return (
-					<Badge textTransform="none" variant="solid" color="highlight-danger">
-						Operator
-					</Badge>
-				);
+				return <Badge color="sakura">Operator</Badge>;
 			case 'value':
-				return (
-					<Badge textTransform="none" variant="solid" color="success">
-						Value
-					</Badge>
-				);
+				return <Badge color="forest">Value</Badge>;
 			case 'conjunction':
-				return (
-					<Badge textTransform="none" variant="solid" color="warning">
-						Conjunction
-					</Badge>
-				);
+				return <Badge color="amber">Conjunction</Badge>;
 			case 'function':
-				return (
-					<Badge textTransform="none" variant="solid" color="info">
-						Function
-					</Badge>
-				);
+				return <Badge color="aqua">Function</Badge>;
 			case 'parenthesis':
-				return (
-					<Badge textTransform="none" variant="solid" color="highlight-danger">
-						Parenthesis
-					</Badge>
-				);
+				return <Badge color="sakura">Parenthesis</Badge>;
 			case 'bracketList':
-				return (
-					<Badge textTransform="none" variant="solid" color="danger">
-						Bracket List
-					</Badge>
-				);
+				return <Badge color="cherry">Bracket List</Badge>;
 			default:
-				return (
-					<Badge textTransform="none" variant="solid" color="secondary">
-						Unknown
-					</Badge>
-				);
+				return <Badge color="vanilla">Unknown</Badge>;
 		}
 	};
 
@@ -1501,45 +1465,27 @@ function QuerySearch({
 					Currently editing: {renderContextBadge()}
 					{queryContext?.keyToken && (
 						<span className="triplet-info">
-							Key:{' '}
-							<Badge textTransform="none" variant="solid" color="secondary">
-								{queryContext.keyToken}
-							</Badge>
+							Key: <Badge color="vanilla">{queryContext.keyToken}</Badge>
 						</span>
 					)}
 					{queryContext?.operatorToken && (
 						<span className="triplet-info">
-							Operator:{' '}
-							<Badge textTransform="none" variant="solid" color="secondary">
-								{queryContext.operatorToken}
-							</Badge>
+							Operator: <Badge color="vanilla">{queryContext.operatorToken}</Badge>
 						</span>
 					)}
 					{queryContext?.valueToken && (
 						<span className="triplet-info">
-							Value:{' '}
-							<Badge textTransform="none" variant="solid" color="secondary">
-								{queryContext.valueToken}
-							</Badge>
+							Value: <Badge color="vanilla">{queryContext.valueToken}</Badge>
 						</span>
 					)}
 					{queryContext?.currentPair && (
 						<span className="triplet-info query-pair-info">
-							Current pair:{' '}
-							<Badge textTransform="none" variant="solid" color="primary">
-								{queryContext.currentPair.key}
-							</Badge>
-							<Badge textTransform="none" variant="solid" color="highlight-danger">
-								{queryContext.currentPair.operator}
-							</Badge>
+							Current pair: <Badge color="robin">{queryContext.currentPair.key}</Badge>
+							<Badge color="sakura">{queryContext.currentPair.operator}</Badge>
 							{queryContext.currentPair.value && (
-								<Badge textTransform="none" variant="solid" color="success">
-									{queryContext.currentPair.value}
-								</Badge>
+								<Badge color="forest">{queryContext.currentPair.value}</Badge>
 							)}
 							<Badge
-								textTransform="none"
-								variant="solid"
 								color={queryContext.currentPair.isComplete ? 'success' : 'warning'}
 							>
 								{queryContext.currentPair.isComplete ? 'Complete' : 'Incomplete'}
@@ -1549,9 +1495,7 @@ function QuerySearch({
 					{queryContext?.queryPairs && queryContext.queryPairs.length > 0 && (
 						<span className="triplet-info">
 							Total pairs:{' '}
-							<Badge variant="solid" color="primary">
-								{queryContext.queryPairs.length}
-							</Badge>
+							<Badge color="robin">{queryContext.queryPairs.length}</Badge>
 						</span>
 					)}
 				</div>

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

@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { Dropdown, type DropdownItemType } from '@signozhq/ui/dropdown';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -91,26 +91,6 @@ export const QueryV2 = forwardRef(function QueryV2(
 		cloneQuery('query', query);
 	};
 
-	const queryActionItems: DropdownItemType[] = [
-		{
-			type: 'item',
-			label: 'Clone',
-			value: 'clone-query',
-			prefix: <Copy size={14} />,
-			onClick: handleCloneEntity,
-		},
-	];
-
-	if (queriesCount && queriesCount > 1) {
-		queryActionItems.push({
-			type: 'item',
-			label: 'Delete',
-			value: 'delete-query',
-			prefix: <Trash size={14} />,
-			onClick: handleDeleteQuery,
-		});
-	}
-
 	const showReduceTo = useMemo(
 		() =>
 			dataSource === DataSource.METRICS &&
@@ -244,14 +224,32 @@ export const QueryV2 = forwardRef(function QueryV2(
 							)}
 
 							{isMultiQueryAllowed && (
-								<Dropdown
-									items={queryActionItems}
-									nativeButton={false}
+								<DropdownMenuSimple
+									className="query-actions-dropdown"
+									menu={{
+										items: [
+											{
+												label: 'Clone',
+												key: 'clone-query',
+												icon: <Copy size={14} />,
+												onClick: handleCloneEntity,
+											},
+											...(queriesCount && queriesCount > 1
+												? [
+														{
+															label: 'Delete',
+															key: 'delete-query',
+															icon: <Trash size={14} />,
+															onClick: handleDeleteQuery,
+														},
+													]
+												: []),
+										],
+									}}
 									align="end"
-									side="bottom"
 								>
 									<Ellipsis size={16} />
-								</Dropdown>
+								</DropdownMenuSimple>
 							)}
 						</div>
 					</div>

frontend/src/components/QueryBuilderV2/__tests__/QueryAddOns.test.tsx

@@ -305,29 +305,6 @@ describe('QueryAddOns', () => {
 		);
 	});
 
-	it('closes the only open add-on when its tab is clicked again', async () => {
-		const user = userEvent.setup();
-
-		render(
-			<QueryAddOns
-				query={baseQuery()}
-				version="v5"
-				isRawQuery={false}
-				showReduceTo={false}
-				panelType={PANEL_TYPES.TIME_SERIES}
-				index={0}
-				isForTraceOperator={false}
-			/>,
-		);
-
-		const legendTab = screen.getByTestId('query-add-on-legend_format');
-		await user.click(legendTab);
-		expect(screen.getByTestId('legend-format-content')).toBeInTheDocument();
-
-		await user.click(legendTab);
-		expect(screen.queryByTestId('legend-format-content')).not.toBeInTheDocument();
-	});
-
 	it('does not override existing legend when enabling Legend format', async () => {
 		const user = userEvent.setup();
 		const query = baseQuery({
@@ -431,14 +408,8 @@ describe('QueryAddOns', () => {
 			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
 
 			expect(screen.getByTestId('bucket-options-content')).toBeInTheDocument();
-			expect(screen.getByRole('button', { name: 'Log' })).toHaveAttribute(
-				'aria-pressed',
-				'true',
-			);
-			expect(screen.getByRole('button', { name: '0' })).toHaveAttribute(
-				'aria-pressed',
-				'true',
-			);
+			expect(screen.getByRole('radio', { name: 'Log' })).toBeChecked();
+			expect(screen.getByRole('radio', { name: '0' })).toBeChecked();
 		});
 
 		it('shows the server default, log at scale 4, without sending it', async () => {
@@ -447,16 +418,10 @@ describe('QueryAddOns', () => {
 
 			await user.click(screen.getByTestId('query-add-on-bucket_options'));
 
-			expect(screen.getByRole('button', { name: 'Log' })).toHaveAttribute(
-				'aria-pressed',
-				'true',
-			);
-			expect(screen.getByRole('button', { name: '4' })).toHaveAttribute(
-				'aria-pressed',
-				'true',
-			);
+			expect(screen.getByRole('radio', { name: 'Log' })).toBeChecked();
+			expect(screen.getByRole('radio', { name: '4' })).toBeChecked();
 			expect(
-				screen.queryByRole('button', { name: 'Auto' }),
+				screen.queryByRole('radio', { name: 'Auto' }),
 			).not.toBeInTheDocument();
 			expect(mockHandleChangeQueryData).not.toHaveBeenCalledWith(
 				'bucketOptions',
@@ -468,7 +433,7 @@ describe('QueryAddOns', () => {
 			const user = userEvent.setup();
 			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 4 } } });
 
-			await user.click(screen.getByRole('button', { name: '0' }));
+			await user.click(screen.getByRole('radio', { name: '0' }));
 
 			expect(mockHandleChangeQueryData).toHaveBeenCalledWith('bucketOptions', {
 				kind: 'log',
@@ -480,7 +445,7 @@ describe('QueryAddOns', () => {
 			const user = userEvent.setup();
 			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
 
-			await user.click(screen.getByRole('button', { name: '-4' }));
+			await user.click(screen.getByRole('radio', { name: '-4' }));
 
 			expect(mockHandleChangeQueryData).toHaveBeenCalledWith('bucketOptions', {
 				kind: 'log',
@@ -501,7 +466,7 @@ describe('QueryAddOns', () => {
 			const user = userEvent.setup();
 			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
 
-			await user.click(screen.getByRole('button', { name: 'Linear' }));
+			await user.click(screen.getByRole('radio', { name: 'Linear' }));
 
 			expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith(
 				'bucketOptions',
@@ -516,7 +481,7 @@ describe('QueryAddOns', () => {
 			const user = userEvent.setup();
 			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
 
-			await user.click(screen.getByRole('button', { name: 'Linear' }));
+			await user.click(screen.getByRole('radio', { name: 'Linear' }));
 			await user.type(screen.getByTestId('bucket-options-max-value'), '500');
 
 			await waitFor(() => {

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

@@ -146,7 +146,7 @@
 			}
 
 			// Hovering the checkbox reveals the "Toggle" action.
-			[data-slot='checkbox']:hover ~ .checkbox-value-section .toggle-btn {
+			.check-box:hover ~ .checkbox-value-section .toggle-btn {
 				display: flex;
 				opacity: 1;
 				transform: translateX(0);

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -18,9 +18,7 @@ import LogsQuickFilterEmptyState from './LogsQuickFilterEmptyState';
 import useActiveQueryIndex from 'components/QuickFilters/hooks/useActiveQueryIndex';
 import useCheckboxDisclosure from './useCheckboxDisclosure';
 import useCheckboxFilterActions from './useCheckboxFilterActions';
-import useCheckboxFilterState, {
-	FILTER_DISABLED_REASON,
-} from './useCheckboxFilterState';
+import useCheckboxFilterState from './useCheckboxFilterState';
 import useCheckboxFilterValues from './useCheckboxFilterValues';
 
 import './Checkbox.styles.scss';
@@ -134,7 +132,6 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 										value={value}
 										checked={currentFilterState[value]}
 										disabled={isFilterDisabled}
-										disabledTooltip={FILTER_DISABLED_REASON}
 										title={filter.title}
 										onlyButtonLabel={
 											isSomeFilterPresentForCurrentAttribute

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/CheckboxValueRow.tsx

@@ -2,13 +2,12 @@ import { Button } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 
 interface CheckboxValueRowProps {
 	value: string;
 	checked: boolean;
 	disabled: boolean;
-	disabledTooltip?: string;
 	title: string;
 	onlyButtonLabel: string;
 	customRendererForValue?: (value: string) => JSX.Element;
@@ -20,7 +19,6 @@ function CheckboxValueRow({
 	value,
 	checked,
 	disabled,
-	disabledTooltip,
 	title,
 	onlyButtonLabel,
 	customRendererForValue,
@@ -30,11 +28,10 @@ function CheckboxValueRow({
 	return (
 		<div className="value">
 			<Checkbox
-				color="primary"
-				disabledTooltip={disabledTooltip}
 				onChange={(isChecked): void => onCheckboxChange(isChecked === true)}
 				value={checked}
 				disabled={disabled}
+				className="check-box"
 			/>
 
 			<div
@@ -50,11 +47,11 @@ function CheckboxValueRow({
 				{customRendererForValue ? (
 					customRendererForValue(value)
 				) : (
-					<Tooltip title={String(value)} side="top" align="start">
+					<TooltipSimple title={String(value)} side="top" align="start">
 						<Typography.Text className="value-string" truncate={1}>
 							{String(value)}
 						</Typography.Text>
-					</Tooltip>
+					</TooltipSimple>
 				)}
 				<div className="value-actions">
 					<Button type="text" className="only-btn">
@@ -70,7 +67,6 @@ function CheckboxValueRow({
 }
 
 CheckboxValueRow.defaultProps = {
-	disabledTooltip: undefined,
 	customRendererForValue: undefined,
 };
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxFilterState.ts

@@ -17,9 +17,6 @@ interface UseCheckboxFilterStateReturn {
 	isMultipleValuesTrueForTheKey: boolean;
 }
 
-export const FILTER_DISABLED_REASON =
-	'This attribute is used more than once in the filter bar';
-
 /**
  * Reads the active query and derives the per-value checked state for this
  * attribute, whether the filter is disabled (same key used more than once in

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.module.scss

@@ -38,6 +38,6 @@
 .rightAction {
 	display: flex;
 	align-items: center;
-	gap: var(--spacing-4);
+	gap: var(--spacing-1);
 	flex-shrink: 0;
 }

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import { ChevronDown, ChevronRight, Search, Undo2 } from '@signozhq/icons';
 
@@ -62,7 +62,13 @@ export function CheckboxFilterV2Header({
 				) : (
 					<ChevronRight size={13} cursor="pointer" />
 				)}
-				<Tooltip title={isTitleTruncated ? title : undefined}>{titleText}</Tooltip>
+				{isTitleTruncated ? (
+					<TooltipSimple title={title} delayDuration={400}>
+						{titleText}
+					</TooltipSimple>
+				) : (
+					titleText
+				)}
 			</section>
 			{isOpen && (
 				<section className={classNames(styles.rightAction, actionsClassName)}>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Section.tsx

@@ -3,7 +3,6 @@ import {
 	CheckedState,
 } from 'components/QuickFilters/types';
 
-import { FILTER_DISABLED_REASON } from '../useCheckboxFilterState';
 import { CheckboxFilterV2ValueRow } from './CheckboxFilterV2ValueRow';
 import { SectionDivider } from './SectionDivider';
 import { Section } from './useSectionedValues';
@@ -85,7 +84,6 @@ export function CheckboxFilterV2Section(
 						value={value}
 						checkedState={checkedState}
 						disabled={isFilterDisabled}
-						disabledTooltip={FILTER_DISABLED_REASON}
 						title={filter.title}
 						badge={badge}
 						onlyButtonLabel={

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.module.scss

@@ -37,31 +37,53 @@
 	align-items: center;
 	justify-items: end;
 
-	--button-height: 21px;
-	--button-padding: var(--spacing-5);
-
 	// Stack badge / only / toggle in a single cell so the crossfade overlaps
 	// instead of laying them side-by-side mid-transition.
 	> * {
 		grid-area: 1 / 1;
 	}
+}
 
-	> [data-action='badge'] {
-		opacity: 1;
-		transition:
-			opacity 0.16s ease,
-			display 0.16s allow-discrete;
+.badge {
+	opacity: 1;
+	transition:
+		opacity 0.16s ease,
+		display 0.16s allow-discrete;
+}
+
+.onlyButton {
+	display: none;
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	transform: translateX(4px);
+	transition:
+		opacity 0.16s ease,
+		transform 0.16s ease,
+		display 0.16s allow-discrete;
+	--button-height: 21px;
+	--button-padding: var(--spacing-5);
+
+	&:hover {
+		background-color: unset;
 	}
+}
 
-	> [data-action='only'],
-	> [data-action='toggle'] {
-		display: none;
-		opacity: 0;
-		transform: translateX(4px);
-		transition:
-			opacity 0.16s ease,
-			transform 0.16s ease,
-			display 0.16s allow-discrete;
+.toggleButton {
+	display: none;
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	transform: translateX(4px);
+	transition:
+		opacity 0.16s ease,
+		transform 0.16s ease,
+		display 0.16s allow-discrete;
+	--button-height: 21px;
+	--button-padding: var(--spacing-5);
+
+	&:hover {
+		background-color: unset;
 	}
 }
 
@@ -72,15 +94,19 @@
 		color: var(--l3-foreground);
 	}
 
-	[data-action='only'],
-	[data-action='toggle'] {
+	.onlyButton {
+		cursor: not-allowed;
+		color: var(--l3-foreground);
+	}
+
+	.toggleButton {
 		cursor: not-allowed;
 		color: var(--l3-foreground);
 	}
 }
 
 .valueButton:hover {
-	[data-action='only'] {
+	.onlyButton {
 		display: flex;
 		opacity: 1;
 		transform: translateX(0);
@@ -91,14 +117,14 @@
 		}
 	}
 
-	[data-action='badge'] {
+	.badge {
 		display: none;
 		opacity: 0;
 	}
 }
 
 .checkbox:hover ~ .valueButton {
-	[data-action='toggle'] {
+	.toggleButton {
 		display: flex;
 		opacity: 1;
 		transform: translateX(0);
@@ -109,14 +135,16 @@
 		}
 	}
 
-	[data-action='badge'] {
+	.badge {
 		display: none;
 		opacity: 0;
 	}
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.actions > * {
+	.badge,
+	.onlyButton,
+	.toggleButton {
 		transition: none;
 	}
 }

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.tsx

@@ -12,7 +12,6 @@ interface ValueRowProps {
 	value: string;
 	checkedState: CheckedState;
 	disabled: boolean;
-	disabledTooltip?: string;
 	title: string;
 	onlyButtonLabel: string;
 	customRendererForValue?: (value: string) => JSX.Element;
@@ -37,7 +36,6 @@ export function CheckboxFilterV2ValueRow({
 	value,
 	checkedState,
 	disabled,
-	disabledTooltip,
 	title,
 	onlyButtonLabel,
 	customRendererForValue,
@@ -56,7 +54,6 @@ export function CheckboxFilterV2ValueRow({
 		>
 			<div className={styles.checkbox}>
 				<Checkbox
-					disabledTooltip={disabledTooltip}
 					onChange={(isChecked): void =>
 						onCheckboxChange(isChecked === true, checkedState)
 					}
@@ -100,18 +97,18 @@ export function CheckboxFilterV2ValueRow({
 				<div className={styles.actions}>
 					{badge && (
 						<Badge
-							variant="outlined"
+							variant="outline"
 							color={badge.color}
-							data-action="badge"
+							className={styles.badge}
 							testId={`badge-${badge.key}`}
 						>
 							{badge.label}
 						</Badge>
 					)}
-					<Button size="md" variant="ghost" color="secondary" data-action="only">
+					<Button variant="ghost" color="secondary" className={styles.onlyButton}>
 						{onlyButtonLabel}
 					</Button>
-					<Button size="md" variant="ghost" color="secondary" data-action="toggle">
+					<Button variant="ghost" color="secondary" className={styles.toggleButton}>
 						Toggle
 					</Button>
 				</div>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2Header.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
 
 import { CheckboxFilterV2Header } from '../CheckboxFilterV2Header';
 
@@ -157,7 +158,11 @@ describe('CheckboxFilterV2Header', () => {
 		it('shows the full name on hover when the title is truncated', async () => {
 			mockTitleWidths(200, 100);
 			const user = userEvent.setup();
-			render(<CheckboxFilterV2Header {...defaultProps} />);
+			render(
+				<TooltipProvider>
+					<CheckboxFilterV2Header {...defaultProps} />
+				</TooltipProvider>,
+			);
 
 			await user.hover(screen.getByText(defaultProps.title));
 
@@ -169,7 +174,11 @@ describe('CheckboxFilterV2Header', () => {
 		it('shows no tooltip when the title fits', async () => {
 			mockTitleWidths(100, 100);
 			const user = userEvent.setup();
-			render(<CheckboxFilterV2Header {...defaultProps} />);
+			render(
+				<TooltipProvider>
+					<CheckboxFilterV2Header {...defaultProps} />
+				</TooltipProvider>,
+			);
 
 			await user.hover(screen.getByText(defaultProps.title));
 

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: 'primary' }}
+					badge={{ key: 'related', label: 'Related', color: 'robin' }}
 				/>,
 			);
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/itemRules.ts

@@ -9,7 +9,7 @@ export enum SectionType {
 export interface BadgeConfig {
 	key: string;
 	label: string;
-	color: 'primary' | 'warning' | 'secondary';
+	color: 'robin' | 'warning' | 'secondary';
 }
 
 export interface ItemConfig {