Merge branch 'main' into nv/layout-validations

test: add integratino test for layout validation
chore: validate layout size and positioning in backend
2026-07-01 12:20:38 +01:00 · 2026-07-01 12:50:02 +05:30 · 2026-07-01 12:49:27 +05:30 · 2026-07-01 12:32:08 +05:30 · 2026-07-01 06:31:20 +00:00 · 2026-07-01 05:42:46 +00:00
152 changed files with 5984 additions and 3206 deletions
--- a/cmd/enterprise/server.go
+++ b/cmd/enterprise/server.go
@@ -177,9 +177,11 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 				return nil, err
 			}
 			azureCloudProviderModule := implcloudprovider.NewAzureCloudProvider(defStore)
+			gcpCloudProviderModule := implcloudprovider.NewGCPCloudProvider(defStore)
 			cloudProvidersMap := map[cloudintegrationtypes.CloudProviderType]cloudintegration.CloudProviderModule{
 				cloudintegrationtypes.CloudProviderTypeAWS:   awsCloudProviderModule,
 				cloudintegrationtypes.CloudProviderTypeAzure: azureCloudProviderModule,
+				cloudintegrationtypes.CloudProviderTypeGCP:   gcpCloudProviderModule,
 			}

 			return implcloudintegration.NewModule(pkgcloudintegration.NewStore(sqlStore), dashboardModule, global, zeus, gateway, licensing, serviceAccount, cloudProvidersMap, config)
--- a/conf/example.yaml
+++ b/conf/example.yaml
@@ -65,15 +65,31 @@ web:
    posthog:
      # Whether to enable PostHog in web.
      enabled: false
+      # The PostHog project API key.
+      key: ""
+      # The PostHog API host. Defaults to https://us.i.posthog.com when empty.
+      api_host: ""
+      # The PostHog UI host. Used when api_host points at a reverse proxy.
+      ui_host: ""
    appcues:
      # Whether to enable Appcues in web.
      enabled: false
+      # The Appcues account/app ID.
+      app_id: ""
    sentry:
      # Whether to enable Sentry in web.
      enabled: false
+      # The Sentry DSN.
+      dsn: ""
+      # The Sentry tunnel URL.
+      tunnel: ""
    pylon:
      # Whether to enable Pylon in web.
      enabled: false
+      # The Pylon app ID.
+      app_id: ""
+      # The Pylon identity verification secret.
+      identity_secret: ""

 ##################### Cache #####################
 cache:
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -1024,6 +1024,8 @@ components:
          $ref: '#/components/schemas/CloudintegrationtypesAWSAccountConfig'
        azure:
          $ref: '#/components/schemas/CloudintegrationtypesAzureAccountConfig'
+        gcp:
+          $ref: '#/components/schemas/CloudintegrationtypesGCPAccountConfig'
      type: object
    CloudintegrationtypesAgentReport:
      nullable: true
@@ -1169,6 +1171,8 @@ components:
          $ref: '#/components/schemas/CloudintegrationtypesAWSConnectionArtifact'
        azure:
          $ref: '#/components/schemas/CloudintegrationtypesAzureConnectionArtifact'
+        gcp:
+          $ref: '#/components/schemas/CloudintegrationtypesGCPConnectionArtifact'
      type: object
    CloudintegrationtypesCredentials:
      properties:
@@ -1199,6 +1203,46 @@ components:
          nullable: true
          type: array
      type: object
+    CloudintegrationtypesGCPAccountConfig:
+      properties:
+        deploymentProjectId:
+          type: string
+        deploymentRegion:
+          type: string
+        projectIds:
+          items:
+            type: string
+          type: array
+      required:
+      - deploymentProjectId
+      - deploymentRegion
+      - projectIds
+      type: object
+    CloudintegrationtypesGCPConnectionArtifact:
+      type: object
+    CloudintegrationtypesGCPIntegrationConfig:
+      type: object
+    CloudintegrationtypesGCPServiceConfig:
+      properties:
+        logs:
+          $ref: '#/components/schemas/CloudintegrationtypesGCPServiceLogsConfig'
+        metrics:
+          $ref: '#/components/schemas/CloudintegrationtypesGCPServiceMetricsConfig'
+      type: object
+    CloudintegrationtypesGCPServiceLogsConfig:
+      properties:
+        enabled:
+          type: boolean
+      required:
+      - enabled
+      type: object
+    CloudintegrationtypesGCPServiceMetricsConfig:
+      properties:
+        enabled:
+          type: boolean
+      required:
+      - enabled
+      type: object
    CloudintegrationtypesGettableAccountWithConnectionArtifact:
      properties:
        connectionArtifact:
@@ -1331,6 +1375,8 @@ components:
          $ref: '#/components/schemas/CloudintegrationtypesAWSPostableAccountConfig'
        azure:
          $ref: '#/components/schemas/CloudintegrationtypesAzureAccountConfig'
+        gcp:
+          $ref: '#/components/schemas/CloudintegrationtypesGCPAccountConfig'
      type: object
    CloudintegrationtypesPostableAgentCheckIn:
      properties:
@@ -1355,6 +1401,8 @@ components:
          $ref: '#/components/schemas/CloudintegrationtypesAWSIntegrationConfig'
        azure:
          $ref: '#/components/schemas/CloudintegrationtypesAzureIntegrationConfig'
+        gcp:
+          $ref: '#/components/schemas/CloudintegrationtypesGCPIntegrationConfig'
      type: object
    CloudintegrationtypesService:
      properties:
@@ -1399,6 +1447,8 @@ components:
          $ref: '#/components/schemas/CloudintegrationtypesAWSServiceConfig'
        azure:
          $ref: '#/components/schemas/CloudintegrationtypesAzureServiceConfig'
+        gcp:
+          $ref: '#/components/schemas/CloudintegrationtypesGCPServiceConfig'
      type: object
    CloudintegrationtypesServiceDashboard:
      properties:
@@ -1441,6 +1491,7 @@ components:
      - cosmosdb
      - cassandradb
      - redis
+      - cloudsql
      type: string
    CloudintegrationtypesServiceMetadata:
      properties:
@@ -1502,6 +1553,8 @@ components:
          $ref: '#/components/schemas/CloudintegrationtypesAWSAccountConfig'
        azure:
          $ref: '#/components/schemas/CloudintegrationtypesUpdatableAzureAccountConfig'
+        gcp:
+          $ref: '#/components/schemas/CloudintegrationtypesUpdatableGCPAccountConfig'
      type: object
    CloudintegrationtypesUpdatableAzureAccountConfig:
      properties:
@@ -1512,6 +1565,22 @@ components:
      required:
      - resourceGroups
      type: object
+    CloudintegrationtypesUpdatableGCPAccountConfig:
+      properties:
+        deploymentProjectId:
+          type: string
+        deploymentRegion:
+          type: string
+        projectIds:
+          items:
+            type: string
+          nullable: true
+          type: array
+      required:
+      - deploymentProjectId
+      - deploymentRegion
+      - projectIds
+      type: object
    CloudintegrationtypesUpdatableService:
      properties:
        config:
@@ -6212,6 +6281,25 @@ components:
      - asc
      - desc
      type: string
+    Querybuildertypesv5PreviewStatement:
+      properties:
+        db.statement.args:
+          items: {}
+          type: array
+        db.statement.query:
+          type: string
+        estimate:
+          items:
+            $ref: '#/components/schemas/TelemetrystoretypesEstimateEntry'
+          type: array
+        granules:
+          $ref: '#/components/schemas/TelemetrystoretypesGranules'
+      required:
+      - db.statement.query
+      - db.statement.args
+      - estimate
+      - granules
+      type: object
    Querybuildertypesv5PromQuery:
      properties:
        disabled:
@@ -6532,6 +6620,40 @@ components:
      required:
      - type
      type: object
+    Querybuildertypesv5QueryPreview:
+      properties:
+        error: {}
+        statements:
+          items:
+            $ref: '#/components/schemas/Querybuildertypesv5PreviewStatement'
+          type: array
+        valid:
+          type: boolean
+        warnings:
+          items:
+            type: string
+          type: array
+      required:
+      - valid
+      - error
+      - warnings
+      - statements
+      type: object
+    Querybuildertypesv5QueryRangePreviewResponse:
+      description: Response from the v5 query range preview (dry-run) endpoint. For
+        each query in the composite query, returns the underlying ClickHouse statement(s)
+        it renders to without executing them (one per PromQL metric selector; exactly
+        one for builder/ClickHouse/trace-operator queries), with the optional EXPLAIN
+        ESTIMATE and granule analysis attached per statement when requested.
+      properties:
+        compositeQuery:
+          additionalProperties:
+            $ref: '#/components/schemas/Querybuildertypesv5QueryPreview'
+          nullable: true
+          type: object
+      required:
+      - compositeQuery
+      type: object
    Querybuildertypesv5QueryRangeRequest:
      description: Request body for the v5 query range endpoint. Supports builder
        queries (traces, logs, metrics), formulas, joins, trace operators, PromQL,
@@ -7882,6 +8004,96 @@ components:
      - key
      - value
      type: object
+    TelemetrystoretypesEstimateEntry:
+      properties:
+        database:
+          type: string
+        marks:
+          format: int64
+          type: integer
+        parts:
+          format: int64
+          type: integer
+        rows:
+          format: int64
+          type: integer
+        table:
+          type: string
+      required:
+      - database
+      - table
+      - parts
+      - rows
+      - marks
+      type: object
+    TelemetrystoretypesGranules:
+      nullable: true
+      properties:
+        initial:
+          format: int64
+          type: integer
+        reads:
+          items:
+            $ref: '#/components/schemas/TelemetrystoretypesMergeTreeRead'
+          type: array
+        selected:
+          format: int64
+          type: integer
+        skipped:
+          format: int64
+          type: integer
+      required:
+      - initial
+      - selected
+      - skipped
+      - reads
+      type: object
+    TelemetrystoretypesIndexStep:
+      properties:
+        condition:
+          type: string
+        initialGranules:
+          format: int64
+          type: integer
+        initialParts:
+          format: int64
+          type: integer
+        keys:
+          items:
+            type: string
+          type: array
+        name:
+          type: string
+        selectedGranules:
+          format: int64
+          type: integer
+        selectedParts:
+          format: int64
+          type: integer
+        type:
+          type: string
+      required:
+      - type
+      - name
+      - keys
+      - condition
+      - initialParts
+      - selectedParts
+      - initialGranules
+      - selectedGranules
+      type: object
+    TelemetrystoretypesMergeTreeRead:
+      properties:
+        steps:
+          items:
+            $ref: '#/components/schemas/TelemetrystoretypesIndexStep'
+          type: array
+        table:
+          type: string
+      required:
+      - table
+      - steps
+      type: object
    TelemetrytypesFieldContext:
      enum:
      - metric
@@ -23413,6 +23625,75 @@ paths:
      summary: Query range
      tags:
      - querier
+  /api/v5/query_range/preview:
+    post:
+      deprecated: false
+      description: 'Validate a composite query without executing it. Accepts the same
+        payload as the query range endpoint. By default (verbose=true) returns, for
+        each query, the rendered underlying ClickHouse statement(s) with each statement''s
+        EXPLAIN ESTIMATE (per-table parts/rows/marks) and granule index analysis (candidate/surviving
+        granules and the per-index pruning funnel). Pass ?verbose=false for the lightweight
+        per-query verdict (valid/error/warnings) with no rendered SQL and no ClickHouse
+        round trips. Intended for agentic/dry-run consumption: per-query errors are
+        reported in the response rather than failing the whole request.'
+      operationId: QueryRangePreviewV5
+      parameters:
+      - in: query
+        name: verbose
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/Querybuildertypesv5QueryRangeRequest'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/Querybuildertypesv5QueryRangePreviewResponse'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Query range preview
+      tags:
+      - querier
  /api/v5/substitute_vars:
    post:
      deprecated: false
--- a/ee/modules/cloudintegration/implcloudintegration/implcloudprovider/gcpcloudprovider.go
+++ b/ee/modules/cloudintegration/implcloudintegration/implcloudprovider/gcpcloudprovider.go
@@ -0,0 +1,36 @@
+package implcloudprovider
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/modules/cloudintegration"
+	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
+)
+
+type gcpcloudprovider struct {
+	serviceDefinitions cloudintegrationtypes.ServiceDefinitionStore
+}
+
+func NewGCPCloudProvider(defStore cloudintegrationtypes.ServiceDefinitionStore) cloudintegration.CloudProviderModule {
+	return &gcpcloudprovider{
+		serviceDefinitions: defStore,
+	}
+}
+
+func (g *gcpcloudprovider) BuildIntegrationConfig(ctx context.Context, account *cloudintegrationtypes.Account, services []*cloudintegrationtypes.StorableCloudIntegrationService) (*cloudintegrationtypes.ProviderIntegrationConfig, error) {
+	// for manual flow we don't have any integration config to return, so returning empty config for now.
+	return &cloudintegrationtypes.ProviderIntegrationConfig{}, nil
+}
+
+func (g *gcpcloudprovider) GetConnectionArtifact(ctx context.Context, account *cloudintegrationtypes.Account, req *cloudintegrationtypes.GetConnectionArtifactRequest) (*cloudintegrationtypes.ConnectionArtifact, error) {
+	// for manual flow we don't have any connection artifact to return, so returning empty artifact for now.
+	return &cloudintegrationtypes.ConnectionArtifact{}, nil
+}
+
+func (g *gcpcloudprovider) GetServiceDefinition(ctx context.Context, serviceID cloudintegrationtypes.ServiceID) (*cloudintegrationtypes.ServiceDefinition, error) {
+	return g.serviceDefinitions.Get(ctx, cloudintegrationtypes.CloudProviderTypeGCP, serviceID)
+}
+
+func (g *gcpcloudprovider) ListServiceDefinitions(ctx context.Context) ([]*cloudintegrationtypes.ServiceDefinition, error) {
+	return g.serviceDefinitions.List(ctx, cloudintegrationtypes.CloudProviderTypeGCP)
+}
--- a/ee/querier/handler.go
+++ b/ee/querier/handler.go
@@ -101,6 +101,10 @@ func (h *handler) QueryRange(rw http.ResponseWriter, req *http.Request) {
 	h.community.QueryRange(rw, req)
 }

+func (h *handler) QueryRangePreview(rw http.ResponseWriter, req *http.Request) {
+	h.community.QueryRangePreview(rw, req)
+}
+
 func (h *handler) QueryRawStream(rw http.ResponseWriter, req *http.Request) {
 	h.community.QueryRawStream(rw, req)
 }
--- a/frontend/public/locales/en-GB/titles.json
+++ b/frontend/public/locales/en-GB/titles.json
@@ -61,5 +61,7 @@
 	"ROLE_DETAILS": "SigNoz | Role Details",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
-	"PUBLIC_DASHBOARD": "SigNoz | Dashboard"
+	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
+	"LLM_OBSERVABILITY_BASE": "SigNoz | LLM Observability",
+	"LLM_OBSERVABILITY_MODEL_PRICING": "SigNoz | Model Pricing"
 }
--- a/frontend/public/locales/en/titles.json
+++ b/frontend/public/locales/en/titles.json
@@ -86,5 +86,7 @@
 	"ROLE_EDIT": "SigNoz | Edit Role",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
-	"PUBLIC_DASHBOARD": "SigNoz | Dashboard"
+	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
+	"LLM_OBSERVABILITY_BASE": "SigNoz | LLM Observability",
+	"LLM_OBSERVABILITY_MODEL_PRICING": "SigNoz | Model Pricing"
 }
--- a/frontend/src/api/generated/services/querier/index.ts
+++ b/frontend/src/api/generated/services/querier/index.ts
@@ -12,6 +12,8 @@ import type {
 } from 'react-query';

 import type {
+	QueryRangePreviewV5200,
+	QueryRangePreviewV5Params,
 	QueryRangeV5200,
 	Querybuildertypesv5QueryRangeRequestDTO,
 	RenderErrorResponseDTO,
@@ -104,6 +106,107 @@ export const useQueryRangeV5 = <
 > => {
 	return useMutation(getQueryRangeV5MutationOptions(options));
 };
+/**
+ * Validate a composite query without executing it. Accepts the same payload as the query range endpoint. By default (verbose=true) returns, for each query, the rendered underlying ClickHouse statement(s) with each statement's EXPLAIN ESTIMATE (per-table parts/rows/marks) and granule index analysis (candidate/surviving granules and the per-index pruning funnel). Pass ?verbose=false for the lightweight per-query verdict (valid/error/warnings) with no rendered SQL and no ClickHouse round trips. Intended for agentic/dry-run consumption: per-query errors are reported in the response rather than failing the whole request.
+ * @summary Query range preview
+ */
+export const queryRangePreviewV5 = (
+	querybuildertypesv5QueryRangeRequestDTO?: BodyType<Querybuildertypesv5QueryRangeRequestDTO>,
+	params?: QueryRangePreviewV5Params,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<QueryRangePreviewV5200>({
+		url: `/api/v5/query_range/preview`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: querybuildertypesv5QueryRangeRequestDTO,
+		params,
+		signal,
+	});
+};
+
+export const getQueryRangePreviewV5MutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof queryRangePreviewV5>>,
+		TError,
+		{
+			data?: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
+			params?: QueryRangePreviewV5Params;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof queryRangePreviewV5>>,
+	TError,
+	{
+		data?: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
+		params?: QueryRangePreviewV5Params;
+	},
+	TContext
+> => {
+	const mutationKey = ['queryRangePreviewV5'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+			'mutationKey' in options.mutation &&
+			options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof queryRangePreviewV5>>,
+		{
+			data?: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
+			params?: QueryRangePreviewV5Params;
+		}
+	> = (props) => {
+		const { data, params } = props ?? {};
+
+		return queryRangePreviewV5(data, params);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type QueryRangePreviewV5MutationResult = NonNullable<
+	Awaited<ReturnType<typeof queryRangePreviewV5>>
+>;
+export type QueryRangePreviewV5MutationBody =
+	| BodyType<Querybuildertypesv5QueryRangeRequestDTO>
+	| undefined;
+export type QueryRangePreviewV5MutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Query range preview
+ */
+export const useQueryRangePreviewV5 = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof queryRangePreviewV5>>,
+		TError,
+		{
+			data?: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
+			params?: QueryRangePreviewV5Params;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof queryRangePreviewV5>>,
+	TError,
+	{
+		data?: BodyType<Querybuildertypesv5QueryRangeRequestDTO>;
+		params?: QueryRangePreviewV5Params;
+	},
+	TContext
+> => {
+	return useMutation(getQueryRangePreviewV5MutationOptions(options));
+};
 /**
 * Replace variables in a query
 * @summary Replace variables
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -2630,9 +2630,25 @@ export interface CloudintegrationtypesAzureAccountConfigDTO {
 	resourceGroups: string[];
 }

+export interface CloudintegrationtypesGCPAccountConfigDTO {
+	/**
+	 * @type string
+	 */
+	deploymentProjectId: string;
+	/**
+	 * @type string
+	 */
+	deploymentRegion: string;
+	/**
+	 * @type array
+	 */
+	projectIds: string[];
+}
+
 export interface CloudintegrationtypesAccountConfigDTO {
 	aws?: CloudintegrationtypesAWSAccountConfigDTO;
 	azure?: CloudintegrationtypesAzureAccountConfigDTO;
+	gcp?: CloudintegrationtypesGCPAccountConfigDTO;
 }

 export interface CloudintegrationtypesAccountDTO {
@@ -2740,9 +2756,29 @@ export interface CloudintegrationtypesAzureServiceConfigDTO {
 	metrics: CloudintegrationtypesAzureServiceMetricsConfigDTO;
 }

+export interface CloudintegrationtypesGCPServiceLogsConfigDTO {
+	/**
+	 * @type boolean
+	 */
+	enabled: boolean;
+}
+
+export interface CloudintegrationtypesGCPServiceMetricsConfigDTO {
+	/**
+	 * @type boolean
+	 */
+	enabled: boolean;
+}
+
+export interface CloudintegrationtypesGCPServiceConfigDTO {
+	logs?: CloudintegrationtypesGCPServiceLogsConfigDTO;
+	metrics?: CloudintegrationtypesGCPServiceMetricsConfigDTO;
+}
+
 export interface CloudintegrationtypesServiceConfigDTO {
 	aws?: CloudintegrationtypesAWSServiceConfigDTO;
 	azure?: CloudintegrationtypesAzureServiceConfigDTO;
+	gcp?: CloudintegrationtypesGCPServiceConfigDTO;
 }

 export enum CloudintegrationtypesServiceIDDTO {
@@ -2773,6 +2809,7 @@ export enum CloudintegrationtypesServiceIDDTO {
 	cosmosdb = 'cosmosdb',
 	cassandradb = 'cassandradb',
 	redis = 'redis',
+	cloudsql = 'cloudsql',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -2837,9 +2874,14 @@ export interface CloudintegrationtypesCollectedMetricDTO {
 	unit?: string;
 }

+export interface CloudintegrationtypesGCPConnectionArtifactDTO {
+	[key: string]: unknown;
+}
+
 export interface CloudintegrationtypesConnectionArtifactDTO {
 	aws?: CloudintegrationtypesAWSConnectionArtifactDTO;
 	azure?: CloudintegrationtypesAzureConnectionArtifactDTO;
+	gcp?: CloudintegrationtypesGCPConnectionArtifactDTO;
 }

 export interface CloudintegrationtypesCredentialsDTO {
@@ -2872,6 +2914,10 @@ export interface CloudintegrationtypesDataCollectedDTO {
 	metrics?: CloudintegrationtypesCollectedMetricDTO[] | null;
 }

+export interface CloudintegrationtypesGCPIntegrationConfigDTO {
+	[key: string]: unknown;
+}
+
 export interface CloudintegrationtypesGettableAccountWithConnectionArtifactDTO {
 	connectionArtifact: CloudintegrationtypesConnectionArtifactDTO;
 	/**
@@ -2963,6 +3009,7 @@ export type CloudintegrationtypesIntegrationConfigDTO =
 export interface CloudintegrationtypesProviderIntegrationConfigDTO {
 	aws?: CloudintegrationtypesAWSIntegrationConfigDTO;
 	azure?: CloudintegrationtypesAzureIntegrationConfigDTO;
+	gcp?: CloudintegrationtypesGCPIntegrationConfigDTO;
 }

 export interface CloudintegrationtypesGettableAgentCheckInDTO {
@@ -3025,6 +3072,7 @@ export interface CloudintegrationtypesGettableServicesMetadataDTO {
 export interface CloudintegrationtypesPostableAccountConfigDTO {
 	aws?: CloudintegrationtypesAWSPostableAccountConfigDTO;
 	azure?: CloudintegrationtypesAzureAccountConfigDTO;
+	gcp?: CloudintegrationtypesGCPAccountConfigDTO;
 }

 export interface CloudintegrationtypesPostableAccountDTO {
@@ -3154,9 +3202,25 @@ export interface CloudintegrationtypesUpdatableAzureAccountConfigDTO {
 	resourceGroups: string[];
 }

+export interface CloudintegrationtypesUpdatableGCPAccountConfigDTO {
+	/**
+	 * @type string
+	 */
+	deploymentProjectId: string;
+	/**
+	 * @type string
+	 */
+	deploymentRegion: string;
+	/**
+	 * @type array,null
+	 */
+	projectIds: string[] | null;
+}
+
 export interface CloudintegrationtypesUpdatableAccountConfigDTO {
 	aws?: CloudintegrationtypesAWSAccountConfigDTO;
 	azure?: CloudintegrationtypesUpdatableAzureAccountConfigDTO;
+	gcp?: CloudintegrationtypesUpdatableGCPAccountConfigDTO;
 }

 export interface CloudintegrationtypesUpdatableAccountDTO {
@@ -7555,6 +7619,126 @@ export interface Querybuildertypesv5FormatOptionsDTO {
 	formatTableResultForUI?: boolean;
 }

+export interface TelemetrystoretypesEstimateEntryDTO {
+	/**
+	 * @type string
+	 */
+	database: string;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	marks: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	parts: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	rows: number;
+	/**
+	 * @type string
+	 */
+	table: string;
+}
+
+export interface TelemetrystoretypesIndexStepDTO {
+	/**
+	 * @type string
+	 */
+	condition: string;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	initialGranules: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	initialParts: number;
+	/**
+	 * @type array
+	 */
+	keys: string[];
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	selectedGranules: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	selectedParts: number;
+	/**
+	 * @type string
+	 */
+	type: string;
+}
+
+export interface TelemetrystoretypesMergeTreeReadDTO {
+	/**
+	 * @type array
+	 */
+	steps: TelemetrystoretypesIndexStepDTO[];
+	/**
+	 * @type string
+	 */
+	table: string;
+}
+
+export type TelemetrystoretypesGranulesDTOAnyOf = {
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	initial: number;
+	/**
+	 * @type array
+	 */
+	reads: TelemetrystoretypesMergeTreeReadDTO[];
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	selected: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	skipped: number;
+};
+
+/**
+ * @nullable
+ */
+export type TelemetrystoretypesGranulesDTO =
+	TelemetrystoretypesGranulesDTOAnyOf | null;
+
+export interface Querybuildertypesv5PreviewStatementDTO {
+	/**
+	 * @type array
+	 */
+	'db.statement.args': unknown[];
+	/**
+	 * @type string
+	 */
+	'db.statement.query': string;
+	/**
+	 * @type array
+	 */
+	estimate: TelemetrystoretypesEstimateEntryDTO[];
+	granules: TelemetrystoretypesGranulesDTO | null;
+}
+
 export interface Querybuildertypesv5TimeSeriesDataDTO {
 	/**
 	 * @type array,null
@@ -7636,6 +7820,41 @@ export type Querybuildertypesv5QueryDataDTO =
 			results?: unknown[] | null;
 	  });

+export interface Querybuildertypesv5QueryPreviewDTO {
+	error: unknown;
+	/**
+	 * @type array
+	 */
+	statements: Querybuildertypesv5PreviewStatementDTO[];
+	/**
+	 * @type boolean
+	 */
+	valid: boolean;
+	/**
+	 * @type array
+	 */
+	warnings: string[];
+}
+
+export type Querybuildertypesv5QueryRangePreviewResponseDTOCompositeQueryAnyOf =
+	{ [key: string]: Querybuildertypesv5QueryPreviewDTO };
+
+/**
+ * @nullable
+ */
+export type Querybuildertypesv5QueryRangePreviewResponseDTOCompositeQuery =
+	Querybuildertypesv5QueryRangePreviewResponseDTOCompositeQueryAnyOf | null;
+
+/**
+ * Response from the v5 query range preview (dry-run) endpoint. For each query in the composite query, returns the underlying ClickHouse statement(s) it renders to without executing them (one per PromQL metric selector; exactly one for builder/ClickHouse/trace-operator queries), with the optional EXPLAIN ESTIMATE and granule analysis attached per statement when requested.
+ */
+export interface Querybuildertypesv5QueryRangePreviewResponseDTO {
+	/**
+	 * @type object,null
+	 */
+	compositeQuery: Querybuildertypesv5QueryRangePreviewResponseDTOCompositeQuery;
+}
+
 export enum Querybuildertypesv5VariableTypeDTO {
 	query = 'query',
 	dynamic = 'dynamic',
@@ -11510,6 +11729,22 @@ export type QueryRangeV5200 = {
 	status: string;
 };

+export type QueryRangePreviewV5Params = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	verbose?: string;
+};
+
+export type QueryRangePreviewV5200 = {
+	data: Querybuildertypesv5QueryRangePreviewResponseDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ReplaceVariables200 = {
 	data: Querybuildertypesv5QueryRangeRequestDTO;
 	/**
--- a/frontend/src/components/InviteMembers/tests/InviteMembers.submission.test.tsx
+++ b/frontend/src/components/InviteMembers/tests/InviteMembers.submission.test.tsx
@@ -167,6 +167,7 @@ describe('InviteMembers - Submission', () => {
 							success: false,
 						}),
 					]),
+					expect.any(Array),
 				);
 			});
 		});
@@ -243,6 +244,7 @@ describe('InviteMembers - Submission', () => {
 						error: 'User already exists',
 					}),
 				]),
+				expect.any(Array),
 			);

 			await expect(
--- a/frontend/src/components/InviteMembers/types.ts
+++ b/frontend/src/components/InviteMembers/types.ts
@@ -22,9 +22,9 @@ export interface FooterRenderProps {

 export interface UseInviteMembersOptions {
 	initialRowCount?: number;
-	onSuccess?: () => void;
-	onPartialSuccess?: (results: InviteResult[]) => void;
-	onAllFailed?: (results: InviteResult[]) => void;
+	onSuccess?: (results: InviteResult[], rows: InviteMemberRow[]) => void;
+	onPartialSuccess?: (results: InviteResult[], rows: InviteMemberRow[]) => void;
+	onAllFailed?: (results: InviteResult[], rows: InviteMemberRow[]) => void;
 }

 export interface UseInviteMembersReturn {
@@ -56,9 +56,9 @@ export interface InviteMembersProps {
 	showHeader?: boolean;
 	showAddButton?: boolean;

-	onSuccess?: () => void;
-	onPartialSuccess?: (results: InviteResult[]) => void;
-	onAllFailed?: (results: InviteResult[]) => void;
+	onSuccess?: (results: InviteResult[], rows: InviteMemberRow[]) => void;
+	onPartialSuccess?: (results: InviteResult[], rows: InviteMemberRow[]) => void;
+	onAllFailed?: (results: InviteResult[], rows: InviteMemberRow[]) => void;

 	renderFooter?: (props: FooterRenderProps) => ReactNode;
 }
--- a/frontend/src/components/InviteMembers/useInviteMembers.ts
+++ b/frontend/src/components/InviteMembers/useInviteMembers.ts
@@ -207,11 +207,11 @@ export function useInviteMembers(
 		const successes = results.filter((r) => r.success);

 		if (failures.length === 0) {
-			onSuccess?.();
+			onSuccess?.(results, touched);
 		} else if (successes.length > 0) {
-			onPartialSuccess?.(results);
+			onPartialSuccess?.(results, touched);
 		} else {
-			onAllFailed?.(results);
+			onAllFailed?.(results, touched);
 		}

 		return results;
--- a/frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss
+++ b/frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss
@@ -1,254 +0,0 @@
-.invite-members-modal {
-	max-width: 700px;
-	background: var(--popover);
-	border: 1px solid var(--secondary);
-	border-radius: 4px;
-	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);
-
-	[data-slot='dialog-header'] {
-		padding: var(--padding-4);
-		border-bottom: 1px solid var(--secondary);
-		flex-shrink: 0;
-		background: transparent;
-		margin: 0;
-	}
-
-	[data-slot='dialog-title'] {
-		font-family: Inter, sans-serif;
-		font-size: var(--label-base-400-font-size);
-		font-weight: var(--label-base-400-font-weight);
-		line-height: var(--label-base-400-line-height);
-		letter-spacing: -0.065px;
-		color: var(--l1-foreground);
-		margin: 0;
-	}
-
-	[data-slot='dialog-description'] {
-		padding: 0;
-
-		.invite-members-modal__content {
-			display: flex;
-			flex-direction: column;
-			gap: var(--spacing-8);
-			padding: var(--padding-4);
-		}
-	}
-}
-
-.invite-members-modal__table {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	width: 100%;
-}
-
-.invite-members-modal__table-header {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-8);
-	width: 100%;
-
-	.email-header {
-		flex: 0 0 240px;
-	}
-
-	.role-header {
-		flex: 1 0 0;
-		min-width: 0;
-	}
-
-	.action-header {
-		flex: 0 0 32px;
-	}
-
-	.table-header-cell {
-		font-family: Inter, sans-serif;
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		line-height: var(--paragraph-base-400-line-height);
-		letter-spacing: -0.07px;
-		color: var(--foreground);
-	}
-}
-
-.invite-members-modal__container {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-	width: 100%;
-}
-
-.team-member-row {
-	display: flex;
-	align-items: flex-start;
-	gap: var(--spacing-8);
-	width: 100%;
-
-	> .email-cell {
-		flex: 0 0 240px;
-	}
-
-	> .role-cell {
-		flex: 1 0 0;
-		min-width: 0;
-	}
-
-	> .action-cell {
-		flex: 0 0 32px;
-	}
-}
-
-.team-member-cell {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-
-	&.action-cell {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 32px;
-	}
-}
-
-.team-member-email-input {
-	width: 100%;
-	height: 32px;
-	color: var(--l1-foreground);
-	background-color: var(--l2-background);
-	border-color: var(--l1-border);
-	font-size: var(--paragraph-base-400-font-size);
-
-	&::placeholder {
-		color: var(--l3-foreground);
-	}
-
-	&:focus {
-		border-color: var(--primary);
-		box-shadow: none;
-	}
-}
-.team-member-role-select {
-	width: 100%;
-
-	.ant-select-selector {
-		height: 32px;
-		border-radius: 2px;
-		background-color: var(--l2-background) !important;
-		border: 1px solid var(--border) !important;
-		padding: 0 var(--padding-2) !important;
-
-		.ant-select-selection-placeholder {
-			color: var(--l3-foreground);
-			opacity: 0.4;
-			font-size: var(--paragraph-base-400-font-size);
-			letter-spacing: -0.07px;
-			line-height: 32px;
-		}
-
-		.ant-select-selection-item {
-			font-size: var(--paragraph-base-400-font-size);
-			letter-spacing: -0.07px;
-			color: var(--l1-foreground);
-			line-height: 32px;
-		}
-	}
-
-	.ant-select-arrow {
-		color: var(--foreground);
-	}
-
-	&.ant-select-focused .ant-select-selector,
-	&:not(.ant-select-disabled):hover .ant-select-selector {
-		border-color: var(--primary);
-	}
-}
-
-.remove-team-member-button {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 32px;
-	height: 32px;
-	min-width: 32px;
-	border: none;
-	border-radius: 2px;
-	background: transparent;
-	color: var(--destructive);
-	opacity: 0.6;
-	padding: 0;
-	transition:
-		background-color 0.2s,
-		opacity 0.2s;
-	box-shadow: none;
-
-	&:hover {
-		background: color-mix(in srgb, var(--danger-background) 10%, transparent);
-		opacity: 0.9;
-	}
-}
-
-.email-error-message {
-	display: block;
-	font-family: Inter, sans-serif;
-	font-size: var(--font-size-xs);
-	font-weight: var(--font-weight-normal);
-	line-height: var(--line-height-18);
-	color: var(--destructive);
-}
-
-.invite-team-members-error-callout {
-	background: color-mix(in srgb, var(--danger-background) 10%, transparent);
-	border: 1px solid color-mix(in srgb, var(--danger-background) 20%, transparent);
-	border-radius: 4px;
-	animation: horizontal-shaking 300ms ease-out;
-}
-
-.invite-members-modal__error-callout {
-	display: flex;
-}
-
-@keyframes horizontal-shaking {
-	0% {
-		transform: translateX(0);
-	}
-	25% {
-		transform: translateX(5px);
-	}
-	50% {
-		transform: translateX(-5px);
-	}
-	75% {
-		transform: translateX(5px);
-	}
-	100% {
-		transform: translateX(0);
-	}
-}
-
-.invite-members-modal__footer {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0 var(--padding-4);
-	height: 56px;
-	min-height: 56px;
-	border-top: 1px solid var(--secondary);
-	gap: 0;
-	flex-shrink: 0;
-}
-
-.invite-members-modal__footer-right {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-6);
-}
-
-.add-another-member-button {
-	&:hover {
-		border-color: var(--primary);
-		border-style: dashed;
-		color: var(--l1-foreground);
-	}
-}
--- a/frontend/src/components/InviteMembersModal/InviteMembersModal.tsx
+++ b/frontend/src/components/InviteMembersModal/InviteMembersModal.tsx
@@ -1,337 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Style } from '@signozhq/design-tokens';
-import { ChevronDown, Plus, Trash2, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Callout } from '@signozhq/ui/callout';
-import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
-import { Input } from '@signozhq/ui/input';
-import { toast } from '@signozhq/ui/sonner';
-import { Select } from 'antd';
-import inviteUsers from 'api/v1/invite/bulk/create';
-import sendInvite from 'api/v1/invite/create';
-import { cloneDeep, debounce } from 'lodash-es';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-import { ROLES } from 'types/roles';
-import { EMAIL_REGEX } from 'utils/app';
-import { getBaseUrl } from 'utils/basePath';
-import { popupContainer } from 'utils/selectPopupContainer';
-import { v4 as uuid } from 'uuid';
-
-import './InviteMembersModal.styles.scss';
-
-interface InviteRow {
-	id: string;
-	email: string;
-	role: ROLES | '';
-}
-
-export interface InviteMembersModalProps {
-	open: boolean;
-	onClose: () => void;
-	onComplete?: () => void;
-}
-
-const EMPTY_ROW = (): InviteRow => ({ id: uuid(), email: '', role: '' });
-
-const isRowTouched = (row: InviteRow): boolean =>
-	row.email.trim() !== '' || Boolean(row.role && row.role.trim() !== '');
-
-function InviteMembersModal({
-	open,
-	onClose,
-	onComplete,
-}: InviteMembersModalProps): JSX.Element {
-	const { showErrorModal, isErrorModalVisible } = useErrorModal();
-
-	const [rows, setRows] = useState<InviteRow[]>(() => [
-		EMPTY_ROW(),
-		EMPTY_ROW(),
-		EMPTY_ROW(),
-	]);
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [emailValidity, setEmailValidity] = useState<Record<string, boolean>>(
-		{},
-	);
-	const [hasInvalidEmails, setHasInvalidEmails] = useState<boolean>(false);
-	const [hasInvalidRoles, setHasInvalidRoles] = useState<boolean>(false);
-
-	const resetAndClose = useCallback((): void => {
-		setRows([EMPTY_ROW(), EMPTY_ROW(), EMPTY_ROW()]);
-		setEmailValidity({});
-		setHasInvalidEmails(false);
-		setHasInvalidRoles(false);
-		onClose();
-	}, [onClose]);
-
-	useEffect(() => {
-		if (open) {
-			setRows([EMPTY_ROW(), EMPTY_ROW(), EMPTY_ROW()]);
-		}
-	}, [open]);
-
-	const getValidationErrorMessage = (): string => {
-		if (hasInvalidEmails && hasInvalidRoles) {
-			return 'Please enter valid emails and select roles for team members';
-		}
-		if (hasInvalidEmails) {
-			return 'Please enter valid emails for team members';
-		}
-		return 'Please select roles for team members';
-	};
-
-	const validateAllUsers = useCallback((): boolean => {
-		let isValid = true;
-		let hasEmailErrors = false;
-		let hasRoleErrors = false;
-
-		const updatedEmailValidity: Record<string, boolean> = {};
-
-		const touchedRows = rows.filter(isRowTouched);
-
-		touchedRows.forEach((row) => {
-			const emailValid = EMAIL_REGEX.test(row.email);
-			const roleValid = Boolean(row.role && row.role.trim() !== '');
-
-			if (!emailValid || !row.email) {
-				isValid = false;
-				hasEmailErrors = true;
-			}
-			if (!roleValid) {
-				isValid = false;
-				hasRoleErrors = true;
-			}
-
-			if (row.id) {
-				updatedEmailValidity[row.id] = emailValid;
-			}
-		});
-
-		setEmailValidity(updatedEmailValidity);
-		setHasInvalidEmails(hasEmailErrors);
-		setHasInvalidRoles(hasRoleErrors);
-
-		return isValid;
-	}, [rows]);
-
-	const debouncedValidateEmail = useMemo(
-		() =>
-			debounce((email: string, rowId: string) => {
-				const isValid = EMAIL_REGEX.test(email);
-				setEmailValidity((prev) => ({ ...prev, [rowId]: isValid }));
-			}, 500),
-		[],
-	);
-
-	useEffect(() => {
-		if (!open) {
-			debouncedValidateEmail.cancel();
-		}
-		return (): void => {
-			debouncedValidateEmail.cancel();
-		};
-	}, [open, debouncedValidateEmail]);
-
-	const updateEmail = (id: string, email: string): void => {
-		const updatedRows = cloneDeep(rows);
-		const rowToUpdate = updatedRows.find((r) => r.id === id);
-		if (rowToUpdate) {
-			rowToUpdate.email = email;
-			setRows(updatedRows);
-
-			if (hasInvalidEmails) {
-				setHasInvalidEmails(false);
-			}
-			if (emailValidity[id] === false) {
-				setEmailValidity((prev) => ({ ...prev, [id]: true }));
-			}
-
-			debouncedValidateEmail(email, id);
-		}
-	};
-
-	const updateRole = (id: string, role: ROLES): void => {
-		const updatedRows = cloneDeep(rows);
-		const rowToUpdate = updatedRows.find((r) => r.id === id);
-		if (rowToUpdate) {
-			rowToUpdate.role = role;
-			setRows(updatedRows);
-
-			if (hasInvalidRoles) {
-				setHasInvalidRoles(false);
-			}
-		}
-	};
-
-	const addRow = (): void => {
-		setRows((prev) => [...prev, EMPTY_ROW()]);
-	};
-
-	const removeRow = (id: string): void => {
-		setRows((prev) => prev.filter((r) => r.id !== id));
-	};
-
-	const handleSubmit = useCallback(async (): Promise<void> => {
-		if (!validateAllUsers()) {
-			return;
-		}
-
-		const touchedRows = rows.filter(isRowTouched);
-		if (touchedRows.length === 0) {
-			return;
-		}
-
-		setIsSubmitting(true);
-		try {
-			if (touchedRows.length === 1) {
-				const row = touchedRows[0];
-				await sendInvite({
-					email: row.email.trim(),
-					name: '',
-					role: row.role as ROLES,
-					frontendBaseUrl: getBaseUrl(),
-				});
-			} else {
-				await inviteUsers({
-					invites: touchedRows.map((row) => ({
-						email: row.email.trim(),
-						name: '',
-						role: row.role,
-						frontendBaseUrl: getBaseUrl(),
-					})),
-				});
-			}
-			toast.success('Invites sent successfully', { position: 'top-right' });
-			resetAndClose();
-			onComplete?.();
-		} catch (err) {
-			showErrorModal(err as APIError);
-		} finally {
-			setIsSubmitting(false);
-		}
-	}, [validateAllUsers, rows, resetAndClose, onComplete, showErrorModal]);
-
-	const touchedRows = rows.filter(isRowTouched);
-	const isSubmitDisabled = isSubmitting || touchedRows.length === 0;
-
-	return (
-		<DialogWrapper
-			title="Invite Team Members"
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					resetAndClose();
-				}
-			}}
-			showCloseButton
-			width="wide"
-			className="invite-members-modal"
-			disableOutsideClick={isErrorModalVisible}
-		>
-			<div className="invite-members-modal__content">
-				<div className="invite-members-modal__table">
-					<div className="invite-members-modal__table-header">
-						<div className="table-header-cell email-header">Email address</div>
-						<div className="table-header-cell role-header">Roles</div>
-						<div className="table-header-cell action-header" />
-					</div>
-					<div className="invite-members-modal__container">
-						{rows.map(
-							(row): JSX.Element => (
-								<div key={row.id} className="team-member-row">
-									<div className="team-member-cell email-cell">
-										<Input
-											type="email"
-											placeholder="john@signoz.io"
-											value={row.email}
-											onChange={(e): void => updateEmail(row.id, e.target.value)}
-											className="team-member-email-input"
-											name={`invite-email-${row.id}`}
-											autoComplete="email"
-										/>
-										{emailValidity[row.id] === false && row.email.trim() !== '' && (
-											<span className="email-error-message">Invalid email address</span>
-										)}
-									</div>
-									<div className="team-member-cell role-cell">
-										<Select
-											value={row.role || undefined}
-											onChange={(role): void => updateRole(row.id, role as ROLES)}
-											className="team-member-role-select"
-											placeholder="Select roles"
-											suffixIcon={<ChevronDown size={14} />}
-											getPopupContainer={popupContainer}
-										>
-											<Select.Option value="VIEWER">Viewer</Select.Option>
-											<Select.Option value="EDITOR">Editor</Select.Option>
-											<Select.Option value="ADMIN">Admin</Select.Option>
-										</Select>
-									</div>
-									<div className="team-member-cell action-cell">
-										{rows.length > 1 && (
-											<Button
-												variant="ghost"
-												color="destructive"
-												onClick={(): void => removeRow(row.id)}
-												aria-label="Remove row"
-											>
-												<Trash2 size={12} />
-											</Button>
-										)}
-									</div>
-								</div>
-							),
-						)}
-					</div>
-				</div>
-
-				{(hasInvalidEmails || hasInvalidRoles) && (
-					<div className="invite-members-modal__error-callout">
-						<Callout
-							type="error"
-							size="small"
-							showIcon
-							title={getValidationErrorMessage()}
-						/>
-					</div>
-				)}
-			</div>
-
-			<DialogFooter className="invite-members-modal__footer">
-				<Button
-					variant="dashed"
-					color="secondary"
-					className="add-another-member-button"
-					prefix={<Plus size={12} color={Style.L1_FOREGROUND} />}
-					onClick={addRow}
-				>
-					Add another
-				</Button>
-
-				<div className="invite-members-modal__footer-right">
-					<Button
-						type="button"
-						variant="solid"
-						color="secondary"
-						onClick={resetAndClose}
-					>
-						<X size={12} />
-						Cancel
-					</Button>
-
-					<Button
-						variant="solid"
-						color="primary"
-						onClick={handleSubmit}
-						disabled={isSubmitDisabled}
-						loading={isSubmitting}
-					>
-						{isSubmitting ? 'Inviting...' : 'Invite Team Members'}
-					</Button>
-				</div>
-			</DialogFooter>
-		</DialogWrapper>
-	);
-}
-
-export default InviteMembersModal;
--- a/frontend/src/components/InviteMembersModal/tests/InviteMembersModal.test.tsx
+++ b/frontend/src/components/InviteMembersModal/tests/InviteMembersModal.test.tsx
@@ -1,276 +0,0 @@
-import inviteUsers from 'api/v1/invite/bulk/create';
-import sendInvite from 'api/v1/invite/create';
-import { StatusCodes } from 'http-status-codes';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import APIError from 'types/api/error';
-
-import InviteMembersModal from '../InviteMembersModal';
-
-const makeApiError = (message: string, code = StatusCodes.CONFLICT): APIError =>
-	new APIError({
-		httpStatusCode: code,
-		error: { code: 'already_exists', message, url: '', errors: [] },
-	});
-
-jest.mock('api/v1/invite/create');
-jest.mock('api/v1/invite/bulk/create');
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: {
-		success: jest.fn(),
-		error: jest.fn(),
-	},
-}));
-
-const showErrorModal = jest.fn();
-jest.mock('providers/ErrorModalProvider', () => ({
-	__esModule: true,
-	...jest.requireActual('providers/ErrorModalProvider'),
-	useErrorModal: jest.fn(() => ({
-		showErrorModal,
-		isErrorModalVisible: false,
-	})),
-}));
-
-const mockSendInvite = jest.mocked(sendInvite);
-const mockInviteUsers = jest.mocked(inviteUsers);
-
-const defaultProps = {
-	open: true,
-	onClose: jest.fn(),
-	onComplete: jest.fn(),
-};
-
-describe('InviteMembersModal', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		showErrorModal.mockClear();
-		mockSendInvite.mockResolvedValue({
-			httpStatusCode: 200,
-			data: { data: 'test', status: 'success' },
-		});
-		mockInviteUsers.mockResolvedValue({ httpStatusCode: 200, data: null });
-	});
-
-	it('renders 3 initial empty rows and disables the submit button', () => {
-		render(<InviteMembersModal {...defaultProps} />);
-
-		const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
-		expect(emailInputs).toHaveLength(3);
-
-		expect(
-			screen.getByRole('button', { name: /invite team members/i }),
-		).toBeDisabled();
-	});
-
-	it('adds a row when "Add another" is clicked and removes a row via trash button', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<InviteMembersModal {...defaultProps} />);
-
-		await user.click(screen.getByRole('button', { name: /add another/i }));
-		expect(screen.getAllByPlaceholderText('john@signoz.io')).toHaveLength(4);
-
-		const removeButtons = screen.getAllByRole('button', { name: /remove row/i });
-		await user.click(removeButtons[0]);
-		expect(screen.getAllByPlaceholderText('john@signoz.io')).toHaveLength(3);
-	});
-
-	describe('validation callout messages', () => {
-		it('shows combined message when email is invalid and role is missing', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<InviteMembersModal {...defaultProps} />);
-
-			await user.type(
-				screen.getAllByPlaceholderText('john@signoz.io')[0],
-				'not-an-email',
-			);
-			await user.click(
-				screen.getByRole('button', { name: /invite team members/i }),
-			);
-
-			await expect(
-				screen.findByText(
-					'Please enter valid emails and select roles for team members',
-				),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('shows email-only message when email is invalid but role is selected', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<InviteMembersModal {...defaultProps} />);
-
-			const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
-			await user.type(emailInputs[0], 'not-an-email');
-
-			await user.click(screen.getAllByText('Select roles')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.click(
-				screen.getByRole('button', { name: /invite team members/i }),
-			);
-
-			await expect(
-				screen.findByText('Please enter valid emails for team members'),
-			).resolves.toBeInTheDocument();
-		});
-
-		it('shows role-only message when email is valid but role is missing', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<InviteMembersModal {...defaultProps} />);
-
-			await user.type(
-				screen.getAllByPlaceholderText('john@signoz.io')[0],
-				'valid@signoz.io',
-			);
-			await user.click(
-				screen.getByRole('button', { name: /invite team members/i }),
-			);
-
-			await expect(
-				screen.findByText('Please select roles for team members'),
-			).resolves.toBeInTheDocument();
-		});
-	});
-
-	it('uses sendInvite (single) when only one row is filled', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onComplete = jest.fn();
-
-		render(<InviteMembersModal {...defaultProps} onComplete={onComplete} />);
-
-		const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
-		await user.type(emailInputs[0], 'single@signoz.io');
-
-		const roleSelects = screen.getAllByText('Select roles');
-		await user.click(roleSelects[0]);
-		await user.click(await screen.findByText('Viewer'));
-
-		await user.click(
-			screen.getByRole('button', { name: /invite team members/i }),
-		);
-
-		await waitFor(() => {
-			expect(mockSendInvite).toHaveBeenCalledWith(
-				expect.objectContaining({ email: 'single@signoz.io', role: 'VIEWER' }),
-			);
-			expect(mockInviteUsers).not.toHaveBeenCalled();
-			expect(onComplete).toHaveBeenCalled();
-		});
-	});
-
-	describe('error handling', () => {
-		it('shows BE message on single invite 409', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const error = makeApiError(
-				'An invite already exists for this email: single@signoz.io',
-			);
-			mockSendInvite.mockRejectedValue(error);
-
-			render(<InviteMembersModal {...defaultProps} />);
-
-			await user.type(
-				screen.getAllByPlaceholderText('john@signoz.io')[0],
-				'single@signoz.io',
-			);
-			await user.click(screen.getAllByText('Select roles')[0]);
-			await user.click(await screen.findByText('Viewer'));
-			await user.click(
-				screen.getByRole('button', { name: /invite team members/i }),
-			);
-
-			await waitFor(() => {
-				expect(showErrorModal).toHaveBeenCalledWith(error);
-			});
-		});
-
-		it('shows BE message on bulk invite 409', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const error = makeApiError(
-				'An invite already exists for this email: alice@signoz.io',
-			);
-			mockInviteUsers.mockRejectedValue(error);
-
-			render(<InviteMembersModal {...defaultProps} />);
-
-			const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
-			await user.type(emailInputs[0], 'alice@signoz.io');
-			await user.click(screen.getAllByText('Select roles')[0]);
-			await user.click(await screen.findByText('Viewer'));
-
-			await user.type(emailInputs[1], 'bob@signoz.io');
-			await user.click(screen.getAllByText('Select roles')[0]);
-			const editorOptions = await screen.findAllByText('Editor');
-			await user.click(editorOptions[editorOptions.length - 1]);
-
-			await user.click(
-				screen.getByRole('button', { name: /invite team members/i }),
-			);
-
-			await waitFor(() => {
-				expect(showErrorModal).toHaveBeenCalledWith(error);
-			});
-		});
-
-		it('shows BE message on generic error', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			const error = makeApiError(
-				'Internal server error',
-				StatusCodes.INTERNAL_SERVER_ERROR,
-			);
-			mockSendInvite.mockRejectedValue(error);
-
-			render(<InviteMembersModal {...defaultProps} />);
-
-			await user.type(
-				screen.getAllByPlaceholderText('john@signoz.io')[0],
-				'single@signoz.io',
-			);
-			await user.click(screen.getAllByText('Select roles')[0]);
-			await user.click(await screen.findByText('Viewer'));
-			await user.click(
-				screen.getByRole('button', { name: /invite team members/i }),
-			);
-
-			await waitFor(() => {
-				expect(showErrorModal).toHaveBeenCalledWith(error);
-			});
-		});
-	});
-
-	it('uses inviteUsers (bulk) when multiple rows are filled', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const onComplete = jest.fn();
-
-		render(<InviteMembersModal {...defaultProps} onComplete={onComplete} />);
-
-		const emailInputs = screen.getAllByPlaceholderText('john@signoz.io');
-
-		await user.type(emailInputs[0], 'alice@signoz.io');
-		await user.click(screen.getAllByText('Select roles')[0]);
-		await user.click(await screen.findByText('Viewer'));
-
-		await user.type(emailInputs[1], 'bob@signoz.io');
-		await user.click(screen.getAllByText('Select roles')[0]);
-		const editorOptions = await screen.findAllByText('Editor');
-		await user.click(editorOptions[editorOptions.length - 1]);
-
-		await user.click(
-			screen.getByRole('button', { name: /invite team members/i }),
-		);
-
-		await waitFor(() => {
-			expect(mockInviteUsers).toHaveBeenCalledWith({
-				invites: expect.arrayContaining([
-					expect.objectContaining({ email: 'alice@signoz.io', role: 'VIEWER' }),
-					expect.objectContaining({ email: 'bob@signoz.io', role: 'EDITOR' }),
-				]),
-			});
-			expect(mockSendInvite).not.toHaveBeenCalled();
-			expect(onComplete).toHaveBeenCalled();
-		});
-	});
-});
--- a/frontend/src/components/MembersTable/MembersTable.styles.scss
+++ b/frontend/src/components/MembersTable/MembersTable.styles.scss
@@ -3,7 +3,6 @@
 	flex-direction: column;
 	flex: 1;
 	min-height: 0;
-	overflow: hidden;
 	border-radius: 4px;
 }

--- a/frontend/src/components/RolesSelect/RolesSelect.tsx
+++ b/frontend/src/components/RolesSelect/RolesSelect.tsx
@@ -32,10 +32,13 @@ export function useRoles(): {
 	};
 }

-export function getRoleOptions(roles: AuthtypesRoleDTO[]): RoleOption[] {
+export function getRoleOptions(
+	roles: AuthtypesRoleDTO[],
+	valueField: 'id' | 'name',
+): RoleOption[] {
 	return roles.map((role) => ({
 		label: role.name ?? '',
-		value: role.id ?? '',
+		value: role[valueField] ?? '',
 	}));
 }

@@ -82,6 +85,7 @@ interface BaseProps {
 	error?: APIError;
 	onRefetch?: () => void;
 	disabled?: boolean;
+	valueField?: 'id' | 'name';
 }

 interface SingleProps extends BaseProps {
@@ -113,7 +117,7 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 	});

 	const roles = externalRoles ?? data?.data ?? [];
-	const options = getRoleOptions(roles);
+	const options = getRoleOptions(roles, props.valueField || 'id');

 	const {
 		mode,
--- a/frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx
+++ b/frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { SolidAlertTriangle } from '@signozhq/icons';
 import { Select, Tooltip } from 'antd';
 import type { DefaultOptionType } from 'antd/es/select';
-import cx from 'classnames';
+import classNames from 'classnames';

 import { UniversalYAxisUnitMappings } from './constants';
 import { UniversalYAxisUnit, YAxisUnitSelectorProps } from './types';
@@ -72,7 +72,9 @@ function YAxisUnitSelector({
 	}, [categoriesOverride, source]);

 	return (
-		<div className={cx('y-axis-unit-selector-component', containerClassName)}>
+		<div
+			className={classNames('y-axis-unit-selector-component', containerClassName)}
+		>
 			<Select
 				showSearch
 				value={universalUnit}
@@ -82,17 +84,12 @@ function YAxisUnitSelector({
 				loading={loading}
 				suffixIcon={
 					incompatibleUnitMessage ? (
-						<Tooltip
-							title={incompatibleUnitMessage}
-							overlayClassName="y-axis-unit-warning-tooltip"
-						>
-							<span className="y-axis-unit-warning" role="img" aria-label="warning">
-								<SolidAlertTriangle size="md" />
-							</span>
+						<Tooltip title={incompatibleUnitMessage}>
+							<SolidAlertTriangle role="img" aria-label="warning" size="md" />
 						</Tooltip>
 					) : undefined
 				}
-				className={cx({
+				className={classNames({
 					'warning-state': incompatibleUnitMessage,
 				})}
 				data-testid={dataTestId}
--- a/frontend/src/components/YAxisUnitSelector/tests/YAxisUnitSelector.test.tsx
+++ b/frontend/src/components/YAxisUnitSelector/tests/YAxisUnitSelector.test.tsx
@@ -1,5 +1,4 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';

 import { YAxisCategoryNames } from '../constants';
 import { UniversalYAxisUnit, YAxisSource } from '../types';
@@ -7,13 +6,9 @@ import YAxisUnitSelector from '../YAxisUnitSelector';

 describe('YAxisUnitSelector', () => {
 	const mockOnChange = jest.fn();
-	// antd injects its `pointer-events` styles via cssinjs in jsdom, but the SCSS
-	// overrides aren't loaded — skip the pointer-events check so hovers/clicks register.
-	let user: ReturnType<typeof userEvent.setup>;

 	beforeEach(() => {
 		mockOnChange.mockClear();
-		user = userEvent.setup({ pointerEventsCheck: 0 });
 	});

 	it('renders with default placeholder', () => {
@@ -39,7 +34,7 @@ describe('YAxisUnitSelector', () => {
 		expect(screen.queryByText('Custom placeholder')).toBeInTheDocument();
 	});

-	it('calls onChange when a value is selected', async () => {
+	it('calls onChange when a value is selected', () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -49,8 +44,9 @@ describe('YAxisUnitSelector', () => {
 		);
 		const select = screen.getByRole('combobox');

-		await user.click(select);
-		await user.click(screen.getByText('Bytes (B)'));
+		fireEvent.mouseDown(select);
+		const option = screen.getByText('Bytes (B)');
+		fireEvent.click(option);

 		expect(mockOnChange).toHaveBeenCalledWith('By', {
 			children: 'Bytes (B)',
@@ -59,7 +55,7 @@ describe('YAxisUnitSelector', () => {
 		});
 	});

-	it('filters options based on search input', async () => {
+	it('filters options based on search input', () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -69,13 +65,14 @@ describe('YAxisUnitSelector', () => {
 		);
 		const select = screen.getByRole('combobox');

-		await user.click(select);
-		await user.type(select, 'bytes/sec');
+		fireEvent.mouseDown(select);
+		const input = screen.getByRole('combobox');
+		fireEvent.change(input, { target: { value: 'bytes/sec' } });

 		expect(screen.getByText('Bytes/sec')).toBeInTheDocument();
 	});

-	it('shows all categories and their units', async () => {
+	it('shows all categories and their units', () => {
 		render(
 			<YAxisUnitSelector
 				value=""
@@ -83,8 +80,9 @@ describe('YAxisUnitSelector', () => {
 				source={YAxisSource.ALERTS}
 			/>,
 		);
+		const select = screen.getByRole('combobox');

-		await user.click(screen.getByRole('combobox'));
+		fireEvent.mouseDown(select);

 		// Check for category headers
 		expect(screen.getByText('Data')).toBeInTheDocument();
@@ -95,7 +93,7 @@ describe('YAxisUnitSelector', () => {
 		expect(screen.getByText('Seconds (s)')).toBeInTheDocument();
 	});

-	it('shows warning message when incompatible unit is selected', async () => {
+	it('shows warning message when incompatible unit is selected', () => {
 		render(
 			<YAxisUnitSelector
 				source={YAxisSource.ALERTS}
@@ -106,12 +104,12 @@ describe('YAxisUnitSelector', () => {
 		);
 		const warningIcon = screen.getByLabelText('warning');
 		expect(warningIcon).toBeInTheDocument();
-		await user.hover(warningIcon);
-		await expect(
-			screen.findByText(
+		fireEvent.mouseOver(warningIcon);
+		return screen
+			.findByText(
 				'Unit mismatch. The metric was sent with unit Seconds (s), but Bytes (B) is selected.',
-			),
-		).resolves.toBeInTheDocument();
+			)
+			.then((el) => expect(el).toBeInTheDocument());
 	});

 	it('does not show warning message when compatible unit is selected', () => {
@@ -127,7 +125,7 @@ describe('YAxisUnitSelector', () => {
 		expect(warningIcon).not.toBeInTheDocument();
 	});

-	it('uses categories override to render custom units', async () => {
+	it('uses categories override to render custom units', () => {
 		const customCategories = [
 			{
 				name: YAxisCategoryNames.Data,
@@ -149,7 +147,9 @@ describe('YAxisUnitSelector', () => {
 			/>,
 		);

-		await user.click(screen.getByRole('combobox'));
+		const select = screen.getByRole('combobox');
+
+		fireEvent.mouseDown(select);

 		expect(screen.getByText('Custom Bytes (B)')).toBeInTheDocument();
 		expect(screen.queryByText('Bytes (B)')).not.toBeInTheDocument();
--- a/frontend/src/components/YAxisUnitSelector/tests/formatter.test.tsx
+++ b/frontend/src/components/YAxisUnitSelector/tests/formatter.test.tsx
@@ -680,6 +680,13 @@ describe('formatUniversalUnit', () => {
 	});

 	describe('Datetime', () => {
+		beforeAll(() => {
+			jest.useFakeTimers().setSystemTime(new Date('2026-01-01T00:00:00Z'));
+		});
+		afterAll(() => {
+			jest.useRealTimers();
+		});
+
 		it('formats datetime units', () => {
 			expect(formatUniversalUnit(900, UniversalYAxisUnit.DATETIME_FROM_NOW)).toBe(
 				'56 years ago',
--- a/frontend/src/components/YAxisUnitSelector/styles.scss
+++ b/frontend/src/components/YAxisUnitSelector/styles.scss
@@ -4,13 +4,6 @@
 	}
 }

-// Re-enable hover on the warning icon: its `.ant-select-arrow` parent sets
-// `pointer-events: none`, which would otherwise suppress the tooltip.
-.y-axis-unit-warning {
-	display: inline-flex;
-	pointer-events: auto;
-}
-
 .warning-state {
 	.ant-select-selector {
 		border-color: var(--bg-amber-400) !important;
@@ -24,7 +17,3 @@
 		right: 28px;
 	}
 }
-
-.y-axis-unit-warning-tooltip {
-	max-width: 240px;
-}
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.module.scss
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.module.scss
@@ -1,7 +1,28 @@
+.filtersBar {
+	display: flex;
+	gap: var(--spacing-6);
+	align-items: center;
+	justify-content: space-between;
+}
+
+.filtersBarLeft {
+	display: flex;
+	gap: var(--spacing-6);
+	align-items: center;
+}
+
+.filtersBarSearch {
+	width: 280px;
+}
+
+.filtersBarSource {
+	width: 160px;
+}
+
 .pageError {
 	padding: var(--spacing-6) var(--spacing-8);
 	border-radius: var(--radius-2);
-	background: color-mix(in srgb, var(--bg-cherry-400) 8%, transparent);
-	color: var(--text-cherry-400);
+	background: color-mix(in srgb, var(--accent-cherry) 8%, transparent);
+	color: var(--accent-cherry);
 	font-size: var(--periscope-font-size-base);
 }
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.tsx
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/ModelCostTabPanel.tsx
@@ -1,52 +1,164 @@
 import { useMemo } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import { Plus, Search, X } from '@signozhq/icons';
 import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
 import { type ListLLMPricingRulesParams } from 'api/generated/services/sigNoz.schemas';
 import { useTableParams } from 'components/TanStackTableView';
-import { Typography } from '@signozhq/ui/typography';
+import useComponentPermission from 'hooks/useComponentPermission';
+import useDebounce from 'hooks/useDebounce';
+import { parseAsString, parseAsStringEnum, useQueryState } from 'nuqs';
+import { useAppContext } from 'providers/App/App';

-import { LIMIT_KEY, PAGE_KEY, PAGE_SIZE } from '../constants';
-import styles from './ModelCostTabPanel.module.scss';
+import {
+	LIMIT_KEY,
+	PAGE_KEY,
+	PAGE_SIZE,
+	SEARCH_DEBOUNCE_MS,
+	SEARCH_KEY,
+	SOURCE_FILTER_OPTIONS,
+	SOURCE_FILTER_TO_IS_OVERRIDE,
+	SOURCE_KEY,
+	type SourceFilter,
+} from '../constants';
+import type { PricingRule } from '../types';
+import DeleteConfirmDialog from './components/DeleteConfirmDialog';
+import ModelCostDrawer, {
+	useModelCostDrawer,
+} from './components/ModelCostDrawer';
 import ModelCostsTable from './components/ModelCostsTable';
-import { type LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+import { useModelCostDelete } from './hooks/useModelCostDelete';
+import styles from './ModelCostTabPanel.module.scss';

+// "Model costs" tab: the priced-model listing, search + source filter, the add/
+// edit drawer, and pagination. Page and page size live in the URL (shareable/
+// reload-safe) and are owned by TanStackTable via enableQueryParams — this tab
+// reads them back through the same useTableParams hook so the two stay in lockstep.
 function ModelCostTabPanel(): JSX.Element {
-	const { page, limit } = useTableParams(
+	const { page, limit, setPage } = useTableParams(
 		{ page: PAGE_KEY, limit: LIMIT_KEY },
 		{ page: 1, limit: PAGE_SIZE },
 	);

-	// Search + source filters are intentionally omitted for now — the list API
-	// doesn't honour them yet. They'll be reintroduced here once it does.
+	const [search, setSearch] = useQueryState(
+		SEARCH_KEY,
+		parseAsString.withDefault(''),
+	);
+	const debouncedSearch = useDebounce(search, SEARCH_DEBOUNCE_MS);
+
+	const [source, setSource] = useQueryState(
+		SOURCE_KEY,
+		parseAsStringEnum<SourceFilter>(
+			SOURCE_FILTER_OPTIONS.map((option) => option.value),
+		).withDefault('all'),
+	);
+
+	const handleSearchChange = (
+		event: React.ChangeEvent<HTMLInputElement>,
+	): void => {
+		void setSearch(event.target.value || null);
+		setPage(1);
+	};
+
+	const clearSearch = (): void => {
+		void setSearch(null);
+		setPage(1);
+	};
+
+	const handleSourceChange = (value: string | string[]): void => {
+		void setSource(value as SourceFilter);
+		setPage(1);
+	};
+
+	const isOverride = SOURCE_FILTER_TO_IS_OVERRIDE[source];
+
 	const listParams: ListLLMPricingRulesParams = {
 		offset: (page - 1) * limit,
 		limit,
+		...(debouncedSearch ? { q: debouncedSearch } : {}),
+		...(isOverride !== undefined ? { isOverride } : {}),
 	};

-	const { data, isLoading, isError } = useListLLMPricingRules(listParams);
+	const { data, isLoading, isError } = useListLLMPricingRules(listParams, {
+		query: {
+			enabled: search === debouncedSearch,
+		},
+	});

-	const rules: LlmpricingruletypesLLMPricingRuleDTO[] = useMemo(
-		() => data?.data?.items || [],
-		[data],
+	const { user } = useAppContext();
+	const [canManagePricing] = useComponentPermission(
+		['manage_llm_pricing'],
+		user.role,
 	);
+
+	const rules: PricingRule[] = useMemo(() => data?.data?.items || [], [data]);
 	const total = data?.data?.total ?? 0;

+	const drawer = useModelCostDrawer();
+	const deletion = useModelCostDelete();
+
 	return (
 		<>
+			<div className={styles.filtersBar}>
+				<div className={styles.filtersBarLeft}>
+					<Input
+						className={styles.filtersBarSearch}
+						placeholder="Search by model or provider"
+						value={search}
+						onChange={handleSearchChange}
+						prefix={<Search size={14} />}
+						suffix={
+							search ? (
+								<Button
+									variant="ghost"
+									color="secondary"
+									size="icon"
+									prefix={<X size={14} />}
+									onClick={clearSearch}
+									aria-label="Clear search"
+									testId="model-cost-search-clear"
+								/>
+							) : undefined
+						}
+						testId="model-cost-search"
+					/>
+					<SelectSimple
+						className={styles.filtersBarSource}
+						items={SOURCE_FILTER_OPTIONS}
+						value={source}
+						onChange={handleSourceChange}
+						testId="source-filter"
+					/>
+				</div>
+				{canManagePricing && (
+					<Button
+						variant="solid"
+						color="primary"
+						prefix={<Plus size={14} />}
+						onClick={(): void => drawer.openForAdd()}
+						testId="add-model-cost-btn"
+					>
+						Add model cost
+					</Button>
+				)}
+			</div>
+
 			{isError && (
 				<div className={styles.pageError} role="alert">
 					Failed to load pricing rules. Please try again.
 				</div>
 			)}

-			{/* Read-only listing. Edit/Add wiring + the drawer land in the next PR. */}
 			<ModelCostsTable
 				rules={rules}
 				isLoading={isLoading}
 				total={total}
-				selectedRuleId={null}
-				canManage={false}
-				onEdit={(): void => undefined}
-				onDelete={(): void => undefined}
+				selectedRuleId={drawer.selectedRuleId}
+				canManage={canManagePricing}
+				onEdit={drawer.openForEdit}
+				onDelete={deletion.requestDelete}
 			/>

 			<footer>
@@ -54,6 +166,29 @@ function ModelCostTabPanel(): JSX.Element {
 					All prices per 1M tokens (USD)
 				</Typography.Text>
 			</footer>
+
+			{drawer.isOpen && (
+				<ModelCostDrawer
+					isOpen={drawer.isOpen}
+					mode={drawer.mode}
+					initialDraft={drawer.initialDraft}
+					onClose={drawer.close}
+					onSave={drawer.save}
+					isSaving={drawer.isSaving}
+					saveError={drawer.saveError}
+					canManage={canManagePricing}
+				/>
+			)}
+
+			{deletion.pendingDelete && (
+				<DeleteConfirmDialog
+					open
+					modelName={deletion.pendingDelete.modelName}
+					isDeleting={deletion.isDeleting}
+					onConfirm={deletion.confirmDelete}
+					onCancel={deletion.cancelDelete}
+				/>
+			)}
 		</>
 	);
 }
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/DeleteConfirmDialog/DeleteConfirmDialog.tsx
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/DeleteConfirmDialog/DeleteConfirmDialog.tsx
@@ -0,0 +1,64 @@
+import { AlertDialog } from '@signozhq/ui/alert-dialog';
+import { Button } from '@signozhq/ui/button';
+import { Trash2, X } from '@signozhq/icons';
+
+interface DeleteConfirmDialogProps {
+	open: boolean;
+	modelName: string;
+	isDeleting: boolean;
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
+// Confirmation step before deleting a model cost — deletion is irreversible, so
+// the destructive action is gated behind an explicit confirm. AlertDialog blocks
+// outside-click dismissal and hides the close button to force an explicit choice.
+function DeleteConfirmDialog({
+	open,
+	modelName,
+	isDeleting,
+	onConfirm,
+	onCancel,
+}: DeleteConfirmDialogProps): JSX.Element {
+	return (
+		<AlertDialog
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onCancel();
+				}
+			}}
+			width="narrow"
+			title="Delete Model Cost Data "
+			titleIcon={<Trash2 size={16} />}
+			footer={
+				<>
+					<Button
+						variant="solid"
+						color="secondary"
+						onClick={onCancel}
+						prefix={<X size={12} />}
+						testId="drawer-delete-cancel-btn"
+					>
+						Cancel
+					</Button>
+					<Button
+						variant="solid"
+						color="destructive"
+						loading={isDeleting}
+						onClick={onConfirm}
+						prefix={<Trash2 size={12} />}
+						testId="drawer-delete-confirm-btn"
+					>
+						Delete
+					</Button>
+				</>
+			}
+		>
+			Are you sure you want to delete <strong>{modelName}</strong>? Once deleted,
+			this action cannot be undone.
+		</AlertDialog>
+	);
+}
+
+export default DeleteConfirmDialog;
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/DeleteConfirmDialog/index.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/DeleteConfirmDialog/index.ts
@@ -0,0 +1 @@
+export { default } from './DeleteConfirmDialog';
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.module.scss
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.module.scss
@@ -0,0 +1,58 @@
+.drawerSection {
+	composes: drawerSection from './shared.module.scss';
+}
+
+.fullWidth {
+	width: 100%;
+}
+
+.required {
+	composes: required from './shared.module.scss';
+}
+
+.modelCostDrawer {
+	// Uniform horizontal padding across header / body / footer. The header and
+	// footer read these dialog vars; the body (rendered in drawer-description)
+	// is set directly below.
+	--dialog-header-padding: var(--spacing-10) var(--spacing-12);
+	--dialog-footer-padding: var(--spacing-8) var(--spacing-12);
+
+	display: flex;
+	overflow-y: auto;
+
+	// The drawer body — children render inside [data-slot='drawer-description']
+	// (this is the @signozhq drawer, not antd, so .ant-drawer-body was a no-op).
+	[data-slot='drawer-description'] {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-12);
+		padding: var(--spacing-10) var(--spacing-12);
+	}
+
+	[data-slot='select-content'] {
+		width: var(--radix-select-trigger-width);
+	}
+}
+
+.title {
+	h3 {
+		margin: 0;
+		font-size: var(--periscope-font-size-medium);
+		font-weight: var(--font-weight-semibold);
+	}
+
+	p {
+		margin: var(--spacing-2) 0 0;
+		color: var(--l3-foreground);
+		font-size: 12px;
+	}
+}
+
+.footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	// Horizontal padding is provided by the drawer-footer slot var above.
+	padding: 0;
+	width: 100%;
+}
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.tsx
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.tsx
@@ -0,0 +1,238 @@
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import { Controller, useForm } from 'react-hook-form';
+
+import PatternEditor from './components/PatternEditor';
+import PricingFields from './components/PricingFields';
+import SourceSelector from './components/SourceSelector';
+import { PROVIDER_OPTIONS } from '../../../constants';
+import styles from './ModelCostDrawer.module.scss';
+import {
+	validateModelName,
+	validatePricing,
+	validateProvider,
+} from '../../../utils';
+import type { DrawerDraft, DrawerMode } from '../../../types';
+
+interface ModelCostDrawerProps {
+	isOpen: boolean;
+	mode: DrawerMode;
+	initialDraft: DrawerDraft;
+	onClose: () => void;
+	onSave: (draft: DrawerDraft) => void;
+	isSaving: boolean;
+	saveError: string | null;
+	canManage: boolean;
+}
+
+function ModelCostDrawer({
+	isOpen,
+	mode,
+	initialDraft,
+	onClose,
+	onSave,
+	isSaving,
+	saveError,
+	canManage,
+}: ModelCostDrawerProps): JSX.Element {
+	// Default mode validates on submit, then re-validates on change — so we don't
+	// flag empty fields before the user has tried to save, but errors clear live
+	// once they start fixing them.
+	const {
+		control,
+		handleSubmit,
+		watch,
+		formState: { isDirty },
+	} = useForm<DrawerDraft>({
+		defaultValues: initialDraft,
+	});
+
+	const isOverride = watch('isOverride');
+
+	// Metadata (model id / provider / patterns / source) is editable by any
+	// manager. Pricing fields are editable only once the user picks "User
+	// override" — auto-populated pricing is managed by SigNoz. Write APIs are
+	// Admin-only, so non-managers can't edit anything.
+	const metadataReadOnly = !canManage;
+	const pricingReadOnly = !canManage || !isOverride;
+
+	// Non-managers can only view (write APIs are Admin-only), so the drawer is a
+	// read-only "View" rather than "Edit"/"Add".
+	let drawerTitle = 'Add model cost';
+	if (!canManage) {
+		drawerTitle = 'View model cost';
+	} else if (mode === 'edit') {
+		drawerTitle = 'Edit model cost';
+	}
+
+	const footer = (
+		<div className={styles.footer}>
+			<Button
+				variant="outlined"
+				color="secondary"
+				onClick={onClose}
+				testId="drawer-cancel-btn"
+			>
+				{canManage ? 'Cancel' : 'Close'}
+			</Button>
+			{canManage && (
+				<Button
+					variant="solid"
+					color="primary"
+					onClick={handleSubmit(onSave)}
+					disabled={!isDirty}
+					loading={isSaving}
+					testId="drawer-save-btn"
+				>
+					Save
+				</Button>
+			)}
+		</div>
+	);
+
+	return (
+		<DrawerWrapper
+			open={isOpen}
+			onOpenChange={(open): void => {
+				if (!open) {
+					onClose();
+				}
+			}}
+			direction="right"
+			width="base"
+			className={styles.modelCostDrawer}
+			footer={footer}
+			title={drawerTitle}
+			drawerHeaderProps={{ className: styles.title }}
+		>
+			<div className={styles.drawerSection}>
+				<label htmlFor="billing-model-id">
+					Billing model ID{' '}
+					<span className={styles.required} aria-hidden="true">
+						*
+					</span>
+				</label>
+				<Controller
+					name="modelName"
+					control={control}
+					rules={{
+						validate: (value): true | string => validateModelName(value, mode),
+					}}
+					render={({ field, fieldState }): JSX.Element => (
+						<>
+							<Input
+								id="billing-model-id"
+								placeholder="e.g. openai:gpt-4o"
+								required
+								value={field.value}
+								disabled={mode === 'edit' || metadataReadOnly}
+								aria-invalid={!!fieldState.error}
+								onChange={(e): void => field.onChange(e.target.value)}
+								testId="drawer-model-id-input"
+							/>
+							{fieldState.error && (
+								<Typography.Text as="p" size="small" color="danger" role="alert">
+									{fieldState.error.message}
+								</Typography.Text>
+							)}
+						</>
+					)}
+				/>
+			</div>
+
+			<div className={styles.drawerSection}>
+				<label htmlFor="provider-select">Provider</label>
+				<Controller
+					name="provider"
+					control={control}
+					rules={{ validate: validateProvider }}
+					render={({ field, fieldState }): JSX.Element => (
+						<>
+							<SelectSimple
+								id="provider-select"
+								value={field.value}
+								onChange={(value): void => field.onChange(value as string)}
+								items={PROVIDER_OPTIONS}
+								disabled={mode === 'edit' || metadataReadOnly}
+								className={styles.fullWidth}
+								withPortal={false}
+								testId="drawer-provider-select"
+							/>
+							{fieldState.error && (
+								<Typography.Text size="small" color="danger" role="alert">
+									{fieldState.error.message}
+								</Typography.Text>
+							)}
+						</>
+					)}
+				/>
+			</div>
+
+			<Controller
+				name="patterns"
+				control={control}
+				render={({ field }): JSX.Element => (
+					<PatternEditor
+						patterns={field.value}
+						isReadOnly={metadataReadOnly}
+						onChange={field.onChange}
+					/>
+				)}
+			/>
+
+			{/* Source is auto vs. override — a choice only a manager can make, so
+			    there's nothing to show a read-only viewer. */}
+			{canManage && (
+				<Controller
+					name="isOverride"
+					control={control}
+					// Pricing requirements depend on this toggle, so re-validate pricing
+					// whenever the source changes (clears/sets the pricing error).
+					rules={{ deps: ['pricing'] }}
+					render={({ field }): JSX.Element => (
+						<SourceSelector
+							isOverride={field.value}
+							isReadOnly={metadataReadOnly}
+							disableAuto={mode === 'add' || !initialDraft.sourceId}
+							onChange={field.onChange}
+						/>
+					)}
+				/>
+			)}
+
+			<Controller
+				name="pricing"
+				control={control}
+				rules={{
+					validate: (value, values): true | string =>
+						validatePricing(value, values.isOverride),
+				}}
+				render={({ field, fieldState }): JSX.Element => (
+					<>
+						<PricingFields
+							pricing={field.value}
+							isReadOnly={pricingReadOnly}
+							onChange={(patch): void => field.onChange({ ...field.value, ...patch })}
+						/>
+						{fieldState.error && (
+							<Typography.Text as="p" size="small" color="danger" role="alert">
+								{fieldState.error.message}
+							</Typography.Text>
+						)}
+					</>
+				)}
+			/>
+
+			{saveError && (
+				<Typography.Text as="p" size="small" color="danger" role="alert">
+					{saveError}
+				</Typography.Text>
+			)}
+		</DrawerWrapper>
+	);
+}
+
+export default ModelCostDrawer;
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.module.scss
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.module.scss
@@ -0,0 +1,69 @@
+.drawerSection {
+	composes: drawerSection from '../../shared.module.scss';
+}
+
+.fullWidth {
+	width: 100%;
+}
+
+.pricingField {
+	composes: pricingField from '../../shared.module.scss';
+}
+
+.cacheModeField {
+	margin-top: var(--spacing-5);
+}
+
+.extraBucketsSection {
+	margin-top: var(--spacing-7);
+	gap: var(--spacing-5);
+}
+
+.extraBucketsSectionHead {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.bucketRow {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+
+	input {
+		flex: 1 auto auto;
+		min-width: 0;
+	}
+}
+
+.bucketRowName {
+	flex: 0 0 110px;
+}
+
+.bucketAddBtn {
+	width: 100%;
+}
+
+.bucketPicker {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--spacing-5);
+	padding: var(--spacing-6);
+	border-radius: 6px;
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+}
+
+.bucketPickerTitle {
+	font-size: var(--periscope-font-size-small);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--l3-foreground);
+}
+
+.bucketPickerChips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--spacing-4);
+}
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.tsx
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.tsx
@@ -0,0 +1,179 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { SelectSimple } from '@signozhq/ui/select';
+import { Typography } from '@signozhq/ui/typography';
+import { Plus, Trash2 } from '@signozhq/icons';
+import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
+import cx from 'classnames';
+
+import { CACHE_BUCKETS, CACHE_MODE_OPTIONS } from '../../../../../constants';
+import styles from './ExtraPricingBuckets.module.scss';
+import { parsePricingAmount } from '../../../../../utils';
+import type { CacheBucketKey, DrawerDraft } from '../../../../../types';
+import { Tooltip } from 'antd';
+
+type Pricing = DrawerDraft['pricing'];
+
+interface ExtraPricingBucketsProps {
+	pricing: Pricing;
+	isReadOnly: boolean;
+	onChange: (patch: Partial<Pricing>) => void;
+}
+
+function ExtraPricingBuckets({
+	pricing,
+	isReadOnly,
+	onChange,
+}: ExtraPricingBucketsProps): JSX.Element {
+	const [isExtraPricingBucketOpen, setIsExtraPricingBucketOpen] =
+		useState<boolean>(false);
+
+	// Track which buckets are shown separately from their value, so a freshly
+	// added bucket can start blank (value null) instead of being seeded to 0.
+	// Seeded from buckets that already carry a value (edit mode).
+	const [addedKeys, setAddedKeys] = useState<Set<CacheBucketKey>>(
+		() =>
+			new Set(
+				CACHE_BUCKETS.filter((b) => pricing[b.key] !== null).map((b) => b.key),
+			),
+	);
+
+	const addedBuckets = CACHE_BUCKETS.filter((b) => addedKeys.has(b.key));
+	const availableBuckets = CACHE_BUCKETS.filter((b) => !addedKeys.has(b.key));
+	const patchBucket = (key: CacheBucketKey, value: number | null): void => {
+		const patch: Partial<Pricing> = { [key]: value };
+		onChange(patch);
+	};
+
+	const addBucket = (key: CacheBucketKey): void => {
+		// Leave the value null so the field renders blank until the user types.
+		setAddedKeys((prev) => new Set(prev).add(key));
+		// Close the picker once nothing is left to add.
+		if (availableBuckets.length <= 1) {
+			setIsExtraPricingBucketOpen(false);
+		}
+	};
+
+	const removeBucket = (key: CacheBucketKey): void => {
+		setAddedKeys((prev) => {
+			const next = new Set(prev);
+			next.delete(key);
+			return next;
+		});
+		patchBucket(key, null);
+	};
+
+	return (
+		<div className={cx(styles.extraBucketsSection, styles.drawerSection)}>
+			<div className={styles.extraBucketsSectionHead}>
+				<Typography.Text as="span" size="small" color="muted">
+					Extra pricing buckets
+				</Typography.Text>
+				<Typography.Text as="span" size="small" color="muted">
+					optional
+				</Typography.Text>
+			</div>
+
+			{addedBuckets.map((bucket) => (
+				<div className={styles.bucketRow} key={bucket.key}>
+					<Typography.Text as="span" className={styles.bucketRowName}>
+						{bucket.label}
+					</Typography.Text>
+					<Input
+						type="number"
+						min={0}
+						step={0.01}
+						value={pricing[bucket.key] ?? ''}
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							// Clearing the field is allowed — the row stays mounted because
+							// presence is tracked in `addedKeys`, not the value. Removal is
+							// explicit via the trash button.
+							patchBucket(bucket.key, parsePricingAmount(e.target.value))
+						}
+						testId={`drawer-${bucket.testId}-cost`}
+					/>
+					<Tooltip title="Pricing per 1M tokens" placement="left">
+						<Typography.Text size="xs" color="muted">
+							1M
+						</Typography.Text>
+					</Tooltip>
+
+					{!isReadOnly && (
+						<Button
+							size="icon"
+							variant="ghost"
+							color="destructive"
+							onClick={(): void => removeBucket(bucket.key)}
+							aria-label={`Remove ${bucket.label}`}
+							data-testid={`drawer-remove-${bucket.testId}`}
+							prefix={<Trash2 size={14} />}
+						/>
+					)}
+				</div>
+			))}
+
+			{addedBuckets.length > 0 && (
+				<div className={cx(styles.pricingField, styles.cacheModeField)}>
+					<label htmlFor="cache-mode">Cache mode</label>
+					<SelectSimple
+						id="cache-mode"
+						value={pricing.cacheMode}
+						items={CACHE_MODE_OPTIONS}
+						onChange={(v): void => onChange({ cacheMode: v as CacheModeDTO })}
+						disabled={isReadOnly}
+						className={styles.fullWidth}
+						withPortal={false}
+						testId="drawer-cache-mode"
+					/>
+				</div>
+			)}
+
+			{!isReadOnly && !isExtraPricingBucketOpen && availableBuckets.length > 0 && (
+				<Button
+					variant="dashed"
+					color="secondary"
+					className={styles.bucketAddBtn}
+					prefix={<Plus size={14} />}
+					onClick={(): void => setIsExtraPricingBucketOpen(true)}
+					testId="drawer-add-bucket-btn"
+				>
+					Add pricing bucket
+				</Button>
+			)}
+
+			{!isReadOnly && isExtraPricingBucketOpen && (
+				<div className={styles.bucketPicker} data-testid="drawer-bucket-picker">
+					<div className={styles.bucketPickerTitle}>Add a pricing bucket</div>
+					<div className={styles.bucketPickerChips}>
+						{availableBuckets.map((bucket) => (
+							<Button
+								key={bucket.key}
+								variant="outlined"
+								color="secondary"
+								size="sm"
+								prefix={<Plus size={12} />}
+								onClick={(): void => addBucket(bucket.key)}
+								testId={`drawer-add-bucket-${bucket.testId}`}
+							>
+								{bucket.label}
+							</Button>
+						))}
+					</div>
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="sm"
+						onClick={(): void => setIsExtraPricingBucketOpen(false)}
+						testId="drawer-add-bucket-cancel"
+					>
+						Cancel
+					</Button>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default ExtraPricingBuckets;
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/index.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/index.ts
@@ -0,0 +1 @@
+export { default } from './ExtraPricingBuckets';
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.module.scss
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.module.scss
@@ -0,0 +1,49 @@
+.drawerSection {
+	composes: drawerSection from '../../shared.module.scss';
+}
+
+.help {
+	composes: help from '../../shared.module.scss';
+}
+
+.patternBox {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+	padding: var(--spacing-6);
+	border-radius: 6px;
+	border: 1px solid var(--l2-border);
+}
+
+.patternChips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--spacing-3);
+	min-height: 28px;
+}
+
+.patternChip {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.patternChipRemove {
+	background: transparent;
+	border: none;
+	padding: 0;
+	margin-left: 2px;
+	cursor: pointer;
+	color: inherit;
+	display: inline-flex;
+	align-items: center;
+
+	&:hover {
+		color: var(--accent-cherry);
+	}
+}
+
+.patternAdd {
+	display: flex;
+	gap: var(--spacing-3);
+}
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.tsx
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.tsx
@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Input } from '@signozhq/ui/input';
+import { Typography } from '@signozhq/ui/typography';
+import { X } from '@signozhq/icons';
+
+import styles from './PatternEditor.module.scss';
+
+interface PatternEditorProps {
+	patterns: string[];
+	isReadOnly: boolean;
+	onChange: (patterns: string[]) => void;
+}
+
+// Model-name prefix patterns as removable chips + an add input.
+function PatternEditor({
+	patterns,
+	isReadOnly,
+	onChange,
+}: PatternEditorProps): JSX.Element {
+	const [patternInput, setPatternInput] = useState<string>('');
+
+	const addPattern = (): void => {
+		const next = patternInput.trim();
+		if (!next || patterns.includes(next)) {
+			setPatternInput('');
+			return;
+		}
+		onChange([...patterns, next]);
+		setPatternInput('');
+	};
+
+	const removePattern = (pattern: string): void => {
+		onChange(patterns.filter((p) => p !== pattern));
+	};
+
+	return (
+		<div className={styles.drawerSection}>
+			<Typography.Text as="span">
+				Model name patterns{' '}
+				<Typography.Text as="span" color="muted">
+					(prefix match)
+				</Typography.Text>
+			</Typography.Text>
+			<div className={styles.patternBox}>
+				<div className={styles.patternChips}>
+					{patterns.map((pattern) => (
+						<Badge
+							key={pattern}
+							color="vanilla"
+							variant="outline"
+							className={styles.patternChip}
+						>
+							{pattern}*
+							{!isReadOnly && (
+								<button
+									type="button"
+									aria-label={`Remove pattern ${pattern}`}
+									className={styles.patternChipRemove}
+									onClick={(): void => removePattern(pattern)}
+								>
+									<X size={10} />
+								</button>
+							)}
+						</Badge>
+					))}
+				</div>
+				{!isReadOnly && (
+					<div className={styles.patternAdd}>
+						<Input
+							placeholder="Add pattern…"
+							value={patternInput}
+							onChange={(e): void => setPatternInput(e.target.value)}
+							onKeyDown={(e): void => {
+								if (e.key === 'Enter') {
+									e.preventDefault();
+									addPattern();
+								}
+							}}
+							testId="drawer-pattern-input"
+						/>
+						<Button
+							variant="outlined"
+							color="secondary"
+							onClick={addPattern}
+							testId="drawer-pattern-add-btn"
+						>
+							+ Add
+						</Button>
+					</div>
+				)}
+			</div>
+			<Typography.Text as="p" size="small" color="muted">
+				Each pattern uses <strong>prefix matching</strong> against{' '}
+				<code>gen_ai.request.model</code>.
+			</Typography.Text>
+		</div>
+	);
+}
+
+export default PatternEditor;
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/index.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/index.ts
@@ -0,0 +1 @@
+export { default } from './PatternEditor';
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/PricingFields.module.scss
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/PricingFields.module.scss
@@ -0,0 +1,31 @@
+.drawerSection {
+	composes: drawerSection from '../../shared.module.scss';
+}
+
+.drawerSurface {
+	composes: drawerSurface from '../../shared.module.scss';
+}
+
+.drawerSurfaceHead {
+	composes: drawerSurfaceHead from '../../shared.module.scss';
+}
+
+.managedLabel {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.pricingField {
+	composes: pricingField from '../../shared.module.scss';
+}
+
+.required {
+	composes: required from '../../shared.module.scss';
+}
+
+.pricingGrid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: var(--spacing-6);
+}
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/PricingFields.tsx
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/PricingFields.tsx
@@ -0,0 +1,91 @@
+import { Input } from '@signozhq/ui/input';
+import { Lock } from '@signozhq/icons';
+import cx from 'classnames';
+
+import ExtraPricingBuckets from '../ExtraPricingBuckets';
+import styles from './PricingFields.module.scss';
+import { parsePricingAmount } from '../../../../../utils';
+import type { DrawerDraft } from '../../../../../types';
+import { Typography } from '@signozhq/ui/typography';
+
+type Pricing = DrawerDraft['pricing'];
+
+interface PricingFieldsProps {
+	pricing: Pricing;
+	isReadOnly: boolean;
+	onChange: (patch: Partial<Pricing>) => void;
+}
+
+function PricingFields({
+	pricing,
+	isReadOnly,
+	onChange,
+}: PricingFieldsProps): JSX.Element {
+	return (
+		<div className={cx(styles.drawerSection, styles.drawerSurface)}>
+			<div className={styles.drawerSurfaceHead}>
+				<Typography.Text size="base" weight="bold">
+					Pricing (per 1M tokens, USD)
+				</Typography.Text>
+
+				{isReadOnly && (
+					<span className={styles.managedLabel} data-testid="drawer-readonly-label">
+						<Lock size={12} />
+
+						<Typography.Text color="muted">Read-only</Typography.Text>
+					</span>
+				)}
+			</div>
+			<div className={styles.pricingGrid}>
+				<div className={styles.pricingField}>
+					<label htmlFor="input-cost">
+						Input cost{' '}
+						<span className={styles.required} aria-hidden="true">
+							*
+						</span>
+					</label>
+					<Input
+						id="input-cost"
+						type="number"
+						step={0.01}
+						required
+						value={pricing.input ?? ''}
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							onChange({ input: parsePricingAmount(e.target.value) })
+						}
+						testId="drawer-input-cost"
+					/>
+				</div>
+				<div className={styles.pricingField}>
+					<label htmlFor="output-cost">
+						Output cost{' '}
+						<span className={styles.required} aria-hidden="true">
+							*
+						</span>
+					</label>
+					<Input
+						id="output-cost"
+						type="number"
+						step={0.01}
+						required
+						value={pricing.output ?? ''}
+						disabled={isReadOnly}
+						onChange={(e): void =>
+							onChange({ output: parsePricingAmount(e.target.value) })
+						}
+						testId="drawer-output-cost"
+					/>
+				</div>
+			</div>
+
+			<ExtraPricingBuckets
+				pricing={pricing}
+				isReadOnly={isReadOnly}
+				onChange={onChange}
+			/>
+		</div>
+	);
+}
+
+export default PricingFields;
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/index.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PricingFields/index.ts
@@ -0,0 +1 @@
+export { default } from './PricingFields';
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.module.scss
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.module.scss
@@ -0,0 +1,115 @@
+.drawerSection {
+	composes: drawerSection from '../../shared.module.scss';
+}
+
+.drawerSurface {
+	composes: drawerSurface from '../../shared.module.scss';
+}
+
+.drawerSurfaceHead {
+	composes: drawerSurfaceHead from '../../shared.module.scss';
+}
+
+.managedLabel {
+	composes: managedLabel from '../../shared.module.scss';
+}
+
+.sourceRadioGroup {
+	--radio-group-item-border-color: var(--l2-border);
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	width: 100%;
+	.sourceRadio {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		justify-content: flex-start;
+		gap: var(--spacing-5);
+		padding: var(--spacing-5) var(--spacing-6);
+		border-radius: var(--radius-2);
+		border: 1px solid transparent;
+		background: var(--l3-background);
+		margin: 0;
+		width: 100%;
+		// Include padding + border in the 100% width so the card fits inside
+		// the SOURCE surface instead of overflowing its right edge.
+		box-sizing: border-box;
+		cursor: pointer;
+		transition:
+			background-color 0.12s ease,
+			border-color 0.12s ease;
+
+		// The radio button itself: keep it fixed-size and aligned with the title
+		// baseline (margin-top compensates for align-items: flex-start vs the
+		// title's line-box).
+		> button[role='radio'] {
+			flex: 0 0 16px;
+			width: 16px;
+			height: 16px;
+			margin-top: 3px;
+		}
+
+		// The library wraps children in a <label>. Make it grow into the
+		// remaining width and reset the .drawerSection label typography leak
+		// (set earlier in this file) so the title/desc divs use their own styles.
+		> label {
+			flex: 1 1 auto;
+			min-width: 0;
+			display: block;
+			text-align: left;
+			cursor: pointer;
+			font-size: inherit;
+			font-weight: inherit;
+			color: inherit;
+		}
+
+		// Radix RadioGroupItem renders <button data-state="checked|unchecked">.
+		// Use :has() to highlight the wrapper card when its inner button is checked.
+		&.sourceRadioAuto:has(button[data-state='checked']) {
+			background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
+			border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
+		}
+
+		&.sourceRadioOverride:has(button[data-state='checked']) {
+			background: color-mix(in srgb, var(--accent-amber) 10%, transparent);
+			border-color: color-mix(in srgb, var(--accent-amber) 30%, transparent);
+		}
+
+		&:hover {
+			background: var(--l3-background-hover);
+		}
+	}
+}
+
+.sourceRadioTitle {
+	font-weight: var(--font-weight-semibold);
+	font-size: var(--periscope-font-size-base);
+	color: var(--l1-foreground);
+}
+
+.sourceRadioDesc {
+	margin-top: 2px;
+	font-size: 12px;
+	color: var(--l3-foreground);
+}
+
+.resetConfirm {
+	margin-top: var(--spacing-6);
+	padding: var(--spacing-6);
+	border-radius: var(--radius-2);
+	background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
+	border: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
+
+	p {
+		margin: 0 0 var(--spacing-5);
+		font-size: 12px;
+	}
+}
+
+.resetConfirmActions {
+	display: flex;
+	gap: var(--spacing-4);
+	justify-content: flex-end;
+}
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.tsx
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.tsx
@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { Lock } from '@signozhq/icons';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import styles from './SourceSelector.module.scss';
+
+interface SourceSelectorProps {
+	isOverride: boolean;
+	isReadOnly: boolean;
+	disableAuto?: boolean;
+	onChange: (isOverride: boolean) => void;
+}
+
+// Auto-populated vs user-override selector, with a confirm step before
+// discarding custom values back to defaults.
+function SourceSelector({
+	isOverride,
+	isReadOnly,
+	disableAuto = false,
+	onChange,
+}: SourceSelectorProps): JSX.Element {
+	const [showResetConfirm, setShowResetConfirm] = useState<boolean>(false);
+
+	const handleSourceChange = (value: 'auto' | 'override'): void => {
+		if (value === 'auto' && isOverride) {
+			setShowResetConfirm(true);
+			return;
+		}
+		if (value === 'override' && !isOverride) {
+			onChange(true);
+		}
+	};
+
+	const confirmReset = (): void => {
+		onChange(false);
+		setShowResetConfirm(false);
+	};
+
+	return (
+		<div className={cx(styles.drawerSection, styles.drawerSurface)}>
+			<div className={styles.drawerSurfaceHead}>
+				<Typography.Text weight="bold" size="base">
+					Source
+				</Typography.Text>
+
+				{isReadOnly && (
+					<span className={styles.managedLabel} data-testid="drawer-managed-label">
+						<Lock size={12} />
+						Managed by SigNoz
+					</span>
+				)}
+			</div>
+			<RadioGroup
+				value={isOverride ? 'override' : 'auto'}
+				onChange={(value): void => handleSourceChange(value as 'auto' | 'override')}
+				className={styles.sourceRadioGroup}
+			>
+				<RadioGroupItem
+					value="auto"
+					containerClassName={cx(styles.sourceRadio, styles.sourceRadioAuto)}
+					testId="drawer-source-auto"
+					disabled={disableAuto}
+				>
+					<div className={styles.sourceRadioTitle}>Auto-populated</div>
+					<div className={styles.sourceRadioDesc}>
+						{disableAuto
+							? 'Available once SigNoz has default pricing for this model.'
+							: 'Default pricing from SigNoz.'}
+					</div>
+				</RadioGroupItem>
+				<RadioGroupItem
+					value="override"
+					containerClassName={cx(styles.sourceRadio, styles.sourceRadioOverride)}
+					testId="drawer-source-override"
+				>
+					<div className={styles.sourceRadioTitle}>User override</div>
+					<div className={styles.sourceRadioDesc}>
+						Custom pricing. Takes precedence.
+					</div>
+				</RadioGroupItem>
+			</RadioGroup>
+			{showResetConfirm && (
+				<div className={styles.resetConfirm} aria-label="Reset to default pricing">
+					<p>
+						Reset to default pricing? Custom values will be discarded. It might take
+						24 hours for changes to take effect.
+					</p>
+					<div className={styles.resetConfirmActions}>
+						<Button
+							variant="outlined"
+							color="secondary"
+							onClick={(): void => setShowResetConfirm(false)}
+							testId="drawer-reset-keep-btn"
+						>
+							Keep
+						</Button>
+						<Button
+							variant="solid"
+							color="primary"
+							onClick={confirmReset}
+							testId="drawer-reset-confirm-btn"
+						>
+							Reset
+						</Button>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default SourceSelector;
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/index.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/index.ts
@@ -0,0 +1 @@
+export { default } from './SourceSelector';
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/hooks/useModelCostDrawer.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/hooks/useModelCostDrawer.ts
@@ -0,0 +1,100 @@
+import { useCallback, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { useQueryClient } from 'react-query';
+import {
+	getListLLMPricingRulesQueryKey,
+	useCreateOrUpdateLLMPricingRules,
+} from 'api/generated/services/llmpricingrules';
+
+import { EMPTY_DRAFT } from '../../../../constants';
+import type { DrawerDraft, DrawerMode, PricingRule } from '../../../../types';
+import { buildRulePayload, draftFromRule } from '../../../../utils';
+
+interface UseModelCostDrawerResult {
+	isOpen: boolean;
+	mode: DrawerMode;
+	initialDraft: DrawerDraft;
+	openForAdd: (prefillModelName?: string) => void;
+	openForEdit: (rule: PricingRule) => void;
+	close: () => void;
+	save: (draft: DrawerDraft) => Promise<void>;
+	isSaving: boolean;
+	saveError: string | null;
+	selectedRuleId: string | null;
+}
+
+export function useModelCostDrawer(): UseModelCostDrawerResult {
+	const queryClient = useQueryClient();
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+	const [mode, setMode] = useState<DrawerMode>('add');
+	const [initialDraft, setInitialDraft] = useState<DrawerDraft>(EMPTY_DRAFT);
+	const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null);
+	const [saveError, setSaveError] = useState<string | null>(null);
+
+	const { mutateAsync: createOrUpdate, isLoading: isSaving } =
+		useCreateOrUpdateLLMPricingRules();
+
+	const invalidateList = useCallback(async (): Promise<void> => {
+		await queryClient.invalidateQueries({
+			queryKey: getListLLMPricingRulesQueryKey(),
+		});
+	}, [queryClient]);
+
+	const openForAdd = useCallback((): void => {
+		setMode('add');
+		setInitialDraft({
+			...EMPTY_DRAFT,
+			modelName: '',
+			patterns: [],
+		});
+		setSelectedRuleId(null);
+		setSaveError(null);
+		setIsOpen(true);
+	}, []);
+
+	const openForEdit = useCallback((rule: PricingRule): void => {
+		setMode('edit');
+		setInitialDraft(draftFromRule(rule));
+		setSelectedRuleId(rule.id);
+		setSaveError(null);
+		setIsOpen(true);
+	}, []);
+
+	const close = useCallback((): void => {
+		setIsOpen(false);
+		setSelectedRuleId(null);
+		setSaveError(null);
+	}, []);
+
+	const save = useCallback(
+		async (draft: DrawerDraft): Promise<void> => {
+			setSaveError(null);
+			try {
+				await createOrUpdate({
+					data: { rules: [buildRulePayload(draft)] },
+				});
+				await invalidateList();
+				setIsOpen(false);
+				setSelectedRuleId(null);
+				toast.success(mode === 'edit' ? 'Model cost updated' : 'Model cost added');
+			} catch (error) {
+				const message = error instanceof Error ? error.message : 'Save failed';
+				setSaveError(message);
+			}
+		},
+		[createOrUpdate, invalidateList, mode],
+	);
+
+	return {
+		isOpen,
+		mode,
+		initialDraft,
+		openForAdd,
+		openForEdit,
+		close,
+		save,
+		isSaving,
+		saveError,
+		selectedRuleId,
+	};
+}
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/index.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/index.ts
@@ -0,0 +1,2 @@
+export { default } from './ModelCostDrawer';
+export { useModelCostDrawer } from './hooks/useModelCostDrawer';
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/shared.module.scss
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/shared.module.scss
@@ -0,0 +1,59 @@
+/* Shared drawer selectors used by 2+ of the model-cost drawer components. */
+/* Components pull these in via CSS-modules `composes` from their own module so */
+/* the authored class names in the TSX stay identical. */
+/* NOTE: this file is a `composes` target, so it is parsed as plain CSS (no SCSS */
+/* preprocessing). Keep it flat — no nesting, no slash-slash comments. */
+
+.drawerSection {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3);
+}
+
+.drawerSection .help,
+.help {
+	margin: 0;
+}
+
+.help code {
+	padding: 1px var(--spacing-2);
+	border-radius: 3px;
+	background: var(--l3-background);
+	font-size: 10px;
+}
+
+.drawerSurface {
+	padding: var(--spacing-7);
+	border-radius: 6px;
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+}
+
+.drawerSurfaceHead {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: var(--spacing-5);
+}
+
+.managedLabel {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	font-size: var(--periscope-font-size-small);
+	color: var(--l3-foreground);
+}
+
+.required {
+	color: var(--accent-cherry);
+}
+
+.pricingField {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+}
+
+.pricingField input {
+	width: 100%;
+}
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostsTable.module.scss
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostsTable/ModelCostsTable.module.scss
@@ -15,6 +15,6 @@
 	justify-content: center;
 	margin-top: var(--spacing-8);
 	min-height: 400px;
-	color: var(--text-vanilla-400);
+	color: var(--l3-foreground);
 	font-size: var(--periscope-font-size-base);
 }
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/hooks/useModelCostDelete.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/hooks/useModelCostDelete.ts
@@ -0,0 +1,66 @@
+import { useCallback, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { useQueryClient } from 'react-query';
+import {
+	getListLLMPricingRulesQueryKey,
+	useDeleteLLMPricingRule,
+} from 'api/generated/services/llmpricingrules';
+
+import type { PricingRule } from '../../types';
+
+// The minimal slice of a rule the delete-confirm flow needs: the id to delete
+// and the model name to show in the confirmation copy.
+type PendingDelete = Pick<PricingRule, 'id' | 'modelName'>;
+
+interface UseModelCostDeleteResult {
+	requestDelete: (rule: PendingDelete) => void;
+	confirmDelete: () => Promise<void>;
+	cancelDelete: () => void;
+	pendingDelete: PendingDelete | null;
+	isDeleting: boolean;
+}
+
+// Owns the confirm-then-delete flow for a pricing rule, independent of the
+// add/edit drawer — delete is triggered from the table row menu, so this state
+// lives at the panel level rather than inside useModelCostDrawer.
+export function useModelCostDelete(): UseModelCostDeleteResult {
+	const queryClient = useQueryClient();
+	// The rule queued for deletion. Non-null drives the confirm dialog open.
+	const [pendingDelete, setPendingDelete] = useState<PendingDelete | null>(null);
+
+	const { mutateAsync: deleteRuleApi, isLoading: isDeleting } =
+		useDeleteLLMPricingRule();
+
+	const requestDelete = useCallback((rule: PendingDelete): void => {
+		setPendingDelete({ id: rule.id, modelName: rule.modelName });
+	}, []);
+
+	const cancelDelete = useCallback((): void => {
+		setPendingDelete(null);
+	}, []);
+
+	const confirmDelete = useCallback(async (): Promise<void> => {
+		if (!pendingDelete) {
+			return;
+		}
+		try {
+			await deleteRuleApi({ pathParams: { id: pendingDelete.id } });
+			await queryClient.invalidateQueries({
+				queryKey: getListLLMPricingRulesQueryKey(),
+			});
+			setPendingDelete(null);
+			toast.success('Model cost deleted');
+		} catch (error) {
+			const message = error instanceof Error ? error.message : 'Delete failed';
+			toast.error(message);
+		}
+	}, [deleteRuleApi, pendingDelete, queryClient]);
+
+	return {
+		requestDelete,
+		confirmDelete,
+		cancelDelete,
+		pendingDelete,
+		isDeleting,
+	};
+}
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/constants.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/constants.ts
@@ -1,6 +1,68 @@
+import { LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO } from 'api/generated/services/sigNoz.schemas';
+
+import type { CacheBucketDef, DrawerDraft } from './types';
+
 export const PAGE_SIZE = 20;

 export const PAGE_KEY = 'page';
 export const LIMIT_KEY = 'limit';
+export const SEARCH_KEY = 'search';
+export const SEARCH_DEBOUNCE_MS = 300;
+export const SOURCE_KEY = 'source';

+export type SourceFilter = 'all' | 'override' | 'auto';
+export const SOURCE_FILTER_OPTIONS: { value: SourceFilter; label: string }[] = [
+	{ value: 'all', label: 'All sources' },
+	{ value: 'override', label: 'User override' },
+	{ value: 'auto', label: 'Auto' },
+];
+
+export const SOURCE_FILTER_TO_IS_OVERRIDE: Record<
+	SourceFilter,
+	boolean | undefined
+> = {
+	all: undefined,
+	override: true,
+	auto: false,
+};
+
+// Match the page size so the skeleton reserves the same number of rows the
+// loaded page renders — otherwise the table height jumps on load.
 export const SKELETON_ROW_COUNT = PAGE_SIZE;
+
+export const PROVIDER_OPTIONS = [
+	{ value: 'OpenAI', label: 'OpenAI' },
+	{ value: 'Anthropic', label: 'Anthropic' },
+	{ value: 'Azure OpenAI', label: 'Azure OpenAI' },
+	{ value: 'Google', label: 'Google' },
+	{ value: 'Self-hosted', label: 'Self-hosted' },
+	{ value: 'Other', label: 'Other' },
+];
+
+export const CACHE_MODE_OPTIONS = [
+	{ value: CacheModeDTO.subtract, label: 'Subtract (OpenAI style)' },
+	{ value: CacheModeDTO.additive, label: 'Additive (Anthropic style)' },
+	// https://app.notion.com/p/signoz/LLM-Tokens-Cost-Calculation-330fcc6bcd19805283ccc841d596358e?source=copy_link#33efcc6bcd1980e6a187e442c6ba5996
+	{ value: CacheModeDTO.unknown, label: 'Unknown' },
+];
+
+export const CACHE_BUCKETS: CacheBucketDef[] = [
+	{ key: 'cacheRead', label: 'cache_read', testId: 'cache-read' },
+	{ key: 'cacheWrite', label: 'cache_write', testId: 'cache-write' },
+];
+
+export const EMPTY_DRAFT: DrawerDraft = {
+	id: null,
+	sourceId: null,
+	modelName: '',
+	provider: 'OpenAI',
+	patterns: [],
+	isOverride: true,
+	pricing: {
+		input: null,
+		output: null,
+		cacheMode: CacheModeDTO.unknown,
+		cacheRead: null,
+		cacheWrite: null,
+	},
+};
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/types.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/types.ts
@@ -1,4 +1,39 @@
+import {
+	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
+	type LlmpricingruletypesLLMPricingRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+export type PricingRule = LlmpricingruletypesLLMPricingRuleDTO;
+
 export interface ExtraBucket {
 	key: string;
 	pricePerMillion: number;
 }
+
+export type DrawerMode = 'add' | 'edit';
+
+// Optional pricing buckets the user can add/remove. Keyed by the matching
+// DrawerDraft['pricing'] field.
+export type CacheBucketKey = 'cacheRead' | 'cacheWrite';
+
+export interface CacheBucketDef {
+	key: CacheBucketKey;
+	label: string;
+	testId: string;
+}
+
+export interface DrawerDraft {
+	id: string | null;
+	sourceId: string | null;
+	modelName: string;
+	provider: string;
+	patterns: string[];
+	isOverride: boolean;
+	pricing: {
+		input: number | null;
+		output: number | null;
+		cacheMode: CacheModeDTO;
+		cacheRead: number | null;
+		cacheWrite: number | null;
+	};
+}
--- a/frontend/src/container/LLMObservability/Settings/ModelPricing/utils.ts
+++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/utils.ts
@@ -1,8 +1,19 @@
+import {
+	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
+	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
+	type LlmpricingruletypesLLMPricingCacheCostsDTO,
+	type LlmpricingruletypesLLMRulePricingDTO,
+	type LlmpricingruletypesUpdatableLLMPricingRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';

-import type { ExtraBucket } from './types';
-import type { LlmpricingruletypesLLMPricingRuleDTO } from 'api/generated/services/sigNoz.schemas';
+import type {
+	DrawerDraft,
+	DrawerMode,
+	ExtraBucket,
+	PricingRule,
+} from './types';

 dayjs.extend(relativeTime);

@@ -13,6 +24,19 @@ const getRelativeTime = (
 	return parsed?.isValid() ? parsed.fromNow() : '—';
 };

+const hasCacheValue = (value: number | null | undefined): value is number =>
+	typeof value === 'number' && value > 0;
+
+// ─── Input helpers ───────────────────────────────────────────────────────────
+
+export const parsePricingAmount = (raw: string): number | null => {
+	if (raw.trim() === '') {
+		return null;
+	}
+	const value = Number(raw);
+	return Number.isFinite(value) ? value : 0;
+};
+
 // ─── Display helpers ─────────────────────────────────────────────────────────

 export const formatPricePerMillion = (value: number | undefined): string => {
@@ -23,38 +47,117 @@ export const formatPricePerMillion = (value: number | undefined): string => {
 	return `$${value.toFixed(2)}`;
 };

-export const getExtraBuckets = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): ExtraBucket[] => {
+export const getExtraBuckets = (rule: PricingRule): ExtraBucket[] => {
 	const cache = rule.pricing?.cache;
 	if (!cache) {
 		return [];
 	}
 	const buckets: ExtraBucket[] = [];
-	if (typeof cache.read === 'number' && cache.read > 0) {
+	if (hasCacheValue(cache.read)) {
 		buckets.push({ key: 'cache_read', pricePerMillion: cache.read });
 	}
-	if (typeof cache.write === 'number' && cache.write > 0) {
+	if (hasCacheValue(cache.write)) {
 		buckets.push({ key: 'cache_write', pricePerMillion: cache.write });
 	}
 	return buckets;
 };

-export const getSourceLabel = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): 'Auto' | 'User override' => (rule.isOverride ? 'User override' : 'Auto');
+export const getSourceLabel = (rule: PricingRule): 'Auto' | 'User override' =>
+	rule.isOverride ? 'User override' : 'Auto';

-export const getRelativeLastSeen = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): string => getRelativeTime(rule.updatedAt || rule.syncedAt || rule.createdAt);
+export const getRelativeLastSeen = (rule: PricingRule): string =>
+	getRelativeTime(rule.updatedAt || rule.syncedAt || rule.createdAt);

 // Canonical id shown under the model name, e.g. "openai:gpt-4o". Both segments
 // are lower-cased so the id is consistently normalised (providers/models can
 // arrive with mixed casing).
-export const getCanonicalId = (
-	rule: LlmpricingruletypesLLMPricingRuleDTO,
-): string => {
+export const getCanonicalId = (rule: PricingRule): string => {
 	const provider = rule.provider?.trim().toLowerCase() || 'unknown';
 	const model = rule.modelName?.trim().toLowerCase() || 'unknown';
 	return `${provider}:${model}`;
 };
+
+// ─── Drawer draft <-> API helpers ────────────────────────────────────────────
+
+export const draftFromRule = (rule: PricingRule): DrawerDraft => ({
+	id: rule.id,
+	sourceId: rule.sourceId ?? null,
+	modelName: rule.modelName,
+	provider: rule.provider,
+	patterns: rule.modelPattern || [],
+	isOverride: !!rule.isOverride,
+	pricing: {
+		input: rule.pricing?.input ?? 0,
+		output: rule.pricing?.output ?? 0,
+		cacheMode: rule.pricing?.cache?.mode ?? CacheModeDTO.unknown,
+		cacheRead: rule.pricing?.cache?.read ?? null,
+		cacheWrite: rule.pricing?.cache?.write ?? null,
+	},
+});
+
+const buildCacheCosts = (
+	pricing: DrawerDraft['pricing'],
+): LlmpricingruletypesLLMPricingCacheCostsDTO | undefined => {
+	const { cacheMode, cacheRead, cacheWrite } = pricing;
+	if (!hasCacheValue(cacheRead) && !hasCacheValue(cacheWrite)) {
+		return undefined;
+	}
+	return {
+		mode: cacheMode,
+		...(hasCacheValue(cacheRead) && { read: cacheRead }),
+		...(hasCacheValue(cacheWrite) && { write: cacheWrite }),
+	};
+};
+
+export const buildPricingPayload = (
+	draft: DrawerDraft,
+): LlmpricingruletypesLLMRulePricingDTO => {
+	const cache = buildCacheCosts(draft.pricing);
+	return {
+		input: draft.pricing.input ?? 0,
+		output: draft.pricing.output ?? 0,
+		...(cache && { cache }),
+	};
+};
+
+export const buildRulePayload = (
+	draft: DrawerDraft,
+): LlmpricingruletypesUpdatableLLMPricingRuleDTO => ({
+	id: draft.id || undefined,
+	sourceId: draft.sourceId || undefined,
+	modelName: draft.modelName.trim(),
+	provider: draft.provider.trim(),
+	modelPattern: draft.patterns,
+	isOverride: draft.isOverride,
+	enabled: true,
+	unit: UnitDTO.per_million_tokens,
+	pricing: buildPricingPayload(draft),
+});
+
+export const validateModelName = (
+	modelName: string,
+	mode: DrawerMode,
+): true | string =>
+	mode === 'add' && !modelName.trim() ? 'Billing model ID is required.' : true;
+
+export const validateProvider = (provider: string): true | string =>
+	provider.trim() ? true : 'Provider is required.';
+
+export const validatePricing = (
+	pricing: DrawerDraft['pricing'],
+	isOverride: boolean,
+): true | string => {
+	if (!isOverride) {
+		return true;
+	}
+	if (pricing.input === null || pricing.input <= 0) {
+		return 'Input cost must be greater than 0.';
+	}
+	if (pricing.output === null || pricing.output <= 0) {
+		return 'Output cost must be greater than 0.';
+	}
+	if ((pricing.cacheRead ?? 0) < 0 || (pricing.cacheWrite ?? 0) < 0) {
+		return 'Cache costs must be non-negative.';
+	}
+	return true;
+};
--- a/frontend/src/container/MembersSettings/MembersSettings.styles.scss
+++ b/frontend/src/container/MembersSettings/MembersSettings.styles.scss
@@ -1,9 +1,14 @@
+@use '../../styles/scrollbar' as *;
+
 .members-settings-page {
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-8);
 	padding: var(--padding-4) var(--padding-2) var(--padding-6) var(--padding-4);
 	height: 100%;
+	overflow-y: auto;
+
+	@include custom-scrollbar;
 }

 .members-settings {
--- a/frontend/src/container/MembersSettings/MembersSettings.tsx
+++ b/frontend/src/container/MembersSettings/MembersSettings.tsx
@@ -6,7 +6,7 @@ import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
 import { useListUsers } from 'api/generated/services/users';
 import EditMemberDrawer from 'components/EditMemberDrawer/EditMemberDrawer';
-import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal';
+import InviteMembersModal from 'container/MembersSettings/components/InviteMembersModal/InviteMembersModal';
 import MembersTable, { MemberRow } from 'components/MembersTable/MembersTable';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { parseAsBoolean, useQueryState } from 'nuqs';
--- a/frontend/src/container/MembersSettings/tests/MembersSettings.integration.test.tsx
+++ b/frontend/src/container/MembersSettings/tests/MembersSettings.integration.test.tsx
@@ -110,7 +110,9 @@ describe('MembersSettings (integration)', () => {

 		fireEvent.click(await screen.findByText('Alice Smith'));

-		await screen.findByText('Member Details');
+		await expect(
+			screen.findByText('Member Details'),
+		).resolves.toBeInTheDocument();
 	});

 	it('opens EditMemberDrawer when a deleted member row is clicked', async () => {
@@ -127,7 +129,7 @@ describe('MembersSettings (integration)', () => {
 		fireEvent.click(screen.getByRole('button', { name: /invite member/i }));

 		await expect(
-			screen.findAllByPlaceholderText('john@signoz.io'),
+			screen.findAllByPlaceholderText('e.g. john@signoz.io'),
 		).resolves.toHaveLength(3);
 	});

@@ -137,7 +139,7 @@ describe('MembersSettings (integration)', () => {
 		});

 		await expect(
-			screen.findAllByPlaceholderText('john@signoz.io'),
+			screen.findAllByPlaceholderText('e.g. john@signoz.io'),
 		).resolves.toHaveLength(3);
 	});
 });
--- a/frontend/src/container/MembersSettings/components/InviteMembersModal/InviteMembersModal.styles.scss
+++ b/frontend/src/container/MembersSettings/components/InviteMembersModal/InviteMembersModal.styles.scss
@@ -0,0 +1,38 @@
+.invite-members-modal {
+	max-width: 700px;
+	background: var(--popover);
+	border: 1px solid var(--secondary);
+	border-radius: 4px;
+	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);
+
+	[data-slot='dialog-header'] {
+		padding: var(--padding-4);
+		border-bottom: 1px solid var(--secondary);
+		flex-shrink: 0;
+		background: transparent;
+		margin: 0;
+	}
+
+	[data-slot='dialog-title'] {
+		font-family: Inter, sans-serif;
+		font-size: var(--label-base-400-font-size);
+		font-weight: var(--label-base-400-font-weight);
+		line-height: var(--label-base-400-line-height);
+		letter-spacing: -0.065px;
+		color: var(--l1-foreground);
+		margin: 0;
+	}
+
+	[data-slot='dialog-description'] {
+		padding: var(--padding-4);
+	}
+}
+
+.invite-members-modal__footer {
+	padding-top: var(--padding-4);
+	border-top: 1px solid var(--l1-border);
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--spacing-6);
+}
--- a/frontend/src/container/MembersSettings/components/InviteMembersModal/InviteMembersModal.tsx
+++ b/frontend/src/container/MembersSettings/components/InviteMembersModal/InviteMembersModal.tsx
@@ -0,0 +1,71 @@
+import { useCallback } from 'react';
+import { X } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+import { toast } from '@signozhq/ui/sonner';
+import InviteMembers from 'components/InviteMembers/InviteMembers';
+
+import './InviteMembersModal.styles.scss';
+
+export interface InviteMembersModalProps {
+	open: boolean;
+	onClose: () => void;
+	onComplete?: () => void;
+}
+
+function InviteMembersModal({
+	open,
+	onClose,
+	onComplete,
+}: InviteMembersModalProps): JSX.Element {
+	const handleSuccess = useCallback((): void => {
+		toast.success('Invites sent successfully', { position: 'top-right' });
+		onClose();
+		onComplete?.();
+	}, [onClose, onComplete]);
+
+	const handlePartialSuccess = useCallback((): void => {
+		toast.warning('Some invites failed', { position: 'top-right' });
+		onComplete?.();
+	}, [onComplete]);
+
+	return (
+		<DialogWrapper
+			title="Invite Team Members"
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
+			showCloseButton
+			width="wide"
+			className="invite-members-modal"
+		>
+			<InviteMembers
+				onSuccess={handleSuccess}
+				onPartialSuccess={handlePartialSuccess}
+				renderFooter={({ submit, canSubmit, isSubmitting }): JSX.Element => (
+					<div className="invite-members-modal__footer">
+						<Button type="button" variant="solid" color="secondary" onClick={onClose}>
+							<X size={12} />
+							Cancel
+						</Button>
+
+						<Button
+							variant="solid"
+							color="primary"
+							onClick={submit}
+							disabled={!canSubmit}
+							loading={isSubmitting}
+						>
+							{isSubmitting ? 'Inviting...' : 'Invite Team Members'}
+						</Button>
+					</div>
+				)}
+			/>
+		</DialogWrapper>
+	);
+}
+
+export default InviteMembersModal;
--- a/frontend/src/container/MembersSettings/components/InviteMembersModal/tests/InviteMembersModal.test.tsx
+++ b/frontend/src/container/MembersSettings/components/InviteMembersModal/tests/InviteMembersModal.test.tsx
@@ -0,0 +1,210 @@
+import { toast } from '@signozhq/ui/sonner';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import InviteMembersModal from '../InviteMembersModal';
+
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: {
+		success: jest.fn(),
+		warning: jest.fn(),
+	},
+}));
+
+interface MockInviteMembersProps {
+	onSuccess: () => void;
+	onPartialSuccess: () => void;
+	onAllFailed?: () => void;
+	renderFooter: (props: {
+		submit: () => void;
+		canSubmit: boolean;
+		isSubmitting: boolean;
+	}) => JSX.Element;
+}
+
+let mockInviteMembersProps: MockInviteMembersProps | null = null;
+
+jest.mock('components/InviteMembers/InviteMembers', () => {
+	return function MockInviteMembers(props: MockInviteMembersProps): JSX.Element {
+		mockInviteMembersProps = props;
+		return (
+			<div data-testid="mock-invite-members">
+				{props.renderFooter({
+					submit: jest.fn(),
+					canSubmit: true,
+					isSubmitting: false,
+				})}
+			</div>
+		);
+	};
+});
+
+const defaultProps = {
+	open: true,
+	onClose: jest.fn(),
+	onComplete: jest.fn(),
+};
+
+function renderComponent(
+	props: Partial<typeof defaultProps> = {},
+): ReturnType<typeof render> {
+	return render(<InviteMembersModal {...defaultProps} {...props} />);
+}
+
+describe('InviteMembersModal', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockInviteMembersProps = null;
+	});
+
+	describe('rendering', () => {
+		it('renders modal with title and InviteMembers component', () => {
+			renderComponent();
+
+			expect(screen.getByRole('dialog')).toBeInTheDocument();
+			expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
+				'Invite Team Members',
+			);
+			expect(screen.getByTestId('mock-invite-members')).toBeInTheDocument();
+		});
+
+		it('does not render when open=false', () => {
+			renderComponent({ open: false });
+
+			expect(screen.queryByText('Invite Team Members')).not.toBeInTheDocument();
+		});
+	});
+
+	describe('footer buttons', () => {
+		it('renders Cancel and Invite buttons', () => {
+			renderComponent();
+
+			expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+			expect(
+				screen.getByRole('button', { name: /invite team members/i }),
+			).toBeInTheDocument();
+		});
+
+		it('disables Invite button when canSubmit=false', () => {
+			const { unmount } = renderComponent();
+			unmount();
+
+			const { getByRole } = render(
+				mockInviteMembersProps?.renderFooter({
+					submit: jest.fn(),
+					canSubmit: false,
+					isSubmitting: false,
+				}) as JSX.Element,
+			);
+
+			expect(getByRole('button', { name: /invite team members/i })).toBeDisabled();
+		});
+
+		it('shows loading state when isSubmitting=true', () => {
+			const { unmount } = renderComponent();
+			unmount();
+
+			const { getByRole } = render(
+				mockInviteMembersProps?.renderFooter({
+					submit: jest.fn(),
+					canSubmit: true,
+					isSubmitting: true,
+				}) as JSX.Element,
+			);
+
+			expect(getByRole('button', { name: /inviting/i })).toBeInTheDocument();
+		});
+
+		it('calls onClose when Cancel is clicked', async () => {
+			const user = userEvent.setup();
+			const onClose = jest.fn();
+			renderComponent({ onClose });
+
+			await user.click(screen.getByRole('button', { name: /cancel/i }));
+
+			expect(onClose).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls submit when Invite button is clicked', async () => {
+			const user = userEvent.setup();
+			const mockSubmit = jest.fn();
+
+			const { unmount } = renderComponent();
+			unmount();
+
+			const { getByRole } = render(
+				mockInviteMembersProps?.renderFooter({
+					submit: mockSubmit,
+					canSubmit: true,
+					isSubmitting: false,
+				}) as JSX.Element,
+			);
+
+			await user.click(getByRole('button', { name: /invite team members/i }));
+
+			expect(mockSubmit).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	describe('handleSuccess callback', () => {
+		it('shows success toast, calls onClose and onComplete', () => {
+			const onClose = jest.fn();
+			const onComplete = jest.fn();
+			renderComponent({ onClose, onComplete });
+
+			mockInviteMembersProps?.onSuccess();
+
+			expect(toast.success).toHaveBeenCalledWith('Invites sent successfully', {
+				position: 'top-right',
+			});
+			expect(onClose).toHaveBeenCalledTimes(1);
+			expect(onComplete).toHaveBeenCalledTimes(1);
+		});
+
+		it('works without onComplete prop', () => {
+			const onClose = jest.fn();
+			renderComponent({ onClose, onComplete: undefined });
+
+			mockInviteMembersProps?.onSuccess();
+
+			expect(toast.success).toHaveBeenCalled();
+			expect(onClose).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	describe('handlePartialSuccess callback', () => {
+		it('shows warning toast and calls onComplete', () => {
+			const onComplete = jest.fn();
+			renderComponent({ onComplete });
+
+			mockInviteMembersProps?.onPartialSuccess();
+
+			expect(toast.warning).toHaveBeenCalledWith('Some invites failed', {
+				position: 'top-right',
+			});
+			expect(onComplete).toHaveBeenCalledTimes(1);
+		});
+
+		it('does not call onClose on partial success', () => {
+			const onClose = jest.fn();
+			renderComponent({ onClose });
+
+			mockInviteMembersProps?.onPartialSuccess();
+
+			expect(onClose).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('dialog close behavior', () => {
+		it('calls onClose when dialog is closed via close button', async () => {
+			const user = userEvent.setup();
+			const onClose = jest.fn();
+			renderComponent({ onClose });
+
+			const closeButton = screen.getByRole('button', { name: /close/i });
+			await user.click(closeButton);
+
+			expect(onClose).toHaveBeenCalled();
+		});
+	});
+});
--- a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx
@@ -1,26 +1,12 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useMutation } from 'react-query';
+import { useMemo } from 'react';
+import { ArrowRight, LoaderCircle } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { Callout } from '@signozhq/ui/callout';
-import { Input } from '@signozhq/ui/input';
-import { Select } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import inviteUsers from 'api/v1/invite/bulk/create';
-import AuthError from 'components/AuthError/AuthError';
+import InviteMembers from 'components/InviteMembers/InviteMembers';
+import { InviteMemberRow, InviteResult } from 'components/InviteMembers/types';
+import { useRoles } from 'components/RolesSelect/RolesSelect';
 import { useNotifications } from 'hooks/useNotifications';
-import { cloneDeep, debounce } from 'lodash-es';
-import {
-	ArrowRight,
-	ChevronDown,
-	CircleAlert,
-	LoaderCircle,
-	Plus,
-	Trash2,
-} from '@signozhq/icons';
-import APIError from 'types/api/error';
 import { getBaseUrl } from 'utils/basePath';
-import { v4 as uuid } from 'uuid';

 import { OnboardingQuestionHeader } from '../OnboardingQuestionHeader';

@@ -36,101 +22,41 @@ interface TeamMember {

 interface InviteTeamMembersProps {
 	isLoading: boolean;
-	teamMembers: TeamMember[] | null;
-	setTeamMembers: (teamMembers: TeamMember[]) => void;
 	onNext: () => void;
 }

 function InviteTeamMembers({
 	isLoading,
-	teamMembers,
-	setTeamMembers,
 	onNext,
 }: InviteTeamMembersProps): JSX.Element {
-	const [teamMembersToInvite, setTeamMembersToInvite] = useState<
-		TeamMember[] | null
-	>(teamMembers);
-	const [emailValidity, setEmailValidity] = useState<Record<string, boolean>>(
-		{},
-	);
-	const [hasInvalidEmails, setHasInvalidEmails] = useState<boolean>(false);
-	const [hasInvalidRoles, setHasInvalidRoles] = useState<boolean>(false);
-	const [inviteError, setInviteError] = useState<APIError | null>(null);
 	const { notifications } = useNotifications();
+	const { roles } = useRoles();

-	const defaultTeamMember: TeamMember = {
-		email: '',
-		role: '',
-		name: '',
-		frontendBaseUrl: getBaseUrl(),
-		id: '',
-	};
-
-	useEffect(() => {
-		if (teamMembers === null) {
-			const initialTeamMembers = Array.from({ length: 3 }, () => ({
-				...defaultTeamMember,
-				id: uuid(),
-			}));
-
-			setTeamMembersToInvite(initialTeamMembers);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [teamMembers]);
-
-	const handleAddTeamMember = (): void => {
-		const newTeamMember = {
-			...defaultTeamMember,
-			id: uuid(),
-		};
-		setTeamMembersToInvite((prev) => [...(prev || []), newTeamMember]);
-	};
-
-	const handleRemoveTeamMember = (id: string): void => {
-		setTeamMembersToInvite((prev) => (prev || []).filter((m) => m.id !== id));
-	};
-
-	const isMemberTouched = (member: TeamMember): boolean =>
-		member.email.trim() !== '' ||
-		Boolean(member.role && member.role.trim() !== '');
-
-	const validateAllUsers = (): boolean => {
-		let isValid = true;
-		let hasEmailErrors = false;
-		let hasRoleErrors = false;
-
-		const updatedEmailValidity: Record<string, boolean> = {};
-
-		const touchedMembers = teamMembersToInvite?.filter(isMemberTouched) ?? [];
-
-		touchedMembers?.forEach((member) => {
-			const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(member.email);
-			const roleValid = Boolean(member.role && member.role.trim() !== '');
-
-			if (!emailValid || !member.email) {
-				isValid = false;
-				hasEmailErrors = true;
-			}
-			if (!roleValid) {
-				isValid = false;
-				hasRoleErrors = true;
-			}
-
-			if (member.id) {
-				updatedEmailValidity[member.id] = emailValid;
+	const roleIdToName = useMemo(() => {
+		const map: Record<string, string> = {};
+		roles.forEach((role) => {
+			if (role.id && role.name) {
+				map[role.id] = role.name;
 			}
 		});
+		return map;
+	}, [roles]);

-		setEmailValidity(updatedEmailValidity);
-		setHasInvalidEmails(hasEmailErrors);
-		setHasInvalidRoles(hasRoleErrors);
+	const toTeamMembers = (rows: InviteMemberRow[]): TeamMember[] =>
+		rows.map((row) => ({
+			email: row.email,
+			role: roleIdToName[row.roleId] ?? row.roleId,
+			name: '',
+			frontendBaseUrl: getBaseUrl(),
+			id: row.id,
+		}));

-		return isValid;
-	};
-
-	const handleInviteUsersSuccess = (): void => {
+	const handleSuccess = (
+		_results: InviteResult[],
+		rows: InviteMemberRow[],
+	): void => {
 		logEvent('Org Onboarding: Invite Team Members Success', {
-			teamMembers: teamMembersToInvite,
+			teamMembers: toTeamMembers(rows),
 		});
 		notifications.success({
 			message: 'Invites sent successfully!',
@@ -140,125 +66,34 @@ function InviteTeamMembers({
 		}, 1000);
 	};

-	const { mutate: sendInvites, isLoading: isSendingInvites } = useMutation(
-		inviteUsers,
-		{
-			onSuccess: (): void => {
-				handleInviteUsersSuccess();
-			},
-			onError: (error: APIError): void => {
-				logEvent('Org Onboarding: Invite Team Members Failed', {
-					teamMembers: teamMembersToInvite,
-				});
-				setInviteError(error);
-			},
-		},
-	);
-
-	const handleNext = (): void => {
-		if (validateAllUsers()) {
-			setTeamMembers(teamMembersToInvite?.filter(isMemberTouched) ?? []);
-			setHasInvalidEmails(false);
-			setHasInvalidRoles(false);
-			setInviteError(null);
-			sendInvites({
-				invites: teamMembersToInvite?.filter(isMemberTouched) ?? [],
-			});
-		}
+	const handlePartialSuccess = (
+		_results: InviteResult[],
+		rows: InviteMemberRow[],
+	): void => {
+		logEvent('Org Onboarding: Invite Team Members Partial Success', {
+			teamMembers: toTeamMembers(rows),
+		});
+		notifications.warning({
+			message: 'Some invites failed. Check the errors above.',
+		});
 	};

-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	const debouncedValidateEmail = useCallback(
-		debounce((email: string, memberId: string, updatedMembers: TeamMember[]) => {
-			const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-			setEmailValidity((prev) => ({ ...prev, [memberId]: isValid }));
-
-			// Clear hasInvalidEmails only when ALL emails are valid
-			if (hasInvalidEmails) {
-				const allEmailsValid = updatedMembers.every(
-					(m) => m.email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(m.email),
-				);
-				if (allEmailsValid) {
-					setHasInvalidEmails(false);
-				}
-			}
-		}, 500),
-		[hasInvalidEmails],
-	);
-
-	const handleEmailChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>, member: TeamMember): void => {
-			const { value } = e.target;
-			const updatedMembers = cloneDeep(teamMembersToInvite || []);
-
-			const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
-			if (memberToUpdate && member.id) {
-				memberToUpdate.email = value;
-				setTeamMembersToInvite(updatedMembers);
-				debouncedValidateEmail(value, member.id, updatedMembers);
-				// Clear API error when user starts typing
-				if (inviteError) {
-					setInviteError(null);
-				}
-			}
-		},
-		[debouncedValidateEmail, inviteError, teamMembersToInvite],
-	);
-
-	const createEmailChangeHandler = useCallback(
-		(member: TeamMember) =>
-			(e: React.ChangeEvent<HTMLInputElement>): void => {
-				handleEmailChange(e, member);
-			},
-		[handleEmailChange],
-	);
-
-	const handleRoleChange = (role: string, member: TeamMember): void => {
-		const updatedMembers = cloneDeep(teamMembersToInvite || []);
-		const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
-		if (memberToUpdate && member.id) {
-			memberToUpdate.role = role;
-			setTeamMembersToInvite(updatedMembers);
-
-			// Clear errors when user selects a role
-			if (hasInvalidRoles) {
-				// Check if all roles are now valid
-				const allRolesValid = updatedMembers.every(
-					(m) => m.role && m.role.trim() !== '',
-				);
-				if (allRolesValid) {
-					setHasInvalidRoles(false);
-				}
-			}
-			if (inviteError) {
-				setInviteError(null);
-			}
-		}
-	};
-
-	const getValidationErrorMessage = (): string => {
-		if (hasInvalidEmails && hasInvalidRoles) {
-			return 'Please enter valid emails and select roles for team members';
-		}
-		if (hasInvalidEmails) {
-			return 'Please enter valid emails for team members';
-		}
-		return 'Please select roles for team members';
+	const handleAllFailed = (
+		_results: InviteResult[],
+		rows: InviteMemberRow[],
+	): void => {
+		logEvent('Org Onboarding: Invite Team Members Failed', {
+			teamMembers: toTeamMembers(rows),
+		});
 	};

 	const handleDoLater = (): void => {
 		logEvent('Org Onboarding: Clicked Do Later', {
 			currentPageID: 4,
 		});
-
 		onNext();
 	};

-	const hasInvites =
-		(teamMembersToInvite?.filter(isMemberTouched) ?? []).length > 0;
-	const isButtonDisabled = isSendingInvites || isLoading;
-	const isInviteButtonDisabled = isButtonDisabled || !hasInvites;
-
 	return (
 		<div className="questions-container">
 			<OnboardingQuestionHeader
@@ -273,126 +108,52 @@ function InviteTeamMembers({
 							Invite your team to the SigNoz workspace
 						</div>

-						<div className="invite-team-members-table">
-							<div className="invite-team-members-table-header">
-								<div className="table-header-cell email-header">Email address</div>
-								<div className="table-header-cell role-header">Roles</div>
-								<div className="table-header-cell action-header" />
-							</div>
+						<InviteMembers
+							onSuccess={handleSuccess}
+							onPartialSuccess={handlePartialSuccess}
+							onAllFailed={handleAllFailed}
+							showHeader
+							renderFooter={({ submit, canSubmit, isSubmitting }): JSX.Element => {
+								const isButtonDisabled = isSubmitting || isLoading;
+								const isInviteButtonDisabled = isButtonDisabled || !canSubmit;

-							<div className="invite-team-members-container">
-								{teamMembersToInvite?.map((member) => (
-									<div className="team-member-row" key={member.id}>
-										<div className="team-member-cell email-cell">
-											<Input
-												placeholder="e.g. john@signoz.io"
-												value={member.email}
-												type="email"
-												id={`email-input-${member.id}`}
-												name={`email-input-${member.id}`}
-												required
-												autoComplete="off"
-												className="team-member-email-input"
-												onChange={createEmailChangeHandler(member)}
-											/>
-											{member.id &&
-												emailValidity[member.id] === false &&
-												member.email.trim() !== '' && (
-													<Typography.Text className="email-error-message">
-														Invalid email address
-													</Typography.Text>
-												)}
-										</div>
-										<div className="team-member-cell role-cell">
-											<Select
-												value={member.role || undefined}
-												onChange={(value): void => handleRoleChange(value, member)}
-												className="team-member-role-select"
-												placeholder="Select roles"
-												suffixIcon={<ChevronDown size={14} />}
-											>
-												<Select.Option value="VIEWER">Viewer</Select.Option>
-												<Select.Option value="EDITOR">Editor</Select.Option>
-												<Select.Option value="ADMIN">Admin</Select.Option>
-											</Select>
-										</div>
-										<div className="team-member-cell action-cell">
-											{teamMembersToInvite && teamMembersToInvite.length > 1 && (
-												<Button
-													variant="ghost"
-													color="secondary"
-													className="remove-team-member-button"
-													onClick={(): void => handleRemoveTeamMember(member.id)}
-													aria-label="Remove team member"
-												>
-													<Trash2 size={12} />
-												</Button>
-											)}
-										</div>
+								return (
+									<div className="onboarding-buttons-container">
+										<Button
+											variant="solid"
+											color="primary"
+											className={`onboarding-next-button ${
+												isInviteButtonDisabled ? 'disabled' : ''
+											}`}
+											onClick={submit}
+											disabled={isInviteButtonDisabled}
+											data-testid="send-invites-button"
+											suffix={
+												isButtonDisabled ? (
+													<LoaderCircle className="animate-spin" size={12} />
+												) : (
+													<ArrowRight size={12} />
+												)
+											}
+										>
+											Send Invites
+										</Button>
+										<Button
+											variant="ghost"
+											color="secondary"
+											className="onboarding-do-later-button"
+											onClick={handleDoLater}
+											disabled={isButtonDisabled}
+											data-testid="do-later-button"
+										>
+											I&apos;ll do this later
+										</Button>
 									</div>
-								))}
-							</div>
-
-							<div className="invite-team-members-add-another-member-container">
-								<Button
-									variant="dashed"
-									color="secondary"
-									className="add-another-member-button"
-									prefix={<Plus size={12} />}
-									onClick={handleAddTeamMember}
-								>
-									Add another
-								</Button>
-							</div>
-						</div>
+								);
+							}}
+						/>
 					</div>
 				</div>
-
-				{(hasInvalidEmails || hasInvalidRoles) && (
-					<Callout
-						type="error"
-						size="small"
-						showIcon
-						icon={<CircleAlert size={12} />}
-						className="invite-team-members-error-callout"
-					>
-						{getValidationErrorMessage()}
-					</Callout>
-				)}
-
-				{inviteError && !hasInvalidEmails && !hasInvalidRoles && (
-					<AuthError error={inviteError} />
-				)}
-
-				<div className="onboarding-buttons-container">
-					<Button
-						variant="solid"
-						color="primary"
-						className={`onboarding-next-button ${
-							isInviteButtonDisabled ? 'disabled' : ''
-						}`}
-						onClick={handleNext}
-						disabled={isInviteButtonDisabled}
-						suffix={
-							isButtonDisabled ? (
-								<LoaderCircle className="animate-spin" size={12} />
-							) : (
-								<ArrowRight size={12} />
-							)
-						}
-					>
-						Send Invites
-					</Button>
-					<Button
-						variant="ghost"
-						color="secondary"
-						className="onboarding-do-later-button"
-						onClick={handleDoLater}
-						disabled={isButtonDisabled}
-					>
-						I&apos;ll do this later
-					</Button>
-				</div>
 			</div>
 		</div>
 	);
--- a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/tests/InviteTeamMembers.test.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/tests/InviteTeamMembers.test.tsx
@@ -1,97 +1,86 @@
-import { rest, server } from 'mocks-server/server';
 import {
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
+	InviteMemberRow,
+	InviteMembersProps,
+	InviteResult,
+} from 'components/InviteMembers/types';
+import logEvent from 'api/common/logEvent';
+import { render, screen, userEvent } from 'tests/test-utils';

 import InviteTeamMembers from '../InviteTeamMembers';

-const mockNotificationSuccess = jest.fn() as jest.MockedFunction<
-	(args: { message: string }) => void
->;
-const mockNotificationError = jest.fn() as jest.MockedFunction<
-	(args: { message: string }) => void
->;
+const mockNotificationSuccess = jest.fn();
+const mockNotificationWarning = jest.fn();

 jest.mock('hooks/useNotifications', () => ({
 	useNotifications: (): any => ({
 		notifications: {
 			success: mockNotificationSuccess,
-			error: mockNotificationError,
+			warning: mockNotificationWarning,
 		},
 	}),
 }));

-const INVITE_USERS_ENDPOINT = '*/api/v1/invite/bulk';
+jest.mock('api/common/logEvent', () => jest.fn());

-interface TeamMember {
-	email: string;
-	role: string;
-	name: string;
-	frontendBaseUrl: string;
-	id: string;
-}
+jest.mock('components/RolesSelect/RolesSelect', () => ({
+	useRoles: (): any => ({
+		roles: [
+			{ id: 'role-viewer-id', name: 'VIEWER' },
+			{ id: 'role-editor-id', name: 'EDITOR' },
+			{ id: 'role-admin-id', name: 'ADMIN' },
+		],
+		isLoading: false,
+		isError: false,
+		error: undefined,
+		refetch: jest.fn(),
+	}),
+}));

-interface InviteRequestBody {
-	invites: { email: string; role: string }[];
-}
+jest.mock('utils/basePath', () => ({
+	...jest.requireActual('utils/basePath'),
+	getBaseUrl: (): string => 'http://localhost:3301',
+}));

-interface RenderProps {
-	isLoading?: boolean;
-	teamMembers?: TeamMember[] | null;
-}
+let mockInviteMembersProps: InviteMembersProps | null = null;

-const mockOnNext = jest.fn() as jest.MockedFunction<() => void>;
-const mockSetTeamMembers = jest.fn() as jest.MockedFunction<
-	(members: TeamMember[]) => void
->;
+jest.mock('components/InviteMembers/InviteMembers', () => {
+	return function MockInviteMembers(props: InviteMembersProps): JSX.Element {
+		mockInviteMembersProps = props;
+		return (
+			<div data-testid="mock-invite-members">
+				{props.renderFooter?.({
+					submit: jest.fn().mockResolvedValue([]),
+					reset: jest.fn(),
+					canSubmit: true,
+					isSubmitting: false,
+					touchedCount: 0,
+				})}
+			</div>
+		);
+	};
+});
+
+const mockOnNext = jest.fn();

 function renderComponent({
 	isLoading = false,
-	teamMembers = null,
-}: RenderProps = {}): ReturnType<typeof render> {
-	return render(
-		<InviteTeamMembers
-			isLoading={isLoading}
-			teamMembers={teamMembers}
-			setTeamMembers={mockSetTeamMembers}
-			onNext={mockOnNext}
-		/>,
-	);
-}
-
-async function selectRole(
-	user: ReturnType<typeof userEvent.setup>,
-	selectIndex: number,
-	optionLabel: string,
-): Promise<void> {
-	const placeholders = screen.getAllByText(/select roles/i);
-	await user.click(placeholders[selectIndex]);
-	const optionContent = await screen.findByText(optionLabel);
-	fireEvent.click(optionContent);
+}: { isLoading?: boolean } = {}): ReturnType<typeof render> {
+	return render(<InviteTeamMembers isLoading={isLoading} onNext={mockOnNext} />);
 }

 describe('InviteTeamMembers', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-
-		server.use(
-			rest.post(INVITE_USERS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ status: 'success' })),
-			),
-		);
+		jest.useFakeTimers();
+		mockInviteMembersProps = null;
 	});

 	afterEach(() => {
 		jest.useRealTimers();
-		server.resetHandlers();
 	});

-	describe('Initial rendering', () => {
-		it('renders the page header, column labels, default rows, and action buttons', () => {
+	describe('rendering', () => {
+		it('renders header and InviteMembers component', () => {
 			renderComponent();

 			expect(
@@ -100,11 +89,20 @@ describe('InviteTeamMembers', () => {
 			expect(
 				screen.getByText(/signoz is a lot more useful with collaborators/i),
 			).toBeInTheDocument();
-			expect(
-				screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i),
-			).toHaveLength(3);
-			expect(screen.getByText('Email address')).toBeInTheDocument();
-			expect(screen.getByText('Roles')).toBeInTheDocument();
+			expect(screen.getByTestId('mock-invite-members')).toBeInTheDocument();
+		});
+
+		it('passes showHeader=true to InviteMembers', () => {
+			renderComponent();
+
+			expect(mockInviteMembersProps?.showHeader).toBe(true);
+		});
+	});
+
+	describe('footer buttons', () => {
+		it('renders Send Invites and Do Later buttons', () => {
+			renderComponent();
+
 			expect(
 				screen.getByRole('button', { name: /send invites/i }),
 			).toBeInTheDocument();
@@ -113,7 +111,7 @@ describe('InviteTeamMembers', () => {
 			).toBeInTheDocument();
 		});

-		it('disables both action buttons while isLoading is true', () => {
+		it('disables buttons when isLoading=true', () => {
 			renderComponent({ isLoading: true });

 			expect(screen.getByRole('button', { name: /send invites/i })).toBeDisabled();
@@ -121,355 +119,181 @@ describe('InviteTeamMembers', () => {
 				screen.getByRole('button', { name: /i'll do this later/i }),
 			).toBeDisabled();
 		});
-	});

-	describe('Row management', () => {
-		it('adds a new empty row when "Add another" is clicked', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			renderComponent();
+		it('disables Send Invites when canSubmit=false from InviteMembers', () => {
+			const { unmount } = renderComponent();
+			unmount();

-			expect(
-				screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i),
-			).toHaveLength(3);
-
-			await user.click(screen.getByRole('button', { name: /add another/i }));
-
-			expect(
-				screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i),
-			).toHaveLength(4);
-		});
-
-		it('removes the correct row when its trash icon is clicked', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			renderComponent();
-
-			const emailInputs = screen.getAllByPlaceholderText(
-				/e\.g\. john@signoz\.io/i,
-			);
-			await user.type(emailInputs[0], 'first@example.com');
-			await screen.findByDisplayValue('first@example.com');
-
-			await user.click(
-				screen.getAllByRole('button', { name: /remove team member/i })[0],
+			const { getByTestId } = render(
+				mockInviteMembersProps?.renderFooter?.({
+					submit: jest.fn().mockResolvedValue([]),
+					reset: jest.fn(),
+					canSubmit: false,
+					isSubmitting: false,
+					touchedCount: 0,
+				}) as JSX.Element,
 			);

-			await waitFor(() => {
-				expect(
-					screen.queryByDisplayValue('first@example.com'),
-				).not.toBeInTheDocument();
-				expect(
-					screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i),
-				).toHaveLength(2);
-			});
+			expect(getByTestId('send-invites-button')).toBeDisabled();
+			expect(getByTestId('do-later-button')).not.toBeDisabled();
 		});

-		it('hides remove buttons when only one row remains', async () => {
-			renderComponent();
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
+		it('disables buttons when isSubmitting=true from InviteMembers', () => {
+			const { unmount } = renderComponent();
+			unmount();

-			let removeButtons = screen.getAllByRole('button', {
-				name: /remove team member/i,
-			});
-			while (removeButtons.length > 0) {
-				await user.click(removeButtons[0]);
-				removeButtons = screen.queryAllByRole('button', {
-					name: /remove team member/i,
-				});
-			}
+			const { getByTestId } = render(
+				mockInviteMembersProps?.renderFooter?.({
+					submit: jest.fn().mockResolvedValue([]),
+					reset: jest.fn(),
+					canSubmit: true,
+					isSubmitting: true,
+					touchedCount: 0,
+				}) as JSX.Element,
+			);

-			expect(
-				screen.queryByRole('button', { name: /remove team member/i }),
-			).not.toBeInTheDocument();
+			expect(getByTestId('send-invites-button')).toBeDisabled();
+			expect(getByTestId('do-later-button')).toBeDisabled();
 		});
 	});

-	describe('Inline email validation', () => {
-		it('shows an inline error after typing an invalid email and clears it when a valid email is entered', async () => {
-			jest.useFakeTimers();
-			const user = userEvent.setup({
-				advanceTimers: (ms) => jest.advanceTimersByTime(ms),
-			});
+	describe('handleSuccess callback', () => {
+		it('logs event with teamMembers in correct shape, shows success notification, and calls onNext after delay', () => {
 			renderComponent();

-			const [firstInput] = screen.getAllByPlaceholderText(
-				/e\.g\. john@signoz\.io/i,
-			);
+			const mockResults: InviteResult[] = [
+				{ email: 'user1@test.com', success: true },
+				{ email: 'user2@test.com', success: true },
+			];
+			const mockRows: InviteMemberRow[] = [
+				{ id: 'row-1', email: 'user1@test.com', roleId: 'role-viewer-id' },
+				{ id: 'row-2', email: 'user2@test.com', roleId: 'role-editor-id' },
+			];
+			mockInviteMembersProps?.onSuccess?.(mockResults, mockRows);

-			await user.type(firstInput, 'not-an-email');
-			jest.advanceTimersByTime(600);
-			await waitFor(() => {
-				expect(screen.getByText(/invalid email address/i)).toBeInTheDocument();
-			});
-
-			await user.clear(firstInput);
-			await user.type(firstInput, 'good@example.com');
-			jest.advanceTimersByTime(600);
-			await waitFor(() => {
-				expect(
-					screen.queryByText(/invalid email address/i),
-				).not.toBeInTheDocument();
-			});
-		});
-
-		it('does not show an inline error when the field is cleared back to empty', async () => {
-			jest.useFakeTimers();
-			const user = userEvent.setup({
-				advanceTimers: (ms) => jest.advanceTimersByTime(ms),
-			});
-			renderComponent();
-
-			const [firstInput] = screen.getAllByPlaceholderText(
-				/e\.g\. john@signoz\.io/i,
-			);
-			await user.type(firstInput, 'a');
-			await user.clear(firstInput);
-			jest.advanceTimersByTime(600);
-
-			await waitFor(() => {
-				expect(
-					screen.queryByText(/invalid email address/i),
-				).not.toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('Validation callout on Complete', () => {
-		it('shows the correct callout message for each combination of email/role validity', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0, delay: null });
-			renderComponent();
-
-			const removeButtons = screen.getAllByRole('button', {
-				name: /remove team member/i,
-			});
-			await user.click(removeButtons[0]);
-			await user.click(
-				screen.getAllByRole('button', { name: /remove team member/i })[0],
-			);
-
-			const [firstInput] = screen.getAllByPlaceholderText(
-				/e\.g\. john@signoz\.io/i,
-			);
-
-			await user.type(firstInput, 'bad-email');
-			await user.click(screen.getByRole('button', { name: /send invites/i }));
-			await waitFor(() => {
-				expect(
-					screen.getByText(
-						/please enter valid emails and select roles for team members/i,
-					),
-				).toBeInTheDocument();
-				expect(
-					screen.queryByText(/please enter valid emails for team members/i),
-				).not.toBeInTheDocument();
-				expect(
-					screen.queryByText(/please select roles for team members/i),
-				).not.toBeInTheDocument();
-			});
-
-			await selectRole(user, 0, 'Viewer');
-			await user.click(screen.getByRole('button', { name: /send invites/i }));
-			await waitFor(() => {
-				expect(
-					screen.getByText(/please enter valid emails for team members/i),
-				).toBeInTheDocument();
-				expect(
-					screen.queryByText(/please select roles for team members/i),
-				).not.toBeInTheDocument();
-				expect(
-					screen.queryByText(/please enter valid emails and select roles/i),
-				).not.toBeInTheDocument();
-			});
-
-			await user.clear(firstInput);
-			await user.type(firstInput, 'valid@example.com');
-			await user.click(screen.getByRole('button', { name: /add another/i }));
-			const allInputs = screen.getAllByPlaceholderText(/e\.g\. john@signoz\.io/i);
-			await user.type(allInputs[1], 'norole@example.com');
-			await user.click(screen.getByRole('button', { name: /send invites/i }));
-			await waitFor(() => {
-				expect(
-					screen.getByText(/please select roles for team members/i),
-				).toBeInTheDocument();
-				expect(
-					screen.queryByText(/please enter valid emails for team members/i),
-				).not.toBeInTheDocument();
-				expect(
-					screen.queryByText(/please enter valid emails and select roles/i),
-				).not.toBeInTheDocument();
-			});
-		}, 15000);
-
-		it('treats whitespace as untouched, clears the callout on fix-and-resubmit, and clears role error on role select', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0, delay: null });
-			renderComponent();
-
-			const removeButtons = screen.getAllByRole('button', {
-				name: /remove team member/i,
-			});
-			await user.click(removeButtons[0]);
-			await user.click(
-				screen.getAllByRole('button', { name: /remove team member/i })[0],
-			);
-
-			const [firstInput] = screen.getAllByPlaceholderText(
-				/e\.g\. john@signoz\.io/i,
-			);
-
-			await user.type(firstInput, '   ');
-			await user.click(screen.getByRole('button', { name: /send invites/i }));
-			await waitFor(() => {
-				expect(
-					screen.queryByText(/please enter valid emails/i),
-				).not.toBeInTheDocument();
-				expect(screen.queryByText(/please select roles/i)).not.toBeInTheDocument();
-			});
-
-			await user.clear(firstInput);
-			await user.type(firstInput, 'bad-email');
-			await user.click(screen.getByRole('button', { name: /send invites/i }));
-			await waitFor(() => {
-				expect(
-					screen.getByText(
-						/please enter valid emails and select roles for team members/i,
-					),
-				).toBeInTheDocument();
-				expect(
-					screen.queryByText(/please enter valid emails for team members/i),
-				).not.toBeInTheDocument();
-				expect(
-					screen.queryByText(/please select roles for team members/i),
-				).not.toBeInTheDocument();
-			});
-
-			await user.clear(firstInput);
-			await user.type(firstInput, 'good@example.com');
-			await selectRole(user, 0, 'Admin');
-			await user.click(screen.getByRole('button', { name: /send invites/i }));
-			await waitFor(() => {
-				expect(
-					screen.queryByText(/please enter valid emails and select roles/i),
-				).not.toBeInTheDocument();
-				expect(
-					screen.queryByText(/please enter valid emails for team members/i),
-				).not.toBeInTheDocument();
-				expect(
-					screen.queryByText(/please select roles for team members/i),
-				).not.toBeInTheDocument();
-			});
-
-			await waitFor(() => expect(mockOnNext).toHaveBeenCalledTimes(1), {
-				timeout: 1200,
-			});
-		}, 15000);
-
-		it('disables the Send Invites button when all rows are untouched (empty)', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			renderComponent();
-
-			const sendInvitesBtn = screen.getByRole('button', { name: /send invites/i });
-			expect(sendInvitesBtn).toBeDisabled();
-
-			// Type something to make a row touched
-			const [firstInput] = screen.getAllByPlaceholderText(
-				/e\.g\. john@signoz\.io/i,
-			);
-			await user.type(firstInput, 'a');
-
-			expect(sendInvitesBtn).not.toBeDisabled();
-		});
-	});
-
-	describe('API integration', () => {
-		it('only sends touched (non-empty) rows — empty rows are excluded from the invite payload', async () => {
-			let capturedBody: InviteRequestBody | null = null;
-
-			server.use(
-				rest.post(INVITE_USERS_ENDPOINT, async (req, res, ctx) => {
-					capturedBody = await req.json<InviteRequestBody>();
-					return res(ctx.status(200), ctx.json({ status: 'success' }));
-				}),
-			);
-
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			renderComponent();
-
-			const [firstInput] = screen.getAllByPlaceholderText(
-				/e\.g\. john@signoz\.io/i,
-			);
-			await user.type(firstInput, 'only@example.com');
-			await selectRole(user, 0, 'Admin');
-			await user.click(screen.getByRole('button', { name: /send invites/i }));
-
-			await waitFor(() => {
-				expect(capturedBody).not.toBeNull();
-				expect(capturedBody?.invites).toHaveLength(1);
-				expect(capturedBody?.invites[0]).toMatchObject({
-					email: 'only@example.com',
-					role: 'ADMIN',
-				});
-			});
-			await waitFor(() => expect(mockOnNext).toHaveBeenCalled(), {
-				timeout: 1200,
-			});
-		});
-
-		it('calls the invite API, shows a success notification, and calls onNext after the 1 s delay', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			renderComponent();
-
-			const [firstInput] = screen.getAllByPlaceholderText(
-				/e\.g\. john@signoz\.io/i,
-			);
-			await user.type(firstInput, 'alice@example.com');
-			await selectRole(user, 0, 'Admin');
-			await user.click(screen.getByRole('button', { name: /send invites/i }));
-
-			await waitFor(() => {
-				expect(mockNotificationSuccess).toHaveBeenCalledWith(
-					expect.objectContaining({ message: 'Invites sent successfully!' }),
-				);
-			});
-
-			await waitFor(
-				() => {
-					expect(mockOnNext).toHaveBeenCalledTimes(1);
+			expect(logEvent).toHaveBeenCalledWith(
+				'Org Onboarding: Invite Team Members Success',
+				{
+					teamMembers: [
+						{
+							email: 'user1@test.com',
+							role: 'VIEWER',
+							name: '',
+							frontendBaseUrl: 'http://localhost:3301',
+							id: 'row-1',
+						},
+						{
+							email: 'user2@test.com',
+							role: 'EDITOR',
+							name: '',
+							frontendBaseUrl: 'http://localhost:3301',
+							id: 'row-2',
+						},
+					],
 				},
-				{ timeout: 1200 },
 			);
+			expect(mockNotificationSuccess).toHaveBeenCalledWith({
+				message: 'Invites sent successfully!',
+			});
+
+			expect(mockOnNext).not.toHaveBeenCalled();
+			jest.advanceTimersByTime(1000);
+			expect(mockOnNext).toHaveBeenCalledTimes(1);
 		});
+	});

-		it('renders an API error container when the invite request fails', async () => {
-			server.use(
-				rest.post(INVITE_USERS_ENDPOINT, (_, res, ctx) =>
-					res(
-						ctx.status(500),
-						ctx.json({
-							errors: [{ code: 'INTERNAL_ERROR', msg: 'Something went wrong' }],
-						}),
-					),
-				),
-			);
-
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
+	describe('handlePartialSuccess callback', () => {
+		it('logs event with teamMembers in correct shape and shows warning notification', () => {
 			renderComponent();

-			const [firstInput] = screen.getAllByPlaceholderText(
-				/e\.g\. john@signoz\.io/i,
+			const mockResults: InviteResult[] = [
+				{ email: 'user1@test.com', success: true },
+				{ email: 'user2@test.com', success: false, error: 'Already exists' },
+			];
+			const mockRows: InviteMemberRow[] = [
+				{ id: 'row-1', email: 'user1@test.com', roleId: 'role-viewer-id' },
+				{ id: 'row-2', email: 'user2@test.com', roleId: 'role-admin-id' },
+			];
+			mockInviteMembersProps?.onPartialSuccess?.(mockResults, mockRows);
+
+			expect(logEvent).toHaveBeenCalledWith(
+				'Org Onboarding: Invite Team Members Partial Success',
+				{
+					teamMembers: [
+						{
+							email: 'user1@test.com',
+							role: 'VIEWER',
+							name: '',
+							frontendBaseUrl: 'http://localhost:3301',
+							id: 'row-1',
+						},
+						{
+							email: 'user2@test.com',
+							role: 'ADMIN',
+							name: '',
+							frontendBaseUrl: 'http://localhost:3301',
+							id: 'row-2',
+						},
+					],
+				},
 			);
-			await user.type(firstInput, 'fail@example.com');
-			await selectRole(user, 0, 'Viewer');
-			await user.click(screen.getByRole('button', { name: /send invites/i }));
-
-			await waitFor(() => {
-				expect(document.querySelector('.auth-error-container')).toBeInTheDocument();
+			expect(mockNotificationWarning).toHaveBeenCalledWith({
+				message: 'Some invites failed. Check the errors above.',
 			});
+		});
+	});

-			await user.type(firstInput, 'x');
-			await waitFor(() => {
-				expect(
-					document.querySelector('.auth-error-container'),
-				).not.toBeInTheDocument();
+	describe('handleAllFailed callback', () => {
+		it('logs event with teamMembers in correct shape', () => {
+			renderComponent();
+
+			const mockResults: InviteResult[] = [
+				{ email: 'user1@test.com', success: false, error: 'Error 1' },
+				{ email: 'user2@test.com', success: false, error: 'Error 2' },
+			];
+			const mockRows: InviteMemberRow[] = [
+				{ id: 'row-1', email: 'user1@test.com', roleId: 'role-editor-id' },
+				{ id: 'row-2', email: 'user2@test.com', roleId: 'role-viewer-id' },
+			];
+			mockInviteMembersProps?.onAllFailed?.(mockResults, mockRows);
+
+			expect(logEvent).toHaveBeenCalledWith(
+				'Org Onboarding: Invite Team Members Failed',
+				{
+					teamMembers: [
+						{
+							email: 'user1@test.com',
+							role: 'EDITOR',
+							name: '',
+							frontendBaseUrl: 'http://localhost:3301',
+							id: 'row-1',
+						},
+						{
+							email: 'user2@test.com',
+							role: 'VIEWER',
+							name: '',
+							frontendBaseUrl: 'http://localhost:3301',
+							id: 'row-2',
+						},
+					],
+				},
+			);
+		});
+	});
+
+	describe('handleDoLater', () => {
+		it('logs event and calls onNext immediately', async () => {
+			const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+			renderComponent();
+
+			await user.click(
+				screen.getByRole('button', { name: /i'll do this later/i }),
+			);
+
+			expect(logEvent).toHaveBeenCalledWith('Org Onboarding: Clicked Do Later', {
+				currentPageID: 4,
 			});
+			expect(mockOnNext).toHaveBeenCalledTimes(1);
 		});
 	});
 });
--- a/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss
+++ b/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss
@@ -143,6 +143,8 @@
 			}

 			&.invite-team-members-form {
+				--invite-members-field-background: var(--l3-background);
+
 				padding-right: 12px;

 				.form-group {
--- a/frontend/src/container/OnboardingQuestionaire/tests/OnboardingQuestionaire.test.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/tests/OnboardingQuestionaire.test.tsx
@@ -22,7 +22,8 @@ const ORG_PREFERENCES_ENDPOINT = '*/api/v1/org/preferences/list';
 const UPDATE_ORG_PREFERENCE_ENDPOINT = '*/api/v1/org/preferences/name/update';
 const UPDATE_PROFILE_ENDPOINT = '*/api/v2/zeus/profiles';
 const EDIT_ORG_ENDPOINT = '*/api/v2/orgs/me';
-const INVITE_USERS_ENDPOINT = '*/api/v1/invite/bulk/create';
+const CREATE_USER_ENDPOINT = '*/api/v2/users';
+const LIST_ROLES_ENDPOINT = '*/api/v1/roles';

 const mockOrgPreferences = {
 	data: {
@@ -31,6 +32,12 @@ const mockOrgPreferences = {
 	status: 'success',
 };

+const MOCK_ROLES = [
+	{ id: 'role-admin', name: 'Admin', description: 'Admin role' },
+	{ id: 'role-editor', name: 'Editor', description: 'Editor role' },
+	{ id: 'role-viewer', name: 'Viewer', description: 'Viewer role' },
+];
+
 describe('OnboardingQuestionaire Component', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
@@ -48,8 +55,11 @@ describe('OnboardingQuestionaire Component', () => {
 			rest.post(UPDATE_ORG_PREFERENCE_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success' })),
 			),
-			rest.post(INVITE_USERS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ status: 'success' })),
+			rest.get(LIST_ROLES_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json({ data: MOCK_ROLES })),
+			),
+			rest.post(CREATE_USER_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(201), ctx.json({ data: { id: 'user-123' } })),
 			),
 		);
 	});
--- a/frontend/src/container/OnboardingQuestionaire/index.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/index.tsx
@@ -11,7 +11,6 @@ import { AxiosError } from 'axios';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
 import ROUTES from 'constants/routes';
-import { InviteTeamMembersProps } from 'container/OrganizationSettings/utils';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
@@ -71,9 +70,6 @@ function OnboardingQuestionaire(): JSX.Element {

 	const [optimiseSignozDetails, setOptimiseSignozDetails] =
 		useState<OptimiseSignozDetails>(INITIAL_OPTIMISE_SIGNOZ_DETAILS);
-	const [teamMembers, setTeamMembers] = useState<
-		InviteTeamMembersProps[] | null
-	>(null);

 	const [updatingOrgOnboardingStatus, setUpdatingOrgOnboardingStatus] =
 		useState<boolean>(false);
@@ -232,8 +228,6 @@ function OnboardingQuestionaire(): JSX.Element {
 				{currentStep === 4 && (
 					<InviteTeamMembers
 						isLoading={updatingOrgOnboardingStatus}
-						teamMembers={teamMembers}
-						setTeamMembers={setTeamMembers}
 						onNext={handleOnboardingComplete}
 					/>
 				)}
--- a/frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx
+++ b/frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Check, Goal, Search, UserPlus, X } from '@signozhq/icons';
+import { ArrowRight, Check, Goal, Search, UserPlus, X } from '@signozhq/icons';
 import {
 	Button,
 	Flex,
@@ -10,6 +10,8 @@ import {
 	Space,
 	Steps,
 } from 'antd';
+import { Button as SignozButton } from '@signozhq/ui/button';
+import { toast } from '@signozhq/ui/sonner';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
@@ -27,7 +29,7 @@ import { isModifierKeyPressed } from 'utils/app';
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';

 import OnboardingIngestionDetails from '../IngestionDetails/IngestionDetails';
-import InviteTeamMembers from '../InviteTeamMembers/InviteTeamMembers';
+import InviteMembers from 'components/InviteMembers/InviteMembers';
 import onboardingConfigWithLinks from '../onboarding-configs/onboarding-config-with-links';

 import '../OnboardingV2.styles.scss';
@@ -119,6 +121,10 @@ const ONBOARDING_V3_ANALYTICS_EVENTS_MAP = {
 	GET_HELP_BUTTON_CLICKED: 'Get help clicked',
 	GET_EXPERT_ASSISTANCE_BUTTON_CLICKED: 'Get expert assistance clicked',
 	INVITE_TEAM_MEMBER_BUTTON_CLICKED: 'Invite team member clicked',
+	INVITE_TEAM_MEMBER_SEND_CLICKED: 'Send invites clicked',
+	INVITE_TEAM_MEMBER_SUCCESS: 'Invite team members success',
+	INVITE_TEAM_MEMBER_PARTIAL_SUCCESS: 'Invite team members partial success',
+	INVITE_TEAM_MEMBER_FAILED: 'Invite team members failed',
 	CLOSE_ONBOARDING_CLICKED: 'Close onboarding clicked',
 	DATA_SOURCE_REQUESTED: 'Datasource requested',
 	DATA_SOURCE_SEARCHED: 'Searched',
@@ -1147,12 +1153,54 @@ function OnboardingAddDataSource(): JSX.Element {
 					destroyOnClose
 				>
 					<div className="invite-team-member-modal-content">
-						<InviteTeamMembers
-							isLoading={false}
-							teamMembers={null}
-							setTeamMembers={(): void => {}}
-							onNext={(): void => setShowInviteTeamMembersModal(false)}
-							onClose={(): void => setShowInviteTeamMembersModal(false)}
+						<InviteMembers
+							onSuccess={(): void => {
+								void logEvent(
+									`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_SUCCESS}`,
+									{},
+								);
+								setShowInviteTeamMembersModal(false);
+
+								toast.success('Invites sent successfully', { position: 'top-center' });
+							}}
+							onPartialSuccess={(): void => {
+								void logEvent(
+									`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_PARTIAL_SUCCESS}`,
+									{},
+								);
+							}}
+							onAllFailed={(): void => {
+								void logEvent(
+									`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_FAILED}`,
+									{},
+								);
+							}}
+							renderFooter={({ submit, canSubmit, isSubmitting }): JSX.Element => (
+								<div className="invite-team-member-modal-footer">
+									<SignozButton
+										variant="solid"
+										color="secondary"
+										onClick={(): void => setShowInviteTeamMembersModal(false)}
+									>
+										Cancel
+									</SignozButton>
+									<SignozButton
+										variant="solid"
+										onClick={(): void => {
+											void logEvent(
+												`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_SEND_CLICKED}`,
+												{},
+											);
+											void submit();
+										}}
+										disabled={!canSubmit}
+										loading={isSubmitting}
+										suffix={<ArrowRight size={14} />}
+									>
+										Send Invites
+									</SignozButton>
+								</div>
+							)}
 						/>
 					</div>
 				</Modal>
--- a/frontend/src/container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.styles.scss
+++ b/frontend/src/container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.styles.scss
@@ -1,116 +0,0 @@
-.team-member-container {
-	display: flex;
-	align-items: center;
-
-	.invite-team-members-form {
-		padding: 16px 0px;
-	}
-
-	.team-member-email-input {
-		width: 80%;
-		background-color: var(--l1-background);
-		border-top-right-radius: 0px;
-		border-bottom-right-radius: 0px;
-
-		.ant-input,
-		.ant-input-group-addon {
-			background-color: var(--l1-background) !important;
-			border-right: 0px;
-			border-top-right-radius: 0px;
-			border-bottom-right-radius: 0px;
-		}
-	}
-
-	.team-member-role-select {
-		width: 20%;
-
-		.ant-select-selector {
-			border: 1px solid var(--l1-border);
-			border-top-left-radius: 0px;
-			border-bottom-left-radius: 0px;
-
-			border-top-right-radius: 0px;
-			border-bottom-right-radius: 0px;
-		}
-	}
-
-	.remove-team-member-button {
-		border-top-left-radius: 0px;
-		border-bottom-left-radius: 0px;
-	}
-}
-
-.invite-team-members-container {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-
-	.invite-team-members-add-another-member-container {
-		margin: 16px 0px;
-		display: flex;
-		justify-content: flex-end;
-	}
-
-	.next-prev-container {
-		display: flex;
-		justify-content: flex-end;
-		gap: 8px;
-
-		margin-top: 16px;
-	}
-
-	.error-message-container,
-	.success-message-container,
-	.partially-sent-invites-container {
-		border-radius: 4px;
-		width: 100%;
-		display: flex;
-		align-items: center;
-
-		.error-message,
-		.success-message {
-			font-size: 12px;
-			font-weight: 400;
-
-			display: flex;
-			align-items: center;
-			gap: 8px;
-		}
-	}
-
-	.invite-users-error-message-container,
-	.invite-users-success-message-container {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 8px;
-
-		.success-message {
-			color: var(--bg-success-500, #00b37e);
-		}
-	}
-
-	.partially-sent-invites-container {
-		margin-top: 16px;
-		padding: 8px;
-		border: 1px solid var(--l1-border);
-		background-color: var(--l1-background);
-
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 8px;
-		box-sizing: border-box;
-
-		.partially-sent-invites-message {
-			color: var(--bg-warning-500, #fbbd23);
-
-			font-size: 12px;
-			font-weight: 400;
-
-			display: flex;
-			align-items: center;
-			gap: 8px;
-		}
-	}
-}
--- a/frontend/src/container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.tsx
+++ b/frontend/src/container/OnboardingV2Container/InviteTeamMembers/InviteTeamMembers.tsx
@@ -1,298 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useMutation } from 'react-query';
-import { Color } from '@signozhq/design-tokens';
-import { Button, Input, Select } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import logEvent from 'api/common/logEvent';
-import inviteUsers from 'api/v1/invite/bulk/create';
-import { useNotifications } from 'hooks/useNotifications';
-import { cloneDeep, debounce, isEmpty } from 'lodash-es';
-import {
-	ArrowRight,
-	CircleCheck,
-	Plus,
-	TriangleAlert,
-	X,
-} from '@signozhq/icons';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
-import { v4 as uuid } from 'uuid';
-
-import './InviteTeamMembers.styles.scss';
-
-interface TeamMember {
-	email: string;
-	role: string;
-	name: string;
-	frontendBaseUrl: string;
-	id: string;
-}
-
-interface InviteTeamMembersProps {
-	isLoading: boolean;
-	teamMembers: TeamMember[] | null;
-	setTeamMembers: (teamMembers: TeamMember[]) => void;
-	onNext: () => void;
-	onClose: () => void;
-}
-
-const ONBOARDING_V3_ANALYTICS_EVENTS_MAP = {
-	BASE: 'Onboarding V3',
-	INVITE_TEAM_MEMBER_BUTTON_CLICKED: 'Send invites clicked',
-	INVITE_TEAM_MEMBER_SUCCESS: 'Invite team members success',
-	INVITE_TEAM_MEMBER_PARTIAL_SUCCESS: 'Invite team members partial success',
-	INVITE_TEAM_MEMBER_FAILED: 'Invite team members failed',
-};
-
-function InviteTeamMembers({
-	isLoading,
-	teamMembers,
-	setTeamMembers,
-	onNext,
-	onClose,
-}: InviteTeamMembersProps): JSX.Element {
-	const [teamMembersToInvite, setTeamMembersToInvite] = useState<
-		TeamMember[] | null
-	>(teamMembers);
-	const [emailValidity, setEmailValidity] = useState<Record<string, boolean>>(
-		{},
-	);
-	const [hasInvalidEmails, setHasInvalidEmails] = useState<boolean>(false);
-	const { notifications } = useNotifications();
-
-	const defaultTeamMember: TeamMember = {
-		email: '',
-		role: 'EDITOR',
-		name: '',
-		frontendBaseUrl: getBaseUrl(),
-		id: '',
-	};
-
-	useEffect(() => {
-		if (isEmpty(teamMembers)) {
-			const teamMember = {
-				...defaultTeamMember,
-				id: uuid(),
-			};
-
-			setTeamMembersToInvite([teamMember]);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [teamMembers]);
-
-	const handleAddTeamMember = (): void => {
-		const newTeamMember = {
-			...defaultTeamMember,
-			id: uuid(),
-		};
-		setTeamMembersToInvite((prev) => [...(prev || []), newTeamMember]);
-	};
-
-	const handleRemoveTeamMember = (id: string): void => {
-		setTeamMembersToInvite((prev) => (prev || []).filter((m) => m.id !== id));
-	};
-
-	// Validation function to check all users
-	const validateAllUsers = (): boolean => {
-		let isValid = true;
-
-		const updatedValidity: Record<string, boolean> = {};
-
-		teamMembersToInvite?.forEach((member) => {
-			const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(member.email);
-			if (!emailValid || !member.email) {
-				isValid = false;
-				setHasInvalidEmails(true);
-			}
-			updatedValidity[member.id!] = emailValid;
-		});
-
-		setEmailValidity(updatedValidity);
-
-		return isValid;
-	};
-
-	const handleInviteUsersSuccess = (): void => {
-		logEvent(
-			`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_SUCCESS}`,
-			{
-				teamMembers: teamMembersToInvite,
-			},
-		);
-		setTimeout(() => {
-			onNext();
-		}, 1000);
-	};
-
-	const { mutate: sendInvites, isLoading: isSendingInvites } = useMutation(
-		inviteUsers,
-		{
-			onSuccess: (): void => {
-				handleInviteUsersSuccess();
-				notifications.success({
-					message: 'Invites sent successfully!',
-				});
-			},
-			onError: (error: APIError): void => {
-				logEvent(
-					`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_FAILED}`,
-					{
-						teamMembers: teamMembersToInvite,
-						error,
-					},
-				);
-				notifications.error({
-					message: error.getErrorCode(),
-					description: error.getErrorMessage(),
-				});
-			},
-		},
-	);
-
-	const handleNext = (): void => {
-		if (validateAllUsers()) {
-			setTeamMembers(teamMembersToInvite || []);
-
-			logEvent(
-				`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_BUTTON_CLICKED}`,
-				{
-					teamMembers: teamMembersToInvite,
-				},
-			);
-
-			setHasInvalidEmails(false);
-			sendInvites({
-				invites: teamMembersToInvite || [],
-			});
-		}
-	};
-
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	const debouncedValidateEmail = useCallback(
-		debounce((email: string, memberId: string) => {
-			const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-			setEmailValidity((prev) => ({ ...prev, [memberId]: isValid }));
-		}, 500),
-		[],
-	);
-
-	const handleEmailChange = (
-		e: React.ChangeEvent<HTMLInputElement>,
-		member: TeamMember,
-	): void => {
-		const { value } = e.target;
-		const updatedMembers = cloneDeep(teamMembersToInvite || []);
-
-		const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
-		if (memberToUpdate) {
-			memberToUpdate.email = value;
-			setTeamMembersToInvite(updatedMembers);
-			debouncedValidateEmail(value, member.id!);
-		}
-	};
-
-	const handleRoleChange = (role: string, member: TeamMember): void => {
-		const updatedMembers = cloneDeep(teamMembersToInvite || []);
-		const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
-		if (memberToUpdate) {
-			memberToUpdate.role = role;
-			setTeamMembersToInvite(updatedMembers);
-		}
-	};
-
-	return (
-		<div className="invite-team-members-container">
-			<div className="invite-team-members-form">
-				<div className="form-group">
-					<div className="invite-team-members-container">
-						{teamMembersToInvite?.map((member) => (
-							<div className="team-member-container" key={member.id}>
-								<Input
-									placeholder="your-teammate@org.com"
-									value={member.email}
-									type="email"
-									required
-									autoFocus
-									autoComplete="off"
-									className="team-member-email-input"
-									onChange={(e: React.ChangeEvent<HTMLInputElement>): void =>
-										handleEmailChange(e, member)
-									}
-									addonAfter={
-										emailValidity[member.id!] === undefined ? null : emailValidity[
-												member.id!
-										  ] ? (
-											<CircleCheck size={14} color={Color.BG_FOREST_500} />
-										) : (
-											<TriangleAlert size={14} color={Color.BG_SIENNA_500} />
-										)
-									}
-								/>
-								<Select
-									defaultValue={member.role}
-									onChange={(value): void => handleRoleChange(value, member)}
-									className="team-member-role-select"
-								>
-									<Select.Option value="VIEWER">Viewer</Select.Option>
-									<Select.Option value="EDITOR">Editor</Select.Option>
-									<Select.Option value="ADMIN">Admin</Select.Option>
-								</Select>
-
-								{teamMembersToInvite?.length > 1 && (
-									<Button
-										type="default"
-										className="remove-team-member-button periscope-btn"
-										icon={<X size={14} />}
-										onClick={(): void => handleRemoveTeamMember(member.id)}
-									/>
-								)}
-							</div>
-						))}
-					</div>
-
-					<div className="invite-team-members-add-another-member-container">
-						<Button
-							type="primary"
-							className="add-another-member-button periscope-btn"
-							icon={<Plus size={14} />}
-							onClick={handleAddTeamMember}
-						>
-							Member
-						</Button>
-					</div>
-				</div>
-
-				{hasInvalidEmails && (
-					<div className="error-message-container">
-						<Typography.Text className="error-message" color="danger">
-							<TriangleAlert size={14} /> Please enter valid emails for all team
-							members
-						</Typography.Text>
-					</div>
-				)}
-			</div>
-			<div className="next-prev-container">
-				<Button
-					type="default"
-					className="next-button periscope-btn"
-					onClick={onClose}
-				>
-					<X size={14} />
-					Cancel
-				</Button>
-
-				<Button
-					type="primary"
-					className="next-button periscope-btn primary"
-					onClick={handleNext}
-					loading={isSendingInvites || isLoading}
-				>
-					Send Invites
-					<ArrowRight size={14} />
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export default InviteTeamMembers;
--- a/frontend/src/container/OnboardingV2Container/OnboardingV2.styles.scss
+++ b/frontend/src/container/OnboardingV2Container/OnboardingV2.styles.scss
@@ -1220,6 +1220,14 @@
 	.request-data-source-modal-input {
 		margin-top: 8px;
 	}
+
+	.invite-team-member-modal-footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: var(--spacing-8);
+		border-top: 1px solid var(--l1-border);
+		padding-top: var(--spacing-6);
+	}
 }

 .request-data-source-modal {
--- a/frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/Providers.styles.scss
+++ b/frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/Providers.styles.scss
@@ -79,7 +79,7 @@
 		margin-bottom: 12px;
 	}

-	input,
+	input:not(.ant-select-selection-search-input),
 	textarea {
 		height: 32px;
 		background: var(--l2-background) !important;
--- a/frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.styles.scss
+++ b/frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.styles.scss
@@ -111,31 +111,9 @@
 	&__select {
 		width: 100%;

-		&.ant-select {
-			.ant-select-selector {
-				height: 32px;
-				background: var(--l2-background) !important;
-				border: 1px solid var(--l2-border) !important;
-				border-radius: 2px;
-				color: var(--l2-foreground) !important;
-
-				.ant-select-selection-item {
-					color: var(--l2-foreground) !important;
-				}
-			}
-
-			&:hover .ant-select-selector {
-				border-color: var(--l2-border) !important;
-			}
-
-			&.ant-select-focused .ant-select-selector {
-				border-color: var(--primary) !important;
-				box-shadow: none !important;
-			}
-
-			.ant-select-arrow {
-				color: var(--l2-foreground);
-			}
+		.ant-select-selection-search {
+			inset-inline-start: var(--padding-2) !important;
+			inset-inline-end: var(--padding-2) !important;
 		}
 	}

@@ -185,7 +163,7 @@

 		&--role {
 			flex: 1;
-			min-width: 120px;
+			min-width: 180px;
 		}
 	}

@@ -272,7 +250,7 @@
 	}

 	// todo: https://github.com/SigNoz/components/issues/116
-	input {
+	input:not(.ant-select-selection-search-input) {
 		height: 32px;
 		background: var(--l2-background) !important;
 		border: 1px solid var(--l2-border) !important;
--- a/frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.tsx
+++ b/frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.tsx
@@ -11,23 +11,20 @@ import {
 import { Button } from '@signozhq/ui/button';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Input } from '@signozhq/ui/input';
-import { Collapse, Form, Select, Tooltip } from 'antd';
+import { Collapse, Form, Tooltip } from 'antd';
+import RolesSelect, { useRoles } from 'components/RolesSelect';
 import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';

 import './RoleMappingSection.styles.scss';

-const ROLE_OPTIONS = [
-	{ value: 'VIEWER', label: 'VIEWER' },
-	{ value: 'EDITOR', label: 'EDITOR' },
-	{ value: 'ADMIN', label: 'ADMIN' },
-];
-
 interface RoleMappingSectionProps {
 	fieldNamePrefix: string[];
 	isExpanded?: boolean;
 	onExpandChange?: (expanded: boolean) => void;
 }

+const SIGNOZ_VIEWER_ROLE = 'signoz-viewer';
+
 function RoleMappingSection({
 	fieldNamePrefix,
 	isExpanded,
@@ -38,6 +35,7 @@ function RoleMappingSection({
 		[...fieldNamePrefix, 'useRoleAttribute'],
 		form,
 	);
+	const { roles, isLoading, isError, error, refetch } = useRoles();

 	// Support both controlled and uncontrolled modes
 	const [internalExpanded, setInternalExpanded] = useState(false);
@@ -108,19 +106,26 @@ function RoleMappingSection({
 						<div className="role-mapping-section__field-group">
 							<label className="role-mapping-section__label" htmlFor="default-role">
 								Default Role
-								<Tooltip title='The default role assigned to new SSO users if no other role mapping applies. Default: "VIEWER"'>
+								<Tooltip title='The default role assigned to new SSO users if no other role mapping applies. Default: "signoz-viewer"'>
 									<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
 								</Tooltip>
 							</label>
 							<Form.Item
 								name={[...fieldNamePrefix, 'defaultRole']}
 								className="role-mapping-section__form-item"
-								initialValue="VIEWER"
+								initialValue={SIGNOZ_VIEWER_ROLE}
 							>
-								<Select
+								<RolesSelect
 									id="default-role"
-									options={ROLE_OPTIONS}
+									valueField="name"
+									roles={roles}
+									loading={isLoading}
+									isError={isError}
+									error={error}
+									onRefetch={refetch}
 									className="role-mapping-section__select"
+									allowClear={false}
+									getPopupContainer={(): HTMLElement => document.body}
 								/>
 							</Form.Item>
 						</div>
@@ -140,7 +145,7 @@ function RoleMappingSection({
 									Use Role Attribute Directly
 								</Checkbox>
 							</Form.Item>
-							<Tooltip title="If enabled, the role claim/attribute from the IDP will be used directly instead of group mappings. The role value must match a SigNoz role (VIEWER, EDITOR, or ADMIN).">
+							<Tooltip title="If enabled, the role claim/attribute from the IDP will be used directly instead of group mappings. The role value must match a SigNoz role name (e.g. signoz-viewer, signoz-editor, signoz-admin, or a custom role).">
 								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
 							</Tooltip>
 						</div>
@@ -174,11 +179,17 @@ function RoleMappingSection({
 														name={[field.name, 'role']}
 														className="role-mapping-section__field role-mapping-section__field--role"
 														rules={[{ required: true, message: 'Role is required' }]}
-														initialValue="VIEWER"
+														initialValue={SIGNOZ_VIEWER_ROLE}
 													>
-														<Select
-															options={ROLE_OPTIONS}
-															className="role-mapping-section__select"
+														<RolesSelect
+															valueField="name"
+															roles={roles}
+															loading={isLoading}
+															isError={isError}
+															error={error}
+															onRefetch={refetch}
+															allowClear={false}
+															getPopupContainer={(): HTMLElement => document.body}
 														/>
 													</Form.Item>

@@ -197,7 +208,9 @@ function RoleMappingSection({
 											<Button
 												variant="outlined"
 												color="secondary"
-												onClick={(): void => add({ groupName: '', role: 'VIEWER' })}
+												onClick={(): void =>
+													add({ groupName: '', role: SIGNOZ_VIEWER_ROLE })
+												}
 												prefix={<Plus size={14} />}
 											>
 												Add Group Mapping
--- a/frontend/src/container/OrganizationSettings/AuthDomain/tests/CreateEdit.payload.test.tsx
+++ b/frontend/src/container/OrganizationSettings/AuthDomain/tests/CreateEdit.payload.test.tsx
@@ -9,6 +9,7 @@ import {
 	mockUpdateSuccessResponse,
 } from './mocks';

+// TODO: https://github.com/SigNoz/platform-pod/issues/2602
 // The real @signozhq/ui/button has internal effects that prevent form.validateFields()
 // from resolving inside act(). Mirror the pattern from SSOEnforcementToggle.test.tsx
 // which mocks @signozhq/ui/switch for the same reason.
--- a/frontend/src/container/OrganizationSettings/AuthDomain/tests/CreateEdit.roleMapping.test.tsx
+++ b/frontend/src/container/OrganizationSettings/AuthDomain/tests/CreateEdit.roleMapping.test.tsx
@@ -0,0 +1,316 @@
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { rest, server } from 'mocks-server/server';
+import {
+	allRoles,
+	listRolesSuccessResponse,
+	managedRoles,
+} from 'mocks-server/__mockdata__/roles';
+
+import CreateEdit from '../CreateEdit/CreateEdit';
+import {
+	AUTH_DOMAINS_UPDATE_ENDPOINT,
+	mockDomainWithDirectRoleAttribute,
+	mockDomainWithRoleMapping,
+	mockSamlAuthDomain,
+	mockUpdateSuccessResponse,
+} from './mocks';
+
+// TODO: https://github.com/SigNoz/platform-pod/issues/2602
+// The @signozhq/ui Button uses Radix Slot and has CSS infinite animations that
+// prevent form.validateFields() from resolving inside act(). Replacing with a
+// simple native button avoids the issue.
+jest.mock('@signozhq/ui/button', () => ({
+	...jest.requireActual('@signozhq/ui/button'),
+	Button: ({
+		children,
+		onClick,
+		loading,
+		disabled,
+		'aria-label': ariaLabel,
+		prefix,
+		suffix,
+	}: {
+		children?: React.ReactNode;
+		onClick?: React.MouseEventHandler<HTMLButtonElement>;
+		loading?: boolean;
+		disabled?: boolean;
+		'aria-label'?: string;
+		prefix?: React.ReactNode;
+		suffix?: React.ReactNode;
+	}) => (
+		<button
+			type="button"
+			onClick={onClick}
+			disabled={disabled || loading}
+			aria-label={ariaLabel}
+		>
+			{prefix}
+			{children}
+			{suffix}
+		</button>
+	),
+}));
+
+// These are heavy real-timer integration tests (antd Select dropdown render +
+// form.validateFields() + a react-query mutation, all driven through userEvent).
+// Under a CPU-saturated parallel `jest` run the wall-clock roughly triples, which
+// pushes the longest tests past the 5000ms default and makes them flaky. Give the
+// whole file a wider budget (matches LogsPanelComponent.test.tsx).
+jest.setTimeout(20000);
+
+const ROLES_ENDPOINT = '*/api/v1/roles';
+
+type User = ReturnType<typeof userEvent.setup>;
+
+// antd renders pointer-events:none on parts of its Select, so disable the
+// userEvent pointer-events guard (mirrors CreateEdit.test.tsx).
+const setupUser = (): User => userEvent.setup({ pointerEventsCheck: 0 });
+
+function getRole(name: string): (typeof managedRoles)[number] {
+	const role = managedRoles.find((r) => r.name === name);
+	if (!role) {
+		throw new Error(`missing mock role: ${name}`);
+	}
+	return role;
+}
+
+const viewerRole = getRole('signoz-viewer');
+const editorRole = getRole('signoz-editor');
+
+function mockRoles(
+	response: Record<string, unknown> = listRolesSuccessResponse,
+	status = 200,
+): { count: () => number } {
+	let requested = 0;
+	server.use(
+		rest.get(ROLES_ENDPOINT, (_req, res, ctx) => {
+			requested += 1;
+			return res(ctx.status(status), ctx.json(response));
+		}),
+	);
+	return { count: (): number => requested };
+}
+
+function captureUpdatePayload(): { get: () => any } {
+	let payload: unknown = null;
+	server.use(
+		rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, async (req, res, ctx) => {
+			payload = await req.json();
+			return res(ctx.status(200), ctx.json(mockUpdateSuccessResponse));
+		}),
+	);
+	return { get: (): any => payload };
+}
+
+const expandRoleMapping = (user: User): Promise<void> =>
+	user.click(screen.getByText(/role mapping \(advanced\)/i));
+
+const openDefaultRoleSelect = (user: User): Promise<void> =>
+	user.click(screen.getByLabelText(/default role/i));
+
+const saveChanges = (user: User): Promise<void> =>
+	user.click(screen.getByRole('button', { name: /save changes/i }));
+
+describe('CreateEdit — role mapping uses API roles', () => {
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('fetches the roles list from the API when the form mounts', async () => {
+		const roles = mockRoles();
+
+		render(
+			<CreateEdit
+				isCreate={false}
+				record={mockDomainWithDirectRoleAttribute}
+				onClose={jest.fn()}
+			/>,
+		);
+
+		await waitFor(() => expect(roles.count()).toBeGreaterThan(0));
+	});
+
+	it('renders the default-role options from the API (managed + custom), not the old hardcoded VIEWER/EDITOR/ADMIN', async () => {
+		const user = setupUser();
+		mockRoles();
+
+		// mockSamlAuthDomain has no stored defaultRole, so nothing stale (e.g.
+		// "VIEWER") is rendered as a selected tag to pollute the title lookups.
+		render(
+			<CreateEdit
+				isCreate={false}
+				record={mockSamlAuthDomain}
+				onClose={jest.fn()}
+			/>,
+		);
+
+		await expandRoleMapping(user);
+
+		// Open the Select and wait for the async roles fetch to populate it.
+		await openDefaultRoleSelect(user);
+		await screen.findByTitle(allRoles[0].name);
+
+		// Every role returned by the API is offered as an option, including the
+		// custom (non-managed) roles — the whole point of the refactor. Use
+		// getAllByTitle: the preselected default role also renders its name on
+		// the selection item, so a role may legitimately appear more than once.
+		allRoles.forEach((role) => {
+			expect(screen.getAllByTitle(role.name).length).toBeGreaterThan(0);
+		});
+
+		// The old hardcoded uppercase role values must NOT appear as options.
+		expect(screen.queryByTitle('VIEWER')).not.toBeInTheDocument();
+		expect(screen.queryByTitle('EDITOR')).not.toBeInTheDocument();
+		expect(screen.queryByTitle('ADMIN')).not.toBeInTheDocument();
+	});
+
+	it('submits the selected role name (not the role id) as defaultRole', async () => {
+		const user = setupUser();
+		mockRoles();
+		const payload = captureUpdatePayload();
+
+		render(
+			<CreateEdit
+				isCreate={false}
+				record={mockDomainWithDirectRoleAttribute}
+				onClose={jest.fn()}
+			/>,
+		);
+
+		await expandRoleMapping(user);
+
+		await openDefaultRoleSelect(user);
+		await user.click(await screen.findByTitle(editorRole.name));
+
+		await saveChanges(user);
+
+		await waitFor(() => expect(payload.get()).not.toBeNull());
+
+		// SSO role mapping matches roles by name, so the payload carries the
+		// role *name*, not the opaque id.
+		expect(payload.get().config.roleMapping.defaultRole).toBe(editorRole.name);
+		expect(payload.get().config.roleMapping.defaultRole).not.toBe(editorRole.id);
+	});
+
+	it('defaults a fresh role mapping to the signoz-viewer role name', async () => {
+		const user = setupUser();
+		const roles = mockRoles();
+		const payload = captureUpdatePayload();
+
+		// mockSamlAuthDomain has no roleMapping, so the defaultRole field falls
+		// back to the Form.Item initialValue (viewerRole.name). That initialValue
+		// is only applied when the field mounts, so the roles fetch MUST resolve
+		// before the panel is expanded — otherwise viewerRole is still undefined.
+		render(
+			<CreateEdit
+				isCreate={false}
+				record={mockSamlAuthDomain}
+				onClose={jest.fn()}
+			/>,
+		);
+
+		await waitFor(() => expect(roles.count()).toBeGreaterThan(0));
+		// Flush the react-query commit so `useRoles` exposes the loaded roles
+		// before the collapse panel (and thus the default-role field) mounts.
+		await screen.findByText(/edit saml authentication/i);
+
+		await expandRoleMapping(user);
+		await screen.findByText(/default role/i);
+
+		await saveChanges(user);
+
+		await waitFor(() => expect(payload.get()).not.toBeNull());
+
+		expect(payload.get().config.roleMapping.defaultRole).toBe(viewerRole.name);
+		expect(payload.get().config.roleMapping.defaultRole).not.toBe(viewerRole.id);
+	});
+
+	it('still defaults to signoz-viewer when the roles fetch returns empty', async () => {
+		const user = setupUser();
+		// signoz-viewer is a managed role that always exists server-side, so even
+		// a degenerate/empty roles response must not strip the hardcoded default.
+		mockRoles({ status: 'success', data: [] });
+		const payload = captureUpdatePayload();
+
+		render(
+			<CreateEdit
+				isCreate={false}
+				record={mockSamlAuthDomain}
+				onClose={jest.fn()}
+			/>,
+		);
+
+		// Section still renders without crashing even though the fetch was empty.
+		await expandRoleMapping(user);
+		await expect(screen.findByText(/default role/i)).resolves.toBeInTheDocument();
+
+		await saveChanges(user);
+
+		await waitFor(() => expect(payload.get()).not.toBeNull());
+
+		// The Form.Item initialValue (signoz-viewer) survives an empty roles list.
+		expect(payload.get().config.roleMapping.defaultRole).toBe(viewerRole.name);
+	});
+
+	it('loads a stored role mapping by role name and round-trips it on save', async () => {
+		const user = setupUser();
+		mockRoles();
+		const payload = captureUpdatePayload();
+
+		// mockDomainWithRoleMapping stores defaultRole "signoz-editor" plus three
+		// group mappings, all keyed by role *name*. Editing must surface each
+		// stored value as the matching option and submit it unchanged — the
+		// backward-compatible read path for already-saved SSO domains.
+		render(
+			<CreateEdit
+				isCreate={false}
+				record={mockDomainWithRoleMapping}
+				onClose={jest.fn()}
+			/>,
+		);
+
+		await expandRoleMapping(user);
+
+		// The stored default role renders as a real selection, not a raw token.
+		await waitFor(() =>
+			expect(screen.getAllByTitle(editorRole.name).length).toBeGreaterThan(0),
+		);
+
+		await saveChanges(user);
+
+		await waitFor(() => expect(payload.get()).not.toBeNull());
+
+		expect(payload.get().config.roleMapping.defaultRole).toBe(editorRole.name);
+		expect(payload.get().config.roleMapping.groupMappings).toStrictEqual({
+			'admin-group': 'signoz-admin',
+			'dev-team': 'signoz-editor',
+			viewers: 'signoz-viewer',
+		});
+	});
+
+	it('shows an error state in the default-role select when the roles request fails', async () => {
+		const user = setupUser();
+		mockRoles(
+			{ error: { code: 'internal_error', message: 'boom', url: '' } },
+			500,
+		);
+
+		render(
+			<CreateEdit
+				isCreate={false}
+				record={mockSamlAuthDomain}
+				onClose={jest.fn()}
+			/>,
+		);
+
+		await expandRoleMapping(user);
+
+		// Open the select and confirm the error UI (with retry) is surfaced
+		// instead of crashing the form. The error message comes straight from
+		// the failed request; the Retry affordance is always present.
+		await openDefaultRoleSelect(user);
+
+		await expect(screen.findByTitle('Retry')).resolves.toBeInTheDocument();
+		expect(screen.getByText('boom')).toBeInTheDocument();
+	});
+});
--- a/frontend/src/container/OrganizationSettings/AuthDomain/tests/CreateEdit.sanitization.test.tsx
+++ b/frontend/src/container/OrganizationSettings/AuthDomain/tests/CreateEdit.sanitization.test.tsx
@@ -186,9 +186,9 @@ describe('CreateEdit — payload sanitization', () => {

 			expect(payload.config.roleMapping?.useRoleAttribute).toBe(false);
 			expect(payload.config.roleMapping?.groupMappings).toStrictEqual({
-				'admin-group': 'ADMIN',
-				'dev-team': 'EDITOR',
-				viewers: 'VIEWER',
+				'admin-group': 'signoz-admin',
+				'dev-team': 'signoz-editor',
+				viewers: 'signoz-viewer',
 			});
 		});
 	});
--- a/frontend/src/container/OrganizationSettings/AuthDomain/tests/mocks.ts
+++ b/frontend/src/container/OrganizationSettings/AuthDomain/tests/mocks.ts
@@ -75,12 +75,12 @@ export const mockDomainWithRoleMapping: AuthtypesGettableAuthDomainDTO = {
 			samlCert: 'MOCK_CERTIFICATE',
 		},
 		roleMapping: {
-			defaultRole: 'EDITOR',
+			defaultRole: 'signoz-editor',
 			useRoleAttribute: false,
 			groupMappings: {
-				'admin-group': 'ADMIN',
-				'dev-team': 'EDITOR',
-				viewers: 'VIEWER',
+				'admin-group': 'signoz-admin',
+				'dev-team': 'signoz-editor',
+				viewers: 'signoz-viewer',
 			},
 		},
 	},
@@ -103,7 +103,7 @@ export const mockDomainWithDirectRoleAttribute: AuthtypesGettableAuthDomainDTO =
 				clientSecret: 'direct-role-client-secret',
 			},
 			roleMapping: {
-				defaultRole: 'VIEWER',
+				defaultRole: 'signoz-viewer',
 				useRoleAttribute: true,
 			},
 		},
--- a/frontend/src/container/PanelWrapper/PiePanelWrapper.tsx
+++ b/frontend/src/container/PanelWrapper/PiePanelWrapper.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
@@ -8,12 +8,10 @@ import { themeColors } from 'constants/theme';
 import { getPieChartClickData } from 'container/QueryTable/Drilldown/drilldownUtils';
 import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import getLabelName from 'lib/getLabelName';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { isNaN } from 'lodash-es';
 import ContextMenu, { useCoordinates } from 'periscope/components/ContextMenu';

 import { PanelWrapperProps, TooltipData } from './panelWrapper.types';
+import { preparePieChartData } from './preparePieChartData';
 import { lightenColor, tooltipStyles } from './utils';

 import './PiePanelWrapper.styles.scss';
@@ -44,37 +42,15 @@ function PiePanelWrapper({
 		detectBounds: true,
 	});

-	const panelData = queryResponse.data?.payload?.data?.result || [];
-
 	const isDarkMode = useIsDarkMode();

-	let pieChartData: {
-		label: string;
-		value: string;
-		color: string;
-		record: any;
-	}[] = [].concat(
-		...(panelData
-			.map((d) => {
-				const label = getLabelName(d.metric, d.queryName || '', d.legend || '');
-				return {
-					label,
-					value: d?.values?.[0]?.[1],
-					record: d,
-					color:
-						widget?.customLegendColors?.[label] ||
-						generateColor(
-							label,
-							isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
-						),
-				};
-			})
-			.filter((d) => d !== undefined) as never[]),
-	);
-
-	pieChartData = pieChartData.filter(
-		(arc) =>
-			arc.value && !isNaN(parseFloat(arc.value)) && parseFloat(arc.value) > 0,
+	const pieChartData = useMemo(
+		() =>
+			preparePieChartData(queryResponse.data?.payload, {
+				customLegendColors: widget?.customLegendColors,
+				colorMap: isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
+			}),
+		[queryResponse.data?.payload, widget?.customLegendColors, isDarkMode],
 	);

 	let size = 0;
--- a/frontend/src/container/PanelWrapper/tests/preparePieChartData.test.ts
+++ b/frontend/src/container/PanelWrapper/tests/preparePieChartData.test.ts
@@ -0,0 +1,185 @@
+import { themeColors } from 'constants/theme';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { QueryData, QueryDataV3 } from 'types/api/widgets/getQuery';
+
+import { preparePieChartData } from '../preparePieChartData';
+
+const options = { colorMap: themeColors.chartcolors };
+
+/**
+ * Mirrors a query-range payload: the (possibly collapsed) time-series `result`
+ * plus the scalar table nested under `newResult` (as getQueryResults produces it).
+ */
+function makePayload(
+	result: QueryData[],
+	tables: QueryDataV3[],
+): MetricRangePayloadProps {
+	return {
+		data: {
+			result,
+			resultType: 'scalar',
+			newResult: { data: { result: tables, resultType: 'scalar' } },
+		},
+	} as MetricRangePayloadProps;
+}
+
+function tableEntry(
+	columns: NonNullable<QueryDataV3['table']>['columns'],
+	rows: NonNullable<QueryDataV3['table']>['rows'],
+	overrides: Partial<QueryDataV3> = {},
+): QueryDataV3 {
+	return {
+		queryName: 'A',
+		legend: '',
+		series: null,
+		list: null,
+		table: { columns, rows },
+		...overrides,
+	} as QueryDataV3;
+}
+
+describe('preparePieChartData', () => {
+	it('renders a slice per value column for a multi-column ClickHouse scalar', () => {
+		// SELECT count() AS col1, sum(value) AS col2 — the backend collapses the
+		// time-series result onto col1; the full data lives in the scalar table.
+		const payload = makePayload(
+			[
+				{
+					metric: {},
+					queryName: 'A',
+					legend: '',
+					values: [[0, '23399927']],
+				} as QueryData,
+			],
+			[
+				tableEntry(
+					[
+						{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
+						{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
+					],
+					[{ data: { col1: 23399927, col2: 588691297 } }],
+				),
+			],
+		);
+
+		const slices = preparePieChartData(payload, options);
+
+		expect(slices).toHaveLength(2);
+		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
+			['col1', '23399927'],
+			['col2', '588691297'],
+		]);
+	});
+
+	it('prefixes the group when multiple value columns are grouped', () => {
+		const payload = makePayload(
+			[],
+			[
+				tableEntry(
+					[
+						{ name: 'env', queryName: 'A', isValueColumn: false, id: 'env' },
+						{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
+						{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
+					],
+					[{ data: { env: 'prod', col1: 10, col2: 20 } }],
+				),
+			],
+		);
+
+		const slices = preparePieChartData(payload, options);
+
+		expect(slices.map((s) => s.label)).toStrictEqual([
+			'prod · col1',
+			'prod · col2',
+		]);
+		expect(slices[0].record.metric).toStrictEqual({ env: 'prod' });
+	});
+
+	it('drops non-positive and non-numeric values', () => {
+		const payload = makePayload(
+			[],
+			[
+				tableEntry(
+					[
+						{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
+						{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
+						{ name: 'col3', queryName: 'A', isValueColumn: true, id: 'col3' },
+					],
+					[{ data: { col1: 5, col2: 0, col3: 'n/a' } }],
+				),
+			],
+		);
+
+		const slices = preparePieChartData(payload, options);
+
+		expect(slices.map((s) => s.label)).toStrictEqual(['col1']);
+	});
+
+	it('keeps the series path for a single value column (grouped panel)', () => {
+		// One value column → the time-series result is authoritative (one slice per
+		// group), so existing behaviour is preserved.
+		const payload = makePayload(
+			[
+				{
+					metric: { 'service.name': 'adservice' },
+					queryName: 'A',
+					legend: 'adservice',
+					values: [[0, '100']],
+				} as QueryData,
+				{
+					metric: { 'service.name': 'cartservice' },
+					queryName: 'A',
+					legend: 'cartservice',
+					values: [[0, '200']],
+				} as QueryData,
+			],
+			[
+				tableEntry(
+					[
+						{
+							name: 'service.name',
+							queryName: 'A',
+							isValueColumn: false,
+							id: 'service.name',
+						},
+						{ name: 'count', queryName: 'A', isValueColumn: true, id: 'A' },
+					],
+					[
+						{ data: { 'service.name': 'adservice', A: 100 } },
+						{ data: { 'service.name': 'cartservice', A: 200 } },
+					],
+				),
+			],
+		);
+
+		const slices = preparePieChartData(payload, options);
+
+		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
+			['adservice', '100'],
+			['cartservice', '200'],
+		]);
+	});
+
+	it('uses the legacy series result when there is no scalar table', () => {
+		const payload = makePayload(
+			[
+				{
+					metric: { 'service.name': 'adservice' },
+					queryName: 'A',
+					legend: '{{service.name}}',
+					values: [[1000, '42']],
+				} as QueryData,
+			],
+			[],
+		);
+
+		const slices = preparePieChartData(payload, options);
+
+		expect(slices).toHaveLength(1);
+		expect(slices[0].value).toBe('42');
+	});
+
+	it('returns no slices for an empty payload', () => {
+		expect(preparePieChartData(undefined, options)).toStrictEqual([]);
+	});
+});
--- a/frontend/src/container/PanelWrapper/preparePieChartData.ts
+++ b/frontend/src/container/PanelWrapper/preparePieChartData.ts
@@ -0,0 +1,144 @@
+import getLabelName from 'lib/getLabelName';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { isNaN } from 'lodash-es';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { QueryData, QueryDataV3 } from 'types/api/widgets/getQuery';
+
+export interface PieChartSlice {
+	label: string;
+	value: string;
+	color: string;
+	record: {
+		queryName: string;
+		legend?: string;
+		/** Group-by labels, used for drilldown; absent when the slice has no group. */
+		metric?: QueryData['metric'];
+	};
+}
+
+interface PreparePieChartDataOptions {
+	customLegendColors?: Record<string, string>;
+	colorMap: Record<string, string>;
+}
+
+const colorFor = (
+	label: string,
+	{ customLegendColors, colorMap }: PreparePieChartDataOptions,
+): string => customLegendColors?.[label] || generateColor(label, colorMap);
+
+const isPositive = (value: string): boolean =>
+	!!value && !isNaN(parseFloat(value)) && parseFloat(value) > 0;
+
+/**
+ * Time-series result: one slice per series, value = first datapoint. This is the
+ * original pie behaviour — kept verbatim (same label/value/colour/record) so
+ * single-value and grouped panels are unaffected.
+ */
+function slicesFromSeries(
+	result: QueryData[],
+	options: PreparePieChartDataOptions,
+): PieChartSlice[] {
+	return result
+		.filter((d) => d?.values?.[0]?.[1] !== undefined)
+		.map((d) => {
+			const label = getLabelName(d.metric, d.queryName || '', d.legend || '');
+			return {
+				label,
+				value: d.values[0][1],
+				color: colorFor(label, options),
+				record: d,
+			};
+		});
+}
+
+/**
+ * V5 scalar table: one slice per (row × value column). With more than one value
+ * column the column name keeps the slices distinct, so a ClickHouse query like
+ * `count() AS col1, sum() AS col2` renders a slice per column instead of
+ * collapsing onto the first; group-by columns become the slice label.
+ */
+function slicesFromTables(
+	tables: QueryDataV3[],
+	options: PreparePieChartDataOptions,
+): PieChartSlice[] {
+	const slices: PieChartSlice[] = [];
+
+	tables.forEach((entry) => {
+		const { table } = entry;
+		if (!table?.columns?.length || !table?.rows?.length) {
+			return;
+		}
+
+		const valueColumns = table.columns.filter((column) => column.isValueColumn);
+		if (valueColumns.length === 0) {
+			return;
+		}
+		const labelColumns = table.columns.filter((column) => !column.isValueColumn);
+		const hasMultipleValueColumns = valueColumns.length > 1;
+
+		table.rows.forEach((row) => {
+			const groupLabel = labelColumns
+				.map((column) => row.data[column.id || column.name])
+				.filter((part) => part != null)
+				.map(String)
+				.join(', ');
+			// Drilldown filters by group-by labels; leave it undefined when there
+			// are none (e.g. a ClickHouse query) so no filterless menu is offered.
+			const metric = labelColumns.length
+				? labelColumns.reduce<Record<string, string>>((acc, column) => {
+						acc[column.name] = String(row.data[column.id || column.name]);
+						return acc;
+					}, {})
+				: undefined;
+
+			valueColumns.forEach((column) => {
+				let label: string;
+				if (hasMultipleValueColumns) {
+					label = groupLabel ? `${groupLabel} · ${column.name}` : column.name;
+				} else {
+					label = groupLabel || entry.legend || entry.queryName || '';
+				}
+
+				slices.push({
+					label,
+					value: String(row.data[column.id || column.name]),
+					color: colorFor(label, options),
+					record: { queryName: entry.queryName, legend: entry.legend, metric },
+				});
+			});
+		});
+	});
+
+	return slices;
+}
+
+/**
+ * Builds pie slices from a query-range payload, dropping non-positive/non-numeric
+ * values.
+ *
+ * A scalar response with several value columns (e.g. a ClickHouse
+ * `count() AS col1, sum() AS col2`) collapses to a single series in
+ * `data.result` — only the first value column survives. The full data is kept in
+ * the scalar table under `newResult`, so in that case slices are built from the
+ * table (one per value column). Otherwise the legacy time-series result is used,
+ * preserving existing behaviour for single-value and grouped panels.
+ */
+export function preparePieChartData(
+	payload: MetricRangePayloadProps | undefined,
+	options: PreparePieChartDataOptions,
+): PieChartSlice[] {
+	const tables = (payload?.data?.newResult?.data?.result || []).filter(
+		(entry) => entry?.table?.rows?.length,
+	);
+	const hasMultipleValueColumns = tables.some(
+		(entry) =>
+			(entry.table?.columns || []).filter((column) => column.isValueColumn)
+				.length > 1,
+	);
+
+	const slices = hasMultipleValueColumns
+		? slicesFromTables(tables, options)
+		: slicesFromSeries(payload?.data?.result || [], options);
+
+	return slices.filter((slice) => isPositive(slice.value));
+}
--- a/frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.module.scss
+++ b/frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.module.scss
@@ -1,7 +1,6 @@
 .rolesListingTable {
 	margin-top: 12px;
 	border-radius: 4px;
-	overflow: hidden;
 }

 .scrollContainer {
--- a/frontend/src/container/RolesSettings/RolesSettings.module.scss
+++ b/frontend/src/container/RolesSettings/RolesSettings.module.scss
@@ -40,6 +40,7 @@

 .rolesSettingsContent {
 	padding: 0 16px;
+	padding-bottom: 16px;
 }

 .rolesSettingsToolbar {
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.tsx
@@ -32,8 +32,6 @@ interface ConfigPaneProps {
 	tableColumns: TableColumnOption[];
 	/** Query step interval (seconds), for the chart-appearance span-gaps floor. */
 	stepInterval?: number;
-	/** Unit the selected metric was sent with; drives the unit selector's mismatch warning. */
-	metricUnit?: string;
 }

 /**
@@ -51,7 +49,6 @@ function ConfigPane({
 	legendSeries,
 	tableColumns,
 	stepInterval,
-	metricUnit,
 }: ConfigPaneProps): JSX.Element {
 	const definition = getPanelDefinition(panelKind);
 	const sections = definition.sections;
@@ -111,7 +108,6 @@ function ConfigPane({
 									onChangePanelKind={onChangePanelKind}
 									queryType={queryType}
 									stepInterval={stepInterval}
-									metricUnit={metricUnit}
 								/>
 							))}
 						</div>
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/SectionSlot/SectionSlot.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/SectionSlot/SectionSlot.tsx
@@ -34,7 +34,6 @@ function SectionSlot({
 	onChangePanelKind,
 	queryType,
 	stepInterval,
-	metricUnit,
 }: SectionSlotProps): JSX.Element | null {
 	// A kind can hide a section based on current spec state (e.g. Histogram legend once
 	// queries are merged) — skip it before resolving the editor.
@@ -75,7 +74,6 @@ function SectionSlot({
 				onChangePanelKind={onChangePanelKind}
 				queryType={queryType}
 				stepInterval={stepInterval}
-				metricUnit={metricUnit}
 			/>
 		</SettingsSection>
 	);
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sectionContext.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sectionContext.ts
@@ -19,6 +19,4 @@ export interface SectionEditorContext {
 	yAxisUnit?: string;
 	queryType?: EQueryType;
 	stepInterval?: number;
-	/** Unit the selected metric was sent with; drives the unit selector's mismatch warning. */
-	metricUnit?: string;
 }
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/DisconnectValuesField.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/DisconnectValuesField.tsx
@@ -46,10 +46,11 @@ function DisconnectValuesField({
 	onChange,
 }: DisconnectValuesFieldProps): JSX.Element {
 	const duration = value?.fillLessThan || undefined;
-	// `fillOnlyBelow` is authoritative; fall back to a stored duration for legacy panels.
-	const isThreshold = value?.fillOnlyBelow ?? !!duration;
-	// Remember the last committed threshold so Never → Threshold restores it.
-	const [lastDuration, setLastDuration] = useState<string | undefined>(duration);
+	const isThreshold = !!duration;
+	// Remember the last threshold so toggling Never → Threshold restores it.
+	const [lastDuration, setLastDuration] = useState(
+		duration ?? defaultDuration(stepInterval),
+	);

 	useEffect(() => {
 		if (duration) {
@@ -58,17 +59,11 @@ function DisconnectValuesField({
 	}, [duration]);

 	const handleMode = (mode: DisconnectValuesMode): void => {
-		if (mode === DisconnectValuesMode.THRESHOLD) {
-			onChange({
-				...value,
-				fillOnlyBelow: true,
-				// Seed from the live stepInterval (async — undefined until results load), not mount.
-				fillLessThan: lastDuration ?? defaultDuration(stepInterval),
-			});
-			return;
-		}
-		// Never spans every gap; drop the duration so the renderer reads a clean "span all".
-		onChange({ ...value, fillOnlyBelow: false, fillLessThan: undefined });
+		onChange(
+			mode === DisconnectValuesMode.THRESHOLD
+				? { ...value, fillLessThan: lastDuration }
+				: undefined,
+		);
 	};

 	return (
@@ -84,16 +79,14 @@ function DisconnectValuesField({
 					onChange={handleMode}
 				/>
 			</div>
-			{isThreshold && duration && (
+			{isThreshold && (
 				<div className={styles.field}>
 					<Typography.Text>Threshold value</Typography.Text>
 					<DisconnectValuesThresholdInput
 						testId={`${testId}-value`}
-						value={duration}
+						value={lastDuration}
 						minValue={stepInterval}
-						onChange={(next): void =>
-							onChange({ ...value, fillOnlyBelow: true, fillLessThan: next })
-						}
+						onChange={(next): void => onChange({ ...value, fillLessThan: next })}
 					/>
 				</div>
 			)}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/DisconnectValuesThresholdInput.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/DisconnectValuesThresholdInput.tsx
@@ -14,28 +14,6 @@ interface DisconnectValuesThresholdInputProps {
 	onChange: (duration: string) => void;
 }

-/**
- * Inline error for a raw duration, or `null` when valid and in range. The parse is
- * guarded: `isValidTimeSpan` passes some strings `intervalToSeconds` throws on (e.g. "5x").
- */
-function validationError(raw: string, minValue?: number): string | null {
-	let seconds: number;
-	try {
-		seconds = rangeUtil.isValidTimeSpan(raw)
-			? rangeUtil.intervalToSeconds(raw)
-			: NaN;
-	} catch {
-		seconds = NaN;
-	}
-	if (!Number.isFinite(seconds) || seconds <= 0) {
-		return 'Enter a valid duration (e.g. 30s, 1m, 1h)';
-	}
-	if (minValue !== undefined && seconds < minValue) {
-		return `Threshold should be > ${rangeUtil.secondsToHms(minValue)}`;
-	}
-	return null;
-}
-
 /**
 * Duration input for the span-gaps threshold: shows/accepts and reports a human
 * duration ("30s", "1m", "1h"), which is the value stored verbatim in
@@ -58,21 +36,24 @@ function DisconnectValuesThresholdInput({
 		setError(null);
 	}, [value]);

-	// Validate live so an invalid entry surfaces immediately, not only on blur.
-	const handleText = (raw: string): void => {
-		setText(raw);
-		setError(raw ? validationError(raw, minValue) : null);
-	};
-
 	const commit = (raw: string): void => {
-		// Skip no-op commits: blur fires when clicking the Never toggle, and re-emitting
-		// the unchanged value there would race the toggle and snap back to Threshold.
-		if (!raw || raw === value) {
+		if (!raw) {
 			return;
 		}
-		const message = validationError(raw, minValue);
-		if (message) {
-			setError(message);
+		let seconds: number;
+		try {
+			seconds = rangeUtil.isValidTimeSpan(raw)
+				? rangeUtil.intervalToSeconds(raw)
+				: NaN;
+		} catch {
+			seconds = NaN;
+		}
+		if (!Number.isFinite(seconds) || seconds <= 0) {
+			setError('Enter a valid duration (e.g. 30s, 1m, 1h)');
+			return;
+		}
+		if (minValue !== undefined && seconds < minValue) {
+			setError(`Threshold should be > ${rangeUtil.secondsToHms(minValue)}`);
 			return;
 		}
 		setError(null);
@@ -88,9 +69,12 @@ function DisconnectValuesThresholdInput({
 				status={error ? 'error' : undefined}
 				prefix={<span className={styles.thresholdPrefix}>&gt;</span>}
 				value={text}
-				onChange={(e: ChangeEvent<HTMLInputElement>): void =>
-					handleText(e.target.value)
-				}
+				onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+					setText(e.target.value);
+					if (error) {
+						setError(null);
+					}
+				}}
 				onBlur={(e): void => commit(e.currentTarget.value)}
 				onKeyDown={(e): void => {
 					if (e.key === 'Enter') {
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/tests/ChartAppearanceSection.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/tests/ChartAppearanceSection.test.tsx
@@ -1,34 +1,9 @@
-import { useState } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {
-	DashboardtypesLineStyleDTO,
-	type DashboardtypesTimeSeriesChartAppearanceDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { DashboardtypesLineStyleDTO } from 'api/generated/services/sigNoz.schemas';

 import ChartAppearanceSection from '../ChartAppearanceSection';

-/** Stateful wrapper that feeds onChange back as the spec, mirroring the real editor. */
-function StatefulSpanGaps({
-	initial,
-	stepInterval,
-}: {
-	initial?: DashboardtypesTimeSeriesChartAppearanceDTO;
-	stepInterval?: number;
-}): JSX.Element {
-	const [value, setValue] = useState<
-		DashboardtypesTimeSeriesChartAppearanceDTO | undefined
-	>(initial);
-	return (
-		<ChartAppearanceSection
-			value={value}
-			controls={{ spanGaps: true }}
-			stepInterval={stepInterval}
-			onChange={setValue}
-		/>
-	);
-}
-
 // Open the antd Select by clicking its selector, then pick the option by label. The
 // line-style and fill-mode controls are ConfigSegmented (buttons), so this helper is
 // only used for the line-interpolation ConfigSelect.
@@ -164,7 +139,7 @@ describe('ChartAppearanceSection', () => {
 		await user.click(screen.getByText('Threshold'));

 		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillOnlyBelow: true, fillLessThan: '1m' },
+			spanGaps: { fillLessThan: '1m' },
 		});
 	});

@@ -187,7 +162,7 @@ describe('ChartAppearanceSection', () => {
 		await user.tab();

 		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillOnlyBelow: true, fillLessThan: '5m' },
+			spanGaps: { fillLessThan: '5m' },
 		});
 	});

@@ -208,7 +183,7 @@ describe('ChartAppearanceSection', () => {
 		await user.tab();

 		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillOnlyBelow: true, fillLessThan: '300' },
+			spanGaps: { fillLessThan: '300' },
 		});
 	});

@@ -225,24 +200,7 @@ describe('ChartAppearanceSection', () => {

 		await user.click(screen.getByText('Never'));

-		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillOnlyBelow: false, fillLessThan: undefined },
-		});
-	});
-
-	it('selects Never when fillOnlyBelow is false even if a duration lingers', () => {
-		render(
-			<ChartAppearanceSection
-				value={{ spanGaps: { fillOnlyBelow: false, fillLessThan: '1m' } }}
-				controls={{ spanGaps: true }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		// The flag is authoritative: a stale fillLessThan must not show Threshold.
-		expect(
-			screen.queryByTestId('panel-editor-v2-span-gaps-value'),
-		).not.toBeInTheDocument();
+		expect(onChange).toHaveBeenLastCalledWith({ spanGaps: undefined });
 	});

 	it('shows an error and does not commit an invalid duration', async () => {
@@ -286,117 +244,4 @@ describe('ChartAppearanceSection', () => {
 		expect(screen.getByText(/Threshold should be >/)).toBeInTheDocument();
 		expect(onChange).not.toHaveBeenCalled();
 	});
-
-	it('seeds the threshold from the step interval when switching to Threshold', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		render(
-			<ChartAppearanceSection
-				value={undefined}
-				controls={{ spanGaps: true }}
-				stepInterval={300}
-				onChange={onChange}
-			/>,
-		);
-
-		await user.click(screen.getByText('Threshold'));
-
-		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillOnlyBelow: true, fillLessThan: '5m' },
-		});
-	});
-
-	it('seeds from the step interval even when it arrives after mount', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		// The step interval is undefined until the query response carries step metadata,
-		// so the panel first renders without it and receives it on a later render.
-		const { rerender } = render(
-			<ChartAppearanceSection
-				value={undefined}
-				controls={{ spanGaps: true }}
-				onChange={onChange}
-			/>,
-		);
-		rerender(
-			<ChartAppearanceSection
-				value={undefined}
-				controls={{ spanGaps: true }}
-				stepInterval={300}
-				onChange={onChange}
-			/>,
-		);
-
-		await user.click(screen.getByText('Threshold'));
-
-		// Regression: a value seeded at mount would still be the 1m fallback.
-		expect(onChange).toHaveBeenLastCalledWith({
-			spanGaps: { fillOnlyBelow: true, fillLessThan: '5m' },
-		});
-	});
-
-	it('shows a validation error while typing, before blur', async () => {
-		const user = userEvent.setup();
-		render(
-			<ChartAppearanceSection
-				value={{ spanGaps: { fillLessThan: '1m' } }}
-				controls={{ spanGaps: true }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
-		await user.clear(input);
-		await user.type(input, 'abc');
-		// No blur / Enter — the error must already be visible.
-
-		expect(screen.getByText(/valid duration/i)).toBeInTheDocument();
-	});
-
-	it('does not re-commit the threshold when blurred without a change', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		render(
-			<ChartAppearanceSection
-				value={{ spanGaps: { fillLessThan: '1m' } }}
-				controls={{ spanGaps: true }}
-				onChange={onChange}
-			/>,
-		);
-
-		const input = screen.getByTestId('panel-editor-v2-span-gaps-value');
-		await user.click(input);
-		await user.tab();
-
-		expect(onChange).not.toHaveBeenCalled();
-	});
-
-	it('fully switches from Threshold to Never (the input disappears)', async () => {
-		const user = userEvent.setup();
-		render(<StatefulSpanGaps initial={{ spanGaps: { fillLessThan: '1m' } }} />);
-
-		expect(
-			screen.getByTestId('panel-editor-v2-span-gaps-value'),
-		).toBeInTheDocument();
-
-		// Focus the input first so clicking Never also fires its blur (the toggle race).
-		await user.click(screen.getByTestId('panel-editor-v2-span-gaps-value'));
-		await user.click(screen.getByText('Never'));
-
-		expect(
-			screen.queryByTestId('panel-editor-v2-span-gaps-value'),
-		).not.toBeInTheDocument();
-	});
-
-	it('remembers the last threshold when toggling Never → Threshold', async () => {
-		const user = userEvent.setup();
-		render(<StatefulSpanGaps initial={{ spanGaps: { fillLessThan: '5m' } }} />);
-
-		await user.click(screen.getByText('Never'));
-		await user.click(screen.getByText('Threshold'));
-
-		expect(screen.getByTestId('panel-editor-v2-span-gaps-value')).toHaveValue(
-			'5m',
-		);
-	});
 });
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/FormattingSection/FormattingSection.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/FormattingSection/FormattingSection.tsx
@@ -14,7 +14,7 @@ import ColumnUnits from './ColumnUnits';
 import styles from './FormattingSection.module.scss';

 type FormattingSectionProps = SectionEditorProps<SectionKind.Formatting> &
-	Pick<SectionEditorContext, 'tableColumns' | 'metricUnit'>;
+	Pick<SectionEditorContext, 'tableColumns'>;

 // `full` means "show the raw value, no rounding"; the digits round to that many places.
 const DECIMAL_OPTIONS: {
@@ -39,7 +39,6 @@ function FormattingSection({
 	controls,
 	onChange,
 	tableColumns = [],
-	metricUnit,
 }: FormattingSectionProps): JSX.Element {
 	return (
 		<>
@@ -51,7 +50,6 @@ function FormattingSection({
 						data-testid="panel-editor-v2-unit"
 						source={YAxisSource.DASHBOARDS}
 						value={value?.unit}
-						initialValue={metricUnit}
 						onChange={(unit): void => onChange({ ...value, unit })}
 					/>
 				</div>
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/FormattingSection/tests/FormattingSection.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/FormattingSection/tests/FormattingSection.test.tsx
@@ -3,8 +3,6 @@ import userEvent from '@testing-library/user-event';

 import FormattingSection from '../FormattingSection';

-// Auto-seeding is covered by useMetricYAxisUnit's tests; here `metricUnit` is just a prop.
-
 // Open the Decimals select (clicking its antd selector) and pick the option with the
 // given visible label.
 async function pickDecimal(label: string): Promise<void> {
@@ -73,31 +71,4 @@ describe('FormattingSection', () => {
 			decimalPrecision: '2',
 		});
 	});
-
-	it('warns when the selected unit mismatches the metric unit', () => {
-		// metric sent in seconds, but bytes is selected.
-		render(
-			<FormattingSection
-				value={{ unit: 'By' }}
-				controls={{ unit: true }}
-				metricUnit="s"
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByLabelText('warning')).toBeInTheDocument();
-	});
-
-	it('shows no warning when the selected unit matches the metric unit', () => {
-		render(
-			<FormattingSection
-				value={{ unit: 's' }}
-				controls={{ unit: true }}
-				metricUnit="s"
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.queryByLabelText('warning')).not.toBeInTheDocument();
-	});
 });
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/ThresholdsSection.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/ThresholdsSection.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import {
@@ -82,15 +82,6 @@ function ThresholdsSection({
 	// Which row is being edited, and whether it was just added (so Discard removes it).
 	const [editingIndex, setEditingIndex] = useState<number | null>(null);
 	const [unsavedIndex, setUnsavedIndex] = useState<number | null>(null);
-	// The saved threshold captured on edit entry, restored if the edit is discarded
-	// (edits stream into the spec live, so Discard can't just drop a local draft).
-	const editSnapshot = useRef<AnyThreshold | null>(null);
-
-	const updateAt =
-		(index: number) =>
-		(next: AnyThreshold): void => {
-			onChange(thresholds.map((t, i) => (i === index ? next : t)));
-		};

 	const addThreshold = (): void => {
 		const nextIndex = thresholds.length;
@@ -99,11 +90,6 @@ function ThresholdsSection({
 		setUnsavedIndex(nextIndex);
 	};

-	const beginEdit = (index: number): void => {
-		editSnapshot.current = thresholds[index] ?? null;
-		setEditingIndex(index);
-	};
-
 	const saveAt =
 		(index: number) =>
 		(next: AnyThreshold): void => {
@@ -119,15 +105,11 @@ function ThresholdsSection({
 	};

 	const discardAt = (index: number) => (): void => {
-		// A never-saved row is removed; otherwise revert the live edits to the snapshot.
+		// Discarding a row that was never saved removes it; otherwise just exit edit.
 		if (index === unsavedIndex) {
 			removeAt(index);
 			return;
 		}
-		const original = editSnapshot.current;
-		if (original) {
-			onChange(thresholds.map((t, i) => (i === index ? original : t)));
-		}
 		setEditingIndex(null);
 	};

@@ -138,9 +120,8 @@ function ThresholdsSection({
 			index,
 			yAxisUnit,
 			isEditing: editingIndex === index,
-			onEdit: (): void => beginEdit(index),
+			onEdit: (): void => setEditingIndex(index),
 			onSave: saveAt(index),
-			onLiveChange: updateAt(index),
 			onDiscard: discardAt(index),
 			onRemove: (): void => removeAt(index),
 		};
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/tests/ThresholdsSection.comparison.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/tests/ThresholdsSection.comparison.test.tsx
@@ -36,16 +36,9 @@ const THRESHOLDS: DashboardtypesComparisonThresholdDTO[] = [
 	},
 ];

-// Stateful harness for flows that depend on the value updating (add/discard/live).
-function Harness({
-	yAxisUnit,
-	initial = [],
-}: {
-	yAxisUnit?: string;
-	initial?: DashboardtypesComparisonThresholdDTO[];
-}): JSX.Element {
-	const [value, setValue] =
-		useState<DashboardtypesComparisonThresholdDTO[]>(initial);
+// Stateful harness for flows that depend on the value updating (add/discard).
+function Harness({ yAxisUnit }: { yAxisUnit?: string }): JSX.Element {
+	const [value, setValue] = useState<DashboardtypesComparisonThresholdDTO[]>([]);
 	return (
 		<ComparisonThresholdsSection
 			value={value}
@@ -149,44 +142,24 @@ describe('ComparisonThresholdsSection', () => {
 		expect(valueInput).toHaveValue(5);
 	});

-	it('reflects edits live (before Save) so the preview can react', async () => {
+	it('does not commit edits when Discard is clicked', async () => {
 		const user = userEvent.setup();
 		const onChange = jest.fn();
 		render(
 			<ComparisonThresholdsSection value={THRESHOLDS} onChange={onChange} />,
 		);

-		await user.click(screen.getByTestId('comparison-threshold-edit-0'));
-		await user.clear(screen.getByTestId('comparison-threshold-value-0'));
-		await user.type(screen.getByTestId('comparison-threshold-value-0'), '90');
-
-		// No Save click — the latest edit is already pushed up for the preview.
-		expect(onChange).toHaveBeenLastCalledWith([
-			{
-				value: 90,
-				color: '#F5B225',
-				operator: DashboardtypesComparisonOperatorDTO.above,
-				unit: 'percent',
-				format: DashboardtypesThresholdFormatDTO.background,
-			},
-		]);
-	});
-
-	it('reverts the live edits to the saved value on Discard', async () => {
-		const user = userEvent.setup();
-		render(<Harness initial={THRESHOLDS} />);
-
 		await user.click(screen.getByTestId('comparison-threshold-edit-0'));
 		await user.clear(screen.getByTestId('comparison-threshold-value-0'));
 		await user.type(screen.getByTestId('comparison-threshold-value-0'), '90');
 		await user.click(screen.getByTestId('comparison-threshold-discard-0'));

-		// Back to view mode, and re-opening shows the rolled-back 80, not 90.
+		expect(onChange).not.toHaveBeenCalled();
+		// Back to view mode.
 		expect(
 			screen.queryByTestId('comparison-threshold-value-0'),
 		).not.toBeInTheDocument();
-		await user.click(screen.getByTestId('comparison-threshold-edit-0'));
-		expect(screen.getByTestId('comparison-threshold-value-0')).toHaveValue(80);
+		expect(screen.getByTestId('comparison-threshold-edit-0')).toBeInTheDocument();
 	});

 	it('removes a threshold from view mode', async () => {
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/tests/ThresholdsSection.test.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/tests/ThresholdsSection.test.tsx
@@ -10,16 +10,10 @@ const THRESHOLDS: DashboardtypesThresholdWithLabelDTO[] = [
 	{ value: 80, color: '#F5B225', label: 'High', unit: 'percent' },
 ];

-// Stateful harness for flows that depend on the value updating (add/discard/live);
+// Stateful harness for flows that depend on the value updating (add/discard);
 // omits `controls` to exercise the default `label` variant.
-function Harness({
-	yAxisUnit,
-	initial = [],
-}: {
-	yAxisUnit?: string;
-	initial?: AnyThreshold[];
-}): JSX.Element {
-	const [value, setValue] = useState<AnyThreshold[]>(initial);
+function Harness({ yAxisUnit }: { yAxisUnit?: string }): JSX.Element {
+	const [value, setValue] = useState<AnyThreshold[]>([]);
 	return (
 		<ThresholdsSection value={value} onChange={setValue} yAxisUnit={yAxisUnit} />
 	);
@@ -76,34 +70,19 @@ describe('ThresholdsSection', () => {
 		]);
 	});

-	it('reflects edits live (before Save) so the preview can react', () => {
+	it('does not commit edits when Discard is clicked', () => {
 		const onChange = jest.fn();
 		render(<ThresholdsSection value={THRESHOLDS} onChange={onChange} />);

-		fireEvent.click(screen.getByTestId('threshold-edit-0'));
-		fireEvent.change(screen.getByTestId('threshold-value-0'), {
-			target: { value: '90' },
-		});
-
-		// No Save click — the edit is already pushed up for the preview to render.
-		expect(onChange).toHaveBeenLastCalledWith([
-			{ value: 90, color: '#F5B225', label: 'High', unit: 'percent' },
-		]);
-	});
-
-	it('reverts the live edits to the saved value on Discard', () => {
-		render(<Harness initial={THRESHOLDS} />);
-
 		fireEvent.click(screen.getByTestId('threshold-edit-0'));
 		fireEvent.change(screen.getByTestId('threshold-value-0'), {
 			target: { value: '90' },
 		});
 		fireEvent.click(screen.getByTestId('threshold-discard-0'));

-		// Back to view mode, and re-opening shows the rolled-back 80, not 90.
+		expect(onChange).not.toHaveBeenCalled();
 		expect(screen.queryByTestId('threshold-value-0')).not.toBeInTheDocument();
-		fireEvent.click(screen.getByTestId('threshold-edit-0'));
-		expect(screen.getByTestId('threshold-value-0')).toHaveValue(80);
+		expect(screen.getByTestId('threshold-edit-0')).toBeInTheDocument();
 	});

 	it('removes a threshold from view mode', () => {
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/ComparisonThresholdRow.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/ComparisonThresholdRow.tsx
@@ -27,7 +27,6 @@ interface ComparisonThresholdRowProps {
 	isEditing: boolean;
 	onEdit: () => void;
 	onSave: (next: DashboardtypesComparisonThresholdDTO) => void;
-	onLiveChange: (next: DashboardtypesComparisonThresholdDTO) => void;
 	onDiscard: () => void;
 	onRemove: () => void;
 }
@@ -43,15 +42,10 @@ function ComparisonThresholdRow({
 	isEditing,
 	onEdit,
 	onSave,
-	onLiveChange,
 	onDiscard,
 	onRemove,
 }: ComparisonThresholdRowProps): JSX.Element {
-	const { draft, setDraft, setValue } = useThresholdDraft(
-		threshold,
-		isEditing,
-		onLiveChange,
-	);
+	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);

 	const symbol = threshold.operator ? OPERATOR_SYMBOL[threshold.operator] : '';
 	const summary = (
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/LabelThresholdRow.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/LabelThresholdRow.tsx
@@ -20,7 +20,6 @@ interface LabelThresholdRowProps {
 	isEditing: boolean;
 	onEdit: () => void;
 	onSave: (next: DashboardtypesThresholdWithLabelDTO) => void;
-	onLiveChange: (next: DashboardtypesThresholdWithLabelDTO) => void;
 	onDiscard: () => void;
 	onRemove: () => void;
 }
@@ -33,15 +32,10 @@ function LabelThresholdRow({
 	isEditing,
 	onEdit,
 	onSave,
-	onLiveChange,
 	onDiscard,
 	onRemove,
 }: LabelThresholdRowProps): JSX.Element {
-	const { draft, setDraft, setValue } = useThresholdDraft(
-		threshold,
-		isEditing,
-		onLiveChange,
-	);
+	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);

 	// Persist an empty-string label when none was entered — the spec requires a string.
 	const handleSave = useCallback((): void => {
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/TableThresholdRow.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/TableThresholdRow.tsx
@@ -28,7 +28,6 @@ interface TableThresholdRowProps {
 	isEditing: boolean;
 	onEdit: () => void;
 	onSave: (next: DashboardtypesTableThresholdDTO) => void;
-	onLiveChange: (next: DashboardtypesTableThresholdDTO) => void;
 	onDiscard: () => void;
 	onRemove: () => void;
 }
@@ -46,15 +45,10 @@ function TableThresholdRow({
 	isEditing,
 	onEdit,
 	onSave,
-	onLiveChange,
 	onDiscard,
 	onRemove,
 }: TableThresholdRowProps): JSX.Element {
-	const { draft, setDraft, setValue } = useThresholdDraft(
-		threshold,
-		isEditing,
-		onLiveChange,
-	);
+	const { draft, setDraft, setValue } = useThresholdDraft(threshold, isEditing);

 	// Stored columnName is the query key; resolve its label + configured unit.
 	const columnUnit = tableColumns.find((c) => c.key === draft.columnName)?.unit;
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/shared/useThresholdDraft.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/rows/shared/useThresholdDraft.ts
@@ -9,14 +9,12 @@ interface ThresholdDraft<T> {

 /**
 * Local draft for a threshold row, shared by every variant. Snapshots the saved
- * threshold on each entry into edit mode and exposes the numeric `value` setter all
- * variants use. `onLiveChange` mirrors the draft into the spec as the user edits, so the
- * panel preview updates live (without Save); the section reverts it on Discard.
+ * threshold on each entry into edit mode (so Discard simply drops the draft and the
+ * next edit starts clean) and exposes the numeric `value` setter all variants use.
 */
 export function useThresholdDraft<T extends { value: number }>(
 	threshold: T,
 	isEditing: boolean,
-	onLiveChange?: (draft: T) => void,
 ): ThresholdDraft<T> {
 	const [draft, setDraft] = useState<T>(threshold);

@@ -27,13 +25,6 @@ export function useThresholdDraft<T extends { value: number }>(
 		// eslint-disable-next-line react-hooks/exhaustive-deps -- snapshot only on edit entry
 	}, [isEditing]);

-	useEffect(() => {
-		if (isEditing) {
-			onLiveChange?.(draft);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps -- propagate on draft change only
-	}, [draft]);
-
 	const setValue = (raw: string): void => {
 		const next = Number(raw);
 		setDraft((d) => ({ ...d, value: Number.isNaN(next) ? d.value : next }));
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/tests/getSwitchedPluginSpec.test.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/tests/getSwitchedPluginSpec.test.ts
@@ -1,8 +1,6 @@
 import {
-	DashboardtypesComparisonOperatorDTO,
-	type DashboardtypesPanelSpecDTO,
-	DashboardtypesThresholdFormatDTO,
 	TelemetrytypesSignalDTO,
+	type DashboardtypesPanelSpecDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';

@@ -97,141 +95,4 @@ describe('getSwitchedPluginSpec', () => {

 		expect(result.legend?.position).toBe('bottom');
 	});
-
-	describe('thresholds', () => {
-		it('does not carry thresholds when the new kind has no thresholds section', () => {
-			mockGetPanelDefinition.mockReturnValue({ sections: [{ kind: 'columns' }] });
-			const old = specWith({
-				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/ListPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toBeUndefined();
-		});
-
-		it('carries thresholds verbatim within the label variant (color/value/unit/label)', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: { variant: 'label' } }],
-			});
-			const old = specWith({
-				thresholds: [{ value: 80, color: '#F1575F', unit: 'ms', label: 'warn' }],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/BarChartPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toStrictEqual([
-				{ value: 80, color: '#F1575F', unit: 'ms', label: 'warn' },
-			]);
-		});
-
-		it('remaps label thresholds into the comparison variant, defaulting operator + format', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: { variant: 'comparison' } }],
-			});
-			const old = specWith({
-				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/NumberPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			// The label is dropped; operator/format are seeded so the threshold can match.
-			expect(result.thresholds).toStrictEqual([
-				{
-					value: 80,
-					color: '#F1575F',
-					operator: DashboardtypesComparisonOperatorDTO.above,
-					format: DashboardtypesThresholdFormatDTO.text,
-				},
-			]);
-		});
-
-		it('remaps comparison thresholds into the table variant, keeping operator/format and seeding a column', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: { variant: 'table' } }],
-			});
-			const old = specWith({
-				thresholds: [
-					{
-						value: 80,
-						color: '#F1575F',
-						operator: DashboardtypesComparisonOperatorDTO.below,
-						format: DashboardtypesThresholdFormatDTO.text,
-					},
-				],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/TablePanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toStrictEqual([
-				{
-					value: 80,
-					color: '#F1575F',
-					operator: DashboardtypesComparisonOperatorDTO.below,
-					format: DashboardtypesThresholdFormatDTO.text,
-					columnName: '',
-				},
-			]);
-		});
-
-		it('drops the table-only columnName when remapping into the label variant', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: { variant: 'label' } }],
-			});
-			const old = specWith({
-				thresholds: [
-					{
-						value: 80,
-						color: '#F1575F',
-						operator: DashboardtypesComparisonOperatorDTO.above,
-						format: DashboardtypesThresholdFormatDTO.background,
-						columnName: 'p99',
-					},
-				],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/TimeSeriesPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toStrictEqual([{ value: 80, color: '#F1575F' }]);
-		});
-
-		it('defaults the variant to label when the thresholds section omits controls', () => {
-			mockGetPanelDefinition.mockReturnValue({
-				sections: [{ kind: 'thresholds', controls: {} }],
-			});
-			const old = specWith({
-				thresholds: [{ value: 80, color: '#F1575F', label: 'warn' }],
-			});
-
-			const result = getSwitchedPluginSpec(
-				old,
-				'signoz/TimeSeriesPanel',
-				TelemetrytypesSignalDTO.logs,
-			);
-
-			expect(result.thresholds).toStrictEqual([
-				{ value: 80, color: '#F1575F', label: 'warn' },
-			]);
-		});
-	});
 });
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/getSwitchedPluginSpec.ts
@@ -1,18 +1,13 @@
-import {
-	DashboardtypesComparisonOperatorDTO,
-	type DashboardtypesPanelSpecDTO,
-	DashboardtypesThresholdFormatDTO,
-	type TelemetrytypesSignalDTO,
-	type TelemetrytypesTelemetryFieldKeyDTO,
+import type {
+	DashboardtypesPanelSpecDTO,
+	TelemetrytypesSignalDTO,
+	TelemetrytypesTelemetryFieldKeyDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import type { PanelKind } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
 import {
-	type AnyThreshold,
-	type PanelFormattingSlice,
-	type SectionConfig,
 	SectionKind,
-	type ThresholdVariant,
+	type PanelFormattingSlice,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
 import {
 	buildDefaultPluginSpec,
@@ -29,73 +24,13 @@ import { defaultColumnsForSignal } from './ListColumnsEditor/selectFields';
 export interface SwitchedPluginSpec extends DefaultPluginSpec {
 	formatting?: Pick<PanelFormattingSlice, 'unit' | 'decimalPrecision'>;
 	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
-	thresholds?: AnyThreshold[];
-}
-
-/** Every field any threshold variant can hold; switching reads across shapes to remap. */
-interface AnyThresholdFields {
-	color: string;
-	value: number;
-	unit?: string;
-	operator?: DashboardtypesComparisonOperatorDTO;
-	format?: DashboardtypesThresholdFormatDTO;
-	columnName?: string;
-	label?: string;
-}
-
-/** The threshold variant a kind edits, or `undefined` when it has no Thresholds section. */
-function getThresholdVariant(
-	sections: SectionConfig[],
-): ThresholdVariant | undefined {
-	const section = sections.find(
-		(s): s is Extract<SectionConfig, { kind: SectionKind.Thresholds }> =>
-			s.kind === SectionKind.Thresholds,
-	);
-	return section ? (section.controls.variant ?? 'label') : undefined;
-}
-
-/**
- * Remaps a threshold to the target kind's variant: keeps the shared core (color, value,
- * unit) plus any cross-variant fields, and seeds the rest with the variant's defaults so
- * the carried threshold stays functional (a comparison/table threshold needs an operator
- * to match, a table threshold a column).
- */
-function toThresholdVariant(
-	source: AnyThresholdFields,
-	variant: ThresholdVariant,
-): AnyThreshold {
-	const core = {
-		color: source.color,
-		value: source.value,
-		...(source.unit !== undefined && { unit: source.unit }),
-	};
-	if (variant === 'comparison') {
-		return {
-			...core,
-			operator: source.operator ?? DashboardtypesComparisonOperatorDTO.above,
-			format: source.format ?? DashboardtypesThresholdFormatDTO.text,
-		};
-	}
-	if (variant === 'table') {
-		return {
-			...core,
-			operator: source.operator ?? DashboardtypesComparisonOperatorDTO.above,
-			format: source.format ?? DashboardtypesThresholdFormatDTO.background,
-			columnName: source.columnName ?? '',
-		};
-	}
-	return {
-		...core,
-		...(source.label !== undefined && { label: source.label }),
-	};
 }

 /**
 * Builds the plugin spec for a first-visit switch to `newKind`: the kind's declared
 * section defaults (so the config pane opens populated, matching new-panel seeding) plus
- * the cross-kind config worth keeping — unit + decimal precision, and thresholds when the
- * new kind supports them (remapped to its variant). Switching into a List seeds the
- * current signal's default columns so the columns control isn't empty.
+ * the only cross-kind config worth keeping — unit + decimal precision. Switching into a
+ * List seeds the current signal's default columns so the columns control isn't empty.
 *
 * Revisiting a kind restores its stashed spec instead, so this runs only on first visit.
 */
@@ -131,19 +66,5 @@ export function getSwitchedPluginSpec(
 		}
 	}

-	const thresholdVariant = getThresholdVariant(sections);
-	if (thresholdVariant) {
-		const oldThresholds = (
-			oldSpec.plugin.spec as {
-				thresholds?: AnyThreshold[] | null;
-			}
-		).thresholds;
-		if (oldThresholds && oldThresholds.length > 0) {
-			result.thresholds = oldThresholds.map((threshold) =>
-				toThresholdVariant(threshold as AnyThresholdFields, thresholdVariant),
-			);
-		}
-	}
-
 	return result;
 }
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/tests/useMetricYAxisUnit.test.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/tests/useMetricYAxisUnit.test.ts
@@ -1,103 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import useGetYAxisUnit from 'hooks/useGetYAxisUnit';
-
-import { useMetricYAxisUnit } from '../useMetricYAxisUnit';
-
-jest.mock('hooks/useGetYAxisUnit', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-const mockUseGetYAxisUnit = useGetYAxisUnit as unknown as jest.Mock;
-
-function mockMetricUnit(
-	yAxisUnit: string | undefined,
-	isLoading = false,
-): void {
-	mockUseGetYAxisUnit.mockReturnValue({ yAxisUnit, isLoading, isError: false });
-}
-
-describe('useMetricYAxisUnit', () => {
-	beforeEach(() => jest.clearAllMocks());
-
-	it('seeds the unit from the metric on a new panel', () => {
-		mockMetricUnit('bytes');
-		const onSelectUnit = jest.fn();
-
-		renderHook(() =>
-			useMetricYAxisUnit({ isNewPanel: true, unit: undefined, onSelectUnit }),
-		);
-
-		expect(onSelectUnit).toHaveBeenCalledWith('bytes');
-	});
-
-	it('does not seed when not a new panel', () => {
-		mockMetricUnit('bytes');
-		const onSelectUnit = jest.fn();
-
-		renderHook(() =>
-			useMetricYAxisUnit({ isNewPanel: false, unit: undefined, onSelectUnit }),
-		);
-
-		expect(onSelectUnit).not.toHaveBeenCalled();
-	});
-
-	it('does not seed when the metric has no unit', () => {
-		mockMetricUnit(undefined);
-		const onSelectUnit = jest.fn();
-
-		renderHook(() =>
-			useMetricYAxisUnit({ isNewPanel: true, unit: undefined, onSelectUnit }),
-		);
-
-		expect(onSelectUnit).not.toHaveBeenCalled();
-	});
-
-	it('does not seed when the unit already matches the metric', () => {
-		mockMetricUnit('bytes');
-		const onSelectUnit = jest.fn();
-
-		renderHook(() =>
-			useMetricYAxisUnit({ isNewPanel: true, unit: 'bytes', onSelectUnit }),
-		);
-
-		expect(onSelectUnit).not.toHaveBeenCalled();
-	});
-
-	it('re-seeds when the resolved metric unit changes', () => {
-		mockMetricUnit('bytes');
-		const onSelectUnit = jest.fn();
-
-		const { rerender } = renderHook(
-			(props: { unit: string | undefined }) =>
-				useMetricYAxisUnit({
-					isNewPanel: true,
-					unit: props.unit,
-					onSelectUnit,
-				}),
-			{ initialProps: { unit: undefined as string | undefined } },
-		);
-		expect(onSelectUnit).toHaveBeenLastCalledWith('bytes');
-
-		// The metric changes; the panel now holds the previously-seeded unit.
-		mockMetricUnit('ms');
-		rerender({ unit: 'bytes' });
-
-		expect(onSelectUnit).toHaveBeenLastCalledWith('ms');
-	});
-
-	it('returns the resolved metric unit and loading state', () => {
-		mockMetricUnit('bytes', true);
-
-		const { result } = renderHook(() =>
-			useMetricYAxisUnit({
-				isNewPanel: false,
-				unit: undefined,
-				onSelectUnit: jest.fn(),
-			}),
-		);
-
-		expect(result.current.metricUnit).toBe('bytes');
-		expect(result.current.isLoading).toBe(true);
-	});
-});
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/useMetricYAxisUnit.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/hooks/useMetricYAxisUnit.ts
@@ -1,36 +0,0 @@
-import { useEffect } from 'react';
-import useGetYAxisUnit from 'hooks/useGetYAxisUnit';
-
-interface UseMetricYAxisUnitArgs {
-	/** Only a new panel auto-seeds; editing never overwrites the saved unit. */
-	isNewPanel: boolean;
-	unit: string | undefined;
-	onSelectUnit: (unit: string) => void;
-}
-
-interface UseMetricYAxisUnitResult {
-	metricUnit: string | undefined;
-	isLoading: boolean;
-}
-
-/**
- * Resolves the selected metric's unit and, on a new panel only, seeds the formatting unit
- * from it (V1 parity); returns the unit for the selector's mismatch warning.
- */
-export function useMetricYAxisUnit({
-	isNewPanel,
-	unit,
-	onSelectUnit,
-}: UseMetricYAxisUnitArgs): UseMetricYAxisUnitResult {
-	const { yAxisUnit: metricUnit, isLoading } = useGetYAxisUnit();
-
-	useEffect(() => {
-		if (isNewPanel && metricUnit && metricUnit !== unit) {
-			onSelectUnit(metricUnit);
-		}
-		// Re-seed only when the resolved metric unit changes, not on every unit edit.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isNewPanel, metricUnit]);
-
-	return { metricUnit, isLoading };
-}
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/index.tsx
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/index.tsx
@@ -8,8 +8,6 @@ import {
 import { toast } from '@signozhq/ui/sonner';
 import {
 	type DashboardtypesPanelDTO,
-	type DashboardtypesPanelFormattingDTO,
-	type DashboardtypesPanelSpecDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -32,7 +30,6 @@ import { useLegendSeries } from './hooks/useLegendSeries';
 import { usePanelQuery } from '../hooks/usePanelQuery';
 import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
 import { usePanelEditorQuerySync } from './hooks/usePanelEditorQuerySync';
-import { useMetricYAxisUnit } from './hooks/useMetricYAxisUnit';
 import { usePanelEditorSave } from './hooks/usePanelEditorSave';
 import { usePanelTypeSwitch } from './hooks/usePanelTypeSwitch';
 import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
@@ -126,33 +123,6 @@ function PanelEditorContainer({
 	// Switch the panel's visualization kind in place (reversible per session).
 	const { onChangePanelKind } = usePanelTypeSwitch({ spec, panelType, setSpec });

-	// At editor level, not the collapsible FormattingSection, so seeding runs while closed.
-	const formattingUnit = (
-		spec.plugin.spec as {
-			formatting?: DashboardtypesPanelFormattingDTO;
-		}
-	).formatting?.unit;
-	const seedFormattingUnit = useCallback(
-		(unit: string): void => {
-			const pluginSpec = spec.plugin.spec as {
-				formatting?: DashboardtypesPanelFormattingDTO;
-			};
-			setSpec({
-				...spec,
-				plugin: {
-					...spec.plugin,
-					spec: { ...pluginSpec, formatting: { ...pluginSpec.formatting, unit } },
-				},
-			} as DashboardtypesPanelSpecDTO);
-		},
-		[spec, setSpec],
-	);
-	const { metricUnit } = useMetricYAxisUnit({
-		isNewPanel: isNew,
-		unit: formattingUnit,
-		onSelectUnit: seedFormattingUnit,
-	});
-
 	// Spec and query dirtiness are tracked independently so query re-serialization
 	// never false-dirties. A new panel is always savable (you're creating it).
 	const isDirty = isNew || isSpecDirty || isQueryDirty;
@@ -280,7 +250,6 @@ function PanelEditorContainer({
 						legendSeries={legendSeries}
 						tableColumns={tableColumns}
 						stepInterval={stepInterval}
-						metricUnit={metricUnit}
 					/>
 				</ResizablePanel>
 			</ResizablePanelGroup>
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/tests/prepareData.test.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/tests/prepareData.test.ts
@@ -1,130 +0,0 @@
-import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
-
-import { preparePieData } from '../prepareData';
-
-function tableWith(
-	columns: PanelTable['columns'],
-	rows: PanelTable['rows'],
-	overrides: Partial<PanelTable> = {},
-): PanelTable {
-	return { queryName: 'A', legend: '', columns, rows, ...overrides };
-}
-
-const args = (tables: PanelTable[]): Parameters<typeof preparePieData>[0] => ({
-	tables,
-	isDarkMode: true,
-});
-
-describe('preparePieData', () => {
-	it('renders a slice per value column for a multi-column ClickHouse scalar', () => {
-		const table = tableWith(
-			[
-				{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
-				{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
-			],
-			[{ data: { col1: 23399927, col2: 588691297 } }],
-		);
-
-		const slices = preparePieData(args([table]));
-
-		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
-			['col1', 23399927],
-			['col2', 588691297],
-		]);
-	});
-
-	it('keeps one slice per group row for a single value column', () => {
-		const table = tableWith(
-			[
-				{
-					name: 'service.name',
-					queryName: 'A',
-					isValueColumn: false,
-					id: 'service.name',
-				},
-				{ name: 'count', queryName: 'A', isValueColumn: true, id: 'A' },
-			],
-			[
-				{ data: { 'service.name': 'adservice', A: 100 } },
-				{ data: { 'service.name': 'cartservice', A: 200 } },
-			],
-		);
-
-		const slices = preparePieData(args([table]));
-
-		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
-			['adservice', 100],
-			['cartservice', 200],
-		]);
-	});
-
-	it('prefixes the group when multiple value columns are grouped', () => {
-		const table = tableWith(
-			[
-				{ name: 'env', queryName: 'A', isValueColumn: false, id: 'env' },
-				{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
-				{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
-			],
-			[{ data: { env: 'prod', col1: 10, col2: 20 } }],
-		);
-
-		const slices = preparePieData(args([table]));
-
-		expect(slices.map((s) => s.label)).toStrictEqual([
-			'prod · col1',
-			'prod · col2',
-		]);
-	});
-
-	it('falls back to legend/query name when a single value column has no group', () => {
-		const table = tableWith(
-			[{ name: 'count', queryName: 'A', isValueColumn: true, id: 'A' }],
-			[{ data: { A: 42 } }],
-			{ legend: 'requests' },
-		);
-
-		const slices = preparePieData(args([table]));
-
-		expect(slices.map((s) => [s.label, s.value])).toStrictEqual([
-			['requests', 42],
-		]);
-	});
-
-	it('honours customColors over the generated palette', () => {
-		const table = tableWith(
-			[
-				{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
-				{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
-			],
-			[{ data: { col1: 10, col2: 20 } }],
-		);
-
-		const slices = preparePieData({
-			tables: [table],
-			isDarkMode: true,
-			customColors: { col1: '#ff0000' },
-		});
-
-		expect(slices[0].color).toBe('#ff0000');
-		expect(slices[1].color).not.toBe('#ff0000');
-	});
-
-	it('drops non-positive and non-numeric values', () => {
-		const table = tableWith(
-			[
-				{ name: 'col1', queryName: 'A', isValueColumn: true, id: 'col1' },
-				{ name: 'col2', queryName: 'A', isValueColumn: true, id: 'col2' },
-				{ name: 'col3', queryName: 'A', isValueColumn: true, id: 'col3' },
-			],
-			[{ data: { col1: 5, col2: 0, col3: 'n/a' } }],
-		);
-
-		const slices = preparePieData(args([table]));
-
-		expect(slices.map((s) => s.label)).toStrictEqual(['col1']);
-	});
-
-	it('returns no slices for empty tables', () => {
-		expect(preparePieData(args([]))).toStrictEqual([]);
-	});
-});
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/prepareData.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/prepareData.ts
@@ -11,7 +11,11 @@ export interface PreparePieDataArgs {
 	isDarkMode: boolean;
 }

-/** One pie slice per (row × value column); column name labels slices when a query has several value columns. */
+/**
+ * Turns the scalar tables of a V5 response into pie slices (one per group row):
+ * value column → value, group column(s) → label. Colours honour `customColors`
+ * then fall back to the deterministic palette; non-positive/non-numeric dropped.
+ */
 export function preparePieData({
 	tables,
 	customColors,
@@ -23,35 +27,26 @@ export function preparePieData({

 	const slices: PieSlice[] = [];
 	tables.forEach((table) => {
-		const valueColumns = table.columns.filter((column) => column.isValueColumn);
-		if (valueColumns.length === 0) {
+		const valueColumn = table.columns.find((column) => column.isValueColumn);
+		if (!valueColumn) {
 			return;
 		}
+		const valueKey = valueColumn.id || valueColumn.name;
 		const labelColumns = table.columns.filter((column) => !column.isValueColumn);
-		const hasMultipleValueColumns = valueColumns.length > 1;

 		table.rows.forEach((row) => {
-			const groupLabel = labelColumns
-				.map((column) => row.data[column.id || column.name])
-				.filter((part) => part != null)
-				.map(String)
-				.join(', ');
-
-			valueColumns.forEach((column) => {
-				let label: string;
-				if (hasMultipleValueColumns) {
-					label = groupLabel ? `${groupLabel} · ${column.name}` : column.name;
-				} else {
-					label = groupLabel || table.legend || table.queryName || '';
-				}
-
-				const color = customColors?.[label] ?? generateColor(label, colorMap);
-				slices.push({
-					label,
-					value: Number(row.data[column.id || column.name]),
-					color,
-				});
-			});
+			const value = Number(row.data[valueKey]);
+			const label =
+				labelColumns
+					.map((column) => row.data[column.id || column.name])
+					.filter((part) => part != null)
+					.map(String)
+					.join(', ') ||
+				table.legend ||
+				table.queryName ||
+				'';
+			const color = customColors?.[label] ?? generateColor(label, colorMap);
+			slices.push({ label, value, color });
 		});
 	});

--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/utils/buildConfig.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/utils/buildConfig.ts
@@ -108,9 +108,7 @@ function addSeries({
 	// `customColors` is nullable on the spec; coerce so `addSeries` always gets
 	// a defined record (it dereferences keys without a guard).
 	const colorMapping = spec.legend?.customColors ?? {};
-	const spanGaps = chartAppearance?.spanGaps
-		? resolveSpanGaps(chartAppearance?.spanGaps)
-		: true;
+	const spanGaps = resolveSpanGaps(chartAppearance?.spanGaps?.fillLessThan);

 	const lineStyle = chartAppearance?.lineStyle
 		? LINE_STYLE_MAP[chartAppearance.lineStyle]
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearance/tests/resolvers.test.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearance/tests/resolvers.test.ts
@@ -1,35 +1,22 @@
 import { resolveSpanGaps } from '../resolvers';

 describe('resolveSpanGaps', () => {
-	it('parses a duration string into seconds when thresholding', () => {
-		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: '5s' })).toBe(5);
-		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: '10m' })).toBe(
-			600,
-		);
-		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: '1h' })).toBe(
-			3600,
-		);
+	it('spans all gaps (true) when unset', () => {
+		expect(resolveSpanGaps(undefined)).toBe(true);
+		expect(resolveSpanGaps('')).toBe(true);
+	});
+
+	it('parses a duration string into seconds', () => {
+		expect(resolveSpanGaps('5s')).toBe(5);
+		expect(resolveSpanGaps('10m')).toBe(600);
+		expect(resolveSpanGaps('1h')).toBe(3600);
 	});

 	it('tolerates a bare seconds number (back-compat)', () => {
-		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: '600' })).toBe(
-			600,
-		);
+		expect(resolveSpanGaps('600')).toBe(600);
 	});

 	it('falls back to true for unparseable input', () => {
-		expect(resolveSpanGaps({ fillOnlyBelow: true, fillLessThan: 'abc' })).toBe(
-			true,
-		);
-	});
-
-	it('spans all gaps when fillOnlyBelow is explicitly false, ignoring any duration', () => {
-		expect(resolveSpanGaps({ fillOnlyBelow: false, fillLessThan: '5m' })).toBe(
-			true,
-		);
-	});
-
-	it('treats a duration with no fillOnlyBelow flag as a threshold (legacy panels)', () => {
-		expect(resolveSpanGaps({ fillLessThan: '5m' })).toBe(300);
+		expect(resolveSpanGaps('abc')).toBe(true);
 	});
 });
--- a/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearance/resolvers.ts
+++ b/frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearance/resolvers.ts
@@ -2,7 +2,6 @@ import { rangeUtil } from '@grafana/data';
 import {
 	DashboardtypesLegendPositionDTO,
 	DashboardtypesPrecisionOptionDTO,
-	type DashboardtypesSpanGapsDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
@@ -40,14 +39,15 @@ export function resolveDecimalPrecision(
 }

 /**
- * Resolves `spanGaps` to uPlot's value. `fillOnlyBelow: false` spans every gap regardless
- * of `fillLessThan`; a duration with no flag still thresholds (panels predating the flag).
+ * `spec.chartAppearance.spanGaps.fillLessThan` is a duration string on the wire
+ * ("10m", "5s"). Empty/missing → span all gaps (default); otherwise forward the
+ * threshold in seconds so uPlot only bridges short runs of nulls. Tolerates a
+ * bare seconds number for back-compat.
 */
 export function resolveSpanGaps(
-	spanGaps: DashboardtypesSpanGapsDTO,
+	fillLessThan: string | undefined,
 ): boolean | number {
-	const fillLessThan = spanGaps.fillLessThan;
-	if (spanGaps.fillOnlyBelow === false || !fillLessThan) {
+	if (!fillLessThan) {
 		return true;
 	}
 	const seconds = rangeUtil.isValidTimeSpan(fillLessThan)
--- a/frontend/src/schemas/generated/webSettings.schema.json
+++ b/frontend/src/schemas/generated/webSettings.schema.json
@@ -14,6 +14,9 @@
      ],
      "additionalProperties": false,
      "properties": {
+        "appId": {
+          "type": "string"
+        },
        "enabled": {
          "type": "boolean"
        }
@@ -26,8 +29,17 @@
      ],
      "additionalProperties": false,
      "properties": {
+        "apiHost": {
+          "type": "string"
+        },
        "enabled": {
          "type": "boolean"
+        },
+        "key": {
+          "type": "string"
+        },
+        "uiHost": {
+          "type": "string"
        }
      },
      "type": "object"
@@ -38,8 +50,14 @@
      ],
      "additionalProperties": false,
      "properties": {
+        "appId": {
+          "type": "string"
+        },
        "enabled": {
          "type": "boolean"
+        },
+        "identitySecret": {
+          "type": "string"
        }
      },
      "type": "object"
@@ -50,8 +68,14 @@
      ],
      "additionalProperties": false,
      "properties": {
+        "dsn": {
+          "type": "string"
+        },
        "enabled": {
          "type": "boolean"
+        },
+        "tunnel": {
+          "type": "string"
        }
      },
      "type": "object"
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { default } from './DeleteConfirmDialog';`
				`@@ -0,0 +1 @@`
				`export { default } from './ExtraPricingBuckets';`
				`@@ -0,0 +1 @@`
				`export { default } from './SourceSelector';`