fix: add dropdown to list

chore: self review comments
fix: lint
2026-05-22 01:40:32 +01:00 · 2026-05-22 01:40:15 +05:30 · 2026-05-22 01:32:54 +05:30 · 2026-05-21 22:09:24 +05:30 · 2026-05-21 20:24:03 +05:30 · 2026-05-21 18:05:21 +05:30
290 changed files with 1881 additions and 9154 deletions
--- a/INPUT_MIGRATION_AFFECTED.md
+++ b/INPUT_MIGRATION_AFFECTED.md
@@ -1,315 +0,0 @@
-# antd `Input` → `@signozhq/ui/input` Migration — Affected Files & Verification
-
-## What changed
-
-For each file listed below, the import was rewritten:
-
-```diff
- import { Input, ...rest } from 'antd';
-+ import { Input } from '@signozhq/ui/input';
-+ import { ...rest } from 'antd';
-```
-
-Only the plain antd `<Input>` component was migrated. The following are **not** migrated and continue to use antd:
-
- `Input.TextArea` / `Input.Password` / `Input.Search` / `Input.Group`
- `InputNumber`
- `<Input>` with `addonBefore`, `addonAfter`, `allowClear`, `bordered`, `status="error"`, or `size="small|middle|large"` props
- `InputRef` (typed refs)
-
-No JSX usages of `<Input>` were touched — only the import source was swapped. The component contract (`value`, `onChange`, `placeholder`, `disabled`, `type`, `prefix`, `suffix`, etc.) matches between the two libraries for the cases migrated here.
-
---
-
-## Reverted after TypeScript errors — 4 files (kept on antd, marked with TODO)
-
-These files were initially migrated, then reverted because `@signozhq/ui` `Input` does not expose the props they need. Each one carries a `TODO(@signozhq/ui-input)` comment above the antd import.
-
-| File | Blocker |
-|---|---|
-| `frontend/src/container/MetricsExplorer/Inspect/MetricTimeAggregation.tsx` | Uses `onWheel` on `<Input type="number">` to blur on scroll. Not exposed on `@signozhq/ui/input`. |
-| `frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx` | URL `<Input>` uses `spellCheck="false"` (along with `autoCorrect`, `autoCapitalize`). `spellCheck` not exposed. |
-| `frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/CSVInput.tsx` | Spreads antd `InputProps` (`{...otherProps}`) onto `<Input>`. `size: SizeType` clashes with `@signozhq/ui` Input's numeric `size`. |
-| `frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts` | The `styled(Input)` wrapper is consumed in `Duration/index.tsx` with `addonAfter="ms"`. Not exposed. |
-
---
-
-## Migrated files — 51 total
-
-Grouped by the route/page that renders them. Visit each route after the migration and confirm the input still:
-
-1. Renders with the expected layout/spacing
-2. Accepts keyboard input and reflects controlled `value`
-3. Fires `onChange` correctly (search filters, form submissions still work)
-4. Shows placeholder text
-5. Disables/enables as expected
-6. Form validation (`Form.Item rules`) still shows errors
-
-### Alerts — Create / Edit Alert (`/alerts/new`, `/alerts/edit`)
-
-| File | Where the input shows up |
-|---|---|
-| `frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx` | Threshold name + threshold value + recovery threshold inputs in the Alert Condition card |
-| `frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx` | Advanced Options collapse inside Evaluation Settings |
-| `frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx` | Evaluation Window popover (numeric value + unit) |
-| `frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.tsx` | HH:MM:SS time input shared in Evaluation Settings |
-| `frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx` | Re-notification interval input |
-
-### Alert Channels (`/settings/channels/new`, `/settings/channels/edit/:channelId`)
-
-| File | Where the input shows up |
-|---|---|
-| `frontend/src/container/FormAlertChannels/index.tsx` | Channel name + send-resolved / common fields |
-| `frontend/src/container/FormAlertChannels/Settings/Email.tsx` | "To" email field of the Email channel form |
-| `frontend/src/container/FormAlertChannels/Settings/Webhook.tsx` | Webhook URL / username / password fields |
-
-### Routing Policies (`/settings/channels` → routing policies tab)
-
-| File | Where the input shows up |
-|---|---|
-| `frontend/src/container/RoutingPolicies/RoutingPolicies.tsx` | Search box on the routing policies list |
-
-### Organization Settings (`/settings/org-settings`)
-
-| File | Where the input shows up |
-|---|---|
-| `frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx` | Email + name fields in the "Invite team members" form (used by the invite-members flow) |
-
-### Members (`/settings/members`)
-
-_None directly migrated this round_ — already on `@signozhq/ui/input`.
-
-### Planned Downtime (`/settings/channels` → Planned Downtime, or `/planned-downtime` depending on plan)
-
-| File | Where the input shows up |
-|---|---|
-| `frontend/src/container/PlannedDowntime/PlannedDowntime.tsx` | "Search downtime" text input above the list |
-
-### Licenses (`/licenses`)
-
-| File | Where the input shows up |
-|---|---|
-| `frontend/src/container/Licenses/ApplyLicenseForm.tsx` | License key text input on the apply-license form |
-
-### Dashboards — list, detail, widget editor
-
-| File | Where the input shows up | Route |
-|---|---|---|
-| `frontend/src/container/ListOfDashboard/DashboardsList.tsx` | Main "Search by name, description, or tags…" input on the dashboards list | `/dashboard` |
-| `frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx` | "Request dashboard" modal input | `/dashboard` |
-| `frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx` | Templates modal search input | `/dashboard` (open templates) |
-| `frontend/src/container/DashboardContainer/DashboardDescription/index.tsx` | Dashboard description editor name field | `/dashboard/:dashboardId` |
-| `frontend/src/container/GridCardLayout/GridCardLayout.tsx` | Section / row name inline edit | `/dashboard/:dashboardId` |
-| `frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx` | Chart manager search input | `/dashboard/:dashboardId` |
-| `frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx` | Column-config inputs in the widget editor's left panel | `/dashboard/:dashboardId/:widgetId` |
-
-### Logs (`/logs/logs-explorer`, `/logs/pipelines`)
-
-| File | Where the input shows up | Route |
-|---|---|---|
-| `frontend/src/container/LogsFilters/index.tsx` | Logs filter sidebar search input | `/logs/logs-explorer` |
-| `frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx` | Query-builder field value inputs in the legacy logs search | `/logs/logs-explorer` |
-| `frontend/src/container/LogDetailedView/Overview.tsx` | Log details drawer Overview tab inputs (severity / body filters) | `/logs/logs-explorer` (open a log) |
-| `frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx` | Add-new-processor form fields | `/logs/pipelines` |
-| `frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx` | JSON-flattening processor form | `/logs/pipelines` |
-| `frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/NameInput.tsx` | "Pipeline name" field in the new-pipeline form | `/logs/pipelines` |
-
-### Traces (`/traces-explorer`, trace details, funnels)
-
-| File | Where the input shows up | Route |
-|---|---|---|
-| `frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx` | Tag-key autocomplete input in the legacy trace search | `/trace` |
-| `frontend/src/container/Trace/TraceGraphFilter/index.tsx` | Trace-graph filter search/value input | `/trace` |
-| `frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx` | "Search resource attributes" input in the span details drawer | `/traces-explorer` → open span |
-| `frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx` | Span details drawer → Attributes search | `/traces-explorer` → open span |
-| `frontend/src/container/SpanDetailsDrawer/Events/Events.tsx` | Span details drawer → Events search | `/traces-explorer` → open span |
-| `frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx` | "Add span to funnel" modal name input (legacy waterfall) | `/trace/:id` |
-| `frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentilePanel.tsx` | Percentile filter input in span details v3 | `/trace/:id` (v3) |
-| `frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx` | "Add span to funnel" modal in v3 waterfall | `/trace/:id` (v3) |
-| `frontend/src/pages/TracesFunnels/components/SearchBar/SearchBar.tsx` | Search box on the funnels list page | `/traces/funnels` |
-| `frontend/src/pages/TracesFunnels/components/RenameFunnel/RenameFunnel.tsx` | Rename-funnel modal input | `/traces/funnels` |
-
-### Saved Views (`/logs/saved-views`, `/traces/saved-views`)
-
-| File | Where the input shows up |
-|---|---|
-| `frontend/src/components/ExplorerCard/SaveViewWithName.tsx` | "Save view with name" inline input on the explorer save flow |
-| `frontend/src/container/ExplorerOptions/ExplorerOptions.tsx` | "e.g. External http method view" — name input in the Save View modal across explorers |
-| `frontend/src/pages/SaveView/index.tsx` | Rename saved view input on the saved-views list |
-
-### Metrics Explorer (`/metrics-explorer`)
-
-| File | Where the input shows up |
-|---|---|
-| `frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx` | Metadata edit inputs in metric details |
-
-### Messaging Queues (`/messaging-queues`)
-
-| File | Where the input shows up |
-|---|---|
-| `frontend/src/pages/MessagingQueues/MQDetails/DropRateView/EvaluationTimeSelector.tsx` | Evaluation time selector inside Drop Rate view |
-
-### Integrations (`/integrations`)
-
-| File | Where the input shows up |
-|---|---|
-| `frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx` | Connection-params text fields in AWS cloud integration setup |
-
-### Ingestion Settings (`/settings/ingestion-settings`)
-
-| File | Where the input shows up |
-|---|---|
-| `frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx` | "Search for ingestion key…" + add/edit ingestion-key name fields. `<InputNumber>` usages in this file still come from antd. |
-
-### Onboarding (`/get-started/*`, `/onboarding`)
-
-| File | Where the input shows up |
-|---|---|
-| `frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx` | Custom data source name input |
-| `frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx` | Environment details (env name / app name) inputs |
-
-### Other shared components (rendered on multiple routes)
-
-| File | Where it shows up |
-|---|---|
-| `frontend/src/components/CustomTimePicker/TimezonePicker.tsx` | Timezone search input inside the global custom time picker — visible on dashboards, logs, traces, alerts header |
-| `frontend/src/components/InputWithLabel/InputWithLabel.tsx` | Generic labeled-input wrapper — used in invite flows, threshold editing, etc. |
-| `frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx` | "Search filters" input inside the Quick Filters settings drawer (logs/traces/infra/metrics quick-filters) |
-| `frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx` | Search box at the top of each checkbox-style quick filter |
-| `frontend/src/container/QueryTable/Drilldown/BreakoutOptions.tsx` | "Breakout by" attribute search input in the query-table drilldown menu (dashboards, alerts) |
-| `frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx` | "Search…" input inside the "Add column" picker in the logs format options menu (rendered on `/logs/logs-explorer`). `<InputNumber>` for max-line config still comes from antd. |
-
-### `styled(Input)` wrappers — `.ts` style files
-
-These wrap the now-`@signozhq/ui` `Input` with styled-components. CSS selectors target the descendant `<input>` element so behavior should be unchanged, but visually re-verify on the routes below.
-
-| File | Verification route |
-|---|---|
-| `frontend/src/container/Version/styles.ts` | Status page `/status` — confirm input width = 183px |
-
-> `Trace/Filters/Panel/PanelBody/Duration/styles.ts` was attempted and reverted — see the "Reverted" section at the top.
-
---
-
-## Smoke-test checklist
-
-A short loop that covers the bulk of what changed:
-
-1. **Alerts → New alert** (`/alerts/new`) — add a threshold, type a name + value, switch evaluation window unit, expand Advanced Options, set time input, save.
-2. **Channels → New channel** (`/settings/channels/new`) — pick Email, fill the "to" field; pick Webhook, fill URL.
-3. **Dashboards** — open a dashboard, edit a panel (`/dashboard/:dashboardId/:widgetId`) → set context-link label/URL/params, edit explorer columns. Then on the list page (`/dashboard`) open the Templates modal and the "Request dashboard" modal.
-4. **Logs Explorer** (`/logs/logs-explorer`) — type into the sidebar filter search, open a log row → Overview tab.
-5. **Logs Pipelines** (`/logs/pipelines`) — open "Add new pipeline" and "Add new processor", switch processor type to JSON Flattening / CSV.
-6. **Traces Explorer** (`/traces-explorer`) — open a span, search inside Attributes + Events tabs.
-7. **Trace details V3** (`/trace/:id`) — open the percentile panel, open "Add span to funnel".
-8. **Funnels list** (`/traces/funnels`) — type in the search bar, rename a funnel.
-9. **Saved Views** (`/logs/saved-views`, `/traces/saved-views`) — rename a view; from an explorer, "Save view as…".
-10. **Metrics Explorer** (`/metrics-explorer/explorer`) — open Inspect → time aggregation; open metric details → Metadata tab.
-11. **Integrations → AWS** — open AWS cloud integration → Region form.
-12. **Onboarding** (`/get-started`) — pick "Custom" data source, fill env/app names.
-13. **Custom time picker** — open the global time picker anywhere, switch to "Custom" → type in the timezone search.
-14. **Quick filters** — on `/logs/logs-explorer` or `/traces-explorer`, open the quick-filter settings drawer and search inside.
-15. **Org settings → Invite members** (`/settings/org-settings`) — open invite flow, fill email + name.
-16. **Planned downtime** — search the list.
-17. **Licenses** (`/licenses`) — paste a license key in the input.
-
-For each: confirm typing, controlled value, placeholder, disabled state, and form-validation error display all behave the same as before.
-
---
-
-## Skipped (still on antd) — 61 files
-
-After the migration, 61 files still import `Input` from antd. None of them use a plain `<Input>` that can be migrated — each one is kept on antd for one of the reasons below.
-
-Kept on antd because they use features the `@signozhq/ui` `Input` does not expose. No action required unless these are migrated separately later.
-
-**Use `Input.TextArea` / `Input.Password` / `Input.Search` / `Input.Group`:**
-`CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadence.tsx`,
-`CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadenceDetails.tsx`,
-`CreateAlertV2/NotificationSettings/NotificationMessage.tsx`,
-`QueryBuilder/components/Formula/Formula.tsx`,
-`OptionsMenu/AddColumnField/index.tsx`,
-`LogsSearchFilter/index.tsx`,
-`RoutingPolicies/RoutingPolicyDetails.tsx`,
-`DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx`,
-`DashboardContainer/DashboardSettings/General/index.tsx`,
-`FormAlertChannels/Settings/MsTeams.tsx`,
-`MySettings/UserInfo/index.tsx`,
-`Login/index.tsx`,
-`PipelinePage/PipelineListsView/AddNewPipeline/FormFields/DescriptionTextArea.tsx`,
-`components/HeaderRightSection/FeedbackModal.tsx`,
-`pages/TracesFunnelDetails/components/FunnelConfiguration/AddFunnelStepDetailsModal.tsx`,
-`pages/TracesFunnelDetails/components/FunnelConfiguration/AddFunnelDescriptionModal.tsx`,
-`pages/TracesExplorer/Filter/SectionContent.tsx`.
-
-**Destructure `const { TextArea/Search } = Input`:**
-`Trace/Filters/Panel/PanelBody/CommonCheckBox/index.tsx`,
-`Trace/Filters/Panel/PanelBody/SearchTraceID/index.tsx`,
-`Trace/Search/styles.ts`,
-`ListAlertRules/ListAlert.tsx`,
-`FormAlertRules/styles.ts`,
-`FormAlertChannels/Settings/Opsgenie.tsx`,
-`FormAlertChannels/Settings/Pager.tsx`,
-`FormAlertChannels/Settings/Slack.tsx`,
-`NewWidget/RightContainer/SettingSections/GeneralSettingsSection/GeneralSettingsSection.tsx`,
-`AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx`.
-
-**`InputNumber` co-used:**
-`NewWidget/RightContainer/Threshold/Threshold.tsx`,
-`components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx`.
-
-**Typed `InputRef`:**
-`DashboardContainer/DashboardVariablesSelection/TextboxVariableInput.tsx`,
-`NewWidget/RightContainer/SettingSections/GeneralSettingsSection/GeneralSettingsSection.tsx`,
-`PipelinePage/components/TagInput.tsx`,
-`components/OverflowInputToolTip/OverflowInputToolTip.tsx`,
-`components/CustomTimePicker/CustomTimePicker.tsx`,
-`components/Input/index.tsx`,
-`pages/AlertDetails/AlertHeader/ActionButtons/RenameModal.tsx`,
-`LogsSearchFilter/index.tsx`.
-
-**Use `addonBefore` / `addonAfter`:**
-`QueryBuilder/components/Query/Query.tsx`,
-`QueryBuilder/components/Formula/Formula.tsx`,
-`GridCardLayout/GridCard/FullView/index.tsx`,
-`GridCardLayout/WidgetHeader/index.tsx`,
-`OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.tsx`,
-`NewWidget/LeftContainer/QuerySection/QueryBuilder/ClickHouse/query.tsx`,
-`NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query.tsx`,
-`components/Input/index.tsx`,
-`pages/TracesExplorer/Filter/DurationSection.tsx`.
-
-**Use `allowClear`:**
-`Trace/Search/AllTags/Tag/TagKey.tsx` _(migrated — `allowClear` was only used elsewhere)_,
-`ServiceTable/Filter/FilterDropdown.tsx`,
-`ServiceApplication/Filter/FilterDropdown.tsx`,
-`LogsSearchFilter/index.tsx`,
-`MetricsExplorer/MetricDetails/AllAttributesValue.tsx`,
-`GridCardLayout/GridCard/FullView/index.tsx`,
-`NewWidget/RightContainer/SettingSections/GeneralSettingsSection/GeneralSettingsSection.tsx`,
-`AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx`,
-`AllError/index.tsx`,
-`PipelinePage/Layouts/Pipeline/PipelinesSearchSection.tsx`,
-`lib/uPlotV2/components/Legend/Legend.tsx`.
-
-**Use `bordered`, `status`, or `size="small|middle|large"`:**
-`OrganizationSettings/DisplayName/index.tsx` (size, status),
-`FormAlertRules/labels/index.tsx` (bordered),
-`DashboardContainer/DashboardVariablesSelection/TextboxVariableInput.tsx` (bordered),
-`MetricsExplorer/MetricDetails/AllAttributes.tsx` (size),
-`MetricsExplorer/MetricDetails/AllAttributesValue.tsx` (size),
-`AllError/index.tsx` (size),
-`components/CustomTimePicker/CustomTimePicker.tsx` (status),
-`QueryBuilder/components/Query/Query.tsx` (size),
-`QueryBuilder/components/Formula/Formula.tsx` (size),
-`NewWidget/LeftContainer/QuerySection/QueryBuilder/ClickHouse/query.tsx` (size),
-`NewWidget/LeftContainer/QuerySection/QueryBuilder/promQL/query.tsx` (size).
-
-**`styled(Input)` in `.ts` style files (DOM structure differs):**
-`Trace/Filters/Panel/PanelBody/Duration/styles.ts`,
-`Version/styles.ts`.
-
-**Aliased-only `Input as X` (no plain `<Input>`):**
-`ResetPassword/index.tsx`.
-
-**Already on `@signozhq/ui/input`** (no diff this round): Retention, AuthnOIDC/SAML/Google + their helper sections (ClaimMapping, RoleMapping, AttributeMapping, DomainMapping), ForgotPassword, IntegrationsHeader, OnboardingQuestionaire (Invite + AboutSigNoz), AIAssistant/ChatInput, ServiceAccountsSettings, MembersSettings, ServiceAccountDrawer (EditKey + AddKey), InviteMembersModal, EditMemberDrawer, RolesSettings + CreateRoleModal, SignUp, plus the rest of the `@signozhq/ui/input` adopters listed in `git grep "@signozhq/ui/input"`.
--- a/deploy/docker-swarm/docker-compose.ha.yaml
+++ b/deploy/docker-swarm/docker-compose.ha.yaml
@@ -190,7 +190,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:v0.125.1
+    image: signoz/signoz:v0.125.0
    ports:
      - "8080:8080" # signoz port
    #   - "6060:6060"     # pprof port
--- a/deploy/docker-swarm/docker-compose.yaml
+++ b/deploy/docker-swarm/docker-compose.yaml
@@ -117,7 +117,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:v0.125.1
+    image: signoz/signoz:v0.125.0
    ports:
      - "8080:8080" # signoz port
    volumes:
--- a/deploy/docker/docker-compose.ha.yaml
+++ b/deploy/docker/docker-compose.ha.yaml
@@ -181,7 +181,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.125.1}
+    image: signoz/signoz:${VERSION:-v0.125.0}
    container_name: signoz
    ports:
      - "8080:8080" # signoz port
--- a/deploy/docker/docker-compose.yaml
+++ b/deploy/docker/docker-compose.yaml
@@ -109,7 +109,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.125.1}
+    image: signoz/signoz:${VERSION:-v0.125.0}
    container_name: signoz
    ports:
      - "8080:8080" # signoz port
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -2342,8 +2342,6 @@ components:
          type: boolean
        org_id:
          type: string
-        source:
-          $ref: '#/components/schemas/DashboardtypesSource'
        updatedAt:
          format: date-time
          type: string
@@ -2373,12 +2371,6 @@ components:
        timeRangeEnabled:
          type: boolean
      type: object
-    DashboardtypesSource:
-      enum:
-      - user
-      - system
-      - integration
-      type: object
    DashboardtypesStorableDashboardData:
      additionalProperties: {}
      type: object
--- a/dropdown-test.md
+++ b/dropdown-test.md
@@ -0,0 +1,101 @@
+ere's the full guide. Dev server is at http://localhost:3301. The components are listed by what's easiest to find — top items  
+ don't need any setup, bottom items need data (a dashboard with widgets, an alert, a funnel).
+
+1. Sidebar — Help & Settings menus
+
+File: src/container/SideNav/SideNav.tsx  
+ Where to look: the left sidebar, scroll to the very bottom. Two icons sit there: a ? icon (Help & Support) and a gear icon  
+ (Settings).  
+ Click each → a menu pops up to the right.
+Verify: items render with icons, divider lines between groups, click outside closes. Extra test: while the menu is open, cmd-click
+(mac) / ctrl-click (linux) the "Shortcuts" item — should open shortcuts in a new tab, not navigate the current one.  
+ URL: any page works, e.g. http://localhost:3301/
+
+2. Alerts list — row "…" action menu
+
+File: src/components/DropDown/DropDown.tsx (the shared wrapper, consumed here)  
+ Where to look: the "Action" column at the right of each alert row — a three-dot (…) icon.
+Click it → menu with Enable/Disable, Edit, etc.  
+ URL: http://localhost:3301/alerts
+
+3. Alerts list — column-filter button
+
+File: src/components/ResizeTable/DynamicColumnTable.tsx  
+ Where to look: the top-right of the alerts table — a sliders/filter icon ("additional filters" button).  
+ Click → list of column names with a Switch next to each → toggle to hide/show columns.  
+ URL: http://localhost:3301/alerts
+
+4. Alert detail page — action menu in header
+
+File: src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx  
+ Where to look: click any alert from the list to open detail page. Top-right of the header: an ellipsis (…) icon next to the  
+ enable/disable toggle.  
+ Click → Rename / Duplicate / Delete (Delete is red — that's the new danger: true styling).
+URL: alerts list → click any alert.
+
+5. Dashboards list — "New dashboard" split menu
+
+File: src/container/ListOfDashboard/DashboardsList.tsx  
+ Where to look: top-right of the dashboards page — a blue "New dashboard" button (or in the empty state, a "New Dashboard" button in
+the center).  
+ Click → menu with Create dashboard / Import JSON / View templates.
+URL: http://localhost:3301/dashboard
+
+6. Widget kebab menu (on a dashboard panel)
+
+File: src/container/GridCardLayout/WidgetHeader/index.tsx  
+ Where to look: open any dashboard with at least one panel. Hover over a panel — top-right of the panel header shows a
+vertical-ellipsis icon (⋮).  
+ Click (note: was hover-trigger before, now click — this is the intentional behavior change) → View / Edit / Clone / Create Alert /
+Download / Delete.  
+ URL: http://localhost:3301/dashboard/<dashboardId> — open any dashboard from list.
+
+7. Widget builder — Columns add panel
+
+File: src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx  
+ Where to look: from a dashboard, click "+ Add panel" (or edit an existing panel). In the panel builder, in the left "Columns"
+section, there's a plus (+) button next to the column chips.  
+ Click → a panel pops up above the button with a Search input + scrollable list of attribute keys to add as columns.  
+ URL: http://localhost:3301/dashboard/<dashboardId>/new (a dashboard must already exist)
+
+8. Widget builder — Threshold color picker
+
+File: src/container/NewWidget/RightContainer/Threshold/ColorSelector.tsx  
+ Where to look: same widget builder, scroll the right-side config panel to "Thresholds" → click "+ Add threshold" → on the new  
+ threshold row, click the colored swatch button.  
+ Click → Red / Orange / Green / Blue / Custom Color (Custom Color opens a nested color picker on hover).
+
+9. Funnel step — Latency pointer picker
+
+File: src/pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelStep.tsx  
+ Where to look: Traces Funnels page → open or create a funnel → expand a step's config. At the bottom of the step there's "Latency
+pointer" with a dropdown trigger showing the current pointer + a down-chevron.  
+ Click → list of pointer options with radio dots (this is the new selection UI — was previously a background highlight).  
+ URL: http://localhost:3301/traces-funnels
+
+10. Download button (Excel / CSV)
+
+File: src/container/Download/Download.tsx  
+ Where to look (easiest): any APM service detail page → scroll to the Top Operations table → top-right has a "Download" link with a
+cloud icon.  
+ Click → Excel / CSV options.
+URL: http://localhost:3301/services/<service-name> — pick any service.  
+ Also rendered (same component) on: Logs Explorer toolbar (/logs/logs-explorer) and any explorer page rendering a QueryTable.
+
+11. Explorer card — saved view delete
+
+File: src/components/ExplorerCard/ExplorerCard.tsx  
+ Where to look: currently not visible in the UI — the parent component sets showSaveView = false (see ExplorerCard.tsx:165). The
+migration is correct but you won't see it unless that flag is flipped. Skip this one.
+
+---
+
+Quick verification priority
+
+If you only have time for a few, hit these — they cover all three migration patterns (Simple, compositional-controlled,
+compositional-with-cmd-click):
+
+1. Sidebar Help menu + cmd-click on "Shortcuts" (covers SideNav compositional + onOpenChange + native MouseEvent handling)
+2. Widget kebab ⋮ on a dashboard panel (covers hover→click behavior change)
+3. Column "+" panel in widget builder (covers controlled-open + custom content compositional API)
+4. Any alert row … on /alerts (covers the shared DropDown wrapper)
--- a/ee/modules/dashboard/impldashboard/module.go
+++ b/ee/modules/dashboard/impldashboard/module.go
@@ -49,14 +49,6 @@ func (module *module) CreatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}

-	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
-	if err != nil {
-		return err
-	}
-	if err := dashboard.ErrIfNotPublishable(); err != nil {
-		return err
-	}
-
 	storablePublicDashboard, err := module.store.GetPublic(ctx, publicDashboard.DashboardID.StringValue())
 	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
 		return err
@@ -137,14 +129,6 @@ func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}

-	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
-	if err != nil {
-		return err
-	}
-	if err := dashboard.ErrIfNotPublishable(); err != nil {
-		return err
-	}
-
 	return module.store.UpdatePublic(ctx, dashboardtypes.NewStorablePublicDashboardFromPublicDashboard(publicDashboard))
 }

@@ -154,10 +138,6 @@ func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.U
 		return err
 	}

-	if err := dashboard.ErrIfNotDeletable(); err != nil {
-		return err
-	}
-
 	if dashboard.Locked {
 		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "dashboard is locked, please unlock the dashboard to be delete it")
 	}
@@ -188,14 +168,6 @@ func (module *module) DeletePublic(ctx context.Context, orgID valuer.UUID, dashb
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}

-	dashboard, err := module.Get(ctx, orgID, dashboardID)
-	if err != nil {
-		return err
-	}
-	if err := dashboard.ErrIfNotPublishable(); err != nil {
-		return err
-	}
-
 	err = module.store.DeletePublic(ctx, dashboardID.StringValue())
 	if err != nil {
 		return err
--- a/frontend/plugins/rules/no-antd-components.mjs
+++ b/frontend/plugins/rules/no-antd-components.mjs
@@ -15,7 +15,8 @@

 const BANNED_COMPONENTS = {
 	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
-	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
+	Dropdown:
+		'Use @signozhq/ui DropdownMenuSimple (or the composable DropdownMenu primitives) from @signozhq/ui/dropdown-menu instead of antd Dropdown.',
 };

 export default {
--- a/frontend/src/AppRoutes/tests/Private.test.tsx
+++ b/frontend/src/AppRoutes/tests/Private.test.tsx
@@ -166,7 +166,6 @@ function createMockAppContext(
 		userPreferences: [],
 		hostsData: null,
 		isLoggedIn: true,
-		isPreflightLoading: false,
 		org: [{ createdAt: 0, id: 'org-id', displayName: 'Test Org' }],
 		isFetchingUser: false,
 		isFetchingActiveLicense: false,
--- a/frontend/src/AppRoutes/index.tsx
+++ b/frontend/src/AppRoutes/index.tsx
@@ -59,7 +59,6 @@ function App(): JSX.Element {
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
-		isPreflightLoading,
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
@@ -387,10 +386,6 @@ function App(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isCloudUser, isEnterpriseSelfHostedUser]);

-	if (isPreflightLoading) {
-		return <Spinner tip="Loading..." />;
-	}
-
 	// if the user is in logged in state
 	if (isLoggedInState) {
 		// if the setup calls are loading then return a spinner
--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/frontend/src/AppRoutes/pageComponents.ts
@@ -47,6 +47,7 @@ export const TracesFunnels = Loadable(
 		import(/* webpackChunkName: "Traces Funnels" */ 'pages/TracesModulePage'),
 );
 export const TracesFunnelDetails = Loadable(
+	// eslint-disable-next-line sonarjs/no-identical-functions
 	() =>
 		import(
 			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesModulePage'
@@ -312,6 +313,13 @@ export const PublicDashboardPage = Loadable(
 		),
 );

+export const AlertTypeSelectionPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "Alert Type Selection Page" */ 'pages/AlertTypeSelection'
+		),
+);
+
 export const MeterExplorerPage = Loadable(
 	() =>
 		import(/* webpackChunkName: "Meter Explorer Page" */ 'pages/MeterExplorer'),
--- a/frontend/src/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -5,6 +5,7 @@ import {
 	AIAssistantPage,
 	AlertHistory,
 	AlertOverview,
+	AlertTypeSelectionPage,
 	AllAlertChannels,
 	AllErrors,
 	ApiMonitoring,
@@ -212,6 +213,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'LIST_ALL_ALERT',
 	},
+	{
+		path: ROUTES.ALERT_TYPE_SELECTION,
+		exact: true,
+		component: AlertTypeSelectionPage,
+		isPrivate: true,
+		key: 'ALERT_TYPE_SELECTION',
+	},
 	{
 		path: ROUTES.ALERTS_NEW,
 		exact: true,
@@ -525,6 +533,18 @@ export const LIST_LICENSES: AppRoutes = {
 	key: 'LIST_LICENSES',
 };

+export const oldRoutes = [
+	'/pipelines',
+	'/logs-explorer',
+	'/logs-explorer/live',
+	'/logs-save-views',
+	'/traces-save-views',
+	'/settings/access-tokens',
+	'/settings/api-keys',
+	'/messaging-queues',
+	'/alerts/edit',
+];
+
 export const oldNewRoutesMapping: Record<string, string> = {
 	'/pipelines': '/logs/pipelines',
 	'/logs-explorer': '/logs/logs-explorer',
@@ -535,9 +555,7 @@ export const oldNewRoutesMapping: Record<string, string> = {
 	'/settings/api-keys': '/settings/service-accounts',
 	'/messaging-queues': '/messaging-queues/overview',
 	'/alerts/edit': '/alerts/overview',
-	'/alerts/type-selection': '/alerts/new',
 };
-export const oldRoutes = Object.keys(oldNewRoutesMapping);

 export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
 	ROUTES.WORKSPACE_LOCKED,
--- a/frontend/src/api/tests/interceptorRejected.no-auth.test.ts
+++ b/frontend/src/api/tests/interceptorRejected.no-auth.test.ts
@@ -1,72 +0,0 @@
-import axios from 'axios';
-import { getIsNoAuthMode } from 'utils/noAuthMode';
-
-import { interceptorRejected } from '../index';
-
-jest.mock('utils/noAuthMode', () => ({
-	getIsNoAuthMode: jest.fn(),
-}));
-
-jest.mock('api/v2/sessions/rotate/post', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('AppRoutes/utils', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('../utils', () => ({
-	Logout: jest.fn(),
-}));
-
-// oxlint-disable-next-line typescript/no-require-imports typescript/no-var-requires
-const post = require('api/v2/sessions/rotate/post').default;
-// oxlint-disable-next-line typescript/no-require-imports typescript/no-var-requires
-const { Logout } = require('../utils');
-
-describe('interceptorRejected — no-auth mode', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		jest.spyOn(axios, 'isAxiosError').mockReturnValue(true);
-	});
-
-	it('does NOT call rotate or Logout when no-auth mode is enabled on 401', async () => {
-		(getIsNoAuthMode as jest.Mock).mockReturnValue(true);
-
-		const error = {
-			isAxiosError: true,
-			response: {
-				status: 401,
-				config: { url: '/dashboards', method: 'get' },
-			},
-			config: { url: '/dashboards', headers: {} },
-		};
-
-		await interceptorRejected(error as any).catch(() => {});
-
-		expect(post).not.toHaveBeenCalled();
-		expect(Logout).not.toHaveBeenCalled();
-	});
-
-	it('DOES attempt rotate when no-auth mode is disabled on 401', async () => {
-		(getIsNoAuthMode as jest.Mock).mockReturnValue(false);
-		(post as jest.Mock).mockResolvedValue({
-			data: { accessToken: 'a', refreshToken: 'b' },
-		});
-
-		const error = {
-			isAxiosError: true,
-			response: {
-				status: 401,
-				config: { url: '/dashboards', method: 'get' },
-			},
-			config: { url: '/dashboards', headers: {} },
-		};
-
-		await interceptorRejected(error as any).catch(() => {});
-
-		expect(post).toHaveBeenCalled();
-	});
-});
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -2999,11 +2999,6 @@ export interface CoretypesPatchableObjectsDTO {
 	deletions: CoretypesObjectGroupDTO[] | null;
 }

-export enum DashboardtypesSourceDTO {
-	user = 'user',
-	system = 'system',
-	integration = 'integration',
-}
 export interface DashboardtypesDashboardDTO {
 	/**
 	 * @type string
@@ -3027,7 +3022,6 @@ export interface DashboardtypesDashboardDTO {
 	 * @type string
 	 */
 	org_id?: string;
-	source?: DashboardtypesSourceDTO;
 	/**
 	 * @type string
 	 * @format date-time
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -13,7 +13,6 @@ import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';
-import { getIsNoAuthMode } from 'utils/noAuthMode';

 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
 import { Logout } from './utils';
@@ -109,10 +108,7 @@ export const interceptorRejected = async (
 		if (axios.isAxiosError(value) && value.response) {
 			const { response } = value;

-			const isNoAuthMode = getIsNoAuthMode();
-
 			if (
-				!isNoAuthMode &&
 				response.status === 401 &&
 				// if the session rotate call or the create session errors out with 401 or the delete sessions call returns 401 then we do not retry!
 				response.config.url !== '/sessions/rotate' &&
@@ -144,20 +140,16 @@ export const interceptorRejected = async (
 						return await Promise.resolve(reResponse);
 					} catch (error) {
 						if ((error as AxiosError)?.response?.status === 401) {
-							void Logout();
+							Logout();
 						}
 					}
 				} catch (error) {
-					void Logout();
+					Logout();
 				}
 			}

-			if (
-				!isNoAuthMode &&
-				response.status === 401 &&
-				response.config.url === '/sessions/rotate'
-			) {
-				void Logout();
+			if (response.status === 401 && response.config.url === '/sessions/rotate') {
+				Logout();
 			}
 		}
 		return await Promise.reject(value);
--- a/frontend/src/assets/Logos/apache-druid.svg
+++ b/frontend/src/assets/Logos/apache-druid.svg
@@ -1,3 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="currentColor" d="M8.932 20.806c-.369 0-.738.007-1.109 0-.35-.007-.587-.206-.623-.5a.587.587 0 0 1 .53-.636c.79-.062 1.582-.063 2.372-.003a.548.548 0 0 1 .522.602c-.024.326-.253.526-.616.54zM1.792 8.345c-.392 0-.782.008-1.173.002-.327-.006-.577-.22-.614-.512-.037-.293.146-.544.499-.615.192-.032.388-.045.583-.039a81.515 81.515 0 0 1 1.597 0c.163 0 .325.019.483.056.288.073.445.318.411.617-.034.298-.214.477-.515.487-.424.014-.848.004-1.272.004zm7.588 8.417H4.292a2.464 2.464 0 0 1-.326-.007c-.294-.04-.48-.209-.508-.506-.029-.298.11-.501.391-.606.179-.065.365-.051.549-.051 3.347 0 6.695.005 10.042-.006 1.174-.004 2.187-.439 2.993-1.3.69-.738 1.053-1.63 1.16-2.635.085-.788-.027-1.513-.516-2.156-.544-.718-1.28-1.078-2.163-1.082-3.163-.013-6.328-.005-9.487-.01-.336 0-.673-.027-1.007-.058-.29-.027-.45-.201-.469-.492-.021-.317.141-.545.429-.6a1.55 1.55 0 0 1 .29-.015h10.177c1.71.004 3.187 1.038 3.726 2.654.383 1.147.246 2.304-.182 3.416-.824 2.135-2.762 3.448-5.055 3.454-1.652.005-3.304 0-4.956 0zm2.906-13.568c1.533 0 3.066-.008 4.598 0 2.935.018 5.629 1.892 6.653 4.626.442 1.181.538 2.403.412 3.657-.185 1.842-.735 3.552-1.776 5.084-1.608 2.365-3.873 3.68-6.679 4.118-.95.148-1.905.13-2.86.13-.397 0-.61-.181-.633-.51-.025-.351.196-.621.587-.645.434-.026.87-.004 1.305-.016 2.641-.072 4.928-.982 6.74-2.935 1.269-1.37 1.912-3.039 2.13-4.878.151-1.275.135-2.544-.37-3.752-.773-1.85-2.159-2.983-4.068-3.509-.74-.204-1.5-.243-2.26-.247-2.837-.017-5.675-.007-8.511-.007-.12 0-.24.004-.359-.006a.57.57 0 0 1-.517-.536.557.557 0 0 1 .456-.557c.13-.018.261-.024.392-.019h4.762Z"/>
-</svg>
--- a/frontend/src/assets/Logos/aspnet.svg
+++ b/frontend/src/assets/Logos/aspnet.svg
@@ -1,7 +0,0 @@
-<svg width="456" height="456" viewBox="0 0 456 456" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="456" height="456" rx="50" fill="#512BD4"/>
-<path d="M81.2738 291.333C78.0496 291.333 75.309 290.259 73.052 288.11C70.795 285.906 69.6665 283.289 69.6665 280.259C69.6665 277.173 70.795 274.529 73.052 272.325C75.309 270.121 78.0496 269.019 81.2738 269.019C84.5518 269.019 87.3193 270.121 89.5763 272.325C91.887 274.529 93.0424 277.173 93.0424 280.259C93.0424 283.289 91.887 285.906 89.5763 288.11C87.3193 290.259 84.5518 291.333 81.2738 291.333Z" fill="white"/>
-<path d="M210.167 289.515H189.209L133.994 202.406C132.597 200.202 131.441 197.915 130.528 195.546H130.044C130.474 198.081 130.689 203.508 130.689 211.827V289.515H112.149V171H134.477L187.839 256.043C190.096 259.57 191.547 261.994 192.192 263.316H192.514C191.977 260.176 191.708 254.859 191.708 247.365V171H210.167V289.515Z" fill="white"/>
-<path d="M300.449 289.515H235.561V171H297.87V187.695H254.746V221.249H294.485V237.861H254.746V272.903H300.449V289.515Z" fill="white"/>
-<path d="M392.667 187.695H359.457V289.515H340.272V187.695H307.143V171H392.667V187.695Z" fill="white"/>
-</svg>
--- a/frontend/src/assets/Logos/azure-cdn-frontdoor.svg
+++ b/frontend/src/assets/Logos/azure-cdn-frontdoor.svg
@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-  <defs>
-    <linearGradient id="a" x1="9" y1="17" x2="9" y2="1" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#0078d4"/>
-      <stop offset="1" stop-color="#5ea0ef"/>
-    </linearGradient>
-  </defs>
-  <circle cx="9" cy="9" r="8" fill="url(#a)"/>
-  <ellipse cx="9" cy="9" rx="3.2" ry="8" fill="none" stroke="#fff" stroke-width=".7"/>
-  <line x1="1" y1="9" x2="17" y2="9" stroke="#fff" stroke-width=".7"/>
-  <line x1="2" y1="5.5" x2="16" y2="5.5" stroke="#fff" stroke-width=".5"/>
-  <line x1="2" y1="12.5" x2="16" y2="12.5" stroke="#fff" stroke-width=".5"/>
-  <circle cx="9" cy="9" r="8" fill="none" stroke="#fff" stroke-width=".7"/>
-  <path d="M13.5 10.5l1.5-1.5-1.5-1.5M4.5 10.5L3 9l1.5-1.5" stroke="#50e6ff" stroke-width="1" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/frontend/src/assets/Logos/cert-manager.svg
+++ b/frontend/src/assets/Logos/cert-manager.svg
@@ -1,15 +0,0 @@
-<svg width="142" height="142" viewBox="0 0 142 142" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clipPath="url(#clip0_0_812)" transform="matrix(1.002103,0,0,1.0377318,6.9399999e-7,-2.5317276e-4)">
-    <path d="m 141.702,68.418 c 0,7.4632 -4.567,14.1123 -6.748,20.8385 -2.263,6.9789 -2.552,15.0285 -6.776,20.8385 -4.267,5.868 -11.856,8.611 -17.719,12.881 -5.805,4.228 -10.7345,10.628 -17.7061,12.895 -6.7286,2.186 -14.4463,-0.021 -21.9018,-0.021 -7.4555,0 -15.1731,2.207 -21.8998,0.021 C 41.9778,133.604 37.048,127.204 31.2428,122.976 25.3799,118.706 17.7913,115.963 13.5247,110.095 9.30055,104.287 9.01135,96.2374 6.74791,89.2565 4.56351,82.5225 0,75.8735 0,68.418 0,60.9624 4.56737,54.3057 6.74791,47.5795 9.01135,40.6005 9.30055,32.5507 13.5247,26.741 17.7913,20.8753 25.3799,18.1297 31.2428,13.8617 37.048,9.63414 41.9778,3.23209 48.9513,0.966872 55.678,-1.21924 63.3956,0.986167 70.8511,0.986167 c 7.4555,0 15.1732,-2.205407 21.8999,-0.019295 6.9735,2.265218 11.903,8.667268 17.708,12.894828 5.863,4.268 13.452,7.0136 17.719,12.8793 4.224,5.8097 4.513,13.8595 6.776,20.8385 2.181,6.7262 6.748,13.3771 6.748,20.8385 z" fill="#326ce5"/>
-    <path d="m 70.8473,8.18683 c -33.2383,0 -60.1837,26.96657 -60.1837,60.23097 0,33.2642 26.9454,60.2312 60.1837,60.2312 33.2387,0 60.1837,-26.959 60.1837,-60.2312 0,-33.2721 -26.945,-60.23097 -60.1837,-60.23097 z M 70.8319,123.408 C 40.4778,123.408 15.9058,98.8053 15.9,68.4274 15.9,38.0167 40.5357,13.3791 70.9109,13.437 c 30.3751,0.0579 54.9111,24.6589 54.8841,55.0329 -0.027,30.374 -24.609,54.9481 -54.9631,54.9381 z" fill="#ffffff"/>
-    <path d="m 13.5883,60.53 c 8.1804,0 8.1804,3.859 16.3589,3.859 8.1784,0 8.1804,-3.859 16.3607,-3.859 8.1804,0 8.1785,3.859 16.3589,3.859 8.1804,0 8.1785,-3.859 16.3589,-3.859 8.1804,0 8.1803,3.859 16.3588,3.859 8.1785,0 8.1805,-3.859 16.3605,-3.859 8.181,0 8.181,3.859 16.361,3.859" stroke="#ffffff" strokeMiterlimit="10"/>
-    <path d="m 13.5883,68.248 c 8.1804,0 8.1804,3.859 16.3589,3.859 8.1784,0 8.1804,-3.859 16.3607,-3.859 8.1804,0 8.1785,3.859 16.3589,3.859 8.1804,0 8.1785,-3.859 16.3589,-3.859 8.1804,0 8.1803,3.859 16.3588,3.859 8.1785,0 8.1805,-3.859 16.3605,-3.859 8.181,0 8.181,3.859 16.361,3.859" stroke="#ffffff" strokeMiterlimit="10"/>
-    <path d="m 13.5883,77.5095 c 8.1804,0 8.1804,3.859 16.3589,3.859 8.1784,0 8.1804,-3.859 16.3607,-3.859 8.1804,0 8.1785,3.859 16.3589,3.859 8.1804,0 8.1785,-3.859 16.3589,-3.859 8.1804,0 8.1803,3.859 16.3588,3.859 8.1785,0 8.1805,-3.859 16.3605,-3.859 8.181,0 8.181,3.859 16.361,3.859" stroke="#ffffff" strokeMiterlimit="10"/>
-    <path d="m 70.8473,8.18683 c -33.2383,0 -60.1837,26.96657 -60.1837,60.23097 0,33.2642 26.9454,60.2312 60.1837,60.2312 33.2387,0 60.1837,-26.959 60.1837,-60.2312 0,-33.2721 -26.945,-60.23097 -60.1837,-60.23097 z M 70.8319,123.408 C 40.4778,123.408 15.9058,98.8053 15.9,68.4274 15.9,38.0167 40.5357,13.3791 70.9109,13.437 c 30.3751,0.0579 54.9111,24.6589 54.8841,55.0329 -0.027,30.374 -24.609,54.9481 -54.9631,54.9381 z" fill="#ffffff"/>
-  </g>
-  <defs>
-    <clipPath id="clip0_0_812">
-      <rect width="141.702" height="136.837" fill="#ffffff"/>
-    </clipPath>
-  </defs>
-</svg>
--- a/frontend/src/assets/Logos/graphql.svg
+++ b/frontend/src/assets/Logos/graphql.svg
@@ -1,55 +0,0 @@
-<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
-<g>
-	<g>
-		<g>
-			<rect x="122" y="-0.4" transform="matrix(-0.866 -0.5 0.5 -0.866 163.3196 363.3136)" fill="#E535AB" width="16.6" height="320.3"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<rect x="39.8" y="272.2" fill="#E535AB" width="320.3" height="16.6"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<rect x="37.9" y="312.2" transform="matrix(-0.866 -0.5 0.5 -0.866 83.0693 663.3409)" fill="#E535AB" width="185" height="16.6"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<rect x="177.1" y="71.1" transform="matrix(-0.866 -0.5 0.5 -0.866 463.3409 283.0693)" fill="#E535AB" width="185" height="16.6"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<rect x="122.1" y="-13" transform="matrix(-0.5 -0.866 0.866 -0.5 126.7903 232.1221)" fill="#E535AB" width="16.6" height="185"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<rect x="109.6" y="151.6" transform="matrix(-0.5 -0.866 0.866 -0.5 266.0828 473.3766)" fill="#E535AB" width="320.3" height="16.6"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<rect x="52.5" y="107.5" fill="#E535AB" width="16.6" height="185"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<rect x="330.9" y="107.5" fill="#E535AB" width="16.6" height="185"/>
-		</g>
-	</g>
-	<g>
-		<g>
-			<rect x="262.4" y="240.1" transform="matrix(-0.5 -0.866 0.866 -0.5 126.7953 714.2875)" fill="#E535AB" width="14.5" height="160.9"/>
-		</g>
-	</g>
-	<path fill="#E535AB" d="M369.5,297.9c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8 C373.5,259.9,379.2,281.2,369.5,297.9"/>
-	<path fill="#E535AB" d="M90.9,137c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8 C94.8,99,100.5,120.3,90.9,137"/>
-	<path fill="#E535AB" d="M30.5,297.9c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7 C61.4,320.3,40.1,314.6,30.5,297.9"/>
-	<path fill="#E535AB" d="M309.1,137c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7 C340.1,159.4,318.7,153.7,309.1,137"/>
-	<path fill="#E535AB" d="M200,395.8c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9 C234.9,380.1,219.3,395.8,200,395.8"/>
-	<path fill="#E535AB" d="M200,74c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9 C234.9,58.4,219.3,74,200,74"/>
-</g>
-</svg>
--- a/frontend/src/assets/Logos/istio.svg
+++ b/frontend/src/assets/Logos/istio.svg
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.62745 102.5">
-  <path fill="#516baa" d="m31.05548,54.44523v24.1773c.00065.04512-.03164.084-.07611.09164l-23.27949,3.99047c-.05091.0076-.09834-.02751-.10594-.07841-.00256-.01712-.0003-.03461.00653-.05051L30.87996,30.58635c.02242-.04633.07815-.06572.12449-.04331.0316.01529.05193.04704.05259.08214l-.00156,23.82005Zm3.92367-13.93321v38.21148c.00046.04691.03573.08617.08232.09164l34.87031,3.89415c.0512.00527.09698-.03196.10226-.08316.00167-.01616-.00092-.03247-.00751-.04732L35.15623,4.70041c-.02237-.04636-.07809-.0658-.12444-.04343-.03117.01504-.05144.04612-.05264.08071v35.77433Zm34.68546,45.76213l-38.57341,11.57218c-.02155.00797-.04524.00797-.06679,0l-23.309-11.57217c-.04636-.0203-.06749-.07435-.04719-.12071.01513-.03455.04988-.0563.08757-.05481h61.88241c.0508.00825.08531.05613.07706.10693-.00482.0297-.02369.05525-.05066.06859Z"/>
-</svg>
--- a/frontend/src/assets/Logos/railway.svg
+++ b/frontend/src/assets/Logos/railway.svg
@@ -1,3 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="currentColor" d="M.113 10.27A13.026 13.026 0 000 11.48h18.23c-.064-.125-.15-.237-.235-.347-3.117-4.027-4.793-3.677-7.19-3.78-.8-.034-1.34-.048-4.524-.048-1.704 0-3.555.005-5.358.01-.234.63-.459 1.24-.567 1.737h9.342v1.216H.113v.002zm18.26 2.426H.009c.02.326.05.645.094.961h16.955c.754 0 1.179-.429 1.315-.96zm-17.318 4.28s2.81 6.902 10.93 7.024c4.855 0 9.027-2.883 10.92-7.024H1.056zM11.988 0C7.5 0 3.593 2.466 1.531 6.108l4.75-.005v-.002c3.71 0 3.849.016 4.573.047l.448.016c1.563.052 3.485.22 4.996 1.364.82.621 2.007 1.99 2.712 2.965.654.902.842 1.94.396 2.934-.408.914-1.289 1.458-2.353 1.458H.391s.099.42.249.886h22.748A12.026 12.026 0 0024 12.005C24 5.377 18.621 0 11.988 0z"/>
-</svg>
--- a/frontend/src/assets/Logos/scala.svg
+++ b/frontend/src/assets/Logos/scala.svg
@@ -1,13 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 590 270">
-<path d="M30.36,109.14v.48h0A3.73,3.73,0,0,1,30.36,109.14Z" fill="currentColor" fill-rule="evenodd"/>
-<path d="M138.66,28.78C107.2,37.87,57.29,43,30.4,43h0V94.35a.8.8,0,0,0,.19.48c18.35,0,75-6,109.18-15.4a129,129,0,0,0,17.49-5.81c4.18-1.88,6.88-3.86,6.88-5.92V15.91C164.1,20.79,151.39,25.11,138.66,28.78Z" fill="#de3423" fill-rule="evenodd"/>
-<path d="M138.66,95.37c-18.83,5.43-44.24,9.47-67.39,11.83-15.54,1.59-30.06,2.42-40.87,2.42h0v51.31a.8.8,0,0,0,.19.48c18.35,0,75-6,109.18-15.39a130.38,130.38,0,0,0,17.49-5.81c4.18-1.89,6.88-3.86,6.88-5.92V82.5C164.1,87.37,151.39,91.69,138.66,95.37Z" fill="#de3423" fill-rule="evenodd"/>
-<path d="M138.66,162c-18.83,5.43-44.24,9.46-67.39,11.83-15.56,1.59-30.1,2.42-40.91,2.42V228c18.16,0,75.1-5.95,109.37-15.39,12.63-3.48,24.37-7.44,24.37-11.74V149.08C164.1,154,151.39,158.28,138.66,162Z" fill="#de3423" fill-rule="evenodd"/>
-<path d="M30.55,94.83C32.4,97.38,48,102.19,71.27,107.2c23.27,4.46,47.47,22.07,66.29,16.64,12.73-3.68,26.54-36.47,26.54-41.34V82c0-3.4-2.55-6.13-6.88-8.4-17.75-9.07-21.11-12.41-27.69-10.6C95.37,72.43,35.06,67.61,30.55,94.83Z" fill="currentColor" fill-rule="evenodd"/>
-<path d="M30.55,161.41C32.4,164,48,168.77,71.27,173.79c26,4.74,48.61,20.19,67.44,14.75,12.73-3.68,25.39-34.58,25.39-39.46v-.48c0-3.39-2.55-6.13-6.88-8.39-13.54-7.2-31.43-15.13-38-13.32C85,136.3,39.26,138.37,30.55,161.41Z" fill="currentColor" fill-rule="evenodd"/>
-<path d="M200.7,142.39c6,11.79,15.6,17.6,29.05,17.6,14.44,0,19.59-7.64,19.59-15.11,0-5.15-1.83-8.63-6.64-11.79-4.82-3.32-8.3-4.81-16.93-8-10.63-4-16.77-7-23.41-12.29-6.64-5.48-9.79-13-9.79-22.74a28.28,28.28,0,0,1,10.29-22.58c7-5.81,15.44-8.63,25.56-8.63,15.77,0,27.72,6.31,35.69,18.76L249.34,87.78c-4.48-6.81-11.29-10.3-20.59-10.3-9.13,0-15.77,5.15-15.77,12.29,0,4.81,2,7.14,4.82,10,1.82,1.33,6.47,3.32,8.63,4.48l6,2.32,6.8,2.66c11,4.48,18.76,9.3,23.57,14.44s7.31,12.12,7.31,20.75c0,20.42-14.11,34.2-40.51,34.2-21.41,0-37.18-10-44.48-26.4Z" fill="currentColor"/>
-<path d="M354.25,104.71,342,117.49a28.14,28.14,0,0,0-21.24-9.13,25,25,0,0,0-18.43,7.47,27.76,27.76,0,0,0,0,37.52,25,25,0,0,0,18.43,7.47A28.14,28.14,0,0,0,342,151.69l12.29,12.78c-9,9.63-20.09,14.44-33.53,14.44-12.79,0-23.58-4.15-32.37-12.62s-13.12-19.09-13.12-31.7,4.32-23.08,13.12-31.54,19.58-12.78,32.37-12.78C334.16,90.27,345.28,95.08,354.25,104.71Z" fill="currentColor"/>
-<path d="M393.88,125.62C408,124.3,413,122.47,413,116c0-5.15-4.64-9.13-13.94-9.13q-13.44,0-22.41,10.95l-12.28-10.46c8.13-11.45,19.58-17.09,34.36-17.09,20.75,0,33.7,10,33.7,27.05v37c0,5.81,2.15,6.48,7,6.48h.5v15.43c-2,1.17-5.15,1.83-9.3,1.83-4.48,0-8-1.33-10.62-4a14.06,14.06,0,0,1-3-5.48c-5.81,6.8-15.27,10.29-28.39,10.29-18.42,0-30.87-10.13-30.87-25.4C357.7,136.41,369.15,127.78,393.88,125.62ZM391.56,162c13.28,0,21.41-6,21.41-16.6v-9.3a9.75,9.75,0,0,1-4.14,2.49c-3.82,1.33-6.31,1.66-14.28,2.49-11.62,1.33-17.43,5-17.43,10.79C377.12,158.33,382.43,162,391.56,162Z" fill="currentColor"/>
-<path d="M444.84,60.88h19.92V149.2c0,8.13,2.66,11.62,10,11.62a21.15,21.15,0,0,0,6-.67v17.76a35.56,35.56,0,0,1-9.47,1c-17.59,0-26.39-9-26.39-27.06Z" fill="currentColor"/>
-<path d="M521.71,125.62c14.11-1.32,19.09-3.15,19.09-9.62,0-5.15-4.64-9.13-13.94-9.13q-13.44,0-22.41,10.95l-12.28-10.46c8.13-11.45,19.58-17.09,34.36-17.09,20.75,0,33.7,10,33.7,27.05v37c0,5.81,2.15,6.48,7,6.48h.5v15.43c-2,1.17-5.15,1.83-9.3,1.83-4.48,0-8-1.33-10.62-4a13.94,13.94,0,0,1-3-5.48c-5.81,6.8-15.27,10.29-28.39,10.29-18.42,0-30.87-10.13-30.87-25.4C485.53,136.41,497,127.78,521.71,125.62ZM519.39,162c13.28,0,21.41-6,21.41-16.6v-9.3a9.73,9.73,0,0,1-4.15,2.49c-3.81,1.33-6.3,1.66-14.27,2.49-11.62,1.33-17.43,5-17.43,10.79C505,158.33,510.26,162,519.39,162Z" fill="currentColor"/>
-</svg>
--- a/frontend/src/assets/Logos/slog.svg
+++ b/frontend/src/assets/Logos/slog.svg
@@ -1,37 +0,0 @@
-<svg viewBox="0 0 254.5 225" xmlns="http://www.w3.org/2000/svg">
-<g>
-	<g>
-		<g>
-			<g>
-				<path fill="#00ACD7" d="M40.2,101.1c-0.4,0-0.5-0.2-0.3-0.5l2.1-2.7c0.2-0.3,0.7-0.5,1.1-0.5l35.7,0c0.4,0,0.5,0.3,0.3,0.6 l-1.7,2.6c-0.2,0.3-0.7,0.6-1,0.6L40.2,101.1z"/>
-			</g>
-		</g>
-	</g>
-	<g>
-		<g>
-			<g>
-				<path fill="#00ACD7" d="M25.1,110.3c-0.4,0-0.5-0.2-0.3-0.5l2.1-2.7c0.2-0.3,0.7-0.5,1.1-0.5l45.6,0c0.4,0,0.6,0.3,0.5,0.6 l-0.8,2.4c-0.1,0.4-0.5,0.6-0.9,0.6L25.1,110.3z"/>
-			</g>
-		</g>
-	</g>
-	<g>
-		<g>
-			<g>
-				<path fill="#00ACD7" d="M49.3,119.5c-0.4,0-0.5-0.3-0.3-0.6l1.4-2.5c0.2-0.3,0.6-0.6,1-0.6l20,0c0.4,0,0.6,0.3,0.6,0.7l-0.2,2.4 c0,0.4-0.4,0.7-0.7,0.7L49.3,119.5z"/>
-			</g>
-		</g>
-	</g>
-	<g>
-		<g id="CXHf1q_3_">
-			<g>
-				<g>
-					<path fill="#00ACD7" d="M153.1,99.3c-6.3,1.6-10.6,2.8-16.8,4.4c-1.5,0.4-1.6,0.5-2.9-1c-1.5-1.7-2.6-2.8-4.7-3.8 c-6.3-3.1-12.4-2.2-18.1,1.5c-6.8,4.4-10.3,10.9-10.2,19c0.1,8,5.6,14.6,13.5,15.7c6.8,0.9,12.5-1.5,17-6.6 c0.9-1.1,1.7-2.3,2.7-3.7c-3.6,0-8.1,0-19.3,0c-2.1,0-2.6-1.3-1.9-3c1.3-3.1,3.7-8.3,5.1-10.9c0.3-0.6,1-1.6,2.5-1.6 c5.1,0,23.9,0,36.4,0c-0.2,2.7-0.2,5.4-0.6,8.1c-1.1,7.2-3.8,13.8-8.2,19.6c-7.2,9.5-16.6,15.4-28.5,17 c-9.8,1.3-18.9-0.6-26.9-6.6c-7.4-5.6-11.6-13-12.7-22.2c-1.3-10.9,1.9-20.7,8.5-29.3c7.1-9.3,16.5-15.2,28-17.3 c9.4-1.7,18.4-0.6,26.5,4.9c5.3,3.5,9.1,8.3,11.6,14.1C154.7,98.5,154.3,99,153.1,99.3z"/>
-				</g>
-				<g>
-					<path fill="#00ACD7" d="M186.2,154.6c-9.1-0.2-17.4-2.8-24.4-8.8c-5.9-5.1-9.6-11.6-10.8-19.3c-1.8-11.3,1.3-21.3,8.1-30.2 c7.3-9.6,16.1-14.6,28-16.7c10.2-1.8,19.8-0.8,28.5,5.1c7.9,5.4,12.8,12.7,14.1,22.3c1.7,13.5-2.2,24.5-11.5,33.9 c-6.6,6.7-14.7,10.9-24,12.8C191.5,154.2,188.8,154.3,186.2,154.6z M210,114.2c-0.1-1.3-0.1-2.3-0.3-3.3 c-1.8-9.9-10.9-15.5-20.4-13.3c-9.3,2.1-15.3,8-17.5,17.4c-1.8,7.8,2,15.7,9.2,18.9c5.5,2.4,11,2.1,16.3-0.6 C205.2,129.2,209.5,122.8,210,114.2z"/>
-				</g>
-			</g>
-		</g>
-	</g>
-</g>
-</svg>
--- a/frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss
+++ b/frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss
@@ -1,17 +0,0 @@
-.breadcrumb {
-	padding-left: 16px;
-
-	ol {
-		align-items: center;
-	}
-
-	:global(.ant-breadcrumb-separator) {
-		color: var(--muted-foreground);
-	}
-}
-
-.divider {
-	border-color: var(--l1-border);
-	margin: 16px 0;
-	margin-top: 10px;
-}
--- a/frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx
+++ b/frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx
@@ -1,32 +0,0 @@
-import { Breadcrumb, Divider } from 'antd';
-
-import styles from './AlertBreadcrumb.module.scss';
-import BreadcrumbItem, { BreadcrumbItemConfig } from './BreadcrumbItem';
-
-export interface AlertBreadcrumbProps {
-	items: BreadcrumbItemConfig[];
-	className?: string;
-	showDivider?: boolean;
-}
-
-function AlertBreadcrumb({
-	items,
-	className,
-	showDivider = true,
-}: AlertBreadcrumbProps): JSX.Element {
-	const breadcrumbItems = items.map((item) => ({
-		title: <BreadcrumbItem {...item} />,
-	}));
-
-	return (
-		<>
-			<Breadcrumb
-				className={`${styles.breadcrumb} ${className || ''}`}
-				items={breadcrumbItems}
-			/>
-			{showDivider && <Divider className={styles.divider} />}
-		</>
-	);
-}
-
-export default AlertBreadcrumb;
--- a/frontend/src/components/AlertBreadcrumb/BreadcrumbItem.module.scss
+++ b/frontend/src/components/AlertBreadcrumb/BreadcrumbItem.module.scss
@@ -1,9 +0,0 @@
-.item {
-	--button-padding: 0;
-	--button-font-size: var(--periscope-font-size-base);
-}
-
-.itemLast {
-	color: var(--muted-foreground);
-	font-size: var(--periscope-font-size-base);
-}
--- a/frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx
+++ b/frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx
@@ -1,45 +0,0 @@
-import { Button } from '@signozhq/ui/button';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { isModifierKeyPressed } from 'utils/app';
-
-import styles from './BreadcrumbItem.module.scss';
-
-export type BreadcrumbItemConfig =
-	| {
-			title: string | null;
-			route?: string;
-	  }
-	| {
-			title: string | null;
-			isLast?: true;
-	  };
-
-function BreadcrumbItem({
-	title,
-	...props
-}: BreadcrumbItemConfig): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-
-	if ('isLast' in props) {
-		return <div className={styles.itemLast}>{title}</div>;
-	}
-
-	return (
-		<Button
-			variant="ghost"
-			color="secondary"
-			className={styles.item}
-			onClick={(e: React.MouseEvent): void => {
-				if (!('route' in props) || !props.route) {
-					return;
-				}
-
-				safeNavigate(props.route, { newTab: isModifierKeyPressed(e) });
-			}}
-		>
-			{title}
-		</Button>
-	);
-}
-
-export default BreadcrumbItem;
--- a/frontend/src/components/AlertBreadcrumb/index.tsx
+++ b/frontend/src/components/AlertBreadcrumb/index.tsx
@@ -1,6 +0,0 @@
-export { default } from './AlertBreadcrumb';
-export {
-	default as BreadcrumbItem,
-	type BreadcrumbItemConfig,
-} from './BreadcrumbItem';
-export type { AlertBreadcrumbProps } from './AlertBreadcrumb';
--- a/frontend/src/components/CustomTimePicker/TimezonePicker.tsx
+++ b/frontend/src/components/CustomTimePicker/TimezonePicker.tsx
@@ -6,7 +6,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';
--- a/frontend/src/components/DropDown/DropDown.styles.scss
+++ b/frontend/src/components/DropDown/DropDown.styles.scss
@@ -1,7 +0,0 @@
-.dropdown-button {
-	color: var(--l1-foreground);
-}
-
-.dropdown-icon {
-	font-size: 1.2rem;
-}
--- a/frontend/src/components/DropDown/DropDown.tsx
+++ b/frontend/src/components/DropDown/DropDown.tsx
@@ -1,51 +0,0 @@
-import { useState } from 'react';
-import { Ellipsis } from '@signozhq/icons';
-import { Button, Dropdown, MenuProps } from 'antd';
-
-import './DropDown.styles.scss';
-
-function DropDown({
-	element,
-	onDropDownItemClick,
-}: {
-	element: JSX.Element[];
-	onDropDownItemClick?: MenuProps['onClick'];
-}): JSX.Element {
-	const items: MenuProps['items'] = element.map(
-		(e: JSX.Element, index: number) => ({
-			label: e,
-			key: index,
-		}),
-	);
-
-	const [isDdOpen, setDdOpen] = useState<boolean>(false);
-
-	return (
-		<Dropdown
-			menu={{
-				items,
-				onMouseEnter: (): void => setDdOpen(true),
-				onMouseLeave: (): void => setDdOpen(false),
-				onClick: (item): void => onDropDownItemClick?.(item),
-			}}
-			open={isDdOpen}
-		>
-			<Button
-				type="link"
-				className={`dropdown-button`}
-				onClick={(e): void => {
-					e.preventDefault();
-					setDdOpen(true);
-				}}
-			>
-				<Ellipsis className="dropdown-icon" size={16} />
-			</Button>
-		</Dropdown>
-	);
-}
-
-DropDown.defaultProps = {
-	onDropDownItemClick: (): void => {},
-};
-
-export default DropDown;
--- a/frontend/src/components/ExplorerCard/ExplorerCard.tsx
+++ b/frontend/src/components/ExplorerCard/ExplorerCard.tsx
@@ -1,15 +1,7 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import {
-	Button,
-	Col,
-	Dropdown,
-	MenuProps,
-	Popover,
-	Row,
-	Select,
-	Space,
-} from 'antd';
+import { Button, Col, Popover, Row, Select, Space } from 'antd';
+import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -241,9 +233,9 @@ function ExplorerCard({
 								</Popover>
 								<Share2 onClick={onCopyUrlHandler} size="md" />
 								{viewKey && (
-									<Dropdown trigger={['click']} menu={moreOptionMenu}>
-										<Ellipsis size="md" />
-									</Dropdown>
+									<DropdownMenuSimple menu={moreOptionMenu}>
+										<Button type="text" size="small" icon={<Ellipsis size="md" />} />
+									</DropdownMenuSimple>
 								)}
 							</Space>
 						</OffSetCol>
--- a/frontend/src/components/ExplorerCard/SaveViewWithName.tsx
+++ b/frontend/src/components/ExplorerCard/SaveViewWithName.tsx
@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Card, Form } from 'antd';
+import { Card, Form, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
--- a/frontend/src/components/InputWithLabel/InputWithLabel.tsx
+++ b/frontend/src/components/InputWithLabel/InputWithLabel.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -50,7 +50,6 @@ import {
 import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
 import { AppState } from 'store/reducers';
-import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -218,17 +217,20 @@ function LogDetailInner({

 	const logBody = useMemo(() => {
 		if (!isBodyJsonQueryEnabled) {
-			return (log?.body as string) ?? '';
+			return log?.body || '';
 		}
-		// Feature enabled: body is always a map; message is always a string
-		const bodyObj = log?.body as ILogBody;
-		if (!bodyObj) {
-			return '';
+
+		try {
+			const json = JSON.parse(log?.body || '');
+
+			if (typeof json?.message === 'string' && json.message !== '') {
+				return json.message;
+			}
+
+			return log?.body || '';
+		} catch {
+			return log?.body || '';
 		}
-		if (bodyObj.message) {
-			return bodyObj.message;
-		}
-		return JSON.stringify(bodyObj);
 	}, [isBodyJsonQueryEnabled, log?.body]);

 	const htmlBody = useMemo(
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -9,10 +9,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import {
-	getBodyDisplayString,
-	getSanitizedLogBody,
-} from 'container/LogDetailedView/utils';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -102,7 +99,7 @@ function RawLogView({
 		// Check if body is selected
 		const showBody = selectedFields.some((field) => field.name === 'body');
 		if (showBody) {
-			parts.push(`${attributesText} ${getBodyDisplayString(data.body)}`);
+			parts.push(`${attributesText} ${data.body}`);
 		} else {
 			parts.push(attributesText);
 		}
--- a/frontend/src/components/Logs/TableView/useLogsTableColumns.tsx
+++ b/frontend/src/components/Logs/TableView/useLogsTableColumns.tsx
@@ -2,10 +2,7 @@ import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import {
-	getBodyDisplayString,
-	getSanitizedLogBody,
-} from 'container/LogDetailedView/utils';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
@@ -90,7 +87,7 @@ export function useLogsTableColumns({
 			? {
 					id: 'body',
 					header: 'Body',
-					accessorFn: (log): string => getBodyDisplayString(log.body),
+					accessorFn: (log): string => log.body,
 					canBeHidden: false,
 					width: { default: '100%', min: 300 },
 					cell: ({ value, isActive }): ReactElement => (
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, InputNumber, Popover, Tooltip } from 'antd';
+import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
--- a/frontend/src/components/NoAuthBanner/NoAuthBanner.module.scss
+++ b/frontend/src/components/NoAuthBanner/NoAuthBanner.module.scss
@@ -1,13 +0,0 @@
-.banner {
-	height: var(--spacing-20);
-
-	a {
-		color: var(--callout-warning-title);
-		text-decoration: underline;
-
-		&:hover {
-			color: var(--callout-warning-title);
-			opacity: 0.8;
-		}
-	}
-}
--- a/frontend/src/components/NoAuthBanner/NoAuthBanner.tsx
+++ b/frontend/src/components/NoAuthBanner/NoAuthBanner.tsx
@@ -1,26 +0,0 @@
-import { PersistedAnnouncementBanner } from '@signozhq/ui/announcement-banner';
-
-import styles from './NoAuthBanner.module.scss';
-
-export function NoAuthBanner(): JSX.Element {
-	return (
-		<PersistedAnnouncementBanner
-			type="warning"
-			storageKey="no-auth-banner-v1"
-			testId="no-auth-banner"
-			className={styles.banner}
-		>
-			Impersonation mode: authentication is disabled. Anyone with access to this
-			instance has admin privileges.{' '}
-			<a
-				href="https://signoz.io/docs/manage/administrator-guide/configuration/no-auth-mode/"
-				target="_blank"
-				rel="noreferrer"
-			>
-				Learn more
-			</a>
-		</PersistedAnnouncementBanner>
-	);
-}
-
-export default NoAuthBanner;
--- a/frontend/src/components/NoAuthBanner/tests/NoAuthBanner.test.tsx
+++ b/frontend/src/components/NoAuthBanner/tests/NoAuthBanner.test.tsx
@@ -1,24 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import { NoAuthBanner } from '../NoAuthBanner';
-
-describe('NoAuthBanner', () => {
-	it('renders the no-auth message', () => {
-		render(<NoAuthBanner />);
-		expect(
-			screen.getByText(/Impersonation mode: authentication is disabled/i),
-		).toBeInTheDocument();
-	});
-
-	it('renders with the warning test id', () => {
-		render(<NoAuthBanner />);
-		expect(screen.getByTestId('no-auth-banner')).toBeInTheDocument();
-	});
-
-	it('renders a docs link that opens in a new tab', () => {
-		render(<NoAuthBanner />);
-		const link = screen.getByRole('link', { name: /learn more/i });
-		expect(link).toHaveAttribute('target', '_blank');
-		expect(link).toHaveAttribute('rel', 'noreferrer');
-	});
-});
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
@@ -6,7 +6,7 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { Dropdown } from 'antd';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -195,7 +195,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 							)}

 							{isMultiQueryAllowed && (
-								<Dropdown
+								<DropdownMenuSimple
 									className="query-actions-dropdown"
 									menu={{
 										items: [
@@ -217,10 +217,10 @@ export const QueryV2 = forwardRef(function QueryV2(
 												: []),
 										],
 									}}
-									placement="bottomRight"
+									align="end"
 								>
 									<Ellipsis size={16} />
-								</Dropdown>
+								</DropdownMenuSimple>
 							)}
 						</div>
 					</div>
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Checkbox, Skeleton } from 'antd';
+import { Button, Checkbox, Input, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx
@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';

--- a/frontend/src/components/ResizeTable/DynamicColumnTable.tsx
+++ b/frontend/src/components/ResizeTable/DynamicColumnTable.tsx
@@ -4,13 +4,13 @@ import type {
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 } from 'antd';
-import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
+import { Button, Flex, Switch } from 'antd';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { SlidersHorizontal } from '@signozhq/icons';
-import { popupContainer } from 'utils/selectPopupContainer';

 import ResizeTable from './ResizeTable';
 import { DynamicColumnTableProps } from './types';
@@ -85,8 +85,9 @@ function DynamicColumnTable({
 			);
 		};

-	const items: MenuProps['items'] =
+	const items: MenuItem[] =
 		dynamicColumns?.map((column, index) => ({
+			key: String(index),
 			label: (
 				<div className="dynamicColumnsTable-items">
 					<div>{column.title?.toString()}</div>
@@ -96,8 +97,6 @@ function DynamicColumnTable({
 					/>
 				</div>
 			),
-			key: index,
-			type: 'checkbox',
 		})) || [];

 	// Get current page from URL or default to 1
@@ -126,18 +125,14 @@ function DynamicColumnTable({
 			<Flex justify="flex-end" align="center" gap={8}>
 				{facingIssueBtn && <LaunchChatSupport {...facingIssueBtn} />}
 				{dynamicColumns && (
-					<Dropdown
-						getPopupContainer={popupContainer}
-						menu={{ items }}
-						trigger={['click']}
-					>
+					<DropdownMenuSimple menu={{ items }}>
 						<Button
 							className="dynamicColumnTable-button filter-btn"
 							size="middle"
 							icon={<SlidersHorizontal size={14} />}
 							data-testid="additional-filters-button"
 						/>
-					</Dropdown>
+					</DropdownMenuSimple>
 				)}
 			</Flex>

--- a/frontend/src/components/ServiceAccountDrawer/KeysTab.tsx
+++ b/frontend/src/components/ServiceAccountDrawer/KeysTab.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { KeyRound, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Skeleton, Table, Tooltip } from 'antd';
+import { Skeleton, Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
@@ -110,34 +110,28 @@ function buildColumns({
 				onClick: (e): void => e.stopPropagation(),
 				style: { cursor: 'default' },
 			}),
-			render: (_, record): JSX.Element => {
-				const tooltipTitle = isDisabled ? 'Service account disabled' : 'Revoke Key';
-				return (
-					<AuthZTooltip
-						checks={[
-							buildAPIKeyDeletePermission(record.id),
-							buildSADetachPermission(accountId),
-						]}
-						enabled={!isDisabled && !!accountId}
+			render: (_, record): JSX.Element => (
+				<AuthZTooltip
+					checks={[
+						buildAPIKeyDeletePermission(record.id),
+						buildSADetachPermission(accountId),
+					]}
+					enabled={!isDisabled && !!accountId}
+				>
+					<Button
+						variant="ghost"
+						size="sm"
+						color="destructive"
+						disabled={isDisabled}
+						onClick={(): void => {
+							onRevokeClick(record.id);
+						}}
+						className="keys-tab__revoke-btn"
 					>
-						<Tooltip title={tooltipTitle}>
-							<Button
-								variant="ghost"
-								size="sm"
-								color="destructive"
-								disabled={isDisabled}
-								onClick={(e): void => {
-									e.stopPropagation();
-									onRevokeClick(record.id);
-								}}
-								className="keys-tab__revoke-btn"
-							>
-								<X size={12} />
-							</Button>
-						</Tooltip>
-					</AuthZTooltip>
-				);
-			},
+						<X size={12} />
+					</Button>
+				</AuthZTooltip>
+			),
 		},
 	];
 }
--- a/frontend/src/components/TanStackTableView/TanStackTable.tsx
+++ b/frontend/src/components/TanStackTableView/TanStackTable.tsx
@@ -626,10 +626,6 @@ function TanStackTableInner<TData>(
 										onChange={(value): void => {
 											setLimit(+value);
 											pagination.onLimitChange?.(+value);
-											if (page !== 1) {
-												setPage(1);
-												pagination.onPageChange?.(1);
-											}
 										}}
 										items={paginationPageSizeItems}
 									/>
--- a/frontend/src/components/TanStackTableView/tests/TanStackTableView.test.tsx
+++ b/frontend/src/components/TanStackTableView/tests/TanStackTableView.test.tsx
@@ -401,62 +401,6 @@ describe('TanStackTableView Integration', () => {
 				expect(onLimitChange).toHaveBeenCalledWith(20);
 			});
 		});
-
-		it('resets page to 1 when limit changes', async () => {
-			const user = userEvent.setup();
-			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-			const onPageChange = jest.fn();
-
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100, defaultPage: 1, defaultLimit: 10, onPageChange },
-					enableQueryParams: true,
-				},
-				onUrlUpdate,
-			});
-
-			await waitFor(() => {
-				expect(screen.getByRole('navigation')).toBeInTheDocument();
-			});
-
-			// Navigate to page 2
-			const nav = screen.getByRole('navigation');
-			const page2 = Array.from(nav.querySelectorAll('button')).find(
-				(btn) => btn.textContent?.trim() === '2',
-			);
-			if (!page2) {
-				throw new Error('Page 2 button not found in pagination');
-			}
-			await user.click(page2);
-
-			await waitFor(() => {
-				const lastPage = onUrlUpdate.mock.calls
-					.map((call) => call[0].searchParams.get('page'))
-					.filter(Boolean)
-					.pop();
-				expect(lastPage).toBe('2');
-			});
-
-			// Change page size
-			const comboboxTrigger = document.querySelector(
-				'button[aria-haspopup="dialog"]',
-			) as HTMLElement;
-			await user.click(comboboxTrigger);
-
-			const option20 = await screen.findByRole('option', { name: '20' });
-			await user.click(option20);
-
-			// Verify page reset to 1 (nuqs removes default values from URL)
-			await waitFor(() => {
-				const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1];
-				const lastPage = lastCall[0].searchParams.get('page');
-				expect(lastPage === '1' || lastPage === null).toBe(true);
-				expect(lastCall[0].searchParams.get('limit')).toBe('20');
-			});
-
-			// Verify onPageChange callback was called with 1
-			expect(onPageChange).toHaveBeenCalledWith(1);
-		});
 	});

 	describe('sorting', () => {
--- a/frontend/src/components/TimePreferenceDropDown/index.tsx
+++ b/frontend/src/components/TimePreferenceDropDown/index.tsx
@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { ChevronDown, Globe } from '@signozhq/icons';
-import { Button, Dropdown } from 'antd';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {
 	timePreferance,
@@ -27,20 +28,17 @@ function TimePreference({

 	const menu = useMemo(
 		() => ({
-			items: menuItems,
-			onClick: timeMenuItemOnChangeHandler,
+			items: menuItems.map((item) => ({
+				...item,
+				onClick: timeMenuItemOnChangeHandler,
+			})),
 		}),
 		[timeMenuItemOnChangeHandler],
 	);

 	return (
-		<Dropdown
-			menu={menu}
-			rootClassName="time-selection-menu"
-			className="time-selection-target"
-			trigger={['click']}
-		>
-			<Button>
+		<DropdownMenuSimple menu={menu} className="time-selection-menu">
+			<Button className="time-selection-target">
 				<div className="button-selected-text">
 					<Globe size={14} />
 					<Typography.Text className="selected-value">
@@ -49,7 +47,7 @@ function TimePreference({
 				</div>
 				<ChevronDown size="md" />
 			</Button>
-		</Dropdown>
+		</DropdownMenuSimple>
 	);
 }

--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -29,6 +29,7 @@ const ROUTES = {
 	ALERTS_NEW: '/alerts/new',
 	ALERT_HISTORY: '/alerts/history',
 	ALERT_OVERVIEW: '/alerts/overview',
+	ALERT_TYPE_SELECTION: '/alerts/type-selection',
 	ALL_CHANNELS: '/settings/channels',
 	CHANNELS_NEW: '/settings/channels/new',
 	CHANNELS_EDIT: '/settings/channels/edit/:channelId',
--- a/frontend/src/container/CreateAlertRule/AlertRuleDocumentationRedirection.test.tsx
+++ b/frontend/src/container/CreateAlertRule/AlertRuleDocumentationRedirection.test.tsx
@@ -1,23 +1,12 @@
 import ROUTES from 'constants/routes';
 import * as usePrefillAlertConditions from 'container/FormAlertRules/usePrefillAlertConditions';
+import AlertTypeSelectionPage from 'pages/AlertTypeSelection';
 import CreateAlertPage from 'pages/CreateAlert';
 import { act, fireEvent, render } from 'tests/test-utils';
 import { AlertTypes } from 'types/api/alerts/alertTypes';

 import { ALERT_TYPE_TO_TITLE, ALERT_TYPE_URL_MAP } from './constants';

-jest.mock('react-router-dom-v5-compat', () => ({
-	...jest.requireActual('react-router-dom-v5-compat'),
-	useNavigationType: jest.fn(() => 'PUSH'),
-	useLocation: jest.fn(() => ({
-		pathname: '/alerts/new',
-		search: '',
-		hash: '',
-		state: null,
-	})),
-	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
-}));
-
 jest
 	.spyOn(usePrefillAlertConditions, 'usePrefillAlertConditions')
 	.mockReturnValue({
@@ -65,13 +54,20 @@ describe('Alert rule documentation redirection', () => {
 		window.open = mockWindowOpen;
 	});

+	jest.mock('react-router-dom', () => ({
+		...jest.requireActual('react-router-dom'),
+		useLocation: (): { pathname: string } => ({
+			pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.ALERT_TYPE_SELECTION}`,
+		}),
+	}));
+
 	beforeEach(() => {
 		act(() => {
 			renderResult = render(
-				<CreateAlertPage />,
+				<AlertTypeSelectionPage />,
 				{},
 				{
-					initialRoute: ROUTES.ALERTS_NEW,
+					initialRoute: ROUTES.ALERT_TYPE_SELECTION,
 				},
 			);
 		});
--- a/frontend/src/container/CreateAlertRule/AnomalyAlertDocumentationRedirection.test.tsx
+++ b/frontend/src/container/CreateAlertRule/AnomalyAlertDocumentationRedirection.test.tsx
@@ -15,18 +15,6 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));

-jest.mock('react-router-dom-v5-compat', () => ({
-	...jest.requireActual('react-router-dom-v5-compat'),
-	useNavigationType: jest.fn(() => 'PUSH'),
-	useLocation: jest.fn(() => ({
-		pathname: '/alerts/new',
-		search: 'ruleType=anomaly_rule',
-		hash: '',
-		state: null,
-	})),
-	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
-}));
-
 window.ResizeObserver =
 	window.ResizeObserver ||
 	jest.fn().mockImplementation(() => ({
--- a/frontend/src/container/CreateAlertRule/CreateAlertRule.styles.scss
+++ b/frontend/src/container/CreateAlertRule/CreateAlertRule.styles.scss
@@ -1,75 +0,0 @@
-.create-alert-tabs {
-	&__extra {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-	}
-}
-
-.create-alert-wrapper {
-	margin-top: 10px;
-
-	.divider {
-		border-color: var(--l1-border);
-		margin: 16px 0;
-	}
-
-	.breadcrumb-divider {
-		margin-top: 10px;
-	}
-}
-
-.create-alert__breadcrumb {
-	padding-left: 16px;
-
-	ol {
-		align-items: center;
-	}
-
-	.breadcrumb-item {
-		color: var(--l2-foreground);
-		font-size: 14px;
-		line-height: 20px;
-		letter-spacing: 0.25px;
-		padding: 0;
-	}
-
-	.ant-breadcrumb-separator,
-	.breadcrumb-item--last {
-		color: var(--muted-foreground);
-		font-family: 'Geist Mono';
-	}
-}
-
-.alerts-container {
-	.top-level-tab.periscope-tab {
-		padding: 2px 0;
-	}
-
-	.ant-tabs {
-		&-nav {
-			padding: 0 8px;
-			margin-bottom: 0 !important;
-
-			&::before {
-				border-bottom: 1px solid var(--l1-border) !important;
-			}
-		}
-
-		&-tab {
-			&[data-node-key='TriggeredAlerts'] {
-				margin-left: 16px;
-			}
-
-			&:not(:first-of-type) {
-				margin-left: 24px !important;
-			}
-
-			[aria-selected='false'] {
-				.periscope-tab {
-					color: var(--l2-foreground);
-				}
-			}
-		}
-	}
-}
--- a/frontend/src/container/CreateAlertRule/SelectAlertType/tests/SelectAlertType.test.tsx
+++ b/frontend/src/container/CreateAlertRule/SelectAlertType/tests/SelectAlertType.test.tsx
@@ -1,111 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { FeatureKeys } from 'constants/features';
-import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
-import * as appHooks from 'providers/App/App';
-import { AlertTypes } from 'types/api/alerts/alertTypes';
-
-import SelectAlertType from '..';
-
-const useAppContextSpy = jest.spyOn(appHooks, 'useAppContext');
-
-describe('SelectAlertType', () => {
-	const mockOnSelect = jest.fn();
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		useAppContextSpy.mockReturnValue(getAppContextMockState());
-	});
-
-	it('should render all alert type options when anomaly detection is enabled', () => {
-		useAppContextSpy.mockReturnValue({
-			...getAppContextMockState({}),
-			featureFlags: [
-				{
-					name: FeatureKeys.ANOMALY_DETECTION,
-					active: true,
-					usage: 0,
-					usage_limit: -1,
-					route: '',
-				},
-			],
-		});
-
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-
-		expect(screen.getByText('metric_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('log_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('traces_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('exceptions_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('anomaly_based_alert')).toBeInTheDocument();
-	});
-
-	it('should render all alert type options except anomaly based alert when anomaly detection is disabled', () => {
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-
-		expect(screen.getByText('metric_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('log_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('traces_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('exceptions_based_alert')).toBeInTheDocument();
-		expect(screen.queryByText('anomaly_based_alert')).not.toBeInTheDocument();
-	});
-
-	it('should call onSelect with metrics based alert type', () => {
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-		fireEvent.click(screen.getByText('metric_based_alert'));
-
-		expect(mockOnSelect).toHaveBeenCalledWith(
-			AlertTypes.METRICS_BASED_ALERT,
-			false,
-		);
-	});
-
-	it('should call onSelect with anomaly based alert type', () => {
-		useAppContextSpy.mockReturnValue({
-			...getAppContextMockState({}),
-			featureFlags: [
-				{
-					name: FeatureKeys.ANOMALY_DETECTION,
-					active: true,
-					usage: 0,
-					usage_limit: -1,
-					route: '',
-				},
-			],
-		});
-
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-		fireEvent.click(screen.getByText('anomaly_based_alert'));
-
-		expect(mockOnSelect).toHaveBeenCalledWith(
-			AlertTypes.ANOMALY_BASED_ALERT,
-			false,
-		);
-	});
-
-	it('should call onSelect with log based alert type', () => {
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-		fireEvent.click(screen.getByText('log_based_alert'));
-
-		expect(mockOnSelect).toHaveBeenCalledWith(AlertTypes.LOGS_BASED_ALERT, false);
-	});
-
-	it('should call onSelect with traces based alert type', () => {
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-		fireEvent.click(screen.getByText('traces_based_alert'));
-
-		expect(mockOnSelect).toHaveBeenCalledWith(
-			AlertTypes.TRACES_BASED_ALERT,
-			false,
-		);
-	});
-
-	it('should call onSelect with exceptions based alert type', () => {
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-		fireEvent.click(screen.getByText('exceptions_based_alert'));
-
-		expect(mockOnSelect).toHaveBeenCalledWith(
-			AlertTypes.EXCEPTIONS_BASED_ALERT,
-			false,
-		);
-	});
-});
--- a/frontend/src/container/CreateAlertRule/tests/CreateAlertRule.test.tsx
+++ b/frontend/src/container/CreateAlertRule/tests/CreateAlertRule.test.tsx
@@ -1,37 +1,13 @@
-import { fireEvent, screen } from '@testing-library/react';
-import { FeatureKeys } from 'constants/features';
+import { render, screen } from '@testing-library/react';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap } from 'constants/queryBuilder';
-import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
 import * as useCompositeQueryParamHooks from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import * as navigateHooks from 'hooks/useSafeNavigate';
 import * as useUrlQueryHooks from 'hooks/useUrlQuery';
-import * as appHooks from 'providers/App/App';
-import { render } from 'tests/test-utils';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { DataSource } from 'types/common/queryBuilder';

 import CreateAlertRule from '../index';

-jest.mock('react-router-dom-v5-compat', () => ({
-	...jest.requireActual('react-router-dom-v5-compat'),
-	useNavigationType: jest.fn(() => 'PUSH'),
-	useLocation: jest.fn(() => ({
-		pathname: '/alerts/new',
-		search: '',
-		hash: '',
-		state: null,
-	})),
-	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
-}));
-
-jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
-	__esModule: true,
-	default: function MockDateTimeSelector(): JSX.Element {
-		return <div data-testid="datetime-selector">Mock DateTime Selector</div>;
-	},
-}));
-
 jest.mock('container/FormAlertRules', () => ({
 	__esModule: true,
 	default: function MockFormAlertRules({
@@ -72,14 +48,10 @@ const useCompositeQueryParamSpy = jest.spyOn(
 	'useGetCompositeQueryParam',
 );
 const useUrlQuerySpy = jest.spyOn(useUrlQueryHooks, 'default');
-const useSafeNavigateSpy = jest.spyOn(navigateHooks, 'useSafeNavigate');
-const useAppContextSpy = jest.spyOn(appHooks, 'useAppContext');

 const mockSetUrlQuery = jest.fn();
 const mockToString = jest.fn();
 const mockGetUrlQuery = jest.fn();
-const mockSafeNavigate = jest.fn();
-const mockDeleteUrlQuery = jest.fn();

 const FORM_ALERT_RULES_TEXT = 'Form Alert Rules';
 const CREATE_ALERT_V2_TEXT = 'Create Alert V2';
@@ -91,13 +63,8 @@ describe('CreateAlertRule', () => {
 			set: mockSetUrlQuery,
 			toString: mockToString,
 			get: mockGetUrlQuery,
-			delete: mockDeleteUrlQuery,
 		} as Partial<URLSearchParams> as URLSearchParams);
 		useCompositeQueryParamSpy.mockReturnValue(initialQueriesMap.metrics);
-		useSafeNavigateSpy.mockReturnValue({
-			safeNavigate: mockSafeNavigate,
-		});
-		useAppContextSpy.mockReturnValue(getAppContextMockState());
 	});

 	it('should render classic flow when showClassicCreateAlertsPage is true', () => {
@@ -105,53 +72,18 @@ describe('CreateAlertRule', () => {
 			if (key === QueryParams.showClassicCreateAlertsPage) {
 				return 'true';
 			}
-			if (key === QueryParams.alertType) {
-				return AlertTypes.METRICS_BASED_ALERT;
-			}
 			return null;
 		});
 		render(<CreateAlertRule />);
 		expect(screen.getByText(FORM_ALERT_RULES_TEXT)).toBeInTheDocument();
 	});

-	it('should render new flow when alertType is provided', () => {
-		mockGetUrlQuery.mockImplementation((key: string) => {
-			if (key === QueryParams.alertType) {
-				return AlertTypes.METRICS_BASED_ALERT;
-			}
-			return null;
-		});
+	it('should render new flow by default', () => {
+		mockGetUrlQuery.mockReturnValue(null);
 		render(<CreateAlertRule />);
 		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
 	});

-	it('should render type selection when no alertType in URL and no compositeQuery', () => {
-		mockGetUrlQuery.mockReturnValue(null);
-		useCompositeQueryParamSpy.mockReturnValue(null);
-		render(<CreateAlertRule />);
-		expect(screen.queryByText(FORM_ALERT_RULES_TEXT)).not.toBeInTheDocument();
-		expect(screen.queryByText(CREATE_ALERT_V2_TEXT)).not.toBeInTheDocument();
-	});
-
-	it('should skip type selection and render alert form when compositeQuery is present', () => {
-		mockGetUrlQuery.mockReturnValue(null);
-		useCompositeQueryParamSpy.mockReturnValue({
-			...initialQueriesMap.metrics,
-			builder: {
-				...initialQueriesMap.metrics.builder,
-				queryData: [
-					{
-						...initialQueriesMap.metrics.builder.queryData[0],
-						dataSource: DataSource.METRICS,
-					},
-				],
-			},
-		});
-		render(<CreateAlertRule />);
-		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(AlertTypes.METRICS_BASED_ALERT)).toBeInTheDocument();
-	});
-
 	it('should render classic flow when ruleType is anomaly_rule even if showClassicCreateAlertsPage is not true', () => {
 		mockGetUrlQuery.mockImplementation((key: string) => {
 			if (key === QueryParams.showClassicCreateAlertsPage) {
@@ -179,13 +111,8 @@ describe('CreateAlertRule', () => {
 		expect(screen.getByText(AlertTypes.LOGS_BASED_ALERT)).toBeInTheDocument();
 	});

-	it('should use alertType from URL over compositeQuery dataSource', () => {
-		mockGetUrlQuery.mockImplementation((key: string) => {
-			if (key === QueryParams.alertType) {
-				return AlertTypes.LOGS_BASED_ALERT;
-			}
-			return null;
-		});
+	it('should use alertType from compositeQuery dataSource when alertType is not in URL', () => {
+		mockGetUrlQuery.mockReturnValue(null);
 		useCompositeQueryParamSpy.mockReturnValue({
 			...initialQueriesMap.metrics,
 			builder: {
@@ -200,123 +127,14 @@ describe('CreateAlertRule', () => {
 		});
 		render(<CreateAlertRule />);
 		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(AlertTypes.LOGS_BASED_ALERT)).toBeInTheDocument();
+		expect(screen.getByText(AlertTypes.TRACES_BASED_ALERT)).toBeInTheDocument();
 	});

-	describe('handleSelectType navigation', () => {
-		beforeEach(() => {
-			mockGetUrlQuery.mockReturnValue(null);
-			useCompositeQueryParamSpy.mockReturnValue(null);
-		});
-
-		it('should navigate with threshold alert params for metrics alert', () => {
-			render(<CreateAlertRule />);
-			fireEvent.click(screen.getByText('metric_based_alert'));
-
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.ruleType,
-				'threshold_rule',
-			);
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.alertType,
-				AlertTypes.METRICS_BASED_ALERT,
-			);
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		it('should navigate with threshold alert params for logs alert', () => {
-			render(<CreateAlertRule />);
-			fireEvent.click(screen.getByText('log_based_alert'));
-
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.ruleType,
-				'threshold_rule',
-			);
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.alertType,
-				AlertTypes.LOGS_BASED_ALERT,
-			);
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		it('should navigate with threshold alert params for traces alert', () => {
-			render(<CreateAlertRule />);
-			fireEvent.click(screen.getByText('traces_based_alert'));
-
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.ruleType,
-				'threshold_rule',
-			);
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.alertType,
-				AlertTypes.TRACES_BASED_ALERT,
-			);
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		it('should navigate with threshold alert params for exceptions alert', () => {
-			render(<CreateAlertRule />);
-			fireEvent.click(screen.getByText('exceptions_based_alert'));
-
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.ruleType,
-				'threshold_rule',
-			);
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.alertType,
-				AlertTypes.EXCEPTIONS_BASED_ALERT,
-			);
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		it('should navigate with anomaly detection params for anomaly alert', () => {
-			useAppContextSpy.mockReturnValue({
-				...getAppContextMockState({}),
-				featureFlags: [
-					{
-						name: FeatureKeys.ANOMALY_DETECTION,
-						active: true,
-						usage: 0,
-						usage_limit: -1,
-						route: '',
-					},
-				],
-			});
-
-			render(<CreateAlertRule />);
-			fireEvent.click(screen.getByText('anomaly_based_alert'));
-
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.ruleType,
-				'anomaly_rule',
-			);
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.alertType,
-				AlertTypes.METRICS_BASED_ALERT,
-			);
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		it('should navigate even when showClassicCreateAlertsPage flag is present', () => {
-			mockGetUrlQuery.mockImplementation((key: string) => {
-				if (key === QueryParams.showClassicCreateAlertsPage) {
-					return 'true';
-				}
-				return null;
-			});
-
-			render(<CreateAlertRule />);
-			fireEvent.click(screen.getByText('metric_based_alert'));
-
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.ruleType,
-				'threshold_rule',
-			);
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.alertType,
-				AlertTypes.METRICS_BASED_ALERT,
-			);
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
+	it('should default to METRICS_BASED_ALERT when no alertType and no compositeQuery', () => {
+		mockGetUrlQuery.mockReturnValue(null);
+		useCompositeQueryParamSpy.mockReturnValue(null);
+		render(<CreateAlertRule />);
+		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
+		expect(screen.getByText(AlertTypes.METRICS_BASED_ALERT)).toBeInTheDocument();
 	});
 });
--- a/frontend/src/container/CreateAlertRule/defaults.ts
+++ b/frontend/src/container/CreateAlertRule/defaults.ts
@@ -208,11 +208,3 @@ export const ALERTS_VALUES_MAP: Record<AlertTypes, AlertDef> = {
 	[AlertTypes.TRACES_BASED_ALERT]: traceAlertDefaults,
 	[AlertTypes.EXCEPTIONS_BASED_ALERT]: exceptionAlertDefaults,
 };
-
-export const ALERT_TYPE_BREADCRUMB_TITLE: Record<AlertTypes, string> = {
-	[AlertTypes.ANOMALY_BASED_ALERT]: 'Anomaly-Based Alert',
-	[AlertTypes.METRICS_BASED_ALERT]: 'Metric-Based Alert',
-	[AlertTypes.LOGS_BASED_ALERT]: 'Log-Based Alert',
-	[AlertTypes.TRACES_BASED_ALERT]: 'Traces-Based Alert',
-	[AlertTypes.EXCEPTIONS_BASED_ALERT]: 'Exceptions-Based Alert',
-};
--- a/frontend/src/container/CreateAlertRule/index.tsx
+++ b/frontend/src/container/CreateAlertRule/index.tsx
@@ -1,34 +1,21 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { Form, Tabs, TabsProps } from 'antd';
-import logEvent from 'api/common/logEvent';
-import ConfigureIcon from 'assets/AlertHistory/ConfigureIcon';
-import AlertBreadcrumb from 'components/AlertBreadcrumb';
-import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+import { useMemo } from 'react';
+import { Form } from 'antd';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
 import CreateAlertV2 from 'container/CreateAlertV2';
 import FormAlertRules, { AlertDetectionTypes } from 'container/FormAlertRules';
-import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { AlertListTabs } from 'pages/AlertList/types';
-import { GalleryVerticalEnd, Pyramid } from '@signozhq/icons';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { AlertDef } from 'types/api/alerts/def';

 import { ALERT_TYPE_VS_SOURCE_MAPPING } from './config';
-import { ALERTS_VALUES_MAP, ALERT_TYPE_BREADCRUMB_TITLE } from './defaults';
-import SelectAlertType from './SelectAlertType';
-
-import './CreateAlertRule.styles.scss';
+import { ALERTS_VALUES_MAP } from './defaults';

 function CreateRules(): JSX.Element {
 	const [formInstance] = Form.useForm();
 	const compositeQuery = useGetCompositeQueryParam();
 	const queryParams = useUrlQuery();
-	const { safeNavigate } = useSafeNavigate();

 	const ruleTypeFromURL = queryParams.get(QueryParams.ruleType);
 	const alertTypeFromURL = queryParams.get(QueryParams.alertType);
@@ -36,15 +23,6 @@ function CreateRules(): JSX.Element {
 	const showClassicCreateAlertsPageFlag =
 		queryParams.get(QueryParams.showClassicCreateAlertsPage) === 'true';

-	const isTypeSelectionMode =
-		!alertTypeFromURL && !ruleTypeFromURL && !compositeQuery;
-
-	useEffect(() => {
-		if (isTypeSelectionMode) {
-			logEvent('Alert: New alert data source selection page visited', {});
-		}
-	}, [isTypeSelectionMode]);
-
 	const alertType = useMemo(() => {
 		if (ruleTypeFromURL === AlertDetectionTypes.ANOMALY_DETECTION_ALERT) {
 			return AlertTypes.ANOMALY_BASED_ALERT;
@@ -67,142 +45,22 @@ function CreateRules(): JSX.Element {
 		[alertType, version],
 	);

-	const handleTabChange = useCallback(
-		(tab: string): void => {
-			queryParams.set('tab', tab);
-			queryParams.delete('subTab');
-			queryParams.delete('search');
-			safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${queryParams.toString()}`);
-		},
-		[safeNavigate, queryParams],
-	);
+	// Load old alerts flow always for anomaly based alerts and when showClassicCreateAlertsPage is true
+	if (
+		showClassicCreateAlertsPageFlag ||
+		alertType === AlertTypes.ANOMALY_BASED_ALERT
+	) {
+		return (
+			<FormAlertRules
+				alertType={alertType}
+				formInstance={formInstance}
+				initialValue={initialAlertValue}
+				ruleId=""
+			/>
+		);
+	}

-	const handleSelectType = useCallback(
-		(type: AlertTypes, newTab?: boolean): void => {
-			if (type === AlertTypes.ANOMALY_BASED_ALERT) {
-				queryParams.set(
-					QueryParams.ruleType,
-					AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
-				);
-				queryParams.set(QueryParams.alertType, AlertTypes.METRICS_BASED_ALERT);
-			} else {
-				queryParams.set(QueryParams.ruleType, AlertDetectionTypes.THRESHOLD_ALERT);
-				queryParams.set(QueryParams.alertType, type);
-			}
-
-			safeNavigate(`${ROUTES.ALERTS_NEW}?${queryParams.toString()}`, { newTab });
-		},
-		[queryParams, safeNavigate],
-	);
-
-	const alertContent = useMemo(() => {
-		if (isTypeSelectionMode) {
-			return <SelectAlertType onSelect={handleSelectType} />;
-		}
-
-		if (
-			showClassicCreateAlertsPageFlag ||
-			alertType === AlertTypes.ANOMALY_BASED_ALERT
-		) {
-			return (
-				<FormAlertRules
-					alertType={alertType}
-					formInstance={formInstance}
-					initialValue={initialAlertValue}
-					ruleId=""
-				/>
-			);
-		}
-		return <CreateAlertV2 alertType={alertType} />;
-	}, [
-		isTypeSelectionMode,
-		handleSelectType,
-		showClassicCreateAlertsPageFlag,
-		alertType,
-		formInstance,
-		initialAlertValue,
-	]);
-
-	const items: TabsProps['items'] = [
-		{
-			label: (
-				<div className="periscope-tab top-level-tab">
-					<GalleryVerticalEnd size={14} />
-					Triggered Alerts
-				</div>
-			),
-			key: AlertListTabs.TRIGGERED_ALERTS,
-			children: null,
-		},
-		{
-			label: (
-				<div className="periscope-tab top-level-tab">
-					<Pyramid size={14} />
-					Alert Rules
-				</div>
-			),
-			key: AlertListTabs.ALERT_RULES,
-			children: (
-				<div className="create-alert-wrapper">
-					<AlertBreadcrumb
-						className="create-alert__breadcrumb"
-						items={
-							isTypeSelectionMode
-								? [
-										{
-											title: 'Alert Rules',
-											route: `${ROUTES.LIST_ALL_ALERT}?tab=${AlertListTabs.ALERT_RULES}`,
-										},
-										{ title: 'Select Alert Type', isLast: true },
-									]
-								: [
-										{
-											title: 'Alert Rules',
-											route: `${ROUTES.LIST_ALL_ALERT}?tab=${AlertListTabs.ALERT_RULES}`,
-										},
-										{ title: 'Select Alert Type', route: ROUTES.ALERTS_NEW },
-										{
-											title: ALERT_TYPE_BREADCRUMB_TITLE[alertType],
-											isLast: true,
-										},
-									]
-						}
-					/>
-					{alertContent}
-				</div>
-			),
-		},
-		{
-			label: (
-				<div className="periscope-tab top-level-tab">
-					<ConfigureIcon width={14} height={14} />
-					Configuration
-				</div>
-			),
-			key: AlertListTabs.CONFIGURATION,
-			children: null,
-		},
-	];
-
-	return (
-		<Tabs
-			destroyInactiveTabPane
-			items={items}
-			activeKey={AlertListTabs.ALERT_RULES}
-			onChange={handleTabChange}
-			className="alerts-container create-alert-tabs"
-			tabBarExtraContent={
-				<div className="create-alert-tabs__extra">
-					<DateTimeSelector showAutoRefresh />
-					<HeaderRightSection
-						enableAnnouncements={false}
-						enableShare
-						enableFeedback
-					/>
-				</div>
-			}
-		/>
-	);
+	return <CreateAlertV2 alertType={alertType} />;
 }

 export default CreateRules;
--- a/frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx
@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Select, Tooltip } from 'antd';
+import { Button, Input, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleX, Trash } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
--- a/frontend/src/container/CreateAlertV2/CreateAlertHeader/CreateAlertHeader.tsx
+++ b/frontend/src/container/CreateAlertV2/CreateAlertHeader/CreateAlertHeader.tsx
@@ -9,7 +9,6 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RotateCcw } from '@signozhq/icons';
-import { useAlertRuleOptional } from 'providers/Alert';
 import { Labels } from 'types/api/alerts/def';

 import { useCreateAlertState } from '../context';
@@ -19,7 +18,6 @@ import './styles.scss';

 function CreateAlertHeader(): JSX.Element {
 	const { alertState, setAlertState, isEditMode } = useCreateAlertState();
-	const alertRuleContext = useAlertRuleOptional();

 	const { currentQuery } = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
@@ -76,13 +74,9 @@ function CreateAlertHeader(): JSX.Element {
 				<Input
 					type="text"
 					value={alertState.name}
-					onChange={(e): void => {
-						const newName = e.target.value;
-						setAlertState({ type: 'SET_ALERT_NAME', payload: newName });
-						if (isEditMode && alertRuleContext?.setAlertRuleName) {
-							alertRuleContext.setAlertRuleName(newName);
-						}
-					}}
+					onChange={(e): void =>
+						setAlertState({ type: 'SET_ALERT_NAME', payload: e.target.value })
+					}
 					className="alert-header__input title"
 					placeholder="Enter alert rule name"
 					data-testid="alert-name-input"
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx
@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
-import { Collapse } from 'antd';
+import { Collapse, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';

 import { useCreateAlertState } from '../context';
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx
@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Select } from 'antd';
+import { Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';

 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
+
 import './TimeInput.scss';

 export interface TimeInputProps {
--- a/frontend/src/container/CreateAlertV2/Footer/Footer.tsx
+++ b/frontend/src/container/CreateAlertV2/Footer/Footer.tsx
@@ -20,11 +20,6 @@ import {
 } from './utils';

 import './styles.scss';
-import {
-	invalidateGetRuleByID,
-	invalidateListRules,
-} from 'api/generated/services/rules';
-import { useQueryClient } from 'react-query';

 function Footer(): JSX.Element {
 	const {
@@ -120,7 +115,6 @@ function Footer(): JSX.Element {
 		testAlertRule,
 	]);

-	const queryClient = useQueryClient();
 	const handleSaveAlert = useCallback((): void => {
 		const payload = buildCreateThresholdAlertRulePayload({
 			alertType,
@@ -139,9 +133,6 @@ function Footer(): JSX.Element {
 				},
 				{
 					onSuccess: () => {
-						void invalidateGetRuleByID(queryClient, { id: ruleId });
-						void invalidateListRules(queryClient);
-
 						toast.success('Alert rule updated successfully');
 						safeNavigate('/alerts');
 					},
--- a/frontend/src/container/CreateAlertV2/Footer/tests/Footer.test.tsx
+++ b/frontend/src/container/CreateAlertV2/Footer/tests/Footer.test.tsx
@@ -7,7 +7,6 @@ import { createMockAlertContextState } from 'container/CreateAlertV2/EvaluationS

 import * as createAlertState from '../../context';
 import Footer from '../Footer';
-import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';

 // Mock the hooks used by Footer component
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
@@ -65,12 +64,6 @@ const mockAlertContextState = createMockAlertContextState({
 	},
 });

-const WrappedFooter = (): JSX.Element => (
-	<MockQueryClientProvider>
-		<Footer />
-	</MockQueryClientProvider>
-);
-
 jest
 	.spyOn(createAlertState, 'useCreateAlertState')
 	.mockReturnValue(mockAlertContextState);
@@ -104,20 +97,20 @@ describe('Footer', () => {
 	});

 	it('should render the component with 3 buttons', () => {
-		render(<WrappedFooter />);
+		render(<Footer />);
 		expect(screen.getByText(SAVE_ALERT_RULE_TEXT)).toBeInTheDocument();
 		expect(screen.getByText(TEST_NOTIFICATION_TEXT)).toBeInTheDocument();
 		expect(screen.getByText(DISCARD_TEXT)).toBeInTheDocument();
 	});

 	it('discard action works correctly', () => {
-		render(<WrappedFooter />);
+		render(<Footer />);
 		fireEvent.click(screen.getByText(DISCARD_TEXT));
 		expect(mockDiscardAlertRule).toHaveBeenCalled();
 	});

 	it('save alert rule action works correctly', () => {
-		render(<WrappedFooter />);
+		render(<Footer />);
 		fireEvent.click(screen.getByText(SAVE_ALERT_RULE_TEXT));
 		expect(mockCreateAlertRule).toHaveBeenCalled();
 	});
@@ -127,13 +120,13 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isEditMode: true,
 		});
-		render(<WrappedFooter />);
+		render(<Footer />);
 		fireEvent.click(screen.getByText(SAVE_ALERT_RULE_TEXT));
 		expect(mockUpdateAlertRule).toHaveBeenCalled();
 	});

 	it('test notification action works correctly', () => {
-		render(<WrappedFooter />);
+		render(<Footer />);
 		fireEvent.click(screen.getByText(TEST_NOTIFICATION_TEXT));
 		expect(mockTestAlertRule).toHaveBeenCalled();
 	});
@@ -143,7 +136,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isCreatingAlertRule: true,
 		});
-		render(<WrappedFooter />);
+		render(<Footer />);

 		expect(
 			screen.getByRole('button', { name: /save alert rule/i }),
@@ -159,7 +152,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isUpdatingAlertRule: true,
 		});
-		render(<WrappedFooter />);
+		render(<Footer />);

 		// Target the button elements directly instead of the text spans inside them
 		expect(
@@ -176,7 +169,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isTestingAlertRule: true,
 		});
-		render(<WrappedFooter />);
+		render(<Footer />);

 		// Target the button elements directly instead of the text spans inside them
 		expect(
@@ -196,7 +189,7 @@ describe('Footer', () => {
 				name: '',
 			},
 		});
-		render(<WrappedFooter />);
+		render(<Footer />);

 		expect(
 			screen.getByRole('button', { name: /save alert rule/i }),
@@ -224,7 +217,7 @@ describe('Footer', () => {
 			},
 		});

-		render(<WrappedFooter />);
+		render(<Footer />);

 		expect(
 			screen.getByRole('button', { name: /save alert rule/i }),
@@ -252,7 +245,7 @@ describe('Footer', () => {
 			},
 		});

-		render(<WrappedFooter />);
+		render(<Footer />);

 		expect(
 			screen.getByRole('button', { name: /save alert rule/i }),
@@ -268,7 +261,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isTestingAlertRule: true,
 		});
-		render(<WrappedFooter />);
+		render(<Footer />);

 		// When testing alert rule, the play icon is replaced with a loader icon
 		expect(
@@ -283,7 +276,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isUpdatingAlertRule: true,
 		});
-		render(<WrappedFooter />);
+		render(<Footer />);

 		// When updating alert rule, the check icon is replaced with a loader icon
 		expect(
@@ -298,7 +291,7 @@ describe('Footer', () => {
 			...mockAlertContextState,
 			isCreatingAlertRule: true,
 		});
-		render(<WrappedFooter />);
+		render(<Footer />);

 		// When creating alert rule, the check icon is replaced with a loader icon
 		expect(
--- a/frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx
+++ b/frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx
@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
-import { Select } from 'antd';
+import { Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';

 import { useCreateAlertState } from '../context';
--- a/frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx
+++ b/frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx
@@ -11,8 +11,13 @@ import {
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
-import { Dropdown, Skeleton } from 'antd';
+import { Skeleton } from 'antd';
 import {
 	RenderErrorResponseDTO,
 	ZeustypesHostDTO,
@@ -200,10 +205,19 @@ export default function CustomDomainSettings(): JSX.Element {
 							!workspaceName ? 'workspace-name-hidden' : ''
 						}`}
 					>
-						<Dropdown
-							trigger={['click']}
-							disabled={isFetchingHosts}
-							dropdownRender={(): JSX.Element => (
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button
+									variant="link"
+									color="none"
+									disabled={isFetchingHosts}
+								>
+									<Link2 size={12} />
+									<span>{stripProtocol(activeHost?.url ?? '')}</span>
+									<ChevronDown size={12} />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="start">
 								<div className="workspace-url-dropdown">
 									<span className="workspace-url-dropdown-header">
 										All Workspace URLs
@@ -236,14 +250,8 @@ export default function CustomDomainSettings(): JSX.Element {
 										);
 									})}
 								</div>
-							)}
-						>
-							<Button variant="link" color="none">
-								<Link2 size={12} />
-								<span>{stripProtocol(activeHost?.url ?? '')}</span>
-								<ChevronDown size={12} />
-							</Button>
-						</Dropdown>
+							</DropdownMenuContent>
+						</DropdownMenu>
 						<span className="custom-domain-card-meta-timezone">
 							<Clock size={11} />
 							{timezone.offset}
--- a/frontend/src/container/CustomDomainSettings/tests/CustomDomainSettings.test.tsx
+++ b/frontend/src/container/CustomDomainSettings/tests/CustomDomainSettings.test.tsx
@@ -1,4 +1,5 @@
 import { GetHosts200 } from 'api/generated/services/sigNoz.schemas';
+import userEvent from '@testing-library/user-event';
 import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';

@@ -142,12 +143,13 @@ describe('CustomDomainSettings', () => {
 	});

 	it('shows all workspace URLs as links in the dropdown', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);

 		await screen.findByText(/custom-host\.test\.cloud/i);

 		// Open the URL dropdown
-		fireEvent.click(
+		await user.click(
 			screen.getByRole('button', { name: /custom-host\.test\.cloud/i }),
 		);

--- a/frontend/src/container/DashboardContainer/DashboardDescription/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/index.tsx
@@ -16,8 +16,7 @@ import {
 	Plus,
 	X,
 } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Card, Modal, Popover, Tag, Tooltip } from 'antd';
+import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
--- a/frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';
--- a/frontend/src/container/DashboardContainer/visualization/hooks/tests/usePanelContextMenu.test.ts
+++ b/frontend/src/container/DashboardContainer/visualization/hooks/tests/usePanelContextMenu.test.ts
@@ -1,147 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { UseQueryResult } from 'react-query';
-import { SuccessResponse } from 'types/api';
-import { Widgets } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-import { usePanelContextMenu } from '../usePanelContextMenu';
-
-// The hook composes `useCoordinates` (popover state) and `useGraphContextMenu`
-// (menu items). We mock both so the test focuses on the `enableDrillDown` gate
-// rather than the implementation of the menu wiring itself.
-const onClickMock = jest.fn();
-jest.mock('periscope/components/ContextMenu', () => ({
-	useCoordinates: (): unknown => ({
-		coordinates: null,
-		popoverPosition: null,
-		clickedData: null,
-		onClose: jest.fn(),
-		subMenu: null,
-		onClick: onClickMock,
-		setSubMenu: jest.fn(),
-	}),
-}));
-
-jest.mock('container/QueryTable/Drilldown/useGraphContextMenu', () => ({
-	__esModule: true,
-	default: (): { menuItemsConfig: { header: string; items: string } } => ({
-		menuItemsConfig: { header: 'menu-header', items: 'menu-items' },
-	}),
-}));
-
-jest.mock('container/QueryTable/Drilldown/drilldownUtils', () => ({
-	getUplotClickData: jest.fn(() => ({
-		coord: { x: 1, y: 2 },
-		record: { queryName: 'A', filters: [] },
-		label: 'lbl',
-		seriesColor: '#abc',
-	})),
-}));
-
-jest.mock('container/PanelWrapper/utils', () => ({
-	isApmMetric: jest.fn(() => false),
-	getTimeRangeFromStepInterval: jest.fn(() => ({ start: 0, end: 0 })),
-}));
-
-const mockWidget = { id: 'w-1', query: {} } as unknown as Widgets;
-const mockQueryResponse = {
-	data: undefined,
-	isLoading: false,
-} as unknown as UseQueryResult<
-	SuccessResponse<MetricRangePayloadProps, unknown>,
-	Error
->;
-
-describe('usePanelContextMenu', () => {
-	beforeEach(() => {
-		onClickMock.mockClear();
-	});
-
-	it('returns empty menuItemsConfig when enableDrillDown is false', () => {
-		const { result } = renderHook(() =>
-			usePanelContextMenu({
-				widget: mockWidget,
-				queryResponse: mockQueryResponse,
-				enableDrillDown: false,
-			}),
-		);
-
-		expect(result.current.menuItemsConfig).toStrictEqual({});
-	});
-
-	it('returns wired menuItemsConfig when enableDrillDown is true', () => {
-		const { result } = renderHook(() =>
-			usePanelContextMenu({
-				widget: mockWidget,
-				queryResponse: mockQueryResponse,
-				enableDrillDown: true,
-			}),
-		);
-
-		expect(result.current.menuItemsConfig).toStrictEqual({
-			header: 'menu-header',
-			items: 'menu-items',
-		});
-	});
-
-	it('clickHandlerWithContextMenu is a no-op when enableDrillDown is false', () => {
-		const { result } = renderHook(() =>
-			usePanelContextMenu({
-				widget: mockWidget,
-				queryResponse: mockQueryResponse,
-				enableDrillDown: false,
-			}),
-		);
-
-		result.current.clickHandlerWithContextMenu(
-			100, // xValue
-			200, // yValue
-			0, // mouseX
-			0, // mouseY
-			{ serviceName: 'svc' }, // metric
-			{ queryName: 'A', inFocusOrNot: true }, // queryData
-			10, // absoluteMouseX
-			20, // absoluteMouseY
-			{}, // axesData
-			{ seriesIndex: 0, seriesName: 'A', value: 1, color: '#abc' }, // focusedSeries
-		);
-
-		expect(onClickMock).not.toHaveBeenCalled();
-	});
-
-	it('clickHandlerWithContextMenu opens popover when enableDrillDown is true', () => {
-		const { result } = renderHook(() =>
-			usePanelContextMenu({
-				widget: mockWidget,
-				queryResponse: mockQueryResponse,
-				enableDrillDown: true,
-			}),
-		);
-
-		result.current.clickHandlerWithContextMenu(
-			100,
-			200,
-			0,
-			0,
-			{ serviceName: 'svc' },
-			{ queryName: 'A', inFocusOrNot: true },
-			10,
-			20,
-			{},
-			{ seriesIndex: 0, seriesName: 'A', value: 1, color: '#abc' },
-		);
-
-		expect(onClickMock).toHaveBeenCalledTimes(1);
-	});
-
-	it('defaults to disabled when enableDrillDown is not provided', () => {
-		const { result } = renderHook(() =>
-			usePanelContextMenu({
-				widget: mockWidget,
-				queryResponse: mockQueryResponse,
-			}),
-		);
-
-		expect(result.current.menuItemsConfig).toStrictEqual({});
-	});
-});
--- a/frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts
+++ b/frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts
@@ -21,13 +21,11 @@ interface UseTimeSeriesContextMenuParams {
 		SuccessResponse<MetricRangePayloadProps, unknown>,
 		Error
 	>;
-	enableDrillDown?: boolean;
 }

 export const usePanelContextMenu = ({
 	widget,
 	queryResponse,
-	enableDrillDown = false,
 }: UseTimeSeriesContextMenuParams): {
 	coordinates: { x: number; y: number } | null;
 	popoverPosition: PopoverPosition | null;
@@ -63,9 +61,6 @@ export const usePanelContextMenu = ({

 	const clickHandlerWithContextMenu = useCallback(
 		(...args: any[]) => {
-			if (!enableDrillDown) {
-				return;
-			}
 			const [
 				xValue,
 				_yvalue,
@@ -117,14 +112,14 @@ export const usePanelContextMenu = ({
 				});
 			}
 		},
-		[enableDrillDown, onClick, queryResponse],
+		[onClick, queryResponse],
 	);

 	return {
 		coordinates,
 		popoverPosition,
 		onClose,
-		menuItemsConfig: enableDrillDown ? menuItemsConfig : {},
+		menuItemsConfig,
 		clickHandlerWithContextMenu,
 	};
 };
--- a/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx
@@ -31,7 +31,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		isFullViewMode,
 		onToggleModelHandler,
 		groupByPerQuery,
-		enableDrillDown = false,
 	} = props;
 	const uPlotRef = useRef<uPlot | null>(null);
 	const graphRef = useRef<HTMLDivElement>(null);
@@ -62,7 +61,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	} = usePanelContextMenu({
 		widget,
 		queryResponse,
-		enableDrillDown,
 	});

 	const config = useMemo(() => {
--- a/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx
@@ -31,7 +31,6 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		isFullViewMode,
 		onToggleModelHandler,
 		groupByPerQuery,
-		enableDrillDown = false,
 	} = props;
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
@@ -61,7 +60,6 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	} = usePanelContextMenu({
 		widget,
 		queryResponse,
-		enableDrillDown,
 	});

 	const chartData = useMemo(() => {
--- a/frontend/src/container/Download/Download.tsx
+++ b/frontend/src/container/Download/Download.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { CloudDownload } from '@signozhq/icons';
-import { Button, Dropdown, MenuProps, Flex } from 'antd';
+import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
+import { Button, Flex } from 'antd';
 import { unparse } from 'papaparse';

 import { DownloadProps } from './Download.types';
@@ -67,7 +68,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 	};

 	return (
-		<Dropdown menu={menu} trigger={['click']}>
+		<DropdownMenuSimple menu={menu}>
 			<Button
 				className="download-button"
 				loading={isLoading || isDownloading}
@@ -79,7 +80,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 					Download
 				</Flex>
 			</Button>
-		</Dropdown>
+		</DropdownMenuSimple>
 	);
 }

--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@@ -19,11 +19,11 @@ import {
 	Info,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	ColorPicker,
 	Divider,
+	Input,
 	Modal,
 	RefSelectProps,
 	Select,
--- a/frontend/src/container/FormAlertChannels/Settings/Email.tsx
+++ b/frontend/src/container/FormAlertChannels/Settings/Email.tsx
@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
+
 import { EmailChannel } from '../../CreateAlertChannels/config';

 function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {
--- a/frontend/src/container/FormAlertChannels/Settings/Webhook.tsx
+++ b/frontend/src/container/FormAlertChannels/Settings/Webhook.tsx
@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';

 import { WebhookChannel } from '../../CreateAlertChannels/config';
--- a/frontend/src/container/FormAlertChannels/index.tsx
+++ b/frontend/src/container/FormAlertChannels/index.tsx
@@ -1,7 +1,6 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Form, FormInstance, Select, Switch } from 'antd';
+import { Form, FormInstance, Input, Select, Switch } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/frontend/src/container/FormAlertRules/index.tsx
@@ -38,7 +38,6 @@ import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/map
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
 import { isEmpty, isEqual } from 'lodash-es';
 import Tabs2 from 'periscope/components/Tabs2';
-import { useAlertRuleOptional } from 'providers/Alert';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { AppState } from 'store/reducers';
@@ -93,6 +92,7 @@ const ALERT_SETUP_GUIDE_URLS: Record<AlertTypes, string> = {
 		'https://signoz.io/docs/alerts-management/anomaly-based-alerts/?utm_source=product&utm_medium=alert-creation-page',
 };

+// eslint-disable-next-line sonarjs/cognitive-complexity
 function FormAlertRules({
 	alertType,
 	formInstance,
@@ -160,32 +160,6 @@ function FormAlertRules({
 	const [alertDef, setAlertDef] = useState<AlertDef>(initialValue);
 	const [yAxisUnit, setYAxisUnit] = useState<string>(currentQuery.unit || '');

-	const alertRuleContext = useAlertRuleOptional();
-	const providerAlertName = alertRuleContext?.alertRuleName;
-	useEffect(() => {
-		if (providerAlertName) {
-			setAlertDef((prev) => {
-				if (prev.alert === providerAlertName) {
-					return prev;
-				}
-				return { ...prev, alert: providerAlertName };
-			});
-			formInstance.setFieldsValue({ alert: providerAlertName });
-		}
-	}, [providerAlertName, formInstance]);
-
-	// Wrap setAlertDef to sync alert name to provider when user types
-	const handleSetAlertDef = useCallback(
-		(newDef: AlertDef) => {
-			setAlertDef(newDef);
-			// Sync alert name change to provider for header display
-			if (newDef.alert !== alertDef.alert && alertRuleContext?.setAlertRuleName) {
-				alertRuleContext.setAlertRuleName(newDef.alert);
-			}
-		},
-		[alertDef.alert, alertRuleContext],
-	);
-
 	const alertTypeFromURL = urlQuery.get(QueryParams.ruleType);

 	const [detectionMethod, setDetectionMethod] = useState<string | null>(null);
@@ -706,7 +680,7 @@ function FormAlertRules({
 	const renderBasicInfo = (): JSX.Element => (
 		<BasicInfo
 			alertDef={alertDef}
-			setAlertDef={handleSetAlertDef}
+			setAlertDef={setAlertDef}
 			isNewRule={isNewRule}
 		/>
 	);
--- a/frontend/src/container/GeneralSettings/styles.ts
+++ b/frontend/src/container/GeneralSettings/styles.ts
@@ -1,8 +1,4 @@
-import {
-	Col,
-	Dropdown as DropDownComponent,
-	Input as InputComponent,
-} from 'antd';
+import { Col, Input as InputComponent } from 'antd';
 import { Typography as TypographyComponent } from '@signozhq/ui/typography';
 import styled from 'styled-components';

@@ -34,16 +30,6 @@ export const ButtonContainer = styled.div`
 	}
 `;

-export const Dropdown = styled(DropDownComponent)`
-	&&& {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		max-width: 150px;
-		min-width: 150px;
-	}
-`;
-
 export const TextContainer = styled.div`
 	&&& {
 		min-width: 100px;
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
@@ -292,8 +292,6 @@ function FullView({
 		return <Spinner height="100%" size="large" tip="Loading..." />;
 	}

-	const showEditBtn = editWidget && dashboardEditView;
-
 	return (
 		<div className="full-view-container">
 			<OverlayScrollbar>
@@ -308,7 +306,7 @@ function FullView({
 												Reset Query
 											</Button>
 										)}
-										{showEditBtn && (
+										{editWidget && (
 											<Button
 												className="switch-edit-btn"
 												disabled={response.isFetching || response.isLoading}
--- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx
@@ -1,6 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { AppProvider } from 'providers/App/App';
@@ -176,6 +177,7 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({

 describe('WidgetGraphComponent', () => {
 	it('should show correct menu items when hovering over more options while loading', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const { getByTestId, findByRole, getByText, container } = render(
 			<MockQueryClientProvider>
 				<ErrorModalProvider>
@@ -208,7 +210,7 @@ describe('WidgetGraphComponent', () => {
 		expect(skeleton).toBeInTheDocument();

 		const moreOptionsButton = getByTestId('widget-header-options');
-		fireEvent.mouseEnter(moreOptionsButton);
+		await user.click(moreOptionsButton);

 		const menu = await findByRole('menu');
 		expect(menu).toBeInTheDocument();
--- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx
+++ b/frontend/src/container/GridCardLayout/GridCardLayout.tsx
@@ -6,8 +6,7 @@ import { useIsFetching } from 'react-query';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
-import { Button, Form, Modal } from 'antd';
+import { Button, Form, Input, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
--- a/frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss
+++ b/frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss
@@ -54,6 +54,17 @@
 	visibility: visible;
 }

+// currently the width of the dropdown menu is set to 100% of the parent container,
+// which is not desired. This is a workaround to unset that width and allow the dropdown menu to size based on its content.
+// This is necessary because the dropdown menu can contain items with varying widths, and setting it to 100% can cause layout issues and make the menu look unbalanced.
+// we should idealy fix this in the dropdown menu component itself, but for now this is a quick fix to ensure the dropdown menu looks correct in the widget header.
+
+[data-radix-popper-content-wrapper]
+	[data-slot='dropdown-menu-content'].widget-header-dropdown
+	[data-slot='dropdown-menu-item'] {
+	width: unset !important;
+}
+
 .widget-api-actions {
 	padding-right: 0.25rem;
 }
--- a/frontend/src/container/GridCardLayout/WidgetHeader/tests/WidgetHeader.test.tsx
+++ b/frontend/src/container/GridCardLayout/WidgetHeader/tests/WidgetHeader.test.tsx
@@ -467,6 +467,7 @@ describe('WidgetHeader', () => {

 	describe('Create Alerts Menu Item', () => {
 		it('renders Create Alerts menu item with external link icon when included in headerMenuList', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(
 				<WidgetHeader
 					title={TEST_WIDGET_TITLE}
@@ -483,7 +484,7 @@ describe('WidgetHeader', () => {

 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
 			expect(moreOptionsIcon).toBeInTheDocument();
-			await userEvent.hover(moreOptionsIcon);
+			await user.click(moreOptionsIcon);

 			await screen.findByText(CREATE_ALERTS_TEXT);

@@ -494,6 +495,7 @@ describe('WidgetHeader', () => {
 		});

 		it('Create Alerts menu item is enabled and clickable', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			const mockCreateAlertsHandler = jest.fn();
 			const useCreateAlerts = jest.requireMock(
 				'hooks/queryBuilder/useCreateAlerts',
@@ -517,12 +519,12 @@ describe('WidgetHeader', () => {
 			expect(useCreateAlerts).toHaveBeenCalledWith(mockWidget, 'dashboardView');

 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
-			await userEvent.hover(moreOptionsIcon);
+			await user.click(moreOptionsIcon);

 			const createAlertsMenuItem = await screen.findByText(CREATE_ALERTS_TEXT);

 			// Verify the menu item is clickable by actually clicking it
-			await userEvent.click(createAlertsMenuItem);
+			await user.click(createAlertsMenuItem);
 			expect(mockCreateAlertsHandler).toHaveBeenCalledTimes(1);
 		});
 	});
--- a/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx
+++ b/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx
@@ -15,7 +15,8 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Dropdown, Input, MenuProps, Tooltip } from 'antd';
+import { Button, Input, Tooltip } from 'antd';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import { Typography } from '@signozhq/ui/typography';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import ErrorPopover from 'components/ErrorPopover/ErrorPopover';
@@ -128,7 +129,7 @@ function WidgetHeader({
 		],
 	);

-	const onMenuItemSelectHandler: MenuProps['onClick'] = useCallback(
+	const onMenuItemSelectHandler = useCallback(
 		({ key }: { key: string }): void => {
 			if (isTWidgetOptions(key)) {
 				const functionToCall = keyMethodMapping[key];
@@ -188,18 +189,8 @@ function WidgetHeader({
 			{
 				key: MenuItemKeys.CreateAlerts,
 				icon: <Bell size="md" />,
-				label: (
-					<span
-						style={{
-							display: 'flex',
-							alignItems: 'baseline',
-							justifyContent: 'space-between',
-						}}
-					>
-						{MENUITEM_KEYS_VS_LABELS[MenuItemKeys.CreateAlerts]}
-						<SquareArrowOutUpRight size={10} />
-					</span>
-				),
+				label: MENUITEM_KEYS_VS_LABELS[MenuItemKeys.CreateAlerts],
+				rightIcon: <SquareArrowOutUpRight size="lg" />,
 				isVisible: headerMenuList?.includes(MenuItemKeys.CreateAlerts) || false,
 				disabled: false,
 			},
@@ -221,8 +212,10 @@ function WidgetHeader({

 	const menu = useMemo(
 		() => ({
-			items: updatedMenuList,
-			onClick: onMenuItemSelectHandler,
+			items: updatedMenuList.map((item) => ({
+				...item,
+				onClick: onMenuItemSelectHandler,
+			})),
 		}),
 		[updatedMenuList, onMenuItemSelectHandler],
 	);
@@ -321,7 +314,12 @@ function WidgetHeader({
 							/>
 						)}
 						{menu && Array.isArray(menu.items) && menu.items.length > 0 && (
-							<Dropdown menu={menu} trigger={['hover']} placement="bottomRight">
+							<DropdownMenuSimple
+								menu={menu}
+								side="bottom"
+								align="end"
+								className="widget-header-dropdown"
+							>
 								<Button
 									data-testid="widget-header-options"
 									className={`widget-header-more-options ${
@@ -329,7 +327,7 @@ function WidgetHeader({
 									}`}
 									icon={<EllipsisVertical size="md" />}
 								/>
-							</Dropdown>
+							</DropdownMenuSimple>
 						)}
 					</div>
 				</>
--- a/frontend/src/container/GridCardLayout/WidgetHeader/types.ts
+++ b/frontend/src/container/GridCardLayout/WidgetHeader/types.ts
@@ -6,6 +6,7 @@ export interface MenuItem {
 	key: MenuItemKeys;
 	icon: ReactNode;
 	label: ReactNode;
+	rightIcon?: ReactNode;
 	isVisible: boolean;
 	disabled: boolean;
 	danger?: boolean;
--- a/frontend/src/container/GridCardLayout/WidgetHeader/utils.ts
+++ b/frontend/src/container/GridCardLayout/WidgetHeader/utils.ts
@@ -1,9 +1,9 @@
-import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
+import type { MenuItem as DropdownMenuItem } from '@signozhq/ui/dropdown-menu';

 import { MenuItemKeys } from './contants';
 import { MenuItem } from './types';

-export const generateMenuList = (actions: MenuItem[]): MenuItemType[] =>
+export const generateMenuList = (actions: MenuItem[]): DropdownMenuItem[] =>
 	actions
 		.filter((action: MenuItem) => action.isVisible)
 		.map(({ key, icon: Icon, label, disabled, ...rest }) => ({
--- a/frontend/src/container/Home/Home.tsx
+++ b/frontend/src/container/Home/Home.tsx
@@ -18,8 +18,6 @@ import listUserPreferences from 'api/v1/user/preferences/list';
 import updateUserPreferenceAPI from 'api/v1/user/preferences/name/update';
 import Header from 'components/Header/Header';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-import NoAuthBanner from 'components/NoAuthBanner/NoAuthBanner';
-import { getIsNoAuthMode } from 'utils/noAuthMode';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
@@ -198,7 +196,7 @@ export default function Home(): JSX.Element {
 	const { mutate: updateUserPreference } = useMutation(updateUserPreferenceAPI, {
 		onSuccess: () => {
 			setUpdatingUserPreferences(false);
-			void refetchUserPreferences();
+			refetchUserPreferences();
 		},
 		onError: () => {
 			setUpdatingUserPreferences(false);
@@ -206,7 +204,7 @@ export default function Home(): JSX.Element {
 	});

 	const handleWillDoThisLater = (): void => {
-		void logEvent('Welcome Checklist: Will do this later clicked', {});
+		logEvent('Welcome Checklist: Will do this later clicked', {});
 		setUpdatingUserPreferences(true);

 		updateUserPreference({
@@ -273,12 +271,11 @@ export default function Home(): JSX.Element {
 	}, [metricsOnboardingData, handleUpdateChecklistDoneItem]);

 	useEffect(() => {
-		void logEvent('Homepage: Visited', {});
+		logEvent('Homepage: Visited', {});
 	}, []);

 	return (
 		<div className="home-container">
-			{getIsNoAuthMode() && <NoAuthBanner />}
 			<div className="sticky-header">
 				<Header
 					leftComponent={
@@ -301,9 +298,9 @@ export default function Home(): JSX.Element {
 									autoAdjustOverflow
 									onOpenChange={(visible): void => {
 										if (visible) {
-											void logEvent('Welcome Checklist: Expanded', {});
+											logEvent('Welcome Checklist: Expanded', {});
 										} else {
-											void logEvent('Welcome Checklist: Minimized', {});
+											logEvent('Welcome Checklist: Minimized', {});
 										}
 									}}
 									content={renderWelcomeChecklistModal()}
@@ -356,7 +353,7 @@ export default function Home(): JSX.Element {
 											className="active-ingestion-card-actions"
 											onClick={(e: React.MouseEvent): void => {
 												// eslint-disable-next-line sonarjs/no-duplicate-string
-												void logEvent('Homepage: Ingestion Active Explore clicked', {
+												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Logs',
 												});
 												safeNavigate(ROUTES.LOGS_EXPLORER, {
@@ -365,7 +362,7 @@ export default function Home(): JSX.Element {
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
-													void logEvent('Homepage: Ingestion Active Explore clicked', {
+													logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Logs',
 													});
 													history.push(ROUTES.LOGS_EXPLORER);
@@ -399,7 +396,7 @@ export default function Home(): JSX.Element {
 											role="button"
 											tabIndex={0}
 											onClick={(e: React.MouseEvent): void => {
-												void logEvent('Homepage: Ingestion Active Explore clicked', {
+												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Traces',
 												});
 												safeNavigate(ROUTES.TRACES_EXPLORER, {
@@ -408,7 +405,7 @@ export default function Home(): JSX.Element {
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
-													void logEvent('Homepage: Ingestion Active Explore clicked', {
+													logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Traces',
 													});
 													history.push(ROUTES.TRACES_EXPLORER);
@@ -442,7 +439,7 @@ export default function Home(): JSX.Element {
 											role="button"
 											tabIndex={0}
 											onClick={(e: React.MouseEvent): void => {
-												void logEvent('Homepage: Ingestion Active Explore clicked', {
+												logEvent('Homepage: Ingestion Active Explore clicked', {
 													source: 'Metrics',
 												});
 												safeNavigate(ROUTES.METRICS_EXPLORER, {
@@ -451,7 +448,7 @@ export default function Home(): JSX.Element {
 											}}
 											onKeyDown={(e): void => {
 												if (e.key === 'Enter') {
-													void logEvent('Homepage: Ingestion Active Explore clicked', {
+													logEvent('Homepage: Ingestion Active Explore clicked', {
 														source: 'Metrics',
 													});
 													history.push(ROUTES.METRICS_EXPLORER);
@@ -499,7 +496,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Wrench size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													void logEvent('Homepage: Explore clicked', {
+													logEvent('Homepage: Explore clicked', {
 														source: 'Logs',
 													});
 													safeNavigate(ROUTES.LOGS_EXPLORER, {
@@ -516,7 +513,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Wrench size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													void logEvent('Homepage: Explore clicked', {
+													logEvent('Homepage: Explore clicked', {
 														source: 'Traces',
 													});
 													safeNavigate(ROUTES.TRACES_EXPLORER, {
@@ -533,7 +530,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Wrench size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													void logEvent('Homepage: Explore clicked', {
+													logEvent('Homepage: Explore clicked', {
 														source: 'Metrics',
 													});
 													safeNavigate(ROUTES.METRICS_EXPLORER_EXPLORER, {
@@ -572,7 +569,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Plus size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													void logEvent('Homepage: Explore clicked', {
+													logEvent('Homepage: Explore clicked', {
 														source: 'Dashboards',
 													});
 													safeNavigate(ROUTES.ALL_DASHBOARD, {
@@ -617,7 +614,7 @@ export default function Home(): JSX.Element {
 												className="periscope-btn secondary"
 												prefix={<Plus size={14} />}
 												onClick={(e: React.MouseEvent): void => {
-													void logEvent('Homepage: Explore clicked', {
+													logEvent('Homepage: Explore clicked', {
 														source: 'Alerts',
 													});
 													safeNavigate(ROUTES.ALERTS_NEW, {
--- a/frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx
+++ b/frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx
@@ -5,12 +5,12 @@ import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
 import {
 	Col,
 	Collapse,
 	DatePicker,
 	Form,
+	Input,
 	InputNumber,
 	Modal,
 	Row,
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx
@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
 import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';

 function RenderConnectionFields({
--- a/frontend/src/container/Licenses/ApplyLicenseForm.tsx
+++ b/frontend/src/container/Licenses/ApplyLicenseForm.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Button, Form } from 'antd';
+import { Button, Form, Input } from 'antd';
 import apply from 'api/v3/licenses/post';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';
--- a/frontend/src/container/ListAlertRules/ListAlert.tsx
+++ b/frontend/src/container/ListAlertRules/ListAlert.tsx
@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { Button, Flex, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Plus } from '@signozhq/icons';
+import { Ellipsis, Plus } from '@signozhq/icons';
+import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
 import type { ColumnsType } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -15,7 +16,6 @@ import type {
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import { AxiosError } from 'axios';
-import DropDown from 'components/DropDown/DropDown';
 import {
 	DynamicColumnsKey,
 	TableDataSource,
@@ -111,7 +111,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				number: allAlertRules?.length,
 				layout: 'new',
 			});
-			safeNavigate(ROUTES.ALERTS_NEW, {
+			safeNavigate(ROUTES.ALERT_TYPE_SELECTION, {
 				newTab: isModifierKeyPressed(e),
 			});
 		},
@@ -323,55 +323,67 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			dataIndex: 'id',
 			key: 'action',
 			width: 10,
-			render: (id: RuletypesRuleDTO['id'], record): JSX.Element => (
-				<div data-testid="alert-actions">
-					<DropDown
-						onDropDownItemClick={(item): void =>
-							alertActionLogEvent(item.key, record)
+			render: (id: RuletypesRuleDTO['id'], record): JSX.Element => {
+				const actionItems = [
+					<ToggleAlertState
+						key="1"
+						disabled={record.disabled ?? false}
+						setData={setData}
+						id={id ?? ''}
+					/>,
+					<ColumnButton
+						key="2"
+						onClick={(e: React.MouseEvent): void =>
+							onEditHandler(record, { newTab: isModifierKeyPressed(e) })
 						}
-						element={[
-							<ToggleAlertState
-								key="1"
-								disabled={record.disabled ?? false}
-								setData={setData}
-								id={id ?? ''}
-							/>,
-							<ColumnButton
-								key="2"
-								onClick={(e: React.MouseEvent): void =>
-									onEditHandler(record, { newTab: isModifierKeyPressed(e) })
-								}
+						type="link"
+						loading={editLoader}
+					>
+						Edit
+					</ColumnButton>,
+					<ColumnButton
+						key="3-new-tab"
+						onClick={(): void => onEditHandler(record, { newTab: true })}
+						type="link"
+						loading={editLoader}
+					>
+						Edit in New Tab
+					</ColumnButton>,
+					<ColumnButton
+						key="3-clone"
+						onClick={onCloneHandler(record)}
+						type="link"
+						loading={cloneLoader}
+					>
+						Clone
+					</ColumnButton>,
+					<DeleteAlert
+						key="4"
+						notifications={notificationsApi}
+						setData={setData}
+						id={id ?? ''}
+					/>,
+				];
+				return (
+					<div data-testid="alert-actions">
+						<DropdownMenuSimple
+							menu={{
+								items: actionItems.map((element, index) => ({
+									key: String(index),
+									label: element,
+									onClick: ({ key }): void => alertActionLogEvent(key, record),
+								})),
+							}}
+						>
+							<Button
 								type="link"
-								loading={editLoader}
-							>
-								Edit
-							</ColumnButton>,
-							<ColumnButton
-								key="3"
-								onClick={(): void => onEditHandler(record, { newTab: true })}
-								type="link"
-								loading={editLoader}
-							>
-								Edit in New Tab
-							</ColumnButton>,
-							<ColumnButton
-								key="3"
-								onClick={onCloneHandler(record)}
-								type="link"
-								loading={cloneLoader}
-							>
-								Clone
-							</ColumnButton>,
-							<DeleteAlert
-								key="4"
-								notifications={notificationsApi}
-								setData={setData}
-								id={id ?? ''}
-							/>,
-						]}
-					/>
-				</div>
-			),
+								style={{ color: 'var(--l1-foreground)' }}
+								icon={<Ellipsis size={16} />}
+							/>
+						</DropdownMenuSimple>
+					</div>
+				);
+			},
 		});
 	}

--- a/frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { ChangeEvent, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Modal } from 'antd';
+import { Button, Input, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
 import DockerIcon from 'assets/CustomIcons/DockerIcon';
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -12,12 +12,11 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
+import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import {
 	Button,
-	Dropdown,
 	Flex,
-	MenuProps,
+	Input,
 	Modal,
 	Popover,
 	Skeleton,
@@ -553,7 +552,7 @@ function DashboardsList(): JSX.Element {
 	];

 	const getCreateDashboardItems = useMemo(() => {
-		const menuItems: MenuProps['items'] = [
+		const menuItems: MenuItem[] = [
 			{
 				label: (
 					<div
@@ -711,11 +710,11 @@ function DashboardsList(): JSX.Element {

 						{createNewDashboard && (
 							<section className="actions">
-								<Dropdown
-									overlayClassName="new-dashboard-menu"
+								<DropdownMenuSimple
+									className="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									placement="bottomRight"
-									trigger={['click']}
+									side="bottom"
+									align="end"
 								>
 									<Button
 										type="text"
@@ -727,7 +726,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New Dashboard
 									</Button>
-								</Dropdown>
+								</DropdownMenuSimple>
 								<Button
 									type="text"
 									className="learn-more"
@@ -756,11 +755,11 @@ function DashboardsList(): JSX.Element {
 								onChange={handleSearch}
 							/>
 							{createNewDashboard && (
-								<Dropdown
-									overlayClassName="new-dashboard-menu"
+								<DropdownMenuSimple
+									className="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									placement="bottomRight"
-									trigger={['click']}
+									side="bottom"
+									align="end"
 								>
 									<Button
 										type="primary"
@@ -773,7 +772,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New dashboard
 									</Button>
-								</Dropdown>
+								</DropdownMenuSimple>
 							)}
 						</div>

--- a/frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx
+++ b/frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx
@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LoaderCircle, Check } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Space } from 'antd';
+import { Button, Input, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
--- a/frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx
+++ b/frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx
@@ -2,7 +2,13 @@ import { useCallback } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { orange } from '@ant-design/colors';
 import { Settings } from '@signozhq/icons';
-import { Dropdown, MenuProps } from 'antd';
+import {
+	type BaseMenuItem,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from '@signozhq/ui/dropdown-menu';
 import {
 	negateOperator,
 	OPERATORS,
@@ -135,41 +141,38 @@ function BodyTitleRenderer({
 		viewName,
 	]);

-	const onClickHandler: MenuProps['onClick'] = (props): void => {
+	const onClickHandler = (key: string): void => {
 		const mapper = {
 			[DROPDOWN_KEY.FILTER_IN]: filterHandler(true),
 			[DROPDOWN_KEY.FILTER_OUT]: filterHandler(false),
 			[DROPDOWN_KEY.GROUP_BY]: groupByHandler,
 		};

-		const handler = mapper[props.key];
+		const handler = mapper[key];

 		if (handler) {
 			handler();
 		}
 	};

-	const menu: MenuProps = {
-		items: [
-			{
-				key: DROPDOWN_KEY.FILTER_IN,
-				label: `Filter for ${value}`,
-			},
-			{
-				key: DROPDOWN_KEY.FILTER_OUT,
-				label: `Filter out ${value}`,
-			},
-			...(isGroupBySupported
-				? [
-						{
-							key: DROPDOWN_KEY.GROUP_BY,
-							label: `Group by ${nodeKey}`,
-						},
-					]
-				: []),
-		],
-		onClick: onClickHandler,
-	};
+	const menuItems: BaseMenuItem[] = [
+		{
+			key: DROPDOWN_KEY.FILTER_IN,
+			label: `Filter for ${value}`,
+		},
+		{
+			key: DROPDOWN_KEY.FILTER_OUT,
+			label: `Filter out ${value}`,
+		},
+		...(isGroupBySupported
+			? [
+					{
+						key: DROPDOWN_KEY.GROUP_BY,
+						label: `Group by ${nodeKey}`,
+					},
+				]
+			: []),
+	];

 	const handleNodeClick = useCallback(
 		(e: React.MouseEvent): void => {
@@ -218,15 +221,23 @@ function BodyTitleRenderer({
 					}}
 					onMouseDown={(e): void => e.preventDefault()}
 				>
-					<Dropdown
-						menu={menu}
-						trigger={['click']}
-						dropdownRender={(originNode): React.ReactNode => (
-							<div data-log-detail-ignore="true">{originNode}</div>
-						)}
-					>
-						<Settings style={{ marginRight: 8 }} className="hover-reveal" />
-					</Dropdown>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Settings style={{ marginRight: 8 }} className="hover-reveal" />
+						</DropdownMenuTrigger>
+						<DropdownMenuContent>
+							<div data-log-detail-ignore="true">
+								{menuItems.map((item) => (
+									<DropdownMenuItem
+										key={item.key}
+										onSelect={(): void => onClickHandler(item.key as string)}
+									>
+										{item.label}
+									</DropdownMenuItem>
+								))}
+							</div>
+						</DropdownMenuContent>
+					</DropdownMenu>
 				</span>
 			)}
 			{title.toString()}{' '}
--- a/frontend/src/container/LogDetailedView/FieldRenderer.styles.scss
+++ b/frontend/src/container/LogDetailedView/FieldRenderer.styles.scss
@@ -22,9 +22,3 @@
 		gap: 8px;
 	}
 }
-
-// FieldRenderer is used inside log/trace/metric detail drawers (z-index 1000).
-// The design-system tooltip defaults to z-index 50 and would render behind them.
-.field-renderer-tooltip-content {
-	--tooltip-z-index: 1000;
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Gaurav Tewari	634166860b	fix: add dropdown to list	2026-05-22 01:40:15 +05:30
Gaurav Tewari	af8f2fa95a	chore: self review comments	2026-05-22 01:32:54 +05:30
Gaurav Tewari	f81fd78ff6	fix: lint	2026-05-21 22:09:24 +05:30
Gaurav Tewari	b589a7b2e9	fix: failing test	2026-05-21 20:24:03 +05:30
Gaurav Tewari	716dbc7847	chore: migration from antd	2026-05-21 18:05:21 +05:30
Gaurav Tewari	3a92c7577f	fix: another bug	2026-05-21 16:00:12 +05:30
Gaurav Tewari	ba043a5741	fix: side nav issue	2026-05-21 14:59:23 +05:30
Gaurav Tewari	6d2b99eb8d	fix: self review changes	2026-05-21 14:11:13 +05:30
Gaurav Tewari	3765ca3d42	chore: migrate dropdown	2026-05-20 17:39:33 +05:30