chore: adding TODO comments

.github/workflows/integrationci.yaml

@@ -55,9 +55,6 @@ jobs:
         sqlstore-provider:
           - postgres
           - sqlite
-        sqlite-mode:
-          - delete
-          - wal
         clickhouse-version:
           - 25.5.6
           - 25.12.5
@@ -65,9 +62,6 @@ jobs:
           - v0.142.0
         postgres-version:
           - 15
-        exclude:
-          - sqlstore-provider: postgres
-            sqlite-mode: wal
     if: |
       ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-integrate')
@@ -108,7 +102,6 @@ jobs:
             --basetemp=./tmp/ \
             src/${{matrix.src}} \
             --sqlstore-provider ${{matrix.sqlstore-provider}} \
-            --sqlite-mode ${{matrix.sqlite-mode}} \
             --postgres-version ${{matrix.postgres-version}} \
             --clickhouse-version ${{matrix.clickhouse-version}} \
             --schema-migrator-version ${{matrix.schema-migrator-version}}

cmd/community/server.go

@@ -19,9 +19,12 @@ import (
 	"github.com/SigNoz/signoz/pkg/gateway/noopgateway"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/licensing/nooplicensing"
+	"github.com/SigNoz/signoz/pkg/modules/cloudintegration"
+	"github.com/SigNoz/signoz/pkg/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
+	"github.com/SigNoz/signoz/pkg/modules/serviceaccount"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/queryparser"
@@ -29,6 +32,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/sqlschema"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/SigNoz/signoz/pkg/zeus/noopzeus"
@@ -96,6 +100,9 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics) querier.Handler {
 			return querier.NewHandler(ps, q, a)
 		},
+		func(_ cloudintegrationtypes.Store, _ zeus.Zeus, _ gateway.Gateway, _ licensing.Licensing, _ serviceaccount.Module) (cloudintegration.Module, error) {
+			return implcloudintegration.NewModule(), nil
+		},
 	)
 	if err != nil {
 		logger.ErrorContext(ctx, "failed to create signoz", errors.Attr(err))

cmd/enterprise/server.go

@@ -16,6 +16,7 @@ import (
 	"github.com/SigNoz/signoz/ee/gateway/httpgateway"
 	enterpriselicensing "github.com/SigNoz/signoz/ee/licensing"
 	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
+	"github.com/SigNoz/signoz/ee/modules/cloudintegration/implcloudintegration"
 	"github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard"
 	eequerier "github.com/SigNoz/signoz/ee/querier"
 	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
@@ -30,9 +31,11 @@ import (
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/gateway"
 	"github.com/SigNoz/signoz/pkg/licensing"
+	"github.com/SigNoz/signoz/pkg/modules/cloudintegration"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
+	"github.com/SigNoz/signoz/pkg/modules/serviceaccount"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/signoz"
@@ -40,6 +43,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstorehook"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
 )
@@ -125,7 +129,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 				return nil, err
 			}
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx), openfgaDataStore, licensing, dashboardModule), nil
-
 		},
 		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
 			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, queryParser, querier, licensing)
@@ -137,8 +140,10 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 			communityHandler := querier.NewHandler(ps, q, a)
 			return eequerier.NewHandler(ps, q, communityHandler)
 		},
+		func(store cloudintegrationtypes.Store, zeus zeus.Zeus, gateway gateway.Gateway, licensing licensing.Licensing, serviceAccount serviceaccount.Module) (cloudintegration.Module, error) {
+			return implcloudintegration.NewModule(store, config.Global, zeus, gateway, licensing, serviceAccount)
+		},
 	)
-
 	if err != nil {
 		logger.ErrorContext(ctx, "failed to create signoz", errors.Attr(err))
 		return err

conf/example.yaml

@@ -86,7 +86,7 @@ sqlstore:
     # The path to the SQLite database file.
     path: /var/lib/signoz/signoz.db
     # The journal mode for the sqlite database. Supported values: delete, wal.
-    mode: wal
+    mode: delete
     # The timeout for the sqlite database to wait for a lock.
     busy_timeout: 10s
     # The default transaction locking behavior. Supported values: deferred, immediate, exclusive.

docs/api/openapi.yml

@@ -327,6 +327,27 @@ components:
           nullable: true
           type: array
       type: object
+    AuthtypesStorableRole:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        description:
+          type: string
+        id:
+          type: string
+        name:
+          type: string
+        orgId:
+          type: string
+        type:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      type: object
     AuthtypesTransaction:
       properties:
         object:
@@ -350,7 +371,7 @@ components:
         id:
           type: string
         role:
-          $ref: '#/components/schemas/AuthtypesRole'
+          $ref: '#/components/schemas/AuthtypesStorableRole'
         roleId:
           type: string
         updatedAt:
@@ -360,11 +381,6 @@ components:
           type: string
       required:
       - id
-      - userId
-      - roleId
-      - createdAt
-      - updatedAt
-      - role
       type: object
     AuthtypesUserWithRoles:
       properties:
@@ -405,11 +421,11 @@ components:
       type: object
     CloudintegrationtypesAWSCollectionStrategy:
       properties:
-        aws_logs:
+        logs:
           $ref: '#/components/schemas/CloudintegrationtypesAWSLogsStrategy'
-        aws_metrics:
+        metrics:
           $ref: '#/components/schemas/CloudintegrationtypesAWSMetricsStrategy'
-        s3_buckets:
+        s3Buckets:
           additionalProperties:
             items:
               type: string
@@ -449,12 +465,12 @@ components:
       type: object
     CloudintegrationtypesAWSLogsStrategy:
       properties:
-        cloudwatch_logs_subscriptions:
+        cloudwatchLogsSubscriptions:
           items:
             properties:
-              filter_pattern:
+              filterPattern:
                 type: string
-              log_group_name_prefix:
+              logGroupNamePrefix:
                 type: string
             type: object
           nullable: true
@@ -462,7 +478,7 @@ components:
       type: object
     CloudintegrationtypesAWSMetricsStrategy:
       properties:
-        cloudwatch_metric_stream_filters:
+        cloudwatchMetricStreamFilters:
           items:
             properties:
               MetricNames:
@@ -561,6 +577,26 @@ components:
           nullable: true
           type: array
       type: object
+    CloudintegrationtypesCloudIntegrationService:
+      nullable: true
+      properties:
+        cloudIntegrationId:
+          type: string
+        config:
+          $ref: '#/components/schemas/CloudintegrationtypesServiceConfig'
+        createdAt:
+          format: date-time
+          type: string
+        id:
+          type: string
+        type:
+          $ref: '#/components/schemas/CloudintegrationtypesServiceID'
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      type: object
     CloudintegrationtypesCollectedLogAttribute:
       properties:
         name:
@@ -694,11 +730,54 @@ components:
             type: string
           type: array
         telemetry:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
+          $ref: '#/components/schemas/CloudintegrationtypesOldAWSCollectionStrategy'
       required:
       - enabled_regions
       - telemetry
       type: object
+    CloudintegrationtypesOldAWSCollectionStrategy:
+      properties:
+        aws_logs:
+          $ref: '#/components/schemas/CloudintegrationtypesOldAWSLogsStrategy'
+        aws_metrics:
+          $ref: '#/components/schemas/CloudintegrationtypesOldAWSMetricsStrategy'
+        provider:
+          type: string
+        s3_buckets:
+          additionalProperties:
+            items:
+              type: string
+            type: array
+          type: object
+      type: object
+    CloudintegrationtypesOldAWSLogsStrategy:
+      properties:
+        cloudwatch_logs_subscriptions:
+          items:
+            properties:
+              filter_pattern:
+                type: string
+              log_group_name_prefix:
+                type: string
+            type: object
+          nullable: true
+          type: array
+      type: object
+    CloudintegrationtypesOldAWSMetricsStrategy:
+      properties:
+        cloudwatch_metric_stream_filters:
+          items:
+            properties:
+              MetricNames:
+                items:
+                  type: string
+                type: array
+              Namespace:
+                type: string
+            type: object
+          nullable: true
+          type: array
+      type: object
     CloudintegrationtypesPostableAgentCheckInRequest:
       properties:
         account_id:
@@ -727,6 +806,8 @@ components:
       properties:
         assets:
           $ref: '#/components/schemas/CloudintegrationtypesAssets'
+        cloudIntegrationService:
+          $ref: '#/components/schemas/CloudintegrationtypesCloudIntegrationService'
         dataCollected:
           $ref: '#/components/schemas/CloudintegrationtypesDataCollected'
         icon:
@@ -735,9 +816,7 @@ components:
           type: string
         overview:
           type: string
-        serviceConfig:
-          $ref: '#/components/schemas/CloudintegrationtypesServiceConfig'
-        supported_signals:
+        supportedSignals:
           $ref: '#/components/schemas/CloudintegrationtypesSupportedSignals'
         telemetryCollectionStrategy:
           $ref: '#/components/schemas/CloudintegrationtypesCollectionStrategy'
@@ -749,9 +828,10 @@ components:
       - icon
       - overview
       - assets
-      - supported_signals
+      - supportedSignals
       - dataCollected
       - telemetryCollectionStrategy
+      - cloudIntegrationService
       type: object
     CloudintegrationtypesServiceConfig:
       properties:
@@ -760,6 +840,22 @@ components:
       required:
       - aws
       type: object
+    CloudintegrationtypesServiceID:
+      enum:
+      - alb
+      - api-gateway
+      - dynamodb
+      - ec2
+      - ecs
+      - eks
+      - elasticache
+      - lambda
+      - msk
+      - rds
+      - s3sync
+      - sns
+      - sqs
+      type: string
     CloudintegrationtypesServiceMetadata:
       properties:
         enabled:
@@ -2297,6 +2393,15 @@ components:
       - status
       - error
       type: object
+    RulestatehistorytypesAlertState:
+      enum:
+      - inactive
+      - pending
+      - recovering
+      - firing
+      - nodata
+      - disabled
+      type: string
     RulestatehistorytypesGettableRuleStateHistory:
       properties:
         fingerprint:
@@ -2308,15 +2413,15 @@ components:
           nullable: true
           type: array
         overallState:
-          $ref: '#/components/schemas/RuletypesAlertState'
+          $ref: '#/components/schemas/RulestatehistorytypesAlertState'
         overallStateChanged:
           type: boolean
-        ruleId:
+        ruleID:
           type: string
         ruleName:
           type: string
         state:
-          $ref: '#/components/schemas/RuletypesAlertState'
+          $ref: '#/components/schemas/RulestatehistorytypesAlertState'
         stateChanged:
           type: boolean
         unixMilli:
@@ -2326,7 +2431,7 @@ components:
           format: double
           type: number
       required:
-      - ruleId
+      - ruleID
       - ruleName
       - overallState
       - overallStateChanged
@@ -2416,21 +2521,12 @@ components:
           format: int64
           type: integer
         state:
-          $ref: '#/components/schemas/RuletypesAlertState'
+          $ref: '#/components/schemas/RulestatehistorytypesAlertState'
       required:
       - state
       - start
       - end
       type: object
-    RuletypesAlertState:
-      enum:
-      - inactive
-      - pending
-      - recovering
-      - firing
-      - nodata
-      - disabled
-      type: string
     ServiceaccounttypesGettableFactorAPIKey:
       properties:
         createdAt:
@@ -3394,6 +3490,61 @@ paths:
       summary: Update account
       tags:
       - cloudintegration
+  /api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services/{service_id}:
+    put:
+      deprecated: false
+      description: This endpoint updates a service for the specified cloud provider
+      operationId: UpdateService
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: service_id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/CloudintegrationtypesUpdatableService'
+      responses:
+        "204":
+          description: No Content
+        "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:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Update service
+      tags:
+      - cloudintegration
   /api/v1/cloud_integrations/{cloud_provider}/accounts/check_in:
     post:
       deprecated: false
@@ -3561,55 +3712,6 @@ paths:
       summary: Get service
       tags:
       - cloudintegration
-    put:
-      deprecated: false
-      description: This endpoint updates a service for the specified cloud provider
-      operationId: UpdateService
-      parameters:
-      - in: path
-        name: cloud_provider
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: service_id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/CloudintegrationtypesUpdatableService'
-      responses:
-        "204":
-          description: No Content
-        "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:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Update service
-      tags:
-      - cloudintegration
   /api/v1/complete/google:
     get:
       deprecated: false
@@ -8453,7 +8555,7 @@ paths:
       - in: query
         name: state
         schema:
-          $ref: '#/components/schemas/RuletypesAlertState'
+          $ref: '#/components/schemas/RulestatehistorytypesAlertState'
       - in: query
         name: filterExpression
         schema:

docs/contributing/go/integration.md

@@ -193,7 +193,6 @@ uv run pytest --basetemp=./tmp/ -vv --reuse src/passwordauthn/01_register.py::te
 Tests can be configured using pytest options:
 
 - `--sqlstore-provider` - Choose database provider (default: postgres)
-- `--sqlite-mode` - SQLite journal mode: `delete` or `wal` (default: delete). Only relevant when `--sqlstore-provider=sqlite`.
 - `--postgres-version` - PostgreSQL version (default: 15)
 - `--clickhouse-version` - ClickHouse version (default: 25.5.6)
 - `--zookeeper-version` - Zookeeper version (default: 3.7.1)
@@ -203,6 +202,7 @@ Example:
 uv run pytest --basetemp=./tmp/ -vv --reuse --sqlstore-provider=postgres --postgres-version=14 src/auth/
 ```
 
+
 ## What should I remember?
 
 - **Always use the `--reuse` flag** when setting up the environment to keep containers running
@@ -213,4 +213,3 @@ uv run pytest --basetemp=./tmp/ -vv --reuse --sqlstore-provider=postgres --postg
 - **Use descriptive test names** that clearly indicate what is being tested
 - **Leverage fixtures** for common setup and authentication
 - **Test both success and failure scenarios** to ensure robust functionality
-- **`--sqlite-mode=wal` does not work on macOS.** The integration test environment runs SigNoz inside a Linux container with the SQLite database file mounted from the macOS host. WAL mode requires shared memory between connections, and connections crossing the VM boundary (macOS host ↔ Linux container) cannot share the WAL index, resulting in `SQLITE_IOERR_SHORT_READ`. WAL mode is tested in CI on Linux only.

ee/anomaly/params.go

@@ -32,7 +32,7 @@ func (s Seasonality) IsValid() bool {
 }
 
 type AnomaliesRequest struct {
-	Params      *qbtypes.QueryRangeRequest
+	Params      qbtypes.QueryRangeRequest
 	Seasonality Seasonality
 }
 
@@ -81,7 +81,7 @@ type anomalyQueryParams struct {
 	Past3SeasonQuery qbtypes.QueryRangeRequest
 }
 
-func prepareAnomalyQueryParams(req *qbtypes.QueryRangeRequest, seasonality Seasonality) *anomalyQueryParams {
+func prepareAnomalyQueryParams(req qbtypes.QueryRangeRequest, seasonality Seasonality) *anomalyQueryParams {
 	start := req.Start
 	end := req.End
 

ee/modules/cloudintegration/implcloudintegration/implcloudprovider/awscloudprovider.go

@@ -0,0 +1,184 @@
+package implcloudprovider
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"net/url"
+	"sort"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/modules/cloudintegration"
+	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
+)
+
+type awscloudprovider struct {
+	serviceDefinitions cloudintegrationtypes.ServiceDefinitionStore
+}
+
+func NewAWSCloudProvider(defStore cloudintegrationtypes.ServiceDefinitionStore) (cloudintegration.CloudProviderModule, error) {
+	return &awscloudprovider{serviceDefinitions: defStore}, nil
+}
+
+func (provider *awscloudprovider) GetConnectionArtifact(ctx context.Context, creds *cloudintegrationtypes.SignozCredentials, account *cloudintegrationtypes.Account, req *cloudintegrationtypes.ConnectionArtifactRequest) (*cloudintegrationtypes.ConnectionArtifact, error) {
+	// TODO: get this from config
+	agentVersion := "v0.0.8"
+
+	baseURL := fmt.Sprintf("https://%s.console.aws.amazon.com/cloudformation/home", req.Aws.DeploymentRegion)
+	u, _ := url.Parse(baseURL)
+
+	q := u.Query()
+	q.Set("region", req.Aws.DeploymentRegion)
+	u.Fragment = "/stacks/quickcreate"
+
+	u.RawQuery = q.Encode()
+
+	q = u.Query()
+	q.Set("stackName", "signoz-integration")
+	q.Set("templateURL", fmt.Sprintf("https://signoz-integrations.s3.us-east-1.amazonaws.com/aws-quickcreate-template-%s.json", agentVersion))
+	q.Set("param_SigNozIntegrationAgentVersion", agentVersion)
+	q.Set("param_SigNozApiUrl", creds.SigNozAPIURL)
+	q.Set("param_SigNozApiKey", creds.SigNozAPIKey)
+	q.Set("param_SigNozAccountId", account.ID.StringValue())
+	q.Set("param_IngestionUrl", creds.IngestionURL)
+	q.Set("param_IngestionKey", creds.IngestionKey)
+
+	return &cloudintegrationtypes.ConnectionArtifact{
+		Aws: &cloudintegrationtypes.AWSConnectionArtifact{
+			ConnectionURL: u.String() + "?&" + q.Encode(), // this format is required by AWS
+		},
+	}, nil
+}
+
+func (provider *awscloudprovider) ListServiceDefinitions(ctx context.Context) ([]*cloudintegrationtypes.ServiceDefinition, error) {
+	return provider.serviceDefinitions.List(ctx, cloudintegrationtypes.CloudProviderTypeAWS)
+}
+
+func (provider *awscloudprovider) GetServiceDefinition(ctx context.Context, serviceID cloudintegrationtypes.ServiceID) (*cloudintegrationtypes.ServiceDefinition, error) {
+	return provider.serviceDefinitions.Get(ctx, cloudintegrationtypes.CloudProviderTypeAWS, serviceID)
+}
+
+func (provider *awscloudprovider) StorableConfigFromServiceConfig(ctx context.Context, cfg *cloudintegrationtypes.ServiceConfig, supported cloudintegrationtypes.SupportedSignals) (string, error) {
+	if cfg == nil || cfg.AWS == nil {
+		return "", nil
+	}
+	// Strip signal configs the service does not support before storing.
+	if !supported.Logs {
+		cfg.AWS.Logs = nil
+	}
+	if !supported.Metrics {
+		cfg.AWS.Metrics = nil
+	}
+	b, err := json.Marshal(cfg.AWS)
+	if err != nil {
+		return "", err
+	}
+	return string(b), nil
+}
+
+func (provider *awscloudprovider) ServiceConfigFromStorableServiceConfig(ctx context.Context, config string) (*cloudintegrationtypes.ServiceConfig, error) {
+	if config == "" {
+		return nil, errors.NewInternalf(errors.CodeInternal, "service config is empty")
+	}
+
+	var awsCfg cloudintegrationtypes.AWSServiceConfig
+	if err := json.Unmarshal([]byte(config), &awsCfg); err != nil {
+		return nil, err
+	}
+
+	return &cloudintegrationtypes.ServiceConfig{AWS: &awsCfg}, nil
+}
+
+func (provider *awscloudprovider) IsServiceEnabled(ctx context.Context, config *cloudintegrationtypes.ServiceConfig) bool {
+	if config == nil || config.AWS == nil {
+		return false
+	}
+	logsEnabled := config.AWS.Logs != nil && config.AWS.Logs.Enabled
+	metricsEnabled := config.AWS.Metrics != nil && config.AWS.Metrics.Enabled
+	return logsEnabled || metricsEnabled
+}
+
+func (provider *awscloudprovider) IsMetricsEnabled(ctx context.Context, config *cloudintegrationtypes.ServiceConfig) bool {
+	if config == nil || config.AWS == nil {
+		return false
+	}
+	return awsMetricsEnabled(config.AWS)
+}
+
+func (provider *awscloudprovider) BuildIntegrationConfig(
+	ctx context.Context,
+	account *cloudintegrationtypes.Account,
+	services []*cloudintegrationtypes.StorableCloudIntegrationService,
+) (*cloudintegrationtypes.ProviderIntegrationConfig, error) {
+	// Sort services for deterministic output
+	sort.Slice(services, func(i, j int) bool {
+		return services[i].Type.StringValue() < services[j].Type.StringValue()
+	})
+
+	compiledMetrics := &cloudintegrationtypes.AWSMetricsStrategy{}
+	compiledLogs := &cloudintegrationtypes.AWSLogsStrategy{}
+	var compiledS3Buckets map[string][]string
+
+	for _, storedSvc := range services {
+		svcCfg, err := provider.ServiceConfigFromStorableServiceConfig(ctx, storedSvc.Config)
+		if err != nil || svcCfg == nil || svcCfg.AWS == nil {
+			continue
+		}
+
+		svcDef, err := provider.GetServiceDefinition(ctx, storedSvc.Type)
+		if err != nil || svcDef == nil || svcDef.Strategy == nil || svcDef.Strategy.AWS == nil {
+			continue
+		}
+
+		strategy := svcDef.Strategy.AWS
+
+		// S3Sync: logs come directly from configured S3 buckets, not CloudWatch subscriptions
+		if storedSvc.Type == cloudintegrationtypes.AWSServiceS3Sync {
+			if awsLogsEnabled(svcCfg.AWS) && svcCfg.AWS.Logs.S3Buckets != nil {
+				compiledS3Buckets = svcCfg.AWS.Logs.S3Buckets
+			}
+			continue
+		}
+
+		if awsLogsEnabled(svcCfg.AWS) && strategy.Logs != nil {
+			compiledLogs.Subscriptions = append(compiledLogs.Subscriptions, strategy.Logs.Subscriptions...)
+		}
+
+		if awsMetricsEnabled(svcCfg.AWS) && strategy.Metrics != nil {
+			compiledMetrics.StreamFilters = append(compiledMetrics.StreamFilters, strategy.Metrics.StreamFilters...)
+		}
+	}
+
+	awsTelemetry := &cloudintegrationtypes.AWSCollectionStrategy{}
+	if len(compiledMetrics.StreamFilters) > 0 {
+		awsTelemetry.Metrics = compiledMetrics
+	}
+	if len(compiledLogs.Subscriptions) > 0 {
+		awsTelemetry.Logs = compiledLogs
+	}
+	if compiledS3Buckets != nil {
+		awsTelemetry.S3Buckets = compiledS3Buckets
+	}
+
+	enabledRegions := []string{}
+	if account.Config != nil && account.Config.AWS != nil && account.Config.AWS.Regions != nil {
+		enabledRegions = account.Config.AWS.Regions
+	}
+
+	return &cloudintegrationtypes.ProviderIntegrationConfig{
+		AWS: &cloudintegrationtypes.AWSIntegrationConfig{
+			EnabledRegions: enabledRegions,
+			Telemetry:      awsTelemetry,
+		},
+	}, nil
+}
+
+// awsLogsEnabled returns true if the AWS service config has logs explicitly enabled.
+func awsLogsEnabled(cfg *cloudintegrationtypes.AWSServiceConfig) bool {
+	return cfg.Logs != nil && cfg.Logs.Enabled
+}
+
+// awsMetricsEnabled returns true if the AWS service config has metrics explicitly enabled.
+func awsMetricsEnabled(cfg *cloudintegrationtypes.AWSServiceConfig) bool {
+	return cfg.Metrics != nil && cfg.Metrics.Enabled
+}

ee/modules/cloudintegration/implcloudintegration/implcloudprovider/azurecloudprovider.go

@@ -0,0 +1,50 @@
+package implcloudprovider
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/modules/cloudintegration"
+	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
+)
+
+type azurecloudprovider struct{}
+
+func NewAzureCloudProvider() cloudintegration.CloudProviderModule {
+	return &azurecloudprovider{}
+}
+
+func (provider *azurecloudprovider) GetConnectionArtifact(ctx context.Context, creds *cloudintegrationtypes.SignozCredentials, account *cloudintegrationtypes.Account, req *cloudintegrationtypes.ConnectionArtifactRequest) (*cloudintegrationtypes.ConnectionArtifact, error) {
+	panic("implement me")
+}
+
+func (provider *azurecloudprovider) ListServiceDefinitions(ctx context.Context) ([]*cloudintegrationtypes.ServiceDefinition, error) {
+	panic("implement me")
+}
+
+func (provider *azurecloudprovider) GetServiceDefinition(ctx context.Context, serviceID cloudintegrationtypes.ServiceID) (*cloudintegrationtypes.ServiceDefinition, error) {
+	panic("implement me")
+}
+
+func (provider *azurecloudprovider) StorableConfigFromServiceConfig(ctx context.Context, cfg *cloudintegrationtypes.ServiceConfig, supported cloudintegrationtypes.SupportedSignals) (string, error) {
+	panic("implement me")
+}
+
+func (provider *azurecloudprovider) ServiceConfigFromStorableServiceConfig(ctx context.Context, config string) (*cloudintegrationtypes.ServiceConfig, error) {
+	panic("implement me")
+}
+
+func (provider *azurecloudprovider) IsServiceEnabled(ctx context.Context, config *cloudintegrationtypes.ServiceConfig) bool {
+	panic("implement me")
+}
+
+func (provider *azurecloudprovider) IsMetricsEnabled(ctx context.Context, config *cloudintegrationtypes.ServiceConfig) bool {
+	panic("implement me")
+}
+
+func (provider *azurecloudprovider) BuildIntegrationConfig(
+	ctx context.Context,
+	account *cloudintegrationtypes.Account,
+	services []*cloudintegrationtypes.StorableCloudIntegrationService,
+) (*cloudintegrationtypes.ProviderIntegrationConfig, error) {
+	panic("implement me")
+}

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -0,0 +1,533 @@
+package implcloudintegration
+
+import (
+	"context"
+	"fmt"
+	"sort"
+	"time"
+
+	"github.com/SigNoz/signoz/ee/modules/cloudintegration/implcloudintegration/implcloudprovider"
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/gateway"
+	"github.com/SigNoz/signoz/pkg/global"
+	"github.com/SigNoz/signoz/pkg/licensing"
+	"github.com/SigNoz/signoz/pkg/modules/cloudintegration"
+	pkgimpl "github.com/SigNoz/signoz/pkg/modules/cloudintegration/implcloudintegration"
+	"github.com/SigNoz/signoz/pkg/modules/serviceaccount"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
+	"github.com/SigNoz/signoz/pkg/types/serviceaccounttypes"
+	"github.com/SigNoz/signoz/pkg/types/zeustypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/SigNoz/signoz/pkg/zeus"
+)
+
+type module struct {
+	store             cloudintegrationtypes.Store
+	gateway           gateway.Gateway
+	zeus              zeus.Zeus
+	licensing         licensing.Licensing
+	globalConfig      global.Config
+	serviceAccount    serviceaccount.Module
+	cloudProvidersMap map[cloudintegrationtypes.CloudProviderType]cloudintegration.CloudProviderModule
+}
+
+func NewModule(
+	store cloudintegrationtypes.Store,
+	globalConfig global.Config,
+	zeus zeus.Zeus,
+	gateway gateway.Gateway,
+	licensing licensing.Licensing,
+	serviceAccount serviceaccount.Module,
+) (cloudintegration.Module, error) {
+	defStore := pkgimpl.NewServiceDefinitionStore()
+	awsCloudProviderModule, err := implcloudprovider.NewAWSCloudProvider(defStore)
+	if err != nil {
+		return nil, err
+	}
+	azureCloudProviderModule := implcloudprovider.NewAzureCloudProvider()
+	cloudProvidersMap := map[cloudintegrationtypes.CloudProviderType]cloudintegration.CloudProviderModule{
+		cloudintegrationtypes.CloudProviderTypeAWS:   awsCloudProviderModule,
+		cloudintegrationtypes.CloudProviderTypeAzure: azureCloudProviderModule,
+	}
+
+	return &module{
+		store:             store,
+		globalConfig:      globalConfig,
+		zeus:              zeus,
+		gateway:           gateway,
+		licensing:         licensing,
+		serviceAccount:    serviceAccount,
+		cloudProvidersMap: cloudProvidersMap,
+	}, nil
+}
+
+func (module *module) CreateAccount(ctx context.Context, account *cloudintegrationtypes.Account) error {
+	_, err := module.licensing.GetActive(ctx, account.OrgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	storableCloudIntegration, err := cloudintegrationtypes.NewStorableCloudIntegration(account)
+	if err != nil {
+		return err
+	}
+
+	return module.store.CreateAccount(ctx, storableCloudIntegration)
+}
+
+func (module *module) GetConnectionArtifact(ctx context.Context, account *cloudintegrationtypes.Account, req *cloudintegrationtypes.ConnectionArtifactRequest) (*cloudintegrationtypes.ConnectionArtifact, error) {
+	// TODO: evaluate if this check is really required and remove if the deployment promises to always have this configured.
+	if module.globalConfig.IngestionURL == nil {
+		return nil, errors.New(errors.TypeInternal, errors.CodeInternal, "ingestion URL is not configured")
+	}
+
+	// get license to get the deployment details
+	license, err := module.licensing.GetActive(ctx, account.OrgID)
+	if err != nil {
+		return nil, err
+	}
+
+	// get deployment details from zeus
+	respBytes, err := module.zeus.GetDeployment(ctx, license.Key)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "couldn't get deployment")
+	}
+
+	// parse deployment details
+	deployment, err := zeustypes.NewGettableDeployment(respBytes)
+	if err != nil {
+		return nil, err
+	}
+
+	apiKey, err := module.getOrCreateAPIKey(ctx, account.OrgID, account.Provider)
+	if err != nil {
+		return nil, err
+	}
+
+	ingestionKey, err := module.getOrCreateIngestionKey(ctx, account.OrgID, account.Provider)
+	if err != nil {
+		return nil, err
+	}
+
+	creds := &cloudintegrationtypes.SignozCredentials{
+		SigNozAPIURL: deployment.SignozAPIUrl,
+		SigNozAPIKey: apiKey,
+		IngestionURL: module.globalConfig.IngestionURL.String(),
+		IngestionKey: ingestionKey,
+	}
+
+	cloudProviderModule, err := module.GetCloudProvider(account.Provider)
+	if err != nil {
+		return nil, err
+	}
+
+	return cloudProviderModule.GetConnectionArtifact(ctx, creds, account, req)
+}
+
+func (module *module) GetAccount(ctx context.Context, orgID valuer.UUID, accountID valuer.UUID, provider cloudintegrationtypes.CloudProviderType) (*cloudintegrationtypes.Account, error) {
+	_, err := module.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	storableAccount, err := module.store.GetAccountByID(ctx, orgID, accountID, provider)
+	if err != nil {
+		return nil, err
+	}
+
+	return cloudintegrationtypes.NewAccountFromStorable(storableAccount)
+}
+
+// ListAccounts return only agent connected accounts.
+func (module *module) ListAccounts(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType) ([]*cloudintegrationtypes.Account, error) {
+	_, err := module.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	storableAccounts, err := module.store.ListConnectedAccounts(ctx, orgID, provider)
+	if err != nil {
+		return nil, err
+	}
+
+	return cloudintegrationtypes.NewAccountsFromStorables(storableAccounts)
+}
+
+func (module *module) AgentCheckIn(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType, req *cloudintegrationtypes.AgentCheckInRequest) (*cloudintegrationtypes.AgentCheckInResponse, error) {
+	_, err := module.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	connectedAccount, err := module.store.GetConnectedAccount(ctx, orgID, provider, req.ProviderAccountID)
+	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+		return nil, err
+	}
+
+	// If a different integration is already connected to this provider account ID, reject the check-in.
+	// Allow re-check-in from the same integration (e.g. agent restarting).
+	if connectedAccount != nil && connectedAccount.ID != req.CloudIntegrationID {
+		errMessage := fmt.Sprintf("provider account id %s is already connected to cloud integration id %s", req.ProviderAccountID, connectedAccount.ID)
+		return nil, errors.New(errors.TypeAlreadyExists, cloudintegrationtypes.ErrCodeCloudIntegrationAlreadyConnected, errMessage)
+	}
+
+	account, err := module.store.GetAccountByID(ctx, orgID, req.CloudIntegrationID, provider)
+	if err != nil {
+		return nil, err
+	}
+
+	account.AccountID = &req.ProviderAccountID
+	account.LastAgentReport = &cloudintegrationtypes.StorableAgentReport{
+		TimestampMillis: time.Now().UnixMilli(),
+		Data:            req.Data,
+	}
+
+	err = module.store.UpdateAccount(ctx, account)
+	if err != nil {
+		return nil, err
+	}
+
+	// If account has been removed (disconnected), return a minimal response with empty integration config.
+	// The agent doesn't act on config for removed accounts.
+	if account.RemovedAt != nil {
+		return &cloudintegrationtypes.AgentCheckInResponse{
+			CloudIntegrationID: account.ID.StringValue(),
+			ProviderAccountID:  req.ProviderAccountID,
+			IntegrationConfig:  &cloudintegrationtypes.ProviderIntegrationConfig{},
+			RemovedAt:          account.RemovedAt,
+		}, nil
+	}
+
+	// Get account as domain object for config access (enabled regions, etc.)
+	accountDomain, err := cloudintegrationtypes.NewAccountFromStorable(account)
+	if err != nil {
+		return nil, err
+	}
+
+	cloudProvider, err := module.GetCloudProvider(provider)
+	if err != nil {
+		return nil, err
+	}
+
+	storedServices, err := module.store.ListServices(ctx, req.CloudIntegrationID)
+	if err != nil {
+		return nil, err
+	}
+
+	// Delegate integration config building entirely to the provider module
+	integrationConfig, err := cloudProvider.BuildIntegrationConfig(ctx, accountDomain, storedServices)
+	if err != nil {
+		return nil, err
+	}
+
+	return &cloudintegrationtypes.AgentCheckInResponse{
+		CloudIntegrationID: account.ID.StringValue(),
+		ProviderAccountID:  req.ProviderAccountID,
+		IntegrationConfig:  integrationConfig,
+		RemovedAt:          account.RemovedAt,
+	}, nil
+}
+
+func (module *module) UpdateAccount(ctx context.Context, account *cloudintegrationtypes.Account) error {
+	_, err := module.licensing.GetActive(ctx, account.OrgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	storableAccount, err := cloudintegrationtypes.NewStorableCloudIntegration(account)
+	if err != nil {
+		return err
+	}
+
+	return module.store.UpdateAccount(ctx, storableAccount)
+}
+
+func (module *module) DisconnectAccount(ctx context.Context, orgID valuer.UUID, accountID valuer.UUID, provider cloudintegrationtypes.CloudProviderType) error {
+	_, err := module.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	return module.store.RemoveAccount(ctx, orgID, accountID, provider)
+}
+
+func (module *module) ListServicesMetadata(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType, integrationID *valuer.UUID) ([]*cloudintegrationtypes.ServiceMetadata, error) {
+	_, err := module.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	cloudProvider, err := module.GetCloudProvider(provider)
+	if err != nil {
+		return nil, err
+	}
+
+	serviceDefinitions, err := cloudProvider.ListServiceDefinitions(ctx)
+	if err != nil {
+		return nil, err
+	}
+
+	enabledServiceIDs := map[string]bool{}
+	if integrationID != nil {
+		_, err := module.store.GetAccountByID(ctx, orgID, *integrationID, provider)
+		if err != nil {
+			return nil, err
+		}
+
+		storedServices, err := module.store.ListServices(ctx, *integrationID)
+		if err != nil {
+			return nil, err
+		}
+
+		for _, svc := range storedServices {
+			serviceConfig, err := cloudProvider.ServiceConfigFromStorableServiceConfig(ctx, svc.Config)
+			if err != nil {
+				return nil, err
+			}
+
+			if cloudProvider.IsServiceEnabled(ctx, serviceConfig) {
+				enabledServiceIDs[svc.Type.StringValue()] = true
+			}
+		}
+	}
+
+	resp := make([]*cloudintegrationtypes.ServiceMetadata, 0, len(serviceDefinitions))
+	for _, serviceDefinition := range serviceDefinitions {
+		resp = append(resp, cloudintegrationtypes.NewServiceMetadata(*serviceDefinition, enabledServiceIDs[serviceDefinition.ID]))
+	}
+
+	return resp, nil
+}
+
+func (module *module) GetService(ctx context.Context, orgID valuer.UUID, integrationID *valuer.UUID, serviceID cloudintegrationtypes.ServiceID, provider cloudintegrationtypes.CloudProviderType) (*cloudintegrationtypes.Service, error) {
+	_, err := module.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	cloudProvider, err := module.GetCloudProvider(provider)
+	if err != nil {
+		return nil, err
+	}
+
+	serviceDefinition, err := cloudProvider.GetServiceDefinition(ctx, serviceID)
+	if err != nil {
+		return nil, err
+	}
+
+	var integrationService *cloudintegrationtypes.CloudIntegrationService
+
+	if integrationID != nil {
+		_, err := module.store.GetAccountByID(ctx, orgID, *integrationID, provider)
+		if err != nil {
+			return nil, err
+		}
+
+		storedService, err := module.store.GetServiceByServiceID(ctx, *integrationID, serviceID)
+		if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+			return nil, err
+		}
+		if storedService != nil {
+			serviceConfig, err := cloudProvider.ServiceConfigFromStorableServiceConfig(ctx, storedService.Config)
+			if err != nil {
+				return nil, err
+			}
+
+			integrationService = cloudintegrationtypes.NewCloudIntegrationServiceFromStorable(storedService, serviceConfig)
+		}
+	}
+
+	return cloudintegrationtypes.NewService(*serviceDefinition, integrationService), nil
+}
+
+func (module *module) CreateService(ctx context.Context, orgID valuer.UUID, service *cloudintegrationtypes.CloudIntegrationService, provider cloudintegrationtypes.CloudProviderType) error {
+	_, err := module.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	cloudProvider, err := module.GetCloudProvider(provider)
+	if err != nil {
+		return err
+	}
+
+	serviceDefinition, err := cloudProvider.GetServiceDefinition(ctx, service.Type)
+	if err != nil {
+		return err
+	}
+
+	configJSON, err := cloudProvider.StorableConfigFromServiceConfig(ctx, service.Config, serviceDefinition.SupportedSignals)
+	if err != nil {
+		return err
+	}
+
+	return module.store.CreateService(ctx, cloudintegrationtypes.NewStorableCloudIntegrationService(service, configJSON))
+}
+
+func (module *module) UpdateService(ctx context.Context, orgID valuer.UUID, integrationService *cloudintegrationtypes.CloudIntegrationService, provider cloudintegrationtypes.CloudProviderType) error {
+	_, err := module.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	cloudProvider, err := module.GetCloudProvider(provider)
+	if err != nil {
+		return err
+	}
+
+	serviceDefinition, err := cloudProvider.GetServiceDefinition(ctx, integrationService.Type)
+	if err != nil {
+		return err
+	}
+
+	configJSON, err := cloudProvider.StorableConfigFromServiceConfig(ctx, integrationService.Config, serviceDefinition.SupportedSignals)
+	if err != nil {
+		return err
+	}
+
+	storableService := cloudintegrationtypes.NewStorableCloudIntegrationService(integrationService, configJSON)
+
+	return module.store.UpdateService(ctx, storableService)
+}
+
+// TODO: use the function in dashboard APIs during removal of older cloud integration code.
+func (module *module) listDashboards(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error) {
+	var allDashboards []*dashboardtypes.Dashboard
+
+	for provider := range module.cloudProvidersMap {
+		cloudProvider, err := module.GetCloudProvider(provider)
+		if err != nil {
+			return nil, err
+		}
+
+		connectedAccounts, err := module.store.ListConnectedAccounts(ctx, orgID, provider)
+		if err != nil {
+			return nil, err
+		}
+
+		for _, storableAccount := range connectedAccounts {
+			storedServices, err := module.store.ListServices(ctx, storableAccount.ID)
+			if err != nil {
+				return nil, err
+			}
+
+			for _, storedSvc := range storedServices {
+				serviceConfig, err := cloudProvider.ServiceConfigFromStorableServiceConfig(ctx, storedSvc.Config)
+				if err != nil || !cloudProvider.IsMetricsEnabled(ctx, serviceConfig) {
+					continue
+				}
+
+				svcDef, err := cloudProvider.GetServiceDefinition(ctx, storedSvc.Type)
+				if err != nil || svcDef == nil {
+					continue
+				}
+
+				dashboards := cloudintegrationtypes.GetDashboardsFromAssets(
+					storedSvc.Type.StringValue(),
+					orgID,
+					provider,
+					storableAccount.CreatedAt,
+					svcDef.Assets,
+				)
+				allDashboards = append(allDashboards, dashboards...)
+			}
+		}
+	}
+
+	sort.Slice(allDashboards, func(i, j int) bool {
+		return allDashboards[i].ID < allDashboards[j].ID
+	})
+
+	return allDashboards, nil
+}
+
+// TODO: use the function in dashboard APIs during removal of older cloud integration code.
+func (module *module) GetDashboardByID(ctx context.Context, orgID valuer.UUID, id string) (*dashboardtypes.Dashboard, error) {
+	_, err := module.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	_, _, _, err = cloudintegrationtypes.ParseCloudIntegrationDashboardID(id)
+	if err != nil {
+		return nil, err
+	}
+
+	allDashboards, err := module.listDashboards(ctx, orgID)
+	if err != nil {
+		return nil, err
+	}
+
+	for _, d := range allDashboards {
+		if d.ID == id {
+			return d, nil
+		}
+	}
+
+	return nil, errors.New(errors.TypeNotFound, cloudintegrationtypes.ErrCodeCloudIntegrationNotFound, "cloud integration dashboard not found")
+}
+
+// TODO: use the function in dashboard APIs during removal of older cloud integration code.
+func (module *module) ListDashboards(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error) {
+	_, err := module.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	return module.listDashboards(ctx, orgID)
+}
+
+func (module *module) GetCloudProvider(provider cloudintegrationtypes.CloudProviderType) (cloudintegration.CloudProviderModule, error) {
+	if cloudProviderModule, ok := module.cloudProvidersMap[provider]; ok {
+		return cloudProviderModule, nil
+	}
+
+	return nil, errors.NewInvalidInputf(cloudintegrationtypes.ErrCodeCloudProviderInvalidInput, "invalid cloud provider: %s", provider.StringValue())
+}
+
+func (module *module) getOrCreateIngestionKey(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType) (string, error) {
+	keyName := cloudintegrationtypes.NewIngestionKeyName(provider)
+
+	result, err := module.gateway.SearchIngestionKeysByName(ctx, orgID, keyName, 1, 10)
+	if err != nil {
+		return "", errors.WrapInternalf(err, errors.CodeInternal, "couldn't search ingestion keys")
+	}
+
+	// ideally there should be only one key per cloud integration provider
+	if len(result.Keys) > 0 {
+		return result.Keys[0].Value, nil
+	}
+
+	createdIngestionKey, err := module.gateway.CreateIngestionKey(ctx, orgID, keyName, []string{"integration"}, time.Time{})
+	if err != nil {
+		return "", errors.WrapInternalf(err, errors.CodeInternal, "couldn't create ingestion key")
+	}
+
+	return createdIngestionKey.Value, nil
+}
+
+func (module *module) getOrCreateAPIKey(ctx context.Context, orgID valuer.UUID, provider cloudintegrationtypes.CloudProviderType) (string, error) {
+	domain := module.serviceAccount.Config().Email.Domain
+	serviceAccount := serviceaccounttypes.NewServiceAccount("integration", domain, serviceaccounttypes.ServiceAccountStatusActive, orgID)
+	serviceAccount, err := module.serviceAccount.GetOrCreate(ctx, orgID, serviceAccount)
+	if err != nil {
+		return "", err
+	}
+	err = module.serviceAccount.SetRoleByName(ctx, orgID, serviceAccount.ID, authtypes.SigNozViewerRoleName)
+	if err != nil {
+		return "", err
+	}
+
+	factorAPIKey, err := serviceAccount.NewFactorAPIKey(provider.StringValue(), 0)
+	if err != nil {
+		return "", err
+	}
+
+	factorAPIKey, err = module.serviceAccount.GetOrCreateFactorAPIKey(ctx, factorAPIKey)
+	if err != nil {
+		return "", err
+	}
+	return factorAPIKey.Key, nil
+}

ee/querier/handler.go

@@ -65,7 +65,7 @@ func (h *handler) QueryRange(rw http.ResponseWriter, req *http.Request) {
 	}
 
 	if anomalyQuery, ok := queryRangeRequest.IsAnomalyRequest(); ok {
-		anomalies, err := h.handleAnomalyQuery(ctx, orgID, anomalyQuery, &queryRangeRequest)
+		anomalies, err := h.handleAnomalyQuery(ctx, orgID, anomalyQuery, queryRangeRequest)
 		if err != nil {
 			render.Error(rw, errors.NewInternalf(errors.CodeInternal, "failed to get anomalies: %v", err))
 			return
@@ -149,7 +149,7 @@ func (h *handler) createAnomalyProvider(seasonality anomalyV2.Seasonality) anoma
 	}
 }
 
-func (h *handler) handleAnomalyQuery(ctx context.Context, orgID valuer.UUID, anomalyQuery *qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation], queryRangeRequest *qbtypes.QueryRangeRequest) (*anomalyV2.AnomaliesResponse, error) {
+func (h *handler) handleAnomalyQuery(ctx context.Context, orgID valuer.UUID, anomalyQuery *qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation], queryRangeRequest qbtypes.QueryRangeRequest) (*anomalyV2.AnomaliesResponse, error) {
 	seasonality := extractSeasonality(anomalyQuery)
 	provider := h.createAnomalyProvider(seasonality)
 

ee/query-service/app/server.go

@@ -49,6 +49,7 @@ import (
 	opAmpModel "github.com/SigNoz/signoz/pkg/query-service/app/opamp/model"
 	baseconst "github.com/SigNoz/signoz/pkg/query-service/constants"
 	"github.com/SigNoz/signoz/pkg/query-service/healthcheck"
+	baseint "github.com/SigNoz/signoz/pkg/query-service/interfaces"
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/query-service/utils"
 )
@@ -98,6 +99,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	)
 
 	rm, err := makeRulesManager(
+		reader,
 		signoz.Cache,
 		signoz.Alertmanager,
 		signoz.SQLStore,
@@ -343,7 +345,7 @@ func (s *Server) Stop(ctx context.Context) error {
 	return nil
 }
 
-func makeRulesManager(cache cache.Cache, alertmanager alertmanager.Alertmanager, sqlstore sqlstore.SQLStore, telemetryStore telemetrystore.TelemetryStore, metadataStore telemetrytypes.MetadataStore, prometheus prometheus.Prometheus, orgGetter organization.Getter, ruleStateHistoryModule rulestatehistory.Module, querier querier.Querier, providerSettings factory.ProviderSettings, queryParser queryparser.QueryParser) (*baserules.Manager, error) {
+func makeRulesManager(ch baseint.Reader, cache cache.Cache, alertmanager alertmanager.Alertmanager, sqlstore sqlstore.SQLStore, telemetryStore telemetrystore.TelemetryStore, metadataStore telemetrytypes.MetadataStore, prometheus prometheus.Prometheus, orgGetter organization.Getter, ruleStateHistoryModule rulestatehistory.Module, querier querier.Querier, providerSettings factory.ProviderSettings, queryParser queryparser.QueryParser) (*baserules.Manager, error) {
 	ruleStore := sqlrulestore.NewRuleStore(sqlstore, queryParser, providerSettings)
 	maintenanceStore := sqlrulestore.NewMaintenanceStore(sqlstore)
 	// create manager opts
@@ -352,6 +354,7 @@ func makeRulesManager(cache cache.Cache, alertmanager alertmanager.Alertmanager,
 		MetadataStore:          metadataStore,
 		Prometheus:             prometheus,
 		Context:                context.Background(),
+		Reader:                 ch,
 		Querier:                querier,
 		Logger:                 providerSettings.Logger,
 		Cache:                  cache,
@@ -362,7 +365,7 @@ func makeRulesManager(cache cache.Cache, alertmanager alertmanager.Alertmanager,
 		OrgGetter:              orgGetter,
 		RuleStore:              ruleStore,
 		MaintenanceStore:       maintenanceStore,
-		SQLStore:               sqlstore,
+		SqlStore:               sqlstore,
 		QueryParser:            queryParser,
 		RuleStateHistoryModule: ruleStateHistoryModule,
 	}

ee/query-service/rules/anomaly.go

@@ -5,34 +5,58 @@ import (
 	"encoding/json"
 	"fmt"
 	"log/slog"
+	"math"
 	"strings"
 	"sync"
 	"time"
 
+	"github.com/SigNoz/signoz/ee/query-service/anomaly"
+	"github.com/SigNoz/signoz/pkg/cache"
 	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/querier"
-	"github.com/SigNoz/signoz/pkg/types/rulestatehistorytypes"
+	"github.com/SigNoz/signoz/pkg/query-service/common"
+	"github.com/SigNoz/signoz/pkg/query-service/model"
+	"github.com/SigNoz/signoz/pkg/transition"
 	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 
+	querierV2 "github.com/SigNoz/signoz/pkg/query-service/app/querier/v2"
+	"github.com/SigNoz/signoz/pkg/query-service/app/queryBuilder"
+	"github.com/SigNoz/signoz/pkg/query-service/interfaces"
+	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
+	"github.com/SigNoz/signoz/pkg/query-service/utils/labels"
+	"github.com/SigNoz/signoz/pkg/query-service/utils/times"
+	"github.com/SigNoz/signoz/pkg/query-service/utils/timestamp"
+
 	"github.com/SigNoz/signoz/pkg/units"
 
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 
-	"github.com/SigNoz/signoz/ee/anomaly"
+	querierV5 "github.com/SigNoz/signoz/pkg/querier"
+
+	anomalyV2 "github.com/SigNoz/signoz/ee/anomaly"
 
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 )
 
+const (
+	RuleTypeAnomaly = "anomaly_rule"
+)
+
 type AnomalyRule struct {
 	*baserules.BaseRule
 
 	mtx sync.Mutex
 
-	// querier is used for alerts migrated after the introduction of new query builder
-	querier querier.Querier
+	reader interfaces.Reader
 
-	provider anomaly.Provider
+	// querierV2 is used for alerts created after the introduction of new metrics query builder
+	querierV2 interfaces.Querier
+
+	// querierV5 is used for alerts migrated after the introduction of new query builder
+	querierV5 querierV5.Querier
+
+	provider   anomaly.Provider
+	providerV2 anomalyV2.Provider
 
 	version string
 	logger  *slog.Logger
@@ -46,16 +70,18 @@ func NewAnomalyRule(
 	id string,
 	orgID valuer.UUID,
 	p *ruletypes.PostableRule,
-	querier querier.Querier,
+	reader interfaces.Reader,
+	querierV5 querierV5.Querier,
 	logger *slog.Logger,
+	cache cache.Cache,
 	opts ...baserules.RuleOption,
 ) (*AnomalyRule, error) {
 
-	logger.Info("creating new AnomalyRule", slog.String("rule.id", id))
+	logger.Info("creating new AnomalyRule", "rule_id", id)
 
 	opts = append(opts, baserules.WithLogger(logger))
 
-	baseRule, err := baserules.NewBaseRule(id, orgID, p, opts...)
+	baseRule, err := baserules.NewBaseRule(id, orgID, p, reader, opts...)
 	if err != nil {
 		return nil, err
 	}
@@ -75,38 +101,93 @@ func NewAnomalyRule(
 		t.seasonality = anomaly.SeasonalityDaily
 	}
 
-	logger.Info("using seasonality", slog.String("rule.id", id), slog.String("rule.seasonality", t.seasonality.StringValue()))
+	logger.Info("using seasonality", "seasonality", t.seasonality.String())
 
+	querierOptsV2 := querierV2.QuerierOptions{
+		Reader:       reader,
+		Cache:        cache,
+		KeyGenerator: queryBuilder.NewKeyGenerator(),
+	}
+
+	t.querierV2 = querierV2.NewQuerier(querierOptsV2)
+	t.reader = reader
 	if t.seasonality == anomaly.SeasonalityHourly {
 		t.provider = anomaly.NewHourlyProvider(
-			anomaly.WithQuerier[*anomaly.HourlyProvider](querier),
-			anomaly.WithLogger[*anomaly.HourlyProvider](logger),
+			anomaly.WithCache[*anomaly.HourlyProvider](cache),
+			anomaly.WithKeyGenerator[*anomaly.HourlyProvider](queryBuilder.NewKeyGenerator()),
+			anomaly.WithReader[*anomaly.HourlyProvider](reader),
 		)
 	} else if t.seasonality == anomaly.SeasonalityDaily {
 		t.provider = anomaly.NewDailyProvider(
-			anomaly.WithQuerier[*anomaly.DailyProvider](querier),
-			anomaly.WithLogger[*anomaly.DailyProvider](logger),
+			anomaly.WithCache[*anomaly.DailyProvider](cache),
+			anomaly.WithKeyGenerator[*anomaly.DailyProvider](queryBuilder.NewKeyGenerator()),
+			anomaly.WithReader[*anomaly.DailyProvider](reader),
 		)
 	} else if t.seasonality == anomaly.SeasonalityWeekly {
 		t.provider = anomaly.NewWeeklyProvider(
-			anomaly.WithQuerier[*anomaly.WeeklyProvider](querier),
-			anomaly.WithLogger[*anomaly.WeeklyProvider](logger),
+			anomaly.WithCache[*anomaly.WeeklyProvider](cache),
+			anomaly.WithKeyGenerator[*anomaly.WeeklyProvider](queryBuilder.NewKeyGenerator()),
+			anomaly.WithReader[*anomaly.WeeklyProvider](reader),
 		)
 	}
 
-	t.querier = querier
+	if t.seasonality == anomaly.SeasonalityHourly {
+		t.providerV2 = anomalyV2.NewHourlyProvider(
+			anomalyV2.WithQuerier[*anomalyV2.HourlyProvider](querierV5),
+			anomalyV2.WithLogger[*anomalyV2.HourlyProvider](logger),
+		)
+	} else if t.seasonality == anomaly.SeasonalityDaily {
+		t.providerV2 = anomalyV2.NewDailyProvider(
+			anomalyV2.WithQuerier[*anomalyV2.DailyProvider](querierV5),
+			anomalyV2.WithLogger[*anomalyV2.DailyProvider](logger),
+		)
+	} else if t.seasonality == anomaly.SeasonalityWeekly {
+		t.providerV2 = anomalyV2.NewWeeklyProvider(
+			anomalyV2.WithQuerier[*anomalyV2.WeeklyProvider](querierV5),
+			anomalyV2.WithLogger[*anomalyV2.WeeklyProvider](logger),
+		)
+	}
+
+	t.querierV5 = querierV5
 	t.version = p.Version
 	t.logger = logger
 	return &t, nil
 }
 
 func (r *AnomalyRule) Type() ruletypes.RuleType {
-	return ruletypes.RuleTypeAnomaly
+	return RuleTypeAnomaly
 }
 
-func (r *AnomalyRule) prepareQueryRange(ctx context.Context, ts time.Time) *qbtypes.QueryRangeRequest {
+func (r *AnomalyRule) prepareQueryRange(ctx context.Context, ts time.Time) (*v3.QueryRangeParamsV3, error) {
 
-	r.logger.InfoContext(ctx, "prepare query range request", slog.String("rule.id", r.ID()), slog.Int64("ts", ts.UnixMilli()), slog.Int64("eval.window_ms", r.EvalWindow().Milliseconds()), slog.Int64("eval.delay_ms", r.EvalDelay().Milliseconds()))
+	r.logger.InfoContext(
+		ctx, "prepare query range request v4", "ts", ts.UnixMilli(), "eval_window", r.EvalWindow().Milliseconds(), "eval_delay", r.EvalDelay().Milliseconds(),
+	)
+
+	st, en := r.Timestamps(ts)
+	start := st.UnixMilli()
+	end := en.UnixMilli()
+
+	compositeQuery := r.Condition().CompositeQuery
+
+	if compositeQuery.PanelType != v3.PanelTypeGraph {
+		compositeQuery.PanelType = v3.PanelTypeGraph
+	}
+
+	// default mode
+	return &v3.QueryRangeParamsV3{
+		Start:          start,
+		End:            end,
+		Step:           int64(math.Max(float64(common.MinAllowedStepInterval(start, end)), 60)),
+		CompositeQuery: compositeQuery,
+		Variables:      make(map[string]interface{}, 0),
+		NoCache:        false,
+	}, nil
+}
+
+func (r *AnomalyRule) prepareQueryRangeV5(ctx context.Context, ts time.Time) (*qbtypes.QueryRangeRequest, error) {
+
+	r.logger.InfoContext(ctx, "prepare query range request v5", "ts", ts.UnixMilli(), "eval_window", r.EvalWindow().Milliseconds(), "eval_delay", r.EvalDelay().Milliseconds())
 
 	startTs, endTs := r.Timestamps(ts)
 	start, end := startTs.UnixMilli(), endTs.UnixMilli()
@@ -122,14 +203,25 @@ func (r *AnomalyRule) prepareQueryRange(ctx context.Context, ts time.Time) *qbty
 	}
 	req.CompositeQuery.Queries = make([]qbtypes.QueryEnvelope, len(r.Condition().CompositeQuery.Queries))
 	copy(req.CompositeQuery.Queries, r.Condition().CompositeQuery.Queries)
-	return req
+	return req, nil
+}
+
+func (r *AnomalyRule) GetSelectedQuery() string {
+	return r.Condition().GetSelectedQueryName()
 }
 
 func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, ts time.Time) (ruletypes.Vector, error) {
 
-	params := r.prepareQueryRange(ctx, ts)
+	params, err := r.prepareQueryRange(ctx, ts)
+	if err != nil {
+		return nil, err
+	}
+	err = r.PopulateTemporality(ctx, orgID, params)
+	if err != nil {
+		return nil, fmt.Errorf("internal error while setting temporality")
+	}
 
-	anomalies, err := r.provider.GetAnomalies(ctx, orgID, &anomaly.AnomaliesRequest{
+	anomalies, err := r.provider.GetAnomalies(ctx, orgID, &anomaly.GetAnomaliesRequest{
 		Params:      params,
 		Seasonality: r.seasonality,
 	})
@@ -137,43 +229,87 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 		return nil, err
 	}
 
-	var queryResult *qbtypes.TimeSeriesData
+	var queryResult *v3.Result
 	for _, result := range anomalies.Results {
-		if result.QueryName == r.SelectedQuery(ctx) {
+		if result.QueryName == r.GetSelectedQuery() {
 			queryResult = result
 			break
 		}
 	}
 
-	if queryResult == nil {
-		r.logger.WarnContext(ctx, "nil qb result", slog.String("rule.id", r.ID()), slog.Int64("ts", ts.UnixMilli()))
-		return ruletypes.Vector{}, nil
-	}
-
-	hasData := len(queryResult.Aggregations) > 0 &&
-		queryResult.Aggregations[0] != nil &&
-		len(queryResult.Aggregations[0].AnomalyScores) > 0
-
+	hasData := len(queryResult.AnomalyScores) > 0
 	if missingDataAlert := r.HandleMissingDataAlert(ctx, ts, hasData); missingDataAlert != nil {
 		return ruletypes.Vector{*missingDataAlert}, nil
-	} else if !hasData {
-		r.logger.WarnContext(ctx, "no anomaly result", slog.String("rule.id", r.ID()))
-		return ruletypes.Vector{}, nil
 	}
 
 	var resultVector ruletypes.Vector
 
-	scoresJSON, _ := json.Marshal(queryResult.Aggregations[0].AnomalyScores)
-	// TODO(srikanthccv): this could be noisy but we do this to answer false alert requests
-	r.logger.InfoContext(ctx, "anomaly scores", slog.String("rule.id", r.ID()), slog.String("anomaly.scores", string(scoresJSON)))
+	scoresJSON, _ := json.Marshal(queryResult.AnomalyScores)
+	r.logger.InfoContext(ctx, "anomaly scores", "scores", string(scoresJSON))
+
+	for _, series := range queryResult.AnomalyScores {
+		if !r.Condition().ShouldEval(series) {
+			r.logger.InfoContext(ctx, "not enough data points to evaluate series, skipping", "ruleid", r.ID(), "numPoints", len(series.Points), "requiredPoints", r.Condition().RequiredNumPoints)
+			continue
+		}
+		results, err := r.Threshold.Eval(*series, r.Unit(), ruletypes.EvalData{
+			ActiveAlerts:  r.ActiveAlertsLabelFP(),
+			SendUnmatched: r.ShouldSendUnmatched(),
+		})
+		if err != nil {
+			return nil, err
+		}
+		resultVector = append(resultVector, results...)
+	}
+	return resultVector, nil
+}
+
+func (r *AnomalyRule) buildAndRunQueryV5(ctx context.Context, orgID valuer.UUID, ts time.Time) (ruletypes.Vector, error) {
+
+	params, err := r.prepareQueryRangeV5(ctx, ts)
+	if err != nil {
+		return nil, err
+	}
+
+	anomalies, err := r.providerV2.GetAnomalies(ctx, orgID, &anomalyV2.AnomaliesRequest{
+		Params:      *params,
+		Seasonality: anomalyV2.Seasonality{String: valuer.NewString(r.seasonality.String())},
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	var qbResult *qbtypes.TimeSeriesData
+	for _, result := range anomalies.Results {
+		if result.QueryName == r.GetSelectedQuery() {
+			qbResult = result
+			break
+		}
+	}
+
+	if qbResult == nil {
+		r.logger.WarnContext(ctx, "nil qb result", "ts", ts.UnixMilli())
+	}
+
+	queryResult := transition.ConvertV5TimeSeriesDataToV4Result(qbResult)
+
+	hasData := len(queryResult.AnomalyScores) > 0
+	if missingDataAlert := r.HandleMissingDataAlert(ctx, ts, hasData); missingDataAlert != nil {
+		return ruletypes.Vector{*missingDataAlert}, nil
+	}
+
+	var resultVector ruletypes.Vector
+
+	scoresJSON, _ := json.Marshal(queryResult.AnomalyScores)
+	r.logger.InfoContext(ctx, "anomaly scores", "scores", string(scoresJSON))
 
 	// Filter out new series if newGroupEvalDelay is configured
-	seriesToProcess := queryResult.Aggregations[0].AnomalyScores
+	seriesToProcess := queryResult.AnomalyScores
 	if r.ShouldSkipNewGroups() {
 		filteredSeries, filterErr := r.BaseRule.FilterNewSeries(ctx, ts, seriesToProcess)
 		// In case of error we log the error and continue with the original series
 		if filterErr != nil {
-			r.logger.ErrorContext(ctx, "error filtering new series", slog.String("rule.id", r.ID()), errors.Attr(filterErr))
+			r.logger.ErrorContext(ctx, "Error filtering new series, ", errors.Attr(filterErr), "rule_name", r.Name())
 		} else {
 			seriesToProcess = filteredSeries
 		}
@@ -181,10 +317,10 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 
 	for _, series := range seriesToProcess {
 		if !r.Condition().ShouldEval(series) {
-			r.logger.InfoContext(ctx, "not enough data points to evaluate series, skipping", slog.String("rule.id", r.ID()), slog.Int("series.num_points", len(series.Values)), slog.Int("series.required_points", r.Condition().RequiredNumPoints))
+			r.logger.InfoContext(ctx, "not enough data points to evaluate series, skipping", "ruleid", r.ID(), "numPoints", len(series.Points), "requiredPoints", r.Condition().RequiredNumPoints)
 			continue
 		}
-		results, err := r.Threshold.Eval(series, r.Unit(), ruletypes.EvalData{
+		results, err := r.Threshold.Eval(*series, r.Unit(), ruletypes.EvalData{
 			ActiveAlerts:  r.ActiveAlertsLabelFP(),
 			SendUnmatched: r.ShouldSendUnmatched(),
 		})
@@ -205,9 +341,13 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 	var res ruletypes.Vector
 	var err error
 
-	r.logger.InfoContext(ctx, "running query", slog.String("rule.id", r.ID()))
-	res, err = r.buildAndRunQuery(ctx, r.OrgID(), ts)
-
+	if r.version == "v5" {
+		r.logger.InfoContext(ctx, "running v5 query")
+		res, err = r.buildAndRunQueryV5(ctx, r.OrgID(), ts)
+	} else {
+		r.logger.InfoContext(ctx, "running v4 query")
+		res, err = r.buildAndRunQuery(ctx, r.OrgID(), ts)
+	}
 	if err != nil {
 		return 0, err
 	}
@@ -231,7 +371,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		}
 		value := valueFormatter.Format(smpl.V, r.Unit())
 		threshold := valueFormatter.Format(smpl.Target, smpl.TargetUnit)
-		r.logger.DebugContext(ctx, "alert template data for rule", slog.String("rule.id", r.ID()), slog.String("formatter.name", valueFormatter.Name()), slog.String("alert.value", value), slog.String("alert.threshold", threshold))
+		r.logger.DebugContext(ctx, "Alert template data for rule", "rule_name", r.Name(), "formatter", valueFormatter.Name(), "value", value, "threshold", threshold)
 
 		tmplData := ruletypes.AlertTemplateData(l, value, threshold)
 		// Inject some convenience variables that are easier to remember for users
@@ -246,34 +386,35 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 				defs+text,
 				"__alert_"+r.Name(),
 				tmplData,
+				times.Time(timestamp.FromTime(ts)),
 				nil,
 			)
 			result, err := tmpl.Expand()
 			if err != nil {
 				result = fmt.Sprintf("<error expanding template: %s>", err)
-				r.logger.ErrorContext(ctx, "expanding alert template failed", slog.String("rule.id", r.ID()), errors.Attr(err), slog.Any("alert.template_data", tmplData))
+				r.logger.ErrorContext(ctx, "Expanding alert template failed", errors.Attr(err), "data", tmplData, "rule_name", r.Name())
 			}
 			return result
 		}
 
-		lb := ruletypes.NewBuilder(smpl.Metric...).Del(ruletypes.MetricNameLabel).Del(ruletypes.TemporalityLabel)
-		resultLabels := ruletypes.NewBuilder(smpl.Metric...).Del(ruletypes.MetricNameLabel).Del(ruletypes.TemporalityLabel).Labels()
+		lb := labels.NewBuilder(smpl.Metric).Del(labels.MetricNameLabel).Del(labels.TemporalityLabel)
+		resultLabels := labels.NewBuilder(smpl.Metric).Del(labels.MetricNameLabel).Del(labels.TemporalityLabel).Labels()
 
 		for name, value := range r.Labels().Map() {
 			lb.Set(name, expand(value))
 		}
 
-		lb.Set(ruletypes.AlertNameLabel, r.Name())
-		lb.Set(ruletypes.AlertRuleIDLabel, r.ID())
-		lb.Set(ruletypes.RuleSourceLabel, r.GeneratorURL())
+		lb.Set(labels.AlertNameLabel, r.Name())
+		lb.Set(labels.AlertRuleIdLabel, r.ID())
+		lb.Set(labels.RuleSourceLabel, r.GeneratorURL())
 
-		annotations := make(ruletypes.Labels, 0, len(r.Annotations().Map()))
+		annotations := make(labels.Labels, 0, len(r.Annotations().Map()))
 		for name, value := range r.Annotations().Map() {
-			annotations = append(annotations, ruletypes.Label{Name: name, Value: expand(value)})
+			annotations = append(annotations, labels.Label{Name: name, Value: expand(value)})
 		}
 		if smpl.IsMissing {
-			lb.Set(ruletypes.AlertNameLabel, "[No data] "+r.Name())
-			lb.Set(ruletypes.NoDataLabel, "true")
+			lb.Set(labels.AlertNameLabel, "[No data] "+r.Name())
+			lb.Set(labels.NoDataLabel, "true")
 		}
 
 		lbs := lb.Labels()
@@ -281,17 +422,17 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		resultFPs[h] = struct{}{}
 
 		if _, ok := alerts[h]; ok {
-			r.logger.ErrorContext(ctx, "the alert query returns duplicate records", slog.String("rule.id", r.ID()), slog.Any("alert", alerts[h]))
-			err = errors.NewInternalf(errors.CodeInternal, "duplicate alert found, vector contains metrics with the same labelset after applying alert labels")
+			r.logger.ErrorContext(ctx, "the alert query returns duplicate records", "rule_id", r.ID(), "alert", alerts[h])
+			err = fmt.Errorf("duplicate alert found, vector contains metrics with the same labelset after applying alert labels")
 			return 0, err
 		}
 
 		alerts[h] = &ruletypes.Alert{
 			Labels:            lbs,
-			QueryResultLabels: resultLabels,
+			QueryResultLables: resultLabels,
 			Annotations:       annotations,
 			ActiveAt:          ts,
-			State:             ruletypes.StatePending,
+			State:             model.StatePending,
 			Value:             smpl.V,
 			GeneratorURL:      r.GeneratorURL(),
 			Receivers:         ruleReceiverMap[lbs.Map()[ruletypes.LabelThresholdName]],
@@ -300,12 +441,12 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		}
 	}
 
-	r.logger.InfoContext(ctx, "number of alerts found", slog.String("rule.id", r.ID()), slog.Int("alert.count", len(alerts)))
+	r.logger.InfoContext(ctx, "number of alerts found", "rule_name", r.Name(), "alerts_count", len(alerts))
 	// alerts[h] is ready, add or update active list now
 	for h, a := range alerts {
 		// Check whether we already have alerting state for the identifying label set.
 		// Update the last value and annotations if so, create a new alert entry otherwise.
-		if alert, ok := r.Active[h]; ok && alert.State != ruletypes.StateInactive {
+		if alert, ok := r.Active[h]; ok && alert.State != model.StateInactive {
 
 			alert.Value = a.Value
 			alert.Annotations = a.Annotations
@@ -321,76 +462,76 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		r.Active[h] = a
 	}
 
-	itemsToAdd := []rulestatehistorytypes.RuleStateHistory{}
+	itemsToAdd := []model.RuleStateHistory{}
 
 	// Check if any pending alerts should be removed or fire now. Write out alert timeseries.
 	for fp, a := range r.Active {
-		labelsJSON, err := json.Marshal(a.QueryResultLabels)
+		labelsJSON, err := json.Marshal(a.QueryResultLables)
 		if err != nil {
-			r.logger.ErrorContext(ctx, "error marshaling labels", slog.String("rule.id", r.ID()), errors.Attr(err), slog.Any("alert.labels", a.Labels))
+			r.logger.ErrorContext(ctx, "error marshaling labels", errors.Attr(err), "labels", a.Labels)
 		}
 		if _, ok := resultFPs[fp]; !ok {
 			// If the alert was previously firing, keep it around for a given
 			// retention time so it is reported as resolved to the AlertManager.
-			if a.State == ruletypes.StatePending || (!a.ResolvedAt.IsZero() && ts.Sub(a.ResolvedAt) > ruletypes.ResolvedRetention) {
+			if a.State == model.StatePending || (!a.ResolvedAt.IsZero() && ts.Sub(a.ResolvedAt) > ruletypes.ResolvedRetention) {
 				delete(r.Active, fp)
 			}
-			if a.State != ruletypes.StateInactive {
-				a.State = ruletypes.StateInactive
+			if a.State != model.StateInactive {
+				a.State = model.StateInactive
 				a.ResolvedAt = ts
-				itemsToAdd = append(itemsToAdd, rulestatehistorytypes.RuleStateHistory{
+				itemsToAdd = append(itemsToAdd, model.RuleStateHistory{
 					RuleID:       r.ID(),
 					RuleName:     r.Name(),
-					State:        ruletypes.StateInactive,
+					State:        model.StateInactive,
 					StateChanged: true,
 					UnixMilli:    ts.UnixMilli(),
-					Labels:       rulestatehistorytypes.LabelsString(labelsJSON),
-					Fingerprint:  a.QueryResultLabels.Hash(),
+					Labels:       model.LabelsString(labelsJSON),
+					Fingerprint:  a.QueryResultLables.Hash(),
 					Value:        a.Value,
 				})
 			}
 			continue
 		}
 
-		if a.State == ruletypes.StatePending && ts.Sub(a.ActiveAt) >= r.HoldDuration().Duration() {
-			a.State = ruletypes.StateFiring
+		if a.State == model.StatePending && ts.Sub(a.ActiveAt) >= r.HoldDuration().Duration() {
+			a.State = model.StateFiring
 			a.FiredAt = ts
-			state := ruletypes.StateFiring
+			state := model.StateFiring
 			if a.Missing {
-				state = ruletypes.StateNoData
+				state = model.StateNoData
 			}
-			itemsToAdd = append(itemsToAdd, rulestatehistorytypes.RuleStateHistory{
+			itemsToAdd = append(itemsToAdd, model.RuleStateHistory{
 				RuleID:       r.ID(),
 				RuleName:     r.Name(),
 				State:        state,
 				StateChanged: true,
 				UnixMilli:    ts.UnixMilli(),
-				Labels:       rulestatehistorytypes.LabelsString(labelsJSON),
-				Fingerprint:  a.QueryResultLabels.Hash(),
+				Labels:       model.LabelsString(labelsJSON),
+				Fingerprint:  a.QueryResultLables.Hash(),
 				Value:        a.Value,
 			})
 		}
 
 		// We need to change firing alert to recovering if the returned sample meets recovery threshold
-		changeFiringToRecovering := a.State == ruletypes.StateFiring && a.IsRecovering
+		changeFiringToRecovering := a.State == model.StateFiring && a.IsRecovering
 		// We need to change recovering alerts to firing if the returned sample meets target threshold
-		changeRecoveringToFiring := a.State == ruletypes.StateRecovering && !a.IsRecovering && !a.Missing
+		changeRecoveringToFiring := a.State == model.StateRecovering && !a.IsRecovering && !a.Missing
 		// in any of the above case we need to update the status of alert
 		if changeFiringToRecovering || changeRecoveringToFiring {
-			state := ruletypes.StateRecovering
+			state := model.StateRecovering
 			if changeRecoveringToFiring {
-				state = ruletypes.StateFiring
+				state = model.StateFiring
 			}
 			a.State = state
-			r.logger.DebugContext(ctx, "converting alert state", slog.String("rule.id", r.ID()), slog.Any("alert.state", state))
-			itemsToAdd = append(itemsToAdd, rulestatehistorytypes.RuleStateHistory{
+			r.logger.DebugContext(ctx, "converting alert state", "name", r.Name(), "state", state)
+			itemsToAdd = append(itemsToAdd, model.RuleStateHistory{
 				RuleID:       r.ID(),
 				RuleName:     r.Name(),
 				State:        state,
 				StateChanged: true,
 				UnixMilli:    ts.UnixMilli(),
-				Labels:       rulestatehistorytypes.LabelsString(labelsJSON),
-				Fingerprint:  a.QueryResultLabels.Hash(),
+				Labels:       model.LabelsString(labelsJSON),
+				Fingerprint:  a.QueryResultLables.Hash(),
 				Value:        a.Value,
 			})
 		}

ee/query-service/rules/anomaly_test.go

@@ -2,19 +2,21 @@ package rules
 
 import (
 	"context"
+	"log/slog"
 	"testing"
 	"time"
 
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 
+	"github.com/SigNoz/signoz/ee/query-service/anomaly"
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
-	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader"
+	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
+	"github.com/SigNoz/signoz/pkg/telemetrystore"
+	"github.com/SigNoz/signoz/pkg/telemetrystore/telemetrystoretest"
 	"github.com/SigNoz/signoz/pkg/types/ruletypes"
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-
-	"github.com/SigNoz/signoz/ee/anomaly"
 )
 
 // mockAnomalyProvider is a mock implementation of anomaly.Provider for testing.
@@ -22,13 +24,13 @@ import (
 // time periods (current, past period, current season, past season, past 2 seasons,
 // past 3 seasons), making it cumbersome to create mock data.
 type mockAnomalyProvider struct {
-	responses []*anomaly.AnomaliesResponse
+	responses []*anomaly.GetAnomaliesResponse
 	callCount int
 }
 
-func (m *mockAnomalyProvider) GetAnomalies(ctx context.Context, orgID valuer.UUID, req *anomaly.AnomaliesRequest) (*anomaly.AnomaliesResponse, error) {
+func (m *mockAnomalyProvider) GetAnomalies(ctx context.Context, orgID valuer.UUID, req *anomaly.GetAnomaliesRequest) (*anomaly.GetAnomaliesResponse, error) {
 	if m.callCount >= len(m.responses) {
-		return &anomaly.AnomaliesResponse{Results: []*qbtypes.TimeSeriesData{}}, nil
+		return &anomaly.GetAnomaliesResponse{Results: []*v3.Result{}}, nil
 	}
 	resp := m.responses[m.callCount]
 	m.callCount++
@@ -47,46 +49,45 @@ func TestAnomalyRule_NoData_AlertOnAbsent(t *testing.T) {
 	postableRule := ruletypes.PostableRule{
 		AlertName: "Test anomaly no data",
 		AlertType: ruletypes.AlertTypeMetric,
-		RuleType:  ruletypes.RuleTypeAnomaly,
+		RuleType:  RuleTypeAnomaly,
 		Evaluation: &ruletypes.EvaluationEnvelope{Kind: ruletypes.RollingEvaluation, Spec: ruletypes.RollingWindow{
 			EvalWindow: evalWindow,
 			Frequency:  valuer.MustParseTextDuration("1m"),
 		}},
 		RuleCondition: &ruletypes.RuleCondition{
-			CompareOperator: ruletypes.ValueIsAbove,
-			MatchType:       ruletypes.AtleastOnce,
-			Target:          &target,
-			CompositeQuery: &ruletypes.AlertCompositeQuery{
-				QueryType: ruletypes.QueryTypeBuilder,
-				Queries: []qbtypes.QueryEnvelope{{
-					Type: qbtypes.QueryTypeBuilder,
-					Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
-						Name:   "A",
-						Signal: telemetrytypes.SignalMetrics,
+			CompareOp: ruletypes.ValueIsAbove,
+			MatchType: ruletypes.AtleastOnce,
+			Target:    &target,
+			CompositeQuery: &v3.CompositeQuery{
+				QueryType: v3.QueryTypeBuilder,
+				BuilderQueries: map[string]*v3.BuilderQuery{
+					"A": {
+						QueryName:   "A",
+						Expression:  "A",
+						DataSource:  v3.DataSourceMetrics,
+						Temporality: v3.Unspecified,
 					},
-				}},
+				},
 			},
 			SelectedQuery: "A",
 			Seasonality:   "daily",
 			Thresholds: &ruletypes.RuleThresholdData{
 				Kind: ruletypes.BasicThresholdKind,
 				Spec: ruletypes.BasicRuleThresholds{{
-					Name:            "Test anomaly no data",
-					TargetValue:     &target,
-					MatchType:       ruletypes.AtleastOnce,
-					CompareOperator: ruletypes.ValueIsAbove,
+					Name:        "Test anomaly no data",
+					TargetValue: &target,
+					MatchType:   ruletypes.AtleastOnce,
+					CompareOp:   ruletypes.ValueIsAbove,
 				}},
 			},
 		},
 	}
 
-	responseNoData := &anomaly.AnomaliesResponse{
-		Results: []*qbtypes.TimeSeriesData{
+	responseNoData := &anomaly.GetAnomaliesResponse{
+		Results: []*v3.Result{
 			{
-				QueryName: "A",
-				Aggregations: []*qbtypes.AggregationBucket{{
-					AnomalyScores: []*qbtypes.TimeSeries{},
-				}},
+				QueryName:     "A",
+				AnomalyScores: []*v3.Series{},
 			},
 		},
 	}
@@ -114,17 +115,23 @@ func TestAnomalyRule_NoData_AlertOnAbsent(t *testing.T) {
 		t.Run(c.description, func(t *testing.T) {
 			postableRule.RuleCondition.AlertOnAbsent = c.alertOnAbsent
 
+			telemetryStore := telemetrystoretest.New(telemetrystore.Config{}, nil)
+			options := clickhouseReader.NewOptions("primaryNamespace")
+			reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, nil, "", time.Second, nil, nil, options)
+
 			rule, err := NewAnomalyRule(
 				"test-anomaly-rule",
 				valuer.GenerateUUID(),
 				&postableRule,
+				reader,
 				nil,
 				logger,
+				nil,
 			)
 			require.NoError(t, err)
 
 			rule.provider = &mockAnomalyProvider{
-				responses: []*anomaly.AnomaliesResponse{responseNoData},
+				responses: []*anomaly.GetAnomaliesResponse{responseNoData},
 			}
 
 			alertsFound, err := rule.Eval(context.Background(), evalTime)
@@ -149,47 +156,46 @@ func TestAnomalyRule_NoData_AbsentFor(t *testing.T) {
 	postableRule := ruletypes.PostableRule{
 		AlertName: "Test anomaly no data with AbsentFor",
 		AlertType: ruletypes.AlertTypeMetric,
-		RuleType:  ruletypes.RuleTypeAnomaly,
+		RuleType:  RuleTypeAnomaly,
 		Evaluation: &ruletypes.EvaluationEnvelope{Kind: ruletypes.RollingEvaluation, Spec: ruletypes.RollingWindow{
 			EvalWindow: evalWindow,
 			Frequency:  valuer.MustParseTextDuration("1m"),
 		}},
 		RuleCondition: &ruletypes.RuleCondition{
-			CompareOperator: ruletypes.ValueIsAbove,
-			MatchType:       ruletypes.AtleastOnce,
-			AlertOnAbsent:   true,
-			Target:          &target,
-			CompositeQuery: &ruletypes.AlertCompositeQuery{
-				QueryType: ruletypes.QueryTypeBuilder,
-				Queries: []qbtypes.QueryEnvelope{{
-					Type: qbtypes.QueryTypeBuilder,
-					Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
-						Name:   "A",
-						Signal: telemetrytypes.SignalMetrics,
+			CompareOp:     ruletypes.ValueIsAbove,
+			MatchType:     ruletypes.AtleastOnce,
+			AlertOnAbsent: true,
+			Target:        &target,
+			CompositeQuery: &v3.CompositeQuery{
+				QueryType: v3.QueryTypeBuilder,
+				BuilderQueries: map[string]*v3.BuilderQuery{
+					"A": {
+						QueryName:   "A",
+						Expression:  "A",
+						DataSource:  v3.DataSourceMetrics,
+						Temporality: v3.Unspecified,
 					},
-				}},
+				},
 			},
 			SelectedQuery: "A",
 			Seasonality:   "daily",
 			Thresholds: &ruletypes.RuleThresholdData{
 				Kind: ruletypes.BasicThresholdKind,
 				Spec: ruletypes.BasicRuleThresholds{{
-					Name:            "Test anomaly no data with AbsentFor",
-					TargetValue:     &target,
-					MatchType:       ruletypes.AtleastOnce,
-					CompareOperator: ruletypes.ValueIsAbove,
+					Name:        "Test anomaly no data with AbsentFor",
+					TargetValue: &target,
+					MatchType:   ruletypes.AtleastOnce,
+					CompareOp:   ruletypes.ValueIsAbove,
 				}},
 			},
 		},
 	}
 
-	responseNoData := &anomaly.AnomaliesResponse{
-		Results: []*qbtypes.TimeSeriesData{
+	responseNoData := &anomaly.GetAnomaliesResponse{
+		Results: []*v3.Result{
 			{
-				QueryName: "A",
-				Aggregations: []*qbtypes.AggregationBucket{{
-					AnomalyScores: []*qbtypes.TimeSeries{},
-				}},
+				QueryName:     "A",
+				AnomalyScores: []*v3.Series{},
 			},
 		},
 	}
@@ -223,35 +229,32 @@ func TestAnomalyRule_NoData_AbsentFor(t *testing.T) {
 			t1 := baseTime.Add(5 * time.Minute)
 			t2 := t1.Add(c.timeBetweenEvals)
 
-			responseWithData := &anomaly.AnomaliesResponse{
-				Results: []*qbtypes.TimeSeriesData{
+			responseWithData := &anomaly.GetAnomaliesResponse{
+				Results: []*v3.Result{
 					{
 						QueryName: "A",
-						Aggregations: []*qbtypes.AggregationBucket{{
-							AnomalyScores: []*qbtypes.TimeSeries{
-								{
-									Labels: []*qbtypes.Label{
-										{
-											Key:   telemetrytypes.TelemetryFieldKey{Name: "Test"},
-											Value: "labels",
-										},
-									},
-									Values: []*qbtypes.TimeSeriesValue{
-										{Timestamp: baseTime.UnixMilli(), Value: 1.0},
-										{Timestamp: baseTime.Add(time.Minute).UnixMilli(), Value: 1.5},
-									},
+						AnomalyScores: []*v3.Series{
+							{
+								Labels: map[string]string{"test": "label"},
+								Points: []v3.Point{
+									{Timestamp: baseTime.UnixMilli(), Value: 1.0},
+									{Timestamp: baseTime.Add(time.Minute).UnixMilli(), Value: 1.5},
 								},
 							},
-						}},
+						},
 					},
 				},
 			}
 
-			rule, err := NewAnomalyRule("test-anomaly-rule", valuer.GenerateUUID(), &postableRule, nil, logger)
+			telemetryStore := telemetrystoretest.New(telemetrystore.Config{}, nil)
+			options := clickhouseReader.NewOptions("primaryNamespace")
+			reader := clickhouseReader.NewReader(slog.Default(), nil, telemetryStore, nil, "", time.Second, nil, nil, options)
+
+			rule, err := NewAnomalyRule("test-anomaly-rule", valuer.GenerateUUID(), &postableRule, reader, nil, logger, nil)
 			require.NoError(t, err)
 
 			rule.provider = &mockAnomalyProvider{
-				responses: []*anomaly.AnomaliesResponse{responseWithData, responseNoData},
+				responses: []*anomaly.GetAnomaliesResponse{responseWithData, responseNoData},
 			}
 
 			alertsFound1, err := rule.Eval(context.Background(), t1)

ee/query-service/rules/manager.go

@@ -11,7 +11,9 @@ import (
 	"github.com/google/uuid"
 
 	"github.com/SigNoz/signoz/pkg/errors"
+	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
+	"github.com/SigNoz/signoz/pkg/query-service/utils/labels"
 	"github.com/SigNoz/signoz/pkg/types/ruletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
@@ -21,7 +23,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 	rules := make([]baserules.Rule, 0)
 	var task baserules.Task
 
-	ruleID := baserules.RuleIDFromTaskName(opts.TaskName)
+	ruleId := baserules.RuleIdFromTaskName(opts.TaskName)
 	evaluation, err := opts.Rule.Evaluation.GetEvaluation()
 	if err != nil {
 		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "evaluation is invalid: %v", err)
@@ -30,9 +32,10 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 	if opts.Rule.RuleType == ruletypes.RuleTypeThreshold {
 		// create a threshold rule
 		tr, err := baserules.NewThresholdRule(
-			ruleID,
+			ruleId,
 			opts.OrgID,
 			opts.Rule,
+			opts.Reader,
 			opts.Querier,
 			opts.Logger,
 			baserules.WithEvalDelay(opts.ManagerOpts.EvalDelay),
@@ -55,10 +58,11 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 
 		// create promql rule
 		pr, err := baserules.NewPromRule(
-			ruleID,
+			ruleId,
 			opts.OrgID,
 			opts.Rule,
 			opts.Logger,
+			opts.Reader,
 			opts.ManagerOpts.Prometheus,
 			baserules.WithSQLStore(opts.SQLStore),
 			baserules.WithQueryParser(opts.ManagerOpts.QueryParser),
@@ -78,11 +82,13 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 	} else if opts.Rule.RuleType == ruletypes.RuleTypeAnomaly {
 		// create anomaly rule
 		ar, err := NewAnomalyRule(
-			ruleID,
+			ruleId,
 			opts.OrgID,
 			opts.Rule,
+			opts.Reader,
 			opts.Querier,
 			opts.Logger,
+			opts.Cache,
 			baserules.WithEvalDelay(opts.ManagerOpts.EvalDelay),
 			baserules.WithSQLStore(opts.SQLStore),
 			baserules.WithQueryParser(opts.ManagerOpts.QueryParser),
@@ -99,7 +105,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		task = newTask(baserules.TaskTypeCh, opts.TaskName, evaluation.GetFrequency().Duration(), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else {
-		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "unsupported rule type %s. Supported types: %s, %s", opts.Rule.RuleType, ruletypes.RuleTypeProm, ruletypes.RuleTypeThreshold)
+		return nil, fmt.Errorf("unsupported rule type %s. Supported types: %s, %s", opts.Rule.RuleType, ruletypes.RuleTypeProm, ruletypes.RuleTypeThreshold)
 	}
 
 	return task, nil
@@ -107,12 +113,12 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 
 // TestNotification prepares a dummy rule for given rule parameters and
 // sends a test notification. returns alert count and error (if any)
-func TestNotification(opts baserules.PrepareTestRuleOptions) (int, error) {
+func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.ApiError) {
 
 	ctx := context.Background()
 
 	if opts.Rule == nil {
-		return 0, errors.NewInvalidInputf(errors.CodeInvalidInput, "rule is required")
+		return 0, basemodel.BadRequest(fmt.Errorf("rule is required"))
 	}
 
 	parsedRule := opts.Rule
@@ -132,14 +138,15 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, error) {
 	if parsedRule.RuleType == ruletypes.RuleTypeThreshold {
 
 		// add special labels for test alerts
-		parsedRule.Labels[ruletypes.RuleSourceLabel] = ""
-		parsedRule.Labels[ruletypes.AlertRuleIDLabel] = ""
+		parsedRule.Labels[labels.RuleSourceLabel] = ""
+		parsedRule.Labels[labels.AlertRuleIdLabel] = ""
 
 		// create a threshold rule
 		rule, err = baserules.NewThresholdRule(
 			alertname,
 			opts.OrgID,
 			parsedRule,
+			opts.Reader,
 			opts.Querier,
 			opts.Logger,
 			baserules.WithSendAlways(),
@@ -151,7 +158,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, error) {
 
 		if err != nil {
 			slog.Error("failed to prepare a new threshold rule for test", "name", alertname, errors.Attr(err))
-			return 0, err
+			return 0, basemodel.BadRequest(err)
 		}
 
 	} else if parsedRule.RuleType == ruletypes.RuleTypeProm {
@@ -162,6 +169,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, error) {
 			opts.OrgID,
 			parsedRule,
 			opts.Logger,
+			opts.Reader,
 			opts.ManagerOpts.Prometheus,
 			baserules.WithSendAlways(),
 			baserules.WithSendUnmatched(),
@@ -172,7 +180,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, error) {
 
 		if err != nil {
 			slog.Error("failed to prepare a new promql rule for test", "name", alertname, errors.Attr(err))
-			return 0, err
+			return 0, basemodel.BadRequest(err)
 		}
 	} else if parsedRule.RuleType == ruletypes.RuleTypeAnomaly {
 		// create anomaly rule
@@ -180,8 +188,10 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, error) {
 			alertname,
 			opts.OrgID,
 			parsedRule,
+			opts.Reader,
 			opts.Querier,
 			opts.Logger,
+			opts.Cache,
 			baserules.WithSendAlways(),
 			baserules.WithSendUnmatched(),
 			baserules.WithSQLStore(opts.SQLStore),
@@ -190,10 +200,10 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, error) {
 		)
 		if err != nil {
 			slog.Error("failed to prepare a new anomaly rule for test", "name", alertname, errors.Attr(err))
-			return 0, err
+			return 0, basemodel.BadRequest(err)
 		}
 	} else {
-		return 0, errors.NewInvalidInputf(errors.CodeInvalidInput, "failed to derive ruletype with given information")
+		return 0, basemodel.BadRequest(fmt.Errorf("failed to derive ruletype with given information"))
 	}
 
 	// set timestamp to current utc time
@@ -202,7 +212,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, error) {
 	alertsFound, err := rule.Eval(ctx, ts)
 	if err != nil {
 		slog.Error("evaluating rule failed", "rule", rule.Name(), errors.Attr(err))
-		return 0, err
+		return 0, basemodel.InternalError(fmt.Errorf("rule evaluation failed"))
 	}
 	rule.SendAlerts(ctx, ts, 0, time.Minute, opts.NotifyFunc)
 

ee/query-service/rules/manager_test.go

@@ -114,8 +114,11 @@ func TestManager_TestNotification_SendUnmatched_ThresholdRule(t *testing.T) {
 				},
 			})
 
-			count, err := mgr.TestNotification(context.Background(), orgID, string(ruleBytes))
-			require.Nil(t, err)
+			count, apiErr := mgr.TestNotification(context.Background(), orgID, string(ruleBytes))
+			if apiErr != nil {
+				t.Logf("TestNotification error: %v, type: %s", apiErr.Err, apiErr.Typ)
+			}
+			require.Nil(t, apiErr)
 			assert.Equal(t, tc.ExpectAlerts, count)
 
 			if tc.ExpectAlerts > 0 {
@@ -265,8 +268,11 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 				},
 			})
 
-			count, err := mgr.TestNotification(context.Background(), orgID, string(ruleBytes))
-			require.Nil(t, err)
+			count, apiErr := mgr.TestNotification(context.Background(), orgID, string(ruleBytes))
+			if apiErr != nil {
+				t.Logf("TestNotification error: %v, type: %s", apiErr.Err, apiErr.Typ)
+			}
+			require.Nil(t, apiErr)
 			assert.Equal(t, tc.ExpectAlerts, count)
 
 			if tc.ExpectAlerts > 0 {

frontend/index.html

@@ -62,29 +62,6 @@
 		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
 	</head>
 	<body data-theme="default">
-		<script>
-			// Apply theme class synchronously before React renders to prevent flash.
-			// Mirrors the logic in ThemeProvider (hooks/useDarkMode/index.tsx).
-			(function () {
-				try {
-					var theme = localStorage.getItem('THEME');
-					var autoSwitch = localStorage.getItem('THEME_AUTO_SWITCH') === 'true';
-					if (autoSwitch) {
-						theme = window.matchMedia('(prefers-color-scheme: dark)').matches
-							? 'dark'
-							: 'light';
-					}
-					if (theme === 'light') {
-						document.body.classList.add('lightMode');
-					} else {
-						// Default to dark when no preference is stored
-						document.body.classList.add('dark', 'darkMode');
-					}
-				} catch (e) {
-					document.body.classList.add('dark', 'darkMode');
-				}
-			})();
-		</script>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
 

frontend/package.json

@@ -47,13 +47,14 @@
     "@radix-ui/react-tooltip": "1.0.7",
     "@sentry/react": "8.41.0",
     "@sentry/vite-plugin": "2.22.6",
+    "@signozhq/badge": "0.0.2",
     "@signozhq/button": "0.0.2",
     "@signozhq/calendar": "0.0.0",
     "@signozhq/callout": "0.0.2",
     "@signozhq/checkbox": "0.0.2",
     "@signozhq/combobox": "0.0.2",
     "@signozhq/command": "0.0.0",
-    "@signozhq/design-tokens": "2.1.4",
+    "@signozhq/design-tokens": "2.1.1",
     "@signozhq/dialog": "^0.0.2",
     "@signozhq/drawer": "0.0.4",
     "@signozhq/icons": "0.1.0",
@@ -65,9 +66,10 @@
     "@signozhq/switch": "0.0.2",
     "@signozhq/table": "0.3.7",
     "@signozhq/toggle-group": "0.0.1",
+    "@signozhq/tooltip": "0.0.2",
     "@signozhq/ui": "0.0.5",
-    "@tanstack/react-table": "8.21.3",
-    "@tanstack/react-virtual": "3.13.22",
+    "@tanstack/react-table": "8.20.6",
+    "@tanstack/react-virtual": "3.11.2",
     "@uiw/codemirror-theme-copilot": "4.23.11",
     "@uiw/codemirror-theme-github": "4.24.1",
     "@uiw/react-codemirror": "4.23.10",

frontend/src/AppRoutes/Private.tsx

@@ -1,8 +1,9 @@
 import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
 import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import { useListUsers } from 'api/generated/services/users';
+import getAll from 'api/v1/user/get';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
@@ -11,9 +12,12 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import history from 'lib/history';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
+import { SuccessResponseV2 } from 'types/api';
+import APIError from 'types/api/error';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
 import { Organization } from 'types/api/user/getOrganization';
+import { UserResponse } from 'types/api/user/getUser';
 import { USER_ROLES } from 'types/roles';
 import { routePermission } from 'utils/permission';
 
@@ -59,10 +63,18 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 
 	const [orgData, setOrgData] = useState<Organization | undefined>(undefined);
 
-	const { data: usersData, isFetching: isFetchingUsers } = useListUsers({
-		query: {
-			enabled: !isEmpty(orgData) && user.role === 'ADMIN',
+	const { data: usersData, isFetching: isFetchingUsers } = useQuery<
+		SuccessResponseV2<UserResponse[]> | undefined,
+		APIError
+	>({
+		queryFn: () => {
+			if (orgData && orgData.id !== undefined) {
+				return getAll();
+			}
+			return undefined;
 		},
+		queryKey: ['getOrgUser'],
+		enabled: !isEmpty(orgData) && user.role === 'ADMIN',
 	});
 
 	const checkFirstTimeUser = useCallback((): boolean => {

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -67,12 +67,9 @@ jest.mock('hooks/useGetTenantLicense', () => ({
 
 // Mock react-query for users fetch
 let mockUsersData: { email: string }[] = [];
-jest.mock('api/generated/services/users', () => ({
-	...jest.requireActual('api/generated/services/users'),
-	useListUsers: jest.fn(() => ({
-		data: { data: mockUsersData },
-		isFetching: false,
-	})),
+jest.mock('api/v1/user/get', () => ({
+	__esModule: true,
+	default: jest.fn(() => Promise.resolve({ data: mockUsersData })),
 }));
 
 const queryClient = new QueryClient({

frontend/src/api/generated/services/cloudintegration/index.ts

@@ -628,6 +628,103 @@ export const useUpdateAccount = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint updates a service for the specified cloud provider
+ * @summary Update service
+ */
+export const updateService = (
+	{ cloudProvider, id, serviceId }: UpdateServicePathParameters,
+	cloudintegrationtypesUpdatableServiceDTO: BodyType<CloudintegrationtypesUpdatableServiceDTO>,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: cloudintegrationtypesUpdatableServiceDTO,
+	});
+};
+
+export const getUpdateServiceMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateService>>,
+		TError,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateService>>,
+	TError,
+	{
+		pathParams: UpdateServicePathParameters;
+		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateService'];
+	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 updateService>>,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateService(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateServiceMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateService>>
+>;
+export type UpdateServiceMutationBody = BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update service
+ */
+export const useUpdateService = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateService>>,
+		TError,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateService>>,
+	TError,
+	{
+		pathParams: UpdateServicePathParameters;
+		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getUpdateServiceMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
 /**
  * This endpoint is called by the deployed agent to check in
  * @summary Agent check-in
@@ -941,101 +1038,3 @@ export const invalidateGetService = async (
 
 	return queryClient;
 };
-
-/**
- * This endpoint updates a service for the specified cloud provider
- * @summary Update service
- */
-export const updateService = (
-	{ cloudProvider, serviceId }: UpdateServicePathParameters,
-	cloudintegrationtypesUpdatableServiceDTO: BodyType<CloudintegrationtypesUpdatableServiceDTO>,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesUpdatableServiceDTO,
-	});
-};
-
-export const getUpdateServiceMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateService>>,
-		TError,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateService>>,
-	TError,
-	{
-		pathParams: UpdateServicePathParameters;
-		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateService'];
-	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 updateService>>,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateService(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateServiceMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateService>>
->;
-export type UpdateServiceMutationBody = BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update service
- */
-export const useUpdateService = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateService>>,
-		TError,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateService>>,
-	TError,
-	{
-		pathParams: UpdateServicePathParameters;
-		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateServiceMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -425,6 +425,39 @@ export interface AuthtypesSessionContextDTO {
 	orgs?: AuthtypesOrgSessionContextDTO[] | null;
 }
 
+export interface AuthtypesStorableRoleDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: Date;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	orgId?: string;
+	/**
+	 * @type string
+	 */
+	type?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: Date;
+}
+
 export interface AuthtypesTransactionDTO {
 	object: AuthtypesObjectDTO;
 	/**
@@ -442,25 +475,25 @@ export interface AuthtypesUserRoleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	createdAt: Date;
+	createdAt?: Date;
 	/**
 	 * @type string
 	 */
 	id: string;
-	role: AuthtypesRoleDTO;
+	role?: AuthtypesStorableRoleDTO;
 	/**
 	 * @type string
 	 */
-	roleId: string;
+	roleId?: string;
 	/**
 	 * @type string
 	 * @format date-time
 	 */
-	updatedAt: Date;
+	updatedAt?: Date;
 	/**
 	 * @type string
 	 */
-	userId: string;
+	userId?: string;
 }
 
 export interface AuthtypesUserWithRolesDTO {
@@ -517,12 +550,12 @@ export type CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets = {
 };
 
 export interface CloudintegrationtypesAWSCollectionStrategyDTO {
-	aws_logs?: CloudintegrationtypesAWSLogsStrategyDTO;
-	aws_metrics?: CloudintegrationtypesAWSMetricsStrategyDTO;
+	logs?: CloudintegrationtypesAWSLogsStrategyDTO;
+	metrics?: CloudintegrationtypesAWSMetricsStrategyDTO;
 	/**
 	 * @type object
 	 */
-	s3_buckets?: CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets;
+	s3Buckets?: CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets;
 }
 
 export interface CloudintegrationtypesAWSConnectionArtifactDTO {
@@ -555,11 +588,11 @@ export type CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsIt
 	/**
 	 * @type string
 	 */
-	filter_pattern?: string;
+	filterPattern?: string;
 	/**
 	 * @type string
 	 */
-	log_group_name_prefix?: string;
+	logGroupNamePrefix?: string;
 };
 
 export interface CloudintegrationtypesAWSLogsStrategyDTO {
@@ -567,7 +600,7 @@ export interface CloudintegrationtypesAWSLogsStrategyDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	cloudwatch_logs_subscriptions?:
+	cloudwatchLogsSubscriptions?:
 		| CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem[]
 		| null;
 }
@@ -588,7 +621,7 @@ export interface CloudintegrationtypesAWSMetricsStrategyDTO {
 	 * @type array
 	 * @nullable true
 	 */
-	cloudwatch_metric_stream_filters?:
+	cloudwatchMetricStreamFilters?:
 		| CloudintegrationtypesAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem[]
 		| null;
 }
@@ -693,6 +726,32 @@ export interface CloudintegrationtypesAssetsDTO {
 	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
 }
 
+/**
+ * @nullable
+ */
+export type CloudintegrationtypesCloudIntegrationServiceDTO = {
+	/**
+	 * @type string
+	 */
+	cloudIntegrationId?: string;
+	config?: CloudintegrationtypesServiceConfigDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: Date;
+	/**
+	 * @type string
+	 */
+	id: string;
+	type?: CloudintegrationtypesServiceIDDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: Date;
+} | null;
+
 export interface CloudintegrationtypesCollectedLogAttributeDTO {
 	/**
 	 * @type string
@@ -831,9 +890,68 @@ export type CloudintegrationtypesIntegrationConfigDTO = {
 	 * @type array
 	 */
 	enabled_regions: string[];
-	telemetry: CloudintegrationtypesAWSCollectionStrategyDTO;
+	telemetry: CloudintegrationtypesOldAWSCollectionStrategyDTO;
 } | null;
 
+export type CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets = {
+	[key: string]: string[];
+};
+
+export interface CloudintegrationtypesOldAWSCollectionStrategyDTO {
+	aws_logs?: CloudintegrationtypesOldAWSLogsStrategyDTO;
+	aws_metrics?: CloudintegrationtypesOldAWSMetricsStrategyDTO;
+	/**
+	 * @type string
+	 */
+	provider?: string;
+	/**
+	 * @type object
+	 */
+	s3_buckets?: CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets;
+}
+
+export type CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem = {
+	/**
+	 * @type string
+	 */
+	filter_pattern?: string;
+	/**
+	 * @type string
+	 */
+	log_group_name_prefix?: string;
+};
+
+export interface CloudintegrationtypesOldAWSLogsStrategyDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	cloudwatch_logs_subscriptions?:
+		| CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem[]
+		| null;
+}
+
+export type CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem = {
+	/**
+	 * @type array
+	 */
+	MetricNames?: string[];
+	/**
+	 * @type string
+	 */
+	Namespace?: string;
+};
+
+export interface CloudintegrationtypesOldAWSMetricsStrategyDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	cloudwatch_metric_stream_filters?:
+		| CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem[]
+		| null;
+}
+
 /**
  * @nullable
  */
@@ -871,6 +989,7 @@ export interface CloudintegrationtypesProviderIntegrationConfigDTO {
 
 export interface CloudintegrationtypesServiceDTO {
 	assets: CloudintegrationtypesAssetsDTO;
+	cloudIntegrationService: CloudintegrationtypesCloudIntegrationServiceDTO;
 	dataCollected: CloudintegrationtypesDataCollectedDTO;
 	/**
 	 * @type string
@@ -884,8 +1003,7 @@ export interface CloudintegrationtypesServiceDTO {
 	 * @type string
 	 */
 	overview: string;
-	serviceConfig?: CloudintegrationtypesServiceConfigDTO;
-	supported_signals: CloudintegrationtypesSupportedSignalsDTO;
+	supportedSignals: CloudintegrationtypesSupportedSignalsDTO;
 	telemetryCollectionStrategy: CloudintegrationtypesCollectionStrategyDTO;
 	/**
 	 * @type string
@@ -897,6 +1015,21 @@ export interface CloudintegrationtypesServiceConfigDTO {
 	aws: CloudintegrationtypesAWSServiceConfigDTO;
 }
 
+export enum CloudintegrationtypesServiceIDDTO {
+	alb = 'alb',
+	'api-gateway' = 'api-gateway',
+	dynamodb = 'dynamodb',
+	ec2 = 'ec2',
+	ecs = 'ecs',
+	eks = 'eks',
+	elasticache = 'elasticache',
+	lambda = 'lambda',
+	msk = 'msk',
+	rds = 'rds',
+	s3sync = 's3sync',
+	sns = 'sns',
+	sqs = 'sqs',
+}
 export interface CloudintegrationtypesServiceMetadataDTO {
 	/**
 	 * @type boolean
@@ -2677,6 +2810,14 @@ export interface RenderErrorResponseDTO {
 	status: string;
 }
 
+export enum RulestatehistorytypesAlertStateDTO {
+	inactive = 'inactive',
+	pending = 'pending',
+	recovering = 'recovering',
+	firing = 'firing',
+	nodata = 'nodata',
+	disabled = 'disabled',
+}
 export interface RulestatehistorytypesGettableRuleStateHistoryDTO {
 	/**
 	 * @type integer
@@ -2688,7 +2829,7 @@ export interface RulestatehistorytypesGettableRuleStateHistoryDTO {
 	 * @nullable true
 	 */
 	labels: Querybuildertypesv5LabelDTO[] | null;
-	overallState: RuletypesAlertStateDTO;
+	overallState: RulestatehistorytypesAlertStateDTO;
 	/**
 	 * @type boolean
 	 */
@@ -2696,12 +2837,12 @@ export interface RulestatehistorytypesGettableRuleStateHistoryDTO {
 	/**
 	 * @type string
 	 */
-	ruleId: string;
+	ruleID: string;
 	/**
 	 * @type string
 	 */
 	ruleName: string;
-	state: RuletypesAlertStateDTO;
+	state: RulestatehistorytypesAlertStateDTO;
 	/**
 	 * @type boolean
 	 */
@@ -2799,17 +2940,9 @@ export interface RulestatehistorytypesGettableRuleStateWindowDTO {
 	 * @format int64
 	 */
 	start: number;
-	state: RuletypesAlertStateDTO;
+	state: RulestatehistorytypesAlertStateDTO;
 }
 
-export enum RuletypesAlertStateDTO {
-	inactive = 'inactive',
-	pending = 'pending',
-	recovering = 'recovering',
-	firing = 'firing',
-	nodata = 'nodata',
-	disabled = 'disabled',
-}
 export interface ServiceaccounttypesGettableFactorAPIKeyDTO {
 	/**
 	 * @type string
@@ -3499,6 +3632,11 @@ export type UpdateAccountPathParameters = {
 	cloudProvider: string;
 	id: string;
 };
+export type UpdateServicePathParameters = {
+	cloudProvider: string;
+	id: string;
+	serviceId: string;
+};
 export type AgentCheckInPathParameters = {
 	cloudProvider: string;
 };
@@ -3533,10 +3671,6 @@ export type GetService200 = {
 	status: string;
 };
 
-export type UpdateServicePathParameters = {
-	cloudProvider: string;
-	serviceId: string;
-};
 export type CreateSessionByGoogleCallback303 = {
 	data: AuthtypesGettableTokenDTO;
 	/**
@@ -4580,7 +4714,7 @@ export type GetRuleHistoryTimelineParams = {
 	/**
 	 * @description undefined
 	 */
-	state?: RuletypesAlertStateDTO;
+	state?: RulestatehistorytypesAlertStateDTO;
 	/**
 	 * @type string
 	 * @description undefined

frontend/src/api/organization/editOrg.ts

@@ -0,0 +1,26 @@
+import { ApiV2Instance as axios } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/user/editOrg';
+
+const editOrg = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.put(`/orgs/me`, {
+			displayName: props.displayName,
+		});
+
+		return {
+			statusCode: 204,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default editOrg;

frontend/src/api/organization/getOrganization.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps } from 'types/api/user/getOrganization';
+
+const getOrganization = async (
+	token?: string,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(`/org`, {
+			headers: {
+				Authorization: `bearer ${token}`,
+			},
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getOrganization;

frontend/src/api/v1/user/get.ts

@@ -0,0 +1,21 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { UserResponse } from 'types/api/user/getUser';
+import { PayloadProps } from 'types/api/user/getUsers';
+
+const getAll = async (): Promise<SuccessResponseV2<UserResponse[]>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/user`);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getAll;

frontend/src/api/v1/user/id/get.ts

@@ -0,0 +1,22 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props, UserResponse } from 'types/api/user/getUser';
+
+const getUser = async (
+	props: Props,
+): Promise<SuccessResponseV2<UserResponse>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/user/${props.userId}`);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getUser;

frontend/src/api/v1/user/id/update.ts

@@ -0,0 +1,23 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Props } from 'types/api/user/editUser';
+
+const update = async (props: Props): Promise<SuccessResponseV2<null>> => {
+	try {
+		const response = await axios.put(`/user/${props.userId}`, {
+			displayName: props.displayName,
+			role: props.role,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: null,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default update;

frontend/src/api/v1/user/me/get.ts

@@ -0,0 +1,20 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, UserResponse } from 'types/api/user/getUser';
+
+const get = async (): Promise<SuccessResponseV2<UserResponse>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/user/me`);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default get;

frontend/src/auto-import-registry.d.ts

@@ -10,6 +10,7 @@
 // PR for reference: https://github.com/SigNoz/signoz/pull/9694
 // -------------------------------------------------------------------------
 
+import '@signozhq/badge';
 import '@signozhq/button';
 import '@signozhq/calendar';
 import '@signozhq/callout';
@@ -28,4 +29,5 @@ import '@signozhq/sonner';
 import '@signozhq/switch';
 import '@signozhq/table';
 import '@signozhq/toggle-group';
+import '@signozhq/tooltip';
 import '@signozhq/ui';

frontend/src/components/AlertDetailsFilters/Filters.styles.scss

@@ -2,6 +2,13 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	background: var(--l3-background);
-	border: 1px solid var(--l1-border);
+	background: var(--bg-ink-300);
+	border: 1px solid var(--bg-slate-400);
+}
+
+.lightMode {
+	.reset-button {
+		background: var(--bg-vanilla-100);
+		border-color: var(--bg-vanilla-300);
+	}
 }

frontend/src/components/AnnouncementBanner/AnnouncementBanner.styles.scss

@@ -0,0 +1,97 @@
+.announcement-banner {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-4);
+	padding: var(--padding-2) var(--padding-4);
+	height: 40px;
+	font-family: var(--font-sans), sans-serif;
+	font-size: var(--label-base-500-font-size);
+	line-height: var(--label-base-500-line-height);
+	font-weight: var(--label-base-500-font-weight);
+	letter-spacing: -0.065px;
+
+	&--warning {
+		background-color: var(--callout-warning-background);
+		color: var(--callout-warning-description);
+		.announcement-banner__action,
+		.announcement-banner__dismiss {
+			background: var(--callout-warning-border);
+		}
+	}
+
+	&--info {
+		background-color: var(--callout-primary-background);
+		color: var(--callout-primary-description);
+		.announcement-banner__action,
+		.announcement-banner__dismiss {
+			background: var(--callout-primary-border);
+		}
+	}
+
+	&--error {
+		background-color: var(--callout-error-background);
+		color: var(--callout-error-description);
+		.announcement-banner__action,
+		.announcement-banner__dismiss {
+			background: var(--callout-error-border);
+		}
+	}
+
+	&--success {
+		background-color: var(--callout-success-background);
+		color: var(--callout-success-description);
+		.announcement-banner__action,
+		.announcement-banner__dismiss {
+			background: var(--callout-success-border);
+		}
+	}
+
+	&__body {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4);
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__icon {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	&__message {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		line-height: var(--line-height-normal);
+
+		strong {
+			font-weight: var(--font-weight-semibold);
+		}
+	}
+
+	&__action {
+		height: 24px;
+		font-size: var(--label-small-500-font-size);
+		color: currentColor;
+
+		&:hover {
+			opacity: 0.8;
+		}
+	}
+
+	&__dismiss {
+		width: 24px;
+		height: 24px;
+		padding: 0;
+		color: currentColor;
+
+		&:hover {
+			opacity: 0.8;
+		}
+	}
+}

frontend/src/components/AnnouncementBanner/AnnouncementBanner.test.tsx

@@ -0,0 +1,89 @@
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import {
+	AnnouncementBanner,
+	AnnouncementBannerProps,
+	PersistedAnnouncementBanner,
+} from './index';
+
+const STORAGE_KEY = 'test-banner-dismissed';
+
+function renderBanner(props: Partial<AnnouncementBannerProps> = {}): void {
+	render(<AnnouncementBanner message="Test message" {...props} />);
+}
+
+afterEach(() => {
+	localStorage.removeItem(STORAGE_KEY);
+});
+
+describe('AnnouncementBanner', () => {
+	it('renders message and default warning variant', () => {
+		renderBanner({ message: <strong>Heads up</strong> });
+
+		const alert = screen.getByRole('alert');
+		expect(alert).toHaveClass('announcement-banner--warning');
+		expect(alert).toHaveTextContent('Heads up');
+	});
+
+	it.each(['warning', 'info', 'success', 'error'] as const)(
+		'renders %s variant correctly',
+		(type) => {
+			renderBanner({ type, message: 'Test message' });
+			const alert = screen.getByRole('alert');
+			expect(alert).toHaveClass(`announcement-banner--${type}`);
+		},
+	);
+
+	it('calls action onClick when action button is clicked', async () => {
+		const onClick = jest.fn() as jest.MockedFunction<() => void>;
+		renderBanner({ action: { label: 'Go to Settings', onClick } });
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		await user.click(screen.getByRole('button', { name: /go to settings/i }));
+
+		expect(onClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('hides dismiss button when onClose is not provided and hides icon when icon is null', () => {
+		renderBanner({ onClose: undefined, icon: null });
+
+		expect(
+			screen.queryByRole('button', { name: /dismiss/i }),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('alert')?.querySelector('.announcement-banner__icon'),
+		).not.toBeInTheDocument();
+	});
+});
+
+describe('PersistedAnnouncementBanner', () => {
+	it('dismisses on click, calls onDismiss, and persists to localStorage', async () => {
+		const onDismiss = jest.fn() as jest.MockedFunction<() => void>;
+		render(
+			<PersistedAnnouncementBanner
+				message="Test message"
+				storageKey={STORAGE_KEY}
+				onDismiss={onDismiss}
+			/>,
+		);
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		await user.click(screen.getByRole('button', { name: /dismiss/i }));
+
+		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+		expect(onDismiss).toHaveBeenCalledTimes(1);
+		expect(localStorage.getItem(STORAGE_KEY)).toBe('true');
+	});
+
+	it('does not render when storageKey is already set in localStorage', () => {
+		localStorage.setItem(STORAGE_KEY, 'true');
+		render(
+			<PersistedAnnouncementBanner
+				message="Test message"
+				storageKey={STORAGE_KEY}
+			/>,
+		);
+
+		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+	});
+});

frontend/src/components/AnnouncementBanner/AnnouncementBanner.tsx

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+import { Button } from '@signozhq/button';
+import {
+	CircleAlert,
+	CircleCheckBig,
+	Info,
+	TriangleAlert,
+	X,
+} from '@signozhq/icons';
+import cx from 'classnames';
+
+import './AnnouncementBanner.styles.scss';
+
+export type AnnouncementBannerType = 'warning' | 'info' | 'error' | 'success';
+
+export interface AnnouncementBannerAction {
+	label: string;
+	onClick: () => void;
+}
+
+export interface AnnouncementBannerProps {
+	message: ReactNode;
+	type?: AnnouncementBannerType;
+	icon?: ReactNode | null;
+	action?: AnnouncementBannerAction;
+	onClose?: () => void;
+	className?: string;
+}
+
+const DEFAULT_ICONS: Record<AnnouncementBannerType, ReactNode> = {
+	warning: <TriangleAlert size={14} />,
+	info: <Info size={14} />,
+	error: <CircleAlert size={14} />,
+	success: <CircleCheckBig size={14} />,
+};
+
+export default function AnnouncementBanner({
+	message,
+	type = 'warning',
+	icon,
+	action,
+	onClose,
+	className,
+}: AnnouncementBannerProps): JSX.Element {
+	const resolvedIcon = icon === null ? null : icon ?? DEFAULT_ICONS[type];
+
+	return (
+		<div
+			role="alert"
+			className={cx(
+				'announcement-banner',
+				`announcement-banner--${type}`,
+				className,
+			)}
+		>
+			<div className="announcement-banner__body">
+				{resolvedIcon && (
+					<span className="announcement-banner__icon">{resolvedIcon}</span>
+				)}
+				<span className="announcement-banner__message">{message}</span>
+				{action && (
+					<Button
+						type="button"
+						className="announcement-banner__action"
+						onClick={action.onClick}
+					>
+						{action.label}
+					</Button>
+				)}
+			</div>
+
+			{onClose && (
+				<Button
+					type="button"
+					aria-label="Dismiss"
+					className="announcement-banner__dismiss"
+					onClick={onClose}
+				>
+					<X size={14} />
+				</Button>
+			)}
+		</div>
+	);
+}

frontend/src/components/AnnouncementBanner/PersistedAnnouncementBanner.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+import AnnouncementBanner, {
+	AnnouncementBannerProps,
+} from './AnnouncementBanner';
+
+interface PersistedAnnouncementBannerProps extends AnnouncementBannerProps {
+	storageKey: string;
+	onDismiss?: () => void;
+}
+
+function isDismissed(storageKey: string): boolean {
+	return localStorage.getItem(storageKey) === 'true';
+}
+
+export default function PersistedAnnouncementBanner({
+	storageKey,
+	onDismiss,
+	...props
+}: PersistedAnnouncementBannerProps): JSX.Element | null {
+	const [visible, setVisible] = useState(() => !isDismissed(storageKey));
+
+	if (!visible) {
+		return null;
+	}
+
+	const handleClose = (): void => {
+		localStorage.setItem(storageKey, 'true');
+		setVisible(false);
+		onDismiss?.();
+	};
+
+	return <AnnouncementBanner {...props} onClose={handleClose} />;
+}

frontend/src/components/AnnouncementBanner/index.ts

@@ -0,0 +1,12 @@
+import AnnouncementBanner from './AnnouncementBanner';
+import PersistedAnnouncementBanner from './PersistedAnnouncementBanner';
+
+export type {
+	AnnouncementBannerAction,
+	AnnouncementBannerProps,
+	AnnouncementBannerType,
+} from './AnnouncementBanner';
+
+export { AnnouncementBanner, PersistedAnnouncementBanner };
+
+export default AnnouncementBanner;

frontend/src/components/AppLoading/AppLoading.styles.scss

@@ -3,7 +3,7 @@
 	justify-content: center;
 	align-items: center;
 	height: 100vh;
-	background-color: var(--l2-background); // Background
+	background-color: var(--bg-ink-400, #121317); // Dark theme background
 
 	.app-loading-content {
 		display: flex;
@@ -28,7 +28,7 @@
 			.brand-title {
 				font-size: 20px;
 				font-weight: 600;
-				color: var(--l1-foreground); // Primary text
+				color: var(--bg-vanilla-100, #ffffff); // White text for dark theme
 				margin: 0;
 			}
 		}
@@ -37,7 +37,7 @@
 			margin-bottom: 24px;
 
 			.ant-typography {
-				color: var(--l2-foreground); // Secondary text
+				color: var(--bg-vanilla-400, #c0c1c3); // Light gray text for dark theme
 			}
 		}
 
@@ -46,7 +46,7 @@
 			width: 150px;
 			height: 12px;
 			border-radius: 2px;
-			color: var(--primary-background); // Primary blue color
+			color: var(--bg-robin-500, #4e74f8); // Primary blue color
 			border: 2px solid;
 			position: relative;
 		}
@@ -67,6 +67,38 @@
 	}
 }
 
+// Light theme styles - more specific selector
+.app-loading-container.lightMode {
+	background-color: var(
+		--bg-vanilla-100,
+		#ffffff
+	) !important; // White background for light theme
+
+	.app-loading-content {
+		.brand {
+			.brand-title {
+				color: var(--bg-ink-400, #121317) !important; // Dark text for light theme
+			}
+		}
+
+		.brand-tagline {
+			.ant-typography {
+				color: var(
+					--bg-ink-300,
+					#6b7280
+				) !important; // Dark gray text for light theme
+			}
+		}
+
+		.loader {
+			color: var(
+				--bg-robin-500,
+				#4e74f8
+			) !important; // Keep primary blue color for consistency
+		}
+	}
+}
+
 .perilin-bg {
 	position: absolute;
 	top: 0;
@@ -80,12 +112,41 @@
 
 	mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
-		transparent 100%
+		rgba(11, 12, 14, 0.1) 0,
+		rgba(11, 12, 14, 0) 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
-		transparent 100%
+		rgba(11, 12, 14, 0.1) 0,
+		rgba(11, 12, 14, 0) 100%
 	);
 }
+
+// Dark theme styles - ensure dark theme is properly applied
+.app-loading-container.dark {
+	background-color: var(--bg-ink-400, #121317) !important; // Dark background
+
+	.app-loading-content {
+		.brand {
+			.brand-title {
+				color: var(
+					--bg-vanilla-100,
+					#ffffff
+				) !important; // White text for dark theme
+			}
+		}
+
+		.brand-tagline {
+			.ant-typography {
+				color: var(
+					--bg-vanilla-400,
+					#c0c1c3
+				) !important; // Light gray text for dark theme
+			}
+		}
+
+		.loader {
+			color: var(--bg-robin-500, #4e74f8) !important; // Primary blue color
+		}
+	}
+}

frontend/src/components/AuthError/AuthError.styles.scss

@@ -4,13 +4,12 @@
 	animation: horizontal-shaking 300ms ease-out;
 
 	.error-content {
-		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
-		border: 1px solid color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+		background: rgba(229, 72, 77, 0.1);
+		border: 1px solid rgba(229, 72, 77, 0.2);
 		border-radius: 4px;
 
 		&__summary-section {
-			border-bottom: 1px solid
-				color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+			border-bottom: 1px solid rgba(229, 72, 77, 0.2);
 		}
 
 		&__summary {
@@ -32,7 +31,7 @@
 		}
 
 		&__error-code {
-			color: var(--bg-cherry-100);
+			color: #fadadb;
 			font-size: 13px;
 			font-weight: 500;
 			line-height: 1;
@@ -40,7 +39,7 @@
 		}
 
 		&__error-message {
-			color: var(--bg-cherry-300);
+			color: #f5b6b8;
 			font-size: 13px;
 			font-weight: 400;
 			line-height: 20px;
@@ -52,13 +51,13 @@
 		}
 
 		&__message-badge-label-text {
-			color: var(--bg-cherry-100);
+			color: #fadadb;
 		}
 
 		&__message-badge-line {
 			background-image: radial-gradient(
 				circle,
-				color-mix(in srgb, var(--bg-cherry-500) 30%, transparent) 1px,
+				rgba(229, 72, 77, 0.3) 1px,
 				transparent 2px
 			);
 		}
@@ -72,23 +71,23 @@
 		}
 
 		&__message-item {
-			color: var(--bg-cherry-300);
+			color: #f5b6b8;
 			font-size: 13px;
 			font-weight: 400;
 			line-height: 20px;
 			letter-spacing: -0.065px;
 
 			&::before {
-				background: var(--bg-cherry-300);
+				background: #f5b6b8;
 			}
 		}
 
 		&__scroll-hint {
-			background: color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+			background: rgba(229, 72, 77, 0.2);
 		}
 
 		&__scroll-hint-text {
-			color: var(--bg-cherry-100);
+			color: #fadadb;
 		}
 	}
 
@@ -101,28 +100,27 @@
 .lightMode {
 	.auth-error-container {
 		.error-content {
+			background: rgba(229, 72, 77, 0.1);
+			border-color: rgba(229, 72, 77, 0.2);
+
 			&__error-code {
-				color: var(--l2-foreground);
+				color: var(--bg-ink-100);
 			}
 
 			&__error-message {
-				color: var(--l1-foreground);
-			}
-
-			&__message-badge-label-text {
-				color: var(--l2-foreground);
+				color: var(--bg-ink-400);
 			}
 
 			&__message-item {
-				color: var(--l1-foreground);
+				color: var(--bg-ink-400);
 
 				&::before {
-					background: var(--l3-background);
+					background: var(--bg-ink-400);
 				}
 			}
 
 			&__scroll-hint-text {
-				color: var(--l2-foreground);
+				color: var(--bg-ink-100);
 			}
 		}
 	}

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

@@ -16,8 +16,8 @@
 	justify-content: center;
 	gap: 16px;
 	padding: 12px;
-	background: var(--l2-background);
-	border: 1px solid var(--l1-border);
+	background: var(--bg-ink-400);
+	border: 1px solid var(--bg-ink-200);
 	border-radius: 4px;
 }
 
@@ -32,7 +32,7 @@
 	width: 6px;
 	height: 6px;
 	border-radius: 9999px;
-	background: var(--bg-forest-500);
+	background: #25e192;
 	flex-shrink: 0;
 }
 
@@ -49,7 +49,7 @@
 	font-size: 11px;
 	font-weight: 400;
 	line-height: 1;
-	color: var(--l2-foreground);
+	color: var(--text-neutral-dark-100);
 	text-align: center;
 }
 
@@ -67,16 +67,16 @@
 
 .auth-footer-link-icon {
 	flex-shrink: 0;
-	color: var(--l1-foreground);
+	color: var(--text-neutral-dark-50);
 }
 
 .auth-footer-link-status {
 	.auth-footer-text {
-		color: var(--bg-forest-500);
+		color: #25e192;
 	}
 
 	.auth-footer-link-icon {
-		color: var(--bg-forest-500);
+		color: #25e192;
 	}
 }
 
@@ -84,12 +84,14 @@
 	width: 4px;
 	height: 4px;
 	border-radius: 50%;
-	background: var(--l3-background);
+	background: var(--bg-ink-200);
 	flex-shrink: 0;
 }
 
 .lightMode {
 	.auth-footer-content {
+		background: var(--bg-base-white);
+		border-color: var(--bg-vanilla-300);
 		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
 	}
 
@@ -106,4 +108,8 @@
 	.auth-footer-link-icon {
 		color: var(--text-neutral-light-100);
 	}
+
+	.auth-footer-separator {
+		background: var(--bg-vanilla-300);
+	}
 }

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

@@ -30,7 +30,7 @@
 	font-size: 15.4px;
 	font-weight: 500;
 	line-height: 17.5px;
-	color: var(--l1-foreground);
+	color: var(--text-neutral-dark-50);
 	white-space: nowrap;
 }
 
@@ -41,7 +41,7 @@
 	gap: 8px;
 	height: 32px;
 	padding: 10px 16px;
-	background: var(--l2-background);
+	background: var(--bg-ink-400);
 	border: none;
 	border-radius: 2px;
 	cursor: pointer;
@@ -52,13 +52,13 @@
 		font-size: 11px;
 		font-weight: 500;
 		line-height: 1;
-		color: var(--l2-foreground);
+		color: var(--text-neutral-dark-100);
 		text-align: center;
 	}
 
 	svg {
 		flex-shrink: 0;
-		color: var(--l2-foreground);
+		color: var(--text-neutral-dark-100);
 	}
 
 	&:hover {
@@ -67,8 +67,16 @@
 }
 
 .lightMode {
+	.auth-header-logo-text {
+		color: var(--text-neutral-light-100);
+	}
+
 	.auth-header-help-button {
-		background: var(--l2-background);
-		border: 1px solid var(--l1-border);
+		background: var(--bg-vanilla-200);
+
+		span,
+		svg {
+			color: var(--text-neutral-light-200);
+		}
 	}
 }

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

@@ -4,7 +4,7 @@
 	position: relative;
 	min-height: 100vh;
 	width: 100%;
-	background: var(--l1-background);
+	background: var(--bg-neutral-dark-1000);
 	display: flex;
 	flex-direction: column;
 }
@@ -43,13 +43,13 @@
 .masked-dots {
 	mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--background) 10%, transparent) 0%,
-		transparent 56.77%
+		rgba(11, 12, 14, 0.1) 0%,
+		rgba(11, 12, 14, 0) 56.77%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--background) 10%, transparent) 0%,
-		transparent 56.77%
+		rgba(11, 12, 14, 0.1) 0%,
+		rgba(11, 12, 14, 0) 56.77%
 	);
 }
 
@@ -65,7 +65,7 @@
 	border-radius: 956px;
 	background: radial-gradient(
 		ellipse at center -500px,
-		color-mix(in srgb, var(--primary-background) 30%, transparent) 0%,
+		rgba(78, 116, 248, 0.3) 0%,
 		transparent 70%
 	);
 	opacity: 0.3;
@@ -85,8 +85,8 @@
 	height: 100%;
 	background-image: repeating-linear-gradient(
 		to bottom,
-		var(--l1-border) 0px,
-		var(--l1-border) 4px,
+		var(--bg-ink-200) 0px,
+		var(--bg-ink-200) 4px,
 		transparent 4px,
 		transparent 8px
 	);
@@ -145,19 +145,19 @@
 }
 
 .lightMode {
+	.auth-page-wrapper {
+		background: var(--bg-base-white);
+	}
+
 	.bg-dot-pattern {
-		background: radial-gradient(
-			circle,
-			var(--l3-background) 1px,
-			transparent 1px
-		);
+		background: radial-gradient(circle, rgba(35, 38, 46, 1) 1px, transparent 1px);
 		background-size: 12px 12px;
 	}
 
 	.auth-page-gradient {
 		background: radial-gradient(
 			ellipse at center top,
-			color-mix(in srgb, var(--primary-background) 12%, transparent) 0%,
+			rgba(78, 116, 248, 0.12) 0%,
 			transparent 60%
 		);
 		opacity: 0.8;
@@ -167,4 +167,15 @@
 			filter: blur(300px);
 		}
 	}
+
+	.auth-page-line-left,
+	.auth-page-line-right {
+		background-image: repeating-linear-gradient(
+			to bottom,
+			var(--bg-vanilla-300) 0px,
+			var(--bg-vanilla-300) 4px,
+			transparent 4px,
+			transparent 8px
+		);
+	}
 }

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.styles.scss

@@ -21,8 +21,8 @@
 				min-width: 164px;
 
 				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
 			}
 		}
 	}
@@ -31,3 +31,16 @@
 		flex-shrink: 0;
 	}
 }
+
+.lightMode {
+	.celery-overview-filters {
+		.celery-filters {
+			.config-select-option {
+				.ant-select-selector {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-100);
+				}
+			}
+		}
+	}
+}

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss

@@ -27,10 +27,10 @@
 				font-size: 12px;
 				line-height: 18px;
 
-				background: var(--l1-background);
+				background: var(--bg-ink-500);
 				border-bottom: none;
 
-				color: var(--l2-foreground);
+				color: var(--Vanilla-400, #c0c1c3);
 				font-family: Inter;
 				font-size: 11px;
 				font-style: normal;
@@ -47,8 +47,8 @@
 				padding: 12px;
 				font-size: 13px;
 				line-height: 20px;
-				color: var(--l1-foreground);
-				background: var(--l1-background);
+				color: var(--bg-vanilla-100);
+				background: var(--bg-ink-500);
 			}
 
 			.progress-container {
@@ -59,7 +59,7 @@
 			}
 
 			.ant-table-tbody > tr:hover > td {
-				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
+				background: rgba(255, 255, 255, 0.04);
 			}
 
 			.ant-table-cell:first-child {
@@ -89,7 +89,7 @@
 			position: relative;
 			bottom: 0;
 			width: 100%;
-			background: var(--l1-background);
+			background: var(--bg-ink-500);
 			padding: 4px;
 			margin: 0;
 
@@ -100,11 +100,48 @@
 				border-radius: 4px;
 
 				&-active {
-					background: var(--primary-background);
-					border-color: var(--primary-background);
+					background: var(--bg-robin-500);
+					border-color: var(--bg-robin-500);
 
 					a {
-						color: var(--primary-foreground) !important;
+						color: var(--bg-ink-500) !important;
+					}
+				}
+			}
+		}
+	}
+}
+
+.lightMode {
+	.celery-overview-table-container {
+		.celery-overview-table {
+			.ant-table {
+				.ant-table-thead > tr > th {
+					background: var(--bg-vanilla-100);
+					color: var(--text-ink-300);
+				}
+
+				.ant-table-cell {
+					background: var(--bg-vanilla-100);
+					color: var(--bg-ink-500);
+				}
+
+				.ant-table-tbody > tr:hover > td {
+					background: rgba(0, 0, 0, 0.04);
+				}
+			}
+
+			.ant-pagination {
+				background: var(--bg-vanilla-100);
+
+				.ant-pagination-item {
+					&-active {
+						background: var(--bg-robin-500);
+						border-color: var(--bg-robin-500);
+
+						a {
+							color: var(--bg-vanilla-100) !important;
+						}
 					}
 				}
 			}

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.styles.scss

@@ -18,8 +18,21 @@
 				min-width: 164px;
 
 				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
+			}
+		}
+	}
+}
+
+.lightMode {
+	.celery-task-filters {
+		.celery-filters {
+			.config-select-option {
+				.ant-select-selector {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-100);
+				}
 			}
 		}
 	}

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss

@@ -1,7 +1,7 @@
 .celery-task-detail-drawer {
 	.ant-drawer-wrapper-body {
-		background: var(--l1-background);
-		border: 1px solid var(--l1-border);
+		background: var(--bg-ink-500);
+		border: 1px solid var(--bg-ink-300);
 	}
 
 	.ant-drawer-body {
@@ -11,17 +11,17 @@
 			border: none;
 			.ant-card-body {
 				height: 100%;
-				background: var(--l1-background);
+				background: var(--bg-ink-500);
 
 				.ant-table {
-					background: var(--l1-background);
+					background: var(--bg-ink-500);
 				}
 			}
 		}
 	}
 
 	.ant-drawer-header {
-		border-bottom: 1px solid var(--l1-border);
+		border-bottom: 1px solid var(--bg-ink-300);
 		.ant-drawer-header-title {
 			.ant-drawer-close {
 				position: absolute;
@@ -29,7 +29,7 @@
 			}
 
 			button > svg {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 			}
 
 			.ant-drawer-title {
@@ -38,7 +38,7 @@
 				align-items: flex-start;
 
 				.title {
-					color: var(--l1-foreground);
+					color: var(--bg-vanilla-100);
 					font-family: Inter;
 					font-size: 18px;
 					font-style: normal;
@@ -48,7 +48,7 @@
 				}
 
 				.subtitle {
-					color: var(--l2-foreground);
+					color: var(--bg-vanilla-400);
 					font-family: Inter;
 					font-size: 12px;
 					font-style: normal;
@@ -60,10 +60,10 @@
 	}
 
 	.ant-drawer-footer {
-		border-top: 1px solid var(--l1-border);
+		border-top: 1px solid var(--bg-ink-300);
 
 		.footer-text {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 			font-family: Inter;
 			font-size: 14px;
 			font-style: normal;
@@ -72,3 +72,51 @@
 		}
 	}
 }
+
+.lightMode {
+	.celery-task-detail-drawer {
+		.ant-drawer-wrapper-body {
+			background: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300);
+		}
+
+		.ant-drawer-body {
+			.ant-card {
+				.ant-card-body {
+					background: var(--bg-vanilla-100);
+
+					.ant-table {
+						background: var(--bg-vanilla-100);
+					}
+				}
+			}
+		}
+
+		.ant-drawer-header {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+			.ant-drawer-header-title {
+				button > svg {
+					color: var(--bg-ink-500);
+				}
+
+				.ant-drawer-title {
+					.title {
+						color: var(--bg-ink-400);
+					}
+
+					.subtitle {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+
+		.ant-drawer-footer {
+			border-top: 1px solid var(--bg-vanilla-300);
+
+			.footer-text {
+				color: var(--bg-ink-400);
+			}
+		}
+	}
+}

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss

@@ -40,8 +40,13 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		border: 1px solid var(--l1-border);
-		background: linear-gradient(0deg, transparent 0%, transparent 100%), #0b0c0e;
+		border: 1px solid var(--bg-slate-500);
+		background: linear-gradient(
+				0deg,
+				rgba(171, 189, 255, 0) 0%,
+				rgba(171, 189, 255, 0) 100%
+			),
+			#0b0c0e;
 
 		.ant-card-body {
 			height: 100%;
@@ -142,13 +147,13 @@
 		gap: 16px;
 		align-items: center;
 
-		border: 1px dashed var(--l1-border);
+		border: 1px dashed var(--bg-slate-50);
 		border-radius: 4px;
 		padding: 6px 24px 6px 12px;
 		width: max-content;
 
 		.configure-option-Info-text {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 			font-size: 12px;
 			font-weight: 400;
 		}
@@ -156,7 +161,7 @@
 
 	.row-panel {
 		border-radius: 4px;
-		background: color-mix(in srgb, var(--card) 40%, transparent);
+		background: rgba(18, 19, 23, 0.4);
 		padding: 8px;
 		display: flex;
 		gap: 6px;
@@ -175,12 +180,12 @@
 			align-items: center;
 
 			.row-icon {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				cursor: pointer;
 			}
 
 			.section-title {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-family: Inter;
 				font-size: 14px;
 				font-style: normal;
@@ -193,7 +198,7 @@
 }
 
 .celery-task-states {
-	border-bottom: 1px solid var(--l1-border);
+	border-bottom: 1px solid var(--bg-ink-200);
 
 	&__tab {
 		min-width: 140px;
@@ -202,11 +207,11 @@
 		position: relative;
 
 		&:not([data-last-tab='true']) {
-			border-right: 1px solid var(--l1-border);
+			border-right: 1px solid var(--bg-ink-200);
 		}
 
 		&--selected {
-			background-color: var(--l3-background);
+			background-color: rgba(38, 38, 38, 0.5);
 		}
 	}
 
@@ -220,7 +225,7 @@
 	&__label {
 		font-family: 'Inter';
 		font-size: 14px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		line-height: 20px;
 		font-weight: 500;
 	}
@@ -228,7 +233,7 @@
 	&__value {
 		font-family: 'Geist Mono';
 		font-size: 24px;
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 		line-height: 32px;
 	}
 
@@ -238,15 +243,46 @@
 		height: 2px;
 		bottom: 0;
 		left: 0;
-		background-color: var(--l1-foreground);
+		background-color: var(--bg-vanilla-100);
 	}
 }
 
 .lightMode {
 	.celery-task-graph-grid-container {
 		.celery-task-graph-worker-count {
+			border: 1px solid var(--bg-vanilla-300);
 			background: unset;
 		}
+
+		.row-panel .row-panel-section .section-title {
+			color: var(--bg-ink-400);
+		}
+	}
+
+	.celery-task-states {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+
+		&__tab {
+			&:not([data-last-tab='true']) {
+				border-right: 1px solid var(--bg-vanilla-300);
+			}
+
+			&--selected {
+				background-color: var(--bg-vanilla-200);
+			}
+		}
+
+		&__label {
+			color: var(--bg-ink-500);
+		}
+
+		&__value {
+			color: var(--bg-slate-100);
+		}
+
+		&__indicator {
+			background-color: var(--bg-ink-400);
+		}
 	}
 
 	.configure-option-Info {

frontend/src/components/ChangePercentagePill/ChangePercentagePill.styles.scss

@@ -26,7 +26,7 @@
 		}
 	}
 	&--negative {
-		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
+		background: rgba(229, 72, 77, 0.1);
 
 		.change-percentage-pill {
 			&__icon {

frontend/src/components/ChangelogModal/ChangelogModal.styles.scss

@@ -1,7 +1,7 @@
 .changelog-modal {
 	.ant-modal-content {
 		padding: unset;
-		background-color: var(--l2-background);
+		background-color: var(--bg-ink-400, #121317);
 
 		.ant-modal-header {
 			margin-bottom: unset;
@@ -16,12 +16,12 @@
 		display: flex;
 		align-items: center;
 		gap: 8px;
-		background-color: var(--l2-background);
+		background-color: var(--bg-ink-400, #121317);
 		padding: 16px;
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--l1-foreground);
-		border-bottom: 1px solid var(--l1-border);
+		color: var(--text-vanilla-100, #fff);
+		border-bottom: 1px solid var(--bg-slate-500, #161922);
 	}
 
 	&-footer.scroll-available {
@@ -32,14 +32,14 @@
 
 	&-footer {
 		position: relative;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-500, #161922);
 		padding: 12px;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 
 		&-label {
-			color: var(--text-robin-400);
+			color: var(--text-robin-400, #7190f9);
 			font-size: 14px;
 			line-height: 24px;
 			position: relative;
@@ -54,7 +54,7 @@
 				width: 6px;
 				height: 6px;
 				border-radius: 100%;
-				background-color: var(--primary-background);
+				background-color: var(--bg-robin-500, #7190f9);
 			}
 		}
 
@@ -77,7 +77,7 @@
 			.scroll-btn {
 				all: unset;
 				padding: 4px 12px 4px 10px;
-				background-color: var(--l1-border);
+				background-color: var(--bg-slate-400, #1d212d);
 				border-radius: 20px;
 				cursor: pointer;
 				display: flex;
@@ -87,17 +87,17 @@
 				transition: background-color 0.1s;
 
 				&:hover {
-					background-color: var(--l1-border);
+					background-color: var(--bg-slate-200, #2c3140);
 				}
 
 				&:active {
-					background-color: var(--l1-border);
+					background-color: var(--bg-slate-600, #1c1f2a);
 				}
 
 				span {
 					font-size: 12px;
 					line-height: 18px;
-					color: var(--l2-foreground);
+					color: var(--text-vanilla-400, #c0c1c3);
 				}
 
 				// add animation to the chevrons down icon
@@ -112,7 +112,7 @@
 		max-height: calc(100vh - 300px);
 		overflow-y: auto;
 		padding: 16px 16px 18px 16px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-500, #161922);
 		border-top-width: 0;
 		border-bottom-width: 0;
 	}
@@ -127,3 +127,36 @@
 		opacity: 0.5;
 	}
 }
+
+.lightMode {
+	.changelog-modal {
+		.ant-modal-content {
+			background-color: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&-title {
+			background: var(--bg-vanilla-100);
+			color: var(--bg-ink-500);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&-content {
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&-footer {
+			border-color: var(--bg-vanilla-300);
+
+			.scroll-btn-container {
+				.scroll-btn {
+					background-color: var(--bg-vanilla-300);
+
+					span {
+						color: var(--text-ink-500);
+					}
+				}
+			}
+		}
+	}
+}

frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss

@@ -15,13 +15,13 @@
 	&-section-title {
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--l1-foreground);
+		color: var(--text-vanilla-400, #c0c1c3);
 	}
 
 	.changelog-release-date {
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--l1-foreground);
+		color: var(--text-vanilla-400, #c0c1c3);
 		display: block;
 		margin-bottom: 12px;
 	}
@@ -38,7 +38,7 @@
 		top: 6px;
 		bottom: -30px;
 		width: 1px;
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-400, #1d212d);
 
 		.inner-ball {
 			position: absolute;
@@ -47,7 +47,7 @@
 			height: 6px;
 			border-radius: 100%;
 			transform: translateX(-50%);
-			background-color: var(--primary-background);
+			background-color: var(--bg-robin-500, #7190f9);
 		}
 	}
 
@@ -69,7 +69,7 @@
 				top: 10px;
 				width: 20px;
 				height: 2px;
-				background-color: var(--primary-background);
+				background-color: var(--bg-robin-500, #7190f9);
 				transform: translate(-100%, -50%);
 			}
 		}
@@ -79,20 +79,19 @@
 	p {
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--l1-foreground);
+		color: var(--text-vanilla-400, #c0c1c3);
 	}
 
 	code {
 		padding: 2px 4px;
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-500, #161922);
 		border-radius: 6px;
 		font-size: 95%;
 		vertical-align: middle;
-		border: 1px solid var(--l1-border);
-		color: var(--l1-foreground);
+		border: 1px solid var(--bg-slate-600, #1c1f2a);
 	}
 	a {
-		color: var(--text-robin-500);
+		color: var(--text-robin-500, #7190f9);
 		font-weight: 600;
 		text-decoration: underline;
 
@@ -103,7 +102,7 @@
 
 	& :is(h1, h2, h3, h4, h5, h6, &-section-title) {
 		font-weight: 600;
-		color: var(--l1-foreground);
+		color: var(--text-vanilla-100, #fff);
 	}
 
 	h1 {
@@ -123,7 +122,7 @@
 		width: 100%;
 		overflow: hidden;
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-400, #1d212d);
 		margin-bottom: 28px;
 	}
 
@@ -131,3 +130,25 @@
 		margin: 12px 0;
 	}
 }
+
+.lightMode {
+	.changelog-renderer {
+		.changelog-release-date {
+			color: var(--text-ink-500);
+		}
+
+		&-line {
+			background-color: var(--bg-vanilla-300);
+		}
+
+		& :is(h1, h2, h3, h4, h5, h6, p, li, &-section-title) {
+			color: var(--text-ink-500);
+		}
+
+		code {
+			background-color: var(--bg-vanilla-300);
+			border: 1px solid var(--bg-vanilla-300);
+			color: var(--text-ink-500);
+		}
+	}
+}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.styles.scss

@@ -18,7 +18,7 @@
 		font-weight: var(--label-base-400-font-weight);
 		line-height: var(--label-base-400-line-height);
 		letter-spacing: -0.065px;
-		color: var(--l1-foreground);
+		color: var(--bg-base-white);
 		margin: 0;
 	}
 
@@ -54,7 +54,7 @@
 		height: 32px;
 		color: var(--l1-foreground);
 		background-color: var(--l2-background);
-		border-color: var(--l1-border);
+		border-color: var(--border);
 		font-size: var(--paragraph-base-400-font-size);
 		border-radius: 2px;
 		width: 100%;
@@ -96,3 +96,11 @@
 	gap: var(--spacing-4);
 	flex-shrink: 0;
 }
+
+.lightMode {
+	.create-sa-modal {
+		[data-slot='dialog-title'] {
+			color: var(--bg-base-black);
+		}
+	}
+}

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

@@ -9,17 +9,16 @@
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		color: var(--secondary-foreground);
-		background-color: var(--secondary-background);
-		border: 1px solid var(--secondary-border);
+		color: var(--foreground);
+		border: 1px solid var(--border);
 		border-radius: 2px;
 		box-shadow: none;
 		padding: 10px;
 		height: 33px;
 
 		&:hover:not(:disabled) {
-			color: var(--primary-foreground);
-			background: var(--primary-background);
+			color: var(--bg-vanilla-100);
+			background: var(--primary);
 		}
 
 		&:disabled {
@@ -30,7 +29,7 @@
 
 	.timeSelection-input {
 		&:hover {
-			border-color: var(--l1-border) !important;
+			border-color: #1d212d !important;
 		}
 	}
 
@@ -99,7 +98,7 @@
 	justify-content: center;
 	padding: 4px;
 	cursor: default;
-	color: var(--l2-foreground) !important;
+	color: var(--bg-vanilla-400, #c0c1c3) !important;
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -147,10 +146,14 @@
 			color: rgba($color: #000000, $alpha: 0.4);
 		}
 	}
+
+	.info-text {
+		color: var(--bg-slate-400) !important;
+	}
 }
 
 .date-time-popover__footer {
-	border-top: 1px solid var(--l1-border);
+	border-top: 1px solid var(--bg-ink-200);
 	padding: 8px 14px;
 	.timezone-container {
 		display: flex;
@@ -202,7 +205,7 @@
 
 		display: flex;
 		align-items: center;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		gap: 6px;
 
 		.timezone {
@@ -210,10 +213,10 @@
 			align-items: center;
 			gap: 4px;
 			border-radius: 2px;
-			background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+			background: rgba(171, 189, 255, 0.04);
 			cursor: pointer;
 			padding: 0px 4px;
-			color: var(--l1-foreground);
+			color: var(--bg-vanilla-100);
 			border: none;
 		}
 	}
@@ -225,8 +228,8 @@
 	justify-content: center;
 	padding: 0 4px;
 	border-radius: 2px;
-	color: var(--l2-foreground);
-	background-color: var(--l3-background);
+	color: var(--bg-vanilla-400);
+	background-color: var(--bg-ink-200);
 	font-size: 9px;
 	font-weight: 400;
 	line-height: 12px;
@@ -246,8 +249,8 @@
 	width: 36px;
 
 	font-size: 11px;
-	color: var(--l2-foreground);
-	background-color: var(--l3-background);
+	color: var(--bg-vanilla-400);
+	background-color: var(--bg-ink-200);
 	cursor: pointer;
 
 	&.is-live {
@@ -269,14 +272,13 @@
 
 @keyframes ripple {
 	0% {
-		box-shadow: 0 0 0 0
-			color-mix(in srgb, var(--warning-background) 40%, transparent);
+		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
 	}
 	60% {
-		box-shadow: 0 0 0 6px transparent;
+		box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
 	}
 	100% {
-		box-shadow: 0 0 0 0 transparent;
+		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
 	}
 }
 
@@ -286,8 +288,8 @@
 	justify-content: center;
 	padding: 0 4px;
 	border-radius: 2px;
-	background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
-	color: var(--l1-foreground);
+	background: rgba(171, 189, 255, 0.04);
+	color: var(--bg-vanilla-100);
 	font-size: 12px;
 	font-weight: 400;
 	line-height: 16px;
@@ -297,16 +299,23 @@
 	width: 20px;
 
 	&:hover {
-		background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
+		background: rgba(171, 189, 255, 0.08);
 	}
 }
 
 .lightMode {
+	.date-time-popover__footer {
+		border-color: var(--bg-vanilla-400);
+	}
+
 	.timezone-container {
+		color: var(--bg-ink-400);
+
 		.timezone {
+			color: var(--bg-ink-100);
 			background: rgb(179 179 179 / 15%);
 			&__icon {
-				stroke: var(--l1-foreground);
+				stroke: var(--bg-ink-100);
 			}
 		}
 	}
@@ -314,16 +323,23 @@
 	.custom-time-picker {
 		.timeSelection-input {
 			&:hover {
-				border-color: var(--l1-border) !important;
+				border-color: var(--bg-vanilla-300) !important;
 			}
 		}
 	}
 
 	.timezone-badge {
+		color: var(--bg-ink-100);
 		background: rgb(179 179 179 / 15%);
 	}
 
+	.time-input-prefix {
+		background-color: var(--bg-vanilla-300);
+		color: var(--bg-ink-400);
+	}
+
 	.time-input-suffix-icon-badge {
+		color: var(--bg-ink-100);
 		background: rgb(179 179 179 / 15%);
 
 		&:hover {

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -656,13 +656,15 @@ function CustomTimePicker({
 						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
 					}
 				>
-					<Button
-						className="zoom-out-btn"
-						onClick={handleZoomOut}
-						disabled={zoomOutDisabled}
-						data-testid="zoom-out-btn"
-						prefixIcon={<ZoomOut size={14} />}
-					/>
+					<span>
+						<Button
+							className="zoom-out-btn"
+							onClick={handleZoomOut}
+							disabled={zoomOutDisabled}
+							data-testid="zoom-out-btn"
+							prefixIcon={<ZoomOut size={14} />}
+						/>
+					</span>
 				</Tooltip>
 			)}
 		</div>

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

@@ -3,7 +3,11 @@ $font-family: 'Inter';
 $item-spacing: 8px;
 
 :root {
-	--border-color: var(--l1-border);
+	--border-color: var(--bg-slate-400);
+}
+
+.lightMode {
+	--border-color: var(--bg-vanilla-400);
 }
 
 // Mixins
@@ -20,7 +24,7 @@ $item-spacing: 8px;
 
 .timezone-picker {
 	width: 532px;
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400);
 	font-family: $font-family;
 
 	&__search {
@@ -42,7 +46,7 @@ $item-spacing: 8px;
 		background: transparent;
 		border: none;
 		outline: none;
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 		font-size: 14px;
 		line-height: 20px;
 		letter-spacing: -0.07px;
@@ -52,19 +56,19 @@ $item-spacing: 8px;
 		}
 
 		&::placeholder {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 		}
 	}
 
 	&__esc-key {
 		@include text-style-base;
 		font-size: 8px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		letter-spacing: -0.04px;
 		border-radius: 2.286px;
-		border: 1.143px solid var(--l1-border);
+		border: 1.143px solid var(--bg-ink-200);
 		border-bottom-width: 2.286px;
-		background: var(--l2-background);
+		background: var(--bg-ink-400);
 		padding: 0 1px;
 	}
 
@@ -82,14 +86,14 @@ $item-spacing: 8px;
 		background: transparent;
 		border: none;
 		width: -webkit-fill-available;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-family: $font-family;
 
 		&:hover,
 		&.selected {
 			border-radius: 2px;
-			background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
-			color: var(--l1-foreground);
+			background: rgba(171, 189, 255, 0.04);
+			color: var(--bg-vanilla-100);
 		}
 
 		&.has-divider {
@@ -113,7 +117,7 @@ $item-spacing: 8px;
 	}
 
 	&__offset {
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 		font-size: 12px;
 		line-height: 16px;
 		letter-spacing: -0.06px;
@@ -134,14 +138,28 @@ $item-spacing: 8px;
 	.timezone-picker {
 		&__search {
 			.search-icon {
-				stroke: var(--l1-foreground);
+				stroke: var(--bg-ink-400);
 			}
 		}
+		&__input {
+			color: var(--bg-ink-100);
+		}
+		&__esc-key {
+			background-color: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-400);
+			color: var(--bg-ink-400);
+		}
+		&__item {
+			color: var(--bg-ink-400);
+		}
+		&__offset {
+			color: var(--bg-ink-100);
+		}
 	}
 	.timezone-name-wrapper {
 		&__selected-icon {
 			.check-icon {
-				stroke: var(--l1-foreground);
+				stroke: var(--bg-ink-100);
 			}
 		}
 	}

frontend/src/components/DetailsDrawer/DetailsDrawer.styles.scss

@@ -1,10 +1,10 @@
 .details-drawer {
 	.ant-drawer-wrapper-body {
-		border-left: 1px solid var(--l1-border);
+		border-left: 1px solid var(--bg-slate-500);
 	}
 	.ant-drawer-header {
-		background: var(--l2-background);
-		border-bottom: 1px solid var(--l1-border);
+		background: var(--bg-ink-400);
+		border-bottom: 1px solid var(--bg-slate-500);
 
 		.ant-drawer-header-title {
 			display: flex;
@@ -14,12 +14,12 @@
 				margin-inline-end: 0px;
 				padding: 0px;
 				padding-right: 16px;
-				border-right: 1px solid var(--l1-border);
+				border-right: 1px solid var(--bg-slate-500);
 			}
 
 			.ant-drawer-title {
 				padding-left: 16px;
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-family: Inter;
 				font-size: 14px;
 				font-style: normal;
@@ -31,7 +31,7 @@
 	}
 	.ant-drawer-body {
 		padding: 16px;
-		background: var(--l2-background);
+		background: var(--bg-ink-400);
 
 		&::-webkit-scrollbar {
 			width: 0.1rem;
@@ -50,11 +50,11 @@
 			flex-shrink: 0;
 			padding: 7px 20px;
 			border-radius: 2px 0px 0px 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-400);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
-			color: var(--l1-foreground);
+			color: #fff;
 			font-family: Inter;
 			font-size: 12px;
 			font-style: normal;
@@ -75,7 +75,7 @@
 		}
 
 		.ant-tabs-tab-active {
-			background: var(--l3-background);
+			background: var(--bg-slate-400);
 		}
 
 		.ant-tabs-tab + .ant-tabs-tab {
@@ -91,3 +91,44 @@
 		}
 	}
 }
+
+.lightMode {
+	.details-drawer {
+		.ant-drawer-wrapper-body {
+			border-left: 1px solid var(--bg-vanilla-300);
+		}
+		.ant-drawer-header {
+			background: var(--bg-vanilla-200);
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.ant-drawer-header-title {
+				.ant-drawer-close {
+					border-right: 1px solid var(--bg-vanilla-300);
+				}
+
+				.ant-drawer-title {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+		.ant-drawer-body {
+			background: var(--bg-vanilla-200);
+		}
+
+		.details-drawer-tabs {
+			.ant-tabs-tab {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-300);
+				color: var(--bg-ink-400);
+			}
+
+			.ant-tabs-tab-active {
+				background: var(--bg-vanilla-200);
+			}
+
+			.ant-tabs-tab + .ant-tabs-tab {
+				border-left: none;
+			}
+		}
+	}
+}

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

@@ -1,7 +1,7 @@
 .download-popover {
 	.ant-popover-inner {
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--l3-border);
 		background: linear-gradient(
 			139deg,
 			var(--l2-background) 0%,
@@ -46,7 +46,7 @@
 
 		.horizontal-line {
 			height: 1px;
-			background: var(--l1-border);
+			background: var(--l3-border);
 		}
 
 		.export-button {
@@ -57,3 +57,30 @@
 		}
 	}
 }
+
+.lightMode {
+	.download-popover {
+		.ant-popover-inner {
+			border: 1px solid var(--l2-border);
+			background: linear-gradient(
+				139deg,
+				var(--background) 0%,
+				var(--l1-background) 98.68%
+			);
+			box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
+		}
+		.export-options-container {
+			.title {
+				color: var(--l2-foreground);
+			}
+
+			:global(.ant-radio-wrapper) {
+				color: var(--foreground);
+			}
+
+			.horizontal-line {
+				background: var(--l2-border);
+			}
+		}
+	}
+}

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -1,75 +0,0 @@
-import { Button } from '@signozhq/button';
-import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
-import { Trash2, X } from '@signozhq/icons';
-import { MemberRow } from 'components/MembersTable/MembersTable';
-
-interface DeleteMemberDialogProps {
-	open: boolean;
-	isInvited: boolean;
-	member: MemberRow | null;
-	isDeleting: boolean;
-	onClose: () => void;
-	onConfirm: () => void;
-}
-
-function DeleteMemberDialog({
-	open,
-	isInvited,
-	member,
-	isDeleting,
-	onClose,
-	onConfirm,
-}: DeleteMemberDialogProps): JSX.Element {
-	const title = isInvited ? 'Revoke Invite' : 'Delete Member';
-
-	const body = isInvited ? (
-		<>
-			Are you sure you want to revoke the invite for{' '}
-			<strong>{member?.email}</strong>? They will no longer be able to join the
-			workspace using this invite.
-		</>
-	) : (
-		<>
-			Are you sure you want to delete{' '}
-			<strong>{member?.name || member?.email}</strong>? This will remove their
-			access to the workspace.
-		</>
-	);
-
-	return (
-		<DialogWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			title={title}
-			width="narrow"
-			className="alert-dialog delete-dialog"
-			showCloseButton={false}
-			disableOutsideClick={false}
-		>
-			<p className="delete-dialog__body">{body}</p>
-
-			<DialogFooter className="delete-dialog__footer">
-				<Button variant="solid" color="secondary" size="sm" onClick={onClose}>
-					<X size={12} />
-					Cancel
-				</Button>
-				<Button
-					variant="solid"
-					color="destructive"
-					size="sm"
-					disabled={isDeleting}
-					onClick={onConfirm}
-				>
-					<Trash2 size={12} />
-					{isDeleting ? 'Processing...' : title}
-				</Button>
-			</DialogFooter>
-		</DialogWrapper>
-	);
-}
-
-export default DeleteMemberDialog;

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

@@ -32,7 +32,7 @@
 	&__input {
 		height: 32px;
 		background: var(--l2-background);
-		border-color: var(--l1-border);
+		border-color: var(--border);
 		color: var(--l1-foreground);
 		box-shadow: none;
 
@@ -45,11 +45,11 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		min-height: 32px;
-		padding: var(--padding-1) var(--padding-2);
+		height: 32px;
+		padding: 0 var(--padding-2);
 		border-radius: 2px;
 		background: var(--l2-background);
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--border);
 
 		&--disabled {
 			cursor: not-allowed;
@@ -57,13 +57,6 @@
 		}
 	}
 
-	&__disabled-roles {
-		display: flex;
-		flex-wrap: wrap;
-		gap: var(--spacing-2);
-		flex: 1;
-	}
-
 	&__email-text {
 		font-size: var(--font-size-sm);
 		font-weight: var(--font-weight-normal);
@@ -85,23 +78,21 @@
 
 	&__role-select {
 		width: 100%;
+		height: 32px;
 
 		.ant-select-selector {
 			background-color: var(--l2-background) !important;
 			border-color: var(--border) !important;
 			border-radius: 2px;
-			padding: var(--padding-1) var(--padding-2) !important;
+			padding: 0 var(--padding-2) !important;
 			display: flex;
 			align-items: center;
-			flex-wrap: wrap;
-			min-height: 32px;
-			height: auto !important;
 		}
 
 		.ant-select-selection-item {
 			font-size: var(--font-size-sm);
 			color: var(--l1-foreground);
-			line-height: 22px;
+			line-height: 32px;
 			letter-spacing: -0.07px;
 		}
 
@@ -153,7 +144,7 @@
 		width: 100%;
 		height: 56px;
 		padding: 0 var(--padding-4);
-		border-top: 1px solid var(--l1-border);
+		border-top: 1px solid var(--border);
 		flex-shrink: 0;
 		background: var(--card);
 	}
@@ -173,14 +164,10 @@
 	&__footer-divider {
 		width: 1px;
 		height: 21px;
-		background: var(--l1-border);
+		background: var(--border);
 		flex-shrink: 0;
 	}
 
-	&__tooltip-wrapper {
-		display: inline-flex;
-	}
-
 	&__footer-btn {
 		display: inline-flex;
 		align-items: center;
@@ -206,7 +193,7 @@
 		}
 
 		&--danger {
-			color: var(--accent-cherry);
+			color: var(--destructive);
 		}
 
 		&--warning {
@@ -217,7 +204,7 @@
 
 .delete-dialog {
 	background: var(--l2-background);
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--l2-border);
 
 	[data-slot='dialog-title'] {
 		color: var(--l1-foreground);
@@ -247,10 +234,10 @@
 
 .reset-link-dialog {
 	background: var(--l2-background);
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--l2-border);
 
 	[data-slot='dialog-header'] {
-		border-color: var(--l1-border);
+		border-color: var(--l2-border);
 		color: var(--l1-foreground);
 	}
 
@@ -281,7 +268,7 @@
 		height: 32px;
 		overflow: hidden;
 		background: var(--l2-background);
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--border);
 		border-radius: 2px;
 	}
 
@@ -311,7 +298,7 @@
 		border-top: none;
 		border-right: none;
 		border-bottom: none;
-		border-left: 1px solid var(--l1-border);
+		border-left: 1px solid var(--border);
 		min-width: 64px;
 	}
 }

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,70 +1,39 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { Badge } from '@signozhq/badge';
 import { Button } from '@signozhq/button';
+import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { DrawerWrapper } from '@signozhq/drawer';
-import { LockKeyhole, RefreshCw, Trash2, X } from '@signozhq/icons';
+import {
+	Check,
+	ChevronDown,
+	Copy,
+	LockKeyhole,
+	RefreshCw,
+	Trash2,
+	X,
+} from '@signozhq/icons';
 import { Input } from '@signozhq/input';
 import { toast } from '@signozhq/sonner';
-import { Badge } from '@signozhq/ui';
-import { Skeleton, Tooltip } from 'antd';
+import { Select } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	getResetPasswordToken,
 	useDeleteUser,
-	useGetUser,
-	useUpdateMyUserV2,
-	useUpdateUser,
+	useUpdateUserDeprecated,
 } from 'api/generated/services/users';
 import { AxiosError } from 'axios';
 import { MemberRow } from 'components/MembersTable/MembersTable';
-import RolesSelect, { useRoles } from 'components/RolesSelect';
-import SaveErrorItem from 'components/ServiceAccountDrawer/SaveErrorItem';
-import type { SaveError } from 'components/ServiceAccountDrawer/utils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { MemberStatus } from 'container/MembersSettings/utils';
-import {
-	MemberRoleUpdateFailure,
-	useMemberRoleManager,
-} from 'hooks/member/useMemberRoleManager';
-import { useAppContext } from 'providers/App/App';
+import { capitalize } from 'lodash-es';
 import { useTimezone } from 'providers/Timezone';
-import APIError from 'types/api/error';
-import { toAPIError } from 'utils/errorUtils';
-
-import DeleteMemberDialog from './DeleteMemberDialog';
-import ResetLinkDialog from './ResetLinkDialog';
+import { ROLES } from 'types/roles';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import './EditMemberDrawer.styles.scss';
 
-const ROOT_USER_TOOLTIP = 'This operation is not supported for the root user';
-const SELF_DELETE_TOOLTIP =
-	'You cannot perform this action on your own account';
-
-function getDeleteTooltip(
-	isRootUser: boolean,
-	isSelf: boolean,
-): string | undefined {
-	if (isRootUser) {
-		return ROOT_USER_TOOLTIP;
-	}
-	if (isSelf) {
-		return SELF_DELETE_TOOLTIP;
-	}
-	return undefined;
-}
-
-function toSaveApiError(err: unknown): APIError {
-	return (
-		convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
-		toAPIError(err as AxiosError<RenderErrorResponseDTO>)
-	);
-}
-
-function areSortedArraysEqual(a: string[], b: string[]): boolean {
-	return JSON.stringify([...a].sort()) === JSON.stringify([...b].sort());
-}
-
 export interface EditMemberDrawerProps {
 	member: MemberRow | null;
 	open: boolean;
@@ -80,12 +49,9 @@ function EditMemberDrawer({
 	onComplete,
 }: EditMemberDrawerProps): JSX.Element {
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const { user: currentUser } = useAppContext();
 
-	const [localDisplayName, setLocalDisplayName] = useState('');
-	const [localRoles, setLocalRoles] = useState<string[]>([]);
-	const [isSaving, setIsSaving] = useState(false);
-	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
+	const [displayName, setDisplayName] = useState('');
+	const [selectedRole, setSelectedRole] = useState<ROLES>('VIEWER');
 	const [isGeneratingLink, setIsGeneratingLink] = useState(false);
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 	const [resetLink, setResetLink] = useState<string | null>(null);
@@ -94,63 +60,32 @@ function EditMemberDrawer({
 	const [linkType, setLinkType] = useState<'invite' | 'reset' | null>(null);
 
 	const isInvited = member?.status === MemberStatus.Invited;
-	const isSelf = !!member?.id && member.id === currentUser?.id;
 
-	const {
-		data: fetchedUser,
-		isLoading: isFetchingUser,
-		refetch: refetchUser,
-	} = useGetUser(
-		{ id: member?.id ?? '' },
-		{ query: { enabled: open && !!member?.id } },
-	);
-
-	const isRootUser = !!fetchedUser?.data?.isRoot;
-
-	const {
-		roles: availableRoles,
-		isLoading: rolesLoading,
-		isError: rolesError,
-		error: rolesErrorObj,
-		refetch: refetchRoles,
-	} = useRoles();
-
-	const { fetchedRoleIds, applyDiff } = useMemberRoleManager(
-		member?.id ?? '',
-		open && !!member?.id,
-	);
-
-	const fetchedDisplayName =
-		fetchedUser?.data?.displayName ?? member?.name ?? '';
-	const fetchedUserId = fetchedUser?.data?.id;
-	const fetchedUserDisplayName = fetchedUser?.data?.displayName;
-
-	useEffect(() => {
-		if (fetchedUserId) {
-			setLocalDisplayName(fetchedUserDisplayName ?? member?.name ?? '');
-		}
-		setSaveErrors([]);
-	}, [fetchedUserId, fetchedUserDisplayName, member?.name]);
-
-	useEffect(() => {
-		setLocalRoles(fetchedRoleIds);
-	}, [fetchedRoleIds]);
-
-	const isDirty =
-		member !== null &&
-		fetchedUser != null &&
-		(localDisplayName !== fetchedDisplayName ||
-			!areSortedArraysEqual(localRoles, fetchedRoleIds));
-
-	const { mutateAsync: updateMyUser } = useUpdateMyUserV2();
-	const { mutateAsync: updateUser } = useUpdateUser();
+	const { mutate: updateUser, isLoading: isSaving } = useUpdateUserDeprecated({
+		mutation: {
+			onSuccess: (): void => {
+				toast.success('Member details updated successfully', { richColors: true });
+				onComplete();
+				onClose();
+			},
+			onError: (err): void => {
+				const errMessage =
+					convertToApiError(
+						err as AxiosError<RenderErrorResponseDTO, unknown> | null,
+					)?.getErrorMessage() || 'An error occurred';
+				toast.error(`Failed to update member details: ${errMessage}`, {
+					richColors: true,
+				});
+			},
+		},
+	});
 
 	const { mutate: deleteUser, isLoading: isDeleting } = useDeleteUser({
 		mutation: {
 			onSuccess: (): void => {
 				toast.success(
 					isInvited ? 'Invite revoked successfully' : 'Member deleted successfully',
-					{ richColors: true, position: 'top-right' },
+					{ richColors: true },
 				);
 				setShowDeleteConfirm(false);
 				onComplete();
@@ -164,163 +99,53 @@ function EditMemberDrawer({
 				const prefix = isInvited
 					? 'Failed to revoke invite'
 					: 'Failed to delete member';
-				toast.error(`${prefix}: ${errMessage}`, {
-					richColors: true,
-					position: 'top-right',
-				});
+				toast.error(`${prefix}: ${errMessage}`, { richColors: true });
 			},
 		},
 	});
 
-	const makeRoleRetry = useCallback(
-		(
-			context: string,
-			rawRetry: () => Promise<void>,
-		) => async (): Promise<void> => {
-			try {
-				await rawRetry();
-				setSaveErrors((prev) => prev.filter((e) => e.context !== context));
-				refetchUser();
-			} catch (err) {
-				setSaveErrors((prev) =>
-					prev.map((e) =>
-						e.context === context ? { ...e, apiError: toSaveApiError(err) } : e,
-					),
-				);
+	useEffect(() => {
+		if (member) {
+			setDisplayName(member.name ?? '');
+			setSelectedRole(member.role);
+		}
+	}, [member]);
+
+	const isDirty =
+		member !== null &&
+		(displayName !== (member.name ?? '') || selectedRole !== member.role);
+
+	const formatTimestamp = useCallback(
+		(ts: string | null | undefined): string => {
+			if (!ts) {
+				return '—';
 			}
+			const d = new Date(ts);
+			if (Number.isNaN(d.getTime())) {
+				return '—';
+			}
+			return formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.DASH_DATETIME);
 		},
-		[refetchUser],
+		[formatTimezoneAdjustedTimestamp],
 	);
 
-	const retryNameUpdate = useCallback(async (): Promise<void> => {
-		if (!member) {
-			return;
-		}
-		try {
-			if (isSelf) {
-				await updateMyUser({ data: { displayName: localDisplayName } });
-			} else {
-				await updateUser({
-					pathParams: { id: member.id },
-					data: { displayName: localDisplayName },
-				});
-			}
-			setSaveErrors((prev) => prev.filter((e) => e.context !== 'Name update'));
-			refetchUser();
-		} catch (err) {
-			setSaveErrors((prev) =>
-				prev.map((e) =>
-					e.context === 'Name update' ? { ...e, apiError: toSaveApiError(err) } : e,
-				),
-			);
-		}
-	}, [member, isSelf, localDisplayName, updateMyUser, updateUser, refetchUser]);
-
-	const handleSave = useCallback(async (): Promise<void> => {
+	const handleSave = useCallback((): void => {
 		if (!member || !isDirty) {
 			return;
 		}
-		setSaveErrors([]);
-		setIsSaving(true);
-		try {
-			const nameChanged = localDisplayName !== fetchedDisplayName;
-			const rolesChanged = !areSortedArraysEqual(localRoles, fetchedRoleIds);
-
-			const namePromise = nameChanged
-				? isSelf
-					? updateMyUser({ data: { displayName: localDisplayName } })
-					: updateUser({
-							pathParams: { id: member.id },
-							data: { displayName: localDisplayName },
-					  })
-				: Promise.resolve();
-
-			const [nameResult, rolesResult] = await Promise.allSettled([
-				namePromise,
-				rolesChanged ? applyDiff(localRoles, availableRoles) : Promise.resolve([]),
-			]);
-
-			const errors: SaveError[] = [];
-
-			if (nameResult.status === 'rejected') {
-				errors.push({
-					context: 'Name update',
-					apiError: toSaveApiError(nameResult.reason),
-					onRetry: retryNameUpdate,
-				});
-			}
-
-			if (rolesResult.status === 'rejected') {
-				errors.push({
-					context: 'Roles update',
-					apiError: toSaveApiError(rolesResult.reason),
-					onRetry: async (): Promise<void> => {
-						const failures = await applyDiff(localRoles, availableRoles);
-						setSaveErrors((prev) => {
-							const rest = prev.filter((e) => e.context !== 'Roles update');
-							return [
-								...rest,
-								...failures.map((f: MemberRoleUpdateFailure) => {
-									const ctx = `Role '${f.roleName}'`;
-									return {
-										context: ctx,
-										apiError: toSaveApiError(f.error),
-										onRetry: makeRoleRetry(ctx, f.onRetry),
-									};
-								}),
-							];
-						});
-						refetchUser();
-					},
-				});
-			} else {
-				for (const failure of rolesResult.value ?? []) {
-					const context = `Role '${failure.roleName}'`;
-					errors.push({
-						context,
-						apiError: toSaveApiError(failure.error),
-						onRetry: makeRoleRetry(context, failure.onRetry),
-					});
-				}
-			}
-
-			if (errors.length > 0) {
-				setSaveErrors(errors);
-			} else {
-				toast.success('Member details updated successfully', {
-					richColors: true,
-					position: 'top-right',
-				});
-				onComplete();
-			}
-
-			refetchUser();
-		} finally {
-			setIsSaving(false);
-		}
-	}, [
-		member,
-		isDirty,
-		isSelf,
-		localDisplayName,
-		localRoles,
-		fetchedDisplayName,
-		fetchedRoleIds,
-		updateMyUser,
-		updateUser,
-		applyDiff,
-		availableRoles,
-		refetchUser,
-		retryNameUpdate,
-		makeRoleRetry,
-		onComplete,
-	]);
+		updateUser({
+			pathParams: { id: member.id },
+			data: { id: member.id, displayName, role: selectedRole },
+		});
+	}, [member, isDirty, displayName, selectedRole, updateUser]);
 
 	const handleDelete = useCallback((): void => {
 		if (!member) {
 			return;
 		}
-		deleteUser({ pathParams: { id: member.id } });
+		deleteUser({
+			pathParams: { id: member.id },
+		});
 	}, [member, deleteUser]);
 
 	const handleGenerateResetLink = useCallback(async (): Promise<void> => {
@@ -351,28 +176,29 @@ function EditMemberDrawer({
 		} finally {
 			setIsGeneratingLink(false);
 		}
-	}, [member, isInvited, onClose]);
+	}, [member, isInvited, setLinkType, onClose]);
 
 	const [copyState, copyToClipboard] = useCopyToClipboard();
-	const handleCopyResetLink = useCallback((): void => {
+	const handleCopyResetLink = useCallback(async (): Promise<void> => {
 		if (!resetLink) {
 			return;
 		}
 		copyToClipboard(resetLink);
+
 		setHasCopiedResetLink(true);
 		setTimeout(() => setHasCopiedResetLink(false), 2000);
-		const message =
+		toast.success(
 			linkType === 'invite'
 				? 'Invite link copied to clipboard'
-				: 'Reset link copied to clipboard';
-		toast.success(message, { richColors: true, position: 'top-right' });
+				: 'Reset link copied to clipboard',
+			{ richColors: true },
+		);
 	}, [resetLink, copyToClipboard, linkType]);
 
 	useEffect(() => {
 		if (copyState.error) {
 			toast.error('Failed to copy link', {
 				richColors: true,
-				position: 'top-right',
 			});
 		}
 	}, [copyState.error]);
@@ -384,183 +210,102 @@ function EditMemberDrawer({
 
 	const joinedOnLabel = isInvited ? 'Invited On' : 'Joined On';
 
-	const formatTimestamp = useCallback(
-		(ts: string | null | undefined): string => {
-			if (!ts) {
-				return '—';
-			}
-			const d = new Date(ts);
-			if (Number.isNaN(d.getTime())) {
-				return '—';
-			}
-			return formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.DASH_DATETIME);
-		},
-		[formatTimezoneAdjustedTimestamp],
-	);
-
-	const drawerBody = isFetchingUser ? (
-		<Skeleton active paragraph={{ rows: 6 }} />
-	) : (
-		<>
-			<div className="edit-member-drawer__field">
-				<label className="edit-member-drawer__label" htmlFor="member-name">
-					Name
-				</label>
-				<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
-					<Input
-						id="member-name"
-						value={localDisplayName}
-						onChange={(e): void => {
-							setLocalDisplayName(e.target.value);
-							setSaveErrors((prev) =>
-								prev.filter((err) => err.context !== 'Name update'),
-							);
-						}}
-						className="edit-member-drawer__input"
-						placeholder="Enter name"
-						disabled={isRootUser}
-					/>
-				</Tooltip>
-			</div>
-
-			<div className="edit-member-drawer__field">
-				<label className="edit-member-drawer__label" htmlFor="member-email">
-					Email Address
-				</label>
-				<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
-					<span className="edit-member-drawer__email-text">
-						{member?.email || '—'}
-					</span>
-					<LockKeyhole size={16} className="edit-member-drawer__lock-icon" />
-				</div>
-			</div>
-
-			<div className="edit-member-drawer__field">
-				<label className="edit-member-drawer__label" htmlFor="member-role">
-					Roles
-				</label>
-				{isSelf || isRootUser ? (
-					<Tooltip
-						title={isRootUser ? ROOT_USER_TOOLTIP : 'You cannot modify your own role'}
-					>
-						<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
-							<div className="edit-member-drawer__disabled-roles">
-								{localRoles.length > 0 ? (
-									localRoles.map((roleId) => {
-										const role = availableRoles.find((r) => r.id === roleId);
-										return (
-											<Badge key={roleId} color="vanilla">
-												{role?.name ?? roleId}
-											</Badge>
-										);
-									})
-								) : (
-									<span className="edit-member-drawer__email-text">—</span>
-								)}
-							</div>
-							<LockKeyhole size={16} className="edit-member-drawer__lock-icon" />
-						</div>
-					</Tooltip>
-				) : (
-					<RolesSelect
-						id="member-role"
-						mode="multiple"
-						roles={availableRoles}
-						loading={rolesLoading}
-						isError={rolesError}
-						error={rolesErrorObj}
-						onRefetch={refetchRoles}
-						value={localRoles}
-						onChange={(roles): void => {
-							setLocalRoles(roles);
-							setSaveErrors((prev) =>
-								prev.filter(
-									(err) =>
-										err.context !== 'Roles update' && !err.context.startsWith("Role '"),
-								),
-							);
-						}}
-						className="edit-member-drawer__role-select"
-						placeholder="Select roles"
-					/>
-				)}
-			</div>
-
-			<div className="edit-member-drawer__meta">
-				<div className="edit-member-drawer__meta-item">
-					<span className="edit-member-drawer__meta-label">Status</span>
-					{member?.status === MemberStatus.Active ? (
-						<Badge color="forest" variant="outline">
-							ACTIVE
-						</Badge>
-					) : (
-						<Badge color="amber" variant="outline">
-							INVITED
-						</Badge>
-					)}
-				</div>
-
-				<div className="edit-member-drawer__meta-item">
-					<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
-					<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
-				</div>
-				{!isInvited && (
-					<div className="edit-member-drawer__meta-item">
-						<span className="edit-member-drawer__meta-label">Last Modified</span>
-						<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
-					</div>
-				)}
-			</div>
-
-			{saveErrors.length > 0 && (
-				<div className="edit-member-drawer__save-errors">
-					{saveErrors.map((e) => (
-						<SaveErrorItem
-							key={e.context}
-							context={e.context}
-							apiError={e.apiError}
-							onRetry={e.onRetry}
-						/>
-					))}
-				</div>
-			)}
-		</>
-	);
-
 	const drawerContent = (
 		<div className="edit-member-drawer__layout">
-			<div className="edit-member-drawer__body">{drawerBody}</div>
+			<div className="edit-member-drawer__body">
+				<div className="edit-member-drawer__field">
+					<label className="edit-member-drawer__label" htmlFor="member-name">
+						Name
+					</label>
+					<Input
+						id="member-name"
+						value={displayName}
+						onChange={(e): void => setDisplayName(e.target.value)}
+						className="edit-member-drawer__input"
+						placeholder="Enter name"
+					/>
+				</div>
+
+				<div className="edit-member-drawer__field">
+					<label className="edit-member-drawer__label" htmlFor="member-email">
+						Email Address
+					</label>
+					<div className="edit-member-drawer__input-wrapper edit-member-drawer__input-wrapper--disabled">
+						<span className="edit-member-drawer__email-text">
+							{member?.email || '—'}
+						</span>
+						<LockKeyhole size={16} className="edit-member-drawer__lock-icon" />
+					</div>
+				</div>
+
+				<div className="edit-member-drawer__field">
+					<label className="edit-member-drawer__label" htmlFor="member-role">
+						Roles
+					</label>
+					<Select
+						id="member-role"
+						value={selectedRole}
+						onChange={(role): void => setSelectedRole(role as ROLES)}
+						className="edit-member-drawer__role-select"
+						suffixIcon={<ChevronDown size={14} />}
+						getPopupContainer={popupContainer}
+					>
+						<Select.Option value="ADMIN">{capitalize('ADMIN')}</Select.Option>
+						<Select.Option value="EDITOR">{capitalize('EDITOR')}</Select.Option>
+						<Select.Option value="VIEWER">{capitalize('VIEWER')}</Select.Option>
+					</Select>
+				</div>
+
+				<div className="edit-member-drawer__meta">
+					<div className="edit-member-drawer__meta-item">
+						<span className="edit-member-drawer__meta-label">Status</span>
+						{member?.status === MemberStatus.Active ? (
+							<Badge color="forest" variant="outline">
+								ACTIVE
+							</Badge>
+						) : (
+							<Badge color="amber" variant="outline">
+								INVITED
+							</Badge>
+						)}
+					</div>
+
+					<div className="edit-member-drawer__meta-item">
+						<span className="edit-member-drawer__meta-label">{joinedOnLabel}</span>
+						<Badge color="vanilla">{formatTimestamp(member?.joinedOn)}</Badge>
+					</div>
+					{!isInvited && (
+						<div className="edit-member-drawer__meta-item">
+							<span className="edit-member-drawer__meta-label">Last Modified</span>
+							<Badge color="vanilla">{formatTimestamp(member?.updatedAt)}</Badge>
+						</div>
+					)}
+				</div>
+			</div>
 
 			<div className="edit-member-drawer__footer">
 				<div className="edit-member-drawer__footer-left">
-					<Tooltip title={getDeleteTooltip(isRootUser, isSelf)}>
-						<span className="edit-member-drawer__tooltip-wrapper">
-							<Button
-								className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
-								onClick={(): void => setShowDeleteConfirm(true)}
-								disabled={isRootUser || isSelf}
-							>
-								<Trash2 size={12} />
-								{isInvited ? 'Revoke Invite' : 'Delete Member'}
-							</Button>
-						</span>
-					</Tooltip>
+					<Button
+						className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--danger"
+						onClick={(): void => setShowDeleteConfirm(true)}
+					>
+						<Trash2 size={12} />
+						{isInvited ? 'Revoke Invite' : 'Delete Member'}
+					</Button>
 
 					<div className="edit-member-drawer__footer-divider" />
-					<Tooltip title={isRootUser ? ROOT_USER_TOOLTIP : undefined}>
-						<span className="edit-member-drawer__tooltip-wrapper">
-							<Button
-								className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
-								onClick={handleGenerateResetLink}
-								disabled={isGeneratingLink || isRootUser}
-							>
-								<RefreshCw size={12} />
-								{isGeneratingLink && 'Generating...'}
-								{!isGeneratingLink && isInvited && 'Copy Invite Link'}
-								{!isGeneratingLink && !isInvited && 'Generate Password Reset Link'}
-							</Button>
-						</span>
-					</Tooltip>
+					<Button
+						className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
+						onClick={handleGenerateResetLink}
+						disabled={isGeneratingLink}
+					>
+						<RefreshCw size={12} />
+						{isGeneratingLink
+							? 'Generating...'
+							: isInvited
+							? 'Copy Invite Link'
+							: 'Generate Password Reset Link'}
+					</Button>
 				</div>
 
 				<div className="edit-member-drawer__footer-right">
@@ -573,7 +318,7 @@ function EditMemberDrawer({
 						variant="solid"
 						color="primary"
 						size="sm"
-						disabled={!isDirty || isSaving || isRootUser}
+						disabled={!isDirty || isSaving}
 						onClick={handleSave}
 					>
 						{isSaving ? 'Saving...' : 'Save Member Details'}
@@ -583,6 +328,22 @@ function EditMemberDrawer({
 		</div>
 	);
 
+	const deleteDialogTitle = isInvited ? 'Revoke Invite' : 'Delete Member';
+	const deleteDialogBody = isInvited ? (
+		<>
+			Are you sure you want to revoke the invite for{' '}
+			<strong>{member?.email}</strong>? They will no longer be able to join the
+			workspace using this invite.
+		</>
+	) : (
+		<>
+			Are you sure you want to delete{' '}
+			<strong>{member?.name || member?.email}</strong>? This will remove their
+			access to the workspace.
+		</>
+	);
+	const deleteConfirmLabel = isInvited ? 'Revoke Invite' : 'Delete Member';
+
 	return (
 		<>
 			<DrawerWrapper
@@ -602,25 +363,82 @@ function EditMemberDrawer({
 				className="edit-member-drawer"
 			/>
 
-			<ResetLinkDialog
+			<DialogWrapper
 				open={showResetLinkDialog}
-				linkType={linkType}
-				resetLink={resetLink}
-				hasCopied={hasCopiedResetLink}
-				onClose={(): void => {
-					setShowResetLinkDialog(false);
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						setShowResetLinkDialog(false);
+						setLinkType(null);
+					}
 				}}
-				onCopy={handleCopyResetLink}
-			/>
+				title={linkType === 'invite' ? 'Invite Link' : 'Password Reset Link'}
+				showCloseButton
+				width="base"
+				className="reset-link-dialog"
+			>
+				<div className="reset-link-dialog__content">
+					<p className="reset-link-dialog__description">
+						{linkType === 'invite'
+							? 'Share this one-time link with the team member to complete their account setup.'
+							: 'This creates a one-time link the team member can use to set a new password for their SigNoz account.'}
+					</p>
+					<div className="reset-link-dialog__link-row">
+						<div className="reset-link-dialog__link-text-wrap">
+							<span className="reset-link-dialog__link-text">{resetLink}</span>
+						</div>
+						<Button
+							variant="outlined"
+							color="secondary"
+							size="sm"
+							onClick={handleCopyResetLink}
+							prefixIcon={
+								hasCopiedResetLink ? <Check size={12} /> : <Copy size={12} />
+							}
+							className="reset-link-dialog__copy-btn"
+						>
+							{hasCopiedResetLink ? 'Copied!' : 'Copy'}
+						</Button>
+					</div>
+				</div>
+			</DialogWrapper>
 
-			<DeleteMemberDialog
+			<DialogWrapper
 				open={showDeleteConfirm}
-				isInvited={isInvited}
-				member={member}
-				isDeleting={isDeleting}
-				onClose={(): void => setShowDeleteConfirm(false)}
-				onConfirm={handleDelete}
-			/>
+				onOpenChange={(isOpen): void => {
+					if (!isOpen) {
+						setShowDeleteConfirm(false);
+					}
+				}}
+				title={deleteDialogTitle}
+				width="narrow"
+				className="alert-dialog delete-dialog"
+				showCloseButton={false}
+				disableOutsideClick={false}
+			>
+				<p className="delete-dialog__body">{deleteDialogBody}</p>
+
+				<DialogFooter className="delete-dialog__footer">
+					<Button
+						variant="solid"
+						color="secondary"
+						size="sm"
+						onClick={(): void => setShowDeleteConfirm(false)}
+					>
+						<X size={12} />
+						Cancel
+					</Button>
+					<Button
+						variant="solid"
+						color="destructive"
+						size="sm"
+						disabled={isDeleting}
+						onClick={handleDelete}
+					>
+						<Trash2 size={12} />
+						{isDeleting ? 'Processing...' : deleteConfirmLabel}
+					</Button>
+				</DialogFooter>
+			</DialogWrapper>
 		</>
 	);
 }

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -1,61 +0,0 @@
-import { Button } from '@signozhq/button';
-import { DialogWrapper } from '@signozhq/dialog';
-import { Check, Copy } from '@signozhq/icons';
-
-interface ResetLinkDialogProps {
-	open: boolean;
-	linkType: 'invite' | 'reset' | null;
-	resetLink: string | null;
-	hasCopied: boolean;
-	onClose: () => void;
-	onCopy: () => void;
-}
-
-function ResetLinkDialog({
-	open,
-	linkType,
-	resetLink,
-	hasCopied,
-	onClose,
-	onCopy,
-}: ResetLinkDialogProps): JSX.Element {
-	return (
-		<DialogWrapper
-			open={open}
-			onOpenChange={(isOpen): void => {
-				if (!isOpen) {
-					onClose();
-				}
-			}}
-			title={linkType === 'invite' ? 'Invite Link' : 'Password Reset Link'}
-			showCloseButton
-			width="base"
-			className="reset-link-dialog"
-		>
-			<div className="reset-link-dialog__content">
-				<p className="reset-link-dialog__description">
-					{linkType === 'invite'
-						? 'Share this one-time link with the team member to complete their account setup.'
-						: 'This creates a one-time link the team member can use to set a new password for their SigNoz account.'}
-				</p>
-				<div className="reset-link-dialog__link-row">
-					<div className="reset-link-dialog__link-text-wrap">
-						<span className="reset-link-dialog__link-text">{resetLink}</span>
-					</div>
-					<Button
-						variant="outlined"
-						color="secondary"
-						size="sm"
-						onClick={onCopy}
-						prefixIcon={hasCopied ? <Check size={12} /> : <Copy size={12} />}
-						className="reset-link-dialog__copy-btn"
-					>
-						{hasCopied ? 'Copied!' : 'Copy'}
-					</Button>
-				</div>
-			</div>
-		</DialogWrapper>
-	);
-}
-
-export default ResetLinkDialog;

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

@@ -4,19 +4,11 @@ import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getResetPasswordToken,
 	useDeleteUser,
-	useGetUser,
-	useRemoveUserRoleByUserIDAndRoleID,
-	useSetRoleByUserID,
-	useUpdateMyUserV2,
-	useUpdateUser,
+	useUpdateUserDeprecated,
 } from 'api/generated/services/users';
 import { MemberStatus } from 'container/MembersSettings/utils';
-import {
-	listRolesSuccessResponse,
-	managedRoles,
-} from 'mocks-server/__mockdata__/roles';
-import { rest, server } from 'mocks-server/server';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { ROLES } from 'types/roles';
 
 import EditMemberDrawer, { EditMemberDrawerProps } from '../EditMemberDrawer';
 
@@ -52,11 +44,7 @@ jest.mock('@signozhq/dialog', () => ({
 
 jest.mock('api/generated/services/users', () => ({
 	useDeleteUser: jest.fn(),
-	useGetUser: jest.fn(),
-	useUpdateUser: jest.fn(),
-	useUpdateMyUserV2: jest.fn(),
-	useSetRoleByUserID: jest.fn(),
-	useRemoveUserRoleByUserIDAndRoleID: jest.fn(),
+	useUpdateUserDeprecated: jest.fn(),
 	getResetPasswordToken: jest.fn(),
 }));
 
@@ -81,53 +69,25 @@ jest.mock('react-use', () => ({
 	],
 }));
 
-const ROLES_ENDPOINT = '*/api/v1/roles';
-
+const mockUpdateMutate = jest.fn();
 const mockDeleteMutate = jest.fn();
 const mockGetResetPasswordToken = jest.mocked(getResetPasswordToken);
 
-const mockFetchedUser = {
-	data: {
-		id: 'user-1',
-		displayName: 'Alice Smith',
-		email: 'alice@signoz.io',
-		status: 'active',
-		userRoles: [
-			{
-				id: 'ur-1',
-				roleId: managedRoles[0].id,
-				role: managedRoles[0], // signoz-admin
-			},
-		],
-	},
-};
-
 const activeMember = {
 	id: 'user-1',
 	name: 'Alice Smith',
 	email: 'alice@signoz.io',
+	role: 'ADMIN' as ROLES,
 	status: MemberStatus.Active,
 	joinedOn: '1700000000000',
 	updatedAt: '1710000000000',
 };
 
-const selfMember = {
-	...activeMember,
-	id: 'some-user-id',
-};
-
-const rootMockFetchedUser = {
-	data: {
-		...mockFetchedUser.data,
-		id: 'root-user-1',
-		isRoot: true,
-	},
-};
-
 const invitedMember = {
 	id: 'abc123',
 	name: '',
 	email: 'bob@signoz.io',
+	role: 'VIEWER' as ROLES,
 	status: MemberStatus.Invited,
 	joinedOn: '1700000000000',
 };
@@ -149,30 +109,8 @@ function renderDrawer(
 describe('EditMemberDrawer', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
-		server.use(
-			rest.get(ROLES_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-		(useGetUser as jest.Mock).mockReturnValue({
-			data: mockFetchedUser,
-			isLoading: false,
-			refetch: jest.fn(),
-		});
-		(useUpdateUser as jest.Mock).mockReturnValue({
-			mutateAsync: jest.fn().mockResolvedValue({}),
-			isLoading: false,
-		});
-		(useUpdateMyUserV2 as jest.Mock).mockReturnValue({
-			mutateAsync: jest.fn().mockResolvedValue({}),
-			isLoading: false,
-		});
-		(useSetRoleByUserID as jest.Mock).mockReturnValue({
-			mutateAsync: jest.fn().mockResolvedValue({}),
-			isLoading: false,
-		});
-		(useRemoveUserRoleByUserIDAndRoleID as jest.Mock).mockReturnValue({
-			mutateAsync: jest.fn().mockResolvedValue({}),
+		(useUpdateUserDeprecated as jest.Mock).mockReturnValue({
+			mutate: mockUpdateMutate,
 			isLoading: false,
 		});
 		(useDeleteUser as jest.Mock).mockReturnValue({
@@ -181,10 +119,6 @@ describe('EditMemberDrawer', () => {
 		});
 	});
 
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
 	it('renders active member details and disables Save when form is not dirty', () => {
 		renderDrawer();
 
@@ -196,15 +130,16 @@ describe('EditMemberDrawer', () => {
 		).toBeDisabled();
 	});
 
-	it('enables Save after editing name and calls updateUser on confirm', async () => {
+	it('enables Save after editing name and calls update API on confirm', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const mockMutateAsync = jest.fn().mockResolvedValue({});
 
-		(useUpdateUser as jest.Mock).mockReturnValue({
-			mutateAsync: mockMutateAsync,
+		(useUpdateUserDeprecated as jest.Mock).mockImplementation((options) => ({
+			mutate: mockUpdateMutate.mockImplementation(() => {
+				options?.mutation?.onSuccess?.();
+			}),
 			isLoading: false,
-		});
+		}));
 
 		renderDrawer({ onComplete });
 
@@ -218,92 +153,12 @@ describe('EditMemberDrawer', () => {
 		await user.click(saveBtn);
 
 		await waitFor(() => {
-			expect(mockMutateAsync).toHaveBeenCalledWith({
-				pathParams: { id: 'user-1' },
-				data: { displayName: 'Alice Updated' },
-			});
-			expect(onComplete).toHaveBeenCalled();
-		});
-	});
-
-	it('does not close the drawer after a successful save', async () => {
-		const onClose = jest.fn();
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		renderDrawer({ onClose });
-
-		const nameInput = screen.getByDisplayValue('Alice Smith');
-		await user.clear(nameInput);
-		await user.type(nameInput, 'Alice Updated');
-
-		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
-		await user.click(saveBtn);
-
-		await waitFor(() => {
-			expect(
-				screen.getByRole('button', { name: /save member details/i }),
-			).toBeInTheDocument();
-		});
-		expect(onClose).not.toHaveBeenCalled();
-	});
-
-	it('calls setRole when a new role is added', async () => {
-		const onComplete = jest.fn();
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const mockSet = jest.fn().mockResolvedValue({});
-
-		(useSetRoleByUserID as jest.Mock).mockReturnValue({
-			mutateAsync: mockSet,
-			isLoading: false,
-		});
-
-		renderDrawer({ onComplete });
-
-		// Open the roles dropdown and select signoz-editor
-		await user.click(screen.getByLabelText('Roles'));
-		await user.click(await screen.findByTitle('signoz-editor'));
-
-		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
-		await user.click(saveBtn);
-
-		await waitFor(() => {
-			expect(mockSet).toHaveBeenCalledWith({
-				pathParams: { id: 'user-1' },
-				data: { name: 'signoz-editor' },
-			});
-			expect(onComplete).toHaveBeenCalled();
-		});
-	});
-
-	it('calls removeRole when an existing role is removed', async () => {
-		const onComplete = jest.fn();
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const mockRemove = jest.fn().mockResolvedValue({});
-
-		(useRemoveUserRoleByUserIDAndRoleID as jest.Mock).mockReturnValue({
-			mutateAsync: mockRemove,
-			isLoading: false,
-		});
-
-		renderDrawer({ onComplete });
-
-		// Wait for the signoz-admin tag to appear, then click its remove button
-		const adminTag = await screen.findByTitle('signoz-admin');
-		const removeBtn = adminTag.querySelector(
-			'.ant-select-selection-item-remove',
-		) as Element;
-		await user.click(removeBtn);
-
-		const saveBtn = screen.getByRole('button', { name: /save member details/i });
-		await waitFor(() => expect(saveBtn).not.toBeDisabled());
-		await user.click(saveBtn);
-
-		await waitFor(() => {
-			expect(mockRemove).toHaveBeenCalledWith({
-				pathParams: { id: 'user-1', roleId: managedRoles[0].id },
-			});
+			expect(mockUpdateMutate).toHaveBeenCalledWith(
+				expect.objectContaining({
+					pathParams: { id: 'user-1' },
+					data: expect.objectContaining({ displayName: 'Alice Updated' }),
+				}),
+			);
 			expect(onComplete).toHaveBeenCalled();
 		});
 	});
@@ -384,33 +239,16 @@ describe('EditMemberDrawer', () => {
 		});
 	});
 
-	it('calls updateUser when saving name change for an invited member', async () => {
+	it('calls update API when saving changes for an invited member', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const mockMutateAsync = jest.fn().mockResolvedValue({});
 
-		(useGetUser as jest.Mock).mockReturnValue({
-			data: {
-				data: {
-					...mockFetchedUser.data,
-					id: 'abc123',
-					displayName: 'Bob',
-					userRoles: [
-						{
-							id: 'ur-2',
-							roleId: managedRoles[2].id,
-							role: managedRoles[2], // signoz-viewer
-						},
-					],
-				},
-			},
+		(useUpdateUserDeprecated as jest.Mock).mockImplementation((options) => ({
+			mutate: mockUpdateMutate.mockImplementation(() => {
+				options?.mutation?.onSuccess?.();
+			}),
 			isLoading: false,
-			refetch: jest.fn(),
-		});
-		(useUpdateUser as jest.Mock).mockReturnValue({
-			mutateAsync: mockMutateAsync,
-			isLoading: false,
-		});
+		}));
 
 		renderDrawer({ member: { ...invitedMember, name: 'Bob' }, onComplete });
 
@@ -423,10 +261,12 @@ describe('EditMemberDrawer', () => {
 		await user.click(saveBtn);
 
 		await waitFor(() => {
-			expect(mockMutateAsync).toHaveBeenCalledWith({
-				pathParams: { id: 'abc123' },
-				data: { displayName: 'Bob Updated' },
-			});
+			expect(mockUpdateMutate).toHaveBeenCalledWith(
+				expect.objectContaining({
+					pathParams: { id: 'abc123' },
+					data: expect.objectContaining({ displayName: 'Bob Updated' }),
+				}),
+			);
 			expect(onComplete).toHaveBeenCalled();
 		});
 	});
@@ -440,13 +280,16 @@ describe('EditMemberDrawer', () => {
 			} as ReturnType<typeof convertToApiError>);
 		});
 
-		it('shows SaveErrorItem when updateUser fails for name change', async () => {
+		it('shows API error message when updateUser fails', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			const mockToast = jest.mocked(toast);
 
-			(useUpdateUser as jest.Mock).mockReturnValue({
-				mutateAsync: jest.fn().mockRejectedValue(new Error('server error')),
+			(useUpdateUserDeprecated as jest.Mock).mockImplementation((options) => ({
+				mutate: mockUpdateMutate.mockImplementation(() => {
+					options?.mutation?.onError?.({});
+				}),
 				isLoading: false,
-			});
+			}));
 
 			renderDrawer();
 
@@ -459,9 +302,10 @@ describe('EditMemberDrawer', () => {
 			await user.click(saveBtn);
 
 			await waitFor(() => {
-				expect(
-					screen.getByText('Name update: Something went wrong on server'),
-				).toBeInTheDocument();
+				expect(mockToast.error).toHaveBeenCalledWith(
+					'Failed to update member details: Something went wrong on server',
+					expect.anything(),
+				);
 			});
 		});
 
@@ -520,96 +364,6 @@ describe('EditMemberDrawer', () => {
 		});
 	});
 
-	describe('self user (isSelf)', () => {
-		it('disables Delete button when viewing own profile', () => {
-			renderDrawer({ member: selfMember });
-			expect(
-				screen.getByRole('button', { name: /delete member/i }),
-			).toBeDisabled();
-		});
-
-		it('does not open delete confirm dialog when Delete is clicked while disabled (isSelf)', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			renderDrawer({ member: selfMember });
-
-			await user.click(screen.getByRole('button', { name: /delete member/i }));
-
-			expect(
-				screen.queryByText(/are you sure you want to delete/i),
-			).not.toBeInTheDocument();
-		});
-
-		it('keeps name input enabled when viewing own profile', () => {
-			renderDrawer({ member: selfMember });
-			expect(screen.getByDisplayValue('Alice Smith')).not.toBeDisabled();
-		});
-
-		it('keeps Reset Link button enabled when viewing own profile', () => {
-			renderDrawer({ member: selfMember });
-			expect(
-				screen.getByRole('button', { name: /generate password reset link/i }),
-			).not.toBeDisabled();
-		});
-	});
-
-	describe('root user', () => {
-		beforeEach(() => {
-			(useGetUser as jest.Mock).mockReturnValue({
-				data: rootMockFetchedUser,
-				isLoading: false,
-				refetch: jest.fn(),
-			});
-		});
-
-		it('disables name input for root user', () => {
-			renderDrawer();
-			expect(screen.getByDisplayValue('Alice Smith')).toBeDisabled();
-		});
-
-		it('disables Delete button for root user', () => {
-			renderDrawer();
-			expect(
-				screen.getByRole('button', { name: /delete member/i }),
-			).toBeDisabled();
-		});
-
-		it('disables Reset Link button for root user', () => {
-			renderDrawer();
-			expect(
-				screen.getByRole('button', { name: /generate password reset link/i }),
-			).toBeDisabled();
-		});
-
-		it('disables Save button for root user', () => {
-			renderDrawer();
-			expect(
-				screen.getByRole('button', { name: /save member details/i }),
-			).toBeDisabled();
-		});
-
-		it('does not open delete confirm dialog when Delete is clicked while disabled (root)', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			renderDrawer();
-
-			await user.click(screen.getByRole('button', { name: /delete member/i }));
-
-			expect(
-				screen.queryByText(/are you sure you want to delete/i),
-			).not.toBeInTheDocument();
-		});
-
-		it('does not call getResetPasswordToken when Reset Link is clicked while disabled (root)', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			renderDrawer();
-
-			await user.click(
-				screen.getByRole('button', { name: /generate password reset link/i }),
-			);
-
-			expect(mockGetResetPasswordToken).not.toHaveBeenCalled();
-		});
-	});
-
 	describe('Generate Password Reset Link', () => {
 		beforeEach(() => {
 			mockCopyToClipboard.mockClear();

frontend/src/components/ErrorModal/ErrorModal.styles.scss

@@ -5,7 +5,7 @@
 		align-items: center;
 		gap: 4px;
 		border-radius: 20px;
-		background: color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+		background: rgba(229, 72, 77, 0.2);
 		padding-left: 3px;
 		padding-right: 8px;
 		cursor: pointer;
@@ -21,11 +21,11 @@
 	&__wrap {
 		background: linear-gradient(
 			180deg,
-			color-mix(in srgb, var(--background) 12%, transparent) 0.07%,
-			color-mix(in srgb, var(--bg-sakura-950) 24%, transparent) 50.04%,
-			color-mix(in srgb, var(--bg-sakura-800) 36%, transparent) 75.02%,
-			color-mix(in srgb, var(--bg-sakura-600) 48%, transparent) 87.51%,
-			color-mix(in srgb, var(--bg-sakura-500) 60%, transparent) 100%
+			rgba(11, 12, 14, 0.12) 0.07%,
+			rgba(39, 8, 14, 0.24) 50.04%,
+			rgba(106, 29, 44, 0.36) 75.02%,
+			rgba(197, 57, 85, 0.48) 87.51%,
+			rgba(242, 71, 105, 0.6) 100%
 		);
 		-webkit-backdrop-filter: blur(10px);
 		backdrop-filter: blur(10px);
@@ -42,7 +42,7 @@
 	}
 	&__body {
 		padding: 0;
-		background: var(--l2-background);
+		background: var(--bg-ink-400);
 		overflow: hidden;
 		border-top-left-radius: 4px;
 		border-top-right-radius: 4px;
@@ -72,21 +72,21 @@
 				text-transform: uppercase;
 				&,
 				&:hover {
-					color: var(--l1-foreground);
+					color: var(--bg-vanilla-100);
 				}
 			}
 			&__value {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				pointer-events: none;
 			}
 		}
 		.close-button {
 			padding: 3px 7px;
-			background: var(--l2-background);
+			background: var(--bg-ink-400);
 			display: inline-flex;
 			align-items: center;
 			border-radius: 4px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-500);
 			box-shadow: none;
 		}
 	}
@@ -102,3 +102,17 @@
 		background: none !important;
 	}
 }
+
+.lightMode {
+	.error-modal {
+		&__body,
+		&__header .close-button {
+			background: var(--bg-vanilla-100);
+		}
+		&__header .close-button {
+			svg {
+				fill: var(--bg-vanilla-100);
+			}
+		}
+	}
+}

frontend/src/components/ErrorModal/components/ErrorContent.styles.scss

@@ -5,7 +5,7 @@
 	&__summary-section {
 		display: flex;
 		flex-direction: column;
-		border-bottom: 1px solid var(--l1-border);
+		border-bottom: 1px solid var(--bg-slate-400);
 	}
 
 	&__summary {
@@ -27,7 +27,7 @@
 	}
 
 	&__error-code {
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 		margin: 0;
 		font-size: 16px;
 		font-weight: 500;
@@ -37,7 +37,7 @@
 
 	&__error-message {
 		margin: 0;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 20px; /* 142.857% */
@@ -49,14 +49,14 @@
 		align-items: center;
 		gap: 6px;
 		padding: 9px 12.5px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-size: 12px;
 		font-weight: 400;
 		line-height: 18px; /* 150% */
 		letter-spacing: 0.12px;
 		border-radius: 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 		box-shadow: none;
 	}
 
@@ -68,7 +68,7 @@
 
 		.key-value-label {
 			width: fit-content;
-			border-color: var(--l1-border);
+			border-color: var(--bg-slate-400);
 			border-radius: 20px;
 			overflow: hidden;
 			&__key {
@@ -77,7 +77,7 @@
 			}
 			&__value {
 				padding-right: 10px;
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-size: 12px;
 				font-weight: 500;
 				line-height: 18px; /* 150% */
@@ -96,7 +96,7 @@
 				border-radius: 50%;
 			}
 			&-text {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 				font-size: 10px;
 				font-weight: 500;
 				line-height: 18px; /* 180% */
@@ -106,11 +106,7 @@
 		&-line {
 			flex: 1;
 			height: 8px;
-			background-image: radial-gradient(
-				circle,
-				var(--l3-background) 1px,
-				transparent 2px
-			);
+			background-image: radial-gradient(circle, #444c63 1px, transparent 2px);
 			background-size: 8px 11px;
 			background-position: top left;
 			padding: 6px;
@@ -133,11 +129,12 @@
 	&__message-item {
 		position: relative;
 		margin-bottom: 4px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-family: Geist Mono;
 		font-size: 12px;
 		font-weight: 400;
 		line-height: 18px;
+		color: var(--bg-vanilla-400);
 		padding: 3px 12px;
 		padding-left: 26px;
 	}
@@ -152,7 +149,7 @@
 		width: 2px;
 		height: 4px;
 		border-radius: 50px;
-		background: var(--l1-border);
+		background: var(--bg-slate-400);
 	}
 
 	&__scroll-hint {
@@ -167,7 +164,7 @@
 		justify-content: center;
 		align-items: center;
 		gap: 3px;
-		background: var(--l1-border);
+		background: var(--bg-slate-200);
 		border-radius: 20px;
 		box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
 			0px 66px 18px 0px rgba(0, 0, 0, 0.01), 0px 37px 22px 0px rgba(0, 0, 0, 0.03),
@@ -175,7 +172,7 @@
 	}
 
 	&__scroll-hint-text {
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 
 		font-size: 12px;
 		font-weight: 400;
@@ -183,3 +180,29 @@
 		letter-spacing: -0.06px;
 	}
 }
+
+.lightMode {
+	.error-content {
+		&__error-code {
+			color: var(--bg-ink-100);
+		}
+		&__error-message {
+			color: var(--bg-ink-400);
+		}
+		&__message-item {
+			color: var(--bg-ink-400);
+		}
+		&__message-badge {
+			&-label-text {
+				color: var(--bg-ink-400);
+			}
+			.key-value-label__value {
+				color: var(--bg-ink-400);
+			}
+		}
+		&__docs-button {
+			background: var(--bg-vanilla-100);
+			color: var(--bg-ink-100);
+		}
+	}
+}

frontend/src/components/GlobalTimeStoreAdapter/GlobalTimeStoreAdapter.tsx

@@ -1,52 +0,0 @@
-import { useEffect } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { refreshIntervalOptions } from 'container/TopNav/AutoRefreshV2/constants';
-import { Time } from 'container/TopNav/DateTimeSelectionV2/types';
-import { useGlobalTimeStore } from 'store/globalTime/globalTimeStore';
-import { createCustomTimeRange } from 'store/globalTime/utils';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-/**
- * Adapter component that syncs Redux global time state to Zustand store.
- * This component should be rendered once at the app level.
- *
- * It reads from the Redux globalTime reducer and updates the Zustand store
- * to provide a migration path from Redux to Zustand.
- */
-export function GlobalTimeStoreAdapter(): null {
-	const globalTime = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const setSelectedTime = useGlobalTimeStore((s) => s.setSelectedTime);
-
-	useEffect(() => {
-		// Convert the selectedTime to the new format
-		// If it's 'custom', store the min/max times in the custom format
-		const selectedTime =
-			globalTime.selectedTime === 'custom'
-				? createCustomTimeRange(globalTime.minTime, globalTime.maxTime)
-				: (globalTime.selectedTime as Time);
-
-		// Find refresh interval from Redux state
-		const refreshOption = refreshIntervalOptions.find(
-			(option) => option.key === globalTime.selectedAutoRefreshInterval,
-		);
-
-		const refreshInterval =
-			!globalTime.isAutoRefreshDisabled && refreshOption ? refreshOption.value : 0;
-
-		setSelectedTime(selectedTime, refreshInterval);
-	}, [
-		globalTime.selectedTime,
-		globalTime.isAutoRefreshDisabled,
-		globalTime.selectedAutoRefreshInterval,
-		globalTime.minTime,
-		globalTime.maxTime,
-		setSelectedTime,
-	]);
-
-	return null;
-}

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

@@ -1,227 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { Provider } from 'react-redux';
-import { act, render, renderHook } from '@testing-library/react';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-import configureStore, { MockStoreEnhanced } from 'redux-mock-store';
-import { useGlobalTimeStore } from 'store/globalTime/globalTimeStore';
-import { createCustomTimeRange } from 'store/globalTime/utils';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import { GlobalTimeStoreAdapter } from '../GlobalTimeStoreAdapter';
-
-const mockStore = configureStore<Partial<AppState>>([]);
-
-const randomTime = 1700000000000000000;
-
-describe('GlobalTimeStoreAdapter', () => {
-	let store: MockStoreEnhanced<Partial<AppState>>;
-
-	const createGlobalTimeState = (
-		overrides: Partial<GlobalReducer> = {},
-	): GlobalReducer => ({
-		minTime: randomTime,
-		maxTime: randomTime,
-		loading: false,
-		selectedTime: '15m',
-		isAutoRefreshDisabled: true,
-		selectedAutoRefreshInterval: 'off',
-		...overrides,
-	});
-
-	beforeEach(() => {
-		// Reset Zustand store before each test
-		const { result } = renderHook(() => useGlobalTimeStore());
-		act(() => {
-			result.current.setSelectedTime(DEFAULT_TIME_RANGE, 0);
-		});
-	});
-
-	it('should render null because it just an adapter', () => {
-		store = mockStore({
-			globalTime: createGlobalTimeState(),
-		});
-
-		const { container } = render(
-			<Provider store={store}>
-				<GlobalTimeStoreAdapter />
-			</Provider>,
-		);
-
-		expect(container.firstChild).toBeNull();
-	});
-
-	it('should sync relative time from Redux to Zustand store', () => {
-		store = mockStore({
-			globalTime: createGlobalTimeState({
-				selectedTime: '15m',
-				isAutoRefreshDisabled: true,
-				selectedAutoRefreshInterval: 'off',
-			}),
-		});
-
-		render(
-			<Provider store={store}>
-				<GlobalTimeStoreAdapter />
-			</Provider>,
-		);
-
-		const { result } = renderHook(() => useGlobalTimeStore());
-		expect(result.current.selectedTime).toBe('15m');
-		expect(result.current.refreshInterval).toBe(0);
-		expect(result.current.isRefreshEnabled).toBe(false);
-	});
-
-	it('should sync custom time from Redux to Zustand store', () => {
-		store = mockStore({
-			globalTime: createGlobalTimeState({
-				selectedTime: 'custom',
-				minTime: randomTime,
-				maxTime: randomTime,
-				isAutoRefreshDisabled: true,
-			}),
-		});
-
-		render(
-			<Provider store={store}>
-				<GlobalTimeStoreAdapter />
-			</Provider>,
-		);
-
-		const { result } = renderHook(() => useGlobalTimeStore());
-		expect(result.current.selectedTime).toBe(
-			createCustomTimeRange(randomTime, randomTime),
-		);
-		expect(result.current.isRefreshEnabled).toBe(false);
-	});
-
-	it('should sync refresh interval when auto refresh is enabled', () => {
-		store = mockStore({
-			globalTime: createGlobalTimeState({
-				selectedTime: '15m',
-				isAutoRefreshDisabled: false,
-				selectedAutoRefreshInterval: '5s',
-			}),
-		});
-
-		render(
-			<Provider store={store}>
-				<GlobalTimeStoreAdapter />
-			</Provider>,
-		);
-
-		const { result } = renderHook(() => useGlobalTimeStore());
-		expect(result.current.selectedTime).toBe('15m');
-		expect(result.current.refreshInterval).toBe(5000); // 5s = 5000ms
-		expect(result.current.isRefreshEnabled).toBe(true);
-	});
-
-	it('should set refreshInterval to 0 when auto refresh is disabled', () => {
-		store = mockStore({
-			globalTime: createGlobalTimeState({
-				selectedTime: '15m',
-				isAutoRefreshDisabled: true,
-				selectedAutoRefreshInterval: '5s', // Even with interval set, should be 0 when disabled
-			}),
-		});
-
-		render(
-			<Provider store={store}>
-				<GlobalTimeStoreAdapter />
-			</Provider>,
-		);
-
-		const { result } = renderHook(() => useGlobalTimeStore());
-		expect(result.current.refreshInterval).toBe(0);
-		expect(result.current.isRefreshEnabled).toBe(false);
-	});
-
-	it('should update Zustand store when Redux state changes', () => {
-		store = mockStore({
-			globalTime: createGlobalTimeState({
-				selectedTime: '15m',
-				isAutoRefreshDisabled: true,
-			}),
-		});
-
-		const { rerender } = render(
-			<Provider store={store}>
-				<GlobalTimeStoreAdapter />
-			</Provider>,
-		);
-
-		// Verify initial state
-		let zustandState = renderHook(() => useGlobalTimeStore());
-		expect(zustandState.result.current.selectedTime).toBe('15m');
-
-		// Update Redux store
-		const newStore = mockStore({
-			globalTime: createGlobalTimeState({
-				selectedTime: '1h',
-				isAutoRefreshDisabled: false,
-				selectedAutoRefreshInterval: '30s',
-			}),
-		});
-
-		rerender(
-			<Provider store={newStore}>
-				<GlobalTimeStoreAdapter />
-			</Provider>,
-		);
-
-		// Verify updated state
-		zustandState = renderHook(() => useGlobalTimeStore());
-		expect(zustandState.result.current.selectedTime).toBe('1h');
-		expect(zustandState.result.current.refreshInterval).toBe(30000); // 30s = 30000ms
-		expect(zustandState.result.current.isRefreshEnabled).toBe(true);
-	});
-
-	it('should handle various refresh interval options', () => {
-		const testCases = [
-			{ key: '5s', expectedValue: 5000 },
-			{ key: '10s', expectedValue: 10000 },
-			{ key: '30s', expectedValue: 30000 },
-			{ key: '1m', expectedValue: 60000 },
-			{ key: '5m', expectedValue: 300000 },
-		];
-
-		testCases.forEach(({ key, expectedValue }) => {
-			store = mockStore({
-				globalTime: createGlobalTimeState({
-					selectedTime: '15m',
-					isAutoRefreshDisabled: false,
-					selectedAutoRefreshInterval: key,
-				}),
-			});
-
-			render(
-				<Provider store={store}>
-					<GlobalTimeStoreAdapter />
-				</Provider>,
-			);
-
-			const { result } = renderHook(() => useGlobalTimeStore());
-			expect(result.current.refreshInterval).toBe(expectedValue);
-		});
-	});
-
-	it('should handle unknown refresh interval by setting 0', () => {
-		store = mockStore({
-			globalTime: createGlobalTimeState({
-				selectedTime: '15m',
-				isAutoRefreshDisabled: false,
-				selectedAutoRefreshInterval: 'unknown-interval',
-			}),
-		});
-
-		render(
-			<Provider store={store}>
-				<GlobalTimeStoreAdapter />
-			</Provider>,
-		);
-
-		const { result } = renderHook(() => useGlobalTimeStore());
-		expect(result.current.refreshInterval).toBe(0);
-		expect(result.current.isRefreshEnabled).toBe(false);
-	});
-});

frontend/src/components/Header/Header.styles.scss

@@ -5,8 +5,9 @@
 	padding: 8px 16px;
 	height: 48px;
 	box-sizing: border-box;
-	background: var(--l1-background);
+	background: rgba(11, 12, 14, 0.9);
 	backdrop-filter: blur(20px);
+	border-bottom: 1px solid var(--Slate-500, #161922);
 }
 
 .header-left {
@@ -18,3 +19,11 @@
 	display: flex;
 	align-items: center;
 }
+
+.lightMode {
+	.header-container {
+		background: var(--bg-vanilla-100);
+		backdrop-filter: blur(20px);
+		border-bottom: 1px solid var(--bg-vanilla-300);
+	}
+}

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

@@ -23,7 +23,7 @@
 		justify-content: space-between;
 
 		.absolute-relative-time-toggler-label {
-			color: var(--l1-foreground);
+			color: var(--bg-vanilla-100);
 			font-size: 13px;
 			font-style: normal;
 			font-weight: 500;
@@ -40,7 +40,7 @@
 
 	.absolute-relative-time-error {
 		font-size: 12px;
-		color: var(--accent-amber);
+		color: var(--bg-amber-600);
 	}
 
 	.share-link {
@@ -57,7 +57,7 @@
 
 				.url-share-title,
 				.url-share-sub-title {
-					color: var(--l1-foreground);
+					color: var(--bg-vanilla-100);
 					font-size: 13px;
 					font-style: normal;
 					font-weight: 500;
@@ -67,7 +67,7 @@
 
 				.url-share-sub-title {
 					font-size: 12px;
-					color: var(--l3-foreground);
+					color: var(--bg-vanilla-300);
 					font-weight: 400;
 					line-height: 18px;
 					letter-spacing: -0.06px;
@@ -86,14 +86,14 @@
 			flex: 1;
 			margin: 0px !important;
 
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-400);
 
 			&:before {
 				display: none;
 			}
 
 			.ant-radio-button-checked {
-				background-color: var(--l3-background);
+				background-color: var(--bg-slate-400);
 			}
 		}
 
@@ -108,15 +108,15 @@
 			}
 
 			.feedback-tab {
-				background-color: var(--danger-background);
+				background-color: var(--bg-sakura-500);
 			}
 
 			.bug-tab {
-				background-color: var(--warning-background);
+				background-color: var(--bg-amber-500);
 			}
 
 			.feature-tab {
-				background-color: var(--primary-background);
+				background-color: var(--bg-robin-500);
 			}
 		}
 
@@ -125,9 +125,9 @@
 				padding: 6px 16px;
 
 				border-radius: 2px;
-				background: var(--l2-background);
+				background: var(--bg-ink-400);
 				box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
-				border: 1px solid var(--l1-border);
+				border: 1px solid var(--bg-slate-400);
 
 				margin: 0 !important;
 
@@ -140,13 +140,13 @@
 				}
 
 				&-active {
-					background: var(--l3-background);
-					color: var(--l1-foreground);
+					background: var(--bg-slate-400);
+					color: var(--bg-vanilla-100);
 
 					border-bottom: none !important;
 
 					.ant-tabs-tab-btn {
-						color: var(--l1-foreground);
+						color: var(--bg-vanilla-100);
 					}
 				}
 			}
@@ -181,7 +181,7 @@
 
 		.feedback-modal-content-footer-info-text {
 			font-size: 12px;
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400, #c0c1c3);
 			text-align: center;
 
 			/* button/ small  */
@@ -200,3 +200,54 @@
 		}
 	}
 }
+
+.lightMode {
+	.share-modal-content,
+	.feedback-modal-container {
+		.absolute-relative-time-toggler-container {
+			.absolute-relative-time-toggler-label {
+				color: var(--bg-ink-400);
+			}
+		}
+
+		.share-link {
+			.url-share-container {
+				.url-share-container-header {
+					.url-share-title,
+					.url-share-sub-title {
+						color: var(--bg-ink-400);
+					}
+
+					.url-share-sub-title {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+	}
+
+	.feedback-modal-container {
+		.feedback-modal-tabs {
+			.ant-radio-button-wrapper {
+				flex: 1;
+				margin: 0px !important;
+
+				border: 1px solid var(--bg-vanilla-300);
+
+				&:before {
+					display: none;
+				}
+
+				.ant-radio-button-checked {
+					background-color: var(--bg-vanilla-300);
+				}
+			}
+		}
+
+		.feedback-modal-content-footer {
+			.feedback-modal-content-footer-info-text {
+				color: var(--bg-slate-400);
+			}
+		}
+	}
+}

frontend/src/components/HostMetricsDetail/Containers/Containers.styles.scss

@@ -28,7 +28,7 @@
 
 	.infra-container-card-text {
 		font-size: var(--font-size-sm);
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		width: 400px;
@@ -44,7 +44,7 @@
 		align-items: flex-start;
 		gap: 12px;
 		border-radius: 4px;
-		background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+		background: rgba(171, 189, 255, 0.04);
 
 		.ant-space {
 			align-items: flex-start;
@@ -58,3 +58,9 @@
 		margin: auto;
 	}
 }
+
+.lightMode {
+	.infra-container-card-text {
+		color: var(--text-ink-200);
+	}
+}

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.styles.scss

@@ -9,15 +9,15 @@
 		gap: 8px;
 		padding: 12px;
 		border-radius: 3px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-500);
 
 		.filter-section {
 			flex: 1;
 
 			.ant-select-selector {
 				border-radius: 2px;
-				border: 1px solid var(--l1-border) !important;
-				background-color: var(--l3-background) !important;
+				border: 1px solid var(--bg-slate-400) !important;
+				background-color: var(--bg-ink-300) !important;
 
 				input {
 					font-size: 12px;
@@ -37,7 +37,7 @@
 
 		.ant-table {
 			border-radius: 3px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-500);
 
 			.ant-table-thead > tr > th {
 				padding: 12px;
@@ -45,10 +45,10 @@
 				font-size: 12px;
 				line-height: 18px;
 
-				background: color-mix(in srgb, var(--bg-robin-200) 1%, transparent);
+				background: rgba(171, 189, 255, 0.01);
 				border-bottom: none;
 
-				color: var(--l2-foreground);
+				color: var(--Vanilla-400, #c0c1c3);
 				font-family: Inter;
 				font-size: 11px;
 				font-style: normal;
@@ -63,23 +63,23 @@
 			}
 
 			.ant-table-thead > tr > th:has(.hostname-column-header) {
-				background: var(--l2-background);
+				background: var(--bg-ink-400);
 			}
 
 			.ant-table-cell {
 				padding: 12px;
 				font-size: 13px;
 				line-height: 20px;
-				color: var(--l1-foreground);
-				background: color-mix(in srgb, var(--bg-robin-200) 1%, transparent);
+				color: var(--bg-vanilla-100);
+				background: rgba(171, 189, 255, 0.01);
 			}
 
 			.ant-table-cell:has(.hostname-column-value) {
-				background: var(--l2-background);
+				background: var(--bg-ink-400);
 			}
 
 			.hostname-column-value {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 				font-family: 'Geist Mono';
 				font-style: normal;
 				font-weight: 600;
@@ -105,7 +105,7 @@
 			}
 
 			.ant-table-tbody > tr:hover > td {
-				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
+				background: rgba(255, 255, 255, 0.04);
 			}
 
 			.ant-table-cell:first-child {
@@ -143,3 +143,51 @@
 		}
 	}
 }
+
+.lightMode {
+	.host-metric-traces-header {
+		.filter-section {
+			border-top: 1px solid var(--bg-vanilla-300);
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.ant-select-selector {
+				border-color: var(--bg-vanilla-300) !important;
+				background-color: var(--bg-vanilla-100) !important;
+				color: var(--bg-ink-200);
+			}
+		}
+	}
+
+	.host-metric-traces-table {
+		.ant-table {
+			border-radius: 3px;
+			border: 1px solid var(--bg-vanilla-300);
+
+			.ant-table-thead > tr > th {
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
+			}
+
+			.ant-table-thead > tr > th:has(.hostname-column-header) {
+				background: var(--bg-vanilla-100);
+			}
+
+			.ant-table-cell {
+				background: var(--bg-vanilla-100);
+				color: var(--bg-ink-500);
+			}
+
+			.ant-table-cell:has(.hostname-column-value) {
+				background: var(--bg-vanilla-100);
+			}
+
+			.hostname-column-value {
+				color: var(--bg-ink-300);
+			}
+
+			.ant-table-tbody > tr:hover > td {
+				background: rgba(0, 0, 0, 0.04);
+			}
+		}
+	}
+}

frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss

@@ -1,6 +1,6 @@
 .host-detail-drawer {
-	border-left: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border-left: 1px solid var(--bg-slate-500);
+	background: var(--bg-ink-400);
 	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 
 	.ant-drawer-header {
@@ -9,8 +9,8 @@
 
 		align-items: stretch;
 
-		border-bottom: 1px solid var(--l1-border);
-		background: var(--l2-background);
+		border-bottom: 1px solid var(--bg-slate-500);
+		background: var(--bg-ink-400);
 	}
 
 	.ant-drawer-close {
@@ -24,7 +24,7 @@
 	}
 
 	.title {
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);
 		font-family: 'Geist Mono';
 		font-size: 14px;
 		font-style: normal;
@@ -38,8 +38,8 @@
 		align-items: center;
 		justify-content: center;
 		padding-top: var(--padding-1);
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
 
@@ -58,7 +58,7 @@
 			}
 
 			.host-details-metadata-label {
-				color: var(--l2-foreground);
+				color: var(--text-vanilla-400);
 				font-family: Inter;
 				font-size: 11px;
 				font-style: normal;
@@ -97,7 +97,7 @@
 
 			.ant-card {
 				&.ant-card-bordered {
-					border: 1px solid var(--l1-border) !important;
+					border: 1px solid var(--bg-slate-500) !important;
 				}
 			}
 		}
@@ -111,8 +111,8 @@
 
 		.action-btn {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			display: flex;
 			align-items: center;
@@ -127,7 +127,7 @@
 		align-items: center;
 
 		.views-tabs {
-			color: var(--l2-foreground);
+			color: var(--text-vanilla-400);
 
 			.view-title {
 				display: flex;
@@ -140,22 +140,22 @@
 			}
 
 			.tab {
-				border: 1px solid var(--l1-border);
+				border: 1px solid var(--bg-slate-400);
 				width: 114px;
 			}
 
 			.tab::before {
-				background: var(--l1-border);
+				background: var(--bg-slate-400);
 			}
 
 			.selected_view {
-				background: var(--l3-background);
-				color: var(--l1-foreground);
-				border: 1px solid var(--l1-border);
+				background: var(--bg-slate-300);
+				color: var(--text-vanilla-100);
+				border: 1px solid var(--bg-slate-400);
 			}
 
 			.selected_view::before {
-				background: var(--l1-border);
+				background: var(--bg-slate-400);
 			}
 		}
 
@@ -164,8 +164,8 @@
 			height: 30px;
 
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 		}
 	}
@@ -174,3 +174,60 @@
 		padding: 0px;
 	}
 }
+
+.lightMode {
+	.ant-drawer-header {
+		border-bottom: 1px solid var(--bg-vanilla-400);
+		background: var(--bg-vanilla-100);
+	}
+
+	.host-detail-drawer {
+		.title {
+			color: var(--text-ink-300);
+		}
+
+		.host-detail-drawer__host {
+			.ant-typography {
+				color: var(--text-ink-300);
+				background: transparent;
+			}
+		}
+
+		.radio-button {
+			border: 1px solid var(--bg-vanilla-400);
+			background: var(--bg-vanilla-100);
+			color: var(--text-ink-300);
+		}
+
+		.views-tabs {
+			.tab {
+				background: var(--bg-vanilla-100);
+			}
+
+			.selected_view {
+				background: var(--bg-vanilla-300);
+				border: 1px solid var(--bg-slate-300);
+				color: var(--text-ink-400);
+			}
+
+			.selected_view::before {
+				background: var(--bg-vanilla-300);
+				border-left: 1px solid var(--bg-slate-300);
+			}
+		}
+
+		.compass-button {
+			border: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-100);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		}
+
+		.tabs-and-search {
+			.action-btn {
+				border: 1px solid var(--bg-vanilla-400);
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
+			}
+		}
+	}
+}

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogs.styles.scss

@@ -6,7 +6,8 @@
 
 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border) !important;
+			border: 1px solid var(--bg-slate-400) !important;
+			background-color: var(--bg-ink-300) !important;
 
 			input {
 				font-size: 12px;
@@ -25,7 +26,7 @@
 
 		padding: 12px;
 		border-radius: 3px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-500);
 	}
 
 	.host-metrics-logs {
@@ -44,11 +45,11 @@
 			}
 
 			&::-webkit-scrollbar-thumb {
-				background: var(--l1-border);
+				background: var(--bg-slate-300);
 			}
 
 			&::-webkit-scrollbar-thumb:hover {
-				background: var(--l1-border);
+				background: var(--bg-slate-200);
 			}
 
 			.ant-row {
@@ -117,3 +118,16 @@
 		gap: 16px;
 	}
 }
+
+.lightMode {
+	.filter-section {
+		border-top: 1px solid var(--bg-vanilla-300);
+		border-bottom: 1px solid var(--bg-vanilla-300);
+
+		.ant-select-selector {
+			border-color: var(--bg-vanilla-300) !important;
+			background-color: var(--bg-vanilla-100) !important;
+			color: var(--bg-ink-200);
+		}
+	}
+}

frontend/src/components/HostMetricsDetail/Metrics/Metrics.styles.scss

@@ -17,7 +17,7 @@
 	gap: 8px;
 	padding: 12px;
 	border-radius: 3px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-500);
 }
 
 .host-metrics-card {
@@ -25,7 +25,7 @@
 	height: 300px;
 	padding: 10px;
 
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-500);
 
 	.ant-card-body {
 		padding: 0;

frontend/src/components/HostMetricsDetail/Processes/Processes.styles.scss

@@ -28,7 +28,7 @@
 
 	.infra-container-card-text {
 		font-size: var(--font-size-sm);
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		width: 400px;
@@ -44,7 +44,7 @@
 		align-items: flex-start;
 		gap: 12px;
 		border-radius: 4px;
-		background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+		background: rgba(171, 189, 255, 0.04);
 
 		.ant-space {
 			align-items: flex-start;
@@ -58,3 +58,9 @@
 		margin: auto;
 	}
 }
+
+.lightMode {
+	.infra-container-card-text {
+		color: var(--text-ink-200);
+	}
+}

frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@signozhq/ui';
+import { Badge } from '@signozhq/badge';
 
 type BadgeColor =
 	| 'vanilla'

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -5,7 +5,7 @@
 	border-radius: 2px 0px 0px 2px;
 
 	.label {
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 500;
@@ -21,8 +21,8 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 
 		display: flex;
 		justify-content: flex-start;
@@ -36,7 +36,7 @@
 		font-family: 'Space Mono', monospace !important;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-400);
 
 		border-right: none;
 		border-left: none;
@@ -47,7 +47,7 @@
 		font-size: 12px !important;
 		line-height: 27px;
 		&::placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--bg-vanilla-400) !important;
 			font-size: 12px !important;
 		}
 		&[type='number']::-webkit-inner-spin-button,
@@ -61,8 +61,8 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 		height: 38px;
 		width: 38px;
 	}
@@ -70,8 +70,8 @@
 	&.labelAfter {
 		.input {
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
 		}
@@ -83,3 +83,31 @@
 		}
 	}
 }
+
+.lightMode {
+	.input-with-label {
+		.label {
+			color: var(--bg-ink-500) !important;
+
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		.input {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		.close-btn {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		&.labelAfter {
+			.input {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+}

frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss

@@ -19,7 +19,7 @@
 		font-weight: var(--label-base-400-font-weight);
 		line-height: var(--label-base-400-line-height);
 		letter-spacing: -0.065px;
-		color: var(--l1-foreground);
+		color: var(--bg-base-white);
 		margin: 0;
 	}
 
@@ -116,7 +116,7 @@
 	height: 32px;
 	color: var(--l1-foreground);
 	background-color: var(--l2-background);
-	border-color: var(--l1-border);
+	border-color: var(--border);
 	font-size: var(--paragraph-base-400-font-size);
 
 	&::placeholder {
@@ -149,7 +149,7 @@
 		.ant-select-selection-item {
 			font-size: var(--paragraph-base-400-font-size);
 			letter-spacing: -0.07px;
-			color: var(--l1-foreground);
+			color: var(--bg-base-white);
 			line-height: 32px;
 		}
 	}
@@ -181,7 +181,7 @@
 	box-shadow: none;
 
 	&:hover {
-		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
+		background: rgba(229, 72, 77, 0.1);
 		opacity: 0.9;
 	}
 }
@@ -196,8 +196,8 @@
 }
 
 .invite-team-members-error-callout {
-	background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
-	border: 1px solid color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+	background: rgba(229, 72, 77, 0.1);
+	border: 1px solid rgba(229, 72, 77, 0.2);
 	border-radius: 4px;
 	animation: horizontal-shaking 300ms ease-out;
 }
@@ -246,3 +246,19 @@
 		color: var(--l1-foreground);
 	}
 }
+
+.lightMode {
+	.invite-members-modal {
+		[data-slot='dialog-title'] {
+			color: var(--bg-base-black);
+		}
+	}
+
+	.team-member-role-select {
+		.ant-select-selector {
+			.ant-select-selection-item {
+				color: var(--bg-base-black);
+			}
+		}
+	}
+}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -197,16 +197,13 @@ function InviteMembersModal({
 					})),
 				});
 			}
-			toast.success('Invites sent successfully', {
-				richColors: true,
-				position: 'top-right',
-			});
+			toast.success('Invites sent successfully', { richColors: true });
 			resetAndClose();
 			onComplete?.();
 		} catch (err) {
 			const apiErr = err as APIError;
 			const errorMessage = apiErr?.getErrorMessage?.() ?? 'An error occurred';
-			toast.error(errorMessage, { richColors: true, position: 'top-right' });
+			toast.error(errorMessage, { richColors: true });
 		} finally {
 			setIsSubmitting(false);
 		}

frontend/src/components/LaunchChatSupport/LaunchChatSupport.styles.scss

@@ -8,6 +8,18 @@
 	}
 }
 
+.lightMode {
+	.facing-issue-button {
+		color: var(--bg-vanilla-500);
+		border-color: var(--bg-vanilla-300);
+
+		> .ant-btn:hover {
+			color: var(--bg-vanilla-500) !important;
+			border-color: var(--bg-vanilla-300) !important;
+		}
+	}
+}
+
 .tooltip-overlay {
 	text-wrap: nowrap;
 	.ant-tooltip-inner {

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

@@ -1,6 +1,6 @@
 .log-detail-drawer {
-	border-left: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border-left: 1px solid var(--bg-slate-500);
+	background: var(--bg-ink-400);
 	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 
 	.log-detail-drawer__title {
@@ -30,8 +30,8 @@
 
 		align-items: stretch;
 
-		border-bottom: 1px solid var(--l1-border);
-		background: var(--l2-background);
+		border-bottom: 1px solid var(--bg-slate-500);
+		background: var(--bg-ink-400);
 	}
 
 	.ant-drawer-close {
@@ -46,7 +46,7 @@
 	}
 
 	.title {
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);
 		font-family: Inter;
 		font-size: var(--font-size-sm);
 		font-style: normal;
@@ -60,8 +60,8 @@
 		align-items: center;
 		justify-content: center;
 		padding-top: var(--padding-1);
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
 
@@ -91,31 +91,31 @@
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
-			color: var(--l2-foreground);
+			color: var(--text-vanilla-400);
 			opacity: 0.6;
 		}
 
 		.log-type-indicator {
 			height: 24px;
-			border: 2px solid var(--l1-border);
+			border: 2px solid var(--bg-slate-400);
 			border-radius: 5px;
 			margin-left: 0;
 
 			&.INFO {
-				border-color: var(--l1-border);
+				border-color: #1d212d;
 			}
 
 			&.WARNING {
-				border-color: var(--bg-amber-400);
+				border-color: #ffcd56;
 			}
 
 			&.ERROR {
-				border-color: var(--bg-cherry-500);
+				border-color: #e5484d;
 			}
 		}
 
 		.log-overflow-shadow {
-			background: linear-gradient(270deg, var(--card) 10.4%, transparent 100%);
+			background: linear-gradient(270deg, #121317 10.4%, rgba(18, 19, 23, 0) 100%);
 
 			width: 196px;
 			position: absolute;
@@ -131,8 +131,8 @@
 
 		.action-btn {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			display: flex;
 			align-items: center;
@@ -146,7 +146,7 @@
 	}
 
 	.views-tabs {
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);
 
 		.view-title {
 			display: flex;
@@ -159,28 +159,28 @@
 		}
 
 		.tab {
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-400);
 			width: 114px;
 		}
 
 		.tab::before {
-			background: var(--l1-border);
+			background: var(--bg-slate-400);
 		}
 
 		.selected_view {
-			background: var(--l3-background);
-			color: var(--l1-foreground);
-			border: 1px solid var(--l1-border);
+			background: var(--bg-slate-300);
+			color: var(--text-vanilla-100);
+			border: 1px solid var(--bg-slate-400);
 		}
 
 		.selected_view::before {
-			background: var(--l1-border);
+			background: var(--bg-slate-400);
 		}
 	}
 
 	.search-input {
 		margin-top: var(--margin-2);
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-400);
 		height: 46px;
 		padding: var(--padding-1) var(--padding-2);
 		box-shadow: none;
@@ -197,8 +197,8 @@
 		right: 0;
 		padding: 8px 16px;
 		text-align: left;
-		color: var(--l3-foreground);
-		background: var(--l2-background);
+		color: var(--text-vanilla-200);
+		background: var(--bg-ink-400);
 		z-index: 10;
 
 		.log-detail-drawer__footer-hint-content {
@@ -210,7 +210,7 @@
 		.log-detail-drawer__footer-hint-icon {
 			display: inline;
 			vertical-align: middle;
-			color: var(--l3-foreground);
+			color: var(--text-vanilla-200);
 		}
 
 		.log-detail-drawer__footer-hint-text {
@@ -232,9 +232,9 @@
 		min-width: 28px;
 		height: 28px;
 		border-radius: 4px;
-		background: var(--l2-background);
-		color: var(--l2-foreground);
-		border: 1px solid var(--l1-border);
+		background: var(--bg-ink-400);
+		color: var(--text-vanilla-400);
+		border: 1px solid var(--bg-ink-300);
 		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
 		display: flex;
 		align-items: center;
@@ -244,24 +244,154 @@
 
 	.log-arrow-btn-up,
 	.log-arrow-btn-down {
-		background: var(--l2-background);
+		background: var(--bg-ink-400);
 	}
 
 	.log-arrow-btn:active,
 	.log-arrow-btn:focus {
-		background: var(--l3-background);
-		color: var(--l1-foreground);
+		background: var(--bg-ink-300);
+		color: var(--text-vanilla-100);
 	}
 
 	.log-arrow-btn[disabled] {
 		opacity: 0.5;
 		cursor: not-allowed;
-		background: var(--l1-background);
-		color: var(--l3-foreground);
+		background: var(--bg-ink-500);
+		color: var(--text-vanilla-200);
 
 		.log-arrow-btn:hover:not([disabled]) {
-			background: var(--l3-background);
-			color: var(--l1-foreground);
+			background: var(--bg-ink-300);
+			color: var(--text-vanilla-100);
+		}
+	}
+}
+
+.lightMode {
+	.log-arrows {
+		background: var(--bg-vanilla-100);
+		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
+	}
+
+	.log-arrow-btn {
+		background: var(--bg-vanilla-100);
+		color: var(--text-ink-400);
+		border: 1px solid var(--bg-vanilla-300);
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+	}
+
+	.log-arrow-btn-up,
+	.log-arrow-btn-down {
+		background: var(--bg-vanilla-100);
+	}
+
+	.log-arrow-btn:active,
+	.log-arrow-btn:focus {
+		background: var(--bg-vanilla-200);
+		color: var(--text-ink-500);
+	}
+
+	.log-arrow-btn:hover:not([disabled]) {
+		background: var(--bg-vanilla-200);
+		color: var(--text-ink-500);
+	}
+
+	.log-arrow-btn[disabled] {
+		background: var(--bg-vanilla-100);
+		color: var(--text-ink-200);
+	}
+	.ant-drawer-header {
+		border-bottom: 1px solid var(--bg-vanilla-400);
+		background: var(--bg-vanilla-100);
+	}
+
+	.log-detail-drawer {
+		.title {
+			color: var(--text-ink-300);
+		}
+
+		.log-detail-drawer__log {
+			.log-overflow-shadow {
+				background: linear-gradient(
+					270deg,
+					var(--bg-vanilla-100) 10.4%,
+					rgba(255, 255, 255, 0) 100%
+				);
+			}
+
+			.log-type-indicator {
+				border: 2px solid var(--bg-vanilla-400);
+			}
+
+			.ant-typography {
+				color: var(--text-ink-300);
+				background: transparent;
+			}
+		}
+
+		.radio-button {
+			border: 1px solid var(--bg-vanilla-400);
+			background: var(--bg-vanilla-100);
+			color: var(--text-ink-300);
+		}
+
+		.views-tabs {
+			.tab {
+				background: var(--bg-vanilla-100);
+			}
+
+			.selected_view {
+				background: var(--bg-vanilla-300);
+				border: 1px solid var(--bg-slate-300);
+				color: var(--text-ink-400);
+			}
+
+			.selected_view::before {
+				background: var(--bg-vanilla-300);
+				border-left: 1px solid var(--bg-slate-300);
+			}
+		}
+
+		.tabs-and-search {
+			.action-btn {
+				border: 1px solid var(--bg-vanilla-400);
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
+			}
+		}
+
+		.search-input {
+			border: 1px solid var(--bg-vanilla-200);
+			background: var(--bg-vanilla-100);
+			color: var(--text-ink-300);
+		}
+	}
+
+	.log-detail-drawer__footer-hint {
+		position: sticky;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 8px 16px;
+		text-align: left;
+		color: var(--text-vanilla-700);
+		background: var(--bg-vanilla-100);
+		z-index: 10;
+
+		.log-detail-drawer__footer-hint-content {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
+
+		.log-detail-drawer__footer-hint-icon {
+			display: inline;
+			vertical-align: middle;
+			color: var(--text-vanilla-700);
+		}
+
+		.log-detail-drawer__footer-hint-text {
+			font-size: 13px;
+			margin: 0;
 		}
 	}
 }

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

@@ -1,6 +1,6 @@
 .query-builder-search-wrapper {
 	margin-top: 10px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-400);
 	border-bottom: none;
 
 	.ant-select-selector {

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -6,7 +6,7 @@
 }
 .log-field-key,
 .log-field-key-colon {
-	color: var(--l2-foreground);
+	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -41,7 +41,7 @@
 	flex-shrink: 0;
 }
 .log-value {
-	color: var(--l2-foreground);
+	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -104,7 +104,7 @@
 	.selected-log-value {
 		color: var(--bg-sienna-500);
 		border-radius: 2px;
-		background: color-mix(in srgb, var(--bg-sienna-500) 8%, transparent);
+		background: rgba(173, 127, 88, 0.08);
 		padding: 0px 2px;
 		margin-left: 7px;
 		font-weight: 400;
@@ -154,8 +154,8 @@
 	height: 32px;
 	width: 68px;
 	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border: 1px solid var(--bg-slate-400, #1d212d);
+	background: var(--bg-ink-400, #121317);
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 	.context-btn {
@@ -163,7 +163,7 @@
 	}
 	.copy-link-btn {
 		width: 50% !important;
-		border-left: 1px solid var(--l1-border) !important;
+		border-left: 1px solid var(--bg-slate-400, #1d212d) !important;
 	}
 
 	.ant-btn-default {
@@ -172,6 +172,16 @@
 	}
 }
 
+.lightMode {
+	.log-field-key,
+	.log-field-key-colon {
+		color: var(--text-slate-400);
+	}
+	.log-value {
+		color: var(--text-slate-400);
+	}
+}
+
 .dark {
 	.log-field-key,
 	.log-field-key-colon {

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss

@@ -6,8 +6,8 @@
 	right: 0;
 	cursor: pointer;
 	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border: 1px solid var(--bg-slate-400);
+	background: var(--bg-ink-400);
 
 	.ant-btn-default {
 		border: none;
@@ -18,23 +18,27 @@
 		display: flex;
 
 		&.active-tab {
-			background-color: var(--l1-border);
+			background-color: var(--bg-slate-400);
 		}
 	}
 
 	.copy-log-btn {
-		border-left: 1px solid var(--l1-border);
-		border-color: var(--l1-border) !important;
+		border-left: 1px solid var(--bg-slate-400);
+		border-color: var(--bg-slate-400) !important;
 	}
 }
 
-// In table/column view, keep action buttons visible at the viewport's right edge
-.log-line-action-buttons.table-view-log-actions {
-	position: absolute;
-	top: 50%;
-	right: 8px;
-	left: auto;
-	transform: translateY(-50%);
-	margin: 0;
-	z-index: 5;
+.lightMode {
+	.log-line-action-buttons {
+		border: 1px solid var(--bg-vanilla-400);
+		background: var(--bg-vanilla-400);
+
+		.ant-btn-default {
+		}
+
+		.copy-log-btn {
+			border-left: 1px solid var(--bg-vanilla-400);
+			border-color: var(--bg-vanilla-400) !important;
+		}
+	}
 }

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss

@@ -60,7 +60,7 @@
 			background-color: var(--bg-robin-600);
 		}
 		&.severity-info-1 {
-			background-color: var(--primary-background);
+			background-color: var(--bg-robin-500);
 		}
 		&.severity-info-2 {
 			background-color: var(--bg-robin-400);

frontend/src/components/Logs/TableView/config.ts

@@ -15,12 +15,13 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 		letterSpacing: '-0.07px',
 		marginBottom: '0px',
 		minWidth: '10rem',
-		width: 'auto',
+		width: '10rem',
 	};
 }
 
 export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',
+	maxWidth: '90rem',
 };
 
 export const defaultListViewPanelStyle: CSSProperties = {

frontend/src/components/Logs/TableView/useTableView.styles.scss

@@ -1,5 +1,5 @@
 .text {
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -33,13 +33,18 @@
 	display: flex;
 	align-items: center;
 
-	p {
+	.ant-typography {
 		margin-bottom: 0;
 	}
 }
 
+.lightMode {
+	.text {
+		color: var(--bg-slate-400);
+	}
+}
+
 .paragraph {
-	margin: 0;
 	padding: 0px !important;
 	&.small {
 		font-size: 11px !important;

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { TableColumnsType as ColumnsType } from 'antd';
+import { TableColumnsType as ColumnsType, Typography } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
@@ -43,7 +43,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 	const bodyColumnStyle = useMemo(
 		() => ({
 			...defaultTableStyle,
-			...(fields.length > 2 ? { width: 'auto' } : {}),
+			...(fields.length > 2 ? { width: '50rem' } : {}),
 		}),
 		[fields.length],
 	);
@@ -59,18 +59,18 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 				key: name,
 				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
 					props: {
-						style: {
-							...(isListViewPanel
-								? defaultListViewPanelStyle
-								: getDefaultCellStyle(isDarkMode)),
-							display: '-webkit-box',
-							WebkitLineClamp: linesPerRow,
-							WebkitBoxOrient: 'vertical',
-							overflow: 'hidden',
-							wordBreak: 'break-all',
-						},
+						style: isListViewPanel
+							? defaultListViewPanelStyle
+							: getDefaultCellStyle(isDarkMode),
 					},
-					children: <p className={cx('paragraph', fontSize)}>{field}</p>,
+					children: (
+						<Typography.Paragraph
+							ellipsis={{ rows: linesPerRow }}
+							className={cx('paragraph', fontSize)}
+						>
+							{field}
+						</Typography.Paragraph>
+					),
 				}),
 			}));
 
@@ -123,7 +123,9 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								return {
 									children: (
 										<div className="table-timestamp">
-											<p className={cx('text', fontSize)}>{date}</p>
+											<Typography.Paragraph ellipsis className={cx('text', fontSize)}>
+												{date}
+											</Typography.Paragraph>
 										</div>
 									),
 								};

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -1,11 +1,11 @@
 .format-options-popover {
 	.ant-popover-inner {
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-400);
 		background: linear-gradient(
 			139deg,
-			var(--l2-background) 0%,
-			var(--l1-background) 98.68%
+			var(--bg-ink-400) 0%,
+			var(--bg-ink-500) 98.68%
 		);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
@@ -35,7 +35,7 @@
 					}
 
 					.text {
-						color: var(--muted-foreground);
+						color: var(--bg-slate-50);
 						font-family: Inter;
 						font-size: 11px;
 						font-style: normal;
@@ -65,7 +65,7 @@
 							flex-shrink: 0;
 						}
 						.text {
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-400);
 							font-family: Inter;
 							font-size: 13px;
 							font-style: normal;
@@ -76,7 +76,7 @@
 						}
 
 						.text:hover {
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-300);
 						}
 					}
 
@@ -93,7 +93,7 @@
 				gap: 12px;
 
 				.title {
-					color: var(--muted-foreground);
+					color: var(--bg-slate-50);
 					font-family: Inter;
 					font-size: 11px;
 					font-style: normal;
@@ -111,7 +111,7 @@
 					align-items: center;
 					border: none !important;
 					.font-value {
-						color: var(--l2-foreground);
+						color: var(--bg-vanilla-400);
 						font-family: Inter;
 						font-size: 13px;
 						font-style: normal;
@@ -139,7 +139,7 @@
 					line-height: 18px;
 					letter-spacing: 0.08em;
 					text-align: left;
-					color: var(--muted-foreground);
+					color: var(--bg-slate-50);
 				}
 
 				.menu-items {
@@ -159,7 +159,7 @@
 
 					.item-label {
 						display: flex;
-						color: var(--l2-foreground);
+						color: var(--bg-vanilla-400, #c0c1c3);
 						justify-content: space-between;
 						align-items: center;
 					}
@@ -170,14 +170,14 @@
 
 			.horizontal-line {
 				height: 1px;
-				background: var(--l3-background);
+				background: #1d212d;
 			}
 
 			.max-lines-per-row {
 				padding: 12px;
 
 				.title {
-					color: var(--muted-foreground);
+					color: var(--bg-slate-50);
 					font-family: Inter;
 					font-size: 11px;
 					font-style: normal;
@@ -193,7 +193,7 @@
 					align-items: center;
 
 					.lucide {
-						color: var(--l2-foreground);
+						color: var(--bg-vanilla-400, #c0c1c3);
 						cursor: pointer;
 					}
 				}
@@ -210,8 +210,8 @@
 						width: auto;
 						border-right: none;
 						border-left: none;
-						border-top: 1px solid var(--l1-border);
-						border-bottom: 1px solid var(--l1-border);
+						border-top: 1px solid var(--bg-slate-400);
+						border-bottom: 1px solid var(--bg-slate-400);
 						text-align: center;
 						height: 26px;
 						border-radius: 0;
@@ -250,7 +250,7 @@
 						height: 26px;
 
 						border-radius: 0px 1px 1px 0px;
-						background: var(--l3-background);
+						background: var(--bg-ink-300, #16181d);
 					}
 				}
 			}
@@ -273,7 +273,7 @@
 						display: flex;
 						gap: 4px;
 						align-items: center;
-						color: var(--muted-foreground);
+						color: var(--bg-slate-50);
 						text-transform: uppercase;
 						font-size: 11px;
 						font-weight: 500;
@@ -302,7 +302,7 @@
 						.column-name {
 							padding: 4px 8px;
 							border-radius: 1px;
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-400, #c0c1c3);
 							font-family: Inter;
 							font-size: 13px;
 							font-style: normal;
@@ -311,7 +311,7 @@
 							letter-spacing: -0.07px;
 
 							&.selected {
-								background-color: var(--l3-background);
+								background-color: var(--bg-ink-200);
 								cursor: pointer;
 							}
 						}
@@ -330,7 +330,7 @@
 				}
 
 				.title {
-					color: var(--muted-foreground);
+					color: var(--bg-slate-50);
 					font-family: Inter;
 					font-size: 11px;
 					font-style: normal;
@@ -346,14 +346,14 @@
 					align-items: center;
 
 					.lucide {
-						color: var(--l2-foreground);
+						color: var(--bg-vanilla-400, #c0c1c3);
 						cursor: pointer;
 					}
 				}
 
 				.horizontal-line {
 					height: 1px;
-					background: var(--l3-background);
+					background: #1d212d;
 				}
 
 				.loading-container {
@@ -371,7 +371,7 @@
 						margin-top: 12px;
 
 						.column-name {
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-400, #c0c1c3);
 							font-family: Inter;
 							font-size: 13px;
 							font-style: normal;
@@ -387,18 +387,18 @@
 							cursor: pointer;
 
 							&.default-column {
-								color: var(--l2-foreground);
+								color: var(--bg-vanilla-400, #c0c1c3);
 								cursor: not-allowed;
 							}
 
 							&.no-columns-selected {
-								color: var(--l3-foreground);
+								color: var(--bg-slate-100);
 								font-size: 12px;
 								cursor: not-allowed;
 							}
 
 							&.add-new-column-btn {
-								color: var(--l2-foreground);
+								color: var(--bg-vanilla-400, #c0c1c3);
 								cursor: pointer;
 							}
 
@@ -447,7 +447,7 @@
 
 					.column-divider {
 						margin: 12px 0;
-						border-top: 2px solid var(--l1-border);
+						border-top: 2px solid var(--bg-slate-400);
 					}
 				}
 			}
@@ -458,7 +458,7 @@
 
 					.item {
 						.item-label {
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-400);
 						}
 					}
 				}
@@ -468,11 +468,11 @@
 					margin-left: -5%;
 
 					border-radius: 4px;
-					border: 1px solid var(--l1-border);
+					border: 1px solid var(--bg-slate-400);
 					background: linear-gradient(
 						139deg,
-						color-mix(in srgb, var(--card) 80%, transparent) 0%,
-						color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+						rgba(18, 19, 23, 0.8) 0%,
+						rgba(18, 19, 23, 0.9) 98.68%
 					);
 
 					box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
@@ -490,7 +490,7 @@
 .lightMode {
 	.format-options-popover {
 		.ant-popover-inner {
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-vanilla-300);
 			background: linear-gradient(
 				139deg,
 				rgba(255, 255, 255, 0.8) 0%,
@@ -502,18 +502,18 @@
 				.font-size-dropdown {
 					.back-btn {
 						.text {
-							color: var(--l2-background);
+							color: var(--bg-ink-400);
 						}
 					}
 
 					.content {
 						.option-btn {
 							.text {
-								color: var(--l2-background);
+								color: var(--bg-ink-400);
 							}
 
 							.text:hover {
-								color: var(--l3-background);
+								color: var(--bg-ink-300);
 							}
 						}
 					}
@@ -522,105 +522,105 @@
 				.add-new-column-container {
 					.add-new-column-header {
 						.title {
-							color: var(--l2-foreground);
+							color: var(--bg-ink-100);
 						}
 					}
 
 					.add-new-column-content {
 						.column-format-new-options {
 							.column-name {
-								color: var(--l2-background);
+								color: var(--bg-ink-400);
 
 								&.selected {
-									background-color: var(--l3-background);
+									background-color: var(--bg-vanilla-400);
 								}
 							}
 						}
 
 						.loading-container {
-							color: var(--l2-background);
+							color: var(--bg-ink-400);
 						}
 					}
 				}
 
 				.font-size-container {
 					.title {
-						color: var(--l2-foreground);
+						color: var(--bg-ink-100);
 					}
 
 					.value {
 						.font-value {
-							color: var(--l2-background);
+							color: var(--bg-ink-400);
 						}
 					}
 				}
 
 				.horizontal-line {
-					background: var(--l3-background);
+					background: var(--bg-vanilla-300);
 				}
 
 				.item-content {
 					.column-divider {
-						border-top: 2px solid var(--l1-border);
+						border-top: 2px solid var(--bg-vanilla-300);
 					}
 				}
 
 				.max-lines-per-row {
 					.title {
-						color: var(--l2-foreground);
+						color: var(--bg-ink-200);
 
 						.lucide {
-							color: var(--l1-foreground);
+							color: var(--bg-ink-300);
 						}
 					}
 
 					.max-lines-per-row-input {
-						border: 1px solid var(--l1-border);
+						border: 1px solid var(--bg-vanilla-300);
 
 						.periscope-btn {
-							background: var(--l3-background);
+							background: var(--bg-vanilla-300);
 						}
 					}
 				}
 
 				.menu-container {
 					.title {
-						color: var(--l2-foreground);
+						color: var(--bg-ink-200);
 					}
 
 					.item {
 						.item-label {
-							color: var(--l2-background);
+							color: var(--bg-ink-400);
 						}
 					}
 				}
 
 				.selected-item-content-container {
 					.title {
-						color: var(--l2-foreground);
+						color: var(--bg-ink-200);
 
 						.lucide {
-							color: var(--l1-foreground);
+							color: var(--bg-ink-300);
 						}
 					}
 
 					.horizontal-line {
-						background: var(--l3-background);
+						background: var(--bg-vanilla-300);
 					}
 
 					.item-content {
 						.max-lines-per-row-input {
-							border: 1px solid var(--l1-border);
+							border: 1px solid var(--bg-vanilla-300);
 
 							.periscope-btn {
-								background: var(--l3-background);
+								background: var(--bg-vanilla-300);
 							}
 						}
 
 						.column-format,
 						.column-format-new-options {
 							.column-name {
-								color: var(--l1-foreground);
+								color: var(--bg-ink-300);
 							}
 						}
 					}
@@ -632,13 +632,13 @@
 
 						.item {
 							.item-label {
-								color: var(--l1-foreground);
+								color: var(--bg-ink-300);
 							}
 						}
 					}
 
 					.selected-item-content-container {
-						border: 1px solid var(--l1-border);
+						border: 1px solid var(--bg-vanilla-300);
 						background: linear-gradient(
 							139deg,
 							rgba(255, 255, 255, 0.8) 0%,

frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss

@@ -1,8 +1,8 @@
 .code-snippet-container {
 	position: relative;
 	// background-color: rgb(43, 43, 43);
-	background-color: var(--bg-ink-400);
-	border-color: var(--bg-ink-400);
+	background-color: #111a2c;
+	border-color: #111a2c;
 }
 
 .code-copy-btn {
@@ -16,21 +16,21 @@
 	button {
 		cursor: pointer;
 
-		background-color: color-mix(in srgb, var(--bg-ink-300) 70%, transparent);
-		color: var(--l1-foreground);
+		background-color: rgba($color: #1d1d1d, $alpha: 0.7);
+		color: white;
 		border: none;
 		padding: 8px;
 		border-radius: 3px;
 		transition: all 0.1s;
 
 		&:hover {
-			background-color: var(--bg-ink-300);
+			background-color: rgba($color: #1d1d1d, $alpha: 1);
 		}
 	}
 
 	&.copied {
 		button {
-			background-color: var(--bg-forest-500);
+			background-color: rgba($color: #52c41a, $alpha: 1);
 		}
 	}
 }

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

@@ -54,7 +54,7 @@
 
 			.ant-table-column-sorter-up.active,
 			.ant-table-column-sorter-down.active {
-				color: var(--l1-foreground);
+				color: var(--bg-base-white);
 				opacity: 1;
 			}
 		}
@@ -69,14 +69,10 @@
 		}
 
 		> tr.members-table-row--tinted > td {
-			background: color-mix(in srgb, var(--bg-robin-200) 2%, transparent);
+			background: rgba(171, 189, 255, 0.02);
 		}
 		> tr:hover > td {
-			background: color-mix(
-				in srgb,
-				var(--bg-robin-200) 4%,
-				transparent
-			) !important;
+			background: rgba(171, 189, 255, 0.04) !important;
 		}
 	}
 
@@ -170,7 +166,7 @@
 
 		strong {
 			font-weight: var(--font-weight-medium);
-			color: var(--l1-foreground);
+			color: var(--bg-base-white);
 		}
 	}
 }
@@ -209,4 +205,12 @@
 			}
 		}
 	}
+
+	.members-empty-state {
+		&__text {
+			strong {
+				color: var(--bg-base-black);
+			}
+		}
+	}
 }

frontend/src/components/MembersTable/MembersTable.tsx

@@ -1,10 +1,12 @@
 import type React from 'react';
-import { Badge } from '@signozhq/ui';
+import { Badge } from '@signozhq/badge';
 import { Table, Tooltip } from 'antd';
 import type { ColumnsType, SorterResult } from 'antd/es/table/interface';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { MemberStatus } from 'container/MembersSettings/utils';
+import { capitalize } from 'lodash-es';
 import { useTimezone } from 'providers/Timezone';
+import { ROLES } from 'types/roles';
 
 import './MembersTable.styles.scss';
 
@@ -12,6 +14,7 @@ export interface MemberRow {
 	id: string;
 	name?: string;
 	email: string;
+	role: ROLES;
 	status: MemberStatus;
 	joinedOn: string | null;
 	updatedAt?: string | null;
@@ -138,6 +141,17 @@ function MembersTable({
 				<NameEmailCell name={record.name} email={record.email} />
 			),
 		},
+		{
+			title: 'Roles',
+			dataIndex: 'role',
+			key: 'role',
+			width: 180,
+			sorter: (a, b): number => a.role.localeCompare(b.role),
+			render: (role: ROLES): JSX.Element => (
+				<Badge color="vanilla">{capitalize(role)}</Badge>
+			),
+		},
+
 		{
 			title: 'Status',
 			dataIndex: 'status',

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

@@ -1,5 +1,6 @@
 import { MemberStatus } from 'container/MembersSettings/utils';
 import { render, screen, userEvent } from 'tests/test-utils';
+import { ROLES } from 'types/roles';
 
 import MembersTable, { MemberRow } from '../MembersTable';
 
@@ -8,6 +9,7 @@ const mockActiveMembers: MemberRow[] = [
 		id: 'user-1',
 		name: 'Alice Smith',
 		email: 'alice@signoz.io',
+		role: 'ADMIN' as ROLES,
 		status: MemberStatus.Active,
 		joinedOn: '1700000000000',
 	},
@@ -15,6 +17,7 @@ const mockActiveMembers: MemberRow[] = [
 		id: 'user-2',
 		name: 'Bob Jones',
 		email: 'bob@signoz.io',
+		role: 'VIEWER' as ROLES,
 		status: MemberStatus.Active,
 		joinedOn: null,
 	},
@@ -24,6 +27,7 @@ const mockInvitedMember: MemberRow = {
 	id: 'inv-abc',
 	name: '',
 	email: 'charlie@signoz.io',
+	role: 'EDITOR' as ROLES,
 	status: MemberStatus.Invited,
 	joinedOn: null,
 };
@@ -43,11 +47,12 @@ describe('MembersTable', () => {
 		jest.clearAllMocks();
 	});
 
-	it('renders member rows with name, email, and ACTIVE status', () => {
+	it('renders member rows with name, email, role badge, and ACTIVE status', () => {
 		render(<MembersTable {...defaultProps} data={mockActiveMembers} />);
 
 		expect(screen.getByText('Alice Smith')).toBeInTheDocument();
 		expect(screen.getByText('alice@signoz.io')).toBeInTheDocument();
+		expect(screen.getByText('Admin')).toBeInTheDocument();
 		expect(screen.getAllByText('ACTIVE')).toHaveLength(2);
 	});
 
@@ -62,6 +67,7 @@ describe('MembersTable', () => {
 
 		expect(screen.getByText('INVITED')).toBeInTheDocument();
 		expect(screen.getByText('charlie@signoz.io')).toBeInTheDocument();
+		expect(screen.getByText('Editor')).toBeInTheDocument();
 	});
 
 	it('calls onRowClick with the member data when a row is clicked', async () => {
@@ -93,6 +99,7 @@ describe('MembersTable', () => {
 			id: 'user-del',
 			name: 'Dave Deleted',
 			email: 'dave@signoz.io',
+			role: 'VIEWER' as ROLES,
 			status: MemberStatus.Deleted,
 			joinedOn: null,
 		};

frontend/src/components/MessagingQueueHealthCheck/MessagingQueueHealthCheck.styles.scss

@@ -1,8 +1,8 @@
 .mq-health-check-modal {
 	.ant-modal-content {
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
+		border: 1px solid var(--bg-slate-500);
+		background: var(--bg-ink-400);
 		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
 
 		.ant-modal-close {
@@ -10,13 +10,13 @@
 		}
 
 		.ant-modal-header {
-			border-bottom: 1px solid var(--l1-border);
-			background: var(--l2-background);
+			border-bottom: 1px solid var(--bg-slate-500);
+			background: var(--bg-ink-400);
 			margin-bottom: 16px;
 			padding-bottom: 4px;
 
 			.ant-modal-title {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 				font-family: Inter;
 				font-size: 13px;
 				font-style: normal;
@@ -31,7 +31,7 @@
 			flex-direction: column;
 			gap: 8px;
 			padding: 8px;
-			background: var(--l3-background);
+			background: var(--bg-ink-300);
 
 			.attribute-select {
 				align-items: center;
@@ -47,8 +47,8 @@
 					gap: 4px;
 
 					border-radius: 2px;
-					border: 1px solid var(--l1-border);
-					background: var(--l3-background);
+					border: 1px solid var(--bg-slate-400);
+					background: var(--bg-ink-300);
 				}
 			}
 
@@ -57,7 +57,7 @@
 			}
 
 			.tree-text {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-family: 'Geist Mono';
 				font-size: 12px;
 				font-style: normal;
@@ -101,7 +101,7 @@
 
 						.success-attribute-icon {
 							width: 44px;
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-400);
 							display: flex;
 
 							> svg {
@@ -128,7 +128,7 @@
 			align-items: center;
 			height: 100%;
 			padding: 8px;
-			background: var(--l3-background);
+			background: var(--bg-ink-300);
 			height: 156px;
 		}
 	}
@@ -147,10 +147,10 @@
 	border-radius: 2px;
 	border: none;
 	box-shadow: none;
-	background: var(--l3-background);
+	background: var(--bg-slate-500);
 
 	&.missing-config-btn {
-		background: color-mix(in srgb, var(--bg-amber-500) 10%, transparent);
+		background: rgba(255, 205, 86, 0.1);
 		color: var(--bg-amber-400);
 
 		&:hover {
@@ -162,14 +162,68 @@
 		display: flex;
 		align-items: center;
 		margin-right: 8px;
-		border-right: 1px solid
-			color-mix(in srgb, var(--bg-amber-400) 10%, transparent);
+		border-right: 1px solid rgba(255, 215, 120, 0.1);
 		padding-right: 8px;
 	}
 }
 
 .lightMode {
+	.mq-health-check-modal {
+		.ant-modal-content {
+			border: 1px solid var(--bg-vanilla-400);
+			background: var(--bg-vanilla-200);
+
+			.ant-modal-header {
+				border-bottom: 1px solid var(--bg-vanilla-400);
+				background: var(--bg-vanilla-200);
+
+				.ant-modal-title {
+					color: var(--bg-ink-300);
+				}
+			}
+
+			.modal-content {
+				background: var(--bg-vanilla-100);
+
+				.attribute-select {
+					.ant-select-selector {
+						border: 1px solid var(--bg-vanilla-300);
+						background: var(--bg-vanilla-200);
+					}
+				}
+
+				.tree-text {
+					color: var(--bg-ink-300);
+				}
+
+				.ant-tree {
+					.ant-tree-title {
+						.attribute-error-title {
+							color: var(--bg-amber-500);
+
+							.tree-text {
+								color: var(--bg-amber-500);
+							}
+						}
+
+						.attribute-success-title {
+							.success-attribute-icon {
+								color: var(--bg-ink-300);
+							}
+						}
+					}
+				}
+			}
+
+			.loader-container {
+				background: var(--bg-ink-300);
+			}
+		}
+	}
+
 	.config-btn {
+		background: var(--bg-vanilla-300);
+
 		&.missing-config-btn {
 			background: var(--bg-amber-100);
 			color: var(--bg-amber-500);

frontend/src/components/MessagingQueues/MQCommon/MQCommon.styles.scss

@@ -2,8 +2,8 @@
 	display: inline-flex;
 	padding: 4px 8px;
 	border-radius: 20px;
-	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+	border: 1px solid rgba(173, 127, 88, 0.2);
+	background: rgba(173, 127, 88, 0.1);
 	justify-content: center;
 	align-items: center;
 	gap: 5px;

frontend/src/components/NewSelect/styles.scss

@@ -9,25 +9,24 @@ $custom-border-color: #2c3044;
 
 	&.ant-select-focused {
 		.ant-select-selector {
-			border-color: var(--primary-background);
-			box-shadow: 0 0 0 2px
-				color-mix(in srgb, var(--primary-background) 20%, transparent);
+			border-color: var(--bg-robin-500);
+			box-shadow: 0 0 0 2px rgba(78, 116, 248, 0.2);
 		}
 	}
 
 	.ant-select-selection-placeholder {
-		color: color-mix(in srgb, var(--border) 45%, transparent);
+		color: rgba(192, 193, 195, 0.45);
 	}
 
 	// Base styles are for dark mode
 	.ant-select-selector {
-		background-color: var(--l2-background);
-		border-color: var(--l1-border);
+		background-color: var(--bg-ink-400);
+		border-color: var(--bg-slate-400);
 	}
 
 	.ant-select-clear {
-		background-color: var(--l2-background);
-		color: color-mix(in srgb, var(--border) 70%, transparent);
+		background-color: var(--bg-ink-400);
+		color: rgba(192, 193, 195, 0.7);
 	}
 }
 
@@ -43,7 +42,7 @@ $custom-border-color: #2c3044;
 
 		.ant-select-selection-placeholder {
 			opacity: 1 !important;
-			color: var(--l2-foreground) !important;
+			color: var(--bg-vanilla-400) !important;
 			font-weight: 500;
 			visibility: visible !important;
 			pointer-events: none;
@@ -64,7 +63,7 @@ $custom-border-color: #2c3044;
 		left: 12px;
 		top: 50%;
 		transform: translateY(-50%);
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		z-index: 1;
 		pointer-events: none;
 
@@ -77,8 +76,8 @@ $custom-border-color: #2c3044;
 		max-height: 200px;
 		overflow: auto;
 		scrollbar-width: thin;
-		background-color: var(--l2-background);
-		border-color: var(--l1-border);
+		background-color: var(--bg-ink-400);
+		border-color: var(--bg-slate-400);
 		cursor: text;
 
 		&::-webkit-scrollbar {
@@ -91,7 +90,7 @@ $custom-border-color: #2c3044;
 		}
 
 		&::-webkit-scrollbar-track {
-			background-color: var(--l1-border);
+			background-color: var(--bg-slate-400);
 		}
 	}
 
@@ -107,57 +106,46 @@ $custom-border-color: #2c3044;
 
 	&.ant-select-focused {
 		.ant-select-selector {
-			border-color: var(--primary-background);
-			box-shadow: 0 0 0 2px
-				color-mix(in srgb, var(--primary-background) 20%, transparent);
+			border-color: var(--bg-robin-500);
+			box-shadow: 0 0 0 2px rgba(78, 116, 248, 0.2);
 		}
 	}
 
 	.ant-select-selection-placeholder {
-		color: color-mix(in srgb, var(--border) 45%, transparent);
+		color: rgba(192, 193, 195, 0.45);
 	}
 
 	// Customize tags in multiselect (dark mode by default)
 	.ant-select-selection-item {
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-400);
 		border-radius: 4px;
 		border: 1px solid $custom-border-color;
 		margin-right: 4px;
 		transition: all 0.2s;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 
 		// Style for active tag (keyboard navigation)
 		&-active {
-			border-color: var(--primary-background) !important;
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			) !important;
-			outline: 2px solid
-				color-mix(in srgb, var(--primary-background) 20%, transparent);
+			border-color: var(--bg-robin-500) !important;
+			background-color: rgba(78, 116, 248, 0.15) !important;
+			outline: 2px solid rgba(78, 116, 248, 0.2);
 		}
 
 		// Style for selected tags (via keyboard or mouse selection)
 		&-selected {
-			border-color: var(--primary-background) !important;
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			) !important;
-			box-shadow: 0 0 0 2px
-				color-mix(in srgb, var(--primary-background) 20%, transparent);
+			border-color: var(--bg-robin-500) !important;
+			background-color: rgba(78, 116, 248, 0.15) !important;
+			box-shadow: 0 0 0 2px rgba(78, 116, 248, 0.2);
 		}
 
 		.ant-select-selection-item-content {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 		}
 
 		.ant-select-selection-item-remove {
-			color: color-mix(in srgb, var(--border) 70%, transparent);
+			color: rgba(192, 193, 195, 0.7);
 			&:hover {
-				color: var(--l1-border);
+				color: rgba(192, 193, 195, 1);
 			}
 		}
 	}
@@ -182,24 +170,20 @@ $custom-border-color: #2c3044;
 	padding: 0;
 	box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.5), 0 6px 16px 0 rgba(0, 0, 0, 0.4),
 		0 9px 28px 8px rgba(0, 0, 0, 0.3);
-	background-color: var(--l2-background);
-	border: 1px solid var(--l1-border);
+	background-color: var(--bg-ink-400);
+	border: 1px solid var(--bg-slate-400);
 
 	.ant-select-item {
 		padding: 8px 12px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 
 		// Make keyboard navigation visible
 		&-option-active {
-			background-color: var(--l1-border) !important;
+			background-color: var(--bg-slate-400) !important;
 		}
 
 		&-option-selected {
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			) !important;
+			background-color: rgba(78, 116, 248, 0.15) !important;
 		}
 	}
 }
@@ -215,7 +199,7 @@ $custom-border-color: #2c3044;
 	.empty-message {
 		padding: 12px;
 		text-align: center;
-		color: color-mix(in srgb, var(--border) 45%, transparent);
+		color: rgba(192, 193, 195, 0.45);
 	}
 }
 
@@ -227,9 +211,9 @@ $custom-border-color: #2c3044;
 	overflow-x: hidden;
 	scrollbar-width: thin;
 	border-radius: 4px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-400);
 	width: 100%;
-	background-color: var(--l2-background);
+	background-color: var(--bg-ink-400);
 
 	&::-webkit-scrollbar {
 		width: 6px;
@@ -241,7 +225,7 @@ $custom-border-color: #2c3044;
 	}
 
 	&::-webkit-scrollbar-track {
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-400);
 	}
 
 	.no-section-options {
@@ -257,8 +241,8 @@ $custom-border-color: #2c3044;
 			font-weight: 500;
 			padding: 4px 12px;
 			font-size: 13px;
-			color: var(--l2-foreground);
-			background-color: var(--l1-border);
+			color: var(--bg-vanilla-400);
+			background-color: var(--bg-slate-400);
 			border-bottom: 1px solid $custom-border-color;
 			border-top: 1px solid $custom-border-color;
 			position: relative;
@@ -275,28 +259,20 @@ $custom-border-color: #2c3044;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 
 		&:hover {
-			background-color: var(--l1-border);
+			background-color: var(--bg-slate-400);
 		}
 
 		&.selected {
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			);
+			background-color: rgba(78, 116, 248, 0.15);
 			font-weight: 500;
 		}
 
 		&.active {
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			);
-			border-color: var(--primary-background);
+			background-color: rgba(78, 116, 248, 0.15);
+			border-color: var(--bg-robin-500);
 		}
 
 		.option-content {
@@ -314,7 +290,7 @@ $custom-border-color: #2c3044;
 				padding: 2px 6px;
 				border-radius: 4px;
 				background-color: $custom-border-color;
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				margin-left: 8px;
 			}
 		}
@@ -331,20 +307,20 @@ $custom-border-color: #2c3044;
 	display: flex;
 	align-items: center;
 	padding: 8px 12px;
-	border-top: 1px solid var(--l1-border);
+	border-top: 1px solid var(--bg-slate-400);
 	position: sticky;
 	bottom: 0;
-	background-color: var(--l2-background);
+	background-color: var(--bg-ink-400);
 	z-index: 1;
 
 	.navigation-icons {
 		display: flex;
 		margin-right: 8px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 	}
 
 	.navigation-text {
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-size: 12px;
 	}
 
@@ -386,11 +362,11 @@ $custom-border-color: #2c3044;
 			height: 14px;
 			flex-shrink: 0;
 			border-radius: 2.286px;
-			border-top: 1.143px solid var(--l1-border);
-			border-right: 1.143px solid var(--l1-border);
-			border-bottom: 2.286px solid var(--l1-border);
-			border-left: 1.143px solid var(--l1-border);
-			background: var(--l2-background);
+			border-top: 1.143px solid var(--bg-ink-200);
+			border-right: 1.143px solid var(--bg-ink-200);
+			border-bottom: 2.286px solid var(--bg-ink-200);
+			border-left: 1.143px solid var(--bg-ink-200);
+			background: var(--Ink-400, var(--bg-ink-400));
 		}
 	}
 }
@@ -403,16 +379,16 @@ $custom-border-color: #2c3044;
 	overflow-x: hidden;
 	scrollbar-width: thin;
 	border-radius: 4px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-400);
 	width: 100%;
-	background-color: var(--l2-background);
+	background-color: var(--bg-ink-400);
 
 	.select-all-option,
 	.custom-value-option {
 		padding: 8px 12px;
 		border-bottom: 1px solid $custom-border-color;
 		margin-bottom: 8px;
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-400);
 		position: sticky;
 		top: 0;
 		z-index: 1;
@@ -441,8 +417,8 @@ $custom-border-color: #2c3044;
 			font-weight: 500;
 			padding: 4px 12px;
 			font-size: 13px;
-			color: var(--l2-foreground);
-			background-color: var(--l1-border);
+			color: var(--bg-vanilla-400);
+			background-color: var(--bg-slate-400);
 			border-bottom: 1px solid $custom-border-color;
 			border-top: 1px solid $custom-border-color;
 			position: relative;
@@ -456,27 +432,19 @@ $custom-border-color: #2c3044;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 
 		&.active {
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			);
-			border-color: var(--primary-background);
+			background-color: rgba(78, 116, 248, 0.15);
+			border-color: var(--bg-robin-500);
 		}
 
 		&:hover {
-			background-color: var(--l1-border);
+			background-color: var(--bg-slate-400);
 		}
 
 		&.selected {
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 15%,
-				transparent
-			);
+			background-color: rgba(78, 116, 248, 0.15);
 			font-weight: 500;
 		}
 
@@ -515,7 +483,7 @@ $custom-border-color: #2c3044;
 					padding: 2px 6px;
 					border-radius: 4px;
 					background-color: $custom-border-color;
-					color: var(--l2-foreground);
+					color: var(--bg-vanilla-400);
 					margin-left: 8px;
 				}
 			}
@@ -573,25 +541,21 @@ $custom-border-color: #2c3044;
 	.empty-message {
 		padding: 12px;
 		text-align: center;
-		color: color-mix(in srgb, var(--border) 45%, transparent);
+		color: rgba(192, 193, 195, 0.45);
 	}
 
 	.status-message {
 		padding: 8px 12px;
 		text-align: center;
 		font-style: italic;
-		color: color-mix(in srgb, var(--border) 65%, transparent);
+		color: rgba(192, 193, 195, 0.65);
 		border-top: 1px dashed $custom-border-color;
 	}
 }
 
 // Custom styles for highlight text
 .highlight-text {
-	background-color: color-mix(
-		in srgb,
-		var(--primary-background) 20%,
-		transparent
-	);
+	background-color: rgba(78, 116, 248, 0.2);
 	padding: 0 1px;
 	border-radius: 2px;
 	font-weight: 500;
@@ -601,7 +565,7 @@ $custom-border-color: #2c3044;
 .custom-option {
 	&.focused,
 	&.ant-select-item-option-active {
-		background-color: var(--l1-border) !important;
+		background-color: var(--bg-slate-400) !important;
 	}
 }
 
@@ -612,7 +576,7 @@ $custom-border-color: #2c3044;
 		position: sticky;
 		top: 0;
 		z-index: 2;
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-400);
 		border-bottom: 1px solid $custom-border-color;
 		padding: 4px 12px;
 		margin: 0;
@@ -630,8 +594,7 @@ $custom-border-color: #2c3044;
 // Custom scrollbar styling (shared between components)
 @mixin custom-scrollbar {
 	scrollbar-width: thin;
-	scrollbar-color: color-mix(in srgb, var(--border) 30%, transparent)
-		color-mix(in srgb, var(--border) 60%, transparent);
+	scrollbar-color: rgba(192, 193, 195, 0.3) rgba(29, 33, 45, 0.6);
 
 	&::-webkit-scrollbar {
 		width: 6px;
@@ -639,17 +602,17 @@ $custom-border-color: #2c3044;
 	}
 
 	&::-webkit-scrollbar-track {
-		background-color: color-mix(in srgb, var(--border) 60%, transparent);
+		background-color: rgba(29, 33, 45, 0.6);
 		border-radius: 10px;
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background-color: color-mix(in srgb, var(--border) 30%, transparent);
+		background-color: rgba(192, 193, 195, 0.3);
 		border-radius: 10px;
 		transition: background-color 0.2s ease;
 
 		&:hover {
-			background-color: color-mix(in srgb, var(--border) 50%, transparent);
+			background-color: rgba(192, 193, 195, 0.5);
 		}
 	}
 }
@@ -657,8 +620,7 @@ $custom-border-color: #2c3044;
 // Subtle nested scrollbar styling
 @mixin nested-scrollbar {
 	scrollbar-width: thin;
-	scrollbar-color: color-mix(in srgb, var(--border) 20%, transparent)
-		color-mix(in srgb, var(--border) 60%, transparent);
+	scrollbar-color: rgba(192, 193, 195, 0.2) rgba(29, 33, 45, 0.6);
 
 	&::-webkit-scrollbar {
 		width: 4px;
@@ -666,16 +628,16 @@ $custom-border-color: #2c3044;
 	}
 
 	&::-webkit-scrollbar-track {
-		background-color: color-mix(in srgb, var(--border) 60%, transparent);
+		background-color: rgba(29, 33, 45, 0.6);
 		border-radius: 10px;
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background-color: color-mix(in srgb, var(--border) 20%, transparent);
+		background-color: rgba(192, 193, 195, 0.2);
 		border-radius: 10px;
 
 		&:hover {
-			background-color: color-mix(in srgb, var(--border) 30%, transparent);
+			background-color: rgba(192, 193, 195, 0.3);
 		}
 	}
 }
@@ -714,7 +676,7 @@ $custom-border-color: #2c3044;
 .lightMode {
 	.custom-select {
 		.ant-select-selector {
-			background-color: var(--l1-background);
+			background-color: var(--bg-vanilla-100);
 			border-color: #e9e9e9;
 		}
 
@@ -723,7 +685,7 @@ $custom-border-color: #2c3044;
 		}
 
 		.ant-select-clear {
-			background-color: var(--l1-background);
+			background-color: var(--bg-vanilla-100);
 			color: rgba(0, 0, 0, 0.45);
 		}
 
@@ -737,7 +699,7 @@ $custom-border-color: #2c3044;
 
 	.custom-multiselect {
 		.ant-select-selector {
-			background-color: var(--l1-background);
+			background-color: var(--bg-vanilla-100);
 			border-color: #e9e9e9;
 			cursor: text; // Make entire selector clickable for input focus
 
@@ -789,37 +751,37 @@ $custom-border-color: #2c3044;
 			}
 
 			&-active {
-				border-color: var(--primary-background) !important;
-				background-color: var(--l3-background) !important;
+				border-color: var(--bg-robin-500) !important;
+				background-color: var(--bg-vanilla-300) !important;
 			}
 
 			&-selected {
-				border-color: var(--primary-background) !important;
-				background-color: var(--l3-background) !important;
+				border-color: #1890ff !important;
+				background-color: var(--bg-vanilla-300) !important;
 			}
 		}
 	}
 
 	.custom-select-dropdown-container,
 	.custom-multiselect-dropdown-container {
-		background-color: var(--l1-background);
-		border: 1px solid var(--l1-border);
+		background-color: var(--bg-vanilla-100);
+		border: 1px solid #f0f0f0;
 		box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
 			0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
 		.empty-message {
-			color: var(--l2-foreground);
+			color: rgba(0, 0, 0, 0.45);
 		}
 
 		.ant-select-item {
-			color: var(--l1-foreground);
+			color: rgba(0, 0, 0, 0.85);
 
 			&-option-active {
-				background-color: var(--l3-background) !important;
+				background-color: #f5f5f5 !important;
 			}
 
 			&-option-selected {
-				background-color: var(--l2-background) !important;
+				background-color: var(--bg-vanilla-300) !important;
 			}
 		}
 	}
@@ -827,7 +789,7 @@ $custom-border-color: #2c3044;
 	.custom-select-dropdown,
 	.custom-multiselect-dropdown {
 		border: 1px solid #f0f0f0;
-		background-color: var(--l1-background);
+		background-color: var(--bg-vanilla-100);
 
 		&::-webkit-scrollbar-thumb {
 			background-color: #ccc;
@@ -858,11 +820,11 @@ $custom-border-color: #2c3044;
 			}
 
 			&.selected {
-				background-color: var(--l3-background);
+				background-color: var(--bg-vanilla-300);
 			}
 
 			&.active {
-				background-color: var(--l3-background);
+				background-color: var(--bg-vanilla-300);
 				border-color: #91d5ff;
 			}
 
@@ -877,7 +839,7 @@ $custom-border-color: #2c3044;
 
 	.navigation-footer {
 		border-top: 1px solid #f0f0f0;
-		background-color: var(--l1-background);
+		background-color: var(--bg-vanilla-100);
 
 		.navigation-icons {
 			color: rgba(0, 0, 0, 0.45);
@@ -889,11 +851,11 @@ $custom-border-color: #2c3044;
 
 		.navigate {
 			.icons {
-				border-top: 1.143px solid var(--l2-foreground);
-				border-right: 1.143px solid var(--l2-foreground);
-				border-bottom: 2.286px solid var(--l2-foreground);
-				border-left: 1.143px solid var(--l2-foreground);
-				background: var(--l3-background);
+				border-top: 1.143px solid var(--bg-ink-200);
+				border-right: 1.143px solid var(--bg-ink-200);
+				border-bottom: 2.286px solid var(--bg-ink-200);
+				border-left: 1.143px solid var(--bg-ink-200);
+				background: var(--bg-vanilla-300);
 			}
 		}
 	}
@@ -972,7 +934,7 @@ $custom-border-color: #2c3044;
 			left: 12px;
 			top: 50%;
 			transform: translateY(-50%);
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 			font-weight: 500;
 			z-index: 2;
 			pointer-events: none;

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

@@ -5,8 +5,8 @@
 
 	width: 100%;
 
-	border-bottom: 1px solid var(--l1-border);
-	border-top: 1px solid var(--l1-border);
+	border-bottom: 1px solid var(--bg-slate-400);
+	border-top: 1px solid var(--bg-slate-400);
 
 	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 		'Helvetica Neue', sans-serif;
@@ -72,8 +72,8 @@
 				width: 1px;
 				background: repeating-linear-gradient(
 					to bottom,
-					var(--l1-border),
-					var(--l1-border) 4px,
+					#1d212d,
+					#1d212d 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -93,7 +93,7 @@
 					top: 12px;
 					width: 6px;
 					height: 6px;
-					border-left: 6px dotted var(--l1-border);
+					border-left: 6px dotted #1d212d;
 				}
 
 				/* Horizontal line pointing from vertical to the item */
@@ -106,8 +106,8 @@
 					height: 1px;
 					background: repeating-linear-gradient(
 						to right,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						#1d212d,
+						#1d212d 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -149,7 +149,7 @@
 		width: 44px;
 		padding: 8px;
 
-		border-left: 1px solid var(--l1-border);
+		border-left: 1px solid var(--bg-slate-400);
 
 		.query-name {
 			display: flex;
@@ -163,10 +163,10 @@
 			border-radius: 0px 2px 2px 0px;
 
 			border-radius: 2px;
-			border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
-			background: color-mix(in srgb, var(--bg-sakura-500) 10%, transparent);
+			border: 1px solid rgba(242, 71, 105, 0.2);
+			background: rgba(242, 71, 105, 0.1);
 
-			color: var(--bg-sakura-400);
+			color: var(--Sakura-400, #f56c87);
 			font-family: 'Space Mono';
 			font-size: 12px;
 			font-style: normal;
@@ -188,10 +188,10 @@
 			border-radius: 0px 2px 2px 0px;
 
 			border-radius: 2px;
-			border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-			background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+			border: 1px solid rgba(173, 127, 88, 0.2);
+			background: rgba(173, 127, 88, 0.1);
 
-			color: var(--bg-sienna-500);
+			color: var(--Sienna-500, #ad7f58);
 			font-family: 'Space Mono';
 			font-size: 12px;
 			font-style: normal;
@@ -233,7 +233,7 @@
 						top: 12px;
 						width: 6px;
 						height: 6px;
-						border-left: 6px dotted var(--l1-border);
+						border-left: 6px dotted #1d212d;
 					}
 
 					/* Horizontal line pointing from vertical to the item */
@@ -246,8 +246,8 @@
 						height: 1px;
 						background: repeating-linear-gradient(
 							to right,
-							var(--l1-border),
-							var(--l1-border) 4px,
+							#1d212d,
+							#1d212d 4px,
 							transparent 4px,
 							transparent 8px
 						);
@@ -274,8 +274,8 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(--l3-background);
-						color: var(--l2-foreground);
+						background: var(--bg-ink-300);
+						color: var(--bg-vanilla-400);
 						font-size: 12px;
 						font-weight: 300;
 					}
@@ -315,8 +315,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						#1d212d,
+						#1d212d 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -344,14 +344,10 @@
 		.options {
 			.query-name {
 				border-radius: 0px 2px 2px 0px !important;
-				border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent) !important;
-				background: color-mix(
-					in srgb,
-					var(--bg-sakura-500) 10%,
-					transparent
-				) !important;
+				border: 1px solid rgba(242, 71, 105, 0.2) !important;
+				background: rgba(242, 71, 105, 0.1) !important;
 
-				color: var(--bg-sakura-400) !important;
+				color: var(--Sakura-400, #f56c87) !important;
 				font-family: 'Space Mono';
 				font-size: 14px;
 				font-style: normal;
@@ -366,8 +362,8 @@
 
 			.formula-name {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-				background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+				border: 1px solid rgba(173, 127, 88, 0.2);
+				background: rgba(173, 127, 88, 0.1);
 
 				font-family: 'Space Mono';
 				font-size: 14px;
@@ -387,8 +383,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						var(--l1-border),
-						var(--l1-border) 4px,
+						#1d212d,
+						#1d212d 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -404,13 +400,9 @@
 				min-width: 120px;
 
 				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-background);
+				border: 1px solid var(--Slate-400, #1d212d);
+				background: var(--Ink-300, #16181d);
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-
-				.ant-select-selection-item {
-					color: var(--l1-foreground);
-				}
 			}
 		}
 	}
@@ -449,18 +441,14 @@
 
 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border) !important;
-			background: var(--l1-background) !important;
+			border: 1px solid var(--Slate-400, #1d212d) !important;
+			background: var(--Ink-300, #16181d) !important;
 			height: 34px !important;
 			box-sizing: border-box !important;
-
-			.ant-select-selection-item {
-				color: var(--l1-foreground);
-			}
 		}
 
 		.ant-select-arrow {
-			color: var(--l2-foreground) !important;
+			color: var(--bg-vanilla-400) !important;
 		}
 	}
 
@@ -468,3 +456,133 @@
 		cursor: pointer;
 	}
 }
+
+.lightMode {
+	.query-builder-v2 {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+		border-top: 1px solid var(--bg-vanilla-300);
+
+		.qb-content-section {
+			.qb-elements-container {
+				&::after {
+					background: repeating-linear-gradient(
+						to bottom,
+						var(--bg-vanilla-300),
+						var(--bg-vanilla-300) 4px,
+						transparent 4px,
+						transparent 8px
+					);
+				}
+
+				.code-mirror-where-clause,
+				.query-aggregation-container,
+				.query-add-ons,
+				.metrics-aggregation-section-content,
+				.metrics-container {
+					&::before {
+						border-left: 6px dotted var(--bg-vanilla-300);
+					}
+
+					/* Horizontal line pointing from vertical to the item */
+					&::after {
+						background: repeating-linear-gradient(
+							to right,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+					}
+				}
+			}
+		}
+
+		.query-names-section {
+			border-left: 1px solid var(--bg-vanilla-300);
+		}
+
+		.qb-formulas-container {
+			.qb-formula {
+				.formula-container {
+					.ant-col {
+						&::before {
+							border-left: 6px dotted var(--bg-vanilla-300);
+						}
+
+						/* Horizontal line pointing from vertical to the item */
+						&::after {
+							background: repeating-linear-gradient(
+								to right,
+								var(--bg-vanilla-300),
+								var(--bg-vanilla-300) 4px,
+								transparent 4px,
+								transparent 8px
+							);
+						}
+					}
+				}
+			}
+		}
+
+		.qb-footer {
+			.qb-footer-container {
+				.qb-add-new-query {
+					&::before {
+						background: repeating-linear-gradient(
+							to bottom,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+					}
+				}
+			}
+		}
+
+		.qb-entity-options {
+			.options {
+				.formula-name {
+					&::before {
+						background: repeating-linear-gradient(
+							to bottom,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+						left: 15px;
+					}
+				}
+			}
+
+			.query-data-source {
+				.ant-select-selector {
+					border: 1px solid var(--bg-vanilla-300) !important;
+					background: var(--bg-vanilla-100) !important;
+					box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+
+					.ant-select-selection-item {
+						color: var(--text-ink-400);
+					}
+				}
+			}
+		}
+
+		.qb-search-filter-container {
+			.ant-select-selector {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+
+				.ant-select-selection-item {
+					color: var(--text-ink-400);
+				}
+			}
+
+			.ant-select-arrow {
+				color: var(--bg-vanilla-400) !important;
+			}
+		}
+	}
+}

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss

@@ -39,7 +39,7 @@
 			align-items: center;
 			gap: 6px;
 
-			color: var(--l3-foreground);
+			color: var(--Slate-50, #62687c);
 			font-family: 'Geist Mono';
 			font-size: 12px;
 			font-style: normal;
@@ -65,7 +65,7 @@
 			gap: 10px;
 
 			.metrics-aggregation-section-content-item-label {
-				color: var(--l2-foreground);
+				color: var(--Vanilla-400, #c0c1c3);
 				font-family: 'Geist Mono';
 				font-size: 13px;
 				font-style: normal;
@@ -74,7 +74,7 @@
 				letter-spacing: -0.07px;
 
 				&.main-label {
-					color: var(--l3-foreground);
+					color: var(--Slate-50, #62687c);
 					font-family: 'Geist Mono';
 					font-size: 12px;
 					font-style: normal;
@@ -100,19 +100,15 @@
 
 				.ant-select-selector {
 					border-radius: 2px;
-					border: 1.005px solid var(--l1-border);
-					background: var(--l1-background);
-					color: var(--l1-foreground);
+					border: 1.005px solid var(--Slate-400, #1d212d);
+					background: var(--Ink-300, #16181d);
+					color: var(--bg-vanilla-400);
 					font-family: 'Geist Mono';
 					font-size: 13px;
 					font-style: normal;
 					font-weight: 400;
 					line-height: 20px;
 					letter-spacing: -0.07px;
-
-					.ant-select-selection-item {
-						color: var(--l1-foreground);
-					}
 				}
 
 				.input-with-label {
@@ -149,10 +145,10 @@
 
 .metrics-operators-select {
 	border-radius: 2px;
-	border: 1.005px solid var(--l1-border);
-	background: var(--l1-background);
+	border: 1.005px solid var(--Slate-400, #1d212d);
+	background: var(--Ink-300, #16181d);
 
-	color: var(--l1-foreground);
+	color: var(--Vanilla-400, #c0c1c3);
 	font-family: 'Geist Mono';
 	font-size: 13px;
 	font-style: normal;
@@ -160,3 +156,35 @@
 	line-height: 20px; /* 142.857% */
 	letter-spacing: -0.07px;
 }
+
+.lightMode {
+	.metrics-aggregate-section {
+		.metrics-aggregation-section-content {
+			.metrics-aggregation-section-content-item {
+				.metrics-aggregation-section-content-item-label {
+					color: var(--text-ink-200);
+
+					&.main-label {
+						color: var(--text-slate-100);
+					}
+				}
+
+				.metrics-aggregation-section-content-item-value {
+					.ant-select-selector {
+						border: 1px solid var(--bg-vanilla-300) !important;
+						background: var(--bg-vanilla-100) !important;
+
+						.ant-select-selection-item {
+							color: var(--text-ink-400);
+						}
+					}
+				}
+			}
+		}
+	}
+	.metrics-operators-select {
+		border: 1px solid var(--bg-vanilla-300) !important;
+		background: var(--bg-vanilla-100) !important;
+		color: var(--text-ink-100);
+	}
+}

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

@@ -10,7 +10,7 @@
 		font-size: 12px !important;
 		line-height: 27px;
 		&::placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--bg-vanilla-400) !important;
 			font-size: 12px !important;
 		}
 	}
@@ -22,9 +22,9 @@
 	.ant-select-selector {
 		width: 100%;
 		border-radius: 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l1-background);
-		color: var(--l1-foreground);
+		border: 1px solid #1d212d !important;
+		background: #16181d;
+		color: #fff;
 		font-family: 'Geist Mono';
 		font-size: 13px;
 		font-style: normal;
@@ -33,35 +33,65 @@
 		min-height: 36px;
 
 		.ant-select-selection-placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--bg-vanilla-400) !important;
 			font-size: 12px !important;
 		}
 	}
 
 	.ant-select-dropdown {
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
+		border: 1px solid var(--bg-slate-400);
+		background: linear-gradient(
+			139deg,
+			rgba(18, 19, 23, 0.8) 0%,
+			rgba(18, 19, 23, 0.9) 98.68%
+		);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
 
 		.ant-select-item {
-			color: var(--l1-foreground);
+			color: #fff;
 			font-family: 'Geist Mono';
 			font-size: 13px;
 			font-style: normal;
 			font-weight: 400;
 			line-height: 20px; /* 142.857% */
 
-			&:hover,
-			&.ant-select-item-option-active {
-				background: var(--l3-background) !important;
-			}
-
-			&.ant-select-item-option-selected {
-				background: var(--l3-background) !important;
-				border: 1px solid var(--l1-border);
-				font-weight: 600;
+			&:hover {
+				background: rgba(171, 189, 255, 0.04) !important;
+			}
+		}
+	}
+}
+
+.lightMode {
+	.metrics-source-select-container {
+		.ant-select-selector {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100);
+			color: var(--text-ink-100);
+		}
+
+		.ant-select-dropdown {
+			background: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300) !important;
+			box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+				0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+			backdrop-filter: none;
+
+			.ant-select-item {
+				color: var(--text-ink-100);
+
+				&:hover,
+				&.ant-select-item-option-active {
+					background: var(--bg-vanilla-300) !important;
+				}
+
+				&.ant-select-item-option-selected {
+					background: var(--bg-vanilla-300) !important;
+					border: 1px solid var(--bg-slate-400);
+					font-weight: 600;
+				}
 			}
 		}
 	}

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

@@ -20,34 +20,34 @@
 			font-style: normal;
 			font-weight: var(--font-weight-normal);
 
-			color: var(--l2-foreground);
+			color: var(--Vanilla-400, #c0c1c3);
 		}
 
 		.tab {
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-400);
 			border-left: none;
 			min-width: 120px;
 			height: 36px;
 			line-height: 36px;
 
 			&:first-child {
-				border-left: 1px solid var(--l1-border);
+				border-left: 1px solid var(--bg-slate-400);
 			}
 		}
 
 		.tab::before {
-			background: var(--l1-border);
+			background: var(--bg-slate-400);
 		}
 
 		.selected-view {
 			color: var(--text-robin-500);
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-400);
 
 			display: none;
 		}
 
 		.selected-view::before {
-			background: var(--l1-border);
+			background: var(--bg-slate-400);
 		}
 	}
 
@@ -56,8 +56,8 @@
 		height: 30px;
 
 		border-radius: 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
 }
@@ -89,7 +89,7 @@
 				position: relative !important;
 
 				&:focus-within {
-					border-color: var(--primary-background);
+					border-color: var(--bg-robin-500);
 				}
 
 				&.cm-focused {
@@ -98,20 +98,20 @@
 
 				.cm-content {
 					border-radius: 2px;
-					border: 1px solid var(--l1-border);
+					border: 1px solid var(--Slate-400, #1d212d);
 					border-top-right-radius: 0px;
 					border-bottom-right-radius: 0px;
 					padding: 0px !important;
-					background-color: var(--card) !important;
+					background-color: #121317 !important;
 
 					&:focus-within {
-						border-color: var(--l1-border);
+						border-color: var(--bg-ink-200);
 					}
 				}
 
 				.cm-tooltip-autocomplete {
-					background: var(--l3-background) !important;
-					color: var(--l1-background) !important;
+					background: var(--bg-ink-300) !important;
+					color: var(--bg-ink-500) !important;
 					border-radius: 2px !important;
 					font-size: 12px !important;
 					font-weight: 500 !important;
@@ -121,17 +121,17 @@
 					right: 0px !important;
 
 					border-radius: 4px;
-					border: 1px solid var(--l1-border);
+					border: 1px solid var(--bg-slate-200, #1d212d);
 					background: linear-gradient(
 						139deg,
-						color-mix(in srgb, var(--card) 80%, transparent) 0%,
-						color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+						rgba(18, 19, 23, 0.8) 0%,
+						rgba(18, 19, 23, 0.9) 98.68%
 					) !important;
 					backdrop-filter: blur(20px);
 					box-sizing: border-box;
 					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
 					font-family: 'Space Mono', monospace !important;
-					color: var(--l1-foreground) !important;
+					color: var(--bg-vanilla-100) !important;
 
 					ul {
 						width: 100% !important;
@@ -174,11 +174,7 @@
 
 							&[aria-selected='true'] {
 								// background-color: rgba(78, 116, 248, 0.7) !important;
-								background: color-mix(
-									in srgb,
-									var(--bg-robin-200) 4%,
-									transparent
-								) !important;
+								background: rgba(171, 189, 255, 0.04) !important;
 							}
 						}
 					}
@@ -211,25 +207,25 @@
 				.cm-line {
 					line-height: 36px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: var(--card) !important;
+					background-color: #121317 !important;
 
 					::-moz-selection {
-						background: var(--l3-background) !important;
+						background: var(--bg-ink-100) !important;
 						opacity: 0.5 !important;
 					}
 
 					::selection {
-						background: var(--l3-background) !important;
+						background: var(--bg-ink-100) !important;
 						opacity: 0.5 !important;
 					}
 
 					.cm-function {
-						color: var(--primary-background) !important;
+						color: var(--bg-robin-500) !important;
 					}
 
 					.chip-decorator {
-						background: var(--l3-background) !important;
-						color: var(--l1-foreground) !important;
+						background: rgba(36, 40, 52, 1) !important;
+						color: var(--bg-vanilla-100) !important;
 						border-radius: 4px;
 						padding: 2px 4px;
 						margin-right: 4px;
@@ -237,7 +233,7 @@
 				}
 
 				.cm-selectionBackground {
-					background: var(--l3-background) !important;
+					background: var(--bg-ink-100) !important;
 					opacity: 0.5 !important;
 				}
 
@@ -249,8 +245,8 @@
 
 		.close-btn {
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
 			height: 38px;
 			width: 38px;
 
@@ -289,35 +285,35 @@
 	.add-ons-list {
 		.add-ons-tabs {
 			.add-on-tab-title {
-				color: var(--l1-foreground) !important;
+				color: var(--bg-ink-500) !important;
 			}
 
 			.tab {
-				border: 1px solid var(--l1-border) !important;
-				background: var(--l1-background) !important;
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
 
 				&:first-child {
-					border-left: 1px solid var(--l1-border) !important;
+					border-left: 1px solid var(--bg-vanilla-300) !important;
 				}
 			}
 
 			.tab::before {
-				background: var(--l3-background) !important;
+				background: var(--bg-vanilla-300) !important;
 			}
 
 			.selected-view {
-				color: var(--primary-background) !important;
-				border: 1px solid var(--l1-border) !important;
+				color: var(--bg-robin-500) !important;
+				border: 1px solid var(--bg-vanilla-300) !important;
 			}
 
 			.selected-view::before {
-				background: var(--l3-background) !important;
+				background: var(--bg-vanilla-300) !important;
 			}
 		}
 
 		.compass-button {
-			border: 1px solid var(--l1-border) !important;
-			background: var(--l1-background) !important;
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
 		}
 	}
 
@@ -326,33 +322,33 @@
 			.having-filter-select-editor {
 				.cm-editor {
 					&:focus-within {
-						border-color: var(--l1-border) !important;
+						border-color: var(--bg-vanilla-300) !important;
 					}
 
 					.cm-content {
-						border: 1px solid var(--l1-border) !important;
-						background: var(--l1-background) !important;
+						border: 1px solid var(--bg-vanilla-300) !important;
+						background: var(--bg-vanilla-100) !important;
 
 						&:focus-within {
-							border-color: var(--l1-border) !important;
+							border-color: var(--bg-vanilla-300) !important;
 						}
 					}
 
 					.cm-tooltip-autocomplete {
-						background: var(--l1-background) !important;
-						border: 1px solid var(--l1-border) !important;
-						color: var(--l1-foreground) !important;
+						background: var(--bg-vanilla-100) !important;
+						border: 1px solid var(--bg-vanilla-300) !important;
+						color: var(--bg-ink-500) !important;
 						box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
 
 						ul {
 							li {
-								color: var(--l1-foreground) !important;
+								color: var(--bg-ink-300) !important;
 								&:hover {
-									background: var(--l3-background) !important;
+									background: var(--bg-vanilla-300) !important;
 								}
 
 								&[aria-selected='true'] {
-									background: var(--l3-background) !important;
+									background: var(--bg-vanilla-300) !important;
 									font-weight: 600 !important;
 								}
 							}
@@ -360,31 +356,31 @@
 					}
 
 					.cm-line {
-						background-color: var(--l1-background) !important;
+						background-color: var(--bg-vanilla-100) !important;
 
 						::-moz-selection {
-							background: var(--l1-background) !important;
+							background: var(--bg-vanilla-100) !important;
 						}
 
 						::selection {
-							background: var(--l3-background) !important;
+							background: var(--bg-ink-100) !important;
 						}
 
 						.chip-decorator {
-							background: var(--l3-background) !important;
-							color: var(--l1-foreground) !important;
+							background: var(--bg-vanilla-300) !important;
+							color: var(--bg-ink-400) !important;
 						}
 					}
 
 					.cm-selectionBackground {
-						background: var(--l1-background) !important;
+						background: var(--bg-vanilla-100) !important;
 					}
 				}
 			}
 
 			.close-btn {
-				border: 1px solid var(--l1-border) !important;
-				background: var(--l1-background) !important;
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
 			}
 		}
 	}

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

@@ -21,7 +21,7 @@
 				flex: 1;
 				min-width: 0;
 				font-size: 12px;
-				color: var(--l2-foreground) !important;
+				color: var(--bg-vanilla-400) !important;
 
 				&.error {
 					.cm-editor {
@@ -44,24 +44,24 @@
 					}
 
 					&:focus-within {
-						border-color: var(--primary-background);
+						border-color: var(--bg-robin-500);
 					}
 
 					.cm-content {
 						border-radius: 2px;
-						border: 1px solid var(--l1-border);
+						border: 1px solid var(--Slate-400, #1d212d);
 						border-top-right-radius: 0px;
 						border-bottom-right-radius: 0px;
 						padding: 0px !important;
-						background-color: var(--l1-background) !important;
+						background-color: #121317 !important;
 
 						&:focus-within {
-							border-color: var(--l1-border);
+							border-color: var(--bg-ink-200);
 						}
 					}
 
 					.cm-tooltip-autocomplete {
-						background: var(--l3-background) !important;
+						background: var(--bg-ink-300) !important;
 						border-radius: 2px !important;
 						font-size: 12px !important;
 						font-weight: 500 !important;
@@ -72,11 +72,11 @@
 						right: 0px !important;
 
 						border-radius: 4px;
-						border: 1px solid var(--l1-border);
+						border: 1px solid var(--bg-slate-200, #1d212d);
 						background: linear-gradient(
 							139deg,
-							color-mix(in srgb, var(--card) 80%, transparent) 0%,
-							color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+							rgba(18, 19, 23, 0.8) 0%,
+							rgba(18, 19, 23, 0.9) 98.68%
 						) !important;
 						backdrop-filter: blur(20px);
 						box-sizing: border-box;
@@ -116,18 +116,15 @@
 								box-sizing: border-box;
 								overflow: hidden;
 
-								color: var(--l2-foreground) !important;
 								font-family: 'Space Mono', monospace !important;
 
 								.cm-completionIcon {
 									display: none !important;
 								}
 
-								&:hover,
 								&[aria-selected='true'] {
-									background: var(--l3-background) !important;
-									color: var(--l1-foreground) !important;
-									font-weight: 600 !important;
+									// background-color: rgba(78, 116, 248, 0.7) !important;
+									background: rgba(171, 189, 255, 0.04) !important;
 								}
 							}
 						}
@@ -140,25 +137,25 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: var(--l1-background) !important;
+						background-color: #121317 !important;
 
 						::-moz-selection {
-							background: var(--l3-background) !important;
+							background: var(--bg-ink-100) !important;
 							opacity: 0.5 !important;
 						}
 
 						::selection {
-							background: var(--l3-background) !important;
+							background: var(--bg-ink-100) !important;
 							opacity: 0.5 !important;
 						}
 
 						.cm-function {
-							color: var(--primary-background) !important;
+							color: var(--bg-robin-500) !important;
 						}
 
 						.chip-decorator {
-							background: var(--l3-background) !important;
-							color: var(--l1-foreground) !important;
+							background: rgba(36, 40, 52, 1) !important;
+							color: var(--bg-vanilla-100) !important;
 							border-radius: 4px;
 							padding: 2px 4px;
 							margin-right: 4px;
@@ -166,7 +163,7 @@
 					}
 
 					.cm-selectionBackground {
-						background: var(--l3-background) !important;
+						background: var(--bg-ink-100) !important;
 						opacity: 0.5 !important;
 					}
 				}
@@ -198,8 +195,8 @@
 			}
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-background);
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
 				height: 38px;
 				width: 38px;
 
@@ -214,13 +211,13 @@
 			height: 36px;
 			line-height: 36px;
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-400);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 			font-family: 'Space Mono', monospace !important;
 
 			&::placeholder {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 				opacity: 0.5;
 			}
 		}
@@ -237,7 +234,7 @@
 					input {
 						max-width: 120px;
 						&::placeholder {
-							color: var(--l2-foreground);
+							color: var(--bg-vanilla-400);
 						}
 					}
 				}
@@ -249,48 +246,88 @@
 .lightMode {
 	.query-aggregation-container {
 		.aggregation-container {
+			.query-aggregation-options-input {
+				border-color: var(--bg-vanilla-300) !important;
+
+				&::placeholder {
+					color: var(--bg-ink-400) !important;
+					opacity: 0.5 !important;
+				}
+			}
+
 			.query-aggregation-select-container {
 				.query-aggregation-select-editor {
 					.cm-editor {
+						.cm-content {
+							border: 1px solid var(--bg-vanilla-300) !important;
+							background: var(--bg-vanilla-100) !important;
+							box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+
+							&:focus-within {
+								border-color: var(--bg-vanilla-300) !important;
+							}
+						}
+
 						.cm-tooltip-autocomplete {
-							background: var(--l1-background) !important;
-							border: 1px solid var(--l1-border) !important;
+							background: var(--bg-vanilla-100) !important;
+							border: 1px solid var(--bg-vanilla-300) !important;
+							color: var(--bg-ink-500) !important;
 							box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
-							backdrop-filter: none;
 
 							ul {
 								li {
+									color: var(--bg-ink-300) !important;
+
 									&:hover,
 									&[aria-selected='true'] {
-										background: var(--l3-background) !important;
+										background: var(--bg-vanilla-300) !important;
+										color: var(--bg-ink-500) !important;
+										font-weight: 600 !important;
 									}
 								}
 							}
 						}
 
 						.cm-line {
+							background-color: var(--bg-vanilla-100) !important;
+
 							::-moz-selection {
-								background: var(--l1-background) !important;
+								background: var(--bg-vanilla-100) !important;
 								opacity: 0.5 !important;
 							}
 
 							::selection {
-								background: var(--l1-background) !important;
+								background: var(--bg-vanilla-100) !important;
 								opacity: 0.5 !important;
 							}
 
 							.cm-function {
-								color: var(--primary-background) !important;
+								color: var(--bg-robin-500) !important;
+							}
+
+							.chip-decorator {
+								background: var(--bg-vanilla-300) !important;
+								color: var(--bg-ink-400) !important;
 							}
 						}
+
+						// .cm-selectionBackground {
+						// 	background: var(--bg-vanilla-100) !important;
+						// 	opacity: 0.5 !important;
+						// }
 					}
 				}
+
+				.close-btn {
+					border-color: var(--bg-vanilla-300) !important;
+					background: var(--bg-vanilla-100) !important;
+				}
 			}
 		}
 	}
 	.query-aggregation-error-popover {
 		.ant-popover-inner {
-			background-color: var(--l1-background);
+			background-color: var(--bg-vanilla-100);
 			border: none;
 			box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 		}
@@ -299,8 +336,8 @@
 
 .query-aggregation-error-popover {
 	.ant-popover-inner {
-		background-color: var(--l1-border);
-		border: 1px solid var(--l1-border);
+		background-color: var(--bg-slate-500);
+		border: 1px solid var(--bg-slate-400);
 		border-radius: 4px;
 		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 	}

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

@@ -1,7 +1,7 @@
 .add-trace-operator-button,
 .add-new-query-button,
 .add-formula-button {
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border: 1px solid var(--bg-slate-400);
+	background: var(--bg-ink-300);
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 }

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

@@ -19,11 +19,11 @@
 		.query-status-container {
 			width: 32px;
 
-			background-color: var(--l1-background) !important;
+			background-color: #121317 !important;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-200);
 			border-radius: 2px;
 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;
@@ -53,26 +53,26 @@
 		background-color: transparent !important;
 
 		&:focus-within {
-			border-color: var(--primary-background);
+			border-color: var(--bg-robin-500);
 		}
 
 		.cm-content {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--Slate-400, #1d212d);
 			padding: 0px !important;
-			background-color: var(--l1-background) !important;
+			background-color: #121317 !important;
 
 			&:focus-within {
-				border-color: var(--l1-border);
+				border-color: var(--bg-ink-200);
 			}
 		}
 
 		&.cm-focused {
-			outline: 1px solid var(--l1-border);
+			outline: 1px solid var(--bg-slate-200);
 		}
 
 		.cm-tooltip-autocomplete {
-			background: var(--l3-background) !important;
+			background: var(--bg-ink-300) !important;
 			border-radius: 2px !important;
 			font-size: 12px !important;
 			font-weight: 500 !important;
@@ -86,13 +86,13 @@
 			border: 0px;
 			background: linear-gradient(
 				139deg,
-				color-mix(in srgb, var(--card) 80%, transparent) 0%,
-				color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+				rgba(18, 19, 23, 0.8) 0%,
+				rgba(18, 19, 23, 0.9) 98.68%
 			) !important;
 			backdrop-filter: blur(20px);
 			box-sizing: border-box;
 			font-family: 'Space Mono', monospace !important;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-200);
 			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
 
 			ul {
@@ -130,11 +130,8 @@
 
 					font-family: 'Space Mono', monospace !important;
 
-					background-color: var(--l1-background) !important;
-					color: var(--l2-foreground) !important;
-
 					&:hover {
-						background: var(--l3-background) !important;
+						background: var(--bg-ink-100) !important;
 					}
 
 					.cm-completionIcon {
@@ -142,8 +139,8 @@
 					}
 
 					&[aria-selected='true'] {
-						background: var(--l3-background) !important;
-						font-weight: 600 !important;
+						// background-color: rgba(78, 116, 248, 0.7) !important;
+						background: rgba(171, 189, 255, 0.04) !important;
 					}
 				}
 			}
@@ -156,30 +153,30 @@
 		.cm-line {
 			line-height: 34px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: var(--l1-background) !important;
+			background-color: #121317 !important;
 
 			::-moz-selection {
-				background: var(--l3-background) !important;
+				background: var(--bg-ink-100) !important;
 				opacity: 0.5 !important;
 			}
 
 			::selection {
-				background: var(--l3-background) !important;
+				background: var(--bg-ink-100) !important;
 				opacity: 0.5 !important;
 			}
 		}
 
 		.cm-selectionBackground {
-			background: var(--l3-background) !important;
+			background: var(--bg-ink-100) !important;
 			opacity: 0.5 !important;
 		}
 	}
 
 	.cursor-position {
 		font-size: 12px;
-		color: var(--l2-foreground);
+		color: var(--bg-ink-200);
 		padding: 6px;
-		background-color: var(--l1-background);
+		background-color: var(--bg-vanilla-200);
 		border-radius: 4px;
 		display: inline-flex;
 		align-items: center;
@@ -205,13 +202,13 @@
 		}
 
 		.valid {
-			background-color: color-mix(in srgb, var(--bg-forest-400) 10%, transparent);
-			color: var(--bg-forest-600);
+			background-color: rgba(39, 174, 96, 0.1);
+			color: #27ae60;
 		}
 
 		.invalid {
-			background-color: color-mix(in srgb, var(--bg-cherry-400) 10%, transparent);
-			color: var(--bg-cherry-500);
+			background-color: rgba(235, 87, 87, 0.1);
+			color: #eb5757;
 		}
 
 		.query-validation-status {
@@ -240,13 +237,13 @@
 
 	.query-context {
 		padding: 12px;
-		background-color: var(--l1-background);
+		background-color: var(--bg-ink-400);
 		border-radius: 4px;
-		border-left: 3px solid var(--l1-border);
-		color: var(--l2-foreground) !important;
+		border-left: 3px solid var(--bg-robin-500);
+		color: var(--bg-ink-300) !important;
 
 		.ant-card-head {
-			color: var(--l2-foreground) !important;
+			color: var(--bg-vanilla-300) !important;
 		}
 
 		.context-details {
@@ -259,7 +256,7 @@
 				font-size: 13px;
 
 				strong {
-					color: var(--l2-foreground);
+					color: var(--bg-vanilla-300);
 					margin-right: 4px;
 				}
 			}
@@ -274,8 +271,8 @@
 
 	.query-text-preview-title {
 		font-size: 13px;
-		color: var(--primary-foreground);
-		background-color: var(--primary-background);
+		color: var(--bg-vanilla-100);
+		background-color: var(--bg-robin-500);
 		padding: 2px 6px;
 		border-radius: 2px;
 		margin-right: 4px;
@@ -284,14 +281,14 @@
 	.query-text-preview {
 		font-family: 'Space Mono', monospace;
 		font-size: 13px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-200);
 		padding: 2px 6px;
 		font-style: italic;
 	}
 
 	.query-examples-card {
-		background-color: var(--l1-background);
-		border: 1px solid var(--l1-border);
+		background-color: var(--bg-ink-400);
+		border: 1px solid var(--bg-slate-200);
 
 		.ant-card-body {
 			padding: 0;
@@ -300,7 +297,7 @@
 		.query-examples {
 			.ant-collapse-header {
 				padding: 8px 16px !important;
-				color: var(--l2-foreground) !important;
+				color: var(--bg-vanilla-300) !important;
 				font-weight: 500;
 			}
 
@@ -320,20 +317,20 @@
 				flex-direction: column;
 				gap: 4px;
 				padding: 8px 12px;
-				background-color: var(--l1-background);
-				border: 1px solid var(--l1-border);
+				background-color: var(--bg-ink-400);
+				border: 1px solid var(--bg-slate-200);
 				border-radius: 4px;
 				cursor: pointer;
 				transition: all 0.2s ease;
 				outline: none;
 
 				&:hover {
-					background-color: var(--l3-background);
-					border-color: var(--primary-background);
+					background-color: var(--bg-ink-300);
+					border-color: var(--bg-robin-500);
 				}
 
 				&:focus-visible {
-					outline: 2px solid var(--primary-background);
+					outline: 2px solid var(--bg-robin-500);
 					outline-offset: 2px;
 				}
 
@@ -345,22 +342,22 @@
 
 				.query-example-label {
 					font-weight: 500;
-					color: var(--l2-foreground);
+					color: var(--bg-vanilla-300);
 					font-size: 13px;
 				}
 
 				.query-example-query {
 					font-family: 'Space Mono', monospace;
 					font-size: 12px;
-					color: var(--l2-foreground);
-					background-color: var(--l3-background);
+					color: var(--bg-vanilla-200);
+					background-color: var(--bg-ink-300);
 					padding: 2px 6px;
 					border-radius: 2px;
 				}
 
 				.query-example-description {
 					font-size: 12px;
-					color: var(--l2-foreground);
+					color: var(--bg-vanilla-200);
 					opacity: 0.8;
 				}
 			}
@@ -407,37 +404,33 @@
 
 		// Color variations based on context
 		&.context-indicator-key {
-			border-left-color: var(--primary-background);
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 10%,
-				transparent
-			);
+			border-left-color: #1890ff; // blue
+			background-color: rgba(24, 144, 255, 0.1);
 		}
 
 		&.context-indicator-operator {
-			border-left-color: var(--bg-robin-600); // purple
-			background-color: color-mix(in srgb, var(--bg-robin-600) 10%, transparent);
+			border-left-color: #722ed1; // purple
+			background-color: rgba(114, 46, 209, 0.1);
 		}
 
 		&.context-indicator-value {
-			border-left-color: var(--bg-forest-500); // green
-			background-color: color-mix(in srgb, var(--bg-forest-400) 10%, transparent);
+			border-left-color: #52c41a; // green
+			background-color: rgba(82, 196, 26, 0.1);
 		}
 
 		&.context-indicator-conjunction {
-			border-left-color: var(--bg-amber-500); // orange
-			background-color: color-mix(in srgb, var(--bg-amber-400) 10%, transparent);
+			border-left-color: #fa8c16; // orange
+			background-color: rgba(250, 140, 22, 0.1);
 		}
 
 		&.context-indicator-function {
-			border-left-color: var(--bg-aqua-500); // cyan
-			background-color: color-mix(in srgb, var(--bg-aqua-500) 10%, transparent);
+			border-left-color: #13c2c2; // cyan
+			background-color: rgba(19, 194, 194, 0.1);
 		}
 
 		&.context-indicator-parenthesis {
-			border-left-color: var(--bg-sakura-500); // magenta
-			background-color: color-mix(in srgb, var(--bg-sakura-500) 10%, transparent);
+			border-left-color: #eb2f96; // magenta
+			background-color: rgba(235, 47, 150, 0.1);
 		}
 	}
 }
@@ -448,36 +441,279 @@
 	}
 
 	.ant-popover-content {
-		background: var(--l1-background);
-		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		background: linear-gradient(
+			139deg,
+			rgba(18, 19, 23, 0.8) 0%,
+			rgba(18, 19, 23, 0.9) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
 
 		margin-top: -6px !important;
 	}
 }
 
+// /* Dark mode support */
+// :global(.darkMode) {
+// 	.code-mirror-where-clause {
+// 		.cm-editor {
+// 			border-color: var(--bg-slate-500);
+// 			background-color: var(--bg-ink-400);
+// 		}
+
+// 		.cursor-position {
+// 			background-color: var(--bg-ink-400);
+// 			color: var(--bg-vanilla-100);
+// 		}
+
+// 		.query-context {
+// 			background-color: var(--bg-ink-400);
+// 			color: var(--bg-vanilla-100);
+
+// 			h3 {
+// 				color: var(--bg-vanilla-100);
+// 			}
+
+// 			.context-details {
+// 				p {
+// 					strong {
+// 						color: var(--bg-vanilla-200);
+// 					}
+// 				}
+// 			}
+// 		}
+
+// 		.query-examples-card {
+// 			background-color: var(--bg-ink-400);
+// 			border-color: var(--bg-slate-500);
+
+// 			.ant-collapse-header {
+// 				color: var(--bg-vanilla-100) !important;
+// 			}
+
+// 			.query-example-tag {
+// 				background-color: var(--bg-ink-400);
+// 				border-color: var(--bg-slate-500);
+
+// 				&:hover {
+// 					background-color: var(--bg-ink-300);
+// 					border-color: var(--bg-robin-500);
+// 				}
+
+// 				.query-example-label {
+// 					color: var(--bg-vanilla-100);
+// 				}
+
+// 				.query-example-query {
+// 					color: var(--bg-vanilla-100);
+// 					background-color: var(--bg-ink-300);
+// 				}
+
+// 				.query-example-description {
+// 					color: var(--bg-vanilla-100);
+// 				}
+// 			}
+// 		}
+
+// 		.context-indicator {
+// 			background-color: var(--bg-ink-300);
+// 			color: var(--bg-vanilla-100);
+
+// 			.query-pair-info {
+// 				border-left: 1px solid rgba(255, 255, 255, 0.1);
+// 				background-color: rgba(255, 255, 255, 0.05);
+// 			}
+// 		}
+// 	}
+// }
+
 .lightMode {
 	.code-mirror-where-clause {
+		.query-where-clause-editor-container {
+			.query-status-container {
+				background-color: var(--bg-vanilla-100) !important;
+				border: 1px solid var(--bg-vanilla-300);
+
+				&.hasErrors {
+					border-color: var(--bg-cherry-500);
+				}
+			}
+		}
+
+		.query-where-clause-editor {
+			&.hasErrors {
+				.cm-editor {
+					.cm-content {
+						border-color: var(--bg-cherry-500);
+						border-top-right-radius: 0px !important;
+						border-bottom-right-radius: 0px !important;
+					}
+				}
+			}
+		}
+
 		.cm-editor {
+			&:focus-within {
+				border-color: var(--bg-robin-500);
+			}
+
+			&.cm-focused {
+				outline: 1px solid var(--bg-vanilla-300);
+			}
+
+			.cm-content {
+				border-radius: 2px;
+				border: 1px solid var(--bg-vanilla-300);
+				padding: 0px !important;
+				background-color: var(--bg-vanilla-100) !important;
+
+				&:focus-within {
+					border-color: var(--bg-vanilla-200);
+				}
+			}
+
 			.cm-tooltip-autocomplete {
-				background: var(--l1-background) !important;
-				border: 1px solid var(--l1-border);
+				background: var(--bg-vanilla-100) !important;
+				border: 1px solid var(--bg-vanilla-300);
 				backdrop-filter: blur(20px);
 				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+
+				ul {
+					li {
+						background-color: var(--bg-vanilla-100) !important;
+						color: var(--bg-ink-300) !important;
+
+						&:hover,
+						&[aria-selected='true'] {
+							background-color: var(--bg-vanilla-300) !important;
+							font-weight: 600 !important;
+						}
+					}
+				}
 			}
 
 			.cm-line {
+				background-color: var(--bg-vanilla-100) !important;
+
 				::-moz-selection {
-					background: var(--bg-robin-200) !important;
+					background: #b3d4fc !important;
 				}
 
 				::selection {
-					background: var(--bg-robin-200) !important;
+					background: #b3d4fc !important;
 				}
 			}
 
 			.cm-selectionBackground {
-				background: var(--bg-robin-200) !important;
+				background: #b3d4fc !important;
+			}
+		}
+
+		.cursor-position {
+			color: var(--bg-vanilla-200);
+			background-color: var(--bg-vanilla-100);
+		}
+
+		.query-context {
+			background-color: var(--bg-vanilla-100);
+			border-left: 3px solid var(--bg-vanilla-300);
+			color: var(--bg-vanilla-300) !important;
+
+			.ant-card-head {
+				color: var(--bg-ink-300) !important;
+			}
+
+			.context-details {
+				p {
+					strong {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+
+		.query-examples-card {
+			background-color: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300);
+
+			.query-examples {
+				.ant-collapse-header {
+					color: var(--bg-ink-300) !important;
+				}
+
+				.query-example-tag {
+					background-color: var(--bg-vanilla-100);
+					border: 1px solid var(--bg-vanilla-300);
+
+					&:hover {
+						background-color: var(--bg-vanilla-200);
+						border-color: var(--bg-vanilla-300);
+					}
+
+					.query-example-label {
+						color: var(--bg-ink-300);
+					}
+
+					.query-example-query {
+						color: var(--bg-ink-300);
+						background-color: var(--bg-vanilla-100);
+					}
+
+					.query-example-description {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+
+		.context-indicator {
+			background-color: var(--bg-vanilla-100);
+			border-left: 4px solid var(--bg-vanilla-300);
+
+			display: none;
+
+			.query-pair-info {
+				border-left: 1px solid rgba(255, 255, 255, 0.1);
+				background-color: rgba(255, 255, 255, 0.03);
+			}
+
+			// Color variations based on context
+			&.context-indicator-key {
+				border-left-color: #1890ff; // blue
+				background-color: rgba(24, 144, 255, 0.1);
+			}
+
+			&.context-indicator-operator {
+				border-left-color: #722ed1; // purple
+				background-color: rgba(114, 46, 209, 0.1);
+			}
+
+			&.context-indicator-value {
+				border-left-color: #52c41a; // green
+				background-color: rgba(82, 196, 26, 0.1);
+			}
+
+			&.context-indicator-conjunction {
+				border-left-color: #fa8c16; // orange
+				background-color: rgba(250, 140, 22, 0.1);
+			}
+
+			&.context-indicator-function {
+				border-left-color: #13c2c2; // cyan
+				background-color: rgba(19, 194, 194, 0.1);
+			}
+
+			&.context-indicator-parenthesis {
+				border-left-color: #eb2f96; // magenta
+				background-color: rgba(235, 47, 150, 0.1);
 			}
 		}
 	}
+
+	.query-status-popover {
+		.ant-popover-content {
+			background: var(--bg-vanilla-100);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		}
+	}
 }

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

@@ -16,8 +16,8 @@
 			width: 1px;
 			background: repeating-linear-gradient(
 				to bottom,
-				var(--l1-border),
-				var(--l1-border) 4px,
+				var(--bg-slate-400),
+				var(--bg-slate-400) 4px,
 				transparent 4px,
 				transparent 8px
 			);
@@ -36,8 +36,8 @@
 			width: 20px;
 			background: repeating-linear-gradient(
 				to right,
-				var(--l1-border),
-				var(--l1-border) 4px,
+				var(--bg-slate-400),
+				var(--bg-slate-400) 4px,
 				transparent 4px,
 				transparent 8px
 			);
@@ -52,7 +52,7 @@
 			height: 4px;
 			width: 4px;
 			border-radius: 50%;
-			background-color: var(--l1-border);
+			background-color: var(--bg-slate-400);
 		}
 	}
 
@@ -87,8 +87,8 @@
 		flex-direction: row;
 
 		border-radius: 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 
 		.qb-trace-operator-editor-container {
 			flex: 1;
@@ -105,17 +105,17 @@
 				top: 50%;
 				height: 1px;
 				width: 16px;
-				background-color: var(--l1-border);
+				background-color: var(--bg-slate-400);
 			}
 		}
 
 		.label {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			padding: 0px 8px;
-			border-right: 1px solid var(--l1-border);
+			border-right: 1px solid var(--bg-slate-400);
 			font-size: 12px;
 			font-weight: 300;
 		}
@@ -128,22 +128,22 @@
 			&::before {
 				background: repeating-linear-gradient(
 					to right,
-					var(--l3-background),
-					var(--l3-background) 4px,
+					var(--bg-vanilla-300),
+					var(--bg-vanilla-300) 4px,
 					transparent 4px,
 					transparent 8px
 				);
 			}
 			&::after {
-				background-color: var(--l3-background);
+				background-color: var(--bg-vanilla-300);
 			}
 		}
 		&.non-list-view {
 			&::before {
 				background: repeating-linear-gradient(
 					to bottom,
-					var(--l3-background),
-					var(--l3-background) 4px,
+					var(--bg-vanilla-300),
+					var(--bg-vanilla-300) 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -151,13 +151,13 @@
 		}
 
 		&-label-with-input {
-			border: 1px solid var(--l1-border) !important;
-			background: var(--l1-background) !important;
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
 
 			.label {
-				color: var(--l1-foreground) !important;
-				border-right: 1px solid var(--l1-border) !important;
-				background: var(--l1-background) !important;
+				color: var(--bg-ink-500) !important;
+				border-right: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
 			}
 		}
 	}