Merge branch 'feat/cross-filtering-2' of github.com:SigNoz/signoz into feat/interactive-dashbaord-v3

Merge branch 'SIG-5603-dyn-var' of github.com:SigNoz/signoz into feat/cross-filtering-2
Merge branch 'main' of github.com:SigNoz/signoz into feat/cross-filtering-2
2025-09-05 20:59:03 +05:30 · 2025-09-05 20:53:18 +05:30 · 2025-09-05 20:42:31 +05:30 · 2025-09-05 19:25:46 +05:30 · 2025-09-05 19:24:35 +05:30 · 2025-09-05 17:47:07 +05:30
617 changed files with 33302 additions and 6918 deletions
--- a/.devenv/docker/clickhouse/compose.yaml
+++ b/.devenv/docker/clickhouse/compose.yaml
@@ -40,7 +40,7 @@ services:
      timeout: 5s
      retries: 3
  schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.129.0
+    image: signoz/signoz-schema-migrator:v0.129.2
    container_name: schema-migrator-sync
    command:
      - sync
@@ -53,7 +53,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.2
    container_name: schema-migrator-async
    command:
      - async
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -42,3 +42,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/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/deploy/docker-swarm/docker-compose.ha.yaml
+++ b/deploy/docker-swarm/docker-compose.ha.yaml
@@ -174,7 +174,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.93.0
    command:
      - --config=/root/config/prometheus.yml
    ports:
@@ -207,7 +207,7 @@ services:
      retries: 3
  otel-collector:
    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.0
+    image: signoz/signoz-otel-collector:v0.129.2
    command:
      - --config=/etc/otel-collector-config.yaml
      - --manager-config=/etc/manager-config.yaml
@@ -231,7 +231,7 @@ services:
      - signoz
  schema-migrator:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.0
+    image: signoz/signoz-schema-migrator:v0.129.2
    deploy:
      restart_policy:
        condition: on-failure
--- a/deploy/docker-swarm/docker-compose.yaml
+++ b/deploy/docker-swarm/docker-compose.yaml
@@ -115,7 +115,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.93.0
    command:
      - --config=/root/config/prometheus.yml
    ports:
@@ -148,7 +148,7 @@ services:
      retries: 3
  otel-collector:
    !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.0
+    image: signoz/signoz-otel-collector:v0.129.2
    command:
      - --config=/etc/otel-collector-config.yaml
      - --manager-config=/etc/manager-config.yaml
@@ -174,7 +174,7 @@ services:
      - signoz
  schema-migrator:
    !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.0
+    image: signoz/signoz-schema-migrator:v0.129.2
    deploy:
      restart_policy:
        condition: on-failure
--- a/deploy/docker/docker-compose.ha.yaml
+++ b/deploy/docker/docker-compose.ha.yaml
@@ -177,7 +177,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.93.0}
    container_name: signoz
    command:
      - --config=/root/config/prometheus.yml
@@ -211,7 +211,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.2}
    container_name: signoz-otel-collector
    command:
      - --config=/etc/otel-collector-config.yaml
@@ -237,7 +237,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.2}
    container_name: schema-migrator-sync
    command:
      - sync
@@ -248,7 +248,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.2}
    container_name: schema-migrator-async
    command:
      - async
--- a/deploy/docker/docker-compose.yaml
+++ b/deploy/docker/docker-compose.yaml
@@ -110,7 +110,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.93.0}
    container_name: signoz
    command:
      - --config=/root/config/prometheus.yml
@@ -143,7 +143,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.2}
    container_name: signoz-otel-collector
    command:
      - --config=/etc/otel-collector-config.yaml
@@ -165,7 +165,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.2}
    container_name: schema-migrator-sync
    command:
      - sync
@@ -177,7 +177,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.2}
    container_name: schema-migrator-async
    command:
      - async
--- 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
@@ -257,6 +257,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)
--- 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/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,18 @@
 		"@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/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 +99,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",
--- a/frontend/public/locales/en-GB/titles.json
+++ b/frontend/public/locales/en-GB/titles.json
@@ -48,6 +48,6 @@
 	"INFRASTRUCTURE_MONITORING_HOSTS": "SigNoz | Infra Monitoring",
 	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
-	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer",
-	"METER_EXPLORER_BASE": "SigNoz | Meter Explorer"
+	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
+	"METER": "SigNoz | Meter"
 }
--- a/frontend/public/locales/en/titles.json
+++ b/frontend/public/locales/en/titles.json
@@ -71,6 +71,6 @@
 	"METRICS_EXPLORER_VIEWS": "SigNoz | Metrics Explorer",
 	"API_MONITORING": "SigNoz | External APIs",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
-	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer",
-	"METER_EXPLORER_BASE": "SigNoz | Meter Explorer"
+	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
+	"METER": "SigNoz | Meter"
 }
--- 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/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -437,10 +437,10 @@ const routes: AppRoutes[] = [
 	},

 	{
-		path: ROUTES.METER_EXPLORER_BASE,
+		path: ROUTES.METER,
 		exact: true,
 		component: MeterExplorer,
-		key: 'METER_EXPLORER_BASE',
+		key: 'METER',
 		isPrivate: true,
 	},
 	{
--- a/frontend/src/api/dynamicVariables/tests/getFieldKeys.test.ts
+++ b/frontend/src/api/dynamicVariables/tests/getFieldKeys.test.ts
@@ -0,0 +1,114 @@
+/* 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 = {
+		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({
+			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({
+			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 our expected format
+		expect(result).toEqual({
+			statusCode: 200,
+			error: null,
+			message: 'success',
+			payload: mockSuccessResponse.data.data,
+		});
+	});
+});
--- a/frontend/src/api/dynamicVariables/tests/getFieldValues.test.ts
+++ b/frontend/src/api/dynamicVariables/tests/getFieldValues.test.ts
@@ -0,0 +1,209 @@
+/* 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({
+			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({
+			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({
+			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({
+			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', value: 'front' },
+		});
+	});
+
+	it('should call the API with time range parameters', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			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 = {
+			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.payload?.normalizedValues).toContain('frontend');
+		expect(result.payload?.normalizedValues).toContain('backend');
+		expect(result.payload?.normalizedValues).toContain('200');
+		expect(result.payload?.normalizedValues).toContain('404');
+		expect(result.payload?.normalizedValues).toContain('true');
+		expect(result.payload?.normalizedValues).toContain('false');
+		expect(result.payload?.normalizedValues?.length).toBe(6);
+	});
+
+	it('should return a properly formatted success response', async () => {
+		// Create mock response
+		const mockApiResponse = {
+			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
+		expect(result).toEqual({
+			statusCode: 200,
+			error: null,
+			message: 'success',
+			payload: 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
@@ -0,0 +1,34 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
+
+/**
+ * Get field keys for a given signal type
+ * @param signal Type of signal (traces, logs, metrics)
+ * @param name Optional search text
+ */
+export const getFieldKeys = async (
+	signal?: 'traces' | 'logs' | 'metrics',
+	name?: string,
+): Promise<SuccessResponse<FieldKeyResponse> | ErrorResponse> => {
+	const params: Record<string, string> = {};
+
+	if (signal) {
+		params.signal = encodeURIComponent(signal);
+	}
+
+	if (name) {
+		params.name = encodeURIComponent(name);
+	}
+
+	const response = await ApiBaseInstance.get('/fields/keys', { params });
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default getFieldKeys;
--- a/frontend/src/api/dynamicVariables/getFieldValues.ts
+++ b/frontend/src/api/dynamicVariables/getFieldValues.ts
@@ -0,0 +1,80 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
+
+/**
+ * Get field values for a given signal type and field name
+ * @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
+ */
+export const getFieldValues = async (
+	signal?: 'traces' | 'logs' | 'metrics',
+	name?: string,
+	searchText?: string,
+	startUnixMilli?: number,
+	endUnixMilli?: number,
+	existingQuery?: string,
+): Promise<SuccessResponse<FieldValueResponse> | ErrorResponse> => {
+	const params: Record<string, string> = {};
+
+	if (signal) {
+		params.signal = encodeURIComponent(signal);
+	}
+
+	if (name) {
+		params.name = encodeURIComponent(name);
+	}
+
+	if (searchText) {
+		params.searchText = encodeURIComponent(searchText);
+	}
+
+	if (startUnixMilli) {
+		params.startUnixMilli = Math.floor(startUnixMilli / 1000000).toString();
+	}
+
+	if (endUnixMilli) {
+		params.endUnixMilli = Math.floor(endUnixMilli / 1000000).toString();
+	}
+
+	if (existingQuery) {
+		params.existingQuery = existingQuery;
+	}
+
+	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 {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+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/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,633 @@
+/* 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()],
+				},
+			},
+			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: [] },
+			},
+			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: [] },
+			},
+			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: [] },
+			},
+			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: [],
+				},
+			},
+			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: [],
+				},
+			},
+			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: [],
+				},
+			},
+			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
@@ -24,6 +24,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 +67,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 +118,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 +126,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 +178,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 +213,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 +264,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()' }];
@@ -350,6 +407,7 @@ export const prepareQueryRangePayloadV5 = ({
 	formatForWeb,
 	originalGraphType,
 	fillGaps,
+	dynamicVariables,
 }: GetQueryResultsProps): PrepareQueryRangePayloadV5Result => {
 	let legendMap: Record<string, string> = {};
 	const requestType = mapPanelTypeToRequestType(graphType);
@@ -441,7 +499,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
@@ -137,5 +137,11 @@
 		h6 {
 			color: var(--text-ink-500);
 		}
+
+		code {
+			background-color: var(--bg-vanilla-300);
+			border: 1px solid var(--bg-vanilla-300);
+			color: var(--text-ink-500);
+		}
 	}
 }
--- 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',
@@ -154,8 +146,6 @@ export const getHostTracesQueryPayload = (
 				key: 'serviceName',
 				dataType: 'string',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'serviceName--string--tag--true',
 				isIndexed: false,
 			},
@@ -163,8 +153,6 @@ export const getHostTracesQueryPayload = (
 				key: 'name',
 				dataType: 'string',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'name--string--tag--true',
 				isIndexed: false,
 			},
@@ -172,8 +160,6 @@ export const getHostTracesQueryPayload = (
 				key: 'durationNano',
 				dataType: 'float64',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'durationNano--float64--tag--true',
 				isIndexed: false,
 			},
@@ -181,8 +167,6 @@ export const getHostTracesQueryPayload = (
 				key: 'httpMethod',
 				dataType: 'string',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'httpMethod--string--tag--true',
 				isIndexed: false,
 			},
@@ -190,8 +174,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',
--- 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;
--- 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/TableView/useTableView.tsx
+++ b/frontend/src/components/Logs/TableView/useTableView.tsx
@@ -56,6 +56,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,7 +85,10 @@ 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)}>
@@ -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
@@ -23,11 +23,13 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
+import { Virtuoso } from 'react-virtuoso';
 import { popupContainer } from 'utils/selectPopupContainer';

 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
+	handleScrollToBottom,
 	prioritizeOrAddOptionForMultiSelect,
 	SPACEKEY,
 } from './utils';
@@ -37,7 +39,7 @@ enum ToggleTagValue {
 	All = 'All',
 }

-const ALL_SELECTED_VALUE = '__all__'; // Constant for the special value
+const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value

 const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	placeholder = 'Search...',
@@ -62,6 +64,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	allowClear = false,
 	onRetry,
 	maxTagTextLength,
+	onDropdownVisibleChange,
+	showIncompleteDataMessage = false,
+	showLabels = false,
+	enableRegexOption = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -78,6 +84,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
 	const [visibleOptions, setVisibleOptions] = useState<OptionData[]>([]);
 	const isClickInsideDropdownRef = useRef(false);
+	const justOpenedRef = useRef<boolean>(false);
+	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);

 	// Convert single string value to array for consistency
 	const selectedValues = useMemo(
@@ -124,6 +132,12 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		return allAvailableValues.every((val) => selectedValues.includes(val));
 	}, [selectedValues, allAvailableValues, enableAllSelection]);

+	// Define allOptionShown earlier in the code
+	const allOptionShown = useMemo(
+		() => value === ALL_SELECTED_VALUE || value === 'ALL',
+		[value],
+	);
+
 	// Value passed to the underlying Ant Select component
 	const displayValue = useMemo(
 		() => (isAllSelected ? [ALL_SELECTED_VALUE] : selectedValues),
@@ -132,10 +146,18 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({

 	// ===== Internal onChange Handler =====
 	const handleInternalChange = useCallback(
-		(newValue: string | string[]): void => {
+		(newValue: string | string[], directCaller?: boolean): void => {
 			// Ensure newValue is an array
 			const currentNewValue = Array.isArray(newValue) ? newValue : [];

+			if (
+				(allOptionShown || isAllSelected) &&
+				!directCaller &&
+				currentNewValue.length === 0
+			) {
+				return;
+			}
+
 			if (!onChange) return;

 			// Case 1: Cleared (empty array or undefined)
@@ -144,7 +166,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				return;
 			}

-			// Case 2: "__all__" is selected (means select all actual values)
+			// Case 2: "__ALL__" is selected (means select all actual values)
 			if (currentNewValue.includes(ALL_SELECTED_VALUE)) {
 				const allActualOptions = allAvailableValues.map(
 					(v) => options.flat().find((o) => o.value === v) || { label: v, value: v },
@@ -175,7 +197,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				}
 			}
 		},
-		[onChange, allAvailableValues, options, enableAllSelection],
+		[
+			allOptionShown,
+			isAllSelected,
+			onChange,
+			allAvailableValues,
+			options,
+			enableAllSelection,
+		],
 	);

 	// ===== Existing Callbacks (potentially needing adjustment later) =====
@@ -510,13 +539,46 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}

 			// Normal single value handling
-			setSearchText(value.trim());
+			const trimmedValue = value.trim();
+			setSearchText(trimmedValue);
 			if (!isOpen) {
 				setIsOpen(true);
+				justOpenedRef.current = true;
 			}
-			if (onSearch) onSearch(value.trim());
+
+			// Reset active index when search changes if dropdown is open
+			if (isOpen && trimmedValue) {
+				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 =====
@@ -528,28 +590,34 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;

-			const parts = text.split(
-				new RegExp(
-					`(${searchQuery.replace(/[.*+?^${}()|[\\]\\]/g, '\\$&')})`,
-					'gi',
-				),
-			);
-			return (
-				<>
-					{parts.map((part, i) => {
-						// Create a unique key that doesn't rely on array index
-						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			try {
+				const parts = text.split(
+					new RegExp(
+						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
+						'gi',
+					),
+				);
+				return (
+					<>
+						{parts.map((part, i) => {
+							// Create a unique key that doesn't rely on array index
+							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;

-						return part.toLowerCase() === searchQuery.toLowerCase() ? (
-							<span key={uniqueKey} className="highlight-text">
-								{part}
-							</span>
-						) : (
-							part
-						);
-					})}
-				</>
-			);
+							return part.toLowerCase() === searchQuery.toLowerCase() ? (
+								<span key={uniqueKey} className="highlight-text">
+									{part}
+								</span>
+							) : (
+								part
+							);
+						})}
+					</>
+				);
+			} catch (error) {
+				// If regex fails, return the original text without highlighting
+				console.error('Error in text highlighting:', error);
+				return text;
+			}
 		},
 		[highlightSearch],
 	);
@@ -560,10 +628,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({

 		if (isAllSelected) {
 			// If all are selected, deselect all
-			handleInternalChange([]);
+			handleInternalChange([], true);
 		} else {
 			// Otherwise, select all
-			handleInternalChange([ALL_SELECTED_VALUE]);
+			handleInternalChange([ALL_SELECTED_VALUE], true);
 		}
 	}, [options, isAllSelected, handleInternalChange]);

@@ -738,6 +806,26 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	// Enhanced keyboard navigation with support for maxTagCount
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLElement>): void => {
+			// Simple early return if ALL is selected - block all possible keyboard interactions
+			// that could remove the ALL tag, but still allow dropdown navigation and search
+			if (
+				(allOptionShown || isAllSelected) &&
+				(e.key === 'Backspace' || e.key === 'Delete')
+			) {
+				// Only prevent default if the input is empty or cursor is at start position
+				const activeElement = document.activeElement as HTMLInputElement;
+				const isInputActive = activeElement?.tagName === 'INPUT';
+				const isInputEmpty = isInputActive && !activeElement?.value;
+				const isCursorAtStart =
+					isInputActive && activeElement?.selectionStart === 0;
+
+				if (isInputEmpty || isCursorAtStart) {
+					e.preventDefault();
+					e.stopPropagation();
+					return;
+				}
+			}
+
 			// Get flattened list of all selectable options
 			const getFlatOptions = (): OptionData[] => {
 				if (!visibleOptions) return [];
@@ -752,13 +840,13 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				if (hasAll) {
 					flatList.push({
 						label: 'ALL',
-						value: '__all__', // Special value for the ALL option
+						value: ALL_SELECTED_VALUE, // Special value for the ALL option
 						type: 'defined',
 					});
 				}

 				// 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('.*');
@@ -784,6 +872,17 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({

 			const flatOptions = getFlatOptions();

+			// If we just opened the dropdown and have options, set first option as active
+			if (justOpenedRef.current && flatOptions.length > 0) {
+				setActiveIndex(0);
+				justOpenedRef.current = false;
+			}
+
+			// If no option is active but we have options and dropdown is open, activate the first one
+			if (isOpen && activeIndex === -1 && flatOptions.length > 0) {
+				setActiveIndex(0);
+			}
+
 			// Get the active input element to check cursor position
 			const activeElement = document.activeElement as HTMLInputElement;
 			const isInputActive = activeElement?.tagName === 'INPUT';
@@ -1129,7 +1228,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						// If there's an active option in the dropdown, prioritize selecting it
 						if (activeIndex >= 0 && activeIndex < flatOptions.length) {
 							const selectedOption = flatOptions[activeIndex];
-							if (selectedOption.value === '__all__') {
+							if (selectedOption.value === ALL_SELECTED_VALUE) {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1159,6 +1258,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveIndex(-1);
+						// Call onDropdownVisibleChange when Escape is pressed to close dropdown
+						if (onDropdownVisibleChange) {
+							onDropdownVisibleChange(false);
+						}
 						break;

 					case SPACEKEY:
@@ -1168,7 +1271,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							const selectedOption = flatOptions[activeIndex];

 							// Check if it's the ALL option
-							if (selectedOption.value === '__all__') {
+							if (selectedOption.value === ALL_SELECTED_VALUE) {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1214,7 +1317,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.stopPropagation();
 						e.preventDefault();
 						setIsOpen(true);
-						setActiveIndex(0);
+						justOpenedRef.current = true; // Set flag to initialize active option on next render
 						setActiveChipIndex(-1);
 						break;

@@ -1260,9 +1363,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 		},
 		[
+			allOptionShown,
+			isAllSelected,
+			isOpen,
+			activeIndex,
+			getVisibleChipIndices,
+			getLastVisibleChipIndex,
 			selectedChips,
 			isSelectionMode,
-			isOpen,
 			activeChipIndex,
 			selectedValues,
 			visibleOptions,
@@ -1278,10 +1386,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			startSelection,
 			selectionEnd,
 			extendSelection,
-			activeIndex,
+			onDropdownVisibleChange,
 			handleSelectAll,
-			getVisibleChipIndices,
-			getLastVisibleChipIndex,
+			enableRegexOption,
 		],
 	);

@@ -1306,6 +1413,14 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		setIsOpen(false);
 	}, []);

+	// Add a scroll handler for the dropdown
+	const handleDropdownScroll = useCallback(
+		(e: React.UIEvent<HTMLDivElement>): void => {
+			setIsScrolledToBottom(handleScrollToBottom(e));
+		},
+		[],
+	);
+
 	// Custom dropdown render with sections support
 	const customDropdownRender = useCallback((): React.ReactElement => {
 		// Process options based on current search
@@ -1324,7 +1439,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('.*');
@@ -1347,8 +1462,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 =
@@ -1382,6 +1506,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				onMouseDown={handleDropdownMouseDown}
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
+				onScroll={handleDropdownScroll}
 				onBlur={handleBlur}
 				role="listbox"
 				aria-multiselectable="true"
@@ -1439,7 +1564,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>
 				)}

@@ -1452,23 +1589,40 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 									{section.label}
 								</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 */}
 				<div className="navigation-footer" role="note">
-					{!loading && !errorMessage && !noDataMessage && (
-						<section className="navigate">
-							<ArrowDown size={8} className="icons" />
-							<ArrowUp size={8} className="icons" />
-							<ArrowLeft size={8} className="icons" />
-							<ArrowRight size={8} className="icons" />
-							<span className="keyboard-text">to navigate</span>
-						</section>
-					)}
+					{!loading &&
+						!errorMessage &&
+						!noDataMessage &&
+						!(showIncompleteDataMessage && isScrolledToBottom) && (
+							<section className="navigate">
+								<ArrowDown size={8} className="icons" />
+								<ArrowUp size={8} className="icons" />
+								<ArrowLeft size={8} className="icons" />
+								<ArrowRight size={8} className="icons" />
+								<span className="keyboard-text">to navigate</span>
+							</section>
+						)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -1482,21 +1636,33 @@ 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 && (
+								<div className="navigation-icons">
+									<ReloadOutlined
+										twoToneColor={Color.BG_CHERRY_400}
+										onClick={(e): void => {
+											e.stopPropagation();
+											onRetry();
+										}}
+									/>
+								</div>
+							)}
 						</div>
 					)}

-					{noDataMessage && !loading && (
-						<div className="navigation-text">{noDataMessage}</div>
-					)}
+					{showIncompleteDataMessage &&
+						isScrolledToBottom &&
+						!loading &&
+						!errorMessage && (
+							<div className="navigation-text-incomplete">
+								Use search for more options
+							</div>
+						)}
+
+					{noDataMessage &&
+						!loading &&
+						!(showIncompleteDataMessage && isScrolledToBottom) &&
+						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
 				</div>
 			</div>
 		);
@@ -1513,6 +1679,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		handleDropdownMouseDown,
 		handleDropdownClick,
 		handleKeyDown,
+		handleDropdownScroll,
 		handleBlur,
 		activeIndex,
 		loading,
@@ -1522,8 +1689,32 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		renderOptionWithIndex,
 		handleSelectAll,
 		onRetry,
+		showIncompleteDataMessage,
+		isScrolledToBottom,
+		enableRegexOption,
 	]);

+	// Custom handler for dropdown visibility changes
+	const handleDropdownVisibleChange = useCallback(
+		(visible: boolean): void => {
+			setIsOpen(visible);
+			if (visible) {
+				justOpenedRef.current = true;
+				setActiveIndex(0);
+				setActiveChipIndex(-1);
+			} else {
+				setSearchText('');
+				setActiveIndex(-1);
+				// Don't clear activeChipIndex when dropdown closes to maintain tag focus
+			}
+			// Pass through to the parent component's handler if provided
+			if (onDropdownVisibleChange) {
+				onDropdownVisibleChange(visible);
+			}
+		},
+		[onDropdownVisibleChange],
+	);
+
 	// ===== Side Effects =====

 	// Clear search when dropdown closes
@@ -1585,55 +1776,16 @@ 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 (value === ALL_SELECTED_VALUE && isAllSelected) {
-				const handleAllTagClose = (
-					e: React.MouseEvent | React.KeyboardEvent,
-				): void => {
-					e.stopPropagation();
-					e.preventDefault();
-					handleInternalChange([]); // Clear selection when ALL tag is closed
-				};
-
-				const handleAllTagKeyDown = (e: React.KeyboardEvent): void => {
-					if (e.key === 'Enter' || e.key === SPACEKEY) {
-						handleAllTagClose(e);
-					}
-					// Prevent Backspace/Delete propagation if needed, handle in main keydown handler
-				};
-
-				return (
-					<div
-						className={cx('ant-select-selection-item', {
-							'ant-select-selection-item-active': activeChipIndex === 0, // Treat ALL tag as index 0 when active
-							'ant-select-selection-item-selected': selectedChips.includes(0),
-						})}
-						style={
-							activeChipIndex === 0 || selectedChips.includes(0)
-								? {
-										borderColor: Color.BG_ROBIN_500,
-										backgroundColor: Color.BG_SLATE_400,
-								  }
-								: undefined
-						}
-					>
-						<span className="ant-select-selection-item-content">ALL</span>
-						{closable && (
-							<span
-								className="ant-select-selection-item-remove"
-								onClick={handleAllTagClose}
-								onKeyDown={handleAllTagKeyDown}
-								role="button"
-								tabIndex={0}
-								aria-label="Remove ALL tag (deselect all)"
-							>
-								×
-							</span>
-						)}
-					</div>
-				);
+			if (allOptionShown) {
+				// Don't render a visible tag - will be shown as placeholder
+				return <div style={{ display: 'none' }} />;
 			}

 			// If not isAllSelected, render individual tags using previous logic
@@ -1713,52 +1865,69 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			// Fallback for safety, should not be reached
 			return <div />;
 		},
-		[
-			isAllSelected,
-			handleInternalChange,
-			activeChipIndex,
-			selectedChips,
-			selectedValues,
-			maxTagCount,
-		],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[isAllSelected, activeChipIndex, selectedChips, selectedValues, maxTagCount],
 	);

+	// Simple onClear handler to prevent clearing ALL
+	const onClearHandler = useCallback((): void => {
+		// Skip clearing if ALL is selected
+		if (allOptionShown || isAllSelected) {
+			return;
+		}
+
+		// Normal clear behavior
+		handleInternalChange([], true);
+		if (onClear) onClear();
+	}, [onClear, handleInternalChange, allOptionShown, isAllSelected]);
+
 	// ===== Component Rendering =====
 	return (
-		<Select
-			ref={selectRef}
-			className={cx('custom-multiselect', className, {
-				'has-selection': selectedChips.length > 0 && !isAllSelected,
-				'is-all-selected': isAllSelected,
+		<div
+			className={cx('custom-multiselect-wrapper', {
+				'all-selected': allOptionShown || isAllSelected,
 			})}
-			placeholder={placeholder}
-			mode="multiple"
-			showSearch
-			filterOption={false}
-			onSearch={handleSearch}
-			value={displayValue}
-			onChange={handleInternalChange}
-			onClear={(): void => handleInternalChange([])}
-			onDropdownVisibleChange={setIsOpen}
-			open={isOpen}
-			defaultActiveFirstOption={defaultActiveFirstOption}
-			popupMatchSelectWidth={dropdownMatchSelectWidth}
-			allowClear={allowClear}
-			getPopupContainer={getPopupContainer ?? popupContainer}
-			suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
-			dropdownRender={customDropdownRender}
-			menuItemSelectedIcon={null}
-			popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
-			notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-			onKeyDown={handleKeyDown}
-			tagRender={tagRender as any}
-			placement={placement}
-			listHeight={300}
-			searchValue={searchText}
-			maxTagTextLength={maxTagTextLength}
-			maxTagCount={isAllSelected ? 1 : maxTagCount}
-			{...rest}
-		/>
+		>
+			{(allOptionShown || isAllSelected) && !searchText && (
+				<div className="all-text">ALL</div>
+			)}
+			<Select
+				ref={selectRef}
+				className={cx('custom-multiselect', className, {
+					'has-selection': selectedChips.length > 0 && !isAllSelected,
+					'is-all-selected': isAllSelected,
+				})}
+				placeholder={placeholder}
+				mode="multiple"
+				showSearch
+				filterOption={false}
+				onSearch={handleSearch}
+				value={displayValue}
+				onChange={(newValue): void => {
+					handleInternalChange(newValue, false);
+				}}
+				onClear={onClearHandler}
+				onDropdownVisibleChange={handleDropdownVisibleChange}
+				open={isOpen}
+				defaultActiveFirstOption={defaultActiveFirstOption}
+				popupMatchSelectWidth={dropdownMatchSelectWidth}
+				allowClear={allowClear}
+				getPopupContainer={getPopupContainer ?? popupContainer}
+				suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
+				dropdownRender={customDropdownRender}
+				menuItemSelectedIcon={null}
+				popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
+				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+				onKeyDown={handleKeyDown}
+				tagRender={tagRender as any}
+				placement={placement}
+				listHeight={300}
+				searchValue={searchText}
+				maxTagTextLength={maxTagTextLength}
+				maxTagCount={isAllSelected ? undefined : maxTagCount}
+				{...rest}
+			/>
+		</div>
 	);
 };

--- a/frontend/src/components/NewSelect/CustomSelect.tsx
+++ b/frontend/src/components/NewSelect/CustomSelect.tsx
@@ -29,6 +29,7 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { CustomSelectProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
+	handleScrollToBottom,
 	prioritizeOrAddOptionForSingleSelect,
 	SPACEKEY,
 } from './utils';
@@ -57,17 +58,29 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	errorMessage,
 	allowClear = false,
 	onRetry,
+	showIncompleteDataMessage = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
 	const [isOpen, setIsOpen] = useState(false);
 	const [searchText, setSearchText] = useState('');
 	const [activeOptionIndex, setActiveOptionIndex] = useState<number>(-1);
+	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);

 	// Refs for element access and scroll behavior
 	const selectRef = useRef<BaseSelectRef>(null);
 	const dropdownRef = useRef<HTMLDivElement>(null);
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
+	// Flag to track if dropdown just opened
+	const justOpenedRef = useRef<boolean>(false);
+
+	// Add a scroll handler for the dropdown
+	const handleDropdownScroll = useCallback(
+		(e: React.UIEvent<HTMLDivElement>): void => {
+			setIsScrolledToBottom(handleScrollToBottom(e));
+		},
+		[],
+	);

 	// ===== Option Filtering & Processing Utilities =====

@@ -130,23 +143,33 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;

-			const parts = text.split(new RegExp(`(${searchQuery})`, 'gi'));
-			return (
-				<>
-					{parts.map((part, i) => {
-						// Create a deterministic but unique key
-						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			try {
+				const parts = text.split(
+					new RegExp(
+						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
+						'gi',
+					),
+				);
+				return (
+					<>
+						{parts.map((part, i) => {
+							// Create a deterministic but unique key
+							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;

-						return part.toLowerCase() === searchQuery.toLowerCase() ? (
-							<span key={uniqueKey} className="highlight-text">
-								{part}
-							</span>
-						) : (
-							part
-						);
-					})}
-				</>
-			);
+							return part.toLowerCase() === searchQuery.toLowerCase() ? (
+								<span key={uniqueKey} className="highlight-text">
+									{part}
+								</span>
+							) : (
+								part
+							);
+						})}
+					</>
+				);
+			} catch (error) {
+				console.error('Error in text highlighting:', error);
+				return text;
+			}
 		},
 		[highlightSearch],
 	);
@@ -246,9 +269,14 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			const trimmedValue = value.trim();
 			setSearchText(trimmedValue);

+			// Reset active option index when search changes
+			if (isOpen) {
+				setActiveOptionIndex(0);
+			}
+
 			if (onSearch) onSearch(trimmedValue);
 		},
-		[onSearch],
+		[onSearch, isOpen],
 	);

 	/**
@@ -272,14 +300,23 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					const flatList: OptionData[] = [];

 					// Process options
+					let processedOptions = isEmpty(value)
+						? filteredOptions
+						: prioritizeOrAddOptionForSingleSelect(filteredOptions, value);
+
+					if (!isEmpty(searchText)) {
+						processedOptions = filterOptionsBySearch(processedOptions, searchText);
+					}
+
 					const { sectionOptions, nonSectionOptions } = splitOptions(
-						isEmpty(value)
-							? filteredOptions
-							: prioritizeOrAddOptionForSingleSelect(filteredOptions, value),
+						processedOptions,
 					);

 					// Add custom option if needed
-					if (!isEmpty(searchText) && !isLabelPresent(filteredOptions, searchText)) {
+					if (
+						!isEmpty(searchText) &&
+						!isLabelPresent(processedOptions, searchText)
+					) {
 						flatList.push({
 							label: searchText,
 							value: searchText,
@@ -300,33 +337,52 @@ const CustomSelect: React.FC<CustomSelectProps> = ({

 				const options = getFlatOptions();

+				// If we just opened the dropdown and have options, set first option as active
+				if (justOpenedRef.current && options.length > 0) {
+					setActiveOptionIndex(0);
+					justOpenedRef.current = false;
+				}
+
+				// If no option is active but we have options, activate the first one
+				if (activeOptionIndex === -1 && options.length > 0) {
+					setActiveOptionIndex(0);
+				}
+
 				switch (e.key) {
 					case 'ArrowDown':
 						e.preventDefault();
-						setActiveOptionIndex((prev) =>
-							prev < options.length - 1 ? prev + 1 : 0,
-						);
+						if (options.length > 0) {
+							setActiveOptionIndex((prev) =>
+								prev < options.length - 1 ? prev + 1 : 0,
+							);
+						}
 						break;

 					case 'ArrowUp':
 						e.preventDefault();
-						setActiveOptionIndex((prev) =>
-							prev > 0 ? prev - 1 : options.length - 1,
-						);
+						if (options.length > 0) {
+							setActiveOptionIndex((prev) =>
+								prev > 0 ? prev - 1 : options.length - 1,
+							);
+						}
 						break;

 					case 'Tab':
 						// Tab navigation with Shift key support
 						if (e.shiftKey) {
 							e.preventDefault();
-							setActiveOptionIndex((prev) =>
-								prev > 0 ? prev - 1 : options.length - 1,
-							);
+							if (options.length > 0) {
+								setActiveOptionIndex((prev) =>
+									prev > 0 ? prev - 1 : options.length - 1,
+								);
+							}
 						} else {
 							e.preventDefault();
-							setActiveOptionIndex((prev) =>
-								prev < options.length - 1 ? prev + 1 : 0,
-							);
+							if (options.length > 0) {
+								setActiveOptionIndex((prev) =>
+									prev < options.length - 1 ? prev + 1 : 0,
+								);
+							}
 						}
 						break;

@@ -339,6 +395,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
+								setSearchText('');
 							}
 						} else if (!isEmpty(searchText)) {
 							// Add custom value when no option is focused
@@ -351,6 +408,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(customOption.value, customOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
+								setSearchText('');
 							}
 						}
 						break;
@@ -359,6 +417,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveOptionIndex(-1);
+						setSearchText('');
 						break;

 					case ' ': // Space key
@@ -369,6 +428,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
+								setSearchText('');
 							}
 						}
 						break;
@@ -379,7 +439,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				// Open dropdown when Down or Tab is pressed while closed
 				e.preventDefault();
 				setIsOpen(true);
-				setActiveOptionIndex(0);
+				justOpenedRef.current = true; // Set flag to initialize active option on next render
 			}
 		},
 		[
@@ -444,6 +504,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				className="custom-select-dropdown"
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
+				onScroll={handleDropdownScroll}
 				role="listbox"
 				tabIndex={-1}
 				aria-activedescendant={
@@ -454,7 +515,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				<div className="no-section-options">
 					{nonSectionOptions.length > 0 && mapOptions(nonSectionOptions)}
 				</div>
-
 				{/* Section options */}
 				{sectionOptions.length > 0 &&
 					sectionOptions.map((section) =>
@@ -472,13 +532,16 @@ const CustomSelect: React.FC<CustomSelectProps> = ({

 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!loading && !errorMessage && !noDataMessage && (
-						<section className="navigate">
-							<ArrowDown size={8} className="icons" />
-							<ArrowUp size={8} className="icons" />
-							<span className="keyboard-text">to navigate</span>
-						</section>
-					)}
+					{!loading &&
+						!errorMessage &&
+						!noDataMessage &&
+						!(showIncompleteDataMessage && isScrolledToBottom) && (
+							<section className="navigate">
+								<ArrowDown size={8} className="icons" />
+								<ArrowUp size={8} className="icons" />
+								<span className="keyboard-text">to navigate</span>
+							</section>
+						)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -492,21 +555,33 @@ 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 && (
+								<div className="navigation-icons">
+									<ReloadOutlined
+										twoToneColor={Color.BG_CHERRY_400}
+										onClick={(e): void => {
+											e.stopPropagation();
+											onRetry();
+										}}
+									/>
+								</div>
+							)}
 						</div>
 					)}

-					{noDataMessage && !loading && (
-						<div className="navigation-text">{noDataMessage}</div>
-					)}
+					{showIncompleteDataMessage &&
+						isScrolledToBottom &&
+						!loading &&
+						!errorMessage && (
+							<div className="navigation-text-incomplete">
+								Use search for more options
+							</div>
+						)}
+
+					{noDataMessage &&
+						!loading &&
+						!(showIncompleteDataMessage && isScrolledToBottom) &&
+						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
 				</div>
 			</div>
 		);
@@ -520,6 +595,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		isLabelPresent,
 		handleDropdownClick,
 		handleKeyDown,
+		handleDropdownScroll,
 		activeOptionIndex,
 		loading,
 		errorMessage,
@@ -527,8 +603,22 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		dropdownRender,
 		renderOptionWithIndex,
 		onRetry,
+		showIncompleteDataMessage,
+		isScrolledToBottom,
 	]);

+	// Handle dropdown visibility changes
+	const handleDropdownVisibleChange = useCallback((visible: boolean): void => {
+		setIsOpen(visible);
+		if (visible) {
+			justOpenedRef.current = true;
+			setActiveOptionIndex(0);
+		} else {
+			setSearchText('');
+			setActiveOptionIndex(-1);
+		}
+	}, []);
+
 	// ===== Side Effects =====

 	// Clear search text when dropdown closes
@@ -582,7 +672,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			onSearch={handleSearch}
 			value={value}
 			onChange={onChange}
-			onDropdownVisibleChange={setIsOpen}
+			onDropdownVisibleChange={handleDropdownVisibleChange}
 			open={isOpen}
 			options={optionsWithHighlight}
 			defaultActiveFirstOption={defaultActiveFirstOption}
--- a/frontend/src/components/NewSelect/styles.scss
+++ b/frontend/src/components/NewSelect/styles.scss
@@ -35,12 +35,50 @@ $custom-border-color: #2c3044;
 	width: 100%;
 	position: relative;

+	&.is-all-selected {
+		.ant-select-selection-search-input {
+			caret-color: transparent;
+		}
+
+		.ant-select-selection-placeholder {
+			opacity: 1 !important;
+			color: var(--bg-vanilla-400) !important;
+			font-weight: 500;
+			visibility: visible !important;
+			pointer-events: none;
+			z-index: 2;
+
+			.lightMode & {
+				color: rgba(0, 0, 0, 0.85) !important;
+			}
+		}
+
+		&.ant-select-focused .ant-select-selection-placeholder {
+			opacity: 0.45 !important;
+		}
+	}
+
+	.all-selected-text {
+		position: absolute;
+		left: 12px;
+		top: 50%;
+		transform: translateY(-50%);
+		color: var(--bg-vanilla-400);
+		z-index: 1;
+		pointer-events: none;
+
+		.lightMode & {
+			color: rgba(0, 0, 0, 0.85);
+		}
+	}
+
 	.ant-select-selector {
 		max-height: 200px;
 		overflow: auto;
 		scrollbar-width: thin;
 		background-color: var(--bg-ink-400);
 		border-color: var(--bg-slate-400);
+		cursor: text;

 		&::-webkit-scrollbar {
 			width: 6px;
@@ -56,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);
@@ -158,7 +206,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for single select
 .custom-select-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 500px;
+	max-height: 300px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -276,6 +324,10 @@ $custom-border-color: #2c3044;
 		font-size: 12px;
 	}

+	.navigation-text-incomplete {
+		color: var(--bg-amber-600) !important;
+	}
+
 	.navigation-error {
 		.navigation-text,
 		.navigation-icons {
@@ -322,7 +374,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 500px;
+	max-height: 350px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -355,6 +407,7 @@ $custom-border-color: #2c3044;
 	.select-group {
 		margin-bottom: 12px;
 		overflow: hidden;
+		margin-top: 4px;

 		.group-label {
 			font-weight: 500;
@@ -637,6 +690,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;
@@ -647,6 +701,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);
 		}
@@ -656,6 +724,10 @@ $custom-border-color: #2c3044;
 			border: 1px solid #e8e8e8;
 			color: rgba(0, 0, 0, 0.85);

+			font-size: 12px !important;
+			height: 20px;
+			line-height: 18px;
+
 			.ant-select-selection-item-content {
 				color: rgba(0, 0, 0, 0.85);
 			}
@@ -836,3 +908,38 @@ $custom-border-color: #2c3044;
 		}
 	}
 }
+
+.custom-multiselect-wrapper {
+	position: relative;
+	width: 100%;
+
+	&.all-selected {
+		.all-text {
+			position: absolute;
+			left: 12px;
+			top: 50%;
+			transform: translateY(-50%);
+			color: var(--bg-vanilla-400);
+			font-weight: 500;
+			z-index: 2;
+			pointer-events: none;
+			transition: opacity 0.2s ease, visibility 0.2s ease;
+
+			.lightMode & {
+				color: rgba(0, 0, 0, 0.85);
+			}
+		}
+
+		&:focus-within .all-text {
+			opacity: 0.45;
+		}
+
+		.ant-select-selection-search-input {
+			caret-color: auto;
+		}
+
+		.ant-select-selection-placeholder {
+			display: none;
+		}
+	}
+}
--- a/frontend/src/components/NewSelect/types.ts
+++ b/frontend/src/components/NewSelect/types.ts
@@ -24,9 +24,10 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	highlightSearch?: boolean;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	popupMatchSelectWidth?: boolean;
-	errorMessage?: string;
+	errorMessage?: string | null;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
+	showIncompleteDataMessage?: boolean;
 }

 export interface CustomTagProps {
@@ -51,10 +52,14 @@ export interface CustomMultiSelectProps
 	getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 	dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
 	highlightSearch?: boolean;
-	errorMessage?: string;
+	errorMessage?: string | null;
 	popupClassName?: string;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	maxTagCount?: number;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
+	maxTagTextLength?: number;
+	showIncompleteDataMessage?: boolean;
+	showLabels?: boolean;
+	enableRegexOption?: boolean;
 }
--- a/frontend/src/components/NewSelect/utils.ts
+++ b/frontend/src/components/NewSelect/utils.ts
@@ -1,4 +1,6 @@
 /* eslint-disable sonarjs/cognitive-complexity */
+import { uniqueOptions } from 'container/NewDashboard/DashboardVariablesSelection/util';
+
 import { OptionData } from './types';

 export const SPACEKEY = ' ';
@@ -98,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];
 };

 /**
@@ -133,3 +137,15 @@ export const filterOptionsBySearch = (
 		})
 		.filter(Boolean) as OptionData[];
 };
+
+/**
+ * Utility function to handle dropdown scroll and detect when scrolled to bottom
+ * Returns true when scrolled to within 20px of the bottom
+ */
+export const handleScrollToBottom = (
+	e: React.UIEvent<HTMLDivElement>,
+): boolean => {
+	const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+	// Consider "scrolled to bottom" when within 20px of the bottom or at the bottom
+	return scrollHeight - scrollTop - clientHeight < 20;
+};
--- 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/MetricsSelect/MetricsSelect.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss
@@ -44,13 +44,14 @@
 .lightMode {
 	.metrics-select-container {
 		.ant-select-selector {
-			border: 1px solid var(--bg-slate-300) !important;
+			border: 1px solid var(--bg-vanilla-300) !important;
 			background: var(--bg-vanilla-100);
 			color: var(--text-ink-100);
 		}

 		.ant-select-dropdown {
 			background: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300) !important;
 			box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
 				0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 			backdrop-filter: none;
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx
@@ -81,9 +81,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<
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
@@ -32,12 +32,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 +163,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 +986,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 +1057,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;
@@ -1292,7 +1318,7 @@ function QuerySearch({
 										if (onRun && typeof onRun === 'function') {
 											onRun(query);
 										} else {
-											handleRunQuery(true, true);
+											handleRunQuery();
 										}
 										return true;
 									},
--- a/frontend/src/components/QueryBuilderV2/tests/utils.test.ts
+++ b/frontend/src/components/QueryBuilderV2/tests/utils.test.ts
--- a/frontend/src/components/QueryBuilderV2/utils.ts
+++ b/frontend/src/components/QueryBuilderV2/utils.ts
@@ -1,8 +1,12 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { createAggregation } from 'api/v5/queryRange/prepareQueryRangePayloadV5';
-import { OPERATORS } from 'constants/antlrQueryConstants';
+import {
+	DEPRECATED_OPERATORS_MAP,
+	OPERATORS,
+	QUERY_BUILDER_FUNCTIONS,
+} from 'constants/antlrQueryConstants';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, isEqual, sortBy } from 'lodash-es';
 import { IQueryPair } from 'types/antlrQueryTypes';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
@@ -18,10 +22,10 @@ import {
 	TraceAggregation,
 } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
-import { DataSource } from 'types/common/queryBuilder';
+import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { extractQueryPairs } from 'utils/queryContextUtils';
 import { unquote } from 'utils/stringUtils';
-import { isFunctionOperator } from 'utils/tokenUtils';
+import { isFunctionOperator, isNonValueOperator } from 'utils/tokenUtils';
 import { v4 as uuid } from 'uuid';

 /**
@@ -34,6 +38,13 @@ const isArrayOperator = (operator: string): boolean => {
 	return arrayOperators.includes(operator);
 };

+const isVariable = (value: string | string[] | number | boolean): boolean => {
+	if (Array.isArray(value)) {
+		return value.some((v) => typeof v === 'string' && v.trim().startsWith('$'));
+	}
+	return typeof value === 'string' && value.trim().startsWith('$');
+};
+
 /**
 * Format a value for the expression string
 * @param value - The value to format
@@ -44,6 +55,10 @@ const formatValueForExpression = (
 	value: string[] | string | number | boolean,
 	operator?: string,
 ): string => {
+	if (isVariable(value)) {
+		return String(value);
+	}
+
 	// For IN operators, ensure value is always an array
 	if (isArrayOperator(operator || '')) {
 		const arrayValue = Array.isArray(value) ? value : [value];
@@ -87,12 +102,32 @@ export const convertFiltersToExpression = (
 				return '';
 			}

-			if (isFunctionOperator(op)) {
-				return `${op}(${key.key}, ${value})`;
+			let operator = op.trim().toLowerCase();
+			if (Object.keys(DEPRECATED_OPERATORS_MAP).includes(operator)) {
+				operator =
+					DEPRECATED_OPERATORS_MAP[
+						operator as keyof typeof DEPRECATED_OPERATORS_MAP
+					];
 			}

-			const formattedValue = formatValueForExpression(value, op);
-			return `${key.key} ${op} ${formattedValue}`;
+			if (isNonValueOperator(operator)) {
+				return `${key.key} ${operator}`;
+			}
+
+			if (isFunctionOperator(operator)) {
+				// Get the proper function name from QUERY_BUILDER_FUNCTIONS
+				const functionOperators = Object.values(QUERY_BUILDER_FUNCTIONS);
+				const properFunctionName =
+					functionOperators.find(
+						(func: string) => func.toLowerCase() === operator.toLowerCase(),
+					) || operator;
+
+				const formattedValue = formatValueForExpression(value, operator);
+				return `${properFunctionName}(${key.key}, ${formattedValue})`;
+			}
+
+			const formattedValue = formatValueForExpression(value, operator);
+			return `${key.key} ${operator} ${formattedValue}`;
 		})
 		.filter((expression) => expression !== ''); // Remove empty expressions

@@ -117,7 +152,6 @@ export const convertExpressionToFilters = (
 	if (!expression) return [];

 	const queryPairs = extractQueryPairs(expression);
-
 	const filters: TagFilterItem[] = [];

 	queryPairs.forEach((pair) => {
@@ -140,39 +174,57 @@ export const convertExpressionToFilters = (

 	return filters;
 };
+const getQueryPairsMap = (query: string): Map<string, IQueryPair> => {
+	const queryPairs = extractQueryPairs(query);
+	const queryPairsMap: Map<string, IQueryPair> = new Map();
+
+	queryPairs.forEach((pair) => {
+		const key = pair.hasNegation
+			? `${pair.key}-not ${pair.operator}`.trim().toLowerCase()
+			: `${pair.key}-${pair.operator}`.trim().toLowerCase();
+		queryPairsMap.set(key, pair);
+	});
+
+	return queryPairsMap;
+};

 export const convertFiltersToExpressionWithExistingQuery = (
 	filters: TagFilter,
 	existingQuery: string | undefined,
 ): { filters: TagFilter; filter: { expression: string } } => {
+	// Check for deprecated operators and replace them with new operators
+	const updatedFilters = cloneDeep(filters);
+
+	// Replace deprecated operators in filter items
+	if (updatedFilters?.items) {
+		updatedFilters.items = updatedFilters.items.map((item) => {
+			const opLower = item.op?.toLowerCase();
+			if (Object.keys(DEPRECATED_OPERATORS_MAP).includes(opLower)) {
+				return {
+					...item,
+					op: DEPRECATED_OPERATORS_MAP[
+						opLower as keyof typeof DEPRECATED_OPERATORS_MAP
+					].toLowerCase(),
+				};
+			}
+			return item;
+		});
+	}
+
 	if (!existingQuery) {
 		// If no existing query, return filters with a newly generated expression
 		return {
-			filters,
-			filter: convertFiltersToExpression(filters),
+			filters: updatedFilters,
+			filter: convertFiltersToExpression(updatedFilters),
 		};
 	}

-	// Extract query pairs from the existing query
-	const queryPairs = extractQueryPairs(existingQuery.trim());
-	let queryPairsMap: Map<string, IQueryPair> = new Map();
-
-	const updatedFilters = cloneDeep(filters); // Clone filters to avoid direct mutation
 	const nonExistingFilters: TagFilterItem[] = [];
 	let modifiedQuery = existingQuery; // We'll modify this query as we proceed
 	const visitedPairs: Set<string> = new Set(); // Set to track visited query pairs

 	// Map extracted query pairs to key-specific pair information for faster access
-	if (queryPairs.length > 0) {
-		queryPairsMap = new Map(
-			queryPairs.map((pair) => {
-				const key = pair.hasNegation
-					? `${pair.key}-not ${pair.operator}`.trim().toLowerCase()
-					: `${pair.key}-${pair.operator}`.trim().toLowerCase();
-				return [key, pair];
-			}),
-		);
-	}
+	let queryPairsMap = getQueryPairsMap(existingQuery.trim());

 	filters?.items?.forEach((filter) => {
 		const { key, op, value } = filter;
@@ -201,10 +253,37 @@ export const convertFiltersToExpressionWithExistingQuery = (
 				existingPair.position?.valueEnd
 			) {
 				visitedPairs.add(`${key.key}-${op}`.trim().toLowerCase());
+
+				// Check if existing values match current filter values (for array-based operators)
+				if (existingPair.valueList && filter.value && Array.isArray(filter.value)) {
+					// Clean quotes from string values for comparison
+					const cleanValues = (values: any[]): any[] =>
+						values.map((val) => (typeof val === 'string' ? unquote(val) : val));
+
+					const cleanExistingValues = cleanValues(existingPair.valueList);
+					const cleanFilterValues = cleanValues(filter.value);
+
+					// Compare arrays (order-independent) - if identical, keep existing value
+					const isSameValues =
+						cleanExistingValues.length === cleanFilterValues.length &&
+						isEqual(sortBy(cleanExistingValues), sortBy(cleanFilterValues));
+
+					if (isSameValues) {
+						// Values are identical, preserve existing formatting
+						modifiedQuery =
+							modifiedQuery.slice(0, existingPair.position.valueStart) +
+							existingPair.value +
+							modifiedQuery.slice(existingPair.position.valueEnd + 1);
+						return;
+					}
+				}
+
 				modifiedQuery =
 					modifiedQuery.slice(0, existingPair.position.valueStart) +
 					formattedValue +
 					modifiedQuery.slice(existingPair.position.valueEnd + 1);
+
+				queryPairsMap = getQueryPairsMap(modifiedQuery);
 				return;
 			}

@@ -230,6 +309,7 @@ export const convertFiltersToExpressionWithExistingQuery = (
 							)}${OPERATORS.IN} ${formattedValue} ${modifiedQuery.slice(
 								notInPair.position.valueEnd + 1,
 							)}`;
+							queryPairsMap = getQueryPairsMap(modifiedQuery.trim());
 						}
 						shouldAddToNonExisting = false; // Don't add this to non-existing filters
 					} else if (
@@ -246,6 +326,7 @@ export const convertFiltersToExpressionWithExistingQuery = (
 							)}${OPERATORS.IN} ${formattedValue} ${modifiedQuery.slice(
 								equalsPair.position.valueEnd + 1,
 							)}`;
+							queryPairsMap = getQueryPairsMap(modifiedQuery);
 						}
 						shouldAddToNonExisting = false; // Don't add this to non-existing filters
 					} else if (
@@ -262,6 +343,7 @@ export const convertFiltersToExpressionWithExistingQuery = (
 							)}${OPERATORS.IN} ${formattedValue} ${modifiedQuery.slice(
 								notEqualsPair.position.valueEnd + 1,
 							)}`;
+							queryPairsMap = getQueryPairsMap(modifiedQuery);
 						}
 						shouldAddToNonExisting = false; // Don't add this to non-existing filters
 					}
@@ -283,6 +365,7 @@ export const convertFiltersToExpressionWithExistingQuery = (
 							} ${formattedValue} ${modifiedQuery.slice(
 								notEqualsPair.position.valueEnd + 1,
 							)}`;
+							queryPairsMap = getQueryPairsMap(modifiedQuery);
 						}
 						shouldAddToNonExisting = false; // Don't add this to non-existing filters
 					}
@@ -295,6 +378,23 @@ export const convertFiltersToExpressionWithExistingQuery = (
 		if (
 			queryPairsMap.has(`${filter.key?.key}-${filter.op}`.trim().toLowerCase())
 		) {
+			const existingPair = queryPairsMap.get(
+				`${filter.key?.key}-${filter.op}`.trim().toLowerCase(),
+			);
+			if (
+				existingPair &&
+				existingPair.position?.valueStart &&
+				existingPair.position?.valueEnd
+			) {
+				const formattedValue = formatValueForExpression(value, op);
+				// replace the value with the new value
+				modifiedQuery =
+					modifiedQuery.slice(0, existingPair.position.valueStart) +
+					formattedValue +
+					modifiedQuery.slice(existingPair.position.valueEnd + 1);
+				queryPairsMap = getQueryPairsMap(modifiedQuery);
+			}
+
 			visitedPairs.add(`${filter.key?.key}-${filter.op}`.trim().toLowerCase());
 		}

@@ -377,11 +477,13 @@ export const convertFiltersToExpressionWithExistingQuery = (
 *
 * @param expression - The full query string.
 * @param keysToRemove - An array of keys (case-insensitive) that should be removed from the expression.
+ * @param removeOnlyVariableExpressions - When true, only removes key-value pairs where the value is a variable (starts with $). When false, uses the original behavior.
 * @returns A new expression string with the specified keys and their associated clauses removed.
 */
 export const removeKeysFromExpression = (
 	expression: string,
 	keysToRemove: string[],
+	removeOnlyVariableExpressions = false,
 ): string => {
 	if (!keysToRemove || keysToRemove.length === 0) {
 		return expression;
@@ -397,9 +499,20 @@ export const removeKeysFromExpression = (
 			let queryPairsMap: Map<string, IQueryPair>;

 			if (existingQueryPairs.length > 0) {
+				// Filter query pairs based on the removeOnlyVariableExpressions flag
+				const filteredQueryPairs = removeOnlyVariableExpressions
+					? existingQueryPairs.filter((pair) => {
+							const pairKey = pair.key?.trim().toLowerCase();
+							const matchesKey = pairKey === `${key}`.trim().toLowerCase();
+							if (!matchesKey) return false;
+							const value = pair.value?.toString().trim();
+							return value && value.includes('$');
+					  })
+					: existingQueryPairs;
+
 				// Build a map for quick lookup of query pairs by their lowercase trimmed keys
 				queryPairsMap = new Map(
-					existingQueryPairs.map((pair) => {
+					filteredQueryPairs.map((pair) => {
 						const key = pair.key.trim().toLowerCase();
 						return [key, pair];
 					}),
@@ -435,6 +548,12 @@ export const removeKeysFromExpression = (
 				}
 			}
 		});
+
+		// Clean up any remaining trailing AND/OR operators and extra whitespace
+		updatedExpression = updatedExpression
+			.replace(/\s+(AND|OR)\s*$/i, '') // Remove trailing AND/OR
+			.replace(/^(AND|OR)\s+/i, '') // Remove leading AND/OR
+			.trim();
 	}

 	return updatedExpression;
@@ -491,14 +610,25 @@ export const convertHavingToExpression = (
 * @returns New aggregation format based on data source
 *
 */
-export const convertAggregationToExpression = (
-	aggregateOperator: string,
-	aggregateAttribute: BaseAutocompleteData,
-	dataSource: DataSource,
-	timeAggregation?: string,
-	spaceAggregation?: string,
-	alias?: string,
-): (TraceAggregation | LogAggregation | MetricAggregation)[] | undefined => {
+export const convertAggregationToExpression = ({
+	aggregateOperator,
+	aggregateAttribute,
+	dataSource,
+	timeAggregation,
+	spaceAggregation,
+	alias,
+	reduceTo,
+	temporality,
+}: {
+	aggregateOperator: string;
+	aggregateAttribute: BaseAutocompleteData;
+	dataSource: DataSource;
+	timeAggregation?: string;
+	spaceAggregation?: string;
+	alias?: string;
+	reduceTo?: ReduceOperators;
+	temporality?: string;
+}): (TraceAggregation | LogAggregation | MetricAggregation)[] | undefined => {
 	// Skip if no operator or attribute key
 	if (!aggregateOperator) {
 		return undefined;
@@ -516,7 +646,9 @@ export const convertAggregationToExpression = (
 	if (dataSource === DataSource.METRICS) {
 		return [
 			{
-				metricName: aggregateAttribute.key,
+				metricName: aggregateAttribute?.key || '',
+				reduceTo,
+				temporality,
 				timeAggregation: (normalizedTimeAggregation || normalizedOperator) as any,
 				spaceAggregation: (normalizedSpaceAggregation || normalizedOperator) as any,
 			} as MetricAggregation,
@@ -524,7 +656,9 @@ export const convertAggregationToExpression = (
 	}

 	// For traces and logs, use expression format
-	const expression = `${normalizedOperator}(${aggregateAttribute.key})`;
+	const expression = aggregateAttribute?.key
+		? `${normalizedOperator}(${aggregateAttribute?.key})`
+		: `${normalizedOperator}()`;

 	if (dataSource === DataSource.TRACES) {
 		return [
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx
@@ -5,8 +5,11 @@ import { SignalType } from 'components/QuickFilters/types';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
+import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
 import { useMemo } from 'react';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 import { DataSource } from 'types/common/queryBuilder';

@@ -40,6 +43,10 @@ function OtherFilters({
 		() => SIGNAL_DATA_SOURCE_MAP[signal as SignalType] === DataSource.LOGS,
 		[signal],
 	);
+	const isMeterDataSource = useMemo(
+		() => signal && signal === SignalType.METER_EXPLORER,
+		[signal],
+	);

 	const {
 		data: suggestionsData,
@@ -69,7 +76,22 @@ function OtherFilters({
 		},
 		{
 			queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
-			enabled: !!signal && !isLogDataSource,
+			enabled: !!signal && !isLogDataSource && !isMeterDataSource,
+		},
+	);
+
+	const {
+		data: fieldKeysData,
+		isLoading: isLoadingFieldKeys,
+	} = useGetQueryKeySuggestions(
+		{
+			searchText: inputValue,
+			signal: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+			signalSource: 'meter',
+		},
+		{
+			queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+			enabled: !!signal && isMeterDataSource,
 		},
 	);

@@ -77,13 +99,33 @@ function OtherFilters({
 		let filterAttributes;
 		if (isLogDataSource) {
 			filterAttributes = suggestionsData?.payload?.attributes || [];
+		} else if (isMeterDataSource) {
+			const fieldKeys: QueryKeyDataSuggestionsProps[] = Object.values(
+				fieldKeysData?.data?.data?.keys || {},
+			)?.flat();
+			filterAttributes = fieldKeys.map(
+				(attr) =>
+					({
+						key: attr.name,
+						dataType: attr.fieldDataType,
+						type: attr.fieldContext,
+						signal: attr.signal,
+					} as BaseAutocompleteData),
+			);
 		} else {
 			filterAttributes = aggregateKeysData?.payload?.attributeKeys || [];
 		}
 		return filterAttributes?.filter(
 			(attr) => !addedFilters.some((filter) => filter.key === attr.key),
 		);
-	}, [suggestionsData, aggregateKeysData, addedFilters, isLogDataSource]);
+	}, [
+		suggestionsData,
+		aggregateKeysData,
+		addedFilters,
+		isLogDataSource,
+		fieldKeysData,
+		isMeterDataSource,
+	]);

 	const handleAddFilter = (filter: FilterType): void => {
 		setAddedFilters((prev) => [
@@ -91,15 +133,14 @@ function OtherFilters({
 			{
 				key: filter.key,
 				dataType: filter.dataType,
-				isColumn: filter.isColumn,
-				isJSON: filter.isJSON,
 				type: filter.type,
 			},
 		]);
 	};

 	const renderFilters = (): React.ReactNode => {
-		const isLoading = isFetchingSuggestions || isFetchingAggregateKeys;
+		const isLoading =
+			isFetchingSuggestions || isFetchingAggregateKeys || isLoadingFieldKeys;
 		if (isLoading) return <OtherFiltersSkeleton />;
 		if (!otherFilters?.length)
 			return <div className="no-values-found">No values found</div>;
--- a/frontend/src/components/QuickFilters/tests/constants.ts
+++ b/frontend/src/components/QuickFilters/tests/constants.ts
@@ -10,8 +10,6 @@ export const QuickFiltersConfig = [
 			key: 'deployment.environment',
 			dataType: DataTypes.String,
 			type: 'resource',
-			isColumn: false,
-			isJSON: false,
 		},
 		defaultOpen: true,
 	},
@@ -22,8 +20,6 @@ export const QuickFiltersConfig = [
 			key: 'service.name',
 			dataType: DataTypes.String,
 			type: 'resource',
-			isColumn: false,
-			isJSON: false,
 		},
 		defaultOpen: false,
 	},
--- a/frontend/src/components/QuickFilters/utils.tsx
+++ b/frontend/src/components/QuickFilters/utils.tsx
@@ -53,8 +53,6 @@ export const getFilterConfig = (
 					key: att.key,
 					dataType: att.dataType,
 					type: att.type,
-					isColumn: att.isColumn,
-					isJSON: att.isJSON,
 				},
 				defaultOpen: index < 2,
 			} as IQuickFiltersConfig),
--- a/frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx
+++ b/frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx
@@ -0,0 +1,63 @@
+import './styles.scss';
+
+import { Select } from 'antd';
+import { DefaultOptionType } from 'antd/es/select';
+
+import { UniversalYAxisUnitMappings, Y_AXIS_CATEGORIES } from './constants';
+import { UniversalYAxisUnit, YAxisUnitSelectorProps } from './types';
+import { mapMetricUnitToUniversalUnit } from './utils';
+
+function YAxisUnitSelector({
+	value,
+	onChange,
+	placeholder = 'Please select a unit',
+	loading = false,
+}: YAxisUnitSelectorProps): JSX.Element {
+	const universalUnit = mapMetricUnitToUniversalUnit(value);
+
+	const handleSearch = (
+		searchTerm: string,
+		currentOption: DefaultOptionType | undefined,
+	): boolean => {
+		if (!currentOption?.value) return false;
+
+		const search = searchTerm.toLowerCase();
+		const unitId = currentOption.value.toString().toLowerCase();
+		const unitLabel = currentOption.children?.toString().toLowerCase() || '';
+
+		// Check label and id
+		if (unitId.includes(search) || unitLabel.includes(search)) return true;
+
+		// Check aliases (from the mapping) using array iteration
+		const aliases = Array.from(
+			UniversalYAxisUnitMappings[currentOption.value as UniversalYAxisUnit] ?? [],
+		);
+
+		return aliases.some((alias) => alias.toLowerCase().includes(search));
+	};
+
+	return (
+		<div className="y-axis-unit-selector-component">
+			<Select
+				showSearch
+				value={universalUnit}
+				onChange={onChange}
+				placeholder={placeholder}
+				filterOption={(input, option): boolean => handleSearch(input, option)}
+				loading={loading}
+			>
+				{Y_AXIS_CATEGORIES.map((category) => (
+					<Select.OptGroup key={category.name} label={category.name}>
+						{category.units.map((unit) => (
+							<Select.Option key={unit.id} value={unit.id}>
+								{unit.name}
+							</Select.Option>
+						))}
+					</Select.OptGroup>
+				))}
+			</Select>
+		</div>
+	);
+}
+
+export default YAxisUnitSelector;
--- a/frontend/src/components/YAxisUnitSelector/tests/YAxisUnitSelector.test.tsx
+++ b/frontend/src/components/YAxisUnitSelector/tests/YAxisUnitSelector.test.tsx
@@ -0,0 +1,68 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import YAxisUnitSelector from '../YAxisUnitSelector';
+
+describe('YAxisUnitSelector', () => {
+	const mockOnChange = jest.fn();
+
+	beforeEach(() => {
+		mockOnChange.mockClear();
+	});
+
+	it('renders with default placeholder', () => {
+		render(<YAxisUnitSelector value="" onChange={mockOnChange} />);
+		expect(screen.getByText('Please select a unit')).toBeInTheDocument();
+	});
+
+	it('renders with custom placeholder', () => {
+		render(
+			<YAxisUnitSelector
+				value=""
+				onChange={mockOnChange}
+				placeholder="Custom placeholder"
+			/>,
+		);
+		expect(screen.queryByText('Custom placeholder')).toBeInTheDocument();
+	});
+
+	it('calls onChange when a value is selected', () => {
+		render(<YAxisUnitSelector value="" onChange={mockOnChange} />);
+		const select = screen.getByRole('combobox');
+
+		fireEvent.mouseDown(select);
+		const option = screen.getByText('Bytes (B)');
+		fireEvent.click(option);
+
+		expect(mockOnChange).toHaveBeenCalledWith('By', {
+			children: 'Bytes (B)',
+			key: 'By',
+			value: 'By',
+		});
+	});
+
+	it('filters options based on search input', () => {
+		render(<YAxisUnitSelector value="" onChange={mockOnChange} />);
+		const select = screen.getByRole('combobox');
+
+		fireEvent.mouseDown(select);
+		const input = screen.getByRole('combobox');
+		fireEvent.change(input, { target: { value: 'byte' } });
+
+		expect(screen.getByText('Bytes/sec')).toBeInTheDocument();
+	});
+
+	it('shows all categories and their units', () => {
+		render(<YAxisUnitSelector value="" onChange={mockOnChange} />);
+		const select = screen.getByRole('combobox');
+
+		fireEvent.mouseDown(select);
+
+		// Check for category headers
+		expect(screen.getByText('Data')).toBeInTheDocument();
+		expect(screen.getByText('Time')).toBeInTheDocument();
+
+		// Check for some common units
+		expect(screen.getByText('Bytes (B)')).toBeInTheDocument();
+		expect(screen.getByText('Seconds (s)')).toBeInTheDocument();
+	});
+});
--- a/frontend/src/components/YAxisUnitSelector/tests/utils.test.tsx
+++ b/frontend/src/components/YAxisUnitSelector/tests/utils.test.tsx
@@ -0,0 +1,39 @@
+import {
+	getUniversalNameFromMetricUnit,
+	mapMetricUnitToUniversalUnit,
+} from '../utils';
+
+describe('YAxisUnitSelector utils', () => {
+	describe('mapMetricUnitToUniversalUnit', () => {
+		it('maps known units correctly', () => {
+			expect(mapMetricUnitToUniversalUnit('bytes')).toBe('By');
+			expect(mapMetricUnitToUniversalUnit('seconds')).toBe('s');
+			expect(mapMetricUnitToUniversalUnit('bytes_per_second')).toBe('By/s');
+		});
+
+		it('returns null or self for unknown units', () => {
+			expect(mapMetricUnitToUniversalUnit('unknown_unit')).toBe('unknown_unit');
+			expect(mapMetricUnitToUniversalUnit('')).toBe(null);
+			expect(mapMetricUnitToUniversalUnit(undefined)).toBe(null);
+		});
+	});
+
+	describe('getUniversalNameFromMetricUnit', () => {
+		it('returns human readable names for known units', () => {
+			expect(getUniversalNameFromMetricUnit('bytes')).toBe('Bytes (B)');
+			expect(getUniversalNameFromMetricUnit('seconds')).toBe('Seconds (s)');
+			expect(getUniversalNameFromMetricUnit('bytes_per_second')).toBe('Bytes/sec');
+		});
+
+		it('returns original unit for unknown units', () => {
+			expect(getUniversalNameFromMetricUnit('unknown_unit')).toBe('unknown_unit');
+			expect(getUniversalNameFromMetricUnit('')).toBe('-');
+			expect(getUniversalNameFromMetricUnit(undefined)).toBe('-');
+		});
+
+		it('handles case variations', () => {
+			expect(getUniversalNameFromMetricUnit('bytes')).toBe('Bytes (B)');
+			expect(getUniversalNameFromMetricUnit('s')).toBe('Seconds (s)');
+		});
+	});
+});
--- a/frontend/src/components/YAxisUnitSelector/constants.ts
+++ b/frontend/src/components/YAxisUnitSelector/constants.ts
@@ -0,0 +1,627 @@
+import { UniversalYAxisUnit, YAxisUnit } from './types';
+
+// Mapping of universal y-axis units to their AWS, UCUM, and OpenMetrics equivalents
+export const UniversalYAxisUnitMappings: Record<
+	UniversalYAxisUnit,
+	Set<YAxisUnit>
+> = {
+	// Time
+	[UniversalYAxisUnit.NANOSECONDS]: new Set([
+		YAxisUnit.UCUM_NANOSECONDS,
+		YAxisUnit.OPEN_METRICS_NANOSECONDS,
+	]),
+	[UniversalYAxisUnit.MICROSECONDS]: new Set([
+		YAxisUnit.AWS_MICROSECONDS,
+		YAxisUnit.UCUM_MICROSECONDS,
+		YAxisUnit.OPEN_METRICS_MICROSECONDS,
+	]),
+	[UniversalYAxisUnit.MILLISECONDS]: new Set([
+		YAxisUnit.AWS_MILLISECONDS,
+		YAxisUnit.UCUM_MILLISECONDS,
+		YAxisUnit.OPEN_METRICS_MILLISECONDS,
+	]),
+	[UniversalYAxisUnit.SECONDS]: new Set([
+		YAxisUnit.AWS_SECONDS,
+		YAxisUnit.UCUM_SECONDS,
+		YAxisUnit.OPEN_METRICS_SECONDS,
+	]),
+	[UniversalYAxisUnit.MINUTES]: new Set([
+		YAxisUnit.UCUM_MINUTES,
+		YAxisUnit.OPEN_METRICS_MINUTES,
+	]),
+	[UniversalYAxisUnit.HOURS]: new Set([
+		YAxisUnit.UCUM_HOURS,
+		YAxisUnit.OPEN_METRICS_HOURS,
+	]),
+	[UniversalYAxisUnit.DAYS]: new Set([
+		YAxisUnit.UCUM_DAYS,
+		YAxisUnit.OPEN_METRICS_DAYS,
+	]),
+	[UniversalYAxisUnit.WEEKS]: new Set([YAxisUnit.UCUM_WEEKS]),
+
+	// Data
+	[UniversalYAxisUnit.BYTES]: new Set([
+		YAxisUnit.AWS_BYTES,
+		YAxisUnit.UCUM_BYTES,
+		YAxisUnit.OPEN_METRICS_BYTES,
+	]),
+	[UniversalYAxisUnit.KILOBYTES]: new Set([
+		YAxisUnit.AWS_KILOBYTES,
+		YAxisUnit.UCUM_KILOBYTES,
+		YAxisUnit.OPEN_METRICS_KILOBYTES,
+	]),
+	[UniversalYAxisUnit.MEGABYTES]: new Set([
+		YAxisUnit.AWS_MEGABYTES,
+		YAxisUnit.UCUM_MEGABYTES,
+		YAxisUnit.OPEN_METRICS_MEGABYTES,
+	]),
+	[UniversalYAxisUnit.GIGABYTES]: new Set([
+		YAxisUnit.AWS_GIGABYTES,
+		YAxisUnit.UCUM_GIGABYTES,
+		YAxisUnit.OPEN_METRICS_GIGABYTES,
+	]),
+	[UniversalYAxisUnit.TERABYTES]: new Set([
+		YAxisUnit.AWS_TERABYTES,
+		YAxisUnit.UCUM_TERABYTES,
+		YAxisUnit.OPEN_METRICS_TERABYTES,
+	]),
+	[UniversalYAxisUnit.PETABYTES]: new Set([
+		YAxisUnit.AWS_PETABYTES,
+		YAxisUnit.UCUM_PEBIBYTES,
+		YAxisUnit.OPEN_METRICS_PEBIBYTES,
+	]),
+	[UniversalYAxisUnit.EXABYTES]: new Set([
+		YAxisUnit.AWS_EXABYTES,
+		YAxisUnit.UCUM_EXABYTES,
+		YAxisUnit.OPEN_METRICS_EXABYTES,
+	]),
+	[UniversalYAxisUnit.ZETTABYTES]: new Set([
+		YAxisUnit.AWS_ZETTABYTES,
+		YAxisUnit.UCUM_ZETTABYTES,
+		YAxisUnit.OPEN_METRICS_ZETTABYTES,
+	]),
+	[UniversalYAxisUnit.YOTTABYTES]: new Set([
+		YAxisUnit.AWS_YOTTABYTES,
+		YAxisUnit.UCUM_YOTTABYTES,
+		YAxisUnit.OPEN_METRICS_YOTTABYTES,
+	]),
+
+	// Data Rate
+	[UniversalYAxisUnit.BYTES_SECOND]: new Set([
+		YAxisUnit.AWS_BYTES_SECOND,
+		YAxisUnit.UCUM_BYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_BYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.KILOBYTES_SECOND]: new Set([
+		YAxisUnit.AWS_KILOBYTES_SECOND,
+		YAxisUnit.UCUM_KILOBYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_KILOBYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.MEGABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_MEGABYTES_SECOND,
+		YAxisUnit.UCUM_MEGABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_MEGABYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.GIGABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_GIGABYTES_SECOND,
+		YAxisUnit.UCUM_GIGABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_GIGABYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.TERABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_TERABYTES_SECOND,
+		YAxisUnit.UCUM_TERABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_TERABYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.PETABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_PETABYTES_SECOND,
+		YAxisUnit.UCUM_PETABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_PETABYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.EXABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_EXABYTES_SECOND,
+		YAxisUnit.UCUM_EXABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_EXABYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.ZETTABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_ZETTABYTES_SECOND,
+		YAxisUnit.UCUM_ZETTABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_ZETTABYTES_SECOND,
+	]),
+	[UniversalYAxisUnit.YOTTABYTES_SECOND]: new Set([
+		YAxisUnit.AWS_YOTTABYTES_SECOND,
+		YAxisUnit.UCUM_YOTTABYTES_SECOND,
+		YAxisUnit.OPEN_METRICS_YOTTABYTES_SECOND,
+	]),
+
+	// Bits
+	[UniversalYAxisUnit.BITS]: new Set([
+		YAxisUnit.AWS_BITS,
+		YAxisUnit.UCUM_BITS,
+		YAxisUnit.OPEN_METRICS_BITS,
+	]),
+	[UniversalYAxisUnit.KILOBITS]: new Set([
+		YAxisUnit.AWS_KILOBITS,
+		YAxisUnit.UCUM_KILOBITS,
+		YAxisUnit.OPEN_METRICS_KILOBITS,
+	]),
+	[UniversalYAxisUnit.MEGABITS]: new Set([
+		YAxisUnit.AWS_MEGABITS,
+		YAxisUnit.UCUM_MEGABITS,
+		YAxisUnit.OPEN_METRICS_MEGABITS,
+	]),
+	[UniversalYAxisUnit.GIGABITS]: new Set([
+		YAxisUnit.AWS_GIGABITS,
+		YAxisUnit.UCUM_GIGABITS,
+		YAxisUnit.OPEN_METRICS_GIGABITS,
+	]),
+	[UniversalYAxisUnit.TERABITS]: new Set([
+		YAxisUnit.AWS_TERABITS,
+		YAxisUnit.UCUM_TERABITS,
+		YAxisUnit.OPEN_METRICS_TERABITS,
+	]),
+	[UniversalYAxisUnit.PETABITS]: new Set([
+		YAxisUnit.AWS_PETABITS,
+		YAxisUnit.UCUM_PETABITS,
+		YAxisUnit.OPEN_METRICS_PETABITS,
+	]),
+	[UniversalYAxisUnit.EXABITS]: new Set([
+		YAxisUnit.AWS_EXABITS,
+		YAxisUnit.UCUM_EXABITS,
+		YAxisUnit.OPEN_METRICS_EXABITS,
+	]),
+	[UniversalYAxisUnit.ZETTABITS]: new Set([
+		YAxisUnit.AWS_ZETTABITS,
+		YAxisUnit.UCUM_ZETTABITS,
+		YAxisUnit.OPEN_METRICS_ZETTABITS,
+	]),
+	[UniversalYAxisUnit.YOTTABITS]: new Set([
+		YAxisUnit.AWS_YOTTABITS,
+		YAxisUnit.UCUM_YOTTABITS,
+		YAxisUnit.OPEN_METRICS_YOTTABITS,
+	]),
+
+	// Bit Rate
+	[UniversalYAxisUnit.BITS_SECOND]: new Set([
+		YAxisUnit.AWS_BITS_SECOND,
+		YAxisUnit.UCUM_BITS_SECOND,
+		YAxisUnit.OPEN_METRICS_BITS_SECOND,
+	]),
+	[UniversalYAxisUnit.KILOBITS_SECOND]: new Set([
+		YAxisUnit.AWS_KILOBITS_SECOND,
+		YAxisUnit.UCUM_KILOBITS_SECOND,
+		YAxisUnit.OPEN_METRICS_KILOBITS_SECOND,
+	]),
+	[UniversalYAxisUnit.MEGABITS_SECOND]: new Set([
+		YAxisUnit.AWS_MEGABITS_SECOND,
+		YAxisUnit.UCUM_MEGABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_MEGABITS_SECOND,
+	]),
+	[UniversalYAxisUnit.GIGABITS_SECOND]: new Set([
+		YAxisUnit.AWS_GIGABITS_SECOND,
+		YAxisUnit.UCUM_GIGABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_GIGABITS_SECOND,
+	]),
+	[UniversalYAxisUnit.TERABITS_SECOND]: new Set([
+		YAxisUnit.AWS_TERABITS_SECOND,
+		YAxisUnit.UCUM_TERABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_TERABITS_SECOND,
+	]),
+	[UniversalYAxisUnit.PETABITS_SECOND]: new Set([
+		YAxisUnit.AWS_PETABITS_SECOND,
+		YAxisUnit.UCUM_PETABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_PETABITS_SECOND,
+	]),
+	[UniversalYAxisUnit.EXABITS_SECOND]: new Set([
+		YAxisUnit.AWS_EXABITS_SECOND,
+		YAxisUnit.UCUM_EXABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_EXABITS_SECOND,
+	]),
+	[UniversalYAxisUnit.ZETTABITS_SECOND]: new Set([
+		YAxisUnit.AWS_ZETTABITS_SECOND,
+		YAxisUnit.UCUM_ZETTABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_ZETTABITS_SECOND,
+	]),
+	[UniversalYAxisUnit.YOTTABITS_SECOND]: new Set([
+		YAxisUnit.AWS_YOTTABITS_SECOND,
+		YAxisUnit.UCUM_YOTTABITS_SECOND,
+		YAxisUnit.OPEN_METRICS_YOTTABITS_SECOND,
+	]),
+
+	// Count
+	[UniversalYAxisUnit.COUNT]: new Set([
+		YAxisUnit.AWS_COUNT,
+		YAxisUnit.UCUM_COUNT,
+		YAxisUnit.OPEN_METRICS_COUNT,
+	]),
+	[UniversalYAxisUnit.COUNT_SECOND]: new Set([
+		YAxisUnit.AWS_COUNT_SECOND,
+		YAxisUnit.UCUM_COUNT_SECOND,
+		YAxisUnit.OPEN_METRICS_COUNT_SECOND,
+	]),
+
+	// Percent
+	[UniversalYAxisUnit.PERCENT]: new Set([
+		YAxisUnit.AWS_PERCENT,
+		YAxisUnit.UCUM_PERCENT,
+		YAxisUnit.OPEN_METRICS_PERCENT,
+	]),
+	[UniversalYAxisUnit.NONE]: new Set([
+		YAxisUnit.AWS_NONE,
+		YAxisUnit.UCUM_NONE,
+		YAxisUnit.OPEN_METRICS_NONE,
+	]),
+	[UniversalYAxisUnit.PERCENT_UNIT]: new Set([
+		YAxisUnit.OPEN_METRICS_PERCENT_UNIT,
+	]),
+
+	// Count Rate
+	[UniversalYAxisUnit.COUNT_MINUTE]: new Set([
+		YAxisUnit.UCUM_COUNTS_MINUTE,
+		YAxisUnit.OPEN_METRICS_COUNTS_MINUTE,
+	]),
+	[UniversalYAxisUnit.OPS_SECOND]: new Set([
+		YAxisUnit.UCUM_OPS_SECOND,
+		YAxisUnit.OPEN_METRICS_OPS_SECOND,
+	]),
+	[UniversalYAxisUnit.OPS_MINUTE]: new Set([
+		YAxisUnit.UCUM_OPS_MINUTE,
+		YAxisUnit.OPEN_METRICS_OPS_MINUTE,
+	]),
+	[UniversalYAxisUnit.REQUESTS_SECOND]: new Set([
+		YAxisUnit.UCUM_REQUESTS_SECOND,
+		YAxisUnit.OPEN_METRICS_REQUESTS_SECOND,
+	]),
+	[UniversalYAxisUnit.REQUESTS_MINUTE]: new Set([
+		YAxisUnit.UCUM_REQUESTS_MINUTE,
+		YAxisUnit.OPEN_METRICS_REQUESTS_MINUTE,
+	]),
+	[UniversalYAxisUnit.READS_SECOND]: new Set([
+		YAxisUnit.UCUM_READS_SECOND,
+		YAxisUnit.OPEN_METRICS_READS_SECOND,
+	]),
+	[UniversalYAxisUnit.WRITES_SECOND]: new Set([
+		YAxisUnit.UCUM_WRITES_SECOND,
+		YAxisUnit.OPEN_METRICS_WRITES_SECOND,
+	]),
+	[UniversalYAxisUnit.READS_MINUTE]: new Set([
+		YAxisUnit.UCUM_READS_MINUTE,
+		YAxisUnit.OPEN_METRICS_READS_MINUTE,
+	]),
+	[UniversalYAxisUnit.WRITES_MINUTE]: new Set([
+		YAxisUnit.UCUM_WRITES_MINUTE,
+		YAxisUnit.OPEN_METRICS_WRITES_MINUTE,
+	]),
+	[UniversalYAxisUnit.IOOPS_SECOND]: new Set([
+		YAxisUnit.UCUM_IOPS_SECOND,
+		YAxisUnit.OPEN_METRICS_IOPS_SECOND,
+	]),
+};
+
+// Mapping of universal y-axis units to their display labels
+export const Y_AXIS_UNIT_NAMES: Record<UniversalYAxisUnit, string> = {
+	[UniversalYAxisUnit.SECONDS]: 'Seconds (s)',
+	[UniversalYAxisUnit.MILLISECONDS]: 'Milliseconds (ms)',
+	[UniversalYAxisUnit.MICROSECONDS]: 'Microseconds (µs)',
+	[UniversalYAxisUnit.BYTES]: 'Bytes (B)',
+	[UniversalYAxisUnit.KILOBYTES]: 'Kilobytes (KB)',
+	[UniversalYAxisUnit.MEGABYTES]: 'Megabytes (MB)',
+	[UniversalYAxisUnit.GIGABYTES]: 'Gigabytes (GB)',
+	[UniversalYAxisUnit.TERABYTES]: 'Terabytes (TB)',
+	[UniversalYAxisUnit.PETABYTES]: 'Petabytes (PB)',
+	[UniversalYAxisUnit.EXABYTES]: 'Exabytes (EB)',
+	[UniversalYAxisUnit.ZETTABYTES]: 'Zettabytes (ZB)',
+	[UniversalYAxisUnit.YOTTABYTES]: 'Yottabytes (YB)',
+	[UniversalYAxisUnit.BITS]: 'Bits (b)',
+	[UniversalYAxisUnit.KILOBITS]: 'Kilobits (Kb)',
+	[UniversalYAxisUnit.MEGABITS]: 'Megabits (Mb)',
+	[UniversalYAxisUnit.GIGABITS]: 'Gigabits (Gb)',
+	[UniversalYAxisUnit.TERABITS]: 'Terabits (Tb)',
+	[UniversalYAxisUnit.PETABITS]: 'Petabits (Pb)',
+	[UniversalYAxisUnit.EXABITS]: 'Exabits (Eb)',
+	[UniversalYAxisUnit.ZETTABITS]: 'Zettabits (Zb)',
+	[UniversalYAxisUnit.YOTTABITS]: 'Yottabits (Yb)',
+	[UniversalYAxisUnit.BYTES_SECOND]: 'Bytes/sec',
+	[UniversalYAxisUnit.KILOBYTES_SECOND]: 'Kilobytes/sec',
+	[UniversalYAxisUnit.MEGABYTES_SECOND]: 'Megabytes/sec',
+	[UniversalYAxisUnit.GIGABYTES_SECOND]: 'Gigabytes/sec',
+	[UniversalYAxisUnit.TERABYTES_SECOND]: 'Terabytes/sec',
+	[UniversalYAxisUnit.PETABYTES_SECOND]: 'Petabytes/sec',
+	[UniversalYAxisUnit.EXABYTES_SECOND]: 'Exabytes/sec',
+	[UniversalYAxisUnit.ZETTABYTES_SECOND]: 'Zettabytes/sec',
+	[UniversalYAxisUnit.YOTTABYTES_SECOND]: 'Yottabytes/sec',
+	[UniversalYAxisUnit.BITS_SECOND]: 'Bits/sec',
+	[UniversalYAxisUnit.KILOBITS_SECOND]: 'Kilobits/sec',
+	[UniversalYAxisUnit.MEGABITS_SECOND]: 'Megabits/sec',
+	[UniversalYAxisUnit.GIGABITS_SECOND]: 'Gigabits/sec',
+	[UniversalYAxisUnit.TERABITS_SECOND]: 'Terabits/sec',
+	[UniversalYAxisUnit.PETABITS_SECOND]: 'Petabits/sec',
+	[UniversalYAxisUnit.EXABITS_SECOND]: 'Exabits/sec',
+	[UniversalYAxisUnit.ZETTABITS_SECOND]: 'Zettabits/sec',
+	[UniversalYAxisUnit.YOTTABITS_SECOND]: 'Yottabits/sec',
+	[UniversalYAxisUnit.COUNT]: 'Count',
+	[UniversalYAxisUnit.COUNT_SECOND]: 'Count/sec',
+	[UniversalYAxisUnit.PERCENT]: 'Percent (0 - 100)',
+	[UniversalYAxisUnit.NONE]: 'None',
+	[UniversalYAxisUnit.WEEKS]: 'Weeks',
+	[UniversalYAxisUnit.DAYS]: 'Days',
+	[UniversalYAxisUnit.HOURS]: 'Hours',
+	[UniversalYAxisUnit.MINUTES]: 'Minutes',
+	[UniversalYAxisUnit.NANOSECONDS]: 'Nanoseconds',
+	[UniversalYAxisUnit.COUNT_MINUTE]: 'Count/min',
+	[UniversalYAxisUnit.OPS_SECOND]: 'Ops/sec',
+	[UniversalYAxisUnit.OPS_MINUTE]: 'Ops/min',
+	[UniversalYAxisUnit.REQUESTS_SECOND]: 'Requests/sec',
+	[UniversalYAxisUnit.REQUESTS_MINUTE]: 'Requests/min',
+	[UniversalYAxisUnit.READS_SECOND]: 'Reads/sec',
+	[UniversalYAxisUnit.WRITES_SECOND]: 'Writes/sec',
+	[UniversalYAxisUnit.READS_MINUTE]: 'Reads/min',
+	[UniversalYAxisUnit.WRITES_MINUTE]: 'Writes/min',
+	[UniversalYAxisUnit.IOOPS_SECOND]: 'IOPS/sec',
+	[UniversalYAxisUnit.PERCENT_UNIT]: 'Percent (0.0 - 1.0)',
+};
+
+// Splitting the universal y-axis units into categories
+export const Y_AXIS_CATEGORIES = [
+	{
+		name: 'Time',
+		units: [
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.SECONDS],
+				id: UniversalYAxisUnit.SECONDS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MILLISECONDS],
+				id: UniversalYAxisUnit.MILLISECONDS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MICROSECONDS],
+				id: UniversalYAxisUnit.MICROSECONDS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.NANOSECONDS],
+				id: UniversalYAxisUnit.NANOSECONDS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MINUTES],
+				id: UniversalYAxisUnit.MINUTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.HOURS],
+				id: UniversalYAxisUnit.HOURS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.DAYS],
+				id: UniversalYAxisUnit.DAYS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.WEEKS],
+				id: UniversalYAxisUnit.WEEKS,
+			},
+		],
+	},
+	{
+		name: 'Data',
+		units: [
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES],
+				id: UniversalYAxisUnit.BYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.KILOBYTES],
+				id: UniversalYAxisUnit.KILOBYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MEGABYTES],
+				id: UniversalYAxisUnit.MEGABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.GIGABYTES],
+				id: UniversalYAxisUnit.GIGABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TERABYTES],
+				id: UniversalYAxisUnit.TERABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PETABYTES],
+				id: UniversalYAxisUnit.PETABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.EXABYTES],
+				id: UniversalYAxisUnit.EXABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ZETTABYTES],
+				id: UniversalYAxisUnit.ZETTABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.YOTTABYTES],
+				id: UniversalYAxisUnit.YOTTABYTES,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BITS],
+				id: UniversalYAxisUnit.BITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.KILOBITS],
+				id: UniversalYAxisUnit.KILOBITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MEGABITS],
+				id: UniversalYAxisUnit.MEGABITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.GIGABITS],
+				id: UniversalYAxisUnit.GIGABITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TERABITS],
+				id: UniversalYAxisUnit.TERABITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PETABITS],
+				id: UniversalYAxisUnit.PETABITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.EXABITS],
+				id: UniversalYAxisUnit.EXABITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ZETTABITS],
+				id: UniversalYAxisUnit.ZETTABITS,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.YOTTABITS],
+				id: UniversalYAxisUnit.YOTTABITS,
+			},
+		],
+	},
+	{
+		name: 'Data Rate',
+		units: [
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BYTES_SECOND],
+				id: UniversalYAxisUnit.BYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.KILOBYTES_SECOND],
+				id: UniversalYAxisUnit.KILOBYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MEGABYTES_SECOND],
+				id: UniversalYAxisUnit.MEGABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.GIGABYTES_SECOND],
+				id: UniversalYAxisUnit.GIGABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TERABYTES_SECOND],
+				id: UniversalYAxisUnit.TERABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PETABYTES_SECOND],
+				id: UniversalYAxisUnit.PETABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.EXABYTES_SECOND],
+				id: UniversalYAxisUnit.EXABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ZETTABYTES_SECOND],
+				id: UniversalYAxisUnit.ZETTABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.YOTTABYTES_SECOND],
+				id: UniversalYAxisUnit.YOTTABYTES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.BITS_SECOND],
+				id: UniversalYAxisUnit.BITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.KILOBITS_SECOND],
+				id: UniversalYAxisUnit.KILOBITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MEGABITS_SECOND],
+				id: UniversalYAxisUnit.MEGABITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.GIGABITS_SECOND],
+				id: UniversalYAxisUnit.GIGABITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.TERABITS_SECOND],
+				id: UniversalYAxisUnit.TERABITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PETABITS_SECOND],
+				id: UniversalYAxisUnit.PETABITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.EXABITS_SECOND],
+				id: UniversalYAxisUnit.EXABITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.ZETTABITS_SECOND],
+				id: UniversalYAxisUnit.ZETTABITS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.YOTTABITS_SECOND],
+				id: UniversalYAxisUnit.YOTTABITS_SECOND,
+			},
+		],
+	},
+	{
+		name: 'Count',
+		units: [
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.COUNT],
+				id: UniversalYAxisUnit.COUNT,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.COUNT_SECOND],
+				id: UniversalYAxisUnit.COUNT_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.COUNT_MINUTE],
+				id: UniversalYAxisUnit.COUNT_MINUTE,
+			},
+		],
+	},
+	{
+		name: 'Operations',
+		units: [
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.OPS_SECOND],
+				id: UniversalYAxisUnit.OPS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.OPS_MINUTE],
+				id: UniversalYAxisUnit.OPS_MINUTE,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.REQUESTS_SECOND],
+				id: UniversalYAxisUnit.REQUESTS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.REQUESTS_MINUTE],
+				id: UniversalYAxisUnit.REQUESTS_MINUTE,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.READS_SECOND],
+				id: UniversalYAxisUnit.READS_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.WRITES_SECOND],
+				id: UniversalYAxisUnit.WRITES_SECOND,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.READS_MINUTE],
+				id: UniversalYAxisUnit.READS_MINUTE,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.WRITES_MINUTE],
+				id: UniversalYAxisUnit.WRITES_MINUTE,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.IOOPS_SECOND],
+				id: UniversalYAxisUnit.IOOPS_SECOND,
+			},
+		],
+	},
+	{
+		name: 'Percentage',
+		units: [
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT],
+				id: UniversalYAxisUnit.PERCENT,
+			},
+			{
+				name: Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.PERCENT_UNIT],
+				id: UniversalYAxisUnit.PERCENT_UNIT,
+			},
+		],
+	},
+];
--- a/frontend/src/components/YAxisUnitSelector/index.ts
+++ b/frontend/src/components/YAxisUnitSelector/index.ts
@@ -0,0 +1,3 @@
+import YAxisUnitSelector from './YAxisUnitSelector';
+
+export default YAxisUnitSelector;
--- a/frontend/src/components/YAxisUnitSelector/styles.scss
+++ b/frontend/src/components/YAxisUnitSelector/styles.scss
@@ -0,0 +1,5 @@
+.y-axis-unit-selector-component {
+	.ant-select {
+		width: 220px;
+	}
+}
--- a/frontend/src/components/YAxisUnitSelector/types.ts
+++ b/frontend/src/components/YAxisUnitSelector/types.ts
@@ -0,0 +1,365 @@
+export interface YAxisUnitSelectorProps {
+	value: string | undefined;
+	onChange: (value: UniversalYAxisUnit) => void;
+	placeholder?: string;
+	loading?: boolean;
+	disabled?: boolean;
+}
+
+export enum UniversalYAxisUnit {
+	// Time
+	WEEKS = 'wk',
+	DAYS = 'd',
+	HOURS = 'h',
+	MINUTES = 'min',
+	SECONDS = 's',
+	MICROSECONDS = 'us',
+	MILLISECONDS = 'ms',
+	NANOSECONDS = 'ns',
+
+	// Data
+	BYTES = 'By',
+	KILOBYTES = 'kBy',
+	MEGABYTES = 'MBy',
+	GIGABYTES = 'GBy',
+	TERABYTES = 'TBy',
+	PETABYTES = 'PBy',
+	EXABYTES = 'EBy',
+	ZETTABYTES = 'ZBy',
+	YOTTABYTES = 'YBy',
+
+	// Data Rate
+	BYTES_SECOND = 'By/s',
+	KILOBYTES_SECOND = 'kBy/s',
+	MEGABYTES_SECOND = 'MBy/s',
+	GIGABYTES_SECOND = 'GBy/s',
+	TERABYTES_SECOND = 'TBy/s',
+	PETABYTES_SECOND = 'PBy/s',
+	EXABYTES_SECOND = 'EBy/s',
+	ZETTABYTES_SECOND = 'ZBy/s',
+	YOTTABYTES_SECOND = 'YBy/s',
+
+	// Bits
+	BITS = 'bit',
+	KILOBITS = 'kbit',
+	MEGABITS = 'Mbit',
+	GIGABITS = 'Gbit',
+	TERABITS = 'Tbit',
+	PETABITS = 'Pbit',
+	EXABITS = 'Ebit',
+	ZETTABITS = 'Zbit',
+	YOTTABITS = 'Ybit',
+
+	// Bit Rate
+	BITS_SECOND = 'bit/s',
+	KILOBITS_SECOND = 'kbit/s',
+	MEGABITS_SECOND = 'Mbit/s',
+	GIGABITS_SECOND = 'Gbit/s',
+	TERABITS_SECOND = 'Tbit/s',
+	PETABITS_SECOND = 'Pbit/s',
+	EXABITS_SECOND = 'Ebit/s',
+	ZETTABITS_SECOND = 'Zbit/s',
+	YOTTABITS_SECOND = 'Ybit/s',
+
+	// Count
+	COUNT = '{count}',
+	COUNT_SECOND = '{count}/s',
+	COUNT_MINUTE = '{count}/min',
+
+	// Operations
+	OPS_SECOND = '{ops}/s',
+	OPS_MINUTE = '{ops}/min',
+
+	// Requests
+	REQUESTS_SECOND = '{req}/s',
+	REQUESTS_MINUTE = '{req}/min',
+
+	// Reads/Writes
+	READS_SECOND = '{read}/s',
+	WRITES_SECOND = '{write}/s',
+	READS_MINUTE = '{read}/min',
+	WRITES_MINUTE = '{write}/min',
+
+	// IO Operations
+	IOOPS_SECOND = '{iops}/s',
+
+	// Percent
+	PERCENT = '%',
+	PERCENT_UNIT = 'percentunit',
+	NONE = '1',
+}
+
+export enum YAxisUnit {
+	AWS_SECONDS = 'Seconds',
+	UCUM_SECONDS = 's',
+	OPEN_METRICS_SECONDS = 'seconds',
+
+	AWS_MICROSECONDS = 'Microseconds',
+	UCUM_MICROSECONDS = 'us',
+	OPEN_METRICS_MICROSECONDS = 'microseconds',
+
+	AWS_MILLISECONDS = 'Milliseconds',
+	UCUM_MILLISECONDS = 'ms',
+	OPEN_METRICS_MILLISECONDS = 'milliseconds',
+
+	AWS_BYTES = 'Bytes',
+	UCUM_BYTES = 'By',
+	OPEN_METRICS_BYTES = 'bytes',
+
+	AWS_KILOBYTES = 'Kilobytes',
+	UCUM_KILOBYTES = 'kBy',
+	OPEN_METRICS_KILOBYTES = 'kilobytes',
+
+	AWS_MEGABYTES = 'Megabytes',
+	UCUM_MEGABYTES = 'MBy',
+	OPEN_METRICS_MEGABYTES = 'megabytes',
+
+	AWS_GIGABYTES = 'Gigabytes',
+	UCUM_GIGABYTES = 'GBy',
+	OPEN_METRICS_GIGABYTES = 'gigabytes',
+
+	AWS_TERABYTES = 'Terabytes',
+	UCUM_TERABYTES = 'TBy',
+	OPEN_METRICS_TERABYTES = 'terabytes',
+
+	AWS_PETABYTES = 'Petabytes',
+	UCUM_PETABYTES = 'PBy',
+	OPEN_METRICS_PETABYTES = 'petabytes',
+
+	AWS_EXABYTES = 'Exabytes',
+	UCUM_EXABYTES = 'EBy',
+	OPEN_METRICS_EXABYTES = 'exabytes',
+
+	AWS_ZETTABYTES = 'Zettabytes',
+	UCUM_ZETTABYTES = 'ZBy',
+	OPEN_METRICS_ZETTABYTES = 'zettabytes',
+
+	AWS_YOTTABYTES = 'Yottabytes',
+	UCUM_YOTTABYTES = 'YBy',
+	OPEN_METRICS_YOTTABYTES = 'yottabytes',
+
+	AWS_BYTES_SECOND = 'Bytes/Second',
+	UCUM_BYTES_SECOND = 'By/s',
+	OPEN_METRICS_BYTES_SECOND = 'bytes_per_second',
+
+	AWS_KILOBYTES_SECOND = 'Kilobytes/Second',
+	UCUM_KILOBYTES_SECOND = 'kBy/s',
+	OPEN_METRICS_KILOBYTES_SECOND = 'kilobytes_per_second',
+
+	AWS_MEGABYTES_SECOND = 'Megabytes/Second',
+	UCUM_MEGABYTES_SECOND = 'MBy/s',
+	OPEN_METRICS_MEGABYTES_SECOND = 'megabytes_per_second',
+
+	AWS_GIGABYTES_SECOND = 'Gigabytes/Second',
+	UCUM_GIGABYTES_SECOND = 'GBy/s',
+	OPEN_METRICS_GIGABYTES_SECOND = 'gigabytes_per_second',
+
+	AWS_TERABYTES_SECOND = 'Terabytes/Second',
+	UCUM_TERABYTES_SECOND = 'TBy/s',
+	OPEN_METRICS_TERABYTES_SECOND = 'terabytes_per_second',
+
+	AWS_PETABYTES_SECOND = 'Petabytes/Second',
+	UCUM_PETABYTES_SECOND = 'PBy/s',
+	OPEN_METRICS_PETABYTES_SECOND = 'petabytes_per_second',
+
+	AWS_EXABYTES_SECOND = 'Exabytes/Second',
+	UCUM_EXABYTES_SECOND = 'EBy/s',
+	OPEN_METRICS_EXABYTES_SECOND = 'exabytes_per_second',
+
+	AWS_ZETTABYTES_SECOND = 'Zettabytes/Second',
+	UCUM_ZETTABYTES_SECOND = 'ZBy/s',
+	OPEN_METRICS_ZETTABYTES_SECOND = 'zettabytes_per_second',
+
+	AWS_YOTTABYTES_SECOND = 'Yottabytes/Second',
+	UCUM_YOTTABYTES_SECOND = 'YBy/s',
+	OPEN_METRICS_YOTTABYTES_SECOND = 'yottabytes_per_second',
+
+	AWS_BITS = 'Bits',
+	UCUM_BITS = 'bit',
+	OPEN_METRICS_BITS = 'bits',
+
+	AWS_KILOBITS = 'Kilobits',
+	UCUM_KILOBITS = 'kbit',
+	OPEN_METRICS_KILOBITS = 'kilobits',
+
+	AWS_MEGABITS = 'Megabits',
+	UCUM_MEGABITS = 'Mbit',
+	OPEN_METRICS_MEGABITS = 'megabits',
+
+	AWS_GIGABITS = 'Gigabits',
+	UCUM_GIGABITS = 'Gbit',
+	OPEN_METRICS_GIGABITS = 'gigabits',
+
+	AWS_TERABITS = 'Terabits',
+	UCUM_TERABITS = 'Tbit',
+	OPEN_METRICS_TERABITS = 'terabits',
+
+	AWS_PETABITS = 'Petabits',
+	UCUM_PETABITS = 'Pbit',
+	OPEN_METRICS_PETABITS = 'petabits',
+
+	AWS_EXABITS = 'Exabits',
+	UCUM_EXABITS = 'Ebit',
+	OPEN_METRICS_EXABITS = 'exabits',
+
+	AWS_ZETTABITS = 'Zettabits',
+	UCUM_ZETTABITS = 'Zbit',
+	OPEN_METRICS_ZETTABITS = 'zettabits',
+
+	AWS_YOTTABITS = 'Yottabits',
+	UCUM_YOTTABITS = 'Ybit',
+	OPEN_METRICS_YOTTABITS = 'yottabits',
+
+	AWS_BITS_SECOND = 'Bits/Second',
+	UCUM_BITS_SECOND = 'bit/s',
+	OPEN_METRICS_BITS_SECOND = 'bits_per_second',
+
+	AWS_KILOBITS_SECOND = 'Kilobits/Second',
+	UCUM_KILOBITS_SECOND = 'kbit/s',
+	OPEN_METRICS_KILOBITS_SECOND = 'kilobits_per_second',
+
+	AWS_MEGABITS_SECOND = 'Megabits/Second',
+	UCUM_MEGABITS_SECOND = 'Mbit/s',
+	OPEN_METRICS_MEGABITS_SECOND = 'megabits_per_second',
+
+	AWS_GIGABITS_SECOND = 'Gigabits/Second',
+	UCUM_GIGABITS_SECOND = 'Gbit/s',
+	OPEN_METRICS_GIGABITS_SECOND = 'gigabits_per_second',
+
+	AWS_TERABITS_SECOND = 'Terabits/Second',
+	UCUM_TERABITS_SECOND = 'Tbit/s',
+	OPEN_METRICS_TERABITS_SECOND = 'terabits_per_second',
+
+	AWS_PETABITS_SECOND = 'Petabits/Second',
+	UCUM_PETABITS_SECOND = 'Pbit/s',
+	OPEN_METRICS_PETABITS_SECOND = 'petabits_per_second',
+
+	AWS_EXABITS_SECOND = 'Exabits/Second',
+	UCUM_EXABITS_SECOND = 'Ebit/s',
+	OPEN_METRICS_EXABITS_SECOND = 'exabits_per_second',
+
+	AWS_ZETTABITS_SECOND = 'Zettabits/Second',
+	UCUM_ZETTABITS_SECOND = 'Zbit/s',
+	OPEN_METRICS_ZETTABITS_SECOND = 'zettabits_per_second',
+
+	AWS_YOTTABITS_SECOND = 'Yottabits/Second',
+	UCUM_YOTTABITS_SECOND = 'Ybit/s',
+	OPEN_METRICS_YOTTABITS_SECOND = 'yottabits_per_second',
+
+	AWS_COUNT = 'Count',
+	UCUM_COUNT = '{count}',
+	OPEN_METRICS_COUNT = 'count',
+
+	AWS_COUNT_SECOND = 'Count/Second',
+	UCUM_COUNT_SECOND = '{count}/s',
+	OPEN_METRICS_COUNT_SECOND = 'count_per_second',
+
+	AWS_PERCENT = 'Percent',
+	UCUM_PERCENT = '%',
+	OPEN_METRICS_PERCENT = 'ratio',
+
+	AWS_NONE = 'None',
+	UCUM_NONE = '1',
+	OPEN_METRICS_NONE = 'none',
+
+	UCUM_NANOSECONDS = 'ns',
+	OPEN_METRICS_NANOSECONDS = 'nanoseconds',
+
+	UCUM_MINUTES = 'min',
+	OPEN_METRICS_MINUTES = 'minutes',
+
+	UCUM_HOURS = 'h',
+	OPEN_METRICS_HOURS = 'hours',
+
+	UCUM_DAYS = 'd',
+	OPEN_METRICS_DAYS = 'days',
+
+	UCUM_WEEKS = 'wk',
+	OPEN_METRICS_WEEKS = 'weeks',
+
+	UCUM_KIBIBYTES = 'KiBy',
+	OPEN_METRICS_KIBIBYTES = 'kibibytes',
+
+	UCUM_MEBIBYTES = 'MiBy',
+	OPEN_METRICS_MEBIBYTES = 'mebibytes',
+
+	UCUM_GIBIBYTES = 'GiBy',
+	OPEN_METRICS_GIBIBYTES = 'gibibytes',
+
+	UCUM_TEBIBYTES = 'TiBy',
+	OPEN_METRICS_TEBIBYTES = 'tebibytes',
+
+	UCUM_PEBIBYTES = 'PiBy',
+	OPEN_METRICS_PEBIBYTES = 'pebibytes',
+
+	UCUM_KIBIBYTES_SECOND = 'KiBy/s',
+	OPEN_METRICS_KIBIBYTES_SECOND = 'kibibytes_per_second',
+
+	UCUM_KIBIBITS_SECOND = 'Kibit/s',
+	OPEN_METRICS_KIBIBITS_SECOND = 'kibibits_per_second',
+
+	UCUM_MEBIBYTES_SECOND = 'MiBy/s',
+	OPEN_METRICS_MEBIBYTES_SECOND = 'mebibytes_per_second',
+
+	UCUM_MEBIBITS_SECOND = 'Mibit/s',
+	OPEN_METRICS_MEBIBITS_SECOND = 'mebibits_per_second',
+
+	UCUM_GIBIBYTES_SECOND = 'GiBy/s',
+	OPEN_METRICS_GIBIBYTES_SECOND = 'gibibytes_per_second',
+
+	UCUM_GIBIBITS_SECOND = 'Gibit/s',
+	OPEN_METRICS_GIBIBITS_SECOND = 'gibibits_per_second',
+
+	UCUM_TEBIBYTES_SECOND = 'TiBy/s',
+	OPEN_METRICS_TEBIBYTES_SECOND = 'tebibytes_per_second',
+
+	UCUM_TEBIBITS_SECOND = 'Tibit/s',
+	OPEN_METRICS_TEBIBITS_SECOND = 'tebibits_per_second',
+
+	UCUM_PEBIBYTES_SECOND = 'PiBy/s',
+	OPEN_METRICS_PEBIBYTES_SECOND = 'pebibytes_per_second',
+
+	UCUM_PEBIBITS_SECOND = 'Pibit/s',
+	OPEN_METRICS_PEBIBITS_SECOND = 'pebibits_per_second',
+
+	UCUM_TRUE_FALSE = '{bool}',
+	OPEN_METRICS_TRUE_FALSE = 'boolean_true_false',
+
+	UCUM_YES_NO = '{bool}',
+	OPEN_METRICS_YES_NO = 'boolean_yes_no',
+
+	UCUM_COUNTS_SECOND = '{count}/s',
+	OPEN_METRICS_COUNTS_SECOND = 'counts_per_second',
+
+	UCUM_OPS_SECOND = '{ops}/s',
+	OPEN_METRICS_OPS_SECOND = 'ops_per_second',
+
+	UCUM_REQUESTS_SECOND = '{requests}/s',
+	OPEN_METRICS_REQUESTS_SECOND = 'requests_per_second',
+
+	UCUM_REQUESTS_MINUTE = '{requests}/min',
+	OPEN_METRICS_REQUESTS_MINUTE = 'requests_per_minute',
+
+	UCUM_READS_SECOND = '{reads}/s',
+	OPEN_METRICS_READS_SECOND = 'reads_per_second',
+
+	UCUM_WRITES_SECOND = '{writes}/s',
+	OPEN_METRICS_WRITES_SECOND = 'writes_per_second',
+
+	UCUM_IOPS_SECOND = '{iops}/s',
+	OPEN_METRICS_IOPS_SECOND = 'io_ops_per_second',
+
+	UCUM_COUNTS_MINUTE = '{count}/min',
+	OPEN_METRICS_COUNTS_MINUTE = 'counts_per_minute',
+
+	UCUM_OPS_MINUTE = '{ops}/min',
+	OPEN_METRICS_OPS_MINUTE = 'ops_per_minute',
+
+	UCUM_READS_MINUTE = '{reads}/min',
+	OPEN_METRICS_READS_MINUTE = 'reads_per_minute',
+
+	UCUM_WRITES_MINUTE = '{writes}/min',
+	OPEN_METRICS_WRITES_MINUTE = 'writes_per_minute',
+
+	OPEN_METRICS_PERCENT_UNIT = 'percentunit',
+}
--- a/frontend/src/components/YAxisUnitSelector/utils.tsx
+++ b/frontend/src/components/YAxisUnitSelector/utils.tsx
@@ -0,0 +1,33 @@
+import { UniversalYAxisUnitMappings, Y_AXIS_UNIT_NAMES } from './constants';
+import { UniversalYAxisUnit, YAxisUnit } from './types';
+
+export const mapMetricUnitToUniversalUnit = (
+	unit: string | undefined,
+): UniversalYAxisUnit | null => {
+	if (!unit) {
+		return null;
+	}
+
+	const universalUnit = Object.values(UniversalYAxisUnit).find(
+		(u) => UniversalYAxisUnitMappings[u].has(unit as YAxisUnit) || unit === u,
+	);
+
+	return universalUnit || (unit as UniversalYAxisUnit) || null;
+};
+
+export const getUniversalNameFromMetricUnit = (
+	unit: string | undefined,
+): string => {
+	if (!unit) {
+		return '-';
+	}
+
+	const universalUnit = mapMetricUnitToUniversalUnit(unit);
+	if (!universalUnit) {
+		return unit;
+	}
+
+	const universalName = Y_AXIS_UNIT_NAMES[universalUnit];
+
+	return universalName || unit || '-';
+};
--- a/frontend/src/constants/antlrQueryConstants.ts
+++ b/frontend/src/constants/antlrQueryConstants.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
 export const OPERATORS = {
 	IN: 'IN',
 	LIKE: 'LIKE',
@@ -21,6 +23,44 @@ export const QUERY_BUILDER_FUNCTIONS = {
 	HASALL: 'hasAll',
 };

+export function negateOperator(operatorOrFunction: string): string {
+	// Special cases for equals/not equals
+	if (operatorOrFunction === OPERATORS['=']) {
+		return OPERATORS['!='];
+	}
+	if (operatorOrFunction === OPERATORS['!=']) {
+		return OPERATORS['='];
+	}
+	// For all other operators and functions, add NOT in front
+	return `${OPERATORS.NOT} ${operatorOrFunction}`;
+}
+
+export enum DEPRECATED_OPERATORS {
+	REGEX = 'regex',
+	NIN = 'nin',
+	NREGEX = 'nregex',
+	NLIKE = 'nlike',
+	NILIKE = 'nilike',
+	NEXTISTS = 'nexists',
+	NCONTAINS = 'ncontains',
+	NHAS = 'nhas',
+	NHASANY = 'nhasany',
+	NHASALL = 'nhasall',
+}
+
+export const DEPRECATED_OPERATORS_MAP = {
+	[DEPRECATED_OPERATORS.REGEX]: OPERATORS.REGEXP,
+	[DEPRECATED_OPERATORS.NIN]: negateOperator(OPERATORS.IN),
+	[DEPRECATED_OPERATORS.NREGEX]: negateOperator(OPERATORS.REGEXP),
+	[DEPRECATED_OPERATORS.NLIKE]: negateOperator(OPERATORS.LIKE),
+	[DEPRECATED_OPERATORS.NILIKE]: negateOperator(OPERATORS.ILIKE),
+	[DEPRECATED_OPERATORS.NEXTISTS]: negateOperator(OPERATORS.EXISTS),
+	[DEPRECATED_OPERATORS.NCONTAINS]: negateOperator(OPERATORS.CONTAINS),
+	[DEPRECATED_OPERATORS.NHAS]: negateOperator(QUERY_BUILDER_FUNCTIONS.HAS),
+	[DEPRECATED_OPERATORS.NHASANY]: negateOperator(QUERY_BUILDER_FUNCTIONS.HASANY),
+	[DEPRECATED_OPERATORS.NHASALL]: negateOperator(QUERY_BUILDER_FUNCTIONS.HASALL),
+};
+
 export const NON_VALUE_OPERATORS = [OPERATORS.EXISTS];

 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -82,15 +122,3 @@ export const queryOperatorSuggestions = [
 	{ label: OPERATORS.NOT, type: 'operator', info: 'Not' },
 	...negationQueryOperatorSuggestions,
 ];
-
-export function negateOperator(operatorOrFunction: string): string {
-	// Special cases for equals/not equals
-	if (operatorOrFunction === OPERATORS['=']) {
-		return OPERATORS['!='];
-	}
-	if (operatorOrFunction === OPERATORS['!=']) {
-		return OPERATORS['='];
-	}
-	// For all other operators and functions, add NOT in front
-	return `${OPERATORS.NOT} ${operatorOrFunction}`;
-}
--- a/frontend/src/constants/dateTimeFormats.ts
+++ b/frontend/src/constants/dateTimeFormats.ts
@@ -39,6 +39,8 @@ export const DATE_TIME_FORMATS = {
 	MONTH_DATETIME_SECONDS: 'MMM DD YYYY HH:mm:ss',
 	MONTH_DATETIME_FULL: 'MMMM DD, YYYY HH:mm',
 	MONTH_DATETIME_FULL_SECONDS: 'MMM DD, YYYY, HH:mm:ss',
+	DD_MMM_YYYY_HH_MM: 'DD MMM YYYY, HH:mm',
+	DD_MMM_YYYY_HH_MM_SS: 'DD MMM YYYY, HH:mm:ss',

 	// Ordinal formats (1st, 2nd, 3rd, etc)
 	ORDINAL_DATE: 'Do MMM YYYY',
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -32,4 +32,7 @@ export enum LOCALSTORAGE {
 	BANNER_DISMISSED = 'BANNER_DISMISSED',
 	QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT',
 	FUNNEL_STEPS = 'FUNNEL_STEPS',
+	SPAN_DETAILS_PINNED_ATTRIBUTES = 'SPAN_DETAILS_PINNED_ATTRIBUTES',
+	LAST_USED_CUSTOM_TIME_RANGES = 'LAST_USED_CUSTOM_TIME_RANGES',
+	SHOW_FREQUENCY_CHART = 'SHOW_FREQUENCY_CHART',
 }
--- a/frontend/src/constants/query.ts
+++ b/frontend/src/constants/query.ts
@@ -46,6 +46,7 @@ export enum QueryParams {
 	msgSystem = 'msgSystem',
 	destination = 'destination',
 	kindString = 'kindString',
+	summaryFilters = 'summaryFilters',
 	tab = 'tab',
 	thresholds = 'thresholds',
 	selectedExplorerView = 'selectedExplorerView',
--- a/frontend/src/constants/queryBuilder.ts
+++ b/frontend/src/constants/queryBuilder.ts
@@ -55,8 +55,8 @@ export const selectValueDivider = '__';

 export const baseAutoCompleteIdKeysOrder: (keyof Omit<
 	BaseAutocompleteData,
-	'id' | 'isJSON' | 'isIndexed'
->)[] = ['key', 'dataType', 'type', 'isColumn'];
+	'id' | 'isIndexed'
+>)[] = ['key', 'dataType', 'type'];

 export const autocompleteType: Record<AutocompleteType, AutocompleteType> = {
 	resource: 'resource',
@@ -150,14 +150,12 @@ export const initialHavingValues: HavingForm = {

 export const initialAutocompleteData: BaseAutocompleteData = {
 	id: createIdFromObjectFields(
-		{ dataType: null, key: '', isColumn: null, type: null },
+		{ dataType: null, key: '', type: null },
 		baseAutoCompleteIdKeysOrder,
 	),
 	dataType: DataTypes.EMPTY,
 	key: '',
-	isColumn: false,
 	type: '',
-	isJSON: false,
 };

 export const initialFilters: TagFilter = {
@@ -189,7 +187,7 @@ export const initialQueryBuilderFormValues: IBuilderQuery = {
 		sourceNames: alphabet,
 	}),
 	disabled: false,
-	stepInterval: undefined,
+	stepInterval: null,
 	having: [],
 	limit: null,
 	orderBy: [],
@@ -237,7 +235,7 @@ export const initialQueryBuilderFormMeterValues: IBuilderQuery = {
 		sourceNames: alphabet,
 	}),
 	disabled: false,
-	stepInterval: undefined,
+	stepInterval: null,
 	having: [],
 	limit: null,
 	orderBy: [],
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -77,9 +77,9 @@ const ROUTES = {
 	API_MONITORING: '/api-monitoring/explorer',
 	METRICS_EXPLORER_BASE: '/metrics-explorer',
 	WORKSPACE_ACCESS_RESTRICTED: '/workspace-access-restricted',
-	METER_EXPLORER_BASE: '/meter-explorer',
-	METER_EXPLORER: '/meter-explorer',
-	METER_EXPLORER_VIEWS: '/meter-explorer/views',
+	METER: '/meter',
+	METER_EXPLORER: '/meter/explorer',
+	METER_EXPLORER_VIEWS: '/meter/explorer/views',
 	HOME_PAGE: '/',
 } as const;

--- a/frontend/src/constants/shortcuts/globalShortcuts.ts
+++ b/frontend/src/constants/shortcuts/globalShortcuts.ts
@@ -7,6 +7,7 @@ export const GlobalShortcuts = {
 	NavigateToExceptions: 'e+shift',
 	NavigateToMessagingQueues: 'm+shift',
 	ToggleSidebar: 'b+shift',
+	NavigateToHome: 'h+shift',
 };

 export const GlobalShortcutsName = {
@@ -18,15 +19,17 @@ export const GlobalShortcutsName = {
 	NavigateToExceptions: 'shift+e',
 	NavigateToMessagingQueues: 'shift+m',
 	ToggleSidebar: 'shift+b',
+	NavigateToHome: 'shift+h',
 };

 export const GlobalShortcutsDescription = {
+	NavigateToHome: 'Navigate to Home',
 	NavigateToServices: 'Navigate to Services page',
-	NavigateToTraces: 'Navigate to Traces page',
-	NavigateToLogs: 'Navigate to logs page',
-	NavigateToDashboards: 'Navigate to dashboards page',
-	NavigateToAlerts: 'Navigate to alerts page',
-	NavigateToExceptions: 'Navigate to Exceptions page',
-	NavigateToMessagingQueues: 'Navigate to Messaging Queues page',
+	NavigateToTraces: 'Navigate to Traces Explorer',
+	NavigateToLogs: 'Navigate to Logs Explorer',
+	NavigateToDashboards: 'Navigate to Dashboards List',
+	NavigateToAlerts: 'Navigate to Alerts List',
+	NavigateToExceptions: 'Navigate to Exceptions List',
+	NavigateToMessagingQueues: 'Navigate to Messaging Queues',
 	ToggleSidebar: 'Toggle sidebar visibility',
 };
--- a/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts
+++ b/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts
@@ -10,9 +10,9 @@ export const LogsExplorerShortcuts = {
 export const LogsExplorerShortcutsName = {
 	StageAndRunQuery: `${
 		userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'
-	}+enter`,
+	} + enter`,
 	FocusTheSearchBar: 's',
-	ShowAllFilters: `${userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'}+/`,
+	ShowAllFilters: `${userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'} + /`,
 };

 export const LogsExplorerShortcutsDescription = {
--- a/frontend/src/constants/userPreferences.ts
+++ b/frontend/src/constants/userPreferences.ts
@@ -2,4 +2,5 @@ export const USER_PREFERENCES = {
 	SIDENAV_PINNED: 'sidenav_pinned',
 	NAV_SHORTCUTS: 'nav_shortcuts',
 	LAST_SEEN_CHANGELOG_VERSION: 'last_seen_changelog_version',
+	SPAN_DETAILS_PINNED_ATTRIBUTES: 'span_details_pinned_attributes',
 };
--- a/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.styles.scss
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.styles.scss
@@ -48,10 +48,10 @@
 			line-height: 36px;
 		}
 	}
-	&__graph {
+	&__alert-history-graph {
 		margin-top: 80px;

-		.graph {
+		.alert-history-graph {
 			width: 100%;
 			height: 72px;
 		}
--- a/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx
@@ -135,8 +135,8 @@ function StatsCard({
 				/>
 			</div>

-			<div className="stats-card__graph">
-				<div className="graph">
+			<div className="stats-card__alert-history-graph">
+				<div className="alert-history-graph">
 					{!isEmpty && timeSeries.length > 1 && (
 						<StatsGraph timeSeries={timeSeries} changeDirection={changeDirection} />
 					)}
--- a/frontend/src/container/ApiMonitoring/APIMonitoringUtils.test.tsx
+++ b/frontend/src/container/ApiMonitoring/APIMonitoringUtils.test.tsx
@@ -56,8 +56,6 @@ describe('API Monitoring Utils', () => {
 			const groupBy = [
 				{
 					dataType: DataTypes.String,
-					isColumn: true,
-					isJSON: false,
 					// eslint-disable-next-line sonarjs/no-duplicate-string
 					key: 'http.method',
 					type: '',
@@ -72,8 +70,6 @@ describe('API Monitoring Utils', () => {
 						id: 'test-filter',
 						key: {
 							dataType: DataTypes.String,
-							isColumn: true,
-							isJSON: false,
 							key: 'test-key',
 							type: '',
 						},
@@ -144,8 +140,6 @@ describe('API Monitoring Utils', () => {
 					[
 						{
 							dataType: DataTypes.String,
-							isColumn: true,
-							isJSON: false,
 							key: 'custom.field',
 							type: '',
 						},
@@ -180,24 +174,18 @@ describe('API Monitoring Utils', () => {
 					id: 'group-by-1',
 					key: 'http.method',
 					dataType: DataTypes.String,
-					isColumn: true,
-					isJSON: false,
 					type: '',
 				},
 				{
 					id: 'group-by-2',
 					key: 'http.status_code',
 					dataType: DataTypes.String,
-					isColumn: true,
-					isJSON: false,
 					type: '',
 				},
 				{
 					id: 'group-by-3',
 					key: 'service.name',
 					dataType: DataTypes.String,
-					isColumn: false,
-					isJSON: false,
 					type: 'tag',
 				},
 			];
@@ -258,8 +246,6 @@ describe('API Monitoring Utils', () => {
 					id: 'group-by-1',
 					key: 'http.method',
 					dataType: DataTypes.String,
-					isColumn: true,
-					isJSON: false,
 					type: '',
 				},
 			];
@@ -281,7 +267,6 @@ describe('API Monitoring Utils', () => {
 			expect(knownField).toBeDefined();
 			if (knownField && knownField.key) {
 				expect(knownField.key.dataType).toBe(DataTypes.String);
-				expect(knownField.key.isColumn).toBe(true);
 			}

 			// Should include the unknown field
@@ -430,8 +415,6 @@ describe('API Monitoring Utils', () => {
 						id: 'test-filter',
 						key: {
 							dataType: DataTypes.String,
-							isColumn: true,
-							isJSON: false,
 							key: 'test-key',
 							type: '',
 						},
@@ -543,8 +526,6 @@ describe('API Monitoring Utils', () => {
 						id: 'test-filter',
 						key: {
 							dataType: 'string',
-							isColumn: true,
-							isJSON: false,
 							key: 'test.key',
 							type: '',
 						},
@@ -1401,8 +1382,6 @@ describe('API Monitoring Utils', () => {
 				id: 'custom-filter',
 				key: {
 					dataType: 'string',
-					isColumn: true,
-					isJSON: false,
 					key: 'custom.key',
 					type: '',
 				},
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/EndPointDetails.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/EndPointDetails.tsx
@@ -32,8 +32,6 @@ import { SPAN_ATTRIBUTES } from './constants';

 const httpUrlKey = {
 	dataType: DataTypes.String,
-	isColumn: false,
-	isJSON: false,
 	key: SPAN_ATTRIBUTES.URL_PATH,
 	type: 'tag',
 };
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx
@@ -58,8 +58,6 @@ function TopErrors({
 									id: '92b8a1c1',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.URL_PATH,
 										type: 'tag',
 									},
--- a/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx
+++ b/frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx
@@ -99,8 +99,6 @@ function DomainList(): JSX.Element {
 							key: 'kind_string',
 							dataType: 'string',
 							type: '',
-							isColumn: true,
-							isJSON: false,
 						},
 						op: '=',
 						value: 'Client',
--- a/frontend/src/container/ApiMonitoring/tests/AllEndPoints.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/AllEndPoints.test.tsx
@@ -123,8 +123,6 @@ describe('AllEndPoints', () => {
 						{
 							key: 'http.status_code',
 							dataType: 'string',
-							isColumn: true,
-							isJSON: false,
 							type: '',
 						},
 					],
--- a/frontend/src/container/ApiMonitoring/tests/EndPointDetails.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/EndPointDetails.test.tsx
@@ -76,8 +76,6 @@ jest.mock(
 										key: 'test.key',
 										dataType: DataTypes.String,
 										type: 'tag',
-										isColumn: false,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'test-value',
@@ -335,8 +333,6 @@ describe('EndPointDetails Component', () => {
 							key: 'service.name',
 							dataType: DataTypes.String,
 							type: 'tag',
-							isColumn: false,
-							isJSON: false,
 						},
 						op: '=',
 						value: 'test-service',
--- a/frontend/src/container/ApiMonitoring/tests/StatusCodeBarCharts.test.tsx
+++ b/frontend/src/container/ApiMonitoring/tests/StatusCodeBarCharts.test.tsx
@@ -172,8 +172,6 @@ describe('StatusCodeBarCharts', () => {
 			key: {
 				dataType: 'string',
 				id: 'response_status_code--string--tag--false',
-				isColumn: false,
-				isJSON: false,
 				key: 'response_status_code',
 				type: 'tag',
 			},
@@ -185,8 +183,6 @@ describe('StatusCodeBarCharts', () => {
 			key: {
 				dataType: 'string',
 				id: 'response_status_code--string--tag--false',
-				isColumn: false,
-				isJSON: false,
 				key: 'response_status_code',
 				type: 'tag',
 			},
--- a/frontend/src/container/ApiMonitoring/utils.tsx
+++ b/frontend/src/container/ApiMonitoring/utils.tsx
@@ -43,8 +43,6 @@ export const ApiMonitoringQuickFiltersConfig: IQuickFiltersConfig[] = [
 			key: 'deployment.environment',
 			dataType: DataTypes.String,
 			type: 'resource',
-			isColumn: false,
-			isJSON: false,
 		},
 		dataSource: DataSource.TRACES,
 		defaultOpen: true,
@@ -56,8 +54,6 @@ export const ApiMonitoringQuickFiltersConfig: IQuickFiltersConfig[] = [
 			key: 'service.name',
 			dataType: DataTypes.String,
 			type: 'resource',
-			isColumn: true,
-			isJSON: false,
 		},
 		dataSource: DataSource.TRACES,
 		defaultOpen: true,
@@ -69,8 +65,6 @@ export const ApiMonitoringQuickFiltersConfig: IQuickFiltersConfig[] = [
 			key: 'rpc.method',
 			dataType: DataTypes.String,
 			type: 'tag',
-			isColumn: true,
-			isJSON: false,
 		},
 		dataSource: DataSource.TRACES,
 		defaultOpen: true,
@@ -255,22 +249,16 @@ export const hardcodedAttributeKeys: BaseAutocompleteData[] = [
 		key: 'deployment.environment',
 		dataType: DataTypes.String,
 		type: 'resource',
-		isColumn: false,
-		isJSON: false,
 	},
 	{
 		key: 'service.name',
 		dataType: DataTypes.String,
 		type: 'resource',
-		isColumn: true,
-		isJSON: false,
 	},
 	{
 		key: 'rpc.method',
 		dataType: DataTypes.String,
 		type: 'tag',
-		isColumn: true,
-		isJSON: false,
 	},
 ];

@@ -352,8 +340,6 @@ export const getDomainMetricsQueryPayload = (
 						aggregateOperator: 'count',
 						aggregateAttribute: {
 							dataType: DataTypes.String,
-							isColumn: false,
-							isJSON: false,
 							key: SPAN_ATTRIBUTES.URL_PATH,
 							type: 'tag',
 						},
@@ -366,8 +352,6 @@ export const getDomainMetricsQueryPayload = (
 									id: '4c57937c',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -394,8 +378,6 @@ export const getDomainMetricsQueryPayload = (
 						aggregateOperator: 'p99',
 						aggregateAttribute: {
 							dataType: DataTypes.Float64,
-							isColumn: true,
-							isJSON: false,
 							key: 'duration_nano',
 							type: '',
 						},
@@ -408,8 +390,6 @@ export const getDomainMetricsQueryPayload = (
 									id: '2cf675cd',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -437,7 +417,6 @@ export const getDomainMetricsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: '------false',
-							isColumn: false,
 							key: '',
 							type: '',
 						},
@@ -450,8 +429,6 @@ export const getDomainMetricsQueryPayload = (
 									id: '3db0f605',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -462,8 +439,6 @@ export const getDomainMetricsQueryPayload = (
 									id: '6096f745',
 									key: {
 										dataType: DataTypes.bool,
-										isColumn: true,
-										isJSON: false,
 										key: 'has_error',
 										type: '',
 									},
@@ -491,7 +466,6 @@ export const getDomainMetricsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: 'timestamp------false',
-							isColumn: false,
 							key: 'timestamp',
 							type: '',
 						},
@@ -504,8 +478,6 @@ export const getDomainMetricsQueryPayload = (
 									id: '8ff8dea1',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -639,8 +611,6 @@ export const getEndPointsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.String,
-								isColumn: true,
-								isJSON: false,
 								key: 'span_id',
 								type: '',
 							},
@@ -654,8 +624,6 @@ export const getEndPointsQueryPayload = (
 										id: 'ec316e57',
 										key: {
 											dataType: DataTypes.String,
-											isColumn: false,
-											isJSON: false,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
 											type: 'tag',
 										},
@@ -668,8 +636,6 @@ export const getEndPointsQueryPayload = (
 											key: 'kind_string',
 											dataType: DataTypes.String,
 											type: '',
-											isColumn: true,
-											isJSON: false,
 										},
 										op: '=',
 										value: 'Client',
@@ -692,8 +658,6 @@ export const getEndPointsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								isColumn: true,
-								isJSON: false,
 								key: 'duration_nano',
 								type: '',
 							},
@@ -707,8 +671,6 @@ export const getEndPointsQueryPayload = (
 										id: '46d57857',
 										key: {
 											dataType: DataTypes.String,
-											isColumn: false,
-											isJSON: false,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
 											type: 'tag',
 										},
@@ -721,8 +683,6 @@ export const getEndPointsQueryPayload = (
 											key: 'kind_string',
 											dataType: DataTypes.String,
 											type: '',
-											isColumn: true,
-											isJSON: false,
 										},
 										op: '=',
 										value: 'Client',
@@ -746,7 +706,6 @@ export const getEndPointsQueryPayload = (
 							aggregateAttribute: {
 								dataType: DataTypes.String,
 								id: 'timestamp------false',
-								isColumn: false,
 								key: 'timestamp',
 								type: '',
 							},
@@ -760,8 +719,6 @@ export const getEndPointsQueryPayload = (
 										id: '4a237616',
 										key: {
 											dataType: DataTypes.String,
-											isColumn: false,
-											isJSON: false,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
 											type: 'tag',
 										},
@@ -774,8 +731,6 @@ export const getEndPointsQueryPayload = (
 											key: 'kind_string',
 											dataType: DataTypes.String,
 											type: '',
-											isColumn: true,
-											isJSON: false,
 										},
 										op: '=',
 										value: 'Client',
@@ -798,8 +753,6 @@ export const getEndPointsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.String,
-								isColumn: true,
-								isJSON: false,
 								key: 'span_id',
 								type: '',
 							},
@@ -813,8 +766,6 @@ export const getEndPointsQueryPayload = (
 										id: 'f162de1e',
 										key: {
 											dataType: DataTypes.String,
-											isColumn: false,
-											isJSON: false,
 											key: SPAN_ATTRIBUTES.SERVER_NAME,
 											type: 'tag',
 										},
@@ -825,8 +776,6 @@ export const getEndPointsQueryPayload = (
 										id: '3df0ac1d',
 										key: {
 											dataType: DataTypes.bool,
-											isColumn: true,
-											isJSON: false,
 											key: 'has_error',
 											type: '',
 										},
@@ -839,8 +788,6 @@ export const getEndPointsQueryPayload = (
 											key: 'kind_string',
 											dataType: DataTypes.String,
 											type: '',
-											isColumn: true,
-											isJSON: false,
 										},
 										op: '=',
 										value: 'Client',
@@ -919,9 +866,7 @@ export const getTopErrorsQueryPayload = (
 							id: '------false',
 							dataType: DataTypes.String,
 							key: '',
-							isColumn: false,
 							type: '',
-							isJSON: false,
 						},
 						timeAggregation: 'rate',
 						spaceAggregation: 'sum',
@@ -935,8 +880,6 @@ export const getTopErrorsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -947,8 +890,6 @@ export const getTopErrorsQueryPayload = (
 										key: SPAN_ATTRIBUTES.URL_PATH,
 										dataType: DataTypes.String,
 										type: 'tag',
-										isColumn: false,
-										isJSON: false,
 									},
 									op: 'exists',
 									value: '',
@@ -961,8 +902,6 @@ export const getTopErrorsQueryPayload = (
 													key: 'status_message',
 													dataType: DataTypes.String,
 													type: '',
-													isColumn: true,
-													isJSON: false,
 												},
 												op: 'exists',
 												value: '',
@@ -975,8 +914,6 @@ export const getTopErrorsQueryPayload = (
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										dataType: DataTypes.String,
 										type: 'tag',
-										isColumn: false,
-										isJSON: false,
 									},
 									op: '=',
 									value: domainName,
@@ -987,8 +924,6 @@ export const getTopErrorsQueryPayload = (
 										key: 'has_error',
 										dataType: DataTypes.bool,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: true,
@@ -1012,13 +947,9 @@ export const getTopErrorsQueryPayload = (
 								key: SPAN_ATTRIBUTES.URL_PATH,
 								dataType: DataTypes.String,
 								type: 'tag',
-								isColumn: false,
-								isJSON: false,
 							},
 							{
 								dataType: DataTypes.String,
-								isColumn: true,
-								isJSON: false,
 								key: 'response_status_code',
 								type: '',
 								id: 'response_status_code--string----true',
@@ -1027,8 +958,6 @@ export const getTopErrorsQueryPayload = (
 								key: 'status_message',
 								dataType: DataTypes.String,
 								type: '',
-								isColumn: true,
-								isJSON: false,
 							},
 						],
 						legend: '',
@@ -1404,8 +1333,6 @@ export const getTopErrorsCoRelationQueryFilters = (
 				key: 'http.url',
 				dataType: DataTypes.String,
 				type: 'tag',
-				isColumn: false,
-				isJSON: false,
 				id: 'http.url--string--tag--false',
 			},
 			op: '=',
@@ -1417,8 +1344,6 @@ export const getTopErrorsCoRelationQueryFilters = (
 				key: 'has_error',
 				dataType: DataTypes.bool,
 				type: '',
-				isColumn: false,
-				isJSON: false,
 			},
 			op: '=',
 			value: 'true',
@@ -1429,8 +1354,6 @@ export const getTopErrorsCoRelationQueryFilters = (
 				key: 'net.peer.name',
 				dataType: DataTypes.String,
 				type: '',
-				isColumn: false,
-				isJSON: false,
 			},
 			op: '=',
 			value: domainName,
@@ -1441,8 +1364,6 @@ export const getTopErrorsCoRelationQueryFilters = (
 				key: 'response_status_code',
 				dataType: DataTypes.String,
 				type: '',
-				isColumn: true,
-				isJSON: false,
 				id: 'response_status_code--string----true',
 			},
 			op: '=',
@@ -1551,8 +1472,6 @@ export const getEndPointDetailsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: '------false',
-							isColumn: false,
-							isJSON: false,
 							key: '',
 							type: '',
 						},
@@ -1566,8 +1485,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: '874562e1',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1580,8 +1497,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1605,8 +1520,6 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.Float64,
-							isColumn: true,
-							isJSON: false,
 							key: 'duration_nano',
 							type: '',
 						},
@@ -1620,8 +1533,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: '0c5564e0',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1634,8 +1545,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1659,8 +1568,6 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.String,
-							isColumn: true,
-							isJSON: false,
 							key: 'span_id',
 							type: '',
 						},
@@ -1674,8 +1581,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: '0d656701',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1686,8 +1591,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: '83ef9a1b',
 									key: {
 										dataType: DataTypes.bool,
-										isColumn: true,
-										isJSON: false,
 										key: 'has_error',
 										type: '',
 									},
@@ -1700,8 +1603,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1726,7 +1627,6 @@ export const getEndPointDetailsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: 'timestamp------false',
-							isColumn: false,
 							key: 'timestamp',
 							type: '',
 						},
@@ -1740,8 +1640,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: '918f5b99',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1754,8 +1652,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1779,8 +1675,6 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.String,
-							isColumn: true,
-							isJSON: false,
 							key: 'span_id',
 							type: '',
 						},
@@ -1794,8 +1688,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: 'b355d1aa',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1808,8 +1700,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1874,8 +1764,6 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.String,
-							isColumn: true,
-							isJSON: false,
 							key: 'span_id',
 							type: '',
 						},
@@ -1889,8 +1777,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: '23450eb8',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1903,8 +1789,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1917,8 +1801,6 @@ export const getEndPointDetailsQueryPayload = (
 						groupBy: [
 							{
 								dataType: DataTypes.String,
-								isColumn: true,
-								isJSON: false,
 								key: 'response_status_code',
 								type: '',
 							},
@@ -1936,8 +1818,6 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.Float64,
-							isColumn: true,
-							isJSON: false,
 							key: 'duration_nano',
 							type: '',
 						},
@@ -1951,8 +1831,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: '2687dc18',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -1965,8 +1843,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -1979,8 +1855,6 @@ export const getEndPointDetailsQueryPayload = (
 						groupBy: [
 							{
 								dataType: DataTypes.String,
-								isColumn: true,
-								isJSON: false,
 								key: 'response_status_code',
 								type: '',
 							},
@@ -2002,7 +1876,6 @@ export const getEndPointDetailsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: '------false',
-							isColumn: false,
 							key: '',
 							type: '',
 						},
@@ -2016,8 +1889,6 @@ export const getEndPointDetailsQueryPayload = (
 									key: {
 										dataType: DataTypes.String,
 										id: 'net.peer.name--string--tag--false',
-										isColumn: false,
-										isJSON: false,
 										key: 'net.peer.name',
 										type: 'tag',
 									},
@@ -2030,8 +1901,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2049,8 +1918,6 @@ export const getEndPointDetailsQueryPayload = (
 						groupBy: [
 							{
 								dataType: DataTypes.String,
-								isColumn: true,
-								isJSON: false,
 								key: 'response_status_code',
 								type: '',
 								id: 'response_status_code--string----true',
@@ -2100,7 +1967,6 @@ export const getEndPointDetailsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							key: '',
-							isColumn: false,
 							type: '',
 						},
 						timeAggregation: 'count',
@@ -2114,8 +1980,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										dataType: DataTypes.String,
 										type: 'tag',
-										isColumn: false,
-										isJSON: false,
 									},
 									op: '=',
 									value: domainName,
@@ -2126,8 +1990,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2148,8 +2010,6 @@ export const getEndPointDetailsQueryPayload = (
 								key: SPAN_ATTRIBUTES.URL_PATH,
 								dataType: DataTypes.String,
 								type: 'tag',
-								isColumn: false,
-								isJSON: false,
 							},
 						],
 						reduceTo: 'avg',
@@ -2191,8 +2051,6 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.String,
-							isColumn: true,
-							isJSON: false,
 							key: 'span_id',
 							type: '',
 						},
@@ -2206,8 +2064,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: 'b78ff216',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -2220,8 +2076,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2235,8 +2089,6 @@ export const getEndPointDetailsQueryPayload = (
 							{
 								dataType: DataTypes.String,
 								id: 'service.name--string--resource--true',
-								isColumn: true,
-								isJSON: false,
 								key: 'service.name',
 								type: 'resource',
 							},
@@ -2254,8 +2106,6 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.Float64,
-							isColumn: true,
-							isJSON: false,
 							key: 'duration_nano',
 							type: '',
 						},
@@ -2269,8 +2119,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: 'a9024472',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -2283,8 +2131,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2298,8 +2144,6 @@ export const getEndPointDetailsQueryPayload = (
 							{
 								dataType: DataTypes.String,
 								id: 'service.name--string--resource--true',
-								isColumn: true,
-								isJSON: false,
 								key: 'service.name',
 								type: 'resource',
 							},
@@ -2318,7 +2162,6 @@ export const getEndPointDetailsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: '------false',
-							isColumn: false,
 							key: '',
 							type: '',
 						},
@@ -2332,8 +2175,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: '1b6c062d',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -2346,8 +2187,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2361,8 +2200,6 @@ export const getEndPointDetailsQueryPayload = (
 							{
 								dataType: DataTypes.String,
 								id: 'service.name--string--resource--true',
-								isColumn: true,
-								isJSON: false,
 								key: 'service.name',
 								type: 'resource',
 							},
@@ -2380,8 +2217,6 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.String,
-							isColumn: true,
-							isJSON: false,
 							key: 'span_id',
 							type: '',
 						},
@@ -2395,8 +2230,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: 'd14792a8',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -2406,9 +2239,6 @@ export const getEndPointDetailsQueryPayload = (
 								{
 									id: '3212bf1a',
 									key: {
-										dataType: DataTypes.bool,
-										isColumn: true,
-										isJSON: false,
 										key: 'has_error',
 										type: '',
 									},
@@ -2421,8 +2251,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2436,8 +2264,6 @@ export const getEndPointDetailsQueryPayload = (
 							{
 								dataType: DataTypes.String,
 								id: 'service.name--string--resource--true',
-								isColumn: true,
-								isJSON: false,
 								key: 'service.name',
 								type: 'resource',
 							},
@@ -2497,7 +2323,6 @@ export const getEndPointDetailsQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							id: '------false',
-							isColumn: false,
 							key: '',
 							type: '',
 						},
@@ -2511,8 +2336,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: 'c6724407',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -2525,8 +2348,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2539,8 +2360,6 @@ export const getEndPointDetailsQueryPayload = (
 						groupBy: [
 							{
 								dataType: DataTypes.String,
-								isColumn: true,
-								isJSON: false,
 								key: 'response_status_code',
 								type: '',
 							},
@@ -2592,8 +2411,6 @@ export const getEndPointDetailsQueryPayload = (
 					{
 						aggregateAttribute: {
 							dataType: DataTypes.Float64,
-							isColumn: true,
-							isJSON: false,
 							key: 'duration_nano',
 							type: '',
 						},
@@ -2607,8 +2424,6 @@ export const getEndPointDetailsQueryPayload = (
 									id: 'aae93366',
 									key: {
 										dataType: DataTypes.String,
-										isColumn: false,
-										isJSON: false,
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										type: 'tag',
 									},
@@ -2621,8 +2436,6 @@ export const getEndPointDetailsQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2635,8 +2448,6 @@ export const getEndPointDetailsQueryPayload = (
 						groupBy: [
 							{
 								dataType: DataTypes.String,
-								isColumn: true,
-								isJSON: false,
 								key: 'response_status_code',
 								type: '',
 							},
@@ -2699,7 +2510,6 @@ export const getEndPointZeroStateQueryPayload = (
 						aggregateAttribute: {
 							dataType: DataTypes.String,
 							key: '',
-							isColumn: false,
 							type: '',
 						},
 						timeAggregation: 'count',
@@ -2713,8 +2523,6 @@ export const getEndPointZeroStateQueryPayload = (
 										key: SPAN_ATTRIBUTES.SERVER_NAME,
 										dataType: DataTypes.String,
 										type: 'tag',
-										isColumn: false,
-										isJSON: false,
 									},
 									op: '=',
 									value: domainName,
@@ -2725,8 +2533,6 @@ export const getEndPointZeroStateQueryPayload = (
 										key: 'kind_string',
 										dataType: DataTypes.String,
 										type: '',
-										isColumn: true,
-										isJSON: false,
 									},
 									op: '=',
 									value: 'Client',
@@ -2746,8 +2552,6 @@ export const getEndPointZeroStateQueryPayload = (
 								key: SPAN_ATTRIBUTES.URL_PATH,
 								dataType: DataTypes.String,
 								type: 'tag',
-								isColumn: false,
-								isJSON: false,
 							},
 						],
 						reduceTo: 'avg',
@@ -3280,7 +3084,6 @@ export const getStatusCodeBarChartWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
-						isColumn: false,
 						key: '',
 						type: '',
 					},
@@ -3294,8 +3097,6 @@ export const getStatusCodeBarChartWidgetData = (
 								id: 'c6724407',
 								key: {
 									dataType: DataTypes.String,
-									isColumn: false,
-									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -3308,8 +3109,6 @@ export const getStatusCodeBarChartWidgetData = (
 											id: '8b1be6f0',
 											key: {
 												dataType: DataTypes.String,
-												isColumn: false,
-												isJSON: false,
 												key: SPAN_ATTRIBUTES.URL_PATH,
 												type: 'tag',
 											},
@@ -3427,8 +3226,6 @@ export const getAllEndpointsWidgetData = (
 				{
 					aggregateAttribute: {
 						dataType: DataTypes.String,
-						isColumn: true,
-						isJSON: false,
 						key: 'span_id',
 						type: '',
 					},
@@ -3442,8 +3239,6 @@ export const getAllEndpointsWidgetData = (
 								id: 'ec316e57',
 								key: {
 									dataType: DataTypes.String,
-									isColumn: false,
-									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -3456,8 +3251,6 @@ export const getAllEndpointsWidgetData = (
 									key: 'kind_string',
 									dataType: DataTypes.String,
 									type: '',
-									isColumn: true,
-									isJSON: false,
 								},
 								op: '=',
 								value: 'Client',
@@ -3483,8 +3276,6 @@ export const getAllEndpointsWidgetData = (
 				{
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
-						isColumn: true,
-						isJSON: false,
 						key: 'duration_nano',
 						type: '',
 					},
@@ -3498,8 +3289,6 @@ export const getAllEndpointsWidgetData = (
 								id: '46d57857',
 								key: {
 									dataType: DataTypes.String,
-									isColumn: false,
-									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -3512,8 +3301,6 @@ export const getAllEndpointsWidgetData = (
 									key: 'kind_string',
 									dataType: DataTypes.String,
 									type: '',
-									isColumn: true,
-									isJSON: false,
 								},
 								op: '=',
 								value: 'Client',
@@ -3540,7 +3327,6 @@ export const getAllEndpointsWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: 'timestamp------false',
-						isColumn: false,
 						key: 'timestamp',
 						type: '',
 					},
@@ -3554,8 +3340,6 @@ export const getAllEndpointsWidgetData = (
 								id: '4a237616',
 								key: {
 									dataType: DataTypes.String,
-									isColumn: false,
-									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -3568,8 +3352,6 @@ export const getAllEndpointsWidgetData = (
 									key: 'kind_string',
 									dataType: DataTypes.String,
 									type: '',
-									isColumn: true,
-									isJSON: false,
 								},
 								op: '=',
 								value: 'Client',
@@ -3595,8 +3377,6 @@ export const getAllEndpointsWidgetData = (
 				{
 					aggregateAttribute: {
 						dataType: DataTypes.String,
-						isColumn: true,
-						isJSON: false,
 						key: 'span_id',
 						type: '',
 					},
@@ -3610,8 +3390,6 @@ export const getAllEndpointsWidgetData = (
 								id: 'f162de1e',
 								key: {
 									dataType: DataTypes.String,
-									isColumn: false,
-									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -3622,13 +3400,11 @@ export const getAllEndpointsWidgetData = (
 								id: '3df0ac1d',
 								key: {
 									dataType: DataTypes.bool,
-									isColumn: true,
-									isJSON: false,
 									key: 'has_error',
 									type: '',
 								},
 								op: '=',
-								value: 'true',
+								value: true,
 							},
 							{
 								id: '212678b9',
@@ -3636,8 +3412,6 @@ export const getAllEndpointsWidgetData = (
 									key: 'kind_string',
 									dataType: DataTypes.String,
 									type: '',
-									isColumn: true,
-									isJSON: false,
 								},
 								op: '=',
 								value: 'Client',
@@ -3773,8 +3547,6 @@ export const getGroupByFiltersFromGroupByValues = (
 				id: groupByAttribute?.id || v4(),
 				key: {
 					dataType: groupByAttribute?.dataType || DataTypes.String,
-					isColumn: groupByAttribute?.isColumn || true,
-					isJSON: groupByAttribute?.isJSON || false,
 					key: groupByAttribute?.key || key,
 					type: groupByAttribute?.type || '',
 				},
@@ -3810,7 +3582,6 @@ export const getRateOverTimeWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
-						isColumn: false,
 						key: '',
 						type: '',
 					},
@@ -3824,8 +3595,6 @@ export const getRateOverTimeWidgetData = (
 								id: '3c76fe0b',
 								key: {
 									dataType: DataTypes.String,
-									isColumn: false,
-									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -3874,8 +3643,6 @@ export const getLatencyOverTimeWidgetData = (
 				{
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
-						isColumn: true,
-						isJSON: false,
 						key: 'duration_nano',
 						type: '',
 					},
@@ -3889,8 +3656,6 @@ export const getLatencyOverTimeWidgetData = (
 								id: '63adb3ff',
 								key: {
 									dataType: DataTypes.String,
-									isColumn: false,
-									isJSON: false,
 									key: SPAN_ATTRIBUTES.SERVER_NAME,
 									type: 'tag',
 								},
@@ -4000,8 +3765,6 @@ export const getCustomFiltersForBarChart = (
 			key: {
 				dataType: DataTypes.String,
 				id: 'response_status_code--string--tag--false',
-				isColumn: false,
-				isJSON: false,
 				key: 'response_status_code',
 				type: 'tag',
 			},
@@ -4013,8 +3776,6 @@ export const getCustomFiltersForBarChart = (
 			key: {
 				dataType: DataTypes.String,
 				id: 'response_status_code--string--tag--false',
-				isColumn: false,
-				isJSON: false,
 				key: 'response_status_code',
 				type: 'tag',
 			},
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@@ -4,6 +4,7 @@
 import './AppLayout.styles.scss';

 import * as Sentry from '@sentry/react';
+import { Toaster } from '@signozhq/sonner';
 import { Flex } from 'antd';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
@@ -668,6 +669,18 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		</div>
 	);

+	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
+	const { updateUserPreferenceInContext } = useAppContext();
+
+	const { mutate: updateUserPreferenceMutation } = useMutation(
+		updateUserPreference,
+		{
+			onError: (error) => {
+				showErrorNotification(notifications, error as AxiosError);
+			},
+		},
+	);
+
 	const sideNavPinnedPreference = userPreferences?.find(
 		(preference) => preference.name === USER_PREFERENCES.SIDENAV_PINNED,
 	)?.value as boolean;
@@ -697,18 +710,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		? sideNavPinnedPreference
 		: getSidebarStateFromLocalStorage();

-	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
-	const { updateUserPreferenceInContext } = useAppContext();
-
-	const { mutate: updateUserPreferenceMutation } = useMutation(
-		updateUserPreference,
-		{
-			onError: (error) => {
-				showErrorNotification(notifications, error as AxiosError);
-			},
-		},
-	);
-
 	const handleToggleSidebar = useCallback((): void => {
 		const newState = !isSideNavPinned;

@@ -852,6 +853,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 			{showChangelogModal && changelog && (
 				<ChangelogModal changelog={changelog} onClose={toggleChangelogModal} />
 			)}
+
+			<Toaster />
 		</Layout>
 	);
 }
--- a/Show More
+++ b/Show More