feat: add alert condition component (#9008 )

chore: copy changes and minor fixes, onboarding hint (#9095 )
chore: added cumulative window support (#8828 )
2025-09-15 21:22:07 +05:30 · 2025-09-15 18:54:37 +05:30 · 2025-09-15 15:00:12 +05:30 · 2025-09-14 22:14:42 +05:30 · 2025-09-14 20:41:13 +05:30 · 2025-09-14 13:12:48 +00:00
782 changed files with 46428 additions and 9240 deletions
--- a/.devenv/docker/clickhouse/compose.yaml
+++ b/.devenv/docker/clickhouse/compose.yaml
@@ -1,6 +1,6 @@
 services:
  clickhouse:
-    image: clickhouse/clickhouse-server:24.1.2-alpine
+    image: clickhouse/clickhouse-server:25.5.6
    container_name: clickhouse
    volumes:
      - ${PWD}/fs/etc/clickhouse-server/config.d/config.xml:/etc/clickhouse-server/config.d/config.xml
@@ -23,6 +23,8 @@ services:
      retries: 3
    depends_on:
      - zookeeper
+    environment:
+      - CLICKHOUSE_SKIP_USER_SETUP=1
  zookeeper:
    image: signoz/zookeeper:3.7.1
    container_name: zookeeper
@@ -40,7 +42,7 @@ services:
      timeout: 5s
      retries: 3
  schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.129.0
+    image: signoz/signoz-schema-migrator:v0.129.4
    container_name: schema-migrator-sync
    command:
      - sync
@@ -53,7 +55,7 @@ services:
        condition: service_healthy
    restart: on-failure
  schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.129.0
+    image: signoz/signoz-schema-migrator:v0.129.4
    container_name: schema-migrator-async
    command:
      - async
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -5,6 +5,45 @@
 /frontend/ @SigNoz/frontend @YounixM
 /frontend/src/container/MetricsApplication @srikanthccv
 /frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
+
+# Dashboard, Alert, Metrics, Service Map, Services
+/frontend/src/container/ListOfDashboard/ @srikanthccv
+/frontend/src/container/NewDashboard/ @srikanthccv
+/frontend/src/pages/DashboardsListPage/ @srikanthccv
+/frontend/src/pages/DashboardWidget/ @srikanthccv
+/frontend/src/pages/NewDashboard/ @srikanthccv
+/frontend/src/providers/Dashboard/ @srikanthccv
+
+# Alerts
+/frontend/src/container/AlertHistory/ @srikanthccv
+/frontend/src/container/AllAlertChannels/ @srikanthccv
+/frontend/src/container/AnomalyAlertEvaluationView/ @srikanthccv
+/frontend/src/container/CreateAlertChannels/ @srikanthccv
+/frontend/src/container/CreateAlertRule/ @srikanthccv
+/frontend/src/container/EditAlertChannels/ @srikanthccv
+/frontend/src/container/FormAlertChannels/ @srikanthccv
+/frontend/src/container/FormAlertRules/ @srikanthccv
+/frontend/src/container/ListAlertRules/ @srikanthccv
+/frontend/src/container/TriggeredAlerts/ @srikanthccv
+/frontend/src/pages/AlertChannelCreate/ @srikanthccv
+/frontend/src/pages/AlertDetails/ @srikanthccv
+/frontend/src/pages/AlertHistory/ @srikanthccv
+/frontend/src/pages/AlertList/ @srikanthccv
+/frontend/src/pages/CreateAlert/ @srikanthccv
+/frontend/src/providers/Alert.tsx @srikanthccv
+
+# Metrics
+/frontend/src/container/MetricsExplorer/ @srikanthccv
+/frontend/src/pages/MetricsApplication/ @srikanthccv
+/frontend/src/pages/MetricsExplorer/ @srikanthccv
+
+# Services and Service Map
+/frontend/src/container/ServiceApplication/ @srikanthccv
+/frontend/src/container/ServiceTable/ @srikanthccv
+/frontend/src/pages/Services/ @srikanthccv
+/frontend/src/pages/ServiceTopLevelOperations/ @srikanthccv
+/frontend/src/container/Home/Services/ @srikanthccv
+
 /deploy/ @SigNoz/devops
 .github @SigNoz/devops

@@ -42,3 +81,7 @@
 /pkg/telemetrymetadata/ @srikanthccv
 /pkg/telemetrymetrics/ @srikanthccv
 /pkg/telemetrytraces/ @srikanthccv
+
+# AuthN / AuthZ Owners 
+
+/pkg/authz/ @vikrantgupta25 @grandwizard28
--- a/.github/workflows/build-community.yaml
+++ b/.github/workflows/build-community.yaml
@@ -62,7 +62,7 @@ jobs:
    secrets: inherit
    with:
      PRIMUS_REF: main
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
      GO_NAME: signoz-community
      GO_INPUT_ARTIFACT_CACHE_KEY: community-jsbuild-${{ github.sha }}
      GO_INPUT_ARTIFACT_PATH: frontend/build
--- a/.github/workflows/build-enterprise.yaml
+++ b/.github/workflows/build-enterprise.yaml
@@ -93,7 +93,7 @@ jobs:
    secrets: inherit
    with:
      PRIMUS_REF: main
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
      GO_INPUT_ARTIFACT_CACHE_KEY: enterprise-jsbuild-${{ github.sha }}
      GO_INPUT_ARTIFACT_PATH: frontend/build
      GO_BUILD_CONTEXT: ./cmd/enterprise
--- a/.github/workflows/build-staging.yaml
+++ b/.github/workflows/build-staging.yaml
@@ -92,7 +92,7 @@ jobs:
    secrets: inherit
    with:
      PRIMUS_REF: main
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
      GO_INPUT_ARTIFACT_CACHE_KEY: staging-jsbuild-${{ github.sha }}
      GO_INPUT_ARTIFACT_PATH: frontend/build
      GO_BUILD_CONTEXT: ./cmd/enterprise
--- a/.github/workflows/goci.yaml
+++ b/.github/workflows/goci.yaml
@@ -18,7 +18,7 @@ jobs:
    with:
      PRIMUS_REF: main
      GO_TEST_CONTEXT: ./...
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
  fmt:
    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')) ||
@@ -27,7 +27,7 @@ jobs:
    secrets: inherit
    with:
      PRIMUS_REF: main
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
  lint:
    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')) ||
@@ -36,7 +36,7 @@ jobs:
    secrets: inherit
    with:
      PRIMUS_REF: main
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
  deps:
    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')) ||
@@ -45,7 +45,7 @@ jobs:
    secrets: inherit
    with:
      PRIMUS_REF: main
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
  build:
    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')) ||
@@ -57,7 +57,7 @@ jobs:
      - name: go-install
        uses: actions/setup-go@v5
        with:
-          go-version: "1.23"
+          go-version: "1.24"
      - name: qemu-install
        uses: docker/setup-qemu-action@v3
      - name: aarch64-install
--- a/.github/workflows/gor-signoz-community.yaml
+++ b/.github/workflows/gor-signoz-community.yaml
@@ -58,7 +58,7 @@ jobs:
      - name: setup-go
        uses: actions/setup-go@v5
        with:
-          go-version: "1.23"
+          go-version: "1.24"
      - name: cross-compilation-tools
        if: matrix.os == 'ubuntu-latest'
        run: |
@@ -122,7 +122,7 @@ jobs:
      - name: setup-go
        uses: actions/setup-go@v5
        with:
-          go-version: "1.23"
+          go-version: "1.24"

      # copy the caches from build
      - name: get-sha
--- a/.github/workflows/gor-signoz.yaml
+++ b/.github/workflows/gor-signoz.yaml
@@ -72,7 +72,7 @@ jobs:
      - name: setup-go
        uses: actions/setup-go@v5
        with:
-          go-version: "1.23"
+          go-version: "1.24"
      - name: cross-compilation-tools
        if: matrix.os == 'ubuntu-latest'
        run: |
@@ -135,7 +135,7 @@ jobs:
      - name: setup-go
        uses: actions/setup-go@v5
        with:
-          go-version: "1.23"
+          go-version: "1.24"

      # copy the caches from build
      - name: get-sha
--- a/.gitignore
+++ b/.gitignore
@@ -86,6 +86,8 @@ queries.active
 .devenv/**/tmp/**
 .qodo

+.dev
+
 ### Python ###
 # Byte-compiled / optimized / DLL files
 __pycache__/
--- a/.golangci.yml
+++ b/.golangci.yml
@@ -8,6 +8,7 @@ linters:
    - depguard
    - iface
    - unparam
+    - forbidigo

 linters-settings:
  sloglint:
@@ -24,6 +25,10 @@ linters-settings:
        deny:
          - pkg: "go.uber.org/zap"
            desc: "Do not use zap logger. Use slog instead."
+      noerrors:
+        deny:
+          - pkg: "errors"
+            desc: "Do not use errors package. Use github.com/SigNoz/signoz/pkg/errors instead."
  iface:
    enable:
      - identical
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -78,4 +78,5 @@ Need assistance? Join our Slack community:

 - Set up your [development environment](docs/contributing/development.md)
 - Deploy and observe [SigNoz in action with OpenTelemetry Demo Application](docs/otel-demo-docs.md)
- Explore the [SigNoz Community Advocate Program](ADVOCATE.md), which recognises contributors who support the community, share their expertise, and help shape SigNoz's future. 
+- Explore the [SigNoz Community Advocate Program](ADVOCATE.md), which recognises contributors who support the community, share their expertise, and help shape SigNoz's future.
+- Write [integration tests](docs/contributing/go/integration.md)
--- a/cmd/community/server.go
+++ b/cmd/community/server.go
@@ -32,7 +32,7 @@ func registerServer(parentCmd *cobra.Command, logger *slog.Logger) {
 		Short:              "Run the SigNoz server",
 		FParseErrWhitelist: cobra.FParseErrWhitelist{UnknownFlags: true},
 		RunE: func(currCmd *cobra.Command, args []string) error {
-			config, err := cmd.NewSigNozConfig(currCmd.Context(), flags)
+			config, err := cmd.NewSigNozConfig(currCmd.Context(), logger, flags)
 			if err != nil {
 				return err
 			}
--- a/cmd/config.go
+++ b/cmd/config.go
@@ -2,7 +2,6 @@ package cmd

 import (
 	"context"
-	"fmt"
 	"log/slog"
 	"os"

@@ -12,9 +11,10 @@ import (
 	"github.com/SigNoz/signoz/pkg/signoz"
 )

-func NewSigNozConfig(ctx context.Context, flags signoz.DeprecatedFlags) (signoz.Config, error) {
+func NewSigNozConfig(ctx context.Context, logger *slog.Logger, flags signoz.DeprecatedFlags) (signoz.Config, error) {
 	config, err := signoz.NewConfig(
 		ctx,
+		logger,
 		config.ResolverConfig{
 			Uris: []string{"env:"},
 			ProviderFactories: []config.ProviderFactory{
@@ -31,14 +31,10 @@ func NewSigNozConfig(ctx context.Context, flags signoz.DeprecatedFlags) (signoz.
 	return config, nil
 }

-func NewJWTSecret(_ context.Context, _ *slog.Logger) string {
+func NewJWTSecret(ctx context.Context, logger *slog.Logger) string {
 	jwtSecret := os.Getenv("SIGNOZ_JWT_SECRET")
 	if len(jwtSecret) == 0 {
-		fmt.Println("🚨 CRITICAL SECURITY ISSUE: No JWT secret key specified!")
-		fmt.Println("SIGNOZ_JWT_SECRET environment variable is not set. This has dire consequences for the security of the application.")
-		fmt.Println("Without a JWT secret, user sessions are vulnerable to tampering and unauthorized access.")
-		fmt.Println("Please set the SIGNOZ_JWT_SECRET environment variable immediately.")
-		fmt.Println("For more information, please refer to https://github.com/SigNoz/signoz/issues/8400.")
+		logger.ErrorContext(ctx, "🚨 CRITICAL SECURITY ISSUE: No JWT secret key specified!", "error", "SIGNOZ_JWT_SECRET environment variable is not set. This has dire consequences for the security of the application. Without a JWT secret, user sessions are vulnerable to tampering and unauthorized access. Please set the SIGNOZ_JWT_SECRET environment variable immediately. For more information, please refer to https://github.com/SigNoz/signoz/issues/8400.")
 	}

 	return jwtSecret
--- a/cmd/enterprise/Dockerfile.integration
+++ b/cmd/enterprise/Dockerfile.integration
@@ -2,10 +2,11 @@ FROM node:18-bullseye AS build

 WORKDIR /opt/
 COPY ./frontend/ ./
+ENV NODE_OPTIONS=--max-old-space-size=8192
 RUN CI=1 yarn install
 RUN CI=1 yarn build

-FROM golang:1.23-bullseye
+FROM golang:1.24-bullseye

 ARG OS="linux"
 ARG TARGETARCH
--- a/cmd/enterprise/server.go
+++ b/cmd/enterprise/server.go
@@ -35,7 +35,7 @@ func registerServer(parentCmd *cobra.Command, logger *slog.Logger) {
 		Short:              "Run the SigNoz server",
 		FParseErrWhitelist: cobra.FParseErrWhitelist{UnknownFlags: true},
 		RunE: func(currCmd *cobra.Command, args []string) error {
-			config, err := cmd.NewSigNozConfig(currCmd.Context(), flags)
+			config, err := cmd.NewSigNozConfig(currCmd.Context(), logger, flags)
 			if err != nil {
 				return err
 			}
--- a/conf/example.yaml
+++ b/conf/example.yaml
@@ -137,10 +137,7 @@ prometheus:
 ##################### Alertmanager #####################
 alertmanager:
  # Specifies the alertmanager provider to use.
-  provider: legacy
-  legacy:
-    # The API URL (with prefix) of the legacy Alertmanager instance.
-    api_url: http://localhost:9093/api
+  provider: signoz
  signoz:
    # The poll interval for periodically syncing the alertmanager with the config in the store.
    poll_interval: 1m
--- a/deploy/docker-swarm/docker-compose.ha.yaml
+++ b/deploy/docker-swarm/docker-compose.ha.yaml
@@ -11,7 +11,7 @@ x-common: &common
      max-file: "3"
 x-clickhouse-defaults: &clickhouse-defaults
  !!merge <<: *common
-  image: clickhouse/clickhouse-server:24.1.2-alpine
+  image: clickhouse/clickhouse-server:25.5.6
  tty: true
  deploy:
    labels:
@@ -37,6 +37,8 @@ x-clickhouse-defaults: &clickhouse-defaults
    nofile:
      soft: 262144
      hard: 262144
+  environment:
+    - CLICKHOUSE_SKIP_USER_SETUP=1
 x-zookeeper-defaults: &zookeeper-defaults
  !!merge <<: *common
  image: signoz/zookeeper:3.7.1
@@ -63,7 +65,7 @@ x-db-depend: &db-depend
 services:
  init-clickhouse:
    !!merge <<: *common
-    image: clickhouse/clickhouse-server:24.1.2-alpine
+    image: clickhouse/clickhouse-server:25.5.6
    command:
      - bash
      - -c
@@ -174,7 +176,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:v0.92.1
+    image: signoz/signoz:v0.94.1
    command:
      - --config=/root/config/prometheus.yml
    ports:
@@ -207,7 +209,7 @@ services:
      retries: 3
  otel-collector:
    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.0
+    image: signoz/signoz-otel-collector:v0.129.4
    command:
      - --config=/etc/otel-collector-config.yaml
      - --manager-config=/etc/manager-config.yaml
@@ -231,7 +233,7 @@ services:
      - signoz
  schema-migrator:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.0
+    image: signoz/signoz-schema-migrator:v0.129.4
    deploy:
      restart_policy:
        condition: on-failure
--- a/deploy/docker-swarm/docker-compose.yaml
+++ b/deploy/docker-swarm/docker-compose.yaml
@@ -11,7 +11,7 @@ x-common: &common
      max-file: "3"
 x-clickhouse-defaults: &clickhouse-defaults
  !!merge <<: *common
-  image: clickhouse/clickhouse-server:24.1.2-alpine
+  image: clickhouse/clickhouse-server:25.5.6
  tty: true
  deploy:
    labels:
@@ -36,6 +36,8 @@ x-clickhouse-defaults: &clickhouse-defaults
    nofile:
      soft: 262144
      hard: 262144
+  environment:
+    - CLICKHOUSE_SKIP_USER_SETUP=1
 x-zookeeper-defaults: &zookeeper-defaults
  !!merge <<: *common
  image: signoz/zookeeper:3.7.1
@@ -60,7 +62,7 @@ x-db-depend: &db-depend
 services:
  init-clickhouse:
    !!merge <<: *common
-    image: clickhouse/clickhouse-server:24.1.2-alpine
+    image: clickhouse/clickhouse-server:25.5.6
    command:
      - bash
      - -c
@@ -115,7 +117,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:v0.92.1
+    image: signoz/signoz:v0.94.1
    command:
      - --config=/root/config/prometheus.yml
    ports:
@@ -148,7 +150,7 @@ services:
      retries: 3
  otel-collector:
    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.0
+    image: signoz/signoz-otel-collector:v0.129.4
    command:
      - --config=/etc/otel-collector-config.yaml
      - --manager-config=/etc/manager-config.yaml
@@ -174,7 +176,7 @@ services:
      - signoz
  schema-migrator:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.0
+    image: signoz/signoz-schema-migrator:v0.129.4
    deploy:
      restart_policy:
        condition: on-failure
--- a/deploy/docker/docker-compose.ha.yaml
+++ b/deploy/docker/docker-compose.ha.yaml
@@ -10,7 +10,7 @@ x-common: &common
 x-clickhouse-defaults: &clickhouse-defaults
  !!merge <<: *common
  # addding non LTS version due to this fix https://github.com/ClickHouse/ClickHouse/commit/32caf8716352f45c1b617274c7508c86b7d1afab
-  image: clickhouse/clickhouse-server:24.1.2-alpine
+  image: clickhouse/clickhouse-server:25.5.6
  tty: true
  labels:
    signoz.io/scrape: "true"
@@ -40,6 +40,8 @@ x-clickhouse-defaults: &clickhouse-defaults
    nofile:
      soft: 262144
      hard: 262144
+  environment:
+    - CLICKHOUSE_SKIP_USER_SETUP=1
 x-zookeeper-defaults: &zookeeper-defaults
  !!merge <<: *common
  image: signoz/zookeeper:3.7.1
@@ -65,7 +67,7 @@ x-db-depend: &db-depend
 services:
  init-clickhouse:
    !!merge <<: *common
-    image: clickhouse/clickhouse-server:24.1.2-alpine
+    image: clickhouse/clickhouse-server:25.5.6
    container_name: signoz-init-clickhouse
    command:
      - bash
@@ -177,7 +179,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.92.1}
+    image: signoz/signoz:${VERSION:-v0.94.1}
    container_name: signoz
    command:
      - --config=/root/config/prometheus.yml
@@ -211,7 +213,7 @@ services:
  # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
  otel-collector:
    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.0}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.4}
    container_name: signoz-otel-collector
    command:
      - --config=/etc/otel-collector-config.yaml
@@ -237,7 +239,7 @@ services:
        condition: service_healthy
  schema-migrator-sync:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.4}
    container_name: schema-migrator-sync
    command:
      - sync
@@ -248,7 +250,7 @@ services:
        condition: service_healthy
  schema-migrator-async:
    !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.4}
    container_name: schema-migrator-async
    command:
      - async
--- a/deploy/docker/docker-compose.yaml
+++ b/deploy/docker/docker-compose.yaml
@@ -9,8 +9,7 @@ x-common: &common
      max-file: "3"
 x-clickhouse-defaults: &clickhouse-defaults
  !!merge <<: *common
-  # addding non LTS version due to this fix https://github.com/ClickHouse/ClickHouse/commit/32caf8716352f45c1b617274c7508c86b7d1afab
-  image: clickhouse/clickhouse-server:24.1.2-alpine
+  image: clickhouse/clickhouse-server:25.5.6
  tty: true
  labels:
    signoz.io/scrape: "true"
@@ -36,6 +35,8 @@ x-clickhouse-defaults: &clickhouse-defaults
    nofile:
      soft: 262144
      hard: 262144
+  environment:
+    - CLICKHOUSE_SKIP_USER_SETUP=1
 x-zookeeper-defaults: &zookeeper-defaults
  !!merge <<: *common
  image: signoz/zookeeper:3.7.1
@@ -61,7 +62,7 @@ x-db-depend: &db-depend
 services:
  init-clickhouse:
    !!merge <<: *common
-    image: clickhouse/clickhouse-server:24.1.2-alpine
+    image: clickhouse/clickhouse-server:25.5.6
    container_name: signoz-init-clickhouse
    command:
      - bash
@@ -110,7 +111,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.92.1}
+    image: signoz/signoz:${VERSION:-v0.94.1}
    container_name: signoz
    command:
      - --config=/root/config/prometheus.yml
@@ -143,7 +144,7 @@ services:
      retries: 3
  otel-collector:
    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.0}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.4}
    container_name: signoz-otel-collector
    command:
      - --config=/etc/otel-collector-config.yaml
@@ -165,7 +166,7 @@ services:
        condition: service_healthy
  schema-migrator-sync:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.4}
    container_name: schema-migrator-sync
    command:
      - sync
@@ -177,7 +178,7 @@ services:
    restart: on-failure
  schema-migrator-async:
    !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.4}
    container_name: schema-migrator-async
    command:
      - async
--- a/docs/contributing/go/integration.md
+++ b/docs/contributing/go/integration.md
@@ -0,0 +1,213 @@
+# Integration Tests
+
+SigNoz uses integration tests to verify that different components work together correctly in a real environment. These tests run against actual services (ClickHouse, PostgreSQL, etc.) to ensure end-to-end functionality.
+
+## How to set up the integration test environment?
+
+### Prerequisites
+
+Before running integration tests, ensure you have the following installed:
+
+- Python 3.13+
+- Poetry (for dependency management)
+- Docker (for containerized services)
+
+### Initial Setup
+
+1. Navigate to the integration tests directory:
+```bash
+cd tests/integration
+```
+
+2. Install dependencies using Poetry:
+```bash
+poetry install --no-root
+```
+
+### Starting the Test Environment
+
+To spin up all the containers necessary for writing integration tests and keep them running:
+
+```bash
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/bootstrap/setup.py::test_setup
+```
+
+This command will:
+- Start all required services (ClickHouse, PostgreSQL, Zookeeper, etc.)
+- Keep containers running due to the `--reuse` flag
+- Verify that the setup is working correctly
+
+### Stopping the Test Environment
+
+When you're done writing integration tests, clean up the environment:
+
+```bash
+poetry run pytest --basetemp=./tmp/ -vv --teardown -s src/bootstrap/setup.py::test_teardown
+```
+
+This will destroy the running integration test setup and clean up resources.
+
+## Understanding the Integration Test Framework
+
+Python and pytest form the foundation of the integration testing framework. Testcontainers are used to spin up disposable integration environments. Wiremock is used to spin up **test doubles** of other services.
+
+- **Why Python/pytest?** It's expressive, low-boilerplate, and has powerful fixture capabilities that make integration testing straightforward. Extensive libraries for HTTP requests, JSON handling, and data analysis (numpy) make it easier to test APIs and verify data
+- **Why testcontainers?** They let us spin up isolated dependencies that match our production environment without complex setup.
+- **Why wiremock?** Well maintained, documented and extensible.
+
+```
+.
+├── conftest.py
+├── fixtures
+│   ├── __init__.py
+│   ├── auth.py
+│   ├── clickhouse.py
+│   ├── fs.py
+│   ├── http.py
+│   ├── migrator.py
+│   ├── network.py
+│   ├── postgres.py
+│   ├── signoz.py
+│   ├── sql.py
+│   ├── sqlite.py
+│   ├── types.py
+│   └── zookeeper.py
+├── poetry.lock
+├── pyproject.toml
+└── src
+    └── bootstrap
+        ├── __init__.py
+        ├── a_database.py
+        ├── b_register.py
+        └── c_license.py
+```
+
+Each test suite follows some important principles:
+
+1. **Organization**: Test suites live under `src/` in self-contained packages. Fixtures (a pytest concept) live inside `fixtures/`.
+2. **Execution Order**: Files are prefixed with `a_`, `b_`, `c_` to ensure sequential execution.
+3. **Time Constraints**: Each suite should complete in under 10 minutes (setup takes ~4 mins).
+
+### Test Suite Design
+
+Test suites should target functional domains or subsystems within SigNoz. When designing a test suite, consider these principles:
+
+- **Functional Cohesion**: Group tests around a specific capability or service boundary
+- **Data Flow**: Follow the path of data through related components
+- **Change Patterns**: Components frequently modified together should be tested together
+
+The exact boundaries for modules are intentionally flexible, allowing teams to define logical groupings based on their specific context and knowledge of the system.
+
+Eg: The **bootstrap** integration test suite validates core system functionality:
+
+- Database initialization
+- Version check
+
+Other test suites can be **pipelines, auth, querier.**
+
+## How to write an integration test?
+
+Now start writing an integration test. Create a new file `src/bootstrap/e_version.py` and paste the following:
+
+```python
+import requests
+
+from fixtures import types
+from fixtures.logger import setup_logger
+
+logger = setup_logger(__name__)
+
+def test_version(signoz: types.SigNoz) -> None:
+    response = requests.get(signoz.self.host_config.get("/api/v1/version"), timeout=2)
+    logger.info(response)
+```
+
+We have written a simple test which calls the `version` endpoint of the container in step 1. In **order to just run this function, run the following command:**
+
+```bash
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/bootstrap/e_version.py::test_version
+```
+
+> Note: The `--reuse` flag is used to reuse the environment if it is already running. Always use this flag when writing and running integration tests. If you don't use this flag, the environment will be destroyed and recreated every time you run the test.
+
+Here's another example of how to write a more comprehensive integration test:
+
+```python
+from http import HTTPStatus
+import requests
+from fixtures import types
+from fixtures.logger import setup_logger
+
+logger = setup_logger(__name__)
+
+def test_user_registration(signoz: types.SigNoz) -> None:
+    """Test user registration functionality."""
+    response = requests.post(
+        signoz.self.host_configs["8080"].get("/api/v1/register"),
+        json={
+            "name": "testuser",
+            "orgId": "",
+            "orgName": "test.org",
+            "email": "test@example.com",
+            "password": "password123Z$",
+        },
+        timeout=2,
+    )
+    
+    assert response.status_code == HTTPStatus.OK
+    assert response.json()["setupCompleted"] is True
+```
+
+## How to run integration tests?
+
+### Running All Tests
+
+```bash
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/
+```
+
+### Running Specific Test Categories
+
+```bash
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/<suite>
+
+# Run querier tests
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/querier/
+# Run auth tests
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/auth/
+```
+
+### Running Individual Tests
+
+```bash
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/<suite>/<file>.py::test_name
+
+# Run test_register in file a_register.py in auth suite
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/auth/a_register.py::test_register
+```
+
+## How to configure different options for integration tests?
+
+Tests can be configured using pytest options:
+
+- `--sqlstore-provider` - Choose database provider (default: postgres)
+- `--postgres-version` - PostgreSQL version (default: 15)
+- `--clickhouse-version` - ClickHouse version (default: 24.1.2-alpine)
+- `--zookeeper-version` - Zookeeper version (default: 3.7.1)
+
+Example:
+```bash
+poetry 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
+- **Use the `--teardown` flag** when cleaning up to avoid resource leaks
+- **Follow the naming convention** with alphabetical prefixes for test execution order
+- **Use proper timeouts** in HTTP requests to avoid hanging tests
+- **Clean up test data** between tests to avoid interference
+- **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
--- a/ee/query-service/app/api/cloudIntegrations.go
+++ b/ee/query-service/app/api/cloudIntegrations.go
@@ -13,11 +13,11 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/constants"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/modules/user"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/google/uuid"
 	"github.com/gorilla/mux"
 	"go.uber.org/zap"
 )
@@ -192,14 +192,14 @@ func (ah *APIHandler) getOrCreateCloudIntegrationUser(
 		))
 	}

-	password, err := types.NewFactorPassword(uuid.NewString())
+	password := types.MustGenerateFactorPassword(newUser.ID.StringValue())

-	integrationUser, err := ah.Signoz.Modules.User.CreateUserWithPassword(ctx, newUser, password)
+	err = ah.Signoz.Modules.User.CreateUser(ctx, newUser, user.WithFactorPassword(password))
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration user: %w", err))
 	}

-	return integrationUser, nil
+	return newUser, nil
 }

 func getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licenseKey string) (
--- a/ee/query-service/app/server.go
+++ b/ee/query-service/app/server.go
@@ -44,19 +44,6 @@ import (
 	"go.uber.org/zap"
 )

-type ServerOptions struct {
-	Config                     signoz.Config
-	SigNoz                     *signoz.SigNoz
-	HTTPHostPort               string
-	PrivateHostPort            string
-	PreferSpanMetrics          bool
-	FluxInterval               string
-	FluxIntervalForTraceDetail string
-	Cluster                    string
-	GatewayUrl                 string
-	Jwt                        *authtypes.JWT
-}
-
 // Server runs HTTP, Mux and a grpc server
 type Server struct {
 	config      signoz.Config
@@ -69,11 +56,6 @@ type Server struct {
 	httpServer   *http.Server
 	httpHostPort string

-	// private http
-	privateConn     net.Listener
-	privateHTTP     *http.Server
-	privateHostPort string
-
 	opampServer *opamp.Server

 	// Usage manager
@@ -183,7 +165,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz, jwt *authtypes.JWT)
 		jwt:                jwt,
 		ruleManager:        rm,
 		httpHostPort:       baseconst.HTTPHostPort,
-		privateHostPort:    baseconst.PrivateHostPort,
 		unavailableChannel: make(chan healthcheck.Status),
 		usageManager:       usageManager,
 	}
@@ -196,13 +177,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz, jwt *authtypes.JWT)

 	s.httpServer = httpServer

-	privateServer, err := s.createPrivateServer(apiHandler)
-	if err != nil {
-		return nil, err
-	}
-
-	s.privateHTTP = privateServer
-
 	s.opampServer = opamp.InitializeServer(
 		&opAmpModel.AllAgents, agentConfMgr, signoz.Instrumentation,
 	)
@@ -215,36 +189,6 @@ func (s Server) HealthCheckStatus() chan healthcheck.Status {
 	return s.unavailableChannel
 }

-func (s *Server) createPrivateServer(apiHandler *api.APIHandler) (*http.Server, error) {
-	r := baseapp.NewRouter()
-
-	r.Use(middleware.NewAuth(s.jwt, []string{"Authorization", "Sec-WebSocket-Protocol"}, s.signoz.Sharder, s.signoz.Instrumentation.Logger()).Wrap)
-	r.Use(middleware.NewAPIKey(s.signoz.SQLStore, []string{"SIGNOZ-API-KEY"}, s.signoz.Instrumentation.Logger(), s.signoz.Sharder).Wrap)
-	r.Use(middleware.NewTimeout(s.signoz.Instrumentation.Logger(),
-		s.config.APIServer.Timeout.ExcludedRoutes,
-		s.config.APIServer.Timeout.Default,
-		s.config.APIServer.Timeout.Max,
-	).Wrap)
-	r.Use(middleware.NewLogging(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes).Wrap)
-
-	apiHandler.RegisterPrivateRoutes(r)
-
-	c := cors.New(cors.Options{
-		//todo(amol): find out a way to add exact domain or
-		// ip here for alert manager
-		AllowedOrigins: []string{"*"},
-		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH"},
-		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "SIGNOZ-API-KEY", "X-SIGNOZ-QUERY-ID", "Sec-WebSocket-Protocol"},
-	})
-
-	handler := c.Handler(r)
-	handler = handlers.CompressHandler(handler)
-
-	return &http.Server{
-		Handler: handler,
-	}, nil
-}
-
 func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*http.Server, error) {
 	r := baseapp.NewRouter()
 	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger())
@@ -257,6 +201,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		s.config.APIServer.Timeout.Max,
 	).Wrap)
 	r.Use(middleware.NewLogging(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes).Wrap)
+	r.Use(middleware.NewComment().Wrap)

 	apiHandler.RegisterRoutes(r, am)
 	apiHandler.RegisterLogsRoutes(r, am)
@@ -309,19 +254,6 @@ func (s *Server) initListeners() error {

 	zap.L().Info(fmt.Sprintf("Query server started listening on %s...", s.httpHostPort))

-	// listen on private port to support internal services
-	privateHostPort := s.privateHostPort
-
-	if privateHostPort == "" {
-		return fmt.Errorf("baseconst.PrivateHostPort is required")
-	}
-
-	s.privateConn, err = net.Listen("tcp", privateHostPort)
-	if err != nil {
-		return err
-	}
-	zap.L().Info(fmt.Sprintf("Query server started listening on private port %s...", s.privateHostPort))
-
 	return nil
 }

@@ -360,26 +292,6 @@ func (s *Server) Start(ctx context.Context) error {
 		}
 	}()

-	var privatePort int
-	if port, err := utils.GetPort(s.privateConn.Addr()); err == nil {
-		privatePort = port
-	}
-
-	go func() {
-		zap.L().Info("Starting Private HTTP server", zap.Int("port", privatePort), zap.String("addr", s.privateHostPort))
-
-		switch err := s.privateHTTP.Serve(s.privateConn); err {
-		case nil, http.ErrServerClosed, cmux.ErrListenerClosed:
-			// normal exit, nothing to do
-			zap.L().Info("private http server closed")
-		default:
-			zap.L().Error("Could not start private HTTP server", zap.Error(err))
-		}
-
-		s.unavailableChannel <- healthcheck.Unavailable
-
-	}()
-
 	go func() {
 		zap.L().Info("Starting OpAmp Websocket server", zap.String("addr", baseconst.OpAmpWsEndpoint))
 		err := s.opampServer.Start(baseconst.OpAmpWsEndpoint)
@@ -399,12 +311,6 @@ func (s *Server) Stop(ctx context.Context) error {
 		}
 	}

-	if s.privateHTTP != nil {
-		if err := s.privateHTTP.Shutdown(ctx); err != nil {
-			return err
-		}
-	}
-
 	s.opampServer.Stop()

 	if s.ruleManager != nil {
--- a/ee/query-service/constants/constants.go
+++ b/ee/query-service/constants/constants.go
@@ -40,7 +40,7 @@ var IsDotMetricsEnabled = false
 var IsPreferSpanMetrics = false

 func init() {
-	if GetOrDefaultEnv(DotMetricsEnabled, "false") == "true" {
+	if GetOrDefaultEnv(DotMetricsEnabled, "true") == "true" {
 		IsDotMetricsEnabled = true
 	}

--- a/ee/query-service/model/errors.go
+++ b/ee/query-service/model/errors.go
@@ -1,7 +1,7 @@
 package model

 import (
-	"fmt"
+	"errors"

 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 )
@@ -57,7 +57,7 @@ func Unauthorized(err error) *ApiError {
 func BadRequestStr(s string) *ApiError {
 	return &ApiError{
 		Typ: basemodel.ErrorBadData,
-		Err: fmt.Errorf(s),
+		Err: errors.New(s),
 	}
 }

@@ -73,7 +73,7 @@ func InternalError(err error) *ApiError {
 func InternalErrorStr(s string) *ApiError {
 	return &ApiError{
 		Typ: basemodel.ErrorInternal,
-		Err: fmt.Errorf(s),
+		Err: errors.New(s),
 	}
 }

--- a/ee/query-service/rules/anomaly.go
+++ b/ee/query-service/rules/anomaly.go
@@ -35,7 +35,6 @@ import (
 	anomalyV2 "github.com/SigNoz/signoz/ee/anomaly"

 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	yaml "gopkg.in/yaml.v2"
 )

 const (
@@ -167,16 +166,9 @@ func (r *AnomalyRule) prepareQueryRange(ctx context.Context, ts time.Time) (*v3.
 		ctx, "prepare query range request v4", "ts", ts.UnixMilli(), "eval_window", r.EvalWindow().Milliseconds(), "eval_delay", r.EvalDelay().Milliseconds(),
 	)

-	start := ts.Add(-time.Duration(r.EvalWindow())).UnixMilli()
-	end := ts.UnixMilli()
-
-	if r.EvalDelay() > 0 {
-		start = start - int64(r.EvalDelay().Milliseconds())
-		end = end - int64(r.EvalDelay().Milliseconds())
-	}
-	// round to minute otherwise we could potentially miss data
-	start = start - (start % (60 * 1000))
-	end = end - (end % (60 * 1000))
+	st, en := r.Timestamps(ts)
+	start := st.UnixMilli()
+	end := en.UnixMilli()

 	compositeQuery := r.Condition().CompositeQuery

@@ -253,10 +245,17 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 	r.logger.InfoContext(ctx, "anomaly scores", "scores", string(scoresJSON))

 	for _, series := range queryResult.AnomalyScores {
-		smpl, shouldAlert := r.ShouldAlert(*series)
-		if shouldAlert {
-			resultVector = append(resultVector, smpl)
+		if r.Condition() != nil && r.Condition().RequireMinPoints {
+			if len(series.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.ShouldAlert(*series)
+		if err != nil {
+			return nil, err
+		}
+		resultVector = append(resultVector, results...)
 	}
 	return resultVector, nil
 }
@@ -296,10 +295,17 @@ func (r *AnomalyRule) buildAndRunQueryV5(ctx context.Context, orgID valuer.UUID,
 	r.logger.InfoContext(ctx, "anomaly scores", "scores", string(scoresJSON))

 	for _, series := range queryResult.AnomalyScores {
-		smpl, shouldAlert := r.ShouldAlert(*series)
-		if shouldAlert {
-			resultVector = append(resultVector, smpl)
+		if r.Condition().RequireMinPoints {
+			if len(series.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.ShouldAlert(*series)
+		if err != nil {
+			return nil, err
+		}
+		resultVector = append(resultVector, results...)
 	}
 	return resultVector, nil
 }
@@ -499,7 +505,7 @@ func (r *AnomalyRule) String() string {
 		PreferredChannels: r.PreferredChannels(),
 	}

-	byt, err := yaml.Marshal(ar)
+	byt, err := json.Marshal(ar)
 	if err != nil {
 		return fmt.Sprintf("error marshaling alerting rule: %s", err.Error())
 	}
--- a/ee/query-service/rules/manager.go
+++ b/ee/query-service/rules/manager.go
@@ -3,8 +3,10 @@ package rules
 import (
 	"context"
 	"fmt"
+
 	"time"

+	"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"
@@ -20,6 +22,10 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 	var task baserules.Task

 	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)
+	}
 	if opts.Rule.RuleType == ruletypes.RuleTypeThreshold {
 		// create a threshold rule
 		tr, err := baserules.NewThresholdRule(
@@ -40,7 +46,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, tr)

 		// create ch rule task for evalution
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)

 	} else if opts.Rule.RuleType == ruletypes.RuleTypeProm {

@@ -62,7 +68,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, pr)

 		// create promql rule task for evalution
-		task = newTask(baserules.TaskTypeProm, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeProm, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)

 	} else if opts.Rule.RuleType == ruletypes.RuleTypeAnomaly {
 		// create anomaly rule
@@ -84,7 +90,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, ar)

 		// create anomaly rule task for evalution
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)

 	} else {
 		return nil, fmt.Errorf("unsupported rule type %s. Supported types: %s, %s", opts.Rule.RuleType, ruletypes.RuleTypeProm, ruletypes.RuleTypeThreshold)
--- a/frontend/.eslintignore
+++ b/frontend/.eslintignore
@@ -1,4 +1,5 @@
 node_modules
 build
 *.typegen.ts
-i18-generate-hash.js
+i18-generate-hash.js
+src/parser/TraceOperatorParser/**
--- a/frontend/.prettierignore
+++ b/frontend/.prettierignore
@@ -10,4 +10,6 @@ public/
 **/*.json

 # Ignore all files in parser folder:
-src/parser/**
+src/parser/**
+
+src/TraceOperator/parser/**
--- a/frontend/jest.config.ts
+++ b/frontend/jest.config.ts
@@ -16,6 +16,7 @@ const config: Config.InitialOptions = {
 		'ts-jest': {
 			useESM: true,
 			isolatedModules: true,
+			tsconfig: '<rootDir>/tsconfig.jest.json',
 		},
 	},
 	testMatch: ['<rootDir>/src/**/*?(*.)(test).(ts|js)?(x)'],
@@ -25,7 +26,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -43,11 +43,19 @@
 		"@radix-ui/react-tooltip": "1.0.7",
 		"@sentry/react": "8.41.0",
 		"@sentry/webpack-plugin": "2.22.6",
+		"@signozhq/badge": "0.0.2",
+		"@signozhq/calendar": "0.0.0",
+		"@signozhq/callout": "0.0.2",
 		"@signozhq/design-tokens": "1.1.4",
+		"@signozhq/input": "0.0.2",
+		"@signozhq/popover": "0.0.0",
+		"@signozhq/sonner": "0.1.0",
+		"@signozhq/table": "0.3.7",
+		"@signozhq/tooltip": "0.0.2",
 		"@tanstack/react-table": "8.20.6",
 		"@tanstack/react-virtual": "3.11.2",
-		"@uiw/codemirror-theme-github": "4.24.1",
 		"@uiw/codemirror-theme-copilot": "4.23.11",
+		"@uiw/codemirror-theme-github": "4.24.1",
 		"@uiw/react-codemirror": "4.23.10",
 		"@uiw/react-md-editor": "3.23.5",
 		"@visx/group": "3.3.0",
@@ -92,6 +100,7 @@
 		"i18next-http-backend": "^1.3.2",
 		"jest": "^27.5.1",
 		"js-base64": "^3.7.2",
+		"kbar": "0.1.0-beta.48",
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
@@ -266,6 +275,7 @@
 		"serialize-javascript": "6.0.2",
 		"prismjs": "1.30.0",
 		"got": "11.8.5",
-		"form-data": "4.0.4"
+		"form-data": "4.0.4",
+		"brace-expansion": "^2.0.2"
 	}
 }
--- a/frontend/src/AppRoutes/index.tsx
+++ b/frontend/src/AppRoutes/index.tsx
@@ -4,6 +4,7 @@ import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import AppLoading from 'components/AppLoading/AppLoading';
+import KBarCommandPalette from 'components/KBarCommandPalette/KBarCommandPalette';
 import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import UserpilotRouteTracker from 'components/UserpilotRouteTracker/UserpilotRouteTracker';
@@ -25,6 +26,7 @@ import { useAppContext } from 'providers/App/App';
 import { IUser } from 'providers/App/types';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
+import { KBarCommandPaletteProvider } from 'providers/KBarCommandPaletteProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useCallback, useEffect, useState } from 'react';
 import { Route, Router, Switch } from 'react-router-dom';
@@ -368,39 +370,42 @@ function App(): JSX.Element {
 			<ConfigProvider theme={themeConfig}>
 				<Router history={history}>
 					<CompatRouter>
-						<UserpilotRouteTracker />
-						<NotificationProvider>
-							<ErrorModalProvider>
-								<PrivateRoute>
-									<ResourceProvider>
-										<QueryBuilderProvider>
-											<DashboardProvider>
-												<KeyboardHotkeysProvider>
-													<AlertRuleProvider>
-														<AppLayout>
-															<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-																<Switch>
-																	{routes.map(({ path, component, exact }) => (
-																		<Route
-																			key={`${path}`}
-																			exact={exact}
-																			path={path}
-																			component={component}
-																		/>
-																	))}
-																	<Route exact path="/" component={Home} />
-																	<Route path="*" component={NotFound} />
-																</Switch>
-															</Suspense>
-														</AppLayout>
-													</AlertRuleProvider>
-												</KeyboardHotkeysProvider>
-											</DashboardProvider>
-										</QueryBuilderProvider>
-									</ResourceProvider>
-								</PrivateRoute>
-							</ErrorModalProvider>
-						</NotificationProvider>
+						<KBarCommandPaletteProvider>
+							<UserpilotRouteTracker />
+							<KBarCommandPalette />
+							<NotificationProvider>
+								<ErrorModalProvider>
+									<PrivateRoute>
+										<ResourceProvider>
+											<QueryBuilderProvider>
+												<DashboardProvider>
+													<KeyboardHotkeysProvider>
+														<AlertRuleProvider>
+															<AppLayout>
+																<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+																	<Switch>
+																		{routes.map(({ path, component, exact }) => (
+																			<Route
+																				key={`${path}`}
+																				exact={exact}
+																				path={path}
+																				component={component}
+																			/>
+																		))}
+																		<Route exact path="/" component={Home} />
+																		<Route path="*" component={NotFound} />
+																	</Switch>
+																</Suspense>
+															</AppLayout>
+														</AlertRuleProvider>
+													</KeyboardHotkeysProvider>
+												</DashboardProvider>
+											</QueryBuilderProvider>
+										</ResourceProvider>
+									</PrivateRoute>
+								</ErrorModalProvider>
+							</NotificationProvider>
+						</KBarCommandPaletteProvider>
 					</CompatRouter>
 				</Router>
 			</ConfigProvider>
--- a/frontend/src/api/dynamicVariables/tests/getFieldKeys.test.ts
+++ b/frontend/src/api/dynamicVariables/tests/getFieldKeys.test.ts
@@ -0,0 +1,115 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { ApiBaseInstance } from 'api';
+
+import { getFieldKeys } from '../getFieldKeys';
+
+// Mock the API instance
+jest.mock('api', () => ({
+	ApiBaseInstance: {
+		get: jest.fn(),
+	},
+}));
+
+describe('getFieldKeys API', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const mockSuccessResponse = {
+		status: 200,
+		data: {
+			status: 'success',
+			data: {
+				keys: {
+					'service.name': [],
+					'http.status_code': [],
+				},
+				complete: true,
+			},
+		},
+	};
+
+	it('should call API with correct parameters when no args provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+
+		// Call function with no parameters
+		await getFieldKeys();
+
+		// Verify API was called correctly with empty params object
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: {},
+		});
+	});
+
+	it('should call API with signal parameter when provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+
+		// Call function with signal parameter
+		await getFieldKeys('traces');
+
+		// Verify API was called with signal parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: { signal: 'traces' },
+		});
+	});
+
+	it('should call API with name parameter when provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					keys: { service: [] },
+					complete: false,
+				},
+			},
+		});
+
+		// Call function with name parameter
+		await getFieldKeys(undefined, 'service');
+
+		// Verify API was called with name parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: { name: 'service' },
+		});
+	});
+
+	it('should call API with both signal and name when provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					keys: { service: [] },
+					complete: false,
+				},
+			},
+		});
+
+		// Call function with both parameters
+		await getFieldKeys('logs', 'service');
+
+		// Verify API was called with both parameters
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: { signal: 'logs', name: 'service' },
+		});
+	});
+
+	it('should return properly formatted response', async () => {
+		// Mock API to return our response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+
+		// Call the function
+		const result = await getFieldKeys('traces');
+
+		// Verify the returned structure matches SuccessResponseV2 format
+		expect(result).toEqual({
+			httpStatusCode: 200,
+			data: mockSuccessResponse.data.data,
+		});
+	});
+});
--- a/frontend/src/api/dynamicVariables/tests/getFieldValues.test.ts
+++ b/frontend/src/api/dynamicVariables/tests/getFieldValues.test.ts
@@ -0,0 +1,214 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { ApiBaseInstance } from 'api';
+
+import { getFieldValues } from '../getFieldValues';
+
+// Mock the API instance
+jest.mock('api', () => ({
+	ApiBaseInstance: {
+		get: jest.fn(),
+	},
+}));
+
+describe('getFieldValues API', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should call the API with correct parameters (no options)', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function without parameters
+		await getFieldValues();
+
+		// Verify API was called correctly with empty params
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: {},
+		});
+	});
+
+	it('should call the API with signal parameter', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function with signal parameter
+		await getFieldValues('traces');
+
+		// Verify API was called with signal parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: { signal: 'traces' },
+		});
+	});
+
+	it('should call the API with name parameter', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function with name parameter
+		await getFieldValues(undefined, 'service.name');
+
+		// Verify API was called with name parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: { name: 'service.name' },
+		});
+	});
+
+	it('should call the API with value parameter', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend'],
+					},
+					complete: false,
+				},
+			},
+		});
+
+		// Call function with value parameter
+		await getFieldValues(undefined, 'service.name', 'front');
+
+		// Verify API was called with value parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: { name: 'service.name', searchText: 'front' },
+		});
+	});
+
+	it('should call the API with time range parameters', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function with time range parameters
+		const startUnixMilli = 1625097600000000; // Note: nanoseconds
+		const endUnixMilli = 1625184000000000;
+		await getFieldValues(
+			'logs',
+			'service.name',
+			undefined,
+			startUnixMilli,
+			endUnixMilli,
+		);
+
+		// Verify API was called with time range parameters (converted to milliseconds)
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: {
+				signal: 'logs',
+				name: 'service.name',
+				startUnixMilli: '1625097600', // Should be converted to seconds (divided by 1000000)
+				endUnixMilli: '1625184000', // Should be converted to seconds (divided by 1000000)
+			},
+		});
+	});
+
+	it('should normalize the response values', async () => {
+		// Mock API response with multiple value types
+		const mockResponse = {
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+						numberValues: [200, 404],
+						boolValues: [true, false],
+					},
+					complete: true,
+				},
+			},
+		};
+
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockResponse);
+
+		// Call the function
+		const result = await getFieldValues('traces', 'mixed.values');
+
+		// Verify the response has normalized values array
+		expect(result.data?.normalizedValues).toContain('frontend');
+		expect(result.data?.normalizedValues).toContain('backend');
+		expect(result.data?.normalizedValues).toContain('200');
+		expect(result.data?.normalizedValues).toContain('404');
+		expect(result.data?.normalizedValues).toContain('true');
+		expect(result.data?.normalizedValues).toContain('false');
+		expect(result.data?.normalizedValues?.length).toBe(6);
+	});
+
+	it('should return a properly formatted success response', async () => {
+		// Create mock response
+		const mockApiResponse = {
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		};
+
+		// Mock API to return our response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockApiResponse);
+
+		// Call the function
+		const result = await getFieldValues('traces', 'service.name');
+
+		// Verify the returned structure matches SuccessResponseV2 format
+		expect(result).toEqual({
+			httpStatusCode: 200,
+			data: expect.objectContaining({
+				values: expect.any(Object),
+				normalizedValues: expect.any(Array),
+				complete: true,
+			}),
+		});
+	});
+});
--- a/frontend/src/api/dynamicVariables/getFieldKeys.ts
+++ b/frontend/src/api/dynamicVariables/getFieldKeys.ts
@@ -1,5 +1,7 @@
 import { ApiBaseInstance } from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';

 /**
@@ -10,25 +12,27 @@ import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
 export const getFieldKeys = async (
 	signal?: 'traces' | 'logs' | 'metrics',
 	name?: string,
-): Promise<SuccessResponse<FieldKeyResponse> | ErrorResponse> => {
+): Promise<SuccessResponseV2<FieldKeyResponse>> => {
 	const params: Record<string, string> = {};

 	if (signal) {
-		params.signal = signal;
+		params.signal = encodeURIComponent(signal);
 	}

 	if (name) {
-		params.name = name;
+		params.name = encodeURIComponent(name);
 	}

-	const response = await ApiBaseInstance.get('/fields/keys', { params });
+	try {
+		const response = await ApiBaseInstance.get('/fields/keys', { params });

-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
 };

 export default getFieldKeys;
--- a/frontend/src/api/dynamicVariables/getFieldValues.ts
+++ b/frontend/src/api/dynamicVariables/getFieldValues.ts
@@ -1,5 +1,8 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 import { ApiBaseInstance } from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';

 /**
@@ -7,26 +10,28 @@ import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
 * @param signal Type of signal (traces, logs, metrics)
 * @param name Name of the attribute for which values are being fetched
 * @param value Optional search text
+ * @param existingQuery Optional existing query - across all present dynamic variables
 */
 export const getFieldValues = async (
 	signal?: 'traces' | 'logs' | 'metrics',
 	name?: string,
-	value?: string,
+	searchText?: string,
 	startUnixMilli?: number,
 	endUnixMilli?: number,
-): Promise<SuccessResponse<FieldValueResponse> | ErrorResponse> => {
+	existingQuery?: string,
+): Promise<SuccessResponseV2<FieldValueResponse>> => {
 	const params: Record<string, string> = {};

 	if (signal) {
-		params.signal = signal;
+		params.signal = encodeURIComponent(signal);
 	}

 	if (name) {
-		params.name = name;
+		params.name = encodeURIComponent(name);
 	}

-	if (value) {
-		params.value = value;
+	if (searchText) {
+		params.searchText = encodeURIComponent(searchText);
 	}

 	if (startUnixMilli) {
@@ -37,27 +42,46 @@ export const getFieldValues = async (
 		params.endUnixMilli = Math.floor(endUnixMilli / 1000000).toString();
 	}

-	const response = await ApiBaseInstance.get('/fields/values', { params });
-
-	// Normalize values from different types (stringValues, boolValues, etc.)
-	if (response.data?.data?.values) {
-		const allValues: string[] = [];
-		Object.values(response.data.data.values).forEach((valueArray: any) => {
-			if (Array.isArray(valueArray)) {
-				allValues.push(...valueArray.map(String));
-			}
-		});
-
-		// Add a normalized values array to the response
-		response.data.data.normalizedValues = allValues;
+	if (existingQuery) {
+		params.existingQuery = existingQuery;
 	}

-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
+	try {
+		const response = await ApiBaseInstance.get('/fields/values', { params });
+
+		// Normalize values from different types (stringValues, boolValues, etc.)
+		if (response.data?.data?.values) {
+			const allValues: string[] = [];
+			Object.entries(response.data?.data?.values).forEach(
+				([key, valueArray]: [string, any]) => {
+					// Skip RelatedValues as they should be kept separate
+					if (key === 'relatedValues') {
+						return;
+					}
+
+					if (Array.isArray(valueArray)) {
+						allValues.push(...valueArray.map(String));
+					}
+				},
+			);
+
+			// Add a normalized values array to the response
+			response.data.data.normalizedValues = allValues;
+
+			// Add relatedValues to the response as per FieldValueResponse
+			if (response.data?.data?.values?.relatedValues) {
+				response.data.data.relatedValues =
+					response.data?.data?.values?.relatedValues;
+			}
+		}
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
 };

 export default getFieldValues;
--- a/frontend/src/api/settings/getRetentionV2.ts
+++ b/frontend/src/api/settings/getRetentionV2.ts
@@ -0,0 +1,25 @@
+import { ApiV2Instance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps } from 'types/api/settings/getRetention';
+
+// Only works for logs
+const getRetentionV2 = async (): Promise<
+	SuccessResponseV2<PayloadProps<'logs'>>
+> => {
+	try {
+		const response = await ApiV2Instance.get<PayloadProps<'logs'>>(
+			`/settings/ttl`,
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getRetentionV2;
--- a/frontend/src/api/settings/setRetention.ts
+++ b/frontend/src/api/settings/setRetention.ts
@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/settings/setRetention';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadPropsV2, Props } from 'types/api/settings/setRetention';

 const setRetention = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadPropsV2>> => {
 	try {
-		const response = await axios.post<PayloadProps>(
+		const response = await axios.post<PayloadPropsV2>(
 			`/settings/ttl?duration=${props.totalDuration}&type=${props.type}${
 				props.coldStorage
 					? `&coldStorage=${props.coldStorage}&toColdDuration=${props.toColdDuration}`
@@ -17,13 +17,11 @@ const setRetention = async (
 		);

 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };

--- a/frontend/src/api/settings/setRetentionV2.ts
+++ b/frontend/src/api/settings/setRetentionV2.ts
@@ -0,0 +1,32 @@
+import { ApiV2Instance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadPropsV2, PropsV2 } from 'types/api/settings/setRetention';
+
+const setRetentionV2 = async ({
+	type,
+	defaultTTLDays,
+	coldStorageVolume,
+	coldStorageDuration,
+	ttlConditions,
+}: PropsV2): Promise<SuccessResponseV2<PayloadPropsV2>> => {
+	try {
+		const response = await ApiV2Instance.post<PayloadPropsV2>(`/settings/ttl`, {
+			type,
+			defaultTTLDays,
+			coldStorageVolume,
+			coldStorageDuration,
+			ttlConditions,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default setRetentionV2;
--- a/frontend/src/api/v1/login/loginPrecheck.ts
+++ b/frontend/src/api/v1/login/loginPrecheck.ts
@@ -2,7 +2,7 @@ import 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/loginPrecheck';
+import { Props, Signup as PayloadProps } from 'types/api/user/loginPrecheck';

 const loginPrecheck = async (
 	props: Props,
--- a/frontend/src/api/v1/register/signup.ts
+++ b/frontend/src/api/v1/register/signup.ts
@@ -1,25 +1,21 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps } from 'types/api/user/loginPrecheck';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Signup } from 'types/api/user/loginPrecheck';
 import { Props } from 'types/api/user/signup';

-const signup = async (
-	props: Props,
-): Promise<SuccessResponse<null | PayloadProps> | ErrorResponse> => {
+const signup = async (props: Props): Promise<SuccessResponseV2<Signup>> => {
 	try {
-		const response = await axios.post(`/register`, {
+		const response = await axios.post<PayloadProps>(`/register`, {
 			...props,
 		});
 		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data?.data,
+			httpStatusCode: response.status,
+			data: response.data.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };

--- a/frontend/src/api/v5/queryRange/convertV5Response.test.ts
+++ b/frontend/src/api/v5/queryRange/convertV5Response.test.ts
@@ -0,0 +1,284 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { SuccessResponse } from 'types/api';
+import {
+	MetricRangePayloadV5,
+	QueryBuilderFormula,
+	QueryRangeRequestV5,
+	QueryRangeResponseV5,
+	RequestType,
+	ScalarData,
+	TelemetryFieldKey,
+	TimeSeries,
+	TimeSeriesData,
+	TimeSeriesValue,
+} from 'types/api/v5/queryRange';
+
+import { convertV5ResponseToLegacy } from './convertV5Response';
+
+describe('convertV5ResponseToLegacy', () => {
+	function makeBaseSuccess<T>(
+		payload: T,
+		params: QueryRangeRequestV5,
+	): SuccessResponse<T, QueryRangeRequestV5> {
+		return {
+			statusCode: 200,
+			message: 'success',
+			payload,
+			error: null,
+			params,
+		};
+	}
+
+	function makeBaseParams(
+		requestType: RequestType,
+		queries: QueryRangeRequestV5['compositeQuery']['queries'],
+	): QueryRangeRequestV5 {
+		return {
+			schemaVersion: 'v1',
+			start: 1,
+			end: 2,
+			requestType,
+			compositeQuery: { queries },
+			variables: {},
+			formatOptions: { formatTableResultForUI: false, fillGaps: false },
+		};
+	}
+
+	it('converts time_series response into legacy series structure', () => {
+		const timeSeries: TimeSeriesData = {
+			queryName: 'A',
+			aggregations: [
+				{
+					index: 0,
+					alias: '__result_0',
+					meta: {},
+					series: [
+						({
+							labels: [
+								{
+									key: ({ name: 'service.name' } as unknown) as TelemetryFieldKey,
+									value: 'adservice',
+								},
+							],
+							values: [
+								({ timestamp: 1000, value: 10 } as unknown) as TimeSeriesValue,
+								({ timestamp: 2000, value: 12 } as unknown) as TimeSeriesValue,
+							],
+						} as unknown) as TimeSeries,
+					],
+				},
+			],
+		};
+
+		const v5Data: QueryRangeResponseV5 = {
+			type: 'time_series',
+			data: { results: [timeSeries] },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
+		};
+
+		const params = makeBaseParams('time_series', [
+			{
+				type: 'builder_query',
+				spec: {
+					name: 'A',
+					signal: 'traces',
+					stepInterval: 60,
+					disabled: false,
+					aggregations: [{ expression: 'count()' }],
+				},
+			},
+		]);
+
+		const input: SuccessResponse<
+			MetricRangePayloadV5,
+			QueryRangeRequestV5
+		> = makeBaseSuccess({ data: v5Data }, params);
+
+		const legendMap = { A: '{{service.name}}' };
+		const result = convertV5ResponseToLegacy(input, legendMap, false);
+
+		expect(result.payload.data.resultType).toBe('time_series');
+		expect(result.payload.data.result).toHaveLength(1);
+		const q = result.payload.data.result[0];
+		expect(q.queryName).toBe('A');
+		expect(q.legend).toBe('{{service.name}}');
+		expect(q.series?.[0]).toEqual(
+			expect.objectContaining({
+				labels: { 'service.name': 'adservice' },
+				values: [
+					{ timestamp: 1000, value: '10' },
+					{ timestamp: 2000, value: '12' },
+				],
+				metaData: expect.objectContaining({
+					alias: '__result_0',
+					index: 0,
+					queryName: 'A',
+				}),
+			}),
+		);
+	});
+
+	it('converts scalar to legacy table (formatForWeb=false) with names/ids resolved from aggregations', () => {
+		const scalar: ScalarData = {
+			columns: [
+				// group column
+				({
+					name: 'service.name',
+					queryName: 'A',
+					aggregationIndex: 0,
+					columnType: 'group',
+				} as unknown) as ScalarData['columns'][number],
+				// aggregation 0
+				({
+					name: '__result_0',
+					queryName: 'A',
+					aggregationIndex: 0,
+					columnType: 'aggregation',
+				} as unknown) as ScalarData['columns'][number],
+				// aggregation 1
+				({
+					name: '__result_1',
+					queryName: 'A',
+					aggregationIndex: 1,
+					columnType: 'aggregation',
+				} as unknown) as ScalarData['columns'][number],
+				// formula F1
+				({
+					name: '__result',
+					queryName: 'F1',
+					aggregationIndex: 0,
+					columnType: 'aggregation',
+				} as unknown) as ScalarData['columns'][number],
+			],
+			data: [['adservice', 606, 1.452, 151.5]],
+		};
+
+		const v5Data: QueryRangeResponseV5 = {
+			type: 'scalar',
+			data: { results: [scalar] },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
+		};
+
+		const params = makeBaseParams('scalar', [
+			{
+				type: 'builder_query',
+				spec: {
+					name: 'A',
+					signal: 'traces',
+					stepInterval: 60,
+					disabled: false,
+					aggregations: [
+						{ expression: 'count()' },
+						{ expression: 'avg(app.ads.count)', alias: 'avg' },
+					],
+				},
+			},
+			{
+				type: 'builder_formula',
+				spec: ({
+					name: 'F1',
+					expression: 'A * 0.25',
+				} as unknown) as QueryBuilderFormula,
+			},
+		]);
+
+		const input: SuccessResponse<
+			MetricRangePayloadV5,
+			QueryRangeRequestV5
+		> = makeBaseSuccess({ data: v5Data }, params);
+		const legendMap = { A: '{{service.name}}', F1: '' };
+		const result = convertV5ResponseToLegacy(input, legendMap, false);
+
+		expect(result.payload.data.resultType).toBe('scalar');
+		const [tableEntry] = result.payload.data.result;
+		expect(tableEntry.table?.columns).toEqual([
+			{
+				name: 'service.name',
+				queryName: 'A',
+				isValueColumn: false,
+				id: 'service.name',
+			},
+			{ name: 'count()', queryName: 'A', isValueColumn: true, id: 'A.count()' },
+			{
+				name: 'avg',
+				queryName: 'A',
+				isValueColumn: true,
+				id: 'A.avg(app.ads.count)',
+			},
+			{ name: 'F1', queryName: 'F1', isValueColumn: true, id: 'F1' },
+		]);
+		expect(tableEntry.table?.rows?.[0]).toEqual({
+			data: {
+				'service.name': 'adservice',
+				'A.count()': 606,
+				'A.avg(app.ads.count)': 1.452,
+				F1: 151.5,
+			},
+		});
+	});
+
+	it('converts scalar with formatForWeb=true to UI-friendly table', () => {
+		const scalar: ScalarData = {
+			columns: [
+				{
+					name: 'service.name',
+					queryName: 'A',
+					aggregationIndex: 0,
+					columnType: 'group',
+				} as any,
+				{
+					name: '__result_0',
+					queryName: 'A',
+					aggregationIndex: 0,
+					columnType: 'aggregation',
+				} as any,
+			],
+			data: [['adservice', 580]],
+		};
+
+		const v5Data: QueryRangeResponseV5 = {
+			type: 'scalar',
+			data: { results: [scalar] },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
+		};
+
+		const params = makeBaseParams('scalar', [
+			{
+				type: 'builder_query',
+				spec: {
+					name: 'A',
+					signal: 'traces',
+					stepInterval: 60,
+					disabled: false,
+					aggregations: [{ expression: 'count()' }],
+				},
+			},
+		]);
+
+		const input: SuccessResponse<
+			MetricRangePayloadV5,
+			QueryRangeRequestV5
+		> = makeBaseSuccess({ data: v5Data }, params);
+		const legendMap = { A: '{{service.name}}' };
+		const result = convertV5ResponseToLegacy(input, legendMap, true);
+
+		expect(result.payload.data.resultType).toBe('scalar');
+		const [tableEntry] = result.payload.data.result;
+		expect(tableEntry.table?.columns).toEqual([
+			{
+				name: 'service.name',
+				queryName: 'A',
+				isValueColumn: false,
+				id: 'service.name',
+			},
+			// Single aggregation: name resolves to legend, id resolves to queryName
+			{ name: '{{service.name}}', queryName: 'A', isValueColumn: true, id: 'A' },
+		]);
+		expect(tableEntry.table?.rows?.[0]).toEqual({
+			data: {
+				'service.name': 'adservice',
+				A: 580,
+			},
+		});
+	});
+});
--- a/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts
+++ b/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts
@@ -0,0 +1,637 @@
+/* eslint-disable sonarjs/no-duplicate-string, simple-import-sort/imports, @typescript-eslint/indent, no-mixed-spaces-and-tabs */
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	IBuilderFormula,
+	IBuilderQuery,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import {
+	ClickHouseQuery,
+	LogAggregation,
+	LogBuilderQuery,
+	MetricBuilderQuery,
+	PromQuery,
+	QueryBuilderFormula as V5QueryBuilderFormula,
+	QueryEnvelope,
+	QueryRangePayloadV5,
+} from 'types/api/v5/queryRange';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+import { prepareQueryRangePayloadV5 } from './prepareQueryRangePayloadV5';
+
+jest.mock('lib/getStartEndRangeTime', () => ({
+	__esModule: true,
+	default: jest.fn(() => ({ start: '100', end: '200' })),
+}));
+
+describe('prepareQueryRangePayloadV5', () => {
+	const start = 1_710_000_000; // seconds
+	const end = 1_710_000_600; // seconds
+
+	const baseBuilderQuery = (
+		overrides?: Partial<IBuilderQuery>,
+	): IBuilderQuery => ({
+		queryName: 'A',
+		dataSource: DataSource.METRICS,
+		aggregations: [
+			{
+				metricName: 'cpu_usage',
+				temporality: '',
+				timeAggregation: 'sum',
+				spaceAggregation: 'avg',
+				reduceTo: 'avg',
+			},
+		],
+		timeAggregation: 'sum',
+		spaceAggregation: 'avg',
+		temporality: '',
+		functions: [
+			{
+				name: 'timeShift',
+				args: [{ value: '5m' }],
+			},
+		],
+		filter: { expression: '' },
+		filters: { items: [], op: 'AND' },
+		groupBy: [],
+		expression: 'A',
+		disabled: false,
+		having: [],
+		limit: null,
+		stepInterval: 600,
+		orderBy: [],
+		reduceTo: 'avg',
+		legend: 'Legend A',
+		...overrides,
+	});
+
+	const baseFormula = (
+		overrides?: Partial<IBuilderFormula>,
+	): IBuilderFormula => ({
+		expression: 'A + 1',
+		disabled: false,
+		queryName: 'F1',
+		legend: 'Formula Legend',
+		limit: undefined,
+		having: [],
+		stepInterval: undefined,
+		orderBy: [],
+		...overrides,
+	});
+
+	it('builds payload for builder queries with formulas and variables', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q1',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: {
+					queryData: [baseBuilderQuery()],
+					queryFormulas: [baseFormula()],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.TIME_SERIES,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+			variables: { svc: 'api', count: 5, flag: true },
+			fillGaps: true,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: { A: 'Legend A', F1: 'Formula Legend' },
+				queryPayload: expect.objectContaining({
+					compositeQuery: expect.objectContaining({
+						queries: expect.arrayContaining([
+							expect.objectContaining({
+								type: 'builder_query',
+								spec: expect.objectContaining({
+									name: 'A',
+									signal: 'metrics',
+									stepInterval: 600,
+									functions: [{ name: 'timeShift', args: [{ value: '5m' }] }],
+									aggregations: [
+										expect.objectContaining({
+											metricName: 'cpu_usage',
+											timeAggregation: 'sum',
+											spaceAggregation: 'avg',
+											reduceTo: undefined,
+										}),
+									],
+								}),
+							}),
+							expect.objectContaining({
+								type: 'builder_formula',
+								spec: expect.objectContaining({
+									name: 'F1',
+									expression: 'A + 1',
+									legend: 'Formula Legend',
+								}),
+							}),
+						]),
+					}),
+					requestType: 'time_series',
+					formatOptions: expect.objectContaining({
+						formatTableResultForUI: false,
+						fillGaps: true,
+					}),
+					start: start * 1000,
+					end: end * 1000,
+					variables: expect.objectContaining({
+						svc: { value: 'api' },
+						count: { value: 5 },
+						flag: { value: true },
+					}),
+				}),
+			}),
+		);
+
+		// Legend map combines builder and formulas
+		expect(result.legendMap).toEqual({ A: 'Legend A', F1: 'Formula Legend' });
+
+		const payload: QueryRangePayloadV5 = result.queryPayload;
+
+		expect(payload.schemaVersion).toBe('v1');
+		expect(payload.start).toBe(start * 1000);
+		expect(payload.end).toBe(end * 1000);
+		expect(payload.requestType).toBe('time_series');
+		expect(payload.formatOptions?.formatTableResultForUI).toBe(false);
+		expect(payload.formatOptions?.fillGaps).toBe(true);
+
+		// Variables mapped as { key: { value } }
+		expect(payload.variables).toEqual({
+			svc: { value: 'api' },
+			count: { value: 5 },
+			flag: { value: true },
+		});
+
+		// Queries include one builder_query and one builder_formula
+		expect(payload.compositeQuery.queries).toHaveLength(2);
+
+		const builderQuery = payload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_query',
+		) as QueryEnvelope;
+		const builderSpec = builderQuery.spec as MetricBuilderQuery;
+		expect(builderSpec.name).toBe('A');
+		expect(builderSpec.signal).toBe('metrics');
+		expect(builderSpec.aggregations?.[0]).toMatchObject({
+			metricName: 'cpu_usage',
+			timeAggregation: 'sum',
+			spaceAggregation: 'avg',
+		});
+		// reduceTo should not be present for non-scalar panels
+		expect(builderSpec.aggregations?.[0].reduceTo).toBeUndefined();
+		// functions should be preserved/normalized
+		expect(builderSpec.functions?.[0]?.name).toBe('timeShift');
+
+		const formulaQuery = payload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_formula',
+		) as QueryEnvelope;
+		const formulaSpec = formulaQuery.spec as V5QueryBuilderFormula;
+		expect(formulaSpec.name).toBe('F1');
+		expect(formulaSpec.expression).toBe('A + 1');
+		expect(formulaSpec.legend).toBe('Formula Legend');
+	});
+
+	it('builds payload for PromQL queries and respects originalGraphType for formatting', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.PROM,
+				id: 'q2',
+				unit: undefined,
+				promql: [
+					{
+						name: 'A',
+						query: 'up',
+						disabled: false,
+						legend: 'LP',
+					},
+				],
+				clickhouse_sql: [],
+				builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
+			},
+			graphType: PANEL_TYPES.TIME_SERIES,
+			originalGraphType: PANEL_TYPES.TABLE,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: { A: 'LP' },
+				queryPayload: expect.objectContaining({
+					compositeQuery: expect.objectContaining({
+						queries: [
+							{
+								type: 'promql',
+								spec: expect.objectContaining({
+									name: 'A',
+									query: 'up',
+									legend: 'LP',
+									stats: false,
+								}),
+							},
+						],
+					}),
+					requestType: 'time_series',
+					formatOptions: expect.objectContaining({
+						formatTableResultForUI: true,
+						fillGaps: false,
+					}),
+					start: start * 1000,
+					end: end * 1000,
+					variables: {},
+				}),
+			}),
+		);
+
+		expect(result.legendMap).toEqual({ A: 'LP' });
+
+		const payload: QueryRangePayloadV5 = result.queryPayload;
+		expect(payload.requestType).toBe('time_series');
+		expect(payload.formatOptions?.formatTableResultForUI).toBe(true);
+		expect(payload.compositeQuery.queries).toHaveLength(1);
+
+		const prom = payload.compositeQuery.queries[0];
+		expect(prom.type).toBe('promql');
+		const promSpec = prom.spec as PromQuery;
+		expect(promSpec.name).toBe('A');
+		expect(promSpec.query).toBe('up');
+		expect(promSpec.legend).toBe('LP');
+		expect(promSpec.stats).toBe(false);
+	});
+
+	it('builds payload for ClickHouse queries and maps requestType from panel', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.CLICKHOUSE,
+				id: 'q3',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [
+					{
+						name: 'Q',
+						query: 'SELECT 1',
+						disabled: false,
+						legend: 'LC',
+					},
+				],
+				builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
+			},
+			graphType: PANEL_TYPES.TABLE,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: { Q: 'LC' },
+				queryPayload: expect.objectContaining({
+					compositeQuery: expect.objectContaining({
+						queries: [
+							{
+								type: 'clickhouse_sql',
+								spec: expect.objectContaining({
+									name: 'Q',
+									query: 'SELECT 1',
+									legend: 'LC',
+								}),
+							},
+						],
+					}),
+					requestType: 'scalar',
+					formatOptions: expect.objectContaining({
+						formatTableResultForUI: true,
+						fillGaps: false,
+					}),
+					start: start * 1000,
+					end: end * 1000,
+					variables: {},
+				}),
+			}),
+		);
+
+		expect(result.legendMap).toEqual({ Q: 'LC' });
+
+		const payload: QueryRangePayloadV5 = result.queryPayload;
+		expect(payload.requestType).toBe('scalar');
+		expect(payload.compositeQuery.queries).toHaveLength(1);
+		const ch = payload.compositeQuery.queries[0];
+		expect(ch.type).toBe('clickhouse_sql');
+		const chSpec = ch.spec as ClickHouseQuery;
+		expect(chSpec.name).toBe('Q');
+		expect(chSpec.query).toBe('SELECT 1');
+		expect(chSpec.legend).toBe('LC');
+	});
+
+	it('uses getStartEndRangeTime when start/end are not provided', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q4',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
+			},
+			graphType: PANEL_TYPES.TIME_SERIES,
+			selectedTime: 'GLOBAL_TIME',
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: {},
+				queryPayload: expect.objectContaining({
+					compositeQuery: { queries: [] },
+					requestType: 'time_series',
+					formatOptions: expect.objectContaining({
+						formatTableResultForUI: false,
+						fillGaps: false,
+					}),
+					start: 100 * 1000,
+					end: 200 * 1000,
+					variables: {},
+				}),
+			}),
+		);
+
+		const payload: QueryRangePayloadV5 = result.queryPayload;
+		expect(payload.start).toBe(100 * 1000);
+		expect(payload.end).toBe(200 * 1000);
+	});
+
+	it('includes reduceTo for metrics in scalar panels (TABLE)', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q5',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: {
+					queryData: [baseBuilderQuery()],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.TABLE,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: { A: 'Legend A' },
+				queryPayload: expect.objectContaining({
+					compositeQuery: expect.objectContaining({
+						queries: [
+							{
+								type: 'builder_query',
+								spec: expect.objectContaining({
+									name: 'A',
+									signal: 'metrics',
+									stepInterval: 600,
+									functions: [{ name: 'timeShift', args: [{ value: '5m' }] }],
+									aggregations: [
+										expect.objectContaining({
+											metricName: 'cpu_usage',
+											timeAggregation: 'sum',
+											spaceAggregation: 'avg',
+											reduceTo: 'avg',
+											temporality: undefined,
+										}),
+									],
+								}),
+							},
+						],
+					}),
+					requestType: 'scalar',
+					formatOptions: expect.objectContaining({
+						formatTableResultForUI: true,
+						fillGaps: false,
+					}),
+					start: start * 1000,
+					end: end * 1000,
+					variables: {},
+				}),
+			}),
+		);
+
+		const payload: QueryRangePayloadV5 = result.queryPayload;
+		const builderQuery = payload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_query',
+		) as QueryEnvelope;
+		const builderSpec = builderQuery.spec as MetricBuilderQuery;
+		expect(builderSpec.aggregations?.[0].reduceTo).toBe('avg');
+	});
+
+	it('omits aggregations for raw request type (LIST panel)', () => {
+		const logAgg: LogAggregation[] = [{ expression: 'count()' }];
+		const logsQuery = baseBuilderQuery({
+			dataSource: DataSource.LOGS,
+			aggregations: logAgg,
+		} as Partial<IBuilderQuery>);
+
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q6',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: {
+					queryData: [logsQuery],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: { A: 'Legend A' },
+				queryPayload: expect.objectContaining({
+					compositeQuery: expect.objectContaining({
+						queries: [
+							{
+								type: 'builder_query',
+								spec: expect.objectContaining({
+									name: 'A',
+									signal: 'logs',
+									stepInterval: 600,
+									functions: [{ name: 'timeShift', args: [{ value: '5m' }] }],
+									aggregations: undefined,
+								}),
+							},
+						],
+					}),
+					requestType: 'raw',
+					formatOptions: expect.objectContaining({
+						formatTableResultForUI: false,
+						fillGaps: false,
+					}),
+					start: start * 1000,
+					end: end * 1000,
+					variables: {},
+				}),
+			}),
+		);
+
+		const payload: QueryRangePayloadV5 = result.queryPayload;
+		expect(payload.requestType).toBe('raw');
+		const builderQuery = payload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_query',
+		) as QueryEnvelope;
+		// For RAW request type, aggregations should be omitted
+		const logSpec = builderQuery.spec as LogBuilderQuery;
+		expect(logSpec.aggregations).toBeUndefined();
+	});
+
+	it('maps groupBy, order, having, aggregations and filter for logs builder query', () => {
+		const getStartEndRangeTime = jest.requireMock('lib/getStartEndRangeTime')
+			.default as jest.Mock;
+		getStartEndRangeTime.mockReturnValueOnce({
+			start: '1754623641',
+			end: '1754645241',
+		});
+
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'e643e387-1996-4449-97b6-9ef4498a0573',
+				unit: undefined,
+				promql: [{ name: 'A', query: '', legend: '', disabled: false }],
+				clickhouse_sql: [{ name: 'A', legend: '', disabled: false, query: '' }],
+				builder: {
+					queryData: [
+						{
+							dataSource: DataSource.LOGS,
+							queryName: 'A',
+							aggregateOperator: 'count',
+							aggregateAttribute: {
+								key: '',
+								dataType: DataTypes.EMPTY,
+								type: '',
+							},
+							timeAggregation: 'rate',
+							spaceAggregation: 'sum',
+							filter: { expression: "service.name = 'adservice'" },
+							aggregations: [
+								{ expression: 'count() as cnt avg(code.lineno) ' } as LogAggregation,
+							],
+							functions: [],
+							filters: {
+								items: [
+									{
+										id: '14c790ec-54d1-42f0-a889-3b4f0fb79852',
+										op: '=',
+										key: { id: 'service.name', key: 'service.name', type: '' },
+										value: 'adservice',
+									},
+								],
+								op: 'AND',
+							},
+							expression: 'A',
+							disabled: false,
+							stepInterval: 80,
+							having: { expression: 'count() > 0' },
+							limit: 600,
+							orderBy: [{ columnName: 'service.name', order: 'desc' }],
+							groupBy: [
+								{
+									key: 'service.name',
+									type: '',
+								},
+							],
+							legend: '{{service.name}}',
+							reduceTo: 'avg',
+							offset: 0,
+							pageSize: 100,
+						},
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.TIME_SERIES,
+			selectedTime: 'GLOBAL_TIME',
+			globalSelectedInterval: 'custom' as never,
+			variables: {},
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: { A: '{{service.name}}' },
+				queryPayload: expect.objectContaining({
+					schemaVersion: 'v1',
+					start: 1754623641000,
+					end: 1754645241000,
+					requestType: 'time_series',
+					compositeQuery: expect.objectContaining({
+						queries: [
+							{
+								type: 'builder_query',
+								spec: expect.objectContaining({
+									name: 'A',
+									signal: 'logs',
+									stepInterval: 80,
+									disabled: false,
+									filter: { expression: "service.name = 'adservice'" },
+									groupBy: [
+										{
+											name: 'service.name',
+											fieldDataType: '',
+											fieldContext: '',
+										},
+									],
+									limit: 600,
+									order: [
+										{
+											key: { name: 'service.name' },
+											direction: 'desc',
+										},
+									],
+									legend: '{{service.name}}',
+									having: { expression: 'count() > 0' },
+									aggregations: [
+										{ expression: 'count()', alias: 'cnt' },
+										{ expression: 'avg(code.lineno)' },
+									],
+								}),
+							},
+						],
+					}),
+					formatOptions: { formatTableResultForUI: false, fillGaps: false },
+					variables: {},
+				}),
+			}),
+		);
+	});
+});
--- a/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts
+++ b/frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts
@@ -1,11 +1,15 @@
 /* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable sonarjs/no-identical-functions */
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import getStartEndRangeTime from 'lib/getStartEndRangeTime';
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
 import { isEmpty } from 'lodash-es';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	IBuilderQuery,
+	IBuilderTraceOperator,
+} from 'types/api/queryBuilder/queryBuilderData';
 import {
 	BaseBuilderQuery,
 	FieldContext,
@@ -24,6 +28,7 @@ import {
 	TelemetryFieldKey,
 	TraceAggregation,
 	VariableItem,
+	VariableType,
 } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource } from 'types/common/queryBuilder';
@@ -66,9 +71,46 @@ function getSignalType(dataSource: string): 'traces' | 'logs' | 'metrics' {
 	return 'metrics';
 }

-/**
- * Creates base spec for builder queries
- */
+function isDeprecatedField(fieldName: string): boolean {
+	const deprecatedIntrinsicFields = [
+		'traceID',
+		'spanID',
+		'parentSpanID',
+		'spanKind',
+		'durationNano',
+		'statusCode',
+		'statusMessage',
+		'statusCodeString',
+	];
+
+	const deprecatedCalculatedFields = [
+		'responseStatusCode',
+		'externalHttpUrl',
+		'httpUrl',
+		'externalHttpMethod',
+		'httpMethod',
+		'httpHost',
+		'dbName',
+		'dbOperation',
+		'hasError',
+		'isRemote',
+		'serviceName',
+		'httpRoute',
+		'msgSystem',
+		'msgOperation',
+		'dbSystem',
+		'rpcSystem',
+		'rpcService',
+		'rpcMethod',
+		'peerService',
+	];
+
+	return (
+		deprecatedIntrinsicFields.includes(fieldName) ||
+		deprecatedCalculatedFields.includes(fieldName)
+	);
+}
+
 function createBaseSpec(
 	queryData: IBuilderQuery,
 	requestType: RequestType,
@@ -80,7 +122,7 @@ function createBaseSpec(
 	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));

 	return {
-		stepInterval: queryData?.stepInterval || undefined,
+		stepInterval: queryData?.stepInterval || null,
 		disabled: queryData.disabled,
 		filter: queryData?.filter?.expression ? queryData.filter : undefined,
 		groupBy:
@@ -88,8 +130,8 @@ function createBaseSpec(
 				? queryData.groupBy.map(
 						(item: any): GroupByKey => ({
 							name: item.key,
-							fieldDataType: item?.dataType,
-							fieldContext: item?.type,
+							fieldDataType: item?.dataType || '',
+							fieldContext: item?.type || '',
 							description: item?.description,
 							unit: item?.unit,
 							signal: item?.signal,
@@ -140,19 +182,33 @@ function createBaseSpec(
 		selectFields: isEmpty(nonEmptySelectColumns)
 			? undefined
 			: nonEmptySelectColumns?.map(
-					(column: any): TelemetryFieldKey => ({
-						name: column.name ?? column.key,
-						fieldDataType:
-							column?.fieldDataType ?? (column?.dataType as FieldDataType),
-						fieldContext: column?.fieldContext ?? (column?.type as FieldContext),
-						signal: column?.signal ?? undefined,
-					}),
+					(column: any): TelemetryFieldKey => {
+						const fieldName = column.name ?? column.key;
+						const isDeprecated = isDeprecatedField(fieldName);
+
+						const fieldObj: TelemetryFieldKey = {
+							name: fieldName,
+							fieldDataType:
+								column?.fieldDataType ?? (column?.dataType as FieldDataType),
+							signal: column?.signal ?? undefined,
+						};
+
+						// Only add fieldContext if the field is NOT deprecated
+						if (!isDeprecated && fieldName !== 'name') {
+							fieldObj.fieldContext =
+								column?.fieldContext ?? (column?.type as FieldContext);
+						}
+
+						return fieldObj;
+					},
 			  ),
 	};
 }
+
 // Utility to parse aggregation expressions with optional alias
 export function parseAggregations(
 	expression: string,
+	availableAlias?: string,
 ): { expression: string; alias?: string }[] {
 	const result: { expression: string; alias?: string }[] = [];
 	// Matches function calls like "count()" or "sum(field)" with optional alias like "as 'alias'"
@@ -161,7 +217,7 @@ export function parseAggregations(
 	let match = regex.exec(expression);
 	while (match !== null) {
 		const expr = match[1];
-		let alias = match[2];
+		let alias = match[2] || availableAlias; // Use provided alias or availableAlias if not matched
 		if (alias) {
 			// Remove quotes if present
 			alias = alias.replace(/^['"]|['"]$/g, '');
@@ -212,9 +268,14 @@ export function createAggregation(
 	}

 	if (queryData.aggregations?.length > 0) {
-		return isEmpty(parseAggregations(queryData.aggregations?.[0].expression))
-			? [{ expression: 'count()' }]
-			: parseAggregations(queryData.aggregations?.[0].expression);
+		return queryData.aggregations.flatMap(
+			(agg: { expression: string; alias?: string }) => {
+				const parsedAggregations = parseAggregations(agg.expression, agg?.alias);
+				return isEmpty(parsedAggregations)
+					? [{ expression: 'count()' }]
+					: parsedAggregations;
+			},
+		);
 	}

 	return [{ expression: 'count()' }];
@@ -276,6 +337,109 @@ export function convertBuilderQueriesToV5(
 	);
 }

+function createTraceOperatorBaseSpec(
+	queryData: IBuilderTraceOperator,
+	requestType: RequestType,
+	panelType?: PANEL_TYPES,
+): BaseBuilderQuery {
+	const nonEmptySelectColumns = (queryData.selectColumns as (
+		| BaseAutocompleteData
+		| TelemetryFieldKey
+	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));
+
+	const {
+		stepInterval,
+		groupBy,
+		limit,
+		offset,
+		legend,
+		having,
+		orderBy,
+		pageSize,
+	} = queryData;
+
+	return {
+		stepInterval: stepInterval || undefined,
+		groupBy:
+			groupBy?.length > 0
+				? groupBy.map(
+						(item: any): GroupByKey => ({
+							name: item.key,
+							fieldDataType: item?.dataType,
+							fieldContext: item?.type,
+							description: item?.description,
+							unit: item?.unit,
+							signal: item?.signal,
+							materialized: item?.materialized,
+						}),
+				  )
+				: undefined,
+		limit:
+			panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.LIST
+				? limit || pageSize || undefined
+				: limit || undefined,
+		offset: requestType === 'raw' || requestType === 'trace' ? offset : undefined,
+		order:
+			orderBy?.length > 0
+				? orderBy.map(
+						(order: any): OrderBy => ({
+							key: {
+								name: order.columnName,
+							},
+							direction: order.order,
+						}),
+				  )
+				: undefined,
+		legend: isEmpty(legend) ? undefined : legend,
+		having: isEmpty(having) ? undefined : (having as Having),
+		selectFields: isEmpty(nonEmptySelectColumns)
+			? undefined
+			: nonEmptySelectColumns?.map(
+					(column: any): TelemetryFieldKey => ({
+						name: column.name ?? column.key,
+						fieldDataType:
+							column?.fieldDataType ?? (column?.dataType as FieldDataType),
+						fieldContext: column?.fieldContext ?? (column?.type as FieldContext),
+						signal: column?.signal ?? undefined,
+					}),
+			  ),
+	};
+}
+
+export function convertTraceOperatorToV5(
+	traceOperator: Record<string, IBuilderTraceOperator>,
+	requestType: RequestType,
+	panelType?: PANEL_TYPES,
+): QueryEnvelope[] {
+	return Object.entries(traceOperator).map(
+		([queryName, traceOperatorData]): QueryEnvelope => {
+			const baseSpec = createTraceOperatorBaseSpec(
+				traceOperatorData,
+				requestType,
+				panelType,
+			);
+
+			// Skip aggregation for raw request type
+			const aggregations =
+				requestType === 'raw'
+					? undefined
+					: createAggregation(traceOperatorData, panelType);
+
+			const spec: QueryEnvelope['spec'] = {
+				name: queryName,
+				...baseSpec,
+				expression: traceOperatorData.expression || '',
+				aggregations: aggregations as TraceAggregation[],
+			};
+
+			return {
+				type: 'builder_trace_operator' as QueryType,
+				spec,
+			};
+		},
+	);
+}
+
 /**
 * Converts PromQL queries to V5 format
 */
@@ -350,6 +514,7 @@ export const prepareQueryRangePayloadV5 = ({
 	formatForWeb,
 	originalGraphType,
 	fillGaps,
+	dynamicVariables,
 }: GetQueryResultsProps): PrepareQueryRangePayloadV5Result => {
 	let legendMap: Record<string, string> = {};
 	const requestType = mapPanelTypeToRequestType(graphType);
@@ -357,14 +522,28 @@ export const prepareQueryRangePayloadV5 = ({

 	switch (query.queryType) {
 		case EQueryType.QUERY_BUILDER: {
-			const { queryData: data, queryFormulas } = query.builder;
+			const { queryData: data, queryFormulas, queryTraceOperator } = query.builder;
 			const currentQueryData = mapQueryDataToApi(data, 'queryName', tableParams);
 			const currentFormulas = mapQueryDataToApi(queryFormulas, 'queryName');

+			const filteredTraceOperator =
+				queryTraceOperator && queryTraceOperator.length > 0
+					? queryTraceOperator.filter((traceOperator) =>
+							Boolean(traceOperator.expression.trim()),
+					  )
+					: [];
+
+			const currentTraceOperator = mapQueryDataToApi(
+				filteredTraceOperator,
+				'queryName',
+				tableParams,
+			);
+
 			// Combine legend maps
 			legendMap = {
 				...currentQueryData.newLegendMap,
 				...currentFormulas.newLegendMap,
+				...currentTraceOperator.newLegendMap,
 			};

 			// Convert builder queries
@@ -397,8 +576,14 @@ export const prepareQueryRangePayloadV5 = ({
 				}),
 			);

-			// Combine both types
-			queries = [...builderQueries, ...formulaQueries];
+			const traceOperatorQueries = convertTraceOperatorToV5(
+				currentTraceOperator.data,
+				requestType,
+				graphType,
+			);
+
+			// Combine all query types
+			queries = [...builderQueries, ...formulaQueries, ...traceOperatorQueries];
 			break;
 		}
 		case EQueryType.PROM: {
@@ -441,7 +626,12 @@ export const prepareQueryRangePayloadV5 = ({
 			fillGaps: fillGaps || false,
 		},
 		variables: Object.entries(variables).reduce((acc, [key, value]) => {
-			acc[key] = { value };
+			acc[key] = {
+				value,
+				type: dynamicVariables
+					?.find((v) => v.name === key)
+					?.type?.toLowerCase() as VariableType,
+			};
 			return acc;
 		}, {} as Record<string, VariableItem>),
 	};
--- a/frontend/src/components/AppLoading/tests/AppLoading.test.tsx
+++ b/frontend/src/components/AppLoading/tests/AppLoading.test.tsx
@@ -1,14 +1,16 @@
 import { render, screen } from '@testing-library/react';

+import getLocal from '../../../api/browser/localstorage/get';
 import AppLoading from '../AppLoading';

-// Mock the localStorage API
-const mockGet = jest.fn();
-jest.mock('api/browser/localstorage/get', () => ({
+jest.mock('../../../api/browser/localstorage/get', () => ({
 	__esModule: true,
-	default: mockGet,
+	default: jest.fn(),
 }));

+// Access the mocked function
+const mockGet = (getLocal as unknown) as jest.Mock;
+
 describe('AppLoading', () => {
 	const SIGNOZ_TEXT = 'SigNoz';
 	const TAGLINE_TEXT =
--- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss
@@ -20,13 +20,15 @@
 		.ant-card-body {
 			height: calc(100% - 18px);

-			.widget-graph-container {
-				&.bar {
-					height: calc(100% - 110px);
-				}
+			.widget-graph-component-container {
+				.widget-graph-container {
+					&.bar-panel-container {
+						height: calc(100% - 110px);
+					}

-				&.graph {
-					height: calc(100% - 80px);
+					&.graph-panel-container {
+						height: calc(100% - 80px);
+					}
 				}
 			}
 		}
@@ -82,9 +84,11 @@
 		.ant-card-body {
 			height: calc(100% - 18px);

-			.widget-graph-container {
-				&.bar {
-					height: calc(100% - 110px);
+			.widget-graph-component-container {
+				.widget-graph-container {
+					&.bar-panel-container {
+						height: calc(100% - 110px);
+					}
 				}
 			}
 		}
--- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts
@@ -32,8 +32,6 @@ export const celeryAllStateWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
-						isColumn: false,
-						isJSON: false,
 						key: '',
 						type: '',
 					},
@@ -50,8 +48,6 @@ export const celeryAllStateWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.state--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.state',
 							type: 'tag',
 						},
@@ -88,7 +84,6 @@ export const celeryRetryStateWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
-						isColumn: false,
 						key: '',
 						type: '',
 					},
@@ -103,8 +98,6 @@ export const celeryRetryStateWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									id: 'celery.state--string--tag--false',
-									isColumn: false,
-									isJSON: false,
 									key: 'celery.state',
 									type: 'tag',
 								},
@@ -119,8 +112,6 @@ export const celeryRetryStateWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -153,8 +144,6 @@ export const celeryFailedStateWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
-						isColumn: false,
-						isJSON: false,
 						key: '',
 						type: '',
 					},
@@ -169,8 +158,6 @@ export const celeryFailedStateWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									id: 'celery.state--string--tag--false',
-									isColumn: false,
-									isJSON: false,
 									key: 'celery.state',
 									type: 'tag',
 								},
@@ -185,8 +172,6 @@ export const celeryFailedStateWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -219,8 +204,6 @@ export const celerySuccessStateWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
-						isColumn: false,
-						isJSON: false,
 						key: '',
 						type: '',
 					},
@@ -235,8 +218,6 @@ export const celerySuccessStateWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									id: 'celery.state--string--tag--false',
-									isColumn: false,
-									isJSON: false,
 									key: 'celery.state',
 									type: 'tag',
 								},
@@ -251,8 +232,6 @@ export const celerySuccessStateWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -284,7 +263,6 @@ export const celeryTasksByWorkerWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
-						isColumn: false,
 						key: '',
 						type: '',
 					},
@@ -301,8 +279,6 @@ export const celeryTasksByWorkerWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -338,8 +314,6 @@ export const celeryErrorByWorkerWidgetData = (
 					aggregateAttribute: {
 						dataType: 'string',
 						id: 'span_id--string----true',
-						isColumn: true,
-						isJSON: false,
 						key: 'span_id',
 						type: '',
 					},
@@ -353,8 +327,6 @@ export const celeryErrorByWorkerWidgetData = (
 								key: {
 									dataType: DataTypes.bool,
 									id: 'has_error--bool----true',
-									isColumn: true,
-									isJSON: false,
 									key: 'has_error',
 									type: '',
 								},
@@ -373,8 +345,6 @@ export const celeryErrorByWorkerWidgetData = (
 					groupBy: [
 						{
 							dataType: DataTypes.String,
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 							id: 'celery.hostname--string--tag--false',
@@ -390,8 +360,6 @@ export const celeryErrorByWorkerWidgetData = (
 					aggregateAttribute: {
 						dataType: 'string',
 						id: 'span_id--string----true',
-						isColumn: true,
-						isJSON: false,
 						key: 'span_id',
 						type: '',
 					},
@@ -411,8 +379,6 @@ export const celeryErrorByWorkerWidgetData = (
 					groupBy: [
 						{
 							dataType: DataTypes.String,
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 							id: 'celery.hostname--string--tag--false',
@@ -445,8 +411,6 @@ export const celeryLatencyByWorkerWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
 						id: 'duration_nano--float64----true',
-						isColumn: true,
-						isJSON: false,
 						key: 'duration_nano',
 						type: '',
 					},
@@ -463,8 +427,6 @@ export const celeryLatencyByWorkerWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -498,8 +460,6 @@ export const celeryActiveTasksWidgetData = (
 						dataType: DataTypes.Float64,
 						id:
 							'flower_worker_number_of_currently_executing_tasks--float64--Gauge--true',
-						isColumn: true,
-						isJSON: false,
 						key: 'flower_worker_number_of_currently_executing_tasks',
 						type: 'Gauge',
 					},
@@ -516,8 +476,6 @@ export const celeryActiveTasksWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'worker--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'worker',
 							type: 'tag',
 						},
@@ -551,8 +509,6 @@ export const celeryTaskLatencyWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
 						id: 'duration_nano--float64----true',
-						isColumn: true,
-						isJSON: false,
 						key: 'duration_nano',
 						type: '',
 					},
@@ -569,8 +525,6 @@ export const celeryTaskLatencyWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.task_name--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.task_name',
 							type: 'tag',
 						},
@@ -606,8 +560,6 @@ export const celerySlowestTasksTableWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.Float64,
 					id: 'duration_nano--float64----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'duration_nano',
 					type: '',
 				},
@@ -624,8 +576,6 @@ export const celerySlowestTasksTableWidgetData = getWidgetQueryBuilder(
 					{
 						dataType: DataTypes.String,
 						id: 'celery.task_name--string--tag--false',
-						isColumn: false,
-						isJSON: false,
 						key: 'celery.task_name',
 						type: 'tag',
 					},
@@ -660,8 +610,6 @@ export const celeryRetryTasksTableWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.Float64,
 					id: 'duration_nano--float64----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'duration_nano',
 					type: '',
 				},
@@ -676,8 +624,6 @@ export const celeryRetryTasksTableWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
-								isColumn: false,
-								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -692,8 +638,6 @@ export const celeryRetryTasksTableWidgetData = getWidgetQueryBuilder(
 					{
 						dataType: DataTypes.String,
 						id: 'celery.task_name--string--tag--false',
-						isColumn: false,
-						isJSON: false,
 						key: 'celery.task_name',
 						type: 'tag',
 					},
@@ -729,8 +673,6 @@ export const celeryFailedTasksTableWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.Float64,
 					id: 'duration_nano--float64----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'duration_nano',
 					type: '',
 				},
@@ -745,8 +687,6 @@ export const celeryFailedTasksTableWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
-								isColumn: false,
-								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -761,8 +701,6 @@ export const celeryFailedTasksTableWidgetData = getWidgetQueryBuilder(
 					{
 						dataType: DataTypes.String,
 						id: 'celery.task_name--string--tag--false',
-						isColumn: false,
-						isJSON: false,
 						key: 'celery.task_name',
 						type: 'tag',
 					},
@@ -796,8 +734,6 @@ export const celerySuccessTasksTableWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.Float64,
 					id: 'duration_nano--float64----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'duration_nano',
 					type: '',
 				},
@@ -812,8 +748,6 @@ export const celerySuccessTasksTableWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
-								isColumn: false,
-								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -828,8 +762,6 @@ export const celerySuccessTasksTableWidgetData = getWidgetQueryBuilder(
 					{
 						dataType: DataTypes.String,
 						id: 'celery.task_name--string--tag--false',
-						isColumn: false,
-						isJSON: false,
 						key: 'celery.task_name',
 						type: 'tag',
 					},
@@ -869,8 +801,6 @@ export const celeryTimeSeriesTablesWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
 						id: 'duration_nano--float64----true',
-						isColumn: true,
-						isJSON: false,
 						key: 'duration_nano',
 						type: '',
 					},
@@ -885,8 +815,6 @@ export const celeryTimeSeriesTablesWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									id: `${entity}--string--tag--false`,
-									isColumn: false,
-									isJSON: false,
 									key: `${entity}`,
 									type: 'tag',
 								},
@@ -901,8 +829,6 @@ export const celeryTimeSeriesTablesWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.task_name--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.task_name',
 							type: 'tag',
 						},
@@ -933,8 +859,6 @@ export const celeryAllStateCountWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.String,
 					id: 'span_id--string----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'span_id',
 					type: '',
 				},
@@ -972,8 +896,6 @@ export const celerySuccessStateCountWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.String,
 					id: 'span_id--string----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'span_id',
 					type: '',
 				},
@@ -988,8 +910,6 @@ export const celerySuccessStateCountWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
-								isColumn: false,
-								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -1025,8 +945,6 @@ export const celeryFailedStateCountWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.String,
 					id: 'span_id--string----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'span_id',
 					type: '',
 				},
@@ -1041,8 +959,6 @@ export const celeryFailedStateCountWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
-								isColumn: false,
-								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -1078,7 +994,6 @@ export const celeryRetryStateCountWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.String,
 					id: 'span_id--string----true',
-					isColumn: true,
 					key: 'span_id',
 					type: '',
 				},
@@ -1093,8 +1008,6 @@ export const celeryRetryStateCountWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
-								isColumn: false,
-								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
--- a/frontend/src/components/CeleryTask/CeleryUtils.ts
+++ b/frontend/src/components/CeleryTask/CeleryUtils.ts
@@ -39,8 +39,6 @@ export function getFiltersFromQueryParams(
 			key,
 			dataType: DataTypes.String,
 			type: 'tag',
-			isColumn: false,
-			isJSON: false,
 			id: `${key}--string--tag--false`,
 		},
 		op: '=',
@@ -100,8 +98,7 @@ export const createFiltersFromData = (
 		key: string;
 		dataType: DataTypes;
 		type: string;
-		isColumn: boolean;
-		isJSON: boolean;
+
 		id: string;
 	};
 	op: string;
@@ -119,8 +116,6 @@ export const createFiltersFromData = (
 					key,
 					dataType: DataTypes.String,
 					type: 'tag',
-					isColumn: false,
-					isJSON: false,
 					id: `${key}--string--tag--false`,
 				},
 				op: '=',
--- a/frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss
+++ b/frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss
@@ -2,10 +2,28 @@
 	position: relative;
 	padding-left: 20px;

+	& :is(h1, h2, h3, h4, h5, h6, p, &-section-title) {
+		margin-bottom: 12px;
+	}
+
+	&-content {
+		display: flex;
+		flex-direction: column;
+		gap: 32px;
+	}
+
+	&-section-title {
+		font-size: 14px;
+		line-height: 20px;
+		color: var(--text-vanilla-400, #c0c1c3);
+	}
+
 	.changelog-release-date {
 		font-size: 14px;
 		line-height: 20px;
 		color: var(--text-vanilla-400, #c0c1c3);
+		display: block;
+		margin-bottom: 12px;
 	}

 	&-list {
@@ -81,12 +99,7 @@
 		}
 	}

-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
+	& :is(h1, h2, h3, h4, h5, h6, p, &-section-title) {
 		font-weight: 600;
 		color: var(--text-vanilla-100, #fff);
 	}
@@ -96,7 +109,8 @@
 		line-height: 32px;
 	}

-	h2 {
+	h2,
+	&-section-title {
 		font-size: 20px;
 		line-height: 28px;
 	}
@@ -108,6 +122,7 @@
 		overflow: hidden;
 		border-radius: 4px;
 		border: 1px solid var(--bg-slate-400, #1d212d);
+		margin-bottom: 28px;
 	}

 	.changelog-media-video {
@@ -124,17 +139,8 @@
 		&-line {
 			background-color: var(--bg-vanilla-300);
 		}
-		li,
-		p {
-			color: var(--text-ink-500);
-		}

-		h1,
-		h2,
-		h3,
-		h4,
-		h5,
-		h6 {
+		& :is(h1, h2, h3, h4, h5, h6, p, li, &-section-title) {
 			color: var(--text-ink-500);
 		}

--- a/frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx
+++ b/frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx
@@ -55,33 +55,35 @@ function ChangelogRenderer({ changelog }: Props): JSX.Element {
 				<div className="inner-ball" />
 			</div>
 			<span className="changelog-release-date">{formattedReleaseDate}</span>
-			{changelog.features && changelog.features.length > 0 && (
-				<div className="changelog-renderer-list">
-					{changelog.features.map((feature) => (
-						<div key={feature.id}>
-							<h2>{feature.title}</h2>
-							{feature.media && renderMedia(feature.media)}
-							<ReactMarkdown>{feature.description}</ReactMarkdown>
-						</div>
-					))}
-				</div>
-			)}
-			{changelog.bug_fixes && changelog.bug_fixes.length > 0 && (
-				<div>
-					<h2>Bug Fixes</h2>
-					{changelog.bug_fixes && (
-						<ReactMarkdown>{changelog.bug_fixes}</ReactMarkdown>
-					)}
-				</div>
-			)}
-			{changelog.maintenance && changelog.maintenance.length > 0 && (
-				<div>
-					<h2>Maintenance</h2>
-					{changelog.maintenance && (
-						<ReactMarkdown>{changelog.maintenance}</ReactMarkdown>
-					)}
-				</div>
-			)}
+			<div className="changelog-renderer-content">
+				{changelog.features && changelog.features.length > 0 && (
+					<div className="changelog-renderer-list">
+						{changelog.features.map((feature) => (
+							<div key={feature.id}>
+								<div className="changelog-renderer-section-title">{feature.title}</div>
+								{feature.media && renderMedia(feature.media)}
+								<ReactMarkdown>{feature.description}</ReactMarkdown>
+							</div>
+						))}
+					</div>
+				)}
+				{changelog.bug_fixes && changelog.bug_fixes.length > 0 && (
+					<div className="changelog-renderer-bug-fixes">
+						<div className="changelog-renderer-section-title">Bug Fixes</div>
+						{changelog.bug_fixes && (
+							<ReactMarkdown>{changelog.bug_fixes}</ReactMarkdown>
+						)}
+					</div>
+				)}
+				{changelog.maintenance && changelog.maintenance.length > 0 && (
+					<div className="changelog-renderer-maintenance">
+						<div className="changelog-renderer-section-title">Maintenance</div>
+						{changelog.maintenance && (
+							<ReactMarkdown>{changelog.maintenance}</ReactMarkdown>
+						)}
+					</div>
+				)}
+			</div>
 		</div>
 	);
 }
--- a/frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx
+++ b/frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx
@@ -241,8 +241,6 @@ function ClientSideQBSearch(
 							key: 'body',
 							dataType: DataTypes.String,
 							type: '',
-							isColumn: true,
-							isJSON: false,
 							id: 'body--string----true',
 						},
 						op: OPERATORS.CONTAINS,
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss
+++ b/frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss
@@ -1,6 +1,16 @@
 .custom-time-picker {
 	display: flex;
 	flex-direction: column;
+
+	.timeSelection-input {
+		&:hover {
+			border-color: #1d212d !important;
+		}
+	}
+
+	.time-input-suffix {
+		display: flex;
+	}
 }

 .time-options-container {
@@ -135,6 +145,7 @@
 		align-items: center;
 		color: var(--bg-vanilla-400);
 		gap: 6px;
+
 		.timezone {
 			display: flex;
 			align-items: center;
@@ -163,6 +174,52 @@
 	cursor: pointer;
 }

+.time-input-prefix {
+	.live-dot-icon {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background-color: var(--bg-forest-500);
+		animation: ripple 1s infinite;
+
+		margin-right: 4px;
+		margin-left: 4px;
+	}
+}
+
+@keyframes ripple {
+	0% {
+		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
+	}
+	70% {
+		box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
+	}
+	100% {
+		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
+	}
+}
+
+.time-input-suffix-icon-badge {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 4px;
+	border-radius: 2px;
+	background: rgba(171, 189, 255, 0.04);
+	color: var(--bg-vanilla-100);
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 16px;
+	letter-spacing: -0.06px;
+	cursor: pointer;
+	height: 20px;
+	width: 20px;
+
+	&:hover {
+		background: rgba(171, 189, 255, 0.08);
+	}
+}
+
 .lightMode {
 	.date-time-popover__footer {
 		border-color: var(--bg-vanilla-400);
@@ -180,8 +237,26 @@
 			}
 		}
 	}
+
+	.custom-time-picker {
+		.timeSelection-input {
+			&:hover {
+				border-color: var(--bg-vanilla-300) !important;
+			}
+		}
+	}
+
 	.timezone-badge {
 		color: var(--bg-ink-100);
 		background: rgb(179 179 179 / 15%);
 	}
+
+	.time-input-suffix-icon-badge {
+		color: var(--bg-ink-100);
+		background: rgb(179 179 179 / 15%);
+
+		&:hover {
+			background: rgb(179 179 179 / 20%);
+		}
+	}
 }
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
+++ b/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
@@ -5,13 +5,12 @@ import './CustomTimePicker.styles.scss';
 import { Input, Popover, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
-	CustomTimeType,
 	FixedDurationSuggestionOptions,
 	Options,
 	RelativeDurationSuggestionOptions,
-	Time,
 } from 'container/TopNav/DateTimeSelectionV2/config';
 import dayjs from 'dayjs';
 import { isValidTimeFormat } from 'lib/getMinMax';
@@ -28,7 +27,10 @@ import {
 	useMemo,
 	useState,
 } from 'react';
+import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
 import { popupContainer } from 'utils/selectPopupContainer';

 import CustomTimePickerPopoverContent from './CustomTimePickerPopoverContent';
@@ -57,11 +59,9 @@ interface CustomTimePickerProps {
 	customDateTimeVisible?: boolean;
 	setCustomDTPickerVisible?: Dispatch<SetStateAction<boolean>>;
 	onCustomDateHandler?: (dateTimeRange: DateTimeRangeType) => void;
-	handleGoLive?: () => void;
-	onTimeChange?: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
+	showLiveLogs?: boolean;
+	onGoLive?: () => void;
+	onExitLiveLogs?: () => void;
 }

 function CustomTimePicker({
@@ -78,14 +78,19 @@ function CustomTimePicker({
 	customDateTimeVisible,
 	setCustomDTPickerVisible,
 	onCustomDateHandler,
-	handleGoLive,
-	onTimeChange,
+	onGoLive,
+	onExitLiveLogs,
+	showLiveLogs,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
 		setSelectedTimePlaceholderValue,
 	] = useState('Select / Enter Time Range');

+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
 	const [inputValue, setInputValue] = useState('');
 	const [inputStatus, setInputStatus] = useState<'' | 'error' | 'success'>('');
 	const [inputErrorMessage, setInputErrorMessage] = useState<string | null>(
@@ -164,9 +169,13 @@ function CustomTimePicker({
 	};

 	useEffect(() => {
-		const value = getSelectedTimeRangeLabel(selectedTime, selectedValue);
-		setSelectedTimePlaceholderValue(value);
-	}, [selectedTime, selectedValue]);
+		if (showLiveLogs) {
+			setSelectedTimePlaceholderValue('Live');
+		} else {
+			const value = getSelectedTimeRangeLabel(selectedTime, selectedValue);
+			setSelectedTimePlaceholderValue(value);
+		}
+	}, [selectedTime, selectedValue, showLiveLogs]);

 	const hide = (): void => {
 		setOpen(false);
@@ -256,6 +265,11 @@ function CustomTimePicker({
 	};

 	const handleSelect = (label: string, value: string): void => {
+		if (label === 'Custom') {
+			setCustomDTPickerVisible?.(true);
+			return;
+		}
+
 		onSelect(value);
 		setSelectedTimePlaceholderValue(label);
 		setInputStatus('');
@@ -318,84 +332,118 @@ function CustomTimePicker({
 		);
 	};

+	const getTooltipTitle = (): string => {
+		if (selectedTime === 'custom' && inputValue === '' && !open) {
+			return `${dayjs(minTime / 1000_000)
+				.tz(timezone.value)
+				.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)} - ${dayjs(
+				maxTime / 1000_000,
+			)
+				.tz(timezone.value)
+				.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)}`;
+		}
+
+		return '';
+	};
+
+	const getInputPrefix = (): JSX.Element => {
+		if (showLiveLogs) {
+			return (
+				<div className="time-input-prefix">
+					<div className="live-dot-icon" />
+				</div>
+			);
+		}
+
+		return (
+			<div className="time-input-prefix">
+				{inputValue && inputStatus === 'success' ? (
+					<CheckCircle size={14} color="#51E7A8" />
+				) : (
+					<Tooltip title="Enter time in format (e.g., 1m, 2h, 3d, 4w)">
+						<Clock size={14} className="cursor-pointer" />
+					</Tooltip>
+				)}
+			</div>
+		);
+	};
+
 	return (
 		<div className="custom-time-picker">
-			<Popover
-				className={cx(
-					'timeSelection-input-container',
-					selectedTime === 'custom' && inputValue === '' ? 'custom-time' : '',
-				)}
-				placement="bottomRight"
-				getPopupContainer={popupContainer}
-				rootClassName="date-time-root"
-				content={
-					newPopover ? (
-						<CustomTimePickerPopoverContent
-							setIsOpen={setOpen}
-							customDateTimeVisible={defaultTo(customDateTimeVisible, false)}
-							setCustomDTPickerVisible={defaultTo(setCustomDTPickerVisible, noop)}
-							onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
-							onSelectHandler={handleSelect}
-							handleGoLive={defaultTo(handleGoLive, noop)}
-							options={items}
-							selectedTime={selectedTime}
-							activeView={activeView}
-							setActiveView={setActiveView}
-							setIsOpenedFromFooter={setIsOpenedFromFooter}
-							isOpenedFromFooter={isOpenedFromFooter}
-							onTimeChange={onTimeChange}
-						/>
-					) : (
-						content
-					)
-				}
-				arrow={false}
-				trigger="click"
-				open={open}
-				onOpenChange={handleOpenChange}
-				style={{
-					padding: 0,
-				}}
-			>
-				<Input
-					className="timeSelection-input"
-					type="text"
-					status={inputValue && inputStatus === 'error' ? 'error' : ''}
-					placeholder={
-						isInputFocused
-							? 'Time Format (1m or 2h or 3d or 4w)'
-							: selectedTimePlaceholderValue
-					}
-					value={inputValue}
-					onFocus={handleFocus}
-					onBlur={handleBlur}
-					onChange={handleInputChange}
-					data-1p-ignore
-					prefix={
-						inputValue && inputStatus === 'success' ? (
-							<CheckCircle size={14} color="#51E7A8" />
+			<Tooltip title={getTooltipTitle()} placement="top">
+				<Popover
+					className={cx(
+						'timeSelection-input-container',
+						selectedTime === 'custom' && inputValue === '' ? 'custom-time' : '',
+					)}
+					placement="bottomRight"
+					getPopupContainer={popupContainer}
+					rootClassName="date-time-root"
+					content={
+						newPopover ? (
+							<CustomTimePickerPopoverContent
+								setIsOpen={setOpen}
+								customDateTimeVisible={defaultTo(customDateTimeVisible, false)}
+								setCustomDTPickerVisible={defaultTo(setCustomDTPickerVisible, noop)}
+								onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
+								onSelectHandler={handleSelect}
+								onGoLive={defaultTo(onGoLive, noop)}
+								onExitLiveLogs={defaultTo(onExitLiveLogs, noop)}
+								options={items}
+								selectedTime={selectedTime}
+								activeView={activeView}
+								setActiveView={setActiveView}
+								setIsOpenedFromFooter={setIsOpenedFromFooter}
+								isOpenedFromFooter={isOpenedFromFooter}
+							/>
 						) : (
-							<Tooltip title="Enter time in format (e.g., 1m, 2h, 3d, 4w)">
-								<Clock size={14} />
-							</Tooltip>
+							content
 						)
 					}
-					suffix={
-						<>
-							{!!isTimezoneOverridden && activeTimezoneOffset && (
-								<div className="timezone-badge" onClick={handleTimezoneHintClick}>
-									<span>{activeTimezoneOffset}</span>
-								</div>
-							)}
-							<ChevronDown
-								size={14}
-								onClick={(): void => handleViewChange('datetime')}
-							/>
-						</>
-					}
-				/>
-			</Popover>
-
+					arrow={false}
+					trigger="click"
+					open={open}
+					onOpenChange={handleOpenChange}
+					style={{
+						padding: 0,
+					}}
+				>
+					<Input
+						className="timeSelection-input"
+						type="text"
+						status={inputValue && inputStatus === 'error' ? 'error' : ''}
+						placeholder={
+							isInputFocused
+								? 'Time Format (1m or 2h or 3d or 4w)'
+								: selectedTimePlaceholderValue
+						}
+						value={inputValue}
+						onFocus={handleFocus}
+						onClick={handleFocus}
+						onBlur={handleBlur}
+						onChange={handleInputChange}
+						data-1p-ignore
+						prefix={getInputPrefix()}
+						suffix={
+							<div className="time-input-suffix">
+								{!!isTimezoneOverridden && activeTimezoneOffset && (
+									<div className="timezone-badge" onClick={handleTimezoneHintClick}>
+										<span>{activeTimezoneOffset}</span>
+									</div>
+								)}
+								<ChevronDown
+									size={14}
+									className="cursor-pointer time-input-suffix-icon-badge"
+									onClick={(e): void => {
+										e.stopPropagation();
+										handleViewChange('datetime');
+									}}
+								/>
+							</div>
+						}
+					/>
+				</Popover>
+			</Tooltip>
 			{inputStatus === 'error' && inputErrorMessage && (
 				<Typography.Title level={5} className="valid-format-error">
 					{inputErrorMessage}
@@ -412,7 +460,8 @@ CustomTimePicker.defaultProps = {
 	customDateTimeVisible: false,
 	setCustomDTPickerVisible: noop,
 	onCustomDateHandler: noop,
-	handleGoLive: noop,
+	onGoLive: noop,
 	onCustomTimeStatusUpdate: noop,
-	onTimeChange: undefined,
+	onExitLiveLogs: noop,
+	showLiveLogs: false,
 };
--- a/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
+++ b/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
@@ -4,21 +4,30 @@ import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
+import DatePickerV2 from 'components/DatePickerV2/DatePickerV2';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
-	CustomTimeType,
 	LexicalContext,
 	Option,
 	RelativeDurationSuggestionOptions,
-	Time,
 } from 'container/TopNav/DateTimeSelectionV2/config';
+import dayjs from 'dayjs';
 import { Clock, PenLine } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
-import { Dispatch, SetStateAction, useMemo } from 'react';
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
 import { useLocation } from 'react-router-dom';
+import { getCustomTimeRanges } from 'utils/customTimeRangeUtils';

-import RangePickerModal from './RangePickerModal';
 import TimezonePicker from './TimezonePicker';

 interface CustomTimePickerPopoverContentProps {
@@ -31,16 +40,21 @@ interface CustomTimePickerPopoverContentProps {
 		lexicalContext?: LexicalContext,
 	) => void;
 	onSelectHandler: (label: string, value: string) => void;
-	handleGoLive: () => void;
+	onGoLive: () => void;
 	selectedTime: string;
 	activeView: 'datetime' | 'timezone';
 	setActiveView: Dispatch<SetStateAction<'datetime' | 'timezone'>>;
 	isOpenedFromFooter: boolean;
 	setIsOpenedFromFooter: Dispatch<SetStateAction<boolean>>;
-	onTimeChange?: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
+	onExitLiveLogs: () => void;
+}
+
+interface RecentlyUsedDateTimeRange {
+	label: string;
+	value: number;
+	timestamp: number;
+	from: string;
+	to: string;
 }

 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -51,22 +65,68 @@ function CustomTimePickerPopoverContent({
 	setCustomDTPickerVisible,
 	onCustomDateHandler,
 	onSelectHandler,
-	handleGoLive,
+	onGoLive,
 	selectedTime,
 	activeView,
 	setActiveView,
 	isOpenedFromFooter,
 	setIsOpenedFromFooter,
-	onTimeChange,
+	onExitLiveLogs,
 }: CustomTimePickerPopoverContentProps): JSX.Element {
 	const { pathname } = useLocation();

 	const isLogsExplorerPage = useMemo(() => pathname === ROUTES.LOGS_EXPLORER, [
 		pathname,
 	]);
+
+	const url = new URLSearchParams(window.location.search);
+
+	let panelTypeFromURL = url.get(QueryParams.panelTypes);
+
+	try {
+		panelTypeFromURL = JSON.parse(panelTypeFromURL as string);
+	} catch {
+		// fallback → leave as-is
+	}
+
+	const isLogsListView =
+		panelTypeFromURL !== 'table' && panelTypeFromURL !== 'graph'; // we do not select list view in the url
+
 	const { timezone } = useTimezone();
 	const activeTimezoneOffset = timezone.offset;

+	const [recentlyUsedTimeRanges, setRecentlyUsedTimeRanges] = useState<
+		RecentlyUsedDateTimeRange[]
+	>([]);
+
+	const handleExitLiveLogs = useCallback((): void => {
+		if (isLogsExplorerPage) {
+			onExitLiveLogs();
+		}
+	}, [isLogsExplorerPage, onExitLiveLogs]);
+
+	useEffect(() => {
+		if (!customDateTimeVisible) {
+			const customTimeRanges = getCustomTimeRanges();
+
+			const formattedCustomTimeRanges: RecentlyUsedDateTimeRange[] = customTimeRanges.map(
+				(range) => ({
+					label: `${dayjs(range.from)
+						.tz(timezone.value)
+						.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)} - ${dayjs(range.to)
+						.tz(timezone.value)
+						.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)}`,
+					from: range.from,
+					to: range.to,
+					value: range.timestamp,
+					timestamp: range.timestamp,
+				}),
+			);
+
+			setRecentlyUsedTimeRanges(formattedCustomTimeRanges);
+		}
+	}, [customDateTimeVisible, timezone.value]);
+
 	function getTimeChips(options: Option[]): JSX.Element {
 		return (
 			<div className="relative-date-time-section">
@@ -76,6 +136,7 @@ function CustomTimePickerPopoverContent({
 						className="time-btns"
 						key={option.label + option.value}
 						onClick={(): void => {
+							handleExitLiveLogs();
 							onSelectHandler(option.label, option.value);
 						}}
 					>
@@ -109,53 +170,87 @@ function CustomTimePickerPopoverContent({
 		);
 	}

+	const handleGoLive = (): void => {
+		onGoLive();
+		setIsOpen(false);
+	};
+
 	return (
 		<>
 			<div className="date-time-popover">
-				<div className="date-time-options">
-					{isLogsExplorerPage && (
-						<Button className="data-time-live" type="text" onClick={handleGoLive}>
-							Live
-						</Button>
-					)}
-					{options.map((option) => (
-						<Button
-							type="text"
-							key={option.label + option.value}
-							onClick={(): void => {
-								onSelectHandler(option.label, option.value);
-							}}
-							className={cx(
-								'date-time-options-btn',
-								customDateTimeVisible
-									? option.value === 'custom' && 'active'
-									: selectedTime === option.value && 'active',
-							)}
-						>
-							{option.label}
-						</Button>
-					))}
-				</div>
+				{!customDateTimeVisible && (
+					<div className="date-time-options">
+						{isLogsExplorerPage && isLogsListView && (
+							<Button className="data-time-live" type="text" onClick={handleGoLive}>
+								Live
+							</Button>
+						)}
+						{options.map((option) => (
+							<Button
+								type="text"
+								key={option.label + option.value}
+								onClick={(): void => {
+									handleExitLiveLogs();
+									onSelectHandler(option.label, option.value);
+								}}
+								className={cx(
+									'date-time-options-btn',
+									customDateTimeVisible
+										? option.value === 'custom' && 'active'
+										: selectedTime === option.value && 'active',
+								)}
+							>
+								{option.label}
+							</Button>
+						))}
+					</div>
+				)}
 				<div
 					className={cx(
 						'relative-date-time',
-						selectedTime === 'custom' || customDateTimeVisible
-							? 'date-picker'
-							: 'relative-times',
+						customDateTimeVisible ? 'date-picker' : 'relative-times',
 					)}
 				>
-					{selectedTime === 'custom' || customDateTimeVisible ? (
-						<RangePickerModal
-							setCustomDTPickerVisible={setCustomDTPickerVisible}
+					{customDateTimeVisible ? (
+						<DatePickerV2
+							onSetCustomDTPickerVisible={setCustomDTPickerVisible}
 							setIsOpen={setIsOpen}
 							onCustomDateHandler={onCustomDateHandler}
-							selectedTime={selectedTime}
-							onTimeChange={onTimeChange}
 						/>
 					) : (
-						<div className="relative-times-container">
-							<div className="time-heading">RELATIVE TIMES</div>
-							<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
+						<div className="time-selector-container">
+							<div className="relative-times-container">
+								<div className="time-heading">RELATIVE TIMES</div>
+								<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
+							</div>
+
+							<div className="recently-used-container">
+								<div className="time-heading">RECENTLY USED</div>
+								<div className="recently-used-range">
+									{recentlyUsedTimeRanges.map((range: RecentlyUsedDateTimeRange) => (
+										<div
+											className="recently-used-range-item"
+											role="button"
+											tabIndex={0}
+											onKeyDown={(e): void => {
+												if (e.key === 'Enter' || e.key === ' ') {
+													handleExitLiveLogs();
+													onCustomDateHandler([dayjs(range.from), dayjs(range.to)]);
+													setIsOpen(false);
+												}
+											}}
+											key={range.value}
+											onClick={(): void => {
+												handleExitLiveLogs();
+												onCustomDateHandler([dayjs(range.from), dayjs(range.to)]);
+												setIsOpen(false);
+											}}
+										>
+											{range.label}
+										</div>
+									))}
+								</div>
+							</div>
 						</div>
 					)}
 				</div>
@@ -189,8 +284,4 @@ function CustomTimePickerPopoverContent({
 	);
 }

-CustomTimePickerPopoverContent.defaultProps = {
-	onTimeChange: undefined,
-};
-
 export default CustomTimePickerPopoverContent;
--- a/frontend/src/components/DatePickerV2/DatePickerV2.styles.scss
+++ b/frontend/src/components/DatePickerV2/DatePickerV2.styles.scss
@@ -0,0 +1,114 @@
+.date-picker-v2-container {
+	display: flex;
+	flex-direction: row;
+}
+
+.custom-date-time-picker-v2 {
+	padding: 12px;
+
+	.periscope-calendar {
+		border-radius: 4px;
+		border: none !important;
+		background: none !important;
+		padding: 8px 0 !important;
+	}
+
+	.periscope-calendar-day {
+		background: none !important;
+
+		&.periscope-calendar-today {
+			&.text-accent-foreground {
+				color: var(--bg-vanilla-100) !important;
+			}
+		}
+
+		button {
+			&:hover {
+				background-color: var(--bg-robin-500) !important;
+				color: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+
+	.custom-time-selector {
+		display: flex;
+		flex-direction: row;
+		gap: 16px;
+		align-items: center;
+		justify-content: space-between;
+
+		.time-input {
+			border-radius: 4px;
+			border: none !important;
+			background: none !important;
+			padding: 8px 4px !important;
+			color: var(--bg-vanilla-100) !important;
+
+			&::-webkit-calendar-picker-indicator {
+				display: none !important;
+				-webkit-appearance: none;
+				appearance: none;
+			}
+
+			&:focus {
+				border: none !important;
+				outline: none !important;
+				box-shadow: none !important;
+			}
+
+			&:focus-visible {
+				border: none !important;
+				outline: none !important;
+				box-shadow: none !important;
+			}
+		}
+	}
+
+	.custom-date-time-picker-footer {
+		display: flex;
+		flex-direction: row;
+		gap: 8px;
+		align-items: center;
+		justify-content: flex-end;
+		margin-top: 16px;
+
+		.next-btn {
+			width: 80px;
+		}
+
+		.clear-btn {
+			width: 80px;
+		}
+	}
+}
+
+.invalid-date-range-tooltip {
+	.ant-tooltip-inner {
+		color: var(--bg-sakura-500) !important;
+	}
+}
+
+.lightMode {
+	.custom-date-time-picker-v2 {
+		.periscope-calendar-day {
+			&.periscope-calendar-today {
+				&.text-accent-foreground {
+					color: var(--bg-ink-500) !important;
+				}
+			}
+
+			button {
+				&:hover {
+					background-color: var(--bg-robin-500) !important;
+					color: var(--bg-ink-500) !important;
+				}
+			}
+		}
+
+		.custom-time-selector {
+			.time-input {
+				color: var(--bg-ink-500) !important;
+			}
+		}
+	}
+}
--- a/frontend/src/components/DatePickerV2/DatePickerV2.tsx
+++ b/frontend/src/components/DatePickerV2/DatePickerV2.tsx
@@ -0,0 +1,311 @@
+import './DatePickerV2.styles.scss';
+
+import { Calendar } from '@signozhq/calendar';
+import { Input } from '@signozhq/input';
+import { Button, Tooltip } from 'antd';
+import cx from 'classnames';
+import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
+import { LexicalContext } from 'container/TopNav/DateTimeSelectionV2/config';
+import dayjs, { Dayjs } from 'dayjs';
+import { CornerUpLeft, MoveRight } from 'lucide-react';
+import { useTimezone } from 'providers/Timezone';
+import { useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { addCustomTimeRange } from 'utils/customTimeRangeUtils';
+
+function DatePickerV2({
+	onSetCustomDTPickerVisible,
+	setIsOpen,
+	onCustomDateHandler,
+}: {
+	onSetCustomDTPickerVisible: (visible: boolean) => void;
+	setIsOpen: (isOpen: boolean) => void;
+	onCustomDateHandler: (
+		dateTimeRange: DateTimeRangeType,
+		lexicalContext?: LexicalContext,
+	) => void;
+}): JSX.Element {
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const timeInputRef = useRef<HTMLInputElement>(null);
+
+	const { timezone } = useTimezone();
+
+	const [selectedDateTimeFor, setSelectedDateTimeFor] = useState<'to' | 'from'>(
+		'from',
+	);
+
+	const [selectedFromDateTime, setSelectedFromDateTime] = useState<Dayjs | null>(
+		dayjs(minTime / 1000_000).tz(timezone.value),
+	);
+
+	const [selectedToDateTime, setSelectedToDateTime] = useState<Dayjs | null>(
+		dayjs(maxTime / 1000_000).tz(timezone.value),
+	);
+
+	const handleNext = (): void => {
+		if (selectedDateTimeFor === 'to') {
+			onCustomDateHandler([selectedFromDateTime, selectedToDateTime]);
+
+			addCustomTimeRange([selectedFromDateTime, selectedToDateTime]);
+
+			setIsOpen(false);
+			onSetCustomDTPickerVisible(false);
+			setSelectedDateTimeFor('from');
+		} else {
+			setSelectedDateTimeFor('to');
+		}
+	};
+
+	const handleDateChange = (date: Date | undefined): void => {
+		if (!date) {
+			return;
+		}
+
+		if (selectedDateTimeFor === 'from') {
+			const prevFromDateTime = selectedFromDateTime;
+
+			const newDate = dayjs(date);
+
+			const updatedFromDateTime = prevFromDateTime
+				? prevFromDateTime
+						.year(newDate.year())
+						.month(newDate.month())
+						.date(newDate.date())
+				: dayjs(date).tz(timezone.value);
+
+			setSelectedFromDateTime(updatedFromDateTime);
+		} else {
+			// eslint-disable-next-line sonarjs/no-identical-functions
+			setSelectedToDateTime((prev) => {
+				const newDate = dayjs(date);
+
+				// Update only the date part, keeping time from existing state
+				return prev
+					? prev.year(newDate.year()).month(newDate.month()).date(newDate.date())
+					: dayjs(date).tz(timezone.value);
+			});
+		}
+
+		// focus the time input
+		timeInputRef?.current?.focus();
+	};
+
+	const handleTimeChange = (time: string): void => {
+		// time should have format HH:mm:ss
+		if (!/^\d{2}:\d{2}:\d{2}$/.test(time)) {
+			return;
+		}
+
+		if (selectedDateTimeFor === 'from') {
+			setSelectedFromDateTime((prev) => {
+				if (prev) {
+					return prev
+						.set('hour', parseInt(time.split(':')[0], 10))
+						.set('minute', parseInt(time.split(':')[1], 10))
+						.set('second', parseInt(time.split(':')[2], 10));
+				}
+
+				return prev;
+			});
+		}
+		if (selectedDateTimeFor === 'to') {
+			// eslint-disable-next-line sonarjs/no-identical-functions
+			setSelectedToDateTime((prev) => {
+				if (prev) {
+					return prev
+						.set('hour', parseInt(time.split(':')[0], 10))
+						.set('minute', parseInt(time.split(':')[1], 10))
+						.set('second', parseInt(time.split(':')[2], 10));
+				}
+
+				return prev;
+			});
+		}
+	};
+
+	const getDefaultMonth = (): Date => {
+		let defaultDate = null;
+
+		if (selectedDateTimeFor === 'from') {
+			defaultDate = selectedFromDateTime?.toDate();
+		} else if (selectedDateTimeFor === 'to') {
+			defaultDate = selectedToDateTime?.toDate();
+		}
+
+		return defaultDate ?? new Date();
+	};
+
+	const isValidRange = (): boolean => {
+		if (selectedDateTimeFor === 'to') {
+			return selectedToDateTime?.isAfter(selectedFromDateTime) ?? false;
+		}
+
+		return true;
+	};
+
+	const handleBack = (): void => {
+		setSelectedDateTimeFor('from');
+	};
+
+	const handleHideCustomDTPicker = (): void => {
+		onSetCustomDTPickerVisible(false);
+	};
+
+	const handleSelectDateTimeFor = (selectedDateTimeFor: 'to' | 'from'): void => {
+		setSelectedDateTimeFor(selectedDateTimeFor);
+	};
+
+	return (
+		<div className="date-picker-v2-container">
+			<div className="date-time-custom-options-container">
+				<div
+					className="back-btn"
+					onClick={handleHideCustomDTPicker}
+					role="button"
+					tabIndex={0}
+					onKeyDown={(e): void => {
+						if (e.key === 'Enter') {
+							handleHideCustomDTPicker();
+						}
+					}}
+				>
+					<CornerUpLeft size={16} />
+					<span>Back</span>
+				</div>
+
+				<div className="date-time-custom-options">
+					<div
+						role="button"
+						tabIndex={0}
+						onKeyDown={(e): void => {
+							if (e.key === 'Enter') {
+								handleSelectDateTimeFor('from');
+							}
+						}}
+						className={cx(
+							'date-time-custom-option-from',
+							selectedDateTimeFor === 'from' && 'active',
+						)}
+						onClick={(): void => {
+							handleSelectDateTimeFor('from');
+						}}
+					>
+						<div className="date-time-custom-option-from-title">FROM</div>
+						<div className="date-time-custom-option-from-value">
+							{selectedFromDateTime?.format('YYYY-MM-DD HH:mm:ss')}
+						</div>
+					</div>
+					<div
+						role="button"
+						tabIndex={0}
+						onKeyDown={(e): void => {
+							if (e.key === 'Enter') {
+								handleSelectDateTimeFor('to');
+							}
+						}}
+						className={cx(
+							'date-time-custom-option-to',
+							selectedDateTimeFor === 'to' && 'active',
+						)}
+						onClick={(): void => {
+							handleSelectDateTimeFor('to');
+						}}
+					>
+						<div className="date-time-custom-option-to-title">TO</div>
+						<div className="date-time-custom-option-to-value">
+							{selectedToDateTime?.format('YYYY-MM-DD HH:mm:ss')}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className="custom-date-time-picker-v2">
+				<Calendar
+					mode="single"
+					required
+					selected={
+						selectedDateTimeFor === 'from'
+							? selectedFromDateTime?.toDate()
+							: selectedToDateTime?.toDate()
+					}
+					key={selectedDateTimeFor + selectedDateTimeFor}
+					onSelect={handleDateChange}
+					defaultMonth={getDefaultMonth()}
+					disabled={(current): boolean => {
+						if (selectedDateTimeFor === 'to') {
+							// disable dates after today and before selectedFromDateTime
+							const currentDay = dayjs(current);
+							return currentDay.isAfter(dayjs()) || false;
+						}
+
+						if (selectedDateTimeFor === 'from') {
+							// disable dates after selectedToDateTime
+
+							return dayjs(current).isAfter(dayjs()) || false;
+						}
+
+						return false;
+					}}
+					className="rounded-md border"
+					navLayout="after"
+				/>
+
+				<div className="custom-time-selector">
+					<label className="text-xs font-normal block" htmlFor="time-picker">
+						Timestamp
+					</label>
+
+					<MoveRight size={16} />
+
+					<div className="time-input-container">
+						<Input
+							type="time"
+							ref={timeInputRef}
+							className="time-input"
+							value={
+								selectedDateTimeFor === 'from'
+									? selectedFromDateTime?.format('HH:mm:ss')
+									: selectedToDateTime?.format('HH:mm:ss')
+							}
+							onChange={(e): void => handleTimeChange(e.target.value)}
+							step="1"
+						/>
+					</div>
+				</div>
+
+				<div className="custom-date-time-picker-footer">
+					{selectedDateTimeFor === 'to' && (
+						<Button
+							className="periscope-btn secondary clear-btn"
+							type="default"
+							onClick={handleBack}
+						>
+							Back
+						</Button>
+					)}
+					<Tooltip
+						title={
+							!isValidRange() ? 'Invalid range: TO date should be after FROM date' : ''
+						}
+						overlayClassName="invalid-date-range-tooltip"
+					>
+						<Button
+							className="periscope-btn primary next-btn"
+							type="primary"
+							onClick={handleNext}
+							disabled={!isValidRange()}
+						>
+							{selectedDateTimeFor === 'from' ? 'Next' : 'Apply'}
+						</Button>
+					</Tooltip>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default DatePickerV2;
--- a/frontend/src/components/HostMetricsDetail/HostMetricTraces/constants.ts
+++ b/frontend/src/components/HostMetricsDetail/HostMetricTraces/constants.ts
@@ -55,37 +55,31 @@ export const selectedColumns: BaseAutocompleteData[] = [
 		key: 'timestamp',
 		dataType: DataTypes.String,
 		type: 'tag',
-		isColumn: true,
 	},
 	{
 		key: 'serviceName',
 		dataType: DataTypes.String,
 		type: 'tag',
-		isColumn: true,
 	},
 	{
 		key: 'name',
 		dataType: DataTypes.String,
 		type: 'tag',
-		isColumn: true,
 	},
 	{
 		key: 'durationNano',
 		dataType: DataTypes.Float64,
 		type: 'tag',
-		isColumn: true,
 	},
 	{
 		key: 'httpMethod',
 		dataType: DataTypes.String,
 		type: 'tag',
-		isColumn: true,
 	},
 	{
 		key: 'responseStatusCode',
 		dataType: DataTypes.String,
 		type: 'tag',
-		isColumn: true,
 	},
 ];

@@ -108,9 +102,7 @@ export const getHostTracesQueryPayload = (
 						id: '------false',
 						dataType: DataTypes.EMPTY,
 						key: '',
-						isColumn: false,
 						type: '',
-						isJSON: false,
 					},
 					timeAggregation: 'rate',
 					spaceAggregation: 'sum',
@@ -133,6 +125,7 @@ export const getHostTracesQueryPayload = (
 				},
 			],
 			queryFormulas: [],
+			queryTraceOperator: [],
 		},
 		id: '572f1d91-6ac0-46c0-b726-c21488b34434',
 		queryType: EQueryType.QUERY_BUILDER,
@@ -154,8 +147,6 @@ export const getHostTracesQueryPayload = (
 				key: 'serviceName',
 				dataType: 'string',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'serviceName--string--tag--true',
 				isIndexed: false,
 			},
@@ -163,8 +154,6 @@ export const getHostTracesQueryPayload = (
 				key: 'name',
 				dataType: 'string',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'name--string--tag--true',
 				isIndexed: false,
 			},
@@ -172,8 +161,6 @@ export const getHostTracesQueryPayload = (
 				key: 'durationNano',
 				dataType: 'float64',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'durationNano--float64--tag--true',
 				isIndexed: false,
 			},
@@ -181,8 +168,6 @@ export const getHostTracesQueryPayload = (
 				key: 'httpMethod',
 				dataType: 'string',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'httpMethod--string--tag--true',
 				isIndexed: false,
 			},
@@ -190,8 +175,6 @@ export const getHostTracesQueryPayload = (
 				key: 'responseStatusCode',
 				dataType: 'string',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'responseStatusCode--string--tag--true',
 				isIndexed: false,
 			},
--- a/frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss
+++ b/frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss
@@ -169,6 +169,7 @@
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 		}
 	}
+
 	.ant-drawer-close {
 		padding: 0px;
 	}
--- a/frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx
+++ b/frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx
@@ -119,8 +119,6 @@ function HostMetricsDetails({
 						key: 'host.name',
 						dataType: DataTypes.String,
 						type: 'resource',
-						isColumn: false,
-						isJSON: false,
 						id: 'host.name--string--resource--false',
 					},
 					op: '=',
--- a/frontend/src/components/HostMetricsDetail/HostMetricsLogs/constants.ts
+++ b/frontend/src/components/HostMetricsDetail/HostMetricsLogs/constants.ts
@@ -26,9 +26,7 @@ export const getHostLogsQueryPayload = (
 						id: '------false',
 						dataType: DataTypes.String,
 						key: '',
-						isColumn: false,
 						type: '',
-						isJSON: false,
 					},
 					timeAggregation: 'rate',
 					spaceAggregation: 'sum',
@@ -53,6 +51,7 @@ export const getHostLogsQueryPayload = (
 				},
 			],
 			queryFormulas: [],
+			queryTraceOperator: [],
 		},
 		id: uuidv4(),
 		queryType: EQueryType.QUERY_BUILDER,
--- a/frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx
+++ b/frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx
@@ -78,7 +78,7 @@ function Metrics({
 				signal,
 			}: QueryFunctionContext): Promise<
 				SuccessResponse<MetricRangePayloadProps>
-			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, signal),
+			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, undefined, signal),
 			enabled: !!payload && visibilities[index],
 			keepPreviousData: true,
 		})),
--- a/frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx
+++ b/frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx
@@ -0,0 +1,50 @@
+import { Badge } from '@signozhq/badge';
+
+type BadgeColor =
+	| 'vanilla'
+	| 'robin'
+	| 'forest'
+	| 'amber'
+	| 'sienna'
+	| 'cherry'
+	| 'sakura'
+	| 'aqua';
+
+interface HttpStatusBadgeProps {
+	statusCode: string | number;
+}
+
+function getStatusCodeColor(statusCode: number): BadgeColor {
+	if (statusCode >= 200 && statusCode < 300) {
+		return 'forest'; // Success - green
+	}
+	if (statusCode >= 300 && statusCode < 400) {
+		return 'robin'; // Redirect - blue
+	}
+	if (statusCode >= 400 && statusCode < 500) {
+		return 'amber'; // Client error - amber
+	}
+	if (statusCode >= 500) {
+		return 'cherry'; // Server error - red
+	}
+	if (statusCode >= 100 && statusCode < 200) {
+		return 'vanilla'; // Informational - neutral
+	}
+	return 'robin'; // Default fallback
+}
+
+function HttpStatusBadge({
+	statusCode,
+}: HttpStatusBadgeProps): JSX.Element | null {
+	const numericStatusCode = Number(statusCode);
+
+	if (!numericStatusCode || numericStatusCode <= 0) {
+		return null;
+	}
+
+	const color = getStatusCodeColor(numericStatusCode);
+
+	return <Badge color={color}>{statusCode}</Badge>;
+}
+
+export default HttpStatusBadge;
--- a/frontend/src/components/InputWithLabel/InputWithLabel.tsx
+++ b/frontend/src/components/InputWithLabel/InputWithLabel.tsx
@@ -17,7 +17,7 @@ function InputWithLabel({
 	closeIcon,
 }: {
 	label: string;
-	initialValue?: string | number;
+	initialValue?: string | number | null;
 	placeholder: string;
 	type?: string;
 	onClose?: () => void;
@@ -49,6 +49,7 @@ function InputWithLabel({
 				value={inputValue}
 				onChange={handleChange}
 				name={label.toLowerCase()}
+				data-testid={`input-${label}`}
 			/>
 			{labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			{onClose && (
--- a/frontend/src/components/KBarCommandPalette/KBarCommandPalette.scss
+++ b/frontend/src/components/KBarCommandPalette/KBarCommandPalette.scss
@@ -0,0 +1,152 @@
+.kbar-command-palette__positioner {
+	position: fixed;
+	inset: 0;
+	display: flex;
+	align-items: flex-start;
+	justify-content: center;
+	padding: 1rem;
+	background: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(6px);
+	z-index: 50;
+}
+
+.kbar-command-palette__animator {
+	width: 100%;
+	max-width: 600px;
+}
+
+.kbar-command-palette__card {
+	background: var(--bg-ink-500);
+	color: var(--text-vanilla-100);
+	border-radius: 3px;
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.kbar-command-palette__search {
+	padding: 12px 16px;
+	font-size: 13px;
+	border: none;
+	border-bottom: 1px solid var(--border-ink-200);
+	color: var(--text-vanilla-100);
+	outline: none;
+	background-color: var(--bg-ink-500);
+}
+
+.kbar-command-palette__section {
+	padding: 8px 16px 4px;
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--text-robin-500);
+	font-family: 'Inter', sans-serif;
+	text-transform: uppercase;
+	letter-spacing: 0.02em;
+}
+
+.kbar-command-palette__item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 16px;
+	font-size: 13px;
+	cursor: pointer;
+	transition: background 0.15s ease;
+}
+
+.kbar-command-palette__item:hover,
+.kbar-command-palette__item--active {
+	background: var(--bg-ink-400);
+}
+
+.kbar-command-palette__icon {
+	flex-shrink: 0;
+	width: 18px;
+	height: 18px;
+	color: #444;
+}
+
+.kbar-command-palette__shortcut {
+	margin-left: auto;
+	display: flex;
+	gap: 4px;
+}
+
+.kbar-command-palette__key {
+	padding: 2px 6px;
+	font-size: 12px;
+	border-radius: 4px;
+	background: var(--bg-ink-300);
+	color: var(--text-vanilla-300);
+	text-transform: uppercase;
+	font-family: 'Space Mono', monospace;
+}
+
+.kbar-command-palette__results-container {
+	div {
+		&::-webkit-scrollbar {
+			width: 0.3rem;
+			height: 0.3rem;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg-slate-300);
+		}
+
+		&::-webkit-scrollbar-thumb:hover {
+			background: var(--bg-slate-200);
+		}
+	}
+}
+
+.lightMode {
+	.kbar-command-palette__positioner {
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	.kbar-command-palette__card {
+		background: #fff;
+		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+	}
+
+	.kbar-command-palette__search {
+		border-bottom: 1px solid #e5e5e5;
+		color: var(--text-ink-500);
+		background-color: var(--bg-vanilla-100);
+	}
+
+	.kbar-command-palette__item {
+		color: var(--text-ink-500);
+	}
+
+	.kbar-command-palette__item:hover,
+	.kbar-command-palette__item--active {
+		background: #f5f5f5;
+	}
+
+	.kbar-command-palette__icon {
+		color: #444;
+	}
+
+	.kbar-command-palette__key {
+		background: #eee;
+		color: #555;
+	}
+
+	.kbar-command-palette__results-container {
+		div {
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-vanilla-300);
+			}
+
+			&::-webkit-scrollbar-thumb:hover {
+				background: var(--bg-vanilla-300);
+			}
+		}
+	}
+}
--- a/frontend/src/components/KBarCommandPalette/KBarCommandPalette.tsx
+++ b/frontend/src/components/KBarCommandPalette/KBarCommandPalette.tsx
@@ -0,0 +1,69 @@
+import './KBarCommandPalette.scss';
+
+import {
+	KBarAnimator,
+	KBarPortal,
+	KBarPositioner,
+	KBarResults,
+	KBarSearch,
+	useMatches,
+} from 'kbar';
+
+function Results(): JSX.Element {
+	const { results } = useMatches();
+
+	const renderResults = ({
+		item,
+		active,
+	}: {
+		item: any;
+		active: boolean;
+	}): JSX.Element =>
+		typeof item === 'string' ? (
+			<div className="kbar-command-palette__section">{item}</div>
+		) : (
+			<div
+				className={`kbar-command-palette__item ${
+					active ? 'kbar-command-palette__item--active' : ''
+				}`}
+			>
+				{item.icon}
+				<span>{item.name}</span>
+				{item.shortcut?.length ? (
+					<span className="kbar-command-palette__shortcut">
+						{item.shortcut.map((sc: string) => (
+							<kbd key={sc} className="kbar-command-palette__key">
+								{sc}
+							</kbd>
+						))}
+					</span>
+				) : null}
+			</div>
+		);
+
+	return (
+		<div className="kbar-command-palette__results-container">
+			<KBarResults items={results} onRender={renderResults} />
+		</div>
+	);
+}
+
+function KBarCommandPalette(): JSX.Element {
+	return (
+		<KBarPortal>
+			<KBarPositioner className="kbar-command-palette__positioner">
+				<KBarAnimator className="kbar-command-palette__animator">
+					<div className="kbar-command-palette__card">
+						<KBarSearch
+							className="kbar-command-palette__search"
+							placeholder="Search or type a command..."
+						/>
+						<Results />
+					</div>
+				</KBarAnimator>
+			</KBarPositioner>
+		</KBarPortal>
+	);
+}
+
+export default KBarCommandPalette;
--- a/frontend/src/components/LogDetail/LogDetail.interfaces.ts
+++ b/frontend/src/components/LogDetail/LogDetail.interfaces.ts
@@ -10,11 +10,7 @@ import { VIEWS } from './constants';
 export type LogDetailProps = {
 	log: ILog | null;
 	selectedTab: VIEWS;
-	onGroupByAttribute?: (
-		fieldKey: string,
-		isJSON?: boolean,
-		dataType?: DataTypes,
-	) => Promise<void>;
+	onGroupByAttribute?: (fieldKey: string, dataType?: DataTypes) => Promise<void>;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -23,6 +23,7 @@ import {
 } from 'container/LogDetailedView/utils';
 import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
 import { useOptionsMenu } from 'container/OptionsMenu';
+import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
@@ -39,7 +40,7 @@ import {
 	TextSelect,
 	X,
 } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { AppState } from 'store/reducers';
@@ -94,6 +95,8 @@ function LogDetailInner({

 	const { notifications } = useNotifications();

+	const { onLogCopy } = useCopyLogLink(log?.id);
+
 	const LogJsonData = log ? aggregateAttributesResourcesToString(log) : '';

 	const handleModeChange = (e: RadioChangeEvent): void => {
@@ -146,6 +149,34 @@ function LogDetailInner({
 		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`);
 	};

+	const handleQueryExpressionChange = useCallback(
+		(value: string, queryIndex: number) => {
+			// update the query at the given index
+			setContextQuery((prev) => {
+				if (!prev) return prev;
+
+				return {
+					...prev,
+					builder: {
+						...prev.builder,
+						queryData: prev.builder.queryData.map((query, idx) =>
+							idx === queryIndex
+								? {
+										...query,
+										filter: {
+											...query.filter,
+											expression: value,
+										},
+								  }
+								: query,
+						),
+					},
+				};
+			});
+		},
+		[],
+	);
+
 	const handleRunQuery = (expression: string): void => {
 		let updatedContextQuery = cloneDeep(contextQuery);

@@ -305,11 +336,19 @@ function LogDetailInner({
 						onClick={handleFilterVisible}
 					/>
 				)}
+
+				<Tooltip title="Copy Log Link" placement="left" aria-label="Copy Log Link">
+					<Button
+						className="action-btn"
+						icon={<Copy size={16} />}
+						onClick={onLogCopy}
+					/>
+				</Tooltip>
 			</div>
 			{isFilterVisible && contextQuery?.builder.queryData[0] && (
 				<div className="log-detail-drawer-query-container">
 					<QuerySearch
-						onChange={(): void => {}}
+						onChange={(value): void => handleQueryExpressionChange(value, 0)}
 						dataSource={DataSource.LOGS}
 						queryData={contextQuery?.builder.queryData[0]}
 						onRun={handleRunQuery}
--- a/frontend/src/components/Logs/AddToQueryHOC.tsx
+++ b/frontend/src/components/Logs/AddToQueryHOC.tsx
@@ -17,7 +17,7 @@ function AddToQueryHOC({
 }: AddToQueryHOCProps): JSX.Element {
 	const handleQueryAdd = (event: MouseEvent<HTMLDivElement>): void => {
 		event.stopPropagation();
-		onAddToQuery(fieldKey, fieldValue, OPERATORS['='], undefined, dataType);
+		onAddToQuery(fieldKey, fieldValue, OPERATORS['='], dataType);
 	};

 	const popOverContent = useMemo(() => <span>Add to query: {fieldKey}</span>, [
@@ -41,7 +41,6 @@ export interface AddToQueryHOCProps {
 		fieldKey: string,
 		fieldValue: string,
 		operator: string,
-		isJSON?: boolean,
 		dataType?: DataTypes,
 	) => void;
 	fontSize: FontSize;
--- a/frontend/src/components/Logs/ListLogView/index.tsx
+++ b/frontend/src/components/Logs/ListLogView/index.tsx
@@ -208,7 +208,11 @@ function ListLogView({
 				fontSize={fontSize}
 			>
 				<div className="log-line">
-					<LogStateIndicator type={logType} fontSize={fontSize} />
+					<LogStateIndicator
+						fontSize={fontSize}
+						severityText={logData.severity_text}
+						severityNumber={logData.severity_number}
+					/>
 					<div>
 						<LogContainer fontSize={fontSize}>
 							{updatedSelecedFields.some((field) => field.name === 'body') && (
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
@@ -7,7 +7,6 @@
 		height: 100%;
 		width: 3px;
 		border-radius: 50px;
-		background-color: transparent;

 		&.small {
 			min-height: 16px;
@@ -21,24 +20,107 @@
 			min-height: 24px;
 		}

-		&.INFO {
-			background-color: var(--bg-robin-500);
+		// Severity variant CSS classes using design tokens
+		// Trace variants -
+		&.severity-trace-0 {
+			background-color: var(--bg-forest-600);
 		}
-		&.WARNING,
-		&.WARN {
-			background-color: var(--bg-amber-500);
+		&.severity-trace-1 {
+			background-color: var(--bg-forest-500);
 		}
-		&.ERROR {
-			background-color: var(--bg-cherry-500);
-		}
-		&.TRACE {
+		&.severity-trace-2 {
 			background-color: var(--bg-forest-400);
 		}
-		&.DEBUG {
+		&.severity-trace-3 {
+			background-color: var(--bg-forest-300);
+		}
+		&.severity-trace-4 {
+			background-color: var(--bg-forest-200);
+		}
+
+		// Debug variants
+		&.severity-debug-0 {
+			background-color: var(--bg-aqua-600);
+		}
+		&.severity-debug-1 {
 			background-color: var(--bg-aqua-500);
 		}
-		&.FATAL {
+		&.severity-debug-2 {
+			background-color: var(--bg-aqua-400);
+		}
+		&.severity-debug-3 {
+			background-color: var(--bg-aqua-300);
+		}
+		&.severity-debug-4 {
+			background-color: var(--bg-aqua-200);
+		}
+
+		// Info variants
+		&.severity-info-0 {
+			background-color: var(--bg-robin-600);
+		}
+		&.severity-info-1 {
+			background-color: var(--bg-robin-500);
+		}
+		&.severity-info-2 {
+			background-color: var(--bg-robin-400);
+		}
+		&.severity-info-3 {
+			background-color: var(--bg-robin-300);
+		}
+		&.severity-info-4 {
+			background-color: var(--bg-robin-200);
+		}
+
+		// Warn variants
+		&.severity-warn-0 {
+			background-color: var(--bg-amber-600);
+		}
+		&.severity-warn-1 {
+			background-color: var(--bg-amber-500);
+		}
+		&.severity-warn-2 {
+			background-color: var(--bg-amber-400);
+		}
+		&.severity-warn-3 {
+			background-color: var(--bg-amber-300);
+		}
+		&.severity-warn-4 {
+			background-color: var(--bg-amber-200);
+		}
+
+		// Error variants
+		&.severity-error-0 {
+			background-color: var(--bg-cherry-600);
+		}
+		&.severity-error-1 {
+			background-color: var(--bg-cherry-500);
+		}
+		&.severity-error-2 {
+			background-color: var(--bg-cherry-400);
+		}
+		&.severity-error-3 {
+			background-color: var(--bg-cherry-300);
+		}
+		&.severity-error-4 {
+			background-color: var(--bg-cherry-200);
+		}
+
+		// Fatal variants
+		&.severity-fatal-0 {
+			background-color: var(--bg-sakura-600);
+		}
+		&.severity-fatal-1 {
 			background-color: var(--bg-sakura-500);
 		}
+		&.severity-fatal-2 {
+			background-color: var(--bg-sakura-400);
+		}
+		&.severity-fatal-3 {
+			background-color: var(--bg-sakura-300);
+		}
+		&.severity-fatal-4 {
+			background-color: var(--bg-sakura-200);
+		}
 	}
 }
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx
@@ -6,37 +6,41 @@ import LogStateIndicator from './LogStateIndicator';
 describe('LogStateIndicator', () => {
 	it('renders correctly with default props', () => {
 		const { container } = render(
-			<LogStateIndicator type="INFO" fontSize={FontSize.MEDIUM} />,
+			<LogStateIndicator severityText="INFO" fontSize={FontSize.MEDIUM} />,
 		);
 		const indicator = container.firstChild as HTMLElement;
 		expect(indicator.classList.contains('log-state-indicator')).toBe(true);
 		expect(indicator.classList.contains('isActive')).toBe(false);
 		expect(container.querySelector('.line')).toBeTruthy();
-		expect(container.querySelector('.line')?.classList.contains('INFO')).toBe(
-			true,
-		);
+		expect(
+			container.querySelector('.line')?.classList.contains('severity-info-0'),
+		).toBe(true);
 	});

 	it('renders correctly with different types', () => {
 		const { container: containerInfo } = render(
-			<LogStateIndicator type="INFO" fontSize={FontSize.MEDIUM} />,
-		);
-		expect(containerInfo.querySelector('.line')?.classList.contains('INFO')).toBe(
-			true,
-		);
-
-		const { container: containerWarning } = render(
-			<LogStateIndicator type="WARNING" fontSize={FontSize.MEDIUM} />,
+			<LogStateIndicator severityText="INFO" fontSize={FontSize.MEDIUM} />,
 		);
 		expect(
-			containerWarning.querySelector('.line')?.classList.contains('WARNING'),
+			containerInfo.querySelector('.line')?.classList.contains('severity-info-0'),
+		).toBe(true);
+
+		const { container: containerWarning } = render(
+			<LogStateIndicator severityText="WARNING" fontSize={FontSize.MEDIUM} />,
+		);
+		expect(
+			containerWarning
+				.querySelector('.line')
+				?.classList.contains('severity-warn-0'),
 		).toBe(true);

 		const { container: containerError } = render(
-			<LogStateIndicator type="ERROR" fontSize={FontSize.MEDIUM} />,
+			<LogStateIndicator severityText="ERROR" fontSize={FontSize.MEDIUM} />,
 		);
 		expect(
-			containerError.querySelector('.line')?.classList.contains('ERROR'),
+			containerError
+				.querySelector('.line')
+				?.classList.contains('severity-error-0'),
 		).toBe(true);
 	});
 });
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx
@@ -3,6 +3,8 @@ import './LogStateIndicator.styles.scss';
 import cx from 'classnames';
 import { FontSize } from 'container/OptionsMenu/types';

+import { getLogTypeBySeverityNumber } from './utils';
+
 export const SEVERITY_TEXT_TYPE = {
 	TRACE: 'TRACE',
 	TRACE2: 'TRACE2',
@@ -42,18 +44,112 @@ export const LogType = {
 	UNKNOWN: 'UNKNOWN',
 } as const;

+// Severity variant mapping to CSS classes
+const SEVERITY_VARIANT_CLASSES: Record<string, string> = {
+	// Trace variants - forest-600 to forest-200
+	TRACE: 'severity-trace-0',
+	Trace: 'severity-trace-1',
+	trace: 'severity-trace-2',
+	trc: 'severity-trace-3',
+	Trc: 'severity-trace-4',
+
+	// Debug variants - aqua-600 to aqua-200
+	DEBUG: 'severity-debug-0',
+	Debug: 'severity-debug-1',
+	debug: 'severity-debug-2',
+	dbg: 'severity-debug-3',
+	Dbg: 'severity-debug-4',
+
+	// Info variants - robin-600 to robin-200
+	INFO: 'severity-info-0',
+	Info: 'severity-info-1',
+	info: 'severity-info-2',
+	Information: 'severity-info-3',
+	information: 'severity-info-4',
+
+	// Warn variants - amber-600 to amber-200
+	WARN: 'severity-warn-0',
+	WARNING: 'severity-warn-0',
+	Warn: 'severity-warn-1',
+	warn: 'severity-warn-2',
+	warning: 'severity-warn-3',
+	Warning: 'severity-warn-4',
+	wrn: 'severity-warn-3',
+	Wrn: 'severity-warn-4',
+
+	// Error variants - cherry-600 to cherry-200
+	// eslint-disable-next-line sonarjs/no-duplicate-string
+	ERROR: 'severity-error-0',
+	Error: 'severity-error-1',
+	error: 'severity-error-2',
+	err: 'severity-error-3',
+	Err: 'severity-error-4',
+	ERR: 'severity-error-0',
+	fail: 'severity-error-2',
+	Fail: 'severity-error-3',
+	FAIL: 'severity-error-0',
+
+	// Fatal variants - sakura-600 to sakura-200
+	// eslint-disable-next-line sonarjs/no-duplicate-string
+	FATAL: 'severity-fatal-0',
+	Fatal: 'severity-fatal-1',
+	fatal: 'severity-fatal-2',
+	// eslint-disable-next-line sonarjs/no-duplicate-string
+	critical: 'severity-fatal-3',
+	Critical: 'severity-fatal-4',
+	CRITICAL: 'severity-fatal-0',
+	crit: 'severity-fatal-3',
+	Crit: 'severity-fatal-4',
+	CRIT: 'severity-fatal-0',
+	panic: 'severity-fatal-2',
+	Panic: 'severity-fatal-3',
+	PANIC: 'severity-fatal-0',
+};
+
+function getSeverityClass(
+	severityText?: string,
+	severityNumber?: number,
+): string {
+	// Priority 1: Use severityText for exact variant mapping
+	if (severityText) {
+		const variantClass = SEVERITY_VARIANT_CLASSES[severityText.trim()];
+		if (variantClass) {
+			return variantClass;
+		}
+	}
+
+	// Priority 2: Use severityNumber for base color (use middle shade as default)
+	if (severityNumber) {
+		const logType = getLogTypeBySeverityNumber(severityNumber);
+		if (logType !== LogType.UNKNOWN) {
+			return `severity-${logType.toLowerCase()}-0`; // Use middle shade (index 2)
+		}
+	}
+
+	return 'severity-info-0'; // Fallback to CSS classes based on type
+}
+
 function LogStateIndicator({
-	type,
 	fontSize,
+	severityText,
+	severityNumber,
 }: {
-	type: string;
 	fontSize: FontSize;
+	severityText?: string;
+	severityNumber?: number;
 }): JSX.Element {
+	const severityClass = getSeverityClass(severityText, severityNumber);
+
 	return (
 		<div className="log-state-indicator">
-			<div className={cx('line', type, fontSize)}> </div>
+			<div className={cx('line', fontSize, severityClass)} />
 		</div>
 	);
 }

+LogStateIndicator.defaultProps = {
+	severityText: '',
+	severityNumber: 0,
+};
+
 export default LogStateIndicator;
--- a/frontend/src/components/Logs/LogStateIndicator/utils.ts
+++ b/frontend/src/components/Logs/LogStateIndicator/utils.ts
@@ -41,7 +41,7 @@ const getLogTypeBySeverityText = (severityText: string): string => {
 };

 // https://opentelemetry.io/docs/specs/otel/logs/data-model/#field-severitynumber
-const getLogTypeBySeverityNumber = (severityNumber: number): string => {
+export const getLogTypeBySeverityNumber = (severityNumber: number): string => {
 	if (severityNumber < 1) {
 		return LogType.UNKNOWN;
 	}
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -192,7 +192,11 @@ function RawLogView({
 			onMouseLeave={handleMouseLeave}
 			fontSize={fontSize}
 		>
-			<LogStateIndicator type={logType} fontSize={fontSize} />
+			<LogStateIndicator
+				fontSize={fontSize}
+				severityText={data.severity_text}
+				severityNumber={data.severity_number}
+			/>

 			<RawLogContent
 				className="raw-log-content"
--- a/frontend/src/components/Logs/TableView/useTableView.tsx
+++ b/frontend/src/components/Logs/TableView/useTableView.tsx
@@ -11,7 +11,6 @@ import { useTimezone } from 'providers/Timezone';
 import { useMemo } from 'react';

 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
-import { getLogIndicatorTypeForTable } from '../LogStateIndicator/utils';
 import {
 	defaultListViewPanelStyle,
 	defaultTableStyle,
@@ -56,6 +55,8 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 			.map(({ name }) => ({
 				title: name,
 				dataIndex: name,
+				accessorKey: name,
+				id: name.toLowerCase().replace(/\./g, '_'),
 				key: name,
 				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
 					props: {
@@ -83,13 +84,17 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 				// We do not need any title and data index for the log state indicator
 				title: '',
 				dataIndex: '',
+				// eslint-disable-next-line sonarjs/no-duplicate-string
 				key: 'state-indicator',
+				accessorKey: 'state-indicator',
+				id: 'state-indicator',
 				render: (_, item): ColumnTypeRender<Record<string, unknown>> => ({
 					children: (
 						<div className={cx('state-indicator', fontSize)}>
 							<LogStateIndicator
-								type={getLogIndicatorTypeForTable(item)}
 								fontSize={fontSize}
+								severityText={item.severity_text as string}
+								severityNumber={item.severity_number as number}
 							/>
 						</div>
 					),
@@ -101,6 +106,8 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 							title: 'timestamp',
 							dataIndex: 'timestamp',
 							key: 'timestamp',
+							accessorKey: 'timestamp',
+							id: 'timestamp',
 							// https://github.com/ant-design/ant-design/discussions/36886
 							render: (
 								field: string | number,
@@ -135,6 +142,8 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 							title: 'body',
 							dataIndex: 'body',
 							key: 'body',
+							accessorKey: 'body',
+							id: 'body',
 							render: (
 								field: string | number,
 							): ColumnTypeRender<Record<string, unknown>> => ({
--- a/frontend/src/components/NewSelect/CustomMultiSelect.tsx
+++ b/frontend/src/components/NewSelect/CustomMultiSelect.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable no-nested-ternary */
@@ -12,9 +14,11 @@ import {
 import { Color } from '@signozhq/design-tokens';
 import { Button, Checkbox, Select, Typography } from 'antd';
 import cx from 'classnames';
+import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import { capitalize, isEmpty } from 'lodash-es';
-import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from 'lucide-react';
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Info } from 'lucide-react';
 import type { BaseSelectRef } from 'rc-select';
 import React, {
 	useCallback,
@@ -23,11 +27,11 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
+import { Virtuoso } from 'react-virtuoso';
 import { popupContainer } from 'utils/selectPopupContainer';

 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
-	ALL_SELECTED_VALUE,
 	filterOptionsBySearch,
 	handleScrollToBottom,
 	prioritizeOrAddOptionForMultiSelect,
@@ -39,6 +43,8 @@ enum ToggleTagValue {
 	All = 'All',
 }

+const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
+
 const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	placeholder = 'Search...',
 	className,
@@ -64,6 +70,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	maxTagTextLength,
 	onDropdownVisibleChange,
 	showIncompleteDataMessage = false,
+	showLabels = false,
+	enableRegexOption = false,
+	isDynamicVariable = false,
+	showRetryButton = true,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -83,6 +93,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	const justOpenedRef = useRef<boolean>(false);
 	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);

+	const isDarkMode = useIsDarkMode();
+
 	// Convert single string value to array for consistency
 	const selectedValues = useMemo(
 		(): string[] =>
@@ -297,7 +309,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					: filteredOptions,
 			);
 		}
-	}, [filteredOptions, searchText, options, selectedValues]);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [filteredOptions, searchText, options]);

 	// ===== Text Selection Utilities =====

@@ -544,12 +557,37 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({

 			// Reset active index when search changes if dropdown is open
 			if (isOpen && trimmedValue) {
-				setActiveIndex(0);
+				setActiveIndex(-1);
+				// see if the trimmed value matched any option and set that active index
+				const matchedOption = filteredOptions.find(
+					(option) =>
+						option.label.toLowerCase() === trimmedValue.toLowerCase() ||
+						option.value?.toLowerCase() === trimmedValue.toLowerCase(),
+				);
+				if (matchedOption) {
+					setActiveIndex(1);
+				} else {
+					// check if the trimmed value is a regex pattern and set that active index
+					const isRegex =
+						trimmedValue.startsWith('.*') && trimmedValue.endsWith('.*');
+					if (isRegex && enableRegexOption) {
+						setActiveIndex(0);
+					} else {
+						setActiveIndex(enableRegexOption ? 1 : 0);
+					}
+				}
 			}

 			if (onSearch) onSearch(trimmedValue);
 		},
-		[onSearch, isOpen, selectedValues, onChange],
+		[
+			onSearch,
+			isOpen,
+			selectedValues,
+			onChange,
+			filteredOptions,
+			enableRegexOption,
+		],
 	);

 	// ===== UI & Rendering Functions =====
@@ -817,7 +855,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				}

 				// Add Regex to flat list
-				if (!isEmpty(searchText)) {
+				if (!isEmpty(searchText) && enableRegexOption) {
 					// Only add regex wrapper if it doesn't already look like a regex pattern
 					const isAlreadyRegex =
 						searchText.startsWith('.*') && searchText.endsWith('.*');
@@ -1359,6 +1397,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			extendSelection,
 			onDropdownVisibleChange,
 			handleSelectAll,
+			enableRegexOption,
 		],
 	);

@@ -1409,7 +1448,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		const customOptions: OptionData[] = [];

 		// add regex options first since they appear first in the UI
-		if (!isEmpty(searchText)) {
+		if (!isEmpty(searchText) && enableRegexOption) {
 			// Only add regex wrapper if it doesn't already look like a regex pattern
 			const isAlreadyRegex =
 				searchText.startsWith('.*') && searchText.endsWith('.*');
@@ -1432,8 +1471,17 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			});
 		}

-		// Now add all custom options at the beginning
-		const enhancedNonSectionOptions = [...customOptions, ...nonSectionOptions];
+		// Now add all custom options at the beginning, removing duplicates based on value
+		const allOptions = [...customOptions, ...nonSectionOptions];
+		const seenValues = new Set<string>();
+		const enhancedNonSectionOptions = allOptions.filter((option) => {
+			const value = option.value || '';
+			if (seenValues.has(value)) {
+				return false;
+			}
+			seenValues.add(value);
+			return true;
+		});

 		const allOptionValues = getAllAvailableValues(processedOptions);
 		const allOptionsSelected =
@@ -1509,14 +1557,39 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 								}
 							}}
 						>
-							<Checkbox
-								checked={allOptionsSelected}
-								style={{ width: '100%', height: '100%' }}
-							>
-								<div className="option-content">
-									<div>ALL</div>
+							<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+								<Checkbox checked={allOptionsSelected} className="option-checkbox">
+									<div className="option-content">
+										<div className="all-option-text">ALL</div>
+									</div>
+								</Checkbox>
+								<div
+									onClick={(e): void => {
+										e.stopPropagation();
+									}}
+									onMouseDown={(e): void => {
+										e.stopPropagation();
+									}}
+								>
+									{isDynamicVariable && (
+										<TextToolTip
+											text="ALL in dynamic variable = No filter applied (unlike other variable types where ALL sends all selected values). Learn more"
+											url="https://signoz.io/docs/userguide/manage-variables/#note-about-all"
+											urlText="here"
+											useFilledIcon={false}
+											outlinedIcon={
+												<Info
+													size={14}
+													style={{
+														color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+														marginLeft: 5,
+													}}
+												/>
+											}
+										/>
+									)}
 								</div>
-							</Checkbox>
+							</div>
 						</div>
 						<div className="divider" />
 					</>
@@ -1525,7 +1598,19 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				{/* Non-section options when not searching */}
 				{enhancedNonSectionOptions.length > 0 && (
 					<div className="no-section-options">
-						{mapOptions(enhancedNonSectionOptions)}
+						<Virtuoso
+							style={{
+								minHeight: Math.min(300, enhancedNonSectionOptions.length * 40),
+								maxHeight: enhancedNonSectionOptions.length * 40,
+							}}
+							data={enhancedNonSectionOptions}
+							itemContent={(index, item): React.ReactNode =>
+								(mapOptions([item]) as unknown) as React.ReactElement
+							}
+							totalCount={enhancedNonSectionOptions.length}
+							itemSize={(): number => 40}
+							overscan={5}
+						/>
 					</div>
 				)}

@@ -1536,12 +1621,43 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							<div className="select-group" key={section.label}>
 								<div className="group-label" role="heading" aria-level={2}>
 									{section.label}
+									{isDynamicVariable && (
+										<TextToolTip
+											text="Related values: Filtered by other variable selections. All values: Unfiltered complete list. Learn more"
+											url="https://signoz.io/docs/userguide/manage-variables/#dynamic-variable-dropdowns-display-values-in-two-sections"
+											urlText="here"
+											useFilledIcon={false}
+											outlinedIcon={
+												<Info
+													size={14}
+													style={{
+														color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+														marginTop: 1,
+													}}
+												/>
+											}
+										/>
+									)}
 								</div>
 								<div role="group" aria-label={`${section.label} options`}>
-									{section.options && mapOptions(section.options)}
+									<Virtuoso
+										style={{
+											minHeight: Math.min(300, (section.options?.length || 0) * 40),
+											maxHeight: (section.options?.length || 0) * 40,
+										}}
+										data={section.options || []}
+										itemContent={(index, item): React.ReactNode =>
+											(mapOptions([item]) as unknown) as React.ReactElement
+										}
+										totalCount={section.options?.length || 0}
+										itemSize={(): number => 40}
+										overscan={5}
+									/>
 								</div>
 							</div>
-						) : null,
+						) : (
+							<div key={section.label} />
+						),
 					)}

 				{/* Navigation help footer */}
@@ -1563,7 +1679,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							<div className="navigation-icons">
 								<LoadingOutlined />
 							</div>
-							<div className="navigation-text">We are updating the values...</div>
+							<div className="navigation-text">Refreshing values...</div>
 						</div>
 					)}
 					{errorMessage && !loading && (
@@ -1571,15 +1687,17 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							<div className="navigation-text">
 								{errorMessage || SOMETHING_WENT_WRONG}
 							</div>
-							<div className="navigation-icons">
-								<ReloadOutlined
-									twoToneColor={Color.BG_CHERRY_400}
-									onClick={(e): void => {
-										e.stopPropagation();
-										if (onRetry) onRetry();
-									}}
-								/>
-							</div>
+							{onRetry && showRetryButton && (
+								<div className="navigation-icons">
+									<ReloadOutlined
+										twoToneColor={Color.BG_CHERRY_400}
+										onClick={(e): void => {
+											e.stopPropagation();
+											onRetry();
+										}}
+									/>
+								</div>
+							)}
 						</div>
 					)}

@@ -1588,7 +1706,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						!loading &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
-								Use search for more options
+								Don&apos;t see the value? Use search
 							</div>
 						)}

@@ -1624,6 +1742,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		onRetry,
 		showIncompleteDataMessage,
 		isScrolledToBottom,
+		enableRegexOption,
+		isDarkMode,
+		isDynamicVariable,
+		showRetryButton,
 	]);

 	// Custom handler for dropdown visibility changes
@@ -1708,7 +1830,11 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	// Custom Tag Render (needs significant updates)
 	const tagRender = useCallback(
 		(props: CustomTagProps): React.ReactElement => {
-			const { label, value, closable, onClose } = props;
+			const { label: labelProp, value, closable, onClose } = props;
+
+			const label = showLabels
+				? options.find((option) => option.value === value)?.label || labelProp
+				: labelProp;

 			// If the display value is the special ALL value, render the ALL tag
 			if (allOptionShown) {
@@ -1832,7 +1958,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				onSearch={handleSearch}
 				value={displayValue}
 				onChange={(newValue): void => {
-					console.log('newValue', newValue);
 					handleInternalChange(newValue, false);
 				}}
 				onClear={onClearHandler}
--- a/frontend/src/components/NewSelect/CustomSelect.tsx
+++ b/frontend/src/components/NewSelect/CustomSelect.tsx
@@ -13,9 +13,11 @@ import {
 import { Color } from '@signozhq/design-tokens';
 import { Select } from 'antd';
 import cx from 'classnames';
+import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import { capitalize, isEmpty } from 'lodash-es';
-import { ArrowDown, ArrowUp } from 'lucide-react';
+import { ArrowDown, ArrowUp, Info } from 'lucide-react';
 import type { BaseSelectRef } from 'rc-select';
 import React, {
 	useCallback,
@@ -59,6 +61,8 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	allowClear = false,
 	onRetry,
 	showIncompleteDataMessage = false,
+	showRetryButton = true,
+	isDynamicVariable = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -67,6 +71,8 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	const [activeOptionIndex, setActiveOptionIndex] = useState<number>(-1);
 	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);

+	const isDarkMode = useIsDarkMode();
+
 	// Refs for element access and scroll behavior
 	const selectRef = useRef<BaseSelectRef>(null);
 	const dropdownRef = useRef<HTMLDivElement>(null);
@@ -522,6 +528,23 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							<div className="select-group" key={section.label}>
 								<div className="group-label" role="heading" aria-level={2}>
 									{section.label}
+									{isDynamicVariable && (
+										<TextToolTip
+											text="Related values: Filtered by other variable selections. All values: Unfiltered complete list. Learn more"
+											url="https://signoz.io/docs/userguide/manage-variables/#dynamic-variable-dropdowns-display-values-in-two-sections"
+											urlText="here"
+											useFilledIcon={false}
+											outlinedIcon={
+												<Info
+													size={14}
+													style={{
+														color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+														marginTop: 1,
+													}}
+												/>
+											}
+										/>
+									)}
 								</div>
 								<div role="group" aria-label={`${section.label} options`}>
 									{section.options && mapOptions(section.options)}
@@ -547,7 +570,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							<div className="navigation-icons">
 								<LoadingOutlined />
 							</div>
-							<div className="navigation-text">We are updating the values...</div>
+							<div className="navigation-text">Refreshing values...</div>
 						</div>
 					)}
 					{errorMessage && !loading && (
@@ -555,15 +578,17 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							<div className="navigation-text">
 								{errorMessage || SOMETHING_WENT_WRONG}
 							</div>
-							<div className="navigation-icons">
-								<ReloadOutlined
-									twoToneColor={Color.BG_CHERRY_400}
-									onClick={(e): void => {
-										e.stopPropagation();
-										if (onRetry) onRetry();
-									}}
-								/>
-							</div>
+							{onRetry && showRetryButton && (
+								<div className="navigation-icons">
+									<ReloadOutlined
+										twoToneColor={Color.BG_CHERRY_400}
+										onClick={(e): void => {
+											e.stopPropagation();
+											onRetry();
+										}}
+									/>
+								</div>
+							)}
 						</div>
 					)}

@@ -572,7 +597,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						!loading &&
 						!errorMessage && (
 							<div className="navigation-text-incomplete">
-								Use search for more options
+								Don&apos;t see the value? Use search
 							</div>
 						)}

@@ -603,6 +628,9 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		onRetry,
 		showIncompleteDataMessage,
 		isScrolledToBottom,
+		showRetryButton,
+		isDarkMode,
+		isDynamicVariable,
 	]);

 	// Handle dropdown visibility changes
--- a/frontend/src/components/NewSelect/test/CustomMultiSelect.comprehensive.test.tsx
+++ b/frontend/src/components/NewSelect/test/CustomMultiSelect.comprehensive.test.tsx
--- a/frontend/src/components/NewSelect/test/CustomMultiSelect.retry.test.tsx
+++ b/frontend/src/components/NewSelect/test/CustomMultiSelect.retry.test.tsx
@@ -0,0 +1,127 @@
+import {
+	fireEvent,
+	render,
+	RenderResult,
+	screen,
+	waitFor,
+} from '@testing-library/react';
+import { VirtuosoMockContext } from 'react-virtuoso';
+
+import CustomMultiSelect from '../CustomMultiSelect';
+
+// Mock scrollIntoView which isn't available in JSDOM
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+// Helper function to render with VirtuosoMockContext
+const renderWithVirtuoso = (component: React.ReactElement): RenderResult =>
+	render(
+		<VirtuosoMockContext.Provider
+			value={{ viewportHeight: 300, itemHeight: 100 }}
+		>
+			{component}
+		</VirtuosoMockContext.Provider>,
+	);
+
+// Mock options data
+const mockOptions = [
+	{ label: 'Option 1', value: 'option1' },
+	{ label: 'Option 2', value: 'option2' },
+	{ label: 'Option 3', value: 'option3' },
+];
+
+// CSS selector for retry button
+const RETRY_BUTTON_SELECTOR = '.navigation-icons .anticon-reload';
+
+describe('CustomMultiSelect - Retry Functionality', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should show retry button when 5xx error occurs and error message is displayed', async () => {
+		const mockOnRetry = jest.fn();
+		const errorMessage = 'Internal Server Error (500)';
+
+		renderWithVirtuoso(
+			<CustomMultiSelect
+				options={mockOptions}
+				errorMessage={errorMessage}
+				onRetry={mockOnRetry}
+				showRetryButton
+				loading={false}
+			/>,
+		);
+
+		// Open dropdown to see error state
+		const selectElement = screen.getByRole('combobox');
+		fireEvent.mouseDown(selectElement);
+
+		// Wait for dropdown to appear with error message
+		await waitFor(() => {
+			expect(screen.getByText(errorMessage)).toBeInTheDocument();
+		});
+
+		// Check that retry button (ReloadOutlined icon) is present
+		const retryButton = document.querySelector(RETRY_BUTTON_SELECTOR);
+		expect(retryButton).toBeInTheDocument();
+	});
+
+	it('should show retry button when 4xx error occurs and error message is displayed (current behavior)', async () => {
+		const mockOnRetry = jest.fn();
+		const errorMessage = 'Bad Request (400)';
+
+		renderWithVirtuoso(
+			<CustomMultiSelect
+				options={mockOptions}
+				errorMessage={errorMessage}
+				onRetry={mockOnRetry}
+				showRetryButton={false}
+				loading={false}
+			/>,
+		);
+
+		// Open dropdown
+		const selectElement = screen.getByRole('combobox');
+		fireEvent.mouseDown(selectElement);
+
+		// Wait for dropdown to appear with error message
+		await waitFor(() => {
+			expect(screen.getByText(errorMessage)).toBeInTheDocument();
+		});
+
+		const retryButton = document.querySelector(RETRY_BUTTON_SELECTOR);
+		expect(retryButton).not.toBeInTheDocument();
+	});
+
+	it('should call onRetry function when retry button is clicked', async () => {
+		const mockOnRetry = jest.fn();
+		const errorMessage = 'Internal Server Error (500)';
+
+		renderWithVirtuoso(
+			<CustomMultiSelect
+				options={mockOptions}
+				errorMessage={errorMessage}
+				onRetry={mockOnRetry}
+				showRetryButton
+				loading={false}
+			/>,
+		);
+
+		// Open dropdown
+		const selectElement = screen.getByRole('combobox');
+		fireEvent.mouseDown(selectElement);
+
+		// Wait for dropdown to appear
+		await waitFor(() => {
+			expect(screen.getByText(errorMessage)).toBeInTheDocument();
+		});
+
+		// Find and click the retry button
+		const retryButton = document.querySelector(RETRY_BUTTON_SELECTOR);
+		expect(retryButton).toBeInTheDocument();
+
+		fireEvent.click(retryButton as Element);
+
+		// Verify onRetry was called
+		expect(mockOnRetry).toHaveBeenCalledTimes(1);
+	});
+});
--- a/frontend/src/components/NewSelect/test/CustomMultiSelect.test.tsx
+++ b/frontend/src/components/NewSelect/test/CustomMultiSelect.test.tsx
@@ -1,10 +1,27 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+	fireEvent,
+	render,
+	RenderResult,
+	screen,
+	waitFor,
+} from '@testing-library/react';
+import { VirtuosoMockContext } from 'react-virtuoso';

 import CustomMultiSelect from '../CustomMultiSelect';

 // Mock scrollIntoView which isn't available in JSDOM
 window.HTMLElement.prototype.scrollIntoView = jest.fn();

+// Helper function to render with VirtuosoMockContext
+const renderWithVirtuoso = (component: React.ReactElement): RenderResult =>
+	render(
+		<VirtuosoMockContext.Provider
+			value={{ viewportHeight: 300, itemHeight: 100 }}
+		>
+			{component}
+		</VirtuosoMockContext.Provider>,
+	);
+
 // Mock options data
 const mockOptions = [
 	{ label: 'Option 1', value: 'option1' },
@@ -32,7 +49,7 @@ const mockGroupedOptions = [
 describe('CustomMultiSelect Component', () => {
 	it('renders with placeholder', () => {
 		const handleChange = jest.fn();
-		render(
+		renderWithVirtuoso(
 			<CustomMultiSelect
 				placeholder="Select multiple options"
 				options={mockOptions}
@@ -47,7 +64,9 @@ describe('CustomMultiSelect Component', () => {

 	it('opens dropdown when clicked', async () => {
 		const handleChange = jest.fn();
-		render(<CustomMultiSelect options={mockOptions} onChange={handleChange} />);
+		renderWithVirtuoso(
+			<CustomMultiSelect options={mockOptions} onChange={handleChange} />,
+		);

 		// Click to open the dropdown
 		const selectElement = screen.getByRole('combobox');
@@ -66,7 +85,7 @@ describe('CustomMultiSelect Component', () => {
 		const handleChange = jest.fn();

 		// Start with option1 already selected
-		render(
+		renderWithVirtuoso(
 			<CustomMultiSelect
 				options={mockOptions}
 				onChange={handleChange}
@@ -93,7 +112,7 @@ describe('CustomMultiSelect Component', () => {

 	it('selects ALL options when ALL is clicked', async () => {
 		const handleChange = jest.fn();
-		render(
+		renderWithVirtuoso(
 			<CustomMultiSelect
 				options={mockOptions}
 				onChange={handleChange}
@@ -126,7 +145,7 @@ describe('CustomMultiSelect Component', () => {
 	});

 	it('displays selected options as tags', async () => {
-		render(
+		renderWithVirtuoso(
 			<CustomMultiSelect options={mockOptions} value={['option1', 'option2']} />,
 		);

@@ -137,7 +156,7 @@ describe('CustomMultiSelect Component', () => {

 	it('removes a tag when clicked', async () => {
 		const handleChange = jest.fn();
-		render(
+		renderWithVirtuoso(
 			<CustomMultiSelect
 				options={mockOptions}
 				value={['option1', 'option2']}
@@ -159,7 +178,7 @@ describe('CustomMultiSelect Component', () => {
 	});

 	it('filters options when searching', async () => {
-		render(<CustomMultiSelect options={mockOptions} />);
+		renderWithVirtuoso(<CustomMultiSelect options={mockOptions} />);

 		// Open dropdown
 		const selectElement = screen.getByRole('combobox');
@@ -193,7 +212,7 @@ describe('CustomMultiSelect Component', () => {
 	});

 	it('renders grouped options correctly', async () => {
-		render(<CustomMultiSelect options={mockGroupedOptions} />);
+		renderWithVirtuoso(<CustomMultiSelect options={mockGroupedOptions} />);

 		// Open dropdown
 		const selectElement = screen.getByRole('combobox');
@@ -211,18 +230,18 @@ describe('CustomMultiSelect Component', () => {
 	});

 	it('shows loading state', () => {
-		render(<CustomMultiSelect options={mockOptions} loading />);
+		renderWithVirtuoso(<CustomMultiSelect options={mockOptions} loading />);

 		// Open dropdown
 		const selectElement = screen.getByRole('combobox');
 		fireEvent.mouseDown(selectElement);

 		// Check loading text is displayed
-		expect(screen.getByText('We are updating the values...')).toBeInTheDocument();
+		expect(screen.getByText('Refreshing values...')).toBeInTheDocument();
 	});

 	it('shows error message', () => {
-		render(
+		renderWithVirtuoso(
 			<CustomMultiSelect
 				options={mockOptions}
 				errorMessage="Test error message"
@@ -238,7 +257,9 @@ describe('CustomMultiSelect Component', () => {
 	});

 	it('shows no data message', () => {
-		render(<CustomMultiSelect options={[]} noDataMessage="No data available" />);
+		renderWithVirtuoso(
+			<CustomMultiSelect options={[]} noDataMessage="No data available" />,
+		);

 		// Open dropdown
 		const selectElement = screen.getByRole('combobox');
@@ -249,7 +270,7 @@ describe('CustomMultiSelect Component', () => {
 	});

 	it('shows "ALL" tag when all options are selected', () => {
-		render(
+		renderWithVirtuoso(
 			<CustomMultiSelect
 				options={mockOptions}
 				value={['option1', 'option2', 'option3']}
--- a/frontend/src/components/NewSelect/test/CustomSelect.comprehensive.test.tsx
+++ b/frontend/src/components/NewSelect/test/CustomSelect.comprehensive.test.tsx
--- a/frontend/src/components/NewSelect/test/CustomSelect.test.tsx
+++ b/frontend/src/components/NewSelect/test/CustomSelect.test.tsx
@@ -140,7 +140,7 @@ describe('CustomSelect Component', () => {
 		fireEvent.mouseDown(selectElement);

 		// Check loading text is displayed
-		expect(screen.getByText('We are updating the values...')).toBeInTheDocument();
+		expect(screen.getByText('Refreshing values...')).toBeInTheDocument();
 	});

 	it('shows error message', () => {
--- a/frontend/src/components/NewSelect/test/VariableItem.integration.test.tsx
+++ b/frontend/src/components/NewSelect/test/VariableItem.integration.test.tsx
@@ -0,0 +1,624 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import configureStore from 'redux-mock-store';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import VariableItem from '../../../container/NewDashboard/DashboardVariablesSelection/VariableItem';
+
+// Mock the dashboard variables query
+jest.mock('api/dashboard/variables/dashboardVariablesQuery', () => ({
+	__esModule: true,
+	default: jest.fn(() =>
+		Promise.resolve({
+			payload: {
+				variableValues: ['option1', 'option2', 'option3', 'option4'],
+			},
+		}),
+	),
+}));
+
+// Mock scrollIntoView which isn't available in JSDOM
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+// Constants
+const TEST_VARIABLE_NAME = 'test_variable';
+const TEST_VARIABLE_ID = 'test-var-id';
+
+// Create a mock store
+const mockStore = configureStore([])({
+	globalTime: {
+		minTime: Date.now() - 3600000, // 1 hour ago
+		maxTime: Date.now(),
+	},
+});
+
+// Test data
+const createMockVariable = (
+	overrides: Partial<IDashboardVariable> = {},
+): IDashboardVariable => ({
+	id: TEST_VARIABLE_ID,
+	name: TEST_VARIABLE_NAME,
+	description: 'Test variable description',
+	type: 'QUERY',
+	queryValue: 'SELECT DISTINCT value FROM table',
+	customValue: '',
+	sort: 'ASC',
+	multiSelect: false,
+	showALLOption: true,
+	selectedValue: [],
+	allSelected: false,
+	...overrides,
+});
+
+function TestWrapper({ children }: { children: React.ReactNode }): JSX.Element {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: { retry: false },
+		},
+	});
+
+	return (
+		<Provider store={mockStore}>
+			<QueryClientProvider client={queryClient}>
+				<VirtuosoMockContext.Provider
+					// eslint-disable-next-line react/jsx-no-constructed-context-values
+					value={{ viewportHeight: 300, itemHeight: 40 }}
+				>
+					{children}
+				</VirtuosoMockContext.Provider>
+			</QueryClientProvider>
+		</Provider>
+	);
+}
+
+describe('VariableItem Integration Tests', () => {
+	let user: ReturnType<typeof userEvent.setup>;
+	let mockOnValueUpdate: jest.Mock;
+	let mockSetVariablesToGetUpdated: jest.Mock;
+
+	beforeEach(() => {
+		user = userEvent.setup();
+		mockOnValueUpdate = jest.fn();
+		mockSetVariablesToGetUpdated = jest.fn();
+		jest.clearAllMocks();
+	});
+
+	// ===== 1. INTEGRATION WITH CUSTOMSELECT =====
+	describe('CustomSelect Integration (VI)', () => {
+		test('VI-01: Single select variable integration', async () => {
+			const variable = createMockVariable({
+				multiSelect: false,
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3',
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should render with CustomSelect
+			const combobox = screen.getByRole('combobox');
+			expect(combobox).toBeInTheDocument();
+
+			await user.click(combobox);
+
+			await waitFor(() => {
+				expect(screen.getByText('option1')).toBeInTheDocument();
+				expect(screen.getByText('option2')).toBeInTheDocument();
+				expect(screen.getByText('option3')).toBeInTheDocument();
+			});
+
+			// Select an option
+			const option1 = screen.getByText('option1');
+			await user.click(option1);
+
+			expect(mockOnValueUpdate).toHaveBeenCalledWith(
+				TEST_VARIABLE_NAME,
+				TEST_VARIABLE_ID,
+				'option1',
+				false,
+			);
+		});
+	});
+
+	// ===== 2. INTEGRATION WITH CUSTOMMULTISELECT =====
+	describe('CustomMultiSelect Integration (VI)', () => {
+		test('VI-02: Multi select variable integration', async () => {
+			const variable = createMockVariable({
+				multiSelect: true,
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3,option4',
+				showALLOption: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should render with CustomMultiSelect
+			const combobox = screen.getByRole('combobox');
+			expect(combobox).toBeInTheDocument();
+
+			await user.click(combobox);
+
+			await waitFor(() => {
+				// Should show ALL option
+				expect(screen.getByText('ALL')).toBeInTheDocument();
+			});
+
+			// Wait for Virtuoso to render the custom options
+			await waitFor(
+				() => {
+					expect(screen.getByText('option1')).toBeInTheDocument();
+					expect(screen.getByText('option2')).toBeInTheDocument();
+					expect(screen.getByText('option3')).toBeInTheDocument();
+					expect(screen.getByText('option4')).toBeInTheDocument();
+				},
+				{ timeout: 5000 },
+			);
+		});
+	});
+
+	// ===== 3. TEXTBOX VARIABLE TYPE =====
+	describe('Textbox Variable Integration', () => {
+		test('VI-03: Textbox variable handling', async () => {
+			const variable = createMockVariable({
+				type: 'TEXTBOX',
+				selectedValue: 'initial-value',
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should render a regular input
+			const textInput = screen.getByDisplayValue('initial-value');
+			expect(textInput).toBeInTheDocument();
+			expect(textInput.tagName).toBe('INPUT');
+
+			// Clear and type new value
+			await user.clear(textInput);
+			await user.type(textInput, 'new-text-value');
+
+			// Should call onValueUpdate after debounce
+			await waitFor(
+				() => {
+					expect(mockOnValueUpdate).toHaveBeenCalledWith(
+						TEST_VARIABLE_NAME,
+						TEST_VARIABLE_ID,
+						'new-text-value',
+						false,
+					);
+				},
+				{ timeout: 1000 },
+			);
+		});
+	});
+
+	// ===== 4. VALUE PERSISTENCE AND STATE MANAGEMENT =====
+	describe('Value Persistence and State Management', () => {
+		test('VI-04: All selected state handling', () => {
+			const variable = createMockVariable({
+				multiSelect: true,
+				type: 'CUSTOM',
+				customValue: 'service1,service2,service3',
+				selectedValue: ['service1', 'service2', 'service3'],
+				allSelected: true,
+				showALLOption: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should show "ALL" instead of individual values
+			expect(screen.getByText('ALL')).toBeInTheDocument();
+		});
+
+		test('VI-05: Dropdown behavior with temporary selections', async () => {
+			const variable = createMockVariable({
+				multiSelect: true,
+				type: 'CUSTOM',
+				customValue: 'item1,item2,item3',
+				selectedValue: ['item1'],
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
+					/>
+				</TestWrapper>,
+			);
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			// Wait for dropdown to open
+			await waitFor(() => {
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toBeInTheDocument();
+			});
+
+			// Verify the component renders without crashing
+			expect(combobox).toBeInTheDocument();
+		});
+	});
+
+	// ===== 6. ACCESSIBILITY AND USER EXPERIENCE =====
+	describe('Accessibility and User Experience', () => {
+		test('VI-06: Variable description tooltip', async () => {
+			const variable = createMockVariable({
+				description: 'This variable controls the service selection',
+				type: 'CUSTOM',
+				customValue: 'service1,service2',
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should show info icon
+			const infoIcon = document.querySelector('.info-icon');
+			expect(infoIcon).toBeInTheDocument();
+
+			// Hover to show tooltip
+			if (infoIcon) {
+				await user.hover(infoIcon);
+			}
+
+			await waitFor(() => {
+				expect(
+					screen.getByText('This variable controls the service selection'),
+				).toBeInTheDocument();
+			});
+		});
+
+		test('VI-07: Variable name display', () => {
+			const variable = createMockVariable({
+				name: 'service_name',
+				type: 'CUSTOM',
+				customValue: 'service1,service2',
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
+					/>
+				</TestWrapper>,
+			);
+
+			// Should show variable name with $ prefix
+			expect(screen.getByText('$service_name')).toBeInTheDocument();
+		});
+
+		test('VI-08: Max tag count behavior', async () => {
+			const variable = createMockVariable({
+				multiSelect: true,
+				type: 'CUSTOM',
+				customValue: 'tag1,tag2,tag3,tag4,tag5,tag6,tag7',
+				selectedValue: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5', 'tag6', 'tag7'],
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
+					/>
+				</TestWrapper>,
+			);
+
+			// Wait for component to render
+			await waitFor(() => {
+				const combobox = screen.getByRole('combobox');
+				expect(combobox).toBeInTheDocument();
+			});
+
+			// Should show limited number of tags with "+ X more"
+			const tags = document.querySelectorAll('.ant-select-selection-item');
+
+			// The component should render without crashing
+			expect(tags.length).toBeGreaterThanOrEqual(0);
+		});
+	});
+
+	// ===== 8. SEARCH INTERACTION TESTS =====
+	describe('Search Interaction Tests', () => {
+		test('VI-14: Search persistence across dropdown open/close', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3',
+				multiSelect: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
+					/>
+				</TestWrapper>,
+			);
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			await waitFor(() => {
+				expect(screen.getByText('ALL')).toBeInTheDocument();
+			});
+
+			const searchInput = document.querySelector(
+				'.ant-select-selection-search-input',
+			);
+			expect(searchInput).toBeInTheDocument();
+
+			if (searchInput) {
+				await user.type(searchInput, 'search-text');
+			}
+
+			// Verify search text is in input
+			await waitFor(() => {
+				expect(searchInput).toHaveValue('search-text');
+			});
+
+			// Press Escape to close dropdown
+			await user.keyboard('{Escape}');
+
+			// Dropdown should close and search text should be cleared
+			await waitFor(() => {
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toHaveClass('ant-select-dropdown-hidden');
+				expect(searchInput).toHaveValue('');
+			});
+		});
+	});
+
+	// ===== 9. ADVANCED KEYBOARD NAVIGATION =====
+	describe('Advanced Keyboard Navigation (VI)', () => {
+		test('VI-15: Shift + Arrow + Del chip deletion in multiselect', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3',
+				multiSelect: true,
+				selectedValue: ['option1', 'option2', 'option3'],
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
+					/>
+				</TestWrapper>,
+			);
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			// Navigate to chips using arrow keys
+			await user.keyboard('{ArrowLeft}');
+
+			// Use Shift + Arrow to navigate between chips
+			await user.keyboard('{Shift>}{ArrowLeft}{/Shift}');
+
+			// Use Del to delete the active chip
+			await user.keyboard('{Delete}');
+
+			// Note: The component may not immediately call onValueUpdate
+			// This test verifies the chip deletion behavior
+			await waitFor(() => {
+				// Check if a chip was removed from the selection
+				const selectionItems = document.querySelectorAll(
+					'.ant-select-selection-item',
+				);
+				expect(selectionItems.length).toBeLessThan(3);
+			});
+		});
+	});
+
+	// ===== 11. ADVANCED UI STATES =====
+	describe('Advanced UI States (VI)', () => {
+		test('VI-19: No data with previous value selected in variable', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: '',
+				multiSelect: true,
+				selectedValue: ['previous-value'],
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
+					/>
+				</TestWrapper>,
+			);
+
+			// Wait for component to initialize
+			await waitFor(() => {
+				const combobox = screen.getByRole('combobox');
+				expect(combobox).toBeInTheDocument();
+			});
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			// Should show no data message (the component may not show this exact text)
+			await waitFor(() => {
+				// Check if dropdown is empty or shows no data indication
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toBeInTheDocument();
+			});
+
+			// Verify the component renders without crashing
+			expect(combobox).toBeInTheDocument();
+		});
+
+		test('VI-20: Always editable accessibility in variable', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: 'option1,option2',
+				multiSelect: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
+					/>
+				</TestWrapper>,
+			);
+
+			const combobox = screen.getByRole('combobox');
+
+			// Should be editable
+			expect(combobox).not.toBeDisabled();
+			await user.click(combobox);
+			expect(combobox).toHaveFocus();
+
+			// Should still be interactive
+			expect(combobox).not.toBeDisabled();
+		});
+	});
+
+	// ===== 13. DROPDOWN PERSISTENCE =====
+	describe('Dropdown Persistence (VI)', () => {
+		test('VI-24: Dropdown stays open for non-save actions in variable', async () => {
+			const variable = createMockVariable({
+				type: 'CUSTOM',
+				customValue: 'option1,option2,option3',
+				multiSelect: true,
+			});
+
+			render(
+				<TestWrapper>
+					<VariableItem
+						variableData={variable}
+						existingVariables={{}}
+						onValueUpdate={mockOnValueUpdate}
+						variablesToGetUpdated={[]}
+						setVariablesToGetUpdated={mockSetVariablesToGetUpdated}
+						dependencyData={null}
+					/>
+				</TestWrapper>,
+			);
+
+			// Wait for component to initialize
+			await waitFor(() => {
+				const combobox = screen.getByRole('combobox');
+				expect(combobox).toBeInTheDocument();
+			});
+
+			const combobox = screen.getByRole('combobox');
+			await user.click(combobox);
+
+			await waitFor(() => {
+				expect(screen.getByText('ALL')).toBeInTheDocument();
+			});
+
+			// Navigate with arrow keys (non-save action)
+			await user.keyboard('{ArrowDown}');
+			await user.keyboard('{ArrowDown}');
+
+			// Dropdown should still be open
+			await waitFor(() => {
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toBeInTheDocument();
+			});
+
+			// Verify the component renders without crashing
+			expect(combobox).toBeInTheDocument();
+
+			// Only ESC should close the dropdown
+			await user.keyboard('{Escape}');
+
+			await waitFor(() => {
+				const dropdown = document.querySelector('.ant-select-dropdown');
+				expect(dropdown).toHaveClass('ant-select-dropdown-hidden');
+			});
+		});
+	});
+});
--- a/frontend/src/components/NewSelect/styles.scss
+++ b/frontend/src/components/NewSelect/styles.scss
@@ -78,6 +78,7 @@ $custom-border-color: #2c3044;
 		scrollbar-width: thin;
 		background-color: var(--bg-ink-400);
 		border-color: var(--bg-slate-400);
+		cursor: text;

 		&::-webkit-scrollbar {
 			width: 6px;
@@ -93,6 +94,16 @@ $custom-border-color: #2c3044;
 		}
 	}

+	// Ensure adequate space for input area
+	.ant-select-selection-search {
+		min-width: 60px !important;
+		flex: 1 1 auto;
+		.ant-select-selection-search-input {
+			min-width: 60px !important;
+			cursor: text;
+		}
+	}
+
 	&.ant-select-focused {
 		.ant-select-selector {
 			border-color: var(--bg-robin-500);
@@ -396,8 +407,13 @@ $custom-border-color: #2c3044;
 	.select-group {
 		margin-bottom: 12px;
 		overflow: hidden;
+		margin-top: 4px;

 		.group-label {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
 			font-weight: 500;
 			padding: 4px 12px;
 			font-size: 13px;
@@ -445,6 +461,13 @@ $custom-border-color: #2c3044;
 				width: 100%;
 			}

+			.all-option-text {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				width: 100%;
+			}
+
 			.option-content {
 				display: flex;
 				justify-content: space-between;
@@ -678,6 +701,7 @@ $custom-border-color: #2c3044;
 		.ant-select-selector {
 			background-color: var(--bg-vanilla-100);
 			border-color: #e9e9e9;
+			cursor: text; // Make entire selector clickable for input focus

 			&::-webkit-scrollbar-thumb {
 				background-color: #ccc;
@@ -688,6 +712,20 @@ $custom-border-color: #2c3044;
 			}
 		}

+		.ant-select-selection-search {
+			min-width: 60px !important;
+			flex: 1 1 auto;
+
+			.ant-select-selection-search-input {
+				min-width: 60px !important;
+				cursor: text;
+			}
+		}
+
+		.ant-select-selector {
+			cursor: text;
+		}
+
 		.ant-select-selection-placeholder {
 			color: rgba(0, 0, 0, 0.45);
 		}
@@ -763,6 +801,10 @@ $custom-border-color: #2c3044;

 		.select-group {
 			.group-label {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
 				color: rgba(0, 0, 0, 0.85);
 				background-color: #fafafa;
 				border-bottom: 1px solid #f0f0f0;
--- a/frontend/src/components/NewSelect/types.ts
+++ b/frontend/src/components/NewSelect/types.ts
@@ -28,6 +28,8 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
 	showIncompleteDataMessage?: boolean;
+	showRetryButton?: boolean;
+	isDynamicVariable?: boolean;
 }

 export interface CustomTagProps {
@@ -60,4 +62,8 @@ export interface CustomMultiSelectProps
 	onRetry?: () => void;
 	maxTagTextLength?: number;
 	showIncompleteDataMessage?: boolean;
+	showLabels?: boolean;
+	enableRegexOption?: boolean;
+	isDynamicVariable?: boolean;
+	showRetryButton?: boolean;
 }
--- a/frontend/src/components/NewSelect/utils.ts
+++ b/frontend/src/components/NewSelect/utils.ts
@@ -1,10 +1,10 @@
 /* eslint-disable sonarjs/cognitive-complexity */
+import { uniqueOptions } from 'container/NewDashboard/DashboardVariablesSelection/util';
+
 import { OptionData } from './types';

 export const SPACEKEY = ' ';

-export const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
-
 export const prioritizeOrAddOptionForSingleSelect = (
 	options: OptionData[],
 	value: string,
@@ -100,8 +100,10 @@ export const prioritizeOrAddOptionForMultiSelect = (
 		label: labels?.[value] ?? value, // Use provided label or default to value
 	}));

+	const flatOutSelectedOptions = uniqueOptions([...newOptions, ...foundOptions]);
+
 	// Add found & new options to the top
-	return [...newOptions, ...foundOptions, ...filteredOptions];
+	return [...flatOutSelectedOptions, ...filteredOptions];
 };

 /**
--- a/frontend/src/components/OrderBy/ListViewOrderBy.tsx
+++ b/frontend/src/components/OrderBy/ListViewOrderBy.tsx
@@ -102,7 +102,7 @@ function ListViewOrderBy({
 			onChange={onChange}
 			onSearch={handleSearch}
 			notFoundContent={<Loader isLoading={isLoading} />}
-			placeholder="Select an attribute"
+			placeholder="Select a field"
 			style={{ width: 200 }}
 			options={selectOptions}
 			filterOption={(input, option): boolean =>
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss
@@ -22,6 +22,10 @@
 		flex: 1;

 		position: relative;
+
+		.qb-trace-view-selector-container {
+			padding: 12px 8px 8px 8px;
+		}
 	}

 	.qb-content-section {
@@ -179,7 +183,7 @@
 		flex-direction: column;
 		gap: 8px;

-		margin-left: 32px;
+		margin-left: 26px;
 		padding-bottom: 16px;
 		padding-left: 8px;

@@ -195,8 +199,8 @@
 			}

 			.formula-container {
-				margin-left: 82px;
-				padding: 4px 0px;
+				padding: 8px;
+				margin-left: 74px;

 				.ant-col {
 					&::before {
@@ -291,6 +295,13 @@
 					);
 				}
 			}
+			.qb-trace-operator-button-container {
+				&-text {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+				}
+			}
 		}
 	}

@@ -331,6 +342,12 @@
 					);
 					left: 15px;
 				}
+
+				&.has-trace-operator {
+					&::before {
+						height: 0px;
+					}
+				}
 			}

 			.formula-name {
@@ -347,7 +364,7 @@

 				&::before {
 					content: '';
-					height: 65px;
+					height: 128px;
 					content: '';
 					position: absolute;
 					left: 0;
@@ -387,6 +404,7 @@
 	}

 	.qb-search-filter-container {
+		flex: 1;
 		display: flex;
 		flex-direction: row;
 		align-items: flex-start;
--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
@@ -5,11 +5,13 @@ import { Formula } from 'container/QueryBuilder/components/Formula';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { memo, useEffect, useMemo, useRef } from 'react';
+import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';

 import { QueryBuilderV2Provider } from './QueryBuilderV2Context';
 import QueryFooter from './QueryV2/QueryFooter/QueryFooter';
 import { QueryV2 } from './QueryV2/QueryV2';
+import TraceOperator from './QueryV2/TraceOperator/TraceOperator';

 export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	config,
@@ -18,6 +20,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	queryComponents,
 	isListViewPanel = false,
 	showOnlyWhereClause = false,
+	showTraceOperator = false,
 	version,
 }: QueryBuilderProps): JSX.Element {
 	const {
@@ -25,6 +28,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		addNewBuilderQuery,
 		addNewFormula,
 		handleSetConfig,
+		addTraceOperator,
 		panelType,
 		initialDataSource,
 	} = useQueryBuilder();
@@ -54,6 +58,11 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		newPanelType,
 	]);

+	const isMultiQueryAllowed = useMemo(
+		() => !isListViewPanel || showTraceOperator,
+		[showTraceOperator, isListViewPanel],
+	);
+
 	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
 		const config: QueryBuilderProps['filterConfigs'] = {
 			stepInterval: { isHidden: true, isDisabled: true },
@@ -97,11 +106,60 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		listViewTracesFilterConfigs,
 	]);

+	const traceOperator = useMemo((): IBuilderTraceOperator | undefined => {
+		if (
+			currentQuery.builder.queryTraceOperator &&
+			currentQuery.builder.queryTraceOperator.length > 0
+		) {
+			return currentQuery.builder.queryTraceOperator[0];
+		}
+
+		return undefined;
+	}, [currentQuery.builder.queryTraceOperator]);
+
+	const hasAtLeastOneTraceQuery = useMemo(
+		() =>
+			currentQuery.builder.queryData.some(
+				(query) => query.dataSource === DataSource.TRACES,
+			),
+		[currentQuery.builder.queryData],
+	);
+
+	const hasTraceOperator = useMemo(
+		() => showTraceOperator && hasAtLeastOneTraceQuery && Boolean(traceOperator),
+		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
+	);
+
+	const shouldShowFooter = useMemo(
+		() =>
+			(!showOnlyWhereClause && !isListViewPanel) ||
+			(currentDataSource === DataSource.TRACES && showTraceOperator),
+		[isListViewPanel, showTraceOperator, showOnlyWhereClause, currentDataSource],
+	);
+
+	const showQueryList = useMemo(
+		() => (!showOnlyWhereClause && !isListViewPanel) || showTraceOperator,
+		[isListViewPanel, showOnlyWhereClause, showTraceOperator],
+	);
+
+	const showFormula = useMemo(() => {
+		if (currentDataSource === DataSource.TRACES) {
+			return !isListViewPanel;
+		}
+
+		return true;
+	}, [isListViewPanel, currentDataSource]);
+
+	const showAddTraceOperator = useMemo(
+		() => showTraceOperator && !traceOperator && hasAtLeastOneTraceQuery,
+		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
+	);
+
 	return (
 		<QueryBuilderV2Provider>
 			<div className="query-builder-v2">
 				<div className="qb-content-container">
-					{isListViewPanel && (
+					{!isMultiQueryAllowed ? (
 						<QueryV2
 							ref={containerRef}
 							key={currentQuery.builder.queryData[0].queryName}
@@ -109,15 +167,16 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							query={currentQuery.builder.queryData[0]}
 							filterConfigs={queryFilterConfigs}
 							queryComponents={queryComponents}
+							isMultiQueryAllowed={isMultiQueryAllowed}
+							showTraceOperator={showTraceOperator}
+							hasTraceOperator={hasTraceOperator}
 							version={version}
 							isAvailableToDisable={false}
 							queryVariant={config?.queryVariant || 'dropdown'}
 							showOnlyWhereClause={showOnlyWhereClause}
 							isListViewPanel={isListViewPanel}
 						/>
-					)}
-
-					{!isListViewPanel &&
+					) : (
 						currentQuery.builder.queryData.map((query, index) => (
 							<QueryV2
 								ref={containerRef}
@@ -127,13 +186,17 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								filterConfigs={queryFilterConfigs}
 								queryComponents={queryComponents}
 								version={version}
+								isMultiQueryAllowed={isMultiQueryAllowed}
 								isAvailableToDisable={false}
+								showTraceOperator={showTraceOperator}
+								hasTraceOperator={hasTraceOperator}
 								queryVariant={config?.queryVariant || 'dropdown'}
 								showOnlyWhereClause={showOnlyWhereClause}
 								isListViewPanel={isListViewPanel}
 								signalSource={config?.signalSource || ''}
 							/>
-						))}
+						))
+					)}

 					{!showOnlyWhereClause && currentQuery.builder.queryFormulas.length > 0 && (
 						<div className="qb-formulas-container">
@@ -158,15 +221,25 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 						</div>
 					)}

-					{!showOnlyWhereClause && !isListViewPanel && (
+					{shouldShowFooter && (
 						<QueryFooter
+							showAddFormula={showFormula}
 							addNewBuilderQuery={addNewBuilderQuery}
 							addNewFormula={addNewFormula}
+							addTraceOperator={addTraceOperator}
+							showAddTraceOperator={showAddTraceOperator}
+						/>
+					)}
+
+					{hasTraceOperator && (
+						<TraceOperator
+							isListViewPanel={isListViewPanel}
+							traceOperator={traceOperator as IBuilderTraceOperator}
 						/>
 					)}
 				</div>

-				{!showOnlyWhereClause && !isListViewPanel && (
+				{showQueryList && (
 					<div className="query-names-section">
 						{currentQuery.builder.queryData.map((query) => (
 							<div key={query.queryName} className="query-name">
--- a/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.tsx
@@ -160,7 +160,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 											label="Seconds"
 											placeholder="Auto"
 											labelAfter
-											initialValue={query?.stepInterval ?? undefined}
+											initialValue={query?.stepInterval ?? null}
 										/>
 									</div>
 								</div>
@@ -283,7 +283,7 @@ const MetricsAggregateSection = memo(function MetricsAggregateSection({
 									label="Seconds"
 									placeholder="Auto"
 									labelAfter
-									initialValue={query?.stepInterval ?? undefined}
+									initialValue={query?.stepInterval ?? null}
 									className="histogram-every-input"
 								/>
 							</div>
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
@@ -1,7 +1,11 @@
+.query-add-ons {
+	width: 100%;
+}
+
 .add-ons-list {
 	display: flex;
-	justify-content: space-between;
 	align-items: center;
+	gap: 16px;

 	.add-ons-tabs {
 		display: flex;
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
@@ -9,7 +9,7 @@ import { OrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/Orde
 import { ReduceToFilter } from 'container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { isEmpty } from 'lodash-es';
+import { get, isEmpty } from 'lodash-es';
 import { BarChart2, ChevronUp, ExternalLink, ScrollText } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -34,6 +34,14 @@ const ADD_ONS_KEYS = {
 	LEGEND_FORMAT: 'legend_format',
 };

+const ADD_ONS_KEYS_TO_QUERY_PATH = {
+	[ADD_ONS_KEYS.GROUP_BY]: 'groupBy',
+	[ADD_ONS_KEYS.HAVING]: 'having.expression',
+	[ADD_ONS_KEYS.ORDER_BY]: 'orderBy',
+	[ADD_ONS_KEYS.LIMIT]: 'limit',
+	[ADD_ONS_KEYS.LEGEND_FORMAT]: 'legend',
+};
+
 const ADD_ONS = [
 	{
 		icon: <BarChart2 size={14} />,
@@ -91,6 +99,9 @@ const REDUCE_TO = {
 		'https://signoz.io/docs/userguide/query-builder-v5/#reduce-operations',
 };

+const hasValue = (value: unknown): boolean =>
+	value != null && value !== '' && !(Array.isArray(value) && value.length === 0);
+
 // Custom tooltip content component
 function TooltipContent({
 	label,
@@ -144,6 +155,7 @@ function QueryAddOns({
 	showReduceTo,
 	panelType,
 	index,
+	isForTraceOperator = false,
 }: {
 	query: IBuilderQuery;
 	version: string;
@@ -151,6 +163,7 @@ function QueryAddOns({
 	showReduceTo: boolean;
 	panelType: PANEL_TYPES | null;
 	index: number;
+	isForTraceOperator?: boolean;
 }): JSX.Element {
 	const [addOns, setAddOns] = useState<AddOn[]>(ADD_ONS);

@@ -160,6 +173,7 @@ function QueryAddOns({
 		index,
 		query,
 		entityVersion: '',
+		isForTraceOperator,
 	});

 	const { handleSetQueryData } = useQueryBuilder();
@@ -192,21 +206,29 @@ function QueryAddOns({
 			}
 		}

-		// add reduce to if showReduceTo is true
 		if (showReduceTo) {
 			filteredAddOns = [...filteredAddOns, REDUCE_TO];
 		}
-
 		setAddOns(filteredAddOns);

-		// Filter selectedViews to only include add-ons present in filteredAddOns
-		setSelectedViews((prevSelectedViews) =>
-			prevSelectedViews.filter((view) =>
-				filteredAddOns.some((addOn) => addOn.key === view.key),
+		const activeAddOnKeys = new Set(
+			Object.entries(ADD_ONS_KEYS_TO_QUERY_PATH)
+				.filter(([, path]) => hasValue(get(query, path)))
+				.map(([key]) => key),
+		);
+
+		const availableAddOnKeys = new Set(filteredAddOns.map((addOn) => addOn.key));
+
+		// Filter and set selected views: add-ons that are both active and available
+		setSelectedViews(
+			ADD_ONS.filter(
+				(addOn) =>
+					activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
 			),
 		);
+
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [panelType, isListViewPanel, query.dataSource]);
+	}, [panelType, isListViewPanel, query]);

 	const handleOptionClick = (e: RadioChangeEvent): void => {
 		if (selectedViews.find((view) => view.key === e.target.value.key)) {
@@ -282,7 +304,7 @@ function QueryAddOns({
 			{selectedViews.length > 0 && (
 				<div className="selected-add-ons-content">
 					{selectedViews.find((view) => view.key === 'group_by') && (
-						<div className="add-on-content">
+						<div className="add-on-content" data-testid="group-by-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
 									title={
@@ -318,7 +340,7 @@ function QueryAddOns({
 						</div>
 					)}
 					{selectedViews.find((view) => view.key === 'having') && (
-						<div className="add-on-content">
+						<div className="add-on-content" data-testid="having-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
 									title={
@@ -350,7 +372,7 @@ function QueryAddOns({
 						</div>
 					)}
 					{selectedViews.find((view) => view.key === 'limit') && (
-						<div className="add-on-content">
+						<div className="add-on-content" data-testid="limit-content">
 							<InputWithLabel
 								label="Limit"
 								onChange={handleChangeLimit}
@@ -364,7 +386,7 @@ function QueryAddOns({
 						</div>
 					)}
 					{selectedViews.find((view) => view.key === 'order_by') && (
-						<div className="add-on-content">
+						<div className="add-on-content" data-testid="order-by-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
 									title={
@@ -402,7 +424,7 @@ function QueryAddOns({
 					)}

 					{selectedViews.find((view) => view.key === 'reduce_to') && showReduceTo && (
-						<div className="add-on-content">
+						<div className="add-on-content" data-testid="reduce-to-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
 									title={
@@ -433,7 +455,7 @@ function QueryAddOns({
 					)}

 					{selectedViews.find((view) => view.key === 'legend_format') && (
-						<div className="add-on-content">
+						<div className="add-on-content" data-testid="legend-format-content">
 							<InputWithLabel
 								label="Legend format"
 								placeholder="Write legend format"
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx
@@ -4,7 +4,10 @@ import { Tooltip } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useMemo } from 'react';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	IBuilderQuery,
+	IBuilderTraceOperator,
+} from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';

 import QueryAggregationSelect from './QueryAggregationSelect';
@@ -20,7 +23,7 @@ function QueryAggregationOptions({
 	panelType?: string;
 	onAggregationIntervalChange: (value: number) => void;
 	onChange?: (value: string) => void;
-	queryData: IBuilderQuery;
+	queryData: IBuilderQuery | IBuilderTraceOperator;
 }): JSX.Element {
 	const showAggregationInterval = useMemo(() => {
 		// eslint-disable-next-line sonarjs/prefer-single-boolean-return
@@ -81,9 +84,7 @@ function QueryAggregationOptions({

 						<div className="query-aggregation-interval-input-container">
 							<InputWithLabel
-								initialValue={
-									queryData?.stepInterval ? queryData?.stepInterval : undefined
-								}
+								initialValue={queryData?.stepInterval ? queryData?.stepInterval : null}
 								className="query-aggregation-interval-input"
 								label="Seconds"
 								placeholder="Auto"
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx
@@ -154,15 +154,23 @@ function QueryAggregationSelect({
 	const isDarkMode = useIsDarkMode();
 	const { setAggregationOptions } = useQueryBuilderV2Context();

+	const formatAggregations = useCallback(
+		(aggregations: any[] | undefined): string =>
+			aggregations
+				?.map(({ expression, alias }: any) =>
+					alias ? `${expression} as ${alias}` : expression,
+				)
+				.join(' ') || '',
+		[],
+	);
+
 	const [input, setInput] = useState(
-		queryData?.aggregations?.map((i: any) => i.expression).join(' ') || '',
+		formatAggregations(queryData?.aggregations),
 	);

 	useEffect(() => {
-		setInput(
-			queryData?.aggregations?.map((i: any) => i.expression).join(' ') || '',
-		);
-	}, [queryData?.aggregations]);
+		setInput(formatAggregations(queryData?.aggregations));
+	}, [queryData?.aggregations, formatAggregations]);

 	const [cursorPos, setCursorPos] = useState(0);
 	const [functionArgPairs, setFunctionArgPairs] = useState<
@@ -678,7 +686,10 @@ function QueryAggregationSelect({
 				>
 					<Info
 						size={14}
-						style={{ opacity: 0.9, color: isDarkMode ? '#ffffff' : '#000000' }}
+						style={{
+							opacity: 0.9,
+							color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+						}}
 					/>
 				</div>
 			</Tooltip>
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx
@@ -1,12 +1,20 @@
+/* eslint-disable react/require-default-props */
 import { Button, Tooltip, Typography } from 'antd';
-import { Plus, Sigma } from 'lucide-react';
+import { DraftingCompass, Plus, Sigma } from 'lucide-react';
+import BetaTag from 'periscope/components/BetaTag/BetaTag';

 export default function QueryFooter({
 	addNewBuilderQuery,
 	addNewFormula,
+	addTraceOperator,
+	showAddFormula = true,
+	showAddTraceOperator = false,
 }: {
 	addNewBuilderQuery: () => void;
 	addNewFormula: () => void;
+	addTraceOperator?: () => void;
+	showAddTraceOperator: boolean;
+	showAddFormula?: boolean;
 }): JSX.Element {
 	return (
 		<div className="qb-footer">
@@ -22,32 +30,65 @@ export default function QueryFooter({
 					</Tooltip>
 				</div>

-				<div className="qb-add-formula">
-					<Tooltip
-						title={
-							<div style={{ textAlign: 'center' }}>
-								Add New Formula
-								<Typography.Link
-									href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
-									target="_blank"
-									style={{ textDecoration: 'underline' }}
-								>
-									{' '}
-									<br />
-									Learn more
-								</Typography.Link>
-							</div>
-						}
-					>
-						<Button
-							className="add-formula-button periscope-btn secondary"
-							icon={<Sigma size={16} />}
-							onClick={addNewFormula}
+				{showAddFormula && (
+					<div className="qb-add-formula">
+						<Tooltip
+							title={
+								<div style={{ textAlign: 'center' }}>
+									Add New Formula
+									<Typography.Link
+										href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-advanced-comparisons"
+										target="_blank"
+										style={{ textDecoration: 'underline' }}
+									>
+										{' '}
+										<br />
+										Learn more
+									</Typography.Link>
+								</div>
+							}
 						>
-							Add Formula
-						</Button>
-					</Tooltip>
-				</div>
+							<Button
+								className="add-formula-button periscope-btn secondary"
+								icon={<Sigma size={16} />}
+								onClick={addNewFormula}
+							>
+								Add Formula
+							</Button>
+						</Tooltip>
+					</div>
+				)}
+				{showAddTraceOperator && (
+					<div className="qb-trace-operator-button-container">
+						<Tooltip
+							title={
+								<div style={{ textAlign: 'center' }}>
+									Add Trace Matching
+									<Typography.Link
+										href="https://signoz.io/docs/userguide/query-builder-v5/#multi-query-analysis-trace-operators"
+										target="_blank"
+										style={{ textDecoration: 'underline' }}
+									>
+										{' '}
+										<br />
+										Learn more
+									</Typography.Link>
+								</div>
+							}
+						>
+							<Button
+								className="add-trace-operator-button periscope-btn secondary"
+								icon={<DraftingCompass size={16} />}
+								onClick={(): void => addTraceOperator?.()}
+							>
+								<div className="qb-trace-operator-button-container-text">
+									Add Trace Matching
+									<BetaTag />
+								</div>
+							</Button>
+						</Tooltip>
+					</div>
+				)}
 			</div>
 		</div>
 	);
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss
@@ -7,6 +7,7 @@
 		'Helvetica Neue', sans-serif;

 	.query-where-clause-editor-container {
+		position: relative;
 		display: flex;
 		flex-direction: row;

--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
@@ -23,6 +23,7 @@ import cx from 'classnames';
 import {
 	negationQueryOperatorSuggestions,
 	OPERATORS,
+	QUERY_BUILDER_FUNCTIONS,
 	QUERY_BUILDER_KEY_TYPES,
 	QUERY_BUILDER_OPERATORS_BY_KEY_TYPE,
 	queryOperatorSuggestions,
@@ -32,12 +33,14 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
 import { Info, TriangleAlert } from 'lucide-react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
 	IDetailedError,
 	IQueryContext,
 	IValidationResult,
 } from 'types/antlrQueryTypes';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { DataSource } from 'types/common/queryBuilder';
@@ -161,13 +164,15 @@ function QuerySearch({

 	const { handleRunQuery } = useQueryBuilder();

-	// const {
-	// 	data: queryKeySuggestions,
-	// 	refetch: refetchQueryKeySuggestions,
-	// } = useGetQueryKeySuggestions({
-	// 	signal: dataSource,
-	// 	name: searchText || '',
-	// });
+	const { selectedDashboard } = useDashboard();
+
+	const dynamicVariables = useMemo(
+		() =>
+			Object.values(selectedDashboard?.data?.variables || {})?.filter(
+				(variable: IDashboardVariable) => variable.type === 'DYNAMIC',
+			),
+		[selectedDashboard],
+	);

 	// Add back the generateOptions function and useEffect
 	const generateOptions = (keys: {
@@ -982,6 +987,25 @@ function QuerySearch({
 				option.label.toLowerCase().includes(searchText),
 			);

+			// Add dynamic variables suggestions for the current key
+			const variableName = dynamicVariables?.find(
+				(variable) => variable?.dynamicVariablesAttribute === keyName,
+			)?.name;
+
+			if (variableName) {
+				const variableValue = `$${variableName}`;
+				const variableOption = {
+					label: variableValue,
+					type: 'variable',
+					apply: variableValue,
+				};
+
+				// Add variable suggestion at the beginning if it matches the search text
+				if (variableValue.toLowerCase().includes(searchText.toLowerCase())) {
+					options = [variableOption, ...options];
+				}
+			}
+
 			// Trigger fetch only if needed
 			const shouldFetch =
 				// Fetch only if key is available
@@ -1034,6 +1058,9 @@ function QuerySearch({
 				} else if (option.type === 'array') {
 					// Arrays are already formatted as arrays
 					processedOption.apply = option.label;
+				} else if (option.type === 'variable') {
+					// Variables should be used as-is (they already have the $ prefix)
+					processedOption.apply = option.label;
 				}

 				return processedOption;
@@ -1050,11 +1077,11 @@ function QuerySearch({
 		}

 		if (queryContext.isInFunction) {
-			options = [
-				{ label: 'HAS', type: 'function' },
-				{ label: 'HASANY', type: 'function' },
-				{ label: 'HASALL', type: 'function' },
-			];
+			options = Object.values(QUERY_BUILDER_FUNCTIONS).map((option) => ({
+				label: option,
+				apply: `${option}()`,
+				type: 'function',
+			}));

 			// Add space after selection for functions
 			const optionsWithSpace = addSpaceToOptions(options);
@@ -1243,7 +1270,10 @@ function QuerySearch({
 					>
 						<Info
 							size={14}
-							style={{ opacity: 0.9, color: isDarkMode ? '#ffffff' : '#000000' }}
+							style={{
+								opacity: 0.9,
+								color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+							}}
 						/>
 					</a>
 				</Tooltip>
@@ -1292,7 +1322,7 @@ function QuerySearch({
 										if (onRun && typeof onRun === 'function') {
 											onRun(query);
 										} else {
-											handleRunQuery(true, true);
+											handleRunQuery();
 										}
 										return true;
 									},
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 import { Dropdown } from 'antd';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
@@ -26,9 +27,12 @@ export const QueryV2 = memo(function QueryV2({
 	query,
 	filterConfigs,
 	isListViewPanel = false,
+	showTraceOperator = false,
+	hasTraceOperator = false,
 	version,
 	showOnlyWhereClause = false,
 	signalSource = '',
+	isMultiQueryAllowed = false,
 }: QueryProps & { ref: React.RefObject<HTMLDivElement> }): JSX.Element {
 	const { cloneQuery, panelType } = useQueryBuilder();

@@ -75,6 +79,15 @@ export const QueryV2 = memo(function QueryV2({
 		dataSource,
 	]);

+	const showInlineQuerySearch = useMemo(() => {
+		if (!showTraceOperator) {
+			return false;
+		}
+		return (
+			dataSource === DataSource.TRACES && (hasTraceOperator || isListViewPanel)
+		);
+	}, [hasTraceOperator, isListViewPanel, showTraceOperator, dataSource]);
+
 	const handleChangeAggregateEvery = useCallback(
 		(value: IBuilderQuery['stepInterval']) => {
 			handleChangeQueryData('stepInterval', value);
@@ -108,11 +121,12 @@ export const QueryV2 = memo(function QueryV2({
 			ref={ref}
 		>
 			<div className="qb-content-section">
-				{!showOnlyWhereClause && (
+				{(!showOnlyWhereClause || showTraceOperator) && (
 					<div className="qb-header-container">
 						<div className="query-actions-container">
 							<div className="query-actions-left-container">
 								<QBEntityOptions
+									hasTraceOperator={hasTraceOperator}
 									isMetricsDataSource={dataSource === DataSource.METRICS}
 									showFunctions={
 										(version && version === ENTITY_VERSION_V4) ||
@@ -122,6 +136,7 @@ export const QueryV2 = memo(function QueryV2({
 										false
 									}
 									isCollapsed={isCollapsed}
+									showTraceOperator={showTraceOperator}
 									entityType="query"
 									entityData={query}
 									onToggleVisibility={handleToggleDisableQuery}
@@ -139,7 +154,28 @@ export const QueryV2 = memo(function QueryV2({
 								/>
 							</div>

-							{!isListViewPanel && (
+							{!isCollapsed && showInlineQuerySearch && (
+								<div className="qb-search-filter-container">
+									<div className="query-search-container">
+										<QuerySearch
+											key={`query-search-${query.queryName}-${query.dataSource}`}
+											onChange={handleSearchChange}
+											queryData={query}
+											dataSource={dataSource}
+											signalSource={signalSource}
+										/>
+									</div>
+
+									{showSpanScopeSelector && (
+										<div className="traces-search-filter-container">
+											<div className="traces-search-filter-in">in</div>
+											<SpanScopeSelector query={query} />
+										</div>
+									)}
+								</div>
+							)}
+
+							{isMultiQueryAllowed && (
 								<Dropdown
 									className="query-actions-dropdown"
 									menu={{
@@ -181,28 +217,31 @@ export const QueryV2 = memo(function QueryV2({
 								</div>
 							)}

-							<div className="qb-search-filter-container">
-								<div className="query-search-container">
-									<QuerySearch
-										key={`query-search-${query.queryName}-${query.dataSource}`}
-										onChange={handleSearchChange}
-										queryData={query}
-										dataSource={dataSource}
-										signalSource={signalSource}
-									/>
-								</div>
-
-								{showSpanScopeSelector && (
-									<div className="traces-search-filter-container">
-										<div className="traces-search-filter-in">in</div>
-										<SpanScopeSelector query={query} />
+							{!showInlineQuerySearch && (
+								<div className="qb-search-filter-container">
+									<div className="query-search-container">
+										<QuerySearch
+											key={`query-search-${query.queryName}-${query.dataSource}`}
+											onChange={handleSearchChange}
+											queryData={query}
+											dataSource={dataSource}
+											signalSource={signalSource}
+										/>
 									</div>
-								)}
-							</div>
+
+									{showSpanScopeSelector && (
+										<div className="traces-search-filter-container">
+											<div className="traces-search-filter-in">in</div>
+											<SpanScopeSelector query={query} />
+										</div>
+									)}
+								</div>
+							)}
 						</div>

 						{!showOnlyWhereClause &&
 							!isListViewPanel &&
+							!(hasTraceOperator && dataSource === DataSource.TRACES) &&
 							dataSource !== DataSource.METRICS && (
 								<QueryAggregation
 									dataSource={dataSource}
@@ -225,16 +264,17 @@ export const QueryV2 = memo(function QueryV2({
 							/>
 						)}

-						{!showOnlyWhereClause && (
-							<QueryAddOns
-								index={index}
-								query={query}
-								version="v3"
-								isListViewPanel={isListViewPanel}
-								showReduceTo={showReduceTo}
-								panelType={panelType}
-							/>
-						)}
+						{!showOnlyWhereClause &&
+							!(hasTraceOperator && query.dataSource === DataSource.TRACES) && (
+								<QueryAddOns
+									index={index}
+									query={query}
+									version="v3"
+									isListViewPanel={isListViewPanel}
+									showReduceTo={showReduceTo}
+									panelType={panelType}
+								/>
+							)}
 					</div>
 				)}
 			</div>
--- a/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss
@@ -0,0 +1,159 @@
+.qb-trace-operator {
+	padding: 8px;
+	display: flex;
+	gap: 8px;
+
+	&.non-list-view {
+		padding-left: 40px;
+		position: relative;
+
+		&::before {
+			content: '';
+			position: absolute;
+			top: 24px;
+			left: 12px;
+			height: 88px;
+			width: 1px;
+			background: repeating-linear-gradient(
+				to bottom,
+				var(--bg-slate-400),
+				var(--bg-slate-400) 4px,
+				transparent 4px,
+				transparent 8px
+			);
+		}
+	}
+
+	&-arrow {
+		position: relative;
+		&::before {
+			content: '';
+			position: absolute;
+			top: 16px;
+			transform: translateY(-50%);
+			left: -26px;
+			height: 1px;
+			width: 20px;
+			background: repeating-linear-gradient(
+				to right,
+				var(--bg-slate-400),
+				var(--bg-slate-400) 4px,
+				transparent 4px,
+				transparent 8px
+			);
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			top: 16px;
+			left: -10px;
+			transform: translateY(-50%);
+			height: 4px;
+			width: 4px;
+			border-radius: 50%;
+			background-color: var(--bg-slate-400);
+		}
+	}
+
+	&-input {
+		width: 100%;
+	}
+
+	&-container {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&-aggregation-container {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&-add-ons-container {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		gap: 16px;
+	}
+
+	&-label-with-input {
+		position: relative;
+		display: flex;
+		align-items: center;
+		flex-direction: row;
+
+		border-radius: 2px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+
+		.qb-trace-operator-editor-container {
+			flex: 1;
+		}
+
+		&.arrow-left {
+			&::before {
+				content: '';
+				position: absolute;
+				left: -16px;
+				top: 50%;
+				height: 1px;
+				width: 16px;
+				background-color: var(--bg-slate-400);
+			}
+		}
+
+		.label {
+			color: var(--bg-vanilla-400);
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			padding: 0px 8px;
+			border-right: 1px solid var(--bg-slate-400);
+		}
+	}
+}
+
+.lightMode {
+	.qb-trace-operator {
+		&-arrow {
+			&::before {
+				background: repeating-linear-gradient(
+					to right,
+					var(--bg-vanilla-300),
+					var(--bg-vanilla-300) 4px,
+					transparent 4px,
+					transparent 8px
+				);
+			}
+			&::after {
+				background-color: var(--bg-vanilla-300);
+			}
+		}
+		&.non-list-view {
+			&::before {
+				background: repeating-linear-gradient(
+					to bottom,
+					var(--bg-vanilla-300),
+					var(--bg-vanilla-300) 4px,
+					transparent 4px,
+					transparent 8px
+				);
+			}
+		}
+
+		&-label-with-input {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+
+			.label {
+				color: var(--bg-ink-500) !important;
+				border-right: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx
@@ -0,0 +1,119 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable sonarjs/no-duplicate-string */
+
+import './TraceOperator.styles.scss';
+
+import { Button, Tooltip, Typography } from 'antd';
+import cx from 'classnames';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { Trash2 } from 'lucide-react';
+import { useCallback } from 'react';
+import {
+	IBuilderQuery,
+	IBuilderTraceOperator,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import QueryAddOns from '../QueryAddOns/QueryAddOns';
+import QueryAggregation from '../QueryAggregation/QueryAggregation';
+import TraceOperatorEditor from './TraceOperatorEditor';
+
+export default function TraceOperator({
+	traceOperator,
+	isListViewPanel = false,
+}: {
+	traceOperator: IBuilderTraceOperator;
+	isListViewPanel?: boolean;
+}): JSX.Element {
+	const { panelType, removeTraceOperator } = useQueryBuilder();
+	const { handleChangeQueryData } = useQueryOperations({
+		index: 0,
+		query: traceOperator,
+		entityVersion: '',
+		isForTraceOperator: true,
+	});
+
+	const handleTraceOperatorChange = useCallback(
+		(traceOperatorExpression: string) => {
+			handleChangeQueryData('expression', traceOperatorExpression);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeAggregateEvery = useCallback(
+		(value: IBuilderQuery['stepInterval']) => {
+			handleChangeQueryData('stepInterval', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeAggregation = useCallback(
+		(value: string) => {
+			handleChangeQueryData('aggregations', [
+				{
+					expression: value,
+				},
+			]);
+		},
+		[handleChangeQueryData],
+	);
+
+	return (
+		<div className={cx('qb-trace-operator', !isListViewPanel && 'non-list-view')}>
+			<div className="qb-trace-operator-container">
+				<div
+					className={cx(
+						'qb-trace-operator-label-with-input',
+						!isListViewPanel && 'qb-trace-operator-arrow',
+					)}
+				>
+					<Typography.Text className="label">TRACE OPERATOR</Typography.Text>
+					<div className="qb-trace-operator-editor-container">
+						<TraceOperatorEditor
+							value={traceOperator?.expression || ''}
+							traceOperator={traceOperator}
+							onChange={handleTraceOperatorChange}
+						/>
+					</div>
+				</div>
+
+				{!isListViewPanel && (
+					<div className="qb-trace-operator-aggregation-container">
+						<div className={cx(!isListViewPanel && 'qb-trace-operator-arrow')}>
+							<QueryAggregation
+								dataSource={DataSource.TRACES}
+								key={`query-search-${traceOperator.queryName}`}
+								panelType={panelType || undefined}
+								onAggregationIntervalChange={handleChangeAggregateEvery}
+								onChange={handleChangeAggregation}
+								queryData={traceOperator}
+							/>
+						</div>
+						<div
+							className={cx(
+								'qb-trace-operator-add-ons-container',
+								!isListViewPanel && 'qb-trace-operator-arrow',
+							)}
+						>
+							<QueryAddOns
+								index={0}
+								query={traceOperator}
+								version="v3"
+								isForTraceOperator
+								isListViewPanel={false}
+								showReduceTo={false}
+								panelType={panelType}
+							/>
+						</div>
+					</div>
+				)}
+			</div>
+			<Tooltip title="Remove Trace Operator" placement="topLeft">
+				<Button className="periscope-btn ghost" onClick={removeTraceOperator}>
+					<Trash2 size={14} />
+				</Button>
+			</Tooltip>
+		</div>
+	);
+}
--- a/Show More
+++ b/Show More