Merge branch 'main' into feat/warnings_for_empty_data

chore: remove array sort
chore: added diagnostic columns logic
2026-02-07 18:32:12 +00:00 · 2026-01-14 13:57:15 +05:30 · 2026-01-13 17:20:02 +05:30 · 2026-01-13 14:10:21 +05:30 · 2026-01-12 17:49:31 +05:30 · 2026-01-10 23:15:51 +05:30
117 changed files with 3151 additions and 7426 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -16,13 +16,13 @@

 # Scaffold Owners

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

 # Zeus Owners

@@ -48,53 +48,19 @@
 /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
+/pkg/authz/ @vikrantgupta25 @therealpandey

 # Integration tests

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

 # Dashboard Owners

--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,76 +1,86 @@
-## Pull Request
+## 📄 Summary
+
+<!-- Describe the purpose of the PR in a few sentences. What does it fix/add/update? -->

 ---

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

 ---

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

- [ ] ✨ Feature
- [ ] 🐛 Bug fix
- [ ] ♻️ Refactor
- [ ] 🛠️ Infra / Tooling
- [ ] 🧪 Test-only
+## 📝 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

 ---

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

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

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

 ---

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

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

 ---

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

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

 ---

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

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

 ---

-### 📋 Checklist
- [ ] Tests added or explicitly not required
- [ ] Manually tested
- [ ] Breaking changes documented
- [ ] Backward compatibility considered
+## 📸 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
+

 ---

 ## 👀 Notes for Reviewers

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

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

 .idea

+**/.vscode
 **/build
 **/storage
 **/locust-scripts/__pycache__/
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,9 +0,0 @@
-{
-	"eslint.workingDirectories": ["./frontend"],
-	"editor.formatOnSave": true,
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "explicit"
-	},
-	"prettier.requireConfig": true
-}
--- a/context7.json
+++ b/context7.json
@@ -1,4 +0,0 @@
-{
-  "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.107.0
+    image: signoz/signoz:v0.106.0
    command:
      - --config=/root/config/prometheus.yml
    ports:
--- 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.107.0
+    image: signoz/signoz:v0.106.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.107.0}
+    image: signoz/signoz:${VERSION:-v0.106.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.107.0}
+    image: signoz/signoz:${VERSION:-v0.106.0}
    container_name: signoz
    command:
      - --config=/root/config/prometheus.yml
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -7,6 +7,8 @@ module.exports = {
 		'jest/globals': true,
 	},
 	extends: [
+		'airbnb',
+		'airbnb-typescript',
 		'eslint:recommended',
 		'plugin:react/recommended',
 		'plugin:@typescript-eslint/recommended',
@@ -33,7 +35,6 @@ module.exports = {
 		'react-hooks',
 		'prettier',
 		'jest',
-		'jsx-a11y',
 	],
 	settings: {
 		react: {
@@ -71,6 +72,9 @@ 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',
@@ -83,9 +87,6 @@ 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',
@@ -103,10 +104,7 @@ module.exports = {
 				},
 			},
 		],
-		// 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',
+		'@typescript-eslint/no-unused-vars': 'error',
 		'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
 		'arrow-body-style': ['error', 'as-needed'],

--- a/frontend/.prettierrc.json
+++ b/frontend/.prettierrc.json
@@ -4,14 +4,5 @@
 	"tabWidth": 1,
 	"singleQuote": true,
 	"jsxSingleQuote": false,
-	"semi": true,
-	"printWidth": 80,
-	"bracketSpacing": true,
-	"bracketSameLine": false,
-	"arrowParens": "always",
-	"endOfLine": "lf",
-	"quoteProps": "as-needed",
-	"proseWrap": "preserve",
-	"htmlWhitespaceSensitivity": "css",
-	"embeddedLanguageFormatting": "auto"
+	"semi": true
 }
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -1,8 +0,0 @@
-{
-	"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,18 +34,12 @@ 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 and configurations:
+- 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)

-  - [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.
+    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,11 +219,16 @@
 		"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
@@ -1 +0,0 @@
-<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
@@ -1 +0,0 @@
-<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
@@ -1,145 +0,0 @@
-.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
@@ -1,22 +0,0 @@
-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
@@ -1,115 +0,0 @@
-@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
@@ -1,75 +0,0 @@
-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
@@ -1,82 +0,0 @@
-@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
@@ -1,33 +0,0 @@
-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
@@ -1,181 +0,0 @@
-@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
@@ -1,41 +0,0 @@
-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,7 +58,6 @@
 		flex-direction: column;
 		gap: 16px;
 		padding-left: 30px;
-		margin-bottom: 1rem;

 		li {
 			position: relative;
--- a/frontend/src/components/ErrorModal/components/ErrorContent.tsx
+++ b/frontend/src/components/ErrorModal/components/ErrorContent.tsx
@@ -6,15 +6,13 @@ 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, icon }: ErrorContentProps): JSX.Element {
+function ErrorContent({ error }: ErrorContentProps): JSX.Element {
 	const {
 		url: errorUrl,
 		errors: errorMessages,
@@ -27,7 +25,9 @@ function ErrorContent({ error, icon }: 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">{icon || <ErrorIcon />}</div>
+						<div className="error-content__icon-wrapper">
+							<ErrorIcon />
+						</div>

 						<div className="error-content__summary-text">
 							<h2 className="error-content__error-code">{errorCode}</h2>
@@ -95,8 +95,4 @@ function ErrorContent({ error, icon }: 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,5 +1,4 @@
 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/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;
-	handleChangeSelectedView?: ChangeViewFunctionType;
+	onGroupByAttribute?: (fieldKey: string, dataType?: DataTypes) => Promise<void>;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -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,7 +6,6 @@ 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';
@@ -109,7 +108,6 @@ type ListLogViewProps = {
 	activeLog?: ILog | null;
 	linesPerRow: number;
 	fontSize: FontSize;
-	handleChangeSelectedView?: ChangeViewFunctionType;
 };

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

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

 	const isDarkMode = useIsDarkMode();
@@ -257,7 +255,7 @@ function ListLogView({
 					onAddToQuery={handleAddToQuery}
 					selectedTab={VIEW_TYPES.CONTEXT}
 					onClose={handlerClearActiveContextLog}
-					handleChangeSelectedView={handleChangeSelectedView}
+					onGroupByAttribute={onGroupByAttribute}
 				/>
 			)}
 		</>
@@ -266,7 +264,6 @@ 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,7 +39,6 @@ function RawLogView({
 	selectedFields = [],
 	fontSize,
 	onLogClick,
-	handleChangeSelectedView,
 }: RawLogViewProps): JSX.Element {
 	const {
 		isHighlighted: isUrlHighlighted,
@@ -53,6 +52,7 @@ function RawLogView({
 		onSetActiveLog,
 		onClearActiveLog,
 		onAddToQuery,
+		onGroupByAttribute,
 	} = useActiveLog();

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

 export interface RawLogContentProps {
--- a/frontend/src/constants/query.ts
+++ b/frontend/src/constants/query.ts
@@ -53,5 +53,4 @@ export enum QueryParams {
 	variables = 'variables',
 	version = 'version',
 	showNewCreateAlertsPage = 'showNewCreateAlertsPage',
-	source = 'source',
 }
--- a/frontend/src/constants/queryBuilder.ts
+++ b/frontend/src/constants/queryBuilder.ts
@@ -301,7 +301,6 @@ export const initialQueryState: QueryState = {
 	builder: initialQueryBuilderData,
 	clickhouse_sql: [initialClickHouseData],
 	promql: [initialQueryPromQLData],
-	unit: '',
 };

 const initialQueryWithType: Query = {
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/frontend/src/container/FormAlertRules/index.tsx
@@ -788,18 +788,11 @@ function FormAlertRules({
 		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
 			?.active || false;

-	const source = useMemo(() => urlQuery.get(QueryParams.source) as YAxisSource, [
-		urlQuery,
-	]);
-
 	// Only update automatically when creating a new metrics-based alert rule
-	const shouldUpdateYAxisUnit = useMemo(() => {
-		// Do not update if we are coming to the page from dashboards (we still show warning)
-		if (source === YAxisSource.DASHBOARDS) {
-			return false;
-		}
-		return isNewRule && alertType === AlertTypes.METRICS_BASED_ALERT;
-	}, [isNewRule, alertType, source]);
+	const shouldUpdateYAxisUnit = useMemo(
+		() => isNewRule && alertType === AlertTypes.METRICS_BASED_ALERT,
+		[isNewRule, alertType],
+	);

 	const { yAxisUnit: initialYAxisUnit, isLoading } = useGetYAxisUnit(
 		alertDef.condition.selectedQueryName,
--- a/frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx
+++ b/frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx
@@ -4,7 +4,6 @@ import { Switch, Typography } from 'antd';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import { MAX_LOGS_LIST_SIZE } from 'constants/liveTail';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import GoToTop from 'container/GoToTop';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
@@ -22,13 +21,7 @@ import { ILiveLogsLog } from '../LiveLogsList/types';
 import LiveLogsListChart from '../LiveLogsListChart';
 import { QueryHistoryState } from '../types';

-interface LiveLogsContainerProps {
-	handleChangeSelectedView?: ChangeViewFunctionType;
-}
-
-function LiveLogsContainer({
-	handleChangeSelectedView,
-}: LiveLogsContainerProps): JSX.Element {
+function LiveLogsContainer(): JSX.Element {
 	const location = useLocation();
 	const [logs, setLogs] = useState<ILiveLogsLog[]>([]);
 	const { currentQuery, stagedQuery } = useQueryBuilder();
@@ -254,7 +247,6 @@ function LiveLogsContainer({
 					<LiveLogsList
 						logs={logs}
 						isLoading={initialLoading && logs.length === 0}
-						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				</div>
 			</div>
@@ -264,8 +256,4 @@ function LiveLogsContainer({
 	);
 }

-LiveLogsContainer.defaultProps = {
-	handleChangeSelectedView: undefined,
-};
-
 export default LiveLogsContainer;
--- a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
+++ b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
@@ -25,11 +25,7 @@ import { DataSource, StringOperators } from 'types/common/queryBuilder';

 import { LiveLogsListProps } from './types';

-function LiveLogsList({
-	logs,
-	isLoading,
-	handleChangeSelectedView,
-}: LiveLogsListProps): JSX.Element {
+function LiveLogsList({ logs, isLoading }: LiveLogsListProps): JSX.Element {
 	const ref = useRef<VirtuosoHandle>(null);

 	const { isConnectionLoading } = useEventSource();
@@ -40,6 +36,7 @@ function LiveLogsList({
 		activeLog,
 		onClearActiveLog,
 		onAddToQuery,
+		onGroupByAttribute,
 		onSetActiveLog,
 	} = useActiveLog();

@@ -75,7 +72,6 @@ function LiveLogsList({
 						linesPerRow={options.maxLines}
 						selectedFields={selectedFields}
 						fontSize={options.fontSize}
-						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				);
 			}
@@ -89,12 +85,10 @@ function LiveLogsList({
 					onAddToQuery={onAddToQuery}
 					onSetActiveLog={onSetActiveLog}
 					fontSize={options.fontSize}
-					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			);
 		},
 		[
-			handleChangeSelectedView,
 			onAddToQuery,
 			onSetActiveLog,
 			options.fontSize,
@@ -153,7 +147,6 @@ function LiveLogsList({
 								appendTo: 'end',
 								activeLogIndex,
 							}}
-							handleChangeSelectedView={handleChangeSelectedView}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
@@ -177,11 +170,12 @@ function LiveLogsList({
 					log={activeLog}
 					onClose={onClearActiveLog}
 					onAddToQuery={onAddToQuery}
+					onGroupByAttribute={onGroupByAttribute}
 					onClickActionItem={onAddToQuery}
-					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			)}
 		</div>
 	);
 }
+
 export default memo(LiveLogsList);
--- a/frontend/src/container/LiveLogs/LiveLogsList/types.ts
+++ b/frontend/src/container/LiveLogs/LiveLogsList/types.ts
@@ -1,4 +1,3 @@
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { ILog } from 'types/api/logs/log';

 export interface ILiveLogsLog {
@@ -9,5 +8,4 @@ export interface ILiveLogsLog {
 export type LiveLogsListProps = {
 	logs: ILiveLogsLog[];
 	isLoading: boolean;
-	handleChangeSelectedView?: ChangeViewFunctionType;
 };
--- a/frontend/src/container/LogDetailedView/Overview.tsx
+++ b/frontend/src/container/LogDetailedView/Overview.tsx
@@ -12,13 +12,13 @@ import {
 	Typography,
 } from 'antd';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { OptionsQuery } from 'container/OptionsMenu/types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronDown, ChevronRight, Search } from 'lucide-react';
 import { ReactNode, useState } from 'react';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';

 import { ActionItemProps } from './ActionItem';
 import TableView from './TableView';
@@ -29,7 +29,7 @@ interface OverviewProps {
 	isListViewPanel?: boolean;
 	selectedOptions: OptionsQuery;
 	listViewPanelSelectedFields?: IField[] | null;
-	handleChangeSelectedView?: ChangeViewFunctionType;
+	onGroupByAttribute?: (fieldKey: string, dataType?: DataTypes) => Promise<void>;
 }

 type Props = OverviewProps &
@@ -42,8 +42,8 @@ function Overview({
 	onClickActionItem,
 	isListViewPanel = false,
 	selectedOptions,
+	onGroupByAttribute,
 	listViewPanelSelectedFields,
-	handleChangeSelectedView,
 }: Props): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
 	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(false);
@@ -208,11 +208,11 @@ function Overview({
 									logData={logData}
 									onAddToQuery={onAddToQuery}
 									fieldSearchInput={fieldSearchInput}
+									onGroupByAttribute={onGroupByAttribute}
 									onClickActionItem={onClickActionItem}
 									isListViewPanel={isListViewPanel}
 									selectedOptions={selectedOptions}
 									listViewPanelSelectedFields={listViewPanelSelectedFields}
-									handleChangeSelectedView={handleChangeSelectedView}
 								/>
 							</>
 						),
@@ -227,7 +227,7 @@ function Overview({
 Overview.defaultProps = {
 	isListViewPanel: false,
 	listViewPanelSelectedFields: null,
-	handleChangeSelectedView: undefined,
+	onGroupByAttribute: undefined,
 };

 export default Overview;
--- a/frontend/src/container/LogDetailedView/TableView.tsx
+++ b/frontend/src/container/LogDetailedView/TableView.tsx
@@ -13,7 +13,6 @@ import AddToQueryHOC, {
 import { ResizeTable } from 'components/ResizeTable';
 import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import { FontSize, OptionsQuery } from 'container/OptionsMenu/types';
@@ -48,7 +47,7 @@ interface TableViewProps {
 	selectedOptions: OptionsQuery;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
-	handleChangeSelectedView?: ChangeViewFunctionType;
+	onGroupByAttribute?: (fieldKey: string, dataType?: DataTypes) => Promise<void>;
 }

 type Props = TableViewProps &
@@ -62,8 +61,8 @@ function TableView({
 	onClickActionItem,
 	isListViewPanel = false,
 	selectedOptions,
+	onGroupByAttribute,
 	listViewPanelSelectedFields,
-	handleChangeSelectedView,
 }: Props): JSX.Element | null {
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 	const [isfilterInLoading, setIsFilterInLoading] = useState<boolean>(false);
@@ -296,7 +295,7 @@ function TableView({
 					isfilterInLoading={isfilterInLoading}
 					isfilterOutLoading={isfilterOutLoading}
 					onClickHandler={onClickHandler}
-					handleChangeSelectedView={handleChangeSelectedView}
+					onGroupByAttribute={onGroupByAttribute}
 				/>
 			),
 		},
@@ -339,7 +338,7 @@ function TableView({
 TableView.defaultProps = {
 	isListViewPanel: false,
 	listViewPanelSelectedFields: null,
-	handleChangeSelectedView: undefined,
+	onGroupByAttribute: undefined,
 };

 export interface DataType {
--- a/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx
+++ b/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx
@@ -7,24 +7,15 @@ import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
 import cx from 'classnames';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { QueryParams } from 'constants/query';
 import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 import { MetricsType } from 'container/MetricsApplication/constant';
-import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
 import { ArrowDownToDot, ArrowUpFromDot, Ellipsis } from 'lucide-react';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';
 import { useTimezone } from 'providers/Timezone';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';

 import { DataType } from '../TableView';
 import {
@@ -42,6 +33,7 @@ interface ITableViewActionsProps {
 	isListViewPanel: boolean;
 	isfilterInLoading: boolean;
 	isfilterOutLoading: boolean;
+	onGroupByAttribute?: (fieldKey: string, dataType?: DataTypes) => Promise<void>;
 	onClickHandler: (
 		operator: string,
 		fieldKey: string,
@@ -49,7 +41,6 @@ interface ITableViewActionsProps {
 		dataType: string | undefined,
 		logType: MetricsType | undefined,
 	) => () => void;
-	handleChangeSelectedView?: ChangeViewFunctionType;
 }

 // Memoized Tree Component
@@ -127,12 +118,10 @@ export default function TableViewActions(
 		isfilterInLoading,
 		isfilterOutLoading,
 		onClickHandler,
-		handleChangeSelectedView,
+		onGroupByAttribute,
 	} = props;

 	const { pathname } = useLocation();
-	const { stagedQuery, updateQueriesData } = useQueryBuilder();
-	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
 	const { dataType, logType: fieldType } = getFieldAttributes(record.field);

 	// there is no option for where clause in old logs explorer and live logs page
@@ -156,42 +145,6 @@ export default function TableViewActions(

 	const fieldFilterKey = filterKeyForField(fieldData.field);

-	const handleGroupByAttribute = useCallback((): void => {
-		if (!stagedQuery) return;
-		const normalizedDataType: DataTypes | undefined =
-			dataType && Object.values(DataTypes).includes(dataType as DataTypes)
-				? (dataType as DataTypes)
-				: undefined;
-
-		const updatedQuery = updateQueriesData(stagedQuery, 'queryData', (item) => {
-			const newGroupByItem: BaseAutocompleteData = {
-				key: fieldFilterKey,
-				type: fieldType || '',
-				dataType: normalizedDataType,
-			};
-
-			const updatedGroupBy = [...(item.groupBy || []), newGroupByItem];
-
-			return { ...item, groupBy: updatedGroupBy };
-		});
-
-		const queryData: ICurrentQueryData = {
-			name: viewName,
-			id: updatedQuery.id,
-			query: updatedQuery,
-		};
-
-		handleChangeSelectedView?.(ExplorerViews.TIMESERIES, queryData);
-	}, [
-		stagedQuery,
-		updateQueriesData,
-		fieldFilterKey,
-		fieldType,
-		dataType,
-		handleChangeSelectedView,
-		viewName,
-	]);
-
 	// Memoize textToCopy computation
 	const textToCopy = useMemo(() => {
 		let text = fieldData.value;
@@ -315,7 +268,9 @@ export default function TableViewActions(
 											className="group-by-clause"
 											type="text"
 											icon={<GroupByIcon />}
-											onClick={handleGroupByAttribute}
+											onClick={(): Promise<void> | void =>
+												onGroupByAttribute?.(fieldFilterKey)
+											}
 										>
 											Group By Attribute
 										</Button>
@@ -393,7 +348,9 @@ export default function TableViewActions(
 										className="group-by-clause"
 										type="text"
 										icon={<GroupByIcon />}
-										onClick={handleGroupByAttribute}
+										onClick={(): Promise<void> | void =>
+											onGroupByAttribute?.(fieldFilterKey)
+										}
 									>
 										Group By Attribute
 									</Button>
@@ -416,5 +373,5 @@ export default function TableViewActions(
 }

 TableViewActions.defaultProps = {
-	handleChangeSelectedView: undefined,
+	onGroupByAttribute: undefined,
 };
--- a/frontend/src/container/LogDetailedView/TableView/test/TableViewActions.test.tsx
+++ b/frontend/src/container/LogDetailedView/TableView/test/TableViewActions.test.tsx
@@ -1,8 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
-import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';

 import TableViewActions from '../TableViewActions';
 import useAsyncJSONProcessing from '../useAsyncJSONProcessing';
@@ -52,20 +49,6 @@ jest.mock('../useAsyncJSONProcessing', () => ({
 	default: jest.fn(),
 }));

-jest.mock('antd', () => {
-	const antd = jest.requireActual('antd');
-	return {
-		...antd,
-		// Render popover content inline to make its children testable
-		Popover: ({ content, children }: any): JSX.Element => (
-			<div data-testid="popover">
-				<div data-testid="popover-content">{content}</div>
-				{children}
-			</div>
-		),
-	};
-});
-
 jest.mock('providers/Timezone', () => ({
 	useTimezone: (): {
 		formatTimezoneAdjustedTimestamp: (timestamp: string) => string;
@@ -88,35 +71,29 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));

-jest.mock('hooks/queryBuilder/useQueryBuilder');
-jest.mock('hooks/queryBuilder/useGetSearchQueryParam');
-
 describe('TableViewActions', () => {
 	const TEST_VALUE = 'test value';
-	const TEST_FIELD = 'test-field';
 	const ACTION_BUTTON_TEST_ID = '.action-btn';
 	const defaultProps = {
 		fieldData: {
-			field: TEST_FIELD,
+			field: 'test-field',
 			value: TEST_VALUE,
 		},
 		record: {
 			key: 'test-key',
-			field: TEST_FIELD,
+			field: 'test-field',
 			value: TEST_VALUE,
 		},
 		isListViewPanel: false,
 		isfilterInLoading: false,
 		isfilterOutLoading: false,
 		onClickHandler: jest.fn(),
-		handleChangeSelectedView: jest.fn(),
+		onGroupByAttribute: jest.fn(),
 	};

 	beforeEach(() => {
 		mockCopyToClipboard = jest.fn();
 		mockNotificationsSuccess = jest.fn();
-		defaultProps.onClickHandler = jest.fn();
-		defaultProps.handleChangeSelectedView = jest.fn();

 		// Default mock for useAsyncJSONProcessing
 		const mockUseAsyncJSONProcessing = jest.mocked(useAsyncJSONProcessing);
@@ -125,24 +102,6 @@ describe('TableViewActions', () => {
 			treeData: null,
 			error: null,
 		});
-
-		// Default mock for useQueryBuilder
-		jest.mocked(useQueryBuilder).mockReturnValue({
-			stagedQuery: null,
-			updateQueriesData: jest.fn((query, type, callback) => {
-				const updatedBuilder = {
-					...query.builder,
-					[type]: query.builder[type].map(callback),
-				};
-				return {
-					...query,
-					builder: updatedBuilder,
-				};
-			}),
-		} as any);
-
-		// Default mock for useGetSearchQueryParam
-		jest.mocked(useGetSearchQueryParam).mockReturnValue(null);
 	});

 	it('should render without crashing', () => {
@@ -154,7 +113,7 @@ describe('TableViewActions', () => {
 				isfilterInLoading={defaultProps.isfilterInLoading}
 				isfilterOutLoading={defaultProps.isfilterOutLoading}
 				onClickHandler={defaultProps.onClickHandler}
-				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+				onGroupByAttribute={defaultProps.onGroupByAttribute}
 			/>,
 		);
 		expect(screen.getByText(TEST_VALUE)).toBeInTheDocument();
@@ -176,7 +135,7 @@ describe('TableViewActions', () => {
 					isfilterInLoading={defaultProps.isfilterInLoading}
 					isfilterOutLoading={defaultProps.isfilterOutLoading}
 					onClickHandler={defaultProps.onClickHandler}
-					handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+					onGroupByAttribute={defaultProps.onGroupByAttribute}
 				/>,
 			);
 			// Verify that action buttons are not rendered for restricted fields
@@ -195,100 +154,13 @@ describe('TableViewActions', () => {
 				isfilterInLoading={defaultProps.isfilterInLoading}
 				isfilterOutLoading={defaultProps.isfilterOutLoading}
 				onClickHandler={defaultProps.onClickHandler}
-				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+				onGroupByAttribute={defaultProps.onGroupByAttribute}
 			/>,
 		);
 		// Verify that action buttons are rendered for non-restricted fields
 		expect(container.querySelector(ACTION_BUTTON_TEST_ID)).toBeInTheDocument();
 	});

-	it('should call handleChangeSelectedView when clicking group by', () => {
-		const mockStagedQuery = {
-			id: 'test-query-id',
-			queryType: 'queryBuilder',
-			builder: {
-				queryData: [
-					{
-						queryName: 'A',
-						dataSource: 'logs',
-						aggregateOperator: 'count',
-						functions: [],
-						filter: {},
-						groupBy: [],
-						expression: '',
-						disabled: false,
-						having: [],
-						limit: null,
-						stepInterval: null,
-						orderBy: [],
-						legend: '',
-					},
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-			promql: [],
-			clickhouse_sql: [],
-		};
-
-		const mockUpdateQueriesData = jest.fn((query, type, callback) => {
-			const section = query.builder?.[type];
-			if (!Array.isArray(section)) {
-				return query;
-			}
-			return {
-				...query,
-				builder: {
-					...query.builder,
-					[type]: section.map(callback),
-				},
-			};
-		});
-
-		jest.mocked(useQueryBuilder).mockReturnValue({
-			stagedQuery: mockStagedQuery,
-			updateQueriesData: mockUpdateQueriesData,
-		} as any);
-
-		jest.mocked(useGetSearchQueryParam).mockReturnValue(null);
-
-		render(
-			<TableViewActions
-				fieldData={defaultProps.fieldData}
-				record={defaultProps.record}
-				isListViewPanel={defaultProps.isListViewPanel}
-				isfilterInLoading={defaultProps.isfilterInLoading}
-				isfilterOutLoading={defaultProps.isfilterOutLoading}
-				onClickHandler={defaultProps.onClickHandler}
-				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
-			/>,
-		);
-
-		fireEvent.click(screen.getByText('Group By Attribute'));
-
-		expect(defaultProps.handleChangeSelectedView).toHaveBeenCalledWith(
-			ExplorerViews.TIMESERIES,
-			expect.objectContaining({
-				name: '',
-				id: 'test-query-id',
-				query: expect.objectContaining({
-					builder: expect.objectContaining({
-						queryData: expect.arrayContaining([
-							expect.objectContaining({
-								groupBy: expect.arrayContaining([
-									expect.objectContaining({
-										key: TEST_FIELD,
-										type: '',
-									}),
-								]),
-							}),
-						]),
-					}),
-				}),
-			}),
-		);
-	});
-
 	it('should not render action buttons in list view panel', () => {
 		const { container } = render(
 			<TableViewActions
@@ -298,7 +170,7 @@ describe('TableViewActions', () => {
 				isfilterInLoading={defaultProps.isfilterInLoading}
 				isfilterOutLoading={defaultProps.isfilterOutLoading}
 				onClickHandler={defaultProps.onClickHandler}
-				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+				onGroupByAttribute={defaultProps.onGroupByAttribute}
 			/>,
 		);
 		// Verify that action buttons are not rendered in list view panel
@@ -328,7 +200,7 @@ describe('TableViewActions', () => {
 			isfilterInLoading: false,
 			isfilterOutLoading: false,
 			onClickHandler: jest.fn(),
-			handleChangeSelectedView: jest.fn(),
+			onGroupByAttribute: jest.fn(),
 		};

 		// Render component with body field
@@ -340,7 +212,7 @@ describe('TableViewActions', () => {
 				isfilterInLoading={bodyProps.isfilterInLoading}
 				isfilterOutLoading={bodyProps.isfilterOutLoading}
 				onClickHandler={bodyProps.onClickHandler}
-				handleChangeSelectedView={bodyProps.handleChangeSelectedView}
+				onGroupByAttribute={bodyProps.onGroupByAttribute}
 			/>,
 		);

--- a/frontend/src/container/Login/Login.styles.scss
+++ b/frontend/src/container/Login/Login.styles.scss
@@ -1,419 +1,44 @@
-@import '@signozhq/design-tokens/dist/style.css';
-
 .login-form-container {
 	display: flex;
 	justify-content: center;
 	width: 100%;
 	align-items: flex-start;
-}

-.login-form-header {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	margin-bottom: 32px;
-	text-align: center;
-	width: 100%;
-}
-
-.login-form-emoji {
-	width: 32px;
-	height: 32px;
-	font-size: 24px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.login-form-title {
-	font-family: Inter, sans-serif;
-	font-size: 18px;
-	font-weight: 600;
-	line-height: 1;
-	letter-spacing: 0;
-	color: var(--levels-l1-foreground, #eceef2);
-	margin: 0 !important;
-}
-
-.login-form-description {
-	font-family: Inter, sans-serif;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 20px;
-	letter-spacing: -0.065px;
-	color: var(--semantic-secondary-foreground, #adb4c2);
-	max-width: 317px;
-	margin: 0 !important;
-	text-align: center;
-}
-
-.login-form-card {
-	width: 100%;
-	background: var(--semantic-secondary-background, #121317);
-	border: 1px solid var(--semantic-secondary-border, #23262e);
-	border-radius: 4px;
-	padding: 24px;
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-}
-
-.login-error-container {
-	margin-top: 24px;
-	width: 100%;
-
-	.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;
-		}
-
-		.login-error-icon {
-			color: var(--bg-cherry-200);
-			padding-top: 1px;
-		}
-
-		&__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;
-		}
-	}
-}
-
-.lightMode {
-	.login-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);
-			}
-
-			&__docs-button {
-				color: var(--bg-ink-400);
-				border-color: var(--bg-vanilla-300, #e9e9e9);
-				background: transparent;
-
-				&:hover {
-					color: var(--bg-ink-100);
-					border-color: var(--bg-vanilla-400, #d1d5db);
-					background: transparent;
-				}
-			}
-
-			&__message-badge-label-text {
-				color: var(--bg-ink-100);
-			}
-
-			&__message-item {
-				color: var(--bg-ink-400);
-
-				&::before {
-					background: var(--bg-ink-400);
-				}
-			}
-
-			&__scroll-hint-text {
-				color: var(--bg-ink-100);
-			}
-		}
-	}
-}
-
-.password-label-container {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-	margin-bottom: 12px;
-
-	> label {
-		margin-bottom: 0;
-	}
-}
-
-.forgot-password-link {
-	font-family: Inter, sans-serif;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 1;
-	letter-spacing: -0.065px;
-	color: var(--text-neutral-dark-200) !important;
-
-	&:hover {
-		color: var(--text-neutral-dark-300) !important;
-	}
-}
-
-.login-form-input {
-	height: 32px;
-	background: var(--levels-l3-background, #23262e);
-	border: 1px solid var(--levels-l3-border, #2c303a);
-	border-radius: 2px;
-	padding: 6px 8px;
-	font-family: Inter, sans-serif;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 1;
-	letter-spacing: -0.065px;
-	color: var(--levels-l1-foreground, #eceef2);
-
-	&::placeholder {
-		color: var(--levels-l3-foreground, #747b8b);
+	.login-form-header {
+		margin-bottom: 16px;
 	}

-	&:hover {
-		border-color: var(--levels-l3-border, #2c303a);
+	.login-form-header-text {
+		color: var(--text-vanilla-300);
 	}

-	&:focus {
-		border-color: var(--semantic-primary-background, #4e74f8);
-		box-shadow: none;
-	}
-
-	// Select component styling to match Input
-	&.ant-select {
-		width: 100%;
-		height: 32px;
-		margin: 0;
-		padding: 0;
-
-		.ant-select-selector {
-			height: 32px !important;
-			min-height: 32px !important;
-			padding: 0 8px !important;
-			border-radius: 2px !important;
-			font-family: Inter, sans-serif !important;
-			font-size: 13px !important;
-			font-weight: 400 !important;
-			line-height: 1 !important;
-			letter-spacing: -0.065px !important;
-			background: var(--levels-l3-background, #23262e) !important;
-			border: 1px solid var(--levels-l3-border, #2c303a) !important;
-			display: flex !important;
-			align-items: center !important;
-		}
-
-		.ant-select-selection-search {
-			height: 20px;
-			line-height: 20px;
-		}
-
-		.ant-select-selection-item,
-		.ant-select-selection-placeholder {
-			line-height: 20px !important;
-			height: 20px !important;
-			font-family: Inter, sans-serif !important;
-			font-size: 13px !important;
-			font-weight: 400 !important;
-			letter-spacing: -0.065px !important;
-			display: flex !important;
-			align-items: center !important;
-			margin: 0 !important;
-		}
-
-		.ant-select-selection-placeholder {
-			color: var(--levels-l3-foreground, #747b8b) !important;
-		}
-
-		.ant-select-selection-item {
-			color: var(--levels-l1-foreground, #eceef2) !important;
-		}
-
-		&:hover .ant-select-selector {
-			border-color: var(--levels-l3-border, #2c303a) !important;
-		}
-
-		&.ant-select-focused .ant-select-selector {
-			border-color: var(--semantic-primary-background, #4e74f8) !important;
-			box-shadow: none !important;
-		}
-	}
-
-	// Remove border for orgId Select only
-	&.login-form-select-no-border {
-		&.ant-select .ant-select-selector {
-			border: none !important;
-		}
-
-		&.ant-select:hover .ant-select-selector {
-			border: none !important;
-		}
-
-		&.ant-select.ant-select-focused .ant-select-selector {
-			border: none !important;
-			box-shadow: none !important;
-		}
-	}
-}
-
-.login-form-actions {
-	width: 100%;
-	margin-top: 24px;
-}
-
-.login-submit-btn {
-	width: 100%;
-	height: 32px;
-	padding: 10px 16px;
-	background: var(--semantic-primary-background, #4e74f8);
-	border: none;
-	border-radius: 2px;
-	font-family: Inter, sans-serif;
-	font-size: 11px;
-	font-weight: 500;
-	line-height: 1;
-	color: var(--semantic-primary-foreground, #eceef2);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-
-	&:hover:not(:disabled) {
-		background: var(--semantic-primary-background, #4e74f8);
-		opacity: 0.9;
-	}
-
-	&:disabled {
-		background: var(--semantic-primary-background, #4e74f8);
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-}
-
-.lightMode {
-	.login-form-title {
-		color: var(--text-ink-500);
-	}
-
-	.login-form-description {
-		color: var(--text-neutral-light-200, #80828d);
-	}
-
-	.login-form-card {
-		background: var(--bg-base-white, #ffffff);
-		border-color: var(--bg-vanilla-300, #e9e9e9);
-	}
-
-	.forgot-password-link {
-		color: var(--text-neutral-dark-300);
+	.next-btn {
+		padding: 0px 16px;
 	}

 	.login-form-input {
-		background: var(--bg-vanilla-200, #f5f5f5);
-		border-color: var(--bg-vanilla-300, #e9e9e9);
-		color: var(--text-ink-500);
+		height: 40px;
+	}

-		&::placeholder {
-			color: var(--text-neutral-light-200, #80828d);
+	.no-acccount {
+		color: var(--text-vanilla-300);
+		font-size: 12px;
+		margin-top: 16px;
+	}
+}
+
+.lightMode {
+	.login-form-container {
+		.login-form-header {
+			color: var(--text-ink-500);
 		}

-		&:focus {
-			border-color: var(--semantic-primary-background, #4e74f8);
+		.login-form-header-text {
+			color: var(--text-ink-500);
 		}

-		// Select component light mode styling
-		&.ant-select {
-			.ant-select-selector {
-				background: var(--bg-vanilla-200, #f5f5f5) !important;
-				border-color: var(--bg-vanilla-300, #e9e9e9) !important;
-				color: var(--text-ink-500) !important;
-			}
-
-			.ant-select-selection-placeholder {
-				color: var(--text-neutral-light-200, #80828d) !important;
-			}
-
-			&:hover .ant-select-selector {
-				border-color: var(--bg-vanilla-300, #e9e9e9) !important;
-			}
-
-			&.ant-select-focused .ant-select-selector {
-				border-color: var(--semantic-primary-background, #4e74f8) !important;
-			}
+		.no-acccount {
+			color: var(--text-ink-500);
 		}
 	}
 }
--- a/frontend/src/container/Login/tests/Login.test.tsx
+++ b/frontend/src/container/Login/tests/Login.test.tsx
@@ -146,7 +146,7 @@ describe('Login Component', () => {
 			).toBeInTheDocument();
 			expect(getByTestId('email')).toBeInTheDocument();
 			expect(getByTestId('initiate_login')).toBeInTheDocument();
-			expect(getByPlaceholderText('e.g. john@signoz.io')).toBeInTheDocument();
+			expect(getByPlaceholderText('name@yourcompany.com')).toBeInTheDocument();
 		});

 		it('shows loading state when version data is being fetched', () => {
@@ -213,27 +213,19 @@ describe('Login Component', () => {

 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgPasswordAuth }),
+					),
 				),
 			);

 			const { getByTestId } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
@@ -261,21 +253,10 @@ describe('Login Component', () => {

 			const { getByTestId, getByText } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
@@ -288,27 +269,19 @@ describe('Login Component', () => {

 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (req, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgPasswordAuth }),
+					),
 				),
 			);

 			const { getByTestId } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
@@ -325,33 +298,25 @@ describe('Login Component', () => {

 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockMultiOrgMixedAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockMultiOrgMixedAuth }),
+					),
 				),
 			);

 			const { getByTestId, getByText } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
 				expect(getByText('Organization Name')).toBeInTheDocument();
+				expect(screen.getByRole('combobox')).toBeInTheDocument();
 			});
-			await screen.findByRole('combobox');

 			// Click on the dropdown to reveal the options
 			await user.click(screen.getByRole('combobox'));
@@ -373,30 +338,25 @@ describe('Login Component', () => {

 			render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = screen.getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = screen.getByTestId('email');
+			const nextButton = screen.getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = screen.getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

-			await screen.findByRole('combobox');
+			await waitFor(() => {
+				expect(screen.getByRole('combobox')).toBeInTheDocument();
+			});

 			// Select CALLBACK_AUTHN_ORG
 			await user.click(screen.getByRole('combobox'));
 			await user.click(screen.getByText(CALLBACK_AUTHN_ORG));

-			await screen.findByRole('button', { name: /sign in with sso/i });
+			await waitFor(() => {
+				expect(
+					screen.getByRole('button', { name: /login with callback/i }),
+				).toBeInTheDocument();
+			});
 		});
 	});

@@ -406,27 +366,19 @@ describe('Login Component', () => {

 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgPasswordAuth }),
+					),
 				),
 			);

 			const { getByTestId, getByText } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
@@ -441,7 +393,10 @@ describe('Login Component', () => {

 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgCallbackAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgCallbackAuth }),
+					),
 				),
 			);

@@ -449,21 +404,10 @@ describe('Login Component', () => {
 				initialRoute: '/login?password=Y',
 			});

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
@@ -479,27 +423,19 @@ describe('Login Component', () => {

 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgCallbackAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgCallbackAuth }),
+					),
 				),
 			);

 			const { getByTestId, queryByTestId } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
@@ -522,27 +458,19 @@ describe('Login Component', () => {

 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgCallbackAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgCallbackAuth }),
+					),
 				),
 			);

 			const { getByTestId, queryByTestId } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
@@ -566,7 +494,10 @@ describe('Login Component', () => {

 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgPasswordAuth }),
+					),
 				),
 				rest.post('*/api/v2/sessions/email_password', async (_, res, ctx) =>
 					res(
@@ -578,21 +509,10 @@ describe('Login Component', () => {

 			const { getByTestId } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
@@ -617,7 +537,10 @@ describe('Login Component', () => {

 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgPasswordAuth }),
+					),
 				),
 				rest.post('*/api/v2/sessions/email_password', (_, res, ctx) =>
 					res(
@@ -635,21 +558,10 @@ describe('Login Component', () => {

 			const { getByTestId, getByText } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
@@ -687,7 +599,7 @@ describe('Login Component', () => {
 			});

 			await waitFor(() => {
-				expect(getByText('Authentication failed')).toBeInTheDocument();
+				expect(getByText('AUTH_ERROR')).toBeInTheDocument();
 			});
 		});

@@ -699,7 +611,7 @@ describe('Login Component', () => {

 			await waitFor(() => {
 				expect(queryByText('invalid-json')).not.toBeInTheDocument();
-				expect(getByText('Authentication failed')).toBeInTheDocument();
+				expect(getByText('AUTH_ERROR')).toBeInTheDocument();
 			});
 		});
 	});
@@ -710,27 +622,19 @@ describe('Login Component', () => {

 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (req, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockOrgWithWarning })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockOrgWithWarning }),
+					),
 				),
 			);

 			render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = screen.getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = screen.getByTestId('email');
+			const nextButton = screen.getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = screen.getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
@@ -762,30 +666,24 @@ describe('Login Component', () => {

 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockMultiOrgWithWarning })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockMultiOrgWithWarning }),
+					),
 				),
 			);

 			const { getByTestId } = render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

-			await screen.findByRole('combobox');
+			await waitFor(() => {
+				expect(screen.getByRole('combobox')).toBeInTheDocument();
+			});

 			// Select the organization with a warning
 			await user.click(screen.getByRole('combobox'));
@@ -815,21 +713,10 @@ describe('Login Component', () => {

 			render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = screen.getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = screen.getByTestId('email');
+			const nextButton = screen.getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = screen.getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			// Button should be disabled during API call
@@ -850,25 +737,14 @@ describe('Login Component', () => {
 			// Initially shows "Next" button
 			expect(screen.getByTestId('initiate_login')).toBeInTheDocument();

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = screen.getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = screen.getByTestId('email');
+			const nextButton = screen.getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = screen.getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
-				// Should show "Sign in with Password" button for password auth
+				// Should show "Login" button for password auth
 				expect(screen.getByTestId('password_authn_submit')).toBeInTheDocument();
 				expect(screen.queryByTestId('initiate_login')).not.toBeInTheDocument();
 			});
@@ -892,21 +768,10 @@ describe('Login Component', () => {

 			render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = screen.getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = screen.getByTestId('email');
+			const nextButton = screen.getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = screen.getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
@@ -945,21 +810,10 @@ describe('Login Component', () => {

 			render(<Login />);

-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = screen.getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = screen.getByTestId('email');
+			const nextButton = screen.getByTestId('initiate_login');

 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = screen.getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);

 			await waitFor(() => {
--- a/frontend/src/container/Login/index.tsx
+++ b/frontend/src/container/Login/index.tsx
@@ -1,16 +1,15 @@
 import './Login.styles.scss';

-import { Button } from '@signozhq/button';
-import { Form, Input, Select, Tooltip, Typography } from 'antd';
+import { Button, Form, Input, Select, Space, Tooltip, Typography } from 'antd';
 import getVersion from 'api/v1/version/get';
 import get from 'api/v2/sessions/context/get';
 import post from 'api/v2/sessions/email_password/post';
 import afterLogin from 'AppRoutes/utils';
-import AuthError from 'components/AuthError/AuthError';
 import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { ArrowRight } from 'lucide-react';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { ErrorV2 } from 'types/api';
@@ -38,7 +37,6 @@ type FormValues = {
 	url: string;
 };

-// eslint-disable-next-line sonarjs/cognitive-complexity
 function Login(): JSX.Element {
 	const urlQueryParams = useUrlQuery();
 	// override for callbackAuthN in case of some misconfiguration
@@ -63,12 +61,7 @@ function Login(): JSX.Element {
 		setIsLoadingSessionsContext,
 	] = useState<boolean>(false);
 	const [form] = Form.useForm<FormValues>();
-	const [errorMessage, setErrorMessage] = useState<APIError>();
-
-	// Watch form values for validation
-	const email = Form.useWatch('email', form);
-	const password = Form.useWatch('password', form);
-	const orgId = Form.useWatch('orgId', form);
+	const { showErrorModal } = useErrorModal();

 	// setupCompleted information to route to signup page in case setup is incomplete
 	const {
@@ -97,7 +90,6 @@ function Login(): JSX.Element {
 	const onNextHandler = async (): Promise<void> => {
 		const email = form.getFieldValue('email');
 		setIsLoadingSessionsContext(true);
-		setErrorMessage(undefined);

 		try {
 			const sessionsContextResponse = await get({
@@ -110,7 +102,7 @@ function Login(): JSX.Element {
 				setSessionsOrgId(sessionsContextResponse.data.orgs[0].id);
 			}
 		} catch (error) {
-			setErrorMessage(error as APIError);
+			showErrorModal(error as APIError);
 		}
 		setIsLoadingSessionsContext(false);
 	};
@@ -189,7 +181,6 @@ function Login(): JSX.Element {

 	const onSubmitHandler: () => Promise<void> = async () => {
 		setIsSubmitting(true);
-		setErrorMessage(undefined);

 		try {
 			if (isPasswordAuthN) {
@@ -214,7 +205,7 @@ function Login(): JSX.Element {
 				window.location.href = url;
 			}
 		} catch (error) {
-			setErrorMessage(error as APIError);
+			showErrorModal(error as APIError);
 		} finally {
 			setIsSubmitting(false);
 		}
@@ -222,7 +213,7 @@ function Login(): JSX.Element {

 	useEffect(() => {
 		if (callbackAuthError) {
-			setErrorMessage(
+			showErrorModal(
 				new APIError({
 					httpStatusCode: 500,
 					error: {
@@ -240,140 +231,110 @@ function Login(): JSX.Element {
 		callbackAuthErrorCode,
 		callbackAuthErrorMessage,
 		callbackAuthErrorURL,
-		setErrorMessage,
+		showErrorModal,
 	]);

 	useEffect(() => {
 		if (sessionsOrgWarning) {
-			setErrorMessage(
+			showErrorModal(
 				new APIError({
-					httpStatusCode: 400,
 					error: {
 						code: sessionsOrgWarning.code,
 						message: sessionsOrgWarning.message,
 						url: sessionsOrgWarning.url,
 						errors: sessionsOrgWarning.errors,
 					},
+					httpStatusCode: 400,
 				}),
 			);
 		}
-	}, [sessionsOrgWarning, setErrorMessage]);
-
-	// Validation helpers
-	const isEmailValid = Boolean(
-		email?.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email),
-	);
-
-	const isNextButtonEnabled =
-		isEmailValid && !versionLoading && !sessionsContextLoading;
-
-	const isSubmitButtonEnabled = useMemo((): boolean => {
-		if (!isEmailValid || isSubmitting) return false;
-		const hasMultipleOrgs = (sessionsContext?.orgs.length ?? 0) > 1;
-		if (hasMultipleOrgs && !orgId) {
-			return false;
-		}
-
-		return !(isPasswordAuthN && !password?.trim());
-	}, [
-		isEmailValid,
-		isSubmitting,
-		sessionsContext,
-		orgId,
-		isPasswordAuthN,
-		password,
-	]);
+	}, [sessionsOrgWarning, showErrorModal]);

 	return (
 		<div className="login-form-container">
 			<FormContainer form={form} onFinish={onSubmitHandler}>
 				<div className="login-form-header">
-					<div className="login-form-emoji">
-						<img src="/svgs/tv.svg" alt="TV" width="32" height="32" />
-					</div>
-					<Typography.Title level={4} className="login-form-title">
-						Sign in to your workspace
-					</Typography.Title>
-					<Typography.Paragraph className="login-form-description">
+					<Typography.Paragraph className="login-form-header-text">
 						Sign in to monitor, trace, and troubleshoot your applications
 						effortlessly.
 					</Typography.Paragraph>
 				</div>

-				<div className="login-form-card">
+				<ParentContainer>
+					<Label htmlFor="signupEmail" style={{ marginTop: 0 }}>
+						Email
+					</Label>
+					<FormContainer.Item name="email">
+						<Input
+							type="email"
+							id="email"
+							data-testid="email"
+							required
+							placeholder="name@yourcompany.com"
+							autoFocus
+							disabled={versionLoading}
+							className="login-form-input"
+							onPressEnter={onNextHandler}
+						/>
+					</FormContainer.Item>
+				</ParentContainer>
+
+				{sessionsContext && sessionsContext.orgs.length > 1 && (
 					<ParentContainer>
-						<Label htmlFor="signupEmail">Email address</Label>
-						<FormContainer.Item name="email">
-							<Input
-								type="email"
-								id="email"
-								data-testid="email"
-								required
-								placeholder="e.g. john@signoz.io"
-								autoFocus
-								disabled={versionLoading}
+						<Label htmlFor="orgId">Organization Name</Label>
+						<FormContainer.Item name="orgId">
+							<Select
+								id="orgId"
+								data-testid="orgId"
 								className="login-form-input"
-								onPressEnter={onNextHandler}
+								placeholder="Select your organization"
+								options={sessionsContext.orgs.map((org) => ({
+									value: org.id,
+									label: org.name || 'default',
+								}))}
+								onChange={(value: string): void => {
+									setSessionsOrgId(value);
+								}}
 							/>
 						</FormContainer.Item>
 					</ParentContainer>
+				)}

-					{sessionsContext && sessionsContext.orgs.length > 1 && (
-						<ParentContainer>
-							<Label htmlFor="orgId">Organization Name</Label>
-							<FormContainer.Item name="orgId">
-								<Select
-									id="orgId"
-									data-testid="orgId"
-									className="login-form-input login-form-select-no-border"
-									placeholder="Select your organization"
-									options={sessionsContext.orgs.map((org) => ({
-										value: org.id,
-										label: org.name || 'default',
-									}))}
-									onChange={(value: string): void => {
-										setSessionsOrgId(value);
-									}}
-								/>
-							</FormContainer.Item>
-						</ParentContainer>
-					)}
+				{sessionsContext && isPasswordAuthN && (
+					<ParentContainer>
+						<Label htmlFor="Password">Password</Label>
+						<FormContainer.Item name="password">
+							<Input.Password
+								required
+								id="currentPassword"
+								data-testid="password"
+								disabled={isSubmitting}
+								className="login-form-input"
+							/>
+						</FormContainer.Item>

-					{sessionsContext && isPasswordAuthN && (
-						<ParentContainer>
-							<div className="password-label-container">
-								<Label htmlFor="Password">Password</Label>
-								<Tooltip title="Ask your admin to reset your password and send you a new invite link">
-									<Typography.Link className="forgot-password-link">
-										Forgot password?
-									</Typography.Link>
-								</Tooltip>
-							</div>
-							<FormContainer.Item name="password">
-								<Input.Password
-									required
-									placeholder="Enter password"
-									id="currentPassword"
-									data-testid="password"
-									disabled={isSubmitting}
-									className="login-form-input"
-								/>
-							</FormContainer.Item>
-						</ParentContainer>
-					)}
-				</div>
+						<div style={{ marginTop: 8 }}>
+							<Tooltip title="Ask your admin to reset your password and send you a new invite link">
+								<Typography.Link>Forgot password?</Typography.Link>
+							</Tooltip>
+						</div>
+					</ParentContainer>
+				)}

-				{errorMessage && <AuthError error={errorMessage} />}
-
-				<div className="login-form-actions">
+				<Space
+					style={{ marginTop: 16 }}
+					align="start"
+					direction="vertical"
+					size={20}
+				>
 					{!sessionsContext && (
 						<Button
-							disabled={!isNextButtonEnabled}
-							variant="solid"
+							disabled={versionLoading || sessionsContextLoading}
+							type="primary"
 							onClick={onNextHandler}
 							data-testid="initiate_login"
-							className="login-submit-btn"
-							suffixIcon={<ArrowRight size={12} />}
+							className="periscope-btn primary next-btn"
+							icon={<ArrowRight size={12} />}
 						>
 							Next
 						</Button>
@@ -381,34 +342,32 @@ function Login(): JSX.Element {

 					{sessionsContext && isCallbackAuthN && (
 						<Button
-							disabled={!isSubmitButtonEnabled}
-							variant="solid"
-							type="submit"
-							color="primary"
+							disabled={isSubmitting}
+							type="primary"
+							htmlType="submit"
 							data-testid="callback_authn_submit"
 							data-attr="signup"
-							className="login-submit-btn"
-							suffixIcon={<ArrowRight size={12} />}
+							className="periscope-btn primary next-btn"
+							icon={<ArrowRight size={12} />}
 						>
-							Sign in with SSO
+							Login With Callback
 						</Button>
 					)}

 					{sessionsContext && isPasswordAuthN && (
 						<Button
-							disabled={!isSubmitButtonEnabled}
-							variant="solid"
-							color="primary"
+							disabled={isSubmitting}
+							type="primary"
 							data-testid="password_authn_submit"
-							type="submit"
+							htmlType="submit"
 							data-attr="signup"
-							className="login-submit-btn"
-							suffixIcon={<ArrowRight size={12} />}
+							className="periscope-btn primary next-btn"
+							icon={<ArrowRight size={12} />}
 						>
-							Sign in with Password
+							Login
 						</Button>
 					)}
-				</div>
+				</Space>
 			</FormContainer>
 		</div>
 	);
--- a/frontend/src/container/Login/styles.ts
+++ b/frontend/src/container/Login/styles.ts
@@ -1,21 +1,27 @@
-import { Form } from 'antd';
+import { Card, Form } from 'antd';
 import styled from 'styled-components';

-export const Label = styled.label`
-	font-family: var(--font-family-inter, Inter), sans-serif;
-	font-size: 13px;
-	font-weight: 600;
-	line-height: 1;
-	letter-spacing: -0.065px;
-	color: var(--levels-l1-foreground, #eceef2);
-	margin-bottom: 12px;
-	display: block;
-
-	.lightMode & {
-		color: var(--text-ink-500);
+export const FormWrapper = styled(Card)`
+	display: flex;
+	justify-content: center;
+	min-width: 390px;
+	min-height: 430px;
+	max-width: 432px;
+	flex: 1;
+	align-items: flex-start;
+	&&&.ant-card-body {
+		min-width: 100%;
 	}
 `;

+export const Label = styled.label`
+	margin-bottom: 11px;
+	margin-top: 19px;
+	display: inline-block;
+	font-size: 1rem;
+	line-height: 24px;
+`;
+
 export const FormContainer = styled(Form)`
 	display: flex;
 	flex-direction: column;
@@ -24,58 +30,9 @@ export const FormContainer = styled(Form)`

 	& .ant-form-item {
 		margin-bottom: 0px;
-		width: 100%;
-
-		& .ant-select {
-			width: 100%;
-			margin: 0;
-		}
-
-		& .ant-form-item-control {
-			width: 100%;
-		}
-
-		& .ant-form-item-control-input {
-			width: 100%;
-		}
-
-		& .ant-form-item-control-input-content {
-			width: 100%;
-		}
-	}
-
-	& .ant-input,
-	& .ant-input-password,
-	& .ant-select-selector {
-		background: var(--levels-l3-background, #23262e) !important;
-		border-color: var(--levels-l3-border, #2c303a) !important;
-		color: var(--levels-l1-foreground, #eceef2) !important;
-
-		.lightMode & {
-			background: var(--bg-vanilla-200, #f5f5f5) !important;
-			border-color: var(--bg-vanilla-300, #e9e9e9) !important;
-			color: var(--text-ink-500) !important;
-		}
-	}
-
-	& .ant-input::placeholder {
-		color: var(--levels-l3-foreground, #747b8b) !important;
-
-		.lightMode & {
-			color: var(--text-neutral-light-200, #80828d) !important;
-		}
-	}
-
-	& .ant-input:focus,
-	& .ant-input-password:focus,
-	& .ant-select-focused .ant-select-selector {
-		border-color: var(--semantic-primary-background, #4e74f8) !important;
-		box-shadow: none !important;
 	}
 `;

 export const ParentContainer = styled.div`
 	width: 100%;
-	display: flex;
-	flex-direction: column;
 `;
--- a/frontend/src/container/LogsExplorerList/ColumnView/ColumnView.tsx
+++ b/frontend/src/container/LogsExplorerList/ColumnView/ColumnView.tsx
@@ -47,6 +47,7 @@ function ColumnView({
 		onSetActiveLog: handleSetActiveLog,
 		onClearActiveLog: handleClearActiveLog,
 		onAddToQuery: handleAddToQuery,
+		onGroupByAttribute: handleGroupByAttribute,
 	} = useActiveLog();

 	const [showActiveLog, setShowActiveLog] = useState<boolean>(false);
@@ -270,6 +271,7 @@ function ColumnView({
 					onClose={handleLogDetailClose}
 					onAddToQuery={handleAddToQuery}
 					onClickActionItem={handleAddToQuery}
+					onGroupByAttribute={handleGroupByAttribute}
 				/>
 			)}
 		</div>
--- a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
+++ b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
@@ -58,7 +58,7 @@ const CustomTableRow: TableComponents<ILog>['TableRow'] = ({

 const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 	function InfinityTableView(
-		{ isLoading, tableViewProps, infitiyTableProps, handleChangeSelectedView },
+		{ isLoading, tableViewProps, infitiyTableProps },
 		ref,
 	): JSX.Element | null {
 		const {
@@ -72,6 +72,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 			onSetActiveLog,
 			onClearActiveLog,
 			onAddToQuery,
+			onGroupByAttribute,
 		} = useActiveLog();

 		const { dataSource, columns } = useTableView({
@@ -186,7 +187,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 						onClose={handleClearActiveContextLog}
 						onAddToQuery={handleAddToQuery}
 						selectedTab={VIEW_TYPES.CONTEXT}
-						handleChangeSelectedView={handleChangeSelectedView}
+						onGroupByAttribute={onGroupByAttribute}
 					/>
 				)}
 				<LogDetail
@@ -195,7 +196,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 					onClose={onClearActiveLog}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onAddToQuery}
-					handleChangeSelectedView={handleChangeSelectedView}
+					onGroupByAttribute={onGroupByAttribute}
 				/>
 			</>
 		);
--- a/frontend/src/container/LogsExplorerList/InfinityTableView/types.ts
+++ b/frontend/src/container/LogsExplorerList/InfinityTableView/types.ts
@@ -1,5 +1,4 @@
 import { UseTableViewProps } from 'components/Logs/TableView/types';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';

 export type InfinityTableProps = {
 	isLoading?: boolean;
@@ -7,5 +6,4 @@ export type InfinityTableProps = {
 	infitiyTableProps?: {
 		onEndReached: (index: number) => void;
 	};
-	handleChangeSelectedView?: ChangeViewFunctionType;
 };
--- a/frontend/src/container/LogsExplorerList/LogsExplorerList.interfaces.ts
+++ b/frontend/src/container/LogsExplorerList/LogsExplorerList.interfaces.ts
@@ -1,4 +1,3 @@
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import APIError from 'types/api/error';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -13,5 +12,4 @@ export type LogsExplorerListProps = {
 	error?: Error | APIError;
 	isFilterApplied: boolean;
 	isFrequencyChartVisible: boolean;
-	handleChangeSelectedView?: ChangeViewFunctionType;
 };
--- a/frontend/src/container/LogsExplorerList/index.tsx
+++ b/frontend/src/container/LogsExplorerList/index.tsx
@@ -48,7 +48,6 @@ function LogsExplorerList({
 	isError,
 	error,
 	isFilterApplied,
-	handleChangeSelectedView,
 }: LogsExplorerListProps): JSX.Element {
 	const ref = useRef<VirtuosoHandle>(null);
 	const { activeLogId } = useCopyLogLink();
@@ -57,6 +56,7 @@ function LogsExplorerList({
 		activeLog,
 		onClearActiveLog,
 		onAddToQuery,
+		onGroupByAttribute,
 		onSetActiveLog,
 	} = useActiveLog();

@@ -100,7 +100,6 @@ function LogsExplorerList({
 						linesPerRow={options.maxLines}
 						selectedFields={selectedFields}
 						fontSize={options.fontSize}
-						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				);
 			}
@@ -115,13 +114,11 @@ function LogsExplorerList({
 					activeLog={activeLog}
 					fontSize={options.fontSize}
 					linesPerRow={options.maxLines}
-					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			);
 		},
 		[
 			activeLog,
-			handleChangeSelectedView,
 			onAddToQuery,
 			onSetActiveLog,
 			options.fontSize,
@@ -152,10 +149,10 @@ function LogsExplorerList({
 						activeLogIndex,
 					}}
 					infitiyTableProps={{ onEndReached }}
-					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			);
 		}
+
 		function getMarginTop(): string {
 			switch (options.fontSize) {
 				case FontSize.SMALL:
@@ -198,7 +195,6 @@ function LogsExplorerList({
 		onEndReached,
 		getItemContent,
 		selectedFields,
-		handleChangeSelectedView,
 	]);

 	const isTraceToLogsNavigation = useMemo(() => {
@@ -277,8 +273,8 @@ function LogsExplorerList({
 						log={activeLog}
 						onClose={onClearActiveLog}
 						onAddToQuery={onAddToQuery}
+						onGroupByAttribute={onGroupByAttribute}
 						onClickActionItem={onAddToQuery}
-						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				</>
 			)}
--- a/frontend/src/container/LogsExplorerViews/index.tsx
+++ b/frontend/src/container/LogsExplorerViews/index.tsx
@@ -447,9 +447,8 @@ function LogsExplorerViewsContainer({
 					)}

 				<div className="logs-explorer-views-type-content">
-					{showLiveLogs && (
-						<LiveLogs handleChangeSelectedView={handleChangeSelectedView} />
-					)}
+					{showLiveLogs && <LiveLogs />}
+
 					{selectedPanelType === PANEL_TYPES.LIST && !showLiveLogs && (
 						<LogsExplorerList
 							isLoading={isLoading}
@@ -461,9 +460,9 @@ function LogsExplorerViewsContainer({
 							isError={isError}
 							error={error as APIError}
 							isFilterApplied={!isEmpty(listQuery?.filters?.items)}
-							handleChangeSelectedView={handleChangeSelectedView}
 						/>
 					)}
+
 					{selectedPanelType === PANEL_TYPES.TIME_SERIES && !showLiveLogs && (
 						<div className="time-series-view-container">
 							<div className="time-series-view-container-header">
@@ -484,6 +483,7 @@ function LogsExplorerViewsContainer({
 							/>
 						</div>
 					)}
+
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
 						<LogsExplorerTable
 							data={
--- a/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
+++ b/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
@@ -89,6 +89,7 @@ function LogsPanelComponent({
 		onSetActiveLog,
 		onClearActiveLog,
 		onAddToQuery,
+		onGroupByAttribute,
 	} = useActiveLog();

 	const handleRow = useCallback(
@@ -170,6 +171,7 @@ function LogsPanelComponent({
 				onClose={onClearActiveLog}
 				onAddToQuery={onAddToQuery}
 				onClickActionItem={onAddToQuery}
+				onGroupByAttribute={onGroupByAttribute}
 				isListViewPanel
 				listViewPanelSelectedFields={widget?.selectedLogFields}
 			/>
--- a/frontend/src/container/LogsTable/index.tsx
+++ b/frontend/src/container/LogsTable/index.tsx
@@ -38,6 +38,7 @@ function LogsTable(props: LogsTableProps): JSX.Element {
 		activeLog,
 		onClearActiveLog,
 		onAddToQuery,
+		onGroupByAttribute,
 		onSetActiveLog,
 	} = useActiveLog();

@@ -156,6 +157,7 @@ function LogsTable(props: LogsTableProps): JSX.Element {
 				selectedTab={VIEW_TYPES.OVERVIEW}
 				log={activeLog}
 				onClose={onClearActiveLog}
+				onGroupByAttribute={onGroupByAttribute}
 				onAddToQuery={onAddToQuery}
 				onClickActionItem={onAddToQuery}
 			/>
--- a/frontend/src/container/MetricsExplorer/Explorer/tests/utils.test.tsx
+++ b/frontend/src/container/MetricsExplorer/Explorer/tests/utils.test.tsx
@@ -80,14 +80,14 @@ describe('splitQueryIntoOneChartPerQuery', () => {
 		expect(result[2].builder.queryData).toHaveLength(2); // 2 disabled queries
 		expect(result[2].builder.queryData[0].disabled).toBe(true);
 		expect(result[2].builder.queryData[1].disabled).toBe(true);
-		expect(result[2].unit).toBe('');
+		expect(result[2].unit).toBeUndefined();
 		// Verify query 4 has the correct data
 		expect(result[3].builder.queryFormulas).toHaveLength(1);
 		expect(result[3].builder.queryFormulas[0]).toEqual(MOCK_FORMULA_DATA);
 		expect(result[3].builder.queryData).toHaveLength(2); // 2 disabled queries
 		expect(result[3].builder.queryData[0].disabled).toBe(true);
 		expect(result[3].builder.queryData[1].disabled).toBe(true);
-		expect(result[3].unit).toBe('');
+		expect(result[3].unit).toBeUndefined();
 	});
 });

--- a/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/tests/ColumnSelector.test.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/tests/ColumnSelector.test.tsx
@@ -73,7 +73,6 @@ const compositeQueryParam = {
 		},
 	],
 	id: '12e1d311-cb47-4b76-af68-65d8e85c9e0d',
-	unit: '',
 };

 jest.mock('react-router-dom', () => ({
--- a/frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx
@@ -1,16 +1,13 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import '../OnboardingQuestionaire.styles.scss';

-import { Button } from '@signozhq/button';
-import { Checkbox } from '@signozhq/checkbox';
-import { Input } from '@signozhq/input';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Checkbox, Input, Typography } from 'antd';
 import TextArea from 'antd/lib/input/TextArea';
 import logEvent from 'api/common/logEvent';
-import { ArrowRight } from 'lucide-react';
+import { ArrowLeft, ArrowRight, CheckCircle } from 'lucide-react';
 import { useEffect, useState } from 'react';

-import { OnboardingQuestionHeader } from '../OnboardingQuestionHeader';
-
 export interface SignozDetails {
 	interestInSignoz: string[] | null;
 	otherInterestInSignoz: string | null;
@@ -21,6 +18,7 @@ interface AboutSigNozQuestionsProps {
 	signozDetails: SignozDetails;
 	setSignozDetails: (details: SignozDetails) => void;
 	onNext: () => void;
+	onBack: () => void;
 }

 const interestedInOptions: Record<string, string> = {
@@ -36,6 +34,7 @@ export function AboutSigNozQuestions({
 	signozDetails,
 	setSignozDetails,
 	onNext,
+	onBack,
 }: AboutSigNozQuestionsProps): JSX.Element {
 	const [interestInSignoz, setInterestInSignoz] = useState<string[]>(
 		signozDetails?.interestInSignoz || [],
@@ -68,12 +67,6 @@ export function AboutSigNozQuestions({
 		}
 	};

-	const createInterestChangeHandler = (option: string) => (
-		checked: boolean,
-	): void => {
-		handleInterestChange(option, Boolean(checked));
-	};
-
 	const handleOnNext = (): void => {
 		setSignozDetails({
 			discoverSignoz,
@@ -90,12 +83,24 @@ export function AboutSigNozQuestions({
 		onNext();
 	};

+	const handleOnBack = (): void => {
+		setSignozDetails({
+			discoverSignoz,
+			interestInSignoz,
+			otherInterestInSignoz,
+		});
+
+		onBack();
+	};
+
 	return (
 		<div className="questions-container">
-			<OnboardingQuestionHeader
-				title="Set up your workspace"
-				subtitle="Tailor SigNoz to suit your observability needs."
-			/>
+			<Typography.Title level={3} className="title">
+				Tell Us About Your Interest in SigNoz
+			</Typography.Title>
+			<Typography.Paragraph className="sub-title">
+				We&apos;d love to know a little bit about you and your interest in SigNoz
+			</Typography.Paragraph>

 			<div className="questions-form-container">
 				<div className="questions-form">
@@ -118,28 +123,37 @@ export function AboutSigNozQuestions({
 							{Object.keys(interestedInOptions).map((option: string) => (
 								<div key={option} className="checkbox-item">
 									<Checkbox
-										id={`checkbox-${option}`}
 										checked={interestInSignoz.includes(option)}
-										onCheckedChange={createInterestChangeHandler(option)}
-										labelName={interestedInOptions[option]}
-									/>
+										onChange={(e): void => handleInterestChange(option, e.target.checked)}
+									>
+										{interestedInOptions[option]}
+									</Checkbox>
 								</div>
 							))}

-							<div className="checkbox-item checkbox-item-others">
+							<div className="checkbox-item">
 								<Checkbox
-									id="others-checkbox"
 									checked={interestInSignoz.includes('Others')}
-									onCheckedChange={createInterestChangeHandler('Others')}
-									labelName={interestInSignoz.includes('Others') ? '' : 'Others'}
-								/>
+									onChange={(e): void =>
+										handleInterestChange('Others', e.target.checked)
+									}
+								>
+									Others
+								</Checkbox>
 								{interestInSignoz.includes('Others') && (
 									<Input
 										type="text"
 										className="onboarding-questionaire-other-input"
-										placeholder="What got you interested in SigNoz?"
+										placeholder="Please specify your interest"
 										value={otherInterestInSignoz}
 										autoFocus
+										addonAfter={
+											otherInterestInSignoz !== '' ? (
+												<CheckCircle size={12} color={Color.BG_FOREST_500} />
+											) : (
+												''
+											)
+										}
 										onChange={(e): void => setOtherInterestInSignoz(e.target.value)}
 									/>
 								)}
@@ -148,16 +162,20 @@ export function AboutSigNozQuestions({
 					</div>
 				</div>

-				<div className="onboarding-buttons-container">
+				<div className="next-prev-container">
+					<Button type="default" className="next-button" onClick={handleOnBack}>
+						<ArrowLeft size={14} />
+						Back
+					</Button>
+
 					<Button
-						variant="solid"
-						color="primary"
-						className={`onboarding-next-button ${isNextDisabled ? 'disabled' : ''}`}
+						type="primary"
+						className={`next-button ${isNextDisabled ? 'disabled' : ''}`}
 						onClick={handleOnNext}
 						disabled={isNextDisabled}
-						suffixIcon={<ArrowRight size={12} />}
 					>
 						Next
+						<ArrowRight size={14} />
 					</Button>
 				</div>
 			</div>
--- a/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss
+++ b/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss
@@ -1,301 +1,30 @@
-.invite-team-members-table {
-	width: 100%;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.invite-team-members-table-header {
-	display: flex;
-	gap: 16px;
-	align-items: center;
-	flex-shrink: 0;
-	height: auto;
-	width: 100%;
-	justify-content: flex-end;
-
-	> div:first-child {
-		flex: 0 0 180px;
-		width: 180px;
-	}
-
-	> div:nth-child(2) {
-		flex: 1 0 0;
-		min-width: 0;
-	}
-
-	> div:last-child {
-		flex: 0 0 32px;
-		width: 32px;
-	}
-
-	.table-header-cell {
-		color: var(--levels-l1-foreground, #eceef2);
-		font-family: Inter;
-		font-size: 13px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 100%;
-		letter-spacing: -0.065px;
-	}
-}
-
-.invite-team-members-container {
-	display: flex;
-	flex-direction: column;
-	gap: 16px !important;
-	width: 100%;
-	flex: 0 1 auto;
-	min-height: 0;
-	overflow-x: hidden;
-}
-
-.invite-team-members-error-callout {
-	background: rgba(229, 72, 77, 0.1);
-	border: 1px solid rgba(229, 72, 77, 0.2);
-	border-radius: 4px;
-	animation: horizontal-shaking 300ms ease-out;
-}
-
-.team-member-row {
-	display: flex;
-	width: 100%;
-
-	> div:first-child {
-		flex: 0 0 180px;
-		width: 180px;
-		margin-right: 16px;
-	}
-
-	> div:nth-child(2) {
-		flex: 1 0 0;
-		min-width: 0;
-		margin-right: 8px;
-	}
-
-	> div:last-child {
-		flex: 0 0 32px;
-		width: 32px;
-	}
-}
-
-.team-member-cell {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-
-	&.email-cell {
-		width: 180px;
-		flex: 0 0 180px;
-	}
-
-	&.role-cell {
-		flex: 1 0 0;
-		min-width: 0;
-	}
-
-	&.action-cell {
-		display: flex;
-		align-items: flex-end;
-		justify-content: center;
-		flex: 0 0 32px;
-		width: 32px;
-		height: 32px;
-	}
-}
-
-.team-member-email-input {
-	width: 100%;
-	height: 32px !important;
-
-	height: 32px !important;
-	border-radius: 2px;
-	background: var(--levels-l3-background, #23262e);
-	border: 1px solid var(--levels-l3-border, #2c303a);
-	color: var(--levels-l1-foreground, #eceef2);
-	font-family: Inter, sans-serif;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 1;
-	letter-spacing: -0.065px;
-	padding: 6px 8px;
-	box-sizing: border-box;
-
-	&::placeholder {
-		color: var(--levels-l3-foreground, #747b8b);
-	}
-
-	&:hover {
-		border-color: var(--levels-l3-border, #2c303a);
-	}
-
-	&:focus {
-		border-color: var(--semantic-primary-background, #4e74f8);
-		box-shadow: none;
-	}
-}
-
-.team-member-role-select {
-	width: 100%;
-
-	.ant-select-selector {
-		height: 32px !important;
-		border-radius: 2px !important;
-		background: var(--levels-l3-background, #23262e) !important;
-		border: 1px solid var(--levels-l3-border, #2c303a) !important;
-		color: var(--levels-l1-foreground, #eceef2) !important;
-		font-family: Inter, sans-serif !important;
-		font-size: 13px !important;
-		font-weight: 400 !important;
-		line-height: 1 !important;
-		letter-spacing: -0.065px !important;
-		padding: 0 8px !important;
-		box-sizing: border-box !important;
-
-		.ant-select-selection-placeholder {
-			color: var(--levels-l3-foreground, #747b8b) !important;
-		}
-
-		.ant-select-selection-item {
-			color: var(--levels-l1-foreground, #eceef2) !important;
-			line-height: 30px !important;
-		}
-	}
-
-	.ant-select-arrow {
-		color: var(--levels-l3-foreground, #747b8b) !important;
-	}
-
-	&.ant-select-focused .ant-select-selector {
-		border-color: var(--semantic-primary-background, #4e74f8) !important;
-	}
-
-	&:hover .ant-select-selector {
-		border-color: var(--semantic-primary-background, #4e74f8) !important;
-	}
-}
-
-.remove-team-member-button {
-	display: flex !important;
-	align-items: center !important;
-	justify-content: center !important;
-	width: 32px !important;
-	height: 32px !important;
-	min-width: 32px !important;
-	border: none !important;
-	border-radius: 2px !important;
-	background: transparent !important;
-	color: #e5484d !important;
-	opacity: 0.6 !important;
-	cursor: pointer;
-	padding: 0 !important;
-	transition: background-color 0.2s, opacity 0.2s;
-	box-shadow: none !important;
-
-	svg {
-		color: #e5484d !important;
-		width: 12px !important;
-		height: 12px !important;
-	}
-
-	&:hover {
-		background: rgba(229, 72, 77, 0.1) !important;
-		opacity: 0.9 !important;
-		color: #e5484d !important;
-
-		svg {
-			color: #e5484d !important;
-		}
-	}
-
-	&:active {
-		opacity: 0.7 !important;
-		background: rgba(229, 72, 77, 0.15) !important;
-	}
-
-	&:focus-visible {
-		outline: 2px solid var(--semantic-primary-background, #4e74f8);
-		outline-offset: 2px;
-	}
-}
-
-.email-error-message,
-.role-error-message {
-	font-size: 12px;
-	font-weight: 400;
-	line-height: 16px;
-	margin-top: 4px;
-	width: 100%;
-	display: block;
-	color: var(--bg-cherry-500);
-}
-
-.invite-team-members-add-another-member-container {
-	width: 100%;
-	display: flex !important;
-	justify-content: flex-start !important;
-	align-items: center;
-	margin-top: 0;
-	flex-shrink: 0;
-	height: auto;
-}
-
-.add-another-member-button {
+.team-member-container {
 	display: flex;
 	align-items: center;
-	justify-content: center;
-	gap: 6px;
-	border-radius: 2px;
-	border: 1px dashed var(--semantic-secondary-border, #23262e) !important;
-	background: transparent !important;
-	color: var(--semantic-secondary-foreground, #adb4c2);
-	font-family: Inter, sans-serif;
-	font-size: 11px;
-	font-weight: 500;
-	line-height: 1;
-	letter-spacing: 0;
-	height: auto !important;
-	padding: 6px 8px;
-	transition: all 0.2s;
-	cursor: pointer;

-	// Ensure icon is visible
-	svg,
-	[class*='icon'] {
-		color: var(--semantic-secondary-foreground, #adb4c2) !important;
-		display: inline-block !important;
-		opacity: 1 !important;
-	}
+	.team-member-role-select {
+		width: 20%;

-	button,
-	& {
-		border: 1px dashed var(--semantic-secondary-border, #23262e) !important;
-		background: transparent !important;
-	}
-
-	&:hover {
-		border-color: var(--semantic-primary-background, #4e74f8) !important;
-		border-style: dashed !important;
-		color: var(--levels-l1-foreground, #eceef2);
-		background: rgba(78, 116, 248, 0.1) !important;
-
-		svg,
-		[class*='icon'] {
-			color: var(--levels-l1-foreground, #eceef2) !important;
-		}
-
-		button,
-		& {
-			border-color: var(--semantic-primary-background, #4e74f8) !important;
-			border-style: dashed !important;
-			background: rgba(78, 116, 248, 0.1) !important;
+		.ant-select-selector {
+			border: 1px solid #1d212d;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
 		}
 	}

-	&:focus-visible {
-		outline: 2px solid var(--semantic-primary-background, #4e74f8);
-		outline-offset: 2px;
+	.team-member-email-input {
+		width: 80%;
+		background-color: #121317;
+		border-top-right-radius: 0px;
+		border-bottom-right-radius: 0px;
+
+		.ant-input,
+		.ant-input-group-addon {
+			background-color: #121317 !important;
+			border-right: 0px;
+			border-top-right-radius: 0px;
+			border-bottom-right-radius: 0px;
+		}
 	}
 }

@@ -356,112 +85,19 @@
 }

 .lightMode {
-	.invite-team-members-table-header {
-		.table-header-cell {
-			color: var(--semantic-secondary-foreground, #747b8b);
-		}
-	}
-
-	.team-member-email-input {
-		background: var(--bg-vanilla-200, #f5f5f5) !important;
-		border-color: var(--bg-vanilla-300, #e9e9e9) !important;
-		color: var(--text-ink-500, #1a1d26) !important;
-
-		input {
-			background: var(--bg-vanilla-200, #f5f5f5) !important;
-			border-color: var(--bg-vanilla-300, #e9e9e9) !important;
-			color: var(--text-ink-500, #1a1d26) !important;
-
-			&::placeholder {
-				color: var(--text-neutral-light-200, #80828d) !important;
-			}
-
-			&:focus {
-				border-color: var(--semantic-primary-background, #4e74f8) !important;
+	.team-member-container {
+		.team-member-role-select {
+			.ant-select-selector {
+				border: 1px solid var(--bg-vanilla-300);
 			}
 		}

-		&::placeholder {
-			color: var(--text-neutral-light-200, #80828d) !important;
-		}
+		.team-member-email-input {
+			background-color: var(--bg-vanilla-100);

-		&:hover {
-			border-color: var(--bg-vanilla-300, #e9e9e9) !important;
-		}
-
-		&:focus {
-			border-color: var(--semantic-primary-background, #4e74f8) !important;
-		}
-	}
-
-	.team-member-role-select {
-		.ant-select-selector {
-			background: var(--levels-l3-background, #ffffff) !important;
-			border: 1px solid var(--levels-l3-border, #e9e9e9) !important;
-			color: var(--levels-l1-foreground, #1a1d26) !important;
-
-			.ant-select-selection-placeholder {
-				color: var(--levels-l3-foreground, #747b8b) !important;
-			}
-
-			.ant-select-selection-item {
-				color: var(--levels-l1-foreground, #1a1d26) !important;
-			}
-		}
-
-		.ant-select-arrow {
-			color: var(--levels-l3-foreground, #747b8b) !important;
-		}
-
-		&.ant-select-focused .ant-select-selector {
-			border-color: var(--semantic-primary-background, #4e74f8) !important;
-		}
-
-		&:hover .ant-select-selector {
-			border-color: var(--semantic-primary-background, #4e74f8) !important;
-		}
-	}
-
-	.remove-team-member-button {
-		border: none !important;
-		background: transparent !important;
-		color: var(--bg-cherry-500, #f56565) !important;
-
-		svg {
-			color: var(--bg-cherry-500, #f56565) !important;
-		}
-
-		&:hover {
-			background: rgba(245, 101, 101, 0.1) !important;
-			color: var(--bg-cherry-500, #f56565) !important;
-
-			svg {
-				color: var(--bg-cherry-500, #f56565) !important;
-			}
-		}
-	}
-
-	.add-another-member-button {
-		border: 1px dashed var(--semantic-secondary-border, #e9e9e9) !important;
-		background: transparent !important;
-		color: var(--semantic-secondary-foreground, #747b8b);
-
-		svg,
-		[class*='icon'] {
-			color: var(--semantic-secondary-foreground, #747b8b) !important;
-			display: inline-block !important;
-			opacity: 1 !important;
-		}
-
-		&:hover {
-			border-color: var(--semantic-primary-background, #4e74f8) !important;
-			border-style: dashed !important;
-			color: var(--levels-l1-foreground, #1a1d26);
-			background: rgba(78, 116, 248, 0.1) !important;
-
-			svg,
-			[class*='icon'] {
-				color: var(--levels-l1-foreground, #1a1d26) !important;
+			.ant-input,
+			.ant-input-group-addon {
+				background-color: var(--bg-vanilla-100) !important;
 			}
 		}
 	}
@@ -484,21 +120,3 @@
 		}
 	}
 }
-
-@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/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx
@@ -1,29 +1,25 @@
 import './InviteTeamMembers.styles.scss';

-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
-import { Input } from '@signozhq/input';
-import { Select, Typography } from 'antd';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Input, Select, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import inviteUsers from 'api/v1/invite/bulk/create';
-import AuthError from 'components/AuthError/AuthError';
 import { useNotifications } from 'hooks/useNotifications';
 import { cloneDeep, debounce, isEmpty } from 'lodash-es';
 import {
+	ArrowLeft,
 	ArrowRight,
-	ChevronDown,
-	CircleAlert,
+	CheckCircle,
 	Loader2,
 	Plus,
-	Trash2,
+	TriangleAlert,
+	X,
 } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
 import APIError from 'types/api/error';
 import { v4 as uuid } from 'uuid';

-import { OnboardingQuestionHeader } from '../OnboardingQuestionHeader';
-
 interface TeamMember {
 	email: string;
 	role: string;
@@ -37,6 +33,7 @@ interface InviteTeamMembersProps {
 	teamMembers: TeamMember[] | null;
 	setTeamMembers: (teamMembers: TeamMember[]) => void;
 	onNext: () => void;
+	onBack: () => void;
 }

 function InviteTeamMembers({
@@ -44,6 +41,7 @@ function InviteTeamMembers({
 	teamMembers,
 	setTeamMembers,
 	onNext,
+	onBack,
 }: InviteTeamMembersProps): JSX.Element {
 	const [teamMembersToInvite, setTeamMembersToInvite] = useState<
 		TeamMember[] | null
@@ -52,13 +50,11 @@ function InviteTeamMembers({
 		{},
 	);
 	const [hasInvalidEmails, setHasInvalidEmails] = useState<boolean>(false);
-	const [hasInvalidRoles, setHasInvalidRoles] = useState<boolean>(false);
-	const [inviteError, setInviteError] = useState<APIError | null>(null);
 	const { notifications } = useNotifications();

 	const defaultTeamMember: TeamMember = {
 		email: '',
-		role: '',
+		role: 'EDITOR',
 		name: '',
 		frontendBaseUrl: window.location.origin,
 		id: '',
@@ -66,12 +62,12 @@ function InviteTeamMembers({

 	useEffect(() => {
 		if (isEmpty(teamMembers)) {
-			const initialTeamMembers = Array.from({ length: 3 }, () => ({
+			const teamMember = {
 				...defaultTeamMember,
 				id: uuid(),
-			}));
+			};

-			setTeamMembersToInvite(initialTeamMembers);
+			setTeamMembersToInvite([teamMember]);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [teamMembers]);
@@ -91,32 +87,19 @@ function InviteTeamMembers({
 	// Validation function to check all users
 	const validateAllUsers = (): boolean => {
 		let isValid = true;
-		let hasEmailErrors = false;
-		let hasRoleErrors = false;

-		const updatedEmailValidity: Record<string, boolean> = {};
+		const updatedValidity: Record<string, boolean> = {};

 		teamMembersToInvite?.forEach((member) => {
 			const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(member.email);
-			const roleValid = Boolean(member.role && member.role.trim() !== '');
-
 			if (!emailValid || !member.email) {
 				isValid = false;
-				hasEmailErrors = true;
-			}
-			if (!roleValid) {
-				isValid = false;
-				hasRoleErrors = true;
-			}
-
-			if (member.id) {
-				updatedEmailValidity[member.id] = emailValid;
+				setHasInvalidEmails(true);
 			}
+			updatedValidity[member.id!] = emailValid;
 		});

-		setEmailValidity(updatedEmailValidity);
-		setHasInvalidEmails(hasEmailErrors);
-		setHasInvalidRoles(hasRoleErrors);
+		setEmailValidity(updatedValidity);

 		return isValid;
 	};
@@ -143,7 +126,10 @@ function InviteTeamMembers({
 				logEvent('Org Onboarding: Invite Team Members Failed', {
 					teamMembers: teamMembersToInvite,
 				});
-				setInviteError(error);
+				notifications.error({
+					message: error.getErrorCode(),
+					description: error.getErrorMessage(),
+				});
 			},
 		},
 	);
@@ -152,8 +138,6 @@ function InviteTeamMembers({
 		if (validateAllUsers()) {
 			setTeamMembers(teamMembersToInvite || []);
 			setHasInvalidEmails(false);
-			setHasInvalidRoles(false);
-			setInviteError(null);
 			sendInvites({
 				invites: teamMembersToInvite || [],
 			});
@@ -162,82 +146,37 @@ function InviteTeamMembers({

 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const debouncedValidateEmail = useCallback(
-		debounce((email: string, memberId: string, updatedMembers: TeamMember[]) => {
+		debounce((email: string, memberId: string) => {
 			const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
 			setEmailValidity((prev) => ({ ...prev, [memberId]: isValid }));
-
-			// Clear hasInvalidEmails only when ALL emails are valid
-			if (hasInvalidEmails) {
-				const allEmailsValid = updatedMembers.every(
-					(m) => m.email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(m.email),
-				);
-				if (allEmailsValid) {
-					setHasInvalidEmails(false);
-				}
-			}
 		}, 500),
-		[hasInvalidEmails],
+		[],
 	);

-	const handleEmailChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>, member: TeamMember): void => {
-			const { value } = e.target;
-			const updatedMembers = cloneDeep(teamMembersToInvite || []);
+	const handleEmailChange = (
+		e: React.ChangeEvent<HTMLInputElement>,
+		member: TeamMember,
+	): void => {
+		const { value } = e.target;
+		const updatedMembers = cloneDeep(teamMembersToInvite || []);

-			const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
-			if (memberToUpdate && member.id) {
-				memberToUpdate.email = value;
-				setTeamMembersToInvite(updatedMembers);
-				debouncedValidateEmail(value, member.id, updatedMembers);
-				// Clear API error when user starts typing
-				if (inviteError) {
-					setInviteError(null);
-				}
-			}
-		},
-		[debouncedValidateEmail, inviteError, teamMembersToInvite],
-	);
-
-	const createEmailChangeHandler = useCallback(
-		(member: TeamMember) => (e: React.ChangeEvent<HTMLInputElement>): void => {
-			handleEmailChange(e, member);
-		},
-		[handleEmailChange],
-	);
+		const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
+		if (memberToUpdate) {
+			memberToUpdate.email = value;
+			setTeamMembersToInvite(updatedMembers);
+			debouncedValidateEmail(value, member.id!);
+		}
+	};

 	const handleRoleChange = (role: string, member: TeamMember): void => {
 		const updatedMembers = cloneDeep(teamMembersToInvite || []);
 		const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
-		if (memberToUpdate && member.id) {
+		if (memberToUpdate) {
 			memberToUpdate.role = role;
 			setTeamMembersToInvite(updatedMembers);
-
-			// Clear errors when user selects a role
-			if (hasInvalidRoles) {
-				// Check if all roles are now valid
-				const allRolesValid = updatedMembers.every(
-					(m) => m.role && m.role.trim() !== '',
-				);
-				if (allRolesValid) {
-					setHasInvalidRoles(false);
-				}
-			}
-			if (inviteError) {
-				setInviteError(null);
-			}
 		}
 	};

-	const getValidationErrorMessage = (): string => {
-		if (hasInvalidEmails && hasInvalidRoles) {
-			return 'Please enter valid emails and select roles for all team members';
-		}
-		if (hasInvalidEmails) {
-			return 'Please enter valid emails for all team members';
-		}
-		return 'Please select roles for all team members';
-	};
-
 	const handleDoLater = (): void => {
 		logEvent('Org Onboarding: Clicked Do Later', {
 			currentPageID: 4,
@@ -246,137 +185,122 @@ function InviteTeamMembers({
 		onNext();
 	};

-	const isButtonDisabled = isSendingInvites || isLoading;
-
 	return (
 		<div className="questions-container">
-			<OnboardingQuestionHeader
-				title="Invite your team"
-				subtitle="SigNoz is a lot more useful with collaborators on board."
-			/>
+			<Typography.Title level={3} className="title">
+				Invite your team members
+			</Typography.Title>
+			<Typography.Paragraph className="sub-title">
+				The more your team uses SigNoz, the stronger your observability. Share
+				dashboards, collaborate on alerts, and troubleshoot faster together.
+			</Typography.Paragraph>

 			<div className="questions-form-container">
 				<div className="questions-form invite-team-members-form">
 					<div className="form-group">
 						<div className="question-label">
-							Invite your team to the SigNoz workspace
+							Collaborate with your team
+							<div className="question-sub-label">
+								Invite your team to the SigNoz workspace
+							</div>
 						</div>

-						<div className="invite-team-members-table">
-							<div className="invite-team-members-table-header">
-								<div className="table-header-cell email-header">Email address</div>
-								<div className="table-header-cell role-header">Roles</div>
-								<div className="table-header-cell action-header" />
-							</div>
+						<div className="invite-team-members-container">
+							{teamMembersToInvite?.map((member) => (
+								<div className="team-member-container" key={member.id}>
+									<Input
+										placeholder="your-teammate@org.com"
+										value={member.email}
+										type="email"
+										required
+										autoFocus
+										autoComplete="off"
+										className="team-member-email-input"
+										onChange={(e: React.ChangeEvent<HTMLInputElement>): void =>
+											handleEmailChange(e, member)
+										}
+										addonAfter={
+											// eslint-disable-next-line no-nested-ternary
+											emailValidity[member.id!] === undefined ? null : emailValidity[
+													member.id!
+											  ] ? (
+												<CheckCircle size={14} color={Color.BG_FOREST_500} />
+											) : (
+												<TriangleAlert size={14} color={Color.BG_SIENNA_500} />
+											)
+										}
+									/>
+									<Select
+										defaultValue={member.role}
+										onChange={(value): void => handleRoleChange(value, member)}
+										className="team-member-role-select"
+									>
+										<Select.Option value="VIEWER">Viewer</Select.Option>
+										<Select.Option value="EDITOR">Editor</Select.Option>
+										<Select.Option value="ADMIN">Admin</Select.Option>
+									</Select>

-							<div className="invite-team-members-container">
-								{teamMembersToInvite?.map((member) => (
-									<div className="team-member-row" key={member.id}>
-										<div className="team-member-cell email-cell">
-											<Input
-												placeholder="e.g. john@signoz.io"
-												value={member.email}
-												type="email"
-												id={`email-input-${member.id}`}
-												name={`email-input-${member.id}`}
-												required
-												autoComplete="off"
-												className="team-member-email-input"
-												onChange={createEmailChangeHandler(member)}
-											/>
-											{member.id &&
-												emailValidity[member.id] === false &&
-												member.email.trim() !== '' && (
-													<Typography.Text className="email-error-message">
-														Invalid email address
-													</Typography.Text>
-												)}
-										</div>
-										<div className="team-member-cell role-cell">
-											<Select
-												value={member.role || undefined}
-												onChange={(value): void => handleRoleChange(value, member)}
-												className="team-member-role-select"
-												placeholder="Select roles"
-												suffixIcon={<ChevronDown size={14} />}
-											>
-												<Select.Option value="VIEWER">Viewer</Select.Option>
-												<Select.Option value="EDITOR">Editor</Select.Option>
-												<Select.Option value="ADMIN">Admin</Select.Option>
-											</Select>
-										</div>
-										<div className="team-member-cell action-cell">
-											{teamMembersToInvite && teamMembersToInvite.length > 1 && (
-												<Button
-													variant="ghost"
-													color="secondary"
-													className="remove-team-member-button"
-													onClick={(): void => handleRemoveTeamMember(member.id)}
-													aria-label="Remove team member"
-												>
-													<Trash2 size={12} />
-												</Button>
-											)}
-										</div>
-									</div>
-								))}
-							</div>
+									{teamMembersToInvite?.length > 1 && (
+										<Button
+											type="primary"
+											className="remove-team-member-button"
+											icon={<X size={14} />}
+											onClick={(): void => handleRemoveTeamMember(member.id)}
+										/>
+									)}
+								</div>
+							))}
+						</div>

-							<div className="invite-team-members-add-another-member-container">
-								<Button
-									variant="dashed"
-									color="secondary"
-									className="add-another-member-button"
-									prefixIcon={<Plus size={12} />}
-									onClick={handleAddTeamMember}
-								>
-									Add another
-								</Button>
-							</div>
+						<div className="invite-team-members-add-another-member-container">
+							<Button
+								type="primary"
+								className="add-another-member-button"
+								icon={<Plus size={14} />}
+								onClick={handleAddTeamMember}
+							>
+								Member
+							</Button>
 						</div>
 					</div>
+
+					{hasInvalidEmails && (
+						<div className="error-message-container">
+							<Typography.Text className="error-message" type="danger">
+								<TriangleAlert size={14} /> Please enter valid emails for all team
+								members
+							</Typography.Text>
+						</div>
+					)}
 				</div>

-				{(hasInvalidEmails || hasInvalidRoles) && (
-					<Callout
-						type="error"
-						size="small"
-						showIcon
-						icon={<CircleAlert size={12} />}
-						className="invite-team-members-error-callout"
-						description={getValidationErrorMessage()}
-					/>
-				)}
-
-				{inviteError && !hasInvalidEmails && !hasInvalidRoles && (
-					<AuthError error={inviteError} />
-				)}
-
-				<div className="onboarding-buttons-container">
-					<Button
-						variant="solid"
-						color="primary"
-						className={`onboarding-next-button ${isButtonDisabled ? 'disabled' : ''}`}
-						onClick={handleNext}
-						disabled={isButtonDisabled}
-						suffixIcon={
-							isButtonDisabled ? (
-								<Loader2 className="animate-spin" size={12} />
-							) : (
-								<ArrowRight size={12} />
-							)
-						}
-					>
-						Complete
+				<div className="next-prev-container">
+					<Button type="default" className="next-button" onClick={onBack}>
+						<ArrowLeft size={14} />
+						Back
 					</Button>
+
 					<Button
-						variant="ghost"
-						color="secondary"
-						className="onboarding-do-later-button"
-						onClick={handleDoLater}
-						disabled={isButtonDisabled}
+						type="primary"
+						className="next-button"
+						onClick={handleNext}
+						loading={isSendingInvites || isLoading}
 					>
-						I&apos;ll do this later
+						Send Invites
+						<ArrowRight size={14} />
+					</Button>
+				</div>
+
+				<div className="do-later-container">
+					<Button
+						type="link"
+						className="do-later-button"
+						onClick={handleDoLater}
+						disabled={isSendingInvites}
+					>
+						{isLoading && <Loader2 className="animate-spin" size={16} />}
+
+						<span>I&apos;ll do this later</span>
 					</Button>
 				</div>
 			</div>
--- a/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionHeader/OnboardingQuestionHeader.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionHeader/OnboardingQuestionHeader.tsx
@@ -1,25 +0,0 @@
-import { Typography } from 'antd';
-
-interface OnboardingQuestionHeaderProps {
-	title: string;
-	subtitle: string;
-}
-
-export function OnboardingQuestionHeader({
-	title,
-	subtitle,
-}: OnboardingQuestionHeaderProps): JSX.Element {
-	return (
-		<div className="onboarding-header-section">
-			<div className="onboarding-header-icon">
-				<img src="/svgs/barber-pool.svg" alt="SigNoz" width="32" height="32" />
-			</div>
-			<Typography.Title level={4} className="onboarding-header-title">
-				{title}
-			</Typography.Title>
-			<Typography.Paragraph className="onboarding-header-subtitle">
-				{subtitle}
-			</Typography.Paragraph>
-		</div>
-	);
-}
--- a/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionHeader/index.ts
+++ b/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionHeader/index.ts
@@ -1 +0,0 @@
-export { OnboardingQuestionHeader } from './OnboardingQuestionHeader';
--- a/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss
+++ b/frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss
@@ -4,67 +4,36 @@
 	margin: 0 auto;
 	align-items: center;
 	flex-direction: column;
-	justify-content: center;
-	min-height: 100%;
+	height: 100vh;
+	max-width: 1176px;
+
+	.onboarding-questionaire-header {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		height: 56px;
+	}

 	.onboarding-questionaire-content {
+		height: calc(100vh - 56px - 60px);
 		width: 100%;
-		max-width: 576px;
 		display: flex;
 		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		gap: 0;
+		overflow-y: auto;

 		.questions-container {
-			width: 100%;
-			max-width: 576px;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			gap: 32px;
-		}
-
-		.onboarding-header-section {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			gap: 8px;
-			width: 100%;
-			padding: 0 24px;
-
-			.onboarding-header-icon {
-				width: 32px;
-				height: 32px;
-				font-size: 24px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				line-height: 1;
-			}
-
-			.onboarding-header-title {
-				font-family: Inter, sans-serif;
-				font-size: 18px;
-				font-weight: 600;
-				line-height: 1;
-				letter-spacing: 0;
-				color: var(--levels-l1-foreground, #eceef2);
-				margin: 0 !important;
-				text-align: center;
-			}
-
-			.onboarding-header-subtitle {
-				font-family: Inter, sans-serif;
-				font-size: 13px;
-				font-weight: 400;
-				line-height: 20px;
-				letter-spacing: -0.065px;
-				color: var(--semantic-secondary-foreground, #adb4c2);
-				max-width: 528px;
-				margin: 0 !important;
-				text-align: center;
-			}
+			color: var(--bg-vanilla-100, #fff);
+			font-family: Inter;
+			font-size: 24px;
+			font-style: normal;
+			font-weight: 600;
+			line-height: 32px;
+			max-width: 600px;
+			margin: 0 auto;
+			border-radius: 8px;
+			max-height: 100%;
 		}

 		.title {
@@ -85,22 +54,22 @@
 		}

 		.questions-form-container {
-			width: 100%;
-			display: flex;
-			flex-direction: column;
-			gap: 24px;
+			max-width: 600px;
+			width: 600px;
+			margin: 0 auto;
 		}

 		.questions-form {
 			width: 100%;
 			display: flex;
-			padding: 24px;
+			min-height: 420px;
+			padding: 20px 24px 24px 24px;
 			flex-direction: column;
-			align-items: stretch;
+			align-items: center;
 			gap: 24px;
 			border-radius: 4px;
-			border: 1px solid var(--semantic-secondary-border, #23262e);
-			background: var(--semantic-secondary-background, #121317);
+			border: 1px solid var(--bg-slate-500);
+			background: var(--bg-ink-400);

 			.ant-form-item {
 				margin-bottom: 0px !important;
@@ -117,36 +86,43 @@

 			.discover-signoz-input {
 				width: 100%;
-				height: 80px;
+				height: 100px;
 				resize: none;
-				border: 1px solid var(--levels-l3-border, #2c303a);
-				background: var(--levels-l3-background, #23262e);
-				color: var(--levels-l1-foreground, #eceef2);
-				border-radius: 2px;
-				font-family: Inter, sans-serif;
-				font-size: 13px;
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
+				color: var(--bg-vanilla-100);
+				border-radius: 4px;
+				font-size: 14px;
+				padding: 12px;
 				font-weight: 400;
-				line-height: 20px;
-				letter-spacing: -0.065px;
-				padding: 6px 8px;
-				box-sizing: border-box;

 				&::placeholder {
-					color: var(--levels-l3-foreground, #747b8b);
+					color: var(--bg-vanilla-400);
 					opacity: 1;
 				}
-
-				&:focus-visible {
-					outline: none;
-					border-color: var(--semantic-primary-background, #4e74f8);
-				}
 			}

 			&.invite-team-members-form {
-				padding-right: 12px;
+				min-height: calc(420px - 24px);
+				max-height: calc(420px - 24px);

-				.form-group {
-					gap: 24px !important;
+				.invite-team-members-container {
+					max-height: 260px;
+					overflow-y: auto;
+
+					&::-webkit-scrollbar {
+						width: 0.1rem;
+					}
+					&::-webkit-scrollbar-corner {
+						background: transparent;
+					}
+					&::-webkit-scrollbar-thumb {
+						background: rgb(136, 136, 136);
+						border-radius: 0.625rem;
+					}
+					&::-webkit-scrollbar-track {
+						background: transparent;
+					}
 				}
 			}
 		}
@@ -182,106 +158,30 @@
 		}

 		.question-label {
-			color: var(--levels-l1-foreground, #eceef2);
-			font-variant-numeric: slashed-zero;
-			font-family: Inter;
+			color: var(--bg-vanilla-100);
 			font-size: 13px;
 			font-style: normal;
-			font-weight: 600;
-			line-height: 100%;
-			letter-spacing: -0.065px;
-		}
-
-		.onboarding-buttons-container {
-			width: 100%;
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-		}
-
-		.onboarding-back-button {
-			width: 100%;
-			height: 32px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			gap: 8px;
-			border-radius: 2px;
-			background: transparent;
-			border: 1px solid var(--semantic-secondary-border, #23262e);
-			color: var(--semantic-secondary-foreground, #adb4c2);
-			font-family: Inter, sans-serif;
-			font-size: 11px;
 			font-weight: 500;
-			line-height: 1;
-			cursor: pointer;
-			transition: opacity 0.2s;
-
-			&:hover {
-				opacity: 0.8;
-				border-color: var(--semantic-primary-background, #4e74f8);
-			}
-
-			&:disabled {
-				opacity: 0.5;
-				cursor: not-allowed;
-			}
+			line-height: 20px;
 		}

-		.onboarding-next-button {
-			width: 100%;
-			height: 32px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			gap: 8px;
-			border-radius: 2px;
-			background: var(--semantic-primary-background, #4e74f8);
-			border: none;
-			color: var(--semantic-primary-foreground, #eceef2);
-			font-family: Inter, sans-serif;
+		.question-sub-label {
+			color: var(--bg-vanilla-400);
 			font-size: 11px;
-			font-weight: 500;
-			line-height: 1;
-			cursor: pointer;
-			opacity: 1;
-			transition: opacity 0.2s;
-
-			&:hover {
-				opacity: 0.9;
-			}
-
-			&.disabled {
-				opacity: 0.6;
-				cursor: not-allowed;
-				pointer-events: none;
-			}
+			font-style: normal;
+			font-weight: 400;
+			line-height: 16px;
 		}

-		.onboarding-do-later-button {
-			width: 100%;
-			height: 32px;
+		.next-prev-container {
 			display: flex;
+			justify-content: space-between;
 			align-items: center;
-			justify-content: center;
-			border-radius: 2px;
-			background: transparent;
-			border: none;
-			color: var(--semantic-secondary-foreground, #adb4c2);
-			font-family: Inter, sans-serif;
-			font-size: 11px;
-			font-weight: 500;
-			line-height: 1;
-			cursor: pointer;
-			transition: opacity 0.2s;
+			gap: 10px;
+			margin-bottom: 24px;

-			&:hover {
-				opacity: 0.8;
-			}
-
-			&:disabled {
-				opacity: 0.5;
-				cursor: not-allowed;
+			.ant-btn {
+				flex: 1;
 			}
 		}

@@ -289,38 +189,15 @@
 			display: flex;
 			flex-direction: column;
 			align-items: flex-start;
-			gap: 12px;
+			gap: 8px;
 			align-self: stretch;
 		}

 		.slider-container {
-			width: calc(100% - 16px);
+			width: 100%;

 			.ant-slider .ant-slider-mark {
-				margin-top: 12px;
-
-				.ant-slider-mark-text {
-					color: var(--levels-l3-foreground, #747b8b);
-					font-variant-numeric: lining-nums tabular-nums stacked-fractions
-						slashed-zero;
-					font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
-					font-family: Inter;
-					font-size: 11px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 100%;
-				}
-			}
-
-			&.logs-slider-container {
-				.ant-slider .ant-slider-mark {
-					.ant-slider-mark-text {
-						&:last-child {
-							left: calc(100% - 8px) !important;
-							white-space: nowrap;
-						}
-					}
-				}
+				font-size: 10px;
 			}
 		}

@@ -342,57 +219,29 @@
 		}

 		.question {
-			font-family: Inter, sans-serif;
-			color: var(--levels-l1-foreground, #eceef2);
-			font-variant-numeric: slashed-zero;
-			font-size: 13px;
+			color: var(--bg-vanilla-100);
+			font-size: 14px;
 			font-style: normal;
-			font-weight: 600;
-			line-height: 100%;
-			letter-spacing: -0.065px;
+			font-weight: 500;
+			line-height: 20px;

 			display: flex;
 			align-items: center;
 			gap: 8px;
-			margin-bottom: 4px;
-		}
-
-		.question-slider {
-			color: var(--levels-l1-foreground, #eceef2);
-			font-variant-numeric: slashed-zero;
-			font-family: Inter;
-			font-size: 13px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 100%;
-			letter-spacing: -0.065px;
-			display: flex;
-			align-items: center;
-			gap: 4px;
-			white-space: nowrap;
 		}

 		input[type='text'] {
 			width: 100%;
-			padding: 6px 8px;
+			padding: 12px;
 			border-radius: 2px;
-			font-size: 13px;
-			font-weight: 400;
-			line-height: 1;
-			letter-spacing: -0.065px;
-			height: 32px;
-			border: 1px solid var(--levels-l3-border, #2c303a);
-			background: var(--levels-l3-background, #23262e);
-			color: var(--levels-l1-foreground, #eceef2);
-			box-sizing: border-box;
-
-			&::placeholder {
-				color: var(--levels-l3-foreground, #747b8b);
-			}
+			font-size: 14px;
+			height: 40px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			color: var(--bg-vanilla-100);

 			&:focus-visible {
 				outline: none;
-				border-color: var(--semantic-primary-background, #4e74f8);
 			}
 		}

@@ -442,170 +291,34 @@
 			gap: 10px;
 		}

-		.observability-tools-checkbox-container {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 0 12px;
-			width: 528px;
-			align-items: flex-start;
-
-			.observability-tool-checkbox-item {
-				display: flex;
-				align-items: center;
-				gap: 8px;
-				height: 32px;
-				width: calc((528px - 12px) / 2);
-				min-width: 258px;
-				flex: 0 0 calc((528px - 12px) / 2);
-				padding: 0;
-				box-sizing: border-box;
-				cursor: pointer;
-
-				&.checkbox-item {
-					width: calc((528px - 12px) / 2) !important;
-					flex-direction: row;
-				}
-
-				&:hover {
-					opacity: 0.8;
-				}
-			}
-
-			.observability-tool-other-input {
-				width: 100%;
-				margin-top: 12px;
-			}
-		}
-
-		.opentelemetry-radio-container {
-			width: 528px;
-
-			.opentelemetry-radio-group {
-				width: 100%;
-
-				.opentelemetry-radio-items-wrapper {
-					display: flex;
-					flex-direction: row;
-					flex-wrap: nowrap;
-					gap: 12px;
-					width: 100%;
-				}
-
-				.opentelemetry-radio-item {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-					height: 32px;
-					width: calc((528px - 12px) / 2);
-					min-width: 258px;
-					flex: 0 0 calc((528px - 12px) / 2);
-					color: var(--levels-l1-foreground, #eceef2);
-					font-family: Inter, sans-serif;
-					font-size: 13px;
-					font-weight: 400;
-					line-height: 1;
-					letter-spacing: -0.065px;
-					box-sizing: border-box;
-
-					.ant-radio {
-						.ant-radio-inner {
-							width: 16px;
-							height: 16px;
-							border-color: var(--levels-l3-border, #2c303a);
-						}
-
-						&.ant-radio-checked .ant-radio-inner {
-							border-color: var(--semantic-primary-background, #4e74f8);
-							background-color: var(--semantic-primary-background, #4e74f8);
-						}
-					}
-				}
-			}
-		}
-
 		.checkbox-grid {
 			display: flex;
 			flex-direction: column;
-			gap: 0;
-			margin-top: 0;
-			width: 100%;
+			gap: 12px;
+			margin-top: 12px;
 		}

 		.checkbox-item {
 			display: flex;
-			flex-direction: row;
-			align-items: center;
+			flex-direction: column;
 			gap: 8px;
-			height: 32px;
-			padding: 0;
-			width: 100%;
-
-			label {
-				color: var(--levels-l1-foreground, #eceef2) !important;
-			}
-
-			&.checkbox-item-others {
-				.onboarding-questionaire-other-input {
-					display: flex;
-					align-items: center;
-					flex: 1 0 0;
-					height: 32px;
-					padding: 6px 8px;
-					gap: 4px;
-					border-radius: 2px;
-					border: 1px solid var(--levels-l3-border, #2c303a);
-					background: var(--levels-l3-background, #23262e);
-					color: var(--levels-l1-foreground, #eceef2);
-					font-family: Inter, sans-serif;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 100%;
-					letter-spacing: -0.065px;
-					font-variant-numeric: slashed-zero;
-					box-sizing: border-box;
-
-					&::placeholder {
-						color: var(--levels-l3-foreground, #747b8b);
-					}
-
-					&:focus {
-						border-color: var(--semantic-primary-background, #4e74f8);
-						color: var(--levels-l1-foreground, #eceef2);
-					}
-				}
-			}

 			.ant-checkbox-wrapper {
-				color: var(--levels-l1-foreground, #eceef2);
-				font-family: Inter, sans-serif;
-				font-size: 13px;
+				color: var(--bg-vanilla-400);
+				font-size: 14px;
 				font-weight: 400;
-				line-height: 1;
-				letter-spacing: -0.065px;
-				display: flex;
-				align-items: center;
-				gap: 8px;
-				width: 100%;

 				.ant-checkbox {
 					.ant-checkbox-inner {
-						width: 16px;
-						height: 16px;
-						border: 1.5px solid var(--levels-l3-background, #23262e);
-						border-radius: 2px;
-						background-color: transparent;
+						border-color: var(--bg-slate-100);
+						background-color: var(--bg-ink-200);
 					}

 					&.ant-checkbox-checked .ant-checkbox-inner {
-						background-color: var(--semantic-primary-background, #4e74f8);
-						border-color: var(--semantic-primary-background, #4e74f8);
+						background-color: var(--bg-robin-500);
+						border-color: var(--bg-robin-500);
 					}
 				}
-
-				span {
-					color: var(--levels-l1-foreground, #eceef2) !important;
-				}
 			}
 		}

@@ -646,14 +359,8 @@

 		.add-another-member-button,
 		.remove-team-member-button {
-			color: var(--semantic-secondary-foreground, #adb4c2);
-			text-align: center;
-			font-variant-numeric: slashed-zero;
-			font-family: Inter;
-			font-size: 11px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 100%;
+			font-size: 12px;
+			height: 32px;
 		}

 		.remove-team-member-button {
@@ -695,6 +402,26 @@
 			min-width: 258px;
 		}

+		.next-button {
+			display: flex;
+			height: 40px;
+			padding: 8px 12px 8px 16px;
+			justify-content: center;
+			align-items: center;
+			gap: 6px;
+			align-self: stretch;
+			border: 0px;
+			border-radius: 50px;
+			margin-top: 24px;
+			cursor: pointer;
+		}
+
+		.next-button.disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+			pointer-events: none;
+		}
+
 		.arrow {
 			font-size: 18px;
 			color: var(--bg-vanilla-100);
@@ -713,7 +440,7 @@
 		display: flex;
 		justify-content: flex-end;
 		align-items: center;
-		margin-top: 16px !important;
+		margin-top: 12px;
 	}
 }

@@ -734,24 +461,25 @@
 				color: var(--bg-slate-300);
 			}

-			.onboarding-header-title {
-				color: var(--levels-l1-foreground, #1a1d26) !important;
+			.title {
+				color: var(--bg-slate-300) !important;
 			}

-			.onboarding-header-subtitle {
-				color: var(--semantic-secondary-foreground, #747b8b) !important;
+			.sub-title {
+				color: var(--bg-slate-400) !important;
 			}

 			.questions-form {
 				width: 100%;
 				display: flex;
-				padding: 24px;
+				min-height: 420px;
+				padding: 20px 24px 24px 24px;
 				flex-direction: column;
-				align-items: stretch;
+				align-items: center;
 				gap: 24px;
 				border-radius: 4px;
-				border: 1px solid var(--semantic-secondary-border, #e9e9e9);
-				background: var(--semantic-secondary-background, #ffffff);
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-100);

 				.ant-form-item {
 					margin-bottom: 0px !important;
@@ -767,18 +495,35 @@
 				}

 				.discover-signoz-input {
-					border: 1px solid var(--levels-l3-border, #e9e9e9);
-					background: var(--levels-l3-background, #ffffff);
-					color: var(--levels-l1-foreground, #1a1d26);
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-100);
+					color: var(--text-ink-300);
 					font-weight: 400;

 					&::placeholder {
-						color: var(--levels-l3-foreground, #747b8b);
+						color: var(--bg-slate-400);
 						opacity: 1;
 					}
+				}

-					&:focus-visible {
-						border-color: var(--semantic-primary-background, #4e74f8);
+				&.invite-team-members-form {
+					.invite-team-members-container {
+						max-height: 260px;
+						overflow-y: auto;
+
+						&::-webkit-scrollbar {
+							width: 0.1rem;
+						}
+						&::-webkit-scrollbar-corner {
+							background: transparent;
+						}
+						&::-webkit-scrollbar-thumb {
+							background: rgb(136, 136, 136);
+							border-radius: 0.625rem;
+						}
+						&::-webkit-scrollbar-track {
+							background: transparent;
+						}
 					}
 				}
 			}
@@ -807,86 +552,36 @@
 				color: var(--bg-slate-300);
 			}

-			.question {
-				color: var(--levels-l1-foreground, #1a1d26);
+			.question-sub-label {
+				color: var(--bg-slate-400);
 			}

-			.question-slider {
-				color: var(--levels-l1-foreground, #1a1d26);
+			.question {
+				color: var(--bg-slate-300);
 			}

 			.checkbox-item {
-				label {
-					color: var(--levels-l1-foreground, #1a1d26) !important;
-				}
-
 				.ant-checkbox-wrapper {
-					color: var(--levels-l1-foreground, #1a1d26);
+					color: var(--bg-ink-300);

 					.ant-checkbox {
 						.ant-checkbox-inner {
-							border-color: var(--levels-l3-background, #ffffff);
-							background-color: transparent;
+							border-color: var(--bg-vanilla-300);
+							background-color: var(--bg-vanilla-100);
 						}

 						&.ant-checkbox-checked .ant-checkbox-inner {
-							background-color: var(--semantic-primary-background, #4e74f8);
-							border-color: var(--semantic-primary-background, #4e74f8);
+							background-color: var(--bg-robin-500);
+							border-color: var(--bg-robin-500);
 						}
 					}
-
-					span {
-						color: var(--levels-l1-foreground, #1a1d26) !important;
-					}
-				}
-
-				&.checkbox-item-others {
-					.onboarding-questionaire-other-input {
-						border: 1px solid var(--levels-l3-border, #e9e9e9);
-						background: var(--levels-l3-background, #ffffff);
-						color: var(--levels-l1-foreground, #1a1d26);
-
-						&::placeholder {
-							color: var(--levels-l3-foreground, #747b8b);
-						}
-
-						&:focus {
-							border-color: var(--semantic-primary-background, #4e74f8);
-							color: var(--levels-l1-foreground, #1a1d26);
-						}
-					}
-				}
-			}
-
-			.observability-tool-others-item {
-				.onboarding-questionaire-other-input {
-					border: 1px solid var(--levels-l3-border, #e9e9e9);
-					background: var(--levels-l3-background, #ffffff);
-					color: var(--levels-l1-foreground, #1a1d26);
-
-					&::placeholder {
-						color: var(--levels-l3-foreground, #747b8b);
-					}
-
-					&:focus {
-						border-color: var(--semantic-primary-background, #4e74f8);
-						color: var(--levels-l1-foreground, #1a1d26);
-					}
 				}
 			}

 			input[type='text'] {
-				border: 1px solid var(--levels-l3-border, #e9e9e9);
-				background: var(--levels-l3-background, #ffffff);
-				color: var(--levels-l3-foreground, #1a1d26);
-
-				&::placeholder {
-					color: var(--levels-l3-foreground, #747b8b);
-				}
-
-				&:focus-visible {
-					border-color: var(--semantic-primary-background, #4e74f8);
-				}
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
 			}

 			.radio-button,
@@ -976,36 +671,6 @@
 			.arrow {
 				color: var(--bg-slate-300);
 			}
-
-			.opentelemetry-radio-container {
-				.opentelemetry-radio-group {
-					.opentelemetry-radio-items-wrapper {
-						.opentelemetry-radio-item {
-							color: var(--levels-l1-foreground, #1a1d26);
-
-							.ant-radio {
-								.ant-radio-inner {
-									border-color: var(--levels-l3-border, #e9e9e9);
-								}
-
-								&.ant-radio-checked .ant-radio-inner {
-									border-color: var(--semantic-primary-background, #4e74f8);
-									background-color: var(--semantic-primary-background, #4e74f8);
-								}
-							}
-						}
-					}
-				}
-			}
-
-			.onboarding-back-button {
-				border-color: var(--semantic-secondary-border, #e9e9e9);
-				color: var(--semantic-secondary-foreground, #747b8b);
-
-				&:hover {
-					border-color: var(--semantic-primary-background, #4e74f8);
-				}
-			}
 		}
 	}
 }
--- a/frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx
@@ -1,11 +1,8 @@
-import { Button } from '@signozhq/button';
-import { Slider, Typography } from 'antd';
+import { Button, Slider, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { ArrowRight, Loader2, Minus } from 'lucide-react';
+import { ArrowLeft, ArrowRight, Loader2, Minus } from 'lucide-react';
 import { useEffect, useState } from 'react';

-import { OnboardingQuestionHeader } from '../OnboardingQuestionHeader';
-
 export interface OptimiseSignozDetails {
 	logsPerDay: number;
 	hostsPerDay: number;
@@ -50,6 +47,7 @@ interface OptimiseSignozNeedsProps {
 	optimiseSignozDetails: OptimiseSignozDetails;
 	setOptimiseSignozDetails: (details: OptimiseSignozDetails) => void;
 	onNext: () => void;
+	onBack: () => void;
 	onWillDoLater: () => void;
 	isUpdatingProfile: boolean;
 	isNextDisabled: boolean;
@@ -84,6 +82,7 @@ function OptimiseSignozNeeds({
 	optimiseSignozDetails,
 	setOptimiseSignozDetails,
 	onNext,
+	onBack,
 	onWillDoLater,
 	isNextDisabled,
 }: OptimiseSignozNeedsProps): JSX.Element {
@@ -132,6 +131,10 @@ function OptimiseSignozNeeds({
 		onNext();
 	};

+	const handleOnBack = (): void => {
+		onBack();
+	};
+
 	const handleWillDoLater = (): void => {
 		setOptimiseSignozDetails({
 			logsPerDay: 0,
@@ -186,24 +189,24 @@ function OptimiseSignozNeeds({

 	return (
 		<div className="questions-container">
-			<OnboardingQuestionHeader
-				title="Set up your workspace"
-				subtitle="Tailor SigNoz to suit your observability needs."
-			/>
+			<Typography.Title level={3} className="title">
+				Optimize SigNoz for Your Needs
+			</Typography.Title>
+			<Typography.Paragraph className="sub-title">
+				Give us a quick sense of your scale so SigNoz can keep up!
+			</Typography.Paragraph>

 			<div className="questions-form-container">
 				<div className="questions-form">
-					<div className="form-group">
-						<Typography.Paragraph className="question">
-							What does your scale approximately look like?
-						</Typography.Paragraph>
-					</div>
+					<Typography.Paragraph className="question">
+						What does your scale approximately look like?
+					</Typography.Paragraph>

 					<div className="form-group">
-						<label className="question-slider" htmlFor="organisationName">
+						<label className="question" htmlFor="organisationName">
 							Logs / Day
 						</label>
-						<div className="slider-container logs-slider-container">
+						<div className="slider-container">
 							<div>
 								<Slider
 									min={0}
@@ -227,7 +230,7 @@ function OptimiseSignozNeeds({
 					</div>

 					<div className="form-group">
-						<label className="question-slider" htmlFor="organisationName">
+						<label className="question" htmlFor="organisationName">
 							Metrics <Minus size={14} /> Number of Hosts
 						</label>
 						<div className="slider-container">
@@ -254,7 +257,7 @@ function OptimiseSignozNeeds({
 					</div>

 					<div className="form-group">
-						<label className="question-slider" htmlFor="organisationName">
+						<label className="question" htmlFor="organisationName">
 							Number of services
 						</label>
 						<div className="slider-container">
@@ -281,32 +284,34 @@ function OptimiseSignozNeeds({
 					</div>
 				</div>

-				<div className="onboarding-buttons-container">
+				<div className="next-prev-container">
 					<Button
-						variant="solid"
-						color="primary"
-						className={`onboarding-next-button ${
-							isUpdatingProfile || isNextDisabled ? 'disabled' : ''
-						}`}
-						onClick={handleOnNext}
-						disabled={isUpdatingProfile || isNextDisabled}
-						suffixIcon={
-							isUpdatingProfile ? (
-								<Loader2 className="animate-spin" size={12} />
-							) : (
-								<ArrowRight size={12} />
-							)
-						}
-					>
-						Next
-					</Button>
-					<Button
-						variant="ghost"
-						color="secondary"
-						className="onboarding-do-later-button"
-						onClick={handleWillDoLater}
+						type="default"
+						className="next-button"
+						onClick={handleOnBack}
 						disabled={isUpdatingProfile}
 					>
+						<ArrowLeft size={14} />
+						Back
+					</Button>
+
+					<Button
+						type="primary"
+						className="next-button"
+						onClick={handleOnNext}
+						disabled={isUpdatingProfile || isNextDisabled}
+					>
+						Next{' '}
+						{isUpdatingProfile ? (
+							<Loader2 className="animate-spin" />
+						) : (
+							<ArrowRight size={14} />
+						)}
+					</Button>
+				</div>
+
+				<div className="do-later-container">
+					<Button type="link" onClick={handleWillDoLater}>
 						I&apos;ll do this later
 					</Button>
 				</div>
--- a/frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx
@@ -1,15 +1,12 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import '../OnboardingQuestionaire.styles.scss';

-import { Button } from '@signozhq/button';
-import { Checkbox } from '@signozhq/checkbox';
-import { Input } from '@signozhq/input';
-import { Radio, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/es/radio';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Input, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import editOrg from 'api/organization/editOrg';
 import { useNotifications } from 'hooks/useNotifications';
-import { ArrowRight, Loader2 } from 'lucide-react';
+import { ArrowRight, CheckCircle, Loader2 } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -42,7 +39,6 @@ const observabilityTools = {
 	GCPNativeO11yTools: 'GCP-native o11y tools',
 	Honeycomb: 'Honeycomb',
 	None: 'None/Starting fresh',
-	Others: 'Others',
 };

 function OrgQuestions({
@@ -50,7 +46,7 @@ function OrgQuestions({
 	orgDetails,
 	onNext,
 }: OrgQuestionsProps): JSX.Element {
-	const { updateOrg } = useAppContext();
+	const { user, updateOrg } = useAppContext();
 	const { notifications } = useNotifications();

 	const { t } = useTranslation(['organizationsettings', 'common']);
@@ -72,12 +68,11 @@ function OrgQuestions({

 	const [isLoading, setIsLoading] = useState<boolean>(false);

-	const [usesOtel, setUsesOtel] = useState<boolean | null>(orgDetails.usesOtel);
+	const [usesOtel, setUsesOtel] = useState<boolean | null>(
+		orgDetails?.usesOtel || null,
+	);

 	const handleOrgNameUpdate = async (): Promise<void> => {
-		const usesObservability =
-			!observabilityTool?.includes('None') && observabilityTool !== null;
-
 		/* Early bailout if orgData is not set or if the organisation name is not set or if the organisation name is empty or if the organisation name is the same as the one in the orgData */
 		if (
 			!currentOrgData ||
@@ -86,7 +81,7 @@ function OrgQuestions({
 			orgDetails.organisationName === organisationName
 		) {
 			logEvent('Org Onboarding: Answered', {
-				usesObservability,
+				usesObservability: !observabilityTool?.includes('None'),
 				observabilityTool,
 				otherTool,
 				usesOtel,
@@ -94,7 +89,7 @@ function OrgQuestions({

 			onNext({
 				organisationName,
-				usesObservability,
+				usesObservability: !observabilityTool?.includes('None'),
 				observabilityTool,
 				otherTool,
 				usesOtel,
@@ -117,7 +112,7 @@ function OrgQuestions({
 				});

 				logEvent('Org Onboarding: Answered', {
-					usesObservability,
+					usesObservability: !observabilityTool?.includes('None'),
 					observabilityTool,
 					otherTool,
 					usesOtel,
@@ -125,7 +120,7 @@ function OrgQuestions({

 				onNext({
 					organisationName,
-					usesObservability,
+					usesObservability: !observabilityTool?.includes('None'),
 					observabilityTool,
 					otherTool,
 					usesOtel,
@@ -182,47 +177,31 @@ function OrgQuestions({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [organisationName, usesOtel, observabilityTool, otherTool]);

-	const createObservabilityToolHandler = (tool: string) => (
-		checked: boolean,
-	): void => {
-		if (checked) {
-			setObservabilityTool(tool);
-		} else if (observabilityTool === tool) {
-			setObservabilityTool(null);
-		}
-	};
-
-	const handleOtelChange = (value: string): void => {
-		setUsesOtel(value === 'yes');
-	};
-
 	const handleOnNext = (): void => {
 		handleOrgNameUpdate();
 	};

 	return (
 		<div className="questions-container">
-			<div className="onboarding-header-section">
-				<div className="onboarding-header-icon">🎉</div>
-				<Typography.Title level={4} className="onboarding-header-title">
-					Welcome to SigNoz Cloud
-				</Typography.Title>
-				<Typography.Paragraph className="onboarding-header-subtitle">
-					Let&apos;s get you started
-				</Typography.Paragraph>
-			</div>
+			<Typography.Title level={3} className="title">
+				{user?.displayName ? `Welcome, ${user.displayName}!` : 'Welcome!'}
+			</Typography.Title>
+			<Typography.Paragraph className="sub-title">
+				We&apos;ll help you get the most out of SigNoz, whether you&apos;re new to
+				observability or a seasoned pro.
+			</Typography.Paragraph>

 			<div className="questions-form-container">
 				<div className="questions-form">
 					<div className="form-group">
 						<label className="question" htmlFor="organisationName">
-							Name of your company
+							Your Organisation Name
 						</label>
-						<Input
+						<input
 							type="text"
 							name="organisationName"
 							id="organisationName"
-							placeholder="e.g. Simpsonville"
+							placeholder="For eg. Simpsonville..."
 							autoComplete="off"
 							value={organisationName}
 							onChange={(e): void => setOrganisationName(e.target.value)}
@@ -233,93 +212,105 @@ function OrgQuestions({
 						<label className="question" htmlFor="observabilityTool">
 							Which observability tool do you currently use?
 						</label>
-						<div className="observability-tools-checkbox-container">
-							{Object.entries(observabilityTools).map(([tool, label]) => {
-								if (tool === 'Others') {
-									return (
-										<div
-											key={tool}
-											className="checkbox-item observability-tool-checkbox-item observability-tool-others-item"
-										>
-											<Checkbox
-												id={`checkbox-${tool}`}
-												checked={observabilityTool === tool}
-												onCheckedChange={createObservabilityToolHandler(tool)}
-												labelName={observabilityTool === 'Others' ? '' : label}
-											/>
-											{observabilityTool === 'Others' && (
-												<Input
-													type="text"
-													className="onboarding-questionaire-other-input"
-													placeholder="What tool do you currently use?"
-													value={otherTool || ''}
-													autoFocus
-													onChange={(e): void => setOtherTool(e.target.value)}
-												/>
-											)}
-										</div>
-									);
-								}
-								return (
-									<div
-										key={tool}
-										className="checkbox-item observability-tool-checkbox-item"
-									>
-										<Checkbox
-											id={`checkbox-${tool}`}
-											checked={observabilityTool === tool}
-											onCheckedChange={createObservabilityToolHandler(tool)}
-											labelName={label}
-										/>
-									</div>
-								);
-							})}
+						<div className="two-column-grid">
+							{Object.keys(observabilityTools).map((tool) => (
+								<Button
+									key={tool}
+									type="primary"
+									className={`onboarding-questionaire-button ${
+										observabilityTool === tool ? 'active' : ''
+									}`}
+									onClick={(): void => setObservabilityTool(tool)}
+								>
+									{observabilityTools[tool as keyof typeof observabilityTools]}
+
+									{observabilityTool === tool && (
+										<CheckCircle size={12} color={Color.BG_FOREST_500} />
+									)}
+								</Button>
+							))}
+
+							{observabilityTool === 'Others' ? (
+								<Input
+									type="text"
+									className="onboarding-questionaire-other-input"
+									placeholder="Please specify the tool"
+									value={otherTool || ''}
+									autoFocus
+									addonAfter={
+										otherTool && otherTool !== '' ? (
+											<CheckCircle size={12} color={Color.BG_FOREST_500} />
+										) : (
+											''
+										)
+									}
+									onChange={(e): void => setOtherTool(e.target.value)}
+								/>
+							) : (
+								<Button
+									type="primary"
+									className={`onboarding-questionaire-button ${
+										observabilityTool === 'Others' ? 'active' : ''
+									}`}
+									onClick={(): void => setObservabilityTool('Others')}
+								>
+									Others
+								</Button>
+							)}
 						</div>
 					</div>

 					<div className="form-group">
 						<div className="question">Do you already use OpenTelemetry?</div>
-						<div className="opentelemetry-radio-container">
-							<Radio.Group
-								value={((): string | undefined => {
-									if (usesOtel === true) return 'yes';
-									if (usesOtel === false) return 'no';
-									return undefined;
-								})()}
-								onChange={(e: RadioChangeEvent): void =>
-									handleOtelChange(e.target.value)
-								}
-								className="opentelemetry-radio-group"
+						<div className="two-column-grid">
+							<Button
+								type="primary"
+								name="usesObservability"
+								className={`onboarding-questionaire-button ${
+									usesOtel === true ? 'active' : ''
+								}`}
+								onClick={(): void => {
+									setUsesOtel(true);
+								}}
 							>
-								<div className="opentelemetry-radio-items-wrapper">
-									<Radio value="yes" className="opentelemetry-radio-item">
-										Yes
-									</Radio>
-									<Radio value="no" className="opentelemetry-radio-item">
-										No
-									</Radio>
-								</div>
-							</Radio.Group>
+								Yes{' '}
+								{usesOtel === true && (
+									<CheckCircle size={12} color={Color.BG_FOREST_500} />
+								)}
+							</Button>
+							<Button
+								type="primary"
+								className={`onboarding-questionaire-button ${
+									usesOtel === false ? 'active' : ''
+								}`}
+								onClick={(): void => {
+									setUsesOtel(false);
+								}}
+							>
+								No{' '}
+								{usesOtel === false && (
+									<CheckCircle size={12} color={Color.BG_FOREST_500} />
+								)}
+							</Button>
 						</div>
 					</div>
 				</div>

-				<Button
-					variant="solid"
-					color="primary"
-					className={`onboarding-next-button ${isNextDisabled ? 'disabled' : ''}`}
-					onClick={handleOnNext}
-					disabled={isNextDisabled}
-					suffixIcon={
-						isLoading ? (
-							<Loader2 className="animate-spin" size={12} />
+				<div className="next-prev-container">
+					<Button
+						type="primary"
+						className={`next-button ${isNextDisabled ? 'disabled' : ''}`}
+						onClick={handleOnNext}
+						disabled={isNextDisabled}
+					>
+						Next
+						{isLoading ? (
+							<Loader2 className="animate-spin" />
 						) : (
-							<ArrowRight size={12} />
-						)
-					}
-				>
-					Next
-				</Button>
+							<ArrowRight size={14} />
+						)}
+					</Button>
+				</div>
 			</div>
 		</div>
 	);
--- a/frontend/src/container/OnboardingQuestionaire/tests/OnboardingQuestionaire.test.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/tests/OnboardingQuestionaire.test.tsx
@@ -1,329 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import OnboardingQuestionaire from '../index';
-
-// Mock dependencies
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('lib/history', () => ({
-	__esModule: true,
-	default: {
-		push: jest.fn(),
-		location: {
-			pathname: '/onboarding',
-			search: '',
-			hash: '',
-			state: null,
-		},
-	},
-}));
-
-// API Endpoints
-const ORG_PREFERENCES_ENDPOINT = '*/api/v1/org/preferences/list';
-const UPDATE_ORG_PREFERENCE_ENDPOINT = '*/api/v1/org/preferences/name/update';
-const UPDATE_PROFILE_ENDPOINT = '*/api/gateway/v2/profiles/me';
-const EDIT_ORG_ENDPOINT = '*/api/v2/orgs/me';
-const INVITE_USERS_ENDPOINT = '*/api/v1/invite/bulk/create';
-
-const mockOrgPreferences = {
-	data: {
-		org_onboarding: false,
-	},
-	status: 'success',
-};
-
-describe('OnboardingQuestionaire Component', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-
-		server.use(
-			rest.get(ORG_PREFERENCES_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockOrgPreferences)),
-			),
-			rest.put(EDIT_ORG_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(204), ctx.json({ status: 'success' })),
-			),
-			rest.put(UPDATE_PROFILE_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
-			),
-			rest.post(UPDATE_ORG_PREFERENCE_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ status: 'success' })),
-			),
-			rest.post(INVITE_USERS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json({ status: 'success' })),
-			),
-		);
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	describe('Step 1: Organization Details', () => {
-		it('renders organization questions on initial load', () => {
-			render(<OnboardingQuestionaire />);
-
-			expect(screen.getByText(/welcome to signoz cloud/i)).toBeInTheDocument();
-			expect(screen.getByLabelText(/name of your company/i)).toBeInTheDocument();
-			expect(
-				screen.getByText(/which observability tool do you currently use/i),
-			).toBeInTheDocument();
-		});
-
-		it('disables next button when required fields are empty', () => {
-			render(<OnboardingQuestionaire />);
-
-			const nextButton = screen.getByRole('button', { name: /next/i });
-			expect(nextButton).toBeDisabled();
-		});
-
-		it('enables next button when all required fields are filled', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			render(<OnboardingQuestionaire />);
-
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-
-			const datadogCheckbox = screen.getByLabelText(/datadog/i);
-			await user.click(datadogCheckbox);
-
-			const otelYes = screen.getByRole('radio', { name: /yes/i });
-			await user.click(otelYes);
-
-			const nextButton = await screen.findByRole('button', { name: /next/i });
-			expect(nextButton).not.toBeDisabled();
-		});
-
-		it('shows other tool input when Others is selected', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			render(<OnboardingQuestionaire />);
-
-			const othersCheckbox = screen.getByLabelText(/^others$/i);
-			await user.click(othersCheckbox);
-
-			expect(
-				await screen.findByPlaceholderText(/what tool do you currently use/i),
-			).toBeInTheDocument();
-		});
-
-		it('proceeds to step 2 when next is clicked', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			render(<OnboardingQuestionaire />);
-
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-			await user.click(screen.getByLabelText(/datadog/i));
-			await user.click(screen.getByRole('radio', { name: /yes/i }));
-
-			const nextButton = screen.getByRole('button', { name: /next/i });
-			await user.click(nextButton);
-
-			expect(
-				await screen.findByText(/how did you first come across signoz/i, {}),
-			).toBeInTheDocument();
-		});
-	});
-
-	describe('Step 2: About SigNoz', () => {
-		it('renders about signoz questions after step 1 completion', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			render(<OnboardingQuestionaire />);
-
-			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-			await user.click(screen.getByLabelText(/datadog/i));
-			await user.click(screen.getByRole('radio', { name: /yes/i }));
-			await user.click(screen.getByRole('button', { name: /next/i }));
-
-			expect(
-				await screen.findByText(/set up your workspace/i, {}),
-			).toBeInTheDocument();
-			expect(
-				await screen.findByText(/how did you first come across signoz/i, {}),
-			).toBeInTheDocument();
-		});
-
-		it('disables next button when fields are empty', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			render(<OnboardingQuestionaire />);
-
-			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-			await user.click(screen.getByLabelText(/datadog/i));
-			await user.click(screen.getByRole('radio', { name: /yes/i }));
-			await user.click(screen.getByRole('button', { name: /next/i }));
-
-			await waitFor(() => {
-				const nextButton = screen.getByRole('button', { name: /next/i });
-				expect(nextButton).toBeDisabled();
-			});
-		});
-
-		it('enables next button when all fields are filled', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			render(<OnboardingQuestionaire />);
-
-			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-			await user.click(screen.getByLabelText(/datadog/i));
-			await user.click(screen.getByRole('radio', { name: /yes/i }));
-			await user.click(screen.getByRole('button', { name: /next/i }));
-
-			expect(
-				await screen.findByPlaceholderText(/e\.g\., googling/i, {}),
-			).toBeInTheDocument();
-
-			const discoverInput = screen.getByPlaceholderText(/e\.g\., googling/i);
-			await user.type(discoverInput, 'Found via Google search');
-
-			const interestCheckbox = screen.getByLabelText(
-				/lowering observability costs/i,
-			);
-			await user.click(interestCheckbox);
-
-			const nextButton = await screen.findByRole('button', { name: /next/i });
-			expect(nextButton).not.toBeDisabled();
-		});
-
-		it('shows other interest input when Others checkbox is selected', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			render(<OnboardingQuestionaire />);
-
-			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-			await user.click(screen.getByLabelText(/datadog/i));
-			await user.click(screen.getByRole('radio', { name: /yes/i }));
-			await user.click(screen.getByRole('button', { name: /next/i }));
-
-			expect(
-				await screen.findByText(/what got you interested in signoz/i, {}),
-			).toBeInTheDocument();
-
-			const othersCheckbox = screen.getByLabelText(/^others$/i);
-			await user.click(othersCheckbox);
-
-			expect(
-				await screen.findByPlaceholderText(
-					/what got you interested in signoz/i,
-					{},
-				),
-			).toBeInTheDocument();
-		});
-	});
-
-	describe('Step 3: Optimize SigNoz Needs', () => {
-		it('renders scale questions after step 2 completion', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			render(<OnboardingQuestionaire />);
-
-			// Navigate through steps 1 and 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-			await user.click(screen.getByLabelText(/datadog/i));
-			await user.click(screen.getByRole('radio', { name: /yes/i }));
-			await user.click(screen.getByRole('button', { name: /next/i }));
-
-			expect(
-				await screen.findByPlaceholderText(/e\.g\., googling/i, {}),
-			).toBeInTheDocument();
-
-			await user.type(
-				screen.getByPlaceholderText(/e\.g\., googling/i),
-				'Found via Google',
-			);
-			await user.click(screen.getByLabelText(/lowering observability costs/i));
-			await user.click(screen.getByRole('button', { name: /next/i }));
-
-			expect(
-				await screen.findByText(
-					/what does your scale approximately look like/i,
-					{},
-				),
-			).toBeInTheDocument();
-			expect(await screen.findByText(/logs \/ day/i, {})).toBeInTheDocument();
-			expect(
-				await screen.findByText(/number of services/i, {}),
-			).toBeInTheDocument();
-		});
-
-		it('shows do later button', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-			render(<OnboardingQuestionaire />);
-
-			// Navigate to step 3
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-			await user.click(screen.getByLabelText(/datadog/i));
-			await user.click(screen.getByRole('radio', { name: /yes/i }));
-			await user.click(screen.getByRole('button', { name: /next/i }));
-
-			expect(
-				await screen.findByPlaceholderText(/e\.g\., googling/i, {}),
-			).toBeInTheDocument();
-
-			await user.type(
-				screen.getByPlaceholderText(/e\.g\., googling/i),
-				'Found via Google',
-			);
-			await user.click(screen.getByLabelText(/lowering observability costs/i));
-			await user.click(screen.getByRole('button', { name: /next/i }));
-
-			expect(
-				await screen.findByRole('button', { name: /i'll do this later/i }),
-			).toBeInTheDocument();
-		});
-	});
-
-	describe('Error Handling', () => {
-		it('handles organization update error gracefully', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.put(EDIT_ORG_ENDPOINT, (_, res, ctx) =>
-					res(
-						ctx.status(500),
-						ctx.json({
-							error: {
-								code: 'INTERNAL_ERROR',
-								message: 'Failed to update organization',
-							},
-						}),
-					),
-				),
-			);
-
-			render(<OnboardingQuestionaire />);
-
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-			await user.click(screen.getByLabelText(/datadog/i));
-			await user.click(screen.getByRole('radio', { name: /yes/i }));
-
-			const nextButton = screen.getByRole('button', { name: /next/i });
-			await user.click(nextButton);
-
-			// Component should still be functional
-			await waitFor(() => {
-				expect(nextButton).not.toBeDisabled();
-			});
-		});
-	});
-});
--- a/frontend/src/container/OnboardingQuestionaire/index.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/index.tsx
@@ -22,6 +22,7 @@ import {
 	SignozDetails,
 } from './AboutSigNozQuestions/AboutSigNozQuestions';
 import InviteTeamMembers from './InviteTeamMembers/InviteTeamMembers';
+import { OnboardingHeader } from './OnboardingHeader/OnboardingHeader';
 import OptimiseSignozNeeds, {
 	OptimiseSignozDetails,
 } from './OptimiseSignozNeeds/OptimiseSignozNeeds';
@@ -56,6 +57,7 @@ const INITIAL_OPTIMISE_SIGNOZ_DETAILS: OptimiseSignozDetails = {
 	services: 0,
 };

+const BACK_BUTTON_EVENT_NAME = 'Org Onboarding: Back Button Clicked';
 const NEXT_BUTTON_EVENT_NAME = 'Org Onboarding: Next Button Clicked';
 const ONBOARDING_COMPLETE_EVENT_NAME = 'Org Onboarding: Complete';

@@ -205,14 +207,15 @@ function OnboardingQuestionaire(): JSX.Element {

 	return (
 		<div className="onboarding-questionaire-container">
+			<div className="onboarding-questionaire-header">
+				<OnboardingHeader />
+			</div>
+
 			<div className="onboarding-questionaire-content">
 				{currentStep === 1 && (
 					<OrgQuestions
 						currentOrgData={currentOrgData}
-						orgDetails={{
-							...orgDetails,
-							usesOtel: orgDetails.usesOtel ?? null,
-						}}
+						orgDetails={orgDetails}
 						onNext={(orgDetails: OrgDetails): void => {
 							logEvent(NEXT_BUTTON_EVENT_NAME, {
 								currentPageID: 1,
@@ -229,6 +232,13 @@ function OnboardingQuestionaire(): JSX.Element {
 					<AboutSigNozQuestions
 						signozDetails={signozDetails}
 						setSignozDetails={setSignozDetails}
+						onBack={(): void => {
+							logEvent(BACK_BUTTON_EVENT_NAME, {
+								currentPageID: 2,
+								prevPageID: 1,
+							});
+							setCurrentStep(1);
+						}}
 						onNext={(): void => {
 							logEvent(NEXT_BUTTON_EVENT_NAME, {
 								currentPageID: 2,
@@ -245,6 +255,13 @@ function OnboardingQuestionaire(): JSX.Element {
 						isUpdatingProfile={isUpdatingProfile}
 						optimiseSignozDetails={optimiseSignozDetails}
 						setOptimiseSignozDetails={setOptimiseSignozDetails}
+						onBack={(): void => {
+							logEvent(BACK_BUTTON_EVENT_NAME, {
+								currentPageID: 3,
+								prevPageID: 2,
+							});
+							setCurrentStep(2);
+						}}
 						onNext={handleUpdateProfile}
 						onWillDoLater={handleUpdateProfile}
 					/>
@@ -255,6 +272,13 @@ function OnboardingQuestionaire(): JSX.Element {
 						isLoading={updatingOrgOnboardingStatus}
 						teamMembers={teamMembers}
 						setTeamMembers={setTeamMembers}
+						onBack={(): void => {
+							logEvent(BACK_BUTTON_EVENT_NAME, {
+								currentPageID: 4,
+								prevPageID: 3,
+							});
+							setCurrentStep(3);
+						}}
 						onNext={handleOnboardingComplete}
 					/>
 				)}
--- a/frontend/src/container/PipelinePage/PipelineListsView/Preview/components/LogsList/index.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/Preview/components/LogsList/index.tsx
@@ -14,6 +14,7 @@ function LogsList({ logs }: LogsListProps): JSX.Element {
 		onSetActiveLog,
 		onClearActiveLog,
 		onAddToQuery,
+		onGroupByAttribute,
 	} = useActiveLog();

 	const makeLogDetailsHandler = (log: ILog) => (): void => onSetActiveLog(log);
@@ -48,6 +49,7 @@ function LogsList({ logs }: LogsListProps): JSX.Element {
 				onClose={onClearActiveLog}
 				onAddToQuery={onAddToQuery}
 				onClickActionItem={onAddToQuery}
+				onGroupByAttribute={onGroupByAttribute}
 			/>
 		</div>
 	);
--- a/frontend/src/container/ResetPassword/ResetPassword.styles.scss
+++ b/frontend/src/container/ResetPassword/ResetPassword.styles.scss
@@ -1,212 +0,0 @@
-.reset-password-card {
-	width: 576px;
-	max-width: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-
-	.reset-password-header {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 8px;
-		margin-bottom: 32px;
-		text-align: center;
-		padding: 0 24px;
-		width: 100%;
-
-		.reset-password-header-icon {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			margin-bottom: 8px;
-			color: var(--semantic-primary-foreground);
-		}
-
-		.reset-password-header-title {
-			font-family: Inter, sans-serif;
-			font-size: 18px;
-			font-weight: 600;
-			line-height: 1;
-			letter-spacing: 0;
-			color: var(--levels-l1-foreground, #eceef2);
-			margin: 0 !important;
-		}
-
-		.reset-password-header-subtitle {
-			font-family: Inter, sans-serif;
-			font-size: 13px;
-			font-weight: 400;
-			line-height: 20px;
-			letter-spacing: -0.065px;
-			color: var(--semantic-secondary-foreground, #adb4c2);
-			margin: 0 !important;
-			text-align: center;
-		}
-
-		.reset-password-version-badge {
-			margin-top: 8px;
-			padding: 4px 12px;
-			border-radius: 4px;
-			background: var(--semantic-secondary-background, #121317);
-			border: 1px solid var(--semantic-secondary-border, #23262e);
-			font-size: 11px;
-			font-weight: 400;
-			line-height: 1.45;
-			color: var(--semantic-secondary-foreground);
-			text-align: center;
-		}
-	}
-
-	.reset-password-form {
-		width: 100%;
-
-		.reset-password-form-container {
-			width: 100%;
-			background: var(--semantic-secondary-background, #121317);
-			border: 1px solid var(--semantic-secondary-border, #23262e);
-			border-radius: 4px;
-			padding: 24px;
-
-			.reset-password-form-fields {
-				width: 100%;
-				display: flex;
-				flex-direction: column;
-				gap: 24px;
-			}
-
-			.reset-password-field-container {
-				display: flex;
-				flex-direction: column;
-				gap: 12px;
-			}
-
-			.reset-password-form-input {
-				height: 32px;
-				width: 100%;
-				border-radius: 2px;
-
-				&.ant-input,
-				&.ant-input-password,
-				&.ant-input-affix-wrapper {
-					height: 32px;
-					border-radius: 2px;
-					background: var(--levels-l3-background, #23262e);
-					border-color: var(--levels-l3-border, #2c303a);
-				}
-
-				&.ant-input-affix-wrapper {
-					.ant-input {
-						height: auto;
-						background: transparent;
-					}
-				}
-			}
-		}
-
-		.reset-password-error-callout {
-			margin-top: 24px;
-			background: rgba(229, 72, 77, 0.1);
-			border: 1px solid rgba(229, 72, 77, 0.2);
-			border-radius: 4px;
-			animation: horizontal-shaking 300ms ease-out;
-		}
-
-		.reset-password-form-actions {
-			margin-top: 24px;
-			display: flex;
-			width: 100%;
-
-			.reset-password-submit-button {
-				width: 100%;
-			}
-		}
-
-		.ant-form-item {
-			margin-bottom: 0;
-		}
-	}
-
-	@media (max-width: 768px) {
-		width: 100%;
-		padding: 0 16px;
-
-		.reset-password-header {
-			padding: 0;
-		}
-	}
-}
-
-.lightMode {
-	.reset-password-card {
-		.reset-password-header {
-			.reset-password-header-icon {
-				color: var(--text-ink-500);
-			}
-
-			.reset-password-header-title {
-				color: var(--text-ink-500);
-			}
-
-			.reset-password-header-subtitle {
-				color: var(--text-neutral-light-200, #80828d);
-			}
-
-			.reset-password-version-badge {
-				background: var(--bg-vanilla-200, #f5f5f5);
-				border: 1px solid var(--bg-vanilla-300, #e9e9e9);
-				color: var(--text-neutral-light-200, #80828d);
-			}
-		}
-
-		.reset-password-form {
-			.reset-password-form-container {
-				background: var(--bg-base-white, #ffffff);
-				border: 1px solid var(--bg-vanilla-300, #e9e9e9);
-
-				.reset-password-form-input {
-					&.ant-input,
-					&.ant-input-password,
-					&.ant-input-affix-wrapper {
-						background: var(--bg-vanilla-200, #f5f5f5);
-						border-color: var(--bg-vanilla-300, #e9e9e9);
-						color: var(--text-ink-500);
-					}
-
-					&.ant-input-affix-wrapper {
-						.ant-input {
-							background: transparent;
-							color: var(--text-ink-500);
-						}
-					}
-
-					&::placeholder {
-						color: var(--text-neutral-light-200, #80828d);
-					}
-
-					&:focus {
-						border-color: var(--semantic-primary-background, #4e74f8);
-					}
-				}
-			}
-		}
-	}
-}
-
-@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/container/ResetPassword/ResetPassword.test.tsx
+++ b/frontend/src/container/ResetPassword/ResetPassword.test.tsx
@@ -0,0 +1,72 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
+
+import ResetPassword from './index';
+
+jest.mock('api/v1/factor_password/resetPassword', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.useFakeTimers();
+
+describe('ResetPassword Component', () => {
+	beforeEach(() => {
+		userEvent.setup();
+		jest.clearAllMocks();
+	});
+
+	it('renders ResetPassword component correctly', () => {
+		render(<ResetPassword version="1.0" />);
+		expect(screen.getByText('Reset Your Password')).toBeInTheDocument();
+		expect(screen.getByLabelText('Password')).toBeInTheDocument();
+		// eslint-disable-next-line sonarjs/no-duplicate-string
+		expect(screen.getByLabelText('Confirm Password')).toBeInTheDocument();
+		expect(
+			// eslint-disable-next-line sonarjs/no-duplicate-string
+			screen.getByRole('button', { name: 'Get Started' }),
+		).toBeInTheDocument();
+	});
+
+	it('disables the "Get Started" button when password is invalid', async () => {
+		render(<ResetPassword version="1.0" />);
+
+		const passwordInput = screen.getByLabelText('Password');
+		const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+		const submitButton = screen.getByRole('button', { name: 'Get Started' });
+
+		act(() => {
+			// Set invalid password
+			fireEvent.change(passwordInput, { target: { value: 'password' } });
+			fireEvent.change(confirmPasswordInput, { target: { value: 'password' } });
+		});
+
+		await waitFor(() => {
+			// Expect the "Get Started" button to be disabled
+			expect(submitButton).toBeDisabled();
+		});
+	});
+
+	it('enables the "Get Started" button when password is valid', async () => {
+		render(<ResetPassword version="1.0" />);
+
+		const passwordInput = screen.getByLabelText('Password');
+		const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+		const submitButton = screen.getByRole('button', { name: 'Get Started' });
+
+		act(() => {
+			fireEvent.change(passwordInput, { target: { value: 'newPassword' } });
+			fireEvent.change(confirmPasswordInput, { target: { value: 'newPassword' } });
+		});
+
+		act(() => {
+			jest.advanceTimersByTime(500);
+		});
+
+		await waitFor(() => {
+			// Expect the "Get Started" button to be enabled
+			expect(submitButton).toBeEnabled();
+		});
+	});
+});
--- a/frontend/src/container/ResetPassword/tests/ResetPassword.test.tsx
+++ b/frontend/src/container/ResetPassword/tests/ResetPassword.test.tsx
@@ -1,357 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-import { Logout } from 'api/utils';
-import ROUTES from 'constants/routes';
-import history from 'lib/history';
-import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import ResetPassword from '../index';
-
-// Mock dependencies
-jest.mock('lib/history', () => ({
-	__esModule: true,
-	default: {
-		push: jest.fn(),
-		location: {
-			search: '?token=reset-token-123',
-		},
-	},
-}));
-
-jest.mock('api/utils', () => ({
-	Logout: jest.fn(),
-}));
-
-const mockSuccessNotification = jest.fn();
-const mockErrorNotification = jest.fn();
-
-interface MockNotifications {
-	success: jest.MockedFunction<(...args: unknown[]) => void>;
-	error: jest.MockedFunction<(...args: unknown[]) => void>;
-}
-
-jest.mock('hooks/useNotifications', () => ({
-	useNotifications: (): { notifications: MockNotifications } => ({
-		notifications: {
-			success: mockSuccessNotification,
-			error: mockErrorNotification,
-		},
-	}),
-}));
-
-const RESET_PASSWORD_ENDPOINT = '*/resetPassword';
-
-const mockHistoryPush = history.push as jest.MockedFunction<
-	typeof history.push
->;
-
-describe('ResetPassword Component', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockSuccessNotification.mockClear();
-		mockErrorNotification.mockClear();
-		window.history.pushState({}, '', '/password-reset?token=reset-token-123');
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	describe('Initial Render', () => {
-		it('renders reset password form with all required fields', () => {
-			render(<ResetPassword version="1.0.0" />, undefined, {
-				initialRoute: '/password-reset?token=reset-token-123',
-			});
-
-			expect(screen.getByText(/reset your password/i)).toBeInTheDocument();
-			expect(screen.getByTestId('password')).toBeInTheDocument();
-			expect(screen.getByTestId('confirmPassword')).toBeInTheDocument();
-			expect(
-				screen.getByRole('button', { name: /reset password/i }),
-			).toBeInTheDocument();
-			expect(screen.getByText(/signoz 1\.0\.0/i)).toBeInTheDocument();
-		});
-
-		it('redirects to login when token is missing', () => {
-			window.history.pushState({}, '', '/password-reset');
-
-			render(<ResetPassword version="1.0.0" />, undefined, {
-				initialRoute: '/password-reset',
-			});
-
-			expect(Logout).toHaveBeenCalled();
-			expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
-		});
-	});
-
-	describe('Form Validation', () => {
-		it('disables submit button when passwords do not match', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<ResetPassword version="1.0.0" />, undefined, {
-				initialRoute: '/password-reset?token=reset-token-123',
-			});
-
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-			const submitButton = screen.getByRole('button', {
-				name: /reset password/i,
-			});
-
-			expect(submitButton).toBeDisabled();
-
-			await user.type(passwordInput, 'password123');
-			await user.type(confirmPasswordInput, 'password456');
-			await user.tab(); // Blur the confirm password field to trigger validation
-
-			await waitFor(() => {
-				expect(screen.getByText(/passwords don't match/i)).toBeInTheDocument();
-				expect(submitButton).toBeDisabled();
-			});
-		});
-
-		it('enables submit button when passwords match', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<ResetPassword version="1.0.0" />, undefined, {
-				initialRoute: '/password-reset?token=reset-token-123',
-			});
-
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-			const submitButton = screen.getByRole('button', {
-				name: /reset password/i,
-			});
-
-			await user.type(passwordInput, 'newPassword123');
-			await user.type(confirmPasswordInput, 'newPassword123');
-
-			// Wait for debounced validation
-			await waitFor(
-				() => {
-					expect(submitButton).not.toBeDisabled();
-				},
-				{ timeout: 200 },
-			);
-		});
-
-		it('clears password mismatch error when passwords match', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<ResetPassword version="1.0.0" />, undefined, {
-				initialRoute: '/password-reset?token=reset-token-123',
-			});
-
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-
-			await user.type(passwordInput, 'password123');
-			await user.type(confirmPasswordInput, 'password456');
-			await user.tab(); // Blur the confirm password field to trigger validation
-
-			await waitFor(() => {
-				expect(screen.getByText(/passwords don't match/i)).toBeInTheDocument();
-			});
-
-			await user.clear(confirmPasswordInput);
-			await user.type(confirmPasswordInput, 'password123');
-			await user.tab(); // Blur again to trigger validation
-
-			await waitFor(
-				() => {
-					expect(
-						screen.queryByText(/passwords don't match/i),
-					).not.toBeInTheDocument();
-				},
-				{ timeout: 200 },
-			);
-		});
-	});
-
-	describe('Successful Password Reset', () => {
-		it('successfully resets password and redirects to login', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.post(RESET_PASSWORD_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							message: 'Password reset successfully',
-						}),
-					),
-				),
-			);
-
-			render(<ResetPassword version="1.0.0" />, undefined, {
-				initialRoute: '/password-reset?token=reset-token-123',
-			});
-
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-			const submitButton = screen.getByRole('button', {
-				name: /reset password/i,
-			});
-
-			await user.type(passwordInput, 'newPassword123');
-			await user.type(confirmPasswordInput, 'newPassword123');
-
-			await waitFor(
-				() => {
-					expect(submitButton).not.toBeDisabled();
-				},
-				{ timeout: 200 },
-			);
-
-			await user.click(submitButton);
-
-			await waitFor(() => {
-				expect(mockSuccessNotification).toHaveBeenCalled();
-				expect(mockHistoryPush).toHaveBeenCalledWith(ROUTES.LOGIN);
-			});
-		});
-	});
-
-	describe('Error Handling', () => {
-		it('displays error message when reset password API fails', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.post(RESET_PASSWORD_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(400),
-						ctx.json({
-							error: {
-								code: 'INVALID_TOKEN',
-								message: 'Invalid or expired reset token',
-							},
-						}),
-					),
-				),
-			);
-
-			render(<ResetPassword version="1.0.0" />, undefined, {
-				initialRoute: '/password-reset?token=invalid-token',
-			});
-
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-			const submitButton = screen.getByRole('button', {
-				name: /reset password/i,
-			});
-
-			await user.type(passwordInput, 'newPassword123');
-			await user.type(confirmPasswordInput, 'newPassword123');
-
-			await waitFor(
-				() => {
-					expect(submitButton).not.toBeDisabled();
-				},
-				{ timeout: 200 },
-			);
-
-			await user.click(submitButton);
-
-			await waitFor(() => {
-				expect(
-					screen.getByText(/invalid or expired reset token/i),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('does not show API error when password mismatch error is shown', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.post(RESET_PASSWORD_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(400),
-						ctx.json({
-							error: {
-								code: 'INVALID_TOKEN',
-								message: 'Invalid token',
-							},
-						}),
-					),
-				),
-			);
-
-			render(<ResetPassword version="1.0.0" />, undefined, {
-				initialRoute: '/password-reset?token=reset-token-123',
-			});
-
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-
-			await user.type(passwordInput, 'password123');
-			await user.type(confirmPasswordInput, 'password456');
-			await user.tab(); // Blur the confirm password field to trigger validation
-
-			await waitFor(() => {
-				expect(screen.getByText(/passwords don't match/i)).toBeInTheDocument();
-				expect(screen.queryByText(/invalid token/i)).not.toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('Loading States', () => {
-		it('disables submit button during password reset', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.post(RESET_PASSWORD_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.delay(100),
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							message: 'Password reset successfully',
-						}),
-					),
-				),
-			);
-
-			render(<ResetPassword version="1.0.0" />, undefined, {
-				initialRoute: '/password-reset?token=reset-token-123',
-			});
-
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-			const submitButton = screen.getByRole('button', {
-				name: /reset password/i,
-			});
-
-			await user.type(passwordInput, 'newPassword123');
-			await user.type(confirmPasswordInput, 'newPassword123');
-
-			await waitFor(
-				() => {
-					expect(submitButton).not.toBeDisabled();
-				},
-				{ timeout: 200 },
-			);
-
-			await user.click(submitButton);
-
-			// Button should be disabled during API call
-			await waitFor(() => {
-				expect(submitButton).toBeDisabled();
-			});
-		});
-	});
-});
--- a/frontend/src/container/ResetPassword/index.tsx
+++ b/frontend/src/container/ResetPassword/index.tsx
@@ -1,24 +1,20 @@
-import './ResetPassword.styles.scss';
-
-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
-import { Form, Input as AntdInput, Typography } from 'antd';
+import { Button, Form, Input, Typography } from 'antd';
 import { Logout } from 'api/utils';
 import resetPasswordApi from 'api/v1/factor_password/resetPassword';
-import AuthError from 'components/AuthError/AuthError';
-import AuthPageContainer from 'components/AuthPageContainer';
+import WelcomeLeftContainer from 'components/WelcomeLeftContainer';
 import ROUTES from 'constants/routes';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
-import { ArrowRight, CircleAlert, KeyRound } from 'lucide-react';
 import { Label } from 'pages/SignUp/styles';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-use';
 import APIError from 'types/api/error';

-import { FormContainer } from './styles';
+import { ButtonContainer, FormContainer, FormWrapper } from './styles';
+
+const { Title } = Typography;

 type FormValues = { password: string; confirmPassword: string };

@@ -27,8 +23,6 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 		false,
 	);

-	const [errorMessage, setErrorMessage] = useState<APIError | null>();
-
 	const [isValidPassword, setIsValidPassword] = useState(false);
 	const [loading, setLoading] = useState(false);
 	const { t } = useTranslation(['common']);
@@ -48,7 +42,6 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 	const handleFormSubmit: () => Promise<void> = async () => {
 		try {
 			setLoading(true);
-			setErrorMessage(null);
 			const { password } = form.getFieldsValue();

 			await resetPasswordApi({
@@ -66,7 +59,10 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 			setLoading(false);
 		} catch (error) {
 			setLoading(false);
-			setErrorMessage(error as APIError);
+			notifications.error({
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
+			});
 		}
 	};

@@ -94,7 +90,6 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 			setIsValidPassword(false);
 		}

-		// Only clear error if passwords match while typing (but don't set error until blur)
 		if (
 			password &&
 			confirmPassword &&
@@ -102,39 +97,12 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 			confirmPassword.trim()
 		) {
 			const isValid = validatePassword();
-			setIsValidPassword(isValid);

-			// Only clear error if passwords match, don't set error on mismatch
-			if (isValid) {
-				setConfirmPasswordError(false);
-			}
+			setIsValidPassword(isValid);
+			setConfirmPasswordError(!isValid);
 		}
 	}, 100);

-	const handlePasswordBlur = (): void => {
-		const { confirmPassword } = form.getFieldsValue();
-		// Only validate if confirm password has a value
-		if (confirmPassword && confirmPassword.trim()) {
-			const isValid = validatePassword();
-			setIsValidPassword(isValid);
-			setConfirmPasswordError(!isValid);
-		}
-	};
-
-	const handleConfirmPasswordBlur = (): void => {
-		const { password, confirmPassword } = form.getFieldsValue();
-		if (
-			password &&
-			password.trim() &&
-			confirmPassword &&
-			confirmPassword.trim()
-		) {
-			const isValid = validatePassword();
-			setIsValidPassword(isValid);
-			setConfirmPasswordError(!isValid);
-		}
-	};
-
 	const handleSubmit = (): void => {
 		const isValid = validatePassword();
 		setIsValidPassword(isValid);
@@ -145,100 +113,69 @@ function ResetPassword({ version }: ResetPasswordProps): JSX.Element {
 	};

 	return (
-		<AuthPageContainer>
-			<div className="reset-password-card">
-				<div className="reset-password-header">
-					<div className="reset-password-header-icon">
-						<KeyRound size={32} />
-					</div>
-					<Typography.Title level={4} className="reset-password-header-title">
-						Reset Your Password
-					</Typography.Title>
-					<Typography.Paragraph className="reset-password-header-subtitle">
-						Monitor your applications. Find what is causing issues.
-					</Typography.Paragraph>
-					{version && (
-						<div className="reset-password-version-badge">SigNoz {version}</div>
-					)}
-				</div>
+		<WelcomeLeftContainer version={version}>
+			<FormWrapper>
+				<FormContainer form={form} onFinish={handleSubmit}>
+					<Title level={4}>Reset Your Password</Title>

-				<FormContainer
-					form={form}
-					onFinish={handleSubmit}
-					className="reset-password-form"
-				>
-					<div className="reset-password-form-container">
-						<div className="reset-password-form-fields">
-							<div className="reset-password-field-container">
-								<Label htmlFor="password">New Password</Label>
-								<Form.Item
-									name="password"
-									validateTrigger="onBlur"
-									rules={[{ required: true, message: 'Please enter password!' }]}
-								>
-									<AntdInput.Password
-										tabIndex={0}
-										onChange={handleValuesChange}
-										onBlur={handlePasswordBlur}
-										id="password"
-										data-testid="password"
-										placeholder="Enter new password"
-										className="reset-password-form-input"
-									/>
-								</Form.Item>
-							</div>
-
-							<div className="reset-password-field-container">
-								<Label htmlFor="confirmPassword">Confirm New Password</Label>
-								<Form.Item
-									name="confirmPassword"
-									validateTrigger="onBlur"
-									rules={[{ required: true, message: 'Please enter confirm password!' }]}
-								>
-									<AntdInput.Password
-										onChange={handleValuesChange}
-										onBlur={handleConfirmPasswordBlur}
-										id="confirmPassword"
-										data-testid="confirmPassword"
-										placeholder="Confirm your new password"
-										className="reset-password-form-input"
-									/>
-								</Form.Item>
-							</div>
-						</div>
-					</div>
-
-					{confirmPasswordError && (
-						<Callout
-							type="error"
-							size="small"
-							showIcon
-							icon={<CircleAlert size={12} />}
-							className="reset-password-error-callout"
-							description="Passwords don't match. Please try again."
-						/>
-					)}
-
-					{errorMessage && !confirmPasswordError && (
-						<AuthError error={errorMessage} />
-					)}
-
-					<div className="reset-password-form-actions">
-						<Button
-							variant="solid"
-							color="primary"
-							type="submit"
-							data-attr="reset-password"
-							disabled={!isValidPassword || loading}
-							className="reset-password-submit-button"
-							suffixIcon={<ArrowRight size={16} />}
+					<div>
+						<Label htmlFor="password">Password</Label>
+						<Form.Item
+							name="password"
+							validateTrigger="onBlur"
+							rules={[{ required: true, message: 'Please enter  password!' }]}
 						>
-							Reset Password
-						</Button>
+							<Input.Password
+								tabIndex={0}
+								onChange={handleValuesChange}
+								id="password"
+								data-testid="password"
+							/>
+						</Form.Item>
 					</div>
+					<div>
+						<Label htmlFor="confirmPassword">Confirm Password</Label>
+						<Form.Item
+							name="confirmPassword"
+							// validateTrigger="onChange"
+							validateTrigger="onBlur"
+							rules={[{ required: true, message: 'Please enter confirm password!' }]}
+						>
+							<Input.Password
+								onChange={handleValuesChange}
+								id="confirmPassword"
+								data-testid="confirmPassword"
+							/>
+						</Form.Item>
+
+						{confirmPasswordError && (
+							<Typography.Paragraph
+								italic
+								style={{
+									color: '#D89614',
+									marginTop: '0.50rem',
+								}}
+							>
+								The passwords entered do not match. Please double-check and re-enter
+								your passwords.
+							</Typography.Paragraph>
+						)}
+					</div>
+
+					<ButtonContainer>
+						<Button
+							type="primary"
+							htmlType="submit"
+							data-attr="signup"
+							loading={loading}
+							disabled={!isValidPassword || loading}
+						>
+							Get Started
+						</Button>
+					</ButtonContainer>
 				</FormContainer>
-			</div>
-		</AuthPageContainer>
+			</FormWrapper>
+		</WelcomeLeftContainer>
 	);
 }

--- a/frontend/src/container/ResetPassword/styles.ts
+++ b/frontend/src/container/ResetPassword/styles.ts
@@ -1,6 +1,24 @@
-import { Form } from 'antd';
+import { Card, Form } from 'antd';
 import styled from 'styled-components';

+export const FormWrapper = styled(Card)`
+	display: flex;
+	justify-content: center;
+	width: 432px;
+	flex: 1;
+
+	.ant-card-body {
+		width: 100%;
+	}
+`;
+
+export const ButtonContainer = styled.div`
+	margin-top: 1.8125rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;
+
 export const FormContainer = styled(Form)`
 	& .ant-form-item {
 		margin-bottom: 0px;
--- a/frontend/src/hooks/queryBuilder/useCreateAlerts.tsx
+++ b/frontend/src/hooks/queryBuilder/useCreateAlerts.tsx
@@ -1,7 +1,6 @@
 import logEvent from 'api/common/logEvent';
 import { getSubstituteVars } from 'api/dashboard/substitute_vars';
 import { prepareQueryRangePayloadV5 } from 'api/v5/v5';
-import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
@@ -10,7 +9,6 @@ import { MenuItemKeys } from 'container/GridCardLayout/WidgetHeader/contants';
 import { useNotifications } from 'hooks/useNotifications';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
-import { isEmpty } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useCallback, useMemo } from 'react';
 import { useMutation } from 'react-query';
@@ -73,21 +71,11 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 		queryRangeMutation.mutate(queryPayload, {
 			onSuccess: (data) => {
 				const updatedQuery = mapQueryDataFromApi(data.data.compositeQuery);
-				// If widget has a y-axis unit, set it to the updated query if it is not already set
-				if (widget.yAxisUnit && !isEmpty(widget.yAxisUnit)) {
-					updatedQuery.unit = widget.yAxisUnit;
-				}
-
-				const params = new URLSearchParams();
-				params.set(
-					QueryParams.compositeQuery,
-					encodeURIComponent(JSON.stringify(updatedQuery)),
-				);
-				params.set(QueryParams.panelTypes, widget.panelTypes);
-				params.set(QueryParams.version, ENTITY_VERSION_V5);
-				params.set(QueryParams.source, YAxisSource.DASHBOARDS);
-
-				const url = `${ROUTES.ALERTS_NEW}?${params.toString()}`;
+				const url = `${ROUTES.ALERTS_NEW}?${
+					QueryParams.compositeQuery
+				}=${encodeURIComponent(JSON.stringify(updatedQuery))}&${
+					QueryParams.panelTypes
+				}=${widget.panelTypes}&version=${ENTITY_VERSION_V5}`;

 				window.open(url, '_blank', 'noreferrer');
 			},
--- a/frontend/src/pages/LiveLogs/LiveLogs.tsx
+++ b/frontend/src/pages/LiveLogs/LiveLogs.tsx
@@ -1,5 +1,4 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { liveLogsCompositeQuery } from 'container/LiveLogs/constants';
 import LiveLogsContainer from 'container/LiveLogs/LiveLogsContainer';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -7,11 +6,7 @@ import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useEffect } from 'react';
 import { DataSource } from 'types/common/queryBuilder';

-interface LiveLogsProps {
-	handleChangeSelectedView?: ChangeViewFunctionType;
-}
-
-function LiveLogs({ handleChangeSelectedView }: LiveLogsProps): JSX.Element {
+function LiveLogs(): JSX.Element {
 	useShareBuilderUrl({ defaultValue: liveLogsCompositeQuery });
 	const { handleSetConfig } = useQueryBuilder();

@@ -19,13 +14,7 @@ function LiveLogs({ handleChangeSelectedView }: LiveLogsProps): JSX.Element {
 		handleSetConfig(PANEL_TYPES.LIST, DataSource.LOGS);
 	}, [handleSetConfig]);

-	return (
-		<LiveLogsContainer handleChangeSelectedView={handleChangeSelectedView} />
-	);
+	return <LiveLogsContainer />;
 }

-LiveLogs.defaultProps = {
-	handleChangeSelectedView: undefined,
-};
-
 export default LiveLogs;
--- a/frontend/src/pages/Login/Login.styles.scss
+++ b/frontend/src/pages/Login/Login.styles.scss
@@ -1,14 +1,116 @@
-.auth-form-card {
-	width: 576px;
-	max-width: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
+.login-page-container {
+	height: 100vh;
+	gap: 32px;
 	z-index: 1;

-	@media (max-width: 768px) {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.brand-container {
 		width: 100%;
-		padding: 0 16px;
+		padding: 16px 0px;
+
+		display: flex;
+		gap: 8px;
+		align-items: center;
+
+		.brand {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 16px;
+		}
+
+		.brand-logo {
+			width: 32px;
+			height: 32px;
+		}
+
+		.brand-title {
+			font-size: 24px;
+			font-weight: 500;
+
+			color: var(--text-vanilla-300);
+		}
+	}
+
+	.perilin-bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+		background: radial-gradient(circle, #fff 10%, transparent 0);
+		background-size: 12px 12px;
+		opacity: 1;
+
+		mask-image: radial-gradient(
+			circle at 50% 0,
+			rgba(11, 12, 14, 0.1) 0,
+			rgba(11, 12, 14, 0) 100%
+		);
+		-webkit-mask-image: radial-gradient(
+			circle at 50% 0,
+			rgba(11, 12, 14, 0.1) 0,
+			rgba(11, 12, 14, 0) 100%
+		);
+	}
+
+	.login-page-content {
+		width: 480px;
+
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+
+		border-radius: 16px;
+		padding: 32px;
+
+		background: rgb(18 19 23);
+
+		z-index: 1;
+	}
+}
+
+.lightMode {
+	.login-page-container {
+		.brand-container {
+			.brand-title {
+				color: var(--text-ink-500);
+			}
+		}
+
+		.perilin-bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+
+			background: radial-gradient(circle, #000000 10%, transparent 0);
+			background-size: 12px 12px;
+			opacity: 1;
+
+			mask-image: radial-gradient(
+				circle at 50% 0,
+				rgba(11, 12, 14, 0.1) 0,
+				rgba(11, 12, 14, 0) 100%
+			);
+			-webkit-mask-image: radial-gradient(
+				circle at 50% 0,
+				rgba(11, 12, 14, 0.1) 0,
+				rgba(11, 12, 14, 0) 100%
+			);
+		}
+
+		.login-page-content {
+			background: rgb(255 255 255);
+			border: 1px solid var(--border-vanilla-200);
+			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+			color: var(--text-ink-500);
+		}
 	}
 }
--- a/frontend/src/pages/Login/index.tsx
+++ b/frontend/src/pages/Login/index.tsx
@@ -1,15 +1,25 @@
 import './Login.styles.scss';

-import AuthPageContainer from 'components/AuthPageContainer';
 import LoginContainer from 'container/Login';

 function Login(): JSX.Element {
 	return (
-		<AuthPageContainer>
-			<div className="auth-form-card">
+		<div className="login-page-container">
+			<div className="perilin-bg" />
+			<div className="login-page-content">
+				<div className="brand-container">
+					<img
+						src="/Logos/signoz-brand-logo.svg"
+						alt="logo"
+						className="brand-logo"
+					/>
+
+					<div className="brand-title">SigNoz</div>
+				</div>
+
 				<LoginContainer />
 			</div>
-		</AuthPageContainer>
+		</div>
 	);
 }

--- a/frontend/src/pages/LogsExplorer/index.tsx
+++ b/frontend/src/pages/LogsExplorer/index.tsx
@@ -79,19 +79,21 @@ function LogsExplorer(): JSX.Element {

 	const handleChangeSelectedView = useCallback(
 		(view: ExplorerViews, querySearchParameters?: ICurrentQueryData): void => {
-			const nextPanelType = defaultTo(
-				explorerViewToPanelType[view],
-				PANEL_TYPES.LIST,
+			handleSetConfig(
+				defaultTo(explorerViewToPanelType[view], PANEL_TYPES.LIST),
+				DataSource.LOGS,
 			);

-			handleSetConfig(nextPanelType, DataSource.LOGS);
 			setSelectedView(view);

 			if (view !== ExplorerViews.LIST) {
 				setShowLiveLogs(false);
 			}

-			handleExplorerTabChange(nextPanelType, querySearchParameters);
+			handleExplorerTabChange(
+				explorerViewToPanelType[view],
+				querySearchParameters,
+			);
 		},
 		[handleSetConfig, handleExplorerTabChange, setSelectedView],
 	);
--- a/frontend/src/pages/OrgOnboarding/OrgOnboarding.tsx
+++ b/frontend/src/pages/OrgOnboarding/OrgOnboarding.tsx
@@ -1,11 +1,10 @@
-import AuthPageContainer from 'components/AuthPageContainer';
 import OnboardingQuestionaire from 'container/OnboardingQuestionaire';

 function OrgOnboarding(): JSX.Element {
 	return (
-		<AuthPageContainer isOnboarding>
+		<div className="onboarding-v2">
 			<OnboardingQuestionaire />
-		</AuthPageContainer>
+		</div>
 	);
 }

--- a/frontend/src/pages/SignUp/SignUp.styles.scss
+++ b/frontend/src/pages/SignUp/SignUp.styles.scss
@@ -1,247 +1,213 @@
-.signup-card {
-	width: 576px;
-	max-width: 100%;
+.signup-page-container {
+	height: 100vh;
+	gap: 32px;
+	z-index: 1;
+
 	display: flex;
-	flex-direction: column;
+	justify-content: center;
 	align-items: center;

-	.signup-form-header {
+	.brand-container {
+		width: 100%;
+		padding: 16px 0px;
+
+		display: flex;
+		gap: 8px;
+		align-items: center;
+
+		.brand {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 16px;
+		}
+
+		.brand-logo {
+			width: 32px;
+			height: 32px;
+		}
+
+		.brand-title {
+			font-size: 24px;
+			font-weight: 500;
+
+			color: var(--text-vanilla-300);
+		}
+	}
+
+	.perilin-bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+		background: radial-gradient(circle, #fff 10%, transparent 0);
+		background-size: 12px 12px;
+		opacity: 1;
+
+		mask-image: radial-gradient(
+			circle at 50% 0,
+			rgba(11, 12, 14, 0.1) 0,
+			rgba(11, 12, 14, 0) 100%
+		);
+		-webkit-mask-image: radial-gradient(
+			circle at 50% 0,
+			rgba(11, 12, 14, 0.1) 0,
+			rgba(11, 12, 14, 0) 100%
+		);
+	}
+
+	.signup-page-content {
+		width: 540px;
+
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 8px;
-		margin-bottom: 32px;
-		text-align: center;
-		padding: 0 24px;
-		width: 100%;
+		justify-content: center;

-		.signup-header-icon {
-			width: 32px;
-			height: 32px;
-			font-size: 24px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
+		border-radius: 16px;
+		padding: 32px;

-		.signup-header-title {
-			font-family: Inter, sans-serif;
-			font-size: 18px;
-			font-weight: 600;
-			line-height: 1;
-			letter-spacing: 0;
-			color: var(--levels-l1-foreground, #eceef2);
-			margin: 0 !important;
-		}
+		background: rgb(18 19 23);

-		.signup-header-subtitle {
-			font-family: Inter, sans-serif;
-			font-size: 13px;
-			font-weight: 400;
-			line-height: 20px;
-			letter-spacing: -0.065px;
-			color: var(--semantic-secondary-foreground, #adb4c2);
-			max-width: 360px;
-			margin: 0 !important;
-			text-align: center;
-		}
-	}
+		z-index: 1;

-	.signup-form {
-		width: 100%;
-
-		.signup-form-container {
+		.signup-form {
 			width: 100%;
-			background: var(--semantic-secondary-background, #121317);
-			border: 1px solid var(--semantic-secondary-border, #23262e);
-			border-radius: 4px;
-			padding: 24px;

-			.signup-form-fields {
-				width: 100%;
-				display: flex;
-				flex-direction: column;
-				gap: 24px;
+			.ant-input {
+				height: 40px;
 			}

-			.signup-field-container {
-				display: flex;
-				flex-direction: column;
-				gap: 12px;
-			}
+			.ant-input-affix-wrapper {
+				height: 40px;

-			.signup-form-input,
-			.signup-antd-input {
-				height: 32px;
-				width: 100%;
-				border-radius: 2px;
-
-				&.ant-input,
-				&.ant-input-password,
-				&.ant-input-affix-wrapper {
-					height: 32px;
-					border-radius: 2px;
-					background: var(--levels-l3-background, #23262e);
-					border-color: var(--levels-l3-border, #2c303a);
-				}
-
-				&.ant-input-affix-wrapper {
-					.ant-input {
-						height: auto;
-						background: transparent;
-					}
+				.ant-input {
+					height: auto;
 				}
 			}
+		}

-			.signup-form-input {
-				height: 32px;
-				background: var(--levels-l3-background, #23262e);
-				border: 1px solid var(--levels-l3-border, #2c303a);
-				border-radius: 2px;
-				padding: 6px 8px;
-				font-family: Inter, sans-serif;
-				font-size: 13px;
+		.signup-form-header {
+			.signup-form-header-text {
+				color: var(--text-vanilla-300);
+			}
+		}
+
+		.email-container,
+		.first-name-container,
+		.org-name-container {
+			display: flex;
+			flex-direction: column;
+
+			.ant-input {
+				width: 100%;
+			}
+		}
+
+		.password-section {
+			display: flex;
+			flex-direction: row;
+			gap: 16px;
+
+			margin-top: 16px;
+
+			.password-container {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+
+				flex: 1;
+			}
+		}
+
+		.password-error-container {
+			margin-top: 8px;
+			margin-bottom: 16px;
+
+			.password-error-message {
+				color: var(--text-amber-400);
+				font-size: 12px;
 				font-weight: 400;
-				line-height: 1;
-				letter-spacing: -0.065px;
-				color: var(--levels-l1-foreground, #eceef2);
+				line-height: 16px;
+				letter-spacing: 0px;
+				text-align: left;
+				text-underline-position: from-font;
+				text-decoration-skip-ink: none;

-				&::placeholder {
-					color: var(--levels-l3-foreground, #747b8b);
-				}
-
-				&:hover {
-					border-color: var(--levels-l3-border, #2c303a);
-				}
-
-				&:focus {
-					border-color: var(--semantic-primary-background, #4e74f8);
-					box-shadow: none;
-				}
+				margin-bottom: 4px;
 			}
 		}

-		.signup-error-callout,
-		.signup-info-callout {
-			margin-top: 24px;
-		}
-
-		.signup-error-callout {
-			background: rgba(229, 72, 77, 0.1);
-			border: 1px solid rgba(229, 72, 77, 0.2);
-			border-radius: 4px;
-			animation: horizontal-shaking 300ms ease-out;
-		}
-
 		.signup-info-message {
-			color: var(--semantic-secondary-foreground);
-			font-size: 11px;
+			color: var(--text-vanilla-300);
+			font-size: 12px;
 			font-weight: 400;
-			line-height: 1.45;
-			margin: 24px 0 0 0;
+			line-height: 16px;
+			letter-spacing: 0px;
 		}

-		.signup-form-actions {
-			margin-top: 24px;
+		.signup-button-container {
+			margin-top: 32px;
 			display: flex;
-			width: 100%;
-
-			.signup-submit-button {
-				width: 100%;
-			}
-		}
-
-		.ant-form-item {
-			margin-bottom: 0;
-		}
-	}
-
-	@media (max-width: 768px) {
-		width: 100%;
-		padding: 0 16px;
-
-		.signup-form-header {
-			padding: 0;
+			align-items: center;
 		}
 	}
 }

 .lightMode {
-	.signup-card {
-		.signup-form-header {
-			.signup-header-icon {
+	.signup-page-container {
+		.brand-container {
+			.brand-title {
 				color: var(--text-ink-500);
 			}
-
-			.signup-header-title {
-				color: var(--text-ink-500);
-			}
-
-			.signup-header-subtitle {
-				color: var(--text-neutral-light-200, #80828d);
-			}
 		}

-		.signup-form {
-			.signup-form-container {
-				background: var(--bg-base-white, #ffffff);
-				border: 1px solid var(--bg-vanilla-300, #e9e9e9);
+		.signup-form-header {
+			.signup-form-header-text {
+				color: var(--text-ink-500);
+			}
+		}

-				.signup-form-input,
-				.signup-antd-input {
-					&.ant-input,
-					&.ant-input-password,
-					&.ant-input-affix-wrapper {
-						background: var(--bg-vanilla-200, #f5f5f5);
-						border-color: var(--bg-vanilla-300, #e9e9e9);
-						color: var(--text-ink-500);
-					}
+		.perilin-bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;

-					&::placeholder {
-						color: var(--text-neutral-light-200, #80828d);
-					}
+			background: radial-gradient(circle, #000000 10%, transparent 0);
+			background-size: 12px 12px;
+			opacity: 1;

-					&:focus {
-						border-color: var(--semantic-primary-background, #4e74f8);
-					}
-				}
+			mask-image: radial-gradient(
+				circle at 50% 0,
+				rgba(11, 12, 14, 0.1) 0,
+				rgba(11, 12, 14, 0) 100%
+			);
+			-webkit-mask-image: radial-gradient(
+				circle at 50% 0,
+				rgba(11, 12, 14, 0.1) 0,
+				rgba(11, 12, 14, 0) 100%
+			);
+		}

-				.signup-form-input {
-					background: var(--bg-vanilla-200, #f5f5f5);
-					border-color: var(--bg-vanilla-300, #e9e9e9);
-					color: var(--text-ink-500);
+		.signup-page-content {
+			background: rgb(255 255 255);
+			border: 1px solid var(--border-vanilla-200);
+			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+			color: var(--text-ink-500);

-					&::placeholder {
-						color: var(--text-neutral-light-200, #80828d);
-					}
-
-					&:focus {
-						border-color: var(--semantic-primary-background, #4e74f8);
-					}
+			.password-error-container {
+				.password-error-message {
+					color: var(--text-amber-400);
 				}
 			}

 			.signup-info-message {
-				color: var(--text-neutral-light-200, #80828d);
+				color: var(--text-ink-500);
 			}
 		}
 	}
 }
-
-@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/pages/SignUp/SignUp.tsx
+++ b/frontend/src/pages/SignUp/SignUp.tsx
@@ -1,20 +1,15 @@
 import './SignUp.styles.scss';

-import { Button } from '@signozhq/button';
-import { Callout } from '@signozhq/callout';
-import { Input } from '@signozhq/input';
-import { Form, Input as AntdInput, Typography } from 'antd';
+import { Button, Form, Input, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import accept from 'api/v1/invite/id/accept';
 import getInviteDetails from 'api/v1/invite/id/get';
 import signUpApi from 'api/v1/register/post';
 import passwordAuthNContext from 'api/v2/sessions/email_password/post';
 import afterLogin from 'AppRoutes/utils';
-import AuthError from 'components/AuthError/AuthError';
-import AuthPageContainer from 'components/AuthPageContainer';
 import { useNotifications } from 'hooks/useNotifications';
-import { ArrowRight, CircleAlert } from 'lucide-react';
-import { useEffect, useMemo, useState } from 'react';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { SuccessResponseV2 } from 'types/api';
@@ -38,7 +33,6 @@ function SignUp(): JSX.Element {
 	const [confirmPasswordError, setConfirmPasswordError] = useState<boolean>(
 		false,
 	);
-	const [formError, setFormError] = useState<APIError | null>();
 	const { search } = useLocation();
 	const params = new URLSearchParams(search);
 	const token = params.get('token');
@@ -59,17 +53,13 @@ function SignUp(): JSX.Element {
 	const { notifications } = useNotifications();
 	const [form] = Form.useForm<FormValues>();

-	// Watch form values for reactive validation
-	const email = Form.useWatch('email', form);
-	const password = Form.useWatch('password', form);
-	const confirmPassword = Form.useWatch('confirmPassword', form);
-
 	useEffect(() => {
 		if (
 			getInviteDetailsResponse.status === 'success' &&
 			getInviteDetailsResponse.data.data
 		) {
 			const responseDetails = getInviteDetailsResponse.data.data;
+			form.setFieldValue('firstName', responseDetails.name);
 			form.setFieldValue('email', responseDetails.email);
 			form.setFieldValue('organizationName', responseDetails.organization);
 			setIsDetailsDisable(true);
@@ -107,6 +97,7 @@ function SignUp(): JSX.Element {
 	]);

 	const isSignUp = token === null;
+	const { showErrorModal } = useErrorModal();

 	const signUp = async (values: FormValues): Promise<void> => {
 		try {
@@ -126,7 +117,7 @@ function SignUp(): JSX.Element {

 			await afterLogin(token.data.accessToken, token.data.refreshToken);
 		} catch (error) {
-			setFormError(error as APIError);
+			showErrorModal(error as APIError);
 		}
 	};

@@ -145,7 +136,10 @@ function SignUp(): JSX.Element {

 			await afterLogin(token.data.accessToken, token.data.refreshToken);
 		} catch (error) {
-			setFormError(error as APIError);
+			notifications.error({
+				message: (error as APIError).getErrorCode(),
+				description: (error as APIError).getErrorMessage(),
+			});
 		}
 	};

@@ -155,7 +149,6 @@ function SignUp(): JSX.Element {
 			try {
 				const values = form.getFieldsValue();
 				setLoading(true);
-				setFormError(null);

 				if (isSignUp) {
 					await signUp(values);
@@ -179,57 +172,37 @@ function SignUp(): JSX.Element {
 	const handleValuesChange: (changedValues: Partial<FormValues>) => void = (
 		changedValues,
 	) => {
-		// Clear error if passwords match while typing (but don't set error until blur)
 		if ('password' in changedValues || 'confirmPassword' in changedValues) {
 			const { password, confirmPassword } = form.getFieldsValue();

-			if (password && confirmPassword && password === confirmPassword) {
-				setConfirmPasswordError(false);
-			}
-		}
-	};
-
-	const handlePasswordBlur = (): void => {
-		const { password, confirmPassword } = form.getFieldsValue();
-		// Only validate if confirm password has a value
-		if (confirmPassword) {
 			const isSamePassword = password === confirmPassword;
 			setConfirmPasswordError(!isSamePassword);
 		}
 	};

-	const handleConfirmPasswordBlur = (): void => {
-		const { password, confirmPassword } = form.getFieldsValue();
-		if (password && confirmPassword) {
-			const isSamePassword = password === confirmPassword;
-			setConfirmPasswordError(!isSamePassword);
-		}
+	const isValidForm: () => boolean = () => {
+		const values = form.getFieldsValue();
+		return (
+			loading ||
+			!values.email ||
+			!values.password ||
+			!values.confirmPassword ||
+			confirmPasswordError
+		);
 	};

-	const isValidForm = useMemo(
-		(): boolean =>
-			!loading &&
-			Boolean(email?.trim()) &&
-			Boolean(password?.trim()) &&
-			Boolean(confirmPassword?.trim()) &&
-			!confirmPasswordError,
-		[loading, email, password, confirmPassword, confirmPasswordError],
-	);
-
 	return (
-		<AuthPageContainer>
-			<div className="signup-card">
-				<div className="signup-form-header">
-					<div className="signup-header-icon">
-						<img src="/svgs/tv.svg" alt="TV" width="32" height="32" />
-					</div>
-					<Typography.Title level={4} className="signup-header-title">
-						Create your account
-					</Typography.Title>
-					<Typography.Paragraph className="signup-header-subtitle">
-						You&apos;re almost in. Create a password to start monitoring your
-						applications with SigNoz.
-					</Typography.Paragraph>
+		<div className="signup-page-container">
+			<div className="perilin-bg" />
+			<div className="signup-page-content">
+				<div className="brand-container">
+					<img
+						src="/Logos/signoz-brand-logo.svg"
+						alt="logo"
+						className="brand-logo"
+					/>
+
+					<div className="brand-title">SigNoz</div>
 				</div>

 				<FormContainer
@@ -238,100 +211,75 @@ function SignUp(): JSX.Element {
 					form={form}
 					className="signup-form"
 				>
-					<div className="signup-form-container">
-						<div className="signup-form-fields">
-							<div className="signup-field-container">
-								<Label htmlFor="signupEmail">Email address</Label>
-								<FormContainer.Item noStyle name="email">
-									<Input
-										placeholder="e.g. john@signoz.io"
-										type="email"
-										autoFocus
-										required
-										id="signupEmail"
-										disabled={isDetailsDisable}
-										className="signup-form-input"
-									/>
-								</FormContainer.Item>
-							</div>
+					<div className="signup-form-header">
+						<Typography.Paragraph className="signup-form-header-text">
+							You&apos;re almost in. Create a password to start monitoring your
+							applications with SigNoz.
+						</Typography.Paragraph>
+					</div>

-							<div className="signup-field-container">
-								<Label htmlFor="currentPassword">Set your password</Label>
-								<FormContainer.Item
-									name="password"
-									validateTrigger="onBlur"
-									rules={[{ required: true, message: 'Please enter password!' }]}
-								>
-									<AntdInput.Password
-										required
-										id="currentPassword"
-										placeholder="Enter new password"
-										disabled={loading}
-										className="signup-antd-input"
-										onBlur={handlePasswordBlur}
-									/>
-								</FormContainer.Item>
-							</div>
+					<div className="email-container">
+						<Label htmlFor="signupEmail">Email</Label>
+						<FormContainer.Item noStyle name="email">
+							<Input
+								placeholder="name@yourcompany.com"
+								type="email"
+								autoFocus
+								required
+								id="signupEmail"
+								disabled={isDetailsDisable}
+							/>
+						</FormContainer.Item>
+					</div>

-							<div className="signup-field-container">
-								<Label htmlFor="confirmPassword">Confirm your new password</Label>
-								<FormContainer.Item
-									name="confirmPassword"
-									validateTrigger="onBlur"
-									rules={[{ required: true, message: 'Please enter confirm password!' }]}
-								>
-									<AntdInput.Password
-										required
-										id="confirmPassword"
-										placeholder="Confirm your new password"
-										disabled={loading}
-										className="signup-antd-input"
-										onBlur={handleConfirmPasswordBlur}
-									/>
-								</FormContainer.Item>
-							</div>
-						</div>
+					<div className="password-container">
+						<Label htmlFor="currentPassword">Password</Label>
+						<FormContainer.Item noStyle name="password">
+							<Input.Password required id="currentPassword" />
+						</FormContainer.Item>
+					</div>
+
+					<div className="password-container">
+						<Label htmlFor="confirmPassword">Confirm Password</Label>
+						<FormContainer.Item noStyle name="confirmPassword">
+							<Input.Password required id="confirmPassword" />
+						</FormContainer.Item>
+					</div>
+
+					<div className="password-error-container">
+						{confirmPasswordError && (
+							<Typography.Paragraph
+								id="password-confirm-error"
+								className="password-error-message"
+							>
+								Passwords don’t match. Please try again
+							</Typography.Paragraph>
+						)}
 					</div>

 					{isSignUp && (
-						<Callout
-							type="info"
-							size="small"
-							showIcon
-							className="signup-info-callout"
-							description="This will create an admin account. If you are not an admin, please ask your admin for an invite link"
-						/>
+						<Typography.Paragraph className="signup-info-message">
+							* This will create an admin account. If you are not an admin, please ask
+							your admin for an invite link
+						</Typography.Paragraph>
 					)}

-					{confirmPasswordError && (
-						<Callout
-							type="error"
-							size="small"
-							showIcon
-							icon={<CircleAlert size={12} />}
-							className="signup-error-callout"
-							description="Passwords don't match. Please try again."
-						/>
-					)}
-
-					{formError && !confirmPasswordError && <AuthError error={formError} />}
-
-					<div className="signup-form-actions">
+					<div className="signup-button-container">
 						<Button
-							variant="solid"
-							color="primary"
-							type="submit"
+							type="primary"
+							htmlType="submit"
 							data-attr="signup"
-							disabled={!isValidForm}
-							className="signup-submit-button"
-							suffixIcon={<ArrowRight size={16} />}
+							loading={loading}
+							disabled={isValidForm()}
+							className="periscope-btn primary next-btn"
+							block
 						>
 							Access My Workspace
 						</Button>
 					</div>
 				</FormContainer>
 			</div>
-		</AuthPageContainer>
+		</div>
 	);
 }

--- a/frontend/src/pages/SignUp/tests/SignUp.test.tsx
+++ b/frontend/src/pages/SignUp/tests/SignUp.test.tsx
@@ -1,531 +0,0 @@
-/* eslint-disable sonarjs/no-identical-functions */
-/* eslint-disable sonarjs/no-duplicate-string */
-import afterLogin from 'AppRoutes/utils';
-import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { InviteDetails } from 'types/api/user/getInviteDetails';
-import { SignupResponse } from 'types/api/v1/register/post';
-import { Token } from 'types/api/v2/sessions/email_password/post';
-
-import SignUp from '../SignUp';
-
-// Mock dependencies - must be before imports
-jest.mock('AppRoutes/utils', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-const mockAfterLogin = jest.mocked(afterLogin);
-
-jest.mock('api/common/logEvent', () => ({
-	__esModule: true,
-	default: jest.fn(),
-}));
-
-jest.mock('lib/history', () => ({
-	__esModule: true,
-	default: {
-		push: jest.fn(),
-		location: {
-			search: '',
-		},
-	},
-}));
-
-const REGISTER_ENDPOINT = '*/api/v1/register';
-const EMAIL_PASSWORD_ENDPOINT = '*/api/v2/sessions/email_password';
-const INVITE_DETAILS_ENDPOINT = '*/api/v1/invite/*';
-const ACCEPT_INVITE_ENDPOINT = '*/api/v1/invite/accept';
-
-interface MockSignupResponse extends SignupResponse {
-	orgId: string;
-}
-
-const mockSignupResponse: MockSignupResponse = {
-	orgId: 'test-org-id',
-	createdAt: Date.now(),
-	email: 'test@signoz.io',
-	id: 'test-user-id',
-	displayName: 'Test User',
-	role: 'ADMIN',
-};
-
-const mockTokenResponse: Token = {
-	accessToken: 'mock-access-token',
-	refreshToken: 'mock-refresh-token',
-};
-
-const mockInviteDetails: InviteDetails = {
-	email: 'invited@signoz.io',
-	name: 'Invited User',
-	organization: 'Test Org',
-	createdAt: Date.now(),
-	role: 'ADMIN',
-	token: 'invite-token-123',
-};
-
-describe('SignUp Component - Regular Signup', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockAfterLogin.mockClear();
-		window.history.pushState({}, '', '/signup');
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	describe('Initial Render', () => {
-		it('renders signup form with all required fields', () => {
-			render(<SignUp />, undefined, { initialRoute: '/signup' });
-
-			expect(screen.getByText(/create your account/i)).toBeInTheDocument();
-			expect(screen.getByLabelText(/email address/i)).toBeInTheDocument();
-			expect(screen.getByLabelText(/set your password/i)).toBeInTheDocument();
-			expect(
-				screen.getByLabelText(/confirm your new password/i),
-			).toBeInTheDocument();
-			expect(
-				screen.getByRole('button', { name: /access my workspace/i }),
-			).toBeInTheDocument();
-		});
-
-		it('shows info callout for admin account creation', () => {
-			render(<SignUp />, undefined, { initialRoute: '/signup' });
-
-			expect(
-				screen.getByText(/this will create an admin account/i),
-			).toBeInTheDocument();
-		});
-	});
-
-	describe('Form Validation', () => {
-		it('disables submit button when form is invalid', async () => {
-			render(<SignUp />, undefined, { initialRoute: '/signup' });
-
-			const submitButton = screen.getByRole('button', {
-				name: /access my workspace/i,
-			});
-
-			expect(submitButton).toBeDisabled();
-		});
-
-		it('disables submit button for partially filled fields', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<SignUp />, undefined, { initialRoute: '/signup' });
-
-			const emailInput = screen.getByLabelText(/email address/i);
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-			const submitButton = screen.getByRole('button', {
-				name: /access my workspace/i,
-			});
-
-			// Missing email
-			await user.type(passwordInput, 'password123');
-			await user.type(confirmPasswordInput, 'password123');
-			expect(submitButton).toBeDisabled();
-
-			// Missing password
-			await user.clear(passwordInput);
-			await user.clear(confirmPasswordInput);
-			await user.type(emailInput, 'test@signoz.io');
-			await user.type(confirmPasswordInput, 'password123');
-			expect(submitButton).toBeDisabled();
-
-			// Missing confirm password
-			await user.clear(confirmPasswordInput);
-			await user.type(passwordInput, 'password123');
-			expect(submitButton).toBeDisabled();
-		});
-
-		it('shows error when passwords do not match', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<SignUp />, undefined, { initialRoute: '/signup' });
-
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-
-			await user.type(passwordInput, 'password123');
-			await user.type(confirmPasswordInput, 'password456');
-			await user.tab(); // Blur the confirm password field to trigger validation
-
-			expect(
-				await screen.findByText(/passwords don't match/i),
-			).toBeInTheDocument();
-		});
-
-		it('clears password mismatch error when passwords match', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			render(<SignUp />, undefined, { initialRoute: '/signup' });
-
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-
-			await user.type(passwordInput, 'password123');
-			await user.type(confirmPasswordInput, 'password456');
-			await user.tab(); // Blur the confirm password field to trigger validation
-
-			expect(
-				await screen.findByText(/passwords don't match/i),
-			).toBeInTheDocument();
-
-			await user.clear(confirmPasswordInput);
-			await user.type(confirmPasswordInput, 'password123');
-			await user.tab(); // Blur again to trigger validation
-
-			await waitFor(() => {
-				expect(
-					screen.queryByText(/passwords don't match/i),
-				).not.toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('Successful Signup', () => {
-		it('successfully creates account and logs in user', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.post(REGISTER_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							data: mockSignupResponse,
-							status: 'success',
-						}),
-					),
-				),
-				rest.post(EMAIL_PASSWORD_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							data: mockTokenResponse,
-							status: 'success',
-						}),
-					),
-				),
-			);
-
-			render(<SignUp />, undefined, { initialRoute: '/signup' });
-
-			const emailInput = screen.getByLabelText(/email address/i);
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-			const submitButton = screen.getByRole('button', {
-				name: /access my workspace/i,
-			});
-
-			await user.type(emailInput, 'test@signoz.io');
-			await user.type(passwordInput, 'password123');
-			await user.type(confirmPasswordInput, 'password123');
-
-			await waitFor(() => {
-				expect(submitButton).not.toBeDisabled();
-			});
-
-			await user.click(submitButton);
-
-			await waitFor(() => {
-				expect(mockAfterLogin).toHaveBeenCalledWith(
-					'mock-access-token',
-					'mock-refresh-token',
-				);
-			});
-		});
-	});
-
-	describe('Error Handling', () => {
-		it('displays error message when signup API fails', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.post(REGISTER_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(400),
-						ctx.json({
-							error: {
-								code: 'EMAIL_EXISTS',
-								message: 'Email already exists',
-							},
-						}),
-					),
-				),
-			);
-
-			render(<SignUp />, undefined, { initialRoute: '/signup' });
-
-			const emailInput = screen.getByLabelText(/email address/i);
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-			const submitButton = screen.getByRole('button', {
-				name: /access my workspace/i,
-			});
-
-			await user.type(emailInput, 'existing@signoz.io');
-			await user.type(passwordInput, 'password123');
-			await user.type(confirmPasswordInput, 'password123');
-
-			await waitFor(() => {
-				expect(submitButton).not.toBeDisabled();
-			});
-
-			await user.click(submitButton);
-
-			const errorCallouts = await screen.findAllByText(/email already exists/i);
-			expect(errorCallouts.length).toBeGreaterThan(0);
-		});
-	});
-});
-
-describe('SignUp Component - Accept Invite', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		window.history.pushState({}, '', '/signup?token=invite-token-123');
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	describe('Initial Render with Invite', () => {
-		it('pre-fills form fields from invite details', async () => {
-			server.use(
-				rest.get(INVITE_DETAILS_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							data: mockInviteDetails,
-							status: 'success',
-						}),
-					),
-				),
-			);
-
-			render(<SignUp />, undefined, {
-				initialRoute: '/signup?token=invite-token-123',
-			});
-
-			const emailInput = await screen.findByLabelText(/email address/i);
-
-			await waitFor(() => {
-				expect(emailInput).toHaveValue('invited@signoz.io');
-			});
-		});
-
-		it('disables email field when invite details are loaded', async () => {
-			server.use(
-				rest.get(INVITE_DETAILS_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							data: mockInviteDetails,
-							status: 'success',
-						}),
-					),
-				),
-			);
-
-			render(<SignUp />, undefined, {
-				initialRoute: '/signup?token=invite-token-123',
-			});
-
-			const emailInput = await screen.findByLabelText(/email address/i);
-
-			await waitFor(() => {
-				expect(emailInput).toBeDisabled();
-			});
-		});
-
-		it('does not show admin account info callout for invite flow', async () => {
-			server.use(
-				rest.get(INVITE_DETAILS_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							data: mockInviteDetails,
-							status: 'success',
-						}),
-					),
-				),
-			);
-
-			render(<SignUp />, undefined, {
-				initialRoute: '/signup?token=invite-token-123',
-			});
-
-			await waitFor(() => {
-				expect(
-					screen.queryByText(/this will create an admin account/i),
-				).not.toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('Successful Invite Acceptance', () => {
-		it('successfully accepts invite and logs in user', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.get(INVITE_DETAILS_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							data: mockInviteDetails,
-							status: 'success',
-						}),
-					),
-				),
-				rest.post(ACCEPT_INVITE_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							data: mockSignupResponse,
-							status: 'success',
-						}),
-					),
-				),
-				rest.post(EMAIL_PASSWORD_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							data: mockTokenResponse,
-							status: 'success',
-						}),
-					),
-				),
-			);
-
-			render(<SignUp />, undefined, {
-				initialRoute: '/signup?token=invite-token-123',
-			});
-
-			const emailInput = await screen.findByLabelText(/email address/i);
-			await waitFor(() => {
-				expect(emailInput).toHaveValue('invited@signoz.io');
-			});
-
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-			const submitButton = screen.getByRole('button', {
-				name: /access my workspace/i,
-			});
-
-			await user.type(passwordInput, 'password123');
-			await user.type(confirmPasswordInput, 'password123');
-
-			await waitFor(() => {
-				expect(submitButton).not.toBeDisabled();
-			});
-
-			await user.click(submitButton);
-
-			await waitFor(() => {
-				expect(mockAfterLogin).toHaveBeenCalledWith(
-					'mock-access-token',
-					'mock-refresh-token',
-				);
-			});
-		});
-	});
-
-	describe('Error Handling for Invite', () => {
-		it('displays error when invite details fetch fails', async () => {
-			server.use(
-				rest.get(INVITE_DETAILS_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(404),
-						ctx.json({
-							error: {
-								code: 'INVITE_NOT_FOUND',
-								message: 'Invite not found',
-							},
-						}),
-					),
-				),
-			);
-
-			render(<SignUp />, undefined, {
-				initialRoute: '/signup?token=invalid-token',
-			});
-
-			// Verify form is still accessible and fields are enabled
-			const emailInput = await screen.findByLabelText(/email address/i);
-
-			expect(emailInput).toBeInTheDocument();
-			expect(emailInput).not.toBeDisabled();
-		});
-
-		it('displays error when accept invite API fails', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.get(INVITE_DETAILS_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							data: mockInviteDetails,
-							status: 'success',
-						}),
-					),
-				),
-				rest.post(ACCEPT_INVITE_ENDPOINT, (_req, res, ctx) =>
-					res(
-						ctx.status(400),
-						ctx.json({
-							error: {
-								code: 'INVALID_TOKEN',
-								message: 'Invalid or expired invite token',
-							},
-						}),
-					),
-				),
-			);
-
-			render(<SignUp />, undefined, {
-				initialRoute: '/signup?token=expired-token',
-			});
-
-			const emailInput = await screen.findByLabelText(/email address/i);
-			await waitFor(() => {
-				expect(emailInput).toHaveValue('invited@signoz.io');
-			});
-
-			const passwordInput = screen.getByPlaceholderText(/enter new password/i);
-			const confirmPasswordInput = screen.getByPlaceholderText(
-				/confirm your new password/i,
-			);
-			const submitButton = screen.getByRole('button', {
-				name: /access my workspace/i,
-			});
-
-			await user.type(passwordInput, 'password123');
-			await user.type(confirmPasswordInput, 'password123');
-
-			await waitFor(() => {
-				expect(submitButton).not.toBeDisabled();
-			});
-
-			await user.click(submitButton);
-
-			expect(
-				await screen.findByText(/invalid or expired invite token/i),
-			).toBeInTheDocument();
-		});
-	});
-});
--- a/frontend/src/pages/SignUp/styles.ts
+++ b/frontend/src/pages/SignUp/styles.ts
@@ -10,17 +10,11 @@ export const FormWrapper = styled(Card)`
 `;

 export const Label = styled.label`
-	margin-bottom: 0;
-	margin-top: 0;
+	margin-bottom: 11px;
+	margin-top: 19px;
 	display: inline-block;
-	font-size: 13px;
-	font-weight: 600;
-	line-height: 1;
-	color: var(--levels-l1-foreground, #eceef2);
-
-	.lightMode & {
-		color: var(--text-ink-500);
-	}
+	font-size: 1rem;
+	line-height: 24px;
 `;

 export const ButtonContainer = styled.div`
--- a/frontend/src/periscope.scss
+++ b/frontend/src/periscope.scss
@@ -169,10 +169,6 @@

 			border: none;
 			height: 36px;
-			.ant-select-selection-search-input {
-				min-width: max-content !important;
-				max-width: 100% !important;
-			}
 		}

 		.ant-select-selector {
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -26,6 +26,18 @@ body {
 	box-sizing: border-box;
 }

+// Theme transition animations
+* {
+	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
+		box-shadow 0.3s ease;
+}
+
+// For components that shouldn't transition (like loading spinners, animations)
+.no-transition,
+.no-transition * {
+	transition: none !important;
+}
+
 // Respect user's reduced motion preference
@media (prefers-reduced-motion: reduce) {
 	* {
@@ -166,7 +178,7 @@ body {
 						height: 11px;
 						flex-shrink: 0;
 						cursor: pointer;
-						transition: transform 0.2s ease;
+						transition: all 0.2s ease;
 						position: relative;

 						&:hover {
@@ -280,7 +292,7 @@ body {
 					height: 11px;
 					flex-shrink: 0;
 					cursor: pointer;
-					transition: transform 0.2s ease;
+					transition: all 0.2s ease;
 					position: relative;

 					&:hover {
--- a/frontend/src/tests/test-utils.tsx
+++ b/frontend/src/tests/test-utils.tsx
@@ -344,8 +344,6 @@ const customRender = (
 	});
 };

-// eslint-disable-next-line import/export -- re-exporting custom render alongside @testing-library/react
 export * from '@testing-library/react';
 export { default as userEvent } from '@testing-library/user-event';
-// eslint-disable-next-line import/export -- custom render wraps the original
 export { customRender as render };
--- a/pkg/querier/bucket_cache.go
+++ b/pkg/querier/bucket_cache.go
@@ -490,6 +490,7 @@ func (bc *bucketCache) mergeTimeSeriesValues(ctx context.Context, buckets []*cac
 		key      string
 	}
 	seriesMap := make(map[seriesKey]*qbtypes.TimeSeries, estimatedSeries)
+	aliasMap := make(map[int]string)

 	for _, bucket := range buckets {
 		var tsData *qbtypes.TimeSeriesData
@@ -499,6 +500,10 @@ func (bc *bucketCache) mergeTimeSeriesValues(ctx context.Context, buckets []*cac
 		}

 		for _, aggBucket := range tsData.Aggregations {
+			if aggBucket.Alias != "" {
+				aliasMap[aggBucket.Index] = aggBucket.Alias
+			}
+
 			for _, series := range aggBucket.Series {
 				// Create series key from labels
 				key := seriesKey{
@@ -571,7 +576,13 @@ func (bc *bucketCache) mergeTimeSeriesValues(ctx context.Context, buckets []*cac
 			}
 		}

+		var alias string
+		if aliasMap[index] != "" {
+			alias = aliasMap[index]
+		}
+
 		result.Aggregations = append(result.Aggregations, &qbtypes.AggregationBucket{
+			Alias:  alias,
 			Index:  index,
 			Series: seriesList,
 		})
@@ -736,6 +747,7 @@ func (bc *bucketCache) trimResultToFluxBoundary(result *qbtypes.Result, fluxBoun
 			for _, aggBucket := range tsData.Aggregations {
 				trimmedBucket := &qbtypes.AggregationBucket{
 					Index: aggBucket.Index,
+					Alias: aggBucket.Alias,
 				}

 				for _, series := range aggBucket.Series {
--- a/pkg/querier/builder_query.go
+++ b/pkg/querier/builder_query.go
@@ -200,7 +200,7 @@ func (q *builderQuery[T]) Execute(ctx context.Context) (*qbtypes.Result, error)
 		return nil, err
 	}

-	result.Warnings = stmt.Warnings
+	result.Warnings = append(result.Warnings, stmt.Warnings...)
 	result.WarningsDocURL = stmt.WarningsDocURL
 	return result, nil
 }
--- a/pkg/querier/consume.go
+++ b/pkg/querier/consume.go
@@ -12,17 +12,23 @@ import (
 	"time"

 	"github.com/ClickHouse/clickhouse-go/v2/lib/driver"
+	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/bytedance/sonic"
 )

+const (
+	diagnosticColumnIndexBase = 1000000
+)
+
 var (
 	aggRe = regexp.MustCompile(`^__result_(\d+)$`)
 	// legacyReservedColumnTargetAliases identifies result value from a user
 	// written clickhouse query. The column alias indcate which value is
 	// to be considered as final result (or target)
 	legacyReservedColumnTargetAliases = []string{"__result", "__value", "result", "res", "value"}
+	diagnosticColumnAliases           = []string{telemetrymetrics.DiagnosticColumnCumulativeHistLeCount, telemetrymetrics.DiagnosticColumnCumulativeHistLeSum}
 )

 // consume reads every row and shapes it into the payload expected for the
@@ -69,6 +75,7 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 		key string // deterministic join of label values
 	}
 	seriesMap := map[sKey]*qbtypes.TimeSeries{}
+	diagnosticSeriesMap := map[string]*qbtypes.TimeSeries{}

 	stepMs := uint64(step.Duration.Milliseconds())

@@ -113,12 +120,13 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 		}

 		var (
-			ts            int64
-			lblVals       = make([]string, 0, lblValsCapacity)
-			lblObjs       = make([]*qbtypes.Label, 0, lblValsCapacity)
-			aggValues     = map[int]float64{} // all __result_N in this row
-			fallbackValue float64             // value when NO __result_N columns exist
-			fallbackSeen  bool
+			ts               int64
+			lblVals          = make([]string, 0, lblValsCapacity)
+			lblObjs          = make([]*qbtypes.Label, 0, lblValsCapacity)
+			aggValues        = map[int]float64{}    // all __result_N in this row
+			diagnosticValues = map[string]float64{} // all diagnostic columns in this row
+			fallbackValue    float64                // value when NO __result_N columns exist
+			fallbackSeen     bool
 		)

 		for idx, ptr := range slots {
@@ -130,7 +138,9 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt

 			case *float64, *float32, *int64, *int32, *uint64, *uint32:
 				val := numericAsFloat(reflect.ValueOf(ptr).Elem().Interface())
-				if m := aggRe.FindStringSubmatch(name); m != nil {
+				if slices.Contains(diagnosticColumnAliases, name) {
+					diagnosticValues[name] = val
+				} else if m := aggRe.FindStringSubmatch(name); m != nil {
 					id, _ := strconv.Atoi(m[1])
 					aggValues[id] = val
 				} else if numericColsCount == 1 { // classic single-value query
@@ -152,7 +162,9 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 				tempVal := reflect.ValueOf(ptr)
 				if tempVal.IsValid() && !tempVal.IsNil() && !tempVal.Elem().IsNil() {
 					val := numericAsFloat(tempVal.Elem().Elem().Interface())
-					if m := aggRe.FindStringSubmatch(name); m != nil {
+					if slices.Contains(diagnosticColumnAliases, name) {
+						diagnosticValues[name] = val
+					} else if m := aggRe.FindStringSubmatch(name); m != nil {
 						id, _ := strconv.Atoi(m[1])
 						aggValues[id] = val
 					} else if numericColsCount == 1 { // classic single-value query
@@ -195,6 +207,23 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 			}
 		}

+		// fetch and store diagnostic values in diagnosticSeriesMap
+		for diagnosticColName, val := range diagnosticValues {
+			if math.IsNaN(val) || math.IsInf(val, 0) {
+				continue
+			}
+			diagSeries, ok := diagnosticSeriesMap[diagnosticColName]
+			if !ok {
+				diagSeries = &qbtypes.TimeSeries{}
+				diagnosticSeriesMap[diagnosticColName] = diagSeries
+			}
+			diagSeries.Values = append(diagSeries.Values, &qbtypes.TimeSeriesValue{
+				Timestamp: ts,
+				Value:     val,
+				Partial:   isPartialValue(ts),
+			})
+		}
+
 		// Edge-case: no __result_N columns, but a single numeric column present
 		if len(aggValues) == 0 && fallbackSeen {
 			aggValues[0] = fallbackValue
@@ -231,6 +260,20 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 		return nil, err
 	}

+	diagnosticBuckets := make([]*qbtypes.AggregationBucket, 0)
+	// TODO(nikhilmantri0902, srikanthccv): below HACK - this is a temporary index introduced becausing caching grouping and merging happens on index
+	// Should we improve the caching grouping and merging to not depend on index?
+	diagNosticTemporayIndex := diagnosticColumnIndexBase
+	for diagColName, diagSeries := range diagnosticSeriesMap {
+		diagnosticBucket := &qbtypes.AggregationBucket{
+			Index: diagNosticTemporayIndex,
+			Alias: diagColName,
+		}
+		diagnosticBucket.Series = append(diagnosticBucket.Series, diagSeries)
+		diagnosticBuckets = append(diagnosticBuckets, diagnosticBucket)
+		diagNosticTemporayIndex++
+	}
+
 	maxAgg := -1
 	for k := range seriesMap {
 		if k.agg > maxAgg {
@@ -240,6 +283,8 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 	if maxAgg < 0 {
 		return &qbtypes.TimeSeriesData{
 			QueryName: queryName,
+			// return with diagNostic buckets
+			Aggregations: diagnosticBuckets,
 		}, nil
 	}

@@ -261,6 +306,9 @@ func readAsTimeSeries(rows driver.Rows, queryWindow *qbtypes.TimeRange, step qbt
 		}
 	}

+	// add diagNostic buckets
+	nonEmpty = append(nonEmpty, diagnosticBuckets...)
+
 	return &qbtypes.TimeSeriesData{
 		QueryName:    queryName,
 		Aggregations: nonEmpty,
--- a/pkg/querier/postprocess.go
+++ b/pkg/querier/postprocess.go
@@ -9,6 +9,7 @@ import (
 	"strings"

 	"github.com/SigNoz/govaluate"
+	"github.com/SigNoz/signoz/pkg/telemetrymetrics"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
@@ -46,7 +47,7 @@ func getQueryName(spec any) string {
 	return getqueryInfo(spec).Name
 }

-func (q *querier) postProcessResults(ctx context.Context, results map[string]any, req *qbtypes.QueryRangeRequest) (map[string]any, error) {
+func (q *querier) postProcessResults(ctx context.Context, results map[string]any, req *qbtypes.QueryRangeRequest) (map[string]any, []string, string, error) {
 	// Convert results to typed format for processing
 	typedResults := make(map[string]*qbtypes.Result)
 	for name, result := range results {
@@ -96,7 +97,7 @@ func (q *querier) postProcessResults(ctx context.Context, results map[string]any
 				for name, v := range typedResults {
 					retResult[name] = v.Value
 				}
-				return retResult, nil
+				return retResult, nil, "", nil
 			}
 		}

@@ -108,11 +109,11 @@ func (q *querier) postProcessResults(ctx context.Context, results map[string]any
 			firstQueryName := getQueryName(req.CompositeQuery.Queries[0].Spec)
 			if firstQueryName != "" && tableResult["table"] != nil {
 				// Return table under first query name
-				return map[string]any{firstQueryName: tableResult["table"]}, nil
+				return map[string]any{firstQueryName: tableResult["table"]}, nil, "", nil
 			}
 		}

-		return tableResult, nil
+		return tableResult, nil, "", nil
 	}

 	if req.RequestType == qbtypes.RequestTypeTimeSeries && req.FormatOptions != nil && req.FormatOptions.FillGaps {
@@ -155,7 +156,19 @@ func (q *querier) postProcessResults(ctx context.Context, results map[string]any
 		finalResults[name] = result.Value
 	}

-	return finalResults, nil
+	// collect postProcessWarnings from typed results
+	var postProcessWarnings []string
+	var postProcessWarningsDocURL string
+	for _, res := range typedResults {
+		if len(res.Warnings) > 0 {
+			postProcessWarnings = append(postProcessWarnings, res.Warnings...)
+		}
+		if res.WarningsDocURL != "" {
+			postProcessWarningsDocURL = res.WarningsDocURL
+		}
+	}
+
+	return finalResults, postProcessWarnings, postProcessWarningsDocURL, nil
 }

 // postProcessBuilderQuery applies postprocessing to a single builder query result
@@ -178,6 +191,86 @@ func postProcessBuilderQuery[T any](
 	return result
 }

+func removeDiagnosticSeriesAndCheckWarnings(result *qbtypes.Result) {
+	tsData, ok := result.Value.(*qbtypes.TimeSeriesData)
+	if !ok {
+		return
+	}
+
+	if tsData == nil {
+		return
+	}
+
+	var nonDiagnosticBuckets []*qbtypes.AggregationBucket
+	var bucketSum, bucketCount *qbtypes.AggregationBucket
+
+	// First pass: identify diagnostic buckets and separate them from non-diagnostic ones
+	for _, b := range tsData.Aggregations {
+		if !slices.Contains(diagnosticColumnAliases, b.Alias) {
+			nonDiagnosticBuckets = append(nonDiagnosticBuckets, b)
+			continue
+		}
+		// warning columns
+		switch b.Alias {
+		case telemetrymetrics.DiagnosticColumnCumulativeHistLeSum:
+			bucketSum = b
+		case telemetrymetrics.DiagnosticColumnCumulativeHistLeCount:
+			bucketCount = b
+		}
+	}
+
+	// Second pass: calculate warnings based on diagnostic buckets (only once, after identifying both)
+	allZero := false
+	if bucketSum != nil {
+		allZero = true
+		if len(bucketSum.Series) == 0 {
+			allZero = false // dont calculate for no values
+		} else {
+			for _, s := range bucketSum.Series {
+				for _, v := range s.Values {
+					if v.Value > 0 {
+						allZero = false
+						break
+					}
+				}
+				if !allZero {
+					break
+				}
+			}
+		}
+	}
+
+	allSparse := false
+	if bucketCount != nil {
+		allSparse = true
+		if len(bucketCount.Series) == 0 {
+			allSparse = false // dont calculate for no values
+		} else {
+			for _, s := range bucketCount.Series {
+				for _, v := range s.Values {
+					if v.Value >= 2 {
+						allSparse = false
+						break
+					}
+				}
+				if !allSparse {
+					break
+				}
+			}
+		}
+	}
+
+	if allZero {
+		result.Warnings = append(result.Warnings, "No change observed for this cumulative metric in the selected range.")
+	}
+	if allSparse {
+		result.Warnings = append(result.Warnings, "Only +Inf bucket present; add finite buckets to compute quantiles.")
+	}
+
+	tsData.Aggregations = nonDiagnosticBuckets
+	result.Value = tsData
+}
+
 // postProcessMetricQuery applies postprocessing to a metric query result
 func postProcessMetricQuery(
 	q *querier,
@@ -186,6 +279,8 @@ func postProcessMetricQuery(
 	req *qbtypes.QueryRangeRequest,
 ) *qbtypes.Result {

+	removeDiagnosticSeriesAndCheckWarnings(result)
+
 	config := query.Aggregations[0]
 	spaceAggOrderBy := fmt.Sprintf("%s(%s)", config.SpaceAggregation.StringValue(), config.MetricName)
 	timeAggOrderBy := fmt.Sprintf("%s(%s)", config.TimeAggregation.StringValue(), config.MetricName)
--- a/pkg/querier/querier.go
+++ b/pkg/querier/querier.go
@@ -588,11 +588,19 @@ func (q *querier) run(
 		}
 	}

-	processedResults, err := q.postProcessResults(ctx, results, req)
+	processedResults, processedResultsWarnings, processedResultsDocsURL, err := q.postProcessResults(ctx, results, req)
 	if err != nil {
 		return nil, err
 	}

+	// Merge warnings collected during post-processing.
+	if len(processedResultsWarnings) > 0 {
+		warnings = append(warnings, processedResultsWarnings...)
+	}
+	if processedResultsDocsURL != "" {
+		warningsDocURL = processedResultsDocsURL
+	}
+
 	// attach step interval to metadata so client can make informed decisions, ex: width of the bar
 	// or go to related logs/traces from a point in line/bar chart with correct time range
 	stepIntervals := make(map[string]uint64, len(steps))
--- a/pkg/query-service/app/http_handler.go
+++ b/pkg/query-service/app/http_handler.go
@@ -3135,10 +3135,7 @@ func (aH *APIHandler) getProducerConsumerEval(w http.ResponseWriter, r *http.Req
 	queryRangeParams, err := kafka.BuildQueryRangeParams(messagingQueue, "producer-consumer-eval", kafkaSpanEval)
 	if err != nil {
 		zap.L().Error(err.Error())
-		RespondError(w, &model.ApiError{
-			Typ: model.ErrorBadData,
-			Err: err,
-		}, nil)
+		RespondError(w, apiErr, nil)
 		return
 	}

--- a/pkg/query-service/app/parser.go
+++ b/pkg/query-service/app/parser.go
@@ -887,7 +887,7 @@ func ParseQueryRangeParams(r *http.Request) (*v3.QueryRangeParamsV3, *model.ApiE

 			keys := make([]string, 0, len(queryRangeParams.Variables))

-			querytemplate.AssignReservedVars(queryRangeParams.Variables, queryRangeParams.Start, queryRangeParams.End)
+			querytemplate.AssignReservedVarsV3(queryRangeParams)

 			for k := range queryRangeParams.Variables {
 				keys = append(keys, k)
@@ -927,7 +927,7 @@ func ParseQueryRangeParams(r *http.Request) (*v3.QueryRangeParamsV3, *model.ApiE
 				continue
 			}

-			querytemplate.AssignReservedVars(queryRangeParams.Variables, queryRangeParams.Start, queryRangeParams.End)
+			querytemplate.AssignReservedVarsV3(queryRangeParams)

 			keys := make([]string, 0, len(queryRangeParams.Variables))

--- a/pkg/query-service/app/parser_test.go
+++ b/pkg/query-service/app/parser_test.go
--- a/pkg/query-service/converter/converter.go
+++ b/pkg/query-service/converter/converter.go
@@ -1,17 +1,8 @@
 package converter

-import "github.com/SigNoz/signoz/pkg/errors"
-
 // Unit represents a unit of measurement
 type Unit string

-func (u Unit) Validate() error {
-	if !IsValidUnit(u) {
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid unit: %s", u)
-	}
-	return nil
-}
-
 // Value represents a value with a unit of measurement
 type Value struct {
 	F float64
@@ -69,27 +60,6 @@ func FromUnit(u Unit) Converter {
 	}
 }

-// IsValidUnit returns true if the given unit is valid
-func IsValidUnit(u Unit) bool {
-	switch u {
-	// Duration unit
-	case "ns", "us", "µs", "ms", "s", "m", "h", "d", "min",
-		// Data unit
-		"bytes", "decbytes", "bits", "decbits", "kbytes", "decKbytes", "deckbytes", "mbytes", "decMbytes", "decmbytes", "gbytes", "decGbytes", "decgbytes", "tbytes", "decTbytes", "dectbytes", "pbytes", "decPbytes", "decpbytes", "By", "kBy", "MBy", "GBy", "TBy", "PBy",
-		// Data rate unit
-		"binBps", "Bps", "binbps", "bps", "KiBs", "Kibits", "KBs", "Kbits", "MiBs", "Mibits", "MBs", "Mbits", "GiBs", "Gibits", "GBs", "Gbits", "TiBs", "Tibits", "TBs", "Tbits", "PiBs", "Pibits", "PBs", "Pbits", "By/s", "kBy/s", "MBy/s", "GBy/s", "TBy/s", "PBy/s", "bit/s", "kbit/s", "Mbit/s", "Gbit/s", "Tbit/s", "Pbit/s",
-		// Percent unit
-		"percent", "percentunit", "%",
-		// Bool unit
-		"bool", "bool_yes_no", "bool_true_false", "bool_1_0",
-		// Throughput unit
-		"cps", "ops", "reqps", "rps", "wps", "iops", "cpm", "opm", "rpm", "wpm", "{count}/s", "{ops}/s", "{req}/s", "{read}/s", "{write}/s", "{iops}/s", "{count}/min", "{ops}/min", "{read}/min", "{write}/min":
-		return true
-	default:
-		return false
-	}
-}
-
 func UnitToName(u string) string {
 	switch u {
 	case "ns":
--- a/pkg/query-service/model/v3/v3.go
+++ b/pkg/query-service/model/v3/v3.go
@@ -9,9 +9,8 @@ import (
 	"strings"
 	"time"

-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/query-service/converter"
 	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/pkg/errors"
 	"go.uber.org/zap"

 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
@@ -602,170 +601,43 @@ func (c *CompositeQuery) Sanitize() {

 func (c *CompositeQuery) Validate() error {
 	if c == nil {
-		return errors.NewInvalidInputf(
-			errors.CodeInvalidInput,
-			"composite query is required",
-		)
+		return fmt.Errorf("composite query is required")
 	}

-	// Validate unit if supplied
-	if c.Unit != "" {
-		unit := converter.Unit(c.Unit)
-		err := unit.Validate()
-		if err != nil {
-			return errors.NewInvalidInputf(
-				errors.CodeInvalidInput,
-				"invalid unit: %s",
-				err.Error(),
-			)
+	if c.BuilderQueries == nil && c.ClickHouseQueries == nil && c.PromQueries == nil && len(c.Queries) == 0 {
+		return fmt.Errorf("composite query must contain at least one query type")
+	}
+
+	if c.QueryType == QueryTypeBuilder {
+		for name, query := range c.BuilderQueries {
+			if err := query.Validate(c.PanelType); err != nil {
+				return fmt.Errorf("builder query %s is invalid: %w", name, err)
+			}
+		}
+	}
+
+	if c.QueryType == QueryTypeClickHouseSQL {
+		for name, query := range c.ClickHouseQueries {
+			if err := query.Validate(); err != nil {
+				return fmt.Errorf("clickhouse query %s is invalid: %w", name, err)
+			}
+		}
+	}
+
+	if c.QueryType == QueryTypePromQL {
+		for name, query := range c.PromQueries {
+			if err := query.Validate(); err != nil {
+				return fmt.Errorf("prom query %s is invalid: %w", name, err)
+			}
 		}
 	}

 	if err := c.PanelType.Validate(); err != nil {
-		return errors.NewInvalidInputf(
-			errors.CodeInvalidInput,
-			"panel type is invalid: %s",
-			err.Error(),
-		)
+		return fmt.Errorf("panel type is invalid: %w", err)
 	}

 	if err := c.QueryType.Validate(); err != nil {
-		return errors.NewInvalidInputf(
-			errors.CodeInvalidInput,
-			"query type is invalid: %s",
-			err.Error(),
-		)
-	}
-
-	if len(c.Queries) == 0 {
-		return errors.NewInvalidInputf(
-			errors.CodeInvalidInput,
-			"at least one query is required",
-		)
-	}
-
-	// Validate each query
-	for i, envelope := range c.Queries {
-		queryId := qbtypes.GetQueryIdentifier(envelope, i)
-
-		switch envelope.Type {
-		case qbtypes.QueryTypeBuilder, qbtypes.QueryTypeSubQuery:
-			switch spec := envelope.Spec.(type) {
-			case qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]:
-				if err := spec.Validate(qbtypes.RequestTypeTimeSeries); err != nil {
-					return errors.NewInvalidInputf(
-						errors.CodeInvalidInput,
-						"invalid %s: %s",
-						queryId,
-						err.Error(),
-					)
-				}
-			case qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]:
-				if err := spec.Validate(qbtypes.RequestTypeTimeSeries); err != nil {
-					return errors.NewInvalidInputf(
-						errors.CodeInvalidInput,
-						"invalid %s: %s",
-						queryId,
-						err.Error(),
-					)
-				}
-			case qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]:
-				if err := spec.Validate(qbtypes.RequestTypeTimeSeries); err != nil {
-					return errors.NewInvalidInputf(
-						errors.CodeInvalidInput,
-						"invalid %s: %s",
-						queryId,
-						err.Error(),
-					)
-				}
-			default:
-				return errors.NewInvalidInputf(
-					errors.CodeInvalidInput,
-					"unknown query spec type for %s",
-					queryId,
-				)
-			}
-		case qbtypes.QueryTypePromQL:
-			spec, ok := envelope.Spec.(qbtypes.PromQuery)
-			if !ok {
-				return errors.NewInvalidInputf(
-					errors.CodeInvalidInput,
-					"invalid spec for %s",
-					queryId,
-				)
-			}
-			if spec.Query == "" {
-				return errors.NewInvalidInputf(
-					errors.CodeInvalidInput,
-					"query expression is required for %s",
-					queryId,
-				)
-			}
-			if err := validatePromQLQuery(spec.Query); err != nil {
-				return err
-			}
-		case qbtypes.QueryTypeClickHouseSQL:
-			spec, ok := envelope.Spec.(qbtypes.ClickHouseQuery)
-			if !ok {
-				return errors.NewInvalidInputf(
-					errors.CodeInvalidInput,
-					"invalid spec for %s",
-					queryId,
-				)
-			}
-			if spec.Query == "" {
-				return errors.NewInvalidInputf(
-					errors.CodeInvalidInput,
-					"query expression is required for %s",
-					queryId,
-				)
-			}
-			if err := validateClickHouseQuery(spec.Query); err != nil {
-				return err
-			}
-		case qbtypes.QueryTypeFormula:
-			spec, ok := envelope.Spec.(qbtypes.QueryBuilderFormula)
-			if !ok {
-				return errors.NewInvalidInputf(
-					errors.CodeInvalidInput,
-					"invalid spec for %s",
-					queryId,
-				)
-			}
-			if err := spec.Validate(); err != nil {
-				return err
-			}
-		case qbtypes.QueryTypeTraceOperator:
-			spec, ok := envelope.Spec.(qbtypes.QueryBuilderTraceOperator)
-			if !ok {
-				return errors.NewInvalidInputf(
-					errors.CodeInvalidInput,
-					"invalid spec for %s",
-					queryId,
-				)
-			}
-			err := spec.ValidateTraceOperator(c.Queries)
-			if err != nil {
-				return err
-			}
-		default:
-			return errors.NewInvalidInputf(
-				errors.CodeInvalidInput,
-				"unknown query type '%s' for %s",
-				envelope.Type,
-				queryId,
-			).WithAdditional(
-				"Valid query types are: builder_query, builder_sub_query, builder_formula, builder_join, promql, clickhouse_sql, trace_operator",
-			)
-		}
-	}
-
-	// Check if all queries are disabled
-	if allDisabled := checkQueriesDisabled(c); allDisabled {
-		return errors.NewInvalidInputf(
-			errors.CodeInvalidInput,
-			"all queries are disabled - at least one query must be enabled",
-		)
+		return fmt.Errorf("query type is invalid: %w", err)
 	}

 	return nil
@@ -1331,7 +1203,7 @@ func (f *FilterSet) Scan(src interface{}) error {
 func (f *FilterSet) Value() (driver.Value, error) {
 	filterSetJson, err := json.Marshal(f)
 	if err != nil {
-		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "could not serialize FilterSet to JSON")
+		return nil, errors.Wrap(err, "could not serialize FilterSet to JSON")
 	}
 	return filterSetJson, nil
 }
--- a/pkg/query-service/model/v3/validation.go
+++ b/pkg/query-service/model/v3/validation.go
@@ -1,137 +0,0 @@
-package v3
-
-import (
-	"bytes"
-	"fmt"
-	"text/template"
-	"time"
-
-	clickhouse "github.com/AfterShip/clickhouse-sql-parser/parser"
-	"github.com/SigNoz/signoz/pkg/errors"
-	querytemplate "github.com/SigNoz/signoz/pkg/query-service/utils/queryTemplate"
-	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/prometheus/prometheus/promql/parser"
-)
-
-type QueryParseError struct {
-	StartPosition *int
-	EndPosition   *int
-	ErrorMessage  string
-	Query         string
-}
-
-func (e *QueryParseError) Error() string {
-	if e.StartPosition != nil && e.EndPosition != nil {
-		return fmt.Sprintf("query parse error: %s at position %d:%d", e.ErrorMessage, *e.StartPosition, *e.EndPosition)
-	}
-	return fmt.Sprintf("query parse error: %s", e.ErrorMessage)
-}
-
-// validatePromQLQuery validates a PromQL query syntax using the Prometheus parser
-func validatePromQLQuery(query string) error {
-	_, err := parser.ParseExpr(query)
-	if err != nil {
-		if syntaxErrs, ok := err.(parser.ParseErrors); ok {
-			syntaxErr := syntaxErrs[0]
-			startPosition := int(syntaxErr.PositionRange.Start)
-			endPosition := int(syntaxErr.PositionRange.End)
-			return &QueryParseError{
-				StartPosition: &startPosition,
-				EndPosition:   &endPosition,
-				ErrorMessage:  syntaxErr.Error(),
-				Query:         query,
-			}
-		}
-	}
-	return err
-}
-
-// validateClickHouseQuery validates a ClickHouse SQL query syntax using the ClickHouse parser
-func validateClickHouseQuery(query string) error {
-	// Assign the default template variables with dummy values
-	variables := make(map[string]interface{})
-	start := time.Now().UnixMilli()
-	end := start + 1000
-	querytemplate.AssignReservedVars(variables, start, end)
-
-	// Apply the values for default template variables before parsing the query
-	tmpl := template.New("clickhouse-query")
-	tmpl, err := tmpl.Parse(query)
-	if err != nil {
-		return errors.NewInvalidInputf(
-			errors.CodeInvalidInput,
-			"failed to parse clickhouse query: %s",
-			err.Error(),
-		)
-	}
-	var queryBuffer bytes.Buffer
-	err = tmpl.Execute(&queryBuffer, variables)
-	if err != nil {
-		return errors.NewInvalidInputf(
-			errors.CodeInvalidInput,
-			"failed to execute clickhouse query template: %s",
-			err.Error(),
-		)
-	}
-
-	// Parse the ClickHouse query with the default template variables applied
-	p := clickhouse.NewParser(queryBuffer.String())
-	_, err = p.ParseStmts()
-	if err != nil {
-		// TODO: errors returned here is errors.errorString
-		// we should think on using some other library that parses the CH query in more accurate manner,
-		// current CH parser does very minimal checks and on just the known keywords, without validating the syntax of given query.
-		// Sample Error: "line 0:36 expected table name or subquery, got ;\nSELECT department, avg(salary) FROM ;\n                                    ^\n"
-		return &QueryParseError{
-			ErrorMessage: err.Error(),
-			Query:        query,
-		}
-	}
-	return nil
-}
-
-// checkQueriesDisabled checks if all queries are disabled. Returns true if all queries are disabled, false otherwise.
-func checkQueriesDisabled(compositeQuery *CompositeQuery) bool {
-	for _, envelope := range compositeQuery.Queries {
-		switch envelope.Type {
-		case qbtypes.QueryTypeBuilder, qbtypes.QueryTypeSubQuery:
-			switch spec := envelope.Spec.(type) {
-			case qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]:
-				if !spec.Disabled {
-					return false
-				}
-			case qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]:
-				if !spec.Disabled {
-					return false
-				}
-			case qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]:
-				if !spec.Disabled {
-					return false
-				}
-			}
-		case qbtypes.QueryTypeFormula:
-			if spec, ok := envelope.Spec.(qbtypes.QueryBuilderFormula); ok && !spec.Disabled {
-				return false
-			}
-		case qbtypes.QueryTypeTraceOperator:
-			if spec, ok := envelope.Spec.(qbtypes.QueryBuilderTraceOperator); ok && !spec.Disabled {
-				return false
-			}
-		case qbtypes.QueryTypeJoin:
-			if spec, ok := envelope.Spec.(qbtypes.QueryBuilderJoin); ok && !spec.Disabled {
-				return false
-			}
-		case qbtypes.QueryTypePromQL:
-			if spec, ok := envelope.Spec.(qbtypes.PromQuery); ok && !spec.Disabled {
-				return false
-			}
-		case qbtypes.QueryTypeClickHouseSQL:
-			if spec, ok := envelope.Spec.(qbtypes.ClickHouseQuery); ok && !spec.Disabled {
-				return false
-			}
-		}
-	}
-
-	// If we reach here, all queries are disabled
-	return true
-}
--- a/pkg/query-service/model/v3/validation_test.go
+++ b/pkg/query-service/model/v3/validation_test.go
@@ -1,528 +0,0 @@
-package v3
-
-import (
-	"testing"
-
-	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/stretchr/testify/require"
-)
-
-func TestValidateCompositeQuery(t *testing.T) {
-
-	tests := []struct {
-		name           string
-		compositeQuery *CompositeQuery
-		wantErr        bool
-		errContains    string
-	}{
-		{
-			name:           "nil composite query should return error",
-			compositeQuery: nil,
-			wantErr:        true,
-			errContains:    "composite query is required",
-		},
-		{
-			name: "empty queries array should return error",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{},
-			},
-			wantErr:     true,
-			errContains: "at least one query is required",
-		},
-		{
-			name: "invalid input error",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Unit: "some_invalid_unit",
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypePromQL,
-						Spec: qbtypes.PromQuery{
-							Name:  "prom_query",
-							Query: "rate(http_requests_total[5m])",
-						},
-					},
-				},
-			},
-			wantErr:     true,
-			errContains: "invalid unit",
-		},
-		{
-			name: "valid metric builder query should pass",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Unit: "bytes", // valid unit
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeBuilder,
-						Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
-							Name:   "metric_query",
-							Signal: telemetrytypes.SignalMetrics,
-							Aggregations: []qbtypes.MetricAggregation{
-								{
-									MetricName: "cpu_usage",
-								},
-							},
-						},
-					},
-				},
-			},
-			wantErr: false,
-		},
-		{
-			name: "valid log builder query should pass",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Unit: "µs", // valid unit
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeBuilder,
-						Spec: qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]{
-							Name:   "log_query",
-							Signal: telemetrytypes.SignalLogs,
-							Aggregations: []qbtypes.LogAggregation{
-								{
-									Expression: "count()",
-								},
-							},
-						},
-					},
-				},
-			},
-			wantErr: false,
-		},
-		{
-			name: "valid trace builder query should pass",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Unit: "MBs", // valid unit
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeBuilder,
-						Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
-							Name:   "trace_query",
-							Signal: telemetrytypes.SignalTraces,
-							Aggregations: []qbtypes.TraceAggregation{
-								{
-									Expression: "count()",
-								},
-							},
-						},
-					},
-				},
-			},
-			wantErr: false,
-		},
-		{
-			name: "valid PromQL query should pass",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Unit: "{req}/s", // valid unit
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypePromQL,
-						Spec: qbtypes.PromQuery{
-							Name:  "prom_query",
-							Query: "rate(http_requests_total[5m])",
-						},
-					},
-				},
-			},
-			wantErr: false,
-		},
-		{
-			name: "valid ClickHouse query should pass",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeClickHouseSQL,
-						Spec: qbtypes.ClickHouseQuery{
-							Name:  "ch_query",
-							Query: "SELECT count(*) FROM metrics WHERE metric_name = 'cpu_usage'",
-						},
-					},
-				},
-			},
-			wantErr: false,
-		},
-		{
-			name: "valid formula query should pass",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeFormula,
-						Spec: qbtypes.QueryBuilderFormula{
-							Name:       "formula_query",
-							Expression: "A + B",
-						},
-					},
-				},
-			},
-			wantErr: false,
-		},
-		// We've not added support for join query yet
-		{
-			name: "valid join query should pass",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeJoin,
-						Spec: qbtypes.QueryBuilderJoin{
-							Name:  "join_query",
-							Left:  qbtypes.QueryRef{Name: "A"},
-							Right: qbtypes.QueryRef{Name: "B"},
-							Type:  qbtypes.JoinTypeInner,
-							On:    "service_name",
-						},
-					},
-				},
-			},
-			wantErr: true,
-			errContains: "unknown query type",
-		},
-		{
-			name: "valid trace operator query should pass",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeBuilder,
-						Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
-							Name:   "A",
-							Signal: telemetrytypes.SignalTraces,
-							Aggregations: []qbtypes.TraceAggregation{
-								{
-									Expression: "count()",
-								},
-							},
-						},
-					},
-					{
-						Type: qbtypes.QueryTypeBuilder,
-						Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
-							Name:   "B",
-							Signal: telemetrytypes.SignalTraces,
-							Aggregations: []qbtypes.TraceAggregation{
-								{
-									Expression: "count()",
-								},
-							},
-						},
-					},
-					{
-						Type: qbtypes.QueryTypeTraceOperator,
-						Spec: qbtypes.QueryBuilderTraceOperator{
-							Name:       "trace_operator",
-							Expression: "A && B",
-						},
-					},
-				},
-			},
-			wantErr: false,
-		},
-		{
-			name: "invalid metric builder query - missing aggregation should return error",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeBuilder,
-						Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
-							Name:         "metric_query",
-							Signal:       telemetrytypes.SignalMetrics,
-							Aggregations: []qbtypes.MetricAggregation{},
-						},
-					},
-				},
-			},
-			wantErr:     true,
-			errContains: "invalid",
-		},
-		{
-			name: "invalid PromQL query - empty query should return error",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypePromQL,
-						Spec: qbtypes.PromQuery{
-							Name:  "prom_query",
-							Query: "",
-						},
-					},
-				},
-			},
-			wantErr:     true,
-			errContains: "query expression is required",
-		},
-		{
-			name: "invalid PromQL query - syntax error should return error",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypePromQL,
-						Spec: qbtypes.PromQuery{
-							Name:  "prom_query",
-							Query: "rate(http_requests_total[5m",
-						},
-					},
-				},
-			},
-			wantErr:     true,
-			errContains: "unclosed left parenthesis",
-		},
-		{
-			name: "invalid ClickHouse query - empty query should return error",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeClickHouseSQL,
-						Spec: qbtypes.ClickHouseQuery{
-							Name:  "ch_query",
-							Query: "",
-						},
-					},
-				},
-			},
-			wantErr:     true,
-			errContains: "query expression is required",
-		},
-		{
-			name: "invalid ClickHouse query - syntax error should return error",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeClickHouseSQL,
-						Spec: qbtypes.ClickHouseQuery{
-							Name:  "ch_query",
-							Query: "SELECT * FROM metrics WHERE",
-						},
-					},
-				},
-			},
-			wantErr:     true,
-			errContains: "query parse error",
-		},
-		{
-			name: "invalid formula query - empty expression should return error",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeFormula,
-						Spec: qbtypes.QueryBuilderFormula{
-							Name:       "formula_query",
-							Expression: "",
-						},
-					},
-				},
-			},
-			wantErr:     true,
-			errContains: "formula expression cannot be blank",
-		},
-		{
-			name: "invalid trace operator query - empty expression should return error",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeTraceOperator,
-						Spec: qbtypes.QueryBuilderTraceOperator{
-							Name:       "trace_operator",
-							Expression: "",
-						},
-					},
-				},
-			},
-			wantErr:     true,
-			errContains: "expression cannot be empty",
-		},
-		{
-			name: "all queries disabled should return error",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeBuilder,
-						Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
-							Name:     "metric_query",
-							Disabled: true,
-							Signal:   telemetrytypes.SignalMetrics,
-							Aggregations: []qbtypes.MetricAggregation{
-								{
-									MetricName: "cpu_usage",
-								},
-							},
-						},
-					},
-					{
-						Type: qbtypes.QueryTypePromQL,
-						Spec: qbtypes.PromQuery{
-							Name:     "prom_query",
-							Query:    "rate(http_requests_total[5m])",
-							Disabled: true,
-						},
-					},
-				},
-			},
-			wantErr:     true,
-			errContains: "all queries are disabled",
-		},
-		{
-			name: "mixed disabled and enabled queries should pass",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeBuilder,
-						Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
-							Name:     "metric_query",
-							Disabled: true,
-							Signal:   telemetrytypes.SignalMetrics,
-							Aggregations: []qbtypes.MetricAggregation{
-								{
-									MetricName: "cpu_usage",
-								},
-							},
-						},
-					},
-					{
-						Type: qbtypes.QueryTypePromQL,
-						Spec: qbtypes.PromQuery{
-							Name:     "prom_query",
-							Query:    "rate(http_requests_total[5m])",
-							Disabled: false,
-						},
-					},
-				},
-			},
-			wantErr: false,
-		},
-		{
-			name: "multiple valid queries should pass",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeBuilder,
-						Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
-							Name:   "metric_query",
-							Signal: telemetrytypes.SignalMetrics,
-							Aggregations: []qbtypes.MetricAggregation{
-								{
-									MetricName: "cpu_usage",
-								},
-							},
-						},
-					},
-					{
-						Type: qbtypes.QueryTypePromQL,
-						Spec: qbtypes.PromQuery{
-							Name:  "prom_query",
-							Query: "rate(http_requests_total[5m])",
-						},
-					},
-					{
-						Type: qbtypes.QueryTypeClickHouseSQL,
-						Spec: qbtypes.ClickHouseQuery{
-							Name:  "ch_query",
-							Query: "SELECT count(*) FROM metrics WHERE metric_name = 'cpu_usage'",
-						},
-					},
-				},
-			},
-			wantErr: false,
-		},
-		{
-			name: "invalid query in multiple queries should return error",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryTypeBuilder,
-						Spec: qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]{
-							Name:   "metric_query",
-							Signal: telemetrytypes.SignalMetrics,
-							Aggregations: []qbtypes.MetricAggregation{
-								{
-									MetricName: "cpu_usage",
-								},
-							},
-						},
-					},
-					{
-						Type: qbtypes.QueryTypePromQL,
-						Spec: qbtypes.PromQuery{
-							Name:  "prom_query",
-							Query: "invalid promql syntax [",
-						},
-					},
-				},
-			},
-			wantErr:     true,
-			errContains: "query parse error",
-		},
-		{
-			name: "unknown query type should return error",
-			compositeQuery: &CompositeQuery{
-				QueryType: QueryTypeBuilder,
-				PanelType: PanelTypeGraph,
-				Queries: []qbtypes.QueryEnvelope{
-					{
-						Type: qbtypes.QueryType{String: valuer.NewString("invalid_query_type")},
-						Spec: qbtypes.PromQuery{
-							Name:  "prom_query",
-							Query: "rate(http_requests_total[5m])",
-						},
-					},
-				},
-			},
-			wantErr:     true,
-			errContains: "unknown query type",
-		},
-	}
-
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			err := tt.compositeQuery.Validate()
-			if tt.wantErr {
-				require.Error(t, err)
-				if tt.errContains != "" {
-					require.Contains(t, err.Error(), tt.errContains)
-				}
-			} else {
-				require.NoError(t, err)
-			}
-		})
-	}
-}
--- a/pkg/query-service/rules/threshold_rule.go
+++ b/pkg/query-service/rules/threshold_rule.go
@@ -133,7 +133,7 @@ func (r *ThresholdRule) prepareQueryRange(ctx context.Context, ts time.Time) (*v
 			Variables: make(map[string]interface{}, 0),
 			NoCache:   true,
 		}
-		querytemplate.AssignReservedVars(params.Variables, start, end)
+		querytemplate.AssignReservedVarsV3(params)
 		for name, chQuery := range r.ruleCondition.CompositeQuery.ClickHouseQueries {
 			if chQuery.Disabled {
 				continue
--- a/pkg/query-service/utils/queryTemplate/vars.go
+++ b/pkg/query-service/utils/queryTemplate/vars.go
@@ -2,21 +2,26 @@ package querytemplate

 import (
 	"fmt"
+
+	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
 )

-func AssignReservedVars(variables map[string]interface{}, start int64, end int64) {
-	variables["start_timestamp"] = start / 1000
-	variables["end_timestamp"] = end / 1000
+// AssignReservedVars assigns values for go template vars. assumes that
+// model.QueryRangeParamsV3.Start and End are Unix Nano timestamps
+func AssignReservedVarsV3(queryRangeParams *v3.QueryRangeParamsV3) {
+	queryRangeParams.Variables["start_timestamp"] = queryRangeParams.Start / 1000
+	queryRangeParams.Variables["end_timestamp"] = queryRangeParams.End / 1000

-	variables["start_timestamp_ms"] = start
-	variables["end_timestamp_ms"] = end
+	queryRangeParams.Variables["start_timestamp_ms"] = queryRangeParams.Start
+	queryRangeParams.Variables["end_timestamp_ms"] = queryRangeParams.End

-	variables["SIGNOZ_START_TIME"] = start
-	variables["SIGNOZ_END_TIME"] = end
+	queryRangeParams.Variables["SIGNOZ_START_TIME"] = queryRangeParams.Start
+	queryRangeParams.Variables["SIGNOZ_END_TIME"] = queryRangeParams.End

-	variables["start_timestamp_nano"] = start * 1e6
-	variables["end_timestamp_nano"] = end * 1e6
+	queryRangeParams.Variables["start_timestamp_nano"] = queryRangeParams.Start * 1e6
+	queryRangeParams.Variables["end_timestamp_nano"] = queryRangeParams.End * 1e6
+
+	queryRangeParams.Variables["start_datetime"] = fmt.Sprintf("toDateTime(%d)", queryRangeParams.Start/1000)
+	queryRangeParams.Variables["end_datetime"] = fmt.Sprintf("toDateTime(%d)", queryRangeParams.End/1000)

-	variables["start_datetime"] = fmt.Sprintf("toDateTime(%d)", start/1000)
-	variables["end_datetime"] = fmt.Sprintf("toDateTime(%d)", end/1000)
 }
--- a/pkg/telemetrymetrics/const.go
+++ b/pkg/telemetrymetrics/const.go
@@ -2,6 +2,11 @@ package telemetrymetrics

 import "github.com/SigNoz/signoz/pkg/types/telemetrytypes"

+const (
+	DiagnosticColumnCumulativeHistLeSum   = "__diagnostic_cumulative_hist_le_sum"
+	DiagnosticColumnCumulativeHistLeCount = "__diagnostic_cumulative_hist_le_count"
+)
+
 var IntrinsicFields = []string{
 	"__normalized",
 	"temporality",
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Nikhil Mantri	702831e26b	Merge branch 'main' into feat/warnings_for_empty_data	2026-01-14 13:57:15 +05:30
nikhilmantri0902	5c6346df11	chore: remove array sort	2026-01-13 17:20:02 +05:30
nikhilmantri0902	860c3e70ac	chore: added diagnostic columns logic	2026-01-13 14:10:21 +05:30
nikhilmantri0902	3d8bfd47fa	fix: add alias to cached data and also set back alias from cache when present	2026-01-12 17:49:31 +05:30
nikhilmantri0902	f01b00bd5c	chore: return warnings seperately	2026-01-10 23:15:51 +05:30
nikhilmantri0902	120317321c	chore: return warnings seperately	2026-01-10 22:36:38 +05:30
nikhilmantri0902	895e92893c	chore: query and postprocessmetric query modification	2026-01-10 18:56:14 +05:30
				`@@ -1 +0,0 @@`
				<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>
				`@@ -1 +0,0 @@`
				`export { OnboardingQuestionHeader } from './OnboardingQuestionHeader';`