feat: move fields api to openapi spec

chore: add codeowners for scaffold (#10055 )
feat(binding): add support for query params (#10053 )
2026-02-08 18:59:56 +00:00 · 2026-01-20 19:04:37 +05:30 · 2026-01-20 12:19:14 +00:00 · 2026-01-20 11:59:12 +00:00 · 2026-01-20 11:17:08 +00:00 · 2026-01-20 16:05:57 +05:30
294 changed files with 13537 additions and 3122 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -16,13 +16,13 @@

 # Scaffold Owners

-/pkg/config/ @therealpandey
-/pkg/errors/ @therealpandey
-/pkg/factory/ @therealpandey
-/pkg/types/ @therealpandey
-/pkg/valuer/ @therealpandey
-/cmd/ @therealpandey
-.golangci.yml @therealpandey
+/pkg/config/ @vikrantgupta25
+/pkg/errors/ @vikrantgupta25
+/pkg/factory/ @vikrantgupta25
+/pkg/types/ @vikrantgupta25
+/pkg/valuer/ @vikrantgupta25
+/cmd/ @vikrantgupta25
+.golangci.yml @vikrantgupta25

 # Zeus Owners

@@ -48,22 +48,78 @@
 /pkg/querier/ @srikanthccv
 /pkg/variables/ @srikanthccv
 /pkg/types/querybuildertypes/ @srikanthccv
+/pkg/types/telemetrytypes/ @srikanthccv
 /pkg/querybuilder/ @srikanthccv
 /pkg/telemetrylogs/ @srikanthccv
 /pkg/telemetrymetadata/ @srikanthccv
 /pkg/telemetrymetrics/ @srikanthccv
 /pkg/telemetrytraces/ @srikanthccv

+# Metrics
+
+/pkg/types/metrictypes/ @srikanthccv
+/pkg/types/metricsexplorertypes/ @srikanthccv
+/pkg/modules/metricsexplorer/ @srikanthccv
+/pkg/prometheus/ @srikanthccv
+
+# APM
+
+/pkg/types/servicetypes/ @srikanthccv
+/pkg/types/apdextypes/ @srikanthccv
+/pkg/modules/apdex/ @srikanthccv
+/pkg/modules/services/ @srikanthccv
+
+# Dashboard
+
+/pkg/types/dashboardtypes/ @srikanthccv
+/pkg/modules/dashboard/ @srikanthccv
+
+# Rule/Alertmanager
+
+/pkg/types/ruletypes/ @srikanthccv
+/pkg/types/alertmanagertypes @srikanthccv
+/pkg/alertmanager/ @srikanthccv
+/pkg/ruler/ @srikanthccv
+
+# Correlation-adjacent
+
+/pkg/contextlinks/ @srikanthccv
+/pkg/types/parsertypes/ @srikanthccv
+/pkg/queryparser/ @srikanthccv
+
 # AuthN / AuthZ Owners

-/pkg/authz/ @vikrantgupta25 @therealpandey
+/pkg/authz/ @vikrantgupta25
+/ee/authz/ @vikrantgupta25
+/pkg/authn/ @vikrantgupta25
+/ee/authn/ @vikrantgupta25
+/pkg/modules/user/ @vikrantgupta25
+/pkg/modules/session/ @vikrantgupta25
+/pkg/modules/organization/ @vikrantgupta25
+/pkg/modules/authdomain/ @vikrantgupta25
+/pkg/modules/role/ @vikrantgupta25

 # Integration tests

-/tests/integration/ @therealpandey
+/tests/integration/ @vikrantgupta25

 # Dashboard Owners

+/frontend/src/hooks/dashboard/ @SigNoz/pulse-frontend
+
+## Dashboard List
+
+/frontend/src/pages/DashboardsListPage/ @SigNoz/pulse-frontend
+/frontend/src/container/ListOfDashboard/ @SigNoz/pulse-frontend
+
+## Dashboard Page
+
 /frontend/src/pages/DashboardPage/ @SigNoz/pulse-frontend
-/frontend/src/container/NewDashboard/ @SigNoz/pulse-frontend
+/frontend/src/container/DashboardContainer/ @SigNoz/pulse-frontend
 /frontend/src/container/GridCardLayout/ @SigNoz/pulse-frontend
+/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
+
+## Public Dashboard Page
+
+/frontend/src/pages/PublicDashboard/ @SigNoz/pulse-frontend
+/frontend/src/container/PublicDashboardContainer/ @SigNoz/pulse-frontend
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,86 +1,76 @@
-## 📄 Summary
-
-<!-- Describe the purpose of the PR in a few sentences. What does it fix/add/update? -->
+## Pull Request

 ---

-## ✅ Changes
-
- [ ] Feature: Brief description
- [ ] Bug fix: Brief description
+### 📄 Summary
+> Why does this change exist?  
+> What problem does it solve, and why is this the right approach?

 ---

+### ✅ Change Type
+_Select all that apply_

-## 📝 Changelog 
-
-> Fill this only if the change affects users, APIs, UI, or documented behavior.
-Mention as N/A for internal refactors or non-user-visible changes.
-
-**Deployment Type:** Cloud / OSS / Enterprise
-
-**Type:** Feature / Bug Fix / Maintenance
-
-**Description:** Short, user-facing summary of the change
+- [ ] ✨ Feature
+- [ ] 🐛 Bug fix
+- [ ] ♻️ Refactor
+- [ ] 🛠️ Infra / Tooling
+- [ ] 🧪 Test-only

 ---

-## 🏷️ Required: Add Relevant Labels
+### 🐛 Bug Context
+> Required if this PR fixes a bug

-> ⚠️ **Manually add appropriate labels in the PR sidebar**  
-Please select one or more labels (as applicable):
+#### Root Cause
+> What caused the issue?  
+> Regression, faulty assumption, edge case, refactor, etc.

-ex:
-
- `frontend`
- `backend`
- `devops`
- `bug`
- `enhancement`
- `ui`
- `test`
+#### Fix Strategy
+> How does this PR address the root cause?

 ---

-## 👥 Reviewers
+### 🧪 Testing Strategy
+> How was this change validated?

-> Tag the relevant teams for review:
-
- frontend / backend / devops
+- Tests added/updated:
+- Manual verification:
+- Edge cases covered:

 ---

-## 🧪 How to Test
+### ⚠️ Risk & Impact Assessment
+> What could break? How do we recover?

-<!-- Describe how reviewers can test this PR -->
-1. ...
-2. ...
-3. ...
+- Blast radius:
+- Potential regressions:
+- Rollback plan:

 ---

-## 🔍 Related Issues
+### 📝 Changelog
+> Fill only if this affects users, APIs, UI, or documented behavior  
+> Use **N/A** for internal or non-user-facing changes

-<!-- Reference any related issues (e.g. Fixes #123, Closes #456) -->
-Closes #
+| Field | Value |
+|------|-------|
+| Deployment Type | Cloud / OSS / Enterprise |
+| Change Type | Feature / Bug Fix / Maintenance |
+| Description | User-facing summary |

 ---

-## 📸 Screenshots / Screen Recording (if applicable / mandatory for UI related changes)
-
-<!-- Add screenshots or GIFs to help visualize changes -->
-
---
-
-## 📋 Checklist
-
- [ ] Dev Review
- [ ] Test cases added (Unit/ Integration / E2E)
- [ ] Manually tested the changes
-
+### 📋 Checklist
+- [ ] Tests added or explicitly not required
+- [ ] Manually tested
+- [ ] Breaking changes documented
+- [ ] Backward compatibility considered

 ---

 ## 👀 Notes for Reviewers

 <!-- Anything reviewers should keep in mind while reviewing -->
+
+---
--- a/.gitignore
+++ b/.gitignore
@@ -12,7 +12,6 @@ frontend/coverage

 # production
 frontend/build
-frontend/.vscode
 frontend/.yarnclean
 frontend/.temp_cache
 frontend/test-results
@@ -31,7 +30,6 @@ frontend/src/constants/env.ts

 .idea

-**/.vscode
 **/build
 **/storage
 **/locust-scripts/__pycache__/
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+	"eslint.workingDirectories": ["./frontend"],
+	"editor.formatOnSave": true,
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": "explicit"
+	},
+	"prettier.requireConfig": true
+}
--- a/4
+++ b/4
@@ -86,7 +86,7 @@ go-run-enterprise: ## Runs the enterprise go backend server
 	@SIGNOZ_INSTRUMENTATION_LOGS_LEVEL=debug \
 	SIGNOZ_SQLSTORE_SQLITE_PATH=signoz.db \
 	SIGNOZ_WEB_ENABLED=false \
-	SIGNOZ_JWT_SECRET=secret \
+	SIGNOZ_TOKENIZER_JWT_SECRET=secret \
 	SIGNOZ_ALERTMANAGER_PROVIDER=signoz \
 	SIGNOZ_TELEMETRYSTORE_PROVIDER=clickhouse \
 	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://127.0.0.1:9000 \
@@ -103,7 +103,7 @@ go-run-community: ## Runs the community go backend server
 	@SIGNOZ_INSTRUMENTATION_LOGS_LEVEL=debug \
 	SIGNOZ_SQLSTORE_SQLITE_PATH=signoz.db \
 	SIGNOZ_WEB_ENABLED=false \
-	SIGNOZ_JWT_SECRET=secret \
+	SIGNOZ_TOKENIZER_JWT_SECRET=secret \
 	SIGNOZ_ALERTMANAGER_PROVIDER=signoz \
 	SIGNOZ_TELEMETRYSTORE_PROVIDER=clickhouse \
 	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://127.0.0.1:9000 \
--- a/context7.json
+++ b/context7.json
@@ -0,0 +1,4 @@
+{
+  "url": "https://context7.com/signoz/signoz",
+  "public_key": "pk_6g9GfjdkuPEIDuTGAxnol"
+}
--- a/deploy/docker-swarm/docker-compose.ha.yaml
+++ b/deploy/docker-swarm/docker-compose.ha.yaml
@@ -176,7 +176,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:v0.106.0
+    image: signoz/signoz:v0.107.0
    command:
      - --config=/root/config/prometheus.yml
    ports:
@@ -195,7 +195,7 @@ services:
      - GODEBUG=netdns=go
      - TELEMETRY_ENABLED=true
      - DEPLOYMENT_TYPE=docker-swarm
-      - SIGNOZ_JWT_SECRET=secret
+      - SIGNOZ_TOKENIZER_JWT_SECRET=secret
      - DOT_METRICS_ENABLED=true
    healthcheck:
      test:
--- a/deploy/docker-swarm/docker-compose.yaml
+++ b/deploy/docker-swarm/docker-compose.yaml
@@ -117,7 +117,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:v0.106.0
+    image: signoz/signoz:v0.107.0
    command:
      - --config=/root/config/prometheus.yml
    ports:
--- a/deploy/docker/docker-compose.ha.yaml
+++ b/deploy/docker/docker-compose.ha.yaml
@@ -179,7 +179,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.106.0}
+    image: signoz/signoz:${VERSION:-v0.107.0}
    container_name: signoz
    command:
      - --config=/root/config/prometheus.yml
--- a/deploy/docker/docker-compose.yaml
+++ b/deploy/docker/docker-compose.yaml
@@ -111,7 +111,7 @@ services:
      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
  signoz:
    !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.106.0}
+    image: signoz/signoz:${VERSION:-v0.107.0}
    container_name: signoz
    command:
      - --config=/root/config/prometheus.yml
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -607,6 +607,186 @@ paths:
      summary: Update auth domain
      tags:
      - authdomains
+  /api/v1/fields/keys:
+    get:
+      deprecated: false
+      description: This endpoint returns field keys
+      operationId: GetFieldsKeys
+      parameters:
+      - in: query
+        name: signal
+        schema:
+          type: string
+      - in: query
+        name: source
+        schema:
+          type: string
+      - in: query
+        name: limit
+        schema:
+          type: integer
+      - in: query
+        name: startUnixMilli
+        schema:
+          format: int64
+          type: integer
+      - in: query
+        name: endUnixMilli
+        schema:
+          format: int64
+          type: integer
+      - in: query
+        name: fieldContext
+        schema:
+          type: string
+      - in: query
+        name: fieldDataType
+        schema:
+          type: string
+      - content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/TelemetrytypesMetricContext'
+        in: query
+        name: metricContext
+      - in: query
+        name: name
+        schema:
+          type: string
+      - in: query
+        name: searchText
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/TelemetrytypesGettableFieldKeys'
+                  status:
+                    type: string
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get field keys
+      tags:
+      - fields
+  /api/v1/fields/values:
+    get:
+      deprecated: false
+      description: This endpoint returns field values
+      operationId: GetFieldsValues
+      parameters:
+      - in: query
+        name: signal
+        schema:
+          type: string
+      - in: query
+        name: source
+        schema:
+          type: string
+      - in: query
+        name: limit
+        schema:
+          type: integer
+      - in: query
+        name: startUnixMilli
+        schema:
+          format: int64
+          type: integer
+      - in: query
+        name: endUnixMilli
+        schema:
+          format: int64
+          type: integer
+      - in: query
+        name: fieldContext
+        schema:
+          type: string
+      - in: query
+        name: fieldDataType
+        schema:
+          type: string
+      - content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/TelemetrytypesMetricContext'
+        in: query
+        name: metricContext
+      - in: query
+        name: name
+        schema:
+          type: string
+      - in: query
+        name: searchText
+        schema:
+          type: string
+      - in: query
+        name: existingQuery
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/TelemetrytypesGettableFieldValues'
+                  status:
+                    type: string
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get field values
+      tags:
+      - fields
  /api/v1/getResetPasswordToken/{id}:
    get:
      deprecated: false
@@ -2736,12 +2916,25 @@ paths:
      - sessions
 components:
  schemas:
+    AuthtypesAttributeMapping:
+      properties:
+        email:
+          type: string
+        groups:
+          type: string
+        name:
+          type: string
+        role:
+          type: string
+      type: object
    AuthtypesAuthDomainConfig:
      properties:
        googleAuthConfig:
          $ref: '#/components/schemas/AuthtypesGoogleConfig'
        oidcConfig:
          $ref: '#/components/schemas/AuthtypesOIDCConfig'
+        roleMapping:
+          $ref: '#/components/schemas/AuthtypesRoleMapping'
        samlConfig:
          $ref: '#/components/schemas/AuthtypesSamlConfig'
        ssoEnabled:
@@ -2775,11 +2968,6 @@ components:
        url:
          type: string
      type: object
-    AuthtypesClaimMapping:
-      properties:
-        email:
-          type: string
-      type: object
    AuthtypesDeprecatedGettableLogin:
      properties:
        accessJwt:
@@ -2811,6 +2999,8 @@ components:
          $ref: '#/components/schemas/AuthtypesOIDCConfig'
        orgId:
          type: string
+        roleMapping:
+          $ref: '#/components/schemas/AuthtypesRoleMapping'
        samlConfig:
          $ref: '#/components/schemas/AuthtypesSamlConfig'
        ssoEnabled:
@@ -2834,17 +3024,33 @@ components:
      type: object
    AuthtypesGoogleConfig:
      properties:
+        allowedGroups:
+          items:
+            type: string
+          type: array
        clientId:
          type: string
        clientSecret:
          type: string
+        domainToAdminEmail:
+          additionalProperties:
+            type: string
+          type: object
+        fetchGroups:
+          type: boolean
+        fetchTransitiveGroupMembership:
+          type: boolean
+        insecureSkipEmailVerified:
+          type: boolean
        redirectURI:
          type: string
+        serviceAccountJson:
+          type: string
      type: object
    AuthtypesOIDCConfig:
      properties:
        claimMapping:
-          $ref: '#/components/schemas/AuthtypesClaimMapping'
+          $ref: '#/components/schemas/AuthtypesAttributeMapping'
        clientId:
          type: string
        clientSecret:
@@ -2895,8 +3101,22 @@ components:
        refreshToken:
          type: string
      type: object
+    AuthtypesRoleMapping:
+      properties:
+        defaultRole:
+          type: string
+        groupMappings:
+          additionalProperties:
+            type: string
+          nullable: true
+          type: object
+        useRoleAttribute:
+          type: boolean
+      type: object
    AuthtypesSamlConfig:
      properties:
+        attributeMapping:
+          $ref: '#/components/schemas/AuthtypesAttributeMapping'
        insecureSkipAuthNRequestsSigned:
          type: boolean
        samlCert:
@@ -3341,6 +3561,65 @@ components:
        status:
          type: string
      type: object
+    TelemetrytypesGettableFieldKeys:
+      properties:
+        complete:
+          type: boolean
+        keys:
+          additionalProperties:
+            items:
+              $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+            type: array
+          nullable: true
+          type: object
+      type: object
+    TelemetrytypesGettableFieldValues:
+      properties:
+        complete:
+          type: boolean
+        values:
+          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldValues'
+      type: object
+    TelemetrytypesMetricContext:
+      properties:
+        metricName:
+          type: string
+      type: object
+    TelemetrytypesTelemetryFieldKey:
+      properties:
+        description:
+          type: string
+        fieldContext:
+          type: string
+        fieldDataType:
+          type: string
+        name:
+          type: string
+        signal:
+          type: string
+        unit:
+          type: string
+      type: object
+    TelemetrytypesTelemetryFieldValues:
+      properties:
+        boolValues:
+          items:
+            type: boolean
+          type: array
+        numberValues:
+          items:
+            format: double
+            type: number
+          type: array
+        relatedValues:
+          items:
+            type: string
+          type: array
+        stringValues:
+          items:
+            type: string
+          type: array
+      type: object
    TypesChangePasswordRequest:
      properties:
        newPassword:
--- a/ee/authn/callbackauthn/oidccallbackauthn/authn.go
+++ b/ee/authn/callbackauthn/oidccallbackauthn/authn.go
@@ -2,6 +2,7 @@ package oidccallbackauthn

 import (
 	"context"
+	"fmt"
 	"net/url"

 	"github.com/SigNoz/signoz/pkg/authn"
@@ -19,25 +20,27 @@ const (
 	redirectPath string = "/api/v1/complete/oidc"
 )

-var (
-	scopes []string = []string{"email", oidc.ScopeOpenID}
-)
+var defaultScopes []string = []string{"email", "profile", oidc.ScopeOpenID}

 var _ authn.CallbackAuthN = (*AuthN)(nil)

 type AuthN struct {
+	settings   factory.ScopedProviderSettings
 	store      authtypes.AuthNStore
 	licensing  licensing.Licensing
 	httpClient *client.Client
 }

 func New(store authtypes.AuthNStore, licensing licensing.Licensing, providerSettings factory.ProviderSettings) (*AuthN, error) {
+	settings := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/ee/authn/callbackauthn/oidccallbackauthn")
+
 	httpClient, err := client.New(providerSettings.Logger, providerSettings.TracerProvider, providerSettings.MeterProvider)
 	if err != nil {
 		return nil, err
 	}

 	return &AuthN{
+		settings:   settings,
 		store:      store,
 		licensing:  licensing,
 		httpClient: httpClient,
@@ -126,7 +129,40 @@ func (a *AuthN) HandleCallback(ctx context.Context, query url.Values) (*authtype
 		}
 	}

-	return authtypes.NewCallbackIdentity("", email, authDomain.StorableAuthDomain().OrgID, state), nil
+	name := ""
+	if nameClaim := authDomain.AuthDomainConfig().OIDC.ClaimMapping.Name; nameClaim != "" {
+		if n, ok := claims[nameClaim].(string); ok {
+			name = n
+		}
+	}
+
+	var groups []string
+	if groupsClaim := authDomain.AuthDomainConfig().OIDC.ClaimMapping.Groups; groupsClaim != "" {
+		if claimValue, exists := claims[groupsClaim]; exists {
+			switch g := claimValue.(type) {
+			case []any:
+				for _, group := range g {
+					if gs, ok := group.(string); ok {
+						groups = append(groups, gs)
+					}
+				}
+			case string:
+				// Some IDPs return a single group as a string instead of an array
+				groups = append(groups, g)
+			default:
+				a.settings.Logger().WarnContext(ctx, "oidc: unsupported groups type", "type", fmt.Sprintf("%T", claimValue))
+			}
+		}
+	}
+
+	role := ""
+	if roleClaim := authDomain.AuthDomainConfig().OIDC.ClaimMapping.Role; roleClaim != "" {
+		if r, ok := claims[roleClaim].(string); ok {
+			role = r
+		}
+	}
+
+	return authtypes.NewCallbackIdentity(name, email, authDomain.StorableAuthDomain().OrgID, state, groups, role), nil
 }

 func (a *AuthN) ProviderInfo(ctx context.Context, authDomain *authtypes.AuthDomain) *authtypes.AuthNProviderInfo {
@@ -145,6 +181,13 @@ func (a *AuthN) oidcProviderAndoauth2Config(ctx context.Context, siteURL *url.UR
 		return nil, nil, err
 	}

+	scopes := make([]string, len(defaultScopes))
+	copy(scopes, defaultScopes)
+
+	if authDomain.AuthDomainConfig().RoleMapping != nil && len(authDomain.AuthDomainConfig().RoleMapping.GroupMappings) > 0 {
+		scopes = append(scopes, "groups")
+	}
+
 	return oidcProvider, &oauth2.Config{
 		ClientID:     authDomain.AuthDomainConfig().OIDC.ClientID,
 		ClientSecret: authDomain.AuthDomainConfig().OIDC.ClientSecret,
--- a/ee/authn/callbackauthn/samlcallbackauthn/authn.go
+++ b/ee/authn/callbackauthn/samlcallbackauthn/authn.go
@@ -96,7 +96,26 @@ func (a *AuthN) HandleCallback(ctx context.Context, formValues url.Values) (*aut
 		return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "saml: invalid email").WithAdditional("The nameID assertion is used to retrieve the email address, please check your IDP configuration and try again.")
 	}

-	return authtypes.NewCallbackIdentity("", email, authDomain.StorableAuthDomain().OrgID, state), nil
+	name := ""
+	if nameAttribute := authDomain.AuthDomainConfig().SAML.AttributeMapping.Name; nameAttribute != "" {
+		if val := assertionInfo.Values.Get(nameAttribute); val != "" {
+			name = val
+		}
+	}
+
+	var groups []string
+	if groupAttribute := authDomain.AuthDomainConfig().SAML.AttributeMapping.Groups; groupAttribute != "" {
+		groups = assertionInfo.Values.GetAll(groupAttribute)
+	}
+
+	role := ""
+	if roleAttribute := authDomain.AuthDomainConfig().SAML.AttributeMapping.Role; roleAttribute != "" {
+		if val := assertionInfo.Values.Get(roleAttribute); val != "" {
+			role = val
+		}
+	}
+
+	return authtypes.NewCallbackIdentity(name, email, authDomain.StorableAuthDomain().OrgID, state, groups, role), nil
 }

 func (a *AuthN) ProviderInfo(ctx context.Context, authDomain *authtypes.AuthDomain) *authtypes.AuthNProviderInfo {
--- a/ee/modules/dashboard/impldashboard/module.go
+++ b/ee/modules/dashboard/impldashboard/module.go
@@ -163,7 +163,7 @@ func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.U
 	}

 	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
-		err := module.DeletePublic(ctx, orgID, id)
+		err := module.deletePublic(ctx, orgID, id)
 		if err != nil && !errors.Ast(err, errors.TypeNotFound) {
 			return err
 		}
@@ -263,3 +263,35 @@ func (module *module) Update(ctx context.Context, orgID valuer.UUID, id valuer.U
 func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, role types.Role, lock bool) error {
 	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, role, lock)
 }
+
+func (module *module) deletePublic(ctx context.Context, orgID valuer.UUID, dashboardID valuer.UUID) error {
+	publicDashboard, err := module.store.GetPublic(ctx, dashboardID.String())
+	if err != nil {
+		return err
+	}
+
+	role, err := module.role.GetOrCreate(ctx, roletypes.NewRole(roletypes.AnonymousUserRoleName, roletypes.AnonymousUserRoleDescription, roletypes.RoleTypeManaged.StringValue(), orgID))
+	if err != nil {
+		return err
+	}
+
+	deletionObject := authtypes.MustNewObject(
+		authtypes.Resource{
+			Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
+			Type: authtypes.TypeMetaResource,
+		},
+		authtypes.MustNewSelector(authtypes.TypeMetaResource, publicDashboard.ID.String()),
+	)
+
+	err = module.role.PatchObjects(ctx, orgID, role.ID, authtypes.RelationRead, nil, []*authtypes.Object{deletionObject})
+	if err != nil {
+		return err
+	}
+
+	err = module.store.DeletePublic(ctx, dashboardID.StringValue())
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
--- a/ee/query-service/app/api/api.go
+++ b/ee/query-service/app/api/api.go
@@ -9,7 +9,6 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/integrations/gateway"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
-	"github.com/SigNoz/signoz/pkg/apis/fields"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	querierAPI "github.com/SigNoz/signoz/pkg/querier"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
@@ -54,7 +53,6 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		FluxInterval:                  opts.FluxInterval,
 		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
-		FieldsAPI:                     fields.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.TelemetryStore),
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
--- a/ee/query-service/app/server.go
+++ b/ee/query-service/app/server.go
@@ -236,7 +236,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterLogsRoutes(r, am)
 	apiHandler.RegisterIntegrationRoutes(r, am)
 	apiHandler.RegisterCloudIntegrationsRoutes(r, am)
-	apiHandler.RegisterFieldsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterInfraMetricsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -7,8 +7,6 @@ module.exports = {
 		'jest/globals': true,
 	},
 	extends: [
-		'airbnb',
-		'airbnb-typescript',
 		'eslint:recommended',
 		'plugin:react/recommended',
 		'plugin:@typescript-eslint/recommended',
@@ -35,6 +33,7 @@ module.exports = {
 		'react-hooks',
 		'prettier',
 		'jest',
+		'jsx-a11y',
 	],
 	settings: {
 		react: {
@@ -72,9 +71,6 @@ module.exports = {
 		'react-hooks/rules-of-hooks': 'error',
 		'react-hooks/exhaustive-deps': 'error',

-		// airbnb
-		'no-underscore-dangle': 'off',
-		'no-console': 'off',
 		'import/prefer-default-export': 'off',
 		'import/extensions': [
 			'error',
@@ -87,6 +83,9 @@ module.exports = {
 			},
 		],
 		'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+		// Disabled because TypeScript already handles this check more accurately,
+		// and the rule has false positives with type-only imports (e.g., TooltipProps from antd)
+		'import/named': 'off',
 		'no-plusplus': 'off',
 		'jsx-a11y/label-has-associated-control': [
 			'error',
@@ -104,7 +103,10 @@ module.exports = {
 				},
 			},
 		],
-		'@typescript-eslint/no-unused-vars': 'error',
+		// Allow empty functions for mocks, default context values, and noop callbacks
+		'@typescript-eslint/no-empty-function': 'off',
+		// Allow underscore prefix for intentionally unused variables (e.g., const { id: _id, ...rest } = props)
+		'@typescript-eslint/no-unused-vars': 'warn',
 		'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
 		'arrow-body-style': ['error', 'as-needed'],

--- a/frontend/.prettierrc.json
+++ b/frontend/.prettierrc.json
@@ -4,5 +4,14 @@
 	"tabWidth": 1,
 	"singleQuote": true,
 	"jsxSingleQuote": false,
-	"semi": true
+	"semi": true,
+	"printWidth": 80,
+	"bracketSpacing": true,
+	"bracketSameLine": false,
+	"arrowParens": "always",
+	"endOfLine": "lf",
+	"quoteProps": "as-needed",
+	"proseWrap": "preserve",
+	"htmlWhitespaceSensitivity": "css",
+	"embeddedLanguageFormatting": "auto"
 }
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+	"editor.formatOnSave": true,
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": "explicit"
+	},
+	"prettier.requireConfig": true
+}
--- a/frontend/CONTRIBUTIONS.md
+++ b/frontend/CONTRIBUTIONS.md
@@ -34,12 +34,18 @@ Embrace the spirit of collaboration and contribute to the success of our open-so
 ### Linting and Setup

 - It is crucial to refrain from disabling ESLint and TypeScript errors within the project. If there is a specific rule that needs to be disabled, provide a clear and justified explanation for doing so. Maintaining the integrity of the linting and type-checking processes ensures code quality and consistency throughout the codebase.
- In our project, we rely on several essential ESLint plugins, namely:
-  - [plugin:@typescript-eslint](https://typescript-eslint.io/rules/)
-  - [airbnb styleguide](https://github.com/airbnb/javascript)
-  - [plugin:sonarjs](https://github.com/SonarSource/eslint-plugin-sonarjs)
+- In our project, we rely on several essential ESLint plugins and configurations:

-    To ensure compliance with our coding standards and best practices, we encourage you to refer to the documentation of these plugins. Familiarizing yourself with the ESLint rules they provide will help maintain code quality and consistency throughout the project.
+  - [eslint:recommended](https://eslint.org/docs/latest/rules/) - Core ESLint rules for JavaScript best practices
+  - [plugin:@typescript-eslint](https://typescript-eslint.io/rules/) - TypeScript-specific linting rules
+  - [plugin:react](https://github.com/jsx-eslint/eslint-plugin-react) - React best practices and patterns
+  - [plugin:react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) - Rules of Hooks enforcement
+  - [plugin:sonarjs](https://github.com/SonarSource/eslint-plugin-sonarjs) - Code quality and complexity analysis
+  - [plugin:prettier](https://github.com/prettier/eslint-plugin-prettier) - Code formatting via Prettier
+  - [simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort) - Automatic import organization
+  - [plugin:jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y) - Accessibility rules for JSX elements
+
+  To ensure compliance with our coding standards and best practices, we encourage you to refer to the documentation of these plugins. Familiarizing yourself with the ESLint rules they provide will help maintain code quality and consistency throughout the project.

 ### Naming Conventions

--- a/frontend/package.json
+++ b/frontend/package.json
@@ -219,16 +219,11 @@
 		"compression-webpack-plugin": "9.0.0",
 		"copy-webpack-plugin": "^11.0.0",
 		"eslint": "^7.32.0",
-		"eslint-config-airbnb": "^19.0.4",
-		"eslint-config-airbnb-typescript": "^16.1.4",
 		"eslint-config-prettier": "^8.3.0",
-		"eslint-config-standard": "^16.0.3",
 		"eslint-plugin-import": "^2.28.1",
 		"eslint-plugin-jest": "^26.9.0",
 		"eslint-plugin-jsx-a11y": "^6.5.1",
-		"eslint-plugin-node": "^11.1.0",
 		"eslint-plugin-prettier": "^4.0.0",
-		"eslint-plugin-promise": "^5.1.0",
 		"eslint-plugin-react": "^7.24.0",
 		"eslint-plugin-react-hooks": "^4.3.0",
 		"eslint-plugin-simple-import-sort": "^7.0.0",
--- a/frontend/public/svgs/barber-pool.svg
+++ b/frontend/public/svgs/barber-pool.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#fff" d="m9.05 20.616 13.968-.178-.06-9.283-14.417.178z"/><path fill="#d80d1a" d="m10.165 20.736-1.302-2.253.127-5.209 5.133 7.491z"/><path fill="#1d86fa" d="m16.72 20.616-6.416-9.401 4.298.06 6.536 9.372z"/><path fill="#d80d1a" d="m22.958 19.125-5.58-7.88 4.118.12 2.12 2.956z"/><path fill="#a1d2d6" d="m8.75 11.722 14.208-.09-.098-.86-14.14.114zM8.99 21.214l14.237-.18-.329-.864-14.237.177z"/><path fill="#c8c8c8" d="M22.772 21.163c.122.147.882.175.882.175s.444.825 1.41.707c.865-.106 1.2-.829 1.2-.829s1.463-.338 2.259-1.464c.846-1.2.882-2.383.882-4.076 0-1.836-.143-3.088-1.076-4.076-1.073-1.134-2.186-1.218-2.186-1.218s-.39-.654-1.271-.636c-.883.018-1.218.74-1.218.74s-.704.151-.882.282c-.091.067-.067 2.703-.054 5.294.012 2.5-.042 4.988.054 5.1"/><path fill="#858585" d="M28.541 16.538c.353.018.345-1.851.036-3.229-.354-1.57-1.694-2.082-1.8-1.993s-.071 1.675.017 1.764c.09.09.918.494 1.2 1.182.283.69.278 2.262.547 2.276M25.299 21.99l-.056-12.213s.258.04.509.207c.242.162.389.395.389.395l.127 10.828s-.176.325-.35.465c-.381.309-.62.318-.62.318"/><path fill="#e1e0e0" d="m24.692 22.043-.157-12.255s-.323.04-.565.258c-.204.182-.318.44-.318.44l.107 11.01s.164.223.353.354c.23.157.58.193.58.193"/><path fill="#c8c8c8" d="M9.13 21.32c.158-.142.036-10.216-.053-10.392-.089-.175-.829-1.069-2.01-1-1.167.069-1.536.876-1.536.876s-1.169.155-2.065 1.5c-.635.954-.82 2.19-.806 3.74.015 1.712.12 3.319 1.142 4.341.982.982 1.94 1.022 1.94 1.022s.267.87 1.573.87c1.289.002 1.816-.956 1.816-.956"/><path fill="#858585" d="M7.548 22.274s-.373-1.907-.427-6.158.256-6.186.256-6.186.258-.017.504.067c.276.093.458.24.458.24s-.244 3.656-.227 5.879c.018 2.222.37 5.85.37 5.85s-.265.153-.423.206c-.164.051-.51.102-.51.102"/><path fill="#e1e0e0" d="M6.858 22.234s-.48-2.45-.533-6.032.157-6.163.157-6.163-.422.127-.633.322c-.21.196-.318.44-.318.44s-.122 3.359-.14 5.39c-.02 2.454.351 5.216.351 5.216s.085.296.345.496c.367.285.771.331.771.331"/><path fill="#fff" d="M6.1 16.763c.19 0 .3 1.251.38 2.58.045.744.411 2.058-.08 2.058-.49 0-.584-.476-.617-2.09-.034-1.612.064-2.548.317-2.548M3.173 16.667c.12-.042.35.634.903 1.156.39.369.76.49.855.744.096.254.222 1.613-.062 1.631-.396.023-1.022-.262-1.393-.933-.59-1.062-.525-2.518-.303-2.598"/></svg>
--- a/frontend/public/svgs/tv.svg
+++ b/frontend/public/svgs/tv.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#455a64" d="m15.255 10.911-4.82-6.048a.204.204 0 0 1 .025-.278.2.2 0 0 1 .284.018l5.127 5.775a.2.2 0 0 1-.018.284l-.307.271a.2.2 0 0 1-.291-.022M16.494 10.878l-.276-.245a.22.22 0 0 1-.017-.313l5.097-5.746a.22.22 0 0 1 .313-.018c.09.078.1.213.027.307l-4.822 5.99a.227.227 0 0 1-.322.025"/><path fill="#455a64" d="M12.389 11.214c0-.775 1.72-1.406 3.842-1.406s3.842.629 3.842 1.406z"/><path fill="#82aec0" d="M28.353 29.337H3.652c-.544 0-.985-.458-.985-1.02V11.8c0-.564.44-1.02.985-1.02h24.703c.542 0 .985.458.985 1.02v16.516c-.003.562-.443 1.02-.987 1.02"/><path fill="#212121" d="M27.637 28.368H4.438a.79.79 0 0 1-.789-.79V12.456a.79.79 0 0 1 .79-.79h23.198c.436 0 .789.354.789.79v15.124a.79.79 0 0 1-.79.789"/><path fill="#b9e4ea" d="m5.2 25.995-1.068 1.677c-.186.293.014.691.36.694h18.414a.536.536 0 0 0 .478-.77l-.667-1.373z"/><path fill="#455a64" d="M27.312 27.662h-2.53a.464.464 0 0 1-.465-.464V21.92c0-.258.209-.464.464-.464h2.531c.258 0 .465.209.465.464v5.278a.464.464 0 0 1-.465.464M26.048 20.226a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062"/><path fill="#82aec0" d="M24.966 17.798a.254.254 0 0 0-.009.313l.504.678c.158.21.363.382.6.497l.76.37a.254.254 0 0 0 .316-.38l-.505-.678a1.65 1.65 0 0 0-.6-.498l-.76-.369a.26.26 0 0 0-.306.067"/><path fill="#455a64" d="M26.048 16.268a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062"/><path fill="#82aec0" d="M26.049 13.33c-.118 0-.22.08-.247.194l-.2.822a1.65 1.65 0 0 0 0 .78l.2.822a.254.254 0 0 0 .493 0l.2-.822a1.65 1.65 0 0 0 0-.78l-.2-.822a.256.256 0 0 0-.247-.194"/><path fill="#2f7889" d="M22.992 25.219c-.17.77-.742 1.366-1.475 1.529-1.205.269-3.45.604-7.148.604-3.883 0-6.487-.369-7.89-.642-.775-.151-1.384-.787-1.536-1.607-.348-1.885-.786-5.652.018-10.357.15-.871.814-1.54 1.643-1.653 1.495-.207 4.167-.483 7.765-.483 3.414 0 5.7.25 6.997.45.797.124 1.435.77 1.598 1.608.962 4.957.43 8.733.028 10.55"/><path fill="#212121" fill-rule="evenodd" d="M14.37 13.055c-3.576 0-6.227.274-7.705.478-.623.085-1.147.593-1.265 1.288-.794 4.64-.361 8.353-.02 10.201.121.653.6 1.138 1.184 1.252 1.375.267 3.951.634 7.805.634 3.672 0 5.884-.334 7.051-.594.553-.122 1.002-.576 1.139-1.192.392-1.772.917-5.485-.032-10.369-.13-.67-.633-1.161-1.23-1.254-1.272-.197-3.536-.444-6.928-.444m-7.827-.403c1.514-.209 4.206-.486 7.826-.486 3.436 0 5.746.25 7.064.454h.001c1 .156 1.771.959 1.966 1.964.976 5.028.439 8.867.027 10.73-.206.928-.9 1.665-1.814 1.868-1.242.277-3.52.615-7.244.615-3.91 0-6.544-.372-7.975-.65-.967-.19-1.705-.976-1.887-1.963m2.036-12.532c-1.035.142-1.84.972-2.02 2.02-.815 4.768-.372 8.59-.016 10.512" clip-rule="evenodd"/><path fill="url(#a)" d="M8.686 14.175c.373-.045 1.08-.013 1.329.744.248.758-.298.963-.591 1.187-.843.642-1.26.887-1.767 1.587-.404.56-1.111.384-1.322.015-.169-.298-.293-1.253.064-1.884.771-1.351 1.914-1.605 2.287-1.649"/><defs><linearGradient id="a" x1="8.303" x2="8.07" y1="9.59" y2="18.014" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs></svg>
--- a/frontend/src/components/AuthError/AuthError.styles.scss
+++ b/frontend/src/components/AuthError/AuthError.styles.scss
@@ -0,0 +1,145 @@
+.auth-error-container {
+	margin-top: 24px;
+	width: 100%;
+	animation: horizontal-shaking 300ms ease-out;
+
+	.error-content {
+		background: rgba(229, 72, 77, 0.1);
+		border: 1px solid rgba(229, 72, 77, 0.2);
+		border-radius: 4px;
+
+		&__summary-section {
+			border-bottom: 1px solid rgba(229, 72, 77, 0.2);
+		}
+
+		&__summary {
+			padding: 16px;
+		}
+
+		&__summary-left {
+			gap: 10px;
+		}
+
+		&__icon-wrapper {
+			width: 12px;
+			height: 12px;
+			flex-shrink: 0;
+		}
+
+		&__summary-text {
+			gap: 6px;
+		}
+
+		&__error-code {
+			color: #fadadb;
+			font-size: 13px;
+			font-weight: 500;
+			line-height: 1;
+			letter-spacing: -0.065px;
+		}
+
+		&__error-message {
+			color: #f5b6b8;
+			font-size: 13px;
+			font-weight: 400;
+			line-height: 20px;
+			letter-spacing: -0.065px;
+		}
+
+		&__message-badge {
+			padding: 0px 16px 16px;
+		}
+
+		&__message-badge-label-text {
+			color: #fadadb;
+		}
+
+		&__message-badge-line {
+			background-image: radial-gradient(
+				circle,
+				rgba(229, 72, 77, 0.3) 1px,
+				transparent 2px
+			);
+		}
+
+		&__messages-section {
+			padding: 0;
+		}
+
+		&__message-list {
+			max-height: 200px;
+		}
+
+		&__message-item {
+			color: #f5b6b8;
+			font-size: 13px;
+			font-weight: 400;
+			line-height: 20px;
+			letter-spacing: -0.065px;
+
+			&::before {
+				background: #f5b6b8;
+			}
+		}
+
+		&__scroll-hint {
+			background: rgba(229, 72, 77, 0.2);
+		}
+
+		&__scroll-hint-text {
+			color: #fadadb;
+		}
+	}
+
+	.auth-error-icon {
+		color: var(--bg-cherry-300);
+		padding-top: 1px;
+	}
+}
+
+.lightMode {
+	.auth-error-container {
+		.error-content {
+			background: rgba(229, 72, 77, 0.1);
+			border-color: rgba(229, 72, 77, 0.2);
+
+			&__error-code {
+				color: var(--bg-ink-100);
+			}
+
+			&__error-message {
+				color: var(--bg-ink-400);
+			}
+
+			&__message-item {
+				color: var(--bg-ink-400);
+
+				&::before {
+					background: var(--bg-ink-400);
+				}
+			}
+
+			&__scroll-hint-text {
+				color: var(--bg-ink-100);
+			}
+		}
+	}
+}
+
+@keyframes horizontal-shaking {
+	0% {
+		transform: translateX(0);
+	}
+	25% {
+		transform: translateX(5px);
+	}
+	50% {
+		transform: translateX(-5px);
+	}
+	75% {
+		transform: translateX(5px);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
--- a/frontend/src/components/AuthError/AuthError.tsx
+++ b/frontend/src/components/AuthError/AuthError.tsx
@@ -0,0 +1,22 @@
+import './AuthError.styles.scss';
+
+import ErrorContent from 'components/ErrorModal/components/ErrorContent';
+import { CircleAlert } from 'lucide-react';
+import APIError from 'types/api/error';
+
+interface AuthErrorProps {
+	error: APIError;
+}
+
+function AuthError({ error }: AuthErrorProps): JSX.Element {
+	return (
+		<div className="auth-error-container">
+			<ErrorContent
+				error={error}
+				icon={<CircleAlert size={12} className="auth-error-icon" />}
+			/>
+		</div>
+	);
+}
+
+export default AuthError;
--- a/frontend/src/components/AuthPageContainer/AuthFooter.styles.scss
+++ b/frontend/src/components/AuthPageContainer/AuthFooter.styles.scss
@@ -0,0 +1,115 @@
+@import '@signozhq/design-tokens/dist/style.css';
+
+.auth-footer {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 24px 0;
+	position: relative;
+	z-index: 10;
+}
+
+.auth-footer-content {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 16px;
+	padding: 12px;
+	background: var(--bg-ink-400, #121317);
+	border: 1px solid var(--bg-ink-200, #23262e);
+	border-radius: 4px;
+}
+
+.auth-footer-item {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	height: 12px;
+}
+
+.auth-footer-status-indicator {
+	width: 6px;
+	height: 6px;
+	border-radius: 9999px;
+	background: #25e192;
+	flex-shrink: 0;
+}
+
+.auth-footer-icon {
+	aspect-ratio: 1.93;
+	width: 29px;
+	flex-shrink: 0;
+	object-fit: contain;
+	opacity: 1;
+}
+
+.auth-footer-text {
+	font-family: var(--font-family-inter, Inter, sans-serif);
+	font-size: 11px;
+	font-weight: 400;
+	line-height: 1;
+	color: var(--text-neutral-dark-100, #adb4c2);
+	text-align: center;
+}
+
+.auth-footer-link {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	text-decoration: none;
+	transition: opacity 0.2s ease;
+
+	&:hover {
+		opacity: 0.8;
+	}
+}
+
+.auth-footer-link-icon {
+	flex-shrink: 0;
+	color: var(--text-neutral-dark-50, #eceef2);
+}
+
+.auth-footer-link-status {
+	.auth-footer-text {
+		color: #25e192;
+	}
+
+	.auth-footer-link-icon {
+		color: #25e192;
+	}
+}
+
+.auth-footer-separator {
+	width: 4px;
+	height: 4px;
+	border-radius: 50%;
+	background: var(--bg-ink-200, #23262e);
+	flex-shrink: 0;
+}
+
+.lightMode {
+	.auth-footer-content {
+		background: var(--bg-base-white, #ffffff);
+		border-color: var(--bg-vanilla-300, #e9e9e9);
+		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
+	}
+
+	.auth-footer-icon {
+		filter: brightness(0) saturate(100%) invert(25%) sepia(8%) saturate(518%)
+			hue-rotate(192deg) brightness(80%) contrast(95%);
+		opacity: 0.9;
+	}
+
+	.auth-footer-text {
+		color: var(--text-neutral-light-200, #80828d);
+	}
+
+	.auth-footer-link-icon {
+		color: var(--text-neutral-light-100, #62636c);
+	}
+
+	.auth-footer-separator {
+		background: var(--bg-vanilla-300, #e9e9e9);
+	}
+}
--- a/frontend/src/components/AuthPageContainer/AuthFooter.tsx
+++ b/frontend/src/components/AuthPageContainer/AuthFooter.tsx
@@ -0,0 +1,75 @@
+import './AuthFooter.styles.scss';
+
+import { ArrowUpRight } from 'lucide-react';
+import React from 'react';
+
+interface FooterItem {
+	icon?: string;
+	text: string;
+	url?: string;
+	statusIndicator?: boolean;
+}
+
+const footerItems: FooterItem[] = [
+	{
+		text: 'All systems operational',
+		url: 'https://status.signoz.io/',
+		statusIndicator: true,
+	},
+	{
+		text: 'Privacy',
+		url: 'https://www.signoz.io/privacy',
+	},
+	{
+		text: 'Security',
+		url: 'https://www.signoz.io/security',
+	},
+];
+
+function AuthFooter(): JSX.Element {
+	return (
+		<footer className="auth-footer">
+			<div className="auth-footer-content">
+				{footerItems.map((item, index) => (
+					<React.Fragment key={item.text}>
+						<div className="auth-footer-item">
+							{item.statusIndicator && (
+								<div className="auth-footer-status-indicator" />
+							)}
+							{item.icon && (
+								<img
+									loading="lazy"
+									src={item.icon}
+									alt=""
+									className="auth-footer-icon"
+								/>
+							)}
+							{item.url ? (
+								<a
+									href={item.url}
+									className={`auth-footer-link ${
+										item.statusIndicator ? 'auth-footer-link-status' : ''
+									}`}
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									<span className="auth-footer-text">{item.text}</span>
+									{!item.statusIndicator && (
+										<ArrowUpRight size={12} className="auth-footer-link-icon" />
+									)}
+								</a>
+							) : (
+								<span className="auth-footer-text">{item.text}</span>
+							)}
+						</div>
+						{index < footerItems.length - 1 && (
+							<div className="auth-footer-separator" />
+						)}
+					</React.Fragment>
+				))}
+			</div>
+		</footer>
+	);
+}
+
+export default AuthFooter;
--- a/frontend/src/components/AuthPageContainer/AuthHeader.styles.scss
+++ b/frontend/src/components/AuthPageContainer/AuthHeader.styles.scss
@@ -0,0 +1,82 @@
+@import '@signozhq/design-tokens/dist/style.css';
+
+.auth-header {
+	width: 100%;
+	max-width: 1176px;
+	margin: 0 auto;
+	padding: 12px 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	position: relative;
+	z-index: 10;
+}
+
+.auth-header-logo {
+	display: flex;
+	align-items: center;
+	gap: 4.9px;
+	text-decoration: none;
+}
+
+.auth-header-logo-icon {
+	width: 17.5px;
+	height: 17.5px;
+	flex-shrink: 0;
+}
+
+.auth-header-logo-text {
+	font-family: Satoshi, var(--font-family-inter, Inter), sans-serif;
+	font-size: 15.4px;
+	font-weight: 500;
+	line-height: 17.5px;
+	color: var(--text-neutral-dark-50, #eceef2);
+	white-space: nowrap;
+}
+
+.auth-header-help-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	height: 32px;
+	padding: 10px 16px;
+	background: var(--bg-ink-400, #121317);
+	border: none;
+	border-radius: 2px;
+	cursor: pointer;
+	transition: opacity 0.2s ease;
+
+	span {
+		font-family: var(--font-family-inter, Inter, sans-serif);
+		font-size: 11px;
+		font-weight: 500;
+		line-height: 1;
+		color: var(--text-neutral-dark-100, #adb4c2);
+		text-align: center;
+	}
+
+	svg {
+		flex-shrink: 0;
+		color: var(--text-neutral-dark-100, #adb4c2);
+	}
+
+	&:hover {
+		opacity: 0.8;
+	}
+}
+
+.lightMode {
+	.auth-header-logo-text {
+		color: var(--text-neutral-light-100, #62636c);
+	}
+
+	.auth-header-help-button {
+		background: var(--bg-vanilla-200, #f5f5f5);
+
+		span,
+		svg {
+			color: var(--text-neutral-light-200, #80828d);
+		}
+	}
+}
--- a/frontend/src/components/AuthPageContainer/AuthHeader.tsx
+++ b/frontend/src/components/AuthPageContainer/AuthHeader.tsx
@@ -0,0 +1,33 @@
+import './AuthHeader.styles.scss';
+
+import { Button } from '@signozhq/button';
+import { LifeBuoy } from 'lucide-react';
+import { useCallback } from 'react';
+
+function AuthHeader(): JSX.Element {
+	const handleGetHelp = useCallback((): void => {
+		window.open('https://signoz.io/support/', '_blank');
+	}, []);
+
+	return (
+		<header className="auth-header">
+			<div className="auth-header-logo">
+				<img
+					src="/Logos/signoz-brand-logo.svg"
+					alt="SigNoz"
+					className="auth-header-logo-icon"
+				/>
+				<span className="auth-header-logo-text">SigNoz</span>
+			</div>
+			<Button
+				className="auth-header-help-button"
+				prefixIcon={<LifeBuoy size={12} />}
+				onClick={handleGetHelp}
+			>
+				Get Help
+			</Button>
+		</header>
+	);
+}
+
+export default AuthHeader;
--- a/frontend/src/components/AuthPageContainer/AuthPageContainer.styles.scss
+++ b/frontend/src/components/AuthPageContainer/AuthPageContainer.styles.scss
@@ -0,0 +1,181 @@
+@import '@signozhq/design-tokens/dist/style.css';
+
+.auth-page-wrapper {
+	position: relative;
+	min-height: 100vh;
+	width: 100%;
+	background: var(--bg-neutral-dark-1000, #0a0c10);
+	display: flex;
+	flex-direction: column;
+}
+
+.auth-page-background {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	overflow: hidden;
+}
+
+.auth-page-dots {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.bg-dot-pattern {
+	background: radial-gradient(
+		circle,
+		var(--bg-neutral-dark-50, #eceef2) 1px,
+		transparent 1px
+	);
+	background-size: 12px 12px;
+	opacity: 1;
+}
+
+.masked-dots {
+	mask-image: radial-gradient(
+		circle at 50% 0%,
+		rgba(11, 12, 14, 0.1) 0%,
+		rgba(11, 12, 14, 0) 56.77%
+	);
+	-webkit-mask-image: radial-gradient(
+		circle at 50% 0%,
+		rgba(11, 12, 14, 0.1) 0%,
+		rgba(11, 12, 14, 0) 56.77%
+	);
+}
+
+.auth-page-gradient {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	margin: 0 auto;
+	height: 450px;
+	width: 100%;
+	flex-shrink: 0;
+	border-radius: 956px;
+	background: radial-gradient(
+		ellipse at center -500px,
+		rgba(78, 116, 248, 0.3) 0%,
+		transparent 70%
+	);
+	opacity: 0.3;
+	filter: blur(150px);
+
+	@media (min-width: 768px) {
+		height: 956px;
+		filter: blur(300px);
+	}
+}
+
+.auth-page-line-left,
+.auth-page-line-right {
+	position: absolute;
+	top: 0;
+	width: 1px;
+	height: 100%;
+	background-image: repeating-linear-gradient(
+		to bottom,
+		var(--bg-ink-200, #23262e) 0px,
+		var(--bg-ink-200, #23262e) 4px,
+		transparent 4px,
+		transparent 8px
+	);
+	pointer-events: none;
+
+	@media (max-width: 1440px) {
+		display: none;
+	}
+}
+
+.auth-page-line-left {
+	left: calc(50% - 600px);
+}
+
+.auth-page-line-right {
+	left: calc(50% + 600px);
+}
+
+.auth-page-layout {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	max-width: 1440px;
+	margin: 0 auto;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+
+	@media (max-width: 1440px) {
+		padding: 0 24px;
+	}
+}
+
+.auth-page-content {
+	flex: 1;
+	display: flex;
+	align-items: flex-start;
+	justify-content: center;
+	padding-top: 8vh;
+	padding-bottom: 24px;
+	width: 100%;
+	position: relative;
+
+	@media (max-width: 768px) {
+		padding-top: 15vh;
+		align-items: center;
+	}
+
+	&.onboarding-flow {
+		padding-top: 0;
+
+		@media (max-width: 768px) {
+			padding-top: 0;
+		}
+	}
+}
+
+.lightMode {
+	.auth-page-wrapper {
+		background: var(--bg-base-white, #ffffff);
+	}
+
+	.bg-dot-pattern {
+		background: radial-gradient(circle, rgba(35, 38, 46, 1) 1px, transparent 1px);
+		background-size: 12px 12px;
+	}
+
+	.auth-page-gradient {
+		background: radial-gradient(
+			ellipse at center top,
+			rgba(78, 116, 248, 0.12) 0%,
+			transparent 60%
+		);
+		opacity: 0.8;
+		filter: blur(200px);
+
+		@media (min-width: 768px) {
+			filter: blur(300px);
+		}
+	}
+
+	.auth-page-line-left,
+	.auth-page-line-right {
+		background-image: repeating-linear-gradient(
+			to bottom,
+			var(--bg-vanilla-300, #e9e9e9) 0px,
+			var(--bg-vanilla-300, #e9e9e9) 4px,
+			transparent 4px,
+			transparent 8px
+		);
+	}
+}
--- a/frontend/src/components/AuthPageContainer/index.tsx
+++ b/frontend/src/components/AuthPageContainer/index.tsx
@@ -0,0 +1,41 @@
+import './AuthPageContainer.styles.scss';
+
+import { PropsWithChildren } from 'react';
+
+import AuthFooter from './AuthFooter';
+import AuthHeader from './AuthHeader';
+
+type AuthPageContainerProps = PropsWithChildren<{
+	isOnboarding?: boolean;
+}>;
+
+function AuthPageContainer({
+	children,
+	isOnboarding = false,
+}: AuthPageContainerProps): JSX.Element {
+	return (
+		<div className="auth-page-wrapper">
+			<div className="auth-page-background">
+				<div className="auth-page-dots bg-dot-pattern masked-dots" />
+				<div className="auth-page-gradient" />
+				<div className="auth-page-line-left" />
+				<div className="auth-page-line-right" />
+			</div>
+			<div className="auth-page-layout">
+				<AuthHeader />
+				<main
+					className={`auth-page-content ${isOnboarding ? 'onboarding-flow' : ''}`}
+				>
+					{children}
+				</main>
+				<AuthFooter />
+			</div>
+		</div>
+	);
+}
+
+AuthPageContainer.defaultProps = {
+	isOnboarding: false,
+};
+
+export default AuthPageContainer;
--- a/frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss
+++ b/frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss
@@ -58,6 +58,7 @@
 		flex-direction: column;
 		gap: 16px;
 		padding-left: 30px;
+		margin-bottom: 1rem;

 		li {
 			position: relative;
--- a/frontend/src/components/CustomTimePicker/CalendarContainer.tsx
+++ b/frontend/src/components/CustomTimePicker/CalendarContainer.tsx
@@ -0,0 +1,102 @@
+import { Calendar } from '@signozhq/calendar';
+import { Button } from 'antd';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import dayjs from 'dayjs';
+import { CalendarIcon, Check, X } from 'lucide-react';
+import { useTimezone } from 'providers/Timezone';
+
+import { DateRange } from './CustomTimePickerPopoverContent';
+
+function CalendarContainer({
+	dateRange,
+	onSelectDateRange,
+	onCancel,
+	onApply,
+}: {
+	dateRange: DateRange;
+	onSelectDateRange: (dateRange: DateRange) => void;
+	onCancel: () => void;
+	onApply: () => void;
+}): JSX.Element {
+	const { timezone } = useTimezone();
+
+	// this is to override the default behavior of the shadcn calendar component
+	// if a range is already selected, clicking on a date will reset selection and set the new date as the start date
+	const handleSelect = (
+		_selected: DateRange | undefined,
+		clickedDate?: Date,
+	): void => {
+		if (!clickedDate) {
+			return;
+		}
+
+		// No dates selected → start new
+		if (!dateRange?.from) {
+			onSelectDateRange({ from: clickedDate });
+			return;
+		}
+
+		// Only start selected → complete the range
+		if (dateRange.from && !dateRange.to) {
+			if (clickedDate < dateRange.from) {
+				onSelectDateRange({ from: clickedDate, to: dateRange.from });
+			} else {
+				onSelectDateRange({ from: dateRange.from, to: clickedDate });
+			}
+			return;
+		}
+
+		onSelectDateRange({ from: clickedDate, to: undefined });
+	};
+
+	return (
+		<div className="calendar-container">
+			<div className="calendar-container-header">
+				<CalendarIcon size={12} />
+				<div className="calendar-container-header-title">
+					{dayjs(dateRange?.from)
+						.tz(timezone.value)
+						.format(DATE_TIME_FORMATS.MONTH_DATE_SHORT)}{' '}
+					-{' '}
+					{dayjs(dateRange?.to)
+						.tz(timezone.value)
+						.format(DATE_TIME_FORMATS.MONTH_DATE_SHORT)}
+				</div>
+			</div>
+
+			<div className="calendar-container-body">
+				<Calendar
+					mode="range"
+					required
+					defaultMonth={dateRange?.from}
+					selected={dateRange}
+					disabled={{
+						after: dayjs().toDate(),
+					}}
+					onSelect={handleSelect}
+				/>
+
+				<div className="calendar-actions">
+					<Button
+						type="primary"
+						className="periscope-btn secondary cancel-btn"
+						onClick={onCancel}
+						icon={<X size={12} />}
+					>
+						Cancel
+					</Button>
+					<Button
+						type="primary"
+						className="periscope-btn primary apply-btn"
+						onClick={onApply}
+						icon={<Check size={12} />}
+					>
+						Apply
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default CalendarContainer;
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss
+++ b/frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss
@@ -36,7 +36,6 @@
 }

 .time-selection-dropdown-content {
-	min-width: 172px;
 	width: 100%;
 }

@@ -48,18 +47,16 @@
 	padding: 4px 8px;
 	padding-left: 0px !important;

-	&.custom-time {
-		input:not(:focus) {
-			min-width: 280px;
+	input {
+		width: 280px;
+
+		&::placeholder {
+			color: white;
 		}
-	}

-	input::placeholder {
-		color: white;
-	}
-
-	input:focus::placeholder {
-		color: rgba($color: #ffffff, $alpha: 0.4);
+		&:focus::placeholder {
+			color: rgba($color: #ffffff, $alpha: 0.4);
+		}
 	}
 }

@@ -175,9 +172,26 @@
 }

 .time-input-prefix {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 4px;
+	border-radius: 3px;
+
+	width: 36px;
+
+	font-size: 11px;
+	color: var(--bg-vanilla-400);
+	background-color: var(--bg-ink-200);
+
+	&.is-live {
+		background-color: transparent;
+		color: var(--bg-forest-500);
+	}
+
 	.live-dot-icon {
-		width: 6px;
-		height: 6px;
+		width: 8px;
+		height: 8px;
 		border-radius: 50%;
 		background-color: var(--bg-forest-500);
 		animation: ripple 1s infinite;
@@ -191,7 +205,7 @@
 	0% {
 		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
 	}
-	70% {
+	60% {
 		box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
 	}
 	100% {
@@ -251,6 +265,11 @@
 		background: rgb(179 179 179 / 15%);
 	}

+	.time-input-prefix {
+		background-color: var(--bg-vanilla-300);
+		color: var(--bg-ink-400);
+	}
+
 	.time-input-suffix-icon-badge {
 		color: var(--bg-ink-100);
 		background: rgb(179 179 179 / 15%);
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
+++ b/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
@@ -1,8 +1,9 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import './CustomTimePicker.styles.scss';

-import { Input, Popover, Tooltip, Typography } from 'antd';
+import { Input, InputRef, Popover, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -13,10 +14,9 @@ import {
 	RelativeDurationSuggestionOptions,
 } from 'container/TopNav/DateTimeSelectionV2/config';
 import dayjs from 'dayjs';
-import { isValidTimeFormat } from 'lib/getMinMax';
+import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
 import { defaultTo, isFunction, noop } from 'lodash-es';
-import debounce from 'lodash-es/debounce';
-import { CheckCircle, ChevronDown, Clock } from 'lucide-react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import {
 	ChangeEvent,
@@ -25,20 +25,26 @@ import {
 	useCallback,
 	useEffect,
 	useMemo,
+	useRef,
 	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 { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
 import { popupContainer } from 'utils/selectPopupContainer';
+import { TimeRangeValidationResult, validateTimeRange } from 'utils/timeUtils';

 import CustomTimePickerPopoverContent from './CustomTimePickerPopoverContent';

-const maxAllowedMinTimeInMonths = 6;
+const maxAllowedMinTimeInMonths = 15;
 type ViewType = 'datetime' | 'timezone';
 const DEFAULT_VIEW: ViewType = 'datetime';

+export enum CustomTimePickerInputStatus {
+	SUCCESS = 'success',
+	ERROR = 'error',
+	UNSET = '',
+}
+
 interface CustomTimePickerProps {
 	onSelect: (value: string) => void;
 	onError: (value: boolean) => void;
@@ -64,6 +70,8 @@ interface CustomTimePickerProps {
 	onExitLiveLogs?: () => void;
 	/** When false, hides the "Recently Used" time ranges section */
 	showRecentlyUsed?: boolean;
+	minTime: number;
+	maxTime: number;
 }

 function CustomTimePicker({
@@ -84,23 +92,24 @@ function CustomTimePicker({
 	onExitLiveLogs,
 	showLiveLogs,
 	showRecentlyUsed = true,
+	minTime,
+	maxTime,
 }: 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>(
-		null,
+	const [inputStatus, setInputStatus] = useState<CustomTimePickerInputStatus>(
+		CustomTimePickerInputStatus.UNSET,
 	);
+	const [inputErrorDetails, setInputErrorDetails] = useState<
+		TimeRangeValidationResult['errorDetails'] | null
+	>(null);
 	const location = useLocation();
-	const [isInputFocused, setIsInputFocused] = useState(false);
+
+	const inputRef = useRef<InputRef>(null);

 	const [activeView, setActiveView] = useState<ViewType>(DEFAULT_VIEW);

@@ -123,12 +132,48 @@ function CustomTimePicker({

 	const [isOpenedFromFooter, setIsOpenedFromFooter] = useState(false);

+	// function to get selected time in Last 1m, Last 2h, Last 3d, Last 4w format
+	// 1m, 2h, 3d, 4w -> Last 1 minute, Last 2 hours, Last 3 days, Last 4 weeks
+	const getSelectedTimeRangeLabelInRelativeFormat = (
+		selectedTime: string,
+	): string => {
+		if (!selectedTime || selectedTime === 'custom') {
+			return selectedTime || '';
+		}
+
+		// Check if the format matches the relative time format (e.g., 1m, 2h, 3d, 4w)
+		const match = selectedTime.match(/^(\d+)([mhdw])$/);
+		if (!match) {
+			// If it doesn't match the format, return as is
+			return `Last ${selectedTime}`;
+		}
+
+		const value = parseInt(match[1], 10);
+		const unit = match[2];
+
+		// Map unit abbreviations to full words
+		const unitMap: Record<string, { singular: string; plural: string }> = {
+			m: { singular: 'minute', plural: 'minutes' },
+			h: { singular: 'hour', plural: 'hours' },
+			d: { singular: 'day', plural: 'days' },
+			w: { singular: 'week', plural: 'weeks' },
+		};
+
+		const unitLabel = value === 1 ? unitMap[unit].singular : unitMap[unit].plural;
+
+		return `Last ${value} ${unitLabel}`;
+	};
+
 	const getSelectedTimeRangeLabel = (
 		selectedTime: string,
 		selectedTimeValue: string,
 	): string => {
+		if (!selectedTime) {
+			return '';
+		}
+
 		if (selectedTime === 'custom') {
-			// TODO(shaheer): if the user preference is 12 hour format, then convert the date range string to 12-hour format (pick this up while working on 12/24 hour preference feature)
+			// TODO: if the user preference is 12 hour format, then convert the date range string to 12-hour format (pick this up while working on 12/24 hour preference feature)
 			// // Convert the date range string to 12-hour format
 			// const dates = selectedTimeValue.split(' - ');
 			// if (dates.length === 2) {
@@ -164,42 +209,90 @@ function CustomTimePicker({
 			}
 		}

-		if (isValidTimeFormat(selectedTime)) {
-			return selectedTime;
+		if (isValidShortHandDateTimeFormat(selectedTime)) {
+			return getSelectedTimeRangeLabelInRelativeFormat(selectedTime);
 		}

 		return '';
 	};

+	const resetErrorStatus = (): void => {
+		setInputStatus(CustomTimePickerInputStatus.UNSET);
+		onError(false);
+		setInputErrorDetails(null);
+	};
+
 	useEffect(() => {
 		if (showLiveLogs) {
 			setSelectedTimePlaceholderValue('Live');
+			setInputValue('Live');
+			resetErrorStatus();
 		} else {
 			const value = getSelectedTimeRangeLabel(selectedTime, selectedValue);
 			setSelectedTimePlaceholderValue(value);
+			setInputValue(value);
+			resetErrorStatus();
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedTime, selectedValue, showLiveLogs]);

 	const hide = (): void => {
 		setOpen(false);
 	};

+	const getInputPrefix = (): JSX.Element => {
+		if (showLiveLogs) {
+			return (
+				<span className="time-input-prefix is-live">
+					<span className="live-dot-icon" />
+				</span>
+			);
+		}
+
+		const timeDifference = getTimeDifference(
+			Number(minTime / 1000_000),
+			Number(maxTime / 1000_000),
+		);
+
+		return <span className="time-input-prefix">{timeDifference}</span>;
+	};
+
 	const handleOpenChange = (newOpen: boolean): void => {
 		setOpen(newOpen);
+
 		if (!newOpen) {
 			setCustomDTPickerVisible?.(false);
 			setActiveView('datetime');
+
+			if (showLiveLogs) {
+				setSelectedTimePlaceholderValue('Live');
+				setInputValue('Live');
+				return;
+			}
+
+			// set the input value to a relative format if the selected time is not custom
+			const inputValue = getSelectedTimeRangeLabel(selectedTime, selectedValue);
+			setInputValue(inputValue);
 		}
 	};

-	const debouncedHandleInputChange = debounce((inputValue): void => {
-		const isValidFormat = /^(\d+)([mhdw])$/.test(inputValue);
-		if (isValidFormat) {
-			setInputStatus('success');
-			onError(false);
-			setInputErrorMessage(null);
+	const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {
+		const inputValue = event.target.value;
+		setInputValue(inputValue);

-			const match = inputValue.match(/^(\d+)([mhdw])$/);
+		resetErrorStatus();
+	};
+
+	const handleInputPressEnter = (): void => {
+		// check if the entered time is in the format of 1m, 2h, 3d, 4w
+		const isTimeDurationShortHandFormat = /^(\d+)([mhdw])$/.test(inputValue);
+
+		if (isTimeDurationShortHandFormat) {
+			setInputStatus(CustomTimePickerInputStatus.SUCCESS);
+			onError(false);
+			setInputErrorDetails(null);
+
+			const match = inputValue.match(/^(\d+)([mhdw])$/) as RegExpMatchArray;

 			const value = parseInt(match[1], 10);
 			const unit = match[2];
@@ -230,9 +323,13 @@ function CustomTimePicker({
 			}

 			if (minTime && (!minTime.isValid() || minTime < maxAllowedMinTime)) {
-				setInputStatus('error');
+				setInputStatus(CustomTimePickerInputStatus.ERROR);
 				onError(true);
-				setInputErrorMessage('Please enter time less than 6 months');
+				setInputErrorDetails({
+					message: `Please enter time less than ${maxAllowedMinTimeInMonths} months`,
+					code: 'TIME_LESS_THAN_MAX_ALLOWED_TIME_IN_MONTHS',
+					description: `Please enter time less than ${maxAllowedMinTimeInMonths} months`,
+				});
 				if (isFunction(onCustomTimeStatusUpdate)) {
 					onCustomTimeStatusUpdate(true);
 				}
@@ -241,44 +338,64 @@ function CustomTimePicker({
 					time: [minTime, currentTime],
 					timeStr: inputValue,
 				});
+
+				setOpen(false);
 			}
-		} else {
-			setInputStatus('error');
-			onError(true);
-			setInputErrorMessage(null);
-			if (isFunction(onCustomTimeStatusUpdate)) {
-				onCustomTimeStatusUpdate(false);
-			}
+
+			return;
 		}
-	}, 300);

-	const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {
-		const inputValue = event.target.value;
+		// parse the input value to get the start and end time
+		const [startTime, endTime] = inputValue.split(/\s[-–]\s/);
+
+		// check if startTime and endTime are epoch format
+		const { isValid: isValidStartTime, range: epochRange } = validateEpochRange(
+			Number(startTime),
+			Number(endTime),
+		);
+
+		if (isValidStartTime && epochRange?.startTime && epochRange?.endTime) {
+			onCustomDateHandler?.([epochRange?.startTime, epochRange?.endTime]);

-		if (inputValue.length > 0) {
 			setOpen(false);
-		} else {
-			setOpen(true);
+
+			return;
 		}

-		setInputValue(inputValue);
+		const {
+			isValid: isValidTimeRange,
+			errorDetails,
+			startTimeMs,
+			endTimeMs,
+		} = validateTimeRange(
+			startTime,
+			endTime,
+			DATE_TIME_FORMATS.UK_DATETIME_SECONDS,
+		);

-		// Call the debounced function with the input value
-		debouncedHandleInputChange(inputValue);
+		if (!isValidTimeRange) {
+			setInputStatus(CustomTimePickerInputStatus.ERROR);
+			onError(true);
+			setInputErrorDetails(errorDetails || null);
+			return;
+		}
+
+		onCustomDateHandler?.([dayjs(startTimeMs), dayjs(endTimeMs)]);
+
+		setOpen(false);
 	};

 	const handleSelect = (label: string, value: string): void => {
-		if (label === 'Custom') {
+		if (value === 'custom') {
 			setCustomDTPickerVisible?.(true);
 			return;
 		}

 		onSelect(value);
 		setSelectedTimePlaceholderValue(label);
-		setInputStatus('');
-		onError(false);
-		setInputErrorMessage(null);
+		resetErrorStatus();
 		setInputValue('');
+
 		if (value !== 'custom') {
 			hide();
 		}
@@ -305,20 +422,48 @@ function CustomTimePicker({
 		</div>
 	);

-	const handleFocus = (): void => {
-		setIsInputFocused(true);
-		setActiveView('datetime');
+	const handleOpen = (e: React.SyntheticEvent): void => {
+		e.stopPropagation();
+
+		if (showLiveLogs) {
+			setOpen(true);
+			setSelectedTimePlaceholderValue('Live');
+			setInputValue('Live');
+			return;
+		}
+
+		setOpen(true);
+		// reset the input status and error message as we reset the time to previous correct value
+		resetErrorStatus();
+
+		const startTime = dayjs(minTime / 1000_000).format(
+			DATE_TIME_FORMATS.UK_DATETIME_SECONDS,
+		);
+		const endTime = dayjs(maxTime / 1000_000).format(
+			DATE_TIME_FORMATS.UK_DATETIME_SECONDS,
+		);
+
+		setInputValue(`${startTime} - ${endTime}`);
 	};

-	const handleBlur = (): void => {
-		setIsInputFocused(false);
+	const handleClose = (e: React.MouseEvent): void => {
+		e.stopPropagation();
+		setOpen(false);
+		setCustomDTPickerVisible?.(false);
+
+		if (showLiveLogs) {
+			setInputValue('Live');
+			return;
+		}
+
+		// set the input value to a relative format if the selected time is not custom
+		const inputValue = getSelectedTimeRangeLabel(selectedTime, selectedValue);
+		setInputValue(inputValue);
 	};

 	// this is required as TopNav component wraps the components and we need to clear the state on path change
 	useEffect(() => {
-		setInputStatus('');
-		onError(false);
-		setInputErrorMessage(null);
+		resetErrorStatus();
 		setInputValue('');
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [location.pathname]);
@@ -335,6 +480,10 @@ function CustomTimePicker({
 		);
 	};

+	const handleInputBlur = (): void => {
+		resetErrorStatus();
+	};
+
 	const getTooltipTitle = (): string => {
 		if (selectedTime === 'custom' && inputValue === '' && !open) {
 			return `${dayjs(minTime / 1000_000)
@@ -349,27 +498,19 @@ function CustomTimePicker({
 		return '';
 	};

-	const getInputPrefix = (): JSX.Element => {
-		if (showLiveLogs) {
-			return (
-				<div className="time-input-prefix">
-					<div className="live-dot-icon" />
-				</div>
-			);
+	// Focus and select input text when popover opens
+	useEffect(() => {
+		if (open && inputRef.current) {
+			// Use setTimeout to wait for React to update the DOM and make input editable
+			setTimeout(() => {
+				const inputElement = inputRef.current?.input;
+				if (inputElement) {
+					inputElement.focus();
+					inputElement.select();
+				}
+			}, 0);
 		}
-
-		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>
-		);
-	};
+	}, [open]);

 	return (
 		<div className="custom-time-picker">
@@ -385,9 +526,10 @@ function CustomTimePicker({
 					content={
 						newPopover ? (
 							<CustomTimePickerPopoverContent
+								isLiveLogsEnabled={!!showLiveLogs}
 								setIsOpen={setOpen}
-								customDateTimeVisible={defaultTo(customDateTimeVisible, false)}
 								setCustomDTPickerVisible={defaultTo(setCustomDTPickerVisible, noop)}
+								customDateTimeVisible={defaultTo(customDateTimeVisible, false)}
 								onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
 								onSelectHandler={handleSelect}
 								onGoLive={defaultTo(onGoLive, noop)}
@@ -399,6 +541,10 @@ function CustomTimePicker({
 								setIsOpenedFromFooter={setIsOpenedFromFooter}
 								isOpenedFromFooter={isOpenedFromFooter}
 								showRecentlyUsed={showRecentlyUsed}
+								customDateTimeInputStatus={inputStatus}
+								inputErrorDetails={inputErrorDetails}
+								minTime={minTime}
+								maxTime={maxTime}
 							/>
 						) : (
 							content
@@ -407,25 +553,32 @@ function CustomTimePicker({
 					arrow={false}
 					trigger="click"
 					open={open}
+					destroyTooltipOnHide
 					onOpenChange={handleOpenChange}
 					style={{
 						padding: 0,
 					}}
 				>
 					<Input
-						className="timeSelection-input"
+						ref={inputRef}
+						className={cx(
+							'timeSelection-input',
+							inputStatus === CustomTimePickerInputStatus.ERROR ? 'error' : '',
+						)}
 						type="text"
-						status={inputValue && inputStatus === 'error' ? 'error' : ''}
-						placeholder={
-							isInputFocused
-								? 'Time Format (1m or 2h or 3d or 4w)'
-								: selectedTimePlaceholderValue
+						status={
+							inputValue && inputStatus === CustomTimePickerInputStatus.ERROR
+								? 'error'
+								: ''
 						}
+						readOnly={!open || showLiveLogs}
+						placeholder={selectedTimePlaceholderValue}
 						value={inputValue}
-						onFocus={handleFocus}
-						onClick={handleFocus}
-						onBlur={handleBlur}
+						onFocus={handleOpen}
+						onClick={handleOpen}
 						onChange={handleInputChange}
+						onPressEnter={handleInputPressEnter}
+						onBlur={handleInputBlur}
 						data-1p-ignore
 						prefix={getInputPrefix()}
 						suffix={
@@ -435,24 +588,25 @@ function CustomTimePicker({
 										<span>{activeTimezoneOffset}</span>
 									</div>
 								)}
-								<ChevronDown
-									size={14}
-									className="cursor-pointer time-input-suffix-icon-badge"
-									onClick={(e): void => {
-										e.stopPropagation();
-										handleViewChange('datetime');
-									}}
-								/>
+
+								{open ? (
+									<ChevronUp
+										size={14}
+										className="cursor-pointer time-input-suffix-icon-badge"
+										onClick={handleClose}
+									/>
+								) : (
+									<ChevronDown
+										size={14}
+										className="cursor-pointer time-input-suffix-icon-badge"
+										onClick={handleOpen}
+									/>
+								)}
 							</div>
 						}
 					/>
 				</Popover>
 			</Tooltip>
-			{inputStatus === 'error' && inputErrorMessage && (
-				<Typography.Title level={5} className="valid-format-error">
-					{inputErrorMessage}
-				</Typography.Title>
-			)}
 		</div>
 	);
 }
--- a/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
+++ b/frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx
@@ -4,7 +4,6 @@ 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';
@@ -15,7 +14,7 @@ import {
 	RelativeDurationSuggestionOptions,
 } from 'container/TopNav/DateTimeSelectionV2/config';
 import dayjs from 'dayjs';
-import { Clock, PenLine } from 'lucide-react';
+import { Clock, PenLine, TriangleAlertIcon } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import {
 	Dispatch,
@@ -27,10 +26,23 @@ import {
 } from 'react';
 import { useLocation } from 'react-router-dom';
 import { getCustomTimeRanges } from 'utils/customTimeRangeUtils';
+import { TimeRangeValidationResult } from 'utils/timeUtils';

+import CalendarContainer from './CalendarContainer';
+import { CustomTimePickerInputStatus } from './CustomTimePicker';
 import TimezonePicker from './TimezonePicker';

+const TO_MILLISECONDS_FACTOR = 1000_000;
+
+export type DateRange = {
+	from: Date | undefined;
+	to?: Date | undefined;
+};
+
 interface CustomTimePickerPopoverContentProps {
+	isLiveLogsEnabled: boolean;
+	minTime: number;
+	maxTime: number;
 	options: any[];
 	setIsOpen: Dispatch<SetStateAction<boolean>>;
 	customDateTimeVisible: boolean;
@@ -48,6 +60,8 @@ interface CustomTimePickerPopoverContentProps {
 	setIsOpenedFromFooter: Dispatch<SetStateAction<boolean>>;
 	onExitLiveLogs: () => void;
 	showRecentlyUsed: boolean;
+	customDateTimeInputStatus: CustomTimePickerInputStatus;
+	inputErrorDetails: TimeRangeValidationResult['errorDetails'] | null;
 }

 interface RecentlyUsedDateTimeRange {
@@ -58,8 +72,29 @@ interface RecentlyUsedDateTimeRange {
 	to: string;
 }

+const getDateRange = (
+	minTime: number,
+	maxTime: number,
+	timezone: string,
+): DateRange => {
+	const from = dayjs(minTime / TO_MILLISECONDS_FACTOR)
+		.tz(timezone)
+		.startOf('day')
+		.toDate();
+
+	const to = dayjs(maxTime / TO_MILLISECONDS_FACTOR)
+		.tz(timezone)
+		.endOf('day')
+		.toDate();
+
+	return { from, to };
+};
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function CustomTimePickerPopoverContent({
+	isLiveLogsEnabled,
+	minTime,
+	maxTime,
 	options,
 	setIsOpen,
 	customDateTimeVisible,
@@ -74,6 +109,8 @@ function CustomTimePickerPopoverContent({
 	setIsOpenedFromFooter,
 	onExitLiveLogs,
 	showRecentlyUsed = true,
+	customDateTimeInputStatus = CustomTimePickerInputStatus.UNSET,
+	inputErrorDetails,
 }: CustomTimePickerPopoverContentProps): JSX.Element {
 	const { pathname } = useLocation();

@@ -83,6 +120,9 @@ function CustomTimePickerPopoverContent({

 	const url = new URLSearchParams(window.location.search);

+	const { timezone } = useTimezone();
+	const activeTimezoneOffset = timezone.offset;
+
 	let panelTypeFromURL = url.get(QueryParams.panelTypes);

 	try {
@@ -94,8 +134,9 @@ function CustomTimePickerPopoverContent({
 	const isLogsListView =
 		panelTypeFromURL !== 'table' && panelTypeFromURL !== 'graph'; // we do not select list view in the url

-	const { timezone } = useTimezone();
-	const activeTimezoneOffset = timezone.offset;
+	const [dateRange, setDateRange] = useState<DateRange>(() =>
+		getDateRange(minTime, maxTime, timezone.value),
+	);

 	const [recentlyUsedTimeRanges, setRecentlyUsedTimeRanges] = useState<
 		RecentlyUsedDateTimeRange[]
@@ -177,36 +218,66 @@ function CustomTimePickerPopoverContent({
 		setIsOpen(false);
 	};

+	const handleSelectDateRange = (dateRange: DateRange): void => {
+		setDateRange(dateRange);
+	};
+
+	const handleCalendarRangeApply = (): void => {
+		if (dateRange) {
+			const from = dayjs(dateRange.from)
+				.tz(timezone.value)
+				.startOf('day')
+				.toDate();
+			const to = dayjs(dateRange.to).tz(timezone.value).endOf('day').toDate();
+
+			onCustomDateHandler([dayjs(from), dayjs(to)]);
+		}
+		setIsOpen(false);
+	};
+
+	const handleCalendarRangeCancel = (): void => {
+		setCustomDTPickerVisible(false);
+	};
+
 	return (
 		<>
 			<div className="date-time-popover">
-				{!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="date-time-options">
+					{isLogsExplorerPage && isLogsListView && (
+						<Button
+							className={cx('data-time-live', isLiveLogsEnabled ? 'active' : '')}
+							type="text"
+							onClick={handleGoLive}
+						>
+							Live
+						</Button>
+					)}
+					{options.map((option) => (
+						<Button
+							type="text"
+							key={option.label + option.value}
+							onClick={(e: React.MouseEvent<HTMLButtonElement>): void => {
+								e.stopPropagation();
+								e.preventDefault();
+								handleExitLiveLogs();
+								onSelectHandler(option.label, option.value);
+							}}
+							className={cx(
+								'date-time-options-btn',
+								customDateTimeVisible
+									? option.value === 'custom' && !isLiveLogsEnabled && 'active'
+									: selectedTime === option.value && !isLiveLogsEnabled && 'active',
+							)}
+						>
+							<span className="time-label">{option.label}</span>
+
+							{option.value !== 'custom' && option.value !== '1month' && (
+								<span className="time-value">{option.value}</span>
+							)}
+						</Button>
+					))}
+				</div>
+
 				<div
 					className={cx(
 						'relative-date-time',
@@ -214,19 +285,38 @@ function CustomTimePickerPopoverContent({
 					)}
 				>
 					{customDateTimeVisible ? (
-						<DatePickerV2
-							onSetCustomDTPickerVisible={setCustomDTPickerVisible}
-							setIsOpen={setIsOpen}
-							onCustomDateHandler={onCustomDateHandler}
+						<CalendarContainer
+							dateRange={dateRange}
+							onSelectDateRange={handleSelectDateRange}
+							onCancel={handleCalendarRangeCancel}
+							onApply={handleCalendarRangeApply}
 						/>
 					) : (
 						<div className="time-selector-container">
+							{customDateTimeInputStatus === CustomTimePickerInputStatus.ERROR &&
+								inputErrorDetails && (
+									<div className="input-error-message-container">
+										<div className="input-error-message-title">
+											<TriangleAlertIcon color={Color.BG_CHERRY_400} size={16} />
+											<span className="input-error-message-text">
+												{inputErrorDetails.message}
+											</span>
+										</div>
+
+										{inputErrorDetails.description && (
+											<p className="input-error-message-description">
+												{inputErrorDetails.description}
+											</p>
+										)}
+									</div>
+								)}
+
 							<div className="relative-times-container">
 								<div className="time-heading">RELATIVE TIMES</div>
 								<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
 							</div>

-							{showRecentlyUsed && (
+							{showRecentlyUsed && recentlyUsedTimeRanges.length > 0 && (
 								<div className="recently-used-container">
 									<div className="time-heading">RECENTLY USED</div>
 									<div className="recently-used-range">
--- a/frontend/src/components/DatePickerV2/DatePickerV2.styles.scss
+++ b/frontend/src/components/DatePickerV2/DatePickerV2.styles.scss
@@ -1,114 +0,0 @@
-.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
@@ -1,311 +0,0 @@
-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/ErrorModal/components/ErrorContent.tsx
+++ b/frontend/src/components/ErrorModal/components/ErrorContent.tsx
@@ -6,13 +6,15 @@ import ErrorIcon from 'assets/Error';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { BookOpenText, ChevronsDown } from 'lucide-react';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
+import { ReactNode } from 'react';
 import APIError from 'types/api/error';

 interface ErrorContentProps {
 	error: APIError;
+	icon?: ReactNode;
 }

-function ErrorContent({ error }: ErrorContentProps): JSX.Element {
+function ErrorContent({ error, icon }: ErrorContentProps): JSX.Element {
 	const {
 		url: errorUrl,
 		errors: errorMessages,
@@ -25,9 +27,7 @@ function ErrorContent({ error }: ErrorContentProps): JSX.Element {
 			<section className="error-content__summary-section">
 				<header className="error-content__summary">
 					<div className="error-content__summary-left">
-						<div className="error-content__icon-wrapper">
-							<ErrorIcon />
-						</div>
+						<div className="error-content__icon-wrapper">{icon || <ErrorIcon />}</div>

 						<div className="error-content__summary-text">
 							<h2 className="error-content__error-code">{errorCode}</h2>
@@ -95,4 +95,8 @@ function ErrorContent({ error }: ErrorContentProps): JSX.Element {
 	);
 }

+ErrorContent.defaultProps = {
+	icon: undefined,
+};
+
 export default ErrorContent;
--- a/frontend/src/components/Graph/utils.ts
+++ b/frontend/src/components/Graph/utils.ts
@@ -1,4 +1,5 @@
 import { Chart, ChartConfiguration, ChartData, Color } from 'chart.js';
+// eslint-disable-next-line import/namespace -- side-effect import that registers Chart.js date adapter
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
--- a/frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx
+++ b/frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx
@@ -176,6 +176,8 @@ function HostMetricTraces({
 						onTimeChange={handleTimeChange}
 						defaultRelativeTime="5m"
 						modalSelectedInterval={selectedInterval}
+						modalInitialStartTime={timeRange.startTime * 1000}
+						modalInitialEndTime={timeRange.endTime * 1000}
 					/>
 				</div>
 			</div>
--- a/frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogsDetailedView.tsx
+++ b/frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogsDetailedView.tsx
@@ -87,6 +87,8 @@ function HostMetricLogsDetailedView({
 						onTimeChange={handleTimeChange}
 						defaultRelativeTime="5m"
 						modalSelectedInterval={selectedInterval}
+						modalInitialStartTime={timeRange.startTime * 1000}
+						modalInitialEndTime={timeRange.endTime * 1000}
 					/>
 				</div>
 			</div>
--- a/frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx
+++ b/frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx
@@ -211,6 +211,8 @@ function Metrics({
 						defaultRelativeTime="5m"
 						isModalTimeSelection={isModalTimeSelection}
 						modalSelectedInterval={selectedInterval}
+						modalInitialStartTime={timeRange.startTime * 1000}
+						modalInitialEndTime={timeRange.endTime * 1000}
 					/>
 				</div>
 			</div>
--- a/frontend/src/components/LogDetail/LogDetail.interfaces.ts
+++ b/frontend/src/components/LogDetail/LogDetail.interfaces.ts
@@ -1,16 +1,16 @@
 import { DrawerProps } from 'antd';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { ActionItemProps } from 'container/LogDetailedView/ActionItem';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';

 import { VIEWS } from './constants';

 export type LogDetailProps = {
 	log: ILog | null;
 	selectedTab: VIEWS;
-	onGroupByAttribute?: (fieldKey: string, dataType?: DataTypes) => Promise<void>;
+	handleChangeSelectedView?: ChangeViewFunctionType;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -55,11 +55,11 @@ function LogDetailInner({
 	log,
 	onClose,
 	onAddToQuery,
-	onGroupByAttribute,
 	onClickActionItem,
 	selectedTab,
 	isListViewPanel = false,
 	listViewPanelSelectedFields,
+	handleChangeSelectedView,
 }: LogDetailInnerProps): JSX.Element {
 	const initialContextQuery = useInitialQuery(log);
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
@@ -365,10 +365,10 @@ function LogDetailInner({
 					logData={log}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onClickActionItem}
-					onGroupByAttribute={onGroupByAttribute}
 					isListViewPanel={isListViewPanel}
 					selectedOptions={options}
 					listViewPanelSelectedFields={listViewPanelSelectedFields}
+					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			)}
 			{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
--- a/frontend/src/components/Logs/ListLogView/index.tsx
+++ b/frontend/src/components/Logs/ListLogView/index.tsx
@@ -6,6 +6,7 @@ import cx from 'classnames';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
@@ -108,6 +109,7 @@ type ListLogViewProps = {
 	activeLog?: ILog | null;
 	linesPerRow: number;
 	fontSize: FontSize;
+	handleChangeSelectedView?: ChangeViewFunctionType;
 };

 function ListLogView({
@@ -118,6 +120,7 @@ function ListLogView({
 	activeLog,
 	linesPerRow,
 	fontSize,
+	handleChangeSelectedView,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);

@@ -131,7 +134,6 @@ function ListLogView({
 		onAddToQuery: handleAddToQuery,
 		onSetActiveLog: handleSetActiveContextLog,
 		onClearActiveLog: handleClearActiveContextLog,
-		onGroupByAttribute,
 	} = useActiveLog();

 	const isDarkMode = useIsDarkMode();
@@ -255,7 +257,7 @@ function ListLogView({
 					onAddToQuery={handleAddToQuery}
 					selectedTab={VIEW_TYPES.CONTEXT}
 					onClose={handlerClearActiveContextLog}
-					onGroupByAttribute={onGroupByAttribute}
+					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			)}
 		</>
@@ -264,6 +266,7 @@ function ListLogView({

 ListLogView.defaultProps = {
 	activeLog: null,
+	handleChangeSelectedView: undefined,
 };

 LogGeneralField.defaultProps = {
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -39,6 +39,7 @@ function RawLogView({
 	selectedFields = [],
 	fontSize,
 	onLogClick,
+	handleChangeSelectedView,
 }: RawLogViewProps): JSX.Element {
 	const {
 		isHighlighted: isUrlHighlighted,
@@ -52,7 +53,6 @@ function RawLogView({
 		onSetActiveLog,
 		onClearActiveLog,
 		onAddToQuery,
-		onGroupByAttribute,
 	} = useActiveLog();

 	const [selectedTab, setSelectedTab] = useState<VIEWS | undefined>();
@@ -224,13 +224,12 @@ function RawLogView({
 					onClose={handleCloseLogDetail}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onAddToQuery}
-					onGroupByAttribute={onGroupByAttribute}
+					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			)}
 		</RawLogViewContainer>
 	);
 }
-
 RawLogView.defaultProps = {
 	isActiveLog: false,
 	isReadOnly: false,
--- a/frontend/src/components/Logs/RawLogView/types.ts
+++ b/frontend/src/components/Logs/RawLogView/types.ts
@@ -1,3 +1,4 @@
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { FontSize } from 'container/OptionsMenu/types';
 import { MouseEvent } from 'react';
 import { IField } from 'types/api/logs/fields';
@@ -14,6 +15,7 @@ export interface RawLogViewProps {
 	fontSize: FontSize;
 	selectedFields?: IField[];
 	onLogClick?: (log: ILog, event: MouseEvent) => void;
+	handleChangeSelectedView?: ChangeViewFunctionType;
 }

 export interface RawLogContentProps {
--- a/frontend/src/components/NewSelect/test/VariableItem.integration.test.tsx
+++ b/frontend/src/components/NewSelect/test/VariableItem.integration.test.tsx
@@ -7,7 +7,7 @@ import { VirtuosoMockContext } from 'react-virtuoso';
 import configureStore from 'redux-mock-store';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';

-import VariableItem from '../../../container/NewDashboard/DashboardVariablesSelection/VariableItem';
+import VariableItem from '../../../container/DashboardContainer/DashboardVariablesSelection/VariableItem';

 // Mock the dashboard variables query
 jest.mock('api/dashboard/variables/dashboardVariablesQuery', () => ({
@@ -211,7 +211,10 @@ describe('VariableItem Integration Tests', () => {
 			await user.clear(textInput);
 			await user.type(textInput, 'new-text-value');

-			// Should call onValueUpdate after debounce
+			// Blur the input to trigger the value update
+			await user.tab();
+
+			// Should call onValueUpdate after blur
 			await waitFor(
 				() => {
 					expect(mockOnValueUpdate).toHaveBeenCalledWith(
--- a/frontend/src/components/NewSelect/utils.ts
+++ b/frontend/src/components/NewSelect/utils.ts
@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { uniqueOptions } from 'container/NewDashboard/DashboardVariablesSelection/util';
+import { uniqueOptions } from 'container/DashboardContainer/DashboardVariablesSelection/util';

 import { OptionData } from './types';

--- a/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx
@@ -4,7 +4,7 @@ import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
 import { Formula } from 'container/QueryBuilder/components/Formula';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { memo, useEffect, useMemo, useRef } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';

@@ -33,6 +33,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		addTraceOperator,
 		panelType,
 		initialDataSource,
+		handleRunQuery,
 	} = useQueryBuilder();

 	const containerRef = useRef(null);
@@ -157,10 +158,29 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);

+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLDivElement>): void => {
+			const target = e.target as HTMLElement | null;
+			const tagName = target?.tagName || '';
+
+			const isInputElement =
+				['INPUT', 'TEXTAREA', 'SELECT'].includes(tagName) ||
+				(target?.getAttribute('contenteditable') || '').toLowerCase() === 'true';
+
+			// Allow input elements in qb to run the query when Cmd/Ctrl + Enter is pressed
+			if (isInputElement && (e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+				e.preventDefault();
+				e.stopPropagation();
+				handleRunQuery();
+			}
+		},
+		[handleRunQuery],
+	);
+
 	return (
 		<QueryBuilderV2Provider>
 			<div className="query-builder-v2">
-				<div className="qb-content-container">
+				<div className="qb-content-container" onKeyDownCapture={handleKeyDown}>
 					{!isMultiQueryAllowed ? (
 						<QueryV2
 							ref={containerRef}
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx
@@ -11,7 +11,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { get, isEmpty } from 'lodash-es';
 import { BarChart2, ChevronUp, ExternalLink, ScrollText } from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
@@ -171,6 +171,9 @@ function QueryAddOns({

 	const [selectedViews, setSelectedViews] = useState<AddOn[]>([]);

+	const initializedRef = useRef(false);
+	const prevAvailableKeysRef = useRef<Set<string> | null>(null);
+
 	const { handleChangeQueryData } = useQueryOperations({
 		index,
 		query,
@@ -213,23 +216,41 @@ function QueryAddOns({
 		}
 		setAddOns(filteredAddOns);

-		const activeAddOnKeys = new Set(
-			Object.entries(ADD_ONS_KEYS_TO_QUERY_PATH)
-				.filter(([, path]) => hasValue(get(query, path)))
-				.map(([key]) => key),
-		);
+		const availableAddOnKeys = new Set(filteredAddOns.map((a) => a.key));
+		const previousKeys = prevAvailableKeysRef.current;
+		const hasAvailabilityItemsChanged =
+			previousKeys !== null &&
+			(previousKeys.size !== availableAddOnKeys.size ||
+				[...availableAddOnKeys].some((key) => !previousKeys.has(key)));
+		prevAvailableKeysRef.current = availableAddOnKeys;

-		const availableAddOnKeys = new Set(filteredAddOns.map((addOn) => addOn.key));
-		// Filter and set selected views: add-ons that are both active and available
-		setSelectedViews(
-			filteredAddOns.filter(
-				(addOn) =>
-					activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
+		if (!initializedRef.current || hasAvailabilityItemsChanged) {
+			initializedRef.current = true;
+
+			const activeAddOnKeys = new Set(
+				Object.entries(ADD_ONS_KEYS_TO_QUERY_PATH)
+					.filter(([, path]) => hasValue(get(query, path)))
+					.map(([key]) => key),
+			);
+
+			// Initial seeding from query values on mount
+			setSelectedViews(
+				filteredAddOns.filter(
+					(addOn) =>
+						activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
+				),
+			);
+			return;
+		}
+
+		setSelectedViews((prev) =>
+			prev.filter((view) =>
+				filteredAddOns.some((addOn) => addOn.key === view.key),
 			),
 		);

 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [panelType, isListViewPanel, query]);
+	}, [panelType, isListViewPanel, query, showReduceTo]);

 	const handleOptionClick = (e: RadioChangeEvent): void => {
 		if (selectedViews.find((view) => view.key === e.target.value.key)) {
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx
@@ -1379,8 +1379,6 @@ function QuerySearch({
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
 											onRun(getCurrentExpression());
-										} else {
-											handleRunQuery();
 										}
 										return true;
 									},
--- a/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperatorEditor.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperatorEditor.tsx
@@ -410,8 +410,6 @@ function TraceOperatorEditor({
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
 											onRun(value);
-										} else {
-											handleRunQuery();
 										}
 										return true;
 									},
--- a/frontend/src/components/QueryBuilderV2/QueryV2/tests/QuerySearch.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/tests/QuerySearch.test.tsx
@@ -270,44 +270,6 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		await waitFor(() => expect(onRun).toHaveBeenCalled(), { timeout: 2000 });
 	});

-	it('calls handleRunQuery when Mod-Enter without onRun', async () => {
-		const mockedHandleRunQuery = handleRunQueryMock as jest.MockedFunction<
-			() => void
-		>;
-		mockedHandleRunQuery.mockClear();
-
-		render(
-			<QuerySearch
-				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
-				queryData={initialQueriesMap.logs.builder.queryData[0]}
-				dataSource={DataSource.LOGS}
-			/>,
-		);
-
-		// Wait for CodeMirror to initialize
-		await waitFor(() => {
-			const editor = document.querySelector(CM_EDITOR_SELECTOR);
-			expect(editor).toBeInTheDocument();
-		});
-
-		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
-		await userEvent.click(editor);
-		await userEvent.type(editor, SAMPLE_VALUE_TYPING_COMPLETE);
-
-		// Use fireEvent for keyboard shortcuts as userEvent might not work well with CodeMirror
-		const modKey = navigator.platform.includes('Mac') ? 'metaKey' : 'ctrlKey';
-		fireEvent.keyDown(editor, {
-			key: 'Enter',
-			code: 'Enter',
-			[modKey]: true,
-			keyCode: 13,
-		});
-
-		await waitFor(() => expect(mockedHandleRunQuery).toHaveBeenCalled(), {
-			timeout: 2000,
-		});
-	});
-
 	it('initializes CodeMirror with expression from queryData.filter.expression on mount', async () => {
 		const testExpression =
 			"http.status_code >= 500 AND service.name = 'frontend'";
--- a/frontend/src/components/QueryBuilderV2/QueryV2/tests/QueryV2.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/tests/QueryV2.test.tsx
@@ -3,14 +3,21 @@
 import '@testing-library/jest-dom';

 import { jest } from '@jest/globals';
+import { fireEvent, waitFor } from '@testing-library/react';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { render, screen } from 'tests/test-utils';
-import { Having, IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { render, screen, userEvent } from 'tests/test-utils';
+import {
+	Having,
+	IBuilderQuery,
+	Query,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
 import { UseQueryOperations } from 'types/common/operations.types';
 import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';

-import { QueryV2 } from '../QueryV2';
+import { QueryBuilderV2 } from '../../QueryBuilderV2';

 // Local mocks for domain-specific heavy child components
 jest.mock(
@@ -36,16 +43,87 @@ const mockedUseQueryOperations = jest.mocked(
 	useQueryOperations,
 ) as jest.MockedFunction<UseQueryOperations>;

-describe('QueryV2 - base render', () => {
+describe('QueryBuilderV2 + QueryV2 - base render', () => {
+	let handleRunQueryMock: jest.MockedFunction<() => void>;
+
 	beforeEach(() => {
 		const mockCloneQuery = jest.fn() as jest.MockedFunction<
 			(type: string, q: IBuilderQuery) => void
 		>;
+		handleRunQueryMock = jest.fn() as jest.MockedFunction<() => void>;
+		const baseQuery: IBuilderQuery = {
+			queryName: 'A',
+			dataSource: DataSource.LOGS,
+			aggregateOperator: '',
+			aggregations: [],
+			timeAggregation: '',
+			spaceAggregation: '',
+			temporality: '',
+			functions: [],
+			filter: undefined,
+			filters: { items: [], op: 'AND' },
+			groupBy: [],
+			expression: '',
+			disabled: false,
+			having: [] as Having[],
+			limit: 10,
+			stepInterval: null,
+			orderBy: [],
+			legend: 'A',
+		};
+
+		const currentQueryObj: Query = {
+			id: 'test',
+			unit: undefined,
+			queryType: EQueryType.CLICKHOUSE,
+			promql: [],
+			clickhouse_sql: [],
+			builder: {
+				queryData: [baseQuery],
+				queryFormulas: [],
+				queryTraceOperator: [],
+			},
+		};
+
+		const updateAllQueriesOperators: QueryBuilderContextType['updateAllQueriesOperators'] = (
+			q,
+		) => q;
+		const updateQueriesData: QueryBuilderContextType['updateQueriesData'] = (q) =>
+			q;

 		mockedUseQueryBuilder.mockReturnValue(({
-			// Only fields used by QueryV2
+			currentQuery: currentQueryObj,
+			stagedQuery: null,
+			lastUsedQuery: null,
+			setLastUsedQuery: jest.fn(),
+			supersetQuery: currentQueryObj,
+			setSupersetQuery: jest.fn(),
+			initialDataSource: null,
+			panelType: PANEL_TYPES.TABLE,
+			isEnabledQuery: true,
+			handleSetQueryData: jest.fn(),
+			handleSetTraceOperatorData: jest.fn(),
+			handleSetFormulaData: jest.fn(),
+			handleSetQueryItemData: jest.fn(),
+			handleSetConfig: jest.fn(),
+			removeQueryBuilderEntityByIndex: jest.fn(),
+			removeAllQueryBuilderEntities: jest.fn(),
+			removeQueryTypeItemByIndex: jest.fn(),
+			addNewBuilderQuery: jest.fn(),
+			addNewFormula: jest.fn(),
+			removeTraceOperator: jest.fn(),
+			addTraceOperator: jest.fn(),
 			cloneQuery: mockCloneQuery,
-			panelType: null,
+			addNewQueryItem: jest.fn(),
+			redirectWithQueryBuilderData: jest.fn(),
+			handleRunQuery: handleRunQueryMock,
+			resetQuery: jest.fn(),
+			handleOnUnitsChange: jest.fn(),
+			updateAllQueriesOperators,
+			updateQueriesData,
+			initQueryBuilderData: jest.fn(),
+			isStagedQueryUpdated: jest.fn(() => false),
+			isDefaultQuery: jest.fn(() => false),
 		} as unknown) as QueryBuilderContextType);

 		mockedUseQueryOperations.mockReturnValue({
@@ -71,40 +149,7 @@ describe('QueryV2 - base render', () => {
 	});

 	it('renders limit input when dataSource is logs', () => {
-		const baseQuery: IBuilderQuery = {
-			queryName: 'A',
-			dataSource: DataSource.LOGS,
-			aggregateOperator: '',
-			aggregations: [],
-			timeAggregation: '',
-			spaceAggregation: '',
-			temporality: '',
-			functions: [],
-			filter: undefined,
-			filters: { items: [], op: 'AND' },
-			groupBy: [],
-			expression: '',
-			disabled: false,
-			having: [] as Having[],
-			limit: 10,
-			stepInterval: null,
-			orderBy: [],
-			legend: 'A',
-		};
-
-		render(
-			<QueryV2
-				index={0}
-				isAvailableToDisable
-				query={baseQuery}
-				version="v4"
-				onSignalSourceChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
-				signalSourceChangeEnabled={false}
-				queriesCount={1}
-				showTraceOperator={false}
-				hasTraceOperator={false}
-			/>,
-		);
+		render(<QueryBuilderV2 panelType={PANEL_TYPES.TABLE} version="v4" />);

 		// Ensure the Limit add-on input is present and is of type number
 		const limitInput = screen.getByPlaceholderText(
@@ -115,4 +160,43 @@ describe('QueryV2 - base render', () => {
 		expect(limitInput).toHaveAttribute('name', 'limit');
 		expect(limitInput).toHaveAttribute('data-testid', 'input-Limit');
 	});
+
+	it('Cmd+Enter on an input triggers handleRunQuery via container handler', async () => {
+		render(<QueryBuilderV2 panelType={PANEL_TYPES.TABLE} version="v4" />);
+
+		const limitInput = screen.getByPlaceholderText('Enter limit');
+		fireEvent.keyDown(limitInput, {
+			key: 'Enter',
+			code: 'Enter',
+			metaKey: true,
+		});
+
+		expect(handleRunQueryMock).toHaveBeenCalled();
+
+		const legendInput = screen.getByPlaceholderText('Write legend format');
+		fireEvent.keyDown(legendInput, {
+			key: 'Enter',
+			code: 'Enter',
+			metaKey: true,
+		});
+
+		expect(handleRunQueryMock).toHaveBeenCalled();
+
+		const CM_EDITOR_SELECTOR = '.cm-editor .cm-content';
+		// Wait for CodeMirror to initialize
+		await waitFor(() => {
+			const editor = document.querySelector(CM_EDITOR_SELECTOR);
+			expect(editor).toBeInTheDocument();
+		});
+
+		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
+		await userEvent.click(editor);
+		fireEvent.keyDown(editor, {
+			key: 'Enter',
+			code: 'Enter',
+			metaKey: true,
+		});
+
+		expect(handleRunQueryMock).toHaveBeenCalled();
+	});
 });
--- a/frontend/src/constants/query.ts
+++ b/frontend/src/constants/query.ts
@@ -53,4 +53,5 @@ export enum QueryParams {
 	variables = 'variables',
 	version = 'version',
 	showNewCreateAlertsPage = 'showNewCreateAlertsPage',
+	source = 'source',
 }
--- a/frontend/src/constants/queryBuilder.ts
+++ b/frontend/src/constants/queryBuilder.ts
@@ -301,6 +301,7 @@ export const initialQueryState: QueryState = {
 	builder: initialQueryBuilderData,
 	clickhouse_sql: [initialClickHouseData],
 	promql: [initialQueryPromQLData],
+	unit: '',
 };

 const initialQueryWithType: Query = {
--- a/frontend/src/container/DashboardContainer/ComponentsSlider/ComponentSlider.styles.scss
+++ b/frontend/src/container/DashboardContainer/ComponentsSlider/ComponentSlider.styles.scss
--- a/frontend/src/container/DashboardContainer/ComponentsSlider/constants.ts
+++ b/frontend/src/container/DashboardContainer/ComponentsSlider/constants.ts
--- a/frontend/src/container/DashboardContainer/ComponentsSlider/index.tsx
+++ b/frontend/src/container/DashboardContainer/ComponentsSlider/index.tsx
--- a/frontend/src/container/DashboardContainer/ComponentsSlider/menuItems.tsx
+++ b/frontend/src/container/DashboardContainer/ComponentsSlider/menuItems.tsx
--- a/frontend/src/container/DashboardContainer/ComponentsSlider/styles.ts
+++ b/frontend/src/container/DashboardContainer/ComponentsSlider/styles.ts
--- a/frontend/src/container/DashboardContainer/DashboardDescription/DashboardName/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/DashboardName/index.tsx
--- a/frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss
@@ -1,47 +1,3 @@
-.settings-container-root {
-	.ant-drawer-wrapper-body {
-		border-left: 1px solid var(--bg-slate-500);
-		background: var(--bg-ink-400);
-		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-		.ant-drawer-header {
-			height: 48px;
-			border-bottom: 1px solid var(--bg-slate-500);
-			padding: 14px 14px 14px 11px;
-
-			.ant-drawer-header-title {
-				gap: 16px;
-
-				.ant-drawer-title {
-					color: var(--bg-vanilla-400);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-					padding-left: 16px;
-					border-left: 1px solid #161922;
-				}
-
-				.ant-drawer-close {
-					height: 16px;
-					width: 16px;
-					margin-inline-end: 0px !important;
-				}
-			}
-		}
-
-		.ant-drawer-body {
-			padding: 16px;
-
-			&::-webkit-scrollbar {
-				width: 0.1rem;
-			}
-		}
-	}
-}
-
 .dashboard-description-container {
 	box-shadow: none;
 	border: none;
@@ -576,28 +532,6 @@
 }

 .lightMode {
-	.settings-container-root {
-		.ant-drawer-wrapper-body {
-			border-left: 1px solid var(--bg-vanilla-300);
-			background: var(--bg-vanilla-100);
-
-			.ant-drawer-header {
-				border-bottom: 1px solid var(--bg-vanilla-300);
-
-				.ant-drawer-header-title {
-					.ant-drawer-title {
-						color: var(--bg-ink-400);
-						border-left: 1px solid var(--bg-vanilla-300);
-					}
-
-					.ant-drawer-close {
-						color: var(--bg-ink-300);
-					}
-				}
-			}
-		}
-	}
-
 	.dashboard-description-container {
 		color: var(--bg-ink-400);

--- a/frontend/src/container/DashboardContainer/DashboardDescription/SettingsDrawer/SettingsDrawer.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/SettingsDrawer/SettingsDrawer.styles.scss
@@ -0,0 +1,67 @@
+.settings-container-root {
+	.ant-drawer-wrapper-body {
+		border-left: 1px solid var(--bg-slate-500);
+		background: var(--bg-ink-400);
+		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+
+		.ant-drawer-header {
+			height: 48px;
+			border-bottom: 1px solid var(--bg-slate-500);
+			padding: 14px 14px 14px 11px;
+
+			.ant-drawer-header-title {
+				gap: 16px;
+
+				.ant-drawer-title {
+					color: var(--bg-vanilla-400);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+					padding-left: 16px;
+					border-left: 1px solid var(--bg-slate-500);
+				}
+
+				.ant-drawer-close {
+					height: 16px;
+					width: 16px;
+					margin-inline-end: 0px !important;
+				}
+			}
+		}
+
+		.ant-drawer-body {
+			padding: 16px;
+
+			&::-webkit-scrollbar {
+				width: 0.1rem;
+			}
+		}
+	}
+}
+
+.lightMode {
+	.settings-container-root {
+		.ant-drawer-wrapper-body {
+			border-left: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-100);
+
+			.ant-drawer-header {
+				border-bottom: 1px solid var(--bg-vanilla-300);
+
+				.ant-drawer-header-title {
+					.ant-drawer-title {
+						color: var(--bg-ink-400);
+						border-left: 1px solid var(--bg-vanilla-300);
+					}
+
+					.ant-drawer-close {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+	}
+}
--- a/frontend/src/container/DashboardContainer/DashboardDescription/SettingsDrawer/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/SettingsDrawer/index.tsx
@@ -0,0 +1,34 @@
+import './SettingsDrawer.styles.scss';
+
+import { Drawer } from 'antd';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { memo, PropsWithChildren, ReactElement } from 'react';
+
+type SettingsDrawerProps = PropsWithChildren<{
+	drawerTitle: string;
+	isOpen: boolean;
+	onClose: () => void;
+}>;
+
+function SettingsDrawer({
+	children,
+	drawerTitle,
+	isOpen,
+	onClose,
+}: SettingsDrawerProps): JSX.Element {
+	return (
+		<Drawer
+			title={drawerTitle}
+			placement="right"
+			width="50%"
+			onClose={onClose}
+			open={isOpen}
+			rootClassName="settings-container-root"
+		>
+			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}
+			<OverlayScrollbar>{children as ReactElement}</OverlayScrollbar>
+		</Drawer>
+	);
+}
+
+export default memo(SettingsDrawer);
--- a/frontend/src/container/DashboardContainer/DashboardDescription/ShareModal.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/ShareModal.tsx
--- a/frontend/src/container/DashboardContainer/DashboardDescription/tests/DashboardDescription.test.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/tests/DashboardDescription.test.tsx
--- a/frontend/src/container/DashboardContainer/DashboardDescription/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/index.tsx
@@ -12,6 +12,7 @@ import {
 	Typography,
 } from 'antd';
 import logEvent from 'api/common/logEvent';
+import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -40,7 +41,7 @@ import {
 import { useAppContext } from 'providers/App/App';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { sortLayout } from 'providers/Dashboard/util';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { FullScreenHandle } from 'react-full-screen';
 import { Layout } from 'react-grid-layout';
 import { useTranslation } from 'react-i18next';
@@ -52,9 +53,11 @@ import { ComponentTypes } from 'utils/permission';
 import { v4 as uuid } from 'uuid';

 import DashboardGraphSlider from '../ComponentsSlider';
+import DashboardSettings from '../DashboardSettings';
 import { Base64Icons } from '../DashboardSettings/General/utils';
 import DashboardVariableSelection from '../DashboardVariablesSelection';
 import SettingsDrawer from './SettingsDrawer';
+import { VariablesSettingsTab } from './types';
 import { DEFAULT_ROW_NAME, downloadObjectAsJson } from './utils';

 interface DashboardDescriptionProps {
@@ -101,6 +104,11 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		handleDashboardLockToggle,
 	} = useDashboard();

+	const variablesSettingsTabHandle = useRef<VariablesSettingsTab>(null);
+	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] = useState<boolean>(
+		false,
+	);
+
 	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();

 	const isPublicDashboardEnabled = isCloudUser || isEnterpriseSelfHostedUser;
@@ -340,6 +348,18 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		publicDashboardResponse?.data,
 	]);

+	const onConfigureClick = useCallback((): void => {
+		setIsSettingsDrawerOpen(true);
+	}, []);
+
+	const onSettingsDrawerClose = useCallback((): void => {
+		setIsSettingsDrawerOpen(false);
+		// good use case for a state library like Jotai
+		if (variablesSettingsTabHandle.current) {
+			variablesSettingsTabHandle.current.resetState();
+		}
+	}, []);
+
 	return (
 		<Card className="dashboard-description-container">
 			<div className="dashboard-header">
@@ -504,7 +524,26 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 						/>
 					</Popover>
 					{!isDashboardLocked && editDashboard && (
-						<SettingsDrawer drawerTitle="Dashboard Configuration" />
+						<>
+							<Button
+								type="text"
+								className="configure-button"
+								icon={<ConfigureIcon />}
+								data-testid="show-drawer"
+								onClick={onConfigureClick}
+							>
+								Configure
+							</Button>
+							<SettingsDrawer
+								drawerTitle="Dashboard Configuration"
+								isOpen={isSettingsDrawerOpen}
+								onClose={onSettingsDrawerClose}
+							>
+								<DashboardSettings
+									variablesSettingsTabHandle={variablesSettingsTabHandle}
+								/>
+							</SettingsDrawer>
+						</>
 					)}
 					{!isDashboardLocked && addPanelPermission && (
 						<Button
--- a/frontend/src/container/DashboardContainer/DashboardDescription/types.ts
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/types.ts
@@ -0,0 +1,7 @@
+import { MutableRefObject } from 'react';
+
+export interface VariablesSettingsTab {
+	resetState: () => void;
+}
+
+export type VariablesSettingsTabHandle = MutableRefObject<VariablesSettingsTab | null>;
--- a/frontend/src/container/DashboardContainer/DashboardDescription/utils.ts
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/utils.ts
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettings.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettings.styles.scss
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/DynamicVariable.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/DynamicVariable.styles.scss
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/DynamicVariable.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/DynamicVariable.tsx
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/test/DynamicVariable.test.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/test/DynamicVariable.test.tsx
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.test.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.test.tsx
@@ -1,6 +1,12 @@
 /* eslint-disable sonarjs/no-identical-functions */
 /* eslint-disable sonarjs/no-duplicate-string */
-import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
+import {
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+} from 'tests/test-utils';
 import {
 	IDashboardVariable,
 	TSortVariableValuesType,
@@ -639,4 +645,186 @@ describe('VariableItem Component', () => {
 			await expectCircularDependencyError();
 		});
 	});
+
+	describe('Textbox Variable Default Value Handling', () => {
+		test('saves textbox variable with defaultValue and selectedValue set to textboxValue', async () => {
+			const user = userEvent.setup();
+			const textboxVariable: IDashboardVariable = {
+				id: TEST_VAR_IDS.VAR1,
+				name: TEST_VAR_NAMES.VAR1,
+				description: 'Test Textbox Variable',
+				type: 'TEXTBOX',
+				textboxValue: 'my-default-value',
+				...VARIABLE_DEFAULTS,
+				order: 0,
+			};
+
+			renderVariableItem(textboxVariable);
+
+			// Click save button
+			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
+			await user.click(saveButton);
+
+			// Verify that onSave was called with defaultValue and selectedValue equal to textboxValue
+			expect(onSave).toHaveBeenCalledWith(
+				expect.anything(),
+				expect.objectContaining({
+					type: 'TEXTBOX',
+					textboxValue: 'my-default-value',
+					defaultValue: 'my-default-value',
+					selectedValue: 'my-default-value',
+				}),
+				expect.anything(),
+			);
+		});
+
+		test('saves textbox variable with empty values when textboxValue is empty', async () => {
+			const user = userEvent.setup();
+			const textboxVariable: IDashboardVariable = {
+				id: TEST_VAR_IDS.VAR1,
+				name: TEST_VAR_NAMES.VAR1,
+				description: 'Test Textbox Variable',
+				type: 'TEXTBOX',
+				textboxValue: '',
+				...VARIABLE_DEFAULTS,
+				order: 0,
+			};
+
+			renderVariableItem(textboxVariable);
+
+			// Click save button
+			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
+			await user.click(saveButton);
+
+			// Verify that onSave was called with empty defaultValue and selectedValue
+			expect(onSave).toHaveBeenCalledWith(
+				expect.anything(),
+				expect.objectContaining({
+					type: 'TEXTBOX',
+					textboxValue: '',
+					defaultValue: '',
+					selectedValue: '',
+				}),
+				expect.anything(),
+			);
+		});
+
+		test('updates textbox defaultValue and selectedValue when user changes textboxValue input', async () => {
+			const user = userEvent.setup();
+			const textboxVariable: IDashboardVariable = {
+				id: TEST_VAR_IDS.VAR1,
+				name: TEST_VAR_NAMES.VAR1,
+				description: 'Test Textbox Variable',
+				type: 'TEXTBOX',
+				textboxValue: 'initial-value',
+				...VARIABLE_DEFAULTS,
+				order: 0,
+			};
+
+			renderVariableItem(textboxVariable);
+
+			// Change the textbox value
+			const textboxInput = screen.getByPlaceholderText(
+				'Enter a default value (if any)...',
+			);
+			await user.clear(textboxInput);
+			await user.type(textboxInput, 'updated-value');
+
+			// Click save button
+			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
+			await user.click(saveButton);
+
+			// Verify that onSave was called with the updated defaultValue and selectedValue
+			expect(onSave).toHaveBeenCalledWith(
+				expect.anything(),
+				expect.objectContaining({
+					type: 'TEXTBOX',
+					textboxValue: 'updated-value',
+					defaultValue: 'updated-value',
+					selectedValue: 'updated-value',
+				}),
+				expect.anything(),
+			);
+		});
+
+		test('non-textbox variables use variableDefaultValue instead of textboxValue', async () => {
+			const user = userEvent.setup();
+			const queryVariable: IDashboardVariable = {
+				id: TEST_VAR_IDS.VAR1,
+				name: TEST_VAR_NAMES.VAR1,
+				description: 'Test Query Variable',
+				type: 'QUERY',
+				queryValue: 'SELECT * FROM test',
+				textboxValue: 'should-not-be-used',
+				defaultValue: 'query-default-value',
+				...VARIABLE_DEFAULTS,
+				order: 0,
+			};
+
+			renderVariableItem(queryVariable);
+
+			// Click save button
+			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
+			await user.click(saveButton);
+
+			// Verify that onSave was called with defaultValue not being textboxValue
+			expect(onSave).toHaveBeenCalledWith(
+				expect.anything(),
+				expect.objectContaining({
+					type: 'QUERY',
+					defaultValue: 'query-default-value',
+				}),
+				expect.anything(),
+			);
+
+			// Verify that defaultValue is NOT the textboxValue
+			const savedVariable = onSave.mock.calls[0][1];
+			expect(savedVariable.defaultValue).not.toBe('should-not-be-used');
+		});
+
+		test('switching to textbox type sets defaultValue and selectedValue correctly on save', async () => {
+			const user = userEvent.setup();
+			// Start with a QUERY variable
+			const queryVariable: IDashboardVariable = {
+				id: TEST_VAR_IDS.VAR1,
+				name: TEST_VAR_NAMES.VAR1,
+				description: 'Test Variable',
+				type: 'QUERY',
+				queryValue: 'SELECT * FROM test',
+				...VARIABLE_DEFAULTS,
+				order: 0,
+			};
+
+			renderVariableItem(queryVariable);
+
+			// Switch to TEXTBOX type
+			const textboxButton = findButtonByText(TEXT.TEXTBOX);
+			expect(textboxButton).toBeInTheDocument();
+			if (textboxButton) {
+				await user.click(textboxButton);
+			}
+
+			// Enter a default value in the textbox input
+			const textboxInput = screen.getByPlaceholderText(
+				'Enter a default value (if any)...',
+			);
+			await user.type(textboxInput, 'new-textbox-default');
+
+			// Click save button
+			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
+			await user.click(saveButton);
+
+			// Verify that onSave was called with type TEXTBOX and correct defaultValue and selectedValue
+			expect(onSave).toHaveBeenCalledWith(
+				expect.anything(),
+				expect.objectContaining({
+					type: 'TEXTBOX',
+					textboxValue: 'new-textbox-default',
+					defaultValue: 'new-textbox-default',
+					selectedValue: 'new-textbox-default',
+				}),
+				expect.anything(),
+			);
+		});
+	});
 });
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx
@@ -320,6 +320,10 @@ function VariableItem({
 	]);

 	const variableValue = useMemo(() => {
+		if (queryType === 'TEXTBOX') {
+			return variableTextboxValue;
+		}
+
 		if (variableMultiSelect) {
 			let value = variableData.selectedValue;
 			if (isEmpty(value)) {
@@ -352,6 +356,8 @@ function VariableItem({
 		variableData.selectedValue,
 		variableData.showALLOption,
 		variableDefaultValue,
+		variableTextboxValue,
+		queryType,
 		previewValues,
 	]);

@@ -367,13 +373,10 @@ function VariableItem({
 			multiSelect: variableMultiSelect,
 			showALLOption: queryType === 'DYNAMIC' ? true : variableShowALLOption,
 			sort: variableSortType,
-			...(queryType === 'TEXTBOX' && {
-				selectedValue: (variableData.selectedValue ||
-					variableTextboxValue) as never,
-			}),
-			...(queryType !== 'TEXTBOX' && {
-				defaultValue: variableDefaultValue as never,
-			}),
+			// the reason we need to do this is because defaultValues are treated differently in case of textbox type
+			// They are the exact same and not like the other types where defaultValue is a separate field
+			defaultValue:
+				queryType === 'TEXTBOX' ? variableTextboxValue : variableDefaultValue,
 			modificationUUID: generateUUID(),
 			id: variableData.id || generateUUID(),
 			order: variableData.order,
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/WidgetSelector.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/WidgetSelector.tsx
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles.ts
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles.ts
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/addTagFiltersToDashboard.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/addTagFiltersToDashboard.tsx
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx
@@ -14,7 +14,8 @@ import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { Button, Modal, Row, Space, Table, Typography } from 'antd';
 import { RowProps } from 'antd/lib';
-import { convertVariablesToDbFormat } from 'container/NewDashboard/DashboardVariablesSelection/util';
+import { VariablesSettingsTabHandle } from 'container/DashboardContainer/DashboardDescription/types';
+import { convertVariablesToDbFormat } from 'container/DashboardContainer/DashboardVariablesSelection/util';
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useNotifications } from 'hooks/useNotifications';
@@ -77,10 +78,10 @@ function TableRow({ children, ...props }: RowProps): JSX.Element {
 	);
 }

-function VariablesSetting({
-	variableViewModeRef,
+function VariablesSettings({
+	variablesSettingsTabHandle,
 }: {
-	variableViewModeRef: React.MutableRefObject<(() => void) | undefined>;
+	variablesSettingsTabHandle: VariablesSettingsTabHandle;
 }): JSX.Element {
 	const variableToDelete = useRef<IDashboardVariable | null>(null);
 	const [deleteVariableModal, setDeleteVariableModal] = useState(false);
@@ -126,11 +127,13 @@ function VariablesSetting({
 	};

 	useEffect(() => {
-		if (variableViewModeRef) {
-			// eslint-disable-next-line no-param-reassign
-			variableViewModeRef.current = onDoneVariableViewMode;
-		}
-	}, [variableViewModeRef]);
+		if (!variablesSettingsTabHandle) return;
+
+		// eslint-disable-next-line no-param-reassign
+		variablesSettingsTabHandle.current = {
+			resetState: onDoneVariableViewMode,
+		};
+	}, [variablesSettingsTabHandle]);

 	const updateMutation = useUpdateDashboard();

@@ -510,4 +513,4 @@ function VariablesSetting({
 	);
 }

-export default VariablesSetting;
+export default VariablesSettings;
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/types.ts
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/types.ts
--- a/frontend/src/container/DashboardContainer/DashboardSettings/General/AddTags/AddTags.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/General/AddTags/AddTags.styles.scss
--- a/frontend/src/container/DashboardContainer/DashboardSettings/General/AddTags/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/General/AddTags/index.tsx
--- a/frontend/src/container/DashboardContainer/DashboardSettings/General/AddTags/styles.ts
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/General/AddTags/styles.ts
--- a/frontend/src/container/DashboardContainer/DashboardSettings/General/Description/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/General/Description/index.tsx
--- a/frontend/src/container/DashboardContainer/DashboardSettings/General/Description/styles.ts
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/General/Description/styles.ts
--- a/frontend/src/container/DashboardContainer/DashboardSettings/General/GeneralSettings.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/General/GeneralSettings.styles.scss
--- a/frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx
@@ -1,7 +1,7 @@
 import './GeneralSettings.styles.scss';

 import { Col, Input, Select, Space, Typography } from 'antd';
-import AddTags from 'container/NewDashboard/DashboardSettings/General/AddTags';
+import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddTags';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { isEqual } from 'lodash-es';
 import { Check, X } from 'lucide-react';
--- a/frontend/src/container/DashboardContainer/DashboardSettings/General/styles.ts
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/General/styles.ts
--- a/frontend/src/container/DashboardContainer/DashboardSettings/General/utils.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/General/utils.tsx
--- a/frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboard.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/PublicDashboard.styles.scss
--- a/frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/tests/PublicDashboard.test.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/tests/PublicDashboard.test.tsx
--- a/frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx
--- a/frontend/src/container/DashboardContainer/DashboardSettings/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/index.tsx
@@ -6,14 +6,15 @@ import { Braces, Globe, Table } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';

+import { VariablesSettingsTabHandle } from '../DashboardDescription/types';
+import DashboardVariableSettings from './DashboardVariableSettings';
 import GeneralDashboardSettings from './General';
 import PublicDashboardSetting from './PublicDashboard';
-import VariablesSetting from './Variables';

-function DashboardSettingsContent({
-	variableViewModeRef,
+function DashboardSettings({
+	variablesSettingsTabHandle,
 }: {
-	variableViewModeRef: React.MutableRefObject<(() => void) | undefined>;
+	variablesSettingsTabHandle: VariablesSettingsTabHandle;
 }): JSX.Element {
 	const { user } = useAppContext();
 	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();
@@ -63,7 +64,11 @@ function DashboardSettingsContent({
 				</Button>
 			),
 			key: 'variables',
-			children: <VariablesSetting variableViewModeRef={variableViewModeRef} />,
+			children: (
+				<DashboardVariableSettings
+					variablesSettingsTabHandle={variablesSettingsTabHandle}
+				/>
+			),
 		},
 		...(enablePublicDashboard ? [publicDashboardItem] : []),
 	];
@@ -71,4 +76,4 @@ function DashboardSettingsContent({
 	return <Tabs items={items} animated className="settings-tabs" />;
 }

-export default DashboardSettingsContent;
+export default DashboardSettings;
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.styles.scss
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.styles.scss
@@ -25,6 +25,12 @@
 		}
 	}

+	&.focused {
+		.variable-value {
+			outline: 1px solid var(--bg-robin-400);
+		}
+	}
+
 	.variable-value {
 		display: flex;
 		min-width: 120px;
@@ -93,6 +99,12 @@

 .lightMode {
 	.variable-item {
+		&.focused {
+			.variable-value {
+				border: 1px solid var(--bg-robin-400);
+			}
+		}
+
 		.variable-name {
 			border: 1px solid var(--bg-vanilla-300);
 			background: var(--bg-vanilla-100);
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx
@@ -94,7 +94,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 				cycleNodes,
 			});
 		}
-	}, [setVariablesToGetUpdated, variables, variablesTableData]);
+	}, [variables, variablesTableData]);

 	// this handles the case where the dependency order changes i.e. variable list updated via creation or deletion etc. and we need to refetch the variables
 	// also trigger when the global time changes
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
grandwizard28	6bfc4b4dff	feat: move fields api to openapi spec	2026-01-20 19:04:37 +05:30
Pandey	445b0cace8	chore: add codeowners for scaffold (#10055 )	2026-01-20 12:19:14 +00:00
Pandey	132f10f8a3	feat(binding): add support for query params (#10053 ) - add support for query params in the binding package.	2026-01-20 11:59:12 +00:00
Srikanth Chekuri	14011bc277	fix: do not sort in descending locally if the other is explicitly spe… (#10033 )	2026-01-20 11:17:08 +00:00
aniketio-ctrl	f17a332c23	feat(license-section): add section to view license key (#10039 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * feat(license-section): added section to view license key * feat(license-key): add license key page * feat(license-section): added section to view license key * feat(license-section): added section to view license key * feat(license-section): added section to view license key * feat(license-section): added section to view license key * feat(license-section): resoved comments * feat(license-section): resoved fmt error	2026-01-20 16:05:57 +05:30
Aditya Singh	5ae7a464e6	Fix Cmd/ctrl + Enter in qb to run query (#10048 ) * feat: cmd enter in qb * feat: cnd enter test added * feat: update test case * feat: update test case * feat: minor refactor --------- Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>	2026-01-20 13:30:54 +05:30
Pandey	51c3628f6e	fix(signoz): remove version check at the beginning (#10046 )	2026-01-20 06:56:06 +00:00
Aditya Singh	6a69076828	Add attribute action in common col of span details drawer (#10017 ) * feat: add attribute action in common col of span details drawer * feat: added test case	2026-01-20 05:44:31 +00:00
Aditya Singh	edd04e2f07	fix: fix auto collapse fields when emptied (#9988 ) * fix: fix auto collapse fields when emptied * fix: revert mocks * fix: minor fix * fix: add check for key count change to setSelectedView * feat: revert change * feat: instead of count check actual keys	2026-01-20 05:32:13 +00:00
Srikanth Chekuri	ee734cf78c	chore: return original error message with hints for invalid promql query (#10034 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details one step towards better experience for https://github.com/SigNoz/signoz/issues/9764	2026-01-20 03:04:59 +05:30
Karan Balani	6d137bcdff	feat: idp attributes mapping (#9841 )	2026-01-19 22:27:21 +05:30
Ashwin Bhatkal	444161671d	fix: query variable referencing custom variable (#10023 ) * fix: custom variable to query mapping * chore: add test	2026-01-19 13:52:58 +00:00
Ashwin Bhatkal	31e9e896ec	fix: dashboard - textbox default variable not working (#9843 )	2026-01-19 18:23:17 +05:30
SagarRajput-7	325974292f	feat: auth revamp flow (#9901 ) * feat: auth revamp base setup * feat: auth revamp signin changes * feat: auth revamp signup changes * feat: auth revamp reset password changes * feat: auth revamp light mode changes * feat: clean up and added get help link * feat: cleanup and addressed comments * feat: cleanup * feat: comment addressed * feat: auth revamp for onboarding flow (#9915) * feat: auth revamp for onboarding flow * feat: updated invite team member step * feat: updated light mode * feat: comment addressed * feat: added onboarding flow test cases * feat: fixed feedbacks * feat: resolved comments and refactoring * feat: resolved comments and refactoring * fix: svg import fix * feat: added test cases for the new auth flow (#9914) * feat: added test cases for the new auth flow * feat: updated test cases * feat: updated test cases * fix: updated test cases * fix: updated test cases * fix: use error content for auth revamp error * feat: refactor and cleanup * feat: refactor and cleanup * fix: add shake animation and light mode fix * feat: feedback resolved * feat: feedback resolved * feat: updated test cases * feat: feedback resolved * feat: shake animation update	2026-01-19 13:40:37 +05:30
Vishal Sharma	7c1a531d01	Add context7.json with URL and public key (#10037 )	2026-01-19 11:35:37 +05:30
Vikrant Gupta	5a45532a72	chore: update codeowners file (#10031 )	2026-01-18 22:00:38 +05:30
Srikanth Chekuri	e9501d2e0f	test(integration): add cumulative counter rate tests (#9976 )	2026-01-18 16:13:41 +05:30
Srikanth Chekuri	c306e66bcd	chore: update CODEOWNERS (#10028 )	2026-01-18 15:42:46 +05:30
Yunus M	767a0cc28e	chore: improve pull request template clarity and visibility (#10021 )	2026-01-16 16:17:17 +00:00
Ashwin Bhatkal	4f9efcc133	chore: remove airbnb from ESLint, update prettier rules and update VS Code settings (#10013 ) * chore: remove airbnb from ESLint, update prettier rules and update VS Code settings * fix: lint errors	2026-01-16 12:05:23 +00:00
Amlan Kumar Nandy	bf2dd612e0	chore: fill y axis unit in alerts coming from dashboards (#9982 )	2026-01-16 09:37:16 +00:00
Aditya Singh	d3f15022a4	fix: overflowing tag input on antd (#10018 )	2026-01-16 09:15:22 +00:00
Pandey	a5c021e96c	fix(kafka): fix nil pointer error in evaluation api (#10015 )	2026-01-16 02:24:20 +05:30
Abhi kumar	8b9fcae0cb	fix: added layout fix for changelog modal (#10012 )	2026-01-15 12:30:10 +00:00
Abhi kumar	e75abcb108	Fix/animation offload to cpu (#9961 ) * fix: transition is getting offloaded to cpu because gpu can't handle it in composition * chore: changed transition from all to transform only	2026-01-15 13:43:44 +05:30
primus-bot[bot]	ffa15f9ec1	chore(release): bump to v0.107.0 (#10007 ) Co-authored-by: primus-bot[bot] <171087277+primus-bot[bot]@users.noreply.github.com>	2026-01-15 12:18:52 +05:30
Ishan	87562f5387	feat: onGroupBy - show timeseries panel - #3403 (#9921 ) * feat: onGroupBy - show timeseries * feat: updated testcases for tableview actions * feat: updated pipeline file to remove groupBy as not used * feat: updated better code checks * feat: updated better code checks * feat: updated tableview actions to update query * feat: updated types and test cases * feat: updated dataType (noramlized)	2026-01-15 08:53:08 +05:30
Ishan	11a7512a25	feat: trace id pinned (#9981 )	2026-01-13 19:59:14 +05:30
Yunus M	f925a15f30	feat: improve date range selection ux (#9994 ) * feat: improve date range selection ux	2026-01-13 13:55:57 +00:00
Ashwin Bhatkal	a3fe2c2589	chore: rename Variables folder to DashboardVariableSettings (#9990 ) * chore: rename Variables folder to DashboardVariableSettings * fix: fix tests	2026-01-13 11:25:42 +00:00
Aditya Singh	2719c9b6a7	Fix: Make exists in small case recognise as valid non value op (#9989 ) * fix: make exists in small case recognise as valid non value op * fix: lint fix	2026-01-13 10:56:38 +00:00
Ashwin Bhatkal	b4282be3ac	chore: make settings drawer reusable (#9985 ) * chore: make settings drawer reusable * chore: clean up styles as well * fix: resolve comments * chore: trigger build * chore: resolve comments	2026-01-13 09:33:05 +00:00
Ashwin Bhatkal	15fe3a7163	fix: close button when importing dashboard json (#9987 ) * fix: close button when importing dashboard json * fix: remove x icon	2026-01-13 05:59:11 +00:00
Amlan Kumar Nandy	30b98582b4	chore: fix undefined labels error in alerts (#9589 ) * chore: fix undefined labels error in alerts * chore: fix CI * chore: minor fix * chore: add tests * chore: additional changes * chore: additonal cleanup * chore: update tests * chore: update mock * chore: update checks --------- Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>	2026-01-13 05:27:16 +00:00
Vikrant Gupta	99b9e27bca	fix(dashboard): delete dashboard shouldn't break on license check (#9984 ) * fix(dashboard): delete dashboard shouldn't break on license check * fix(dashboard): add integration tests * fix(dashboard): add integration tests * fix(dashboard): remove license check from public dashboard delete * fix(dashboard): update delete public	2026-01-12 23:40:54 +05:30
Yunus M	7e72f501a7	feat: Improved UX for Date Time Picker (#9944 ) * feat: enable inline edit for selected time * feat: handle absolute and relative time formats * feat: support epoch timeranges * feat: match styles for datetime shorthand pill * feat: handle time range error flows * feat: hide last refreshed for custom time ranges * feat: cleanup * feat: use calendar range for custom date time picker * fix: update tests to check for run query rather than stage & run query * feat: pass modalStartTime & modalEndTime in cases where isModalSelection is true * feat: pass minTime & maxTime for CustomPicker in topnav component * fix: add safety check for selected time * feat: show recently use custom time ranges * fix: cancel query button light mode text color * feat: move calendar content to a container * feat: address review comments	2026-01-12 21:18:58 +05:30
Ashwin Bhatkal	97d7b81a73	chore: rename NewDashboard to DashboardContainer (#9980 ) * chore: rename NewDashboard to DashboardContainer * chore: resolve comments and fix tests	2026-01-12 15:25:43 +05:30
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#fff" d="m9.05 20.616 13.968-.178-.06-9.283-14.417.178z"/><path fill="#d80d1a" d="m10.165 20.736-1.302-2.253.127-5.209 5.133 7.491z"/><path fill="#1d86fa" d="m16.72 20.616-6.416-9.401 4.298.06 6.536 9.372z"/><path fill="#d80d1a" d="m22.958 19.125-5.58-7.88 4.118.12 2.12 2.956z"/><path fill="#a1d2d6" d="m8.75 11.722 14.208-.09-.098-.86-14.14.114zM8.99 21.214l14.237-.18-.329-.864-14.237.177z"/><path fill="#c8c8c8" d="M22.772 21.163c.122.147.882.175.882.175s.444.825 1.41.707c.865-.106 1.2-.829 1.2-.829s1.463-.338 2.259-1.464c.846-1.2.882-2.383.882-4.076 0-1.836-.143-3.088-1.076-4.076-1.073-1.134-2.186-1.218-2.186-1.218s-.39-.654-1.271-.636c-.883.018-1.218.74-1.218.74s-.704.151-.882.282c-.091.067-.067 2.703-.054 5.294.012 2.5-.042 4.988.054 5.1"/><path fill="#858585" d="M28.541 16.538c.353.018.345-1.851.036-3.229-.354-1.57-1.694-2.082-1.8-1.993s-.071 1.675.017 1.764c.09.09.918.494 1.2 1.182.283.69.278 2.262.547 2.276M25.299 21.99l-.056-12.213s.258.04.509.207c.242.162.389.395.389.395l.127 10.828s-.176.325-.35.465c-.381.309-.62.318-.62.318"/><path fill="#e1e0e0" d="m24.692 22.043-.157-12.255s-.323.04-.565.258c-.204.182-.318.44-.318.44l.107 11.01s.164.223.353.354c.23.157.58.193.58.193"/><path fill="#c8c8c8" d="M9.13 21.32c.158-.142.036-10.216-.053-10.392-.089-.175-.829-1.069-2.01-1-1.167.069-1.536.876-1.536.876s-1.169.155-2.065 1.5c-.635.954-.82 2.19-.806 3.74.015 1.712.12 3.319 1.142 4.341.982.982 1.94 1.022 1.94 1.022s.267.87 1.573.87c1.289.002 1.816-.956 1.816-.956"/><path fill="#858585" d="M7.548 22.274s-.373-1.907-.427-6.158.256-6.186.256-6.186.258-.017.504.067c.276.093.458.24.458.24s-.244 3.656-.227 5.879c.018 2.222.37 5.85.37 5.85s-.265.153-.423.206c-.164.051-.51.102-.51.102"/><path fill="#e1e0e0" d="M6.858 22.234s-.48-2.45-.533-6.032.157-6.163.157-6.163-.422.127-.633.322c-.21.196-.318.44-.318.44s-.122 3.359-.14 5.39c-.02 2.454.351 5.216.351 5.216s.085.296.345.496c.367.285.771.331.771.331"/><path fill="#fff" d="M6.1 16.763c.19 0 .3 1.251.38 2.58.045.744.411 2.058-.08 2.058-.49 0-.584-.476-.617-2.09-.034-1.612.064-2.548.317-2.548M3.173 16.667c.12-.042.35.634.903 1.156.39.369.76.49.855.744.096.254.222 1.613-.062 1.631-.396.023-1.022-.262-1.393-.933-.59-1.062-.525-2.518-.303-2.598"/></svg>