fix: check user attach on reset token issue, list tokens collection-wide

PUT /api/v2/users/{id}/reset_password_tokens issues a credential for the
target user, so it now declares a parent-child def requiring attach on the
user alongside factor-password:create on the instance (mirroring the
/api/v1/service_accounts/{id}/keys pattern).

GET on the same path enumerates the user's tokens, so it checks
factor-password:list on the wildcard (list is a collection-level verb; the
path id is only a filter) instead of factor-password:read on the instance.

docs/api/openapi.yml

@@ -184,7 +184,6 @@ components:
         headers:
           additionalProperties:
             type: string
-          nullable: true
           type: object
         html:
           type: string
@@ -218,7 +217,6 @@ components:
         metadata:
           additionalProperties:
             type: string
-          nullable: true
           type: object
         sendResolved:
           nullable: true
@@ -260,7 +258,6 @@ components:
           type: string
         customFields:
           additionalProperties: {}
-          nullable: true
           type: object
         description:
           type: string
@@ -271,7 +268,6 @@ components:
         labels:
           items:
             type: string
-          nullable: true
           type: array
         priority:
           type: string
@@ -350,7 +346,6 @@ components:
         details:
           additionalProperties:
             type: string
-          nullable: true
           type: object
         message:
           type: string
@@ -379,7 +374,6 @@ components:
         details:
           additionalProperties:
             type: string
-          nullable: true
           type: object
         group:
           type: string
@@ -457,7 +451,6 @@ components:
         actions:
           items:
             $ref: '#/components/schemas/AlertmanagertypesChannelSlackAction'
-          nullable: true
           type: array
         apiUrl:
           format: password
@@ -471,7 +464,6 @@ components:
         fields:
           items:
             $ref: '#/components/schemas/AlertmanagertypesChannelSlackField'
-          nullable: true
           type: array
         footer:
           type: string
@@ -1771,15 +1763,12 @@ components:
           additionalProperties: {}
           nullable: true
           type: object
-        syncState:
-          $ref: '#/components/schemas/CloudintegrationtypesSyncState'
         timestampMillis:
           format: int64
           type: integer
       required:
       - timestampMillis
       - data
-      - syncState
       type: object
     CloudintegrationtypesAzureAccountConfig:
       properties:
@@ -2024,8 +2013,6 @@ components:
           format: date-time
           nullable: true
           type: string
-        syncState:
-          $ref: '#/components/schemas/CloudintegrationtypesSyncState'
       required:
       - account_id
       - cloud_account_id
@@ -2035,7 +2022,6 @@ components:
       - providerAccountId
       - integrationConfig
       - removedAt
-      - syncState
       type: object
     CloudintegrationtypesGettableServicesMetadata:
       properties:
@@ -2135,9 +2121,6 @@ components:
           type: object
         providerAccountId:
           type: string
-        syncedVersion:
-          nullable: true
-          type: integer
       required:
       - data
       type: object
@@ -2150,18 +2133,6 @@ components:
         gcp:
           $ref: '#/components/schemas/CloudintegrationtypesGCPIntegrationConfig'
       type: object
-    CloudintegrationtypesRegionState:
-      enum:
-      - enabled
-      - disabled
-      type: string
-    CloudintegrationtypesRegionSyncState:
-      properties:
-        state:
-          $ref: '#/components/schemas/CloudintegrationtypesRegionState'
-      required:
-      - state
-      type: object
     CloudintegrationtypesService:
       properties:
         assets:
@@ -2303,23 +2274,6 @@ components:
         metrics:
           type: boolean
       type: object
-    CloudintegrationtypesSyncState:
-      nullable: true
-      properties:
-        inSync:
-          type: boolean
-        regions:
-          additionalProperties:
-            $ref: '#/components/schemas/CloudintegrationtypesRegionSyncState'
-          type: object
-        version:
-          format: int64
-          type: integer
-      required:
-      - version
-      - inSync
-      - regions
-      type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:
@@ -26677,7 +26631,10 @@ paths:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
       security:
-      - tokenizer: []
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
       summary: Updates my password
       tags:
       - users

docs/contributing/go/authz.md

@@ -118,10 +118,10 @@ router.Handle("/api/v1/service_accounts", handler.New(
 The pieces:
 
 - **`CheckResources(handlerFn, roles...)`** — the resource-aware authorization wrapper from [pkg/http/middleware/authz.go](/pkg/http/middleware/authz.go). The role list is the community-edition fallback: which managed roles may call this route when per-resource checks are unavailable.
-- **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyJSONPath("data.id")`, `BodyJSONArray("ids")`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`).
+- **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyField(func(req *T) string)` / `BodyFields(func(req *T) []string)` reading the request body the resource middleware decoded into the route's `OpenAPIDef.Request` type `T`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`). A handler on such a route reads the same decoded value with `coretypes.BodyFromContext[T](r.Context())`.
 - **`SecuritySchemes`** — advertises the required scope (`resource.Scope(verb)`, e.g. `serviceaccount:create`) in the OpenAPI spec.
 
-For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). When a side's ids come from a list extractor (`BodyJSONArray` or a custom `ResourceIDsExtractor`) and that list resolves to nothing at request time, there is nothing to link: the def resolves to no resources, so no check runs and no audit event is emitted (e.g. inviting a user with an empty `userRoles`). A single-id side (`OneID`) always resolves to exactly one id and fails closed when it is empty. For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
+For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). If the target list is optional in the payload (e.g. `userRoles` at user creation), set `OptionalTargets`: when no target ids resolve, the attach is vacuous and the def is skipped entirely — without it, the empty-id contract would check collection-level access on the target. For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
 
 Prefer `CheckResources` with a `ResourceDef` for anything resource-shaped. The older coarse gates `ViewAccess`/`EditAccess`/`AdminAccess` only check "does the caller hold one of these roles" and give up per-resource granularity; `OpenAccess` performs no authorization (authentication still applies); `CheckWithoutClaims` serves anonymous routes such as public dashboards.
 

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -183,52 +183,32 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		return nil, errors.New(errors.TypeAlreadyExists, cloudintegrationtypes.ErrCodeCloudIntegrationAlreadyConnected, errMessage)
 	}
 
-	storableAccount, err := module.store.GetAccountByID(ctx, orgID, req.CloudIntegrationID, provider)
+	account, err := module.store.GetAccountByID(ctx, orgID, req.CloudIntegrationID, provider)
 	if err != nil {
 		return nil, err
 	}
 
-	account, err := cloudintegrationtypes.NewAccountFromStorable(storableAccount)
-	if err != nil {
-		return nil, err
-	}
-
-	syncState := account.NextSyncState(req.SyncedVersion)
-
 	// If account has been removed (disconnected), return a minimal response with empty integration config.
+	// The agent uses this response to clean up resources
 	if account.RemovedAt != nil {
-		// Heartbeat stays frozen after removal, only the sync state is updated.
-		if account.AgentReport != nil && syncState != nil {
-			account.UpdateSyncState(syncState)
-
-			storableAccount, err = cloudintegrationtypes.NewStorableCloudIntegration(account)
-			if err != nil {
-				return nil, err
-			}
-
-			err = module.store.UpdateAgentReport(ctx, storableAccount)
-			if err != nil {
-				return nil, err
-			}
-		}
-
 		return cloudintegrationtypes.NewAgentCheckInResponse(
 			req.ProviderAccountID,
 			account.ID.StringValue(),
 			new(cloudintegrationtypes.ProviderIntegrationConfig),
 			account.RemovedAt,
-			syncState,
 		), nil
 	}
 
-	account.UpdateAgentReport(&req.ProviderAccountID, cloudintegrationtypes.NewAgentReport(req.Data, syncState))
+	// update account with cloud provider account id and agent report (heartbeat)
+	account.Update(&req.ProviderAccountID, cloudintegrationtypes.NewAgentReport(req.Data))
 
-	storableAccount, err = cloudintegrationtypes.NewStorableCloudIntegration(account)
+	err = module.store.UpdateAccount(ctx, account)
 	if err != nil {
 		return nil, err
 	}
 
-	err = module.store.UpdateAgentReport(ctx, storableAccount)
+	// Get account as domain object for config access (enabled regions, etc.)
+	domainAccount, err := cloudintegrationtypes.NewAccountFromStorable(account)
 	if err != nil {
 		return nil, err
 	}
@@ -243,7 +223,8 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		return nil, err
 	}
 
-	integrationConfig, err := cloudProvider.BuildIntegrationConfig(ctx, account, storedServices)
+	// Delegate integration config building entirely to the provider module
+	integrationConfig, err := cloudProvider.BuildIntegrationConfig(ctx, domainAccount, storedServices)
 	if err != nil {
 		return nil, err
 	}
@@ -253,7 +234,6 @@ func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provi
 		account.ID.StringValue(),
 		integrationConfig,
 		account.RemovedAt,
-		syncState,
 	), nil
 }
 

frontend/.storybook/preview-head.html

@@ -70,49 +70,3 @@
 		Object.defineProperty(window, 'Date', { value: FrozenDate, writable: true });
 	})();
 </script>
-
-<script>
-	// Storybook has no microphone. Chromium's recognizer asks for one and for
-	// Google's speech service, and the `not-allowed` or `network` it reports makes
-	// the assistant hide its mic for the rest of the tab. This one starts
-	// listening at once and hears only what a story passes to `hear`.
-	(() => {
-		class StorySpeechRecognition extends EventTarget {
-			static listening = null;
-			lang = 'en-US';
-			continuous = false;
-			interimResults = false;
-			onstart = null;
-			onresult = null;
-			onerror = null;
-			onend = null;
-
-			start() {
-				StorySpeechRecognition.listening = this;
-				setTimeout(() => this.onstart?.());
-			}
-
-			stop() {
-				if (StorySpeechRecognition.listening === this) {
-					StorySpeechRecognition.listening = null;
-				}
-				setTimeout(() => this.onend?.());
-			}
-
-			abort() {
-				this.stop();
-			}
-
-			/** An interim result: the words so far, still listening. */
-			hear(transcript) {
-				const result = Object.assign([{ transcript, confidence: 1 }], {
-					isFinal: false,
-				});
-				this.onresult?.({ resultIndex: 0, results: [result] });
-			}
-		}
-
-		window.SpeechRecognition = StorySpeechRecognition;
-		window.webkitSpeechRecognition = StorySpeechRecognition;
-	})();
-</script>

frontend/.storybook/preview.tsx

@@ -122,21 +122,7 @@ const preview: Preview = {
 							['List', 'New', 'Edit'],
 						],
 						'Dashboards',
-						[
-							'List',
-							'Detail',
-							[
-								'Overview',
-								'Settings',
-								'Variables',
-								'New Variable',
-								'Edit Variable',
-								'Authz',
-							],
-							'Panel Editor',
-							['Overview', 'Chart Options', 'Thresholds and Links'],
-							'Public',
-						],
+						['List', 'Detail', 'Panel Editor', 'Public'],
 						'Services',
 						['List', 'Detail', 'Top Level Operations', 'Service Map'],
 						'Logs',

frontend/.storybook/test-runner.ts

@@ -23,13 +23,6 @@ const IGNORED_MESSAGES = [
 	// (YouTube embeds, the docs pane) so they hit the real network instead of
 	// an unanswered msw request; the block is the point, not a bug.
 	/violates the following Content Security Policy directive/,
-	// The filter editor's ANTLR parser reports every syntax error through
-	// `console.error` (`line 1:14 missing ...`), so each partial expression
-	// typed into it logs one; the editor shows the same errors on screen.
-	/^line \d+:\d+ /,
-	// Chromium's echo of a 4xx/5xx response, which the `[response]` entry below
-	// already reports with its URL and the time its request left.
-	/^Failed to load resource: the server responded with a status of /,
 ];
 
 interface CapturedMessage {
@@ -93,9 +86,7 @@ const config: TestRunnerConfig = {
 		page.on('response', (response) => {
 			if (response.status() >= 400) {
 				messages.push({
-					// The browser's clock, when the request left: a busy runner receives
-					// the outgoing story's responses after the next story has started.
-					at: response.request().timing().startTime,
+					at: Date.now(),
 					text: `[response] ${response.status()} ${response.url()}`,
 				});
 			}

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/docs/popover-migration-analysis.md

@@ -1,191 +0,0 @@
-# Popover migration analysis
-
-The new `@signozhq/ui` Popover is click-only. This note maps the current app onto that API so a later migration does not break open state, focus, or the global `.ant-popover` overrides. It does not change any call site.
-
-The component this describes lives in the design-system repo (`packages/ui/src/popover`). Storybook stories for it are `Playground`, `SaveViewForm`, `ControlledOpen`, `InsideDialog`, `MaxHeightScrolling`, and `AnchoredTypeahead`.
-
-## The API to migrate onto
-
-```tsx
-<Popover
-  nativeButton
-  side="bottom"
-  align="start"
-  trigger={<button type="button">Open</button>}
-  open={open}
-  onOpenChange={setOpen}
->
-  {content}
-</Popover>
-```
-
-| Today | New Popover |
-| --- | --- |
-| antd `children` (the trigger) | `trigger` (required) |
-| antd `content`, or Radix `<PopoverContent>` | `children` |
-| antd `trigger="click"` | the only mode; there is no `openOn` |
-| antd `trigger="hover"` | not this component; a Tooltip, or a click popover when the body is interactive |
-| `placement="bottomRight"` | `side="bottom"` `align="end"` |
-| `placement="bottomLeft"` | `side="bottom"` `align="start"` |
-| `open` / `onOpenChange` | kept; `onOpenChange` receives Base UI's reason and `details.cancel()` |
-| `defaultOpen` | removed; nothing in the app starts open |
-| `overlayClassName`, `overlayStyle`, `overlayInnerStyle`, `className` | rejected on the shell; size is `width` / `maxWidth` / `maxHeight` |
-| `getPopupContainer` | `container` |
-| `destroyTooltipOnHide` | the only behavior; the popup unmounts on close |
-| `arrow` / `showArrow` | rejected; the shell has no arrow |
-| Radix `PopoverAnchor` | `anchor`, and the trigger is still required |
-| Radix `withPortal={false}` | `container` (inside a Dialog the popup already portals into the panel) |
-| Radix `onInteractOutside` | `onOpenChange` + `details.cancel()` when `reason === 'outside-press'` |
-| `sideOffset` / `alignOffset` | not props; fixed at 4px and 0 |
-
-`nativeButton` is required. `true` when `trigger` renders a `<button>` (including `Button`). `false` for anything else.
-
-A node that renders nothing (`null`, `false`, `''`) renders the trigger alone, with no listeners and no portal.
-
-## What is in the app today
-
-Counted from `frontend/src` on this branch:
-
-- **29 files** import `Popover` from `antd`.
-- **7 files** import `Popover` from `@signozhq/ui` (the Radix wrapper this rework replaces). Those seven break as soon as the package ships, because `children` stops being the trigger.
-- **18 SCSS files** override `.ant-popover*`.
-
-antd `Dropdown` is already on `@signozhq/ui/dropdown`. antd `Tooltip` (on the order of 100 importers) is a separate migration.
-
-### antd files
-
-`src/components/CustomTimePicker/CustomTimePicker.tsx`
-`src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx`
-`src/components/ErrorPopover/ErrorPopover.tsx`
-`src/components/ExplorerCard/ExplorerCard.tsx`
-`src/components/HeaderRightSection/HeaderRightSection.tsx`
-`src/components/Logs/AddToQueryHOC.tsx`
-`src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx`
-`src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx`
-`src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx`
-`src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperatorEditor.tsx`
-`src/components/TableRenderer/LabelColumn.tsx`
-`src/components/WarningPopover/WarningPopover.tsx`
-`src/container/AlertHistory/AlertPopover/AlertPopover.tsx`
-`src/container/CreateAlertV2/EvaluationSettings/EvaluationSettings.tsx`
-`src/container/Home/Home.tsx`
-`src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx`
-`src/container/MetricsExplorer/MetricDetails/AllAttributesValue.tsx`
-`src/container/MetricsExplorer/Summary/MetricNameSearch.tsx`
-`src/container/OptionsMenu/index.tsx`
-`src/container/TopNav/AutoRefreshV2/index.tsx`
-`src/pages/DashboardsListPage/components/ListHeader/ListHeader.tsx`
-`src/pages/MetricsApplication/ApDex/ApDexApplication.tsx`
-`src/pages/PublicDashboard/PublicDashboardView/PublicAutoRefresh/PublicAutoRefresh.tsx`
-`src/pages/TraceDetailsV3/SpanDetailsPanel/Events/components/AttributeWithExpandablePopover.tsx`
-`src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelStepPopover.tsx`
-`src/pages/TracesFunnels/components/FunnelsList/FunnelItemPopover.tsx`
-`src/pages/TracesFunnels/components/SearchBar/SearchBar.tsx`
-`src/periscope/components/ContextMenu/index.tsx`
-`src/periscope/components/SeeMore/SeeMore.tsx`
-
-### Existing `@signozhq/ui` popovers
-
-`src/components/ExportMenu/ExportMenu.tsx`
-`src/components/MarkdownEditor/MarkdownHelp.tsx`
-`src/components/TanStackTableView/TanStackHeaderRow.tsx`
-`src/container/AIAssistant/components/ChatInput/ChatInput.tsx`
-`src/container/ListAlertRules/components/ColumnSelector.tsx`
-`src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ContextLinksSection/VariablesPopover.tsx`
-`src/pages/DashboardsListPage/components/ViewsRail/ViewNamePopover.tsx`
-
-### SCSS that overrides `.ant-popover`
-
-`src/components/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss`
-`src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss`
-`src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss`
-`src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss`
-`src/container/AlertHistory/AlertPopover/AlertPopover.styles.scss`
-`src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss`
-`src/container/CreateAlertV2/EvaluationSettings/styles.scss`
-`src/container/Home/Home.styles.scss`
-`src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss`
-`src/container/MetricsExplorer/Summary/Summary.styles.scss`
-`src/container/TopNav/AutoRefreshV2/AutoRefreshV2.styles.scss`
-`src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss`
-`src/container/WidgetCard/WidgetCard.styles.scss`
-`src/pages/DashboardsListPage/components/ListHeader/ListHeader.module.scss`
-`src/pages/TracesFunnels/TracesFunnels.styles.scss`
-`src/pages/TracesFunnels/components/FunnelsList/FunnelsList.styles.scss`
-`src/pages/TracesFunnels/components/SearchBar/SearchBar.styles.scss`
-`src/periscope/components/ContextMenu/styles.scss`
-
-Three of these are unscoped and restyle every antd popover on the page, not just their own:
-
-- `src/container/MetricsExplorer/Summary/Summary.styles.scss`
-- `src/container/CreateAlertV2/EvaluationSettings/styles.scss`
-- `src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss`
-
-Scope or delete those three before moving any nearby popover, or a migrated popup and a leftover antd popup will share rules that only one of them understands.
-
-Most of the other files repeat one recipe: padding 0, 4px radius, a 1px border, a translucent background, the arrow hidden. The new shell already has zero padding, `--radius-2`, and no arrow. Per-site size (fixed widths around 187–500px, max-width 600px, max-height 254px) becomes `width` / `maxWidth` / `maxHeight`. Do not re-apply the recipe as a `className`; the component rejects it.
-
-## What should not become this Popover
-
-**Hover descriptions.** `AddToQueryHOC`, `LabelColumn`, the three Query Builder validation popovers, `SeeMore`, and `AttributeWithExpandablePopover` open on hover. Those are Tooltips. `AttributeWithExpandablePopover` shows a value the user copies; if Tooltip cannot hold that, make it a click popover instead of keeping hover.
-
-**WarningPopover** (imported from about 10 files) is hover today and contains docs links. A tooltip cannot host those links. Either the links move out and the summary becomes a Tooltip, or the wrapper becomes a click Popover with `maxWidth` around 600.
-
-**Menus.** Funnel item and funnel step action lists, the sort lists in `ListHeader` and Traces Funnels `SearchBar`, `AutoRefreshV2` / `PublicAutoRefresh` interval lists, and `AlertPopover`'s two links are rows that close when one is picked. Those are Dropdowns. `AllAttributes` per-row actions are the same shape.
-
-**ContextMenu** (`src/periscope/components/ContextMenu/index.tsx`, imported across the dashboard drilldown) opens at chart-click coordinates. There is no trigger element. The new Popover requires `trigger`, so this stays a context menu. Do not fold the phantom span, `position: fixed` overlay, `zIndex: 10000`, or `calculatePopoverPosition.ts` into `anchor`. `anchor` is for a popover that already has a trigger and should position against something else (the typeahead input row).
-
-**Inspect charts.** `MetricsExplorer/Inspect` `GraphPopover` and `HoverPopover` are absolutely positioned cards, not antd Popover. Leave them until there is a context-menu or anchor design that matches them.
-
-**PanelStatusPopover** is a Tooltip despite the name.
-
-## What should become this Popover
-
-Click panels whose content is a form, a picker, or a composed layout:
-
-- `CustomTimePicker` — the most visible one. Controlled `open`, `container` for `getPopupContainer`, and it already unmounts on hide. It opens from both input focus and click; that logic stays in the caller, with `onOpenChange`.
-- `EvaluationSettings` / `EvaluationWindowPopover` — controlled, wide (`width` / `maxWidth`), and sitting on a global `.ant-popover` override. Migrate the override in the same change.
-- `HeaderRightSection` — three controlled forms (feedback, announcements, share).
-- `ExplorerCard` save-view form and `ViewNamePopover` — close only after the save succeeds, so `open` stays controlled. `ViewNamePopover` is already on the library and will not compile against the new props.
-- `ApDex` threshold form.
-- `Home` welcome checklist — drop the transparent-shell override; the shell is the component's.
-- `OptionsMenu`, `DownloadOptionsMenu`, `LogsFormatOptionsMenu` — click panels. `LogsFormatOptionsMenu` nests a submenu; the inner popup must be portalled, and the outer `onOpenChange` must `cancel()` an outside press that lands in the inner popup.
-- `MetricNameSearch` — controlled search panel. Scope the global padding override in `Summary.styles.scss` in the same change.
-- `AllAttributesValue` — one popover open at a time in a list. That is controlled `open` keyed by row, which the API still allows.
-- `ChatInput` context picker — already on the library; `side="top"` `align="end"` plus `width`.
-- `VariablesPopover` — already on the library. Keep `anchor` on the input row, `initialFocus={false}` so the caret stays, and `details.cancel()` when the outside press is the anchor. `withPortal={false}` becomes the default dialog `container`, not an unportalled popup.
-- `ColumnSelector`, `MarkdownHelp`, `TanStackHeaderRow`, `ExportMenu` — Radix `asChild` trigger plus content. The trigger moves to the `trigger` prop, content moves to `children`, and `className` on the shell becomes `width` / `maxWidth`.
-
-`ErrorPopover` is a thin wrapper. Re-point it at the new props and its consumer follows.
-
-## Order
-
-Before any change: screenshot every current popover, in both themes, so each call site's pattern is on record and a component swap is reviewable against it. Flag the misusages to design as they turn up — links inside hover surfaces above all. Swapping the component during migration is expected where the old call site was on the wrong one; antd call sites stay untouched until their turn.
-
-1. Scope the three global `.ant-popover` files so later migrations cannot restyle leftover antd popovers.
-2. Move the seven existing `@signozhq/ui` call sites first. They break at the package bump; the 29 antd files do not, until each one is switched.
-3. Migrate shared wrappers that are actually popovers (`ErrorPopover`, then `WarningPopover` once the links decision is made). Leave `ContextMenu` on antd until a context menu exists.
-4. Migrate click forms (`CustomTimePicker`, evaluation window, header menus, save-view, ApDex).
-5. Send hover descriptions to Tooltip and row menus to Dropdown, instead of forcing them through Popover.
-6. Delete the matching `.ant-popover` rules in the same change as each call site, so a half-migrated page is not styled twice.
-
-## Risks
-
-- **Controlled `open` is load-bearing.** Save forms close from inside the popup only when the mutation succeeds. A list keeps one popover open at a time. Dropping `open` and driving everything from `onOpenChange` alone cannot express either. Keep the controlled prop at those sites.
-- **Focus moves in.** Click popovers focus the first tabbable child. Typeaheads (`VariablesPopover`, and any filter that must keep the caret) need `initialFocus={false}`.
-- **Outside press and anchors.** A press on the anchor looks outside. Call `details.cancel()` or the typeahead closes when the user clicks the input it is anchored to.
-- **Dialogs.** Inside a Dialog or Drawer the popup portals into the panel so the focus trap can reach it. Do not set `container={document.body}` there.
-- **Z-index.** The shell starts at `--popover-z-index` (50) and lifts above the layer its trigger sits in. A Tooltip inside a row must still paint above the popup. The app ladder today is tooltip 1070, dropdown 1050, popover 1030, modal 1000. Check a truncated row tooltip inside a popover after the first real migration.
-- **Scroll locking.** Chart popovers measure the wrong box when a modal has locked scroll. This popover does not lock scroll (`modal` is rejected). Re-check Infrastructure Monitoring charts if a surrounding modal is open.
-- **`nativeButton` mismatches.** Base UI logs an error when the flag does not match the element. Every non-button trigger (a badge, a custom row, an input) needs `nativeButton={false}`.
-
-## `--popover-foreground` audit
-
-The shell reads `--popover-background`, `--popover-foreground`, `--popover-border`, and `--popover-shadow`. Those semantic values belong to the token package, not to call sites.
-
-Two legacy shadcn variables predate those hooks:
-
-- `--popover-foreground` is the foreground hook the shell uses. It should stay pointed at the same foreground as the rest of the light and dark themes (`--l1-foreground` today).
-- `--popover` (no suffix) is the old background. `--calendar-select-background` still reads it. Do not repoint `--popover` at `--popover-background` or at `surface-3` until the calendar token is audited, or date selection changes color with the popover shell.
-
-Call sites that pass antd's `color` (a gradient string on `AlertPopover`, a raw token on `SeeMore`) do not map to a prop. The shell color comes from the tokens. Content that needs its own background paints it inside `children`.

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.3.0",
+    "@signozhq/design-tokens": "2.1.6",
     "@signozhq/icons": "0.4.0",
-    "@signozhq/ui": "0.3.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/src/AppRoutes/index.tsx

@@ -12,14 +12,13 @@ import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
 import { ShiftHoldOverlayController } from 'components/ShiftOverlay/ShiftHoldOverlayController';
 import Spinner from 'components/Spinner';
+import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
@@ -59,6 +58,7 @@ function App(): JSX.Element {
 		isFetchingActiveLicense,
 		activeLicenseFetchError,
 		userFetchError,
+		featureFlagsFetchError,
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
@@ -66,8 +66,6 @@ function App(): JSX.Element {
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
-	const isSavedViewEnabled = useSavedViewEnabled();
-	const chatSupport = useChatSupport();
 
 	const { hostname } = window.location;
 	const [pathname, setPathname] = useState(history.location.pathname);
@@ -255,9 +253,7 @@ function App(): JSX.Element {
 	}, [isDarkMode]);
 
 	useEffect(() => {
-		// The bottom strip carries Support, so the floating bubble goes entirely.
 		if (
-			isSavedViewEnabled ||
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/') ||
 			pathname === '/ai-assistant' ||
@@ -267,32 +263,71 @@ function App(): JSX.Element {
 		} else {
 			window.Pylon?.('showChatBubble');
 		}
-	}, [pathname, isSavedViewEnabled]);
+	}, [pathname]);
 
-	// Identity for the Pylon widget. Whether this user gets Pylon at all is
-	// `useChatSupport`'s call — this only fills in who they are.
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect(() => {
-		if (chatSupport !== ChatSupportState.Pylon) {
-			return;
+		// feature flag shouldn't be loading and featureFlags or fetchError any one of this should be true indicating that req is complete
+		// licenses should also be present. there is no check for licenses for loading and error as that is mandatory if not present then routing
+		// to something went wrong which would ideally need a reload.
+		if (
+			!isFetchingFeatureFlags &&
+			(featureFlags || featureFlagsFetchError) &&
+			activeLicense &&
+			trialInfo
+		) {
+			let isChatSupportEnabled = false;
+			let isPremiumSupportEnabled = false;
+			if (featureFlags && featureFlags.length > 0) {
+				isChatSupportEnabled =
+					featureFlags.find((flag) => flag.name === FeatureKeys.CHAT_SUPPORT)
+						?.active || false;
+
+				isPremiumSupportEnabled =
+					featureFlags.find((flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT)
+						?.active || false;
+			}
+			const showAddCreditCardModal =
+				!isPremiumSupportEnabled && !trialInfo?.trialConvertedToSubscription;
+
+			if (
+				isLoggedInState &&
+				isChatSupportEnabled &&
+				!showAddCreditCardModal &&
+				(isCloudUser || isEnterpriseSelfHostedUser) &&
+				window.signozBootData?.settings?.pylon?.enabled
+			) {
+				const email = user.email || '';
+				const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
+				let emailHash = '';
+
+				if (email && secret) {
+					emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
+				}
+
+				window.pylon = {
+					chat_settings: {
+						app_id: window.signozBootData?.settings?.pylon?.appId,
+						email: user.email,
+						name: user.displayName || user.email,
+						email_hash: emailHash,
+					},
+				};
+			}
 		}
-
-		const email = user.email || '';
-		const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
-		let emailHash = '';
-
-		if (email && secret) {
-			emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
-		}
-
-		window.pylon = {
-			chat_settings: {
-				app_id: window.signozBootData?.settings?.pylon?.appId,
-				email: user.email,
-				name: user.displayName || user.email,
-				email_hash: emailHash,
-			},
-		};
-	}, [chatSupport, user]);
+	}, [
+		isLoggedInState,
+		user,
+		pathname,
+		trialInfo?.trialConvertedToSubscription,
+		featureFlags,
+		isFetchingFeatureFlags,
+		featureFlagsFetchError,
+		activeLicense,
+		trialInfo,
+		isCloudUser,
+		isEnterpriseSelfHostedUser,
+	]);
 
 	useEffect(() => {
 		if (!isFetchingUser && isCloudUser && user && user.email) {

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/api/generated/services/sigNoz.schemas.ts

@@ -104,9 +104,9 @@ export interface AlertmanagertypesChannelSlackFieldDTO {
 
 export interface AlertmanagertypesChannelSlackConfigDTO {
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	actions?: AlertmanagertypesChannelSlackActionDTO[] | null;
+	actions?: AlertmanagertypesChannelSlackActionDTO[];
 	/**
 	 * @type string
 	 * @format password
@@ -125,9 +125,9 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 */
 	fallback?: string;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	fields?: AlertmanagertypesChannelSlackFieldDTO[] | null;
+	fields?: AlertmanagertypesChannelSlackFieldDTO[];
 	/**
 	 * @type string
 	 */
@@ -166,19 +166,13 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelEmailConfigDTOKind {
 	email = 'email',
 }
-export type AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf = {
+export type AlertmanagertypesChannelEmailConfigDTOHeaders = {
 	[key: string]: string;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelEmailConfigDTOHeaders =
-	AlertmanagertypesChannelEmailConfigDTOHeadersAnyOf | null;
-
 export interface AlertmanagertypesChannelEmailConfigDTO {
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	headers?: AlertmanagertypesChannelEmailConfigDTOHeaders;
 	/**
@@ -245,16 +239,10 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelPagerdutyConfigDTOKind {
 	pagerduty = 'pagerduty',
 }
-export type AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf = {
+export type AlertmanagertypesChannelPagerdutyConfigDTODetails = {
 	[key: string]: string;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelPagerdutyConfigDTODetails =
-	AlertmanagertypesChannelPagerdutyConfigDTODetailsAnyOf | null;
-
 export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	/**
 	 * @type string
@@ -277,7 +265,7 @@ export interface AlertmanagertypesChannelPagerdutyConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	details?: AlertmanagertypesChannelPagerdutyConfigDTODetails;
 	/**
@@ -319,16 +307,10 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelOpsgenieConfigDTOKind {
 	opsgenie = 'opsgenie',
 }
-export type AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf = {
+export type AlertmanagertypesChannelOpsgenieConfigDTODetails = {
 	[key: string]: string;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelOpsgenieConfigDTODetails =
-	AlertmanagertypesChannelOpsgenieConfigDTODetailsAnyOf | null;
-
 export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	/**
 	 * @type string
@@ -344,7 +326,7 @@ export interface AlertmanagertypesChannelOpsgenieConfigDTO {
 	 */
 	description?: string;
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	details?: AlertmanagertypesChannelOpsgenieConfigDTODetails;
 	/**
@@ -441,16 +423,10 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJiraConfigDTOKind {
 	jira = 'jira',
 }
-export type AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf = {
+export type AlertmanagertypesChannelJiraConfigDTOCustomFields = {
 	[key: string]: unknown;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelJiraConfigDTOCustomFields =
-	AlertmanagertypesChannelJiraConfigDTOCustomFieldsAnyOf | null;
-
 export interface AlertmanagertypesChannelJiraConfigDTO {
 	/**
 	 * @type string
@@ -458,7 +434,7 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	apiToken: string;
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	customFields?: AlertmanagertypesChannelJiraConfigDTOCustomFields;
 	/**
@@ -474,9 +450,9 @@ export interface AlertmanagertypesChannelJiraConfigDTO {
 	 */
 	issueType: string;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	labels?: string[] | null;
+	labels?: string[];
 	/**
 	 * @type string
 	 */
@@ -567,23 +543,17 @@ export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTy
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTOKind {
 	incidentio = 'incidentio',
 }
-export type AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf = {
+export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata = {
 	[key: string]: string;
 };
 
-/**
- * @nullable
- */
-export type AlertmanagertypesChannelIncidentIOConfigDTOMetadata =
-	AlertmanagertypesChannelIncidentIOConfigDTOMetadataAnyOf | null;
-
 export interface AlertmanagertypesChannelIncidentIOConfigDTO {
 	/**
 	 * @type string
 	 */
 	description?: string;
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	metadata?: AlertmanagertypesChannelIncidentIOConfigDTOMetadata;
 	/**
@@ -3396,37 +3366,6 @@ export interface CloudintegrationtypesAWSServiceConfigDTO {
 	metrics?: CloudintegrationtypesAWSServiceMetricsConfigDTO;
 }
 
-export enum CloudintegrationtypesRegionStateDTO {
-	enabled = 'enabled',
-	disabled = 'disabled',
-}
-export interface CloudintegrationtypesRegionSyncStateDTO {
-	state: CloudintegrationtypesRegionStateDTO;
-}
-
-export type CloudintegrationtypesSyncStateDTORegions = {
-	[key: string]: CloudintegrationtypesRegionSyncStateDTO;
-};
-
-/**
- * @nullable
- */
-export type CloudintegrationtypesSyncStateDTO = {
-	/**
-	 * @type boolean
-	 */
-	inSync: boolean;
-	/**
-	 * @type object
-	 */
-	regions: CloudintegrationtypesSyncStateDTORegions;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	version: number;
-} | null;
-
 export type CloudintegrationtypesAgentReportDTODataAnyOf = {
 	[key: string]: unknown;
 };
@@ -3445,7 +3384,6 @@ export type CloudintegrationtypesAgentReportDTO = {
 	 * @type object,null
 	 */
 	data: CloudintegrationtypesAgentReportDTOData;
-	syncState: CloudintegrationtypesSyncStateDTO | null;
 	/**
 	 * @type integer
 	 * @format int64
@@ -3874,7 +3812,6 @@ export interface CloudintegrationtypesGettableAgentCheckInDTO {
 	 * @format date-time
 	 */
 	removedAt: string | null;
-	syncState: CloudintegrationtypesSyncStateDTO | null;
 }
 
 export interface CloudintegrationtypesServiceMetadataDTO {
@@ -3945,10 +3882,6 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	 * @type string
 	 */
 	providerAccountId?: string;
-	/**
-	 * @type integer,null
-	 */
-	syncedVersion?: number | null;
 }
 
 export interface CloudintegrationtypesStorableIntegrationDashboardDTO {

frontend/src/components/AddCreditCardModal/AddCreditCardModal.tsx

@@ -1,103 +0,0 @@
-import { useMutation } from 'react-query';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
-import { CreditCard, X } from '@signozhq/icons';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
-
-interface AddCreditCardModalProps {
-	open: boolean;
-	onClose: () => void;
-	onAddCreditCard?: () => void;
-}
-
-/**
- * Shown to trial users who have not added a card, in place of chat support.
- * Submitting creates the subscription and opens the returned billing URL.
- */
-function AddCreditCardModal({
-	open,
-	onClose,
-	onAddCreditCard,
-}: AddCreditCardModalProps): JSX.Element {
-	const { notifications } = useNotifications();
-
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{ onSuccess: handleBillingOnSuccess, onError: handleBillingOnError },
-	);
-
-	const handleAddCreditCard = (): void => {
-		onAddCreditCard?.();
-		updateCreditCard({ url: getBaseUrl() });
-	};
-
-	return (
-		<Modal
-			className="add-credit-card-modal"
-			title={<span className="title">Add Credit Card for Chat Support</span>}
-			open={open}
-			closable
-			onCancel={onClose}
-			destroyOnClose
-			footer={[
-				<Button
-					key="cancel"
-					onClick={onClose}
-					className="cancel-btn"
-					icon={<X size={16} />}
-				>
-					Cancel
-				</Button>,
-				<AuthZTooltip
-					key="submit"
-					checks={[SubscriptionCreatePermission]}
-					withPortal={false}
-				>
-					<Button
-						type="primary"
-						icon={<CreditCard size={16} />}
-						size="middle"
-						loading={isLoadingBilling}
-						disabled={isLoadingBilling}
-						onClick={handleAddCreditCard}
-						className="add-credit-card-btn"
-					>
-						Add Credit Card
-					</Button>
-				</AuthZTooltip>,
-			]}
-		>
-			<Typography.Text className="add-credit-card-text">
-				You&apos;re currently on <span className="highlight-text">Trial plan</span>.
-				Add a credit card to access SigNoz chat support to your workspace.
-			</Typography.Text>
-		</Modal>
-	);
-}
-
-AddCreditCardModal.defaultProps = { onAddCreditCard: undefined };
-
-export default AddCreditCardModal;

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

@@ -1,9 +0,0 @@
-import { rest } from 'msw';
-
-const SUBSCRIPTIONS = 'http://localhost/api/v1/subscriptions';
-
-export const createSubscriptionHandlers = [
-	rest.post(SUBSCRIPTIONS, (_req, res, ctx) =>
-		res(ctx.status(200), ctx.json({ data: { redirectURL: '' } })),
-	),
-];

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

@@ -1,57 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Button } from '@signozhq/ui/button';
-import { screen, userEvent, within } from 'storybook/test';
-
-import { withCanvas } from '@/storybook/decorators/withCanvas';
-
-import { createSubscriptionHandlers } from './AddCreditCardModal.stories.mocks';
-
-import AddCreditCardModal from '../AddCreditCardModal';
-
-/** Stands in for the surfaces that open it: the strip's Support button, and
- * `LaunchChatSupport` in the custom domain and onboarding flows. */
-function ModalFixture(): JSX.Element {
-	const [open, setOpen] = useState(false);
-
-	return (
-		<>
-			<Button
-				variant="solid"
-				color="primary"
-				size="md"
-				testId="open-add-credit-card"
-				onClick={(): void => setOpen(true)}
-			>
-				Contact support
-			</Button>
-			<AddCreditCardModal open={open} onClose={(): void => setOpen(false)} />
-		</>
-	);
-}
-
-const meta = {
-	title: 'Components/Add Credit Card Modal',
-	component: ModalFixture,
-	tags: ['play'],
-	decorators: [withCanvas({ maxWidth: 400 })],
-	parameters: {
-		msw: { handlers: createSubscriptionHandlers },
-	},
-} satisfies Meta<typeof ModalFixture>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-/** What a trial user without a card sees in place of chat support. */
-export const Default: Story = {
-	play: async ({ canvasElement }): Promise<void> => {
-		await userEvent.click(
-			within(canvasElement).getByTestId('open-add-credit-card'),
-		);
-		await screen.findByRole('dialog', {
-			name: /Add Credit Card for Chat Support/i,
-		});
-	},
-};

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

@@ -1,9 +1,6 @@
 .breadcrumb {
 	padding-left: 16px;
 
-	// The antd breadcrumb provides the item spacing.
-	--button-padding: 0;
-
 	ol {
 		align-items: center;
 	}
@@ -12,3 +9,8 @@
 		color: var(--muted-foreground);
 	}
 }
+
+.divider {
+	--divider-color: var(--l1-border);
+	--divider-margin: 10px 0 16px 0;
+}

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx

@@ -28,7 +28,7 @@ function AlertBreadcrumb({
 				items={breadcrumbItems}
 				data-testid={testId}
 			/>
-			{showDivider && <Divider spacing="10px 16px" />}
+			{showDivider && <Divider className={styles.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 { toast } from '@signozhq/ui/toast';
-import { Tooltip } from '@signozhq/ui/tooltip';
-import cx from 'classnames';
-import { useLayoutEffect, useRef, useState } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { toast } from '@signozhq/ui/sonner';
+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 { toast } from '@signozhq/ui/toast';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { Badge } from '@signozhq/ui/badge';
+import { toast } from '@signozhq/ui/sonner';
+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/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -56,15 +56,22 @@ function ProgressRender(item: string | number): JSX.Element {
 	const percent = Number(Number(item).toFixed(1));
 	return (
 		<div className="progress-container">
-			<div className="progress-bar">
-				<Progress
-					percent={percent}
-					showInfo
-					color={
-						percent >= 90 ? 'highlight-danger' : percent >= 60 ? 'warning' : 'success'
+			<Progress
+				percent={percent}
+				strokeLinecap="butt"
+				showInfo
+				strokeColor={((): string => {
+					const cpuPercent = percent;
+					if (cpuPercent >= 90) {
+						return Color.BG_SAKURA_500;
 					}
-				/>
-			</div>
+					if (cpuPercent >= 60) {
+						return Color.BG_AMBER_500;
+					}
+					return Color.BG_FOREST_500;
+				})()}
+				className="progress-bar"
+			/>
 		</div>
 	);
 }

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -72,7 +72,7 @@ export default function CeleryTaskDetail({
 								endTime ? `- ${formatTimestamp(endTime)}` : ''
 							}`}
 						</Typography.Text>
-						<Divider orientation="vertical" />
+						<Divider type="vertical" />
 						<Typography.Text className="subtitle">{taskData.value}</Typography.Text>
 					</div>
 				</div>

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,15 +1,63 @@
 import { useState } from 'react';
+import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button } from 'antd';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { MessageSquareText } from '@signozhq/icons';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 export default function ChatSupportGateway(): JSX.Element {
+	const { notifications } = useNotifications();
+
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
+
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{
+			onSuccess: (data) => {
+				handleBillingOnSuccess(data);
+			},
+			onError: handleBillingOnError,
+		},
+	);
 	const { pathname } = useLocation();
 
+	const handleAddCreditCard = (): void => {
+		logEvent('Add Credit card modal: Clicked', {
+			source: `chat support icon`,
+			page: pathname,
+		});
+
+		updateCreditCard({
+			url: getBaseUrl(),
+		});
+	};
+
 	return (
 		<>
 			<div className="chat-support-gateway">
@@ -28,16 +76,47 @@ export default function ChatSupportGateway(): JSX.Element {
 				</Button>
 			</div>
 
-			<AddCreditCardModal
+			{/* Add Credit Card Modal */}
+			<Modal
+				className="add-credit-card-modal"
+				title={<span className="title">Add Credit Card for Chat Support</span>}
 				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-				onAddCreditCard={(): void => {
-					logEvent('Add Credit card modal: Clicked', {
-						source: `chat support icon`,
-						page: pathname,
-					});
-				}}
-			/>
+				closable
+				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
+				destroyOnClose
+				footer={[
+					<Button
+						key="cancel"
+						onClick={(): void => setIsAddCreditCardModalOpen(false)}
+						className="cancel-btn"
+						icon={<X size={16} />}
+					>
+						Cancel
+					</Button>,
+					<AuthZTooltip
+						key="submit"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
+					>
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
+				]}
+			>
+				<Typography.Text className="add-credit-card-text">
+					You&apos;re currently on <span className="highlight-text">Trial plan</span>
+					. Add a credit card to access SigNoz chat support to your workspace.
+				</Typography.Text>
+			</Modal>
 		</>
 	);
 }

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

@@ -1,3 +1,36 @@
+.create-sa-modal {
+	max-width: 530px;
+	background: var(--popover);
+	border: 1px solid var(--secondary);
+	border-radius: 4px;
+	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);
+
+	[data-slot='dialog-header'] {
+		padding: var(--padding-4);
+		border-bottom: 1px solid var(--secondary);
+		flex-shrink: 0;
+		background: transparent;
+		margin: 0;
+	}
+
+	[data-slot='dialog-title'] {
+		font-size: var(--label-base-400-font-size);
+		font-weight: var(--label-base-400-font-weight);
+		line-height: var(--label-base-400-line-height);
+		letter-spacing: -0.065px;
+		color: var(--l1-foreground);
+		margin: 0;
+	}
+
+	[data-slot='dialog-description'] {
+		padding: 0;
+
+		.create-sa-modal__content {
+			padding: var(--padding-4);
+		}
+	}
+}
+
 .create-sa-form {
 	display: flex;
 	flex-direction: column;
@@ -17,6 +50,25 @@
 		}
 	}
 
+	&__input {
+		height: 32px;
+		color: var(--l1-foreground);
+		background-color: var(--l2-background);
+		border-color: var(--l1-border);
+		font-size: var(--paragraph-base-400-font-size);
+		border-radius: 2px;
+		width: 100%;
+
+		&::placeholder {
+			color: var(--l3-foreground);
+		}
+
+		&:focus {
+			border-color: var(--primary);
+			box-shadow: none;
+		}
+	}
+
 	&__error {
 		font-size: var(--paragraph-small-400-font-size);
 		color: var(--destructive);
@@ -31,3 +83,16 @@
 		line-height: var(--paragraph-small-400-line-height);
 	}
 }
+
+.create-sa-modal__footer {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 var(--padding-4);
+	height: 56px;
+	min-height: 56px;
+	border-top: 1px solid var(--secondary);
+	gap: var(--spacing-4);
+	flex-shrink: 0;
+}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -7,7 +7,7 @@ import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardCon
 import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccounts,
@@ -116,10 +116,11 @@ function CreateServiceAccountModal(): JSX.Element {
 									<Input
 										id="sa-name"
 										placeholder="Enter a name"
+										className="create-sa-form__input"
 										value={field.value}
 										onChange={field.onChange}
 										onBlur={field.onBlur}
-										testId="create-sa-name-input"
+										data-testid="create-sa-name-input"
 									/>
 								)}
 							/>
@@ -133,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

@@ -1,18 +1,17 @@
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import {
 	setupAuthzAdmin,
 	setupAuthzDenyAll,
 } 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';
 
-jest.mock('@signozhq/ui/toast', () => ({
-	...jest.requireActual('@signozhq/ui/toast'),
-	toast: { success: jest.fn(), danger: jest.fn() },
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
 }));
 
 const mockToast = jest.mocked(toast);
@@ -58,13 +57,10 @@ describe('CreateServiceAccountModal', () => {
 		// The form only renders once the create check resolves, and the name field
 		// registers its `required` rule on mount, so the empty-form invalid state
 		// settles a tick later.
-		await screen.findByTestId('create-sa-name-input-field');
+		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(),
 		);
 	});
 
@@ -72,31 +68,25 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const nameInput = await screen.findByTestId('create-sa-name-input-field');
+		const nameInput = await screen.findByTestId('create-sa-name-input');
 		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 () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const nameInput = await screen.findByTestId('create-sa-name-input-field');
+		const nameInput = await screen.findByTestId('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'),
-		);
+		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-field',
-		);
-		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 });
 
@@ -160,13 +116,11 @@ describe('CreateServiceAccountModal', () => {
 
 		renderModal();
 
-		const nameInput = await screen.findByTestId('create-sa-name-input-field');
+		const nameInput = await screen.findByTestId('create-sa-name-input');
 		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(() => {
@@ -209,9 +163,7 @@ describe('CreateServiceAccountModal', () => {
 			screen.findByText(/is not authorized to perform/i),
 		).resolves.toBeInTheDocument();
 
-		expect(
-			screen.queryByTestId('create-sa-name-input-field'),
-		).not.toBeInTheDocument();
+		expect(screen.queryByTestId('create-sa-name-input')).not.toBeInTheDocument();
 		expect(
 			screen.getByTestId('create-service-account-modal'),
 		).toBeInTheDocument();
@@ -228,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'));
 
@@ -246,7 +195,7 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const nameInput = await screen.findByTestId('create-sa-name-input-field');
+		const nameInput = await screen.findByTestId('create-sa-name-input');
 		await user.type(nameInput, 'Bot');
 		await user.clear(nameInput);
 

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

@@ -34,10 +34,34 @@ $item-spacing: 8px;
 		@include flex-center;
 		gap: 6px;
 		width: -webkit-fill-available;
+	}
 
-		// The search row draws its own padding; the inline Input hugs the text.
-		--input-height: auto;
-		--input-padding: 0;
+	&__input {
+		@include text-style-base;
+		width: 100%;
+		background: transparent;
+		border: none;
+		border-radius: 0;
+		box-shadow: none;
+		outline: none;
+		height: auto;
+		color: var(--l1-foreground);
+		font-size: 14px;
+		line-height: 20px;
+		letter-spacing: -0.07px;
+		padding: 0;
+
+		&:focus,
+		&:focus-visible,
+		&:hover {
+			border: none;
+			box-shadow: none;
+			outline: none;
+		}
+
+		&::placeholder {
+			color: var(--l2-foreground);
+		}
 	}
 
 	&__esc-key {

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -65,8 +65,7 @@ function SearchBar({
 				/>
 				<Input
 					type="text"
-					variant="unstyled"
-					noFocusRing
+					className="timezone-picker__input"
 					placeholder="Search timezones..."
 					value={value}
 					onChange={(e): void => onChange(e.target.value)}

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

@@ -1,4 +1,7 @@
 .details-header {
+	// ghost + secondary missing hover bg token in @signozhq/button
+	--button-ghost-hover-background: var(--l3-background);
+
 	box-sizing: border-box;
 	display: flex;
 	align-items: center;

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

@@ -5,7 +5,7 @@ import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { Input } from '@signozhq/ui/input';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
@@ -409,8 +409,7 @@ function EditMemberDrawer({
 				setShowResetLinkDialog(true);
 				onClose();
 			} else {
-				toast.danger('Failed to generate password reset link', {
-					action: { label: 'Dismiss' },
+				toast.error('Failed to generate password reset link', {
 					position: 'top-right',
 				});
 			}
@@ -439,7 +438,7 @@ function EditMemberDrawer({
 
 	useEffect(() => {
 		if (copyState.error) {
-			toast.danger('Failed to copy link', { action: { label: 'Dismiss' } });
+			toast.error('Failed to copy link');
 		}
 	}, [copyState.error]);
 
@@ -472,19 +471,20 @@ function EditMemberDrawer({
 				<label className="edit-member-drawer__label" htmlFor="member-name">
 					Name
 				</label>
-				<Input
-					id="member-name"
-					value={localDisplayName}
-					onChange={(e): void => {
-						setLocalDisplayName(e.target.value);
-						setSaveErrors((prev) =>
-							prev.filter((err) => err.context !== 'Name update'),
-						);
-					}}
-					placeholder="Enter name"
-					disabled={isRootUser || isDeleted}
-					disabledTooltip={isRootUser ? ROOT_USER_TOOLTIP : undefined}
-				/>
+				<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
+					<Input
+						id="member-name"
+						value={localDisplayName}
+						onChange={(e): void => {
+							setLocalDisplayName(e.target.value);
+							setSaveErrors((prev) =>
+								prev.filter((err) => err.context !== 'Name update'),
+							);
+						}}
+						placeholder="Enter name"
+						disabled={isRootUser || isDeleted}
+					/>
+				</Tooltip>
 			</div>
 
 			<div className="edit-member-drawer__field">
@@ -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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	useCreateResetPasswordToken,
@@ -82,11 +82,11 @@ jest.mock('@signozhq/ui/dialog', () => ({
 	),
 }));
 
-jest.mock('@signozhq/ui/toast', () => ({
-	...jest.requireActual('@signozhq/ui/toast'),
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
 	toast: {
 		success: jest.fn(),
-		danger: jest.fn(),
+		error: jest.fn(),
 	},
 }));
 
@@ -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.styles.scss

@@ -3,7 +3,20 @@
 		width: fit-content;
 		display: flex;
 		align-items: center;
+		gap: 4px;
+		border-radius: 20px;
+		background: color-mix(in srgb, var(--danger-background) 20%, transparent);
+		padding-left: 3px;
+		padding-right: 8px;
 		cursor: pointer;
+		span {
+			color: var(--danger-background);
+			font-size: 10px;
+			font-weight: 500;
+			line-height: 20px; /* 200% */
+			letter-spacing: 0.4px;
+			text-transform: uppercase;
+		}
 	}
 	&__wrap {
 		background: linear-gradient(

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -53,13 +53,8 @@ function ErrorModal({
 					onClick={(): void => setVisible(true)}
 					onKeyDown={undefined}
 				>
-					<Badge
-						variant="solid"
-						color="danger"
-						textTransform="uppercase"
-						prefix={<CircleAlert size={14} />}
-					>
-						error
+					<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

@@ -1,6 +1,6 @@
 .export-menu-popover {
-	// The popover shell carries no padding of its own, so the content owns it.
-	padding: var(--spacing-8);
+	width: 240px;
+	padding: 0 12px 12px 12px;
 
 	.title {
 		display: flex;
@@ -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, usePopoverHandle } from '@signozhq/ui/popover';
-import { RadioGroup } from '@signozhq/ui/radio-group';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	ClientExportData,
@@ -36,10 +36,6 @@ export default function ExportMenu({
 }: ExportMenuProps): JSX.Element {
 	const [exportFormat, setExportFormat] = useState<string>(ExportFormat.Csv);
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
-	// Driven by a handle rather than `trigger`: the button carries a Tooltip, and a Tooltip
-	// routes every prop it does not recognise to its own popup, so a popover's press handlers
-	// would never reach the button underneath.
-	const menu = usePopoverHandle(setIsPopoverOpen);
 
 	const { isExporting, handleExport: handleClientExport } = useClientExport({
 		data,
@@ -49,63 +45,48 @@ export default function ExportMenu({
 	});
 
 	const handleExport = useCallback((): void => {
-		menu.close();
+		setIsPopoverOpen(false);
 		handleClientExport({ format: exportFormat as ExportFormat });
-	}, [menu, exportFormat, handleClientExport]);
+	}, [exportFormat, handleClientExport]);
 
 	return (
-		<>
-			<Tooltip title="Download">
-				<Button
-					variant="ghost"
-					color="secondary"
-					size="sm"
-					icon
-					aria-label="Download"
-					aria-haspopup="dialog"
-					aria-expanded={isPopoverOpen}
-					testId={`export-menu-${dataSource}`}
-					loading={isExporting}
-					onClick={(event): void => menu.showAt(event.currentTarget)}
-				>
-					<Download size={14} />
-				</Button>
-			</Tooltip>
-			<Popover
-				nativeButton
-				side="bottom"
-				align="end"
-				width={240}
-				handle={menu}
-				aria-label="Export format"
-			>
-				<div 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' },
-							]}
-						/>
-					</div>
-
+		<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+			<TooltipSimple title="Download">
+				<PopoverTrigger asChild>
 					<Button
-						size="md"
-						variant="solid"
-						color="primary"
-						width="100%"
-						onClick={handleExport}
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						aria-label="Download"
+						data-testid={`export-menu-${dataSource}`}
+						disabled={isExporting}
 						loading={isExporting}
-						prefix={<Download size={16} />}
 					>
-						Export
+						<Download size={14} />
 					</Button>
+				</PopoverTrigger>
+			</TooltipSimple>
+			<PopoverContent align="end" className="export-menu-popover">
+				<div className="export-format">
+					<Typography.Text className="title">FORMAT</Typography.Text>
+					<RadioGroup value={exportFormat} onChange={setExportFormat}>
+						<RadioGroupItem value={ExportFormat.Csv}>csv</RadioGroupItem>
+						<RadioGroupItem value={ExportFormat.Jsonl}>jsonl</RadioGroupItem>
+					</RadioGroup>
 				</div>
-			</Popover>
-		</>
+
+				<Button
+					variant="solid"
+					color="primary"
+					className="export-button"
+					onClick={handleExport}
+					disabled={isExporting}
+					loading={isExporting}
+					prefix={<Download size={16} />}
+				>
+					Export
+				</Button>
+			</PopoverContent>
+		</Popover>
 	);
 }

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

@@ -32,15 +32,12 @@
 	}
 }
 
-// Full-bleed search bar: only top/bottom borders, square corners.
-// Per-side widths cannot be expressed via --input-border-width.
 .searchInput {
-	--input-border-radius: 0;
-
-	[data-slot='input'] {
-		border-left: none;
-		border-right: none;
-	}
+	background-color: var(--l1-background);
+	height: 40px;
+	border-radius: 0;
+	border-left: none;
+	border-right: none;
 }
 
 .section {
@@ -101,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;
 		}
 	}
@@ -144,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

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
@@ -140,10 +140,10 @@ function FieldsSelectorContent({
 					<X className={styles.closeIcon} size={16} onClick={onClose} />
 				</div>
 
-				<section className={styles.searchInput}>
+				<section>
 					<Input
+						className={styles.searchInput}
 						type="text"
-						size="large"
 						value={inputValue}
 						placeholder="Search for a field..."
 						onChange={handleInputChange}
@@ -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/FieldsSelector/__tests__/FieldsSelector.test.tsx

@@ -13,9 +13,9 @@ jest.mock('hooks/querySuggestions/useFieldKeysSuggestion', () => ({
 	})),
 }));
 
-jest.mock('@signozhq/ui/toast', () => ({
-	...jest.requireActual('@signozhq/ui/toast'),
-	toast: { success: jest.fn(), danger: jest.fn() },
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: { success: jest.fn(), error: jest.fn() },
 }));
 
 // FloatingPanel is a react-rnd/portal shell — presentation only. Render its

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { toast } from '@signozhq/ui/toast';
+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';
@@ -39,8 +39,7 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 			})
 			.catch(() => {
 				console.error(`Failed to submit ${entityName}`);
-				toast.danger(`Failed to submit ${entityName}`, {
-					action: { label: 'Dismiss' },
+				toast.error(`Failed to submit ${entityName}`, {
 					position: 'top-right',
 				});
 			})
@@ -103,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

@@ -1,6 +1,6 @@
 // Mock dependencies before imports
 import { useLocation } from 'react-router-dom';
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { logEventMock } from '__tests__/logEventMock';
@@ -14,11 +14,11 @@ jest.mock('react-router-dom', () => ({
 	useLocation: jest.fn(),
 }));
 
-jest.mock('@signozhq/ui/toast', () => ({
-	...jest.requireActual('@signozhq/ui/toast'),
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
 	toast: {
 		success: jest.fn(),
-		danger: jest.fn(),
+		error: jest.fn(),
 	},
 }));
 
@@ -50,7 +50,7 @@ describe('FeedbackModal', () => {
 			isCloudUser: false,
 		});
 		mockToast.success.mockClear();
-		mockToast.danger.mockClear();
+		mockToast.error.mockClear();
 	});
 
 	it('should render feedback modal with all tabs', () => {
@@ -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/InputWithLabel/InputWithLabel.styles.scss

@@ -4,10 +4,13 @@
 
 	border-radius: 2px 0px 0px 2px;
 
-	// The label chip and the Input share the --input-with-label-* theming
-	// contract (set by e.g. FormAlertRules, WidgetFullView) so the joined
-	// group recolors as one.
 	.label {
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 18px; /* 128.571% */
+		letter-spacing: 0.56px;
+
 		max-width: 150px;
 		min-width: 60px;
 		white-space: nowrap;
@@ -24,40 +27,66 @@
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
+		font-weight: var(--font-weight-light);
 	}
 
 	.input {
 		flex: 1;
 		min-width: 150px;
+		font-family: 'Space Mono', monospace !important;
+
+		--input-border-radius: 0px;
+		border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+		background: var(--input-with-label-background-color, var(--l2-background));
+		color: var(--input-with-label-color, var(--l2-foreground));
+
+		font-size: 12px !important;
+		line-height: 25px;
+
 		position: relative;
 
-		// Square corners: the input sits mid-group between label and close button.
-		--input-border-radius: 0px;
-		--input-border: var(--input-with-label-border-color, var(--l2-border));
-		--input-background: var(
-			--input-with-label-background-color,
-			var(--l2-background)
-		);
-		--input-foreground: var(--input-with-label-color, var(--l2-foreground));
-
 		&:hover,
-		&:focus-within {
+		&:focus {
+			z-index: 1;
+		}
+
+		.ant-select-selector {
+			position: relative;
+			border-radius: inherit;
+		}
+
+		.ant-select:hover .ant-select-selector,
+		.ant-select-focused .ant-select-selector {
 			z-index: 1;
 		}
 
 		&.input__has-label-after {
 			margin-left: -1px;
+
+			.ant-select-selector {
+				margin-left: -1px;
+				border-top-left-radius: 0;
+				border-bottom-left-radius: 0;
+			}
 		}
 
 		&.input__has-close-button {
+			.ant-select-selector {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+
 			~ .close-btn {
 				margin-left: -1px;
 			}
 		}
 
-		// The Input has no token for the native number spinners.
-		input[type='number']::-webkit-inner-spin-button,
-		input[type='number']::-webkit-outer-spin-button {
+		&::placeholder {
+			color: var(--input-with-label-color, var(--l3-foreground)) !important;
+			font-size: 12px !important;
+		}
+		&[type='number']::-webkit-inner-spin-button,
+		&[type='number']::-webkit-outer-spin-button {
 			-webkit-appearance: none;
 			-moz-appearance: none;
 			appearance: none;
@@ -81,7 +110,16 @@
 
 	&.labelAfter {
 		.input {
-			--input-border-radius: 2px 0 0 2px;
+			border-radius: 2px;
+			border: 1px solid var(--input-with-label-border-color, var(--l2-border));
+			background: var(--input-with-label-background-color, var(--l2-background));
+			border-top-right-radius: 0px;
+			border-bottom-right-radius: 0px;
+
+			.ant-select-selector {
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
 		}
 
 		.label {

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -46,23 +46,19 @@ function InputWithLabel({
 			})}
 		>
 			{!labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
-			<div
+			<Input
 				className={cx('input', {
 					'input__has-label-after': !labelAfter,
 					'input__has-close-button': !!onClose,
 				})}
-			>
-				<Input
-					placeholder={placeholder}
-					type={type}
-					value={inputValue}
-					onChange={handleChange}
-					disabled={disabled}
-					disabledTooltip={undefined}
-					name={label.toLowerCase()}
-					testId={`input-${label}`}
-				/>
-			</div>
+				placeholder={placeholder}
+				type={type}
+				value={inputValue}
+				onChange={handleChange}
+				disabled={disabled}
+				name={label.toLowerCase()}
+				data-testid={`input-${label}`}
+			/>
 			{labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			{onClose && (
 				<Button

frontend/src/components/InviteMembers/InviteMembers.module.scss

@@ -55,12 +55,26 @@
 	flex: 1 1 0;
 	min-width: 0;
 
-	// Matches the antd RolesSelect in the same row, which is forced to the
-	// same field background below.
 	--input-background: var(
 		--invite-members-field-background,
 		var(--l2-background)
 	);
+	--input-hover-background: var(
+		--invite-members-field-background,
+		var(--l2-background)
+	);
+	--input-focus-background: var(
+		--invite-members-field-background,
+		var(--l2-background)
+	);
+	--input-disabled-background: var(
+		--invite-members-field-background,
+		var(--l2-background)
+	);
+
+	input::placeholder {
+		color: var(--l3-foreground);
+	}
 }
 
 .cellRole {

frontend/src/components/InviteMembers/InviteMembers.tsx

@@ -1,4 +1,4 @@
-import { CircleAlert, Plus, SolidCheckCircle2, Trash2 } from '@signozhq/icons';
+import { CircleAlert, Plus, Trash2 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
 import { Input } from '@signozhq/ui/input';
@@ -97,7 +97,7 @@ function InviteMembers({
 									onChange={(e): void => updateEmail(row.id, e.target.value)}
 									name={`invite-email-${row.id}`}
 									autoComplete="email"
-									testId={`invite-email-${row.id}`}
+									data-testid={`invite-email-${row.id}`}
 								/>
 								{emailValidity[row.id] === false && row.email.trim() !== '' && (
 									<Typography.Text size="small" className={styles.errorText}>
@@ -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>
@@ -152,62 +149,61 @@ function InviteMembers({
 			</div>
 
 			{hasValidationErrors && (
-				<div className={styles.callout}>
-					<Callout
-						color="danger"
-						size="sm"
-						icon={<CircleAlert />}
-						testId="invite-validation-error"
-					>
-						{getValidationErrorMessage()}
-					</Callout>
-				</div>
+				<Callout
+					type="error"
+					size="small"
+					showIcon
+					icon={<CircleAlert size={12} />}
+					className={styles.callout}
+					data-testid="invite-validation-error"
+				>
+					{getValidationErrorMessage()}
+				</Callout>
 			)}
 
 			{hasResults && hasFailures && (
-				<div className={styles.callout}>
-					<Callout
-						color="danger"
-						size="sm"
-						icon={<CircleAlert />}
-						testId="invite-api-error"
-					>
-						<div className={styles.results}>
-							{hasSuccesses && (
-								<Typography.Text size="small">
-									{successResults.length} invite(s) sent successfully.
-								</Typography.Text>
-							)}
+				<Callout
+					type="error"
+					size="small"
+					showIcon
+					icon={<CircleAlert size={12} />}
+					className={styles.callout}
+					data-testid="invite-api-error"
+				>
+					<div className={styles.results}>
+						{hasSuccesses && (
 							<Typography.Text size="small">
-								{failedResults.length} invite(s) failed:
+								{successResults.length} invite(s) sent successfully.
 							</Typography.Text>
-							<ul className={styles.resultsList}>
-								{failedResults.map((result) => (
-									<li key={result.email}>
-										<Typography.Text size="small">
-											{result.email}: {result.error}
-										</Typography.Text>
-									</li>
-								))}
-							</ul>
-						</div>
-					</Callout>
-				</div>
+						)}
+						<Typography.Text size="small">
+							{failedResults.length} invite(s) failed:
+						</Typography.Text>
+						<ul className={styles.resultsList}>
+							{failedResults.map((result) => (
+								<li key={result.email}>
+									<Typography.Text size="small">
+										{result.email}: {result.error}
+									</Typography.Text>
+								</li>
+							))}
+						</ul>
+					</div>
+				</Callout>
 			)}
 
 			{hasResults && !hasFailures && hasSuccesses && (
-				<div className={styles.callout}>
-					<Callout
-						color="success"
-						size="sm"
-						icon={<SolidCheckCircle2 />}
-						testId="invite-success"
-					>
-						<Typography.Text size="small">
-							{successResults.length} invite(s) sent successfully!
-						</Typography.Text>
-					</Callout>
-				</div>
+				<Callout
+					type="success"
+					size="small"
+					showIcon
+					className={styles.callout}
+					data-testid="invite-success"
+				>
+					<Typography.Text size="small">
+						{successResults.length} invite(s) sent successfully!
+					</Typography.Text>
+				</Callout>
 			)}
 
 			{renderFooter?.({

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,14 +1,22 @@
 import { useMemo, useState } from 'react';
+import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Tooltip } from 'antd';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import { Button, Modal, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { defaultTo } from 'lodash-es';
-import { CircleHelp } from '@signozhq/icons';
+import { CircleHelp, CreditCard, X } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -33,6 +41,7 @@ function LaunchChatSupport({
 	chatMessageDisabled = false,
 }: LaunchChatSupportProps): JSX.Element | null {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
+	const { notifications } = useNotifications();
 	const {
 		trialInfo,
 		featureFlags,
@@ -110,12 +119,43 @@ function LaunchChatSupport({
 		}
 	};
 
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{
+			onSuccess: (data) => {
+				handleBillingOnSuccess(data);
+			},
+			onError: handleBillingOnError,
+		},
+	);
+
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {
 			source: `facing issues button`,
 			page: pathname,
 			...attributes,
 		});
+
+		updateCreditCard({
+			url: getBaseUrl(),
+		});
 	};
 
 	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
@@ -135,11 +175,47 @@ function LaunchChatSupport({
 				</Button>
 			</Tooltip>
 
-			<AddCreditCardModal
+			{/* Add Credit Card Modal */}
+			<Modal
+				className="add-credit-card-modal"
+				title={<span className="title">Add Credit Card for Chat Support</span>}
 				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-				onAddCreditCard={handleAddCreditCard}
-			/>
+				closable
+				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
+				destroyOnClose
+				footer={[
+					<Button
+						key="cancel"
+						onClick={(): void => setIsAddCreditCardModalOpen(false)}
+						className="cancel-btn"
+						icon={<X size={16} />}
+					>
+						Cancel
+					</Button>,
+					<AuthZTooltip
+						key="submit"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
+					>
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
+				]}
+			>
+				<Typography.Text className="add-credit-card-text">
+					You&apos;re currently on <span className="highlight-text">Trial plan</span>
+					. Add a credit card to access SigNoz chat support to your workspace.
+				</Typography.Text>
+			</Modal>
 		</div>
 	) : null;
 }

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

@@ -158,14 +158,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 {
@@ -216,4 +239,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,12 +6,25 @@
 	gap: 8px;
 }
 
+.tooltipContent {
+	--tooltip-z-index: 2100;
+}
+
+.dropdownContent {
+	--dropdown-menu-content-z-index: 2100;
+}
+
 .leftSection {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 }
 
+.divider {
+	height: 16px;
+	margin: 0;
+}
+
 .timestamp {
 	font-family: 'Geist Mono', monospace;
 	font-size: var(--font-size-sm);

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

@@ -1,11 +1,11 @@
 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/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import {
 	ChevronDown,
@@ -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(),
 		},
 	];
@@ -76,7 +76,7 @@ function LogDetailsHeader({
 	return (
 		<div className={styles.header} data-log-detail-ignore="true">
 			<div className={styles.leftSection}>
-				<Divider orientation="vertical" height={16} spacing={0} />
+				<Divider type="vertical" className={styles.divider} />
 				<Typography.Text
 					className={styles.timestamp}
 					data-testid="log-details-header-timestamp"
@@ -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

@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/ui/toast';
+import { toast } from '@signozhq/ui/sonner';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { render, screen, userEvent } from 'tests/test-utils';
 import { ILog } from 'types/api/logs/log';
@@ -7,8 +7,8 @@ import LogDetail from '..';
 import { VIEW_TYPES } from '../constants';
 import { LogDetailProps } from '../LogDetail.interfaces';
 
-jest.mock('@signozhq/ui/toast', () => ({
-	toast: { success: jest.fn(), danger: jest.fn() },
+jest.mock('@signozhq/ui/sonner', () => ({
+	toast: { success: jest.fn(), error: jest.fn() },
 }));
 
 // DataViewer pulls in react-json-tree (ESM) + Monaco; mock it (as trace's tests
@@ -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 QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
@@ -86,8 +86,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;
 			}
@@ -316,12 +315,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={[
@@ -367,12 +363,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/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -199,23 +199,49 @@
 					}
 				}
 
-				// Stepper group: the Input sits seamlessly between the -/+
-				// periscope-btns (26px tall, l1-border).
 				.max-lines-per-row-input {
 					display: flex;
 
-					--input-height: 26px;
-					--input-border-radius: 0;
-					--input-border: var(--l1-border);
-					--input-border-width: 1px 0;
+					.ant-input-number-handler-wrap {
+						display: none;
+					}
 
-					[data-testid='max-lines-per-row-field'] {
+					.ant-input-number {
 						min-width: 36px;
 						width: auto;
+						border-right: none;
+						border-left: none;
+						border-top: 1px solid var(--l1-border);
+						border-bottom: 1px solid var(--l1-border);
+						text-align: center;
+						height: 26px;
+						border-radius: 0;
 
-						// No Input token for text alignment.
+						&:active,
+						&:focus {
+							border: none;
+							box-shadow: none;
+						}
+					}
+
+					.ant-input-number-focused {
+						box-shadow: none !important;
+					}
+
+					.ant-input-number-input-wrap {
 						input {
 							text-align: center;
+							font-size: 13px;
+
+							&:active,
+							&:focus {
+								border: none;
+							}
+						}
+
+						&:active,
+						&:focus {
+							border: none;
 						}
 					}
 

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Popover, Tooltip } from 'antd';
+import { Button, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { LogViewMode } from 'container/OptionsMenu/types';
@@ -208,14 +207,11 @@ function OptionsMenu({
 										{' '}
 										<Minus size={12} />{' '}
 									</button>
-									<Input.Number
+									<InputNumber
 										min={1}
 										max={10}
 										value={maxLinesPerRow}
 										onChange={handleLinesPerRowChange}
-										controls={false}
-										noFocusRing
-										testId="max-lines-per-row-field"
 									/>
 									<button
 										type="button"

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 {
@@ -184,8 +201,8 @@
 }
 
 .helpContent {
-	// The popover shell carries no padding of its own, so the content owns it.
-	padding: var(--spacing-8);
+	width: 280px;
+	max-height: 320px;
 	overflow-y: auto;
 	@include custom-scrollbar;
 }

frontend/src/components/MarkdownEditor/MarkdownHelp.tsx

@@ -1,6 +1,6 @@
 import { CircleHelp } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Popover } from '@signozhq/ui/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
 import { Typography } from '@signozhq/ui/typography';
 
 import { MARKDOWN_HELP_ITEMS } from './constants';
@@ -9,28 +9,20 @@ import styles from './MarkdownEditor.module.scss';
 
 function MarkdownHelp(): JSX.Element {
 	return (
-		<Popover
-			nativeButton
-			side="bottom"
-			align="end"
-			width={280}
-			maxHeight={320}
-			aria-label="Markdown syntax"
-			trigger={
+		<Popover>
+			<PopoverTrigger asChild>
 				<Button
 					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>
-			}
-		>
-			<div className={styles.helpContent}>
+			</PopoverTrigger>
+			<PopoverContent align="end" className={styles.helpContent}>
 				<Typography.Text className={styles.helpTitle}>
 					Markdown syntax
 				</Typography.Text>
@@ -44,7 +36,7 @@ function MarkdownHelp(): JSX.Element {
 						</div>
 					))}
 				</dl>
-			</div>
+			</PopoverContent>
 		</Popover>
 	);
 }

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

@@ -86,6 +86,18 @@
 		border: none !important;
 		box-shadow: none !important;
 	}
+
+	.member-status-cell {
+		[data-slot='badge'] {
+			padding: var(--padding-1) var(--padding-2);
+			align-items: center;
+			font-size: var(--uppercase-small-500-font-size);
+			font-weight: var(--uppercase-small-500-font-weight);
+			line-height: 100%;
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+		}
+	}
 }
 .member-name-email-cell {
 	display: flex;

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 { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
@@ -758,14 +758,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">
 							<Typography.Text truncate={1} className="option-label-text">
@@ -1600,7 +1595,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>
@@ -1978,9 +1973,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>
 				);
 			}
 
@@ -2016,51 +2015,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>
 	);
 };